@bongos/core 1.24.51 → 1.24.53

package/modules/hall-ui/public/goal-inbox.js

@@ -583,10 +583,10 @@
       // The slices still render into their divs below (kept off-screen in
       // #attention-slices), and refresh() rebuilds the cards from what they hold.
       '<div class="attn-cards" id="attention-cards"></div>' +
-      '<dialog class="attn-dialog" id="attention-dialog" aria-labelledby="attention-dialog-h">' +
-        '<div class="attn-dialog__head"><h3 class="attn-dialog__h" id="attention-dialog-h"></h3>' +
-        '<button type="button" class="attn-dialog__x" id="attention-dialog-x" aria-label="Close">×</button></div>' +
-        '<div class="attn-dialog__body" id="attention-dialog-body"></div>' +
+      '<dialog class="hall-dialog hall-dialog--wide" id="attention-dialog" aria-labelledby="attention-dialog-h">' +
+        '<div class="hall-dialog__head"><h3 class="hall-dialog__title" id="attention-dialog-h"></h3>' +
+        '<button type="button" class="hall-dialog__x" id="attention-dialog-x" data-dialog-close aria-label="Close">×</button></div>' +
+        '<div class="hall-dialog__body attn-dialog__body" id="attention-dialog-body"></div>' +
       '</dialog>' +
       '<div id="attention-slices" hidden>' +
       // task 1003464: the system's own notices — rebase owed, an input the
@@ -692,36 +692,51 @@
     cards.innerHTML = html.join('');
   }
 
-  function openCard(id) {
-    const dlg = host.querySelector('#attention-dialog');
+  // The window is the hall's one dialog (hall-dialog.js, task 1005085): the
+  // shared panel, scrim, Escape, focus trap and focus return. Closing it by any
+  // road (the mark, Escape, the scrim) moves the slice back and redraws the cards.
+  let lastCard = null;
+  function windowHandle() {
+    const dlg = host && host.querySelector('#attention-dialog');
+    if (!dlg) return null;
+    return window.OTBDialog.bind(dlg, {
+      onClose: restoreSlice,
+      // the cards were redrawn, so the opener is gone: focus its successor
+      returnFocus: (op) => (op && op.isConnected ? op
+        : (lastCard && host.querySelector(`[data-attn-open="${CSS.escape(lastCard)}"]`)) || host.querySelector('.attn-card')),
+    });
+  }
+
+  function openCard(id, trigger) {
+    const h = windowHandle();
     const div = host.querySelector(`#attention-slices > #${CSS.escape(id)}`);
-    if (!dlg || !div) return;
+    if (!h || !div) return;
     host.querySelector('#attention-dialog-h').textContent = sliceFacts(div).title;
     host.querySelector('#attention-dialog-body').appendChild(div);
     openSlice = div;
-    if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', '');
+    lastCard = id;
+    h.open(trigger);
   }
 
-  function closeCard() {
-    const dlg = host && host.querySelector('#attention-dialog');
+  function restoreSlice() {
     if (openSlice) {
       host.querySelector('#attention-slices').appendChild(openSlice);
       openSlice = null;
     }
-    if (dlg && dlg.open && typeof dlg.close === 'function') dlg.close();
     renderCards();
   }
 
+  function closeCard() {
+    const h = windowHandle();
+    if (h && h.isOpen()) h.close();
+    else restoreSlice();
+  }
+
   function wireCards() {
     host.addEventListener('click', (e) => {
       const card = e.target.closest('[data-attn-open]');
-      if (card) { openCard(card.getAttribute('data-attn-open')); return; }
-      if (e.target.closest('#attention-dialog-x')) { closeCard(); return; }
-      // a click on the backdrop lands on the <dialog> itself
-      if (e.target.id === 'attention-dialog') closeCard();
+      if (card) openCard(card.getAttribute('data-attn-open'), card);
     });
-    const dlg = host.querySelector('#attention-dialog');
-    if (dlg) dlg.addEventListener('close', () => { if (openSlice) closeCard(); });
   }
 
   // The card's shared visibility contract: any slice renderer calls refresh()

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

@@ -141,6 +141,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>

package/modules/hall-ui/public/goals-page.js

@@ -540,8 +540,14 @@
   async function doGoalRelease(claimId, taskId, btn) {
     const key = `release:${claimId}`;
     if (pendingClaims.has(key)) return;
-    if (!window.confirm(`Release your claim on #${taskId}? It returns to the queue and no ${curLabel()} are earned.`)) return;
+    // Held while the confirm is open too, so a second click cannot stack a second dialog.
     pendingClaims.add(key);
+    const yes = await window.OTBDialog.confirm({
+      title: `Release your claim on #${taskId}?`,
+      body: `It returns to the queue and no ${curLabel()} are earned.`,
+      confirmLabel: 'Release', danger: true, trigger: btn,
+    });
+    if (!yes) { pendingClaims.delete(key); return; }
     if (btn) { btn.disabled = true; btn.textContent = 'Releasing…'; }
     try {
       const out = await claimAction.release(claimId, taskId);

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

@@ -254,6 +254,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task 1004727: the ONE karma vote control every task/idea list renders -->

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

@@ -158,6 +158,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></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/hall-kit.js"></script>

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

@@ -299,7 +299,11 @@
   // action here that discards work in bulk — a drifted rank can be ~60 rows.
   async function resetRank(rank, btn) {
     const label = rank.label || rank.rank_key;
-    if (!window.confirm(`Reset ${label} to its default permissions?\n\nEvery change you've made to this rank is discarded, and it takes effect for every builder at this rank on their next request.`)) return;
+    if (!(await window.OTBDialog.confirm({
+      title: `Reset ${label} to its default permissions?`,
+      body: 'Every change you\'ve made to this rank is discarded, and it takes effect for every builder at this rank on their next request.',
+      confirmLabel: 'Reset rank', danger: true, trigger: btn,
+    }))) return;
     btn.disabled = true;
     try {
       const out = await sendJson('POST', `/government/ranks/${encodeURIComponent(rank.rank_key)}/reset`);
@@ -316,7 +320,11 @@
   // them, so the toast can say exactly whose rank to remove first.
   async function deleteRank(rank, btn) {
     const label = rank.label || rank.rank_key;
-    if (!window.confirm(`Delete the ${label} rank?\n\nIts permissions go with it. This cannot be undone, though you can create a rank with the same name again.`)) return;
+    if (!(await window.OTBDialog.confirm({
+      title: `Delete the ${label} rank?`,
+      body: 'Its permissions go with it. This cannot be undone, though you can create a rank with the same name again.',
+      confirmLabel: 'Delete rank', danger: true, trigger: btn,
+    }))) return;
     btn.disabled = true;
     const res = await api.request('DELETE', `${API}/government/ranks/${encodeURIComponent(rank.rank_key)}`);
     if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }

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

@@ -0,0 +1,255 @@
+/* modules/hall-ui/public/hall-dialog.js — THE HALL'S ONE DIALOG
+   (task 1005085, goal 1000138 "One Cloud Bongos design system").
+
+   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.
+
+   window.OTBDialog:
+     confirm({ title, body, confirmLabel, cancelLabel, danger }) → Promise<boolean>
+         The branded confirm. `body` says what will happen; a blank line in it
+         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.
+     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).
+     bind(root, { panel, initialFocus, returnFocus, lockClass, backdropCloses, onOpen, onClose })
+         → { open(trigger), close(), isOpen() }
+         The behaviour for a dialog a page draws itself: a native <dialog
+         class="hall-dialog"> (root is the dialog), or a div overlay whose
+         `panel` carries role="dialog" (the approval queue's and the studio's
+         glass, which are designs of record). Either way it gets the same rules.
+
+   THE RULES, every dialog alike: role="dialog" + aria-modal, labelled by its
+   title; focus moves in on open and is trapped there (Tab and Shift+Tab wrap);
+   Escape closes the TOP dialog only (a confirm over the attention window
+   closes the confirm, not both); a click on the scrim closes; focus returns to
+   the control that opened it. Native dialogs open with showModal(), so the
+   page behind is inert and the dialog sits in the top layer; the look is
+   controls.css's `.hall-dialog` (bg-card, the hairline, the panel corner, the
+   one floating shadow) over `--scrim`.
+
+   No motion here (DESIGN.md: no motion in JavaScript). Plain script, no
+   build; node-require-safe so tests can load it in a vm. */
+(function () {
+  'use strict';
+
+  const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), '
+    + 'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  // The open dialogs, oldest first. Escape and Tab act on the last one only.
+  const stack = [];
+  let seq = 0;
+  let keysWired = false;
+
+  const doc = () => (typeof document !== 'undefined' ? document : null);
+  const isNative = (el) => String(el && el.tagName || '').toUpperCase() === 'DIALOG';
+
+  function shown(el) {
+    for (let n = el; n && n.nodeType === 1; n = n.parentNode) {
+      if (n.hidden) return false;
+    }
+    return true;
+  }
+
+  function focusables(panel) {
+    return Array.from(panel.querySelectorAll(FOCUSABLE)).filter(shown);
+  }
+
+  function onKey(ev) {
+    const top = stack[stack.length - 1];
+    if (!top) return;
+    if (ev.key === 'Escape') {
+      ev.preventDefault();
+      if (ev.stopPropagation) ev.stopPropagation();
+      top.close();
+      return;
+    }
+    if (ev.key !== 'Tab') return;
+    const f = focusables(top.panel);
+    if (!f.length) { ev.preventDefault(); return; }
+    const d = doc();
+    const at = d && d.activeElement;
+    const inside = at && top.panel.contains(at);
+    const first = f[0];
+    const last = f[f.length - 1];
+    if (ev.shiftKey && (at === first || !inside)) { ev.preventDefault(); last.focus(); }
+    else if (!ev.shiftKey && (at === last || !inside)) { ev.preventDefault(); first.focus(); }
+  }
+
+  function wireKeys() {
+    const d = doc();
+    if (keysWired || !d || typeof d.addEventListener !== 'function') return;
+    keysWired = true;
+    // Capture, so a page's own Escape listener never also fires for a key a
+    // dialog has already spent.
+    d.addEventListener('keydown', onKey, true);
+  }
+
+  function bind(root, opts = {}) {
+    if (!root) throw new Error('OTBDialog.bind needs an element');
+    // Once per element: a page that re-fills one <dialog> and opens it again
+    // (the market watch's propose dialog) gets the same handle, not a second
+    // set of listeners.
+    if (root.__otbDialog) return root.__otbDialog;
+    const panel = opts.panel || root;
+    const native = isNative(root);
+    let opener = null;
+    let open = false;
+
+    if (!panel.getAttribute('role')) panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-modal', 'true');
+    // The panel takes focus when nothing inside can, so Escape and the trap
+    // still see the dialog as focused.
+    if (panel.getAttribute('tabindex') === null) panel.setAttribute('tabindex', '-1');
+
+    const handle = {
+      root,
+      panel,
+      open: show,
+      close: hide,
+      isOpen: () => open,
+    };
+    root.__otbDialog = handle;
+
+    root.addEventListener('click', (ev) => {
+      if (!open || opts.backdropCloses === false) return;
+      // A native dialog's backdrop click lands on the <dialog> itself, as does
+      // a div overlay's on the overlay; anything inside the panel does not.
+      if (ev.target === root && (native || panel !== root)) hide();
+      else if (ev.target && ev.target.closest && ev.target.closest('[data-dialog-close]')
+        && root.contains(ev.target)) hide();
+    });
+    if (native) {
+      // Escape is spent by onKey; this is the browser's own close path (a
+      // form method="dialog" submit), which must still settle the handle.
+      root.addEventListener('cancel', (ev) => { ev.preventDefault(); hide(); });
+      root.addEventListener('close', () => { if (open) settle(); });
+    }
+
+    function show(trigger) {
+      if (open) return handle;
+      const d = doc();
+      opener = trigger || (d && d.activeElement) || null;
+      open = true;
+      stack.push(handle);
+      wireKeys();
+      if (native) {
+        if (!root.open) {
+          if (typeof root.showModal === 'function') root.showModal();
+          else root.setAttribute('open', '');
+        }
+      } else {
+        root.hidden = false;
+      }
+      if (opts.lockClass && d) d.documentElement.classList.add(opts.lockClass);
+      if (typeof opts.onOpen === 'function') opts.onOpen();
+      let first = null;
+      if (typeof opts.initialFocus === 'function') first = opts.initialFocus();
+      else if (typeof opts.initialFocus === 'string') first = panel.querySelector(opts.initialFocus);
+      if (!first) first = focusables(panel)[0] || panel;
+      if (first && first.focus) first.focus();
+      return handle;
+    }
+
+    // Everything closing does except hiding the element, so the browser's own
+    // close (which has already hidden it) can share it.
+    function settle(value) {
+      open = false;
+      const i = stack.indexOf(handle);
+      if (i !== -1) stack.splice(i, 1);
+      const d = doc();
+      if (opts.lockClass && d) d.documentElement.classList.remove(opts.lockClass);
+      if (typeof opts.onClose === 'function') opts.onClose(value);
+      const back = typeof opts.returnFocus === 'function' ? opts.returnFocus(opener) : opener;
+      if (back && back.focus && back.isConnected !== false) back.focus();
+    }
+
+    function hide(value) {
+      if (!open) return;
+      if (native) {
+        open = false; // the close event below must not settle twice
+        if (root.open && typeof root.close === 'function') root.close();
+        else root.removeAttribute('open');
+        open = true;
+      } else {
+        root.hidden = true;
+      }
+      settle(value);
+    }
+
+    return handle;
+  }
+
+  // The hall's one browser escaper (dom-utils.js, loaded first on every page).
+  const esc = (s) => window.OTB.escapeHtml(s == null ? '' : s);
+
+  // A string body is TEXT, never markup: a blank line starts a paragraph.
+  function bodyHtml(body) {
+    return String(body).split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean)
+      .map((p) => `<p>${esc(p)}</p>`).join('');
+  }
+
+  function open(opts = {}) {
+    const d = doc();
+    const id = `hall-dialog-${++seq}`;
+    const el = d.createElement('dialog');
+    el.className = ['hall-dialog', opts.wide ? 'hall-dialog--wide' : '', opts.className || ''].filter(Boolean).join(' ');
+    el.setAttribute('aria-labelledby', `${id}-t`);
+    const actions = (opts.actions || []).map((a, i) => {
+      const cls = a.kind === 'ghost' ? 'btn btn--ghost' : a.kind === 'danger' ? 'btn btn--danger' : 'btn';
+      return `<button type="button" class="${cls}" data-dialog-value="${i}">${esc(a.label)}</button>`;
+    }).join('');
+    el.innerHTML = `<div class="hall-dialog__head"><h2 class="hall-dialog__title" id="${id}-t">${esc(opts.title || '')}</h2>`
+      + '<button type="button" class="hall-dialog__x" data-dialog-close aria-label="Close">×</button></div>'
+      + `<div class="hall-dialog__body" id="${id}-b"></div>`
+      + (actions ? `<div class="hall-dialog__actions">${actions}</div>` : '');
+    const bodyEl = el.querySelector('.hall-dialog__body');
+    if (opts.body && typeof opts.body === 'object' && opts.body.nodeType) bodyEl.appendChild(opts.body);
+    else if (opts.body != null && opts.body !== '') {
+      bodyEl.innerHTML = bodyHtml(opts.body);
+      el.setAttribute('aria-describedby', `${id}-b`);
+    }
+    d.body.appendChild(el);
+
+    let resolve;
+    const result = new Promise((r) => { resolve = r; });
+    const handle = bind(el, {
+      initialFocus: opts.initialFocus,
+      onClose: (value) => {
+        if (el.parentNode) el.parentNode.removeChild(el);
+        resolve(value === undefined ? null : value);
+      },
+    });
+    el.addEventListener('click', (ev) => {
+      const b = ev.target && ev.target.closest && ev.target.closest('[data-dialog-value]');
+      if (!b) return;
+      const a = (opts.actions || [])[Number(b.getAttribute('data-dialog-value'))];
+      handle.close(a ? a.value : null);
+    });
+    handle.open(opts.trigger);
+    return { el, close: (v) => handle.close(v), result };
+  }
+
+  function confirm(opts = {}) {
+    const actions = [
+      { label: opts.cancelLabel || 'Cancel', value: false, kind: 'ghost' },
+      { label: opts.confirmLabel || 'Confirm', value: true, kind: opts.danger ? 'danger' : 'primary' },
+    ];
+    const dlg = open({
+      title: opts.title,
+      body: opts.body,
+      actions,
+      trigger: opts.trigger,
+      // A destructive confirm starts on Cancel, so Enter does no harm.
+      initialFocus: `[data-dialog-value="${opts.danger ? 0 : 1}"]`,
+    });
+    return dlg.result.then((v) => v === true);
+  }
+
+  const api = { bind, open, confirm };
+  if (typeof window !== 'undefined') window.OTBDialog = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+})();

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

@@ -442,10 +442,17 @@
           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.');
         } else if (t.hasAttribute('data-delete')) {
-          const v = pick('data-delete');
-          if (v && window.confirm(`Delete the view “${v.name}”?`)) act(() => call('DELETE', `/${v.id}?${pageQ}`), 'Deleted.');
+          deleteView(pick('data-delete'), t);
         }
       });
+      async function deleteView(v, trigger) {
+        if (!v || !(await window.OTBDialog.confirm({
+          title: `Delete the view “${v.name}”?`,
+          body: 'The saved filters go. The tasks it showed are not touched.',
+          confirmLabel: 'Delete view', danger: true, trigger,
+        }))) return;
+        act(() => call('DELETE', `/${v.id}?${pageQ}`), 'Deleted.');
+      }
       menu?.addEventListener('submit', (e) => {
         e.preventDefault();
         const input = e.target.querySelector('input[name="name"]');

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

@@ -54,6 +54,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <!-- task-detail.js still owns the #/idea/N and #/blocker/N overlay, so a ref
      written inside an idea's own prose keeps resolving from this page. -->

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

@@ -229,6 +229,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <!-- task 1004727: the ONE karma vote control every task/idea list renders -->
 <script src="/builders/vote-control.js"></script>

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

@@ -110,6 +110,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers" defer></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals" defer></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark" defer></script>
+<script src="/builders/hall-dialog.js" defer></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task 2166: the shared component kit (window.OTBKit) — pager/ledger/rail.

package/modules/hall-ui/public/market-watch-item.html

@@ -68,13 +68,14 @@
   </div>
 </div>
 
-<dialog class="mw-dialog" id="mw-propose" aria-labelledby="mw-propose-title"></dialog>
+<dialog class="hall-dialog mw-dialog" id="mw-propose" aria-labelledby="mw-propose-title"></dialog>
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/hall-kit.js"></script>
 <script src="/builders/market-watch-lib.js"></script>

package/modules/hall-ui/public/market-watch-lib.js

@@ -147,20 +147,26 @@
     ['add_source', 'Add a source to watch'],
     ['correct_entry', 'Correct an entry'],
   ];
+  // The dialog is the hall's one dialog (controls.css .hall-dialog, hall-dialog.js;
+  // task 1005085): its title row carries the close mark the shared component wires.
+  function HEAD(title) {
+    return '<div class="hall-dialog__head"><h2 class="hall-dialog__title" id="mw-propose-title">' + esc(title) + '</h2>'
+      + '<button type="button" class="hall-dialog__x" data-dialog-close aria-label="Close">×</button></div>';
+  }
   function dialogHtml(mode, ctx) {
     ctx = ctx || {};
     var it = ctx.item || {};
     var h = '<form method="dialog" novalidate>';
     if (mode === 'scout') {
-      h += '<span class="mw-label" id="mw-propose-title">send a new scout</span>';
+      h += HEAD('send a new scout');
       h += '<label>What should we watch?<select name="scout"><option value="competitor">A competitor</option><option value="partner">A partner</option><option value="topic">A topic</option></select></label>';
       h += '<label>Its name<input name="name" maxlength="120" autocomplete="off" required></label>';
       h += '<label>A link, if it has one<input name="url" type="url" maxlength="500" placeholder="https://" autocomplete="off"></label>';
     } else if (mode === 'stop') {
-      h += '<span class="mw-label" id="mw-propose-title">stop tracking</span>';
+      h += HEAD('stop tracking');
       h += '<p class="mw-quiet" style="margin:0 0 12px">Asks the government to take ' + esc(it.name) + ' off the watch. Its case file stays readable.</p>';
     } else {
-      h += '<span class="mw-label" id="mw-propose-title">propose a change</span>';
+      h += HEAD('propose a change');
       h += '<label>What should change?<select name="kind">';
       CHANGE_KINDS.forEach(function (k) {
         if (k[0] === 'move_kind' && it.kind === 'topic') return;
@@ -183,7 +189,7 @@
     }
     h += '<label>Why, in one line<input name="reason" maxlength="280" autocomplete="off" required placeholder="' + (mode === 'scout' ? 'e.g. they launched an agent marketplace this week' : mode === 'stop' ? 'e.g. they shut down in September' : 'e.g. they now pay maintainers, so economy should be 4') + '"></label>';
     h += '<p class="mw-dialog__err" role="alert"></p>';
-    h += '<div class="mw-dialog__acts"><button class="btn btn--ghost" value="cancel" type="button" data-cancel>cancel</button><button class="btn" type="submit">send to the government</button></div>';
+    h += '<div class="hall-dialog__actions"><button class="btn btn--ghost" value="cancel" type="button" data-cancel>cancel</button><button class="btn" type="submit">send to the government</button></div>';
     return h + '</form>';
   }
 
@@ -213,6 +219,9 @@
     // fixed aria-label would win over aria-labelledby, so none is left on the element.
     dlg.removeAttribute('aria-label');
     dlg.setAttribute('aria-labelledby', 'mw-propose-title');
+    // The shared dialog behaviour: Escape, the focus trap, the scrim, focus back to
+    // the button that opened it (task 1005085). The first field takes focus.
+    var dh = root.OTBDialog.bind(dlg, { initialFocus: 'select, input' });
     var f = dlg.querySelector('form');
     var err = dlg.querySelector('.mw-dialog__err');
     var sync = function () {
@@ -235,7 +244,7 @@
       fill();
       wr.addEventListener('change', function () { tk.disabled = wr.checked; });
     }
-    dlg.querySelector('[data-cancel]').addEventListener('click', function () { dlg.close(); });
+    dlg.querySelector('[data-cancel]').addEventListener('click', function () { dh.close(); });
     f.addEventListener('submit', function (ev) {
       ev.preventDefault();
       var body = bodyFor(mode, f, ctx.item || {});
@@ -253,14 +262,12 @@
         return r.json().catch(function () { return {}; }).then(function (j) { return { status: r.status, ok: r.ok, data: j }; });
       }).then(function (res) {
         btn.disabled = false;
-        if (res.ok) { dlg.close(); onDone(res.data); return; }
+        if (res.ok) { dh.close(); onDone(res.data); return; }
         var e = (res.data && res.data.error) || {};
         err.textContent = res.status === 401 ? 'Sign in again to send this.' : (e.message && e.message !== e.code ? e.message : 'That did not send. Try again in a moment.');
       }).catch(function () { btn.disabled = false; err.textContent = 'Could not reach the server.'; });
     });
-    dlg.showModal();
-    var first = f.querySelector('select, input');
-    if (first) first.focus();
+    dh.open();
   }
 
   var api = {

package/modules/hall-ui/public/market-watch-rules.html

@@ -44,6 +44,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></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/hall-kit.js"></script>

package/modules/hall-ui/public/market-watch.css

@@ -161,14 +161,13 @@
 }
 
 /* ---- the propose dialog (both pages) ---------------------------------------- */
-.mw-dialog { border: 0; border-radius: var(--radius); background: var(--bg-card); color: var(--ink); padding: 20px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); }
-.mw-dialog::backdrop { background: var(--scrim); }
+/* The dialog itself is the hall's one dialog (controls.css .hall-dialog, task
+   1005085): its panel, scrim, shadow and actions row. What stays is the form. */
 .mw-dialog label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
 .mw-dialog input, .mw-dialog select { display: block; width: 100%; margin-top: 6px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 8px 9px; min-height: 36px; }
 .mw-dialog label.mw-check { display: flex; gap: 8px; align-items: center; }
 .mw-dialog label.mw-check input { display: inline-block; width: auto; min-height: 0; margin: 0; }
 .mw-dialog .mw-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
-.mw-dialog__acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
 .mw-dialog__err { color: var(--danger); font-size: 12.5px; margin: 0 0 8px; min-height: 1em; }
 .mw-filter { margin: 0 0 8px; }
 .mw-rules-link { display: inline-flex; align-items: center; min-height: 28px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }

package/modules/hall-ui/public/market-watch.html

@@ -182,13 +182,14 @@
   </div>
 </div>
 
-<dialog class="mw-dialog" id="mw-propose" aria-labelledby="mw-propose-title"></dialog>
+<dialog class="hall-dialog mw-dialog" id="mw-propose" aria-labelledby="mw-propose-title"></dialog>
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/hall-kit.js"></script>
 <script src="/builders/market-watch-lib.js"></script>

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

@@ -129,6 +129,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></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/brand-apply.js"></script>

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

@@ -83,6 +83,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></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/hall-kit.js"></script>

package/modules/hall-ui/public/my-agents.html

@@ -85,6 +85,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></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/gov-living.js?v=2026-10-10-real1"></script>