@bongos/core 1.20.75 → 1.20.76

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

@@ -50,12 +50,47 @@
 .profile--ident .profile__resp-craft { font-weight: 500; }
 .profile--ident .profile__resp-craft::after { content: " — "; font-weight: 400; color: var(--ink-faint); }
 .profile--ident .profile__resp-text { color: var(--ink-soft); }
-.profile--ident .profile__credits-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.035em; line-height: 1; color: var(--ink); }
-.profile--ident .profile__credits-label,
-.profile--ident .profile__karma-label { 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); }
-.profile--ident .profile__karma-num { font-weight: 500; }
 .profile--ident .profile__placeholder { grid-column: 1 / -1; }
 
+/* The crafts, main role first (task 1004434, the approved mock at
+   docs/design/mocks/profile-roles/). A chip is glass on the card; the main role
+   takes the stronger glass and the ink, the others the soft ink. */
+.profile--ident .profile__crafts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.profile--ident .profile__craft { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--glass); font-size: 12.5px; color: var(--ink-soft); }
+.profile--ident .profile__craft--lead { background: var(--glass-strong); color: var(--ink); }
+
+/* The headline tally: the studio's corner tally, carried onto the profile. The
+   person's total first, then the two numbers their main craft leads with,
+   hairline separators between. It replaces the credits/karma column. */
+.profile--ident .profile__tally { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--glass); min-height: 48px; align-self: start; }
+.profile--ident .profile__tally-item { display: flex; align-items: baseline; gap: 6px; }
+.profile--ident .profile__tally-n { font-size: 20px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--ink); }
+.profile--ident .profile__tally-w { font-size: 13px; color: var(--ink-soft); }
+.profile--ident .profile__tally-sep { width: 1px; height: 20px; background: var(--rule); }
+
+/* ---- by the numbers (task 1004434) -----------------------------------------
+   One tile per figure, a tonal step down from the panel: the number, what it
+   counts, then a quieter foot. The mock's .stat, on the hall's tokens. */
+.profile-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-sm); }
+/* Six tiles (an ideator with karma) sit as two even rows of three, not five
+   and an orphan. The phone's two columns below already divide six evenly. */
+.profile-nums[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.profile-num { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-frame); }
+.profile-num__n { display: block; font-size: 28px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
+.profile-num__w { display: block; font-size: 13px; color: var(--ink-soft); }
+.profile-num__f { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
+.profile-surfaces { margin-top: var(--sp-md); }
+.profile-surfaces__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); }
+/* The mock's row: the surface's name and its count on one line, the bar under
+   them across the full width. The kit draws the bar; only the placement of its
+   three cells changes here, so a phone keeps a usable bar instead of a sliver
+   between two fixed columns. */
+.profile-surfaces .kit-bars { gap: 12px; }
+.profile-surfaces .kit-bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 7px; column-gap: 12px; }
+.profile-surfaces .kit-bars__label { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 300; color: var(--ink); }
+.profile-surfaces .kit-bars__val { grid-column: 2; grid-row: 1; font-size: 13.5px; color: var(--ink-soft); }
+.profile-surfaces .kit-bars__track { grid-column: 1 / -1; grid-row: 2; }
+
 /* ---- the shelf -------------------------------------------------------------
    An achievement is a --bg-card tile on the ground (the section is bare, so a
    tile is the panel and not a card in a card), a hairline on top, the mark as
@@ -106,7 +141,9 @@
 @media (max-width: 640px) {
   .profile--ident { grid-template-columns: 48px minmax(0, 1fr); }
   .profile--ident .profile__avatar { width: 48px; height: 48px; }
-  .profile--ident .profile__credits { grid-column: 2; align-items: flex-start; text-align: left; }
+  .profile--ident .profile__tally { grid-column: 1 / -1; border-radius: var(--radius-sm); padding: 12px 16px; }
+  .profile--ident .profile__tally-sep { display: none; }
+  .profile-nums, .profile-nums[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
 /* ---- the rail and the groups (task 1003489) ---------------------------------

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

@@ -27,7 +27,8 @@
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
       <!-- The page's ONE h1 (one-header-main-h1), in the family's voice; the
-           sub-line is profile.js's — "<name> — <rank> · N works shipped". -->
+           sub-line is profile.js's — "<name> — <rank> · <the main craft's
+           headline>": works shipped, pages approved or thoughts filed. -->
       <div class="page-head page-head--room page-head--panel">
         <p class="page-head__eyebrow">the page everyone else reads</p>
         <h1 id="profile-h1" class="page-head__h">profile</h1>
@@ -55,11 +56,14 @@
               </div>
             </section>
 
-            <!-- By the numbers — credits, karma, works shipped. -->
+            <!-- By the numbers — led by the person's own craft (task 1004434):
+                 works shipped for an engineer, pages approved and the per-surface
+                 "N of M tweaked" for an artist, thoughts, size and what is still
+                 alive for an ideator. profile-roles.js says what; profile.js draws. -->
             <section class="scroll" id="numbers-scroll" aria-labelledby="numbers-h" data-group="overview">
               <h2 id="numbers-h" class="scroll__h">By the numbers</h2>
-              <div class="stat-row" id="numbers-body">
-                <div class="stat-tile"><span class="stat-tile__label">Loading…</span></div>
+              <div id="numbers-body">
+                <p class="profile__placeholder">Loading…</p>
               </div>
             </section>
 
@@ -211,6 +215,9 @@
      omits this script simply has no charts section content. -->
 <script src="/builders/profile-charts.js?v=2026-09-04-calendar"></script>
 <script src="/builders/founding-mark.js?v=2026-09-30-founding"></script>
-<script src="/builders/profile.js?v=2026-09-30-founding"></script>
+<!-- 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>
+<script src="/builders/profile.js?v=2026-10-01-roles"></script>
 </body>
 </html>

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

@@ -75,7 +75,33 @@
        </div>`;
   }
 
-  function renderHead(builder) {
+  // What the header and "By the numbers" say for this person's crafts (task
+  // 1004434): profile-roles.js decides the words and numbers, this page draws them.
+  function roleHeadline(data) {
+    const builder = (data && data.builder) || {};
+    return window.OTBProfileRoles.headline(data, {
+      fmt: fmtNum,
+      currency: curLabel(),
+      rank: rankLabel(normalizeRank(builder.rank)),
+    });
+  }
+
+  // The headline tally (task 1004434): the studio's corner tally carried onto the
+  // profile, the person's total first and then the two numbers their main craft
+  // leads with.
+  function tallyHtml(items) {
+    return items.map((t, i) => {
+      const title = t.lead
+        ? ` title="${escapeHtml(curLabel(true))} — everything earned: shipped work, approved pages and ideas."`
+        : '';
+      return (i ? '<span class="profile__tally-sep" aria-hidden="true"></span>' : '')
+        + `<span class="profile__tally-item"${title}>`
+        + `<span class="profile__tally-n">${escapeHtml(t.n)}</span>`
+        + `<span class="profile__tally-w">${escapeHtml(t.w)}</span></span>`;
+    }).join('');
+  }
+
+  function renderHead(builder, view) {
     const head = $('#profile-head');
     if (!head) return;
     const name = escapeHtml(builder.display_name || builder.github_login || 'Builder');
@@ -83,13 +109,11 @@
       ? `<img class="profile__avatar" src="${escapeHtml(builder.avatar_url)}" alt="">`
       : `<div class="profile__avatar" aria-hidden="true"></div>`;
     const prefs = Array.isArray(builder.preferred_disciplines) ? builder.preferred_disciplines : [];
-    const disciplines = prefs.length
-      ? `<div class="profile__disciplines">
-           <span class="profile__disc-label">Preferred work:</span>
-           <span class="profile__disc-value">${escapeHtml(prefs.join(', '))}</span>
-         </div>
-         ${responsibilitiesBlock(prefs)}`
-      : '';
+    // The crafts as chips, main role first; any other craft shows only once it
+    // has earned (the owner, 2026-09-30) — the server's `roles.shown` says which.
+    const crafts = `<div class="profile__crafts" aria-label="Roles">${view.crafts
+      .map((c) => `<span class="profile__craft${c.lead ? ' profile__craft--lead' : ''}">${escapeHtml(c.label)}</span>`)
+      .join('')}</div>`;
 
     head.innerHTML = `
       ${avatar}
@@ -102,16 +126,10 @@
         <div class="profile__stats">
           <span>Member since ${fmtDate(builder.created_at)}</span>
         </div>
-        ${disciplines}
+        ${crafts}
+        ${responsibilitiesBlock(prefs)}
       </div>
-      <div class="profile__credits">
-        <span class="profile__credits-num" title="${escapeHtml(curLabel(true))} — everything earned: shipped work, approved pages and ideas.">${fmtNum(builder.total_credits)}</span>
-        <span class="profile__credits-label">${escapeHtml(curLabel())}</span>
-        <span class="profile__karma" title="Karma — peer recognition and approvals, a separate counter from ${escapeHtml(curLabel())}.">
-          <span class="profile__karma-num">${fmtNum(builder.karma)}</span>
-          <span class="profile__karma-label">karma</span>
-        </span>
-      </div>`;
+      <div class="profile__tally" role="group" aria-label="Headline numbers">${tallyHtml(view.tally)}</div>`;
   }
 
   // ---- render: the founding mark (task 1004424) ----------------------------
@@ -142,13 +160,33 @@
       </div>`;
   }
 
-  function renderNumbers(shippedCount, achievements) {
+  // By the numbers, led by the person's own craft (task 1004434). Each tile is
+  // number, then what it counts, then a quieter foot, as the approved mock reads.
+  function numberTile(t) {
+    return `<div class="profile-num"${t.title ? ` title="${escapeHtml(t.title)}"` : ''}>`
+      + `<span class="profile-num__n">${escapeHtml(t.n)}</span>`
+      + `<span class="profile-num__w">${escapeHtml(t.w)}</span>`
+      + (t.f ? `<span class="profile-num__f">${escapeHtml(t.f)}</span>` : '')
+      + '</div>';
+  }
+
+  // The studio's "N of M tweaked", one row per surface, on the kit's bar series:
+  // each bar is that surface's own share, so the axis is a percentage and the
+  // value cell says the count in words.
+  function surfacesHtml(surfaces) {
+    if (!surfaces.length || !window.OTBKit || !window.OTBKit.barSeriesHtml) return '';
+    const bars = window.OTBKit.barSeriesHtml(surfaces.map((s) => ({
+      label: s.label,
+      value: s.total > 0 ? (s.tweaked / s.total) * 100 : 0,
+      valueLabel: s.line,
+    })), { max: 100, tone: 'neutral', pill: true, track: 'soft', barHeight: '4px', list: true, ariaLabel: 'Pages tweaked, per surface' });
+    return `<div class="profile-surfaces"><h3 class="profile-surfaces__h">pages tweaked, per surface</h3>${bars}</div>`;
+  }
+
+  function renderNumbers(view) {
     const body = $('#numbers-body');
     if (!body) return;
-    const achCount = Array.isArray(achievements) ? achievements.length : 0;
-    body.innerHTML =
-      tile('Works shipped', fmtNum(shippedCount)) +
-      tile('Achievements', fmtNum(achCount), 'earned');
+    body.innerHTML = `<div class="profile-nums" data-count="${view.tiles.length}">${view.tiles.map(numberTile).join('')}</div>${surfacesHtml(view.surfaces)}`;
   }
 
   // ---- render: achievements shelf -----------------------------------------
@@ -777,12 +815,13 @@
 
   function renderProfile(data, selfId) {
     const builder = data.builder || {};
-    const name = builder.display_name || builder.github_login || 'Builder';
-    const shipped = Number(data.shipped_count) || 0;
-    showMessage(`${name} — ${rankLabel(normalizeRank(builder.rank))} · ${fmtNum(shipped)} work${shipped === 1 ? '' : 's'} shipped`);
-    renderHead(builder);
+    // The subtitle, the header and By the numbers all lead with the person's
+    // main craft (task 1004434) — "N works shipped" only for an engineer.
+    const view = roleHeadline(data);
+    showMessage(view.sub);
+    renderHead(builder, view);
     renderFoundingMark(builder);
-    renderNumbers(data.shipped_count, data.achievements);
+    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
     // viewer's own profile they add the pace.

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

@@ -34,7 +34,9 @@
           "#numbers-body",
           "#charts-controls",
           "#charts-grid",
-          "#ach-grid"
+          "#ach-grid",
+          ".profile__tally",
+          ".profile-nums"
         ]
       }
     },
@@ -88,6 +90,42 @@
         ]
       }
     },
+    "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.",
+      "auth": true,
+      "url": "/profile?id=2001",
+      "actions": [
+        [
+          "wait",
+          1200
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#profile-head",
+          ".profile__tally",
+          ".profile-nums"
+        ]
+      }
+    },
+    "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.",
+      "auth": true,
+      "url": "/profile?id=2002",
+      "actions": [
+        [
+          "wait",
+          1200
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#profile-head",
+          ".profile__tally",
+          ".profile-nums"
+        ]
+      }
+    },
     "out": {
       "_": "A signed-out visitor with no ?id= gets renderEmpty(), not a bounce — but this state only RENDERS that empty markup against the kit's own stub. Run it WITHOUT --base-out: under the hall-preview harness's --fixture-me the /me read still answers, so `out` quietly renders the viewer's own populated profile and the empty state is never measured. That is how its two prose links sat at 18px, under the 24px control floor, through the whole re-skin (walk 1003309, fixed in task 1003497).",
       "auth": false,

package/modules/hall-ui/records/profile-roles.md

@@ -0,0 +1,32 @@
+# The role-led profile header and "By the numbers" — each person leads with their own craft (task 1004434)
+
+**WA6.RP04 (goal 1000095, criterion `<redacted>`).** The pixel contract is the owner-approved mock `docs/design/mocks/profile-roles/index.html` (task 1004431). Before this, the header's subtitle and the first tile said "N works shipped" for everybody, so an artist with nine approved pages read as someone who had done nothing.
+
+## What the page says now
+
+- **The subtitle** under the h1 is the main craft's headline: "N works shipped" (engineer), "N pages approved" (artist), "N thoughts filed" (ideator).
+- **The identity band** keeps the avatar, name, rank badge, handle, member-since and the "Answerable for" block unchanged. The "Preferred work:" line became **craft chips**, main role first ("Artist, main role"), then every other craft the server lists in `roles.shown`, which is a craft that has *earned* credits (the owner's 2026-09-30 rule; the server decides it, never this page).
+- **The tally** replaces the credits/karma column: the studio's corner tally carried onto the profile, the total first and then the two numbers the main craft leads with (engineer: works shipped, karma; artist: pages approved, this week; ideator: thoughts filed, ignited).
+- **By the numbers** is the main craft's set of tiles, then one headline tile per other shown craft. The artist adds the studio's "N of M tweaked" per surface underneath, on `OTBKit.barSeriesHtml` with this sheet only moving the three cells into the mock's layout (name and count on a line, the bar under them).
+
+## Where the words live
+
+`public/profile-roles.js` (`window.OTBProfileRoles.headline`) is **pure** and decides every word and number; `profile.js` only draws. This is the `profile-charts.js` precedent, and it is what lets `tests/profile_role_headline.mjs` run the real wording against the harness fixtures, the real page in a vm, and the real server reader (`src/bongos/role-stats.js`) through JSON into the real page.
+
+## Rules an edit must keep
+
+- **A number the instance could not read is a dash, never a zero.** The role ports are optional; "0 pages approved" would be a claim about the person.
+- **The ~ on an ideator's total size** is the sky's historical-estimate mark; its tile's tooltip says how much is estimated.
+- **The per-surface rows follow the MAIN craft only.**
+- Every page that boots `profile.js` in a vm must load `profile-roles.js` first (`tests/helpers.mjs` `bootProfilePage` and `tests/profile_ui_cross_project.mjs` do).
+
+## Harness
+
+Three fixtures, one per craft: `builders__profile` (the engineer, id 95, the viewer's own), `<redacted>` (an artist who never shipped), `builders__2002__profile` (an ideator who never shipped, part of whose size is estimated). `profile.states.json` renders them as `own`, `artist` and `ideator`.
+
+## Deliberate differences from the mock
+
+- The engineer's tally shows **karma** where the mock shows "+120 this week", and the fourth engineer tile is **achievements** where the mock shows a shipping streak: neither weekly engineer credits nor a weekly streak is in the profile read, and a number the page cannot read is not drawn.
+- The engineer tile "works shipped" has no "across N goals" foot, the ideator's "thoughts filed" no "since <month>" foot, the artist's "credits from pages" no "N a page" foot, and the surface rows no "where" sub-label: none of those is in the read.
+- **Karma ends every artist's and ideator's set of tiles**, which the mock does not draw. The owner's call, reviewing this build on 2026-10-01: "karma for artists and ideators is definitely key". The engineer's set carries it already.
+- The tiles' grid fits at 148px rather than 170px, so five tiles sit on one row inside the hall's narrower panel.

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.20.75",
+  "version": "1.20.76",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.20.75",
+      "version": "1.20.76",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.20.75",
+  "version": "1.20.76",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -8579,5 +8579,11 @@
       "id": "1004418",
       "text": "Creating a project now starts with four questions about its \"planet physics\": is it new or already started, where is everyone, will anyone under 18 be building, and what kind of entity is behind it. A planet forms beside the q"
     }
+  ],
+  "1.20.76": [
+    {
+      "id": "1004434",
+      "text": "A profile now leads with the person's own work. An artist's page opens on pages approved, this week's gain and how many pages of each part of the site they have tweaked; an ideator's on thoughts filed, how many became work, Fu"
+    }
   ]
 }

package/src/module-api.js

@@ -75,7 +75,7 @@ const { responsibilityFor, ROLE_RESPONSIBILITIES } = require('./role-responsibil
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.20.75'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.20.76'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/founding_builders.mjs

@@ -251,7 +251,8 @@ test('a project that was never founded keeps the wall hidden', async () => {
 test('the profile and the ranks page read the same list, and every page loads the script first', () => {
   const profile = read('profile.js');
   const ranks = read('ranks.js');
-  assert.match(profile, /renderHead\(builder\);\s*\n\s*renderFoundingMark\(builder\);/);
+  // renderHead takes the role headline since task 1004434; the mark still follows it.
+  assert.match(profile, /renderHead\(builder(?:, view)?\);\s*\n\s*renderFoundingMark\(builder\);/);
   assert.match(ranks, /render\(builder \|\| \{\}\);\s*\n\s*renderFounding\(\);/);
   assert.match(read('ranks.html'), /id="founding-scroll"[^>]*hidden/, 'the ranks section is hidden in the markup');
   for (const [html, page] of [['roster.html', 'roster.js'], ['profile.html', 'profile.js'], ['ranks.html', 'ranks.js'], ['index.html', 'hall-widgets.js']]) {

package/tests/helpers.mjs

@@ -517,6 +517,7 @@ export function shallowCloneReason(root = ROOT) {
 // page that changes, so the harness moved here and the fixture stayed with
 // each caller —  is the /inbox/by-builder/ payload to answer with.
 const PROFILE_JS = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile.js'), 'utf8');
+const PROFILE_ROLES_JS = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile-roles.js'), 'utf8');
 // Boot the REAL profile.js against a stub DOM + a stub OTBKit that captures each
 // ledger's rowHtml, and return what it rendered plus every request it made.
 export function bootProfilePage({ signedIn = true, trail = [] } = {}) {
@@ -623,6 +624,9 @@ export function bootProfilePage({ signedIn = true, trail = [] } = {}) {
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
+  // profile.js draws the header from profile-roles.js (task 1004434), which the
+  // page loads first.
+  vm.runInContext(PROFILE_ROLES_JS, sandbox, { filename: 'profile-roles.js' });
   vm.runInContext(PROFILE_JS, sandbox, { filename: 'profile.js' });
 
   const htmlFor = (mountId) => {

package/tests/profile_role_headline.mjs

@@ -0,0 +1,201 @@
+// tests/profile_role_headline.mjs — the profile's header and "By the numbers"
+// lead with each person's own craft (task 1004434 / WA6.RP04, goal 1000095,
+// criterion wa6-roles-read-true-in-public).
+//
+// The done-when: "engineer, artist and ideator fixtures each render their own
+// headline, matching the mock". Three layers, each run for real:
+//
+//   1. The words. profile-roles.js (pure) over the three harness fixtures the
+//      renders were taken from: each craft's tally, tiles and subtitle.
+//   2. The page. The REAL profile.js in a vm, with the REAL hall kit, over the
+//      same fixtures: what lands in the header, the numbers and the subtitle.
+//   3. The whole path. The REAL server reader (src/bongos/role-stats.js) with
+//      the three role ports stubbed, through JSON, into the REAL page, so a field
+//      the server renames or drops cannot leave this suite green on a fixture
+//      that still carries it.
+
+import { strict as assert } from 'node:assert';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+import { makeRunner } from './helpers.mjs';
+
+process.env.NODE_ENV = 'test';
+const require = createRequire(import.meta.url);
+const ROOT = fileURLToPath(new URL('..', import.meta.url));
+const FIX = (n) => JSON.parse(fs.readFileSync(path.join(ROOT, 'scripts/hall-preview/fixtures', n + '.json'), 'utf8'));
+
+const { headline } = require('../modules/hall-ui/public/profile-roles.js');
+const OTBKit = require('../modules/hall-ui/public/hall-kit.js');
+const ROLES_SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile-roles.js'), 'utf8');
+const PAGE_SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile.js'), 'utf8');
+
+const ENGINEER = FIX('builders__profile');
+const ARTIST = FIX('builders__2001__profile');
+const IDEATOR = FIX('builders__2002__profile');
+const OPTS = { fmt: (n) => Number(n).toLocaleString('en-US'), currency: 'credits', rank: 'Contributor' };
+const words = (items) => items.map((t) => `${t.n} ${t.w}`);
+
+const { test, summary } = makeRunner();
+
+// ---- 1. the words --------------------------------------------------------
+
+await test('an engineer leads with works shipped, and keeps karma', () => {
+  const v = headline(ENGINEER, OPTS);
+  assert.deepEqual(words(v.tally), ['4,630 credits', '24 works shipped', '1 karma']);
+  assert.deepEqual(words(v.tiles).slice(0, 4), ['24 works shipped', '4,630 credits', '1 karma', '2 achievements']);
+  assert.equal(v.sub, 'Builder 4 — Contributor · 24 works shipped');
+  assert.deepEqual(v.surfaces, [], 'the per-surface rows are the artist\'s');
+});
+
+await test('an artist who never shipped a task leads with pages approved and the per-surface share', () => {
+  const v = headline(ARTIST, OPTS);
+  assert.deepEqual(words(v.tally), ['412 credits', '9 pages approved', '+38 this week']);
+  assert.deepEqual(words(v.tiles), ['9 pages approved', '270 credits from pages', '+38 this week', '4 thoughts filed', '6 karma']);
+  assert.equal(v.tiles[0].f, '3 surfaces');
+  assert.equal(v.sub, 'Builder 7 — Contributor · 9 pages approved');
+  assert.ok(!v.sub.includes('works shipped'), 'the subtitle no longer says works shipped for an artist');
+  assert.deepEqual(v.surfaces.map((s) => s.line), ['6 of 12 tweaked', '2 of 19 tweaked', '1 of 6 tweaked']);
+  assert.ok(!words(v.tiles).some((w) => /works shipped/.test(w)), 'no engineer figure on an artist\'s numbers');
+  assert.equal(words(v.tiles).at(-1), '6 karma', 'karma ends every non-engineer set (the owner, 2026-10-01)');
+});
+
+await test('an ideator leads with thoughts, size and what is still alive', () => {
+  const v = headline(IDEATOR, OPTS);
+  assert.deepEqual(words(v.tally), ['186 credits', '31 thoughts filed', '7 ignited']);
+  assert.deepEqual(words(v.tiles), ['31 thoughts filed', '7 ignited', '3 Full Ideas', '186~ total size', '72% still alive', '3 karma']);
+  assert.equal(v.tiles[2].f, '1 ratified by the board');
+  assert.match(v.tiles[3].title, /Includes 24 credits of historical estimate/, 'the ~ says what it means');
+  assert.equal(v.sub, 'Builder 9 — Contributor · 31 thoughts filed');
+});
+
+await test('several crafts each show, main first, in the server\'s order', () => {
+  assert.deepEqual(headline(ARTIST, OPTS).crafts.map((c) => c.label), ['Artist, main role', 'Ideator']);
+  assert.deepEqual(headline(ENGINEER, OPTS).crafts.map((c) => c.label), ['Engineer, main role', 'Ideator']);
+  // The other craft adds its one headline tile after the main craft's set.
+  assert.equal(words(headline(ENGINEER, OPTS).tiles).at(-1), '9 thoughts filed');
+  const reordered = { ...ARTIST, roles: { ...ARTIST.roles, main: 'ideator', shown: ['ideator', 'artist'] } };
+  const v = headline(reordered, OPTS);
+  assert.deepEqual(v.crafts.map((c) => c.label), ['Ideator, main role', 'Artist']);
+  assert.equal(words(v.tiles).at(-2), '9 pages approved', 'the other craft\'s tile, just before karma');
+  assert.deepEqual(v.surfaces, [], 'the per-surface rows follow the MAIN craft, not any craft');
+});
+
+await test('a number the instance could not read is a dash, never a zero', () => {
+  const noDesk = { ...ARTIST, roles: { ...ARTIST.roles, artist: { pages_approved: null, credits: null, this_week: null, surfaces_touched: null, surfaces: [], unavailable: true } } };
+  const v = headline(noDesk, OPTS);
+  assert.deepEqual(words(v.tally).slice(1), ['— pages approved', '— this week']);
+  assert.equal(v.tiles[0].f, '', 'no "0 surfaces" under an unknown count');
+  const noWork = { ...IDEATOR, roles: { ...IDEATOR.roles, ideator: { ...IDEATOR.roles.ideator, alive: { share: null, has_work: false, attributable: null } } } };
+  assert.deepEqual(headline(noWork, OPTS).tiles.at(-2), { n: '—', w: 'still alive', f: 'nothing has come of them yet' });
+  const untraced = { ...IDEATOR, roles: { ...IDEATOR.roles, ideator: { ...IDEATOR.roles.ideator, alive: { share: null, has_work: true, attributable: false } } } };
+  assert.equal(headline(untraced, OPTS).tiles.at(-2).f, 'not measurable yet');
+});
+
+await test('a response from before the roles block reads as the engineer it always was', () => {
+  const { roles, ...old } = ENGINEER;
+  const v = headline(old, OPTS);
+  assert.deepEqual(v.crafts.map((c) => c.label), ['Engineer, main role']);
+  assert.equal(v.sub, 'Builder 4 — Contributor · 24 works shipped');
+});
+
+// ---- 2. the page ---------------------------------------------------------
+
+async function boot(profileData) {
+  const els = new Map();
+  const makeEl = () => ({
+    hidden: false, textContent: '', _html: '', dataset: {}, style: {},
+    set innerHTML(v) { this._html = String(v); }, get innerHTML() { return this._html; },
+    insertAdjacentHTML() {}, addEventListener() {}, setAttribute() {}, querySelector: () => null, querySelectorAll: () => [],
+    classList: { add() {}, remove() {}, toggle() {} },
+  });
+  const $ = (sel) => { if (!els.has(sel)) els.set(sel, makeEl()); return els.get(sel); };
+  const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const json = JSON.parse(JSON.stringify(profileData)); // what the wire carries
+  const api = {
+    async request(_m, url) {
+      if (url === '/api/bongos/me') return { status: 401, ok: false, data: null };
+      if (/\/builders\/[^/]+\/profile$/.test(url)) return { status: 200, ok: true, data: json };
+      return { status: 404, ok: false, data: null };
+    },
+  };
+  const windowObj = {
+    __BRANDING__: { currency: { label: 'credits' } },
+    __MODULES__: { responsibilities: { engineer: 'E.', artist: 'A.', ideator: 'I.' } },
+    BongosClient: { createClient: () => api },
+    // The real kit draws the surface bars; the section rail needs a real DOM and
+    // is not what this suite is about, so it is left out (profile.js skips it).
+    OTBKit: { ...OTBKit, makeSectionRail: undefined },
+    OTB: {
+      $, escapeHtml,
+      fmtNum: (n) => Number(n || 0).toLocaleString('en-US'),
+      fmtDate: (d) => String(d).slice(0, 10),
+      rankLabel: () => 'Contributor',
+      roleAxisLabel: () => 'Role', roleLabel: (d) => d, roleIsUnset: (d) => !d, toast() {},
+    },
+  };
+  const sandbox = {
+    window: windowObj, location: { search: '?id=' + profileData.builder.id, hash: '' }, URLSearchParams, console,
+    document: { querySelector: () => null, querySelectorAll: () => [], addEventListener() {} },
+    addEventListener() {}, history: { replaceState() {} },
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(ROLES_SRC, sandbox, { filename: 'profile-roles.js' });
+  vm.runInContext(PAGE_SRC, sandbox, { filename: 'profile.js' });
+  for (let i = 0; i < 6; i++) await new Promise((r) => setImmediate(r));
+  return { head: $('#profile-head').innerHTML, nums: $('#numbers-body').innerHTML, sub: $('#profile-sub').textContent };
+}
+const text = (html) => html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+
+await test('the real page draws the artist\'s tally, chips, tiles and surface rows', async () => {
+  const p = await boot(ARTIST);
+  assert.equal(p.sub, 'Builder 7 — Contributor · 9 pages approved');
+  assert.match(text(p.head), /Artist, main role Ideator/);
+  assert.match(text(p.head), /412 credits 9 pages approved \+38 this week/);
+  assert.match(p.head, /Answerable for:/, 'the responsibility line stays');
+  assert.match(text(p.nums), /^9 pages approved 3 surfaces 270 credits from pages \+38 this week 4 thoughts filed 1 ignited/);
+  assert.equal((p.nums.match(/kit-bars__row/g) || []).length, 3, 'one kit bar row per surface');
+  assert.match(text(p.nums), /Landing 6 of 12 tweaked/);
+  assert.ok(!/works shipped/i.test(p.sub + p.head + p.nums), 'nothing on an artist\'s header says works shipped');
+});
+
+await test('the real page draws the ideator\'s and the engineer\'s own headlines', async () => {
+  const i = await boot(IDEATOR);
+  assert.match(text(i.head), /186 credits 31 thoughts filed 7 ignited/);
+  assert.match(text(i.nums), /186~ total size/);
+  assert.match(text(i.nums), /72% still alive/);
+  assert.ok(!i.nums.includes('kit-bars'), 'no surface rows for an ideator');
+  const e = await boot({ ...ENGINEER, recent_ships: [] }); // the works ledger is not this suite's
+  assert.equal(e.sub, 'Builder 4 — Contributor · 24 works shipped');
+  assert.match(text(e.head), /4,630 credits 24 works shipped 1 karma/);
+});
+
+// ---- 3. the whole path ----------------------------------------------------
+
+await test('the server\'s roles block, through JSON, renders the artist\'s headline', async () => {
+  const seams = require('../src/module-seams.js');
+  const { readRoleStats } = require('../src/bongos/role-stats.js');
+  seams._reset();
+  seams.registerProvider('reward', {
+    craftForPreference: (d) => ({ engineer: 'engineer', artist: 'artist', ui: 'artist', ideator: 'ideator' }[d] || null),
+    async creditsByCraft(ids) { return new Map([[String(ids[0]), { engineer: 0, artist: 370, ideator: 42, other: 0, total: 412 }]]); },
+  });
+  seams.registerProvider('copy-desk.artistStats', async () => ARTIST.roles.artist);
+  seams.registerProvider('ideas.ideatorStats', async () => ARTIST.roles.ideator);
+  const roles = await readRoleStats('2001', {
+    shippedCount: 0,
+    getRoleChoice: async () => ({ main_discipline: 'artist', preferred_disciplines: ['artist', 'ideator'] }),
+  });
+  seams._reset();
+  const { roles: _fixture, ...rest } = ARTIST;
+  const p = await boot({ ...rest, roles });
+  assert.equal(p.sub, 'Builder 7 — Contributor · 9 pages approved');
+  assert.match(text(p.head), /Artist, main role Ideator/);
+  assert.match(text(p.head), /412 credits 9 pages approved \+38 this week/);
+  assert.equal((p.nums.match(/kit-bars__row/g) || []).length, 3);
+});
+
+summary();

package/tests/profile_ui_cross_project.mjs

@@ -29,6 +29,7 @@ import { fileURLToPath } from 'node:url';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile.js'), 'utf8');
+const ROLES_SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile-roles.js'), 'utf8');
 const HTML = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/profile.html'), 'utf8');
 
 // ---- fixtures -------------------------------------------------------------
@@ -98,6 +99,8 @@ async function boot({ search = '', me, profile } = {}) {
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
+  // The header is drawn from profile-roles.js (task 1004434), loaded first as the page does.
+  vm.runInContext(ROLES_SRC, sandbox, { filename: 'profile-roles.js' });
   vm.runInContext(SRC, sandbox, { filename: 'profile.js' });
   // load() is fire-and-forget; let its await chain settle.
   for (let i = 0; i < 4; i++) await new Promise((r) => setImmediate(r));