@aion0/forge 0.4.16 → 0.5.1

package/components/ConversationGraphView.tsx

@@ -0,0 +1,347 @@
+'use client';
+
+import { useState, useEffect, useMemo, useRef } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  Handle,
+  Position,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type NodeProps,
+  MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { TaskLogEntry } from '@/src/types';
+
+// ─── Colors ──────────────────────────────────────────────
+
+const PALETTE = [
+  { bg: '#1e2a4a', border: '#3b82f6', accent: '#60a5fa', running: '#fbbf24' },
+  { bg: '#2a1e4a', border: '#8b5cf6', accent: '#a78bfa', running: '#fbbf24' },
+  { bg: '#1e3a2a', border: '#22c55e', accent: '#4ade80', running: '#fbbf24' },
+  { bg: '#3a2a1e', border: '#f97316', accent: '#fb923c', running: '#fbbf24' },
+];
+
+// ─── Task stream hook ────────────────────────────────────
+
+function useTaskStream(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;
+}
+
+// ─── Custom Nodes ────────────────────────────────────────
+
+interface AgentNodeData {
+  agentId: string;
+  agent: string;
+  role: string;
+  colorIdx: number;
+  status: 'idle' | 'running' | 'done' | 'failed';
+  lastContent: string;
+  taskId?: string;
+  round: number;
+  [key: string]: unknown;
+}
+
+function AgentExecutionNode({ data }: NodeProps<Node<AgentNodeData>>) {
+  const p = PALETTE[data.colorIdx % PALETTE.length];
+  const isRunning = data.status === 'running';
+  const log = useTaskStream(data.taskId, isRunning);
+  const logEndRef = useRef<HTMLDivElement>(null);
+  useEffect(() => { logEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [log]);
+
+  const borderColor = isRunning ? p.running : data.status === 'done' ? p.accent : data.status === 'failed' ? '#ef4444' : p.border;
+
+  return (
+    <div
+      className={`rounded-xl shadow-lg ${isRunning ? 'ring-2 ring-yellow-400/40' : ''}`}
+      style={{ background: p.bg, border: `2px solid ${borderColor}`, width: 280, minHeight: 120 }}
+    >
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3" style={{ background: p.accent }} />
+
+      {/* Header */}
+      <div className="px-3 py-2 flex items-center gap-2" style={{ borderBottom: `1px solid ${p.border}` }}>
+        <span className="text-[8px] px-1.5 py-0.5 rounded font-bold" style={{ background: `${p.accent}30`, color: p.accent }}>{data.agent}</span>
+        <span className="text-xs font-bold text-white">{data.agentId}</span>
+        {isRunning && <span className="text-[8px] text-yellow-400 animate-pulse ml-auto">● R{data.round}</span>}
+        {data.status === 'done' && <span className="text-[8px] text-green-400 ml-auto">✓ R{data.round}</span>}
+        {data.status === 'failed' && <span className="text-[8px] text-red-400 ml-auto">✗</span>}
+        {data.status === 'idle' && <span className="text-[8px] text-gray-500 ml-auto">idle</span>}
+      </div>
+
+      {/* Role */}
+      <div className="px-3 pt-1">
+        <div className="text-[8px] text-gray-500 line-clamp-1">{data.role}</div>
+      </div>
+
+      {/* Content area — live log or last output */}
+      <div className="px-3 py-2">
+        {isRunning ? (
+          <div className="max-h-[100px] overflow-y-auto text-[8px] font-mono space-y-0.5">
+            {log.length === 0 ? (
+              <div className="text-gray-500 italic">Starting...</div>
+            ) : (
+              log.slice(-15).map((entry, i) => (
+                <div key={i} className={
+                  entry.type === 'result' ? 'text-green-400' :
+                  entry.subtype === 'error' ? 'text-red-400' :
+                  entry.type === 'system' ? 'text-yellow-500/60' :
+                  'text-gray-400'
+                }>
+                  {entry.type === 'assistant' && entry.subtype === 'tool_use'
+                    ? `⚙ ${entry.tool || 'tool'}`
+                    : entry.content.slice(0, 80)}{entry.content.length > 80 ? '...' : ''}
+                </div>
+              ))
+            )}
+            <div ref={logEndRef} />
+          </div>
+        ) : data.lastContent ? (
+          <div className="text-[8px] text-gray-400 max-h-[80px] overflow-y-auto whitespace-pre-wrap line-clamp-5">
+            {data.lastContent.slice(0, 300)}{data.lastContent.length > 300 ? '...' : ''}
+          </div>
+        ) : (
+          <div className="text-[8px] text-gray-600 italic">Waiting for input...</div>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="!w-3 !h-3" style={{ background: p.accent }} />
+    </div>
+  );
+}
+
+interface PromptNodeData { prompt: string; [key: string]: unknown }
+
+function PromptExecutionNode({ data }: NodeProps<Node<PromptNodeData>>) {
+  return (
+    <div className="bg-[#1a2a1a] border-2 border-green-500/50 rounded-xl shadow-lg" style={{ width: 260 }}>
+      <div className="px-3 py-2 border-b border-green-500/30 flex items-center gap-2">
+        <span className="text-green-400 text-sm">▶</span>
+        <span className="text-[10px] font-bold text-green-300">Initial Prompt</span>
+      </div>
+      <div className="px-3 py-2 text-[9px] text-gray-400 whitespace-pre-wrap line-clamp-3">{data.prompt}</div>
+      <Handle type="source" position={Position.Bottom} className="!bg-green-400 !w-3 !h-3" />
+    </div>
+  );
+}
+
+interface StatusNodeData { label: string; status: string; round: number; maxRounds: number; [key: string]: unknown }
+
+function StatusNode({ data }: NodeProps<Node<StatusNodeData>>) {
+  const color = data.status === 'done' ? '#22c55e' : data.status === 'failed' ? '#ef4444' : data.status === 'running' ? '#fbbf24' : '#6b7280';
+  return (
+    <div className="rounded-xl shadow-lg" style={{ background: '#1a1a2a', border: `2px solid ${color}`, width: 200 }}>
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3" style={{ background: color }} />
+      <div className="px-3 py-3 text-center">
+        <div className="text-[10px] font-bold" style={{ color }}>{data.label}</div>
+        <div className="text-[8px] text-gray-500 mt-0.5">R{data.round}/{data.maxRounds} · {data.status}</div>
+      </div>
+    </div>
+  );
+}
+
+const executionNodeTypes = {
+  agentExec: AgentExecutionNode,
+  promptExec: PromptExecutionNode,
+  statusExec: StatusNode,
+};
+
+// ─── Build graph from pipeline state ─────────────────────
+
+function buildExecutionGraph(pipeline: any): { nodes: Node[]; edges: Edge[] } {
+  const conv = pipeline.conversation;
+  if (!conv) return { nodes: [], edges: [] };
+
+  const config = conv.config;
+  const messages = conv.messages || [];
+  const agents = config.agents || [];
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  const centerX = 300;
+  const agentSpacing = 320;
+  const totalWidth = (agents.length - 1) * agentSpacing;
+  const startX = centerX - totalWidth / 2;
+
+  // 1. Prompt node
+  nodes.push({
+    id: 'prompt',
+    type: 'promptExec',
+    position: { x: centerX - 130, y: 20 },
+    data: { prompt: config.initialPrompt },
+    draggable: true,
+  });
+
+  // 2. Agent nodes — with execution state
+  agents.forEach((a: any, i: number) => {
+    const agentMsgs = messages.filter((m: any) => m.agentId === a.id);
+    const lastMsg = [...agentMsgs].reverse()[0];
+    const status = lastMsg?.status === 'running' ? 'running' :
+                   agentMsgs.some((m: any) => m.status === 'done') ? 'done' :
+                   lastMsg?.status === 'failed' ? 'failed' : 'idle';
+    const lastDone = [...agentMsgs].reverse().find((m: any) => m.status === 'done');
+
+    nodes.push({
+      id: `agent-${a.id}`,
+      type: 'agentExec',
+      position: { x: startX + i * agentSpacing - 140, y: 180 },
+      data: {
+        agentId: a.id,
+        agent: a.agent,
+        role: a.role || '',
+        colorIdx: i,
+        status,
+        lastContent: lastDone?.content || '',
+        taskId: lastMsg?.status === 'running' ? lastMsg.taskId : undefined,
+        round: lastMsg?.round || 0,
+      },
+      draggable: true,
+    });
+
+    // Prompt → Agent
+    edges.push({
+      id: `prompt-agent-${a.id}`,
+      source: 'prompt',
+      target: `agent-${a.id}`,
+      markerEnd: { type: MarkerType.ArrowClosed, color: '#22c55e' },
+      style: { stroke: '#22c55e', strokeWidth: 2 },
+      animated: status === 'running' || (i === 0 && pipeline.status === 'running' && !messages.length),
+    });
+  });
+
+  // 3. Data flow edges between agents
+  for (let i = 0; i < agents.length - 1; i++) {
+    const fromId = agents[i].id;
+    const toId = agents[i + 1].id;
+    const fromMsgs = messages.filter((m: any) => m.agentId === fromId && m.status === 'done');
+    const toMsgs = messages.filter((m: any) => m.agentId === toId);
+    const isFlowing = fromMsgs.length > 0 && toMsgs.length > 0;
+    const isActive = messages.some((m: any) => m.agentId === toId && m.status === 'running');
+    const p = PALETTE[i % PALETTE.length];
+
+    edges.push({
+      id: `flow-${fromId}-${toId}`,
+      source: `agent-${fromId}`,
+      target: `agent-${toId}`,
+      markerEnd: { type: MarkerType.ArrowClosed, color: p.accent },
+      style: { stroke: p.accent, strokeWidth: 2, strokeDasharray: '6 3' },
+      animated: isActive,
+      label: isFlowing ? `context (R${Math.max(...fromMsgs.map((m: any) => m.round))})` : 'context →',
+      labelStyle: { fill: p.accent, fontSize: 9, fontWeight: 600 },
+      type: 'smoothstep',
+    });
+  }
+
+  // 4. Loop back edge (last → first for next round)
+  if (agents.length >= 2 && config.maxRounds > 1) {
+    const lastAgent = agents[agents.length - 1];
+    const firstAgent = agents[0];
+    const lastDone = messages.filter((m: any) => m.agentId === lastAgent.id && m.status === 'done');
+    const isLooping = lastDone.length > 0 && conv.currentRound > 1;
+
+    edges.push({
+      id: `loop-back`,
+      source: `agent-${lastAgent.id}`,
+      target: `agent-${firstAgent.id}`,
+      markerEnd: { type: MarkerType.ArrowClosed, color: '#f97316' },
+      style: { stroke: '#f97316', strokeWidth: 2, strokeDasharray: '8 4', opacity: isLooping ? 1 : 0.3 },
+      animated: isLooping && pipeline.status === 'running',
+      label: isLooping ? `round ${conv.currentRound}` : 'next round',
+      labelStyle: { fill: '#f97316', fontSize: 9, fontWeight: 600 },
+      type: 'smoothstep',
+    });
+  }
+
+  // 5. Status node
+  nodes.push({
+    id: 'status',
+    type: 'statusExec',
+    position: { x: centerX - 100, y: 480 },
+    data: {
+      label: pipeline.status === 'done' ? 'Complete' : pipeline.status === 'failed' ? 'Failed' : pipeline.status === 'cancelled' ? 'Cancelled' : 'Running...',
+      status: pipeline.status,
+      round: conv.currentRound,
+      maxRounds: config.maxRounds,
+    },
+    draggable: true,
+  });
+
+  // Agents → Status
+  agents.forEach((a: any) => {
+    edges.push({
+      id: `agent-${a.id}-status`,
+      source: `agent-${a.id}`,
+      target: 'status',
+      style: { stroke: '#6b7280', strokeWidth: 1, opacity: 0.3 },
+      type: 'smoothstep',
+    });
+  });
+
+  return { nodes, edges };
+}
+
+// ─── Main Component ──────────────────────────────────────
+
+export default function ConversationGraphView({ pipeline }: { pipeline: any }) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+
+  // Rebuild graph when pipeline updates
+  useEffect(() => {
+    const graph = buildExecutionGraph(pipeline);
+    setNodes(graph.nodes);
+    setEdges(graph.edges);
+  }, [pipeline, setNodes, setEdges]);
+
+  return (
+    <div style={{ width: '100%', height: '100%', minHeight: 400 }} className="relative">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={executionNodeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        nodesConnectable={false}
+        style={{ background: '#0a0a1a' }}
+        minZoom={0.3}
+        maxZoom={2}
+      >
+        <Background color="#1a1a3a" gap={20} />
+        <Controls />
+      </ReactFlow>
+
+      {/* Legend */}
+      <div className="absolute bottom-4 left-4 bg-[#0a0a1a]/90 border border-[#3a3a5a] rounded-lg p-2.5 space-y-1 backdrop-blur-sm">
+        <div className="text-[7px] font-bold text-gray-400 uppercase">Legend</div>
+        <div className="flex items-center gap-2 text-[7px] text-gray-400">
+          <span className="w-2 h-2 rounded-full bg-yellow-400 inline-block" /> Running
+        </div>
+        <div className="flex items-center gap-2 text-[7px] text-gray-400">
+          <span className="w-2 h-2 rounded-full bg-green-400 inline-block" /> Done
+        </div>
+        <div className="flex items-center gap-2 text-[7px] text-gray-400">
+          <span className="w-3 h-0.5 inline-block" style={{ borderBottom: '2px dashed #f97316' }} /> Round loop
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/ConversationTerminalView.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import type { TaskLogEntry } from '@/src/types';
+
+// ─── Colors per agent ─────────────────────────────────────
+
+const TERM_COLORS = [
+  { headerBg: '#1e2a4a', border: '#3b82f6', accent: '#60a5fa' },
+  { headerBg: '#2a1e4a', border: '#8b5cf6', accent: '#a78bfa' },
+  { headerBg: '#1e3a2a', border: '#22c55e', accent: '#4ade80' },
+  { headerBg: '#3a2a1e', border: '#f97316', accent: '#fb923c' },
+];
+
+// ─── Task SSE stream hook ─────────────────────────────────
+
+function useAgentStream(taskIds: string[]) {
+  const [logs, setLogs] = useState<Map<string, TaskLogEntry[]>>(new Map());
+  const activeRef = useRef(new Set<string>());
+
+  useEffect(() => {
+    const sources: EventSource[] = [];
+    for (const taskId of taskIds) {
+      if (!taskId || activeRef.current.has(taskId)) continue;
+      activeRef.current.add(taskId);
+      const es = new EventSource(`/api/tasks/${taskId}/stream`);
+      sources.push(es);
+      es.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === 'log') {
+            setLogs(prev => { const next = new Map(prev); next.set(taskId, [...(next.get(taskId) || []), data.entry]); return next; });
+          } else if (data.type === 'complete' && data.task) {
+            setLogs(prev => { const next = new Map(prev); next.set(taskId, data.task.log || []); return next; });
+          }
+        } catch {}
+      };
+      es.onerror = () => { es.close(); activeRef.current.delete(taskId); };
+    }
+    return () => { sources.forEach(es => es.close()); };
+  }, [taskIds.join(',')]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return logs;
+}
+
+// ─── Log line renderer ────────────────────────────────────
+
+function LogLine({ entry, accent }: { entry: TaskLogEntry; accent: string }) {
+  if (entry.type === 'system' && entry.subtype === 'init') return <div className="text-gray-600 text-[9px]">{entry.content}</div>;
+  if (entry.type === 'assistant' && entry.subtype === 'tool_use') {
+    return <div className="text-[10px]"><span style={{ color: accent }}>⚙</span> <span className="text-blue-400">{entry.tool || 'tool'}</span><span className="text-gray-600"> {entry.content.slice(0, 100)}{entry.content.length > 100 ? '...' : ''}</span></div>;
+  }
+  if (entry.type === 'assistant' && entry.subtype === 'tool_result') {
+    return <div className={`text-[10px] ${entry.content.toLowerCase().includes('error') ? 'text-red-400' : 'text-gray-500'}`}>{'  → '}{entry.content.slice(0, 150)}{entry.content.length > 150 ? '...' : ''}</div>;
+  }
+  if (entry.type === 'result') return <div className="text-green-400 text-[10px]">{entry.content}</div>;
+  if (entry.subtype === 'error') return <div className="text-red-400 text-[10px]">{entry.content}</div>;
+  return <div className="text-[10px]" style={{ color: '#c9d1d9' }}>{entry.content.slice(0, 200)}{entry.content.length > 200 ? '...' : ''}</div>;
+}
+
+// ─── Agent terminal panel with inline input ───────────────
+
+function AgentTerminalPanel({ agentDef, messages, colorIdx, allLogs, pipelineId, pipelineRunning, onViewTask }: {
+  agentDef: { id: string; agent: string; role: string };
+  messages: any[];
+  colorIdx: number;
+  allLogs: Map<string, TaskLogEntry[]>;
+  pipelineId: string;
+  pipelineRunning: boolean;
+  onViewTask?: (taskId: string) => void;
+}) {
+  const colors = TERM_COLORS[colorIdx % TERM_COLORS.length];
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const lastMsg = messages[messages.length - 1];
+  const isRunning = lastMsg?.status === 'running';
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, allLogs]);
+
+  const handleSend = async () => {
+    if (!input.trim() || sending) return;
+    setSending(true);
+    try {
+      await fetch(`/api/pipelines/${pipelineId}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'inject', agentId: agentDef.id, message: input }),
+      });
+      setInput('');
+    } catch {}
+    setSending(false);
+  };
+
+  return (
+    <div className="flex flex-col min-w-0 min-h-0 border rounded-lg overflow-hidden" style={{ borderColor: colors.border, flex: 1 }}>
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 shrink-0" style={{ background: colors.headerBg, borderBottom: `1px solid ${colors.border}` }}>
+        <div className="flex gap-1">
+          <span className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
+          <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />
+          <span className="w-2.5 h-2.5 rounded-full bg-green-500/80" />
+        </div>
+        <span className="text-[10px] font-bold text-white ml-1">{agentDef.id}</span>
+        <span className="text-[8px] px-1.5 py-0.5 rounded font-medium" style={{ background: `${colors.accent}30`, color: colors.accent }}>{agentDef.agent}</span>
+        {isRunning && <span className="text-[8px] text-yellow-400 animate-pulse">● running</span>}
+        {lastMsg && !isRunning && lastMsg.status === 'done' && <span className="text-[8px] text-green-400">✓</span>}
+        <span className="text-[7px] text-gray-500 ml-auto truncate max-w-[120px]">{agentDef.role}</span>
+      </div>
+
+      {/* Terminal body */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto p-2 font-mono text-[11px] leading-[1.6]" style={{ background: '#0d1117', color: '#c9d1d9' }}>
+        {messages.length === 0 && (
+          <div className="text-gray-600"><span style={{ color: colors.accent }}>$</span> waiting for input...</div>
+        )}
+        {messages.map((msg: any, idx: number) => {
+          const taskLogs = allLogs.get(msg.taskId) || [];
+          return (
+            <div key={idx} className="mb-2">
+              <div className="text-gray-600 text-[8px]">{'─'.repeat(15)} R{msg.round} {'─'.repeat(15)}</div>
+              {/* User inject messages */}
+              {msg.agentId === 'user' ? (
+                <div className="text-yellow-300 text-[10px]"><span className="text-yellow-500">▸</span> {msg.content}</div>
+              ) : msg.status === 'running' ? (
+                <>
+                  <div className="text-gray-500 text-[9px]"><span style={{ color: colors.accent }}>$</span> task:{msg.taskId}</div>
+                  {taskLogs.length === 0 ? (
+                    <div className="text-gray-600 animate-pulse">Starting...</div>
+                  ) : taskLogs.map((e, i) => <LogLine key={i} entry={e} accent={colors.accent} />)}
+                  <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-0.5" />
+                </>
+              ) : msg.status === 'done' ? (
+                <>
+                  <div className="text-gray-500 text-[9px]">
+                    <span style={{ color: colors.accent }}>$</span> task:{msg.taskId}
+                    {onViewTask && <button onClick={() => onViewTask(msg.taskId)} className="ml-2 hover:underline" style={{ color: colors.accent }}>view</button>}
+                  </div>
+                  <div className="whitespace-pre-wrap text-[10px]" style={{ color: '#c9d1d9' }}>{msg.content.slice(0, 5000)}{msg.content.length > 5000 ? '\n[...]' : ''}</div>
+                  <div className="text-green-500 text-[8px] mt-0.5">✓ {new Date(msg.timestamp).toLocaleTimeString()}</div>
+                </>
+              ) : msg.status === 'failed' ? (
+                <div className="text-red-400 text-[10px]">{msg.content || 'Failed'}</div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Inline input */}
+      {pipelineRunning && (
+        <div className="flex items-center gap-1 px-2 py-1 shrink-0" style={{ background: '#161b22', borderTop: `1px solid ${colors.border}40` }}>
+          <span className="text-[10px] font-mono" style={{ color: colors.accent }}>$</span>
+          <input
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && !e.shiftKey && handleSend()}
+            placeholder={`@${agentDef.id}...`}
+            className="flex-1 bg-transparent text-[10px] font-mono text-gray-300 focus:outline-none placeholder:text-gray-600"
+          />
+          {input.trim() && (
+            <button onClick={handleSend} disabled={sending} className="text-[8px] px-1.5 py-0.5 rounded" style={{ background: `${colors.accent}30`, color: colors.accent }}>
+              {sending ? '...' : 'Send'}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Horizontal data flow connector ───────────────────────
+
+function HorizontalFlow({ fromColor, toColor, label, isActive }: {
+  fromColor: string; toColor: string; label: string; isActive: boolean;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center w-10 shrink-0 gap-0.5">
+      <svg width="32" height="24" viewBox="0 0 32 24">
+        <defs>
+          <linearGradient id={`hflow-${label}`} x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor={fromColor} />
+            <stop offset="100%" stopColor={toColor} />
+          </linearGradient>
+        </defs>
+        <line x1="0" y1="12" x2="24" y2="12" stroke={`url(#hflow-${label})`} strokeWidth="2"
+          strokeDasharray={isActive ? '4 3' : '2 2'} opacity={isActive ? 1 : 0.3}>
+          {isActive && <animate attributeName="stroke-dashoffset" from="14" to="0" dur="0.6s" repeatCount="indefinite" />}
+        </line>
+        <polygon points="22,6 32,12 22,18" fill={toColor} opacity={isActive ? 1 : 0.3} />
+      </svg>
+      <div className="text-[7px] text-gray-500">{label}</div>
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────
+
+export default function ConversationTerminalView({ pipeline, onViewTask }: {
+  pipeline: any;
+  onViewTask?: (taskId: string) => void;
+}) {
+  const conv = pipeline.conversation;
+  if (!conv) return null;
+
+  const { config, messages } = conv;
+  const agents = config.agents || [];
+  const isRunning = pipeline.status === 'running';
+
+  const runningTaskIds = messages.filter((m: any) => m.status === 'running' && m.taskId).map((m: any) => m.taskId);
+  const allLogs = useAgentStream(runningTaskIds);
+
+  const agentMessages: Record<string, any[]> = {};
+  for (const a of agents) {
+    agentMessages[a.id] = messages.filter((m: any) => m.agentId === a.id || (m.agentId === 'user' && m.content.includes(`@${a.id}`)));
+  }
+
+  // Data flow state per pair
+  const getFlowState = (fromIdx: number, toIdx: number) => {
+    const toAgent = agents[toIdx];
+    const toMsgs = messages.filter((m: any) => m.agentId === toAgent.id);
+    const latestTo = toMsgs[toMsgs.length - 1];
+    const isActive = latestTo?.status === 'running';
+    const latestRound = latestTo?.round || 0;
+    return { isActive, round: latestRound };
+  };
+
+  return (
+    <div className="flex flex-col h-full" style={{ background: '#0d1117' }}>
+      {/* Top: Initial Prompt bar */}
+      <div className="shrink-0 mx-3 mt-2 mb-1 border border-green-500/40 rounded-lg overflow-hidden" style={{ background: '#0d1e0d' }}>
+        <div className="flex items-center gap-2 px-3 py-1" style={{ borderBottom: '1px solid rgba(34,197,94,0.2)' }}>
+          <span className="text-green-400 text-[10px]">▶</span>
+          <span className="text-[10px] font-bold text-green-300">Initial Prompt</span>
+          <span className="text-[8px] text-gray-500 ml-auto">R{conv.currentRound}/{config.maxRounds}</span>
+        </div>
+        <div className="px-3 py-1.5 text-[10px] font-mono text-green-200/80 whitespace-pre-wrap line-clamp-2">{config.initialPrompt}</div>
+      </div>
+
+      {/* Down arrow from prompt */}
+      <div className="flex justify-center shrink-0">
+        <svg width="20" height="16" viewBox="0 0 20 16">
+          <line x1="10" y1="0" x2="10" y2="10" stroke="#22c55e" strokeWidth="2" strokeDasharray="3 2">
+            {isRunning && <animate attributeName="stroke-dashoffset" from="10" to="0" dur="0.6s" repeatCount="indefinite" />}
+          </line>
+          <polygon points="5,10 15,10 10,16" fill="#22c55e" opacity={isRunning ? 1 : 0.4} />
+        </svg>
+      </div>
+
+      {/* Middle: Agent terminals with flow connectors */}
+      <div className="flex-1 flex items-stretch gap-0 px-3 min-h-0">
+        {agents.map((agent: any, i: number) => {
+          const flow = i > 0 ? getFlowState(i - 1, i) : null;
+          return (
+            <div key={agent.id} className="flex items-stretch min-w-0" style={{ flex: 1 }}>
+              {i > 0 && flow && (
+                <HorizontalFlow
+                  fromColor={TERM_COLORS[(i - 1) % TERM_COLORS.length].accent}
+                  toColor={TERM_COLORS[i % TERM_COLORS.length].accent}
+                  label={flow.round > 0 ? `R${flow.round}` : ''}
+                  isActive={flow.isActive}
+                />
+              )}
+              <AgentTerminalPanel
+                agentDef={agent}
+                messages={agentMessages[agent.id] || []}
+                colorIdx={i}
+                allLogs={allLogs}
+                pipelineId={pipeline.id}
+                pipelineRunning={isRunning}
+                onViewTask={onViewTask}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Up arrow to status */}
+      <div className="flex justify-center shrink-0">
+        <svg width="20" height="16" viewBox="0 0 20 16">
+          <line x1="10" y1="0" x2="10" y2="10" stroke={pipeline.status === 'done' ? '#22c55e' : pipeline.status === 'failed' ? '#ef4444' : '#6b7280'} strokeWidth="2" strokeDasharray="3 2" />
+          <polygon points="5,10 15,10 10,16" fill={pipeline.status === 'done' ? '#22c55e' : pipeline.status === 'failed' ? '#ef4444' : '#6b7280'} opacity="0.5" />
+        </svg>
+      </div>
+
+      {/* Bottom: Status bar */}
+      <div className={`shrink-0 mx-3 mb-2 border rounded-lg px-3 py-1.5 text-center text-[10px] font-mono ${
+        pipeline.status === 'done' ? 'border-green-500/40 text-green-400 bg-green-500/5' :
+        pipeline.status === 'failed' ? 'border-red-500/40 text-red-400 bg-red-500/5' :
+        pipeline.status === 'cancelled' ? 'border-gray-500/40 text-gray-400 bg-gray-500/5' :
+        'border-yellow-500/40 text-yellow-400 bg-yellow-500/5'
+      }`}>
+        {pipeline.status === 'running' ? `Running — Round ${conv.currentRound}/${config.maxRounds}` :
+         pipeline.status === 'done' ? `Complete — ${messages.filter((m: any) => m.agentId !== 'user').length} messages` :
+         pipeline.status === 'failed' ? 'Failed' : 'Cancelled'}
+        {config.stopCondition && pipeline.status === 'running' && (
+          <span className="text-gray-500 ml-2">stop: {config.stopCondition}</span>
+        )}
+      </div>
+    </div>
+  );
+}