web UI overhaul + fix #32 (plan phase save) (#43)

Web UI (Chainlit):
- Rebrand to Codabench: blue theme + Codabench wordmark/globe logos.
- One settings gear in the header (theme · Readme · logout); hide the native
theme/avatar/Readme controls.
- Phase bar: instant hover tooltips per phase, and the next phase pill becomes
clickable to advance once its predecessor's artifact exists.
- Always-visible cost/context widget; fix the context % (it counted only
uncached input tokens, so it read ~0% — now includes cache read/creation).
- Per-turn tool-step log collapses into a hide/unhide <details> when the
answer lands.
- Tutorial-style Readme; greeting starter examples + a downloadable example
bundle for the validate path.
- Serve the SPA shell + custom JS/CSS with no-store so reloads stop running a
stale chat.js/login.css.
- Banner no longer persists on the landing; workspace panel starts below the
header so it no longer clips the phase bar.

Core (fix #32 — "plan phase finished without saving specs/implementation_plan.md"):
- The plan skill told the agent to save with
autocodabench_snapshot_spec(name="implementation_plan", ...) but the tool
parameter is `filename`, written verbatim with no `.md`, so the file landed
at specs/implementation_plan and the pipeline reported it as never saved.
- Correct the skill to filename="implementation_plan.md", add a tolerant
_resolve_plan_file() that promotes an extension-less save, and add regression
tests.

src/autocodabench/agent/pipeline.py

@@ -136,6 +136,26 @@ def _find_bundle(run_dir: Path) -> tuple[Path | None, Path | None]:
     return None, None
 
 
+def _resolve_plan_file(run_path: Path) -> Path | None:
+    """Return the saved implementation plan, or None if the agent never wrote it.
+
+    Defense-in-depth for the class of bug behind #32: the plan agent is told to
+    save `specs/implementation_plan.md`, but `snapshot_spec` writes the filename
+    verbatim, so an agent that drops the extension lands at
+    `specs/implementation_plan`. Phase 2 reads `implementation_plan.md`, so if we
+    find only the extension-less file we promote it to the canonical name.
+    """
+    specs = run_path / "specs"
+    canonical = specs / "implementation_plan.md"
+    if canonical.is_file():
+        return canonical
+    extensionless = specs / "implementation_plan"
+    if extensionless.is_file():
+        extensionless.rename(canonical)
+        return canonical
+    return None
+
+
 def _update_run_slug(run_dir: Path, slug: str) -> None:
     """Overwrite the slug field in an existing run's meta.json.
 
@@ -272,11 +292,11 @@ async def create_async(
     emit({"kind": "phase_done", "phase": "plan", "ok": plan_result.ok,
           "num_turns": plan_result.num_turns,
           "cost_usd": plan_result.total_cost_usd})
-    plan_path = p1.path / "specs" / "implementation_plan.md"
+    plan_path = _resolve_plan_file(p1.path)
     record_session_phase(run_dir, "phase1_plan", {
-        "dir": str(p1.path), "ok": bool(plan_result.ok and plan_path.is_file()),
+        "dir": str(p1.path), "ok": bool(plan_result.ok and plan_path is not None),
         "cost_usd": plan_result.total_cost_usd, "num_turns": plan_result.num_turns})
-    if not plan_result.ok or not plan_path.is_file():
+    if not plan_result.ok or plan_path is None:
         return CreateResult(
             ok=False, run_dir=run_dir, plan_dir=p1.path,
             plan=plan_result,
@@ -442,8 +462,8 @@ async def plan_async(
         allow_web_tools=research_resolved.web_search,
     ))
 
-    plan_path = run_dir / "specs" / "implementation_plan.md"
-    if not plan_result.ok or not plan_path.is_file():
+    plan_path = _resolve_plan_file(run_dir)
+    if not plan_result.ok or plan_path is None:
         return PlanResult(
             ok=False, run_dir=run_dir,
             plan=plan_result,

src/autocodabench/skills/plan/SKILL.md

@@ -26,7 +26,9 @@ which is exactly the kind of cost-burn we're trying to avoid.
 2. **No code, no notebook.** Don't write Python in chat code-fences,
    don't call any `nb_*` tool. Phase 2 writes code.
 3. **One artifact: `<run>/specs/implementation_plan.md`.** Save via
-   `autocodabench_snapshot_spec(name="implementation_plan", body=<md>)`.
+   `autocodabench_snapshot_spec(filename="implementation_plan.md", body=<md>)`.
+   The argument is `filename` (NOT `name`) and it is written verbatim — it MUST
+   end in `.md`, or Phase 2 cannot find the plan.
 4. **Be specific, but version-robust.** Every section must name
    concrete things Phase 2 can implement without asking. See the §2
    template — fields like "primary metric" should be
@@ -213,7 +215,7 @@ Once drafted, save:
 
 ```
 autocodabench_snapshot_spec(
-    name="implementation_plan",
+    filename="implementation_plan.md",
     body=<the full markdown>,
 )
 
@@ -336,7 +338,8 @@ From `autocodabench`:
 - `autocodabench_open_run(slug?)` — once, first tool call.
 - `autocodabench_current_run()` — sanity check the run dir.
 - `autocodabench_log_event(kind, payload?)`.
-- `autocodabench_snapshot_spec(name, body)` — save / revise the plan.
+- `autocodabench_snapshot_spec(filename, body)` — save / revise the plan
+  (use `filename="implementation_plan.md"`).
 
 **Research tools — ground the design in the existing literature and in
 hosting practice, not in your prior alone.** Two *structured* sources

tests/test_pipeline_phases.py

@@ -21,3 +21,62 @@ def test_bundle_async_rejects_both_sources(tmp_path):
     plan.write_text("# plan", encoding="utf-8")
     with pytest.raises(ValueError, match="exactly one"):
         asyncio.run(bundle_async(run_dir=tmp_path, plan_path=plan))
+
+
+def test_plan_prompt_save_call_matches_tool_and_pipeline():
+    """Regression for #32: 'plan phase finished without saving
+    specs/implementation_plan.md'.
+
+    The plan skill told the agent to save with
+    `autocodabench_snapshot_spec(name="implementation_plan", ...)` — but the tool
+    parameter is `filename` (no `name` alias) and `snapshot_spec` writes the
+    name verbatim, so the file landed at `specs/implementation_plan` (no `.md`)
+    or the call errored. The pipeline then looked for
+    `specs/implementation_plan.md` and reported the plan as never saved.
+
+    The system prompt the plan agent actually sees must therefore (a) use the
+    real `filename` parameter and (b) include the `.md` the pipeline checks for.
+    """
+    import inspect
+
+    from autocodabench.run_log import snapshot_spec
+    from autocodabench.agent.prompts import plan_system_prompt
+
+    # The save tool's first parameter is `filename` (no `name`).
+    assert list(inspect.signature(snapshot_spec).parameters)[0] == "filename"
+
+    prompt = plan_system_prompt()
+    # Must not instruct a kwarg/value that yields the wrong path.
+    assert 'name="implementation_plan"' not in prompt, (
+        "plan prompt still tells the agent to save with `name=` / without `.md`"
+    )
+    # Must instruct the exact save the pipeline can find.
+    assert 'filename="implementation_plan.md"' in prompt
+
+
+def test_resolve_plan_file_promotes_extensionless(tmp_path):
+    """Defense-in-depth: a plan saved as `implementation_plan` (no `.md`) is
+    promoted to the canonical `implementation_plan.md` that Phase 2 reads."""
+    from autocodabench.agent.pipeline import _resolve_plan_file
+
+    specs = tmp_path / "specs"
+    specs.mkdir()
+    assert _resolve_plan_file(tmp_path) is None  # nothing saved
+
+    (specs / "implementation_plan").write_text("# plan", encoding="utf-8")
+    resolved = _resolve_plan_file(tmp_path)
+    assert resolved == specs / "implementation_plan.md"
+    assert resolved.is_file()
+    assert not (specs / "implementation_plan").exists()  # renamed, not copied
+
+
+def test_resolve_plan_file_prefers_canonical(tmp_path):
+    from autocodabench.agent.pipeline import _resolve_plan_file
+
+    specs = tmp_path / "specs"
+    specs.mkdir()
+    (specs / "implementation_plan.md").write_text("# canonical", encoding="utf-8")
+    (specs / "implementation_plan").write_text("# stale", encoding="utf-8")
+    resolved = _resolve_plan_file(tmp_path)
+    assert resolved == specs / "implementation_plan.md"
+    assert resolved.read_text(encoding="utf-8") == "# canonical"  # didn't clobber

web/.chainlit/config.toml

@@ -132,14 +132,17 @@ cot = "tool_call"
 
 # Specify a CSS file that can be used to customize the user interface.
 # The CSS file can be served from the public directory or via an external link.
-custom_css = "/public/login.css"
+# NOTE: the ?v= query string is a cache-buster. Chainlit serves no
+# Cache-Control header on /public assets, so browsers can hold a stale
+# copy. Bump the version whenever login.css / chat.js change materially.
+custom_css = "/public/login.css?v=15"
 
 # Specify additional attributes for a custom CSS file
 # custom_css_attributes = "media=\"print\""
 
 # Specify a JavaScript file that can be used to customize the user interface.
 # The JavaScript file can be served from the public directory.
-custom_js = "/public/chat.js"
+custom_js = "/public/chat.js?v=15"
 
 # The style of alert boxes. Can be "classic" or "modern".
 alert_style = "classic"
@@ -161,7 +164,7 @@ alert_style = "classic"
 # custom_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"
 
 # Load assistant logo directly from URL.
-logo_file_url = ""
+logo_file_url = "/public/codabench-logo.png"
 
 # Load assistant avatar image directly from URL.
 default_avatar_file_url = ""

web/app.py

@@ -62,6 +62,40 @@ log = logging.getLogger("autocodabench.web")
 register_upload_route()
 
 
+def _install_no_cache_for_custom_assets() -> None:
+    """Force browsers to always re-fetch the SPA shell + our custom JS/CSS.
+
+    Chainlit serves `/` and `/public/*` with NO Cache-Control header, so
+    browsers heuristically cache `chat.js` / `login.css` and keep running a
+    stale UI across reloads (the recurring "X is gone after refresh"). Marking
+    just those responses `no-store` makes every reload pick up the live files.
+    Added at import time, before uvicorn starts serving.
+    """
+    try:
+        from chainlit.server import app as cl_app
+    except Exception as e:  # pragma: no cover
+        log.warning("Chainlit FastAPI app unavailable; no-cache not installed: %s", e)
+        return
+    if getattr(cl_app, "_ac_no_cache_installed", False):
+        return
+    cl_app._ac_no_cache_installed = True  # type: ignore[attr-defined]
+
+    _NO_CACHE_PATHS = ("/public/chat.js", "/public/login.css")
+
+    @cl_app.middleware("http")
+    async def _ac_no_cache(request, call_next):  # type: ignore[no-untyped-def]
+        response = await call_next(request)
+        path = request.url.path
+        if path == "/" or path in _NO_CACHE_PATHS:
+            response.headers["Cache-Control"] = "no-store, no-cache, must-revalidate, max-age=0"
+            response.headers["Pragma"] = "no-cache"
+            response.headers["Expires"] = "0"
+        return response
+
+
+_install_no_cache_for_custom_assets()
+
+
 # ---------------------------------------------------------------------------
 # Auth
 # ---------------------------------------------------------------------------

web/chainlit.md

@@ -1,56 +1,110 @@
-# AutoCodabench
-
-A scientific-friend assistant for designing and validating **Codabench** competitions.
+<div align="center" style="margin:6px 0 2px">
+  <img src="/public/codabench-logo.png" alt="Codabench" style="height:40px" />
+  <div style="color:hsl(var(--muted-foreground));font-size:14px;margin-top:6px">
+    Design &amp; validate Codabench competitions — just by chatting.
+  </div>
+</div>
 
 ---
 
-## Pick what you want to do (at the start of every chat)
-
-When a chat begins you choose one of two paths. To switch later, start a **New Chat** and choose again.
-
-- **🛠 Create a bundle from scratch** — go through Plan → Build → Validate. Optionally drop a PDF/markdown proposal to seed the plan.
-- **✅ I have a bundle — validate it** — skip straight to validation. The composer locks to *attach-only*: drop your bundle `.zip` and press send.
-
-The **phase bar** at the top shows progress only (● in progress · ✓ done · ⤼ skipped). You move forward with the **▶ Proceed** buttons that appear in chat — clicking a pill just flashes this Readme.
+### 🧭 The three phases
+
+<div style="display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px">
+  <div style="flex:1;min-width:150px;padding:14px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--accent))">
+    <div style="font-size:24px;line-height:1">📝</div>
+    <div style="font-weight:700;margin-top:6px">1 · Plan</div>
+    <div style="font-size:12.5px;color:hsl(var(--muted-foreground));margin-top:3px">Chat an idea into a design plan.</div>
+  </div>
+  <div style="flex:1;min-width:150px;padding:14px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--accent))">
+    <div style="font-size:24px;line-height:1">📦</div>
+    <div style="font-weight:700;margin-top:6px">2 · Build</div>
+    <div style="font-size:12.5px;color:hsl(var(--muted-foreground));margin-top:3px">Agent writes the bundle &amp; runs it.</div>
+  </div>
+  <div style="flex:1;min-width:150px;padding:14px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--accent))">
+    <div style="font-size:24px;line-height:1">✅</div>
+    <div style="font-weight:700;margin-top:6px">3 · Validate</div>
+    <div style="font-size:12.5px;color:hsl(var(--muted-foreground));margin-top:3px">Checks + report: ready to launch?</div>
+  </div>
+</div>
+
+The **phase bar** (top-right) shows where you are — `●` active · `✓` done.
+Hover any phase for a one-line reminder. You move forward with the **▶ Proceed**
+buttons in the chat.
 
 ---
 
-## Path A — Create a bundle from scratch
-
-**1. 📝 Plan.** Chat with the agent until it converges on a one-page `implementation_plan.md` covering the 7 design sections (task, data, metric, baseline, rules, ethics, schedule). Review it in the **workspace panel** on the right. When ready, click **▶ Proceed to Phase 2**.
+### 🚀 Two ways to start
 
-**2. 📦 Build.** A fresh agent (no memory of the chat) reads the plan and writes the Codabench bundle — `competition.yaml`, `scoring_program/score.py`, the baseline `solution/`, and the standard pages — then validates and zips it. It also **builds and runs the bundle in Docker** using the `docker_image` from `competition.yaml` (**~5–10 min** for a verified bundle; longer on first run while the image pulls). You get a `bundle.zip` download and an **⬆️ Upload to Codabench** button. Click **▶ Proceed to Phase 3**.
+Every new chat opens with a choice (switch later via **New Chat**, top-left):
 
-**3. ✅ Validate.** See below — same as Path B, plus a **design scorecard** (Table A) comparing your plan against best practice.
+- **🛠 Create from scratch** — you have an *idea*. Go through all three phases below.
+- **✅ Validate a bundle** — you already have a `.zip`. Jump straight to **Phase 3**;
+  the composer locks to *attach-only* (drop your bundle and send). No bundle? That
+  screen has a **⬇ Download example bundle** button to try.
 
 ---
 
-## Path B — Validate an existing bundle
-
-Attach your bundle `.zip` and press send. AutoCodabench runs the full check framework, **executing the baseline in Docker** (it pulls the `docker_image` if needed), and writes a report.
+## 📝 Phase 1 · Plan
+
+*Design the competition together — the agent acts as a scientific collaborator.*
+
+- **You provide:** a one-sentence idea — e.g. *“a fair chest-X-ray pneumonia
+  challenge, scored by balanced accuracy.”* You can also **drop a PDF or markdown
+  proposal** and it'll seed the plan.
+- **What happens:** the agent researches related work (OpenAlex / Kaggle), then
+  works through the **7 design sections** with you — *task, data, metric, baseline,
+  rules, ethics, schedule* — asking questions until the design is coherent.
+- **You get:** a one-page **`implementation_plan.md`** in the **workspace panel**
+  on the right. Read it, push back, refine.
+- **Next:** when it looks right, click **▶ Proceed to Phase 2**.
+
+## 📦 Phase 2 · Competition Creation (Build)
+
+*A fresh agent turns the approved plan into a real Codabench bundle.*
+
+- **Input:** **only** the locked `implementation_plan.md` — this agent never sees
+  your chat, which keeps the build honest (no leaked answers).
+- **What happens:** it writes the full bundle — `competition.yaml`, the
+  `scoring_program/`, a **baseline solution**, the ingestion program, participant
+  **pages**, and a **starting kit** — then **builds and runs it in Docker** (using
+  the bundle's `docker_image`) to prove the baseline actually produces a score.
+  Expect **~5–10 min** (longer the first time, while the image downloads).
+- **You get:** a **`bundle.zip`** to download, plus an **⬆️ Upload to Codabench**
+  button.
+- **Next:** click **▶ Proceed to Phase 3**.
+
+## ✅ Phase 3 · Validation
+
+*The pre-launch safety check — would this competition run cleanly?*
+
+- **Input:** the bundle — automatically from Phase 2, or (Validate path) the
+  `.zip` you **attach**.
+- **What happens:** runs the full **check framework** — schema and file-reference
+  checks, plus a real **Docker execution of the baseline** — and, on the create
+  path, a **design scorecard** grading your plan against best practice. You can
+  then run an optional **✨ LLM-judged** pass that flags participant pages
+  contradicting `competition.yaml`.
+- **You get:** a **✅ PASS / ❌ FAIL** verdict, two result tables, and a
+  downloadable **`validation_report.md`**.
+- **Next:** fix any **❌** gate failures and re-validate; **⚠️** findings are
+  advisory.
 
 ---
 
-## What validation produces
-
-A **✅ PASS / ❌ FAIL** verdict in chat plus two colorful tables, and a downloadable `validation_report.md`:
-
-- **Table A — design scorecard** *(create-path only)*: each of the 7 design sections marked ✅ / ⚠️ / ❌ against best practice.
-- **Table B — checks**: every check with ✅ pass / ❌ fail / ⚠️ finding / 📋 attestation / • skipped.
-  - **Gate failures (❌)** must be fixed before upload (e.g. missing `competition.yaml` keys, broken file refs, a baseline that crashes in Docker).
-  - **Findings (⚠️)** are advisory design risks (with citations) — they don't block upload.
-  - **Attestations (📋)** are criteria only a human can certify.
+### 📊 How to read the report
 
-After the report, you'll be offered an optional **✨ LLM-judged** pass: an LLM reads your participant-facing pages and flags **contradictions** against `competition.yaml` (e.g. a page promises a metric or submission limit the config doesn't declare). It's advisory only and needs Claude auth.
+| Badge | Meaning |
+|---|---|
+| ❌ **Gate failure** | **Must fix before upload** — bad config, broken file paths, a baseline that crashes in Docker. |
+| ⚠️ **Finding** | Advisory design risk, with a citation. Doesn't block upload. |
+| 📋 **Attestation** | A criterion only a human can certify. |
+| • **Skipped** | Couldn't run here (e.g. no Docker) — not a failure. |
 
-Everything is downloadable from the workspace panel: `implementation_plan.md`, `bundle.zip`, `validation_report.md`, and a combined `workspace.zip`.
+Everything downloads from the **workspace panel**: the plan, `bundle.zip`,
+`validation_report.md`, and a combined `workspace.zip`.
 
 ---
 
-## Internal note — operator checklist
-
-(_For the project maintainer / internal testers._) This is a **private alpha**:
-
-- Logs are uploaded to a private HF Dataset (`ktgiahieu/autocodabench-runs`).
-- Each session has a hard Anthropic budget cap (default **$5.00**, via `MAX_USD_PER_SESSION`).
-- HF Spaces is CPU-only, ≤16 GB RAM; if Docker isn't available, Phase 2 skips the runtime check and Phase 3's Docker execution checks report as *skipped* rather than failing.
+<div style="font-size:12px;color:hsl(var(--muted-foreground))">
+⚙ Change the model &amp; theme from <b>settings</b> (top-right) · 💸 each session has a spend cap (default $5) · 🐳 without Docker, baseline-execution checks are skipped, not failed.
+</div>

web/public/chat.js

@@ -35,31 +35,40 @@
 
     const INIT_BANNER_HTML = `
       <span class="ac-init-spinner" aria-hidden="true"></span>
-      <span>
-        <b>Initializing AutoCodabench…</b>
-        spinning up MCP tool servers and the literature index — this takes
-        up to 30s on first connect. Chat input is locked until ready.
-      </span>
+      <span><b>Starting up…</b> connecting tools — this takes a few seconds.</span>
     `;
 
+    // Chooser is on screen once the entry cards are tagged (or its heading
+    // text is present). The server runs the MCP probe BEFORE showing the
+    // chooser, so by the time it appears initialization is actually done —
+    // the banner should be gone even though no greeting phrase exists yet.
+    function _chooserShown(bodyText) {
+        return !!document.querySelector("button[data-ac-entry]") ||
+               bodyText.includes("Choose how you'd like to start");
+    }
+
     // ---------------------------------------------------------------
     // (4) Init banner + input lock, applied from the *very first*
     //     paint so the user never sees an unlocked chat.
     //
-    // We gate the lock on `textarea` existing — the login page has no
-    // textarea, so the banner only shows after the user has signed in
-    // and the chat surface is visible.
+    // We gate on `textarea` existing — the login page has no textarea, so the
+    // banner only shows after sign-in.
     //
-    // We unlock as soon as READY_PHRASE appears in the body's text.
+    // Banner: shows ONLY while genuinely initializing — i.e. before EITHER the
+    // chooser appears (MCP probe done) OR a greeting lands. It used to persist
+    // through the whole chooser because it only watched the greeting phrases.
+    // Input lock: stays on until a greeting lands, so on the landing the user
+    // picks via the cards rather than typing.
     // ---------------------------------------------------------------
     function syncInitGate() {
         const onChatPage = !!document.querySelector("textarea");
         const bodyText = document.body.textContent;
-        const isReady = READY_PHRASES.some((p) => bodyText.includes(p));
+        const greetingReady = READY_PHRASES.some((p) => bodyText.includes(p));
+        const initializing = onChatPage && !greetingReady && !_chooserShown(bodyText);
 
         // -- banner --
         let banner = document.getElementById("ac-init-banner");
-        if (onChatPage && !isReady) {
+        if (initializing) {
             if (!banner) {
                 banner = document.createElement("div");
                 banner.id = "ac-init-banner";
@@ -72,7 +81,7 @@
 
         if (!onChatPage) return;  // login page: skip input lock too
 
-        const locked = !isReady;
+        const locked = !greetingReady;
 
         // -- textarea --
         document.querySelectorAll("textarea").forEach((el) => {
@@ -224,6 +233,82 @@
         setTimeout(() => btn.classList.remove("ac-readme-flash"), 3200);
     }
 
+    // ---- phase pill: custom instant tooltip + click-to-advance ----
+    function _acPillTipEl() {
+        let t = document.getElementById("ac-pill-tip");
+        if (!t) {
+            t = document.createElement("div");
+            t.id = "ac-pill-tip";
+            t.hidden = true;
+            document.body.appendChild(t);
+        }
+        return t;
+    }
+    function _acShowPillTip(pill) {
+        const t = _acPillTipEl();
+        t.textContent = pill.dataset.tip || "";
+        t.hidden = false;
+        const r = pill.getBoundingClientRect();
+        const w = t.offsetWidth || 240;
+        let left = r.left + r.width / 2 - w / 2;
+        left = Math.max(8, Math.min(left, window.innerWidth - w - 8));
+        t.style.left = `${Math.round(left)}px`;
+        t.style.top = `${Math.round(r.bottom + 8)}px`;
+    }
+    function _acHidePillTip() {
+        const t = document.getElementById("ac-pill-tip");
+        if (t) t.hidden = true;
+    }
+    // Advance by click-simulating the in-chat "▶ Proceed to Phase N" button.
+    function _acAdvanceToPhase(num) {
+        const wanted = `Proceed to Phase ${num}`;
+        for (const b of document.querySelectorAll("button, a")) {
+            if ((b.textContent || "").includes(wanted)) {
+                try { b.scrollIntoView({block: "center"}); } catch (e) {}
+                try { b.click(); } catch (e) {}
+                return;
+            }
+        }
+        _flashReadmeForHelp();  // button not present yet — nudge to the Readme
+    }
+
+    // ---------------------------------------------------------------
+    // Persistent cost / context widget (bottom-left). Fed by the
+    // phase_state.json poll (state.cost + state.context), refreshed by
+    // the server after every turn — so the session spend and context use
+    // are ALWAYS visible instead of buried in a per-turn footer line.
+    // ---------------------------------------------------------------
+    function _renderCostWidget(state) {
+        if (!document.querySelector("textarea")) return;  // login page
+        const cost = state && state.cost;
+        const ctx = state && state.context;
+        if (!cost) return;
+        let w = document.getElementById("ac-cost-widget");
+        if (!w) {
+            w = document.createElement("div");
+            w.id = "ac-cost-widget";
+            w.innerHTML =
+                '<div class="ac-cost-top">' +
+                    '<span class="ac-cost-budget"></span>' +
+                    '<span class="ac-cost-bar"><i></i></span>' +
+                '</div>' +
+                '<div class="ac-cost-ctx"></div>';
+            document.body.appendChild(w);
+        }
+        const usd = cost.cumulative_usd || 0;
+        const budget = cost.budget_usd || 0;
+        const pct = Math.max(0, Math.min(100, cost.pct || 0));
+        const ctxPct = ctx ? (ctx.pct || 0) : 0;
+        w.querySelector(".ac-cost-budget").textContent =
+            `💰 $${usd.toFixed(2)} / $${budget.toFixed(2)}`;
+        const bar = w.querySelector(".ac-cost-bar > i");
+        bar.style.width = pct + "%";
+        bar.style.background = pct > 85 ? "hsl(0 72% 52%)"
+            : pct > 60 ? "hsl(38 92% 50%)" : "hsl(var(--primary))";
+        w.querySelector(".ac-cost-ctx").textContent =
+            `🧠 ${ctxPct.toFixed(1)}% context`;
+    }
+
     async function _refreshPhasePillsFromState() {
         const sid = _currentSessionId();
         if (!sid) return;
@@ -238,6 +323,9 @@
             if (!r.ok) return;
             const state = await r.json();
 
+            // Always-visible cost / context widget.
+            _renderCostWidget(state);
+
             // Cache the input mode for syncInputMode() (attach-only lock).
             window.__acInputMode = state.input_mode || "normal";
 
@@ -246,7 +334,9 @@
             const sig = JSON.stringify({
                 cur:   state.current,
                 mode:  window.__acInputMode,
-                items: (state.phases || []).map((x) => [x.id, x.status]),
+                // include `exists` — the advance pill turns on when the active
+                // phase's artifact appears, so a status-only sig would miss it.
+                items: (state.phases || []).map((x) => [x.id, x.status, x.exists]),
             });
             if (sig === _lastPhasePillsSig) return;
             _lastPhasePillsSig = sig;
@@ -258,21 +348,52 @@
                 skipped: "Skipped (you started later in the pipeline)",
                 pending: "Upcoming",
             };
+            // 1–2 sentence explanation of each phase, shown on hover. Keyed by
+            // phase id (config.py: plan / bundle / validate).
+            const PHASE_DESC = {
+                plan:     "Shape your idea into a one-page competition plan "
+                        + "(task, data, metric, baseline, rules, ethics, schedule).",
+                bundle:   "A fresh agent turns the plan into a full Codabench "
+                        + "bundle and runs the baseline in Docker to prove it works.",
+                validate: "Run the checks plus a Docker baseline execution, then "
+                        + "get a PASS/FAIL report.",
+            };
+            const phases = state.phases || [];
+            // The next phase becomes enterable once the active phase's artifact
+            // exists (e.g. the plan is saved → you can proceed to Phase 2).
+            const activeIdx = phases.findIndex((p) => p.status === "active");
+            const advanceIdx = (activeIdx >= 0 && phases[activeIdx].exists)
+                ? activeIdx + 1 : -1;
+
             pillsHost.innerHTML = "";
-            (state.phases || []).forEach((ph, idx) => {
+            phases.forEach((ph, idx) => {
                 const pill = document.createElement("span");
                 pill.className = "ac-pp ac-pp-" + ph.status;
                 pill.dataset.phaseId     = ph.id;
                 pill.dataset.phaseStatus = ph.status;
-                pill.textContent = `${idx + 1}. ${ph.title}${ICON[ph.status] || ""}`;
-                if (ph.status === "active") {
-                    pill.title = TIP.active;
-                } else {
-                    // Pills are progress-only — you advance via the in-chat
-                    // "Proceed" buttons, not by clicking pills. Clicking one
-                    // flashes the Readme so the user learns how the bar works.
-                    pill.title = (TIP[ph.status] || "") +
-                        " — use the Proceed buttons in chat to move between phases";
+                const isAdvance = idx === advanceIdx;
+                pill.textContent = `${idx + 1}. ${ph.title}`
+                    + (isAdvance ? " ▸" : (ICON[ph.status] || ""));
+                const desc = PHASE_DESC[ph.id] || ph.title;
+
+                // Custom instant tooltip (native `title` is delayed/unreliable).
+                pill.dataset.tip = isAdvance
+                    ? `${desc}\n\n▸ Click to proceed to ${ph.title}.`
+                    : (ph.status === "active"
+                        ? `${desc}\n\n● In progress.`
+                        : `${desc}\n\n${TIP[ph.status] || "Upcoming"}.`);
+                pill.addEventListener("mouseenter", () => _acShowPillTip(pill));
+                pill.addEventListener("mouseleave", _acHidePillTip);
+
+                if (isAdvance) {
+                    // Clickable: proceed to this phase.
+                    pill.classList.add("ac-pp-advance");
+                    pill.addEventListener("click", () => {
+                        _acHidePillTip();
+                        _acAdvanceToPhase(idx + 1);
+                    });
+                } else if (ph.status !== "active") {
+                    // Progress-only — clicking nudges the Readme.
                     pill.classList.add("ac-pp-hint");
                     pill.addEventListener("click", _flashReadmeForHelp);
                 }
@@ -308,7 +429,11 @@
         // stale input_mode (the bug where the validate-mode lock leaks across
         // New Chat, or fails to apply). On change we drop per-session caches.
         const text = document.body.textContent || "";
-        const matches = text.match(/session\s+`?[a-f0-9]{8,16}`?/g);
+        // `\s*` (not `\s+`): the greeting footer renders the id in a chip as
+        // "session" + "<hex>" with no whitespace between the two elements, so
+        // textContent reads "session1dffc8eeffae". Older "session `hex`" prose
+        // still matches too.
+        const matches = text.match(/session\s*`?[a-f0-9]{8,16}`?/g);
         let sid = null;
         if (matches && matches.length) {
             const m = matches[matches.length - 1].match(/([a-f0-9]{8,16})/);
@@ -327,6 +452,9 @@
             _lastDownloadsSig = "";
             for (const k in _lastTagByUrl) delete _lastTagByUrl[k];
             window.__acPendingModeFetch = true;
+            // Reset the cost widget — it re-populates from the new session's
+            // first phase_state poll.
+            document.getElementById("ac-cost-widget")?.remove();
         }
         return window.__acSessionId || null;
     }
@@ -664,6 +792,219 @@
         if (btn.innerHTML !== expected) btn.innerHTML = expected;
     }
 
+    // ---------------------------------------------------------------
+    // (8) Top-right Settings menu.
+    //
+    // Chainlit ships two separate header controls: a standalone theme
+    // toggle (#theme-toggle) and an avatar/user menu (#user-nav-button
+    // → Settings + Logout). We fold both into ONE gear dropdown so the
+    // top-right has a single, tidy settings affordance with:
+    //   - a Light / Dark / System segmented switch, and
+    //   - a Logout row.
+    // The natives are hidden via login.css. Theme is applied by
+    // mirroring Chainlit's own mechanism (toggle `dark` on <html> +
+    // persist localStorage "theme"), verified to stick without a reload.
+    // ---------------------------------------------------------------
+
+    const AC_ICON = {
+        gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+        sun: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4"/></svg>',
+        moon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
+        system: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>',
+        logout: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>',
+        readme: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>',
+    };
+
+    function _acCurrentTheme() {
+        const v = localStorage.getItem("theme");
+        return (v === "light" || v === "dark" || v === "system") ? v : "system";
+    }
+
+    function _acApplyTheme(mode) {
+        localStorage.setItem("theme", mode);
+        const dark = mode === "dark" ||
+            (mode === "system" &&
+             window.matchMedia("(prefers-color-scheme: dark)").matches);
+        document.documentElement.classList.toggle("dark", dark);
+        // Reflect selection in the segmented control.
+        document.querySelectorAll(".ac-theme-opt").forEach((o) => {
+            o.classList.toggle("ac-active", o.dataset.mode === mode);
+        });
+    }
+
+    function _acLogout() {
+        // POST /logout clears the httpOnly auth cookie server-side; then
+        // we bounce to /login (requireLogin forces a fresh sign-in).
+        fetch("/logout", {method: "POST", credentials: "same-origin"})
+            .catch(() => {})
+            .finally(() => { window.location.href = "/login"; });
+    }
+
+    function _acCloseSettingsMenu() {
+        const menu = document.getElementById("ac-settings-menu");
+        const btn = document.getElementById("ac-settings-btn");
+        if (menu) menu.hidden = true;
+        if (btn) btn.setAttribute("aria-expanded", "false");
+    }
+
+    function _acPositionSettingsMenu() {
+        const menu = document.getElementById("ac-settings-menu");
+        const btn = document.getElementById("ac-settings-btn");
+        if (!menu || !btn || menu.hidden) return;
+        const r = btn.getBoundingClientRect();
+        const w = menu.offsetWidth || 248;
+        let left = r.right - w;                 // right-align to the gear
+        left = Math.max(8, Math.min(left, window.innerWidth - w - 8));
+        menu.style.top = `${Math.round(r.bottom + 8)}px`;
+        menu.style.left = `${Math.round(left)}px`;
+    }
+
+    function _acFillUserName() {
+        // Best-effort: show who's signed in. Cached after first fetch.
+        if (window.__acUserFetched) return;
+        window.__acUserFetched = true;
+        fetch("/user", {credentials: "same-origin"})
+            .then((r) => (r.ok ? r.json() : null))
+            .then((u) => {
+                if (!u) return;
+                const name = u.display_name || u.identifier || "Signed in";
+                const nameEl = document.querySelector(".ac-set-user-name");
+                const avEl = document.querySelector(".ac-set-avatar");
+                if (nameEl) nameEl.textContent = name;
+                if (avEl) avEl.textContent = (name[0] || "?").toUpperCase();
+            })
+            .catch(() => {});
+    }
+
+    function _ensureSettingsMenu() {
+        if (!document.querySelector("textarea")) return;  // login page
+
+        // (a) the dropdown card — mounted once on <body> so header
+        //     re-renders never blow it away.
+        let menu = document.getElementById("ac-settings-menu");
+        if (!menu) {
+            const cur = _acCurrentTheme();
+            const opt = (mode, icon, label) =>
+                `<button type="button" class="ac-theme-opt${mode === cur ? " ac-active" : ""}" ` +
+                `data-mode="${mode}" title="${label} theme">${icon}<span>${label}</span></button>`;
+            menu = document.createElement("div");
+            menu.id = "ac-settings-menu";
+            menu.hidden = true;
+            menu.innerHTML =
+                `<div class="ac-set-user">` +
+                    `<span class="ac-set-avatar">?</span>` +
+                    `<span class="ac-set-user-meta">` +
+                        `<span class="ac-set-user-name">Signed in</span>` +
+                        `<span class="ac-set-user-sub">AutoCodabench</span>` +
+                    `</span>` +
+                `</div>` +
+                `<div class="ac-set-label">Appearance</div>` +
+                `<div class="ac-theme-seg">` +
+                    opt("light", AC_ICON.sun, "Light") +
+                    opt("dark", AC_ICON.moon, "Dark") +
+                    opt("system", AC_ICON.system, "System") +
+                `</div>` +
+                `<div class="ac-set-sep"></div>` +
+                `<button type="button" class="ac-set-row" id="ac-readme-row">` +
+                    `${AC_ICON.readme}<span>Readme</span></button>` +
+                `<button type="button" class="ac-set-row ac-set-danger" id="ac-logout-row">` +
+                    `${AC_ICON.logout}<span>Log out</span></button>`;
+            document.body.appendChild(menu);
+
+            menu.querySelectorAll(".ac-theme-opt").forEach((o) => {
+                o.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    _acApplyTheme(o.dataset.mode);
+                });
+            });
+            // Readme: delegate to the native (now hidden) Readme button.
+            menu.querySelector("#ac-readme-row").addEventListener("click", (e) => {
+                e.stopPropagation();
+                _acCloseSettingsMenu();
+                const rb = document.getElementById("readme-button");
+                if (rb) rb.click();
+            });
+            menu.querySelector("#ac-logout-row")
+                .addEventListener("click", (e) => { e.stopPropagation(); _acLogout(); });
+            // Keep clicks inside the menu from bubbling to the document
+            // close-handler.
+            menu.addEventListener("click", (e) => e.stopPropagation());
+            _acFillUserName();
+            // Sync the active indicator to the live theme on first build.
+            _acApplyTheme(_acCurrentTheme());
+        }
+
+        // (b) the gear button. Anchor it right AFTER the phase pills when they
+        //     exist — the user always sees the pills, so that's the most
+        //     reliable spot and puts Settings next to the phase bar. On the
+        //     landing (no pills yet) fall back to just before the hidden Readme
+        //     button. Re-placed whenever Chainlit's re-render moves things.
+        const pills  = document.getElementById("ac-phase-pills");
+        const readme = _findReadmeButton();
+        if (pills || (readme && readme.parentElement)) {
+            let btn = document.getElementById("ac-settings-btn");
+            if (!btn) {
+                btn = document.createElement("button");
+                btn.id = "ac-settings-btn";
+                btn.type = "button";
+                btn.setAttribute("aria-label", "Settings");
+                btn.setAttribute("aria-haspopup", "menu");
+                btn.setAttribute("aria-expanded", "false");
+                btn.title = "Settings";
+                btn.innerHTML = AC_ICON.gear;
+                btn.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    const m = document.getElementById("ac-settings-menu");
+                    if (!m) return;
+                    const willOpen = m.hidden;
+                    m.hidden = !willOpen;
+                    btn.setAttribute("aria-expanded", String(willOpen));
+                    if (willOpen) { _acFillUserName(); _acPositionSettingsMenu(); }
+                });
+            }
+            if (pills) {
+                // BEFORE the pills (to their left) — keeps the gear clear of
+                // the fixed workspace sliver that hugs the right edge and would
+                // otherwise cover it.
+                if (pills.previousElementSibling !== btn) {
+                    pills.insertAdjacentElement("beforebegin", btn);
+                }
+            } else if (readme.previousElementSibling !== btn) {
+                readme.parentElement.insertBefore(btn, readme);
+            }
+        }
+
+        // One-time global wiring: outside-click + Escape close, reposition.
+        if (!window.__acSettingsWired) {
+            window.__acSettingsWired = true;
+            document.addEventListener("click", () => _acCloseSettingsMenu());
+            document.addEventListener("keydown", (e) => {
+                if (e.key === "Escape") _acCloseSettingsMenu();
+            });
+            window.addEventListener("resize", _acPositionSettingsMenu);
+            window.addEventListener("scroll", _acPositionSettingsMenu, true);
+        }
+    }
+
+    // ---------------------------------------------------------------
+    // (9) Landing chooser cards.
+    //
+    // The two entry options are cl.Action buttons (server: _ask_entry_mode).
+    // We tag each by its (clean, fixed) label so login.css can render them
+    // as big product-style cards with an icon + description, instead of the
+    // default emoji chat buttons. Idempotent; safe to run every tick.
+    // ---------------------------------------------------------------
+    const _AC_ENTRY = {
+        "Create from scratch": "create",
+        "Validate a bundle": "validate",
+    };
+    function _tagEntryCards() {
+        document.querySelectorAll("button").forEach((el) => {
+            const mode = _AC_ENTRY[(el.textContent || "").trim()];
+            if (mode && el.dataset.acEntry !== mode) el.dataset.acEntry = mode;
+        });
+    }
+
     function tick() {
         syncInitGate();   // run first so the lock is up before anything else
         _currentSessionId();  // detect New-Chat session swap early (resets caches)
@@ -676,6 +1017,8 @@
         syncInputMode();  // apply the attach-only / locked composer mode
         _injectSidePanel();      // sci-space-style persistent workspace panel
         _ensurePhasePills();     // header-row phase pills (slim, no chips)
+        _ensureSettingsMenu();   // top-right gear: theme switch + logout
+        _tagEntryCards();        // landing: tag the two entry options as cards
         // syncFilesToggle is now redundant — the persistent panel is
         // the primary file viewer. Keep the function around for the
         // edge case where the panel can't materialise (no session id).

web/public/login.css

@@ -60,16 +60,18 @@ form:has(input[type="password"]):not(.ac-pub-form) > *:has(> button[type="submit
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 12px;
-    padding: 14px 20px;
-    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
-    color: #fff;
+    gap: 10px;
+    padding: 11px 20px;
+    /* Theme-adaptive, neutral — no purple gradient. Reads as a quiet system
+     * notification that matches the rest of the UI in light and dark. */
+    background: hsl(var(--popover));
+    color: hsl(var(--muted-foreground));
+    border-bottom: 1px solid hsl(var(--border));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
+    font-size: 13.5px;
     line-height: 1.4;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
     /* Slide-down on first appearance so it doesn't feel jarring. */
     animation: ac-banner-in 0.25s ease-out;
 }
@@ -78,14 +80,15 @@ form:has(input[type="password"]):not(.ac-pub-form) > *:has(> button[type="submit
 }
 #ac-init-banner b {
     font-weight: 600;
+    color: hsl(var(--foreground));
 }
 
 .ac-init-spinner {
     flex: 0 0 auto;
-    width: 16px;
-    height: 16px;
-    border: 2px solid rgba(255, 255, 255, 0.35);
-    border-top-color: #fff;
+    width: 15px;
+    height: 15px;
+    border: 2px solid hsl(var(--border));
+    border-top-color: hsl(var(--primary));
     border-radius: 50%;
     animation: ac-spin 0.9s linear infinite;
 }
@@ -106,97 +109,6 @@ textarea.ac-input-locked::placeholder {
 }
 
 
-/* ============================================================
- * Phase-switch action buttons.
- *
- * We can't target our cl.Action buttons by a stable class (Chainlit
- * doesn't expose one), so we match by visible label text — the strings
- * are fixed server-side in app.py's _on_switch_to_impl / etc. handlers.
- * `:has()` is supported in every evergreen browser as of 2023.
- *
- * Three buttons styled:
- *   - "START IMPLEMENTATION (irreversible)"  — big, orange/red, pulses.
- *   - "YES — switch to IMPLEMENTATION"        — large, red, no pulse.
- *   - "Cancel — keep planning"                — large, calm grey.
- * ============================================================ */
-
-button:has(span:is(:contains)),
-button[aria-label*="START IMPLEMENTATION" i],
-button:has(*:not(script):not(style)) {
-    /* The :has(:contains) selector isn't standard, so we fall through
-       and rely on the `text starts with` JS tagger in chat.js — see
-       below. The selector above is a no-op safety net for browsers
-       that try to parse it; the real styling targets data attributes. */
-}
-
-/* Tagged by chat.js: a Chainlit action button whose label starts with
- * "🛠 START IMPLEMENTATION". Pulsing border to drag the eye. */
-button[data-ac-impl-button="primary"] {
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
-    min-height: 56px;
-    padding: 14px 28px !important;
-    margin: 12px 0 !important;
-    font-size: 17px !important;
-    font-weight: 700 !important;
-    letter-spacing: 0.3px;
-    color: #fff !important;
-    background: linear-gradient(90deg, #d97706 0%, #dc2626 100%) !important;
-    border: 2px solid #fff !important;
-    border-radius: 10px !important;
-    box-shadow:
-        0 0 0 0 rgba(220, 38, 38, 0.6),
-        0 4px 18px rgba(220, 38, 38, 0.35) !important;
-    cursor: pointer !important;
-    animation: ac-pulse-cta 1.6s ease-in-out infinite;
-}
-button[data-ac-impl-button="primary"]:hover {
-    filter: brightness(1.05);
-    transform: translateY(-1px);
-}
-@keyframes ac-pulse-cta {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6),
-                          0 4px 18px rgba(220, 38, 38, 0.35); }
-    50%      { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0.0),
-                          0 6px 22px rgba(220, 38, 38, 0.45); }
-}
-
-/* The final-confirm "YES" button — same loud styling, no pulse (user
- * has already seen the pulse; we want them deliberate now). */
-button[data-ac-impl-button="confirm"] {
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
-    min-height: 52px;
-    padding: 12px 26px !important;
-    margin: 10px 8px 10px 0 !important;
-    font-size: 16px !important;
-    font-weight: 700 !important;
-    color: #fff !important;
-    background: #dc2626 !important;
-    border: 2px solid #991b1b !important;
-    border-radius: 8px !important;
-    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.30) !important;
-    cursor: pointer !important;
-}
-button[data-ac-impl-button="cancel"] {
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
-    min-height: 52px;
-    padding: 12px 22px !important;
-    margin: 10px 0 !important;
-    font-size: 15px !important;
-    font-weight: 600 !important;
-    color: CanvasText !important;
-    background: rgba(127, 127, 127, 0.10) !important;
-    border: 2px solid rgba(127, 127, 127, 0.35) !important;
-    border-radius: 8px !important;
-    cursor: pointer !important;
-}
-
-
 /* ============================================================
  * Persistent "📁 Files" floating toggle (chat.js).
  *
@@ -336,28 +248,6 @@ textarea.ac-attach-only {
 }
 
 
-/* Hide the cl.Action buttons we use only as click targets for the
- * phase pills. Labels like "AC_ADVANCE::kit" / "AC_REVERT::plan"
- * are tagged in chat.js as data-ac-phase-nav="advance|revert" and
- * hidden here — and so is their host message card via :has(). */
-button[data-ac-phase-nav] {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    border: 0 !important;
-    opacity: 0 !important;
-    pointer-events: auto !important; /* still clickable from JS */
-}
-*:has(> button[data-ac-phase-nav]),
-[class*="message"]:has(button[data-ac-phase-nav]) {
-    display: none !important;
-}
-
-
 /* ============================================================
  * Persistent right workspace panel (sci-space style).
  *
@@ -374,7 +264,9 @@ button[data-ac-phase-nav] {
  * just offscreen, and might intercept clicks" failure mode. */
 #ac-side-panel {
     position: fixed !important;
-    top: 0 !important;
+    /* Start BELOW the header so the workspace panel/sliver never overlaps the
+     * phase bar (it used to cover the right edge and cut off "3. Validation"). */
+    top: 56px !important;
     right: 0 !important;
     bottom: 0 !important;
     /* 55vw clamped to [480, 900] px so the notebook has real reading
@@ -440,26 +332,30 @@ button[data-ac-phase-nav] {
     flex: 1 !important;
     width: 44px !important;
     height: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    /* Theme tokens (not system Canvas) so the strip matches the app in dark
+     * mode instead of showing as a jarring light bar; centered label. */
     border: none !important;
+    border-left: 1px solid hsl(var(--border)) !important;
     border-radius: 0 !important;
-    background: linear-gradient(180deg,
-        color-mix(in oklab, Canvas 88%, currentColor 6%) 0%,
-        color-mix(in oklab, Canvas 82%, currentColor 10%) 100%) !important;
-    color: CanvasText !important;
+    background: hsl(var(--popover)) !important;
+    color: hsl(var(--muted-foreground)) !important;
     cursor: pointer !important;
-    font-size: 12.5px !important;
+    font-size: 12px !important;
     font-weight: 700 !important;
     letter-spacing: 0.6px !important;
     writing-mode: vertical-rl !important;
     text-orientation: mixed !important;
     padding: 16px 0 !important;
     line-height: 1.3 !important;
+    transition: background 0.12s ease-out, color 0.12s ease-out !important;
 }
 #ac-side-panel[data-state="collapsed"]:hover #ac-side-collapse,
 #ac-side-panel.ac-collapsed:hover #ac-side-collapse {
-    background: linear-gradient(180deg,
-        color-mix(in oklab, Canvas 78%, currentColor 12%) 0%,
-        color-mix(in oklab, Canvas 70%, currentColor 16%) 100%) !important;
+    background: hsl(var(--accent)) !important;
+    color: hsl(var(--foreground)) !important;
 }
 
 .ac-side-header {
@@ -669,3 +565,375 @@ body.ac-side-active {
         border-left: none;
     }
 }
+
+
+/* ============================================================
+ * Top-right Settings menu (injected by chat.js).
+ *
+ * Consolidates Chainlit's two separate native header controls — the
+ * standalone theme toggle (#theme-toggle) and the avatar/user menu
+ * (#user-nav-button, which held Settings + Logout) — into a single
+ * gear dropdown holding the Light/Dark/System theme switch + Logout.
+ * The natives are hidden in favour of this one menu. Colors use
+ * Chainlit's own shadcn CSS variables so the menu tracks the active
+ * theme automatically in both light and dark.
+ * ============================================================ */
+
+/* Fold the native controls into our single gear menu. The theme toggle and
+ * user/avatar menu are redundant; Readme moves INTO the gear menu but stays
+ * in the DOM (display:none) so it remains the click target + layout anchor. */
+#theme-toggle,
+#user-nav-button,
+#readme-button { display: none !important; }
+
+/* Gear button — injected into the header flow just LEFT of "Readme"
+ * (chat.js). That keeps it clear of both the workspace sliver on the far
+ * right and Readme itself, and it inherits the header's vertical alignment.
+ * Matches Chainlit's 36px icon-button chrome. */
+#ac-settings-btn {
+    /* relative + z-index so the gear always renders ABOVE the fixed workspace
+     * sliver (z 10000) even if layout pushes it near the right edge. */
+    position: relative;
+    z-index: 10001;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    margin: 0 6px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    transition: background 0.12s ease-out, color 0.12s ease-out;
+}
+#ac-settings-btn:hover,
+#ac-settings-btn[aria-expanded="true"] {
+    background: hsl(var(--accent));
+    color: hsl(var(--foreground));
+}
+#ac-settings-btn svg { width: 18px; height: 18px; }
+
+/* Dropdown card (mounted on <body>, fixed-positioned under the gear). */
+#ac-settings-menu {
+    position: fixed;
+    z-index: 100000;
+    min-width: 248px;
+    padding: 8px;
+    border-radius: 12px;
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    border: 1px solid hsl(var(--border));
+    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+                 Roboto, Helvetica, Arial, sans-serif;
+    animation: ac-menu-in 0.12s ease-out;
+}
+#ac-settings-menu[hidden] { display: none; }
+@keyframes ac-menu-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Signed-in-as header. */
+.ac-set-user {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 8px 10px;
+    margin-bottom: 6px;
+    border-bottom: 1px solid hsl(var(--border));
+}
+.ac-set-avatar {
+    flex: 0 0 auto;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: hsl(var(--primary));
+    color: #fff;
+    font-weight: 700;
+    font-size: 13px;
+}
+.ac-set-user-meta { display: flex; flex-direction: column; min-width: 0; }
+.ac-set-user-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: hsl(var(--popover-foreground));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ac-set-user-sub { font-size: 11px; color: hsl(var(--muted-foreground)); }
+
+.ac-set-label {
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    color: hsl(var(--muted-foreground));
+    padding: 2px 8px 6px;
+}
+
+/* Segmented Light / Dark / System control. */
+.ac-theme-seg {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+    padding: 3px;
+    margin: 0 4px 6px;
+    background: hsl(var(--accent));
+    border-radius: 9px;
+}
+.ac-theme-opt {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 4px;
+    border: none;
+    background: transparent;
+    border-radius: 7px;
+    cursor: pointer;
+    color: hsl(var(--muted-foreground));
+    font-size: 11px;
+    font-weight: 600;
+    transition: background 0.1s ease-out, color 0.1s ease-out;
+}
+.ac-theme-opt svg { width: 16px; height: 16px; }
+.ac-theme-opt:hover { color: hsl(var(--foreground)); }
+.ac-theme-opt.ac-active {
+    background: hsl(var(--popover));
+    color: hsl(var(--foreground));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
+}
+
+.ac-set-sep { height: 1px; background: hsl(var(--border)); margin: 6px 4px; }
+
+/* Action rows (Logout). */
+.ac-set-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: calc(100% - 8px);
+    margin: 0 4px;
+    padding: 9px 10px;
+    border: none;
+    background: transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: left;
+    color: hsl(var(--popover-foreground));
+    font-size: 13px;
+    font-weight: 500;
+}
+.ac-set-row svg { flex: 0 0 auto; width: 16px; height: 16px; }
+.ac-set-row:hover { background: hsl(var(--accent)); }
+.ac-set-row.ac-set-danger { color: hsl(var(--destructive)); }
+.ac-set-row.ac-set-danger:hover {
+    background: color-mix(in oklab, hsl(var(--destructive)) 14%, transparent);
+}
+
+
+/* ============================================================
+ * Landing chooser cards (chat.js tags the two entry buttons
+ * data-ac-entry="create|validate"). The cl.Action label is the
+ * card title; the icon (::before) + description (::after) are
+ * added here so the first screen reads like a product chooser
+ * rather than two emoji chat buttons.
+ * ============================================================ */
+
+/* Lay the two cards out side by side, centered. Chainlit wraps the
+ * AskActionMessage buttons in a flex container — promote whichever
+ * element directly holds them to a centered, wrapping row. */
+div:has(> button[data-ac-entry]),
+div:has(> * > button[data-ac-entry]) {
+    display: flex !important;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: center;
+    align-items: stretch;
+    margin: 10px 0 6px;
+}
+
+button[data-ac-entry] {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    justify-content: flex-start !important;
+    gap: 10px !important;
+    width: 300px !important;
+    max-width: 44vw !important;
+    min-height: 158px !important;
+    padding: 22px 22px 20px !important;
+    border-radius: 16px !important;
+    border: 1px solid hsl(var(--border)) !important;
+    background: hsl(var(--popover)) !important;
+    color: hsl(var(--foreground)) !important;
+    font-size: 17px !important;
+    font-weight: 700 !important;
+    line-height: 1.25 !important;
+    text-align: left !important;
+    white-space: normal !important;
+    cursor: pointer !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
+    transition: transform 0.13s ease-out, box-shadow 0.13s ease-out,
+                border-color 0.13s ease-out !important;
+}
+button[data-ac-entry]:hover {
+    transform: translateY(-2px) !important;
+    border-color: hsl(var(--primary)) !important;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
+}
+
+/* Icon chip at the top of each card (monochrome, product-style). */
+button[data-ac-entry]::before {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    border-radius: 11px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1;
+    color: hsl(var(--primary));
+    background: color-mix(in oklab, hsl(var(--primary)) 14%, transparent);
+}
+button[data-ac-entry="create"]::before { content: "+"; }
+button[data-ac-entry="validate"]::before { content: "\2713"; }  /* ✓ */
+
+/* Description line under the title. */
+button[data-ac-entry]::after {
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.45;
+    color: hsl(var(--muted-foreground));
+    white-space: normal;
+}
+button[data-ac-entry="create"]::after {
+    content: "Design a new competition bundle from a one-line idea or a PDF proposal.";
+}
+button[data-ac-entry="validate"]::after {
+    content: "Check an existing bundle against the pre-launch validation criteria.";
+}
+
+
+/* ============================================================
+ * Codabench rebrand — blue accents + light-blue tints to match
+ * codabench.org (brand blue #06649e, link #4183c4, tint #f2faff).
+ * Overrides Chainlit's shadcn theme variables. login.css loads after
+ * Chainlit's bundle, so these win in both light and dark.
+ * ============================================================ */
+/* `:root:not(.dark)` (light) and `html.dark` are deliberately MORE specific
+ * than Chainlit's own `:root` / `.dark` so these win the cascade tie. */
+:root:not(.dark) {
+    --primary: 203 88% 34%;          /* Codabench blue */
+    --primary-foreground: 0 0% 100%;
+    --ring: 203 88% 34%;
+    --accent: 205 80% 93%;           /* light-blue tint */
+    --accent-foreground: 203 80% 26%;
+    --secondary: 205 70% 95%;
+    --secondary-foreground: 203 70% 26%;
+    --background: 208 45% 98.5%;     /* faint light-blue page tint */
+}
+html.dark {
+    --primary: 203 85% 56%;          /* brighter blue on dark */
+    --primary-foreground: 0 0% 100%;
+    --ring: 203 85% 56%;
+    --accent: 203 42% 22%;           /* deep blue-tinted accent */
+    --accent-foreground: 0 0% 96%;
+    --secondary: 203 28% 20%;
+    --secondary-foreground: 0 0% 96%;
+}
+
+
+/* ============================================================
+ * Persistent cost / context widget (chat.js) — bottom-left,
+ * always-visible session spend + context use with a budget bar.
+ * ============================================================ */
+#ac-cost-widget {
+    position: fixed;
+    left: 14px;
+    bottom: 14px;
+    z-index: 9000;
+    min-width: 152px;
+    padding: 8px 11px;
+    border-radius: 10px;
+    background: hsl(var(--popover));
+    border: 1px solid hsl(var(--border));
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+                 Roboto, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    color: hsl(var(--foreground));
+    user-select: none;
+    pointer-events: none;          /* informational; never blocks clicks */
+}
+.ac-cost-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.ac-cost-budget { font-weight: 600; white-space: nowrap; }
+.ac-cost-bar {
+    flex: 1;
+    height: 5px;
+    min-width: 36px;
+    border-radius: 999px;
+    background: hsl(var(--accent));
+    overflow: hidden;
+}
+.ac-cost-bar > i {
+    display: block;
+    height: 100%;
+    width: 0%;
+    background: hsl(var(--primary));
+    transition: width 0.4s ease-out, background 0.3s ease-out;
+}
+.ac-cost-ctx {
+    margin-top: 4px;
+    font-size: 11px;
+    color: hsl(var(--muted-foreground));
+}
+
+
+/* ============================================================
+ * Phase-pill custom tooltip + clickable "advance" pill (chat.js).
+ * ============================================================ */
+#ac-pill-tip {
+    position: fixed;
+    z-index: 100002;
+    max-width: 280px;
+    padding: 8px 11px;
+    border-radius: 8px;
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    border: 1px solid hsl(var(--border));
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+                 Roboto, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1.45;
+    white-space: pre-line;          /* render the \n\n in the tip text */
+    pointer-events: none;
+}
+#ac-pill-tip[hidden] { display: none; }
+
+/* The next-phase pill, once it can be entered: blue, pulsing, clickable. */
+.ac-pp-advance {
+    cursor: pointer !important;
+    color: #fff !important;
+    background: hsl(var(--primary)) !important;
+    border-color: hsl(var(--primary)) !important;
+    font-weight: 700 !important;
+    animation: ac-pp-advance-pulse 1.8s ease-in-out infinite;
+}
+.ac-pp-advance:hover { filter: brightness(1.12); }
+@keyframes ac-pp-advance-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.55); }
+    70%      { box-shadow: 0 0 0 6px hsl(var(--primary) / 0); }
+}

web/session_manager.py

@@ -277,17 +277,21 @@ class SessionManager:
     @staticmethod
     async def _ask_entry_mode() -> str:
         """Ask the user, upfront, which path they want. Returns 'create'|'validate'."""
+        # Labels are intentionally short, clean titles — the per-card
+        # description line + icon are added by CSS (login.css, keyed off the
+        # data-ac-entry tag chat.js sets), so the landing reads like a product
+        # chooser rather than two emoji chat buttons.
         res = await cl.AskActionMessage(
             content=(
-                "### Welcome to AutoCodabench\n\n"
-                "What would you like to do? (Start a **New Chat** any time to "
-                "switch.)"
+                "## AutoCodabench\n\n"
+                "Choose how you'd like to start. You can switch any time "
+                "with **New Chat**."
             ),
             actions=[
                 cl.Action(name="entry_mode", payload={"mode": "create"},
-                          label="🛠 Create a bundle from scratch (PDF optional)"),
+                          label="Create from scratch"),
                 cl.Action(name="entry_mode", payload={"mode": "validate"},
-                          label="✅ I have a bundle — validate it"),
+                          label="Validate a bundle"),
             ],
             timeout=900,
         ).send()
@@ -350,23 +354,55 @@ class SessionManager:
             content=f"_Model switched to **{label}** (`{model}`)._",
         ).send()
 
+    @staticmethod
+    def _meta_footer(pairs: list[tuple[str, str]]) -> str:
+        """A clean metadata chip row (session / model / budget …).
+
+        Rendered as inline-styled HTML — config enables unsafe_allow_html, and
+        inline styles (unlike CSS classes) survive Chainlit's HTML sanitiser.
+        Colours use the app's theme variables so it tracks light/dark.
+        """
+        chip = (
+            '<span style="display:inline-flex;align-items:center;gap:6px;'
+            'padding:3px 10px;border-radius:999px;background:hsl(var(--accent))">'
+            '<b style="font-size:10px;font-weight:600;text-transform:uppercase;'
+            'letter-spacing:.4px;opacity:.7">{k}</b>'
+            '<code style="font-family:ui-monospace,SFMono-Regular,monospace;'
+            'background:none;color:hsl(var(--foreground))">{v}</code></span>'
+        )
+        chips = "".join(chip.format(k=k, v=v) for k, v in pairs)
+        return (
+            '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;'
+            'padding-top:12px;border-top:1px solid hsl(var(--border));'
+            'font-size:12px">' + chips + "</div>"
+        )
+
     @staticmethod
     async def _send_create_greeting(session_id: str) -> None:
         """Option A greeting. Must contain the READY_PHRASE for the init-gate."""
+        model = cl.user_session.get("model") or DEFAULT_MODEL
         await cl.Message(
             content=(
-                "# AutoCodabench — create from scratch\n\n"
-                "Tell me a competition idea — a sentence is enough — and I'll "
-                "explore the design space with you, citing the literature as "
-                "we go. You can also drop a PDF / markdown design doc and I'll "
-                "fill in the gaps.\n\n"
-                "When the plan is ready I'll show a **▶ Proceed to Phase 2** "
-                "button. The phase bar at the top tracks your progress. Change "
-                "the **model** any time from the **⚙️ settings** by the message "
-                "box.\n\n"
-                f"_session `{session_id}` · model "
-                f"`{cl.user_session.get('model') or DEFAULT_MODEL}` · "
-                f"budget ${MAX_USD_PER_SESSION:.2f}_"
+                "## Create from scratch\n\n"
+                "Tell me a competition idea — a sentence is enough. I'll explore "
+                "the design space with you, cite the relevant literature, and "
+                "turn it into a plan. You can also drop a PDF or markdown design "
+                "doc and I'll fill in the gaps.\n\n"
+                "**Not sure where to start? Try one of these:**\n"
+                "- *A fair chest-X-ray pneumonia challenge, scored by balanced "
+                "accuracy with a penalty for performance gaps across age groups.*\n"
+                "- *Forecast next-day household energy use from smart-meter "
+                "history, ranked by MASE.*\n"
+                "- *Low-resource Swahili→English machine translation, evaluated "
+                "with chrF.*\n\n"
+                "When the plan is ready, a **▶ Proceed to Phase 2** button "
+                "appears. The bar above tracks your progress; switch models "
+                "anytime from **⚙ settings** by the message box.\n\n"
+                + SessionManager._meta_footer([
+                    ("session", session_id),
+                    ("model", model),
+                    ("budget", f"${MAX_USD_PER_SESSION:.2f}"),
+                ])
             ),
             author="autocodabench",
         ).send()
@@ -374,18 +410,29 @@ class SessionManager:
     @staticmethod
     async def _send_validate_greeting(session_id: str) -> None:
         """Option B greeting. Contains the attach-mode READY_PHRASE."""
+        model = cl.user_session.get("model") or DEFAULT_MODEL
         await cl.Message(
             content=(
-                f"# {PHASE_TITLE[PHASE_VALIDATE]} — validate an existing bundle\n\n"
-                "**Attach your bundle `.zip`** below and press send. I'll run "
-                "the autocodabench check framework against it — including a "
-                "Docker execution of the baseline (this can take several "
-                "minutes, and will pull the bundle's `docker_image` if needed) "
-                "— and write you a report.\n\n"
-                "_Typing is disabled until the bundle is validated; just attach "
-                "the file and send._\n\n"
-                f"_session `{session_id}` · LLM-judged checks use model "
-                f"`{cl.user_session.get('model') or DEFAULT_MODEL}`_"
+                "## Validate a bundle\n\n"
+                "**Attach your bundle `.zip`** below and press send. I'll run the "
+                "autocodabench checks against it — including a Docker execution "
+                "of the baseline (this can take a few minutes and may pull the "
+                "bundle's `docker_image`) — then write you a report.\n\n"
+                "_Typing stays disabled until validation runs — just attach the "
+                "file and send._\n\n"
+                "**Don't have a bundle handy?** Download this small example "
+                "competition, then attach it above to see validation in action:\n\n"
+                '<a href="/public/examples/example-bundle-survival.zip" download '
+                'target="_blank" style="display:inline-flex;align-items:center;'
+                'gap:8px;padding:9px 16px;border-radius:10px;'
+                'background:hsl(var(--primary));color:#fff;font-weight:600;'
+                'font-size:13px;text-decoration:none">&#11015; Download example '
+                'bundle <span style="opacity:.75;font-weight:400">survival '
+                '&middot; 80&nbsp;KB</span></a>\n\n'
+                + SessionManager._meta_footer([
+                    ("session", session_id),
+                    ("judge model", model),
+                ])
             ),
             author="autocodabench",
         ).send()

web/streaming.py

@@ -236,20 +236,47 @@ class TurnView:
         extra = f" · {self._status}" if self._status else ""
         return f"_Composing… {_blob(self._frame)} · {elapsed}s{extra}_"
 
+    def _flush_log_run(self, run: list[str]) -> str:
+        """Render a run of tool/step log lines.
+
+        While the turn is WORKING the steps stream live as plain lines. Once the
+        turn is done they collapse into a single hide/unhide ``<details>`` so the
+        final answer is what stands out — the user can expand to see every step.
+        (Inline styles, not classes, so they survive Chainlit's HTML sanitiser.)
+        """
+        if not run:
+            return ""
+        if self._working:
+            return "  \n".join(run)
+        n = len(run)
+        inner = "<br>".join(run)
+        return (
+            '<details style="margin:2px 0"><summary style="cursor:pointer;'
+            'color:hsl(var(--muted-foreground));font-size:13px;'
+            'user-select:none">🔧 '
+            f'{n} step{"s" if n != 1 else ""} · show / hide</summary>'
+            '<div style="font-family:ui-monospace,SFMono-Regular,monospace;'
+            'font-size:12px;color:hsl(var(--muted-foreground));'
+            f'margin:6px 0 4px;line-height:1.7">{inner}</div></details>'
+        )
+
     def _content(self) -> str:
-        # Consecutive log lines pack into one tight block (markdown hard breaks);
-        # narration/footer blocks stand alone so prose and tables render right.
+        # Consecutive log lines pack into one tight block (markdown hard breaks
+        # while live; a collapsed <details> once done); narration/footer blocks
+        # stand alone so prose and tables render right.
         blocks: list[str] = []
         run: list[str] = []
         for it in self._items:
             if it["kind"] == "log":
                 run.append(it["text"])
             else:
-                if run:
-                    blocks.append("  \n".join(run)); run = []
+                block = self._flush_log_run(run); run = []
+                if block:
+                    blocks.append(block)
                 blocks.append(it["text"])
-        if run:
-            blocks.append("  \n".join(run))
+        block = self._flush_log_run(run)
+        if block:
+            blocks.append(block)
         tail = self._tail()
         if tail:
             blocks.append(tail)
@@ -455,25 +482,34 @@ async def run_agent_turn(
                 cl.user_session.set("cum_cost_usd", cum)
 
                 usage = getattr(message, "usage", None) or {}
-                if isinstance(usage, dict):
-                    in_tok  = int(usage.get("input_tokens")  or 0)
-                    out_tok = int(usage.get("output_tokens") or 0)
-                else:
-                    in_tok  = int(getattr(usage, "input_tokens",  0) or 0)
-                    out_tok = int(getattr(usage, "output_tokens", 0) or 0)
+
+                def _u(key: str) -> int:
+                    v = usage.get(key) if isinstance(usage, dict) else getattr(usage, key, 0)
+                    return int(v or 0)
+
+                # The context gauge needs the FULL prompt size. With prompt
+                # caching, `input_tokens` alone is just the handful of uncached
+                # tokens (e.g. 12), so it read ~0% even on a long conversation —
+                # add the cached portion (read + creation) back in.
+                in_tok  = (_u("input_tokens")
+                           + _u("cache_read_input_tokens")
+                           + _u("cache_creation_input_tokens"))
+                out_tok = _u("output_tokens")
                 log.info("[turn] ResultMessage cost=$%.4f cum=$%.4f in_tok=%d out_tok=%d", cost, cum, in_tok, out_tok)
                 if in_tok:
                     cl.user_session.set("last_input_tokens", in_tok)
                 if out_tok:
                     cl.user_session.set("last_output_tokens", out_tok)
 
+                # Refresh phase_state.json so the always-visible cost/context
+                # widget (chat.js, fed by the phase_state poll) shows live
+                # numbers. The per-turn line is no longer printed inline.
                 if cost or in_tok:
-                    ctx_pct = 100.0 * in_tok / CONTEXT_WINDOW_TOKENS if in_tok else 0.0
-                    await view.add_block(
-                        f"_turn ≈ ${cost:.3f} · session "
-                        f"${cum:.2f} / ${MAX_USD_PER_SESSION:.2f} · "
-                        f"ctx {ctx_pct:.1f}% ({in_tok:,} tok)_"
-                    )
+                    try:
+                        from phase_manager import PhaseManager
+                        PhaseManager.write_state(run_dir)
+                    except Exception:
+                        log.debug("[turn] phase_state cost refresh failed", exc_info=True)
 
                 user = cl.user_session.get("user")
                 CostLog.append(