@aion0/forge 0.5.7 → 0.5.9

package/components/WorkspaceView.tsx

@@ -13,6 +13,7 @@ import '@xyflow/react/dist/style.css';
 interface AgentConfig {
   id: string; label: string; icon: string; role: string;
   type?: 'agent' | 'input';
+  primary?: boolean;
   content?: string;
   entries?: { content: string; timestamp: number }[];
   backend: 'api' | 'cli';
@@ -22,12 +23,14 @@ interface AgentConfig {
   outputs: string[];
   steps: { id: string; label: string; prompt: string }[];
   requiresApproval?: boolean;
+  persistentSession?: boolean;
+  skipPermissions?: boolean;
+  boundSessionId?: string;
   watch?: { enabled: boolean; interval: number; targets: any[]; action?: 'log' | 'analyze' | 'approve' | 'send_message'; prompt?: string; sendTo?: string };
 }
 
 interface AgentState {
   smithStatus: 'down' | 'active';
-  mode: 'auto' | 'manual';
   taskStatus: 'idle' | 'running' | 'done' | 'failed';
   currentStep?: number;
   tmuxSession?: string;
@@ -237,7 +240,6 @@ function useWorkspaceStream(workspaceId: string | null, onEvent?: (event: any) =
             [event.agentId]: {
               ...prev[event.agentId],
               smithStatus: event.smithStatus,
-              mode: event.mode,
             },
           }));
         }
@@ -282,6 +284,10 @@ function useWorkspaceStream(workspaceId: string | null, onEvent?: (event: any) =
           ));
         }
 
+        if (event.type === 'bus_log_updated') {
+          setBusLog(event.log || []);
+        }
+
         // Server pushed updated agents list + states (after add/remove/update/reset)
         if (event.type === 'agents_changed') {
           const newAgents = event.agents || [];
@@ -332,22 +338,24 @@ function SessionTargetSelector({ target, agents, projectPath, onChange }: {
 }) {
   const [sessions, setSessions] = useState<{ id: string; modified: string; label: string }[]>([]);
 
-  // Load sessions when agent changes
+  // Load sessions and mark fixed session
   useEffect(() => {
     if (!projectPath) return;
     const pName = (projectPath || '').replace(/\/+$/, '').split('/').pop() || '';
-    fetch(`/api/claude-sessions/${encodeURIComponent(pName)}`)
-      .then(r => r.json())
-      .then(data => {
-        if (Array.isArray(data)) {
-          setSessions(data.map((s: any, i: number) => ({
-            id: s.sessionId || s.id || '',
-            modified: s.modified || '',
-            label: i === 0 ? `${(s.sessionId || '').slice(0, 8)} (latest)` : (s.sessionId || '').slice(0, 8),
-          })));
-        }
-      })
-      .catch(() => {});
+    Promise.all([
+      fetch(`/api/claude-sessions/${encodeURIComponent(pName)}`).then(r => r.json()).catch(() => []),
+      fetch(`/api/project-sessions?projectPath=${encodeURIComponent(projectPath)}`).then(r => r.json()).catch(() => ({})),
+    ]).then(([data, psData]) => {
+      const fixedId = psData?.fixedSessionId || '';
+      if (Array.isArray(data)) {
+        setSessions(data.map((s: any, i: number) => {
+          const sid = s.sessionId || s.id || '';
+          const isBound = sid === fixedId;
+          const label = isBound ? `${sid.slice(0, 8)} (fixed)` : i === 0 ? `${sid.slice(0, 8)} (latest)` : sid.slice(0, 8);
+          return { id: sid, modified: s.modified || '', label };
+        }));
+      }
+    });
   }, [projectPath]);
 
   return (
@@ -371,6 +379,58 @@ function SessionTargetSelector({ target, agents, projectPath, onChange }: {
   );
 }
 
+// ─── Fixed Session Picker ────────────────────────────────
+
+function FixedSessionPicker({ projectPath, value, onChange }: { projectPath?: string; value: string; onChange: (v: string) => void }) {
+  const [sessions, setSessions] = useState<{ id: string; modified: string; size: number }[]>([]);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!projectPath) return;
+    const pName = projectPath.replace(/\/+$/, '').split('/').pop() || '';
+    fetch(`/api/claude-sessions/${encodeURIComponent(pName)}`)
+      .then(r => r.json())
+      .then(data => { if (Array.isArray(data)) setSessions(data.map((s: any) => ({ id: s.sessionId || s.id || '', modified: s.modified || '', size: s.size || 0 }))); })
+      .catch(() => {});
+  }, [projectPath]);
+
+  const formatTime = (iso: string) => {
+    if (!iso) return '';
+    const diff = Date.now() - new Date(iso).getTime();
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+    return new Date(iso).toLocaleDateString();
+  };
+  const formatSize = (b: number) => b < 1024 ? `${b}B` : b < 1048576 ? `${(b / 1024).toFixed(0)}KB` : `${(b / 1048576).toFixed(1)}MB`;
+
+  const copyId = () => {
+    if (!value) return;
+    navigator.clipboard.writeText(value).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); });
+  };
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <label className="text-[9px] text-gray-500">Bound Session {value ? '' : '(auto-detect on first start)'}</label>
+      <select value={value} onChange={e => onChange(e.target.value)}
+        className="text-[10px] bg-[#161b22] border border-[#30363d] rounded px-2 py-1 text-gray-400 font-mono focus:outline-none focus:border-[#58a6ff]">
+        <option value="">Auto-detect (latest session)</option>
+        {sessions.map(s => (
+          <option key={s.id} value={s.id}>
+            {s.id.slice(0, 8)} · {formatTime(s.modified)} · {formatSize(s.size)}
+          </option>
+        ))}
+      </select>
+      {value && (
+        <div className="flex items-center gap-1 mt-0.5">
+          <code className="text-[8px] text-gray-500 font-mono bg-[#0d1117] px-1.5 py-0.5 rounded border border-[#21262d] flex-1 overflow-hidden text-ellipsis select-all">{value}</code>
+          <button onClick={copyId} className="text-[8px] px-1.5 py-0.5 rounded bg-[#30363d] text-gray-400 hover:text-white shrink-0">{copied ? '✓' : 'Copy'}</button>
+          <button onClick={() => onChange('')} className="text-[8px] px-1.5 py-0.5 rounded text-gray-600 hover:text-red-400 shrink-0">Clear</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ─── Agent Config Modal ──────────────────────────────────
 
 function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfirm, onCancel }: {
@@ -405,6 +465,10 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
     (initial.steps || []).map(s => `${s.label}: ${s.prompt}`).join('\n') || ''
   );
   const [requiresApproval, setRequiresApproval] = useState(initial.requiresApproval || false);
+  const [isPrimary, setIsPrimary] = useState(initial.primary || false);
+  const hasPrimaryAlready = existingAgents.some(a => a.primary && a.id !== initial.id);
+  const [persistentSession, setPersistentSession] = useState(initial.persistentSession || initial.primary || false);
+  const [skipPermissions, setSkipPermissions] = useState(initial.skipPermissions !== false);
   const [watchEnabled, setWatchEnabled] = useState(initial.watch?.enabled || false);
   const [watchInterval, setWatchInterval] = useState(String(initial.watch?.interval || 60));
   const [watchAction, setWatchAction] = useState<'log' | 'analyze' | 'approve' | 'send_message'>(initial.watch?.action || 'log');
@@ -580,8 +644,9 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
           <div className="flex gap-2">
             <div className="flex flex-col gap-1 w-28">
               <label className="text-[9px] text-gray-500 uppercase">Work Dir</label>
-              <input value={workDirVal} onChange={e => setWorkDirVal(e.target.value)} placeholder={label ? `${label.toLowerCase().replace(/\s+/g, '-')}/` : 'engineer/'}
-                className="text-xs bg-[#161b22] border border-[#30363d] rounded px-2 py-1 text-white focus:outline-none focus:border-[#58a6ff]" />
+              <input value={isPrimary ? './' : workDirVal} onChange={e => !isPrimary && setWorkDirVal(e.target.value)} placeholder={label ? `${label.toLowerCase().replace(/\s+/g, '-')}/` : 'engineer/'}
+                disabled={isPrimary}
+                className={`text-xs bg-[#161b22] border border-[#30363d] rounded px-2 py-1 text-white focus:outline-none focus:border-[#58a6ff] ${isPrimary ? 'opacity-50 cursor-not-allowed' : ''}`} />
               <div className="text-[8px] text-gray-600 mt-0.5">
                 → {'{project}/'}{(workDirVal || (label ? `${label.toLowerCase().replace(/\s+/g, '-')}/` : '')).replace(/^\.?\//, '')}
               </div>
@@ -593,6 +658,22 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
             </div>
           </div>
 
+          {/* Primary Agent */}
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="primaryAgent" checked={isPrimary}
+              onChange={e => {
+                const v = e.target.checked;
+                setIsPrimary(v);
+                if (v) { setPersistentSession(true); setWorkDirVal('./'); }
+              }}
+              disabled={hasPrimaryAlready && !isPrimary}
+              className={`accent-[#f0883e] ${hasPrimaryAlready && !isPrimary ? 'opacity-50 cursor-not-allowed' : ''}`} />
+            <label htmlFor="primaryAgent" className={`text-[9px] ${isPrimary ? 'text-[#f0883e] font-medium' : 'text-gray-400'}`}>
+              Primary agent (terminal-only, root directory, fixed session)
+              {hasPrimaryAlready && !isPrimary && <span className="text-gray-600 ml-1">— already set on another agent</span>}
+            </label>
+          </div>
+
           {/* Requires Approval */}
           <div className="flex items-center gap-2">
             <input type="checkbox" id="requiresApproval" checked={requiresApproval} onChange={e => setRequiresApproval(e.target.checked)}
@@ -600,6 +681,25 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
             <label htmlFor="requiresApproval" className="text-[9px] text-gray-400">Require approval before processing inbox messages</label>
           </div>
 
+          {/* Persistent Session */}
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="persistentSession" checked={persistentSession} onChange={e => !isPrimary && setPersistentSession(e.target.checked)}
+              disabled={isPrimary}
+              className={`accent-[#3fb950] ${isPrimary ? 'opacity-50 cursor-not-allowed' : ''}`} />
+            <label htmlFor="persistentSession" className={`text-[9px] text-gray-400 ${isPrimary ? 'opacity-50' : ''}`}>
+              Terminal mode {isPrimary ? '(required for primary)' : '— run in terminal instead of headless (claude -p)'}
+            </label>
+          </div>
+          {persistentSession && (
+            <div className="flex flex-col gap-1.5 ml-4">
+              <div className="flex items-center gap-2">
+                <input type="checkbox" id="skipPermissions" checked={skipPermissions} onChange={e => setSkipPermissions(e.target.checked)}
+                  className="accent-[#f0883e]" />
+                <label htmlFor="skipPermissions" className="text-[9px] text-gray-400">Skip permissions (auto-approve all tool calls)</label>
+              </div>
+            </div>
+          )}
+
           {/* Steps */}
           <div className="flex flex-col gap-1">
             <label className="text-[9px] text-gray-500 uppercase">Steps (one per line — Label: Prompt)</label>
@@ -760,10 +860,13 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
             onConfirm({
               label: label.trim(), icon: icon.trim() || '🤖', role: role.trim(),
               backend, agentId, dependsOn: Array.from(selectedDeps),
-              workDir: workDirVal.trim() || label.trim().toLowerCase().replace(/\s+/g, '-') + '/',
+              workDir: isPrimary ? './' : (workDirVal.trim() || label.trim().toLowerCase().replace(/\s+/g, '-') + '/'),
               outputs: outputs.split(',').map(s => s.trim()).filter(Boolean),
               steps: parseSteps(),
+              primary: isPrimary || undefined,
               requiresApproval: requiresApproval || undefined,
+              persistentSession: isPrimary ? true : (persistentSession || undefined),
+              skipPermissions: persistentSession ? (skipPermissions ? undefined : false) : undefined,
               watch: watchEnabled && watchTargets.length > 0 ? {
                 enabled: true,
                 interval: Math.max(10, parseInt(watchInterval) || 60),
@@ -1334,6 +1437,48 @@ function BusPanel({ busLog, agents, onClose }: {
 
 // ─── Terminal Launch Dialog ───────────────────────────────
 
+function SessionItem({ session, formatTime, formatSize, onSelect }: {
+  session: { id: string; modified: string; size: number };
+  formatTime: (iso: string) => string;
+  formatSize: (bytes: number) => string;
+  onSelect: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copyId = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(session.id).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <div className="rounded border border-[#21262d] hover:border-[#30363d] hover:bg-[#161b22] transition-colors">
+      <div className="flex items-center gap-2 px-3 py-1.5 cursor-pointer" onClick={() => setExpanded(!expanded)}>
+        <span className="text-[8px] text-gray-600">{expanded ? '▼' : '▶'}</span>
+        <span className="text-[9px] text-gray-400 font-mono">{session.id.slice(0, 8)}</span>
+        <span className="text-[8px] text-gray-600">{formatTime(session.modified)}</span>
+        <span className="text-[8px] text-gray-600">{formatSize(session.size)}</span>
+        <button onClick={(e) => { e.stopPropagation(); onSelect(); }}
+          className="ml-auto text-[8px] px-1.5 py-0.5 rounded bg-[#238636]/20 text-[#3fb950] hover:bg-[#238636]/40">Resume</button>
+      </div>
+      {expanded && (
+        <div className="px-3 pb-2 flex items-center gap-1.5">
+          <code className="text-[8px] text-gray-500 font-mono bg-[#161b22] px-1.5 py-0.5 rounded border border-[#21262d] select-all flex-1 overflow-hidden text-ellipsis">
+            {session.id}
+          </code>
+          <button onClick={copyId}
+            className="text-[8px] px-1.5 py-0.5 rounded bg-[#30363d] text-gray-400 hover:text-white hover:bg-[#484f58] shrink-0">
+            {copied ? '✓' : 'Copy'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function TerminalLaunchDialog({ agent, workDir, sessName, projectPath, workspaceId, supportsSession, onLaunch, onCancel }: {
   agent: AgentConfig; workDir?: string; sessName: string; projectPath: string; workspaceId: string;
   supportsSession?: boolean;
@@ -1349,7 +1494,7 @@ function TerminalLaunchDialog({ agent, workDir, sessName, projectPath, workspace
     if (!isClaude) return;
     fetch(`/api/workspace/${workspaceId}/smith`, {
       method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'sessions' }),
+      body: JSON.stringify({ action: 'sessions', agentId: agent.id }),
     }).then(r => r.json()).then(d => {
       if (d.sessions?.length) setSessions(d.sessions);
     }).catch(() => {});
@@ -1396,19 +1541,13 @@ function TerminalLaunchDialog({ agent, workDir, sessName, projectPath, workspace
           {isClaude && sessions.length > 1 && (
             <button onClick={() => setShowSessions(!showSessions)}
               className="w-full text-[9px] text-gray-500 hover:text-white py-1">
-              {showSessions ? '▼' : '▶'} More sessions ({sessions.length - 1})
+              {showSessions ? '▼' : '▶'} All sessions ({sessions.length})
             </button>
           )}
 
-          {showSessions && sessions.slice(1).map(s => (
-            <button key={s.id} onClick={() => onLaunch(true, s.id)}
-              className="w-full text-left px-3 py-1.5 rounded border border-[#21262d] hover:border-[#30363d] hover:bg-[#161b22] transition-colors">
-              <div className="flex items-center gap-2">
-                <span className="text-[9px] text-gray-400 font-mono">{s.id.slice(0, 8)}</span>
-                <span className="text-[8px] text-gray-600">{formatTime(s.modified)}</span>
-                <span className="text-[8px] text-gray-600">{formatSize(s.size)}</span>
-              </div>
-            </button>
+          {showSessions && sessions.map(s => (
+            <SessionItem key={s.id} session={s} formatTime={formatTime} formatSize={formatSize}
+              onSelect={() => onLaunch(true, s.id)} />
           ))}
         </div>
 
@@ -1430,7 +1569,217 @@ function getWsUrl() {
   return `${p}//${h}:${port + 1}`;
 }
 
-function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliCmd: cliCmdProp, cliType, workDir, preferredSessionName, existingSession, resumeMode, resumeSessionId, profileEnv, onSessionReady, onClose }: {
+// ─── Terminal Dock (right side panel with tabs) ──────────
+type TerminalEntry = { agentId: string; label: string; icon: string; cliId: string; cliCmd?: string; cliType?: string; workDir?: string; tmuxSession?: string; sessionName: string; resumeMode?: boolean; resumeSessionId?: string; profileEnv?: Record<string, string> };
+
+function TerminalDock({ terminals, projectPath, workspaceId, onSessionReady, onClose }: {
+  terminals: TerminalEntry[];
+  projectPath: string;
+  workspaceId: string | null;
+  onSessionReady: (agentId: string, name: string) => void;
+  onClose: (agentId: string) => void;
+}) {
+  const [activeTab, setActiveTab] = useState(terminals[0]?.agentId || '');
+  const [width, setWidth] = useState(520);
+  const dragRef = useRef<{ startX: number; origW: number } | null>(null);
+
+  // Auto-select new tab when added
+  useEffect(() => {
+    if (terminals.length > 0 && !terminals.find(t => t.agentId === activeTab)) {
+      setActiveTab(terminals[terminals.length - 1].agentId);
+    }
+  }, [terminals, activeTab]);
+
+  const active = terminals.find(t => t.agentId === activeTab);
+
+  return (
+    <div className="flex shrink-0" style={{ width }}>
+      {/* Resize handle */}
+      <div
+        className="w-1 cursor-col-resize hover:bg-[#58a6ff]/30 active:bg-[#58a6ff]/50 transition-colors"
+        style={{ background: '#21262d' }}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          dragRef.current = { startX: e.clientX, origW: width };
+          const onMove = (ev: MouseEvent) => {
+            if (!dragRef.current) return;
+            const newW = dragRef.current.origW - (ev.clientX - dragRef.current.startX);
+            setWidth(Math.max(300, Math.min(1200, newW)));
+          };
+          const onUp = () => { dragRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+          window.addEventListener('mousemove', onMove);
+          window.addEventListener('mouseup', onUp);
+        }}
+      />
+      <div className="flex-1 flex flex-col min-w-0 bg-[#0d1117] border-l border-[#30363d]">
+        {/* Tabs */}
+        <div className="flex items-center bg-[#161b22] border-b border-[#30363d] overflow-x-auto shrink-0">
+          {terminals.map(t => (
+            <div
+              key={t.agentId}
+              onClick={() => setActiveTab(t.agentId)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-[10px] border-r border-[#30363d] shrink-0 cursor-pointer ${
+                t.agentId === activeTab
+                  ? 'bg-[#0d1117] text-white border-b-2 border-b-[#58a6ff]'
+                  : 'text-gray-500 hover:text-gray-300 hover:bg-[#1c2128]'
+              }`}
+            >
+              <span>{t.icon}</span>
+              <span className="font-medium">{t.label}</span>
+              <span
+                onClick={(e) => { e.stopPropagation(); onClose(t.agentId); }}
+                className="ml-1 text-gray-600 hover:text-red-400 text-[8px] cursor-pointer"
+              >✕</span>
+            </div>
+          ))}
+        </div>
+        {/* Active terminal */}
+        {active && (
+          <div className="flex-1 min-h-0" key={active.agentId}>
+            <FloatingTerminalInline
+              agentLabel={active.label}
+              agentIcon={active.icon}
+              projectPath={projectPath}
+              agentCliId={active.cliId}
+              cliCmd={active.cliCmd}
+              cliType={active.cliType}
+              workDir={active.workDir}
+              preferredSessionName={active.sessionName}
+              existingSession={active.tmuxSession}
+              resumeMode={active.resumeMode}
+              resumeSessionId={active.resumeSessionId}
+              profileEnv={active.profileEnv}
+              onSessionReady={(name) => onSessionReady(active.agentId, name)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Inline Terminal (no drag/resize, fills parent) ──────
+function FloatingTerminalInline({ agentLabel, agentIcon, projectPath, agentCliId, cliCmd: cliCmdProp, cliType, workDir, preferredSessionName, existingSession, resumeMode, resumeSessionId, profileEnv, isPrimary, skipPermissions, boundSessionId, onSessionReady }: {
+  agentLabel: string;
+  agentIcon: string;
+  projectPath: string;
+  agentCliId: string;
+  cliCmd?: string;
+  cliType?: string;
+  workDir?: string;
+  preferredSessionName?: string;
+  existingSession?: string;
+  resumeMode?: boolean;
+  resumeSessionId?: string;
+  profileEnv?: Record<string, string>;
+  isPrimary?: boolean;
+  skipPermissions?: boolean;
+  boundSessionId?: string;
+  onSessionReady?: (name: string) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let disposed = false;
+
+    Promise.all([
+      import('@xterm/xterm'),
+      import('@xterm/addon-fit'),
+    ]).then(([{ Terminal }, { FitAddon }]) => {
+      if (disposed) return;
+
+      const term = new Terminal({
+        cursorBlink: true, fontSize: 13,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        scrollback: 5000,
+        theme: { background: '#0d1117', foreground: '#c9d1d9', cursor: '#58a6ff' },
+      });
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+      term.open(el);
+      setTimeout(() => { try { fitAddon.fit(); } catch {} }, 100);
+
+      const ro = new ResizeObserver(() => { try { fitAddon.fit(); } catch {} });
+      ro.observe(el);
+
+      // Connect to terminal server
+      const wsUrl = getWsUrl();
+      const ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
+      const decoder = new TextDecoder();
+
+      ws.onopen = () => {
+        ws.send(JSON.stringify({
+          type: 'create',
+          cols: term.cols, rows: term.rows,
+          sessionName: existingSession || preferredSessionName,
+          existingSession: existingSession || undefined,
+        }));
+      };
+      ws.onmessage = async (event) => {
+        try {
+          const msg = JSON.parse(typeof event.data === 'string' ? event.data : decoder.decode(event.data));
+          if (msg.type === 'data') {
+            term.write(typeof msg.data === 'string' ? msg.data : new Uint8Array(Object.values(msg.data)));
+          } else if (msg.type === 'created') {
+            onSessionReady?.(msg.sessionName);
+            // Auto-run CLI on newly created session
+            if (!existingSession) {
+              const cli = cliCmdProp || 'claude';
+              const targetDir = workDir ? `${projectPath}/${workDir}` : projectPath;
+              const cdCmd = `mkdir -p "${targetDir}" && cd "${targetDir}"`;
+              const isClaude = (cliType || 'claude-code') === 'claude-code';
+              const modelFlag = isClaude && profileEnv?.CLAUDE_MODEL ? ` --model ${profileEnv.CLAUDE_MODEL}` : '';
+              const envWithoutModel = profileEnv ? Object.fromEntries(
+                Object.entries(profileEnv).filter(([k]) => k !== 'CLAUDE_MODEL')
+              ) : {};
+              // Unset old profile vars + set new ones
+              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'];
+              const unsetPrefix = profileVarsToReset.map(v => `unset ${v}`).join(' && ') + ' && ';
+              const envExportsClean = unsetPrefix + (Object.keys(envWithoutModel).length > 0
+                ? Object.entries(envWithoutModel).map(([k, v]) => `export ${k}="${v}"`).join(' && ') + ' && '
+                : '');
+              // Resolve session: explicit > boundSessionId > fixedSession (primary) > fresh
+              let resumeId = resumeSessionId || boundSessionId;
+              if (isClaude && !resumeId && isPrimary) {
+                try {
+                  const { resolveFixedSession } = await import('@/lib/session-utils');
+                  resumeId = (await resolveFixedSession(projectPath)) || undefined;
+                } catch {}
+              }
+              const resumeFlag = isClaude && resumeId ? ` --resume ${resumeId}` : '';
+              let mcpFlag = '';
+              if (isClaude) { try { const { getMcpFlag } = await import('@/lib/session-utils'); mcpFlag = await getMcpFlag(projectPath); } catch {} }
+              const sf = skipPermissions ? (cliType === 'codex' ? ' --full-auto' : cliType === 'aider' ? ' --yes' : ' --dangerously-skip-permissions') : '';
+              const cmd = `${envExportsClean}${cdCmd} && ${cli}${resumeFlag}${modelFlag}${sf}${mcpFlag}\n`;
+              setTimeout(() => {
+                if (!disposed && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data: cmd }));
+              }, 300);
+            }
+          }
+        } catch {}
+      };
+
+      term.onData(data => { if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data })); });
+      term.onResize(({ cols, rows }) => { if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'resize', cols, rows })); });
+
+      return () => {
+        disposed = true;
+        ro.disconnect();
+        ws.close();
+        term.dispose();
+      };
+    });
+
+    return () => { disposed = true; };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <div ref={containerRef} className="w-full h-full" style={{ background: '#0d1117' }} />;
+}
+
+function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliCmd: cliCmdProp, cliType, workDir, preferredSessionName, existingSession, resumeMode, resumeSessionId, profileEnv, isPrimary, skipPermissions, persistentSession, boundSessionId, initialPos, onSessionReady, onClose }: {
   agentLabel: string;
   agentIcon: string;
   projectPath: string;
@@ -1443,14 +1792,24 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
   resumeMode?: boolean;
   resumeSessionId?: string;
   profileEnv?: Record<string, string>;
+  isPrimary?: boolean;
+  skipPermissions?: boolean;
+  persistentSession?: boolean;
+  boundSessionId?: string;
+  initialPos?: { x: number; y: number };
   onSessionReady?: (name: string) => void;
   onClose: (killSession: boolean) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const wsRef = useRef<WebSocket | null>(null);
   const sessionNameRef = useRef('');
-  const [pos, setPos] = useState({ x: 80, y: 60 });
-  const [size, setSize] = useState({ w: 750, h: 450 });
+  const [pos, setPos] = useState(initialPos || { x: 80, y: 60 });
+  const [userDragged, setUserDragged] = useState(false);
+  // Follow node position unless user manually dragged the terminal
+  useEffect(() => {
+    if (initialPos && !userDragged) setPos(initialPos);
+  }, [initialPos?.x, initialPos?.y]); // eslint-disable-line react-hooks/exhaustive-deps
+  const [size, setSize] = useState({ w: 500, h: 300 });
   const [showCloseDialog, setShowCloseDialog] = useState(false);
   const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
   const resizeRef = useRef<{ startX: number; startY: number; origW: number; origH: number } | null>(null);
@@ -1468,7 +1827,7 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
       if (disposed) return;
 
       const term = new Terminal({
-        cursorBlink: true, fontSize: 13,
+        cursorBlink: true, fontSize: 10,
         fontFamily: 'Menlo, Monaco, "Courier New", monospace',
         scrollback: 5000,
         theme: { background: '#0d1117', foreground: '#c9d1d9', cursor: '#58a6ff' },
@@ -1478,7 +1837,15 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
       term.open(el);
       setTimeout(() => { try { fitAddon.fit(); } catch {} }, 100);
 
-      const ro = new ResizeObserver(() => { try { fitAddon.fit(); } catch {} });
+      // Scale font: min 10 at small size, max 13 at large size
+      const ro = new ResizeObserver(() => {
+        try {
+          const w = el.clientWidth;
+          const newSize = Math.min(13, Math.max(10, Math.floor(w / 60)));
+          if (term.options.fontSize !== newSize) term.options.fontSize = newSize;
+          fitAddon.fit();
+        } catch {}
+      });
       ro.observe(el);
 
       // Connect WebSocket — attach to existing or create new
@@ -1501,7 +1868,7 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
       };
 
       let launched = false;
-      ws.onmessage = (event) => {
+      ws.onmessage = async (event) => {
         if (disposed) return;
         try {
           const msg = JSON.parse(event.data);
@@ -1543,18 +1910,30 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
 
             const cdCmd = `mkdir -p "${targetDir}" && cd "${targetDir}"`;
             const isClaude = (cliType || 'claude-code') === 'claude-code';
-            const resumeFlag = isClaude
-              ? (resumeSessionId ? ` --resume ${resumeSessionId}` : resumeMode ? ' -c' : '')
-              : '';
             const modelFlag = isClaude && profileEnv?.CLAUDE_MODEL ? ` --model ${profileEnv.CLAUDE_MODEL}` : '';
-            // Remove CLAUDE_MODEL from env exports (passed via --model flag instead)
             const envWithoutModel = profileEnv ? Object.fromEntries(
               Object.entries(profileEnv).filter(([k]) => k !== 'CLAUDE_MODEL')
             ) : {};
-            const envExportsClean = Object.keys(envWithoutModel).length > 0
+            // Unset old profile vars + set new ones (prevents leaking between agent switches)
+            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'];
+            const unsetPrefix = profileVarsToReset.map(v => `unset ${v}`).join(' && ') + ' && ';
+            const envExportsClean = unsetPrefix + (Object.keys(envWithoutModel).length > 0
               ? Object.entries(envWithoutModel).map(([k, v]) => `export ${k}="${v}"`).join(' && ') + ' && '
-              : '';
-            const cmd = `${envExportsClean}${cdCmd} && ${cli}${resumeFlag}${modelFlag}\n`;
+              : '');
+            // Primary: use fixed session. Non-primary: use explicit sessionId or -c
+            // Resolve session: explicit > boundSessionId > fixedSession (primary) > fresh
+            let resumeId = resumeSessionId || boundSessionId;
+            if (isClaude && !resumeId && isPrimary) {
+              try {
+                const { resolveFixedSession } = await import('@/lib/session-utils');
+                resumeId = (await resolveFixedSession(projectPath)) || undefined;
+              } catch {}
+            }
+            const resumeFlag = isClaude && resumeId ? ` --resume ${resumeId}` : '';
+            let mcpFlag = '';
+            if (isClaude) { try { const { getMcpFlag } = await import('@/lib/session-utils'); mcpFlag = await getMcpFlag(projectPath); } catch {} }
+            const sf = skipPermissions ? ' --dangerously-skip-permissions' : '';
+            const cmd = `${envExportsClean}${cdCmd} && ${cli}${resumeFlag}${modelFlag}${sf}${mcpFlag}\n`;
             setTimeout(() => {
               if (!disposed && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data: cmd }));
             }, 300);
@@ -1591,6 +1970,7 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
         onMouseDown={(e) => {
           e.preventDefault();
           dragRef.current = { startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y };
+          setUserDragged(true);
           const onMove = (ev: MouseEvent) => {
             if (!dragRef.current) return;
             setPos({ x: Math.max(0, dragRef.current.origX + ev.clientX - dragRef.current.startX), y: Math.max(0, dragRef.current.origY + ev.clientY - dragRef.current.startY) });
@@ -1642,7 +2022,7 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
               <button onClick={() => { setShowCloseDialog(false); onClose(false); }}
                 className="flex-1 px-3 py-1.5 text-[11px] rounded bg-[#2a2a4a] text-gray-300 hover:bg-[#3a3a5a] hover:text-white">
                 Suspend
-                <span className="block text-[9px] text-gray-500 mt-0.5">Session keeps running</span>
+                <span className="block text-[9px] text-gray-500 mt-0.5">Hide panel, session keeps running</span>
               </button>
               <button onClick={() => {
                 setShowCloseDialog(false);
@@ -1651,9 +2031,11 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
                 }
                 onClose(true);
               }}
-                className="flex-1 px-3 py-1.5 text-[11px] rounded bg-red-500/20 text-red-400 hover:bg-red-500/30">
-                Kill Session
-                <span className="block text-[9px] text-red-400/60 mt-0.5">End session, back to auto</span>
+                className={`flex-1 px-3 py-1.5 text-[11px] rounded ${persistentSession ? 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30' : 'bg-red-500/20 text-red-400 hover:bg-red-500/30'}`}>
+                {persistentSession ? 'Restart Session' : 'Kill Session'}
+                <span className={`block text-[9px] mt-0.5 ${persistentSession ? 'text-yellow-400/60' : 'text-red-400/60'}`}>
+                  {persistentSession ? 'Kill and restart with fresh env' : 'End session permanently'}
+                </span>
               </button>
             </div>
             <button onClick={() => setShowCloseDialog(false)}
@@ -1746,6 +2128,8 @@ interface AgentNodeData {
   state: AgentState;
   colorIdx: number;
   previewLines: string[];
+  projectPath: string;
+  workspaceId: string | null;
   onRun: () => void;
   onPause: () => void;
   onStop: () => void;
@@ -1758,22 +2142,26 @@ interface AgentNodeData {
   onShowMemory: () => void;
   onShowInbox: () => void;
   onOpenTerminal: () => void;
+  onSwitchSession: () => void;
   inboxPending?: number;
   inboxFailed?: number;
   [key: string]: unknown;
 }
 
+// PortalTerminal/NodeTerminal removed — xterm cannot render inside React Flow nodes
+// and createPortal causes event routing issues. Using FloatingTerminal instead.
+
 function AgentFlowNode({ data }: NodeProps<Node<AgentNodeData>>) {
-  const { config, state, colorIdx, previewLines, onRun, onPause, onStop, onRetry, onEdit, onRemove, onMessage, onApprove, onShowLog, onShowMemory, onShowInbox, onOpenTerminal, inboxPending = 0, inboxFailed = 0 } = data;
+  const { config, state, colorIdx, previewLines, projectPath, workspaceId, onRun, onPause, onStop, onRetry, onEdit, onRemove, onMessage, onApprove, onShowLog, onShowMemory, onShowInbox, onOpenTerminal, onSwitchSession, inboxPending = 0, inboxFailed = 0 } = data;
   const c = COLORS[colorIdx % COLORS.length];
   const smithStatus = state?.smithStatus || 'down';
   const taskStatus = state?.taskStatus || 'idle';
-  const mode = state?.mode || 'auto';
+  const hasTmux = !!state?.tmuxSession;
   const smithInfo = SMITH_STATUS[smithStatus] || SMITH_STATUS.down;
   const taskInfo = TASK_STATUS[taskStatus] || TASK_STATUS.idle;
   const currentStep = state?.currentStep;
   const step = currentStep !== undefined ? config.steps[currentStep] : undefined;
-  const isApprovalPending = taskStatus === 'idle' && smithStatus === 'active'; // approximation, actual check would use approvalQueue
+  const isApprovalPending = taskStatus === 'idle' && smithStatus === 'active';
 
   return (
     <div className="w-52 flex flex-col rounded-lg select-none"
@@ -1782,6 +2170,9 @@ function AgentFlowNode({ data }: NodeProps<Node<AgentNodeData>>) {
       <Handle type="target" position={Position.Left} style={{ background: c.accent, width: 8, height: 8, border: 'none' }} />
       <Handle type="source" position={Position.Right} style={{ background: c.accent, width: 8, height: 8, border: 'none' }} />
 
+      {/* Primary badge */}
+      {config.primary && <div className="bg-[#f0883e]/20 text-[#f0883e] text-[7px] font-bold text-center py-0.5 rounded-t-lg">PRIMARY</div>}
+
       {/* Header */}
       <div className="flex items-center gap-2 px-3 py-2">
         <span className="text-sm">{config.icon}</span>
@@ -1789,15 +2180,23 @@ function AgentFlowNode({ data }: NodeProps<Node<AgentNodeData>>) {
           <div className="text-xs font-semibold text-white truncate">{config.label}</div>
           <div className="text-[8px]" style={{ color: c.accent }}>{config.backend === 'api' ? config.provider || 'api' : config.agentId || 'cli'}</div>
         </div>
-        {/* Status: smith + mode + task */}
+        {/* Status: smith + terminal + task */}
         <div className="flex flex-col items-end gap-0.5">
           <div className="flex items-center gap-1">
             <div className="w-1.5 h-1.5 rounded-full" style={{ background: smithInfo.color, boxShadow: smithInfo.glow ? `0 0 4px ${smithInfo.color}` : 'none' }} />
             <span className="text-[7px]" style={{ color: smithInfo.color }}>{smithInfo.label}</span>
           </div>
           <div className="flex items-center gap-1">
-            <div className="w-1.5 h-1.5 rounded-full" style={{ background: mode === 'manual' ? '#d2a8ff' : '#30363d' }} />
-            <span className="text-[7px]" style={{ color: mode === 'manual' ? '#d2a8ff' : '#6e7681' }}>{mode}</span>
+            {(() => {
+              // Execution mode is determined by config, not tmux state
+              const isTerminalMode = config.persistentSession;
+              const color = isTerminalMode ? (hasTmux ? '#3fb950' : '#f0883e') : '#484f58';
+              const label = isTerminalMode ? (hasTmux ? 'terminal' : 'terminal (down)') : 'headless';
+              return (<>
+                <div className="w-1.5 h-1.5 rounded-full" style={{ background: color }} />
+                <span className="text-[7px] font-medium" style={{ color }}>{label}</span>
+              </>);
+            })()}
           </div>
           <div className="flex items-center gap-1">
             <div className="w-1.5 h-1.5 rounded-full" style={{ background: taskInfo.color, boxShadow: taskInfo.glow ? `0 0 4px ${taskInfo.color}` : 'none' }} />
@@ -1861,10 +2260,15 @@ function AgentFlowNode({ data }: NodeProps<Node<AgentNodeData>>) {
             className="text-[9px] px-1.5 py-0.5 rounded bg-blue-600/20 text-blue-400 hover:bg-blue-600/30">💬 Message</button>
         )}
         <div className="flex-1" />
-        {taskStatus !== 'running' && (
-          <button onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); onOpenTerminal(); }}
-            className="text-[9px] text-gray-600 hover:text-green-400 px-1" title="Open terminal (manual mode)">⌨️</button>
-        )}
+        <span className="flex items-center">
+            <button onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); onOpenTerminal(); }}
+              className={`text-[9px] px-1 ${hasTmux && taskStatus === 'running' ? 'text-green-400 animate-pulse' : 'text-gray-600 hover:text-green-400'}`}
+              title="Open terminal">⌨️</button>
+            {hasTmux && !config.primary && (
+              <button onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); onSwitchSession(); }}
+                className="text-[10px] text-gray-600 hover:text-yellow-400 px-0.5 py-0.5" title="Switch session">▾</button>
+            )}
+          </span>
         <button onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); onShowInbox(); }}
           className="text-[9px] text-gray-600 hover:text-orange-400 px-1" title="Messages (inbox/outbox)">📨</button>
         <button onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); onShowMemory(); }}
@@ -1904,8 +2308,8 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
   const [memoryTarget, setMemoryTarget] = useState<{ id: string; label: string } | null>(null);
   const [inboxTarget, setInboxTarget] = useState<{ id: string; label: string } | null>(null);
   const [showBusPanel, setShowBusPanel] = useState(false);
-  const [floatingTerminals, setFloatingTerminals] = useState<{ agentId: string; label: string; icon: string; cliId: string; cliCmd?: string; cliType?: string; workDir?: string; tmuxSession?: string; sessionName: string; resumeMode?: boolean; resumeSessionId?: string; profileEnv?: Record<string, string> }[]>([]);
-  const [termLaunchDialog, setTermLaunchDialog] = useState<{ agent: AgentConfig; sessName: string; workDir?: string; sessions: string[]; supportsSession?: boolean } | null>(null);
+  const [floatingTerminals, setFloatingTerminals] = useState<{ agentId: string; label: string; icon: string; cliId: string; cliCmd?: string; cliType?: string; workDir?: string; tmuxSession?: string; sessionName: string; resumeMode?: boolean; resumeSessionId?: string; profileEnv?: Record<string, string>; isPrimary?: boolean; skipPermissions?: boolean; persistentSession?: boolean; boundSessionId?: string; initialPos?: { x: number; y: number } }[]>([]);
+  const [termLaunchDialog, setTermLaunchDialog] = useState<{ agent: AgentConfig; sessName: string; workDir?: string; sessions: string[]; supportsSession?: boolean; initialPos?: { x: number; y: number } } | null>(null);
 
   // Expose focusAgent to parent
   useImperativeHandle(ref, () => ({
@@ -1938,27 +2342,8 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
     }
   });
 
-  // Auto-open floating terminals for manual agents on page load
-  const autoOpenDone = useRef(false);
-  useEffect(() => {
-    if (autoOpenDone.current || agents.length === 0 || Object.keys(states).length === 0) return;
-    autoOpenDone.current = true;
-    const manualAgents = agents.filter(a =>
-      a.type !== 'input' && states[a.id]?.mode === 'manual' && states[a.id]?.tmuxSession
-    );
-    if (manualAgents.length > 0) {
-      const safeName = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').slice(0, 20);
-      setFloatingTerminals(manualAgents.map(a => ({
-        agentId: a.id,
-        label: a.label,
-        icon: a.icon,
-        cliId: a.agentId || 'claude',
-        workDir: a.workDir && a.workDir !== './' && a.workDir !== '.' ? a.workDir : undefined,
-        tmuxSession: states[a.id].tmuxSession,
-        sessionName: `mw-forge-${safeName(projectName)}-${safeName(a.label)}`,
-      })));
-    }
-  }, [agents, states]);
+  // Auto-open terminals removed — persistent sessions run in background tmux.
+  // User opens terminal via ⌨️ button when needed.
 
   // Rebuild nodes when agents/states/preview change — preserve existing positions + dimensions
   useEffect(() => {
@@ -1980,7 +2365,7 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
             type: 'input' as const,
             data: {
               config: agent,
-              state: states[agent.id] || { smithStatus: 'down', mode: 'auto', taskStatus: 'idle', artifacts: [] },
+              state: states[agent.id] || { smithStatus: 'down', taskStatus: 'idle', artifacts: [] },
               onSubmit: (content: string) => {
                 // Optimistic update
                 wsApi(workspaceId!, 'complete_input', { agentId: agent.id, content });
@@ -2000,9 +2385,11 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
           type: 'agent' as const,
           data: {
             config: agent,
-            state: states[agent.id] || { smithStatus: 'down', mode: 'auto', taskStatus: 'idle', artifacts: [] },
+            state: states[agent.id] || { smithStatus: 'down', taskStatus: 'idle', artifacts: [] },
             colorIdx: i,
             previewLines: logPreview[agent.id] || [],
+            projectPath,
+            workspaceId,
             onRun: () => {
               wsApi(workspaceId!, 'run', { agentId: agent.id });
             },
@@ -2023,36 +2410,91 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
             inboxFailed: busLog.filter(m => m.to === agent.id && m.status === 'failed' && m.type !== 'ack').length,
             onOpenTerminal: async () => {
               if (!workspaceId) return;
-              // Use current state via setState callback to avoid stale closure
-              let alreadyOpen = false;
-              setFloatingTerminals(prev => { alreadyOpen = prev.some(t => t.agentId === agent.id); return prev; });
-              if (alreadyOpen) return;
+              if (!daemonActiveFromStream) {
+                alert('Start daemon first before opening terminal.');
+                return;
+              }
+              // Close existing terminal (config may have changed)
+              setFloatingTerminals(prev => prev.filter(t => t.agentId !== agent.id));
+
+              // Get node screen position for initial terminal placement
+              const nodeEl = document.querySelector(`[data-id="${agent.id}"]`);
+              const nodeRect = nodeEl?.getBoundingClientRect();
+              const initialPos = nodeRect
+                ? { x: nodeRect.left, y: nodeRect.bottom + 4 }
+                : { x: 80, y: 60 };
 
               const agentState = states[agent.id];
               const existingTmux = agentState?.tmuxSession;
-
-              // Build fixed session name: mw-forge-{project}-{agentLabel}
               const safeName = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').slice(0, 20);
               const sessName = `mw-forge-${safeName(projectName)}-${safeName(agent.label)}`;
-              const workDir = agent.workDir && agent.workDir !== './' && agent.workDir !== '.'
-                ? agent.workDir : undefined;
+              const workDir = agent.workDir && agent.workDir !== './' && agent.workDir !== '.' ? agent.workDir : undefined;
+
+              // Always resolve launch info for this agent (cliCmd, env, model)
+              const resolveRes = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id, resolveOnly: true }).catch(() => ({})) as any;
+              const launchInfo = {
+                cliCmd: resolveRes?.cliCmd || 'claude',
+                cliType: resolveRes?.cliType || 'claude-code',
+                profileEnv: {
+                  ...(resolveRes?.env || {}),
+                  ...(resolveRes?.model ? { CLAUDE_MODEL: resolveRes.model } : {}),
+                  FORGE_AGENT_ID: agent.id,
+                  FORGE_WORKSPACE_ID: workspaceId!,
+                  FORGE_PORT: String(window.location.port || 8403),
+                },
+              };
 
-              // If already manual with a tmux session, just reopen (attach)
-              if (agentState?.mode === 'manual' && existingTmux) {
+              // If tmux session exists → attach (primary or non-primary)
+              if (existingTmux) {
+                wsApi(workspaceId, 'open_terminal', { agentId: agent.id });
                 setFloatingTerminals(prev => [...prev, {
                   agentId: agent.id, label: agent.label, icon: agent.icon,
-                  cliId: agent.agentId || 'claude', workDir,
+                  cliId: agent.agentId || 'claude', ...launchInfo, workDir,
                   tmuxSession: existingTmux, sessionName: sessName,
+                  isPrimary: agent.primary, skipPermissions: agent.skipPermissions !== false, persistentSession: agent.persistentSession, boundSessionId: agent.boundSessionId, initialPos,
                 }]);
                 return;
               }
 
-              // Resolve terminal launch info to determine supportsSession
-              const resolveRes = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id, resolveOnly: true }).catch(() => ({})) as any;
-              const supportsSession = resolveRes?.supportsSession ?? true;
+              // Primary without session → open directly (no dialog)
+              if (agent.primary) {
+                const res = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id }).catch(() => ({})) as any;
+                setFloatingTerminals(prev => [...prev, {
+                  agentId: agent.id, label: agent.label, icon: agent.icon,
+                  cliId: agent.agentId || 'claude', ...launchInfo, workDir,
+                  tmuxSession: res?.tmuxSession || sessName, sessionName: sessName,
+                  isPrimary: true, skipPermissions: agent.skipPermissions !== false, persistentSession: agent.persistentSession, boundSessionId: agent.boundSessionId, initialPos,
+                }]);
+                return;
+              }
 
-              // Show launch dialog with resolved info
-              setTermLaunchDialog({ agent, sessName, workDir, sessions: [], supportsSession });
+              // Non-primary: has boundSessionId → use it directly; no bound → show dialog
+              if (agent.boundSessionId) {
+                const res = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id }).catch(() => ({})) as any;
+                setFloatingTerminals(prev => [...prev, {
+                  agentId: agent.id, label: agent.label, icon: agent.icon,
+                  cliId: agent.agentId || 'claude', ...launchInfo, workDir,
+                  tmuxSession: res?.tmuxSession || sessName, sessionName: sessName,
+                  resumeSessionId: agent.boundSessionId,
+                  isPrimary: false, skipPermissions: agent.skipPermissions !== false, persistentSession: agent.persistentSession, boundSessionId: agent.boundSessionId, initialPos,
+                }]);
+                return;
+              }
+              // No bound session → show launch dialog (New / Resume / Select)
+              setTermLaunchDialog({ agent, sessName, workDir, sessions: [], supportsSession: resolveRes?.supportsSession ?? true, initialPos });
+            },
+            onSwitchSession: async () => {
+              if (!workspaceId) return;
+              setFloatingTerminals(prev => prev.filter(t => t.agentId !== agent.id));
+              if (agent.id) wsApi(workspaceId, 'close_terminal', { agentId: agent.id });
+              const nodeEl = document.querySelector(`[data-id="${agent.id}"]`);
+              const nodeRect = nodeEl?.getBoundingClientRect();
+              const switchPos = nodeRect ? { x: nodeRect.left, y: nodeRect.bottom + 4 } : { x: 80, y: 60 };
+              const safeName = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').slice(0, 20);
+              const sessName = `mw-forge-${safeName(projectName)}-${safeName(agent.label)}`;
+              const workDir = agent.workDir && agent.workDir !== './' && agent.workDir !== '.' ? agent.workDir : undefined;
+              const resolveRes = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id, resolveOnly: true }).catch(() => ({})) as any;
+              setTermLaunchDialog({ agent, sessName, workDir, sessions: [], supportsSession: resolveRes?.supportsSession ?? true, initialPos: switchPos });
             },
           } satisfies AgentNodeData,
         };
@@ -2244,8 +2686,22 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
       {agents.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center gap-3">
           <span className="text-3xl">🚀</span>
-          <div className="text-sm text-gray-400">Add agents to start</div>
-          <div className="flex gap-2 mt-2 flex-wrap justify-center">
+          <div className="text-sm text-gray-400">Set up your workspace</div>
+          {/* Primary agent prompt */}
+          <button onClick={() => setModal({ mode: 'add', initial: {
+            label: 'Engineer', icon: '👨‍💻', primary: true, persistentSession: true,
+            role: 'Primary engineer — handles coding tasks in the project root.',
+            backend: 'cli' as const, agentId: 'claude', workDir: './', dependsOn: [], outputs: [], steps: [],
+          }})}
+            className="flex items-center gap-3 px-5 py-3 rounded-lg border-2 border-dashed border-[#f0883e]/50 bg-[#f0883e]/5 hover:bg-[#f0883e]/10 hover:border-[#f0883e]/80 transition-colors">
+            <span className="text-2xl">👨‍💻</span>
+            <div className="text-left">
+              <div className="text-[11px] font-semibold text-[#f0883e]">Add Primary Agent</div>
+              <div className="text-[9px] text-gray-500">Terminal-only, root directory, fixed session</div>
+            </div>
+          </button>
+          <div className="text-[9px] text-gray-600 mt-1">or add other agents:</div>
+          <div className="flex gap-2 flex-wrap justify-center">
             {PRESET_AGENTS.map((p, i) => (
               <button key={i} onClick={() => setModal({ mode: 'add', initial: p })}
                 className="text-[10px] px-3 py-1.5 rounded border border-[#30363d] text-gray-300 hover:text-white hover:border-[#58a6ff]/60 flex items-center gap-1">
@@ -2273,11 +2729,40 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
           </div>
         </div>
       ) : (
-        <div className="flex-1 min-h-0">
+        <div className="flex-1 min-h-0 flex flex-col">
+          {/* No primary agent hint */}
+          {!agents.some(a => a.primary) && (
+            <div className="flex items-center gap-2 px-3 py-1.5 bg-[#f0883e]/10 border-b border-[#f0883e]/20 shrink-0">
+              <span className="text-[10px] text-[#f0883e]">No primary agent set.</span>
+              <button onClick={() => setModal({ mode: 'add', initial: {
+                label: 'Engineer', icon: '👨‍💻', primary: true, persistentSession: true,
+                role: 'Primary engineer — handles coding tasks in the project root.',
+                backend: 'cli' as const, agentId: 'claude', workDir: './', dependsOn: [], outputs: [], steps: [],
+              }})}
+                className="text-[10px] text-[#f0883e] underline hover:text-white">Add one</button>
+              <span className="text-[9px] text-gray-600">or edit an existing agent to set as primary.</span>
+            </div>
+          )}
           <ReactFlow
             nodes={rfNodes}
             edges={rfEdges}
             onNodesChange={onNodesChange}
+            onNodeDragStop={() => {
+              // Reposition terminals to follow their nodes
+              setFloatingTerminals(prev => prev.map(ft => {
+                const nodeEl = document.querySelector(`[data-id="${ft.agentId}"]`);
+                const rect = nodeEl?.getBoundingClientRect();
+                return rect ? { ...ft, initialPos: { x: rect.left, y: rect.bottom + 4 } } : ft;
+              }));
+            }}
+            onMoveEnd={() => {
+              // Reposition after pan/zoom
+              setFloatingTerminals(prev => prev.map(ft => {
+                const nodeEl = document.querySelector(`[data-id="${ft.agentId}"]`);
+                const rect = nodeEl?.getBoundingClientRect();
+                return rect ? { ...ft, initialPos: { x: rect.left, y: rect.bottom + 4 } } : ft;
+              }));
+            }}
             nodeTypes={nodeTypes}
             fitView
             fitViewOptions={{ padding: 0.3 }}
@@ -2378,13 +2863,17 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
             setTermLaunchDialog(null);
             const res = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id });
             if (res.ok) {
+              // Save selected session as boundSessionId if user chose a specific one
+              if (sessionId) {
+                wsApi(workspaceId, 'update', { agentId: agent.id, config: { ...agent, boundSessionId: sessionId } }).catch(() => {});
+              }
               setFloatingTerminals(prev => [...prev, {
                 agentId: agent.id, label: agent.label, icon: agent.icon,
                 cliId: agent.agentId || 'claude',
                 cliCmd: res.cliCmd || 'claude',
                 cliType: res.cliType || 'claude-code',
                 workDir,
-                sessionName: sessName, resumeMode, resumeSessionId: sessionId,
+                sessionName: sessName, resumeMode, resumeSessionId: sessionId, isPrimary: false, skipPermissions: agent.skipPermissions !== false, persistentSession: agent.persistentSession, boundSessionId: sessionId || agent.boundSessionId, initialPos: termLaunchDialog.initialPos,
                 profileEnv: {
                   ...(res.env || {}),
                   ...(res.model ? { CLAUDE_MODEL: res.model } : {}),
@@ -2399,7 +2888,7 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
         />
       )}
 
-      {/* Floating terminals for manual agents */}
+      {/* Floating terminals — positioned near their agent node */}
       {floatingTerminals.map(ft => (
         <FloatingTerminal
           key={ft.agentId}
@@ -2415,17 +2904,18 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
           resumeMode={ft.resumeMode}
           resumeSessionId={ft.resumeSessionId}
           profileEnv={ft.profileEnv}
+          isPrimary={ft.isPrimary}
+          skipPermissions={ft.skipPermissions}
+          persistentSession={ft.persistentSession}
+          boundSessionId={ft.boundSessionId}
+          initialPos={ft.initialPos}
           onSessionReady={(name) => {
-            if (workspaceId) {
-              wsApi(workspaceId, 'set_tmux_session', { agentId: ft.agentId, sessionName: name });
-            }
+            if (workspaceId) wsApi(workspaceId, 'set_tmux_session', { agentId: ft.agentId, sessionName: name });
             setFloatingTerminals(prev => prev.map(t => t.agentId === ft.agentId ? { ...t, tmuxSession: name } : t));
           }}
-          onClose={() => {
+          onClose={(killSession) => {
             setFloatingTerminals(prev => prev.filter(t => t.agentId !== ft.agentId));
-            if (workspaceId) {
-              wsApi(workspaceId, 'close_terminal', { agentId: ft.agentId });
-            }
+            if (workspaceId) wsApi(workspaceId, 'close_terminal', { agentId: ft.agentId, kill: killSession });
           }}
         />
       ))}