jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/ClaudePanel.tsx

@@ -1,271 +1,138 @@
-'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 { useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { AnimatePresence, m } from 'framer-motion';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { listen, invoke } from '../lib/tauri';
+
+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';
-
-// Tool name → human-friendly verb mapping for activity indicator
-const TOOL_VERBS: Record<string, string> = {
-  Read: 'Reading',
-  Grep: 'Searching for',
-  Glob: 'Finding files matching',
-  Bash: 'Running',
-  Edit: 'Editing',
-  Write: 'Writing',
-  Task: 'Delegating',
-  WebFetch: 'Fetching',
-  WebSearch: 'Searching web for',
-};
-
-function extractFilename(path: string): string {
-  return path.split('/').pop() || path;
-}
-
-function humanizeToolCall(toolName: string, param: string): string {
-  const verb = TOOL_VERBS[toolName] || toolName;
-  if (['Read', 'Edit', 'Write'].includes(toolName)) {
-    return `${verb} ${extractFilename(param)}...`;
-  }
-  if (toolName === 'Bash') {
-    const short = param.length > 40 ? param.slice(0, 40) : param;
-    return `${verb} ${short}...`;
-  }
-  if (['Grep', 'Glob', 'WebSearch'].includes(toolName)) {
-    const short = param.length > 30 ? param.slice(0, 30) : param;
-    return `${verb} ${short}...`;
-  }
-  return `${verb} ${param}...`;
-}
-
-// 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, MergedToolBlock, StatusIndicator, ErrorIcon, UserIcon, humanizeToolCall, unescapeContent, isSystemNoise } from './MessageBlock';
+import { ElapsedTimer } from './ElapsedTimer';
+import { Button } from '@/components/ui/Button';
+import { ViewModeToolbar, type ViewMode } from './ViewModeToolbar';
+import { dataBridge } from '@/lib/data-bridge';
+
+const READOUT_FILTERS = [
+  { id: 'init', label: 'Init', types: ['system'] },
+  { id: 'streaming', label: 'Streaming', types: ['content_block_start', 'content_block_delta', 'content_block_stop', 'message_start', 'message_delta', 'message_stop'] },
+  { id: 'messages', label: 'Messages', types: ['assistant'] },
+  { id: 'tools', label: 'Tools', types: ['user'] },
+  { id: 'completion', label: 'Completion', types: ['result', 'done'] },
+  { id: 'errors', label: 'Errors', types: ['error'] },
+] as const;
+
+type ReadoutFilterId = typeof READOUT_FILTERS[number]['id'];
+
+type DetailItem =
+  | { kind: 'message'; msg: ClaudeMessage; idx: number; isIntermediate: boolean; firstLine: string }
+  | { kind: 'merged-tool'; toolMsg: ClaudeMessage; resultMsg?: ClaudeMessage; idx: number }
+  | { kind: 'gate'; msg: ClaudeMessage; idx: number }
+  | { kind: 'elapsed'; timerKey: string }
+  | { kind: 'tool-indicator'; toolMsg: ClaudeMessage };
 
 interface ClaudePanelProps {
   isOpen: boolean;
-  workItemId: string;
-  workItemTitle: string;
-  messages: ClaudeMessage[];
-  status: StreamStatus;
-  error: string | null;
-  exitCode: number | null;
-  canRetry: boolean;
-  queuedMessage?: { message: string; images?: unknown[] } | null;
   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,
-  queuedMessage,
   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,
+    fullReadoutMode,
+    rawEvents,
+    isTabSwitching,
+  } = useSessionState();
+  const {
+    switchSession: onSwitchSession,
+    closeSession: onCloseSession,
+    openSession: onOpenSession,
+    createNewSession: onNewSession,
+    sendMessage: onSendMessage,
+    retry: onRetry,
+    stop: onStop,
+    toggleNarratedMode: onToggleNarratedMode,
+    toggleFullReadout: onToggleFullReadout,
+  } = 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');
-  // Force detail view when no user messages (e.g., welcome session with static content)
-  const hasUserMessages = messages.some(m => m.type === 'user');
-  const effectiveNarratedMode = hasUserMessages ? narratedMode : false;
+  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;
+
+  // Memoize narrated message computation — avoids recomputing on every render
+  const { narratedMessages, lastGateIndex } = useMemo(() => {
+    if (!effectiveNarratedMode) return { narratedMessages: [], lastGateIndex: -1 };
+    const finalIndicesPerTurn = new Set<number>();
+    let lastAssistantOrTextIdx = -1;
+    for (let i = 0; i < messages.length; i++) {
+      if (messages[i].type === 'assistant' || messages[i].type === 'text') {
+        lastAssistantOrTextIdx = i;
+      }
+      if (messages[i].type === 'user' && lastAssistantOrTextIdx >= 0) {
+        finalIndicesPerTurn.add(lastAssistantOrTextIdx);
+        lastAssistantOrTextIdx = -1;
+      }
+    }
+    if (lastAssistantOrTextIdx >= 0 && status !== 'streaming') {
+      finalIndicesPerTurn.add(lastAssistantOrTextIdx);
+    }
+    const filtered = messages.filter((m, i) =>
+      m.type === 'gate' || m.type === 'user' || ((m.type === 'assistant' || m.type === 'text') && finalIndicesPerTurn.has(i))
+    );
+    return { narratedMessages: filtered, lastGateIndex: filtered.findLastIndex(m => m.type === 'gate') };
+  }, [messages, status, effectiveNarratedMode]);
+
+  // 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>(undefined);
+  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]);
+
+  // Auto-create a session only when the panel transitions from closed to open with no sessions
+  const hasNoSessions = (!sessions || sessions.size === 0) && standaloneSessions.length === 0;
+  const prevIsOpenRef = useRef(isOpen);
+  useEffect(() => {
+    const wasOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    if (isOpen && !wasOpen && hasNoSessions && !limitReached) {
+      onNewSession?.();
+    }
+  }, [isOpen, hasNoSessions, limitReached, onNewSession]);
 
   // Track answered question gates by timestamp → selected option id
   const [answeredQuestions, setAnsweredQuestions] = useState<Map<number, string>>(new Map());
@@ -276,68 +143,243 @@ 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]);
+
+  // Scroll ratio to restore after view mode change
+  const scrollRatioRef = useRef<number | null>(null);
 
   // Accordion state for detail view - tracks which intermediate messages are expanded
   const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
+  const [activeFilters, setActiveFilters] = useState<Set<ReadoutFilterId>>(() => new Set(READOUT_FILTERS.map(f => f.id)));
+  const toggleFilter = useCallback((id: ReadoutFilterId) => {
+    setActiveFilters(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  // Derive viewMode from existing state
+  const viewMode: ViewMode = effectiveNarratedMode ? 'summary' : fullReadoutMode ? 'raw' : 'detail';
+
+  // Compute detail-view intermediates at component level for toolbar
+  // Include tool_use so we can pair them with tool_result as merged blocks
+  const detailFilteredMessages = messages;
+  const detailUserMessageCount = detailFilteredMessages.filter(m => m.type === 'user').length;
+  const detailLastAssistantIndex = detailFilteredMessages.findLastIndex(m => m.type === 'assistant' || m.type === 'text');
+  const detailHasIntermediates = detailUserMessageCount > 0 && detailFilteredMessages.filter(m => m.type === 'assistant' || m.type === 'text').length > 1;
+  const detailAllExpanded = detailHasIntermediates && detailFilteredMessages.every((m, i) =>
+    (m.type !== 'assistant' && m.type !== 'text') || i === detailLastAssistantIndex || expandedIndices.has(i)
+  );
+
+  const handleViewModeChange = useCallback((mode: ViewMode) => {
+    // Save scroll ratio before switching so we can restore position
+    if (contentRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = contentRef.current;
+      const scrollableHeight = scrollHeight - clientHeight;
+      scrollRatioRef.current = scrollableHeight > 0 ? scrollTop / scrollableHeight : 0;
+    }
+    // Reset expand state when leaving Detail mode
+    if (viewMode === 'detail' && mode !== 'detail') {
+      setExpandedIndices(new Set());
+    }
+    if (mode === 'summary' && !effectiveNarratedMode) {
+      onToggleNarratedMode?.();
+      if (fullReadoutMode) onToggleFullReadout?.();
+    } else if (mode === 'detail') {
+      if (effectiveNarratedMode) onToggleNarratedMode?.();
+      if (fullReadoutMode) onToggleFullReadout?.();
+    } else if (mode === 'raw') {
+      if (effectiveNarratedMode) onToggleNarratedMode?.();
+      if (!fullReadoutMode) onToggleFullReadout?.();
+    }
+  }, [viewMode, effectiveNarratedMode, fullReadoutMode, onToggleNarratedMode, onToggleFullReadout]);
+
+  // Restore scroll ratio after view mode change renders new content
+  useLayoutEffect(() => {
+    if (scrollRatioRef.current !== null && contentRef.current) {
+      const ratio = scrollRatioRef.current;
+      scrollRatioRef.current = null;
+      // Use rAF to wait for the browser to layout the new content
+      requestAnimationFrame(() => {
+        if (contentRef.current) {
+          const { scrollHeight, clientHeight } = contentRef.current;
+          contentRef.current.scrollTop = ratio * (scrollHeight - clientHeight);
+        }
+      });
+    }
+  }, [effectiveNarratedMode, fullReadoutMode]);
+
+  const handleToggleExpandAll = useCallback(() => {
+    if (detailAllExpanded) {
+      setExpandedIndices(new Set());
+    } else {
+      const all = new Set<number>();
+      detailFilteredMessages.forEach((m, i) => {
+        if ((m.type === 'assistant' || m.type === 'text') && i !== detailLastAssistantIndex) {
+          all.add(i);
+        }
+      });
+      setExpandedIndices(all);
+    }
+  }, [detailAllExpanded, detailFilteredMessages, detailLastAssistantIndex]);
+
+  // Pre-compute renderable items for detail mode virtualization
+  const detailItems = useMemo<DetailItem[]>(() => {
+    if (effectiveNarratedMode || fullReadoutMode) return [];
+
+    const items: DetailItem[] = [];
+    const fm = detailFilteredMessages;
+    const lastUserIdx = fm.findLastIndex(m => m.type === 'user');
+    const lastAssistIdx = detailLastAssistantIndex;
+    const userCount = detailUserMessageCount;
+
+    const pairedResultIndices = new Set<number>();
+    for (let i = 0; i < fm.length; i++) {
+      if (fm[i].type === 'tool_use') {
+        for (let j = i + 1; j < fm.length; j++) {
+          if (fm[j].type === 'tool_result') { pairedResultIndices.add(j); break; }
+          if (fm[j].type !== 'tool_use') break;
+        }
+      }
+    }
+
+    for (let i = 0; i < fm.length; i++) {
+      const msg = fm[i];
+      if (pairedResultIndices.has(i)) continue;
+
+      if (msg.type === 'tool_use') {
+        let resultMsg: ClaudeMessage | undefined;
+        for (let j = i + 1; j < fm.length; j++) {
+          if (fm[j].type === 'tool_result') { resultMsg = fm[j]; break; }
+          if (fm[j].type !== 'tool_use') break;
+        }
+        items.push({ kind: 'merged-tool', toolMsg: msg, resultMsg, idx: i });
+      } else if (msg.type === 'gate') {
+        items.push({ kind: 'gate', msg, idx: i });
+      } else {
+        const isAssistant = msg.type === 'assistant' || msg.type === 'text';
+        const isFinal = isAssistant && i === lastAssistIdx;
+        const isIntermediate = isAssistant && !isFinal && userCount > 0;
+        const firstLine = isIntermediate ? (unescapeContent(msg.content).split('\n')[0] || '').slice(0, 120) : '';
+        items.push({ kind: 'message', msg, idx: i, isIntermediate, firstLine });
+      }
+
+      if (i === lastUserIdx && (status === 'streaming' || status === 'creating')) {
+        items.push({ kind: 'elapsed', timerKey: `${activeSessionId ?? 'default'}-${userCount}` });
+      }
+    }
+
+    const lastToolIdx = fm.findLastIndex(m => m.type === 'tool_use');
+    if (lastToolIdx !== -1) {
+      const hasSubsequent = fm.slice(lastToolIdx + 1).some(
+        m => (m.type === 'text' || m.type === 'assistant') && !isSystemNoise(m.content)
+      );
+      if (!hasSubsequent) {
+        items.push({ kind: 'tool-indicator', toolMsg: fm[lastToolIdx] });
+      }
+    }
+
+    return items;
+  }, [detailFilteredMessages, detailLastAssistantIndex, detailUserMessageCount, status, activeSessionId, effectiveNarratedMode, fullReadoutMode]);
+
+  const detailVirtualizer = useVirtualizer({
+    count: detailItems.length,
+    getScrollElement: () => contentRef.current,
+    estimateSize: () => 80,
+    overscan: 5,
+  });
 
   // Reset expanded state when toggling between summary/detail views
   useEffect(() => {
     setExpandedIndices(new Set());
   }, [effectiveNarratedMode]);
 
-  // Drag-and-drop state lifted to panel level so the entire panel is a drop target
+  // Drag-and-drop state lifted to panel level so the entire panel is a drop target.
+  // Uses Tauri native drag-drop events (HTML5 dataTransfer.files is empty in WKWebView).
   const [isDragging, setIsDragging] = useState(false);
   const [attachedImages, setAttachedImages] = useState<AttachedImage[]>([]);
-  const dragCounterRef = useRef(0);
-
-  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounterRef.current++;
-    if (e.dataTransfer.types.includes('Files')) {
-      setIsDragging(true);
-    }
-  }, []);
 
-  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounterRef.current--;
-    if (dragCounterRef.current === 0) {
-      setIsDragging(false);
+  // Per-session image draft map: save/restore attached images when switching tabs
+  const imageDraftsRef = useRef(new Map<string, AttachedImage[]>());
+  const prevSessionForImagesRef = useRef(activeSessionId);
+  const attachedImagesRef = useRef(attachedImages);
+  attachedImagesRef.current = attachedImages;
+
+  useEffect(() => {
+    const prevId = prevSessionForImagesRef.current;
+    if (prevId && prevId !== activeSessionId) {
+      imageDraftsRef.current.set(prevId, attachedImagesRef.current);
     }
-  }, []);
+    const restored = activeSessionId ? imageDraftsRef.current.get(activeSessionId) ?? [] : [];
+    setAttachedImages(restored);
+    prevSessionForImagesRef.current = activeSessionId;
+  }, [activeSessionId]);
+
+  // Tauri native drag-drop listener — replaces HTML5 drag handlers that don't
+  // work in WKWebView (dataTransfer.files is always empty on macOS).
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+  useEffect(() => {
+    const unlisteners: Array<Promise<() => void>> = [];
 
-  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
+    unlisteners.push(
+      listen<{ paths: string[]; position: { x: number; y: number } }>('tauri://drag-enter', () => {
+        if (isOpenRef.current) setIsDragging(true);
+      })
+    );
 
-  const handleDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-    dragCounterRef.current = 0;
-
-    const files = Array.from(e.dataTransfer.files);
-    const imageFiles = files.filter(file => file.type.startsWith('image/'));
-
-    imageFiles.forEach(file => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const newImage: AttachedImage = {
-          id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-          name: file.name,
-          type: file.type,
-          dataUrl: reader.result as string,
-          size: file.size,
-        };
-        setAttachedImages(prev => [...prev, newImage]);
-      };
-      reader.readAsDataURL(file);
-    });
+    unlisteners.push(
+      listen('tauri://drag-leave', () => {
+        setIsDragging(false);
+      })
+    );
+
+    unlisteners.push(
+      listen<{ paths: string[]; position: { x: number; y: number } }>('tauri://drag-drop', async (event) => {
+        setIsDragging(false);
+        if (!isOpenRef.current) return;
+
+        try {
+          const images = await invoke<Array<{
+            name: string;
+            type: string;
+            dataUrl: string;
+            size: number;
+          }>>('read_image_files', { paths: event.payload.paths });
+
+          if (images.length > 0) {
+            const newImages: AttachedImage[] = images.map(img => ({
+              id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+              name: img.name,
+              type: img.type,
+              dataUrl: img.dataUrl,
+              size: img.size,
+            }));
+            setAttachedImages(prev => [...prev, ...newImages]);
+          }
+        } catch (err) {
+          console.error('[ClaudePanel] Failed to read dropped images:', err);
+        }
+      })
+    );
+
+    return () => {
+      unlisteners.forEach(p => p.then(unlisten => unlisten()));
+    };
   }, []);
 
   const handleImagesChange = useCallback((images: AttachedImage[]) => {
@@ -348,87 +390,200 @@ export function ClaudePanel({
   // Also treat 'sessions' (default state with no active session) as standalone
   const isStandalone = workItemId === 'sessions' || standaloneSessions.some(s => s.id === workItemId);
 
-  // Auto-scroll to bottom when new messages arrive
+  // Track whether active work item is ready for review
+  const [isReadyForReview, setIsReadyForReview] = useState(false);
+  const reviewDelayRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Track whether user clicked "Ask a question" to temporarily hide the review footer
+  const [isAskingQuestion, setIsAskingQuestion] = useState(false);
+  // Track whether user has sent a message during the ask-question flow
+  const questionSentRef = useRef(false);
+
+  const fetchReadyForReview = useCallback(() => {
+    if (isStandalone || !activeSessionId) {
+      if (reviewDelayRef.current) { clearTimeout(reviewDelayRef.current); reviewDelayRef.current = null; }
+      setIsReadyForReview(false);
+      return;
+    }
+
+    const workId = parseInt(activeSessionId, 10);
+    if (isNaN(workId)) {
+      if (reviewDelayRef.current) { clearTimeout(reviewDelayRef.current); reviewDelayRef.current = null; }
+      setIsReadyForReview(false);
+      return;
+    }
+
+    dataBridge.getWorkItem(workId)
+      .then(data => {
+        const ready = !!(data && data.ready_for_review);
+        if (ready) {
+          // Delay showing the review footer by 5 seconds
+          if (!reviewDelayRef.current) {
+            reviewDelayRef.current = setTimeout(() => {
+              reviewDelayRef.current = null;
+              setIsReadyForReview(true);
+            }, 5000);
+          }
+        } else {
+          if (reviewDelayRef.current) { clearTimeout(reviewDelayRef.current); reviewDelayRef.current = null; }
+          setIsReadyForReview(false);
+        }
+      })
+      .catch(() => {
+        if (reviewDelayRef.current) { clearTimeout(reviewDelayRef.current); reviewDelayRef.current = null; }
+        setIsReadyForReview(false);
+      });
+  }, [activeSessionId, isStandalone]);
+
+  // Fetch on mount / session switch; clean up delay timer
+  useEffect(() => {
+    fetchReadyForReview();
+    return () => {
+      if (reviewDelayRef.current) { clearTimeout(reviewDelayRef.current); reviewDelayRef.current = null; }
+    };
+  }, [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 });
+    }
+
+    // Send rejection reason to Claude so it can act on the feedback
+    onSendMessage(reason);
+  }, [activeSessionId, onSendMessage]);
+
+  const handleAskQuestion = useCallback(() => {
+    setIsReadyForReview(false);
+    setIsAskingQuestion(true);
+    questionSentRef.current = false;
+  }, []);
+
+  // Wrap onSendMessage to track when user sends a message during ask-question flow
+  const handleSendMessage = useCallback((...args: Parameters<typeof onSendMessage>) => {
+    if (isAskingQuestion) {
+      questionSentRef.current = true;
+    }
+    return onSendMessage(...args);
+  }, [onSendMessage, isAskingQuestion]);
+
+  // Restore review footer after Claude finishes responding to the user's question.
+  // Uses questionSentRef to avoid premature restoration from status flicker
+  // (e.g., streaming→idle→streaming during tool use gaps).
+  const prevStatusRef = useRef(status);
+  useEffect(() => {
+    const wasStreaming = prevStatusRef.current === 'streaming' || prevStatusRef.current === 'creating';
+    const isNowIdle = status === 'idle' || status === 'done' || status === 'error';
+    if (isAskingQuestion && questionSentRef.current && wasStreaming && isNowIdle) {
+      setIsReadyForReview(true);
+      setIsAskingQuestion(false);
+      questionSentRef.current = false;
+    }
+    prevStatusRef.current = status;
+  }, [status, isAskingQuestion]);
+
+  // Reset ask-question state when switching sessions
   useEffect(() => {
+    setIsAskingQuestion(false);
+    questionSentRef.current = false;
+  }, [activeSessionId]);
+
+  // Smart auto-scroll: only scroll if user is near the bottom.
+  // Force scroll when Claude finishes (status → idle/done) so the final response is visible.
+  const isNearBottomRef = useRef(true);
+
+  const handleContentScroll = useCallback(() => {
     if (contentRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = contentRef.current;
+      isNearBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (contentRef.current && isNearBottomRef.current) {
       contentRef.current.scrollTop = contentRef.current.scrollHeight;
     }
   }, [messages]);
 
+  // Force scroll to bottom when Claude finishes working
+  const prevStatusForScrollRef = useRef(status);
+  useEffect(() => {
+    const wasWorking = prevStatusForScrollRef.current === 'streaming' || prevStatusForScrollRef.current === 'creating';
+    const isNowDone = status === 'idle' || status === 'done';
+    if (wasWorking && isNowDone && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+      isNearBottomRef.current = true;
+    }
+    prevStatusForScrollRef.current = status;
+  }, [status]);
+
   return (
     <AnimatePresence>
       {isOpen && (
-        <motion.div
+        <m.div
           initial={{ x: '100%' }}
           animate={{ x: 0 }}
           exit={{ x: '100%' }}
           transition={{ type: 'spring', damping: 25, stiffness: 200 }}
           className="fixed right-0 top-0 h-full w-[480px] bg-white border-l border-zinc-200 flex flex-col z-50"
           data-testid="claude-panel"
-          onDragEnter={handleDragEnter}
-          onDragLeave={handleDragLeave}
-          onDragOver={handleDragOver}
-          onDrop={handleDrop}
         >
           {/* 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 ${
-                    effectiveNarratedMode
-                      ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
-                      : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200'
-                  }`}
-                  aria-label={effectiveNarratedMode ? 'Show full conversation' : 'Show summary view'}
-                  data-testid="narrated-mode-toggle"
-                >
-                  {effectiveNarratedMode ? '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,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))
@@ -436,35 +591,33 @@ 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'
-                      : 'text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 active:bg-zinc-200'
+                    ${session.status === 'streaming'
+                      ? 'bg-[#819D9F]/10 text-zinc-900'
+                      : session.status === 'connecting' || session.status === 'creating'
+                        ? 'bg-yellow-50 text-zinc-900'
+                        : id === activeSessionId
+                          ? 'bg-white text-zinc-900'
+                          : 'text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 active:bg-zinc-200'
                     }
                   `}
                   data-testid={`session-tab-${id}`}
                   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 === 'streaming' && (
-                      <span className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
-                    )}
                   </span>
                   <button
                     onClick={(e) => {
                       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}`}
                   >
@@ -477,35 +630,33 @@ 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'
-                      : 'text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 active:bg-zinc-200'
+                    ${sessions?.get(session.id)?.status === 'streaming'
+                      ? 'bg-[#819D9F]/10 text-zinc-900'
+                      : sessions?.get(session.id)?.status === 'connecting' || sessions?.get(session.id)?.status === 'creating'
+                        ? 'bg-yellow-50 text-zinc-900'
+                        : session.id === activeSessionId
+                          ? 'bg-white text-zinc-900'
+                          : 'text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 active:bg-zinc-200'
                     }
                   `}
                   data-testid={`session-tab-standalone-${session.id}`}
                   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 === 'streaming' && (
-                      <span className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
-                    )}
                   </span>
                   <button
                     onClick={(e) => {
                       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}`}
                   >
@@ -513,30 +664,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
@@ -545,90 +718,84 @@ 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>
           )}
 
+          {/* View mode toolbar */}
+          {hasMeaningfulContent && ((sessions && sessions.size > 0) || standaloneSessions.length > 0) && (
+            <ViewModeToolbar
+              viewMode={viewMode}
+              onViewModeChange={handleViewModeChange}
+              hasIntermediates={detailHasIntermediates}
+              allExpanded={detailAllExpanded}
+              onToggleExpandAll={handleToggleExpandAll}
+              activeFilters={activeFilters}
+              onToggleFilter={toggleFilter as (id: any) => void}
+            />
+          )}
+
           {/* Content */}
           <div
             ref={contentRef}
-            className="flex-1 overflow-y-auto overscroll-contain p-4 space-y-3"
+            onScroll={handleContentScroll}
+            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>
             ) : (
               <>
                 {effectiveNarratedMode ? (
                   /* Narrated mode: show gate cards, user messages, assistant text, and a working indicator */
                   <>
-                    {(() => {
-                      // Build a set of indices that are the last assistant/text response per turn
-                      // A turn boundary is defined by user messages
-                      const finalIndicesPerTurn = new Set<number>();
-                      let lastAssistantOrTextIdx = -1;
-                      for (let i = 0; i < messages.length; i++) {
-                        if (messages[i].type === 'assistant' || messages[i].type === 'text') {
-                          lastAssistantOrTextIdx = i;
-                        }
-                        if (messages[i].type === 'user' && lastAssistantOrTextIdx >= 0) {
-                          finalIndicesPerTurn.add(lastAssistantOrTextIdx);
-                          lastAssistantOrTextIdx = -1;
-                        }
-                      }
-                      // Add the final assistant/text of the last turn only if the turn is complete
-                      if (lastAssistantOrTextIdx >= 0 && status !== 'streaming') {
-                        finalIndicesPerTurn.add(lastAssistantOrTextIdx);
-                      }
-
-                      const narratedMessages = messages.filter((m, i) =>
-                        m.type === 'gate' || m.type === 'user' || ((m.type === 'assistant' || m.type === 'text') && finalIndicesPerTurn.has(i))
-                      );
-                      const lastGateIndex = narratedMessages.findLastIndex(m => m.type === 'gate');
-                      return narratedMessages.map((message, index) => (
-                        <div key={index}>
-                          {message.type === 'gate' ? (
-                            <GateCard
-                              message={message}
-                              isLatest={index === lastGateIndex}
-                              onAnswerQuestion={(optionId, optionLabel) => handleAnswerQuestion(message, optionId, optionLabel)}
-                              answeredQuestionId={answeredQuestions.get(message.timestamp) || null}
-                            />
-                          ) : (
-                            <MessageBlock message={message} />
-                          )}
-                        </div>
-                      ));
-                    })()}
+                    {narratedMessages.map((message, index) => (
+                      <div key={index}>
+                        {message.type === 'gate' ? (
+                          <GateCard
+                            message={message}
+                            isLatest={index === lastGateIndex}
+                            onAnswerQuestion={(optionId, optionLabel) => handleAnswerQuestion(message, optionId, optionLabel)}
+                            answeredQuestionId={answeredQuestions.get(message.timestamp) || null}
+                            onStartWorkItem={handleStartWorkItem}
+                          />
+                        ) : (
+                          <MessageBlock message={message} />
+                        )}
+                      </div>
+                    ))}
                     {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" />
+                      <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');
@@ -640,311 +807,192 @@ export function ClaudePanel({
                       </div>
                     )}
                   </>
-                ) : (
-                  /* Detail mode: show full conversation with collapsible intermediate responses */
-                  <>
-                    {(() => {
-                      const filteredMessages = messages.filter(m => m.type !== 'tool_use');
-                      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');
-                      // 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)
-                      );
-
-                      return (
-                        <>
-                          {hasIntermediates && (
-                            <div className="flex justify-end mb-1">
-                              <button
-                                onClick={() => {
-                                  if (allExpanded) {
-                                    setExpandedIndices(new Set());
-                                  } else {
-                                    const all = new Set<number>();
-                                    filteredMessages.forEach((m, i) => {
-                                      if ((m.type === 'assistant' || m.type === 'text') && i !== lastAssistantIndex) {
-                                        all.add(i);
-                                      }
-                                    });
-                                    setExpandedIndices(all);
-                                  }
-                                }}
-                                className="text-xs text-zinc-400 hover:text-zinc-600 transition-colors"
-                                data-testid="expand-collapse-all"
-                              >
-                                {allExpanded ? 'Collapse all' : 'Expand all'}
-                              </button>
-                            </div>
-                          )}
-                          {filteredMessages.map((message, index) => {
-                            const isAssistant = message.type === 'assistant' || message.type === 'text';
-                            const isFinal = isAssistant && index === lastAssistantIndex;
-                            // 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
-                            const firstLine = isIntermediate
-                              ? (unescapeContent(message.content).split('\n')[0] || '').slice(0, 120)
-                              : '';
-
+                ) : fullReadoutMode ? (
+                  /* Full readout mode: raw stream-json events with filter chips */
+                  (() => {
+                    const allowedTypes = new Set(
+                      READOUT_FILTERS
+                        .filter(f => activeFilters.has(f.id))
+                        .flatMap(f => [...f.types])
+                    );
+                    const filteredEvents = rawEvents.filter(event => {
+                      const evt = event as Record<string, unknown>;
+                      return (allowedTypes as Set<string>).has((evt.type as string) || 'unknown');
+                    });
+                    const typeColors: Record<string, string> = {
+                      system: 'text-blue-600 bg-blue-50',
+                      assistant: 'text-emerald-600 bg-emerald-50',
+                      user: 'text-cyan-600 bg-cyan-50',
+                      result: 'text-amber-600 bg-amber-50',
+                      error: 'text-red-600 bg-red-50',
+                      content_block_delta: 'text-zinc-500 bg-zinc-50',
+                      content_block_start: 'text-zinc-400 bg-zinc-50',
+                      content_block_stop: 'text-zinc-400 bg-zinc-50',
+                      message_start: 'text-zinc-400 bg-zinc-50',
+                      message_stop: 'text-zinc-400 bg-zinc-50',
+                      message_delta: 'text-zinc-400 bg-zinc-50',
+                      done: 'text-amber-600 bg-amber-50',
+                    };
+                    return (
+                      <>
+                        {filteredEvents.length === 0 ? (
+                          <div className="text-zinc-400 text-sm text-center py-8">
+                            {rawEvents.length === 0
+                              ? 'No raw events captured yet. Send a message to start capturing.'
+                              : 'No events match the selected filters.'}
+                          </div>
+                        ) : (
+                          filteredEvents.map((event, index) => {
+                            const evt = event as Record<string, unknown>;
+                            const eventType = (evt.type as string) || 'unknown';
+                            const colorClass = typeColors[eventType] || 'text-zinc-500 bg-zinc-50';
                             return (
-                              <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-1 h-px bg-zinc-200" />
-                                    <span className="text-xs text-zinc-400 font-medium">Final response</span>
-                                    <div className="flex-1 h-px bg-zinc-200" />
-                                  </div>
-                                )}
-                                {message.type === 'gate' ? (
-                                  <GateCard
-                                    message={message}
-                                    onAnswerQuestion={(optionId, optionLabel) => handleAnswerQuestion(message, optionId, optionLabel)}
-                                    answeredQuestionId={answeredQuestions.get(message.timestamp) || null}
-                                  />
-                                ) : isIntermediate ? (
-                                  /* Collapsible intermediate assistant response */
-                                  <div
-                                    className="cursor-pointer"
-                                    onClick={() => {
-                                      setExpandedIndices(prev => {
-                                        const next = new Set(prev);
-                                        if (next.has(index)) {
-                                          next.delete(index);
-                                        } else {
-                                          next.add(index);
-                                        }
-                                        return next;
-                                      });
-                                    }}
-                                    data-testid="collapsible-message"
-                                  >
-                                    {isExpanded ? (
-                                      <AnimatePresence mode="wait">
-                                        <motion.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>
-                                      </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">
-                                        <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>
-                                      </div>
-                                    )}
-                                  </div>
-                                ) : (
-                                  <MessageBlock message={message} />
-                                )}
-                                {index === lastUserMessageIndex && (status === 'streaming' || status === 'creating') && (
-                                  <ElapsedTimer isStreaming={true} timerKey={`${activeSessionId ?? 'default'}-${userMessageCount}`} />
-                                )}
-                              </div>
+                              <details key={index} className="group">
+                                <summary className={`flex items-center gap-2 px-3 py-1.5 rounded cursor-pointer text-xs font-mono ${colorClass}`}>
+                                  <span className="font-semibold">{eventType}</span>
+                                  <span className="text-zinc-400">#{index}</span>
+                                </summary>
+                                <pre className="mt-1 px-3 py-2 bg-zinc-50 rounded text-xs font-mono text-zinc-700 overflow-x-auto whitespace-pre-wrap break-all max-h-64 overflow-y-auto">
+                                  {JSON.stringify(event, null, 2)}
+                                </pre>
+                              </details>
                             );
-                          })}
-                        </>
-                      );
-                    })()}
-                    {/* Current tool call indicator - shown inline after last Claude message */}
-                    {(() => {
-                      const lastToolUseIndex = messages.findLastIndex(m => m.type === 'tool_use');
-                      if (lastToolUseIndex === -1) return null;
-
-                      const hasSubsequentMessage = messages.slice(lastToolUseIndex + 1).some(
-                        m => (m.type === 'text' || m.type === 'assistant') &&
-                             !isSystemNoise(m.content)
-                      );
-                      if (hasSubsequentMessage) return null;
-
-                      const toolMessage = messages[lastToolUseIndex];
-                      const firstParamValue = toolMessage.tool_input ? Object.values(toolMessage.tool_input)[0] : null;
-                      const displayValue = typeof firstParamValue === 'string'
-                        ? (firstParamValue.length > 50 ? firstParamValue.slice(0, 50) + '...' : firstParamValue)
-                        : null;
-
+                          })
+                        )}
+                      </>
+                    );
+                  })()
+                ) : (
+                  /* Detail mode: virtualized message list */
+                  <div
+                    style={{
+                      height: detailVirtualizer.getTotalSize(),
+                      width: '100%',
+                      position: 'relative',
+                    }}
+                  >
+                    {detailVirtualizer.getVirtualItems().map(virtualRow => {
+                      const item = detailItems[virtualRow.index];
+                      if (!item) return 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">
-                            <span className="text-purple-600">{toolMessage.tool_name}</span>
-                            {displayValue && <span className="text-zinc-500 truncate">{displayValue}</span>}
-                          </div>
+                        <div
+                          key={virtualRow.key}
+                          data-index={virtualRow.index}
+                          ref={detailVirtualizer.measureElement}
+                          style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            transform: `translateY(${virtualRow.start}px)`,
+                            paddingBottom: 16,
+                          }}
+                        >
+                          {item.kind === 'gate' ? (
+                            <GateCard
+                              message={item.msg}
+                              onAnswerQuestion={(optionId, optionLabel) => handleAnswerQuestion(item.msg, optionId, optionLabel)}
+                              answeredQuestionId={answeredQuestions.get(item.msg.timestamp) || null}
+                            />
+                          ) : item.kind === 'merged-tool' ? (
+                            <MergedToolBlock toolMessage={item.toolMsg} resultMessage={item.resultMsg} />
+                          ) : item.kind === 'elapsed' ? (
+                            <ElapsedTimer isStreaming={true} timerKey={item.timerKey} />
+                          ) : item.kind === 'tool-indicator' ? (
+                            (() => {
+                              const firstParamValue = item.toolMsg.tool_input ? Object.values(item.toolMsg.tool_input)[0] : null;
+                              const displayValue = typeof firstParamValue === 'string'
+                                ? (firstParamValue.length > 50 ? firstParamValue.slice(0, 50) + '...' : firstParamValue)
+                                : null;
+                              return (
+                                <div className="rounded-xl text-sm" style={{ backgroundColor: '#E8EEEF' }} data-testid="current-tool-call">
+                                  <div className="flex items-center gap-2.5 px-3.5 py-2.5">
+                                    <span className="w-3 h-3 rounded-full animate-spin flex-shrink-0" style={{ border: '2px solid #4A6365', borderTopColor: 'transparent' }} data-testid="tool-spinner" />
+                                    <span className="font-semibold text-sm" style={{ color: '#4A6365' }}>{item.toolMsg.tool_name}</span>
+                                    {displayValue && <span className="text-sm truncate" style={{ color: '#6B8E90' }}>({displayValue})</span>}
+                                  </div>
+                                </div>
+                              );
+                            })()
+                          ) : item.kind === 'message' && item.isIntermediate ? (
+                            <div
+                              className="cursor-pointer"
+                              onClick={() => {
+                                setExpandedIndices(prev => {
+                                  const next = new Set(prev);
+                                  if (next.has(item.idx)) next.delete(item.idx);
+                                  else next.add(item.idx);
+                                  return next;
+                                });
+                              }}
+                              data-testid="collapsible-message"
+                            >
+                              {expandedIndices.has(item.idx) ? (
+                                <MessageBlock message={item.msg} />
+                              ) : (
+                                <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-base text-zinc-500 truncate">{item.firstLine.trim() ? item.firstLine : '(empty response)'}</span>
+                                </div>
+                              )}
+                            </div>
+                          ) : item.kind === 'message' ? (
+                            <MessageBlock message={item.msg} />
+                          ) : null}
                         </div>
                       );
-                    })()}
-                  </>
+                    })}
+                  </div>
                 )}
-                {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-blue-50 border border-blue-100 rounded-lg p-3 opacity-60" data-testid="queued-message">
-                    <div className="flex items-center gap-1.5 mb-1">
+                  <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-xs text-zinc-400">Queued</span>
+                      <span className="text-base text-zinc-400">Queued</span>
                     </div>
-                    <div className="text-sm text-zinc-700 whitespace-pre-wrap">{queuedMessage.message}</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 && !isAskingQuestion && activeSessionId ? (
+              <ReviewFooter
+                workItemId={activeSessionId}
+                onAccepted={handleReviewAction}
+                onRejected={handleRejectAction}
+                onAskQuestion={handleAskQuestion}
+              />
+            ) : (
+              <ClaudePanelInput
+                onSendMessage={handleSendMessage}
+                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">
@@ -960,130 +1008,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 -translate-y-px" 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>
-  );
-}