@bongos/core 1.19.461 → 1.19.463

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

@@ -25,47 +25,42 @@
    The ch unit is the zero glyph's width, not a character — the body measure is
    --measure (48ch, measured at ~60 characters), never fresh ch arithmetic. */
 
-/* ---- goal-card grid (the CARDS view) ----
-   task 2171 density pass: minmax 300→230 (four across at desktop width),
-   tighter gaps/padding/type. Retired by task 1002439's grouped rollup, REVIVED
-   by task 1003136 as the list|cards toggle's card view: renderList nests
-   id-less .goal-grid wrappers per group, which this rule styles — the
-   #goal-grid override further down only flattens the OUTER container. */
-.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
+/* ---- the CARDS view: the row folded, not a second design ----
+   task 1003470: the rows|cards toggle stays — the archetype keeps it, because
+   a card wall is the better read when someone scans for a NAME rather than for
+   what can move — but the card is the row's compact sibling and nothing else:
+   the same title with the id inside it, the same pills and chips, the same
+   roll line, the same right-column state, from ONE fact source
+   (goalRenderFacts; pinned by tests/goals_card_view.mjs). A card inside the
+   list panel draws no box — a --bg-card tile on a --bg-card panel is the
+   card-in-a-card v3 removed — so the grid paints the hairline BETWEEN its rows
+   (a 1px row gap over the rule tone, each cell on the panel's own ground) and
+   nothing above the first or below the last. renderList nests id-less
+   .goal-grid wrappers per group, which this rule styles; the #goal-grid
+   override further down only flattens the OUTER container. */
+.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px 0; background: var(--rule-soft); --ring: 36px; }
 .goal-card {
-  display: flex; flex-direction: column; gap: 7px;
-  background: var(--bg-card); border: var(--line) solid transparent;
-  border-radius: var(--radius); padding: 10px 12px;
+  display: flex; flex-direction: column; gap: 10px;
+  padding: 18px 32px 20px 0;
+  background: var(--bg-card);
   color: var(--ink);
+  min-width: 0;
 }
-/* Hover lifts the tone; the transparent edge is what focus lands on. */
-a.goal-card:hover { text-decoration: none; background: var(--glass); }
-.goal-card__head { display: flex; align-items: flex-start; gap: 9px; }
-/* task 1003136: the task-1760 drag handle/priority/dragging rules that lived
-   here are deleted with wireDragReorder (see goals-page.js) — the revived
-   cards deliberately carry no drag affordance. */
-/* task 1761: a goal blocked by an unachieved prerequisite is dimmed + hue-shifted. */
-.goal-card--blocked { opacity: 0.62; border-style: dashed; }
-.goal-card--blocked:hover { opacity: 0.85; }
+.goal-card__head { display: flex; align-items: flex-start; gap: 12px; }
+.goal-card__head .gr-title { font-size: 15px; }
+.goal-card__title { flex: 1; min-width: 0; }
+.goal-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; }
+/* task 1761: a goal blocked by an unachieved prerequisite (the detail view). */
 .goal-deps { color: var(--ink-faint); }
 .goal-deps--blocked { color: var(--warn); font-weight: 600; }
-.goal-card__title { font-weight: 650; font-size: 13px; line-height: 1.35; flex: 1; min-width: 0; }
+/* The detail head's meta line and its mono id (task 2163). */
 .goal-card__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 11.5px; color: var(--ink-faint); }
-/* task 2163 — the real goal id, shown as a monospace #NNN token so it reads as
-   an identifier and never gets confused with the priority ordinal on the left. */
 .goal-card__id, .goal-detail__id {
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-faint);
 }
 .goal-card__id { padding: 0 5px; border: var(--line) solid var(--rule-soft); border-radius: var(--radius-sm); }
 .goal-detail__id { font-size: 0.72em; vertical-align: 0.12em; margin-right: 4px; }
-.goal-card__foot { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--ink-soft); }
-.goal-card__foot strong { font-variant-numeric: tabular-nums; }
-/* boot skeleton — goal-card-shaped shimmer placeholders (kit .kit-skel bars)
-   so the grid doesn't jump when data lands. */
-.goal-card--skel { pointer-events: none; }
-.goal-card--skel .kit-skel { width: 80%; }
-.goal-card--skel .kit-skel + .kit-skel { width: 55%; }
 
 /* ---- detail view ---- */
 .goal-detail__head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
@@ -228,117 +223,131 @@ a.goal-card:hover { text-decoration: none; background: var(--glass); }
 .conflict__paths { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; word-break: break-all; }
 .conflict-note { font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }
 
-/* Filtered-count line under the kit filter bar (list view). */
-.goals-count-line { margin: -4px 0 12px; font-size: 12.5px; color: var(--ink-faint); }
+/* The count line + the view toggle (list view): one line under the filter
+   bar. rows|cards is a VIEW, not a filter — it left the filter bar in task
+   1003470 for the archetype's segmented control (mock .viewtoggle). The pressed
+   side takes the tint the world gives a current thing (the ranks ladder, the
+   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); }
 
 /* ============================================================
-   task 1002439 — Goals "what's next" rollup (grouped list view).
-   Replaces the paginated card grid: a task-readiness summary, then
-   goals grouped Active / Blocked / Achieved. Each row rolls its
-   tasks up into ready/in-progress/blocked; the task→task dependency
-   graph itself lives on the Tasks page. Uses the shared style.css tokens.
+   The list — task 1002439's grouped rollup, redesigned in task 1003470 (goal
+   1000081). ONE panel: the shell's .scroll (.goals-panel) holds the filter bar
+   under a hairline, the count line with the view toggle, the readiness band
+   (the family's .ov-figs) and the groups under .ov-group__head. The rows are
+   the archetype's (mock .goal): ring / content / right, air not edges, the
+   hairline on TOP so the first row after a head starts flush. Before this the
+   page was a bar of twelve controls on the ground over one --bg-card panel PER
+   GROUP, the readiness as three small dotted numbers, and the group heads on
+   the ground between panels.
    ============================================================ */
-/* The OUTER container renders grouped full-width blocks (summary + section
-   heads), so flip it to normal block flow. Id-selected on purpose: the cards
-   view (task 1003136) nests id-less .goal-grid wrappers per group, which keep
-   the real card grid above. */
-#goal-grid.goal-grid { display: block; gap: 0; }
-.gr-summary { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 20px; }
-.gr-sm { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-soft); }
-.gr-sm b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
-.gr-sm__dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
+/* The OUTER container renders full-width blocks, so it is block flow.
+   Id-selected on purpose: the cards view nests id-less .goal-grid wrappers per
+   group, which keep the real grid above. */
+#goal-grid.goal-grid { display: block; gap: 0; background: none; }
+/* The filter bar closes on a hairline so the figures under it read as the
+   panel's content, not as more controls. The kit's overflow row and its chips
+   sit inside the same rule. */
+#goals-filters { margin: 0 0 18px; padding: 0 0 6px; border-bottom: var(--line) solid var(--rule-soft); }
+#goals-filters .filters { margin-bottom: 10px; }
 
-/* The group head sits on a --rule hairline (the archetype's .group__head): a
-   heavier line than the rows' --rule-soft, so the groups read as the outer
-   division and the rows as the inner one. */
-.gr-sec { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; padding: 0 0 10px; border-bottom: var(--line) solid var(--rule); }
-/* The section name is the label voice — take the tokens, never the family:
-   --label-face is mono in light and the body face in dark, because mono caps
-   read as precise on paper and as thin and technical on black. */
-.gr-sec b {
-  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);
-}
-.gr-sec__n { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+/* The readiness band: the family figure band with a dot in the label — the
+   same dots the roll line under every row uses, so the band and the rows are
+   one language. */
+.gr-figs { margin-top: 18px; }
+.gr-figs + .ov-group { margin-top: var(--sp-md); }
+.gr-mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; }
+.gr-mark--ready { background: var(--ok); }
+.gr-mark--active { background: var(--info); }
+.gr-mark--blocked { background: var(--warn); }
+.gr-mark--backlog { background: var(--ink-faint); }
 
-/* The rollup list is one panel, not a stack of bordered rows: --bg-card at the
-   full radius with a transparent edge, and the rows' own hairlines doing the
-   dividing. The padding is the panel's, so the first and last rows breathe
-   against it rather than against their own borders. */
-.gr-list { border: var(--line) solid transparent; border-radius: var(--radius); background: var(--bg-card); padding: 4px 0; overflow: hidden; }
-/* The archetype's row (mock .goal): the air is the loosest of the three
-   versions, the columns are ring / content / right, and the rule sits on TOP so
-   the first row can drop it and start flush against the panel's own padding. */
-.gr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 20px 22px; border-top: var(--line) solid var(--rule-soft); }
-.gr-row:first-child { border-top: 0; }
-.gr-row:hover { background: var(--glass); }
-.gr-ringcol { flex: none; }
-.gr-crit-none { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rule); color: var(--ink-faint); font-size: 13px; }
+/* The rows. --ring is the ring column's width; the ring svg takes it. */
+.gr-list { --ring: 44px; margin: 0; }
+.gr-row { display: grid; grid-template-columns: var(--ring) minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 20px 0; border-top: var(--line) solid var(--rule-soft); }
+.ov-group__head + .gr-list > .gr-row:first-child { border-top: 0; }
+.gr-ringcol { width: var(--ring); flex: none; }
+.gr-ringcol .goal-ring { width: var(--ring); height: var(--ring); display: block; }
+/* The ring's figure is the machine's word: mono, quiet. */
+.gr-ringcol .goal-ring__label { font-family: var(--font-mono); font-weight: 400; font-size: 11px; fill: var(--ink-soft); }
+/* No done-when criteria yet: the empty track, and nothing drawn in it. */
+.gr-crit-none { display: block; width: var(--ring); height: var(--ring); border-radius: 50%; border: 3px solid var(--rule-soft); box-sizing: border-box; }
 .gr-main { min-width: 0; }
-/* The goal's name is the way into the goal, so it is a control and owes the
-   24px floor on BOTH axes. Its 15px/1.3 line box measured 20px tall (the kit's
-   controls-24px finding, 26 rows at 1440); the padding buys the height and the
-   equal negative margin hands the space back so the row does not re-space. */
-/* The name at the archetype's weight: 17px/500, not 15px/650. A heavy small
-   title reads as a label; this reads as the thing itself. It is also the way
-   into the goal, so it owes the 24px floor on both axes — the padding buys the
-   height and the equal negative margin hands the space back. */
+/* The name at the archetype's weight: 17px/500, not a heavy label. It is the
+   way into the goal, so it owes the 24px floor on both axes — the padding buys
+   the height and the equal negative margin hands the space back. */
 .gr-title {
   display: inline-block; font-size: 17px; font-weight: 500; letter-spacing: -.014em;
   color: var(--ink); line-height: 1.3; text-decoration: none;
-  min-height: 24px; min-width: 24px; padding: 3px 4px; margin: 0 -4px;
+  min-height: 24px; min-width: 24px; padding: 3px 4px; margin: -3px -4px;
+  overflow-wrap: anywhere;
 }
 .gr-title:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
-/* The id rides INSIDE the title rather than on the meta line below it, so every
-   row's name starts at the same x and the id never competes for the second line
-   the subtitle now wants. */
-.gr-title__id { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-faint); margin-right: 9px; }
-
-/* The goal's own one-line explanation. Task 1003224 made this a tooltip; task
-   1003307 gives it the line back on the owner's call, because 35 of 72 goals
-   carry one and a tooltip does not exist on a touch screen. Empty goals render
-   no element at all, so a row without a subtitle simply closes up. */
+/* The id rides INSIDE the title, mono and quiet, so every row's name starts at
+   the same x and the id never competes for the subtitle's line. */
+.gr-title__id { font-family: var(--font-mono); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink-faint); margin-right: 9px; }
+/* The goal's own one-line explanation: 35 of 72 goals carry one, and a tooltip
+   does not exist on a touch screen (task 1003307, on the owner's call). */
 .gr-sub { margin: 5px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: var(--measure); }
-
-/* The fact line: the state, then what the goal is scoped to. The pill and the
-   chip themselves are the shell's .fact-pill / .fact-chip — this row only says
-   how they sit together. */
+/* The fact line: the state pill, the scope chips, the version chip and the
+   category chip — every label a goal carries, in one run. The pill and the
+   chips are the shell's; this only says how they sit together. */
 .gr-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; }
-/* What is left of the old meta run-on: the sort stamp, and only while a date
-   sort is active. The id moved into the title, the version became a chip and the
-   status became a pill. */
-.gr-meta { font-size: 12px; color: var(--ink-faint); margin-top: 8px; font-variant-numeric: tabular-nums; }
+.gr-facts .gr-cat { margin-left: 0; }
+/* The roll line: what the goal's tasks are doing, only the non-zero buckets. */
 .gr-roll { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
-.gr-d { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
-.gr-d i { width: 7px; height: 7px; border-radius: 50%; }
+.gr-d { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.gr-d .gr-mark { margin-right: 0; }
 .gr-d b { color: var(--ink); font-weight: 600; }
-.gr-right { text-align: right; min-width: 150px; max-width: 244px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
-.gr-next { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 230px; }
-.gr-next__t { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
-.gr-claim { background: var(--accent); color: var(--accent-on); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
-.gr-claim:hover { background: var(--accent-deep); }
-.gr-drill { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; min-height: 24px; gap: 5px; }
-.gr-drill:hover { color: var(--accent-ink); }
-.gr-met { font-size: 12.5px; font-weight: 600; color: var(--ok); }
-.gr-quiet { font-size: 12.5px; color: var(--ink-faint); }
+/* The right column is ONE thing: the next action, or a one-line state. The
+   accent lands only on "claim next", the row's live door; the other states are
+   ink, and the blocked door is a ghost pill. Under it, the sort's date while a
+   date sort is on. */
+.gr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; max-width: 244px; }
+.gr-next { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 244px; }
+.gr-next__t { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 244px; }
+.gr-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); text-align: left; }
+.gr-state--ok { color: var(--ok); }
+.gr-state__mark { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.gr-quiet { font-size: 13px; color: var(--ink-faint); }
+.gr-when { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 
-.gr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
-.gr-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: var(--line) solid var(--rule); border-radius: var(--radius-pill); padding: 6px 13px 6px 8px; color: var(--ink-soft); font-size: 12.5px; min-height: 24px; }
-.gr-pill:hover { background: var(--glass); }
-.gr-pill b { color: var(--ink); font-weight: 600; }
-.gr-pill__ok { width: 17px; height: 17px; border-radius: 50%; background: var(--ok-weak); color: var(--ok); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
-.gr-pill__id { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+/* Achieved and archived goals are compact pills in BOTH views (mock .pill): a
+   hairline pill with the check drawn, the name at 500, the id in mono. */
+.gr-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; }
+.gr-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 15px; border: var(--line) solid var(--rule); border-radius: var(--radius-pill); color: var(--ink-soft); font-size: 13px; text-decoration: none; }
+.gr-pill:hover { border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }
+.gr-pill b { color: var(--ink); font-weight: 500; }
+.gr-pill__mark { width: 16px; height: 16px; flex: none; stroke: var(--ok); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.gr-pill__id { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 /* task 1002965 — the date an achieved/archived pill was ordered on, shown only
-   while a date sort is active (the pill's counterpart to .gr-meta). */
+   while a date sort is active (the pill's counterpart to .gr-when). */
 .gr-pill__when { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
-.gr-pills--muted { opacity: .6; }
+.gr-pills--muted .gr-pill { color: var(--ink-faint); }
+.gr-pills--muted .gr-pill__mark { stroke: var(--ink-faint); }
+
+/* Boot skeleton: row-shaped, in the skeleton tone (--bg-deep is black in dark). */
+.gr-row--skel { pointer-events: none; }
+.gr-skel__ring { display: block; width: var(--ring); height: var(--ring); border-radius: 50%; background: var(--skeleton); }
+.gr-row--skel .kit-skel { display: block; width: 60%; }
+.gr-row--skel .kit-skel + .kit-skel { width: 40%; margin-top: 10px; }
 
 @media (max-width: 640px) {
-  .gr-row { grid-template-columns: auto 1fr; row-gap: 11px; }
-  .gr-right { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
-  .gr-next { align-items: flex-start; }
-  .gr-next__t { max-width: 100%; }
+  .gr-list { --ring: 36px; }
+  .gr-row { grid-template-columns: var(--ring) minmax(0, 1fr); gap: 14px 16px; padding: 18px 0; }
+  .gr-right, .gr-next { grid-column: 1 / -1; align-items: flex-start; text-align: left; max-width: 100%; }
+  .gr-next__t { max-width: 100%; white-space: normal; }
+  .goal-grid { grid-template-columns: minmax(0, 1fr); }
+  .goal-card { padding-right: 0; }
 }
 
 /* ── task 1003224: name, subtitle, and Claude's text at three weights ────────

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

@@ -9,6 +9,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-03-goals1">
+  <!-- task 1003470: the family sheet the list's figure band and group heads
+       come from (.ov-figs, .ov-group__head), linked before the page's own. -->
+  <link rel="stylesheet" href="/builders/oversight.css">
   <!-- Page-local styles (task 2171) — extracted from the old inline <style>
        block per the hall placement rules; shared pager/filter/tab/count-pill
        styles now live in style.css's hall-kit section. -->
@@ -42,19 +45,34 @@
       </div>
 
       <main id="hall-main">
-        <!-- LIST view -->
+        <!-- LIST view — ONE panel (task 1003470): the filter bar, the count line
+             with the rows|cards toggle, the readiness band and the groups all sit
+             on the shell's .scroll. It used to be a bar of twelve controls on the
+             ground over one panel PER GROUP. -->
         <section id="goals-list-view" aria-labelledby="goals-list-h">
           <h2 id="goals-list-h" class="sr-only">All goals</h2>
-          <!-- task 2171: the filter bar is built by OTBKit.makeFilterBar —
-               Version / Status / Membership, all primary (no overflow). Control
-               ids are unchanged (f-goal-version, f-goal-status, f-goal-mine)
-               so goals-page.js reads stay stable. -->
-          <div id="goals-filters"></div>
-          <p class="goals-count-line" id="goals-count" aria-live="polite"></p>
-          <div class="goal-grid" id="goal-grid"></div>
-          <!-- task 2171: the grid's pager bar is stamped here by OTBKit
-               (pagerBarHtml('goals') — same ids, same otb.goals.perPage pref). -->
-          <div id="goals-pager-mount"></div>
+          <div class="scroll goals-panel">
+            <!-- task 2171: the filter bar is built by OTBKit.makeFilterBar —
+                 Version / Status / Sort in the open, the other five behind the
+                 kit's Filters disclosure (task 1003470). Control ids are
+                 unchanged so goals-page.js reads stay stable. -->
+            <div id="goals-filters"></div>
+            <div class="goals-line">
+              <p class="goals-count-line" id="goals-count" aria-live="polite"></p>
+              <!-- rows|cards is a view, not a filter. The hidden input is what
+                   renderList reads (#f-goal-view) and what the saved pref restores;
+                   the two buttons write it. -->
+              <div class="viewtoggle" role="group" aria-label="View" id="goals-view">
+                <input type="hidden" id="f-goal-view" value="list">
+                <button type="button" class="viewtoggle__btn" data-view="list" aria-pressed="true">rows</button>
+                <button type="button" class="viewtoggle__btn" data-view="cards" aria-pressed="false">cards</button>
+              </div>
+            </div>
+            <div class="goal-grid" id="goal-grid"></div>
+            <!-- task 2171: the grid's pager bar is stamped here by OTBKit
+                 (pagerBarHtml('goals') — same ids, same otb.goals.perPage pref). -->
+            <div id="goals-pager-mount"></div>
+          </div>
         </section>
 
         <!-- DETAIL view (hash-routed: #/goal/N) -->

package/modules/hall-ui/public/goals.states.json

@@ -1,12 +1,12 @@
 {
-  "_": "The hall's Goals list + goal detail through modules/ui-design/kit/render.js (task 1003307). Goals is the LIST ARCHETYPE the governance-and-lists re-skin applies across thirteen pages, so its floors are measured first and the rest are held against them. Populated look: node scripts/hall-preview/server.js --port 4620 --fixture-me, then --base-in/--base-out at that origin.",
+  "_": "The hall's Goals list + goal detail through modules/ui-design/kit/render.js (task 1003307; redesigned in task 1003470). Goals is the LIST ARCHETYPE the governance-and-lists re-skin applies across thirteen pages, so its floors are measured first and the rest are held against them. Populated look: node scripts/hall-preview/server.js --port 4620 --fixture-me, then --base-in/--base-out at that origin (the harness carries goals, goals/rollups and work-categories since task 1003470). `filters` opens the kit's Filters disclosure (the five lenses that left the open bar); `cards` flips the rows|cards toggle on the count line.",
   "page": "/builders/goals",
   "surface": "hall-ui",
   "stub": {
     "prefix": "/builders/"
   },
   "modeQuery": false,
-  "_feeds": "The kit's own stub carries no goal feed, so against it the page renders its EMPTY and SKELETON states — which is deliberate: an empty board is a state the floors must hold in. Against the hall-preview harness the same states render populated. The feed 404s are declared here, never hidden. work-categories and goals/rollups have no checked-in fixture, so the harness answers 404: declared here, not hidden.",
+  "_feeds": "The kit's own stub carries no goal feed, so against it the page renders its EMPTY and SKELETON states — which is deliberate: an empty board is a state the floors must hold in. Against the hall-preview harness the same states render populated. The feed 404s are declared here, never hidden.",
   "ignoreRequests": [
     "/api/(gds|bongos)/me$",
     "/api/(gds|bongos)/me/",
@@ -36,13 +36,81 @@
       "expect": {
         "visible": [
           "#goals-list-view",
-          "#goals-filters"
+          "#goals-filters",
+          "#goals-view"
         ],
         "hidden": [
           "#goal-detail-view"
         ]
       }
     },
+    "filters": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "#goals-filters .filters__more"
+        ],
+        [
+          "wait",
+          150
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#goals-filters .filters--overflow",
+          "#f-goal-category"
+        ],
+        "attr": [
+          [
+            "#goals-filters .filters__more",
+            "aria-expanded",
+            "true"
+          ]
+        ]
+      }
+    },
+    "cards": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "click",
+          "#goals-view [data-view=\"cards\"]"
+        ],
+        [
+          "wait",
+          200
+        ]
+      ],
+      "expect": {
+        "attr": [
+          [
+            "#goals-view [data-view=\"cards\"]",
+            "aria-pressed",
+            "true"
+          ],
+          [
+            "#goals-view [data-view=\"list\"]",
+            "aria-pressed",
+            "false"
+          ]
+        ],
+        "value": [
+          [
+            "#f-goal-view",
+            "cards"
+          ]
+        ]
+      }
+    },
     "detail": {
       "auth": true,
       "url": "/builders/goals#/goal/1000081",

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

@@ -0,0 +1,27 @@
+/* people.css — page-local styles for the cross-project builder directory
+   (task 1003470, goal 1000081), served at /people and at its legacy door
+   /scouting, which loads the same page. Only the identity cell lives here: the
+   ledger, the filter bar, the pager, the chips and the empty state are the
+   shell's and the kit's. Tokens are the world's real names — no compat alias. */
+
+/* The who cell: avatar, then the name over the login. A row that carries an
+   avatar centres its figures on it, so the numbers line up with the name. */
+#people-body .ledger td { vertical-align: middle; }
+.dir-who { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
+.dir-avatar {
+  width: 30px; height: 30px; border-radius: 50%; flex: none;
+  object-fit: cover; background: var(--skeleton);
+}
+/* No avatar: the initial on the glass, never a broken image or a blank disc. */
+.dir-avatar--initial {
+  display: inline-grid; place-items: center;
+  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
+  background: var(--glass-strong);
+}
+/* The name column keeps room for a login: on a phone the ledger scrolls in its
+   card (the shell's strip) rather than breaking a handle across two lines. */
+.dir-who__t { display: flex; flex-direction: column; gap: 1px; min-width: 132px; }
+.dir-name { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
+.dir-login { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
+.dir-crafts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
+.dir-none { color: var(--ink-faint); }

package/modules/hall-ui/public/people.html

@@ -9,6 +9,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <!-- task 1003470: the identity cell (avatar, name, login) is the one thing the
+       directory adds to the shell's ledger. -->
+  <link rel="stylesheet" href="/builders/people.css">
 </head>
 <body data-page="people" data-page-title="People">
 
@@ -18,19 +21,20 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. People shipped with NO <h1> at all
-           (one-header-main-h1 measured 0 on every render), so the re-skin
-           carries the structural fix rather than porting the hole. The heading
-           is the LABEL voice, not a display line: on a working surface the
-           page's own name is the least interesting thing on it. -->
+      <!-- The board page head (task 1003307): the label voice, because on a
+           working surface the page's own name is the least interesting thing on
+           it. The sub is rewritten by people.js once the directory has loaded. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">People</h1>
-        <p class="page-head__sub">Everyone building across hosted projects, ranked by track record. Descriptive only — cross-project numbers never carry authority here.</p>
+        <p class="page-head__sub" id="people-sub">Everyone building across hosted projects, ranked by track record. Descriptive only — cross-project numbers never carry authority here.</p>
       </div>
 
       <main id="hall-main">
+        <!-- task 1003470: ONE directory. /people and its legacy door /scouting
+             render this same page from the same script — the same
+             /api/gds/scouting rollup used to be drawn three different ways. -->
         <section class="scroll" id="people-scroll" aria-labelledby="people-h">
-          <h2 id="people-h" class="scroll__h">Builder directory</h2>
+          <h2 id="people-h" class="scroll__h">Builder directory<span class="count-pill" id="people-count" hidden></span></h2>
           <div id="people-filters"></div>
           <div id="people-body">
             <div class="profile__placeholder">Loading the directory…</div>
@@ -50,6 +54,10 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
+<!-- shared frontend toolkit (window.OTB — rank labels, number formats) + the
+     branding pack's currency label, loaded BEFORE people.js. -->
+<script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
+<script src="/builders/brand-apply.js"></script>
 <script src="/builders/hall-kit.js"></script>
 <script src="/builders/people.js"></script>
 </body>