@bongos/core 1.17.0

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

@@ -0,0 +1,3028 @@
+// public-builders/builders.js — the authenticated /builders single-page UI.
+//
+// Read-only across the wire EXCEPT the per-task copy-prompt button, which is
+// purely client-side (writes to the clipboard, no server call).
+//
+// Auth model: cookie-based (gds_session, set by /api/bongos/auth/web/callback;
+// the legacy pms_session cookie is still accepted on read during V3 rollout).
+// On a 401 from /api/bongos/me we render an unauth landing card with a Sign-in
+// button; on a 401 from any other endpoint we redirect straight into the web
+// flow (the user was authenticated and now isn't — likely an expired session).
+
+(() => {
+  'use strict';
+
+  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 AUTH_NEEDED = 'auth-needed';
+
+  // moduleOn(name) — feature-module gate (R60, task 1199), shared via window.OTB
+  // (dom-utils.js). Reads the injected window.__MODULES__; defaults to TRUE when a
+  // module flag is missing so the full UI shows rather than silently hiding.
+  const { moduleOn } = window.OTB;
+
+  // ---- tiny helpers --------------------------------------------------------
+  // escapeHtml / $ / fmtNum / fmtDate / rankLabel / toast now come from the
+  // shared window.OTB toolkit (dom-utils.js, loaded first). Thin wrappers keep
+  // this file's exact variants (date-only fmtDate; '—' rankLabel empty; a
+  // 2200ms clearing toast). renderRankBadge + RANK_ORDER stay local below.
+  const { escapeHtml, $, fmtNum } = window.OTB;
+  const fmtDate = (iso) => window.OTB.fmtDate(iso);
+  const rankLabel = (rank) => window.OTB.rankLabel(rank);
+  const toast = (msg) => window.OTB.toast(msg, { duration: 2200, clear: true });
+
+  // Instance strings from the server-injected pack (window.__BRANDING__ is set
+  // synchronously in <head>, before this script) — never a hardcoded host brand
+  // (ADR 0062 §3). Neutral fallbacks so a missing pack degrades gracefully.
+  const brandWorld = () => (window.__BRANDING__ && window.__BRANDING__.identity && window.__BRANDING__.identity.worldName) || 'the project';
+  const curLabel = (caps) => {
+    const l = (window.__BRANDING__ && window.__BRANDING__.currency && window.__BRANDING__.currency.label) || 'credits';
+    return caps ? l.charAt(0).toUpperCase() + l.slice(1) : l;
+  };
+
+  async function getJSON(path, opts = {}) {
+    const res = await api.request('GET', path);
+    if (res.status === 401) {
+      if (opts.softAuth) {
+        const err = new Error(AUTH_NEEDED);
+        err.code = AUTH_NEEDED;
+        throw err;
+      }
+      window.location.assign(`${API}/auth/web/start`);
+      throw new Error('redirecting to auth');
+    }
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.data;
+  }
+
+  async function patchJSON(path, body) {
+    const res = await api.request('PATCH', path, { body });
+    if (res.status === 401) {
+      window.location.assign(`${API}/auth/web/start`);
+      throw new Error('redirecting to auth');
+    }
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.data;
+  }
+
+  async function postJSON(path, body) {
+    const res = await api.request('POST', path, { body });
+    if (res.status === 401) {
+      window.location.assign(`${API}/auth/web/start`);
+      throw new Error('redirecting to auth');
+    }
+    if (!res.ok) {
+      let detail = `${path} → ${res.status}`;
+      let code = null;
+      try {
+        const j = res.data;
+        // Prefer the human-facing message; fall back to the machine code.
+        detail = j.message || j.detail || j.error || detail;
+        code = j.error || null;
+      } catch (_) { /* keep default */ }
+      const err = new Error(detail);
+      err.status = res.status;
+      err.code = code;
+      throw err;
+    }
+    return res.data;
+  }
+
+  // ---- shared render helpers (C10) ----------------------------------------
+
+  // emptyRow — the placeholder/error <tr> every ledger table renders when it has
+  // nothing (or failed) to show. `message` is plain copy (escaped defensively
+  // even though current callers pass static literals).
+  function emptyRow(colspan, message) {
+    return `<tr><td colspan="${colspan}" class="ledger__empty">${escapeHtml(message)}</td></tr>`;
+  }
+
+  // signClasses — the up/down/flat BEM modifier for a signed number. `prefix` is
+  // the block, e.g. signClasses(delta, 'karma-feed__delta') → 'karma-feed__delta--up'.
+  // The +/- TEXT differs per feed (fmtNum vs raw int vs '±0'), so callers format
+  // the displayed value themselves.
+  function signClasses(n, prefix) {
+    const v = Number(n) || 0;
+    return `${prefix}--${v > 0 ? 'up' : v < 0 ? 'down' : 'flat'}`;
+  }
+
+  // renderPager — the works-wrought / roster twin pager. Clamps state.page into
+  // range (mutating it), hides the pager when there is ≤1 page, writes the
+  // "start–end of total" range label, and toggles prev/next. Returns { start } so
+  // the caller can slice. NOTE: the leaderboard pager deliberately does NOT use
+  // this — it never clamps and keeps its range/buttons always visible.
+  function renderPager(state, total, pageSize, { pagerEl, rangeEl, prevBtn, nextBtn }) {
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    if (state.page >= pageCount) state.page = pageCount - 1;
+    if (state.page < 0) state.page = 0;
+    const start = state.page * pageSize;
+    if (pagerEl) {
+      if (pageCount > 1) {
+        pagerEl.hidden = false;
+        if (rangeEl) {
+          const end = Math.min(start + pageSize, total);
+          rangeEl.textContent = `${start + 1}–${end} of ${total}`;
+        }
+        if (prevBtn) prevBtn.disabled = state.page === 0;
+        if (nextBtn) nextBtn.disabled = state.page >= pageCount - 1;
+      } else {
+        pagerEl.hidden = true;
+      }
+    }
+    return { start };
+  }
+
+  // ---- repo info (the clone URL the welcome walkthrough hands a newcomer) ---
+  //
+  // The /builder-* commands live INSIDE the repo (.claude/skills/, shelling out
+  // to scripts/gds/*.js). Setup now runs on a hosted dev box (#777), so the
+  // newcomer never clones a repo locally — the old repo-clone walkthrough (and
+  // the /public/repo-info fetch that fed it) was removed with the setup-first
+  // redesign. The /public/repo-info surface still exists for other callers.
+
+  // ---- rank badge (V3.R16 #240) -------------------------------------------
+  // Three live ranks per ADR 0018: archon > metic > xenos. Missing rank
+  // renders an em-dash plaque so the layout never breaks.
+
+  const RANK_ORDER = { archon: 4, metic: 3, thetes: 2, xenos: 1 };
+
+  function rankWeight(rank) {
+    return RANK_ORDER[rank] ?? -1;
+  }
+
+  // Coerce any rank that isn't one of the four live ranks (archon/metic/thetes/
+  // xenos — #692 / ADR 0034) to the entry rank. Reserved values still on the
+  // citizen/divine ladder would otherwise render as a dashed "unknown" plaque
+  // while /builders/ranks shows them as xenos. Applied to the
+  // builder-facing standing surfaces — the welcome panel, the profile Standing
+  // badge, and the public Roll — so they agree. NOT applied to the Archon-only
+  // roster below, which intentionally shows the true stored rank so an Archon
+  // can spot and fix a stray value. Mirrors the RANK_LADDER coercion in ranks.js.
+  function normalizeRank(rank) {
+    return RANK_ORDER[rank] ? rank : 'xenos';
+  }
+
+  // Short one-line summary of what each rank unlocks. Kept terse — the hall's
+  // job is the daily action surface, not the full permissions reference (that
+  // lives at /builders/ranks). Sourced from docs/canonical-permissions.md.
+  // Used by the rank-badge hover tooltip (opts.tip) and mirrored in ranks.js.
+  const RANK_UNLOCKS = {
+    xenos: [
+      'Read every public page.',
+      'Claim and ship tasks an Archon has flagged newcomer-friendly.',
+      `Earn ${curLabel()} for shipped work and karma for ratified ideas.`,
+    ],
+    thetes: [
+      'Claim and ship any task in the general queue — no longer only newcomer-friendly work.',
+      `Keep earning ${curLabel()} and karma for every clean ship.`,
+      'No triage, blockers, planning, or task-shaping yet — those levers open at Metic.',
+    ],
+    metic: [
+      'Claim and ship any task in the ready queue.',
+      'Triage the idea inbox; resolve blockers; run planning sessions.',
+      'Propose new version criteria for Archon ratification.',
+    ],
+    archon: [
+      'Create, promote, and edit tasks; reshape the dependency graph.',
+      'Grant or revoke ranks; close versions; confirm ships past the grader.',
+      'Adjudicate vulnerability reports and override requests.',
+    ],
+  };
+
+  // Monotonic counter for unique tooltip ids (aria-describedby). Re-renders
+  // replace innerHTML so duplicates would otherwise collide.
+  let rankTipSeq = 0;
+
+  function renderRankBadge(rank, opts = {}) {
+    const label = escapeHtml(rankLabel(rank));
+    const ariaLabel = rank ? `Rank: ${rankLabel(rank)}` : 'Rank not yet recorded';
+    const variant = RANK_ORDER[rank] ? `rank-badge--${rank}` : 'rank-badge--unknown';
+
+    // Plain plaque (default — used in tables, roster, leaderboard).
+    if (!opts.tip || !RANK_UNLOCKS[rank]) {
+      const title = opts.title ? ` title="${escapeHtml(opts.title)}"` : '';
+      return `<span class="rank-badge ${variant}" aria-label="${escapeHtml(ariaLabel)}"${title}>${label}</span>`;
+    }
+
+    // Tooltip variant — a hover/focus popover lists what this rank unlocks,
+    // and a transparent "stretched link" overlay makes the whole plaque
+    // navigate to the full ladder. We keep the badge a <span> (not an <a>) on
+    // purpose: the hall's global a:hover rule repaints links terracotta, which
+    // would otherwise bleed into the plaque AND the tip text. The overlay
+    // anchor carries the navigation + keyboard focus without touching colour.
+    // NB: this markup contains a <ul>, which is NOT valid inside a <p>. If a
+    // caller drops this tipped badge into a <p>, the HTML parser auto-closes
+    // the <p> at the <ul> and hoists the list out of .rank-tip — the unlocks
+    // then render as a visible block instead of a hover popover (#530). Render
+    // it inside a <div>/inline container, never a <p>.
+    const tipId = `rank-tip-${rank}-${rankTipSeq++}`;
+    const items = RANK_UNLOCKS[rank].map((u) => `<li>${escapeHtml(u)}</li>`).join('');
+    return `<span class="rank-badge-wrap">` +
+      `<span class="rank-badge ${variant} rank-badge--tipped" aria-hidden="true">${label}</span>` +
+      `<a class="rank-badge-stretch" href="/ranks" ` +
+        `aria-describedby="${tipId}" ` +
+        `aria-label="${escapeHtml(ariaLabel)} — see all standings"></a>` +
+      `<span class="rank-tip" id="${tipId}" role="tooltip">` +
+        `<span class="rank-tip__label">What ${label} unlocks</span>` +
+        `<ul class="rank-tip__list">${items}</ul>` +
+        `<span class="rank-tip__more">Walk the full ladder →</span>` +
+      `</span>` +
+    `</span>`;
+  }
+
+  // ---- profile -------------------------------------------------------------
+
+  // Cached karma payload from the most recent /me call. Lets non-karma
+  // re-renders (e.g. saving a discipline preference, which PATCHes the
+  // builder row but not karma) keep showing the same karma badge instead
+  // of flickering to zero. Updated only by loadAll().
+  let lastKarmaState = null;
+  // V3.R84 (#302), criterion C3: cache the most recent /me `cost` status so the
+  // Standing-card budget banner survives re-renders triggered by responses that
+  // don't carry cost (e.g. the disciplines PATCH).
+  let lastCostState = null;
+  // task 1013 / ADR 0073: cache the most recent /me `needs` list so the
+  // Standing-card "Action needed" banner survives re-renders that don't carry
+  // needs (same pattern as lastCostState).
+  let lastNeedsState = null;
+
+  // Cached /me payload from the most recent loadAll() call. Used by the
+  // welcome-chip reopen path (#408) so we can re-render the welcome panel
+  // from cached state without a fresh /me round-trip. Distinct from
+  // lastKarmaState: that one only stashes karma; this stashes the whole
+  // payload so renderWelcome's builder + onboarding args are available.
+  let lastMeState = null;
+
+  // Instance repo coords for the "get the code" clone block. The public instance
+  // manifest (GET /api/bongos/instance) is the channel for cross-instance repo coords
+  // — clientBranding deliberately omits `repo`, so window.__BRANDING__ can't carry
+  // it. Cached; the welcome re-renders when it lands so a fresh instance shows ITS
+  // OWN repo, never a hardcoded one (ADR 0062 §3, task 1705).
+  let instanceRepo = null;
+  async function loadInstanceRepo() {
+    try {
+      const inst = await getJSON(`${API}/instance`, { softAuth: true });
+      instanceRepo = inst && inst.repo && !inst.repo.error ? inst.repo : null;
+      if (instanceRepo && lastMeState) renderWelcome(lastMeState.builder, lastMeState.onboarding || null);
+    } catch (_) { /* best-effort — the clone block falls back to generic guidance */ }
+  }
+
+  // ---- hall section nav (#408) --------------------------------------------
+  //
+  // Single source of truth for what appears in the sticky strip at top of
+  // the page. Each entry binds a section's DOM id to a short Cinzel label
+  // and any rank/visibility gates. Order here is render order, not chip
+  // order — but rendering happens after all sections are in the DOM, so
+  // the two end up matching.
+  //
+  // Filter rules at render time:
+  //   archonOnly: true → skip unless /me returns rank=archon.
+  //   welcomeChip:true → ALWAYS shown pre-graduation (even when the
+  //                      panel is dismissed) so the builder can re-open
+  //                      it. Hidden post-graduation just like the panel.
+  //   default          → skip if the section's element is [hidden].
+  //
+  // Adding a new section: add a row here AND give the <section> a stable
+  // id. The nav inherits ranking from /me automatically.
+
+  // Hall section order (#726). The hall is a citizen's PERSONAL surface:
+  // Standing, Honours, Karma (with acclaim folded under it), Works, then
+  // Marks/Curve/Bounty/Roll. The Archon monitoring sections (Watch/Gate/Roster)
+  // moved to the dedicated /builders/watch page; the per-skill model picker
+  // (Voices) + craft preferences moved to /builders/settings. Both are linked
+  // from the header gated-nav, not the section strip.
+  //
+  // BV1.R75 (ADR 0062 §4): the SECTIONS array + the inline <section> markup were
+  // the two hardcoded copies of "what the hall shows". Both are gone. The single
+  // source of truth is now the hall-widget registry (window.OTB, dom-utils.js):
+  // hall-widgets.js registers the core widgets above (loads before this script),
+  // a module's client script registers its own (gated by loader.js + moduleOn).
+  // SECTIONS() derives the nav rows from the registry, preserving order + the
+  // per-widget gates (welcomeChip / archonOnly) carried on the registry entry.
+  const SECTIONS = () => window.OTB.hallWidgets().map((wgt) => ({
+    id: wgt.id,
+    label: wgt.label,
+    view: wgt.view || 'home',
+    welcomeChip: !!wgt.welcomeChip,
+    archonOnly: !!wgt.archonOnly,
+  }));
+
+  // task 1723: which container a widget mounts into. A widget may declare
+  // `zone` (a fine-grained Home slot) or `view` (home/standing/achievements/
+  // leaderboard); both default to the Home main zone so pre-redesign module
+  // widgets still land somewhere visible. Every container lives INSIDE <main>,
+  // so the `main .scroll` sweeps (newcomer gate, landing hide-all) keep working.
+  const VIEW_CONTAINERS = {
+    home: 'zone-home-main',
+    standing: 'zone-standing',
+    achievements: 'zone-achievements',
+    leaderboard: 'zone-leaderboard',
+  };
+  function widgetHost(wgt) {
+    const zone = wgt.zone ? document.getElementById(`zone-${wgt.zone}`) : null;
+    if (zone) return zone;
+    const viewId = VIEW_CONTAINERS[wgt.view || 'home'] || VIEW_CONTAINERS.home;
+    return document.getElementById(viewId) || document.querySelector('main');
+  }
+
+  // mountHallWidgets — stamp every registered widget's <section> into its view
+  // container (falling back to <main>), in registry order, then render its
+  // skeleton via mount(host). Idempotent: a second call (defensive) re-uses an
+  // existing <section>. Runs once at bootstrap BEFORE wireEvents() so the static
+  // element ids the data-render + event-wiring code expects (#welcome-minimize,
+  // #recent-ships, #lb-prev, …) are present. Each widget mount is
+  // failure-isolated so one bad widget can't blank the hall.
+  function mountHallWidgets() {
+    const main = document.querySelector('main');
+    if (!main || typeof window.OTB.hallWidgets !== 'function') return;
+    for (const wgt of window.OTB.hallWidgets()) {
+      try {
+        let section = document.getElementById(wgt.id);
+        if (!section) {
+          section = document.createElement('section');
+          section.id = wgt.id;
+          (widgetHost(wgt) || main).appendChild(section);
+        }
+        section.className = wgt.sectionClass || 'scroll';
+        if (wgt.labelledby) section.setAttribute('aria-labelledby', wgt.labelledby);
+        // hiddenByDefault widgets (welcome/onboarding/karma/acclaim/curve) start
+        // hidden exactly as the old inline markup did; their own render code
+        // un-hides them when there's something to show.
+        if (wgt.hiddenByDefault) section.hidden = true;
+        wgt.mount(section);
+      } catch (err) {
+        console.error(`[builders] hall widget "${wgt && wgt.id}" failed to mount`, err);
+      }
+    }
+    // brand-apply.js's currency-label pass ran at DOMContentLoaded, BEFORE these
+    // skeletons existed — re-run it over the mounted widgets so [data-currency-
+    // label]/[data-currency-tmpl] cells show the instance's unit, not the fallback.
+    window.OTBBranding?.applyCurrencyLabels?.(main);
+  }
+
+  // The IntersectionObserver instance survives across re-renders (it's
+  // disconnected and re-created when nav contents change). Stored on
+  // module scope so nav re-renders can dispose of the previous one.
+  let navObserver = null;
+
+  // task 1723: the old sticky chip strip is gone. renderNav now settles the
+  // three nav surfaces the shell owns or hosts:
+  //   1. the sidebar's gated entries, via window.OTBShell.applyAccess (cosmetic —
+  //      the server enforces every page + endpoint regardless, ADR 0016);
+  //   2. the Home re-open affordance for a dismissed welcome banner (the old
+  //      welcome chip's only job);
+  //   3. the Standing view's in-page section rail (#standing-rail), rebuilt from
+  //      the registry's standing widgets that are currently shown.
+  // Keeps its (builder, onboarding) signature — all call sites pass them.
+  function renderNav(builder, onboarding) {
+    const isArchon = (builder?.rank || '').toLowerCase() === 'archon';
+    const graduated = !!(onboarding && onboarding.graduated);
+    // #833: for a newcomer the Work entry surfaces only once the "ship three"
+    // stage is current — before then the path reads one action at a time.
+    const stages = Array.isArray(onboarding?.stages) ? onboarding.stages : [];
+    const shipStepCurrent = stages.some((s) => s.id === 'ship_three' && s.is_current && !s.cleared);
+    window.OTBShell?.applyAccess({
+      authed: true,
+      rank: normalizeRank(builder?.rank),
+      graduated,
+      showWork: shipStepCurrent,
+      builder,
+    });
+
+    // Re-open affordance: pre-graduation, when the welcome banner is dismissed
+    // (hidden), a small link brings it back (reopenWelcomeFromNav).
+    const reopen = document.getElementById('welcome-reopen');
+    if (reopen) {
+      const welcomeEl = document.getElementById('welcome-scroll');
+      reopen.hidden = !(welcomeEl && welcomeEl.hidden && !graduated);
+    }
+
+    // Standing section rail: one link per visible standing panel.
+    const rail = document.getElementById('standing-rail');
+    if (rail) {
+      const items = SECTIONS().filter((s) => {
+        if (s.view !== 'standing') return false;
+        if (s.archonOnly && !isArchon) return false;
+        const el = document.getElementById(s.id);
+        return !!el && !el.hidden;
+      });
+      rail.innerHTML = items.map((s) =>
+        `<a class="rail-link" href="#${escapeHtml(s.id)}" data-section="${escapeHtml(s.id)}">${escapeHtml(s.label)}</a>`
+      ).join('');
+      rail.hidden = items.length < 2;
+    }
+
+    // Rebuild the observer to track whichever sections are currently in
+    // the rail. Doing this on each renderNav call covers both initial load
+    // and post-dismiss/re-open re-renders.
+    setupNavObserver();
+  }
+
+  // #748: newcomer gate. A Xenos sees a deliberately spare hall — their
+  // onboarding path and their Standing card — until they graduate to Thetes.
+  // Everything else (Honours, Karma, Acclaim, Works, Claim, Marks, Bounty,
+  // Roll) stays hidden so a fresh arrival isn't drowned before they've
+  // shipped their first works. The Settings link is the exception (task
+  // 1291): a newcomer needs it for first-time setup — CLI re-auth (Settings
+  // → CLI Access) and choosing their craft both live there. #766 also hides the
+  // citizen's primer + the "how the system works" maps — a newcomer's path is
+  // action-only. #770: the Work Board link IS shown to a Xenos — a newcomer
+  // needs to find the work they can claim, so the path "find work → claim →
+  // ship three" stays one click away; the rank ladder also stays so they can
+  // see what they're climbing toward. This is cosmetic UX only — every data
+  // endpoint stays server-rank-gated regardless (the Work Board's claimable
+  // feed only returns work accessible to the caller's rank), and a Xenos who
+  // types /primer or /diagrams directly is bounced to /builders/not-ready by
+  // the server (#770). Set early in loadAll so the async karma/acclaim feeds
+  // (which un-hide their own scroll on data) respect it; the section-hiding
+  // sweep then runs before renderNav so the chip strip matches.
+  const NEWCOMER_VISIBLE_SECTIONS = new Set([
+    'welcome-scroll', 'onboarding-scroll', 'profile-scroll',
+  ]);
+  let newcomerGated = false;
+
+  function applyNewcomerGate() {
+    if (!newcomerGated) return;
+    document.querySelectorAll('main .scroll').forEach((el) => {
+      if (!NEWCOMER_VISIBLE_SECTIONS.has(el.id)) el.hidden = true;
+    });
+    // task 1723: the newcomer LINK gating (primer/diagrams/atlas hidden; Work
+    // only once the "ship three" stage is current, #833; Settings always
+    // visible, task 1291) moved to the shell sidebar — renderNav reports rank +
+    // showWork to OTBShell.applyAccess and shell.js resolves the 'member'/'work'
+    // gates. This function keeps only the widget-section sweep.
+  }
+
+  function setupNavObserver() {
+    if (navObserver) {
+      navObserver.disconnect();
+      navObserver = null;
+    }
+    const list = document.getElementById('standing-rail');
+    if (!list) return;
+
+    const chipsBySection = new Map();
+    list.querySelectorAll('a[data-section]').forEach((a) => {
+      chipsBySection.set(a.dataset.section, a);
+    });
+    if (chipsBySection.size === 0) return;
+
+    const sections = Array.from(chipsBySection.keys())
+      .map((id) => document.getElementById(id))
+      .filter((el) => el && !el.hidden);
+
+    if (sections.length === 0) return;
+
+    // rootMargin trims the active band to roughly the upper third of the
+    // viewport (top 40% ignored, bottom 55% ignored — a ~5% horizontal
+    // strip about a third of the way down the page). The active flip
+    // happens when a section headline crosses that band, not when the
+    // section first peeks in. Matches the rationale in the task spec.
+    navObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const id = entry.target.id;
+          chipsBySection.forEach((chip, sectionId) => {
+            chip.classList.toggle('rail-link--active', sectionId === id);
+          });
+          // Auto-scroll the active chip into view on mobile so the user
+          // can see what section they're in without having to scroll the
+          // nav strip themselves.
+          const active = chipsBySection.get(id);
+          if (active && window.matchMedia('(max-width: 640px)').matches) {
+            active.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+          }
+          break;
+        }
+      }
+    }, {
+      rootMargin: '-40% 0px -55% 0px',
+      threshold: 0,
+    });
+
+    sections.forEach((sec) => navObserver.observe(sec));
+  }
+
+  function reopenWelcomeFromNav(e) {
+    e.preventDefault();
+    const id = window.__buildersSelfId;
+    if (!id || !lastMeState) return;
+    try {
+      window.localStorage.removeItem(welcomeDismissalKey(id));
+    } catch (_) { /* private mode — re-open in-memory only */ }
+    // Re-render welcome from cached /me state and refresh the nav so the
+    // chip drops its "dismissed" styling.
+    renderWelcome(lastMeState.builder, lastMeState.onboarding || null);
+    renderNav(lastMeState.builder, lastMeState.onboarding || null);
+    // Now scroll to the (newly-unhidden) welcome panel.
+    const target = document.getElementById('welcome-scroll');
+    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  function renderLanding() {
+    // task 1723: collapse the shell nav to the signed-out minimum (Home + a
+    // Sign-in button). Cosmetic — the server gates every page regardless.
+    window.OTBShell?.applyAccess({ authed: false });
+
+    const welcome = $('#welcome-line');
+    if (welcome) welcome.textContent = '';
+
+    const landing = $('#landing-root');
+    if (landing) {
+      landing.hidden = false;
+      landing.innerHTML = `
+        <div class="scroll landing">
+          <h2 class="scroll__h">Welcome</h2>
+          <p class="landing__lede">
+            This is the builders' hub for ${brandWorld()} — where builders claim
+            work, earn ${curLabel()}, and track their standing. Access is
+            invite-based: an Archon approves each new builder. To begin, request
+            access below.
+          </p>
+
+          <div class="landing__request" id="landing-request">
+            <h3 class="landing__request-h">New here — request access</h3>
+            <p class="landing__request-lede">
+              Leave your GitHub username and an Archon will let you in. No coding
+              needed to start — once you're approved, sign in with GitHub and a
+              step-by-step guide takes you the rest of the way.
+            </p>
+            <form class="landing__form" id="access-request-form" novalidate>
+              <label class="landing__field">
+                <span>GitHub username <span class="landing__req-mark" aria-hidden="true">*</span></span>
+                <input type="text" id="ar-login" name="github_login" autocomplete="username"
+                       placeholder="e.g. octocat" maxlength="40" required>
+              </label>
+              <label class="landing__field">
+                <span>Your name <span class="landing__opt">(optional)</span></span>
+                <input type="text" id="ar-name" name="display_name" autocomplete="name"
+                       placeholder="So the Archon knows who you are" maxlength="100">
+              </label>
+              <label class="landing__field">
+                <span>A word on why <span class="landing__opt">(optional)</span></span>
+                <input type="text" id="ar-note" name="note"
+                       placeholder="How you got here, what you'd build" maxlength="500">
+              </label>
+              <p class="landing__form-hint">
+                No GitHub account yet? Make a free one at
+                <a href="https://github.com/signup" target="_blank" rel="noopener noreferrer">github.com</a>
+                first — your username is all we need.
+              </p>
+              <button type="submit" class="landing__btn landing__btn--request" id="ar-submit">Request access</button>
+              <p class="landing__request-status" id="ar-status" aria-live="polite"></p>
+            </form>
+          </div>
+
+          <p class="landing__signin-note">
+            Already a member? <a href="${API}/auth/web/start">Sign in with GitHub</a>.
+            We store only your GitHub login, avatar, and the work you ship.
+          </p>
+        </div>
+      `;
+      wireAccessRequestForm();
+    }
+
+    // Hide every widget section — nothing to show until the visitor signs in.
+    document.querySelectorAll('main .scroll').forEach((el) => {
+      if (!landing || !landing.contains(el)) el.hidden = true;
+    });
+  }
+
+  // Wires the public landing's access-request form. Submits to the one public
+  // GDS write (POST /access-requests). On success the form collapses into a
+  // confirmation so the stranger knows the Archon has been pinged.
+  function wireAccessRequestForm() {
+    const form = $('#access-request-form');
+    if (!form) return;
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const loginEl = $('#ar-login');
+      const nameEl = $('#ar-name');
+      const noteEl = $('#ar-note');
+      const submit = $('#ar-submit');
+      const status = $('#ar-status');
+      const login = (loginEl?.value || '').trim().replace(/^@/, '');
+      if (!login) {
+        if (status) { status.dataset.kind = 'err'; status.textContent = 'A GitHub username is needed.'; }
+        if (loginEl) loginEl.focus();
+        return;
+      }
+      if (submit) { submit.disabled = true; submit.textContent = 'Sending…'; }
+      if (status) { status.dataset.kind = ''; status.textContent = ''; }
+      try {
+        const data = await postJSON(`${API}/access-requests`, {
+          github_login: login,
+          display_name: (nameEl?.value || '').trim() || null,
+          note: (noteEl?.value || '').trim() || null,
+        });
+        const req = $('#landing-request');
+        if (req) {
+          req.innerHTML = `
+            <h3 class="landing__request-h">Your request is sent ✓</h3>
+            <p class="landing__request-lede">
+              ${data && data.already_pending
+                ? 'You were already in the queue — an Archon will approve you. Once approved, sign in with GitHub to get started.'
+                : 'An Archon has been notified and will approve you. Once approved, sign in with GitHub to get started.'}
+            </p>
+            <p class="landing__request-lede landing__request-lede--soft">
+              While you wait: install the Claude desktop app at
+              <a href="https://claude.com/download" target="_blank" rel="noopener noreferrer">claude.com/download</a>.
+              The full step-by-step guide appears here once you're in.
+            </p>`;
+        }
+      } catch (err) {
+        // Already known to the city — they don't need a request, they need to
+        // sign in. Both the "already a builder" and "already approved" cases
+        // collapse the form into a sign-in prompt rather than a red error.
+        if (err && (err.code === 'already_member' || err.code === 'already_approved')) {
+          const req = $('#landing-request');
+          if (req) {
+            req.innerHTML = `
+              <h3 class="landing__request-h">You already have access ✓</h3>
+              <p class="landing__request-lede">${escapeHtml(err.message || 'You already have access.')}</p>
+              <p class="landing__cta">
+                <a class="landing__btn" href="${API}/auth/web/start">Sign in with GitHub</a>
+              </p>`;
+          }
+          return;
+        }
+        if (submit) { submit.disabled = false; submit.textContent = 'Request access'; }
+        if (status) {
+          status.dataset.kind = 'err';
+          status.textContent = (err && err.status === 400)
+            ? 'That does not look like a GitHub username — check it and try again.'
+            : 'Could not send just now. Try again in a moment.';
+        }
+      }
+    });
+  }
+
+  // Reads the module-level lastKarmaState / lastCostState directly — every caller
+  // passed those same globals back in, so the params were redundant plumbing (C10).
+  function renderProfile(builder) {
+    const karma = lastKarmaState;
+    const cost = lastCostState;
+    const needs = lastNeedsState;
+    const avatar = builder.avatar_url
+      ? `<img class="profile__avatar" src="${escapeHtml(builder.avatar_url)}" alt="">`
+      : `<div class="profile__avatar" aria-hidden="true"></div>`;
+
+    const prefs = Array.isArray(builder.preferred_disciplines) ? builder.preferred_disciplines : [];
+
+    const rankBadge = builder.rank
+      ? renderRankBadge(normalizeRank(builder.rank), { tip: true })
+      : renderRankBadge(builder.rank, { title: 'No rank recorded yet' });
+
+    // #757: this builder's place on the Roll. Null until the leaderboard rows
+    // load (they're fetched async after the Standing card's first paint; the
+    // card re-renders once they arrive) — when null the stat simply omits.
+    const rollPlace = leaderboardPlace(builder.github_login);
+
+    // V3.R26 (#246): karma badge + 30-day delta. Drachmae and karma are two
+    // separate counters — drachmae = work shipped, karma = good citizenship
+    // (peer recognition + Archon ratifications). The tooltip on each badge
+    // spells the distinction out so a new builder can tell them apart.
+    const karmaTotal = Number(builder.karma) || 0;
+    const karma30d = karma ? Number(karma.delta_30d) || 0 : 0;
+    const karmaTrendText = karma30d > 0
+      ? `+${fmtNum(karma30d)} in 30d`
+      : (karma30d < 0 ? `${fmtNum(karma30d)} in 30d` : '±0 in 30d');
+    const karmaTrend = `<span class="karma-badge__trend ${signClasses(karma30d, 'karma-badge__trend')}">${karmaTrendText}</span>`;
+    const karmaTooltip = `Karma = peer recognition and approvals. ${curLabel(true)} = work shipped. The two counters move independently — see the karma feed for the audit trail.`;
+    const drachmaeTooltip = `${curLabel(true)} = total payout from shipped work. Karma is a separate counter for peer recognition and approvals.`;
+
+    // V3.R84 (#302), criterion C3: monthly-budget banner. `warn` (>=80%) is a
+    // heads-up; `over` (>=100%) means cost-incurring actions (ship, art pipeline)
+    // are blocked until an Archon raises the budget. Nothing renders under 80%.
+    const budgetBanner = (cost && (cost.level === 'warn' || cost.level === 'over'))
+      ? `<div class="profile__budget profile__budget--${cost.level}" role="status">
+           <strong>${cost.level === 'over' ? 'Monthly budget exceeded' : 'Approaching monthly budget'}</strong>
+           — $${escapeHtml(String(cost.spend_mtd_usd))} of $${escapeHtml(String(cost.budget_mtd_usd))} this month (${escapeHtml(String(cost.pct_used))}%).
+           ${cost.level === 'over'
+             ? 'Shipping and art generation are paused until an Archon raises your budget.'
+             : 'At 100% these actions pause until an Archon raises your budget.'}
+         </div>`
+      : '';
+
+    // task 1013 / ADR 0073: the consistent "Action needed" / "we cover it"
+    // banner. Renders the highest-priority `needs` item that isn't satisfied —
+    // amber + a Settings button when the system needs an input (e.g. the image
+    // key once free coverage ends), a calm green note while we cover it. Reads
+    // the SAME /me `needs` data the CLI session nudge does (builder-needs.js).
+    const need = (needs && Array.isArray(needs.items))
+      ? needs.items.find((n) => n && n.state !== 'satisfied')
+      : null;
+    const needsBanner = need
+      ? `<div class="profile__needs profile__needs--${need.state === 'action_needed' ? 'action' : 'covered'}" role="status">
+           <strong>${escapeHtml(need.title)}</strong> — ${escapeHtml(need.message)}
+           ${need.action && need.action.href
+             ? ` <a class="profile__needs-act" href="${escapeHtml(need.action.href)}">${escapeHtml(need.action.label || 'Set it up')} →</a>`
+             : ''}
+         </div>`
+      : '';
+
+    $('#profile-body').innerHTML = `
+      ${needsBanner}
+      ${budgetBanner}
+      ${avatar}
+      <div>
+        <div class="profile__name-row">
+          <p class="profile__name">${escapeHtml(builder.display_name || builder.github_login || 'Builder')}</p>
+          ${rankBadge}
+        </div>
+        <p class="profile__handle">@${escapeHtml(builder.github_login || 'unknown')}</p>
+        <div class="profile__stats">
+          <span>Member since ${fmtDate(builder.created_at)}</span>
+          <span title="${escapeHtml(karmaTooltip)}">${karmaTrend.replace(' in 30d', ' karma in 30d')}</span>
+          ${rollPlace ? `<span title="Your place on the leaderboard (top ${rollPlace.total}), ranked by ${curLabel()}.">#${rollPlace.place} on the leaderboard</span>` : ''}
+        </div>
+        <div class="profile__disciplines">
+          <span class="profile__disc-label">Preferred work:</span>
+          <span class="profile__disc-value">${prefs.length ? escapeHtml(prefs.join(', ')) : 'none chosen yet'}</span>
+          <a class="profile__disc-edit" href="/settings">Change in Settings →</a>
+        </div>
+      </div>
+      <div class="profile__credits">
+        <span class="profile__credits-num" title="${escapeHtml(drachmaeTooltip)}">${fmtNum(builder.total_credits)}</span>
+        <span class="profile__credits-label">${(window.OTBBranding?.currencyLabel?.() ?? 'credits')}</span>
+        <span class="profile__karma" title="${escapeHtml(karmaTooltip)}">
+          <span class="profile__karma-num">${fmtNum(karmaTotal)}</span>
+          <span class="profile__karma-label">karma</span>
+        </span>
+      </div>
+    `;
+    const welcomeLine = $('#welcome-line');
+    if (welcomeLine) {
+      welcomeLine.textContent = `Welcome back, ${builder.display_name || builder.github_login || 'builder'}.`;
+    }
+
+    // task 1723: the Home dashboard mirrors — quick-stat tiles + the standing
+    // summary card — are fed from the same /me payload. All writes are guarded:
+    // the widgets are registry-owned and a module could unregister them.
+    const setText = (id, text) => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = text;
+    };
+    setText('stat-credits', fmtNum(builder.total_credits));
+    setText('stat-karma', fmtNum(karmaTotal));
+    setText('stat-karma-sub', karmaTrendText);
+    const statRank = document.getElementById('stat-rank');
+    if (statRank) statRank.innerHTML = builder.rank ? renderRankBadge(normalizeRank(builder.rank), { tip: false }) : '—';
+    setText('stat-rank-sub', rollPlace ? `#${rollPlace.place} on the leaderboard` : '');
+    const statsSection = document.getElementById('home-stats');
+    if (statsSection && !newcomerGated) statsSection.hidden = false;
+
+    const homeStanding = document.getElementById('home-standing-body');
+    if (homeStanding) {
+      homeStanding.innerHTML = `
+        ${needsBanner}
+        ${budgetBanner}
+        <div class="profile profile--compact">
+          ${avatar}
+          <div>
+            <div class="profile__name-row">
+              <p class="profile__name">${escapeHtml(builder.display_name || builder.github_login || 'Builder')}</p>
+              ${rankBadge}
+            </div>
+            <p class="profile__handle">@${escapeHtml(builder.github_login || 'unknown')}</p>
+            <div class="profile__stats">
+              <span>Member since ${fmtDate(builder.created_at)}</span>
+              <span>${prefs.length ? escapeHtml(prefs.join(', ')) : 'no preferred work yet'}</span>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+    const homeStandingSection = document.getElementById('home-standing');
+    if (homeStandingSection && !newcomerGated) homeStandingSection.hidden = false;
+  }
+
+  // #731: renderCliTokenReissue / issueCliToken (V3.R91 #401) and
+  // renderDiscordLink / unlinkDiscord (F7, ADR 0033) moved to
+  // public-builders/settings.js — these controls now live on /builders/settings.
+
+  async function saveDisciplines() {
+    const selected = Array.from(document.querySelectorAll('.disc-pref'))
+      .filter((el) => el.checked)
+      .map((el) => el.value);
+    const btn = $('#disc-save');
+    if (btn) { btn.disabled = true; btn.textContent = 'Saving…'; }
+    try {
+      const resp = await patchJSON(`${API}/me/disciplines`, { preferred_disciplines: selected });
+      renderProfile(resp.builder);
+      toast(selected.length ? `Preferred work: ${selected.join(', ')}` : 'Preference cleared.');
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] save disciplines failed', err);
+      toast('Could not save your preference. Try again.');
+      if (btn) { btn.disabled = false; btn.textContent = 'Save'; }
+    }
+  }
+
+  // ---- first-visit welcome panel (V3.R77 #296) ----------------------------
+  // Greets a not-yet-graduated builder with their rank, what their rank
+  // unlocks, the next checklist step, and the two doors into the hall: the
+  // orientation maps and the /builder-start command. Dismissable. Reappears
+  // if the builder's onboarding stage regresses (rare — e.g. a stage row
+  // wipe in dev or an Archon-driven reset).
+  //
+  // Persistence: localStorage key `builders:welcome-dismissed:<builder_id>`
+  // stores the stage *index* (0-6) at the moment of dismissal. On every
+  // render we compute the builder's current stage index; if it's strictly
+  // less than the dismissed-at index, the panel reappears. Per-builder key
+  // so a shared browser doesn't carry one builder's dismissal to another.
+  //
+  // The panel only renders for the LOGGED-IN viewer (uses /me). It is not
+  // shown on profile pages of other builders — that's the read-only
+  // onboarding-list panel below, which is roster-visible.
+
+  // Canonical order of the onboarding stages, mirroring
+  // src/bongos/onboarding-state.js STAGES. 'graduated' is the terminal stage;
+  // when current === 'graduated' the panel hides entirely.
+  const ONBOARDING_STAGE_ORDER = [
+    'auth_complete',
+    'pick_disciplines',
+    'first_start',
+    'first_claim',
+    'ship_three',
+    'graduated',
+  ];
+
+  function stageIndex(stageId) {
+    const i = ONBOARDING_STAGE_ORDER.indexOf(stageId);
+    return i === -1 ? 0 : i;
+  }
+
+  function welcomeDismissalKey(builderId) {
+    return `builders:welcome-dismissed:${builderId}`;
+  }
+
+  function readDismissedStageIndex(builderId) {
+    try {
+      const raw = window.localStorage.getItem(welcomeDismissalKey(builderId));
+      if (raw === null) return null;
+      const n = Number(raw);
+      return Number.isInteger(n) ? n : null;
+    } catch (_) {
+      // localStorage can throw in private-browsing modes. Treat as "never
+      // dismissed" — the panel renders, which is the right fail-open
+      // behaviour for an onboarding affordance.
+      return null;
+    }
+  }
+
+  // #785: remember which setup config the builder picked (Desktop app vs Claude
+  // Online) so it survives a re-render / reload / tab switch — renderWelcome used
+  // to hardcode 'desktop' every time. Device-level (not per-builder): it's "how I
+  // connect from this machine". Fail-open to 'desktop' (the recommended default).
+  const SETUP_CONFIG_KEY = 'builders:setup-config';
+  function readSetupConfig() {
+    try {
+      const v = window.localStorage.getItem(SETUP_CONFIG_KEY);
+      return v === 'online' ? 'online' : 'desktop';
+    } catch (_) { return 'desktop'; }
+  }
+  function writeSetupConfig(v) {
+    try { window.localStorage.setItem(SETUP_CONFIG_KEY, v === 'online' ? 'online' : 'desktop'); } catch (_) { /* private mode — won't persist, fine */ }
+  }
+
+  function renderWelcome(builder, onboarding) {
+    const scroll = $('#welcome-scroll');
+    const body = $('#welcome-body');
+    if (!scroll || !body) return;
+
+    // No builder yet (unauth landing) → hide and exit.
+    if (!builder || !builder.id) { scroll.hidden = true; return; }
+
+    // Graduated → hide entirely. The checklist below will also hide itself.
+    if (onboarding && onboarding.graduated) { scroll.hidden = true; return; }
+
+    // Compute current stage index. When the /me payload didn't carry an
+    // onboarding object (legacy), default to the first stage so the panel
+    // still greets the builder rather than vanishing silently.
+    const currentStageId = (onboarding && onboarding.current_stage) || ONBOARDING_STAGE_ORDER[0];
+    const currentIdx = stageIndex(currentStageId);
+
+    // Dismissal check. Reappears on stage regression (currentIdx < dismissed).
+    const dismissedAt = readDismissedStageIndex(builder.id);
+    if (dismissedAt !== null && currentIdx >= dismissedAt) {
+      scroll.hidden = true;
+      return;
+    }
+
+    const rankBadge = renderRankBadge(normalizeRank(builder.rank), { tip: true });
+    const greeting = `Welcome, ${escapeHtml(builder.display_name || builder.github_login || 'builder')}.`;
+
+    // #777: the welcome panel now shows ONLY setup — a two-config selector that
+    // gets a zero-technical newcomer from "signed into the hall" to a working
+    // `claude` session on their dev box. Both paths reach the SAME hosted dev
+    // box (Xenos are box-only, ADR 0035): the Desktop app connects over an
+    // automated SSH link (/builder-connect — no keys to copy), and Claude Online
+    // is the in-browser ttyd terminal (ADR 0038 — no install, no SSH). Steps are
+    // short, scannable, and plain-spoken (theme stays in the headings). The
+    // "what to do next" arc lives in the Path checklist below — not here.
+    // #785: restore the builder's last-chosen config (persisted in localStorage)
+    // so a re-render / reload / tab switch doesn't snap back to Desktop.
+    const setupCfg = readSetupConfig();
+    // R60 (task 1199): the hosted dev-box onboarding below is the `dev-box`
+    // feature module's UI. A vanilla Cloud Bongos instance has dev-box OFF, so
+    // there is no box to host — show the bring-your-own-machine path instead.
+    // OTB (dev-box ON) renders the existing flow verbatim, so prod is unchanged.
+    const devBoxOn = moduleOn('dev-box');
+    // The #support pointer assumes the Discord module; drop it when discord is off.
+    const supportFoot = moduleOn('discord')
+      ? `Stuck on any step? <a href="${API}/auth/discord/start">Join our Discord</a> and ask in <strong>#support</strong>.`
+      : `Stuck on any step? See the project's README and docs.`;
+    const setupPanes = devBoxOn ? `
+        <p class="setup__intro">Your work runs on a dev box we host for you — there's almost nothing to install. Choose how to connect:</p>
+        <div class="setup__toggle" role="tablist" aria-label="Choose a setup">
+          <button type="button" class="setup__tab setup__tab--desktop" data-config="desktop" role="tab" aria-selected="${setupCfg === 'desktop'}">Claude Desktop app <span class="setup__tab-tag setup__tab-tag--rec">recommended</span></button>
+          <button type="button" class="setup__tab setup__tab--online" data-config="online" role="tab" aria-selected="${setupCfg === 'online'}">Claude Online <span class="setup__tab-tag">browser only</span></button>
+        </div>
+
+        <div class="setup__pane setup__pane--desktop">
+          <ol class="setup__steps">
+            <li><strong>Download the Dev Box app:</strong>
+              <a href="/downloads/devbox/mac-arm64">Mac</a> ·
+              <a href="/downloads/devbox/mac-x64">Mac (Intel)</a> ·
+              <a href="/downloads/devbox/win-x64">Windows</a> ·
+              <a href="/downloads/devbox/win-arm64">Windows (ARM)</a>.
+              <span class="setup__hint">First open: your computer warns about an unknown developer — that's
+              expected (we haven't bought the signing certificates yet; the app is ours). Mac: System Settings
+              → Privacy &amp; Security → “Open Anyway”. Windows: “More info” → “Run anyway”.</span></li>
+            <li><strong>Sign in from the app.</strong> It opens this hall in your browser — click one
+              <em>Approve</em> button and you're in. No terminal, nothing to paste.</li>
+            <li><strong>Flip the switch.</strong> Your dev box builds itself in a minute or two and the app
+              chimes when it's ready. It lives in the menu bar on Mac and the system tray on Windows, and it
+              wires up Claude Desktop for you along the way.</li>
+            <li><strong><a href="https://claude.com/download" target="_blank" rel="noopener noreferrer">Download Claude</a></strong>
+              for Mac or Windows, sign in with your <a href="https://claude.com" target="_blank" rel="noopener noreferrer">Claude</a>
+              account, then open <strong>Code → Environment → “${brandWorld()} Dev Box”</strong>. You're inside —
+              build from <code>/workspace</code>.</li>
+          </ol>
+        </div>
+
+        <div class="setup__pane setup__pane--online">
+          <ol class="setup__steps">
+            <li><strong>Create your <a href="https://claude.com" target="_blank" rel="noopener noreferrer">Claude</a> account.</strong></li>
+            <li><strong>Open your online environment.</strong> This is the environment you will build in — no SSH, nothing to install.
+              <div class="setup__box" data-box-panel></div>
+            </li>
+            <li><strong>Sign in when Claude prompts you.</strong> Claude starts automatically when you open the terminal.
+              <span class="setup__hint">To paste the sign-in code: <strong>Ctrl+Shift+V</strong> or right-click — plain Ctrl+V will not paste here. Claude takes over the terminal with its own interface once you're signed in. This guide stays open in its own tab. If Claude didn't start automatically, type <code>claude</code> and press Enter.</span></li>
+            <li><strong>Then drive it however you like:</strong>
+              <span class="setup__hint"><strong>Remote control (recommended)</strong> — type <code>/remote-control</code> for a link that runs this session in Claude's own web/app interface, the same UI you'd use on a computer. <strong>Or just stay in the online terminal</strong> and build right here in the browser — no remote control needed. Either way, reopening the online terminal later resumes your session right where you left it (closing the tab keeps it running).</span></li>
+          </ol>
+        </div>
+    ` : `
+        <p class="setup__intro">Build from your own machine — clone the repository, run the platform locally, and sign in from the terminal.</p>
+        <div class="setup__pane">
+          <ol class="setup__steps">
+            <li><strong>Clone the repository</strong> and install dependencies (<code>npm install</code>).</li>
+            <li><strong><a href="https://claude.com/download" target="_blank" rel="noopener noreferrer">Download Claude</a></strong> (or use the Claude Code CLI) and open the project.</li>
+            <li><strong>Run <code>/builder-setup</code></strong> to authenticate this machine, then <code>/builder-start</code> to claim your first task.</li>
+          </ol>
+        </div>
+    `;
+    // task 469: a "Set up your machine / get the code" door, available in BOTH
+    // the hosted dev-box flow and the bring-your-own-machine flow. The flows
+    // above get you a session running; this section answers the separate
+    // question a first-timer always has — "where does the code come from, and
+    // how do I get it onto my own laptop?". It's the hall mirror of the primer's
+    // "Step 0 — get the project onto your machine". Collapsed by default so it
+    // doesn't crowd the recommended path; the clone block is click-to-copy
+    // (copy-on-click.js picks up .welcome__paste). The commands mirror
+    // scripts/setup-builder.sh's own header verbatim so they can't drift.
+    // The clone commands come from the instance's own repo coords (loaded from
+    // GET /api/bongos/instance), not a hardcoded repo, so a fresh instance's newcomer
+    // clones ITS project (ADR 0062 §3, task 1705). Falls back to generic guidance
+    // until the coords load (or if they're unavailable).
+    const cloneBlock = instanceRepo
+      ? `git clone ${escapeHtml(instanceRepo.url)}.git\ncd ${escapeHtml(instanceRepo.repo)}\n./scripts/setup-builder.sh`
+      : `# clone your instance's repository, cd into it, then run:\n./scripts/setup-builder.sh`;
+    const getCode = `
+        <details class="setup__getcode">
+          <summary class="setup__getcode-summary">Set up your machine / get the code</summary>
+          <div class="setup__getcode-body">
+            <p class="setup__hint">First install <a href="https://git-scm.com/downloads" target="_blank" rel="noopener noreferrer">Git</a>
+              and <a href="https://claude.com/download" target="_blank" rel="noopener noreferrer">Claude Code</a> — that's all the tooling you need up front.</p>
+            <p class="setup__getcode-lede">Then copy the project onto your machine and run the one-shot bootstrap (it checks your setup, installs dependencies, and signs you in):</p>
+            <code class="welcome__paste">${cloneBlock}</code>
+            <p class="setup__hint">On Windows, run <code>node scripts/setup-builder.js</code> instead of the last line. New to the steps? The
+              <a href="/primer">primer</a> walks the whole path in plain language.</p>
+          </div>
+        </details>`;
+    body.innerHTML = `
+      <div class="welcome__lede">${greeting} Your standing is ${rankBadge}.</div>
+      <div class="setup" data-config="${setupCfg}">
+        ${setupPanes}
+        ${getCode}
+        <p class="setup__foot">${supportFoot}</p>
+      </div>
+    `;
+    // Remember the stage we rendered for, so the dismiss handler can record it.
+    scroll.dataset.stageIdx = String(currentIdx);
+    scroll.hidden = false;
+    // #783/#807: mount the shared dev-box panel into the online pane and paint
+    // it from live server state. Browser-only onboarding hides SSH details
+    // (showSsh:false) — a newcomer sees only the online terminal. The panel runs
+    // its own poll while anything is in flight (survives tab flips / re-renders /
+    // reloads / background approvals); mount re-binds to the freshly-rendered DOM.
+    const boxMount = body.querySelector('[data-box-panel]');
+    if (boxMount) onboardingBox().mount(boxMount);
+  }
+
+  // #777/#783/#807: the dev-box management UI now lives in the shared OTBBoxPanel
+  // module (public-builders/box-panel.js) so it can be reused verbatim on the
+  // Settings page. Here it runs in browser-only mode (showSsh:false) — a newcomer
+  // sees only the online terminal, never raw SSH details. We hold ONE instance;
+  // it owns its own self-rescheduling poll + terminal-window handle. Lazily
+  // created so it survives the very first renderWelcome regardless of which
+  // <script> finished loading first; a no-op shim keeps callers safe if the
+  // module somehow failed to load.
+  let _onboardingBox = null;
+  function onboardingBox() {
+    if (!_onboardingBox && window.OTBBoxPanel) {
+      _onboardingBox = window.OTBBoxPanel.create({ api: API, showSsh: false, toast });
+    }
+    return _onboardingBox || { mount() {}, refresh() {}, stop() {} };
+  }
+
+  // ---- onboarding checklist (V3.R75 #294; reshaped #777) ------------------
+  // Renders the "Path into the City" checklist for the CURRENT logged-in
+  // builder. Hidden once graduated (current_stage === 'graduated') so it
+  // doesn't clutter the hall for full citizens. The displayed list (#777) is a
+  // short, action-only orientation path: Join Discord → Choose craft → Run
+  // /builder-setup → Ship three (→ Thetes). Every step AUTO-detects server-side
+  // (#777, per Lars: no manual ticks). Only two carry a control:
+  //   * pick_disciplines — the craft picker (PATCH /me/disciplines).
+  //   * join_discord      — a Connect-Discord button (the existing OAuth flow,
+  //                         auto-joins + assigns rank role); clears when linked.
+  // cli_setup clears once the GDS CLI is authenticated (db.hasCliSession) and
+  // ship_three on the 3rd ship — both passive. The terminal ship_three step
+  // shows the live "N of 3" counter (its `detail`). `discord` is the /me discord
+  // block ({ linked, configured }) — when Discord isn't configured server-side
+  // the Connect button is suppressed.
+
+  function renderOnboarding(onboarding, discord) {
+    const scroll = $('#onboarding-scroll');
+    const list = $('#onboarding-list');
+    if (!scroll || !list) return;
+    if (!onboarding) {
+      scroll.hidden = true;
+      return;
+    }
+    // Hide the panel once the builder has graduated — no point lingering.
+    if (onboarding.graduated) {
+      scroll.hidden = true;
+      return;
+    }
+    scroll.hidden = false;
+
+    const discordConfigured = !!(discord && discord.configured);
+    const stages = Array.isArray(onboarding.stages) ? onboarding.stages : [];
+    if (stages.length === 0) {
+      list.innerHTML = `<li class="onboarding-item onboarding-item--placeholder">No onboarding steps recorded yet.</li>`;
+      return;
+    }
+
+    // task 470: a static, INFORMATIONAL lead-in step that sits AHEAD of the
+    // data-driven steps — the genuine first action into the city is "obtain the
+    // repo" (clone it, or open the hosted dev box where it's already cloned).
+    // It mirrors onboarding-state.js PRE_AUTH_STEP. It is NOT one of the tracked
+    // checklist steps (it carries no engine stage, never gates graduation, and
+    // isn't counted in the "N of M steps cleared" status line) — it just makes
+    // the checklist a newcomer sees acknowledge the very first real action,
+    // which the auto-ticking steps below silently assumed already happened.
+    const preAuthLead = `
+      <li class="onboarding-item onboarding-item--informational" data-stage="obtain_repo">
+        <span class="onboarding-item__mark" aria-hidden="true">›</span>
+        <div class="onboarding-item__body">
+          <p class="onboarding-item__label">First — obtain the repo</p>
+          <p class="onboarding-item__hint">Clone the project to your machine, or open your hosted dev box (where it is already cloned). The build commands live inside the repo, so this comes first. The remaining steps below are tracked automatically.</p>
+        </div>
+      </li>`;
+
+    list.innerHTML = preAuthLead + stages.map((s) => {
+      const status = s.cleared ? 'cleared' : (s.is_current ? 'current' : 'locked');
+      const mark = s.cleared ? '✓' : (s.is_current ? '◆' : '○');
+      const hint = s.hint ? `<p class="onboarding-item__hint">${escapeHtml(s.hint)}</p>` : '';
+      // #766: the terminal 'ship_three' stage carries a live "N of 3" counter
+      // in its `detail` field — render it as a small progress line so the
+      // builder watches themselves climb toward Thetes with each ship.
+      const detail = s.detail
+        ? `<p class="onboarding-item__detail">${escapeHtml(s.detail)}</p>`
+        : '';
+      // Per-step affordance, shown ONLY while the step is the current, uncleared
+      // one — every step now behaves uniformly (Lars, #833): locked/future steps
+      // and cleared steps carry no control, so the path reads as one action at a
+      // time. (The Discord step already did this; the craft picker and the
+      // See-the-works link used to render on locked/cleared steps too.) Every
+      // step auto-detects its own completion server-side (#777): join_discord
+      // clears on the Discord link, cli_setup once the GDS CLI is authenticated,
+      // ship_three at the third ship — no manual ticking.
+      let action = '';
+      if (s.is_current && !s.cleared) {
+        if (s.id === 'pick_disciplines') {
+          // V3 (2026-05-30): inline discipline picker → PATCH /me/disciplines.
+          // Multi-select: each button is a toggle reflecting the saved prefs, so
+          // a builder can pick engineer, artist, ideator, or any mix while the
+          // step is current. (Settings can revise crafts later for graduated citizens.)
+          const prefs = (lastMeState && lastMeState.builder && Array.isArray(lastMeState.builder.preferred_disciplines))
+            ? lastMeState.builder.preferred_disciplines : [];
+          const discBtn = (value, label) => {
+            const on = prefs.includes(value);
+            return `<button type="button" class="btn-ghost onboarding-item__disc${on ? ' onboarding-item__disc--on' : ''}" data-disc="${value}" aria-pressed="${on}">${label}</button>`;
+          };
+          // R59 (task 1198): 'artist' is offered only when the art-pipeline module
+          // is enabled — engineer + ideator are methodology core. moduleOn defaults
+          // to true if the flag is missing, so OTB (art on) is unchanged; a vanilla
+          // instance hides the button the server would reject anyway.
+          action = `
+            <div class="onboarding-item__action onboarding-item__disc-pick">
+              ${discBtn('engineer', 'Engineer')}
+              ${OTB.moduleOn('art-pipeline') ? discBtn('artist', 'Artist') : ''}
+              ${discBtn('ideator', 'Ideator')}
+            </div>`;
+        } else if (s.id === 'ship_three') {
+          action = `
+            <div class="onboarding-item__action">
+              <a class="btn-ghost" href="/work">See the work board →</a>
+            </div>`;
+        } else if (s.id === 'join_discord' && discordConfigured) {
+          // #777: the Connect button runs the existing OAuth flow (GET
+          // /auth/discord/start → auto-join + rank role). Full-page nav so the
+          // server can set the CSRF state cookie before redirecting to Discord.
+          // The step then clears itself once the link lands (discord.linked) —
+          // no manual mark. Same control as /builders/settings.
+          action = `
+            <div class="onboarding-item__action">
+              <a class="btn-ghost onboarding-item__discord" href="${API}/auth/discord/start">Connect Discord &amp; join the server</a>
+            </div>`;
+        }
+      }
+      return `
+        <li class="onboarding-item onboarding-item--${status}" data-stage="${escapeHtml(s.id)}">
+          <span class="onboarding-item__mark" aria-hidden="true">${mark}</span>
+          <div class="onboarding-item__body">
+            <p class="onboarding-item__label">${escapeHtml(s.label)}</p>
+            ${hint}
+            ${detail}
+          </div>
+          ${action}
+        </li>
+      `;
+    }).join('');
+
+    const cleared = onboarding.progress?.cleared ?? 0;
+    const total = onboarding.progress?.total ?? stages.length;
+    const status = $('#onboarding-status');
+    if (status) {
+      status.hidden = false;
+      status.textContent = `${cleared} of ${total} steps cleared.`;
+    }
+  }
+
+
+  // V3 (2026-05-30): clear the pick_disciplines onboarding stage from the path
+  // checklist. Saves the chosen craft via the same PATCH /me/disciplines route
+  // the profile uses, then re-renders the checklist (and the profile picker) so
+  // both reflect the choice. The route echoes the updated onboarding state.
+  async function pickDiscipline(value) {
+    // Multi-select toggle: add the craft if not yet chosen, remove it if it is,
+    // then save the full set (any mix of engineer, artist, ideator).
+    const current = (lastMeState && lastMeState.builder && Array.isArray(lastMeState.builder.preferred_disciplines))
+      ? lastMeState.builder.preferred_disciplines : [];
+    const selected = current.includes(value)
+      ? current.filter((d) => d !== value)
+      : [...current, value];
+    const buttons = document.querySelectorAll('.onboarding-item__disc');
+    buttons.forEach((b) => { b.disabled = true; });
+    try {
+      const resp = await patchJSON(`${API}/me/disciplines`, { preferred_disciplines: selected });
+      if (resp.builder && lastMeState) {
+        // Keep the cached /me state and the profile picker in sync.
+        lastMeState.builder = resp.builder;
+        lastMeState.onboarding = resp.onboarding || lastMeState.onboarding;
+      }
+      if (resp.onboarding) renderOnboarding(resp.onboarding, lastMeState && lastMeState.discord);
+      if (resp.builder) renderProfile(resp.builder);
+      toast(selected.length ? `Craft: ${selected.join(', ')}.` : 'Craft cleared.');
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] pick discipline failed', err);
+      toast('Could not save just now. Try again.');
+      buttons.forEach((b) => { b.disabled = false; });
+    }
+  }
+
+  // ---- achievements --------------------------------------------------------
+
+  function renderAchievements(all, unlocked, lockedWithProgress) {
+    const unlockedById = new Map(unlocked.map((u) => [u.achievement_id, u]));
+    // Map achievement_id → progress_text for locked entries. Falsy/empty
+    // progress just shows the credit-bonus line as before.
+    const progressById = new Map(
+      (lockedWithProgress || []).map((l) => [l.achievement_id, l.progress_text || '']),
+    );
+    const grid = $('#ach-grid');
+    if (!all.length) {
+      grid.innerHTML = `<div class="profile__placeholder">No achievements earned yet.</div>`;
+      return;
+    }
+    grid.innerHTML = all.map((a) => {
+      const got = unlockedById.get(a.id);
+      const cls = got ? 'ach' : 'ach ach--locked';
+      const bonus = a.credit_bonus ? `<p class="ach__bonus">+${fmtNum(a.credit_bonus)} ${(window.OTBBranding?.currencyLabel?.() ?? 'credits')}</p>` : '';
+      const when = got ? `<p class="ach__bonus">Won ${fmtDate(got.unlocked_at)}</p>` : '';
+      const progress = !got && progressById.has(a.id) && progressById.get(a.id)
+        ? `<p class="ach__progress">${escapeHtml(progressById.get(a.id))}</p>`
+        : '';
+      return `
+        <div class="${cls}" title="${escapeHtml(a.id)}">
+          <div class="ach__icon" aria-hidden="true">${escapeHtml(a.icon || '✦')}</div>
+          <div class="ach__body">
+            <p class="ach__name">${escapeHtml(a.name)}</p>
+            <p class="ach__desc">${escapeHtml(a.description || '')}</p>
+            ${when || bonus}
+            ${progress}
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // ---- recent ships --------------------------------------------------------
+
+  // All shipped works for this builder, fetched once via ?limit=all then
+  // filtered, sorted, and paged entirely client-side. Mirrors the status site's
+  // Lately Inscribed pattern (modules/status-ui/public/status.js renderShippedPage), with
+  // an additional version filter since a builder's history spans versions.
+  const SHIPS_PAGE_SIZE = 10;
+  const shipState = {
+    all: [],
+    page: 0,
+  };
+
+  function filterShips(ships) {
+    const win = $('#f-ships-window')?.value || 'all';
+    const ver = $('#f-ships-version')?.value || '';
+    let cutoff = null;
+    if (win !== 'all') {
+      const days = Number(win);
+      if (Number.isFinite(days) && days > 0) {
+        cutoff = Date.now() - days * 24 * 60 * 60 * 1000;
+      }
+    }
+    return ships.filter((s) => {
+      if (ver && s.version_id !== ver) return false;
+      if (cutoff !== null) {
+        const t = s.shipped_at ? new Date(s.shipped_at).getTime() : 0;
+        if (!t || t < cutoff) return false;
+      }
+      return true;
+    });
+  }
+
+  // task 1957 — a shipped row's payout is the ACTUAL ledger figure (credits_awarded),
+  // not the creation-time estimate. taskCreditValue picks the right one by status.
+  function shipCredit(s) {
+    return Number(window.OTBBranding?.taskCreditValue?.(s) ?? s.credits_reward) || 0;
+  }
+
+  function sortShips(ships, mode) {
+    const copy = ships.slice();
+    if (mode === 'oldest') {
+      copy.sort((a, b) => new Date(a.shipped_at || 0) - new Date(b.shipped_at || 0));
+    } else if (mode === 'drachmae-high') {
+      copy.sort((a, b) => shipCredit(b) - shipCredit(a));
+    } else if (mode === 'drachmae-low') {
+      copy.sort((a, b) => shipCredit(a) - shipCredit(b));
+    } else {
+      // default: most recent first
+      copy.sort((a, b) => new Date(b.shipped_at || 0) - new Date(a.shipped_at || 0));
+    }
+    return copy;
+  }
+
+  function renderRecentShips() {
+    const tbody = $('#recent-ships tbody');
+    const countEl = $('#ships-count');
+    const pagerEl = $('#ships-pager');
+    const rangeEl = $('#ships-range');
+    const prevBtn = $('#ships-prev');
+    const nextBtn = $('#ships-next');
+
+    const filtered = filterShips(shipState.all);
+    const mode = $('#f-ships-sort')?.value || 'recent';
+    const sorted = sortShips(filtered, mode);
+
+    // task 1723: Home mirrors — the shipped-count stat tile and the compact
+    // 5-row recent-work table are fed from the same feed. Guarded writes.
+    const statShipped = document.getElementById('stat-shipped');
+    if (statShipped) statShipped.textContent = fmtNum(shipState.all.length);
+    const homeRecent = document.querySelector('#home-recent-table tbody');
+    if (homeRecent) {
+      const latest = sortShips(shipState.all, 'recent').slice(0, 5);
+      homeRecent.innerHTML = latest.length
+        ? latest.map((s) => `
+          <tr>
+            <td class="ledger__num">#${s.id}</td>
+            <td>${escapeHtml(s.title)}</td>
+            <td class="ledger__drachmae">${fmtNum(window.OTBBranding?.taskCreditValue?.(s) ?? s.credits_reward)}</td>
+            <td class="ledger__date">${fmtDate(s.shipped_at)}</td>
+          </tr>`).join('')
+        : emptyRow(4, 'Nothing shipped yet. Claim a task on the Work board to get started.');
+    }
+    const homeRecentSection = document.getElementById('home-recent');
+    if (homeRecentSection && !newcomerGated) homeRecentSection.hidden = false;
+
+    if (countEl) {
+      const total = shipState.all.length;
+      const shown = sorted.length;
+      countEl.textContent = total
+        ? (shown === total
+            ? `${fmtNum(total)} work${total === 1 ? '' : 's'} shipped`
+            : `${fmtNum(shown)} of ${fmtNum(total)} in view`)
+        : '';
+    }
+
+    if (!sorted.length) {
+      tbody.innerHTML = shipState.all.length
+        ? emptyRow(4, 'No work matches these filters. Widen the window or pick another version.')
+        : emptyRow(4, 'Nothing shipped yet. Claim a task on the Work board to get started.');
+      if (pagerEl) pagerEl.hidden = true;
+      return;
+    }
+
+    const { start } = renderPager(shipState, sorted.length, SHIPS_PAGE_SIZE, { pagerEl, rangeEl, prevBtn, nextBtn });
+    const slice = sorted.slice(start, start + SHIPS_PAGE_SIZE);
+
+    tbody.innerHTML = slice.map((s) => `
+      <tr>
+        <td class="ledger__num">#${s.id}</td>
+        <td>
+          <div>${escapeHtml(s.title)}</div>
+          ${s.value_summary ? `<div style="color:var(--ink-soft);font-size:0.88rem;font-style:italic;margin-top:2px">${escapeHtml(s.value_summary)}</div>` : ''}
+        </td>
+        <td class="ledger__drachmae">${fmtNum(window.OTBBranding?.taskCreditValue?.(s) ?? s.credits_reward)}</td>
+        <td class="ledger__date">${fmtDate(s.shipped_at)}</td>
+      </tr>
+    `).join('');
+  }
+
+  // Re-render when filters change. Reset to page 0 so the new filter starts at
+  // the top — otherwise switching to a smaller window can leave you on page 9
+  // of a 2-page result.
+  function onShipsFilterChange() {
+    shipState.page = 0;
+    renderRecentShips();
+  }
+
+  // Populate the ship-version filter from the versions API response. Called
+  // from loadAll once both versionsResp and the ships response are ready.
+  function populateShipVersionFilter(versions) {
+    const sel = $('#f-ships-version');
+    if (!sel) return;
+    // Build from the versions we've shipped to, intersected with the catalog.
+    const seen = new Set(shipState.all.map((s) => s.version_id).filter(Boolean));
+    for (const v of versions) {
+      if (!seen.has(v.id)) continue;
+      const opt = document.createElement('option');
+      opt.value = v.id;
+      opt.textContent = v.id;
+      if (v.name && v.name !== v.id) opt.title = v.name;
+      sel.appendChild(opt);
+    }
+  }
+
+  // ---- recent grades (task 197) -------------------------------------------
+
+  function renderRecentGrades(grades) {
+    const tbody = $('#recent-grades tbody');
+    if (!tbody) return;
+    if (!grades || !grades.length) {
+      tbody.innerHTML = emptyRow(5, 'No work reviewed yet.');
+      return;
+    }
+    tbody.innerHTML = grades.map((g) => {
+      const score = Number(g.score).toFixed(1);
+      const verdict = g.passed
+        ? `<span style="color:var(--olive,#5b7a4d);font-weight:600">passed</span>`
+        : `<span style="color:#a04040;font-weight:600">fell short</span>`;
+      return `
+        <tr>
+          <td class="ledger__num">#${g.task_id}</td>
+          <td>${escapeHtml(g.title || '')}</td>
+          <td class="ledger__drachmae">${score} / 10</td>
+          <td>${verdict}</td>
+          <td class="ledger__date">${fmtDate(g.graded_at)}</td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  function renderRollingNote(rolling) {
+    const note = $('#grades-rolling-note');
+    if (!note) return;
+    if (!rolling || !rolling.n || Number(rolling.n) === 0) {
+      note.hidden = true;
+      return;
+    }
+    const avg = Number(rolling.avg_score).toFixed(1);
+    const passed = Number(rolling.n_passed || 0);
+    const n = Number(rolling.n);
+    note.textContent = `Last 14 days: ${avg} / 10 average across ${n} graded work${n === 1 ? '' : 's'} (${passed} passed).`;
+    note.hidden = false;
+  }
+
+  // ---- the dev curve (V3.R72 #291, C5) ------------------------------------
+  //
+  // Per-builder historical analytics: ship rate, cost-per-task, duration, and
+  // grade pass-rate over time, plus a top-kinds fingerprint. Charts are inline
+  // SVG sparklines — no chart library (the task spec's explicit constraint).
+  // An Archon additionally gets a "You / All builders" scope toggle backed by
+  // the ecosystem aggregate (individuals stripped), satisfying the
+  // cross-builder view requirement without a per-builder roster on this page.
+
+  const analyticsState = { builderId: null, isArchon: false, scope: 'self', self: null, eco: null };
+
+  // Build a tiny SVG line sparkline from an array of numeric y-values. Returns
+  // a self-contained <svg> string. A flat/short series degrades to a baseline.
+  function sparkline(values, opts = {}) {
+    const W = opts.width || 260;
+    const H = opts.height || 46;
+    const pad = 3;
+    const color = opts.color || 'var(--accent-deep)';
+    const nums = (values || []).map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
+    if (nums.length === 0) {
+      return `<svg class="spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="no data"></svg>`;
+    }
+    const min = Math.min(...nums);
+    const max = Math.max(...nums);
+    const span = max - min || 1;
+    const n = nums.length;
+    const x = (i) => (n === 1 ? W / 2 : pad + (i * (W - 2 * pad)) / (n - 1));
+    const y = (v) => H - pad - ((v - min) / span) * (H - 2 * pad);
+    const pts = nums.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`);
+    const line = pts.join(' ');
+    const area = `${pad},${H - pad} ${line} ${(W - pad)},${H - pad}`;
+    const last = nums[n - 1];
+    return `<svg class="spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="trend, latest ${last}">
+      <polyline class="spark__area" points="${area}" fill="${color}" />
+      <polyline class="spark__line" points="${line}" fill="none" stroke="${color}" />
+      ${n === 1 ? `<circle cx="${x(0).toFixed(1)}" cy="${y(last).toFixed(1)}" r="2.4" fill="${color}" />` : ''}
+    </svg>`;
+  }
+
+  function statCard(label, value, sub) {
+    return `<div class="curve__stat">
+      <div class="curve__stat-value">${escapeHtml(String(value))}</div>
+      <div class="curve__stat-label">${escapeHtml(label)}</div>
+      ${sub ? `<div class="curve__stat-sub">${escapeHtml(sub)}</div>` : ''}
+    </div>`;
+  }
+
+  function chartCard(title, values, color, footer) {
+    const has = Array.isArray(values) && values.length > 0;
+    return `<div class="curve__chart">
+      <div class="curve__chart-title">${escapeHtml(title)}</div>
+      ${has ? sparkline(values, { color }) : `<div class="curve__chart-empty">no data in window</div>`}
+      ${footer ? `<div class="curve__chart-foot">${escapeHtml(footer)}</div>` : ''}
+    </div>`;
+  }
+
+  const pct = (v) => (v == null ? '—' : `${Math.round(Number(v) * 100)}%`);
+  const usd = (v) => `$${(Number(v) || 0).toFixed(2)}`;
+  const mins = (v) => (v == null ? '—' : `${Math.round(Number(v))}m`);
+
+  // Render the curve for whichever scope is active. `data` is either the self
+  // payload (/analytics/builder/:id) or the ecosystem payload, normalized below.
+  function renderCurveBody() {
+    const headlineEl = $('#curve-headline');
+    const gridEl = $('#curve-grid');
+    const kindsEl = $('#curve-kinds');
+    const emptyEl = $('#curve-empty');
+    const noteEl = $('#curve-scope-note');
+    if (!headlineEl || !gridEl || !kindsEl) return;
+
+    const isEco = analyticsState.scope === 'eco';
+    const data = isEco ? analyticsState.eco : analyticsState.self;
+
+    // Scope toggle (Archon only).
+    if (analyticsState.isArchon && noteEl) {
+      noteEl.innerHTML =
+        `<span class="curve__scope" role="group" aria-label="Analytics scope">` +
+        `<button type="button" class="curve__scope-btn${!isEco ? ' is-active' : ''}" data-scope="self">You</button>` +
+        `<button type="button" class="curve__scope-btn${isEco ? ' is-active' : ''}" data-scope="eco">All builders</button>` +
+        `</span>`;
+    }
+
+    if (!data) { gridEl.innerHTML = ''; headlineEl.innerHTML = ''; kindsEl.innerHTML = ''; return; }
+
+    const totalShipped = data.headline?.total_shipped || 0;
+    if (totalShipped === 0) {
+      if (emptyEl) emptyEl.style.display = '';
+      headlineEl.innerHTML = ''; gridEl.innerHTML = ''; kindsEl.innerHTML = '';
+      return;
+    }
+    if (emptyEl) emptyEl.style.display = 'none';
+
+    // Headline stat cards.
+    const h = data.headline;
+    const cards = [];
+    cards.push(statCard(isEco ? 'Works shipped' : 'Works shipped', totalShipped, `last ${data.window_days}d`));
+    if (isEco) {
+      cards.push(statCard('Active builders', h.active_builders ?? 0));
+      cards.push(statCard('Avg time / work', mins(h.avg_duration_min)));
+    } else {
+      cards.push(statCard('Cost / work', usd(h.cost_per_task)));
+      cards.push(statCard('Avg time / work', mins(h.avg_duration_min)));
+      cards.push(statCard('Confirmation rate', pct(h.confirmation_rate), `${h.resolved_claims || 0} claims`));
+      cards.push(statCard('Grade pass rate', pct(h.grade_pass_rate), `${h.graded_n || 0} graded`));
+    }
+    headlineEl.innerHTML = cards.join('');
+
+    // Sparkline charts.
+    const charts = [];
+    charts.push(chartCard('Works shipped / day', (data.ship_rate || []).map((r) => r.n), 'var(--accent-deep)',
+      `${(data.ship_rate || []).reduce((s, r) => s + Number(r.n), 0)} over ${data.window_days}d`));
+    charts.push(chartCard('Time / work (min)', (data.duration_trend || []).map((r) => r.avg_actual), 'var(--sea)',
+      'actual minutes per shipped work'));
+    if (!isEco) {
+      charts.push(chartCard('Cost / work ($)', (data.cost_trend || []).map((r) => r.per_work), 'var(--terracotta)',
+        `total ${usd(h.total_cost_usd)}`));
+      charts.push(chartCard('Grade pass rate', (data.grade_trend || []).map((r) => (r.n ? r.n_passed / r.n : 0)), 'var(--accent)',
+        'share of work passing review'));
+    }
+    gridEl.innerHTML = charts.join('');
+
+    // Top kinds — horizontal bars.
+    const kinds = (data.top_kinds || []).slice(0, 8);
+    if (kinds.length) {
+      const maxN = Math.max(...kinds.map((k) => Number(k.n)));
+      kindsEl.innerHTML =
+        `<div class="curve__chart-title">Kinds of work shipped</div>` +
+        kinds.map((k) => {
+          const w = maxN ? Math.round((Number(k.n) / maxN) * 100) : 0;
+          return `<div class="curve__kind">
+            <span class="curve__kind-label">${escapeHtml(k.kind)}</span>
+            <span class="curve__kind-bar"><span class="curve__kind-fill" style="width:${w}%"></span></span>
+            <span class="curve__kind-n">${k.n}</span>
+          </div>`;
+        }).join('');
+    } else {
+      kindsEl.innerHTML = '';
+    }
+  }
+
+  // Fire-and-forget loader: fetch the builder's own curve (and, for an Archon,
+  // the ecosystem aggregate) and render. A failed/empty feed simply leaves the
+  // section hidden rather than holding up the rest of the hall.
+  async function loadAnalytics(builder) {
+    const scroll = $('#analytics-scroll');
+    if (!scroll || !builder?.id) return;
+    analyticsState.builderId = builder.id;
+    analyticsState.isArchon = (builder.rank || '').toLowerCase() === 'archon';
+    analyticsState.scope = 'self';
+    try {
+      const self = await getJSON(`${API}/analytics/builder/${builder.id}?days=90`);
+      analyticsState.self = self;
+      // A gated newcomer with nothing shipped: keep the section hidden.
+      if (!self || (self.headline?.total_shipped || 0) === 0) { scroll.hidden = true; return; }
+      scroll.hidden = false;
+      renderCurveBody();
+      renderNav(builder, lastMeState?.onboarding || null); // re-show the Curve chip now that the section is visible
+      if (analyticsState.isArchon) {
+        getJSON(`${API}/public/analytics/ecosystem?days=90`)
+          .then((eco) => { analyticsState.eco = eco; if (analyticsState.scope === 'eco') renderCurveBody(); })
+          .catch(() => { /* ecosystem optional */ });
+      }
+    } catch (err) {
+      console.error('[builders] analytics load failed', err);
+      scroll.hidden = true;
+    }
+  }
+
+  // ---- karma feed (V3.R26 #246) -------------------------------------------
+  //
+  // The recent karma_log entries for the current builder. The /me payload
+  // already includes them under `karma.recent`. The scroll stays hidden when
+  // the builder has no history yet (zero karma is a common starting state,
+  // so we don't want to push an empty table at every new citizen).
+
+  function renderKarmaFeed(entries) {
+    const scroll = $('#karma-scroll');
+    const tbody = $('#karma-feed tbody');
+    if (!scroll || !tbody) return;
+    if (!Array.isArray(entries) || entries.length === 0) {
+      // Hide the scroll entirely if the builder has no karma history.
+      // Keeps the page tidy for fresh citizens; reappears the moment a
+      // karma_log row lands.
+      scroll.hidden = true;
+      return;
+    }
+    // #748: a gated newcomer never shows the karma feed, even if karma exists.
+    scroll.hidden = newcomerGated;
+    tbody.innerHTML = entries.map((k) => {
+      const delta = Number(k.delta) || 0;
+      const deltaCls = signClasses(delta, 'karma-feed__delta');
+      const deltaText = delta > 0 ? `+${fmtNum(delta)}` : fmtNum(delta);
+      const granted = k.granted_by
+        ? `@${escapeHtml(k.granted_by_login || k.granted_by_display_name || `builder #${k.granted_by}`)}`
+        : '<span style="opacity:0.6;">— all builders —</span>';
+      return `
+        <tr>
+          <td class="ledger__date">${escapeHtml(fmtDate(k.recorded_at))}</td>
+          <td class="karma-feed__delta ${deltaCls}">${deltaText}</td>
+          <td>${escapeHtml(k.reason || '')}</td>
+          <td>${granted}</td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  // ---- peer acclaim feed (V3.R25 #245) ------------------------------------
+  //
+  // Other builders' recently confirmed/shipped work, each with a +/- vote
+  // widget. Votes fold into the shipping builder's karma on a weekly tally,
+  // lagged 7 days (server-enforced). Metic+ may vote; the endpoint returns
+  // can_vote so Xenos see the tallies read-only. The endpoint already excludes
+  // the caller's own ships (anti-self-vote), so there's nothing to vote on that
+  // isn't a peer's work.
+
+  let acclaimCanVote = false;
+
+  function renderAcclaimFeed(data) {
+    const scroll = $('#acclaim-scroll');
+    const tbody = $('#acclaim-feed tbody');
+    if (!scroll || !tbody) return;
+    const tasks = (data && Array.isArray(data.tasks)) ? data.tasks : [];
+    acclaimCanVote = !!(data && data.can_vote);
+    if (tasks.length === 0) {
+      // Nothing to acclaim yet (e.g. the only confirmed work so far is your
+      // own). Hide rather than show an empty ledger.
+      scroll.hidden = true;
+      return;
+    }
+    // #748: a gated newcomer never shows the acclaim feed.
+    scroll.hidden = newcomerGated;
+    tbody.innerHTML = tasks.map((t) => {
+      const by = escapeHtml(t.display_name || (t.github_login ? `@${t.github_login}` : `builder #${t.shipped_by}`));
+      const net = Number(t.net_votes) || 0;
+      const netCls = signClasses(net, 'acclaim__net');
+      const netText = net > 0 ? `+${net}` : `${net}`;
+      const mine = t.my_vote == null ? 0 : Number(t.my_vote);
+      // t.id is a bigserial integer, but coerce + escape it like every other
+      // server-sourced value rather than trusting the type — it flows into both
+      // innerHTML and querySelector attribute selectors below.
+      const tid = escapeHtml(String(t.id));
+      const controls = acclaimCanVote
+        ? `<span class="acclaim__vote" role="group" aria-label="Vote on this work">
+             <button type="button" class="acclaim__btn acclaim__btn--up${mine === 1 ? ' is-active' : ''}" data-vote-task="${tid}" data-vote="1" aria-pressed="${mine === 1}" title="Upvote (+1)">▲</button>
+             <button type="button" class="acclaim__btn acclaim__btn--down${mine === -1 ? ' is-active' : ''}" data-vote-task="${tid}" data-vote="-1" aria-pressed="${mine === -1}" title="Downvote (−1)">▼</button>
+           </span>`
+        : '<span class="acclaim__readonly" title="Metic rank and above may vote">—</span>';
+      const title = escapeHtml(t.value_summary || t.title || `task #${t.id}`);
+      return `
+        <tr data-acclaim-row="${tid}">
+          <td>${title}</td>
+          <td>${by}</td>
+          <td class="acclaim__net ${netCls}" data-acclaim-net="${tid}">${netText}</td>
+          <td>${controls}</td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  async function loadAcclaimFeed() {
+    try {
+      const data = await getJSON(`${API}/tasks/peer-votes/feed?limit=25`);
+      renderAcclaimFeed(data);
+    } catch (err) {
+      // Non-fatal: a feed failure shouldn't take down the hall.
+      console.warn('[hall] acclaim feed failed:', err.message);
+      const scroll = $('#acclaim-scroll');
+      if (scroll) scroll.hidden = true;
+    }
+  }
+
+  // Click delegation for the vote buttons. Toggling an already-active vote
+  // clears it (sends 0). Re-fetches the row's net from the server response so
+  // the displayed tally is always authoritative.
+  async function onAcclaimClick(ev) {
+    const btn = ev.target.closest('[data-vote-task]');
+    if (!btn || !acclaimCanVote) return;
+    // Coerce the id to an integer before it goes into a CSS attribute selector
+    // or the URL — a non-numeric value would throw a querySelector SyntaxError.
+    const taskIdNum = Number(btn.getAttribute('data-vote-task'));
+    if (!Number.isInteger(taskIdNum)) return;
+    const taskId = String(taskIdNum);
+    const clicked = Number(btn.getAttribute('data-vote'));
+    const wasActive = btn.classList.contains('is-active');
+    const vote = wasActive ? 0 : clicked; // clicking your current vote clears it
+    const row = $(`[data-acclaim-row="${taskId}"]`);
+    const buttons = row ? row.querySelectorAll('.acclaim__btn') : [];
+    buttons.forEach((b) => { b.disabled = true; });
+    try {
+      const res = await postJSON(`${API}/tasks/${encodeURIComponent(taskId)}/vote`, { vote });
+      // Reflect the authoritative net + which button is active.
+      const netEl = $(`[data-acclaim-net="${taskId}"]`);
+      if (netEl) {
+        const net = Number(res.net_votes) || 0;
+        netEl.textContent = net > 0 ? `+${net}` : `${net}`;
+        netEl.classList.remove('acclaim__net--up', 'acclaim__net--down', 'acclaim__net--flat');
+        netEl.classList.add(signClasses(net, 'acclaim__net'));
+      }
+      buttons.forEach((b) => {
+        const v = Number(b.getAttribute('data-vote'));
+        const active = res.my_vote != null && Number(res.my_vote) === v;
+        b.classList.toggle('is-active', active);
+        b.setAttribute('aria-pressed', String(active));
+      });
+    } catch (err) {
+      toast(err.status === 403 ? 'You can\'t vote on your own work.' : `Vote failed: ${err.message}`);
+    } finally {
+      buttons.forEach((b) => { b.disabled = false; });
+    }
+  }
+
+  // ---- task browser (removed #750) -----------------------------------------
+  // The claimable-works list now lives solely on the /work Work Board (#748);
+  // the hall's old Claim section + its renderTasks/copy-prompt machinery were
+  // removed. work.js carries the equivalent rendering for that page.
+
+  // ---- red-team rewards (bounty table, V3.R65 #284) ------------------------
+
+  // Severity tiers ship low → critical; the server already returns them in that
+  // order (src/bongos/security.js SEVERITIES), but we cap the row classes here so
+  // the colouring is deterministic regardless of payload ordering.
+  function renderBountyTable(rows) {
+    const tbody = $('#bounty-table tbody');
+    if (!tbody) return;
+    if (!Array.isArray(rows) || !rows.length) {
+      tbody.innerHTML = emptyRow(3, 'The reward schedule could not be loaded.');
+      return;
+    }
+    tbody.innerHTML = rows.map((r) => {
+      const sev = escapeHtml(r.severity || '');
+      const overridden = r.overridden
+        ? ` <span style="color:var(--ink-faint);font-size:0.82rem">(tuned)</span>`
+        : '';
+      return `
+        <tr>
+          <td style="text-transform:capitalize;font-weight:600">${sev}</td>
+          <td class="ledger__drachmae">${fmtNum(r.drachmae)}${overridden}</td>
+          <td style="color:var(--ink-soft)">${escapeHtml(r.blurb || '')}</td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  // ---- leaderboard ---------------------------------------------------------
+
+  // Locked at 8 for V2 (per limitations/pms-v2.md). Hardcoding here avoids an
+  // extra API round-trip per page load — the catalog won't shift in V2.
+  const ACH_EMOJI = {
+    'first-ship': '🚢',
+    'first-claim': '🪙',
+    'first-parallel-claim': '⚓',
+    'streak-3': '🔥',
+    'streak-7': '🌋',
+    'art-pipeline-shipper': '🎨',
+    'gds-shipper': '⚙️',
+    'breaking-the-100c-bar': '💯',
+  };
+
+  function renderAchievementRow(ids) {
+    if (!Array.isArray(ids) || ids.length === 0) return '';
+    const inner = ids
+      .map((id) => {
+        const emoji = ACH_EMOJI[id];
+        if (!emoji) return '';
+        // Title attribute is the achievement id (kebab) — terse enough that hover
+        // discloses the laurel without overstating the prose.
+        return `<span class="lb-ach" title="${escapeHtml(id)}" aria-label="${escapeHtml(id)}">${emoji}</span>`;
+      })
+      .join('');
+    return inner ? `<span class="lb-ach-row" aria-label="achievements">${inner}</span>` : '';
+  }
+
+  const lbState = {
+    rows: [],
+    page: 0,
+    pageSize: 25,   // task 1750: top-100 Roll — 25/page keeps it to a few pages
+
+    sortBy: 'drachmae',     // 'rank' | 'drachmae' | 'karma'
+    sortDir: 'desc',        // 'desc' | 'asc'
+  };
+
+  // Stable sort. Server returns rows in drachmae-DESC order, which is also the
+  // default view; for other modes (rank, karma, drachmae-ASC), re-sort here.
+  // The original server order is preserved as a tie-breaker so equal-value rows
+  // don't jitter between renders. Drachmae is the secondary tie-breaker when
+  // sorting by karma (V3.R26 #246) so the karma toggle still reads sensibly
+  // when many builders share the same karma value (e.g. zero).
+  function sortedLeaderboardRows() {
+    const indexed = lbState.rows.map((row, idx) => ({ row, idx }));
+    const dir = lbState.sortDir === 'asc' ? 1 : -1;
+    if (lbState.sortBy === 'rank') {
+      return indexed
+        .sort((a, b) => {
+          const diff = (rankWeight(a.row.rank) - rankWeight(b.row.rank)) * dir;
+          return diff !== 0 ? diff : a.idx - b.idx;
+        })
+        .map(({ row }) => row);
+    }
+    if (lbState.sortBy === 'karma') {
+      return indexed
+        .sort((a, b) => {
+          const ak = Number(a.row.karma) || 0;
+          const bk = Number(b.row.karma) || 0;
+          const diff = (ak - bk) * dir;
+          if (diff !== 0) return diff;
+          // Tie-break on drachmae DESC, then stable on server order.
+          const ac = Number(a.row.total_credits) || 0;
+          const bc = Number(b.row.total_credits) || 0;
+          if (ac !== bc) return bc - ac;
+          return a.idx - b.idx;
+        })
+        .map(({ row }) => row);
+    }
+    if (lbState.sortBy === 'drachmae') {
+      // Server already DESCs by drachmae, so the default mode is a no-op
+      // copy. The ASC branch flips it.
+      if (lbState.sortDir === 'desc') return lbState.rows.slice();
+      return indexed
+        .sort((a, b) => {
+          const ac = Number(a.row.total_credits) || 0;
+          const bc = Number(b.row.total_credits) || 0;
+          const diff = (ac - bc) * dir;
+          return diff !== 0 ? diff : a.idx - b.idx;
+        })
+        .map(({ row }) => row);
+    }
+    return lbState.rows.slice();
+  }
+
+  // Map a sortable column id → the lbState.sortBy key. Adding a new sortable
+  // column means adding an entry here + a header in index.html with id
+  // `lb-sort-<key>`. The handler walks aria-sort across all three headers so
+  // only one column shows its arrow at a time.
+  const LB_SORT_HEADERS = {
+    rank: 'lb-sort-rank',
+    drachmae: 'lb-sort-drachmae',
+    karma: 'lb-sort-karma',
+  };
+
+  // #757: this builder's place on the Roll, ranked by drachmae (total_credits)
+  // descending — the canonical leaderboard order, independent of whatever column
+  // the Roll table is currently sorted by. Computed client-side from the rows
+  // already fetched for the Roll, so the Standing card shows it with no extra
+  // round-trip. Returns { place, total } or null (rows not loaded yet, or this
+  // builder isn't on the roll). Matched by github_login (rows carry no id).
+  function leaderboardPlace(login) {
+    const rows = Array.isArray(lbState.rows) ? lbState.rows : [];
+    if (!rows.length || !login) return null;
+    const ranked = [...rows].sort(
+      (a, b) => (Number(b.total_credits) || 0) - (Number(a.total_credits) || 0),
+    );
+    const idx = ranked.findIndex((r) => r.github_login === login);
+    return idx === -1 ? null : { place: idx + 1, total: ranked.length };
+  }
+
+  function renderLeaderboard() {
+    const rows = sortedLeaderboardRows();
+    const start = lbState.page * lbState.pageSize;
+    const end = start + lbState.pageSize;
+    const slice = rows.slice(start, end);
+    const tbody = $('#leaderboard tbody');
+
+    if (!slice.length) {
+      tbody.innerHTML = emptyRow(5, 'No more builders to show.');
+    } else {
+      tbody.innerHTML = slice.map((b, i) => {
+        const place = start + i + 1;
+        const name = b.display_name || b.github_login || 'unknown builder';
+        const badges = renderAchievementRow(b.achievements);
+        const rank = renderRankBadge(normalizeRank(b.rank));
+        // task 1467: link the name to the builder's public profile page. Guarded
+        // on b.id (the /leaderboard row carries it) so a row without an id degrades
+        // to plain text rather than a broken /profile?id=undefined link.
+        const nameCell = b.id != null
+          ? `<a class="lb-name" href="/profile?id=${encodeURIComponent(b.id)}">${escapeHtml(name)}</a>`
+          : escapeHtml(name);
+        return `
+          <tr>
+            <td class="ledger__num">${place}</td>
+            <td>${nameCell} <span style="color:var(--ink-faint);font-size:0.86rem">@${escapeHtml(b.github_login || '')}</span>${badges}</td>
+            <td class="ledger__rank">${rank}</td>
+            <td class="ledger__drachmae">${fmtNum(b.total_credits)}</td>
+            <td class="ledger__drachmae">${fmtNum(b.karma)}</td>
+          </tr>
+        `;
+      }).join('');
+    }
+
+    // Reflect the active sort on every sortable header. Only one column
+    // shows its arrow at a time; the others reset to "none" — matches the
+    // ARIA-sort spec.
+    for (const [key, headerId] of Object.entries(LB_SORT_HEADERS)) {
+      const head = document.getElementById(headerId);
+      if (!head) continue;
+      const ariaSort = (lbState.sortBy === key && lbState.sortDir)
+        ? (lbState.sortDir === 'asc' ? 'ascending' : 'descending')
+        : 'none';
+      head.setAttribute('aria-sort', ariaSort);
+    }
+
+    $('#lb-range').textContent = rows.length
+      ? `${start + 1}–${Math.min(end, rows.length)} of ${rows.length}`
+      : '0';
+    $('#lb-prev').disabled = lbState.page === 0;
+    $('#lb-next').disabled = end >= rows.length;
+  }
+
+  // Cycle: pick column → desc → asc → back to default (drachmae desc).
+  // For a click on the active column we just flip direction; for a click on
+  // a different column we activate it at 'desc' (the natural "best first"
+  // direction for all three columns). Clicking the same column a third time
+  // returns to the default drachmae-desc — discoverable, no dead state.
+  function onLbSortClick(key) {
+    if (lbState.sortBy === key) {
+      if (lbState.sortDir === 'desc') {
+        lbState.sortDir = 'asc';
+      } else {
+        // Third click returns to the default view.
+        lbState.sortBy = 'drachmae';
+        lbState.sortDir = 'desc';
+      }
+    } else {
+      lbState.sortBy = key;
+      lbState.sortDir = 'desc';
+    }
+    lbState.page = 0;
+    renderLeaderboard();
+  }
+
+  // ---- Archon security watch (V3.R66 / #285) -------------------------------
+  //
+  // Hidden by default; revealed only when /me returns rank='archon'. The
+  // table renders open vulnerability reports + adjudication actions
+  // (confirm / dispute / fix / link-fix). The audit log is collapsed
+  // behind a <details> and loads on first open.
+
+  const SEVERITY_RANK = { critical: 4, high: 3, medium: 2, low: 1 };
+
+  let securityState = {
+    statusFilter: '',
+    auditLoaded: false,
+  };
+
+  function severityBadge(sev) {
+    const cls = `sev-${sev}`;
+    return `<span class="sev-badge ${cls}">${escapeHtml(sev || '?')}</span>`;
+  }
+
+  function renderSecurityReports(payload) {
+    const tbody = document.querySelector('#security-reports tbody');
+    if (!tbody) return;
+    const reports = Array.isArray(payload?.reports) ? payload.reports : [];
+    const bounty = payload?.bounty_table || {};
+    if (reports.length === 0) {
+      tbody.innerHTML = emptyRow(7, 'No reports match this filter.');
+      return;
+    }
+    // Sort: open first (by severity desc), then everything else newest first.
+    const sorted = reports.slice().sort((a, b) => {
+      const aOpen = a.status === 'open' || a.status === 'repro_attempted' ? 1 : 0;
+      const bOpen = b.status === 'open' || b.status === 'repro_attempted' ? 1 : 0;
+      if (aOpen !== bOpen) return bOpen - aOpen;
+      const aS = SEVERITY_RANK[a.severity] || 0;
+      const bS = SEVERITY_RANK[b.severity] || 0;
+      if (aS !== bS) return bS - aS;
+      return new Date(b.reported_at) - new Date(a.reported_at);
+    });
+    tbody.innerHTML = sorted.map((r) => {
+      const reporter = r.reporter_builder_id ? `#${escapeHtml(String(r.reporter_builder_id))}` : '—';
+      const drachmae = r.drachmae_awarded != null ? fmtNum(r.drachmae_awarded) : (bounty[r.severity] ? `(${fmtNum(bounty[r.severity])} if confirmed)` : '—');
+      const actions = renderSecurityActions(r);
+      return `
+        <tr data-report-id="${r.id}">
+          <td class="ledger__num">${escapeHtml(String(r.id))}</td>
+          <td>${severityBadge(r.severity)}</td>
+          <td>${escapeHtml(r.title || '')}<div style="font-size:0.78rem;opacity:0.7;">${escapeHtml(r.target || '')}</div></td>
+          <td>${escapeHtml(r.status || '')}</td>
+          <td>${reporter}</td>
+          <td class="ledger__drachmae">${drachmae}</td>
+          <td>${actions}</td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  function renderSecurityActions(report) {
+    const id = report.id;
+    const isTerminal = report.status === 'fixed' || report.status === 'wontfix';
+    const buttons = [];
+    if (!isTerminal && report.status !== 'confirmed') {
+      buttons.push(`<button type="button" class="btn-ghost sec-act" data-action="confirm" data-id="${id}">Confirm</button>`);
+    }
+    if (!isTerminal && report.status !== 'disputed') {
+      buttons.push(`<button type="button" class="btn-ghost sec-act" data-action="dispute" data-id="${id}">Dispute</button>`);
+    }
+    if (report.status !== 'fixed') {
+      buttons.push(`<button type="button" class="btn-ghost sec-act" data-action="fix" data-id="${id}">Mark fixed</button>`);
+    }
+    buttons.push(`<button type="button" class="btn-ghost sec-act" data-action="link-fix" data-id="${id}" title="Attach a fix-task ID">Link fix…</button>`);
+    return buttons.join(' ');
+  }
+
+  async function loadSecurityReports() {
+    const status = securityState.statusFilter;
+    const url = status ? `${API}/security/reports?status=${encodeURIComponent(status)}` : `${API}/security/reports`;
+    try {
+      const payload = await getJSON(url);
+      renderSecurityReports(payload);
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      const tbody = document.querySelector('#security-reports tbody');
+      if (tbody) tbody.innerHTML = emptyRow(7, 'Could not load reports.');
+      console.error('[builders] load security reports failed', err);
+    }
+  }
+
+  async function adjudicateReport(id, action) {
+    const status = $('#security-status');
+    if (status) { status.hidden = false; status.textContent = 'Working…'; }
+    try {
+      let body = {};
+      let path = `${API}/security/reports/${encodeURIComponent(id)}/${action}`;
+      if (action === 'link-fix') {
+        const taskIdRaw = window.prompt(`Task ID to link as the fix for report #${id}?`, '');
+        if (taskIdRaw == null) {
+          if (status) status.textContent = 'Cancelled.';
+          return;
+        }
+        const taskId = Number(taskIdRaw);
+        if (!Number.isInteger(taskId) || taskId <= 0) {
+          if (status) status.textContent = 'Bad task id — must be a positive integer.';
+          return;
+        }
+        body = { task_id: taskId };
+      }
+      const resp = await api.request('POST', path, { body });
+      if (resp.status === 401) { window.location.assign(`${API}/auth/web/start`); throw new Error('redirecting to auth'); }
+      const data = resp.data || {};
+      if (!resp.ok) {
+        if (status) status.textContent = `Failed: ${data.error || resp.status}`;
+        return;
+      }
+      if (status) status.textContent = `Report #${id} → ${data.report?.status || action}`;
+      await loadSecurityReports();
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] adjudication failed', err);
+      if (status) status.textContent = 'Adjudication failed. Try again.';
+    }
+  }
+
+  async function loadAuditLog() {
+    const tbody = document.querySelector('#security-audit-log tbody');
+    if (!tbody) return;
+    tbody.innerHTML = emptyRow(5, 'Loading…');
+    const method = $('#f-audit-method')?.value || '';
+    const builderId = $('#f-audit-builder')?.value || '';
+    const params = new URLSearchParams();
+    params.set('limit', '50');
+    if (method) params.set('method', method);
+    if (builderId) params.set('builder_id', builderId);
+    try {
+      const payload = await getJSON(`${API}/audit-log?${params}`);
+      const rows = Array.isArray(payload?.rows) ? payload.rows : [];
+      if (rows.length === 0) {
+        tbody.innerHTML = emptyRow(5, 'No matching audit entries.');
+        return;
+      }
+      tbody.innerHTML = rows.map((r) => `
+        <tr>
+          <td>${escapeHtml(fmtDate(r.recorded_at))}</td>
+          <td>#${escapeHtml(String(r.builder_id))}</td>
+          <td>${escapeHtml(r.method)}</td>
+          <td><code>${escapeHtml(r.route)}</code></td>
+          <td>${escapeHtml(String(r.response_status))}</td>
+        </tr>
+      `).join('');
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] audit-log load failed', err);
+      tbody.innerHTML = emptyRow(5, 'Could not load audit log.');
+    }
+  }
+
+  // task 1723: unhideArchonView is gone — the Archon nav group (Watch, Harbor,
+  // Gate, Sessions) is the shell's, revealed by renderNav's applyAccess call
+  // once /me confirms rank === 'archon' (shell.js gates Harbor on the dev-box
+  // module too). The data still loads only on the Archon pages, each behind its
+  // own archon-gated endpoint (#726).
+
+  // ---- Archon roster + management (V3.R14 / #238) --------------------------
+  //
+  // Archon-only roster of every builder, with promote / demote /
+  // release-stale-claim controls. Hidden via #roster-scroll[hidden] for
+  // non-Archons; unhideArchonView flips it on.
+  //
+  // Rank ladder is xenos < thetes < metic < archon (RANK_ORDER above). Promote
+  // walks the ladder up ONE rung; demote walks it down one. The server enforces
+  // the one-rung-promotion rule (#707), so the button must offer the true next
+  // rung per row — a xenos promotes to thetes (not metic), a thetes to metic.
+
+  const ROSTER_LADDER = ['xenos', 'thetes', 'metic', 'archon'];
+  // #408: paginate the Archon roster — it can grow past a screenful as the
+  // community scales (200+ rows seen during stress test). 20 rows/page
+  // matches the cardinality of "one comfortable scroll" inside the section
+  // without forcing the user to scan further than they can hold in working
+  // memory. Filter dropdowns still scope the dataset *before* pagination,
+  // so a Show:onboarding filter still narrows to onboarding builders.
+  const ROSTER_PAGE_SIZE = 20;
+
+  let rosterState = {
+    rows: [],
+    show: 'all',
+    staleHours: 24,
+    selfId: null,
+    loading: false,
+    page: 0,
+  };
+
+  function nextRank(rank, direction /* 'up' | 'down' */) {
+    const idx = ROSTER_LADDER.indexOf((rank || '').toLowerCase());
+    if (idx < 0) return null;
+    if (direction === 'up' && idx < ROSTER_LADDER.length - 1) return ROSTER_LADDER[idx + 1];
+    if (direction === 'down' && idx > 0) return ROSTER_LADDER[idx - 1];
+    return null;
+  }
+
+  function fmtTtfsMinutes(min) {
+    if (min === null || min === undefined) return '—';
+    const n = Number(min);
+    if (!Number.isFinite(n) || n < 0) return '—';
+    if (n < 60) return `${n}m`;
+    const hours = n / 60;
+    if (hours < 24) return `${hours.toFixed(1)}h`;
+    const days = hours / 24;
+    if (days < 30) return `${days.toFixed(1)}d`;
+    const months = days / 30;
+    return `${months.toFixed(1)}mo`;
+  }
+
+  function rosterFilterRows(rows) {
+    switch (rosterState.show) {
+      case 'onboarding':
+        return rows.filter((r) => !r.first_ship_at && r.status !== 'inactive');
+      case 'active':
+        return rows.filter((r) => Number(r.active_claim_count) > 0);
+      case 'stale':
+        return rows.filter((r) => r.stale_claim);
+      case 'inactive':
+        return rows.filter((r) => r.status === 'inactive');
+      case 'all':
+      default:
+        return rows;
+    }
+  }
+
+  function renderRoster() {
+    const tbody = document.querySelector('#roster-table tbody');
+    const countEl = $('#roster-count');
+    const pagerEl = $('#roster-pager');
+    const rangeEl = $('#roster-range');
+    const prevBtn = $('#roster-prev');
+    const nextBtn = $('#roster-next');
+    if (!tbody) return;
+    const rows = rosterFilterRows(rosterState.rows);
+    if (countEl) {
+      countEl.textContent = `${rows.length} / ${rosterState.rows.length}`;
+    }
+    if (rows.length === 0) {
+      tbody.innerHTML = emptyRow(9, 'No builders match this filter.');
+      if (pagerEl) pagerEl.hidden = true;
+      return;
+    }
+    // #408: client-side pagination. renderPager clamps the page index in case a
+    // filter/refresh shrank the dataset under our feet (e.g. on page 4, then
+    // switch to a filter with only 30 matching rows → snap back to the last
+    // legal page) and updates the range + prev/next controls.
+    const { start } = renderPager(rosterState, rows.length, ROSTER_PAGE_SIZE, { pagerEl, rangeEl, prevBtn, nextBtn });
+    const slice = rows.slice(start, start + ROSTER_PAGE_SIZE);
+
+    tbody.innerHTML = slice.map((b) => {
+      const isSelf = String(b.id) === String(rosterState.selfId);
+      const isInactive = b.status === 'inactive';
+      const upRank = nextRank(b.rank, 'up');
+      const downRank = nextRank(b.rank, 'down');
+      const claimCount = Number(b.active_claim_count) || 0;
+      const stale = !!b.stale_claim;
+      const claimsCell = claimCount === 0
+        ? '<span style="opacity:0.6;">none</span>'
+        : `${claimCount}${stale ? ' <span class="roster__stale" title="At least one claim is stale (no pulse beyond threshold)">⚠ stale</span>' : ''}`;
+      const actions = [];
+      if (isSelf) {
+        actions.push('<span style="opacity:0.55;font-size:0.8rem;">— self —</span>');
+      } else if (isInactive) {
+        actions.push('<span style="opacity:0.55;font-size:0.8rem;">inactive</span>');
+      } else {
+        if (upRank) {
+          actions.push(`<button type="button" class="btn-ghost roster__promote" data-id="${escapeHtml(String(b.id))}" data-current="${escapeHtml(b.rank || '')}" data-next="${upRank}">Promote → ${upRank}</button>`);
+        }
+        if (downRank) {
+          actions.push(`<button type="button" class="btn-ghost roster__demote" data-id="${escapeHtml(String(b.id))}" data-current="${escapeHtml(b.rank || '')}" data-next="${downRank}">Demote → ${downRank}</button>`);
+        }
+        if (stale) {
+          actions.push(`<button type="button" class="btn-ghost roster__release-stale" data-id="${escapeHtml(String(b.id))}">Release stale claim</button>`);
+        }
+      }
+      const inactiveTag = isInactive ? ' <span class="roster__inactive">inactive</span>' : '';
+      const selfTag = isSelf ? ' <span class="roster__self">you</span>' : '';
+      const handle = b.display_name || b.github_login || `builder #${b.id}`;
+      return `
+        <tr data-builder-id="${escapeHtml(String(b.id))}">
+          <td>${escapeHtml(handle)}${selfTag}${inactiveTag}<div style="font-size:0.75rem;opacity:0.65;">#${escapeHtml(String(b.id))} · @${escapeHtml(b.github_login || '')}</div></td>
+          <td>${renderRankBadge(b.rank)}</td>
+          <td class="ledger__drachmae">${fmtNum(b.total_credits)}</td>
+          <td>${fmtNum(b.karma)}</td>
+          <td class="ledger__date">${escapeHtml(fmtDate(b.onboarded_at))}</td>
+          <td class="ledger__date">${b.first_ship_at ? escapeHtml(fmtDate(b.first_ship_at)) : '<span style="opacity:0.6;">— not yet —</span>'}</td>
+          <td>${fmtTtfsMinutes(b.time_to_first_ship_minutes)}</td>
+          <td>${claimsCell}</td>
+          <td>${actions.join(' ')}</td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  async function loadRoster() {
+    const status = $('#roster-status');
+    if (rosterState.loading) return;
+    rosterState.loading = true;
+    if (status) { status.hidden = false; status.textContent = 'Loading roster…'; }
+    try {
+      const payload = await getJSON(`${API}/builders/roster?stale_hours=${encodeURIComponent(rosterState.staleHours)}`);
+      rosterState.rows = Array.isArray(payload?.builders) ? payload.builders : [];
+      renderRoster();
+      if (status) status.hidden = true;
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] load roster failed', err);
+      const tbody = document.querySelector('#roster-table tbody');
+      if (tbody) tbody.innerHTML = emptyRow(9, 'Could not load the roster.');
+      if (status) { status.hidden = false; status.textContent = `Could not load roster: ${err.message}`; }
+    } finally {
+      rosterState.loading = false;
+    }
+  }
+
+  async function rosterChangeRank(builderId, nextRankName, currentRankName) {
+    const status = $('#roster-status');
+    const ok = window.confirm(
+      `Change builder #${builderId} from ${currentRankName || '?'} to ${nextRankName}?`
+    );
+    if (!ok) return;
+    if (status) { status.hidden = false; status.textContent = `Setting rank to ${nextRankName}…`; }
+    try {
+      const resp = await patchJSON(`${API}/builders/${encodeURIComponent(builderId)}/rank`, { rank: nextRankName });
+      const newRank = resp?.builder?.rank || nextRankName;
+      if (status) status.textContent = `Builder #${builderId} → ${newRank}.`;
+      toast(`Builder #${builderId} is now ${newRank}.`);
+      await loadRoster();
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] rank change failed', err);
+      if (status) { status.hidden = false; status.textContent = `Rank change failed: ${err.message}`; }
+      toast('Rank change failed.');
+    }
+  }
+
+  async function rosterReleaseStale(builderId) {
+    const status = $('#roster-status');
+    let claims;
+    if (status) { status.hidden = false; status.textContent = 'Looking up stale claims…'; }
+    try {
+      const payload = await getJSON(`${API}/builders/${encodeURIComponent(builderId)}/active-claims?stale_hours=${encodeURIComponent(rosterState.staleHours)}`);
+      claims = Array.isArray(payload?.claims) ? payload.claims : [];
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      if (status) status.textContent = `Could not fetch claims: ${err.message}`;
+      return;
+    }
+    const stale = claims.filter((c) => c.stale_claim);
+    if (stale.length === 0) {
+      if (status) status.textContent = 'No stale claims left to release for that builder.';
+      // The roster row was probably stale-from-cache — refresh.
+      await loadRoster();
+      return;
+    }
+    // Pick the oldest stale claim (the queue order matches claimed_at ASC
+    // from the server). For multiple stale claims, surface the count so
+    // the Archon knows another action may be needed.
+    const target = stale[0];
+    const reason = window.prompt(
+      `Release stale claim #${target.claim_id} (task #${target.task_id} "${target.task_title || ''}") for builder #${builderId}?\n\nReason (required):`,
+      'pulse heartbeat went silent; freeing the task'
+    );
+    if (reason == null) {
+      if (status) status.textContent = 'Cancelled.';
+      return;
+    }
+    const trimmed = String(reason).trim();
+    if (!trimmed) {
+      if (status) status.textContent = 'A reason is required for an on-behalf release.';
+      return;
+    }
+    if (status) status.textContent = `Releasing claim #${target.claim_id}…`;
+    try {
+      const resp = await api.request('POST', `${API}/claims/${encodeURIComponent(target.claim_id)}/release-on-behalf`, { body: { reason: trimmed } });
+      if (resp.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }
+      const data = resp.data || {};
+      if (!resp.ok) {
+        if (status) status.textContent = `Release failed: ${data.error || resp.status}`;
+        toast('Release failed.');
+        return;
+      }
+      const remaining = stale.length - 1;
+      if (status) status.textContent = `Released claim #${target.claim_id}.` + (remaining > 0 ? ` ${remaining} more stale claim(s) on this builder — click again to release the next.` : '');
+      toast('Claim released.');
+      await loadRoster();
+    } catch (err) {
+      if (status) status.textContent = `Release failed: ${err.message}`;
+      toast('Release failed.');
+    }
+  }
+
+  // ---- override requests (V3.R74 / #293) -----------------------------------
+  //
+  // Archon-only. Lists open requests where a builder asked the Archon to
+  // override a failed grader. Approve flips task to confirmed + pays the
+  // requester; deny only stamps the decision row.
+
+  async function loadOverrideRequests() {
+    const tbody = document.querySelector('#override-requests tbody');
+    if (!tbody) return;
+    try {
+      const data = await getJSON(`${API}/override-requests?status=open`);
+      const rows = Array.isArray(data?.requests) ? data.requests : [];
+      if (rows.length === 0) {
+        tbody.innerHTML = emptyRow(6, 'No open requests.');
+        return;
+      }
+      tbody.innerHTML = rows.map((r) => `
+        <tr data-request-id="${escapeHtml(String(r.id))}">
+          <td>${escapeHtml(String(r.id))}</td>
+          <td>#${escapeHtml(String(r.task_id))} — ${escapeHtml(r.task_title || '')}</td>
+          <td>@${escapeHtml(r.requester_login || '')}</td>
+          <td class="override__rationale">${escapeHtml(r.rationale || '')}</td>
+          <td>${escapeHtml(String(r.credits_reward ?? '—'))}</td>
+          <td>
+            <button class="btn-ghost override__approve" type="button">Approve</button>
+            <button class="btn-ghost override__deny" type="button">Deny</button>
+          </td>
+        </tr>
+      `).join('');
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] override-requests failed', err);
+      tbody.innerHTML = emptyRow(6, 'Could not load override requests.');
+    }
+  }
+
+  async function decideOverride(requestId, decision) {
+    const status = $('#override-status');
+    const verb = decision === 'approve' ? 'Approve' : 'Deny';
+    const note = window.prompt(`${verb} request #${requestId} — optional note (sent to audit log):`, '');
+    if (note === null) return; // user cancelled
+    try {
+      const res = await api.request('POST', `${API}/override-requests/${encodeURIComponent(requestId)}/decide`, { body: { decision, note: note || undefined } });
+      if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }
+      const body = res.data || {};
+      if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
+      if (status) {
+        status.hidden = false;
+        status.textContent = decision === 'approve'
+          ? `Approved — task flipped to confirmed, ${curLabel()} paid: ${body.confirmResult?.creditsAwarded ?? 0}.`
+          : `Denied — the task stays at completed.`;
+      }
+      await loadOverrideRequests();
+    } catch (err) {
+      console.error('[builders] decide override failed', err);
+      if (status) { status.hidden = false; status.textContent = `Could not decide: ${err.message}`; }
+    }
+  }
+
+  // ---- skill model preferences (V3.R85 / #304) -----------------------------
+  //
+  // The matrix lets each builder override the system default model for each
+  // slash-command skill. System defaults come from the audit in
+  // src/bongos/skill-prefs.js (mechanism vs judgment classification) and are
+  // echoed back in the GET response so the table can label them.
+
+  const MODEL_LABELS = {
+    opus: 'Opus',
+    sonnet: 'Sonnet',
+    haiku: 'Haiku',
+    script: 'no LLM',
+  };
+
+  function modelLabel(m) {
+    return MODEL_LABELS[m] || m || '—';
+  }
+
+  function renderSkillPrefs(data) {
+    const tbody = $('#skill-prefs-table tbody');
+    if (!tbody) return;
+    const rows = Array.isArray(data?.effective) ? data.effective : [];
+    const allowed = Array.isArray(data?.allowed_models) ? data.allowed_models : ['opus', 'sonnet', 'haiku', 'script'];
+    if (rows.length === 0) {
+      tbody.innerHTML = emptyRow(3, 'No skills registered.');
+      return;
+    }
+    tbody.innerHTML = rows.map((row) => {
+      const opts = ['<option value="">— default —</option>']
+        .concat(allowed.map((m) => {
+          const sel = row.override_model === m ? ' selected' : '';
+          return `<option value="${m}"${sel}>${modelLabel(m)}</option>`;
+        }))
+        .join('');
+      const defaultCell = `<span class="skill-prefs__default" title="System default for this skill">${modelLabel(row.default_model)}</span>`;
+      return `
+        <tr data-skill="${escapeHtml(row.skill)}">
+          <td><code>${escapeHtml(row.skill)}</code></td>
+          <td>${defaultCell}</td>
+          <td>
+            <select class="skill-prefs__select" data-skill="${escapeHtml(row.skill)}" aria-label="Model for ${escapeHtml(row.skill)}">
+              ${opts}
+            </select>
+          </td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  async function saveSkillPref(skill, modelOrNull) {
+    const status = $('#skill-prefs-status');
+    if (status) { status.hidden = false; status.textContent = 'Saving…'; }
+    try {
+      const body = { [skill]: modelOrNull };
+      const resp = await patchJSON(`${API}/me/skill-prefs`, body);
+      renderSkillPrefs(resp);
+      if (status) status.textContent = modelOrNull
+        ? `Set ${skill} → ${modelLabel(modelOrNull)}.`
+        : `Cleared ${skill} override (falls back to default).`;
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] save skill pref failed', err);
+      if (status) status.textContent = 'Could not save. Try again.';
+    }
+  }
+
+  // ---- onboarding live-tick poll (task 1444) -------------------------------
+  //
+  // The onboarding checklist is rendered once from the page-load /me snapshot.
+  // But three of its steps clear from LIVE server signals that flip WITHOUT any
+  // local action or page reload while the hall sits open:
+  //   * box_connect — stamped by the box's heartbeat the first time a `claude`
+  //                   process runs on the dev box (builder_boxes.first_connected_at);
+  //   * cli_setup   — stamped when the GDS CLI is first authenticated on the box;
+  //   * join_discord — flips on the OAuth link (usually a full redirect, but can
+  //                    also land from another tab).
+  // Without a poll, a newcomer who connects their box AFTER opening the hall sees
+  // the step stay unchecked until they manually reload — exactly the bug scootermack
+  // hit. "The city watches" only worked on the next full reload. So while any
+  // live-signal step is still uncleared, re-fetch /me on an interval and re-render
+  // the checklist; stop once they all clear (or the builder graduates). The box
+  // panel runs its OWN poll and is never re-mounted here (renderOnboarding touches
+  // a different DOM subtree), so this doesn't disturb an in-flight setup.
+  let onboardingPollTimer = null;
+  const ONBOARDING_POLL_MS = 15000;
+
+  // True while at least one step that clears from a live signal (box/cli/discord)
+  // is still uncleared and the builder hasn't graduated. The pick_disciplines and
+  // ship_three steps flip via local action (PATCH re-renders) or shipping, so they
+  // don't need a poll — scoping to the live-signal steps bounds polling to the
+  // setup window rather than running forever for any non-graduated builder.
+  function onboardingNeedsLivePoll(onboarding) {
+    if (!onboarding || onboarding.graduated) return false;
+    const stages = Array.isArray(onboarding.stages) ? onboarding.stages : [];
+    return stages.some((s) =>
+      (s.source === 'box' || s.source === 'cli' || s.source === 'discord') && !s.cleared);
+  }
+
+  function stopOnboardingPoll() {
+    if (onboardingPollTimer) { clearTimeout(onboardingPollTimer); onboardingPollTimer = null; }
+  }
+
+  function scheduleOnboardingPoll(onboarding) {
+    stopOnboardingPoll();
+    if (!onboardingNeedsLivePoll(onboarding)) return;
+    onboardingPollTimer = setTimeout(refreshOnboardingFromServer, ONBOARDING_POLL_MS);
+  }
+
+  async function refreshOnboardingFromServer() {
+    onboardingPollTimer = null;
+    // Don't poll a backgrounded tab — wait for it to come back (the
+    // visibilitychange listener re-arms from the cached state).
+    if (document.hidden) { scheduleOnboardingPoll(lastMeState && lastMeState.onboarding); return; }
+    let me;
+    try {
+      me = await getJSON(`${API}/me`, { softAuth: true });
+    } catch (err) {
+      // Session expired → stop (a redirect/landing will take over on next action).
+      if (err && err.code === AUTH_NEEDED) { stopOnboardingPoll(); return; }
+      // Transient (network blip / 5xx) → try again next interval so a single
+      // failure doesn't permanently kill the auto-tick.
+      scheduleOnboardingPoll(lastMeState && lastMeState.onboarding);
+      return;
+    }
+    if (!me || !me.builder) return;
+    const wasGraduated = !!(lastMeState && lastMeState.onboarding && lastMeState.onboarding.graduated);
+    lastMeState = me;
+    lastKarmaState = me.karma || lastKarmaState;
+    lastCostState = me.cost || lastCostState;
+    lastNeedsState = me.needs || lastNeedsState;
+    renderOnboarding(me.onboarding || null, me.discord);
+    // If they graduated while watching, hide the welcome panel + rebuild the nav
+    // (drops the Welcome/Path chips) — the same transition loadAll would render.
+    if (me.onboarding && me.onboarding.graduated && !wasGraduated) {
+      renderWelcome(me.builder, me.onboarding);
+      renderNav(me.builder, me.onboarding || null);
+    }
+    scheduleOnboardingPoll(me.onboarding || null);
+  }
+
+  // ---- bootstrap -----------------------------------------------------------
+
+  async function loadAll() {
+    // Profile first. If /me returns 401, render an unauth landing card with a
+    // Sign-in button instead of bouncing straight to GitHub — gives the visitor
+    // a beat of orientation about what they're walking into.
+    let me;
+    try {
+      me = await getJSON(`${API}/me`, { softAuth: true });
+    } catch (err) {
+      if (err && err.code === AUTH_NEEDED) { renderLanding(); return; }
+      throw err;
+    }
+    // Signed in: drop the landing card if a previous unauth render left it up.
+    const landingRoot = $('#landing-root');
+    if (landingRoot) { landingRoot.hidden = true; landingRoot.innerHTML = ''; }
+
+    lastKarmaState = me.karma || null;
+    lastCostState = me.cost || null;
+    lastNeedsState = me.needs || null; // task 1013 / ADR 0073: action-needed banner
+    // #408: stash the whole /me payload so reopenWelcomeFromNav can re-render
+    // the welcome panel without a fresh round-trip.
+    lastMeState = me;
+    // #748: decide the newcomer gate up front so the async karma/acclaim feeds
+    // (which un-hide their own scroll on data arrival) honour it too.
+    newcomerGated = normalizeRank(me.builder?.rank) === 'xenos';
+    // V3.R77 (#296): first-visit welcome panel. Renders above the profile and
+    // hides itself once dismissed or once the builder graduates. Computed
+    // before profile so the dismiss button is wired by the time the user
+    // sees the page.
+    // Cache self id on window so the dismiss-click handler can find it
+    // without re-fetching /me. Set BEFORE renderWelcome so the wired
+    // dismiss listener (attached once at bootstrap) can use it immediately.
+    window.__buildersSelfId = me.builder?.id ?? null;
+    renderWelcome(me.builder, me.onboarding || null);
+    renderProfile(me.builder);
+    // #731: the CLI-token re-issue card (V3.R91 #401) and the Discord connect/
+    // link card (F7, ADR 0033) moved to /builders/settings — the hall's Standing
+    // card is identity-only now.
+    // V3.R75 (#294): auto-completing onboarding checklist. The /me payload
+    // carries the builder's own state directly so this is a render-only call.
+    renderOnboarding(me.onboarding || null, me.discord);
+    // task 1444: keep the checklist live — re-fetch /me on an interval while a
+    // box/cli/discord step is still uncleared, so it ticks itself without a manual
+    // reload the moment the dev box connects (or the CLI/Discord links).
+    scheduleOnboardingPoll(me.onboarding || null);
+    renderRecentGrades(me.grades?.recent || []);
+    renderRollingNote(me.grades?.rolling || null);
+    // V3.R72 (#291, C5): the dev curve. Loaded fire-and-forget — a slow or
+    // empty analytics feed must not hold up the rest of the hall, and the
+    // section un-hides itself (and re-renders the nav) only when there's data.
+    loadAnalytics(me.builder);
+    // V3.R26 (#246): karma feed — the recent karma_log entries powering the
+    // "why did my karma move" answer. The /me payload bundles this so the
+    // page doesn't need a follow-up call.
+    renderKarmaFeed(me.karma?.recent || []);
+    // V3.R25 (#245): peer acclaim feed — a separate endpoint (not bundled in
+    // /me because it spans all builders' work), loaded fire-and-forget so a
+    // slow/failed feed can't hold up the rest of the hall.
+    loadAcclaimFeed();
+    // Capture self id for the roster's "cannot change your own rank" guard.
+    rosterState.selfId = me.builder?.id ?? null;
+
+    // #408: build the sticky nav now that every section has settled its
+    // hidden state (welcome → karma → onboarding → security/roster).
+    // The renderNav call also wires the IntersectionObserver for active-
+    // section highlighting. Idempotent — safe to call again on dismiss/re-open.
+    // #748: collapse the hall to the newcomer view (onboarding + Standing) for
+    // a Xenos BEFORE building the nav, so the chip strip matches what's shown.
+    applyNewcomerGate();
+    renderNav(me.builder, me.onboarding || null);
+
+    // Then the rest, in parallel. Any individual section failure shouldn't take
+    // down the page — log and show an inline placeholder.
+    // #726: the per-skill model picker (Voices) moved to /builders/settings,
+    // so the hall no longer fetches /me/skill-prefs here.
+    const [achAll, ships, versionsResp, lb, bounty] = await Promise.allSettled([
+      getJSON(`${API}/achievements`),
+      getJSON(`${API}/me/recent-ships?limit=all`),
+      getJSON(`${API}/versions`),
+      getJSON(`${API}/leaderboard`),
+      getJSON(`${API}/public/bounty-table`),
+    ]);
+
+    if (achAll.status === 'fulfilled') {
+      // Show top 10 by sort_order — already ordered server-side. (Set is locked at 8
+      // for V2, so the slice is defensive.) Unlocked + locked-with-progress come
+      // straight from the enriched /me payload.
+      renderAchievements(
+        (achAll.value.achievements || []).slice(0, 10),
+        me.unlocked || [],
+        me.locked_with_progress || [],
+      );
+    } else {
+      $('#ach-grid').innerHTML = `<div class="profile__placeholder">Achievements could not be loaded.</div>`;
+    }
+
+    if (ships.status === 'fulfilled') {
+      shipState.all = ships.value.ships || [];
+      renderRecentShips();
+    } else {
+      $('#recent-ships tbody').innerHTML = emptyRow(4, 'Your work history could not be loaded.');
+    }
+
+    if (versionsResp.status === 'fulfilled') {
+      const versions = versionsResp.value.versions || [];
+      // Populate the Works Wrought version filter — limited to versions this
+      // builder has actually shipped to, so the dropdown can't offer empty
+      // options. (The old claimable-works version filter moved to /work, #750.)
+      populateShipVersionFilter(versions);
+    }
+
+    if (lb.status === 'fulfilled') {
+      lbState.rows = lb.value.leaderboard || [];
+      lbState.page = 0;
+      renderLeaderboard();
+      // #757: the Standing card painted before the Roll loaded, so re-render it
+      // now that lbState.rows exists — this is when its "#N on the Roll" stat
+      // can resolve.
+      if (lastMeState && lastMeState.builder) renderProfile(lastMeState.builder);
+    } else {
+      $('#leaderboard tbody').innerHTML = emptyRow(5, 'The leaderboard could not be loaded.');
+    }
+
+    if (bounty.status === 'fulfilled') {
+      renderBountyTable(bounty.value.table || []);
+    } else {
+      $('#bounty-table tbody').innerHTML = emptyRow(3, 'The reward schedule could not be loaded.');
+    }
+
+  }
+
+  function wireEvents() {
+    // #profile-body is re-rendered after load, so delegate the save click.
+    $('#profile-body').addEventListener('click', (e) => {
+      if (e.target.closest('#disc-save')) saveDisciplines();
+    });
+
+    // V3.R72 (#291): the dev-curve scope toggle (Archon only). Delegated on the
+    // curve body since renderCurveBody replaces the toggle's innerHTML.
+    $('#curve-body')?.addEventListener('click', (e) => {
+      const btn = e.target.closest('.curve__scope-btn[data-scope]');
+      if (!btn) return;
+      const scope = btn.dataset.scope === 'eco' ? 'eco' : 'self';
+      if (scope === analyticsState.scope) return;
+      analyticsState.scope = scope;
+      renderCurveBody();
+    });
+
+    // task 1723: the Home "show the setup guide again" link re-opens a dismissed
+    // welcome banner (the old welcome chip's job) — clears the dismissal flag,
+    // re-renders the panel, refreshes the nav, then scrolls to it.
+    document.getElementById('welcome-reopen')?.addEventListener('click', (e) => {
+      reopenWelcomeFromNav(e);
+    });
+
+    // V3.R75 (#294): the onboarding list re-renders on each /me load, so the
+    // inline craft picker is wired by delegation to the list container. (The
+    // primer-read ack button that also lived here was removed in #766.)
+    $('#onboarding-list')?.addEventListener('click', (e) => {
+      const disc = e.target.closest('.onboarding-item__disc[data-disc]');
+      if (disc) { pickDiscipline(disc.dataset.disc); return; }
+      // #777: the only other control is the Connect-Discord anchor, which is a
+      // real link (full-page nav into the OAuth flow) — nothing to handle here.
+      // Both new steps (join_discord, cli_setup) auto-detect server-side.
+    });
+
+    // #777: setup-config toggle in the welcome panel. Flips which config pane
+    // (Desktop app vs Claude Online) is shown — pure client-side, no round-trip.
+    // The dev-box buttons + credential-copy inside the online pane are handled by
+    // the OTBBoxPanel module's own scoped listener (#807), not here.
+    $('#welcome-body')?.addEventListener('click', (e) => {
+      const tab = e.target.closest('.setup__tab[data-config]');
+      if (!tab) return;
+      const setup = tab.closest('.setup');
+      if (!setup) return;
+      setup.dataset.config = tab.dataset.config;
+      setup.querySelectorAll('.setup__tab').forEach((t) => {
+        t.setAttribute('aria-selected', String(t === tab));
+      });
+      writeSetupConfig(tab.dataset.config); // #785: remember the choice
+    });
+
+    // Welcome panel minimize toggle (replaces full dismiss).
+    $('#welcome-minimize')?.addEventListener('click', () => {
+      const scroll = $('#welcome-scroll');
+      const btn = $('#welcome-minimize');
+      if (!scroll) return;
+      const minimized = scroll.classList.toggle('scroll--welcome--minimized');
+      if (btn) btn.textContent = minimized ? '+' : '−';
+      if (minimized) onboardingBox().stop(); else onboardingBox().refresh();
+    });
+
+    // V3.R25 (#245): delegated click handler for the peer-acclaim vote buttons.
+    $('#acclaim-feed')?.addEventListener('click', onAcclaimClick);
+
+    $('#f-ships-window')?.addEventListener('change', onShipsFilterChange);
+    $('#f-ships-version')?.addEventListener('change', onShipsFilterChange);
+    $('#f-ships-sort')?.addEventListener('change', renderRecentShips);
+    $('#ships-prev')?.addEventListener('click', () => {
+      if (shipState.page > 0) { shipState.page--; renderRecentShips(); }
+    });
+    $('#ships-next')?.addEventListener('click', () => {
+      shipState.page++;
+      renderRecentShips();
+    });
+
+
+    $('#lb-prev').addEventListener('click', () => {
+      if (lbState.page > 0) { lbState.page--; renderLeaderboard(); }
+    });
+    $('#lb-next').addEventListener('click', () => {
+      const max = Math.ceil(lbState.rows.length / lbState.pageSize) - 1;
+      if (lbState.page < max) { lbState.page++; renderLeaderboard(); }
+    });
+
+    // Sortable leaderboard headers — clickable + keyboard-operable. Each
+    // sortable column registers under LB_SORT_HEADERS; the click handler
+    // routes the column key into the shared cycle.
+    for (const [key, headerId] of Object.entries(LB_SORT_HEADERS)) {
+      const head = document.getElementById(headerId);
+      if (!head) continue;
+      head.setAttribute('tabindex', '0');
+      head.setAttribute('role', 'button');
+      head.addEventListener('click', () => onLbSortClick(key));
+      head.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onLbSortClick(key);
+        }
+      });
+    }
+
+    // Security watch (Archon-only) — status filter + delegated action clicks.
+    // The section is hidden for non-Archons via unhideArchonView, so these
+    // listeners are safe to attach unconditionally (they just won't fire).
+    $('#f-security-status')?.addEventListener('change', (e) => {
+      securityState.statusFilter = e.target.value || '';
+      loadSecurityReports();
+    });
+    $('#security-reports')?.addEventListener('click', (e) => {
+      const btn = e.target.closest('.sec-act');
+      if (!btn) return;
+      const id = btn.dataset.id;
+      const action = btn.dataset.action;
+      if (id && action) adjudicateReport(id, action);
+    });
+    // Override-requests approve/deny — delegated to the table body.
+    $('#override-requests')?.addEventListener('click', (e) => {
+      const tr = e.target.closest('tr[data-request-id]');
+      if (!tr) return;
+      const id = tr.dataset.requestId;
+      if (e.target.classList.contains('override__approve')) decideOverride(id, 'approve');
+      else if (e.target.classList.contains('override__deny')) decideOverride(id, 'deny');
+    });
+    // Audit log — lazy-load on first <details> open, refresh on filter change.
+    $('#security-audit-details')?.addEventListener('toggle', (e) => {
+      if (e.target.open && !securityState.auditLoaded) {
+        securityState.auditLoaded = true;
+        loadAuditLog();
+      }
+    });
+    $('#f-audit-method')?.addEventListener('change', loadAuditLog);
+    $('#f-audit-builder')?.addEventListener('change', loadAuditLog);
+    $('#audit-refresh')?.addEventListener('click', loadAuditLog);
+
+    // Skill-prefs table — change handler delegated so post-render select
+    // elements still fire. The empty value ("— default —") clears the override
+    // via the null sentinel; everything else PATCHes the named model.
+    const prefsTable = $('#skill-prefs-table');
+    if (prefsTable) {
+      prefsTable.addEventListener('change', (e) => {
+        const sel = e.target.closest('.skill-prefs__select');
+        if (!sel) return;
+        const skill = sel.dataset.skill;
+        if (!skill) return;
+        const next = sel.value === '' ? null : sel.value;
+        saveSkillPref(skill, next);
+      });
+    }
+
+    // Roster — Archon-only. Filter change, threshold change, refresh button.
+    // Action buttons (promote / demote / release-stale) delegated to the
+    // table body; the table is re-rendered on every action so listeners can
+    // safely be one-shot at the container.
+    $('#f-roster-show')?.addEventListener('change', (e) => {
+      rosterState.show = e.target.value || 'all';
+      // #408: changing the filter changes the dataset, so jump back to the
+      // first page — otherwise a "show: onboarding (3 rows)" filter could
+      // leave the user stranded on page 4 of "all".
+      rosterState.page = 0;
+      renderRoster();
+    });
+    $('#f-roster-stale')?.addEventListener('change', (e) => {
+      const n = Number(e.target.value);
+      if (Number.isFinite(n) && n > 0 && n <= 720) {
+        rosterState.staleHours = n;
+        rosterState.page = 0;
+        loadRoster();
+      } else {
+        e.target.value = String(rosterState.staleHours);
+        toast('Stale threshold must be 1–720 hours.');
+      }
+    });
+    $('#roster-refresh')?.addEventListener('click', loadRoster);
+    // #408: roster pager — prev/next buttons mirroring the leaderboard
+    // pattern. Page index is clamped inside renderRoster, so we don't need
+    // to guard the bounds here.
+    $('#roster-prev')?.addEventListener('click', () => {
+      if (rosterState.page > 0) { rosterState.page--; renderRoster(); }
+    });
+    $('#roster-next')?.addEventListener('click', () => {
+      rosterState.page++;
+      renderRoster();
+    });
+    $('#roster-table')?.addEventListener('click', (e) => {
+      const btn = e.target.closest('button');
+      if (!btn) return;
+      const id = btn.dataset.id;
+      if (!id) return;
+      if (btn.classList.contains('roster__promote') || btn.classList.contains('roster__demote')) {
+        rosterChangeRank(id, btn.dataset.next, btn.dataset.current);
+      } else if (btn.classList.contains('roster__release-stale')) {
+        rosterReleaseStale(id);
+      }
+    });
+
+    // Logout link: the /api/bongos/auth/logout endpoint is POST + requires the
+    // session cookie. Convert the anchor click into a fetch then bounce home.
+    $('#logout-link').addEventListener('click', async (e) => {
+      e.preventDefault();
+      try {
+        await api.request('POST', `${API}/auth/logout`);
+      } catch (_) { /* even if it fails we drop the cookie below */ }
+      // Best-effort cookie clear on the client side too. Mirror the SERVER
+      // logout (src/bongos/routes/auth.js): expire BOTH the current `gds_session`
+      // and the legacy `pms_session`, each in BOTH the host-only form and the
+      // apex-scoped `Domain=.amazonprimea.com` form (#726 — the session cookie
+      // is set apex-scoped on production hosts so it crosses subdomains; an
+      // expire only matches the cookie whose Domain attribute it names, so the
+      // host-only Max-Age=0 alone leaves the apex cookie live). Clearing only
+      // `pms_session` host-only — the prior behaviour — left a real
+      // `gds_session` cookie behind on this offline fallback path.
+      for (const name of ['gds_session', 'pms_session']) {
+        document.cookie = `${name}=; Max-Age=0; path=/`;
+        document.cookie = `${name}=; Max-Age=0; path=/; Domain=.${location.hostname.split('.').slice(-2).join('.')}`;
+      }
+      window.location.assign('/');
+    });
+  }
+
+  // ---- Live updates (#569 / ADR 0030 → R55 / ADR 0069) -------------------
+  // The hall used to fetch every panel once at load and then freeze until a
+  // manual refresh — so an onboarding step that ticked server-side (e.g. after
+  // /builder-ship) never showed. We now open a Server-Sent Events stream
+  // (GET /api/bongos/live) that emits a tiny `nudge` whenever GDS state changes via
+  // ANY write path — API routes, background routines, even direct psql writes
+  // (the trigger lives in the DB; see migration 066 + src/bongos/routes/live.js).
+  // On a nudge we re-run loadAll(), debounced so a burst coalesces into one
+  // refresh. SSE replaced the Colyseus 'builders_hall' room (R55) so the hall's
+  // live refresh works on a game-less Cloud Bongos boot with no Colyseus in the
+  // process; EventSource also auto-reconnects, so there's no manual backoff here.
+  let liveSource = null;
+  let liveHadOpen = false;
+  let liveRefreshTimer = null;
+  let liveReloading = false;
+  let visibilityWired = false;
+
+  // Don't yank the DOM out from under an active interaction or clobber unsent
+  // input: if the user is typing in / focused on a field (e.g. the disciplines
+  // editor), defer the refresh and re-arm shortly.
+  function userIsInteracting() {
+    const el = document.activeElement;
+    return !!el && /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+  }
+
+  function scheduleLiveRefresh(delay = 700) {
+    if (liveRefreshTimer) return; // already coalescing a burst
+    liveRefreshTimer = setTimeout(async () => {
+      liveRefreshTimer = null;
+      if (liveReloading || document.hidden || userIsInteracting()) {
+        scheduleLiveRefresh(1500); // not now — try again soon, don't drop it
+        return;
+      }
+      liveReloading = true;
+      try {
+        await loadAll();
+      } catch (err) {
+        console.error('[builders] live refresh failed', err);
+      } finally {
+        liveReloading = false;
+      }
+    }, delay);
+  }
+
+  function connectLiveSource() {
+    // EventSource missing (ancient browser) → the hall stays static; the
+    // visibilitychange backstop below still refreshes on focus.
+    if (liveSource || typeof EventSource === 'undefined') return;
+    try {
+      // Same-origin GET — the gds_session cookie rides automatically, so the
+      // server's requireBuilder gate authenticates the viewer transparently.
+      const es = new EventSource(`${API}/live`);
+      liveSource = es;
+      es.addEventListener('nudge', () => scheduleLiveRefresh());
+      es.onopen = () => {
+        // On a RECONNECT (not the first open) we may have missed a nudge while
+        // the stream was down — refresh once to catch up. EventSource owns the
+        // reconnect, so there is no manual backoff to manage here.
+        if (liveHadOpen) scheduleLiveRefresh(500);
+        liveHadOpen = true;
+      };
+      es.onerror = () => {
+        // A transient drop leaves readyState === CONNECTING and EventSource
+        // reconnects on its own. A terminal close (CLOSED — e.g. a 401) won't,
+        // so drop the handle; visibilitychange can then re-open later.
+        if (es.readyState === EventSource.CLOSED) {
+          liveSource = null;
+        }
+      };
+    } catch (err) {
+      console.warn('[builders] live stream failed', err && err.message ? err.message : err);
+    }
+  }
+
+  function startLiveUpdates() {
+    connectLiveSource();
+    // Belt-and-braces: also refresh when the tab regains focus, covering any
+    // nudge missed while the connection was briefly down or the laptop slept.
+    if (!visibilityWired) {
+      visibilityWired = true;
+      document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+          if (!liveSource) connectLiveSource(); // resume a dropped connection
+          scheduleLiveRefresh(200);
+        }
+      });
+    }
+  }
+
+  // The #NNN deep-link record overlay moved to task-detail.js (task 1753) —
+
+  document.addEventListener('DOMContentLoaded', () => {
+    // BV1.R75: stamp the registry's <section>s into <main> BEFORE wiring events —
+    // wireEvents() + the data-render code address the widgets by their static ids,
+    // which only exist once the registry has mounted them.
+    mountHallWidgets();
+    wireEvents();
+    // Fetch the instance's repo coords (public) so the welcome "get the code"
+    // clone block shows this instance's own repository (ADR 0062 §3, task 1705).
+    loadInstanceRepo();
+    // #731: the Discord connect/link card moved to /builders/settings, and the
+    // OAuth callback now lands there — so the ?discord=joined|linked toast is
+    // handled by settings.js, not here.
+    loadAll().then(() => {
+      // Only open the live channel once we're authenticated — loadAll() returns
+      // early (landing card) for an unauthenticated visitor, leaving selfId unset.
+      if (window.__buildersSelfId) startLiveUpdates();
+    }).catch((err) => {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[builders] load failed', err);
+      toast('The page could not be loaded. Try again.');
+    });
+  });
+})();