semif-api-rocm

app.js (33299B)

---

 /* semif-api web UI — plain DOM, no dependencies.
  *
  * Conventions that matter:
  *   - Option rows and decision cards are UNCONTROLLED: the DOM is the source of
  *     truth and is read on submit. Nothing re-renders a list from state, so
  *     focus and caret survive typing.
  *   - Every string that comes from the API or from user input is written with
  *     textContent. innerHTML is never used with interpolated data.
  */
 "use strict";
 
 const $ = (sel, root) => (root || document).querySelector(sel);
 const el = (tag, cls, text) => {
   const node = document.createElement(tag);
   if (cls) node.className = cls;
   if (text !== undefined && text !== null) node.textContent = text;
   return node;
 };
 const clear = (node) => { while (node.firstChild) node.removeChild(node.firstChild); };
 
 const MAX_OPTIONS = 16;
 const DRAFT_KEY = "semif-ui-draft-v1";
 
 /* ── numeric helpers ───────────────────────────────────────────────── */
 
 const argmax = (values) =>
   values.reduce((best, value, i) => (value > values[best] ? i : best), 0);
 const p4 = (value) => (typeof value === "number" ? value.toFixed(4) : String(value));
 const p3 = (value) => (typeof value === "number" ? value.toFixed(3) : String(value));
 const ms = (seconds) =>
   typeof seconds === "number" ? (seconds * 1000).toFixed(0) + " ms" : "—";
 
 /* ── HTTP ──────────────────────────────────────────────────────────── */
 
 async function api(path, body) {
   const started = performance.now();
   let response;
   try {
     response = await fetch(path, {
       method: body ? "POST" : "GET",
       headers: body ? { "Content-Type": "application/json" } : undefined,
       body: body ? JSON.stringify(body) : undefined,
     });
   } catch (networkError) {
     return { ok: false, kind: "network", text:
       "Could not reach " + location.origin + path + " — the server is down, or the request went to the wrong origin." };
   }
   const elapsedMs = performance.now() - started;
   let payload = null;
   const raw = await response.text();
   try { payload = raw ? JSON.parse(raw) : null; } catch (_) { payload = null; }
   if (!response.ok) return { ok: false, kind: response.status >= 500 ? "server" : "client",
                              status: response.status, payload: payload, raw: raw, elapsedMs: elapsedMs };
   if (payload === null) return { ok: false, kind: "client", status: response.status,
                                  text: "Response was not JSON (" + raw.slice(0, 200) + ")" };
   return { ok: true, payload: payload, elapsedMs: elapsedMs };
 }
 
 /* FastAPI returns two different 422 shapes and both are part of the contract:
  * a plain string from the upstream validate_row messages, and pydantic's list
  * of {loc, msg} objects for malformed bodies. Handle both.               */
 function errorText(outcome) {
   if (outcome.text) return outcome.text;
   const detail = outcome.payload && outcome.payload.detail;
   if (typeof detail === "string") return detail;
   if (Array.isArray(detail)) {
     const lines = detail.map((item) => {
       const loc = Array.isArray(item.loc) ? item.loc.filter((p) => p !== "body").join(".") : "";
       return (loc ? loc + ": " : "") + (item.msg || JSON.stringify(item));
     });
     return "Request body rejected:\n" + lines.join("\n");
   }
   if (outcome.kind === "server") {
     return "HTTP " + outcome.status + " from the server -- an unexpected fault, not a rejected " +
       "input. Input problems come back as 422 with the upstream message; if a long state or " +
       "duplicate batch ids landed here instead, the server predates that mapping. The reason is " +
       "in the server log:\n" +
       "  journalctl -u semif-api -n 40     # systemd\n" +
       "  tail -n 40 uvicorn.log            # dev shell";
   }
   return "HTTP " + outcome.status + (outcome.raw ? "\n" + outcome.raw.slice(0, 400) : "");
 }
 
 /* ── client-side mirror of upstream validate_row ───────────────────────
  * Mirrors semif_phase1.core.validate_row so an obvious mistake is instant
  * instead of a round trip. The server stays the authority: whatever passes
  * here is still sent and its 422 is still displayed.                    */
 function validateRow(row, label) {
   const problems = [];
   if (!row.id) problems.push(label + ": id must be a nonempty string");
   if (!row.question) problems.push(label + ": question must be a nonempty string");
   const state = row.state;
   const stateEmpty = typeof state === "string" ? !state : !(state && Object.keys(state).length);
   if (stateEmpty) problems.push(label + ": state must be a nonempty string, object, or array");
   const n = row.options.length;
   if (n < 2 || n > MAX_OPTIONS) problems.push(label + ": options must contain 2-16 entries (have " + n + ")");
   if (!row.options.every((o) => o.id && o.description)) problems.push(label + ": each option needs id and description");
   const ids = row.options.map((o) => o.id);
   if (new Set(ids).size !== ids.length) problems.push(label + ": option ids must be unique");
   return problems;
 }
 
 /* Rough token guard: the browser cannot tokenize, so this is deliberately
  * worded as an estimate. It exists because encode_prompt rejects an over-budget
  * prompt before any scoring happens -- warning first saves a round trip and
  * explains a rejection you would otherwise have to go find.               */
 function stateWarning(chars, maxTokens) {
   if (!maxTokens || !chars) return "";
   const estimate = Math.round(chars / 3);
   if (estimate > maxTokens * 0.8) {
     return "~" + estimate + " estimated input tokens against a " + maxTokens +
       " limit. Long states are rejected without truncation — trim the evidence or raise SEMIF_MAX_TOKENS.";
   }
   return "";
 }
 
 /* ── option rows (uncontrolled) ───────────────────────────────────── */
 
 function makeOptionRow(idValue, descValue) {
   const row = el("div", "option-row");
   const id = el("input", "mono opt-id");
   id.value = idValue || "";
   id.placeholder = "id";
   id.setAttribute("aria-label", "option id");
   const desc = el("input", "opt-desc");
   desc.value = descValue || "";
   desc.placeholder = "description — a complete, independent restatement of the option";
   desc.setAttribute("aria-label", "option description");
   const remove = el("button", "ghost remove-option", "×");
   remove.type = "button";
   remove.title = "Remove option";
   remove.addEventListener("click", () => {
     row.remove();
     scheduleDraftSave();
   });
   row.append(id, desc, remove);
   return row;
 }
 
 const optionHost = (form) => $(".options", form);
 const readOptions = (form) =>
   Array.from(optionHost(form).children).map((row) => ({
     id: $(".opt-id", row).value.trim(),
     description: $(".opt-desc", row).value.trim(),
   }));
 const fillOptions = (form, options) => {
   const host = optionHost(form);
   clear(host);
   options.forEach((option) => host.appendChild(makeOptionRow(option.id, option.description)));
 };
 
 /* ── batch decision cards (also uncontrolled) ─────────────────────── */
 
 function makeDecisionCard(decision) {
   const card = el("div", "decision");
   const head = el("div", "decision-head");
   const id = el("input", "mono d-id");
   id.value = (decision && decision.id) || "";
   id.placeholder = "decision id";
   id.setAttribute("aria-label", "decision id");
   const remove = el("button", "ghost remove-decision", "×");
   remove.type = "button";
   remove.title = "Remove decision";
   remove.addEventListener("click", () => { card.remove(); scheduleDraftSave(); });
   head.append(el("span", "decision-n", "id"), id, remove);
 
   const question = el("input", "d-question");
   question.value = (decision && decision.question) || "";
   question.placeholder = "One criterion for this state";
   question.setAttribute("aria-label", "question");
 
   const options = el("div", "options");
   const add = el("button", "ghost add-decision-option", "+ option");
   add.type = "button";
   add.addEventListener("click", () => options.appendChild(makeOptionRow("", "")));
   const optHead = el("div", "field-head", "");
   optHead.append(el("label", null, "options"), add);
   (decision ? decision.options : [{ id: "", description: "" }]).forEach((option) =>
     options.appendChild(makeOptionRow(option.id, option.description)));
 
   card.append(head, question, optHead, options);
   return card;
 }
 
 const readDecisions = () =>
   Array.from($("#b-decisions").children).map((card) => ({
     id: $(".d-id", card).value.trim(),
     question: $(".d-question", card).value.trim(),
     options: Array.from($(".options", card).children).map((row) => ({
       id: $(".opt-id", row).value.trim(),
       description: $(".opt-desc", row).value.trim(),
     })),
   }));
 
 /* ── state field: text or JSON ─────────────────────────────────────── */
 
 const stateMode = (name) => $('input[name="' + name + '"]:checked').value;
 
 /* Radio restore tolerates an unknown stored value by leaving the default. */
 function checkStateMode(name, value) {
   const radio = $('input[name="' + name + '"][value="' + value + '"]');
   if (radio) radio.checked = true;
 }
 
 function readState(textarea, modeName, noteNode) {
   const raw = textarea.value;
   noteNode.textContent = stateWarning(raw.length, healthInfo.max_tokens);
   noteNode.classList.toggle("warn", Boolean(noteNode.textContent));
   if (stateMode(modeName) === "text") return { value: raw };
   if (!raw.trim()) return { value: raw };
   try {
     const parsed = JSON.parse(raw);
     if (typeof parsed === "string" || parsed === null || typeof parsed !== "object") {
       return { error: "JSON mode expects an object or array (or switch back to text mode)." };
     }
     return { value: parsed };
   } catch (error) {
     return { error: "state is not valid JSON: " + error.message };
   }
 }
 
 /* ── request bodies from the DOM ───────────────────────────────────── */
 
 function singleBody() {
   const form = $("#panel-single");
   const state = readState($("#s-state"), "s-state-mode", $("#s-state-note"));
   if (state.error) return { error: state.error };
   const row = {
     id: $("#s-id").value.trim(),
     state: state.value,
     question: $("#s-question").value.trim(),
     options: readOptions(form),
   };
   const problems = validateRow(row, "decision");
   return problems.length ? { error: problems.join("\n") } : { body: row };
 }
 
 function batchBody() {
   const state = readState($("#b-state"), "b-state-mode", $("#b-state-note"));
   if (state.error) return { error: state.error };
   const decisions = readDecisions();
   const problems = [];
   if (!decisions.length) problems.push("batch needs at least one decision");
   const batchIds = decisions.map((d) => d.id);
   if (new Set(batchIds).size !== batchIds.length) problems.push("Decision IDs must be unique (batch-level)");
   decisions.forEach((decision, index) =>
     problems.push(...validateRow({ ...decision, state: state.value }, "decision " + (index + 1))));
   if (problems.length) return { error: [...new Set(problems)].join("\n") };
   return { body: { state: state.value, decisions: decisions } };
 }
 
 /* ── result rendering ─────────────────────────────────────────────── */
 
 function optionTable(optionIds, probabilities, logits) {
   const order = optionIds.map((_, i) => i).sort((a, b) => probabilities[b] - probabilities[a]);
   const winner = order[0];
   const table = el("table", "probs");
   const head = el("tr");
   ["option", "score", "logit"].forEach((label) => head.appendChild(el("th", null, label)));
   table.appendChild(head);
   order.forEach((i) => {
     const tr = el("tr", i === winner ? "is-winner" : null);
     const nameCell = el("td");
     const bar = el("span", "bar");
     bar.style.setProperty("--w", (probabilities[i] * 100).toFixed(2) + "%");
     nameCell.append(bar, el("code", null, optionIds[i]));
     tr.append(nameCell, el("td", "num", p4(probabilities[i])), el("td", "num dim", p3(logits[i])));
     table.appendChild(tr);
   });
   return table;
 }
 
 function metaGrid(entries) {
   const grid = el("dl", "meta");
   entries.forEach(([key, value, title]) => {
     grid.appendChild(el("dt", null, key));
     const dd = el("dd", "mono", value);
     if (title) dd.title = title;
     grid.appendChild(dd);
   });
   return grid;
 }
 
 function renderResult(result, host, extra) {
   const winner = argmax(result.probabilities);
   const card = el("div", "result-card");
 
   const headline = el("div", "headline");
   headline.append(
     el("span", "chosen mono", result.option_ids[winner]),
     el("span", "score mono", "p = " + p4(result.probabilities[winner])));
   if (result.id !== undefined) headline.appendChild(el("span", "rid mono", result.id));
   card.appendChild(headline);
   card.appendChild(optionTable(result.option_ids, result.probabilities, result.option_logits));
 
   const model = result.model || {};
   const entries = [
     ["input_tokens", String(result.input_tokens)],
     ["prompt_sha256", String(result.prompt_sha256).slice(0, 16) + "…", String(result.prompt_sha256)],
     ["prompt_version", String(result.prompt_version)],
     ["readout", String(result.readout)],
     ["model", model.source + (model.revision ? " @" + String(model.revision).slice(0, 12) : "")],
     ["backend", model.backend || "torch"],
     ["dtype / torch", (model.dtype || "—") + " / " + (model.torch_version || "—")],
   ];
   if (result.llama) {
     entries.push(["cached prompt tokens reused", String(result.llama.cache_n ?? "—")]);
     entries.push(["score retrieval attempts", String(result.llama.attempts ?? 1)]);
   }
   if (model.serving_config) entries.push(["serving_config", model.serving_config]);
   if (extra) entries.push(...extra);
   card.appendChild(metaGrid(entries));
 
   card.appendChild(el("p", "disclaimer", String(result.probability_status) +
     " — ranking and coarse thresholds only."));
   host.appendChild(card);
 }
 
 function renderTiming(timing, host) {
   const table = el("table", "probs timing");
   Object.keys(timing).forEach((key) => {
     const tr = el("tr");
     const value = timing[key];
     tr.append(el("td", "dim", key),
               el("td", "num", typeof value === "number"
                 ? (key.endsWith("seconds") ? value.toFixed(4) : String(value))
                 : String(value)));
     table.appendChild(tr);
   });
   host.appendChild(el("h3", "section-title", "batch timing"));
   host.appendChild(table);
 }
 
 /* ── submit flow ──────────────────────────────────────────────────── */
 
 let inFlight = false;
 
 function setPending(active, text) {
   $("#idle").hidden = true;
   $("#error").hidden = true;
   $("#result").hidden = true;
   $("#pending").hidden = !active;
   if (text) $("#pending-text").textContent = text;
 }
 
 function showError(text) {
   $("#idle").hidden = true;
   $("#pending").hidden = true;
   $("#result").hidden = true;
   const box = $("#error");
   clear(box);
   box.hidden = false;
   box.appendChild(el("h3", null, "Rejected"));
   const pre = el("pre", null, text);
   box.appendChild(pre);
 }
 
 function showResult(hostBuilder) {
   $("#idle").hidden = true;
   $("#pending").hidden = true;
   $("#error").hidden = true;
   const host = $("#result");
   clear(host);
   host.hidden = false;
   hostBuilder(host);
 }
 
 async function submitSingle(event) {
   event.preventDefault();
   if (inFlight) return;
   const built = singleBody();
   if (built.error) return showError(built.error);
   inFlight = true;
   $("#s-submit").disabled = true;
   setPending(true, "scoring one decision…");
   const outcome = await api("/decide", built.body);
   $("#s-submit").disabled = false;
   inFlight = false;
   if (!outcome.ok) return showError(errorText(outcome));
   showResult((host) => {
     host.appendChild(el("h2", "section-title",
       "browser " + outcome.elapsedMs.toFixed(0) + " ms · server total " + ms(outcome.payload.total_seconds) +
       " · forward " + ms(outcome.payload.forward_seconds)));
     renderResult(outcome.payload, host, [["browser wall clock", outcome.elapsedMs.toFixed(0) + " ms"]]);
     host.appendChild(rawJSON(built.body, outcome.payload));
   });
 }
 
 async function submitBatch(event) {
   event.preventDefault();
   if (inFlight) return;
   const built = batchBody();
   if (built.error) return showError(built.error);
   inFlight = true;
   $("#b-submit").disabled = true;
   setPending(true, built.body.decisions.length + " decisions against one state…");
   const outcome = await api("/decide-batch", built.body);
   $("#b-submit").disabled = false;
   inFlight = false;
   if (!outcome.ok) return showError(errorText(outcome));
   const timing = outcome.payload.timing || {};
   showResult((host) => {
     host.appendChild(el("h2", "section-title",
       "browser " + outcome.elapsedMs.toFixed(0) + " ms · server total " + ms(timing.total_seconds) +
       " · " + (timing.batch_size || "?") + " decisions · " + (timing.mode || "torch shared")));
     renderTiming(timing, host);
     (outcome.payload.results || []).forEach((result) => renderResult(result, host));
     host.appendChild(rawJSON(built.body, outcome.payload));
   });
 }
 
 function rawJSON(request, response) {
   const details = el("details", "raw");
   details.appendChild(el("summary", null, "raw request / response"));
   details.appendChild(el("pre", null,
     "→ " + JSON.stringify(request, null, 2) + "\n\n← " + JSON.stringify(response, null, 2)));
   return details;
 }
 
 /* ── curl export (matches docs/usage.md so a UI finding becomes a bug report) */
 
 function copyCurl(path, built) {
   if (built.error) return showError(built.error);
   const body = JSON.stringify(built.body, null, 2).replace(/'/g, "'\\''");
   const command = "curl -s -X POST " + location.origin + path +
     " \\\n  -H 'Content-Type: application/json' \\\n  -d '" + body + "'";
   copyText(command, "curl command copied");
 }
 
 function copyText(text, confirmation) {
   const done = () => flash(confirmation);
   if (navigator.clipboard && navigator.clipboard.writeText) {
     navigator.clipboard.writeText(text).then(done, () => fallbackCopy(text, done));
   } else {
     fallbackCopy(text, done);
   }
 }
 
 function fallbackCopy(text, done) {
   const area = el("textarea", "sr-only");
   area.value = text;
   document.body.appendChild(area);
   area.select();
   try { document.execCommand("copy"); done(); } catch (_) { showError("Copy failed; select the text manually."); }
   area.remove();
 }
 
 function flash(message) {
   const box = $("#result");
   $("#idle").hidden = true;
   $("#pending").hidden = true;
   $("#error").hidden = true;
   box.hidden = false;
   clear(box);
   box.appendChild(el("p", "flash", message));
 }
 
 /* ── health strip ─────────────────────────────────────────────────── */
 
 const healthInfo = { max_tokens: 0 };
 
 async function checkHealth() {
   const dot = $("#health-dot");
   const text = $("#health-text");
   dot.className = "dot pending";
   text.textContent = "checking…";
   const outcome = await api("/healthz");
   if (!outcome.ok) {
     dot.className = "dot down";
     text.textContent = "unreachable — " + errorText(outcome).split("\n")[0];
     $("#model-picker").hidden = true;
     setModelNote("");
     return;
   }
   const model = outcome.payload.model || {};
   healthInfo.max_tokens = outcome.payload.max_tokens || 0;
   dot.className = "dot up";
   clear(text);
   const isLlama = outcome.payload.backend === "llama";
   text.append(
     el("span", null, isLlama ? "API ready · llama · " : "warm · torch · "),
     el("code", null, String(model.source)),
     el("span", null, " @ "),
     el("code", null, String(model.revision || "").slice(0, 12)),
     el("span", null, " · max_tokens "),
     el("code", null, String(outcome.payload.max_tokens)),
     el("span", null, " · "),
     el("code", null, String(model.dtype || "—") + " / " + String(model.torch_version || "—")));
   if (isLlama && outcome.payload.model_state === "pending") {
     text.appendChild(el("span", "warn-text", " · selected model loads on first request"));
   }
   $("#foot-max-tokens").textContent = "max_tokens " + outcome.payload.max_tokens;
   if (isLlama) loadModelPicker();
   else { $("#model-picker").hidden = true; setModelNote(""); }
 }
 
 /* ── model picker (llama backend only; torch has no runtime switching) ──
  * The dropdown lists the model aliases the llama-server knows about (its
  * models dir plus whatever is loaded). Selecting one POSTs /models: the
  * server-side switch unloads the current weights and the new model loads
  * lazily, on the next scored request. Runtime state only — nothing here
  * survives a restart of either process.                                       */
 
 let modelSwitching = false;
 
 function setModelNote(message, kind) {
   const note = $("#model-note");
   note.textContent = message;
   note.classList.toggle("is-error", kind === "error");
   note.classList.toggle("is-warn", kind === "warn");
 }
 
 async function loadModelPicker() {
   const picker = $("#model-picker");
   if (modelSwitching) return;   // don't clobber a switch that is in flight
   const outcome = await api("/models");
   if (!outcome.ok) { picker.hidden = true; return; }
   const payload = outcome.payload;
   if (!payload.switching) { picker.hidden = true; return; }
   const previous = picker.dataset.current || payload.current;
   clear(picker);
   (payload.models || []).forEach((id) => {
     const option = el("option", null, id);
     option.value = id;
     picker.appendChild(option);
   });
   picker.dataset.current = payload.current;
   picker.value = (payload.models || []).includes(previous) ? previous : payload.current;
   picker.hidden = false;
   if (payload.model_state === "pending") {
     setModelNote(payload.current + " selected — loads on first request");
   } else if (picker.value === payload.current) {
     setModelNote("");
   }
 }
 
 async function selectModel(model) {
   const picker = $("#model-picker");
   if (!model || model === picker.dataset.current) return;
   const previous = picker.dataset.current;
   modelSwitching = true;
   picker.disabled = true;
   setModelNote("switching to " + model + " — unloading the current model…");
   const outcome = await api("/models", { model: model });
   picker.disabled = false;
   modelSwitching = false;
   if (!outcome.ok) {
     picker.value = previous;
     setModelNote("switch failed — " + errorText(outcome).split("\n")[0], "error");
     return;
   }
   picker.dataset.current = model;
   if (outcome.payload.warning) {
     // Selection succeeded; only freeing the old weights failed. Not an error:
     // the new model still loads on first request, the old one stays resident.
     setModelNote(model + " selected — loads on first request · ⚠ " + outcome.payload.warning, "warn");
   } else {
     setModelNote(outcome.payload.model_state === "pending"
       ? model + " selected — loads on first request"
       : model + " selected");
   }
   checkHealth();
 }
 
 /* ── examples (from docs/usage.md) ─────────────────────────────────── */
 
 const PRESETS = [
   {
     name: "support triage",
     mode: "single",
     row: {
       id: "ticket-1042",
       state: "Customer asks to reset a forgotten password and says the reset email never arrived.",
       question: "Which queue should handle this request?",
       options: [
         { id: "account_access", description: "Account access and authentication support." },
         { id: "billing", description: "Billing and payment support." },
         { id: "sales", description: "Sales and product evaluation." },
       ],
     },
   },
   {
     name: "deploy gate",
     mode: "single",
     row: {
       id: "deploy-gate",
       state: "pytest 214 passed, 0 failed, 3 skipped in 41.2s\ncoverage: 88%\nlint: no issues found",
       question: "Does this test output provide evidence that the suite passed with no failures?",
       options: [
         { id: "pass", description: "All tests passed." },
         { id: "fail", description: "One or more tests failed." },
         { id: "insufficient", description: "The output does not clearly show pass or fail." },
       ],
     },
   },
   {
     name: "incident review (batch)",
     mode: "batch",
     state: "Postmortem: API latency spiked from 14:02 to 14:40 UTC after a config push removed the " +
            "rate-limit cache key. Error rate stayed below 0.1%. No customer data was affected. " +
            "Rollback completed at 14:40 UTC.",
     decisions: [
       { id: "customer-impact", question: "Was there customer-visible impact?", options: [
         { id: "yes", description: "Customers were affected." },
         { id: "no", description: "No customer-visible impact." },
         { id: "insufficient", description: "Cannot be determined from the evidence." }] },
       { id: "action-required", question: "Does the postmortem identify a concrete follow-up action?", options: [
         { id: "yes", description: "A follow-up action is identified." },
         { id: "no", description: "No follow-up action is identified." }] },
       { id: "sev", question: "What severity best fits this incident per the described scope?", options: [
         { id: "sev1", description: "Critical: data loss or outage." },
         { id: "sev2", description: "Major: degraded functionality with partial customer impact." },
         { id: "sev3", description: "Minor: brief internal degradation, no customer impact." }] },
     ],
   },
 ];
 
 function loadPreset(preset) {
   switchMode(preset.mode);
   if (preset.mode === "single") {
     $("#s-id").value = preset.row.id;
     $("#s-state").value = preset.row.state;
     $("#s-question").value = preset.row.question;
     fillOptions($("#panel-single"), preset.row.options);
   } else {
     $("#b-state").value = preset.state;
     clear($("#b-decisions"));
     preset.decisions.forEach((decision) => $("#b-decisions").appendChild(makeDecisionCard(decision)));
   }
   $("#s-state-note").textContent = "";
   $("#b-state-note").textContent = "";
   saveDraft();
 }
 
 /* ── draft persistence ────────────────────────────────────────────── */
 
 let draftTimer = null;
 function scheduleDraftSave() {
   clearTimeout(draftTimer);
   draftTimer = setTimeout(saveDraft, 400);
 }
 
 function saveDraft() {
   const draft = {
     mode: currentMode,
     single: {
       id: $("#s-id").value,
       state: $("#s-state").value,
       stateMode: stateMode("s-state-mode"),
       question: $("#s-question").value,
       options: readOptions($("#panel-single")),
     },
     batch: {
       state: $("#b-state").value,
       stateMode: stateMode("b-state-mode"),
       decisions: readDecisions(),
     },
   };
   try { localStorage.setItem(DRAFT_KEY, JSON.stringify(draft)); } catch (_) { /* quota / private mode */ }
 }
 
 function restoreDraft() {
   let draft = null;
   try {
     draft = JSON.parse(localStorage.getItem(DRAFT_KEY) || "null");
     // A draft from an incompatible shape must not blank the page.
     if (draft && (!draft.single || !draft.batch || !Array.isArray(draft.single.options))) draft = null;
   } catch (_) { draft = null; }
   if (!draft) {
     fillOptions($("#panel-single"), [
       { id: "yes", description: "" },
       { id: "no", description: "" },
       { id: "insufficient", description: "The evidence is insufficient to decide." },
     ]);
     $("#b-decisions").appendChild(makeDecisionCard({ id: "check-1", options: [
       { id: "yes", description: "" }, { id: "no", description: "" }] }));
     return;
   }
   $("#s-id").value = draft.single.id || "";
   $("#s-state").value = draft.single.state || "";
   $("#s-question").value = draft.single.question || "";
   checkStateMode("s-state-mode", draft.single.stateMode);
   fillOptions($("#panel-single"), draft.single.options.length ? draft.single.options
     : [{ id: "", description: "" }, { id: "", description: "" }]);
   $("#b-state").value = draft.batch.state || "";
   checkStateMode("b-state-mode", draft.batch.stateMode);
   clear($("#b-decisions"));
   (draft.batch.decisions.length ? draft.batch.decisions : [{ id: "", question: "", options: [] }])
     .forEach((decision) => $("#b-decisions").appendChild(makeDecisionCard(decision)));
   switchMode(draft.mode === "batch" ? "batch" : "single");
 }
 
 /* ── mode switching ───────────────────────────────────────────────── */
 
 let currentMode = "single";
 
 function switchMode(mode) {
   currentMode = mode;
   const batch = mode === "batch";
   const game = mode === "game";
   const self = mode === "self";
   const room = mode === "room";
   const roomself = mode === "roomself";
   const demo = game || self || room || roomself;
   // Single & batch share the request/response columns; the demos replace them.
   $("#request").hidden = demo;
   $("#response").hidden = demo;
   $("#panel-game").hidden = !game;
   $("#panel-self").hidden = !self;
   $("#panel-room").hidden = !room;
   $("#panel-roomself").hidden = !roomself;
   $("#panel-single").hidden = batch || demo;
   $("#panel-batch").hidden = !batch;
   $("#tab-single").classList.toggle("is-active", mode === "single");
   $("#tab-batch").classList.toggle("is-active", batch);
   $("#tab-game").classList.toggle("is-active", game);
   $("#tab-self").classList.toggle("is-active", self);
   $("#tab-room").classList.toggle("is-active", room);
   $("#tab-roomself").classList.toggle("is-active", roomself);
   $("#tab-single").setAttribute("aria-selected", String(mode === "single"));
   $("#tab-batch").setAttribute("aria-selected", String(batch));
   $("#tab-game").setAttribute("aria-selected", String(game));
   $("#tab-self").setAttribute("aria-selected", String(self));
   $("#tab-room").setAttribute("aria-selected", String(room));
   $("#tab-roomself").setAttribute("aria-selected", String(roomself));
 }
 
 /* ── wiring ───────────────────────────────────────────────────────── */
 
 function init() {
   $("#panel-single").addEventListener("submit", submitSingle);
   $("#panel-batch").addEventListener("submit", submitBatch);
   $("#tab-single").addEventListener("click", () => { switchMode("single"); saveDraft(); });
   $("#tab-batch").addEventListener("click", () => { switchMode("batch"); saveDraft(); });
   $("#tab-game").addEventListener("click", () => switchMode("game"));
   $("#tab-self").addEventListener("click", () => switchMode("self"));
   $("#tab-room").addEventListener("click", () => switchMode("room"));
   $("#tab-roomself").addEventListener("click", () => switchMode("roomself"));
   $("#health-refresh").addEventListener("click", checkHealth);
   $("#model-picker").addEventListener("change", (event) => selectModel(event.target.value));
 
   $(".add-option", $("#panel-single")).addEventListener("click", (event) => {
     const host = optionHost($("#panel-single"));
     if (host.children.length >= MAX_OPTIONS) return showError("At most " + MAX_OPTIONS + " options.");
     host.appendChild(makeOptionRow("", ""));
     scheduleDraftSave();
   });
   $("#b-add-decision").addEventListener("click", () => {
     $("#b-decisions").appendChild(makeDecisionCard({ options: [
       { id: "", description: "" }, { id: "", description: "" }] }));
     scheduleDraftSave();
   });
 
   $("#s-curl").addEventListener("click", () => copyCurl("/decide", singleBody()));
   $("#b-curl").addEventListener("click", () => copyCurl("/decide-batch", batchBody()));
   $("#s-clear").addEventListener("click", () => {
     $("#s-state").value = ""; $("#s-question").value = ""; $("#s-id").value = "adhoc";
     fillOptions($("#panel-single"), [{ id: "", description: "" }, { id: "", description: "" }]);
     saveDraft();
   });
   $("#b-clear").addEventListener("click", () => {
     $("#b-state").value = "";
     clear($("#b-decisions"));
     $("#b-decisions").appendChild(makeDecisionCard({ options: [
       { id: "", description: "" }, { id: "", description: "" }] }));
     saveDraft();
   });
 
   const presetHost = $("#preset-buttons");
   PRESETS.forEach((preset) => {
     const button = el("button", "preset", preset.name);
     button.type = "button";
     button.addEventListener("click", () => loadPreset(preset));
     presetHost.appendChild(button);
   });
 
   document.addEventListener("input", scheduleDraftSave);
   restoreDraft();
   if (location.hash === "#game") switchMode("game");   // deep-link the demo tabs
   else if (location.hash === "#self") switchMode("self");
   else if (location.hash === "#room") switchMode("room");
   else if (location.hash === "#roomself") switchMode("roomself");
   checkHealth();
 }
 
 document.addEventListener("DOMContentLoaded", init);