@bongos/core 1.17.2 → 1.18.0

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

@@ -10,354 +10,10 @@
   <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 Settings — components layered on the shared design
-       system (style.css). Everything derives from the shared tokens so instance
-       theme packs reskin this page too. */
-
-    /* ---- grouped layout: left sub-nav rail + one visible group (task 1723) ---- */
-    .settings-layout {
-      display: grid;
-      grid-template-columns: 180px minmax(0, 1fr);
-      gap: 24px;
-      align-items: start;
-    }
-    .settings-layout[hidden] { display: none !important; }
-    /* Only the active group's sections render. Each grouped element is a direct
-       child of .settings-groups carrying data-group; a section's own [hidden]
-       attribute always wins (the !important rule below), so the per-section
-       reveal logic in settings.js is unchanged. */
-    .settings-groups > [data-group] { display: none; }
-    .settings-groups[data-active="account"] > [data-group="account"],
-    .settings-groups[data-active="devbox"] > [data-group="devbox"],
-    .settings-groups[data-active="access"] > [data-group="access"],
-    .settings-groups[data-active="preferences"] > [data-group="preferences"],
-    .settings-groups[data-active="sound"] > [data-group="sound"],
-    .settings-groups[data-active="extensions"] > [data-group="extensions"] { display: block; }
-    .settings-groups > [data-group][hidden] { display: none !important; }
-
-    @media (max-width: 768px) {
-      /* Collapse to one column; the shared .section-rail ≤768px rules turn the
-         rail into a sticky horizontal chip strip just under the top bar. */
-      .settings-layout { grid-template-columns: minmax(0, 1fr); }
-    }
-
-    .settings-status {
-      font-size: 13px;
-      color: var(--ink-soft);
-      min-height: 1.2em;
-      margin-top: 8px;
-    }
-    .section-note {
-      color: var(--ink-faint);
-      font-size: 12.5px;
-      margin-top: 12px;
-    }
-
-    /* ---- Voices (per-skill model picker) ---- */
-    .voices-scroll { /* keep many rows compact within a bounded, scrollable box */ }
-    .voices-wrap {
-      max-height: 460px;
-      overflow-y: auto;
-      margin-top: 6px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-    }
-    table.voices {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 13.5px;
-      color: var(--ink);
-    }
-    table.voices th, table.voices td {
-      padding: 8px 12px;
-      text-align: left;
-      border-bottom: 1px solid var(--rule-soft);
-      vertical-align: middle;
-    }
-    table.voices th {
-      /* sticks inside .voices-wrap's own scroller, not the window — top:0 is
-         relative to the wrap, so no --topbar-h offset needed here */
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      background: var(--surface);
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--ink-faint);
-      border-bottom: 1px solid var(--border-strong);
-    }
-    table.voices tr:last-child td { border-bottom: none; }
-    table.voices tbody tr:hover td { background: var(--surface-2); }
-    .voices__skill code {
-      font-size: 12.5px;
-      color: var(--info);
-    }
-    .voices__default {
-      font-size: 12.5px;
-      color: var(--ink-soft);
-    }
-    select.voices__select { min-width: 140px; }
-    .voices-empty, .craft-empty {
-      color: var(--ink-faint);
-      font-style: italic;
-      font-size: 13px;
-      padding: 10px 0;
-    }
-
-    /* ---- Sounds (per-sound on/off toggles) ---- */
-    .sound-rows { margin-top: 8px; }
-    .sound-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 11px 0;
-      border-bottom: 1px solid var(--rule-soft);
-    }
-    .sound-row:last-child { border-bottom: none; }
-    .sound-row__text { min-width: 0; }
-    .sound-row__label {
-      font-size: 14px;
-      color: var(--ink);
-      font-weight: 600;
-    }
-    .sound-row__desc {
-      font-size: 12.5px;
-      color: var(--ink-soft);
-      margin-top: 2px;
-    }
-    button.sound-toggle {
-      font-family: var(--font-body);
-      font-size: 12.5px;
-      font-weight: 600;
-      padding: 5px 16px;
-      min-width: 72px;
-      border-radius: 999px;
-      border: 1px solid var(--border-strong);
-      background: var(--surface);
-      color: var(--ink-soft);
-      cursor: pointer;
-      flex-shrink: 0;
-    }
-    button.sound-toggle[data-on="1"] {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: #fff;
-    }
-    button.sound-toggle:disabled { opacity: 0.5; cursor: default; }
-    .sound-volume {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      padding: 4px 0 14px;
-      border-bottom: 1px solid var(--border);
-      margin-bottom: 4px;
-    }
-    .sound-volume__label {
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--ink-faint);
-      flex-shrink: 0;
-    }
-    .sound-volume input[type="range"] {
-      flex: 1;
-      accent-color: var(--accent);
-      cursor: pointer;
-    }
-    .sound-volume__pct {
-      font-size: 13px;
-      color: var(--ink);
-      min-width: 3.2em;
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-    }
-
-    /* ---- Event sounds (per-event variant dropdowns, task 582) ---- */
-    .event-sound-rows { margin-top: 8px; }
-    .event-sound-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 12px 0;
-      border-bottom: 1px solid var(--rule-soft);
-    }
-    .event-sound-row:last-child { border-bottom: none; }
-    .event-sound-row__text { flex: 1; min-width: 0; }
-    .event-sound-row__label {
-      font-size: 14px;
-      color: var(--ink);
-      font-weight: 600;
-    }
-    .event-sound-row__desc {
-      font-size: 12.5px;
-      color: var(--ink-soft);
-      margin-top: 2px;
-    }
-    .event-sound-row__controls {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-    .event-sound-select { cursor: pointer; }
-    .event-sound-preview {
-      font-family: var(--font-body);
-      font-size: 12px;
-      font-weight: 600;
-      padding: 5px 12px;
-      border-radius: 999px;
-      border: 1px solid var(--border-strong);
-      background: transparent;
-      color: var(--ink-soft);
-      cursor: pointer;
-    }
-    .event-sound-preview:active { opacity: 0.7; }
-
-    /* ---- Disciplines (preference chips) ---- */
-    .craft-chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 8px;
-    }
-    .craft-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 13.5px;
-      color: var(--ink);
-      background: var(--surface);
-      border: 1px solid var(--border-strong);
-      border-radius: 999px;
-      padding: 7px 14px;
-      cursor: pointer;
-      user-select: none;
-      text-transform: capitalize;
-    }
-    .craft-chip:hover { background: var(--surface-2); }
-    .craft-chip input { cursor: pointer; }
-    .craft-chip[data-on="1"] {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: #fff;
-    }
-    .craft-actions {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      margin-top: 16px;
-      flex-wrap: wrap;
-    }
-
-    /* ---- Buttons (Save / card actions) ---- */
-    button.craft-save, .settings-btn {
-      font-family: var(--font-body);
-      font-size: 13px;
-      font-weight: 600;
-      padding: 7px 16px;
-      border: 1px solid var(--accent);
-      background: var(--surface);
-      color: var(--accent-text);
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      display: inline-block;
-      text-decoration: none;
-    }
-    button.craft-save:hover:not(:disabled), .settings-btn:hover:not(:disabled) {
-      background: var(--accent);
-      color: #fff;
-      text-decoration: none;
-    }
-    button.craft-save:disabled, .settings-btn:disabled { opacity: 0.5; cursor: default; }
-    /* Discord brand button — keeps its blurple so it's recognisable. */
-    .settings-btn--discord {
-      background: #5865F2;
-      border-color: #4853c4;
-      color: #fff;
-    }
-    .settings-btn--discord:hover { background: #4853c4; color: #fff; }
-    .settings-btn--quiet {
-      border-color: var(--border-strong);
-      color: var(--ink-soft);
-    }
-    .settings-btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
-
-    /* ---- Display name (single editable field, task 1669) ---- */
-    .display-name-row {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 12px;
-      margin-top: 8px;
-    }
-    input.display-name-input {
-      flex: 1 1 280px;
-      min-width: 0;
-    }
-
-    /* ---- Connections + CLI access cards ---- */
-    .settings-card {
-      margin-top: 8px;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 12px;
-    }
-    .settings-card__hint { color: var(--ink-soft); font-size: 13px; }
-    .settings-card__ok { font-weight: 600; color: var(--ok); }
-    .cli-result { flex-basis: 100%; margin-top: 4px; }
-    .cli-result pre {
-      background: var(--bg-deep);
-      color: var(--ink);
-      padding: 10px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      overflow-x: auto;
-      font-size: 12.5px;
-      margin: 6px 0;
-    }
-
-    /* ---- Image key (task 1013) — the "we cover it" / "action needed" banner
-       uses the shared semantic status tokens. ---- */
-    .artkey-banner {
-      border-radius: var(--radius-sm);
-      padding: 10px 14px;
-      font-size: 13px;
-      line-height: 1.45;
-      border: 1px solid var(--border);
-      margin-bottom: 10px;
-    }
-    .artkey-banner--covered {
-      background: var(--ok-weak);
-      border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
-      color: var(--ok);
-    }
-    .artkey-banner--action {
-      background: var(--warn-weak);
-      border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
-      color: var(--warn);
-    }
-    .artkey-entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-basis: 100%; }
-    .artkey-input {
-      flex: 1 1 280px;
-      min-width: 0;
-      padding: 7px 10px;
-      border: 1px solid var(--border-strong);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--ink);
-      font-family: ui-monospace, "SF Mono", Menlo, monospace;
-      font-size: 13px;
-    }
-    .artkey-actions { display: flex; gap: 10px; flex-wrap: wrap; }
-    #artkey-entry { flex-basis: 100%; }
-  </style>
+  <!-- Page-local styles (task 2172) — extracted from the old inline <style>
+       block per the hall placement rules; the rail comes from style.css's
+       shared .section-rail/.rail-link rules. -->
+  <link rel="stylesheet" href="/builders/settings.css">
 </head>
 <body data-page="settings" data-page-title="Settings">
 
@@ -378,19 +34,13 @@
           <p class="scroll__lede" id="gate-body">You're not signed in yet. Sign in to manage your preferences.</p>
         </section>
 
-        <!-- Grouped layout (task 1723): the sections sit in six groups behind a
-             left sub-nav rail. settings.js wires the rail clicks + hash deep
-             links; only the active group's sections display. -->
+        <!-- Grouped layout (task 1723 → kit, task 2172): the sections sit in six
+             groups behind a left sub-nav rail built by OTBKit.makeSectionRail
+             (switch mode). settings.js wires the rail + per-panel anchor deep
+             links (/settings#cli, /settings#dev-box, …); only the active group's
+             sections display. -->
         <div class="settings-layout" id="settings-layout">
-          <nav class="section-rail" id="settings-rail" aria-label="Settings sections">
-            <a class="rail-link rail-link--active" href="#account" data-group="account">Account</a>
-            <a class="rail-link" href="#devbox" data-group="devbox">Dev box</a>
-            <a class="rail-link" href="#access" data-group="access">Access &amp; keys</a>
-            <a class="rail-link" href="#preferences" data-group="preferences">Preferences</a>
-            <a class="rail-link" href="#sound" data-group="sound">Sound &amp; voice</a>
-            <!-- Revealed by settings.js only when a module contributed a panel. -->
-            <a class="rail-link" href="#extensions" data-group="extensions" id="rail-extensions" hidden>Extensions</a>
-          </nav>
+          <nav class="section-rail" id="settings-rail" aria-label="Settings sections"></nav>
 
           <div class="settings-groups" id="settings-groups" data-active="account">
 
@@ -405,6 +55,28 @@
                 server with your rank role already set — no invite to share or leak.
               </p>
               <div class="settings-card" id="discord-card"></div>
+              <p class="section-note">Linking opens Discord's consent screen; unlinking applies at once.</p>
+            </section>
+
+            <!-- DISPLAY NAME — the label shown next to your work (task 1669).
+                 GET/PATCH /api/bongos/me/display-name. Seeded from GitHub at sign-up;
+                 this is the only place to change it. Stable identity (sign-in,
+                 attribution) stays the GitHub login — this is just the rendered name. -->
+            <section class="scroll" id="display-name-scroll" aria-labelledby="display-name-h" data-group="account" hidden>
+              <h2 id="display-name-h" class="scroll__h">Display name</h2>
+              <p class="scroll__lede">
+                The name shown beside your work — in the roster, the leaderboard,
+                and the work feed. Your sign-in and the credit for shipped work stay
+                tied to your account, not this label.
+              </p>
+              <div class="display-name-row">
+                <input type="text" class="display-name-input" id="display-name-input"
+                       maxlength="60" autocomplete="off" spellcheck="false"
+                       aria-label="Display name" placeholder="Your display name">
+                <button type="button" class="craft-save" id="display-name-save">Save</button>
+              </div>
+              <p class="settings-status" id="display-name-status" role="status" aria-live="polite"></p>
+              <p class="section-note">Saves when you press Save; shows everywhere at once.</p>
             </section>
 
             <!-- CRAFT — discipline preferences (GET /me, PATCH /me/disciplines). -->
@@ -419,26 +91,45 @@
                 <button type="button" class="craft-save" id="craft-save">Save</button>
                 <span class="settings-status" id="craft-status" role="status" aria-live="polite"></span>
               </div>
+              <p class="section-note">Saves when you press Save; your next <code>/builder-start</code> reflects it.</p>
             </section>
 
-            <!-- DISPLAY NAME — the label shown next to your work (task 1669).
-                 GET/PATCH /api/bongos/me/display-name. Seeded from GitHub at sign-up;
-                 this is the only place to change it. Stable identity (sign-in,
-                 attribution) stays the GitHub login — this is just the rendered name. -->
-            <section class="scroll" id="display-name-scroll" aria-labelledby="display-name-h" data-group="account" hidden>
-              <h2 id="display-name-h" class="scroll__h">Display name</h2>
+            <!-- ============ group: access ============ -->
+
+            <!-- CLI ACCESS — re-issue a CLI bearer from this browser session
+                 (V3.R91 #401), the UI-first alternative to Device Flow. -->
+            <section class="scroll" id="cli-scroll" aria-labelledby="cli-h" data-group="access" hidden>
+              <h2 id="cli-h" class="scroll__h">CLI access</h2>
               <p class="scroll__lede">
-                The name shown beside your work — in the roster, the leaderboard,
-                and the work feed. Change it whenever you like; your sign-in and
-                the credit for shipped work stay tied to your account, not this label.
+                Mint a fresh CLI token using this browser session and paste it into
+                your terminal — the quick way back in when a <code>/builder-*</code>
+                command says your session expired.
               </p>
-              <div class="display-name-row">
-                <input type="text" class="display-name-input" id="display-name-input"
-                       maxlength="60" autocomplete="off" spellcheck="false"
-                       aria-label="Display name" placeholder="Your display name">
-                <button type="button" class="craft-save" id="display-name-save">Save</button>
+              <div class="settings-card">
+                <button type="button" class="settings-btn" id="cli-reissue-btn">Re-issue CLI token</button>
+                <span class="settings-card__hint">paste it into your terminal — bypasses Device Flow.</span>
+                <div id="cli-reissue-result" class="cli-result" hidden></div>
               </div>
-              <p class="settings-status" id="display-name-status" role="status" aria-live="polite"></p>
+              <p class="section-note">Tokens refresh on use; re-issuing never signs you out anywhere else.</p>
+            </section>
+
+            <!-- IMAGE KEY — per-builder Gemini key (task 1013 / ADR 0073).
+                 GET/PUT/DELETE /api/bongos/me/art-key/own. Write-only (set/replace/
+                 remove); the full key is never shown again after save (masked,
+                 last-4 only). The banner + tone adapt to /me `needs`. id="art-key"
+                 is the anchor the hall's "Add your key" action + the CLI nudge
+                 link target — settings.js activates this group for that deep link. -->
+            <section class="scroll" id="art-key" aria-labelledby="artkey-h" data-group="access" hidden>
+              <h2 id="artkey-h" class="scroll__h">Image-generation key</h2>
+              <p class="scroll__lede">
+                The art pipeline draws tiles and sprites with Google AI Studio
+                (Gemini). Needed only if you generate art — your key, your bill,
+                paid only for what you make.
+              </p>
+              <div class="artkey-banner" id="artkey-banner" hidden></div>
+              <div class="settings-card" id="artkey-card"></div>
+              <p class="settings-status" id="artkey-status" role="status" aria-live="polite"></p>
+              <p class="section-note">Stored encrypted; never shown again after saving — only its last four digits.</p>
             </section>
 
             <!-- ============ group: devbox ============ -->
@@ -451,10 +142,10 @@
               <h2 id="box-h" class="scroll__h">Your dev box</h2>
               <p class="scroll__lede">
                 The hosted machine your work runs on. Open it in your browser (the
-                online terminal) or connect over SSH — whichever you prefer. Closing
-                the box stops and deletes it; you can start a fresh one anytime.
+                online terminal) or connect over SSH — whichever you prefer.
               </p>
               <div class="setup__box" id="box-mount"></div>
+              <p class="section-note">Actions apply at once. Closing stops and deletes the box; you can start a fresh one anytime.</p>
             </section>
 
             <!-- DEV BOX APP — the desktop switch (#904, ADR 0044). Static download
@@ -484,42 +175,19 @@
               </p>
             </section>
 
-            <!-- ============ group: access ============ -->
-
-            <!-- CLI ACCESS — re-issue a CLI bearer from this browser session
-                 (V3.R91 #401), the UI-first alternative to Device Flow. -->
-            <section class="scroll" id="cli-scroll" aria-labelledby="cli-h" data-group="access" hidden>
-              <h2 id="cli-h" class="scroll__h">CLI access</h2>
+            <!-- PAIRING — link out to the dedicated pair page (task 2172): keeps
+                 the whole dev-box story reachable from this group. -->
+            <section class="scroll" id="pairing-scroll" aria-labelledby="pairing-h" data-group="devbox" hidden>
+              <h2 id="pairing-h" class="scroll__h">Pair Claude Desktop</h2>
               <p class="scroll__lede">
-                Mint a fresh CLI token using this browser session and paste it into
-                your terminal — the quick way back in when a <code>/builder-*</code>
-                command says your session expired. Refreshes on use.
+                Connect your Claude Desktop to your dev box with a one-time pairing
+                code — the guided flow lives on its own page.
               </p>
               <div class="settings-card">
-                <button type="button" class="settings-btn" id="cli-reissue-btn">Re-issue CLI token</button>
-                <span class="settings-card__hint">paste it into your terminal — bypasses Device Flow.</span>
-                <div id="cli-reissue-result" class="cli-result" hidden></div>
+                <a class="settings-btn" href="/pair">Open the pairing page</a>
               </div>
             </section>
 
-            <!-- IMAGE KEY — per-builder Gemini key (task 1013 / ADR 0073).
-                 GET/PUT/DELETE /api/bongos/me/art-key/own. Write-only (set/replace/
-                 remove); the full key is never shown again after save (masked,
-                 last-4 only). The banner + tone adapt to /me `needs`. id="art-key"
-                 is the anchor the hall's "Add your key" action + the CLI nudge
-                 link target — settings.js activates this group for that deep link. -->
-            <section class="scroll" id="art-key" aria-labelledby="artkey-h" data-group="access" hidden>
-              <h2 id="artkey-h" class="scroll__h">Image-generation key</h2>
-              <p class="scroll__lede">
-                The art pipeline draws tiles and sprites with Google AI Studio
-                (Gemini). Needed only if you generate art — your key, your bill,
-                paid only for what you make.
-              </p>
-              <div class="artkey-banner" id="artkey-banner" hidden></div>
-              <div class="settings-card" id="artkey-card"></div>
-              <p class="settings-status" id="artkey-status" role="status" aria-live="polite"></p>
-            </section>
-
             <!-- ============ group: preferences ============ -->
 
             <!-- WANDERING — how readily the agent opens off-task threads (task 1268).
@@ -530,9 +198,8 @@
               <p class="scroll__lede">
                 How readily Claude opens a <em>new thread</em> of work — a tangent, an
                 investigation, an unprompted suggestion — instead of staying on your
-                claimed task. Lower keeps it focused; higher makes it a freer thinking
-                partner. It never limits the work on the task itself. Your rank sets
-                the starting point; newcomers stay locked low.
+                claimed task. It never limits the work on the task itself. Your rank
+                sets the starting point; newcomers stay locked low.
               </p>
               <div class="sound-rows" id="wander-rows"></div>
               <p class="settings-status" id="wandering-status" role="status" aria-live="polite"></p>
@@ -548,12 +215,12 @@
               <p class="scroll__lede">
                 Whether your session cards — what <code>/builder-start</code>, claiming,
                 and shipping show — render as rich in-feed widgets or as plain text.
-                The widgets are prettier, but Claude must relay their full markup every
-                time, which spends tokens. Turn them off to save those tokens; nothing
-                else about the work changes.
+                Widgets are prettier but spend tokens; plain text is cheaper with the
+                same information.
               </p>
               <div class="sound-rows" id="render-rows"></div>
               <p class="settings-status" id="render-status" role="status" aria-live="polite"></p>
+              <p class="section-note">Saves the moment you toggle; applies from your next session.</p>
             </section>
 
             <!-- ============ group: sound ============ -->
@@ -633,8 +300,13 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before consuming IIFEs. -->
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
+<!-- shared component kit (window.OTBKit) — section rail (task 2166). -->
+<script src="/builders/hall-kit.js"></script>
+<!-- shared record overlay (#/idea|blocker/N) — every hall page carries it; this
+     page was the one gap (task 2172). -->
+<script src="/builders/task-detail.js?v=2026-07-03-taskdetail"></script>
 <!-- #807: shared dev-box panel — loaded before settings.js so OTBBoxPanel exists. -->
 <script src="/builders/box-panel.js?v=2026-06-14-domutils"></script>
-<script src="/builders/settings.js?v=2026-06-28-display-name"></script>
+<script src="/builders/settings.js?v=2026-07-10-regroup"></script>
 </body>
 </html>