@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/frontend/src/components/ChatView.tsx

@@ -0,0 +1,842 @@
+/**
+ * ChatView — main Chat v2 page component.
+ *
+ * Layout: session sidebar on the left, chat message area in the center,
+ * message input at the bottom. Integrates the existing ChatSessionSidebar,
+ * useChatStream hook, message queue, file attachments, permission dialog,
+ * and stop/cancel functionality.
+ *
+ * New sessions are auto-created when no session exists for the project.
+ */
+
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {UseChatStreamOptions, ImageBlock, FileBlock, ChatMessage} from '../hooks/use_chat_stream';
+import {useChatStream} from '../hooks/use_chat_stream';
+import type {ChatSession} from '../stores/useChatSessionStore';
+import {useChatSessionStore} from '../stores/useChatSessionStore';
+import {useProjectStore} from '../stores/useProjectStore';
+import {useAttachmentStore} from '../stores/useAttachmentStore';
+import {useMessageQueueStore} from '../stores/useMessageQueueStore';
+import {ChatSessionSidebar} from './ChatSessionSidebar';
+import {ChatMessageBubble} from './ChatMessageBubble';
+import {ChatMessageInput} from './ChatMessageInput';
+import {ChatStopButton} from './ChatStopButton';
+import {ChatDropZone} from './ChatDropZone';
+import {AttachmentPreviewList} from './AttachmentPreviewList';
+import {QueuedMessageBubble} from './QueuedMessageBubble';
+import {PermissionDialog} from './PermissionDialog';
+import type {PermissionMode} from './PermissionModeSelector';
+import {PermissionModeSelector} from './PermissionModeSelector';
+import {AttachmentManager} from '../lib/attachment_manager';
+import type {SkillInfo} from '../api/client';
+import {apiClient} from '../api/client';
+import {Check, ChevronDown, ChevronUp, Copy, Search, Settings2, X, Zap} from 'lucide-react';
+import {IconButton} from './ds/IconButton';
+import {formatTokenCount} from '../lib/context_usage_helpers';
+import {useFileTreeCache} from '../hooks/use_file_tree_cache';
+import {ChatTodoSidebar} from './ChatTodoSidebar';
+import {SystemPromptAccordion} from './SystemPromptAccordion';
+import {countMatches} from './HighlightedText';
+
+interface ChatViewProps {
+  visible: boolean;
+}
+
+export function ChatView({ visible }: ChatViewProps) {
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
+  const sessions = useChatSessionStore((s) => s.sessions);
+  const selectSession = useChatSessionStore((s) => s.selectSession);
+  const compactAndContinue = useChatSessionStore((s) => s.compactAndContinue);
+
+  const attachments = useAttachmentStore((s) => s.attachments);
+  const addUpload = useAttachmentStore((s) => s.addUpload);
+  const markUploaded = useAttachmentStore((s) => s.markUploaded);
+  const markUploadFailed = useAttachmentStore((s) => s.markUploadFailed);
+  const removeAttachment = useAttachmentStore((s) => s.remove);
+  const clearAttachments = useAttachmentStore((s) => s.clear);
+  const getReadyPaths = useAttachmentStore((s) => s.getReadyPaths);
+  const hasUploading = useAttachmentStore((s) => s.hasUploading);
+
+  const queue = useMessageQueueStore((s) => s.queue);
+  const enqueueMessage = useMessageQueueStore((s) => s.enqueue);
+  const removeFromQueue = useMessageQueueStore((s) => s.remove);
+  const drainAll = useMessageQueueStore((s) => s.drainAll);
+  const setQueueActiveSession = useMessageQueueStore((s) => s.setActiveSession);
+
+  const {
+    connect,
+    disconnect,
+    sendMessage,
+    sendMergedMessages,
+    stopStream,
+    setOnStreamEnd,
+    loadMessages,
+    attachSession,
+    messages,
+    streaming,
+    connected,
+    error,
+    cancelledUserMessage,
+    clearCancelledUserMessage,
+    clearMessages,
+    restoreMessages,
+    pendingPermission,
+    respondToPermission,
+    contextUsage,
+    initContextUsage,
+    systemPrompt,
+    initSystemPrompt,
+  } = useChatStream();
+
+  // File tree and skills for mention autocomplete
+  const filePaths = useFileTreeCache(selectedProjectId);
+  const [skills, setSkills] = useState<SkillInfo[]>([]);
+
+  useEffect(() => {
+    if (!selectedProjectId) return;
+    apiClient.fetchSkills(selectedProjectId)
+      .then(({ skills: s }) => setSkills(s))
+      .catch(() => {});
+  }, [selectedProjectId]);
+
+  const [inputValue, setInputValue] = useState('');
+  // Per-session caches for input and context usage
+  const inputCacheRef = useRef<Map<string, string>>(new Map());
+  const contextUsageCacheRef = useRef<Map<string, import('../hooks/use_chat_stream').ContextUsage>>(new Map());
+  const systemPromptCacheRef = useRef<Map<string, string>>(new Map());
+  // Per-session messages cache — preserves in-memory streaming messages across session switches
+  const messagesCacheRef = useRef<Map<string, ChatMessage[]>>(new Map());
+  // Track which session ID was last used for streaming so we update the right cache entry
+  const streamingSessionRef = useRef<string | null>(null);
+  const [permissionMode, setPermissionMode] = useState<PermissionMode>(() => {
+    const saved = localStorage.getItem('chat_permission_mode');
+    return saved === 'skip' || saved === 'allowed_tools' ? saved : 'skip';
+  });
+  const [allowedTools, setAllowedTools] = useState<string[]>(() => {
+    try {
+      const saved = localStorage.getItem('chat_allowed_tools');
+      return saved ? JSON.parse(saved) : [];
+    } catch { return []; }
+  });
+  useEffect(() => { localStorage.setItem('chat_permission_mode', permissionMode); }, [permissionMode]);
+  useEffect(() => { localStorage.setItem('chat_allowed_tools', JSON.stringify(allowedTools)); }, [allowedTools]);
+
+  const [showSettings, setShowSettings] = useState(false);
+  const [isNewSession, setIsNewSession] = useState(true);
+  const [compacting, setCompacting] = useState(false);
+  const [copiedSessionId, setCopiedSessionId] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeMatchIndex, setActiveMatchIndex] = useState(0);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const sessionRestoredRef = useRef(false);
+
+  // --- Search: compute total matches and per-message offsets ---
+  const { totalMatches, messageOffsets } = useMemo(() => {
+    if (!searchQuery) return { totalMatches: 0, messageOffsets: [] as number[] };
+    let total = 0;
+    const offsets: number[] = [];
+    for (const msg of messages) {
+      offsets.push(total);
+      for (const block of msg.content) {
+        if (block.type === 'text') {
+          total += countMatches(block.text, searchQuery);
+        }
+      }
+    }
+    return { totalMatches: total, messageOffsets: offsets };
+  }, [messages, searchQuery]);
+
+  // Reset active match when query changes
+  useEffect(() => {
+    setActiveMatchIndex(0);
+  }, [searchQuery]);
+
+  // Scroll the active match into view
+  useEffect(() => {
+    if (!searchQuery || totalMatches === 0) return;
+    const el = messagesContainerRef.current?.querySelector(
+      `[data-search-match="${activeMatchIndex}"]`,
+    );
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }, [activeMatchIndex, searchQuery, totalMatches]);
+
+  // Cmd+F / Ctrl+F to toggle search
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+        e.preventDefault();
+        setSearchOpen((prev) => {
+          if (!prev) {
+            setTimeout(() => searchInputRef.current?.focus(), 0);
+          } else {
+            setSearchQuery('');
+          }
+          return !prev;
+        });
+      }
+      if (e.key === 'Escape' && searchOpen) {
+        setSearchOpen(false);
+        setSearchQuery('');
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [searchOpen]);
+
+  const handleSearchNext = useCallback(() => {
+    if (totalMatches === 0) return;
+    setActiveMatchIndex((prev) => (prev + 1) % totalMatches);
+  }, [totalMatches]);
+
+  const handleSearchPrev = useCallback(() => {
+    if (totalMatches === 0) return;
+    setActiveMatchIndex((prev) => (prev - 1 + totalMatches) % totalMatches);
+  }, [totalMatches]);
+
+  const handleCloseSearch = useCallback(() => {
+    setSearchOpen(false);
+    setSearchQuery('');
+  }, []);
+
+  // Find active session
+  const activeSession = useMemo(
+    () => sessions.find((s) => s.id === activeSessionId) ?? null,
+    [sessions, activeSessionId],
+  );
+
+  // Whether the currently viewed session is the one that's streaming
+  const isActiveSessionStreaming = streaming && activeSession?.id === streamingSessionRef.current;
+
+  // Displayed context usage: use live data when viewing the streaming session, otherwise use per-session cache.
+  // IMPORTANT: never fall back to the hook's global contextUsage — it may hold data from a different session.
+  const displayedContextUsage = useMemo(() => {
+    if (activeSessionId && activeSessionId === streamingSessionRef.current) {
+      return contextUsage;
+    }
+    if (activeSessionId) {
+      return contextUsageCacheRef.current.get(activeSessionId) ?? null;
+    }
+    return null;
+  }, [contextUsage, activeSessionId]
+  );
+
+  // Displayed system prompt: prefer live WS data for the streaming session, fall back to per-session cache
+  const displayedSystemPrompt = useMemo(() => {
+    if (activeSessionId && activeSessionId === streamingSessionRef.current && systemPrompt) {
+      return systemPrompt;
+    }
+    if (activeSessionId) {
+      return systemPromptCacheRef.current.get(activeSessionId) ?? null;
+    }
+    return null;
+  }, [systemPrompt, activeSessionId]);
+
+  // Keep per-session system prompt cache in sync
+  const prevSystemPromptRef = useRef(systemPrompt);
+  useEffect(() => {
+    if (!systemPrompt || systemPrompt === prevSystemPromptRef.current) return;
+    prevSystemPromptRef.current = systemPrompt;
+
+    const streamingSid = streamingSessionRef.current;
+    if (streamingSid) {
+      systemPromptCacheRef.current.set(streamingSid, systemPrompt);
+    }
+  }, [systemPrompt]);
+
+  // Connect WebSocket when visible
+  useEffect(() => {
+    if (visible) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [visible, connect, disconnect]);
+
+  // Auto-restore persisted session on mount: load messages and attempt stream re-attachment
+  useEffect(() => {
+    if (sessionRestoredRef.current) return;
+    if (!activeSessionId || !sessions.length || !connected) return;
+
+    const session = sessions.find((s) => s.id === activeSessionId);
+    if (!session) {
+      // Persisted session no longer exists — clear it
+      selectSession(null);
+      sessionRestoredRef.current = true;
+      return;
+    }
+
+    sessionRestoredRef.current = true;
+    // Initialize per-session queue for the restored session
+    setQueueActiveSession(session.id);
+    // Restore system prompt from persisted session data
+    if (session.systemPrompt) {
+      initSystemPrompt(session.systemPrompt);
+      systemPromptCacheRef.current.set(session.id, session.systemPrompt);
+    }
+    // Restore context usage from persisted session data and populate per-session cache
+    if (session.contextUsageJson) {
+      try {
+        const parsed = JSON.parse(session.contextUsageJson);
+        initContextUsage(parsed);
+        contextUsageCacheRef.current.set(session.id, parsed);
+      } catch { /* ignore */ }
+    }
+    loadMessages(session.id).then((count) => {
+      // Only mark as existing session if it has messages — a brand new session
+      // with no messages must use --session-id (not --resume) on the first CLI spawn
+      setIsNewSession(count === 0);
+      attachSession(session.claudeSessionId);
+    });
+  }, [activeSessionId, sessions, connected, selectSession, loadMessages, attachSession, setQueueActiveSession]);
+
+  // Restore cancelled user message text into input
+  useEffect(() => {
+    if (cancelledUserMessage) {
+      setInputValue(cancelledUserMessage);
+      clearCancelledUserMessage();
+    }
+  }, [cancelledUserMessage, clearCancelledUserMessage]);
+
+  // Keep per-session context usage cache in sync with stream updates.
+  // If streaming session differs from viewed session, don't let it overwrite the displayed bar.
+  const prevContextUsageRef = useRef(contextUsage);
+  useEffect(() => {
+    if (!contextUsage || contextUsage === prevContextUsageRef.current) return;
+    prevContextUsageRef.current = contextUsage;
+
+    const streamingSid = streamingSessionRef.current;
+    if (streamingSid) {
+      contextUsageCacheRef.current.set(streamingSid, contextUsage);
+    }
+  }, [contextUsage]);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, queue]);
+
+  // Keep a ref to sessions so the onStreamEnd callback can look up session details
+  // without stale closure issues.
+  const sessionsRef = useRef(sessions);
+  sessionsRef.current = sessions;
+
+  // Register onStreamEnd callback for queue draining.
+  // Drains the *streaming* session's queue (not the active session's), so messages
+  // enqueued for a streaming session are sent to the correct claudeSessionId even
+  // if the user has switched to a different session.
+  useEffect(() => {
+    setOnStreamEnd(() => {
+      const streamingSid = streamingSessionRef.current;
+      if (!streamingSid || !selectedProjectId) return;
+
+      // Invalidate cached messages for the completed session so the next
+      // switch loads fresh persisted messages from the database.
+      messagesCacheRef.current.delete(streamingSid);
+
+      const drained = drainAll(streamingSid);
+      if (drained.length === 0) return;
+
+      const streamingSession = sessionsRef.current.find((s) => s.id === streamingSid);
+      if (!streamingSession) return;
+
+      const texts = drained.map((m) => m.text);
+      const opts: UseChatStreamOptions = {
+        projectId: selectedProjectId,
+        sessionId: streamingSession.id,
+        claudeSessionId: streamingSession.claudeSessionId,
+        isNewSession: false,
+        permissionMode,
+        allowedTools: permissionMode === 'allowed_tools' ? allowedTools : undefined,
+      };
+      sendMergedMessages(texts, opts);
+    });
+    return () => setOnStreamEnd(null);
+  }, [setOnStreamEnd, drainAll, selectedProjectId, permissionMode, allowedTools, sendMergedMessages]);
+
+  // Handle session selection — save current session state, restore new one
+  const handleSelectSession = useCallback(
+    (session: ChatSession) => {
+      // Save current session's input, messages, context usage, and system prompt
+      if (activeSessionId) {
+        inputCacheRef.current.set(activeSessionId, inputValue);
+        messagesCacheRef.current.set(activeSessionId, messages);
+        if (contextUsage) contextUsageCacheRef.current.set(activeSessionId, contextUsage);
+        if (systemPrompt) systemPromptCacheRef.current.set(activeSessionId, systemPrompt);
+      }
+
+      clearAttachments();
+
+      // Switch the queue store to the target session (shows that session's queued messages)
+      setQueueActiveSession(session.id);
+
+      // Restore input for the target session
+      setInputValue(inputCacheRef.current.get(session.id) ?? '');
+
+      // Restore system prompt: prefer in-memory cache, fall back to persisted DB value
+      const cachedPrompt = systemPromptCacheRef.current.get(session.id);
+      if (cachedPrompt) {
+        initSystemPrompt(cachedPrompt);
+      } else if (session.systemPrompt) {
+        initSystemPrompt(session.systemPrompt);
+        systemPromptCacheRef.current.set(session.id, session.systemPrompt);
+      } else {
+        initSystemPrompt(null);
+      }
+
+      // Restore context usage: prefer in-memory cache (live), fall back to persisted DB value
+      const cachedCtx = contextUsageCacheRef.current.get(session.id);
+      if (cachedCtx) {
+        initContextUsage(cachedCtx);
+      } else if (session.contextUsageJson) {
+        try {
+          const parsed = JSON.parse(session.contextUsageJson);
+          initContextUsage(parsed);
+          contextUsageCacheRef.current.set(session.id, parsed);
+        } catch { initContextUsage(null); }
+      } else {
+        initContextUsage(null);
+      }
+
+      // Restore messages: prefer in-memory cache (preserves streaming state), fall back to DB
+      const cachedMessages = messagesCacheRef.current.get(session.id);
+      if (cachedMessages) {
+        restoreMessages(cachedMessages);
+        setIsNewSession(cachedMessages.length === 0);
+        // If this session is currently streaming, re-attach to get catch-up content
+        if (session.id === streamingSessionRef.current) {
+          attachSession(session.claudeSessionId);
+        }
+      } else {
+        clearMessages();
+        loadMessages(session.id).then((count) => {
+          setIsNewSession(count === 0);
+          // If this session is currently streaming, re-attach to get catch-up content
+          if (session.id === streamingSessionRef.current) {
+            attachSession(session.claudeSessionId);
+          }
+        });
+      }
+    },
+    [activeSessionId, inputValue, messages, contextUsage, systemPrompt, clearMessages, restoreMessages, clearAttachments, loadMessages, attachSession, initContextUsage, initSystemPrompt, setQueueActiveSession],
+  );
+
+  // Handle selecting a newly created session
+  const handleNewSessionCreated = useCallback(
+    (session: ChatSession) => {
+      // Save current session's state before switching
+      if (activeSessionId) {
+        inputCacheRef.current.set(activeSessionId, inputValue);
+        messagesCacheRef.current.set(activeSessionId, messages);
+        if (contextUsage) contextUsageCacheRef.current.set(activeSessionId, contextUsage);
+        if (systemPrompt) systemPromptCacheRef.current.set(activeSessionId, systemPrompt);
+      }
+      clearMessages();
+      clearAttachments();
+      initSystemPrompt(null);
+      // Switch the queue store to the new session (starts with an empty queue)
+      setQueueActiveSession(session.id);
+      setIsNewSession(true);
+      setInputValue('');
+    },
+    [activeSessionId, inputValue, messages, contextUsage, systemPrompt, clearMessages, clearAttachments, initSystemPrompt, setQueueActiveSession],
+  );
+
+  // File handling for attachments
+  const handleFilesSelected = useCallback(
+    async (files: File[]) => {
+      if (!selectedProjectId) return;
+
+      for (const file of files) {
+        const isImage = AttachmentManager.isImage(file.type);
+        let preview: string | null = null;
+        if (isImage) {
+          preview = await readFileAsDataUrl(file);
+        }
+        const att = addUpload(file, preview);
+
+        // Upload the file
+        try {
+          const reader = new FileReader();
+          const base64 = await new Promise<string>((resolve, reject) => {
+            reader.onload = () => {
+              const result = reader.result as string;
+              resolve(result.split(',')[1]);
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+          });
+          const { path } = await apiClient.uploadChatFile(selectedProjectId, file.name, base64);
+          markUploaded(att.id, path);
+        } catch {
+          markUploadFailed(att.id);
+        }
+      }
+    },
+    [selectedProjectId, addUpload, markUploaded, markUploadFailed],
+  );
+
+  // Send message
+  const handleSend = useCallback(() => {
+    const trimmed = inputValue.trim();
+    if (!trimmed || !activeSession || !selectedProjectId) return;
+
+    // If this session is currently streaming, enqueue instead of sending directly.
+    // If a *different* session is streaming, send directly — this session is idle.
+    if (streaming && activeSession.id === streamingSessionRef.current) {
+      enqueueMessage(trimmed, activeSession.id);
+      setInputValue('');
+      return;
+    }
+
+    const readyPaths = getReadyPaths();
+
+    // Build attachment content blocks for inline rendering and DB persistence
+    const attachmentBlocks: (ImageBlock | FileBlock)[] = [];
+    for (const att of attachments) {
+      if (att.uploading || !att.path) continue;
+      if (AttachmentManager.isImage(att.mimeType)) {
+        attachmentBlocks.push({ type: 'image', path: att.path, name: att.name, mimeType: att.mimeType });
+      } else {
+        attachmentBlocks.push({ type: 'file', path: att.path, name: att.name, mimeType: att.mimeType });
+      }
+    }
+
+    const opts: UseChatStreamOptions = {
+      projectId: selectedProjectId,
+      sessionId: activeSession.id,
+      claudeSessionId: activeSession.claudeSessionId,
+      isNewSession,
+      permissionMode,
+      allowedTools: permissionMode === 'allowed_tools' ? allowedTools : undefined,
+      attachments: readyPaths.length > 0 ? readyPaths : undefined,
+      attachmentBlocks: attachmentBlocks.length > 0 ? attachmentBlocks : undefined,
+    };
+
+    streamingSessionRef.current = activeSession.id;
+    sendMessage(trimmed, opts);
+    setInputValue('');
+    clearAttachments();
+    setIsNewSession(false);
+  }, [
+    inputValue, activeSession, selectedProjectId, streaming,
+    isNewSession, permissionMode, allowedTools,
+    sendMessage, enqueueMessage, getReadyPaths, clearAttachments,
+  ]);
+
+  // Stop the streaming session's CLI process, targeting the correct claudeSessionId
+  const handleStop = useCallback(() => {
+    const streamingSid = streamingSessionRef.current;
+    const streamingSession = streamingSid ? sessions.find((s) => s.id === streamingSid) : null;
+    stopStream(streamingSession?.claudeSessionId);
+  }, [sessions, stopStream]);
+
+  // Permission response handler
+  const handlePermissionResponse = useCallback(
+    (requestId: string, decision: import('./PermissionDialog').PermissionDecision) => {
+      if (!selectedProjectId) return;
+      respondToPermission(requestId, selectedProjectId, decision);
+    },
+    [selectedProjectId, respondToPermission],
+  );
+
+  // Compact and continue: server compacts messages and creates new session with continuation context
+  const handleCompactAndContinue = useCallback(async () => {
+    if (!activeSession || !selectedProjectId || streaming || compacting) return;
+
+    setCompacting(true);
+    try {
+      await compactAndContinue(activeSession.id, selectedProjectId);
+
+      // Clear UI for the new session (store already selected it)
+      clearMessages();
+      clearAttachments();
+      initContextUsage(null);
+      initSystemPrompt(null);
+      setIsNewSession(true);
+    } catch {
+      // Errors will show in console; user can retry
+    } finally {
+      setCompacting(false);
+    }
+  }, [
+    activeSession, selectedProjectId, streaming, compacting,
+    compactAndContinue, clearMessages, clearAttachments, initContextUsage, initSystemPrompt,
+  ]);
+
+  return (
+    <div className="flex h-full overflow-hidden">
+      {/* Session sidebar */}
+      <ChatSessionSidebar
+        visible={visible}
+        onSelectSession={handleSelectSession}
+        onNewSessionCreated={handleNewSessionCreated}
+      />
+
+      {/* Chat area */}
+      <ChatDropZone onFilesDropped={handleFilesSelected} disabled={!activeSession}>
+        <div className="flex flex-col h-full">
+          {/* Header bar — fixed height to prevent layout shift when search toggles */}
+          <div className="flex items-center justify-between px-4 border-b border-edge shrink-0 h-11">
+            <div className="flex items-center gap-2 min-w-0">
+              <span className="text-[13px] font-mono text-content truncate">
+                {activeSession?.name ?? 'No session selected'}
+              </span>
+              {connected && (
+                <span className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" title="Connected" />
+              )}
+              {!connected && visible && (
+                <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" title="Disconnected" />
+              )}
+              {activeSession && (
+                <button
+                  type="button"
+                  className="flex items-center gap-1 text-[11px] font-mono text-content-muted hover:text-content transition-colors cursor-pointer bg-transparent border-none p-0 shrink-0"
+                  title="Copy session ID"
+                  onClick={() => {
+                    navigator.clipboard.writeText(activeSession.claudeSessionId);
+                    setCopiedSessionId(true);
+                    setTimeout(() => setCopiedSessionId(false), 1500);
+                  }}
+                >
+                  <span className="truncate max-w-45">{activeSession.claudeSessionId}</span>
+                  {copiedSessionId ? <Check size={12} /> : <Copy size={12} />}
+                </button>
+              )}
+            </div>
+
+            {/* Search bar — right side of header */}
+            <div className="flex items-center gap-1.5 shrink-0">
+              {searchOpen ? (
+                <div className="flex items-center gap-1.5 bg-surface-alt border border-edge rounded-lg px-2">
+                  <Search size={13} className="text-content-muted shrink-0" />
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.shiftKey ? handleSearchPrev() : handleSearchNext();
+                      }
+                      if (e.key === 'Escape') handleCloseSearch();
+                    }}
+                    placeholder="Search…"
+                    className="w-36 bg-transparent border-none outline-none text-[12px] font-mono text-content placeholder:text-content-muted"
+                    autoFocus
+                  />
+                  {searchQuery && (
+                    <span className="text-[10px] font-mono text-content-muted whitespace-nowrap">
+                      {totalMatches === 0
+                        ? '0/0'
+                        : `${activeMatchIndex + 1}/${totalMatches}`}
+                    </span>
+                  )}
+                  <IconButton label="Previous match" variant="ghost" size="sm" onClick={handleSearchPrev} disabled={totalMatches === 0}>
+                    <ChevronUp size={12} />
+                  </IconButton>
+                  <IconButton label="Next match" variant="ghost" size="sm" onClick={handleSearchNext} disabled={totalMatches === 0}>
+                    <ChevronDown size={12} />
+                  </IconButton>
+                  <IconButton label="Close search" variant="ghost" size="sm" onClick={handleCloseSearch}>
+                    <X size={12} />
+                  </IconButton>
+                </div>
+              ) : (
+                <IconButton
+                  label="Search messages"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setSearchOpen(true);
+                    setTimeout(() => searchInputRef.current?.focus(), 0);
+                  }}
+                >
+                  <Search size={14} strokeWidth={2} />
+                </IconButton>
+              )}
+            </div>
+          </div>
+
+          {/* Messages area + optional todo sidebar */}
+          <div className="flex-1 flex overflow-hidden min-h-0">
+            <div
+              ref={messagesContainerRef}
+              className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 min-w-0"
+            >
+              {!activeSession && (
+                <div className="flex items-center justify-center h-full">
+                  <p className="text-sm font-mono text-content-muted">
+                    Select or create a chat session to begin
+                  </p>
+                </div>
+              )}
+
+              {activeSession && messages.length === 0 && !isActiveSessionStreaming && (
+                <div className="flex items-center justify-center h-full">
+                  <p className="text-sm font-mono text-content-muted">
+                    Start a conversation with Claude
+                  </p>
+                </div>
+              )}
+
+              <div className="flex flex-col gap-4 min-w-0">
+                {displayedSystemPrompt && (
+                  <SystemPromptAccordion prompt={displayedSystemPrompt} />
+                )}
+
+                {messages.map((msg, idx) => (
+                  <ChatMessageBubble
+                    key={msg.id}
+                    message={msg}
+                    searchQuery={searchQuery}
+                    activeMatchIndex={activeMatchIndex}
+                    matchIndexOffset={messageOffsets[idx] ?? 0}
+                  />
+                ))}
+
+                {/* Queued messages */}
+                {queue.map((qm) => (
+                  <QueuedMessageBubble
+                    key={qm.id}
+                    id={qm.id}
+                    text={qm.text}
+                    onRemove={removeFromQueue}
+                  />
+                ))}
+
+                <div ref={messagesEndRef} />
+              </div>
+            </div>
+
+            {/* Todo sidebar — shown when tasks exist */}
+            <ChatTodoSidebar messages={messages} />
+          </div>
+
+          {/* Error banner */}
+          {error && (
+            <div className="px-4 py-2 bg-error/10 border-t border-error/30 text-error text-[12px] font-mono shrink-0">
+              {error}
+            </div>
+          )}
+
+          {/* Attachment previews */}
+          {attachments.length > 0 && (
+            <div className="border-t border-edge shrink-0 pt-2">
+              <AttachmentPreviewList attachments={attachments} onRemove={removeAttachment} />
+            </div>
+          )}
+
+          {/* Settings panel (collapsible) */}
+          {showSettings && (
+            <div className="border-t border-edge px-4 py-3 bg-surface-alt shrink-0">
+              <PermissionModeSelector
+                mode={permissionMode}
+                allowedTools={allowedTools}
+                onModeChange={setPermissionMode}
+                onAllowedToolsChange={setAllowedTools}
+              />
+            </div>
+          )}
+
+          {/* Action buttons + context usage bar */}
+          <div className="px-4 py-2 shrink-0 flex items-center gap-2">
+            <ChatStopButton streaming={isActiveSessionStreaming} onStop={handleStop} />
+            {activeSession && !isActiveSessionStreaming && (
+              <button
+                type="button"
+                className="flex items-center gap-1.5 h-7 px-2.5 rounded text-[11px] font-mono text-content-secondary bg-transparent border border-edge hover:bg-surface-raised hover:text-content transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                onClick={handleCompactAndContinue}
+                disabled={compacting || messages.length === 0}
+              >
+                <Zap size={12} strokeWidth={2} className={compacting ? 'animate-pulse' : ''} />
+                Compact
+              </button>
+            )}
+            <IconButton
+              label="Chat settings"
+              variant={showSettings ? 'accent' : 'ghost'}
+              size="sm"
+              onClick={() => setShowSettings((prev) => !prev)}
+            >
+              <Settings2 size={14} strokeWidth={2} />
+            </IconButton>
+            {displayedContextUsage && (() => {
+              const ctxWindow = displayedContextUsage.contextWindow ?? 200_000;
+              const AUTOCOMPACT_BUFFER = 33_000;
+              const usableWindow = ctxWindow - AUTOCOMPACT_BUFFER;
+              const bufferPct = (AUTOCOMPACT_BUFFER / ctxWindow) * 100;
+              const usagePct = Math.min(Math.round((displayedContextUsage.totalTokens / ctxWindow) * 100), 100);
+              return (
+                <div className="flex-1 flex items-center gap-2">
+                  <div className="flex-1 h-1.5 bg-edge rounded-full overflow-hidden relative">
+                    <div
+                      className="absolute left-0 top-0 h-full bg-accent rounded-l-full transition-all duration-300"
+                      style={{ width: `${usagePct}%` }}
+                    />
+                    <div
+                      className="absolute right-0 top-0 h-full bg-error rounded-r-full"
+                      style={{ width: `${bufferPct}%` }}
+                    />
+                  </div>
+                  <span className="text-[11px] font-mono text-content-muted whitespace-nowrap">
+                    {formatTokenCount(displayedContextUsage.totalTokens)}/{formatTokenCount(usableWindow)}
+                  </span>
+                </div>
+              );
+            })()}
+          </div>
+
+          {/* Input area */}
+          <div className="px-4 py-3 border-t border-edge shrink-0">
+            <ChatMessageInput
+              value={inputValue}
+              onChange={setInputValue}
+              onSend={handleSend}
+              onFilesSelected={handleFilesSelected}
+              disabled={!activeSession || hasUploading() || !connected}
+              placeholder={
+                !connected
+                  ? 'Disconnected \u2014 reconnecting\u2026'
+                  : isActiveSessionStreaming
+                    ? 'Type to queue a message\u2026'
+                    : 'Type a message\u2026'
+              }
+              filePaths={filePaths}
+              skills={skills}
+            />
+          </div>
+        </div>
+      </ChatDropZone>
+
+      {/* Permission dialog overlay */}
+      <PermissionDialog
+        request={
+          pendingPermission
+            ? {
+                requestId: pendingPermission.requestId,
+                toolName: pendingPermission.toolName,
+                input: pendingPermission.input,
+              }
+            : null
+        }
+        onRespond={handlePermissionResponse}
+      />
+    </div>
+  );
+}
+
+/**
+ * Read a file as a data URL for image preview.
+ */
+const readFileAsDataUrl = (file: File): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });