jettypod 4.4.120 → 4.4.121

package/apps/dashboard/app/connect-claude/page.tsx

@@ -1,18 +1,17 @@
-'use client';
-
 import { ConnectClaudeScreen } from '@/components/ConnectClaudeScreen';
+import { isTauri, claudeCode } from '@/lib/tauri-bridge';
 
 export default function ConnectClaudePage() {
   const handleConnect = async () => {
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       return { success: false, error: 'Only available in the desktop app.' };
     }
-    return await window.electronAPI.claudeCode.login();
+    return await claudeCode.login();
   };
 
   const handleCheckAuth = async () => {
-    if (!window.electronAPI?.isElectron) return false;
-    return await window.electronAPI.claudeCode.isAuthenticated();
+    if (!isTauri()) return false;
+    return await claudeCode.isAuthenticated();
   };
 
   return (

package/apps/dashboard/app/decision/[id]/page.tsx

@@ -1,41 +1,65 @@
-import { getDecision } from '@/lib/db';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { dataBridge } from '@/lib/data-bridge';
+import type { DecisionData } from '@/lib/data-bridge';
 
-interface PageProps {
-  params: Promise<{ id: string }>;
-}
+export default function DecisionPage() {
+  const { id } = useParams<{ id: string }>();
+  const [decision, setDecision] = useState<DecisionData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
 
-export default async function DecisionPage({ params }: PageProps) {
-  const { id } = await params;
-  const decisionId = parseInt(id, 10);
+  useEffect(() => {
+    async function loadData() {
+      const decisionId = parseInt(id || '', 10);
+      if (isNaN(decisionId)) {
+        setNotFound(true);
+        setLoading(false);
+        return;
+      }
 
-  if (isNaN(decisionId)) {
-    notFound();
-  }
+      try {
+        const data = await dataBridge.getDecision(decisionId);
+        if (!data) {
+          setNotFound(true);
+        } else {
+          setDecision(data);
+        }
+      } catch {
+        setNotFound(true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [id]);
 
-  const decision = getDecision(decisionId);
+  if (loading) return null;
 
-  if (!decision) {
-    notFound();
+  if (notFound || !decision) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">Not Found</h1>
+          <p className="text-zinc-500 mb-4">Decision not found.</p>
+          <Link to="/" viewTransition className="text-[#5a7d7f] hover:underline">← Back to Dashboard</Link>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
-      {/* Header */}
+    <div className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
       <header className="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
         <div className="max-w-4xl mx-auto px-6 py-6">
-          <Link href="/" className="text-[#5a7d7f] dark:text-[#a3bfc0] hover:underline text-base">
-            ← Back to Dashboard
-          </Link>
+          <Link to="/" viewTransition className="text-[#5a7d7f] dark:text-[#a3bfc0] hover:underline text-base">← Back to Dashboard</Link>
         </div>
       </header>
 
       <main className="max-w-4xl mx-auto px-4 py-6">
-        {/* Breadcrumb to parent work item */}
         {decision.work_item_id && (
           <div className="mb-6 text-base text-zinc-500">
-            <Link href={`/work/${decision.work_item_id}`} className="hover:underline">
+            <Link to={`/work/${decision.work_item_id}`} viewTransition className="hover:underline">
               #{decision.work_item_id} {decision.work_item_title}
             </Link>
             <span className="mx-2">→</span>
@@ -43,9 +67,7 @@ export default async function DecisionPage({ params }: PageProps) {
           </div>
         )}
 
-        {/* Main card */}
         <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
-          {/* Header */}
           <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
             <div className="flex items-start justify-between gap-6">
               <div>
@@ -54,54 +76,37 @@ export default async function DecisionPage({ params }: PageProps) {
                   <span>•</span>
                   <span className="font-mono">#{decision.id}</span>
                 </div>
-                <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-                  {decision.aspect}
-                </h1>
+                <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">{decision.aspect}</h1>
               </div>
             </div>
           </div>
 
-          {/* Decision content */}
           <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
-            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-              Decision
-            </h2>
-            <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap text-lg">
-              {decision.decision}
-            </p>
+            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">Decision</h2>
+            <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap text-lg">{decision.decision}</p>
           </div>
 
-          {/* Rationale */}
           {decision.rationale && (
             <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
-              <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-                Rationale
-              </h2>
-              <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap">
-                {decision.rationale}
-              </p>
+              <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">Rationale</h2>
+              <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap">{decision.rationale}</p>
             </div>
           )}
 
-          {/* Metadata */}
           <div className="px-8 py-6">
-            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">
-              Details
-            </h2>
+            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">Details</h2>
             <dl className="grid grid-cols-2 gap-6 text-base">
               <div>
                 <dt className="text-zinc-500">Related Work Item</dt>
                 <dd className="text-zinc-900 dark:text-zinc-100">
-                  <Link href={`/work/${decision.work_item_id}`} className="hover:underline text-[#5a7d7f] dark:text-[#a3bfc0]">
+                  <Link to={`/work/${decision.work_item_id}`} viewTransition className="hover:underline text-[#5a7d7f] dark:text-[#a3bfc0]">
                     #{decision.work_item_id} {decision.work_item_title}
                   </Link>
                 </dd>
               </div>
               <div>
                 <dt className="text-zinc-500">Created</dt>
-                <dd className="text-zinc-900 dark:text-zinc-100">
-                  {new Date(decision.created_at).toLocaleDateString()}
-                </dd>
+                <dd className="text-zinc-900 dark:text-zinc-100">{new Date(decision.created_at).toLocaleDateString()}</dd>
               </div>
             </dl>
           </div>

package/apps/dashboard/app/demo/gates/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState, useEffect, useCallback } from 'react';
 import { GateCard } from '@/components/GateCard';
 import { GateChoiceCard } from '@/components/GateChoiceCard';
@@ -124,7 +122,7 @@ export default function GateDemoPage() {
   const [activeTab, setActiveTab] = useState<DemoTab>('workflow');
 
   return (
-    <div className="min-h-screen bg-zinc-100 dark:bg-zinc-900 p-10">
+    <div className="flex-1 overflow-y-auto bg-zinc-100 dark:bg-zinc-900 p-10">
       <div className="max-w-5xl mx-auto">
         {/* Header */}
         <div className="mb-8">
@@ -254,7 +252,7 @@ function WorkflowDemo() {
         <button
           onClick={play}
           disabled={isPlaying}
-          className="px-5 py-3 bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 disabled:opacity-50 text-white dark:text-zinc-900 text-base font-medium rounded-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0"
+          className="px-5 py-3 bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 disabled:opacity-50 text-white dark:text-zinc-900 text-base font-medium rounded-xl transition-[color,background-color,opacity] duration-200"
           style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)' }}
         >
           {isDone ? 'Replay' : isPaused ? 'Waiting for input...' : isPlaying ? 'Playing...' : 'Play Workflow'}
@@ -296,7 +294,7 @@ function WorkflowDemo() {
           </div>
           <div className="h-1 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
             <div
-              className="h-full bg-zinc-900 dark:bg-zinc-100 rounded-full transition-all duration-500"
+              className="h-full bg-zinc-900 dark:bg-zinc-100 rounded-full transition-[width] duration-500"
               style={{ width: `${(visibleCount / totalSteps) * 100}%` }}
             />
           </div>

package/apps/dashboard/app/design-system/page.tsx

@@ -72,7 +72,7 @@ export default function DesignSystemPage() {
         }
       `}</style>
 
-      <div className="min-h-screen bg-background text-foreground">
+      <div className="flex-1 overflow-y-auto bg-background text-foreground">
         {/* Header */}
         <header className="sticky top-0 z-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-8 py-6 flex items-center justify-between">
           <div>

package/apps/dashboard/app/globals.css

@@ -1,3 +1,20 @@
+/* Font declarations */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2');
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+}
+
 @import "tailwindcss";
 @import "tw-animate-css";
 
@@ -45,6 +62,8 @@
 
 :root {
   --radius: 0.625rem;
+  --font-satoshi: 'Satoshi', system-ui, sans-serif;
+  --font-geist-mono: 'Geist Mono Variable', 'Geist Mono', monospace;
   --background: oklch(0.98 0.002 80);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -113,14 +132,67 @@
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
   }
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-satoshi);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 }
 
 html {
   font-size: 16px;
 }
+
+/* Kanban card hover — instant shadow swap, no transition (WebKit-friendly) */
+.kanban-card {
+  contain: content;
+  content-visibility: auto;
+}
+.kanban-card:hover {
+  box-shadow: var(--hover-shadow) !important;
+  transform: translateY(-2px);
+}
+
+/* Highlight pulse — CSS-only, no framer-motion runtime cost */
+@keyframes highlight-pulse {
+  0%, 100% { outline: 3px solid rgba(129, 157, 159, 0); outline-offset: 0; }
+  50% { outline: 3px solid rgba(129, 157, 159, 0.4); outline-offset: 0; }
+}
+
+/* View Transitions API — fast cross-fade for route changes */
+::view-transition-old(root) {
+  animation: vt-fade-out 120ms ease-out;
+}
+::view-transition-new(root) {
+  animation: vt-fade-in 200ms ease-out;
+}
+@keyframes vt-fade-out {
+  to { opacity: 0; }
+}
+@keyframes vt-fade-in {
+  from { opacity: 0; }
+}
+
+/* Skeleton loading pulse */
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.25; }
+}
+
+/* Respect reduced motion globally — disables all animations/transitions */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/apps/dashboard/app/install-claude/page.tsx

@@ -1,7 +1,6 @@
-'use client';
-
 import { useState } from 'react';
 import { InstallClaudeScreen } from '@/components/InstallClaudeScreen';
+import { isTauri, claudeCode } from '@/lib/tauri-bridge';
 
 export default function InstallClaudePage() {
   const [isInstalling, setIsInstalling] = useState(false);
@@ -12,15 +11,14 @@ export default function InstallClaudePage() {
     setError(null);
     setIsInstalling(true);
 
-    // Check if we're in Electron
-    if (!window.electronAPI?.isElectron) {
+    if (!isTauri()) {
       setError('Installation is only available in the desktop app.');
       setIsInstalling(false);
       return;
     }
 
     try {
-      const result = await window.electronAPI.claudeCode.install();
+      const result = await claudeCode.install();
 
       if (!result.success) {
         setError(result.error || 'Installation failed');

package/apps/dashboard/app/login/page.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { isTauri, auth } from '@/lib/tauri-bridge';
 
 const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
 
@@ -17,18 +15,18 @@ export default function LoginPage() {
   const [error, setError] = useState<string | null>(null);
 
   // Poll for auth completion after Google sign-in.
-  // The deep link handler in main.js saves the token — this polling detects it
-  // and navigates to the dashboard even if mainWindow.loadURL doesn't fire.
+  // The deep link handler saves the token — this polling detects it
+  // and navigates to the dashboard.
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   // Redirect already-authenticated users to dashboard
   useEffect(() => {
     async function checkIfAlreadyAuthenticated() {
-      if (window.electronAPI?.isElectron) {
+      if (isTauri()) {
         try {
-          const status = await window.electronAPI.auth.getStatus();
+          const status = await auth.getStatus();
           if (status.authenticated) {
-            const path = await window.electronAPI.auth.getPostLoginPath?.() || '/';
+            const path = await auth.getPostLoginPath() || '/';
             window.location.href = path;
           }
         } catch {
@@ -46,16 +44,16 @@ export default function LoginPage() {
   }, []);
 
   const handleGoogleSignIn = () => {
-    if (!window.electronAPI?.isElectron) return;
-    window.electronAPI.auth.loginWithGoogle();
+    if (!isTauri()) return;
+    auth.loginWithGoogle();
 
     // Start polling for auth status (token saved by deep link handler)
     pollRef.current = setInterval(async () => {
       try {
-        const status = await window.electronAPI!.auth.getStatus();
+        const status = await auth.getStatus();
         if (status.authenticated) {
           if (pollRef.current) clearInterval(pollRef.current);
-          const path = await window.electronAPI!.auth.getPostLoginPath?.() || '/';
+          const path = await auth.getPostLoginPath() || '/';
           window.location.href = path;
         }
       } catch {
@@ -123,12 +121,12 @@ export default function LoginPage() {
 
       const data = await res.json() as { token: string; user: { id: string; email: string; plan: string } };
 
-      // Save auth state via Electron IPC
-      if (window.electronAPI?.isElectron) {
-        await window.electronAPI.auth.saveToken(data.token, data.user);
+      // Save auth state via Tauri IPC
+      if (isTauri()) {
+        await auth.saveToken(data.token, data.user);
       }
 
-      const path = await window.electronAPI?.auth.getPostLoginPath?.() || '/';
+      const path = await auth.getPostLoginPath() || '/';
       window.location.href = path;
     } catch {
       setError('Failed to verify code. Check your connection.');
@@ -141,12 +139,11 @@ export default function LoginPage() {
       <div className="max-w-md w-full space-y-10">
         {/* Logo */}
         <div className="flex flex-col items-center space-y-6">
-          <Image
+          <img
             src="/jettypod_wordmark.png"
             alt="JettyPod"
             width={160}
             height={40}
-            priority
           />
           <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
             Sign in to JettyPod
@@ -240,7 +237,7 @@ export default function LoginPage() {
         {/* Switch to signup */}
         <p className="text-center text-base text-zinc-500 dark:text-zinc-400">
           Don&apos;t have an account?{' '}
-          <Link href="/signup" className="font-medium hover:underline" style={{ color: '#819D9F' }}>
+          <Link to="/signup" className="font-medium hover:underline" style={{ color: '#819D9F' }}>
             Create one
           </Link>
         </p>

package/apps/dashboard/app/page.tsx

@@ -1,61 +1,114 @@
-import { redirect } from 'next/navigation';
-import { getKanbanData, hasProject, isBlankProject, hasOnboardingStarted, getProjectRoot } from '@/lib/db';
+import { useState, useEffect } from 'react';
+import { useNavigate, useLocation, Outlet } from 'react-router-dom';
 import { RealTimeKanbanWrapper } from '@/components/RealTimeKanbanWrapper';
-
-// Force dynamic rendering - database is only available at runtime
-export const dynamic = 'force-dynamic';
+import { dataBridge, prefetch } from '@/lib/data-bridge';
+import type { KanbanData } from '@/lib/data-bridge';
 
 export default function Home() {
-  // Check if a project is selected - if not, redirect to welcome
-  if (!hasProject()) {
-    redirect('/welcome');
-  }
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const isChildRoute = pathname !== '/';
+  const [data, setData] = useState<KanbanData | null>(null);
+  const [projectPath, setProjectPath] = useState('');
+  const [isBlank, setIsBlank] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
-  try {
-    const data = getKanbanData();
-    const projectRoot = getProjectRoot();
-    const isBlank = projectRoot ? isBlankProject(projectRoot) && !hasOnboardingStarted() : false;
+  useEffect(() => {
+    async function loadData() {
+      try {
+        // getProjectRoot() is cached after first call — no redundant IPC
+        const root = await dataBridge.getProjectRoot();
+        if (!root) {
+          navigate('/welcome', { replace: true });
+          return;
+        }
 
-    // Serialize Map data for client component
-    const serializedData = {
-      inFlight: data.inFlight,
-      backlog: Array.from(data.backlog.entries()),
-      done: Array.from(data.done.entries()),
-    };
+        const kanbanData = await prefetch.backlog();
 
-    return (
-      <div className="h-full flex flex-col min-h-0 overflow-hidden max-w-7xl w-full mx-auto px-4 py-4">
-        <RealTimeKanbanWrapper initialData={serializedData} isBlank={isBlank} projectPath={projectRoot || ''} />
-      </div>
-    );
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    const errorStack = error instanceof Error ? error.stack : undefined;
+        setData(kanbanData);
+        setProjectPath(root || '');
+        // isBlank detection: fresh project with only the seeded "Project Planning" epic
+        const onlyGroup = kanbanData.backlog.size === 1
+          ? [...kanbanData.backlog.values()][0]
+          : null;
+        const hasOnlyOnboarding = kanbanData.inFlight.length === 0
+          && kanbanData.done.size === 0
+          && onlyGroup?.epicTitle === 'Project Planning';
+        setIsBlank(hasOnlyOnboarding);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [navigate]);
 
-    // Log to server console (visible in Electron logs)
-    console.error('[Home Page Error]', errorMessage);
-    console.error('[Home Page Stack]', errorStack);
-    console.error('[JETTYPOD_PROJECT_PATH]', process.env.JETTYPOD_PROJECT_PATH);
+  // Serialize Map data for RealTimeKanbanWrapper (it expects this format)
+  const serializedData = data ? {
+    inFlight: data.inFlight,
+    backlog: Array.from(data.backlog.entries()),
+    done: Array.from(data.done.entries()),
+  } : null;
 
-    // Return error UI so user can see what's wrong
-    return (
-      <div className="flex-1 flex items-center justify-center p-8">
-        <div className="max-w-2xl w-full bg-red-50 border-2 border-red-200 rounded-lg p-8">
-          <h1 className="text-xl font-bold text-red-800 mb-4">Failed to load project</h1>
-          <div className="bg-white border-2 border-red-100 rounded p-6 mb-6">
-            <p className="font-mono text-base text-red-700 whitespace-pre-wrap">{errorMessage}</p>
+  // Kanban board content based on loading/error/data state
+  const kanbanContent = loading ? (
+    <div className="max-w-7xl w-full mx-auto px-4 py-4">
+      <div className="flex gap-4" style={{ height: 'calc(var(--main-h, 100vh) - 2rem)' }}>
+        {/* Backlog column skeleton */}
+        <div className="flex-1 max-w-[600px] flex flex-col min-h-0">
+          <div className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 flex-1 min-h-0">
+            <div className="flex items-center justify-between mb-4">
+              <div className="h-6 w-24 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              <div className="h-6 w-10 bg-zinc-200 dark:bg-zinc-800 rounded-full" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+            </div>
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map(i => (
+                <div key={i} className="h-20 bg-zinc-200 dark:bg-zinc-800 rounded-xl" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              ))}
+            </div>
           </div>
-          <div className="text-base text-gray-600 space-y-1.5">
-            <p><strong>Project path:</strong> {process.env.JETTYPOD_PROJECT_PATH || '(not set)'}</p>
+        </div>
+        {/* Done column skeleton */}
+        <div className="flex-1 max-w-[600px] flex flex-col min-h-0">
+          <div className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 flex-1 min-h-0">
+            <div className="flex items-center justify-between mb-4">
+              <div className="h-6 w-16 bg-zinc-200 dark:bg-zinc-800 rounded" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              <div className="h-6 w-10 bg-zinc-200 dark:bg-zinc-800 rounded-full" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+            </div>
+            <div className="space-y-3">
+              {[1, 2, 3].map(i => (
+                <div key={i} className="h-16 bg-zinc-200 dark:bg-zinc-800 rounded-xl" style={{ animation: 'skeleton-pulse 1.5s ease-in-out infinite' }} />
+              ))}
+            </div>
           </div>
-          {errorStack && (
-            <details className="mt-4">
-              <summary className="text-base text-gray-500 cursor-pointer">Stack trace</summary>
-              <pre className="mt-2 text-base text-gray-500 overflow-auto p-3 bg-gray-50 rounded">{errorStack}</pre>
-            </details>
-          )}
         </div>
       </div>
-    );
-  }
+    </div>
+  ) : error ? (
+    <div className="flex-1 flex items-center justify-center p-8">
+      <div className="max-w-2xl w-full bg-red-50 border-2 border-red-200 rounded-lg p-8">
+        <h1 className="text-xl font-bold text-red-800 mb-4">Failed to load project</h1>
+        <div className="bg-white border-2 border-red-100 rounded p-6 mb-6">
+          <p className="font-mono text-base text-red-700 whitespace-pre-wrap">{error}</p>
+        </div>
+      </div>
+    </div>
+  ) : serializedData ? (
+    <div className="max-w-7xl w-full mx-auto px-4 py-4">
+      <RealTimeKanbanWrapper initialData={serializedData} isBlank={isBlank} projectPath={projectPath} />
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {/* Kanban board — always mounted, hidden when viewing a child route */}
+      <div style={isChildRoute ? { display: 'none' } : undefined}>
+        {kanbanContent}
+      </div>
+      {/* Child route content (work detail, proof dashboard, decision) */}
+      <Outlet />
+    </>
+  );
 }