@bongos/core 1.24.52 → 1.24.54

package/modules/discord/webhook.js

@@ -71,16 +71,36 @@ function capContent(text) {
   return String(text).slice(0, 2000);
 }
 
+// THE BRAND ON A POST (task 1005091). A broadcast goes out as an EMBED, not as bare
+// message text: the same words as the embed's description, with the pack's accent as
+// the embed's colour bar, so every post in a channel reads as the product's. The
+// description cap is 4096 (an embed's own limit). Mentions inside an embed never ring,
+// which is #871's rule anyway; allowed_mentions stays parse:[] belt-and-braces.
+// The pack's accent as Discord's integer colour, or null (no bar) when it is not a hex.
+function brandColor(brand) {
+  let accent = '';
+  try { accent = ((brand || api.clientBranding()).theme || {}).colors.accent || ''; } catch { accent = ''; }
+  const m = /^#([0-9a-f]{6})$/i.exec(String(accent).trim());
+  return m ? parseInt(m[1], 16) : null;
+}
+// The body of a broadcast post: one embed carrying the text, coloured with the accent.
+function embedBody(text, brand) {
+  const embed = { description: String(text).slice(0, 4096) };
+  const color = brandColor(brand);
+  if (color !== null) embed.color = color;
+  return { embeds: [embed], allowed_mentions: { parse: [] } };
+}
+
 // R22 (the board mirror) needs the id of the message it just posted so the close
 // can be edited onto it, so the POST asks for the created message back
 // (`?wait=true` — Discord then answers 200 + the message JSON instead of 204 with
 // no body). The extra field is additive: every existing caller ignores the return.
-async function postCore(channel, text, allowedMentions) {
+async function postCore(channel, body) {
   const url = resolveWebhookUrl(channel);
   const res = await fetch(`${url}${url.includes('?') ? '&' : '?'}wait=true`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ content: capContent(text), allowed_mentions: allowedMentions }),
+    body: JSON.stringify(body),
   });
   if (!res.ok) {
     const body = await res.text().catch(() => '');
@@ -96,7 +116,7 @@ async function postCore(channel, text, allowedMentions) {
 // attacker-influenceable; allowed_mentions:{parse:[]} renders text verbatim but
 // fires zero notifications. (Discord defaults to parsing mentions when omitted.)
 async function postWebhook(channel, text) {
-  return postCore(channel, text, { parse: [] });
+  return postCore(channel, embedBody(text));
 }
 
 // postWebhookMentions — the ONE sanctioned exception to #871's blanket mention
@@ -104,10 +124,12 @@ async function postWebhook(channel, text) {
 // notice"). Still parse:[] — nothing typed INTO the content can ever ping — but
 // an explicit `users` allowlist lets exactly the named ids ring. The ids must
 // come from the board-membership resolve (server data), NEVER from message
-// text; the cap of 20 is a sanity bound far above any real board.
+// text; the cap of 20 is a sanity bound far above any real board. It stays
+// MESSAGE TEXT, not an embed: a mention inside an embed never rings, and ringing
+// is this post's whole job (R22's edit rewrites the same text in place).
 async function postWebhookMentions(channel, text, userIds = []) {
   const users = [...new Set(userIds.filter((u) => /^\d+$/.test(String(u))))].slice(0, 20).map(String);
-  return postCore(channel, text, { parse: [], users });
+  return postCore(channel, { content: capContent(text), allowed_mentions: { parse: [], users } });
 }
 
 // editWebhook — rewrite a message this webhook already posted, in place (R22 of
@@ -149,5 +171,5 @@ function hasWebhook(channel) {
 
 module.exports = {
   CHANNELS, WEBHOOKS_PATH, loadWebhooks, resolveWebhookUrl, hasWebhook,
-  postWebhook, postWebhookMentions, editWebhook,
+  postWebhook, postWebhookMentions, editWebhook, embedBody,
 };

package/modules/hall-ui/public/controls.css

@@ -321,3 +321,99 @@ select option { background: var(--bg-card); color: var(--ink); }
   gap: var(--ds-space-xs);
   margin-top: var(--ds-space-md);
 }
+
+/* ---------- the status pill (task 1005086) ----------
+   THE HALL'S ONE STATUS PILL. DESIGN.md "The hall": a status pill is the chip's
+   shape (a 26px full pill, lowercase) on a status -weak fill with the status
+   colour as its text. Six tones, from the hall's fixed verification vocabulary
+   and the one warm accent:
+     --ok       done, passed, live          --ok on --ok-weak
+     --warn     waiting, paused, at risk    --warn on --warn-weak
+     --danger   failed, refused, removed    --danger on --danger-weak
+     --info     moving, open, in hand       --info on --info-weak
+     --neutral  not started, closed, quiet (the base, no modifier needed)
+     --accent   yours, the current thing    --accent-ink on --accent-tint
+   A task's status picks its tone in ONE place, dom-utils.js STATUS_TONE
+   (OTB.statusPill writes the markup), so it reads the same on every page.
+   A status is always a word as well as a colour.
+
+   THE NAMES PAGES ALREADY WRITE join the one rule, as the buttons did in task
+   1005084: .rec-pill (the records), .fact-pill (the rows), .gov-pill,
+   .gate-pill and .badge (its aliases), with their tone modifiers mapped below.
+   Every colour is a status token, a -weak fill mixed into --bg-card, or the
+   accent pair; tests/hall_status_pill.mjs measures every tone in both modes. */
+.status-pill, .rec-pill, .fact-pill, .gov-pill, .gate-pill, .badge {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 26px;
+  padding: 0 var(--ds-space-xs);
+  font-family: var(--font-body);
+  font-size: var(--ds-text-xs-plus);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-transform: lowercase;
+  white-space: nowrap;
+  color: var(--ink-soft);
+  background: color-mix(in srgb, var(--ink) 6%, var(--bg-card));
+  border: var(--line) solid transparent;
+  border-radius: var(--radius-pill);
+}
+.status-pill--ok, .rec-pill--ok, .fact-pill--ok, .fact-pill--achieved {
+  color: var(--ok); background: var(--ok-weak);
+}
+.status-pill--warn, .rec-pill--warn, .fact-pill--warn, .fact-pill--blocked, .badge--sev-high {
+  color: var(--warn); background: var(--warn-weak);
+}
+.status-pill--danger, .rec-pill--danger, .fact-pill--danger, .badge--sev-critical {
+  color: var(--danger); background: var(--danger-weak);
+}
+.status-pill--info, .rec-pill--info, .fact-pill--info, .fact-pill--open, .badge--sev-medium {
+  color: var(--info); background: var(--info-weak);
+}
+.status-pill--neutral, .fact-pill--quiet, .fact-pill--archived, .badge--sev-low, .badge--status {
+  color: var(--ink-soft);
+  background: color-mix(in srgb, var(--ink) 6%, var(--bg-card));
+}
+.status-pill--accent {
+  color: var(--accent-ink); background: var(--accent-tint);
+}
+/* the row size, for a pill inside a dense line (a grade axis, a table cell) */
+.status-pill--sm, .rec-pill--sm { min-height: 22px; padding: 0 9px; font-size: var(--ds-text-2xs-plus); }
+/* a pill that is also a link keeps the pill, and says it is pressable on hover */
+a.status-pill, a.fact-pill { text-decoration: none; }
+a.status-pill:hover, a.fact-pill:hover { text-decoration: underline; text-underline-offset: 3px; }
+
+/* ---------- the view toggle (task 1005086) ----------
+   ONE segmented control for a VIEW (rows | cards, list | map): not a filter,
+   so the pressed side takes the tint the world gives a current thing, never
+   the accent fill (a view is not a live door). Moved here from goals.css, its
+   first home (task 1003470), so every page that switches a view writes it. */
+.viewtoggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-pill);
+}
+.viewtoggle__btn {
+  min-height: 26px;
+  min-width: 60px;
+  padding: 0 var(--ds-space-sm);
+  font: inherit;
+  font-size: var(--ds-text-sm);
+  text-transform: lowercase;
+  color: var(--ink-faint);
+  background: none;
+  border: 0;
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+}
+.viewtoggle__btn:hover { color: var(--ink-soft); }
+.viewtoggle__btn[aria-pressed="true"] {
+  color: var(--accent-ink);
+  background: var(--accent-tint);
+}
+.viewtoggle__btn:focus-visible { border-radius: var(--radius-pill); }

package/modules/hall-ui/public/dom-utils.js

@@ -93,14 +93,73 @@
   // (2200/2600/3200) and whether the prior hide-timer is cleared. A
   // module-level timer backs the clear path; each hall page loads one consuming
   // script, so it is effectively per-page.
+  //
+  // ONE TOAST, a duration per KIND (task 1005086): a confirmation reads in a
+  // glance, an error needs time to be read and acted on. `kind` is info | ok |
+  // warn | error; a message that opens like a failure ("Could not …", "Failed …")
+  // is an error even when the caller did not say so, so the forty call sites that
+  // predate the kinds get the error's longer hold without each being edited. An
+  // explicit `duration` still wins. Every message goes through plainMessage(), so
+  // a server address (a URL, a host, an IP and port) never reaches the screen.
+  const TOAST_MS = { info: 3200, ok: 2600, warn: 5000, error: 6500 };
+  const FAILURE_OPENING = /^\s*(could ?n[o']t|cannot|can't|failed|error\b|that did not|did not|not (saved|filed|proposed|sent))/i;
+  function toastKind(msg, kind) {
+    if (kind && TOAST_MS[kind]) return kind;
+    return FAILURE_OPENING.test(String(msg || '')) ? 'error' : 'info';
+  }
+
+  // plainMessage — a sentence safe to show: URLs, host names with a dot-separated
+  // domain, IPv4/IPv6 addresses and host:port pairs are replaced by "the server",
+  // so a fetch error ("request to https://10.0.0.5:8443/api failed") reads as a
+  // plain message. Collapses the doubled words the replacement can leave.
+  function plainMessage(msg) {
+    return String(msg ?? '')
+      .replace(/\b[a-z][a-z0-9+.-]*:\/\/[^\s"'<>)]*[^\s"'<>).,:;!?]/gi, 'the server')
+      .replace(/\[[0-9a-f:.]{2,}\](?::\d{2,5})?/gi, 'the server')
+      // an unbracketed IPv6: two or more colons, and a '::' or a hex letter (so a clock time is not one)
+      .replace(/(?<![\w:])(?=[0-9a-f:]*(?:::|[a-f]))[0-9a-f]{0,4}(?::[0-9a-f]{0,4}){2,7}(?![\w:])/gi, 'the server')
+      .replace(/\b\d{1,3}(?:\.\d{1,3}){3}(?::\d{2,5})?\b/g, 'the server')
+      .replace(/\b(?:localhost|[a-z0-9](?:[a-z0-9-]*[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)*\.(?:com|net|org|io|dev|app|cloud|internal|local|lan|localhost|test|example|co))(?::\d{2,5})?(?:\/[^\s"'<>)]*)?/gi, 'the server')
+      .replace(/\bthe server(?:\s+the server)+/g, 'the server')
+      .replace(/\s{2,}/g, ' ')
+      .trim();
+  }
+
   let _toastTimer = null;
-  function toast(msg, { duration = 3200, clear = false } = {}) {
+  function toast(msg, { duration, clear = false, kind } = {}) {
     const el = $('#toast');
     if (!el) return;
-    el.textContent = msg;
+    const k = toastKind(msg, kind);
+    el.textContent = plainMessage(msg);
+    el.dataset.kind = k;
     el.dataset.visible = '1';
     if (clear) clearTimeout(_toastTimer);
-    _toastTimer = setTimeout(() => { el.dataset.visible = '0'; }, duration);
+    _toastTimer = setTimeout(() => { el.dataset.visible = '0'; }, duration || TOAST_MS[k]);
+  }
+
+  // ONE STATUS → ONE TONE (task 1005086). A task's lifecycle status is coloured
+  // here and nowhere else, so it reads the same on the task page, a goal's
+  // table, Home's genesis stages and an idea's descent. The tones are the
+  // hall's verification vocabulary (DESIGN.md "The hall"): shipped and
+  // confirmed are done (ok); ready, active and completed are moving (info);
+  // blocked is waiting on something (warn); backlog and abandoned are neither
+  // (neutral). `backlog` is deliberately NOT amber: not scheduled is not a
+  // problem (task.js's note, kept). A status nobody mapped is neutral.
+  const STATUS_TONE = Object.freeze({
+    backlog: 'neutral', ready: 'info', active: 'info', blocked: 'warn',
+    completed: 'info', confirmed: 'ok', shipped: 'ok', abandoned: 'neutral',
+  });
+  const STATUS_TONES = Object.freeze(['ok', 'warn', 'danger', 'info', 'neutral', 'accent']);
+  function statusTone(status) {
+    return STATUS_TONE[String(status ?? '').trim().toLowerCase()] || 'neutral';
+  }
+  // The pill markup every page writes for a status: `.status-pill` + its tone
+  // (controls.css). `label` overrides the shown word (the status stays the key);
+  // `tone` names a tone directly for a status outside the task lifecycle.
+  function statusPill(status, { label, tone, small = false, extraClass = '' } = {}) {
+    const t = STATUS_TONES.includes(tone) ? tone : statusTone(status);
+    const cls = `status-pill status-pill--${t}${small ? ' status-pill--sm' : ''}${extraClass ? ` ${extraClass}` : ''}`;
+    return `<span class="${cls}">${escapeHtml(label ?? status ?? 'unknown')}</span>`;
   }
 
   // Feature-module gate (R60, task 1199 / ADR 0062 §4). serve-internal.js injects
@@ -472,6 +531,8 @@
 
   const OTB = {
     escapeHtml, sleep, $, fmtNum, num, fmtInt, fmtCompact, fmtDate, rankLabel, toast, moduleOn, disciplines,
+    plainMessage, toastKind, TOAST_MS, // task 1005086 — one toast, a duration per kind, no server address
+    STATUS_TONE, STATUS_TONES, statusTone, statusPill, // task 1005086 — one status, one tone, one pill
     // task 1003936 — ONE word for the role axis, all six surfaces
     roleAxisLabel, roleLabel, roleWord, roleOptions, roleIsUnset, ROLE_UNSET,
     fillKindFilter, kindLabel, kindIsUnset, KIND_UNSET, // task 1003453 — one Kind filler, all three surfaces

package/modules/hall-ui/public/genesis-home.js

@@ -187,7 +187,7 @@
       ? '<ul class="genesis__tasks">' + s.tasks.map(function (t) {
         return '<li class="genesis__task' + (t.finished ? ' is-finished' : '') + '">'
           + '<a class="genesis__task-t" href="/task/' + encodeURIComponent(t.id) + '">' + esc(t.title) + '</a>'
-          + '<span class="genesis__task-st">' + esc(t.status) + '</span></li>';
+          + window.OTB.statusPill(t.status, { small: true, extraClass: 'genesis__task-st' }) + '</li>';
       }).join('') + '</ul>'
       : '<p class="genesis__note">No tasks for this stage yet.</p>';
     return '<section class="genesis__now" aria-labelledby="genesis-now-h">'

package/modules/hall-ui/public/goal-forest-render.js

@@ -177,7 +177,7 @@
         : '<span class="gf-none">—</span>');
       const rowHtml = (r) => `<tr>
           <td><a class="lb-name" href="${taskHref(r.id)}">#${escapeHtml(r.id)} ${escapeHtml(r.title)}</a></td>
-          <td>${escapeHtml(r.status)}</td>
+          <td>${window.OTB.statusPill(r.status, { small: true })}</td>
           <td>${escapeHtml(r.priority)}</td>
           <td>${depList(r.waits)}</td>
           <td>${depList(r.needed)}</td>

package/modules/hall-ui/public/goals.css

@@ -283,14 +283,8 @@
    oversight select row), never the accent fill: a view is not a live door. */
 .goals-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 6px; }
 .goals-count-line { margin: 0; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
-.viewtoggle { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius-pill); }
-.viewtoggle__btn {
-  min-height: 26px; min-width: 60px; padding: 0 14px;
-  font: inherit; font-size: 13px; text-transform: lowercase; color: var(--ink-faint);
-  background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer;
-}
-.viewtoggle__btn:hover { color: var(--ink-soft); }
-.viewtoggle__btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-tint); }
+/* .viewtoggle itself is the hall's shared view toggle since task 1005086
+   (controls.css). */
 
 /* ============================================================
    The list — task 1002439's grouped rollup, redesigned in task 1003470 (goal

package/modules/hall-ui/public/idea.js

@@ -338,7 +338,7 @@
     const bits = [];
     if (row.relation) bits.push(escapeHtml(RELATION_WORD[row.relation] || row.relation));
     else if (row.depth === 0) bits.push('became work');
-    if (row.status) bits.push(escapeHtml(row.status));
+    if (row.status) bits.push(window.OTB.statusPill(row.status, { small: true }));
     // A version that is not the idea's own is the interesting case, not an
     // anomaly to hide: the descent crosses version boundaries deliberately
     // (ADR 0312) and the read carries version_id so a surface can SAY so.

package/modules/hall-ui/public/record.css

@@ -64,26 +64,9 @@
    sanctioned exception to the Fifteen Rule (DESIGN.md §Reuse) — a failed grade
    must not be salmon on a page whose ship button is also salmon — and its values
    are measured by tests/hall_tokens.mjs, never hand-tuned. */
-.rec-pill {
-  display: inline-flex;
-  align-items: center;
-  min-height: 26px;
-  padding: 0 13px;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius-pill);
-  background: none;
-  font-family: var(--font-body);
-  font-size: 12.5px;
-  font-weight: 500;
-  letter-spacing: 0;
-  text-transform: lowercase;
-  color: var(--ink-soft);
-}
-.rec-pill--ok { color: var(--ok); background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
-.rec-pill--warn { color: var(--warn); background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
-.rec-pill--danger { color: var(--danger); background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
-.rec-pill--info { color: var(--info); background: var(--info-weak); border-color: color-mix(in srgb, var(--info) 42%, transparent); }
-.rec-pill--sm { min-height: 22px; padding: 0 9px; font-size: 11.5px; }
+/* .rec-pill is the hall's ONE status pill since task 1005086 (controls.css
+   .status-pill, with .rec-pill and its --ok/--warn/--danger/--info/--sm joined
+   to it); the tone a lifecycle status takes is dom-utils.js STATUS_TONE. */
 
 .rec-title {
   margin: 0 0 18px;

package/modules/hall-ui/public/roster.css

@@ -102,6 +102,4 @@
    others carry a control; the foot line under the table says why. */
 .roster-warn { color: var(--danger); font-weight: 500; }
 .roster-self { color: var(--ink-faint); }
-.badge--sev-medium { color: var(--info); }
-.badge--status { color: var(--ink-faint); }
 .roster-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-faint); max-width: var(--measure); }

package/modules/hall-ui/public/style.css

@@ -797,7 +797,8 @@ html[data-theme="dark"] .gplate__light { display: none; }
 }
 .gplate--sm { width: 56px; height: 56px; }
 .genesis__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
-.genesis__stage-st, .genesis__task-st { flex: none; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint); }
+.genesis__stage-st { flex: none; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint); }
+.genesis__task-st { flex: none; } /* the shared status pill (task 1005086) */
 .genesis__stage.is-now .genesis__stage-st { color: var(--accent-ink); }
 .genesis__stage.is-later { opacity: 0.6; }
 .genesis__now-h { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
@@ -2102,10 +2103,13 @@ html.pb-editing main { padding-bottom: 180px; }
      .scroll         primary   — the default surface for a section
      .scroll--quiet  secondary — a card INSIDE a card, or supporting detail
      .scroll--bare   none      — layout-only, for stat rows and grids          */
-.scroll {
+/* THE PANEL (DESIGN.md "The hall"): the card ground, the panel corner, no
+   shadow, never nested in another. .panel is its plain name (task 1005086);
+   .scroll is the name every page already writes. */
+.scroll, .panel {
   background: var(--bg-card);
   border: 1px solid transparent;
-  border-radius: var(--radius);
+  border-radius: var(--ds-radius-panel);
   padding: var(--sp-md);
   margin: 0 0 var(--sp-md);
   /* anchor jumps must clear the 56px sticky top bar */
@@ -3751,6 +3755,10 @@ html[data-door="out"] #hall-main { width: 100%; }
   max-width: min(90vw, 480px);
 }
 .toast[data-visible="1"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
+/* An error toast (task 1005086: OTB.toast's kind, set on data-kind) is the status
+   red with the card's ink, the pair the danger button measures; it also holds
+   longest (dom-utils.js TOAST_MS), so there is time to read what went wrong. */
+.toast[data-kind="error"] { background: var(--danger); color: var(--bg-card); }
 
 #copy-toast {
   position: fixed;
@@ -4489,29 +4497,9 @@ html.palette-open { overflow: hidden; }
    mean editing the JS row builders, and a class name is not what was wrong —
    the duplicated, hand-rolled label voice was. Their own state modifiers stay
    in their own sheets. */
-.fact-pill,
-.gov-pill,
-.gate-pill,
-.badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  padding: 0 11px;
-  border: var(--line) solid currentColor;
-  border-radius: var(--radius-pill);
-  background: none;
-  font-family: var(--label-face);
-  font-size: 10.5px;
-  letter-spacing: var(--label-space);
-  text-transform: var(--label-case);
-  color: var(--ink-faint);
-  white-space: nowrap;
-}
-.fact-pill--open, .fact-pill--info { color: var(--info); }
-.fact-pill--blocked, .fact-pill--warn { color: var(--warn); }
-.fact-pill--achieved, .fact-pill--ok { color: var(--ok); }
-.fact-pill--danger { color: var(--danger); }
-.fact-pill--archived, .fact-pill--quiet { color: var(--ink-faint); }
+/* Since task 1005086 they are not only one another but the hall's ONE status
+   pill: controls.css .status-pill, with these names and their tone modifiers
+   joined to it. */
 
 /* A scope, not a state: what the record is filed under. Mono because it is a
    machine's word (a module key, a version id), --radius-sm because a pill would

package/modules/hall-ui/public/task.js

@@ -254,15 +254,13 @@
   // conflating them made every unscheduled task read as a problem. Backlog takes
   // the neutral pill; the lifecycle rail's first beat carries the distinction in
   // words ("not ready to be claimed yet" vs "waiting on another task").
-  const PILL_TONE = {
-    shipped: 'ok', confirmed: 'ok',
-    active: 'info', completed: 'info', ready: 'info',
-    blocked: 'warn',
-  };
-  function statusPill(status, extraClass) {
-    const s = String(status || 'unknown');
-    const tone = PILL_TONE[s];
-    return `<span class="rec-pill${tone ? ` rec-pill--${tone}` : ''}${extraClass ? ` ${extraClass}` : ''}">${escapeHtml(s)}</span>`;
+  //
+  // The map itself moved to dom-utils.js STATUS_TONE (task 1005086), so every page
+  // that shows a task's status colours it the same; the reasoning above is why it
+  // reads as it does. A word that is not a lifecycle status (the not-found and
+  // feed-down records) names its tone directly.
+  function statusPill(status, { tone, small } = {}) {
+    return window.OTB.statusPill(String(status || 'unknown'), { tone, small });
   }
 
   // `removable` is passed ONLY for "Blocked by" (task 1002858), and the asymmetry
@@ -274,7 +272,7 @@
   // task and remove it there.
   function depList(kindWord, items, { removable = false } = {}) {
     const rows = items.map((d) => {
-      const status = d.status ? statusPill(d.status, 'rec-pill--sm') : '';
+      const status = d.status ? statusPill(d.status, { small: true }) : '';
       const cut = removable
         ? `<button class="rec-dep__cut" type="button" data-cut-dep="${escapeHtml(String(d.id))}" title="Stop waiting on task ${escapeHtml(String(d.id))}" aria-label="Stop waiting on task ${escapeHtml(String(d.id))}">×</button>`
         : '';

package/modules/hall-ui/public/watch.css

@@ -8,11 +8,7 @@
 /* Severity / status pills. Base: the shell's .fact-pill (task 1003307). A
    severity is a state, so it is a hairline in its own colour rather than a
    filled chip — four filled severities in one row was the loudest thing here. */
-.badge--sev-critical { color: var(--danger); }
-.badge--sev-high { color: var(--warn); }
-.badge--sev-medium { color: var(--info); }
-.badge--sev-low { color: var(--ink-faint); }
-.badge--status { color: var(--ink-faint); }
+/* the severity and status badges take the shared pill's tones (controls.css, task 1005086) */
 
 /* Numeric cells in a kit ledger read right-aligned and tabular; a cell that
    warns takes the danger ink. */

package/modules/hall-ui/specimens/components.css

@@ -0,0 +1,26 @@
+/* modules/hall-ui/specimens/components.css — the specimen's own LAYOUT only
+   (task 1005086). Every component on the page is drawn by the hall's shared
+   sheets; this lays them out in sections and stops the live toast and the
+   dialog from floating, so each sits at rest where it can be looked at. */
+body[data-page="components"] { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font-body); }
+.spec-head, .spec-main { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 0 var(--ds-space-md); }
+.spec-head { padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-hair); }
+.spec-kicker { display: inline-block; margin: 0 var(--ds-space-xs) 0 0; vertical-align: middle; font-family: var(--label-face); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.spec-title { margin: 0; font-family: var(--font-display); font-size: var(--ds-text-title); font-weight: 300; }
+.spec-lede { margin: 0 0 var(--ds-space-md); max-width: 60ch; font-size: var(--ds-text-md); color: var(--ink-soft); }
+.spec-sub { margin: var(--ds-space-md) 0 var(--ds-space-xs); font-size: var(--ds-text-sm); font-weight: 500; color: var(--ink-soft); }
+.spec-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs); margin: var(--ds-space-xs) 0; }
+.spec-note { margin: 0; font-size: var(--ds-text-sm); color: var(--ink-soft); }
+.spec-tile { margin: var(--ds-space-sm) 0 0; }
+.spec-field { display: flex; flex-direction: column; gap: var(--ds-space-hair); max-width: 360px; margin-top: var(--ds-space-sm); font-size: var(--ds-text-sm); color: var(--ink-soft); }
+.spec-field input { width: 100%; }
+.spec-toasts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-xs); }
+.spec-toast.toast { position: static; transform: none; max-width: 100%; box-sizing: border-box; }
+.spec-toast .spec-note { color: inherit; }
+.spec-dialog { padding: var(--ds-space-sm); border-radius: var(--ds-radius-tile); background: var(--scrim); }
+.spec-dialog .hall-dialog { position: static; width: 100%; max-width: 480px; margin: 0 auto; }
+@media (max-width: 760px) {
+  .spec-head, .spec-main { padding: 0 var(--ds-space-xs); }
+  .spec-head { padding-top: var(--ds-space-sm); }
+  .spec-main .scroll { padding: var(--ds-space-sm); }
+}

package/modules/hall-ui/specimens/components.html

@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hall components</title>
+  <!-- THE HALL'S COMPONENTS, EACH IN EACH STATE (task 1005086, goal 1000138).
+       A specimen, not a hall page: the real server never serves this folder. It
+       loads the hall's own sheets and scripts by their module path, so what it
+       shows is what every hall page draws, and the ui-design kit renders it in
+       both modes at every width:
+         node modules/ui-design/kit/render.js --states modules/hall-ui/specimens/components.states.json
+       The public design-system reference (task 1005083) is meant to pick this up.
+       Nothing here is styled for itself except the specimen's own layout
+       (components.css): every component is the shared rule. -->
+  <link rel="stylesheet" href="/modules/hall-ui/public/style.css">
+  <link rel="stylesheet" href="components.css">
+</head>
+<body data-page="components">
+<header class="spec-head">
+  <h1 class="spec-title"><span class="spec-kicker">The hall</span> Components</h1>
+</header>
+<main class="spec-main">
+  <p class="spec-lede">Each shared component in each of its tones and states. The page is drawn by the same sheets every hall page loads.</p>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-pill">
+    <h2 class="scroll__h" id="sp-pill">Status pill</h2>
+    <p class="scroll__lede">Six tones. A status is always a word as well as a colour.</p>
+    <div class="spec-row" data-spec="tones">
+      <span class="status-pill status-pill--ok">ok</span>
+      <span class="status-pill status-pill--warn">warn</span>
+      <span class="status-pill status-pill--danger">danger</span>
+      <span class="status-pill status-pill--info">info</span>
+      <span class="status-pill status-pill--neutral">neutral</span>
+      <span class="status-pill status-pill--accent">accent</span>
+    </div>
+    <div class="spec-row" data-spec="small">
+      <span class="status-pill status-pill--ok status-pill--sm">ok</span>
+      <span class="status-pill status-pill--warn status-pill--sm">warn</span>
+      <span class="status-pill status-pill--danger status-pill--sm">danger</span>
+      <span class="status-pill status-pill--info status-pill--sm">info</span>
+      <span class="status-pill status-pill--sm">neutral</span>
+    </div>
+    <h3 class="spec-sub">A task's status, from the one map (OTB.statusPill)</h3>
+    <div class="spec-row" id="spec-task-statuses" data-spec="task-statuses"></div>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-panel">
+    <h2 class="scroll__h" id="sp-panel">Panel</h2>
+    <p class="scroll__lede">The card ground, the panel corner, no shadow. This section is one.</p>
+    <div class="scroll scroll--quiet spec-tile"><p class="spec-note">A quiet tile inside a panel recedes by tone.</p></div>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-empty">
+    <h2 class="scroll__h" id="sp-empty">Empty state</h2>
+    <div class="empty-state"><p>Nothing is waiting for you.</p><a class="empty-state__action" href="#sp-empty">See the whole queue</a></div>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-loading">
+    <h2 class="scroll__h" id="sp-loading">Loading</h2>
+    <p class="hall-loading" role="status">Reading the queue…</p>
+    <p class="spec-row"><span class="hall-loading hall-loading--inline" role="status">Saving…</span></p>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-toast">
+    <h2 class="scroll__h" id="sp-toast">Toast</h2>
+    <p class="scroll__lede">One toast; how long it stays depends on its kind, and an error never shows a server address.</p>
+    <div class="spec-toasts" id="spec-toasts"></div>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-tabs">
+    <h2 class="scroll__h" id="sp-tabs">Tabs and the view toggle</h2>
+    <div class="kit-tabs" role="tablist" aria-label="Specimen tabs">
+      <button type="button" class="setup__tab is-active" role="tab" aria-selected="true">ready <span class="count-pill">4</span></button>
+      <button type="button" class="setup__tab" role="tab" aria-selected="false">active</button>
+      <button type="button" class="setup__tab" role="tab" aria-selected="false">done</button>
+    </div>
+    <div class="viewtoggle" role="group" aria-label="View">
+      <button type="button" class="viewtoggle__btn" aria-pressed="true">rows</button>
+      <button type="button" class="viewtoggle__btn" aria-pressed="false">cards</button>
+    </div>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-controls">
+    <h2 class="scroll__h" id="sp-controls">Buttons and the field</h2>
+    <div class="spec-row">
+      <button type="button" class="btn">claim it</button>
+      <button type="button" class="btn btn--ghost">later</button>
+      <button type="button" class="btn btn--danger">release</button>
+      <button type="button" class="btn" disabled>claimed</button>
+    </div>
+    <div class="spec-row">
+      <button type="button" class="btn btn--sm">claim</button>
+      <button type="button" class="btn btn--ghost btn--sm">release</button>
+      <button type="button" class="btn btn--text">read the brief</button>
+    </div>
+    <label class="spec-field">A field <input type="text" value="A sentence someone typed"></label>
+  </section>
+
+  <section class="scroll spec-sec" aria-labelledby="sp-dialog">
+    <h2 class="scroll__h" id="sp-dialog">Dialog</h2>
+    <div class="spec-dialog">
+      <div class="hall-dialog" role="dialog" aria-modal="false" aria-labelledby="sp-dialog-t">
+        <div class="hall-dialog__head"><h3 class="hall-dialog__title" id="sp-dialog-t">Release task 1005086?</h3></div>
+        <div class="hall-dialog__body"><p>It returns to the queue and no credits are earned.</p></div>
+        <div class="hall-dialog__actions"><button type="button" class="btn btn--ghost">cancel</button><button type="button" class="btn btn--danger">release</button></div>
+      </div>
+    </div>
+  </section>
+
+</main>
+<script src="/modules/hall-ui/public/dom-utils.js"></script>
+<script src="components.js"></script>
+</body>
+</html>

package/modules/hall-ui/specimens/components.js

@@ -0,0 +1,27 @@
+// modules/hall-ui/specimens/components.js — fills the parts of the components
+// specimen (task 1005086) that come from the hall's shared JavaScript, so the
+// specimen shows what the code draws rather than a hand copy of it:
+//   - every task status through OTB.statusPill (dom-utils.js, the one map);
+//   - one toast per kind, each through OTB.plainMessage, at rest on the page
+//     (the live toast is fixed to the bottom of the window and leaves).
+(function () {
+  'use strict';
+  var OTB = window.OTB;
+  var statuses = Object.keys(OTB.STATUS_TONE);
+  var row = document.getElementById('spec-task-statuses');
+  if (row) row.innerHTML = statuses.map(function (s) { return OTB.statusPill(s); }).join(' ');
+
+  var toasts = document.getElementById('spec-toasts');
+  if (toasts) {
+    var said = [
+      ['info', 'Copied the prompt.'],
+      ['ok', 'Task 1005086 claimed.'],
+      ['warn', 'The board is paused while the owner reviews it.'],
+      ['error', 'Could not reach https://10.0.0.5:8443/api/bongos/claims: try again in a moment.'],
+    ];
+    toasts.innerHTML = said.map(function (k) {
+      return '<p class="toast spec-toast" data-visible="1" data-kind="' + k[0] + '">'
+        + OTB.escapeHtml(OTB.plainMessage(k[1])) + ' <span class="spec-note">(' + k[0] + ', ' + (OTB.TOAST_MS[k[0]] / 1000) + 's)</span></p>';
+    }).join('');
+  }
+})();