@aion0/forge 0.4.16 → 0.5.1

package/components/Dashboard.tsx

@@ -4,11 +4,7 @@ import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react'
 import { signOut } from 'next-auth/react';
 import TaskBoard from './TaskBoard';
 import TaskDetail from './TaskDetail';
-import SessionView from './SessionView';
-import NewTaskModal from './NewTaskModal';
-import SettingsModal from './SettingsModal';
 import TunnelToggle from './TunnelToggle';
-import MonitorPanel from './MonitorPanel';
 import type { Task } from '@/src/types';
 import type { WebTerminalHandle } from './WebTerminal';
 
@@ -22,6 +18,12 @@ const HelpDialog = lazy(() => import('./HelpDialog'));
 const LogViewer = lazy(() => import('./LogViewer'));
 const SkillsPanel = lazy(() => import('./SkillsPanel'));
 const UsagePanel = lazy(() => import('./UsagePanel'));
+const SessionView = lazy(() => import('./SessionView'));
+const NewTaskModal = lazy(() => import('./NewTaskModal'));
+const SettingsModal = lazy(() => import('./SettingsModal'));
+const MonitorPanel = lazy(() => import('./MonitorPanel'));
+const WorkspaceView = lazy(() => import('./WorkspaceView'));
+// WorkspaceTree moved into ProjectDetail — no longer needed at Dashboard level
 
 interface UsageSummary {
   provider: string;
@@ -95,7 +97,9 @@ function FloatingBrowser({ onClose }: { onClose: () => void }) {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'skills' | 'logs' | 'usage'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'workspace' | 'skills' | 'logs' | 'usage'>('terminal');
+  // workspaceProject state kept for forge:open-terminal event compatibility
+  const [workspaceProject, setWorkspaceProject] = useState<{ name: string; path: string } | null>(null);
   const [browserMode, setBrowserMode] = useState<'none' | 'float' | 'right' | 'left'>('none');
   const [showBrowserMenu, setShowBrowserMenu] = useState(false);
   const [browserWidth, setBrowserWidth] = useState(600);
@@ -147,11 +151,10 @@ export default function Dashboard({ user }: { user: any }) {
   // Listen for open-terminal events from ProjectManager
   useEffect(() => {
     const handler = (e: Event) => {
-      const { projectPath, projectName } = (e as CustomEvent).detail;
+      const { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv } = (e as CustomEvent).detail;
       setViewMode('terminal');
-      // Give terminal time to render, then trigger open
       setTimeout(() => {
-        terminalRef.current?.openProjectTerminal?.(projectPath, projectName);
+        terminalRef.current?.openProjectTerminal?.(projectPath, projectName, agentId, resumeMode, sessionId, profileEnv);
       }, 300);
     };
     window.addEventListener('forge:open-terminal', handler);
@@ -291,7 +294,7 @@ export default function Dashboard({ user }: { user: any }) {
           {/* View mode toggle */}
           <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
             {/* Workspace */}
-            {(['terminal', 'projects', 'sessions'] as const).map(mode => (
+            {(['terminal', 'projects'] as const).map(mode => (
               <button
                 key={mode}
                 onClick={() => setViewMode(mode)}
@@ -301,7 +304,7 @@ export default function Dashboard({ user }: { user: any }) {
                     : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
                 }`}
               >
-                {{ terminal: 'Vibe Coding', projects: 'Projects', sessions: 'Sessions' }[mode]}
+                {{ terminal: 'Vibe Coding', projects: 'Projects' }[mode]}
               </button>
             ))}
             <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
@@ -332,7 +335,7 @@ export default function Dashboard({ user }: { user: any }) {
               </button>
             ))}
             <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
-            {/* Skills */}
+            {/* Marketplace */}
             <button
               onClick={() => setViewMode('skills')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
@@ -341,7 +344,7 @@ export default function Dashboard({ user }: { user: any }) {
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
-              Skills
+              Marketplace
             </button>
           </div>
 
@@ -679,24 +682,14 @@ export default function Dashboard({ user }: { user: any }) {
               )}
             </aside>
           </>
-        ) : viewMode === 'sessions' ? (
-          <SessionView
-            projects={projects}
-            onOpenInTerminal={(sessionId, projectPath) => {
-              setViewMode('terminal');
-              setTimeout(() => {
-                terminalRef.current?.openSessionInTerminal(sessionId, projectPath);
-              }, 100);
-            }}
-          />
         ) : null}
 
-        {/* Projects */}
-        {viewMode === 'projects' && (
+        {/* Projects — keep alive to preserve state across tab switches */}
+        <div className={`flex-1 flex flex-col min-h-0 ${viewMode !== 'projects' ? 'hidden' : ''}`}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
             <ProjectManager />
           </Suspense>
-        )}
+        </div>
 
         {/* Pipelines */}
         {viewMode === 'pipelines' && (
@@ -780,24 +773,28 @@ export default function Dashboard({ user }: { user: any }) {
       )}
 
       {showNewTask && (
-        <NewTaskModal
-          onClose={() => setShowNewTask(false)}
-          onCreate={async (data) => {
-            await fetch('/api/tasks', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify(data),
-            });
-            setShowNewTask(false);
-            fetchData();
-          }}
-        />
+        <Suspense fallback={null}>
+          <NewTaskModal
+            onClose={() => setShowNewTask(false)}
+            onCreate={async (data) => {
+              await fetch('/api/tasks', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data),
+              });
+              setShowNewTask(false);
+              fetchData();
+            }}
+          />
+        </Suspense>
       )}
 
-      {showMonitor && <MonitorPanel onClose={() => setShowMonitor(false)} />}
+      {showMonitor && <Suspense fallback={null}><MonitorPanel onClose={() => setShowMonitor(false)} /></Suspense>}
 
       {showSettings && (
-        <SettingsModal onClose={() => { setShowSettings(false); fetchData(); refreshDisplayName(); }} />
+        <Suspense fallback={null}>
+          <SettingsModal onClose={() => { setShowSettings(false); fetchData(); refreshDisplayName(); }} />
+        </Suspense>
       )}
       {showHelp && (
         <Suspense fallback={null}>

package/components/DashboardWrapper.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Dashboard = dynamic(() => import('./Dashboard'), { ssr: false });
+
+export default function DashboardWrapper({ user }: { user: any }) {
+  return <Dashboard user={user} />;
+}

package/components/DeliveryFlowEditor.tsx

@@ -0,0 +1,491 @@
+'use client';
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  Handle,
+  Position,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeProps,
+  MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+// ─── Types ────────────────────────────────────────────────
+
+interface RolePreset {
+  id: string;
+  label: string;
+  icon: string;
+  role: string;
+  inputArtifactTypes: string[];
+  outputArtifactName: string;
+  outputArtifactType: string;
+  waitForHuman?: boolean;
+}
+
+export interface PhaseOutput {
+  name: string;
+  label: string;
+  icon: string;
+  role: string;
+  agentId: string;
+  inputArtifactTypes: string[];
+  outputArtifactName: string;
+  outputArtifactType: string;
+  waitForHuman: boolean;
+  dependsOn: string[];
+  requires: string[];   // artifact names needed before starting
+  produces: string[];   // artifact names this phase outputs
+}
+
+// ─── Colors ──────────────────────────────────────────────
+
+const ROLE_COLORS: Record<string, { bg: string; border: string; accent: string }> = {
+  pm:       { bg: '#1a2a1a', border: '#22c55e', accent: '#4ade80' },
+  engineer: { bg: '#1e2a4a', border: '#3b82f6', accent: '#60a5fa' },
+  qa:       { bg: '#2a1e4a', border: '#8b5cf6', accent: '#a78bfa' },
+  reviewer: { bg: '#3a2a1e', border: '#f97316', accent: '#fb923c' },
+  devops:   { bg: '#1e3a3a', border: '#06b6d4', accent: '#22d3ee' },
+  security: { bg: '#3a1e2a', border: '#ec4899', accent: '#f472b6' },
+  docs:     { bg: '#2a2a1e', border: '#eab308', accent: '#facc15' },
+  custom:   { bg: '#1a1a2a', border: '#6b7280', accent: '#9ca3af' },
+};
+
+function getColor(presetId: string) {
+  return ROLE_COLORS[presetId] || ROLE_COLORS.custom;
+}
+
+// ─── Custom Node ─────────────────────────────────────────
+
+interface RoleNodeData {
+  label: string;
+  icon: string;
+  presetId: string;
+  agentId: string;
+  role: string;
+  waitForHuman: boolean;
+  outputArtifactName: string;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+  [key: string]: unknown;
+}
+
+function RoleNode({ id, data }: NodeProps<Node<RoleNodeData>>) {
+  const c = getColor(data.presetId);
+  // inputArtifacts comes from edges (resolved in parent), stored in data
+  const inputs: string[] = (data as any).inputArtifacts || [];
+
+  return (
+    <div className="rounded-xl shadow-lg" style={{ background: c.bg, border: `2px solid ${c.border}`, minWidth: 220 }}>
+      {/* Input handle + input artifacts */}
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3" style={{ background: c.accent }} />
+      {inputs.length > 0 && (
+        <div className="px-3 pt-1 flex flex-wrap gap-1">
+          {inputs.map((name, i) => (
+            <span key={i} className="text-[7px] px-1 py-0.5 rounded bg-white/5 text-gray-400">⬇ {name}</span>
+          ))}
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="px-3 py-1.5 flex items-center gap-2" style={{ borderBottom: `1px solid ${c.border}40` }}>
+        <span className="text-sm">{data.icon}</span>
+        <span className="text-[11px] font-bold text-white">{data.label}</span>
+        <span className="text-[8px] px-1 py-0.5 rounded" style={{ background: c.accent + '30', color: c.accent }}>{data.agentId}</span>
+        {data.waitForHuman && <span className="text-[7px] px-1 py-0.5 rounded bg-yellow-500/20 text-yellow-400">⏸ approval</span>}
+        <div className="ml-auto flex gap-1">
+          <button onClick={() => data.onEdit(id)} className="text-[9px] hover:text-white" style={{ color: c.accent }}>edit</button>
+          <button onClick={() => data.onDelete(id)} className="text-[9px] text-red-400 hover:text-red-300">×</button>
+        </div>
+      </div>
+
+      {/* Role description */}
+      <div className="px-3 py-1">
+        <div className="text-[8px] text-gray-500 line-clamp-2">{data.role.slice(0, 80)}{data.role.length > 80 ? '...' : ''}</div>
+      </div>
+
+      {/* Output artifact */}
+      <div className="px-3 pb-1.5">
+        <div className="text-[7px] px-1.5 py-0.5 rounded inline-flex items-center gap-1" style={{ background: c.accent + '15', color: c.accent, border: `1px solid ${c.accent}30` }}>
+          ⬆ {data.outputArtifactName || 'output.md'}
+        </div>
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="!w-3 !h-3" style={{ background: c.accent }} />
+    </div>
+  );
+}
+
+const nodeTypes = { role: RoleNode };
+
+// ─── Edit Modal ──────────────────────────────────────────
+
+function EditModal({ node, agents, onSave, onClose }: {
+  node: { id: string; label: string; icon: string; presetId: string; agentId: string; role: string; waitForHuman: boolean; outputArtifactName: string };
+  agents: { id: string; name: string }[];
+  onSave: (data: typeof node) => void;
+  onClose: () => void;
+}) {
+  const [form, setForm] = useState({ ...node });
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
+      <div className="bg-[#1a1a2a] border border-[#3a3a5a] rounded-xl p-4 w-[420px] space-y-3" onClick={e => e.stopPropagation()}>
+        <div className="text-sm font-bold text-white flex items-center gap-2">
+          <span>{form.icon}</span> Edit Role
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <label className="text-[9px] text-gray-400">Label</label>
+            <input value={form.label} onChange={e => setForm(f => ({ ...f, label: e.target.value }))}
+              className="w-full text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-white" />
+          </div>
+          <div>
+            <label className="text-[9px] text-gray-400">Agent</label>
+            <select value={form.agentId} onChange={e => setForm(f => ({ ...f, agentId: e.target.value }))}
+              className="w-full text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-white">
+              {agents.map(a => <option key={a.id} value={a.id}>{a.name || a.id}</option>)}
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="text-[9px] text-gray-400">Role Description (system prompt)</label>
+          <textarea value={form.role} onChange={e => setForm(f => ({ ...f, role: e.target.value }))}
+            className="w-full text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-gray-300 resize-none"
+            rows={4} />
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <label className="text-[9px] text-gray-400">Output artifact</label>
+            <input value={form.outputArtifactName} onChange={e => setForm(f => ({ ...f, outputArtifactName: e.target.value }))}
+              className="w-full text-xs bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-gray-300" />
+          </div>
+          <div className="flex items-end pb-1">
+            <label className="flex items-center gap-1.5 text-[10px] text-gray-400 cursor-pointer">
+              <input type="checkbox" checked={form.waitForHuman} onChange={e => setForm(f => ({ ...f, waitForHuman: e.target.checked }))}
+                className="accent-yellow-500" />
+              Require approval
+            </label>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-1">
+          <button onClick={onClose} className="text-xs px-3 py-1 text-gray-400 hover:text-white">Cancel</button>
+          <button onClick={() => onSave(form)} className="text-xs px-3 py-1 bg-green-600 text-white rounded hover:opacity-90">Save</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Component ──────────────────────────────────────
+
+export default function DeliveryFlowEditor({ presets, agents, initialPhases, onChange }: {
+  presets: RolePreset[];
+  agents: { id: string; name: string }[];
+  initialPhases?: PhaseOutput[];
+  onChange: (phases: PhaseOutput[]) => void;
+}) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node<RoleNodeData>>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const [editing, setEditing] = useState<string | null>(null);
+  const nextId = useRef(1);
+
+  // Initialize with defaults
+  useEffect(() => {
+    if (nodes.length > 0) return;
+    const defaults = initialPhases || presets.filter(p => ['pm', 'engineer', 'qa', 'reviewer'].includes(p.id));
+    const initNodes: Node<RoleNodeData>[] = defaults.map((p, i) => {
+      const preset = 'presetId' in p ? p : presets.find(pr => pr.id === (p as any).name) || p;
+      const presetId = (preset as any).presetId || (preset as any).id || 'custom';
+      return {
+        id: `role-${i}`,
+        type: 'role',
+        position: { x: 100 + (i % 2) * 280, y: 50 + Math.floor(i / 2) * 180 },
+        data: {
+          label: (preset as any).label || (preset as any).name || `Role ${i}`,
+          icon: (preset as any).icon || '⚙',
+          presetId,
+          agentId: (p as any).agentId || 'claude',
+          role: (preset as any).role || '',
+          waitForHuman: (preset as any).waitForHuman || false,
+          outputArtifactName: (preset as any).outputArtifactName || 'output.md',
+          onEdit: (id: string) => setEditing(id),
+          onDelete: (id: string) => handleDelete(id),
+        },
+      };
+    });
+
+    // Auto-connect sequentially with artifact labels
+    const initEdges: Edge[] = [];
+    for (let i = 0; i < initNodes.length - 1; i++) {
+      const c = getColor(initNodes[i].data.presetId);
+      const artifactName = initNodes[i].data.outputArtifactName || 'output';
+      initEdges.push({
+        id: `${initNodes[i].id}-${initNodes[i + 1].id}`,
+        source: initNodes[i].id,
+        target: initNodes[i + 1].id,
+        markerEnd: { type: MarkerType.ArrowClosed, color: c.accent },
+        style: { stroke: c.accent, strokeWidth: 2 },
+        animated: true,
+        label: `📄 ${artifactName}`,
+        labelStyle: { fill: c.accent, fontSize: 9, fontWeight: 500 },
+        labelBgStyle: { fill: '#0a0a1a', fillOpacity: 0.8 },
+        labelBgPadding: [4, 2] as [number, number],
+      });
+    }
+
+    nextId.current = initNodes.length;
+    setNodes(initNodes);
+    setEdges(initEdges);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Resolve input artifacts from edges and update node data
+  useEffect(() => {
+    if (nodes.length === 0) return;
+
+    // Build input map: nodeId → [artifact names from source nodes]
+    const inputMap = new Map<string, string[]>();
+    for (const edge of edges) {
+      const sourceNode = nodes.find(n => n.id === edge.source);
+      if (!sourceNode) continue;
+      const existing = inputMap.get(edge.target) || [];
+      existing.push(sourceNode.data.outputArtifactName || 'output.md');
+      inputMap.set(edge.target, existing);
+    }
+
+    // Update nodes with resolved inputArtifacts
+    let changed = false;
+    const updated = nodes.map(n => {
+      const inputs = inputMap.get(n.id) || [];
+      const current = (n.data as any).inputArtifacts || [];
+      if (JSON.stringify(inputs) !== JSON.stringify(current)) {
+        changed = true;
+        return { ...n, data: { ...n.data, inputArtifacts: inputs } };
+      }
+      return n;
+    });
+    if (changed) setNodes(updated);
+
+    // Emit phases to parent
+    const output = buildOutput(nodes, edges);
+    onChange(output);
+  }, [nodes, edges]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onConnect = useCallback((params: Connection) => {
+    const sourceNode = nodes.find(n => n.id === params.source);
+    const c = sourceNode ? getColor(sourceNode.data.presetId) : ROLE_COLORS.custom;
+    const artifactName = sourceNode?.data.outputArtifactName || 'output';
+    setEdges(eds => addEdge({
+      ...params,
+      markerEnd: { type: MarkerType.ArrowClosed, color: c.accent },
+      style: { stroke: c.accent, strokeWidth: 2 },
+      animated: true,
+      label: `📄 ${artifactName}`,
+      labelStyle: { fill: c.accent, fontSize: 9, fontWeight: 500 },
+      labelBgStyle: { fill: '#0a0a1a', fillOpacity: 0.8 },
+      labelBgPadding: [4, 2] as [number, number],
+    }, eds));
+  }, [nodes, setEdges]);
+
+  const handleAddPreset = (preset: RolePreset) => {
+    const id = `role-${nextId.current++}`;
+    const c = getColor(preset.id);
+    setNodes(nds => [...nds, {
+      id,
+      type: 'role',
+      position: { x: 100 + (nds.length % 3) * 240, y: 50 + Math.floor(nds.length / 3) * 180 },
+      data: {
+        label: preset.label,
+        icon: preset.icon,
+        presetId: preset.id,
+        agentId: 'claude',
+        role: preset.role,
+        waitForHuman: preset.waitForHuman || false,
+        outputArtifactName: preset.outputArtifactName,
+        onEdit: (nid: string) => setEditing(nid),
+        onDelete: (nid: string) => handleDelete(nid),
+      },
+    }]);
+  };
+
+  const handleAddCustom = () => {
+    const id = `role-${nextId.current++}`;
+    setNodes(nds => [...nds, {
+      id,
+      type: 'role',
+      position: { x: 100 + (nds.length % 3) * 240, y: 50 + Math.floor(nds.length / 3) * 180 },
+      data: {
+        label: 'Custom Agent',
+        icon: '⚙',
+        presetId: 'custom',
+        agentId: 'claude',
+        role: '',
+        waitForHuman: false,
+        outputArtifactName: 'output.md',
+        onEdit: (nid: string) => setEditing(nid),
+        onDelete: (nid: string) => handleDelete(nid),
+      },
+    }]);
+    setEditing(id);
+  };
+
+  const handleDelete = useCallback((id: string) => {
+    setNodes(nds => nds.filter(n => n.id !== id));
+    setEdges(eds => eds.filter(e => e.source !== id && e.target !== id));
+  }, [setNodes, setEdges]);
+
+  const handleSaveEdit = (data: { id: string; label: string; icon: string; presetId: string; agentId: string; role: string; waitForHuman: boolean; outputArtifactName: string }) => {
+    setNodes(nds => nds.map(n => {
+      if (n.id !== data.id) return n;
+      return { ...n, data: { ...n.data, ...data } };
+    }));
+    // Update edge labels if output artifact changed
+    setEdges(eds => eds.map(e => {
+      if (e.source !== data.id) return e;
+      const c = getColor(data.presetId);
+      return {
+        ...e,
+        label: `📄 ${data.outputArtifactName || 'output'}`,
+        labelStyle: { fill: c.accent, fontSize: 9, fontWeight: 500 },
+      };
+    }));
+    setEditing(null);
+  };
+
+  const editingNode = editing ? nodes.find(n => n.id === editing) : null;
+
+  return (
+    <div className="flex flex-col" style={{ height: 350 }}>
+      {/* Toolbar: add from presets */}
+      <div className="flex items-center gap-1 px-2 py-1.5 border-b border-[#30363d] bg-[#0d1117] shrink-0 flex-wrap">
+        <span className="text-[9px] text-gray-500 mr-1">Add:</span>
+        {presets.map(p => (
+          <button key={p.id} onClick={() => handleAddPreset(p)}
+            className="text-[8px] px-1.5 py-0.5 rounded border border-[#30363d] text-gray-400 hover:text-white hover:border-[var(--accent)] flex items-center gap-0.5">
+            <span>{p.icon}</span> {p.label}
+          </button>
+        ))}
+        <button onClick={handleAddCustom}
+          className="text-[8px] px-1.5 py-0.5 rounded border border-dashed border-[#30363d] text-gray-500 hover:text-white hover:border-[var(--accent)]">
+          + Custom
+        </button>
+        <span className="text-[7px] text-gray-600 ml-auto">Drag to connect · Click edit to configure</span>
+      </div>
+
+      {/* ReactFlow canvas */}
+      <div className="flex-1">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          nodeTypes={nodeTypes}
+          fitView
+          fitViewOptions={{ padding: 0.3 }}
+          deleteKeyCode="Delete"
+          style={{ background: '#0a0a1a' }}
+          minZoom={0.4}
+          maxZoom={2}
+        >
+          <Background color="#1a1a3a" gap={20} />
+          <Controls />
+        </ReactFlow>
+      </div>
+
+      {/* Edit modal */}
+      {editingNode && (
+        <EditModal
+          node={{
+            id: editingNode.id,
+            label: editingNode.data.label,
+            icon: editingNode.data.icon,
+            presetId: editingNode.data.presetId,
+            agentId: editingNode.data.agentId,
+            role: editingNode.data.role,
+            waitForHuman: editingNode.data.waitForHuman,
+            outputArtifactName: editingNode.data.outputArtifactName,
+          }}
+          agents={agents}
+          onSave={handleSaveEdit}
+          onClose={() => setEditing(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Build output from graph ─────────────────────────────
+
+function buildOutput(nodes: Node<RoleNodeData>[], edges: Edge[]): PhaseOutput[] {
+  // Topological sort by edges
+  const adjList = new Map<string, string[]>();
+  const inDegree = new Map<string, number>();
+
+  for (const n of nodes) {
+    adjList.set(n.id, []);
+    inDegree.set(n.id, 0);
+  }
+  for (const e of edges) {
+    adjList.get(e.source)?.push(e.target);
+    inDegree.set(e.target, (inDegree.get(e.target) || 0) + 1);
+  }
+
+  const sorted: string[] = [];
+  const queue = [...nodes.filter(n => (inDegree.get(n.id) || 0) === 0).map(n => n.id)];
+  while (queue.length > 0) {
+    const id = queue.shift()!;
+    sorted.push(id);
+    for (const next of adjList.get(id) || []) {
+      const deg = (inDegree.get(next) || 1) - 1;
+      inDegree.set(next, deg);
+      if (deg === 0) queue.push(next);
+    }
+  }
+  // Add any remaining (disconnected)
+  for (const n of nodes) {
+    if (!sorted.includes(n.id)) sorted.push(n.id);
+  }
+
+  return sorted.map(id => {
+    const node = nodes.find(n => n.id === id)!;
+
+    // Derive requires: artifact names from source nodes via edges
+    const requires = edges
+      .filter(e => e.target === id)
+      .map(e => {
+        const src = nodes.find(n => n.id === e.source);
+        return src?.data.outputArtifactName || 'output.md';
+      });
+
+    // Produces: this node's output artifact
+    const produces = [node.data.outputArtifactName || 'output.md'];
+
+    return {
+      name: node.data.presetId === 'custom' ? `custom-${id}` : node.data.presetId,
+      label: node.data.label,
+      icon: node.data.icon,
+      role: node.data.role,
+      agentId: node.data.agentId,
+      inputArtifactTypes: [],
+      outputArtifactName: node.data.outputArtifactName,
+      outputArtifactType: 'custom',
+      waitForHuman: node.data.waitForHuman,
+      dependsOn: [],
+      requires,
+      produces,
+    };
+  });
+}