@aion0/forge 0.10.78 → 0.10.80

package/components/TaskDetail.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef, memo, useCallback, useMemo } from 'react';
+import { useState, useEffect, useRef, memo, useCallback, useMemo, lazy, Suspense } from 'react';
 import MarkdownContent from './MarkdownContent';
 import NewTaskModal from './NewTaskModal';
 import type { Task, TaskLogEntry } from '@/src/types';
 
+const TmuxTaskTerminal = lazy(() => import('./TmuxTaskTerminal'));
+
 // Bound the rendered log/diff to keep React from choking on huge sessions.
 // Each LogEntry can include MarkdownContent and tool_use payloads (often
 // kilobytes per entry); rendering even ~200 fat entries can take a beat.
@@ -29,6 +31,7 @@ export default function TaskDetail({
   const [detailLoading, setDetailLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [tab, setTab] = useState<'log' | 'diff' | 'result'>('log');
+  const [showSession, setShowSession] = useState(false);
   const [expandedTools, setExpandedTools] = useState<Set<number>>(new Set());
   const [followUpText, setFollowUpText] = useState('');
   const [editing, setEditing] = useState(false);
@@ -166,6 +169,15 @@ export default function TaskDetail({
             <span className="text-[10px] text-[var(--text-secondary)] font-mono">{task.id}</span>
           </div>
           <div className="flex items-center gap-2">
+            {task.backend === 'tmux' && (
+              <button
+                onClick={() => setShowSession(s => !s)}
+                className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${showSession ? 'text-white bg-violet-500 border-violet-500' : 'text-violet-400 border-violet-400/30 hover:bg-violet-400 hover:text-white'}`}
+                title="Toggle tmux session panel"
+              >
+                ⌨ Session
+              </button>
+            )}
             <button onClick={() => setEditing(true)} className="text-[10px] px-2 py-0.5 text-[var(--accent)] border border-[var(--accent)]/30 rounded hover:bg-[var(--accent)] hover:text-white">
               Edit
             </button>
@@ -191,6 +203,12 @@ export default function TaskDetail({
           {task.startedAt && <span>Started: {new Date(task.startedAt).toLocaleString()}</span>}
           {task.completedAt && <span>Completed: {new Date(task.completedAt).toLocaleString()}</span>}
           {task.costUSD != null && <span>Cost: ${task.costUSD.toFixed(4)}</span>}
+          {task.backend === 'tmux' && (
+            <span className="px-1.5 py-0.5 rounded bg-violet-500/15 text-violet-400 font-medium">tmux</span>
+          )}
+          {task.agent && task.agent !== 'claude' && (
+            <span className="font-mono text-[var(--text-secondary)]">{task.agent}</span>
+          )}
         </div>
       </div>
 
@@ -318,6 +336,15 @@ export default function TaskDetail({
         </div>
       )}
 
+      {/* Tmux session panel — shown at the bottom when ⌨ Session is toggled */}
+      {showSession && task.backend === 'tmux' && (
+        <div className="border-t border-violet-500/30 shrink-0" style={{ height: 320 }}>
+          <Suspense fallback={<div className="p-3 text-[var(--text-secondary)] text-xs">Loading terminal…</div>}>
+            <TmuxTaskTerminal taskId={task.id} />
+          </Suspense>
+        </div>
+      )}
+
       {editing && (
         <NewTaskModal
           editTask={{ id: task.id, projectName: task.projectName, prompt: task.prompt, priority: task.priority, mode: task.mode, scheduledAt: task.scheduledAt }}

package/components/TmuxTaskTerminal.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+function getWsUrl(): string {
+  if (typeof window === 'undefined') return 'ws://localhost:8404';
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const webPort = parseInt(window.location.port) || 8403;
+  return `${proto}//${window.location.hostname}:${webPort + 1}`;
+}
+
+export default function TmuxTaskTerminal({ taskId }: { taskId: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    let disposed = false;
+    let termRef: import('@xterm/xterm').Terminal | null = null;
+    let wsRef: WebSocket | null = null;
+    let roRef: ResizeObserver | null = null;
+
+    Promise.all([
+      import('@xterm/xterm'),
+      import('@xterm/addon-fit'),
+    ]).then(([{ Terminal }, { FitAddon }]) => {
+      if (disposed) return;
+
+      const cs = getComputedStyle(document.documentElement);
+      const tv = (n: string) => cs.getPropertyValue(n).trim();
+
+      const term = new Terminal({
+        cursorBlink: true,
+        fontSize: 13,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        scrollback: 10000,
+        theme: {
+          background: tv('--term-bg') || '#0d1117',
+          foreground: tv('--term-fg') || '#c9d1d9',
+          cursor: tv('--term-cursor') || '#7c5bf0',
+        },
+      });
+      termRef = term;
+
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+      term.open(el);
+      setTimeout(() => { try { fitAddon.fit(); } catch {} }, 50);
+
+      const ro = new ResizeObserver(() => {
+        try { fitAddon.fit(); } catch {}
+        if (wsRef?.readyState === WebSocket.OPEN) {
+          wsRef.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+        }
+      });
+      roRef = ro;
+      ro.observe(el);
+
+      const sessionName = `fgt-${taskId}`;
+      const ws = new WebSocket(getWsUrl());
+      wsRef = ws;
+
+      ws.onopen = () => {
+        if (!disposed) {
+          ws.send(JSON.stringify({ type: 'attach', sessionName, cols: term.cols, rows: term.rows }));
+        }
+      };
+      ws.onmessage = (e) => {
+        try {
+          const msg = JSON.parse(e.data);
+          if (msg.type === 'output') term.write(msg.data);
+        } catch {}
+      };
+      ws.onclose = () => {
+        if (!disposed) term.write('\r\n\x1b[90m[disconnected — session may have ended]\x1b[0m\r\n');
+      };
+      ws.onerror = () => {
+        if (!disposed) term.write('\r\n\x1b[91m[connection error]\x1b[0m\r\n');
+      };
+
+      term.onData(data => {
+        if (wsRef?.readyState === WebSocket.OPEN) {
+          wsRef.send(JSON.stringify({ type: 'input', data }));
+        }
+      });
+    });
+
+    return () => {
+      disposed = true;
+      roRef?.disconnect();
+      wsRef?.close();
+      termRef?.dispose();
+    };
+  }, [taskId]);
+
+  return (
+    <div className="flex flex-col h-full bg-[#0d1117]">
+      <div className="text-[10px] text-[var(--text-secondary)] px-3 py-1 border-b border-[var(--border)] shrink-0 font-mono">
+        fgt-{taskId}
+      </div>
+      <div ref={containerRef} className="flex-1 overflow-hidden p-1" />
+    </div>
+  );
+}

package/components/WebTerminal.tsx

@@ -14,6 +14,7 @@ import '@xterm/xterm/css/xterm.css';
 export interface WebTerminalHandle {
   openSessionInTerminal: (sessionId: string, projectPath: string) => void;
   openProjectTerminal: (projectPath: string, projectName: string, agentId?: string, resumeMode?: boolean, sessionId?: string, profileEnv?: Record<string, string>) => void;
+  openExistingSession: (sessionName: string, label: string) => void;
 }
 
 export interface WebTerminalProps {
@@ -209,6 +210,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 +443,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 +483,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,
@@ -497,6 +502,12 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
         if (targetTabId !== null) setActiveTabId(targetTabId);
       }, 0);
     },
+    openExistingSession(sessionName: string, label: string) {
+      const tree = makeTerminal(sessionName);
+      const newTab: TabState = { id: nextId++, label, tree, ratios: {}, activeId: firstTerminalId(tree) };
+      setTabs(prev => [...prev, newTab]);
+      setTimeout(() => setActiveTabId(newTab.id), 0);
+    },
   }), [skipPermissions]);
 
   // ─── Tab operations ───────────────────────────────────
@@ -1613,6 +1624,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('; '));