@bongos/core 1.19.946 → 1.19.948

package/modules/hall-ui/public/goal-map-lib.js

@@ -0,0 +1,356 @@
+// goal-map-lib.js — the goal map's model and layout, pure (task 1003479, goal
+// 1000089, ADR 0227 §6 item 3 and its §10.4 amendment).
+//
+// WHAT THE MAP IS. Goals are the nodes; an edge says "some tasks in goal A wait on
+// tasks in goal B". ADR 0227 measured the real corpus (70 goals, 66 task edges
+// across 33 goal pairs) and changed the shape to build: HALF the goals have no
+// edge at all, and even the connected half is not one network but a large cluster
+// and a scatter of pairs. So this file does three things the picture needs and a
+// force layout would get wrong:
+//   1. it SPLITS the goals into connected and stand-alone (§10.4 item 1) — the
+//      stand-alone ones are a list, never dots on a canvas that has nothing to say
+//      about them;
+//   2. it finds the CLUSTERS (§10.4 item 2), largest first, so the view reads as
+//      "one cluster and a scatter of pairs" and not as a network;
+//   3. it lays each cluster out in LAYERS — a goal sits one column right of the
+//      furthest goal it waits on — which is deterministic (same data, same
+//      picture, no random seed) and reads as a sequence rather than as a hairball.
+//
+// IT DRAWS NOTHING THE TABLE DOES NOT ALSO SAY. Every fact in the picture —
+// which goals, how many tasks, which category, which goal waits on which — is a
+// row or a cell from tableRows(), and the page ships the table by default, not
+// behind a toggle (ADR 0227 §5). Category is a WORD on every node as well as a
+// colour: the ADR 0192 set is not colour-distinguishable at this many nodes.
+//
+// NEVER VIEW A OR D. There is no function here that takes a task, and no mode
+// that would densify: the only input is the aggregate GET /goals/graph returns,
+// which carries no task identity at all (ADR 0227 §7).
+//
+// Pure — no window, no DOM, no fetch — and Node-require-safe (the blockers-lib.js
+// / goals-lib.js precedent) so tests/goal_map_lib.mjs runs the real layout over
+// the real fixture instead of agreeing with a copy of it.
+(function (root, factory) {
+  var mod = factory();
+  if (typeof module !== 'undefined' && module.exports) module.exports = mod;
+  else root.OTBGoalMapLib = mod;
+}(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  // Geometry. A node is wide enough for ~24 characters of title at the page's
+  // label size (ADR 0227 measured a 48px pitch as the floor for a label to fit;
+  // these are well past it), and the gaps leave room for an edge to be seen.
+  var NODE_W = 168;
+  // 68, not 60: the extra 8px hold the weight bar (task 1003479 grader follow-up
+  // — "node weight = task count" was text-only; the bar makes it a real visual
+  // size, not just a number to read).
+  var NODE_H = 68;
+  var GAP_X = 52;
+  var GAP_Y = 14;
+  var PAD = 16;
+  var BLOCK_GAP = 28;
+  var MIN_ROW_W = 760;
+  // The categorical colour channel repeats after this many; the WORD on every
+  // node is what distinguishes them, so a repeat costs nothing.
+  var CATEGORY_COLOURS = 8;
+  var TITLE_CHARS = 24;
+  var SUB_CHARS = 30;
+
+  function num(id) { return Number(id); }
+  function byNumericId(a, b) { return num(a) - num(b); }
+
+  function clip(text, max) {
+    var t = String(text == null ? '' : text);
+    return t.length > max ? t.slice(0, max - 1).replace(/\s+$/, '') + '…' : t;
+  }
+
+  // A private goal the viewer cannot read arrives with title null. It stays a node
+  // (dropping it would falsely isolate its neighbours) and is named as what it is.
+  function displayTitle(node) { return node.title ? String(node.title) : 'A private goal'; }
+
+  function plural(n, one, many) { return n + ' ' + (n === 1 ? one : (many || one + 's')); }
+
+  // analyse — the graph's structure, with no geometry: nodes by id, who each goal
+  // waits on and who needs it, the connected/stand-alone split, and the clusters.
+  function analyse(payload) {
+    var rawNodes = (payload && Array.isArray(payload.nodes)) ? payload.nodes : [];
+    var rawEdges = (payload && Array.isArray(payload.edges)) ? payload.edges : [];
+    var byId = {};
+    var order = [];
+    rawNodes.forEach(function (n) {
+      var id = String(n.goal_id);
+      if (byId[id]) return;
+      byId[id] = Object.assign({}, n, { id: id });
+      order.push(id);
+    });
+
+    var waits = {};
+    var needed = {};
+    var edges = [];
+    var seen = {};
+    rawEdges.forEach(function (e) {
+      var from = String(e.from);
+      var to = String(e.to);
+      if (from === to || !byId[from] || !byId[to] || seen[from + '>' + to]) return;
+      seen[from + '>' + to] = true;
+      var count = Number(e.count) || 0;
+      edges.push({ from: from, to: to, count: count });
+      (waits[from] = waits[from] || []).push({ id: to, count: count });
+      (needed[to] = needed[to] || []).push({ id: from, count: count });
+    });
+    function bySize(a, b) { return (b.count - a.count) || byNumericId(a.id, b.id); }
+    Object.keys(waits).forEach(function (k) { waits[k].sort(bySize); });
+    Object.keys(needed).forEach(function (k) { needed[k].sort(bySize); });
+
+    // Union-find over the connected goals only.
+    var parent = {};
+    function find(x) { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }
+    function union(a, b) { var ra = find(a); var rb = find(b); if (ra !== rb) parent[rb] = ra; }
+    order.forEach(function (id) { if (waits[id] || needed[id]) parent[id] = id; });
+    edges.forEach(function (e) { union(e.from, e.to); });
+
+    var groups = {};
+    Object.keys(parent).forEach(function (id) { (groups[find(id)] = groups[find(id)] || []).push(id); });
+    var clusters = Object.keys(groups).map(function (k) { return groups[k].sort(byNumericId); });
+    clusters.sort(function (a, b) { return (b.length - a.length) || byNumericId(a[0], b[0]); });
+    var clusterOf = {};
+    clusters.forEach(function (ids, i) {
+      ids.forEach(function (id) { clusterOf[id] = { index: i + 1, size: ids.length }; });
+    });
+
+    var isolated = order.filter(function (id) { return !parent.hasOwnProperty(id); }).sort(byNumericId);
+    return {
+      order: order, byId: byId, edges: edges, waits: waits, needed: needed,
+      clusters: clusters, clusterOf: clusterOf, isolated: isolated,
+      connected: order.length - isolated.length,
+    };
+  }
+
+  // A goal sits one column right of the furthest goal it waits on. Goal-level
+  // dependencies CAN loop (task edges never do, but two goals can each hold a task
+  // the other's waits on), so an edge back onto the current path is ignored for
+  // layering — it is still drawn, it just does not push anything to the right.
+  function layerOf(ids, waits) {
+    var depth = {};
+    var state = {};
+    function visit(id) {
+      if (state[id] === 2) return depth[id];
+      if (state[id] === 1) return -1;
+      state[id] = 1;
+      var d = 0;
+      (waits[id] || []).forEach(function (dep) {
+        var dd = visit(dep.id);
+        if (dd >= 0) d = Math.max(d, dd + 1);
+      });
+      state[id] = 2;
+      depth[id] = d;
+      return d;
+    }
+    ids.forEach(visit);
+    return depth;
+  }
+
+  // Order the goals inside each column by the average row of their neighbours in
+  // the columns already placed, a few alternating sweeps — the standard cheap way
+  // to cut crossings, and deterministic (ties fall back to goal id).
+  function orderColumns(columns, neighbours) {
+    var pos = {};
+    function reindex() { columns.forEach(function (col) { col.forEach(function (id, i) { pos[id] = i; }); }); }
+    reindex();
+    var layerOfId = {};
+    columns.forEach(function (col, li) { col.forEach(function (id) { layerOfId[id] = li; }); });
+    for (var sweep = 0; sweep < 4; sweep++) {
+      var down = sweep % 2 === 0;
+      var from = down ? 1 : columns.length - 2;
+      var to = down ? columns.length : -1;
+      for (var li = from; li !== to; li += down ? 1 : -1) {
+        var col = columns[li];
+        var key = {};
+        col.forEach(function (id) {
+          var ns = (neighbours[id] || []).filter(function (n) { return down ? layerOfId[n] < li : layerOfId[n] > li; });
+          key[id] = ns.length ? ns.reduce(function (s, n) { return s + pos[n]; }, 0) / ns.length : pos[id];
+        });
+        col.sort(function (a, b) { return (key[a] - key[b]) || byNumericId(a, b); });
+        col.forEach(function (id, i) { pos[id] = i; });
+      }
+    }
+  }
+
+  // layoutCluster — one cluster's goals in a block of its own: { w, h, at: { id: {x, y} } }.
+  function layoutCluster(ids, a) {
+    var depth = layerOf(ids, a.waits);
+    var neighbours = {};
+    ids.forEach(function (id) {
+      neighbours[id] = (a.waits[id] || []).concat(a.needed[id] || []).map(function (n) { return n.id; });
+    });
+    var columns = [];
+    ids.forEach(function (id) { (columns[depth[id]] = columns[depth[id]] || []).push(id); });
+    columns = columns.map(function (c) { return (c || []).sort(byNumericId); });
+    orderColumns(columns, neighbours);
+
+    var rows = columns.reduce(function (m, c) { return Math.max(m, c.length); }, 1);
+    var w = columns.length * NODE_W + (columns.length - 1) * GAP_X;
+    var h = rows * NODE_H + (rows - 1) * GAP_Y;
+    var at = {};
+    columns.forEach(function (col, li) {
+      var colH = col.length * NODE_H + (col.length - 1) * GAP_Y;
+      var top = Math.round((h - colH) / 2);
+      col.forEach(function (id, i) { at[id] = { x: li * (NODE_W + GAP_X), y: top + i * (NODE_H + GAP_Y) }; });
+    });
+    return { w: w, h: h, at: at };
+  }
+
+  function edgePath(dep, dependent) {
+    // Drawn dependency → dependent, left to right: "this had to ship first".
+    var x1 = dep.x + NODE_W;
+    var y1 = dep.y + NODE_H / 2;
+    var x2 = dependent.x;
+    var y2 = dependent.y + NODE_H / 2;
+    var dx = x2 > x1 ? (x2 - x1) / 2 : 44;
+    return 'M' + x1 + ' ' + y1 + ' C' + (x1 + dx) + ' ' + y1 + ' ' + (x2 - dx) + ' ' + y2 + ' ' + x2 + ' ' + y2;
+  }
+
+  // layout — every cluster laid out, then packed into rows ("shelves") so the
+  // big cluster sits on top and the pairs tile beneath it. Returns the SVG's own
+  // size: the page puts the svg in an overflow-x container and NEVER lets the page
+  // body scroll sideways (ADR 0227 §5.2).
+  function layout(a) {
+    var blocks = a.clusters.map(function (ids) { return layoutCluster(ids, a); });
+    var rowW = Math.max(MIN_ROW_W, blocks.length ? blocks[0].w : 0);
+    var rows = [];
+    var cur = { items: [], w: 0, h: 0 };
+    blocks.forEach(function (b, i) {
+      if (cur.items.length && cur.w + BLOCK_GAP + b.w > rowW) { rows.push(cur); cur = { items: [], w: 0, h: 0 }; }
+      cur.items.push({ i: i, x: cur.items.length ? cur.w + BLOCK_GAP : 0 });
+      cur.w += (cur.items.length > 1 ? BLOCK_GAP : 0) + b.w;
+      cur.h = Math.max(cur.h, b.h);
+    });
+    if (cur.items.length) rows.push(cur);
+
+    var nodes = [];
+    var abs = {};
+    var y = PAD;
+    var width = 0;
+    rows.forEach(function (row) {
+      row.items.forEach(function (it) {
+        var b = blocks[it.i];
+        Object.keys(b.at).forEach(function (id) {
+          var p = { x: PAD + it.x + b.at[id].x, y: y + b.at[id].y };
+          abs[id] = p;
+          nodes.push({ id: id, x: p.x, y: p.y, w: NODE_W, h: NODE_H });
+        });
+      });
+      width = Math.max(width, PAD + row.w + PAD);
+      y += row.h + BLOCK_GAP;
+    });
+    var height = rows.length ? y - BLOCK_GAP + PAD : 0;
+
+    var edges = a.edges.map(function (e) {
+      return {
+        from: e.from, to: e.to, count: e.count,
+        d: edgePath(abs[e.to], abs[e.from]),
+        // 1px for a single task edge, up to 3px — weight is a hint, the table has the count.
+        width: 1 + Math.min(2, Math.floor(Math.log(Math.max(1, e.count)) / Math.LN2 / 1.5)),
+      };
+    });
+    return { width: width, height: height, nodes: nodes, edges: edges, nodeW: NODE_W, nodeH: NODE_H };
+  }
+
+  // categories — the legend, and the colour each category wears. Index follows
+  // the alphabetical order of the labels PRESENT, so a category keeps its colour
+  // from one visit to the next while the set does not change.
+  function categories(a) {
+    var seen = {};
+    a.order.forEach(function (id) {
+      var c = a.byId[id].category;
+      if (c && c.slug && !seen[c.slug]) seen[c.slug] = { slug: c.slug, label: c.label, count: 0 };
+      if (c && c.slug) seen[c.slug].count++;
+    });
+    var list = Object.keys(seen).map(function (k) { return seen[k]; })
+      .sort(function (x, y) { return String(x.label).localeCompare(String(y.label)) || (x.slug < y.slug ? -1 : 1); });
+    list.forEach(function (c, i) { c.colour = i % CATEGORY_COLOURS; });
+    var uncategorised = a.order.filter(function (id) { return !a.byId[id].category; }).length;
+    return { list: list, uncategorised: uncategorised };
+  }
+
+  function colourOf(node, cats) {
+    if (!node.category) return 'none';
+    for (var i = 0; i < cats.list.length; i++) if (cats.list[i].slug === node.category.slug) return String(cats.list[i].colour);
+    return 'none';
+  }
+
+  // weightOf — the node's WEIGHT (ADR 0227 §6 item 3: "node weight = task
+  // count"), as a 0–1 fraction of the busiest DRAWN goal's task count. Log-scaled
+  // so one 127-task goal does not flatten every other bar to nothing — the same
+  // reasoning `edgePath`'s width already uses for edge count. `maxTotal` is the
+  // caller's (the drawn set, not the whole corpus) so the scale means something
+  // on THIS map; a maxTotal of 0 (every drawn goal has zero tasks) draws no bar
+  // rather than dividing by zero into a false full one.
+  function weightOf(total, maxTotal) {
+    var t = Math.max(0, Number(total) || 0);
+    var m = Math.max(0, Number(maxTotal) || 0);
+    if (!m || !t) return 0;
+    return Math.min(1, Math.log(1 + t) / Math.log(1 + m));
+  }
+
+  // tableRows — the primary surface. One row per goal, carrying every fact the
+  // picture carries plus the two directions of each dependency BY NAME, because
+  // with this many separate clusters the table holds more of the structure than
+  // the picture does (§10.4 item 3).
+  function tableRows(a) {
+    function named(list) {
+      return (list || []).map(function (x) { return { id: x.id, title: displayTitle(a.byId[x.id]), count: x.count }; });
+    }
+    var rows = a.order.map(function (id) {
+      var n = a.byId[id];
+      var cl = a.clusterOf[id] || null;
+      return {
+        id: id,
+        title: displayTitle(n),
+        isPrivate: !n.title,
+        version: n.version_id || '',
+        status: n.status || '',
+        category: n.category ? n.category.label : '',
+        done: n.task_done || 0,
+        total: n.task_total || 0,
+        waits: named(a.waits[id]),
+        needed: named(a.needed[id]),
+        waitsGoals: n.depends_on != null ? n.depends_on : (a.waits[id] || []).length,
+        neededGoals: n.depended_on_by != null ? n.depended_on_by : (a.needed[id] || []).length,
+        cluster: cl ? cl.index : 0,
+        clusterSize: cl ? cl.size : 1,
+        clusterLabel: cl ? 'Cluster ' + cl.index + ' · ' + plural(cl.size, 'goal') : 'Stands alone',
+      };
+    });
+    // Big cluster first, stand-alone last; within a group the busiest goal first.
+    rows.sort(function (x, y) {
+      var cx = x.cluster || 1e9;
+      var cy = y.cluster || 1e9;
+      return (cx - cy) || (y.total - x.total) || byNumericId(x.id, y.id);
+    });
+    return rows;
+  }
+
+  // describe — the sentence that states the split out loud (ADR 0227 §10.4 item 1:
+  // "with the split stated on the page"). Numbers only; no claim the data cannot back.
+  function describe(a) {
+    var goals = a.order.length;
+    if (!goals) return { summary: 'No goal carries any work yet.', graph: '' };
+    if (!a.connected) {
+      return {
+        summary: plural(goals, 'goal') + ' carry work, and no goal waits on another goal’s tasks.',
+        graph: 'No goal depends on another goal’s work, so there is no graph to draw — the table below is the whole map.',
+      };
+    }
+    var largest = a.clusters[0].length;
+    var summary = plural(goals, 'goal') + ' carry work. ' + a.connected + ' of them ' + (a.connected === 1 ? 'is' : 'are')
+      + ' tied to another goal by a dependency; the other ' + a.isolated.length + ' stand alone. '
+      + 'The ' + a.connected + ' form ' + plural(a.clusters.length, 'cluster') + ', the largest with ' + plural(largest, 'goal') + '.';
+    return { summary: summary, graph: '' };
+  }
+
+  return {
+    analyse: analyse, layout: layout, categories: categories, colourOf: colourOf, weightOf: weightOf,
+    tableRows: tableRows, describe: describe, displayTitle: displayTitle, clip: clip,
+    plural: plural, TITLE_CHARS: TITLE_CHARS, SUB_CHARS: SUB_CHARS, CATEGORY_COLOURS: CATEGORY_COLOURS,
+  };
+}));

package/modules/hall-ui/public/goal-map.css

@@ -0,0 +1,117 @@
+/* goal-map.css — the goal map (task 1003479, goal 1000089; ADR 0227 §6 item 3).
+ *
+ * The page is the board archetype: the shell's .scroll panels, the kit's ledger
+ * for the table, and only the shapes no other page has — the node-link figure, its
+ * category colour channel and legend, and the stand-alone chips.
+ *
+ * COLOUR. Every value below is a var() or a color-mix() of the thirteen contract
+ * colours (DESIGN.md's Fifteen Rule), so the page inherits dark and light and an
+ * instance's palette. Category is a colour AND a word on every node — the ADR 0192
+ * set is not colour-distinguishable at this many nodes — so the eight hues below
+ * are a redundant channel, and a ninth category repeating the first costs nothing.
+ * These are page-scoped classes on the figure, never a :root (the pack's :root is
+ * spliced at (0,1,0); a page's own would neither win reliably nor lose cleanly).
+ *
+ * NO SIDEWAYS SCROLL ON THE PAGE. The figure scrolls inside .gm-scroll, which names
+ * BOTH axes — a lone overflow-x makes the other axis `auto` too and any 1px
+ * overhang grows a vertical scrollbar nothing can scroll (task 1004130).
+ */
+
+.gm-figure { margin: 0; }
+.gm-figure .scroll__lede { margin-bottom: var(--sp-md); }
+
+.gm-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--ink) 3%, var(--bg-card));
+}
+.gm-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.gm-svg { display: block; }
+
+/* Eight categorical hues, derived. */
+.gm-c0 { --gm-c: var(--sea); }
+.gm-c1 { --gm-c: var(--accent-deep); }
+.gm-c2 { --gm-c: var(--terracotta); }
+.gm-c3 { --gm-c: color-mix(in srgb, var(--sea) 55%, var(--terracotta)); }
+.gm-c4 { --gm-c: color-mix(in srgb, var(--sea) 55%, var(--ink)); }
+.gm-c5 { --gm-c: color-mix(in srgb, var(--accent-deep) 60%, var(--ink)); }
+.gm-c6 { --gm-c: color-mix(in srgb, var(--accent) 55%, var(--sea)); }
+.gm-c7 { --gm-c: var(--ink-soft); }
+
+.gm-edge {
+  fill: none;
+  stroke: var(--ink-faint);
+  opacity: 0.85;
+}
+.gm-arrowhead { fill: var(--ink-faint); }
+
+.gm-card {
+  fill: var(--bg-card);
+  stroke: var(--rule);
+  stroke-width: 1;
+}
+.gm-stripe { fill: var(--gm-c, transparent); }
+/* Uncategorised is legal (ADR 0192): a hollow, dashed stripe — present, and plainly not a colour. */
+.gm-cnone .gm-stripe { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 2; }
+
+.gm-name  { font: 600 13px var(--font-body); fill: var(--ink); }
+.gm-cat   { font: 500 11px var(--font-body); fill: var(--ink-soft); }
+.gm-tasks { font: 500 11px var(--font-body); fill: var(--ink-faint); }
+
+/* The node's WEIGHT (ADR 0227 §6 item 3: "node weight = task count") — a bar
+ * scaled to the busiest goal drawn on THIS map, so its length is a real second
+ * channel beside the task-count text, not a decoration repeating it. */
+.gm-weight-track { fill: var(--rule-soft); }
+.gm-weight-fill  { fill: var(--gm-c, var(--ink-soft)); }
+
+/* The legend is a run of labelled swatches under the figure. */
+.gm-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-hair) var(--sp-md);
+  margin: var(--sp-md) 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  color: var(--ink-soft);
+}
+.gm-legend li { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
+.gm-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background: var(--gm-c, transparent);
+}
+.gm-swatch.gm-cnone { background: none; box-shadow: inset 0 0 0 1px var(--ink-faint); }
+.gm-n { color: var(--ink-faint); }
+
+/* The stand-alone goals: chips that wrap, not a grid of cards. */
+.gm-alone {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-hair);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+/* A long goal title wraps inside its chip rather than pushing past the panel. */
+.gm-chip {
+  min-height: 24px;
+  max-width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 var(--sp-hair);
+  white-space: normal;
+}
+
+/* Table cells that list goals. */
+/* A floor on the dependency columns: without it a phone squeezes them to a few
+   characters and every row becomes a tall, empty tower. With it the table is
+   wider than the card and scrolls inside it (the hall's own ledger rule). */
+.gm-deps { margin: 0; padding: 0; list-style: none; min-width: 14rem; }
+.gm-deps li { font-size: 13px; line-height: 1.45; }
+.gm-none { color: var(--ink-faint); }
+.gm-private { color: var(--ink-soft); font-style: italic; }

package/modules/hall-ui/public/goal-map.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Goal map — {{worldName}}</title>
+  <meta name="description" content="Which goals wait on which other goals: the goals that are tied together drawn as a map, the goals that stand alone listed beside it, and every goal in a table.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/goal-map.css">
+</head>
+<!-- THE GOAL MAP (task 1003479, goal 1000089; ADR 0227 §6 item 3 + §10.4). The
+     picture is the ENHANCEMENT and the table is the page: every fact the map
+     draws is a cell in the table under it, on screen by default and not behind a
+     toggle (ADR 0227 §5). It takes no nav slot — like the sky, it is reached from
+     the page it maps (Goals) and is never the only path to anything it shows. -->
+<body data-page="goal-map" data-page-title="Goal map">
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Goal map</h1>
+        <p class="page-head__sub" id="gm-sub">Reading the goals…</p>
+      </div>
+
+      <main id="hall-main">
+        <section class="scroll" id="gm-graph-scroll" aria-labelledby="gm-graph-h">
+          <h2 id="gm-graph-h" class="scroll__h">Goals that wait on each other</h2>
+          <div id="gm-graph"><p class="profile__placeholder">Loading…</p></div>
+          <ul id="gm-legend" class="gm-legend" aria-label="Categories" hidden></ul>
+        </section>
+
+        <section class="scroll" id="gm-alone-scroll" aria-labelledby="gm-alone-h" hidden>
+          <h2 id="gm-alone-h" class="scroll__h">Goals that stand alone</h2>
+          <p class="scroll__lede" id="gm-alone-lede"></p>
+          <ul id="gm-alone" class="gm-alone"></ul>
+        </section>
+
+        <section class="scroll" id="gm-table-scroll" aria-labelledby="gm-table-h" hidden>
+          <h2 id="gm-table-h" class="scroll__h">Every goal, as a table</h2>
+          <p class="scroll__lede">The same facts as the map, and more of them: with this many separate clusters the table holds more of the structure than the picture does. Each goal lists, by name, the goals it waits on and the goals that wait on it, with how many tasks the dependency runs through.</p>
+          <div id="gm-table"></div>
+        </section>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/shell.js?v=2026-09-20-room1"></script>
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
+<script src="/builders/hall-kit.js"></script>
+<!-- The model and layout are a pure lib so a test runs the real arithmetic; the
+     page script keeps only the drawing and the table. Lib BEFORE page. -->
+<script src="/builders/goal-map-lib.js"></script>
+<script src="/builders/goal-map.js"></script>
+</body>
+</html>