@bongos/core 1.19.332 → 1.19.334

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

@@ -0,0 +1,1211 @@
+// hall-render.js — the Builders' Hall RENDERERS, exposed as window.OTBHallRender.
+//
+// Carved out of builders.js by task 1003206 (goal 1000079, the R03 de-monolith
+// plan): that file was 2,558 lines, the largest first-party file left over the
+// 1,500-line ratchet. This holds the view painters — landing, profile, welcome,
+// onboarding, recent ships, the AI-dev curve, the leaderboard, the nav and hall
+// widgets — plus the helpers and view state only they touch.
+//
+// WHY A FACTORY, and not a flat namespace like goals-lib.js. goals-lib.js can be
+// flat because everything in it is pure. These renderers are not: they need the
+// page's api client and formatters, and — the part that matters — page state that
+// KEEPS CHANGING after load (the last /me payload, the karma/cost/needs/rebase
+// snapshots, the newcomer gate). Copying those in once would freeze them at boot
+// and the hall would render stale forever. So builders.js passes a ctx whose live
+// fields are GETTERS and the bodies below read `ctx.lastMeState`; everything
+// stable is destructured once, keeping those call sites byte-identical.
+//
+// Load order: index.html loads this BEFORE builders.js (the goals-lib.js /
+// hall-kit.js pattern), and builders.js calls the factory once, after its own
+// declarations, so nothing is read before it exists.
+(function () {
+  'use strict';
+
+  window.OTBHallRender = function createHallRender(ctx) {
+    const { API, RANK_ORDER, api, brandWorld, curLabel, emptyRow, fmtDate, mins, normalizeRank, pct, postJSON, rankLabel, rankWeight, signClasses, toast, usd } = ctx;
+    const { escapeHtml, $, fmtNum, moduleOn } = window.OTB;
+
+  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.',
+    ],
+  };
+  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>`;
+  }
+  const VIEW_CONTAINERS = {
+    home: 'zone-home-main',
+    standing: 'zone-standing',
+    leaderboard: 'zone-leaderboard',
+  };
+  const STANDING_GROUPS = [
+    { key: 'work', label: 'Work' },
+    { key: 'karma', label: 'Karma' },
+    { key: 'progress', label: 'Progress' },
+    { key: 'achievements', label: 'Achievements' },
+  ];
+  const standingGroupId = (key) => `standing-${key}`;
+  function ensureStandingGroups() {
+    const zone = document.getElementById('zone-standing');
+    if (!zone || document.getElementById(standingGroupId(STANDING_GROUPS[0].key))) return;
+    for (const g of STANDING_GROUPS) {
+      const el = document.createElement('div');
+      el.id = standingGroupId(g.key);
+      el.className = 'standing-group';
+      zone.appendChild(el);
+    }
+  }
+  function widgetHost(wgt) {
+    const zone = wgt.zone ? document.getElementById(`zone-${wgt.zone}`) : null;
+    if (zone) return zone;
+    if (wgt.group) {
+      ensureStandingGroups();
+      const group = document.getElementById(standingGroupId(wgt.group));
+      if (group) return group;
+    }
+    const viewId = VIEW_CONTAINERS[wgt.view || 'home'] || VIEW_CONTAINERS.home;
+    return document.getElementById(viewId) || document.querySelector('main');
+  }
+  const ZONE_BUDGETS = { 'home-stats': 1, 'home-band': 2, 'home-main': 3 };
+  function mountHallWidgets() {
+    const main = document.querySelector('main');
+    if (!main || typeof window.OTB.hallWidgets !== 'function') return;
+    const zoneCounts = {};
+    const overflow = [];
+    let overflowHost = null;
+    for (const wgt of window.OTB.hallWidgets()) {
+      try {
+        let host = widgetHost(wgt) || main;
+        const isHomeZone = (wgt.view || 'home') === 'home' && wgt.zone && ZONE_BUDGETS[wgt.zone] != null;
+        if (isHomeZone) {
+          zoneCounts[wgt.zone] = (zoneCounts[wgt.zone] || 0) + 1;
+          if (zoneCounts[wgt.zone] > ZONE_BUDGETS[wgt.zone]) {
+            if (!overflowHost) {
+              overflowHost = document.createElement('div');
+              overflowHost.id = 'zone-home-overflow';
+              overflowHost.hidden = true;
+              document.getElementById('zone-home-main')?.appendChild(overflowHost);
+            }
+            host = overflowHost || host;
+            overflow.push({ id: wgt.id, label: wgt.label });
+          }
+        }
+        let section = document.getElementById(wgt.id);
+        if (!section) {
+          section = document.createElement('section');
+          section.id = wgt.id;
+          host.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);
+      }
+    }
+    if (overflow.length) {
+      const more = document.createElement('section');
+      more.className = 'scroll scroll--bare';
+      more.id = 'home-more-row';
+      more.innerHTML = `<p class="home-more">More: ${overflow.map((o) =>
+        `<a href="#" data-reveal="${o.id}">${o.label}</a>`).join(' · ')}</p>`;
+      document.getElementById('zone-home-main')?.appendChild(more);
+      more.addEventListener('click', (e) => {
+        const a = e.target.closest('[data-reveal]');
+        if (!a) return;
+        e.preventDefault();
+        const section = document.getElementById(a.dataset.reveal);
+        if (section) {
+          document.getElementById('zone-home-main')?.insertBefore(section, more);
+          section.hidden = false;
+        }
+        a.remove();
+        if (!more.querySelector('[data-reveal]')) more.remove();
+      });
+    }
+    // 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);
+  }
+  let standingRail = 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);
+  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 group with a visible member.
+    const rail = document.getElementById('standing-rail');
+    if (rail) {
+      const shown = new Set(
+        window.OTB.hallWidgets()
+          .filter((wgt) => {
+            if (!wgt.group) return false;
+            if (wgt.archonOnly && !isArchon) return false;
+            const el = document.getElementById(wgt.id);
+            return !!el && !el.hidden;
+          })
+          .map((wgt) => wgt.group),
+      );
+      // An empty group would otherwise leave a gap in the panel column.
+      for (const g of STANDING_GROUPS) {
+        const el = document.getElementById(standingGroupId(g.key));
+        if (el) el.hidden = !shown.has(g.key);
+      }
+      const items = STANDING_GROUPS
+        .filter((g) => shown.has(g.key))
+        .map((g) => ({ id: standingGroupId(g.key), label: g.label }));
+      if (standingRail) standingRail.refresh(items);
+      else standingRail = window.OTBKit.makeSectionRail({ mount: rail, items, mode: 'scrollspy' });
+    }
+  }
+  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;
+    });
+  }
+  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.';
+        }
+      }
+    });
+  }
+  function renderProfile(builder) {
+    const karma = ctx.lastKarmaState;
+    const cost = ctx.lastCostState;
+    const needs = ctx.lastNeedsState;
+    const rebase = ctx.lastRebaseState;
+    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>`
+      : '';
+
+    // ADR 0120 part 5: the "Rebase owed" banner. `needs_rebase_tasks` are un-landed
+    // confirmed tasks the publish-reconciler flagged — they GATE new claims (part 3)
+    // and their per-task reward is PENDING until they land on ship (part 1). Rendered
+    // above the other banners since it blocks the queue; reads the SAME /me field the
+    // CLI (/builder-start) does. `task N` form, never a bare #N (the ref rule).
+    const rebaseTasks = Array.isArray(rebase) ? rebase.filter((t) => t && t.id != null) : [];
+    const rebaseBanner = rebaseTasks.length
+      ? `<div class="profile__rebase" role="status">
+           <strong>Rebase owed — new claims paused</strong> — ${rebaseTasks.length} confirmed ${rebaseTasks.length === 1 ? 'task' : 'tasks'} can't land yet, so ${rebaseTasks.length === 1 ? 'its' : 'their'} reward is pending (it lands on ship). Rebase + re-ship or release ${rebaseTasks.length === 1 ? 'it' : 'them'}: ${rebaseTasks.map((t) => 'task ' + escapeHtml(String(t.id))).join(', ')}.
+         </div>`
+      : '';
+
+    $('#profile-body').innerHTML = `
+      ${rebaseBanner}
+      ${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 && !ctx.newcomerGated) statsSection.hidden = false;
+
+    const homeStanding = document.getElementById('home-standing-body');
+    if (homeStanding) {
+      homeStanding.innerHTML = `
+        ${rebaseBanner}
+        ${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 && !ctx.newcomerGated) homeStandingSection.hidden = false;
+  }
+  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;
+    }
+  }
+  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 renderWelcomeCore(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 = ctx.instanceRepo
+      ? `git clone ${escapeHtml(ctx.instanceRepo.url)}.git\ncd ${escapeHtml(ctx.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);
+  }
+  let _onboardingBox = null;
+  function onboardingBox() {
+    if (!_onboardingBox && window.OTBBoxPanel) {
+      _onboardingBox = window.OTBBoxPanel.create({ api: API, showSsh: false, toast });
+    }
+    return _onboardingBox || { mount() {}, refresh() {}, stop() {} };
+  }
+  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;
+    }
+    // task 2169 (banner budget: one at a time): while the welcome panel is
+    // showing, the checklist waits its turn — it appears when the welcome is
+    // dismissed or outgrown. renderWelcome runs first in the same loadAll pass
+    // (and every SSE nudge re-runs both), so this stays current.
+    const welcomeEl = document.getElementById('welcome-scroll');
+    if (welcomeEl && !welcomeEl.hidden) {
+      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 = (ctx.lastMeState && ctx.lastMeState.builder && Array.isArray(ctx.lastMeState.builder.preferred_disciplines))
+            ? ctx.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.`;
+    }
+  }
+  const shipState = { all: [] };
+  const shipsPager = window.OTBKit.makePager('ships', 'otb.standing.shipsPerPage', { defaultPerPage: 10 });
+  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;
+    });
+  }
+  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 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 && !ctx.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 slice = window.OTBKit.paginate(sorted, shipsPager);
+
+    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('');
+  }
+  const analyticsState = { builderId: null, isArchon: false, scope: 'self', self: null, eco: null };
+  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>`;
+  }
+  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)}`));
+      // n counts quality-graded rows only (task 1002652); a day whose grades
+      // were all outages has n=0 and must not plot as a 0% dip.
+      charts.push(chartCard('Grade pass rate', (data.grade_trend || []).filter((r) => Number(r.n) > 0).map((r) => r.n_passed / r.n), '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 = '';
+    }
+  }
+  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: [],
+    sortBy: 'drachmae',     // 'rank' | 'drachmae' | 'karma' | 'tokens'
+    sortDir: 'desc',        // 'desc' | 'asc'
+  };
+  const lbPager = window.OTBKit.makePager('lb', 'otb.standing.leaderboardPerPage', { defaultPerPage: 25 });
+  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 === 'tokens') {
+      // task 1473: sort by total tokens used. tokens_used arrives as a string
+      // (pg bigint), so coerce. Tie-break on drachmae DESC then server order,
+      // matching the karma branch.
+      return indexed
+        .sort((a, b) => {
+          const at = Number(a.row.tokens_used) || 0;
+          const bt = Number(b.row.tokens_used) || 0;
+          const diff = (at - bt) * dir;
+          if (diff !== 0) return diff;
+          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();
+  }
+  const LB_SORT_HEADERS = {
+    rank: 'lb-sort-rank',
+    drachmae: 'lb-sort-drachmae',
+    karma: 'lb-sort-karma',
+    tokens: 'lb-sort-tokens',
+  };
+  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();
+    // paginate() clamps the page, slices, and paints the whole #lb-* bar.
+    const slice = window.OTBKit.paginate(rows, lbPager);
+    const start = (lbPager.page - 1) * lbPager.perPage;
+    const tbody = $('#leaderboard tbody');
+
+    if (!slice.length) {
+      tbody.innerHTML = emptyRow(6, '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>
+            <td class="ledger__drachmae" title="${Number(b.total_credits) > 0 ? `${fmtNum(Math.round(Number(b.tokens_used) / Number(b.total_credits)))} tokens per drachma` : 'no drachmae earned yet'}">${fmtNum(b.tokens_used)}</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);
+    }
+  }
+
+    return { LB_SORT_HEADERS, SETUP_CONFIG_KEY, analyticsState, lbPager, lbState, mountHallWidgets, onboardingBox, renderCurveBody, renderLanding, renderLeaderboard, renderNav, renderOnboarding, renderProfile, renderRecentShips, renderWelcomeCore, shipState, shipsPager, welcomeDismissalKey };
+  };
+})();