readyroom 0.1.8 → 0.2.0

package/README.md

@@ -71,6 +71,17 @@ moments, desktop first:
 </tr>
 </table>
 
+<table>
+<tr>
+<td align="center"><b>Attached media, expanded</b></td>
+<td align="center"><b>Marked up and annotated</b></td>
+</tr>
+<tr>
+<td><img src="docs/screenshots/pending-media.png" width="280" alt="A ticket with an attached screenshot expanded for inspection: the image on a drawing canvas with Box, Draw, and Clear markup tools, above the optional annotations editor."></td>
+<td><img src="docs/screenshots/media-annotated.png" width="280" alt="The attached image marked up with a red box, and a queued note reading 'nudge the title left by 8px' in the annotations editor."></td>
+</tr>
+</table>
+
 <table>
 <tr>
 <td align="center"><b>Token gate</b></td>
@@ -144,8 +155,14 @@ ask_human({
                               // when it is safe for the agent to proceed without a human.
   timeout_seconds?: number,   // optional. Default 1800. Max 86400.
   urgency?: "low" | "normal" | "blocking",  // optional. Default "normal".
-  stream?: string             // optional. Overrides the env/basename default.
-}) => { id: string, status: "pending", expires_at: string }
+  stream?: string,            // optional. Overrides the env/basename default.
+  media?: Array<{             // optional. Screenshots, audio, or video for the human to inspect.
+    mime_type: string,        //   an image/*, audio/*, or video/* type
+    data_base64: string,      //   standard base64 (a `data:<mime>;base64,` prefix is accepted)
+    filename?: string,
+    caption?: string
+  }>
+}) => { id: string, status: "pending", expires_at: string, media?: MediaRef[] }
 ```
 
 ### `wait_for_answer`
@@ -159,13 +176,19 @@ wait_for_answer({
   timeout_seconds?: number    // default 60, max 600
 }) => {
   id: string,
-  status: "pending" | "answered" | "expired",
+  status: "pending" | "answered" | "expired" | "cancelled",
   answer?: string,
   answered_by?: string,       // "human" | "default"
-  answered_at?: string
+  answered_at?: string,
+  media?: MediaRef[],         // the media you attached, echoed back
+  annotations?: Annotation[]  // the human's notes and any rendered markup copy
 }
 ```
 
+When the human drew on an attached image, the annotated copy is returned **as MCP `image`
+content** alongside the text, so an agent that only speaks MCP can see the markup without
+fetching a URL. `annotations[].annotated_media` also names a blob under `GET /api/media/{id}`.
+
 ### `list_pending`
 
 Lists the tickets still pending across every agent stream. Takes no arguments.
@@ -189,6 +212,30 @@ its own earlier guess. An answer that came from `default_answer` gets a clearly
 prefix — `DEFAULT ANSWER (applied on expiry; no human responded):` — because labelling the
 agent's own default as a human answer would be worse than no prefix at all.
 
+## Media and annotations
+
+Media is **optional**: most tickets have none, and a ticket with media is answered exactly like
+one without. Attach it with `ask_human`'s `media` array (up to 8 items, 8 MiB each, 24 MiB per
+ticket) when a decision needs a screenshot, a clip, or a recording rather than words.
+
+- **Stored out of band.** The bytes live in a media store, keyed by an id; the ticket carries
+  only a `MediaRef` (kind, MIME type, filename, caption, size). `GET /api/tickets` and
+  `tickets.json` therefore stay small, and the page fetches a blob only when you expand a card.
+- **Served same-origin.** `GET /api/media/{id}` returns the bytes under the same Bearer auth as
+  every other `/api/*` route. Nothing is fetched from an external origin.
+- **Expand and inspect.** Each attachment is collapsed behind a *Show N attachments* toggle.
+  Images open on a drawing canvas (`Box`, `Draw`, `Clear markup`); audio and video get a player.
+- **Annotate and send back.** The human can mark up an image and add notes (notes on audio/video
+  capture the playhead position). On **Answer**, a marked-up image is rendered to a PNG, uploaded
+  with `POST /api/media`, and referenced from the answer. Annotations are **optional**: the human
+  may answer with text, a chosen option, annotations, or any combination — but not nothing.
+- **Back to the agent.** `wait_for_answer` returns the annotations as structured fields, and any
+  rendered markup as MCP `image` content, so the agent sees exactly what the human marked.
+
+The three targets share the behaviour; only the storage differs. `FileTicketStore` writes blobs
+under `${READYROOM_STATE_DIR}/media/`, and `DurableObjectTicketStore` chunks each blob across rows
+because a Cloudflare SQLite row is capped at 2 MB.
+
 ## Three ways aboard
 
 They run the same program. They differ in where it lives and who can reach it.
@@ -631,7 +678,8 @@ network otherwise cut. It is inlined at build time into each target's bundle.
 - **Grouped by stream.** Tickets grouped under a stream heading, newest stream first. You need
   to know which agent is asking.
 - **Card contents.** Stream name, ticket age (`4m`), urgency badge, the question, the context,
-  option buttons, a free-text field, and an Answer button.
+  any attached media behind an expand-for-inspection toggle (with drawing and notes), option
+  buttons, a free-text field, and an Answer button.
 - **Keyboard-first.** `j`/`k` move between tickets, `1`-`5` pick an option, `Enter` submits, `u`
   undoes the last answer. Draining a queue with a mouse is the slow path.
 - **Tab title carries the count.** `(3) readyroom`.
@@ -655,8 +703,10 @@ GET  /healthz          -> 200, body "ok"
 GET  /                 -> the readyroom page (index.html)
 GET  /api/tickets      -> { tickets: Ticket[] }   pending + last 5 min of answered
 GET  /api/events       -> text/event-stream of ticket changes   (501 on the Worker)
-POST /api/answer       -> { id, answer, answered_by? } -> 200 | 404 | 409 already answered
+POST /api/answer       -> { id, answer?, answered_by?, annotations? } -> 200 | 400 | 404 | 409
 POST /api/undo         -> { id } -> 200 | 409 outside the undo window
+POST /api/media        -> { mime_type, data_base64 } -> 201 { media: MediaRef }
+GET  /api/media/{id}   -> the blob bytes (Content-Type from the stored MIME) | 404
 POST /mcp/{stream}     -> the Streamable HTTP MCP endpoint (Origin-guarded)
 ```
 
@@ -665,18 +715,22 @@ Unknown route -> `404`. Known route, wrong method -> `405`. The Node target addi
 
 ## CI/CD
 
-Four GitHub Actions workflows:
+Five GitHub Actions workflows:
 
+- **`.github/workflows/release.yml`** — on every push to `main` (that is, every merged PR): runs
+  [semantic-release](https://semantic-release.gitbook.io) over the conventional-commit messages
+  since the last tag, then versions, changelogs, tags, and publishes the release. It is the
+  entry point; the four below are its downstream stages.
 - **`.github/workflows/ci.yml`** — on push and PR: `npm ci`, typecheck, build,
   `wrangler deploy --dry-run`, `docker build`.
 - **`.github/workflows/publish.yml`** — on the default branch and `v*` tags: buildx for
   `linux/amd64,linux/arm64` (arm64 is required; the deploy target is a Pi), push to GHCR, auth
   via the built-in `GITHUB_TOKEN` with `packages: write` (no PAT, no repo secrets),
-  `docker/metadata-action` tags (`latest` on the default branch, semver on `v*`, `sha-<short>`),
-  GHA build cache scoped per image, one matrix entry per image. Supply chain:
+  `docker/metadata-action` tags (`latest` on the default branch and on `v*`, semver on `v*`,
+  `sha-<short>`), GHA build cache scoped per image, one matrix entry per image. Supply chain:
   `provenance: mode=max`, `sbom: true`, and `actions/attest-build-provenance` pushed to the
   registry.
-- **`.github/workflows/publish-npm.yml`** — on `v*` tags: `npm publish` with provenance, using
+- **`.github/workflows/npm-publish.yml`** — on `v*` tags: `npm publish` with provenance, using
   npm Trusted Publishing (OIDC) rather than a stored token. It needs `id-token: write` and the
   trusted-publisher entry configured on the package.
 - **`.github/workflows/deploy-worker.yml`** — on `v*` tags: `wrangler deploy` with
@@ -687,6 +741,48 @@ Four GitHub Actions workflows:
 
 `.github/dependabot.yml` covers `github-actions`, `npm`, and `docker`.
 
+### Releasing
+
+Merging a PR to `main` cuts the release. There is no version to bump and no tag to push:
+`release.yml` runs [semantic-release](https://semantic-release.gitbook.io), which reads the
+commit messages since the last release and picks the version by the usual convention:
+
+| Commit | Version bump |
+| --- | --- |
+| `fix: …` | patch |
+| `feat: …` | minor |
+| any type carrying a `BREAKING CHANGE:` footer | minor while `0.x`, major from `1.0` |
+| `docs:`, `chore:`, `refactor:`, `test:`, … | no release |
+
+It writes `CHANGELOG.md` and the new version into `package.json`, commits them
+(`chore(release): vX.Y.Z [skip ci]`), tags `vX.Y.Z`, and opens the GitHub Release. A merge whose
+commits are all non-releasing finishes green and publishes nothing.
+
+**Pre-1.0 behaviour.** While the version is still `0.x`, a breaking change bumps **minor** rather
+than major, so a `BREAKING CHANGE:` never jumps you to 1.0.0 by surprise. That downgrade lives in
+`release.config.js` and switches itself off the moment the current version's major is no longer
+`0`. To reach 1.0 deliberately, run `npm run release:major` — it bumps and tags `v1.0.0` — and
+from the next release on breaking changes bump major again.
+
+**Why the release workflow dispatches the others instead of leaning on the tag.** A tag pushed
+by a workflow's built-in `GITHUB_TOKEN` does not start other workflows: GitHub suppresses runs
+for events caused by `GITHUB_TOKEN` to prevent recursion, so the `v*` triggers above would stay
+silent. `workflow_dispatch` is the one event that rule exempts, so `release.yml` dispatches
+`npm-publish.yml`, `publish.yml`, and (when enabled) `deploy-worker.yml` on the new tag itself.
+The whole pipeline therefore runs on the built-in token — **no PAT and no repo secret**. If you
+ever switch `release.yml` to a PAT or a GitHub App token, remove that dispatch step, or the tag
+trigger and the dispatch will both fire.
+
+The `npm run release:patch|minor|major` scripts still work as a manual fallback — they push a
+tag, and the `v*` triggers pick it up — but with semantic-release they are no longer part of the
+normal flow.
+
+semantic-release, `@semantic-release/changelog`, and `@semantic-release/git` are
+devDependencies; the other release plugins resolve from semantic-release itself. The release job
+deliberately does **not** request `id-token: write`, so the OIDC token never sits beside
+installed dependency code: publishing stays in `npm-publish.yml`, whose two-job split keeps the
+token out of the build.
+
 ### npm publishing
 
 Trusted publishing (OIDC) is used, so no `NODE_AUTH_TOKEN` is stored. **The very first publish

package/dist/server.mjs

@@ -7322,6 +7322,13 @@ var UNDO_WINDOW_MS = 5 * 60 * 1e3;
 var RECENT_WINDOW_MS = 5 * 60 * 1e3;
 var POLL_INTERVAL_MS = 250;
 var DEFAULT_STATE_DIR = "./.state";
+var MEDIA_DIR = "media";
+var MAX_MEDIA_FILES = 8;
+var MAX_MEDIA_BYTES_PER_FILE = 8 * 1024 * 1024;
+var MAX_MEDIA_BYTES_PER_TICKET = 24 * 1024 * 1024;
+var MAX_ANNOTATION_BYTES = 8 * 1024 * 1024;
+var MAX_ANNOTATIONS = 32;
+var MAX_BODY_BYTES = 48 * 1024 * 1024;
 
 // src/config.ts
 var ENV_ALLOWED_ORIGINS = "READYROOM_ALLOWED_ORIGINS";
@@ -7501,7 +7508,80 @@ async function acquireDaemonRole(stateDir, port) {
 }
 
 // public/index.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';
+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  /* Media is fetched with the Bearer token (fetch, not <img src>), then shown from an\n     object URL. Expansion is a real <button> (keyboard-operable); drawing never relies\n     on hover; nothing is colour-only. */\n  .media-section { margin: 10px 0; }\n  .media-toggle { width: 100%; text-align: left; }\n  .media-list[hidden] { display: none; }\n  .media-item { border: 1px solid var(--line-soft); padding: 8px; margin: 8px 0; }\n  .media-item figcaption { font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }\n  .media-stage { margin: 6px 0; }\n  .media-stage img, .media-stage video, .media-stage audio { max-width: 100%; display: block; }\n  .media-stage video { background: #000; }\n  .media-stage canvas {\n    max-width: 100%;\n    height: auto;\n    display: block;\n    touch-action: none;\n    cursor: crosshair;\n    border: 1px solid var(--line-soft);\n  }\n  .media-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }\n  .media-tools button[aria-pressed="true"] { border-style: double; border-width: 4px; font-weight: bold; }\n  .media-status { font-size: 0.8rem; color: var(--muted); }\n  .annotations { border-top: 1px dashed var(--line-soft); margin-top: 10px; padding-top: 8px; }\n  .annotations h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px 0; }\n  .note { border: 1px solid var(--line-soft); padding: 6px 8px; margin: 6px 0; font-size: 0.9rem; }\n  .note-text { white-space: pre-wrap; }\n  .note-meta { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }\n  .note-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }\n  .note-add input[type="text"] {\n    flex: 1 1 200px;\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  .note-add select {\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  .annotation-image { margin: 8px 0; }\n  .annotation-image img { max-width: 100%; border: 1px solid var(--line-soft); }\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. Attached media is fetched with your token only when you expand a ticket, and never from an external origin.</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    /* Media and annotation state, all keyed so it survives the polling re-render:\n       notes[ticketId] -> [{ text, media_id?, at_seconds? }]\n       noteDrafts[key] -> in-progress note text (key = ticketId + ":" + (mediaId||""))\n       shapes[mediaId] -> [{ tool: "box"|"draw", ... }] in the image\'s natural pixels\n       expanded[ticketId] -> whether the attachment list is open\n       mediaUrls[mediaId] -> object URL of the fetched blob (never revoked; ids are immutable) */\n    notes: {},\n    noteDrafts: {},\n    noteTargets: {},\n    shapes: {},\n    canvasScale: {},\n    tool: "box",\n    expanded: {},\n    mediaUrls: {},\n    mediaPending: {},\n    mediaErrors: {},\n    /* True while a stroke is in progress, so a poll does not replace the canvas\n       mid-drag; the pending render runs when the stroke ends. */\n    drawing: false,\n    renderQueued: false\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      // Do not replace the DOM mid-stroke; queue the render for when the stroke ends.\n      if (state.drawing) { state.renderQueued = true; } else { 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  /* ---------------- media + annotations ---------------- */\n\n  function formatBytes(n) {\n    if (typeof n !== "number" || !isFinite(n)) { return "?"; }\n    if (n < 1024) { return n + " B"; }\n    if (n < 1024 * 1024) { return (n / 1024).toFixed(1) + " KiB"; }\n    return (n / (1024 * 1024)).toFixed(1) + " MiB";\n  }\n\n  function formatTime(seconds) {\n    var s = Math.max(0, Math.floor(seconds));\n    var m = Math.floor(s / 60);\n    var rest = s % 60;\n    return m + ":" + (rest < 10 ? "0" : "") + rest;\n  }\n\n  function findMedia(ticket, id) {\n    var media = ticket.media || [];\n    for (var i = 0; i < media.length; i++) { if (media[i].id === id) { return media[i]; } }\n    return null;\n  }\n\n  function mediaName(ticket, id) {\n    var media = ticket.media || [];\n    for (var i = 0; i < media.length; i++) {\n      if (media[i].id === id) { return media[i].filename || ("attachment " + (i + 1) + " (" + media[i].kind + ")"); }\n    }\n    return "attachment";\n  }\n\n  /* Media is fetched with the Bearer token, then shown from an object URL: <img src>\n     and <audio src> cannot attach an Authorization header, exactly like EventSource. */\n  function loadMediaObjectUrl(ref) {\n    if (state.mediaUrls[ref.id]) { return Promise.resolve(state.mediaUrls[ref.id]); }\n    if (state.mediaPending[ref.id]) { return state.mediaPending[ref.id]; }\n    var promise = api("/api/media/" + encodeURIComponent(ref.id)).then(function (res) {\n      if (!res.ok) { throw new Error("media " + res.status); }\n      return res.blob();\n    }).then(function (blob) {\n      var url = URL.createObjectURL(blob);\n      state.mediaUrls[ref.id] = url;\n      delete state.mediaPending[ref.id];\n      return url;\n    }).catch(function (err) {\n      delete state.mediaPending[ref.id];\n      state.mediaErrors[ref.id] = err && err.message ? err.message : "load failed";\n      throw err;\n    });\n    state.mediaPending[ref.id] = promise;\n    return promise;\n  }\n\n  function drawShape(ctx, shape) {\n    ctx.save();\n    ctx.lineWidth = 3;\n    ctx.strokeStyle = "#d40000";\n    ctx.lineJoin = "round";\n    ctx.lineCap = "round";\n    if (shape.tool === "box") {\n      var x = Math.min(shape.x0, shape.x1);\n      var y = Math.min(shape.y0, shape.y1);\n      ctx.strokeRect(x, y, Math.abs(shape.x1 - shape.x0), Math.abs(shape.y1 - shape.y0));\n    } else if (shape.tool === "draw" && shape.points && shape.points.length > 1) {\n      ctx.beginPath();\n      ctx.moveTo(shape.points[0].x, shape.points[0].y);\n      for (var i = 1; i < shape.points.length; i++) { ctx.lineTo(shape.points[i].x, shape.points[i].y); }\n      ctx.stroke();\n    }\n    ctx.restore();\n  }\n\n  function toolButton(tool, label) {\n    var b = el("button", null, label);\n    b.type = "button";\n    b.setAttribute("aria-pressed", state.tool === tool ? "true" : "false");\n    b.addEventListener("click", function () { state.tool = tool; render(); });\n    return b;\n  }\n\n  /* The expanded image is a canvas you draw on. The base image lives offscreen so a\n     repaint can restore it under the committed shapes plus the in-progress stroke. */\n  function buildImageCanvas(ref, url) {\n    var wrap = el("div", "media-canvas-wrap");\n    var tools = el("div", "media-tools");\n    tools.appendChild(toolButton("box", "Box"));\n    tools.appendChild(toolButton("draw", "Draw"));\n    var clear = el("button", null, "Clear markup");\n    clear.type = "button";\n    clear.addEventListener("click", function () {\n      state.shapes[ref.id] = [];\n      render();\n    });\n    tools.appendChild(clear);\n    tools.appendChild(el("span", "media-status", "Draw to mark up; markup is sent with your answer."));\n    wrap.appendChild(tools);\n\n    var canvas = document.createElement("canvas");\n    canvas.id = "canvas-" + ref.id;\n    canvas.setAttribute("aria-label", (ref.filename || "attached image") + ". Draw on the image to annotate it.");\n    wrap.appendChild(canvas);\n\n    var base = document.createElement("canvas");\n    var current = null;\n    var drawing = false;\n\n    function repaint() {\n      var ctx = canvas.getContext("2d");\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      ctx.drawImage(base, 0, 0);\n      var shapes = state.shapes[ref.id] || [];\n      for (var i = 0; i < shapes.length; i++) { drawShape(ctx, shapes[i]); }\n      if (current) { drawShape(ctx, current); }\n    }\n\n    function toCanvas(e) {\n      var rect = canvas.getBoundingClientRect();\n      return {\n        x: (e.clientX - rect.left) * (canvas.width / rect.width),\n        y: (e.clientY - rect.top) * (canvas.height / rect.height)\n      };\n    }\n\n    function endStroke() {\n      if (!drawing) { return; }\n      drawing = false;\n      state.drawing = false;\n      if (current) {\n        state.shapes[ref.id] = (state.shapes[ref.id] || []).concat([current]);\n        current = null;\n      }\n      repaint();\n      if (state.renderQueued) { state.renderQueued = false; render(); }\n    }\n\n    canvas.addEventListener("pointerdown", function (e) {\n      if (e.button !== undefined && e.button !== 0) { return; }\n      drawing = true;\n      state.drawing = true;\n      try { canvas.setPointerCapture(e.pointerId); } catch (err) { /* not fatal */ }\n      var p = toCanvas(e);\n      current = state.tool === "box"\n        ? { tool: "box", x0: p.x, y0: p.y, x1: p.x, y1: p.y }\n        : { tool: "draw", points: [p] };\n      repaint();\n      e.preventDefault();\n    });\n    canvas.addEventListener("pointermove", function (e) {\n      if (!drawing || !current) { return; }\n      var p = toCanvas(e);\n      if (current.tool === "box") { current.x1 = p.x; current.y1 = p.y; }\n      else { current.points.push(p); }\n      repaint();\n      e.preventDefault();\n    });\n    canvas.addEventListener("pointerup", endStroke);\n    canvas.addEventListener("pointercancel", endStroke);\n\n    var img = new Image();\n    img.onload = function () {\n      var maxDim = 2400;\n      var scale = Math.min(1, maxDim / Math.max(img.naturalWidth, img.naturalHeight));\n      canvas.width = Math.max(1, Math.round(img.naturalWidth * scale));\n      canvas.height = Math.max(1, Math.round(img.naturalHeight * scale));\n      // Shapes are captured in canvas pixels; record the ratio so an annotated copy\n      // rendered at natural size can scale them back up.\n      state.canvasScale[ref.id] = canvas.width / img.naturalWidth;\n      base.width = canvas.width;\n      base.height = canvas.height;\n      base.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);\n      repaint();\n    };\n    img.src = url;\n    return wrap;\n  }\n\n  /* A player/stage for one attachment. Loads lazily on first mount; re-mounts are free\n     because the object URL is cached in state. */\n  function mountMedia(ref, ticket, isRecent) {\n    var stage = el("div", "media-stage");\n    stage.setAttribute("data-media-stage", "1");\n\n    function build() {\n      var url = state.mediaUrls[ref.id];\n      if (ref.kind === "image" && !isRecent) {\n        return buildImageCanvas(ref, url);\n      }\n      if (ref.kind === "image") {\n        var img = document.createElement("img");\n        img.alt = ref.filename || "attached image";\n        img.src = url;\n        return img;\n      }\n      var node = document.createElement(ref.kind === "audio" ? "audio" : "video");\n      node.controls = true;\n      node.id = "player-" + ref.id;\n      node.preload = "metadata";\n      node.src = url;\n      return node;\n    }\n\n    function refresh() {\n      stage.textContent = "";\n      if (state.mediaUrls[ref.id]) {\n        stage.appendChild(build());\n        return;\n      }\n      if (state.mediaErrors[ref.id]) {\n        stage.appendChild(el("div", "media-status", "Could not load attachment: " + state.mediaErrors[ref.id]));\n        return;\n      }\n      stage.appendChild(el("div", "media-status", "Loading " + ref.kind + "\u2026"));\n    }\n\n    refresh();\n    if (!state.mediaUrls[ref.id] && !state.mediaErrors[ref.id]) {\n      loadMediaObjectUrl(ref).then(refresh, refresh);\n    }\n    return stage;\n  }\n\n  function buildMediaItem(ref, ticket, isRecent, index) {\n    var fig = el("figure", "media-item");\n    fig.setAttribute("data-media-item", ref.id);\n    var name = ref.filename || ("attachment " + (index + 1) + " (" + ref.kind + ")");\n    fig.appendChild(el("figcaption", null, name + " \xB7 " + ref.mime_type + " \xB7 " + formatBytes(ref.size_bytes)));\n    if (ref.caption) { fig.appendChild(el("div", "media-status", ref.caption)); }\n    fig.appendChild(mountMedia(ref, ticket, isRecent));\n    return fig;\n  }\n\n  function addNote(ticketId, note) {\n    if (!state.notes[ticketId]) { state.notes[ticketId] = []; }\n    state.notes[ticketId].push(note);\n    // Clear the field itself, not just the draft: render() re-captures the input\'s\n    // value at the top of the pass, so clearing only the draft would be undone.\n    var input = document.getElementById("note-" + ticketId);\n    if (input) { input.value = ""; }\n    state.noteDrafts[ticketId + ":note"] = "";\n    render();\n  }\n\n  function removeNote(ticketId, index) {\n    if (state.notes[ticketId]) { state.notes[ticketId].splice(index, 1); }\n    render();\n  }\n\n  function buildNotesList(ticket, isRecent) {\n    var list = el("div", "notes-list");\n    var notes = state.notes[ticket.id] || [];\n    if (notes.length === 0) {\n      list.appendChild(el("p", "media-status", "No annotations yet. Markup you draw and notes you add are sent back with your answer."));\n      return list;\n    }\n    notes.forEach(function (note, index) {\n      var item = el("div", "note");\n      item.appendChild(el("div", "note-text", note.text));\n      var meta = [];\n      if (note.media_id) { meta.push(mediaName(ticket, note.media_id)); }\n      if (note.at_seconds !== undefined && note.at_seconds !== null) { meta.push(formatTime(note.at_seconds)); }\n      if (meta.length) { item.appendChild(el("div", "note-meta", meta.join(" \xB7 "))); }\n      if (!isRecent) {\n        var row = el("div", "note-add");\n        var rm = el("button", null, "Remove");\n        rm.type = "button";\n        rm.addEventListener("click", function () { removeNote(ticket.id, index); });\n        row.appendChild(rm);\n        item.appendChild(row);\n      }\n      list.appendChild(item);\n    });\n    return list;\n  }\n\n  function buildNoteAdder(ticket, media) {\n    var form = el("form", "note-add");\n    form.setAttribute("novalidate", "novalidate");\n    var key = ticket.id + ":note";\n\n    var input = document.createElement("input");\n    input.type = "text";\n    input.id = "note-" + ticket.id;\n    input.setAttribute("data-notedraft", key);\n    input.setAttribute("autocomplete", "off");\n    input.setAttribute("placeholder", "Add a note");\n    input.value = state.noteDrafts[key] || "";\n    input.addEventListener("input", function () { state.noteDrafts[key] = input.value; });\n    input.addEventListener("focus", function () { state.selectedId = ticket.id; });\n\n    var select = document.createElement("select");\n    select.id = "notetarget-" + ticket.id;\n    select.setAttribute("aria-label", "Which attachment the note is about");\n    var whole = document.createElement("option");\n    whole.value = "";\n    whole.textContent = "Whole ticket";\n    select.appendChild(whole);\n    media.forEach(function (ref, i) {\n      var option = document.createElement("option");\n      option.value = ref.id;\n      option.textContent = ref.filename || ("attachment " + (i + 1) + " (" + ref.kind + ")");\n      select.appendChild(option);\n    });\n    var targetKey = ticket.id + ":notetarget";\n    if (state.noteTargets[targetKey]) { select.value = state.noteTargets[targetKey]; }\n    select.addEventListener("change", function () { state.noteTargets[targetKey] = select.value; });\n\n    var add = el("button", null, "Add note");\n    add.type = "submit";\n    form.appendChild(input);\n    form.appendChild(select);\n    form.appendChild(add);\n\n    form.addEventListener("submit", function (e) {\n      e.preventDefault();\n      var text = input.value.trim();\n      if (!text) { return; }\n      var note = { text: text };\n      if (select.value) {\n        note.media_id = select.value;\n        var ref = findMedia(ticket, select.value);\n        if (ref && (ref.kind === "audio" || ref.kind === "video")) {\n          var player = document.getElementById("player-" + ref.id);\n          if (player && isFinite(player.currentTime)) { note.at_seconds = Math.round(player.currentTime * 10) / 10; }\n        }\n      }\n      addNote(ticket.id, note);\n    });\n    return form;\n  }\n\n  function buildAnnotationEditor(ticket) {\n    var media = ticket.media || [];\n    if (media.length === 0) { return null; }\n    var box = el("div", "annotations");\n    box.appendChild(el("h4", null, "Annotations (optional)"));\n    box.appendChild(buildNotesList(ticket, false));\n    box.appendChild(buildNoteAdder(ticket, media));\n    return box;\n  }\n\n  function buildAnnotationsReadonly(ticket) {\n    var annotations = ticket.annotations || [];\n    if (annotations.length === 0) { return null; }\n    var box = el("div", "annotations");\n    box.appendChild(el("h4", null, "Annotations (" + annotations.length + ")"));\n    annotations.forEach(function (a) {\n      var item = el("div", "note");\n      if (a.text) { item.appendChild(el("div", "note-text", a.text)); }\n      var meta = [];\n      if (a.media_id) { meta.push(mediaName(ticket, a.media_id)); }\n      if (a.at_seconds !== undefined && a.at_seconds !== null) { meta.push(formatTime(a.at_seconds)); }\n      if (a.annotated_media) { meta.push("annotated image"); }\n      if (meta.length) { item.appendChild(el("div", "note-meta", meta.join(" \xB7 "))); }\n      box.appendChild(item);\n      if (a.annotated_media) {\n        var fig = el("div", "annotation-image");\n        fig.appendChild(mountMedia(a.annotated_media, ticket, true));\n        box.appendChild(fig);\n      }\n    });\n    return box;\n  }\n\n  function buildMediaSection(ticket, isRecent) {\n    var media = ticket.media || [];\n    var annotations = ticket.annotations || [];\n    if (media.length === 0 && annotations.length === 0) { return null; }\n\n    var section = el("div", "media-section");\n\n    if (media.length > 0) {\n      var expanded = !!state.expanded[ticket.id];\n      var toggle = el("button", "media-toggle",\n        (expanded ? "Hide " : "Show ") + media.length + " attachment" + (media.length === 1 ? "" : "s") +\n        (isRecent ? "" : " for inspection"));\n      toggle.type = "button";\n      toggle.setAttribute("aria-expanded", expanded ? "true" : "false");\n      var list = el("div", "media-list");\n      list.hidden = !expanded;\n      if (expanded) {\n        media.forEach(function (ref, i) { list.appendChild(buildMediaItem(ref, ticket, isRecent, i)); });\n      }\n      toggle.addEventListener("click", function () {\n        state.expanded[ticket.id] = !state.expanded[ticket.id];\n        render();\n      });\n      section.appendChild(toggle);\n      section.appendChild(list);\n    }\n\n    if (isRecent) {\n      var readOnly = buildAnnotationsReadonly(ticket);\n      if (readOnly) { section.appendChild(readOnly); }\n    } else {\n      var editor = buildAnnotationEditor(ticket);\n      if (editor) { section.appendChild(editor); }\n    }\n\n    return section;\n  }\n\n  /* Render an annotated copy offscreen, independent of whether the canvas is mounted.\n     Shapes are in canvas pixels, so a fresh canvas at the image\'s natural size needs\n     them scaled up to match. */\n  function renderAnnotatedBlob(ref) {\n    return loadMediaObjectUrl(ref).then(function (url) {\n      return new Promise(function (resolve, reject) {\n        var img = new Image();\n        img.onload = function () {\n          var canvas = document.createElement("canvas");\n          canvas.width = img.naturalWidth;\n          canvas.height = img.naturalHeight;\n          var ctx = canvas.getContext("2d");\n          ctx.drawImage(img, 0, 0);\n          // Shapes are in on-screen canvas pixels; the copy is at natural size, so scale\n          // by the inverse of the on-screen ratio (1 when the image was not downscaled).\n          var baseScale = state.canvasScale[ref.id] || 1;\n          var shapes = state.shapes[ref.id] || [];\n          ctx.save();\n          ctx.scale(1 / baseScale, 1 / baseScale);\n          for (var i = 0; i < shapes.length; i++) { drawShape(ctx, shapes[i]); }\n          ctx.restore();\n          canvas.toBlob(function (blob) { blob ? resolve(blob) : reject(new Error("could not render image")); }, "image/png");\n        };\n        img.onerror = function () { reject(new Error("could not load image")); };\n        img.src = url;\n      });\n    });\n  }\n\n  function blobToBase64(blob) {\n    return new Promise(function (resolve, reject) {\n      var reader = new FileReader();\n      reader.onload = function () {\n        var result = String(reader.result || "");\n        var comma = result.indexOf(",");\n        resolve(comma >= 0 ? result.slice(comma + 1) : result);\n      };\n      reader.onerror = function () { reject(new Error("could not read image")); };\n      reader.readAsDataURL(blob);\n    });\n  }\n\n  function uploadImageBlob(blob) {\n    return blobToBase64(blob).then(function (data_base64) {\n      return api("/api/media", {\n        method: "POST",\n        body: JSON.stringify({ mime_type: "image/png", data_base64: data_base64 })\n      });\n    }).then(function (res) {\n      if (!res.ok) { throw new Error("media upload " + res.status); }\n      return res.json();\n    }).then(function (data) {\n      if (!data || !data.media || !data.media.id) { throw new Error("media upload returned no id"); }\n      return data.media.id;\n    });\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\n    var notes = (state.notes[ticket.id] || []).slice();\n    var media = ticket.media || [];\n    // A media item counts as markup only if at least one shape was committed on it.\n    var marked = media.filter(function (ref) { return (state.shapes[ref.id] || []).length > 0; });\n\n    if (!answer && notes.length === 0 && marked.length === 0) {\n      setCardError(ticket.id, "Type an answer, pick an option, or add an annotation first.");\n      return;\n    }\n\n    var annotations = notes.map(function (note) {\n      var a = { text: note.text };\n      if (note.media_id) { a.media_id = note.media_id; }\n      if (note.at_seconds !== undefined && note.at_seconds !== null) { a.at_seconds = note.at_seconds; }\n      return a;\n    });\n\n    // Upload each annotated image first (with POST /api/media), then reference it by id\n    // in the answer. A missing or non-image reference is a 400, so this order matters.\n    Promise.all(marked.map(function (ref) {\n      return renderAnnotatedBlob(ref).then(uploadImageBlob).then(function (mediaId) {\n        annotations.push({ media_id: ref.id, annotated_media_id: mediaId });\n      });\n    })).then(function () {\n      return api("/api/answer", {\n        method: "POST",\n        body: JSON.stringify({ id: ticket.id, answer: answer, answered_by: "human", annotations: annotations })\n      });\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.status === 400) { setCardError(ticket.id, "Answer rejected (400)."); 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      delete state.notes[ticket.id];\n      media.forEach(function (ref) { delete state.shapes[ref.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    // While the pointer/keyboard focus is inside a media stage (the drawing canvas, a\n    // player), the single-key shortcuts would fight the media interaction.\n    if (e.target && e.target.closest && e.target.closest("[data-media-stage]")) { 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 captureNoteDrafts() {\n    var inputs = document.querySelectorAll("[data-notedraft]");\n    for (var i = 0; i < inputs.length; i++) {\n      state.noteDrafts[inputs[i].getAttribute("data-notedraft")] = 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    var mediaSection = buildMediaSection(ticket, isRecent);\n    if (mediaSection) { card.appendChild(mediaSection); }\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    captureNoteDrafts();\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/media.ts
+function mediaKind(mimeType) {
+  const base = mimeType.toLowerCase().split(";")[0]?.trim() ?? "";
+  if (base.startsWith("image/")) {
+    return "image";
+  }
+  if (base.startsWith("audio/")) {
+    return "audio";
+  }
+  if (base.startsWith("video/")) {
+    return "video";
+  }
+  return void 0;
+}
+function dataUriMime(input) {
+  const match = /^data:([^;,]+);base64,/i.exec(input.trim());
+  return match === null ? void 0 : match[1].toLowerCase();
+}
+function stripDataUri(input) {
+  return input.trim().replace(/^data:[^;,]+;base64,/i, "");
+}
+function normalizeBase64(input) {
+  return input.replace(/\s+/g, "");
+}
+function base64ToBytes(base642) {
+  const binary = atob(base642);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+}
+function bytesToBase64(bytes) {
+  let binary = "";
+  const chunk = 32768;
+  for (let offset = 0; offset < bytes.length; offset += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + chunk));
+  }
+  return btoa(binary);
+}
+function base64ByteLength(base642) {
+  const length = base642.length;
+  if (length === 0) {
+    return 0;
+  }
+  let padding = 0;
+  if (base642.endsWith("==")) {
+    padding = 2;
+  } else if (base642.endsWith("=")) {
+    padding = 1;
+  }
+  return Math.floor(length * 3 / 4) - padding;
+}
+function buildMediaRef(id, input, now2) {
+  const ref = {
+    id,
+    kind: mediaKind(input.mime_type) ?? "image",
+    mime_type: input.mime_type,
+    size_bytes: base64ByteLength(input.data_base64),
+    created_at: now2
+  };
+  if (input.filename !== void 0) {
+    ref.filename = input.filename;
+  }
+  if (input.caption !== void 0) {
+    ref.caption = input.caption;
+  }
+  return ref;
+}
+function isSafeMediaId(id) {
+  return /^[A-Za-z0-9_-]{1,128}$/.test(id);
+}
 
 // src/core/stream.ts
 function resolveStream(explicit, defaultStream) {
@@ -7549,6 +7629,11 @@ function makeAudit(ticketId, action, at, by, answer2) {
   }
   return entry;
 }
+async function uploadMedia(store, input, now2) {
+  const id = newId();
+  await store.putMedia({ id, mime_type: input.mime_type, data_base64: input.data_base64 });
+  return buildMediaRef(id, input, now2);
+}
 async function enqueue(store, input, options) {
   const stream = resolveStream(input.stream, options.defaultStream);
   const timeoutSeconds = input.timeout_seconds ?? DEFAULT_TIMEOUT_SECONDS;
@@ -7572,8 +7657,19 @@ async function enqueue(store, input, options) {
   if (input.default_answer !== void 0) {
     ticket.default_answer = input.default_answer;
   }
+  const media = [];
+  if (input.media !== void 0 && input.media.length > 0) {
+    for (const item of input.media) {
+      media.push(await uploadMedia(store, item, created_at));
+    }
+    ticket.media = media;
+  }
   await store.put(ticket);
-  await store.appendAudit(makeAudit(ticket.id, "created", created_at, stream));
+  const createdAudit = makeAudit(ticket.id, "created", created_at, stream);
+  if (media.length > 0) {
+    createdAudit.media_count = media.length;
+  }
+  await store.appendAudit(createdAudit);
   return ticket;
 }
 function resolveExpiry(ticket, now2) {
@@ -7619,7 +7715,7 @@ async function listResolved(store, filter, now2) {
   }
   return out;
 }
-async function answer(store, id, value, answeredBy, now2) {
+async function answer(store, id, value, answeredBy, now2, annotations = []) {
   const existing = await getResolved(store, id, now2);
   if (existing === void 0) {
     throw notFound(id);
@@ -7627,15 +7723,62 @@ async function answer(store, id, value, answeredBy, now2) {
   if (existing.status !== "pending") {
     throw conflict(`ticket ${id} is ${existing.status}; only a pending ticket can be answered`);
   }
+  const resolved = [];
+  for (const input of annotations) {
+    const annotation = { id: newId() };
+    if (input.text !== void 0) {
+      annotation.text = input.text;
+    }
+    if (input.media_id !== void 0) {
+      annotation.media_id = input.media_id;
+    }
+    if (input.at_seconds !== void 0) {
+      annotation.at_seconds = input.at_seconds;
+    }
+    if (input.annotated_media_id !== void 0) {
+      const blob = await store.getMedia(input.annotated_media_id);
+      if (blob === void 0) {
+        throw new QueueError(
+          400,
+          `annotation media ${input.annotated_media_id} not found; upload it with POST /api/media first`
+        );
+      }
+      const kind = mediaKind(blob.mime_type);
+      if (kind !== "image") {
+        throw new QueueError(400, `annotation media ${input.annotated_media_id} must be an image`);
+      }
+      annotation.annotated_media = {
+        id: blob.id,
+        kind,
+        mime_type: blob.mime_type,
+        size_bytes: base64ByteLength(blob.data_base64),
+        created_at: now2
+      };
+    }
+    resolved.push(annotation);
+  }
+  const trimmed = value.trim();
+  if (trimmed === "" && resolved.length === 0) {
+    throw new QueueError(400, "an answer must include text, a chosen option, or at least one annotation");
+  }
   const ticket = {
     ...existing,
     status: "answered",
-    answer: value,
     answered_by: answeredBy,
     answered_at: now2
   };
+  if (trimmed !== "") {
+    ticket.answer = value;
+  }
+  if (resolved.length > 0) {
+    ticket.annotations = resolved;
+  }
   await store.put(ticket);
-  await store.appendAudit(makeAudit(id, "answered", now2, answeredBy, value));
+  const answeredAudit = makeAudit(id, "answered", now2, answeredBy, trimmed !== "" ? value : void 0);
+  if (resolved.length > 0) {
+    answeredAudit.annotation_count = resolved.length;
+  }
+  await store.appendAudit(answeredAudit);
   return ticket;
 }
 async function undo(store, id, now2) {
@@ -7657,6 +7800,7 @@ async function undo(store, id, now2) {
   }
   const reverted = { ...ticket, status: "pending" };
   delete reverted.answer;
+  delete reverted.annotations;
   delete reverted.answered_by;
   delete reverted.answered_at;
   await store.put(reverted);
@@ -7702,8 +7846,20 @@ var ASK_HUMAN_KEYS = [
   "default_answer",
   "timeout_seconds",
   "urgency",
-  "stream"
+  "stream",
+  "media"
 ];
+var MEDIA_KEYS = ["mime_type", "data_base64", "filename", "caption"];
+var ANNOTATION_KEYS = ["text", "media_id", "at_seconds", "annotated_media_id"];
+function formatBytes(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KiB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
+}
 function fail(tool, message) {
   throw new ValidationError(tool, message);
 }
@@ -7756,6 +7912,174 @@ function optionalInteger(tool, args, key, min, max) {
   }
   return value;
 }
+function normalizeMediaData(tool, label, rawData, cap) {
+  if (rawData.trim() === "") {
+    fail(tool, `\`${label}\` must be a non-empty base64 string`);
+  }
+  const base642 = normalizeBase64(stripDataUri(rawData));
+  const size = base64ByteLength(base642);
+  if (size > cap) {
+    fail(tool, `\`${label}\` is ${formatBytes(size)}; the limit is ${formatBytes(cap)}`);
+  }
+  try {
+    base64ToBytes(base642);
+  } catch {
+    fail(tool, `\`${label}\` is not valid base64`);
+  }
+  return { base64: base642, size };
+}
+function validateAskHumanMedia(tool, raw) {
+  const value = raw["media"];
+  if (value === void 0 || value === null) {
+    return void 0;
+  }
+  if (!Array.isArray(value)) {
+    fail(tool, "`media` must be an array of attachments when present");
+  }
+  if (value.length === 0) {
+    return void 0;
+  }
+  if (value.length > MAX_MEDIA_FILES) {
+    fail(tool, `\`media\` may contain at most ${MAX_MEDIA_FILES} attachments (got ${value.length})`);
+  }
+  const out = [];
+  let totalBytes = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    const item = value[index];
+    const label = `media[${index}]`;
+    if (!isRecord(item)) {
+      fail(tool, `\`${label}\` must be an object`);
+    }
+    for (const key of Object.keys(item)) {
+      if (!MEDIA_KEYS.includes(key)) {
+        fail(
+          tool,
+          `unknown argument \`${label}.${key}\`. Allowed arguments: ${MEDIA_KEYS.join(", ")}`
+        );
+      }
+    }
+    const rawMime = item["mime_type"];
+    const declaredMime = typeof rawMime === "string" && rawMime.trim() !== "" ? rawMime.trim().toLowerCase() : void 0;
+    const rawData = item["data_base64"];
+    if (typeof rawData !== "string") {
+      fail(tool, `\`${label}.data_base64\` is required and must be a base64 string`);
+    }
+    const effectiveMime = declaredMime ?? dataUriMime(rawData);
+    if (effectiveMime === void 0) {
+      fail(tool, `\`${label}.mime_type\` is required (e.g. "image/png", "audio/mpeg", "video/mp4")`);
+    }
+    if (mediaKind(effectiveMime) === void 0) {
+      fail(tool, `\`${label}.mime_type\` must be an image/*, audio/*, or video/* type (got "${effectiveMime}")`);
+    }
+    const { base64: base642, size } = normalizeMediaData(tool, `${label}.data_base64`, rawData, MAX_MEDIA_BYTES_PER_FILE);
+    totalBytes += size;
+    const entry = { mime_type: effectiveMime, data_base64: base642 };
+    const filename = optionalString(tool, item, "filename");
+    if (filename !== void 0 && filename.trim() !== "") {
+      entry.filename = filename.trim();
+    }
+    const caption = optionalString(tool, item, "caption");
+    if (caption !== void 0 && caption.trim() !== "") {
+      entry.caption = caption.trim();
+    }
+    out.push(entry);
+  }
+  if (totalBytes > MAX_MEDIA_BYTES_PER_TICKET) {
+    fail(
+      tool,
+      `\`media\` totals ${formatBytes(totalBytes)}; the per-ticket limit is ${formatBytes(MAX_MEDIA_BYTES_PER_TICKET)}`
+    );
+  }
+  return out;
+}
+function validateMediaUpload(args) {
+  const tool = "media_upload";
+  const raw = requireRecord(tool, args);
+  rejectUnknownKeys(tool, raw, MEDIA_KEYS);
+  const rawMime = raw["mime_type"];
+  const declaredMime = typeof rawMime === "string" && rawMime.trim() !== "" ? rawMime.trim().toLowerCase() : void 0;
+  const rawData = raw["data_base64"];
+  if (typeof rawData !== "string") {
+    fail(tool, "`data_base64` is required and must be a base64 string");
+  }
+  const effectiveMime = declaredMime ?? dataUriMime(rawData);
+  if (effectiveMime === void 0) {
+    fail(tool, '`mime_type` is required (e.g. "image/png")');
+  }
+  if (mediaKind(effectiveMime) === void 0) {
+    fail(tool, `\`mime_type\` must be an image/*, audio/*, or video/* type (got "${effectiveMime}")`);
+  }
+  const { base64: base642 } = normalizeMediaData(tool, "data_base64", rawData, MAX_ANNOTATION_BYTES);
+  const entry = { mime_type: effectiveMime, data_base64: base642 };
+  const filename = optionalString(tool, raw, "filename");
+  if (filename !== void 0 && filename.trim() !== "") {
+    entry.filename = filename.trim();
+  }
+  const caption = optionalString(tool, raw, "caption");
+  if (caption !== void 0 && caption.trim() !== "") {
+    entry.caption = caption.trim();
+  }
+  return entry;
+}
+function validateAnnotationInputs(args) {
+  const tool = "answer";
+  if (args === void 0 || args === null) {
+    return [];
+  }
+  if (!Array.isArray(args)) {
+    fail(tool, "`annotations` must be an array when present");
+  }
+  if (args.length > MAX_ANNOTATIONS) {
+    fail(tool, `\`annotations\` may contain at most ${MAX_ANNOTATIONS} items (got ${args.length})`);
+  }
+  const out = [];
+  for (let index = 0; index < args.length; index += 1) {
+    const item = args[index];
+    const label = `annotations[${index}]`;
+    if (!isRecord(item)) {
+      fail(tool, `\`${label}\` must be an object`);
+    }
+    for (const key of Object.keys(item)) {
+      if (!ANNOTATION_KEYS.includes(key)) {
+        fail(
+          tool,
+          `unknown argument \`${label}.${key}\`. Allowed arguments: ${ANNOTATION_KEYS.join(", ")}`
+        );
+      }
+    }
+    const text = optionalString(tool, item, "text");
+    const annotatedMediaId = optionalString(tool, item, "annotated_media_id");
+    if ((text === void 0 || text.trim() === "") && (annotatedMediaId === void 0 || annotatedMediaId.trim() === "")) {
+      fail(tool, `\`${label}\` must carry \`text\` or \`annotated_media_id\``);
+    }
+    const entry = {};
+    if (text !== void 0 && text.trim() !== "") {
+      entry.text = text.trim();
+    }
+    if (annotatedMediaId !== void 0 && annotatedMediaId.trim() !== "") {
+      if (!isSafeMediaId(annotatedMediaId)) {
+        fail(tool, `\`${label}.annotated_media_id\` is not a valid media id`);
+      }
+      entry.annotated_media_id = annotatedMediaId;
+    }
+    const mediaId = optionalString(tool, item, "media_id");
+    if (mediaId !== void 0 && mediaId.trim() !== "") {
+      if (!isSafeMediaId(mediaId)) {
+        fail(tool, `\`${label}.media_id\` is not a valid media id`);
+      }
+      entry.media_id = mediaId;
+    }
+    const atSeconds = item["at_seconds"];
+    if (atSeconds !== void 0 && atSeconds !== null) {
+      if (typeof atSeconds !== "number" || !Number.isFinite(atSeconds) || atSeconds < 0) {
+        fail(tool, `\`${label}.at_seconds\` must be a non-negative number of seconds`);
+      }
+      entry.at_seconds = atSeconds;
+    }
+    out.push(entry);
+  }
+  return out;
+}
 function extraSentenceTerminators(question) {
   const scrubbed = question.replace(/\b(e\.g|i\.e|etc|vs|cf|approx|Mr|Mrs|Ms|Dr|St)\./gi, (match) => match.replace(/\./g, "")).replace(/\d+\.\d+/g, "");
   const withoutTrailing = scrubbed.replace(/[.!?]+\s*$/, "");
@@ -7800,6 +8124,7 @@ function validateAskHuman(args) {
   const context = optionalString(tool, raw, "context");
   const default_answer = optionalString(tool, raw, "default_answer");
   const stream = optionalString(tool, raw, "stream");
+  const media = validateAskHumanMedia(tool, raw);
   const result = { question };
   if (options !== void 0) {
     result.options = options;
@@ -7819,6 +8144,9 @@ function validateAskHuman(args) {
   if (stream !== void 0) {
     result.stream = stream;
   }
+  if (media !== void 0) {
+    result.media = media;
+  }
   return result;
 }
 function validateWaitForAnswer(args) {
@@ -7853,7 +8181,9 @@ var ASK_HUMAN_DESCRIPTION = [
   "",
   "Protocol you must follow: on `pending`, continue with independent work and call `wait_for_answer` again later \u2014 do not poll in a tight loop.",
   "",
-  'Set `default_answer` only when it is safe for you to proceed without a human; it is used only if the ticket expires. Set `options` for 2-5 mutually exclusive choices. `timeout_seconds` defaults to 1800 and maxes at 86400. `urgency` defaults to "normal".'
+  'Set `default_answer` only when it is safe for you to proceed without a human; it is used only if the ticket expires. Set `options` for 2-5 mutually exclusive choices. `timeout_seconds` defaults to 1800 and maxes at 86400. `urgency` defaults to "normal".',
+  "",
+  "Optionally attach `media` (screenshots, audio, or video) for the human to inspect \u2014 media is never required. Each item is { mime_type, data_base64 } with optional `filename` and `caption`; `data_base64` is standard base64 (a `data:<mime>;base64,` prefix is accepted). The human may answer with a decision, with annotations on your media, or both; `wait_for_answer` returns any annotations, and rendered markup comes back as image content."
 ].join("\n");
 var WAIT_FOR_ANSWER_DESCRIPTION = [
   "Wait for the human to answer a ticket created by ask_human, then return the result.",
@@ -7904,6 +8234,28 @@ var TOOL_DEFINITIONS = [
         stream: {
           type: "string",
           description: "Optional. Overrides the configured default stream for this ticket."
+        },
+        media: {
+          type: "array",
+          maxItems: 8,
+          description: "Optional. Media (screenshots, audio, video) for the human to inspect. Never required.",
+          items: {
+            type: "object",
+            properties: {
+              mime_type: {
+                type: "string",
+                description: 'An image/*, audio/*, or video/* type, e.g. "image/png".'
+              },
+              data_base64: {
+                type: "string",
+                description: "Standard base64 bytes. A `data:<mime>;base64,` prefix is accepted."
+              },
+              filename: { type: "string", description: 'Optional. A display name, e.g. "before.png".' },
+              caption: { type: "string", description: "Optional. A caption shown with the attachment." }
+            },
+            required: ["data_base64"],
+            additionalProperties: false
+          }
         }
       },
       required: ["question"],
@@ -7976,12 +8328,63 @@ function waitOutput(ticket) {
   if (ticket.answered_at !== void 0) {
     out.answered_at = ticket.answered_at;
   }
+  if (ticket.media !== void 0) {
+    out.media = ticket.media;
+  }
+  if (ticket.annotations !== void 0) {
+    out.annotations = ticket.annotations;
+  }
   return { ...out };
 }
+function annotationSummary(ticket) {
+  const annotations = ticket.annotations;
+  if (annotations === void 0 || annotations.length === 0) {
+    return void 0;
+  }
+  const notes = annotations.filter((annotation) => annotation.text !== void 0).length;
+  const markup = annotations.filter((annotation) => annotation.annotated_media !== void 0).length;
+  const parts = [];
+  if (notes > 0) {
+    parts.push(`${notes} note${notes === 1 ? "" : "s"}`);
+  }
+  if (markup > 0) {
+    parts.push(`${markup} annotated image${markup === 1 ? "" : "s"}`);
+  }
+  return `The human also left ${annotations.length} annotation(s) (${parts.join(", ")}); see the attached content and the structured "annotations" field.`;
+}
+async function waitResult(ticket, waitedSeconds, store) {
+  const content = [{ type: "text", text: waitText(ticket, waitedSeconds) }];
+  if (ticket.status === "answered" && ticket.annotations !== void 0) {
+    for (const annotation of ticket.annotations) {
+      const ref = annotation.annotated_media;
+      if (ref === void 0) {
+        continue;
+      }
+      const blob = await store.getMedia(ref.id);
+      if (blob === void 0) {
+        continue;
+      }
+      if (ref.kind === "image") {
+        content.push({ type: "image", data: blob.data_base64, mimeType: blob.mime_type });
+      } else if (ref.kind === "audio") {
+        content.push({ type: "audio", data: blob.data_base64, mimeType: blob.mime_type });
+      }
+    }
+  }
+  return { content, structuredContent: waitOutput(ticket) };
+}
 function waitText(ticket, waitedSeconds) {
   switch (ticket.status) {
-    case "answered":
-      return answerText(ticket.answer, ticket.answered_by);
+    case "answered": {
+      const lines = [
+        ticket.answer !== void 0 && ticket.answer !== "" ? answerText(ticket.answer, ticket.answered_by) : "HUMAN ANSWER: (no text; the human responded with annotations only \u2014 see the attached content)"
+      ];
+      const summary = annotationSummary(ticket);
+      if (summary !== void 0) {
+        lines.push(summary);
+      }
+      return lines.join("\n\n");
+    }
     case "expired":
       return ticket.answer !== void 0 ? `DEFAULT ANSWER (applied on expiry; no human responded): ${ticket.answer}` : `Ticket ${ticket.id} expired with no answer and no default_answer was set. Do not assume an answer: decide for yourself or ask again with ask_human.`;
     case "cancelled":
@@ -7997,14 +8400,20 @@ async function runAskHuman(args, deps) {
     defaultStream: deps.defaultStream,
     now: deps.now()
   });
-  const text = `Ticket ${ticket.id} enqueued (stream "${ticket.stream}", urgency ${ticket.urgency}, status pending, expires_at ${ticket.expires_at}). Continue with independent work and call wait_for_answer with id "${ticket.id}" later. Do not poll in a tight loop.`;
-  return textResult(text, {
+  const mediaCount = ticket.media?.length ?? 0;
+  const mediaText = mediaCount > 0 ? `, ${mediaCount} media attachment(s)` : "";
+  const text = `Ticket ${ticket.id} enqueued (stream "${ticket.stream}", urgency ${ticket.urgency}, status pending${mediaText}, expires_at ${ticket.expires_at}). Continue with independent work and call wait_for_answer with id "${ticket.id}" later. Do not poll in a tight loop.`;
+  const structured = {
     id: ticket.id,
     status: "pending",
     stream: ticket.stream,
     urgency: ticket.urgency,
     expires_at: ticket.expires_at
-  });
+  };
+  if (ticket.media !== void 0) {
+    structured.media = ticket.media;
+  }
+  return textResult(text, structured);
 }
 async function runWaitForAnswer(args, deps) {
   const input = validateWaitForAnswer(args);
@@ -8018,10 +8427,10 @@ async function runWaitForAnswer(args, deps) {
       throw notFound(input.id);
     }
     if (ticket.status !== "pending") {
-      return textResult(waitText(ticket, effective), waitOutput(ticket));
+      return waitResult(ticket, effective, deps.store);
     }
     if (Date.now() >= deadline) {
-      return textResult(waitText(ticket, effective), waitOutput(ticket));
+      return waitResult(ticket, effective, deps.store);
     }
     await sleep(POLL_INTERVAL_MS);
   }
@@ -8272,7 +8681,6 @@ function buildAllowedOrigins(port, extra) {
 // src/http.ts
 var SWEEP_MS = 5e3;
 var HEARTBEAT_MS = 25e3;
-var MAX_BODY_BYTES = 1e6;
 var HttpError = class extends Error {
   status;
   constructor(status, message) {
@@ -8410,14 +8818,69 @@ function createHttpApp(options) {
   void sweep();
   async function handleAnswer(req, res) {
     const body = await readJsonBody(req);
-    if (!isRecord2(body) || typeof body["id"] !== "string" || typeof body["answer"] !== "string") {
-      throw new HttpError(400, "body must be { id: string, answer: string, answered_by?: string }");
+    if (!isRecord2(body) || typeof body["id"] !== "string") {
+      throw new HttpError(
+        400,
+        "body must be { id: string, answer?: string, answered_by?: string, annotations?: AnnotationInput[] }"
+      );
+    }
+    const rawAnswer = body["answer"];
+    if (rawAnswer !== void 0 && rawAnswer !== null && typeof rawAnswer !== "string") {
+      throw new HttpError(400, "`answer` must be a string when present");
     }
     const answeredBy = body["answered_by"] === "default" ? "default" : "human";
-    const ticket = await answer(store, body["id"], body["answer"], answeredBy, now2());
+    let annotations;
+    try {
+      annotations = validateAnnotationInputs(body["annotations"]);
+    } catch (error2) {
+      if (error2 instanceof ValidationError) {
+        throw new HttpError(400, error2.message);
+      }
+      throw error2;
+    }
+    const ticket = await answer(
+      store,
+      body["id"],
+      typeof rawAnswer === "string" ? rawAnswer : "",
+      answeredBy,
+      now2(),
+      annotations
+    );
     broadcast();
     sendJson(res, 200, { ticket });
   }
+  async function handleMediaUpload(req, res) {
+    const body = await readJsonBody(req);
+    let input;
+    try {
+      input = validateMediaUpload(body);
+    } catch (error2) {
+      if (error2 instanceof ValidationError) {
+        throw new HttpError(400, error2.message);
+      }
+      throw error2;
+    }
+    const media = await uploadMedia(store, input, now2());
+    sendJson(res, 201, { media });
+  }
+  async function handleMediaGet(res, id) {
+    if (!isSafeMediaId(id)) {
+      sendText(res, 404, "Not Found");
+      return;
+    }
+    const blob = await store.getMedia(id);
+    if (blob === void 0) {
+      sendText(res, 404, "Not Found");
+      return;
+    }
+    const bytes = Buffer.from(base64ToBytes(blob.data_base64));
+    res.writeHead(200, {
+      "content-type": blob.mime_type,
+      "content-length": bytes.length,
+      "cache-control": "no-store"
+    });
+    res.end(bytes);
+  }
   async function handleUndo(req, res) {
     const body = await readJsonBody(req);
     if (!isRecord2(body) || typeof body["id"] !== "string") {
@@ -8456,6 +8919,38 @@ function createHttpApp(options) {
       await mcpHandler(req, res);
       return;
     }
+    if (path === "/api/media") {
+      if (method !== "POST") {
+        res.writeHead(405, { allow: "POST" });
+        res.end("Method Not Allowed");
+        return;
+      }
+      if (!requireBearer(req, token)) {
+        sendText(res, 401, "Unauthorized");
+        return;
+      }
+      await handleMediaUpload(req, res);
+      return;
+    }
+    if (path.startsWith("/api/media/")) {
+      if (method !== "GET") {
+        res.writeHead(405, { allow: "GET" });
+        res.end("Method Not Allowed");
+        return;
+      }
+      if (!requireBearer(req, token)) {
+        sendText(res, 401, "Unauthorized");
+        return;
+      }
+      let id;
+      try {
+        id = decodeURIComponent(path.slice("/api/media/".length));
+      } catch {
+        id = path.slice("/api/media/".length);
+      }
+      await handleMediaGet(res, id);
+      return;
+    }
     const allowed = ROUTE_METHODS[path];
     if (allowed === void 0) {
       sendText(res, 404, "Not Found");
@@ -20563,11 +21058,23 @@ function log2(message) {
   process.stderr.write(`readyroom: ${message}
 `);
 }
+async function writeAtomic(path, bytes) {
+  const tmp = `${path}.tmp`;
+  const handle = await open2(tmp, "w");
+  try {
+    await handle.writeFile(bytes);
+    await handle.sync();
+  } finally {
+    await handle.close();
+  }
+  await rename2(tmp, path);
+}
 var FileTicketStore = class {
   stateDir;
   ticketsPath;
   ticketsTmpPath;
   auditPath;
+  mediaDir;
   /** In-memory mirror of `tickets.json`, keyed by ticket id. */
   tickets = /* @__PURE__ */ new Map();
   /** Tail of the write chain. Every mutation appends to it; nothing runs concurrently. */
@@ -20581,6 +21088,7 @@ var FileTicketStore = class {
     this.ticketsPath = join2(stateDir, TICKETS_FILE);
     this.ticketsTmpPath = join2(stateDir, TICKETS_TMP_FILE);
     this.auditPath = join2(stateDir, AUDIT_FILE);
+    this.mediaDir = join2(stateDir, MEDIA_DIR);
   }
   /**
    * Serialize a task behind every previously queued write. The returned promise
@@ -20674,6 +21182,46 @@ var FileTicketStore = class {
       }
     });
   }
+  /**
+   * Store a media blob as `<mediadir>/<id>` (raw bytes) with a sidecar
+   * `<mediadir>/<id>.json` carrying the MIME type. The sidecar exists because a raw
+   * file cannot say what it is, and `GET /api/media/{id}` needs the content type
+   * without consulting a ticket.
+   *
+   * Writes go through the same tmp -> fsync -> rename path as `tickets.json`, so a
+   * crash mid-write can never leave a truncated blob where a reader would find it.
+   */
+  async putMedia(blob) {
+    if (!isSafeMediaId(blob.id)) {
+      throw new Error(`refusing to store media under an unsafe id: ${blob.id}`);
+    }
+    return this.serialize(async () => {
+      await mkdir2(this.mediaDir, { recursive: true });
+      const bytes = base64ToBytes(blob.data_base64);
+      await writeAtomic(join2(this.mediaDir, blob.id), bytes);
+      const meta2 = JSON.stringify({ mime_type: blob.mime_type, size_bytes: bytes.length });
+      await writeAtomic(join2(this.mediaDir, `${blob.id}.json`), new TextEncoder().encode(meta2));
+    });
+  }
+  /** The blob, or `undefined` for an unknown or unsafe id. Never throws on a bad id. */
+  async getMedia(id) {
+    if (!isSafeMediaId(id)) {
+      return void 0;
+    }
+    let bytes;
+    let metaRaw;
+    try {
+      bytes = await readFile2(join2(this.mediaDir, id));
+      metaRaw = await readFile2(join2(this.mediaDir, `${id}.json`), "utf8");
+    } catch (error2) {
+      if (error2.code === "ENOENT") {
+        return void 0;
+      }
+      throw error2;
+    }
+    const meta2 = JSON.parse(metaRaw);
+    return { id, mime_type: meta2.mime_type, data_base64: bytesToBase64(bytes) };
+  }
   /**
    * Atomic write: tmp file -> fsync -> rename over the real file. The rename is the
    * atomic step; the fsync guarantees the bytes are on disk before the rename lands.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "readyroom",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "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": [
@@ -55,8 +55,11 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^5.20261015.1",
+    "@semantic-release/changelog": "^7.0.0",
+    "@semantic-release/git": "^11.0.1",
     "@types/node": "^26.6.5",
     "esbuild": "^0.28.2",
+    "semantic-release": "^25.0.9",
     "tsx": "^4.23.15",
     "typescript": "^7.0.2",
     "wrangler": "^4.151.0"