@bongos/core 1.20.77 → 1.20.78

package/modules/copy-desk/routes/copy-desk-artist.js

@@ -0,0 +1,44 @@
+// modules/copy-desk/routes/copy-desk-artist.js — one artist's approved pages,
+// for the profile's Artist tab (task 1004435 / WA6.RP05, goal 1000095).
+//
+// GET /copy-desk/artists/:id/pages?limit=&offset= → { rows, total, page }
+//
+// Each row is a round of theirs that shipped: the page, its surface, the day it
+// landed, the changed-line count and the first changed line before and after.
+// Apart from routes/copy-desk.js because that file sits at the 1,500-line
+// ratchet (the artist-stats.js precedent).
+//
+// SIGNED IN. The owner's decision (a), 2026-09-30: "no one should be able to
+// open up the hood of data without being signed in." The counts stay public on
+// the profile route; the pages and their words are a builder's read.
+
+'use strict';
+
+const express = require('express');
+const api = require('../../../src/module-api');
+const { readArtistPages } = require('../artist-stats');
+
+const log = api.logger('copy-desk');
+
+module.exports = function buildCopyDeskArtistRouter() {
+  const router = express.Router();
+
+  // rank: builder — any signed-in builder may read any artist's approved pages,
+  // as the profile's other Activity tabs are; a stranger gets the sign-in line.
+  router.get('/copy-desk/artists/:id/pages', api.requireBuilder, async (req, res) => {
+    try {
+      const id = String(req.params.id || '');
+      if (!/^[1-9]\d{0,18}$/.test(id)) return res.fail('invalid_builder_id', 400);
+      const { limit, offset } = api.parsePagination(req, { defaultLimit: 10, maxLimit: 50 });
+      const out = await readArtistPages(id, { limit, offset });
+      if (!out) return res.fail('page_reads_unavailable', 503);
+      res.set('Cache-Control', 'no-store');
+      res.json({ rows: out.rows, total: out.total, inventory_known: out.inventory_known, page: api.pageMeta(limit, offset) });
+    } catch (err) {
+      log.error({ err }, 'GET /copy-desk/artists/:id/pages failed');
+      if (!res.headersSent) res.fail('artist_pages_failed', 500);
+    }
+  });
+
+  return router;
+};

package/modules/copy-desk/tests/copy_no_cms.mjs

@@ -67,12 +67,21 @@ const stripComments = (src) => src
 // inventory and readings). They are held to the same two rules as the rest.
 // TW09 (task 1004320) added docx.js, the Word round trip over Buffers.
 // TW12 (task 1004323) added page-decisions.js, the Approval queue's route helpers.
-const MODULE_FILES = ['registry.js', 'flags.js', 'proposals.js', 'pages.js', 'page-status.js', 'page-data.js', 'docx.js', 'page-decisions.js', 'routes/copy-desk.js'];
+// Task 1004435 added routes/copy-desk-artist.js (one artist's approved pages, a
+// read) and artist-stats.js's readArtistPages under it.
+const ROUTE_FILES = fs.readdirSync(path.join(MODULE_DIR, 'routes')).filter((f) => f.endsWith('.js')).sort().map((f) => `routes/${f}`);
+const MODULE_FILES = ['registry.js', 'flags.js', 'proposals.js', 'pages.js', 'page-status.js', 'page-data.js', 'docx.js', 'page-decisions.js', 'artist-stats.js', ...ROUTE_FILES];
 
 console.log('copy-desk: NO LIVE CMS');
 
+await test('the route files are exactly the two the module declares', () => {
+  assert.deepEqual(ROUTE_FILES, ['routes/copy-desk-artist.js', 'routes/copy-desk.js'],
+    'a new route file is a new place a write could hide: add it here, and to the write-surface scan below');
+});
+
 await test('the write surface is exactly the verbs the module defines', () => {
-  const src = stripComments(read('routes/copy-desk.js'));
+  // EVERY route file, so a write cannot hide in a second router.
+  const src = ROUTE_FILES.map((f) => stripComments(read(f))).join('\n');
   const found = [...src.matchAll(/router\.(post|put|patch|delete)\(\s*'([^']+)'/g)]
     .map((m) => `${m[1].toUpperCase()} ${m[2]}`)
     .sort();

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

@@ -7,7 +7,7 @@
   "ignoreRequests": ["/api/(gds|bongos)/"],
   "ignoreConsole": ["/api/(gds|bongos)/", "\\b401\\b", "\\b403\\b", "\\b404\\b", "Unauthorized", "Forbidden", "Not Found", "load failed"],
   "states": {
-    "work": { "auth": true, "actions": [["wait", 1200]], "expect": { "visible": ["#dp-body"] } },
+    "work": { "auth": true, "actions": [["wait", 1200]], "expect": { "visible": ["#dp-body", "#nr-work", "#nr-work [data-upgrades]", "#nr-versions"] } },
     "out": { "auth": false, "actions": [["wait", 600]] }
   },
   "reducedMotion": { "auth": true, "actions": [["wait", 1200]] }

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

@@ -0,0 +1,231 @@
+// modules/hall-ui/public/profile-crafts.js — what the profile's Ideator and
+// Artist tabs draw (task 1004435 / WA6.RP05, goal 1000095, criterion
+// wa6-roles-read-true-in-public).
+//
+// WHY. The Ideator tab listed tasks whose discipline happened to be 'ideator',
+// as if an ideator's record were engineering work; the Artist tab listed only
+// artist-labelled tasks the person had shipped themselves. Neither is that
+// craft's record. The owner-approved mock (docs/design/mocks/profile-roles/,
+// the pixel contract) replaces them:
+//
+//   IDEATOR  the compact public trail of the room (ideator-surface spec decision
+//            19): every thought in the sky's five states, laid out by the day it
+//            was filed. SIZE (diameter: credits across every idea stream) and
+//            BRIGHTNESS (how much of the work it caused is still alive) are
+//            separate channels, and every drawn thing is also a row in the ledger
+//            under it (the sky's accessibility rule). It folds in the old "Ideas
+//            filed, and what became of them" trail rather than keeping two.
+//   ARTIST   the pages they rewrote in Tweak Mode that were approved: the page,
+//            its surface, the day, the changed-line count and a small
+//            before/after (the round's first changed line, beside the approval
+//            renders when the round has them).
+//
+// MARKUP ONLY, like profile-roles.js and profile-charts.js: no document, no
+// fetch. profile.js fetches and wires the hover; a test requires this file and
+// renders the real markup against the real fixtures. The five states' words
+// come from OTBIdeaObjects (idea-objects.js), which modules/ideas/CLAUDE.md
+// makes the one vocabulary every surface uses.
+//
+// The marks are circles and lines, never a path built from data: the hall's
+// chart rule (tests/hall_audit.mjs §6b) leaves series geometry to the kit, and a
+// scatter of thoughts by day is not a series.
+
+(function () {
+  'use strict';
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+  }
+  function objects() {
+    return (typeof window !== 'undefined' && window.OTBIdeaObjects) || null;
+  }
+  function stateWord(st) {
+    const o = objects();
+    return o ? o.objectFor(st).label : String(st || '');
+  }
+  const ORDER = ['star', 'protostar', 'satellite', 'remnant', 'cold-body'];
+  // The sky's vertical bands, one per state, so the trail reads as the room does:
+  // the burning thoughts high, the declined ones low (the mock's bands).
+  const BAND = { star: 0.34, remnant: 0.4, protostar: 0.6, satellite: 0.7, 'cold-body': 0.82 };
+
+  function stateOf(row) {
+    const s = row && row.state && row.state.state;
+    return ORDER.includes(s) ? s : 'protostar';
+  }
+  // A thought's diameter from its compressed size (the sky's own scale, 0..1);
+  // a thought with no size draws its state's fixed glyph instead.
+  function sized(row) {
+    const sc = row && row.size && Number(row.size.scale);
+    return Number.isFinite(sc) && sc > 0 ? sc : null;
+  }
+  function lit(row) {
+    const b = row && row.state && row.state.brightness;
+    return Number.isFinite(Number(b)) && b !== null ? Number(b) : 1;
+  }
+
+  // One mark per state. `i` ties it to its ledger row; -1 is a legend glyph.
+  function markSvg(st, cx, cy, { scale = null, brightness = 1, i = -1, title = '' } = {}) {
+    const data = i >= 0 ? ` data-i="${i}" tabindex="-1"` : '';
+    const t = title ? `<title>${esc(title)}</title>` : '';
+    const r = Math.max(3.2, (7 + 20 * (scale || 0)) / 2);
+    const f = (n) => Number(n).toFixed(1);
+    if (st === 'star') {
+      const op = (0.3 + 0.7 * Math.max(0, Math.min(1, brightness))).toFixed(2);
+      return `<circle class="pt-m pt-star" cx="${f(cx)}" cy="${f(cy)}" r="${f(scale == null ? 5 : r)}" fill-opacity="${op}"${data}>${t}</circle>`;
+    }
+    if (st === 'remnant') return `<circle class="pt-m pt-remnant" cx="${f(cx)}" cy="${f(cy)}" r="${f(scale == null ? 5.5 : r * 1.1)}"${data}>${t}</circle>`;
+    if (st === 'satellite') {
+      return `<g class="pt-m"${data}>${t}<circle class="pt-ring" cx="${f(cx)}" cy="${f(cy)}" r="6.5"/><circle class="pt-soft" cx="${f(cx)}" cy="${f(cy)}" r="2.6"/></g>`;
+    }
+    if (st === 'cold-body') return `<circle class="pt-m pt-cold" cx="${f(cx)}" cy="${f(cy)}" r="3"${data}>${t}</circle>`;
+    return `<g class="pt-m"${data}>${t}<circle class="pt-ring" cx="${f(cx)}" cy="${f(cy)}" r="7"/><circle class="pt-soft" cx="${f(cx)}" cy="${f(cy)}" r="3.2"/></g>`;
+  }
+  function glyphHtml(st) {
+    return `<svg class="pt-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false">${markSvg(st, 8, 8)}</svg>`;
+  }
+
+  const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  function dayOf(v) {
+    const t = Date.parse(v);
+    return Number.isFinite(t) ? t : null;
+  }
+  // A stable, small vertical offset per thought, so two filed the same week do
+  // not sit on one another, and the picture does not shuffle on every load.
+  function jitter(id) {
+    let h = 0;
+    for (const c of String(id)) h = (h * 31 + c.charCodeAt(0)) % 9973;
+    return ((h % 11) - 5) / 60;
+  }
+
+  // trailSvgHtml(rows, { width, height }) — the trail itself. `width` is the
+  // figure's real width, so one user unit is one pixel and a thought's diameter
+  // is the same on every screen (the mock's rule).
+  function trailSvgHtml(rows, { width = 1000, height = 230 } = {}) {
+    const list = (rows || []).map((r, i) => ({ r, i, t: dayOf(r.captured_at) })).filter((x) => x.t != null);
+    const W = Math.max(280, Math.round(width));
+    const H = height;
+    const L = 20;
+    const R = 20;
+    if (!list.length) return '';
+    let t0 = Math.min(...list.map((x) => x.t));
+    let t1 = Math.max(...list.map((x) => x.t));
+    const DAY = 864e5;
+    // A window of at least a month, so a single week of thoughts is not smeared
+    // edge to edge as if it were a year.
+    if (t1 - t0 < 30 * DAY) { const mid = (t0 + t1) / 2; t0 = mid - 15 * DAY; t1 = mid + 15 * DAY; }
+    const x = (t) => L + (W - L - R) * (t - t0) / (t1 - t0);
+    const y = (st, id) => 14 + (H - 54) * (BAND[st] + jitter(id));
+    let grid = '';
+    const d0 = new Date(t0);
+    for (let m = new Date(Date.UTC(d0.getUTCFullYear(), d0.getUTCMonth() + 1, 1)); m.getTime() <= t1; m = new Date(Date.UTC(m.getUTCFullYear(), m.getUTCMonth() + 1, 1))) {
+      const gx = x(m.getTime()).toFixed(1);
+      grid += `<line class="pt-yr" x1="${gx}" x2="${gx}" y1="10" y2="${H - 26}"/>`
+        + `<text class="pt-mo" x="${(Number(gx) + 6).toFixed(1)}" y="${H - 10}">${MONTHS[m.getUTCMonth()]}</text>`;
+    }
+    const pos = new Map(list.map((p) => [String(p.r.id), [x(p.t), y(stateOf(p.r), p.r.id)]]));
+    let tethers = '';
+    for (const p of list) {
+      const host = p.r.merged_into_idea_id != null ? pos.get(String(p.r.merged_into_idea_id)) : null;
+      if (stateOf(p.r) === 'satellite' && host) {
+        const [ax, ay] = pos.get(String(p.r.id));
+        tethers += `<line class="pt-tether" x1="${ax.toFixed(1)}" y1="${ay.toFixed(1)}" x2="${host[0].toFixed(1)}" y2="${host[1].toFixed(1)}"/>`;
+      }
+    }
+    const marks = list.map((p) => {
+      const [cx, cy] = pos.get(String(p.r.id));
+      const st = stateOf(p.r);
+      return markSvg(st, cx, cy, { scale: sized(p.r), brightness: lit(p.r), i: p.i, title: `${p.r.title || `Idea ${p.r.id}`}, ${stateWord(st)}` });
+    }).join('');
+    const label = `${list.length} ${list.length === 1 ? 'thought' : 'thoughts'} filed, by the day each was filed. Each is also a row in the table below.`;
+    return `<svg class="pt-svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="img" aria-label="${esc(label)}">${grid}${tethers}${marks}</svg>`;
+  }
+
+  function legendHtml() {
+    return `<ul class="pt-legend">${ORDER.map((st) => `<li>${glyphHtml(st)}${esc(stateWord(st))}</li>`).join('')}</ul>`
+      + '<p class="pt-channels">Size is how many credits a thought has earned, across every way ideas are paid. '
+      + 'Brightness is how much of the work it caused is still alive. They are separate: a burned-out thought keeps its size.</p>';
+  }
+
+  // The size cell: the true figure, never the drawing's compressed scale; a ~
+  // when part of it is a historical estimate; "no size" for a thought that never
+  // earned (a waiting, folded-in or declined one).
+  function sizeCell(row) {
+    const s = row && row.size;
+    if (!s || typeof s.credits !== 'number' || s.credits <= 0) return '<span class="pt-dim">no size</span>';
+    const est = s.historical === true && Number(s.estimated) > 0;
+    return `${esc(String(s.credits))} cr${est ? `<span class="pt-est" title="${esc(`${s.estimated} of it estimated from work that shipped before ideas were paid`)}"> ~</span>` : ''}`;
+  }
+  function aliveCell(row) {
+    const st = stateOf(row);
+    const s = row && row.state;
+    if (st === 'remnant') return '0%';
+    if (st !== 'star' || !s || s.hasWork !== true) return '';
+    if (s.attributable !== true || s.brightness == null) return '<span class="pt-dim">unknown</span>';
+    return `${Math.round(Number(s.brightness) * 100)}%`;
+  }
+
+  // One ledger row per drawn thought. `outcomeHtml` is profile.js's existing
+  // "what became of it" (the old trail's cell, folded in whole: the task it
+  // became, the descent under it, the triage note).
+  function thoughtRowHtml(row, i, { outcomeHtml, ideaHref }) {
+    const st = stateOf(row);
+    const title = esc(row.title || `Idea ${row.id}`);
+    return `<tr id="pt-row-${i}" data-i="${i}" tabindex="0">`
+      + `<td><a href="${ideaHref(row.id)}">${title}</a></td>`
+      + `<td><span class="pt-sw">${glyphHtml(st)}${esc(stateWord(st))}</span></td>`
+      + `<td class="ledger__r">${sizeCell(row)}</td>`
+      + `<td class="ledger__r">${aliveCell(row)}</td>`
+      + `<td>${outcomeHtml(row)}</td>`
+      + '</tr>';
+  }
+
+  function thoughtsLede(first, own) {
+    return own
+      ? `Every thought ${first} has filed, where it went, and how much of what it caused is still alive.`
+      : `The thoughts ${first} has filed. Their own sky is theirs; this is the public trail of it.`;
+  }
+
+  // ---- the artist ---------------------------------------------------------
+
+  function shortDate(v) {
+    const t = dayOf(v);
+    if (t == null) return '';
+    const d = new Date(t);
+    return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;
+  }
+
+  // One approved page. `visuals` is the round's approval renders by slot, when
+  // the page fetched them; `thumb` is OTBVisual.shipVisualThumbHtml, which only
+  // ever draws a server-minted visual URL.
+  function pageRowHtml(p, { visuals = null, thumb = null } = {}) {
+    const lines = Number(p.line_count) || 0;
+    const meta = [p.surface_label, p.approved_at ? `approved ${shortDate(p.approved_at)}` : null].filter(Boolean).join(' · ');
+    const side = (which, word, text) => {
+      const v = visuals && visuals[`${which}-desktop-light`];
+      const img = v && thumb ? thumb({ visual_url: v.visual_url, visual_alt: v.visual_alt }) : '';
+      const body = which === 'before'
+        ? `<span class="pg-ba__was">${esc(text)}</span>`
+        : `<span class="pg-ba__now">${esc(text)}</span>`;
+      return `<div class="pg-ba__side"><span class="pg-ba__lbl">${word}</span>${img ? `<span class="pg-ba__img">${img}</span>` : ''}${text ? body : ''}</div>`;
+    };
+    const ba = p.first || (visuals && (visuals['before-desktop-light'] || visuals['after-desktop-light']))
+      ? `<div class="pg-ba">${side('before', 'before', p.first ? p.first.before : '')}${side('after', 'after', p.first ? p.first.after : '')}</div>`
+      : '';
+    return '<li class="pg">'
+      + `<div><div class="pg__t">${esc(p.page_title || p.page_id)}</div><div class="pg__meta">${esc(meta)}</div></div>`
+      + `<div class="pg__n">${lines} ${lines === 1 ? 'line' : 'lines'} changed</div>`
+      + ba
+      + '</li>';
+  }
+
+  function pagesLede(first, total) {
+    if (!total) return `${first} has no approved pages yet. Pages they rewrite in Tweak Mode will list here once they are approved.`;
+    return `Pages ${first} rewrote in Tweak Mode that were approved and shipped.`;
+  }
+
+  const api = { trailSvgHtml, legendHtml, thoughtRowHtml, thoughtsLede, pageRowHtml, pagesLede, glyphHtml, stateOf };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  if (typeof window !== 'undefined') window.OTBProfileCrafts = api;
+})();

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

@@ -193,3 +193,63 @@
 .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); }
+
+/* ---- 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
+   a mark's diameter and brightness a star's opacity; the words are the sky's.
+   A mark and its ledger row light together (.is-hot), the sky's rule. */
+#activity-ideator-panel {
+  --pt-soft: color-mix(in srgb, var(--ink) 52%, transparent);
+  --pt-faint: color-mix(in srgb, var(--ink) 22%, transparent);
+  --pt-cold: color-mix(in srgb, var(--ink) 8%, var(--bg-card));
+}
+.pt-trail { border-radius: var(--radius-sm); background: var(--bg-frame); overflow: hidden; }
+.pt-trail[hidden] { display: none; }
+.pt-svg { display: block; width: 100%; height: auto; }
+.pt-yr { stroke: var(--rule-soft); stroke-width: 1; }
+.pt-mo { fill: var(--ink-faint); font-size: 11px; font-family: var(--font-mono); }
+.pt-m { transition: transform .2s ease-out; transform-box: fill-box; transform-origin: center; cursor: pointer; }
+.pt-m.is-hot { transform: scale(1.35); }
+.pt-star { fill: var(--accent); }
+.pt-soft { fill: var(--pt-soft); }
+.pt-ring { fill: none; stroke: var(--pt-faint); stroke-width: 1; }
+.pt-tether { stroke: var(--pt-faint); stroke-width: 1; }
+.pt-remnant { fill: transparent; stroke: var(--pt-soft); stroke-width: 1.2; }
+.pt-cold { fill: var(--pt-cold); stroke: var(--pt-faint); stroke-width: 1; }
+.pt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-soft); }
+.pt-legend li { display: flex; align-items: center; gap: 7px; }
+.pt-glyph { display: block; width: 16px; height: 16px; flex: none; }
+.pt-channels { margin: 6px 0 var(--sp-sm); font-size: 12.5px; color: var(--ink-faint); max-width: var(--measure); }
+.pt-sw { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+.pt-sw .pt-glyph { width: 14px; height: 14px; }
+.pt-dim, .pt-est { color: var(--ink-faint); }
+.pt-foot { margin: var(--sp-sm) 0 0; font-size: 12.5px; color: var(--ink-faint); }
+.pt-foot[hidden] { display: none; }
+#activity-ideas .ledger tr.is-hot td { background: var(--glass); }
+#activity-ideas .ledger td:first-child, #activity-ideas .ledger td:last-child { min-width: 13rem; }
+#activity-ideas .ledger .ledger__r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* ---- the artist's approved pages (task 1004435) ----------------------------
+   Each page a row: its name and where it lives, the changed-line count, and a
+   small before/after (the first changed line, beside the approval renders when
+   the round has them). The mock's .pg and .ba, on the hall's tokens. */
+.pgs { display: grid; margin: 0; padding: 0; list-style: none; }
+.pg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 16px 0; border-top: var(--line) solid var(--rule-soft); }
+.pg:first-child { border-top: 0; padding-top: 0; }
+.pg__t { font-size: 16px; font-weight: 400; }
+.pg__meta { font-size: 12.5px; color: var(--ink-faint); }
+.pg__n { text-align: right; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.pg-ba { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
+.pg-ba__side { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-frame); font-size: 13.5px; }
+.pg-ba__lbl { display: block; margin-bottom: 3px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.pg-ba__side:has(.pg-ba__img) { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: start; }
+.pg-ba__side:has(.pg-ba__img) .pg-ba__lbl { grid-column: 1 / -1; }
+.pg-ba__img, .pg-ba__img a { display: block; }
+.pg-ba__img .ship-visual-thumb { width: 112px; height: 70px; }
+.pg-ba__was, .pg-ba__now { justify-self: start; align-self: start; }
+.pg-ba__was { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--rule); }
+.pg-ba__now { color: var(--ink); background: var(--accent-tint); padding: 0 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+@media (max-width: 640px) {
+  .pg-ba { grid-template-columns: minmax(0, 1fr); }
+}

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

@@ -140,22 +140,37 @@
               <div id="activity-body">
                 <div class="profile__placeholder" id="activity-placeholder">…</div>
 
-                <div id="activity-tasks-panel" hidden>
-                  <h3 class="profile-act__h">Works completed</h3>
-                  <div id="activity-tasks"></div>
+                <!-- One tab per role the person has (task 1004435): their main role
+                     and every other role that has earned credits, as the header's
+                     chips are. Each tab is its craft's own record. -->
+                <div id="activity-engineer-panel" hidden>
+                  <div id="activity-tasks-panel">
+                    <h3 class="profile-act__h">Works completed</h3>
+                    <div id="activity-tasks"></div>
+                  </div>
+
+                  <div id="activity-goals-panel">
+                    <h3 class="profile-act__h">Goals created</h3>
+                    <div id="activity-goals"></div>
+                  </div>
                 </div>
 
-                <div id="activity-goals-panel" hidden>
-                  <h3 class="profile-act__h">Goals created</h3>
-                  <div id="activity-goals"></div>
+                <!-- The ideator's trail: the room's public trail (the sky's five
+                     states, size and brightness), every drawn thought also a row.
+                     It folds in the old "Ideas filed" list. -->
+                <div id="activity-ideator-panel" hidden>
+                  <p class="scroll__lede" id="trail-lede"></p>
+                  <div class="pt-trail" id="trail-figure"></div>
+                  <div id="trail-legend"></div>
+                  <div id="activity-ideas"></div>
+                  <p class="pt-foot" id="trail-foot" hidden></p>
                 </div>
 
-                <!-- The idea trail. Revealed only in the craft views where filing an
-                     idea is the work being shown (all + ideator) — see profile.js. -->
-                <div id="activity-ideas-panel" hidden>
-                  <h3 class="profile-act__h">Ideas filed, and what became of them</h3>
-                  <p class="scroll__lede">Every idea this builder captured — promoted, discarded, merged, or still open.</p>
-                  <div id="activity-ideas"></div>
+                <!-- The artist's approved pages, each with a small before/after. -->
+                <div id="activity-artist-panel" hidden>
+                  <p class="scroll__lede" id="pages-lede"></p>
+                  <ul class="pgs" id="activity-pages"></ul>
+                  <div id="pages-more"></div>
                 </div>
               </div>
             </section>
@@ -218,6 +233,10 @@
 <!-- What the header and By the numbers say, per craft (task 1004434). Pure, and
      loaded BEFORE profile.js, which draws what it returns. -->
 <script src="/builders/profile-roles.js?v=2026-10-01-roles"></script>
+<!-- The Ideator and Artist tabs (task 1004435): the five states' words, then
+     what the tabs draw. Both loaded BEFORE profile.js. -->
+<script src="/builders/idea-objects.js?v=2026-09-27-split"></script>
+<script src="/builders/profile-crafts.js?v=2026-10-01-crafts"></script>
 <script src="/builders/profile.js?v=2026-10-01-roles"></script>
 </body>
 </html>