@bongos/core 1.17.0

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

@@ -0,0 +1,1297 @@
+// goals-page.js — the dedicated Goals page (task 1734, owner request from the
+// task-1723 review): list every goal, then per-goal detail — completion card,
+// members with lead (manager) roles, work to do vs completed, and a conflicts
+// panel. Hash-routed (#/goal/N) inside one page; the server gate is
+// SIGNEDIN_BUILDERS_PAGE_RE in serve-internal.js.
+//
+// task 1888 — compact detail layout: the conflicts panel lives in the top band
+// (Completion | Members | Conflicts) so a long work list can't bury it, and the
+// two task tables share one Work card behind a To do / Completed tab toggle,
+// each capped at ROW_CAP rows with a show-all pager.
+//
+// Reads: GET /goals, GET /goals/:id (members carry builder identity since task
+// 1734's listGoalMembers enrichment), GET /tasks?goal_id=N, GET /goals/:id/conflicts
+// (feature-detected — the server-side detector is task 1736; until it lands the
+// panel computes a client-side exact-path overlap of declared touches[]),
+// GET /builders/directory (task 1877 — every active builder, for the invite
+// dropdown; supersedes task 1762's GET /leaderboard lookup, which was bounded
+// to the top-100-by-credits window).
+// Writes: POST /goals/:id/join | /leave | /members (task 1762 — owner/manager
+// invite, mirrors the server's authorizeGoalManagement gate; task 1877 picks
+// the invitee from a dropdown instead of typing a GitHub login). Lead role
+// management is task 1735.
+(function () {
+  'use strict';
+  const { escapeHtml, $, fmtNum, fmtDate, toast, rankLabel } = window.OTB;
+  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
+  // builds through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+
+  const DONE_STATUSES = new Set(['completed', 'confirmed', 'shipped']);
+  // task 1888 — the Work tables and the conflicts list render capped; the pager
+  // under each expands to the full set.
+  const CONFLICT_CAP = 3;
+  // task 1828 — the band's Completion / Members / Conflicts columns each cap
+  // their list and offer a "View all →" into a dedicated full view (these grow:
+  // 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; }
+  }
+  // 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
+  // cut), not pending work"). Without this, an abandoned task shows up under a
+  // goal's "Work to do" as if it were still queued.
+  const CUT_STATUSES = new Set(['abandoned', 'dropped']);
+  // Genuinely-open work under a goal: not done, not cut → {backlog, ready,
+  // active, blocked}.
+  const isTodoStatus = (s) => !DONE_STATUSES.has(s) && !CUT_STATUSES.has(s);
+  // Record deep-links (#/task|idea|blocker/N) are owned by the shared overlay
+  // (task-detail.js). This page must NOT treat them as a route change (Bug 2).
+  const DEEPLINK_RE = /^#\/(?:task|idea|blocker)\/\d+$/;
+  const state = {
+    me: null,
+    goals: [],           // list rows
+    details: new Map(),  // goal_id -> {goal, members, criteria}
+    current: null,       // open goal id (detail/conflicts view) or null (list)
+    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' } },
+    work: { todo: [], done: [] },  // task 1888 — the open goal's tasks, split once on load
+    workLoaded: false,             // task 1828 — tasks fetched? (gates member stats)
+    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) },
+    },
+  };
+
+  async function getJSON(path) {
+    const res = await api.request('GET', path);
+    if (res.status === 401) {
+      window.location.assign(`${API}/auth/web/start?return=${encodeURIComponent(window.location.pathname + window.location.hash)}`);
+      throw new Error('redirecting to auth');
+    }
+    const data = res.data || {};
+    if (!res.ok) { const e = new Error(`${path} → ${res.status}`); e.status = res.status; e.data = data; throw e; }
+    return data;
+  }
+  async function postJSON(path, body) {
+    const res = await api.request('POST', path, { body: body || {} });
+    const data = res.data || {};
+    if (!res.ok) { const e = new Error(`${path} → ${res.status}`); e.status = res.status; e.data = data; throw e; }
+    return data;
+  }
+
+  const curLabel = () => window.OTBBranding?.currencyLabel?.() ?? 'credits';
+  // task 1957 — a task's drachmae is an ESTIMATE until it SETTLES (confirmed/
+  // shipped); after that the ledger figure (credits_awarded) is the real payout.
+  // The goal's Done tab groups 'completed' (unsettled, credits not yet landed)
+  // alongside confirmed/shipped, so per-row settle-awareness is required. Local
+  // wrappers with a defensive fallback for the (hall-wide) brand-apply helpers.
+  const taskSettled = (t) => window.OTBBranding?.taskSettled?.(t) ?? (!!t && (t.status === 'confirmed' || t.status === 'shipped'));
+  const creditVal = (t) => Number(window.OTBBranding?.taskCreditValue?.(t) ?? t?.credits_reward) || 0;
+  const selfId = () => state.me?.builder?.id ?? null;
+  const sameId = (a, b) => a != null && b != null && String(a) === String(b);
+
+  function statusBadge(status) {
+    const cls = status === 'achieved' ? 'goal-badge--achieved'
+      : (status === 'archived' ? 'goal-badge--archived' : 'goal-badge--open');
+    return `<span class="goal-badge ${cls}">${escapeHtml(status)}</span>`;
+  }
+
+  function ring(satisfied, total, achieved, size = 42) {
+    const pct = total > 0 ? satisfied / total : (achieved ? 1 : 0);
+    const r = 16;
+    const circ = 2 * Math.PI * r;
+    const dash = (pct * circ).toFixed(1);
+    const gap = (circ - pct * circ).toFixed(1);
+    const stroke = achieved ? 'var(--ok)' : 'var(--accent)';
+    return `<svg class="goal-ring" width="${size}" height="${size}" viewBox="0 0 42 42" role="img" aria-label="${satisfied} of ${total} criteria satisfied">
+        <circle cx="21" cy="21" r="${r}" fill="none" stroke="var(--rule-soft)" stroke-width="4"></circle>
+        <circle cx="21" cy="21" r="${r}" fill="none" stroke="${stroke}" stroke-width="4" stroke-linecap="round" stroke-dasharray="${dash} ${gap}" transform="rotate(-90 21 21)"></circle>
+        <text x="21" y="25" text-anchor="middle" class="goal-ring__label">${satisfied}/${total}</text>
+      </svg>`;
+  }
+
+  function memberName(m) {
+    return m.display_name || (m.github_login ? `@${m.github_login}` : `builder #${m.builder_id}`);
+  }
+
+  /* ---------------- list view ---------------- */
+
+  function populateVersionFilter() {
+    const sel = $('#f-goal-version');
+    if (!sel) return;
+    const seen = new Set();
+    for (const g of state.goals) {
+      if (g.version_id && !seen.has(g.version_id)) {
+        seen.add(g.version_id);
+        const opt = document.createElement('option');
+        opt.value = g.version_id;
+        opt.textContent = g.version_id;
+        sel.appendChild(opt);
+      }
+    }
+  }
+
+  // task 1760 — priority is a WITHIN-version ordering, so the drag affordance
+  // only makes sense once the grid is narrowed to exactly one version (the
+  // "any" filter mixes versions and dragging across them would be meaningless).
+  // Priority is always visible in that state; only an Archon gets the handle —
+  // the server-side rank gate on POST /goals/reorder is the real enforcement.
+  const isArchon = () => (state.me?.builder?.rank || '').toLowerCase() === 'archon';
+
+  // task 1932 — the current filtered goal set, in display order. Shared by
+  // renderList (what to page) and the drag-reorder dragend (which must submit
+  // the FULL version order, not just the visible page).
+  function filteredGoals() {
+    const ver = $('#f-goal-version')?.value || '';
+    const status = $('#f-goal-status')?.value || '';
+    const mineOnly = $('#f-goal-mine')?.value === 'mine';
+    const myId = selfId();
+    const iAmMember = (g) => {
+      const d = state.details.get(String(g.id));
+      return d ? (d.members || []).some((m) => sameId(m.builder_id, myId)) : false;
+    };
+    return state.goals.filter((g) =>
+      (!ver || g.version_id === ver) &&
+      (!status || g.status === status) &&
+      (!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;
+    const ver = $('#f-goal-version')?.value || '';
+    // task 1932 — filter via the shared helper (drag-reorder reuses it).
+    const rows = filteredGoals();
+    const reorderable = !!ver && isArchon();
+
+    const count = $('#goals-count');
+    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;
+      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);
+    grid.innerHTML = pageRows.map((g, i) => {
+      const d = state.details.get(String(g.id));
+      const crit = d ? (d.criteria || []) : [];
+      const sat = crit.filter((c) => c.satisfied).length;
+      const members = d ? (d.members || []) : [];
+      const leads = members.filter((m) => m.role === 'lead');
+      const joined = members.some((m) => sameId(m.builder_id, selfId()));
+      // task 1761: an open goal blocked by a not-yet-achieved prerequisite goal is
+      // greyed + flagged; the tooltip names what it waits on.
+      const unmetDeps = (d ? (d.dependencies || []) : []).filter((dep) => !dep.satisfied);
+      const blocked = g.status === 'open' && unmetDeps.length > 0;
+      const blockedPill = blocked
+        ? `<span class="goal-badge goal-badge--blocked" title="Waiting on: ${escapeHtml(unmetDeps.map((u) => u.title || ('goal ' + u.id)).join(', '))}">🔒 blocked</span>`
+        : '';
+      const priority = ver ? `<span class="goal-card__priority" title="Priority within ${escapeHtml(ver)}">${start + i + 1}</span>` : '';
+      const handle = reorderable ? `<span class="goal-card__handle" draggable="true" title="Drag to reprioritize" aria-hidden="true">⠿</span>` : '';
+      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') : ''}
+          <span class="goal-card__title">${escapeHtml(g.title || 'Untitled goal')}</span>
+        </div>
+        <div class="goal-card__meta">
+          <span>${escapeHtml(g.version_id || '')}</span>
+          ${statusBadge(g.status)}
+          ${blockedPill}
+          ${joined ? '<span class="role-pill">joined</span>' : ''}
+        </div>
+        <div class="goal-card__foot">
+          <span><strong>${members.length}</strong> member${members.length === 1 ? '' : 's'}</span>
+          ${leads.length ? `<span>lead: ${escapeHtml(leads.map(memberName).join(', '))}</span>` : ''}
+        </div>
+      </a>`;
+    }).join('');
+    renderGoalsPager(total, state.listPager.page, totalPages, start, pageRows.length);
+  }
+
+  // ---- drag-to-reorder (task 1760, Archon-only, one version at a time) ------
+  let dragEl = null;
+
+  function wireDragReorder() {
+    const grid = $('#goal-grid');
+    if (!grid) return;
+    grid.addEventListener('dragstart', (e) => {
+      const el = e.target.closest('.goal-card');
+      if (!el || !el.hasAttribute('draggable')) return;
+      dragEl = el;
+      el.classList.add('goal-card--dragging');
+      e.dataTransfer.effectAllowed = 'move';
+    });
+    grid.addEventListener('dragover', (e) => {
+      if (!dragEl) return;
+      const over = e.target.closest('.goal-card');
+      if (!over || over === dragEl || !grid.contains(over)) return;
+      e.preventDefault();
+      const rect = over.getBoundingClientRect();
+      const after = (e.clientX - rect.left) > rect.width / 2;
+      grid.insertBefore(dragEl, after ? over.nextSibling : over);
+    });
+    grid.addEventListener('drop', (e) => { if (dragEl) e.preventDefault(); });
+    grid.addEventListener('dragend', async () => {
+      if (!dragEl) return;
+      const el = dragEl;
+      el.classList.remove('goal-card--dragging');
+      dragEl = null;
+      const ver = $('#f-goal-version')?.value || '';
+      if (!ver) return;
+      // task 1932 — with pagination the grid shows only the current PAGE, so the
+      // reorder must submit the FULL version order: the goals before this page +
+      // the page's cards in their new DOM order + the goals after it. Without
+      // this, POSTing only the visible page's ids would corrupt the priorities
+      // 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 cards = [...grid.querySelectorAll('.goal-card')];
+      cards.forEach((card, i) => {
+        const num = card.querySelector('.goal-card__priority');
+        if (num) num.textContent = String(start + i + 1);
+      });
+      const pageIds = cards.map((card) => Number(card.dataset.goalId));
+      const beforeIds = filtered.slice(0, start).map((g) => Number(g.id));
+      const afterIds = filtered.slice(start + pageIds.length).map((g) => Number(g.id));
+      const orderedIds = [...beforeIds, ...pageIds, ...afterIds];
+      try {
+        await postJSON(`${API}/goals/reorder`, { version_id: ver, ordered_ids: orderedIds });
+        toast('Priority order saved.');
+      } catch (err) {
+        toast((err && err.data && err.data.message) || 'Could not save the new order — reloading.');
+        state.goals = (await getJSON(`${API}/goals`).catch(() => ({ goals: state.goals }))).goals || state.goals;
+        renderList();
+      }
+    });
+  }
+
+  /* ---------------- detail view ---------------- */
+
+  // task 1828 — the row's inline action, mirroring the Work Board:
+  //   ready              → Claim   (POST /claims via doGoalClaim)
+  //   active + mine      → Release (POST /claims/:id/resolve via doGoalRelease)
+  //   active + someone's → a muted "claimed · @who" (release is owner-only)
+  // Signed-out or any other status → empty. The row still opens the overlay on click.
+  function actionCell(t) {
+    if (!state.me) return '<td class="ledger__action"></td>';
+    const id = escapeHtml(String(t.id));
+    if (t.status === 'ready') {
+      return `<td class="ledger__action"><button class="goal-claim-btn" type="button" data-claim-task="${id}" aria-label="Claim task ${id}">Claim</button></td>`;
+    }
+    if (t.status === 'active') {
+      const c = state.claimsByTask.get(String(t.id));
+      if (c && sameId(c.builder_id, selfId())) {
+        return `<td class="ledger__action"><button class="goal-release-btn" type="button" data-release-claim="${escapeHtml(String(c.claim_id))}" data-release-task="${id}" aria-label="Release task ${id}">Release</button></td>`;
+      }
+      const who = c && (c.login || c.name) ? ` · @${escapeHtml(c.login || c.name)}` : '';
+      return `<td class="ledger__action"><span class="ledger__claimed" title="Claimed by another builder">claimed${who}</span></td>`;
+    }
+    return '<td class="ledger__action"></td>';
+  }
+  function taskRowsTodo(tasks) {
+    return tasks.map((t) => `
+      <tr class="ledger__row--task" data-task-id="${escapeHtml(String(t.id))}" style="cursor:pointer" title="Open task #${escapeHtml(String(t.id))}">
+        <td class="ledger__num">#${escapeHtml(String(t.id))}</td>
+        <td>${escapeHtml(t.title || '')}</td>
+        <td>${escapeHtml(t.kind || '—')}</td>
+        <td><span class="task__tag">${escapeHtml(t.status || '')}</span></td>
+        <td class="ledger__drachmae">${fmtNum(creditVal(t))}</td>
+        ${actionCell(t)}
+      </tr>`).join('');
+  }
+  function taskRowsDone(tasks) {
+    return tasks.map((t) => `
+      <tr class="ledger__row--task" data-task-id="${escapeHtml(String(t.id))}" style="cursor:pointer" title="Open task #${escapeHtml(String(t.id))}">
+        <td class="ledger__num">#${escapeHtml(String(t.id))}</td>
+        <td>${escapeHtml(t.title || '')}</td>
+        <td>${escapeHtml(t.kind || '—')}</td>
+        <td class="ledger__drachmae">${fmtNum(creditVal(t))}${taskSettled(t) ? '' : ' <span class="ledger__est" title="Estimate — credits settle when the task is confirmed">est.</span>'}</td>
+        <td class="ledger__date">${fmtDate(t.shipped_at)}</td>
+      </tr>`).join('');
+  }
+
+  // Client-side conflict estimate: exact/prefix overlap between the declared
+  // touches[] of not-yet-done tasks. Deliberately conservative — the glob-aware
+  // server-side detector (with claim collisions) is task 1736; when
+  // GET /goals/:id/conflicts exists this panel prefers it.
+  function pathOverlap(a, b) {
+    const norm = (p) => String(p).replace(/\/?\*+$/, '').replace(/\/+$/, '');
+    const hits = [];
+    for (const pa of a) {
+      for (const pb of b) {
+        const na = norm(pa); const nb = norm(pb);
+        if (!na || !nb) continue;
+        if (na === nb || na.startsWith(nb + '/') || nb.startsWith(na + '/')) {
+          hits.push(na.length >= nb.length ? na : nb);
+        }
+      }
+    }
+    return [...new Set(hits)];
+  }
+  function computeConflicts(tasks) {
+    const open = tasks.filter((t) => isTodoStatus(t.status) && Array.isArray(t.touches) && t.touches.length);
+    const out = [];
+    for (let i = 0; i < open.length; i++) {
+      for (let j = i + 1; j < open.length; j++) {
+        const paths = pathOverlap(open[i].touches, open[j].touches);
+        if (paths.length) out.push({ a: open[i], b: open[j], paths });
+      }
+    }
+    return out;
+  }
+
+  // task 1888 — count pill helper (card headers + Work tabs).
+  function setCount(sel, n) {
+    const el = $(sel);
+    if (!el) return;
+    el.hidden = false;
+    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 1828 — sortable column key → header id, per table. Adding a column
+  // means an entry here + a matching <th id> in goals.html.
+  const WORK_SORT_HEADERS = {
+    todo: { kind: 'goal-todo-sort-kind', status: 'goal-todo-sort-status', credits: 'goal-todo-sort-credits' },
+    done: { kind: 'goal-done-sort-kind', credits: 'goal-done-sort-credits', shipped: 'goal-done-sort-shipped' },
+  };
+
+  // Stable sort by the active column; null `by` returns the natural order
+  // untouched (todo: server order; done: shipped-desc from load).
+  function sortWorkRows(rows, sort) {
+    if (!sort || !sort.by) return rows.slice();
+    const dir = sort.dir === 'asc' ? 1 : -1;
+    const val = (t) => {
+      switch (sort.by) {
+        case 'kind': return String(t.kind || '').toLowerCase();
+        case 'status': return String(t.status || '').toLowerCase();
+        case 'credits': return creditVal(t);
+        case 'shipped': return new Date(t.shipped_at || 0).getTime();
+        default: return 0;
+      }
+    };
+    return rows
+      .map((row, idx) => ({ row, idx }))
+      .sort((a, b) => {
+        const av = val(a.row); const bv = val(b.row);
+        const diff = (typeof av === 'number')
+          ? (av - bv) * dir
+          : String(av).localeCompare(String(bv)) * dir;
+        return diff !== 0 ? diff : a.idx - b.idx;  // stable tiebreak
+      })
+      .map(({ row }) => row);
+  }
+
+  // Reflect the active sort on that table's headers (only the active column
+  // shows an arrow; the rest reset to "none" — the ARIA-sort contract).
+  function reflectSortHeaders(table) {
+    const sort = state.workSort[table];
+    for (const [key, id] of Object.entries(WORK_SORT_HEADERS[table])) {
+      const th = document.getElementById(id);
+      if (!th) continue;
+      th.setAttribute('aria-sort',
+        sort.by === key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none');
+    }
+  }
+
+  // Cycle a column: pick → desc → asc → natural (clear). Mirrors the
+  // leaderboard's three-click-clears behaviour so there's no dead state.
+  function onWorkSortClick(table, key) {
+    const sort = state.workSort[table];
+    if (sort.by === key) {
+      if (sort.dir === 'desc') sort.dir = 'asc';
+      else { sort.by = null; sort.dir = 'desc'; }
+    } else {
+      sort.by = key; sort.dir = 'desc';
+    }
+    renderWork();
+  }
+
+  function renderWork() {
+    const todoBody = document.querySelector('#goal-todo tbody');
+    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');
+    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>`;
+    }
+    if (doneBody) {
+      doneBody.innerHTML = done.length
+        ? taskRowsDone(doneSlice)
+        : '<tr><td colspan="5" class="ledger__empty">Nothing completed yet.</td></tr>';
+    }
+    setCount('#goal-todo-count', state.work.todo.length);
+    setCount('#goal-done-count', state.work.done.length);
+    reflectSortHeaders('todo');
+    reflectSortHeaders('done');
+  }
+
+  // task 1828 — claim a ready task straight from a goal's Work list. Mirrors the
+  // Work Board's doClaim (POST /claims, bind_session:false) + its typed-error
+  // messages; on success the goal's tasks reload so the row updates in place.
+  const pendingClaims = new Set();
+  function friendlyClaimError(status, data) {
+    switch (data && data.error) {
+      case 'ALREADY_CLAIMED': return 'Someone else claimed that task first. Reloading.';
+      case 'TASK_NOT_READY': return 'That task is no longer ready to be claimed.';
+      case 'TOUCHES_CONFLICT': {
+        const titles = Array.isArray(data.conflicts) ? data.conflicts.map((c) => c.title).filter(Boolean) : [];
+        return titles.length ? `That task overlaps an active claim: ${titles.join('; ')}.` : 'That task overlaps another active claim.';
+      }
+      case 'DEPS_NOT_SHIPPED': return 'That task waits on unshipped dependencies.';
+      case 'rank_too_low_for_task':
+      case 'XENOS_RESTRICTED':
+      case 'INSUFFICIENT_RANK': return 'Your rank is not yet high enough for that task.';
+      case 'newcomer_must_ship_first': return data.what_to_do || 'Ship your current claim before opening another.';
+      case 'NOT_YOUR_CLAIM': return 'That claim is not yours to release.';
+      case 'ALREADY_RESOLVED': return 'That claim was already resolved. Reloading.';
+      case 'BUILDER_INACTIVE': return 'Your account is inactive. Contact an Archon.';
+      default: return `The board could not do that (${status}). Try again.`;
+    }
+  }
+  async function doGoalClaim(taskId, btn) {
+    const key = `claim:${taskId}`;
+    if (pendingClaims.has(key)) return;
+    pendingClaims.add(key);
+    if (btn) { btn.disabled = true; btn.textContent = 'Claiming…'; }
+    try {
+      // bind_session:false — a web claim has no working session (matches the
+      // Work Board), so the builder can ship it later from any terminal.
+      await postJSON(`${API}/claims`, { task_id: Number(taskId), bind_session: false });
+      toast(`You claimed #${taskId}. Open a terminal to start work.`);
+      if (state.current != null) await loadGoalTasks(state.current);
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      toast(friendlyClaimError(err.status, err.data));
+      if (btn) { btn.disabled = false; btn.textContent = 'Claim'; }
+    } finally {
+      pendingClaims.delete(key);
+    }
+  }
+
+  // task 1828 — release an active claim from the goal's Work list. Mirrors the
+  // Work Board's doRelease: confirm, POST /claims/:id/resolve {abandoned} (there
+  // is no DELETE /claims/:id), owner-scoped server-side (NOT_YOUR_CLAIM). On
+  // success the task returns to 'ready' and the row reloads.
+  async function doGoalRelease(claimId, taskId, btn) {
+    const key = `release:${claimId}`;
+    if (pendingClaims.has(key)) return;
+    if (!window.confirm(`Release your claim on #${taskId}? It returns to the queue and no ${curLabel()} are earned.`)) return;
+    pendingClaims.add(key);
+    if (btn) { btn.disabled = true; btn.textContent = 'Releasing…'; }
+    try {
+      await postJSON(`${API}/claims/${encodeURIComponent(claimId)}/resolve`, { outcome: 'abandoned' });
+      toast(`Released #${taskId}. It returns to the queue.`);
+      if (state.current != null) await loadGoalTasks(state.current);
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      toast(friendlyClaimError(err.status, err.data));
+      if (btn) { btn.disabled = false; btn.textContent = 'Release'; }
+    } finally {
+      pendingClaims.delete(key);
+    }
+  }
+
+  function conflictHtml(c) {
+    const sev = c.severity
+      ? `<span class="conflict__sev conflict__sev--${escapeHtml(c.severity)}">${escapeHtml(c.severity)}</span>`
+      : '';
+    const cross = c.crossGoalTitle ? ` <small>(with ${escapeHtml(c.crossGoalTitle)})</small>` : '';
+    return `<div class="conflict">
+      <div class="conflict__pair">#${escapeHtml(String(c.a))} ${escapeHtml(c.titleA || '')} ↔ #${escapeHtml(String(c.b))} ${escapeHtml(c.titleB || '')}${cross}${sev}</div>
+      <div class="conflict__paths">${(c.paths || []).map(escapeHtml).join(' · ')}</div>
+    </div>`;
+  }
+
+  // task 1888/1828 — renders from state.conflictPairs (unified server/client
+  // shape: {a, b, titleA, titleB, paths, severity, crossGoalTitle}); null means
+  // the load failed. Fills a container with the given pairs, or a placeholder.
+  function fillConflicts(container, pairs) {
+    if (!container) return;
+    if (pairs == null) {
+      container.innerHTML = '<div class="profile__placeholder">Conflicts could not be computed.</div>';
+      return;
+    }
+    const note = state.conflictSource === 'client'
+      ? '<p class="conflict-note">Path-based estimate from declared files. Glob-aware detection with claim collisions — and lead resolution actions (sequencing, rescoping) — light up when the server-side detector lands (tasks 1735/1736).</p>'
+      : '';
+    container.innerHTML = (pairs.length
+      ? pairs.map(conflictHtml).join('')
+      : '<div class="profile__placeholder">No conflicts detected among this goal’s open tasks.</div>') + note;
+  }
+
+  const currentDetail = () => (state.current == null ? null : state.details.get(String(state.current)));
+
+  // task 1828 — a band column shows the first `cap` of a growing list; when
+  // there's more, this foot offers "View all N <label> →" into the dedicated
+  // full view at #/goal/N/<view> (the shared pattern behind Conflicts, Members,
+  // and Completion). Hidden when nothing is truncated.
+  function renderViewAllFoot(footSel, total, cap, view, label) {
+    const foot = $(footSel);
+    if (!foot) return;
+    if (total > cap && state.current != null) {
+      foot.hidden = false;
+      foot.innerHTML = `<a class="pill-link" href="#/goal/${escapeHtml(String(state.current))}/${view}">View all ${total} ${label} →</a>`;
+    } else {
+      foot.hidden = true;
+      foot.innerHTML = '';
+    }
+  }
+
+  // task 1828 — the band column shows the first CONFLICT_CAP; the foot routes
+  // to the dedicated full-width conflicts view. Count + amber accent on the card.
+  function renderConflicts() {
+    const pairs = state.conflictPairs;
+    const card = $('#goal-conflicts-card');
+    fillConflicts($('#goal-conflicts'), pairs == null ? null : pairs.slice(0, CONFLICT_CAP));
+    const total = pairs ? pairs.length : 0;
+    renderViewAllFoot('#goal-conflicts-foot', total, CONFLICT_CAP, 'conflicts', 'conflicts');
+    setCount('#goal-conflicts-count', total);
+    card?.classList.toggle('goal-conflicts-card--live', total > 0);
+    renderConflictsFull();
+  }
+
+  // task 1828 — the standalone #/goal/N/conflicts view: the whole set, no cap.
+  function renderConflictsFull() {
+    const pairs = state.conflictPairs;
+    const total = pairs ? pairs.length : 0;
+    fillConflicts($('#goal-conflicts-full'), pairs);
+    setCount('#goal-conflicts-view-count', total);
+    $('#goal-conflicts-view-card')?.classList.toggle('goal-conflicts-card--live', total > 0);
+    const back = $('#goal-conflicts-back');
+    if (back && state.current != null) back.setAttribute('href', `#/goal/${state.current}`);
+  }
+
+  /* ----- Completion (band column + #/goal/N/completion full view) ----- */
+
+  function completionSummaryHtml(g, crit, sat, ringSize) {
+    const line = g.status === 'achieved' ? 'Goal achieved — every criterion confirmed.'
+      : (g.status === 'archived' ? 'Archived.' : 'Open — satisfied criteria await confirmation in /goal-review.');
+    return `<div style="display:flex;align-items:center;gap:16px">
+        ${ring(sat, crit.length, g.status === 'achieved', ringSize)}
+        <div>
+          <div style="font-weight:650">${sat} of ${crit.length} criteria satisfied</div>
+          <div style="font-size:12.5px;color:var(--ink-faint)">${line}</div>
+        </div>
+      </div>`;
+  }
+  // withDetail shows each criterion's full detail always inline — the extra room
+  // is the point of clicking into the dedicated completion view. The capped band
+  // (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>';
+    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
+        ? `<div class="crit__col"><span class="crit__text">${escapeHtml(parts.label || '')}</span>${parts.detail ? `<span class="crit__detail">${escapeHtml(parts.detail)}</span>` : ''}</div>`
+        : (parts.detail
+          ? `<details class="crit-d"><summary class="crit__text">${escapeHtml(parts.label || '')}</summary><div class="crit__detail">${escapeHtml(parts.detail)}</div></details>`
+          : `<span class="crit__text">${escapeHtml(parts.label || '')}</span>`);
+      return `<li class="crit${c.satisfied ? ' crit--done' : ''}"><span class="crit__mark">${c.satisfied ? '✓' : ''}</span>${body}</li>`;
+    }).join('')}</ul>`;
+  }
+  function renderCompletion() {
+    const d = currentDetail();
+    if (!d) return;
+    const g = d.goal;
+    const crit = d.criteria || [];
+    const sat = crit.filter((c) => c.satisfied).length;
+    const band = $('#goal-completion-body');
+    if (band) band.innerHTML = completionSummaryHtml(g, crit, sat, 56) + critListHtml(crit.slice(0, CRITERIA_CAP), false);
+    renderViewAllFoot('#goal-completion-foot', crit.length, CRITERIA_CAP, 'completion', 'criteria');
+    setCount('#goal-completion-count', crit.length);
+    const full = $('#goal-completion-full');
+    if (full) full.innerHTML = completionSummaryHtml(g, crit, sat, 64) + critListHtml(crit, true);
+    const back = $('#goal-completion-back');
+    if (back && state.current != null) back.setAttribute('href', `#/goal/${state.current}`);
+  }
+
+  /* ----- Members (band column + #/goal/N/members full view) ----- */
+
+  function memberAvatar(m) {
+    const name = memberName(m);
+    const initials = String(name).replace(/^@/, '').trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();
+    return m.avatar_url ? `<img src="${escapeHtml(m.avatar_url)}" alt="">` : escapeHtml(initials);
+  }
+  function memberLi(m) {
+    return `<li class="member">
+      <span class="member__avatar">${memberAvatar(m)}</span>
+      <span class="member__name">${escapeHtml(memberName(m))} ${m.rank ? `<small>· ${escapeHtml(rankLabel(m.rank))}</small>` : ''}</span>
+      <span class="role-pill${m.role === 'lead' ? ' role-pill--lead' : ''}">${m.role === 'lead' ? 'Manager' : 'Member'}</span>
+    </li>`;
+  }
+
+  // task 1828 — per-member contribution TO THIS GOAL, from the goal's shipped
+  // tasks (state.work.done carries shipped_by + credits_reward). Returns a Map
+  // keyed by String(builder_id) → { shipped, earned }.
+  function goalMemberStats() {
+    const stats = new Map();
+    for (const t of state.work.done) {
+      if (t.shipped_by == null) continue;
+      const key = String(t.shipped_by);
+      const s = stats.get(key) || { shipped: 0, earned: 0 };
+      s.shipped += 1;
+      // Only SETTLED tasks have really-earned drachmae; a 'completed' (pre-confirm)
+      // task in state.work.done has not landed credits yet, so it contributes 0.
+      s.earned += taskSettled(t) ? creditVal(t) : 0;
+      stats.set(key, s);
+    }
+    return stats;
+  }
+  function memberStatLi(m, stats) {
+    const s = stats.get(String(m.builder_id)) || { shipped: 0, earned: 0 };
+    const cur = curLabel();
+    const statLine = state.workLoaded
+      ? `<strong>${fmtNum(s.shipped)}</strong> shipped · <strong>${fmtNum(s.earned)}</strong> ${escapeHtml(cur)}`
+      : '<span class="member__stats--pending">…</span>';
+    return `<li class="member member--stat">
+      <span class="member__avatar">${memberAvatar(m)}</span>
+      <span class="member__name">${escapeHtml(memberName(m))} ${m.rank ? `<small>· ${escapeHtml(rankLabel(m.rank))}</small>` : ''}</span>
+      <span class="member__stats" title="Contribution to this goal">${statLine}</span>
+      <span class="role-pill${m.role === 'lead' ? ' role-pill--lead' : ''}">${m.role === 'lead' ? 'Manager' : 'Member'}</span>
+    </li>`;
+  }
+
+  function renderMembers() {
+    const d = currentDetail();
+    if (!d) return;
+    const members = d.members || [];
+    const lede = $('#goal-members-lede');
+    if (lede) {
+      const leads = members.filter((m) => m.role === 'lead');
+      lede.textContent = leads.length
+        ? 'Leads manage this goal’s scope and (soon) resolve its conflicts.'
+        : 'No lead assigned yet — an Archon can appoint one.';
+    }
+    setCount('#goal-members-count', members.length);
+    const list = $('#goal-members');
+    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>';
+    }
+    renderViewAllFoot('#goal-members-foot', members.length, MEMBER_CAP, 'members', 'members');
+    renderMembersFull(d);
+  }
+
+  // task 1828 — the standalone #/goal/N/members view: every member plus their
+  // contribution to this goal, and a goal-level aggregate header.
+  function renderMembersFull(d) {
+    const members = d.members || [];
+    setCount('#goal-members-view-count', members.length);
+    const stats = goalMemberStats();
+    const agg = $('#goal-members-stats');
+    if (agg) {
+      if (state.workLoaded) {
+        const shipped = state.work.done.length;
+        const earned = state.work.done.reduce((n, t) => n + (taskSettled(t) ? creditVal(t) : 0), 0);
+        const open = state.work.todo.length;
+        const cur = curLabel();
+        agg.innerHTML = `
+          <span class="mstat"><strong>${fmtNum(members.length)}</strong> member${members.length === 1 ? '' : 's'}</span>
+          <span class="mstat"><strong>${fmtNum(shipped)}</strong> task${shipped === 1 ? '' : 's'} shipped</span>
+          <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>';
+      }
+    }
+    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>';
+    }
+    const back = $('#goal-members-back');
+    if (back && state.current != null) back.setAttribute('href', `#/goal/${state.current}`);
+  }
+
+  function renderDetail(goalId) {
+    const d = state.details.get(String(goalId));
+    if (!d) return;
+    const g = d.goal;
+    const crit = d.criteria || [];
+    const members = d.members || [];
+    const sat = crit.filter((c) => c.satisfied).length;
+    const joined = members.some((m) => sameId(m.builder_id, selfId()));
+    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';
+    const desc = $('#goal-detail-desc');
+    if (desc) desc.textContent = g.description || '';
+    const meta = $('#goal-detail-meta');
+    if (meta) {
+      const scope = Array.isArray(g.scope_modules) && g.scope_modules.length
+        ? `<span title="Module scope — tasks authored in this goal are bounded to these modules">scope: ${g.scope_modules.map(escapeHtml).join(', ')}</span>` : '';
+      // task 1761: this goal's prerequisite goals, each ✓ (achieved) or ○ (not yet).
+      // An open goal with any unmet prerequisite is flagged blocked.
+      const deps = d.dependencies || [];
+      const unmet = deps.filter((dep) => !dep.satisfied);
+      const depsSpan = deps.length
+        ? `<span class="goal-deps${(g.status === 'open' && unmet.length) ? ' goal-deps--blocked' : ''}" title="This goal is blocked until each prerequisite goal is achieved">${(g.status === 'open' && unmet.length) ? '🔒 ' : ''}depends on: ${deps.map((dep) => `${escapeHtml(dep.title || ('goal ' + dep.id))} ${dep.satisfied ? '✓' : '○'}`).join(', ')}</span>`
+        : '';
+      meta.innerHTML = `<span>${escapeHtml(g.version_id || '')}</span> ${statusBadge(g.status)} ${scope} ${depsSpan}`;
+    }
+
+    const actions = $('#goal-detail-actions');
+    if (actions) {
+      actions.innerHTML = g.status === 'open'
+        ? (joined
+          ? '<button class="btn-ghost" id="goal-leave-btn" type="button">Leave goal</button>'
+          : '<button class="landing__btn" id="goal-join-btn" type="button">Join goal</button>')
+        : '';
+      $('#goal-join-btn')?.addEventListener('click', () => joinLeave(g.id, 'join'));
+      $('#goal-leave-btn')?.addEventListener('click', () => joinLeave(g.id, 'leave'));
+    }
+
+    // task 1828 — Completion + Members each render into their band column AND
+    // their dedicated full view (capped in the band, "View all →" into the view).
+    renderCompletion();
+    // task 1762: the goal's own owner/manager (or an Archon) can invite without
+    // an Archon in the loop — mirrors the server's authorizeGoalManagement gate.
+    // A protected-scope goal stays Archon-only on the SERVER (goals.js); this
+    // client gate deliberately doesn't re-derive the protected-module list (that
+    // roster lives server-side only, module-scope-map.js) — a non-Archon owner/
+    // manager sees the control on a protected-scope goal and gets a clear toast
+    // if the server 403s (see inviteMember's error handling below).
+    const isOwner = sameId(g.created_by, selfId());
+    const canInvite = g.status === 'open' && (isArchon() || isOwner || iAmLead);
+    renderInviteBox(g.id, canInvite, members);
+    renderMembers();
+
+    loadGoalTasks(g.id);
+    void sat; void crit; // now read inside renderCompletion()
+    void iAmLead; // lead-only resolution actions arrive with tasks 1735/1736
+  }
+
+  // task 1828 — the active-claim feed (all builders' in-flight claims) powers the
+  // Release button + the "claimed · @who" label. Best-effort: the feed is
+  // primer-gated server-side, so a 403/error just leaves the map empty (Claim
+  // still works; Release simply doesn't show). Keyed by String(task_id).
+  async function loadActiveClaims() {
+    try {
+      const c = await getJSON(`${API}/tasks/claimable`);
+      const map = new Map();
+      for (const ac of (c.active_claims || [])) {
+        map.set(String(ac.task_id), { claim_id: ac.claim_id, builder_id: ac.builder_id, login: ac.github_login, name: ac.display_name });
+      }
+      state.claimsByTask = map;
+    } catch (_err) {
+      state.claimsByTask = new Map();
+    }
+  }
+
+  async function loadGoalTasks(goalId) {
+    try {
+      const [resp] = await Promise.all([
+        getJSON(`${API}/tasks?goal_id=${encodeURIComponent(goalId)}`),
+        loadActiveClaims(),  // fills state.claimsByTask (best-effort)
+      ]);
+      if (!sameId(state.current, goalId)) return; // navigated away while loading
+      const tasks = resp.tasks || [];
+      state.work = {
+        todo: tasks.filter((t) => isTodoStatus(t.status)),
+        done: tasks.filter((t) => DONE_STATUSES.has(t.status))
+          .sort((a, b) => new Date(b.shipped_at || 0) - new Date(a.shipped_at || 0)),
+      };
+      state.workLoaded = true;  // task 1828 — member stats can now compute
+      renderWork();
+      renderMembers();  // refresh per-member goal stats now that tasks landed
+      // Prefer the server-side detector when it exists (task 1736); any failure
+      // (404/501 pre-landing, or a transient error) falls back to the client
+      // estimate from declared touches[].
+      try {
+        const server = await getJSON(`${API}/goals/${encodeURIComponent(goalId)}/conflicts`);
+        if (!sameId(state.current, goalId)) return;
+        state.conflictPairs = (server.conflicts || []).map((c) => ({
+          a: c.task_a, b: c.task_b, titleA: c.title_a || '', titleB: c.title_b || '',
+          paths: c.overlapping_paths || [], severity: c.severity || null,
+          crossGoalTitle: c.cross_goal ? (c.goal_b_title || '') : '',
+        }));
+        state.conflictSource = 'server';
+      } catch (err) {
+        if (!sameId(state.current, goalId)) return;
+        state.conflictPairs = computeConflicts(tasks).map((c) => ({
+          a: c.a.id, b: c.b.id, titleA: c.a.title || '', titleB: c.b.title || '',
+          paths: c.paths, severity: null, crossGoalTitle: '',
+        }));
+        state.conflictSource = 'client';
+      }
+      renderConflicts();
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[goals] tasks load failed', err);
+      if (!sameId(state.current, goalId)) return;
+      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">Tasks could not be loaded.</td></tr>';
+      if (doneBody) doneBody.innerHTML = '<tr><td colspan="5" class="ledger__empty">Tasks could not be loaded.</td></tr>';
+      state.conflictPairs = null;
+      state.conflictSource = null;
+      renderConflicts();
+    }
+  }
+
+  // task 1877 — the any-builder-readable directory backing the invite dropdown
+  // (superseded task 1762's GET /leaderboard lookup, which missed anyone
+  // outside the top-100-by-credits window). Fetched once per page load and
+  // cached — the roster doesn't change fast enough to warrant a re-fetch per
+  // goal, and loadDetail's force-reload on invite already refreshes members.
+  async function loadDirectory() {
+    if (state.directory) return state.directory;
+    try {
+      const d = await getJSON(`${API}/builders/directory`);
+      state.directory = d.builders || [];
+    } catch (err) {
+      state.directory = [];
+    }
+    return state.directory;
+  }
+
+  // task 1762/1877 — owner/manager invite control. Shows a compact form (a
+  // builder dropdown + role) in place of a button while open. Idempotent
+  // re-render: always rebuilds the box from scratch, so state.inviteOpen is the
+  // only thing that survives a renderDetail() call while the form is open.
+  function renderInviteBox(goalId, canInvite, members) {
+    const box = $('#goal-invite');
+    if (!box) return;
+    if (!canInvite) {
+      box.hidden = true;
+      box.innerHTML = '';
+      state.inviteOpen = false;
+      return;
+    }
+    box.hidden = false;
+    if (!state.inviteOpen) {
+      box.innerHTML = '<button class="btn-ghost" id="goal-invite-open" type="button">+ Invite member</button>';
+      $('#goal-invite-open')?.addEventListener('click', async () => {
+        state.inviteOpen = true;
+        await loadDirectory();
+        renderInviteBox(goalId, canInvite, members);
+      });
+      return;
+    }
+    const memberIds = new Set((members || []).map((m) => String(m.builder_id)));
+    const invitable = (state.directory || []).filter((b) => !memberIds.has(String(b.id)));
+    const options = invitable
+      .map((b) => `<option value="${escapeHtml(String(b.id))}">${escapeHtml(b.display_name || ('@' + b.github_login))}</option>`)
+      .join('');
+    box.innerHTML = `
+      <form class="goal-invite__form" id="goal-invite-form">
+        <select id="goal-invite-builder" required ${invitable.length ? '' : 'disabled'}>
+          ${invitable.length ? `<option value="" disabled selected>Choose a builder…</option>${options}`
+            : '<option value="">Everyone is already a member</option>'}
+        </select>
+        <select id="goal-invite-role">
+          <option value="member">Member</option>
+          <option value="lead">Manager</option>
+        </select>
+        <button class="landing__btn" type="submit" ${invitable.length ? '' : 'disabled'}>Invite</button>
+        <button class="btn-ghost" id="goal-invite-cancel" type="button">Cancel</button>
+      </form>`;
+    $('#goal-invite-cancel')?.addEventListener('click', () => {
+      state.inviteOpen = false;
+      renderInviteBox(goalId, canInvite, members);
+    });
+    $('#goal-invite-form')?.addEventListener('submit', (ev) => {
+      ev.preventDefault();
+      const builderId = $('#goal-invite-builder')?.value;
+      const role = $('#goal-invite-role')?.value || 'member';
+      if (builderId) inviteMember(goalId, builderId, role);
+    });
+  }
+
+  async function inviteMember(goalId, builderId, role) {
+    try {
+      await postJSON(`${API}/goals/${encodeURIComponent(goalId)}/members`, { builder_id: Number(builderId), role });
+      toast('Invited.');
+      state.inviteOpen = false;
+      await loadDetail(goalId, { force: true });
+      renderDetail(goalId);
+      renderList();
+    } catch (err) {
+      const code = err?.data?.error;
+      if (code === 'archon_required_for_protected_scope') toast('This goal is scoped to a protected module — only an Archon may add members.');
+      else if (code === 'metic_required_for_protected_scope') toast('A protected-scope goal requires a Metic+ member.');
+      else if (code === 'not_owner_or_manager') toast('Only this goal\'s owner or a manager (or an Archon) may invite.');
+      else if (code === 'goal_not_open') toast('This goal is not open.');
+      else toast('Could not invite that builder just now.');
+    }
+  }
+
+  async function joinLeave(goalId, action) {
+    try {
+      await postJSON(`${API}/goals/${encodeURIComponent(goalId)}/${action}`);
+      toast(action === 'join' ? 'Joined the goal.' : 'Left the goal.');
+      await loadDetail(goalId, { force: true });
+      renderDetail(goalId);
+      renderList();
+    } catch (err) {
+      const code = err?.data?.error;
+      if (code === 'archon_approval_required') toast('This goal is Archon-mediated — an Archon must add you.');
+      else if (code === 'not_a_member') toast('You are not a member of this goal.');
+      else if (code === 'goal_not_open') toast('This goal is not open.');
+      else toast(`Could not ${action} just now.`);
+    }
+  }
+
+  /* ---------------- data + routing ---------------- */
+
+  async function loadDetail(goalId, { force = false } = {}) {
+    if (!force && state.details.has(String(goalId))) return state.details.get(String(goalId));
+    const d = await getJSON(`${API}/goals/${encodeURIComponent(goalId)}`);
+    state.details.set(String(goalId), d);
+    return d;
+  }
+
+  // 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;
+    state.workSort = { todo: { by: null, dir: 'desc' }, done: { by: null, dir: 'desc' } };
+    state.work = { todo: [], done: [] };
+    state.workLoaded = false;
+    state.claimsByTask = new Map();
+    state.conflictPairs = null;
+    state.conflictSource = null;
+    setWorkTab('todo');
+    ['#goal-todo-count', '#goal-done-count', '#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 = ''; }
+    });
+    ['#goal-todo-pager', '#goal-done-pager', '#goal-conflicts-foot', '#goal-members-foot', '#goal-completion-foot'].forEach((sel) => {
+      const el = $(sel);
+      if (el) el.hidden = true;
+    });
+    ['#goal-conflicts-card', '#goal-conflicts-view-card'].forEach((sel) => $(sel)?.classList.remove('goal-conflicts-card--live'));
+    reflectSortHeaders('todo');
+    reflectSortHeaders('done');
+    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>';
+    const conflicts = $('#goal-conflicts');
+    if (conflicts) conflicts.innerHTML = '<div class="profile__placeholder">…</div>';
+    const conflictsFull = $('#goal-conflicts-full');
+    if (conflictsFull) conflictsFull.innerHTML = '<div class="profile__placeholder">…</div>';
+  }
+
+  // task 1828 — views sharing this page: the list, a goal's detail, and the
+  // goal's three full views (conflicts / members / completion). `view` defaults
+  // from goalId (null → list).
+  const SUB_VIEWS = ['conflicts', 'members', 'completion'];
+  const VIEW_SECTION = {
+    list: '#goals-list-view',
+    detail: '#goal-detail-view',
+    conflicts: '#goal-conflicts-view',
+    members: '#goal-members-view',
+    completion: '#goal-completion-view',
+  };
+  const SUB_SUBTITLE = {
+    conflicts: 'Goal conflicts — every open task pair whose declared files overlap.',
+    members: 'Goal members — who’s on this goal and what they’ve contributed to it.',
+    completion: 'Goal completion — every done-when criterion, with its full detail.',
+  };
+  function setView(goalId, view) {
+    view = view || (goalId == null ? 'list' : 'detail');
+    if (goalId !== state.current) {
+      state.inviteOpen = false;
+      if (goalId != null) resetWorkUi();
+    }
+    state.current = goalId;
+    state.view = view;
+    for (const [name, sel] of Object.entries(VIEW_SECTION)) {
+      const el = $(sel);
+      if (el) el.hidden = view !== name;
+    }
+    const sub = $('#goals-sub');
+    if (sub) {
+      sub.textContent = view === 'list'
+        ? 'Shared goals: progress, members, and the work remaining.'
+        : (SUB_SUBTITLE[view] || 'Goal detail — completion, members, conflicts, and the work queue.');
+    }
+    window.scrollTo({ top: 0 });
+  }
+
+  async function route() {
+    const hash = window.location.hash;
+    // A record deep-link (#/task|idea|blocker/N) belongs to the shared overlay
+    // (task-detail.js), which opens ON TOP of this page. Leave whatever goal
+    // view is underneath intact — collapsing to the list here is what yanked
+    // the task board out from behind the card (task 1753 regression). On a cold
+    // load straight to a deep-link there's no detail open yet, so render the
+    // list as the backdrop behind the card.
+    if (DEEPLINK_RE.test(hash)) {
+      if (state.current == null) renderList();
+      return;
+    }
+    // task 1828 — a goal's dedicated full views (conflicts / members /
+    // completion). renderDetail renders all three full views + kicks
+    // loadGoalTasks, so a cold load straight to one still fills in once data
+    // lands (member stats / work / conflicts refresh async).
+    const mSub = /^#\/goal\/(\d+)\/(conflicts|members|completion)$/.exec(hash);
+    if (mSub) {
+      const id = mSub[1];
+      const view = mSub[2];
+      try {
+        await loadDetail(id);
+        setView(id, view);
+        renderDetail(id);
+      } catch (err) {
+        if (err && err.message === 'redirecting to auth') return;
+        toast(err?.status === 404 ? 'No such goal.' : 'Goal could not be loaded.');
+        window.location.hash = '';
+        setView(null);
+        renderList();
+      }
+      return;
+    }
+    const m = /^#\/goal\/(\d+)$/.exec(hash);
+    if (m) {
+      const id = m[1];
+      try {
+        await loadDetail(id);
+        setView(id, 'detail');
+        renderDetail(id);
+      } catch (err) {
+        if (err && err.message === 'redirecting to auth') return;
+        toast(err?.status === 404 ? 'No such goal.' : 'Goal could not be loaded.');
+        window.location.hash = '';
+        setView(null);
+      }
+    } else {
+      setView(null);
+      renderList();
+    }
+  }
+
+  async function boot() {
+    try {
+      state.me = await getJSON(`${API}/me`).catch(() => null);
+      // task 1828 — "My goals" needs an identity; disable it when signed out.
+      const mineSel = $('#f-goal-mine');
+      if (mineSel && !state.me) { mineSel.disabled = true; mineSel.title = 'Sign in to filter to your goals'; }
+      const gres = await getJSON(`${API}/goals`);
+      state.goals = gres.goals || [];
+      populateVersionFilter();
+      // Prefetch details (ring + members on the cards). Sequentially-parallel,
+      // failure-tolerant: a card without detail still renders.
+      await Promise.allSettled(state.goals.map((g) => loadDetail(g.id)));
+      await route();
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[goals] boot failed', err);
+      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>';
+    }
+  }
+
+  // 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
+  });
+  $('#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) => {
+    $(sel)?.addEventListener('click', (e) => {
+      e.preventDefault();
+      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 1828 — click / keyboard sort on the Work-table column headers.
+  Object.entries(WORK_SORT_HEADERS).forEach(([table, cols]) => {
+    Object.entries(cols).forEach(([key, id]) => {
+      const th = document.getElementById(id);
+      if (!th) return;
+      th.addEventListener('click', () => onWorkSortClick(table, key));
+      th.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onWorkSortClick(table, key); }
+      });
+    });
+  });
+  // task 1753/1828: a row opens the shared task-detail overlay; the inline Claim
+  // button (task 1828) claims without opening it.
+  ['#goal-todo', '#goal-done'].forEach((sel) => {
+    $(sel)?.addEventListener('click', (e) => {
+      const claimBtn = e.target.closest('[data-claim-task]');
+      if (claimBtn) { e.stopPropagation(); doGoalClaim(claimBtn.dataset.claimTask, claimBtn); return; }
+      const releaseBtn = e.target.closest('[data-release-claim]');
+      if (releaseBtn) { e.stopPropagation(); doGoalRelease(releaseBtn.dataset.releaseClaim, releaseBtn.dataset.releaseTask, releaseBtn); return; }
+      const row = e.target.closest('.ledger__row--task');
+      if (row && row.dataset.taskId && window.OTBTaskDetail) window.OTBTaskDetail.open(row.dataset.taskId);
+    });
+  });
+  window.addEventListener('hashchange', route);
+  wireDragReorder();
+
+  boot();
+})();