@bongos/core 1.19.469 → 1.19.471

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

@@ -1,17 +1,20 @@
-/* atlas.css — Page-local styles for the Repo Atlas page.
-   Lifted verbatim out of the page's inline <style> block (task 1002176);
-   the ?v= cache-bust is stamped automatically from this file's content hash
-   at boot (src/asset-version.js). */
+/* atlas.css — the Repo Atlas SCENE (task 1737 amending ADR 0094's styling
+   clause; re-skinned in task 1003307; redesigned in task 1003472, goal 1000081).
+   The chrome around the scene — the panel, the view switch, the caption, the
+   detail card, the island index, the foot — is the shell's and the oversight
+   family's, so this sheet holds only what the map has that no other page does:
+   the nine semantic colours, the scene box, the detail card's placement, the
+   legend swatches and the node/edge states.
 
-/* Repo Atlas — restyled onto the hall design system (task 1737, amending
-   ADR 0094's styling clause). The CHROME (card, toolbar, caption, legend,
-   popup, badges) rides the hall tokens, so it follows the instance pack and
-   dark mode like every other page. The SEMANTIC node/edge palette below
-   stays instance-independent — the 0094 invariant: a pack's colors must
-   never scramble the map's color-coded meaning. Non-semantic map values
-   (label ink/halo, ambient wash, hub glow, badge fills) are scoped vars the
-   renderer reads at draw time, with dark variants, so the scene adapts to
-   the theme without the pack touching the encoding. */
+   What 1003472 removed, and why: the page's own hairline + accent wash on the
+   panel (the panel is the shell's .scroll now, on the owner's standing decision
+   that the transparent edge stands — task 1003470 closed that question);
+   .ab-modes, a segmented box that was a third toggle grammar beside the shell's
+   tab strip; .ab-chip, an accent pill saying "live" on a map whose foot already
+   says when it was drawn; the glass hint pill floating over the scene; the two
+   box-shadows (the detail card and the empty card — the world draws depth with
+   hairlines); and the 5.5s pulse on the hub's glow, which read as a status dot
+   (the world's ambient floor is 20s). */
 .atlas-page{
   /* THE SEMANTIC MAP PALETTE — the sanctioned exception, alongside the shell's
      status vocabulary. ADR 0094's invariant is that a pack's colours must never
@@ -26,28 +29,19 @@
   /* Pure white with alpha as an ambient wash — the Fifteen Rule's one legal
      literal shape (a scrim, a mask or a halo). */
   --ab-ambient: rgba(255,255,255,.5);
-  /* Was #c7cdf7 / #3b418c, a private periwinkle nobody could re-theme. The world
-     already holds a second hue for exactly this: --sea, which the hall otherwise
+  /* The hub's glow: the world's second hue, --sea, which the hall otherwise
      never spends. */
   --ab-glow: color-mix(in srgb, var(--sea) 30%, var(--bg-card));
-  /* The badge fills were eight literals plus eight dark twins. They are the
-     four-state vocabulary the shell already measures on both grounds in both
-     modes (tests/hall_tokens.mjs), so they are that vocabulary now — which is
-     also why this rule needs no dark block for them any more. */
+  /* The in-scene badge fills are the four-state vocabulary the shell already
+     measures on both grounds in both modes (tests/hall_tokens.mjs). */
   --ab-b-good-bg:var(--ok-weak);     --ab-b-good-fg:var(--ok);
   --ab-b-warn-bg:var(--warn-weak);   --ab-b-warn-fg:var(--warn);
   --ab-b-danger-bg:var(--danger-weak); --ab-b-danger-fg:var(--danger);
   --ab-b-info-bg:var(--info-weak);   --ab-b-info-fg:var(--info);
-  color:var(--ink);
-  border:var(--line) solid var(--rule-soft); border-radius:var(--radius);
-  background:
-    radial-gradient(ellipse 70% 55% at 50% 46%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%),
-    var(--bg-card);
 }
-/* The dark twin, still written twice and still byte-identical — that rule does
-   not bend. What shrank is what it has to SAY: the badge pairs flip themselves
-   now that they are the status vocabulary, so only the two genuinely scene-level
-   values are left (task 1003307). */
+/* The dark twin, written twice and byte-identical — that rule does not bend.
+   Only the two genuinely scene-level values flip here; the badge pairs flip
+   themselves as the status vocabulary. */
 html[data-theme="dark"] .atlas-page{
   --ab-ambient: rgba(255,255,255,.03);
   --ab-glow: color-mix(in srgb, var(--sea) 55%, var(--bg));
@@ -58,69 +52,83 @@ html[data-theme="dark"] .atlas-page{
     --ab-glow: color-mix(in srgb, var(--sea) 55%, var(--bg));
   }
 }
-.atlas-page *{box-sizing:border-box}
-.atlas-page button{font:inherit}
 
-.atlas-toolbar{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:16px 20px 0}
-.ab-chip{font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
-  color:var(--accent-ink); background:var(--accent-tint); border:var(--line) solid color-mix(in srgb, var(--accent) 30%, transparent); padding:3px 9px; border-radius: var(--radius-pill)}
-.ab-modes{display:inline-flex; gap:0; border:var(--line) solid var(--rule); border-radius:var(--radius-sm); overflow:hidden}
-.ab-modes button{font-family:var(--font-body); font-weight:500; font-size:12.5px; cursor:pointer; border:0;
-  background:var(--bg-card); color:var(--ink-soft); padding:6px 14px; transition:background .15s, color .15s}
-.ab-modes button + button{border-left:var(--line) solid var(--rule)}
-.ab-modes button.active{background:var(--accent-tint); color:var(--accent-ink)}
-.ab-modes button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
+/* The view switch sits under the heading with the strip's own rule; the
+   caption under it is the shell's lede, so the map's blurb takes the measure
+   every other panel's lede takes. The sub line is the caption's faint second
+   line: what the map was counted from. */
+.ab-views{ margin: 4px 0 14px; }
+.ab-caption{ margin-bottom: 4px; }
+.ab-caption .sub{ display:block; margin-top:4px; font-size:12.5px; color:var(--ink-faint); font-variant-numeric: tabular-nums; }
 
-.ab-caption{padding:13px 20px 0; margin:0; font-size:13px; line-height:1.5; color:var(--ink-soft); max-width:90ch}
-.ab-caption .sub{display:block; margin-top:3px; font-size:11.5px; color:var(--ink-faint)}
+/* The scene: the SVG at its natural aspect, the detail card and the empty
+   state positioned inside it. */
+.ab-scene{ position:relative; width:100%; padding:6px 0 0; }
+.ab-scene svg{ display:block; width:100%; height:auto; }
+.ab-hint{ margin: 6px 0 0; }
+/* The empty state flows in the scene's place (the SVG is hidden then), so a
+   phone is not handed 300px of ground under a map that is not there. */
+.ab-empty{ display:none; justify-content:center; text-align:center; padding:40px 20px; }
+.ab-empty.show{ display:flex; }
+.ab-empty__state{ max-width: var(--measure); }
+.ab-empty__state p b{ display:block; margin-bottom:4px; font-weight:500; color:var(--ink); }
 
-.ab-scene{position:relative; width:100%; min-height:500px; padding:6px 0}
-.ab-scene svg{display:block; width:100%; height:auto}
-.ab-hint{position:absolute; left:20px; bottom:12px; font-size:11.5px; color:var(--ink-soft);
-  background:color-mix(in srgb, var(--bg-card) 75%, transparent); backdrop-filter:blur(4px); padding:5px 11px; border-radius: var(--radius-pill); border:var(--line) solid var(--rule-soft)}
-.ab-empty{position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:40px}
-.ab-empty.show{display:flex}
-.ab-empty .card{background:var(--bg-card); border:var(--line) solid var(--rule-soft); border-radius:var(--radius); padding:26px 30px; max-width:460px;
-  box-shadow:var(--shadow-pop)}
-.ab-empty h2{margin:0 0 8px; font-size:16px; font-weight:650}
-.ab-empty p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
+/* The legend: the nine colours with their meaning, in the fact voice. The
+   swatch is a semantic colour, so it is the one thing on the page that is not
+   a token. */
+.ab-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; padding:10px 0 0; font-size:12.5px; color:var(--ink-soft); }
+.ab-legend .lg{ display:flex; align-items:center; gap:7px; }
+.ab-legend .sw{ width:12px; height:12px; border-radius:3px; }
+.ab-legend .ln{ width:18px; border-top:3px solid; }
 
-.ab-legend{display:flex; flex-wrap:wrap; gap:8px 18px; padding:12px 20px 6px; font-size:11.5px; color:var(--ink-soft)}
-.ab-legend .lg{display:flex; align-items:center; gap:7px}
-.ab-legend .sw{width:13px; height:13px; border-radius:4px}
-.ab-legend .ln{width:18px; border-top:3px solid}
-.ab-foot{padding:10px 20px 20px; font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
+/* The island index: the family's dense rows under a collapsible head. The
+   row's title is a disclosure button; the detail it opens is the same panel
+   the map's popup shows, laid inline under the row so a phone reads it in
+   place. Hovering a row lights the island on the map, the way hovering the
+   island does. */
+.ab-index{ margin: var(--sp-md) 0 0; padding-top: 10px; border-top: var(--line) solid var(--rule); }
+.ab-index > summary{ padding: 0 0 10px; border-bottom: var(--line) solid var(--rule); }
+.ab-index[open] > summary{ margin-bottom: 0; }
+.ab-index .kit-collapse__body{ margin-top: 0; }
+.ab-ix__t{ font: inherit; background:none; border:0; padding:2px 4px; margin:-2px -4px; text-align:left; cursor:pointer; }
+.ab-ix__t:hover{ color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
+.ab-ix__t[aria-expanded="true"]{ color: var(--ink); }
+.ab-ix__body{ margin: 10px 0 4px; max-width: var(--measure); }
+.ab-ix__body .ab-ptitle{ display:none; }
+/* The island's colour, drawn as a 10px square before the title so the index
+   and the map share one language. */
+.ab-ix__sw{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:9px; vertical-align: 1px; }
+.ab-ix__sw--ghost{ background:transparent !important; border:1.5px dashed currentColor; opacity:.6; }
 
-.ab-popup{position:absolute; z-index:6; width:300px; max-width:88%; background:var(--bg-card);
-  border:var(--line) solid var(--rule-soft); border-radius:var(--radius); padding:15px 16px; display:none;
-  box-shadow:var(--shadow-pop)}
-.ab-popup.show{display:block}
-.ab-popup-close{position:absolute; top:8px; right:11px; cursor:pointer; border:0; background:transparent;
-  font-size:20px; line-height:1; color:var(--ink-faint)}
-.ab-popup-close:hover{color:var(--ink)}
-.ab-ptitle{font-weight:650; font-size:15px; display:flex; align-items:center;
-  gap:8px; flex-wrap:wrap; line-height:1.25; padding-right:18px}
-.ab-ppath{font-family: var(--font-mono); font-size:11.5px; color:var(--ink-soft); margin-top:4px; word-break:break-all}
-.ab-pdesc{font-size:12.8px; line-height:1.55; margin:11px 0 0; color:var(--ink-soft)}
-.ab-prow{margin-top:11px; font-size:10.5px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em}
-.ab-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
-.ab-chip2{font-size:11px; font-weight:500; background:var(--glass); border:var(--line) solid var(--rule-soft);
-  padding:4px 9px; border-radius: var(--radius-pill); font-variant-numeric:tabular-nums}
-.ab-badge{font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius: var(--radius-pill)}
-.ab-b-good{background:var(--ab-b-good-bg); color:var(--ab-b-good-fg)} .ab-b-warn{background:var(--ab-b-warn-bg); color:var(--ab-b-warn-fg)}
-.ab-b-danger{background:var(--ab-b-danger-bg); color:var(--ab-b-danger-fg)} .ab-b-info{background:var(--ab-b-info-bg); color:var(--ab-b-info-fg)}
+/* The detail card: a --bg-card panel closed by one rule hairline and no shadow
+   (the family's .ov-modal, positioned over the scene). */
+.ab-popup{ position:absolute; z-index:6; width:320px; max-width:92%; background:var(--bg-card);
+  border:var(--line) solid var(--rule); border-radius:var(--radius); padding:16px 18px; display:none; }
+.ab-popup.show{ display:block; }
+.ab-popup-close{ position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center;
+  width:28px; height:28px; cursor:pointer; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink-faint); }
+.ab-popup-close:hover{ color:var(--ink); background:var(--glass); }
+.ab-ptitle{ font-weight:500; font-size:15px; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.3; padding-right:28px; color:var(--ink); }
+.ab-ppath{ font-family: var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-top:4px; overflow-wrap:anywhere; }
+.ab-pdesc{ font-size:13px; line-height:1.55; margin:10px 0 0; color:var(--ink-soft); }
+.ab-prow{ margin-top:12px; font-family:var(--label-face); font-size:var(--label-size); letter-spacing:var(--label-space); text-transform:var(--label-case); color:var(--ink-faint); }
+.ab-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
+/* A neighbour is a door: the chip is a button that opens that island. */
+button.ab-jump{ font:inherit; font-family:var(--font-mono); font-size:11px; cursor:pointer; background:none; }
+button.ab-jump:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }
 
-.ab-node{cursor:pointer; transition:opacity .18s}
-.ab-node text{font-family:var(--font-body); paint-order:stroke; stroke:var(--ab-label-halo); stroke-width:3px; stroke-linejoin:round; fill:var(--ab-label-ink)}
-.ab-node text.ab-sub{fill:var(--ink-faint)}
-.ab-node text.ab-badge-text{stroke:none; paint-order:normal}
-svg.focus .ab-node{opacity:.18}
-svg.focus .ab-node.lit{opacity:1}
-.ab-edge{fill:none; opacity:.18; transition:opacity .18s}
-svg.focus .ab-edge{opacity:.04}
-svg.focus .ab-edge.lit{opacity:1}
-.ab-edge.lit{filter:url(#abglow)}
-.ab-sun-glow{animation:abbreathe 5.5s ease-in-out infinite}
-@keyframes abbreathe{0%,100%{opacity:.4}50%{opacity:.8}}
-@media (prefers-reduced-motion: reduce){ .atlas-page *{transition:none!important; animation:none!important} }
-@media (max-width:560px){ .ab-modes{width:100%; display:flex} .ab-modes button{flex:1} }
+/* ---- the scene's own states: nodes, edges, the lit set, the hub's glow ---- */
+.ab-node{ cursor:pointer; transition:opacity .18s; }
+.ab-node text{ font-family:var(--font-body); paint-order:stroke; stroke:var(--ab-label-halo); stroke-width:3px; stroke-linejoin:round; fill:var(--ab-label-ink); }
+.ab-node text.ab-sub{ fill:var(--ink-faint); }
+.ab-node text.ab-badge-text{ stroke:none; paint-order:normal; }
+svg.focus .ab-node{ opacity:.18; }
+svg.focus .ab-node.lit{ opacity:1; }
+.ab-edge{ fill:none; opacity:.18; transition:opacity .18s; }
+svg.focus .ab-edge{ opacity:.04; }
+svg.focus .ab-edge.lit{ opacity:1; }
+.ab-edge.lit{ filter:url(#abglow); }
+/* The hub breathes at the world's ambient floor, not as a pulse. */
+.ab-sun-glow{ animation:abbreathe 24s ease-in-out infinite; }
+@keyframes abbreathe{ 0%,100%{opacity:.45} 50%{opacity:.75} }
+@media (prefers-reduced-motion: reduce){ .atlas-page *{ transition:none!important; animation:none!important; } }

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

@@ -9,6 +9,10 @@
   <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">
+  <!-- task 1003472: the island index under the map is a run of oversight rows,
+       and the detail panel's facts are the family's lines, so the family sheet
+       loads first and atlas.css holds only the scene. -->
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/atlas.css">
 </head>
 <body data-page="atlas" data-page-title="Repo Atlas">
@@ -24,42 +28,61 @@
            board's label voice gives it one without competing with the map. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Repo atlas</h1>
-        <p class="page-head__sub">A self-drawing map of the codebase: what each module is, and what depends on it.</p>
+        <p class="page-head__sub">A self-drawing map of the codebase: what each module is, and what depends on it. Redrawn from the code on every deploy.</p>
       </div>
 
       <main id="hall-main">
-        <!-- The atlas chrome rides the hall tokens (pack + dark aware, task 1737);
-             only the semantic node/edge palette stays instance-independent so a
-             pack can never scramble the map's color-coded meaning (ADR 0094). -->
-        <div class="atlas-page">
-          <div class="atlas-toolbar">
-            <div class="ab-modes">
-              <button data-view="context" class="active">Context Layer</button>
-              <button data-view="modules">Module Truth</button>
-            </div>
-            <span class="ab-chip">live</span>
+        <!-- The atlas is NOT a list page: it is an SVG scene with a view switch,
+             a caption, a legend and a detail panel. task 1003472 put its CHROME
+             in the shell's dialect — the panel is the shell's .scroll, the view
+             switch its tab strip, the detail panel a hairline --bg-card card —
+             and added the island INDEX under the map: every island as a row a
+             keyboard or a phone can open, since the map itself is a hover scene
+             that was unreadable at 390px and unreachable without a mouse. Only
+             the semantic node/edge palette stays instance-independent, so a
+             pack can never scramble the map's colour-coded meaning (ADR 0094). -->
+        <section class="scroll atlas-page" aria-labelledby="atlas-h">
+          <h2 id="atlas-h" class="scroll__h">The map</h2>
+          <div class="kit-tabs ab-views" role="tablist" aria-label="Map view">
+            <button type="button" class="setup__tab" role="tab" data-view="context" aria-selected="true">Context layer</button>
+            <button type="button" class="setup__tab" role="tab" data-view="modules" aria-selected="false">Module truth</button>
           </div>
 
-          <p class="ab-caption" id="caption">Loading the map…</p>
+          <p class="scroll__lede ab-caption" id="caption">Loading the map…</p>
 
           <div class="ab-scene" id="scene">
             <svg id="svg" role="img" aria-label="Isometric map of the repository"></svg>
-            <div class="ab-hint">Hover an island to light its links · click one for details</div>
             <div class="ab-popup" id="popup" role="dialog" aria-label="Codebase detail">
-              <button class="ab-popup-close" id="popupClose" aria-label="Close">×</button>
+              <button type="button" class="ab-popup-close" id="popupClose" aria-label="Close">
+                <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" focusable="false"><path d="M2 2l8 8M10 2l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+              </button>
               <div id="popupBody"></div>
             </div>
             <div class="ab-empty" id="empty">
-              <div class="card">
-                <h2>The map is being drawn</h2>
-                <p>The Repo Atlas regenerates itself on the server every time code ships. It looks like it hasn’t been generated on this deploy yet — check back after the next deploy.</p>
+              <div class="empty-state ab-empty__state">
+                <p><b>The map is being drawn.</b> The atlas regenerates itself on the server every time code ships; it has not been generated on this deploy yet. Check back after the next deploy.</p>
               </div>
             </div>
           </div>
 
+          <p class="ab-hint ov-foot" id="hint">Hover an island to light its links, click one for its details, or open it from the index below.</p>
           <div class="ab-legend" id="legend"></div>
-          <footer class="ab-foot" id="foot"></footer>
-        </div>
+
+          <!-- The island index (task 1003472): the same islands as rows. Closed
+               on a desktop, where the map is the read; opened by atlas.js on a
+               phone, where the index is. -->
+          <details class="kit-collapse ab-index" id="ab-index">
+            <summary class="kit-collapse__summary">
+              <span class="ov-group__name">Island index</span>
+              <span class="ov-group__n" id="ab-index-n"></span>
+            </summary>
+            <div class="kit-collapse__body">
+              <ul class="ov-rows" id="ab-index-rows"></ul>
+            </div>
+          </details>
+
+          <p class="ov-foot" id="foot"></p>
+        </section>
       </main>
       <footer class="app-foot" id="app-foot"></footer>
     </div>
@@ -71,6 +94,6 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
-<script src="/builders/atlas.js?v=2026-06-27-r1" defer></script>
+<script src="/builders/atlas.js?v=2026-09-02-index" defer></script>
 </body>
 </html>

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

@@ -1,8 +1,11 @@
-// atlas.js — the Repo Atlas renderer (ADR 0094, idea #457; restyled task 1737).
-// Reads the server-generated /builders/atlas.json (produced by
-// scripts/gds/gen-atlas.js on every deploy) and draws an isometric,
-// hover-connective, click-for-detail map of the repository. Two views: the
-// .md/context layer and the module truth.
+// atlas.js — the Repo Atlas renderer (ADR 0094, idea #457; restyled task 1737;
+// redesigned task 1003472). Reads the server-generated /builders/atlas.json
+// (produced by scripts/gds/gen-atlas.js on every deploy) and draws an
+// isometric, hover-connective, click-for-detail map of the repository. Two
+// views: the .md/context layer and the module truth. Under the map, the ISLAND
+// INDEX renders the same nodes as rows a keyboard or a phone can open — the
+// scene is a hover surface, so without the index a third of the hall's readers
+// could not reach a single detail.
 //
 // Vanilla, no framework (the hall convention). The SEMANTIC node/edge palette
 // (TOKENS/EDGE_STYLE) is fixed — never instance-pack-driven, so a pack can't
@@ -26,6 +29,10 @@
     monolith: { c: TOKENS.db, w: 3, dash: 0 }, ghost: { c: TOKENS.ghost, w: 1.8, dash: '5 5' },
     seam: { c: TOKENS.sun, w: 2, dash: 0 },
   };
+  // The in-scene badge kinds map onto the shell's status pills in the HTML
+  // detail (good → ok, the rest by name), so a badge reads the same on the
+  // island and in its card.
+  var PILL = { good: 'ok', warn: 'warn', danger: 'danger', info: 'info' };
 
   // Theme-dependent, NON-semantic scene values — resolved from the .atlas-page
   // scoped vars at render time (they flip with html[data-theme]).
@@ -58,6 +65,10 @@
   var emptyEl = document.getElementById('empty');
   var popup = document.getElementById('popup');
   var popupBody = document.getElementById('popupBody');
+  var hintEl = document.getElementById('hint');
+  var indexEl = document.getElementById('ab-index');
+  var indexRows = document.getElementById('ab-index-rows');
+  var indexN = document.getElementById('ab-index-n');
 
   var DATA = null, view = 'context', selected = null, nodeEls = {}, edgeEls = [], adj = {};
 
@@ -70,6 +81,7 @@
   function ptsOf(a) { return a.map(function (p) { return r1(p.x) + ',' + r1(p.y); }).join(' '); }
   function cx(n) { return n.gx + n.w / 2; }
   function cy(n) { return n.gy + n.d / 2; }
+  function nodeById(id) { return DATA.views[view].nodes.filter(function (x) { return x.id === id; })[0]; }
 
   function nodeFill(n) {
     if (view === 'context') return { hub: TOKENS.sun, nested: TOKENS.sky, docs: TOKENS.paper, db: TOKENS.coral, generated: TOKENS.sky }[n.kind] || TOKENS.sky;
@@ -210,7 +222,8 @@
     });
 
     drawLegend(d);
-    captionEl.innerHTML = d.blurb + '<span class="sub">' + (d.sub || '') + '</span>';
+    drawIndex(d);
+    captionEl.innerHTML = esc(d.blurb || '') + '<span class="sub">' + esc(d.sub || '') + '</span>';
   }
 
   function buildNode(n) {
@@ -256,23 +269,25 @@
     for (var k in nodeEls) nodeEls[k].classList.remove('lit');
   }
 
+  // The detail of one island: the same markup in the map's card and in the
+  // index row. Facts are the shell's pills and chips; a neighbour is a door
+  // (a .ab-jump button that opens that island) rather than a dead chip.
   function detailHTML(n) {
-    var d = DATA.views[view];
-    var b = n.badge ? '<span class="ab-badge ab-b-' + n.badge.k + '">' + n.badge.t + '</span>' : '';
+    var b = n.badge ? '<span class="fact-pill fact-pill--' + (PILL[n.badge.k] || 'quiet') + '">' + esc(n.badge.t) + '</span>' : '';
     var html = '<div class="ab-ptitle">' + esc(n.label) + ' ' + b + '</div>';
     html += '<div class="ab-ppath">' + esc(n.path || '') + '</div>';
-    if (n.metric) html += '<div class="ab-chips"><span class="ab-chip2">' + esc(n.metric) + '</span></div>';
+    if (n.metric) html += '<div class="ab-chips"><span class="fact-chip">' + esc(n.metric) + '</span></div>';
     html += '<p class="ab-pdesc">' + esc(n.desc || '') + '</p>';
     if (n.provenance) {
-      var provLabel = n.provenance === 'core' ? 'Core-loaded (Cloud Bongos)' : 'Built by this project';
-      html += '<div class="ab-chips"><span class="ab-chip2">' + esc(provLabel) + '</span>' +
-        (n.author ? '<span class="ab-chip2">by ' + esc(n.author) + '</span>' : '') +
-        (n.origin ? '<span class="ab-chip2">from ' + esc(n.origin) + '</span>' : '') +
+      var provLabel = n.provenance === 'core' ? 'core-loaded' : 'built here';
+      html += '<div class="ab-chips"><span class="fact-pill' + (n.provenance === 'core' ? ' fact-pill--info' : '') + '">' + esc(provLabel) + '</span>' +
+        (n.author ? '<span class="ov-fact">by <b>' + esc(n.author) + '</b></span>' : '') +
+        (n.origin ? '<span class="ov-fact">from <b>' + esc(n.origin) + '</b></span>' : '') +
         '</div>';
     }
-    if (n.provides && n.provides.length) html += '<div class="ab-prow">Provides (seams)</div><div class="ab-chips">' + n.provides.map(function (p) { return '<span class="ab-chip2">' + esc(p) + '</span>'; }).join('') + '</div>';
-    var conns = (adj[n.id] || []).map(function (e) { var o = e.a === n.id ? e.b : e.a; var on = d.nodes.filter(function (x) { return x.id === o; })[0]; return on ? on.label : o; });
-    if (conns.length) html += '<div class="ab-prow">Connects to</div><div class="ab-chips">' + conns.map(function (cc) { return '<span class="ab-chip2">↔ ' + esc(cc) + '</span>'; }).join('') + '</div>';
+    if (n.provides && n.provides.length) html += '<div class="ab-prow">Provides (seams)</div><div class="ab-chips">' + n.provides.map(function (p) { return '<span class="fact-chip">' + esc(p) + '</span>'; }).join('') + '</div>';
+    var conns = (adj[n.id] || []).map(function (e) { var o = e.a === n.id ? e.b : e.a; var on = nodeById(o); return on ? { id: on.id, label: on.label } : null; }).filter(Boolean);
+    if (conns.length) html += '<div class="ab-prow">Connects to</div><div class="ab-chips">' + conns.map(function (cc) { return '<button type="button" class="fact-chip ab-jump" data-node="' + esc(cc.id) + '">' + esc(cc.label) + '</button>'; }).join('') + '</div>';
     return html;
   }
   function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
@@ -300,25 +315,108 @@
     }).join('');
   }
 
+  // ---- the island index --------------------------------------------------
+  // Every island of the current view as a dense row: its colour, its label, its
+  // sub and metric, its badge as a pill. The title is a disclosure button; the
+  // body it opens is detailHTML laid inline, so the same facts read in place on
+  // a phone. Hovering a row lights the island on the map.
+  function drawIndex(d) {
+    if (!indexRows) return;
+    var rows = d.nodes.slice().sort(function (a, b) {
+      var fa = a.fixed ? 0 : 1, fb = b.fixed ? 0 : 1;
+      if (fa !== fb) return fa - fb;
+      return String(a.label).localeCompare(String(b.label));
+    });
+    indexRows.innerHTML = rows.map(function (n, i) {
+      var fill = nodeFill(n);
+      var sw = '<span class="ab-ix__sw' + (n.kind === 'ghost' ? ' ab-ix__sw--ghost' : '') + '" style="background:' + fill + ';color:' + fill + '" aria-hidden="true"></span>';
+      var facts = [];
+      if (n.badge) facts.push('<span class="fact-pill fact-pill--' + (PILL[n.badge.k] || 'quiet') + '">' + esc(n.badge.t) + '</span>');
+      if (n.metric) facts.push('<span class="fact-chip">' + esc(n.metric) + '</span>');
+      if (n.path) facts.push('<span class="ov-mono">' + esc(n.path) + '</span>');
+      return '<li class="ov-row ov-row--dense ab-ix" data-node="' + esc(n.id) + '">' +
+        '<div class="ov-row__main">' +
+          '<button type="button" class="ov-row__title ab-ix__t" aria-expanded="false" aria-controls="ab-ix-' + i + '">' + sw + esc(n.label) + (n.sub ? '<span class="ov-mono">' + esc(n.sub) + '</span>' : '') + '</button>' +
+          (facts.length ? '<div class="ov-row__facts">' + facts.join('') + '</div>' : '') +
+          '<div class="ab-ix__body" id="ab-ix-' + i + '" hidden></div>' +
+        '</div></li>';
+    }).join('');
+    if (indexN) indexN.textContent = String(rows.length);
+  }
+
+  // Open one index row (fold the others), fill it with the island's detail,
+  // and light the island on the map while it is open.
+  function openIndexRow(id, scroll) {
+    var rows = indexRows.querySelectorAll('.ab-ix');
+    var target = null;
+    for (var i = 0; i < rows.length; i++) {
+      var r = rows[i], hit = r.getAttribute('data-node') === id;
+      var t = r.querySelector('.ab-ix__t'), body = r.querySelector('.ab-ix__body');
+      t.setAttribute('aria-expanded', hit ? 'true' : 'false');
+      body.hidden = !hit;
+      if (hit) { target = r; body.innerHTML = detailHTML(nodeById(id)); }
+      else body.innerHTML = '';
+    }
+    if (target) {
+      if (indexEl && !indexEl.open) indexEl.open = true;
+      selected = id; lightNode(id);
+      if (scroll) target.scrollIntoView({ block: 'nearest' });
+    }
+  }
+  function closeIndexRows() {
+    var rows = indexRows.querySelectorAll('.ab-ix');
+    for (var i = 0; i < rows.length; i++) {
+      rows[i].querySelector('.ab-ix__t').setAttribute('aria-expanded', 'false');
+      var body = rows[i].querySelector('.ab-ix__body'); body.hidden = true; body.innerHTML = '';
+    }
+  }
+
   function setView(v) {
     view = v; selected = null;
-    var btns = document.querySelectorAll('.ab-modes button');
-    for (var i = 0; i < btns.length; i++) btns[i].classList.toggle('active', btns[i].getAttribute('data-view') === v);
+    var btns = document.querySelectorAll('.ab-views [data-view]');
+    for (var i = 0; i < btns.length; i++) btns[i].setAttribute('aria-selected', btns[i].getAttribute('data-view') === v ? 'true' : 'false');
     render();
   }
 
   function wire() {
-    var btns = document.querySelectorAll('.ab-modes button');
+    var btns = document.querySelectorAll('.ab-views [data-view]');
     for (var i = 0; i < btns.length; i++) btns[i].addEventListener('click', function () { setView(this.getAttribute('data-view')); });
     document.getElementById('popupClose').addEventListener('click', function (ev) { ev.stopPropagation(); closePopup(); });
     svg.addEventListener('click', function () { closePopup(); });
-    window.addEventListener('resize', function () { if (selected && nodeEls[selected]) { var n = DATA.views[view].nodes.filter(function (x) { return x.id === selected; })[0]; if (n) openPopup(n, nodeEls[selected]); } });
+    document.addEventListener('keydown', function (ev) { if (ev.key === 'Escape' && popup.classList.contains('show')) closePopup(); });
+    // A neighbour chip in the map's card opens that island's card.
+    popup.addEventListener('click', function (ev) {
+      var jump = ev.target.closest('.ab-jump'); if (!jump) return;
+      ev.stopPropagation();
+      var n = nodeById(jump.getAttribute('data-node')); if (n && nodeEls[n.id]) openPopup(n, nodeEls[n.id]);
+    });
+    // The index: the title opens the row; a neighbour chip inside it opens that
+    // row; hovering a row lights the island.
+    indexRows.addEventListener('click', function (ev) {
+      var jump = ev.target.closest('.ab-jump');
+      if (jump) { openIndexRow(jump.getAttribute('data-node'), true); return; }
+      var t = ev.target.closest('.ab-ix__t'); if (!t) return;
+      var row = t.closest('.ab-ix'), id = row.getAttribute('data-node');
+      if (t.getAttribute('aria-expanded') === 'true') { closeIndexRows(); selected = null; clearLight(); }
+      else { closePopup(); openIndexRow(id, false); }
+    });
+    indexRows.addEventListener('mouseover', function (ev) {
+      var row = ev.target.closest('.ab-ix'); if (row && !selected) lightNode(row.getAttribute('data-node'));
+    });
+    indexRows.addEventListener('mouseout', function (ev) {
+      var row = ev.target.closest('.ab-ix'); if (row && !selected) clearLight();
+    });
+    window.addEventListener('resize', function () { if (selected && nodeEls[selected] && popup.classList.contains('show')) { var n = nodeById(selected); if (n) openPopup(n, nodeEls[selected]); } });
+    // On a phone the map is a thumbnail and the index is the read.
+    if (indexEl && window.matchMedia && window.matchMedia('(max-width: 640px)').matches) indexEl.open = true;
   }
 
   function showEmpty() {
     emptyEl.classList.add('show'); svg.style.display = 'none';
     captionEl.textContent = 'The map has not been generated on this deploy yet.';
     footEl.textContent = '';
+    if (hintEl) hintEl.hidden = true;
+    if (indexEl) indexEl.hidden = true;
   }
 
   // Re-render when the shell flips the theme — the scene's non-semantic values

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

@@ -1,5 +1,5 @@
 {
-  "_": "Repo atlas — the self-drawing module map. Its SEMANTIC node palette is fixed by ADR 0094 and is not the token tier's business; everything around it (toolbar, chips, legend, popup, badges) is chrome and rides the world. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "_": "Repo atlas — the self-drawing module map. Its SEMANTIC node palette is fixed by ADR 0094 and is not the token tier's business; everything around it (the panel, the view switch, the caption, the detail card, the legend, the island index) is chrome and rides the world. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once; the redesign (task 1003472) added the `truth`, `detail` and `index` states. Populated look: the hall-preview harness serves modules/hall-ui/public/atlas.json when scripts/gds/gen-atlas.js has written it (the file is generated on deploy and gitignored, so run the generator first).",
   "page": "/builders/atlas",
   "surface": "hall-ui",
   "stub": {
@@ -44,6 +44,57 @@
         ]
       }
     },
+    "truth": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          ".ab-views [data-view=\"modules\"]"
+        ],
+        [
+          "wait",
+          500
+        ]
+      ]
+    },
+    "detail": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "dispatchClick",
+          "#svg .ab-node"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ]
+    },
+    "index": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "dispatchClick",
+          "#ab-index-rows .ab-ix:first-child .ab-ix__t"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ]
+    },
     "out": {
       "auth": false
     }