@aion0/forge 0.2.2 → 0.2.4

package/bin/forge-server.mjs

@@ -3,10 +3,19 @@
  * forge-server — Start the Forge web platform.
  *
  * Usage:
- *   forge-server                Start in foreground (production mode)
- *   forge-server --dev          Start in foreground (development mode)
- *   forge-server --background   Start in background (production mode), logs to ~/.forge/forge.log
- *   forge-server --stop         Stop background server
+ *   forge-server                          Start in foreground (production)
+ *   forge-server --dev                    Start in foreground (development)
+ *   forge-server --background             Start in background
+ *   forge-server --stop                   Stop background server
+ *   forge-server --restart                Stop + start (safe for remote)
+ *   forge-server --rebuild                Force rebuild
+ *   forge-server --port 4000              Custom web port (default: 3000)
+ *   forge-server --terminal-port 4001     Custom terminal port (default: 3001)
+ *   forge-server --dir ~/.forge-test      Custom data directory (default: ~/.forge)
+ *
+ * Examples:
+ *   forge-server --background --port 4000 --terminal-port 4001 --dir ~/.forge-staging
+ *   forge-server --restart
  */
 
 import { execSync, spawn } from 'node:child_process';
@@ -17,19 +26,32 @@ import { homedir } from 'node:os';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = join(__dirname, '..');
-const DATA_DIR = join(homedir(), '.forge');
-const PID_FILE = join(DATA_DIR, 'forge.pid');
-const LOG_FILE = join(DATA_DIR, 'forge.log');
+
+// ── Parse arguments ──
+
+function getArg(name) {
+  const idx = process.argv.indexOf(name);
+  if (idx === -1 || idx + 1 >= process.argv.length) return null;
+  return process.argv[idx + 1];
+}
 
 const isDev = process.argv.includes('--dev');
 const isBackground = process.argv.includes('--background');
 const isStop = process.argv.includes('--stop');
+const isRestart = process.argv.includes('--restart');
 const isRebuild = process.argv.includes('--rebuild');
 
+const webPort = parseInt(getArg('--port')) || 3000;
+const terminalPort = parseInt(getArg('--terminal-port')) || 3001;
+const DATA_DIR = getArg('--dir')?.replace(/^~/, homedir()) || join(homedir(), '.forge');
+
+const PID_FILE = join(DATA_DIR, 'forge.pid');
+const LOG_FILE = join(DATA_DIR, 'forge.log');
+
 process.chdir(ROOT);
 mkdirSync(DATA_DIR, { recursive: true });
 
-// ── Load ~/.forge/.env.local ──
+// ── Load <data-dir>/.env.local ──
 const envFile = join(DATA_DIR, '.env.local');
 if (existsSync(envFile)) {
   for (const line of readFileSync(envFile, 'utf-8').split('\n')) {
@@ -43,30 +65,74 @@ if (existsSync(envFile)) {
   }
 }
 
-// ── Stop ──
-if (isStop) {
+// Set env vars for Next.js and terminal server
+process.env.PORT = String(webPort);
+process.env.TERMINAL_PORT = String(terminalPort);
+process.env.FORGE_DATA_DIR = DATA_DIR;
+
+// ── Helper: stop running instance ──
+function stopServer() {
   try {
     const pid = parseInt(readFileSync(PID_FILE, 'utf-8').trim());
     process.kill(pid, 'SIGTERM');
     unlinkSync(PID_FILE);
     console.log(`[forge] Stopped (pid ${pid})`);
+    return true;
   } catch {
     console.log('[forge] No running server found');
+    return false;
   }
+}
+
+// ── Helper: start background server ──
+function startBackground() {
+  if (!existsSync(join(ROOT, '.next'))) {
+    console.log('[forge] Building...');
+    execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
+  }
+
+  const logFd = openSync(LOG_FILE, 'a');
+  const child = spawn('npx', ['next', 'start', '-p', String(webPort)], {
+    cwd: ROOT,
+    stdio: ['ignore', logFd, logFd],
+    env: { ...process.env },
+    detached: true,
+  });
+
+  writeFileSync(PID_FILE, String(child.pid));
+  child.unref();
+  console.log(`[forge] Started in background (pid ${child.pid})`);
+  console.log(`[forge] Web: http://localhost:${webPort}`);
+  console.log(`[forge] Terminal: ws://localhost:${terminalPort}`);
+  console.log(`[forge] Data: ${DATA_DIR}`);
+  console.log(`[forge] Log: ${LOG_FILE}`);
+  console.log(`[forge] Stop: forge-server --stop${DATA_DIR !== join(homedir(), '.forge') ? ` --dir ${DATA_DIR}` : ''}`);
+}
+
+// ── Stop ──
+if (isStop) {
+  stopServer();
+  process.exit(0);
+}
+
+// ── Restart ──
+if (isRestart) {
+  stopServer();
+  // Brief delay to let port release
+  await new Promise(r => setTimeout(r, 1500));
+  startBackground();
   process.exit(0);
 }
 
 // ── Rebuild ──
 if (isRebuild || existsSync(join(ROOT, '.next', 'BUILD_ID'))) {
-  // Always rebuild after npm install (new version)
-  const buildIdFile = join(ROOT, '.next', 'BUILD_ID');
   const pkgVersion = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf-8')).version;
   const versionFile = join(ROOT, '.next', '.forge-version');
   const lastBuiltVersion = existsSync(versionFile) ? readFileSync(versionFile, 'utf-8').trim() : '';
   if (isRebuild || lastBuiltVersion !== pkgVersion) {
     console.log(`[forge] Rebuilding (v${pkgVersion})...`);
     execSync('rm -rf .next', { cwd: ROOT });
-    execSync('npx next build', { cwd: ROOT, stdio: 'inherit' });
+    execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
     writeFileSync(versionFile, pkgVersion);
     if (isRebuild) {
       console.log('[forge] Rebuild complete');
@@ -77,32 +143,14 @@ if (isRebuild || existsSync(join(ROOT, '.next', 'BUILD_ID'))) {
 
 // ── Background ──
 if (isBackground) {
-  // Build if needed
-  if (!existsSync(join(ROOT, '.next'))) {
-    console.log('[forge] Building...');
-    execSync('npx next build', { cwd: ROOT, stdio: 'inherit' });
-  }
-
-  const logFd = openSync(LOG_FILE, 'a');
-  const child = spawn('npx', ['next', 'start'], {
-    cwd: ROOT,
-    stdio: ['ignore', logFd, logFd],
-    env: { ...process.env },
-    detached: true,
-  });
-
-  writeFileSync(PID_FILE, String(child.pid));
-  child.unref();
-  console.log(`[forge] Started in background (pid ${child.pid})`);
-  console.log(`[forge] Log: ${LOG_FILE}`);
-  console.log(`[forge] Stop: forge-server --stop`);
+  startBackground();
   process.exit(0);
 }
 
 // ── Foreground ──
 if (isDev) {
-  console.log('[forge] Starting in development mode...');
-  const child = spawn('npx', ['next', 'dev', '--turbopack'], {
+  console.log(`[forge] Starting dev mode (port ${webPort}, terminal ${terminalPort}, data ${DATA_DIR})`);
+  const child = spawn('npx', ['next', 'dev', '--turbopack', '-p', String(webPort)], {
     cwd: ROOT,
     stdio: 'inherit',
     env: { ...process.env },
@@ -111,10 +159,10 @@ if (isDev) {
 } else {
   if (!existsSync(join(ROOT, '.next'))) {
     console.log('[forge] Building...');
-    execSync('npx next build', { cwd: ROOT, stdio: 'inherit' });
+    execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
   }
-  console.log('[forge] Starting server...');
-  const child = spawn('npx', ['next', 'start'], {
+  console.log(`[forge] Starting server (port ${webPort}, terminal ${terminalPort}, data ${DATA_DIR})`);
+  const child = spawn('npx', ['next', 'start', '-p', String(webPort)], {
     cwd: ROOT,
     stdio: 'inherit',
     env: { ...process.env },

package/components/Dashboard.tsx

@@ -16,6 +16,7 @@ const DocsViewer = lazy(() => import('./DocsViewer'));
 const CodeViewer = lazy(() => import('./CodeViewer'));
 const ProjectManager = lazy(() => import('./ProjectManager'));
 const PreviewPanel = lazy(() => import('./PreviewPanel'));
+const PipelineView = lazy(() => import('./PipelineView'));
 
 interface UsageSummary {
   provider: string;
@@ -38,7 +39,7 @@ interface ProjectInfo {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview' | 'pipelines'>('terminal');
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
@@ -90,7 +91,7 @@ export default function Dashboard({ user }: { user: any }) {
   return (
     <div className="h-screen flex flex-col">
       {/* Top bar */}
-      <header className="h-10 border-b border-[var(--border)] flex items-center justify-between px-4 shrink-0">
+      <header className="h-12 border-b-2 border-[var(--border)] flex items-center justify-between px-4 shrink-0 bg-[var(--bg-secondary)]">
         <div className="flex items-center gap-4">
           <span className="text-sm font-bold text-[var(--accent)]">Forge</span>
 
@@ -136,6 +137,16 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Tasks
             </button>
+            <button
+              onClick={() => setViewMode('pipelines')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'pipelines'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Pipelines
+            </button>
             <button
               onClick={() => setViewMode('sessions')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
@@ -310,6 +321,13 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
+        {/* Pipelines */}
+        {viewMode === 'pipelines' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <PipelineView />
+          </Suspense>
+        )}
+
         {/* Preview */}
         {viewMode === 'preview' && (
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>

package/components/DocsViewer.tsx

@@ -97,6 +97,15 @@ export default function DocsViewer() {
 
   useEffect(() => { fetchTree(activeRoot); }, [activeRoot, fetchTree]);
 
+  // Re-fetch when tab becomes visible (settings may have changed)
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (!document.hidden) fetchTree(activeRoot);
+    };
+    document.addEventListener('visibilitychange', handleVisibility);
+    return () => document.removeEventListener('visibilitychange', handleVisibility);
+  }, [activeRoot, fetchTree]);
+
   const [fileWarning, setFileWarning] = useState<string | null>(null);
 
   // Fetch file content
@@ -167,7 +176,7 @@ export default function DocsViewer() {
         {sidebarOpen && (
           <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
             {/* Root selector */}
-            {roots.length > 1 && (
+            {roots.length > 0 && (
               <div className="p-2 border-b border-[var(--border)]">
                 <select
                   value={activeRoot}

package/components/NewTaskModal.tsx

@@ -155,7 +155,7 @@ export default function NewTaskModal({
               className="w-full px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
             >
               {projects.map(p => (
-                <option key={p.name} value={p.name}>
+                <option key={`${p.name}-${p.path}`} value={p.name}>
                   {p.name} {p.language ? `(${p.language})` : ''}
                 </option>
               ))}

package/components/PipelineEditor.tsx

@@ -0,0 +1,399 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } 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';
+
+// ─── Custom Node ──────────────────────────────────────────
+
+interface NodeData {
+  label: string;
+  project: string;
+  prompt: string;
+  outputs: { name: string; extract: string }[];
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+  [key: string]: unknown;
+}
+
+function PipelineNode({ id, data }: NodeProps<Node<NodeData>>) {
+  return (
+    <div className="bg-[#1e1e3a] border border-[#3a3a5a] rounded-lg shadow-lg min-w-[180px]">
+      <Handle type="target" position={Position.Top} className="!bg-[var(--accent)] !w-3 !h-3" />
+
+      <div className="px-3 py-2 border-b border-[#3a3a5a] flex items-center gap-2">
+        <span className="text-xs font-semibold text-white">{data.label}</span>
+        <div className="ml-auto flex gap-1">
+          <button onClick={() => data.onEdit(id)} className="text-[9px] text-[var(--accent)] hover:text-white">edit</button>
+          <button onClick={() => data.onDelete(id)} className="text-[9px] text-red-400 hover:text-red-300">x</button>
+        </div>
+      </div>
+
+      <div className="px-3 py-1.5 space-y-0.5">
+        {data.project && <div className="text-[9px] text-[var(--accent)]">{data.project}</div>}
+        <div className="text-[9px] text-gray-400 truncate max-w-[200px]">{data.prompt.slice(0, 60) || 'No prompt'}{data.prompt.length > 60 ? '...' : ''}</div>
+        {data.outputs.length > 0 && (
+          <div className="text-[8px] text-green-400">
+            outputs: {data.outputs.map(o => o.name).join(', ')}
+          </div>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="!bg-[var(--accent)] !w-3 !h-3" />
+    </div>
+  );
+}
+
+const nodeTypes = { pipeline: PipelineNode };
+
+// ─── Node Edit Modal ──────────────────────────────────────
+
+function NodeEditModal({ node, projects, onSave, onClose }: {
+  node: { id: string; project: string; prompt: string; outputs: { name: string; extract: string }[] };
+  projects: { name: string; root: string }[];
+  onSave: (data: { id: string; project: string; prompt: string; outputs: { name: string; extract: string }[] }) => void;
+  onClose: () => void;
+}) {
+  const [id, setId] = useState(node.id);
+  const [project, setProject] = useState(node.project);
+  const [prompt, setPrompt] = useState(node.prompt);
+  const [outputs, setOutputs] = useState(node.outputs);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div className="bg-[#1e1e3a] border border-[#3a3a5a] rounded-lg shadow-xl w-[450px] max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+        <div className="px-4 py-3 border-b border-[#3a3a5a]">
+          <h3 className="text-sm font-semibold text-white">Edit Node</h3>
+        </div>
+        <div className="p-4 space-y-3">
+          <div>
+            <label className="text-[10px] text-gray-400 block mb-1">Node ID</label>
+            <input
+              value={id}
+              onChange={e => setId(e.target.value.replace(/\s+/g, '_'))}
+              className="w-full text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1.5 text-white focus:outline-none focus:border-[var(--accent)] font-mono"
+            />
+          </div>
+          <div>
+            <label className="text-[10px] text-gray-400 block mb-1">Project</label>
+            <select
+              value={project}
+              onChange={e => setProject(e.target.value)}
+              className="w-full text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1.5 text-white"
+            >
+              <option value="">Select project...</option>
+              {[...new Set(projects.map(p => p.root))].map(root => (
+                <optgroup key={root} label={root.split('/').pop() || root}>
+                  {projects.filter(p => p.root === root).map((p, i) => (
+                    <option key={`${p.name}-${i}`} value={p.name}>{p.name}</option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="text-[10px] text-gray-400 block mb-1">Prompt</label>
+            <textarea
+              value={prompt}
+              onChange={e => setPrompt(e.target.value)}
+              rows={6}
+              className="w-full text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1.5 text-white focus:outline-none focus:border-[var(--accent)] font-mono resize-y"
+              placeholder="Use {{nodes.xxx.outputs.yyy}} to reference upstream outputs"
+            />
+          </div>
+          <div>
+            <label className="text-[10px] text-gray-400 block mb-1">Outputs</label>
+            {outputs.map((o, i) => (
+              <div key={i} className="flex gap-2 mb-1">
+                <input
+                  value={o.name}
+                  onChange={e => { const n = [...outputs]; n[i] = { ...n[i], name: e.target.value }; setOutputs(n); }}
+                  placeholder="output name"
+                  className="flex-1 text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1 text-white font-mono"
+                />
+                <select
+                  value={o.extract}
+                  onChange={e => { const n = [...outputs]; n[i] = { ...n[i], extract: e.target.value }; setOutputs(n); }}
+                  className="text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1 text-white"
+                >
+                  <option value="result">result</option>
+                  <option value="git_diff">git_diff</option>
+                </select>
+                <button onClick={() => setOutputs(outputs.filter((_, j) => j !== i))} className="text-red-400 text-xs">x</button>
+              </div>
+            ))}
+            <button
+              onClick={() => setOutputs([...outputs, { name: '', extract: 'result' }])}
+              className="text-[9px] text-[var(--accent)] hover:text-white"
+            >
+              + Add output
+            </button>
+          </div>
+        </div>
+        <div className="px-4 py-3 border-t border-[#3a3a5a] flex gap-2 justify-end">
+          <button onClick={onClose} className="text-xs px-3 py-1 text-gray-400 hover:text-white">Cancel</button>
+          <button
+            onClick={() => onSave({ id, project, prompt, outputs: outputs.filter(o => o.name) })}
+            className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Editor ──────────────────────────────────────────
+
+export default function PipelineEditor({ onSave, onClose, initialYaml }: {
+  onSave: (yaml: string) => void;
+  onClose: () => void;
+  initialYaml?: string;
+}) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const [editingNode, setEditingNode] = useState<{ id: string; project: string; prompt: string; outputs: { name: string; extract: string }[] } | null>(null);
+  const [workflowName, setWorkflowName] = useState('my-workflow');
+  const [workflowDesc, setWorkflowDesc] = useState('');
+  const [varsProject, setVarsProject] = useState('');
+  const [projects, setProjects] = useState<{ name: string; root: string }[]>([]);
+  const nextNodeId = useRef(1);
+
+  useEffect(() => {
+    fetch('/api/projects').then(r => r.json())
+      .then((p: { name: string; root: string }[]) => { if (Array.isArray(p)) setProjects(p); })
+      .catch(() => {});
+  }, []);
+
+  // Load initial YAML if provided
+  useEffect(() => {
+    if (!initialYaml) return;
+    try {
+      const parsed = require('yaml').parse(initialYaml);
+      if (parsed.name) setWorkflowName(parsed.name);
+      if (parsed.description) setWorkflowDesc(parsed.description);
+      if (parsed.vars?.project) setVarsProject(parsed.vars.project);
+
+      const nodeEntries = Object.entries(parsed.nodes || {});
+      const newNodes: Node<NodeData>[] = [];
+      const newEdges: Edge[] = [];
+
+      nodeEntries.forEach(([id, def]: [string, any], idx) => {
+        newNodes.push({
+          id,
+          type: 'pipeline',
+          position: { x: 250, y: idx * 150 + 50 },
+          data: {
+            label: id,
+            project: def.project || '',
+            prompt: def.prompt || '',
+            outputs: (def.outputs || []).map((o: any) => ({ name: o.name, extract: o.extract || 'result' })),
+            onEdit: (nid: string) => handleEditNode(nid),
+            onDelete: (nid: string) => handleDeleteNode(nid),
+          },
+        });
+
+        for (const dep of (def.depends_on || [])) {
+          newEdges.push({
+            id: `${dep}-${id}`,
+            source: dep,
+            target: id,
+            markerEnd: { type: MarkerType.ArrowClosed },
+            style: { stroke: '#7c5bf0' },
+          });
+        }
+      });
+
+      setNodes(newNodes);
+      setEdges(newEdges);
+      nextNodeId.current = nodeEntries.length + 1;
+    } catch {}
+  }, [initialYaml]);
+
+  const onConnect = useCallback((params: Connection) => {
+    setEdges(eds => addEdge({
+      ...params,
+      markerEnd: { type: MarkerType.ArrowClosed },
+      style: { stroke: '#7c5bf0' },
+    }, eds));
+  }, [setEdges]);
+
+  const handleAddNode = useCallback(() => {
+    const id = `step_${nextNodeId.current++}`;
+    const newNode: Node<NodeData> = {
+      id,
+      type: 'pipeline',
+      position: { x: 250, y: nodes.length * 150 + 50 },
+      data: {
+        label: id,
+        project: varsProject ? '{{vars.project}}' : '',
+        prompt: '',
+        outputs: [],
+        onEdit: (nid: string) => handleEditNode(nid),
+        onDelete: (nid: string) => handleDeleteNode(nid),
+      },
+    };
+    setNodes(nds => [...nds, newNode]);
+  }, [nodes.length, varsProject, setNodes]);
+
+  const handleEditNode = useCallback((id: string) => {
+    setNodes(nds => {
+      const node = nds.find(n => n.id === id);
+      if (node) {
+        setEditingNode({
+          id: node.id,
+          project: node.data.project,
+          prompt: node.data.prompt,
+          outputs: node.data.outputs,
+        });
+      }
+      return nds;
+    });
+  }, [setNodes]);
+
+  const handleDeleteNode = 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 handleSaveNode = useCallback((data: { id: string; project: string; prompt: string; outputs: { name: string; extract: string }[] }) => {
+    setNodes(nds => nds.map(n => {
+      if (n.id === editingNode?.id) {
+        return {
+          ...n,
+          id: data.id,
+          data: {
+            ...n.data,
+            label: data.id,
+            project: data.project,
+            prompt: data.prompt,
+            outputs: data.outputs,
+          },
+        };
+      }
+      return n;
+    }));
+    // Update edges if id changed
+    if (editingNode && data.id !== editingNode.id) {
+      setEdges(eds => eds.map(e => ({
+        ...e,
+        id: e.id.replace(editingNode.id, data.id),
+        source: e.source === editingNode.id ? data.id : e.source,
+        target: e.target === editingNode.id ? data.id : e.target,
+      })));
+    }
+    setEditingNode(null);
+  }, [editingNode, setNodes, setEdges]);
+
+  // Generate YAML from current state
+  const generateYaml = useCallback(() => {
+    const workflow: any = {
+      name: workflowName,
+      description: workflowDesc || undefined,
+      vars: varsProject ? { project: varsProject } : undefined,
+      nodes: {} as any,
+    };
+
+    for (const node of nodes) {
+      const deps = edges.filter(e => e.target === node.id).map(e => e.source);
+      const nodeDef: any = {
+        project: node.data.project,
+        prompt: node.data.prompt,
+      };
+      if (deps.length > 0) nodeDef.depends_on = deps;
+      if (node.data.outputs.length > 0) nodeDef.outputs = node.data.outputs;
+      workflow.nodes[node.id] = nodeDef;
+    }
+
+    const YAML = require('yaml');
+    return YAML.stringify(workflow);
+  }, [nodes, edges, workflowName, workflowDesc, varsProject]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-[#0a0a1a]">
+      {/* Top bar */}
+      <div className="h-10 border-b border-[#3a3a5a] flex items-center px-4 gap-3 shrink-0">
+        <span className="text-xs font-semibold text-white">Pipeline Editor</span>
+        <input
+          value={workflowName}
+          onChange={e => setWorkflowName(e.target.value)}
+          className="text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-0.5 text-white font-mono w-40"
+          placeholder="Workflow name"
+        />
+        <input
+          value={workflowDesc}
+          onChange={e => setWorkflowDesc(e.target.value)}
+          className="text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-0.5 text-gray-400 flex-1"
+          placeholder="Description (optional)"
+        />
+        <input
+          value={varsProject}
+          onChange={e => setVarsProject(e.target.value)}
+          className="text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-0.5 text-white font-mono w-32"
+          placeholder="Default project"
+        />
+        <button
+          onClick={handleAddNode}
+          className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90"
+        >
+          + Node
+        </button>
+        <button
+          onClick={() => onSave(generateYaml())}
+          className="text-xs px-3 py-1 bg-green-600 text-white rounded hover:opacity-90"
+        >
+          Save
+        </button>
+        <button
+          onClick={onClose}
+          className="text-xs px-3 py-1 text-gray-400 hover:text-white"
+        >
+          Cancel
+        </button>
+      </div>
+
+      {/* Flow canvas */}
+      <div className="flex-1">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          nodeTypes={nodeTypes}
+          fitView
+          deleteKeyCode="Delete"
+          style={{ background: '#0a0a1a' }}
+        >
+          <Background color="#1a1a3a" gap={20} />
+          <Controls />
+        </ReactFlow>
+      </div>
+
+      {/* Edit modal */}
+      {editingNode && (
+        <NodeEditModal
+          node={editingNode}
+          projects={projects}
+          onSave={handleSaveNode}
+          onClose={() => setEditingNode(null)}
+        />
+      )}
+    </div>
+  );
+}