@aion0/forge 0.10.77 → 0.10.79

package/components/MobileView.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef, useCallback } from 'react';
+import MobileChat from './MobileChat';
 
 interface Project { name: string; path: string }
 interface SessionInfo { sessionId: string; summary?: string; firstPrompt?: string; modified?: string }
@@ -24,6 +25,9 @@ export default function MobileView() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const abortRef = useRef<AbortController | null>(null);
+  // Default to the Forge chat agent (same backend as web /chat + Telegram);
+  // Terminal tab keeps the original claude-session browse/continue view.
+  const [viewMode, setViewMode] = useState<'chat' | 'terminal'>('chat');
 
   // Fetch projects
   useEffect(() => {
@@ -225,9 +229,24 @@ export default function MobileView() {
 
   return (
     <div className="h-[100dvh] flex flex-col bg-[#0d1117] text-[#e6edf3]">
+      {/* Mode toggle — Chat (Forge agent) vs Terminal (claude sessions) */}
+      <div className="shrink-0 flex items-center gap-1.5 px-2 py-1.5 bg-[#161b22] border-b border-[#30363d]">
+        <span className="text-xs font-bold text-[#7c5bf0] mr-1">Forge</span>
+        <button
+          onClick={() => setViewMode('chat')}
+          className={`text-xs px-2.5 py-1 rounded ${viewMode === 'chat' ? 'bg-[#7c5bf0] text-white' : 'border border-[#30363d] text-[#8b949e] active:bg-[#30363d]'}`}
+        >💬 Chat</button>
+        <button
+          onClick={() => setViewMode('terminal')}
+          className={`text-xs px-2.5 py-1 rounded ${viewMode === 'terminal' ? 'bg-[#7c5bf0] text-white' : 'border border-[#30363d] text-[#8b949e] active:bg-[#30363d]'}`}
+        >⌨ Terminal</button>
+        <a href="/?force=desktop" className="ml-auto text-[9px] px-1.5 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]" title="Switch to desktop view">PC</a>
+      </div>
+
+      {viewMode === 'chat' ? <MobileChat /> : (
+      <>
       {/* Header */}
       <header className="shrink-0 flex items-center gap-1.5 px-2 py-2 bg-[#161b22] border-b border-[#30363d]">
-        <span className="text-xs font-bold text-[#7c5bf0]">Forge</span>
         <select
           value={selectedProject?.path || ''}
           onChange={e => {
@@ -273,7 +292,6 @@ export default function MobileView() {
         {tunnelUrl && (
           <button onClick={closeTunnel} className="text-xs px-1.5 py-1 border border-green-700 rounded text-green-400" title={tunnelUrl}>●</button>
         )}
-        <a href="/?force=desktop" className="text-[9px] px-1.5 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]" title="Switch to desktop view">PC</a>
       </header>
 
       {/* Session list */}
@@ -380,6 +398,8 @@ export default function MobileView() {
           </div>
         )}
       </div>
+      </>
+      )}
     </div>
   );
 }

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>
     );

package/components/WebTerminal.tsx

@@ -209,6 +209,9 @@ function MouseToggle() {
 // ─── Pending commands for new terminal panes ────────────────
 
 const pendingCommands = new Map<number, string>();
+// Secret env (API keys) to inject via `tmux set-environment` on connect, so the
+// launch command never types `export KEY=value` into the pane (no echo/history).
+const pendingEnv = new Map<number, Record<string, string>>();
 
 // ─── Bell notification tracking ─────────────────────────────
 
@@ -439,14 +442,14 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
       // Model flag from profile
       const modelFlag = profileEnv?.CLAUDE_MODEL ? ` --model ${profileEnv.CLAUDE_MODEL}` : '';
 
-      // Build env exports from profile (exclude CLAUDE_MODEL — passed via --model)
-      const envExports = profileEnv
-        ? Object.entries(profileEnv)
-            .filter(([k]) => k !== 'CLAUDE_MODEL')
-            .map(([k, v]) => `export ${k}="${v}"`)
-            .join(' && ')
-        : '';
-      const envPrefix = envExports ? envExports + ' && ' : '';
+      // Build env injection from profile (exclude CLAUDE_MODEL — passed via
+      // --model). Secret values go via `tmux set-environment` (sent on connect);
+      // the prefix only references var NAMES so keys never echo into the pane.
+      const envEntries = profileEnv
+        ? Object.entries(profileEnv).filter(([k]) => k !== 'CLAUDE_MODEL')
+        : [];
+      const { tmuxEnvPrefix } = await import('@/lib/session-utils');
+      const envPrefix = tmuxEnvPrefix(envEntries.map(([k]) => k));
 
       // Skip-permissions flag. agent === 'claude' means the agent ID is
       // the base claude — not the resolved path. The check must compare
@@ -479,6 +482,7 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
         const tree = makeTerminal(undefined, projectPath);
         const paneId = firstTerminalId(tree);
         pendingCommands.set(paneId, `${envPrefix}cd "${projectPath}" && ${quotedCmd}${resumeFlag}${modelFlag}${sf}${mcpFlag}\n`);
+        if (envEntries.length) pendingEnv.set(paneId, Object.fromEntries(envEntries));
         const newTab: TabState = {
           id: nextId++,
           label: agent !== 'claude' ? `${projectName} (${agent})` : projectName,
@@ -1613,6 +1617,13 @@ const MemoTerminalPane = memo(function TerminalPane({
             const cmd = pendingCommands.get(id);
             if (cmd) {
               pendingCommands.delete(id);
+              // Inject secret env into the tmux session first (no echo), so the
+              // launch command can pull it via `tmux show-environment`.
+              const penv = pendingEnv.get(id);
+              if (penv && connectedSession && ws?.readyState === WebSocket.OPEN) {
+                pendingEnv.delete(id);
+                ws.send(JSON.stringify({ type: 'setenv', sessionName: connectedSession, env: penv }));
+              }
               setTimeout(() => {
                 if (!disposed && ws?.readyState === WebSocket.OPEN) {
                   ws.send(JSON.stringify({ type: 'input', data: cmd }));

package/components/WorkspaceView.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback, useMemo, useRef, forwardRef, useImperativeHandle, lazy, Suspense } from 'react';
 import { TerminalSessionPickerLazy, fetchAgentSessions, type PickerSelection } from './TerminalLauncher';
 import { useModelsRegistry } from '@/lib/public-info/use-models-registry';
+import { updateTreeChildren } from '@/lib/fileTree';
 import {
   ReactFlow, Background, Controls, Handle, Position, useReactFlow, ReactFlowProvider,
   type Node, type NodeProps, MarkerType, type NodeChange,
@@ -559,25 +560,47 @@ function WatchPathPicker({ value, projectPath, onChange }: { value: string; proj
   const [search, setSearch] = useState('');
   const [flatFiles, setFlatFiles] = useState<string[]>([]);
 
+  // Full searchable path list comes from the server's bounded index (files +
+  // dirs), computed once. Falls back to walking the loaded tree only if an
+  // older server omits the index.
+  const buildSearchList = useCallback((data: any) => {
+    const fi = data?.fileIndex, di = data?.dirIndex;
+    if (Array.isArray(fi) || Array.isArray(di)) {
+      return [
+        ...(di || []).map((d: any) => `${d.path}/`),
+        ...(fi || []).map((f: any) => f.path),
+      ];
+    }
+    const files: string[] = [];
+    const walk = (items: any[]) => {
+      for (const n of items || []) {
+        files.push(n.type === 'dir' ? `${n.path}/` : n.path);
+        if (n.children) walk(n.children);
+      }
+    };
+    walk(data?.tree || []);
+    return files;
+  }, []);
+
   const loadTree = useCallback(() => {
     if (!projectPath) return;
     fetch(`/api/code?dir=${encodeURIComponent(projectPath)}`)
       .then(r => r.json())
       .then(data => {
         setTree(data.tree || []);
-        // Build flat list for search
-        const files: string[] = [];
-        const walk = (nodes: any[], prefix = '') => {
-          for (const n of nodes || []) {
-            const path = prefix ? `${prefix}/${n.name}` : n.name;
-            files.push(n.type === 'dir' ? path + '/' : path);
-            if (n.children) walk(n.children, path);
-          }
-        };
-        walk(data.tree || []);
-        setFlatFiles(files);
+        setFlatFiles(buildSearchList(data));
       })
       .catch(() => {});
+  }, [buildSearchList, projectPath]);
+
+  const loadChildren = useCallback(async (path: string) => {
+    if (!projectPath) return;
+    try {
+      const res = await fetch(`/api/code?dir=${encodeURIComponent(projectPath)}&treePath=${encodeURIComponent(path)}`);
+      const data = await res.json();
+      // Tree display only — search already covers the whole repo via the index.
+      setTree(prev => updateTreeChildren(prev, path, data.tree || []));
+    } catch {}
   }, [projectPath]);
 
   const filtered = search ? flatFiles.filter(f => f.toLowerCase().includes(search.toLowerCase())).slice(0, 30) : [];
@@ -613,7 +636,7 @@ function WatchPathPicker({ value, projectPath, onChange }: { value: string; proj
               )) : <div className="px-2 py-1 text-[9px] text-gray-500">No matches</div>
             ) : (
               // Tree view (first 2 levels)
-              tree.map(n => <PathTreeNode key={n.name} node={n} prefix="" onSelect={p => { onChange(p); setShowBrowser(false); }} />)
+              tree.map(n => <PathTreeNode key={n.path} node={n} onSelect={p => { onChange(p); setShowBrowser(false); }} onLoadChildren={loadChildren} />)
             )}
           </div>
           <div className="flex items-center justify-between px-2 py-0.5 border-t border-[#30363d] bg-[#161b22]">
@@ -626,21 +649,34 @@ function WatchPathPicker({ value, projectPath, onChange }: { value: string; proj
   );
 }
 
-function PathTreeNode({ node, prefix, onSelect, depth = 0 }: { node: any; prefix: string; onSelect: (path: string) => void; depth?: number }) {
-  const [expanded, setExpanded] = useState(depth < 1);
-  const path = prefix ? `${prefix}/${node.name}` : node.name;
+function PathTreeNode({ node, onSelect, onLoadChildren, depth = 0 }: { node: any; onSelect: (path: string) => void; onLoadChildren: (path: string) => Promise<void>; depth?: number }) {
+  const [expanded, setExpanded] = useState(false);
+  const path = node.path;
   const isDir = node.type === 'dir';
+  const hasChildren = node.hasChildren || (node.children?.length ?? 0) > 0;
 
   if (!isDir && depth > 1) return null; // only show files at top 2 levels
 
+  const toggleExpanded = async () => {
+    if (!isDir) {
+      onSelect(path);
+      return;
+    }
+    const nextExpanded = !expanded;
+    setExpanded(nextExpanded);
+    if (nextExpanded && hasChildren && !node.children) {
+      await onLoadChildren(path);
+    }
+  };
+
   return (
     <div>
       <div
-        onClick={() => isDir ? setExpanded(!expanded) : onSelect(path)}
+        onClick={toggleExpanded}
         className="flex items-center px-2 py-0.5 text-[9px] hover:bg-[#161b22] cursor-pointer"
         style={{ paddingLeft: 8 + depth * 12 }}
       >
-        <span className="text-gray-500 mr-1 w-3">{isDir ? (expanded ? '▼' : '▶') : ''}</span>
+        <span className="text-gray-500 mr-1 w-3">{isDir && hasChildren ? (expanded ? '▼' : '▶') : ''}</span>
         <span className={isDir ? 'text-[var(--accent)]' : 'text-gray-400'}>{isDir ? '📁' : '📄'} {node.name}</span>
         {isDir && (
           <button onClick={e => { e.stopPropagation(); onSelect(path + '/'); }}
@@ -648,7 +684,7 @@ function PathTreeNode({ node, prefix, onSelect, depth = 0 }: { node: any; prefix
         )}
       </div>
       {isDir && expanded && node.children && depth < 2 && (
-        node.children.map((c: any) => <PathTreeNode key={c.name} node={c} prefix={path} onSelect={onSelect} depth={depth + 1} />)
+        node.children.map((c: any) => <PathTreeNode key={c.path} node={c} onSelect={onSelect} onLoadChildren={onLoadChildren} depth={depth + 1} />)
       )}
     </div>
   );
@@ -782,29 +818,6 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
   const [watchTargets, setWatchTargets] = useState<{ type: string; path?: string; cmd?: string; pattern?: string }[]>(
     initial.watch?.targets || []
   );
-  const [projectDirs, setProjectDirs] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (!watchEnabled || !projectPath) return;
-    fetch(`/api/code?dir=${encodeURIComponent(projectPath)}`)
-      .then(r => r.json())
-      .then(data => {
-        // Collect directories with depth limit (max 2 levels for readability)
-        const dirs: string[] = [];
-        const walk = (nodes: any[], prefix = '', depth = 0) => {
-          for (const n of nodes || []) {
-            if (n.type === 'dir') {
-              const path = prefix ? `${prefix}/${n.name}` : n.name;
-              dirs.push(path);
-              if (n.children && depth < 2) walk(n.children, path, depth + 1);
-            }
-          }
-        };
-        walk(data.tree || []);
-        setProjectDirs(dirs);
-      })
-      .catch(() => {});
-  }, [watchEnabled, projectPath]);
 
   const applyPreset = (p: Omit<AgentConfig, 'id'>) => {
     setLabel(p.label); setIcon(p.icon); setRole(p.role);
@@ -2296,8 +2309,11 @@ function FloatingTerminalInline({ agentLabel, agentIcon, projectPath, agentCliId
               const profileVarsToReset = ['ANTHROPIC_AUTH_TOKEN', 'ANTHROPIC_BASE_URL', 'ANTHROPIC_SMALL_FAST_MODEL', 'CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC', 'DISABLE_TELEMETRY', 'DISABLE_ERROR_REPORTING', 'DISABLE_AUTOUPDATER', 'DISABLE_NON_ESSENTIAL_MODEL_CALLS', 'CLAUDE_MODEL'];
               commands.push(profileVarsToReset.map(v => `unset ${v}`).join('; '));
               const envWithoutForge = Object.entries(envWithoutModel).filter(([k]) => !k.startsWith('FORGE_'));
-              if (envWithoutForge.length > 0) {
-                commands.push(envWithoutForge.map(([k, v]) => `export ${k}="${v}"`).join('; '));
+              if (envWithoutForge.length > 0 && msg.sessionName) {
+                ws.send(JSON.stringify({ type: 'setenv', sessionName: msg.sessionName, env: Object.fromEntries(envWithoutForge) }));
+                const { tmuxEnvPrefix } = await import('@/lib/session-utils');
+                const wrap = tmuxEnvPrefix(envWithoutForge.map(([k]) => k));
+                if (wrap) commands.push(wrap.replace(/ && $/, ''));
               }
               const forgeVars = Object.entries(envWithoutModel).filter(([k]) => k.startsWith('FORGE_'));
               if (forgeVars.length > 0) {
@@ -2541,13 +2557,18 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
             const profileVarsToReset = ['ANTHROPIC_AUTH_TOKEN', 'ANTHROPIC_BASE_URL', 'ANTHROPIC_SMALL_FAST_MODEL', 'CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC', 'DISABLE_TELEMETRY', 'DISABLE_ERROR_REPORTING', 'DISABLE_AUTOUPDATER', 'DISABLE_NON_ESSENTIAL_MODEL_CALLS', 'CLAUDE_MODEL'];
             commands.push(profileVarsToReset.map(v => `unset ${v}`).join('; '));
 
-            // 2. Export new profile vars (if any)
+            // 2. Profile vars (secrets) — inject via `tmux set-environment` (no
+            //    echo), then reference by NAME in the launch command so API keys
+            //    never appear in the pane or shell history.
             const envWithoutForge = Object.entries(envWithoutModel).filter(([k]) => !k.startsWith('FORGE_'));
-            if (envWithoutForge.length > 0) {
-              commands.push(envWithoutForge.map(([k, v]) => `export ${k}="${v}"`).join('; '));
+            if (envWithoutForge.length > 0 && sessionNameRef.current) {
+              ws.send(JSON.stringify({ type: 'setenv', sessionName: sessionNameRef.current, env: Object.fromEntries(envWithoutForge) }));
+              const { tmuxEnvPrefix } = await import('@/lib/session-utils');
+              const wrap = tmuxEnvPrefix(envWithoutForge.map(([k]) => k));
+              if (wrap) commands.push(wrap.replace(/ && $/, ''));
             }
 
-            // 3. Export FORGE vars
+            // 3. Export FORGE vars (not secret — plain export is fine)
             const forgeVars = Object.entries(envWithoutModel).filter(([k]) => k.startsWith('FORGE_'));
             if (forgeVars.length > 0) {
               commands.push(forgeVars.map(([k, v]) => `export ${k}="${v}"`).join('; '));

package/lib/agents/index.ts

@@ -5,6 +5,7 @@
 
 import { execFileSync, execSync } from 'node:child_process';
 import { loadSettings } from '../settings';
+import { decryptSecret } from '../crypto';
 
 // Cache absolute-path resolution per command — `which <cmd>` is cheap
 // but resolveTerminalLaunch is on the hot path for every chat tool call.
@@ -311,6 +312,14 @@ export function resolveTerminalLaunch(agentId?: string, scene: 'terminal' | 'tas
       if (model === 'default') model = undefined;
     }
   }
+  // Decrypt any enc:… env values (e.g. CLAUDE_CODE_OAUTH_TOKEN written by the
+  // onboarding wizard). decryptSecret is a no-op on plaintext, so template-
+  // derived plaintext env passes through untouched.
+  if (env) {
+    for (const k of Object.keys(env)) {
+      if (typeof env[k] === 'string' && env[k].startsWith('enc:')) env[k] = decryptSecret(env[k]);
+    }
+  }
 
   return {
     // Prefer the user-configured absolute binary path over the bare command

package/lib/chat/telegram-bridge.ts

@@ -104,6 +104,21 @@ async function ensureSession(telegramChatId: number): Promise<string> {
   return id;
 }
 
+/** List recent chat sessions (for the /chat picker). Best-effort: [] on error. */
+export async function listChatSessions(limit = 20): Promise<Array<{ id: string; title: string; updated_at?: string }>> {
+  try {
+    const r = await fetch(`${BASE}/api/sessions?limit=${limit}`);
+    if (!r.ok) return [];
+    const j = await r.json();
+    return Array.isArray(j?.sessions) ? j.sessions : [];
+  } catch { return []; }
+}
+
+/** Create a fresh chat session, returns its id (null on failure). */
+export async function newChatSession(title: string): Promise<string | null> {
+  try { return await createSession(title); } catch { return null; }
+}
+
 async function openSse(sessionId: string): Promise<ReadableStreamDefaultReader<Uint8Array>> {
   const res = await fetch(`${BASE}/api/sessions/${encodeURIComponent(sessionId)}/events`, {
     headers: { accept: 'text/event-stream' },

package/lib/fileTree.ts

@@ -0,0 +1,28 @@
+// Shared helpers for the lazily-loaded file trees served by /api/code.
+// The tree is fetched one directory level at a time; children for a directory
+// are merged in on demand. Kept generic so each consumer can use its own node
+// shape (CodeViewer, ProjectDetail, WorkspaceView) as long as it carries a
+// `path` and an optional `children` array.
+
+export interface FileTreeNode {
+  path: string;
+  children?: FileTreeNode[];
+  hasChildren?: boolean;
+}
+
+/**
+ * Return a new tree with `children` spliced in under the node whose `path`
+ * matches. Pure — does not mutate the input. `hasChildren` is recomputed so a
+ * directory that turns out to be empty loses its expand affordance.
+ */
+export function updateTreeChildren<T extends { path: string; children?: T[]; hasChildren?: boolean }>(
+  nodes: T[],
+  path: string,
+  children: T[],
+): T[] {
+  return nodes.map(node => {
+    if (node.path === path) return { ...node, children, hasChildren: children.length > 0 };
+    if (node.children) return { ...node, children: updateTreeChildren(node.children, path, children) };
+    return node;
+  });
+}

package/lib/help-docs/00-overview.md

@@ -83,3 +83,5 @@ Next to the **Automation** tab in the left-side nav sits a small **Activity** su
 - **User menu (▾)** — `⚙ Settings` + `💬 Chat (web) ↗` at the top (Chat opens in a new tab so the dashboard isn't replaced); then a divider, then the periodic-check screens `📊 Monitor` (background watches, processes, queues), `🔐 Login Status` (connector creds), `💰 Usage` (token/cost analytics), `📜 Logs`, `📱 Mobile View ↗`; then `⏻ Logout`.
 
 Periodic-check screens (Monitor / Login Status / Usage) live inside the user menu so the top bar only shows things worth glancing at.
+
+**Mobile View** (`/mobile`, opened from the user menu or auto on phones) defaults to a **💬 Chat** tab — the Forge chat agent, same backend as the web `/chat` and the Telegram chat. Pick or start a session and talk; replies stream live. Toggle to the **⌨ Terminal** tab to browse/continue Claude Code sessions per project (the original mobile view). `PC` switches to the desktop layout.

package/lib/help-docs/01-settings.md

@@ -53,6 +53,17 @@ Each agent entry in `settings.agents` supports:
 | `models` | object | Model overrides per context: `terminal`, `task`, `telegram`, `help`, `mobile` |
 | `profile` | string | Linked profile ID — applies that profile's env/model when launching |
 
+### Claude authentication (host vs container)
+
+The onboarding wizard's **CLI Agent** step detects your deployment shape and adapts how Claude Code authenticates:
+
+- **Host** (desktop/laptop): run `claude login` once in a terminal after onboarding — it stores credentials in the OS keychain.
+- **Container** (Docker / k8s): `claude login` can't reach a keychain. Instead, on a machine where you *can* log in, run `claude setup-token`, then paste the resulting token into the wizard. It's saved encrypted as `CLAUDE_CODE_OAUTH_TOKEN` in the agent's `env` and injected at launch.
+
+Detection signals (any → container): `FORGE_CONTAINER=1`, `/.dockerenv`, or a containerized cgroup. The wizard pre-selects the right mode but you can override it.
+
+Agent `env` secrets (including the OAuth token) are encrypted at rest (`enc:…`) and injected into terminals via `tmux set-environment`, so they never appear in the pane echo or shell history.
+
 ### CLI Type
 
 The `cliType` field determines how Forge interacts with the agent:

package/lib/help-docs/02-telegram.md

@@ -24,6 +24,8 @@
 | `/peek <project>` | Preview running session |
 | `/cancel <id>` | Cancel a task |
 | `/retry <id>` | Retry a failed task |
+| `/chat` | Enter chat mode — pick an existing chat session or start a new one, then every message goes to the Forge chat agent (same as the web `/chat`) |
+| `/endchat` | Leave chat mode |
 | `/tunnel_start <password>` | Start Cloudflare Tunnel (returns URL + code) |
 | `/tunnel_stop` | Stop tunnel |
 | `/tunnel_code <password>` | Get session code for remote login |
@@ -33,6 +35,7 @@
 - Reply to a task message to interact with it
 - Send `"project: instructions"` to quick-create a task
 - Numbered lists — reply with a number to select
+- **Chat mode**: `/chat` → reply with a number to pick a session (`0` = new) → talk normally; the agent streams replies just like the web `/chat`. `/endchat` exits. Other slash-commands still work while in chat mode.
 
 ## Troubleshooting
 

package/lib/help-docs/07-projects.md

@@ -38,7 +38,9 @@ Notes:
 ## Features
 
 ### Code Tab
-- File tree browser
+- File tree browser — loads lazily (folders expand on demand), so very large repos open instantly
+- File search uses a fast server-built index; in very large repos the index is sampled per directory, and a note appears when results may be partial
+- "Locate in file tree" (on a changed file) reveals it in the tree
 - Syntax-highlighted code viewer
 - Git diff view (click changed files)
 - Git operations: commit, push, pull