@bongos/core 1.18.0 → 1.18.18

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

@@ -59,6 +59,12 @@
           <div class="view-zone" id="zone-home-main"></div>
         </section>
 
+        <!-- Standing (task 2174): the Profile band mounts straight into
+             #zone-standing; every other Standing widget declares a `group` and
+             lands in one of the four #standing-* rail sections builders.js
+             creates below it. The old #view-achievements hash view retired into
+             the Achievements group — shell.js aliases #achievements to it so
+             existing links keep working. -->
         <section class="view" id="view-standing" data-view-title="Standing" hidden>
           <div class="standing-layout">
             <nav class="section-rail" id="standing-rail" aria-label="Standing sections" hidden></nav>
@@ -66,10 +72,6 @@
           </div>
         </section>
 
-        <section class="view" id="view-achievements" data-view-title="Achievements" hidden>
-          <div class="view-zone" id="zone-achievements"></div>
-        </section>
-
         <section class="view" id="view-leaderboard" data-view-title="Leaderboard" hidden>
           <div class="view-zone" id="zone-leaderboard"></div>
         </section>
@@ -95,9 +97,14 @@
 <!-- The app shell (sidebar + top bar + view router). Dependency-free; loaded
      BEFORE builders.js so the chrome ids exist when events are wired. -->
 <script src="/builders/shell.js?v=2026-07-02-shell1" 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>
 <!-- #807: shared dev-box management panel — loaded BEFORE builders.js so the
      OTBBoxPanel global is defined when the welcome panel mounts it. -->
 <script src="/builders/box-panel.js?v=2026-06-14-domutils" defer></script>
+<!-- task 2166: the shared component kit (window.OTBKit) — pager/ledger/rail.
+     Loaded BEFORE hall-widgets.js, whose skeletons call OTBKit.pagerBarHtml(). -->
+<script src="/builders/hall-kit.js" defer></script>
 <!-- BV1.R75: the CORE hall widgets register into window.OTB's hall-widget registry.
      Loaded BEFORE builders.js so the registry is populated when builders.js stamps
      the registered <section>s into the views. A module's own hall-widget client

package/modules/hall-ui/public/instances-panel.js

@@ -185,9 +185,12 @@
     load();
   }
 
+  // summary: true (task 2177) — a module-contributed home-main card must be
+  // row-capped with no pager/filter. This one lists the builder's instances and
+  // links out to the full surface, which is exactly the summary shape.
   window.OTB.contributeHallWidget({
     id: 'instances-scroll', label: 'Projects', order: 33,
-    module: 'provisioning', view: 'home', zone: 'home-main',
+    module: 'provisioning', view: 'home', zone: 'home-main', summary: true,
     labelledby: 'instances-h', mount,
   });
 })();

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

@@ -0,0 +1,63 @@
+/* modules.css — Page-local styles for the Modules page.
+   Lifted verbatim out of the page's inline <style> block (task 1002176);
+   the ?v= cache-bust is stamped automatically from this file's content hash
+   at boot (src/asset-version.js). */
+
+/* Page-local styles for Modules, layered on the shared design tokens
+   (style.css) — same pattern as settings.html's page-local block. */
+.mod-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 14px;
+  margin-top: 10px;
+}
+.mod-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  padding: 14px 16px;
+}
+.mod-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.mod-card__title { font-weight: 650; font-size: 14.5px; color: var(--ink); }
+.mod-card__key { font-size: 12px; color: var(--ink-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
+.mod-card__desc { font-size: 13px; color: var(--ink-soft); margin: 8px 0; }
+.mod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
+.mod-chip {
+  font-size: 11.5px;
+  color: var(--ink-soft);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 10px;
+}
+.mod-chip--core { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }
+.mod-chip--own { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+.mod-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
+button.mod-toggle {
+  font-family: var(--font-body);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 5px 16px;
+  min-width: 78px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+button.mod-toggle[data-on="1"] { background: var(--accent); border-color: var(--accent); color: #fff; }
+button.mod-toggle:disabled { opacity: 0.5; cursor: default; }
+button.mod-submit {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: transparent;
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+button.mod-submit:disabled { opacity: 0.45; cursor: not-allowed; }
+.mod-empty { color: var(--ink-faint); font-style: italic; font-size: 13px; padding: 10px 0; }
+.mod-note { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

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

@@ -10,66 +10,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <style>
-    /* Page-local styles for Modules, layered on the shared design tokens
-       (style.css) — same pattern as settings.html's page-local block. */
-    .mod-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 14px;
-      margin-top: 10px;
-    }
-    .mod-card {
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      padding: 14px 16px;
-    }
-    .mod-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-    .mod-card__title { font-weight: 650; font-size: 14.5px; color: var(--ink); }
-    .mod-card__key { font-size: 12px; color: var(--ink-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
-    .mod-card__desc { font-size: 13px; color: var(--ink-soft); margin: 8px 0; }
-    .mod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
-    .mod-chip {
-      font-size: 11.5px;
-      color: var(--ink-soft);
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      padding: 3px 10px;
-    }
-    .mod-chip--core { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }
-    .mod-chip--own { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
-    .mod-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
-    button.mod-toggle {
-      font-family: var(--font-body);
-      font-size: 12.5px;
-      font-weight: 600;
-      padding: 5px 16px;
-      min-width: 78px;
-      border-radius: 999px;
-      border: 1px solid var(--border-strong);
-      background: var(--surface);
-      color: var(--ink-soft);
-      cursor: pointer;
-    }
-    button.mod-toggle[data-on="1"] { background: var(--accent); border-color: var(--accent); color: #fff; }
-    button.mod-toggle:disabled { opacity: 0.5; cursor: default; }
-    button.mod-submit {
-      font-family: var(--font-body);
-      font-size: 12px;
-      font-weight: 600;
-      padding: 5px 12px;
-      border-radius: var(--radius-sm);
-      border: 1px solid var(--border-strong);
-      background: transparent;
-      color: var(--ink-soft);
-      cursor: pointer;
-    }
-    button.mod-submit:disabled { opacity: 0.45; cursor: not-allowed; }
-    .mod-empty { color: var(--ink-faint); font-style: italic; font-size: 13px; padding: 10px 0; }
-    .mod-note { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
-  </style>
+  <link rel="stylesheet" href="/builders/modules.css">
 </head>
 <body data-page="modules" data-page-title="Modules">
 
@@ -113,6 +54,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
 <script src="/builders/modules.js?v=2026-07-03-modtab"></script>
 </body>

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

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>My Projects</title>
+  <style>
+    :root {
+      --bg: #fff7ed; --card: #ffffff; --ink: #2a1f17; --ink-soft: #6b5d52;
+      --rule: #fed7aa; --accent: #ea580c; --accent-deep: #c2410c;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; padding: 2.5rem 1.25rem 4rem; background: var(--bg); color: var(--ink);
+      font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5;
+    }
+    .wrap { max-width: 820px; margin: 0 auto; }
+    h1 { font-size: 1.9rem; margin: 0 0 .3rem; }
+    .sub { color: var(--ink-soft); margin: 0 0 2rem; }
+    h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; border-bottom: 1px solid var(--rule); padding-bottom: .35rem; }
+    .row {
+      display: flex; align-items: center; gap: .75rem; background: var(--card);
+      border: 1px solid var(--rule); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .6rem;
+    }
+    .row .meta { flex: 1; min-width: 0; }
+    .row .name { font-weight: 600; }
+    .row .origin { color: var(--accent); font-size: .82rem; word-break: break-all; }
+    .row .owner-pill { font-size: .72rem; background: var(--accent); color: #fff; border-radius: 999px; padding: .1rem .55rem; }
+    button {
+      font: inherit; cursor: pointer; border: 1px solid var(--rule); background: #fff; color: var(--ink);
+      border-radius: 9px; padding: .4rem .8rem;
+    }
+    button:hover { border-color: var(--accent); color: var(--accent-deep); }
+    .join { display: flex; gap: .5rem; margin-top: .75rem; }
+    .join input { flex: 1; font: inherit; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 9px; }
+    .empty { color: var(--ink-soft); }
+    .note { margin-top: .5rem; color: var(--ink-soft); font-size: .9rem; min-height: 1.2em; }
+    a.home { color: var(--accent); text-decoration: none; font-size: .9rem; }
+    @media (prefers-color-scheme: dark) {
+      :root { --bg: #1a1410; --card: #241c16; --ink: #f5ece3; --ink-soft: #b9a998; --rule: #4a3728; }
+      button { background: #241c16; }
+      .join input { background: #241c16; color: inherit; }
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <a class="home" href="/builders">← Back to the hall</a>
+    <h1>My Projects</h1>
+    <p class="sub">Every project you build on across the platform.</p>
+
+    <section>
+      <h2>Projects you own</h2>
+      <div id="owned"><p class="empty">—</p></div>
+    </section>
+
+    <section id="invites-section" hidden>
+      <h2>Invitations</h2>
+      <div id="invites"></div>
+    </section>
+
+    <section>
+      <h2>Projects you build on</h2>
+      <div id="building"><p class="empty">—</p></div>
+    </section>
+
+    <section>
+      <h2>Join a project</h2>
+      <div class="join">
+        <input id="join-origin" type="url" placeholder="https://project.cloudbongos.com" autocomplete="off">
+        <button id="join-btn" type="button">Request to join</button>
+      </div>
+      <p id="join-note" class="note"></p>
+    </section>
+  </div>
+  <script src="/my-projects.js"></script>
+</body>
+</html>

package/modules/hall-ui/public/my-projects.js

@@ -0,0 +1,142 @@
+// my-projects.js — the signed-in builder's cross-project view (ADR 0141 §3, task
+// #1002112). Fetches /api/gds/my-projects (session cookie, same-origin) and renders
+// owned + building-on lists with self-service leave, plus a join-by-origin form.
+// All network values are rendered via textContent — never innerHTML.
+(function () {
+  'use strict';
+  var ownedEl = document.getElementById('owned');
+  var buildingEl = document.getElementById('building');
+  var joinBtn = document.getElementById('join-btn');
+  var joinInput = document.getElementById('join-origin');
+  var joinNote = document.getElementById('join-note');
+
+  function el(tag, cls) { var e = document.createElement(tag); if (cls) e.className = cls; return e; }
+
+  function safeOriginHost(origin) {
+    try {
+      var u = new URL(String(origin));
+      return (u.protocol === 'https:' || u.protocol === 'http:') ? u.host : null;
+    } catch (_) { return null; }
+  }
+
+  function renderList(container, items, opts) {
+    container.textContent = '';
+    if (!items || items.length === 0) {
+      var p = el('p', 'empty');
+      p.textContent = opts.emptyText;
+      container.appendChild(p);
+      return;
+    }
+    items.forEach(function (m) {
+      var row = el('div', 'row');
+      var meta = el('div', 'meta');
+      var name = el('div', 'name');
+      name.textContent = m.name || m.client_id;
+      meta.appendChild(name);
+      var host = safeOriginHost(m.origin);
+      if (host) {
+        var o = el('div', 'origin');
+        o.textContent = host;
+        meta.appendChild(o);
+      }
+      row.appendChild(meta);
+      if (m.role === 'owner') {
+        var pill = el('span', 'owner-pill');
+        pill.textContent = 'owner';
+        row.appendChild(pill);
+      }
+      if (opts.leavable) {
+        var btn = el('button');
+        btn.type = 'button';
+        btn.textContent = 'Leave';
+        btn.addEventListener('click', function () { leave(m.client_id, row, btn); });
+        row.appendChild(btn);
+      }
+      container.appendChild(row);
+    });
+  }
+
+  function leave(clientId, row, btn) {
+    btn.disabled = true;
+    btn.textContent = 'Leaving…';
+    fetch('/api/gds/my-projects/' + encodeURIComponent(clientId) + '/leave', { method: 'POST' })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
+      .then(function () { row.remove(); })
+      .catch(function () { btn.disabled = false; btn.textContent = 'Leave'; });
+  }
+
+  function resolveInvite(clientId, accept, row, btns) {
+    btns.forEach(function (b) { b.disabled = true; });
+    fetch('/api/gds/my-projects/invites/' + encodeURIComponent(clientId) + '/' + (accept ? 'accept' : 'decline'), { method: 'POST' })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
+      .then(function () { row.remove(); if (accept) load(); loadInvites(); })
+      .catch(function () { btns.forEach(function (b) { b.disabled = false; }); });
+  }
+
+  function loadInvites() {
+    var section = document.getElementById('invites-section');
+    var container = document.getElementById('invites');
+    fetch('/api/gds/my-projects/invites', { headers: { Accept: 'application/json' } })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
+      .then(function (data) {
+        var invites = (data && data.invites) || [];
+        if (invites.length === 0) { section.hidden = true; return; }
+        container.textContent = '';
+        invites.forEach(function (inv) {
+          var row = el('div', 'row');
+          var meta = el('div', 'meta');
+          var name = el('div', 'name');
+          name.textContent = inv.name || inv.client_id;
+          meta.appendChild(name);
+          var host = safeOriginHost(inv.origin);
+          if (host) { var o = el('div', 'origin'); o.textContent = host; meta.appendChild(o); }
+          row.appendChild(meta);
+          var accept = el('button'); accept.type = 'button'; accept.textContent = 'Accept';
+          var decline = el('button'); decline.type = 'button'; decline.textContent = 'Decline';
+          accept.addEventListener('click', function () { resolveInvite(inv.client_id, true, row, [accept, decline]); });
+          decline.addEventListener('click', function () { resolveInvite(inv.client_id, false, row, [accept, decline]); });
+          row.appendChild(accept); row.appendChild(decline);
+          container.appendChild(row);
+        });
+        section.hidden = false;
+      })
+      .catch(function () { section.hidden = true; });
+  }
+
+  function load() {
+    fetch('/api/gds/my-projects', { headers: { Accept: 'application/json' } })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
+      .then(function (data) {
+        renderList(ownedEl, data.owned, { emptyText: 'You don’t own any projects yet.', leavable: false });
+        renderList(buildingEl, data.building, { emptyText: 'You’re not building on any other projects yet.', leavable: true });
+      })
+      .catch(function () {
+        ownedEl.textContent = ''; buildingEl.textContent = '';
+        var p = el('p', 'empty'); p.textContent = 'Couldn’t load your projects right now.';
+        buildingEl.appendChild(p);
+      });
+  }
+
+  joinBtn.addEventListener('click', function () {
+    var origin = (joinInput.value || '').trim();
+    if (!origin) { joinNote.textContent = 'Enter a project URL.'; return; }
+    joinBtn.disabled = true;
+    joinNote.textContent = 'Requesting…';
+    fetch('/api/gds/my-projects/join', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ origin: origin }),
+    })
+      .then(function (r) { return r.json().then(function (b) { return { ok: r.ok, body: b }; }); })
+      .then(function (res) {
+        joinBtn.disabled = false;
+        if (res.ok && res.body && res.body.message) { joinNote.textContent = res.body.message; joinInput.value = ''; load(); }
+        else if (res.body && res.body.error && res.body.error.code === 'unknown_project') { joinNote.textContent = 'That project isn’t on the platform.'; }
+        else { joinNote.textContent = 'Could not request access right now.'; }
+      })
+      .catch(function () { joinBtn.disabled = false; joinNote.textContent = 'Could not request access right now.'; });
+  });
+
+  load();
+  loadInvites();
+}());

package/modules/hall-ui/public/new-project-wizard.js

@@ -1,4 +1,4 @@
-// new-project-wizard.js — the "Start a project" hall widget (provisioning module,
+// new-project-wizard.js — the "Start a project" flow (provisioning module,
 // ADR 0111 / BONGOS-V1 goal 35, task 1983).
 //
 // The most ACCESSIBLE form of the canonical onboarding runbook (the /new-project skill,
@@ -9,8 +9,12 @@
 // four irreducibly-human steps UI-first (create the repo, the OAuth app + secret, first
 // sign-in) with the exact pinned values, and points at the Instances panel for status.
 //
-// GATED on the provisioning module (module:'provisioning'), like instances-panel.js —
-// contributeHallWidget drops it entirely when the module is off (ADR 0062 §4).
+// NOT a hall widget — it registers nothing with contributeHallWidget and owns no
+// zone. It exposes window.OTBNewProject, which instances-panel.js's header button
+// opens as a modal; that panel carries the provisioning gate + the home-main budget
+// for both. (Correcting a stale header, task 2177: this file used to describe itself
+// as a registered widget, which is why the "wizard" in that task's acceptance list
+// could not be found in the registry.)
 (function () {
   'use strict';
   if (!window.OTB || typeof window.OTB.contributeHallWidget !== 'function') return;

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

@@ -44,5 +44,7 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell.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>
 </body>
 </html>

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

@@ -0,0 +1,73 @@
+/* pair.css — Page-local styles for the dev-box Pair page.
+   Lifted verbatim out of the page's inline <style> block (task 1002176);
+   the ?v= cache-bust is stamped automatically from this file's content hash
+   at boot (src/asset-version.js). */
+
+/* Page-local styles for the pairing approve page (#904) — built on the
+   shared design-system tokens in style.css. */
+#pair-scroll { max-width: 640px; }
+
+.pair-device {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+  margin: 14px 0 18px;
+}
+.pair-device__glyph {
+  font-size: 1.7rem;
+  line-height: 1;
+}
+.pair-device__name {
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+}
+.pair-device__meta {
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: var(--ink-soft);
+}
+.pair-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  letter-spacing: 0.08em;
+  color: var(--ink-soft);
+}
+.pair-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.pair-approve {
+  font-family: var(--font-body);
+  font-size: 13.5px;
+  font-weight: 600;
+  padding: 10px 22px;
+  background: var(--accent);
+  color: #fff;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.pair-approve:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
+.pair-approve:disabled { opacity: 0.55; cursor: default; }
+.pair-status {
+  font-family: var(--font-body);
+  font-size: 13.5px;
+  color: var(--ink-soft);
+  min-height: 1.2em;
+}
+.pair-status--ok { color: var(--ok); font-weight: 600; }
+.pair-status--err { color: var(--danger); }
+.pair-note {
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: var(--ink-faint);
+  margin-top: 16px;
+}

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

@@ -10,76 +10,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
-  <style>
-    /* Page-local styles for the pairing approve page (#904) — built on the
-       shared design-system tokens in style.css. */
-    #pair-scroll { max-width: 640px; }
-
-    .pair-device {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 14px 16px;
-      margin: 14px 0 18px;
-    }
-    .pair-device__glyph {
-      font-size: 1.7rem;
-      line-height: 1;
-    }
-    .pair-device__name {
-      font-family: var(--font-display);
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--ink);
-    }
-    .pair-device__meta {
-      font-family: var(--font-body);
-      font-size: 13px;
-      color: var(--ink-soft);
-    }
-    .pair-code {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      font-size: 12.5px;
-      letter-spacing: 0.08em;
-      color: var(--ink-soft);
-    }
-    .pair-actions {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      flex-wrap: wrap;
-    }
-    .pair-approve {
-      font-family: var(--font-body);
-      font-size: 13.5px;
-      font-weight: 600;
-      padding: 10px 22px;
-      background: var(--accent);
-      color: #fff;
-      border: 1px solid var(--accent);
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-    }
-    .pair-approve:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
-    .pair-approve:disabled { opacity: 0.55; cursor: default; }
-    .pair-status {
-      font-family: var(--font-body);
-      font-size: 13.5px;
-      color: var(--ink-soft);
-      min-height: 1.2em;
-    }
-    .pair-status--ok { color: var(--ok); font-weight: 600; }
-    .pair-status--err { color: var(--danger); }
-    .pair-note {
-      font-family: var(--font-body);
-      font-size: 13px;
-      color: var(--ink-faint);
-      margin-top: 16px;
-    }
-  </style>
+  <link rel="stylesheet" href="/builders/pair.css">
 </head>
 <body data-page="pair" data-page-title="Device pairing">
 
@@ -112,6 +43,8 @@
 
 <!-- App shell (sidebar/topbar/footer) — dependency-free, loads FIRST. -->
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before pair.js, which pulls from it. -->
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
 <script src="/builders/pair.js?v=2026-06-14-domutils"></script>