@aion0/forge 0.2.4 → 0.2.6

package/app/api/code/route.ts

@@ -174,10 +174,12 @@ export async function GET(req: Request) {
   }
   const gitRepos: GitRepo[] = [];
 
+  const gitOpts = { encoding: 'utf-8' as const, timeout: 5000, stdio: ['pipe', 'pipe', 'pipe'] as any };
+
   function scanGitStatus(dir: string, repoName: string, pathPrefix: string) {
     try {
-      const branch = execSync('git rev-parse --abbrev-ref HEAD', { cwd: dir, encoding: 'utf-8', timeout: 3000 }).trim();
-      const statusOut = execSync('git status --porcelain -u', { cwd: dir, encoding: 'utf-8', timeout: 5000 });
+      const branch = execSync('git rev-parse --abbrev-ref HEAD', { ...gitOpts, cwd: dir, timeout: 3000 }).toString().trim();
+      const statusOut = execSync('git status --porcelain -u', { ...gitOpts, cwd: dir }).toString();
       const changes = statusOut.replace(/\n$/, '').split('\n').filter(Boolean)
         .map(line => {
           if (line.length < 4) return null;
@@ -188,7 +190,7 @@ export async function GET(req: Request) {
         })
         .filter((g): g is { status: string; path: string } => g !== null && !!g.path && !g.path.includes(' -> '));
       let remote = '';
-      try { remote = execSync('git remote get-url origin', { cwd: dir, encoding: 'utf-8', timeout: 2000 }).trim(); } catch {}
+      try { remote = execSync('git remote get-url origin', { ...gitOpts, cwd: dir, timeout: 2000 }).toString().trim(); } catch {}
       if (branch || changes.length > 0) {
         gitRepos.push({ name: repoName, branch, remote, changes });
       }
@@ -197,7 +199,7 @@ export async function GET(req: Request) {
 
   // Check if root is a git repo
   try {
-    execSync('git rev-parse --git-dir', { cwd: resolvedDir, encoding: 'utf-8', timeout: 2000 });
+    execSync('git rev-parse --git-dir', { cwd: resolvedDir, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'] });
     scanGitStatus(resolvedDir, '.', '');
   } catch {
     // Root is not a git repo — scan subdirectories
@@ -206,7 +208,7 @@ export async function GET(req: Request) {
         if (!entry.isDirectory() || entry.name.startsWith('.') || IGNORE.has(entry.name)) continue;
         const subDir = join(resolvedDir, entry.name);
         try {
-          execSync('git rev-parse --git-dir', { cwd: subDir, encoding: 'utf-8', timeout: 2000 });
+          execSync('git rev-parse --git-dir', { cwd: subDir, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'] });
           scanGitStatus(subDir, entry.name, entry.name);
         } catch {}
       }

package/app/api/git/route.ts

@@ -12,7 +12,7 @@ function isUnderProjectRoot(dir: string): boolean {
 }
 
 function git(cmd: string, cwd: string): string {
-  return execSync(`git ${cmd}`, { cwd, encoding: 'utf-8', timeout: 15000 }).trim();
+  return execSync(`git ${cmd}`, { cwd, encoding: 'utf-8', timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] }).toString().trim();
 }
 
 // GET /api/git?dir=<path> — git status for a project
@@ -24,7 +24,7 @@ export async function GET(req: NextRequest) {
 
   try {
     const branch = git('rev-parse --abbrev-ref HEAD', dir);
-    const statusRaw = execSync('git status --porcelain -u', { cwd: dir, encoding: 'utf-8', timeout: 15000 });
+    const statusRaw = execSync('git status --porcelain -u', { cwd: dir, encoding: 'utf-8', timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] }).toString();
     const changes = statusRaw.replace(/\n$/, '').split('\n').filter(Boolean).map(line => ({
       status: line.substring(0, 2).trim() || 'M',
       path: line.substring(3).replace(/\/$/, ''),

package/app/api/pipelines/route.ts

@@ -16,6 +16,22 @@ export async function GET(req: Request) {
     return NextResponse.json(listWorkflows());
   }
 
+  if (type === 'workflow-yaml') {
+    const name = searchParams.get('name');
+    if (!name) return NextResponse.json({ error: 'name required' }, { status: 400 });
+    try {
+      const { readFileSync, existsSync } = await import('node:fs');
+      const filePath = join(FLOWS_DIR, `${name}.yaml`);
+      const altPath = join(FLOWS_DIR, `${name}.yml`);
+      const path = existsSync(filePath) ? filePath : existsSync(altPath) ? altPath : null;
+      if (!path) return NextResponse.json({ error: 'Not found' }, { status: 404 });
+      const yaml = readFileSync(path, 'utf-8');
+      return NextResponse.json({ yaml });
+    } catch {
+      return NextResponse.json({ error: 'Failed to read' }, { status: 500 });
+    }
+  }
+
   return NextResponse.json(listPipelines().sort((a, b) => b.createdAt.localeCompare(a.createdAt)));
 }
 

package/app/api/preview/route.ts

@@ -4,30 +4,39 @@ import { join, dirname } from 'node:path';
 import { homedir } from 'node:os';
 import { spawn, execSync, type ChildProcess } from 'node:child_process';
 
-const CONFIG_FILE = join(homedir(), '.forge', 'preview.json');
+const CONFIG_FILE = join(process.env.FORGE_DATA_DIR || join(homedir(), '.forge'), 'preview.json');
 
-// Persist tunnel state across hot-reloads
+interface PreviewEntry {
+  port: number;
+  url: string | null;
+  status: string;
+  label?: string;
+}
+
+// Persist state across hot-reloads
 const stateKey = Symbol.for('mw-preview-state');
 const g = globalThis as any;
-if (!g[stateKey]) g[stateKey] = { process: null, port: 0, url: null, status: 'stopped' };
-const state: { process: ChildProcess | null; port: number; url: string | null; status: string } = g[stateKey];
+if (!g[stateKey]) g[stateKey] = { entries: new Map<number, { process: ChildProcess | null; url: string | null; status: string; label: string }>() };
+const state: { entries: Map<number, { process: ChildProcess | null; url: string | null; status: string; label: string }> } = g[stateKey];
 
-function getConfig(): { port: number } {
+function getConfig(): PreviewEntry[] {
   try {
-    return JSON.parse(readFileSync(CONFIG_FILE, 'utf-8'));
+    const data = JSON.parse(readFileSync(CONFIG_FILE, 'utf-8'));
+    return Array.isArray(data) ? data : data.port ? [data] : [];
   } catch {
-    return { port: 0 };
+    return [];
   }
 }
 
-function saveConfig(config: { port: number }) {
+function saveConfig(entries: PreviewEntry[]) {
   const dir = dirname(CONFIG_FILE);
   mkdirSync(dir, { recursive: true });
-  writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+  writeFileSync(CONFIG_FILE, JSON.stringify(entries, null, 2));
 }
 
 function getCloudflaredPath(): string | null {
-  const binPath = join(homedir(), '.forge', 'bin', 'cloudflared');
+  const dataDir = process.env.FORGE_DATA_DIR || join(homedir(), '.forge');
+  const binPath = join(dataDir, 'bin', 'cloudflared');
   if (existsSync(binPath)) return binPath;
   try {
     return execSync('which cloudflared', { encoding: 'utf-8' }).trim();
@@ -36,100 +45,105 @@ function getCloudflaredPath(): string | null {
   }
 }
 
-// GET — get current preview status
+// GET — list all previews
 export async function GET() {
-  return NextResponse.json({
-    port: state.port,
-    url: state.url,
-    status: state.status,
-  });
+  const entries: PreviewEntry[] = [];
+  for (const [port, s] of state.entries) {
+    entries.push({ port, url: s.url, status: s.status, label: s.label });
+  }
+  return NextResponse.json(entries);
 }
 
-// POST — start/stop preview tunnel
+// POST — start/stop/manage previews
 export async function POST(req: Request) {
-  const { port, action } = await req.json();
+  const body = await req.json();
 
-  if (action === 'stop' || port === 0) {
-    if (state.process) {
-      state.process.kill('SIGTERM');
-      state.process = null;
+  // Stop a preview
+  if (body.action === 'stop' && body.port) {
+    const entry = state.entries.get(body.port);
+    if (entry?.process) {
+      entry.process.kill('SIGTERM');
     }
-    state.port = 0;
-    state.url = null;
-    state.status = 'stopped';
-    saveConfig({ port: 0 });
-    return NextResponse.json({ port: 0, url: null, status: 'stopped' });
+    state.entries.delete(body.port);
+    syncConfig();
+    return NextResponse.json({ ok: true });
   }
 
-  const p = parseInt(port) || 0;
-  if (!p || p < 1 || p > 65535) {
-    return NextResponse.json({ error: 'Invalid port' }, { status: 400 });
-  }
+  // Start a new preview
+  if (body.action === 'start' && body.port) {
+    const port = parseInt(body.port);
+    if (!port || port < 1 || port > 65535) {
+      return NextResponse.json({ error: 'Invalid port' }, { status: 400 });
+    }
 
-  // Kill existing tunnel if any
-  if (state.process) {
-    state.process.kill('SIGTERM');
-    state.process = null;
-  }
+    // Already running?
+    const existing = state.entries.get(port);
+    if (existing && existing.status === 'running') {
+      return NextResponse.json({ port, url: existing.url, status: 'running', label: existing.label });
+    }
 
-  const binPath = getCloudflaredPath();
-  if (!binPath) {
-    return NextResponse.json({ error: 'cloudflared not installed. Start the main tunnel first to auto-download it.' }, { status: 500 });
-  }
+    const binPath = getCloudflaredPath();
+    if (!binPath) {
+      return NextResponse.json({ error: 'cloudflared not installed. Start the main tunnel first.' }, { status: 500 });
+    }
 
-  state.port = p;
-  state.status = 'starting';
-  state.url = null;
-  saveConfig({ port: p });
+    const label = body.label || `localhost:${port}`;
+    state.entries.set(port, { process: null, url: null, status: 'starting', label });
+    syncConfig();
+
+    // Start tunnel
+    return new Promise<NextResponse>((resolve) => {
+      let resolved = false;
+      const child = spawn(binPath, ['tunnel', '--url', `http://localhost:${port}`], {
+        stdio: ['ignore', 'pipe', 'pipe'],
+      });
+
+      const entry = state.entries.get(port)!;
+      entry.process = child;
+
+      const handleOutput = (data: Buffer) => {
+        const urlMatch = data.toString().match(/(https:\/\/[a-z0-9-]+\.trycloudflare\.com)/);
+        if (urlMatch && !entry.url) {
+          entry.url = urlMatch[1];
+          entry.status = 'running';
+          syncConfig();
+          if (!resolved) {
+            resolved = true;
+            resolve(NextResponse.json({ port, url: entry.url, status: 'running', label }));
+          }
+        }
+      };
 
-  // Start tunnel
-  return new Promise<NextResponse>((resolve) => {
-    let resolved = false;
+      child.stdout?.on('data', handleOutput);
+      child.stderr?.on('data', handleOutput);
 
-    const child = spawn(binPath, ['tunnel', '--url', `http://localhost:${p}`], {
-      stdio: ['ignore', 'pipe', 'pipe'],
-    });
-    state.process = child;
-
-    const handleOutput = (data: Buffer) => {
-      const text = data.toString();
-      const urlMatch = text.match(/(https:\/\/[a-z0-9-]+\.trycloudflare\.com)/);
-      if (urlMatch && !state.url) {
-        state.url = urlMatch[1];
-        state.status = 'running';
+      child.on('exit', () => {
+        entry.process = null;
+        entry.status = 'stopped';
+        entry.url = null;
+        syncConfig();
         if (!resolved) {
           resolved = true;
-          resolve(NextResponse.json({ port: p, url: state.url, status: 'running' }));
+          resolve(NextResponse.json({ port, url: null, status: 'stopped', error: 'Tunnel exited' }));
         }
-      }
-    };
-
-    child.stdout?.on('data', handleOutput);
-    child.stderr?.on('data', handleOutput);
-
-    child.on('exit', () => {
-      state.process = null;
-      state.status = 'stopped';
-      state.url = null;
-      if (!resolved) {
-        resolved = true;
-        resolve(NextResponse.json({ port: p, url: null, status: 'stopped', error: 'Tunnel exited' }));
-      }
-    });
+      });
 
-    child.on('error', (err) => {
-      state.status = 'error';
-      if (!resolved) {
-        resolved = true;
-        resolve(NextResponse.json({ error: err.message }, { status: 500 }));
-      }
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          resolve(NextResponse.json({ port, url: null, status: entry.status, error: 'Timeout' }));
+        }
+      }, 30000);
     });
+  }
+
+  return NextResponse.json({ error: 'Unknown action' }, { status: 400 });
+}
 
-    setTimeout(() => {
-      if (!resolved) {
-        resolved = true;
-        resolve(NextResponse.json({ port: p, url: null, status: state.status, error: 'Timeout waiting for tunnel URL' }));
-      }
-    }, 30000);
-  });
+function syncConfig() {
+  const entries: PreviewEntry[] = [];
+  for (const [port, s] of state.entries) {
+    entries.push({ port, url: s.url, status: s.status, label: s.label });
+  }
+  saveConfig(entries);
 }

package/app/global-error.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <html>
+      <body style={{ background: '#0a0a0a', color: '#e5e5e5', fontFamily: 'monospace', padding: '2rem' }}>
+        <h2>Something went wrong</h2>
+        <p style={{ color: '#999' }}>{error.message}</p>
+        <button onClick={reset} style={{ marginTop: '1rem', padding: '0.5rem 1rem', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
+          Try again
+        </button>
+      </body>
+    </html>
+  );
+}

package/bin/forge-server.mjs

@@ -12,6 +12,7 @@
  *   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)
+ *   forge-server --reset-terminal         Kill terminal server before start (loses tmux sessions)
  *
  * Examples:
  *   forge-server --background --port 4000 --terminal-port 4001 --dir ~/.forge-staging
@@ -35,11 +36,19 @@ function getArg(name) {
   return process.argv[idx + 1];
 }
 
+// ── Version ──
+if (process.argv.includes('--version') || process.argv.includes('-v')) {
+  const pkg = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf-8'));
+  console.log(`@aion0/forge v${pkg.version}`);
+  process.exit(0);
+}
+
 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 resetTerminal = process.argv.includes('--reset-terminal');
 
 const webPort = parseInt(getArg('--port')) || 3000;
 const terminalPort = parseInt(getArg('--terminal-port')) || 3001;
@@ -70,6 +79,20 @@ process.env.PORT = String(webPort);
 process.env.TERMINAL_PORT = String(terminalPort);
 process.env.FORGE_DATA_DIR = DATA_DIR;
 
+// ── Reset terminal server (kill port + tmux sessions) ──
+if (resetTerminal) {
+  console.log(`[forge] Resetting terminal server (port ${terminalPort})...`);
+  try {
+    const pids = execSync(`lsof -ti:${terminalPort}`, { encoding: 'utf-8' }).trim();
+    for (const pid of pids.split('\n').filter(Boolean)) {
+      try { execSync(`kill ${pid.trim()}`); } catch {}
+    }
+    console.log(`[forge] Killed terminal server on port ${terminalPort}`);
+  } catch {
+    console.log(`[forge] No process on port ${terminalPort}`);
+  }
+}
+
 // ── Helper: stop running instance ──
 function stopServer() {
   try {

package/cli/mw.ts

@@ -31,6 +31,19 @@ async function api(path: string, opts?: RequestInit) {
 }
 
 async function main() {
+  if (cmd === '--version' || cmd === '-v') {
+    const { readFileSync } = await import('node:fs');
+    const { join, dirname } = await import('node:path');
+    const { fileURLToPath } = await import('node:url');
+    try {
+      const pkg = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'package.json'), 'utf-8'));
+      console.log(`@aion0/forge v${pkg.version}`);
+    } catch {
+      console.log('forge (version unknown)');
+    }
+    process.exit(0);
+  }
+
   switch (cmd) {
     case 'task':
     case 't': {

package/components/CodeViewer.tsx

@@ -394,7 +394,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   }, []);
 
   return (
-    <div className="flex-1 flex flex-col min-h-0">
+    <div className="flex-1 flex flex-col min-h-0 min-w-0 overflow-hidden">
       {/* Task completion notification */}
       {taskNotification && (
         <div className="shrink-0 px-3 py-1.5 bg-green-900/30 border-b border-green-800/50 flex items-center gap-2 text-xs">
@@ -431,7 +431,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
       )}
 
       {/* File browser + code viewer — bottom */}
-      {codeOpen && <div className="flex-1 flex min-h-0">
+      {codeOpen && <div className="flex-1 flex min-h-0 min-w-0 overflow-hidden">
         {/* Sidebar */}
         {sidebarOpen && (
           <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
@@ -609,7 +609,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
         )}
 
         {/* Code viewer */}
-        <main className="flex-1 flex flex-col min-w-0">
+        <main className="flex-1 flex flex-col min-w-0 overflow-hidden" style={{ width: 0 }}>
           <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0 flex items-center gap-2">
             <button
               onClick={() => setSidebarOpen(v => !v)}
@@ -672,7 +672,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
             </div>
           ) : viewMode === 'diff' && diffContent ? (
             <div className="flex-1 overflow-auto bg-[var(--bg-primary)]">
-              <pre className="p-4 text-[12px] leading-[1.5] font-mono whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}>
+              <pre className="p-4 text-[12px] leading-[1.5] font-mono whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2, overflow: 'auto', maxWidth: 0, minWidth: '100%' }}>
                 {diffContent.split('\n').map((line, i) => {
                   const color = line.startsWith('+') ? 'text-green-400 bg-green-900/20'
                     : line.startsWith('-') ? 'text-red-400 bg-red-900/20'
@@ -689,11 +689,11 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
             </div>
           ) : selectedFile && content !== null ? (
             <div className="flex-1 overflow-auto bg-[var(--bg-primary)]">
-              <pre className="p-4 text-[12px] leading-[1.5] font-mono text-[var(--text-primary)] whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}>
+              <pre className="p-4 text-[12px] leading-[1.5] font-mono text-[var(--text-primary)] whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2, overflow: 'auto', maxWidth: 0, minWidth: '100%' }}>
                 {content.split('\n').map((line, i) => (
                   <div key={i} className="flex hover:bg-[var(--bg-tertiary)]/50">
                     <span className="select-none text-[var(--text-secondary)]/40 text-right pr-4 w-10 shrink-0">{i + 1}</span>
-                    <span className="flex-1">{highlightLine(line, language)}</span>
+                    <span className="whitespace-pre">{highlightLine(line, language)}</span>
                   </div>
                 ))}
               </pre>

package/components/Dashboard.tsx

@@ -324,7 +324,7 @@ export default function Dashboard({ user }: { user: any }) {
         {/* Pipelines */}
         {viewMode === 'pipelines' && (
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <PipelineView />
+            <PipelineView onViewTask={(taskId) => { setViewMode('tasks'); setActiveTaskId(taskId); }} />
           </Suspense>
         )}
 

package/components/PipelineEditor.tsx

@@ -168,7 +168,7 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
   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 [workflowName, setWorkflowName] = useState('');
   const [workflowDesc, setWorkflowDesc] = useState('');
   const [varsProject, setVarsProject] = useState('');
   const [projects, setProjects] = useState<{ name: string; root: string }[]>([]);

package/components/PipelineView.tsx

@@ -60,7 +60,7 @@ const STATUS_COLOR: Record<string, string> = {
   skipped: 'text-gray-500',
 };
 
-export default function PipelineView() {
+export default function PipelineView({ onViewTask }: { onViewTask?: (taskId: string) => void }) {
   const [pipelines, setPipelines] = useState<Pipeline[]>([]);
   const [workflows, setWorkflows] = useState<Workflow[]>([]);
   const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | null>(null);
@@ -69,6 +69,7 @@ export default function PipelineView() {
   const [inputValues, setInputValues] = useState<Record<string, string>>({});
   const [creating, setCreating] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
+  const [editorYaml, setEditorYaml] = useState<string | undefined>(undefined);
 
   const fetchData = useCallback(async () => {
     const [pRes, wRes] = await Promise.all([
@@ -150,12 +151,25 @@ export default function PipelineView() {
       <aside className="w-72 border-r border-[var(--border)] flex flex-col shrink-0">
         <div className="px-3 py-2 border-b border-[var(--border)] flex items-center justify-between">
           <span className="text-[11px] font-semibold text-[var(--text-primary)]">Pipelines</span>
-          <button
-            onClick={() => setShowEditor(true)}
-            className="text-[10px] px-2 py-0.5 rounded text-green-400 hover:bg-green-400/10"
+          <select
+            onChange={async (e) => {
+              const name = e.target.value;
+              if (!name) { setEditorYaml(undefined); setShowEditor(true); return; }
+              try {
+                const res = await fetch(`/api/pipelines?type=workflow-yaml&name=${encodeURIComponent(name)}`);
+                const data = await res.json();
+                setEditorYaml(data.yaml || undefined);
+              } catch { setEditorYaml(undefined); }
+              setShowEditor(true);
+              e.target.value = '';
+            }}
+            className="text-[10px] px-1 py-0.5 rounded text-green-400 bg-transparent hover:bg-green-400/10 cursor-pointer"
+            defaultValue=""
           >
-            Editor
-          </button>
+            <option value="">Editor ▾</option>
+            <option value="">+ New workflow</option>
+            {workflows.map(w => <option key={w.name} value={w.name}>{w.name}</option>)}
+          </select>
           <button
             onClick={() => setShowCreate(v => !v)}
             className={`text-[10px] px-2 py-0.5 rounded ${showCreate ? 'text-white bg-[var(--accent)]' : 'text-[var(--accent)] hover:bg-[var(--accent)]/10'}`}
@@ -322,7 +336,12 @@ export default function PipelineView() {
                         <span className={STATUS_COLOR[node.status]}>{STATUS_ICON[node.status]}</span>
                         <span className="text-xs font-semibold text-[var(--text-primary)]">{nodeId}</span>
                         {node.taskId && (
-                          <span className="text-[9px] text-[var(--text-secondary)] font-mono">task:{node.taskId}</span>
+                          <button
+                            onClick={() => onViewTask?.(node.taskId!)}
+                            className="text-[9px] text-[var(--accent)] font-mono hover:underline"
+                          >
+                            task:{node.taskId}
+                          </button>
                         )}
                         {node.iterations > 1 && (
                           <span className="text-[9px] text-yellow-400">iter {node.iterations}</span>
@@ -416,6 +435,7 @@ nodes:
       {showEditor && (
         <Suspense fallback={null}>
           <PipelineEditor
+            initialYaml={editorYaml}
             onSave={async (yaml) => {
               // Save YAML to ~/.forge/flows/
               await fetch('/api/pipelines', {