diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 2f72ae3d..c54a6b99 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -1,12 +1,14 @@
+import { lazy, Suspense } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { Workspace } from './pages/Workspace';
-import { Ontology } from './pages/Ontology';
-import { Agents } from './pages/Agents';
-import { Analytics } from './pages/Analytics';
 import { Settings } from './pages/Settings';
-import { Admin } from './pages/Admin';
-import { Backend } from './pages/Backend';
+// Rarely-visited pages are code-split out of the main bundle (live-audit perf).
+const Ontology = lazy(() => import('./pages/Ontology').then((m) => ({ default: m.Ontology })));
+const Agents = lazy(() => import('./pages/Agents').then((m) => ({ default: m.Agents })));
+const Analytics = lazy(() => import('./pages/Analytics').then((m) => ({ default: m.Analytics })));
+const Admin = lazy(() => import('./pages/Admin').then((m) => ({ default: m.Admin })));
+const Backend = lazy(() => import('./pages/Backend').then((m) => ({ default: m.Backend })));
 import { RequireRole } from './components/RequireRole';
 import { canAccessAdmin, canAccessBackend } from './lib/roleAccess';
 import { Signin } from './pages/Signin';
@@ -102,6 +104,7 @@ function AuthenticatedApp() {
       <GraphProvider>
         <ViewModeProvider>
         <Layout>
+          <Suspense fallback={<div className="h-full w-full flex items-center justify-center text-gray-400 text-sm">Loading…</div>}>
           <Routes>
             <Route path="/" element={<Workspace />} />
             <Route path="/workspace" element={<Workspace />} />
@@ -113,6 +116,7 @@ function AuthenticatedApp() {
             <Route path="/backend" element={<RequireRole can={canAccessBackend}><Backend /></RequireRole>} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
+          </Suspense>
         </Layout>
         </ViewModeProvider>
       </GraphProvider>
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index bce2b4eb..b56dbc22 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -262,7 +262,10 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       }
     } : { where: {} },
     fetchPolicy: currentGraph ? 'cache-and-network' : 'cache-only',
-    pollInterval: currentGraph ? 2000 : 0,
+    // Cross-client freshness without the 2s idle hammer: poll every 15s and skip
+    // the tick entirely while the tab is hidden. Own edits still refetch instantly.
+    pollInterval: currentGraph ? 15000 : 0,
+    skipPollAttempt: () => typeof document !== 'undefined' && document.visibilityState !== 'visible',
     errorPolicy: 'all'
   });
 
@@ -277,7 +280,10 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       }
     } : { where: {} },
     fetchPolicy: currentGraph ? 'cache-and-network' : 'cache-only',
-    pollInterval: currentGraph ? 2000 : 0,
+    // Cross-client freshness without the 2s idle hammer: poll every 15s and skip
+    // the tick entirely while the tab is hidden. Own edits still refetch instantly.
+    pollInterval: currentGraph ? 15000 : 0,
+    skipPollAttempt: () => typeof document !== 'undefined' && document.visibilityState !== 'visible',
     errorPolicy: 'all'
   });
 
@@ -4194,6 +4200,35 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     };
   }, []);
 
+  // Seed the minimap from the laid-out graph on load. The tick-based publish
+  // (in the simulation tick) only runs while the sim is ticking; with one-shot
+  // physics the graph settles and stops, so without this the minimap showed
+  // "No nodes yet" until the user clicked a node. Publish a few times over the
+  // first few seconds (covers fast + slow settles), then stop — no idle cost.
+  useEffect(() => {
+    if (!currentGraph) return undefined;
+    let n = 0;
+    const publish = () => {
+      const sim = simulationRef.current;
+      const upd = (window as { updateMiniMapPositions?: (p: Record<string, { x: number; y: number }>) => void }).updateMiniMapPositions;
+      if (!sim || !upd) return;
+      const simNodes = sim.nodes() as { id: string; x?: number; y?: number; type?: string }[];
+      if (!simNodes?.length) return;
+      const positions: Record<string, { x: number; y: number }> = {};
+      const types: Record<string, string> = {};
+      for (const nd of simNodes) {
+        if (nd.x !== undefined && nd.y !== undefined) { positions[nd.id] = { x: nd.x, y: nd.y }; types[nd.id] = nd.type as string; }
+      }
+      if (Object.keys(positions).length) {
+        upd(positions);
+        (window as { updateMiniMapTypes?: (t: Record<string, string>) => void }).updateMiniMapTypes?.(types);
+      }
+    };
+    const id = setInterval(() => { publish(); if (++n >= 5) clearInterval(id); }, 800);
+    publish();
+    return () => clearInterval(id);
+  }, [currentGraph?.id, workItemsData?.workItems?.length]);
+
   // Center on specific node
   const centerOnNode = useCallback((nodeId?: string) => {
     const nodeToCenter = nodeId 
@@ -4817,9 +4852,12 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       
       const message = err.message || err.toString();
       
-      // Network/connection errors
+      // Network/connection errors — keep dev hints (localhost URL) out of the
+      // hosted build; production users get a generic, actionable message.
       if (message.includes('NetworkError') || message.includes('fetch')) {
-        return "Cannot connect to GraphDone server. Please check if the server is running at http://localhost:4127";
+        return import.meta.env.DEV
+          ? `Cannot connect to GraphDone server. Please check the server is running at ${import.meta.env.VITE_API_URL || 'http://localhost:4127'}`
+          : "Can't reach GraphDone right now. Please check your connection and try again.";
       }
       
       // GraphQL/Database errors
@@ -4866,7 +4904,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
                   {errorMessage}
                 </div>
                 
-                {isNetworkError && (
+                {isNetworkError && import.meta.env.DEV && (
                   <div className="text-gray-400 text-sm space-y-2">
                     <div>💡 <strong>Quick fixes:</strong></div>
                     <div>• Run <code className="bg-gray-800 px-2 py-1 rounded">./start</code> to start the server</div>
@@ -5038,11 +5076,17 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
 
   return (
     <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none" data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined} data-simplify={isSimplified ? 'true' : undefined} data-dots={isDotMode ? 'true' : undefined}>
-      <svg 
-        ref={svgRef} 
-        className="w-full h-full" 
+      <svg
+        ref={svgRef}
+        className="w-full h-full"
+        role="img"
+        aria-label="Interactive work-item dependency graph"
+        aria-describedby="graph-a11y-desc"
       />
-      
+      <p id="graph-a11y-desc" className="sr-only">
+        Force-directed graph of work items and their dependencies. Use the view switcher to see the same data as a list, table, or board, which are keyboard-navigable.
+      </p>
+
       
       {/* Empty State Overlay */}
       {showEmptyStateOverlay && (
diff --git a/packages/web/src/components/MobileBottomNav.tsx b/packages/web/src/components/MobileBottomNav.tsx
index 814a0607..7c397194 100644
--- a/packages/web/src/components/MobileBottomNav.tsx
+++ b/packages/web/src/components/MobileBottomNav.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
@@ -21,6 +21,16 @@ export function MobileBottomNav() {
   const navigate = useNavigate();
   const location = useLocation();
   const [moreOpen, setMoreOpen] = useState(false);
+  const sheetRef = useRef<HTMLDivElement>(null);
+
+  // The "More" sheet is a modal: close on Esc and move focus into it on open.
+  useEffect(() => {
+    if (!moreOpen) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setMoreOpen(false); };
+    document.addEventListener('keydown', onKey);
+    sheetRef.current?.focus();
+    return () => document.removeEventListener('keydown', onKey);
+  }, [moreOpen]);
 
   const onWorkspace = location.pathname === '/' || location.pathname === '/workspace';
   const goView = (m: ViewMode) => {
@@ -83,8 +93,13 @@ export function MobileBottomNav() {
         >
           <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
           <div
+            ref={sheetRef}
             data-testid="mobile-more-sheet"
-            className="relative bg-gray-900 border-t border-gray-700 rounded-t-2xl p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] shadow-2xl max-h-[80vh] overflow-y-auto"
+            role="dialog"
+            aria-modal="true"
+            aria-label="More navigation"
+            tabIndex={-1}
+            className="relative bg-gray-900 border-t border-gray-700 rounded-t-2xl p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] shadow-2xl max-h-[80vh] overflow-y-auto outline-none"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="mx-auto mb-3 h-1 w-10 rounded-full bg-gray-600" />
diff --git a/packages/web/src/components/ViewSwitcher.tsx b/packages/web/src/components/ViewSwitcher.tsx
index b29de1c7..205260ae 100644
--- a/packages/web/src/components/ViewSwitcher.tsx
+++ b/packages/web/src/components/ViewSwitcher.tsx
@@ -50,14 +50,17 @@ const viewOptions = [
 
 const ViewSwitcher: React.FC<ViewSwitcherProps> = ({ currentView, onViewChange, className = '' }) => {
   return (
-    <div className={`flex bg-gray-700 rounded-lg p-1 ${className}`}>
+    <div className={`flex bg-gray-700 rounded-lg p-1 ${className}`} role="tablist" aria-label="View mode">
       {viewOptions.map((option) => {
         const Icon = option.icon;
         const isActive = currentView === option.id;
-        
+
         return (
           <button
             key={option.id}
+            role="tab"
+            aria-selected={isActive}
+            aria-label={option.name}
             onClick={() => onViewChange(option.id)}
             className={`
               group relative flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200
diff --git a/packages/web/src/contexts/AuthContext.tsx b/packages/web/src/contexts/AuthContext.tsx
index 8d568a29..6bc3167b 100644
--- a/packages/web/src/contexts/AuthContext.tsx
+++ b/packages/web/src/contexts/AuthContext.tsx
@@ -56,13 +56,26 @@ export function AuthProvider({ children }: AuthProviderProps) {
   }, [meData]);
   
   useEffect(() => {
-    if (meError) {
-      // Token is invalid, clear it
+    if (!meError) return;
+    // Only log the user out on a GENUINE auth failure. A transient network/5xx
+    // blip must not wipe the token (that was silently logging guests out).
+    const isAuthFailure =
+      meError.graphQLErrors?.some((e: { extensions?: { code?: string } }) => e.extensions?.code === 'UNAUTHENTICATED') ||
+      (meError.networkError as { statusCode?: number } | null)?.statusCode === 401 ||
+      (meError.networkError as { statusCode?: number } | null)?.statusCode === 403;
+    if (isAuthFailure) {
       clearSession();
       setCurrentUser(null);
       setCurrentTeam(null);
-      setIsInitializing(false);
+    } else if (!currentUser) {
+      // Transient error — keep the session and hydrate from the cached user so a
+      // momentary backend hiccup leaves the app usable instead of bouncing to login.
+      const raw = getUserRaw();
+      if (raw) {
+        try { const u = JSON.parse(raw); setCurrentUser(u); setCurrentTeam(u.team ?? null); } catch { /* corrupt cache — ignore */ }
+      }
     }
+    setIsInitializing(false);
   }, [meError]);
 
   // Load saved session (localStorage if "keep me logged in", else sessionStorage)
diff --git a/packages/web/src/hooks/useAdaptiveQuality.ts b/packages/web/src/hooks/useAdaptiveQuality.ts
index 8fbab3c1..a215bb90 100644
--- a/packages/web/src/hooks/useAdaptiveQuality.ts
+++ b/packages/web/src/hooks/useAdaptiveQuality.ts
@@ -53,6 +53,8 @@ export function useAdaptiveQuality(): {
   }, [governor]);
 
   // FPS sampling: count frames per second, feed smoothed samples to the governor.
+  // Paused while the tab is hidden so we don't run a perpetual rAF loop in
+  // backgrounded tabs (no rendering to measure there anyway).
   useEffect(() => {
     let raf = 0;
     let frames = 0;
@@ -67,8 +69,12 @@ export function useAdaptiveQuality(): {
       }
       raf = requestAnimationFrame(loop);
     };
-    raf = requestAnimationFrame(loop);
-    return () => cancelAnimationFrame(raf);
+    const start = () => { if (!raf) { windowStart = performance.now(); frames = 0; raf = requestAnimationFrame(loop); } };
+    const stop = () => { if (raf) { cancelAnimationFrame(raf); raf = 0; } };
+    const onVisibility = () => (document.visibilityState === 'visible' ? start() : stop());
+    document.addEventListener('visibilitychange', onVisibility);
+    if (document.visibilityState === 'visible') start();
+    return () => { document.removeEventListener('visibilitychange', onVisibility); stop(); };
   }, [governor]);
 
   const setOverride = useCallback(
diff --git a/packages/web/src/pages/Signin.tsx b/packages/web/src/pages/Signin.tsx
index 0259e9dd..2e73ba02 100644
--- a/packages/web/src/pages/Signin.tsx
+++ b/packages/web/src/pages/Signin.tsx
@@ -82,7 +82,7 @@ const GET_SYSTEM_SETTINGS = gql`
   }
 `;
 
-export function Signin({ initialMagicLink = false }: { initialMagicLink?: boolean } = {}) {
+export function Signin({ initialMagicLink = true }: { initialMagicLink?: boolean } = {}) {
   const navigate = useNavigate();
   const { login: setAuthUser } = useAuth();
   const [searchParams] = useSearchParams();
@@ -584,9 +584,11 @@ export function Signin({ initialMagicLink = false }: { initialMagicLink?: boolea
           )}
 
           {/* Sign In Method Toggle */}
-          <div className="flex items-center justify-center gap-2">
+          <div className="flex items-center justify-center gap-2" role="tablist" aria-label="Sign-in method">
             <button
               type="button"
+              role="tab"
+              aria-selected={!useMagicLink}
               onClick={() => {
                 setUseMagicLink(false);
                 setMagicLinkSent(false);
@@ -594,7 +596,7 @@ export function Signin({ initialMagicLink = false }: { initialMagicLink?: boolea
               }}
               className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                 !useMagicLink
-                  ? 'bg-teal-600 text-white'
+                  ? 'bg-teal-700 text-white'
                   : 'bg-gray-700/50 text-gray-400 hover:bg-gray-600/50 hover:text-gray-300'
               }`}
             >
@@ -603,6 +605,8 @@ export function Signin({ initialMagicLink = false }: { initialMagicLink?: boolea
             </button>
             <button
               type="button"
+              role="tab"
+              aria-selected={useMagicLink}
               onClick={() => {
                 setUseMagicLink(true);
                 setMagicLinkSent(false);
@@ -610,7 +614,7 @@ export function Signin({ initialMagicLink = false }: { initialMagicLink?: boolea
               }}
               className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                 useMagicLink
-                  ? 'bg-gradient-to-r from-teal-600 to-cyan-600 text-white shadow-lg shadow-teal-500/30'
+                  ? 'bg-gradient-to-r from-teal-700 to-cyan-700 text-white shadow-lg shadow-teal-500/30'
                   : 'bg-gray-700/50 text-gray-400 hover:bg-gray-600/50 hover:text-gray-300'
               }`}
             >
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index a9b5862b..8dfeb140 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -69,6 +69,14 @@ export default defineConfig({
     sourcemap: false,
     rollupOptions: {
       output: {
+        // Split heavy vendors into separate, independently-cacheable chunks so the
+        // entry isn't one monolithic ~1.5MB file (live-audit perf finding).
+        manualChunks: {
+          react: ['react', 'react-dom', 'react-router-dom'],
+          apollo: ['@apollo/client', 'graphql'],
+          d3: ['d3'],
+          icons: ['lucide-react'],
+        },
         // Force new filenames to break cache
         entryFileNames: `assets/[name]-${Date.now()}.js`,
         chunkFileNames: `assets/[name]-${Date.now()}.js`,
diff --git a/playwright.config.ts b/playwright.config.ts
index 7ace5769..ae6d412f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -75,6 +75,23 @@ export default defineConfig({
       },
     },
 
+    /* LIVE Cloudflare user journey: drives the real production SPA as a guest on
+     * desktop + phone, recording .webm video + a labelled screenshot per step.
+     * Run via the unified harness:
+     *   TEST_URL=https://graphdone-cloud.pages.dev node tests/run-unified.mjs --profile live --out ...
+     * Heavy + network-bound; report-only, never part of the smoke gate. */
+    {
+      name: 'live-journey',
+      testMatch: /live-cloud-journey\.spec\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        video: 'on',
+        screenshot: 'on',
+        trace: 'retain-on-failure',
+        ignoreHTTPSErrors: true,
+      },
+    },
+
     /* Performance budgets (ADAPT-8). Lives in tests/perf, run via
      * `npm run test:perf`. Reads window.__graphPerf / API latency and asserts
      * budgets. Kept separate from the smoke gate so it can have its own
diff --git a/scripts/narrate-report.mjs b/scripts/narrate-report.mjs
index d8baee82..4d677872 100644
--- a/scripts/narrate-report.mjs
+++ b/scripts/narrate-report.mjs
@@ -81,12 +81,26 @@ const perf = PERF_ORDER.filter((k) => latestByMetric.has(k)).map((k) => {
   return { metric: k, label: PERF_LABELS[k] || k, value: m.value, unit: m.unit, better: m.better };
 });
 
+// Give the live-site journey clips a clean spoken name + a real description
+// (the raw attachment name is just the test title, which would otherwise be
+// read out twice). Falls back to the generic name for any other video clip.
+const liveClipMeta = (title) => {
+  const t = String(title || '').toLowerCase();
+  if (/phone|mobile/.test(t)) return { name: 'The mobile journey', note: 'On a phone, a guest lands on the list view, switches to the live graph, opens the navigation, and reaches settings — with no horizontal overflow.' };
+  if (/desktop/.test(t)) return { name: 'The desktop journey', note: 'On the desktop, a guest signs in, the live graph renders with real nodes and edges, and they open a node card, re-fit the view, and tour the pages.' };
+  return null;
+};
+
 const tour = [];
 if (mediaRun) {
   for (const s of mediaRun.report.sequences || []) {
     for (const c of s.cases || []) {
       for (const a of c.attachments || []) {
-        if (a.type === 'video') tour.push({ name: a.name || c.ref || `clip-${tour.length + 1}`, note: c.title || '', kind: 'video', runId: mediaRun.runId, href: a.href });
+        if (a.type !== 'video') continue;
+        const meta = liveClipMeta(c.title || a.name);
+        tour.push(meta
+          ? { name: meta.name, note: meta.note, kind: 'video', runId: mediaRun.runId, href: a.href }
+          : { name: a.name || c.ref || `clip-${tour.length + 1}`, note: c.title || '', kind: 'video', runId: mediaRun.runId, href: a.href });
       }
     }
   }
diff --git a/tests/e2e/reports/live-cloud-journey.spec.ts b/tests/e2e/reports/live-cloud-journey.spec.ts
new file mode 100644
index 00000000..aee741dc
--- /dev/null
+++ b/tests/e2e/reports/live-cloud-journey.spec.ts
@@ -0,0 +1,226 @@
+import { test, expect, Page, TestInfo } from '@playwright/test';
+
+/**
+ * LIVE Cloudflare user journey — drives the real production SPA
+ * (https://graphdone-cloud.pages.dev) exactly as a guest user would, on both
+ * desktop and a phone, recording web-friendly .webm video (the 'live-journey'
+ * Playwright project sets video:'on') plus a labelled screenshot per step.
+ *
+ * This is DOCUMENTATION + a live health check, not the smoke gate: every UI
+ * interaction is best-effort (tryStep) so the tour always completes and
+ * produces media, but the load-bearing invariant — a guest sees a graph render
+ * with real nodes on the live site — is asserted hard.
+ *
+ * Guest entry uses the proven recipe from GraphDone-Cloud/scripts/verify-live.mjs:
+ * mint a guest token from the live Worker, seed it into localStorage, reload.
+ * Output feeds the unified report (npm run test:unified) and the live dashboard.
+ */
+
+const LIVE = process.env.TEST_URL || 'https://graphdone-cloud.pages.dev';
+const API = process.env.LIVE_API_URL || 'https://graphdone-api.valpatel.workers.dev/api/graphql';
+
+const NODE_SEL = '.graph-container svg .node';
+const EDGE_SEL = '.graph-container svg .edge';
+
+async function mintGuest(page: Page): Promise<{ token: string; graphId: string | null }> {
+  let token = '';
+  for (let i = 0; i < 5 && !token; i++) {
+    try {
+      const r = await page.request.post(API, {
+        headers: { 'content-type': 'application/json' },
+        data: { query: 'mutation{guestLogin{token}}' },
+      });
+      token = (await r.json())?.data?.guestLogin?.token || '';
+    } catch { /* retry */ }
+    if (!token) await page.waitForTimeout(2000);
+  }
+  let graphId: string | null = null;
+  if (token) {
+    try {
+      const r = await page.request.post(API, {
+        headers: { 'content-type': 'application/json', authorization: 'Bearer ' + token },
+        data: { query: '{graphs{id name}}' },
+      });
+      graphId = (await r.json())?.data?.graphs?.[0]?.id || null;
+    } catch { /* graph optional; app can auto-select */ }
+  }
+  return { token, graphId };
+}
+
+async function countNodes(page: Page): Promise<number> {
+  return page.locator(NODE_SEL).count().catch(() => 0);
+}
+
+async function waitForGraph(page: Page, secs = 30): Promise<number> {
+  let n = 0;
+  for (let i = 0; i < secs; i++) {
+    n = await countNodes(page);
+    if (n > 0) break;
+    await page.waitForTimeout(1000);
+  }
+  return n;
+}
+
+function makeShooter(page: Page, testInfo: TestInfo) {
+  let step = 0;
+  const shots: string[] = [];
+  const shot = async (label: string) => {
+    step += 1;
+    const name = `${String(step).padStart(2, '0')}-${label}`;
+    const p = testInfo.outputPath(`${name}.png`);
+    try {
+      await page.screenshot({ path: p, fullPage: false });
+      await testInfo.attach(name, { path: p, contentType: 'image/png' });
+      shots.push(name);
+    } catch { /* page busy — skip this frame */ }
+  };
+  const tryStep = async (label: string, fn: () => Promise<void>) => {
+    try { await fn(); await page.waitForTimeout(600); await shot(label); }
+    catch { await shot(`${label}-unavailable`); }
+  };
+  return { shot, tryStep, shots: () => shots };
+}
+
+async function enterAsGuest(page: Page, shot: (l: string) => Promise<void>) {
+  // 1. Authentic landing: the real sign-in screen a first-time visitor sees.
+  await page.goto(LIVE + '/', { waitUntil: 'domcontentloaded' });
+  await page.waitForTimeout(2500);
+  await shot('signin-landing');
+
+  // 2. Best-effort: show the real "Continue as Guest" affordance + dialog.
+  try {
+    const guestBtn = page.getByRole('button', { name: /continue as guest/i }).first();
+    if (await guestBtn.isVisible({ timeout: 4000 })) {
+      await guestBtn.click({ timeout: 3000 });
+      await page.waitForTimeout(1200);
+      await shot('guest-dialog');
+    }
+  } catch { /* affordance may differ on the deployed build — injection below is authoritative */ }
+
+  // 3. Authoritative entry (verify-live recipe): mint + seed + reload.
+  const { token, graphId } = await mintGuest(page);
+  expect(token, 'live Worker minted a guest token').toBeTruthy();
+  await page.evaluate(({ t, gid }) => {
+    localStorage.setItem('authToken', t);
+    localStorage.setItem('currentUser', JSON.stringify({
+      id: '0303535c-21ad-4917-acab-ee26db864d18', role: 'GUEST', email: 'g@guest.local',
+      username: 'guest', name: 'Guest', isActive: true, isEmailVerified: true,
+    }));
+    if (gid) localStorage.setItem('currentGraphId', gid);
+  }, { t: token, gid: graphId });
+  await page.reload({ waitUntil: 'domcontentloaded' });
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DESKTOP journey (1440×900)
+// ─────────────────────────────────────────────────────────────────────────────
+test.describe('live cloud user journey — desktop @live', () => {
+  test.use({ viewport: { width: 1440, height: 900 } });
+
+  test('a guest explores the live graph on desktop', async ({ page }, testInfo) => {
+    test.setTimeout(150_000);
+    const errors: string[] = [];
+    page.on('pageerror', (e) => errors.push(e.message));
+    const { shot, tryStep } = makeShooter(page, testInfo);
+
+    await enterAsGuest(page, shot);
+
+    const nodes = await waitForGraph(page, 30);
+    await page.waitForTimeout(4000); // let the force layout settle for a clean frame
+    await shot('graph-overview');
+    expect(nodes, 'live guest graph renders nodes').toBeGreaterThan(0);
+
+    const edges = await page.locator(EDGE_SEL).count().catch(() => 0);
+    console.log(`[live-journey desktop] nodes=${nodes} edges=${edges} errors=${errors.length}`);
+
+    // Open a node's expand panel (PR-3 feature) — the core "drill into work" gesture.
+    await tryStep('open-node-card', async () => {
+      const opened = await page.evaluate(() => {
+        const n = document.querySelector('.graph-container svg .node');
+        const icon = n?.querySelector('.node-expand-icon') as HTMLElement | null;
+        if (icon) { icon.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window })); return true; }
+        return false;
+      });
+      if (!opened) throw new Error('no expand icon');
+      await page.waitForTimeout(1500);
+    });
+    await page.keyboard.press('Escape').catch(() => {});
+    await page.waitForTimeout(400);
+
+    // Zoom out / re-fit to show the whole graph composition.
+    await tryStep('zoom-to-fit', async () => {
+      await page.mouse.move(720, 450);
+      await page.mouse.wheel(0, -300);
+      await page.waitForTimeout(800);
+    });
+
+    // Tour the main pages a guest can reach.
+    for (const [label, route] of [
+      ['ontology-page', '/ontology'],
+      ['analytics-page', '/analytics'],
+      ['settings-page', '/settings'],
+    ] as const) {
+      await tryStep(label, async () => {
+        await page.goto(LIVE + route, { waitUntil: 'domcontentloaded' });
+        await page.waitForTimeout(2500);
+      });
+    }
+
+    // Admin is role-guarded — a guest should NOT get in. Capture the guard.
+    await tryStep('admin-guarded-for-guest', async () => {
+      await page.goto(LIVE + '/admin', { waitUntil: 'domcontentloaded' });
+      await page.waitForTimeout(2500);
+    });
+
+    expect(errors, `no uncaught JS errors (saw: ${errors.slice(0, 2).join(' | ')})`).toHaveLength(0);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// MOBILE journey (390×844)
+// ─────────────────────────────────────────────────────────────────────────────
+test.describe('live cloud user journey — mobile @live', () => {
+  test.use({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true });
+
+  test('a guest explores the live graph on a phone', async ({ page }, testInfo) => {
+    test.setTimeout(150_000);
+    const errors: string[] = [];
+    page.on('pageerror', (e) => errors.push(e.message));
+    const { shot, tryStep } = makeShooter(page, testInfo);
+
+    await enterAsGuest(page, shot);
+
+    // Phones default to the list/cards view, not the graph.
+    await page.waitForTimeout(4000);
+    await shot('mobile-default-view');
+
+    // No horizontal overflow is a hard mobile invariant.
+    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth);
+    console.log(`[live-journey mobile] horizontal-overflow=${overflow}px errors=${errors.length}`);
+
+    // Drive the bottom nav: Graph, then the "More" sheet.
+    await tryStep('mobile-graph-view', async () => {
+      const nav = page.getByTestId('mobile-bottom-nav');
+      const graphBtn = nav.getByText('Graph', { exact: true });
+      if (await graphBtn.isVisible({ timeout: 3000 })) await graphBtn.click();
+      else throw new Error('no bottom-nav Graph button');
+      await page.waitForTimeout(4000);
+    });
+
+    await tryStep('mobile-more-sheet', async () => {
+      const nav = page.getByTestId('mobile-bottom-nav');
+      const moreBtn = nav.getByText('More', { exact: true });
+      if (await moreBtn.isVisible({ timeout: 3000 })) await moreBtn.click();
+      else throw new Error('no bottom-nav More button');
+      await page.waitForTimeout(1200);
+    });
+    await page.keyboard.press('Escape').catch(() => {});
+
+    await tryStep('mobile-settings', async () => {
+      await page.goto(LIVE + '/settings', { waitUntil: 'domcontentloaded' });
+      await page.waitForTimeout(2500);
+    });
+
+    expect(overflow, 'no horizontal overflow on phone').toBeLessThanOrEqual(2);
+  });
+});
diff --git a/tests/sequences/unified.config.mjs b/tests/sequences/unified.config.mjs
index 779d5fe4..ed782d90 100644
--- a/tests/sequences/unified.config.mjs
+++ b/tests/sequences/unified.config.mjs
@@ -24,6 +24,10 @@ export const SEQUENCES = {
   'matrix': { adapter: 'playwright', title: 'Feature × resolution matrix', args: ['--project=matrix'], blocking: false },
   'vlm': { adapter: 'playwright', title: 'Local-VLM visual eval (skips w/o endpoints)', args: ['--project=vlm'], blocking: false },
   'perf-scale': { adapter: 'playwright', title: 'Large-scale perf sweep', args: ['--project=perf-scale'], blocking: false },
+  // LIVE Cloudflare site, from a guest user's point of view (desktop + phone),
+  // recording .webm video + a labelled screenshot per step. Drives the real
+  // production SPA — run with TEST_URL=https://graphdone-cloud.pages.dev.
+  'live-journey': { adapter: 'playwright', title: 'Live site user journey (desktop + mobile)', args: ['--project=live-journey'], blocking: false },
   // Cross-repo: ingest the newest GraphDone-Cloud live-audit findings.json (sibling
   // repo) into the unified report. Skips cleanly when absent.
   'cloud-audit': { adapter: 'cloud-audit', title: 'Cloud live audit (ingested)', blocking: false },
@@ -34,4 +38,5 @@ export const PROFILES = {
   pr: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'mobile', 'perf-budgets'],
   full: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'mobile', 'perf-budgets', 'diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
   report: ['diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
+  live: ['live-journey'],
 };