Merge pull request #216 from fix/betabloom-feedback

feat: BetaBloom feedback — seekable timeline, Ultra Fast speed, algorithm use-case tips, and landing page critical-path improvements

Author: ayoub3bidi

AGENTS.md

@@ -67,7 +67,7 @@ When docs drift, trust runtime config:
 - Complexity panel: interactive SVG chart with log/linear toggle; best/average/worst time + space complexity
 - Graph algorithms: `GraphAlgorithmCategoryVisualizer` routes node-link to `GraphVisualizer` and matrix (Floyd-Warshall) to `GraphAlgorithmMatrixVisualizer`; `GraphScenarioDropdown` for preset scenarios
 - Searching category: `SearchingCategoryVisualizer` routes array-based to `ArrayVisualizer` and node-link (DFS/BFS graph) to `GraphVisualizer`
-- Animation speeds: SLOW 8000ms, MEDIUM 4800ms, FAST 2400ms, VERY_FAST 1200ms
+- Animation speeds: SLOW 5000ms, MEDIUM 3000ms, FAST 1500ms, VERY_FAST 700ms, ULTRA_FAST 350ms
 
 ## Ship It test ladder
 
@@ -113,13 +113,13 @@ See reference doc for full checklists (JS, Python, pseudocode, sound, insight, t
 - **Anonymous tier (no account):**
   - 18 of 45 algorithms (curated starter set across all 5 categories; see `src/constants/algorithmEntitlements.js`)
   - 12 visualizations per session (localStorage counter `anon_viz_count`, resets on sign-in)
-  - Autoplay only, default speed (MEDIUM: 4800ms)
+  - Autoplay only, default speed (MEDIUM: 3000ms)
   - Complexity panel: 2 views per completion (localStorage `anon_complexity_views`), then blur overlay + sign-in gate
   - No manual controls, speed adjustment, or category-specific controls (grid size locked to MEDIUM, sort order locked to ascending, graph scenarios disabled)
   - No Code Panel, Insight Panel, Video Export, Sound, or Fullscreen
 - **Free tier (Google sign-in):**
   - All 45 algorithms, unlimited visualizations
-  - Manual controls, all 4 speed presets
+  - Manual controls, all 5 speed presets
   - Full complexity panel access, all category-specific controls
   - Code Panel, Insight Panel (with My Notes tab), Sound, Fullscreen
   - Favorite algorithms: up to 20 slots (`FREE_TIER_FAVORITE_SLOT_LIMIT` in `src/constants/personalLearning.js`); stored in Supabase `favorite_algorithms`

docs/AGENTS_REFERENCE.md

@@ -68,7 +68,7 @@
 
 ### Shared product features
 
-- Playback: manual vs autoplay (`VISUALIZATION_MODES`), four speed presets (`ANIMATION_SPEEDS`)
+- Playback: manual vs autoplay (`VISUALIZATION_MODES`), five speed presets (`ANIMATION_SPEEDS`)
 - Mobile: horizontal swipe for manual step forward/back (`useSwipe`), one-time swipe tutorial (`SwipeTutorial`)
 - Full-screen visualization mode (`useFullScreen`) reuses the same control panel and visualizer registry
 - Light/dark theme with system preference fallback (`ThemeContext`, `ThemeToggle`, `useTheme`)
@@ -419,6 +419,7 @@ Migrations: `20260710140000_pro_waitlist.sql`, `20260710150000_pro_waitlist_attr
 - Full-screen mode uses the same `ControlPanel` and visualizer registry as normal mode.
 - Lazy panels (`PythonCodePanel`, `AlgorithmInsightPanel`) must remain optional overlays and should not block the main visualization path.
 - Swipe stepping applies only in manual playback mode on touch devices.
+- The step progress bar is seekable: Free-tier users (non-gated) get an invisible full-width range input driving seeking, a circular grab handle (`seek-thumb`) marking the fill edge, and the `controls.dragToSeek` microcopy under the bar. Anonymous/gated users see the **same grab handle** and a persistent `controls.dragToSeekLocked` microcopy ("Sign in to skip steps"), but no range input; the timeline wrapper is a focusable button (`role="button"`) whose click or Enter/Space fires `onGatedFeatureClick('timeline_scrub')` → `SignInPromptModal` (`featureGate.timeline_scrub`).
 
 ## Sound And Export Notes
 

docs/ARCHITECTURE.md

@@ -688,10 +688,11 @@ Speed is user-configurable via constants:
 
 ```javascript
 export const ANIMATION_SPEEDS = {
-  SLOW: 8000,
-  MEDIUM: 4800,
-  FAST: 2400,
-  VERY_FAST: 1200,
+  SLOW: 5000,
+  MEDIUM: 3000,
+  FAST: 1500,
+  VERY_FAST: 700,
+  ULTRA_FAST: 350,
 };
 ```
 

public/markdown/app.md

@@ -11,7 +11,7 @@
 
 ## Features
 
-- Step-by-step animation with configurable speed (Slow/Medium/Fast/Very Fast)
+- Step-by-step animation with configurable speed (Slow/Medium/Fast/Very Fast/Ultra Fast)
 - Real-time time and space complexity analysis
 - Python code execution in the browser via Pyodide (WebAssembly)
 - HD video export with optional sound

src/AppRoutes.jsx

@@ -4,21 +4,38 @@
  * See LICENSE for details.
  */
 
+import { lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { SpinnerGap } from '@phosphor-icons/react';
 import { useAuth } from './hooks/useAuth.js';
 import { AUTH_CALLBACK_PATH } from './services/authService.js';
 import BannedScreen from './components/BannedScreen.jsx';
 import LandingPage from './pages/LandingPage.jsx';
-import VisualizerApp from './pages/VisualizerApp.jsx';
-import Roadmap from './pages/Roadmap.jsx';
-import PrivacyPolicy from './pages/PrivacyPolicy.jsx';
-import TermsOfUse from './pages/TermsOfUse.jsx';
-import GoogleAuthCallback from './pages/GoogleAuthCallback.jsx';
-import ProfileSettingsPage from './pages/ProfileSettingsPage.jsx';
-import ProComingSoonPage from './pages/ProComingSoonPage.jsx';
-import NotFoundPage from './pages/NotFoundPage.jsx';
 import RequireAuth from './components/RequireAuth.jsx';
 
+const VisualizerApp = lazy(() => import('./pages/VisualizerApp.jsx'));
+const Roadmap = lazy(() => import('./pages/Roadmap.jsx'));
+const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy.jsx'));
+const TermsOfUse = lazy(() => import('./pages/TermsOfUse.jsx'));
+const GoogleAuthCallback = lazy(() => import('./pages/GoogleAuthCallback.jsx'));
+const ProfileSettingsPage = lazy(
+  () => import('./pages/ProfileSettingsPage.jsx')
+);
+const ProComingSoonPage = lazy(() => import('./pages/ProComingSoonPage.jsx'));
+const NotFoundPage = lazy(() => import('./pages/NotFoundPage.jsx'));
+
+function RouteFallback() {
+  return (
+    <div
+      className="flex min-h-40 items-center justify-center"
+      role="status"
+      aria-label="Loading page"
+    >
+      <SpinnerGap className="size-6 animate-spin text-text-secondary" />
+    </div>
+  );
+}
+
 function AppRoutes() {
   const { accessBlock, isLoading } = useAuth();
 
@@ -27,24 +44,26 @@ function AppRoutes() {
   }
 
   return (
-    <Routes>
-      <Route path="/" element={<LandingPage />} />
-      <Route path="/app" element={<VisualizerApp />} />
-      <Route path="/roadmap" element={<Roadmap />} />
-      <Route path="/pro" element={<ProComingSoonPage />} />
-      <Route path={AUTH_CALLBACK_PATH} element={<GoogleAuthCallback />} />
-      <Route path="/privacy" element={<PrivacyPolicy />} />
-      <Route path="/terms" element={<TermsOfUse />} />
-      <Route
-        path="/settings/profile"
-        element={
-          <RequireAuth>
-            <ProfileSettingsPage />
-          </RequireAuth>
-        }
-      />
-      <Route path="*" element={<NotFoundPage />} />
-    </Routes>
+    <Suspense fallback={<RouteFallback />}>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/app" element={<VisualizerApp />} />
+        <Route path="/roadmap" element={<Roadmap />} />
+        <Route path="/pro" element={<ProComingSoonPage />} />
+        <Route path={AUTH_CALLBACK_PATH} element={<GoogleAuthCallback />} />
+        <Route path="/privacy" element={<PrivacyPolicy />} />
+        <Route path="/terms" element={<TermsOfUse />} />
+        <Route
+          path="/settings/profile"
+          element={
+            <RequireAuth>
+              <ProfileSettingsPage />
+            </RequireAuth>
+          }
+        />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </Suspense>
   );
 }
 

src/AppRoutes.test.jsx

@@ -90,7 +90,7 @@ describe('AppRoutes', () => {
     expect(screen.queryByTestId('banned-screen')).not.toBeInTheDocument();
   });
 
-  it('does not show BannedScreen when no access block', () => {
+  it('does not show BannedScreen when no access block', async () => {
     vi.mocked(useAuth).mockReturnValue({
       accessBlock: null,
       isLoading: false,
@@ -99,7 +99,7 @@ describe('AppRoutes', () => {
     renderRoutes('/app');
 
     expect(screen.queryByTestId('banned-screen')).not.toBeInTheDocument();
-    expect(screen.getByTestId('visualizer-app')).toBeInTheDocument();
+    await screen.findByTestId('visualizer-app');
   });
 
   it('renders LandingPage on /', () => {
@@ -113,48 +113,48 @@ describe('AppRoutes', () => {
     expect(screen.getByTestId('landing-page')).toBeInTheDocument();
   });
 
-  it('renders ProComingSoonPage on /pro', () => {
+  it('renders ProComingSoonPage on /pro', async () => {
     vi.mocked(useAuth).mockReturnValue({
       accessBlock: null,
       isLoading: false,
     });
 
     renderRoutes('/pro');
 
-    expect(screen.getByTestId('pro-page')).toBeInTheDocument();
+    await screen.findByTestId('pro-page');
   });
 
-  it('renders PrivacyPolicy on /privacy', () => {
+  it('renders PrivacyPolicy on /privacy', async () => {
     vi.mocked(useAuth).mockReturnValue({
       accessBlock: null,
       isLoading: false,
     });
 
     renderRoutes('/privacy');
 
-    expect(screen.getByTestId('privacy')).toBeInTheDocument();
+    await screen.findByTestId('privacy');
   });
 
-  it('renders TermsOfUse on /terms', () => {
+  it('renders TermsOfUse on /terms', async () => {
     vi.mocked(useAuth).mockReturnValue({
       accessBlock: null,
       isLoading: false,
     });
 
     renderRoutes('/terms');
 
-    expect(screen.getByTestId('terms')).toBeInTheDocument();
+    await screen.findByTestId('terms');
   });
 
-  it('wraps /settings/profile in RequireAuth', () => {
+  it('wraps /settings/profile in RequireAuth', async () => {
     vi.mocked(useAuth).mockReturnValue({
       accessBlock: null,
       isLoading: false,
     });
 
     renderRoutes('/settings/profile');
 
-    expect(screen.getByTestId('require-auth')).toBeInTheDocument();
+    await screen.findByTestId('require-auth');
     expect(screen.getByTestId('profile-settings')).toBeInTheDocument();
   });
 });

src/components/AlgorithmTipToast.jsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Bayan Flow
+ * Licensed under Elastic License 2.0 OR Commercial
+ * See LICENSE for details.
+ */
+
+import { useEffect, useRef } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import { Lightbulb, X } from '@phosphor-icons/react';
+import {
+  getChromeTransition,
+  CHROME_DURATION_FAST,
+} from '../motion/chromeMotion';
+
+const TOAST_DURATION = 4000;
+
+/**
+ * Top-right motivational toast shown once per algorithm per session.
+ * Highlights the chosen algorithm's real-world value and career/interview angle.
+ */
+export default function AlgorithmTipToast({ algorithmKey, onClose }) {
+  const { t, i18n } = useTranslation();
+  const reduceMotion = useReducedMotion();
+  const isRTL = i18n.dir() === 'rtl';
+  const timerRef = useRef(null);
+
+  useEffect(() => {
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+    timerRef.current = window.setTimeout(() => {
+      onClose();
+    }, TOAST_DURATION);
+    return () => {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+    };
+  }, [algorithmKey, onClose]);
+
+  const message = t(`algorithmUses.${algorithmKey}`, {
+    defaultValue: '',
+  });
+
+  return (
+    <motion.div
+      role="status"
+      aria-live="polite"
+      initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
+      transition={getChromeTransition(reduceMotion, CHROME_DURATION_FAST)}
+      className={`fixed top-4 ${isRTL ? 'left-4' : 'right-4'} z-50 max-w-sm rounded-xl border border-[var(--color-border-strong)] bg-surface-elevated px-4 py-3 shadow-lg`}
+    >
+      <div className="flex items-start gap-2.5">
+        <Lightbulb
+          size={18}
+          weight="fill"
+          className="shrink-0 mt-0.5 text-amber-500"
+          aria-hidden="true"
+        />
+        <div className="min-w-0 flex-1">
+          <p className="text-xs font-bold uppercase tracking-wide text-amber-600 dark:text-amber-400">
+            {t('app.algorithmTipTitle')}
+          </p>
+          {message ? (
+            <p className="mt-0.5 text-sm leading-relaxed text-text-primary">
+              {message}
+            </p>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('common.close')}
+          className="shrink-0 rounded p-0.5 text-text-tertiary transition-colors hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
+        >
+          <X size={14} weight="bold" />
+        </button>
+      </div>
+    </motion.div>
+  );
+}

src/components/AlgorithmTipToast.test.jsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bayan Flow
+ * Licensed under Elastic License 2.0 OR Commercial
+ * See LICENSE for details.
+ */
+
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { act, renderWithI18n, screen, fireEvent } from '../test/testUtils';
+import AlgorithmTipToast from './AlgorithmTipToast';
+
+describe('AlgorithmTipToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders the tip title and use-case message for the algorithm', () => {
+    renderWithI18n(
+      <AlgorithmTipToast algorithmKey="dijkstra" onClose={vi.fn()} />
+    );
+
+    expect(screen.getByText('Why it matters')).toBeInTheDocument();
+    expect(screen.getByText(/GPS routing/)).toBeInTheDocument();
+  });
+
+  it('exposes the message to assistive technology', () => {
+    renderWithI18n(
+      <AlgorithmTipToast algorithmKey="dijkstra" onClose={vi.fn()} />
+    );
+
+    const toast = screen.getByRole('status');
+    expect(toast).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('calls onClose when the close button is clicked', () => {
+    const onClose = vi.fn();
+    renderWithI18n(
+      <AlgorithmTipToast algorithmKey="dijkstra" onClose={onClose} />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('auto-dismisses after 4 seconds', () => {
+    const onClose = vi.fn();
+    renderWithI18n(
+      <AlgorithmTipToast algorithmKey="dijkstra" onClose={onClose} />
+    );
+
+    expect(onClose).not.toHaveBeenCalled();
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});