walkthrough: scroll-driven replay (sticky state bar + active-step highlight)

The walkthrough now simulates a playback as you scroll: a sticky bar at
the top of the Accordion shows the live phase, round counter X/87, an
animated token-usage bar, and trusted-fact count. Each of the 5 step
cards carries data-wt-* attributes; a small IntersectionObserver / scroll
handler picks whichever block is closest to viewport center, highlights
it, dims the past/future, and pushes its numbers into the sticky bar.
When the Context-Management step becomes active the token bar drops
dramatically (80,824 -> 2,400) with a green flash, visualising the
condenser compression.

Pure HTML/CSS/JS, no libraries; respects prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app.py

@@ -1128,8 +1128,99 @@ gradio-app > div {
    unchanged; expanded view illustrates the 5 stages of a research run:
    Question → think+tool×N → context-management → think+tool×N → answer.
    ──────────────────────────────────────────────────────────────────────── */
-.walkthrough { font-size: 0.9rem; color: var(--q-text); }
+.walkthrough { font-size: 0.9rem; color: var(--q-text); position: relative; }
 .walkthrough .wt-intro { color: var(--q-muted); margin: 0 0 14px; line-height: 1.55; }
+
+/* Sticky "live state" bar at top of the walkthrough — updates as the user
+   scrolls past each step, simulating the agent's progress like a replay. */
+.walkthrough .wt-progress {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 14px;
+  margin: 0 0 12px;
+  background: var(--q-paper);
+  border: 1px solid var(--q-line-strong);
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(15,23,42,0.05);
+  backdrop-filter: saturate(180%) blur(6px);
+  -webkit-backdrop-filter: saturate(180%) blur(6px);
+}
+.walkthrough .wt-progress-phase {
+  font-size: 0.74rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--q-accent);
+  padding: 3px 10px;
+  background: var(--q-accent-soft);
+  border-radius: 999px;
+  transition: background 300ms ease, color 300ms ease;
+}
+.walkthrough .wt-progress-meters {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 0.76rem;
+  color: var(--q-muted);
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+}
+.walkthrough .wt-progress-meters strong {
+  color: var(--q-text);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  transition: color 200ms ease;
+}
+.walkthrough .wt-tokens-bar {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 90px;
+  height: 6px;
+  background: var(--q-surface-alt);
+  border-radius: 999px;
+  overflow: hidden;
+  margin-left: 6px;
+}
+.walkthrough .wt-tokens-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0%;
+  background: linear-gradient(90deg, #3B82F6 0%, var(--q-accent) 70%, #DC2626 100%);
+  transition: width 700ms cubic-bezier(.4,0,.2,1);
+}
+.walkthrough .wt-tokens-fill.dropped {
+  /* Visual flash when the condenser drops the token count */
+  background: linear-gradient(90deg, #0B9E8A 0%, #0B9E8A 100%);
+}
+
+/* Each step card transitions opacity / lift as it becomes active. */
+.walkthrough .wt-block {
+  opacity: 0.45;
+  transform: translateY(4px);
+  transition: opacity 400ms ease, transform 400ms ease, box-shadow 400ms ease, border-color 300ms ease;
+}
+.walkthrough .wt-block.wt-active {
+  opacity: 1;
+  transform: translateY(0);
+  box-shadow: 0 4px 18px rgba(190,91,43,0.10);
+  border-color: var(--q-accent-line, var(--q-accent));
+}
+.walkthrough .wt-block.wt-past { opacity: 0.55; }
+.walkthrough .wt-block.wt-condenser.wt-active {
+  /* extra emphasis when condenser step is the active one */
+  box-shadow: 0 6px 22px rgba(190,91,43,0.18);
+}
+@media (prefers-reduced-motion: reduce) {
+  .walkthrough .wt-block, .walkthrough .wt-tokens-fill, .walkthrough .wt-progress-phase, .walkthrough .wt-progress-meters strong {
+    transition: none !important;
+  }
+}
 .walkthrough .wt-block {
   background: var(--q-paper);
   border: 1px solid var(--q-line);
@@ -2601,13 +2692,27 @@ WALKTHROUGH_HTML = """
 <div class="walkthrough">
   <p class="wt-intro">
     The trace below is from a single Mind2Web 2 task that QUEST-35B solved end-to-end.
-    It shows how the agent loops through <strong>think → tool</strong>, hits its 80k-token
-    context budget, condenses everything to a structured memory state, and then closes out
-    with a synthesized answer.
+    Scroll through to <strong>watch the agent replay itself</strong> — the sticky bar
+    above tracks the live round count, context token usage, and trusted-fact tally
+    as each step enters view.
   </p>
 
+  <!-- Sticky "live state" replay bar — JS below updates it as each .wt-block scrolls into view. -->
+  <div class="wt-progress" aria-live="polite">
+    <span class="wt-progress-phase" data-wt-phase>Question</span>
+    <span class="wt-progress-meters">
+      <span>round&nbsp;<strong data-wt-round>0</strong>/87</span>
+      <span>
+        <strong data-wt-tokens>0</strong>&nbsp;tokens
+        <span class="wt-tokens-bar"><span class="wt-tokens-fill" data-wt-tokens-fill></span></span>
+      </span>
+      <span><strong data-wt-trusted>0</strong>&nbsp;trusted&nbsp;facts</span>
+    </span>
+  </div>
+
   <!-- Question -->
-  <div class="wt-block wt-question">
+  <div class="wt-block wt-question"
+       data-wt-phase="Question" data-wt-round="0" data-wt-tokens="0" data-wt-trusted="0">
     <div class="wt-phase-tag">Question</div>
     <blockquote>
       I am interested in Retrieval-Augmented Generation (RAG) and would like to explore
@@ -2622,7 +2727,8 @@ WALKTHROUGH_HTML = """
   </div>
 
   <!-- Phase 1 -->
-  <div class="wt-block">
+  <div class="wt-block"
+       data-wt-phase="Phase 1 · Exploration" data-wt-round="62" data-wt-tokens="80824" data-wt-trusted="0">
     <div class="wt-phase-tag">Phase 1 · Exploration <span class="wt-rounds">rounds 1 → 62</span></div>
     <div class="wt-stats">
       🧠 think + 🔧 tool × <strong>62 turns</strong> &nbsp;·&nbsp;
@@ -2663,7 +2769,8 @@ WALKTHROUGH_HTML = """
   </div>
 
   <!-- Context Management -->
-  <div class="wt-block wt-condenser">
+  <div class="wt-block wt-condenser"
+       data-wt-phase="🗜️ Context Mgmt" data-wt-round="62" data-wt-tokens="2400" data-wt-trusted="11" data-wt-tokens-drop="1">
     <div class="wt-phase-tag">🗜️ Context Management <span class="wt-rounds">round 62</span></div>
     <div class="wt-stats">trigger: <code>CONTEXT_THRESHOLD</code> (80,000-token budget hit) &nbsp;·&nbsp; condenser LLM fires</div>
     <div class="wt-stats">output state: <strong>11 trusted</strong> facts · 1 uncertain · 0 untrusted &nbsp;·&nbsp; 21 visited sources · 8 search queries (deduplicated)</div>
@@ -2689,7 +2796,8 @@ WALKTHROUGH_HTML = """
   </div>
 
   <!-- Phase 2 -->
-  <div class="wt-block">
+  <div class="wt-block"
+       data-wt-phase="Phase 2 · Synthesize" data-wt-round="87" data-wt-tokens="41721" data-wt-trusted="11">
     <div class="wt-phase-tag">Phase 2 · Resolve &amp; Synthesize <span class="wt-rounds">rounds 63 → 87</span></div>
     <div class="wt-stats">
       model reads <code>prev_state</code>, sees the one <em>uncertain</em> claim
@@ -2699,7 +2807,8 @@ WALKTHROUGH_HTML = """
   </div>
 
   <!-- Answer -->
-  <div class="wt-block">
+  <div class="wt-block"
+       data-wt-phase="✍️ Answer" data-wt-round="87" data-wt-tokens="41721" data-wt-trusted="11">
     <div class="wt-phase-tag">✍️ Answer <span class="wt-rounds">round 87</span></div>
     <div class="wt-stats">final structured markdown built directly from the consolidated trusted state</div>
     <div class="wt-table-wrap">
@@ -2723,6 +2832,77 @@ WALKTHROUGH_HTML = """
     </div>
   </div>
 </div>
+
+<script>
+(function () {
+  // Wait for the walkthrough markup to actually be in the DOM (it lives inside
+  // an Accordion that may render later) and initialise once.
+  function init() {
+    var roots = document.querySelectorAll('.walkthrough');
+    roots.forEach(function (root) {
+      if (root.dataset.wtInit) return;
+      root.dataset.wtInit = '1';
+
+      var blocks = root.querySelectorAll('.wt-block');
+      if (!blocks.length) return;
+      var TOTAL_BUDGET = 80824; // peak token count, used to scale the bar
+      var phaseEl = root.querySelector('[data-wt-phase]');
+      var roundEl = root.querySelector('[data-wt-round]');
+      var tokensEl = root.querySelector('[data-wt-tokens]');
+      var fillEl = root.querySelector('[data-wt-tokens-fill]');
+      var trustedEl = root.querySelector('[data-wt-trusted]');
+
+      function setActive(idx) {
+        blocks.forEach(function (b, i) {
+          b.classList.toggle('wt-active', i === idx);
+          b.classList.toggle('wt-past', i < idx);
+        });
+        var b = blocks[idx];
+        if (!b) return;
+        phaseEl.textContent = b.dataset.wtPhase || '';
+        roundEl.textContent = b.dataset.wtRound || '0';
+        var t = parseInt(b.dataset.wtTokens || '0', 10);
+        tokensEl.textContent = t.toLocaleString();
+        fillEl.style.width = Math.min(100, (t / TOTAL_BUDGET) * 100) + '%';
+        fillEl.classList.toggle('dropped', b.dataset.wtTokensDrop === '1');
+        trustedEl.textContent = b.dataset.wtTrusted || '0';
+      }
+      setActive(0);
+
+      // Determine active block by which one is closest to viewport center.
+      function recompute() {
+        var bestIdx = 0;
+        var bestDist = Infinity;
+        var vc = window.innerHeight / 2;
+        blocks.forEach(function (b, i) {
+          var r = b.getBoundingClientRect();
+          if (r.bottom < 0 || r.top > window.innerHeight) return;
+          var c = (r.top + r.bottom) / 2;
+          var d = Math.abs(c - vc);
+          if (d < bestDist) { bestDist = d; bestIdx = i; }
+        });
+        setActive(bestIdx);
+      }
+      window.addEventListener('scroll', recompute, { passive: true });
+      window.addEventListener('resize', recompute);
+      // Recompute when the accordion opens (its children become visible).
+      var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) { if (e.isIntersecting) recompute(); });
+      }, { threshold: 0.05 });
+      blocks.forEach(function (b) { io.observe(b); });
+      // First paint after Accordion expand
+      setTimeout(recompute, 80);
+    });
+  }
+  // Gradio mounts asynchronously — observe the DOM and (re)init when nodes appear.
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  new MutationObserver(init).observe(document.body, { childList: true, subtree: true });
+})();
+</script>
 """