@bongos/core 1.24.61 → 1.24.63

package/modules/hall-ui/public/approval-queue.css

@@ -67,9 +67,11 @@ html.aq-open { overflow: hidden; }
   min-width: 0;
   box-sizing: border-box;
   padding: 26px 30px;
-  border-radius: 30px;
+  /* the shared dialog's corner and hairline (controls.css .hall-dialog, task
+     1005137): the glass is the artboard's, the shape is the hall's one dialog */
+  border-radius: var(--ds-radius-panel);
   background: var(--aq-glass);
-  border: 1px solid var(--aq-glass-edge);
+  border: var(--line) solid var(--aq-glass-edge);
   backdrop-filter: blur(30px) saturate(160%);
   -webkit-backdrop-filter: blur(30px) saturate(160%);
   box-shadow: inset 0 1px 0 var(--aq-glass-rim), var(--ds-shadow-pop);
@@ -309,7 +311,7 @@ html.aq-open { overflow: hidden; }
   .aq-overlay { padding: 8px; align-items: stretch; --aq-scrim: rgba(4, 5, 9, .88); }
   html[data-theme] .aq-overlay,
   html:not([data-theme]) .aq-overlay { --aq-scrim: rgba(4, 5, 9, .88); }
-  .aq-dialog { width: min(100%, calc(100vw - 16px)); height: min(100%, calc(100dvh - 16px)); padding: 18px 16px; border-radius: 22px; overflow-y: auto; gap: 14px; }
+  .aq-dialog { width: min(100%, calc(100vw - 16px)); height: min(100%, calc(100dvh - 16px)); padding: 18px 16px; overflow-y: auto; gap: 14px; }
   .aq-dialog > * { flex-shrink: 0; }
   .aq-head { flex-wrap: wrap; row-gap: 10px; }
   .aq-eyebrow { order: 1; flex: 1 1 auto; }

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

@@ -314,6 +314,16 @@ select option { background: var(--bg-card); color: var(--ink); }
   color: var(--ink-soft);
 }
 .hall-dialog__body p:last-child { margin-bottom: 0; }
+/* the prompt's one field (OTBDialog.prompt, task 1005136): the hall's field,
+   the dialog's full width, under its label */
+.hall-dialog__label {
+  display: block;
+  margin: var(--ds-space-xs) 0 var(--ds-space-hair);
+  font-size: var(--ds-text-sm);
+  color: var(--ink-soft);
+}
+.hall-dialog__field { display: block; width: 100%; margin-top: var(--ds-space-xs); }
+.hall-dialog__label + .hall-dialog__field { margin-top: 0; }
 .hall-dialog__actions {
   display: flex;
   flex-wrap: wrap;

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

@@ -284,7 +284,11 @@
       // questions. Turning it ON needs no reason — the allowlist already is one.
       let reason = null;
       if (on) {
-        reason = window.prompt('Why are you turning the runner off? (shown to anyone who asks why it is idle)');
+        reason = await window.OTBDialog.prompt({
+          title: 'Why are you turning the runner off?',
+          label: 'Shown to anyone who asks why it is idle',
+          confirmLabel: 'Turn off',
+        });
         if (reason === null) return;   // cancelled — not the same as an empty reason
       }
       try {
@@ -414,7 +418,12 @@
         const pausing = btn.getAttribute('data-paused') !== '1';
         let reason = null;
         if (pausing) {
-          reason = window.prompt('Why are you pausing this builder’s runner? (shown to them)');
+          reason = await window.OTBDialog.prompt({
+            title: 'Why are you pausing this builder’s runner?',
+            label: 'Shown to them',
+            confirmLabel: 'Pause',
+            trigger: btn,
+          });
           if (reason === null) return;
         }
         try {

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

@@ -4,7 +4,8 @@
    The UI audit found six dialog builds (attn, cd, mw, aq, ov, st), each with
    its own scrim, layer, Escape handling and focus rules, and fourteen
    window.confirm() calls whose browser box neither looks like the hall nor
-   reads in its voice. This is the one of each that replaces them.
+   reads in its voice. This is the one of each that replaces them; its prompt
+   replaces the browser's text box the same way (task 1005136).
 
    window.OTBDialog:
      confirm({ title, body, confirmLabel, cancelLabel, danger }) → Promise<boolean>
@@ -12,6 +13,14 @@
          starts a new paragraph. Resolves true only on the confirm button;
          Cancel, the close mark, Escape and a click on the scrim all resolve
          false. A `danger` confirm opens with focus on Cancel.
+     prompt({ title, body, label, value, placeholder, confirmLabel, cancelLabel, required, maxLength })
+         → Promise<string|null>
+         The branded prompt (task 1005136): the confirm with one text field.
+         Resolves the text as typed on the confirm button or Enter, and null
+         on Cancel, the close mark, Escape or the scrim — so a caller can tell
+         "cancelled" from "left empty". `required` keeps the confirm button
+         off while the field is blank. The field is labelled by `label`, or by
+         the title when there is none; it opens focused with its text selected.
      open({ title, body, actions, wide, className, initialFocus }) → { el, close(value), result }
          A dialog built here and removed on close; `result` resolves with the
          pressed action's `value` (or null when dismissed).
@@ -249,7 +258,46 @@
     return dlg.result.then((v) => v === true);
   }
 
-  const api = { bind, open, confirm };
+  // The prompt's confirm action resolves to this, never to a value a caller could
+  // pass, so "use what was typed" cannot be confused with an action's own value.
+  const TYPED = {};
+  let fieldSeq = 0;
+
+  function prompt(opts = {}) {
+    const d = doc();
+    const fid = `hall-prompt-${++fieldSeq}`;
+    const form = d.createElement('form');
+    form.className = 'hall-dialog__form';
+    form.noValidate = true;
+    const label = opts.label ? `<label class="hall-dialog__label" for="${fid}">${esc(opts.label)}</label>` : '';
+    form.innerHTML = (opts.body ? bodyHtml(opts.body) : '') + label
+      + `<input type="text" class="hall-dialog__field" id="${fid}" autocomplete="off">`;
+    const field = form.querySelector('input');
+    if (!opts.label) field.setAttribute('aria-label', String(opts.title || ''));
+    if (opts.placeholder) field.setAttribute('placeholder', String(opts.placeholder));
+    if (opts.maxLength > 0) field.setAttribute('maxlength', String(opts.maxLength));
+    field.value = opts.value == null ? '' : String(opts.value);
+    const dlg = open({
+      title: opts.title,
+      body: form,
+      actions: [
+        { label: opts.cancelLabel || 'Cancel', value: null, kind: 'ghost' },
+        { label: opts.confirmLabel || 'Save', value: TYPED, kind: 'primary' },
+      ],
+      trigger: opts.trigger,
+      initialFocus: () => field,
+    });
+    const ok = dlg.el.querySelector('[data-dialog-value="1"]');
+    const sync = () => { if (opts.required) ok.disabled = !field.value.trim(); };
+    sync();
+    field.addEventListener('input', sync);
+    // Enter in the one field submits the form: the same as pressing the confirm.
+    form.addEventListener('submit', (ev) => { ev.preventDefault(); if (!ok.disabled) dlg.close(TYPED); });
+    if (typeof field.select === 'function') field.select();
+    return dlg.result.then((v) => (v === TYPED ? field.value : null));
+  }
+
+  const api = { bind, open, confirm, prompt };
   if (typeof window !== 'undefined') window.OTBDialog = api;
   if (typeof module !== 'undefined' && module.exports) module.exports = api;
 })();

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

@@ -438,13 +438,18 @@
           if (v) act(() => call('PATCH', `/${v.id}`, { page: views.page, is_default: !v.is_default }),
             v.is_default ? `“${v.name}” is no longer your default.` : `This page now opens with “${v.name}”.`);
         } else if (t.hasAttribute('data-rename')) {
-          const v = pick('data-rename');
-          const name = v && window.prompt('New name for this view', v.name);
-          if (name && name.trim() && name.trim() !== v.name) act(() => call('PATCH', `/${v.id}`, { page: views.page, name }), 'Renamed.');
+          renameView(pick('data-rename'), t);
         } else if (t.hasAttribute('data-delete')) {
           deleteView(pick('data-delete'), t);
         }
       });
+      async function renameView(v, trigger) {
+        if (!v) return;
+        const name = await window.OTBDialog.prompt({
+          title: 'New name for this view', value: v.name, confirmLabel: 'Rename', required: true, trigger,
+        });
+        if (name && name.trim() && name.trim() !== v.name) act(() => call('PATCH', `/${v.id}`, { page: views.page, name }), 'Renamed.');
+      }
       async function deleteView(v, trigger) {
         if (!v || !(await window.OTBDialog.confirm({
           title: `Delete the view “${v.name}”?`,

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

@@ -247,11 +247,19 @@
       var btn = e.target && e.target.closest ? e.target.closest('[data-roster-status]') : null;
       if (!btn) return;
       var status = btn.getAttribute('data-roster-status');
-      var reason = status === 'inactive' ? (window.prompt('Reason for offboarding (optional):', '') || null) : null;
-      btn.disabled = true;
-      patchBuilder(btn.getAttribute('data-id'), 'status', { status: status, reason: reason })
-        .then(function () { toast(status === 'inactive' ? 'Builder offboarded.' : 'Builder reactivated.'); return refreshGov(); })
-        .catch(function (err) { btn.disabled = false; toast('Could not change standing: ' + (err.message || err)); });
+      // Offboarding asks for a reason in the hall's own dialog (task 1005136). The reason
+      // stays optional; Cancel now stops the offboarding, where the browser box's Cancel
+      // used to offboard anyway with no reason.
+      var asked = status === 'inactive'
+        ? window.OTBDialog.prompt({ title: 'Reason for offboarding (optional)', confirmLabel: 'Offboard', trigger: btn })
+        : Promise.resolve('');
+      asked.then(function (reason) {
+        if (reason === null) return;
+        btn.disabled = true;
+        patchBuilder(btn.getAttribute('data-id'), 'status', { status: status, reason: reason || null })
+          .then(function () { toast(status === 'inactive' ? 'Builder offboarded.' : 'Builder reactivated.'); return refreshGov(); })
+          .catch(function (err) { btn.disabled = false; toast('Could not change standing: ' + (err.message || err)); });
+      });
     });
   }
 

package/modules/hall-ui/public/settings-passkeys.js

@@ -42,7 +42,10 @@
 
   async function rename(id, row) {
     const current = row.querySelector('strong').textContent;
-    const next = window.prompt('Name this card', current === 'Unnamed card' ? '' : current);
+    const next = await window.OTBDialog.prompt({
+      title: 'Name this card', value: current === 'Unnamed card' ? '' : current, confirmLabel: 'Save',
+      trigger: row.querySelector('.passkeys-rename'),
+    });
     if (next === null) return;
     try {
       const res = await api.request('POST', `${API}/me/passkeys/rename`, { body: { credential_id: id, nickname: next } });

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

@@ -25,6 +25,11 @@
    in the window, lighter towers with unlit panes, a warm wall and floor, the
    lamp off and a patch of sun on the floor. The glass panels over the room
    follow its sky; the hall chrome still keeps its own light and dark.
+   EXCEPT IN DARK (task 1005137): the day room is a light-theme room. Under the
+   hall's dark theme a cream room sat beside a black rail and bar, so every day
+   rule below is scoped html:not([data-theme="dark"]) and dark keeps the night
+   room at any hour. data-sky is only ever set by studio.js after shell.js has
+   set data-theme, so the one selector covers first paint too.
 
    The second half is the older reviews' garden (R06 of goal 1000074, task
    1003117), which still answers the reviews filed before Tweak Mode (TW14) in
@@ -85,8 +90,8 @@ body[data-page="studio"] {
    inks are set darker than the mockup's so they hold AA on the glass over a
    light wall (records/studio.md): the link, and the credits figure and focus
    ring, which by night are the accent. */
-body[data-page="ai-studio"][data-sky="day"],
-body[data-page="studio"][data-sky="day"] {
+html:not([data-theme="dark"]) body[data-page="ai-studio"][data-sky="day"],
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] {
   --st-room: #efe7dc;
   --st-frame: #d6c9b7;
   --st-night: #bfdaf0;
@@ -132,17 +137,17 @@ body[data-page="studio"][data-sky="day"] {
 }
 /* The panels' scrim is the day wall's own tint, whatever the hall's theme, set
    on the overlay so it outranks the theme's .42 and the phone's .88. */
-body[data-page="studio"][data-sky="day"] .st-overlay {
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .st-overlay {
   --st-scrim: rgba(239, 231, 220, .9);
   color-scheme: light;
 }
-body[data-page="ai-studio"][data-sky="day"] .studio,
-body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
+html:not([data-theme="dark"]) body[data-page="ai-studio"][data-sky="day"] .studio,
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
 /* The Approval queue (approval-queue.css) is night glass on its own root; over
    the day room it wears the same day glass as the studio's own panels. Its
    rendered page stays on its paper frame, and its accent button stays the
    accent, which carries black words at AA in either sky. */
-body[data-page="studio"][data-sky="day"] .aq-overlay {
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .aq-overlay {
   color-scheme: light;
   --aq-scrim: rgba(239, 231, 220, .9);
   --aq-glass: rgba(255, 255, 255, .75);
@@ -159,7 +164,7 @@ body[data-page="studio"][data-sky="day"] .aq-overlay {
   --aq-link: var(--accent-deep);
   --aq-rule: rgba(60, 40, 20, .12);
 }
-body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-color: var(--st-focus); }
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-color: var(--st-focus); }
 
 /* The stage fills the content box: the hall's content column is a reading
    width, and the artboard is the whole window. */
@@ -288,11 +293,11 @@ html[data-fullscreen="on"] body[data-page="studio"] .fullscreen-toggle {
 
 /* The day room: the sun rides higher and larger than the moon, the stars and
    the lamp's glow are gone, the clouds and the patch of sun are there. */
-body[data-sky="day"] .st-moon { left: 394px; top: 42px; width: 76px; height: 76px; box-shadow: 0 0 80px 26px var(--st-moon-halo); }
-body[data-sky="day"] .st-star,
-body[data-sky="day"] .st-glow { opacity: 0; }
-body[data-sky="day"] .st-cloud { opacity: .9; }
-body[data-sky="day"] .st-sunpatch { opacity: .7; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-moon { left: 394px; top: 42px; width: 76px; height: 76px; box-shadow: 0 0 80px 26px var(--st-moon-halo); }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-star,
+html:not([data-theme="dark"]) body[data-sky="day"] .st-glow { opacity: 0; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-cloud { opacity: .9; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-sunpatch { opacity: .7; }
 
 /* The room's only motion: the clouds drift, and a change of sky fades over
    .8s. Both live only without a reduced-motion preference, and style.css's
@@ -312,16 +317,10 @@ body[data-sky="day"] .st-sunpatch { opacity: .7; }
 .st-actions { position: relative; z-index: 1; }
 
 /* ---------------------------------------------------------------------------
-   The top row: the room's name, and the tally pill.
+   The top row: the tally pill. (The room's name, a mono eyebrow above the
+   greeting, went in task 1005137: DESIGN.md bans a label block over the h1.)
    --------------------------------------------------------------------------- */
 .st-top { display: flex; align-items: center; min-height: 48px; gap: 16px; flex-wrap: wrap; }
-.st-eyebrow {
-  font-family: var(--st-mono);
-  font-size: 11px;
-  letter-spacing: .14em;
-  text-transform: uppercase;
-  color: var(--st-ink-faint);
-}
 .st-tally {
   margin-left: auto;
   display: flex;

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

@@ -80,11 +80,10 @@
           <div class="st-leaf st-leaf--2"></div>
         </div>
 
-        <!-- The name of the room, and the artist's tally (GET /copy-desk/tally)
+        <!-- The artist's tally (GET /copy-desk/tally)
              in a glass pill top right. The shell's full-screen button keeps the
              window's corner above it. -->
         <div class="st-top">
-          <span class="st-eyebrow">{{worldName}} · studio</span>
           <div class="st-tally" id="st-tally" hidden>
             <span class="st-tally__item"><span class="st-tally__n st-tally__n--credits" id="st-tally-credits">0</span><span class="st-tally__label">credits</span></span>
             <span class="st-tally__rule" aria-hidden="true"></span>

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

@@ -856,8 +856,12 @@
   // round goes back to /tweak if it still holds its batch, else it is closed.
   async function releasePage(pageId, taskId, button) {
     if (!lib || !lib.PAGE_ID_RE.test(String(pageId || ''))) return;
-    const note = window.prompt('Why is this round being released? One line, for whoever picks the page up next.',
-      'Stuck in a state the Studio could not read; released so the page can be tweaked again.');
+    const note = await window.OTBDialog.prompt({
+      title: 'Why is this round being released?',
+      label: 'One line, for whoever picks the page up next.',
+      value: 'Stuck in a state the Studio could not read; released so the page can be tweaked again.',
+      confirmLabel: 'Release', required: true, trigger: button,
+    });
     if (note == null) return;
     if (button) button.disabled = true;
     const body = { note };

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

@@ -1307,7 +1307,7 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  padding: 3px;
+  padding: 2px;
   border-radius: var(--radius-pill);
   box-shadow: inset 0 0 0 1px var(--glass-edge);
   flex-shrink: 0;
@@ -1959,6 +1959,15 @@ html.pb-editing main { padding-bottom: 180px; }
   .topbar-trail .topbar-back svg { display: block; }
   .topbar-trail .topbar-back { padding: 0 8px; }
   .topbar-trail ~ .topbar-title { display: block; }
+  /* The 320 top bar (task 1005137): the menu, the Update pill, the search, the
+     mode switch and the three toggles measured 340px in a 320px bar, so the
+     theme and full-screen icons were cut off at the edge. Here the bar packs
+     tighter and each icon button is 28px — still above the 24px floor — so the
+     whole row fits with room to spare. Pinned in tests/hall_topbar_320.mjs. */
+  .app-topbar { gap: var(--ds-space-hair); padding: 0 var(--ds-space-xs); }
+  .topbar-menu, .theme-toggle, .fullscreen-toggle { width: 28px; height: 28px; }
+  .zoom-toggle { min-width: 28px; height: 28px; padding: 0 6px; }
+  .topbar-side .topbar-jump { min-width: 28px; padding: 0 6px; }
 }
 .zoom-toggle__pct {
   font-size: 12px;
@@ -4335,15 +4344,18 @@ a.stat-tile:hover .stat-tile__sub { color: var(--ink-soft); }
    no new theme vars, so dark mode follows the neutral flip for free. The overlay
    mirrors .deeplink-card's posture (fixed scrim + centred panel, z above the
    drawer) so the two modal surfaces read as one system. */
+/* One shape with its neighbour (task 1005137): the search slot and the mode
+   switch beside it are both a 32px pill with the same glass hairline, where the
+   slot used to be a squarer, filled box next to a round one. */
 .topbar-jump {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 32px;
-  padding: 0 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  padding: 0 12px 0 10px;
+  border: 1px solid var(--glass-edge);
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-faint);
   font: inherit;
   font-size: 13px;

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

@@ -109,6 +109,21 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
 
 .top { position: fixed; left: 0; right: 0; top: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 0; display: flex; align-items: flex-start; gap: 16px; pointer-events: none; z-index: 5; }
 .top > * { pointer-events: auto; }
+/* The sky is pannable, so its marks will always pass under the header strip and
+   the legend. Each band stands on a veil of the void that fades into the sky
+   (task 1005137: dots painted over the counts, the what-if pill and the legend).
+   The veil sits inside the band's own stacking layer, under its words and above
+   the canvas, and never catches the pointer. */
+.top::before, .foot::before { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
+.top::before { top: 0; bottom: -24px; background: linear-gradient(to bottom, var(--void) 62%, transparent); }
+.foot::before { bottom: 0; top: -24px; background: linear-gradient(to top, var(--void) 62%, transparent); }
+/* the ground the sky's own words stand on: a glow of the void itself, so a dot
+   passing under a count or a legend word dims instead of painting over it — in
+   both modes, since the void is the mode's ground */
+.top, .foot, .composer { --sky-halo: 0 0 6px var(--void), 0 0 14px var(--void), 0 0 2px var(--void); }
+.stats, .gravity, .obj, .alt { text-shadow: var(--sky-halo); }
+/* the composer's hint floats lower than the strip's veil, so it carries its own */
+.gravity:not(:empty) { padding: 2px 12px; border-radius: var(--ds-radius-tile); background: color-mix(in srgb, var(--void) 78%, transparent); }
 .brand { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .brand h1 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
 .brand h1 em { font-style: normal; color: var(--ink-dim); }
@@ -262,7 +277,9 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
 .mk.settled { width: 12px; height: 12px; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); box-shadow: inset 0 0 0 3px var(--void), inset 0 0 0 4px color-mix(in srgb, var(--ink) 35%, transparent), 0 0 8px color-mix(in srgb, var(--ink) 25%, transparent); }
 .mk.collapsed { width: 9px; height: 9px; background: var(--void); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: 0 0 0 2px var(--void), 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
 .mk.unseen { width: 12px; height: 12px; background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
-.mk.task { width: 4px; height: 4px; background: color-mix(in srgb, var(--ink) 60%, var(--void)); }
+/* `task` is also the hall's task-card class (style.css): its card padding blew the
+   legend's 4px dot up into a 48px blob over its own word, so it is zeroed here. */
+.mk.task { width: 4px; height: 4px; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 60%, var(--void)); }
 .mk.task.live { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
 .mk.born { width: 10px; height: 10px; background: transparent; border: 1px solid var(--accent); box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 5px var(--accent); }
 .mk.route { width: 14px; height: 2px; border-radius: 1px; background: var(--chart); box-shadow: 0 0 6px var(--chart); }

package/modules/hall-ui/records/studio.md

@@ -34,7 +34,8 @@ Where it differs from the mockup, and why:
 - **The link, the credits figure and the focus ring are #96410f by day**, not the mockup's #a3481a link and #fb9569 accent: #a3481a on Resume's tint over the wall is 4.3:1, under AA, and the accent is 1.8:1 on the wall.
 - **The quiet inks are #5a595f (faint) and #66656b (dim, hint)** where the mockup has the one #66656b: the studio has three quiet tiers, and each holds AA on the glass and the bare wall (the hint is the lowest, 4.7:1).
 - **The sun, clouds and sun patch are placed for the studio's 560px window** (the mockup's is 520px): the sun at 394/42 and 76px, the clouds about 8% larger, the patch 20px right to sit under the studio's lamp.
-- **The panels follow the sky**: by day the two glass panels and the Approval queue wear white glass (.75) over a scrim of the wall's own tint (.9) in either hall theme and on a phone. The queue's rendered page stays on its paper frame. The mockup draws no panel.
+- **The day room is a light-theme room (task 1005137).** Under the hall's dark theme a cream room sat beside the black rail and bar, so every day rule is scoped `html:not([data-theme="dark"])`: in dark the room is the night room at any hour, and the clock only changes the greeting. The room's mono eyebrow ("{{worldName}} · studio") went in the same task, since DESIGN.md bans a label above the h1, and the Approval queue took the shared dialog's corner and hairline.
+- **The panels follow the sky**: by day the two glass panels and the Approval queue wear white glass (.75) over a scrim of the wall's own tint (.9) on a phone and in the light theme. The queue's rendered page stays on its paper frame. The mockup draws no panel.
 - **"Good morning." while being typed over shows the page's greeting line**, "Good evening.", the one line a tweak can rewrite. Rewritten, it is the greeting at every hour.
 - **On a phone the sun patch lies on the phone's floor** (bottom right, 300 by 70); the mockup hides it under 900px, but the studio's phone keeps its desk.
 - **The stars do not twinkle and the lamp does not breathe at night**: the night room stays as it shipped. This task adds only the day room's drift.

package/modules/hall-ui/specimens/components.css

@@ -3,6 +3,13 @@
    sheets; this lays them out in sections and stops the live toast and the
    dialog from floating, so each sits at rest where it can be looked at. */
 body[data-page="components"] { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font-body); }
+/* The hall layering (task 1005137): style.css paints the plate and its veil as
+   fixed body::before / body::after at z-index 0, and a hall page lifts its
+   content above them (.app-body is position: relative; z-index: 1). The
+   specimen has no .app-body, so in dark the veil (--plate-veil, black at .82-.93)
+   lay OVER every section and the page read as near-black. Its two blocks take
+   the same lift. Pinned in tests/hall_topbar_320.mjs. */
+.spec-head, .spec-main { position: relative; z-index: 1; }
 .spec-head, .spec-main { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 0 var(--ds-space-md); }
 .spec-head { padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-hair); }
 .spec-kicker { display: inline-block; margin: 0 var(--ds-space-xs) 0 0; vertical-align: middle; font-family: var(--label-face); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }

package/modules/npm-release/public/work.js

@@ -191,7 +191,12 @@
 
   async function release(version) {
     if (releasing) return;
-    if (!window.confirm(`Release ${version} to every project?\n\nEvery other project will be offered ${version} and everything merged before it. This cannot be pressed back; a newer version can be released after it.`)) return;
+    // the hall's own confirm (hall-dialog.js; the deploy page loads it after the shell)
+    if (!(await window.OTBDialog.confirm({
+      title: `Release ${version} to every project?`,
+      body: `Every other project will be offered ${version} and everything merged before it. This cannot be pressed back; a newer version can be released after it.`,
+      confirmLabel: 'Release',
+    }))) return;
     releasing = version;
     releaseNote = null;
     paint();

package/modules/public-landing/public/assets/cosmos.css

@@ -343,22 +343,25 @@ h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,32
 .lede a{color:var(--link-ink);font-weight:700;text-decoration:none;}
 .lede a:hover{text-decoration:underline;}
 
-/* ── buttons ── */
-.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--accent-on);background:var(--accent);border:none;border-radius:999px;padding:11px 22px;text-decoration:none;box-shadow:0 10px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
+/* ── buttons ──
+   On the shared scales (task 1005136): the pill corner, the type step and the fast
+   duration and ease every surface spends. The modifier pairs answer to the hall's
+   names too (.btn--ghost, .btn--danger), which is what the shared dialog builds. */
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:var(--ds-text-lg);color:var(--accent-on);background:var(--accent);border:none;border-radius:var(--ds-radius-pill);padding:11px 22px;text-decoration:none;box-shadow:0 10px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);}
 .btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px color-mix(in srgb,var(--accent) 80%,transparent);}
 .btn:active{transform:translateY(0) scale(.98);}
 .btn:disabled{background:color-mix(in srgb,var(--ink) 12%,var(--bg-deep));color:color-mix(in srgb,var(--ink) 40%,var(--bg-deep));box-shadow:none;cursor:not-allowed;transform:none;}
-.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;border:2px solid var(--line);}
-.btn.ghost:hover{border-color:var(--accent);color:var(--accent-deep);}
+.btn.ghost,.btn.btn--ghost{background:transparent;color:var(--ink-soft);box-shadow:none;border:2px solid var(--line);}
+.btn.ghost:hover,.btn.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep);}
 /* a disabled ghost button must LOOK disabled — the same .btn:disabled-vs-.btn.ghost
    specificity tie .btn.danger:disabled fixed below, applied to "Applied" on the
    map's card (R10, task 1002286: it kept full-strength ghost styling and only the
    cursor said it was inert, task 1003774). */
 .btn.ghost:disabled{background:transparent;color:color-mix(in srgb,var(--ink) 40%,var(--bg-deep));border-color:color-mix(in srgb,var(--ink) 18%,transparent);box-shadow:none;cursor:not-allowed;transform:none;}
 .btn.ghost:disabled:hover{border-color:color-mix(in srgb,var(--ink) 18%,transparent);color:color-mix(in srgb,var(--ink) 40%,var(--bg-deep));}
-.btn.small{font-size:13.5px;padding:8px 16px;}
-.btn.danger{background:transparent;color:var(--err);box-shadow:none;border:2px solid color-mix(in srgb,var(--err) 35%,transparent);}
-.btn.danger:hover{background:var(--err-soft);border-color:var(--err);}
+.btn.small{font-size:var(--ds-text-sm-plus);padding:8px 16px;}
+.btn.danger,.btn.btn--danger{background:transparent;color:var(--err);box-shadow:none;border:2px solid color-mix(in srgb,var(--err) 35%,transparent);}
+.btn.danger:hover,.btn.btn--danger:hover{background:var(--err-soft);border-color:var(--err);}
 /* a disabled danger button must LOOK disabled. .btn.danger is declared AFTER
    .btn:disabled at equal specificity, so without these it keeps full-strength
    --err and only the cursor says the control is inert — on a destructive button
@@ -1152,8 +1155,8 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
    The scrim is a plain rgba black in BOTH modes on purpose, so it needs no dark
    override at all — a token here would have to be ink, and ink is near-white in
    dark, which paints a white sheet over the page instead of dimming it. */
-.cardScrim{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
-  padding:24px;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);}
+.cardScrim{position:fixed;inset:0;z-index:var(--ds-z-modal);display:flex;align-items:center;justify-content:center;
+  padding:var(--ds-space-md);background:rgba(0,0,0,.55);backdrop-filter:blur(3px);}
 /* THE POSTER (task 1003301; the v2 pick, direction §7): a specimen sheet in the
    world, not a panel. min(560px,100%) on bg-card closed by one rule hairline,
    no shadow (the world has no shadow vocabulary for UI). A flex column ordered
@@ -1166,13 +1169,13 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
    / relationship, the faces, the facts as a mono hairline ledger, the doors. */
 .projCard{position:relative;container-type:inline-size;display:flex;flex-direction:column;
   width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;text-align:left;
-  background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:none;padding:0 0 26px;}
+  background:var(--bg-card);border:var(--ds-line) solid var(--rule);border-radius:var(--ds-radius-panel);box-shadow:none;padding:0 0 26px;}
 .projCard:not(.has-art){padding-top:26px;}
 .projCard .cardArt{order:0;display:block;width:100%;aspect-ratio:5/2;object-fit:cover;
-  border-radius:var(--radius) var(--radius) 0 0;}
+  border-radius:var(--ds-radius-panel) var(--ds-radius-panel) 0 0;}
 .projCard .cardX{position:absolute;top:12px;right:12px;z-index:4;display:inline-flex;align-items:center;
-  justify-content:center;width:30px;height:30px;border:0;border-radius:var(--radius-pill);
-  background:var(--glass-strong);color:var(--ink);cursor:pointer;font-size:14px;line-height:1;}
+  justify-content:center;width:30px;height:30px;border:0;border-radius:var(--ds-radius-pill);
+  background:var(--glass-strong);color:var(--ink);cursor:pointer;font-size:var(--ds-text-md);line-height:1;}
 .projCard .cardX:hover{background:var(--glass-edge);}
 /* on art the close control takes the void pill: the one legal literal is black with alpha */
 .projCard.has-art .cardX{background:var(--void-pill);color:var(--void-ink);}
@@ -1740,3 +1743,23 @@ p.sec-p{font-size:var(--fs-lede);font-weight:500;color:var(--ink-soft);line-heig
 #view-new .inviteBox{margin-top:34px;}
 #view-new .inviteBox .finePrint{margin-top:10px;}
 #view-new #wizInviteLater{margin-top:14px;}
+
+/* ── the shared dialog (hall-dialog.js; task 1005136) ──
+   The hub's one question ("start another project while one is building?") is the
+   hall's own dialog, OTBDialog.confirm, not the browser's box. Its frame is the
+   project card's: the card ground, one hairline, the panel corner, on the shared
+   modal layer, over the same black scrim, and like the card no shadow (the world
+   has no shadow vocabulary for UI). Its buttons are this sheet's .btn (the
+   --ghost/--danger names above). */
+.hall-dialog{z-index:var(--ds-z-modal);box-sizing:border-box;width:min(480px,calc(100vw - 2 * var(--ds-space-sm)));
+  max-height:calc(100dvh - 2 * var(--ds-space-md));overflow-y:auto;margin:auto;padding:var(--ds-space-md);
+  color:var(--ink);background:var(--bg-card);border:var(--ds-line) solid var(--rule);
+  border-radius:var(--ds-radius-panel);box-shadow:none;text-align:left;}
+.hall-dialog::backdrop{background:rgba(0,0,0,.55);}
+.hall-dialog__head{display:flex;align-items:flex-start;gap:var(--ds-space-xs);margin:0 0 var(--ds-space-xs);}
+.hall-dialog__title{flex:1;margin:0;font-family:var(--font-display);font-size:var(--ds-text-3xl);font-weight:500;line-height:1.25;color:var(--ink);}
+.hall-dialog__x{flex:none;min-width:32px;min-height:32px;padding:0;font:inherit;font-size:var(--ds-text-4xl);line-height:1;
+  color:var(--ink-soft);background:transparent;border:0;border-radius:var(--ds-radius-pill);cursor:pointer;}
+.hall-dialog__x:hover{color:var(--ink);}
+.hall-dialog__body p{margin:0 0 var(--ds-space-xs);font-size:var(--ds-text-md);line-height:1.5;color:var(--ink-soft);}
+.hall-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--ds-space-xs);margin-top:var(--ds-space-md);}

package/modules/public-landing/public/index.html

@@ -504,7 +504,9 @@ body{
 @media (max-width:900px){
   .topbar{height:var(--top-h);padding:0 12px;gap:10px}
   .barLeft{gap:12px}
-  .barRight{gap:12px}
+  /* the shared step, not 12: at 320 signed out the bar was 1px wider than the room, and the
+     mark slid under the projects trigger by that pixel (task 1005136) */
+  .barRight{gap:var(--ds-space-xs)}
   /* the wordmark folds away so the bar holds ONE row down to 320; the link keeps its name */
   .barMark{min-width:44px;justify-content:center}
   .mark-word{display:none}
@@ -515,6 +517,10 @@ body{
   .pill{min-height:42px;font-size:13.5px}
   .signin,.newacct{padding:0 14px}
   .newacct{margin-right:6px}
+  /* signed in, the bar carries four doors and the mark: the second-account door folds
+     into the profile band (its bandFold twin) so the bar holds one row with no overlap
+     down to 320 (task 1005136) */
+  .barRight:has(.who) .newacct{display:none}
   .bandIn{padding:0 12px 16px}
   .bandRow{grid-template-columns:1fr;gap:0}
   .bandT{font-size:20px}
@@ -749,6 +755,8 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
            Apex-only because the page is — /account is served only where
            platform-identity runs, so a child instance loses the item whole. -->
       <!--apex-only:start--><li class="bandCell"><a class="bandT" href="/invitations">Invitations</a></li><li class="bandCell"><a class="bandT" href="/connections">Connections</a></li><li class="bandCell"><a class="bandT" href="/account">Account</a></li><!--apex-only:end-->
+      <!-- the bar's second-account door, folded here on a narrow bar (task 1005136) -->
+      <li class="bandCell bandFold"><a class="bandT" href="/api/bongos/auth/web/start?return=/&amp;repos=1&amp;switch=1" title="Sign in with a different GitHub account">New account</a></li>
       <!-- the honest hover target; the script upgrades the click to the POST -->
       <li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>
     </ul>

package/modules/public-landing/public/projects.html

@@ -2185,6 +2185,8 @@ summary{min-height:24px;padding:3px 0;}
 <footer class="foot"><!--apex-only:start--><span>A non-profit, capture-resistant commons. </span><!--apex-only:end-->Built by agents, on <span data-brand-product-inline>Cloud&nbsp;Bongos</span>. <a href="https://www.npmjs.com/package/@bongos/core" target="_blank" rel="noopener">Open source</a> (<a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">AGPL-3.0</a>).<nav class="footNav" aria-label="Site"><a href="/#about">About</a><a href="/docs">Docs</a><a href="/privacy">Privacy</a><a href="/terms">Terms</a><a href="/contact">Contact</a><!--apex-only:start--><a data-link-hall href="{{buildersOrigin}}">Builders' hall</a><!--apex-only:end--></nav></footer>
 
 <script src="/modules/hall-ui/public/dom-utils.js"></script>
+<!-- the hall's one dialog (task 1005136): the hub asks its question in it, never in the browser's box -->
+<script src="/modules/hall-ui/public/hall-dialog.js"></script>
 <script>
 /* Brand-pack fill (R57): the server injects window.__BRANDING__ ahead of this
    script; baked markup above is the standalone fallback. */
@@ -7855,8 +7857,14 @@ summary{min-height:24px;padding:3px 0;}
       var again = document.createElement('button');
       again.type = 'button'; again.className = 'again'; again.textContent = 'Start another project';
       again.addEventListener('click', function () {
-        /* a standup still being watched is not abandoned by accident */
-        if (instanceId && pollTimer && !confirm((state.name || state.slug) + ' keeps building — you’ll find it on your projects page. Start a new one?')) return;
+        /* a standup still being watched is not abandoned by accident — asked in the
+           shared dialog (hall-dialog.js), never the browser's box (task 1005136) */
+        var asked = instanceId && pollTimer
+          ? window.OTBDialog.confirm({ title: 'Start a new one?', body: (state.name || state.slug) + ' keeps building — you’ll find it on your projects page.', confirmLabel: 'Start a new one', trigger: again })
+          : Promise.resolve(true);
+        asked.then(function (yes) { if (yes) startAnother(); });
+      });
+      function startAnother() {
         resetForNewProject();
         /* the deliberate goodbye: the record goes too, so nothing offers to resume
            the project the founder has just said they are finished watching */
@@ -7868,7 +7876,7 @@ summary{min-height:24px;padding:3px 0;}
         try { sessionStorage.removeItem(CREATED_KEY); } catch (e) {}
         paintResumeOffer(null);
         show(1, true);
-      });
+      }
       $('doneActs').insertBefore(again, $('hopLink'));
     }
     wireAgain();