@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/src/pin/board.mjs

@@ -671,16 +671,10 @@ const haystack = (t) =>
  * @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) {
+function cardData(t, assetHref) {
   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 = {
+  return {
     id: t.id,
     title: t.title,
     status: t.status,
@@ -703,6 +697,18 @@ function card(t, assetHref, live) {
     shotExpected: t.shotExpected,
     commentHtml: commentHtml(t.comment, "dtext"),
   };
+}
+
+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 = cardData(t, assetHref);
 
   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>` : ""}
@@ -743,116 +749,44 @@ function brokenPanel(broken) {
 }
 
 /**
- * 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.
+ * One row of the All Tasks table — the same ticket, the same `card-data` payload and the same
+ * data attributes as its card, so the detail panel, the search, the chips and the write path work on
+ * it unchanged. Rows are not dragged; the detail panel's menus move them.
+ */
+function row(t, assetHref) {
+  const flag = selectorFlag(t.selectorMatches);
+  const data = cardData(t, assetHref);
+  const created = t.created ? String(t.created) : "";
+  const updated = t.updated ? String(t.updated) : created;
+  return `<tr class="trow${flag ? ` trow--${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))}" data-sort-id="${esc(t.id)}" data-sort-title="${esc(String(t.title ?? "").toLowerCase())}" data-sort-status="${esc(STATUSES.indexOf(t.status) === -1 ? 99 : STATUSES.indexOf(t.status))}" data-sort-priority="${esc(PRIORITIES.indexOf(t.priority) === -1 ? 9 : PRIORITIES.indexOf(t.priority))}" data-sort-source="${esc(t.source ?? "")}" data-sort-updated="${esc(updated)}" tabindex="0" role="button" aria-label="${esc(t.id)}: ${esc(t.title)}">
+<td class="tt-id"><span class="tid">${esc(t.id)}</span></td>
+<td class="tt-title">${esc(t.title)}${flag ? ` <span class="pill pill--flag-${flag.kind}" title="${esc(flag.note)}">${esc(flag.label)}</span>` : ""}</td>
+<td data-cell="status"><span class="dot dot--${esc(slug(t.status))}"></span>${esc(t.status)}</td>
+<td data-cell="priority">${t.priority ? `<span class="pill pill--pri-${esc(slug(t.priority))}">${esc(t.priority)}</span>` : ""}</td>
+<td>${t.dispatch ? `<span class="pill pill--${t.dispatch === "now" ? "now" : "queue"}">${esc(t.dispatch)}</span>` : ""}</td>
+<td class="tt-src" title="${esc(t.source ?? "")}">${t.source && t.source !== "unresolved" ? esc(t.source) : "<em>unresolved</em>"}</td>
+<td class="tt-date">${esc(updated.slice(0, 16).replace("T", " "))}</td>
+<td class="tt-data"><script type="application/json" class="card-data">${jsonScript(data)}</script></td>
+</tr>`;
+}
+
+/**
+ * The board's stylesheet — ONE copy, used by both surfaces: the standalone file and the lab's
+ * Tasks views (../chrome/views/Tasks.astro).
  *
- * 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.
+ * SCOPED WITH `@scope (.pin-board)` since 2026-09-24, when the board moved into the lab's chrome
+ * (decided that day: one URL, `<subpath>/tasks`, drawn in the lab's own furniture). Until then it
+ * was a document of its own and styled `body`, `*` and `dialog` freely; inside the lab those would
+ * have restyled the chrome around it. Now every rule stops at the board's own root, and its column
+ * breakpoints are CONTAINER queries on that root rather than viewport queries — in the lab the
+ * board is the width of the main area, not of the window.
  *
- * @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]
+ * Its palette is its own greys and status colours standalone (and follows the OS dark mode there);
+ * `.pin-board--lab` maps it onto the lab's `--lab-*` tokens instead, so it themes with the chrome.
  */
-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;
+export const BOARD_CSS = String.raw`@scope (.pin-board) {
+:scope{
+  container:pin-board / inline-size;
   --bg:#f5f6f8; --col:#eceef1; --panel:#fff; --line:#d7dce2; --soft:#e8ebef;
   --ink:#141a20; --dim:#5b6874; --faint:#8a95a1;
   --accent:#2563eb; --accent-soft:#dbe6fe;
@@ -872,7 +806,7 @@ export function renderBoard(tickets, broken = [], options = {}) {
   --r:8px;
 }
 @media (prefers-color-scheme:dark){
-  :root{
+  :scope:not(.pin-board--lab){
     --bg:#0f1317; --col:#171c22; --panel:#1d242b; --line:#2b333c; --soft:#232b33;
     --ink:#e6edf3; --dim:#9aa7b4; --faint:#7c8894;
     --accent:#60a5fa; --accent-soft:#1e3a5f;
@@ -887,10 +821,9 @@ export function renderBoard(tickets, broken = [], options = {}) {
     --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);
+:scope,:scope *{box-sizing:border-box}
+:scope{
+  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}
@@ -1031,8 +964,8 @@ code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
    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}
+:scope.is-dragging-card{user-select:none;cursor:grabbing}
+:scope.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)}
@@ -1144,19 +1077,19 @@ dialog::backdrop{background:rgba(10,14,18,.55)}
 #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){
+@container pin-board (max-width:1400px){
   .board{grid-template-columns:repeat(3,minmax(0,1fr))}
 }
-@media (max-width:1040px){
+@container pin-board (max-width:1040px){
   .board{grid-template-columns:repeat(2,minmax(0,1fr))}
 }
-@media (max-width:700px){
+@container pin-board (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){
+@container pin-board (max-width:560px){
   .top{padding:9px 12px;gap:8px}
   .board{padding:12px}
   .search{max-width:none;flex-basis:100%}
@@ -1169,52 +1102,88 @@ dialog::backdrop{background:rgba(10,14,18,.55)}
   .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(){
+/* ── the All Tasks table ───────────────────────────────────────────────── */
+.tt-wrap{padding:16px}
+.tt-id{white-space:nowrap}
+.tt{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:13px}
+.tt th{position:sticky;top:var(--top-h,57px);z-index:3;background:var(--panel);text-align:left;padding:0;border-bottom:1px solid var(--line);white-space:nowrap}
+.tt th:first-child{border-top-left-radius:10px}
+.tt th:last-child{border-top-right-radius:10px}
+.tt th button{appearance:none;display:flex;align-items:center;gap:4px;width:100%;padding:10px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:left}
+.tt th button:hover{color:var(--ink)}
+.tt th[aria-sort="ascending"] button::after{content:"↑"}
+.tt th[aria-sort="descending"] button::after{content:"↓"}
+.tt td{padding:9px 12px;border-bottom:1px solid var(--soft);vertical-align:middle}
+.tt tbody tr:last-child td{border-bottom:0}
+.trow{cursor:pointer}
+.trow:hover td{background:var(--soft)}
+.trow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.trow.is-busy{opacity:.55;pointer-events:none}
+.trow--dead td:first-child{box-shadow:inset 3px 0 0 var(--dead)}
+.trow--many td:first-child{box-shadow:inset 3px 0 0 var(--many)}
+.tt-title{font-weight:600;min-width:220px;overflow-wrap:anywhere}
+.tt-title .pill{margin-left:6px;vertical-align:1px}
+.pill--flag-dead{background:var(--dead);color:var(--dead-ink)}
+.pill--flag-many{background:var(--many);color:var(--many-ink)}
+.tt td[data-cell="status"]{white-space:nowrap}
+.tt td[data-cell="status"] .dot{display:inline-block;margin-right:7px;vertical-align:1px}
+.tt-src{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--faint)}
+.tt-src em{font-style:normal;color:var(--now)}
+.tt-date{white-space:nowrap;color:var(--dim);font-variant-numeric:tabular-nums}
+.tt-data{display:none}
+@container pin-board (max-width:900px){
+  .tt-src,.tt th:nth-child(6){display:none}
+}
+}
+
+/* The lab's palette for the board, outside the scope so it outranks the board's own defaults. */
+.pin-board.pin-board--lab{
+  --bg:var(--lab-bg-secondary); --col:var(--lab-bg-hover); --panel:var(--lab-bg-primary);
+  --line:var(--lab-border-secondary); --soft:var(--lab-bg-hover);
+  --ink:var(--lab-text-primary); --dim:var(--lab-text-tertiary); --faint:var(--lab-text-quaternary);
+  --accent:var(--lab-brand-solid); --accent-soft:var(--lab-bg-active);
+  --review:#6941c6; --review-ink:#fff; --review-soft:#f9f5ff; --review-line:#d6bbfb;
+  --shadow:var(--lab-shadow-xs); --lift:var(--lab-shadow-lg); --r:8px;
+  font-family:var(--lab-font);
+  min-height:100%;
+}
+.pin-board.pin-board--lab .top{background:var(--lab-bg-primary)}
+/* In the lab the board shares the window with two sidebars, so its six columns keep a fixed width
+   and the row scrolls sideways — a board you can read across beats one wrapped into a stack. */
+.pin-board.pin-board--lab .board{
+  grid-template-columns:repeat(5,minmax(248px,1fr)) minmax(160px,.55fr);
+  overflow-x:auto;
+}
+:root.dark .pin-board.pin-board--lab{
+  --s-backlog:#6b7683; --s-ready-for-agent:#2dd4bf; --s-in-progress:#60a5fa;
+  --s-ready-for-review:#c4b5fd; --s-resolved:#4ade80; --s-cancelled:#5c656f;
+  --review:#b692f6; --review-ink:#1a1030; --review-soft:#231b36; --review-line:#53389e;
+  --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;
+}
+`;
+
+/** What only the standalone file needs: it is its own document, so it owns <html> and <body>. */
+const STANDALONE_CSS = `html{-webkit-text-size-adjust:100%}
+body{margin:0;background:#f5f6f8}
+@media (prefers-color-scheme:dark){body{background:#0f1317}}
+.pin-board{min-height:100vh}`;
+
+/**
+ * The board's script — ONE copy for both surfaces, like the stylesheet. `String.raw` on purpose:
+ * this used to sit inside the page's template literal, which silently turned every backslash
+ * escape into its bare letter — the search box split queries on the letter "s" (`/\s+/` arrived
+ * as `/s+/`) from 2026-09-22 until this move. A raw string keeps the script byte for byte.
+ */
+export const BOARD_SCRIPT = String.raw`(function(){
   "use strict";
+  var root = document.querySelector(".pin-board") || document.body;
   var board = document.querySelector("[data-board]");
+  var table = board && board.getAttribute("data-view") === "table";
   var api = board ? board.getAttribute("data-api") : null;
   var dlg = document.getElementById("detail");
   var toastEl = document.getElementById("toast");
@@ -1237,6 +1206,8 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
     clearTimeout(toast.t);
     toast.t = setTimeout(function(){ toastEl.className = ""; }, ok ? 2200 : 6000);
   }
+  function slugOf(s){ return String(s || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "none"; }
+  function escOf(s){ return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;"); }
   function cards(){ return Array.prototype.slice.call(document.querySelectorAll("[data-card]")); }
   function dataOf(el){
     var s = el.querySelector(".card-data");
@@ -1262,6 +1233,7 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
       if (show) { var s = el.getAttribute("data-status"); visible[s] = (visible[s] || 0) + 1; }
     });
     var total = 0;
+    if (table) Object.keys(visible).forEach(function(k){ total += visible[k]; });
     document.querySelectorAll("[data-col]").forEach(function(col){
       var s = col.getAttribute("data-status");
       var n = visible[s] || 0;
@@ -1290,7 +1262,22 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
       applyFilters();
     });
   });
+  // ?status=<name> opens the board filtered to that column — how the lab's level 2 links to one.
+  (function(){
+    var wanted = new URLSearchParams(location.search).get("status");
+    if (!wanted) return;
+    document.querySelectorAll(".chip").forEach(function(chip){
+      if (chip.getAttribute("data-filter") === wanted) {
+        statusFilter = wanted;
+        document.querySelectorAll(".chip").forEach(function(c){ c.classList.toggle("is-on", c === chip); });
+      }
+    });
+  })();
   document.addEventListener("keydown", function(e){
+    // The lab's keyboard guard, when there is one (../LabHead.astro): a "/" typed into the pin
+    // composer is retargeted to the dev toolbar's shadow host, so activeElement alone reads it
+    // as a stray keystroke and steals it.
+    if (window.__labIgnoreKey && window.__labIgnoreKey(e)) return;
     if (e.key === "/" && document.activeElement !== q && !dlg.open) { e.preventDefault(); q.focus(); q.select(); }
   });
 
@@ -1353,10 +1340,31 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
     });
   }
 
+  /* ── sorting (the table view) ──────────────────────────────────────── */
+  if (table) {
+    board.querySelectorAll("[data-sort]").forEach(function(button){
+      button.addEventListener("click", function(){
+        var key = button.getAttribute("data-sort");
+        var th = button.closest("th");
+        var dir = th.getAttribute("aria-sort") === "ascending" ? -1 : 1;
+        board.querySelectorAll("th[aria-sort]").forEach(function(t){ t.removeAttribute("aria-sort"); });
+        th.setAttribute("aria-sort", dir === 1 ? "ascending" : "descending");
+        var body = board.querySelector("tbody");
+        var rows = Array.prototype.slice.call(body.querySelectorAll("[data-card]"));
+        rows.sort(function(a, b){
+          var x = a.getAttribute("data-sort-" + key) || "", y = b.getAttribute("data-sort-" + key) || "";
+          return x < y ? -dir : x > y ? dir : 0;
+        });
+        rows.forEach(function(r){ body.appendChild(r); });
+      });
+    });
+  }
+
   /* ── the write path ────────────────────────────────────────────────── */
   if (!api) { applyFilters(); return; }
 
   function moveTo(el, status){
+    if (table) return;
     var col = document.querySelector('[data-col][data-status="' + status + '"] [data-body]');
     if (col) col.insertBefore(el, col.querySelector("[data-empty]"));
   }
@@ -1382,8 +1390,25 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
         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);
+      var fresh;
+      if (table) {
+        // A row stays a row: its cells and payload are brought up to date where it stands.
+        fresh = el;
+        var d2 = dataOf(el) || {};
+        d2.status = res.body.status;
+        d2.priority = res.body.priority;
+        el.querySelector(".card-data").textContent = JSON.stringify(d2);
+        el.setAttribute("data-status", res.body.status);
+        el.setAttribute("data-priority", res.body.priority || "");
+        el.setAttribute("data-sort-status", res.body.status);
+        var sc = el.querySelector('[data-cell="status"]');
+        if (sc) sc.innerHTML = '<span class="dot dot--' + slugOf(res.body.status) + '"></span>' + escOf(res.body.status);
+        var pc = el.querySelector('[data-cell="priority"]');
+        if (pc) pc.innerHTML = res.body.priority ? '<span class="pill pill--pri-' + slugOf(res.body.priority) + '">' + escOf(res.body.priority) + "</span>" : "";
+      } else {
+        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();
@@ -1421,12 +1446,13 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
     if (!drag) return;
     if (drag.ghost) drag.ghost.remove();
     drag.el.classList.remove("is-dragging");
-    document.body.classList.remove("is-dragging-card");
+    root.classList.remove("is-dragging-card");
     clearHighlight();
     drag = null;
   }
 
   board.addEventListener("pointerdown", function(e){
+    if (table) return;   // rows are not dragged; the status menu in the detail panel moves them
     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;
@@ -1445,10 +1471,10 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
       ghost.classList.add("ghost");
       ghost.removeAttribute("data-card");
       ghost.style.width = box.width + "px";
-      document.body.appendChild(ghost);
+      root.appendChild(ghost);
       drag.ghost = ghost;
       drag.el.classList.add("is-dragging");
-      document.body.classList.add("is-dragging-card");
+      root.classList.add("is-dragging-card");
       try { drag.el.setPointerCapture(e.pointerId); } catch (x) {}
       drag.started = true;
     }
@@ -1513,7 +1539,195 @@ ${tickets.length ? `<main class="board" data-board data-live="${live ? "1" : "0"
   });
 
   applyFilters();
-})();
+})();`;
+
+/**
+ * The board, in parts — each surface lays them out in its own frame. `view: "table"` draws the
+ * All Tasks table instead of the columns; everything else (search, chips, detail panel, the write
+ * path) is shared.
+ *
+ * ── 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. 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.
+ *
+ * `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]
+ * @param {{href: string, label: string}[]|null} [options.links] corner links; [] draws none
+ * @param {"board"|"table"} [options.view]
+ */
+export function boardParts(tickets, broken = [], options = {}) {
+  const { assetHref = () => null, apiHref = null, generatedAt = new Date(), links = null, view = "board" } = options;
+  const live = Boolean(apiHref);
+
+  // The corner links. The caller passes its own resolved addresses; `[]` 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 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.
+  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.
+  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;
+  // How many tickets an agent has finished and no human has accepted. It leads the summary.
+  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 — four of these six carry a real rule.
+  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 sortable = (key, label) => `<th scope="col"><button type="button" data-sort="${key}">${label}</button></th>`;
+  // Newest first by default: the table is where you go to find the thing you pinned a moment ago.
+  const byUpdated = [...tickets].sort((a, b) =>
+    String(b.updated ?? b.created ?? "").localeCompare(String(a.updated ?? a.created ?? "")),
+  );
+  const table = `<table class="tt">
+<thead><tr>${sortable("id", "Ticket")}${sortable("title", "Title")}${sortable("status", "Status")}${sortable("priority", "Priority")}<th scope="col"><button type="button" disabled>Dispatch</button></th>${sortable("source", "Source")}${sortable("updated", "Updated")}<th class="tt-data"></th></tr></thead>
+<tbody>${byUpdated.map((t) => row(t, assetHref)).join("\n")}</tbody>
+</table>`;
+
+  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("");
+
+  const summary = `${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)}`}`;
+
+  const tools = `<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>`;
+
+  const liveAttrs = live ? ` data-api="${esc(apiHref)}"` : "";
+  const main = !tickets.length
+    ? `<p class="none">No tickets in <code>backlog/tasks/</code> yet.</p>`
+    : view === "table"
+      ? `<div class="tt-wrap" data-board data-view="table" data-live="${live ? "1" : "0"}"${liveAttrs}>${table}</div>`
+      : `<main class="board" data-board data-live="${live ? "1" : "0"}"${liveAttrs}>${board}</main>`;
+
+  const dialog = `<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>`;
+
+  return {
+    title: `Pin board — ${tickets.length} ticket${tickets.length === 1 ? "" : "s"}`,
+    summary,
+    tools,
+    nav: live ? nav : "",
+    broken: brokenPanel(broken),
+    main,
+    dialog,
+    counts: { total: tickets.length, waiting, needsHuman, missing, archived, byStatus: counts },
+  };
+}
+
+/**
+ * The board as one standalone HTML document — what `orbytes-pin-gallery` writes, and what the pin
+ * middleware serves when the pin half runs without the lab. Inside the lab the same parts render in
+ * the chrome instead (../chrome/views/Tasks.astro).
+ */
+export function renderBoard(tickets, broken = [], options = {}) {
+  const p = boardParts(tickets, broken, options);
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(p.title)}</title>
+<style>
+${STANDALONE_CSS}
+${BOARD_CSS}
+</style>
+</head>
+<body>
+<div class="pin-board">
+<header class="top">
+  <div class="brand">
+    <h1>Pin board</h1>
+    <p class="sub">${p.summary}</p>
+  </div>
+  ${p.tools}
+  ${p.nav}
+</header>
+${p.broken}
+${p.main}
+${p.dialog}
+</div>
+<script>
+${BOARD_SCRIPT}
 </script>
 </body>
 </html>