ui: remove walkthrough section per user request

The 'A real Mind2Web2 research run' accordion (UI block, WALKTHROUGH_HTML
constant, and all .walkthrough CSS) has been removed. No behavior change to
the demo itself.

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

app.py

@@ -1122,241 +1122,6 @@ gradio-app > div {
   line-height: 1.45;
 }
 
-/* ────────────────────────────────────────────────────────────────────────
-   Walkthrough: a curated trace from one real Mind2Web 2 task. Shown inside
-   a collapsed Accordion below the main demo so the default view is
-   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); 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);
-  border-radius: 12px;
-  padding: 14px 16px;
-  margin: 0 0 10px;
-}
-.walkthrough .wt-phase-tag {
-  font-size: 0.72rem;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--q-accent);
-  margin: 0 0 10px;
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.walkthrough .wt-rounds {
-  font-size: 0.68rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: none;
-  color: var(--q-muted);
-}
-.walkthrough .wt-question blockquote {
-  margin: 0;
-  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif;
-  font-size: 0.92rem;
-  line-height: 1.55;
-  color: var(--q-text);
-  border-left: 3px solid var(--q-accent-line, var(--q-accent));
-  padding: 2px 0 2px 12px;
-}
-.walkthrough .wt-stats {
-  font-size: 0.82rem;
-  color: var(--q-muted);
-  line-height: 1.55;
-  margin: 4px 0;
-}
-.walkthrough .wt-stats code { padding: 1px 5px; background: var(--q-surface-alt); border-radius: 4px; font-size: 0.8em; }
-.walkthrough .wt-turn {
-  background: var(--q-surface-alt);
-  border-radius: 8px;
-  padding: 10px 12px;
-  margin: 10px 0 0;
-}
-.walkthrough .wt-turn-label {
-  display: inline-block;
-  font-size: 0.66rem;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--q-muted);
-  margin-bottom: 8px;
-}
-.walkthrough .wt-step { margin: 6px 0; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
-.walkthrough .wt-step-tag {
-  font-size: 0.72rem;
-  font-weight: 700;
-  color: var(--q-accent);
-  flex: 0 0 76px;
-  padding-top: 2px;
-}
-.walkthrough .wt-step-body { flex: 1 1 0; min-width: 0; font-size: 0.85rem; line-height: 1.55; }
-.walkthrough .wt-step pre {
-  margin: 0;
-  padding: 8px 10px;
-  background: #0D1117;
-  color: #E6EDF3;
-  border-radius: 6px;
-  font-size: 0.76rem;
-  line-height: 1.5;
-  overflow-x: auto;
-  white-space: pre;
-}
-.walkthrough .wt-ellipsis {
-  color: var(--q-muted);
-  font-style: italic;
-  font-size: 0.8rem;
-  padding: 8px 4px 0 8px;
-  border-left: 2px dotted var(--q-line-strong);
-  margin-left: 8px;
-}
-.walkthrough .wt-condenser {
-  border-color: var(--q-accent-line, var(--q-accent));
-  background: var(--q-accent-soft);
-}
-.walkthrough .wt-condenser details { margin: 8px 0 0; }
-.walkthrough .wt-condenser summary {
-  cursor: pointer;
-  color: var(--q-accent);
-  font-size: 0.78rem;
-  font-weight: 600;
-  user-select: none;
-}
-.walkthrough .wt-condenser details pre {
-  margin: 8px 0 0;
-  padding: 10px;
-  background: #0D1117;
-  color: #E6EDF3;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  overflow-x: auto;
-}
-.walkthrough .wt-effect {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px dashed var(--q-line-strong);
-  font-size: 0.82rem;
-  color: var(--q-text);
-}
-.walkthrough .wt-table-wrap { overflow-x: auto; margin-top: 10px; }
-.walkthrough .wt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
-.walkthrough .wt-table th, .walkthrough .wt-table td {
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--q-line);
-  text-align: left;
-  vertical-align: top;
-}
-.walkthrough .wt-table th {
-  background: var(--q-surface-alt);
-  font-weight: 700;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--q-muted);
-}
-.walkthrough .wt-table code { padding: 1px 5px; background: var(--q-surface-alt); border-radius: 4px; font-size: 0.78rem; }
-.walkthrough .wt-table a { color: var(--q-accent); text-decoration: none; }
-.walkthrough .wt-table a:hover { text-decoration: underline; }
-@media (max-width: 600px) {
-  .walkthrough .wt-step-tag { flex-basis: 100%; }
-}
 .memory-help {
   color: var(--q-muted);
   font-size: 12.5px;
@@ -2684,227 +2449,6 @@ EXAMPLES = [
 ]
 
 
-# Curated walkthrough of one real Mind2Web 2 task that QUEST-35B ran end-to-end.
-# All numbers, sample turns, the condenser trigger and the trusted-facts table
-# are taken verbatim from inference/.../task_idx_95/iter1 (trajectories.jsonl +
-# condenser_call_1_*.json). Edited only for length.
-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.
-    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"
-       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
-      popular and easy-to-use repositories on GitHub. Please identify the 10 most-starred
-      repositories listed under the GitHub topic <em>"retrieval-augmented-generation"</em>.
-      For each repository, please provide its name, a direct link to its GitHub page, and
-      indicate whether its README explicitly states that it can be installed using a single
-      <code>pip install &lt;package-name&gt;</code> command (without additional steps). If it
-      does, please also provide a link to its PyPI page; if not, explicitly note that this
-      installation method isn't mentioned.
-    </blockquote>
-  </div>
-
-  <!-- Phase 1 -->
-  <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;
-      22 visits + 2 searches &nbsp;·&nbsp;
-      context grew to <strong>80,824 tokens</strong> / 122 messages
-    </div>
-
-    <div class="wt-turn">
-      <div class="wt-turn-label">Sample · round 1</div>
-      <div class="wt-step">
-        <span class="wt-step-tag">🧠 Think</span>
-        <div class="wt-step-body">
-          "We need to produce a list of the 10 most-starred repositories under GitHub topic
-          'retrieval-augmented-generation' &hellip; standard web search may not know about
-          topics; let's try several queries and see what sticks."
-        </div>
-      </div>
-      <div class="wt-step">
-        <span class="wt-step-tag">🔧 Tool</span>
-        <pre>search([
-  "retrieval-augmented-generation github topic",
-  "GitHub topic 'retrieval-augmented-generation' popular repos",
-  "retrieval augmented generation github repositories star count",
-  "retrieval-augmented-generation python library"
-])</pre>
-      </div>
-      <div class="wt-step">
-        <span class="wt-step-tag">📥 Result</span>
-        <div class="wt-step-body">
-          10 hits including the topic page itself
-          <code>github.com/topics/retrieval-augmented-generation</code> — the agent now
-          has a starting URL to visit and crawl.
-        </div>
-      </div>
-    </div>
-
-    <div class="wt-ellipsis">⋮ 61 more think → tool turns: visit the topic page, then each candidate repo, fetch READMEs, check PyPI metadata one repo at a time.</div>
-  </div>
-
-  <!-- Context Management -->
-  <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>
-    <details>
-      <summary>example trusted fact (1 of 11)</summary>
-      <pre>{
-  "id": "T1",
-  "claim": "Langchain-Chatchat README includes a pip install line:
-            'pip install langchain-chatchat -U'.",
-  "sources": [
-    "https://github.com/chatchat-space/Langchain-Chatchat",
-    "https://pypi.org/project/langchain-chatchat/"
-  ],
-  "reason": "README's Installation section shows the pip command;
-             PyPI confirms the package."
-}</pre>
-    </details>
-    <div class="wt-effect">
-      → history reset to <code>[system, question, state_summary]</code>
-      &nbsp;·&nbsp; <strong>122 messages → 2</strong>
-      &nbsp;·&nbsp; ~80k tokens of headroom reclaimed.
-    </div>
-  </div>
-
-  <!-- Phase 2 -->
-  <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
-      (PageIndex's pip availability), re-visits the missing PyPI page to settle it,
-      and then synthesizes the final markdown table from the 11 trusted facts.
-    </div>
-  </div>
-
-  <!-- Answer -->
-  <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">
-    <table class="wt-table">
-      <thead>
-        <tr><th>Repository</th><th>One-line <code>pip install</code>?</th><th>PyPI</th></tr>
-      </thead>
-      <tbody>
-        <tr><td><a href="https://github.com/chatchat-space/Langchain-Chatchat" target="_blank" rel="noopener">chatchat-space/Langchain-Chatchat</a></td><td>✅ <code>pip install langchain-chatchat -U</code></td><td><a href="https://pypi.org/project/langchain-chatchat/" target="_blank" rel="noopener">langchain-chatchat</a></td></tr>
-        <tr><td><a href="https://github.com/HKUDS/LightRAG" target="_blank" rel="noopener">HKUDS/LightRAG</a></td><td>✅ <code>pip install lightrag-hku</code></td><td><a href="https://pypi.org/project/lightrag-hku/" target="_blank" rel="noopener">lightrag-hku</a></td></tr>
-        <tr><td><a href="https://github.com/stanford-oval/storm" target="_blank" rel="noopener">stanford-oval/storm</a></td><td>✅ <code>pip install knowledge-storm</code></td><td><a href="https://pypi.org/project/knowledge-storm/" target="_blank" rel="noopener">knowledge-storm</a></td></tr>
-        <tr><td><a href="https://github.com/deepset-ai/haystack" target="_blank" rel="noopener">deepset-ai/haystack</a></td><td>✅ <code>pip install haystack-ai</code></td><td><a href="https://pypi.org/project/haystack-ai/" target="_blank" rel="noopener">haystack-ai</a></td></tr>
-        <tr><td><a href="https://github.com/HKUDS/RAG-Anything" target="_blank" rel="noopener">HKUDS/RAG-Anything</a></td><td>✅ <code>pip install raganything</code></td><td><a href="https://pypi.org/project/raganything/" target="_blank" rel="noopener">raganything</a></td></tr>
-        <tr><td><a href="https://github.com/memvid/memvid" target="_blank" rel="noopener">memvid/memvid</a></td><td>✅ <code>pip install memvid-sdk</code></td><td><a href="https://pypi.org/project/memvid-sdk/" target="_blank" rel="noopener">memvid-sdk</a></td></tr>
-        <tr><td><a href="https://github.com/llmware-ai/llmware" target="_blank" rel="noopener">llmware-ai/llmware</a></td><td>✅ <code>pip3 install llmware</code></td><td><a href="https://pypi.org/project/llmware/" target="_blank" rel="noopener">llmware</a></td></tr>
-        <tr><td><a href="https://github.com/VectifyAI/PageIndex" target="_blank" rel="noopener">VectifyAI/PageIndex</a></td><td>❌ not mentioned (README uses <code>pip install -r requirements.txt</code>)</td><td>—</td></tr>
-        <tr><td><a href="https://github.com/pathwaycom/llm-app" target="_blank" rel="noopener">pathwaycom/llm-app</a></td><td>❌ not mentioned (Docker / poetry / templates)</td><td>—</td></tr>
-        <tr><td><a href="https://github.com/NirDiamant/RAG_Techniques" target="_blank" rel="noopener">NirDiamant/RAG_Techniques</a></td><td>❌ not mentioned (clone + run notebooks)</td><td>—</td></tr>
-      </tbody>
-    </table>
-    </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>
-"""
-
 
 def _example_label(ex: Dict[str, str]) -> str:
     return f"{ex['icon']}  {ex['category']} — {ex['text']}"
@@ -2957,15 +2501,6 @@ with gr.Blocks(
                         for ex in EXAMPLES
                     ]
 
-            # Walkthrough: curated trace from one real Mind2Web 2 run.
-            # Sits between Try examples and Output; collapsed by default.
-            with gr.Accordion(
-                label="A real Mind2Web2 research run",
-                open=False,
-                elem_classes="walkthrough-acc",
-            ):
-                gr.HTML(WALKTHROUGH_HTML)
-
             with gr.Group(elem_classes="section-card"):
                 gr.HTML(
                     '<div class="section-heading section-heading-row">'