@aion0/forge 0.10.77 → 0.10.79

package/components/CodeViewer.tsx

@@ -1,16 +1,20 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef, lazy, Suspense } from 'react';
 import type { WebTerminalHandle, WebTerminalProps } from './WebTerminal';
 import { useSidebarResize } from '@/hooks/useSidebarResize';
+import { updateTreeChildren } from '@/lib/fileTree';
 
 const WebTerminal = lazy(() => import('./WebTerminal'));
 
+const MAX_SEARCH_RESULTS = 200;
+
 interface FileNode {
   name: string;
   path: string;
   type: 'file' | 'dir';
   children?: FileNode[];
+  hasChildren?: boolean;
 }
 
 // ─── File Tree ───────────────────────────────────────────
@@ -18,38 +22,47 @@ interface FileNode {
 type GitStatusMap = Map<string, string>; // path → status
 type GitRepoMap = Map<string, { branch: string; remote: string }>; // dir name → repo info
 
-function TreeNode({ node, depth, selected, onSelect, gitMap, repoMap }: {
+function TreeNode({ node, depth, selected, onSelect, onLoadChildren, gitMap, repoMap }: {
   node: FileNode;
   depth: number;
   selected: string | null;
   onSelect: (path: string) => void;
+  onLoadChildren: (path: string) => Promise<void>;
   gitMap: GitStatusMap;
   repoMap: GitRepoMap;
 }) {
   // Auto-expand if selected file is under this directory
   const containsSelected = selected ? selected.startsWith(node.path + '/') : false;
   const [manualExpanded, setManualExpanded] = useState<boolean | null>(null);
-  const expanded = manualExpanded ?? (depth < 1 || containsSelected);
+  const expanded = manualExpanded ?? containsSelected;
 
   if (node.type === 'dir') {
-    const dirHasChanges = node.children?.some(c => hasGitChanges(c, gitMap));
+    const dirHasChanges = hasGitChanges(node, gitMap);
     const repo = repoMap.get(node.name);
+    const hasChildren = node.hasChildren || (node.children?.length ?? 0) > 0;
+    const toggleExpanded = async () => {
+      const nextExpanded = !expanded;
+      setManualExpanded(nextExpanded);
+      if (nextExpanded && hasChildren && !node.children) {
+        await onLoadChildren(node.path);
+      }
+    };
     return (
       <div>
         <button
-          onClick={() => setManualExpanded(v => v === null ? !expanded : !v)}
+          onClick={toggleExpanded}
           className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs group"
           style={{ paddingLeft: depth * 12 + 4 }}
           title={repo ? `${repo.branch} · ${repo.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}` : undefined}
         >
-          <span className="text-[10px] text-[var(--text-secondary)] w-3">{expanded ? '▾' : '▸'}</span>
+          <span className="text-[10px] text-[var(--text-secondary)] w-3">{hasChildren ? (expanded ? '▾' : '▸') : ''}</span>
           <span className={dirHasChanges ? 'text-yellow-400' : 'text-[var(--text-primary)]'}>{node.name}</span>
           {repo && (
             <span className="text-[8px] text-[var(--accent)] opacity-60 group-hover:opacity-100 ml-auto shrink-0">{repo.branch}</span>
           )}
         </button>
         {expanded && node.children?.map(child => (
-          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} gitMap={gitMap} repoMap={repoMap} />
+          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} onLoadChildren={onLoadChildren} gitMap={gitMap} repoMap={repoMap} />
         ))}
       </div>
     );
@@ -81,14 +94,31 @@ function TreeNode({ node, depth, selected, onSelect, gitMap, repoMap }: {
 
 function hasGitChanges(node: FileNode, gitMap: GitStatusMap): boolean {
   if (node.type === 'file') return gitMap.has(node.path);
-  return node.children?.some(c => hasGitChanges(c, gitMap)) || false;
+  // A change under this directory has a path of `${node.path}/...`, so a prefix
+  // scan over the change set covers descendants without recursing the tree
+  // (whose children are loaded lazily and may not be present anyway).
+  for (const changedPath of gitMap.keys()) {
+    if (changedPath === node.path || changedPath.startsWith(node.path + '/')) return true;
+  }
+  return false;
+}
+
+// The server reports whether the search index dropped entries (global cap or
+// per-directory cap), so search results may be incomplete. Fall back to the
+// length heuristic for older servers that omit the flag.
+function deriveIndexInfo(data: any): { truncated: boolean; limit: number } {
+  const fi = data?.fileIndex;
+  const limit = data?.fileIndexLimit || 0;
+  const truncated = typeof data?.indexTruncated === 'boolean'
+    ? data.indexTruncated
+    : (Array.isArray(fi) && limit > 0 && fi.length >= limit);
+  return { truncated, limit };
 }
 
-function flattenTree(nodes: FileNode[]): FileNode[] {
-  const result: FileNode[] = [];
+function flattenTree(nodes: FileNode[], result: FileNode[] = []): FileNode[] {
   for (const node of nodes) {
     if (node.type === 'file') result.push(node);
-    if (node.children) result.push(...flattenTree(node.children));
+    if (node.children) flattenTree(node.children, result);
   }
   return result;
 }
@@ -175,6 +205,10 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   const [currentDir, setCurrentDir] = useState<string | null>(null);
   const [dirName, setDirName] = useState('');
   const [tree, setTree] = useState<FileNode[]>([]);
+  const [fileIndex, setFileIndex] = useState<FileNode[]>([]);
+  // Truncation surfaced from /api/code (root-level tree cap and search-index cap).
+  const [treeInfo, setTreeInfo] = useState<{ truncated: boolean; limit: number }>({ truncated: false, limit: 0 });
+  const [indexInfo, setIndexInfo] = useState<{ truncated: boolean; limit: number }>({ truncated: false, limit: 0 });
   const [gitBranch, setGitBranch] = useState('');
   const [gitChanges, setGitChanges] = useState<{ path: string; status: string }[]>([]);
   const [gitRepos, setGitRepos] = useState<{ name: string; branch: string; remote: string; changes: { path: string; status: string }[] }[]>([]);
@@ -237,21 +271,36 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
         .then(r => r.json())
         .then(data => {
           setTree(data.tree || []);
+          setFileIndex(data.fileIndex || data.tree || []);
+          setTreeInfo({ truncated: !!data.truncated, limit: data.limit || 0 });
+          setIndexInfo(deriveIndexInfo(data));
           setDirName(data.dirName || currentDir.split('/').pop() || '');
           setGitBranch(data.gitBranch || '');
           setGitChanges(data.gitChanges || []);
           setGitRepos(data.gitRepos || []);
         })
-        .catch(() => setTree([]));
+        .catch(() => {
+          setTree([]);
+          setFileIndex([]);
+        });
     };
     fetchDir();
   }, [currentDir]);
 
+  const loadChildren = useCallback(async (path: string) => {
+    if (!currentDir) return;
+    try {
+      const res = await fetch(`/api/code?dir=${encodeURIComponent(currentDir)}&treePath=${encodeURIComponent(path)}`);
+      const data = await res.json();
+      setTree(prev => updateTreeChildren(prev, path, data.tree || []));
+    } catch {}
+  }, [currentDir]);
+
   // Task completion is notified via hook stop — no polling needed
 
   // Build git status map for tree coloring
-  const gitMap: GitStatusMap = new Map(gitChanges.map(g => [g.path, g.status]));
-  const repoMap: GitRepoMap = new Map(gitRepos.filter(r => r.name !== '.').map(r => [r.name, { branch: r.branch, remote: r.remote }]));
+  const gitMap: GitStatusMap = useMemo(() => new Map(gitChanges.map(g => [g.path, g.status])), [gitChanges]);
+  const repoMap: GitRepoMap = useMemo(() => new Map(gitRepos.filter(r => r.name !== '.').map(r => [r.name, { branch: r.branch, remote: r.remote }])), [gitRepos]);
 
   const openFile = useCallback(async (path: string, forceLoad?: boolean) => {
     if (!currentDir) return;
@@ -292,16 +341,27 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
     setLoading(false);
   }, [currentDir]);
 
-  // Open file and auto-expand its parent dirs in tree
-  const locateFile = useCallback((path: string) => {
+  // Open a file and reveal it in the tree. The server expands the ancestor
+  // chain in one request (bounded), so we never load the whole tree client-side.
+  const locateFile = useCallback(async (path: string) => {
     setSearch(''); // clear search so tree is visible
+    if (currentDir) {
+      try {
+        const res = await fetch(`/api/code?dir=${encodeURIComponent(currentDir)}&expandTo=${encodeURIComponent(path)}`);
+        const data = await res.json();
+        if (Array.isArray(data.tree)) setTree(data.tree);
+      } catch {}
+    }
     openFile(path);
-  }, [openFile]);
+  }, [currentDir, openFile]);
 
-  const allFiles = flattenTree(tree);
-  const filtered = search
-    ? allFiles.filter(f => f.name.toLowerCase().includes(search.toLowerCase()) || f.path.toLowerCase().includes(search.toLowerCase()))
-    : null;
+  const allFiles = useMemo(() => fileIndex.length > 0 ? fileIndex : flattenTree(tree), [fileIndex, tree]);
+  const searchLower = search.toLowerCase();
+  const filtered = useMemo(() => searchLower
+    ? allFiles.filter(f => f.name.toLowerCase().includes(searchLower) || f.path.toLowerCase().includes(searchLower))
+    : null, [allFiles, searchLower]);
+  const visibleFiltered = filtered?.slice(0, MAX_SEARCH_RESULTS) ?? null;
+  const hiddenFilteredCount = filtered ? Math.max(0, filtered.length - MAX_SEARCH_RESULTS) : 0;
 
   const onDragStart = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -344,6 +404,8 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
         setGitChanges(d.gitChanges || []);
         setGitRepos(d.gitRepos || []);
         setGitBranch(d.gitBranch || '');
+        setFileIndex(d.fileIndex || []);
+        setIndexInfo(deriveIndexInfo(d));
         if (action === 'commit') setCommitMsg('');
       }
     } catch (e: any) {
@@ -360,6 +422,9 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
       .then(r => r.json())
       .then(data => {
         setTree(data.tree || []);
+        setFileIndex(data.fileIndex || data.tree || []);
+        setTreeInfo({ truncated: !!data.truncated, limit: data.limit || 0 });
+        setIndexInfo(deriveIndexInfo(data));
         setDirName(data.dirName || currentDir.split('/').pop() || '');
         setGitBranch(data.gitBranch || '');
         setGitChanges(data.gitChanges || []);
@@ -520,27 +585,48 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
               {!currentDir ? (
                 <div className="text-xs text-[var(--text-secondary)] p-2">Open a terminal to see files</div>
               ) : filtered ? (
-                filtered.length === 0 ? (
-                  <div className="text-xs text-[var(--text-secondary)] p-2">No matches</div>
-                ) : (
-                  filtered.map(f => (
-                    <button
-                      key={f.path}
-                      onClick={() => { openFile(f.path); setSearch(''); }}
-                      className={`w-full text-left px-2 py-1 rounded text-xs truncate ${
-                        selectedFile === f.path ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
-                      }`}
-                      title={f.path}
-                    >
-                      <span className="text-[var(--text-primary)]">{f.name}</span>
-                      <span className="text-[9px] text-[var(--text-secondary)] ml-1">{f.path.split('/').slice(0, -1).join('/')}</span>
-                    </button>
-                  ))
-                )
+                <>
+                  {filtered.length === 0 ? (
+                    <div className="text-xs text-[var(--text-secondary)] p-2">No matches</div>
+                  ) : (
+                    <>
+                      {visibleFiltered!.map(f => (
+                        <button
+                          key={f.path}
+                          onClick={() => { openFile(f.path); setSearch(''); }}
+                          className={`w-full text-left px-2 py-1 rounded text-xs truncate ${
+                            selectedFile === f.path ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+                          }`}
+                          title={f.path}
+                        >
+                          <span className="text-[var(--text-primary)]">{f.name}</span>
+                          <span className="text-[9px] text-[var(--text-secondary)] ml-1">{f.path.split('/').slice(0, -1).join('/')}</span>
+                        </button>
+                      ))}
+                      {hiddenFilteredCount > 0 && (
+                        <div className="text-[10px] text-[var(--text-secondary)] p-2">
+                          Showing first {MAX_SEARCH_RESULTS} of {filtered.length} matches
+                        </div>
+                      )}
+                    </>
+                  )}
+                  {indexInfo.truncated && (
+                    <div className="text-[10px] text-[var(--text-secondary)] p-2">
+                      Search index is partial (large directories are sampled) — some files may not appear.
+                    </div>
+                  )}
+                </>
               ) : (
-                tree.map(node => (
-                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} gitMap={gitMap} repoMap={repoMap} />
-                ))
+                <>
+                  {tree.map(node => (
+                    <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} onLoadChildren={loadChildren} gitMap={gitMap} repoMap={repoMap} />
+                  ))}
+                  {treeInfo.truncated && (
+                    <div className="text-[10px] text-[var(--text-secondary)] p-2">
+                      Showing first {treeInfo.limit.toLocaleString()} entries in this folder.
+                    </div>
+                  )}
+                </>
               )}
             </div>
 

package/components/DocsViewer.tsx

@@ -1,12 +1,14 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef, lazy, Suspense } from 'react';
 import { useSidebarResize } from '@/hooks/useSidebarResize';
 import MarkdownContent from './MarkdownContent';
 import TabBar from './TabBar';
 
 const DocTerminal = lazy(() => import('./DocTerminal'));
 
+const MAX_SEARCH_RESULTS = 200;
+
 interface DocTab {
   id: number;
   filePath: string;
@@ -78,11 +80,10 @@ function TreeNode({ node, depth, selected, onSelect, collapseVersion = 0 }: {
 
 // ─── Search ──────────────────────────────────────────────
 
-function flattenTree(nodes: FileNode[]): FileNode[] {
-  const result: FileNode[] = [];
+function flattenTree(nodes: FileNode[], result: FileNode[] = []): FileNode[] {
   for (const node of nodes) {
     if (node.type === 'file') result.push(node);
-    if (node.children) result.push(...flattenTree(node.children));
+    if (node.children) flattenTree(node.children, result);
   }
   return result;
 }
@@ -319,10 +320,14 @@ export default function DocsViewer() {
   }, [activeRoot]);
 
   // Search filter
-  const allFiles = flattenTree(tree);
-  const filtered = search
-    ? allFiles.filter(f => f.name.toLowerCase().includes(search.toLowerCase()) || f.path.toLowerCase().includes(search.toLowerCase()))
-    : null;
+  const visibleTree = useMemo(() => hideUnsupported ? filterTree(tree) : tree, [hideUnsupported, tree]);
+  const allFiles = useMemo(() => flattenTree(visibleTree), [visibleTree]);
+  const searchLower = search.toLowerCase();
+  const filtered = useMemo(() => searchLower
+    ? allFiles.filter(f => f.name.toLowerCase().includes(searchLower) || f.path.toLowerCase().includes(searchLower))
+    : null, [allFiles, searchLower]);
+  const visibleFiltered = filtered?.slice(0, MAX_SEARCH_RESULTS) ?? null;
+  const hiddenFilteredCount = filtered ? Math.max(0, filtered.length - MAX_SEARCH_RESULTS) : 0;
 
   // Drag to resize terminal
   const onDragStart = (e: React.MouseEvent) => {
@@ -414,22 +419,29 @@ export default function DocsViewer() {
                 filtered.length === 0 ? (
                   <div className="text-xs text-[var(--text-secondary)] p-2">No matches</div>
                 ) : (
-                  filtered.map(f => (
-                    <button
-                      key={f.path}
-                      onClick={() => { openFileInTab(f.path); setSearch(''); }}
-                      className={`w-full text-left px-2 py-1 rounded text-xs truncate ${
-                        selectedFile === f.path ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
-                      }`}
-                      title={f.path}
-                    >
-                      <span className="text-[var(--text-primary)]">{f.name.replace(/\.md$/, '')}</span>
-                      <span className="text-[9px] text-[var(--text-secondary)] ml-1">{f.path.split('/').slice(0, -1).join('/')}</span>
-                    </button>
-                  ))
+                  <>
+                    {visibleFiltered!.map(f => (
+                      <button
+                        key={f.path}
+                        onClick={() => { openFileInTab(f.path); setSearch(''); }}
+                        className={`w-full text-left px-2 py-1 rounded text-xs truncate ${
+                          selectedFile === f.path ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+                        }`}
+                        title={f.path}
+                      >
+                        <span className="text-[var(--text-primary)]">{f.name.replace(/\.md$/, '')}</span>
+                        <span className="text-[9px] text-[var(--text-secondary)] ml-1">{f.path.split('/').slice(0, -1).join('/')}</span>
+                      </button>
+                    ))}
+                    {hiddenFilteredCount > 0 && (
+                      <div className="text-[10px] text-[var(--text-secondary)] p-2">
+                        Showing first {MAX_SEARCH_RESULTS} of {filtered.length} matches
+                      </div>
+                    )}
+                  </>
                 )
               ) : (
-                (hideUnsupported ? filterTree(tree) : tree).map(node => (
+                visibleTree.map(node => (
                   <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFileInTab} collapseVersion={treeCollapseVersion} />
                 ))
               )}

package/components/HelpTerminal.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import '@xterm/xterm/css/xterm.css';
+import { tmuxEnvPrefix } from '@/lib/session-utils';
 
 const SESSION_NAME = 'mw-forge-help';
 
@@ -31,6 +32,7 @@ export default function HelpTerminal() {
     // `help` scene (binary path + --model models.help + env exports). Falls back
     // to bare `claude` if resolution fails.
     let launchCmd = 'claude';
+    let helpEnv: Record<string, string> = {};
 
     const cs = getComputedStyle(document.documentElement);
     const tv = (name: string) => cs.getPropertyValue(name).trim();
@@ -77,6 +79,9 @@ export default function HelpTerminal() {
             setConnected(true);
             if (isNewSession) {
               isNewSession = false;
+              if (Object.keys(helpEnv).length && socket.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({ type: 'setenv', sessionName: SESSION_NAME, env: helpEnv }));
+              }
               setTimeout(() => {
                 if (socket.readyState === WebSocket.OPEN) {
                   socket.send(JSON.stringify({ type: 'input', data: `cd "${dataDir}" 2>/dev/null && ${launchCmd}\n` }));
@@ -110,11 +115,10 @@ export default function HelpTerminal() {
           const info = await fetch(`/api/agents?resolve=${encodeURIComponent(defaultId)}&scene=help`).then(r => r.json());
           const bin = info?.cliCmd || 'claude';
           const modelFlag = info?.model ? ` --model ${info.model}` : '';
-          const envPrefix = info?.env
-            ? Object.entries(info.env as Record<string, string>)
-                .map(([k, v]) => `export ${k}=${JSON.stringify(v)}`)
-                .join(' && ') + ' && '
-            : '';
+          // Secret env injected via `tmux set-environment` on connect — the
+          // prefix only names the vars, so API keys never echo into the pane.
+          helpEnv = (info?.env as Record<string, string>) || {};
+          const envPrefix = tmuxEnvPrefix(Object.keys(helpEnv));
           launchCmd = `${envPrefix}${bin}${modelFlag}`;
         } catch {
           // Fallback to bare path from the agent list if resolve fails.

package/components/MobileChat.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+/**
+ * Mobile chat view — talks to chat-standalone via /api/chat-proxy, the same
+ * backend as the web /chat and the Telegram chat bridge. Self-contained:
+ * session picker (+ new), message history, streaming SSE. Rendered by
+ * MobileView when viewMode === 'chat' (the default).
+ */
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+const PROXY = '/api/chat-proxy';
+
+interface ChatSession { id: string; title?: string; updated_at?: string }
+interface Block { type: string; text?: string; name?: string }
+interface ChatMsg { id?: string; role: string; blocks?: Block[]; content?: string; error?: string }
+
+function msgText(m: ChatMsg): string {
+  if (typeof m.content === 'string' && m.content) return m.content;
+  if (Array.isArray(m.blocks)) {
+    return m.blocks
+      .map((b) => (b.type === 'text' ? (b.text || '') : b.type === 'tool_use' ? `⚙ ${b.name || 'tool'}` : ''))
+      .filter(Boolean)
+      .join('\n');
+  }
+  return '';
+}
+
+export default function MobileChat() {
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [activeId, setActiveId] = useState<string>('');
+  const [messages, setMessages] = useState<ChatMsg[]>([]);
+  const [input, setInput] = useState('');
+  const [streaming, setStreaming] = useState(false);
+  const [partial, setPartial] = useState('');
+  const [showPicker, setShowPicker] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const srcRef = useRef<EventSource | null>(null);
+
+  const refreshSessions = useCallback(async () => {
+    try {
+      const r = await fetch(`${PROXY}/sessions?limit=50`);
+      const j = await r.json();
+      setSessions(Array.isArray(j?.sessions) ? j.sessions : []);
+    } catch { /* keep */ }
+  }, []);
+
+  const loadMessages = useCallback(async (id: string) => {
+    try {
+      const r = await fetch(`${PROXY}/sessions/${encodeURIComponent(id)}?limit=500`);
+      const j = await r.json();
+      setMessages(Array.isArray(j?.messages) ? j.messages : []);
+    } catch { /* keep */ }
+  }, []);
+
+  // First load: pick the main session (or the most recent / a fresh one).
+  useEffect(() => {
+    (async () => {
+      await refreshSessions();
+      try {
+        const r = await fetch(`${PROXY}/sessions/main`);
+        if (r.ok) {
+          const j = await r.json();
+          const id = j?.session?.id || j?.id;
+          if (id) { setActiveId(id); return; }
+        }
+      } catch { /* fall through */ }
+      try {
+        const r = await fetch(`${PROXY}/sessions?limit=1`);
+        const j = await r.json();
+        const id = j?.sessions?.[0]?.id;
+        if (id) setActiveId(id);
+      } catch { /* none */ }
+    })();
+  }, [refreshSessions]);
+
+  useEffect(() => { if (activeId) loadMessages(activeId); }, [activeId, loadMessages]);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, partial]);
+
+  // SSE subscription per active session.
+  useEffect(() => {
+    if (!activeId) return;
+    srcRef.current?.close();
+    const src = new EventSource(`${PROXY}/sessions/${encodeURIComponent(activeId)}/events`);
+    srcRef.current = src;
+    src.onmessage = (ev) => {
+      let p: { type?: string; data?: any };
+      try { p = JSON.parse(ev.data); } catch { return; }
+      const data = p.data || {};
+      if (p.type === 'text_delta') {
+        setPartial((s) => s + (data.delta || ''));
+      } else if (p.type === 'message_saved') {
+        loadMessages(activeId);
+        setPartial('');
+      } else if (p.type === 'turn_done') {
+        setStreaming(false);
+        setPartial('');
+        loadMessages(activeId);
+        refreshSessions();
+      } else if (p.type === 'error') {
+        setStreaming(false);
+        setPartial('');
+        setMessages((m) => [...m, { role: 'system', content: `Error: ${data.error || 'unknown'}` }]);
+      }
+    };
+    return () => { src.close(); };
+  }, [activeId, loadMessages, refreshSessions]);
+
+  const send = async () => {
+    const text = input.trim();
+    if (!text || !activeId || streaming) return;
+    setInput('');
+    setStreaming(true);
+    // Optimistic user bubble; turn_done reloads the real thread from DB.
+    setMessages((m) => [...m, { role: 'user', content: text }]);
+    try {
+      await fetch(`${PROXY}/sessions/${encodeURIComponent(activeId)}/messages`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+    } catch (e) {
+      setStreaming(false);
+      setMessages((m) => [...m, { role: 'system', content: `Send failed: ${(e as Error).message}` }]);
+    }
+  };
+
+  const newSession = async () => {
+    try {
+      const r = await fetch(`${PROXY}/sessions`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ title: 'Mobile chat' }),
+      });
+      const j = await r.json();
+      const id = j?.session?.id || j?.id;
+      if (id) { setActiveId(id); setMessages([]); setShowPicker(false); await refreshSessions(); }
+    } catch { /* ignore */ }
+  };
+
+  const pickSession = (id: string) => { setActiveId(id); setMessages([]); setShowPicker(false); };
+
+  const activeTitle = sessions.find((s) => s.id === activeId)?.title || (activeId ? activeId.slice(0, 8) : 'No session');
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Session bar */}
+      <div className="shrink-0 flex items-center gap-2 px-3 py-1.5 bg-[#161b22] border-b border-[#30363d]">
+        <button
+          onClick={() => { setShowPicker((v) => !v); if (!showPicker) refreshSessions(); }}
+          className="flex-1 text-left text-xs text-[#e6edf3] truncate active:opacity-70"
+        >💬 {activeTitle} ▾</button>
+        <button onClick={newSession} className="text-xs px-2 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]">+ New</button>
+      </div>
+
+      {showPicker && (
+        <div className="shrink-0 max-h-[40vh] overflow-y-auto bg-[#161b22] border-b border-[#30363d]">
+          {sessions.length === 0 ? (
+            <div className="px-3 py-4 text-xs text-[#8b949e] text-center">No sessions</div>
+          ) : sessions.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => pickSession(s.id)}
+              className={`w-full text-left px-3 py-2 border-b border-[#30363d]/50 text-xs active:bg-[#1c2128] ${s.id === activeId ? 'text-[#7c5bf0]' : 'text-[#e6edf3]'}`}
+            >
+              <span className="truncate">{s.title || s.id.slice(0, 12)}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Messages */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-3 py-2 min-h-0 space-y-3">
+        {messages.length === 0 && !partial ? (
+          <div className="h-full flex items-center justify-center text-sm text-[#8b949e]">Send a message to start.</div>
+        ) : messages.map((m, i) => {
+          const t = msgText(m);
+          if (!t) return null;
+          return (
+            <div key={m.id || i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap break-words ${
+                m.role === 'user' ? 'bg-[#7c5bf0] text-white rounded-br-sm'
+                  : m.role === 'system' ? 'bg-red-900/30 text-red-300 rounded-bl-sm'
+                  : 'bg-[#1c2128] text-[#e6edf3] rounded-bl-sm'
+              }`}>{t}</div>
+            </div>
+          );
+        })}
+        {partial && (
+          <div className="flex justify-start">
+            <div className="max-w-[85%] rounded-2xl rounded-bl-sm px-3 py-2 text-sm whitespace-pre-wrap break-words bg-[#1c2128] text-[#e6edf3]">{partial}</div>
+          </div>
+        )}
+        {streaming && !partial && (
+          <div className="flex justify-start">
+            <div className="bg-[#1c2128] rounded-2xl rounded-bl-sm px-3 py-2 text-sm text-[#8b949e]">Thinking…</div>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      <div className="shrink-0 flex items-center gap-2 px-3 py-2 bg-[#161b22] border-t border-[#30363d]">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter' && !streaming) send(); }}
+          placeholder={activeId ? 'Type a message…' : 'No session'}
+          disabled={!activeId}
+          className="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] focus:outline-none focus:border-[#7c5bf0] disabled:opacity-50 min-w-0"
+          autoComplete="off" autoCorrect="off"
+        />
+        <button
+          onClick={send}
+          disabled={!activeId || !input.trim() || streaming}
+          className="px-4 py-2 bg-[#7c5bf0] text-white rounded-lg text-sm font-medium disabled:opacity-50 shrink-0"
+        >Send</button>
+      </div>
+    </div>
+  );
+}