@orbytes/astrolab 0.3.0

package/src/pin/board.mjs

@@ -0,0 +1,1521 @@
+// orbytes-pin — the pin board: one reader, one writer, one renderer, two surfaces.
+//
+// Two things consume this module and NOTHING here knows which:
+//   · the `/pin` route on `astro dev` (index.mjs, dev-only middleware) — generated per request,
+//     and the only surface where the writer is reachable;
+//   · `npx orbytes-pin-gallery` (../../bin/pin-gallery.mjs) — one standalone file on disk.
+//
+// It exists because a second copy is how this system's last three bugs happened, all of them in
+// the gallery script and all of them the same shape: a local parser that drifted from the one in
+// tickets.mjs (see `collectTickets` below). A live route rendering its own cards would have been
+// the fourth. So the route and the script share this file and differ in exactly two arguments —
+// where a screenshot is fetched from (`assetHref`) and whether the page is live (`apiHref`).
+//
+// ── backlog.md is retired (2026-09-22) ──────────────────────────────────────────────────────
+// Until today the wall was READ-ONLY and linked out to backlog.md's web UI — a second server on
+// a third port (`backlog browser`, 6420) — because moving a ticket's status meant letting
+// backlog.md re-serialise its frontmatter, and a second writer of that frontmatter was exactly
+// what this package refused to be. That left the site on 4321, the lab on 4321/lab, and the
+// board somewhere else entirely.
+//
+// The objection died with the second writer. Nothing but this file writes a ticket's frontmatter
+// now, so it can be written CORRECTLY by construction: `updateTicket` rewrites only the
+// frontmatter lines it is changing and returns the body — the comment, the screenshot, and the
+// fenced ```yaml pin block that carries every field this package owns — byte for byte. That is
+// asserted in code on every single write, not documented and hoped for.
+//
+// backlog.md is still installed globally and nothing here uninstalls it. It is simply no longer
+// part of the loop: do not run `backlog browser`, and do not run `backlog task edit` on a pin
+// ticket — that command is the original defect, and it still drops every pin field it meets.
+import { closeSync, existsSync, openSync, readFileSync, readSync, readdirSync, renameSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+import {
+  BACKLOG,
+  CANCELLED,
+  DEFAULT_STATUS,
+  IN_PROGRESS,
+  READY_FOR_AGENT,
+  READY_FOR_REVIEW,
+  RESOLVED,
+  STATUSES,
+  isCancelled,
+  normaliseStatus,
+  parseTicket,
+} from "./tickets.mjs";
+
+// The repo root is resolved the one way the package resolves it — a second walk-up loop is a
+// second implementation of the thing every repo-relative path in every ticket hangs off.
+export { findRepoRoot } from "./tickets.mjs";
+// The status vocabulary and the definitions of "open", "cancelled" and "an agent may take this"
+// all live in tickets.mjs and are re-exported here, so a surface that imports only the board still
+// gets them from their one home rather than writing its own copy of the same six strings.
+export {
+  BACKLOG,
+  CANCELLED,
+  CLOSED_STATUSES,
+  DEFAULT_STATUS,
+  IN_PROGRESS,
+  OPEN_STATUSES,
+  READY_FOR_AGENT,
+  READY_FOR_REVIEW,
+  RESOLVED,
+  STATUSES,
+  isAgentReady,
+  isCancelled,
+  isOpen,
+  normaliseStatus,
+} from "./tickets.mjs";
+
+/**
+ * What `backlog/config.yml` used to tell backlog.md, now owned here.
+ *
+ * Every one of these was already encoded in this package's behaviour — `STATUSES` in tickets.mjs,
+ * the `pin-` prefix in `nextNumber`/`TICKET_FILE`, the 3-digit pad in `pad()`, `DEFAULT_STATUS` in
+ * `renderTicket`. Naming them together is what makes the retirement lossless: a reader who goes
+ * looking for the board's conventions finds them in the package that enforces them, not in a
+ * config file for a program nobody runs any more.
+ *
+ * `backlog/config.yml` is kept on disk as a record and is NOT read by anything here. The two
+ * directories it named — `backlog/tasks/` and `backlog/assets/` — are unchanged and stay
+ * unchanged: renaming them would break every ticket already written for no gain at all.
+ */
+export const BOARD_CONVENTIONS = Object.freeze({
+  // A `projectName` key sat here until 2026-09-22 with one client's name hardcoded into it, and
+  // nothing ever read it — it was backlog.md's `project_name`, carried across out of
+  // completeness. Deleted on the move into astrolab: a client's name hardcoded in a package that
+  // now ships to every client is a string waiting to be believed. The project a run belongs to is
+  // the integration's `project` option (src/pin/index.mjs), which defaults to the checkout's own
+  // directory name.
+  /** was `task_prefix` */ taskPrefix: "pin",
+  /** was `zero_padded_ids` */ zeroPaddedIds: 3,
+  /** was `default_status` — the single source is tickets.mjs, re-exported above */ defaultStatus: DEFAULT_STATUS,
+  /** was `statuses` — the single source is tickets.mjs, re-exported above */ statuses: STATUSES,
+  /** was `date_format` */ dateFormat: "yyyy-mm-dd",
+});
+
+/**
+ * The priorities a card may carry. backlog.md's own three, kept because every ticket on disk
+ * already uses one of them and `renderTicket` writes `medium`.
+ *
+ * Ordered most-urgent first, which is the order the board's filter offers them in.
+ */
+export const PRIORITIES = Object.freeze(["high", "medium", "low"]);
+
+/**
+ * A PNG's pixel dimensions, read from its 24-byte IHDR header. `null` for anything that is not a
+ * PNG, which is every hand-dropped file and nothing the picker writes.
+ *
+ * It is here so a card can emit real `width`/`height` attributes, which is what lets the
+ * thumbnail box follow the image's own shape instead of being a fixed rectangle. Without them a
+ * `height:auto` image has no size until it loads, a zero-height `loading="lazy"` image never
+ * comes into view to load, and every thumbnail on the board disappears — measured, 2026-09-22.
+ * Twenty-four bytes per ticket, on a page that already reads every ticket from disk.
+ */
+function pngSize(file) {
+  let fd;
+  try {
+    fd = openSync(file, "r");
+    const buf = Buffer.alloc(24);
+    if (readSync(fd, buf, 0, 24, 0) < 24) return null;
+    if (buf.readUInt32BE(0) !== 0x89504e47 || buf.readUInt32BE(4) !== 0x0d0a1a0a) return null;
+    if (buf.toString("latin1", 12, 16) !== "IHDR") return null;
+    const w = buf.readUInt32BE(16);
+    const h = buf.readUInt32BE(20);
+    return w > 0 && h > 0 ? { w, h } : null;
+  } catch {
+    return null;
+  } finally {
+    if (fd !== undefined) try { closeSync(fd); } catch {}
+  }
+}
+
+/** Tickets in `<backlogDir>/tasks`, screenshots in `<backlogDir>/assets`. Set by tickets.mjs. */
+function boardPaths(repoRoot, backlogDir) {
+  const backlog = join(repoRoot, backlogDir);
+  return { backlog, tasks: join(backlog, "tasks"), assets: join(backlog, "assets") };
+}
+
+/* ----------------------------------------------------------------- tickets */
+
+/**
+ * The ticket's comment, split into prose runs and fenced code blocks.
+ *
+ * `parseTicket` has already cut the comment at the screenshot or the ```yaml pin fence, whichever
+ * comes first, so neither can reach a card — measured, not assumed: tickets.mjs ends the comment at
+ * `Math.min(rest.indexOf(PIN_FENCE), rest.search(/^!\[\]\(/m))`, and a parse of both a real sample
+ * and a fixture whose body quotes CSS returns a comment containing no fence marker of that kind and
+ * no pin field.
+ *
+ * So the `.replace(/^```[\s\S]*$/m, "")` that opened this function until 2026-09-21 — a leftover
+ * from when the comment and the pin data were parsed out of one string — could no longer reach the
+ * thing it was written to strip. The only fence left for it to match was one typed by hand,
+ * and it cut from there to the end: a comment quoting a CSS rule lost the rule and every word after
+ * it. On the board only; the ticket on disk was always intact, which is exactly why nobody saw it.
+ *
+ * Prose is reflowed to the card width — ticket bodies are hard-wrapped on disk, so single newlines
+ * are unwrapped and blank lines stay as real paragraph breaks. Code is kept exactly as typed. The
+ * image strip is belt and braces, for a hand-edited ticket with an inline image in its prose; it is
+ * deliberately not applied inside a fence, where `![...](...)` is something the comment quotes.
+ */
+const FENCE_OPEN = /^[ \t]{0,3}(`{3,}|~{3,})[ \t]*(\S*)/;
+
+export function commentParts(comment) {
+  const lines = String(comment ?? "").split(/\r?\n/);
+  const parts = [];
+  let prose = [];
+
+  const flushProse = () => {
+    const text = prose
+      .join("\n")
+      .replace(/!\[[^\]]*\]\([^)]*\)/g, "")
+      .trim()
+      .split(/\n{2,}/)
+      .map((para) => para.replace(/\s*\n\s*/g, " ").trim())
+      .filter(Boolean)
+      .join("\n\n");
+    if (text) parts.push({ type: "text", value: text });
+    prose = [];
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const open = FENCE_OPEN.exec(lines[i]);
+    if (!open) {
+      prose.push(lines[i]);
+      continue;
+    }
+    flushProse();
+
+    const [, marker, lang] = open;
+    const close = new RegExp(`^[ \\t]{0,3}${marker[0]}{${marker.length},}[ \\t]*$`);
+    const code = [];
+    while (++i < lines.length && !close.test(lines[i])) code.push(lines[i]);
+    // An unterminated fence keeps its tail as code rather than losing it. Dropping text is the
+    // failure this whole function was fixed for; showing a little too much is not.
+    parts.push({ type: "code", lang, value: code.join("\n").replace(/^\n+|\n+$/g, "") });
+  }
+  flushProse();
+  return parts;
+}
+
+/**
+ * What counts as a ticket is the PACKAGE's answer, not a second one invented here. `listTickets()`
+ * in tickets.mjs takes `/^pin-\d+.*\.md$/` and silently skips everything else, so a README or a
+ * scratch note in that folder is simply not a ticket — it must not be reported as an unreadable
+ * one, which is what globbing every `*.md` did: the gallery failed hard on a file the package does
+ * not even look at. The pattern is copied because tickets.mjs does not export it; if that filter
+ * ever moves, this one moves with it.
+ */
+export const TICKET_FILE = /^pin-\d+.*\.md$/;
+
+/**
+ * Every ticket in `<backlogDir>/tasks`, plus the ones that could not be read. Read fresh from disk
+ * on every call — that is what makes the `/pin` route live and `orbytes-pin-gallery` a snapshot of the
+ * same moment.
+ *
+ * ONE reader: `parseTicket`, which owns the whole file — the frontmatter as much as the ```yaml
+ * pin block and the comment. It spreads the frontmatter keys at the top level of what it returns,
+ * so `title`, `status`, `labels` and `priority` are read straight off it.
+ *
+ * A second, local `parseFrontmatter` lived in the gallery script until 2026-09-21, kept only
+ * because tickets.mjs could not decode the block scalars a long title gets folded into — it would
+ * hand back a title of ">-". That stopped being true when tickets.mjs was rewritten to route the
+ * frontmatter and the fence through one `parseMapping`, and its block-scalar reader is strictly
+ * better than the copy that script carried. Measured against fixtures the day it was deleted, the
+ * local copy lost on every count:
+ *   · its header regex `^([|>])[-+]?\d*$` matched `|-2` but NOT `|2-`, which is the form js-yaml
+ *     emits — so the header parsed as the value (`title` came back as the literal "|2-") and every
+ *     line of the real title was dropped.
+ *   · it read the explicit indent digit and then ignored it, stripping minimum indentation instead
+ *     of exactly that many columns — destroying the leading spaces the indicator exists to preserve.
+ *   · its folded join flattened interior runs of spaces (`\s+` → " ") and folded a more-indented
+ *     line into its neighbours, which is the one shape where folding destroys structure.
+ *
+ * A ticket that cannot be read is NOT skipped with a warning: it is collected and returned in
+ * `broken`, and what each surface does with that differs by design — the script refuses to write
+ * anything at all, the route shows the panel, because a live page that refuses is a blank screen
+ * and a file that refuses is simply the old file, which is honest as long as it says so.
+ *
+ * `Cancelled` tickets are EXCLUDED unless `includeCancelled` is passed, for the same reason
+ * `listTickets` excludes them (ruled 2026-09-22: they must not take up context space for an
+ * agent). The default is the safe one everywhere, and the three callers that genuinely need the
+ * archive — the `/pin` route, `orbytes-pin-gallery`, and `updateTicket`, which must be able to move a
+ * ticket back OUT of Cancelled — each say so explicitly at the call site.
+ *
+ * A ticket that cannot be READ is still collected into `broken` whatever its status, because a
+ * file the parser rejects has no trustworthy status to filter on.
+ *
+ * @param {string} repoRoot absolute, from `findRepoRoot`
+ * @param {{ backlogDir?: string, includeCancelled?: boolean }} [options]
+ */
+export function collectTickets(repoRoot, { backlogDir = "backlog", includeCancelled = false } = {}) {
+  const paths = boardPaths(repoRoot, backlogDir);
+  if (!existsSync(paths.tasks)) return { tickets: [], broken: [], paths };
+  const tickets = [];
+  const broken = [];
+
+  for (const name of readdirSync(paths.tasks)) {
+    if (!TICKET_FILE.test(name)) continue;
+    const full = join(paths.tasks, name);
+    const file = relative(repoRoot, full).split(/[\\/]/).join("/");
+
+    let text;
+    try {
+      text = readFileSync(full, "utf8");
+    } catch (err) {
+      broken.push({ file, reason: err.message });
+      continue;
+    }
+
+    let parsed;
+    try {
+      parsed = parseTicket(text, file);
+    } catch (err) {
+      broken.push({
+        file,
+        reason: err.message
+          .replace(/^orbytes-pin:\s*/, "")
+          .replace(new RegExp("^" + file.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\s*"), ""),
+      });
+      continue;
+    }
+    const pin = parsed.pin;
+
+    // Resolve the screenshot. `shot` is repo-relative on disk; fall back to the conventional path
+    // for this id so a ticket whose shot has not landed yet still finds a late arrival.
+    const idNum = String(parsed.id ?? name).match(/(\d+)/)?.[1] ?? null;
+    const candidates = [];
+    if (pin.shot) candidates.push(String(pin.shot));
+    if (idNum) candidates.push(`${backlogDir}/assets/pin-${idNum}.png`);
+
+    let shotAbs = null;
+    let shotRel = null;
+    for (const c of candidates) {
+      const abs = resolve(repoRoot, c);
+      if (existsSync(abs) && statSync(abs).isFile()) {
+        shotAbs = abs;
+        shotRel = c;
+        break;
+      }
+    }
+    // `shotName` is the path INSIDE the assets directory, which is the only directory the dev
+    // route will serve from. A shot resolved anywhere else keeps `shotAbs` (the standalone file
+    // can still reach it with a relative path) and gets no `shotName`, so the route shows the
+    // placeholder rather than opening a second door onto the disk. No ticket the picker writes
+    // can land outside that directory — tickets.mjs hardlinks every PNG into it.
+    const inAssets = shotAbs ? relative(paths.assets, shotAbs) : null;
+    const shotName =
+      inAssets && inAssets !== "" && !inAssets.startsWith("..") && !inAssets.startsWith("/")
+        ? inAssets.split(/[\\/]/).join("/")
+        : null;
+
+    // The ONE place a status read off disk becomes a status the board means. `parseTicket` hands
+    // back the raw string (it is the file reader and must stay honest); everything downstream —
+    // columns, chips, the `expect` compare in `updateTicket`, the card's data block — reads this
+    // normalised value, so a ticket still saying `Done` sits in Resolved rather than growing a
+    // fourth-and-a-half column of its own. `statusOnDisk` carries the raw string, but only when it
+    // differs, so the detail panel can say why the card and the file disagree.
+    const rawStatus = String(parsed.status ?? "").trim();
+    const status = normaliseStatus(rawStatus) || "No status";
+    if (!includeCancelled && isCancelled(rawStatus)) continue;
+
+    tickets.push({
+      id: parsed.id ?? "(no id)",
+      num: idNum ? Number(idNum) : 0,
+      title: parsed.title ?? "(untitled)",
+      status,
+      statusOnDisk: rawStatus && rawStatus !== status ? rawStatus : null,
+      priority: parsed.priority ?? null,
+      created: parsed.created_date ?? "",
+      updated: parsed.updated_date ?? "",
+      labels: Array.isArray(parsed.labels) ? parsed.labels : parsed.labels ? [parsed.labels] : [],
+      comment: commentParts(parsed.comment),
+      file,
+      dispatch: pin.dispatch ?? null,
+      source: pin.source ?? null,
+      selector: pin.selector ?? null,
+      // Carried through EXACTLY as the parser hands it over — never defaulted, never coerced.
+      // A number (0, 1, 2…) means the selector was tested on a fresh load and that is what it
+      // found; the string "pending" means it was never tested; `undefined` means the ticket
+      // predates the field. tickets.mjs turns the numeric cases into real numbers precisely so
+      // a reader cannot write `?? 1` or `|| "pending"` here and quietly turn a dead selector
+      // into a healthy one — so this line does neither.
+      selectorMatches: pin.selector_matches,
+      url: pin.url ?? null,
+      viewport: pin.viewport ?? null,
+      shotAbs,
+      shotRel,
+      shotName,
+      ...(() => {
+        const size = shotAbs ? pngSize(shotAbs) : null;
+        return { shotW: size ? size.w : null, shotH: size ? size.h : null };
+      })(),
+      shotExpected: pin.shot ?? (idNum ? `${backlogDir}/assets/pin-${idNum}.png` : null),
+    });
+  }
+
+  // Newest first: by created date, then by ticket number.
+  tickets.sort((a, b) => String(b.created).localeCompare(String(a.created)) || b.num - a.num);
+  broken.sort((a, b) => String(a.file).localeCompare(String(b.file)));
+  return { tickets, broken, paths };
+}
+
+/* ------------------------------------------------------------------- write */
+
+/**
+ * The one writer of a ticket's frontmatter, and the reason backlog.md could be retired.
+ *
+ * ── The whole safety argument, in one place ──────────────────────────────────────────────────
+ * The pin fields live in a fenced ```yaml pin block in the BODY and not in frontmatter, because
+ * backlog.md re-serialised frontmatter to its own schema on every write and silently dropped
+ * every key it did not know (measured 2026-09-21: `backlog task edit 1 -s Done` erased dispatch,
+ * source, selector, rect, shot and outer_html). That format exists to survive a careless writer.
+ * This function is the careful one, and it earns that by construction rather than by care:
+ *
+ *   · It never serialises. There is no YAML emitter here and no round trip through an object —
+ *     a document that goes in as text comes out as text, and the only bytes that can differ are
+ *     the ones on the frontmatter lines named in `fields`.
+ *   · The split is by INDEX, not by capture-and-rejoin. `tail` is the slice of the original
+ *     string from the closing `\n---` onward: the body, the image and the fenced block are
+ *     literally the same substring object, so byte-identity is not a property to be tested, it
+ *     is the only thing the code is able to produce.
+ *   · It is asserted anyway, on every write (› `bodyUnchanged`), because the next person to edit
+ *     this function will not have read this comment.
+ *
+ * ── Who may set `Resolved` ───────────────────────────────────────────────────────────────────
+ * A human, and nobody else: no agent ever moves a ticket there (ruled 2026-09-22 — › STATUSES in
+ * tickets.mjs). That is a rule for agents, NOT a refusal in this function, and the difference is
+ * deliberate: this endpoint is the board's own write path and the board is the surface a person
+ * drags on, so it cannot tell that drop from a script's POST and must not try. Refusing
+ * `Resolved` here would break the one person the rule exists for. An agent finishing a ticket
+ * writes `Ready for Review` and stops.
+ *
+ * ── Refusals, not warnings ───────────────────────────────────────────────────────────────────
+ * Every one of these throws with a sentence naming the ticket, and nothing is written:
+ *   · a status or priority not on the allowlist — a closed set, so no value this function writes
+ *     can ever need quoting, which is what lets it write the value bare with no YAML emitter;
+ *   · a ticket id that names no ticket, or one `parseTicket` cannot read;
+ *   · a file with no frontmatter, or missing the key being changed;
+ *   · a key whose current value is a YAML block scalar (`>-`, `|`), whose continuation lines a
+ *     single-line replace would orphan. No status or priority is ever that shape, so this is a
+ *     refusal, not a case to handle;
+ *   · `expect` not matching what is on disk — the card the browser dragged was showing something
+ *     stale, so the drop is refused and the board re-read rather than one write silently losing
+ *     to another;
+ *   · the file changing between the read and the rename.
+ *
+ * The write itself is a temp file beside the destination plus a rename, the same as
+ * `writeTicket` — `wx` so it cannot land on a stray temp, `rmSync` on any failure, so a reader
+ * never sees half a ticket and a failed write leaves the original exactly as it was.
+ *
+ * @param {string} repoRoot absolute, from `findRepoRoot`
+ * @param {{ id: string, status?: string, priority?: string, expect?: { status?: string, priority?: string } }} change
+ * @param {{ backlogDir?: string, now?: Date }} [options]
+ * @returns {{ id: string, file: string, status: string, priority: string|null, changed: string[], bodyUnchanged: true }}
+ */
+export function updateTicket(repoRoot, change, { backlogDir = "backlog", now = new Date() } = {}) {
+  const id = String(change?.id ?? "").trim();
+  if (!id) throw new Error("no ticket id given");
+
+  // Wanted fields first, so a request that asks for nothing legal is refused before any file is
+  // opened. The allowlists are the entire input sanitiser for this function: `fields` can only
+  // ever hold a value from `STATUSES` or `PRIORITIES`, both of which are bare-safe YAML scalars.
+  const fields = new Map();
+  if (change?.status !== undefined) {
+    // Normalised BEFORE the allowlist, so a caller written against the old three-column board —
+    // or a hand-rolled curl — sends `Done` and gets `Resolved` written, rather than a refusal on a
+    // word this package still understands. The allowlist itself stays the four current statuses:
+    // it is the entire input sanitiser here, and `Done` is never written to a file again.
+    const wanted = normaliseStatus(change.status);
+    if (!STATUSES.includes(wanted)) {
+      throw new Error(`"${change.status}" is not a status — the board has only ${STATUSES.join(", ")}`);
+    }
+    fields.set("status", wanted);
+  }
+  if (change?.priority !== undefined) {
+    if (!PRIORITIES.includes(change.priority)) {
+      throw new Error(`"${change.priority}" is not a priority — the board has only ${PRIORITIES.join(", ")}`);
+    }
+    fields.set("priority", change.priority);
+  }
+  if (fields.size === 0) throw new Error("nothing to change — send a status or a priority");
+
+  // The ticket is found by ID through the package's own reader, and the path comes back from
+  // that. No caller-supplied path ever reaches the filesystem, so there is no traversal to
+  // defend against here — the only files this function can open are the ones `collectTickets`
+  // already decided were tickets.
+  // `includeCancelled`: the archive is still writable. A ticket cancelled by mistake has to
+  // be moveable back out, and a reader that cannot see it would refuse with "no readable ticket
+  // with id …" — a sentence that would send someone looking for a corrupt file.
+  const { tickets, paths } = collectTickets(repoRoot, { backlogDir, includeCancelled: true });
+  const ticket = tickets.find((t) => t.id === id);
+  if (!ticket) throw new Error(`no readable ticket with id ${id} — it was deleted, renamed, or its pin block is broken`);
+
+  const absolute = resolve(repoRoot, ticket.file);
+  // Belt and braces on a path that is already package-derived: it must still be inside tasks/
+  // and still be named like a ticket.
+  if (!absolute.startsWith(paths.tasks + "/") || !TICKET_FILE.test(absolute.slice(paths.tasks.length + 1))) {
+    throw new Error(`${ticket.file} is not inside ${backlogDir}/tasks — refusing to write`);
+  }
+
+  // What the browser believed when the drag started. A mismatch means the board it was
+  // looking at is stale — refuse and let it re-read, rather than let one drop overwrite a change
+  // that happened in between.
+  for (const [key, want] of Object.entries(change?.expect ?? {})) {
+    const have = key === "status" ? ticket.status : key === "priority" ? ticket.priority : undefined;
+    // `ticket.status` is already normalised, so the expectation is too — otherwise a card showing
+    // a legacy `Done` ticket as Resolved would send `expect: "Resolved"` and be refused against
+    // its own file, or send `"Done"` and be refused against the board it was drawn from.
+    const wanted = key === "status" ? normaliseStatus(want) : want;
+    if (want !== undefined && want !== null && String(have ?? "") !== String(wanted)) {
+      throw new Error(`${id} is "${have}" on disk, not "${want}" — the board was out of date, so nothing was written. Refresh.`);
+    }
+  }
+
+  const original = readFileSync(absolute, "utf8");
+
+  // The split, by index. `tail` starts at the closing `\r?\n---` and runs to the end of the
+  // file: every byte of the body is in it, untouched and untouchable by what follows.
+  const open = /^---\r?\n/.exec(original);
+  if (!open) throw new Error(`${ticket.file} does not open with frontmatter — refusing to write`);
+  const close = /\r?\n---(\r?\n|$)/.exec(original.slice(open[0].length));
+  if (!close) throw new Error(`${ticket.file} has unterminated frontmatter — refusing to write`);
+  const frontStart = open[0].length;
+  const frontEnd = frontStart + close.index;
+  const head = original.slice(0, frontStart);
+  const tail = original.slice(frontEnd);
+
+  const eol = original.slice(0, frontEnd).includes("\r\n") ? "\r\n" : "\n";
+  let front = original.slice(frontStart, frontEnd);
+  const changed = [];
+
+  // The legacy alias drains itself. A ticket still carrying `Done` has its status line rewritten
+  // to `Resolved` on the NEXT WRITE OF THAT TICKET — whatever that write was for, priority
+  // included — so the alias leaves disk by being touched rather than by a migration pass that
+  // someone has to remember to run. Skipped when the caller is already setting a status: what it
+  // asked for wins, and moving a `Done` ticket to `To Do` must not silently resolve it instead.
+  if (!fields.has("status")) {
+    const line = /^status:[ \t]*(.*)$/m.exec(front);
+    const raw = line ? line[1].trim().replace(/^['"]|['"]$/g, "") : "";
+    const norm = normaliseStatus(raw);
+    if (raw && norm !== raw && STATUSES.includes(norm)) fields.set("status", norm);
+  }
+
+  for (const [key, value] of fields) {
+    // Column-0 anchored: an indented `status:` inside some nested map can never be hit.
+    const line = new RegExp(`^${key}:[ \\t]*(.*)$`, "m").exec(front);
+    if (!line) throw new Error(`${ticket.file} has no \`${key}:\` line in its frontmatter — refusing to invent one`);
+    if (/^[|>][-+]?\d*\s*$/.test(line[1].trim())) {
+      throw new Error(`${ticket.file} carries \`${key}\` as a YAML block scalar — refusing to rewrite it line by line`);
+    }
+    if (line[1].trim().replace(/^['"]|['"]$/g, "") === value) continue; // already there; not a change
+    front = front.replace(new RegExp(`^${key}:[ \\t]*.*$`, "m"), `${key}: ${value}`);
+    changed.push(key);
+  }
+
+  if (changed.length === 0) {
+    return { id, file: ticket.file, status: ticket.status, priority: ticket.priority, changed, bodyUnchanged: true };
+  }
+
+  // `updated_date` is the one key this function adds rather than replaces, and it is here because
+  // backlog.md set it on every write — retiring that program should not quietly lose the only
+  // record of when a ticket last moved. Placed directly after `created_date` so the two dates sit
+  // together; appended at the end when there is no `created_date` to sit under.
+  const today = now.toLocaleDateString("en-CA"); // local YYYY-MM-DD, as tickets.mjs writes dates
+  const stampLine = `updated_date: '${today}'`;
+  if (/^updated_date:[ \t]*.*$/m.test(front)) {
+    front = front.replace(/^updated_date:[ \t]*.*$/m, stampLine);
+  } else if (/^created_date:[ \t]*.*$/m.test(front)) {
+    front = front.replace(/^(created_date:[ \t]*.*)$/m, `$1${eol}${stampLine}`);
+  } else {
+    front = front + eol + stampLine;
+  }
+
+  const updated = head + front + tail;
+
+  // The assertion. By construction `tail` cannot have changed — this is here for the edit to this
+  // function that stops that being true, and it refuses rather than warns.
+  if (!updated.endsWith(tail) || updated.slice(updated.length - tail.length) !== tail) {
+    throw new Error(`${ticket.file}: the write would have altered the ticket body — refusing`);
+  }
+
+  // Compare-and-swap. The window between this read and the rename is microseconds, but a stale
+  // overwrite of someone's own hand-edit is exactly the failure the pin format exists to prevent.
+  if (readFileSync(absolute, "utf8") !== original) {
+    throw new Error(`${ticket.file} changed on disk while it was being edited — nothing was written`);
+  }
+
+  const tmp = `${absolute}.${process.pid}.${Math.random().toString(36).slice(2, 8)}.tmp`;
+  try {
+    writeFileSync(tmp, updated, { encoding: "utf8", flag: "wx" });
+    renameSync(tmp, absolute);
+  } catch (e) {
+    rmSync(tmp, { force: true });
+    throw e;
+  }
+
+  return {
+    id,
+    file: ticket.file,
+    status: fields.get("status") ?? ticket.status,
+    priority: fields.get("priority") ?? ticket.priority,
+    changed,
+    bodyUnchanged: true,
+  };
+}
+
+/* -------------------------------------------------------------------- html */
+
+const esc = (s) =>
+  String(s ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+
+/** JSON safe to sit inside a `<script type="application/json">` block. */
+const jsonScript = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
+
+/** `To Do` → `to-do`, for a class name. */
+const slug = (s) => String(s ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "none";
+
+/**
+ * Selector health, as the board shows it.
+ *
+ * `selector_matches` is how many DOM nodes the ticket's selector resolved to on a genuinely fresh
+ * load of its page — counted by shot.mjs on the same DOM it screenshots, immediately before the
+ * shutter. It answers one question: can an agent be pointed at this ticket, or does it need
+ * human hands?
+ *
+ *   1            → yes. The overwhelming majority, and this returns null for it: a healthy card
+ *                  emits no extra element at all, so a healthy board looks exactly as it did.
+ *   0            → no. The element could not be found on reload. Everything else on the ticket is
+ *                  still correct — the picture, the source file, the outer_html — so it is perfectly
+ *                  workable by hand, and that is what the banner says. It is not an error.
+ *   2 or more    → no. Several elements match, so an agent might edit the wrong one.
+ *   "pending"    → never tested (shots off, or the screenshot failed). Not a problem; a quiet line
+ *                  in the meta list, no banner.
+ *   undefined    → the ticket predates the field. Nothing is shown, because nothing is known.
+ *
+ * The comparison is `=== 0`, on a value that is already a number. Writing this as a truthiness test
+ * is the one mistake the field was shaped to prevent — see the note on `selectorMatches` above.
+ */
+export function selectorFlag(matches) {
+  if (matches === 0) {
+    return {
+      kind: "dead",
+      label: "Selector finds nothing",
+      note: "Needs a human — an agent cannot locate this element",
+      icon: `<path d="M12 3.6 1.9 20.4h20.2L12 3.6Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 9.6v4.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="17.3" r="1.05" fill="currentColor"/>`,
+    };
+  }
+  if (typeof matches === "number" && Number.isInteger(matches) && matches >= 2) {
+    return {
+      kind: "many",
+      label: `Selector finds ${matches} elements`,
+      note: "Needs a human — an agent could edit the wrong one",
+      icon: `<rect x="3.1" y="3.1" width="11.2" height="11.2" rx="2.1" fill="none" stroke="currentColor" stroke-width="1.7"/><rect x="9.7" y="9.7" width="11.2" height="11.2" rx="2.1" fill="none" stroke="currentColor" stroke-width="1.7"/>`,
+    };
+  }
+  return null;
+}
+
+/**
+ * The neutral half: what the detail panel says about a selector that carries no banner.
+ *
+ * `1` and a missing field both say nothing — one because it is fine, the other because nothing is
+ * known and inventing a reading would be worse than silence. Anything else non-numeric is shown
+ * verbatim rather than rounded to a state this file made up.
+ */
+function selectorNote(matches) {
+  if (matches === undefined || typeof matches === "number") return null;
+  return String(matches) === "pending" ? "not tested yet" : String(matches);
+}
+
+/** The comment, as prose paragraphs and code blocks. Never folded into one string. */
+function commentHtml(parts, cls = "comment") {
+  if (!parts.length) return `<p class="${cls} ${cls}--none">No comment recorded.</p>`;
+  return parts
+    .map((p) =>
+      p.type === "code"
+        ? `<pre class="snippet"${p.lang ? ` data-lang="${esc(p.lang)}"` : ""}><code>${esc(p.value)}</code></pre>`
+        : `<p class="${cls}">${esc(p.value)}</p>`,
+    )
+    .join("\n");
+}
+
+/** Everything a search box should match on, flattened once here instead of in the browser. */
+const haystack = (t) =>
+  [
+    t.id,
+    t.title,
+    t.status,
+    t.priority,
+    t.dispatch,
+    t.source,
+    t.url,
+    t.file,
+    t.selector,
+    ...(t.labels ?? []),
+    ...t.comment.map((p) => p.value),
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+
+/**
+ * One card. Kept deliberately shallow — a thumbnail, a title, and the three facts that decide
+ * whether you open it: which ticket it is, whether an agent fires now or waits, and which file
+ * it lands in. Everything else is one click away in the detail panel, because thirty cards that
+ * each show everything is a wall you cannot scan, which is the whole complaint this board fixes.
+ *
+ * @param {(ticket: object) => string | null} assetHref where THIS surface fetches a screenshot
+ * @param {boolean} live whether the card can be dragged and written
+ */
+function card(t, assetHref, live) {
+  const href = assetHref(t);
+  const flag = selectorFlag(t.selectorMatches);
+
+  const dims = t.shotW && t.shotH ? ` width="${t.shotW}" height="${t.shotH}"` : "";
+  const thumb = href
+    ? `<div class="thumb"><img src="${esc(href)}"${dims} alt="" loading="lazy" decoding="async"></div>`
+    : `<div class="thumb thumb--empty"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18v14H3z" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="8.5" cy="10" r="1.6" fill="currentColor"/><path d="m4 17 5-4.5 3.5 3L16 12l4 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg><span>No screenshot yet</span></div>`;
+
+  const data = {
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    // Only set when the file says something older than the card does — see the detail panel's
+    // meta rows, which explain the difference rather than leaving it to be found in the file.
+    statusOnDisk: t.statusOnDisk ?? null,
+    priority: t.priority,
+    dispatch: t.dispatch,
+    source: t.source,
+    selector: t.selector,
+    selectorNote: selectorNote(t.selectorMatches),
+    flag: flag ? { kind: flag.kind, label: flag.label, note: flag.note } : null,
+    url: t.url,
+    viewport: t.viewport,
+    file: t.file,
+    created: t.created,
+    updated: t.updated,
+    labels: t.labels,
+    shot: href,
+    shotExpected: t.shotExpected,
+    commentHtml: commentHtml(t.comment, "dtext"),
+  };
+
+  return `<article class="card${flag ? ` card--${flag.kind}` : ""}" data-card data-id="${esc(t.id)}" data-status="${esc(t.status)}" data-priority="${esc(t.priority ?? "")}" data-flag="${flag ? "1" : "0"}" data-search="${esc(haystack(t))}" tabindex="0" role="button" aria-label="${esc(t.id)}: ${esc(t.title)}">
+${flag ? `<div class="flag flag--${flag.kind}" title="${esc(flag.note)}"><svg viewBox="0 0 24 24" aria-hidden="true">${flag.icon}</svg><span>${esc(flag.label)}</span></div>` : ""}
+${thumb}
+<div class="card-body">
+  <h3 class="card-title">${esc(t.title)}</h3>
+  <div class="card-row">
+    <span class="tid">${esc(t.id)}</span>
+    ${t.dispatch ? `<span class="pill pill--${t.dispatch === "now" ? "now" : "queue"}" title="Dispatch mode">${esc(t.dispatch)}</span>` : `<span class="pill pill--unset" title="No dispatch field in this ticket">no dispatch</span>`}
+    ${t.priority ? `<span class="pill pill--pri pill--pri-${esc(slug(t.priority))}" title="Priority">${esc(t.priority)}</span>` : ""}
+  </div>
+  <p class="card-src" title="${esc(t.source ?? "")}">${t.source && t.source !== "unresolved" ? esc(t.source) : `<em>unresolved</em>`}</p>
+</div>
+<script type="application/json" class="card-data">${jsonScript(data)}</script>
+</article>`;
+}
+
+/**
+ * One card, on its own — what the write endpoint hands back after a successful status change so
+ * the browser can replace the card it moved with the one the file now says exists.
+ *
+ * It re-renders from a FRESH read of the ticket rather than from what the browser believed, which
+ * is why the endpoint re-collects before calling this: the card on screen after a drag is the
+ * card the disk would draw, not an optimistic guess that happens to match.
+ */
+export function renderCard(ticket, { assetHref = () => null, live = true } = {}) {
+  return card(ticket, assetHref, live);
+}
+
+/** The panel listing tickets that could not be read at all. */
+function brokenPanel(broken) {
+  if (!broken.length) return "";
+  return `<section class="broken" role="alert">
+  <h2>${esc(broken.length)} ticket${broken.length === 1 ? "" : "s"} could not be read</h2>
+  <p>These are not shown below. Each is a <code>pin-NNN</code> ticket the parser rejected, so an agent reading the board gets nothing at all: <code>listTickets()</code> throws on the first one it reaches and returns no tickets, not a shorter list.</p>
+  <ul>${broken.map((b) => `<li><code>${esc(b.file)}</code><span>${esc(b.reason)}</span></li>`).join("")}</ul>
+</section>`;
+}
+
+/**
+ * The board, as one HTML document: a plain kanban, three columns, neutral tool chrome.
+ *
+ * ── Why it looks like nothing ────────────────────────────────────────────────────────────────
+ * Ruled 2026-09-22: the board is never styled in the styles of the site being built — it is a
+ * standard kanban board, easy to use and easy to take in at a glance. This is a tool,
+ * not a deliverable. The palette here is greys with coloured status and priority pills — the
+ * register of the backlog.md UI it replaces — and deliberately shares nothing with the client's
+ * site. A board that borrows the brand makes a screenshot of a bug look like a page of the site,
+ * which is precisely the wrong thing when every card ON it is a screenshot of the site.
+ *
+ * Both surfaces render from here. The only differences are `assetHref` (where a screenshot is
+ * fetched from) and `apiHref` (the write endpoint) — and `apiHref` is what makes the board
+ * writable: without it the page has no drag handlers and no status menus, which is exactly the
+ * standalone file's situation, since nothing is listening on the other end of a `file://` page.
+ *
+ * @param {object[]} tickets from `collectTickets`
+ * @param {{file: string, reason: string}[]} broken
+ * @param {object} options
+ * @param {(ticket: object) => string | null} options.assetHref where this surface fetches a shot
+ * @param {string|null} [options.apiHref] the write endpoint; null makes the page read-only
+ * @param {Date} [options.generatedAt]
+ */
+export function renderBoard(tickets, broken = [], options = {}) {
+  const { assetHref = () => null, apiHref = null, generatedAt = new Date(), links = null } = options;
+  const live = Boolean(apiHref);
+
+  // The corner links. `<a href="/lab">Lab</a>` was written into the markup until 2026-09-22 — a
+  // guess that is right only while the lab sits at its default subpath, and one a consumer had no
+  // way to correct. It is an option now, and in the merged package the caller can do better than
+  // an option's default: `orbytesLab()` reads its OWN resolved `subpath` and passes that, so the
+  // link is derived from the same value the routes are injected at rather than agreeing with it
+  // by luck. `[]` draws nothing; `null` keeps the historical pair for a standalone caller.
+  const navLinks = (Array.isArray(links) ? links : [{ href: "/", label: "Site" }, { href: "/lab", label: "Lab" }])
+    .filter((l) => l && l.href)
+    .map((l) => ({ href: String(l.href), label: String(l.label ?? l.href) }));
+  const nav = navLinks.length
+    ? `<nav class="links">${navLinks.map((l) => `<a class="link" href="${esc(l.href)}">${esc(l.label)}</a>`).join("")}</nav>`
+    : "";
+
+  // Every status on disk, in board order, with the four known ones always present so an empty
+  // column is still a place to drop a card. Anything else found on disk gets a column too, marked
+  // undroppable: the writer refuses a status outside the allowlist, so offering it as a target
+  // would be a promise this board cannot keep. A legacy `Done` never reaches here as a column of
+  // its own — `collectTickets` has already normalised it to `Resolved`.
+  const seen = new Set(tickets.map((t) => t.status));
+  const columns = [...STATUSES, ...[...seen].filter((s) => !STATUSES.includes(s)).sort()];
+
+  const counts = Object.fromEntries(columns.map((s) => [s, tickets.filter((t) => t.status === s).length]));
+  // Both of these are calls to action, so they are counted over LIVE tickets only — a cancelled
+  // ticket with a dead selector is not a job, and putting it in the tally would send you looking
+  // for work in the archive.
+  const liveTickets = tickets.filter((t) => t.status !== CANCELLED);
+  const needsHuman = liveTickets.filter((t) => selectorFlag(t.selectorMatches)).length;
+  const missing = liveTickets.filter((t) => !assetHref(t)).length;
+  // The number the whole 2026-09-22 change exists to put on screen: how many tickets an agent has
+  // finished and no human has accepted. It leads the summary line, ahead of every other count.
+  const waiting = counts[READY_FOR_REVIEW] ?? 0;
+  const archived = counts[CANCELLED] ?? 0;
+  const stamp = generatedAt.toLocaleString("en-AU", { dateStyle: "medium", timeStyle: "short" });
+
+  // One line per column saying what it MEANS. Six nouns with no gloss is a vocabulary you have to
+  // be told once and then remember, and four of these six carry a real rule — who may start work,
+  // who may close it, what an agent never sees. The line is the cheapest place to keep the rule
+  // where the decision is made.
+  const COLUMN_NOTES = {
+    [BACKLOG]: "not for agents yet",
+    [READY_FOR_AGENT]: "agents start here",
+    [IN_PROGRESS]: "an agent is on it",
+    [READY_FOR_REVIEW]: "waiting on you",
+    [RESOLVED]: "you accept these",
+    [CANCELLED]: "archive — agents skip it",
+  };
+
+  const board = columns
+    .map((status) => {
+      const rows = tickets.filter((t) => t.status === status);
+      const known = STATUSES.includes(status);
+      const note = COLUMN_NOTES[status];
+      const kind = status === READY_FOR_REVIEW ? " col--review" : status === CANCELLED ? " col--archive" : "";
+      return `<section class="col${kind}" data-col data-status="${esc(status)}" data-droppable="${live && known ? "1" : "0"}" aria-label="${esc(status)}${note ? ` — ${esc(note)}` : ""}">
+  <header class="col-head"><span class="dot dot--${esc(slug(status))}"></span><span class="col-name">${esc(status)}</span><span class="count" data-count>${rows.length}</span>${note ? `<span class="col-note">${esc(note)}</span>` : ""}</header>
+  <div class="col-body" data-body>
+    ${rows.map((t) => card(t, assetHref, live)).join("\n")}
+    <p class="col-empty" data-empty>${live && known ? "Drop a card here" : "Nothing here"}</p>
+  </div>
+</section>`;
+    })
+    .join("\n");
+
+  const chips = [`<button type="button" class="chip is-on" data-filter="all">All <b data-chip-count="all">${tickets.length}</b></button>`]
+    .concat(
+      columns.map(
+        (s) =>
+          `<button type="button" class="chip${s === READY_FOR_REVIEW ? " chip--review" : ""}" data-filter="${esc(s)}">${esc(s)} <b data-chip-count="${esc(s)}">${counts[s]}</b></button>`,
+      ),
+    )
+    .join("");
+
+  const statusOptions = STATUSES.map((s) => `<option value="${esc(s)}">${esc(s)}</option>`).join("");
+  const priorityOptions = PRIORITIES.map((p) => `<option value="${esc(p)}">${esc(p)}</option>`).join("");
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Pin board — ${esc(tickets.length)} ticket${tickets.length === 1 ? "" : "s"}</title>
+<style>
+:root{
+  color-scheme:light dark;
+  --bg:#f5f6f8; --col:#eceef1; --panel:#fff; --line:#d7dce2; --soft:#e8ebef;
+  --ink:#141a20; --dim:#5b6874; --faint:#8a95a1;
+  --accent:#2563eb; --accent-soft:#dbe6fe;
+  --s-backlog:#94a3b8; --s-ready-for-agent:#0f766e; --s-in-progress:#1d4ed8;
+  --s-ready-for-review:#6d28d9; --s-resolved:#15803d; --s-cancelled:#a1a8b0;
+  /* The review column's own colour, and it is violet on purpose: red and amber are already spoken
+     for by the two selector-health flags (--dead, --many), which sit ON cards inside every column.
+     A queue that borrowed either would read as a wall of broken tickets. */
+  --review:#6d28d9; --review-ink:#fff; --review-soft:#f1ebfe; --review-line:#c4b5fd;
+  --now:#b42318; --now-bg:#fde8e6; --queue:#475569; --queue-bg:#e6eaef;
+  --pri-high:#b42318; --pri-high-bg:#fde8e6;
+  --pri-medium:#5b6874; --pri-medium-bg:#eceef1;
+  --pri-low:#5b6874; --pri-low-bg:#f2f4f6;
+  --dead:#b42318; --dead-ink:#fff; --many:#b45309; --many-ink:#fff;
+  --shadow:0 1px 2px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.06);
+  --lift:0 6px 16px -4px rgba(16,24,40,.18);
+  --r:8px;
+}
+@media (prefers-color-scheme:dark){
+  :root{
+    --bg:#0f1317; --col:#171c22; --panel:#1d242b; --line:#2b333c; --soft:#232b33;
+    --ink:#e6edf3; --dim:#9aa7b4; --faint:#7c8894;
+    --accent:#60a5fa; --accent-soft:#1e3a5f;
+    --s-backlog:#6b7683; --s-ready-for-agent:#2dd4bf; --s-in-progress:#60a5fa;
+    --s-ready-for-review:#c4b5fd; --s-resolved:#4ade80; --s-cancelled:#5c656f;
+    --review:#a78bfa; --review-ink:#1a1030; --review-soft:#241b3d; --review-line:#5b47a0;
+    --now:#fca5a5; --now-bg:#3f1d1a; --queue:#a9b6c3; --queue-bg:#262f38;
+    --pri-high:#fca5a5; --pri-high-bg:#3f1d1a;
+    --pri-medium:#a9b6c3; --pri-medium-bg:#262f38;
+    --pri-low:#8a95a1; --pri-low-bg:#212931;
+    --dead:#dc4c42; --dead-ink:#fff; --many:#c2761a; --many-ink:#1a1204;
+    --shadow:0 1px 2px rgba(0,0,0,.5); --lift:0 8px 20px -6px rgba(0,0,0,.7);
+  }
+}
+*{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%}
+body{
+  margin:0;background:var(--bg);color:var(--ink);
+  font:14px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+}
+code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+
+/* ── top bar ───────────────────────────────────────────────────────────── */
+.top{
+  position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);
+  padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
+}
+.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
+.brand h1{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
+.sub{margin:0;color:var(--dim);font-size:12.5px;white-space:nowrap}
+.sub b{color:var(--ink);font-weight:650}
+.sub .warn{color:var(--dead);font-weight:650}
+.sub .ready{color:var(--review);font-weight:750}
+.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1 1 320px;min-width:0}
+.search{position:relative;flex:1 1 200px;min-width:160px;max-width:340px}
+.search input{
+  width:100%;appearance:none;background:var(--bg);color:var(--ink);
+  border:1px solid var(--line);border-radius:var(--r);padding:7px 10px 7px 30px;font:inherit;font-size:13px;
+}
+.search input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
+.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--faint)}
+.chips{display:flex;gap:5px;flex-wrap:wrap}
+.chip{
+  appearance:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:550;
+  background:var(--bg);color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 10px;
+  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
+}
+.chip b{font-weight:650;font-size:11px;background:var(--soft);border-radius:999px;padding:1px 6px;color:var(--dim)}
+.chip:hover{border-color:var(--accent);color:var(--ink)}
+.chip.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
+.chip.is-on b{background:var(--panel);color:var(--ink)}
+/* Same rule as the column: violet identifies it, but the badge only FILLS when there is something
+   in it. A filled violet zero points at nothing, and a signal that points at nothing twice is a
+   signal you stop reading. has-count is toggled in applyFilters beside the number itself. */
+.chip--review{border-color:var(--review-line);color:var(--review)}
+.chip--review.has-count b{background:var(--review);color:var(--review-ink)}
+.chip--review:hover{border-color:var(--review);color:var(--review)}
+.chip--review.is-on{background:var(--review-soft);border-color:var(--review);color:var(--review)}
+.chip--review.is-on b{background:var(--review);color:var(--review-ink)}
+.check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);cursor:pointer;white-space:nowrap}
+.check input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
+.links{display:flex;gap:6px;margin-left:auto}
+.link{
+  text-decoration:none;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
+  padding:6px 11px;color:var(--dim);font-size:12.5px;font-weight:600;white-space:nowrap;
+}
+.link:hover{border-color:var(--accent);color:var(--accent)}
+
+/* ── columns ───────────────────────────────────────────────────────────── */
+/* Five live columns at equal width, then a NARROW sixth for the archive.
+   Cancelled is just an archive for cancelled work, so it gets a rail rather
+   than a column: a wall whose last sixth is dead tickets is a wall that reads as one-sixth dead
+   work. Its track is minmax(118px,.42fr) — wide enough to drop into and to read the count,
+   narrow enough that it never competes. On the stacked layouts it becomes an ordinary column,
+   last, which is the only sensible thing a single-column list can do with it. */
+.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(118px,.42fr);gap:14px;padding:16px;align-items:start}
+.col{background:var(--col);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-width:0}
+.col.is-over{border-color:var(--accent);background:var(--accent-soft)}
+.col-head{
+  display:flex;align-items:center;gap:8px;padding:11px 13px 9px;flex-wrap:wrap;
+  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
+  position:sticky;top:var(--top-h,57px);background:var(--col);border-radius:10px 10px 0 0;z-index:5;
+}
+.col-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* The gloss, on its own row under the name. Six columns share 1440px, so a note beside the name
+   would be three words of ellipsis; a second row costs 13px once and reads at every width. */
+.col-note{
+  flex:0 0 100%;margin-top:-3px;
+  font-size:10px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--faint);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
+}
+.count{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:0;background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:1px 7px}
+.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
+.dot--backlog{background:var(--s-backlog)}
+.dot--ready-for-agent{background:var(--s-ready-for-agent)}
+.dot--in-progress{background:var(--s-in-progress)}
+.dot--ready-for-review{background:var(--s-ready-for-review)}
+.dot--resolved{background:var(--s-resolved)}
+.dot--cancelled{background:var(--s-cancelled)}
+
+/* ── the review column ─────────────────────────────────────────────────────
+   The human review queue, and the reason the status model changed at all (2026-09-22): tickets
+   go into Ready for review and a human closes them. A column that merely existed would have moved
+   nothing — the board's job is to make the pile waiting on review the first thing you see, from
+   across the room, without reading a word.
+
+   Two levels, and the split is what keeps it honest. The QUIET level is always on — violet dot,
+   violet rule down the left, "waiting on you" under the name — so the column says what it is even
+   when it is empty. The LOUD level is gated on .has-cards, which applyFilters() toggles from
+   the count it has already computed, so a tinted panel and a filled count appear only when there
+   is genuinely something in there, and go quiet the moment a filter empties the column. A queue
+   that shouts at an empty column teaches you to stop looking at it, which is the one failure that
+   would undo this whole change.
+
+   The class comes from JS rather than :has(.card:not([hidden])), which is the obvious way to
+   write it and is a trap: :has() takes the specificity of its argument, so that selector would
+   outweigh .col.is-over and the drag-hover highlight would stop appearing on this column alone.
+   The is-over override below is belt and braces for the same reason. */
+.col--review{border-color:var(--review-line);box-shadow:inset 3px 0 0 var(--review)}
+.col--review .col-note{color:var(--review)}
+.col--review.has-cards{background:var(--review-soft);border-color:var(--review)}
+.col--review.has-cards .col-head{background:var(--review-soft);color:var(--review)}
+.col--review.has-cards .count{background:var(--review);border-color:var(--review);color:var(--review-ink)}
+.col--review.is-over{background:var(--accent-soft);border-color:var(--accent)}
+.col--review.is-over .col-head{background:var(--accent-soft)}
+
+/* ── the archive column ────────────────────────────────────────────────────
+   The opposite job to the one above: Cancelled has to be reachable and has to stop pulling the
+   eye. Narrow track (› .board), no dot colour worth noticing, cards desaturated and dimmed until
+   you actually hover one. It is still a real drop target — a ticket is cancelled by dragging it
+   here, or from the status menu — and it is the ONLY place a cancelled ticket is visible at all,
+   since every agent-facing read drops them. An archive nobody can open is a delete. */
+.col--archive{background:transparent;border-style:dashed;box-shadow:none}
+.col--archive .col-head{background:transparent}
+.col--archive .col-name,.col--archive .col-note{color:var(--faint)}
+.col--archive .card{opacity:.55;filter:saturate(.25)}
+.col--archive .card:hover,.col--archive .card:focus-visible{opacity:1;filter:none}
+.col--archive .card-title{-webkit-line-clamp:2}
+.col--archive .thumb img{max-height:56px}
+.col-body{padding:0 9px 10px;display:flex;flex-direction:column;gap:9px;min-height:90px}
+.col-empty{
+  margin:0;padding:16px 8px;text-align:center;color:var(--faint);font-size:12.5px;
+  border:1px dashed var(--line);border-radius:var(--r);
+}
+.col-body:has(.card:not([hidden])) .col-empty{display:none}
+
+/* ── card ──────────────────────────────────────────────────────────────── */
+.card{
+  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
+  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;min-width:0;
+}
+.card:hover{border-color:var(--accent)}
+.card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.card.is-dragging{opacity:.35}
+/* The card that follows the pointer. A clone, positioned fixed and inert, so the real card stays
+   in its column as a hole until the drop lands — which is what makes a refused write a visible
+   snap-back rather than a card that was never anywhere. */
+.card.ghost{position:fixed;z-index:80;margin:0;pointer-events:none;opacity:.95;box-shadow:var(--lift);transform:rotate(1.2deg)}
+body.is-dragging-card{user-select:none;cursor:grabbing}
+body.is-dragging-card *{cursor:grabbing!important}
+.card.is-busy{opacity:.55;pointer-events:none}
+.card--dead{box-shadow:var(--shadow),inset 3px 0 0 var(--dead)}
+.card--many{box-shadow:var(--shadow),inset 3px 0 0 var(--many)}
+.flag{
+  display:flex;align-items:center;gap:6px;padding:5px 10px;
+  font:700 10px/1.3 inherit;letter-spacing:.05em;text-transform:uppercase;
+}
+.flag svg{width:13px;height:13px;flex:none}
+.flag--dead{background:var(--dead);color:var(--dead-ink)}
+.flag--many{background:var(--many);color:var(--many-ink)}
+.thumb{background:var(--soft);border-bottom:1px solid var(--line);line-height:0}
+/* "contain" in a FIXED box, and both halves of that are load-bearing.
+   · contain, not cover: a pin screenshot is a crop of ONE element, so the thumbnail's whole job is
+     recognising which one. "cover" on a 250px-wide card cut 64px off each side of an 800x220 hero
+     shot, so the headline arrived with its first letter clipped — measured on this board at
+     1024px, 2026-09-22.
+   · fixed height, not auto: "height:auto" was the first fix and it was worse. Without intrinsic
+     dimensions the box is 0px tall until the image loads, and a 0px-tall loading="lazy" image never
+     comes into view to load — every thumbnail on the board vanished. A fixed box needs no intrinsic
+     size, shifts no layout, and keeps lazy loading working.
+   The box then follows the image rather than boxing it: real width/height attributes (› pngSize)
+   give the browser the aspect ratio before the bytes arrive, so a 3024x154 navbar strip renders as
+   a 19px band and the card is 19px taller, instead of a 19px band adrift in a 96px rectangle that
+   reads as a broken thumbnail — which is exactly how it read at 390px. max-height clamps a tall
+   element; min-height keeps a box with no known dimensions off zero, because a zero-height lazy
+   image never loads. The detail panel shows every shot whole at full width regardless. */
+.thumb img{width:100%;height:auto;max-height:96px;min-height:28px;object-fit:contain;display:block}
+.thumb--empty{
+  height:56px;display:flex;align-items:center;justify-content:center;gap:7px;
+  color:var(--faint);line-height:1.3;font-size:11.5px;
+}
+.thumb--empty svg{width:16px;height:16px;opacity:.8}
+.card-body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:7px;min-width:0}
+.card-title{
+  margin:0;font-size:13.5px;line-height:1.4;font-weight:600;letter-spacing:-.005em;
+  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
+}
+.card-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
+.tid{font:650 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;color:var(--dim)}
+.pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 6px}
+.pill--now{background:var(--now-bg);color:var(--now)}
+.pill--queue{background:var(--queue-bg);color:var(--queue)}
+.pill--unset{background:transparent;border:1px dashed var(--line);color:var(--faint);text-transform:none;letter-spacing:0}
+.pill--pri-high{background:var(--pri-high-bg);color:var(--pri-high)}
+.pill--pri-medium{background:var(--pri-medium-bg);color:var(--pri-medium)}
+.pill--pri-low{background:var(--pri-low-bg);color:var(--pri-low)}
+.card-src{
+  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;
+  color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left;
+}
+.card-src em{font-style:normal;color:var(--now)}
+.card-data{display:none}
+
+/* ── detail ────────────────────────────────────────────────────────────── */
+dialog{
+  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);
+  padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:var(--lift);
+}
+dialog::backdrop{background:rgba(10,14,18,.55)}
+.d-head{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);border-radius:12px 12px 0 0}
+.d-head h2{margin:0 0 4px;font-size:16.5px;line-height:1.35;font-weight:650;overflow-wrap:anywhere}
+.d-close{margin-left:auto;appearance:none;cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);color:var(--dim);font:inherit;font-size:18px;line-height:1;padding:4px 10px}
+.d-close:hover{border-color:var(--accent);color:var(--accent)}
+.d-body{padding:16px 18px 20px;overflow:auto;display:grid;gap:16px}
+.d-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
+.field{display:grid;gap:4px}
+.field span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
+.field select{
+  appearance:none;background:var(--bg) no-repeat right 8px center;color:var(--ink);font:inherit;font-size:13px;
+  border:1px solid var(--line);border-radius:var(--r);padding:6px 26px 6px 9px;min-width:132px;cursor:pointer;
+  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
+  background-size:5px 5px,5px 5px;background-position:right 13px center,right 8px center;
+}
+.field select:disabled{opacity:.5;cursor:not-allowed}
+.field select:focus{outline:2px solid var(--accent);outline-offset:-1px}
+/* min-height reserves room before the shot loads. Without it the panel opens with the comment
+   directly under the menus and then shoves it 200px down a moment later — measured here on first
+   open, 2026-09-22, where the card thumbnail had not finished loading either. */
+.d-shot{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--soft);line-height:0;min-height:120px}
+.d-shot img{width:100%;height:auto;display:block;max-height:46vh;object-fit:contain}
+.dtext{margin:0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
+.dtext+.dtext{margin-top:9px}
+.dtext--none{color:var(--faint);font-style:italic}
+.snippet{margin:9px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;overflow-x:auto}
+.snippet code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.55}
+.snippet[data-lang]::before{content:attr(data-lang);display:block;margin:0 0 6px;font:700 9.5px/1 inherit;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
+.d-meta{margin:0;display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);gap:5px 14px;font-size:12.5px}
+.d-meta dt{color:var(--dim);font-weight:650}
+.d-meta dd{margin:0;min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
+.d-flag{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--r);font-size:12.5px;font-weight:600}
+.d-flag--dead{background:var(--dead);color:var(--dead-ink)}
+.d-flag--many{background:var(--many);color:var(--many-ink)}
+.labels{display:flex;flex-wrap:wrap;gap:5px}
+.tag{font-size:10.5px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
+
+/* ── the rest ──────────────────────────────────────────────────────────── */
+.broken{margin:16px 16px 0;padding:13px 15px;border-radius:var(--r);background:var(--now-bg);border:1px solid var(--now);color:var(--now)}
+.broken h2{margin:0 0 4px;font-size:13.5px}
+.broken p{margin:0 0 8px;font-size:12.5px;opacity:.92}
+.broken ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
+.broken li{display:grid;gap:2px;font-size:12px;overflow-wrap:anywhere}
+.none{margin:60px auto;text-align:center;color:var(--faint)}
+#toast{
+  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:60;
+  background:var(--dead);color:#fff;border-radius:var(--r);padding:10px 15px;font-size:13px;font-weight:600;
+  max-width:min(560px,calc(100vw - 32px));box-shadow:var(--lift);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;
+}
+#toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
+#toast.is-ok{background:var(--s-resolved)}
+/* Six columns need more steps down than three did. The archive keeps its narrow track only while
+   the live columns are still side by side; once they wrap it is just another column, last. */
+@media (max-width:1400px){
+  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
+}
+@media (max-width:1040px){
+  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
+}
+@media (max-width:700px){
+  .board{grid-template-columns:1fr;gap:12px}
+  .col-head{position:static}
+  .col-body{min-height:0}
+  .col--archive .card{opacity:1;filter:none}
+}
+@media (max-width:560px){
+  .top{padding:9px 12px;gap:8px}
+  .board{padding:12px}
+  .search{max-width:none;flex-basis:100%}
+  /* Four stacked rows of chrome pushed the first card off a 390px screen. The counts line is
+     dropped because the chips already carry every one of its numbers, and Site/Lab are reordered
+     up beside the title, which the shorter title row now has room for. Two rows, not four. */
+  .sub{display:none}
+  .brand{flex:1 1 auto}
+  .links{order:1;margin-left:auto}
+  .tools{order:2;flex-basis:100%}
+}
+@media (prefers-reduced-motion:reduce){*{transition:none!important}}
+</style>
+</head>
+<body>
+<header class="top">
+  <div class="brand">
+    <h1>Pin board</h1>
+    <p class="sub">${waiting ? `<b class="ready">${esc(waiting)}</b> ready for your review · ` : ""}<b>${esc(tickets.length)}</b> ticket${tickets.length === 1 ? "" : "s"}${needsHuman ? ` · <b class="warn">${esc(needsHuman)}</b> needing a human` : ""}${missing ? ` · <b>${esc(missing)}</b> without a screenshot` : ""}${broken.length ? ` · <b class="warn">${esc(broken.length)}</b> unreadable` : ""}${archived ? ` · ${esc(archived)} archived` : ""}${live ? "" : ` · snapshot, ${esc(stamp)}`}</p>
+  </div>
+  <div class="tools">
+    <div class="search">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.4" fill="none" stroke="currentColor" stroke-width="2"/><path d="m16 16 4.6 4.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+      <input id="q" type="search" placeholder="Search title, comment, file, label…" autocomplete="off" aria-label="Search tickets">
+    </div>
+    <div class="chips" role="group" aria-label="Filter by status">${chips}</div>
+    <label class="check"><input type="checkbox" id="human"> Needs a human</label>
+  </div>
+  ${live ? nav : ""}
+</header>
+${brokenPanel(broken)}
+${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"}"${live ? ` data-api="${esc(apiHref)}"` : ""}>${board}</main>` : `<p class="none">No tickets in <code>backlog/tasks/</code> yet.</p>`}
+
+<dialog id="detail" aria-label="Ticket detail">
+  <div class="d-head">
+    <div>
+      <h2 data-d-title></h2>
+      <div class="card-row"><span class="tid" data-d-id></span><span data-d-dispatch></span></div>
+    </div>
+    <button type="button" class="d-close" data-d-close aria-label="Close">&times;</button>
+  </div>
+  <div class="d-body">
+    <div data-d-flag></div>
+    <div class="d-controls">
+      <label class="field"><span>Status</span><select data-d-status ${live ? "" : "disabled"}>${statusOptions}</select></label>
+      <label class="field"><span>Priority</span><select data-d-priority ${live ? "" : "disabled"}>${priorityOptions}</select></label>
+    </div>
+    <div data-d-shot></div>
+    <div data-d-comment></div>
+    <dl class="d-meta" data-d-meta></dl>
+    <div class="labels" data-d-labels></div>
+  </div>
+</dialog>
+<div id="toast" role="status" aria-live="polite"></div>
+<script>
+(function(){
+  "use strict";
+  var board = document.querySelector("[data-board]");
+  var api = board ? board.getAttribute("data-api") : null;
+  var dlg = document.getElementById("detail");
+  var toastEl = document.getElementById("toast");
+  var open = null;
+
+  // The column heads stick below the toolbar, and the toolbar is two rows tall on a narrow
+  // window. Measured rather than assumed: a hardcoded offset put the heads 19px under the search
+  // box the moment the chips wrapped.
+  var topBar = document.querySelector(".top");
+  function measureTop(){
+    document.documentElement.style.setProperty("--top-h", topBar.offsetHeight + "px");
+  }
+  measureTop();
+  if (window.ResizeObserver) new ResizeObserver(measureTop).observe(topBar);
+  else window.addEventListener("resize", measureTop);
+
+  function toast(msg, ok){
+    toastEl.textContent = msg;
+    toastEl.className = "is-on" + (ok ? " is-ok" : "");
+    clearTimeout(toast.t);
+    toast.t = setTimeout(function(){ toastEl.className = ""; }, ok ? 2200 : 6000);
+  }
+  function cards(){ return Array.prototype.slice.call(document.querySelectorAll("[data-card]")); }
+  function dataOf(el){
+    var s = el.querySelector(".card-data");
+    try { return JSON.parse(s.textContent); } catch (e) { return null; }
+  }
+
+  /* ── filtering ─────────────────────────────────────────────────────── */
+  var q = document.getElementById("q");
+  var humanOnly = document.getElementById("human");
+  var statusFilter = "all";
+
+  function applyFilters(){
+    var text = (q.value || "").trim().toLowerCase();
+    var terms = text ? text.split(/\s+/) : [];
+    var visible = {};
+    cards().forEach(function(el){
+      var hay = el.getAttribute("data-search") || "";
+      var okText = terms.every(function(t){ return hay.indexOf(t) !== -1; });
+      var okStatus = statusFilter === "all" || el.getAttribute("data-status") === statusFilter;
+      var okHuman = !humanOnly.checked || el.getAttribute("data-flag") === "1";
+      var show = okText && okStatus && okHuman;
+      el.hidden = !show;
+      if (show) { var s = el.getAttribute("data-status"); visible[s] = (visible[s] || 0) + 1; }
+    });
+    var total = 0;
+    document.querySelectorAll("[data-col]").forEach(function(col){
+      var s = col.getAttribute("data-status");
+      var n = visible[s] || 0;
+      total += n;
+      col.querySelector("[data-count]").textContent = String(n);
+      // What lights the review column up. Toggled from the count that was just computed, so it
+      // follows the filters: search down to nothing and the queue goes quiet with everything else.
+      // See the .col--review block for why this is a class and not :has().
+      col.classList.toggle("has-cards", n > 0);
+      col.hidden = statusFilter !== "all" && statusFilter !== s;
+    });
+    document.querySelectorAll("[data-chip-count]").forEach(function(b){
+      var k = b.getAttribute("data-chip-count");
+      var n = k === "all" ? total : (visible[k] || 0);
+      b.textContent = String(n);
+      // Only a chip with something behind it gets the filled badge — see .chip--review.
+      b.parentNode.classList.toggle("has-count", n > 0);
+    });
+  }
+  q.addEventListener("input", applyFilters);
+  humanOnly.addEventListener("change", applyFilters);
+  document.querySelectorAll(".chip").forEach(function(chip){
+    chip.addEventListener("click", function(){
+      statusFilter = chip.getAttribute("data-filter");
+      document.querySelectorAll(".chip").forEach(function(c){ c.classList.toggle("is-on", c === chip); });
+      applyFilters();
+    });
+  });
+  document.addEventListener("keydown", function(e){
+    if (e.key === "/" && document.activeElement !== q && !dlg.open) { e.preventDefault(); q.focus(); q.select(); }
+  });
+
+  /* ── detail panel ──────────────────────────────────────────────────── */
+  function fill(d){
+    dlg.querySelector("[data-d-title]").textContent = d.title;
+    dlg.querySelector("[data-d-id]").textContent = d.id;
+    dlg.querySelector("[data-d-dispatch]").innerHTML = d.dispatch
+      ? '<span class="pill pill--' + (d.dispatch === "now" ? "now" : "queue") + '">' + d.dispatch + "</span>"
+      : "";
+    var flagBox = dlg.querySelector("[data-d-flag]");
+    flagBox.innerHTML = d.flag
+      ? '<div class="d-flag d-flag--' + d.flag.kind + '">' + d.flag.label + " — " + d.flag.note + "</div>"
+      : "";
+    dlg.querySelector("[data-d-status]").value = d.status;
+    var pri = dlg.querySelector("[data-d-priority]");
+    pri.value = d.priority || "medium";
+    dlg.querySelector("[data-d-shot]").innerHTML = d.shot
+      ? '<a class="d-shot" href="' + d.shot + '" target="_blank" rel="noreferrer"><img src="' + d.shot + '" alt=""></a>'
+      : "";
+    dlg.querySelector("[data-d-comment]").innerHTML = d.commentHtml;
+    var rows = [
+      ["Source", d.source || "unresolved"],
+      ["Selector", d.selector || "—"],
+      ["Page", d.url ? d.url + (d.viewport && d.viewport.width ? "  ·  " + d.viewport.width + "x" + d.viewport.height : "") : "—"],
+      ["Ticket", d.file],
+      ["Created", d.created || "—"]
+    ];
+    if (d.updated) rows.push(["Updated", d.updated]);
+    if (d.statusOnDisk) rows.push(["Status on disk", d.statusOnDisk + " — retired wording, rewritten to " + d.status + " on the next change to this ticket"]);
+    if (d.selectorNote) rows.push(["Selector check", d.selectorNote]);
+    if (!d.shot && d.shotExpected) rows.push(["Screenshot", "missing — expected " + d.shotExpected]);
+    dlg.querySelector("[data-d-meta]").innerHTML = rows.map(function(r){
+      var v = String(r[1]).replace(/&/g, "&amp;").replace(/</g, "&lt;");
+      return "<dt>" + r[0] + "</dt><dd>" + v + "</dd>";
+    }).join("");
+    dlg.querySelector("[data-d-labels]").innerHTML = (d.labels || []).map(function(l){
+      return '<span class="tag">' + l + "</span>";
+    }).join("");
+  }
+  function openCard(el){
+    var d = dataOf(el);
+    if (!d) return;
+    open = el;
+    fill(d);
+    dlg.showModal();
+  }
+  dlg.querySelector("[data-d-close]").addEventListener("click", function(){ dlg.close(); });
+  dlg.addEventListener("click", function(e){ if (e.target === dlg) dlg.close(); });
+
+  if (board) {
+    board.addEventListener("click", function(e){
+      var el = e.target.closest("[data-card]");
+      if (el && !e.target.closest("a")) openCard(el);
+    });
+    board.addEventListener("keydown", function(e){
+      if (e.key !== "Enter" && e.key !== " ") return;
+      var el = e.target.closest("[data-card]");
+      if (el) { e.preventDefault(); openCard(el); }
+    });
+  }
+
+  /* ── the write path ────────────────────────────────────────────────── */
+  if (!api) { applyFilters(); return; }
+
+  function moveTo(el, status){
+    var col = document.querySelector('[data-col][data-status="' + status + '"] [data-body]');
+    if (col) col.insertBefore(el, col.querySelector("[data-empty]"));
+  }
+
+  function commit(el, change, revert){
+    var d = dataOf(el);
+    el.classList.add("is-busy");
+    return fetch(api, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        id: d.id,
+        status: change.status,
+        priority: change.priority,
+        expect: { status: d.status, priority: d.priority }
+      })
+    }).then(function(r){
+      return r.json().then(function(body){ return { ok: r.ok, body: body }; });
+    }).then(function(res){
+      el.classList.remove("is-busy");
+      if (!res.ok || !res.body.ok) {
+        if (revert) revert();
+        toast(res.body && res.body.error ? res.body.error : "the write was refused", false);
+        return;
+      }
+      var fresh = document.createRange().createContextualFragment(res.body.card).firstElementChild;
+      el.replaceWith(fresh);
+      if (open === el) { open = fresh; fill(dataOf(fresh)); }
+      moveTo(fresh, res.body.status);
+      applyFilters();
+      toast(res.body.id + " is now " + res.body.status + (change.priority ? " / " + res.body.priority : ""), true);
+    }).catch(function(err){
+      el.classList.remove("is-busy");
+      if (revert) revert();
+      toast("could not reach the dev server: " + err.message, false);
+    });
+  }
+
+  /* ── dragging ───────────────────────────────────────────────────────
+     Pointer events, not HTML5 drag-and-drop, and the reason is that the second one cannot be
+     verified here. A synthetic mouse press-move-release does not start a native drag in Chrome,
+     so a "dragstart" handler can only ever be tested by firing "dragstart" at it by hand — which
+     tests the handler and not the drag. Pointer events are driven identically by a real mouse and
+     by the harness, so the drag proved below is the drag a user performs. They also give a drag
+     image we control and a drop target resolved with elementFromPoint rather than by hit-testing
+     rules that differ per browser.
+
+     Touch is deliberately excluded: a drag that begins on touch would have to fight the page's own
+     scrolling, and on a phone the columns are stacked anyway. The status menu in the detail panel
+     is the touch and keyboard path to exactly the same write. */
+  var drag = null;
+  var swallowClick = false;
+
+  function columnUnder(x, y){
+    var el = document.elementFromPoint(x, y);
+    return el ? el.closest('[data-col][data-droppable="1"]') : null;
+  }
+  function clearHighlight(){
+    document.querySelectorAll(".col.is-over").forEach(function(c){ c.classList.remove("is-over"); });
+  }
+  function endDrag(){
+    if (!drag) return;
+    if (drag.ghost) drag.ghost.remove();
+    drag.el.classList.remove("is-dragging");
+    document.body.classList.remove("is-dragging-card");
+    clearHighlight();
+    drag = null;
+  }
+
+  board.addEventListener("pointerdown", function(e){
+    if (e.button !== 0 || e.pointerType === "touch") return;
+    var el = e.target.closest("[data-card]");
+    if (!el || e.target.closest("a") || el.classList.contains("is-busy")) return;
+    drag = { el: el, x0: e.clientX, y0: e.clientY, pid: e.pointerId, started: false };
+  });
+
+  window.addEventListener("pointermove", function(e){
+    if (!drag || e.pointerId !== drag.pid) return;
+    if (!drag.started) {
+      // A few pixels of slop, so a click on a card is a click and not a one-pixel drag.
+      if (Math.abs(e.clientX - drag.x0) + Math.abs(e.clientY - drag.y0) < 6) return;
+      var box = drag.el.getBoundingClientRect();
+      drag.dx = drag.x0 - box.left;
+      drag.dy = drag.y0 - box.top;
+      var ghost = drag.el.cloneNode(true);
+      ghost.classList.add("ghost");
+      ghost.removeAttribute("data-card");
+      ghost.style.width = box.width + "px";
+      document.body.appendChild(ghost);
+      drag.ghost = ghost;
+      drag.el.classList.add("is-dragging");
+      document.body.classList.add("is-dragging-card");
+      try { drag.el.setPointerCapture(e.pointerId); } catch (x) {}
+      drag.started = true;
+    }
+    drag.ghost.style.left = (e.clientX - drag.dx) + "px";
+    drag.ghost.style.top = (e.clientY - drag.dy) + "px";
+    clearHighlight();
+    var col = columnUnder(e.clientX, e.clientY);
+    if (col && col.getAttribute("data-status") !== drag.el.getAttribute("data-status")) col.classList.add("is-over");
+    e.preventDefault();
+  });
+
+  window.addEventListener("pointerup", function(e){
+    if (!drag || e.pointerId !== drag.pid) return;
+    if (!drag.started) { drag = null; return; }   // it was a click after all
+    // The click that ends a drag must not open the detail panel — but a drag that ends over a
+    // DIFFERENT element fires no click at all, so a flag that waits to be consumed by one leaks
+    // and eats the next genuine click instead. Measured on this board, 2026-09-22: after a drag
+    // from To Do to Done, the first click on any card did nothing. Cleared on a timeout, which
+    // runs after the click if there is one and regardless if there is not.
+    swallowClick = true;
+    setTimeout(function(){ swallowClick = false; }, 0);
+    var el = drag.el;
+    var col = columnUnder(e.clientX, e.clientY);
+    endDrag();
+    if (!col) return;
+    var to = col.getAttribute("data-status");
+    var from = el.getAttribute("data-status");
+    if (to === from) return;
+    var home = el.parentNode, next = el.nextSibling;
+    moveTo(el, to);
+    applyFilters();
+    commit(el, { status: to }, function(){
+      if (home) home.insertBefore(el, next);
+      applyFilters();
+    });
+  });
+  window.addEventListener("pointercancel", function(){ endDrag(); });
+  // Capture phase: the click that ends a drag must not also open the detail panel.
+  document.addEventListener("click", function(e){
+    if (!swallowClick) return;
+    e.stopPropagation();
+    e.preventDefault();
+  }, true);
+
+  /* the menus in the detail panel — the keyboard and touch path to the same write */
+  dlg.querySelector("[data-d-status]").addEventListener("change", function(e){
+    if (!open) return;
+    var el = open, was = el.getAttribute("data-status");
+    var home = el.parentNode, next = el.nextSibling;
+    moveTo(el, e.target.value);
+    applyFilters();
+    commit(el, { status: e.target.value }, function(){
+      if (home) home.insertBefore(el, next);
+      e.target.value = was;
+      applyFilters();
+    });
+  });
+  dlg.querySelector("[data-d-priority]").addEventListener("change", function(e){
+    if (!open) return;
+    var el = open, was = el.getAttribute("data-priority");
+    commit(el, { priority: e.target.value }, function(){ e.target.value = was || "medium"; });
+  });
+
+  applyFilters();
+})();
+</script>
+</body>
+</html>
+`;
+}