Merge pull request #218 from develop

release: develop to main — seekable timeline, Ultra Fast speed, algorithm tips, Turnstile fix

Author: ayoub3bidi

.env.example

@@ -7,6 +7,10 @@ VITE_SUPABASE_ANON_KEY=your-anon-key
 # Google Identity Services — Web OAuth client ID (public)
 VITE_GOOGLE_WEB_CLIENT_ID=your-web-client-id.apps.googleusercontent.com
 
+# Cloudflare Turnstile (signup bot gate) — public site key only
+# Matching secret key is a Supabase Edge Function secret: TURNSTILE_SECRET_KEY
+VITE_TURNSTILE_SITE_KEY=0x4AAAAA...your-turnstile-site-key
+
 # PostHog analytics (optional — skip in local dev)
 VITE_POSTHOG_API_HOST=https://us.i.posthog.com
 VITE_POSTHOG_API_KEY=phc_your_project_token

.github/workflows/deploy-cloudflare.yml

@@ -52,6 +52,7 @@ jobs:
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           VITE_GOOGLE_WEB_CLIENT_ID: ${{ secrets.VITE_GOOGLE_WEB_CLIENT_ID }}
+          VITE_TURNSTILE_SITE_KEY: ${{ secrets.VITE_TURNSTILE_SITE_KEY }}
           VITE_POSTHOG_API_KEY: ${{ secrets.VITE_POSTHOG_API_KEY }}
           VITE_POSTHOG_API_HOST: ${{ github.event.workflow_run.head_branch == 'main' && 'https://e.bayanflow.com' || 'https://e.dev.bayanflow.com' }}
 

.github/workflows/preview-cloudflare.yml

@@ -58,6 +58,7 @@ jobs:
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           VITE_GOOGLE_WEB_CLIENT_ID: ${{ secrets.VITE_GOOGLE_WEB_CLIENT_ID }}
+          VITE_TURNSTILE_SITE_KEY: ${{ secrets.VITE_TURNSTILE_SITE_KEY }}
           VITE_POSTHOG_API_KEY: ${{ secrets.VITE_POSTHOG_API_KEY }}
           VITE_POSTHOG_API_HOST: https://e.dev.bayanflow.com
 

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,
 };
 ```
 

index.html

@@ -216,6 +216,12 @@
         }
       })();
     </script>
+    <!-- Cloudflare Turnstile — invisible CAPTCHA for bot signup prevention -->
+    <script
+      src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+      async
+      defer
+    ></script>
   </head>
   <body>
     <div id="root"></div>

public/_headers

@@ -5,7 +5,7 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=(), identity-credentials-get=(self "https://accounts.google.com")
   # Pyodide CDN origins: jsDelivr below; custom VITE_PYODIDE_CDN_BASE origins appended at build (vite.config.js)
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://*.posthog.com https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com; connect-src 'self' blob: https://*.posthog.com https://e.bayanflow.com https://e.dev.bayanflow.com https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com; object-src 'none'; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://*.posthog.com https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com https://challenges.cloudflare.com; connect-src 'self' blob: https://*.posthog.com https://e.bayanflow.com https://e.dev.bayanflow.com https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com https://challenges.cloudflare.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com https://challenges.cloudflare.com; object-src 'none'; base-uri 'self'; form-action 'self'
   Link: <https://bayanflow.com/sitemap.xml>; rel="sitemap"
   Link: </.well-known/api-catalog>; rel="api-catalog"
   Link: </.well-known/agent-card.json>; rel="service-desc"

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

scripts/cspHeaders.js

@@ -171,5 +171,23 @@ export function assertAuthCspDirectives(csp, source) {
     );
   }
 
+  if (!scriptSrc?.includes('https://challenges.cloudflare.com')) {
+    throw new Error(
+      `${source}: script-src must include https://challenges.cloudflare.com (Turnstile)`
+    );
+  }
+
+  if (!connectSrc?.includes('https://challenges.cloudflare.com')) {
+    throw new Error(
+      `${source}: connect-src must include https://challenges.cloudflare.com (Turnstile)`
+    );
+  }
+
+  if (!frameSrc?.includes('https://challenges.cloudflare.com')) {
+    throw new Error(
+      `${source}: frame-src must include https://challenges.cloudflare.com (Turnstile)`
+    );
+  }
+
   return { connectSrc: connectSrc ?? '', imgSrc: imgSrc ?? '' };
 }