@bongos/core 1.19.455 → 1.19.456

package/docs/module-api-changelog.md

@@ -1347,5 +1347,7 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.453 with no explicit bump. run 33554965618. (task 1002620)
   1.19.455 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.454 with no explicit bump. run 33558738299. (task 1002620)
+  1.19.456 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.455 with no explicit bump. run 33560584235. (task 1002620)
 ---------------------------------------------------------------------------
 ```

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

@@ -13,40 +13,49 @@
    renderer reads at draw time, with dark variants, so the scene adapts to
    the theme without the pack touching the encoding. */
 .atlas-page{
-  /* semantic map palette — FIXED (never pack-driven), tuned for both themes */
+  /* 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
+     scramble the map's colour-coded MEANING, so these nine are fixed literals on
+     purpose and are not the Fifteen Rule's business. Everything BELOW them is
+     chrome, and chrome is the world's (task 1003307). */
   --ab-sun:#6366f1; --ab-sky:#0ea5e9; --ab-coral:#f43f5e; --ab-paper:#b3a284;
   --ab-good:#10b981; --ab-core:#f59e0b; --ab-db:#ef4444; --ab-ghost:#94a3b8; --ab-danger:#dc2626;
   /* theme-dependent, non-semantic scene values (read by atlas.js) */
   --ab-label-ink: var(--ink);
-  --ab-label-halo: var(--surface);
+  --ab-label-halo: var(--bg-card);
+  /* 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);
-  --ab-glow: #c7cdf7;
-  --ab-b-good-bg:#dcfce7; --ab-b-good-fg:#166534;
-  --ab-b-warn-bg:#fef3c7; --ab-b-warn-fg:#92400e;
-  --ab-b-danger-bg:#fee2e2; --ab-b-danger-fg:#991b1b;
-  --ab-b-info-bg:#e0f2fe; --ab-b-info-fg:#075985;
+  /* 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
+     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. */
+  --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:1px solid var(--border); border-radius:var(--radius);
+  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(--surface);
+    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). */
 html[data-theme="dark"] .atlas-page{
   --ab-ambient: rgba(255,255,255,.03);
-  --ab-glow: #3b418c;
-  --ab-b-good-bg:#123227; --ab-b-good-fg:#5eead4;
-  --ab-b-warn-bg:#33260d; --ab-b-warn-fg:#fcd34d;
-  --ab-b-danger-bg:#371616; --ab-b-danger-fg:#fca5a5;
-  --ab-b-info-bg:#0f2740; --ab-b-info-fg:#7dd3fc;
+  --ab-glow: color-mix(in srgb, var(--sea) 55%, var(--bg));
 }
 @media (prefers-color-scheme: dark){
   html:not([data-theme]) .atlas-page{
     --ab-ambient: rgba(255,255,255,.03);
-    --ab-glow: #3b418c;
-    --ab-b-good-bg:#123227; --ab-b-good-fg:#5eead4;
-    --ab-b-warn-bg:#33260d; --ab-b-warn-fg:#fcd34d;
-    --ab-b-danger-bg:#371616; --ab-b-danger-fg:#fca5a5;
-    --ab-b-info-bg:#0f2740; --ab-b-info-fg:#7dd3fc;
+    --ab-glow: color-mix(in srgb, var(--sea) 55%, var(--bg));
   }
 }
 .atlas-page *{box-sizing:border-box}
@@ -54,12 +63,12 @@ html[data-theme="dark"] .atlas-page{
 
 .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-text); background:var(--accent-weak); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:3px 9px; border-radius:999px}
-.ab-modes{display:inline-flex; gap:0; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden}
+  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(--surface); color:var(--ink-soft); padding:6px 14px; transition:background .15s, color .15s}
-.ab-modes button + button{border-left:1px solid var(--border-strong)}
-.ab-modes button.active{background:var(--accent-weak); color:var(--accent-text)}
+  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}
 
 .ab-caption{padding:13px 20px 0; margin:0; font-size:13px; line-height:1.5; color:var(--ink-soft); max-width:90ch}
@@ -68,10 +77,10 @@ html[data-theme="dark"] .atlas-page{
 .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(--surface) 75%, transparent); backdrop-filter:blur(4px); padding:5px 11px; border-radius:999px; border:1px solid var(--border)}
+  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(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 30px; max-width:460px;
+.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)}
@@ -82,8 +91,8 @@ html[data-theme="dark"] .atlas-page{
 .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}
 
-.ab-popup{position:absolute; z-index:6; width:300px; max-width:88%; background:var(--surface);
-  border:1px solid var(--border); border-radius:var(--radius); padding:15px 16px; display:none;
+.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;
@@ -91,13 +100,13 @@ html[data-theme="dark"] .atlas-page{
 .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:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11.5px; color:var(--ink-soft); margin-top:4px; word-break:break-all}
+.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(--surface-2); border:1px solid var(--border);
-  padding:4px 9px; border-radius:999px; 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:999px}
+.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)}
 

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

@@ -19,6 +19,14 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
+      <!-- task 1003307: the atlas shipped with no page head and no <h1> — the
+           map filled the column and the page had no name in the document. The
+           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>
+      </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

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

@@ -0,0 +1,60 @@
+{
+  "_": "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.",
+  "page": "/builders/atlas",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/atlas",
+    "/api/(gds|bongos)/public/repo",
+    "/builders/atlas.json"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "\\b501\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "Not Implemented",
+    "load failed"
+  ],
+  "states": {
+    "map": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#scene"
+        ]
+      }
+    },
+    "out": {
+      "auth": false
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
+}

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

@@ -5,10 +5,10 @@
 .cb-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
 
 .cb-item {
-  border: 1px solid var(--rule);
+  border: var(--line) solid var(--rule);
   border-left: 3px solid var(--rule);
   border-radius: var(--radius-sm);
-  background: var(--surface);
+  background: var(--bg-card);
   padding: 10px 12px;
 }
 

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

@@ -19,7 +19,13 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head">
+      <!-- task 1003307: the board page head. Collab shipped with NO <h1> at all
+           (one-header-main-h1 measured 0 on every render), so the re-skin
+           carries the structural fix rather than porting the hole. The heading
+           is the LABEL voice, not a display line: on a working surface the
+           page's own name is the least interesting thing on it. -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Collab</h1>
         <p class="page-head__sub" id="cb-sub">Loading…</p>
       </div>
 

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

@@ -0,0 +1,60 @@
+{
+  "_": "Collab — the two-sided ask board. ASKED OF YOU comes first because it is the half where someone is waiting, and the empty state of that half is the page's most common render. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "page": "/builders/collab",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/collab",
+    "/api/(gds|bongos)/connections",
+    "/api/(gds|bongos)/v1/help-requests"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "\\b501\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "Not Implemented",
+    "load failed"
+  ],
+  "states": {
+    "board": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cb-for-me"
+        ]
+      }
+    },
+    "out": {
+      "auth": false
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
+}

package/modules/hall-ui/public/copy-desk.css

@@ -17,18 +17,20 @@
   flex-direction: column;
   gap: 0.15rem;
   padding: 0.75rem 0.9rem;
-  border: 1px solid var(--rule-soft);
-  border-radius: 0.5rem;
-  background: var(--surface-2);
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-sm);
+  background: var(--glass);
 }
 .cd-stat__n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
 .cd-stat__l { font-size: 0.8rem; opacity: 0.7; }
 
 .cd-note { font-size: 0.85rem; opacity: 0.75; line-height: 1.5; }
+/* 4px, not --radius-sm: a 10px radius on a 16px-tall inline span reads as a
+   pill, and the tier has no smaller token. Deliberate, not missed. */
 .cd-note code {
   padding: 0.05rem 0.3rem;
   border-radius: 0.25rem;
-  background: var(--surface-2);
+  background: var(--glass);
   font-size: 0.95em;
 }
 
@@ -40,8 +42,8 @@
 .cd-dialog__input,
 .cd-dialog__text {
   padding: 0.4rem 0.6rem;
-  border: 1px solid var(--rule-soft);
-  border-radius: 0.35rem;
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-sm);
   background: var(--bg-deep);
   color: inherit;
   font: inherit;
@@ -56,9 +58,9 @@
 
 .cd-card {
   padding: 0.85rem 1rem;
-  border: 1px solid var(--rule-soft);
-  border-radius: 0.5rem;
-  background: var(--surface-2);
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-sm);
+  background: var(--glass);
 }
 .cd-card--slim { padding: 0.6rem 0.8rem; }
 .cd-card__head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
@@ -70,23 +72,23 @@
    leading and trailing space in a string is often exactly what is wrong. */
 .cd-quote {
   quotes: '"' '"';
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.9em;
   white-space: pre-wrap;
   word-break: break-word;
 }
-.cd-where { font-size: 0.8rem; opacity: 0.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.cd-where { font-size: 0.8rem; opacity: 0.6; font-family: var(--font-mono); }
 .cd-byline { font-size: 0.8rem; opacity: 0.65; margin-left: auto; }
 .cd-reason { margin: 0.3rem 0 0; line-height: 1.55; }
 .cd-snapshot-label { font-size: 0.8rem; opacity: 0.6; }
 .cd-closed { margin: 0.5rem 0 0; font-size: 0.85rem; opacity: 0.8; line-height: 1.5; }
-.cd-places { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; opacity: 0.65; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.cd-places { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; opacity: 0.65; font-family: var(--font-mono); }
 
 .cd-tag {
   display: inline-block;
   padding: 0.1rem 0.45rem;
-  border: 1px solid var(--rule);
-  border-radius: 999px;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
   font-size: 0.72rem;
   letter-spacing: 0.02em;
   opacity: 0.85;
@@ -103,11 +105,14 @@
 .cd-dialog {
   width: min(34rem, 92vw);
   padding: 1.25rem;
-  border: 1px solid var(--rule);
-  border-radius: 0.6rem;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius);
   background: var(--bg-card);
   color: inherit;
 }
+/* The one literal this sheet keeps. Pure black with alpha used as a SCRIM is
+   the single exception the Fifteen Rule names, and a backdrop cannot take a
+   ground token: it has to darken whatever is behind it in either mode. */
 .cd-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
 .cd-dialog__h { margin: 0 0 0.5rem; font-size: 1.1rem; }
 .cd-dialog__target { margin: 0 0 0.9rem; line-height: 1.5; }

package/modules/hall-ui/public/copy-desk.html

@@ -19,7 +19,15 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head"><p class="page-head__sub" id="cd-sub">Loading the copy desk…</p></div>
+      <!-- task 1003307: the board page head. Copy desk shipped with NO <h1> at all
+           (one-header-main-h1 measured 0 on every render), so the re-skin
+           carries the structural fix rather than porting the hole. The heading
+           is the LABEL voice, not a display line: on a working surface the
+           page's own name is the least interesting thing on it. -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Copy desk</h1>
+        <p class="page-head__sub" id="cd-sub">Loading the copy desk…</p>
+      </div>
 
       <main id="hall-main">
         <!-- The counts. Deliberately four numbers and not a dashboard: open work,

package/modules/hall-ui/public/copy-desk.states.json

@@ -0,0 +1,59 @@
+{
+  "_": "Copy desk — the one-voice review queue. Its confirm dialog is a real <dialog>, so its ::backdrop is the sheet's single sanctioned literal (black with alpha as a scrim). Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "page": "/builders/copy-desk",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/copy",
+    "/api/(gds|bongos)/security/"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "\\b501\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "Not Implemented",
+    "load failed"
+  ],
+  "states": {
+    "queue": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#cd-summary-scroll"
+        ]
+      }
+    },
+    "out": {
+      "auth": false
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
+}

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

@@ -9,9 +9,15 @@
   <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 1003307: the reading-room archetype's own sheet. drachmae reuses the
+       primer's layout and loaded primer.css for it, but never room.css — so it
+       had the room's DOM and none of the room's world: no reading measure, no
+       prose-link 24px floor, no table wrapper. Loading it is the fix; the order
+       matches primer.html (room first, the page's own sheet on top). -->
+  <link rel="stylesheet" href="/builders/room.css">
   <link rel="stylesheet" href="/builders/primer.css?v=2026-07-02-shell1">
 </head>
-<body class="primer-body" data-page="drachmae" data-page-title="Drachmae &amp; karma">
+<body class="room primer-body" data-page="drachmae" data-page-title="Drachmae &amp; karma">
 
 <!-- Reading-progress bar — fills as the reader scrolls through the article. -->
 <div class="primer-progress" aria-hidden="true"><div class="primer-progress__bar" id="primer-progress-bar"></div></div>
@@ -23,7 +29,13 @@
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
 
-      <div class="page-head">
+      <!-- task 1003307: the reading-room head. drachmae shares the primer's
+           .primer-layout and is read as a document, so it takes .page-head--room
+           (task 1003306's archetype) rather than the board's label voice — and
+           it gets the <h1> it never had. -->
+      <div class="page-head page-head--room">
+        <p class="page-head__eyebrow">Docs</p>
+        <h1 class="page-head__h">Drachmae &amp; karma</h1>
         <p class="page-head__sub">How you get paid, and how you earn trust — the reward model in plain language. About a five-minute read.</p>
       </div>
 
@@ -45,9 +57,30 @@
           </aside>
 
           <!-- Article column — markdown rendered here. -->
-          <article class="primer-article" id="primer-article" aria-busy="true">
-            <div class="primer-loading">Loading the drachmae guide…</div>
-          </article>
+          <!-- The room's loading shape: skeleton lines in the article's own
+               measure, not a sentence. (.primer-loading, which used to sit in the
+               article, is defined in no stylesheet and rendered unstyled.) -->
+          <div class="primer-skeleton scroll" id="primer-skeleton" aria-hidden="true">
+            <span class="primer-sk primer-skeleton__h"></span>
+            <div class="primer-skeleton__p">
+              <span class="primer-sk"></span>
+              <span class="primer-sk"></span>
+              <span class="primer-sk"></span>
+            </div>
+            <div class="primer-skeleton__rule"></div>
+            <div class="primer-skeleton__p">
+              <span class="primer-sk"></span>
+              <span class="primer-sk"></span>
+            </div>
+          </div>
+
+          <article class="primer-article scroll" id="primer-article" aria-busy="true" hidden></article>
+
+          <div class="primer-note primer-note--error scroll" id="primer-error" hidden>
+            <p class="primer-note__label">The guide did not load</p>
+            <p class="primer-note__body">The markdown behind this page could not be fetched. Reload to try again, or read it in the repo.</p>
+            <p class="primer-note__acts"><a class="btn btn--ghost" href="/builders">Back to home</a></p>
+          </div>
 
         </div>
       </main>

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

@@ -146,9 +146,21 @@
     });
   }
 
+  // The three panels the article can resolve into (the primer's show(), which
+  // this page's DOM has mirrored since task 1472 and now finally matches).
+  function show(which) {
+    for (const [id, on] of [['#primer-skeleton', which === 'loading'],
+                            ['#primer-article', which === 'article'],
+                            ['#primer-error', which === 'error']]) {
+      const el = $(id);
+      if (el) el.hidden = !on;
+    }
+  }
+
   async function boot() {
     const article = $('#primer-article');
     if (!article || !window.OTBMdReader) return;
+    show('loading');
     let md;
     try {
       const [mdRes] = await Promise.all([
@@ -159,8 +171,8 @@
       md = await mdRes.text();
     } catch (err) {
       console.error('[drachmae] failed to load doc', err);
-      article.innerHTML = `<p class="primer-loading">Could not load the drachmae guide. <a href="/builders">Go back</a> and try again.</p>`;
       article.removeAttribute('aria-busy');
+      show('error');
       return;
     }
     const resolveLinkHref = window.OTBMdReader.makeResolveLinkHref({
@@ -169,9 +181,15 @@
       getTreeBase: () => repoTreeBase,
       diagramsHref: '/builders/diagrams',
     });
-    const { html, headings } = window.OTBMdReader.parseMarkdown(md, resolveLinkHref);
+    const parsed = window.OTBMdReader.parseMarkdown(md, resolveLinkHref);
+    // The doc's leading "# …" is the same page name .page-head--room already
+    // renders. Two <h1>s fails one-header-main-h1, and the page head is the one
+    // that exists before the fetch and survives its failure (task 1003307).
+    const html = parsed.html.replace(/^\s*<h1\b[^>]*>[\s\S]*?<\/h1>\s*/, '');
+    const headings = parsed.headings.filter((h) => h.level > 1);
     article.innerHTML = html;
     article.removeAttribute('aria-busy');
+    show('article');
     // Awaited before the TOC is built so the rate card gets a TOC entry and a
     // scrollspy target; the article itself is already on screen by now.
     const bountyHeading = await appendBountySection(article);

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

@@ -0,0 +1,64 @@
+{
+  "_": "Drachmae & karma — a READING ROOM, not a board: it shares the primer .primer-layout and takes .page-head--room. Public (no page gate), so the signed-out render is the one most readers get. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "page": "/builders/drachmae",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/versions"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "\\b501\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "Not Implemented",
+    "load failed"
+  ],
+  "states": {
+    "read": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          600
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#primer-article",
+          "#primer-toc"
+        ]
+      }
+    },
+    "out": {
+      "auth": false,
+      "actions": [
+        [
+          "wait",
+          600
+        ]
+      ]
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
+}