@bongos/core 1.17.2 → 1.18.0

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

@@ -0,0 +1,183 @@
+/* goals.css — page-local styles for the Goals page (task 2171; extracted from
+   goals.html's old inline <style> per the hall placement rules). Only what the
+   shared kit doesn't carry lives here: goal cards, the detail band, criteria /
+   member / conflict lists, the invite + pending panels. Shared pieces —
+   .pager--paged, .count-pill, .kit-tabs, .filters, .empty-state, .kit-skel —
+   are in style.css's hall-kit section. Everything derives from the shared
+   design tokens so instance packs reskin this page along with the rest. */
+
+/* ---- goal-card grid (list view) ----
+   task 2171 density pass: minmax 300→230 (four across at desktop width),
+   tighter gaps/padding/type — the grid holds ~26 goals, so card height is
+   what sets the page height. */
+.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
+.goal-card {
+  display: flex; flex-direction: column; gap: 7px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 10px 12px;
+  color: var(--ink);
+}
+a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-2); }
+.goal-card__head { display: flex; align-items: flex-start; gap: 9px; }
+/* task 1760 — priority (visible once narrowed to one version) + Archon
+   drag-to-reorder handle (server enforces the write; this is the affordance). */
+.goal-card__handle { flex: none; cursor: grab; color: var(--ink-faint); font-size: 14px; line-height: 1.2; touch-action: none; }
+.goal-card__handle:active { cursor: grabbing; }
+.goal-card__priority {
+  flex: none; min-width: 1.4em; text-align: center;
+  font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+.goal-card--dragging { opacity: 0.45; }
+/* 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-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; }
+.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: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-faint);
+}
+.goal-card__id { padding: 0 5px; border: 1px solid var(--rule-soft); border-radius: 5px; }
+.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; }
+.goal-detail__title { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
+.goal-detail__desc { color: var(--ink-soft); font-size: 13.5px; max-width: 72ch; margin: 6px 0 0; }
+.goal-detail__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
+/* task 1888/1828 — Completion | Members | Conflicts share ONE card. Wide:
+   three columns split by vertical rules. Narrow: they stack, split by
+   horizontal rules. The .scroll gives the outer frame; columns own padding
+   (the .scroll padding is zeroed here). Conflicts live up here so a long
+   work list can no longer push them off the bottom of the page. */
+.goal-band { padding: 0; margin-top: 20px; display: grid; grid-template-columns: 1fr; }
+.goal-band__col { padding: 14px 18px; min-width: 0; }
+.goal-band__col + .goal-band__col { border-top: 1px solid var(--rule-soft); }
+@media (min-width: 900px) {
+  .goal-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .goal-band__col + .goal-band__col { border-top: none; border-left: 1px solid var(--rule-soft); }
+}
+
+/* Live conflicts: the band COLUMN can't own the card border, so it gets a
+   subtle amber wash; the standalone full-view card keeps the amber border.
+   (Count pills on these headers are the shared .count-pill.) */
+.goal-conflicts-card--live { background: color-mix(in srgb, var(--warn) 6%, transparent); }
+.goal-conflicts-card--live .count-pill { background: var(--warn-weak); color: var(--warn); }
+#goal-conflicts-view-card.goal-conflicts-card--live { background: var(--surface); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
+
+/* task 1828 — inline Claim on a ready To-do row + the conflicts "view all". */
+.goal-claim-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 24px; padding: 0 12px; border-radius: var(--radius-sm);
+  border: 1px solid var(--accent); background: var(--accent); color: #fff;
+  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
+}
+.goal-claim-btn:hover:not(:disabled) { background: var(--accent-deep); }
+.goal-claim-btn:disabled { opacity: 0.55; cursor: default; }
+/* task 1828 — Release on the viewer's OWN active claim (ghost, not accent —
+   it's the undo of a claim); a muted label for another builder's claim. */
+.goal-release-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 24px; padding: 0 12px; border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft);
+  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
+}
+.goal-release-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+.goal-release-btn:disabled { opacity: 0.55; cursor: default; }
+.ledger__claimed { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
+.ledger__action { text-align: right; white-space: nowrap; }
+/* task 1828 — shared "View all N →" foot under a capped band column. */
+.goal-col__foot { margin-top: 10px; }
+
+/* task 2171 density pass — the Work tables were the airiest surface on the
+   page (12px cells): tighter cells + type lift rows-per-screen ~40%. */
+#goal-todo th, #goal-todo td, #goal-done th, #goal-done td { padding: 7px 10px; }
+#goal-todo td, #goal-done td { font-size: 12.5px; }
+
+/* task 1828 — full completion view: each criterion's detail shown inline. */
+.crit-list--full .crit { align-items: start; }
+.crit__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.crit__detail { font-size: 12px; color: var(--ink-faint); line-height: 1.45; }
+
+/* task 1828 — full members view: goal-level aggregate + per-member stats. */
+.goal-mstats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); }
+.mstat strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
+.member--stat { gap: 12px; }
+.member__stats { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.member__stats strong { color: var(--ink); font-weight: 600; }
+.member__stats--pending { color: var(--ink-faint); }
+
+/* task 1888 — the single Work card: header row with the to-do/completed tab
+   toggle (kit tabs), paginated tables underneath. */
+.goal-work__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
+.goal-work__head .scroll__h { margin: 0; }
+.goal-work__tabs .kit-tabs { margin: 0; }
+.conflict__sev {
+  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 8px;
+  border-radius: 999px; font-size: 10.5px; font-weight: 600; vertical-align: 1px;
+  background: var(--surface-2); color: var(--ink-soft);
+}
+.conflict__sev--high { background: var(--danger-weak); color: var(--danger); }
+.conflict__sev--medium { background: var(--warn-weak); color: var(--warn); }
+
+.crit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
+.crit { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
+.crit:last-child { border-bottom: none; }
+.crit__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint); }
+.crit--done .crit__mark { background: var(--ok); border-color: var(--ok); color: #fff; }
+.crit--done .crit__text { color: var(--ink-soft); }
+/* BV1.R79: per-criterion expand in the capped band — short label, full text on
+   click (matches the Roadmap page's .vbar__crit-d pattern). */
+.crit-d { min-width: 0; }
+.crit-d > summary { cursor: pointer; list-style: none; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
+.crit-d > summary::-webkit-details-marker { display: none; }
+.crit-d[open] > summary { text-decoration: none; font-weight: 500; }
+.crit-d .crit__detail { margin-top: 4px; }
+
+.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.member { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
+.member:last-child { border-bottom: none; }
+.member__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-weak); color: var(--accent-text); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
+.member__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.member__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.member__name small { color: var(--ink-faint); }
+.role-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-soft); }
+.role-pill--lead { background: var(--accent-weak); color: var(--accent-text); }
+
+/* task 1762/1877 — owner/manager invite control (goal member admission),
+   collapsed behind "+ Invite" (disclosure, closed by default — task 2171). */
+.goal-invite { margin: 4px 0 10px; }
+.goal-invite__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.goal-invite__form select#goal-invite-builder { flex: 1; min-width: 180px; }
+
+/* task 1953 — private goals: the lock badge (meta line) + the goal's own
+   pending invite/join-request queue (manager view, next to the invite box). */
+.goal-badge--locked { background: var(--warn-weak); color: var(--warn); }
+.goal-pending { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 10px; }
+.pending-group__h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-faint); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
+.pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.pending-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; flex-wrap: wrap; }
+.pending-row:last-child { border-bottom: none; }
+.pending-row__who { font-weight: 600; }
+.pending-row__note { color: var(--ink-faint); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pending-row__actions { display: flex; gap: 6px; margin-left: auto; }
+
+.conflict { border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); background: var(--warn-weak); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; margin: 8px 0 0; }
+.conflict__pair { font-weight: 600; }
+.conflict__paths { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; 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); }

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

@@ -10,175 +10,10 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-03-goals1">
-  <style>
-    /* page-local styles — goals list + detail (task 1734); tokens only */
-    .goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
-    .goal-card {
-      display: flex; flex-direction: column; gap: 10px;
-      background: var(--surface); border: 1px solid var(--border);
-      border-radius: var(--radius); padding: 16px 18px;
-      color: var(--ink);
-    }
-    a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-2); }
-    .goal-card__head { display: flex; align-items: flex-start; gap: 12px; }
-    /* task 1760 — priority (visible once narrowed to one version) + Archon
-       drag-to-reorder handle (server enforces the write; this is the affordance). */
-    .goal-card__handle { flex: none; cursor: grab; color: var(--ink-faint); font-size: 14px; line-height: 1.2; touch-action: none; }
-    .goal-card__handle:active { cursor: grabbing; }
-    .goal-card__priority {
-      flex: none; min-width: 1.4em; text-align: center;
-      font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
-      font-variant-numeric: tabular-nums;
-    }
-    .goal-card--dragging { opacity: 0.45; }
-    /* 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-deps { color: var(--ink-faint); }
-    .goal-deps--blocked { color: var(--warn); font-weight: 600; }
-    .goal-card__title { font-weight: 650; font-size: 14px; flex: 1; min-width: 0; }
-    .goal-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-faint); }
-    .goal-card__foot { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-soft); }
-    .goal-card__foot strong { font-variant-numeric: tabular-nums; }
-
-    .goal-detail__head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
-    .goal-detail__title { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
-    .goal-detail__desc { color: var(--ink-soft); font-size: 13.5px; max-width: 72ch; margin: 6px 0 0; }
-    .goal-detail__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
-    /* task 1888/1828 — Completion | Members | Conflicts share ONE card. Wide:
-       three columns split by vertical rules. Narrow: they stack, split by
-       horizontal rules. The .scroll gives the outer frame; columns own padding
-       (the .scroll padding is zeroed here). Conflicts live up here so a long
-       work list can no longer push them off the bottom of the page. */
-    .goal-band { padding: 0; margin-top: 20px; display: grid; grid-template-columns: 1fr; }
-    .goal-band__col { padding: 18px 22px; min-width: 0; }
-    .goal-band__col + .goal-band__col { border-top: 1px solid var(--rule-soft); }
-    @media (min-width: 900px) {
-      .goal-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      .goal-band__col + .goal-band__col { border-top: none; border-left: 1px solid var(--rule-soft); }
-    }
-
-    /* task 1888 — count pill on card/tab headers + the live-conflicts accent. */
-    .goal-count {
-      display: inline-flex; align-items: center; justify-content: center;
-      min-width: 20px; height: 18px; padding: 0 6px; margin-left: 8px;
-      border-radius: 999px; background: var(--surface-2); color: var(--ink-soft);
-      font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
-    }
-    /* Live conflicts: the band COLUMN can't own the card border, so it gets a
-       subtle amber wash; the standalone full-view card keeps the amber border. */
-    .goal-conflicts-card--live { background: color-mix(in srgb, var(--warn) 6%, transparent); }
-    .goal-conflicts-card--live .goal-count { background: var(--warn-weak); color: var(--warn); }
-    #goal-conflicts-view-card.goal-conflicts-card--live { background: var(--surface); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
-
-    /* task 1828 — inline Claim on a ready To-do row + the conflicts "view all". */
-    .goal-claim-btn {
-      display: inline-flex; align-items: center; justify-content: center;
-      height: 26px; padding: 0 12px; border-radius: var(--radius-sm);
-      border: 1px solid var(--accent); background: var(--accent); color: #fff;
-      font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
-    }
-    .goal-claim-btn:hover:not(:disabled) { background: var(--accent-deep); }
-    .goal-claim-btn:disabled { opacity: 0.55; cursor: default; }
-    /* task 1828 — Release on the viewer's OWN active claim (ghost, not accent —
-       it's the undo of a claim); a muted label for another builder's claim. */
-    .goal-release-btn {
-      display: inline-flex; align-items: center; justify-content: center;
-      height: 26px; padding: 0 12px; border-radius: var(--radius-sm);
-      border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft);
-      font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
-    }
-    .goal-release-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
-    .goal-release-btn:disabled { opacity: 0.55; cursor: default; }
-    .ledger__claimed { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
-    .ledger__action { text-align: right; white-space: nowrap; }
-    /* task 1828 — shared "View all N →" foot under a capped band column. */
-    .goal-col__foot { margin-top: 12px; }
-
-    /* task 1828 — full completion view: each criterion's detail shown inline. */
-    .crit-list--full .crit { align-items: start; }
-    .crit__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
-    .crit__detail { font-size: 12px; color: var(--ink-faint); line-height: 1.45; }
-
-    /* task 1828 — full members view: goal-level aggregate + per-member stats. */
-    .goal-mstats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); }
-    .mstat strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
-    .member--stat { gap: 12px; }
-    .member__stats { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
-    .member__stats strong { color: var(--ink); font-weight: 600; }
-    .member__stats--pending { color: var(--ink-faint); }
-
-    /* task 1888 — the single Work card: header row with the to-do/completed tab
-       toggle (house .setup__tab pattern), capped tables + pager underneath. */
-    .goal-work__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
-    .goal-work__head .scroll__h { margin: 0; }
-    .goal-work__tabs { margin: 0; }
-    .conflict__sev {
-      display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 8px;
-      border-radius: 999px; font-size: 10.5px; font-weight: 600; vertical-align: 1px;
-      background: var(--surface-2); color: var(--ink-soft);
-    }
-    .conflict__sev--high { background: var(--danger-weak); color: var(--danger); }
-    .conflict__sev--medium { background: var(--warn-weak); color: var(--warn); }
-
-    .crit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
-    .crit { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
-    .crit:last-child { border-bottom: none; }
-    .crit__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint); }
-    .crit--done .crit__mark { background: var(--ok); border-color: var(--ok); color: #fff; }
-    .crit--done .crit__text { color: var(--ink-soft); }
-    /* BV1.R79: per-criterion expand in the capped band — short label, full text on
-       click (matches the Roadmap page's .vbar__crit-d pattern). */
-    .crit-d { min-width: 0; }
-    .crit-d > summary { cursor: pointer; list-style: none; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
-    .crit-d > summary::-webkit-details-marker { display: none; }
-    .crit-d[open] > summary { text-decoration: none; font-weight: 500; }
-    .crit-d .crit__detail { margin-top: 4px; }
-
-    .member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-    .member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
-    .member:last-child { border-bottom: none; }
-    .member__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-weak); color: var(--accent-text); font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
-    .member__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
-    .member__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .member__name small { color: var(--ink-faint); }
-    .role-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-soft); }
-    .role-pill--lead { background: var(--accent-weak); color: var(--accent-text); }
-
-    /* task 1762/1877 — owner/manager invite control (goal member admission). */
-    .goal-invite { margin: 4px 0 10px; }
-    .goal-invite__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-    .goal-invite__form select#goal-invite-builder { flex: 1; min-width: 180px; }
-
-    /* task 1953 — private goals: the lock badge (meta line) + the goal's own
-       pending invite/join-request queue (manager view, next to the invite box). */
-    .goal-badge--locked { background: var(--warn-weak); color: var(--warn); }
-    .goal-pending { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 10px; }
-    .pending-group__h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-faint); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
-    .pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-    .pending-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; flex-wrap: wrap; }
-    .pending-row:last-child { border-bottom: none; }
-    .pending-row__who { font-weight: 600; }
-    .pending-row__note { color: var(--ink-faint); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .pending-row__actions { display: flex; gap: 6px; margin-left: auto; }
-
-    .conflict { border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); background: var(--warn-weak); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin: 10px 0 0; }
-    .conflict__pair { font-weight: 600; }
-    .conflict__paths { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; 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; }
-
-    .goal-filters { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 16px; }
-
-    /* task 1932: paginated goal grid (Per-page dropdown + Prev/Next). .pager /
-       .pager__range / .btn-ghost come from the shared style.css; these extend
-       that pager into a two-sided bar (range left, controls right). */
-    .pager--paged { justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
-    .pager__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-    .pager__perpage { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
-    .pager__perpage select { height: 30px; padding: 2px 8px; font-size: 13px; }
-    .pager__page { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: center; }
-    .pager__nav .pager__btn:disabled { opacity: 0.4; cursor: default; }
-  </style>
+  <!-- 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. -->
+  <link rel="stylesheet" href="/builders/goals.css">
 </head>
 <body data-page="goals" data-page-title="Goals">
 
@@ -196,39 +31,16 @@
         <!-- LIST view -->
         <section id="goals-list-view" aria-labelledby="goals-list-h">
           <h2 id="goals-list-h" class="sr-only">All goals</h2>
-          <div class="goal-filters filters">
-            <label class="filter"><span>Version</span><select id="f-goal-version"><option value="">— any —</option></select></label>
-            <label class="filter"><span>Status</span><select id="f-goal-status">
-              <option value="">— any —</option>
-              <option value="open" selected>open</option>
-              <option value="achieved">achieved</option>
-              <option value="archived">archived</option>
-            </select></label>
-            <!-- task 1828 — filter to the goals you're a member of. -->
-            <label class="filter"><span>Membership</span><select id="f-goal-mine">
-              <option value="">All goals</option>
-              <option value="mine">My goals</option>
-            </select></label>
-            <span class="filter__count" id="goals-count" aria-live="polite"></span>
-          </div>
-          <div class="goal-grid" id="goal-grid"><div class="profile__placeholder">…</div></div>
-          <div class="pager pager--paged" id="goals-pager" hidden>
-            <span class="pager__range" id="goals-range"></span>
-            <div class="pager__nav">
-              <label class="pager__perpage">
-                <span>Per page</span>
-                <select id="goals-per-page" aria-label="Goals per page">
-                  <option value="10">10</option>
-                  <option value="25">25</option>
-                  <option value="50">50</option>
-                  <option value="100">100</option>
-                </select>
-              </label>
-              <button class="btn-ghost pager__btn" type="button" id="goals-prev" aria-label="Previous page">‹ Prev</button>
-              <span class="pager__page" id="goals-page-ind" aria-live="polite"></span>
-              <button class="btn-ghost pager__btn" type="button" id="goals-next" aria-label="Next page">Next ›</button>
-            </div>
-          </div>
+          <!-- 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>
         </section>
 
         <!-- DETAIL view (hash-routed: #/goal/N) -->
@@ -249,13 +61,13 @@
                (three columns; stacks with horizontal dividers when narrow). -->
           <div class="scroll goal-band">
             <div class="goal-band__col">
-              <h2 class="scroll__h" id="goal-completion-h">Completion<span class="goal-count" id="goal-completion-count" hidden></span></h2>
-              <div id="goal-completion-body"><div class="profile__placeholder">…</div></div>
+              <h2 class="scroll__h" id="goal-completion-h">Completion<span class="count-pill" id="goal-completion-count" hidden></span></h2>
+              <div id="goal-completion-body"></div>
               <!-- task 1828 — each column caps its (growing) list + clicks into a full view. -->
               <div class="goal-col__foot" id="goal-completion-foot" hidden></div>
             </div>
             <div class="goal-band__col">
-              <h2 class="scroll__h">Members<span class="goal-count" id="goal-members-count" hidden></span></h2>
+              <h2 class="scroll__h">Members<span class="count-pill" id="goal-members-count" hidden></span></h2>
               <p class="scroll__lede" id="goal-members-lede"></p>
               <div class="goal-invite" id="goal-invite" hidden></div>
               <!-- task 1953 — the goal's own pending invite/join-request queue
@@ -266,9 +78,9 @@
               <div class="goal-col__foot" id="goal-members-foot" hidden></div>
             </div>
             <div class="goal-band__col" id="goal-conflicts-card">
-              <h2 class="scroll__h">Conflicts<span class="goal-count" id="goal-conflicts-count" hidden></span></h2>
+              <h2 class="scroll__h">Conflicts<span class="count-pill" id="goal-conflicts-count" hidden></span></h2>
               <p class="scroll__lede">Open tasks whose declared files overlap — sequence these before two builders collide.</p>
-              <div id="goal-conflicts"><div class="profile__placeholder">…</div></div>
+              <div id="goal-conflicts"></div>
               <!-- task 1828 — replaces the show-all pager: click into a dedicated
                    full-width conflicts view instead of expanding this column. -->
               <div class="goal-col__foot" id="goal-conflicts-foot" hidden></div>
@@ -278,12 +90,12 @@
           <div class="scroll" style="margin-top:20px">
             <div class="goal-work__head">
               <h2 class="scroll__h">Work</h2>
-              <div class="setup__toggle goal-work__tabs" role="tablist" aria-label="Goal tasks">
-                <button class="setup__tab" type="button" role="tab" id="goal-tab-todo" aria-selected="true" aria-controls="goal-todo-pane">To do<span class="goal-count" id="goal-todo-count" hidden></span></button>
-                <button class="setup__tab" type="button" role="tab" id="goal-tab-done" aria-selected="false" aria-controls="goal-done-pane">Completed<span class="goal-count" id="goal-done-count" hidden></span></button>
-              </div>
+              <!-- task 2171: the To do / Completed toggle is built by
+                   OTBKit.makeTabs (hash:false — the #/goal/N sub-route
+                   namespace stays untouched; tabs key off in-page state). -->
+              <div class="goal-work__tabs" id="goal-work-tabs" aria-label="Goal tasks"></div>
             </div>
-            <div id="goal-todo-pane" role="tabpanel" aria-labelledby="goal-tab-todo">
+            <div id="goal-todo-pane" role="tabpanel" aria-labelledby="tab-todo">
               <!-- task 1828 — Kind / Status / Credits headers sort the list (click
                    cycles desc → asc → natural); a ready row carries an inline Claim. -->
               <table class="ledger" id="goal-todo"><thead><tr>
@@ -294,25 +106,9 @@
                 <th aria-label="Actions"></th>
               </tr></thead>
               <tbody><tr><td colspan="6" class="ledger__empty">…</td></tr></tbody></table>
-              <div class="pager pager--paged" id="goal-todo-pager" hidden>
-                <span class="pager__range" id="goal-todo-range"></span>
-                <div class="pager__nav">
-                  <label class="pager__perpage">
-                    <span>Per page</span>
-                    <select id="goal-todo-per-page" aria-label="To-do tasks per page">
-                      <option value="10">10</option>
-                      <option value="25">25</option>
-                      <option value="50">50</option>
-                      <option value="100">100</option>
-                    </select>
-                  </label>
-                  <button class="btn-ghost pager__btn" type="button" id="goal-todo-prev" aria-label="Previous page">‹ Prev</button>
-                  <span class="pager__page" id="goal-todo-page-ind" aria-live="polite"></span>
-                  <button class="btn-ghost pager__btn" type="button" id="goal-todo-next" aria-label="Next page">Next ›</button>
-                </div>
-              </div>
+              <div id="goal-todo-pager-mount"></div>
             </div>
-            <div id="goal-done-pane" role="tabpanel" aria-labelledby="goal-tab-done" hidden>
+            <div id="goal-done-pane" role="tabpanel" aria-labelledby="tab-done" hidden>
               <table class="ledger" id="goal-done"><thead><tr>
                 <th>№</th><th>Task</th>
                 <th class="ledger__sortable" id="goal-done-sort-kind" role="button" tabindex="0" aria-sort="none">Kind</th>
@@ -320,23 +116,7 @@
                 <th class="ledger__sortable" id="goal-done-sort-shipped" role="button" tabindex="0" aria-sort="none">Shipped</th>
               </tr></thead>
               <tbody><tr><td colspan="5" class="ledger__empty">…</td></tr></tbody></table>
-              <div class="pager pager--paged" id="goal-done-pager" hidden>
-                <span class="pager__range" id="goal-done-range"></span>
-                <div class="pager__nav">
-                  <label class="pager__perpage">
-                    <span>Per page</span>
-                    <select id="goal-done-per-page" aria-label="Completed tasks per page">
-                      <option value="10">10</option>
-                      <option value="25">25</option>
-                      <option value="50">50</option>
-                      <option value="100">100</option>
-                    </select>
-                  </label>
-                  <button class="btn-ghost pager__btn" type="button" id="goal-done-prev" aria-label="Previous page">‹ Prev</button>
-                  <span class="pager__page" id="goal-done-page-ind" aria-live="polite"></span>
-                  <button class="btn-ghost pager__btn" type="button" id="goal-done-next" aria-label="Next page">Next ›</button>
-                </div>
-              </div>
+              <div id="goal-done-pager-mount"></div>
             </div>
           </div>
         </section>
@@ -346,9 +126,9 @@
         <section id="goal-conflicts-view" hidden aria-labelledby="goal-conflicts-view-h">
           <p class="card-foot" style="margin:0 0 14px"><a href="#" id="goal-conflicts-back">← Back to goal</a></p>
           <div class="scroll" style="margin:0" id="goal-conflicts-view-card">
-            <h2 class="scroll__h" id="goal-conflicts-view-h">Conflicts<span class="goal-count" id="goal-conflicts-view-count" hidden></span></h2>
+            <h2 class="scroll__h" id="goal-conflicts-view-h">Conflicts<span class="count-pill" id="goal-conflicts-view-count" hidden></span></h2>
             <p class="scroll__lede">Open tasks whose declared files overlap — sequence these before two builders collide.</p>
-            <div id="goal-conflicts-full"><div class="profile__placeholder">…</div></div>
+            <div id="goal-conflicts-full"></div>
           </div>
         </section>
 
@@ -357,10 +137,10 @@
         <section id="goal-members-view" hidden aria-labelledby="goal-members-view-h">
           <p class="card-foot" style="margin:0 0 14px"><a href="#" id="goal-members-back">← Back to goal</a></p>
           <div class="scroll" style="margin:0">
-            <h2 class="scroll__h" id="goal-members-view-h">Members<span class="goal-count" id="goal-members-view-count" hidden></span></h2>
+            <h2 class="scroll__h" id="goal-members-view-h">Members<span class="count-pill" id="goal-members-view-count" hidden></span></h2>
             <p class="scroll__lede">Who’s on this goal, and what they’ve contributed to it.</p>
             <div class="goal-mstats" id="goal-members-stats"></div>
-            <div id="goal-members-full"><div class="profile__placeholder">…</div></div>
+            <div id="goal-members-full"></div>
           </div>
         </section>
 
@@ -371,7 +151,7 @@
           <div class="scroll" style="margin:0">
             <h2 class="scroll__h" id="goal-completion-view-h">Completion</h2>
             <p class="scroll__lede">Every done-when criterion for this goal, with its full detail.</p>
-            <div id="goal-completion-full"><div class="profile__placeholder">…</div></div>
+            <div id="goal-completion-full"></div>
           </div>
         </section>
       </main>
@@ -385,8 +165,10 @@
 
 <script src="/builders/shell.js?v=2026-07-03-goals1"></script>
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
+<!-- shared component kit (window.OTBKit) — pager, filter bar, tabs, empty/skeleton (task 2166). -->
+<script src="/builders/hall-kit.js"></script>
 <script src="/builders/task-detail.js?v=2026-07-03-taskdetail"></script>
 <script src="/builders/brand-apply.js?v=2026-06-27-r75"></script>
-<script src="/builders/goals-page.js?v=2026-07-03-goals4"></script>
+<script src="/builders/goals-page.js?v=2026-07-10-goals5"></script>
 </body>
 </html>

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

@@ -74,14 +74,19 @@
       </li>`;
   }
 
+  // task 2184 (Home rule: a summary card never lists more than 5 rows): cap the
+  // joined-goals list; the overflow count rides the "All goals" foot link.
+  const MAX_HOME_ROWS = 5;
   function render(joined) {
     const body = host.querySelector('#goals-body');
     if (!joined.length) {
       body.innerHTML = '<p class="goal-empty">You haven’t joined any goals yet. <a href="/goals">Browse goals →</a></p>';
       return;
     }
-    body.innerHTML = `<ul class="goal-mine-list">${joined.map(row).join('')}</ul>` +
-      '<p class="goal-mine__foot card-foot"><a href="/goals">All goals →</a></p>';
+    const shown = joined.slice(0, MAX_HOME_ROWS);
+    const more = joined.length - shown.length;
+    body.innerHTML = `<ul class="goal-mine-list">${shown.map(row).join('')}</ul>` +
+      `<p class="goal-mine__foot card-foot"><a href="/goals">${more > 0 ? `All ${joined.length} goals →` : 'All goals →'}</a></p>`;
   }
 
   const SKELETON =