@bongos/core 1.19.462 → 1.19.463

package/docs/file-map.md

@@ -127,7 +127,7 @@
 │   ├── sessions/                ← CORE-DOMAIN carve (BV1.R82, default-on): the session_records corpus + data plane (upload, cross-builder search/deep-dive), the BFG read-the-room scorer, session-pulse/stale-claim helpers. Registers no port — reached via HTTP POST to its own /sessions route; resolves the economy `reward` port for the cost-plus token reward. CLAUDE.md, module.json, routes/sessions.js, bfg.js, pulse.js.
 │   ├── autonomy/                ← CORE-DOMAIN carve (BV1.R83, default-on): the MAS autonomy surfaces — the $0 deterministic autonomy gate (System 3, inert until armed), the conductor/architect CLIs, and the in-process routine timers (incl. the weekly peer-vote-tally poller). Registers no port; resolves the lifecycle `tallyPeerVotes` doorway. CLAUDE.md, module.json, routes/autonomy.js, autonomy.js.
 │   ├── status-ui/              ← CORE-DOMAIN WEB-SURFACE carve (BV1.R84, default-on): the public status dashboard at status.<apex>, moved from public-status/. NO routes/db/port — declares contributes.webSurfaces:[{host:"status.",dir:"public"}], served by the loader web-surface seam (moduleWebSurfaces → serve-internal). CLAUDE.md, module.json, public/{index.html,status.js,style.css,cursors/,snapshots/}.
-│   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Three ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305), `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages) and `oversight.css` (the OVERSIGHT family — government, watch, harbor, gate, task 1003469: the row, the figure band inside a panel, the group head, the inline form, the grant toggle and the shared confirm modal; named oversight because the vocabulary wall bans "governance" on the government surface). A page sheet then holds only what one page has and the others do not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip, `gate.css` the hold reasons and file chips, `watch.css` the severities, the report reader and the grade trend.
+│   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Three ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305), `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages) and `oversight.css` (the OVERSIGHT family — government, watch, harbor, gate, task 1003469: the row, the figure band inside a panel, the group head, the inline form, the grant toggle and the shared confirm modal; named oversight because the vocabulary wall bans "governance" on the government surface). A page sheet then holds only what one page has and the others do not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip, `gate.css` the hold reasons and file chips, `watch.css` the severities, the report reader and the grade trend, `people.css` the directory's identity cell (task 1003470: `/scouting` is the LEGACY DOOR to `/people` and ships the same body and script — `scouting.html` loads `people.js`; there is no `scouting.js`).
 │   ├── lifecycle/               ← CORE-DOMAIN carve (BV1.R86, default-on): the build state machine — tasks · claims · versions · done-when · goals · dependencies · claim→ship→grade→credit · github-push + merge-lock + conflict-resolve + publish-reconciler. The LAST, most-coupled carve; registers the `lifecycle` kernel port (createTask, classifyTaskKind, tallyPeerVotes, work-tracking reads). CLAUDE.md, module.json, routes/{tasks,claims,versions,done-when,goals,dependencies,gate-approvals,analytics}.js, lifecycle.js, github-push.js, merge-lock.js, conflict-resolve.js, publish-reconciler.js, task-visuals.js + task-visual-db.js + routes/visuals.js (the optional ship-time visual, task 1003109 — the route file is NOT named task-*.js on purpose; see the module CLAUDE.md).
 │   ├── copy-desk/               ← CORE-DOMAIN module (task 1003113 / R02 of goal 1000074, default-on): the COPY half of the design contract — ADR 0081 gave design TOKENS a repo-owned source of truth, text had none. Owns the FLAG (anyone in any role marks a string or a whole surface as needing an artist's attention, with a reason required in BOTH the route and a CHECK constraint) and the QUEUE an artist reads it from. READS R01's committed registry (docs/copy-registry.json, generated by scripts/gds/copy-inventory.js) and never writes it. NO LIVE CMS is the hard non-goal: no column here could hold replacement text, and copy_no_cms.mjs pins that. Key is `copy-desk`, not `copy` — the branding contract already owns a `copy` block, so the bare word reds the "core carries no module code" fitness check. CLAUDE.md, module.json, registry.js, flags.js, routes/copy-desk.js, migrations/copy_desk_001_flags.sql, tests/{copy_flags,copy_queue,copy_no_cms}.mjs. Its hall surface lives with hall-ui (public/copy-desk.{html,js,css}), per the one-key-per-web-surface precedent.
 │   ├── ui-design/               ← CORE-DOMAIN module (task 1003324 / ADR 0197, default-on): the design capability every builder on every instance gets — ships METHOD, never a world. Absorbs ADR 0081's layer: adapters/{claude-design,figma}/index.js (moved from src/ui/adapters/), scripts/{design-sync,figma-design-sync,validate-design}.js (moved from scripts/gds/, which keeps thin shims), docs/design-contract.md (moved from docs/). Declaration-only: contributes.skills design (the /design playbook, new) + design-sync + figma-design-sync; no routes/port/migrations, so disabling it touches no served surface. CLAUDE.md separates the platform FLOORS (the Fifteen Rule, the dark twins, no page :root, the 24px floor, AA in both modes, the kill switch) from the instance's WORLD (its packs + DESIGN.md). kit/ (task 1003320) is the look-before-you-ship kit: lib.js (the floors, the states/probes contracts, the action + expectation vocabularies, the WCAG maths, the stub spawner), serve.js (any surface through the doorway's real transforms + fixtures/), render.js (states × 1440/390/320 × dark/light, audited), probe.js (PASS/FAIL contracts), check-mock.js (platform rules + the instance's DESIGN.md taste bans), contrast.js + png.js; a page's <page>.states.json / <page>.probes.json sit BESIDE the surface (modules/public-landing/public/, modules/hall-ui/public/). Recipe: docs/recipes/ui-look-before-you-ship.md. skills/ (task 1003321 / ADR 0198) is the vendoring policy: policy.json (licence allowlist, verdicts that may land, sidecar fields, preamble markers), PREAMBLE.md (the platform preamble every vendored SKILL.md opens with), README.md (the roster — both origins scanned dangerous on 2026-08-28, landed as rebuild specs; nothing vendored — and the landing recipe); a landable copy goes under skills/vendor/<name>/ with PROVENANCE.md + LICENSE and is materialised into an instance's .claude/skills/ by claude-materialize.js step 1b. skills/<name>/ (task 1003325 / ADR 0220) are the in-house rebuilds from the specs, first-party and counted: design-taste-frontend (the default taste skill), design-taste-frontend-v1 (the earlier generation, kept distinct), high-end-visual-design (the polish pass), redesign-existing-projects (the in-place upgrade); each opens with the same preamble and carries a "Rebuilt from" section instead of a sidecar. impeccable/ (task 1003326 / ADR 0221) is the design-craft method as ONE skill with sub-commands: SKILL.md (the router, the menu, the craft floor, the bounded finish) + reference/<sub-command>.md (eighteen playbooks, one loaded per request); no hooks, no bypass agent, no telemetry, no live server. styles/ (task 1003323 / ADR 0219) is the style library: <name>/pack.json (the theme.ui overlay, exactly the fifteen) + DESIGN.md (the look's derived recipes, thirteen in lockstep with the pack) + mock.html (the specimen); chrome-world (pinned to the neutral pack), expedition, grove; STYLE=<name> on the kit lays a look over the instance's pack through GDS_BRANDING_FILE; tests/ui_design_styles.mjs runs the world/cosmos/hall token suites once per alternate (UI_DESIGN_PACK). config/design-tokens.* + design-sources.json STAY in config/ as the host boundary; public-landing keeps its own key (first customer, not owner).

package/docs/module-api-changelog.md

@@ -1361,5 +1361,7 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.460 with no explicit bump. run 33571982271. (task 1002620)
   1.19.462 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.461 with no explicit bump. run 33576366095. (task 1002620)
+  1.19.463 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.462 with no explicit bump. run 33577660347. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/hall-ui/public/goals-lib.js

@@ -26,7 +26,9 @@
     const circ = 2 * Math.PI * r;
     const dash = (pct * circ).toFixed(1);
     const gap = (circ - pct * circ).toFixed(1);
-    const stroke = achieved ? 'var(--ok)' : 'var(--accent)';
+    // The arc is ink, not the accent: the accent lights what is pressable or
+    // live, and a progress arc is neither (task 1003470; the mock's .ring__arc).
+    const stroke = achieved ? 'var(--ok)' : 'var(--ink)';
     return `<svg class="goal-ring" width="${size}" height="${size}" viewBox="0 0 42 42" role="img" aria-label="${satisfied} of ${total} criteria satisfied">
         <circle cx="21" cy="21" r="${r}" fill="none" stroke="var(--rule-soft)" stroke-width="4"></circle>
         <circle cx="21" cy="21" r="${r}" fill="none" stroke="${stroke}" stroke-width="4" stroke-linecap="round" stroke-dasharray="${dash} ${gap}" transform="rotate(-90 21 21)"></circle>
@@ -60,15 +62,17 @@
   const EMPTY_ROLLUP = { done: 0, active: 0, ready: 0, blocked: 0, backlog: 0, cut: 0, total: 0, nextReady: null };
 
   // task 1002439 — a goal row's readiness rollup line (only the non-zero buckets).
+  // The dot colours are classes in goals.css (.gr-mark--*), shared with the
+  // readiness band above the list, so the two cannot drift (task 1003470).
   const ROLL_DOTS = [
-    ['ready', 'ready', 'var(--ok)'],
-    ['active', 'in progress', 'var(--info)'],
-    ['blocked', 'blocked', 'var(--terracotta)'],
-    ['backlog', 'backlog', 'var(--ink-faint)'],
+    ['ready', 'ready'],
+    ['active', 'in progress'],
+    ['blocked', 'blocked'],
+    ['backlog', 'backlog'],
   ];
   function goalRollLine(r) {
     const parts = ROLL_DOTS.filter(([k]) => r[k] > 0)
-      .map(([k, label, c]) => `<span class="gr-d"><i style="background:${c}"></i><b>${r[k]}</b> ${label}</span>`);
+      .map(([k, label]) => `<span class="gr-d"><i class="gr-mark gr-mark--${k}" aria-hidden="true"></i><b>${r[k]}</b> ${label}</span>`);
     return parts.length ? `<div class="gr-roll">${parts.join('')}</div>` : '';
   }
 

package/modules/hall-ui/public/goals-page.js

@@ -856,8 +856,9 @@
     // Kit shimmer placeholders while the goal list loads (was one "…" div).
     const grid = $('#goal-grid');
     if (grid) {
-      grid.innerHTML = Array.from({ length: 8 }, () =>
-        '<div class="goal-card goal-card--skel" aria-hidden="true"><span class="kit-skel"></span><span class="kit-skel"></span></div>').join('');
+      // task 1003470 — row-shaped, since the list opens on rows.
+      grid.innerHTML = `<div class="gr-list">${Array.from({ length: 6 }, () =>
+        '<div class="gr-row gr-row--skel" aria-hidden="true"><span class="gr-skel__ring"></span><div><span class="kit-skel"></span><span class="kit-skel"></span></div><span></span></div>').join('')}</div>`;
     }
     try {
       state.me = await getJSON(`${API}/me`).catch(() => null);
@@ -927,12 +928,23 @@
   // options are filled after boot's fetch (populateOwnerFilter), the
   // populateVersionFilter pattern. No URL riding (url defaults off here and this
   // page is deliberately url:false — it owns the #/goal/N hash route).
+  // task 1003470 — three lenses stay in the open: the version, the state and
+  // the order. The other five are real but rarely turned, and twelve controls in
+  // two rows were the loudest thing on the page; they sit behind the kit's
+  // Filters disclosure, which counts and chips whatever is active so a hidden
+  // filter can never narrow the board silently. Control ids are unchanged.
   makeFilterBar({
     mount: $('#goals-filters'),
     search: { id: 'f-goals-search', label: 'Search', placeholder: 'goal # or name…' },
     primary: [
       { id: 'f-goal-version', label: 'Version', options: [{ value: '', label: '— any —' }] },
       { id: 'f-goal-status', label: 'Status', options: [{ value: '', label: '— any —' }, 'open', 'achieved', 'archived'] },
+      { id: 'f-goal-order',
+        label: 'Sort',
+        value: GOAL_SORTS[savedGoalSort] ? savedGoalSort : undefined,
+        options: Object.entries(GOAL_SORTS).map(([value, { label }]) => ({ value, label })) },
+    ],
+    overflow: [
       { id: 'f-goal-mine', label: 'Membership', options: [{ value: '', label: 'All goals' }, { value: 'mine', label: 'My goals' }] },
       { id: 'f-goal-owner', label: 'Owner', options: [{ value: '', label: '— any —' }] },
       // task 1003276 — filled from GET /work-categories after boot
@@ -946,19 +958,22 @@
       { id: 'f-goal-role', label: 'Craft', options: [ // ADR 0174: "role" means a craft
         { value: '', label: '— any —' }, 'engineer', 'artist', 'ideator', 'ui'] },
       { id: 'f-goal-stale', label: 'Age', options: window.OTBTaskLib.STALE_CHOICES },
-      { id: 'f-goal-order',
-        label: 'Sort',
-        value: GOAL_SORTS[savedGoalSort] ? savedGoalSort : undefined,
-        options: Object.entries(GOAL_SORTS).map(([value, { label }]) => ({ value, label })) },
-      // task 1003136 — list|cards toggle; renderList forks its group renderer
-      // on this. Persisted via GOAL_VIEW_PREF, never the URL.
-      { id: 'f-goal-view',
-        label: 'View',
-        value: savedGoalView === 'cards' ? 'cards' : undefined,
-        options: [{ value: 'list', label: 'list' }, { value: 'cards', label: 'cards' }] },
     ],
     onChange: onListFilterChange,
   });
+  // task 1003470 — rows|cards is a VIEW, not a filter: it left the filter bar
+  // for the archetype's segmented toggle on the count line. renderList still
+  // reads #f-goal-view (task 1003136's fork), now a hidden input the two buttons
+  // write, so the fork and the otb.goals.view pref are unchanged.
+  const viewInput = $('#f-goal-view');
+  const viewBtns = Array.from(document.querySelectorAll('#goals-view .viewtoggle__btn'));
+  function setGoalView(view, opts) {
+    if (viewInput) viewInput.value = view;
+    viewBtns.forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.view === view)));
+    if (!opts || opts.fire !== false) onListFilterChange();
+  }
+  viewBtns.forEach((b) => b.addEventListener('click', () => setGoalView(b.dataset.view)));
+  if (savedGoalView === 'cards') setGoalView('cards', { fire: false });
   // task 2171 — stamp + wire the kit pager bars (grid + both Work tables); the
   // bar ids and localStorage prefs are exactly what the bespoke pagers used.
   const pagerMounts = [

package/modules/hall-ui/public/goals-render.js

@@ -127,6 +127,15 @@
     const { label, ms } = stamp(g);
     return ` · ${escapeHtml(label)} ${escapeHtml(ms ? fmtDate(new Date(ms).toISOString()) : '—')}`;
   }
+  // The check drawn, not typed: the world's icons are strokes, never glyphs.
+  const CHECK_PATH = '<path d="M3.4 8.4 6.6 11.5 12.6 4.9"/>';
+  const checkSvg = (cls) => `<svg class="${cls}" viewBox="0 0 16 16" aria-hidden="true">${CHECK_PATH}</svg>`;
+  // task 1003470 — a goal's facts, computed ONCE for the row and the card so the
+  // two views cannot drift (pinned by tests/goals_card_view.mjs). Three things a
+  // row says, each in one language: the ring (the goal's own done-when,
+  // satisfied over total), the facts line (state pill, scope + version chips,
+  // the category), and the right column — ONE next action, or a one-line state.
+  // The task readiness counts live on the roll line and nowhere else.
   function goalRenderFacts(g, ringSize) {
     const d = state.details.get(String(g.id));
     const crit = d ? (d.criteria || []) : [];
@@ -134,90 +143,83 @@
     const r = rollupOf(g.id);
     const achieved = g.status === 'achieved';
     const ringHtml = crit.length ? ring(sat, crit.length, achieved, ringSize)
-      : `<span class="gr-crit-none" aria-hidden="true">—</span>`;
+      : `<span class="gr-crit-none" role="img" aria-label="No done-when criteria yet" title="No done-when criteria yet"></span>`;
     const goalHref = `#/goal/${escapeHtml(String(g.id))}`;
     let right;
     if (achieved) {
-      right = `<span class="gr-met">✓ achieved</span>`;
+      right = `<span class="gr-state gr-state--ok">${checkSvg('gr-state__mark')}achieved</span>`;
     } else if (crit.length && sat >= crit.length) {
-      right = `<span class="gr-met">Criteria met — awaiting review</span>`;
+      right = `<span class="gr-state gr-state--ok">${checkSvg('gr-state__mark')}criteria met · awaiting review</span>`;
     } else if (r.nextReady) {
-      right = `<div class="gr-next"><span class="gr-next__t">${escapeHtml(r.nextReady.title || 'Next task')}</span>`
-        + `<a class="gr-claim" href="#/task/${escapeHtml(String(r.nextReady.id))}">Claim next</a></div>`;
+      // The one place the accent lands on the list: the row's live door.
+      right = `<div class="gr-next"><span class="gr-next__t" title="${escapeHtml(r.nextReady.title || '')}">${escapeHtml(r.nextReady.title || 'Next task')}</span>`
+        + `<a class="btn-accent gr-claim" href="#/task/${escapeHtml(String(r.nextReady.id))}">claim next</a></div>`;
     } else if (r.blocked > 0) {
-      right = `<a class="gr-drill" href="${goalHref}">See what's blocking <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>`;
+      right = `<a class="btn-ghost gr-drill" href="${goalHref}">what's blocking</a>`;
     } else {
-      right = `<span class="gr-quiet">No tasks yet</span>`;
+      right = `<span class="gr-quiet">no tasks yet</span>`;
     }
-    const metaHtml = `#${escapeHtml(String(g.id))} · ${escapeHtml(g.version_id || '')}${(achieved || g.status === 'open') ? '' : ' · ' + escapeHtml(g.status)}${goalStampHtml(g)}`;
-    // task 1003307 — the archetype's fact line: the goal's STATE as a pill, then
-    // one chip per scope module and one for the version. The mock argues rows
-    // over cards precisely because a goal carries this many facts; the row was
-    // showing two of them as one run of grey text.
+    // The sort's date, only while a date sort is on (task 1002965) — it rides
+    // under the right column's state, not in a meta run under the title.
     const stampHtml = goalStampHtml(g);
+    const whenHtml = stampHtml ? `<span class="gr-when">${stampHtml.replace(/^ · /, '')}</span>` : '';
     const idHtml = `<span class="gr-title__id">#${escapeHtml(String(g.id))}</span>`;
     const chips = [];
     for (const m of (Array.isArray(g.scope_modules) ? g.scope_modules : []).slice(0, 3)) {
       chips.push(`<span class="fact-chip">${escapeHtml(String(m))}</span>`);
     }
     if (g.version_id) chips.push(`<span class="fact-chip">${escapeHtml(g.version_id)}</span>`);
+    // task 1003276 — the category chip is a fact like the others, so it sits in
+    // the facts line (a label a person scans, never a door — ADR 0192).
+    const catHtml = categoryChip(g.category);
     const factsHtml = `<div class="gr-facts">`
       + `<span class="fact-pill fact-pill--${escapeHtml(g.status || 'open')}">${escapeHtml(g.status || 'open')}</span>`
       + chips.join('')
+      + catHtml
       + `</div>`;
-    // task 1003276 — the category chip. Computed here with the rest of the facts
-    // so the row and the card (task 1003136) cannot drift on it.
-    const catHtml = categoryChip(g.category);
-    return { r, achieved, ringHtml, goalHref, right, metaHtml, catHtml, idHtml, stampHtml, factsHtml };
+    return { r, achieved, ringHtml, goalHref, right, catHtml, idHtml, stampHtml, whenHtml, factsHtml };
   }
   function goalRowHtml(g) {
-    const { r, achieved, ringHtml, goalHref, right, catHtml, idHtml, stampHtml, factsHtml } = goalRenderFacts(g, 44);
-    // NOTE: a rollup row nests real links (title → goal, Claim → task overlay,
+    const { r, achieved, ringHtml, goalHref, right, idHtml, whenHtml, factsHtml } = goalRenderFacts(g, 44);
+    // NOTE: a rollup row nests real links (title → goal, claim → the task page,
     // drill → goal), so the row itself is a <div>, not an <a> — nested anchors
     // are invalid. Only the explicit links navigate.
-    // task 1003307 — the archetype's row (mock .goal): the id rides INSIDE the
-    // title, mono and quiet, so the name starts at the same x on every row; the
-    // subtitle is a real line; the state and the scope are pills and chips
-    // rather than a grey run-on. The sort stamp is all that is left of .gr-meta,
-    // and it renders only while a date sort is active.
+    // The archetype's row (mock .goal): the id rides INSIDE the title, mono and
+    // quiet; the subtitle is a real line; the facts are pills and chips; the
+    // right column is one action or one state, with the sort date under it.
     return `<div class="gr-row" data-goal-id="${escapeHtml(String(g.id))}">
       <div class="gr-ringcol">${ringHtml}</div>
       <div class="gr-main">
         <a class="gr-title" href="${goalHref}">${idHtml}${escapeHtml(g.title || 'Untitled goal')}</a>
         ${subtitleLine(g)}
         ${factsHtml}
-        ${stampHtml ? `<div class="gr-meta">${stampHtml.replace(/^ · /, '')}${catHtml}</div>` : (catHtml ? `<div class="gr-meta">${catHtml}</div>` : '')}
         ${achieved ? '' : goalRollLine(r)}
       </div>
-      <div class="gr-right">${right}</div>
+      <div class="gr-right">${right}${whenHtml}</div>
     </div>`;
   }
+  // The card is the row folded (goals.css says why it draws no box). It keeps
+  // the subtitle as a tooltip — task 1003224's shape — because a 280px column
+  // has no line to give it.
   function goalCardHtml(g) {
-    const { r, achieved, ringHtml, goalHref, right, metaHtml, catHtml } = goalRenderFacts(g, 36);
+    const { r, achieved, ringHtml, goalHref, right, idHtml, whenHtml, factsHtml } = goalRenderFacts(g, 36);
     return `<div class="goal-card" data-goal-id="${escapeHtml(String(g.id))}">
       <div class="goal-card__head">
         <div class="gr-ringcol">${ringHtml}</div>
-        <a class="goal-card__title gr-title" href="${goalHref}"${subtitleAttr(g)}>${escapeHtml(g.title || 'Untitled goal')}</a>
+        <a class="goal-card__title gr-title" href="${goalHref}"${subtitleAttr(g)}>${idHtml}${escapeHtml(g.title || 'Untitled goal')}</a>
       </div>
-      <div class="goal-card__meta">${metaHtml}${catHtml}</div>
+      ${factsHtml}
       ${achieved ? '' : goalRollLine(r)}
-      <div class="goal-card__foot">${right}</div>
+      <div class="goal-card__foot">${right}${whenHtml}</div>
     </div>`;
   }
   function renderList() {
     const grid = $('#goal-grid');
     if (!grid) return;
     const rows = filteredGoals();
-    const count = $('#goals-count');
-    if (count) count.textContent = `${rows.length} goal${rows.length === 1 ? '' : 's'}`;
     const pagerMount = $('#goals-pager-mount');
     if (pagerMount) pagerMount.hidden = true;
 
-    if (!rows.length) {
-      grid.innerHTML = emptyStateHtml('No goals match these filters.');
-      return;
-    }
-
     const isBlocked = (g) => {
       const r = rollupOf(g.id);
       return g.status === 'open' && r.ready === 0 && r.active === 0 && r.blocked > 0;
@@ -231,26 +233,55 @@
     const blocked = sortGoals(openRows.filter(isBlocked));
     const active = sortGoals(openRows.filter((g) => !isBlocked(g)));
 
-    let R = 0, A = 0, B = 0;
-    openRows.forEach((g) => { const r = rollupOf(g.id); R += r.ready; A += r.active; B += r.blocked; });
-    const summary = `<div class="gr-summary">
-      <span class="gr-sm"><span class="gr-sm__dot" style="background:var(--ok)"></span><b>${R}</b> ready to claim</span>
-      <span class="gr-sm"><span class="gr-sm__dot" style="background:var(--info)"></span><b>${A}</b> in progress</span>
-      <span class="gr-sm"><span class="gr-sm__dot" style="background:var(--terracotta)"></span><b>${B}</b> blocked</span>
-    </div>`;
+    // task 1003470 — the count line reads the groups (the mock's count-line).
+    const count = $('#goals-count');
+    if (count) {
+      const parts = [`${rows.length} goal${rows.length === 1 ? '' : 's'}`];
+      if (rows.length) parts.push(`${openRows.length} open`, `${achieved.length} achieved`, `${archived.length} archived`);
+      count.textContent = parts.join(' · ');
+    }
+    if (!rows.length) {
+      grid.innerHTML = emptyStateHtml('No goals match these filters.');
+      return;
+    }
+
+    // The readiness band: the four figures the mock puts on the panel, in the
+    // family's figure band, over the OPEN goals in view. The dots are the roll
+    // line's own, so the band and the rows read as one language.
+    let R = 0, A = 0, B = 0, sat = 0, crit = 0;
+    openRows.forEach((g) => {
+      const r = rollupOf(g.id); R += r.ready; A += r.active; B += r.blocked;
+      const d = state.details.get(String(g.id));
+      const c = d ? (d.criteria || []) : [];
+      crit += c.length; sat += c.filter((x) => x.satisfied).length;
+    });
+    const plural = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`;
+    const fig = (label, value, foot, mark) => `<div class="ov-fig">`
+      + `<span class="ov-fig__l">${mark ? `<i class="gr-mark gr-mark--${mark}" aria-hidden="true"></i>` : ''}${label}</span>`
+      + `<span class="ov-fig__v">${value}</span>`
+      + (foot ? `<span class="ov-fig__s">${foot}</span>` : '')
+      + `</div>`;
+    const summary = `<div class="ov-figs gr-figs">`
+      + fig('Ready to claim', R, `across ${plural(active.length, 'active goal')}`, 'ready')
+      + fig('In progress', A, 'claimed right now', 'active')
+      + fig('Blocked', B, 'waiting on upstream tasks', 'blocked')
+      + fig('Criteria met', `${sat} / ${crit}`, `on ${plural(openRows.length, 'open goal')}`)
+      + `</div>`;
 
-    const sec = (label, n) => `<div class="gr-sec"><b>${label}</b><span class="gr-sec__n">${n}</span></div>`;
-    // task 1003136 — the list|cards toggle swaps how the open groups render;
+    // The groups: the family head (name in the label voice, count in mono, one
+    // rule under) over the rows, the cards, or the pills.
+    const group = (label, arr, body) => `<div class="ov-group"><div class="ov-group__head"><span class="ov-group__name">${label}</span><span class="ov-group__n">${arr.length}</span></div>${body}</div>`;
+    // task 1003136 — the rows|cards toggle swaps how the open groups render;
     // grouping, filters, and sort run above the fork so both views share them.
     // Achieved/archived pills stay pills (already the compact form). The inner
     // div is class-only .goal-grid on purpose: task 1002439's block override
-    // targets #goal-grid.goal-grid, so the original card-grid CSS applies here.
+    // targets #goal-grid.goal-grid, so the card-grid CSS applies here.
     const cardsView = ($('#f-goal-view')?.value || 'list') === 'cards';
     const listOf = cardsView
       ? (arr) => `<div class="goal-grid">${arr.map(goalCardHtml).join('')}</div>`
       : (arr) => `<div class="gr-list">${arr.map(goalRowHtml).join('')}</div>`;
     // task 1002965 — an achieved/archived goal is a compact pill, so its sort
-    // date rides as its own muted span (the row's `gr-meta` equivalent). The
+    // date rides as its own muted span (the row's gr-when equivalent). The
     // pills row already wraps, so the extra text can't widen the page.
     const pillWhen = (g) => {
       const { stamp } = currentGoalSort();
@@ -258,13 +289,13 @@
       const { label, ms } = stamp(g);
       return `<span class="gr-pill__when">${escapeHtml(label)} ${escapeHtml(ms ? fmtDate(new Date(ms).toISOString()) : '—')}</span>`;
     };
-    const pill = (g) => `<a class="gr-pill" href="#/goal/${escapeHtml(String(g.id))}"><span class="gr-pill__ok">✓</span><b>${escapeHtml(g.title || 'Untitled')}</b><span class="gr-pill__id">#${escapeHtml(String(g.id))}</span>${pillWhen(g)}</a>`;
+    const pill = (g) => `<a class="gr-pill" href="#/goal/${escapeHtml(String(g.id))}">${checkSvg('gr-pill__mark')}<b>${escapeHtml(g.title || 'Untitled')}</b><span class="gr-pill__id">#${escapeHtml(String(g.id))}</span>${pillWhen(g)}</a>`;
 
     grid.innerHTML = summary
-      + (active.length ? sec('Active', active.length) + listOf(active) : '')
-      + (blocked.length ? sec('Blocked', blocked.length) + listOf(blocked) : '')
-      + (achieved.length ? sec('Achieved', achieved.length) + `<div class="gr-pills">${achieved.map(pill).join('')}</div>` : '')
-      + (archived.length ? sec('Archived', archived.length) + `<div class="gr-pills gr-pills--muted">${archived.map(pill).join('')}</div>` : '');
+      + (active.length ? group('Active', active, listOf(active)) : '')
+      + (blocked.length ? group('Blocked', blocked, listOf(blocked)) : '')
+      + (achieved.length ? group('Achieved', achieved, `<div class="gr-pills">${achieved.map(pill).join('')}</div>`) : '')
+      + (archived.length ? group('Archived', archived, `<div class="gr-pills gr-pills--muted">${archived.map(pill).join('')}</div>`) : '');
   }
   function todoSearchQuery() {
     const el = $('#f-goal-search');