@bongos/core 1.17.0

package/modules/status-ui/public/status.js

@@ -0,0 +1,1375 @@
+// status.amazonprimea.com — public dashboard JS.
+// Polls /api/bongos/public/* every 60 seconds. No auth, no SPA framework.
+
+// API base for the public read endpoints (#737). Empty = same-origin, the case
+// when this file is served by the droplet itself (status.amazonprimea.com
+// proxies /api/* to the same Node process). The OFF-BOX GitHub Pages mirror
+// (lars589/amazonprimea-status, ADR 0029) injects window.STATUS_API_BASE =
+// 'https://amazonprimea.com' in its <head> so the same byte-identical file
+// fetches cross-origin from the droplet there (CORS is open). Keeping this file
+// identical on both hosts is what lets the mirror sync be a pure copy.
+const API = (typeof window !== 'undefined' && window.STATUS_API_BASE) || '';
+
+// Instance currency label from the injected branding pack — never a hardcoded
+// 'drachmae' (ADR 0062 §3, task 1705). Neutral fallback if the pack is absent.
+function curLabel(caps) {
+  var b = (typeof window !== 'undefined' && window.__BRANDING__) || {};
+  var l = (b.currency && b.currency.label) || 'credits';
+  return caps ? l.charAt(0).toUpperCase() + l.slice(1) : l;
+}
+
+const els = {
+  uptime: document.getElementById('uptime'),
+  versions: document.getElementById('versions'),
+  costTotal: document.getElementById('cost-total'),
+  valueTotal: document.getElementById('value-total'),
+  costPercent: document.getElementById('cost-percent'),
+  costCats: document.getElementById('cost-categories'),
+  costBuilders: document.getElementById('cost-builders'),
+  costAttributionSplit: document.getElementById('cost-attribution-split'),
+  costChart: document.getElementById('cost-chart'),
+  shipped: document.getElementById('shipped'),
+  shippedPager: document.getElementById('shipped-pager'),
+  shippedPrev: document.getElementById('shipped-prev'),
+  shippedNext: document.getElementById('shipped-next'),
+  shippedPageInfo: document.getElementById('shipped-pageinfo'),
+  shippedRange: document.getElementById('shipped-range'),
+  // task 1466: treasury breakdown filters.
+  costFilterSource: document.getElementById('cost-filter-source'),
+  costFilterCategory: document.getElementById('cost-filter-category'),
+  costFilterWindow: document.getElementById('cost-filter-window'),
+  costFilterNote: document.getElementById('cost-filter-note'),
+  leaderboard: document.getElementById('leaderboard'),
+  lastUpdated: document.getElementById('last-updated'),
+  worldSnapshot: document.getElementById('world-snapshot'),
+  worldTimeline: document.getElementById('world-timeline'),
+  worldNote: document.getElementById('world-note'),
+};
+
+const ANNUAL_BUDGET_USD = 5000;
+let costChart = null;
+
+// ---------- helpers ----------
+
+function fmtUsd(n) {
+  if (n == null) return '—';
+  if (n < 100) return Number(n).toFixed(2);
+  return Math.round(Number(n)).toLocaleString();
+}
+
+function fmtDr(n) {
+  if (n == null) return '—';
+  if (n < 100) return `${Number(n).toFixed(2)} dr.`;
+  return `${Math.round(Number(n)).toLocaleString()} dr.`;
+}
+
+function fmtRelativeTime(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  const sec = (Date.now() - d.getTime()) / 1000;
+  if (sec < 60) return 'just now';
+  if (sec < 3600) return `${Math.floor(sec / 60)}m ago`;
+  if (sec < 86400) return `${Math.floor(sec / 3600)}h ago`;
+  if (sec < 7 * 86400) return `${Math.floor(sec / 86400)}d ago`;
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+function clear(el) {
+  while (el.firstChild) el.removeChild(el.firstChild);
+}
+
+async function fetchJson(path) {
+  const res = await fetch(`${API}${path}`, { cache: 'no-store' });
+  if (!res.ok) throw new Error(`${path} → ${res.status}`);
+  return res.json();
+}
+
+// ---------- sticky section nav (#409) ----------
+//
+// Same design pattern as the hall (public-builders/builders.js renderNav).
+// Independent implementation in this file because the two surfaces don't
+// share a script and per the #409 spec they should evolve in their own
+// scope. Labels are shorter than the section headings — chips need to fit
+// in ~756px of content width without wrapping.
+
+const SECTIONS = [
+  { id: 'headline-tablet', label: 'Pulse'      },
+  { id: 'uptime-tablet',   label: 'Watch'      },
+  { id: 'leader-tablet',   label: 'Architects' },
+  { id: 'foundry-tablet',  label: 'Foundry'    },
+  { id: 'versions-tablet', label: 'Works'      },
+  { id: 'cost-tablet',     label: 'Treasury'   },
+  { id: 'shipped-tablet',  label: 'Inscribed'  },
+  { id: 'world-tablet',    label: 'World'      },
+];
+
+let navObserver = null;
+
+function renderNav() {
+  const list = document.getElementById('status-nav-list');
+  const nav = document.getElementById('status-nav');
+  if (!list || !nav) return;
+  list.innerHTML = SECTIONS
+    .filter((s) => document.getElementById(s.id))
+    .map((s) => `<li><a class="status-nav__chip" href="#${s.id}" data-section="${s.id}">${s.label}</a></li>`)
+    .join('');
+  nav.hidden = false;
+  setupNavObserver();
+}
+
+function setupNavObserver() {
+  if (navObserver) {
+    navObserver.disconnect();
+    navObserver = null;
+  }
+  const list = document.getElementById('status-nav-list');
+  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(Boolean);
+  if (sections.length === 0) return;
+
+  // Same rootMargin band as the hall: active flips when a section's headline
+  // crosses the upper third of the viewport, not when it merely peeks in.
+  navObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        const id = entry.target.id;
+        chipsBySection.forEach((chip, sectionId) => {
+          chip.classList.toggle('status-nav__chip--active', sectionId === id);
+        });
+        // Auto-scroll the active chip into view on mobile.
+        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));
+}
+
+// ---------- headline strip (#409) ----------
+//
+// Above-the-fold answer to "is it alive?", "what shipped lately?", "where's
+// the money?", "is quality holding?" — fed by four public endpoints in
+// parallel. Standing aggregates across all services: any down → "Fallen",
+// any degraded → "Faltering", all up → "Standing". The treasury card shows
+// percent-of-purse with a thin progress bar underneath; bar turns amber at
+// 75% and terracotta at 100%.
+
+function aggregateStanding(services) {
+  if (!Array.isArray(services) || services.length === 0) {
+    return { label: '—', cls: '' };
+  }
+  let anyDown = false, anyDegraded = false, anyUnknown = false;
+  for (const s of services) {
+    const st = s.current_status;
+    if (st === 'down') anyDown = true;
+    else if (st === 'degraded') anyDegraded = true;
+    else if (st === 'unknown') anyUnknown = true;
+  }
+  if (anyDown) return { label: 'Fallen', cls: 'headline-stat--standing-down' };
+  if (anyDegraded) return { label: 'Faltering', cls: 'headline-stat--standing-warn' };
+  if (anyUnknown) return { label: '—', cls: '' };
+  return { label: 'Standing', cls: 'headline-stat--standing-up' };
+}
+
+async function loadHeadline() {
+  // 3 fetches in parallel — uptime + cost + grades. The 4th headline card
+  // (shipped count) is computed from loadShipped's data via
+  // updateHeadlineShippedFromItems() to avoid a duplicate /recent-shipped
+  // round trip every 60s. See the comment in loadShipped() for the math.
+  const [uptimeR, costR, gradeR] = await Promise.all([
+    fetchJson('/api/bongos/public/uptime').catch(() => null),
+    fetchJson('/api/bongos/public/cost-summary').catch(() => null),
+    fetchJson('/api/bongos/public/grades?days=7').catch(() => null),
+  ]);
+
+  // Standing card
+  const standingNum = document.getElementById('headline-standing-num');
+  const standingCard = document.getElementById('headline-standing');
+  if (standingNum && standingCard) {
+    const { label, cls } = aggregateStanding(uptimeR?.services || []);
+    standingNum.textContent = label;
+    // Reset state classes, apply new
+    standingCard.classList.remove('headline-stat--standing-up', 'headline-stat--standing-down', 'headline-stat--standing-warn');
+    if (cls) standingCard.classList.add(cls);
+  }
+
+  // Treasury
+  const treasuryNum = document.getElementById('headline-treasury-num');
+  const treasuryLabel = document.getElementById('headline-treasury-label');
+  const treasuryBar = document.getElementById('headline-treasury-bar');
+  if (treasuryNum && treasuryBar && costR) {
+    const total = Number(costR.total_usd) || 0;
+    const pct = ANNUAL_BUDGET_USD > 0 ? (total / ANNUAL_BUDGET_USD) * 100 : 0;
+    treasuryNum.textContent = `${Math.round(pct)}%`;
+    treasuryBar.style.width = `${Math.min(100, Math.max(0, pct))}%`;
+    treasuryBar.classList.remove('headline-bar__fill--warn', 'headline-bar__fill--over');
+    if (pct >= 100) treasuryBar.classList.add('headline-bar__fill--over');
+    else if (pct >= 75) treasuryBar.classList.add('headline-bar__fill--warn');
+    if (treasuryLabel) {
+      treasuryLabel.textContent = `$${fmtUsd(total)} of $${ANNUAL_BUDGET_USD.toLocaleString()} spent`;
+    }
+  }
+
+  // Mason's Mark — pass rate over last 7 days
+  const gradeNum = document.getElementById('headline-grade-num');
+  if (gradeNum && gradeR) {
+    const rolling = gradeR.rolling || {};
+    const n = Number(rolling.n || 0);
+    const passed = Number(rolling.n_passed || 0);
+    if (n === 0) {
+      gradeNum.textContent = '—';
+    } else {
+      gradeNum.textContent = `${Math.round((passed / n) * 100)}%`;
+    }
+  }
+}
+
+// ---------- world snapshot ----------
+
+function fmtSnapshotWhen(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) +
+    ', ' +
+    d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+}
+
+function showSnapshot(snap) {
+  if (!els.worldSnapshot || !snap) return;
+
+  clear(els.worldSnapshot);
+  const img = document.createElement('img');
+  img.src = `${API}/snapshots/${snap.image}`;
+  img.alt = snap.label || `World map — ${snap.id}`;
+  img.width = 960;
+  img.height = 576;
+  img.loading = 'lazy';
+  els.worldSnapshot.appendChild(img);
+
+  const caption = document.createElement('p');
+  caption.className = 'world-snapshot__caption';
+  const when = fmtSnapshotWhen(snap.timestamp);
+  if (snap.label) {
+    const strong = document.createElement('strong');
+    strong.textContent = snap.label;
+    caption.appendChild(strong);
+    if (when) caption.append(` · ${when}`);
+  } else {
+    caption.textContent = when || snap.id;
+  }
+  if (snap.sha) {
+    const sha = document.createElement('span');
+    sha.className = 'world-snapshot__sha';
+    sha.textContent = ` · ${snap.sha.slice(0, 7)}`;
+    caption.appendChild(sha);
+  }
+  els.worldSnapshot.appendChild(caption);
+
+  if (els.worldTimeline) {
+    for (const item of els.worldTimeline.querySelectorAll('.world-timeline__item')) {
+      item.setAttribute('aria-current', item.dataset.id === snap.id ? 'true' : 'false');
+    }
+  }
+}
+
+async function loadWorldSnapshots() {
+  if (!els.worldSnapshot) return;
+
+  let manifest;
+  try {
+    const res = await fetch(`${API}/snapshots/manifest.json`, { cache: 'no-store' });
+    if (!res.ok) throw new Error(`${res.status}`);
+    manifest = await res.json();
+  } catch (_) {
+    return;
+  }
+
+  // v2 format: { snapshots: [...] }. v1 (legacy): { dates: [...] }. Normalize.
+  let snapshots = [];
+  if (Array.isArray(manifest.snapshots)) {
+    snapshots = manifest.snapshots.slice();
+  } else if (Array.isArray(manifest.dates)) {
+    snapshots = manifest.dates.map((d) => ({
+      id: d,
+      timestamp: `${d}T00:00:00Z`,
+      image: `${d}.png`,
+    }));
+  }
+  if (snapshots.length === 0) return;
+
+  // Oldest → newest already from server; reverse to put newest first in strip.
+  snapshots.sort((a, b) => (a.timestamp || '').localeCompare(b.timestamp || ''));
+  const newestFirst = snapshots.slice().reverse();
+  const latest = newestFirst[0];
+
+  showSnapshot(latest);
+
+  if (els.worldTimeline) {
+    clear(els.worldTimeline);
+    for (const snap of newestFirst) {
+      const item = document.createElement('button');
+      item.className = 'world-timeline__item';
+      item.dataset.id = snap.id;
+      item.setAttribute('aria-current', snap.id === latest.id ? 'true' : 'false');
+      item.type = 'button';
+      item.title = snap.label
+        ? `${snap.label} — ${fmtSnapshotWhen(snap.timestamp)}`
+        : fmtSnapshotWhen(snap.timestamp);
+
+      const thumb = document.createElement('img');
+      thumb.className = 'world-timeline__thumb';
+      thumb.src = `${API}/snapshots/${snap.image}`;
+      thumb.alt = snap.label || snap.id;
+      thumb.width = 200;
+      thumb.height = 120;
+      thumb.loading = 'lazy';
+
+      const label = document.createElement('span');
+      label.className = 'world-timeline__date';
+      const d = new Date(snap.timestamp);
+      label.textContent = Number.isNaN(d.getTime())
+        ? snap.id
+        : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+
+      item.appendChild(thumb);
+      item.appendChild(label);
+      item.addEventListener('click', () => showSnapshot(snap));
+      els.worldTimeline.appendChild(item);
+    }
+  }
+
+  if (els.worldNote && snapshots.length > 1) {
+    els.worldNote.hidden = false;
+  }
+}
+
+// ---------- uptime ----------
+
+const SERVICE_LABELS = {
+  game_server: 'The World',
+  api:         'The Ledger',
+  database:    'The Vault',
+};
+
+async function loadUptime() {
+  let data;
+  try {
+    data = await fetchJson('/api/bongos/public/uptime');
+  } catch (_) {
+    // Endpoint not yet deployed (migration not applied) — show graceful placeholder
+    clear(els.uptime);
+    const p = document.createElement('p');
+    p.className = 'empty';
+    p.textContent = 'The sentinels have not yet taken their posts.';
+    els.uptime.appendChild(p);
+    return;
+  }
+
+  const services = data.services || [];
+  clear(els.uptime);
+
+  for (const svc of services) {
+    const label = SERVICE_LABELS[svc.service] || svc.service;
+    const isUp = svc.current_status === 'up';
+    const isDegraded = svc.current_status === 'degraded';
+    const isUnknown = svc.current_status === 'unknown';
+
+    const row = document.createElement('div');
+    row.className = 'uptime-row';
+
+    // Top line: label + status badge + uptime %
+    const top = document.createElement('div');
+    top.className = 'uptime-row__top';
+
+    const nameWrap = document.createElement('div');
+    nameWrap.className = 'uptime-row__name-wrap';
+
+    const dot = document.createElement('span');
+    dot.className = `uptime-dot uptime-dot--${isUnknown ? 'unknown' : isUp ? 'up' : isDegraded ? 'degraded' : 'down'}`;
+    dot.setAttribute('aria-hidden', 'true');
+
+    const name = document.createElement('span');
+    name.className = 'uptime-row__name';
+    name.textContent = label;
+
+    const badge = document.createElement('span');
+    badge.className = `uptime-badge uptime-badge--${isUnknown ? 'unknown' : isUp ? 'up' : isDegraded ? 'degraded' : 'down'}`;
+    badge.textContent = isUnknown ? 'awaiting watch' : isUp ? 'standing' : isDegraded ? 'strained' : 'fallen';
+
+    nameWrap.appendChild(dot);
+    nameWrap.appendChild(name);
+    nameWrap.appendChild(badge);
+
+    const pctEl = document.createElement('span');
+    pctEl.className = 'uptime-row__pct';
+    pctEl.textContent = svc.uptime_pct_90d != null
+      ? `${svc.uptime_pct_90d}% over 90 days`
+      : 'no history yet';
+
+    top.appendChild(nameWrap);
+    top.appendChild(pctEl);
+    row.appendChild(top);
+
+    // History bars — last 90 days as hourly buckets collapsed into ~90 day-wide bars
+    const history = svc.history || [];
+    if (history.length > 0) {
+      // Collapse hourly rows into daily buckets for display (up to 90 bars)
+      const byDay = new Map();
+      for (const h of history) {
+        const day = new Date(h.hour).toISOString().slice(0, 10);
+        if (!byDay.has(day)) byDay.set(day, { up: 0, total: 0 });
+        byDay.get(day).up += h.up;
+        byDay.get(day).total += h.total;
+      }
+
+      // Fill in any missing days in the last 90 so gaps show as unknown
+      const today = new Date();
+      const days = [];
+      for (let i = 89; i >= 0; i--) {
+        const d = new Date(today);
+        d.setDate(d.getDate() - i);
+        days.push(d.toISOString().slice(0, 10));
+      }
+
+      const bars = document.createElement('div');
+      bars.className = 'uptime-bars';
+      bars.setAttribute('aria-label', `90-day uptime history for ${label}`);
+
+      for (const day of days) {
+        const bucket = byDay.get(day);
+        const bar = document.createElement('span');
+        bar.className = 'uptime-bar';
+        if (!bucket) {
+          bar.classList.add('uptime-bar--unknown');
+          bar.title = `${day}: no data`;
+        } else {
+          const ratio = bucket.total > 0 ? bucket.up / bucket.total : 0;
+          if (ratio >= 0.99) {
+            bar.classList.add('uptime-bar--up');
+          } else if (ratio >= 0.5) {
+            bar.classList.add('uptime-bar--degraded');
+          } else {
+            bar.classList.add('uptime-bar--down');
+          }
+          bar.title = `${day}: ${Math.round(ratio * 100)}% (${bucket.up}/${bucket.total} checks)`;
+        }
+        bars.appendChild(bar);
+      }
+      row.appendChild(bars);
+
+      const barLabels = document.createElement('div');
+      barLabels.className = 'uptime-bars__labels';
+      const lbl90 = document.createElement('span');
+      lbl90.textContent = '90 days ago';
+      const lblNow = document.createElement('span');
+      lblNow.textContent = 'today';
+      barLabels.appendChild(lbl90);
+      barLabels.appendChild(lblNow);
+      row.appendChild(barLabels);
+    } else {
+      const noHist = document.createElement('p');
+      noHist.className = 'uptime-row__no-history';
+      noHist.textContent = 'History accumulating — returns after the first day of watch.';
+      row.appendChild(noHist);
+    }
+
+    els.uptime.appendChild(row);
+  }
+}
+
+// ---------- versions (active endeavours — a thin mirror of the work board) ----------
+
+async function loadVersions() {
+  const data = await fetchJson('/api/bongos/public/progress');
+  const all = data.progress || [];
+  // This public section is a deliberately thin MIRROR of the builders' work
+  // board (task 938). The work board is the canonical home of Works in Progress
+  // — it carries every version with its criteria, the progress bars, and the
+  // live in-flight list. Here we show only the ACTIVE endeavours, title + short
+  // description, nothing more.
+  //
+  // Active = underway, not past: exclude shipped/frozen, and exclude any version
+  // with no done_when_criteria seeded yet — a "future placeholder" the senate
+  // has not scoped (e.g. the next-version stub created at version close). Its
+  // criteria_count is 0, so it stays off the public board until it's real.
+  const rows = all.filter(
+    (v) => v.status !== 'shipped' && v.status !== 'frozen' && Number(v.criteria_count) > 0
+  );
+  clear(els.versions);
+  if (rows.length === 0) {
+    const p = document.createElement('p');
+    p.className = 'empty';
+    p.textContent = 'No endeavors underway just now.';
+    els.versions.appendChild(p);
+    return;
+  }
+
+  // Goal layer (ADR 0086 §2 / BV1.R58): fetch each active version's goals so the
+  // card can show how its work is organised (Version → Goals). Best-effort + in
+  // parallel; the per-version feed is cached 60s server-side, and a failure just
+  // omits the goals line (the bars below are the canonical progress).
+  const goalsByVersion = {};
+  await Promise.all(rows.map(async (v) => {
+    try {
+      const dw = await fetchJson(`/api/bongos/versions/${encodeURIComponent(v.version_id)}/done-when`);
+      goalsByVersion[v.version_id] = Array.isArray(dw.goals) ? dw.goals : [];
+    } catch (_) {
+      goalsByVersion[v.version_id] = [];
+    }
+  }));
+
+  for (const v of rows) {
+    const row = document.createElement('div');
+    row.className = 'version-row';
+
+    const name = document.createElement('div');
+    name.className = 'version-row__name';
+    name.textContent = `${v.version_id} · ${v.name || ''}`;
+    row.appendChild(name);
+
+    // Stacked three-segment lifecycle bar (shipped / confirmed / completed),
+    // sized by raw task count so it matches the work board's bars.
+    const total = Number(v.total_count) || 0;
+    const counts = {
+      shipped: Number(v.lifecycle_shipped_count) || 0,
+      confirmed: Number(v.lifecycle_confirmed_count) || 0,
+      completed: Number(v.lifecycle_completed_count) || 0,
+    };
+    const pctOf = (n) => (total > 0 ? (n / total) * 100 : 0);
+    const bar = document.createElement('div');
+    bar.className = 'version-row__bar';
+    for (const [kind, label] of [
+      ['shipped', 'shipped (deployed live)'],
+      ['confirmed', 'confirmed (awaiting merge)'],
+      ['completed', 'completed (awaiting verification)'],
+    ]) {
+      const seg = document.createElement('div');
+      seg.className = `version-row__seg version-row__seg--${kind}`;
+      seg.style.width = `${pctOf(counts[kind])}%`;
+      seg.title = `${counts[kind]} ${label}`;
+      bar.appendChild(seg);
+    }
+    row.appendChild(bar);
+
+    const pct = Number(v.percent_complete) || 0;
+    const pctText = document.createElement('div');
+    pctText.className = 'version-row__pct';
+    pctText.textContent = `${pct}% complete · weighted by priority`;
+    row.appendChild(pctText);
+
+    // Goal layer (ADR 0086 §2): how this version's work is organised. Shown when
+    // the version has goals (every version has at least its default goal after the
+    // R56 backfill); becomes informative as real goals are created + achieved.
+    const goals = goalsByVersion[v.version_id] || [];
+    if (goals.length) {
+      const achieved = goals.filter((g) => g.status === 'achieved').length;
+      const goalLine = document.createElement('div');
+      goalLine.className = 'version-row__pct';
+      goalLine.textContent = `${goals.length} goal${goals.length === 1 ? '' : 's'} · ${achieved} achieved`;
+      row.appendChild(goalLine);
+    }
+
+    // Short description (versions.done_when), folded into a collapsed dropdown so
+    // the page stays a skimmable list of bars but the detail is one tap away.
+    const doneWhen = (v.done_when || '').trim();
+    if (doneWhen) {
+      const details = document.createElement('details');
+      details.className = 'version-row__about';
+      const summary = document.createElement('summary');
+      summary.className = 'version-row__about-summary';
+      summary.textContent = 'The work, in brief';
+      const desc = document.createElement('p');
+      desc.className = 'version-row__desc';
+      desc.textContent = doneWhen;
+      details.appendChild(summary);
+      details.appendChild(desc);
+      row.appendChild(details);
+    }
+
+    els.versions.appendChild(row);
+  }
+}
+
+// ---------- costs ----------
+
+// task 1466: build the ?source=&category=&days= query from the treasury filter
+// controls. Empty selects / "all" window ⇒ no filter (the full breakdown).
+function costFilterQuery() {
+  const p = new URLSearchParams();
+  const src = els.costFilterSource && els.costFilterSource.value;
+  const cat = els.costFilterCategory && els.costFilterCategory.value;
+  const win = els.costFilterWindow && els.costFilterWindow.value;
+  if (src) p.set('source', src);
+  if (cat) p.set('category', cat);
+  if (win && win !== 'all') p.set('days', win);
+  const s = p.toString();
+  return s ? `?${s}` : '';
+}
+
+// Fill the source + category dropdowns from the (unfiltered) option lists the
+// server returns. Runs once; preserves the "All …" selection so re-fetches on
+// filter change don't wipe what the reader picked.
+let _costFiltersPopulated = false;
+function populateCostFilterOptions(opts) {
+  if (_costFiltersPopulated || !opts) return;
+  const fill = (sel, values) => {
+    if (!sel) return;
+    const current = sel.value;
+    for (const v of values || []) {
+      if (v == null || v === '') continue;
+      const o = document.createElement('option');
+      o.value = v; o.textContent = v;
+      sel.appendChild(o);
+    }
+    sel.value = current;
+  };
+  fill(els.costFilterSource, opts.sources);
+  fill(els.costFilterCategory, opts.categories);
+  _costFiltersPopulated = true;
+}
+
+// One-line readout of the filtered subtotal vs the project total when a filter
+// is active; cleared when the breakdown is the whole project.
+function renderCostFilterNote(data) {
+  const note = els.costFilterNote;
+  if (!note) return;
+  const af = data.applied_filters || {};
+  if (!(af.source || af.category || af.days)) { note.textContent = ''; return; }
+  const parts = [];
+  if (af.source) parts.push(`source “${af.source}”`);
+  if (af.category) parts.push(`category “${af.category}”`);
+  if (af.days) parts.push(`last ${af.days} days`);
+  const filtered = Number(data.filtered_total_usd) || 0;
+  const whole = Number(data.total_usd) || 0;
+  const pct = whole > 0 ? Math.round((filtered / whole) * 100) : 0;
+  note.textContent = `Breakdown filtered to ${parts.join(' · ')}: ${fmtDr(filtered)} of ${fmtDr(whole)} (${pct}% of all spend).`;
+}
+
+async function loadCosts() {
+  // task 1466: fetch WITH the active breakdown filter. The header total + chart
+  // below still read data.total_usd / data.daily (which stay project-wide); the
+  // by-category / by-builder chips read the now-filtered fields.
+  const data = await fetchJson(`/api/bongos/public/cost-summary${costFilterQuery()}`);
+  populateCostFilterOptions(data.filter_options);
+  renderCostFilterNote(data);
+  const total = Number(data.total_usd) || 0;
+  const totalValue = Number(data.total_value_credits) || 0;
+  els.costTotal.textContent = fmtUsd(total);
+  if (els.valueTotal) {
+    els.valueTotal.textContent = totalValue.toLocaleString();
+  }
+  const pct = ANNUAL_BUDGET_USD > 0 ? Math.round((total / ANNUAL_BUDGET_USD) * 100) : 0;
+  els.costPercent.textContent = `${pct}%`;
+
+  // by-category
+  clear(els.costCats);
+  const cats = data.by_category || [];
+  if (cats.length === 0) {
+    const tag = document.createElement('span');
+    tag.className = 'cost-cat';
+    tag.textContent = `No ${curLabel()} yet spent.`;
+    els.costCats.appendChild(tag);
+  } else {
+    for (const c of cats) {
+      const tag = document.createElement('span');
+      tag.className = 'cost-cat';
+      const strong = document.createElement('strong');
+      strong.textContent = c.category;
+      tag.appendChild(strong);
+      tag.append(` · ${fmtDr(c.total_usd)}`);
+      els.costCats.appendChild(tag);
+    }
+  }
+
+  // V3.R11 (#91): per-builder spend chips. Each builder with non-zero spend
+  // gets one chip; unattributed historical spend (pre-migration 046 rows or
+  // costs without a session) coalesces into a single "unattributed" chip.
+  // V3.R83 (#303): an attributed-vs-unattributed headline above the per-builder
+  // chips, so the community can read at a glance how much spend is owned by a
+  // specific hand vs. carried by the shared keep. Computed from the same
+  // by_builder split the audit (src/bongos/cost.js) uses: builder_id === null is
+  // the unattributed bucket.
+  if (els.costAttributionSplit) {
+    const all = data.by_builder || [];
+    let attributed = 0;
+    let unattributed = 0;
+    for (const b of all) {
+      const usd = Number(b?.total_usd) || 0;
+      if (b?.builder_id == null) unattributed += usd;
+      else attributed += usd;
+    }
+    const total = attributed + unattributed;
+    if (total > 0) {
+      const pct = Math.round((unattributed / total) * 100);
+      els.costAttributionSplit.textContent =
+        `Attributed to builders: ${fmtDr(attributed)} · Shared keep (unattributed): ${fmtDr(unattributed)} (${pct}%).`;
+    } else {
+      els.costAttributionSplit.textContent = '';
+    }
+  }
+
+  if (els.costBuilders) {
+    clear(els.costBuilders);
+    const builders = data.by_builder || [];
+    let rendered = 0;
+    for (const b of builders) {
+      if (!b || !(Number(b.total_usd) > 0)) continue;
+      const tag = document.createElement('span');
+      tag.className = 'cost-cat';
+      const strong = document.createElement('strong');
+      const label = b.builder_id == null
+        ? 'unattributed'
+        : (b.display_name || b.github_login || `builder #${b.builder_id}`);
+      strong.textContent = label;
+      tag.appendChild(strong);
+      tag.append(` · ${fmtDr(b.total_usd)}`);
+      els.costBuilders.appendChild(tag);
+      rendered++;
+    }
+    if (rendered === 0) {
+      const tag = document.createElement('span');
+      tag.className = 'cost-cat';
+      tag.textContent = `No ${curLabel()} yet attributed to a hand.`;
+      els.costBuilders.appendChild(tag);
+    }
+  }
+
+  // Build a unified day axis from the union of cost + credit days, then
+  // walk it once and produce two cumulative series. 1 credit = 1 USD per
+  // pms-v1.md, so both share the same numeric scale (left + right axes
+  // share scaling per the dual-axis config below).
+  //
+  // GDS #118: the server's /cost-summary now returns a gap-free day series
+  // (generate_series + LEFT JOIN, see src/bongos/db.js costSummary) so the
+  // cumulative line carries forward on idle days and reaches CURRENT_DATE.
+  // We still defensively forward-fill + extend-to-today client-side as a
+  // fallback for any deploy where the server is on older code.
+  const costByDay = new Map();
+  for (const d of (data.daily || [])) {
+    costByDay.set(toDayKey(d.day), Number(d.amount_usd) || 0);
+  }
+  const valueByDay = new Map();
+  for (const d of (data.daily_credits || [])) {
+    valueByDay.set(toDayKey(d.day), Number(d.credits) || 0);
+  }
+
+  // Build the day axis spanning min(any-event-day) → today, inclusive.
+  // If the server already filled gaps, this is a no-op walk over the same
+  // set; if not, this is where the carry-forward gets enforced.
+  const unionDays = Array.from(new Set([...costByDay.keys(), ...valueByDay.keys()])).sort();
+  const todayKey = new Date().toISOString().slice(0, 10);
+  let allDays = unionDays;
+  if (unionDays.length > 0) {
+    const firstKey = unionDays[0];
+    const lastKey = unionDays[unionDays.length - 1] > todayKey
+      ? unionDays[unionDays.length - 1]
+      : todayKey;
+    allDays = [];
+    const cursor = new Date(`${firstKey}T00:00:00Z`);
+    const end = new Date(`${lastKey}T00:00:00Z`);
+    while (cursor.getTime() <= end.getTime()) {
+      allDays.push(cursor.toISOString().slice(0, 10));
+      cursor.setUTCDate(cursor.getUTCDate() + 1);
+    }
+  }
+
+  const labels = [];
+  const cumCost = [];
+  const cumValue = [];
+  let runningCost = 0;
+  let runningValue = 0;
+  for (const dayKey of allDays) {
+    runningCost += costByDay.get(dayKey) || 0;
+    runningValue += valueByDay.get(dayKey) || 0;
+    labels.push(new Date(`${dayKey}T00:00:00Z`).toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' }));
+    cumCost.push(Number(runningCost.toFixed(2)));
+    cumValue.push(Number(runningValue.toFixed(2)));
+  }
+
+  if (!window.Chart) return; // Chart.js failed to load — skip
+
+  const ctx = els.costChart.getContext('2d');
+  if (costChart) costChart.destroy();
+  costChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: `${curLabel()} spent`,
+          data: cumCost,
+          fill: true,
+          borderColor: '#2a2110',
+          backgroundColor: 'rgba(139, 111, 44, 0.16)',
+          tension: 0.2,
+          pointRadius: 2.5,
+          pointBackgroundColor: '#2a2110',
+          borderWidth: 1.5,
+        },
+        {
+          label: 'value wrought',
+          data: cumValue,
+          fill: false,
+          borderColor: '#2f5a3f',
+          backgroundColor: 'rgba(74, 125, 92, 0.18)',
+          borderDash: [5, 4],
+          tension: 0.2,
+          pointRadius: 2.5,
+          pointBackgroundColor: '#2f5a3f',
+          borderWidth: 1.5,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      font: { family: '"EB Garamond", Georgia, serif' },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'bottom',
+          labels: {
+            boxWidth: 22,
+            padding: 18,
+            font: { family: '"EB Garamond", Georgia, serif', size: 13, style: 'italic' },
+            color: '#6e5b3a',
+          },
+        },
+        tooltip: {
+          backgroundColor: 'rgba(42, 33, 16, 0.92)',
+          titleFont: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
+          bodyFont: { family: '"EB Garamond", Georgia, serif', size: 13 },
+          padding: 10,
+          callbacks: {
+            label: (c) => `${c.dataset.label}: ${c.parsed.y.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} dr.`,
+          },
+        },
+      },
+      scales: {
+        y: {
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: `${curLabel()} (cumulative)`,
+            font: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
+            color: '#735f3d',
+          },
+          ticks: {
+            callback: (v) => `${v} dr.`,
+            font: { family: '"EB Garamond", Georgia, serif', size: 12 },
+            color: '#6e5b3a',
+          },
+          grid: { color: 'rgba(139, 111, 44, 0.18)', drawBorder: false },
+        },
+        x: {
+          title: {
+            display: true,
+            text: 'date',
+            font: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
+            color: '#735f3d',
+          },
+          grid: { display: false },
+          ticks: {
+            maxTicksLimit: 10,
+            font: { family: '"EB Garamond", Georgia, serif', size: 12 },
+            color: '#6e5b3a',
+          },
+        },
+      },
+    },
+  });
+}
+
+function toDayKey(d) {
+  // Postgres returns 'YYYY-MM-DD' as a string OR an ISO timestamp depending
+  // on transport — normalise to YYYY-MM-DD so dedupe works across formats.
+  if (!d) return '';
+  if (typeof d === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(d)) return d;
+  const dt = new Date(d);
+  return dt.toISOString().slice(0, 10);
+}
+
+// ---------- shipped feed ----------
+
+const SHIPPED_PAGE_SIZE = 6;
+let _shippedItems = [];
+let _shippedPage = 0;
+// GDS #191: default to the most useful window for daily readers. The select
+// in index.html is also pre-selected to "30" so the two stay aligned.
+let _shippedRange = '30';
+
+function renderShippedPage() {
+  clear(els.shipped);
+  const items = _shippedItems;
+  if (items.length === 0) {
+    const li = document.createElement('li');
+    li.className = 'empty';
+    li.textContent = 'No works yet inscribed in this window.';
+    els.shipped.appendChild(li);
+    // GDS #191: pad with invisible rows so an empty window still occupies
+    // the same vertical space as a full page. Keeps the section height
+    // stable when the viewer switches between windows.
+    for (let i = 0; i < SHIPPED_PAGE_SIZE - 1; i++) {
+      const pad = document.createElement('li');
+      pad.className = 'empty-row';
+      pad.setAttribute('aria-hidden', 'true');
+      els.shipped.appendChild(pad);
+    }
+    if (els.shippedPager) els.shippedPager.hidden = true;
+    return;
+  }
+
+  const pageCount = Math.max(1, Math.ceil(items.length / SHIPPED_PAGE_SIZE));
+  if (_shippedPage >= pageCount) _shippedPage = pageCount - 1;
+  if (_shippedPage < 0) _shippedPage = 0;
+
+  const start = _shippedPage * SHIPPED_PAGE_SIZE;
+  const slice = items.slice(start, start + SHIPPED_PAGE_SIZE);
+
+  for (const t of slice) {
+    const li = document.createElement('li');
+    const title = document.createElement('p');
+    title.className = 'shipped__title';
+    const ver = document.createElement('span');
+    ver.className = 'shipped__version';
+    ver.textContent = t.version_id;
+    title.appendChild(ver);
+    title.append(t.value_summary || t.title);
+    const meta = document.createElement('p');
+    meta.className = 'shipped__meta';
+    const by = t.display_name || t.github_login;
+    meta.textContent = `${by ? `inscribed by ${by} · ` : ''}${fmtRelativeTime(t.shipped_at)}`;
+    li.appendChild(title);
+    li.appendChild(meta);
+    els.shipped.appendChild(li);
+  }
+
+  // GDS #191: pad the trailing rows on the last page (or any underfilled
+  // page) with invisible placeholders so the section height never jumps as
+  // the user pages forward / back. Empty rows are aria-hidden so screen
+  // readers don't announce phantom entries.
+  const padCount = SHIPPED_PAGE_SIZE - slice.length;
+  for (let i = 0; i < padCount; i++) {
+    const pad = document.createElement('li');
+    pad.className = 'empty-row';
+    pad.setAttribute('aria-hidden', 'true');
+    els.shipped.appendChild(pad);
+  }
+
+  if (els.shippedPager) {
+    if (pageCount > 1) {
+      els.shippedPager.hidden = false;
+      if (els.shippedPageInfo) {
+        els.shippedPageInfo.textContent = `page ${_shippedPage + 1} of ${pageCount}`;
+      }
+      if (els.shippedPrev) els.shippedPrev.disabled = _shippedPage === 0;
+      if (els.shippedNext) els.shippedNext.disabled = _shippedPage >= pageCount - 1;
+    } else {
+      els.shippedPager.hidden = true;
+    }
+  }
+}
+
+if (els.shippedPrev) {
+  els.shippedPrev.addEventListener('click', () => {
+    if (_shippedPage > 0) {
+      _shippedPage--;
+      renderShippedPage();
+    }
+  });
+}
+if (els.shippedNext) {
+  els.shippedNext.addEventListener('click', () => {
+    _shippedPage++;
+    renderShippedPage();
+  });
+}
+if (els.shippedRange) {
+  els.shippedRange.addEventListener('change', () => {
+    _shippedRange = els.shippedRange.value || 'all';
+    _shippedPage = 0;
+    loadShipped();
+  });
+}
+
+// task 1466: re-fetch the treasury breakdown whenever a spend filter changes.
+for (const sel of [els.costFilterSource, els.costFilterCategory, els.costFilterWindow]) {
+  if (sel) sel.addEventListener('change', () => { loadCosts().catch((e) => console.error('costs', e)); });
+}
+
+async function loadShipped() {
+  // GDS #191: forward the active window to the API. `all` returns everything;
+  // numeric values restrict to a trailing N-day window server-side.
+  const url = `/api/bongos/public/recent-shipped?days=${encodeURIComponent(_shippedRange)}`;
+  const data = await fetchJson(url);
+  _shippedItems = data.tasks || [];
+  renderShippedPage();
+  // #409 efficiency follow-up: piggyback the 7-day count for the headline
+  // strip onto this fetch instead of a separate `?days=7` round trip.
+  // Range options are 7|30|90|all — every choice covers at least 7 days, so
+  // _shippedItems is always a superset of the last 7 days; client-side
+  // filtering is exact. Avoids fetching the same task list twice per cycle.
+  updateHeadlineShippedFromItems();
+}
+
+function updateHeadlineShippedFromItems() {
+  const el = document.getElementById('headline-shipped-num');
+  if (!el) return;
+  const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
+  let count = 0;
+  for (const t of _shippedItems) {
+    if (!t.shipped_at) continue;
+    const ms = new Date(t.shipped_at).getTime();
+    if (Number.isFinite(ms) && ms >= sevenDaysAgo) count++;
+  }
+  el.textContent = String(count);
+}
+
+// ---------- leaderboard ----------
+
+// Set is locked at 8 for V2 (per limitations/pms-v2.md), so hardcoding the
+// emoji map here is cheaper than another API round-trip per page load.
+// Mirrors public-builders/builders.js — keep both in sync if the catalog
+// ever shifts (would require an ADR + version bump per the V2 contract).
+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 null;
+  const row = document.createElement('span');
+  row.className = 'leader__achievements';
+  row.setAttribute('aria-label', 'achievements');
+  for (const id of ids) {
+    const emoji = ACH_EMOJI[id];
+    if (!emoji) continue;
+    const span = document.createElement('span');
+    span.className = 'leader__ach';
+    span.title = id;
+    span.setAttribute('aria-label', id);
+    span.textContent = emoji;
+    row.appendChild(span);
+  }
+  return row.children.length > 0 ? row : null;
+}
+
+async function loadLeaderboard() {
+  const data = await fetchJson('/api/bongos/public/leaderboard');
+  const rows = data.leaderboard || [];
+  clear(els.leaderboard);
+  if (rows.length === 0) {
+    const li = document.createElement('li');
+    li.className = 'empty';
+    li.textContent = 'No builders yet — be the first.';
+    els.leaderboard.appendChild(li);
+    return;
+  }
+  // The API enrichment (#188) already trims to top 10 by total_credits and
+  // the catalog is locked at 8, so paging here is forward-compat. Today's
+  // builder count is <10; we render the whole array as-is.
+  for (const b of rows) {
+    const li = document.createElement('li');
+    const avatar = document.createElement('img');
+    avatar.className = 'leader__avatar';
+    avatar.src = b.avatar_url || '';
+    avatar.alt = '';
+    avatar.referrerPolicy = 'no-referrer';
+    if (!b.avatar_url) avatar.style.visibility = 'hidden';
+    const name = document.createElement('div');
+    name.className = 'leader__name';
+    name.textContent = b.display_name;
+    const login = document.createElement('span');
+    login.className = 'leader__login';
+    login.textContent = `@${b.github_login}`;
+    name.appendChild(login);
+    const badges = renderAchievementRow(b.achievements);
+    if (badges) name.appendChild(badges);
+    const credits = document.createElement('div');
+    credits.className = 'leader__credits';
+    credits.textContent = `${(Number(b.total_credits) || 0).toLocaleString()}`;
+    const unit = document.createElement('span');
+    unit.className = 'leader__credits-unit';
+    unit.textContent = curLabel();
+    credits.appendChild(unit);
+    li.appendChild(avatar);
+    li.appendChild(name);
+    li.appendChild(credits);
+    els.leaderboard.appendChild(li);
+  }
+}
+
+// ---------- main ----------
+
+// Stamp the banner with the current local time. Called at the START of each
+// refresh cycle (before any awaits) so the displayed time matches when the
+// round trip was initiated, not when it completed. Stamping early also avoids
+// a race where two concurrent refresh() calls stamp in the wrong order (the
+// slower first call could overwrite a more-recent stamp from the faster second
+// call). null-guarded: els.lastUpdated is set once at module load and should
+// always be valid, but the guard makes future refactors safe.
+function stampRefreshTime() {
+  if (!els.lastUpdated) return;
+  const t = new Date().toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  els.lastUpdated.textContent = `tablet last consulted at ${t}`;
+}
+
+// ---------- the Foundry — ecosystem dev curve (#291, C5) ----------
+//
+// Public, individuals-stripped aggregate of the builder "AI dev curve":
+// works shipped per day and average time per work over 90 days, plus the
+// kinds-of-work fingerprint. Fed by /api/bongos/public/analytics/ecosystem.
+// Inline SVG sparklines — no chart library for this tile.
+
+function foundrySparkline(values, color) {
+  const W = 320, H = 54, pad = 4;
+  const nums = (values || []).map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
+  if (nums.length === 0) return '';
+  const min = Math.min(...nums), max = Math.max(...nums), 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 line = nums.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
+  const area = `${pad},${H - pad} ${line} ${(W - pad)},${H - pad}`;
+  return `<svg class="foundry-spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="trend">
+    <polyline class="foundry-spark__area" points="${area}" fill="${color}" />
+    <polyline class="foundry-spark__line" points="${line}" fill="none" stroke="${color}" />
+  </svg>`;
+}
+
+async function loadEcosystem() {
+  const data = await fetchJson('/api/bongos/public/analytics/ecosystem?days=90').catch(() => null);
+  const shippedEl = document.getElementById('foundry-shipped');
+  const buildersEl = document.getElementById('foundry-builders');
+  const durationEl = document.getElementById('foundry-duration');
+  const chartsEl = document.getElementById('foundry-charts');
+  const kindsEl = document.getElementById('foundry-kinds');
+  const emptyEl = document.getElementById('foundry-empty');
+  if (!chartsEl) return;
+
+  const h = data?.headline || {};
+  const total = h.total_shipped || 0;
+  if (!data || total === 0) {
+    if (emptyEl) emptyEl.hidden = false;
+    if (shippedEl) shippedEl.textContent = '—';
+    if (buildersEl) buildersEl.textContent = '—';
+    if (durationEl) durationEl.textContent = '—';
+    chartsEl.innerHTML = '';
+    if (kindsEl) kindsEl.innerHTML = '';
+    return;
+  }
+  if (emptyEl) emptyEl.hidden = true;
+  if (shippedEl) shippedEl.textContent = total.toLocaleString();
+  if (buildersEl) buildersEl.textContent = (h.active_builders ?? 0).toLocaleString();
+  if (durationEl) durationEl.textContent = h.avg_duration_min ? `${Math.round(h.avg_duration_min)}m` : '—';
+
+  const shipVals = (data.ship_rate || []).map((r) => Number(r.n));
+  const durVals = (data.duration_trend || []).map((r) => Number(r.avg_actual));
+  chartsEl.innerHTML =
+    `<div class="foundry__chart"><div class="foundry__chart-title">Works shipped / day</div>${foundrySparkline(shipVals, '#2f5a3f') || '<p class="empty">no data</p>'}</div>` +
+    `<div class="foundry__chart"><div class="foundry__chart-title">Avg time per work (min)</div>${foundrySparkline(durVals, '#2d6e7e') || '<p class="empty">no data</p>'}</div>`;
+
+  const kinds = (data.top_kinds || []).slice(0, 6);
+  if (kindsEl) {
+    if (kinds.length) {
+      const maxN = Math.max(...kinds.map((k) => Number(k.n)));
+      kindsEl.innerHTML = kinds.map((k) => {
+        const w = maxN ? Math.round((Number(k.n) / maxN) * 100) : 0;
+        return `<div class="foundry__kind"><span class="foundry__kind-label">${k.kind}</span>` +
+          `<span class="foundry__kind-bar"><span class="foundry__kind-fill" style="width:${w}%"></span></span>` +
+          `<span class="foundry__kind-n">${k.n}</span></div>`;
+      }).join('');
+    } else {
+      kindsEl.innerHTML = '';
+    }
+  }
+}
+
+async function refresh() {
+  // Stamp the banner BEFORE the async work so it shows when this refresh
+  // started, not when it finished. Fixes the apparent "wrong time" when
+  // API calls are slow or when concurrent refresh() calls race.
+  stampRefreshTime();
+  const tasks = [
+    loadHeadline().catch((e) => console.error('headline', e)),
+    loadWorldSnapshots().catch((e) => console.error('snapshots', e)),
+    loadUptime().catch((e) => console.error('uptime', e)),
+    loadVersions().catch((e) => console.error('versions', e)),
+    loadCosts().catch((e) => console.error('costs', e)),
+    loadShipped().catch((e) => console.error('shipped', e)),
+    loadLeaderboard().catch((e) => console.error('leaderboard', e)),
+    loadEcosystem().catch((e) => console.error('ecosystem', e)),
+  ];
+  await Promise.all(tasks);
+}
+
+// #409: render the sticky nav as soon as the DOM is parsed. It doesn't
+// depend on any data — sections are static in the HTML — so it can light
+// up immediately instead of waiting for the first /api/bongos/public/* round
+// trip. The observer wires itself.
+renderNav();
+
+refresh();
+setInterval(refresh, 60_000);
+
+// Re-refresh immediately when the tab regains focus after being in the
+// background. Browsers throttle setInterval in hidden tabs, so the banner
+// timestamp and data can lag by many minutes. This brings the page up to date
+// the moment the viewer looks at it again.
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible') refresh();
+});
+
+// ---------- deep-link resolver (#654) ----------
+// A bare doc ref like "#173" links into the Builders' Hall, but a viewer can also
+// land on the PUBLIC status dashboard at status.amazonprimea.com/#/idea/173 (or
+// /#/task/N, /#/blocker/N). Resolve it to a MINIMAL card — id + status + type
+// only; an idea/blocker title is NEVER shown here (the public endpoints withhold
+// it), and a task title only when the projection already marked it public
+// (shipped/confirmed). The card links into the hall, where a signed-in builder
+// sees the full record.
+const DEEPLINK_RE = /^#\/(task|idea|blocker)\/(\d+)$/;
+const HALL_ORIGIN = `${API || (typeof location !== 'undefined' ? location.origin.replace(/^(https?:\/\/)status\./, '$1') : '')}/builders`;
+
+function dismissStatusDeepCard() {
+  const c = document.getElementById('status-deeplink');
+  if (c) c.remove();
+}
+
+function clearStatusDeepLink() {
+  dismissStatusDeepCard();
+  // Drop the hash so back/refresh doesn't immediately re-open the card.
+  if (DEEPLINK_RE.test(location.hash)) {
+    history.replaceState(null, '', location.pathname + location.search);
+  }
+}
+
+function renderStatusDeepCard(kind, id, state) {
+  dismissStatusDeepCard();
+  const mk = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
+  const overlay = document.createElement('div');
+  overlay.id = 'status-deeplink';
+  overlay.className = 'deeplink';
+  overlay.setAttribute('role', 'dialog');
+  overlay.setAttribute('aria-modal', 'true');
+  overlay.setAttribute('aria-label', `${kind} #${id}`);
+  const panel = mk('div', 'deeplink__panel');
+
+  const close = mk('button', 'deeplink__close', '×');
+  close.type = 'button';
+  close.setAttribute('aria-label', 'Close');
+  close.addEventListener('click', clearStatusDeepLink);
+  panel.appendChild(close);
+
+  const label = `#${id}`;
+  panel.appendChild(mk('p', 'deeplink__kind', kind.toUpperCase()));
+  if (state.loading) {
+    panel.appendChild(mk('p', 'deeplink__title', `Consulting the archive for ${label}…`));
+  } else if (state.notFound) {
+    panel.appendChild(mk('p', 'deeplink__title', `${label} — no such ${kind}`));
+    panel.appendChild(mk('p', 'deeplink__note', 'Records number tasks, ideas, and blockers separately from GitHub pull requests — this may be a PR, not a record here.'));
+  } else if (state.error) {
+    panel.appendChild(mk('p', 'deeplink__title', `Could not resolve ${label}`));
+    panel.appendChild(mk('p', 'deeplink__note', 'The archive could not be reached. Try again in a moment.'));
+  } else {
+    const r = state.ref || {};
+    panel.appendChild(mk('p', 'deeplink__title', r.title ? `${label} — ${r.title}` : label));
+    const meta = [];
+    if (r.status) meta.push(r.status);
+    if (r.kind) meta.push(r.kind);
+    if (r.version_id) meta.push(r.version_id);
+    if (r.priority != null) meta.push(`P${r.priority}`);
+    if (meta.length) panel.appendChild(mk('p', 'deeplink__meta', meta.join(' · ')));
+  }
+  const a = mk('a', 'deeplink__link', 'Open in the Builders’ Hall →');
+  a.href = `${HALL_ORIGIN}#/${kind}/${id}`;
+  a.target = '_blank';
+  a.rel = 'noopener';
+  panel.appendChild(a);
+
+  overlay.appendChild(panel);
+  overlay.addEventListener('click', (e) => { if (e.target === overlay) clearStatusDeepLink(); });
+  document.body.appendChild(overlay);
+}
+
+async function resolveStatusDeepLink() {
+  const m = DEEPLINK_RE.exec(location.hash);
+  if (!m) { dismissStatusDeepCard(); return; }
+  const kind = m[1];
+  const id = Number(m[2]);
+  renderStatusDeepCard(kind, id, { loading: true });
+  try {
+    const path = kind === 'task' ? `/api/bongos/public/tasks/${id}`
+      : kind === 'idea' ? `/api/bongos/public/ideas/${id}`
+        : `/api/bongos/public/blockers/${id}`;
+    const res = await fetch(`${API}${path}`, { cache: 'no-store' });
+    if (res.status === 404) { renderStatusDeepCard(kind, id, { notFound: true }); return; }
+    if (!res.ok) { renderStatusDeepCard(kind, id, { error: true }); return; }
+    const data = await res.json();
+    const ref = data.task || data.idea || data.blocker || null;
+    renderStatusDeepCard(kind, id, ref ? { ref } : { notFound: true });
+  } catch (_) {
+    renderStatusDeepCard(kind, id, { error: true });
+  }
+}
+
+window.addEventListener('hashchange', resolveStatusDeepLink);
+resolveStatusDeepLink();
+
+// ---------- accessibility zoom (task 1475 / idea 280) ----------
+// A one-click "make everything bigger" control for the public ledger. Cycles
+// 100% -> 125% -> 150% -> 100% via CSS `zoom` on <html> (enlarges px + rem
+// uniformly), persisted per-browser. Mirrors the hall's shell.js zoom; this
+// surface has its own localStorage origin + no theme toggle to hang it off, so
+// it's a small self-contained control.
+(function ledgerZoom() {
+  const ZOOM_KEY = 'ledger-zoom';
+  const STEPS = [1, 1.25, 1.5];
+  function stored() {
+    try { const v = parseFloat(window.localStorage.getItem(ZOOM_KEY)); return STEPS.indexOf(v) >= 0 ? v : 1; }
+    catch (_) { return 1; }
+  }
+  function apply() {
+    const z = stored();
+    document.documentElement.style.zoom = z === 1 ? '' : String(z);
+    const btn = document.getElementById('ledger-zoom');
+    if (!btn) return;
+    const pct = Math.round(z * 100);
+    const next = STEPS[(STEPS.indexOf(z) + 1) % STEPS.length];
+    btn.setAttribute('aria-label', `Text size ${pct}%. Tap to change to ${Math.round(next * 100)}%.`);
+    btn.title = btn.getAttribute('aria-label');
+    btn.classList.toggle('ledger-zoom--on', z !== 1);
+    btn.innerHTML =
+      '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">' +
+        '<circle cx="7.5" cy="7.5" r="4.5"/><path d="M11 11l3.5 3.5M5.5 7.5h4M7.5 5.5v4"/></svg>' +
+      (z !== 1 ? `<span class="ledger-zoom__pct">${pct}%</span>` : '');
+  }
+  function cycle() {
+    const next = STEPS[(STEPS.indexOf(stored()) + 1) % STEPS.length];
+    try { window.localStorage.setItem(ZOOM_KEY, String(next)); } catch (_) { /* private mode */ }
+    apply();
+  }
+  const btn = document.getElementById('ledger-zoom');
+  if (btn) btn.addEventListener('click', cycle);
+  apply();
+})();