@aion0/forge 0.10.78 → 0.10.80

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/Dashboard.tsx

@@ -282,10 +282,14 @@ export default function Dashboard({ user }: { user: any }) {
   // Listen for open-terminal events from ProjectManager
   useEffect(() => {
     const handler = (e: Event) => {
-      const { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv } = (e as CustomEvent).detail;
+      const { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv, tmuxSession, tmuxLabel } = (e as CustomEvent).detail;
       setViewMode('terminal');
       setTimeout(() => {
-        terminalRef.current?.openProjectTerminal?.(projectPath, projectName, agentId, resumeMode, sessionId, profileEnv);
+        if (tmuxSession) {
+          terminalRef.current?.openExistingSession?.(tmuxSession, tmuxLabel || tmuxSession);
+        } else {
+          terminalRef.current?.openProjectTerminal?.(projectPath, projectName, agentId, resumeMode, sessionId, profileEnv);
+        }
       }, 300);
     };
     window.addEventListener('forge:open-terminal', handler);

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/OnboardingWizard.tsx

@@ -50,6 +50,8 @@ interface OnboardingState {
     projectRoots: string[];
   };
   detected_cli: Array<{ name: string; path: string; version: string }>;
+  /** Deployment shape — 'container' deploys can't run `claude login`. */
+  deployment?: 'container' | 'host';
   /** All non-meta connector ids in the template, in template order. */
   template_connectors: Array<{
     id: string;
@@ -216,6 +218,11 @@ export function OnboardingDrawer({ onClose, onComplete, initialSourceId }: { onC
   const [cliAgentTool, setCliAgentTool] = useState<'claude' | 'codex' | 'aider' | 'opencode'>('claude');
   const [cliAgentPath, setCliAgentPath] = useState('');
   const [cliSetAsDefault, setCliSetAsDefault] = useState(true);
+  // Claude auth: 'login' (run `claude login` on host) vs 'token' (paste
+  // CLAUDE_CODE_OAUTH_TOKEN — required in containers where login can't reach
+  // a keychain). Defaults from detected deployment; user can override.
+  const [claudeAuthMode, setClaudeAuthMode] = useState<'login' | 'token'>('login');
+  const [claudeOauthToken, setClaudeOauthToken] = useState('');
 
   // Section 3: Connector template values (one per ${key})
   const [connectorValues, setConnectorValues] = useState<Record<string, string>>({});
@@ -354,7 +361,8 @@ export function OnboardingDrawer({ onClose, onComplete, initialSourceId }: { onC
     if (!initializedRef.current) { initializedRef.current = true; return; }
     setDirty(true);
   }, [displayName, displayEmail, apiKey, apiBaseUrl, apiModel, apiProfileId, apiProvider,
-      connectorValues, selectedConnectors, selectedPipelines, projectInput, cliAgentId, cliAgentPath]);
+      connectorValues, selectedConnectors, selectedPipelines, projectInput, cliAgentId, cliAgentPath,
+      claudeAuthMode, claudeOauthToken]);
   // Inline marketplace sync (so user doesn't have to leave the wizard
   // to populate the pipeline list when it's empty / stale).
   const [syncingMarket, setSyncingMarket] = useState(false);
@@ -469,6 +477,9 @@ export function OnboardingDrawer({ onClose, onComplete, initialSourceId }: { onC
         setCliAgentTool(first.name as any);
         setCliAgentPath(first.path);
       }
+
+      // Container deploys can't run `claude login` — default to pasting a token.
+      if (s.deployment === 'container') setClaudeAuthMode('token');
     }).catch(() => setState({
       ok: false, onboardingCompleted: false,
       current: { displayName: '', displayEmail: '', apiProfileIds: [], apiProfile: null, chatAgent: '', defaultAgent: '', agents: [], projectRoots: [] },
@@ -605,6 +616,11 @@ export function OnboardingDrawer({ onClose, onComplete, initialSourceId }: { onC
           tool: cliAgentTool,
           ...(cliAgentPath ? { path: cliAgentPath } : {}),
           setAsDefault: cliSetAsDefault,
+          // Container claude auth: pasted OAuth token → encrypted agent env.
+          // Blank is fine (backend keeps any existing token).
+          ...(cliAgentTool === 'claude' && claudeAuthMode === 'token' && claudeOauthToken.trim()
+            ? { env: { CLAUDE_CODE_OAUTH_TOKEN: claudeOauthToken.trim() } }
+            : {}),
         };
       }
       const r = await fetch('/api/onboarding', {
@@ -1132,6 +1148,54 @@ export function OnboardingDrawer({ onClose, onComplete, initialSourceId }: { onC
               Use this CLI agent as the default for terminal sessions
             </label>
           )}
+
+          {/* Claude auth — deployment-aware. `claude login` needs a desktop
+              keychain, which containers lack; there you paste a token from
+              `claude setup-token` run on a machine that CAN log in. */}
+          {cliAgentTool === 'claude' && (
+            <div className="mt-2 pt-2 border-t border-[var(--border)]">
+              <div className="text-[10px] uppercase tracking-wider text-[var(--text-secondary)] mb-1 flex items-center gap-1.5">
+                Claude.ai auth
+                {state.deployment === 'container'
+                  ? <span className="text-[9px] text-amber-500">📦 container detected</span>
+                  : <span className="text-[9px] text-emerald-500">🖥 host detected</span>}
+              </div>
+              <div className="flex gap-1 mb-1.5">
+                {(['login', 'token'] as const).map(m => (
+                  <button
+                    key={m}
+                    onClick={() => setClaudeAuthMode(m)}
+                    className={`text-[10px] px-2 py-0.5 rounded ${claudeAuthMode === m ? 'bg-[var(--accent)] text-white' : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'}`}
+                  >
+                    {m === 'login' ? 'claude login' : 'paste token'}
+                  </button>
+                ))}
+              </div>
+              {claudeAuthMode === 'login' ? (
+                <p className="text-[10px] text-[var(--text-secondary)]">
+                  After onboarding, open a terminal and run <code>claude login</code> once.
+                  {state.deployment === 'container' && (
+                    <span className="text-amber-500"> ⚠ This deployment looks like a container — <code>claude login</code> usually can't reach a keychain here. Prefer “paste token”.</span>
+                  )}
+                </p>
+              ) : (
+                <div>
+                  <p className="text-[10px] text-[var(--text-secondary)] mb-1">
+                    On a machine where you CAN log in to Claude, run <code>claude setup-token</code> and paste the result. Stored encrypted as <code>CLAUDE_CODE_OAUTH_TOKEN</code>.
+                  </p>
+                  <Field label="CLAUDE_CODE_OAUTH_TOKEN (leave blank to keep existing)">
+                    <input
+                      type="password"
+                      className={inputCls + ' font-mono'}
+                      value={claudeOauthToken}
+                      onChange={e => setClaudeOauthToken(e.target.value)}
+                      placeholder="sk-ant-oat..."
+                    />
+                  </Field>
+                </div>
+              )}
+            </div>
+          )}
         </Section>
         )}
 

package/components/ProjectDetail.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useCallback, useRef, memo, lazy, Suspense } from 'react';
 import { useSidebarResize } from '@/hooks/useSidebarResize';
+import { updateTreeChildren } from '@/lib/fileTree';
 
 import { TerminalSessionPickerLazy, fetchProjectSessions } from './TerminalLauncher';
 const InlinePipelineView = lazy(() => import('./InlinePipelineView'));
@@ -65,6 +66,14 @@ interface GitInfo {
   log: { hash: string; message: string; author: string; date: string }[];
 }
 
+interface FileTreeNodeData {
+  name: string;
+  path: string;
+  type: string;
+  children?: FileTreeNodeData[];
+  hasChildren?: boolean;
+}
+
 export default memo(function ProjectDetail({ projectPath, projectName, hasGit }: { projectPath: string; projectName: string; hasGit: boolean }) {
   const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 208, minWidth: 120, maxWidth: 400 });
   const [gitInfo, setGitInfo] = useState<GitInfo | null>(null);
@@ -167,6 +176,14 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
     } catch { setFileTree([]); }
   }, [projectPath]);
 
+  const loadTreeChildren = useCallback(async (path: string) => {
+    try {
+      const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}&treePath=${encodeURIComponent(path)}`);
+      const data = await res.json();
+      setFileTree(prev => updateTreeChildren(prev, path, data.tree || []));
+    } catch {}
+  }, [projectPath]);
+
   const openFile = useCallback(async (path: string) => {
     setSelectedFile(path);
     setDiffContent(null);
@@ -771,7 +788,7 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
           {/* File tree */}
           <div className="overflow-y-auto flex-1 p-1">
             {fileTree.map((node: any) => (
-              <FileTreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} collapseVersion={treeCollapseVersion} />
+              <FileTreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} onLoadChildren={loadTreeChildren} collapseVersion={treeCollapseVersion} />
             ))}
           </div>
         </div>
@@ -1582,14 +1599,15 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
 });
 
 // Simple file tree node
-const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelect, collapseVersion }: {
-  node: { name: string; path: string; type: string; children?: any[] };
+const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelect, onLoadChildren, collapseVersion }: {
+  node: FileTreeNodeData;
   depth: number;
   selected: string | null;
   onSelect: (path: string) => void;
+  onLoadChildren: (path: string) => Promise<void>;
   collapseVersion: number;
 }) {
-  const [expanded, setExpanded] = useState(depth < 1);
+  const [expanded, setExpanded] = useState(false);
 
   // When parent bumps collapseVersion, collapse this node
   useEffect(() => {
@@ -1597,18 +1615,26 @@ const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelec
   }, [collapseVersion]);
 
   if (node.type === 'dir') {
+    const hasChildren = node.hasChildren || (node.children?.length ?? 0) > 0;
+    const toggleExpanded = async () => {
+      const nextExpanded = !expanded;
+      setExpanded(nextExpanded);
+      if (nextExpanded && hasChildren && !node.children) {
+        await onLoadChildren(node.path);
+      }
+    };
     return (
       <div>
         <button
-          onClick={() => setExpanded(v => !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"
           style={{ paddingLeft: depth * 12 + 4 }}
         >
-          <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="text-[var(--text-primary)]">{node.name}</span>
         </button>
         {expanded && node.children?.map((child: any) => (
-          <FileTreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} collapseVersion={collapseVersion} />
+          <FileTreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} onLoadChildren={onLoadChildren} collapseVersion={collapseVersion} />
         ))}
       </div>
     );