@bongos/core 1.24.49 → 1.24.51

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

@@ -56,10 +56,9 @@ function fmtUsd(n) {
   return Math.round(Number(n)).toLocaleString();
 }
 
-function fmtDr(n) {
+function fmtMoney(n) {
   if (n == null) return '—';
-  if (n < 100) return `${Number(n).toFixed(2)} dr.`;
-  return `${Math.round(Number(n)).toLocaleString()} dr.`;
+  return `$${fmtUsd(n)}`;
 }
 
 function fmtRelativeTime(iso) {
@@ -99,13 +98,13 @@ async function fetchJson(path) {
 // in ~756px of content width without wrapping.
 
 const SECTIONS = [
-  { id: 'headline-tablet', label: 'Pulse'      },
-  { 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'      },
+  { id: 'headline-tablet', label: 'Overview'    },
+  { id: 'leader-tablet',   label: 'Builders'    },
+  { id: 'foundry-tablet',  label: 'Trends'      },
+  { id: 'versions-tablet', label: 'In progress' },
+  { id: 'cost-tablet',     label: 'Spending'    },
+  { id: 'shipped-tablet',  label: 'Shipped'     },
+  { id: 'world-tablet',    label: 'Snapshot'    },
 ];
 
 let navObserver = null;
@@ -354,7 +353,7 @@ async function loadVersions() {
   if (rows.length === 0) {
     const p = document.createElement('p');
     p.className = 'empty';
-    p.textContent = 'No endeavors underway just now.';
+    p.textContent = 'Nothing is in progress right now.';
     els.versions.appendChild(p);
     return;
   }
@@ -497,7 +496,7 @@ function renderCostFilterNote(data) {
   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).`;
+  note.textContent = `Breakdown filtered to ${parts.join(' · ')}: ${fmtMoney(filtered)} of ${fmtMoney(whole)} (${pct}% of all spend).`;
 }
 
 async function loadCosts() {
@@ -522,7 +521,7 @@ async function loadCosts() {
   if (cats.length === 0) {
     const tag = document.createElement('span');
     tag.className = 'cost-cat';
-    tag.textContent = `No ${curLabel()} yet spent.`;
+    tag.textContent = `No ${curLabel()} spent yet.`;
     els.costCats.appendChild(tag);
   } else {
     for (const c of cats) {
@@ -531,7 +530,7 @@ async function loadCosts() {
       const strong = document.createElement('strong');
       strong.textContent = c.category;
       tag.appendChild(strong);
-      tag.append(` · ${fmtDr(c.total_usd)}`);
+      tag.append(` · ${fmtMoney(c.total_usd)}`);
       els.costCats.appendChild(tag);
     }
   }
@@ -557,7 +556,7 @@ async function loadCosts() {
     if (total > 0) {
       const pct = Math.round((unattributed / total) * 100);
       els.costAttributionSplit.textContent =
-        `Attributed to builders: ${fmtDr(attributed)} · Shared keep (unattributed): ${fmtDr(unattributed)} (${pct}%).`;
+        `Attributed to builders: ${fmtMoney(attributed)} · Shared (unattributed): ${fmtMoney(unattributed)} (${pct}%).`;
     } else {
       els.costAttributionSplit.textContent = '';
     }
@@ -577,14 +576,14 @@ async function loadCosts() {
         : (b.display_name || b.github_login || `builder #${b.builder_id}`);
       strong.textContent = label;
       tag.appendChild(strong);
-      tag.append(` · ${fmtDr(b.total_usd)}`);
+      tag.append(` · ${fmtMoney(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.`;
+      tag.textContent = `No ${curLabel()} attributed to a builder yet.`;
       els.costBuilders.appendChild(tag);
     }
   }
@@ -643,6 +642,10 @@ async function loadCosts() {
 
   if (!window.Chart) return; // Chart.js failed to load — skip
 
+  // The chart paints with the page's own tokens (task 1005089): a canvas cannot
+  // read var(), so the resolved values are read once per draw, in whichever mode
+  // the page is in. Spend is ink, value the --info tone; the faces are the pack's.
+  const t = chartTokens();
   const ctx = els.costChart.getContext('2d');
   if (costChart) costChart.destroy();
   costChart = new Chart(ctx, {
@@ -654,23 +657,23 @@ async function loadCosts() {
           label: `${curLabel()} spent`,
           data: cumCost,
           fill: true,
-          borderColor: '#2a2110',
-          backgroundColor: 'rgba(139, 111, 44, 0.16)',
+          borderColor: t.ink,
+          backgroundColor: t.inkWash,
           tension: 0.2,
           pointRadius: 2.5,
-          pointBackgroundColor: '#2a2110',
+          pointBackgroundColor: t.ink,
           borderWidth: 1.5,
         },
         {
-          label: 'value wrought',
+          label: 'value produced',
           data: cumValue,
           fill: false,
-          borderColor: '#2f5a3f',
-          backgroundColor: 'rgba(74, 125, 92, 0.18)',
+          borderColor: t.info,
+          backgroundColor: t.info,
           borderDash: [5, 4],
           tension: 0.2,
           pointRadius: 2.5,
-          pointBackgroundColor: '#2f5a3f',
+          pointBackgroundColor: t.info,
           borderWidth: 1.5,
         },
       ],
@@ -678,7 +681,7 @@ async function loadCosts() {
     options: {
       responsive: true,
       maintainAspectRatio: false,
-      font: { family: '"EB Garamond", Georgia, serif' },
+      font: { family: t.body },
       plugins: {
         legend: {
           display: true,
@@ -686,17 +689,19 @@ async function loadCosts() {
           labels: {
             boxWidth: 22,
             padding: 18,
-            font: { family: '"EB Garamond", Georgia, serif', size: 13, style: 'italic' },
-            color: '#6e5b3a',
+            font: { family: t.body, size: 13 },
+            color: t.inkSoft,
           },
         },
         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 },
+          backgroundColor: t.ink,
+          titleColor: t.card,
+          bodyColor: t.card,
+          titleFont: { family: t.body, size: 12, weight: '500' },
+          bodyFont: { family: t.body, size: 13 },
           padding: 10,
           callbacks: {
-            label: (c) => `${c.dataset.label}: ${c.parsed.y.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} dr.`,
+            label: (c) => `${c.dataset.label}: ${c.parsed.y.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`,
           },
         },
       },
@@ -706,28 +711,28 @@ async function loadCosts() {
           title: {
             display: true,
             text: `${curLabel()} (cumulative)`,
-            font: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
-            color: '#735f3d',
+            font: { family: t.body, size: 12, weight: '500' },
+            color: t.inkSoft,
           },
           ticks: {
-            callback: (v) => `${v} dr.`,
-            font: { family: '"EB Garamond", Georgia, serif', size: 12 },
-            color: '#6e5b3a',
+            callback: (v) => `${v}`,
+            font: { family: t.body, size: 12 },
+            color: t.inkSoft,
           },
-          grid: { color: 'rgba(139, 111, 44, 0.18)', drawBorder: false },
+          grid: { color: t.rule, drawBorder: false },
         },
         x: {
           title: {
             display: true,
             text: 'date',
-            font: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
-            color: '#735f3d',
+            font: { family: t.body, size: 12, weight: '500' },
+            color: t.inkSoft,
           },
           grid: { display: false },
           ticks: {
             maxTicksLimit: 10,
-            font: { family: '"EB Garamond", Georgia, serif', size: 12 },
-            color: '#6e5b3a',
+            font: { family: t.body, size: 12 },
+            color: t.inkSoft,
           },
         },
       },
@@ -735,6 +740,23 @@ async function loadCosts() {
   });
 }
 
+// The resolved values of the tokens the cost chart paints with, read from the
+// page (a canvas cannot take var()). An unset token reads '' and Chart.js keeps
+// its own default for it.
+function chartTokens() {
+  const cs = window.getComputedStyle(document.body);
+  const v = (name) => cs.getPropertyValue(name).trim();
+  return {
+    ink: v('--ink'),
+    inkSoft: v('--ink-soft'),
+    inkWash: v('--glass-strong'),
+    info: v('--info'),
+    rule: v('--rule-soft'),
+    card: v('--bg-card'),
+    body: v('--font-body') || 'sans-serif',
+  };
+}
+
 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.
@@ -785,7 +807,7 @@ function renderShippedPage() {
   if (items.length === 0) {
     const li = document.createElement('li');
     li.className = 'empty';
-    li.textContent = 'No works yet inscribed in this window.';
+    li.textContent = 'Nothing shipped 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
@@ -827,7 +849,7 @@ function renderShippedPage() {
     const by = t.display_name || t.github_login;
     // task 1004432: an approved page is the artist's; the session that applied it is a helper.
     const helper = t.helper_display_name || t.helper_login;
-    meta.textContent = `${by ? `inscribed by ${by} · ` : ''}${helper ? `with help from ${helper} · ` : ''}${fmtRelativeTime(t.shipped_at)}`;
+    meta.textContent = `${by ? `shipped by ${by} · ` : ''}${helper ? `with help from ${helper} · ` : ''}${fmtRelativeTime(t.shipped_at)}`;
     li.appendChild(title);
     if (thumb) li.appendChild(thumb);
     li.appendChild(meta);
@@ -1040,7 +1062,7 @@ async function loadLeaderboard() {
 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}`;
+  els.lastUpdated.textContent = `updated at ${t}`;
 }
 
 // ---------- the Foundry — ecosystem dev curve (#291, C5) ----------
@@ -1050,7 +1072,7 @@ function stampRefreshTime() {
 // kinds-of-work fingerprint. Fed by /api/bongos/public/analytics/ecosystem.
 // Inline SVG sparklines — no chart library for this tile.
 
-function foundrySparkline(values, color) {
+function foundrySparkline(values, tone) {
   const W = 320, H = 54, pad = 4;
   const nums = (values || []).map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
   if (nums.length === 0) return '';
@@ -1060,9 +1082,12 @@ function foundrySparkline(values, color) {
   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}" />
+  // The colour is the sheet's (.foundry-spark, and --ink for the ink tone): a
+  // token, never a literal handed in from here (task 1005089).
+  const cls = tone === 'ink' ? 'foundry-spark foundry-spark--ink' : 'foundry-spark';
+  return `<svg class="${cls}" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="trend">
+    <polyline class="foundry-spark__area" points="${area}" />
+    <polyline class="foundry-spark__line" points="${line}" />
   </svg>`;
 }
 
@@ -1095,8 +1120,8 @@ async function loadEcosystem() {
   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>`;
+    `<div class="foundry__chart"><div class="foundry__chart-title">Tasks shipped per day</div>${foundrySparkline(shipVals, 'ink') || '<p class="empty">no data</p>'}</div>` +
+    `<div class="foundry__chart"><div class="foundry__chart-title">Average time per task (min)</div>${foundrySparkline(durVals, 'info') || '<p class="empty">no data</p>'}</div>`;
 
   const kinds = (data.top_kinds || []).slice(0, 6);
   if (kindsEl) {
@@ -1192,13 +1217,13 @@ function renderStatusDeepCard(kind, id, state) {
   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}…`));
+    panel.appendChild(mk('p', 'deeplink__title', `Looking up ${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.'));
+    panel.appendChild(mk('p', 'deeplink__note', 'The server 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));