Upload folder using huggingface_hub

README.md

@@ -1,13 +1,73 @@
 ---
-title: Localagent Webgpu
-emoji: 📉
-colorFrom: yellow
-colorTo: blue
-sdk: gradio
-sdk_version: 6.17.3
-python_version: '3.13'
-app_file: app.py
+title: LocalAgent Tool Calling (WebGPU)
+emoji: 🛠️
+colorFrom: indigo
+colorTo: purple
+sdk: static
 pinned: false
+license: mit
+short_description: Sub-100M from-scratch tool-calling agent in the browser
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LocalAgent — tool calling in the browser (WebGPU)
+
+A **28M-parameter, pretrained-from-scratch** byte-level agent that does **grounded tool
+calling** and **multi-step planning** — running **entirely in your browser** on
+[onnxruntime-web](https://onnxruntime.ai/docs/tutorials/web/) with the **WebGPU** backend
+(WASM fallback when WebGPU is unavailable). No server, no API key; the model is downloaded once
+and cached.
+
+Model: [`SangbumChoi/localagent-tiny-30m-byte`](https://huggingface.co/SangbumChoi/localagent-tiny-30m-byte).
+Source: [LocalAgent](https://github.com/sangbumchoi/localagent).
+
+## What it shows
+
+- **Tool selection** — the model's *real* `tool_head` decision (a linear head on the ONNX
+  `hidden` output) over the 21-tool surface, with a confidence score, plus **abstention** when no
+  tool fits.
+- **Grounded arguments** — arguments copied from spans of your prompt, so the emitted call is
+  schema-valid by construction.
+- **Multi-step plans** — the learned `plan_rollout`: pick a tool → ground it → feed back a
+  simulated response → pick the next, until the model emits the *stop* (`text`) class.
+
+## How it runs (honest version)
+
+The transformer forward pass runs on **WebGPU** via an exported ONNX graph that emits both `logits`
+and the last `hidden` state. The **tool head** (one matmul + argmax over `hidden`), the
+**argument grounding**, and the **planner loop** are light JavaScript on top — a faithful port of
+the Python `tool_head` / grounding / `plan_rollout`. Arg grounding in-browser covers the common
+formats (paths, URLs, quoted strings, names, numbers); the full Python grounder is the source of
+truth. First load fetches `model.fp16.onnx` (~tens of MB) and caches it.
+
+## Files
+- `index.html` / `style.css` — the UI shell.
+- `app.js` — byte tokenizer, onnxruntime-web session (WebGPU + WASM fallback), tool selection,
+  grounding, and the planner rollout.
+- `model.fp16.onnx`, `heads.json`, `meta.json` — the exported inference bundle (**not in the
+  source repo**; they are deploy artifacts).
+
+## Deploy
+The model bundle is produced from a trained checkpoint, separately from the source tree:
+
+```bash
+python -c "from localagent.inference.export.to_onnx import export_web; \
+           export_web('runs/tiny-30m-byte-best.pt', 'runs/web_export')"
+```
+
+Then upload **the four static files + the three bundle files** into a Hugging Face Space repo
+(`sdk: static`), all at the repo root, using git-lfs for the large ones:
+
+```bash
+huggingface-cli upload <user>/localagent-webgpu spaces/localagent-webgpu/ . --repo-type space
+huggingface-cli upload <user>/localagent-webgpu runs/web_export/model.fp16.onnx model.fp16.onnx --repo-type space
+huggingface-cli upload <user>/localagent-webgpu runs/web_export/heads.json heads.json --repo-type space
+huggingface-cli upload <user>/localagent-webgpu runs/web_export/meta.json meta.json --repo-type space
+```
+
+`app.js` fetches `model.fp16.onnx` / `heads.json` / `meta.json` relative to the page, so they must
+sit next to `index.html`. The export was verified for onnxruntime-CPU↔PyTorch parity
+(max |Δlogits| 7.6e-6; fp16 drift 1.4e-3, same tool argmax) and the in-browser tool-selection +
+pointer-grounding math was checked against the bundle (`get_weather{city:"Paris"}`,
+`read_file{path:"tests/test_api.py"}`, …). The graph is all standard opset-17 ops; onnxruntime-web
+falls back per-op to WASM for any op without a WebGPU kernel (`Trilu`/`Tile`/`Expand`), with
+identical results.

app.js

@@ -0,0 +1,243 @@
+/* LocalAgent — in-browser tool calling on onnxruntime-web (WebGPU + WASM fallback).
+ *
+ * The transformer forward pass runs as an ONNX graph emitting `logits` and `hidden`.
+ * The tool head, argument grounding, and the planner rollout are ported here from the Python
+ * `tool_head` / grounding / `plan_rollout`. Bundle contract (see localagent.inference.export):
+ *   model.fp16.onnx  inputs: input_ids[int64, 1xT]  outputs: logits[1,T,256], hidden[1,T,d]
+ *   heads.json       { tool_head:{weight:[C][d], bias:[C], classes:[C], stop_index:int}, ... }
+ *   meta.json        { vocab_size, d_model, pad_id, markers:{...}, tools:[{name,args,schema}], tool_classes }
+ */
+
+const MODEL_URL = "model.fp16.onnx";
+let SESSION = null;
+let HEADS = null;
+let META = null;
+let BACKEND = "wasm";
+
+// ---- bundle loading -------------------------------------------------------
+async function loadBundle() {
+  ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/";
+  [HEADS, META] = await Promise.all([
+    fetch("heads.json").then((r) => r.json()),
+    fetch("meta.json").then((r) => r.json()),
+  ]);
+  try {
+    SESSION = await ort.InferenceSession.create(MODEL_URL, {
+      executionProviders: ["webgpu", "wasm"],
+    });
+    BACKEND = "webgpu";
+  } catch (e) {
+    console.warn("WebGPU unavailable, falling back to WASM:", e);
+    SESSION = await ort.InferenceSession.create(MODEL_URL, { executionProviders: ["wasm"] });
+    BACKEND = "wasm";
+  }
+}
+
+// ---- byte tokenizer (vocab 256) ------------------------------------------
+// Markers are literal strings encoded as UTF-8 bytes — identical to the Python byte tokenizer.
+const enc = new TextEncoder();
+function bytesOf(s) { return Array.from(enc.encode(s)); }
+function mark(name) { return META.markers[name].text; } // markers carry { text, ids }
+
+// Render a user turn the way the model was trained / `plan_rollout` renders it.
+function renderContext(query, steps) {
+  let s = mark("user") + query + mark("assistant");
+  for (const st of steps || []) {
+    s += mark("tool_call_open") + st.tool + "(" + JSON.stringify(st.args) + ")" + mark("tool_call_close");
+    s += mark("tool") + mark("tool_response_open") + (st.response || "ok") + mark("tool_response_close");
+    s += mark("assistant");
+  }
+  return bytesOf(s);
+}
+
+// ---- model forward --------------------------------------------------------
+async function forward(ids) {
+  const arr = BigInt64Array.from(ids.map((x) => BigInt(x)));
+  const input = new ort.Tensor("int64", arr, [1, ids.length]);
+  const out = await SESSION.run({ input_ids: input });
+  return out; // { logits, hidden }
+}
+
+// ---- tool head (linear on the last hidden vector) -------------------------
+function softmaxArgmax(logits) {
+  let m = -Infinity;
+  for (const v of logits) m = Math.max(m, v);
+  let z = 0;
+  const p = logits.map((v) => { const e = Math.exp(v - m); z += e; return e; });
+  let bi = 0;
+  for (let i = 1; i < p.length; i++) if (p[i] > p[bi]) bi = i;
+  return { index: bi, conf: p[bi] / z };
+}
+
+function selectTool(hiddenTensor, T) {
+  const d = META.d_model;
+  const H = hiddenTensor.data;            // Float32Array length T*d
+  const off = (T - 1) * d;                // last position
+  const last = H.subarray ? H.subarray(off, off + d) : Array.from(H).slice(off, off + d);
+  const { weight, bias, classes, stop_index } = HEADS.tool_head;
+  const logits = new Array(classes.length);
+  for (let c = 0; c < classes.length; c++) {
+    let acc = bias[c];
+    const Wc = weight[c];
+    for (let k = 0; k < d; k++) acc += Wc[k] * last[k];
+    logits[c] = acc;
+  }
+  const { index, conf } = softmaxArgmax(logits);
+  return { name: classes[index], index, conf, isStop: index === stop_index };
+}
+
+// ---- argument grounding via the learned pointer head (port of pointer_head) ----
+// For each copy-arg of the chosen tool, compute start/end span logits over the input positions
+// and slice the value out of the prompt bytes — identical math to the PyTorch pointer head:
+//   q = arg_emb[arg_idx[arg]];  qs = start_W·q;  qe = end_W·q
+//   start = argmax_t hidden[t]·qs;  end = argmax_{t>=start} hidden[t]·qe;  value = bytes[start..end]
+function matvec(M, v) {                 // M [d][d] · v [d] -> [d]
+  const d = v.length, out = new Float32Array(d);
+  for (let i = 0; i < d; i++) { const Mi = M[i]; let a = 0; for (let j = 0; j < d; j++) a += Mi[j] * v[j]; out[i] = a; }
+  return out;
+}
+function dotAt(H, t, d, q) {             // hidden[t] · q
+  const off = t * d; let a = 0;
+  for (let k = 0; k < d; k++) a += H[off + k] * q[k];
+  return a;
+}
+function pointerSpan(arg, ids, H, T) {
+  const ph = HEADS.pointer_head, d = META.d_model;
+  const ai = ph.arg_idx[arg];
+  if (ai == null) return "";
+  const qs = matvec(ph.start_W, ph.arg_emb[ai]);
+  const qe = matvec(ph.end_W, ph.arg_emb[ai]);
+  let s = 0, sb = -Infinity;
+  for (let t = 0; t < T; t++) { const v = dotAt(H, t, d, qs); if (v > sb) { sb = v; s = t; } }
+  let e = s, eb = -Infinity;
+  for (let t = s; t < T; t++) { const v = dotAt(H, t, d, qe); if (v > eb) { eb = v; e = t; } }
+  try { return new TextDecoder().decode(new Uint8Array(ids.slice(s, e + 1))); } catch { return ""; }
+}
+function groundArgs(tool, ids, hiddenTensor, T) {
+  const spec = (META.tools || []).find((t) => t.name === tool);
+  const args = {};
+  if (!spec) return args;
+  const H = hiddenTensor.data;
+  for (const arg of spec.args || []) {
+    args[arg] = HEADS.pointer_head.arg_idx[arg] != null ? pointerSpan(arg, ids, H, T) : "";
+  }
+  return args;
+}
+
+// ---- single grounded call -------------------------------------------------
+async function callOnce(query) {
+  const ids = renderContext(query, []);
+  const t0 = performance.now();
+  const out = await forward(ids);
+  const sel = selectTool(out.hidden, ids.length);
+  const ms = performance.now() - t0;
+  if (sel.isStop) return { abstain: true, conf: sel.conf, ms };
+  return { tool: sel.name, args: groundArgs(sel.name, ids, out.hidden, ids.length), conf: sel.conf, ms };
+}
+
+// ---- planner rollout (port of plan_rollout) -------------------------------
+async function planRollout(query, maxSteps = 4) {
+  const steps = [];
+  const t0 = performance.now();
+  for (let i = 0; i < maxSteps; i++) {
+    const ids = renderContext(query, steps);
+    const out = await forward(ids);
+    const sel = selectTool(out.hidden, ids.length);
+    if (sel.isStop) break;
+    const args = groundArgs(sel.name, ids, out.hidden, ids.length);
+    steps.push({ tool: sel.name, args, conf: sel.conf, response: simResponse(sel.name, args) });
+  }
+  return { steps, ms: performance.now() - t0 };
+}
+
+// A compact simulated tool response so downstream steps have context (mirrors _sim_response).
+function simResponse(tool, args) {
+  if (/read_file|grep/.test(tool)) return Object.values(args)[0] || "ok";
+  if (/search|news/.test(tool)) return "result: " + (args.query || "");
+  return "ok";
+}
+
+// ---- UI -------------------------------------------------------------------
+const $ = (id) => document.getElementById(id);
+
+function setStatus(cls, text, backend) {
+  const s = $("status");
+  s.className = "status " + cls;
+  $("status-text").textContent = text;
+  const b = $("backend-badge");
+  if (backend) { b.hidden = false; b.textContent = backend.toUpperCase(); }
+}
+
+function renderCall(step, idx) {
+  const div = document.createElement("div");
+  div.className = "call" + (step.abstain ? " abstain" : "");
+  const conf = step.conf != null ? `<span class="conf">${(step.conf * 100).toFixed(0)}%</span>` : "";
+  if (step.abstain) {
+    div.innerHTML = `${conf}<span class="tool">— abstains (no tool needed)</span>`;
+  } else {
+    const ix = idx != null ? `<span class="step-index">${idx + 1}.</span>` : "";
+    div.innerHTML = `${conf}${ix}<span class="tool">${step.tool}</span>` +
+      `<pre>${JSON.stringify(step.args, null, 2)}</pre>`;
+  }
+  return div;
+}
+
+async function run() {
+  const query = $("prompt").value.trim();
+  if (!query || !SESSION) return;
+  $("run").disabled = true;
+  const res = $("result");
+  res.hidden = false;
+  res.innerHTML = '<div class="call"><span class="tool">…thinking</span></div>';
+  try {
+    if ($("plan-mode").checked) {
+      const { steps, ms } = await planRollout(query);
+      res.innerHTML = "";
+      if (!steps.length) res.appendChild(renderCall({ abstain: true }));
+      steps.forEach((s, i) => res.appendChild(renderCall(s, i)));
+      const t = document.createElement("div");
+      t.className = "timing";
+      t.textContent = `${steps.length} step(s) · ${ms.toFixed(0)} ms · ${BACKEND}`;
+      res.appendChild(t);
+    } else {
+      const out = await callOnce(query);
+      res.innerHTML = "";
+      res.appendChild(renderCall(out));
+      const t = document.createElement("div");
+      t.className = "timing";
+      t.textContent = `${out.ms.toFixed(0)} ms · ${BACKEND}`;
+      res.appendChild(t);
+    }
+  } catch (e) {
+    res.innerHTML = `<div class="call abstain"><span class="tool">error</span><pre>${e}</pre></div>`;
+  } finally {
+    $("run").disabled = false;
+  }
+}
+
+function wireUI() {
+  $("run").addEventListener("click", run);
+  $("prompt").addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") run();
+  });
+  document.querySelectorAll(".chip").forEach((c) => {
+    c.addEventListener("click", () => {
+      $("prompt").value = c.textContent;
+      $("plan-mode").checked = c.dataset.plan === "1";
+      run();
+    });
+  });
+}
+
+(async function main() {
+  wireUI();
+  try {
+    setStatus("loading", "Loading model… (first load downloads & caches the weights)");
+    await loadBundle();
+    setStatus("ready", "Model ready — runs locally in your browser.", BACKEND);
+    $("run").disabled = false;
+  } catch (e) {
+    console.error(e);
+    setStatus("error", "Failed to load the model bundle: " + e.message);
+  }
+})();

index.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>LocalAgent — Tool Calling (WebGPU)</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main>
+    <header>
+      <h1>🛠️ LocalAgent <span class="sub">tool calling in your browser</span></h1>
+      <p class="tagline">
+        A <strong>28M-param, from-scratch</strong> byte-level agent. The transformer runs on
+        <strong>WebGPU</strong> (<code>onnxruntime-web</code>); the tool head, grounding, and the
+        planner loop are light JS. <a href="https://huggingface.co/SangbumChoi/localagent-tiny-30m-byte" target="_blank" rel="noopener">model</a> ·
+        <a href="https://github.com/sangbumchoi/localagent" target="_blank" rel="noopener">code</a>
+      </p>
+    </header>
+
+    <section id="status" class="status loading">
+      <span class="dot"></span>
+      <span id="status-text">Loading model…</span>
+      <span id="backend-badge" class="badge" hidden></span>
+    </section>
+
+    <section class="io">
+      <label for="prompt">Your request</label>
+      <textarea id="prompt" rows="2" placeholder="e.g. What's the weather in Paris?"></textarea>
+
+      <div class="row">
+        <label class="switch">
+          <input type="checkbox" id="plan-mode" />
+          <span>Multi-step plan (planner rollout)</span>
+        </label>
+        <button id="run" disabled>Run</button>
+      </div>
+
+      <div class="examples">
+        <span>Try:</span>
+        <button class="chip" data-plan="0">What's the weather in Paris?</button>
+        <button class="chip" data-plan="0">Move src/app.py to backup/app.py.</button>
+        <button class="chip" data-plan="0">Send an email to Greta.</button>
+        <button class="chip" data-plan="0">How tall is Mount Everest?</button>
+        <button class="chip" data-plan="1">Read tests/test_api.py, run the tests, then commit.</button>
+        <button class="chip" data-plan="1">Search the web for the news, then save it to Notion.</button>
+      </div>
+    </section>
+
+    <section id="result" class="result" hidden></section>
+
+    <footer>
+      <p>
+        Runs fully client-side — the model is fetched once and cached. Arg grounding in-browser
+        covers common formats; the Python grounder is the source of truth. No data leaves your
+        device.
+      </p>
+    </footer>
+  </main>
+
+  <!-- onnxruntime-web (WASM + WebGPU execution providers) -->
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.webgpu.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

meta.json

@@ -0,0 +1 @@
+{"vocab_size": 256, "d_model": 512, "pad_id": 0, "eos_id": 0, "encoding": "utf-8-bytes", "markers": {"user": {"text": "<|user|>", "ids": [60, 124, 117, 115, 101, 114, 124, 62]}, "assistant": {"text": "<|assistant|>", "ids": [60, 124, 97, 115, 115, 105, 115, 116, 97, 110, 116, 124, 62]}, "tool": {"text": "<|tool|>", "ids": [60, 124, 116, 111, 111, 108, 124, 62]}, "tool_call_open": {"text": "<tool_call>", "ids": [60, 116, 111, 111, 108, 95, 99, 97, 108, 108, 62]}, "tool_call_close": {"text": "</tool_call>", "ids": [60, 47, 116, 111, 111, 108, 95, 99, 97, 108, 108, 62]}, "tool_response_open": {"text": "<tool_response>", "ids": [60, 116, 111, 111, 108, 95, 114, 101, 115, 112, 111, 110, 115, 101, 62]}, "tool_response_close": {"text": "</tool_response>", "ids": [60, 47, 116, 111, 111, 108, 95, 114, 101, 115, 112, 111, 110, 115, 101, 62]}}, "tools": [{"name": "get_weather", "description": "Get the current weather for a city.", "args": ["city", "unit"], "schema": {"type": "object", "properties": {"city": {"type": "string"}, "unit": {"type": "string", "enum": ["c", "f"]}}, "required": ["city"]}}, {"name": "calculator", "description": "Evaluate an arithmetic expression.", "args": ["expression"], "schema": {"type": "object", "properties": {"expression": {"type": "string", "format": "arithmetic"}}, "required": ["expression"]}}, {"name": "web_search", "description": "Search the web.", "args": ["query", "k"], "schema": {"type": "object", "properties": {"query": {"type": "string"}, "k": {"type": "integer"}}, "required": ["query"]}}, {"name": "planner", "description": "Make a plan to achieve a goal.", "args": ["goal"], "schema": {"type": "object", "properties": {"goal": {"type": "string"}}, "required": ["goal"]}}, {"name": "define", "description": "Define a term.", "args": ["term"], "schema": {"type": "object", "properties": {"term": {"type": "string"}}, "required": ["term"]}}, {"name": "play_music", "description": "Play a song.", "args": ["song"], "schema": {"type": "object", "properties": {"song": {"type": "string"}}, "required": ["song"]}}, {"name": "get_news", "description": "Get news on a topic.", "args": ["topic"], "schema": {"type": "object", "properties": {"topic": {"type": "string"}}, "required": ["topic"]}}, {"name": "read_file", "description": "Read a file.", "args": ["path"], "schema": {"type": "object", "properties": {"path": {"type": "string", "format": "path"}}, "required": ["path"]}}, {"name": "write_file", "description": "Create or write a file.", "args": ["path"], "schema": {"type": "object", "properties": {"path": {"type": "string", "format": "path"}}, "required": ["path"]}}, {"name": "grep_search", "description": "Search the codebase for a pattern.", "args": ["pattern"], "schema": {"type": "object", "properties": {"pattern": {"type": "string", "format": "quoted"}}, "required": ["pattern"]}}, {"name": "run_command", "description": "Run a shell command.", "args": ["command"], "schema": {"type": "object", "properties": {"command": {"type": "string", "format": "quoted"}}, "required": ["command"]}}, {"name": "git_commit", "description": "Make a git commit.", "args": ["message"], "schema": {"type": "object", "properties": {"message": {"type": "string", "format": "quoted"}}, "required": ["message"]}}, {"name": "run_tests", "description": "Run the test suite.", "args": [], "schema": {"type": "object", "properties": {}, "required": []}}, {"name": "set_reminder", "description": "Set a reminder for a task.", "args": ["task"], "schema": {"type": "object", "properties": {"task": {"type": "string"}}, "required": ["task"]}}, {"name": "set_timer", "description": "Set a timer for a duration.", "args": ["duration"], "schema": {"type": "object", "properties": {"duration": {"type": "string"}}, "required": ["duration"]}}, {"name": "calendar_event", "description": "Create a Google Calendar event.", "args": ["title"], "schema": {"type": "object", "properties": {"title": {"type": "string", "format": "quoted"}}, "required": ["title"]}}, {"name": "send_email", "description": "Send an email to someone.", "args": ["recipient"], "schema": {"type": "object", "properties": {"recipient": {"type": "string"}}, "required": ["recipient"]}}, {"name": "open_url", "description": "Open a URL in the web browser.", "args": ["url"], "schema": {"type": "object", "properties": {"url": {"type": "string", "format": "url"}}, "required": ["url"]}}, {"name": "notion_write", "description": "Write a note in Notion.", "args": ["content"], "schema": {"type": "object", "properties": {"content": {"type": "string", "format": "quoted"}}, "required": ["content"]}}, {"name": "slack_send", "description": "Send a Slack message.", "args": ["message"], "schema": {"type": "object", "properties": {"message": {"type": "string", "format": "quoted"}}, "required": ["message"]}}, {"name": "jira_issue", "description": "Create a Jira issue.", "args": ["summary"], "schema": {"type": "object", "properties": {"summary": {"type": "string", "format": "quoted"}}, "required": ["summary"]}}], "tool_classes": ["get_weather", "calculator", "web_search", "planner", "define", "play_music", "get_news", "read_file", "write_file", "grep_search", "run_command", "git_commit", "run_tests", "set_reminder", "set_timer", "calendar_event", "send_email", "open_url", "notion_write", "slack_send", "jira_issue", "text"]}

model.fp16.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3d21b07579fd496b86d5b92157567eae59e98249afcdea728d349e13e89dfa76
+size 57468760

style.css

@@ -0,0 +1,88 @@
+:root {
+  --bg: #0f1020;
+  --panel: #1a1b35;
+  --panel-2: #232450;
+  --fg: #e8e8f2;
+  --muted: #9a9ac0;
+  --accent: #8b7cff;
+  --accent-2: #5ad1c0;
+  --ok: #5ad17a;
+  --warn: #ffcc66;
+  --err: #ff7a90;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: radial-gradient(1200px 600px at 70% -10%, #2a2350 0%, var(--bg) 60%);
+  color: var(--fg);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  line-height: 1.5;
+}
+
+main { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
+
+header h1 { font-size: 1.7rem; margin: 0 0 4px; }
+header h1 .sub { font-size: 0.95rem; color: var(--muted); font-weight: 400; }
+.tagline { color: var(--muted); margin: 0 0 20px; font-size: 0.92rem; }
+.tagline a { color: var(--accent-2); text-decoration: none; }
+.tagline a:hover { text-decoration: underline; }
+
+.status {
+  display: flex; align-items: center; gap: 10px;
+  background: var(--panel); border: 1px solid var(--panel-2);
+  border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 18px;
+}
+.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none; }
+.status.loading .dot { background: var(--warn); animation: pulse 1.2s infinite; }
+.status.ready .dot { background: var(--ok); }
+.status.error .dot { background: var(--err); }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+.badge {
+  margin-left: auto; font-family: var(--mono); font-size: 0.75rem;
+  background: var(--panel-2); padding: 2px 8px; border-radius: 6px; color: var(--accent-2);
+}
+
+.io label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
+textarea {
+  width: 100%; background: var(--panel); color: var(--fg);
+  border: 1px solid var(--panel-2); border-radius: 10px; padding: 12px 14px;
+  font-size: 1rem; resize: vertical; font-family: inherit;
+}
+textarea:focus { outline: none; border-color: var(--accent); }
+
+.row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; gap: 12px; }
+.switch { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--fg); cursor: pointer; }
+.switch input { accent-color: var(--accent); width: 16px; height: 16px; }
+
+button#run {
+  background: var(--accent); color: #11102a; border: none; font-weight: 600;
+  padding: 10px 22px; border-radius: 10px; font-size: 0.95rem; cursor: pointer;
+}
+button#run:disabled { opacity: 0.45; cursor: not-allowed; }
+button#run:not(:disabled):hover { filter: brightness(1.08); }
+
+.examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
+.examples span { color: var(--muted); font-size: 0.82rem; }
+.chip {
+  background: var(--panel); color: var(--fg); border: 1px solid var(--panel-2);
+  border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer;
+}
+.chip:hover { border-color: var(--accent); color: #fff; }
+
+.result { margin-top: 22px; }
+.call {
+  background: var(--panel); border: 1px solid var(--panel-2); border-left: 3px solid var(--accent-2);
+  border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
+}
+.call .tool { font-family: var(--mono); font-size: 1rem; color: var(--accent-2); }
+.call .conf { float: right; color: var(--muted); font-size: 0.8rem; font-family: var(--mono); }
+.call pre { margin: 8px 0 0; font-family: var(--mono); font-size: 0.85rem; color: var(--fg); white-space: pre-wrap; }
+.call.abstain { border-left-color: var(--warn); }
+.call.abstain .tool { color: var(--warn); }
+.step-index { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; margin-right: 6px; }
+.timing { color: var(--muted); font-size: 0.78rem; margin-top: 6px; font-family: var(--mono); }
+
+footer { margin-top: 36px; color: var(--muted); font-size: 0.78rem; }