@bongos/core 1.17.3 → 1.18.0

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,7 +234,7 @@
       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">
@@ -292,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) ------
@@ -332,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');
@@ -436,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.
@@ -547,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');
   }
@@ -649,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'
@@ -657,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)));
@@ -720,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
@@ -809,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);
@@ -834,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}`);
@@ -1043,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();
@@ -1208,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() {
@@ -1268,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;
@@ -1285,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 = ''; }
@@ -1297,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
@@ -1397,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.
@@ -1415,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) => {
@@ -1447,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]) => {