@bongos/core 1.17.2 → 1.18.0

package/modules/hall-ui/public/goal-inbox.js

@@ -1,6 +1,13 @@
-// goal-inbox.js — the home-page, two-sided goal-membership inbox (task 1954, ADR 0112).
+// goal-inbox.js — the Home "Needs your attention" card (task 2169), grown from
+// the two-sided goal-membership inbox (task 1954, ADR 0112).
 //
-// Surfaces the actionable slice of a builder's private-goals queue in ONE place:
+// This card is the SINGLE landing place for actionable items on Home: it owns
+// the section (id 'attention-scroll'), renders the goal-membership slice
+// itself, and hosts the idea-triage slice (#attention-ideas, rendered by
+// builders.js). New actionable item classes join as line-item slices here —
+// never as new Home cards (the anti-accretion rule).
+//
+// The goal slice surfaces a builder's private-goals queue:
 //   • "Invitations to you" — pending invites addressed to me (Accept / Decline).
 //   • "Requests to approve" — pending join-requests on goals I own or manage
 //                             (Approve / Deny).
@@ -81,32 +88,41 @@
     return `<p class="ginbox__pending card-foot">Your pending join ${noun}: ${links} — awaiting approval.</p>`;
   }
 
+  // task 2169: this render fills ONLY the goals slice (#attention-goals) — the
+  // ideas slice (#attention-ideas) belongs to builders.js's triage renderer.
+  // Card visibility + the headline count derive from BOTH via OTBAttention.
+  const MAX_GOAL_ROWS = 5;
   function render(inbox) {
+    const box = host && host.querySelector('#attention-goals');
+    if (!box) return;
     const invitations = inbox.invitations || [];
     const joinRequests = inbox.joinRequests || [];
     const myPending = inbox.myPendingRequests || [];
-    // Hide the whole card when there is nothing to see OR act on.
     if (!invitations.length && !joinRequests.length && !myPending.length) {
-      host.hidden = true;
-      host.innerHTML = '';
+      box.innerHTML = '';
+      window.OTBAttention.refresh();
       return;
     }
-    const actionable = invitations.length + joinRequests.length;
-    let html = `<h2 id="goal-inbox-h" class="scroll__h">Goal inbox${actionable ? `<span class="count-pill">${actionable}</span>` : ''}</h2>`;
-    if (actionable) {
-      html += '<p class="scroll__lede">Invitations and join-requests waiting on you.</p>';
+    // Cap the card at a handful of rows — it is a summary, not the queue.
+    let budget = MAX_GOAL_ROWS;
+    const inv = invitations.slice(0, budget); budget -= inv.length;
+    const reqs = joinRequests.slice(0, Math.max(0, budget));
+    const overflow = (invitations.length - inv.length) + (joinRequests.length - reqs.length);
+    let html = '';
+    if (inv.length) {
+      html += '<h3 class="ginbox__sec-h">Goal invitations to you</h3>';
+      html += `<ul class="ginbox">${inv.map(invitationRow).join('')}</ul>`;
     }
-    if (invitations.length) {
-      html += '<h3 class="ginbox__sec-h">Invitations to you</h3>';
-      html += `<ul class="ginbox">${invitations.map(invitationRow).join('')}</ul>`;
+    if (reqs.length) {
+      html += '<h3 class="ginbox__sec-h">Join-requests to approve</h3>';
+      html += `<ul class="ginbox">${reqs.map(requestRow).join('')}</ul>`;
     }
-    if (joinRequests.length) {
-      html += '<h3 class="ginbox__sec-h">Requests to approve</h3>';
-      html += `<ul class="ginbox">${joinRequests.map(requestRow).join('')}</ul>`;
+    if (overflow > 0) {
+      html += `<p class="ginbox__pending">…and ${overflow} more waiting — <a href="/goals">open your goals</a>.</p>`;
     }
     html += pendingLine(myPending);
-    host.innerHTML = html;
-    host.hidden = false;
+    box.innerHTML = html;
+    window.OTBAttention.refresh();
   }
 
   async function load() {
@@ -115,9 +131,11 @@
       const inbox = await getJSON(`${API}/goals/inbox`);
       render(inbox);
     } catch (err) {
-      // Signed out (401) or an older server without the route (404) → render nothing.
-      host.hidden = true;
-      host.innerHTML = '';
+      // Signed out (401) or an older server without the route (404) → render
+      // nothing in the goals slice; the ideas slice may still have content.
+      const box = host.querySelector('#attention-goals');
+      if (box) box.innerHTML = '';
+      window.OTBAttention.refresh();
       if (err.code !== 'auth-needed' && err.code !== 'not-found') {
         console.error('[hall] goal inbox load failed', err);
       }
@@ -174,18 +192,41 @@
     }
   }
 
+  // task 2169: this widget IS the "Needs your attention" card — ONE capped
+  // summary hosting every actionable item class: goal invitations +
+  // join-requests (this file) and ideas awaiting triage (builders.js renders
+  // into #attention-ideas). Future actionable item classes add a slice div
+  // here + call OTBAttention.refresh() — never a new Home card.
   function mount(hostEl) {
     host = hostEl;
-    host.hidden = true; // stays hidden until load() finds something actionable
+    host.hidden = true; // stays hidden until a slice finds something actionable
+    host.innerHTML =
+      '<h2 id="attention-h" class="scroll__h">Needs your attention<span class="count-pill" id="attention-count" hidden></span></h2>' +
+      '<div id="attention-goals"></div>' +
+      '<div id="attention-ideas"></div>';
     host.addEventListener('click', onClick);
     load();
   }
 
-  // order 24 → sits at the top of the Home main zone (just above the idea-triage
-  // inbox), since it is personal + actionable. hiddenByDefault so an empty inbox
-  // costs nothing until load() un-hides it.
+  // The card's shared visibility contract: any slice renderer calls refresh()
+  // after painting; the card shows iff any slice has actionable rows, and the
+  // headline pill is the cross-slice total.
+  window.OTBAttention = {
+    refresh() {
+      const sec = document.getElementById('attention-scroll');
+      if (!sec) return;
+      const n = sec.querySelectorAll('.ginbox__item, .triage-inbox__item').length;
+      const pending = sec.querySelector('.ginbox__pending');
+      const pill = document.getElementById('attention-count');
+      if (pill) { pill.hidden = !n; pill.textContent = String(n); }
+      sec.hidden = n === 0 && !pending;
+    },
+  };
+
+  // order 20 → the top of the Home main zone: personal + actionable beats
+  // informational. hiddenByDefault so a quiet inbox costs nothing.
   window.OTB.contributeHallWidget({
-    id: 'goal-inbox-scroll', label: 'Goal inbox', order: 24, mount,
-    labelledby: 'goal-inbox-h', view: 'home', zone: 'home-main', hiddenByDefault: true,
+    id: 'attention-scroll', label: 'Needs your attention', order: 20, mount,
+    labelledby: 'attention-h', view: 'home', zone: 'home-main', hiddenByDefault: true,
   });
 })();

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

@@ -23,6 +23,10 @@
 (function () {
   'use strict';
   const { escapeHtml, $, fmtNum, fmtDate, toast, rankLabel } = window.OTB;
+  // Shared component kit (hall-kit.js, task 2166): pager, filter bar, tabs,
+  // empty/skeleton states — adopted here by task 2171.
+  const { makePager, paginate, wirePager, pagerBarHtml, makeTabs, makeFilterBar,
+    emptyStateHtml, skeletonRows } = window.OTBKit;
   const API = '/api/bongos';
   // Generated typed client (task 1996 / R09), served as window.BongosClient by
   // /lib/bongos-client.js. baseUrl:'' passes the full same-origin paths this file
@@ -38,27 +42,15 @@
   // more members, more criteria). Conflicts uses CONFLICT_CAP above.
   const MEMBER_CAP = 5;
   const CRITERIA_CAP = 4;
-  // task 1932 — the Goals LIST (goal-card grid) is paginated with a "Per page"
-  // dropdown. Options + the localStorage key that persists the choice; below
-  // LIST_MIN_PER_PAGE the whole grid fits one page so the bar hides.
-  const LIST_PER_PAGE_OPTIONS = [10, 25, 50, 100];
-  const LIST_MIN_PER_PAGE = LIST_PER_PAGE_OPTIONS[0];
-  const GOALS_PER_PAGE_KEY = 'otb.goals.perPage';
-  function loadGoalsPerPage() {
-    try {
-      const v = Number(window.localStorage.getItem(GOALS_PER_PAGE_KEY));
-      return LIST_PER_PAGE_OPTIONS.includes(v) ? v : 25;
-    } catch (_) { return 25; }
-  }
-  // task 1956 — the goal-detail Work tables (To do / Completed) paginate like the
-  // grid; each reads/persists its own per-page key.
-  const WORK_PER_PAGE_KEY = { todo: 'otb.goals.todoPerPage', done: 'otb.goals.donePerPage' };
-  function loadPerPageFor(key) {
-    try {
-      const v = Number(window.localStorage.getItem(key));
-      return LIST_PER_PAGE_OPTIONS.includes(v) ? v : 25;
-    } catch (_) { return 25; }
-  }
+  // task 1932/1956 → kit (task 2171): the goal-card grid + the goal-detail Work
+  // tables (To do / Completed) all paginate through the shared OTBKit pager.
+  // localStorage keys are unchanged so builders' per-page prefs survive; the bar
+  // markup is stamped into the #…-pager-mount divs at boot via pagerBarHtml.
+  const pagers = {
+    list: makePager('goals', 'otb.goals.perPage'),
+    todo: makePager('goal-todo', 'otb.goals.todoPerPage'),
+    done: makePager('goal-done', 'otb.goals.donePerPage'),
+  };
   // Terminal "deliberately cut" states — neither work-to-do nor done. Excluded
   // from the todo list and the conflict scan the same way migration 017 keeps
   // them out of version_progress ("abandoned is a terminal state (deliberately
@@ -79,7 +71,6 @@
     view: 'list',        // task 1828 — 'list' | 'detail' | 'conflicts'
     inviteOpen: false,   // task 1762 — the invite form's open/closed state
     directory: null,     // task 1877 — GET /builders/directory, fetched once and cached
-    workTab: 'todo',     // task 1888 — active pane in the Work card ('todo' | 'done')
     // task 1828 — per-table column sort. by=null → natural order (todo: server
     // order; done: shipped-desc, applied at load). dir: 'desc' | 'asc'.
     workSort: { todo: { by: null, dir: 'desc' }, done: { by: null, dir: 'desc' } },
@@ -88,12 +79,6 @@
     claimsByTask: new Map(),       // task 1828 — String(task_id) → {claim_id, builder_id, login} (active claims; powers the Release button)
     conflictPairs: null,           // task 1888 — unified pairs (server or client estimate)
     conflictSource: null,          // 'server' | 'client' | null (while loading / on error)
-    listPager: { page: 1, perPage: loadGoalsPerPage() },  // task 1932 — goal-grid pagination
-    // task 1956 — goal-detail Work-table pagination (per table: To do / Completed).
-    workPager: {
-      todo: { page: 1, perPage: loadPerPageFor(WORK_PER_PAGE_KEY.todo) },
-      done: { page: 1, perPage: loadPerPageFor(WORK_PER_PAGE_KEY.done) },
-    },
     // task 1953 — private goals: my own pending join-request on the OPEN goal (row
     // from GET /goals/inbox's myPendingRequests, filtered to this goal), or null.
     myPendingRequest: null,
@@ -204,29 +189,6 @@
       (!mineOnly || iAmMember(g)));
   }
 
-  // task 1932 — the goal grid's pagination bar (range, Per-page <select>,
-  // Prev/Next around "Page X of Y"). Hidden when the whole set fits one page
-  // (total <= LIST_MIN_PER_PAGE); otherwise shown so the per-page control stays
-  // reachable. Pure render from the slice math renderList computed.
-  function renderGoalsPager(total, page, totalPages, start, shownCount) {
-    const pager = $('#goals-pager');
-    if (!pager) return;
-    if (total <= LIST_MIN_PER_PAGE) { pager.hidden = true; return; }
-    pager.hidden = false;
-    const range = $('#goals-range');
-    if (range) range.textContent = total
-      ? `Showing ${start + 1}–${start + shownCount} of ${total}`
-      : 'Showing 0 of 0';
-    const ind = $('#goals-page-ind');
-    if (ind) ind.textContent = `Page ${page} of ${totalPages}`;
-    const prev = $('#goals-prev');
-    if (prev) prev.disabled = page <= 1;
-    const next = $('#goals-next');
-    if (next) next.disabled = page >= totalPages;
-    const sel = $('#goals-per-page');
-    if (sel && sel.value !== String(state.listPager.perPage)) sel.value = String(state.listPager.perPage);
-  }
-
   function renderList() {
     const grid = $('#goal-grid');
     if (!grid) return;
@@ -239,24 +201,20 @@
     if (count) count.textContent = `${rows.length} goal${rows.length === 1 ? '' : 's'}`;
 
     if (!rows.length) {
-      grid.innerHTML = '<div class="profile__placeholder">No goals match these filters.</div>';
-      state.listPager.page = 1;
+      grid.innerHTML = emptyStateHtml('No goals match these filters.');
+      pagers.list.page = 1;
       const emptyPager = $('#goals-pager');
       if (emptyPager) emptyPager.hidden = true;
       return;
     }
 
-    // task 1932 — paginate the grid. Clamp the page (the filtered set may have
-    // shrunk under a re-render), slice to the current page, then paint the bar.
-    // Priority numbers reflect the GLOBAL position (start + i + 1), not the
-    // page-local index, so drag-reorder priorities stay meaningful across pages.
-    const total = rows.length;
-    const perPage = state.listPager.perPage;
-    const totalPages = Math.max(1, Math.ceil(total / perPage));
-    if (state.listPager.page > totalPages) state.listPager.page = totalPages;
-    if (state.listPager.page < 1) state.listPager.page = 1;
-    const start = (state.listPager.page - 1) * perPage;
-    const pageRows = rows.slice(start, start + perPage);
+    // task 1932 → kit (2171): paginate the grid through the shared pager (it
+    // clamps the page — the filtered set may have shrunk under a re-render —
+    // and paints the bar). Priority numbers reflect the GLOBAL position
+    // (start + i + 1), not the page-local index, so drag-reorder priorities
+    // stay meaningful across pages.
+    const pageRows = paginate(rows, pagers.list);
+    const start = (pagers.list.page - 1) * pagers.list.perPage;
     grid.innerHTML = pageRows.map((g, i) => {
       const d = state.details.get(String(g.id));
       const crit = d ? (d.criteria || []) : [];
@@ -276,10 +234,11 @@
       return `<a class="goal-card${blocked ? ' goal-card--blocked' : ''}" href="#/goal/${escapeHtml(String(g.id))}" data-goal-id="${escapeHtml(String(g.id))}"${reorderable ? ' draggable="true"' : ''}>
         <div class="goal-card__head">
           ${handle}${priority}
-          ${d ? ring(sat, crit.length, g.status === 'achieved') : ''}
+          ${d ? ring(sat, crit.length, g.status === 'achieved', 34) : ''}
           <span class="goal-card__title">${escapeHtml(g.title || 'Untitled goal')}</span>
         </div>
         <div class="goal-card__meta">
+          <span class="goal-card__id" title="Goal id — use this to reference the goal (e.g. 'goal ${escapeHtml(String(g.id))}'). Distinct from the priority position on the left.">#${escapeHtml(String(g.id))}</span>
           <span>${escapeHtml(g.version_id || '')}</span>
           ${statusBadge(g.status)}
           ${blockedPill}
@@ -291,7 +250,6 @@
         </div>
       </a>`;
     }).join('');
-    renderGoalsPager(total, state.listPager.page, totalPages, start, pageRows.length);
   }
 
   // ---- drag-to-reorder (task 1760, Archon-only, one version at a time) ------
@@ -331,7 +289,7 @@
       // of the goals on other pages. Priority numbers reflect the global
       // position (start + i + 1).
       const filtered = filteredGoals();
-      const start = (state.listPager.page - 1) * state.listPager.perPage;
+      const start = (pagers.list.page - 1) * pagers.list.perPage;
       const cards = [...grid.querySelectorAll('.goal-card')];
       cards.forEach((card, i) => {
         const num = card.querySelector('.goal-card__priority');
@@ -435,53 +393,12 @@
     el.textContent = String(n);
   }
 
-  // task 1956 — a Work table's pagination bar (range, Per-page <select>, Prev/Next
-  // around "Page X of Y"), keyed by DOM prefix (goal-todo / goal-done). Hidden
-  // when the whole table fits one minimum page.
-  function renderWorkPager(prefix, pager, total, totalPages, start, shownCount) {
-    const bar = $(`#${prefix}-pager`);
-    if (!bar) return;
-    if (total <= LIST_MIN_PER_PAGE) { bar.hidden = true; return; }
-    bar.hidden = false;
-    const range = $(`#${prefix}-range`);
-    if (range) range.textContent = total
-      ? `Showing ${start + 1}–${start + shownCount} of ${total}`
-      : 'Showing 0 of 0';
-    const ind = $(`#${prefix}-page-ind`);
-    if (ind) ind.textContent = `Page ${pager.page} of ${totalPages}`;
-    const prev = $(`#${prefix}-prev`);
-    if (prev) prev.disabled = pager.page <= 1;
-    const next = $(`#${prefix}-next`);
-    if (next) next.disabled = pager.page >= totalPages;
-    const sel = $(`#${prefix}-per-page`);
-    if (sel && sel.value !== String(pager.perPage)) sel.value = String(pager.perPage);
-  }
-
-  // Slice `rows` to a Work table's current page (clamped), paint its bar, return
-  // the slice to render.
-  function paginateWork(rows, pager, prefix) {
-    const total = rows.length;
-    const totalPages = Math.max(1, Math.ceil(total / pager.perPage));
-    if (pager.page > totalPages) pager.page = totalPages;
-    if (pager.page < 1) pager.page = 1;
-    const start = (pager.page - 1) * pager.perPage;
-    const slice = rows.slice(start, start + pager.perPage);
-    renderWorkPager(prefix, pager, total, totalPages, start, slice.length);
-    return slice;
-  }
-
-  // task 1888 — the Work card's To do / Completed tab toggle. Both tables stay
-  // in the DOM (already rendered); switching only flips pane visibility.
-  function setWorkTab(tab) {
-    state.workTab = tab;
-    const isTodo = tab === 'todo';
-    $('#goal-tab-todo')?.setAttribute('aria-selected', String(isTodo));
-    $('#goal-tab-done')?.setAttribute('aria-selected', String(!isTodo));
-    const todoPane = $('#goal-todo-pane');
-    const donePane = $('#goal-done-pane');
-    if (todoPane) todoPane.hidden = !isTodo;
-    if (donePane) donePane.hidden = isTodo;
-  }
+  // task 1888 → kit (2171): the Work card's To do / Completed toggle is an
+  // OTBKit tabs instance (built in wireKit below). hash:false is load-bearing —
+  // this page owns the #/goal/N sub-route namespace, so the tabs key off
+  // in-page state and never touch location.hash.
+  let workTabs = null;
+  function setWorkTab(tab) { workTabs?.activate(tab); }
 
   // task 1828 — sortable column key → header id, per table. Adding a column
   // means an entry here + a matching <th id> in goals.html.
@@ -546,21 +463,21 @@
     const doneBody = document.querySelector('#goal-done tbody');
     const todo = sortWorkRows(state.work.todo, state.workSort.todo);
     const done = sortWorkRows(state.work.done, state.workSort.done);
-    // task 1956 — paginate each table (was ROW_CAP + a show-all toggle).
-    const todoSlice = paginateWork(todo, state.workPager.todo, 'goal-todo');
-    const doneSlice = paginateWork(done, state.workPager.done, 'goal-done');
+    // task 1956 → kit (2171): paginate each table through the shared pager.
+    const todoSlice = paginate(todo, pagers.todo);
+    const doneSlice = paginate(done, pagers.done);
     if (todoBody) {
       todoBody.innerHTML = todo.length
         ? taskRowsTodo(todoSlice)
-        : `<tr><td colspan="6" class="ledger__empty">Nothing queued under this goal. Members can author bounded tasks here${state.me ? '' : ' once signed in'}.</td></tr>`;
+        : `<tr><td colspan="6" class="ledger__empty">${emptyStateHtml(`Nothing queued under this goal. Members can author bounded tasks here${state.me ? '' : ' once signed in'}.`)}</td></tr>`;
     }
     if (doneBody) {
       doneBody.innerHTML = done.length
         ? taskRowsDone(doneSlice)
-        : '<tr><td colspan="5" class="ledger__empty">Nothing completed yet.</td></tr>';
+        : `<tr><td colspan="5" class="ledger__empty">${emptyStateHtml('Nothing completed yet.')}</td></tr>`;
     }
-    setCount('#goal-todo-count', state.work.todo.length);
-    setCount('#goal-done-count', state.work.done.length);
+    workTabs?.setCount('todo', state.work.todo.length);
+    workTabs?.setCount('done', state.work.done.length);
     reflectSortHeaders('todo');
     reflectSortHeaders('done');
   }
@@ -648,7 +565,7 @@
   function fillConflicts(container, pairs) {
     if (!container) return;
     if (pairs == null) {
-      container.innerHTML = '<div class="profile__placeholder">Conflicts could not be computed.</div>';
+      container.innerHTML = emptyStateHtml('Conflicts could not be computed.');
       return;
     }
     const note = state.conflictSource === 'client'
@@ -656,7 +573,7 @@
       : '';
     container.innerHTML = (pairs.length
       ? pairs.map(conflictHtml).join('')
-      : '<div class="profile__placeholder">No conflicts detected among this goal’s open tasks.</div>') + note;
+      : emptyStateHtml('No conflicts detected among this goal’s open tasks.')) + note;
   }
 
   const currentDetail = () => (state.current == null ? null : state.details.get(String(state.current)));
@@ -719,7 +636,7 @@
   // (withDetail=false) instead reveals detail via a per-criterion <details> expand
   // (BV1.R79) so the full text is one click away, not hover-only.
   function critListHtml(list, withDetail) {
-    if (!list.length) return '<div class="profile__placeholder">No done-when criteria yet.</div>';
+    if (!list.length) return emptyStateHtml('No done-when criteria yet.');
     return `<ul class="crit-list${withDetail ? ' crit-list--full' : ''}">${list.map((c) => {
       const parts = window.OTB.splitCriterion ? window.OTB.splitCriterion(c.criterion_md) : { label: c.criterion_md, detail: '' };
       const body = withDetail
@@ -808,7 +725,7 @@
     if (list) {
       list.innerHTML = members.length
         ? members.slice(0, MEMBER_CAP).map(memberLi).join('')
-        : '<li class="member"><span class="profile__placeholder">No members yet — be the first to join.</span></li>';
+        : `<li>${emptyStateHtml('No members yet — be the first to join.')}</li>`;
     }
     renderViewAllFoot('#goal-members-foot', members.length, MEMBER_CAP, 'members', 'members');
     renderMembersFull(d);
@@ -833,14 +750,14 @@
           <span class="mstat"><strong>${fmtNum(earned)}</strong> ${escapeHtml(cur)} earned</span>
           <span class="mstat"><strong>${fmtNum(open)}</strong> open</span>`;
       } else {
-        agg.innerHTML = '<span class="mstat profile__placeholder">Loading this goal’s work…</span>';
+        agg.innerHTML = '<span class="mstat"><span class="kit-skel"></span></span>';
       }
     }
     const full = $('#goal-members-full');
     if (full) {
       full.innerHTML = members.length
         ? `<ul class="member-list">${members.map((m) => memberStatLi(m, stats)).join('')}</ul>`
-        : '<div class="profile__placeholder">No members yet — be the first to join.</div>';
+        : emptyStateHtml('No members yet — be the first to join.');
     }
     const back = $('#goal-members-back');
     if (back && state.current != null) back.setAttribute('href', `#/goal/${state.current}`);
@@ -857,7 +774,9 @@
     const iAmLead = members.some((m) => sameId(m.builder_id, selfId()) && m.role === 'lead');
 
     const h = $('#goal-detail-h');
-    if (h) h.textContent = g.title || 'Untitled goal';
+    // task 2163 — surface the numeric goal id alongside the title (escaped title,
+    // so switching from textContent to innerHTML stays injection-safe).
+    if (h) h.innerHTML = `<span class="goal-detail__id" title="Goal id">#${escapeHtml(String(g.id))}</span> ${escapeHtml(g.title || 'Untitled goal')}`;
     const desc = $('#goal-detail-desc');
     if (desc) desc.textContent = g.description || '';
     const meta = $('#goal-detail-meta');
@@ -1040,7 +959,7 @@
     }
     box.hidden = false;
     if (!state.inviteOpen) {
-      box.innerHTML = '<button class="btn-ghost" id="goal-invite-open" type="button">+ Invite member</button>';
+      box.innerHTML = '<button class="btn-ghost" id="goal-invite-open" type="button">+ Invite</button>';
       $('#goal-invite-open')?.addEventListener('click', async () => {
         state.inviteOpen = true;
         await loadDirectory();
@@ -1205,8 +1124,8 @@
         <span class="pending-row__note">invited — awaiting their response</span>
       </li>`;
     const parts = [];
-    if (requests.length) parts.push(`<div class="pending-group"><h3 class="pending-group__h">Join requests<span class="goal-count">${requests.length}</span></h3><ul class="pending-list">${requests.map(requestLi).join('')}</ul></div>`);
-    if (invites.length) parts.push(`<div class="pending-group"><h3 class="pending-group__h">Pending invitations<span class="goal-count">${invites.length}</span></h3><ul class="pending-list">${invites.map(inviteLi).join('')}</ul></div>`);
+    if (requests.length) parts.push(`<div class="pending-group"><h3 class="pending-group__h">Join requests<span class="count-pill">${requests.length}</span></h3><ul class="pending-list">${requests.map(requestLi).join('')}</ul></div>`);
+    if (invites.length) parts.push(`<div class="pending-group"><h3 class="pending-group__h">Pending invitations<span class="count-pill">${invites.length}</span></h3><ul class="pending-list">${invites.map(inviteLi).join('')}</ul></div>`);
     return parts.join('');
   }
   function renderPendingRequests() {
@@ -1265,10 +1184,9 @@
   // task 1888 — a freshly opened goal starts from the compact defaults: To do
   // tab selected, capped lists, counts hidden until its own data lands.
   function resetWorkUi() {
-    state.workTab = 'todo';
     // task 1956 — a freshly opened goal starts both Work tables on page 1 (per-page persists).
-    state.workPager.todo.page = 1;
-    state.workPager.done.page = 1;
+    pagers.todo.page = 1;
+    pagers.done.page = 1;
     state.workSort = { todo: { by: null, dir: 'desc' }, done: { by: null, dir: 'desc' } };
     state.work = { todo: [], done: [] };
     state.workLoaded = false;
@@ -1282,7 +1200,9 @@
     const pending = $('#goal-pending');
     if (pending) { pending.hidden = true; pending.innerHTML = ''; }
     setWorkTab('todo');
-    ['#goal-todo-count', '#goal-done-count', '#goal-conflicts-count', '#goal-conflicts-view-count',
+    workTabs?.setCount('todo', null);
+    workTabs?.setCount('done', null);
+    ['#goal-conflicts-count', '#goal-conflicts-view-count',
       '#goal-members-count', '#goal-members-view-count', '#goal-completion-count'].forEach((sel) => {
       const el = $(sel);
       if (el) { el.hidden = true; el.textContent = ''; }
@@ -1294,14 +1214,15 @@
     ['#goal-conflicts-card', '#goal-conflicts-view-card'].forEach((sel) => $(sel)?.classList.remove('goal-conflicts-card--live'));
     reflectSortHeaders('todo');
     reflectSortHeaders('done');
+    // Kit shimmer placeholders while the goal's tasks load (was "…" cells).
     const todoBody = document.querySelector('#goal-todo tbody');
     const doneBody = document.querySelector('#goal-done tbody');
-    if (todoBody) todoBody.innerHTML = '<tr><td colspan="6" class="ledger__empty">…</td></tr>';
-    if (doneBody) doneBody.innerHTML = '<tr><td colspan="5" class="ledger__empty">…</td></tr>';
+    if (todoBody) todoBody.innerHTML = skeletonRows(3, 6);
+    if (doneBody) doneBody.innerHTML = skeletonRows(3, 5);
     const conflicts = $('#goal-conflicts');
-    if (conflicts) conflicts.innerHTML = '<div class="profile__placeholder">…</div>';
+    if (conflicts) conflicts.innerHTML = '<span class="kit-skel"></span>';
     const conflictsFull = $('#goal-conflicts-full');
-    if (conflictsFull) conflictsFull.innerHTML = '<div class="profile__placeholder">…</div>';
+    if (conflictsFull) conflictsFull.innerHTML = '<span class="kit-skel"></span>';
   }
 
   // task 1828 — views sharing this page: the list, a goal's detail, and the
@@ -1394,6 +1315,12 @@
   }
 
   async function boot() {
+    // 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('');
+    }
     try {
       state.me = await getJSON(`${API}/me`).catch(() => null);
       // task 1828 — "My goals" needs an identity; disable it when signed out.
@@ -1412,30 +1339,37 @@
       const sub = $('#goals-sub');
       if (sub) sub.textContent = 'Goals could not be loaded. Refresh to try again.';
       const grid = $('#goal-grid');
-      if (grid) grid.innerHTML = '<div class="profile__placeholder">Goals could not be loaded.</div>';
+      if (grid) grid.innerHTML = emptyStateHtml('Goals could not be loaded.');
     }
   }
 
   // task 1932 — any list filter change re-paginates the grid from page 1.
-  const onListFilterChange = () => { state.listPager.page = 1; renderList(); };
-  $('#f-goal-version')?.addEventListener('change', onListFilterChange);
-  $('#f-goal-status')?.addEventListener('change', onListFilterChange);
-  $('#f-goal-mine')?.addEventListener('change', onListFilterChange);  // task 1828 — My goals filter
-  // task 1932 — the goal grid's pagination controls (per-page dropdown + prev/next).
-  $('#goals-per-page')?.addEventListener('change', (e) => {
-    const v = Number(e.target.value);
-    if (!LIST_PER_PAGE_OPTIONS.includes(v)) return;
-    state.listPager.perPage = v;
-    state.listPager.page = 1;
-    try { window.localStorage.setItem(GOALS_PER_PAGE_KEY, String(v)); } catch (_) { /* private mode → in-memory only */ }
-    renderList();
-  });
-  $('#goals-prev')?.addEventListener('click', () => {
-    if (state.listPager.page > 1) { state.listPager.page -= 1; renderList(); }
-  });
-  $('#goals-next')?.addEventListener('click', () => {
-    state.listPager.page += 1; renderList(); // renderList clamps to the last page
+  const onListFilterChange = () => { pagers.list.page = 1; renderList(); };
+  // task 2171 — the list filter bar is a kit filterBar: Version / Status /
+  // Membership, all primary (no overflow needed). Control ids are unchanged
+  // (f-goal-version, f-goal-status, f-goal-mine) so filteredGoals' reads +
+  // populateVersionFilter's dynamic option fill keep working untouched.
+  makeFilterBar({
+    mount: $('#goals-filters'),
+    primary: [
+      { id: 'f-goal-version', label: 'Version', options: [{ value: '', label: '— any —' }] },
+      { id: 'f-goal-status', label: 'Status', value: 'open', options: [{ value: '', label: '— any —' }, 'open', 'achieved', 'archived'] },
+      { id: 'f-goal-mine', label: 'Membership', options: [{ value: '', label: 'All goals' }, { value: 'mine', label: 'My goals' }] },
+    ],
+    onChange: onListFilterChange,
   });
+  // 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 = [
+    ['#goals-pager-mount', pagers.list, 'Goals', renderList],
+    ['#goal-todo-pager-mount', pagers.todo, 'To-do tasks', renderWork],
+    ['#goal-done-pager-mount', pagers.done, 'Completed tasks', renderWork],
+  ];
+  for (const [sel, pager, label, rerender] of pagerMounts) {
+    const mount = $(sel);
+    if (mount) mount.innerHTML = pagerBarHtml(pager.prefix, { label });
+    wirePager(pager, rerender);
+  }
   $('#goal-back')?.addEventListener('click', (e) => { e.preventDefault(); window.location.hash = ''; });
   // task 1828 — "← Back to goal" from any of the full views.
   ['#goal-conflicts-back', '#goal-members-back', '#goal-completion-back'].forEach((sel) => {
@@ -1444,25 +1378,16 @@
       if (state.current != null) window.location.hash = `#/goal/${state.current}`;
     });
   });
-  // task 1888 — the Work card's tab toggle.
-  $('#goal-tab-todo')?.addEventListener('click', () => setWorkTab('todo'));
-  $('#goal-tab-done')?.addEventListener('click', () => setWorkTab('done'));
-  // task 1956 — pagination controls for each Work table (per-page dropdown + prev/next).
-  [['goal-todo', 'todo'], ['goal-done', 'done']].forEach(([prefix, key]) => {
-    $(`#${prefix}-per-page`)?.addEventListener('change', (e) => {
-      const v = Number(e.target.value);
-      if (!LIST_PER_PAGE_OPTIONS.includes(v)) return;
-      state.workPager[key].perPage = v;
-      state.workPager[key].page = 1;
-      try { window.localStorage.setItem(WORK_PER_PAGE_KEY[key], String(v)); } catch (_) { /* private mode → in-memory only */ }
-      renderWork();
-    });
-    $(`#${prefix}-prev`)?.addEventListener('click', () => {
-      if (state.workPager[key].page > 1) { state.workPager[key].page -= 1; renderWork(); }
-    });
-    $(`#${prefix}-next`)?.addEventListener('click', () => {
-      state.workPager[key].page += 1; renderWork(); // renderWork clamps to the last page
-    });
+  // task 1888 → kit (2171): the Work card's tab toggle. hash:false is
+  // load-bearing — this page owns the #/goal/N sub-route namespace, so the
+  // tabs key off in-page state and never touch location.hash.
+  workTabs = makeTabs({
+    mount: $('#goal-work-tabs'),
+    hash: false,
+    tabs: [
+      { id: 'todo', label: 'To do', panel: 'goal-todo-pane' },
+      { id: 'done', label: 'Completed', panel: 'goal-done-pane' },
+    ],
   });
   // task 1828 — click / keyboard sort on the Work-table column headers.
   Object.entries(WORK_SORT_HEADERS).forEach(([table, cols]) => {