jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/ClaudePanel.tsx

@@ -1,233 +1,80 @@
 'use client';
 
 import { useEffect, useRef, useState, useCallback, DragEvent } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import type { ClaudeMessage, StreamStatus } from '../lib/session-stream-manager';
+import { AnimatePresence, m } from 'framer-motion';
+
+import type { ClaudeMessage } from '../lib/session-stream-manager';
 import { ClaudePanelInput, AttachedImage } from './ClaudePanelInput';
 import { GateCard } from './GateCard';
-import type { SessionItem } from './SessionList';
-import type { Session } from '../contexts/ClaudeSessionContext';
-
-// Unescape content that may have literal \n, \t, \r from JSON stringification
-function unescapeContent(content: string | undefined): string {
-  if (!content) return '';
-  return content
-    .replace(/\\n/g, '\n')
-    .replace(/\\t/g, '\t')
-    .replace(/\\r/g, '\r')
-    .replace(/\\"/g, '"');
-}
-
-// Detect if error message is about Claude CLI needing an update
-function isVersionUpdateError(content: string | undefined): boolean {
-  if (!content) return false;
-  return content.includes('needs an update') ||
-         content.includes('version') && content.includes('required');
-}
-
-// Collapse repeated phrases in tool output (e.g. repeated warnings, stack traces)
-// Finds substantial phrases (50+ chars) appearing 3+ times and shows each once with a count
-function deduplicateToolOutput(text: string): string {
-  // Split on sentence/line boundaries to extract candidate phrases
-  const phrases = text.split(/(?<=[\.\n])\s*/);
-  const counts = new Map<string, number>();
-
-  for (const phrase of phrases) {
-    const key = phrase.trim();
-    if (key.length >= 50) {
-      counts.set(key, (counts.get(key) || 0) + 1);
-    }
-  }
-
-  // Get repeated phrases, longest first to avoid partial match issues
-  const repeated = [...counts.entries()]
-    .filter(([, c]) => c >= 3)
-    .sort((a, b) => b[0].length - a[0].length);
-
-  if (repeated.length === 0) return text;
-
-  let result = text;
-  for (const [phrase, count] of repeated) {
-    const escaped = phrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    let idx = 0;
-    result = result.replace(new RegExp(escaped, 'g'), () => {
-      idx++;
-      return idx === 1 ? `${phrase} [×${count}]` : '';
-    });
-  }
-
-  // Clean up artifacts from removal
-  result = result.replace(/\n{3,}/g, '\n');
-  result = result.replace(/ {2,}/g, ' ');
-
-  return result;
-}
-
-// Filter for system noise - returns true if content should be HIDDEN
-// Focus on truly internal/system content, NOT Claude's explanatory messages
-function isSystemNoise(content: string | undefined): boolean {
-  if (!content) return true;
-
-  const trimmed = content.trim();
-
-  // Hide raw JSON messages (system init, tool calls, etc.)
-  if (trimmed.startsWith('{"') || trimmed.startsWith('[{"')) {
-    return true;
-  }
-
-  // Noise patterns - truly internal/system content that users shouldn't see
-  const noisePatterns = [
-    // Skill headers and metadata (internal prompt injections)
-    'Base directory for this skill:',
-    '# Request Routing Skill',
-    '# Simple Improvement Skill',
-    '# Bug Planning Skill',
-    '# Chore Planning Skill',
-    '# Feature Planning Skill',
-    '# Epic Planning Skill',
-    '# Bug Mode Skill',
-    '# Chore Mode Skill',
-    '# Speed Mode Skill',
-    '# Stable Mode Skill',
-    '# Production Mode Skill',
-    'FORBIDDEN during this skill',
-    'ALLOWED during this skill',
-    'ARGUMENTS:',
-    // System/context tags
-    '<system-reminder>',
-    '</system-reminder>',
-    '<claude_context',
-    '</claude_context>',
-    '<jettypod_essentials>',
-    '<communication_style>',
-    // File content dumps (usually from Read tool)
-    'Contents of /',
-    'File: /',
-    // Internal skill invocation phrases (Claude talking to system, not user)
-    'Let me invoke',
-    'I\'ll invoke',
-    'I will invoke',
-    'I need to invoke',
-    'I should invoke',
-    'invoke request-routing',
-    'invoke bug-planning',
-    'invoke chore-planning',
-    'invoke feature-planning',
-    'invoke epic-planning',
-    'invoke simple-improvement',
-    'invoke bug-mode',
-    'invoke chore-mode',
-    'invoke speed-mode',
-    'invoke stable-mode',
-    'invoke production-mode',
-    'Launching skill:',
-    'Invoking skill:',
-    // Routing decision arrows (internal logging)
-    '→ bug-planning',
-    '→ chore-planning',
-    '→ feature-planning',
-    '→ epic-planning',
-    '→ simple-improvement',
-    '→ bug-mode',
-    '→ chore-mode',
-    '→ speed-mode',
-    '→ stable-mode',
-    // Claude CLI initialization metadata
-    '"apiKeySource"',
-    '"claude_code_version"',
-    '"output_style"',
-    '"skills":',
-    '"agents":',
-    '"plugins":',
-    // Tool response metadata (from Read, Glob, Grep, etc.)
-    '"numLines":',
-    '"startLine":',
-    '"totalLines":',
-    // Gate markers (already parsed by stream manager, hide raw output)
-    '[GATE:',
-    '[/GATE]',
-  ];
-
-  if (noisePatterns.some(p => content.includes(p))) {
-    return true;
-  }
-
-  // Hide if it has line number prefixes (file reads): "123→" anywhere in content
-  // This catches file content from Read tool
-  if (/\d+→/.test(content)) {
-    return true;
-  }
-
-  // Hide if content ends with JSON-like tool response metadata
-  if (/"\w+":\s*\d+\s*\}\}\}?\s*$/.test(trimmed)) {
-    return true;
-  }
-
-  // Hide if >50% of lines start with numbers (grep/search results)
-  const lines = content.split('\n').filter(l => l.trim());
-  const numberedLines = lines.filter(l => /^\s*\d+[→|:]/.test(l));
-  if (lines.length > 3 && numberedLines.length / lines.length > 0.5) {
-    return true;
-  }
-
-  // Note: Removed length limit - long explanations are legitimate content
-  // Note: Removed generic "Let me check/look/analyze" - these explain what Claude is doing
-
-  return false;
-}
+import { ReviewFooter } from './ReviewFooter';
+import { useSessionState, useSessionActions } from '../contexts/ClaudeSessionContext';
+import { getRegistry } from '../lib/stream-manager-registry';
+import { useUsage } from '../contexts/UsageContext';
+import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
+import { getWebSocketUrl } from '../lib/utils';
+import { MessageBlock, StatusIndicator, ErrorIcon, UserIcon, humanizeToolCall, unescapeContent, isSystemNoise } from './MessageBlock';
+import { ElapsedTimer } from './ElapsedTimer';
+import { Button } from '@/components/ui/Button';
 
 interface ClaudePanelProps {
   isOpen: boolean;
-  workItemId: string;
-  workItemTitle: string;
-  messages: ClaudeMessage[];
-  status: StreamStatus;
-  error: string | null;
-  exitCode: number | null;
-  canRetry: boolean;
   onClose: () => void;
-  onRetry: () => void;
-  onSendMessage: (message: string, images?: Array<{ type: string; dataUrl: string }>) => void;
-  onStop?: () => void;
-  // Multi-session support
-  sessions?: Map<string, Session>;
-  activeSessionId?: string | null;
-  onSwitchSession?: (id: string) => void;
-  // Standalone session support
-  standaloneSessions?: SessionItem[];
-  onNewSession?: () => void;
-  onCloseSession?: (sessionId: string) => void;
-  // Narrated mode support
-  narratedMode?: boolean;
-  onToggleNarratedMode?: () => void;
 }
 
 export function ClaudePanel({
   isOpen,
-  workItemId,
-  workItemTitle,
-  messages,
-  status,
-  error,
-  exitCode,
-  canRetry,
   onClose,
-  onRetry,
-  onSendMessage,
-  onStop,
-  sessions,
-  activeSessionId,
-  onSwitchSession,
-  standaloneSessions = [],
-  onNewSession,
-  onCloseSession,
-  narratedMode = false,
-  onToggleNarratedMode,
 }: ClaudePanelProps) {
+  const {
+    activeSessionId,
+    activeSession,
+    sessions,
+    standaloneSessions: standaloneSessRaw,
+    messages,
+    status,
+    error,
+    exitCode,
+    canRetry,
+    queuedMessage,
+    narratedMode: narratedModeRaw,
+    isTabSwitching,
+  } = useSessionState();
+  const {
+    switchSession: onSwitchSession,
+    closeSession: onCloseSession,
+    openSession: onOpenSession,
+    createNewSession: onNewSession,
+    sendMessage: onSendMessage,
+    retry: onRetry,
+    stop: onStop,
+    toggleNarratedMode: onToggleNarratedMode,
+  } = useSessionActions();
+
+  const workItemId = activeSessionId || 'sessions';
+  const workItemTitle = activeSession?.title || 'Claude Sessions';
+  const standaloneSessions = standaloneSessRaw || [];
+  const narratedMode = narratedModeRaw ?? false;
   const contentRef = useRef<HTMLDivElement>(null);
-  const hasGates = messages.some(m => m.type === 'gate');
+  const { allowed: usageAllowed, used, limit, plan, loading: usageLoading } = useUsage();
+  const limitReached = !usageLoading && !usageAllowed && plan === 'free';
+  // Force detail view when no user messages or gates (e.g., welcome session with static content).
+  // Gates (like rejection) count as meaningful content that warrants the narrated mode toggle.
+  const hasMeaningfulContent = messages.some(m => m.type === 'user' || m.type === 'gate');
+  const effectiveNarratedMode = hasMeaningfulContent ? narratedMode : false;
+
+  // Debounce "What's next?" to prevent flash during tab switches.
+  // When messages become empty (e.g., switching to a session whose content hasn't loaded yet),
+  // wait 300ms before showing the empty state. If content arrives in that window, no flash.
+  const [showEmptyState, setShowEmptyState] = useState(() => messages.length === 0 && status === 'idle');
+  const emptyStateTimerRef = useRef<NodeJS.Timeout>();
+  useEffect(() => {
+    if (messages.length === 0 && status === 'idle' && !isTabSwitching) {
+      emptyStateTimerRef.current = setTimeout(() => setShowEmptyState(true), 300);
+    } else {
+      setShowEmptyState(false);
+    }
+    return () => clearTimeout(emptyStateTimerRef.current);
+  }, [activeSessionId, messages.length, status, isTabSwitching]);
 
   // Track answered question gates by timestamp → selected option id
   const [answeredQuestions, setAnsweredQuestions] = useState<Map<number, string>>(new Map());
@@ -238,8 +85,19 @@ export function ClaudePanel({
       next.set(message.timestamp, optionId);
       return next;
     });
+
+    // Backlog session: "Finished" closes the tab instead of sending a message
+    if (activeSession?.title === 'Add to Backlog' && optionId === 'finished') {
+      if (activeSessionId) onCloseSession(activeSessionId);
+      return;
+    }
+
     onSendMessage(optionLabel);
-  }, [onSendMessage]);
+  }, [onSendMessage, activeSession?.title, activeSessionId, onCloseSession]);
+
+  const handleStartWorkItem = useCallback((id: number, title: string, type: string) => {
+    onOpenSession(String(id), title, type);
+  }, [onOpenSession]);
 
   // Accordion state for detail view - tracks which intermediate messages are expanded
   const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
@@ -247,7 +105,7 @@ export function ClaudePanel({
   // Reset expanded state when toggling between summary/detail views
   useEffect(() => {
     setExpandedIndices(new Set());
-  }, [narratedMode]);
+  }, [effectiveNarratedMode]);
 
   // Drag-and-drop state lifted to panel level so the entire panel is a drop target
   const [isDragging, setIsDragging] = useState(false);
@@ -310,6 +168,64 @@ export function ClaudePanel({
   // Also treat 'sessions' (default state with no active session) as standalone
   const isStandalone = workItemId === 'sessions' || standaloneSessions.some(s => s.id === workItemId);
 
+  // Track whether active work item is ready for review
+  const [isReadyForReview, setIsReadyForReview] = useState(false);
+
+  const fetchReadyForReview = useCallback(() => {
+    if (isStandalone || !activeSessionId) {
+      setIsReadyForReview(false);
+      return;
+    }
+
+    const workId = parseInt(activeSessionId, 10);
+    if (isNaN(workId)) {
+      setIsReadyForReview(false);
+      return;
+    }
+
+    fetch(`/api/work/${workId}`, { cache: 'no-store' })
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data) setIsReadyForReview(!!data.ready_for_review);
+        else setIsReadyForReview(false);
+      })
+      .catch(() => setIsReadyForReview(false));
+  }, [activeSessionId, isStandalone]);
+
+  // Fetch on mount / session switch
+  useEffect(() => {
+    fetchReadyForReview();
+  }, [fetchReadyForReview]);
+
+  // Re-fetch when DB changes via WebSocket so the review footer appears instantly
+  const handleWsMessage = useCallback((message: WebSocketMessage) => {
+    if (message.type === 'db_change') {
+      fetchReadyForReview();
+    }
+  }, [fetchReadyForReview]);
+
+  useWebSocket({ url: getWebSocketUrl(), onMessage: handleWsMessage });
+
+  const handleReviewAction = useCallback(() => {
+    if (activeSessionId) {
+      onCloseSession(activeSessionId);
+    }
+  }, [activeSessionId, onCloseSession]);
+
+  const handleRejectAction = useCallback((reason: string) => {
+    if (!activeSessionId) return;
+
+    // Clear review state so ReviewFooter is replaced by normal input
+    setIsReadyForReview(false);
+
+    // Inject rejection gate card into the chat
+    const registry = getRegistry();
+    const streamManager = registry.get(activeSessionId);
+    if (streamManager) {
+      streamManager.injectGate('rejection', { reason });
+    }
+  }, [activeSessionId]);
+
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     if (contentRef.current) {
@@ -320,7 +236,7 @@ export function ClaudePanel({
   return (
     <AnimatePresence>
       {isOpen && (
-        <motion.div
+        <m.div
           initial={{ x: '100%' }}
           animate={{ x: 0 }}
           exit={{ x: '100%' }}
@@ -332,65 +248,51 @@ export function ClaudePanel({
           onDragOver={handleDragOver}
           onDrop={handleDrop}
         >
+          {/* Hide Claudes tab - sticks off left edge */}
+          <button
+            onClick={onClose}
+            className="absolute left-0 rounded-b-xl px-2 py-3 text-sm font-medium text-white hover:brightness-105 active:scale-[0.98] transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-200 ease-out cursor-pointer"
+            style={{ writingMode: 'vertical-lr', transform: 'translateX(-100%) translateY(-50%) rotate(180deg)', top: '33.33%', backgroundColor: '#819D9F', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(129, 157, 159, 0.2)' }}
+            aria-label="Hide Claudes panel"
+            data-testid="hide-claudes-tab"
+          >
+            Hide Claudes
+          </button>
+
           {/* Full-panel drop zone overlay */}
           {isDragging && (
             <div
-              className="absolute inset-0 flex items-center justify-center bg-blue-50/90 z-[60] pointer-events-none"
+              className="absolute inset-0 flex items-center justify-center bg-[#e8f0f0]/90 z-[60] pointer-events-none"
               data-testid="panel-drop-zone-indicator"
             >
-              <div className="text-blue-600 text-sm font-medium">
+              <div className="text-[#5a7d7f] text-base font-medium">
                 Drop image here
               </div>
             </div>
           )}
 
-          {/* Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-200">
-            <div className="flex items-center gap-3 min-w-0">
-              <StatusIndicator status={status} />
-              <div className="min-w-0">
-                <h2 className="text-sm font-semibold text-zinc-900 truncate" data-testid="panel-title">
-                  {isStandalone ? workItemTitle : `#${workItemId} ${workItemTitle}`}
-                </h2>
-                <p className="text-xs text-zinc-500">
-                  {status === 'connecting' && 'Connecting...'}
-                  {status === 'creating' && 'Creating Claude session...'}
-                  {status === 'streaming' && 'Claude is working...'}
-                  {status === 'done' && 'Complete'}
-                  {status === 'error' && 'Error occurred'}
-                  {status === 'idle' && 'Ready'}
-                </p>
+          {/* Usage limit banner */}
+          {limitReached && (
+            <div className="bg-amber-50 border-b border-amber-200 text-amber-800 px-5 py-3 flex items-center justify-between flex-shrink-0">
+              <div className="flex items-center gap-3">
+                <span className="text-amber-600 text-base">&#9888;</span>
+                <span className="text-base font-medium">
+                  Weekly limit reached ({used}/{limit} work items). Claude is disabled until usage resets.
+                </span>
               </div>
-            </div>
-            <div className="flex items-center gap-2">
-              {onToggleNarratedMode && (
-                <button
-                  onClick={onToggleNarratedMode}
-                  className={`px-2 py-1 rounded text-xs font-medium transition-colors ${
-                    narratedMode
-                      ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
-                      : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200'
-                  }`}
-                  aria-label={narratedMode ? 'Show full conversation' : 'Show summary view'}
-                  data-testid="narrated-mode-toggle"
-                >
-                  {narratedMode ? 'Summary' : 'Details'}
-                </button>
-              )}
-              <button
-                onClick={onClose}
-                className="p-1.5 rounded hover:bg-zinc-100 text-zinc-500 hover:text-zinc-900 transition-colors"
-                aria-label="Slide away panel"
-                data-testid="close-button"
+              <a
+                href="/subscribe"
+                className="inline-flex items-center justify-center px-3.5 py-1.5 text-base font-medium text-white rounded-xl hover:brightness-105 active:scale-[0.98] transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-200 ease-out whitespace-nowrap"
+                style={{ backgroundColor: '#e57a44', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(229, 122, 68, 0.2)' }}
               >
-                <SlideAwayIcon />
-              </button>
+                Upgrade
+              </a>
             </div>
-          </div>
+          )}
 
           {/* Session Tabs - shown when at least one session exists (work item or standalone) */}
           {((sessions && sessions.size >= 1) || standaloneSessions.length > 0) && (
-            <div className="flex border-b border-zinc-200 bg-zinc-50 overflow-x-auto" data-testid="session-tabs">
+            <div className="grid grid-cols-3 border-b border-zinc-200 bg-zinc-50" data-testid="session-tabs">
               {/* Work item sessions (exclude standalone sessions - they render separately below) */}
               {sessions && Array.from(sessions.entries())
                 .filter(([id]) => !standaloneSessions.some(s => s.id === id))
@@ -398,8 +300,8 @@ export function ClaudePanel({
                 <div
                   key={id}
                   className={`
-                    flex-shrink-0 flex items-center gap-1 pl-3 pr-1 py-2
-                    border-r border-zinc-200 last:border-r-0
+                    flex items-center justify-between gap-1 pl-4 pr-1.5 py-3 min-w-0
+                    border-b border-r border-zinc-200
                     cursor-pointer select-none group
                     ${id === activeSessionId
                       ? 'bg-white text-zinc-900'
@@ -410,15 +312,15 @@ export function ClaudePanel({
                   onClick={() => onSwitchSession?.(id)}
                 >
                   <span
-                    className="flex items-center gap-1.5 text-xs font-medium truncate max-w-[120px]"
+                    className="flex-1 flex items-center gap-2 text-sm font-medium min-w-0 overflow-hidden"
                     title={session.title}
                   >
                     <span className="truncate">#{id} {session.title}</span>
-                    {session.status === 'creating' && (
-                      <span className="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0" />
+                    {(session.status === 'connecting' || session.status === 'creating') && (
+                      <span className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse flex-shrink-0" />
                     )}
                     {session.status === 'streaming' && (
-                      <span className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
+                      <span className="w-2 h-2 rounded-full bg-[#819D9F] animate-pulse flex-shrink-0" />
                     )}
                   </span>
                   <button
@@ -426,7 +328,7 @@ export function ClaudePanel({
                       e.stopPropagation();
                       onCloseSession?.(id);
                     }}
-                    className="p-1 rounded hover:bg-zinc-200 text-zinc-400 hover:text-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="flex-shrink-0 p-1 rounded hover:bg-zinc-200 text-zinc-400 hover:text-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-out"
                     aria-label={`Close session ${id}`}
                     data-testid={`session-close-${id}`}
                   >
@@ -439,8 +341,8 @@ export function ClaudePanel({
                 <div
                   key={`standalone-${session.id}`}
                   className={`
-                    flex-shrink-0 flex items-center gap-1 pl-3 pr-1 py-2
-                    border-r border-zinc-200 last:border-r-0
+                    flex items-center justify-between gap-1 pl-4 pr-1.5 py-3 min-w-0
+                    border-b border-r border-zinc-200
                     cursor-pointer select-none group
                     ${session.id === activeSessionId
                       ? 'bg-white text-zinc-900'
@@ -451,15 +353,15 @@ export function ClaudePanel({
                   onClick={() => onSwitchSession?.(session.id)}
                 >
                   <span
-                    className="flex items-center gap-1.5 text-xs font-medium truncate max-w-[120px]"
+                    className="flex-1 flex items-center gap-2 text-sm font-medium min-w-0 overflow-hidden"
                     title={session.title}
                   >
                     <span className="truncate">{session.title}</span>
-                    {sessions?.get(session.id)?.status === 'creating' && (
-                      <span className="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0" />
+                    {(sessions?.get(session.id)?.status === 'connecting' || sessions?.get(session.id)?.status === 'creating') && (
+                      <span className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse flex-shrink-0" />
                     )}
                     {sessions?.get(session.id)?.status === 'streaming' && (
-                      <span className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
+                      <span className="w-2 h-2 rounded-full bg-[#819D9F] animate-pulse flex-shrink-0" />
                     )}
                   </span>
                   <button
@@ -467,7 +369,7 @@ export function ClaudePanel({
                       e.stopPropagation();
                       onCloseSession?.(session.id);
                     }}
-                    className="p-1 rounded hover:bg-zinc-200 text-zinc-400 hover:text-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="flex-shrink-0 p-1 rounded hover:bg-zinc-200 text-zinc-400 hover:text-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-out"
                     aria-label={`Close session ${session.id}`}
                     data-testid={`session-close-standalone-${session.id}`}
                   >
@@ -475,30 +377,52 @@ export function ClaudePanel({
                   </button>
                 </div>
               ))}
-              {/* New session button */}
-              <button
-                onClick={() => onNewSession?.()}
-                className="flex-shrink-0 flex items-center justify-center px-3 py-2 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 active:bg-zinc-200"
-                aria-label="Create new session"
-                data-testid="new-session-button"
-              >
-                <PlusIcon />
-              </button>
+              {/* New session button - hidden when weekly limit reached */}
+              {!limitReached && (
+                <button
+                  onClick={() => onNewSession?.()}
+                  className="flex items-center justify-center px-4 py-3 border-b border-r border-zinc-200 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 active:bg-zinc-200"
+                  aria-label="Create new session"
+                  data-testid="new-session-button"
+                >
+                  <PlusIcon />
+                </button>
+              )}
             </div>
           )}
 
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-200">
+            <div className="flex items-center gap-4 min-w-0">
+              <StatusIndicator status={status} />
+              <div className="min-w-0">
+                <h2 className="text-base font-semibold text-zinc-900 truncate" data-testid="panel-title">
+                  {isStandalone ? workItemTitle : `#${workItemId} ${workItemTitle}`}
+                </h2>
+                <p className="text-base text-zinc-500">
+                  {status === 'connecting' && 'Connecting...'}
+                  {status === 'creating' && 'Creating Claude session...'}
+                  {status === 'streaming' && 'Claude is working...'}
+                  {status === 'done' && 'Complete'}
+                  {status === 'error' && 'Error occurred'}
+                  {status === 'idle' && 'Ready'}
+                </p>
+              </div>
+            </div>
+          </div>
+
           {/* Error banner */}
           {status === 'error' && error && (
-            <div className="bg-red-50 border-b border-red-200 px-4 py-3" data-testid="error-banner">
-              <div className="flex items-start gap-3">
+            <div className="bg-red-50 border-b border-red-200 px-5 py-4" data-testid="error-banner">
+              <div className="flex items-start gap-4">
                 <ErrorIcon />
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-red-700" data-testid="error-message">{error}</p>
+                  <p className="text-base font-medium text-red-700" data-testid="error-message">{error}</p>
                   {exitCode !== null && (
-                    <p className="text-xs text-red-500 mt-1">Exit code: {exitCode}</p>
+                    <p className="text-base text-red-500 mt-1">Exit code: {exitCode}</p>
                   )}
                   {error === 'Claude CLI not found' && (
-                    <div className="mt-2 text-xs text-red-600" data-testid="install-instructions">
+                    <div className="mt-3 text-base text-red-600" data-testid="install-instructions">
                       <p className="font-medium mb-1">To install Claude CLI:</p>
                       <code className="block bg-red-100 rounded px-2 py-1 mt-1">
                         npm install -g @anthropic-ai/claude-code
@@ -507,40 +431,57 @@ export function ClaudePanel({
                   )}
                 </div>
                 {canRetry && (
-                  <button
+                  <Button
                     onClick={onRetry}
-                    className="px-3 py-1.5 text-xs font-medium bg-red-100 hover:bg-red-200 text-red-700 rounded transition-colors"
+                    variant="destructive"
+                    size="sm"
                     data-testid="retry-button"
                   >
                     Retry
-                  </button>
+                  </Button>
                 )}
               </div>
             </div>
           )}
 
+          {/* Sticky details toggle header */}
+          {onToggleNarratedMode && hasMeaningfulContent && ((sessions && sessions.size > 0) || standaloneSessions.length > 0) && (
+            <div className="flex justify-end px-5 py-2 border-b border-zinc-100 flex-shrink-0">
+              <button
+                onClick={onToggleNarratedMode}
+                className="text-xs text-zinc-400 hover:text-zinc-600 cursor-pointer transition-colors duration-200 ease-out"
+                aria-label={effectiveNarratedMode ? 'Show full conversation' : 'Show summary view'}
+                data-testid="narrated-mode-toggle"
+              >
+                {effectiveNarratedMode ? 'Show details' : 'Hide details'}
+              </button>
+            </div>
+          )}
+
           {/* Content */}
           <div
             ref={contentRef}
-            className="flex-1 overflow-y-auto overscroll-contain p-4 space-y-3"
+            className="flex-1 overflow-y-auto overscroll-contain p-5 space-y-4"
             data-testid="panel-content"
           >
             {/* Empty state when no sessions exist */}
             {(!sessions || sessions.size === 0) && standaloneSessions.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-full text-center" data-testid="no-sessions-empty-state">
-                <p className="text-zinc-500 text-sm mb-4">No active sessions</p>
-                <button
-                  onClick={() => onNewSession?.()}
-                  className="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
-                  data-testid="empty-state-new-session-button"
-                >
-                  <PlusIcon />
-                  New Session
-                </button>
+                <p className="text-zinc-500 text-base mb-6">{limitReached ? 'Weekly limit reached' : 'No active sessions'}</p>
+                {!limitReached && (
+                  <Button
+                    onClick={() => onNewSession?.()}
+                    className="flex items-center gap-2"
+                    data-testid="empty-state-new-session-button"
+                  >
+                    <PlusIcon />
+                    New Session
+                  </Button>
+                )}
               </div>
             ) : (
               <>
-                {narratedMode ? (
+                {effectiveNarratedMode ? (
                   /* Narrated mode: show gate cards, user messages, assistant text, and a working indicator */
                   <>
                     {(() => {
@@ -574,6 +515,7 @@ export function ClaudePanel({
                               isLatest={index === lastGateIndex}
                               onAnswerQuestion={(optionId, optionLabel) => handleAnswerQuestion(message, optionId, optionLabel)}
                               answeredQuestionId={answeredQuestions.get(message.timestamp) || null}
+                              onStartWorkItem={handleStartWorkItem}
                             />
                           ) : (
                             <MessageBlock message={message} />
@@ -582,17 +524,23 @@ export function ClaudePanel({
                       ));
                     })()}
                     {status === 'creating' && (
-                      <div className="flex items-center gap-2 text-xs text-zinc-400 py-2">
-                        <span className="w-1.5 h-1.5 bg-yellow-400 rounded-full animate-pulse" />
+                      <div className="flex items-center gap-1.5 text-sm text-zinc-400 py-3 whitespace-nowrap overflow-hidden text-ellipsis">
+                        <span className="w-1.5 h-1.5 bg-yellow-400 rounded-full animate-pulse shrink-0" />
                         Creating Claude session...
                         <ElapsedTimer isStreaming={true} timerKey={`${activeSessionId ?? 'default'}-${messages.filter(m => m.type === 'user').length}`} />
                       </div>
                     )}
                     {status === 'streaming' && (
-                      <div className="flex items-center gap-2 text-xs text-zinc-400 py-2">
-                        <span className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse" />
-                        Working...
+                      <div className="flex items-center gap-1.5 text-sm text-zinc-400 py-3 whitespace-nowrap overflow-hidden text-ellipsis">
+                        <span className="w-1.5 h-1.5 bg-[#819D9F] rounded-full animate-pulse shrink-0" />
                         <ElapsedTimer isStreaming={true} timerKey={`${activeSessionId ?? 'default'}-${messages.filter(m => m.type === 'user').length}`} />
+                        {(() => {
+                          const lastToolUse = [...messages].reverse().find(m => m.type === 'tool_use');
+                          if (!lastToolUse || !lastToolUse.tool_name) return 'Working...';
+                          const firstParamValue = lastToolUse.tool_input ? Object.values(lastToolUse.tool_input)[0] : null;
+                          const param = typeof firstParamValue === 'string' ? firstParamValue : '';
+                          return humanizeToolCall(lastToolUse.tool_name, param);
+                        })()}
                       </div>
                     )}
                   </>
@@ -604,7 +552,8 @@ export function ClaudePanel({
                       const lastUserMessageIndex = filteredMessages.findLastIndex(m => m.type === 'user');
                       const userMessageCount = filteredMessages.filter(m => m.type === 'user').length;
                       const lastAssistantIndex = filteredMessages.findLastIndex(m => m.type === 'assistant' || m.type === 'text');
-                      const hasIntermediates = filteredMessages.filter(m => m.type === 'assistant' || m.type === 'text').length > 1;
+                      // Only show collapse UI when there's an actual conversation (user messages exist)
+                      const hasIntermediates = userMessageCount > 0 && filteredMessages.filter(m => m.type === 'assistant' || m.type === 'text').length > 1;
 
                       const allExpanded = hasIntermediates && filteredMessages.every((m, i) =>
                         (m.type !== 'assistant' && m.type !== 'text') || i === lastAssistantIndex || expandedIndices.has(i)
@@ -613,7 +562,7 @@ export function ClaudePanel({
                       return (
                         <>
                           {hasIntermediates && (
-                            <div className="flex justify-end mb-1">
+                            <div className="flex justify-end mb-1.5">
                               <button
                                 onClick={() => {
                                   if (allExpanded) {
@@ -628,7 +577,7 @@ export function ClaudePanel({
                                     setExpandedIndices(all);
                                   }
                                 }}
-                                className="text-xs text-zinc-400 hover:text-zinc-600 transition-colors"
+                                className="text-base text-zinc-400 hover:text-zinc-600 transition-colors duration-200 ease-out"
                                 data-testid="expand-collapse-all"
                               >
                                 {allExpanded ? 'Collapse all' : 'Expand all'}
@@ -638,7 +587,8 @@ export function ClaudePanel({
                           {filteredMessages.map((message, index) => {
                             const isAssistant = message.type === 'assistant' || message.type === 'text';
                             const isFinal = isAssistant && index === lastAssistantIndex;
-                            const isIntermediate = isAssistant && !isFinal;
+                            // Don't collapse when no user messages (e.g., welcome session with static content)
+                            const isIntermediate = isAssistant && !isFinal && userMessageCount > 0;
                             const isExpanded = expandedIndices.has(index);
 
                             // Get first line for collapsed summary
@@ -650,9 +600,9 @@ export function ClaudePanel({
                               <div key={index}>
                                 {/* Final response divider */}
                                 {isFinal && hasIntermediates && (
-                                  <div className="flex items-center gap-3 my-3" data-testid="final-response-divider">
+                                  <div className="flex items-center gap-4 my-4" data-testid="final-response-divider">
                                     <div className="flex-1 h-px bg-zinc-200" />
-                                    <span className="text-xs text-zinc-400 font-medium">Final response</span>
+                                    <span className="text-base text-zinc-400 font-medium">Final response</span>
                                     <div className="flex-1 h-px bg-zinc-200" />
                                   </div>
                                 )}
@@ -681,21 +631,21 @@ export function ClaudePanel({
                                   >
                                     {isExpanded ? (
                                       <AnimatePresence mode="wait">
-                                        <motion.div
+                                        <m.div
                                           initial={{ height: 0, opacity: 0 }}
                                           animate={{ height: 'auto', opacity: 1 }}
                                           exit={{ height: 0, opacity: 0 }}
                                           transition={{ duration: 0.2, ease: 'easeInOut' }}
                                         >
                                           <MessageBlock message={message} />
-                                        </motion.div>
+                                        </m.div>
                                       </AnimatePresence>
                                     ) : (
-                                      <div className="bg-zinc-50 rounded-lg px-3 py-2 flex items-center gap-2 hover:bg-zinc-100 transition-colors" data-testid="collapsed-summary">
+                                      <div className="bg-zinc-50 rounded-lg px-4 py-3 flex items-center gap-3 hover:bg-zinc-100 transition-colors duration-200 ease-out" data-testid="collapsed-summary">
                                         <svg className="w-3 h-3 text-zinc-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                         </svg>
-                                        <span className="text-xs text-zinc-500 truncate">{firstLine.trim() ? firstLine : '(empty response)'}</span>
+                                        <span className="text-base text-zinc-500 truncate">{firstLine.trim() ? firstLine : '(empty response)'}</span>
                                       </div>
                                     )}
                                   </div>
@@ -729,8 +679,8 @@ export function ClaudePanel({
                         : null;
 
                       return (
-                        <div className="bg-zinc-100 rounded-lg px-3 py-2" data-testid="current-tool-call">
-                          <div className="flex items-center gap-2 text-xs">
+                        <div className="bg-zinc-100 rounded-lg px-4 py-3" data-testid="current-tool-call">
+                          <div className="flex items-center gap-3 text-base">
                             <span className="text-purple-600">{toolMessage.tool_name}</span>
                             {displayValue && <span className="text-zinc-500 truncate">{displayValue}</span>}
                           </div>
@@ -739,156 +689,52 @@ export function ClaudePanel({
                     })()}
                   </>
                 )}
-                {messages.length === 0 && status === 'idle' && (
-                  <div className="text-zinc-500 text-sm text-center py-8">
+                {showEmptyState && (
+                  <div className="text-zinc-500 text-base text-center py-8">
                     What's next?
                   </div>
                 )}
+                {/* Queued message — shown below status indicator while Claude is processing */}
+                {queuedMessage && (
+                  <div className="bg-[#e8f0f0] border-2 border-[#819D9F]/20 rounded-lg p-4 opacity-60" data-testid="queued-message">
+                    <div className="flex items-center gap-2 mb-1.5">
+                      <UserIcon />
+                      <span className="text-base text-zinc-400">Queued</span>
+                    </div>
+                    <div className="text-base text-zinc-700 whitespace-pre-wrap">{queuedMessage.message}</div>
+                  </div>
+                )}
               </>
             )}
           </div>
 
-          {/* Input field - visible when session is active or idle, but hidden when no tabs/sessions exist */}
+          {/* Footer: ReviewFooter when ready for review, otherwise normal input */}
           {(status === 'streaming' || status === 'creating' || status === 'done' || status === 'idle') && ((sessions && sessions.size > 0) || standaloneSessions.length > 0) && (
-            <ClaudePanelInput
-              onSendMessage={onSendMessage}
-              onStop={onStop}
-              isStreaming={status === 'streaming' || status === 'creating'}
-              placeholder="Type a message..."
-              attachedImages={attachedImages}
-              onImagesChange={handleImagesChange}
-            />
+            isReadyForReview && activeSessionId ? (
+              <ReviewFooter
+                workItemId={activeSessionId}
+                onAccepted={handleReviewAction}
+                onRejected={handleRejectAction}
+              />
+            ) : (
+              <ClaudePanelInput
+                onSendMessage={onSendMessage}
+                onStop={onStop}
+                isStreaming={status === 'streaming' || status === 'creating'}
+                disabled={limitReached}
+                placeholder={limitReached ? 'Weekly limit reached' : 'Type a message...'}
+                attachedImages={attachedImages}
+                onImagesChange={handleImagesChange}
+                activeSessionId={activeSessionId}
+              />
+            )
           )}
-        </motion.div>
+        </m.div>
       )}
     </AnimatePresence>
   );
 }
 
-function StatusIndicator({ status }: { status: StreamStatus }) {
-  const colorClass = {
-    idle: 'bg-zinc-500',
-    connecting: 'bg-yellow-500 animate-pulse',
-    creating: 'bg-yellow-500 animate-pulse',
-    streaming: 'bg-blue-500 animate-pulse',
-    done: 'bg-green-500',
-    error: 'bg-red-500',
-  }[status];
-
-  return <div className={`w-2 h-2 rounded-full ${colorClass}`} />;
-}
-
-function MessageBlock({ message }: { message: ClaudeMessage }) {
-  if (message.type === 'user') {
-    return (
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 ml-8" data-testid="user-message">
-        <div className="flex items-center gap-2 mb-1">
-          <UserIcon />
-          <span className="text-xs font-medium text-blue-600">You</span>
-        </div>
-        <div className="text-sm text-blue-900 [&_p]:my-1 [&_h1]:text-lg [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:my-2 [&_h3]:font-semibold [&_h3]:my-1 [&_pre]:bg-blue-100 [&_pre]:p-2 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:my-2 [&_code]:text-blue-700 [&_code]:bg-blue-100 [&_code]:px-1 [&_code]:rounded [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_li]:my-0.5 [&_a]:text-blue-600 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-blue-400 [&_blockquote]:pl-3 [&_blockquote]:italic">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{unescapeContent(message.content)}</ReactMarkdown>
-        </div>
-      </div>
-    );
-  }
-
-  if (message.type === 'assistant' || message.type === 'text') {
-    // Aggressive filtering: hide everything that's not genuine Claude conversation
-    if (isSystemNoise(message.content)) {
-      return null;
-    }
-
-    const displayContent = message.content;
-    if (!displayContent) {
-      return null;
-    }
-
-    return (
-      <div className="bg-zinc-50 rounded-lg p-3" data-testid="output-block">
-        <div className="text-zinc-700 text-sm [&_p]:my-1 [&_h1]:text-lg [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:my-2 [&_h3]:font-semibold [&_h3]:my-1 [&_pre]:bg-zinc-100 [&_pre]:p-2 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:my-2 [&_pre]:text-xs [&_code]:text-zinc-600 [&_code]:bg-zinc-100 [&_code]:px-1 [&_code]:rounded [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_li]:my-0.5 [&_a]:text-blue-600 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-zinc-400 [&_blockquote]:pl-3 [&_blockquote]:italic [&_table]:text-xs [&_table]:w-full [&_th]:bg-zinc-100 [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_td]:px-2 [&_td]:py-1 [&_td]:border-t [&_td]:border-zinc-200">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{unescapeContent(displayContent)}</ReactMarkdown>
-        </div>
-      </div>
-    );
-  }
-
-  if (message.type === 'tool_use') {
-    // Extract first param value for preview (e.g., "Bash git status")
-    const firstParamValue = message.tool_input ? Object.values(message.tool_input)[0] : null;
-    const displayValue = typeof firstParamValue === 'string'
-      ? (firstParamValue.length > 50 ? firstParamValue.slice(0, 50) + '...' : firstParamValue)
-      : null;
-
-    return (
-      <div className="flex items-center gap-2 py-1" data-testid="tool-call">
-        <span className="bg-purple-100 text-purple-700 px-2 py-0.5 rounded text-xs">{message.tool_name}</span>
-        {displayValue && <span className="text-xs text-purple-500 truncate">{displayValue}</span>}
-      </div>
-    );
-  }
-
-  // Show tool_result messages in collapsible format (#1000103)
-  // Filter noise content (skill prompts, file contents, etc.) - Bug #1000112
-  if (message.type === 'tool_result') {
-    const result = message.result || '';
-
-    // Apply same noise filtering as assistant/text messages
-    if (isSystemNoise(result)) {
-      return null;
-    }
-
-    const deduped = deduplicateToolOutput(result);
-    const isLong = deduped.length > 200;
-    const preview = isLong ? deduped.slice(0, 200) + '...' : deduped;
-
-    return (
-      <details className="bg-zinc-100 rounded-lg text-xs group" data-testid="tool-result">
-        <summary className="px-3 py-2 cursor-pointer text-zinc-500 hover:text-zinc-700 flex items-center gap-2 list-none">
-          <svg className="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-          </svg>
-          <span className="font-medium">Tool result</span>
-          {!isLong && <span className="text-zinc-400 truncate max-w-[200px]">{preview}</span>}
-        </summary>
-        <div className="px-3 pb-2 pt-0">
-          <pre className="text-zinc-600 whitespace-pre-wrap break-words overflow-x-auto max-h-[300px] overflow-y-auto">
-            {deduped}
-          </pre>
-        </div>
-      </details>
-    );
-  }
-
-  if (message.type === 'error') {
-    const isVersionError = isVersionUpdateError(message.content);
-    return (
-      <div className="bg-red-50 border border-red-200 rounded-lg p-3">
-        <div className="flex items-center gap-2 mb-1">
-          <ErrorIcon />
-          <span className="text-xs font-medium text-red-600">Error</span>
-        </div>
-        <pre className="text-sm text-red-700 whitespace-pre-wrap font-sans">{unescapeContent(message.content)}</pre>
-        {isVersionError && <UpdateClaudeButton />}
-      </div>
-    );
-  }
-
-  if (message.type === 'done') {
-    return null;
-  }
-
-  return null;
-}
-
-function SlideAwayIcon() {
-  return (
-    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-    </svg>
-  );
-}
-
 function CloseIcon() {
   return (
     <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -904,130 +750,3 @@ function PlusIcon() {
     </svg>
   );
 }
-
-function ToolIcon() {
-  return (
-    <svg className="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-    </svg>
-  );
-}
-
-function ErrorIcon() {
-  return (
-    <svg className="w-3.5 h-3.5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-  );
-}
-
-function CheckIcon() {
-  return (
-    <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-    </svg>
-  );
-}
-
-function UserIcon() {
-  return (
-    <svg className="w-3.5 h-3.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-    </svg>
-  );
-}
-
-// Persist timer start timestamps outside the component so they survive remounts (e.g., tab switches)
-const timerStartTimes = new Map<string, number>();
-
-function ElapsedTimer({ isStreaming, timerKey }: { isStreaming: boolean; timerKey: string }) {
-  const [elapsed, setElapsed] = useState(() => {
-    const existing = timerStartTimes.get(timerKey);
-    return existing ? Math.floor((Date.now() - existing) / 1000) : 0;
-  });
-
-  useEffect(() => {
-    if (isStreaming) {
-      // Start or continue timing — reuse persisted start time if available
-      if (!timerStartTimes.has(timerKey)) {
-        timerStartTimes.set(timerKey, Date.now());
-      }
-      const interval = setInterval(() => {
-        const startTime = timerStartTimes.get(timerKey);
-        if (startTime != null) {
-          setElapsed(Math.floor((Date.now() - startTime) / 1000));
-        }
-      }, 1000);
-      return () => clearInterval(interval);
-    } else {
-      // Reset when not streaming
-      timerStartTimes.delete(timerKey);
-      setElapsed(0);
-    }
-  }, [isStreaming, timerKey]);
-
-  if (!isStreaming) return null;
-
-  const minutes = Math.floor(elapsed / 60);
-  const seconds = elapsed % 60;
-  const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-
-  return (
-    <div className="text-xs text-zinc-500 mt-1 text-right" data-testid="elapsed-timer">
-      {display}
-    </div>
-  );
-}
-
-function UpdateClaudeButton() {
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [updateResult, setUpdateResult] = useState<{ success: boolean; error?: string } | null>(null);
-
-  const handleUpdate = async () => {
-    if (!window.electronAPI?.claudeCode?.update) {
-      setUpdateResult({ success: false, error: 'Update is only available in the desktop app.' });
-      return;
-    }
-
-    setIsUpdating(true);
-    setUpdateResult(null);
-
-    try {
-      const result = await window.electronAPI.claudeCode.update();
-      setUpdateResult(result);
-      if (result.success) {
-        // Reload after successful update
-        setTimeout(() => window.location.reload(), 1500);
-      }
-    } catch (err) {
-      setUpdateResult({ success: false, error: String(err) });
-    } finally {
-      setIsUpdating(false);
-    }
-  };
-
-  if (updateResult?.success) {
-    return (
-      <div className="mt-2 text-xs text-green-600" data-testid="update-success">
-        Update successful! Reloading...
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-2">
-      <button
-        onClick={handleUpdate}
-        disabled={isUpdating}
-        className="px-3 py-1.5 text-xs font-medium bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white rounded transition-colors"
-        data-testid="update-claude-button"
-      >
-        {isUpdating ? 'Updating...' : 'Update Claude'}
-      </button>
-      {updateResult?.error && (
-        <p className="mt-1 text-xs text-red-500">{updateResult.error}</p>
-      )}
-    </div>
-  );
-}