@bongos/core 1.20.80 → 1.20.82

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

@@ -16,29 +16,30 @@
 // 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.
+// The EARNINGS figure (task 1004436, WA6.RP06) is GET /builders/:id/earnings:
+// what the ledger paid this builder, summed per day and per KIND of credit
+// (modules/economy/earnings.js owns the kinds). Any signed-in viewer, any
+// builder, own profile included — the owner's decision (a). It draws for
+// EVERYONE with credits, a shipped task or not: an artist is paid per approved
+// page and an ideator per idea stream, and this chart used to stop at "No works
+// shipped yet" before it read a credit (it once read the itemised ledger, which
+// another builder's viewer may read only with builder.roster.read, and fell back
+// to an estimate summed from shipped tasks — nothing, for those two crafts). The
+// line is the days cumulated, ending at the balance; "where it came from" is the
+// kinds in the lookback window. The works charts still need a shipped task and
+// say so on their own. 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.
+// signedIn, name?, now? }) plus the pure series builders (cumulativeByDay,
+// craftMix, weeklyBuckets, clipToWindow, earningsKinds, earningsLede) 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
@@ -60,6 +61,18 @@
   // a second copy of this number silently mis-aims the crosshair the day the
   // kit's plot changes size. Its height and padding are the kit's alone now.
   const W = window.OTBKit.plotBox().width;
+  // The earnings plot sits in 1.5fr of a full-width figure, about half again a
+  // grid card's width, so its viewBox is that much wider (and a touch taller)
+  // to keep its type the size of the cards' type rather than scaling up. On a
+  // phone the figure stacks (profile.css, 720px) and the plot is a card's width
+  // again, so it takes the kit's own box — read at draw time, as the grid is.
+  const EARN_BOX_WIDE = { width: Math.round(W * 1.5), height: Math.round(window.OTBKit.plotBox().height * 1.2) };
+  function earnBox() {
+    try {
+      if (window.matchMedia && window.matchMedia('(max-width: 720px)').matches) return {};
+    } catch (_) { /* no media queries: the wide box */ }
+    return EARN_BOX_WIDE;
+  }
 
   const esc = (s) => window.OTB.escapeHtml(s);
   const $ = (sel) => window.OTB.$(sel);
@@ -84,15 +97,64 @@
 
   // ---- 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;
+  // The words for each kind of credit, the approved mock's (RP01). The KEYS are
+  // economy's (modules/economy/earnings.js KINDS); a key this table does not
+  // know reads as "Other credits" rather than vanishing from the sum.
+  const KIND_WORDS = {
+    task: 'Tasks shipped',
+    session: 'Session rewards',
+    page: 'Pages approved',
+    'idea-ship': 'Ideas that became shipped work',
+    'idea-descent': 'Work split from their ideas',
+    'idea-full': 'Full Ideas passed',
+    'idea-board': 'Ratified by the board',
+    'net-negative': 'Simplification bonuses',
+    other: 'Other credits',
+  };
+  // The same kinds in a word or two, for the sentence above the figure. The four
+  // idea streams are one source there: "ideas".
+  const KIND_SOURCE = {
+    task: 'shipped tasks',
+    session: 'sessions',
+    page: 'approved pages',
+    'idea-ship': 'ideas',
+    'idea-descent': 'ideas',
+    'idea-full': 'ideas',
+    'idea-board': 'ideas',
+    'net-negative': 'simplification bonuses',
+    other: 'other credits',
+  };
+
+  // earnings days → [{ kind, label, credits }] for "where it came from": summed
+  // per kind, largest first, only the kinds that earned something. Ties keep
+  // the KIND_WORDS order, so the list does not reshuffle between draws.
+  function earningsKinds(days) {
+    const sums = new Map();
+    for (const d of days || []) {
+      const k = Object.prototype.hasOwnProperty.call(KIND_WORDS, d && d.kind) ? d.kind : 'other';
+      sums.set(k, (sums.get(k) || 0) + (Number(d && d.credits) || 0));
+    }
+    const order = Object.keys(KIND_WORDS);
+    return [...sums.entries()]
+      .filter(([, v]) => v !== 0)
+      .sort((a, b) => b[1] - a[1] || order.indexOf(a[0]) - order.indexOf(b[0]))
+      .map(([kind, credits]) => ({ kind, label: KIND_WORDS[kind], credits }));
+  }
+
+  // The one sentence under the figure's title. Someone who never shipped a task
+  // is told so first, because that is exactly who this chart used to leave out,
+  // and then where their credits did come from, largest source first.
+  function earningsLede({ name, isOwn, shipped, kinds }) {
+    const who = isOwn ? 'you' : (name || 'this builder');
+    const Who = who.charAt(0).toUpperCase() + who.slice(1);
+    if (!shipped) {
+      const never = `${Who} ${isOwn ? 'have' : 'has'} never shipped a task.`;
+      const sources = [...new Set(kinds.filter((k) => k.credits > 0).map((k) => KIND_SOURCE[k.kind] || KIND_SOURCE.other))];
+      if (!sources.length) return never;
+      const list = sources.length === 1 ? sources[0] : `${sources.slice(0, -1).join(', ')} and ${sources[sources.length - 1]}`;
+      return `${never} Every credit here came from ${list}.`;
+    }
+    return `Every credit ${who} ${isOwn ? 'have' : 'has'} earned, by the kind of work that earned it.`;
   }
 
   // rows → [{ day, value }] ascending by day, value cumulative over the WHOLE
@@ -163,7 +225,7 @@
   // 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) {
+  function wireReadout(fig, xs, textAt, width = W) {
     const svg = fig.querySelector('svg');
     const read = fig.querySelector('.pchart__read');
     const hair = fig.querySelector('.kit-plot__hair');
@@ -185,7 +247,7 @@
     svg.addEventListener('pointermove', (e) => {
       const r = svg.getBoundingClientRect();
       if (!r.width) return;
-      const fx = ((e.clientX - r.left) / r.width) * W;
+      const fx = ((e.clientX - r.left) / r.width) * width;
       let best = 0;
       xs.forEach((x, i) => { if (Math.abs(x - fx) < Math.abs(xs[best] - fx)) best = i; });
       show(best);
@@ -214,15 +276,21 @@
   // 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 }) {
+  // `bare` returns the plot and its readout, twin and foot WITHOUT the figure
+  // and caption around them, for a figure that composes more than one plot's
+  // worth (the earnings figure sets its kinds beside this). `box` is the kit's
+  // plot size ({ width, height }) for a plot drawn wider than a grid card, so
+  // its type keeps the cards' size instead of scaling up with the column.
+  function timeChart({ id, title, points, valueText, footer, now, windowStart, bare = false, box = {} }) {
     // 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) {
+      const foot = `<p class="pchart__foot">nothing recorded yet · ${esc(footer)}</p>`;
       return {
         id,
-        html: `<figure class="pchart" id="${esc(id)}">
+        html: bare ? foot : `<figure class="pchart" id="${esc(id)}">
       <figcaption class="pchart__title">${esc(title)}</figcaption>
-      <p class="pchart__foot">nothing recorded yet · ${esc(footer)}</p>
+      ${foot}
     </figure>`,
         wire() {},
       };
@@ -235,14 +303,13 @@
     const last = points[points.length - 1];
     const series = window.OTBKit.timeStepSeriesHtml(
       points.map((p) => ({ x: p.day, value: p.value })),
-      { x0, x1, yMax: last.value },
+      { x0, x1, yMax: last.value, ...box },
     );
     const { endX, endY } = series.geometry;
     const xs = series.xs;
-    const html = `<figure class="pchart" id="${esc(id)}">
-      <figcaption class="pchart__title">${esc(title)}</figcaption>
-      <p class="pchart__read" aria-live="polite"></p>
+    const inner = `<p class="pchart__read" aria-live="polite"></p>
       ${window.OTBKit.plotSvgHtml({
+    ...box,
     series: series.body,
     ariaLabel: `${title}: ${valueText(last.value)} as of today; arrow keys walk the days`,
     label: window.OTBKit.plotValueLabelHtml(endX, endY - 8, valueText(last.value), 'end'),
@@ -250,13 +317,16 @@
     rightTick: 'today',
   })}
       ${twinHtml(['Day', title], points.map((p) => [fmtDay(p.day), valueText(p.value)]))}
-      <p class="pchart__foot">${esc(footer)}</p>
+      <p class="pchart__foot">${esc(footer)}</p>`;
+    const html = bare ? inner : `<figure class="pchart" id="${esc(id)}">
+      <figcaption class="pchart__title">${esc(title)}</figcaption>
+      ${inner}
     </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)}`);
+        wireReadout(fig, xs, (i) => `${valueText(points[i].value)} · ${i === points.length - 1 ? 'as of today' : fmtDay(points[i].day)}`, box.width || W);
       },
     };
   }
@@ -363,6 +433,40 @@
     };
   }
 
+  // The earnings figure (task 1004436): the approved mock's "Earnings over
+  // time" — a cumulative step line beside "where it came from", the kinds of
+  // credit as bars, one sentence above both. It spans the grid, because it is
+  // the one figure every builder has. The kinds read the lookback window, as
+  // every other figure does; a window that earned nothing says so.
+  function earningsChart({ id, points, kinds, lede, footer, now, windowStart }) {
+    const title = `${curLabel(true)} earned`;
+    const plot = timeChart({
+      id, title, points, now, windowStart, bare: true, box: earnBox(),
+      valueText: (v) => `${fmtNum(v)} ${curLabel()}`,
+      footer,
+    });
+    const max = kinds.reduce((s, k) => s + Math.max(0, k.credits), 0);
+    const bars = window.OTBKit.barSeriesHtml(
+      kinds.map((k) => ({ label: k.label, value: Math.max(0, k.credits), valueLabel: fmtNum(k.credits) })),
+      { max, pill: true, track: 'soft', barHeight: '4px', list: true, ariaLabel: `Where the ${curLabel()} came from` },
+    );
+    return {
+      id,
+      html: `<figure class="pchart pchart--wide pearn" id="${esc(id)}">
+      <figcaption class="pchart__title">Earnings over time</figcaption>
+      <p class="pearn__lede">${esc(lede)}</p>
+      <div class="pearn__grid">
+        <div class="pearn__plot">${plot.html}</div>
+        <div class="pearn__kinds">
+          <h3 class="pearn__h">where it came from</h3>
+          ${bars || '<p class="pchart__foot">nothing earned in this window</p>'}
+        </div>
+      </div>
+    </figure>`,
+      wire: plot.wire,
+    };
+  }
+
   // ---- data ------------------------------------------------------------------
 
   // Every shipped row, first page to `total`, bounded. A 401 is the signed-out
@@ -384,33 +488,21 @@
     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;
+  // What this builder earned, per day and kind, in ONE read — the same route on
+  // your own profile and on anyone else's. A 401 is the signed-out answer; any
+  // other failure is `failed`, and the figure says it could not load rather
+  // than drawing a zero it never read.
+  async function fetchEarnings(api, API, builderId) {
     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;
-      }
+      const res = await api.request('GET', `${API}/builders/${encodeURIComponent(builderId)}/earnings`);
+      if (res.status === 401) return { signedOut: true, days: [] };
+      if (!res.ok) return { failed: true, days: [] };
+      const days = (res.data && Array.isArray(res.data.days)) ? res.data.days : [];
+      return { days };
     } catch (err) {
-      console.error('[profile] credits ledger failed', err);
-      return { denied: true, rows: [] };
+      console.error('[profile] earnings failed', err);
+      return { failed: true, days: [] };
     }
-    return { denied: false, rows };
   }
 
   async function fetchOwnRate(api, API, builderId, days) {
@@ -438,7 +530,7 @@
 
   // 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, selfStreak }) {
+  async function draw({ api, API, builderId, isOwn, name, rows, earnings, now, rangeId, selfStreak }) {
     const grid = $('#charts-grid');
     if (!grid) return;
     const range = RANGES.find((r) => r.id === rangeId) || RANGES[RANGES.length - 1];
@@ -446,36 +538,48 @@
     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 ${window.OTB.roleAxisLabel().toLowerCase()}`, mix,
-        footer: `${fmtNum(inWindow.length)} work${inWindow.length === 1 ? '' : 's'} · ${span}`,
-      }),
-    ];
+    // The earnings figure leads and always draws; the works figures need a
+    // shipped task, and without one they are one line saying so, not two empty
+    // cards. The earnings ARE the reading for an artist or an ideator.
+    const figs = [];
+    if (earnings.failed) {
+      figs.push({ id: 'chart-drachmae', html: `<figure class="pchart pchart--wide" id="chart-drachmae"><figcaption class="pchart__title">Earnings over time</figcaption><p class="pchart__foot">Could not load the earnings.</p></figure>`, wire() {} });
+    } else {
+      const paidFull = cumulativeByDay(earnings.days, (d) => d && d.credits, (d) => d && `${d.day}T00:00:00Z`);
+      const daysIn = windowStart == null ? earnings.days : earnings.days.filter((d) => Date.parse(`${d.day}T00:00:00Z`) >= windowStart);
+      const kinds = earningsKinds(daysIn);
+      const balance = paidFull.length ? paidFull[paidFull.length - 1].value : 0;
+      figs.push(earningsChart({
+        id: 'chart-drachmae', now, windowStart,
+        points: clipToWindow(paidFull, windowStart),
+        kinds,
+        lede: earningsLede({ name, isOwn, shipped: rows.length > 0, kinds: earningsKinds(earnings.days) }),
+        footer: `${fmtNum(balance)} ${curLabel()} in all · ${span} · the line holds flat on days with nothing earned`,
+      }));
+    }
+    if (rows.length) {
+      const worksFull = cumulativeByDay(rows, () => 1);
+      figs.push(
+        timeChart({
+          id: 'chart-works', title: 'Works shipped', points: clipToWindow(worksFull, windowStart), now, windowStart,
+          valueText: (v) => `${fmtNum(v)} work${v === 1 ? '' : 's'}`,
+          footer: `${fmtNum(worksFull[worksFull.length - 1].value)} total · ${span}`,
+        }),
+        mixChart({
+          id: 'chart-mix', title: `Works by ${window.OTB.roleAxisLabel().toLowerCase()}`, mix: craftMix(inWindow),
+          footer: `${fmtNum(inWindow.length)} work${inWindow.length === 1 ? '' : 's'} · ${span}`,
+        }),
+      );
+    } else {
+      figs.push({ id: 'chart-works-none', html: `<p class="pchart__note pcharts__wide" id="chart-works-none">No works shipped yet — the works charts draw once the first one lands.</p>`, wire() {} });
+    }
     if (isOwn && selfStreak) {
       // The calendar leads the viewer's own overview — the year-at-a-glance the goal's
       // thesis is about. Null (no qualifying ships yet) → simply not shown.
       const cal = calendarChart({ id: 'chart-calendar', streak: selfStreak });
       if (cal) figs.unshift(cal);
     }
-    if (isOwn) {
+    if (isOwn && rows.length) {
       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)) {
@@ -492,43 +596,41 @@
     figs.forEach((f) => { const el = grid.querySelector(`#${f.id}`); if (el) f.wire(el); });
   }
 
-  async function render({ api, API, builderId, selfId, signedIn, selfStreak = null, now = Date.now() }) {
+  async function render({ api, API, builderId, selfId, signedIn, name = null, selfStreak = null, 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);
+    const signIn = `Earnings and shipped work are visible to signed-in builders — <a href="${esc(API)}/auth/web/start">sign in</a> to see them.`;
     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.`);
+      say(mount, signIn);
       return;
     }
+    // The record and the earnings, read once and together; the lookback only
+    // clips them.
     let got;
+    let earnings;
     try {
-      got = await fetchAllShipped(api, API, builderId);
+      [got, earnings] = await Promise.all([
+        fetchAllShipped(api, API, builderId),
+        fetchEarnings(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.`);
+    if (got.signedOut || earnings.signedOut) {
+      say(mount, signIn);
       return;
     }
     const rows = got.rows;
-    if (!rows.length) {
-      say(mount, 'No works shipped yet — the charts draw once the first one lands.');
+    if (!rows.length && !earnings.failed && !earnings.days.length) {
+      say(mount, 'Nothing earned or shipped yet — the charts draw once the first credit 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();
@@ -544,11 +646,11 @@
           b.classList.toggle('is-active', on);
           b.setAttribute('aria-pressed', String(on));
         });
-        draw({ api, API, builderId, isOwn, rows, paidFull, estimated, now, rangeId, selfStreak });
+        draw({ api, API, builderId, isOwn, name, rows, earnings, now, rangeId, selfStreak });
       });
     }
-    await draw({ api, API, builderId, isOwn, rows, paidFull, estimated, now, rangeId, selfStreak });
+    await draw({ api, API, builderId, isOwn, name, rows, earnings, now, rangeId, selfStreak });
   }
 
-  window.OTBProfileCharts = { render, cumulativeByDay, craftMix, weeklyBuckets, estimateOf, clipToWindow };
+  window.OTBProfileCharts = { render, cumulativeByDay, craftMix, weeklyBuckets, clipToWindow, earningsKinds, earningsLede };
 })();

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

@@ -194,6 +194,29 @@
 .pchart-range__btn:hover { color: var(--ink); background: var(--glass); }
 .pchart-range__btn.is-active { background: var(--accent-tint); color: var(--accent-ink); }
 
+/* the earnings figure (task 1004436) — the approved mock's "Earnings over time":
+   the kit's step line beside "where it came from", one sentence above both. It
+   spans the grid, because it is the one figure every builder has. The kinds are
+   the kit's bars in the surfaces row (name and number on one line, a 4px bar
+   under them) and in INK, stepped by rank, as the mock draws them: the accent
+   belongs to the line, and a second accent beside it would read as a second
+   series. */
+.pchart--wide, .pcharts__wide { grid-column: 1 / -1; }
+.pearn__lede { margin: 2px 0 var(--sp-sm); max-width: var(--measure); font-size: 14px; color: var(--ink-soft); }
+.pearn__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-md); align-items: start; }
+.pearn__h { margin: 0 0 12px; font-family: var(--label-face); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.pearn__kinds .kit-bars { gap: 12px; margin: 0; }
+.pearn__kinds .kit-bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 7px; column-gap: 10px; }
+.pearn__kinds .kit-bars__label { grid-column: 1; grid-row: 1; font-size: 13.5px; color: var(--ink); }
+.pearn__kinds .kit-bars__val { grid-column: 2; grid-row: 1; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
+.pearn__kinds .kit-bars__track { grid-column: 1 / -1; grid-row: 2; }
+.pearn__kinds .kit-bars__row .kit-bars__fill { background: color-mix(in srgb, var(--ink) 38%, var(--bg-card)); }
+.pearn__kinds .kit-bars__row:nth-child(1) .kit-bars__fill { background: var(--ink); }
+.pearn__kinds .kit-bars__row:nth-child(2) .kit-bars__fill { background: color-mix(in srgb, var(--ink) 62%, var(--bg-card)); }
+@media (max-width: 720px) {
+  .pearn__grid { grid-template-columns: minmax(0, 1fr); }
+}
+
 /* ---- the ideator's trail (task 1004435) ------------------------------------
    The room's public trail, on this page's own ground: the sky's five marks by
    the day each thought was filed (the approved mock's .trail and .m-*). Size is

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

@@ -915,10 +915,10 @@
     renderHead(builder, view);
     renderFoundingMark(builder);
     renderNumbers(view);
-    // The charts (task 1003489) read the activity route and the credits ledger
-    // (task 1003491), so they need the same session the ledgers do; on the
+    // The charts (task 1003489) read the activity route and the earnings by
+    // kind (task 1004436), so they need the same session the ledgers do; on the
     // viewer's own profile they add the pace.
-    if (window.OTBProfileCharts) window.OTBProfileCharts.render({ api, API, builderId: builder.id, selfId, signedIn: selfId != null, selfStreak: (selfMe && selfMe.streak) || null });
+    if (window.OTBProfileCharts) window.OTBProfileCharts.render({ api, API, builderId: builder.id, selfId, signedIn: selfId != null, name: builder.display_name || builder.github_login || null, selfStreak: (selfMe && selfMe.streak) || null });
     renderCrossProject(data, selfId);
     renderAchievements(data.achievements);
     buildWorksLedger(builder.id, selfId != null, data.recent_ships);

package/modules/hall-ui/public/profile.states.json

@@ -125,7 +125,7 @@
       }
     },
     "artist": {
-      "_": "An artist who has never shipped a task (task 1004434): the header and By the numbers lead with pages approved and the per-surface N of M tweaked. Fixture builders__2001__profile.",
+      "_": "An artist who has never shipped a task (task 1004434): the header and By the numbers lead with pages approved and the per-surface N of M tweaked. Fixture builders__2001__profile. Since task 1004436 the earnings figure draws for them too, from builders__2001__earnings beside an empty builders__2001__activity.",
       "auth": true,
       "url": "/profile?id=2001",
       "actions": [
@@ -138,12 +138,14 @@
         "visible": [
           "#profile-head",
           ".profile__tally",
-          ".profile-nums"
+          ".profile-nums",
+          "#chart-drachmae",
+          ".pearn__kinds"
         ]
       }
     },
     "ideator": {
-      "_": "An ideator who has never shipped a task (task 1004434): thoughts filed, ignited, Full Ideas, total size with its historical-estimate mark, and what is still alive. Fixture builders__2002__profile.",
+      "_": "An ideator who has never shipped a task (task 1004434): thoughts filed, ignited, Full Ideas, total size with its historical-estimate mark, and what is still alive. Fixture builders__2002__profile. Since task 1004436 the earnings figure draws for them too, every credit from an idea stream, from builders__2002__earnings beside an empty builders__2002__activity.",
       "auth": true,
       "url": "/profile?id=2002",
       "actions": [
@@ -156,7 +158,9 @@
         "visible": [
           "#profile-head",
           ".profile__tally",
-          ".profile-nums"
+          ".profile-nums",
+          "#chart-drachmae",
+          ".pearn__kinds"
         ]
       }
     },