@bongos/core 1.19.458 → 1.19.460

package/modules/hall-ui/public/copy-desk.js

@@ -1,18 +1,23 @@
 // modules/hall-ui/public/copy-desk.js — the hall "Copy desk" tab
-// (/builders/copy-desk). Task 1003113 / R02 of goal 1000074, the artist's loop.
+// (/builders/copy-desk). Task 1003113 / R02 of goal 1000074, the artist's loop;
+// rebuilt on the hall's row archetype by task 1003471 (goal 1000081).
 //
 // The surface half of the flag: R01 built the inventory of every string the
 // product shows a person; the copy-desk module turned "this one is wrong" into a
 // row; this page is where an artist reads those rows and where everyone else
 // files them.
 //
-// FOUR PANELS, IN THE ORDER AN ARTIST WOULD WORK:
-//   1. the counts — what is outstanding, and the fast pile
+// FOUR PARTS, IN THE ORDER AN ARTIST WOULD WORK:
+//   1. the counts — the glass figure strip: what is outstanding, and the fast pile
 //   2. Flagged — the queue itself, newest first, open by default
 //   3. Said more than once — the deterministic duplicate signal, minus what has
-//      already been flagged or dismissed
+//      already been flagged or dismissed, paged through the kit
 //   4. Find something to flag — search the whole inventory
 //
+// Every list is a run of the family's .ov-row (oversight.css): the string as
+// the title, the judgement as prose, the kind and the target's state as pills.
+// State is COLOUR from the verification vocabulary, never opacity.
+//
 // NO LIVE CMS. Nothing on this page edits a string. The composer collects a
 // JUDGEMENT (kind + reason); the fix ships as a claimed, graded task. There is
 // deliberately no "new text" field — see modules/copy-desk/tests/copy_no_cms.mjs.
@@ -23,17 +28,21 @@
   const API = '/api/bongos';
   const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
   const { escapeHtml, $, toast, fmtInt } = window.OTB;
+  const kit = window.OTBKit;
 
   let viewer = null;
   let queue = null;
   // The composer's current target, set when a "Flag" button is pressed.
   let target = null;
   let closing = null;
+  let dupePager = null;
 
   // ---------------------------------------------------------------------------
   // rendering helpers
   // ---------------------------------------------------------------------------
 
+  const int = (n) => String(fmtInt ? fmtInt(n) : n);
+
   // A string shown as evidence is UNTRUSTED text from the product's own source
   // tree, rendered into this page — so it is escaped like any other user data,
   // and clipped so one runaway template literal cannot push the queue off screen.
@@ -45,7 +54,17 @@
 
   function where(file, line) {
     if (!file) return '';
-    return `<span class="cd-where">${escapeHtml(file)}${Number.isInteger(line) ? `:${line}` : ''}</span>`;
+    return `<span class="ov-key ov-key--faint">${escapeHtml(file)}${Number.isInteger(line) ? `:${line}` : ''}</span>`;
+  }
+
+  function pill(mod, text, title) {
+    return `<span class="fact-pill${mod ? ` ${mod}` : ''}"${title ? ` title="${escapeHtml(title)}"` : ''}>${escapeHtml(text)}</span>`;
+  }
+
+  function when(iso) {
+    const d = iso ? new Date(iso) : null;
+    if (!d || Number.isNaN(d.getTime())) return '';
+    return `<span class="ov-row__when">${escapeHtml(d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' }))}</span>`;
   }
 
   const KIND_LABEL = {
@@ -60,10 +79,10 @@
   // never something the server closes on its own.
   function targetState(f) {
     if (f.target_state === 'gone') {
-      return '<span class="cd-tag cd-tag--gone" title="The string this flag names is no longer in the registry — it was edited or removed. Probably already fixed; confirm and close it.">target gone</span>';
+      return pill('fact-pill--warn', 'target gone', 'The string this flag names is no longer in the registry — it was edited or removed. Probably already fixed; confirm and close it.');
     }
     if (f.moved) {
-      return '<span class="cd-tag cd-tag--moved" title="Same text, different place — it moved file or line since the flag was filed.">moved</span>';
+      return pill('', 'moved', 'Same text, different place — it moved file or line since the flag was filed.');
     }
     return '';
   }
@@ -74,68 +93,97 @@
     return viewer.rank === 'metic' || viewer.rank === 'archon';
   }
 
+  // The outcome of a closed flag: the status as a pill, the task that carried
+  // the fix as a chip, the note as a line — every fact the closer wrote.
+  function closedFacts(f) {
+    if (f.status === 'open') return '';
+    const task = f.resolved_task_id
+      ? `<a class="fact-chip" href="/builders/task/${escapeHtml(String(f.resolved_task_id))}">task #${escapeHtml(String(f.resolved_task_id))}</a>`
+      : '';
+    return pill(f.status === 'resolved' ? 'fact-pill--ok' : 'fact-pill--quiet', f.status) + task;
+  }
+
   function flagRow(f) {
-    const who = escapeHtml(f.flagged_by_name || f.flagged_by_login || 'someone');
-    const when = f.flagged_at ? new Date(f.flagged_at).toLocaleDateString() : '';
+    const who = f.flagged_by_name || f.flagged_by_login || 'someone';
     // Show the live text when the string is still there, and the snapshot when it
     // is not — labelled, so "what it says now" is never confused with "what it
-    // said when someone objected".
-    const body = f.current
-      ? `${quote(f.current.text)} ${where(f.current.file, f.current.line)}`
-      : `<span class="cd-snapshot-label">said, when flagged:</span> ${quote(f.text_at_flag)} ${where(f.file_at_flag, f.line_at_flag)}`;
-
-    const scopeLine = f.scope === 'surface'
-      ? `<span class="cd-tag">whole surface</span> <span class="cd-where">${escapeHtml(f.surface)}</span>`
-      : body;
-
-    const closed = f.status !== 'open'
-      ? `<p class="cd-closed"><strong>${escapeHtml(f.status)}</strong>${f.resolved_task_id ? ` in task ${escapeHtml(String(f.resolved_task_id))}` : ''} — ${escapeHtml(f.resolution_note || '')}</p>`
+    // said when someone objected". A whole-surface flag names the surface.
+    let title;
+    let place;
+    if (f.scope === 'surface') {
+      title = `<span class="ov-key">${escapeHtml(f.surface)}</span>`;
+      place = pill('', 'whole surface');
+    } else if (f.current) {
+      title = quote(f.current.text);
+      place = where(f.current.file, f.current.line);
+    } else {
+      title = `<span class="cd-snapshot-label">said, when flagged:</span> ${quote(f.text_at_flag)}`;
+      place = where(f.file_at_flag, f.line_at_flag);
+    }
+    const note = f.status !== 'open' && f.resolution_note
+      ? `<p class="cd-closed"><b>${escapeHtml(f.status)}</b> — ${escapeHtml(f.resolution_note)}</p>`
+      : '';
+    const actions = f.status === 'open' && canClose(f)
+      ? `<div class="ov-row__actions"><button class="btn-ghost cd-close-btn" data-flag="${escapeHtml(String(f.id))}">Close…</button></div>`
       : '';
 
-    return `<article class="cd-card" data-flag="${escapeHtml(String(f.id))}">
-      <div class="cd-card__head">
-        <span class="cd-tag cd-tag--kind">${escapeHtml(KIND_LABEL[f.kind] || f.kind)}</span>
-        ${targetState(f)}
-        <span class="cd-byline">${who} · ${escapeHtml(when)}</span>
+    return `<li class="ov-row" data-flag="${escapeHtml(String(f.id))}">
+      <div class="ov-row__main">
+        <span class="ov-row__title">${title}</span>
+        <p class="ov-row__sub cd-reason">${escapeHtml(f.reason)}</p>
+        <div class="ov-row__facts">
+          ${pill('', KIND_LABEL[f.kind] || f.kind)}${targetState(f)}${place}
+          <span class="ov-fact">flagged by <b>${escapeHtml(who)}</b></span>
+          ${closedFacts(f)}
+        </div>
+        ${note}
       </div>
-      <div class="cd-card__target">${scopeLine}</div>
-      <p class="cd-reason">${escapeHtml(f.reason)}</p>
-      ${closed}
-      ${f.status === 'open' && canClose(f)
-        ? `<div class="cd-card__actions"><button class="btn btn--ghost cd-close-btn" data-flag="${escapeHtml(String(f.id))}">Close…</button></div>`
-        : ''}
-    </article>`;
+      <div class="ov-row__right">${when(f.flagged_at)}${actions}</div>
+    </li>`;
+  }
+
+  function flagButton(d) {
+    return `<div class="ov-row__actions"><button class="btn-ghost cd-flag-btn"
+      data-id="${escapeHtml(d.id)}" data-surface="${escapeHtml(d.surface)}" data-text="${escapeHtml(d.text)}">Flag this…</button></div>`;
+  }
+
+  // The duplicate's state. Colour marks the EXCEPTION here, the inverse of the
+  // queue: most of this list is untouched work, so the untouched row is the
+  // plain pill and colour goes to the few already in the queue or looked at.
+  function dupeState(d) {
+    if (d.flagged) return pill('fact-pill--open', 'already flagged');
+    if (d.settled) return pill('fact-pill--ok', 'looked at');
+    return pill('', 'untouched');
   }
 
   function dupeRow(d) {
-    const state = d.flagged
-      ? '<span class="cd-tag cd-tag--flagged">already flagged</span>'
-      : d.settled
-        ? '<span class="cd-tag cd-tag--settled">looked at</span>'
-        : '<span class="cd-tag cd-tag--untouched">untouched</span>';
     const places = (d.at || []).map((a) => `<li>${escapeHtml(a)}</li>`).join('');
-    return `<article class="cd-card">
-      <div class="cd-card__head">
-        ${state}
-        <span class="cd-byline">${escapeHtml(String(d.occurrences))} places · ${escapeHtml(d.surface)}</span>
+    return `<li class="ov-row">
+      <div class="ov-row__main">
+        <span class="ov-row__title">${quote(d.text)}</span>
+        <div class="ov-row__facts">
+          ${dupeState(d)}
+          <span class="ov-fact"><b>${escapeHtml(String(d.occurrences))}</b> places</span>
+          <span class="fact-chip">${escapeHtml(d.surface)}</span>
+        </div>
+        <ul class="cd-places">${places}</ul>
       </div>
-      <div class="cd-card__target">${quote(d.text)}</div>
-      <ul class="cd-places">${places}</ul>
-      ${d.flagged ? '' : `<div class="cd-card__actions"><button class="btn btn--ghost cd-flag-btn"
-        data-id="${escapeHtml(d.id)}" data-surface="${escapeHtml(d.surface)}" data-text="${escapeHtml(d.text)}">Flag this…</button></div>`}
-    </article>`;
+      <div class="ov-row__right">${d.flagged ? '' : flagButton(d)}</div>
+    </li>`;
   }
 
   function resultRow(e) {
-    return `<article class="cd-card cd-card--slim">
-      <div class="cd-card__target">${quote(e.text)} ${where(e.file, e.line)}</div>
-      <div class="cd-card__actions">
-        <span class="cd-byline">${escapeHtml(e.surface)} · ${escapeHtml(e.origin || '')}</span>
-        ${e.flagged
-          ? '<span class="cd-tag cd-tag--flagged">already flagged</span>'
-          : `<button class="btn btn--ghost cd-flag-btn" data-id="${escapeHtml(e.id)}" data-surface="${escapeHtml(e.surface)}" data-text="${escapeHtml(e.text)}">Flag this…</button>`}
+    return `<li class="ov-row ov-row--dense">
+      <div class="ov-row__main">
+        <span class="ov-row__title">${quote(e.text)}</span>
+        <div class="ov-row__facts">
+          ${where(e.file, e.line)}
+          <span class="fact-chip">${escapeHtml(e.surface)}</span>
+          ${e.origin ? `<span class="ov-fact">${escapeHtml(e.origin)}</span>` : ''}
+        </div>
       </div>
-    </article>`;
+      <div class="ov-row__right">${e.flagged ? pill('fact-pill--open', 'already flagged') : flagButton(e)}</div>
+    </li>`;
   }
 
   // ---------------------------------------------------------------------------
@@ -146,14 +194,18 @@
     const c = queue.counts;
     const r = queue.registry || {};
     const total = (r.counts && r.counts.strings) || 0;
-    $('#cd-stats').innerHTML = [
-      ['Open flags', c.flags_open],
-      ['Target since edited', c.flags_target_gone],
-      ['Duplicates untouched', c.duplicates_untouched],
-      ['Strings inventoried', total],
-    ].map(([label, n]) =>
-      `<div class="cd-stat"><span class="cd-stat__n">${escapeHtml(String(fmtInt ? fmtInt(n) : n))}</span><span class="cd-stat__l">${escapeHtml(label)}</span></div>`
-    ).join('');
+    const surfaces = Object.keys(r.surfaces || {}).length;
+    const tile = (label, n, sub) => `<div class="stat-tile">
+      <span class="stat-tile__label">${escapeHtml(label)}</span>
+      <span class="stat-tile__num">${escapeHtml(int(n))}</span>
+      <span class="stat-tile__sub">${escapeHtml(sub)}</span>
+    </div>`;
+    $('#cd-summary-scroll').innerHTML = [
+      tile('Open flags', c.flags_open, c.flags_shown === c.flags_open ? 'in the queue below' : `${int(c.flags_shown)} shown below`),
+      tile('Target since edited', c.flags_target_gone, 'probably already fixed; confirm and close'),
+      tile('Duplicates untouched', c.duplicates_untouched, `of ${int(c.duplicates_total)} said more than once`),
+      tile('Strings inventoried', total, `across ${int(surfaces)} surface${surfaces === 1 ? '' : 's'}`),
+    ].join('');
 
     // Say which artifact this page is describing, and how to check it is current.
     // The registry has no timestamp by design (its generator is deterministic and
@@ -166,23 +218,43 @@
       + (blind ? ` This inventory has ${blind} documented blind spot${blind === 1 ? '' : 's'} — server-side messages, skill prose and runtime-composed strings are not in it, so it is not every word the project says.` : '');
   }
 
+  // The queue, as one run when every flag is in the same state (the default,
+  // open) and as a group per state when the filter shows everything.
   function paintFlags() {
     const el = $('#cd-flags');
-    if (!queue.flags.length) {
-      el.innerHTML = '<div class="cd-empty">Nothing flagged here. That is either good news or an unread queue — the duplicates below are the cheapest place to find out.</div>';
+    const rows = queue.flags;
+    if (!rows.length) {
+      el.innerHTML = kit.emptyStateHtml('Nothing flagged here. That is either good news or an unread queue — the duplicates below are the cheapest place to find out.');
       return;
     }
-    el.innerHTML = queue.flags.map(flagRow).join('');
+    const states = ['open', 'resolved', 'dismissed'].filter((s) => rows.some((f) => f.status === s));
+    if (states.length < 2) { el.innerHTML = `<ul class="ov-rows">${rows.map(flagRow).join('')}</ul>`; return; }
+    el.innerHTML = states.map((s) => {
+      const g = rows.filter((f) => f.status === s);
+      return `<section class="ov-group">
+        <div class="ov-group__head"><span class="ov-group__name">${escapeHtml(s)}</span><span class="ov-group__n">${g.length}</span></div>
+        <ul class="ov-rows">${g.map(flagRow).join('')}</ul>
+      </section>`;
+    }).join('');
   }
 
+  // Untouched first — it is the only part of this list that is work — and paged
+  // through the kit, because the registry carries over a hundred of these.
   function paintDupes() {
     const el = $('#cd-dupes');
     const rows = queue.duplicates || [];
-    if (!rows.length) { el.innerHTML = '<div class="cd-empty">No duplicated strings in the registry.</div>'; return; }
-    // Untouched first — it is the only part of this list that is work.
+    if (!rows.length) { el.innerHTML = kit.emptyStateHtml('No duplicated strings in the registry.'); return; }
     const ordered = [...rows].sort((a, b) =>
       (Number(a.flagged || a.settled) - Number(b.flagged || b.settled)) || (b.occurrences - a.occurrences));
-    el.innerHTML = ordered.map(dupeRow).join('');
+    if (!dupePager) dupePager = kit.makePager('cd-dupes', 'copy-desk.dupes.perPage', { defaultPerPage: 25 });
+    let list = el.querySelector('.ov-rows');
+    const rerender = () => { list.innerHTML = kit.paginate(ordered, dupePager).map(dupeRow).join(''); };
+    if (!list) {
+      el.innerHTML = `<ul class="ov-rows"></ul>${kit.pagerBarHtml('cd-dupes', { label: 'rows' })}`;
+      list = el.querySelector('.ov-rows');
+      kit.wirePager(dupePager, rerender);
+    }
+    rerender();
   }
 
   function paintSurfaces() {
@@ -209,8 +281,8 @@
       $('#cd-sub').textContent = code === 'registry_missing'
         ? `No copy registry on this instance yet. Run ${detail.run || 'node scripts/gds/copy-inventory.js'} and commit it.`
         : 'Could not load the copy desk.';
-      $('#cd-flags').innerHTML = '<div class="cd-empty">—</div>';
-      $('#cd-dupes').innerHTML = '<div class="cd-empty">—</div>';
+      $('#cd-flags').innerHTML = kit.emptyStateHtml('—');
+      $('#cd-dupes').innerHTML = kit.emptyStateHtml('—');
       return;
     }
     queue = res.data;
@@ -237,7 +309,7 @@
     $('#cd-search-count').textContent = truncated
       ? `${matched} matches — showing the first ${limit}. Narrow the search to see the rest.`
       : `${matched} match${matched === 1 ? '' : 'es'}.`;
-    $('#cd-results').innerHTML = entries.map(resultRow).join('');
+    $('#cd-results').innerHTML = `<ul class="ov-rows">${entries.map(resultRow).join('')}</ul>`;
   }
 
   // ---------------------------------------------------------------------------
@@ -247,8 +319,8 @@
   function openComposer(t) {
     target = t;
     $('#cd-dialog-target').innerHTML = t.string_id
-      ? `${quote(t.text)}<br><span class="cd-where">${escapeHtml(t.surface)}</span>`
-      : `<span class="cd-tag">whole surface</span> <span class="cd-where">${escapeHtml(t.surface)}</span>`;
+      ? `${quote(t.text)}<br><span class="ov-key ov-key--faint">${escapeHtml(t.surface)}</span>`
+      : `${pill('', 'whole surface')} <span class="ov-key ov-key--faint">${escapeHtml(t.surface)}</span>`;
     $('#cd-reason').value = '';
     $('#cd-dialog-err').textContent = '';
     $('#cd-dialog').showModal();
@@ -286,7 +358,14 @@
   function openCloser(id) {
     closing = queue.flags.find((f) => String(f.id) === String(id));
     if (!closing) return;
-    $('#cd-close-target').innerHTML = `${quote(closing.reason, 160)}`;
+    // What is being closed: the string (the product's words, as evidence) or
+    // the surface, then the reason as the prose it is — not the reason in the
+    // evidence voice, which is what the first cut quoted.
+    const about = closing.scope === 'surface'
+      ? `${pill('', 'whole surface')} <span class="ov-key ov-key--faint">${escapeHtml(closing.surface)}</span>`
+      : quote(closing.current ? closing.current.text : closing.text_at_flag, 120);
+    const reason = String(closing.reason || '');
+    $('#cd-close-target').innerHTML = `${about}<br>${escapeHtml(reason.length > 160 ? `${reason.slice(0, 160)}…` : reason)}`;
     $('#cd-close-note').value = '';
     $('#cd-close-task').value = '';
     $('#cd-close-err').textContent = '';
@@ -319,6 +398,25 @@
   // wire
   // ---------------------------------------------------------------------------
 
+  // The queue's filters and the search field are the kit's filter bar, so the
+  // controls are the shell's own; the ids the loaders read are kept.
+  kit.makeFilterBar({
+    mount: $('#cd-filters'),
+    primary: [
+      { id: 'cd-status', label: 'Show', options: [
+        { value: 'open', label: 'Open' }, { value: 'resolved', label: 'Resolved' },
+        { value: 'dismissed', label: 'Dismissed' }, { value: 'all', label: 'Everything' },
+      ] },
+      { id: 'cd-surface', label: 'Surface', options: [{ value: '', label: 'All surfaces' }] },
+    ],
+    onChange: () => { loadQueue(); if ($('#cd-search').value.trim()) runSearch(); },
+  });
+  kit.makeFilterBar({
+    mount: $('#cd-find'),
+    search: { id: 'cd-search', label: 'Search the copy', placeholder: 'a phrase you saw, or a file name…' },
+    onChange: () => { clearTimeout(searchTimer); searchTimer = setTimeout(runSearch, 200); },
+  });
+
   document.addEventListener('click', (ev) => {
     const flagBtn = ev.target.closest('.cd-flag-btn');
     if (flagBtn) {
@@ -337,14 +435,11 @@
   $('#cd-submit').addEventListener('click', submitFlag);
   $('#cd-close-cancel').addEventListener('click', () => $('#cd-close-dialog').close());
   $('#cd-close-submit').addEventListener('click', submitClose);
-  $('#cd-status').addEventListener('change', loadQueue);
-  $('#cd-surface').addEventListener('change', () => { loadQueue(); if ($('#cd-search').value.trim()) runSearch(); });
-  $('#cd-search').addEventListener('input', () => {
-    clearTimeout(searchTimer);
-    searchTimer = setTimeout(runSearch, 200);
-  });
 
   (async () => {
+    // The closing floor is written from the pack's rank label, never a hardcoded
+    // Greek name (ADR 0157 moved the floor; the pack owns the word).
+    if (window.OTB.rankLabel && $('#cd-close-rank')) $('#cd-close-rank').textContent = window.OTB.rankLabel('metic');
     const me = await api.request('GET', `${API}/me`);
     if (me.ok) viewer = me.data.builder || me.data;
     await loadQueue();

package/modules/hall-ui/public/copy-desk.states.json

@@ -1,12 +1,12 @@
 {
-  "_": "Copy desk — the one-voice review queue. Its confirm dialog is a real <dialog>, so its ::backdrop is the sheet's single sanctioned literal (black with alpha as a scrim). Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "_": "Copy desk — the one-voice review queue. Its two dialogs are real <dialog>s, so their ::backdrop is the sheet's single sanctioned literal (black with alpha as a scrim). Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once; the redesign (task 1003471) put a queue, ten duplicates and a search's hits in the harness so the rows and both dialogs can be looked at.",
   "page": "/builders/copy-desk",
   "surface": "hall-ui",
   "stub": {
     "prefix": "/builders/"
   },
   "modeQuery": false,
-  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY state — which is the point: that is a state the floors must hold in. Against the hall-preview harness the same states render populated: copy-desk__queue.json (six flags across open, resolved and dismissed, with a gone target, a moved one and a whole-surface one; ten real duplicates) and copy-desk__strings.json (a search's hits). Every declared 404 below is a feed the kit's stub does not carry, named rather than hidden. The composer and closer states use clickIfVisible because against the stub the buttons do not exist.",
   "ignoreRequests": [
     "/api/(gds|bongos)/me$",
     "/api/(gds|bongos)/me/",
@@ -45,6 +45,63 @@
     },
     "out": {
       "auth": false
+    },
+    "search": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "fill",
+          "#cd-search",
+          "save"
+        ],
+        [
+          "wait",
+          600
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cd-results"
+        ]
+      }
+    },
+    "composer": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "clickIfVisible",
+          ".cd-flag-btn"
+        ],
+        [
+          "wait",
+          250
+        ]
+      ]
+    },
+    "closer": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ],
+        [
+          "clickIfVisible",
+          ".cd-close-btn"
+        ],
+        [
+          "wait",
+          250
+        ]
+      ]
     }
   },
   "reducedMotion": {

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

@@ -1,9 +1,12 @@
 /* oversight.css — the oversight family's archetype (task 1003469, goal
-   1000081): what a oversight ROW is in the chrome world, and the pieces the
+   1000081): what an oversight ROW is in the chrome world, and the pieces the
    four pages (government, watch, harbor, gate) share around it — the figure
    band inside a panel, the group head, the inline form, the grant toggle, the
    confirm modal. The third family sheet after record.css and room.css: a page
-   sheet holds only what one page has and the others do not.
+   sheet holds only what one page has and the others do not. The collaboration
+   pages (collab, copy desk — task 1003471) ride the same row rather than a
+   fourth: a page whose repeated thing is a titled row with facts and actions
+   links this sheet before its own.
 
    Every panel is the shell's .scroll; every heading its .scroll__h; every state
    pill its .fact-pill; every table its .ledger. This sheet adds nothing the
@@ -150,6 +153,12 @@ button.ov-row[aria-pressed="true"] .ov-row__title { color: var(--accent-ink); }
    The shell's glass .stat-row, given the air a panel would have under it. */
 .ov-summary { margin: 0 0 var(--sp-md); }
 
+/* A chip that is a door (the task or goal a row is about) keeps the chip's
+   faint ink at rest — a coloured chip would read as a second status — and
+   takes the link ink on hover, the way the row's title link does. */
+a.fact-chip { color: var(--ink-faint); }
+a.fact-chip:hover { color: var(--accent-ink); border-color: var(--accent-ink); text-decoration: none; }
+
 /* ---- plain facts and the machine's words ------------------------------------ */
 .ov-fact { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 .ov-fact b { color: var(--ink-soft); font-weight: 500; }

package/modules/lifecycle/help-requests.js

@@ -49,6 +49,16 @@ async function craftsForBuilder(builderId, deps = {}) {
 }
 
 const COLS = 'id, requested_by, needs_craft, needs_builder_id, what_is_stuck, task_id, goal_id, status, created_at, updated_at';
+// The two list reads also NAME the people on a row — who is asking (the fact
+// the collab page owes a helper: "who to answer", task 1003471) and who a
+// by-name ask is addressed to — through two LEFT JOINs on builders. COLS stays
+// bare for the writes, whose RETURNING cannot reach a joined alias.
+const LIST_COLS = `${COLS.split(', ').map((c) => `h.${c}`).join(', ')}, `
+  + 'a.github_login AS requested_by_login, a.display_name AS requested_by_name, '
+  + 'n.github_login AS needs_builder_login, n.display_name AS needs_builder_name';
+const LIST_FROM = 'FROM lifecycle_help_requests h '
+  + 'LEFT JOIN builders a ON a.id = h.requested_by '
+  + 'LEFT JOIN builders n ON n.id = h.needs_builder_id';
 const MAX_STUCK = 4000;
 // Defence in depth: both reads are bounded today (open-status churn, per-builder
 // scope), but an unsettled pile should degrade the page, not the server.
@@ -130,11 +140,11 @@ async function listOpenForBuilder({ builderId, crafts = [], limit = MAX_ROWS },
   const activePool = deps.pool || pool;
   const safeCrafts = (Array.isArray(crafts) ? crafts : []).filter((c) => HELP_CRAFTS.includes(c));
   const { rows } = await activePool.query(
-    `SELECT ${COLS} FROM lifecycle_help_requests
-      WHERE status = 'open'
-        AND requested_by <> $1
-        AND (needs_builder_id = $1 OR needs_craft = ANY($2::text[]))
-      ORDER BY created_at DESC, id DESC
+    `SELECT ${LIST_COLS} ${LIST_FROM}
+      WHERE h.status = 'open'
+        AND h.requested_by <> $1
+        AND (h.needs_builder_id = $1 OR h.needs_craft = ANY($2::text[]))
+      ORDER BY h.created_at DESC, h.id DESC
       LIMIT $3`,
     [builderId, safeCrafts, capRows(limit)]
   );
@@ -181,9 +191,9 @@ function craftMapSql(col) {
 async function listMine({ builderId, status = null, limit = MAX_ROWS }, deps = {}) {
   const activePool = deps.pool || pool;
   const { rows } = await activePool.query(
-    `SELECT ${COLS} FROM lifecycle_help_requests
-      WHERE requested_by = $1 AND ($2::text IS NULL OR status = $2)
-      ORDER BY created_at DESC, id DESC
+    `SELECT ${LIST_COLS} ${LIST_FROM}
+      WHERE h.requested_by = $1 AND ($2::text IS NULL OR h.status = $2)
+      ORDER BY h.created_at DESC, h.id DESC
       LIMIT $3`,
     [builderId, status, capRows(limit)]
   );

package/modules/ui-design/kit/README.md

@@ -3,11 +3,13 @@
 The stub, the renderer/auditor, the interaction probes, the mock checker and the contrast probe any builder points at any surface of any instance ([task 1003320](https://cloudbongos.com/builders#/task/1003320), [ADR 0197](../../../docs/adr/<redacted>.md)). Plain Node; the browser is the system Edge or Chrome via `playwright-core` (a devDependency — nothing is downloaded).
 
 ```
-node modules/ui-design/kit/serve.js                     # the stub (SURFACE, PREFIX, AUTH=1, CHILD=1, LIVE=…, FAIL=…, STUB_PORT)
-node modules/ui-design/kit/render.js --page /projects   # every state × 1440/390/320 × dark/light, audited against the floors
-node modules/ui-design/kit/probe.js  --page /projects   # the interaction contract as PASS/FAIL lines
-node modules/ui-design/kit/check-mock.js --file docs/design/mocks/hub/v2.html
-node modules/ui-design/kit/contrast.js --pack | --url <url> [--glyphs sel,sel]
+node modules/ui-design/kit/serve.js                     # the stub (SURFACE, PREFIX, AUTH=1, CHILD=1, LIVE=…, FAIL=…, STYLE=<look>, STUB_PORT)
+node modules/ui-design/kit/render.js --page /projects   # every state × 1440/390/320 × dark/light, audited against the floors (--style <look>)
+node modules/ui-design/kit/probe.js  --page /projects   # the interaction contract as PASS/FAIL lines (--style <look>)
+node modules/ui-design/kit/check-mock.js --file docs/design/mocks/hub/v2.html          # (--pack <look> for a style's own mock)
+node modules/ui-design/kit/contrast.js --pack [look] | --url <url> [--glyphs sel,sel]
 ```
 
+A **look** is a branding pack from the module's style library (`modules/ui-design/styles/<name>/`, task 1003323): `STYLE=<name>` lays it over the instance's own pack through `GDS_BRANDING_FILE`, so any surface renders under any look with no page edit.
+
 A surface describes itself in two JSON files beside it — `<page>.states.json` and `<page>.probes.json` — in the vocabularies `lib.js` defines and validates. The full loop, the file shapes and the failure table: [`docs/recipes/ui-look-before-you-ship.md`](../../../docs/recipes/ui-look-before-you-ship.md). Exit codes everywhere: 0 clean · 1 problems · 2 a broken file or usage · 3 no browser.

package/modules/ui-design/kit/check-mock.js

@@ -14,8 +14,10 @@
 //     shadow). The em dash ban is Cloud Bongos's, not the platform's: an instance
 //     whose DESIGN.md never mentions it is not held to it.
 //
-//   node modules/ui-design/kit/check-mock.js --file <mock.html> [--states a,b] [--keys THESIS,BAR] [--design <DESIGN.md>] [--no-taste]
+//   node modules/ui-design/kit/check-mock.js --file <mock.html> [--states a,b] [--keys THESIS,BAR] [--design <DESIGN.md>] [--no-taste] [--pack <style>]
 //
+// `--pack <style>` checks a style's mock against that look's own colours (the pinned-literal
+// rule) and, unless --design says otherwise, its own DESIGN.md bans (task 1003323).
 // Prints PASS/FAIL/WARN per rule; exit 1 on any FAIL, 2 on usage.
 const fs = require('node:fs');
 const path = require('node:path');
@@ -89,7 +91,8 @@ function checkMock(html, { bans = new Set(), packColors = {}, states = [], keys
   ok('no literal hex colour (the fifteen via var()/color-mix(); black or white with alpha only)', hexes.length === 0, hexes.length ? [...new Set(hexes)].slice(0, 12).join(',') : '');
   const rgbLit = [...css.matchAll(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/g)].filter((x) => !((x[1] === '0' && x[2] === '0' && x[3] === '0') || (x[1] === '255' && x[2] === '255' && x[3] === '255')));
   ok('rgb() literals only as black or white with alpha', rgbLit.length === 0, rgbLit.length ? `${rgbLit.length} found` : '');
-  const pinned = Object.entries(packColors).filter(([, v]) => typeof v === 'string' && /^#[0-9a-f]{6}$/i.test(v) && new RegExp(v.replace('#', '#'), 'i').test(css)).map(([k]) => k);
+  // a pack whose card is pure white (the expedition's) must not turn the one legal literal into a pin
+  const pinned = Object.entries(packColors).filter(([, v]) => typeof v === 'string' && /^#[0-9a-f]{6}$/i.test(v) && !BLACK_OR_WHITE.test(v.slice(1).toLowerCase()) && new RegExp(v.replace('#', '#'), 'i').test(css)).map(([k]) => k);
   ok('no pack colour pinned as a literal (a var() of the contract token instead)', pinned.length === 0, pinned.join(','));
 
   // ── the taste bans the instance declared ──
@@ -126,16 +129,20 @@ function checkMock(html, { bans = new Set(), packColors = {}, states = [], keys
 function main() {
   const args = process.argv.slice(2);
   const file = lib.argOf(args, '--file', null);
-  if (!file || lib.hasFlag(args, '--help')) { process.stderr.write('usage: node modules/ui-design/kit/check-mock.js --file <mock.html> [--states a,b] [--keys A,B] [--design <DESIGN.md>] [--no-taste]\n'); process.exit(lib.EXIT.USAGE); }
+  if (!file || lib.hasFlag(args, '--help')) { process.stderr.write('usage: node modules/ui-design/kit/check-mock.js --file <mock.html> [--states a,b] [--keys A,B] [--design <DESIGN.md>] [--no-taste] [--pack <style>]\n'); process.exit(lib.EXIT.USAGE); }
   if (!fs.existsSync(file)) { process.stderr.write(`check-mock: not found: ${file}\n`); process.exit(lib.EXIT.USAGE); }
-  const designPath = lib.argOf(args, '--design', path.join(lib.REPO_ROOT, 'DESIGN.md'));
+  const styleArg = lib.argOf(args, '--pack', null);
+  const style = styleArg ? lib.resolveStyle(styleArg) : null;
+  if (styleArg && !style) { process.stderr.write(`check-mock: --pack "${styleArg}" is not a style under modules/ui-design/styles/ (${lib.listStyles().join(', ') || 'none'})\n`); process.exit(lib.EXIT.USAGE); }
+  const designPath = lib.argOf(args, '--design', style ? path.join(style.dir, 'DESIGN.md') : path.join(lib.REPO_ROOT, 'DESIGN.md'));
   let bans = new Set();
   if (!lib.hasFlag(args, '--no-taste')) {
     if (fs.existsSync(designPath)) bans = readDesignBans(fs.readFileSync(designPath, 'utf8'));
     else process.stdout.write(`WARN taste bans off: no DESIGN.md at ${designPath} (the platform rules still apply)\n`);
   }
   let packColors = {};
-  try { packColors = lib.packColors(lib.instancePack()); } catch { packColors = {}; }
+  if (style) packColors = lib.packColors(style.pack);
+  else { try { packColors = lib.packColors(lib.instancePack()); } catch { packColors = {}; } }
   const results = checkMock(fs.readFileSync(file, 'utf8'), { bans, packColors, states: lib.listArg(args, '--states', []), keys: lib.listArg(args, '--keys', []) });
   for (const [s, rule, detail] of results) process.stdout.write(`${s.padEnd(4)} ${rule}${detail ? '  (' + detail + ')' : ''}\n`);
   const fails = results.filter((r) => r[0] === 'FAIL').length;