@aion0/forge 0.5.20 → 0.5.22

package/components/WorkspaceView.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useMemo, useRef, forwardRef, useImperativeHandle, lazy, Suspense } from 'react';
+import { TerminalSessionPickerLazy, fetchAgentSessions, type PickerSelection } from './TerminalLauncher';
 import {
   ReactFlow, Background, Controls, Handle, Position, useReactFlow, ReactFlowProvider,
   type Node, type NodeProps, MarkerType, type NodeChange,
@@ -27,6 +28,7 @@ interface AgentConfig {
   skipPermissions?: boolean;
   boundSessionId?: string;
   watch?: { enabled: boolean; interval: number; targets: any[]; action?: 'log' | 'analyze' | 'approve' | 'send_message'; prompt?: string; sendTo?: string };
+  plugins?: string[];  // plugin IDs to auto-install when agent is created
 }
 
 interface AgentState {
@@ -53,6 +55,7 @@ const COLORS = [
 // Smith status colors
 const SMITH_STATUS: Record<string, { label: string; color: string; glow?: boolean }> = {
   down: { label: 'down', color: '#30363d' },
+  starting: { label: 'starting', color: '#f0883e' },   // orange: ensurePersistentSession in progress
   active: { label: 'active', color: '#3fb950', glow: true },
 };
 
@@ -104,6 +107,7 @@ Rules:
   },
   {
     label: 'QA', icon: '🧪', backend: 'cli', agentId: 'claude', dependsOn: [], outputs: ['tests/', 'docs/test-report.md'],
+    plugins: ['playwright', 'shell-command'],
     role: `QA Engineer — You ensure quality through comprehensive testing. You find bugs, you don't fix them.
 
 Rules:
@@ -114,11 +118,28 @@ Rules:
 - Run ALL tests (existing + new) and report results
 - Report format: what failed, expected vs actual, steps to reproduce
 - Check for security issues: injection, auth bypass, data leaks
-- Check for performance: N+1 queries, unbounded loops, memory leaks`,
+- Check for performance: N+1 queries, unbounded loops, memory leaks
+
+Test setup (do this automatically if not already present):
+- If no playwright.config.ts exists, create one based on the project's framework and structure
+- If no tests/e2e/ directory exists, create it
+- Detect the app's dev server command and base URL from package.json or project config
+- Ensure the dev server is running before testing (start it if needed)
+
+How to run Playwright tests:
+- Run tests: npx playwright test tests/e2e/ --reporter=line
+- Run headed (visible browser): npx playwright test tests/e2e/ --headed --reporter=line
+- Screenshot: npx playwright screenshot http://localhost:3000 /tmp/screenshot.png
+- Check URL: curl -sf -o /dev/null -w '%{http_code}' http://localhost:3000
+- Run project tests: npm test
+
+If Forge MCP tools are available (run_plugin, send_message), prefer those.
+Otherwise use bash commands directly — you have full terminal access.`,
     steps: [
-      { id: 'plan', label: 'Test Plan', prompt: 'Read the PRD (docs/prd.md) and the implementation. Create a test plan in docs/test-plan.md covering: unit tests, integration tests, edge cases, error scenarios, security checks, and performance concerns. Map each test to a PRD acceptance criterion.' },
-      { id: 'write-tests', label: 'Write Tests', prompt: 'Implement all test cases from your test plan in the tests/ directory. Follow the project\'s existing test framework and conventions. Include setup/teardown, meaningful assertions, and descriptive test names.' },
-      { id: 'run-tests', label: 'Run & Report', prompt: 'Run ALL tests (both existing and new). Document results in docs/test-report.md: total tests, passed, failed, skipped. For each failure: test name, expected vs actual, steps to reproduce. Include a summary verdict: PASS (all green) or FAIL (with blocking issues listed).' },
+      { id: 'setup', label: 'Setup', prompt: 'Check the project structure. If playwright.config.ts does not exist, create one with testDir: "./tests/e2e" and baseURL from the project config. Create tests/e2e/ directory if missing. Check if the dev server is running (use check_url), start it if not.' },
+      { id: 'plan', label: 'Test Plan', prompt: 'Read the source code and any PRD/docs. Understand what pages and features exist. Create a test plan in docs/test-plan.md covering: E2E user flows, edge cases, error states, responsive behavior. Map each test to a feature.' },
+      { id: 'write-tests', label: 'Write Tests', prompt: 'Write Playwright test scripts in tests/e2e/. Cover all features from the test plan. Use page.goto(), locators, assertions. Test both happy path and error states. Use descriptive test names.' },
+      { id: 'run-tests', label: 'Run & Report', prompt: 'Run tests via run_plugin with Playwright. If tests fail, read the error output carefully. Fix test scripts if the test itself is wrong, but report to Engineer if the app has a bug. Write docs/test-report.md with results. Send bug reports to Engineer via send_message.' },
     ],
   },
   {
@@ -143,21 +164,69 @@ Rules:
     ],
   },
   {
-    label: 'UI Designer', icon: '🎨', backend: 'cli', agentId: 'claude', dependsOn: [], outputs: ['docs/ui-spec.md'],
-    role: `UI/UX Designer — You design user interfaces and experiences. You create specs that engineers can implement.
+    label: 'UI Designer', icon: '🎨', backend: 'cli', agentId: 'claude', dependsOn: [], outputs: ['docs/ui-spec.md', 'src/'],
+    plugins: ['playwright', 'shell-command'],
+    role: `UI/UX Designer — You design and implement user interfaces. You write real UI code, preview it visually, and iterate until the quality meets your standards.
 
 Rules:
+- You WRITE CODE, not just specs. Implement the UI yourself.
+- After writing UI code, always preview your work: take a screenshot and review it visually.
+- Iterate: if the screenshot doesn't look right, fix the code and screenshot again. Aim for 3-5 review cycles.
 - Focus on user experience first, aesthetics second
 - Design for the existing tech stack (check project's UI framework)
 - Be specific: colors (hex), spacing (px/rem), typography, component hierarchy
 - Consider responsive design, accessibility (WCAG), dark/light mode
 - Include interaction states: hover, active, disabled, loading, error, empty
-- Provide component tree structure, not just mockups
-- Reference existing UI patterns in the codebase for consistency`,
+- Reference existing UI patterns in the codebase for consistency
+
+Visual review workflow:
+1. Write/modify UI code
+2. Start dev server if not running (e.g., npm run dev)
+3. Take screenshot: run_plugin({ plugin: "<playwright-instance>", action: "screenshot", params: { url: "http://localhost:3000/page" } })
+4. Read the screenshot file to visually evaluate your work
+5. Grade yourself: layout correctness, visual polish, consistency with existing UI, responsiveness
+6. If not satisfied, fix and repeat from step 2
+7. When satisfied, document the final design in docs/ui-spec.md
+
+If reference designs or mockups exist in the project (e.g., docs/designs/), study them before implementing.`,
     steps: [
-      { id: 'audit', label: 'UI Audit', prompt: 'Analyze the existing UI: framework used (React/Vue/etc), component library, design tokens (colors, spacing, fonts), layout patterns. Document the current design system.' },
-      { id: 'design', label: 'Design Spec', prompt: 'Based on the PRD, design the UI. Write docs/ui-spec.md with: component hierarchy, layout (flexbox/grid), colors, typography, spacing, responsive breakpoints. Include all states (loading, empty, error, success). Use ASCII wireframes or describe precisely.' },
-      { id: 'interactions', label: 'Interactions', prompt: 'Define all user interactions: click flows, form validation, transitions, animations, keyboard shortcuts, mobile gestures. Document accessibility requirements (aria labels, focus management, screen reader support).' },
+      { id: 'audit', label: 'UI Audit', prompt: 'Analyze the existing UI: framework used (React/Vue/etc), component library, design tokens (colors, spacing, fonts), layout patterns. Take screenshots of existing pages to understand the current look and feel. Document the current design system.' },
+      { id: 'implement', label: 'Implement UI', prompt: 'Based on the PRD, implement the UI. Write real component code. Start the dev server, take screenshots of your work, and iterate until the visual quality is high. Aim for at least 3 review cycles — screenshot, evaluate, improve.' },
+      { id: 'polish', label: 'Polish & Document', prompt: 'Final polish pass: check all states (loading, empty, error, hover, disabled), responsive breakpoints, dark/light mode. Take final screenshots. Write docs/ui-spec.md documenting: component hierarchy, design decisions, interaction patterns, and accessibility notes.' },
+    ],
+  },
+  {
+    label: 'Design Evaluator', icon: '🔍', backend: 'cli', agentId: 'claude', dependsOn: [], outputs: ['docs/design-review.md'],
+    plugins: ['playwright', 'llm-vision'],
+    role: `Design Evaluator — You are a senior design critic. You evaluate UI implementations visually, not by reading code. You are deliberately skeptical and hold work to a high standard.
+
+You evaluate on 4 dimensions (each scored 1-10):
+1. **Design Quality** — Visual coherence, distinct identity, not generic/template-like
+2. **Originality** — Evidence of intentional design decisions vs default AI patterns
+3. **Craft** — Typography, spacing, color harmony, alignment, pixel-level polish
+4. **Functionality** — Usability, interaction clarity, error states, responsiveness
+
+Rules:
+- NEVER modify code — only evaluate and report
+- Always take screenshots and visually inspect before scoring
+- Use run_plugin with Playwright to screenshot every relevant page/state
+- If llm-vision instances are available, use them for cross-model evaluation
+- Be specific: "the spacing between header and content is 8px, should be 16px for breathing room"
+- A score of 7+ means "good enough to ship". Below 7 means "needs revision"
+- Send feedback to UI Designer via send_message with specific, actionable items
+- If overall score < 7, request changes. If >= 7, approve with minor suggestions.
+
+Workflow:
+1. Receive notification that UI Designer has completed work
+2. Take screenshots of all relevant pages and states (normal, loading, error, empty, mobile)
+3. Evaluate each screenshot against the 4 dimensions
+4. Optionally send screenshots to llm-vision instances for additional opinions
+5. Write docs/design-review.md with scores, specific feedback, and verdict
+6. send_message to UI Designer: APPROVE or REQUEST_CHANGES with actionable feedback`,
+    steps: [
+      { id: 'screenshot', label: 'Visual Capture', prompt: 'Take screenshots of all pages and states the UI Designer worked on. Include: default view, loading state, error state, empty state, mobile viewport (375px), tablet viewport (768px). Save all screenshots to /tmp/ and list them.' },
+      { id: 'evaluate', label: 'Evaluate', prompt: 'Review each screenshot. Score each page on the 4 dimensions (Design Quality, Originality, Craft, Functionality). Be critical and specific. If llm-vision plugin instances are available, send key screenshots for additional evaluation and compare opinions.' },
+      { id: 'report', label: 'Report & Feedback', prompt: 'Write docs/design-review.md with: overall scores, per-page breakdown, specific issues with suggested fixes. Send verdict to UI Designer via send_message: APPROVE (score >= 7) or REQUEST_CHANGES (score < 7) with the top 3-5 actionable items.' },
     ],
   },
 ];
@@ -379,6 +448,109 @@ function SessionTargetSelector({ target, agents, projectPath, onChange }: {
   );
 }
 
+// ─── Watch Path Picker (file/directory browser) ─────────
+
+function WatchPathPicker({ value, projectPath, onChange }: { value: string; projectPath: string; onChange: (v: string) => void }) {
+  const [showBrowser, setShowBrowser] = useState(false);
+  const [tree, setTree] = useState<any[]>([]);
+  const [search, setSearch] = useState('');
+  const [flatFiles, setFlatFiles] = useState<string[]>([]);
+
+  const loadTree = useCallback(() => {
+    if (!projectPath) return;
+    fetch(`/api/code?dir=${encodeURIComponent(projectPath)}`)
+      .then(r => r.json())
+      .then(data => {
+        setTree(data.tree || []);
+        // Build flat list for search
+        const files: string[] = [];
+        const walk = (nodes: any[], prefix = '') => {
+          for (const n of nodes || []) {
+            const path = prefix ? `${prefix}/${n.name}` : n.name;
+            files.push(n.type === 'dir' ? path + '/' : path);
+            if (n.children) walk(n.children, path);
+          }
+        };
+        walk(data.tree || []);
+        setFlatFiles(files);
+      })
+      .catch(() => {});
+  }, [projectPath]);
+
+  const filtered = search ? flatFiles.filter(f => f.toLowerCase().includes(search.toLowerCase())).slice(0, 30) : [];
+
+  return (
+    <div className="flex-1 flex items-center gap-1 relative">
+      <input
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder="./ (project root)"
+        className="text-[10px] bg-[#161b22] border border-[#30363d] rounded px-1 py-0.5 text-white flex-1"
+      />
+      <button onClick={() => { setShowBrowser(!showBrowser); if (!showBrowser) loadTree(); }}
+        className="text-[9px] px-1 py-0.5 rounded bg-[#30363d] text-gray-400 hover:text-white shrink-0">📂</button>
+
+      {showBrowser && (
+        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-[#0d1117] border border-[#30363d] rounded-lg shadow-xl max-h-60 overflow-hidden flex flex-col" style={{ minWidth: 250 }}>
+          <input
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder="Search files & dirs..."
+            autoFocus
+            className="text-[10px] bg-[#161b22] border-b border-[#30363d] px-2 py-1 text-white focus:outline-none"
+          />
+          <div className="overflow-y-auto flex-1">
+            {search ? (
+              // Search results
+              filtered.length > 0 ? filtered.map(f => (
+                <div key={f} onClick={() => { onChange(f); setShowBrowser(false); setSearch(''); }}
+                  className="px-2 py-0.5 text-[9px] text-gray-300 hover:bg-[#161b22] cursor-pointer truncate font-mono">
+                  {f.endsWith('/') ? `📁 ${f}` : `📄 ${f}`}
+                </div>
+              )) : <div className="px-2 py-1 text-[9px] text-gray-500">No matches</div>
+            ) : (
+              // Tree view (first 2 levels)
+              tree.map(n => <PathTreeNode key={n.name} node={n} prefix="" onSelect={p => { onChange(p); setShowBrowser(false); }} />)
+            )}
+          </div>
+          <div className="flex items-center justify-between px-2 py-0.5 border-t border-[#30363d] bg-[#161b22]">
+            <span className="text-[8px] text-gray-600">{flatFiles.length} items</span>
+            <button onClick={() => setShowBrowser(false)} className="text-[8px] text-gray-500 hover:text-white">Close</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PathTreeNode({ node, prefix, onSelect, depth = 0 }: { node: any; prefix: string; onSelect: (path: string) => void; depth?: number }) {
+  const [expanded, setExpanded] = useState(depth < 1);
+  const path = prefix ? `${prefix}/${node.name}` : node.name;
+  const isDir = node.type === 'dir';
+
+  if (!isDir && depth > 1) return null; // only show files at top 2 levels
+
+  return (
+    <div>
+      <div
+        onClick={() => isDir ? setExpanded(!expanded) : onSelect(path)}
+        className="flex items-center px-2 py-0.5 text-[9px] hover:bg-[#161b22] cursor-pointer"
+        style={{ paddingLeft: 8 + depth * 12 }}
+      >
+        <span className="text-gray-500 mr-1 w-3">{isDir ? (expanded ? '▼' : '▶') : ''}</span>
+        <span className={isDir ? 'text-[var(--accent)]' : 'text-gray-400'}>{isDir ? '📁' : '📄'} {node.name}</span>
+        {isDir && (
+          <button onClick={e => { e.stopPropagation(); onSelect(path + '/'); }}
+            className="ml-auto text-[8px] text-gray-600 hover:text-[var(--accent)]">select</button>
+        )}
+      </div>
+      {isDir && expanded && node.children && depth < 2 && (
+        node.children.map((c: any) => <PathTreeNode key={c.name} node={c} prefix={path} onSelect={onSelect} depth={depth + 1} />)
+      )}
+    </div>
+  );
+}
+
 // ─── Fixed Session Picker ────────────────────────────────
 
 function FixedSessionPicker({ projectPath, value, onChange }: { projectPath?: string; value: string; onChange: (v: string) => void }) {
@@ -448,6 +620,9 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
   const [agentId, setAgentId] = useState(initial.agentId || 'claude');
   const [availableAgents, setAvailableAgents] = useState<{ id: string; name: string; isProfile?: boolean; backendType?: string; base?: string; cliType?: string }[]>([]);
 
+  const [pluginInstances, setPluginInstances] = useState<{ id: string; name: string; icon: string; source?: string }[]>([]);
+  const [pluginDefs, setPluginDefs] = useState<{ id: string; name: string; icon: string }[]>([]);
+
   useEffect(() => {
     fetch('/api/agents').then(r => r.json()).then(data => {
       const list = (data.agents || data || []).map((a: any) => ({
@@ -459,6 +634,19 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
       }));
       setAvailableAgents(list);
     }).catch(() => {});
+    // Fetch both: plugin definitions + installed instances
+    Promise.all([
+      fetch('/api/plugins').then(r => r.json()),
+      fetch('/api/plugins?installed=true').then(r => r.json()),
+    ]).then(([defData, instData]) => {
+      setPluginDefs((defData.plugins || []).map((p: any) => ({ id: p.id, name: p.name, icon: p.icon })));
+      setPluginInstances((instData.plugins || []).map((p: any) => ({
+        id: p.id,
+        name: p.instanceName || p.definition?.name || p.id,
+        icon: p.definition?.icon || '🔌',
+        source: p.source,
+      })));
+    }).catch(() => {});
   }, []);
   const [workDirVal, setWorkDirVal] = useState(initial.workDir || '');
   const [outputs, setOutputs] = useState((initial.outputs || []).join(', '));
@@ -471,11 +659,14 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
   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 [agentModel, setAgentModel] = useState(initial.model || '');
   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');
   const [watchPrompt, setWatchPrompt] = useState(initial.watch?.prompt || '');
   const [watchSendTo, setWatchSendTo] = useState(initial.watch?.sendTo || '');
+  const [selectedPlugins, setSelectedPlugins] = useState<string[]>(initial.plugins || []);
+  const [recommendedTypes, setRecommendedTypes] = useState<string[]>([]);
   const [watchDebounce, setWatchDebounce] = useState(String(initial.watch?.targets?.[0]?.debounce ?? 10));
   const [watchTargets, setWatchTargets] = useState<{ type: string; path?: string; cmd?: string; pattern?: string }[]>(
     initial.watch?.targets || []
@@ -487,14 +678,14 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
     fetch(`/api/code?dir=${encodeURIComponent(projectPath)}`)
       .then(r => r.json())
       .then(data => {
-        // Flatten directory tree (type='dir') to list of paths
+        // Collect directories with depth limit (max 2 levels for readability)
         const dirs: string[] = [];
-        const walk = (nodes: any[], prefix = '') => {
+        const walk = (nodes: any[], prefix = '', depth = 0) => {
           for (const n of nodes || []) {
             if (n.type === 'dir') {
               const path = prefix ? `${prefix}/${n.name}` : n.name;
               dirs.push(path);
-              if (n.children) walk(n.children, path);
+              if (n.children && depth < 2) walk(n.children, path, depth + 1);
             }
           }
         };
@@ -510,6 +701,8 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
     setWorkDirVal(p.workDir || './');
     setOutputs(p.outputs.join(', '));
     setStepsText(p.steps.map(s => `${s.label}: ${s.prompt}`).join('\n'));
+    setRecommendedTypes(p.plugins || []);
+    setSelectedPlugins([]);
   };
 
   const toggleDep = (id: string) => {
@@ -619,8 +812,74 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
           {/* Role */}
           <div className="flex flex-col gap-1">
             <label className="text-[9px] text-gray-500 uppercase">Role / System Prompt</label>
-            <textarea value={role} onChange={e => setRole(e.target.value)} rows={2}
-              className="text-xs bg-[#161b22] border border-[#30363d] rounded px-2 py-1 text-white focus:outline-none focus:border-[#58a6ff] resize-none" />
+            <textarea value={role} onChange={e => setRole(e.target.value)} rows={5}
+              placeholder="Describe this agent's role, responsibilities, available tools, and decision criteria. This will be synced to CLAUDE.md in the agent's working directory."
+              className="text-xs bg-[#161b22] border border-[#30363d] rounded px-2 py-1 text-white focus:outline-none focus:border-[#58a6ff] resize-y" />
+          </div>
+
+          {/* Plugin Instances grouped by plugin */}
+          <div className="flex flex-col gap-1">
+            <label className="text-[9px] text-gray-500 uppercase">Plugin Instances</label>
+            {(() => {
+              const withSource = pluginInstances.filter(i => i.source);
+              if (withSource.length === 0) return <span className="text-[8px] text-gray-600">No instances — create in Marketplace → Plugins</span>;
+              // Group by source plugin
+              const groups: Record<string, typeof withSource> = {};
+              for (const inst of withSource) {
+                const key = inst.source!;
+                if (!groups[key]) groups[key] = [];
+                groups[key].push(inst);
+              }
+              // Show recommended types that have no instances yet
+              const missingRecommended = recommendedTypes.filter(rt =>
+                !withSource.some(i => i.source === rt)
+              );
+
+              return <>
+                {Object.entries(groups).map(([sourceId, insts]) => {
+                  const def = pluginDefs.find(d => d.id === sourceId);
+                  const isRecommended = recommendedTypes.includes(sourceId);
+                  return (
+                    <div key={sourceId} className="flex items-start gap-2">
+                      <span className={`text-[9px] shrink-0 w-20 pt-1 truncate ${isRecommended ? 'text-[#58a6ff]' : 'text-gray-500'}`} title={def?.name || sourceId}>
+                        {def?.icon || '🔌'} {def?.name || sourceId}
+                        {isRecommended && <span className="text-[7px] ml-0.5">★</span>}
+                      </span>
+                      <div className="flex flex-wrap gap-1 flex-1">
+                        {insts.map(inst => {
+                          const selected = selectedPlugins.includes(inst.id);
+                          return (
+                            <button key={inst.id}
+                              onClick={() => setSelectedPlugins(prev => selected ? prev.filter(x => x !== inst.id) : [...prev, inst.id])}
+                              className={`text-[9px] px-2 py-0.5 rounded border transition-colors ${
+                                selected
+                                  ? 'border-green-500/40 text-green-400 bg-green-500/10'
+                                  : isRecommended
+                                    ? 'border-[#58a6ff]/30 text-[#58a6ff]/70 hover:text-[#58a6ff]'
+                                    : 'border-[#30363d] text-gray-500 hover:text-gray-300'
+                              }`}>
+                              {inst.name}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })}
+                {missingRecommended.length > 0 && missingRecommended.map(rt => {
+                  const def = pluginDefs.find(d => d.id === rt);
+                  return (
+                    <div key={rt} className="flex items-start gap-2">
+                      <span className="text-[9px] text-[#58a6ff] shrink-0 w-20 pt-1 truncate">
+                        {def?.icon || '🔌'} {def?.name || rt}<span className="text-[7px] ml-0.5">★</span>
+                      </span>
+                      <span className="text-[8px] text-[#58a6ff]/50 italic pt-1">No instances — create in Marketplace → Plugins</span>
+                    </div>
+                  );
+                })}
+              </>;
+
+            })()}
           </div>
 
           {/* Depends On — checkbox list of existing agents */}
@@ -687,7 +946,7 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
           {(() => {
             // Check if selected agent supports terminal mode (claude-code or its profiles)
             const selectedAgent = availableAgents.find(a => a.id === agentId);
-            const isClaude = agentId === 'claude' || selectedAgent?.base === 'claude' || selectedAgent?.cliType === 'claude-code' || !selectedAgent;
+            const isClaude = selectedAgent?.cliType === 'claude-code' || selectedAgent?.base === 'claude' || !selectedAgent;
             const canTerminal = isClaude || isPrimary;
             return canTerminal ? (
               <>
@@ -716,6 +975,27 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
             );
           })()}
 
+          {/* Model override — only for claude-code agents */}
+          {(() => {
+            const sa = availableAgents.find(a => a.id === agentId);
+            const ct = sa?.cliType || (agentId === 'claude' ? 'claude-code' : '');
+            if (ct !== 'claude-code') return null;
+            return (
+              <div className="flex flex-col gap-0.5">
+                <label className="text-[9px] text-gray-500 uppercase">Model</label>
+                <input value={agentModel} onChange={e => setAgentModel(e.target.value)}
+                  placeholder="default (uses profile or system default)"
+                  list="workspace-model-list"
+                  className="text-xs bg-[#161b22] border border-[#30363d] rounded px-2 py-1 text-white focus:outline-none focus:border-[#58a6ff] font-mono" />
+                <datalist id="workspace-model-list">
+                  <option value="claude-sonnet-4-6" />
+                  <option value="claude-opus-4-6" />
+                  <option value="claude-haiku-4-5-20251001" />
+                </datalist>
+              </div>
+            );
+          })()}
+
           {/* Steps */}
           <div className="flex flex-col gap-1">
             <label className="text-[9px] text-gray-500 uppercase">Steps (one per line — Label: Prompt)</label>
@@ -785,14 +1065,15 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
                       <option value="agent_status">Agent Status</option>
                     </select>
                     {t.type === 'directory' && (
-                      <select value={t.path || ''} onChange={e => {
-                        const next = [...watchTargets];
-                        next[i] = { ...t, path: e.target.value };
-                        setWatchTargets(next);
-                      }} className="text-[10px] bg-[#161b22] border border-[#30363d] rounded px-1 py-0.5 text-white flex-1">
-                        <option value="">Project root</option>
-                        {projectDirs.map(d => <option key={d} value={d + '/'}>{d}/</option>)}
-                      </select>
+                      <WatchPathPicker
+                        value={t.path || ''}
+                        projectPath={projectPath || ''}
+                        onChange={v => {
+                          const next = [...watchTargets];
+                          next[i] = { ...t, path: v };
+                          setWatchTargets(next);
+                        }}
+                      />
                     )}
                     {t.type === 'agent_status' && (<>
                       <select value={t.path || ''} onChange={e => {
@@ -905,8 +1186,15 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
               steps: parseSteps(),
               primary: isPrimary || undefined,
               requiresApproval: requiresApproval || undefined,
-              persistentSession: isPrimary ? true : (persistentSession || undefined),
+              persistentSession: (() => {
+                if (isPrimary) return true;
+                // Non-terminal agents (codex, aider, etc.) force headless
+                const sa = availableAgents.find(a => a.id === agentId);
+                const isClaude = sa?.cliType === 'claude-code' || sa?.base === 'claude' || !sa;
+                return (isClaude || isPrimary) ? (persistentSession || undefined) : false;
+              })(),
               skipPermissions: persistentSession ? (skipPermissions ? undefined : false) : undefined,
+              model: agentModel || undefined,
               watch: watchEnabled && watchTargets.length > 0 ? {
                 enabled: true,
                 interval: Math.max(10, parseInt(watchInterval) || 60),
@@ -915,6 +1203,7 @@ function AgentConfigModal({ initial, mode, existingAgents, projectPath, onConfir
                 prompt: watchPrompt || undefined,
                 sendTo: watchSendTo || undefined,
               } : undefined,
+              plugins: selectedPlugins.length > 0 ? selectedPlugins : undefined,
             } as any);
           }} className="text-xs px-3 py-1.5 rounded bg-[#238636] text-white hover:bg-[#2ea043] disabled:opacity-40">
             {mode === 'add' ? 'Add' : 'Save'}
@@ -2344,9 +2633,11 @@ function AgentFlowNode({ data }: NodeProps<Node<AgentNodeData>>) {
         )}
         <div className="flex-1" />
         <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>
+            <button onPointerDown={e => e.stopPropagation()}
+              onClick={e => { e.stopPropagation(); if (smithStatus === 'active') onOpenTerminal(); }}
+              disabled={smithStatus !== 'active'}
+              className={`text-[9px] px-1 ${smithStatus !== 'active' ? 'text-gray-700 cursor-not-allowed' : hasTmux && taskStatus === 'running' ? 'text-green-400 animate-pulse' : 'text-gray-600 hover:text-green-400'}`}
+              title={smithStatus === 'starting' ? 'Starting session…' : smithStatus === 'down' ? 'Smith not started' : '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>
@@ -2392,7 +2683,7 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
   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>; 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);
+  const [termPicker, setTermPicker] = useState<{ agent: AgentConfig; sessName: string; workDir?: string; supportsSession?: boolean; currentSessionId: string | null; initialPos?: { x: number; y: number } } | null>(null);
 
   // Expose focusAgent to parent
   useImperativeHandle(ref, () => ({
@@ -2502,48 +2793,16 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
               // 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;
+              const initialPos = 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;
-
-              // Always resolve launch info for this agent (cliCmd, env, model)
+              // All agents: show picker (current session / new session / other sessions)
               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),
-                },
-              };
-
-              // All paths: let daemon create/ensure session, then attach
-              if (existingTmux || agent.primary || agent.persistentSession || agent.boundSessionId) {
-                // Daemon creates session via ensurePersistentSession (launch script, no truncation)
-                const res = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id }).catch(() => ({})) as any;
-                const tmux = existingTmux || res?.tmuxSession || sessName;
-                setFloatingTerminals(prev => [...prev, {
-                  agentId: agent.id, label: agent.label, icon: agent.icon,
-                  cliId: agent.agentId || 'claude', workDir,
-                  tmuxSession: tmux, sessionName: sessName,
-                  isPrimary: agent.primary, skipPermissions: agent.skipPermissions !== false, persistentSession: agent.persistentSession, boundSessionId: agent.boundSessionId, initialPos,
-                }]);
-                return;
-              }
-              // No persistent session, no bound session → show launch dialog
-              setTermLaunchDialog({ agent, sessName, workDir, sessions: [], supportsSession: resolveRes?.supportsSession ?? true, initialPos });
+              const currentSessionId = resolveRes?.currentSessionId ?? null;
+              setTermPicker({ agent, sessName, workDir, supportsSession: resolveRes?.supportsSession ?? true, currentSessionId, initialPos });
             },
             onSwitchSession: async () => {
               if (!workspaceId) return;
@@ -2551,12 +2810,13 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
               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 initialPos = 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 });
+              const currentSessionId = resolveRes?.currentSessionId ?? null;
+              setTermPicker({ agent, sessName, workDir, supportsSession: resolveRes?.supportsSession ?? true, currentSessionId, initialPos });
             },
           } satisfies AgentNodeData,
         };
@@ -2610,6 +2870,17 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
   const handleAddAgent = async (cfg: Omit<AgentConfig, 'id'>) => {
     if (!workspaceId) return;
     const config: AgentConfig = { ...cfg, id: `${cfg.label.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}` };
+    // Auto-install base plugins if not already installed (for preset templates)
+    // User-selected instances are already installed, so this is a no-op for them
+    if (cfg.plugins?.length) {
+      await Promise.all(cfg.plugins.map(pluginId =>
+        fetch('/api/plugins', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'install', id: pluginId, config: {} }),
+        }).catch(() => {})
+      ));
+    }
     // Optimistic update — show immediately
     setModal(null);
     await wsApi(workspaceId, 'add', { config });
@@ -2911,33 +3182,46 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
         />
       )}
 
-      {/* Terminal launch dialog */}
-      {termLaunchDialog && workspaceId && (
-        <TerminalLaunchDialog
-          agent={termLaunchDialog.agent}
-          workDir={termLaunchDialog.workDir}
-          sessName={termLaunchDialog.sessName}
-          projectPath={projectPath}
-          workspaceId={workspaceId}
-          supportsSession={termLaunchDialog.supportsSession}
-          onLaunch={async (resumeMode, sessionId) => {
-            const { agent, sessName, workDir } = termLaunchDialog;
-            setTermLaunchDialog(null);
-            // Save selected session as boundSessionId
-            if (sessionId) {
-              await wsApi(workspaceId, 'update', { agentId: agent.id, config: { ...agent, boundSessionId: sessionId } }).catch(() => {});
+      {/* Terminal session picker */}
+      {termPicker && workspaceId && (
+        <TerminalSessionPickerLazy
+          agentLabel={termPicker.agent.label}
+          currentSessionId={termPicker.currentSessionId}
+          fetchSessions={() => fetchAgentSessions(workspaceId, termPicker.agent.id)}
+          supportsSession={termPicker.supportsSession}
+          onSelect={async (selection: PickerSelection) => {
+            const { agent, sessName, workDir } = termPicker;
+            const pickerInitialPos = termPicker.initialPos;
+            setTermPicker(null);
+
+            let boundSessionId = agent.boundSessionId;
+            if (selection.mode === 'session') {
+              // Bind to a specific session
+              await wsApi(workspaceId, 'update', { agentId: agent.id, config: { ...agent, boundSessionId: selection.sessionId } }).catch(() => {});
+              boundSessionId = selection.sessionId;
+            } else if (selection.mode === 'new') {
+              // Clear bound session → fresh start
+              if (agent.boundSessionId) {
+                await wsApi(workspaceId, 'update', { agentId: agent.id, config: { ...agent, boundSessionId: undefined } }).catch(() => {});
+              }
+              boundSessionId = undefined;
             }
-            // Daemon creates session (launch script), then attach
-            const res = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id }).catch(() => ({})) as any;
+            // mode === 'current': keep existing boundSessionId
+
+            // 'current': just attach — claude is running, don't interrupt.
+            // 'session' or 'new': forceRestart — rebuild launch script with correct --resume.
+            const forceRestart = selection.mode !== 'current';
+            const res = await wsApi(workspaceId, 'open_terminal', { agentId: agent.id, forceRestart }).catch(() => ({})) as any;
             const tmux = res?.tmuxSession || sessName;
             setFloatingTerminals(prev => [...prev, {
               agentId: agent.id, label: agent.label, icon: agent.icon,
               cliId: agent.agentId || 'claude', workDir,
               tmuxSession: tmux, sessionName: sessName,
-              isPrimary: false, skipPermissions: agent.skipPermissions !== false, persistentSession: agent.persistentSession, boundSessionId: sessionId || agent.boundSessionId, initialPos: termLaunchDialog.initialPos,
+              isPrimary: agent.primary, skipPermissions: agent.skipPermissions !== false,
+              persistentSession: agent.persistentSession, boundSessionId, initialPos: pickerInitialPos,
             }]);
           }}
-          onCancel={() => setTermLaunchDialog(null)}
+          onCancel={() => setTermPicker(null)}
         />
       )}