agent-nuvira 2.7.0 → 2.7.2

package/dist/web-dashboard/src/components/DAGView.js

@@ -0,0 +1,477 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DAGView;
+const react_1 = require("react");
+const api_1 = require("../api");
+const PhaseTimeline_1 = __importStar(require("./PhaseTimeline"));
+// ─── Agent Visual Constants ─────────────────────────────────────────────────
+const AGENT_ICONS = {
+    planner: '📋',
+    'context-gatherer': '📂',
+    writer: '✏️',
+    reviewer: '👁️',
+    tester: '🧪',
+    debugger: '🐛',
+    runner: '▶️',
+    git: '🔀',
+    package: '📦',
+    'github-release': '🏷️',
+    security: '🔒',
+    orchestrator: '🎯',
+};
+const AGENT_COLORS = {
+    planner: '#58a6ff',
+    'context-gatherer': '#39d2c0',
+    writer: '#d29922',
+    reviewer: '#bc8cff',
+    tester: '#3fb950',
+    debugger: '#f85149',
+    runner: '#58a6ff',
+    git: '#f0883e',
+    package: '#db6d28',
+    'github-release': '#3fb950',
+    security: '#f85149',
+    orchestrator: '#f0883e',
+};
+const STATUS_COLORS = {
+    pending: { bg: '#1a1f2e', stroke: '#30363d', text: '#6e7681' },
+    running: { bg: 'rgba(88, 166, 255, 0.12)', stroke: '#58a6ff', text: '#58a6ff' },
+    completed: { bg: 'rgba(63, 185, 80, 0.12)', stroke: '#3fb950', text: '#3fb950' },
+    failed: { bg: 'rgba(248, 81, 73, 0.12)', stroke: '#f85149', text: '#f85149' },
+};
+const STATUS_BADGES = {
+    pending: '⏳ Pending',
+    running: '▶️ Running',
+    completed: '✅ Done',
+    failed: '❌ Failed',
+};
+const COMPLEXITY_BADGES = {
+    trivial: { icon: '🟢', color: '#3fb950' },
+    simple: { icon: '🔵', color: '#58a6ff' },
+    moderate: { icon: '🟡', color: '#d29922' },
+    complex: { icon: '🟠', color: '#f0883e' },
+    critical: { icon: '🔴', color: '#f85149' },
+};
+const AGENT_LABELS = {
+    planner: 'Planner',
+    'context-gatherer': 'Context',
+    writer: 'Writer',
+    reviewer: 'Reviewer',
+    tester: 'Tester',
+    debugger: 'Debugger',
+    runner: 'Runner',
+    git: 'Git',
+    package: 'Package',
+    'github-release': 'Release',
+    security: 'Security',
+    orchestrator: 'Orchestrator',
+};
+function computeLayout(nodes, edges, nodeW = 160, nodeH = 68, gapX = 40, gapY = 24, padding = 40) {
+    if (nodes.length === 0) {
+        return { layoutNodes: [], svgW: 400, svgH: 200 };
+    }
+    // Assign steps based on topological order
+    const steps = new Map();
+    const visited = new Set();
+    function assignStep(id) {
+        if (steps.has(id))
+            return steps.get(id);
+        if (visited.has(id))
+            return 0; // cycle protection
+        visited.add(id);
+        const incoming = edges.filter((e) => e.to === id);
+        if (incoming.length === 0) {
+            steps.set(id, 0);
+            return 0;
+        }
+        const maxDepStep = Math.max(...incoming.map((e) => assignStep(e.from)));
+        const step = maxDepStep + 1;
+        steps.set(id, step);
+        return step;
+    }
+    for (const node of nodes)
+        assignStep(node.id);
+    // Group nodes by step
+    const stepGroups = new Map();
+    for (const node of nodes) {
+        const s = steps.get(node.id) ?? 0;
+        if (!stepGroups.has(s))
+            stepGroups.set(s, []);
+        stepGroups.get(s).push(node);
+    }
+    const maxStep = Math.max(...stepGroups.keys());
+    const maxNodesInStep = Math.max(...Array.from(stepGroups.values()).map((g) => g.length));
+    const svgW = (maxStep + 1) * (nodeW + gapX) + padding * 2 - gapX;
+    const svgH = Math.max(maxNodesInStep, 1) * (nodeH + gapY) + padding * 2 - gapY;
+    const layoutNodes = [];
+    for (const node of nodes) {
+        const step = steps.get(node.id) ?? 0;
+        const group = stepGroups.get(step);
+        const indexInStep = group.indexOf(node);
+        const totalInStep = group.length;
+        // Center the group vertically
+        const groupHeight = totalInStep * (nodeH + gapY) - gapY;
+        const startY = svgH / 2 - groupHeight / 2;
+        layoutNodes.push({
+            ...node,
+            x: padding + step * (nodeW + gapX),
+            y: startY + indexInStep * (nodeH + gapY),
+            w: nodeW,
+            h: nodeH,
+            step,
+            totalInStep,
+            indexInStep,
+        });
+    }
+    return { layoutNodes, svgW, svgH };
+}
+// ─── Time Formatting ────────────────────────────────────────────────────────
+function formatDuration(start, end) {
+    if (!start)
+        return '--';
+    const ms = (end || Date.now()) - start;
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+}
+function formatTime(ts) {
+    if (!ts)
+        return '';
+    return new Date(ts).toLocaleTimeString('en-US', { minute: '2-digit', second: '2-digit' });
+}
+// ─── DAG Empty State ───────────────────────────────────────────────────────
+function EmptyDAGState({ memoryTotal }) {
+    return (<>
+      <h2 className="section-title">🔀 Agent Execution DAG</h2>
+      <p className="section-description">
+        Live visualization of the agent execution pipeline. When an agent task runs, you'll see each step
+        appear here in real time as it moves through planning → context gathering → writing → review → testing.
+      </p>
+      <div className="dag-empty">
+        <div className="dag-empty-icon">🔀</div>
+        <h3>No Active Pipeline</h3>
+        <p>Run an agent task to see the execution pipeline appear here in real time.</p>
+        {memoryTotal !== undefined && memoryTotal > 0 && (<p className="dag-empty-hint">
+            <code>{memoryTotal}</code> past executions are stored in memory.
+          </p>)}
+      </div>
+    </>);
+}
+// ─── Main Component ─────────────────────────────────────────────────────────
+function DAGView({ data }) {
+    const dag = data?.dag;
+    const memoryTotal = data?.memory?.total;
+    const [liveDAG, setLiveDAG] = (0, react_1.useState)(null);
+    const [selectedNode, setSelectedNode] = (0, react_1.useState)(null);
+    // Phase 4 — track the live DAG's engine context + loop-turn telemetry (the
+    // SSE 'dag' event carries them; a stale snapshot in data.dag is ignored in
+    // favor of the newest broadcast).
+    const [liveEngine, setLiveEngine] = (0, react_1.useState)(undefined);
+    const [liveEngineExplanation, setLiveEngineExplanation] = (0, react_1.useState)(undefined);
+    const [liveLoopTurn, setLiveLoopTurn] = (0, react_1.useState)(undefined);
+    // Subscribe to DAG events via the existing dashboard API connection
+    (0, react_1.useEffect)(() => {
+        const unsub = api_1.dashboardAPI.onDAGEvent((dagData) => {
+            setLiveDAG(dagData);
+            // Phase 4 — engine badge + loop-turn telemetry from the same broadcast.
+            setLiveEngine(dagData.engine);
+            setLiveEngineExplanation(dagData.engineExplanation);
+            setLiveLoopTurn(dagData.loopTurn);
+        });
+        return unsub;
+    }, []);
+    // Use data.dag from dashboard updates (init/refresh events include dag field)
+    const displayDAG = dag || liveDAG;
+    // Phase 4 — the engine context (live broadcast wins over a snapshot).
+    const engine = liveDAG ? liveEngine : (dag?.engine ?? liveEngine);
+    const engineExplanation = liveDAG ? liveEngineExplanation : (dag?.engineExplanation ?? liveEngineExplanation);
+    const loopTurn = liveDAG ? liveLoopTurn : (dag?.loopTurn ?? liveLoopTurn);
+    // Persisted + live pipeline runs powering the scrubbable Run Timeline.
+    const pipelineRuns = (0, react_1.useMemo)(() => (0, PhaseTimeline_1.collectPipelineRuns)(displayDAG, data?.pipelineRuns), [displayDAG, data?.pipelineRuns]);
+    // Scrubbing the timeline highlights the corresponding node in the DAG below.
+    const handleScrub = (phaseId) => {
+        setSelectedNode(phaseId);
+    };
+    // The Run Timeline must stay reachable for HISTORICAL runs even when no
+    // pipeline is live (the normal dashboard state) — only fall back to the
+    // empty state when there are neither runs nor a live DAG nor a loop turn
+    // (Phase 4: a loop turn renders its telemetry card even with no nodes).
+    const hasLiveDAG = !!(displayDAG && (displayDAG.nodes.length > 0 || displayDAG.active));
+    const hasRuns = pipelineRuns.length > 0;
+    const hasLoopTurn = !!loopTurn;
+    if (!hasLiveDAG && !hasRuns && !hasLoopTurn) {
+        return <EmptyDAGState memoryTotal={memoryTotal}/>;
+    }
+    const { nodes, edges, pipeline, active } = displayDAG ?? { nodes: [], edges: [], pipeline: null, active: false };
+    const { layoutNodes, svgW, svgH } = computeLayout(nodes, edges);
+    const runningCount = nodes.filter((n) => n.status === 'running').length;
+    const completedCount = nodes.filter((n) => n.status === 'completed').length;
+    const failedCount = nodes.filter((n) => n.status === 'failed').length;
+    const pendingCount = nodes.filter((n) => n.status === 'pending').length;
+    const totalCount = nodes.length;
+    return (<>
+      <h2 className="section-title">🔀 Agent Execution DAG</h2>
+
+      {/* Scrubbable Run Timeline — scrub to replay the run and highlight each
+            step. Shown whenever runs exist (live or historical), so past runs
+            stay reachable even with no active pipeline. */}
+      {hasRuns && (<div className="dag-timeline-section">
+          <h3 className="section-subtitle">⏱ Run Timeline <span className="timeline-subtitle">— scrub to replay · click a run to switch</span></h3>
+          <PhaseTimeline_1.default runs={pipelineRuns} onScrub={handleScrub}/>
+        </div>)}
+
+      {/* Phase 4 — Loop-turn telemetry card (the chat/execute loop engine):
+            per-turn tool-call stats, rendered even with no pipeline nodes. */}
+      {loopTurn && (<div className="dag-loop-turn-card" data-testid="dag-loop-turn-card">
+          <div className="dag-loop-turn-header">
+            <span className="dag-loop-turn-icon">🔁</span>
+            <span className="dag-loop-turn-title">Loop turn — {loopTurn.title || 'chat turn'}</span>
+            {loopTurn.active && <span className="dag-loop-turn-live">● recording</span>}
+          </div>
+          <div className="dag-loop-turn-meta">
+            <span className="dag-loop-turn-chip">
+              🔧 {loopTurn.toolCallCount} tool call{loopTurn.toolCallCount === 1 ? '' : 's'}
+            </span>
+            {loopTurn.erroredToolCount > 0 && (<span className="dag-loop-turn-chip dag-loop-turn-chip-error">
+                ❌ {loopTurn.erroredToolCount} errored
+              </span>)}
+            {loopTurn.provider && (<span className="dag-loop-turn-chip dag-loop-turn-chip-dim">
+                {loopTurn.provider}{loopTurn.model ? ` · ${loopTurn.model}` : ''}
+              </span>)}
+            {typeof loopTurn.startedAt === 'number' && (<span className="dag-loop-turn-chip dag-loop-turn-chip-dim">
+                ⏱ {formatDuration(loopTurn.startedAt, loopTurn.endedAt)}
+              </span>)}
+            {loopTurn.bounded && <span className="dag-loop-turn-chip dag-loop-turn-chip-error">⛔ bounded</span>}
+            {loopTurn.generationFailed && (<span className="dag-loop-turn-chip dag-loop-turn-chip-error">💀 generation failed</span>)}
+            {loopTurn.cancelled && <span className="dag-loop-turn-chip dag-loop-turn-chip-dim">✖ cancelled</span>}
+          </div>
+          {loopTurn.toolCalls.length > 0 && (<div className="dag-loop-turn-tools">
+              {loopTurn.toolCalls.slice(-12).map((c, i) => (<span key={`${c.tool}-${i}`} className={`dag-loop-tool ${c.ok === false ? 'dag-loop-tool-error' : ''}`} title={c.error || `${c.tool}${c.durationMs !== undefined ? ` · ${c.durationMs}ms` : ''}`}>
+                  {c.ok === false ? '❌' : '✓'} {c.tool}
+                </span>))}
+            </div>)}
+        </div>)}
+
+      {hasLiveDAG && (<>
+      {/* Pipeline Header */}
+      <div className={`dag-status-bar ${active ? 'active' : ''}`}>
+        <div className="dag-pipeline-name">
+          {active && <span className="dag-live-dot"/>}
+          {pipeline || 'Execution Pipeline'}
+        </div>
+        <div className="dag-pipeline-meta">
+          {active && <span className="dag-live-badge">LIVE</span>}
+          {/* Phase 4 — engine badge: which engine executed this run, with the
+                router's audit line as the tooltip. */}
+          {engine && (<span className={`dag-engine-badge dag-engine-${engine}`} title={engineExplanation || (engine === 'loop' ? 'Single agentic loop' : 'Orchestrator pipeline')} data-testid="dag-engine-badge">
+              {engine === 'loop' ? '🔁 loop engine' : '⬡ pipeline engine'}
+            </span>)}
+          <span className="dag-step-count">{totalCount} steps</span>
+          {runningCount > 0 && <span className="dag-running-badge">▶ {runningCount} running</span>}
+          {pendingCount > 0 && <span className="dag-pending-badge">⏳ {pendingCount} pending</span>}
+          <span className="dag-completed-badge">✅ {completedCount} done</span>
+          {failedCount > 0 && <span className="dag-failed-badge">❌ {failedCount} failed</span>}
+        </div>
+      </div>
+
+      {/* SVG DAG Visualization */}
+      <div className="dag-container">
+        <svg width={svgW} height={svgH} viewBox={`0 0 ${svgW} ${svgH}`}>
+          {/* Edge definitions */}
+          <defs>
+            {edges.map((edge) => (<marker key={`arrow-${edge.from}-${edge.to}`} id={`arrow-${edge.from}-${edge.to}`} markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+                <polygon points="0 0, 8 3, 0 6" fill="#58a6ff"/>
+              </marker>))}
+            {/* Glow filter for running nodes */}
+            <filter id="glow">
+              <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+          </defs>
+
+          {/* Draw edges */}
+          {edges.map((edge) => {
+                const fromNode = layoutNodes.find((n) => n.id === edge.from);
+                const toNode = layoutNodes.find((n) => n.id === edge.to);
+                if (!fromNode || !toNode)
+                    return null;
+                const startX = fromNode.x + fromNode.w;
+                const startY = fromNode.y + fromNode.h / 2;
+                const endX = toNode.x;
+                const endY = toNode.y + toNode.h / 2;
+                const midX = (startX + endX) / 2;
+                const toStatus = toNode.status;
+                const edgeColor = toStatus === 'failed' ? '#f85149'
+                    : toStatus === 'running' ? '#58a6ff'
+                        : toStatus === 'completed' ? '#3fb950'
+                            : '#30363d';
+                return (<g key={`edge-${edge.from}-${edge.to}`}>
+                <path d={`M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`} fill="none" stroke={edgeColor} strokeWidth={toStatus === 'pending' ? 1.5 : 2.5} strokeOpacity={toStatus === 'pending' ? 0.3 : 0.8} markerEnd={`url(#arrow-${edge.from}-${edge.to})`} className="dag-edge"/>
+              </g>);
+            })}
+
+          {/* Draw nodes */}
+          {layoutNodes.map((node) => {
+                const colors = STATUS_COLORS[node.status];
+                const color = AGENT_COLORS[node.agentType] || '#58a6ff';
+                const icon = AGENT_ICONS[node.agentType] || '⚙️';
+                const label = AGENT_LABELS[node.agentType] || node.agentType;
+                const isSelected = selectedNode === node.id;
+                const isRunning = node.status === 'running';
+                return (<g key={`node-${node.id}`} onClick={() => setSelectedNode(isSelected ? null : node.id)} style={{ cursor: 'pointer' }} className="dag-node-group">
+                {/* Selection highlight */}
+                {isSelected && (<rect x={node.x - 4} y={node.y - 4} width={node.w + 8} height={node.h + 8} rx={10} ry={10} fill="none" stroke="#58a6ff" strokeWidth={2} strokeOpacity={0.5}/>)}
+
+                {/* Node background */}
+                <rect x={node.x} y={node.y} width={node.w} height={node.h} rx={8} ry={8} fill={colors.bg} stroke={colors.stroke} strokeWidth={isRunning ? 2.5 : 1.5} strokeOpacity={0.9} className={isRunning ? 'dag-node-running' : ''} filter={isRunning ? 'url(#glow)' : undefined}/>
+
+                {/* Icon + Agent Type */}
+                <text x={node.x + 10} y={node.y + 22} fill="#e6edf3" fontSize={10} fontWeight={600}>
+                  {icon} {label}
+                </text>
+
+                {/* Status text */}
+                <text x={node.x + node.w - 10} y={node.y + 22} textAnchor="end" fill={colors.text} fontSize={9} fontWeight={500}>
+                  {STATUS_BADGES[node.status]}
+                </text>
+
+                {/* Description */}
+                <text x={node.x + 10} y={node.y + 40} fill="#8b949e" fontSize={9}>
+                  {node.description.length > 28
+                        ? node.description.slice(0, 26) + '..'
+                        : node.description}
+                </text>
+
+                {/* Complexity badge (per-subtask label) */}
+                {node.complexity && COMPLEXITY_BADGES[node.complexity] && (<text x={node.x + 10} y={node.y + 54} fill={COMPLEXITY_BADGES[node.complexity].color} fontSize={8} fontWeight={600}>
+                    {COMPLEXITY_BADGES[node.complexity].icon} {node.complexity}
+                  </text>)}
+
+                {/* Duration */}
+                <text x={node.x + 10} y={node.y + 56} fill="#6e7681" fontSize={8}>
+                  {formatDuration(node.startedAt, node.completedAt)}
+                </text>
+
+                {/* Time */}
+                <text x={node.x + node.w - 10} y={node.y + 56} textAnchor="end" fill="#6e7681" fontSize={8}>
+                  {formatTime(node.startedAt || node.completedAt)}
+                </text>
+
+                {/* Summary on completed nodes (if selected or always for failed) */}
+                {(node.status === 'failed' || isSelected) && node.summary && (<foreignObject x={Math.max(10, node.x - 80)} y={node.y + node.h + 6} width={node.w + 160} height={36}>
+                    <div className="dag-node-summary" style={{
+                            color: node.status === 'failed' ? '#f85149' : '#8b949e',
+                            fontSize: '10px',
+                            lineHeight: 1.4,
+                            background: 'rgba(13,17,23,0.9)',
+                            padding: '4px 8px',
+                            borderRadius: '4px',
+                            border: `1px solid ${node.status === 'failed' ? 'rgba(248,81,73,0.3)' : 'rgba(48,54,61,0.5)'}`,
+                            maxHeight: '32px',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }}>
+                      {node.summary}
+                    </div>
+                  </foreignObject>)}
+              </g>);
+            })}
+        </svg>
+      </div>
+
+      {/* Node Status Table */}
+      <h3 className="section-subtitle">Step Details</h3>
+      <div className="dag-table-wrapper">
+        <table className="dag-table">
+          <thead>
+            <tr>
+              <th>Step</th>
+              <th>Agent</th>
+              <th>Complexity</th>
+              <th>Status</th>
+              <th>Duration</th>
+              <th>Time</th>
+              <th>Summary</th>
+            </tr>
+          </thead>
+          <tbody>
+            {layoutNodes.map((node) => (<tr key={node.id} className={`dag-row dag-row-${node.status}`}>
+                <td className="dag-cell-step">{node.step}</td>
+                <td className="dag-cell-agent">
+                  <span className="dag-agent-dot" style={{ background: AGENT_COLORS[node.agentType] || '#58a6ff' }}/>
+                  {AGENT_LABELS[node.agentType] || node.agentType}
+                </td>
+                <td className="dag-cell-complexity">
+                  {node.complexity && COMPLEXITY_BADGES[node.complexity]
+                    ? <span style={{ color: COMPLEXITY_BADGES[node.complexity].color, fontSize: 12 }}>
+                        {COMPLEXITY_BADGES[node.complexity].icon} {node.complexity}
+                      </span>
+                    : <span style={{ color: '#6e7681', fontSize: 12 }}>—</span>}
+                </td>
+                <td className={`dag-cell-status dag-status-${node.status}`}>
+                  {STATUS_BADGES[node.status]}
+                </td>
+                <td className="dag-cell-duration">{formatDuration(node.startedAt, node.completedAt)}</td>
+                <td className="dag-cell-time">{formatTime(node.startedAt || node.completedAt)}</td>
+                <td className="dag-cell-summary">{node.summary || node.description || '--'}</td>
+              </tr>))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Legend */}
+      <h3 className="section-subtitle">Agent Types</h3>
+      <div className="dag-legend">
+        {Object.entries(AGENT_ICONS).map(([type, icon]) => (<div className="legend-item" key={type}>
+            <span className="legend-dot" style={{ background: AGENT_COLORS[type] || '#58a6ff' }}/>
+            <span className="legend-icon">{icon}</span>
+            <span className="legend-label">{AGENT_LABELS[type] || type}</span>
+          </div>))}
+        <div className="legend-item">
+          <span className="legend-dot" style={{ background: 'transparent', border: '2px dashed #58a6ff' }}/>
+          <span className="legend-icon">⚡</span>
+          <span className="legend-label">Live node</span>
+        </div>
+      </div>
+        </>)}
+    </>);
+}

package/dist/web-dashboard/src/components/DAGView.test.js

@@ -0,0 +1,147 @@
+"use strict";
+/**
+ * Tests for DAGView's Run Timeline integration.
+ *
+ * Regression coverage for the reviewer-flagged bug: the scrubbable phase
+ * timeline must remain reachable for HISTORICAL runs even when no pipeline is
+ * live — previously the empty-state early return hid every persisted run the
+ * moment no DAG was active, defeating the whole point of persisting runs.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const DAGView_1 = __importDefault(require("./DAGView"));
+const makeRun = () => ({
+    id: 'run-1',
+    goal: 'Refactor the router',
+    startedAt: 1_700_000_000_000,
+    endedAt: 1_700_000_030_000,
+    success: true,
+    totalDurationMs: 30_000,
+    phases: [
+        { id: 'a', agentType: 'planner', status: 'completed', description: 'Plan the refactor', durationMs: 10_000 },
+        { id: 'b', agentType: 'writer', status: 'completed', description: 'Apply the refactor', durationMs: 20_000 },
+    ],
+});
+const makeData = (partial) => ({ cost: {}, history: {}, benchmarks: {}, memory: {}, health: {}, serverTime: Date.now(), ...partial });
+(0, vitest_1.describe)('DAGView Run Timeline', () => {
+    (0, vitest_1.it)('shows the timeline for historical runs even with no live DAG (regression)', () => {
+        (0, react_1.render)(<DAGView_1.default data={makeData({ pipelineRuns: { total: 1, runs: [makeRun()] } })}/>);
+        // Timeline + run goal render instead of the empty state
+        (0, vitest_1.expect)(react_1.screen.getByText(/run timeline/i)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('Refactor the router')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('Plan the refactor')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.queryByText('No Active Pipeline')).toBeNull();
+    });
+    (0, vitest_1.it)('falls back to the empty state when there are neither runs nor a live DAG', () => {
+        (0, react_1.render)(<DAGView_1.default data={makeData({})}/>);
+        (0, vitest_1.expect)(react_1.screen.getByText('No Active Pipeline')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.queryByText(/run timeline/i)).toBeNull();
+    });
+    (0, vitest_1.it)('renders both the live DAG and the timeline when a pipeline is active', () => {
+        (0, react_1.render)(<DAGView_1.default data={makeData({
+                dag: {
+                    pipeline: 'Fix the auth bug',
+                    nodes: [
+                        { id: 'n1', agentType: 'planner', status: 'completed', description: 'Plan the fix', startedAt: 100, completedAt: 500 },
+                        { id: 'n2', agentType: 'writer', status: 'running', description: 'Write the fix', startedAt: 500 },
+                    ],
+                    edges: [{ from: 'n1', to: 'n2' }],
+                    timestamp: 600,
+                    active: true,
+                },
+                pipelineRuns: { total: 0, runs: [] },
+            })}/>);
+        // Appears in the status bar AND the timeline run chip
+        (0, vitest_1.expect)(react_1.screen.getAllByText('Fix the auth bug').length).toBeGreaterThan(0);
+        // Live DAG status bar meta (badge includes the ▶ glyph)
+        (0, vitest_1.expect)(react_1.screen.getByText(/1 running/)).toBeTruthy();
+        // Timeline renders for the live run too
+        (0, vitest_1.expect)(react_1.screen.getByText(/run timeline/i)).toBeTruthy();
+    });
+    // ─── Phase 4 (AGENTIC_CAPABILITY_ASSESSMENT Addendum v4) — engine badge +
+    // loop-turn telemetry card.
+    (0, vitest_1.it)('Phase 4 — badges the pipeline engine in the status bar', () => {
+        (0, react_1.render)(<DAGView_1.default data={makeData({
+                dag: {
+                    pipeline: 'CI run',
+                    nodes: [{ id: 'n1', agentType: 'planner', status: 'completed', description: 'Plan' }],
+                    edges: [],
+                    timestamp: 1,
+                    active: false,
+                    engine: 'pipeline',
+                    engineExplanation: 'CI pins the orchestrator',
+                },
+                pipelineRuns: { total: 0, runs: [] },
+            })}/>);
+        const badge = react_1.screen.getByTestId('dag-engine-badge');
+        (0, vitest_1.expect)(badge.textContent).toContain('pipeline');
+    });
+    (0, vitest_1.it)('Phase 4 — renders the loop-turn telemetry card even with no DAG nodes', () => {
+        (0, react_1.render)(<DAGView_1.default data={makeData({
+                dag: {
+                    pipeline: null,
+                    nodes: [],
+                    edges: [],
+                    timestamp: 1,
+                    active: true,
+                    engine: 'loop',
+                    loopTurn: {
+                        turnId: 'turn-1',
+                        title: 'assess the code quality',
+                        startedAt: Date.now() - 5_000,
+                        active: true,
+                        toolCallCount: 3,
+                        erroredToolCount: 1,
+                        provider: 'groq',
+                        model: 'llama-3.3-70b',
+                        toolCalls: [
+                            { tool: 'read_file', ok: true, durationMs: 12 },
+                            { tool: 'code_search', ok: true, durationMs: 30 },
+                            { tool: 'edit_file', ok: false, error: 'match not found' },
+                        ],
+                    },
+                },
+                pipelineRuns: { total: 0, runs: [] },
+            })}/>);
+        // The turn card renders (not the empty state) — per-tool telemetry visible
+        (0, vitest_1.expect)(react_1.screen.getByTestId('dag-loop-turn-card')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/assess the code quality/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/3 tool calls/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/1 errored/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('✓ read_file')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('❌ edit_file')).toBeTruthy();
+        // Provider chip
+        (0, vitest_1.expect)(react_1.screen.getByText(/groq · llama-3.3-70b/)).toBeTruthy();
+    });
+    (0, vitest_1.it)('Phase 4 — the loop-turn card shows bounded / generation-failed chips', () => {
+        (0, react_1.render)(<DAGView_1.default data={makeData({
+                dag: {
+                    pipeline: null,
+                    nodes: [],
+                    edges: [],
+                    timestamp: 1,
+                    active: false,
+                    engine: 'loop',
+                    loopTurn: {
+                        turnId: 'turn-2',
+                        title: 'huge refactor',
+                        startedAt: Date.now() - 60_000,
+                        endedAt: Date.now(),
+                        active: false,
+                        toolCallCount: 17,
+                        erroredToolCount: 0,
+                        bounded: true,
+                        toolCalls: [],
+                    },
+                },
+                pipelineRuns: { total: 0, runs: [] },
+            })}/>);
+        (0, vitest_1.expect)(react_1.screen.getByTestId('dag-loop-turn-card')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/bounded/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/17 tool calls/)).toBeTruthy();
+    });
+});