@bongos/core 1.19.511 → 1.19.513

package/tests/hall_audit.mjs

@@ -236,6 +236,90 @@ test('the session log pages on the kit — the last hand-roll is gone', () => {
   assert.match(read('sessions.html'), /hall-kit\.js/, 'and the page has to load the kit');
 });
 
+// ---- 6b. every hall bar series is drawn by the kit (task 1003445) ---------
+
+test('the kit is the ONLY thing in the hall that draws a bar series', () => {
+  // Charts were the one primitive the kit never got, and the hard rule in
+  // hall-ui/CLAUDE.md names pager/filter/tab/rail and stops — so the same
+  // horizontal bar got written THREE times, each with its own class family:
+  // the Curve's kinds (hall-render.js), Watch's Review-quality trend
+  // (watch.js) and the profile's craft mix (profile-charts.js `mixChart`).
+  // Nothing failed when the third copy landed, which is the whole reason this
+  // check exists rather than a sentence in a doc.
+  //
+  // Two halves, because one alone is escapable.
+  //
+  // (a) OWNERSHIP, the pager rule's own idiom: the kit stamps `.kit-bars` /
+  //     `.kit-spark` at runtime and callers pass DATA, so the class appearing
+  //     in another file is by construction a second implementation.
+  const OWNER = 'hall-kit.js';
+  const stamped = [];
+  for (const f of fs.readdirSync(HALL)) {
+    if (!/\.(html|js)$/.test(f) || f === OWNER) continue;
+    if (/class="kit-(?:bars|spark|plot)[\s"_-]/.test(read(f))) stamped.push(f);
+  }
+  assert.deepEqual(stamped, [],
+    `${stamped.join(', ')} writes the kit's own chart classes by hand — call `
+    + 'OTBKit.barSeriesHtml / sparklineHtml / plotSvgHtml instead.');
+
+  // No page may draw an SVG series of its own either — a <path>/<rect>/
+  // <polyline> built in a template string IS chart drawing, whatever it is
+  // classed. This is what the narc caught on the first round: the bars were
+  // unified while two hand-rolled SVG charts stayed behind.
+  const svgDrawers = [];
+  for (const f of fs.readdirSync(HALL)) {
+    if (!/\.js$/.test(f) || f === OWNER) continue;
+    const src = read(f);
+    if (/<(?:path|polyline|rect)\b[^>]*\b(?:d|points)="\$\{/.test(src)) svgDrawers.push(f);
+  }
+  assert.deepEqual(svgDrawers, [],
+    `${svgDrawers.join(', ')} builds SVG series geometry by hand — the kit owns the `
+    + 'shapes (timeStepSeriesHtml, columnSeriesHtml, sparklineHtml) and plotSvgHtml owns '
+    + 'the axis frame; a page composes them and wires its own readout.');
+
+  // (b) SHAPE, so a SEVENTH copy under a fresh class family is caught too —
+  //     which (a) alone would miss, and which is exactly how copies two and
+  //     three arrived. A bar series is a percentage-width fill inside a
+  //     track/bar/fill-named element.
+  //
+  //     The allowlist is METERS, not series, and the distinction is real: a
+  //     meter shows ONE value against a fixed 0-100 scale (and bands it), a
+  //     series shows several values against each other's computed max. The kit
+  //     draws the second; folding the first into it would mean inventing a
+  //     scale the meter does not have. Adding a name here is where the
+  //     conversation happens — do not add one to make a chart pass.
+  const METERS = new Set([
+    'idea.js',   // .ig-score — one Full-Idea completeness gauge, banded full/part/thin
+    'ideas.js',  // .fi-mrow  — the composer's per-field completeness, driven imperatively
+  ]);
+  const handRolled = [];
+  for (const f of fs.readdirSync(HALL)) {
+    if (!/\.js$/.test(f) || f === OWNER || METERS.has(f)) continue;
+    const src = read(f);
+    if (/class="[^"]*(?:__|-)(?:fill|bar|track)[^"]*"[^>]*style="width:/.test(src)) handRolled.push(f);
+  }
+  assert.deepEqual(handRolled, [],
+    `${handRolled.join(', ')} draws a bar series by hand — call OTBKit.barSeriesHtml(rows, opts). `
+    + 'Geometry and tone are options (labelWidth/valueWidth/barHeight/radius/track/tone), so a new '
+    + 'chart needs no new drawing code and no new class family.');
+});
+
+test('the three bar copies are gone, and their class families with them', () => {
+  // The specific copies this rule replaced, pinned by name so their return is
+  // loud. Behaviour is exercised for real in tests/hall_kit_charts.mjs.
+  // Comments stripped: each sheet keeps a line SAYING which family it retired,
+  // and a substring check would read that sentence as the family still living.
+  const css = ['style.css', 'watch.css', 'profile.css']
+    .map((f) => read(f).replace(/\/\*[\s\S]*?\*\//g, '')).join('\n');
+  for (const dead of ['curve__kind-', 'curve__chart', 'watch-trend', 'pmix']) {
+    assert.ok(!css.includes(dead), `${dead} is the kit's .kit-bars/.kit-chart now`);
+  }
+  assert.match(read('hall-render.js'), /OTBKit\.barSeriesHtml\(/, 'the Curve\'s kinds draw through the kit');
+  assert.match(read('watch.js'), /OTBKit\.barSeriesHtml\(/, 'Watch\'s trend draws through the kit');
+  assert.match(read('profile-charts.js'), /OTBKit\.barSeriesHtml\(/, 'the craft mix draws through the kit');
+  assert.match(read('hall-render.js'), /OTBKit\.sparklineHtml\(/, 'and the Curve\'s line does too');
+});
+
 test('the peer-recognition feed is paged through OTBKit, not by hand', () => {
   assert.match(read('hall-widgets.js'), /pagerBarHtml\('acclaim'/, 'the acclaim card stamps the kit pager bar');
   const js = read('builders.js');

package/tests/hall_kit_charts.mjs

@@ -0,0 +1,328 @@
+// tests/hall_kit_charts.mjs — the hall's ONE chart primitive (task 1003445).
+//
+// Runs the REAL hall-kit.js, and for the three migrated call sites runs the
+// real page beside it in a vm, so what is asserted is the markup a reader
+// actually gets — not a stub agreeing with a stub. That mattered here: the
+// three copies this primitive replaced were structurally identical and
+// differed only in geometry and tone, so a test that mocked the kit would
+// have passed on a primitive that dropped either.
+//
+// What it holds:
+//   1. the arithmetic — scaling, a shared max, cumulation, the degenerate sets
+//   2. the markup — one class family, geometry as custom properties
+//   3. escaping — a label is server data and lands in innerHTML
+//   4. the three call sites, each drawing through the kit at its own geometry
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8').replace(/\r\n/g, '\n');
+
+// The kit is dependency-free and node-require-safe by contract, so it loads
+// directly — no DOM, no window. If that ever stops being true, this import is
+// the first thing that fails, which is the point.
+const kitPath = path.join(HALL, 'hall-kit.js');
+const kit = await import(`file://${kitPath.replace(/\\/g, '/')}`).then((m) => m.default);
+const kitSrc = read('hall-kit.js');
+
+// ---- 1. the arithmetic ------------------------------------------------------
+
+test('a bar is its share of the largest value in the set', () => {
+  const html = kit.barSeriesHtml([
+    { label: 'a', value: 10 },
+    { label: 'b', value: 5 },
+    { label: 'c', value: 0 },
+  ]);
+  const widths = [...html.matchAll(/width:(\d+)%/g)].map((m) => Number(m[1]));
+  assert.deepEqual(widths, [100, 50, 0], 'the max is 100%, and zero is drawn as empty, not omitted');
+});
+
+test('a caller-supplied max lets two series share one scale', () => {
+  // Without this, two charts side by side each normalise to their own biggest
+  // value and a smaller series draws taller bars than a larger one.
+  const html = kit.barSeriesHtml([{ label: 'a', value: 5 }], { max: 20 });
+  assert.match(html, /width:25%/);
+});
+
+test('an all-zero set draws empty tracks rather than dividing by zero', () => {
+  const html = kit.barSeriesHtml([{ label: 'a', value: 0 }, { label: 'b', value: 0 }]);
+  assert.match(html, /width:0%/);
+  assert.doesNotMatch(html, /NaN|Infinity/);
+});
+
+test('a non-finite value reads as zero — a gap-filled feed sends nulls', () => {
+  const html = kit.barSeriesHtml([{ label: 'a', value: 4 }, { label: 'b', value: null }]);
+  assert.doesNotMatch(html, /NaN/);
+  assert.match(html, /width:0%/);
+});
+
+test('an empty set renders nothing at all, so a caller can test for it', () => {
+  // '' rather than an empty container: every call site wants to substitute its
+  // own "nothing in this window" line, and a bare wrapper would defeat that.
+  assert.equal(kit.barSeriesHtml([]), '');
+  assert.equal(kit.barSeriesHtml(null), '');
+  assert.equal(kit.barSeriesHtml([{ value: 1 }]), '', 'a row with no label is not a row');
+});
+
+test('cumulate is a running total that survives holes', () => {
+  assert.deepEqual(kit.cumulate([1, 2, 3]), [1, 3, 6]);
+  assert.deepEqual(kit.cumulate([1, null, 3]), [1, 1, 4], 'a null adds nothing, it does not reset');
+  assert.deepEqual(kit.cumulate([]), []);
+});
+
+test('the line is scaled to its own min and max, and a flat series sits mid-box', () => {
+  const g = kit.linePoints([0, 10], { width: 100, height: 50, pad: 0 });
+  const ys = g.points.split(' ').map((p) => Number(p.split(',')[1]));
+  assert.equal(ys[0], 50, 'the minimum sits on the floor');
+  assert.equal(ys[1], 0, 'the maximum sits on the ceiling');
+  // span 0 would divide by zero; the guard puts a flat line halfway up.
+  const flat = kit.linePoints([3, 3, 3], { width: 100, height: 50, pad: 0 });
+  const flatYs = flat.points.split(' ').map((p) => Number(p.split(',')[1]));
+  assert.deepEqual(flatYs, [50, 50, 50]);
+  assert.ok(Number.isFinite(flatYs[0]));
+});
+
+test('a running-total line is composed, not a second option', () => {
+  // There is deliberately no `cumulative` flag on linePoints: `cumulate` is
+  // exported, so the two compose. One way to do it, and no option whose only
+  // caller is this test.
+  const plain = kit.linePoints([1, 1, 1], { width: 100, height: 50, pad: 0 });
+  const cumul = kit.linePoints(kit.cumulate([1, 1, 1]), { width: 100, height: 50, pad: 0 });
+  assert.deepEqual(cumul.nums, [1, 2, 3]);
+  assert.notEqual(plain.points, cumul.points, 'a running total is a different line');
+  assert.doesNotMatch(kitSrc, /opts\.cumulative/, 'and the flag is gone from the kit');
+});
+
+// ---- 2. the markup ---------------------------------------------------------
+
+test('geometry rides custom properties, so a new chart needs no new CSS', () => {
+  const html = kit.barSeriesHtml([{ label: 'a', value: 1 }], {
+    labelWidth: '64px', valueWidth: '96px', barHeight: '6px', pill: true,
+  });
+  assert.match(html, /--kit-bars-label-w:64px/);
+  assert.match(html, /--kit-bars-val-w:96px/);
+  assert.match(html, /--kit-bars-h:6px/);
+  assert.match(html, /--kit-bars-radius:var\(--radius-pill\)/);
+});
+
+test('a style value that could break out of its declaration is dropped', () => {
+  // These land in a style attribute, so they are whitelisted as lengths rather
+  // than escaped — a ';' would end the declaration and start another.
+  const html = kit.barSeriesHtml([{ label: 'a', value: 1 }], {
+    labelWidth: '64px;background:url(http://x)', barHeight: '}*{display:none',
+  });
+  assert.doesNotMatch(html, /background|url\(|display:none/);
+  assert.doesNotMatch(html, /--kit-bars-label-w/, 'a rejected length is omitted, not half-written');
+});
+
+test('a label is escaped — it is server data landing in innerHTML', () => {
+  const html = kit.barSeriesHtml([{ label: '<img onerror=x>', value: 1, valueLabel: '<b>' }]);
+  assert.doesNotMatch(html, /<img|<b>/);
+  assert.match(html, /&lt;img/);
+});
+
+test('the track carries no information, so it is hidden from a reader', () => {
+  // The value cell already says the number in words; a screen reader hearing
+  // the track too would hear every row twice.
+  const html = kit.barSeriesHtml([{ label: 'a', value: 1 }]);
+  assert.match(html, /class="kit-bars__track" aria-hidden="true"/);
+});
+
+test('list semantics are opt-in, because only one call site is announced as a list', () => {
+  assert.doesNotMatch(kit.barSeriesHtml([{ label: 'a', value: 1 }]), /role="list/);
+  const asList = kit.barSeriesHtml([{ label: 'a', value: 1 }], { list: true, ariaLabel: 'Craft mix' });
+  assert.match(asList, /role="list" aria-label="Craft mix"/);
+  assert.match(asList, /role="listitem"/);
+});
+
+test('a one-point line draws a dot, or the chart reads as empty', () => {
+  assert.match(kit.sparklineHtml([7]), /<circle/);
+  assert.doesNotMatch(kit.sparklineHtml([7, 8]), /<circle/);
+});
+
+test('no data is an empty labelled svg, never a broken polyline', () => {
+  const html = kit.sparklineHtml([]);
+  assert.match(html, /aria-label="no data"/);
+  assert.doesNotMatch(html, /polyline/);
+});
+
+test('the caller owns the line colour — the Curve spends four', () => {
+  assert.match(kit.sparklineHtml([1, 2], { color: 'var(--terracotta)' }), /stroke="var\(--terracotta\)"/);
+});
+
+test('the chart frame does not know which shape it holds', () => {
+  const withChart = kit.chartCardHtml('Title', '<svg></svg>', 'foot');
+  assert.match(withChart, /kit-chart__title">Title/);
+  assert.match(withChart, /kit-chart__foot">foot/);
+  // No inner → the frame says so itself, so no call site writes that line.
+  assert.match(kit.chartCardHtml('T', '', 'f'), /kit-chart__empty/);
+});
+
+// ---- 2b. the plot: the axis frame both plotted charts shared ---------------
+
+test('the step line holds its value, then rises — that is what cumulative means', () => {
+  // A straight polyline between samples would claim the total grew smoothly
+  // between two ships. It did not: it held, then jumped.
+  const g = kit.timeStepGeometry(
+    [{ x: 0, value: 1 }, { x: 10, value: 5 }],
+    { x0: 0, x1: 10, yMax: 5, width: 100, height: 100, pad: { l: 0, r: 0, t: 0, b: 0 } },
+  );
+  // Two L commands per later point: across at the OLD height, then up.
+  assert.equal((g.d.match(/ L/g) || []).length, 3, 'across, up, then out to the axis end');
+  assert.match(g.d, /^M0\.0,80\.0/, 'the first sample sits at 1/5 of the box');
+});
+
+test('the plotted area closes on the axis, so a fill cannot leak upward', () => {
+  const g = kit.timeStepGeometry([{ x: 0, value: 2 }], { x0: 0, x1: 4, yMax: 2 });
+  assert.match(g.area, /Z$/, 'the area is a closed path');
+  assert.ok(g.area.startsWith(g.d), 'it is the line, then down to the base and back');
+});
+
+test('a degenerate window does not divide by zero', () => {
+  // x0 === x1 (a single day, no window) and a zero max are both reachable from
+  // a real feed: one ship today, or a ledger nothing has reached.
+  for (const opts of [{ x0: 5, x1: 5, yMax: 3 }, { x0: 0, x1: 10, yMax: 0 }]) {
+    const g = kit.timeStepGeometry([{ x: 5, value: 0 }], opts);
+    assert.doesNotMatch(g.d, /NaN|Infinity/, JSON.stringify(opts));
+  }
+  assert.deepEqual(kit.timeStepGeometry([], {}).xs, [], 'and an empty series draws nothing');
+});
+
+test('columns cap their width and keep a gap, however few weeks there are', () => {
+  const one = kit.columnSeriesHtml([5], { width: 320 });
+  const w = Number(/width="([\d.]+)"/.exec(one.body)?.[1] ?? /H([\d.]+)/.exec(one.body)?.[1] ?? 0);
+  // One bucket gets the whole plot as its slot; without the cap it would draw
+  // a 300px-wide column.
+  assert.ok(one.body.length > 0);
+  assert.ok(!/width="[3-9]\d\d/.test(one.body), `a lone column is capped, got width ${w}`);
+});
+
+test('a zero bucket draws a stub on the axis, not a gap', () => {
+  // A missing week and a week with no ships are different facts; an absent
+  // column reads as the first.
+  const cols = kit.columnSeriesHtml([3, 0, 2]);
+  assert.match(cols.body, /kit-plot__col--empty/);
+  // Count ELEMENTS, not class occurrences — the empty one is classed
+  // `kit-plot__col kit-plot__col--empty`, so the bare name appears twice on it.
+  assert.equal((cols.body.match(/class="kit-plot__col/g) || []).length, 3, 'three weeks, three marks');
+  assert.equal(cols.xs.length, 3);
+});
+
+test('the plot frame carries the axis, the hidden crosshair and both ticks', () => {
+  const svg = kit.plotSvgHtml({ series: '<path/>', ariaLabel: 'Works', leftTick: 'Aug 1', rightTick: 'today' });
+  assert.match(svg, /class="kit-plot"/);
+  assert.match(svg, /class="kit-plot__axis"/);
+  assert.match(svg, /class="kit-plot__hair"[^>]*visibility:hidden/, 'the crosshair starts hidden');
+  assert.match(svg, /Aug 1/);
+  assert.match(svg, /today/);
+  assert.match(svg, /aria-label="Works"/);
+  // Walkable by arrow key, therefore reachable by tab.
+  assert.match(svg, /tabindex="0"/);
+  assert.match(svg, /role="img"/);
+});
+
+test('the plot escapes its aria-label and ticks — both are page data', () => {
+  const svg = kit.plotSvgHtml({ ariaLabel: '"><script>x</script>', leftTick: '<b>' });
+  assert.doesNotMatch(svg, /<script|<b>/);
+});
+
+test('a plot labels exactly one value, in ink', () => {
+  const label = kit.plotValueLabelHtml(10, 20, '42', 'end');
+  assert.match(label, /class="kit-plot__end"/);
+  assert.match(label, /text-anchor="end"/);
+  assert.match(label, />42</);
+});
+
+// ---- 3. the three migrated call sites --------------------------------------
+
+// Each runs the REAL page source, so these assert the request the page makes
+// of the kit rather than the kit's own defaults.
+
+function runPage(file, extraWindow = {}) {
+  const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const sandbox = {
+    window: {
+      OTB: { escapeHtml: esc, $: () => null, fmtNum: (n) => String(n ?? 0), fmtDate: (s) => String(s ?? '') },
+      __BRANDING__: { currency: { label: 'drachmae' } },
+      ...extraWindow,
+    },
+    document: { addEventListener() {}, getElementById: () => null, querySelector: () => null },
+    console, Date, Map, Set, Math, Number, String, Array, Object, JSON, Infinity,
+    URLSearchParams, Promise, RegExp, isNaN, parseInt, parseFloat,
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(read('hall-kit.js'), sandbox, { filename: 'hall-kit.js' });
+  vm.runInContext(read(file), sandbox, { filename: file });
+  return sandbox;
+}
+
+test('the profile craft mix asks for its measured geometry, not the default', () => {
+  // .pmix carried a square-left bar (it grows from an axis), a soft track and
+  // a label that could shrink to 72px. All three are options now; losing any
+  // of them would be a silent visual regression on a surface the owner had
+  // already accepted (task 1003489).
+  const src = read('profile-charts.js');
+  assert.match(src, /OTBKit\.barSeriesHtml\(/);
+  assert.match(src, /radius: '0 4px 4px 0'/, 'the bar keeps its square left edge');
+  assert.match(src, /track: 'soft'/);
+  assert.match(src, /labelWidth: 'minmax\(72px, 110px\)'/);
+  assert.match(src, /list: true/, 'the mix is announced as a list');
+});
+
+test('Watch\'s trend takes the neutral tone — on an oversight page the accent is the pressable\'s', () => {
+  const src = read('watch.js');
+  assert.match(src, /tone: 'neutral'/);
+  assert.match(src, /labelWidth: '64px'/);
+  assert.match(src, /valueWidth: '96px'/);
+  assert.match(src, /barHeight: '6px'/);
+  assert.match(src, /pill: true/);
+});
+
+test('the Curve keeps its own line colour, which is not the kit default', () => {
+  const src = read('hall-render.js');
+  assert.match(src, /sparklineHtml\(values, \{ color: 'var\(--accent-deep\)'/,
+    'the Curve\'s first chart is accent-deep; the kit\'s fallback is --accent');
+  assert.match(src, /OTBKit\.barSeriesHtml\(/, 'and its kinds row draws through the kit');
+});
+
+test('the kit is loaded before every page that draws through it', () => {
+  // A page script reading window.OTBKit at render time with the kit loaded
+  // after it is a blank chart in production and a green unit suite.
+  for (const [page, script] of [
+    ['index.html', 'hall-render.js'],
+    ['watch.html', 'watch.js'],
+    ['profile.html', 'profile-charts.js'],
+  ]) {
+    // The loaded ORDER, read off the script tags — index.html's prose mentions
+    // hall-render.js ~90 lines above where it loads it, so a substring search
+    // on the whole file answers the wrong question.
+    const loaded = [...read(page).matchAll(/<script[^>]+src="([^"?]+)/g)]
+      .map((m) => m[1].split('/').pop());
+    const kitAt = loaded.indexOf('hall-kit.js');
+    const pageAt = loaded.indexOf(script);
+    assert.ok(kitAt > -1, `${page} must load hall-kit.js`);
+    assert.ok(pageAt > -1, `${page} must load ${script}`);
+    assert.ok(kitAt < pageAt, `${page} must load hall-kit.js BEFORE ${script}`);
+  }
+});
+
+test('the migrated pages run for real against the kit and emit its classes', () => {
+  // hall-render.js is a factory, so this proves the whole file parses and the
+  // chart helpers resolve against the real kit — the failure mode a
+  // source-text assertion cannot see.
+  const s = runPage('hall-render.js');
+  assert.equal(typeof s.window.OTBHallRender, 'function', 'the renderer factory survived the migration');
+  assert.equal(typeof s.window.OTBKit.barSeriesHtml, 'function');
+  assert.match(
+    s.window.OTBKit.barSeriesHtml([{ label: 'engineer', value: 3 }]),
+    /class="kit-bars"/,
+  );
+});

package/tests/hall_profile_world.mjs

@@ -53,7 +53,14 @@ const stripComments = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
 const html = read('profile.html');
 const profileJs = read('profile.js');
 const chartsJs = read('profile-charts.js');
+// task 1003445: the charts draw their bars through OTBKit.barSeriesHtml, so the
+// sandbox runs the REAL kit beside the real page rather than a stub agreeing
+// with a stub (the tests/sessions_kit_pager.mjs pattern). A stub here would
+// still pass if the kit's markup changed underneath the page.
+const kitJs = read('hall-kit.js');
 const profileCss = stripComments(read('profile.css'));
+// The plot's dataviz spec lives in the kit's sheet since task 1003445.
+const styleCss = stripComments(read('style.css'));
 
 const GROUPS = ['overview', 'works', 'activity', 'connections'];
 
@@ -120,13 +127,21 @@ test('profile-charts.js loads before profile.js, and profile.js hands it the pag
 });
 
 test('the marks keep the dataviz specs: 2px accent line, 10% wash, hairline solid axis, an 8px end dot with a surface ring', () => {
-  assert.match(profileCss, /\.pchart__line \{ fill: none; stroke: var\(--accent\); stroke-width: 2;/);
-  assert.match(profileCss, /\.pchart__area \{ fill: color-mix\(in srgb, var\(--accent\) 10%, transparent\)/);
-  assert.match(profileCss, /\.pchart__axis, \.pchart__hair \{ stroke: var\(--rule-soft\); stroke-width: 1; \}/);
-  assert.match(profileCss, /\.pchart__dot \{ fill: var\(--accent\); stroke: var\(--bg-card\); stroke-width: 2; \}/);
-  assert.match(chartsJs, /r="4"/, 'the end dot is r=4 — an 8px marker');
-  assert.match(profileCss, /\.pchart__end \{[^}]*fill: var\(--ink\)/, 'the end label wears ink, not the series colour');
+  // task 1003445: the PLOT moved to OTBKit (`.kit-plot*` in style.css) — the
+  // same frame had been drawn twice by profile-charts.js. The spec is asserted
+  // wherever it lives, with the same values, because it is measured rather
+  // than chosen; what must not happen is the spec quietly not being checked
+  // because its class family was renamed.
+  assert.match(styleCss, /\.kit-plot__line \{ fill: none; stroke: var\(--accent\); stroke-width: 2;/);
+  assert.match(styleCss, /\.kit-plot__area \{ fill: color-mix\(in srgb, var\(--accent\) 10%, transparent\)/);
+  assert.match(styleCss, /\.kit-plot__axis, \.kit-plot__hair \{ stroke: var\(--rule-soft\); stroke-width: 1; \}/);
+  assert.match(styleCss, /\.kit-plot__dot \{ fill: var\(--accent\); stroke: var\(--bg-card\); stroke-width: 2; \}/);
+  assert.match(kitJs, /r="4"/, 'the end dot is r=4 — an 8px marker');
+  assert.match(styleCss, /\.kit-plot__end \{[^}]*fill: var\(--ink\)/, 'the labelled value wears ink, not the series colour');
+  // The page's own sheet keeps the figure chrome, and still spends no alias.
   assert.doesNotMatch(profileCss, /var\(--(surface|surface-2|border|border-strong|accent-weak|accent-text)\)/, 'no compat alias spent');
+  assert.doesNotMatch(profileCss, /\.pchart__(line|area|axis|hair|dot|col|end|tick)\b/,
+    'the plot families are the kit\'s now — a copy left here is a second source of truth');
 });
 
 // ---- the charts: arithmetic, in a sandbox --------------------------------------
@@ -146,6 +161,9 @@ function bootCharts() {
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
+  // The kit first — profile.html pins that order too (hall-kit.js before
+  // profile-charts.js), and the page reads window.OTBKit at render time.
+  vm.runInContext(kitJs, sandbox, { filename: 'hall-kit.js' });
   vm.runInContext(chartsJs, sandbox, { filename: 'profile-charts.js' });
   return sandbox.window.OTBProfileCharts;
 }
@@ -277,6 +295,9 @@ function bootRender({ rows, status = 200, analytics = null, ledger = [] }) {
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
+  // The kit first — profile.html pins that order too (hall-kit.js before
+  // profile-charts.js), and the page reads window.OTBKit at render time.
+  vm.runInContext(kitJs, sandbox, { filename: 'hall-kit.js' });
   vm.runInContext(chartsJs, sandbox, { filename: 'profile-charts.js' });
   return { C: sandbox.window.OTBProfileCharts, api, requests, mount, controls };
 }

package/tests/helpers.mjs

@@ -188,3 +188,164 @@ export function taskRoutesSource(modulesDir = path.join(ROOT, 'modules')) {
   return familySource(path.join(modulesDir, 'lifecycle', 'routes'),
     (f) => f === 'tasks.js' || (f.startsWith('task-') && f.endsWith('.js')));
 }
+
+// ===========================================================================
+// A minimal DOM that actually PARSES what a page script writes into innerHTML
+// (task 1003516, extracted here by task 1002332 when the access-requests queue
+// needed the same harness). querySelector resolves only if the element is
+// genuinely there, form fields carry the values the file rendered (escaping
+// included), and handlers captured by addEventListener run for real — which is
+// what makes a hall page testable at all: there is no jsdom in this repo.
+// ===========================================================================
+const VOID_TAGS = new Set(['input', 'br', 'img', 'hr', 'meta', 'link']);
+
+function decodeEntities(s) {
+  return String(s)
+    .replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"').replace(/&#39;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+
+function parseAttrs(text) {
+  const out = {};
+  const re = /([\w:-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g;
+  let m;
+  while ((m = re.exec(text))) {
+    const raw = m[2] !== undefined ? m[2] : m[3] !== undefined ? m[3] : m[4] !== undefined ? m[4] : '';
+    out[m[1].toLowerCase()] = decodeEntities(raw);
+  }
+  return out;
+}
+
+// Compound selectors only (tag / .class / #id / [attr] / [attr="v"], comma lists)
+// — that is every selector task-detail.js uses, and refusing anything richer
+// keeps the stub honest about what it can prove.
+function matchesOne(el, sel) {
+  let ok = true;
+  const re = /([a-zA-Z][\w-]*)|\.([\w-]+)|#([\w-]+)|\[([\w:-]+)(?:=["']([^"']*)["'])?\]/g;
+  let m;
+  while ((m = re.exec(sel))) {
+    if (m[1]) ok = ok && el.tagName === m[1].toLowerCase();
+    else if (m[2]) ok = ok && String(el.className || '').split(/\s+/).includes(m[2]);
+    else if (m[3]) ok = ok && el.id === m[3];
+    else if (m[4]) {
+      const have = el.attrs[m[4].toLowerCase()];
+      ok = ok && (m[5] === undefined ? have !== undefined : have === m[5]);
+    }
+  }
+  return ok;
+}
+export const matches = (el, sel) => String(sel).split(',').map((s) => s.trim()).filter(Boolean).some((s) => matchesOne(el, s));
+
+export function walk(el, fn) {
+  for (const child of el.children) {
+    const hit = fn(child);
+    if (hit) return hit;
+    const deeper = walk(child, fn);
+    if (deeper) return deeper;
+  }
+  return null;
+}
+
+export function makeEl(tagName, attrs = {}) {
+  const el = {
+    tagName: String(tagName).toLowerCase(),
+    attrs,
+    children: [],
+    parentNode: null,
+    className: attrs.class || '',
+    id: attrs.id || '',
+    name: attrs.name,
+    dataset: {},
+    disabled: 'disabled' in attrs,
+    style: {},
+    listeners: {},
+    _text: '',
+    _html: null,
+    _value: null,
+
+    get value() {
+      if (this._value !== null) return this._value;
+      if (this.tagName === 'select') {
+        const opts = this.querySelectorAll('option');
+        const chosen = opts.find((o) => 'selected' in o.attrs) || opts[0];
+        return chosen ? (chosen.attrs.value !== undefined ? chosen.attrs.value : chosen.textContent) : '';
+      }
+      return this.attrs.value !== undefined ? this.attrs.value : '';
+    },
+    set value(v) { this._value = String(v); },
+
+    get textContent() { return this._text + this.children.map((c) => c.textContent).join(''); },
+    set textContent(v) { this._text = String(v == null ? '' : v); this.children = []; this._html = null; },
+
+    get innerHTML() { return this._html === null ? '' : this._html; },
+    set innerHTML(v) { this._html = String(v); this._value = null; parseInto(this, this._html); },
+
+    setAttribute(k, v) { this.attrs[String(k).toLowerCase()] = String(v); },
+    getAttribute(k) { const v = this.attrs[String(k).toLowerCase()]; return v === undefined ? null : v; },
+    removeAttribute(k) { delete this.attrs[String(k).toLowerCase()]; },
+    appendChild(child) { child.parentNode = this; this.children.push(child); return child; },
+    remove() {
+      const p = this.parentNode;
+      if (!p) return;
+      p.children = p.children.filter((c) => c !== this);
+      this.parentNode = null;
+    },
+    querySelector(sel) { return walk(this, (c) => (matches(c, sel) ? c : null)); },
+    querySelectorAll(sel) {
+      const out = [];
+      walk(this, (c) => { if (matches(c, sel)) out.push(c); return null; });
+      return out;
+    },
+    closest(sel) {
+      let node = this;
+      while (node) { if (matches(node, sel)) return node; node = node.parentNode; }
+      return null;
+    },
+    addEventListener(type, fn) { (this.listeners[type] = this.listeners[type] || []).push(fn); },
+    focus() {},
+    fire(type, event) { (this.listeners[type] || []).forEach((fn) => fn(event)); },
+  };
+  for (const [k, v] of Object.entries(attrs)) {
+    if (!k.startsWith('data-')) continue;
+    el.dataset[k.slice(5).replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = v;
+  }
+  return el;
+}
+
+// The reserved names a <form>'s named-field shorthand (form.title.value) must
+// never shadow — everything else on the element is fair game, same as the DOM.
+const FORM_FIELD_RESERVED = new Set(['tagName', 'attrs', 'children', 'parentNode', 'className', 'id', 'dataset',
+  'disabled', 'style', 'listeners', 'value', 'textContent', 'innerHTML', 'name']);
+
+export function parseInto(host, html) {
+  host.children = [];
+  host._text = '';
+  const stack = [host];
+  const re = /<(\/?)([a-zA-Z][\w-]*)([^>]*?)(\/?)>/g;
+  let last = 0;
+  let m;
+  const addText = (raw) => { if (raw) stack[stack.length - 1]._text += decodeEntities(raw); };
+  while ((m = re.exec(html))) {
+    addText(html.slice(last, m.index));
+    last = re.lastIndex;
+    const tag = m[2].toLowerCase();
+    if (m[1]) {
+      for (let i = stack.length - 1; i > 0; i--) if (stack[i].tagName === tag) { stack.length = i; break; }
+      continue;
+    }
+    const el = makeEl(tag, parseAttrs(m[3]));
+    stack[stack.length - 1].appendChild(el);
+    if (!m[4] && !VOID_TAGS.has(tag)) stack.push(el);
+  }
+  addText(html.slice(last));
+  // Named-field access on every form the markup just produced.
+  walk(host, (el) => {
+    if (el.tagName !== 'form') return null;
+    for (const field of el.querySelectorAll('input, select, textarea')) {
+      if (!field.name || FORM_FIELD_RESERVED.has(field.name) || field.name in el) continue;
+      el[field.name] = field;
+    }
+    return null;
+  });
+}