@aion0/forge 0.5.49 → 0.5.50

package/components/CraftTabs.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+// Renders a single craft as a tab. Lazy-imports the craft's transpiled UI module.
+
+import React, { useEffect, useState, useRef, lazy, Suspense, useCallback } from 'react';
+import * as ReactJsxRuntime from 'react/jsx-runtime';
+import { CraftSDKProvider, getSDK, setGlobalToast } from '@/lib/craft-sdk/client';
+
+const CraftTerminalLazy = lazy(() => import('./CraftTerminal'));
+const CraftTerminalPickerLazy = lazy(() => import('./CraftTerminalPicker'));
+
+interface CraftTermChoice {
+  agentId: string;
+  resumeSessionId?: string;
+}
+function termChoiceKey(projectPath: string, craftName: string): string {
+  return `forge.craft.term.${projectPath}::${craftName}`;
+}
+function termOpenKey(projectPath: string, craftName: string): string {
+  return `forge.craft.term-open.${projectPath}::${craftName}`;
+}
+function loadTermChoice(projectPath: string, craftName: string): CraftTermChoice | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = localStorage.getItem(termChoiceKey(projectPath, craftName));
+    return raw ? JSON.parse(raw) : null;
+  } catch { return null; }
+}
+function saveTermChoice(projectPath: string, craftName: string, c: CraftTermChoice) {
+  try { localStorage.setItem(termChoiceKey(projectPath, craftName), JSON.stringify(c)); } catch {}
+}
+function loadTermOpen(projectPath: string, craftName: string): boolean {
+  if (typeof window === 'undefined') return false;
+  return localStorage.getItem(termOpenKey(projectPath, craftName)) === '1';
+}
+function saveTermOpen(projectPath: string, craftName: string, open: boolean) {
+  try {
+    if (open) localStorage.setItem(termOpenKey(projectPath, craftName), '1');
+    else localStorage.removeItem(termOpenKey(projectPath, craftName));
+  } catch {}
+}
+
+export interface CraftSummary {
+  name: string;
+  displayName: string;
+  icon?: string;
+  description?: string;
+  scope: 'builtin' | 'project';
+  hasUi: boolean;
+  hasServer: boolean;
+  dir?: string;
+  preferredSessionName?: string;
+}
+
+// Install the host's React + JSX runtime on window so craft modules can grab them.
+let runtimeInstalled = false;
+function installRuntime() {
+  if (runtimeInstalled || typeof window === 'undefined') return;
+  (window as any).__forge_react = React;
+  (window as any).__forge_jsx = ReactJsxRuntime;
+  (window as any).__forge_sdk = getSDK();
+  // Minimal toast — DOM injected so crafts get something instead of console.log.
+  setGlobalToast((msg, kind = 'info') => {
+    const el = document.createElement('div');
+    const colors = kind === 'error' ? 'background:#7f1d1d;color:#fecaca' : kind === 'success' ? 'background:#064e3b;color:#a7f3d0' : 'background:#1f2937;color:#e5e7eb';
+    el.setAttribute('style', `position:fixed;top:1rem;left:50%;transform:translateX(-50%);${colors};padding:6px 14px;border-radius:6px;font-size:12px;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.4);`);
+    el.textContent = msg;
+    document.body.appendChild(el);
+    setTimeout(() => el.remove(), 2500);
+  });
+  runtimeInstalled = true;
+}
+
+interface Props {
+  craft: CraftSummary;
+  projectPath: string;
+  projectName: string;
+}
+
+// Persisted split ratio (UI height fraction; rest is terminal)
+const SPLIT_KEY = 'forge.craft.split';
+const DEFAULT_SPLIT = 0.6;
+
+export function CraftTab({ craft, projectPath, projectName }: Props) {
+  const [Comp, setComp] = useState<React.ComponentType | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [reloadTick, setReloadTick] = useState(0);
+  const [split, setSplit] = useState<number>(() => {
+    if (typeof window === 'undefined') return DEFAULT_SPLIT;
+    const v = parseFloat(localStorage.getItem(SPLIT_KEY) || '');
+    return isFinite(v) && v > 0.15 && v < 0.95 ? v : DEFAULT_SPLIT;
+  });
+  // Terminal panel state — persisted per craft so toggling tabs/closing browser
+  // doesn't lose what the user had open.
+  const [termChoice, setTermChoice] = useState<CraftTermChoice | null>(() => loadTermChoice(projectPath, craft.name));
+  const [showTerm, setShowTermState] = useState<boolean>(() => {
+    // If we have a saved choice + previously was open, restore. Otherwise hidden.
+    return loadTermChoice(projectPath, craft.name) != null && loadTermOpen(projectPath, craft.name);
+  });
+  const setShowTerm = useCallback((v: boolean) => {
+    setShowTermState(v);
+    saveTermOpen(projectPath, craft.name, v);
+  }, [projectPath, craft.name]);
+  const [pickerOpen, setPickerOpen] = useState<boolean>(false);
+  const mountedRef = useRef(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const draggingRef = useRef(false);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    installRuntime();
+    let cancelled = false;
+    (async () => {
+      try {
+        const url = `/api/craft-system/ui?projectPath=${encodeURIComponent(projectPath)}&name=${encodeURIComponent(craft.name)}&t=${Date.now()}`;
+        // eslint-disable-next-line @next/next/no-assign-module-variable
+        const mod = await import(/* webpackIgnore: true */ url);
+        if (cancelled) return;
+        const C = mod.default || mod.Tab;
+        if (!C) throw new Error(`Craft ${craft.name} did not export a default component`);
+        setComp(() => C);
+        setError(null);
+      } catch (e: any) {
+        if (cancelled) return;
+        setError(e?.message || String(e));
+      }
+    })();
+    return () => { cancelled = true; mountedRef.current = false; };
+  }, [craft.name, projectPath, reloadTick]);
+
+  const onDragStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    draggingRef.current = true;
+    const onMove = (ev: MouseEvent) => {
+      if (!draggingRef.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const ratio = (ev.clientY - rect.top) / rect.height;
+      const clamped = Math.max(0.15, Math.min(0.9, ratio));
+      setSplit(clamped);
+    };
+    const onUp = () => {
+      draggingRef.current = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      try { localStorage.setItem(SPLIT_KEY, String(split)); } catch {}
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }, [split]);
+
+  // Persist on change
+  useEffect(() => { try { localStorage.setItem(SPLIT_KEY, String(split)); } catch {} }, [split]);
+
+  const uiPanel = (
+    error ? (
+      <div className="p-4 text-xs text-red-300 font-mono whitespace-pre-wrap h-full overflow-auto">
+        Failed to load craft: {error}
+        <div className="mt-2"><button onClick={() => setReloadTick(t => t + 1)} className="text-[10px] px-2 py-0.5 rounded bg-[var(--accent)]/20 text-[var(--accent)]">↻ Retry</button></div>
+      </div>
+    ) : !Comp ? (
+      <div className="p-4 text-xs text-[var(--text-secondary)]">Loading craft…</div>
+    ) : (
+      <CraftSDKProvider projectPath={projectPath} projectName={projectName} craftName={craft.name}>
+        <div className="h-full flex flex-col min-h-0 overflow-hidden">
+          <Comp />
+        </div>
+      </CraftSDKProvider>
+    )
+  );
+
+  return (
+    <div ref={containerRef} className="flex-1 flex flex-col min-h-0 overflow-hidden relative">
+      {/* Header strip with hot-reload + show/hide terminal */}
+      <div className="px-3 py-1 border-b border-[var(--border)] flex items-center gap-2 text-[10px] bg-[var(--bg-secondary)]/30 shrink-0">
+        <span className="text-[var(--text-secondary)]">{craft.dir || `<project>/.forge/crafts/${craft.name}`}</span>
+        <div className="flex-1" />
+        <button onClick={() => setReloadTick(t => t + 1)}
+          className="px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:text-[var(--accent)] hover:bg-[var(--bg-tertiary)]"
+          title="Re-fetch ui.tsx (after agent edits)">↻ reload</button>
+        {!showTerm && (
+          <button onClick={() => setPickerOpen(true)}
+            className="px-1.5 py-0.5 rounded text-[var(--text-secondary)] hover:text-[var(--accent)] hover:bg-[var(--bg-tertiary)]"
+            title="Open terminal — pick agent + session">
+            ⊞ open terminal
+          </button>
+        )}
+      </div>
+
+      {/* Top: UI */}
+      <div className="overflow-hidden" style={{ height: showTerm ? `${split * 100}%` : '100%' }}>
+        {uiPanel}
+      </div>
+
+      {/* Drag handle + bottom: terminal */}
+      {showTerm && termChoice && (
+        <>
+          <div onMouseDown={onDragStart}
+            className="h-1 cursor-row-resize bg-[var(--border)] hover:bg-[var(--accent)] transition-colors shrink-0" />
+          <div className="overflow-hidden" style={{ height: `${(1 - split) * 100}%` }}>
+            <Suspense fallback={<div className="p-2 text-[10px] text-[var(--text-secondary)]">Loading terminal…</div>}>
+              <CraftTerminalLazy
+                projectPath={projectPath}
+                craftName={craft.name}
+                craftDisplayName={craft.displayName}
+                preferredSessionName={craft.preferredSessionName || `mw-craft-${craft.name}`}
+                craftDir={craft.dir || `${projectPath}/.forge/crafts/${craft.name}`}
+                initialAgentId={termChoice.agentId}
+                initialResumeSessionId={termChoice.resumeSessionId}
+                onPickAgain={() => setPickerOpen(true)}
+                onHide={() => setShowTerm(false)}
+                onClose={async () => {
+                  const sn = craft.preferredSessionName || `mw-craft-${craft.name}`;
+                  if (!confirm(`Close terminal for "${craft.displayName}"?\n\nThis kills the tmux session ${sn} and stops any agent running there. The craft files stay untouched.`)) return;
+                  try {
+                    await fetch('/api/craft-system/kill-session', {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({ sessionName: sn }),
+                    });
+                  } catch {}
+                  try { localStorage.removeItem(termChoiceKey(projectPath, craft.name)); } catch {}
+                  setTermChoice(null);
+                  setShowTerm(false);
+                }}
+              />
+            </Suspense>
+          </div>
+        </>
+      )}
+
+      {/* Picker overlay */}
+      {pickerOpen && (
+        <Suspense fallback={null}>
+          <CraftTerminalPickerLazy
+            projectName={projectName}
+            craftDir={craft.dir || `${projectPath}/.forge/crafts/${craft.name}`}
+            defaultAgentId={termChoice?.agentId}
+            onPick={async (c) => {
+              const next: CraftTermChoice = {
+                agentId: c.agentId,
+                resumeSessionId: c.sessionMode === 'new' ? undefined : c.sessionId,
+              };
+              const sessionName = craft.preferredSessionName || `mw-craft-${craft.name}`;
+              const wasShowing = showTerm;
+              const choiceChanged = !termChoice
+                || termChoice.agentId !== next.agentId
+                || termChoice.resumeSessionId !== next.resumeSessionId;
+
+              // Tear down existing tmux session so CraftTerminal can recreate
+              // it with the chosen agent + --resume flag. The cleanupOrphans
+              // exemption keeps craft sessions alive otherwise.
+              if (choiceChanged) {
+                try {
+                  await fetch('/api/craft-system/kill-session', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ sessionName }),
+                  });
+                } catch {}
+              }
+
+              saveTermChoice(projectPath, craft.name, next);
+              setPickerOpen(false);
+              if (choiceChanged && wasShowing) {
+                // Force-remount CraftTerminal with the new choice
+                setShowTerm(false);
+                setTimeout(() => { setTermChoice(next); setShowTerm(true); }, 50);
+              } else {
+                setTermChoice(next);
+                setShowTerm(true);
+              }
+            }}
+            onCancel={() => setPickerOpen(false)}
+          />
+        </Suspense>
+      )}
+    </div>
+  );
+}

package/components/CraftTerminal.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+// Bottom-panel tmux terminal pinned to one craft. Attaches to the craft's
+// session if it exists; otherwise creates it on demand with the chosen agent.
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+
+function getWsUrl() {
+  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '8404')}`;
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const host = window.location.hostname;
+  if (host !== 'localhost' && host !== '127.0.0.1') {
+    return `${proto}//${window.location.host}/terminal-ws`;
+  }
+  const webPort = parseInt(window.location.port) || 8403;
+  return `${proto}//${host}:${webPort + 1}`;
+}
+
+interface AgentSummary { id: string; name?: string; path?: string; }
+
+export interface CraftTerminalProps {
+  projectPath: string;
+  craftName: string;
+  craftDisplayName?: string;
+  preferredSessionName: string;     // e.g. mw-craft-<hash>-<name>; component will create if missing
+  craftDir: string;                 // <project>/.forge/crafts/<name>/
+  // Initial agent + session choice from the picker. Used when CraftTerminal
+  // has to create a fresh tmux session and start the agent CLI.
+  initialAgentId?: string;
+  initialResumeSessionId?: string;
+  onPickAgain?: () => void;         // toolbar handler — re-open the picker
+  onHide?: () => void;              // hide panel (preserve tmux + agent)
+  onClose?: () => void;             // close = kill tmux + clear choice
+}
+
+export default function CraftTerminal({
+  projectPath, craftName, craftDisplayName, preferredSessionName, craftDir,
+  initialAgentId, initialResumeSessionId, onPickAgain, onHide, onClose,
+}: CraftTerminalProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const termRef = useRef<Terminal | null>(null);
+  const [connected, setConnected] = useState(false);
+  const [activeSession, setActiveSession] = useState(preferredSessionName);
+  const activeSessionRef = useRef(activeSession);
+  const [sessions, setSessions] = useState<{ name: string; cwd?: string; attached: boolean }[]>([]);
+  const [agents, setAgents] = useState<AgentSummary[]>([]);
+  const [agentId, setAgentId] = useState<string>('');
+  const skipPermRef = useRef(true);
+  const [showPicker, setShowPicker] = useState(false);
+
+  // Refs that the WS message handler can read at fire time (avoids closure
+  // staleness — agents/agentId load async, but the handler runs right after
+  // the tmux session is created which is before the fetch settles).
+  const agentsRef = useRef<AgentSummary[]>([]);
+  const agentIdRef = useRef<string>('');
+  const resumeIdRef = useRef<string | undefined>(initialResumeSessionId);
+
+  activeSessionRef.current = activeSession;
+  agentsRef.current = agents;
+  agentIdRef.current = agentId;
+  resumeIdRef.current = initialResumeSessionId;
+
+  // Load sessions + agents
+  const refreshSessions = useCallback(async () => {
+    try {
+      const r = await fetch(`/api/craft-system/tmux-sessions?projectPath=${encodeURIComponent(projectPath)}`);
+      if (!r.ok) return;
+      const j = await r.json();
+      setSessions([...(j.matches || []), ...(j.others || [])]);
+    } catch {}
+  }, [projectPath]);
+
+  useEffect(() => { refreshSessions(); }, [refreshSessions]);
+
+  useEffect(() => {
+    fetch('/api/agents')
+      .then(r => r.ok ? r.json() : { agents: [] })
+      .then((res: any) => {
+        const list = (res.agents || []).filter((a: any) => a.enabled !== false);
+        setAgents(list);
+        const wanted = initialAgentId || res.defaultAgent;
+        const def = wanted && list.find((a: any) => a.id === wanted) ? wanted : list[0]?.id || '';
+        setAgentId(def);
+      });
+    fetch('/api/settings').then(r => r.ok ? r.json() : null).then((s: any) => { if (s?.skipPermissions === false) skipPermRef.current = false; });
+  }, [initialAgentId]);
+
+  // Mount xterm + connect
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let disposed = false;
+    let reconnectTimer = 0;
+
+    const cs = getComputedStyle(document.documentElement);
+    const tv = (n: string) => cs.getPropertyValue(n).trim();
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 12,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      scrollback: 5000,
+      logger: { trace: () => {}, debug: () => {}, info: () => {}, warn: () => {}, error: () => {} },
+      theme: {
+        background: tv('--term-bg') || '#0d1117',
+        foreground: tv('--term-fg') || '#e0e0e0',
+        cursor: tv('--term-cursor') || '#7c5bf0',
+        selectionBackground: (tv('--term-cursor') || '#7c5bf0') + '44',
+      },
+    });
+    termRef.current = term;
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.open(containerRef.current);
+    try { fit.fit(); } catch {}
+
+    function connect() {
+      if (disposed) return;
+      const ws = new WebSocket(getWsUrl());
+      wsRef.current = ws;
+      let pendingCreate = false;
+
+      ws.onopen = () => {
+        if (disposed) { ws.close(); return; }
+        ws.send(JSON.stringify({ type: 'attach', sessionName: activeSessionRef.current, cols: term.cols, rows: term.rows }));
+      };
+      ws.onmessage = ev => {
+        if (disposed) return;
+        try {
+          const msg = JSON.parse(ev.data);
+          if (msg.type === 'output') { try { term.write(msg.data); } catch {} }
+          else if (msg.type === 'connected') setConnected(true);
+          else if (msg.type === 'error') {
+            // Session doesn't exist — create it on demand
+            if (!pendingCreate) {
+              pendingCreate = true;
+              ws.send(JSON.stringify({ type: 'create', sessionName: activeSessionRef.current, cols: term.cols, rows: term.rows }));
+              // After creation, cd into craft dir and start the chosen agent
+              // Wait until agents fetch settles so we can pick the right CLI + resume flag
+              const tryLaunch = (attempt = 0) => {
+                if (ws.readyState !== WebSocket.OPEN) return;
+                const list = agentsRef.current;
+                const id = agentIdRef.current;
+                if (list.length === 0 && attempt < 10) {
+                  setTimeout(() => tryLaunch(attempt + 1), 200);
+                  return;
+                }
+                const a = list.find(x => x.id === id) || list[0];
+                const cli = a?.path || a?.id || 'claude';
+                const isClaude = (a?.id === 'claude') || (a as any)?.cliType === 'claude-code';
+                const sf = (isClaude && skipPermRef.current) ? ' --dangerously-skip-permissions' : '';
+                const resume = resumeIdRef.current && isClaude ? ` --resume ${resumeIdRef.current}` : '';
+                ws.send(JSON.stringify({ type: 'input', data: `cd "${craftDir}" && ${cli}${sf}${resume}\n` }));
+              };
+              setTimeout(() => tryLaunch(), 500);
+            }
+          }
+        } catch {}
+      };
+      ws.onclose = () => {
+        if (disposed) return;
+        setConnected(false);
+        reconnectTimer = window.setTimeout(connect, 2000);
+      };
+    }
+    connect();
+
+    term.onData(d => {
+      const ws = wsRef.current;
+      if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data: d }));
+    });
+
+    const ro = new ResizeObserver(() => {
+      const el = containerRef.current;
+      if (!el || el.offsetWidth < 100 || el.offsetHeight < 50) return;
+      try {
+        fit.fit();
+        if (term.cols < 2 || term.rows < 2) return;
+        const ws = wsRef.current;
+        if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+      } catch {}
+    });
+    ro.observe(containerRef.current);
+
+    return () => {
+      disposed = true;
+      clearTimeout(reconnectTimer);
+      ro.disconnect();
+      const ws = wsRef.current;
+      if (ws) { ws.onclose = null; ws.close(); }
+      term.dispose();
+      termRef.current = null;
+      wsRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Switch session — close socket and reconnect with new name
+  const switchSession = useCallback((name: string) => {
+    setActiveSession(name);
+    activeSessionRef.current = name;
+    setShowPicker(false);
+    const ws = wsRef.current;
+    if (ws) ws.close();
+    // Clear xterm output
+    termRef.current?.clear();
+  }, []);
+
+  const startNewSession = useCallback(async () => {
+    // Create a fresh session pinned to this craft + chosen agent
+    const sessionName = `${preferredSessionName}-${Date.now().toString(36).slice(-4)}`;
+    switchSession(sessionName);
+  }, [preferredSessionName, switchSession]);
+
+  const sendInjectPrompt = useCallback(() => {
+    // Re-paste the original prompt.md into the running session
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    fetch(`/api/craft-system/helpers/file?projectPath=${encodeURIComponent(projectPath)}&path=${encodeURIComponent(`.forge/crafts/${craftName}/prompt.md`)}`)
+      .then(r => r.ok ? r.text() : '')
+      .then(text => {
+        if (!text) return;
+        ws.send(JSON.stringify({ type: 'input', data: text + '\n' }));
+      });
+  }, [projectPath, craftName]);
+
+  return (
+    <div className="h-full flex flex-col bg-[var(--bg-primary)] border-t border-[var(--border)]">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-2 py-1 border-b border-[var(--border)] shrink-0 bg-[var(--bg-secondary)]/40">
+        <span className="text-[10px] text-[var(--text-secondary)]">🖥</span>
+        <button onClick={() => { setShowPicker(v => !v); refreshSessions(); }}
+          className="text-[10px] px-1.5 py-0.5 rounded font-mono text-[var(--accent)] hover:bg-[var(--accent)]/10"
+          title="Switch session">
+          {activeSession.replace(/^mw[a-z0-9]*-/, '')} ▾
+        </button>
+        <span className={`text-[9px] ${connected ? 'text-emerald-400' : 'text-[var(--text-secondary)]'}`}>
+          {connected ? '● connected' : '○ disconnected'}
+        </span>
+        <select value={agentId} onChange={e => setAgentId(e.target.value)}
+          className="text-[10px] bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-1.5 py-0.5"
+          title="Agent used when creating a fresh session">
+          {agents.length === 0 && <option value="">no agents</option>}
+          {agents.map(a => <option key={a.id} value={a.id}>{a.name || a.id}</option>)}
+        </select>
+        <div className="flex-1" />
+        <button onClick={sendInjectPrompt}
+          className="text-[10px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--accent)]"
+          title="Re-paste the craft's prompt.md into the session">
+          📋 prompt
+        </button>
+        <button onClick={startNewSession}
+          className="text-[10px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--accent)]"
+          title="Start a fresh tmux session for this craft">
+          + Fresh
+        </button>
+        {onPickAgain && (
+          <button onClick={onPickAgain}
+            className="text-[10px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--accent)]"
+            title="Re-pick agent + session">
+            ⚙ session
+          </button>
+        )}
+        {onHide && (
+          <button onClick={onHide}
+            className="text-[10px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--accent)]"
+            title="Hide this panel — tmux session keeps running so you can re-open right back where you left off">
+            ⊟ hide
+          </button>
+        )}
+        {onClose && (
+          <button onClick={onClose}
+            className="text-[10px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:text-red-300 hover:bg-red-500/10"
+            title="Close — kills the tmux session and forgets the agent/session choice">
+            ✕ close
+          </button>
+        )}
+      </div>
+
+      {/* Session picker dropdown */}
+      {showPicker && (
+        <div className="absolute top-12 left-2 z-30 bg-[var(--bg-primary)] border border-[var(--border)] rounded shadow-xl text-[10px] min-w-[260px] max-h-64 overflow-auto">
+          <div className="px-2 py-1 text-[var(--text-secondary)] border-b border-[var(--border)]">All project sessions</div>
+          {sessions.length === 0 && <div className="px-2 py-2 text-[var(--text-secondary)]">no sessions</div>}
+          {sessions.map(s => (
+            <button key={s.name} onClick={() => switchSession(s.name)}
+              className={`w-full text-left px-2 py-1 hover:bg-[var(--bg-tertiary)] ${s.name === activeSession ? 'bg-[var(--accent)]/10 text-[var(--accent)]' : ''}`}>
+              <div className="font-mono">{s.name.replace(/^mw[a-z0-9]*-/, '')}{s.attached ? ' ●' : ''}</div>
+              {s.cwd && <div className="text-[9px] text-[var(--text-secondary)] truncate">{s.cwd}</div>}
+            </button>
+          ))}
+          <button onClick={() => { setShowPicker(false); switchSession(preferredSessionName); }}
+            className="w-full text-left px-2 py-1 border-t border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]">
+            ↩ back to craft default ({preferredSessionName.replace(/^mw[a-z0-9]*-/, '')})
+          </button>
+        </div>
+      )}
+
+      {/* Terminal */}
+      <div ref={containerRef} className="flex-1 min-h-0" />
+    </div>
+  );
+}