feat: active RLCR dynamic progress visualization

When a session is active:

1. Current round node enhancements:
   - Sweeping gradient bar at top (horizontal scan animation)
   - Pulsing orange glow shadow
   - Live blinking dot indicator next to phase tag
   - Stronger border highlight

2. Ghost "next round" node:
   - Dashed orange border with breathing opacity animation
   - Shows "R{N+1} Next" with spinner
   - "Awaiting..." status text
   - Positioned as the next node in the snake path

3. Flowing edge animation:
   - The connector between current round and ghost node
     has animated dashes (stroke-dashoffset animation)
   - Orange colored to distinguish from static connectors

All animations are CSS-only, no JavaScript timers.

Signed-off-by: Chao Liu <chao.liu.zevorn@gmail.com>

Author: zevorn

viz/static/css/layout.css

@@ -290,6 +290,82 @@
 .pl-node[data-verdict="complete"] { border-left: 4px solid var(--verdict-complete); }
 .pl-node[data-verdict="unknown"] { border-left: 4px solid var(--verdict-unknown); }
 
+/* ─── Active Node Enhancements ─── */
+.pl-node.active-round {
+    border-color: var(--accent);
+    box-shadow: 0 0 20px var(--accent-glow), var(--shadow-md);
+    animation: pulse-ring 2.5s var(--ease-in-out) infinite;
+}
+
+.node-active-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--bg-3);
+    overflow: hidden;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.node-active-bar-fill {
+    height: 100%;
+    width: 40%;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    animation: active-bar-sweep 2s ease-in-out infinite;
+}
+
+@keyframes active-bar-sweep {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(350%); }
+}
+
+.node-live-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    animation: live-blink 1.2s ease-in-out infinite;
+    flex-shrink: 0;
+}
+
+@keyframes live-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.2; }
+}
+
+/* ─── Ghost "In Progress" Node ─── */
+.pl-ghost-node {
+    border: 2px dashed var(--accent) !important;
+    border-left: 4px dashed var(--accent) !important;
+    background: var(--bg-glow) !important;
+    opacity: 0.7;
+    cursor: default !important;
+    animation: ghost-breathe 3s ease-in-out infinite;
+}
+
+.pl-ghost-node:hover {
+    border-color: var(--accent) !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+@keyframes ghost-breathe {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 0.8; }
+}
+
+/* ─── Active Edge (flowing dash animation) ─── */
+.pl-edge-active {
+    animation: edge-flow 1s linear infinite;
+}
+
+@keyframes edge-flow {
+    from { stroke-dashoffset: 0; }
+    to { stroke-dashoffset: -20; }
+}
+
 
 .node-header {
     display: flex;

viz/static/js/pipeline.js

@@ -21,21 +21,31 @@ function renderPipeline(container, session) {
         return
     }
 
-    const positions = computePositions(rounds.length)
+    const isActive = session.status === 'active'
+    // Total node count: rounds + 1 ghost node for active sessions
+    const totalNodes = isActive ? rounds.length + 1 : rounds.length
+    const positions = computePositions(totalNodes)
     const totalW = PL.PADDING * 2 + PL.COLS * PL.NODE_W + (PL.COLS - 1) * PL.GAP_X
-    const rows = Math.ceil(rounds.length / PL.COLS)
+    const rows = Math.ceil(totalNodes / PL.COLS)
     const totalH = PL.PADDING * 2 + rows * PL.NODE_H + (rows - 1) * (PL.GAP_Y + PL.TURN_H)
 
     let svgPaths = ''
-    for (let i = 0; i < rounds.length - 1; i++) {
-        svgPaths += buildConnector(positions[i], positions[i + 1])
+    for (let i = 0; i < totalNodes - 1; i++) {
+        const isLastEdge = isActive && i === rounds.length - 1
+        svgPaths += buildConnector(positions[i], positions[i + 1], isLastEdge)
     }
 
     let nodesHtml = ''
     rounds.forEach((r, idx) => {
         nodesHtml += renderNodeCard(r, session, positions[idx])
     })
 
+    // Ghost "in progress" node for active sessions
+    if (isActive) {
+        const ghostPos = positions[rounds.length]
+        nodesHtml += renderGhostNode(session, ghostPos)
+    }
+
     _scale = 1; _tx = 0; _ty = 0
 
     container.innerHTML = `
@@ -81,18 +91,19 @@ function computePositions(count) {
     return positions
 }
 
-function buildConnector(a, b) {
+function buildConnector(a, b, animated) {
     const ay = a.y + PL.NODE_H / 2
     const by = b.y + PL.NODE_H / 2
-    const style = `fill="none" stroke="var(--border-2)" stroke-width="2" stroke-dasharray="6 4"`
+    const cls = animated ? 'class="pl-edge-active"' : ''
+    const color = animated ? 'var(--accent)' : 'var(--border-2)'
+    const style = `fill="none" stroke="${color}" stroke-width="2" stroke-dasharray="6 4" ${cls}`
 
     if (a.row === b.row) {
         const x1 = a.reversed ? a.x : a.x + PL.NODE_W
         const x2 = a.reversed ? b.x + PL.NODE_W : b.x
         return `<line x1="${x1}" y1="${ay}" x2="${x2}" y2="${ay}" ${style}/>`
     }
 
-    // U-turn: exit side → down → enter side
     const exitX = a.reversed ? a.x : a.x + PL.NODE_W
     const enterX = b.reversed ? b.x + PL.NODE_W : b.x
     const midY = (a.y + PL.NODE_H + b.y) / 2
@@ -112,14 +123,22 @@ function renderNodeCard(r, session, pos) {
     if (r.bitlesson_delta && r.bitlesson_delta !== 'none') stats.push('📚')
     if (!hasSummary) stats.push('…')
 
+    // Active node gets a progress indicator
+    const activeIndicator = isActive ? `
+        <div class="node-active-bar">
+            <div class="node-active-bar-fill"></div>
+        </div>` : ''
+
     return `
         <div class="pl-node ${isActive ? 'active-round' : ''}" data-verdict="${verdict}" data-round="${r.number}"
              style="left:${pos.x}px;top:${pos.y}px;width:${PL.NODE_W}px"
              onclick="openFlyout(this, ${r.number})">
+            ${activeIndicator}
             <div class="node-header">
                 <div style="display:flex;align-items:center;gap:6px">
                     <span class="node-round-num">R${r.number}</span>
                     <span class="node-phase-tag">${esc(phaseLabel)}</span>
+                    ${isActive ? '<span class="node-live-dot"></span>' : ''}
                 </div>
                 <div class="node-meta">
                     <span class="node-verdict-dot" style="background:var(--verdict-${verdict})"></span>
@@ -130,6 +149,26 @@ function renderNodeCard(r, session, pos) {
         </div>`
 }
 
+function renderGhostNode(session, pos) {
+    const nextRound = session.current_round + 1
+    return `
+        <div class="pl-node pl-ghost-node"
+             style="left:${pos.x}px;top:${pos.y}px;width:${PL.NODE_W}px">
+            <div class="node-header">
+                <div style="display:flex;align-items:center;gap:6px">
+                    <span class="node-round-num" style="opacity:0.5">R${nextRound}</span>
+                    <span class="node-phase-tag" style="opacity:0.5">Next</span>
+                </div>
+                <div class="node-meta">
+                    <span class="spinner" style="width:10px;height:10px"></span>
+                </div>
+            </div>
+            <div class="node-mini-stats">
+                <span style="color:var(--accent)">Awaiting...</span>
+            </div>
+        </div>`
+}
+
 // ─── Flyout Modal (expand from node to center) ───
 
 function openFlyout(nodeEl, roundNum) {