@aion0/forge 0.4.15 → 0.5.0

package/components/HelpTerminal.tsx

@@ -8,13 +8,13 @@ import '@xterm/xterm/css/xterm.css';
 const SESSION_NAME = 'mw-forge-help';
 
 function getWsUrl() {
-  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '3001')}`;
+  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '8404')}`;
   const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const wsHost = window.location.hostname;
   if (wsHost !== 'localhost' && wsHost !== '127.0.0.1') {
     return `${wsProtocol}//${window.location.host}/terminal-ws`;
   }
-  const webPort = parseInt(window.location.port) || 3000;
+  const webPort = parseInt(window.location.port) || 8403;
   return `${wsProtocol}//${wsHost}:${webPort + 1}`;
 }
 
@@ -27,6 +27,7 @@ export default function HelpTerminal() {
 
     let disposed = false;
     let dataDir = '~/.forge/data';
+    let agentCmd = 'claude';
 
     const cs = getComputedStyle(document.documentElement);
     const tv = (name: string) => cs.getPropertyValue(name).trim();
@@ -75,7 +76,7 @@ export default function HelpTerminal() {
               isNewSession = false;
               setTimeout(() => {
                 if (socket.readyState === WebSocket.OPEN) {
-                  socket.send(JSON.stringify({ type: 'input', data: `cd "${dataDir}" 2>/dev/null && claude\n` }));
+                  socket.send(JSON.stringify({ type: 'input', data: `cd "${dataDir}" 2>/dev/null && ${agentCmd}\n` }));
                 }
               }, 300);
             }
@@ -96,11 +97,15 @@ export default function HelpTerminal() {
       socket.onerror = () => {};
     }
 
-    // Fetch data dir then connect
-    fetch('/api/help?action=status').then(r => r.json())
-      .then(data => { if (data.dataDir) dataDir = data.dataDir; })
-      .catch(() => {})
-      .finally(() => { if (!disposed) connect(); });
+    // Fetch data dir + default agent then connect
+    Promise.all([
+      fetch('/api/help?action=status').then(r => r.json()).then(data => { if (data.dataDir) dataDir = data.dataDir; }).catch(() => {}),
+      fetch('/api/agents').then(r => r.json()).then(data => {
+        const defaultId = data.defaultAgent || 'claude';
+        const agent = (data.agents || []).find((a: any) => a.id === defaultId);
+        if (agent?.path) agentCmd = agent.path;
+      }).catch(() => {}),
+    ]).finally(() => { if (!disposed) connect(); });
 
     term.onData((data) => {
       if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data }));

package/components/InlinePipelineView.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import type { TaskLogEntry } from '@/src/types';
+
+const ConversationTerminalView = lazy(() => import('./ConversationTerminalView'));
+
+// ─── Task stream hook ─────────────────────────────────────
+
+function useTaskStreamInline(taskId: string | undefined, isRunning: boolean) {
+  const [log, setLog] = useState<TaskLogEntry[]>([]);
+  useEffect(() => {
+    if (!taskId || !isRunning) { setLog([]); return; }
+    const es = new EventSource(`/api/tasks/${taskId}/stream`);
+    es.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'log') setLog(prev => [...prev, data.entry]);
+        else if (data.type === 'complete' && data.task) setLog(data.task.log);
+      } catch {}
+    };
+    es.onerror = () => es.close();
+    return () => es.close();
+  }, [taskId, isRunning]);
+  return log;
+}
+
+// ─── Live log renderer ────────────────────────────────────
+
+function InlineLiveLog({ log }: { log: TaskLogEntry[] }) {
+  const endRef = useRef<HTMLDivElement>(null);
+  useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [log]);
+  if (log.length === 0) return <span className="text-[9px] text-[var(--text-secondary)] italic">Starting...</span>;
+  return (
+    <div className="max-h-[120px] overflow-y-auto text-[8px] font-mono leading-relaxed space-y-0.5">
+      {log.slice(-30).map((entry, i) => (
+        <div key={i} className={
+          entry.type === 'result' ? 'text-green-400' :
+          entry.subtype === 'error' ? 'text-red-400' :
+          entry.type === 'system' ? 'text-yellow-400/70' :
+          'text-[var(--text-secondary)]'
+        }>
+          {entry.type === 'assistant' && entry.subtype === 'tool_use'
+            ? `⚙ ${entry.tool || 'tool'}: ${entry.content.slice(0, 60)}...`
+            : entry.content.slice(0, 120)}{entry.content.length > 120 ? '...' : ''}
+        </div>
+      ))}
+      <div ref={endRef} />
+    </div>
+  );
+}
+
+// ─── DAG node card ────────────────────────────────────────
+
+function InlineDagNode({ nodeId, node }: { nodeId: string; node: any }) {
+  const isRunning = node.status === 'running';
+  const log = useTaskStreamInline(node.taskId, isRunning);
+  const statusIcon = node.status === 'done' ? '✅' : node.status === 'failed' ? '❌' : node.status === 'running' ? '🔄' : node.status === 'skipped' ? '⏭' : '⏳';
+  return (
+    <div className={`border rounded p-2 ${
+      isRunning ? 'border-yellow-500/40 bg-yellow-500/5' :
+      node.status === 'done' ? 'border-green-500/20 bg-green-500/5' :
+      node.status === 'failed' ? 'border-red-500/20 bg-red-500/5' :
+      'border-[var(--border)]'
+    }`}>
+      <div className="flex items-center gap-1.5 text-[9px]">
+        <span>{statusIcon}</span>
+        <span className="font-semibold text-[var(--text-primary)]">{nodeId}</span>
+        {node.taskId && <span className="text-[7px] text-[var(--accent)] font-mono">task:{node.taskId}</span>}
+        <span className="text-[var(--text-secondary)] ml-auto">{node.status}</span>
+      </div>
+      {isRunning && <div className="mt-1.5"><InlineLiveLog log={log} /></div>}
+      {node.error && <div className="text-[8px] text-red-400 mt-1">{node.error}</div>}
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────
+
+export default function InlinePipelineView({ pipeline, onRefresh }: { pipeline: any; onRefresh: () => void }) {
+  useEffect(() => {
+    if (pipeline.status !== 'running') return;
+    const timer = setInterval(onRefresh, 3000);
+    return () => clearInterval(timer);
+  }, [pipeline.status, onRefresh]);
+
+  const isConversation = pipeline.type === 'conversation' && pipeline.conversation;
+
+  return (
+    <div className="bg-[var(--bg-tertiary)]/50">
+      {isConversation ? (
+        <div style={{ height: 450 }}>
+          <Suspense fallback={<div className="flex items-center justify-center h-full text-[9px] text-[var(--text-secondary)]">Loading...</div>}>
+            <ConversationTerminalView pipeline={pipeline} />
+          </Suspense>
+        </div>
+      ) : (
+        <div className="px-3 py-2 space-y-1.5">
+          {pipeline.nodeOrder.map((nodeId: string) => (
+            <InlineDagNode key={nodeId} nodeId={nodeId} node={pipeline.nodes[nodeId]} />
+          ))}
+        </div>
+      )}
+      {pipeline.status !== 'running' && (
+        <div className={`text-[8px] text-center py-1 ${pipeline.status === 'done' ? 'text-green-400' : 'text-red-400'}`}>
+          Pipeline {pipeline.status}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/MobileView.tsx

@@ -19,6 +19,8 @@ export default function MobileView() {
   const [debugLevel, setDebugLevel] = useState<'off' | 'simple' | 'verbose'>('off');
   const debugLevelRef = useRef<'off' | 'simple' | 'verbose'>('off');
   const [hasSession, setHasSession] = useState(false);
+  const [availableAgents, setAvailableAgents] = useState<{ id: string; name: string }[]>([]);
+  const [selectedAgent, setSelectedAgent] = useState('claude');
   const scrollRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const abortRef = useRef<AbortController | null>(null);
@@ -31,6 +33,12 @@ export default function MobileView() {
     fetch('/api/tunnel').then(r => r.json())
       .then(data => { setTunnelUrl(data.url || null); })
       .catch(() => {});
+    fetch('/api/agents').then(r => r.json())
+      .then(data => {
+        const agents = (data.agents || []).filter((a: any) => a.enabled && a.detected !== false);
+        setAvailableAgents(agents);
+        setSelectedAgent(data.defaultAgent || 'claude');
+      }).catch(() => {});
   }, []);
 
   // Auto-scroll
@@ -116,6 +124,7 @@ export default function MobileView() {
           message: text,
           projectPath: selectedProject.path,
           resume: false,
+          agent: selectedAgent,
         }),
         signal: abort.signal,
       });
@@ -248,6 +257,17 @@ export default function MobileView() {
               }}
               className="text-sm px-3 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]"
             >↻</button>
+            {availableAgents.length > 1 && (
+              <select
+                value={selectedAgent}
+                onChange={e => setSelectedAgent(e.target.value)}
+                className="bg-[#0d1117] border border-[#30363d] rounded px-1 py-1 text-[10px] text-[#e6edf3] w-16"
+              >
+                {availableAgents.map(a => (
+                  <option key={a.id} value={a.id}>{a.name.split(' ')[0]}</option>
+                ))}
+              </select>
+            )}
           </>
         )}
         {tunnelUrl && (

package/components/MonitorPanel.tsx

@@ -4,9 +4,10 @@ import { useState, useEffect, useCallback } from 'react';
 
 interface MonitorData {
   processes: {
-    nextjs: { running: boolean; pid: string };
-    terminal: { running: boolean; pid: string };
-    telegram: { running: boolean; pid: string };
+    nextjs: { running: boolean; pid: string; startedAt?: string };
+    terminal: { running: boolean; pid: string; startedAt?: string };
+    telegram: { running: boolean; pid: string; startedAt?: string };
+    workspace: { running: boolean; pid: string; startedAt?: string };
     tunnel: { running: boolean; pid: string; url: string };
   };
   sessions: { name: string; created: string; attached: boolean; windows: number }[];
@@ -47,13 +48,17 @@ export default function MonitorPanel({ onClose }: { onClose: () => void }) {
                   { label: 'Next.js', ...data.processes.nextjs },
                   { label: 'Terminal Server', ...data.processes.terminal },
                   { label: 'Telegram Bot', ...data.processes.telegram },
+                  { label: 'Workspace Daemon', ...data.processes.workspace },
                   { label: 'Tunnel', ...data.processes.tunnel },
                 ].map(p => (
                   <div key={p.label} className="flex items-center gap-2 text-xs">
                     <span className={p.running ? 'text-green-400' : 'text-gray-500'}>●</span>
                     <span className="text-[var(--text-primary)] w-28">{p.label}</span>
                     {p.running ? (
-                      <span className="text-[var(--text-secondary)] font-mono text-[10px]">pid: {p.pid}</span>
+                      <>
+                        <span className="text-[var(--text-secondary)] font-mono text-[10px]">pid: {p.pid}</span>
+                        {(p as any).startedAt && <span className="text-gray-500 font-mono text-[9px]">{(p as any).startedAt}</span>}
+                      </>
                     ) : (
                       <span className="text-gray-500 text-[10px]">stopped</span>
                     )}

package/components/NewTaskModal.tsx

@@ -26,6 +26,7 @@ interface TaskData {
   scheduledAt?: string;
   mode?: TaskMode;
   watchConfig?: WatchConfig;
+  agent?: string;
 }
 
 export default function NewTaskModal({
@@ -64,6 +65,19 @@ export default function NewTaskModal({
   const [delayMinutes, setDelayMinutes] = useState(30);
   const [scheduledTime, setScheduledTime] = useState(editTask?.scheduledAt ? new Date(editTask.scheduledAt).toISOString().slice(0, 16) : '');
 
+  // Agent selection
+  const [availableAgents, setAvailableAgents] = useState<{ id: string; name: string; detected?: boolean }[]>([]);
+  const [selectedAgent, setSelectedAgent] = useState('');
+
+  useEffect(() => {
+    fetch('/api/agents').then(r => r.json())
+      .then(data => {
+        const agents = (data.agents || []).filter((a: any) => a.enabled && a.detected !== false);
+        setAvailableAgents(agents);
+        setSelectedAgent(data.defaultAgent || 'claude');
+      }).catch(() => {});
+  }, []);
+
   useEffect(() => {
     fetch('/api/projects').then(r => r.json()).then((p: Project[]) => {
       setProjects(p);
@@ -132,6 +146,8 @@ export default function NewTaskModal({
       data.watchConfig = wc;
     }
 
+    if (selectedAgent) data.agent = selectedAgent;
+
     onCreate(data);
   };
 
@@ -162,6 +178,22 @@ export default function NewTaskModal({
             </select>
           </div>
 
+          {/* Agent */}
+          {availableAgents.length > 1 && (
+            <div>
+              <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Agent</label>
+              <select
+                value={selectedAgent}
+                onChange={e => setSelectedAgent(e.target.value)}
+                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)]"
+              >
+                {availableAgents.map(a => (
+                  <option key={a.id} value={a.id}>{a.name}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
           {/* Task Mode */}
           <div>
             <label className="text-[11px] text-[var(--text-secondary)] block mb-1">Mode</label>

package/components/PipelineEditor.tsx

@@ -36,6 +36,9 @@ function PipelineNode({ id, data }: NodeProps<Node<NodeData>>) {
       <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-[8px] px-1 py-0.5 rounded font-medium ${
+          (data as any).mode === 'shell' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-purple-500/20 text-purple-400'
+        }`}>{(data as any).mode === 'shell' ? 'shell' : ((data as any).agent || 'default')}</span>
         <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>
@@ -62,15 +65,18 @@ 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 }[] };
+function NodeEditModal({ node, projects, agents, onSave, onClose }: {
+  node: { id: string; project: string; prompt: string; agent?: string; mode?: 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;
+  agents: { id: string; name: string }[];
+  onSave: (data: { id: string; project: string; prompt: string; agent?: string; mode?: 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 [agent, setAgent] = useState(node.agent || '');
+  const [mode, setMode] = useState(node.mode || 'claude');
   const [outputs, setOutputs] = useState(node.outputs);
 
   return (
@@ -105,6 +111,34 @@ function NodeEditModal({ node, projects, onSave, onClose }: {
               ))}
             </select>
           </div>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <label className="text-[10px] text-gray-400 block mb-1">Mode</label>
+              <select
+                value={mode}
+                onChange={e => setMode(e.target.value)}
+                className="w-full text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1.5 text-white"
+              >
+                <option value="claude">Agent</option>
+                <option value="shell">Shell</option>
+              </select>
+            </div>
+            {mode !== 'shell' && (
+              <div className="flex-1">
+                <label className="text-[10px] text-gray-400 block mb-1">Agent</label>
+                <select
+                  value={agent}
+                  onChange={e => setAgent(e.target.value)}
+                  className="w-full text-xs bg-[#12122a] border border-[#3a3a5a] rounded px-2 py-1.5 text-white"
+                >
+                  <option value="">Default</option>
+                  {agents.map(a => (
+                    <option key={a.id} value={a.id}>{a.name}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
           <div>
             <label className="text-[10px] text-gray-400 block mb-1">Prompt</label>
             <textarea
@@ -147,7 +181,7 @@ function NodeEditModal({ node, projects, onSave, onClose }: {
         <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) })}
+            onClick={() => onSave({ id, project, prompt, agent: agent || undefined, mode, outputs: outputs.filter(o => o.name) })}
             className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90"
           >
             Save
@@ -167,8 +201,9 @@ 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 [editingNode, setEditingNode] = useState<{ id: string; project: string; prompt: string; agent?: string; mode?: string; outputs: { name: string; extract: string }[] } | null>(null);
   const [workflowName, setWorkflowName] = useState('');
+  const [availableAgents, setAvailableAgents] = useState<{ id: string; name: string }[]>([]);
   const [workflowDesc, setWorkflowDesc] = useState('');
   const [varsProject, setVarsProject] = useState('');
   const [projects, setProjects] = useState<{ name: string; root: string }[]>([]);
@@ -178,6 +213,9 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
     fetch('/api/projects').then(r => r.json())
       .then((p: { name: string; root: string }[]) => { if (Array.isArray(p)) setProjects(p); })
       .catch(() => {});
+    fetch('/api/agents').then(r => r.json())
+      .then(data => setAvailableAgents((data.agents || []).filter((a: any) => a.enabled)))
+      .catch(() => {});
   }, []);
 
   // Load initial YAML if provided
@@ -271,7 +309,7 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
     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 }[] }) => {
+  const handleSaveNode = useCallback((data: { id: string; project: string; prompt: string; agent?: string; mode?: string; outputs: { name: string; extract: string }[] }) => {
     setNodes(nds => nds.map(n => {
       if (n.id === editingNode?.id) {
         return {
@@ -282,6 +320,8 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
             label: data.id,
             project: data.project,
             prompt: data.prompt,
+            agent: data.agent,
+            mode: data.mode,
             outputs: data.outputs,
           },
         };
@@ -315,6 +355,8 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
         project: node.data.project,
         prompt: node.data.prompt,
       };
+      if ((node.data as any).mode === 'shell') nodeDef.mode = 'shell';
+      if ((node.data as any).agent) nodeDef.agent = (node.data as any).agent;
       if (deps.length > 0) nodeDef.depends_on = deps;
       if (node.data.outputs.length > 0) nodeDef.outputs = node.data.outputs;
       workflow.nodes[node.id] = nodeDef;
@@ -392,6 +434,7 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
         <NodeEditModal
           node={editingNode}
           projects={projects}
+          agents={availableAgents}
           onSave={handleSaveNode}
           onClose={() => setEditingNode(null)}
         />