jettypod 4.4.115 → 4.4.118

package/.env

@@ -0,0 +1,7 @@
+CLOUDFLARE_API_TOKEN=qaygaUeCLS8RQA5FVsJxnsA02c8b8qWyiLgNSM1X
+STRIPE_SECRET_KEY=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
+STRIPE_WEBHOOK_SECRET=whsec_pkup32kvrcf3g5h8VmtjLfYU9WIWdAb6
+GOOGLE_CLIENT_ID=172847259733-r87e20pjv97290kuusm7ov7uams515mm.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+JWT_SECRET=bKYWqg7IR45K9CrA5BRmzXPQoWK6Vv4okZKpGmYD6o4=
+RESEND_API_KEY=re_Tg7gAVGE_LVKhjnyLkpDgYmkzQvYXmCwc

package/apps/dashboard/app/api/claude/[workItemId]/message/route.ts

@@ -2,7 +2,7 @@ import { spawnSync } from 'child_process';
 import { NextRequest, NextResponse } from 'next/server';
 import path from 'path';
 import fs from 'fs';
-import { appendSessionContentByWorkItem, getSessionContentByWorkItem, ConversationTurn } from '@/lib/db';
+import { appendSessionContentByWorkItem, getSessionContentByWorkItem, getWorkItem, ConversationTurn } from '@/lib/db';
 import {
   getOrCreateProcess,
   sendMessage as sendProcessMessage,
@@ -51,9 +51,14 @@ function buildContextPrefix(history: ConversationTurn[]): string {
   return `[Session context restored — your process was restarted. Previous conversation:]\n\n${lines.join('\n\n')}\n\n[End of restored context. New message from user:]\n\n`;
 }
 
+// Cache the CLI availability check so we only pay the spawnSync cost once per process lifetime
+let claudeCliAvailable: boolean | null = null;
+
 function isClaudeCliAvailable(): boolean {
+  if (claudeCliAvailable !== null) return claudeCliAvailable;
   const result = spawnSync('which', ['claude'], { encoding: 'utf-8' });
-  return result.status === 0 && result.stdout.trim().length > 0;
+  claudeCliAvailable = result.status === 0 && result.stdout.trim().length > 0;
+  return claudeCliAvailable;
 }
 
 function isValidWorkItemId(id: string): boolean {
@@ -151,15 +156,26 @@ export async function POST(
     timestamp: new Date().toISOString()
   });
 
-  // Get or create worktree for this work item
-  const workItem = {
-    id: parseInt(workItemId, 10),
-    title: `Work item ${workItemId}`
-  };
+  // Check if this is a conversational work item (skip worktree)
+  const workItemData = getWorkItem(workItemIdNum);
+  const isConversational = workItemData?.conversational === 1;
 
   const repoPath = getProjectRoot();
-  const workResult = await worktreeFacade.startWork(workItem, { repoPath });
-  const claudeCwd = workResult.path;
+  let claudeCwd: string;
+
+  if (isConversational) {
+    // Conversational chores run from main repo — no worktree needed
+    claudeCwd = repoPath;
+  } else {
+    // Get or create worktree for this work item
+    const workItem = {
+      id: parseInt(workItemId, 10),
+      title: `Work item ${workItemId}`
+    };
+    const workResult = await worktreeFacade.startWork(workItem, { repoPath });
+    claudeCwd = workResult.path;
+  }
+
   const settingsPath = getSettingsPath(repoPath);
 
   // Use workItemId prefixed with 'wi-' to avoid collision with standalone session IDs

package/apps/dashboard/app/api/claude/sessions/[sessionId]/message/route.ts

@@ -2,11 +2,10 @@ import { spawnSync } from 'child_process';
 import { NextRequest, NextResponse } from 'next/server';
 import path from 'path';
 import fs from 'fs';
-import { appendSessionContent, getSession, getSessionContent, ConversationTurn } from '@/lib/db';
+import { appendSessionContent, getSessionContent, ConversationTurn } from '@/lib/db';
 import {
   getOrCreateProcess,
   sendMessage as sendProcessMessage,
-  hasActiveProcess,
   killProcess,
 } from '@/lib/claude-process-manager';
 
@@ -30,9 +29,14 @@ function getSettingsPath(projectRoot: string): string | undefined {
 
 export const dynamic = 'force-dynamic';
 
+// Cache the CLI availability check so we only pay the spawnSync cost once per process lifetime
+let claudeCliAvailable: boolean | null = null;
+
 function isClaudeCliAvailable(): boolean {
+  if (claudeCliAvailable !== null) return claudeCliAvailable;
   const result = spawnSync('which', ['claude'], { encoding: 'utf-8' });
-  return result.status === 0 && result.stdout.trim().length > 0;
+  claudeCliAvailable = result.status === 0 && result.stdout.trim().length > 0;
+  return claudeCliAvailable;
 }
 
 /**

package/apps/dashboard/app/api/tests/run/stream/route.ts

@@ -27,8 +27,16 @@ export async function GET(request: NextRequest) {
         controller.enqueue(encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`));
       }
 
+      // Hold back test_complete events from the runner — we need to ingest
+      // results into SQLite BEFORE the frontend refreshes, otherwise it reads stale data.
+      let heldTestComplete: Record<string, unknown> | null = null;
+
       const onEvent = (event: { type: string; [key: string]: unknown }) => {
         const { type, ...data } = event;
+        if (type === 'test_complete') {
+          heldTestComplete = data;
+          return;
+        }
         send(type, data);
       };
 
@@ -38,12 +46,16 @@ export async function GET(request: NextRequest) {
         : runFeature(featureFile, { onEvent, signal: request.signal });
 
       run.then((result: { resultsPath: string }) => {
-        // Ingest results into SQLite
+        // Ingest results into SQLite BEFORE sending test_complete
         try {
           ingestCucumberResults(result.resultsPath);
         } catch {
           // Non-fatal
         }
+        send('test_complete', heldTestComplete || { status: 'fail' });
+        controller.close();
+      }).catch(() => {
+        send('test_complete', { status: 'fail' });
         controller.close();
       });
     },

package/apps/dashboard/app/api/usage/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import { getWeeklyUsage } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+const SAFE_DEFAULT = { used: 0, limit: 20, remaining: 20, allowed: true };
+
+export async function GET() {
+  try {
+    const usage = getWeeklyUsage();
+    console.log('[usage] /api/usage responding with', usage);
+    return NextResponse.json(usage);
+  } catch (err) {
+    console.error('[usage] /api/usage ERROR — returning safe default', err);
+    return NextResponse.json(SAFE_DEFAULT);
+  }
+}

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

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

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

@@ -5,13 +5,12 @@ import { InstallClaudeScreen } from '@/components/InstallClaudeScreen';
 
 export default function InstallClaudePage() {
   const [isInstalling, setIsInstalling] = useState(false);
-  const [installProgress, setInstallProgress] = useState<string>('');
+  const [isSuccess, setIsSuccess] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const handleInstall = async () => {
     setError(null);
     setIsInstalling(true);
-    setInstallProgress('Starting installation...\n');
 
     // Check if we're in Electron
     if (!window.electronAPI?.isElectron) {
@@ -29,10 +28,13 @@ export default function InstallClaudePage() {
         return;
       }
 
-      setInstallProgress(prev => prev + 'Installation complete!\n');
+      // Show success animation
+      setIsSuccess(true);
 
-      // Navigate to dashboard after successful install
-      window.location.href = '/';
+      // After success animation plays, navigate to connect-claude
+      setTimeout(() => {
+        window.location.href = '/connect-claude';
+      }, 2000);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Installation failed');
       setIsInstalling(false);
@@ -49,7 +51,7 @@ export default function InstallClaudePage() {
       <InstallClaudeScreen
         onInstall={handleInstall}
         isInstalling={isInstalling}
-        installProgress={installProgress}
+        isSuccess={isSuccess}
       />
     </>
   );

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

@@ -0,0 +1,229 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
+
+const buttonGradientStyle = {
+  background: 'linear-gradient(145deg, #ffffff 0%, #faf9f7 10%, #f0f4f4 35%, #c8d9da 55%, #819D9F 90%)',
+  color: '#3d4d4e',
+  boxShadow: `
+    0 1px 1px rgba(0, 0, 0, 0.02),
+    0 2px 4px rgba(0, 0, 0, 0.03),
+    0 6px 12px rgba(0, 0, 0, 0.05),
+    0 12px 24px rgba(0, 0, 0, 0.06),
+    0 20px 40px rgba(129, 157, 159, 0.2),
+    0 32px 64px rgba(129, 157, 159, 0.18),
+    inset 0 2px 4px rgba(255, 255, 255, 1),
+    inset 0 -2px 4px rgba(129, 157, 159, 0.05)
+  `,
+};
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [otpCode, setOtpCode] = useState('');
+  const [otpSent, setOtpSent] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+  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.
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, []);
+
+  const handleGoogleSignIn = () => {
+    if (!window.electronAPI?.isElectron) return;
+    window.electronAPI.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();
+        if (status.authenticated) {
+          if (pollRef.current) clearInterval(pollRef.current);
+          window.location.href = '/';
+        }
+      } catch {
+        // Ignore — keep polling
+      }
+    }, 1000);
+  };
+
+  const handleSendOTP = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!email.trim() || !email.includes('@')) {
+      setError('Please enter a valid email address.');
+      return;
+    }
+
+    setIsSending(true);
+
+    try {
+      const res = await fetch(`${API_BASE}/auth/otp/send`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: email.trim().toLowerCase() }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json() as { error?: string };
+        setError(data.error || 'Failed to send code.');
+        return;
+      }
+
+      setOtpSent(true);
+    } catch {
+      setError('Failed to send code. Check your connection.');
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const handleVerifyOTP = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!otpCode.trim()) {
+      setError('Please enter the code from your email.');
+      return;
+    }
+
+    setIsVerifying(true);
+
+    try {
+      const res = await fetch(`${API_BASE}/auth/otp/verify`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: email.trim().toLowerCase(), code: otpCode.trim() }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json() as { error?: string };
+        setError(data.error || 'Invalid or expired code.');
+        setIsVerifying(false);
+        return;
+      }
+
+      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);
+      }
+
+      window.location.href = '/';
+    } catch {
+      setError('Failed to verify code. Check your connection.');
+      setIsVerifying(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
+      <div className="max-w-md w-full space-y-8">
+        {/* Logo */}
+        <div className="flex flex-col items-center space-y-4">
+          <Image
+            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
+          </h1>
+          <p className="text-zinc-500 dark:text-zinc-400 text-center">
+            Sign in to get started. Free plan included.
+          </p>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
+            {error}
+          </div>
+        )}
+
+        {/* Google Sign-In */}
+        <div className="pt-4">
+          <button
+            onClick={handleGoogleSignIn}
+            className="w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100"
+            style={{ cursor: 'pointer', ...buttonGradientStyle }}
+          >
+            Sign in with Google
+          </button>
+        </div>
+
+        {/* Divider */}
+        <div className="flex items-center gap-4">
+          <div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
+          <span className="text-xs text-zinc-400 dark:text-zinc-500">or</span>
+          <div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
+        </div>
+
+        {/* Email OTP */}
+        {!otpSent ? (
+          <form onSubmit={handleSendOTP} className="space-y-4">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              disabled={isSending}
+              className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:focus:ring-zinc-500 disabled:opacity-50"
+            />
+            <button
+              type="submit"
+              disabled={isSending || !email.trim()}
+              className="w-full py-3 px-6 rounded-xl font-medium border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors disabled:opacity-50 disabled:pointer-events-none"
+            >
+              {isSending ? 'Sending code...' : 'Sign in with email'}
+            </button>
+          </form>
+        ) : (
+          <form onSubmit={handleVerifyOTP} className="space-y-4">
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              We sent a 6-digit code to <span className="font-medium text-zinc-700 dark:text-zinc-300">{email}</span>
+            </p>
+            <input
+              type="text"
+              value={otpCode}
+              onChange={(e) => setOtpCode(e.target.value)}
+              placeholder="Enter 6-digit code"
+              maxLength={6}
+              autoFocus
+              disabled={isVerifying}
+              className="w-full px-4 py-3 rounded-xl border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:focus:ring-zinc-500 disabled:opacity-50 text-center text-xl tracking-widest font-mono"
+            />
+            <button
+              type="submit"
+              disabled={isVerifying || !otpCode.trim()}
+              className="w-full py-3 px-6 rounded-xl font-medium border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors disabled:opacity-50 disabled:pointer-events-none"
+            >
+              {isVerifying ? 'Verifying...' : 'Verify code'}
+            </button>
+            <button
+              type="button"
+              onClick={() => { setOtpSent(false); setOtpCode(''); setError(null); }}
+              className="w-full text-sm text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors"
+            >
+              Use a different email
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/dashboard/app/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation';
-import { getKanbanData, hasProject } from '@/lib/db';
+import { getKanbanData, hasProject, isBlankProject, getProjectRoot } from '@/lib/db';
 import { RealTimeKanbanWrapper } from '@/components/RealTimeKanbanWrapper';
 
 // Force dynamic rendering - database is only available at runtime
@@ -13,6 +13,8 @@ export default function Home() {
 
   try {
     const data = getKanbanData();
+    const projectRoot = getProjectRoot();
+    const isBlank = projectRoot ? isBlankProject(projectRoot) : false;
 
     // Serialize Map data for client component
     const serializedData = {
@@ -22,8 +24,8 @@ export default function Home() {
     };
 
     return (
-      <div className="flex-1 flex flex-col min-h-0 overflow-hidden max-w-6xl w-full mx-auto px-4 py-4">
-        <RealTimeKanbanWrapper initialData={serializedData} />
+      <div className="h-full flex flex-col min-h-0 overflow-hidden max-w-6xl w-full mx-auto px-4 py-4">
+        <RealTimeKanbanWrapper initialData={serializedData} isBlank={isBlank} projectPath={projectRoot || ''} />
       </div>
     );
   } catch (error) {

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

@@ -1,4 +1,5 @@
 import { getEnvVars, discoverEnvFiles, getSelectedEnvFile, getMainBranch } from '@/lib/db';
+import { AccountSection } from '@/components/settings/AccountSection';
 import { EnvVarsSection } from '@/components/settings/EnvVarsSection';
 import { GeneralSection } from '@/components/settings/GeneralSection';
 import { SettingsLayout } from '@/components/settings/SettingsLayout';
@@ -18,6 +19,7 @@ export default function SettingsPage() {
       </h1>
       <SettingsLayout
         tabs={[
+          { id: 'account', label: 'Account', content: <AccountSection /> },
           { id: 'general', label: 'General', content: <GeneralSection initialMainBranch={mainBranch} /> },
           { id: 'env-vars', label: 'Environment Variables', content: <EnvVarsSection initialEnvVars={envVars} envFiles={envFiles} selectedFile={selectedFile} /> },
         ]}

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

@@ -0,0 +1,11 @@
+'use client';
+
+import { SubscribeContent } from '@/components/SubscribeContent';
+
+export default function SubscribePage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-zinc-900 p-8">
+      <SubscribeContent />
+    </div>
+  );
+}

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

@@ -22,6 +22,28 @@ export default function WelcomePage() {
     loadRecentProjects();
   }, []);
 
+  const handleNewProject = async () => {
+    setError(null);
+
+    if (!window.electronAPI?.isElectron) {
+      setError('Project creation is only available in the desktop app.');
+      return;
+    }
+
+    const result = await window.electronAPI.project.newProject();
+
+    if (result.canceled) {
+      return;
+    }
+
+    if (!result.success) {
+      setError(result.error || 'Failed to create project');
+      return;
+    }
+
+    window.location.href = '/';
+  };
+
   const handleOpenProject = async () => {
     setError(null);
 
@@ -76,6 +98,7 @@ export default function WelcomePage() {
       )}
       <WelcomeScreen
         recentProjects={recentProjects}
+        onNewProject={handleNewProject}
         onOpenProject={handleOpenProject}
         onSelectRecentProject={handleSelectRecentProject}
       />

package/apps/dashboard/components/AppShell.tsx

@@ -1,15 +1,20 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
 import { ClaudeSessionProvider, useClaudeSession } from '../contexts/ClaudeSessionContext';
 import { ConnectionStatusProvider } from '../contexts/ConnectionStatusContext';
+import { UsageProvider } from '../contexts/UsageContext';
 import { ToastProvider } from './Toast';
 import { MainNav } from './MainNav';
 import { ClaudePanel } from './ClaudePanel';
 import type { ReactNode } from 'react';
 
 // Pages that should not show the nav header (pre-project screens)
-const NO_NAV_PATHS = ['/install-claude', '/welcome'];
+const NO_NAV_PATHS = ['/login', '/subscribe', '/install-claude', '/connect-claude', '/welcome'];
+
+// Pages accessible without authentication
+const PUBLIC_PATHS = ['/login', '/subscribe', '/install-claude', '/connect-claude', '/welcome'];
 
 interface AppShellProps {
   projectName: string;
@@ -18,7 +23,35 @@ interface AppShellProps {
 
 function AppShellContent({ projectName, children }: AppShellProps) {
   const pathname = usePathname();
+  const router = useRouter();
   const showNav = !NO_NAV_PATHS.includes(pathname);
+  const [authChecked, setAuthChecked] = useState(false);
+
+  // Auth enforcement gate: redirect unauthenticated users to /login
+  useEffect(() => {
+    if (PUBLIC_PATHS.includes(pathname)) {
+      setAuthChecked(true);
+      return;
+    }
+
+    async function checkAuth() {
+      if (typeof window !== 'undefined' && window.electronAPI?.isElectron) {
+        try {
+          const status = await window.electronAPI.auth.getStatus();
+          if (!status.authenticated) {
+            router.push('/login');
+            return;
+          }
+        } catch {
+          // Corrupted auth file, IPC error, etc. — treat as unauthenticated
+          router.push('/login');
+          return;
+        }
+      }
+      setAuthChecked(true);
+    }
+    checkAuth();
+  }, [pathname, router]);
 
   const {
     claudePanelOpen,
@@ -32,6 +65,7 @@ function AppShellContent({ projectName, children }: AppShellProps) {
     error,
     exitCode,
     canRetry,
+    queuedMessage,
     switchSession,
     closeSession,
     createNewSession,
@@ -42,6 +76,11 @@ function AppShellContent({ projectName, children }: AppShellProps) {
     toggleNarratedMode,
   } = useClaudeSession();
 
+  // Don't render anything until auth check completes (prevents content flash)
+  if (!authChecked) {
+    return <div className="h-screen" />;
+  }
+
   return (
     <div className="h-screen flex flex-col overflow-hidden">
       {showNav && <MainNav projectName={projectName} />}
@@ -58,6 +97,7 @@ function AppShellContent({ projectName, children }: AppShellProps) {
           error={error}
           exitCode={exitCode}
           canRetry={canRetry}
+          queuedMessage={queuedMessage}
           onClose={() => setClaudePanelOpen(false)}
           onRetry={retry}
           onSendMessage={sendMessage}
@@ -79,13 +119,15 @@ function AppShellContent({ projectName, children }: AppShellProps) {
 export function AppShell({ projectName, children }: AppShellProps) {
   return (
     <ConnectionStatusProvider>
-      <ToastProvider>
-        <ClaudeSessionProvider>
-          <AppShellContent projectName={projectName}>
-            {children}
-          </AppShellContent>
-        </ClaudeSessionProvider>
-      </ToastProvider>
+      <UsageProvider>
+        <ToastProvider>
+          <ClaudeSessionProvider>
+            <AppShellContent projectName={projectName}>
+              {children}
+            </AppShellContent>
+          </ClaudeSessionProvider>
+        </ToastProvider>
+      </UsageProvider>
     </ConnectionStatusProvider>
   );
 }