readyroom 0.1.7 → 0.1.8

package/README.md

@@ -50,6 +50,54 @@ share one place to ask and one place for you to answer.
 - **Three ways to run it, one program.** `npx` for one machine, Docker for an always-on box,
   a Cloudflare Worker for when your agents cannot reach either.
 
+## Screenshots
+
+The page is one flow — the human draining the queue — and one authenticated role, so every
+capture is a *state* of that single flow rather than a role of its own. A few representative
+moments, desktop first:
+
+<table>
+<tr>
+<td align="center"><b>Queue, grouped by stream</b></td>
+<td align="center"><b>Options and free text</b></td>
+<td align="center"><b>Option selected</b></td>
+<td align="center"><b>Recent (undoable 5 min)</b></td>
+</tr>
+<tr>
+<td><img src="docs/screenshots/pending-multi-stream.png" width="280" alt="Pending queue grouped by stream heading, with dotted low, double blocking, and solid normal urgency badges."></td>
+<td><img src="docs/screenshots/pending-options.png" width="280" alt="A blocking-urgency ticket with option buttons above a second free-text ticket."></td>
+<td><img src="docs/screenshots/option-selected.png" width="280" alt="A ticket with an option picked, showing a thick left border, a SELECTED marker, and the option button pressed."></td>
+<td><img src="docs/screenshots/recent-answered.png" width="280" alt="An answered ticket in the Recent section with a dashed border, STATUS: ANSWERED badge, the recorded answer, and an Undo button."></td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td align="center"><b>Token gate</b></td>
+<td align="center"><b>Token rejected (401)</b></td>
+<td align="center"><b>Polling fallback</b></td>
+<td align="center"><b>Phone width</b></td>
+</tr>
+<tr>
+<td><img src="docs/screenshots/token-gate.png" width="280" alt="First paint with no token: the token bar is visible and the status reads waiting for token."></td>
+<td><img src="docs/screenshots/token-rejected.png" width="280" alt="A wrong token was saved: a Token rejected (401) error banner with the token bar shown again."></td>
+<td><img src="docs/screenshots/status-polling.png" width="280" alt="The SSE endpoint is unavailable, so the status reads polling every 5s."></td>
+<td><img src="docs/screenshots/mobile-pending.png" width="150" alt="The populated multi-stream queue at phone width."></td>
+</tr>
+</table>
+
+There is also an empty board, an inline per-card validation error, and a failed-load banner —
+the page is captured at `1280x800` (desktop) and `390x844` (the two `mobile-*` shots). A full set
+of every screen and state, with a one-line description of each, is in
+[`docs/screenshots/MANIFEST.md`](docs/screenshots/MANIFEST.md) — regenerate the lot with
+
+```sh
+npm run screenshots
+```
+
+which starts its own isolated readyroom on `:8972`, drives each state, and tears it down. For how
+to actually use each of these screens, see [`docs/USAGE.md`](docs/USAGE.md).
+
 ## Vocabulary
 
 These words are used exactly, in code, comments, tool descriptions, and docs. No synonyms.
@@ -213,6 +261,10 @@ services:
       - ./readyroom-state:/app/.state
 ```
 
+Copy this file to get a runnable setup without retyping it:
+[`examples/docker-compose.yml`](examples/docker-compose.yml) — set `READYROOM_TOKEN`, then
+`docker compose up -d`.
+
 The container runs the same Node entry as npx, in stdio-plus-HTTP mode, as a non-root user, and
 handles `SIGTERM`.
 
@@ -368,6 +420,34 @@ The stream is the path segment, so each agent gets its own URL.
 }
 ```
 
+### Directing an agent to use readyroom (`AGENTS.md`)
+
+Paste the block below into your project's `AGENTS.md` (or `CLAUDE.md`) so the agent knows
+readyroom is available and how to reach it. It goes at the top level of that file, alongside
+your other project instructions.
+
+````markdown
+## Asking a human
+
+When you reach a decision you cannot make alone — a choice with real consequences, a
+preference only the operator holds, or anything you would otherwise guess at — ask the
+operator through the `readyroom` MCP server instead of guessing or blocking.
+
+- `ask_human` — enqueue a question and return immediately. It never waits. Pass `question`
+  (one sentence), and optionally `options` (2-5 mutually exclusive choices), `context`,
+  `default_answer`, `timeout_seconds`, `urgency`, and `stream`. It returns
+  `{ id, status: "pending" }`.
+- `wait_for_answer` — block for the human's answer to a ticket you enqueued. Pass the `id`.
+  It returns immediately if the ticket is already answered or expired; if it is still
+  pending, continue with independent work and call it again later. Do not poll in a tight loop.
+- `list_pending` — list the tickets still pending across every agent stream. Takes no arguments.
+- `cancel_ticket` — withdraw a ticket you no longer need answered. Pass the `id`.
+
+A delivered human answer is prefixed with `HUMAN ANSWER:`. An answer applied from
+`default_answer` on expiry is prefixed `DEFAULT ANSWER (applied on expiry; no human
+responded):` — never treat that as a human answer.
+````
+
 ### Auth and secrets
 
 `src/security.ts` holds both guards.
@@ -537,7 +617,9 @@ The Worker has no state dir, no bind address, and no daemon role. Three conseque
 ## The readyroom page
 
 The page is a **status board**, not a chat log. It shows what is waiting and clears when you
-have answered — which is why there is no markdown parser and no message history.
+have answered — which is why there is no markdown parser and no message history. For a
+walkthrough of opening it, reading a ticket, and answering one, see
+[`docs/USAGE.md`](docs/USAGE.md).
 
 `public/index.html`. One file, shared by all three targets. All CSS and JS inline. No CDN, no
 external origin, no build step. It renders correctly when opened from the server with the
@@ -621,6 +703,7 @@ npm run typecheck    # tsc --noEmit
 npm run build        # esbuild -> dist/server.mjs (single file, HTML inlined)
 npm run build:worker # wrangler deploy --dry-run --outdir dist/worker
 npm run dev:worker   # wrangler dev
+npm run screenshots  # capture every page state into docs/screenshots/
 ```
 
 Repo conventions:

package/dist/server.mjs

@@ -7501,750 +7501,7 @@ async function acquireDaemonRole(stateDir, port) {
 }
 
 // public/index.html
-var public_default = `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>readyroom</title>
-<style>
-  /* No external fonts, no external origins, no images fetched over the network.
-     Everything below is self-contained so the page renders with the network cut. */
-
-  :root {
-    --ink: #111;
-    --paper: #fff;
-    --muted: #555;
-    --line: #111;
-    --line-soft: #999;
-    --blocking: #000;
-    --low: #666;
-  }
-
-  * { box-sizing: border-box; }
-
-  html, body {
-    margin: 0;
-    padding: 0;
-    background: var(--paper);
-    color: var(--ink);
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-    font-size: 16px;
-    line-height: 1.45;
-  }
-
-  body { padding: 16px; max-width: 1100px; margin: 0 auto; }
-
-  h1 { font-size: 1.25rem; margin: 0 0 4px 0; letter-spacing: 0.02em; }
-  h2 { font-size: 1rem; margin: 24px 0 8px 0; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--line); padding-bottom: 4px; }
-  h3 { font-size: 0.95rem; margin: 0 0 8px 0; }
-
-  .sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px 0; }
-
-  /* Status + error banners: text carries the meaning, not colour. */
-  .banner {
-    border: 2px solid var(--line);
-    padding: 8px 10px;
-    margin: 8px 0;
-    font-size: 0.85rem;
-  }
-  .banner[hidden] { display: none; }
-  .banner .tag { font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; }
-
-  #tokenbar { border: 2px solid var(--line); padding: 12px; margin: 12px 0; }
-  #tokenbar[hidden] { display: none; }
-  #tokenbar label { display: block; font-weight: bold; margin-bottom: 6px; }
-  #tokenbar .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
-  #tokenbar input { flex: 1 1 240px; min-height: 44px; padding: 8px; font: inherit; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }
-
-  button {
-    font: inherit;
-    min-height: 44px;
-    min-width: 44px;
-    padding: 8px 12px;
-    border: 2px solid var(--line);
-    background: var(--paper);
-    color: var(--ink);
-    cursor: pointer;
-  }
-  button:focus-visible, input:focus-visible, a:focus-visible {
-    outline: 3px solid var(--ink);
-    outline-offset: 2px;
-  }
-  /* No hover-only affordances: hover is a bonus, never the only signal. */
-  button:hover { background: #eee; }
-
-  .stream-group { margin: 0 0 20px 0; }
-  .stream-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
-  .stream-name { font-weight: bold; }
-  .stream-count { color: var(--muted); font-size: 0.85rem; }
-
-  .card {
-    border: 2px solid var(--line);
-    padding: 12px;
-    margin: 10px 0;
-    background: var(--paper);
-  }
-  /* Selection is carried by a thick left border AND a text marker, not colour alone. */
-  .card.selected { border-left-width: 10px; }
-  .card .selmark { display: none; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
-  .card.selected .selmark { display: inline; }
-
-  .card-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
-  .age { color: var(--muted); font-size: 0.85rem; }
-
-  .badge {
-    display: inline-block;
-    border: 2px solid var(--line);
-    padding: 1px 6px;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    font-weight: bold;
-  }
-  .badge.urgency-blocking { border-style: double; border-width: 4px; }
-  .badge.urgency-low { border-style: dotted; }
-  .badge.urgency-normal { border-style: solid; }
-  .badge.status-answered { border-style: dashed; }
-
-  .question { font-weight: bold; margin: 6px 0; }
-  .context {
-    white-space: pre-wrap;
-    border-left: 3px solid var(--line-soft);
-    padding: 6px 10px;
-    margin: 8px 0;
-    color: var(--ink);
-    font-size: 0.9rem;
-  }
-  .context[hidden] { display: none; }
-
-  .options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
-  .options button[aria-pressed="true"] { border-style: double; border-width: 4px; font-weight: bold; }
-
-  .answer-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
-  .answer-row label { font-size: 0.85rem; }
-  .answer-row input[type="text"] {
-    flex: 1 1 240px;
-    min-height: 44px;
-    padding: 8px;
-    font: inherit;
-    border: 2px solid var(--line);
-    background: var(--paper);
-    color: var(--ink);
-  }
-
-  .card-error { border: 2px solid var(--line); padding: 6px 8px; margin-top: 8px; font-size: 0.85rem; }
-  .card-error[hidden] { display: none; }
-  .card-error .tag { font-weight: bold; text-transform: uppercase; }
-
-  .recent .card { border-style: dashed; }
-  .empty { color: var(--muted); font-style: italic; }
-
-  .hint { color: var(--muted); font-size: 0.8rem; margin-top: 24px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
-  kbd { border: 1px solid var(--line); padding: 0 4px; font: inherit; font-size: 0.8rem; }
-
-  /* No animation on the critical path. Respect reduced motion. */
-  @media (prefers-reduced-motion: reduce) {
-    * { animation: none !important; transition: none !important; }
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    .card.selected { transition: border-left-width 80ms linear; }
-  }
-
-  @media print {
-    body { max-width: none; }
-    button { display: none; }
-    .card { break-inside: avoid; }
-  }
-</style>
-</head>
-<body>
-  <header>
-    <h1>readyroom</h1>
-    <p class="sub">Drain the queue. <kbd>j</kbd>/<kbd>k</kbd> move &middot; <kbd>1</kbd>-<kbd>5</kbd> pick &middot; <kbd>Enter</kbd> answer &middot; <kbd>u</kbd> undo</p>
-    <div id="status" class="banner" role="status" aria-live="polite">
-      <span class="tag">Status:</span> <span id="status-text">starting</span>
-    </div>
-    <div id="error" class="banner" role="alert" hidden>
-      <span class="tag">Error:</span> <span id="error-text"></span>
-    </div>
-  </header>
-
-  <section id="tokenbar" hidden aria-labelledby="token-label">
-    <label id="token-label" for="token-input">Access token (READYROOM_TOKEN)</label>
-    <div class="row">
-      <input id="token-input" type="password" autocomplete="off" spellcheck="false" aria-describedby="token-help">
-      <button id="token-save" type="button">Save token</button>
-    </div>
-    <p id="token-help" class="sub">Stored in this browser only. Sent as <code>Authorization: Bearer</code> on every request.</p>
-  </section>
-
-  <main id="app">
-    <section id="pending-section" aria-labelledby="pending-heading">
-      <h2 id="pending-heading">Pending</h2>
-      <div id="pending"></div>
-    </section>
-
-    <section id="recent-section" class="recent" aria-labelledby="recent-heading">
-      <h2 id="recent-heading">Recent (undoable for 5 minutes)</h2>
-      <div id="recent"></div>
-    </section>
-  </main>
-
-  <p class="hint">No markdown rendering. Context is shown as plain text with line breaks preserved.</p>
-
-  <noscript>
-    <div class="banner"><span class="tag">Error:</span> This page needs JavaScript to drain the queue.</div>
-  </noscript>
-
-<script>
-(function () {
-  "use strict";
-
-  var TOKEN_KEY = "readyroom_token";
-  var POLL_MS = 5000;
-  var UNDO_WINDOW_MS = 5 * 60 * 1000;
-
-  var state = {
-    tickets: [],
-    selectedId: null,
-    token: "",
-    abort: null,
-    pollTimer: null,
-    live: false,
-    error: "",
-    choices: {},
-    drafts: {}
-  };
-
-  var els = {
-    status: document.getElementById("status"),
-    statusText: document.getElementById("status-text"),
-    error: document.getElementById("error"),
-    errorText: document.getElementById("error-text"),
-    tokenbar: document.getElementById("tokenbar"),
-    tokenInput: document.getElementById("token-input"),
-    tokenSave: document.getElementById("token-save"),
-    pending: document.getElementById("pending"),
-    recent: document.getElementById("recent")
-  };
-
-  /* ---------------- token handling (requirement 11) ---------------- */
-
-  function readToken() {
-    try { return localStorage.getItem(TOKEN_KEY) || ""; } catch (e) { return ""; }
-  }
-  function writeToken(t) {
-    try { localStorage.setItem(TOKEN_KEY, t); } catch (e) { /* storage may be blocked */ }
-  }
-  function dropToken() {
-    try { localStorage.removeItem(TOKEN_KEY); } catch (e) { /* ignore */ }
-  }
-  function showTokenBar(show) {
-    els.tokenbar.hidden = !show;
-    if (show) { try { els.tokenInput.focus(); } catch (e) {} }
-  }
-
-  /* ---------------- HTTP with Bearer on every request ---------------- */
-
-  function api(path, opts) {
-    opts = opts || {};
-    var headers = { "Authorization": "Bearer " + state.token };
-    if (opts.body) { headers["Content-Type"] = "application/json"; }
-    return fetch(path, {
-      method: opts.method || "GET",
-      headers: headers,
-      body: opts.body
-    }).then(function (res) {
-      if (res.status === 401) {
-        dropToken();
-        state.token = "";
-        state.error = "Token rejected (401). Enter it again.";
-        showTokenBar(true);
-        render();
-        var err = new Error("unauthorized");
-        err.unauthorized = true;
-        throw err;
-      }
-      return res;
-    });
-  }
-
-  function fetchTickets() {
-    if (!state.token) { return Promise.resolve(); }
-    return api("/api/tickets").then(function (res) {
-      if (!res.ok) { throw new Error("tickets " + res.status); }
-      return res.json();
-    }).then(function (data) {
-      state.tickets = (data && data.tickets) || [];
-      state.error = "";
-      render();
-    }).catch(function (err) {
-      if (err && err.unauthorized) { return; }
-      state.error = "Could not load tickets: " + (err && err.message ? err.message : "network error");
-      render();
-    });
-  }
-
-  /* ---------------- live updates (requirement 1) ---------------- */
-
-  function startPolling() {
-    if (state.pollTimer) { return; }
-    state.live = false;
-    fetchTickets();
-    state.pollTimer = setInterval(fetchTickets, POLL_MS);
-    render();
-  }
-  function stopPolling() {
-    if (state.pollTimer) { clearInterval(state.pollTimer); state.pollTimer = null; }
-  }
-
-  /* Fetch-based SSE reader.
-     EventSource cannot attach an Authorization header, so a Bearer-protected
-     /api/events is unreachable through it. Instead we fetch the endpoint with the
-     token, read response.body through a ReadableStream reader, decode with a
-     TextDecoder, and parse text/event-stream frames: frames are separated by a blank
-     line, and the payload rides on \`data:\` lines. Any failure \u2014 a network error, a
-     non-200 status, or a Worker's 501 \u2014 falls back to polling /api/tickets every 5 s,
-     which is the Worker target's live-update path. */
-  function handleFrame(frame) {
-    var lines = frame.split("\\n");
-    var sawData = false;
-    for (var i = 0; i < lines.length; i++) {
-      if (lines[i].indexOf("data:") === 0) { sawData = true; }
-    }
-    if (sawData) { fetchTickets(); }
-  }
-
-  function readSseStream(body) {
-    var reader = body.getReader();
-    var decoder = new TextDecoder();
-    var buffer = "";
-    function pump() {
-      return reader.read().then(function (chunk) {
-        if (chunk.done) { throw new Error("sse stream closed"); }
-        buffer += decoder.decode(chunk.value, { stream: true });
-        var idx;
-        while ((idx = buffer.indexOf("\\n\\n")) !== -1) {
-          var frame = buffer.slice(0, idx);
-          buffer = buffer.slice(idx + 2);
-          handleFrame(frame);
-        }
-        return pump();
-      });
-    }
-    return pump();
-  }
-
-  function startLive() {
-    stopLive();
-    if (!state.token) { return; }
-    if (typeof fetch === "undefined" || typeof TextDecoder === "undefined") { startPolling(); return; }
-
-    var controller = null;
-    try { controller = new AbortController(); } catch (e) { controller = null; }
-    if (controller) { state.abort = controller; }
-
-    var options = { headers: { "Authorization": "Bearer " + state.token } };
-    if (controller) { options.signal = controller.signal; }
-
-    fetch("/api/events", options).then(function (res) {
-      if (!res.ok || !res.body) {
-        /* 401, 404, a Worker's 501, or a body we cannot stream: poll instead. */
-        startPolling();
-        return;
-      }
-      state.live = true;
-      stopPolling();
-      render();
-      return readSseStream(res.body);
-    }).catch(function () {
-      if (controller && controller.signal.aborted) { return; }
-      state.live = false;
-      startPolling();
-    });
-  }
-  function stopLive() {
-    if (state.abort) {
-      try { state.abort.abort(); } catch (e) { /* ignore */ }
-      state.abort = null;
-    }
-    state.live = false;
-  }
-
-  /* ---------------- derived data ---------------- */
-
-  function pendingTickets() {
-    return state.tickets.filter(function (t) { return t.status === "pending"; });
-  }
-  function recentTickets() {
-    var now = Date.now();
-    return state.tickets.filter(function (t) {
-      if (t.status !== "answered" || !t.answered_at) { return false; }
-      return (now - new Date(t.answered_at).getTime()) <= UNDO_WINDOW_MS;
-    }).sort(function (a, b) {
-      return new Date(b.answered_at).getTime() - new Date(a.answered_at).getTime();
-    });
-  }
-
-  function groupByStream(tickets) {
-    var groups = {};
-    var order = [];
-    tickets.forEach(function (t) {
-      if (!groups[t.stream]) { groups[t.stream] = []; order.push(t.stream); }
-      groups[t.stream].push(t);
-    });
-    order.forEach(function (s) {
-      groups[s].sort(function (a, b) {
-        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-      });
-    });
-    order.sort(function (a, b) {
-      return new Date(groups[b][0].created_at).getTime() - new Date(groups[a][0].created_at).getTime();
-    });
-    return order.map(function (s) { return { stream: s, tickets: groups[s] }; });
-  }
-
-  function orderedPending() {
-    var out = [];
-    groupByStream(pendingTickets()).forEach(function (g) {
-      g.tickets.forEach(function (t) { out.push(t); });
-    });
-    return out;
-  }
-
-  function age(iso) {
-    var ms = Date.now() - new Date(iso).getTime();
-    if (!isFinite(ms) || ms < 0) { ms = 0; }
-    var s = Math.floor(ms / 1000);
-    if (s < 60) { return s + "s"; }
-    var m = Math.floor(s / 60);
-    if (m < 60) { return m + "m"; }
-    var h = Math.floor(m / 60);
-    if (h < 24) { return h + "h"; }
-    return Math.floor(h / 24) + "d";
-  }
-
-  /* ---------------- actions ---------------- */
-
-  function setCardError(id, msg) {
-    var el = document.getElementById("err-" + id);
-    if (el) {
-      el.hidden = false;
-      var span = el.querySelector(".err-text");
-      if (span) { span.textContent = msg; }
-    }
-  }
-
-  function submitAnswer(ticket) {
-    var input = document.getElementById("free-" + ticket.id);
-    var text = input ? input.value.trim() : (state.drafts[ticket.id] || "").trim();
-    var choice = state.choices[ticket.id] || "";
-    var answer = text || choice;
-    if (!answer) {
-      setCardError(ticket.id, "Type an answer or pick an option first.");
-      return;
-    }
-    api("/api/answer", {
-      method: "POST",
-      body: JSON.stringify({ id: ticket.id, answer: answer, answered_by: "human" })
-    }).then(function (res) {
-      if (res.status === 404) { setCardError(ticket.id, "Ticket not found (404)."); return; }
-      if (res.status === 409) { setCardError(ticket.id, "Already answered (409)."); return; }
-      if (!res.ok) { setCardError(ticket.id, "Answer failed (" + res.status + ")."); return; }
-      delete state.choices[ticket.id];
-      delete state.drafts[ticket.id];
-      return fetchTickets();
-    }).catch(function (err) {
-      if (err && err.unauthorized) { return; }
-      setCardError(ticket.id, "Answer failed: " + (err && err.message ? err.message : "network error"));
-    });
-  }
-
-  function undo(ticketId) {
-    api("/api/undo", { method: "POST", body: JSON.stringify({ id: ticketId }) })
-      .then(function (res) {
-        if (res.status === 409) { state.error = "Undo window has passed (409)."; render(); return; }
-        if (!res.ok) { state.error = "Undo failed (" + res.status + ")."; render(); return; }
-        return fetchTickets();
-      })
-      .catch(function (err) {
-        if (err && err.unauthorized) { return; }
-        state.error = "Undo failed: " + (err && err.message ? err.message : "network error");
-        render();
-      });
-  }
-
-  function undoLast() {
-    var recent = recentTickets();
-    if (recent.length === 0) { return; }
-    undo(recent[0].id);
-  }
-
-  /* ---------------- keyboard (requirement 4) ---------------- */
-
-  function isTypingTarget(el) {
-    if (!el) { return false; }
-    var tag = el.tagName;
-    return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable === true;
-  }
-
-  function moveSelection(delta) {
-    var list = orderedPending();
-    if (list.length === 0) { return; }
-    var idx = -1;
-    for (var i = 0; i < list.length; i++) { if (list[i].id === state.selectedId) { idx = i; break; } }
-    if (idx === -1) { idx = delta > 0 ? -1 : 0; }
-    var next = idx + delta;
-    if (next < 0) { next = 0; }
-    if (next > list.length - 1) { next = list.length - 1; }
-    state.selectedId = list[next].id;
-    render();
-    var card = document.getElementById("card-" + state.selectedId);
-    if (card && card.scrollIntoView) { card.scrollIntoView({ block: "nearest" }); }
-  }
-
-  function pickOption(n) {
-    var list = orderedPending();
-    var ticket = null;
-    for (var i = 0; i < list.length; i++) { if (list[i].id === state.selectedId) { ticket = list[i]; break; } }
-    if (!ticket || !ticket.options || !ticket.options[n - 1]) { return; }
-    state.choices[ticket.id] = ticket.options[n - 1];
-    render();
-  }
-
-  function submitSelected() {
-    var list = orderedPending();
-    for (var i = 0; i < list.length; i++) {
-      if (list[i].id === state.selectedId) { submitAnswer(list[i]); return; }
-    }
-  }
-
-  document.addEventListener("keydown", function (e) {
-    if (isTypingTarget(e.target)) { return; }
-    if (e.metaKey || e.ctrlKey || e.altKey) { return; }
-    if (e.key === "j") { e.preventDefault(); moveSelection(1); }
-    else if (e.key === "k") { e.preventDefault(); moveSelection(-1); }
-    else if (e.key >= "1" && e.key <= "5") { e.preventDefault(); pickOption(parseInt(e.key, 10)); }
-    else if (e.key === "Enter") { e.preventDefault(); submitSelected(); }
-    else if (e.key === "u") { e.preventDefault(); undoLast(); }
-  });
-
-  /* ---------------- rendering ---------------- */
-
-  function captureDrafts() {
-    var inputs = document.querySelectorAll("[data-draft]");
-    for (var i = 0; i < inputs.length; i++) {
-      state.drafts[inputs[i].getAttribute("data-draft")] = inputs[i].value;
-    }
-  }
-
-  function el(tag, cls, text) {
-    var node = document.createElement(tag);
-    if (cls) { node.className = cls; }
-    if (text !== undefined && text !== null) { node.textContent = text; }
-    return node;
-  }
-
-  function urgencyBadge(urgency) {
-    var b = el("span", "badge urgency-" + urgency, "urgency: " + urgency);
-    return b;
-  }
-
-  function buildCard(ticket, isRecent) {
-    var card = el("article", "card" + (ticket.id === state.selectedId ? " selected" : ""));
-    card.id = "card-" + ticket.id;
-    card.setAttribute("aria-label", "Ticket from " + ticket.stream + ": " + ticket.question);
-
-    var head = el("div", "card-head");
-    head.appendChild(el("span", "selmark", "selected"));
-    head.appendChild(el("span", "stream-name", ticket.stream));
-    head.appendChild(el("span", "age", age(ticket.created_at) + " old"));
-    head.appendChild(urgencyBadge(ticket.urgency));
-    if (isRecent) {
-      head.appendChild(el("span", "badge status-answered", "status: answered"));
-      if (ticket.answered_by) { head.appendChild(el("span", "age", "by " + ticket.answered_by)); }
-    }
-    card.appendChild(head);
-
-    card.appendChild(el("p", "question", ticket.question));
-
-    if (ticket.context) {
-      var ctx = el("div", "context", ticket.context);
-      card.appendChild(ctx);
-    }
-
-    if (isRecent) {
-      var ans = el("p", "question", "Answer: " + (ticket.answer || "(none)"));
-      card.appendChild(ans);
-      var undoBtn = el("button", null, "Undo");
-      undoBtn.type = "button";
-      undoBtn.setAttribute("aria-label", "Undo answer for ticket from " + ticket.stream);
-      undoBtn.addEventListener("click", function () { undo(ticket.id); });
-      var row = el("div", "answer-row");
-      row.appendChild(undoBtn);
-      card.appendChild(row);
-      return card;
-    }
-
-    if (ticket.options && ticket.options.length) {
-      var opts = el("div", "options");
-      opts.setAttribute("role", "group");
-      opts.setAttribute("aria-label", "Options for ticket from " + ticket.stream);
-      ticket.options.forEach(function (opt, i) {
-        var b = el("button", null, (i + 1) + ". " + opt);
-        b.type = "button";
-        b.setAttribute("aria-pressed", state.choices[ticket.id] === opt ? "true" : "false");
-        b.addEventListener("click", function () {
-          state.choices[ticket.id] = opt;
-          state.selectedId = ticket.id;
-          render();
-        });
-        opts.appendChild(b);
-      });
-      card.appendChild(opts);
-    }
-
-    var form = el("form", "answer-row");
-    form.setAttribute("novalidate", "novalidate");
-    var label = el("label", null, "Answer");
-    label.setAttribute("for", "free-" + ticket.id);
-    form.appendChild(label);
-    var input = document.createElement("input");
-    input.type = "text";
-    input.id = "free-" + ticket.id;
-    input.setAttribute("data-draft", ticket.id);
-    input.setAttribute("autocomplete", "off");
-    input.value = state.drafts[ticket.id] || "";
-    input.addEventListener("input", function () { state.drafts[ticket.id] = input.value; });
-    input.addEventListener("focus", function () { state.selectedId = ticket.id; });
-    form.appendChild(input);
-    var submit = el("button", null, "Answer");
-    submit.type = "submit";
-    form.appendChild(submit);
-    form.addEventListener("submit", function (e) {
-      e.preventDefault();
-      submitAnswer(ticket);
-    });
-    card.appendChild(form);
-
-    var err = el("div", "card-error");
-    err.id = "err-" + ticket.id;
-    err.hidden = true;
-    err.setAttribute("role", "alert");
-    err.appendChild(el("span", "tag", "Error: "));
-    err.appendChild(el("span", "err-text", ""));
-    card.appendChild(err);
-
-    return card;
-  }
-
-  function render() {
-    captureDrafts();
-
-    var activeId = document.activeElement && document.activeElement.id ? document.activeElement.id : null;
-    var selStart = null, selEnd = null;
-    if (activeId && document.activeElement.setSelectionRange) {
-      try {
-        selStart = document.activeElement.selectionStart;
-        selEnd = document.activeElement.selectionEnd;
-      } catch (e) { /* not a text input */ }
-    }
-
-    var pending = pendingTickets();
-    var recent = recentTickets();
-
-    /* requirement 5: tab title carries the count */
-    document.title = pending.length > 0 ? "(" + pending.length + ") readyroom" : "readyroom";
-
-    /* status line */
-    var statusText = "idle";
-    if (state.live) { statusText = "live (server-sent events)"; }
-    else if (state.pollTimer) { statusText = "polling every 5s"; }
-    else if (!state.token) { statusText = "waiting for token"; }
-    els.statusText.textContent = statusText;
-
-    if (state.error) {
-      els.error.hidden = false;
-      els.errorText.textContent = state.error;
-    } else {
-      els.error.hidden = true;
-      els.errorText.textContent = "";
-    }
-
-    /* pending, grouped by stream, newest stream first */
-    els.pending.textContent = "";
-    if (pending.length === 0) {
-      els.pending.appendChild(el("p", "empty", "No pending tickets."));
-    } else {
-      groupByStream(pending).forEach(function (group) {
-        var section = el("section", "stream-group");
-        section.setAttribute("aria-label", "Stream " + group.stream);
-        var head = el("div", "stream-head");
-        head.appendChild(el("h3", "stream-name", group.stream));
-        head.appendChild(el("span", "stream-count", group.tickets.length + " pending"));
-        section.appendChild(head);
-        group.tickets.forEach(function (t) { section.appendChild(buildCard(t, false)); });
-        els.pending.appendChild(section);
-      });
-    }
-
-    /* recent, undoable for 5 minutes */
-    els.recent.textContent = "";
-    if (recent.length === 0) {
-      els.recent.appendChild(el("p", "empty", "Nothing answered in the last 5 minutes."));
-    } else {
-      recent.forEach(function (t) { els.recent.appendChild(buildCard(t, true)); });
-    }
-
-    /* restore focus + caret so polling re-renders do not interrupt typing */
-    if (activeId) {
-      var again = document.getElementById(activeId);
-      if (again && again.focus) {
-        try {
-          again.focus();
-          if (selStart !== null && again.setSelectionRange) { again.setSelectionRange(selStart, selEnd); }
-        } catch (e) { /* ignore */ }
-      }
-    }
-  }
-
-  /* ---------------- wiring ---------------- */
-
-  els.tokenSave.addEventListener("click", function () {
-    var t = els.tokenInput.value.trim();
-    if (!t) { return; }
-    state.token = t;
-    writeToken(t);
-    state.error = "";
-    showTokenBar(false);
-    startLive();
-    fetchTickets();
-  });
-  els.tokenInput.addEventListener("keydown", function (e) {
-    if (e.key === "Enter") { e.preventDefault(); els.tokenSave.click(); }
-  });
-
-  /* requirement 9: re-render on window load */
-  window.addEventListener("load", render);
-
-  /* boot */
-  state.token = readToken();
-  if (state.token) {
-    showTokenBar(false);
-    startLive();
-    fetchTickets();
-  } else {
-    showTokenBar(true);
-  }
-
-  /* requirement 9: first paint is synchronous, at the end of the script, not in rAF */
-  render();
-})();
-</script>
-</body>
-</html>
-`;
+var public_default = '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<title>readyroom</title>\n<!-- Suppress the /favicon.ico request. The page ships no icon and fetches nothing\n     over the network; an inline empty data URI keeps the console free of a 404. -->\n<link rel="icon" href="data:,">\n<style>\n  /* No external fonts, no external origins, no images fetched over the network.\n     Everything below is self-contained so the page renders with the network cut. */\n\n  :root {\n    --ink: #111;\n    --paper: #fff;\n    --muted: #555;\n    --line: #111;\n    --line-soft: #999;\n    --blocking: #000;\n    --low: #666;\n  }\n\n  * { box-sizing: border-box; }\n\n  html, body {\n    margin: 0;\n    padding: 0;\n    background: var(--paper);\n    color: var(--ink);\n    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;\n    font-size: 16px;\n    line-height: 1.45;\n  }\n\n  body { padding: 16px; max-width: 1100px; margin: 0 auto; }\n\n  h1 { font-size: 1.25rem; margin: 0 0 4px 0; letter-spacing: 0.02em; }\n  h2 { font-size: 1rem; margin: 24px 0 8px 0; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--line); padding-bottom: 4px; }\n  h3 { font-size: 0.95rem; margin: 0 0 8px 0; }\n\n  .sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px 0; }\n\n  /* Status + error banners: text carries the meaning, not colour. */\n  .banner {\n    border: 2px solid var(--line);\n    padding: 8px 10px;\n    margin: 8px 0;\n    font-size: 0.85rem;\n  }\n  .banner[hidden] { display: none; }\n  .banner .tag { font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; }\n\n  #tokenbar { border: 2px solid var(--line); padding: 12px; margin: 12px 0; }\n  #tokenbar[hidden] { display: none; }\n  #tokenbar label { display: block; font-weight: bold; margin-bottom: 6px; }\n  #tokenbar .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }\n  #tokenbar input { flex: 1 1 240px; min-height: 44px; padding: 8px; font: inherit; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }\n\n  button {\n    font: inherit;\n    min-height: 44px;\n    min-width: 44px;\n    padding: 8px 12px;\n    border: 2px solid var(--line);\n    background: var(--paper);\n    color: var(--ink);\n    cursor: pointer;\n  }\n  button:focus-visible, input:focus-visible, a:focus-visible {\n    outline: 3px solid var(--ink);\n    outline-offset: 2px;\n  }\n  /* No hover-only affordances: hover is a bonus, never the only signal. */\n  button:hover { background: #eee; }\n\n  .stream-group { margin: 0 0 20px 0; }\n  .stream-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }\n  .stream-name { font-weight: bold; }\n  .stream-count { color: var(--muted); font-size: 0.85rem; }\n\n  .card {\n    border: 2px solid var(--line);\n    padding: 12px;\n    margin: 10px 0;\n    background: var(--paper);\n  }\n  /* Selection is carried by a thick left border AND a text marker, not colour alone. */\n  .card.selected { border-left-width: 10px; }\n  .card .selmark { display: none; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }\n  .card.selected .selmark { display: inline; }\n\n  .card-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }\n  .age { color: var(--muted); font-size: 0.85rem; }\n\n  .badge {\n    display: inline-block;\n    border: 2px solid var(--line);\n    padding: 1px 6px;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    font-weight: bold;\n  }\n  .badge.urgency-blocking { border-style: double; border-width: 4px; }\n  .badge.urgency-low { border-style: dotted; }\n  .badge.urgency-normal { border-style: solid; }\n  .badge.status-answered { border-style: dashed; }\n\n  .question { font-weight: bold; margin: 6px 0; }\n  .context {\n    white-space: pre-wrap;\n    border-left: 3px solid var(--line-soft);\n    padding: 6px 10px;\n    margin: 8px 0;\n    color: var(--ink);\n    font-size: 0.9rem;\n  }\n  .context[hidden] { display: none; }\n\n  .options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }\n  .options button[aria-pressed="true"] { border-style: double; border-width: 4px; font-weight: bold; }\n\n  .answer-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }\n  .answer-row label { font-size: 0.85rem; }\n  .answer-row input[type="text"] {\n    flex: 1 1 240px;\n    min-height: 44px;\n    padding: 8px;\n    font: inherit;\n    border: 2px solid var(--line);\n    background: var(--paper);\n    color: var(--ink);\n  }\n\n  .card-error { border: 2px solid var(--line); padding: 6px 8px; margin-top: 8px; font-size: 0.85rem; }\n  .card-error[hidden] { display: none; }\n  .card-error .tag { font-weight: bold; text-transform: uppercase; }\n\n  .recent .card { border-style: dashed; }\n  .empty { color: var(--muted); font-style: italic; }\n\n  .hint { color: var(--muted); font-size: 0.8rem; margin-top: 24px; border-top: 1px solid var(--line-soft); padding-top: 8px; }\n  kbd { border: 1px solid var(--line); padding: 0 4px; font: inherit; font-size: 0.8rem; }\n\n  /* No animation on the critical path. Respect reduced motion. */\n  @media (prefers-reduced-motion: reduce) {\n    * { animation: none !important; transition: none !important; }\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .card.selected { transition: border-left-width 80ms linear; }\n  }\n\n  @media print {\n    body { max-width: none; }\n    button { display: none; }\n    .card { break-inside: avoid; }\n  }\n</style>\n</head>\n<body>\n  <header>\n    <h1>readyroom</h1>\n    <p class="sub">Drain the queue. <kbd>j</kbd>/<kbd>k</kbd> move &middot; <kbd>1</kbd>-<kbd>5</kbd> pick &middot; <kbd>Enter</kbd> answer &middot; <kbd>u</kbd> undo</p>\n    <div id="status" class="banner" role="status" aria-live="polite">\n      <span class="tag">Status:</span> <span id="status-text">starting</span>\n    </div>\n    <div id="error" class="banner" role="alert" hidden>\n      <span class="tag">Error:</span> <span id="error-text"></span>\n    </div>\n  </header>\n\n  <section id="tokenbar" hidden aria-labelledby="token-label">\n    <label id="token-label" for="token-input">Access token (READYROOM_TOKEN)</label>\n    <div class="row">\n      <input id="token-input" type="password" autocomplete="off" spellcheck="false" aria-describedby="token-help">\n      <button id="token-save" type="button">Save token</button>\n    </div>\n    <p id="token-help" class="sub">Stored in this browser only. Sent as <code>Authorization: Bearer</code> on every request.</p>\n  </section>\n\n  <main id="app">\n    <section id="pending-section" aria-labelledby="pending-heading">\n      <h2 id="pending-heading">Pending</h2>\n      <div id="pending"></div>\n    </section>\n\n    <section id="recent-section" class="recent" aria-labelledby="recent-heading">\n      <h2 id="recent-heading">Recent (undoable for 5 minutes)</h2>\n      <div id="recent"></div>\n    </section>\n  </main>\n\n  <p class="hint">No markdown rendering. Context is shown as plain text with line breaks preserved.</p>\n\n  <noscript>\n    <div class="banner"><span class="tag">Error:</span> This page needs JavaScript to drain the queue.</div>\n  </noscript>\n\n<script>\n(function () {\n  "use strict";\n\n  var TOKEN_KEY = "readyroom_token";\n  var POLL_MS = 5000;\n  var UNDO_WINDOW_MS = 5 * 60 * 1000;\n\n  var state = {\n    tickets: [],\n    selectedId: null,\n    token: "",\n    abort: null,\n    pollTimer: null,\n    live: false,\n    error: "",\n    choices: {},\n    drafts: {}\n  };\n\n  var els = {\n    status: document.getElementById("status"),\n    statusText: document.getElementById("status-text"),\n    error: document.getElementById("error"),\n    errorText: document.getElementById("error-text"),\n    tokenbar: document.getElementById("tokenbar"),\n    tokenInput: document.getElementById("token-input"),\n    tokenSave: document.getElementById("token-save"),\n    pending: document.getElementById("pending"),\n    recent: document.getElementById("recent")\n  };\n\n  /* ---------------- token handling (requirement 11) ---------------- */\n\n  function readToken() {\n    try { return localStorage.getItem(TOKEN_KEY) || ""; } catch (e) { return ""; }\n  }\n  function writeToken(t) {\n    try { localStorage.setItem(TOKEN_KEY, t); } catch (e) { /* storage may be blocked */ }\n  }\n  function dropToken() {\n    try { localStorage.removeItem(TOKEN_KEY); } catch (e) { /* ignore */ }\n  }\n  function showTokenBar(show) {\n    els.tokenbar.hidden = !show;\n    if (show) { try { els.tokenInput.focus(); } catch (e) {} }\n  }\n\n  /* ---------------- HTTP with Bearer on every request ---------------- */\n\n  function api(path, opts) {\n    opts = opts || {};\n    var headers = { "Authorization": "Bearer " + state.token };\n    if (opts.body) { headers["Content-Type"] = "application/json"; }\n    return fetch(path, {\n      method: opts.method || "GET",\n      headers: headers,\n      body: opts.body\n    }).then(function (res) {\n      if (res.status === 401) {\n        dropToken();\n        state.token = "";\n        state.error = "Token rejected (401). Enter it again.";\n        showTokenBar(true);\n        render();\n        var err = new Error("unauthorized");\n        err.unauthorized = true;\n        throw err;\n      }\n      return res;\n    });\n  }\n\n  function fetchTickets() {\n    if (!state.token) { return Promise.resolve(); }\n    return api("/api/tickets").then(function (res) {\n      if (!res.ok) { throw new Error("tickets " + res.status); }\n      return res.json();\n    }).then(function (data) {\n      state.tickets = (data && data.tickets) || [];\n      state.error = "";\n      render();\n    }).catch(function (err) {\n      if (err && err.unauthorized) { return; }\n      state.error = "Could not load tickets: " + (err && err.message ? err.message : "network error");\n      render();\n    });\n  }\n\n  /* ---------------- live updates (requirement 1) ---------------- */\n\n  function startPolling() {\n    if (state.pollTimer) { return; }\n    state.live = false;\n    fetchTickets();\n    state.pollTimer = setInterval(fetchTickets, POLL_MS);\n    render();\n  }\n  function stopPolling() {\n    if (state.pollTimer) { clearInterval(state.pollTimer); state.pollTimer = null; }\n  }\n\n  /* Fetch-based SSE reader.\n     EventSource cannot attach an Authorization header, so a Bearer-protected\n     /api/events is unreachable through it. Instead we fetch the endpoint with the\n     token, read response.body through a ReadableStream reader, decode with a\n     TextDecoder, and parse text/event-stream frames: frames are separated by a blank\n     line, and the payload rides on `data:` lines. Any failure \u2014 a network error, a\n     non-200 status, or a Worker\'s 501 \u2014 falls back to polling /api/tickets every 5 s,\n     which is the Worker target\'s live-update path. */\n  function handleFrame(frame) {\n    var lines = frame.split("\\n");\n    var sawData = false;\n    for (var i = 0; i < lines.length; i++) {\n      if (lines[i].indexOf("data:") === 0) { sawData = true; }\n    }\n    if (sawData) { fetchTickets(); }\n  }\n\n  function readSseStream(body) {\n    var reader = body.getReader();\n    var decoder = new TextDecoder();\n    var buffer = "";\n    function pump() {\n      return reader.read().then(function (chunk) {\n        if (chunk.done) { throw new Error("sse stream closed"); }\n        buffer += decoder.decode(chunk.value, { stream: true });\n        var idx;\n        while ((idx = buffer.indexOf("\\n\\n")) !== -1) {\n          var frame = buffer.slice(0, idx);\n          buffer = buffer.slice(idx + 2);\n          handleFrame(frame);\n        }\n        return pump();\n      });\n    }\n    return pump();\n  }\n\n  function startLive() {\n    stopLive();\n    if (!state.token) { return; }\n    if (typeof fetch === "undefined" || typeof TextDecoder === "undefined") { startPolling(); return; }\n\n    var controller = null;\n    try { controller = new AbortController(); } catch (e) { controller = null; }\n    if (controller) { state.abort = controller; }\n\n    var options = { headers: { "Authorization": "Bearer " + state.token } };\n    if (controller) { options.signal = controller.signal; }\n\n    fetch("/api/events", options).then(function (res) {\n      if (!res.ok || !res.body) {\n        /* 401, 404, a Worker\'s 501, or a body we cannot stream: poll instead. */\n        startPolling();\n        return;\n      }\n      state.live = true;\n      stopPolling();\n      render();\n      return readSseStream(res.body);\n    }).catch(function () {\n      if (controller && controller.signal.aborted) { return; }\n      state.live = false;\n      startPolling();\n    });\n  }\n  function stopLive() {\n    if (state.abort) {\n      try { state.abort.abort(); } catch (e) { /* ignore */ }\n      state.abort = null;\n    }\n    state.live = false;\n  }\n\n  /* ---------------- derived data ---------------- */\n\n  function pendingTickets() {\n    return state.tickets.filter(function (t) { return t.status === "pending"; });\n  }\n  function recentTickets() {\n    var now = Date.now();\n    return state.tickets.filter(function (t) {\n      if (t.status !== "answered" || !t.answered_at) { return false; }\n      return (now - new Date(t.answered_at).getTime()) <= UNDO_WINDOW_MS;\n    }).sort(function (a, b) {\n      return new Date(b.answered_at).getTime() - new Date(a.answered_at).getTime();\n    });\n  }\n\n  function groupByStream(tickets) {\n    var groups = {};\n    var order = [];\n    tickets.forEach(function (t) {\n      if (!groups[t.stream]) { groups[t.stream] = []; order.push(t.stream); }\n      groups[t.stream].push(t);\n    });\n    order.forEach(function (s) {\n      groups[s].sort(function (a, b) {\n        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();\n      });\n    });\n    order.sort(function (a, b) {\n      return new Date(groups[b][0].created_at).getTime() - new Date(groups[a][0].created_at).getTime();\n    });\n    return order.map(function (s) { return { stream: s, tickets: groups[s] }; });\n  }\n\n  function orderedPending() {\n    var out = [];\n    groupByStream(pendingTickets()).forEach(function (g) {\n      g.tickets.forEach(function (t) { out.push(t); });\n    });\n    return out;\n  }\n\n  function age(iso) {\n    var ms = Date.now() - new Date(iso).getTime();\n    if (!isFinite(ms) || ms < 0) { ms = 0; }\n    var s = Math.floor(ms / 1000);\n    if (s < 60) { return s + "s"; }\n    var m = Math.floor(s / 60);\n    if (m < 60) { return m + "m"; }\n    var h = Math.floor(m / 60);\n    if (h < 24) { return h + "h"; }\n    return Math.floor(h / 24) + "d";\n  }\n\n  /* ---------------- actions ---------------- */\n\n  function setCardError(id, msg) {\n    var el = document.getElementById("err-" + id);\n    if (el) {\n      el.hidden = false;\n      var span = el.querySelector(".err-text");\n      if (span) { span.textContent = msg; }\n    }\n  }\n\n  function submitAnswer(ticket) {\n    var input = document.getElementById("free-" + ticket.id);\n    var text = input ? input.value.trim() : (state.drafts[ticket.id] || "").trim();\n    var choice = state.choices[ticket.id] || "";\n    var answer = text || choice;\n    if (!answer) {\n      setCardError(ticket.id, "Type an answer or pick an option first.");\n      return;\n    }\n    api("/api/answer", {\n      method: "POST",\n      body: JSON.stringify({ id: ticket.id, answer: answer, answered_by: "human" })\n    }).then(function (res) {\n      if (res.status === 404) { setCardError(ticket.id, "Ticket not found (404)."); return; }\n      if (res.status === 409) { setCardError(ticket.id, "Already answered (409)."); return; }\n      if (!res.ok) { setCardError(ticket.id, "Answer failed (" + res.status + ")."); return; }\n      delete state.choices[ticket.id];\n      delete state.drafts[ticket.id];\n      return fetchTickets();\n    }).catch(function (err) {\n      if (err && err.unauthorized) { return; }\n      setCardError(ticket.id, "Answer failed: " + (err && err.message ? err.message : "network error"));\n    });\n  }\n\n  function undo(ticketId) {\n    api("/api/undo", { method: "POST", body: JSON.stringify({ id: ticketId }) })\n      .then(function (res) {\n        if (res.status === 409) { state.error = "Undo window has passed (409)."; render(); return; }\n        if (!res.ok) { state.error = "Undo failed (" + res.status + ")."; render(); return; }\n        return fetchTickets();\n      })\n      .catch(function (err) {\n        if (err && err.unauthorized) { return; }\n        state.error = "Undo failed: " + (err && err.message ? err.message : "network error");\n        render();\n      });\n  }\n\n  function undoLast() {\n    var recent = recentTickets();\n    if (recent.length === 0) { return; }\n    undo(recent[0].id);\n  }\n\n  /* ---------------- keyboard (requirement 4) ---------------- */\n\n  function isTypingTarget(el) {\n    if (!el) { return false; }\n    var tag = el.tagName;\n    return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable === true;\n  }\n\n  function moveSelection(delta) {\n    var list = orderedPending();\n    if (list.length === 0) { return; }\n    var idx = -1;\n    for (var i = 0; i < list.length; i++) { if (list[i].id === state.selectedId) { idx = i; break; } }\n    if (idx === -1) { idx = delta > 0 ? -1 : 0; }\n    var next = idx + delta;\n    if (next < 0) { next = 0; }\n    if (next > list.length - 1) { next = list.length - 1; }\n    state.selectedId = list[next].id;\n    render();\n    var card = document.getElementById("card-" + state.selectedId);\n    if (card && card.scrollIntoView) { card.scrollIntoView({ block: "nearest" }); }\n  }\n\n  function pickOption(n) {\n    var list = orderedPending();\n    var ticket = null;\n    for (var i = 0; i < list.length; i++) { if (list[i].id === state.selectedId) { ticket = list[i]; break; } }\n    if (!ticket || !ticket.options || !ticket.options[n - 1]) { return; }\n    state.choices[ticket.id] = ticket.options[n - 1];\n    render();\n  }\n\n  function submitSelected() {\n    var list = orderedPending();\n    for (var i = 0; i < list.length; i++) {\n      if (list[i].id === state.selectedId) { submitAnswer(list[i]); return; }\n    }\n  }\n\n  document.addEventListener("keydown", function (e) {\n    if (isTypingTarget(e.target)) { return; }\n    if (e.metaKey || e.ctrlKey || e.altKey) { return; }\n    if (e.key === "j") { e.preventDefault(); moveSelection(1); }\n    else if (e.key === "k") { e.preventDefault(); moveSelection(-1); }\n    else if (e.key >= "1" && e.key <= "5") { e.preventDefault(); pickOption(parseInt(e.key, 10)); }\n    else if (e.key === "Enter") { e.preventDefault(); submitSelected(); }\n    else if (e.key === "u") { e.preventDefault(); undoLast(); }\n  });\n\n  /* ---------------- rendering ---------------- */\n\n  function captureDrafts() {\n    var inputs = document.querySelectorAll("[data-draft]");\n    for (var i = 0; i < inputs.length; i++) {\n      state.drafts[inputs[i].getAttribute("data-draft")] = inputs[i].value;\n    }\n  }\n\n  function el(tag, cls, text) {\n    var node = document.createElement(tag);\n    if (cls) { node.className = cls; }\n    if (text !== undefined && text !== null) { node.textContent = text; }\n    return node;\n  }\n\n  function urgencyBadge(urgency) {\n    var b = el("span", "badge urgency-" + urgency, "urgency: " + urgency);\n    return b;\n  }\n\n  function buildCard(ticket, isRecent) {\n    // The `selected` marker is a keyboard-navigation affordance for the pending queue\n    // only. An answered card in "recent" carries no selection target (`j`/`k`/`Enter`\n    // never act on it), so marking it "selected" would be misleading.\n    var card = el("article", "card" + (!isRecent && ticket.id === state.selectedId ? " selected" : ""));\n    card.id = "card-" + ticket.id;\n    card.setAttribute("aria-label", "Ticket from " + ticket.stream + ": " + ticket.question);\n\n    var head = el("div", "card-head");\n    head.appendChild(el("span", "selmark", "selected"));\n    head.appendChild(el("span", "stream-name", ticket.stream));\n    head.appendChild(el("span", "age", age(ticket.created_at) + " old"));\n    head.appendChild(urgencyBadge(ticket.urgency));\n    if (isRecent) {\n      head.appendChild(el("span", "badge status-answered", "status: answered"));\n      if (ticket.answered_by) { head.appendChild(el("span", "age", "by " + ticket.answered_by)); }\n    }\n    card.appendChild(head);\n\n    card.appendChild(el("p", "question", ticket.question));\n\n    if (ticket.context) {\n      var ctx = el("div", "context", ticket.context);\n      card.appendChild(ctx);\n    }\n\n    if (isRecent) {\n      var ans = el("p", "question", "Answer: " + (ticket.answer || "(none)"));\n      card.appendChild(ans);\n      var undoBtn = el("button", null, "Undo");\n      undoBtn.type = "button";\n      undoBtn.setAttribute("aria-label", "Undo answer for ticket from " + ticket.stream);\n      undoBtn.addEventListener("click", function () { undo(ticket.id); });\n      var row = el("div", "answer-row");\n      row.appendChild(undoBtn);\n      card.appendChild(row);\n      return card;\n    }\n\n    if (ticket.options && ticket.options.length) {\n      var opts = el("div", "options");\n      opts.setAttribute("role", "group");\n      opts.setAttribute("aria-label", "Options for ticket from " + ticket.stream);\n      ticket.options.forEach(function (opt, i) {\n        var b = el("button", null, (i + 1) + ". " + opt);\n        b.type = "button";\n        b.setAttribute("aria-pressed", state.choices[ticket.id] === opt ? "true" : "false");\n        b.addEventListener("click", function () {\n          state.choices[ticket.id] = opt;\n          state.selectedId = ticket.id;\n          render();\n        });\n        opts.appendChild(b);\n      });\n      card.appendChild(opts);\n    }\n\n    var form = el("form", "answer-row");\n    form.setAttribute("novalidate", "novalidate");\n    var label = el("label", null, "Answer");\n    label.setAttribute("for", "free-" + ticket.id);\n    form.appendChild(label);\n    var input = document.createElement("input");\n    input.type = "text";\n    input.id = "free-" + ticket.id;\n    input.setAttribute("data-draft", ticket.id);\n    input.setAttribute("autocomplete", "off");\n    input.value = state.drafts[ticket.id] || "";\n    input.addEventListener("input", function () { state.drafts[ticket.id] = input.value; });\n    input.addEventListener("focus", function () { state.selectedId = ticket.id; });\n    form.appendChild(input);\n    var submit = el("button", null, "Answer");\n    submit.type = "submit";\n    form.appendChild(submit);\n    form.addEventListener("submit", function (e) {\n      e.preventDefault();\n      submitAnswer(ticket);\n    });\n    card.appendChild(form);\n\n    var err = el("div", "card-error");\n    err.id = "err-" + ticket.id;\n    err.hidden = true;\n    err.setAttribute("role", "alert");\n    err.appendChild(el("span", "tag", "Error: "));\n    err.appendChild(el("span", "err-text", ""));\n    card.appendChild(err);\n\n    return card;\n  }\n\n  function render() {\n    captureDrafts();\n\n    var activeId = document.activeElement && document.activeElement.id ? document.activeElement.id : null;\n    var selStart = null, selEnd = null;\n    if (activeId && document.activeElement.setSelectionRange) {\n      try {\n        selStart = document.activeElement.selectionStart;\n        selEnd = document.activeElement.selectionEnd;\n      } catch (e) { /* not a text input */ }\n    }\n\n    var pending = pendingTickets();\n    var recent = recentTickets();\n\n    /* requirement 5: tab title carries the count */\n    document.title = pending.length > 0 ? "(" + pending.length + ") readyroom" : "readyroom";\n\n    /* status line */\n    var statusText = "idle";\n    if (state.live) { statusText = "live (server-sent events)"; }\n    else if (state.pollTimer) { statusText = "polling every 5s"; }\n    else if (!state.token) { statusText = "waiting for token"; }\n    els.statusText.textContent = statusText;\n\n    if (state.error) {\n      els.error.hidden = false;\n      els.errorText.textContent = state.error;\n    } else {\n      els.error.hidden = true;\n      els.errorText.textContent = "";\n    }\n\n    /* pending, grouped by stream, newest stream first */\n    els.pending.textContent = "";\n    if (pending.length === 0) {\n      els.pending.appendChild(el("p", "empty", "No pending tickets."));\n    } else {\n      groupByStream(pending).forEach(function (group) {\n        var section = el("section", "stream-group");\n        section.setAttribute("aria-label", "Stream " + group.stream);\n        var head = el("div", "stream-head");\n        head.appendChild(el("h3", "stream-name", group.stream));\n        head.appendChild(el("span", "stream-count", group.tickets.length + " pending"));\n        section.appendChild(head);\n        group.tickets.forEach(function (t) { section.appendChild(buildCard(t, false)); });\n        els.pending.appendChild(section);\n      });\n    }\n\n    /* recent, undoable for 5 minutes */\n    els.recent.textContent = "";\n    if (recent.length === 0) {\n      els.recent.appendChild(el("p", "empty", "Nothing answered in the last 5 minutes."));\n    } else {\n      recent.forEach(function (t) { els.recent.appendChild(buildCard(t, true)); });\n    }\n\n    /* restore focus + caret so polling re-renders do not interrupt typing */\n    if (activeId) {\n      var again = document.getElementById(activeId);\n      if (again && again.focus) {\n        try {\n          again.focus();\n          if (selStart !== null && again.setSelectionRange) { again.setSelectionRange(selStart, selEnd); }\n        } catch (e) { /* ignore */ }\n      }\n    }\n  }\n\n  /* ---------------- wiring ---------------- */\n\n  els.tokenSave.addEventListener("click", function () {\n    var t = els.tokenInput.value.trim();\n    if (!t) { return; }\n    state.token = t;\n    writeToken(t);\n    state.error = "";\n    showTokenBar(false);\n    startLive();\n    fetchTickets();\n  });\n  els.tokenInput.addEventListener("keydown", function (e) {\n    if (e.key === "Enter") { e.preventDefault(); els.tokenSave.click(); }\n  });\n\n  /* requirement 9: re-render on window load */\n  window.addEventListener("load", render);\n\n  /* boot */\n  state.token = readToken();\n  if (state.token) {\n    showTokenBar(false);\n    startLive();\n    fetchTickets();\n  } else {\n    showTokenBar(true);\n  }\n\n  /* requirement 9: first paint is synchronous, at the end of the script, not in rAF */\n  render();\n})();\n</script>\n</body>\n</html>\n';
 
 // src/core/stream.ts
 function resolveStream(explicit, defaultStream) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "readyroom",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "An MCP server that lets coding agents request a human decision without hijacking whichever window is focused. Agents enqueue a ticket; the human drains the queue from one page when they choose to.",
   "type": "module",
   "keywords": [
@@ -40,6 +40,7 @@
     "deploy:worker": "wrangler deploy",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "node --import ./scripts/html-loader-register.mjs --import tsx --test test/*.test.ts test/core/*.test.ts test/storage/*.test.ts",
+    "screenshots": "bash scripts/capture-screenshots.sh",
     "docker:build": "docker build -t ghcr.io/therebelrobot/readyroom:local .",
     "docker:run": "docker run --rm -d -p 127.0.0.1:8971:8971 -v $(pwd)/.state:/app/.state --env-file .env ghcr.io/therebelrobot/readyroom:local",
     "docker:push": "docker buildx build --platform linux/amd64,linux/arm64 -t ghcr.io/therebelrobot/readyroom:latest --push .",