@bongos/core 1.19.488 → 1.19.490

package/modules/hall-ui/public/profile-charts.js

@@ -0,0 +1,524 @@
+// modules/hall-ui/public/profile-charts.js — the charts on a builder's profile
+// Overview (task 1003489, goal 1000081): works shipped over time, drachmae
+// earned over time, the craft mix, and — on your own profile only — your ship
+// rate by week. The owner asked for the figures the page already states to be
+// SEEN over time; this file draws them, and a lookback control scopes them all.
+//
+// No chart library: the hall loads none, and each figure here is a hand-built
+// SVG in the hall's own sparkline idiom. The dataviz rules it keeps: one axis,
+// one series per chart drawn in the accent, 2px lines and thin bars, hairline
+// solid axes, only the endpoint labelled, a crosshair readout on hover AND on
+// the keyboard, and a table twin under every time chart so no number is
+// reachable only through the picture. Text wears the ink tokens, never the
+// series colour. One filter row (the lookback) sits above the grid and scopes
+// every chart, the dataviz "date range first" rule.
+//
+// Data: GET /builders/:id/activity?section=tasks — any signed-in viewer, any
+// builder; paged, followed to `total` up to MAX_ROWS. Its rows carry
+// shipped_at and discipline, so the works and craft series derive client-side.
+// The drachmae series is the CREDITS LEDGER (task 1003491): GET /me/credits on
+// your own profile, GET /builders/:id/credits on another's (builder.roster.read,
+// metic+), each row a `delta` at `recorded_at`, cumulated by day — the curve
+// that ends at the headline balance. On a cost-plus instance (ADR 0146) the
+// per-task award is structurally 0 and the pay is the session token reward,
+// which only the ledger records; a series summed from per-task awards went
+// flat the day per-task payout stopped. A viewer the ledger refuses (403)
+// gets the activity rows' credits_reward ESTIMATE instead, cumulated and
+// labelled so. The ship rate is GET /analytics/builder/:id, own-or-archon; it
+// is asked for only when the viewer IS the builder and renders nothing
+// elsewhere — never a 403 toast.
+//
+// Exposed as window.OTBProfileCharts: render({ api, API, builderId, selfId,
+// signedIn, now? }) plus the pure series builders (cumulativeByDay, craftMix,
+// weeklyBuckets, estimateOf, clipToWindow) so tests can pin the arithmetic
+// without a DOM.
+(() => {
+  'use strict';
+
+  const MAX_ROWS = 500;   // five pages: a prolific builder's whole record, bounded
+  const PAGE = 100;
+  const LEDGER_PAGE = 200;        // the ledger route's MAX_LIMIT
+  const LEDGER_MAX_ROWS = 2000;   // ten pages; the busiest builder's ledger is ~600 rows
+  const DAY = 86400000;
+  const WEEK = 7 * DAY;
+  const MIX_MAX = 7;      // bars past this fold into "other" — never an eighth hue
+
+  // The lookback control. `days: null` is the whole record; the pace chart caps
+  // its own weekly view at PACE_MAX_DAYS so "all time" never draws 300 columns.
+  const RANGES = [
+    { id: '30', label: '30 days', days: 30 },
+    { id: '90', label: '90 days', days: 90 },
+    { id: '365', label: '1 year', days: 365 },
+    { id: 'all', label: 'All time', days: null },
+  ];
+  const DEFAULT_RANGE = 'all';
+  const PACE_MAX_DAYS = 365;
+  const RANGE_KEY = 'otb.profile.chartRange';
+
+  const W = 320;          // SVG viewBox; the card scales it
+  const H = 132;
+  const PAD = { l: 6, r: 8, t: 20, b: 24 }; // t: the end label's room; b: the axis band
+
+  const esc = (s) => window.OTB.escapeHtml(s);
+  const $ = (sel) => window.OTB.$(sel);
+  const fmtNum = (n) => window.OTB.fmtNum(n);
+  const fmtDate = (iso) => window.OTB.fmtDate(iso);
+  const dayIso = (ms) => new Date(ms).toISOString().slice(0, 10);
+  const fmtDay = (ms) => fmtDate(dayIso(ms));
+  const midnight = (ms) => Math.floor(ms / DAY) * DAY;
+
+  const curLabel = (caps) => {
+    const l = (window.__BRANDING__ && window.__BRANDING__.currency && window.__BRANDING__.currency.label) || 'credits';
+    return caps ? l.charAt(0).toUpperCase() + l.slice(1) : l;
+  };
+
+  function readRange() {
+    try { const v = window.localStorage.getItem(RANGE_KEY); if (RANGES.some((r) => r.id === v)) return v; } catch (_) { /* private mode */ }
+    return DEFAULT_RANGE;
+  }
+  function writeRange(id) {
+    try { window.localStorage.setItem(RANGE_KEY, id); } catch (_) { /* private mode */ }
+  }
+
+  // ---- series ---------------------------------------------------------------
+
+  // The ESTIMATE of what a shipped row pays — credits_reward, the figure the
+  // task carried before it shipped. The FALLBACK only: the drachmae series is
+  // the ledger wherever the viewer may read it, and this stands in, labelled
+  // "estimated" (ADR 0146), when the ledger answers 403. Never the per-task
+  // award column — on a cost-plus instance it is 0 for every task, and summing
+  // it is the flatline this file was fixed for.
+  function estimateOf(row) {
+    const e = Number(row && row.credits_reward);
+    return Number.isFinite(e) ? e : 0;
+  }
+
+  // rows → [{ day, value }] ascending by day, value cumulative over the WHOLE
+  // record. dateOf names the row's timestamp: shipped_at for activity rows (the
+  // default), recorded_at for ledger rows. Two entries on one day are one
+  // point; a row with no parsable date is skipped, not zeroed. The lookback
+  // clips this for drawing (clipToWindow) rather than re-accumulating, so the
+  // running total stays true.
+  function cumulativeByDay(rows, valueOf, dateOf = (r) => r && r.shipped_at) {
+    const byDay = new Map();
+    for (const r of rows || []) {
+      const t = Date.parse(dateOf(r));
+      if (!Number.isFinite(t)) continue;
+      const d = midnight(t);
+      byDay.set(d, (byDay.get(d) || 0) + Number(valueOf(r)) || 0);
+    }
+    const days = [...byDay.keys()].sort((a, b) => a - b);
+    let acc = 0;
+    return days.map((d) => ({ day: d, value: (acc += byDay.get(d)) }));
+  }
+
+  // Clip a cumulative series to [windowStart, ∞) for drawing. The line must
+  // enter the window at its running height, not at zero, so a synthetic point
+  // at windowStart carries the total accumulated BEFORE the window. null
+  // windowStart (All time) returns the series untouched.
+  function clipToWindow(points, windowStart) {
+    if (windowStart == null || !points.length) return points;
+    const inWin = points.filter((p) => p.day >= windowStart);
+    if (inWin.length === points.length) return points;
+    let baseline = 0;
+    for (const p of points) { if (p.day < windowStart) baseline = p.value; else break; }
+    if (!inWin.length) return [{ day: windowStart, value: baseline }];
+    return [{ day: windowStart, value: baseline }, ...inWin];
+  }
+
+  // rows → [{ label, n }] desc by n; the tail past MIX_MAX folds into "other".
+  function craftMix(rows, max = MIX_MAX) {
+    const counts = new Map();
+    for (const r of rows || []) {
+      const k = (r && r.discipline) || 'unclassified';
+      counts.set(k, (counts.get(k) || 0) + 1);
+    }
+    const sorted = [...counts.entries()].map(([label, n]) => ({ label, n })).sort((a, b) => b.n - a.n || a.label.localeCompare(b.label));
+    if (sorted.length <= max) return sorted;
+    const head = sorted.slice(0, max - 1);
+    const other = sorted.slice(max - 1).reduce((s, k) => s + k.n, 0);
+    return head.concat({ label: 'other', n: other });
+  }
+
+  // analytics ship_rate [{ day: 'YYYY-MM-DD', n }] → weekly buckets over the
+  // last `days` days ending today: [{ start, n }], every week present even when
+  // empty, so the axis is time and not "days something happened".
+  function weeklyBuckets(shipRate, days, now) {
+    const end = midnight(now) + DAY;
+    const weeks = Math.max(1, Math.ceil(days / 7));
+    const start = end - weeks * WEEK;
+    const out = Array.from({ length: weeks }, (_, i) => ({ start: start + i * WEEK, n: 0 }));
+    for (const r of shipRate || []) {
+      const t = Date.parse(r && r.day);
+      if (!Number.isFinite(t) || t < start || t >= end) continue;
+      out[Math.floor((t - start) / WEEK)].n += Number(r.n) || 0;
+    }
+    return out;
+  }
+
+  // ---- the figures --------------------------------------------------------------
+
+  // A hover/keyboard readout shared by the time charts and the columns: the
+  // crosshair snaps to the nearest x, the line under the title says what is
+  // there, and the same walk is on the arrow keys. Labels are set through
+  // textContent — the readout is data, never markup.
+  function wireReadout(fig, xs, textAt) {
+    const svg = fig.querySelector('svg');
+    const read = fig.querySelector('.pchart__read');
+    const hair = fig.querySelector('.pchart__hair');
+    if (!svg || !read || !xs.length) return;
+    let idx = xs.length - 1;
+    const show = (i) => {
+      idx = Math.max(0, Math.min(xs.length - 1, i));
+      read.textContent = textAt(idx);
+      if (hair) {
+        hair.setAttribute('x1', xs[idx].toFixed(1));
+        hair.setAttribute('x2', xs[idx].toFixed(1));
+        hair.style.visibility = 'visible';
+      }
+    };
+    const rest = () => {
+      read.textContent = textAt(xs.length - 1);
+      if (hair) hair.style.visibility = 'hidden';
+    };
+    svg.addEventListener('pointermove', (e) => {
+      const r = svg.getBoundingClientRect();
+      if (!r.width) return;
+      const fx = ((e.clientX - r.left) / r.width) * W;
+      let best = 0;
+      xs.forEach((x, i) => { if (Math.abs(x - fx) < Math.abs(xs[best] - fx)) best = i; });
+      show(best);
+    });
+    svg.addEventListener('pointerleave', rest);
+    svg.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); show(idx - 1); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); show(idx + 1); }
+      else if (e.key === 'Home') { e.preventDefault(); show(0); }
+      else if (e.key === 'End') { e.preventDefault(); show(xs.length - 1); }
+    });
+    svg.addEventListener('blur', rest);
+    rest();
+  }
+
+  function twinHtml(head, rows) {
+    return `<details class="pchart__twin">
+      <summary>as a table</summary>
+      <table class="ledger pchart__table">
+        <thead><tr><th>${esc(head[0])}</th><th class="ledger__num">${esc(head[1])}</th></tr></thead>
+        <tbody>${rows.map(([a, b]) => `<tr><td>${esc(a)}</td><td class="ledger__num">${esc(b)}</td></tr>`).join('')}</tbody>
+      </table>
+    </details>`;
+  }
+
+  // A cumulative step-line: the value holds until the next day with a ship,
+  // then runs flat out to the window's end. The first drawn point enters at its
+  // running height (clipToWindow), the last value carries the only direct label.
+  function timeChart({ id, title, points, valueText, footer, now, windowStart }) {
+    // A series with nothing in it (a ledger no drachma has reached yet) is one
+    // honest line under the title, not a crash on points[0].
+    if (!points.length) {
+      return {
+        id,
+        html: `<figure class="pchart" id="${esc(id)}">
+      <figcaption class="pchart__title">${esc(title)}</figcaption>
+      <p class="pchart__foot">nothing recorded yet · ${esc(footer)}</p>
+    </figure>`,
+        wire() {},
+      };
+    }
+    const today = midnight(now);
+    const x0 = windowStart != null ? windowStart : points[0].day;
+    const x1 = Math.max(today, x0 + WEEK);
+    const last = points[points.length - 1];
+    const vMax = last.value || 1;
+    const px = (t) => PAD.l + ((t - x0) / (x1 - x0)) * (W - PAD.l - PAD.r);
+    const py = (v) => H - PAD.b - (v / vMax) * (H - PAD.t - PAD.b);
+    const base = H - PAD.b;
+    let d = `M${px(points[0].day).toFixed(1)},${py(points[0].value).toFixed(1)}`;
+    points.forEach((p, i) => {
+      if (i === 0) return;
+      const prev = points[i - 1].value;
+      d += ` L${px(p.day).toFixed(1)},${py(prev).toFixed(1)} L${px(p.day).toFixed(1)},${py(p.value).toFixed(1)}`;
+    });
+    d += ` L${px(x1).toFixed(1)},${py(last.value).toFixed(1)}`;
+    const area = `${d} L${px(x1).toFixed(1)},${base} L${px(points[0].day).toFixed(1)},${base} Z`;
+    const endX = px(x1);
+    const endY = py(last.value);
+    const xs = points.map((p) => px(p.day));
+    const html = `<figure class="pchart" id="${esc(id)}">
+      <figcaption class="pchart__title">${esc(title)}</figcaption>
+      <p class="pchart__read" aria-live="polite"></p>
+      <svg class="pchart__svg" viewBox="0 0 ${W} ${H}" role="img" tabindex="0"
+           aria-label="${esc(title)}: ${esc(valueText(last.value))} as of today; arrow keys walk the days">
+        <path class="pchart__area" d="${area}"></path>
+        <path class="pchart__line" d="${d}"></path>
+        <line class="pchart__axis" x1="${PAD.l}" y1="${base}" x2="${W - PAD.r}" y2="${base}"></line>
+        <line class="pchart__hair" x1="0" y1="${PAD.t}" x2="0" y2="${base}" style="visibility:hidden"></line>
+        <circle class="pchart__dot" cx="${endX.toFixed(1)}" cy="${endY.toFixed(1)}" r="4"></circle>
+        <text class="pchart__end" x="${endX.toFixed(1)}" y="${(endY - 8).toFixed(1)}" text-anchor="end">${esc(valueText(last.value))}</text>
+        <text class="pchart__tick" x="${PAD.l}" y="${H - 6}">${esc(fmtDay(x0))}</text>
+        <text class="pchart__tick" x="${W - PAD.r}" y="${H - 6}" text-anchor="end">today</text>
+      </svg>
+      ${twinHtml(['Day', title], points.map((p) => [fmtDay(p.day), valueText(p.value)]))}
+      <p class="pchart__foot">${esc(footer)}</p>
+    </figure>`;
+    return {
+      id,
+      html,
+      wire(fig) {
+        wireReadout(fig, xs, (i) => `${valueText(points[i].value)} · ${i === points.length - 1 ? 'as of today' : fmtDay(points[i].day)}`);
+      },
+    };
+  }
+
+  // Weekly columns: at most 24px thick, a 4px rounded cap on a square base, a
+  // 2px surface gap between neighbours, the tallest column labelled.
+  function columnChart({ id, title, buckets, footer }) {
+    const n = buckets.length;
+    const max = Math.max(1, ...buckets.map((b) => b.n));
+    const slot = (W - PAD.l - PAD.r) / n;
+    const bw = Math.min(24, Math.max(2, slot - 2));
+    const base = H - PAD.b;
+    const py = (v) => base - (v / max) * (H - PAD.t - PAD.b);
+    const xs = buckets.map((_, i) => PAD.l + i * slot + slot / 2);
+    const peak = buckets.reduce((best, b, i) => (b.n > buckets[best].n ? i : best), 0);
+    const cols = buckets.map((b, i) => {
+      const x = xs[i] - bw / 2;
+      const y = py(b.n);
+      const h = base - y;
+      if (!b.n) return `<rect class="pchart__col pchart__col--empty" x="${x.toFixed(1)}" y="${base - 1}" width="${bw.toFixed(1)}" height="1"></rect>`;
+      const r = Math.min(4, h / 2, bw / 2);
+      const d = `M${x.toFixed(1)},${base} V${(y + r).toFixed(1)} Q${x.toFixed(1)},${y.toFixed(1)} ${(x + r).toFixed(1)},${y.toFixed(1)} H${(x + bw - r).toFixed(1)} Q${(x + bw).toFixed(1)},${y.toFixed(1)} ${(x + bw).toFixed(1)},${(y + r).toFixed(1)} V${base} Z`;
+      return `<path class="pchart__col" d="${d}"></path>`;
+    }).join('');
+    const label = buckets[peak].n
+      ? `<text class="pchart__end" x="${xs[peak].toFixed(1)}" y="${(py(buckets[peak].n) - 6).toFixed(1)}" text-anchor="middle">${buckets[peak].n}</text>`
+      : '';
+    const total = buckets.reduce((s, b) => s + b.n, 0);
+    const html = `<figure class="pchart" id="${esc(id)}">
+      <figcaption class="pchart__title">${esc(title)}</figcaption>
+      <p class="pchart__read" aria-live="polite"></p>
+      <svg class="pchart__svg" viewBox="0 0 ${W} ${H}" role="img" tabindex="0"
+           aria-label="${esc(title)}: ${total} in ${n} weeks; arrow keys walk the weeks">
+        ${cols}
+        <line class="pchart__axis" x1="${PAD.l}" y1="${base}" x2="${W - PAD.r}" y2="${base}"></line>
+        <line class="pchart__hair" x1="0" y1="${PAD.t}" x2="0" y2="${base}" style="visibility:hidden"></line>
+        ${label}
+        <text class="pchart__tick" x="${PAD.l}" y="${H - 6}">${esc(fmtDay(buckets[0].start))}</text>
+        <text class="pchart__tick" x="${W - PAD.r}" y="${H - 6}" text-anchor="end">this week</text>
+      </svg>
+      ${twinHtml(['Week of', 'Works'], buckets.map((b) => [fmtDay(b.start), String(b.n)]))}
+      <p class="pchart__foot">${esc(footer)}</p>
+    </figure>`;
+    return {
+      id,
+      html,
+      wire(fig) {
+        wireReadout(fig, xs, (i) => `${buckets[i].n} work${buckets[i].n === 1 ? '' : 's'} · week of ${fmtDay(buckets[i].start)}`);
+      },
+    };
+  }
+
+  // Horizontal bars for the craft mix. Each row is its own table row already —
+  // label, bar, count — so it needs no twin; the count at the tip is the value.
+  function mixChart({ id, title, mix, footer }) {
+    const max = Math.max(1, ...mix.map((k) => k.n));
+    const rows = mix.map((k) => `<div class="pmix__row" role="listitem">
+        <span class="pmix__label">${esc(k.label)}</span>
+        <span class="pmix__track" aria-hidden="true"><span class="pmix__fill" style="width:${Math.round((k.n / max) * 100)}%"></span></span>
+        <span class="pmix__n">${fmtNum(k.n)}</span>
+      </div>`).join('');
+    return {
+      id,
+      html: `<figure class="pchart" id="${esc(id)}">
+        <figcaption class="pchart__title">${esc(title)}</figcaption>
+        <div class="pmix" role="list" aria-label="${esc(title)}">${rows || `<p class="pchart__foot">nothing in this window</p>`}</div>
+        <p class="pchart__foot">${esc(footer)}</p>
+      </figure>`,
+      wire() {},
+    };
+  }
+
+  // ---- data ------------------------------------------------------------------
+
+  // Every shipped row, first page to `total`, bounded. A 401 is the signed-out
+  // answer and comes back as such — the section says why, the way the activity
+  // ledgers do, rather than drawing three empty cards.
+  async function fetchAllShipped(api, API, builderId) {
+    const rows = [];
+    let total = Infinity;
+    while (rows.length < Math.min(total, MAX_ROWS)) {
+      const res = await api.request('GET', `${API}/builders/${encodeURIComponent(builderId)}/activity`
+        + `?section=tasks&limit=${PAGE}&offset=${rows.length}`);
+      if (res.status === 401) return { signedOut: true, rows: [] };
+      if (!res.ok) throw new Error(`activity → ${res.status}`);
+      const page = (res.data && res.data.rows) || [];
+      total = Number(res.data && res.data.total) || 0;
+      rows.push(...page);
+      if (!page.length) break;
+    }
+    return { signedOut: false, rows };
+  }
+
+  // The credits ledger, first page to `total`, bounded: /me/credits on your own
+  // profile, /builders/:id/credits on another's. The SERVER decides who may
+  // read another builder's ledger (builder.roster.read is a delegable atom, so
+  // no rank is hard-coded here): a refusal comes back as `denied` and the
+  // caller falls back to the estimate rather than the section failing. Any
+  // other failure reads the same way — a ledger the page could not read is
+  // still a ledger it must not pretend to have.
+  async function fetchLedger(api, API, builderId, isOwn) {
+    const base = isOwn
+      ? `${API}/me/credits`
+      : `${API}/builders/${encodeURIComponent(builderId)}/credits`;
+    const rows = [];
+    let total = Infinity;
+    try {
+      while (rows.length < Math.min(total, LEDGER_MAX_ROWS)) {
+        const res = await api.request('GET', `${base}?limit=${LEDGER_PAGE}&offset=${rows.length}`);
+        if (!res.ok) return { denied: true, rows: [] };
+        const page = (res.data && res.data.rows) || [];
+        total = Number(res.data && res.data.page && res.data.page.total) || 0;
+        rows.push(...page);
+        if (!page.length) break;
+      }
+    } catch (err) {
+      console.error('[profile] credits ledger failed', err);
+      return { denied: true, rows: [] };
+    }
+    return { denied: false, rows };
+  }
+
+  async function fetchOwnRate(api, API, builderId, days) {
+    try {
+      const q = days ? `?days=${encodeURIComponent(days)}` : '';
+      const res = await api.request('GET', `${API}/analytics/builder/${encodeURIComponent(builderId)}${q}`);
+      return res.ok ? res.data : null;
+    } catch (err) {
+      console.error('[profile] own ship rate failed', err);
+      return null;
+    }
+  }
+
+  // ---- render --------------------------------------------------------------------
+
+  function say(mount, html) {
+    mount.innerHTML = `<p class="pchart__note">${html}</p>`;
+  }
+
+  function rangeControlHtml(current) {
+    return `<div class="pchart-range" role="group" aria-label="Lookback window">
+      ${RANGES.map((r) => `<button type="button" class="pchart-range__btn${r.id === current ? ' is-active' : ''}" data-range="${esc(r.id)}" aria-pressed="${r.id === current}">${esc(r.label)}</button>`).join('')}
+    </div>`;
+  }
+
+  // Draw every figure for one lookback window into #charts-grid. Split from
+  // render() so the range buttons can re-draw without re-fetching the record.
+  async function draw({ api, API, builderId, isOwn, rows, paidFull, estimated, now, rangeId }) {
+    const grid = $('#charts-grid');
+    if (!grid) return;
+    const range = RANGES.find((r) => r.id === rangeId) || RANGES[RANGES.length - 1];
+    const windowStart = range.days == null ? null : midnight(now) - range.days * DAY + DAY;
+    const inWindow = windowStart == null ? rows : rows.filter((r) => { const t = Date.parse(r.shipped_at); return Number.isFinite(t) && t >= windowStart; });
+    const span = range.days == null ? 'all time' : `the last ${range.label}`;
+
+    const worksFull = cumulativeByDay(rows, () => 1);
+    const works = clipToWindow(worksFull, windowStart);
+    const paid = clipToWindow(paidFull, windowStart);
+    const mix = craftMix(inWindow);
+
+    const figs = [
+      timeChart({
+        id: 'chart-works', title: 'Works shipped', points: works, now, windowStart,
+        valueText: (v) => `${fmtNum(v)} work${v === 1 ? '' : 's'}`,
+        footer: `${fmtNum(worksFull.length ? worksFull[worksFull.length - 1].value : 0)} total · ${span}`,
+      }),
+      timeChart({
+        id: 'chart-drachmae', title: `${curLabel(true)} earned`, points: paid, now, windowStart,
+        valueText: (v) => `${fmtNum(v)} ${curLabel()}`,
+        footer: estimated
+          ? `estimated from shipped work, not the ledger · ${span}`
+          : `${fmtNum(paidFull.length ? paidFull[paidFull.length - 1].value : 0)} paid, from the credits ledger · ${span}`,
+      }),
+      mixChart({
+        id: 'chart-mix', title: 'Works by craft', mix,
+        footer: `${fmtNum(inWindow.length)} work${inWindow.length === 1 ? '' : 's'} · ${span}`,
+      }),
+    ];
+    if (isOwn) {
+      const paceDays = Math.min(range.days || PACE_MAX_DAYS, PACE_MAX_DAYS);
+      const own = await fetchOwnRate(api, API, builderId, paceDays);
+      if (own && Array.isArray(own.ship_rate)) {
+        const days = Number(own.window_days) || paceDays;
+        const buckets = weeklyBuckets(own.ship_rate, days, now);
+        const total = buckets.reduce((s, b) => s + b.n, 0);
+        figs.push(columnChart({
+          id: 'chart-rate', title: 'Your pace, by week', buckets,
+          footer: `${fmtNum(total)} in the last ${days} days · only you see this one`,
+        }));
+      }
+    }
+    grid.innerHTML = figs.map((f) => f.html).join('');
+    figs.forEach((f) => { const el = grid.querySelector(`#${f.id}`); if (el) f.wire(el); });
+  }
+
+  async function render({ api, API, builderId, selfId, signedIn, now = Date.now() }) {
+    const mount = $('#charts-grid');
+    const controls = $('#charts-controls');
+    if (!mount) return;
+    if (controls) controls.innerHTML = '';
+    const isOwn = selfId != null && String(selfId) === String(builderId);
+    if (!signedIn) {
+      say(mount, `Charts of shipped work are visible to signed-in builders — <a href="${esc(API)}/auth/web/start">sign in</a> to see them.`);
+      return;
+    }
+    let got;
+    try {
+      got = await fetchAllShipped(api, API, builderId);
+    } catch (err) {
+      console.error('[profile] charts failed', err);
+      say(mount, 'Could not load the charts.');
+      return;
+    }
+    if (got.signedOut) {
+      say(mount, `Charts of shipped work are visible to signed-in builders — <a href="${esc(API)}/auth/web/start">sign in</a> to see them.`);
+      return;
+    }
+    const rows = got.rows;
+    if (!rows.length) {
+      say(mount, 'No works shipped yet — the charts draw once the first one lands.');
+      return;
+    }
+
+    // The drachmae series: the ledger wherever the viewer may read it, the
+    // estimate (labelled) where the server refuses. Fetched once, like the
+    // record; the lookback only clips it.
+    const ledger = await fetchLedger(api, API, builderId, isOwn);
+    const estimated = ledger.denied;
+    const paidFull = estimated
+      ? cumulativeByDay(rows, estimateOf)
+      : cumulativeByDay(ledger.rows, (r) => r && r.delta, (r) => r && r.recorded_at);
+
+    // The lookback control. Its choice is remembered per viewer; changing it
+    // re-draws from the rows already in hand — the record is not re-fetched.
+    let rangeId = readRange();
+    if (controls) {
+      controls.innerHTML = rangeControlHtml(rangeId);
+      controls.addEventListener('click', (e) => {
+        const btn = e.target.closest('[data-range]');
+        if (!btn || btn.dataset.range === rangeId) return;
+        rangeId = btn.dataset.range;
+        writeRange(rangeId);
+        controls.querySelectorAll('[data-range]').forEach((b) => {
+          const on = b.dataset.range === rangeId;
+          b.classList.toggle('is-active', on);
+          b.setAttribute('aria-pressed', String(on));
+        });
+        draw({ api, API, builderId, isOwn, rows, paidFull, estimated, now, rangeId });
+      });
+    }
+    await draw({ api, API, builderId, isOwn, rows, paidFull, estimated, now, rangeId });
+  }
+
+  window.OTBProfileCharts = { render, cumulativeByDay, craftMix, weeklyBuckets, estimateOf, clipToWindow };
+})();

package/modules/hall-ui/public/profile.css

@@ -1,7 +1,8 @@
 /* profile.css — what the builder's profile page has and the rest of the panel
    family does not (task 1003308, goal 1000081; the archetype is panel.css). The
    page everyone else reads: the identity band, the figures, the shelf, the
-   ledgers. The figures are the shell's glass band (.stat-row) and the ledgers
+   ledgers — and since task 1003489 the section rail that makes it three
+   screens, and the charts on the first of them. The figures are the shell's glass band (.stat-row) and the ledgers
    the shell's .ledger; this sheet owns the identity band and the shelf, both
    drawn from docs/design/mocks/hall/settings/v3.html (the profile half).
 
@@ -67,6 +68,8 @@
    the negative margin hands both back so the cell does not re-space. */
 #works-scroll .ledger td a,
 #activity-scroll .ledger td a,
+#charts-scroll a,
+#works-scroll .scroll__lede a,
 #xp-scroll a {
   display: inline-block;
   min-width: 24px;
@@ -83,3 +86,89 @@
   .profile--ident .profile__avatar { width: 48px; height: 48px; }
   .profile--ident .profile__credits { grid-column: 2; align-items: flex-start; text-align: left; }
 }
+
+/* ---- the rail and the groups (task 1003489) ---------------------------------
+   The settings idiom, borrowed whole: a left rail in switch mode and ONE group
+   of sections showing at a time, so each key is a screen and the window stays
+   the only scroller. The rail itself (.section-rail / .rail-link) is the
+   shell's; this sheet widens its column to settings' and lists the keys. A
+   section's own [hidden] still wins — the cross-project and connections reveal
+   logic is untouched. */
+.profile-layout {
+  display: grid;
+  grid-template-columns: 206px minmax(0, 1fr);
+  gap: 30px;
+  align-items: start;
+}
+.profile-layout[hidden] { display: none !important; }
+.profile-groups > [data-group] { display: none; }
+.profile-groups[data-active="overview"] > [data-group="overview"],
+.profile-groups[data-active="works"] > [data-group="works"],
+.profile-groups[data-active="activity"] > [data-group="activity"],
+.profile-groups[data-active="connections"] > [data-group="connections"] { display: block; }
+.profile-groups > [data-group][hidden] { display: none !important; }
+.profile-groups .scroll { margin: 0 0 var(--sp-sm); }
+#profile-rail .rail-link { min-height: 38px; padding: 0 14px; font-size: 14.5px; text-transform: none; border-radius: var(--radius-pill); }
+#profile-rail .rail-link--active::before { left: 0; top: 7px; bottom: 7px; }
+@media (max-width: 860px) {
+  .profile-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
+}
+
+/* ---- the charts ---------------------------------------------------------------
+   Four figures on the Overview, each a card one tonal step down from the panel
+   (glass on the card, like settings' quote), the series in the accent and every
+   word in ink. The SVG scales with its card; the axis band is inside the
+   viewBox, so the card grows with its content and never scrolls. */
+.pcharts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sp-sm);
+}
+.pchart {
+  margin: 0;
+  padding: var(--sp-xs) var(--sp-sm) var(--sp-xs);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-sm);
+  min-width: 0;
+}
+.pchart__title { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
+.pchart__read { margin: 2px 0 var(--sp-hair); font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); min-height: 1.4em; }
+.pchart__svg { display: block; width: 100%; height: auto; overflow: visible; border-radius: var(--radius-sm); }
+.pchart__svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.pchart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.pchart__area { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: none; }
+.pchart__axis, .pchart__hair { stroke: var(--rule-soft); stroke-width: 1; }
+.pchart__hair { stroke: var(--ink-faint); }
+.pchart__dot { fill: var(--accent); stroke: var(--bg-card); stroke-width: 2; }
+.pchart__col { fill: var(--accent); }
+.pchart__col--empty { fill: var(--rule-soft); }
+.pchart__end { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; fill: var(--ink); }
+.pchart__tick { font-family: var(--label-face); font-size: 10px; letter-spacing: var(--label-space); text-transform: var(--label-case); fill: var(--ink-faint); }
+.pchart__twin { margin-top: var(--sp-hair); }
+.pchart__twin > summary { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px; margin: 0 -4px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm); }
+.pchart__twin > summary:hover { color: var(--ink); background: var(--glass-strong); }
+.pchart__table { margin-top: var(--sp-hair); font-size: 12.5px; }
+.pchart__table td, .pchart__table th { padding: 3px 6px; }
+.pchart__foot { margin: var(--sp-hair) 0 0; font-size: 12px; color: var(--ink-faint); }
+.pchart__note { margin: 0; font-size: 14px; color: var(--ink-soft); }
+/* the craft mix: label, bar, count — a row is its own table row */
+.pmix { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-hair) 0; }
+.pmix__row { display: grid; grid-template-columns: minmax(72px, 110px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; min-height: 24px; }
+.pmix__label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pmix__track { display: block; height: 8px; background: var(--rule-soft); border-radius: 0 4px 4px 0; overflow: hidden; }
+.pmix__fill { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
+.pmix__row:hover .pmix__fill { opacity: .8; }
+.pmix__n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+@media (max-width: 720px) {
+  .pcharts { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* the lookback control (task 1003489, owner request) — one segmented row above
+   the grid, scoping every chart. The pressed side takes the accent TINT the
+   world gives a current thing, never the accent fill. */
+.pchart-range { display: inline-flex; gap: 0; border: var(--line) solid var(--glass-edge); border-radius: var(--radius-pill); overflow: hidden; margin: 0 0 var(--sp-sm); }
+.pchart-range__btn { border: none; background: transparent; color: var(--ink-soft); font-family: var(--font-body); font-size: 12.5px; font-weight: 500; padding: 5px 14px; min-height: 24px; cursor: pointer; }
+.pchart-range__btn + .pchart-range__btn { border-left: var(--line) solid var(--glass-edge); }
+.pchart-range__btn:hover { color: var(--ink); background: var(--glass); }
+.pchart-range__btn.is-active { background: var(--accent-tint); color: var(--accent-ink); }