@aion0/forge 0.5.21 → 0.5.22

package/components/PluginsPanel.tsx

@@ -0,0 +1,472 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface PluginSource {
+  id: string;
+  name: string;
+  icon: string;
+  version: string;
+  author: string;
+  description: string;
+  source: 'builtin' | 'local' | 'registry';
+  installed: boolean;
+}
+
+interface PluginInstance {
+  id: string;
+  name: string;
+  source: string;  // plugin definition ID
+  icon: string;
+  config: Record<string, any>;
+  enabled: boolean;
+}
+
+interface PluginDetail {
+  id: string;
+  name: string;
+  icon: string;
+  version: string;
+  author?: string;
+  description?: string;
+  config: Record<string, { type: string; label?: string; description?: string; required?: boolean; default?: any; options?: string[] }>;
+  params: Record<string, { type: string; label?: string; description?: string; required?: boolean; default?: any }>;
+  actions: Record<string, { run: string; method?: string; url?: string; command?: string }>;
+  defaultAction?: string;
+}
+
+export default function PluginsPanel() {
+  const [plugins, setPlugins] = useState<PluginSource[]>([]);
+  const [instances, setInstances] = useState<PluginInstance[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [selectedInstance, setSelectedInstance] = useState<string | null>(null);
+  const [detail, setDetail] = useState<PluginDetail | null>(null);
+  const [installedConfig, setInstalledConfig] = useState<Record<string, any> | null>(null);
+  const [configValues, setConfigValues] = useState<Record<string, any>>({});
+  const [configSaved, setConfigSaved] = useState(false);
+  const [filter, setFilter] = useState<'all' | 'installed'>('all');
+  const [loading, setLoading] = useState(true);
+  const [testResult, setTestResult] = useState<{ ok: boolean; output: any; error?: string; duration?: number } | null>(null);
+  const [testAction, setTestAction] = useState('');
+  const [testParams, setTestParams] = useState('{}');
+  const [testing, setTesting] = useState(false);
+  // New instance form
+  const [showNewInstance, setShowNewInstance] = useState(false);
+  const [newInstanceName, setNewInstanceName] = useState('');
+
+  const fetchPlugins = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [allRes, instRes] = await Promise.all([
+        fetch('/api/plugins'),
+        fetch('/api/plugins?installed=true'),
+      ]);
+      const allData = await allRes.json();
+      const instData = await instRes.json();
+      setPlugins(allData.plugins || []);
+      // Build instances list from installed plugins
+      const inst: PluginInstance[] = (instData.plugins || []).map((p: any) => ({
+        id: p.id,
+        name: p.instanceName || p.definition?.name || p.id,
+        source: p.source || p.id,
+        icon: p.definition?.icon || '🔌',
+        config: p.config || {},
+        enabled: p.enabled !== false,
+      }));
+      setInstances(inst);
+    } catch {} finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchPlugins(); }, [fetchPlugins]);
+
+  const selectPlugin = useCallback(async (id: string, instanceId?: string) => {
+    setSelectedId(id);
+    setSelectedInstance(instanceId || null);
+    setTestResult(null);
+    setShowNewInstance(false);
+    try {
+      const lookupId = instanceId || id;
+      const res = await fetch(`/api/plugins?id=${lookupId}`);
+      const data = await res.json();
+      setDetail(data.plugin || null);
+      setInstalledConfig(data.config ?? null);
+      setConfigValues(data.config || {});
+      if (data.plugin?.defaultAction) setTestAction(data.plugin.defaultAction);
+      else if (data.plugin?.actions) setTestAction(Object.keys(data.plugin.actions)[0] || '');
+    } catch {}
+  }, []);
+
+  const handleInstall = async () => {
+    if (!selectedId) return;
+    await fetch('/api/plugins', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'install', id: selectedId, config: {} }),
+    });
+    await fetchPlugins();
+    await selectPlugin(selectedId);
+    // Auto-open new instance form after install
+    setShowNewInstance(true);
+    setNewInstanceName('');
+    setConfigValues({});
+  };
+
+  const handleUninstall = async () => {
+    const id = selectedInstance || selectedId;
+    if (!id) return;
+    await fetch('/api/plugins', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'uninstall', id }),
+    });
+    setInstalledConfig(null);
+    setSelectedInstance(null);
+    await fetchPlugins();
+  };
+
+  const handleSaveConfig = async () => {
+    const id = selectedInstance || selectedId;
+    if (!id || !detail) return;
+    // Merge schema defaults with user-entered values
+    const finalConfig: Record<string, any> = {};
+    for (const [key, schema] of Object.entries(detail.config)) {
+      finalConfig[key] = configValues[key] ?? (schema as any).default ?? '';
+    }
+    await fetch('/api/plugins', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'update_config', id, config: finalConfig }),
+    });
+    setConfigSaved(true);
+    setTimeout(() => setConfigSaved(false), 2000);
+    await selectPlugin(selectedId!, selectedInstance || undefined);
+  };
+
+  const handleCreateInstance = async () => {
+    if (!selectedId || !newInstanceName.trim() || !detail) return;
+    // Merge schema defaults with user-entered values
+    const finalConfig: Record<string, any> = {};
+    for (const [key, schema] of Object.entries(detail.config)) {
+      finalConfig[key] = configValues[key] ?? (schema as any).default ?? '';
+    }
+    const res = await fetch('/api/plugins', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'create_instance', source: selectedId, name: newInstanceName.trim(), config: finalConfig }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      alert(data.error || 'Failed to create instance');
+      return;
+    }
+    setShowNewInstance(false);
+    setNewInstanceName('');
+    await fetchPlugins();
+    // Auto-select the new instance
+    if (data.instanceId) {
+      await selectPlugin(selectedId, data.instanceId);
+    }
+  };
+
+  const handleTest = async () => {
+    const id = selectedInstance || selectedId;
+    if (!id || !testAction) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      let params = {};
+      try { params = JSON.parse(testParams); } catch {}
+      const res = await fetch('/api/plugins', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'test', id, actionName: testAction, params }),
+      });
+      setTestResult(await res.json());
+    } catch (err: any) {
+      setTestResult({ ok: false, output: {}, error: err.message });
+    } finally { setTesting(false); }
+  };
+
+  const filtered = filter === 'installed' ? plugins.filter(p => p.installed || instances.some(i => i.source === p.id)) : plugins;
+  const pluginInstances = (id: string) => instances.filter(i => i.source === id && i.id !== id);
+
+  if (loading) return <div className="p-4 text-xs text-[var(--text-secondary)]">Loading plugins...</div>;
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] shrink-0">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--text-primary)]">Plugins</span>
+          <span className="text-[10px] text-[var(--text-secondary)]">{instances.length} instances from {plugins.filter(p => p.installed).length} plugins</span>
+        </div>
+        <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
+          {(['all', 'installed'] as const).map(f => (
+            <button key={f} onClick={() => setFilter(f)}
+              className={`text-[10px] px-2 py-0.5 rounded transition-colors ${filter === f ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)]'}`}
+            >{f === 'all' ? 'All' : 'Installed'}</button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1 flex min-h-0">
+        {/* Plugin list with instances */}
+        <div className="w-56 overflow-y-auto shrink-0 border-r border-[var(--border)]">
+          {filtered.length === 0 && (
+            <div className="p-4 text-xs text-[var(--text-secondary)] text-center">No plugins found</div>
+          )}
+          {filtered.map(p => {
+            const pInstances = pluginInstances(p.id);
+            const isSelected = selectedId === p.id && !selectedInstance;
+            return (
+              <div key={p.id}>
+                <div
+                  onClick={() => selectPlugin(p.id)}
+                  className={`px-3 py-2 cursor-pointer border-b border-[var(--border)]/50 transition-colors ${
+                    isSelected ? 'bg-[var(--bg-secondary)]' : 'hover:bg-[var(--bg-tertiary)]'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm">{p.icon}</span>
+                    <span className="text-[11px] font-semibold text-[var(--text-primary)] truncate flex-1">{p.name}</span>
+                    {p.installed && <span className="w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" />}
+                  </div>
+                  <div className="text-[10px] text-[var(--text-secondary)] mt-0.5 line-clamp-1">{p.description}</div>
+                  <div className="flex items-center gap-2 mt-1">
+                    <span className="text-[9px] text-[var(--text-secondary)]">v{p.version}</span>
+                    {pInstances.length > 0 && <span className="text-[9px] text-[var(--accent)]">{pInstances.length} instance{pInstances.length > 1 ? 's' : ''}</span>}
+                  </div>
+                </div>
+                {/* Instances */}
+                {pInstances.map(inst => (
+                  <div key={inst.id}
+                    onClick={() => selectPlugin(p.id, inst.id)}
+                    className={`pl-8 pr-3 py-1.5 cursor-pointer border-b border-[var(--border)]/30 transition-colors ${
+                      selectedInstance === inst.id ? 'bg-[var(--bg-secondary)]' : 'hover:bg-[var(--bg-tertiary)]'
+                    }`}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[9px]">{p.icon}</span>
+                      <span className="text-[10px] text-[var(--text-primary)] truncate">{inst.name}</span>
+                      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${inst.enabled ? 'bg-green-400' : 'bg-gray-500'}`} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Detail panel */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {!selectedId || !detail ? (
+            <div className="flex-1 flex items-center justify-center text-xs text-[var(--text-secondary)] h-full">
+              Select a plugin to view details
+            </div>
+          ) : (
+            <div className="space-y-4 max-w-xl">
+              {/* Header */}
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">{detail.icon}</span>
+                <div>
+                  <h2 className="text-sm font-semibold text-[var(--text-primary)]">
+                    {selectedInstance ? instances.find(i => i.id === selectedInstance)?.name || selectedInstance : detail.name}
+                  </h2>
+                  <p className="text-[10px] text-[var(--text-secondary)]">
+                    {selectedInstance ? `Instance of ${detail.name}` : `v${detail.version} by ${detail.author || 'unknown'}`}
+                  </p>
+                </div>
+                <div className="flex-1" />
+                <div className="flex items-center gap-1.5">
+                  {/* Create instance button (only for installed base plugins) */}
+                  {installedConfig !== null && !selectedInstance && (
+                    <button onClick={() => { setShowNewInstance(true); setNewInstanceName(''); setConfigValues({}); }}
+                      className="text-[10px] px-3 py-1 rounded bg-[var(--accent)]/20 text-[var(--accent)] hover:bg-[var(--accent)]/30 transition-colors"
+                    >+ Instance</button>
+                  )}
+                  {installedConfig !== null || selectedInstance ? (
+                    <button onClick={handleUninstall}
+                      className="text-[10px] px-3 py-1 rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
+                    >{selectedInstance ? 'Delete' : 'Uninstall'}</button>
+                  ) : (
+                    <button onClick={handleInstall}
+                      className="text-[10px] px-3 py-1 rounded bg-[var(--accent)]/20 text-[var(--accent)] hover:bg-[var(--accent)]/30 transition-colors"
+                    >Install</button>
+                  )}
+                </div>
+              </div>
+
+              {/* New instance form */}
+              {showNewInstance && (
+                <div className="rounded border border-[var(--accent)]/30 bg-[var(--accent)]/5 p-3 space-y-2">
+                  <h3 className="text-[11px] font-semibold text-[var(--accent)]">New Instance</h3>
+                  <div>
+                    <label className="text-[10px] text-[var(--text-secondary)] block mb-0.5">Instance Name</label>
+                    <input value={newInstanceName} onChange={e => setNewInstanceName(e.target.value)}
+                      placeholder={`e.g., ${detail.name} Production`}
+                      className="w-full bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[11px] text-[var(--text-primary)]"
+                    />
+                  </div>
+                  {/* Config fields for new instance */}
+                  {Object.entries(detail.config).map(([key, schema]) => (
+                    <div key={key}>
+                      <label className="text-[10px] text-[var(--text-secondary)] block mb-0.5">
+                        {schema.label || key} {schema.required && <span className="text-red-400">*</span>}
+                        {schema.description && <span className="text-[8px] text-[var(--text-secondary)]/60 ml-1">{schema.description}</span>}
+                      </label>
+                      {schema.type === 'select' ? (
+                        <select
+                          value={configValues[key] || schema.default || ''}
+                          onChange={e => setConfigValues({ ...configValues, [key]: e.target.value })}
+                          className="w-full bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[11px] text-[var(--text-primary)]"
+                        >
+                          <option value="">Select...</option>
+                          {(schema.options || []).map((o: string) => <option key={o} value={o}>{o}</option>)}
+                        </select>
+                      ) : schema.type === 'boolean' ? (
+                        <input type="checkbox"
+                          checked={configValues[key] === true || configValues[key] === 'true'}
+                          onChange={e => setConfigValues({ ...configValues, [key]: e.target.checked })}
+                          className="accent-[var(--accent)]"
+                        />
+                      ) : (
+                        <input
+                          type={schema.type === 'secret' ? 'password' : schema.type === 'number' ? 'number' : 'text'}
+                          value={configValues[key] ?? schema.default ?? ''}
+                          onChange={e => setConfigValues({ ...configValues, [key]: e.target.value })}
+                          placeholder={schema.description || ''}
+                          className="w-full bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[11px] text-[var(--text-primary)]"
+                        />
+                      )}
+                    </div>
+                  ))}
+                  <div className="flex gap-2">
+                    <button onClick={handleCreateInstance} disabled={!newInstanceName.trim()}
+                      className="text-[10px] px-3 py-1 rounded bg-[var(--accent)] text-white hover:opacity-90 disabled:opacity-40"
+                    >Create</button>
+                    <button onClick={() => setShowNewInstance(false)}
+                      className="text-[10px] px-3 py-1 rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                    >Cancel</button>
+                  </div>
+                </div>
+              )}
+
+              {detail.description && !showNewInstance && (
+                <p className="text-[11px] text-[var(--text-secondary)]">{detail.description}</p>
+              )}
+
+              {/* Actions */}
+              {!showNewInstance && (
+                <div>
+                  <h3 className="text-[11px] font-semibold text-[var(--text-primary)] mb-1.5">Actions</h3>
+                  <div className="grid gap-1.5">
+                    {Object.entries(detail.actions).map(([name, action]) => (
+                      <div key={name} className="flex items-center gap-2 px-2.5 py-1.5 rounded bg-[var(--bg-tertiary)]">
+                        <span className="text-[10px] font-mono font-semibold text-[var(--accent)]">{name}</span>
+                        <span className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)]">{action.run}</span>
+                        {action.url && <span className="text-[9px] text-[var(--text-secondary)] truncate">{action.method || 'GET'} {action.url}</span>}
+                        {action.command && <span className="text-[9px] text-[var(--text-secondary)] truncate font-mono">{action.command.slice(0, 60)}</span>}
+                        {detail.defaultAction === name && <span className="text-[8px] px-1 py-0.5 rounded bg-[var(--accent)]/10 text-[var(--accent)]">default</span>}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Hint: create instance if base plugin has no instances */}
+              {!showNewInstance && !selectedInstance && installedConfig !== null && pluginInstances(selectedId!).length === 0 && Object.keys(detail.config).length > 0 && (
+                <div className="rounded border border-dashed border-[var(--accent)]/30 bg-[var(--accent)]/5 p-3 text-center">
+                  <p className="text-[11px] text-[var(--text-secondary)] mb-2">Create an instance to configure and use this plugin</p>
+                  <button onClick={() => { setShowNewInstance(true); setNewInstanceName(''); setConfigValues({}); }}
+                    className="text-[10px] px-3 py-1 rounded bg-[var(--accent)] text-white hover:opacity-90"
+                  >+ Create First Instance</button>
+                </div>
+              )}
+
+              {/* Config (for installed plugins and instances) */}
+              {!showNewInstance && Object.keys(detail.config).length > 0 && installedConfig !== null && (
+                <div>
+                  <h3 className="text-[11px] font-semibold text-[var(--text-primary)] mb-1.5">Configuration</h3>
+                  <div className="space-y-2">
+                    {Object.entries(detail.config).map(([key, schema]) => (
+                      <div key={key}>
+                        <label className="text-[10px] text-[var(--text-secondary)] block mb-0.5">
+                          {schema.label || key} {schema.required && <span className="text-red-400">*</span>}
+                        </label>
+                        {schema.type === 'select' ? (
+                          <select
+                            value={configValues[key] || schema.default || ''}
+                            onChange={e => setConfigValues({ ...configValues, [key]: e.target.value })}
+                            className="w-full bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[11px] text-[var(--text-primary)]"
+                          >
+                            <option value="">Select...</option>
+                            {(schema.options || []).map(o => <option key={o} value={o}>{o}</option>)}
+                          </select>
+                        ) : schema.type === 'boolean' ? (
+                          <input type="checkbox"
+                            checked={configValues[key] === true || configValues[key] === 'true'}
+                            onChange={e => setConfigValues({ ...configValues, [key]: e.target.checked })}
+                            className="accent-[var(--accent)]"
+                          />
+                        ) : (
+                          <input
+                            type={schema.type === 'secret' ? 'password' : schema.type === 'number' ? 'number' : 'text'}
+                            value={configValues[key] ?? schema.default ?? ''}
+                            onChange={e => setConfigValues({ ...configValues, [key]: e.target.value })}
+                            placeholder={schema.description || ''}
+                            className="w-full bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[11px] text-[var(--text-primary)]"
+                          />
+                        )}
+                      </div>
+                    ))}
+                    <button onClick={handleSaveConfig}
+                      className="text-[10px] px-3 py-1 rounded bg-[var(--accent)]/20 text-[var(--accent)] hover:bg-[var(--accent)]/30 transition-colors"
+                    >{configSaved ? 'Saved!' : 'Save Config'}</button>
+                  </div>
+                </div>
+              )}
+
+              {/* Run Action (only for instances) */}
+              {!showNewInstance && selectedInstance && (
+                <div>
+                  <h3 className="text-[11px] font-semibold text-[var(--text-primary)] mb-1.5">Run Action</h3>
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <select value={testAction} onChange={e => setTestAction(e.target.value)}
+                        className="bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[11px] text-[var(--text-primary)]"
+                      >
+                        {Object.keys(detail.actions).map(a => <option key={a} value={a}>{a}</option>)}
+                      </select>
+                      <button onClick={handleTest} disabled={testing}
+                        className="text-[10px] px-3 py-1 rounded bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
+                      >{testing ? 'Running...' : 'Run'}</button>
+                    </div>
+                    <textarea
+                      value={testParams}
+                      onChange={e => setTestParams(e.target.value)}
+                      placeholder='{"key": "value"}'
+                      rows={3}
+                      className="w-full bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1.5 text-[10px] font-mono text-[var(--text-primary)] resize-y"
+                    />
+                    {testResult && (
+                      <div className={`rounded p-2.5 text-[10px] font-mono ${testResult.ok ? 'bg-green-500/10 border border-green-500/20' : 'bg-red-500/10 border border-red-500/20'}`}>
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className={testResult.ok ? 'text-green-400' : 'text-red-400'}>{testResult.ok ? 'OK' : 'FAILED'}</span>
+                          {testResult.duration && <span className="text-[var(--text-secondary)]">{testResult.duration}ms</span>}
+                        </div>
+                        {testResult.error && <div className="text-red-400 mb-1">{testResult.error}</div>}
+                        <pre className="text-[var(--text-secondary)] whitespace-pre-wrap break-all max-h-40 overflow-y-auto">
+                          {JSON.stringify(testResult.output, null, 2)}
+                        </pre>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/ProjectDetail.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback, useRef, memo, lazy, Suspense } from 'react';
 import { useSidebarResize } from '@/hooks/useSidebarResize';
 
+import { TerminalSessionPickerLazy, fetchProjectSessions } from './TerminalLauncher';
 const InlinePipelineView = lazy(() => import('./InlinePipelineView'));
 const WorkspaceViewLazy = lazy(() => import('./WorkspaceView'));
 const SessionViewLazy = lazy(() => import('./SessionView'));
@@ -1508,9 +1509,7 @@ const FileTreeNode = memo(function FileTreeNode({ node, depth, selected, onSelec
 function AgentTerminalButton({ projectPath, projectName }: { projectPath: string; projectName: string }) {
   const [agents, setAgents] = useState<{ id: string; name: string; detected?: boolean; isProfile?: boolean; base?: string; backendType?: string; env?: Record<string, string>; model?: string }[]>([]);
   const [showMenu, setShowMenu] = useState(false);
-  const [launchDialog, setLaunchDialog] = useState<{ agentId: string; agentName: string; env?: Record<string, string>; model?: string } | null>(null);
-  const [sessions, setSessions] = useState<{ id: string; modified: string; size: number }[]>([]);
-  const [showSessions, setShowSessions] = useState(false);
+  const [pickerInfo, setPickerInfo] = useState<{ agentId: string; agentName: string; env?: Record<string, string>; model?: string; supportsSession: boolean; currentSessionId: string | null } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -1526,69 +1525,40 @@ function AgentTerminalButton({ projectPath, projectName }: { projectPath: string
     return () => document.removeEventListener('mousedown', h);
   }, [showMenu]);
 
-  // Fetch sessions when dialog opens (only for claude-code agents)
-  useEffect(() => {
-    if (!launchDialog) return;
-    const pName = projectPath.replace(/\/+$/, '').split('/').pop() || '';
-    fetch(`/api/claude-sessions/${encodeURIComponent(pName)}`)
-      .then(r => r.json())
-      .then(data => {
-        if (Array.isArray(data) && data.length > 0) {
-          setSessions(data.map((s: any) => ({
-            id: s.sessionId || s.id || '',
-            modified: s.modified || '',
-            size: s.fileSize || s.size || 0,
-          })));
-        }
-      })
-      .catch(() => {});
-  }, [launchDialog, projectPath]);
-
-  const openWithAgent = (agentId: string, resumeMode?: boolean, sessionId?: string, env?: Record<string, string>, model?: string) => {
-    setLaunchDialog(null);
+  const openTerminal = (agentId: string, resumeMode?: boolean, sessionId?: string, env?: Record<string, string>, model?: string) => {
+    setPickerInfo(null);
     setShowMenu(false);
-    // Build profile env for the event
-    const profileEnv = env ? { ...env } : undefined;
-    if (model && profileEnv) profileEnv.CLAUDE_MODEL = model;
-    else if (model) {
-      const pe: Record<string, string> = { CLAUDE_MODEL: model };
-      window.dispatchEvent(new CustomEvent('forge:open-terminal', {
-        detail: { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv: pe },
-      }));
-      return;
-    }
+    const profileEnv: Record<string, string> = { ...(env || {}) };
+    if (model) profileEnv.CLAUDE_MODEL = model;
     window.dispatchEvent(new CustomEvent('forge:open-terminal', {
-      detail: { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv },
+      detail: { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv: Object.keys(profileEnv).length > 0 ? profileEnv : undefined },
     }));
   };
 
   const handleAgentClick = async (a: typeof agents[0]) => {
     setShowMenu(false);
-    // Resolve launch info from server (reads cliType + profile)
     try {
       const res = await fetch(`/api/agents?resolve=${encodeURIComponent(a.id)}`);
       const info = await res.json();
+      // Resolve current session (fixedSession for this project)
+      let currentSessionId: string | null = null;
       if (info.supportsSession) {
-        setSessions([]);
-        setShowSessions(false);
-        setLaunchDialog({ agentId: a.id, agentName: a.name, env: info.env, model: info.model });
-      } else {
-        openWithAgent(a.id, false, undefined, info.env, info.model);
+        try {
+          const { resolveFixedSession } = await import('@/lib/session-utils');
+          currentSessionId = await resolveFixedSession(projectPath) || null;
+        } catch {}
       }
+      setPickerInfo({
+        agentId: a.id, agentName: a.name,
+        env: info.env, model: info.model,
+        supportsSession: info.supportsSession ?? true,
+        currentSessionId,
+      });
     } catch {
-      // Fallback: open directly
-      openWithAgent(a.id);
+      openTerminal(a.id);
     }
   };
 
-  const formatTime = (iso: string) => {
-    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 allAgents = agents.filter(a => a.detected !== false || a.isProfile);
 
   return (
@@ -1626,54 +1596,22 @@ function AgentTerminalButton({ projectPath, projectName }: { projectPath: string
         )}
       </div>
 
-      {/* Launch dialog — New / Resume / Sessions */}
-      {launchDialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ background: 'rgba(0,0,0,0.75)' }}
-          onClick={e => { if (e.target === e.currentTarget) setLaunchDialog(null); }}>
-          <div className="w-80 rounded-lg border border-[#30363d] p-4 shadow-xl" style={{ background: '#0d1117' }}>
-            <div className="text-sm font-bold text-white mb-3">⌨️ {launchDialog.agentName}</div>
-            <div className="space-y-2">
-              <button onClick={() => openWithAgent(launchDialog.agentId, false, undefined, launchDialog.env, launchDialog.model)}
-                className="w-full text-left px-3 py-2 rounded border border-[#30363d] hover:border-[#58a6ff] hover:bg-[#161b22] transition-colors">
-                <div className="text-xs text-white font-semibold">New Session</div>
-                <div className="text-[9px] text-gray-500">Start fresh</div>
-              </button>
-
-              {sessions.length > 0 && (
-                <button onClick={async () => {
-                  // Use fixedSession if available, otherwise latest session
-                  const { resolveFixedSession } = await import('@/lib/session-utils');
-                  const fixedId = await resolveFixedSession(projectPath);
-                  openWithAgent(launchDialog.agentId, true, fixedId || sessions[0].id, launchDialog.env, launchDialog.model);
-                }}
-                  className="w-full text-left px-3 py-2 rounded border border-[#30363d] hover:border-[#3fb950] hover:bg-[#161b22] transition-colors">
-                  <div className="text-xs text-white font-semibold">Resume Latest</div>
-                  <div className="text-[9px] text-gray-500">{sessions[0].id.slice(0, 8)} · {formatTime(sessions[0].modified)} · {formatSize(sessions[0].size)}</div>
-                </button>
-              )}
-
-              {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})
-                </button>
-              )}
-
-              {showSessions && sessions.slice(1).map(s => (
-                <button key={s.id} onClick={() => openWithAgent(launchDialog.agentId, true, s.id, launchDialog.env, launchDialog.model)}
-                  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>
-              ))}
-            </div>
-            <button onClick={() => setLaunchDialog(null)}
-              className="w-full mt-3 text-[9px] text-gray-500 hover:text-white">Cancel</button>
-          </div>
-        </div>
+      {/* Unified Terminal Session Picker */}
+      {pickerInfo && (
+        <TerminalSessionPickerLazy
+          agentLabel={pickerInfo.agentName}
+          currentSessionId={pickerInfo.currentSessionId}
+          supportsSession={pickerInfo.supportsSession}
+          fetchSessions={() => fetchProjectSessions(projectName)}
+          onSelect={(sel) => {
+            if (sel.mode === 'new') {
+              openTerminal(pickerInfo.agentId, false, undefined, pickerInfo.env, pickerInfo.model);
+            } else {
+              openTerminal(pickerInfo.agentId, true, sel.sessionId, pickerInfo.env, pickerInfo.model);
+            }
+          }}
+          onCancel={() => setPickerInfo(null)}
+        />
       )}
     </>
   );