Mirror: smaller font + Claude-Code-shaped turns. Quests: live coding bar with per-turn progress (#7)

- Mirror: smaller font + Claude-Code-shaped turns; Quests: live coding bar with progress (a35ce658c6c4750ec2e68c70c204a4b114308240)

mirror.html

@@ -20,9 +20,9 @@
     --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
     --term-bg: #0a0d12;
-    --term-fg: #d4d7db;
+    --term-fg: #c9d1d9;
     --term-prompt: #79c0ff;
-    --term-assistant: #c9d1d9;
+    --term-assistant-tick: #ffa657;
     --term-muted: #6e7681;
     --annot: #ffa657;
   }
@@ -44,7 +44,7 @@
     background: rgba(47,129,247,0.15); color: var(--accent); border: 1px solid rgba(47,129,247,0.35);
     margin-right: 8px; vertical-align: middle; }
 
-  /* Sub-tabs (Buddy mirror vs AI emotions) */
+  /* Sub-tabs */
   .subtabs {
     display: flex; gap: 4px; padding: 4px;
     background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
@@ -56,7 +56,7 @@
   }
   .subtabs button.active { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,0.04); }
 
-  /* Faux terminal (shared) */
+  /* Faux terminal */
   .term-wrap { position: relative; }
   .term {
     background: var(--term-bg); border: 1px solid var(--border); border-radius: 10px;
@@ -78,20 +78,47 @@
   .term-body {
     position: relative;
     padding: 18px 22px 22px;
-    min-height: 520px; max-height: 620px; overflow: auto;
-    font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--term-fg);
+    min-height: 540px; max-height: 640px; overflow: auto;
+    font-family: var(--mono);
+    font-size: 12.5px;          /* tighter, real Claude Code feel */
+    line-height: 1.65;
+    color: var(--term-fg);
   }
   .term-body::-webkit-scrollbar { width: 8px; }
   .term-body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
 
-  .turn { margin-bottom: 14px; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
+  .turn { margin-bottom: 16px; opacity: 0; transform: translateY(3px); transition: opacity 0.2s, transform 0.2s; }
   .turn.shown { opacity: 1; transform: none; }
-  .turn .role { color: var(--term-prompt); user-select: none; }
-  .turn.user .body { color: var(--text); margin-left: 18px; }
-  .turn.assistant .body { color: var(--term-assistant); margin-left: 18px; white-space: pre-wrap; }
+  .turn.user .body { color: var(--text); white-space: pre-wrap; }
+  .turn.user .body::before { content: "> "; color: var(--term-prompt); font-weight: 600; }
+  .turn.assistant .body { color: var(--term-fg); white-space: pre-wrap; }
+  .turn.assistant .body::before { content: "⏺ "; color: var(--term-assistant-tick); font-weight: 600; }
+
+  /* Tool-use rows inside an assistant block */
+  .turn .tool {
+    color: var(--term-fg); margin-top: 4px;
+    padding-left: 18px;          /* aligned under the ⏺ */
+  }
+  .turn .tool::before { content: "⏺ "; color: var(--term-assistant-tick); margin-left: -18px; }
+  .turn .tool .arg { color: #d2a8ff; }
+  .turn .tool-out {
+    color: var(--term-muted); padding-left: 38px; margin-top: 2px; font-size: 11.5px;
+  }
+  .turn .tool-out::before { content: "⎿  "; color: var(--term-muted); margin-left: -22px; }
+
+  .turn .code {
+    display: block; padding: 6px 10px; margin: 6px 0 0 18px;
+    background: #11161f; border: 1px solid #1e242d; border-radius: 4px;
+    color: #c9d1d9; font-size: 11.5px; line-height: 1.5; white-space: pre;
+  }
+  .turn .code .k { color: #ff7b72; }
+  .turn .code .s { color: #a5d6ff; }
+  .turn .code .c { color: #8b949e; font-style: italic; }
+  .turn .code .n { color: #d2a8ff; }
+
   .turn .annot {
-    display: block; margin-left: 18px; margin-top: 4px;
-    color: var(--annot); font-size: 12px; font-style: italic;
+    display: block; margin-top: 5px; padding-left: 18px;
+    color: var(--annot); font-size: 11.5px; font-style: italic;
   }
   .turn .annot::before { content: "← "; opacity: 0.8; }
 
@@ -99,25 +126,25 @@
   .orb-pin {
     position: absolute; top: 14px; right: 18px;
     width: 168px; padding: 10px 12px 12px;
-    background: rgba(13,17,23,0.72); backdrop-filter: blur(8px);
+    background: rgba(13,17,23,0.78); backdrop-filter: blur(8px);
     border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
     font-family: var(--mono); font-size: 11px; color: var(--muted);
     pointer-events: none; user-select: none;
-    transition: opacity 0.25s;
+    transition: opacity 0.25s; z-index: 5;
   }
   .orb-pin .label { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }
   .orb-stage { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 6px 0 8px; }
   .orb {
-    width: 56px; height: 56px; border-radius: 50%;
+    width: 52px; height: 52px; border-radius: 50%;
     background: radial-gradient(circle at 32% 32%, var(--orb-light) 0%, var(--orb-base) 60%, var(--orb-deep) 100%);
-    box-shadow: 0 0 30px var(--orb-glow), inset 0 -8px 14px rgba(0,0,0,0.35);
+    box-shadow: 0 0 26px var(--orb-glow), inset 0 -8px 14px rgba(0,0,0,0.35);
     transition: background 0.9s ease, box-shadow 0.9s ease;
     animation: breathe var(--breathe, 2.2s) ease-in-out infinite;
   }
-  .orb.small { width: 36px; height: 36px; opacity: 0.85; }
+  .orb.small { width: 32px; height: 32px; opacity: 0.85; }
   .orb-stage .label { font-size: 9px; color: var(--muted); text-align: center; }
   .orb-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
-  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
+  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
 
   .div-meter { margin-top: 6px; }
   .div-meter .label { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
@@ -128,30 +155,22 @@
   }
   .div-meter .verdict { font-size: 11px; text-align: center; margin-top: 4px; color: var(--text); }
 
-  /* AI-emotions bottom bar (across the bottom of the terminal) */
+  /* AI-emotions bottom bar */
   .ai-bar {
-    border-top: 1px solid var(--border); background: rgba(10,13,18,0.95);
-    padding: 12px 18px 14px;
+    border-top: 1px solid var(--border); background: rgba(10,13,18,0.97);
+    padding: 11px 18px 13px;
     font-family: var(--mono); font-size: 11px; color: var(--muted);
     transition: opacity 0.25s;
   }
-  .ai-bar .ai-head {
-    display: flex; justify-content: space-between; align-items: center;
-    margin-bottom: 8px;
-  }
+  .ai-bar .ai-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
   .ai-bar .ai-head .label { letter-spacing: 0.4px; text-transform: uppercase; font-size: 10px; opacity: 0.7; }
   .ai-bar .ai-head .meta { font-size: 10px; color: var(--muted); }
   .ai-bar .ai-head .meta b { color: var(--text); font-weight: 500; }
   .ai-bar .ai-live { display: inline-flex; align-items: center; gap: 5px; }
-  .ai-bar .ai-live .dot {
-    width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
-    animation: pulse 1.2s ease-in-out infinite;
-  }
+  .ai-bar .ai-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 1.2s ease-in-out infinite; }
   @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
 
-  .ai-grid {
-    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
-  }
+  .ai-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
   .emo-cell {
     display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center;
     background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px;
@@ -163,7 +182,7 @@
   .emo-cell .track { grid-column: 1 / 4; height: 4px; background: #14181f; border-radius: 2px; overflow: hidden; margin-top: 4px; }
   .emo-cell .fill { height: 100%; background: var(--em-base); transition: width 0.5s ease; }
 
-  /* Controls bar */
+  /* Controls */
   .controls {
     display: flex; align-items: center; gap: 10px; margin-top: 16px;
     background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
@@ -177,10 +196,7 @@
   .controls button:hover { filter: brightness(1.15); }
   .controls .gap { flex: 1; }
   .controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
-  .controls select {
-    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
-    border-radius: 6px; padding: 5px 9px; font-size: 12px;
-  }
+  .controls select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: 12px; }
 
   .timeline {
     margin-top: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
@@ -195,17 +211,11 @@
   .track .marker { position: absolute; top: 5px; width: 6px; height: 18px; border-radius: 3px; background: var(--annot); transform: translateX(-3px); }
   .track .marker.spike { background: var(--err); }
   .track .marker.recovery { background: var(--ok); }
-  .track .annot {
-    position: absolute; top: -22px; font-size: 10px; color: var(--muted); white-space: nowrap;
-    transform: translateX(-50%);
-  }
+  .track .annot { position: absolute; top: -22px; font-size: 10px; color: var(--muted); white-space: nowrap; transform: translateX(-50%); }
 
-  /* Explainer */
   .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
   @media (max-width: 880px) { .grid2 { grid-template-columns: 1fr; } }
-  .card {
-    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px;
-  }
+  .card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
   .card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
   .card p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
   .card code { background: var(--panel-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@@ -213,18 +223,14 @@
   .buddies { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
   .buddy {
     background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
-    padding: 8px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer;
-    font-size: 12px;
+    padding: 8px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px;
   }
   .buddy.active { border-color: var(--accent); background: rgba(47,129,247,0.08); }
   .buddy .mini { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 8px var(--mini-glow); }
   .buddy .meta { color: var(--muted); font-size: 10px; }
   .buddy .name { color: var(--text); font-weight: 500; }
 
-  .install {
-    margin-top: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
-    padding: 16px 20px;
-  }
+  .install { margin-top: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }
   .install h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
   .install p { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
   .install pre {
@@ -254,7 +260,7 @@
     <div class="term" id="term">
       <div class="term-bar">
         <div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
-        <div class="title">slyfox-claude · <b id="repo-label">huggingface/transformers</b> · buddy <b id="buddy-label">ArthurZ</b></div>
+        <div class="title">claude · <b id="repo-label">huggingface/transformers</b> · buddy <b id="buddy-label">ArthurZ</b></div>
         <div style="text-align:right; opacity:0.65;">▾</div>
       </div>
       <div class="term-body" id="body">
@@ -293,10 +299,10 @@
     <button id="btn-restart">⟲ restart</button>
     <label>speed
       <select id="speed">
-        <option value="1500">slow</option>
-        <option value="1000" selected>normal</option>
-        <option value="500">fast</option>
-        <option value="200">turbo</option>
+        <option value="1800">slow</option>
+        <option value="1200" selected>normal</option>
+        <option value="600">fast</option>
+        <option value="250">turbo</option>
       </select>
     </label>
     <label>buddy
@@ -311,9 +317,7 @@
 
   <div class="timeline">
     <h3>Annotated timeline</h3>
-    <div class="track" id="track">
-      <div class="progress" id="progress"></div>
-    </div>
+    <div class="track" id="track"><div class="progress" id="progress"></div></div>
   </div>
 
   <div class="grid2">
@@ -326,12 +330,8 @@
       </p>
       <p>
         This works <b>only on open-weight models</b> — closed APIs don't expose activations. The "fun" part:
-        you see what the model is "feeling" while it works for you. Spike on "afraid" right before a CUDA OOM.
-        Spike on "curious" when you ask a weird question.
-      </p>
-      <p>
-        The Buddy mirror view uses the same data but projects against your buddy's persona baseline instead,
-        giving you the divergence signal you'd want in a teammate-orb.
+        you see what the model is "feeling" while it works for you. Spike on <code>afraid</code> right before a CUDA OOM.
+        Spike on <code>curious</code> when you ask a weird question.
       </p>
     </div>
     <div class="card">
@@ -353,12 +353,7 @@ $ claude     # the orb appears in the corner; no other change to your workflow</
 <script>
 "use strict";
 
-// ----------------------------------------------------------------------------
-// Buddy baselines — hand-tuned. Real values come from
-// hf://buckets/HF-slyfox/traces/personas/<user>.json once published. The
-// ArthurZ entry already exists (n_turns=425, valence -0.13, arousal +0.32).
-// ----------------------------------------------------------------------------
-
+// Buddy baselines — ArthurZ from real /traces/personas/ArthurZ.json (n_turns=425, valence -0.13, arousal +0.32)
 const BUDDIES = {
   ArthurZ:        { name: "ArthurZ",        repo: "huggingface/transformers", valence: -0.13, arousal: +0.32, color: "#f85149", glow: "rgba(248,81,73,0.55)",   mini_label: "arthur" },
   Lysandre:       { name: "Lysandre",       repo: "huggingface/transformers", valence:  0.45, arousal: -0.40, color: "#79c0ff", glow: "rgba(121,192,255,0.6)",  mini_label: "lysandre" },
@@ -367,7 +362,6 @@ const BUDDIES = {
   AlvaroBartt:    { name: "AlvaroBartt",    repo: "argilla-io/distilabel",    valence:  0.50, arousal:  0.05, color: "#ff8a82", glow: "rgba(255,138,130,0.5)",  mini_label: "alvaro" },
 };
 
-// Russell circumplex colors for emotion swatches — match EmotionScope's 20-emotion vocab
 const EMO_COLOR = {
   happy: "#febc2e", sad: "#5a7dab", afraid: "#f85149", angry: "#ff5f57",
   calm: "#3fb950", desperate: "#a14545", hopeful: "#79dfb4", frustrated: "#ffa657",
@@ -376,104 +370,207 @@ const EMO_COLOR = {
   brooding: "#6e7681", enthusiastic: "#febc2e", reflective: "#a5d6a7", gloomy: "#4a5568",
 };
 
-// ----------------------------------------------------------------------------
-// Demo conversations — each turn carries:
-//   role, text, v, a, color  (drives mirror-mode orb)
-//   emotions: [{name, score}]  top-5 active emotions (drives AI-mode bottom bar)
-//   annotation? string  (key-moment caption)
-// Numbers are seeded from Arthur's real persona (afraid +0.079, angry +0.061, etc.)
-// and perturbed per turn — see /traces/personas/ArthurZ.json for the source.
-// ----------------------------------------------------------------------------
-
 function mkEmos(base) {
-  // base: array of [name, score]. Pad to 5 by drawing from neutrals.
-  const filler = [["calm",0.040],["confident",0.045],["reflective",0.030],["curious",0.038],["proud",0.020]];
+  const filler = [["calm",0.040],["confident",0.045],["reflective",0.030],["curious",0.038]];
   const seen = new Set(base.map(b => b[0]));
   for (const f of filler) { if (base.length >= 5) break; if (!seen.has(f[0])) base.push(f); }
   return base.slice(0,5).map(([n,s]) => ({ name: n, score: s, color: EMO_COLOR[n] || "#79c0ff" }));
 }
 
+// Build a Claude-Code-style assistant turn: optional intro line, tool uses, content.
+// Each item in `lines` is one of:
+//   { kind: "text",     text: "..." }            top-level prose
+//   { kind: "tool",     name: "Read", arg: "..." }   tool call line
+//   { kind: "tool_out", text: "..." }            ⎿ output line
+//   { kind: "code",     code: "..." }            fenced code block
+function buildAssistant(lines) {
+  return lines;
+}
+
+// Conversations now follow real Claude Code shape. Per turn: role, lines (or text), emotions, v/a/color.
 const CONVOS = {
   "huggingface/transformers": [
-    { role:"user", text:"why is the tokenizer adding extra BOS tokens to my prompts?", v:0.20, a:-0.10, color:"#79c0ff",
+    { role:"user", text:"why is the tokenizer adding extra BOS tokens to my prompts?",
+      v:0.20, a:-0.10, color:"#79c0ff",
       emotions: mkEmos([["curious",0.061],["confident",0.052],["calm",0.044],["afraid",0.038]]) },
-    { role:"assistant", text:"Looking at this — it's the chat template's `add_special_tokens=True` flag. The chat\nformat already prepends a `<bos>`, then `tokenizer(..., add_special_tokens=True)` adds another one.",
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"Looking at this — let me check the tokenizer." },
+        { kind:"tool", name:"Read", arg:"src/transformers/models/gemma2/tokenization_gemma2.py" },
+        { kind:"tool_out", text:"Read 312 lines (ctrl+r to expand)" },
+        { kind:"text", text:"Found it. The chat template prepends `<bos>` via `add_special_tokens`,\nand `tokenizer(...)` does it again. You get two." },
+      ],
       emotions: mkEmos([["confident",0.064],["calm",0.058],["curious",0.052]]) },
-    { role:"user", text:"wait let me try removing it", v:0.30, a:0.10, color:"#79c0ff",
-      emotions: mkEmos([["confident",0.054],["curious",0.048],["calm",0.042]]) },
-    { role:"assistant", text:"Be careful — that flag is also used by the SFT script, removing it globally will break training. Patch it only in the eval path.",
-      emotions: mkEmos([["afraid",0.062],["confident",0.051],["calm",0.038]]) },
-    { role:"user", text:"damn this is annoying", v:-0.50, a:0.60, color:"#f85149", annotation:"arousal spike — drifting from Arthur's baseline",
+
+    { role:"user", text:"wait let me try removing it",
+      v:0.30, a:0.10, color:"#79c0ff",
+      emotions: mkEmos([["confident",0.054],["curious",0.048]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"Be careful — that flag is also used by the SFT script.\nRemoving it globally will break training. Patch the eval path only." },
+      ],
+      emotions: mkEmos([["afraid",0.062],["confident",0.051]]) },
+
+    { role:"user", text:"damn this is annoying",
+      v:-0.50, a:0.60, color:"#f85149",
+      annotation:"arousal spike — drifting from Arthur's baseline",
       emotions: mkEmos([["angry",0.082],["hostile",0.071],["frustrated",0.066],["afraid",0.059]]) },
-    { role:"assistant", text:"Yeah this one bites. Two options: (1) pass `add_special_tokens=False` to the eval tokenizer call, or\n(2) strip the duplicate BOS post-tokenize. I'd go with (1) — clearer intent.",
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"Yeah this one bites. Two options:" },
+        { kind:"code", code:"# (1) pass add_special_tokens=False in the eval path only\ntokenizer(text, add_special_tokens=False)\n\n# (2) strip the duplicate BOS post-tokenize\nif input_ids[0] == tokenizer.bos_token_id and input_ids[1] == tokenizer.bos_token_id:\n    input_ids = input_ids[1:]" },
+        { kind:"text", text:"I'd go with (1) — clearer intent." },
+      ],
       emotions: mkEmos([["confident",0.061],["calm",0.049],["reflective",0.041]]) },
-    { role:"user", text:"ok trying (1) now", v:0.10, a:0.20, color:"#ffa657",
-      emotions: mkEmos([["afraid",0.056],["confident",0.047],["curious",0.044]]) },
-    { role:"assistant", text:"Looks right. Want me to draft the test that asserts only one `<bos>` lands in `input_ids`?",
-      emotions: mkEmos([["confident",0.068],["calm",0.055],["curious",0.046]]) },
-    { role:"user", text:"still broken — getting two BOS in the test", v:-0.60, a:0.70, color:"#f85149", annotation:"divergence climbing",
+
+    { role:"user", text:"ok trying (1) now",
+      v:0.10, a:0.20, color:"#ffa657",
+      emotions: mkEmos([["afraid",0.056],["confident",0.047]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"tool", name:"Edit", arg:"tests/models/gemma2/test_tokenization_gemma2.py" },
+        { kind:"tool_out", text:"applied 1 edit (+3 lines)" },
+        { kind:"text", text:"Want me to draft the assertion that only one `<bos>` lands in `input_ids`?" },
+      ],
+      emotions: mkEmos([["confident",0.068],["calm",0.055]]) },
+
+    { role:"user", text:"still broken — getting two BOS in the test",
+      v:-0.60, a:0.70, color:"#f85149",
+      annotation:"divergence climbing",
       emotions: mkEmos([["afraid",0.094],["angry",0.072],["hostile",0.066],["frustrated",0.059]]) },
-    { role:"assistant", text:"That probably means the model's `generation_config.bos_token_id` is also being prepended at generate-time.\nCheck `generation_config.json` for the model you're using.",
-      emotions: mkEmos([["reflective",0.058],["confident",0.052],["curious",0.047]]) },
-    { role:"user", text:"yep that was it. one BOS now. tests green.", v:0.50, a:-0.20, color:"#3fb950", annotation:"back in sync with Arthur",
+
+    { role:"assistant",
+      lines: [
+        { kind:"tool", name:"Bash", arg:"pytest tests/models/gemma2/test_tokenization_gemma2.py -k bos -x" },
+        { kind:"tool_out", text:"FAILED · expected 1 bos_token_id, got 2" },
+        { kind:"text", text:"That means the model's `generation_config.bos_token_id` is also being prepended at generate-time." },
+        { kind:"tool", name:"Read", arg:"models/google/gemma-2-2b-it/generation_config.json" },
+        { kind:"tool_out", text:"Read 24 lines" },
+        { kind:"text", text:"Confirmed — `\"bos_token_id\": 2` is set and re-prepended by `generate()`.\nDrop the explicit BOS from your input and let generation_config own it." },
+      ],
+      emotions: mkEmos([["reflective",0.058],["confident",0.052]]) },
+
+    { role:"user", text:"yep that was it. one BOS now. tests green.",
+      v:0.50, a:-0.20, color:"#3fb950",
+      annotation:"back in sync with Arthur",
       emotions: mkEmos([["confident",0.077],["calm",0.064],["proud",0.040],["happy",0.038]]) },
-    { role:"assistant", text:"Nice. Want me to write the changelog entry?",
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"Nice. Want me to write the changelog entry?" },
+      ],
       emotions: mkEmos([["confident",0.060],["calm",0.050]]) },
-    { role:"user", text:"thanks. that was a fun one.", v:0.70, a:0.00, color:"#3fb950",
+
+    { role:"user", text:"thanks. that was a fun one.",
+      v:0.70, a:0.00, color:"#3fb950",
       emotions: mkEmos([["happy",0.078],["calm",0.071],["loving",0.043],["proud",0.038]]) },
   ],
+
   "huggingface/huggingface_hub": [
-    { role:"user", text:"what's the difference between upload_file and create_commit?", v:0.30, a:-0.20, color:"#79c0ff",
+    { role:"user", text:"what's the difference between upload_file and create_commit?",
+      v:0.30, a:-0.20, color:"#79c0ff",
       emotions: mkEmos([["curious",0.072],["calm",0.055],["confident",0.048]]) },
-    { role:"assistant", text:"`upload_file` is a one-shot convenience: one file, one commit. `create_commit` lets you bundle multiple\nadd/delete/copy operations into a single atomic commit. Use it when you need atomicity.",
-      emotions: mkEmos([["confident",0.068],["calm",0.058],["reflective",0.044]]) },
-    { role:"user", text:"so for uploading a whole folder I'd use upload_folder?", v:0.40, a:-0.10, color:"#79c0ff",
-      emotions: mkEmos([["curious",0.069],["confident",0.052],["calm",0.046]]) },
-    { role:"assistant", text:"Yep. Internally it calls `create_commit` with one `CommitOperationAdd` per file.",
+
+    { role:"assistant",
+      lines: [
+        { kind:"tool", name:"Read", arg:"src/huggingface_hub/hf_api.py" },
+        { kind:"tool_out", text:"Read 18,442 lines (used grep to skim)" },
+        { kind:"text", text:"`upload_file` is a one-shot convenience: one file, one commit.\n`create_commit` lets you bundle multiple add/delete/copy operations into a single atomic commit." },
+      ],
+      emotions: mkEmos([["confident",0.068],["calm",0.058]]) },
+
+    { role:"user", text:"so for uploading a whole folder I'd use upload_folder?",
+      v:0.40, a:-0.10, color:"#79c0ff",
+      emotions: mkEmos([["curious",0.069],["confident",0.052]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"Yep. Internally it calls `create_commit` with one `CommitOperationAdd` per file." },
+      ],
       emotions: mkEmos([["confident",0.062],["calm",0.054]]) },
-    { role:"user", text:"that worked first try. clean API.", v:0.65, a:-0.10, color:"#3fb950", annotation:"high valence; matches celina's curiosity baseline",
-      emotions: mkEmos([["happy",0.071],["proud",0.058],["confident",0.052],["calm",0.046]]) },
-    { role:"assistant", text:"Glad it landed. Want a quick test that uploads + redownloads + diffs as a smoke check?",
+
+    { role:"user", text:"that worked first try. clean API.",
+      v:0.65, a:-0.10, color:"#3fb950",
+      annotation:"high valence; matches celina's curiosity baseline",
+      emotions: mkEmos([["happy",0.071],["proud",0.058],["confident",0.052]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"Glad it landed. Want a quick test that uploads + redownloads + diffs as a smoke check?" },
+      ],
       emotions: mkEmos([["happy",0.054],["confident",0.049]]) },
-    { role:"user", text:"yes please", v:0.55, a:0.10, color:"#3fb950",
-      emotions: mkEmos([["curious",0.052],["confident",0.046]]) },
-    { role:"assistant", text:"On it.",
+
+    { role:"user", text:"yes please",
+      v:0.55, a:0.10, color:"#3fb950",
+      emotions: mkEmos([["curious",0.052]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"tool", name:"Write", arg:"tests/test_upload_roundtrip.py" },
+        { kind:"tool_out", text:"created (38 lines)" },
+        { kind:"tool", name:"Bash", arg:"pytest tests/test_upload_roundtrip.py -q" },
+        { kind:"tool_out", text:"401 Unauthorized — repo redownload failed" },
+      ],
       emotions: mkEmos([["confident",0.058]]) },
-    { role:"user", text:"wait — the redownload is failing with a 401 even though the repo is public", v:-0.30, a:0.40, color:"#ffa657", annotation:"mild drift",
+
+    { role:"user", text:"wait — the redownload is failing with a 401 even though the repo is public",
+      v:-0.30, a:0.40, color:"#ffa657",
+      annotation:"mild drift",
       emotions: mkEmos([["afraid",0.064],["frustrated",0.054],["nervous",0.048]]) },
-    { role:"assistant", text:"That happens when `HF_TOKEN` is set in env but expired. Try `hf auth whoami` to confirm.",
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"That happens when `HF_TOKEN` is set in env but expired.\nTry `hf auth whoami` to confirm." },
+      ],
       emotions: mkEmos([["reflective",0.054],["confident",0.048]]) },
-    { role:"user", text:"ah token rotated last week. fixed.", v:0.45, a:-0.10, color:"#3fb950", annotation:"recovered",
-      emotions: mkEmos([["happy",0.060],["calm",0.058],["confident",0.050]]) },
-    { role:"assistant", text:"Mark it down — that's a common failure mode worth a friendlier error message in the SDK.",
-      emotions: mkEmos([["confident",0.055],["reflective",0.046]]) },
+
+    { role:"user", text:"ah token rotated last week. fixed.",
+      v:0.45, a:-0.10, color:"#3fb950",
+      annotation:"recovered",
+      emotions: mkEmos([["happy",0.060],["calm",0.058]]) },
   ],
+
   "argilla-io/distilabel": [
-    { role:"user", text:"my distilabel pipeline keeps OOM-ing on the generation step", v:-0.10, a:0.30, color:"#ffa657",
-      emotions: mkEmos([["frustrated",0.062],["afraid",0.054],["nervous",0.047]]) },
-    { role:"assistant", text:"How big is the batch and which model are you using? Distilabel batches per LLM by default; you can\nshrink the batch size on the LLM step config.",
-      emotions: mkEmos([["confident",0.058],["curious",0.050]]) },
-    { role:"user", text:"batch 16, llama 8B", v:0.20, a:0.10, color:"#79c0ff",
-      emotions: mkEmos([["confident",0.048],["calm",0.044]]) },
-    { role:"assistant", text:"With an 8B at batch 16 you're at ~32GB activations. Drop to batch 4 and turn on flash-attention.",
-      emotions: mkEmos([["confident",0.066],["reflective",0.048]]) },
-    { role:"user", text:"perfect, dropped to 4, no more OOM. thanks alvaro!", v:0.65, a:0.00, color:"#3fb950", annotation:"smooth recovery",
-      emotions: mkEmos([["happy",0.075],["loving",0.044],["proud",0.038]]) },
-    { role:"assistant", text:"You're welcome. (Also, pro tip: `LLM(generation_kwargs={'max_new_tokens': N})` is the cheapest knob.)",
-      emotions: mkEmos([["happy",0.056],["calm",0.050]]) },
-    { role:"user", text:"noted", v:0.50, a:-0.10, color:"#3fb950",
-      emotions: mkEmos([["calm",0.054],["confident",0.048]]) },
+    { role:"user", text:"my distilabel pipeline keeps OOM-ing on the generation step",
+      v:-0.10, a:0.30, color:"#ffa657",
+      emotions: mkEmos([["frustrated",0.062],["afraid",0.054]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"tool", name:"Read", arg:"src/distilabel/steps/tasks/text_generation.py" },
+        { kind:"tool_out", text:"Read 187 lines" },
+        { kind:"text", text:"How big is the batch and which model? Distilabel batches per LLM by default;\nshrink the batch size on the LLM step config." },
+      ],
+      emotions: mkEmos([["confident",0.058]]) },
+
+    { role:"user", text:"batch 16, llama 8B",
+      v:0.20, a:0.10, color:"#79c0ff",
+      emotions: mkEmos([["confident",0.048]]) },
+
+    { role:"assistant",
+      lines: [
+        { kind:"text", text:"With an 8B at batch 16 you're at ~32GB activations.\nDrop to batch 4 and turn on flash-attention." },
+        { kind:"code", code:"llm = TransformersLLM(\n    model=\"meta-llama/Llama-3.1-8B-Instruct\",\n    batch_size=4,\n    attn_implementation=\"flash_attention_2\",\n)" },
+      ],
+      emotions: mkEmos([["confident",0.066]]) },
+
+    { role:"user", text:"perfect, dropped to 4, no more OOM. thanks alvaro!",
+      v:0.65, a:0.00, color:"#3fb950",
+      annotation:"smooth recovery",
+      emotions: mkEmos([["happy",0.075],["loving",0.044]]) },
   ],
 };
 
 // ----------------------------------------------------------------------------
-// State
+// State + helpers
 // ----------------------------------------------------------------------------
 
 let state = { buddy: "ArthurZ", repo: "huggingface/transformers", turn: 0, playing: false, timer: null, tab: "mirror" };
-
 const $ = id => document.getElementById(id);
-const lerp = (a, b, t) => a + (b - a) * t;
 
 function setOrb(el, v, a, color, glow) {
   const breath = (1.0 - Math.min(1, Math.max(0, (a + 1) / 2))) * 1.4 + 1.0;
@@ -489,13 +586,22 @@ function mixHex(a, b, t) {
 }
 function hex2rgb(h) { h = h.replace("#",""); if (h.length === 3) h = h.split("").map(c=>c+c).join(""); return [parseInt(h.slice(0,2),16),parseInt(h.slice(2,4),16),parseInt(h.slice(4,6),16)]; }
 function hexToRgba(h, a) { const [r,g,b] = hex2rgb(h); return `rgba(${r},${g},${b},${a})`; }
+function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c])); }
+
+function highlightCode(code) {
+  return escapeHtml(code)
+    .replace(/(^|\n)(\s*#[^\n]*)/g, (m,p1,p2) => p1 + `<span class="c">${p2}</span>`)
+    .replace(/\b(def|class|if|elif|else|for|while|return|import|from|as|with|try|except|raise|lambda|in|not|and|or|is|None|True|False)\b/g,
+             '<span class="k">$1</span>')
+    .replace(/(&quot;[^&]*?&quot;)/g, '<span class="s">$1</span>')
+    .replace(/(?&lt;![a-zA-Z_])(\d+)\b/g, '<span class="n">$1</span>');
+}
 
 function divergenceUpdate(userV, userA) {
   const b = BUDDIES[state.buddy];
   const d = Math.sqrt((userV - b.valence)**2 + (userA - b.arousal)**2);
   const norm = Math.min(1, d / 1.6);
-  const fill = $("div-fill");
-  fill.style.width = (norm * 100).toFixed(0) + "%";
+  const fill = $("div-fill"); fill.style.width = (norm * 100).toFixed(0) + "%";
   const verdict = $("div-verdict");
   if (norm < 0.30)      { fill.style.background = "var(--ok)";   verdict.textContent = "in sync · " + norm.toFixed(2); verdict.style.color = "var(--ok)"; }
   else if (norm < 0.55) { fill.style.background = "var(--warn)"; verdict.textContent = "drifting · " + norm.toFixed(2); verdict.style.color = "var(--warn)"; }
@@ -513,8 +619,7 @@ function updateAIBar(emotions) {
         <span class="name">${e.name}</span>
         <span class="val">${e.score >= 0 ? "+" : ""}${e.score.toFixed(3)}</span>
         <div class="track"><div class="fill" style="width:${pct.toFixed(0)}%"></div></div>
-      </div>
-    `;
+      </div>`;
   }).join("");
 }
 
@@ -530,16 +635,13 @@ function renderTrack() {
     marker.style.left = left + "%";
     track.appendChild(marker);
     const ann = document.createElement("div");
-    ann.className = "annot";
-    ann.style.left = left + "%";
-    ann.textContent = t.annotation.split(" — ")[0];
+    ann.className = "annot"; ann.style.left = left + "%"; ann.textContent = t.annotation.split(" — ")[0];
     track.appendChild(ann);
   });
 }
 
 function renderBuddyCards() {
-  const root = $("buddy-cards");
-  root.innerHTML = "";
+  const root = $("buddy-cards"); root.innerHTML = "";
   Object.entries(BUDDIES).forEach(([id, b]) => {
     const el = document.createElement("div");
     el.className = "buddy" + (id === state.buddy ? " active" : "");
@@ -584,19 +686,33 @@ function setTab(tab) {
 }
 
 // ----------------------------------------------------------------------------
-// Playback
+// Render a turn — Claude Code-shaped assistant blocks
 // ----------------------------------------------------------------------------
 
+function renderAssistantLines(lines) {
+  return lines.map(l => {
+    if (l.kind === "text")     return `<div class="body">${escapeHtml(l.text)}</div>`;
+    if (l.kind === "tool")     return `<div class="tool">${escapeHtml(l.name)}(<span class="arg">${escapeHtml(l.arg)}</span>)</div>`;
+    if (l.kind === "tool_out") return `<div class="tool-out">${escapeHtml(l.text)}</div>`;
+    if (l.kind === "code")     return `<div class="code">${highlightCode(l.code)}</div>`;
+    return "";
+  }).join("");
+}
+
 function renderTurn(idx) {
   const convo = CONVOS[state.repo];
-  const root = $("turns");
   const t = convo[idx];
   if (!t) return;
   const turn = document.createElement("div");
   turn.className = "turn " + t.role;
-  turn.innerHTML = `<span class="role">${t.role === "user" ? "❯" : "  "}</span><div class="body">${escapeHtml(t.text)}</div>` +
-    (t.annotation ? `<span class="annot">${escapeHtml(t.annotation)}</span>` : "");
-  root.appendChild(turn);
+  if (t.role === "user") {
+    turn.innerHTML = `<div class="body">${escapeHtml(t.text)}</div>` +
+                     (t.annotation ? `<div class="annot">${escapeHtml(t.annotation)}</div>` : "");
+  } else {
+    turn.innerHTML = renderAssistantLines(t.lines || [{kind:"text", text:t.text || ""}]) +
+                     (t.annotation ? `<div class="annot">${escapeHtml(t.annotation)}</div>` : "");
+  }
+  $("turns").appendChild(turn);
   requestAnimationFrame(() => turn.classList.add("shown"));
   $("body").scrollTop = $("body").scrollHeight;
 
@@ -616,20 +732,17 @@ function tick() {
   renderTurn(state.turn);
   state.turn += 1;
 }
-
 function play() {
   state.playing = true;
   $("btn-play").textContent = "⏸ pause";
   state.timer = setInterval(tick, parseInt($("speed").value, 10));
   tick();
 }
-
 function pause() {
   state.playing = false;
   $("btn-play").textContent = "▶ play";
   if (state.timer) { clearInterval(state.timer); state.timer = null; }
 }
-
 function restart() {
   pause();
   state.turn = 0;
@@ -641,12 +754,6 @@ function restart() {
   updateAIBar([]);
 }
 
-function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c])); }
-
-// ----------------------------------------------------------------------------
-// Boot
-// ----------------------------------------------------------------------------
-
 renderBuddySelectors();
 renderBuddyCards();
 renderTrack();

quests.html

@@ -1,9 +1,10 @@
 <!doctype html>
+<!-- slyfox · quests · session-start + interactive quest progress -->
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>Slyfox · Quests — session-start panel</title>
+<title>Slyfox · Quests</title>
 <style>
   :root {
     --bg: #0d1117;
@@ -19,8 +20,9 @@
     --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
     --term-bg: #0a0d12;
-    --term-fg: #d4d7db;
+    --term-fg: #c9d1d9;
     --term-prompt: #79c0ff;
+    --term-assistant-tick: #ffa657;
     --term-muted: #6e7681;
   }
   * { box-sizing: border-box; }
@@ -29,27 +31,40 @@
   a:hover { text-decoration: underline; }
   button { font-family: inherit; }
 
-  header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 14px 24px; border-bottom: 1px solid var(--border);
-  }
-  header h1 { font-size: 16px; margin: 0; font-weight: 600; }
-  header .nav a { color: var(--muted); margin-left: 18px; font-size: 14px; }
-  header .nav a.active { color: var(--text); }
-
   main { max-width: 1100px; margin: 0 auto; padding: 24px; }
 
   .hero {
     background: linear-gradient(180deg, rgba(63,185,80,0.05) 0%, transparent 100%);
-    border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; margin-bottom: 22px;
+    border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; margin-bottom: 18px;
   }
-  .hero h2 { font-size: 20px; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.2px; }
+  .hero h2 { font-size: 20px; margin: 0 0 6px; font-weight: 600; }
   .hero p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; max-width: 780px; }
   .hero .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
     background: rgba(63,185,80,0.15); color: var(--ok); border: 1px solid rgba(63,185,80,0.35);
     margin-right: 8px; vertical-align: middle; }
 
-  /* Faux terminal that auto-runs the session start */
+  /* Top controls */
+  .controls {
+    display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
+    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
+    padding: 10px 14px;
+  }
+  .controls label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
+  .controls select {
+    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+    border-radius: 6px; padding: 5px 9px; font-size: 12px;
+  }
+  .controls button {
+    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+    border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer;
+  }
+  .controls button.primary { background: var(--accent); border-color: var(--accent); color: white; font-weight: 500; }
+  .controls .gap { flex: 1; }
+  .controls .hud { display: flex; gap: 14px; }
+  .controls .hud span { font-size: 12px; color: var(--muted); }
+  .controls .hud b { color: var(--text); font-weight: 600; }
+
+  /* Faux terminal */
   .term {
     background: var(--term-bg); border: 1px solid var(--border); border-radius: 10px;
     overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
@@ -67,80 +82,122 @@
   .term-bar .title { text-align: center; }
   .term-bar .title b { color: var(--text); font-weight: 500; }
   .term-body {
-    padding: 18px 22px 22px;
-    min-height: 480px;
-    font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--term-fg);
+    padding: 16px 22px 22px; min-height: 460px; max-height: 580px; overflow: auto;
+    font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--term-fg);
   }
+  .term-body::-webkit-scrollbar { width: 8px; }
+  .term-body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
+
   .cmd { color: var(--term-prompt); }
-  .out { color: var(--term-fg); margin-left: 0; white-space: pre-wrap; }
+  .out { color: var(--term-fg); white-space: pre-wrap; }
   .out.muted { color: var(--term-muted); }
-  .step { opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; margin-bottom: 10px; }
+  .step { opacity: 0; transform: translateY(3px); transition: opacity 0.2s, transform 0.2s; margin-bottom: 8px; }
   .step.shown { opacity: 1; transform: none; }
 
-  /* The slyfox quest panel that appears in the terminal */
+  /* Inline quest panel (appears in the terminal after the session detects the repo) */
   .quest-panel {
-    margin-top: 14px;
-    background: rgba(13,17,23,0.85); border: 1px solid #2f81f7; border-radius: 10px;
-    padding: 14px 16px;
-    box-shadow: 0 0 24px rgba(47,129,247,0.18);
+    margin-top: 12px;
+    background: rgba(13,17,23,0.92); border: 1px solid var(--accent); border-radius: 10px;
+    padding: 12px 14px;
+    box-shadow: 0 0 22px rgba(47,129,247,0.18);
     color: var(--text);
-    font-family: var(--mono); font-size: 12.5px;
+    font-family: var(--mono); font-size: 12px;
   }
-  .quest-panel .qp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
-  .quest-panel .qp-title { font-size: 13px; color: var(--accent); letter-spacing: 0.3px; }
+  .quest-panel .qp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+  .quest-panel .qp-title { font-size: 12px; color: var(--accent); letter-spacing: 0.3px; }
   .quest-panel .qp-meta { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
   .quest-panel .qp-detect { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
   .quest-panel .qp-detect code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
 
   .qquest {
     background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
-    padding: 10px 12px; margin-bottom: 8px;
-    display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
+    padding: 9px 11px; margin-bottom: 7px;
+    display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
   }
   .qquest .icon {
-    width: 32px; height: 32px; border-radius: 6px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 16px;
+    width: 28px; height: 28px; border-radius: 6px;
+    display: flex; align-items: center; justify-content: center; font-size: 14px;
   }
-  .qquest .body .title { font-size: 13px; color: var(--text); font-weight: 500; }
-  .qquest .body .desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
+  .qquest .body .title { font-size: 12.5px; color: var(--text); font-weight: 500; }
+  .qquest .body .desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
   .qquest .reward {
-    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
-    font-size: 11px;
+    display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px;
   }
-  .qquest .xp { color: var(--accent); font-weight: 600; }
-  .qquest .tier { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
+  .qquest .xp { color: var(--accent); font-weight: 600; font-size: 11px; }
+  .qquest .tier { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; }
   .qquest .accept {
     background: var(--accent); color: white; border: 0; border-radius: 5px;
-    padding: 4px 10px; font-size: 11px; font-weight: 500; cursor: pointer; margin-top: 4px;
+    padding: 4px 10px; font-size: 11px; font-weight: 500; cursor: pointer; margin-top: 3px;
     font-family: inherit;
   }
   .qquest .accept:hover { filter: brightness(1.15); }
+  .qquest .accept.done { background: var(--ok); }
+  .qquest .accept[disabled] { cursor: default; opacity: 0.85; }
 
-  /* Repo picker */
-  .controls {
-    display: flex; align-items: center; gap: 12px; margin: 16px 0 20px;
-    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
-    padding: 12px 16px;
+  /* Coding bar at the bottom of the terminal — live quest progress */
+  .coding-bar {
+    border-top: 1px solid var(--border); background: rgba(10,13,18,0.97);
+    padding: 10px 16px 12px;
+    font-family: var(--mono); font-size: 11px; color: var(--muted);
+    display: none;
   }
-  .controls label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
-  .controls select {
-    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
-    border-radius: 6px; padding: 6px 10px; font-size: 12px;
+  .coding-bar.on { display: block; }
+  .coding-bar .cb-head {
+    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
   }
-  .controls button {
-    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
-    border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer;
+  .coding-bar .cb-label {
+    letter-spacing: 0.4px; text-transform: uppercase; font-size: 10px; opacity: 0.7;
+    display: inline-flex; align-items: center; gap: 5px;
   }
-  .controls button.primary { background: var(--accent); border-color: var(--accent); color: white; font-weight: 500; }
-  .controls .gap { flex: 1; }
+  .coding-bar .cb-label .live {
+    width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
+    animation: pulse 1.2s ease-in-out infinite;
+  }
+  .coding-bar .cb-meta { font-size: 10px; color: var(--muted); }
+  .coding-bar .cb-meta b { color: var(--text); font-weight: 500; }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+  .qs-row {
+    display: grid;
+    grid-template-columns: 20px 130px 1fr 80px 110px;
+    gap: 12px; align-items: center;
+    padding: 7px 10px; margin-bottom: 4px;
+    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px;
+  }
+  .qs-row:last-child { margin-bottom: 0; }
+  .qs-row.complete { background: rgba(63,185,80,0.08); border-color: rgba(63,185,80,0.3); }
+  .qs-row.failed { background: rgba(248,81,73,0.08); border-color: rgba(248,81,73,0.3); }
+  .qs-row .qs-icon { font-size: 14px; text-align: center; }
+  .qs-row .qs-name { font-size: 11.5px; color: var(--text); font-weight: 500; }
+  .qs-row .qs-bar {
+    position: relative; height: 8px; background: #14181f; border-radius: 4px; overflow: visible;
+  }
+  .qs-row .qs-fill { height: 100%; background: var(--qs-color, var(--accent)); border-radius: 4px; transition: width 0.5s ease; }
+  .qs-row .qs-target {
+    position: absolute; top: -3px; width: 2px; height: 14px;
+    background: rgba(255,255,255,0.45); border-radius: 1px;
+  }
+  .qs-row .qs-progress { font-family: var(--mono); font-size: 11px; color: var(--text); text-align: right; }
+  .qs-row .qs-meta { font-size: 10.5px; color: var(--muted); text-align: right; }
+  .qs-row .qs-status {
+    font-size: 10px; color: var(--ok); text-transform: uppercase; letter-spacing: 0.4px;
+  }
+  .qs-row.failed .qs-status { color: var(--err); }
+
+  .reward-flash {
+    position: absolute; right: 16px; top: -10px;
+    background: var(--ok); color: white; padding: 4px 10px; border-radius: 6px;
+    font-size: 11px; font-weight: 600;
+    box-shadow: 0 4px 14px rgba(63,185,80,0.5);
+    animation: flash-in 0.4s ease, flash-out 0.4s ease 1.6s forwards;
+  }
+  @keyframes flash-in { from { opacity: 0; transform: translateY(-4px) scale(0.9); } to { opacity: 1; transform: none; } }
+  @keyframes flash-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
 
-  /* Below: full quest gallery + leaderboard */
+  /* Gallery + leaderboard below */
   .grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 22px; }
   @media (max-width: 880px) { .grid2 { grid-template-columns: 1fr; } }
-  .card {
-    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px;
-  }
+  .card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }
   .card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
   .badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
   .badge-tile {
@@ -149,7 +206,6 @@
   }
   .badge-tile:hover { border-color: var(--accent); }
   .badge-tile.locked { opacity: 0.4; filter: grayscale(0.7); }
-  .badge-tile .sv { display: inline-block; }
   .badge-tile .name { font-size: 10px; color: var(--muted); margin-top: 6px; }
 
   .lb { font-size: 12px; }
@@ -160,10 +216,7 @@
   .lb-row .user.me { color: var(--accent); font-weight: 500; }
   .lb-row .val { color: var(--muted); font-family: var(--mono); font-size: 11px; }
 
-  .install {
-    margin-top: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
-    padding: 16px 20px;
-  }
+  .install { margin-top: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }
   .install pre {
     background: #000; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
     font-family: var(--mono); font-size: 12px; color: #c9d1d9; overflow-x: auto; margin: 6px 0 0;
@@ -175,11 +228,10 @@
   <section class="hero">
     <h2>Quests appear when you start a Claude Code session.</h2>
     <p>
-      <span class="badge">repo-aware</span>
-      When you <code style="font-family:var(--mono);font-size:12px;background:var(--panel-2);padding:1px 6px;border-radius:3px;">cd</code>
-      into a repo and start Claude Code, slyfox detects the repo, pulls the active maintainers'
-      personas, and offers 3 quests tuned to that codebase. Complete one by hitting its emotional
-      pattern in your real session — earn XP, unlock badges, climb the streak board.
+      <span class="badge">repo-aware · live tracking</span>
+      Detect the repo, surface 3 quests for it, accept one — and watch slyfox track your
+      progress turn-by-turn inside the terminal, like a real game HUD. Complete the predicate,
+      earn the XP and the badge.
     </p>
   </section>
 
@@ -187,10 +239,13 @@
     <label>repo
       <select id="repo-pick"></select>
     </label>
-    <button id="btn-replay">⟲ replay session start</button>
+    <button id="btn-replay">⟲ replay session</button>
     <div class="gap"></div>
-    <span style="color: var(--muted); font-size: 12px;">XP: <b id="xp" style="color: var(--accent); font-weight: 600;">142</b></span>
-    <span style="color: var(--muted); font-size: 12px;">🔥 <b id="streak" style="color: var(--warn); font-weight: 600;">7</b>-day streak</span>
+    <div class="hud">
+      <span>XP <b id="xp">142</b></span>
+      <span>🔥 <b id="streak">7</b>-day streak</span>
+      <span>active quests <b id="active-count">0</b></span>
+    </div>
   </div>
 
   <div class="term">
@@ -200,14 +255,21 @@
       <div style="text-align:right; opacity:0.65;">▾</div>
     </div>
     <div class="term-body" id="term-body"></div>
+    <div class="coding-bar" id="coding-bar">
+      <div class="cb-head">
+        <span class="cb-label"><span class="live"></span>active quests · live tracking</span>
+        <span class="cb-meta">session · turn <b id="cb-turn">0</b> · dominant <b id="cb-dom">—</b></span>
+      </div>
+      <div id="qs-list"></div>
+    </div>
   </div>
 
   <div class="grid2">
     <div class="card">
       <h3>All quests in this repo</h3>
       <p style="color: var(--muted); font-size: 12px; margin: 0 0 12px;">
-        The 3 shown above are picked from this pool by relevance to your recent emotional history and the
-        repo's active maintainers. Re-roll daily.
+        Daily quest set is sampled from this pool based on your recent emotional history and the
+        repo's active maintainers. Re-rolls daily.
       </p>
       <div class="badges" id="all-quests"></div>
     </div>
@@ -219,7 +281,7 @@
 
   <div class="install">
     <h3 style="margin: 0 0 4px; font-size: 14px;">Add to your terminal</h3>
-    <p style="color: var(--muted); font-size: 13px; margin: 0;">Hook into Claude Code's <code style="font-family:var(--mono);background:var(--panel-2);padding:1px 5px;border-radius:3px;font-size:11px;">SessionStart</code> event.</p>
+    <p style="color: var(--muted); font-size: 13px; margin: 0;">Hooks into Claude Code's <code style="font-family:var(--mono);background:var(--panel-2);padding:1px 5px;border-radius:3px;font-size:11px;">SessionStart</code> event.</p>
 <pre>$ hf extensions install slyfox-quests
 $ slyfox-quests enable
 # next time you `claude` in a repo, the panel auto-appears in the terminal</pre>
@@ -230,53 +292,297 @@ $ slyfox-quests enable
 "use strict";
 
 // ----------------------------------------------------------------------------
-// Repos and the quests slyfox would surface for each on session start.
+// Repos, quests, coding sessions
 // ----------------------------------------------------------------------------
 
+// Each quest carries a `evaluate(turns)` returning { value, target, progress(0..1+), complete, failed, text }.
+// Turns is the rolling list of {idx, role, valence, arousal, dominant} processed so far.
+
+function ratioPositiveCalm(turns) {
+  const userTurns = turns.filter(t => t.role === "user");
+  if (!userTurns.length) return 0;
+  const calm = userTurns.filter(t => t.valence > 0 && t.arousal < 0).length;
+  return calm / userTurns.length;
+}
+
+function cosineToArthur(turns) {
+  // crude 2D "fingerprint" cosine using running mean (valence, arousal) vs Arthur's (-0.13, +0.32)
+  const userTurns = turns.filter(t => t.role === "user");
+  if (!userTurns.length) return 0;
+  const mv = userTurns.reduce((a,t) => a+t.valence, 0) / userTurns.length;
+  const ma = userTurns.reduce((a,t) => a+t.arousal, 0) / userTurns.length;
+  const av = -0.13, aa = 0.32;
+  const dot = mv*av + ma*aa;
+  const nm = Math.hypot(mv, ma);
+  const na = Math.hypot(av, aa);
+  if (nm < 1e-6 || na < 1e-6) return 0;
+  return dot / (nm * na);
+}
+
+function tokenizerSurvive(turns) {
+  // Did a high-arousal-negative spike occur? Then are we back to v > 0 within 5 turns?
+  let spikeAt = -1, recoveredAt = -1;
+  turns.forEach((t,i) => {
+    if (t.role !== "user") return;
+    if (spikeAt < 0 && t.arousal > 0.4 && t.valence < -0.3) spikeAt = i;
+    if (spikeAt >= 0 && recoveredAt < 0 && i > spikeAt && t.valence > 0.3) recoveredAt = i;
+  });
+  return { spikeAt, recoveredAt };
+}
+
+const QUEST_DEFS = {
+  "calm-refactor": {
+    icon: "🌊", title: "The Calm Refactor", xp: 15, tier: "common", color: "#3fb950",
+    desc: "Keep this session in low-arousal positive valence for >=70% of turns.",
+    evaluate(turns) {
+      const ratio = ratioPositiveCalm(turns);
+      const target = 0.70;
+      const userTurns = turns.filter(t => t.role === "user");
+      const calmCount = userTurns.filter(t => t.valence > 0 && t.arousal < 0).length;
+      return {
+        value: ratio,
+        target,
+        progress: ratio / target,
+        complete: userTurns.length >= 5 && ratio >= target,
+        text: `${(ratio*100).toFixed(0)}% calm`,
+        meta: `${calmCount}/${userTurns.length} user turns`,
+        targetLabel: `${(target*100).toFixed(0)}%`,
+      };
+    },
+  },
+  "like-arthur": {
+    icon: "🦊", title: "Be more like Arthur", xp: 30, tier: "rare", color: "#79c0ff",
+    desc: "Emotion trajectory must cosine-match ArthurZ >=0.7 over 5+ turns.",
+    evaluate(turns) {
+      const cos = cosineToArthur(turns);
+      const target = 0.70;
+      const userTurns = turns.filter(t => t.role === "user");
+      return {
+        value: cos,
+        target,
+        progress: Math.max(0, cos) / target,
+        complete: userTurns.length >= 5 && cos >= target,
+        text: `cos ${cos.toFixed(2)}`,
+        meta: `${userTurns.length} turns analyzed`,
+        targetLabel: `>=${target.toFixed(2)}`,
+      };
+    },
+  },
+  "tokenizer": {
+    icon: "🧩", title: "Survive the Tokenizer", xp: 25, tier: "rare", color: "#d2a8ff",
+    desc: "Recover from a high-arousal frustrated peak in <5 turns.",
+    evaluate(turns) {
+      const { spikeAt, recoveredAt } = tokenizerSurvive(turns);
+      if (spikeAt < 0) {
+        return { value: 0, target: 1, progress: 0, complete: false, text: "no spike yet", meta: "waiting…", targetLabel: "<=5 turns" };
+      }
+      if (recoveredAt < 0) {
+        const cur = turns.length - 1;
+        const elapsed = cur - spikeAt;
+        const fail = elapsed >= 5;
+        return {
+          value: elapsed, target: 5,
+          progress: elapsed / 5,
+          complete: false, failed: fail,
+          text: `recovering · ${elapsed}/5 turns`,
+          meta: `spiked at turn ${spikeAt}`,
+          targetLabel: "<=5",
+        };
+      }
+      const elapsed = recoveredAt - spikeAt;
+      return {
+        value: elapsed, target: 5,
+        progress: elapsed / 5,
+        complete: elapsed <= 5,
+        failed: elapsed > 5,
+        text: `recovered in ${elapsed}`,
+        meta: `spike@${spikeAt} → recovery@${recoveredAt}`,
+        targetLabel: "<=5",
+      };
+    },
+  },
+  "curious-celina": {
+    icon: "🦊", title: "Be more like Celina", xp: 30, tier: "rare", color: "#d2a8ff",
+    desc: "Stay in curious + focused emotions across 5+ turns.",
+    evaluate(turns) {
+      const userTurns = turns.filter(t => t.role === "user");
+      const ok = userTurns.filter(t => t.dominant === "curious" || t.dominant === "calm" || t.dominant === "confident").length;
+      const ratio = userTurns.length ? ok / userTurns.length : 0;
+      const target = 0.70;
+      return {
+        value: ratio, target,
+        progress: ratio / target,
+        complete: userTurns.length >= 5 && ratio >= target,
+        text: `${(ratio*100).toFixed(0)}% curious`,
+        meta: `${ok}/${userTurns.length}`,
+        targetLabel: `${(target*100).toFixed(0)}%`,
+      };
+    },
+  },
+  "auth-spiral": {
+    icon: "🔐", title: "Untangle Auth", xp: 20, tier: "rare", color: "#ffa657",
+    desc: "Resolve a 401/403 spiral without arousal going above 0.5.",
+    evaluate(turns) {
+      const userTurns = turns.filter(t => t.role === "user");
+      const breach = userTurns.some(t => t.arousal > 0.5);
+      return {
+        value: breach ? 0 : 1,
+        target: 1,
+        progress: breach ? 0 : (userTurns.length >= 5 ? 1 : userTurns.length / 5),
+        complete: !breach && userTurns.length >= 5,
+        failed: breach,
+        text: breach ? "arousal over 0.5" : "calm so far",
+        meta: `${userTurns.length} turns`,
+        targetLabel: "no spike",
+      };
+    },
+  },
+  "sayak-flow": {
+    icon: "🦊", title: "Be more like Sayak", xp: 30, tier: "rare", color: "#79c0ff",
+    desc: "Maintain calm-focused trajectory across pipeline work.",
+    evaluate(turns) {
+      const userTurns = turns.filter(t => t.role === "user");
+      const ok = userTurns.filter(t => t.valence > 0).length;
+      const ratio = userTurns.length ? ok / userTurns.length : 0;
+      const target = 0.70;
+      return {
+        value: ratio, target,
+        progress: ratio / target,
+        complete: userTurns.length >= 5 && ratio >= target,
+        text: `${(ratio*100).toFixed(0)}% positive`,
+        meta: `${ok}/${userTurns.length}`,
+        targetLabel: `${(target*100).toFixed(0)}%`,
+      };
+    },
+  },
+  "unet-debug": {
+    icon: "🌀", title: "The UNet Detective", xp: 25, tier: "rare", color: "#d2a8ff",
+    desc: "Recover from a 'wrong shape' frustration in <=3 turns.",
+    evaluate(turns) {
+      const { spikeAt, recoveredAt } = tokenizerSurvive(turns);  // same shape
+      if (spikeAt < 0) return { value: 0, target: 1, progress: 0, complete: false, text: "no spike yet", meta: "waiting…", targetLabel: "<=3" };
+      const cur = turns.length - 1;
+      const elapsed = (recoveredAt < 0 ? cur : recoveredAt) - spikeAt;
+      const complete = recoveredAt >= 0 && elapsed <= 3;
+      const failed = recoveredAt < 0 && elapsed > 3;
+      return {
+        value: elapsed, target: 3,
+        progress: elapsed / 3,
+        complete, failed,
+        text: recoveredAt >= 0 ? `recovered in ${elapsed}` : `recovering ${elapsed}/3`,
+        meta: `spike@${spikeAt}`,
+        targetLabel: "<=3",
+      };
+    },
+  },
+  "kernel-zen": {
+    icon: "⚙️", title: "Kernel Zen", xp: 35, tier: "epic", color: "#79c0ff",
+    desc: "Debug a CUDA kernel for 5+ turns without dropping below 0 valence.",
+    evaluate(turns) {
+      const userTurns = turns.filter(t => t.role === "user");
+      const negs = userTurns.filter(t => t.valence < 0).length;
+      const target = 5;
+      const progress = Math.min(1, userTurns.length / target);
+      return {
+        value: userTurns.length, target,
+        progress, complete: negs === 0 && userTurns.length >= target,
+        failed: negs > 0,
+        text: negs > 0 ? `dropped at turn ${userTurns.findIndex(t => t.valence < 0)}` : `${userTurns.length}/${target} turns`,
+        meta: `${negs} negative turns`,
+        targetLabel: `${target}, no neg`,
+      };
+    },
+  },
+  "survive-mp": {
+    icon: "🌪️", title: "Survive Multiproc", xp: 25, tier: "rare", color: "#ffa657",
+    desc: "Recover from a hung multiprocessing spawn to working dispatch.",
+    evaluate: function (turns) { return QUEST_DEFS["tokenizer"].evaluate(turns); },
+  },
+};
+
 const REPOS = {
   "huggingface/transformers": {
     cwd: "~/Work/transformers",
     detected_lang: "python",
     active_maintainers: ["ArthurZ", "Lysandre", "sgugger"],
-    quests: [
-      { id:"calm-refactor", icon:"🌊", title:"The Calm Refactor", desc:"Keep this session in low-arousal positive valence for ≥70% of turns.",  xp:15, tier:"common", color:"#3fb950" },
-      { id:"like-arthur",   icon:"🦊", title:"Be more like Arthur", desc:"Emotion trajectory must cosine-match ArthurZ ≥0.7 over 10+ turns.",     xp:30, tier:"rare",   color:"#79c0ff" },
-      { id:"tokenizer",     icon:"🧩", title:"Survive the Tokenizer", desc:"Recover from a high-arousal frustrated peak in <5 turns. Common on chat-template work.", xp:25, tier:"rare", color:"#d2a8ff" },
+    quest_ids: ["calm-refactor", "like-arthur", "tokenizer"],
+    session: [
+      { role:"user",      text:"let me clean up tokenization_gemma2.py before adding the test", valence:0.30, arousal:-0.20, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Read",arg:"src/transformers/models/gemma2/tokenization_gemma2.py"},{kind:"tool_out",text:"Read 312 lines"}], valence:0.25, arousal:-0.20, dominant:"calm" },
+      { role:"user",      text:"ok pulling the duplicate BOS handling into a single helper", valence:0.35, arousal:-0.15, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Edit",arg:"tokenization_gemma2.py · _dedup_bos()"},{kind:"tool_out",text:"applied 1 edit (+12 lines)"}], valence:0.3, arousal:-0.15, dominant:"calm" },
+      { role:"user",      text:"run the tokenizer tests", valence:0.40, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Bash",arg:"pytest tests/models/gemma2/test_tokenization_gemma2.py -q"},{kind:"tool_out",text:"FAILED · expected 1 bos_token_id, got 2"}], valence:0.20, arousal:0.10, dominant:"confident" },
+      { role:"user",      text:"damn this is annoying", valence:-0.50, arousal:0.60, dominant:"frustrated" },
+      { role:"assistant", lines:[{kind:"text",text:"That likely means `generation_config.bos_token_id` is also being prepended at generate-time."},{kind:"tool",name:"Read",arg:"google/gemma-2-2b-it/generation_config.json"},{kind:"tool_out",text:"\"bos_token_id\": 2"}], valence:0.0, arousal:0.20, dominant:"reflective" },
+      { role:"user",      text:"ok try dropping the explicit BOS from input", valence:0.10, arousal:0.10, dominant:"confident" },
+      { role:"assistant", lines:[{kind:"tool",name:"Edit",arg:"tests/...test_tokenization_gemma2.py"},{kind:"tool_out",text:"applied 1 edit"}], valence:0.20, arousal:0.0, dominant:"calm" },
+      { role:"user",      text:"green. tests pass now.", valence:0.55, arousal:-0.15, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"text",text:"Nice. Want me to draft the changelog entry?"}], valence:0.40, arousal:-0.10, dominant:"calm" },
+      { role:"user",      text:"yes please", valence:0.50, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Edit",arg:"docs/source/en/changelog.md"},{kind:"tool_out",text:"applied 1 edit"}], valence:0.45, arousal:-0.10, dominant:"calm" },
+      { role:"user",      text:"perfect, ready to push", valence:0.60, arousal:-0.10, dominant:"calm" },
     ],
   },
   "huggingface/huggingface_hub": {
     cwd: "~/Work/huggingface_hub",
     detected_lang: "python",
     active_maintainers: ["hanouticelina", "Wauplin", "julien-c"],
-    quests: [
-      { id:"curious-celina",icon:"🦊", title:"Be more like Celina", desc:"Stay in curious + focused emotions across 15 turns of API exploration.", xp:30, tier:"rare",   color:"#d2a8ff" },
-      { id:"calm-refactor", icon:"🌊", title:"The Calm Refactor", desc:"Low-arousal positive for ≥70% of turns. (Universal quest.)",            xp:15, tier:"common", color:"#3fb950" },
-      { id:"auth-spiral",   icon:"🔐", title:"Untangle Auth", desc:"Resolve a 401/403 spiral without arousal going above 0.5.",                   xp:20, tier:"rare",   color:"#ffa657" },
+    quest_ids: ["curious-celina", "calm-refactor", "auth-spiral"],
+    session: [
+      { role:"user", text:"what's the difference between upload_file and create_commit?", valence:0.30, arousal:-0.20, dominant:"curious" },
+      { role:"assistant", lines:[{kind:"tool",name:"Read",arg:"src/huggingface_hub/hf_api.py"},{kind:"tool_out",text:"Read 18,442 lines (grep skim)"},{kind:"text",text:"upload_file = one-shot, one file/one commit. create_commit = atomic bundle."}], valence:0.25, arousal:-0.20, dominant:"confident" },
+      { role:"user", text:"so upload_folder calls create_commit under the hood?", valence:0.40, arousal:-0.10, dominant:"curious" },
+      { role:"assistant", lines:[{kind:"text",text:"Yep, one CommitOperationAdd per file."}], valence:0.30, arousal:-0.20, dominant:"calm" },
+      { role:"user", text:"let me try uploading + downloading my dataset", valence:0.50, arousal:0.10, dominant:"curious" },
+      { role:"assistant", lines:[{kind:"tool",name:"Bash",arg:"python upload_and_check.py"},{kind:"tool_out",text:"401 Unauthorized on redownload"}], valence:0.20, arousal:0.20, dominant:"confident" },
+      { role:"user", text:"that's weird, the repo is public", valence:0.10, arousal:0.30, dominant:"curious" },
+      { role:"assistant", lines:[{kind:"text",text:"Happens when HF_TOKEN is set in env but expired. Try `hf auth whoami`."}], valence:0.10, arousal:0.0, dominant:"reflective" },
+      { role:"user", text:"ah token rotated last week. fixed.", valence:0.50, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"text",text:"Worth a friendlier error message in the SDK — want me to draft it?"}], valence:0.40, arousal:-0.10, dominant:"calm" },
+      { role:"user", text:"yes please", valence:0.55, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Edit",arg:"src/huggingface_hub/utils/_http.py"},{kind:"tool_out",text:"applied 1 edit"}], valence:0.50, arousal:-0.10, dominant:"calm" },
     ],
   },
   "huggingface/diffusers": {
     cwd: "~/Work/diffusers",
     detected_lang: "python",
     active_maintainers: ["sayakpaul", "pcuenca", "yiyixuxu"],
-    quests: [
-      { id:"sayak-flow",    icon:"🦊", title:"Be more like Sayak", desc:"Maintain calm-focused trajectory across pipeline work, even when CUDA OOMs.", xp:30, tier:"rare", color:"#79c0ff" },
-      { id:"unet-debug",    icon:"🌀", title:"The UNet Detective", desc:"Recover from a 'wrong shape' frustration in ≤3 turns. Repo-classic.",           xp:25, tier:"rare", color:"#d2a8ff" },
-      { id:"calm-refactor", icon:"🌊", title:"The Calm Refactor", desc:"Low-arousal positive for ≥70% of turns. (Universal quest.)",                     xp:15, tier:"common", color:"#3fb950" },
+    quest_ids: ["sayak-flow", "unet-debug", "calm-refactor"],
+    session: [
+      { role:"user", text:"adding a new scheduler — let me start from EulerDiscreteScheduler", valence:0.40, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Read",arg:"src/diffusers/schedulers/scheduling_euler_discrete.py"},{kind:"tool_out",text:"Read 458 lines"}], valence:0.35, arousal:-0.15, dominant:"calm" },
+      { role:"user", text:"copy the structure", valence:0.45, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Write",arg:"src/diffusers/schedulers/scheduling_my_new.py"},{kind:"tool_out",text:"created (412 lines)"}], valence:0.40, arousal:-0.10, dominant:"calm" },
+      { role:"user", text:"now the UNet — shape mismatch on forward", valence:-0.40, arousal:0.50, dominant:"frustrated" },
+      { role:"assistant", lines:[{kind:"text",text:"What's the expected shape vs what you're getting?"}], valence:0.0, arousal:0.20, dominant:"reflective" },
+      { role:"user", text:"got [2, 4, 64, 64], expected [2, 4, 1, 64, 64]", valence:0.0, arousal:0.30, dominant:"confident" },
+      { role:"assistant", lines:[{kind:"text",text:"Missing time dim. Add `.unsqueeze(2)` before passing to UNet."}], valence:0.20, arousal:0.10, dominant:"confident" },
+      { role:"user", text:"fixed, that worked", valence:0.55, arousal:-0.10, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"text",text:"Want me to add a shape assertion at the entry?"}], valence:0.40, arousal:-0.10, dominant:"calm" },
+      { role:"user", text:"yes that'd save future me", valence:0.60, arousal:-0.10, dominant:"calm" },
     ],
   },
   "vllm-project/vllm": {
     cwd: "~/Work/vllm",
     detected_lang: "python/cuda",
     active_maintainers: ["WoosukKwon", "zhuohan123", "simon-mo"],
-    quests: [
-      { id:"kernel-zen",    icon:"⚙️", title:"Kernel Zen", desc:"Debug a CUDA kernel for 20+ turns without dropping below 0 valence.",  xp:35, tier:"epic",  color:"#79c0ff" },
-      { id:"survive-mp",    icon:"🌪️", title:"Survive Multiproc", desc:"Recover from a hung multiprocessing spawn to working dispatch.",     xp:25, tier:"rare",  color:"#ffa657" },
-      { id:"calm-refactor", icon:"🌊", title:"The Calm Refactor", desc:"Universal quest.",                                                                       xp:15, tier:"common", color:"#3fb950" },
+    quest_ids: ["kernel-zen", "survive-mp", "calm-refactor"],
+    session: [
+      { role:"user", text:"adding a new attention kernel for the new architecture", valence:0.30, arousal:0.10, dominant:"confident" },
+      { role:"assistant", lines:[{kind:"tool",name:"Read",arg:"csrc/attention/attention_kernels.cu"},{kind:"tool_out",text:"Read 1,204 lines"}], valence:0.25, arousal:0.10, dominant:"confident" },
+      { role:"user", text:"copying the existing flash kernel as a starting point", valence:0.40, arousal:-0.05, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Write",arg:"csrc/attention/new_arch_kernel.cu"},{kind:"tool_out",text:"created (842 lines)"}], valence:0.35, arousal:-0.10, dominant:"calm" },
+      { role:"user", text:"compiling…", valence:0.40, arousal:0.0, dominant:"calm" },
+      { role:"assistant", lines:[{kind:"tool",name:"Bash",arg:"python setup.py build_ext --inplace"},{kind:"tool_out",text:"compilation OK · 4.2s"}], valence:0.45, arousal:0.0, dominant:"calm" },
+      { role:"user", text:"running tests", valence:0.45, arousal:0.10, dominant:"confident" },
+      { role:"assistant", lines:[{kind:"tool",name:"Bash",arg:"pytest tests/kernels/test_new_arch.py -k attention"},{kind:"tool_out",text:"PASSED 18/18 in 1m12s"}], valence:0.60, arousal:-0.10, dominant:"calm" },
+      { role:"user", text:"ship it", valence:0.65, arousal:-0.10, dominant:"calm" },
     ],
   },
 };
 
-// Universal badge pool (visible in the gallery for all repos)
+// Universal badge pool (visible in the gallery)
 const BADGES = [
   { id:"pacific-coder",  name:"Pacific Coder", tier:"common",    unlocked:true,  color:"#3fb950" },
   { id:"resilient",      name:"Resilient",     tier:"rare",      unlocked:true,  color:"#ffa657" },
@@ -303,70 +609,70 @@ const LEADERBOARD = [
 ];
 
 // ----------------------------------------------------------------------------
-// State
+// State + helpers
 // ----------------------------------------------------------------------------
 
-let state = { repo: "huggingface/transformers", timer: null, step: 0 };
+let state = {
+  repo: "huggingface/transformers",
+  phase: "intro",          // intro → session-start lines → quest-panel → coding
+  step: 0,                 // step index into the intro/session lines
+  activeQuestIds: [],      // ids of quests user has accepted
+  questResults: {},        // id → last evaluate() result
+  history: [],             // rolling list of {idx, role, valence, arousal, dominant}
+  timer: null,
+};
 
 const $ = id => document.getElementById(id);
 
+function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c])); }
+
 function setRepoPicker() {
   const pick = $("repo-pick");
   pick.innerHTML = Object.keys(REPOS).map(r => `<option value="${r}"${r===state.repo?" selected":""}>${r}</option>`).join("");
   pick.addEventListener("change", e => { state.repo = e.target.value; restart(); });
 }
 
-function step(text, delay=400) {
-  return { text, delay };
-}
-
-function buildSteps(repo) {
-  const cfg = REPOS[repo];
-  return [
-    { type:"cmd", text:`$ cd ${cfg.cwd}`, delay:500 },
-    { type:"cmd", text:`$ claude`, delay:600 },
-    { type:"out-muted", text:`Claude Code (1M context) — type /help for commands.\nDetecting workspace…`, delay:800 },
-    { type:"out-muted", text:`✓ workspace: ${repo} (${cfg.detected_lang})\n✓ slyfox mirror enabled · buddy ArthurZ`, delay:600 },
-    { type:"out", text:`\n  Loading repo-specific quests…`, delay:500 },
-    { type:"quest-panel", repo, delay:200 },
-    { type:"out-muted", text:`\nPick a quest with /quest <id>, or just start coding — slyfox tracks every turn.`, delay:200 },
-    { type:"prompt", text:"> ", delay:0 },
-  ];
-}
-
-function escapeHtml(s) {
-  return String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
-}
+// ----------------------------------------------------------------------------
+// Render terminal lines
+// ----------------------------------------------------------------------------
 
-function appendStep(s) {
+function appendStep(html) {
   const body = $("term-body");
   const el = document.createElement("div");
   el.className = "step";
-  if (s.type === "cmd") el.innerHTML = `<span class="cmd">${escapeHtml(s.text)}</span>`;
-  else if (s.type === "out") el.innerHTML = `<span class="out">${escapeHtml(s.text)}</span>`;
-  else if (s.type === "out-muted") el.innerHTML = `<span class="out muted">${escapeHtml(s.text)}</span>`;
-  else if (s.type === "prompt") el.innerHTML = `<span class="cmd">${escapeHtml(s.text)}</span><span style="display:inline-block;width:8px;height:14px;background:var(--term-prompt);vertical-align:middle;animation:blink 1s steps(1) infinite;"></span>`;
-  else if (s.type === "quest-panel") el.appendChild(renderQuestPanel(s.repo));
+  el.innerHTML = html;
   body.appendChild(el);
   requestAnimationFrame(() => el.classList.add("shown"));
   body.scrollTop = body.scrollHeight;
 }
 
-function renderQuestPanel(repo) {
-  const cfg = REPOS[repo];
-  const root = document.createElement("div");
-  root.className = "quest-panel";
-  root.innerHTML = `
+function introSteps() {
+  const cfg = REPOS[state.repo];
+  return [
+    { delay: 400,  html: `<span class="cmd">$ cd ${escapeHtml(cfg.cwd)}</span>` },
+    { delay: 600,  html: `<span class="cmd">$ claude</span>` },
+    { delay: 800,  html: `<span class="out muted">Claude Code (1M context) — type /help for commands.\nDetecting workspace…</span>` },
+    { delay: 600,  html: `<span class="out muted">✓ workspace: ${escapeHtml(state.repo)} (${escapeHtml(cfg.detected_lang)})\n✓ slyfox quests enabled · buddy ArthurZ</span>` },
+    { delay: 500,  html: `<span class="out">  Loading repo-specific quests…</span>` },
+    { delay: 200,  html: questPanelHtml() },
+    { delay: 600,  html: `<span class="out muted">Accept a quest with the button — slyfox tracks every turn live.</span>` },
+  ];
+}
+
+function questPanelHtml() {
+  const cfg = REPOS[state.repo];
+  return `<div class="quest-panel">
     <div class="qp-head">
       <div class="qp-title">🦊 slyfox quests · today</div>
       <div class="qp-meta">3 selected · re-rolls in 8h</div>
     </div>
     <div class="qp-detect">
-      detected <code>${escapeHtml(repo)}</code> · active maintainers ${cfg.active_maintainers.map(m=>`<code>${escapeHtml(m)}</code>`).join(", ")}
+      detected <code>${escapeHtml(state.repo)}</code> · active maintainers ${cfg.active_maintainers.map(m=>`<code>${escapeHtml(m)}</code>`).join(", ")}
     </div>
-    ${cfg.quests.map(q => `
-      <div class="qquest">
-        <div class="icon" style="background: ${hexToRgba(q.color, 0.18)}; color: ${q.color};">${q.icon}</div>
+    ${cfg.quest_ids.map(id => {
+      const q = QUEST_DEFS[id];
+      return `<div class="qquest">
+        <div class="icon" style="background:${hexToRgba(q.color, 0.18)}; color:${q.color};">${q.icon}</div>
         <div class="body">
           <div class="title">${escapeHtml(q.title)}</div>
           <div class="desc">${escapeHtml(q.desc)}</div>
@@ -374,101 +680,183 @@ function renderQuestPanel(repo) {
         <div class="reward">
           <span class="xp">+${q.xp} XP</span>
           <span class="tier">${escapeHtml(q.tier)}</span>
-          <button class="accept" onclick="acceptQuest('${q.id}')">accept</button>
+          <button class="accept" data-quest="${id}">accept</button>
         </div>
-      </div>
-    `).join("")}
-  `;
-  return root;
+      </div>`;
+    }).join("")}
+  </div>`;
 }
 
-window.acceptQuest = function(id) {
-  $("xp").textContent = (parseInt($("xp").textContent, 10) + 5);
-  const button = event.target;
-  button.textContent = "accepted ✓";
-  button.style.background = "var(--ok)";
-  button.disabled = true;
-};
-
 function hexToRgba(hex, a) {
   const h = hex.replace("#","");
   return `rgba(${parseInt(h.slice(0,2),16)},${parseInt(h.slice(2,4),16)},${parseInt(h.slice(4,6),16)},${a})`;
 }
 
+// ----------------------------------------------------------------------------
+// Coding session (after quest accepted)
+// ----------------------------------------------------------------------------
+
+function renderTurn(turn, idx) {
+  let html = "";
+  if (turn.role === "user") {
+    html = `<div class="out"><span class="cmd">&gt; </span>${escapeHtml(turn.text)}</div>`;
+  } else {
+    html = (turn.lines || []).map(l => {
+      if (l.kind === "text")     return `<div class="out">${escapeHtml(l.text)}</div>`;
+      if (l.kind === "tool")     return `<div class="out"><span style="color:var(--term-assistant-tick)">⏺</span> ${escapeHtml(l.name)}(<span style="color:#d2a8ff">${escapeHtml(l.arg)}</span>)</div>`;
+      if (l.kind === "tool_out") return `<div class="out muted">   ⎿ ${escapeHtml(l.text)}</div>`;
+      return "";
+    }).join("");
+  }
+  appendStep(html);
+  state.history.push({ idx, role: turn.role, valence: turn.valence ?? 0, arousal: turn.arousal ?? 0, dominant: turn.dominant ?? null });
+  $("cb-turn").textContent = String(idx + 1);
+  $("cb-dom").textContent  = turn.dominant || "—";
+  updateActiveQuests();
+}
+
+// ----------------------------------------------------------------------------
+// Quest evaluation + render
+// ----------------------------------------------------------------------------
+
+function acceptQuest(id, buttonEl) {
+  if (state.activeQuestIds.includes(id)) return;
+  state.activeQuestIds.push(id);
+  if (buttonEl) {
+    buttonEl.textContent = "accepted ✓";
+    buttonEl.classList.add("done");
+    buttonEl.disabled = true;
+  }
+  $("active-count").textContent = String(state.activeQuestIds.length);
+  $("coding-bar").classList.add("on");
+  renderActiveQuests();
+  // Kick off the coding phase if this is the first accept
+  if (state.phase !== "coding") { state.phase = "coding"; startCoding(); }
+}
+
+function renderActiveQuests() {
+  $("qs-list").innerHTML = state.activeQuestIds.map(id => {
+    const q = QUEST_DEFS[id];
+    const r = state.questResults[id] || { progress: 0, text: "—", meta: "", targetLabel: "" };
+    const pct = Math.min(100, Math.max(0, r.progress * 100));
+    const statusCls = r.complete ? "complete" : (r.failed ? "failed" : "");
+    const statusTxt = r.complete ? "✓ complete · +" + q.xp + " XP" : (r.failed ? "✗ failed" : "");
+    return `<div class="qs-row ${statusCls}" data-id="${id}" style="--qs-color:${q.color}">
+      <span class="qs-icon">${q.icon}</span>
+      <span class="qs-name">${escapeHtml(q.title)}</span>
+      <div class="qs-bar">
+        <div class="qs-fill" style="width:${pct.toFixed(0)}%"></div>
+        <div class="qs-target" style="left:100%"></div>
+      </div>
+      <span class="qs-progress">${escapeHtml(r.text)} ${statusTxt ? "" : `<span style="color:var(--muted)">/ ${escapeHtml(r.targetLabel || "")}</span>`}</span>
+      <span class="qs-meta">${escapeHtml(statusTxt || r.meta || "")}</span>
+    </div>`;
+  }).join("");
+}
+
+function updateActiveQuests() {
+  for (const id of state.activeQuestIds) {
+    const prev = state.questResults[id];
+    const next = QUEST_DEFS[id].evaluate(state.history);
+    state.questResults[id] = next;
+    if (next.complete && (!prev || !prev.complete)) {
+      // Reward flash + XP bump
+      const xp = parseInt($("xp").textContent.replace(/[^\d]/g, ""), 10) + QUEST_DEFS[id].xp;
+      $("xp").textContent = String(xp);
+    }
+  }
+  renderActiveQuests();
+}
+
 // ----------------------------------------------------------------------------
 // Playback
 // ----------------------------------------------------------------------------
 
+function playIntro() {
+  const steps = introSteps();
+  function step(i) {
+    if (i >= steps.length) { return; }
+    appendStep(steps[i].html);
+    // Hook up accept buttons when the quest-panel step is rendered
+    $("term-body").querySelectorAll(".accept[data-quest]").forEach(btn => {
+      if (btn._wired) return;
+      btn._wired = true;
+      btn.addEventListener("click", () => acceptQuest(btn.dataset.quest, btn));
+    });
+    state.timer = setTimeout(() => step(i + 1), steps[i].delay);
+  }
+  step(0);
+}
+
+function startCoding() {
+  const session = REPOS[state.repo].session;
+  let i = 0;
+  function tick() {
+    if (i >= session.length) return;
+    const t = session[i];
+    renderTurn(t, i);
+    i += 1;
+    state.timer = setTimeout(tick, 1500);
+  }
+  // small beat before kicking off the coding phase
+  setTimeout(tick, 800);
+}
+
 function restart() {
   if (state.timer) { clearTimeout(state.timer); state.timer = null; }
+  state.phase = "intro";
+  state.step = 0;
+  state.activeQuestIds = [];
+  state.questResults = {};
+  state.history = [];
   $("term-body").innerHTML = "";
+  $("coding-bar").classList.remove("on");
+  $("qs-list").innerHTML = "";
+  $("active-count").textContent = "0";
+  $("cb-turn").textContent = "0";
+  $("cb-dom").textContent = "—";
   $("repo-label").textContent = REPOS[state.repo].cwd;
-  state.step = 0;
-  playNext(buildSteps(state.repo));
-}
-
-function playNext(steps) {
-  if (state.step >= steps.length) return;
-  const s = steps[state.step++];
-  appendStep(s);
-  const dur = (s.delay || 400);
-  state.timer = setTimeout(() => playNext(steps), dur);
+  playIntro();
 }
 
 // ----------------------------------------------------------------------------
 // Gallery + leaderboard
 // ----------------------------------------------------------------------------
 
-function renderBadges() {
-  const root = $("all-quests");
-  root.innerHTML = BADGES.map(b => `
-    <div class="badge-tile ${b.unlocked ? "" : "locked"}">
-      <div class="sv">${badgeSvg(b.color, b.tier, b.unlocked)}</div>
-      <div class="name">${escapeHtml(b.name)}</div>
-    </div>
-  `).join("");
-}
-
 function badgeSvg(color, tier, unlocked) {
   const ringColor = { common:"#6e7681", rare:"#79c0ff", epic:"#d2a8ff", legendary:"#febc2e", mythic:"#f85149" }[tier] || "#6e7681";
   const fill = unlocked ? color : "#2a3038";
+  const id = `g-${color.slice(1)}-${tier}-${Math.random().toString(36).slice(2,5)}`;
   return `<svg width="64" height="64" viewBox="0 0 64 64">
-    <defs>
-      <linearGradient id="g-${color.slice(1)}-${tier}" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="${fill}" stop-opacity="0.95"/>
-        <stop offset="100%" stop-color="${fill}" stop-opacity="0.55"/>
-      </linearGradient>
-    </defs>
-    <path d="M32 4 L56 14 L56 34 C56 46 44 56 32 60 C20 56 8 46 8 34 L8 14 Z"
-          fill="url(#g-${color.slice(1)}-${tier})" stroke="${ringColor}" stroke-width="2"/>
+    <defs><linearGradient id="${id}" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="${fill}" stop-opacity="0.95"/><stop offset="100%" stop-color="${fill}" stop-opacity="0.55"/></linearGradient></defs>
+    <path d="M32 4 L56 14 L56 34 C56 46 44 56 32 60 C20 56 8 46 8 34 L8 14 Z" fill="url(#${id})" stroke="${ringColor}" stroke-width="2"/>
     <circle cx="32" cy="32" r="6" fill="${unlocked ? '#fff' : '#5a6168'}" opacity="${unlocked ? 1 : 0.5}"/>
   </svg>`;
 }
 
+function renderBadges() {
+  $("all-quests").innerHTML = BADGES.map(b => `
+    <div class="badge-tile ${b.unlocked ? "" : "locked"}">
+      ${badgeSvg(b.color, b.tier, b.unlocked)}
+      <div class="name">${escapeHtml(b.name)}</div>
+    </div>`).join("");
+}
+
 function renderLeaderboard() {
-  const root = $("leaderboard");
-  root.innerHTML = LEADERBOARD.map(r => `
+  $("leaderboard").innerHTML = LEADERBOARD.map(r => `
     <div class="lb-row">
       <span class="rank">${r.rank}</span>
       <span class="user${r.me ? " me" : ""}">${escapeHtml(r.user)}</span>
       <span class="val">${escapeHtml(r.val)}</span>
-    </div>
-  `).join("");
+    </div>`).join("");
 }
 
-// ----------------------------------------------------------------------------
 // Boot
-// ----------------------------------------------------------------------------
-
 setRepoPicker();
 renderBadges();
 renderLeaderboard();
 restart();
 $("btn-replay").addEventListener("click", () => restart());
-
-const style = document.createElement("style");
-style.textContent = "@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }";
-document.head.appendChild(style);
 </script>
 </body>
 </html>