agent-nuvira 2.7.0 → 2.7.2

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

@@ -0,0 +1,359 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dagToPipelineRun = dagToPipelineRun;
+exports.collectPipelineRuns = collectPipelineRuns;
+exports.default = PhaseTimeline;
+const react_1 = require("react");
+// ─── Agent Visual Constants (mirrors DAGView so colors/legends stay consistent) ─
+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 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',
+};
+const STATUS_BADGES = {
+    pending: { icon: '⏳', label: 'Pending' },
+    running: { icon: '▶️', label: 'Running' },
+    completed: { icon: '✅', label: 'Done' },
+    failed: { icon: '❌', label: 'Failed' },
+};
+const STATUS_COLORS = {
+    pending: '#6e7681',
+    running: '#58a6ff',
+    completed: '#3fb950',
+    failed: '#f85149',
+};
+// ─── Run derivation helpers (shared with DAGView) ────────────────────────────
+/**
+ * Convert a live DAG into a PipelineRun shape so the active execution can be
+ * scrubbed in real time alongside historical runs. Returns null when there is
+ * nothing to show (no nodes).
+ */
+function dagToPipelineRun(dag) {
+    if (!dag || dag.nodes.length === 0)
+        return null;
+    const starts = dag.nodes.map((n) => n.startedAt || 0).filter(Boolean);
+    const ends = dag.nodes.map((n) => n.completedAt || 0).filter(Boolean);
+    const started = starts.length > 0 ? Math.min(...starts) : Date.now();
+    const ended = ends.length > 0 ? Math.max(...ends) : Date.now();
+    return {
+        id: `live-${started}`,
+        goal: dag.pipeline || 'Active execution',
+        startedAt: started,
+        endedAt: ends.length > 0 ? ended : undefined,
+        success: dag.nodes.length > 0 && dag.nodes.every((n) => n.status === 'completed'),
+        totalDurationMs: Math.max(0, ended - started),
+        phases: dag.nodes.map((n) => ({
+            id: n.id,
+            agentType: n.agentType,
+            status: n.status,
+            description: n.description,
+            complexity: n.complexity,
+            summary: n.summary,
+            startedAt: n.startedAt,
+            completedAt: n.completedAt,
+            durationMs: n.startedAt && n.completedAt ? n.completedAt - n.startedAt : undefined,
+        })),
+    };
+}
+/**
+ * Merge the live run (from the DAG) with persisted runs (from the server),
+ * de-duplicated by id, most relevant first (live, then newest).
+ */
+function collectPipelineRuns(dag, stored) {
+    const runs = [];
+    const seen = new Set();
+    const live = dagToPipelineRun(dag);
+    if (live) {
+        runs.push(live);
+        seen.add(live.id);
+    }
+    for (const run of stored?.runs || []) {
+        if (!seen.has(run.id)) {
+            runs.push(run);
+            seen.add(run.id);
+        }
+    }
+    return runs;
+}
+// ─── Time formatting ─────────────────────────────────────────────────────────
+function formatMs(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+}
+function formatClock(ts) {
+    if (!ts)
+        return '';
+    return new Date(ts).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+function layoutPhases(phases, totalMs) {
+    if (phases.length === 0)
+        return { laid: [], total: 0 };
+    const len = phases.length;
+    // Known durations stay proportional; unknown phases split an equal share of
+    // the remaining span so the track is always fully covered (never a gap that
+    // cannot be scrubbed — e.g. parallel nodes whose durations exceed the span).
+    const known = phases.map((p) => (p.durationMs && p.durationMs > 0 ? p.durationMs : 0));
+    const knownSum = known.reduce((a, d) => a + d, 0);
+    const raw = knownSum > 0
+        ? phases.map((p, i) => (known[i] > 0 ? known[i] : knownSum / len))
+        : phases.map(() => 1);
+    // Normalize so widths always sum to exactly 1 — edge-to-edge, no drift.
+    const rawSum = raw.reduce((a, d) => a + d, 0) || 1;
+    let cursor = 0;
+    const laid = phases.map((p, i) => {
+        const width = raw[i] / rawSum;
+        const start = cursor;
+        cursor += width;
+        return { ...p, start, width, dur: raw[i] };
+    });
+    // Scrub range: the real run span when known, else the synthetic total.
+    const total = totalMs > 0 ? totalMs : rawSum;
+    return { laid, total };
+}
+/**
+ * A scrubbable phase timeline for a pipeline run — the phase-bars + draggable
+ * caret pattern inspired by llm-viz's PhaseTimeline, applied to agent pipeline
+ * executions (plan → gather → write → review → test).
+ */
+function PhaseTimeline({ runs, selectedRunId, onSelectRun, onScrub, }) {
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const run = runs.find((r) => r.id === (selectedRunId ?? activeId)) ?? runs[0] ?? null;
+    const [t, setT] = (0, react_1.useState)(0);
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const trackRef = (0, react_1.useRef)(null);
+    const draggingRef = (0, react_1.useRef)(false);
+    // Keep the latest onScrub in a ref so the notification effect below never
+    // goes stale if a parent passes an inline callback.
+    const onScrubRef = (0, react_1.useRef)(onScrub);
+    (0, react_1.useEffect)(() => {
+        onScrubRef.current = onScrub;
+    }, [onScrub]);
+    // Switch back to a valid run when the available set changes.
+    (0, react_1.useEffect)(() => {
+        if (!run && runs.length > 0)
+            setActiveId(runs[0].id);
+        else if (run && !runs.some((r) => r.id === run.id))
+            setActiveId(runs[0]?.id ?? null);
+    }, [runs, run]);
+    const { laid, total } = (0, react_1.useMemo)(() => layoutPhases(run?.phases || [], run?.totalDurationMs || 0), [run]);
+    const frac = total > 0 ? Math.min(1, Math.max(0, t / total)) : 0;
+    const currentPhase = (0, react_1.useMemo)(() => {
+        if (total <= 0)
+            return null;
+        const at = frac * total;
+        return laid.find((p) => at >= p.start * total && at < (p.start + p.width) * total) || null;
+    }, [laid, frac, total]);
+    // Notify the parent (DAG highlight) whenever the scrubbed phase changes.
+    (0, react_1.useEffect)(() => {
+        onScrubRef.current?.(currentPhase?.id ?? null);
+    }, [currentPhase?.id]);
+    // Playback loop: sweep the full duration in ~2s. The end-of-sweep reset lives
+    // in a separate watcher — side effects must never run inside a state updater.
+    (0, react_1.useEffect)(() => {
+        if (!playing)
+            return;
+        const interval = setInterval(() => {
+            setT((prev) => prev + (total / 2000) * 50);
+        }, 50);
+        return () => clearInterval(interval);
+    }, [playing, total]);
+    // Reach the end → stop and rewind to the start (sweep completes, then rests).
+    (0, react_1.useEffect)(() => {
+        if (playing && total > 0 && t >= total) {
+            setPlaying(false);
+            setT(0);
+        }
+    }, [playing, total, t]);
+    const setFromClientX = (0, react_1.useCallback)((clientX) => {
+        const el = trackRef.current;
+        if (!el || total <= 0)
+            return;
+        const rect = el.getBoundingClientRect();
+        const width = rect.width || 1;
+        const frac = Math.min(1, Math.max(0, (clientX - rect.left) / width));
+        setT(frac * total);
+    }, [total]);
+    const handlePointerDown = (e) => {
+        draggingRef.current = true;
+        setPlaying(false);
+        setFromClientX(e.clientX);
+    };
+    // Register the window listeners once; the drag flag lives in a ref so the
+    // listeners don't churn on every caret tick during playback.
+    (0, react_1.useEffect)(() => {
+        const onMove = (e) => {
+            if (draggingRef.current)
+                setFromClientX(e.clientX);
+        };
+        const onUp = () => {
+            draggingRef.current = false;
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+    }, [setFromClientX]);
+    if (!run) {
+        return (<div className="phase-timeline phase-timeline-empty">
+        <p>No pipeline runs yet. Run an agent task to see its phase timeline here.</p>
+      </div>);
+    }
+    const isLive = run.id.startsWith('live-');
+    const completedCount = run.phases.filter((p) => p.status === 'completed').length;
+    const failedCount = run.phases.filter((p) => p.status === 'failed').length;
+    return (<div className="phase-timeline">
+      {/* Run selector + meta */}
+      <div className="phase-timeline-header">
+        <div className="phase-timeline-runs">
+          {runs.map((r) => (<button key={r.id} className={`phase-run-chip ${r.id === run.id ? 'active' : ''} ${r.id.startsWith('live-') ? 'live' : ''}`} onClick={() => {
+                setActiveId(r.id);
+                setT(0);
+                setPlaying(false);
+                onSelectRun?.(r.id);
+            }} title={r.goal}>
+              {r.id.startsWith('live-') && <span className="dag-live-dot"/>}
+              {/* Phase 4 — engine tag on every run chip (loop turns persist
+                engine 'loop'; pipeline runs 'pipeline'). */}
+              {r.engine && (<span className={`phase-run-chip-engine phase-run-chip-engine-${r.engine}`}>
+                  {r.engine === 'loop' ? '🔁' : '⬡'}
+                </span>)}
+              {r.goal.length > 32 ? r.goal.slice(0, 30) + '…' : r.goal}
+              <span className="phase-run-chip-time">{formatClock(r.startedAt)}</span>
+            </button>))}
+        </div>
+        <div className="phase-timeline-meta">
+          {isLive && <span className="dag-live-badge">LIVE</span>}
+          {/* Phase 4 — the selected run's engine + loop-turn telemetry. */}
+          {run.engine && (<span className={`dag-engine-badge dag-engine-${run.engine}`} title={run.engine === 'loop' ? 'Loop turn (per-tool telemetry below)' : 'Orchestrator pipeline'}>
+              {run.engine === 'loop' ? '🔁 loop' : '⬡ pipeline'}
+            </span>)}
+          <span className="phase-meta-item">{run.phases.length} steps</span>
+          <span className="phase-meta-item phase-meta-ok">✅ {completedCount}</span>
+          {failedCount > 0 && <span className="phase-meta-item phase-meta-bad">❌ {failedCount}</span>}
+          {run.turnTelemetry && (<span className="phase-meta-item" title={`tool calls: ${run.turnTelemetry.toolCallCount}, errored: ${run.turnTelemetry.erroredToolCount}${run.turnTelemetry.bounded ? ', bounded' : ''}${run.turnTelemetry.provider ? `, ${run.turnTelemetry.provider}${run.turnTelemetry.model ? `/${run.turnTelemetry.model}` : ''}` : ''}`}>
+              🔧 {run.turnTelemetry.toolCallCount}
+              {run.turnTelemetry.erroredToolCount > 0 && (<span className="phase-meta-bad"> ({run.turnTelemetry.erroredToolCount} err)</span>)}
+            </span>)}
+          <span className="phase-meta-item">⏱ {formatMs(total)}</span>
+        </div>
+      </div>
+
+      {/* Scrub controls */}
+      <div className="phase-timeline-controls">
+        <button className={`phase-play-btn ${playing ? 'paused' : ''}`} onClick={() => {
+            if (playing) {
+                setPlaying(false);
+            }
+            else {
+                if (t >= total)
+                    setT(0);
+                setPlaying(true);
+            }
+        }} aria-label={playing ? 'Pause scrub' : 'Play scrub'}>
+          {playing ? '⏸ Pause' : '▶ Play'}
+        </button>
+        <span className="phase-time-label">{formatMs(t)} / {formatMs(total)}</span>
+        <input className="phase-range" type="range" min={0} max={total || 1} step={1} value={Math.min(t, total || 1)} onChange={(e) => { setPlaying(false); setT(Number(e.target.value)); }} aria-label="Scrub pipeline timeline"/>
+      </div>
+
+      {/* Phase track + caret */}
+      <div className="phase-track-wrap">
+        <div ref={trackRef} className="phase-track" onPointerDown={handlePointerDown} style={{ cursor: 'grab' }}>
+          {laid.map((p) => {
+            const color = AGENT_COLORS[p.agentType] || '#58a6ff';
+            const statusColor = STATUS_COLORS[p.status];
+            const isActive = currentPhase?.id === p.id;
+            return (<button key={p.id} className={`phase-block phase-block-${p.status} ${isActive ? 'active' : ''}`} style={{
+                    left: `${p.start * 100}%`,
+                    width: `${Math.max(p.width * 100, 2)}%`,
+                    background: `linear-gradient(180deg, ${color}cc, ${color}66)`,
+                    boxShadow: isActive ? `0 0 0 2px ${statusColor}` : undefined,
+                }} onClick={(e) => {
+                    e.stopPropagation();
+                    setPlaying(false);
+                    setT((p.start + p.width / 2) * total);
+                }} title={`${AGENT_LABELS[p.agentType] || p.agentType}: ${p.description}`}>
+                <span className="phase-block-icon">{AGENT_ICONS[p.agentType] || '⚙️'}</span>
+                <span className="phase-block-label">{AGENT_LABELS[p.agentType] || p.agentType}</span>
+              </button>);
+        })}
+          {/* Caret */}
+          <div className="phase-caret" style={{ left: `${frac * 100}%` }} onPointerDown={(e) => { e.stopPropagation(); handlePointerDown(e); }} title={`${formatMs(t)} elapsed`}/>
+        </div>
+        {/* Ticks */}
+        <div className="phase-ticks">
+          <span>0</span>
+          <span>{formatMs(Math.round(total / 2))}</span>
+          <span>{formatMs(total)}</span>
+        </div>
+      </div>
+
+      {/* Detail panel: the phase under the caret */}
+      <div className="phase-detail">
+        {currentPhase ? (<>
+            <div className="phase-detail-title">
+              <span className="phase-detail-icon">{AGENT_ICONS[currentPhase.agentType] || '⚙️'}</span>
+              <span className="phase-detail-agent" style={{ color: AGENT_COLORS[currentPhase.agentType] || '#58a6ff' }}>
+                {AGENT_LABELS[currentPhase.agentType] || currentPhase.agentType}
+              </span>
+              <span className={`phase-status-badge phase-status-${currentPhase.status}`}>
+                {STATUS_BADGES[currentPhase.status].icon} {STATUS_BADGES[currentPhase.status].label}
+              </span>
+            </div>
+            <p className="phase-detail-desc">{currentPhase.description}</p>
+            <div className="phase-detail-meta">
+              {/* Known duration → exact; reconstructed (unknown) → approximate */}
+              <span>⏱ {currentPhase.durationMs ? formatMs(currentPhase.dur) : `~${formatMs(currentPhase.dur)}`}</span>
+              {currentPhase.startedAt ? <span>🕐 {formatClock(currentPhase.startedAt)}</span> : null}
+              {currentPhase.complexity ? <span>🎯 {currentPhase.complexity}</span> : null}
+            </div>
+            {currentPhase.summary && <p className="phase-detail-summary">{currentPhase.summary}</p>}
+          </>) : (<div className="phase-detail-gap">
+            <span className="phase-detail-icon">⏳</span>
+            <span>Between steps — waiting for the next agent.</span>
+          </div>)}
+      </div>
+    </div>);
+}

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

@@ -0,0 +1,234 @@
+"use strict";
+/**
+ * Unit tests for the scrubbable PhaseTimeline component (llm-viz-inspired).
+ *
+ * Covers the empty state, run rendering (phase blocks + meta), scrub-to-phase
+ * via block click (the jsdom-safe path — no getBoundingClientRect needed),
+ * run switching, play/pause toggling, and the dagToPipelineRun /
+ * collectPipelineRuns helpers that derive runs from the live DAG + persisted
+ * pipeline-runs.
+ */
+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 });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const PhaseTimeline_1 = __importStar(require("./PhaseTimeline"));
+// ─── Fixtures ───────────────────────────────────────────────────────────────
+const makeRun = (overrides = {}) => ({
+    id: 'run-1',
+    goal: 'Implement JWT auth middleware',
+    startedAt: 1_700_000_000_000,
+    endedAt: 1_700_000_060_000,
+    success: true,
+    totalDurationMs: 60_000,
+    phases: [
+        {
+            id: 'p1',
+            agentType: 'planner',
+            status: 'completed',
+            description: 'Break the goal into tasks',
+            complexity: 'moderate',
+            summary: 'Planned 4 steps',
+            startedAt: 1_700_000_000_000,
+            completedAt: 1_700_000_010_000,
+            durationMs: 10_000,
+        },
+        {
+            id: 'p2',
+            agentType: 'writer',
+            status: 'completed',
+            description: 'Write the middleware',
+            complexity: 'simple',
+            summary: 'Wrote src/middleware/auth.ts',
+            startedAt: 1_700_000_010_000,
+            completedAt: 1_700_000_040_000,
+            durationMs: 30_000,
+        },
+        {
+            id: 'p3',
+            agentType: 'tester',
+            status: 'failed',
+            description: 'Run the test suite',
+            complexity: 'simple',
+            startedAt: 1_700_000_040_000,
+            completedAt: 1_700_000_060_000,
+            durationMs: 20_000,
+        },
+    ],
+    ...overrides,
+});
+// ─── Component behavior ─────────────────────────────────────────────────────
+(0, vitest_1.describe)('PhaseTimeline — Phase 4 engine chips', () => {
+    (0, vitest_1.it)('badges a loop-engine run chip with the loop glyph and the telemetry meta', () => {
+        const run = makeRun({
+            id: 'loop-turn-1',
+            goal: 'assess the code quality',
+            engine: 'loop',
+            turnTelemetry: { toolCallCount: 4, erroredToolCount: 1, provider: 'groq', model: 'llama-3.3-70b' },
+        });
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[run]}/>);
+        // Engine badge in the meta row
+        (0, vitest_1.expect)(react_1.screen.getByText('🔁 loop')).toBeTruthy();
+        // Per-turn telemetry chip (🔧 count + errored parenthetical)
+        (0, vitest_1.expect)(react_1.screen.getByText(/🔧 4/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/\(1 err\)/)).toBeTruthy();
+    });
+    (0, vitest_1.it)('badges a pipeline run with the pipeline glyph and no telemetry chip', () => {
+        const run = makeRun({ id: 'pipe-1', engine: 'pipeline' });
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[run]}/>);
+        (0, vitest_1.expect)(react_1.screen.getByText('⬡ pipeline')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.queryByText(/🔧/)).toBeNull();
+    });
+    (0, vitest_1.it)('shows no engine badge for legacy runs without one', () => {
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[makeRun()]}/>);
+        (0, vitest_1.expect)(react_1.screen.queryByText(/🔁 loop/)).toBeNull();
+        (0, vitest_1.expect)(react_1.screen.queryByText(/⬡ pipeline/)).toBeNull();
+    });
+});
+(0, vitest_1.describe)('PhaseTimeline', () => {
+    (0, vitest_1.it)('renders the empty state when there are no runs', () => {
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[]}/>);
+        (0, vitest_1.expect)(react_1.screen.getByText(/no pipeline runs yet/i)).toBeTruthy();
+    });
+    (0, vitest_1.it)('renders phase blocks, step meta, and the run goal', () => {
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[makeRun()]}/>);
+        // Run chip with goal
+        (0, vitest_1.expect)(react_1.screen.getByText('Implement JWT auth middleware')).toBeTruthy();
+        // Meta: 3 steps, 2 done, 1 failed, total duration
+        (0, vitest_1.expect)(react_1.screen.getByText('3 steps')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('✅ 2')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('❌ 1')).toBeTruthy();
+        // Phase labels on blocks (also appear in the detail panel — use *AllBy*)
+        (0, vitest_1.expect)(react_1.screen.getAllByText('Planner').length).toBeGreaterThan(0);
+        (0, vitest_1.expect)(react_1.screen.getAllByText('Writer').length).toBeGreaterThan(0);
+        (0, vitest_1.expect)(react_1.screen.getAllByText('Tester').length).toBeGreaterThan(0);
+        // Default detail panel shows the first phase under the caret
+        (0, vitest_1.expect)(react_1.screen.getByText('Break the goal into tasks')).toBeTruthy();
+    });
+    (0, vitest_1.it)('scrubs to a phase on block click and notifies the parent via onScrub', () => {
+        const onScrub = vitest_1.vi.fn();
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[makeRun()]} onScrub={onScrub}/>);
+        const testerBlock = react_1.screen.getByText('Tester').closest('button');
+        react_1.fireEvent.click(testerBlock);
+        (0, vitest_1.expect)(onScrub).toHaveBeenCalledWith('p3');
+        // Detail panel now describes the scrubbed phase
+        (0, vitest_1.expect)(react_1.screen.getByText('Run the test suite')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('❌ Failed')).toBeTruthy();
+    });
+    (0, vitest_1.it)('switches runs via the selector chips and resets the caret', () => {
+        const second = makeRun({ id: 'run-2', goal: 'Fix flaky test', phases: [
+                { id: 'q1', agentType: 'reviewer', status: 'completed', description: 'Review the diff', durationMs: 5_000 },
+            ] });
+        const onSelectRun = vitest_1.vi.fn();
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[makeRun(), second]} onSelectRun={onSelectRun}/>);
+        react_1.fireEvent.click(react_1.screen.getByText('Fix flaky test'));
+        (0, vitest_1.expect)(onSelectRun).toHaveBeenCalledWith('run-2');
+        (0, vitest_1.expect)(react_1.screen.getByText('Review the diff')).toBeTruthy();
+    });
+    (0, vitest_1.it)('toggles play/pause on the scrub button', () => {
+        (0, react_1.render)(<PhaseTimeline_1.default runs={[makeRun()]}/>);
+        const playBtn = react_1.screen.getByRole('button', { name: 'Play scrub' });
+        react_1.fireEvent.click(playBtn);
+        (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: 'Pause scrub' })).toBeTruthy();
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Pause scrub' }));
+        (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: 'Play scrub' })).toBeTruthy();
+    });
+});
+// ─── Run derivation helpers ─────────────────────────────────────────────────
+(0, vitest_1.describe)('dagToPipelineRun', () => {
+    (0, vitest_1.it)('returns null for empty/missing DAGs', () => {
+        (0, vitest_1.expect)((0, PhaseTimeline_1.dagToPipelineRun)(null)).toBeNull();
+        (0, vitest_1.expect)((0, PhaseTimeline_1.dagToPipelineRun)(undefined)).toBeNull();
+        (0, vitest_1.expect)((0, PhaseTimeline_1.dagToPipelineRun)({ nodes: [] })).toBeNull();
+    });
+    (0, vitest_1.it)('derives a run with proportional phases from live DAG nodes', () => {
+        const dag = {
+            pipeline: 'Refactor router',
+            nodes: [
+                { id: 'a', agentType: 'planner', status: 'completed', description: 'Plan', startedAt: 100, completedAt: 400 },
+                { id: 'b', agentType: 'writer', status: 'completed', description: 'Write', startedAt: 400, completedAt: 700 },
+            ],
+            edges: [{ from: 'a', to: 'b' }],
+            timestamp: 700,
+            active: false,
+        };
+        const run = (0, PhaseTimeline_1.dagToPipelineRun)(dag);
+        (0, vitest_1.expect)(run.id).toMatch(/^live-/);
+        (0, vitest_1.expect)(run.goal).toBe('Refactor router');
+        (0, vitest_1.expect)(run.phases).toHaveLength(2);
+        (0, vitest_1.expect)(run.phases[0].durationMs).toBe(300);
+        (0, vitest_1.expect)(run.totalDurationMs).toBe(600);
+        (0, vitest_1.expect)(run.success).toBe(true);
+    });
+    (0, vitest_1.it)('marks a run failed when any node failed', () => {
+        const dag = {
+            pipeline: 'X',
+            nodes: [
+                { id: 'a', agentType: 'planner', status: 'completed', description: 'Plan', startedAt: 100, completedAt: 200 },
+                { id: 'b', agentType: 'tester', status: 'failed', description: 'Test', startedAt: 200, completedAt: 300 },
+            ],
+            edges: [],
+            timestamp: 300,
+            active: false,
+        };
+        (0, vitest_1.expect)((0, PhaseTimeline_1.dagToPipelineRun)(dag).success).toBe(false);
+    });
+});
+(0, vitest_1.describe)('collectPipelineRuns', () => {
+    (0, vitest_1.it)('places the live run first and de-duplicates by id', () => {
+        // Live-run id is derived from the DAG start time (live-<startedAt>).
+        const dag = {
+            pipeline: 'Live run',
+            nodes: [
+                { id: 'a', agentType: 'planner', status: 'completed', description: 'Plan', startedAt: 100, completedAt: 400 },
+            ],
+            edges: [],
+            timestamp: 400,
+            active: false,
+        };
+        const storedRun = makeRun({ id: 'run-9' });
+        const runs = (0, PhaseTimeline_1.collectPipelineRuns)(dag, { total: 2, runs: [storedRun, makeRun({ id: 'live-100', goal: 'duplicate' })] });
+        (0, vitest_1.expect)(runs.map((r) => r.id)).toEqual(['live-100', 'run-9']);
+    });
+    (0, vitest_1.it)('falls back to stored runs only when there is no live DAG', () => {
+        const storedRun = makeRun();
+        const runs = (0, PhaseTimeline_1.collectPipelineRuns)(null, { total: 1, runs: [storedRun] });
+        (0, vitest_1.expect)(runs).toHaveLength(1);
+        (0, vitest_1.expect)(runs[0].id).toBe('run-1');
+    });
+    (0, vitest_1.it)('returns an empty list when both inputs are empty', () => {
+        (0, vitest_1.expect)((0, PhaseTimeline_1.collectPipelineRuns)(null, undefined)).toEqual([]);
+    });
+});