@bongos/core 1.19.332 → 1.19.334

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

@@ -0,0 +1,1032 @@
+// goals-render.js — the Goals page's RENDERERS, exposed as window.OTBGoalsRender.
+//
+// The second half of the carve goals-lib.js began (task 1003135): that one took
+// the page's PURE helpers, which was not enough to get goals-page.js under the
+// 1,500-line ratchet. Task 1003206 (goal 1000079) takes the view painters too —
+// the goal list and cards, the detail view, the todo/work boards, conflicts, the
+// completion panel, members and invites.
+//
+// A FACTORY rather than a flat namespace, unlike goals-lib.js, for one reason:
+// these read the page's live `state` object and its work-tab controller, which is
+// reassigned after boot. `state` is a stable reference so it is destructured, but
+// `workTabs` is read through ctx so a renderer always sees the current one.
+//
+// Load order (goals.html): hall-kit → task-lib → goals-lib → goals-render →
+// goals-page. Every window.* toolkit below is re-destructured here from the same
+// globals goals-page.js reads, so the moved call sites are byte-identical.
+(function () {
+  'use strict';
+
+  window.OTBGoalsRender = function createGoalsRender(ctx) {
+    const { API, curLabel, getJSON, patchJSON, postJSON, sameId, selfId, state } = ctx;
+    const { escapeHtml, $, fmtNum, fmtDate, toast, rankLabel } = window.OTB;
+    const {
+      priorityRank, touchesConflict, rankTagHtml, deHashRefs,
+      creditsPerMinute, buildPromptForTask, friendlyBatchReason,
+    } = window.OTBTaskLib;
+    const { makePager, paginate, wirePager, pagerBarHtml, makeTabs, makeFilterBar,
+      emptyStateHtml, skeletonRows } = window.OTBKit;
+    const { DONE_STATUSES, CUT_STATUSES, isTodoStatus, ring, memberName,
+      readinessOf, EMPTY_ROLLUP, goalRollLine, matchesTodoSearch,
+      msOf, taskActivityMs, subtitleAttr, applyGoalProse } = window.OTBGoalsLib;
+
+  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/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'),
+  };
+  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;
+  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>`;
+  }
+  const rollupOf = (goalId) => state.rollups.get(String(goalId)) || EMPTY_ROLLUP;
+  const goalCreatedMs = (g) => msOf(g.created_at);
+  const goalActivityMs = (g) => state.activity.get(String(g.id)) || msOf(g.updated_at);
+  const GOAL_SORTS = {
+    priority: { label: 'priority (version order)', cmp: null, stamp: null },
+    newest: { label: 'newest first', cmp: (a, b) => goalCreatedMs(b) - goalCreatedMs(a), stamp: (g) => ({ label: 'created', ms: goalCreatedMs(g) }) },
+    oldest: { label: 'oldest first', cmp: (a, b) => goalCreatedMs(a) - goalCreatedMs(b), stamp: (g) => ({ label: 'created', ms: goalCreatedMs(g) }) },
+    active: { label: 'recently active', cmp: (a, b) => goalActivityMs(b) - goalActivityMs(a), stamp: (g) => ({ label: 'last work', ms: goalActivityMs(g) }) },
+  };
+  const currentGoalSort = () => GOAL_SORTS[$('#f-goal-order')?.value] || GOAL_SORTS.priority;
+  function sortGoals(rows) {
+    const { cmp } = currentGoalSort();
+    return cmp ? rows.slice().sort(cmp) : rows;
+  }
+  const isArchon = () => (state.me?.builder?.rank || '').toLowerCase() === 'archon';
+  const RANK_ORDER = { archon: 4, metic: 3, thetes: 2, xenos: 1 };
+  const canConfirmCriteria = () =>
+    (RANK_ORDER[(state.me?.builder?.rank || '').toLowerCase()] ?? 0) >= RANK_ORDER.metic;
+  function filteredGoals() {
+    const ver = $('#f-goal-version')?.value || '';
+    const status = $('#f-goal-status')?.value || '';
+    const mineOnly = $('#f-goal-mine')?.value === 'mine';
+    // task 1003135 — free-text search (goal title OR id; '#N', 'N' and a bare
+    // number all match — the id is already rendered on the row, task 1002163)
+    // and the Owner dropdown ('none' = created_by NULL, system-attributed).
+    // Reads the DOM ids directly, matching this function's existing style.
+    const q = ($('#f-goals-search')?.value || '').trim().toLowerCase();
+    const needle = q.replace(/^#/, '');
+    const owner = $('#f-goal-owner')?.value || '';
+    const matchesSearch = (g) => !needle
+      || String(g.id).includes(needle)
+      || (g.title || '').toLowerCase().includes(needle);
+    const matchesOwner = (g) => !owner
+      || (owner === 'none' ? g.created_by == null : String(g.created_by) === owner);
+    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) &&
+      matchesSearch(g) &&
+      matchesOwner(g) &&
+      (!mineOnly || iAmMember(g)));
+  }
+  function goalStampHtml(g) {
+    const { stamp } = currentGoalSort();
+    if (!stamp) return '';
+    const { label, ms } = stamp(g);
+    return ` · ${escapeHtml(label)} ${escapeHtml(ms ? fmtDate(new Date(ms).toISOString()) : '—')}`;
+  }
+  function goalRenderFacts(g, ringSize) {
+    const d = state.details.get(String(g.id));
+    const crit = d ? (d.criteria || []) : [];
+    const sat = crit.filter((c) => c.satisfied).length;
+    const r = rollupOf(g.id);
+    const achieved = g.status === 'achieved';
+    const ringHtml = crit.length ? ring(sat, crit.length, achieved, ringSize)
+      : `<span class="gr-crit-none" aria-hidden="true">—</span>`;
+    const goalHref = `#/goal/${escapeHtml(String(g.id))}`;
+    let right;
+    if (achieved) {
+      right = `<span class="gr-met">✓ achieved</span>`;
+    } else if (crit.length && sat >= crit.length) {
+      right = `<span class="gr-met">Criteria met — awaiting review</span>`;
+    } else if (r.nextReady) {
+      right = `<div class="gr-next"><span class="gr-next__t">${escapeHtml(r.nextReady.title || 'Next task')}</span>`
+        + `<a class="gr-claim" href="#/task/${escapeHtml(String(r.nextReady.id))}">Claim next</a></div>`;
+    } else if (r.blocked > 0) {
+      right = `<a class="gr-drill" href="${goalHref}">See what's blocking <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>`;
+    } else {
+      right = `<span class="gr-quiet">No tasks yet</span>`;
+    }
+    const metaHtml = `#${escapeHtml(String(g.id))} · ${escapeHtml(g.version_id || '')}${(achieved || g.status === 'open') ? '' : ' · ' + escapeHtml(g.status)}${goalStampHtml(g)}`;
+    return { r, achieved, ringHtml, goalHref, right, metaHtml };
+  }
+  function goalRowHtml(g) {
+    const { r, achieved, ringHtml, goalHref, right, metaHtml } = goalRenderFacts(g, 44);
+    // NOTE: a rollup row nests real links (title → goal, Claim → task overlay,
+    // drill → goal), so the row itself is a <div>, not an <a> — nested anchors
+    // are invalid. Only the explicit links navigate.
+    return `<div class="gr-row" data-goal-id="${escapeHtml(String(g.id))}">
+      <div class="gr-ringcol">${ringHtml}</div>
+      <div class="gr-main">
+        <a class="gr-title" href="${goalHref}"${subtitleAttr(g)}>${escapeHtml(g.title || 'Untitled goal')}</a>
+        <div class="gr-meta">${metaHtml}</div>
+        ${achieved ? '' : goalRollLine(r)}
+      </div>
+      <div class="gr-right">${right}</div>
+    </div>`;
+  }
+  function goalCardHtml(g) {
+    const { r, achieved, ringHtml, goalHref, right, metaHtml } = goalRenderFacts(g, 36);
+    return `<div class="goal-card" data-goal-id="${escapeHtml(String(g.id))}">
+      <div class="goal-card__head">
+        <div class="gr-ringcol">${ringHtml}</div>
+        <a class="goal-card__title gr-title" href="${goalHref}"${subtitleAttr(g)}>${escapeHtml(g.title || 'Untitled goal')}</a>
+      </div>
+      <div class="goal-card__meta">${metaHtml}</div>
+      ${achieved ? '' : goalRollLine(r)}
+      <div class="goal-card__foot">${right}</div>
+    </div>`;
+  }
+  function renderList() {
+    const grid = $('#goal-grid');
+    if (!grid) return;
+    const rows = filteredGoals();
+    const count = $('#goals-count');
+    if (count) count.textContent = `${rows.length} goal${rows.length === 1 ? '' : 's'}`;
+    const pagerMount = $('#goals-pager-mount');
+    if (pagerMount) pagerMount.hidden = true;
+
+    if (!rows.length) {
+      grid.innerHTML = emptyStateHtml('No goals match these filters.');
+      return;
+    }
+
+    const isBlocked = (g) => {
+      const r = rollupOf(g.id);
+      return g.status === 'open' && r.ready === 0 && r.active === 0 && r.blocked > 0;
+    };
+    // task 1002965 — the Sort choice orders goals WITHIN each group; the
+    // Active / Blocked / Achieved / Archived grouping (task 1002439's momentum
+    // layout) is what the page is for and is never re-ordered away.
+    const achieved = sortGoals(rows.filter((g) => g.status === 'achieved'));
+    const archived = sortGoals(rows.filter((g) => g.status === 'archived'));
+    const openRows = rows.filter((g) => g.status !== 'achieved' && g.status !== 'archived');
+    const blocked = sortGoals(openRows.filter(isBlocked));
+    const active = sortGoals(openRows.filter((g) => !isBlocked(g)));
+
+    let R = 0, A = 0, B = 0;
+    openRows.forEach((g) => { const r = rollupOf(g.id); R += r.ready; A += r.active; B += r.blocked; });
+    const summary = `<div class="gr-summary">
+      <span class="gr-sm"><span class="gr-sm__dot" style="background:var(--ok)"></span><b>${R}</b> ready to claim</span>
+      <span class="gr-sm"><span class="gr-sm__dot" style="background:var(--info)"></span><b>${A}</b> in progress</span>
+      <span class="gr-sm"><span class="gr-sm__dot" style="background:var(--terracotta)"></span><b>${B}</b> blocked</span>
+    </div>`;
+
+    const sec = (label, n) => `<div class="gr-sec"><b>${label}</b><span class="gr-sec__n">${n}</span></div>`;
+    // task 1003136 — the list|cards toggle swaps how the open groups render;
+    // grouping, filters, and sort run above the fork so both views share them.
+    // Achieved/archived pills stay pills (already the compact form). The inner
+    // div is class-only .goal-grid on purpose: task 1002439's block override
+    // targets #goal-grid.goal-grid, so the original card-grid CSS applies here.
+    const cardsView = ($('#f-goal-view')?.value || 'list') === 'cards';
+    const listOf = cardsView
+      ? (arr) => `<div class="goal-grid">${arr.map(goalCardHtml).join('')}</div>`
+      : (arr) => `<div class="gr-list">${arr.map(goalRowHtml).join('')}</div>`;
+    // task 1002965 — an achieved/archived goal is a compact pill, so its sort
+    // date rides as its own muted span (the row's `gr-meta` equivalent). The
+    // pills row already wraps, so the extra text can't widen the page.
+    const pillWhen = (g) => {
+      const { stamp } = currentGoalSort();
+      if (!stamp) return '';
+      const { label, ms } = stamp(g);
+      return `<span class="gr-pill__when">${escapeHtml(label)} ${escapeHtml(ms ? fmtDate(new Date(ms).toISOString()) : '—')}</span>`;
+    };
+    const pill = (g) => `<a class="gr-pill" href="#/goal/${escapeHtml(String(g.id))}"><span class="gr-pill__ok">✓</span><b>${escapeHtml(g.title || 'Untitled')}</b><span class="gr-pill__id">#${escapeHtml(String(g.id))}</span>${pillWhen(g)}</a>`;
+
+    grid.innerHTML = summary
+      + (active.length ? sec('Active', active.length) + listOf(active) : '')
+      + (blocked.length ? sec('Blocked', blocked.length) + listOf(blocked) : '')
+      + (achieved.length ? sec('Achieved', achieved.length) + `<div class="gr-pills">${achieved.map(pill).join('')}</div>` : '')
+      + (archived.length ? sec('Archived', archived.length) + `<div class="gr-pills gr-pills--muted">${archived.map(pill).join('')}</div>` : '');
+  }
+  function todoSearchQuery() {
+    const el = $('#f-goal-search');
+    return el ? el.value.trim().toLowerCase() : '';
+  }
+  function goalTaskCardHtml(t) {
+    const id = String(t.id);
+    const cpm = creditsPerMinute(t);
+    const cpmText = Number.isFinite(cpm) ? `${cpm.toFixed(2)} ${curLabel()}/min` : `— ${curLabel()}/min`;
+    const minutesText = t.est_minutes ? `${t.est_minutes}m` : '—';
+    const discipline = t.discipline || 'unclassified';
+    const disciplineTag = discipline !== 'unclassified' ? `<span class="task__tag">${escapeHtml(discipline)}</span>` : '';
+    const newcomerTag = t.newcomer_friendly ? '<span class="task__tag task__tag--newcomer">newcomer</span>' : '';
+    const rankTag = rankTagHtml(t.requires_rank);
+    const touches = Array.isArray(t.touches) ? t.touches : [];
+    const touchesChip = touches.length
+      ? `<span class="task__touches" title="${escapeHtml(touches.join('\n'))}">✎ ${touches.length} file${touches.length === 1 ? '' : 's'}</span>`
+      : '';
+    // task 1002955: same age chip the board renders — reviewing a goal for stale
+    // work is the case that needed it most.
+    const ageChip = window.OTBKit.ageChipHtml(t.created_at);
+    const claim = state.claimsByTask.get(id);
+    const isReady = t.status === 'ready' && !!state.me;
+    const mineActive = t.status === 'active' && claim && sameId(claim.builder_id, selfId());
+    const selected = goalSel.claim.has(id);
+    // Lead: a select checkbox on ready cards (drives bulk claim); otherwise a
+    // status tag so active/backlog cards read at a glance.
+    const lead = isReady
+      ? `<input type="checkbox" class="task__select" data-task-id="${escapeHtml(id)}" aria-label="Select task ${escapeHtml(id)} for bulk claim"${selected ? ' checked' : ''}>`
+      : `<span class="task__tag" title="Task status">${escapeHtml(t.status || '')}</span>`;
+    // Actions: ready → Claim + copy; mine-active → Release; other's active →
+    // "claimed · @who"; anything else → nothing (open via the ⤢ button / card).
+    let actions = '';
+    if (isReady) {
+      actions = `<button class="task__claim" type="button" data-claim-task="${escapeHtml(id)}" aria-label="Claim task ${escapeHtml(id)}">Claim</button>`
+        + `<button class="task__copy" type="button" data-copy-task="${escapeHtml(id)}" title="Copy the task prompt to your clipboard" aria-label="Copy prompt for task ${escapeHtml(id)}"><span class="task__copy-icon" aria-hidden="true">📋</span></button>`;
+    } else if (mineActive) {
+      actions = `<button class="wip__release" type="button" data-release-claim="${escapeHtml(String(claim.claim_id))}" data-release-task="${escapeHtml(id)}" aria-label="Release task ${escapeHtml(id)}">Release</button>`;
+    } else if (t.status === 'active' && claim) {
+      const who = (claim.login || claim.name) ? ` · @${escapeHtml(claim.login || claim.name)}` : '';
+      actions = `<span class="ledger__claimed" title="Claimed by another builder">claimed${who}</span>`;
+    }
+    return `
+      <div class="task${selected ? ' task--selected' : ''}${isReady ? '' : ' task--readonly'}" data-task-id="${escapeHtml(id)}">
+        <div class="task__id">
+          ${lead}
+          <span>#${escapeHtml(id)}</span>
+          <button class="task__open" type="button" data-task-id="${escapeHtml(id)}" title="Open task details" aria-label="Open details for task ${escapeHtml(id)}">⤢</button>
+        </div>
+        <div class="task__body">
+          <p class="task__title">${escapeHtml(t.title || '')}</p>
+          <div class="task__meta">
+            <span class="task__tag">${escapeHtml(t.version_id || '?')}</span>
+            <span class="task__tag">${escapeHtml(t.kind || 'unclassified')}</span>
+            ${disciplineTag}
+            ${newcomerTag}
+            ${rankTag}
+            ${t.priority ? `<span class="task__tag">${escapeHtml(t.priority)}</span>` : ''}
+            <span>${minutesText}</span>
+            <span>${cpmText}</span>
+            ${touchesChip}
+            ${ageChip}
+          </div>
+        </div>
+        <div class="task__credits">
+          <span class="task__credits-num">${fmtNum(window.OTBBranding?.taskCreditValue?.(t) ?? t.credits_reward)}</span>
+          <span class="task__credits-label" title="${window.OTBBranding?.rewardModeNote?.() ?? ''}">${window.OTBBranding?.taskCreditLabel?.(t) ?? (curLabel() + ' Est.')}</span>
+        </div>
+        <div class="task__actions">${actions}</div>
+      </div>`;
+  }
+  const goalSel = { claim: new Set() };
+  function goalSelTotal() { return goalSel.claim.size; }
+  function pruneGoalSelection() {
+    const readyIds = new Set(state.work.todo.filter((t) => t.status === 'ready').map((t) => String(t.id)));
+    for (const id of Array.from(goalSel.claim)) if (!readyIds.has(id)) goalSel.claim.delete(id);
+  }
+  function renderGoalBulkToolbar() {
+    const bar = $('#goal-bulk-toolbar');
+    if (!bar) return;
+    if (goalSelTotal() === 0) { bar.hidden = true; return; }
+    bar.hidden = false;
+    const countEl = $('#goal-bulk-count');
+    if (countEl) countEl.textContent = `${goalSel.claim.size} to claim`;
+    const claimBtn = $('#goal-bulk-claim-btn');
+    if (claimBtn) {
+      claimBtn.disabled = goalSel.claim.size === 0;
+      claimBtn.textContent = goalSel.claim.size > 1 ? `Bulk claim (${goalSel.claim.size})` : 'Bulk claim';
+    }
+  }
+  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('');
+  }
+  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;
+  }
+  function setCount(sel, n) {
+    const el = $(sel);
+    if (!el) return;
+    el.hidden = false;
+    el.textContent = String(n);
+  }
+  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' },
+  };
+  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);
+  }
+  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');
+    }
+  }
+  function renderWork() {
+    renderTodoCards();
+    // ---- Completed → unchanged ledger table (the board's Completed tab is also
+    // a plain list, so the goal keeps its sortable table here). ----
+    const doneBody = document.querySelector('#goal-done tbody');
+    if (doneBody) {
+      const done = sortWorkRows(state.work.done, state.workSort.done);
+      const doneSlice = paginate(done, pagers.done);
+      doneBody.innerHTML = done.length
+        ? taskRowsDone(doneSlice)
+        : `<tr><td colspan="5" class="ledger__empty">${emptyStateHtml('Nothing completed yet.')}</td></tr>`;
+    }
+    ctx.workTabs?.setCount('todo', state.work.todo.length);
+    ctx.workTabs?.setCount('done', state.work.done.length);
+    reflectSortHeaders('done');
+    renderGoalBulkToolbar();
+  }
+  function renderTodoCards() {
+    const listEl = $('#goal-todo-list');
+    if (!listEl) return;
+    const sQuery = todoSearchQuery();
+    const kFilter = $('#f-goal-kind')?.value || '';
+    const dFilter = $('#f-goal-discipline')?.value || '';
+    const nFilter = $('#f-goal-newcomer')?.value || '';
+    const sortBy = $('#f-goal-sort')?.value || 'cpm';
+    let list = state.work.todo.filter((t) => {
+      if (!matchesTodoSearch(t, sQuery)) return false;
+      if (kFilter && (t.kind || 'unclassified') !== kFilter) return false;
+      if (dFilter && (t.discipline || 'unclassified') !== dFilter) return false;
+      if (nFilter === 'yes' && !t.newcomer_friendly) return false;
+      return true;
+    });
+    // Run-mode filter: parallel-safe (touches[] disjoint from the rest of the
+    // visible set) vs. file-conflicting. O(n²) over touches — fine at goal scale.
+    const fitFilter = $('#f-goal-fit')?.value || '';
+    if (fitFilter === 'parallel' || fitFilter === 'conflict') {
+      const base = list;
+      list = base.filter((t) => {
+        const conflicts = base.some((o) => o !== t && touchesConflict(t.touches, o.touches));
+        return fitFilter === 'parallel' ? !conflicts : conflicts;
+      });
+    }
+    if (sortBy === 'cpm') list = list.slice().sort((a, b) => creditsPerMinute(b) - creditsPerMinute(a));
+    else if (sortBy === 'credits') list = list.slice().sort((a, b) => creditVal(b) - creditVal(a));
+    else if (sortBy === 'minutes') list = list.slice().sort((a, b) => (Number(a.est_minutes) || Infinity) - (Number(b.est_minutes) || Infinity));
+    else if (sortBy === 'priority') list = list.slice().sort((a, b) => priorityRank(a.priority) - priorityRank(b.priority));
+    else if (sortBy === 'id') list = list.slice().sort((a, b) => Number(a.id) - Number(b.id));
+    else if (sortBy === 'status') list = list.slice().sort((a, b) => String(a.status).localeCompare(String(b.status)));
+
+    const countEl = $('#goal-todo-count');
+    if (countEl) countEl.textContent = state.work.todo.length ? `${list.length} of ${state.work.todo.length} shown` : '';
+    if (!list.length) {
+      listEl.innerHTML = emptyStateHtml(state.work.todo.length
+        ? 'No tasks match these filters. Try widening them.'
+        : `Nothing queued under this goal. Members can author bounded tasks here${state.me ? '' : ' once signed in'}.`);
+      return;
+    }
+    const shown = paginate(list, pagers.todo);
+    listEl.innerHTML = shown.map(goalTaskCardHtml).join('');
+  }
+  function errCode(data) {
+    const e = data && data.error;
+    return (e && typeof e === 'object') ? e.code : e;
+  }
+  function errDetails(data) {
+    const e = data && data.error;
+    return (e && typeof e === 'object' && e.details) ? e.details : (data || {});
+  }
+  function friendlyClaimError(status, data) {
+    const det = errDetails(data);
+    switch (errCode(data)) {
+      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(det.conflicts) ? det.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 det.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.`;
+    }
+  }
+  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>`;
+  }
+  function fillConflicts(container, pairs) {
+    if (!container) return;
+    if (pairs == null) {
+      container.innerHTML = emptyStateHtml('Conflicts could not be computed.');
+      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('')
+      : emptyStateHtml('No conflicts detected among this goal’s open tasks.')) + note;
+  }
+  const currentDetail = () => (state.current == null ? null : state.details.get(String(state.current)));
+  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 = '';
+    }
+  }
+  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();
+  }
+  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}`);
+  }
+  const isPending = (c) => !c.satisfied && !!c.pending_review;
+  function completionSummaryHtml(g, crit, sat, ringSize) {
+    const pending = crit.filter(isPending).length;
+    // task 1002164 — an open goal used to punt confirmation to the /goal-review
+    // CLI skill here; confirming now happens on this page, so the line reports
+    // what is actually actionable instead of naming a command.
+    const openLine = pending
+      ? `${fmtNum(pending)} criteri${pending === 1 ? 'on is' : 'a are'} met and ready to confirm.`
+      : 'Open — a criterion becomes confirmable once every task linked to it has shipped.';
+    const line = g.status === 'achieved' ? 'Goal achieved — every criterion confirmed.'
+      : (g.status === 'archived' ? 'Archived.' : openLine);
+    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>`;
+  }
+  function critListHtml(list, withDetail, canConfirm) {
+    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
+        ? `<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>`);
+      const pending = isPending(c);
+      // A Xenos sees the state but not the control — the server enforces either way.
+      const action = !pending ? ''
+        : (canConfirm
+          ? `<button type="button" class="crit__confirm" data-confirm-crit="${escapeHtml(String(c.id))}"
+               title="Every task linked to this criterion has shipped — confirm it as satisfied">Confirm</button>`
+          : '<span class="crit__flag" title="Every task linked to this criterion has shipped — a Metic can confirm it">Ready</span>');
+      const cls = c.satisfied ? ' crit--done' : (pending ? ' crit--pending' : '');
+      return `<li class="crit${cls}"><span class="crit__mark">${c.satisfied ? '✓' : (pending ? '!' : '')}</span>${body}<span class="crit__act">${action}</span></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;
+    // task 1002164 — an archived/achieved goal has nothing left to confirm.
+    const canConfirm = g.status === 'open' && canConfirmCriteria();
+    const band = $('#goal-completion-body');
+    if (band) band.innerHTML = completionSummaryHtml(g, crit, sat, 56) + critListHtml(crit.slice(0, CRITERIA_CAP), false, canConfirm);
+    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, canConfirm);
+    const back = $('#goal-completion-back');
+    if (back && state.current != null) back.setAttribute('href', `#/goal/${state.current}`);
+  }
+  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="member-pill${m.membership_kind === 'lead' ? ' member-pill--lead' : ''}">${m.membership_kind === 'lead' ? 'Manager' : 'Member'}</span>
+    </li>`;
+  }
+  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="member-pill${m.membership_kind === 'lead' ? ' member-pill--lead' : ''}">${m.membership_kind === '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.membership_kind === '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>${emptyStateHtml('No members yet — be the first to join.')}</li>`;
+    }
+    renderViewAllFoot('#goal-members-foot', members.length, MEMBER_CAP, 'members', 'members');
+    renderMembersFull(d);
+  }
+  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"><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>`
+        : 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}`);
+  }
+  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.membership_kind === 'lead');
+
+    const h = $('#goal-detail-h');
+    // 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')}`;
+    // task 1003224 — name / subtitle / Claude's prose at three weights; the rules live in goals-lib.
+    applyGoalProse({ sub: $('#goal-detail-subtitle'), desc: $('#goal-detail-desc'), claude: $('#goal-detail-claude') }, g);
+    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>`
+        : '';
+      // task 1953 — a private goal is join-GATED, not hidden, so the lock badge is
+      // informational for every viewer (the toggle that flips it lives in Actions,
+      // manager-only).
+      const lockSpan = g.visibility === 'private'
+        ? '<span class="goal-badge goal-badge--locked" title="Private — join is by invitation or an approved request">🔒 Private</span>' : '';
+      // task 1002689 — a PROTECTED-scope goal is join-gated too (Archon-mediated
+      // membership, ADR 0086 §3): badge it so it doesn't read as open-join. The
+      // flag is server-derived (scope_protected on the goal payload) — the client
+      // still never re-derives the protected roster.
+      const gateSpan = g.scope_protected
+        ? '<span class="goal-badge goal-badge--locked" title="Protected module scope — join by request; an Archon admits members">🛡 Archon-mediated</span>' : '';
+      meta.innerHTML = `<span>${escapeHtml(g.version_id || '')}</span> ${statusBadge(g.status)} ${lockSpan} ${gateSpan} ${scope} ${depsSpan}`;
+    }
+
+    // task 1762: the goal's own owner/manager (or an Archon) can invite/manage
+    // 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 canManage = g.status === 'open' && (isArchon() || isOwner || iAmLead);
+    renderActions(g, { joined, canManage });
+
+    // 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();
+    renderInviteBox(g.id, canManage, members);
+    renderMembers();
+
+    loadGoalTasks(g.id);
+    // task 1953 — my own pending request (any viewer) + the goal's pending queue
+    // (managers only); async, re-renders Actions + the pending panel on arrival.
+    loadGoalMembership(g.id, canManage);
+    void sat; void crit; // now read inside renderCompletion()
+  }
+  function renderActions(g, { joined, canManage }) {
+    const actions = $('#goal-detail-actions');
+    if (!actions) return;
+    const parts = [];
+    if (canManage) {
+      const nextVisibility = g.visibility === 'private' ? 'public' : 'private';
+      const label = g.visibility === 'private' ? '🔒 Private — make public' : 'Make private';
+      parts.push(`<button class="btn-ghost" id="goal-visibility-btn" type="button" data-next-visibility="${escapeHtml(nextVisibility)}">${label}</button>`);
+    }
+    if (g.status === 'open') {
+      if (joined) {
+        parts.push('<button class="btn-ghost" id="goal-leave-btn" type="button">Leave goal</button>');
+      } else if ((g.visibility === 'private' || g.scope_protected) && !isArchon()) {
+        if (state.myPendingRequest) {
+          parts.push('<span class="member-pill" title="Awaiting the owner/manager\'s approval">Requested</span>');
+          parts.push('<button class="btn-ghost" id="goal-withdraw-btn" type="button">Withdraw</button>');
+        } else {
+          parts.push('<button class="btn-ghost" id="goal-request-btn" type="button">🔒 Request to join</button>');
+        }
+      } else {
+        parts.push('<button class="landing__btn" id="goal-join-btn" type="button">Join goal</button>');
+      }
+    }
+    actions.innerHTML = parts.join(' ');
+    $('#goal-join-btn')?.addEventListener('click', () => joinLeave(g.id, 'join'));
+    $('#goal-leave-btn')?.addEventListener('click', () => joinLeave(g.id, 'leave'));
+    $('#goal-visibility-btn')?.addEventListener('click', (e) => toggleVisibility(g.id, e.currentTarget.dataset.nextVisibility));
+    $('#goal-request-btn')?.addEventListener('click', () => requestToJoin(g.id));
+    $('#goal-withdraw-btn')?.addEventListener('click', () => withdrawRequest(g.id, state.myPendingRequest && state.myPendingRequest.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
+      pruneGoalSelection();     // task 1002425 — drop ticks for cards that vanished (or a goal switch)
+      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;
+      // task 1002425 — To do is now a card list (#goal-todo-list), not a table.
+      const todoList = $('#goal-todo-list');
+      const doneBody = document.querySelector('#goal-done tbody');
+      if (todoList) todoList.innerHTML = emptyStateHtml('Tasks could not be loaded.');
+      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();
+    }
+  }
+  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;
+  }
+  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</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-kind">
+          <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 membershipKind = $('#goal-invite-kind')?.value || 'member';
+      if (builderId) inviteMember(goalId, builderId, membershipKind);
+    });
+  }
+  async function inviteMember(goalId, builderId, membershipKind) {
+    try {
+      // `membership_kind`, not `role` — ADR 0174 reserves that word for the three
+      // crafts (task 1003013).
+      await postJSON(`${API}/goals/${encodeURIComponent(goalId)}/members`, { builder_id: Number(builderId), membership_kind: membershipKind });
+      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 — request to join instead.');
+      else if (code === 'goal_private') toast('This goal is private — request to join instead.');
+      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.`);
+    }
+  }
+  async function toggleVisibility(goalId, visibility) {
+    try {
+      await patchJSON(`${API}/goals/${encodeURIComponent(goalId)}/visibility`, { visibility });
+      toast(visibility === 'private' ? 'Goal is now private.' : 'Goal is now public.');
+      await loadDetail(goalId, { force: true });
+      renderDetail(goalId);
+      renderList();
+    } catch (err) {
+      const code = err?.data?.error;
+      if (code === 'not_owner_or_manager') toast('Only this goal\'s owner or a manager (or an Archon) may do this.');
+      else if (code === 'goal_not_open') toast('Only an open goal can be managed.');
+      else toast('Could not update visibility just now.');
+    }
+  }
+  async function requestToJoin(goalId) {
+    try {
+      await postJSON(`${API}/goals/${encodeURIComponent(goalId)}/requests`, {});
+      toast('Request sent — the owner or a manager will review it.');
+      await loadDetail(goalId, { force: true });
+      renderDetail(goalId);
+    } catch (err) {
+      const code = err?.data?.error;
+      if (code === 'request_pending') toast('You already have a pending request or invitation for this goal.');
+      else if (code === 'already_a_member') toast('You are already a member of this goal.');
+      else if (code === 'goal_is_open') toast('This goal is open — joining directly instead.');
+      else toast('Could not send the request just now.');
+    }
+  }
+  async function withdrawRequest(goalId, reqId) {
+    if (reqId == null) return;
+    try {
+      await postJSON(`${API}/goals/${encodeURIComponent(goalId)}/requests/${encodeURIComponent(reqId)}/withdraw`, {});
+      toast('Request withdrawn.');
+      await loadDetail(goalId, { force: true });
+      renderDetail(goalId);
+    } catch (err) {
+      toast((err && err.data && err.data.message) || 'Could not withdraw that request just now.');
+    }
+  }
+  function pendingRequestWho(r) {
+    return r.display_name || (r.github_login ? `@${r.github_login}` : `builder #${r.builder_id}`);
+  }
+  function pendingRequestsHtml(rows) {
+    const requests = rows.filter((r) => r.kind === 'request');
+    const invites = rows.filter((r) => r.kind === 'invite');
+    const requestLi = (r) => `<li class="pending-row">
+        <span class="pending-row__who">${escapeHtml(pendingRequestWho(r))}</span>
+        ${r.note ? `<span class="pending-row__note">“${escapeHtml(r.note)}”</span>` : ''}
+        <span class="pending-row__actions">
+          <button class="btn-ghost" type="button" data-approve-req="${escapeHtml(String(r.id))}">Approve</button>
+          <button class="btn-ghost" type="button" data-deny-req="${escapeHtml(String(r.id))}">Deny</button>
+        </span>
+      </li>`;
+    const inviteLi = (r) => `<li class="pending-row">
+        <span class="pending-row__who">${escapeHtml(pendingRequestWho(r))}</span>
+        <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="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() {
+    const box = $('#goal-pending');
+    if (!box) return;
+    const rows = state.pendingRequests;
+    if (!rows || !rows.length) { box.hidden = true; box.innerHTML = ''; return; }
+    box.hidden = false;
+    box.innerHTML = pendingRequestsHtml(rows);
+  }
+  async function loadGoalMembership(goalId, canManage) {
+    try {
+      const inbox = await getJSON(`${API}/goals/inbox`);
+      if (!sameId(state.current, goalId)) return;
+      state.myPendingRequest = (inbox.myPendingRequests || []).find((r) => sameId(r.goal_id, goalId)) || null;
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      if (!sameId(state.current, goalId)) return;
+      state.myPendingRequest = null;
+    }
+    if (canManage) {
+      try {
+        const r = await getJSON(`${API}/goals/${encodeURIComponent(goalId)}/requests`);
+        if (!sameId(state.current, goalId)) return;
+        state.pendingRequests = r.requests || [];
+      } catch (err) {
+        if (err && err.message === 'redirecting to auth') return;
+        if (!sameId(state.current, goalId)) return;
+        state.pendingRequests = null;
+      }
+    } else {
+      state.pendingRequests = null;
+    }
+    if (!sameId(state.current, goalId)) return;
+    renderPendingRequests();
+    const d = currentDetail();
+    if (d) renderActions(d.goal, { joined: (d.members || []).some((m) => sameId(m.builder_id, selfId())), canManage });
+  }
+  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;
+  }
+
+    return { GOAL_SORTS, WORK_SORT_HEADERS, errCode, errDetails, friendlyClaimError, goalSel, goalSelTotal, loadDetail, loadDirectory, loadGoalTasks, pagers, reflectSortHeaders, renderDetail, renderGoalBulkToolbar, renderList, renderTodoCards, renderWork };
+  };
+})();