fix(space): make Gradio app.py compatible with Gradio 6.0 + frontend polish

- Pin gradio to >=4.44,<6 so the training Space stops pulling Gradio 6
which broke `every=` on demo.load() and `css=` on Blocks(...). Forward-
compat: app.py now detects gr.Timer and uses Timer.tick() on Gradio 6+
while keeping every=4 working on Gradio 4/5. css moved to launch() on 6+.
- frontend: rewrite renderGraph as D3 enter/update/exit on a persistent
force simulation so Auto-Play animates state transitions smoothly
instead of rebuilding the SVG every step. Add status flash on the node
the agent just acted on. Add speed select (Slow/Normal/Fast/Turbo)
and a 'thinking…' indicator on the autoplay button.
- frontend: keyboard shortcuts (Space=autoplay, R=reset, C=compare,
Esc=close compare).
- /api/compare: restructure response to return {steps, metrics,
final_graph} per side so the Compare overlay's renderer (which expected
metrics.total_reward / metrics.final_sat / metrics.avg_trust /
steps[]) actually works. Each step now carries its own graph snapshot
so the mini-graphs animate as the user scrubs through the trajectory.
- compare mini-graph: persistent simulation per side, smooth status
transitions instead of full rebuild on every step.

Made-with: Cursor

Dockerfile

@@ -18,6 +18,6 @@ RUN pip install --upgrade pip
 # Force strict synchronization of PyTorch and Torchvision directly from NVIDIA's servers
 RUN pip install "torch==2.3.1" "torchvision==0.18.1" --index-url https://download.pytorch.org/whl/cu121
 # Install all required modules in one robust resolution block
-RUN pip install "unsloth" "xformers==0.0.27" "trl" "peft" "accelerate" "bitsandbytes" "gymnasium" "networkx" "scipy" "datasets" "gradio" "huggingface_hub"
+RUN pip install "unsloth" "xformers==0.0.27" "trl" "peft" "accelerate" "bitsandbytes" "gymnasium" "networkx" "scipy" "datasets" "gradio>=4.44,<6" "huggingface_hub"
 
 CMD ["python", "app.py"]

app.py

@@ -117,7 +117,17 @@ body { background: #0a0e1a; }
 .gr-button { background: #3b82f6 !important; }
 """
 
-with gr.Blocks(title="VERGIL Training Monitor", css=css) as demo:
+# Gradio 6.0 removed `every=` from `.load()` and `css=` from `Blocks(...)` —
+# both now belong to a `Timer` and to `launch()` respectively. We detect the
+# presence of `gr.Timer` and pick the right API at runtime so this Space
+# works on Gradio 4.x, 5.x and 6.x without changes.
+_has_timer    = hasattr(gr, "Timer")
+_blocks_kwargs = {"title": "VERGIL Training Monitor"}
+if not _has_timer:
+    # Older Gradio: css still belongs on Blocks
+    _blocks_kwargs["css"] = css
+
+with gr.Blocks(**_blocks_kwargs) as demo:
     gr.Markdown("""
 # ⟁ VERGIL — GRPO Training Monitor
 
@@ -162,14 +172,25 @@ When done, weights are auto-pushed to `Laksh718/vergil-commitment-engine`.
 **Target:** reward improving from ~0.1 (random) → ~0.6+ (strategic)
 """)
 
-    # Auto-refresh every 4 seconds
-    demo.load(fn=get_status, outputs=status_box, every=4)
-    demo.load(fn=get_logs, outputs=log_box, every=4)
-    demo.load(fn=get_metrics, outputs=metrics_box, every=10)
-
-
-demo.launch(
-    server_name="0.0.0.0",
-    server_port=7860,
-    show_error=True,
-)
+    if _has_timer:
+        # Gradio 6+: initial paint + periodic refresh via Timer.tick
+        demo.load(fn=get_status,  outputs=status_box)
+        demo.load(fn=get_logs,    outputs=log_box)
+        demo.load(fn=get_metrics, outputs=metrics_box)
+        fast_timer = gr.Timer(4)
+        slow_timer = gr.Timer(10)
+        fast_timer.tick(fn=get_status,  outputs=status_box)
+        fast_timer.tick(fn=get_logs,    outputs=log_box)
+        slow_timer.tick(fn=get_metrics, outputs=metrics_box)
+    else:
+        # Gradio 4/5: every= drives both the initial paint and refresh
+        demo.load(fn=get_status,  outputs=status_box,  every=4)
+        demo.load(fn=get_logs,    outputs=log_box,     every=4)
+        demo.load(fn=get_metrics, outputs=metrics_box, every=10)
+
+
+_launch_kwargs = {"server_name": "0.0.0.0", "server_port": 7860, "show_error": True}
+if _has_timer:
+    # Gradio 6+: css moved to launch()
+    _launch_kwargs["css"] = css
+demo.launch(**_launch_kwargs)

frontend/app.js

@@ -41,6 +41,26 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.ma-btn').forEach(btn => {
         btn.addEventListener('click', () => takeAction(btn.dataset.action));
     });
+
+    // Compare-overlay scenario picker — keep header in sync as user picks
+    $('cmp-scenario-select')?.addEventListener('change', updateCmpScenarioMeta);
+
+    // Live-update autoplay status badge if user changes speed mid-run
+    $('autoplay-speed')?.addEventListener('change', () => {
+        // No need to reset the timer — _autoplayTick reads speed each tick.
+        const sel = $('autoplay-speed');
+        if (sel) sel.blur();
+    });
+
+    // Keyboard shortcuts: space = autoplay toggle, R = reset, C = compare
+    document.addEventListener('keydown', (e) => {
+        const tag = (e.target?.tagName || '').toLowerCase();
+        if (tag === 'input' || tag === 'select' || tag === 'textarea') return;
+        if (e.code === 'Space')          { e.preventDefault(); toggleAutoplay(); }
+        else if (e.key === 'r' || e.key === 'R') { resetEpisode(); }
+        else if (e.key === 'c' || e.key === 'C') { openCompare(); }
+        else if (e.key === 'Escape')     { closeCompare(); }
+    });
 });
 
 async function loadScenarios() {
@@ -68,6 +88,11 @@ async function resetEpisode() {
     cascadeCount   = 0;
     prevTrustAvg   = null;
     prevHealth     = null;
+    _graphInitialized = false;
+    _persistentNodes  = [];
+    _persistentLinks  = [];
+    if (d3Sim) { d3Sim.stop(); d3Sim = null; }
+    d3.select('#graph-svg').selectAll('*').remove();
 
     const body = {};
     const sel  = $('scenario-select').value;
@@ -159,6 +184,10 @@ function handleStepResponse(data, actionType, reasoning) {
     pushTimeline(actionType, node?.label || targetId || '—', reward);
     logAdd('agent', `${actionIcon(actionType)} ${node?.label || actionType}  (${reward >= 0 ? '+' : ''}${reward.toFixed(3)})`);
 
+    // Flash-highlight the node the agent just acted on so the user
+    // can visually track the decision through the graph.
+    if (targetId) _flashNode(targetId, reward >= 0);
+
     const cascades = data.info?.cascade_events || [];
     if (cascades.length) {
         const affected = cascades.filter(e => e.cascaded).length;
@@ -195,25 +224,62 @@ function episodeSummary() {
 }
 
 // ═══════════════════════════════════════════════════════════
-//  AUTOPLAY
+//  AUTOPLAY  — speed-aware loop with "thinking…" indicator
 // ═══════════════════════════════════════════════════════════
+function _autoplaySpeedMs() {
+    const sel = $('autoplay-speed');
+    const v = parseInt(sel?.value || '1400', 10);
+    return Number.isFinite(v) ? v : 1400;
+}
+
+async function _autoplayTick() {
+    if (!autoTimer) return;
+    if (!currentState) { stopAutoplay(); return; }
+
+    const status = $('autoplay-status');
+    if (status) { status.textContent = 'thinking…'; status.classList.add('thinking'); }
+
+    try {
+        await agentStep();
+    } finally {
+        if (status) {
+            status.classList.remove('thinking');
+            const step = currentState?.step_number ?? 0;
+            status.textContent = `step ${step}`;
+        }
+    }
+
+    // Schedule next tick using *current* speed selection (so user can change mid-run)
+    if (autoTimer) {
+        autoTimer = setTimeout(_autoplayTick, _autoplaySpeedMs());
+    }
+}
+
 function toggleAutoplay() {
     if (autoTimer) {
         stopAutoplay();
     } else {
         $('btn-auto').textContent = '⏹ Stop Agent';
         $('btn-auto').classList.add('playing');
-        autoTimer = setInterval(() => {
-            if (!currentState) { stopAutoplay(); return; }
-            agentStep();
-        }, 1400);
-        agentStep();
+        autoTimer = setTimeout(_autoplayTick, 0);
     }
 }
+
 function stopAutoplay() {
-    if (autoTimer) { clearInterval(autoTimer); autoTimer = null; }
+    if (autoTimer) { clearTimeout(autoTimer); autoTimer = null; }
     $('btn-auto').textContent = '▶ Auto-Play Agent';
     $('btn-auto').classList.remove('playing');
+    const status = $('autoplay-status');
+    if (status) { status.textContent = ''; status.classList.remove('thinking'); }
+}
+
+function _flashNode(nodeId, ok) {
+    if (!nodeId) return;
+    const sel = d3.selectAll('.node').filter(d => d && d.id === nodeId);
+    if (sel.empty()) return;
+    const cls = ok ? 'flash-success' : 'flash-fail';
+    sel.classed(cls, true);
+    setTimeout(() => sel.classed(cls, false), 750);
 }
 
 // ═══════════════════════════════════════════════════════════
@@ -330,34 +396,31 @@ function renderGraphIndicators(state) {
 }
 
 // ══════════════════════════��════════════════════════════════
-//  D3 GRAPH — v5 Node Anatomy
+//  D3 GRAPH — incremental enter/update/exit (smooth animation)
+//
+//  Key change vs. the old code: we no longer wipe and re-create
+//  the SVG every step. Instead we keep one persistent force
+//  simulation and use D3 data joins so node status changes
+//  animate (color/ring transitions) without re-laying-out the
+//  whole graph. Auto-play now looks like a state machine
+//  evolving, not a flicker reel.
 // ═══════════════════════════════════════════════════════════
-function renderGraph(state) {
-    const graphData = state.graph;
-    if (!graphData || !graphData.nodes || graphData.nodes.length === 0) return;
-
-    const container = document.getElementById('graph-area');
-    const W = container.clientWidth  || 600;
-    const H = container.clientHeight || 400;
+const R = d => 20 + (d.urgency || 0.4) * 7;
+const STATUS_TRANSITION_MS = 380;
+let _graphInitialized = false;
+let _persistentNodes = [];   // mutated in place across steps
+let _persistentLinks = [];
 
+function _setupGraphChrome() {
     const svg = d3.select('#graph-svg');
-    svg.selectAll('*').remove();
-
-    const prevPos = {};
-    if (d3Sim) {
-        d3Sim.stop();
-        d3Sim.nodes().forEach(n => { prevPos[n.id] = { x: n.x, y: n.y }; });
-    }
+    if (!svg.select('defs').empty()) return;  // already done
 
     const defs = svg.append('defs');
-
-    // Arrow markers per edge type
-    const markerDefs = [
+    [
         { id: 'arrow-dep',      color: '#475569' },
         { id: 'arrow-conflict', color: '#fb7185' },
         { id: 'arrow-trust',    color: '#8b5cf6' },
-    ];
-    markerDefs.forEach(({ id, color }) => {
+    ].forEach(({ id, color }) => {
         defs.append('marker')
             .attr('id', id)
             .attr('viewBox', '0 -4 8 8').attr('refX', 28).attr('refY', 0)
@@ -365,29 +428,72 @@ function renderGraph(state) {
             .append('path').attr('d', 'M0,-4L8,0L0,4').attr('fill', color);
     });
 
-    // Glow filter for selected
-    const filt = defs.append('filter').attr('id', 'glow').attr('x', '-30%').attr('y', '-30%').attr('width', '160%').attr('height', '160%');
-    filt.append('feGaussianBlur').attr('in', 'SourceGraphic').attr('stdDeviation', '4').attr('result', 'blur');
-    filt.append('feMerge').selectAll('feMergeNode').data(['blur','SourceGraphic']).join('feMergeNode').attr('in', d => d);
+    const filt = defs.append('filter').attr('id', 'glow')
+        .attr('x','-30%').attr('y','-30%').attr('width','160%').attr('height','160%');
+    filt.append('feGaussianBlur').attr('in','SourceGraphic').attr('stdDeviation','4').attr('result','blur');
+    filt.append('feMerge').selectAll('feMergeNode').data(['blur','SourceGraphic'])
+        .join('feMergeNode').attr('in', d => d);
 
-    const g = svg.append('g');
+    const g = svg.append('g').attr('class', 'graph-root');
+    g.append('g').attr('class', 'edges');
+    g.append('g').attr('class', 'nodes');
     svg.call(d3.zoom().scaleExtent([0.35, 3]).on('zoom', e => g.attr('transform', e.transform)));
+}
+
+function renderGraph(state) {
+    const graphData = state.graph;
+    if (!graphData || !graphData.nodes || graphData.nodes.length === 0) return;
 
-    // Assign letter labels A, B, C…
-    const letterMap = {};
-    graphData.nodes.forEach((n, i) => { letterMap[n.id] = String.fromCharCode(65 + (i % 26)); });
-
-    const nodes = graphData.nodes.map(n => ({
-        ...n,
-        letter: letterMap[n.id],
-        x: prevPos[n.id]?.x ?? (W/2 + (Math.random()-0.5)*200),
-        y: prevPos[n.id]?.y ?? (H/2 + (Math.random()-0.5)*160),
-    }));
-    const links = (graphData.edges || []).map(e => ({...e}));
-
-    // Edges (curved paths for clarity)
-    const edgeGroup = g.append('g').attr('class', 'edges');
-    const link = edgeGroup.selectAll('path').data(links).join('path')
+    const container = document.getElementById('graph-area');
+    const W = container.clientWidth  || 600;
+    const H = container.clientHeight || 400;
+
+    _setupGraphChrome();
+    const svg = d3.select('#graph-svg');
+    const g   = svg.select('g.graph-root');
+
+    // Detect topology change: different node-id set or first render
+    const incomingIds = graphData.nodes.map(n => n.id).sort().join('|');
+    const persistedIds = _persistentNodes.map(n => n.id).sort().join('|');
+    const topologyChanged = !_graphInitialized || incomingIds !== persistedIds;
+
+    if (topologyChanged) {
+        // Carry over positions of nodes that survive the topology change
+        const prevPos = Object.fromEntries(_persistentNodes.map(n => [n.id, { x: n.x, y: n.y }]));
+        const letterMap = {};
+        graphData.nodes.forEach((n, i) => { letterMap[n.id] = String.fromCharCode(65 + (i % 26)); });
+
+        _persistentNodes = graphData.nodes.map(n => ({
+            ...n,
+            letter: letterMap[n.id],
+            x: prevPos[n.id]?.x ?? (W/2 + (Math.random()-0.5)*200),
+            y: prevPos[n.id]?.y ?? (H/2 + (Math.random()-0.5)*160),
+        }));
+        _persistentLinks = (graphData.edges || []).map(e => ({ ...e }));
+    } else {
+        // Same topology — just merge fresh status / urgency / labels onto live objects
+        const byId = Object.fromEntries(_persistentNodes.map(n => [n.id, n]));
+        graphData.nodes.forEach(fresh => {
+            const live = byId[fresh.id];
+            if (!live) return;
+            live.status   = fresh.status;
+            live.urgency  = fresh.urgency;
+            live.label    = fresh.label;
+            live.deadline = fresh.deadline;
+            live.estimated_duration_hours = fresh.estimated_duration_hours;
+        });
+    }
+
+    // ── EDGES (data join) ────────────────────────────────────
+    const edgeSel = g.select('g.edges')
+        .selectAll('path.edge')
+        .data(_persistentLinks, d => `${d.source.id || d.source}-${d.target.id || d.target}-${d.edge_type || 'dep'}`);
+
+    edgeSel.exit()
+        .transition().duration(STATUS_TRANSITION_MS).style('opacity', 0)
+        .remove();
+
+    const edgeEnter = edgeSel.enter().append('path')
         .attr('class', d => {
             const t = d.edge_type || 'dependency';
             if (t === 'conflict')     return 'edge conflict';
@@ -400,14 +506,26 @@ function renderGraph(state) {
             if (t === 'conflict')     return 'url(#arrow-conflict)';
             if (t === 'trust_impact') return 'url(#arrow-trust)';
             return 'url(#arrow-dep)';
-        });
+        })
+        .style('opacity', 0);
+
+    edgeEnter.transition().duration(STATUS_TRANSITION_MS).style('opacity', 1);
+
+    const linkAll = edgeEnter.merge(edgeSel);
 
-    const R = d => 20 + (d.urgency || 0.4) * 7;
+    // ── NODES (data join) ────────────────────────────────────
+    const nodeSel = g.select('g.nodes')
+        .selectAll('g.node')
+        .data(_persistentNodes, d => d.id);
 
-    // Node groups
-    const nodeGroup = g.append('g').attr('class', 'nodes');
-    const node = nodeGroup.selectAll('g').data(nodes).join('g')
-        .attr('class', d => `node ${d.status || 'pending'}${d.id === selectedNode ? ' selected' : ''}`)
+    nodeSel.exit()
+        .transition().duration(STATUS_TRANSITION_MS)
+        .style('opacity', 0)
+        .remove();
+
+    const nodeEnter = nodeSel.enter().append('g')
+        .attr('class', d => `node ${d.status || 'pending'}`)
+        .style('opacity', 0)
         .call(d3.drag()
             .on('start', (e, d) => { if (!e.active) d3Sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
             .on('drag',  (e, d) => { d.fx = e.x; d.fy = e.y; })
@@ -415,57 +533,67 @@ function renderGraph(state) {
         )
         .on('click', (e, d) => { e.stopPropagation(); selectNode(d.id); });
 
-    // Pulse ring (CSS animates only .pending)
-    node.append('circle').attr('class', 'node-pulse').attr('r', d => R(d) + 10);
-
-    // Background fill
-    node.append('circle').attr('class', 'node-bg').attr('r', d => R(d));
-
-    // Status ring stroke
-    node.append('circle').attr('class', 'node-ring').attr('r', d => R(d));
-
-    // Letter label (center)
-    node.append('text')
-        .attr('class', 'node-letter')
-        .attr('dominant-baseline', 'central')
-        .text(d => d.letter);
-
-    // Commitment label below node
-    node.append('text')
-        .attr('class', 'node-label')
+    nodeEnter.append('circle').attr('class', 'node-pulse').attr('r', d => R(d) + 10);
+    nodeEnter.append('circle').attr('class', 'node-bg').attr('r', d => R(d));
+    nodeEnter.append('circle').attr('class', 'node-ring').attr('r', d => R(d));
+    nodeEnter.append('text').attr('class', 'node-letter').attr('dominant-baseline', 'central');
+    nodeEnter.append('text').attr('class', 'node-label');
+    nodeEnter.append('text').attr('class', 'node-deadline');
+
+    nodeEnter.transition().duration(STATUS_TRANSITION_MS).style('opacity', 1);
+
+    const nodeAll = nodeEnter.merge(nodeSel);
+
+    // ── Update visuals on ALL nodes (smooth status transitions) ───────
+    nodeAll
+        .attr('class', d => `node ${d.status || 'pending'}${d.id === selectedNode ? ' selected' : ''}`);
+    nodeAll.select('circle.node-pulse').attr('r', d => R(d) + 10);
+    nodeAll.select('circle.node-bg')
+        .transition().duration(STATUS_TRANSITION_MS)
+        .attr('r', d => R(d));
+    nodeAll.select('circle.node-ring')
+        .transition().duration(STATUS_TRANSITION_MS)
+        .attr('r', d => R(d));
+    nodeAll.select('text.node-letter').text(d => d.letter);
+    nodeAll.select('text.node-label')
         .attr('dy', d => R(d) + 14)
         .text(d => {
             const lbl = d.label || d.id;
             return lbl.length > 16 ? lbl.slice(0, 14) + '…' : lbl;
         });
-
-    // Hours hint (small, below label)
-    node.append('text')
-        .attr('class', 'node-deadline')
+    nodeAll.select('text.node-deadline')
         .attr('dy', d => R(d) + 26)
         .text(d => d.estimated_duration_hours ? `${d.estimated_duration_hours}h` : '');
 
-    // Force simulation
-    d3Sim = d3.forceSimulation(nodes)
-        .force('link',    d3.forceLink(links).id(d => d.id).distance(130).strength(0.45))
-        .force('charge',  d3.forceManyBody().strength(-380))
-        .force('center',  d3.forceCenter(W/2, H/2))
-        .force('collide', d3.forceCollide(d => R(d) + 32))
-        .on('tick', () => {
-            link.attr('d', d => {
-                const src  = d.source, tgt = d.target;
-                const dx   = tgt.x - src.x, dy = tgt.y - src.y;
-                const dist = Math.sqrt(dx*dx + dy*dy) || 1;
-                const sr   = R(src) + 2, tr = R(tgt) + 2;
-                const sx   = src.x + (dx/dist)*sr, sy = src.y + (dy/dist)*sr;
-                const tx   = tgt.x - (dx/dist)*tr, ty = tgt.y - (dy/dist)*tr;
-                // Gentle curve to distinguish overlapping edges
-                const cx = (sx+tx)/2 - (dy/dist)*18;
-                const cy = (sy+ty)/2 + (dx/dist)*18;
-                return `M${sx},${sy} Q${cx},${cy} ${tx},${ty}`;
+    // ── Force simulation: build once, gently rewarm on topology change ─
+    if (topologyChanged) {
+        if (d3Sim) d3Sim.stop();
+        d3Sim = d3.forceSimulation(_persistentNodes)
+            .force('link',    d3.forceLink(_persistentLinks).id(d => d.id).distance(130).strength(0.45))
+            .force('charge',  d3.forceManyBody().strength(-380))
+            .force('center',  d3.forceCenter(W/2, H/2))
+            .force('collide', d3.forceCollide(d => R(d) + 32))
+            .alpha(0.6).alphaDecay(0.05)
+            .on('tick', () => {
+                linkAll.attr('d', d => {
+                    const src  = d.source, tgt = d.target;
+                    const dx   = tgt.x - src.x, dy = tgt.y - src.y;
+                    const dist = Math.sqrt(dx*dx + dy*dy) || 1;
+                    const sr   = R(src) + 2, tr = R(tgt) + 2;
+                    const sx   = src.x + (dx/dist)*sr, sy = src.y + (dy/dist)*sr;
+                    const tx   = tgt.x - (dx/dist)*tr, ty = tgt.y - (dy/dist)*tr;
+                    const cx = (sx+tx)/2 - (dy/dist)*18;
+                    const cy = (sy+ty)/2 + (dx/dist)*18;
+                    return `M${sx},${sy} Q${cx},${cy} ${tx},${ty}`;
+                });
+                nodeAll.attr('transform', d => `translate(${d.x},${d.y})`);
             });
-            node.attr('transform', d => `translate(${d.x},${d.y})`);
-        });
+        _graphInitialized = true;
+    } else {
+        // Gentle nudge so collide adapts to status-driven radius changes,
+        // but no re-layout flicker.
+        d3Sim.alpha(0.12).restart();
+    }
 }
 
 // ═══════════════════════════════════════════════════════════
@@ -799,10 +927,13 @@ function closeCompare() {
     stopCompareAuto();
     $('compare-overlay').classList.add('hidden');
     compareData = null;
+    // Tear down mini-graph state so a fresh run starts clean
+    Object.values(_miniState).forEach(s => s.sim?.stop());
+    Object.keys(_miniState).forEach(k => delete _miniState[k]);
+    d3.select('#cmp-svg-naive').selectAll('*').remove();
+    d3.select('#cmp-svg-vergil').selectAll('*').remove();
 }
 
-$('cmp-scenario-select')?.addEventListener('change', updateCmpScenarioMeta);
-
 function updateCmpScenarioMeta() {
     const id   = $('cmp-scenario-select').value;
     const meta = SCENARIO_DESCS[id] || { icon:'⚡', name: id.replace('scenario_','').replace(/_/g,' '), desc:'' };
@@ -899,21 +1030,33 @@ function renderCmpStep(idx) {
         const icon = actionIcon(step.action);
         const r    = step.reward || 0;
         const rS   = r >= 0 ? '+' : '';
+        const failTag = step.caused_failure
+            ? '<span style="background:rgba(251,113,133,0.15);color:var(--s-failed);padding:1px 6px;border-radius:4px;font-size:9px;margin-left:6px">⚠ cascade</span>' : '';
         if (isVergil && step.reasoning) {
-            return `${icon} <strong>${step.action}</strong> → ${step.target || '—'}<br>
+            return `${icon} <strong>${step.action}</strong> → ${step.target || '—'}${failTag}<br>
                 <span style="color:#c084fc;margin-top:3px;display:block">🧠 ${step.reasoning}</span>
                 <span style="color:var(--t3)">${rS}${r.toFixed(3)}</span>`;
         }
-        return `${icon} <strong>${step.action}</strong> → ${step.target || '—'}<span style="color:var(--t3);margin-left:8px">${rS}${r.toFixed(3)}</span>`;
+        return `${icon} <strong>${step.action}</strong> → ${step.target || '—'}${failTag}<span style="color:var(--t3);margin-left:8px">${rS}${r.toFixed(3)}</span>`;
     }
 
     $('naive-step-display').innerHTML  = stepHtml(nStep, false);
     $('vergil-step-display').innerHTML = stepHtml(vStep, true);
 
+    // Animate the mini graphs to this step's CDG snapshot (or fall back to final graph)
+    const naiveGraph  = nStep?.graph  || compareData.naive.final_graph;
+    const vergilGraph = vStep?.graph || compareData.vergil.final_graph;
+    if (naiveGraph)  renderMiniGraph('#cmp-svg-naive',  naiveGraph,  'naive');
+    if (vergilGraph) renderMiniGraph('#cmp-svg-vergil', vergilGraph, 'vergil');
+
     if (nStep?.caused_failure) {
         $('cmp-svg-naive').classList.add('cascade-active');
         setTimeout(() => $('cmp-svg-naive').classList.remove('cascade-active'), 800);
     }
+    if (vStep?.caused_failure) {
+        $('cmp-svg-vergil').classList.add('cascade-active');
+        setTimeout(() => $('cmp-svg-vergil').classList.remove('cascade-active'), 800);
+    }
 }
 
 function compareStep(delta) { renderCmpStep(compareStepIdx + delta); }
@@ -942,54 +1085,94 @@ function stopCompareAuto() {
     if (btn) { btn.textContent = 'Auto ▶'; btn.classList.remove('playing'); }
 }
 
+/**
+ * Mini graph renderer used by the Compare overlay. Maintains a persistent
+ * simulation per side so stepping through the trajectory animates node
+ * status changes (pending → accepted → completed/failed) smoothly instead
+ * of redrawing from scratch.
+ */
+const _miniState = {};   // svgSelector -> { sim, nodes, links }
+const COLOR_MAP  = { pending: '#818cf8', accepted: '#38bdf8', completed: '#34d399', failed: '#fb7185' };
+
 function renderMiniGraph(svgSelector, graphData, side) {
     if (!graphData?.nodes?.length) return;
     const svgEl = document.querySelector(svgSelector);
     if (!svgEl) return;
+
     const W = svgEl.clientWidth  || 500;
     const H = svgEl.clientHeight || 300;
+    const svg = d3.select(svgSelector);
+
+    let st = _miniState[svgSelector];
+    const incomingIds = graphData.nodes.map(n => n.id).sort().join('|');
+    const sameTopology = st && st.idsKey === incomingIds;
+
+    if (!sameTopology) {
+        // First draw or topology change: rebuild structure
+        svg.selectAll('*').remove();
+        const g = svg.append('g');
+
+        const prev = st?.byId || {};
+        const nodes = graphData.nodes.map(n => ({
+            ...n,
+            x: prev[n.id]?.x ?? (W/2 + (Math.random()-.5)*200),
+            y: prev[n.id]?.y ?? (H/2 + (Math.random()-.5)*200),
+        }));
+        const links = (graphData.edges || []).map(e => ({ ...e }));
+
+        const linkSel = g.append('g').selectAll('line').data(links).join('line')
+            .attr('stroke', '#2d3f58').attr('stroke-width', 1.5).attr('stroke-opacity', 0.6);
+
+        const nodeSel = g.append('g').selectAll('g').data(nodes, d => d.id).join('g')
+            .attr('class', 'mini-node');
+
+        nodeSel.append('circle').attr('class', 'mini-circle');
+        nodeSel.append('text')
+            .attr('class', 'mini-label')
+            .attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
+            .attr('fill', '#94a3b8').attr('font-size', '9px').attr('font-weight', '600')
+            .attr('pointer-events', 'none')
+            .text(d => d.label?.slice(0, 8) || d.id?.slice(0, 6));
+
+        if (st?.sim) st.sim.stop();
+        const sim = d3.forceSimulation(nodes)
+            .force('link',    d3.forceLink(links).id(d => d.id).distance(80))
+            .force('charge',  d3.forceManyBody().strength(-180))
+            .force('center',  d3.forceCenter(W/2, H/2))
+            .force('collide', d3.forceCollide(24))
+            .alpha(0.7).alphaDecay(0.06)
+            .on('tick', () => {
+                linkSel.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
+                       .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
+                nodeSel.attr('transform', d => `translate(${d.x},${d.y})`);
+            });
 
-    const svg   = d3.select(svgSelector);
-    svg.selectAll('*').remove();
-
-    const colorMap = {
-        pending:   '#818cf8', accepted:  '#38bdf8',
-        completed: '#34d399', failed:    '#fb7185',
-    };
-
-    const g     = svg.append('g');
-    const nodes = graphData.nodes.map(n => ({ ...n, x: W/2 + (Math.random()-.5)*200, y: H/2 + (Math.random()-.5)*200 }));
-    const links = (graphData.edges || []).map(e => ({...e}));
-
-    const link = g.append('g').selectAll('line').data(links).join('line')
-        .attr('stroke', '#2d3f58').attr('stroke-width', 1.5).attr('stroke-opacity', 0.6);
+        st = _miniState[svgSelector] = { sim, nodes, links, idsKey: incomingIds, side, byId: {} };
+    } else {
+        // Same topology — just merge new statuses/urgency into the live nodes
+        const byId = Object.fromEntries(st.nodes.map(n => [n.id, n]));
+        graphData.nodes.forEach(fresh => {
+            const live = byId[fresh.id];
+            if (!live) return;
+            live.status  = fresh.status;
+            live.urgency = fresh.urgency;
+        });
+        st.sim.alpha(0.08).restart();
+    }
 
-    const node = g.append('g').selectAll('g').data(nodes).join('g');
+    // Update circle visuals (always — covers both fresh & merged cases)
+    svg.selectAll('g.mini-node').data(st.nodes, d => d.id)
+        .select('circle.mini-circle')
+        .transition().duration(360)
+        .attr('r', d => 10 + (d.urgency || 0.5) * 5)
+        .attr('fill', d => `${COLOR_MAP[d.status] || '#475569'}18`)
+        .attr('stroke', d => COLOR_MAP[d.status] || '#475569')
+        .attr('stroke-width', d => d.status === 'failed' ? 2.5 : 1.5);
 
-    node.append('circle')
-        .attr('r', d => 10 + (d.urgency||0.5)*5)
-        .attr('fill', d => `${colorMap[d.status] || '#475569'}18`)
-        .attr('stroke', d => colorMap[d.status] || '#475569')
-        .attr('stroke-width', d => d.status === 'failed' ? 2.5 : 1.5)
+    svg.selectAll('g.mini-node').select('circle.mini-circle')
         .style('filter', d => d.status === 'failed' && side === 'naive'
             ? 'drop-shadow(0 0 8px rgba(251,113,133,0.8))' : 'none');
 
-    node.append('text')
-        .attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
-        .attr('fill', '#94a3b8').attr('font-size', '9px').attr('font-weight', '600')
-        .attr('pointer-events', 'none')
-        .text(d => d.label?.slice(0,8) || d.id?.slice(0,6));
-
-    const sim = d3.forceSimulation(nodes)
-        .force('link',    d3.forceLink(links).id(d => d.id).distance(80))
-        .force('charge',  d3.forceManyBody().strength(-180))
-        .force('center',  d3.forceCenter(W/2, H/2))
-        .force('collide', d3.forceCollide(24))
-        .on('tick', () => {
-            link.attr('x1',d=>d.source.x).attr('y1',d=>d.source.y)
-                .attr('x2',d=>d.target.x).attr('y2',d=>d.target.y);
-            node.attr('transform', d=>`translate(${d.x},${d.y})`);
-        });
-
-    setTimeout(() => sim.stop(), 3000);
+    // Snapshot positions in case of next topology change
+    st.byId = Object.fromEntries(st.nodes.map(n => [n.id, { x: n.x, y: n.y }]));
 }

frontend/index.html

@@ -115,7 +115,18 @@
                 <button class="ma-btn counter" data-action="counter_propose" title="Propose new terms">🔄 Counter</button>
                 <button class="ma-btn wait" data-action="do_nothing" title="Do nothing this step">⏳ Wait</button>
             </div>
-            <button class="autoplay-btn" id="btn-auto">▶ Auto-Play Agent</button>
+            <div class="autoplay-cluster">
+                <button class="autoplay-btn" id="btn-auto">▶ Auto-Play Agent</button>
+                <div class="autoplay-meta">
+                    <select id="autoplay-speed" class="speed-select" title="Auto-play speed">
+                        <option value="2200">🐢 Slow</option>
+                        <option value="1400" selected>⚡ Normal</option>
+                        <option value="700">🚀 Fast</option>
+                        <option value="250">🔥 Turbo</option>
+                    </select>
+                    <span class="autoplay-status" id="autoplay-status"></span>
+                </div>
+            </div>
         </div>
     </section>
 

frontend/style.css

@@ -340,6 +340,48 @@ html, body {
 .ma-btn.wait:hover    { border-color: var(--s-at-risk);   color: var(--s-at-risk); }
 .ma-btn:disabled      { opacity: 0.3; cursor: not-allowed; }
 
+.autoplay-cluster {
+  display: flex; flex-direction: column; gap: 6px;
+}
+.autoplay-meta {
+  display: flex; align-items: center; gap: 10px; justify-content: space-between;
+  font-size: 11px; color: var(--t3);
+}
+.speed-select {
+  font-family: var(--font); font-size: 11px; padding: 4px 8px;
+  background: var(--bg-card); color: var(--t2);
+  border: 1px solid var(--border); border-radius: var(--r-sm);
+  cursor: pointer; outline: none;
+}
+.speed-select:focus { border-color: var(--border-hi); }
+.autoplay-status {
+  flex: 1; font-family: var(--mono); font-size: 10px;
+  text-align: right; color: var(--t3);
+  letter-spacing: 0.04em;
+}
+.autoplay-status.thinking::before {
+  content: '●'; color: var(--brand2); margin-right: 4px;
+  animation: thinkPulse 1s ease-in-out infinite;
+}
+@keyframes thinkPulse {
+  0%,100% { opacity: 0.3; }
+  50%     { opacity: 1; }
+}
+
+/* Brief flash highlight on the node a decision targeted */
+.node.flash-success .node-ring { animation: flashSuccess 0.7s ease; }
+.node.flash-fail    .node-ring { animation: flashFail    0.7s ease; }
+@keyframes flashSuccess {
+  0%   { stroke-width: 2; filter: drop-shadow(0 0 0 rgba(52,211,153,0)); }
+  40%  { stroke-width: 5; filter: drop-shadow(0 0 12px rgba(52,211,153,0.9)); }
+  100% { stroke-width: 2; filter: drop-shadow(0 0 0 rgba(52,211,153,0)); }
+}
+@keyframes flashFail {
+  0%   { stroke-width: 2; filter: drop-shadow(0 0 0 rgba(251,113,133,0)); }
+  40%  { stroke-width: 5; filter: drop-shadow(0 0 12px rgba(251,113,133,0.9)); }
+  100% { stroke-width: 2; filter: drop-shadow(0 0 0 rgba(251,113,133,0)); }
+}
+
 .autoplay-btn {
   width: 100%; font-size: 12px; font-weight: 600; padding: 8px;
   border: none; border-radius: var(--r-sm); cursor: pointer;
@@ -423,11 +465,16 @@ html, body {
 /* D3 Node styles */
 .node { cursor: pointer; }
 .node .node-bg {
-  transition: r 200ms;
+  transition: r 380ms cubic-bezier(.4,0,.2,1), fill 380ms cubic-bezier(.4,0,.2,1);
 }
 .node .node-ring {
   fill: none; stroke-width: 2;
-  transition: stroke 300ms;
+  transition: stroke 380ms cubic-bezier(.4,0,.2,1), stroke-width 200ms;
+}
+.node .node-letter,
+.node .node-label,
+.node .node-deadline {
+  transition: fill 380ms cubic-bezier(.4,0,.2,1);
 }
 .node .node-letter {
   font-family: var(--font); font-size: 13px; font-weight: 800;

vergil/api/server.py

@@ -416,13 +416,19 @@ async def compare_agents(request: CompareRequest):
         raise HTTPException(status_code=404, detail=f"Scenario not found: {path.name}")
 
     def _run_agent(agent_fn, label: str) -> dict:
-        """Run one agent for n_steps and collect trajectory."""
+        """
+        Run one agent for n_steps and return BOTH a step list and a summary
+        metrics dict, plus per-step graph snapshots so the frontend can
+        scrub through the trajectory and watch the CDG evolve. The shape
+        below is what the Compare overlay's renderer expects.
+        """
         sim_env = VERGILEnv(seed=99)
         sim_pomdp = POMDPWrapper(sim_env)
         state, belief, _ = sim_pomdp.reset(scenario=_copy.deepcopy(scenario))
 
-        trajectory = []
+        steps: List[Dict] = []
         total_reward = 0.0
+        prev_failed_count = 0
 
         for step in range(request.n_steps):
             action, reasoning = agent_fn(state, sim_env)
@@ -431,13 +437,24 @@ async def compare_agents(request: CompareRequest):
             except Exception:
                 break
 
-            trajectory.append({
+            now_failed = sum(1 for n in new_state.cdg_nodes
+                             if n.status == CommitmentStatus.FAILED)
+            caused_failure = now_failed > prev_failed_count
+            prev_failed_count = now_failed
+
+            steps.append({
                 'step': step + 1,
                 'action': action.action_type.value,
                 'target': action.target_node_id,
                 'reward': round(reward, 4),
                 'reasoning': reasoning,
-                'state': _state_to_api_minimal(new_state),
+                'caused_failure': caused_failure,
+                'graph': _state_to_api_minimal(new_state)['graph'],
+                'satisfiability': round(new_state.satisfiability_score, 3),
+                'trust_avg': round(
+                    sum(te.trust_score for te in new_state.trust_entries.values())
+                    / max(1, len(new_state.trust_entries)), 3
+                ),
             })
             total_reward += reward
             state = new_state
@@ -445,17 +462,28 @@ async def compare_agents(request: CompareRequest):
                 break
 
         final = state
+        avg_trust = (
+            sum(te.trust_score for te in final.trust_entries.values())
+            / max(1, len(final.trust_entries))
+        ) if final.trust_entries else 0.0
+        n_completed = sum(1 for n in final.cdg_nodes if n.status == CommitmentStatus.COMPLETED)
+        n_failed    = sum(1 for n in final.cdg_nodes if n.status == CommitmentStatus.FAILED)
+
         return {
             'label': label,
-            'trajectory': trajectory,
-            'total_reward': round(total_reward, 4),
-            'final_satisfiability': round(final.satisfiability_score, 3),
+            'steps': steps,
+            'metrics': {
+                'total_reward': round(total_reward, 4),
+                'final_sat': round(final.satisfiability_score, 3),
+                'avg_trust': round(avg_trust, 3),
+                'n_completed': n_completed,
+                'n_failed': n_failed,
+                'n_steps_taken': len(steps),
+            },
             'final_trust': {
                 sid: round(te.trust_score, 3)
                 for sid, te in final.trust_entries.items()
             },
-            'n_completed': sum(1 for n in final.cdg_nodes if n.status == CommitmentStatus.COMPLETED),
-            'n_failed': sum(1 for n in final.cdg_nodes if n.status == CommitmentStatus.FAILED),
             'final_graph': _state_to_api(final)['graph'],
         }
 
@@ -471,15 +499,18 @@ async def compare_agents(request: CompareRequest):
         vergil_agent = _heuristic_decide
     vergil_result = _run_agent(vergil_agent, vergil_label)
 
+    nm = naive_result['metrics']
+    vm = vergil_result['metrics']
     return {
         "scenario_id": scenario.get('scenario_id', 'unknown'),
         "llm_loaded": _llm_model is not None,
         "naive": naive_result,
         "vergil": vergil_result,
         "comparison": {
-            "reward_delta": round(vergil_result['total_reward'] - naive_result['total_reward'], 4),
-            "sat_delta": round(vergil_result['final_satisfiability'] - naive_result['final_satisfiability'], 3),
-            "failure_reduction": naive_result['n_failed'] - vergil_result['n_failed'],
+            "reward_delta": round(vm['total_reward'] - nm['total_reward'], 4),
+            "sat_delta": round(vm['final_sat']    - nm['final_sat'],    3),
+            "failure_reduction": nm['n_failed'] - vm['n_failed'],
+            "trust_delta": round(vm['avg_trust'] - nm['avg_trust'], 3),
         }
     }