ui: add "See it in action" walkthrough (real M2W2 trace, collapsed by default)

A folded gr.Accordion below the demo, no impact on the default page.
When expanded, walks through one real Mind2Web 2 task that QUEST-35B
ran end-to-end, showcasing the five stages of a research run:

Question -> think+tool x N -> context management -> think+tool x N -> answer

All numbers (62 turns, 80,824 tokens, 11 trusted facts, 122->2 message
compression) and the example trusted fact come verbatim from the source
trajectories.jsonl + condenser_call_1_*.json in zilus inference dump.

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

app.py

@@ -1121,6 +1121,151 @@ gradio-app > div {
   text-transform: none;
   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); }
+.walkthrough .wt-intro { color: var(--q-muted); margin: 0 0 14px; line-height: 1.55; }
+.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;
@@ -2448,6 +2593,139 @@ 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.
+    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.
+  </p>
+
+  <!-- Question -->
+  <div class="wt-block wt-question">
+    <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">
+    <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">
+    <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">
+    <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">
+    <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>
+"""
+
+
 def _example_label(ex: Dict[str, str]) -> str:
     return f"{ex['icon']}  {ex['category']} — {ex['text']}"
 
@@ -2588,6 +2866,13 @@ with gr.Blocks(
                     elem_id="quest-temperature",
                 )
 
+    # ── Walkthrough: curated trace from one real Mind2Web 2 run ────────────
+    with gr.Accordion(
+        label="See it in action — a real Mind2Web 2 research run",
+        open=False,
+    ):
+        gr.HTML(WALKTHROUGH_HTML)
+
     gr.HTML(
         """
 <footer class="quest-footer">