@aion0/forge 0.10.79 → 0.10.81

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 {
@@ -501,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 ───────────────────────────────────