jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/ClaudePanel.tsx

@@ -1,7 +1,8 @@
-'use client';
 
-import { useEffect, useRef, useState, useCallback, DragEvent } from 'react';
+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';
@@ -12,9 +13,29 @@ 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 { 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;
@@ -37,6 +58,8 @@ export function ClaudePanel({
     canRetry,
     queuedMessage,
     narratedMode: narratedModeRaw,
+    fullReadoutMode,
+    rawEvents,
     isTabSwitching,
   } = useSessionState();
   const {
@@ -48,6 +71,7 @@ export function ClaudePanel({
     retry: onRetry,
     stop: onStop,
     toggleNarratedMode: onToggleNarratedMode,
+    toggleFullReadout: onToggleFullReadout,
   } = useSessionActions();
 
   const workItemId = activeSessionId || 'sessions';
@@ -62,11 +86,34 @@ export function ClaudePanel({
   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>();
+  const emptyStateTimerRef = useRef<NodeJS.Timeout>(undefined);
   useEffect(() => {
     if (messages.length === 0 && status === 'idle' && !isTabSwitching) {
       emptyStateTimerRef.current = setTimeout(() => setShowEmptyState(true), 300);
@@ -76,6 +123,17 @@ export function ClaudePanel({
     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());
 
@@ -99,65 +157,229 @@ export function ClaudePanel({
     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]);
 
-  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
+  // 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 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<{ paths: string[]; position: { x: number; y: number } }>('tauri://drag-enter', () => {
+        if (isOpenRef.current) setIsDragging(true);
+      })
+    );
+
+    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[]) => {
@@ -170,31 +392,55 @@ export function ClaudePanel({
 
   // 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;
     }
 
-    fetch(`/api/work/${workId}`, { cache: 'no-store' })
-      .then(r => r.ok ? r.json() : null)
+    dataBridge.getWorkItem(workId)
       .then(data => {
-        if (data) setIsReadyForReview(!!data.ready_for_review);
-        else setIsReadyForReview(false);
+        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(() => setIsReadyForReview(false));
+      .catch(() => {
+        if (reviewDelayRef.current) { clearTimeout(reviewDelayRef.current); reviewDelayRef.current = null; }
+        setIsReadyForReview(false);
+      });
   }, [activeSessionId, isStandalone]);
 
-  // Fetch on mount / session switch
+  // 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
@@ -224,15 +470,75 @@ export function ClaudePanel({
     if (streamManager) {
       streamManager.injectGate('rejection', { reason });
     }
-  }, [activeSessionId]);
 
-  // Auto-scroll to bottom when new messages arrive
+    // 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 && (
@@ -243,22 +549,7 @@ export function ClaudePanel({
           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}
         >
-          {/* 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
@@ -282,7 +573,7 @@ export function ClaudePanel({
               </div>
               <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"
+                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)' }}
               >
                 Upgrade
@@ -303,9 +594,13 @@ export function ClaudePanel({
                     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}`}
@@ -316,12 +611,6 @@ export function ClaudePanel({
                     title={session.title}
                   >
                     <span className="truncate">#{id} {session.title}</span>
-                    {(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-[#819D9F] animate-pulse flex-shrink-0" />
-                    )}
                   </span>
                   <button
                     onClick={(e) => {
@@ -344,9 +633,13 @@ export function ClaudePanel({
                     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}`}
@@ -357,12 +650,6 @@ export function ClaudePanel({
                     title={session.title}
                   >
                     <span className="truncate">{session.title}</span>
-                    {(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-[#819D9F] animate-pulse flex-shrink-0" />
-                    )}
                   </span>
                   <button
                     onClick={(e) => {
@@ -444,23 +731,23 @@ export function ClaudePanel({
             </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>
+          {/* 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}
+            onScroll={handleContentScroll}
             className="flex-1 overflow-y-auto overscroll-contain p-5 space-y-4"
             data-testid="panel-content"
           >
@@ -484,45 +771,21 @@ export function ClaudePanel({
                 {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}
-                              onStartWorkItem={handleStartWorkItem}
-                            />
-                          ) : (
-                            <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-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" />
@@ -544,150 +807,144 @@ 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.5">
-                              <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-base text-zinc-400 hover:text-zinc-600 transition-colors duration-200 ease-out"
-                                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-4 my-4" data-testid="final-response-divider">
-                                    <div className="flex-1 h-px bg-zinc-200" />
-                                    <span className="text-base 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">
-                                        <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} />
-                                        </m.div>
-                                      </AnimatePresence>
-                                    ) : (
-                                      <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">{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-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>
+                        <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>
                 )}
                 {showEmptyState && (
                   <div className="text-zinc-500 text-base text-center py-8">
@@ -710,15 +967,16 @@ export function ClaudePanel({
 
           {/* Footer: ReviewFooter when ready for review, otherwise normal input */}
           {(status === 'streaming' || status === 'creating' || status === 'done' || status === 'idle') && ((sessions && sessions.size > 0) || standaloneSessions.length > 0) && (
-            isReadyForReview && activeSessionId ? (
+            isReadyForReview && !isAskingQuestion && activeSessionId ? (
               <ReviewFooter
                 workItemId={activeSessionId}
                 onAccepted={handleReviewAction}
                 onRejected={handleRejectAction}
+                onAskQuestion={handleAskQuestion}
               />
             ) : (
               <ClaudePanelInput
-                onSendMessage={onSendMessage}
+                onSendMessage={handleSendMessage}
                 onStop={onStop}
                 isStreaming={status === 'streaming' || status === 'creating'}
                 disabled={limitReached}