@bongos/core 1.19.484 → 1.19.485

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

@@ -14,6 +14,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <!-- The PANEL archetype (task 1003308) before the page's own sheet. -->
+  <link rel="stylesheet" href="/builders/panel.css">
+  <link rel="stylesheet" href="/builders/profile.css">
 </head>
 <body data-page="profile" data-page-title="Profile">
 
@@ -23,7 +26,11 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head">
+      <!-- The page's ONE h1 (one-header-main-h1), in the family's voice; the
+           sub-line is profile.js's — "<name> — <rank> · N works shipped". -->
+      <div class="page-head page-head--room page-head--panel">
+        <p class="page-head__eyebrow">the page everyone else reads</p>
+        <h1 id="profile-h1" class="page-head__h">profile</h1>
         <p class="page-head__sub" id="profile-sub">Loading profile…</p>
       </div>
 
@@ -31,7 +38,7 @@
         <!-- Standing — avatar, name, rank badge, member-since. Filled by profile.js. -->
         <section class="scroll" id="standing-scroll" aria-labelledby="standing-h">
           <h2 id="standing-h" class="sr-only">Standing</h2>
-          <div class="profile" id="profile-head">
+          <div class="profile profile--ident" id="profile-head">
             <div class="profile__placeholder">…</div>
           </div>
         </section>
@@ -92,19 +99,19 @@
             <div class="profile__placeholder" id="activity-placeholder">…</div>
 
             <div id="activity-tasks-panel" hidden>
-              <h3 class="scroll__h">Works completed</h3>
+              <h3 class="profile-act__h">Works completed</h3>
               <div id="activity-tasks"></div>
             </div>
 
             <div id="activity-goals-panel" hidden>
-              <h3 class="scroll__h">Goals created</h3>
+              <h3 class="profile-act__h">Goals created</h3>
               <div id="activity-goals"></div>
             </div>
 
             <!-- The idea trail. Revealed only in the craft views where filing an
                  idea is the work being shown (all + ideator) — see profile.js. -->
             <div id="activity-ideas-panel" hidden>
-              <h3 class="scroll__h">Ideas filed, and what became of them</h3>
+              <h3 class="profile-act__h">Ideas filed, and what became of them</h3>
               <p class="scroll__lede">Every idea this builder captured — promoted, discarded, merged, or still open.</p>
               <div id="activity-ideas"></div>
             </div>

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

@@ -0,0 +1,15 @@
+{
+  "_": "The hall's PROFILE page through modules/ui-design/kit/render.js (task 1003308). The identity band, the shelf and the three activity ledgers only exist once a profile has LOADED, so the floors run against the hall-preview harness (see settings.states.json for the two commands; pass --base-in/--base-out at it). `out` is a real state here rather than a redirect: a signed-out visitor with no ?id= gets the empty state, not a bounce — under the harness's --fixture-me the /me read still answers, so `out` renders the own profile there and the empty state only under the kit's own stub.",
+  "page": "/profile",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "ignoreRequests": ["/api/(gds|bongos)/"],
+  "ignoreConsole": ["/api/(gds|bongos)/", "\b401\b", "\b404\b", "Unauthorized", "Not Found", "load failed"],
+  "states": {
+    "own": { "auth": true, "actions": [["wait", 900]], "expect": { "visible": ["#profile-h1", "#profile-head", "#numbers-body", "#works-table", "#activity-tabs"] } },
+    "other": { "auth": true, "url": "/profile?id=1000025", "actions": [["wait", 900]], "expect": { "visible": ["#profile-head", "#ach-grid"] } },
+    "out": { "auth": false, "actions": [["wait", 600]], "expect": { "visible": ["#profile-h1", "#profile-head"] } }
+  },
+  "reducedMotion": { "auth": true, "actions": [["wait", 900]] }
+}

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

@@ -1,14 +1,18 @@
-/* settings.css — page-local styles for Settings (task 2172; extracted from
-   settings.html's old inline <style> per the hall placement rules). Components
-   layered on the shared design system (style.css) — the rail (.section-rail /
-   .rail-link) and buttons derive from the shared tokens so instance theme
-   packs reskin this page too. */
+/* settings.css — what Settings has and the rest of the panel family does not
+   (task 1003308, goal 1000081; the archetype is panel.css). The grouped layout
+   behind the section rail, the group head, the token ladder, the voices grid,
+   the volume line and the image-key banner. Every colour is a `var()` of the
+   world's tier; the one literal pair is the Discord mark, named below.
 
-/* ---- grouped layout: left sub-nav rail + one visible group (task 1723) ---- */
+   The rail itself (.section-rail / .rail-link) is the shell's, built by
+   OTBKit.makeSectionRail in switch mode; this sheet only widens its column to
+   the mock's and keeps one group visible at a time. */
+
+/* ---- grouped layout: left rail + one visible group ------------------------ */
 .settings-layout {
   display: grid;
-  grid-template-columns: 180px minmax(0, 1fr);
-  gap: 20px;
+  grid-template-columns: 206px minmax(0, 1fr);
+  gap: 30px;
   align-items: start;
 }
 .settings-layout[hidden] { display: none !important; }
@@ -24,357 +28,136 @@
 .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; }
+.settings-groups .scroll { margin: 0 0 var(--sp-sm); }
+.settings-groups .scroll__lede { font-size: 14.5px; }
+/* the rail's items at the mock's height: the shell's 28px rows are Standing's
+   density, and a settings group is a destination, not a scroll-spy stop */
+#settings-rail .rail-link { min-height: 38px; padding: 0 14px; font-size: 14.5px; text-transform: none; border-radius: var(--radius-pill); }
+#settings-rail .rail-link--active::before { left: 0; top: 7px; bottom: 7px; }
 
-/* task 2172 density pass — standard panel anatomy (title → one-line purpose →
-   control → save-semantics note) in a tighter card: less padding + stacking
-   margin than the default .scroll, ledes clamped to one visual line's worth. */
-.settings-groups .scroll { padding: 16px 18px; margin: 0 0 12px; }
-.settings-groups .scroll__lede { font-size: 13px; margin-bottom: 10px; }
+/* the group head: the group's name in the display voice over a hairline, with
+   its own address in the mono face beside it (a machine's word keeps its case) */
+.grp__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--sp-sm);
+  margin: 0 0 var(--sp-sm);
+  padding-bottom: var(--sp-xs);
+  border-bottom: var(--line) solid var(--glass-edge);
+}
+.grp__h { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
+.grp__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
 
-@media (max-width: 768px) {
+@media (max-width: 860px) {
   /* 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); }
+     rail into a horizontal chip strip just under the top bar. */
+  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
 }
-
-.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: 10px;
-  margin-bottom: 0;
+@media (max-width: 520px) {
+  .grp__head { flex-direction: column; align-items: flex-start; gap: 4px; }
 }
 
-/* ---- 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);
+/* ---- the token ladder (CLI access) ------------------------------------------
+   A 64-character token cannot be a line of prose, so it is quoted: one tonal
+   step down from the panel, the machine's words receding to the soft ink so the
+   secret itself is the only ink on the line. */
+.cli-result { flex-basis: 100%; margin-top: var(--sp-xs); }
+.cli-result__say { margin: 0 0 var(--sp-xs); font-size: 14.5px; color: var(--ink); }
+.quote {
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
   border-radius: var(--radius-sm);
+  padding: var(--sp-xs) var(--sp-sm) var(--sp-hair);
 }
-table.voices {
-  width: 100%;
-  border-collapse: collapse;
+.quote__eyebrow { margin: 0 0 var(--sp-hair); font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.quote__pre {
+  margin: 0;
+  font-family: var(--font-mono);
   font-size: 13px;
+  line-height: 1.6;
   color: var(--ink);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-all;
 }
-table.voices th, table.voices td {
-  padding: 7px 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: 9px 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: 13.5px;
-  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 12px;
-  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: 9px 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: 13.5px;
-  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 {
+.quote__foot {
   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: 6px 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: 14px;
-  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;
+  gap: var(--sp-xs);
+  margin-top: var(--sp-xs);
+  padding-top: var(--sp-hair);
+  border-top: var(--line) solid var(--glass-edge);
 }
-.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;
-}
+/* ---- active sessions --------------------------------------------------------
+   The name is a run with its pill and the agent beside it, then the when-line
+   underneath; a row of the family otherwise. */
+.sessions-row__main > strong { display: inline; }
+.sessions-row__agent { display: inline; margin-left: 8px; }
+.sessions-row__when { display: block; }
 
-/* ---- 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;
+/* ---- Voices (per-skill model picker) ------------------------------------- */
+.voices-wrap { margin-top: var(--sp-sm); overflow-x: auto; }
+table.voices { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; color: var(--ink); }
+table.voices th, table.voices td {
+  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) 0;
+  vertical-align: middle;
+  border-top: var(--line) solid var(--rule-soft);
+}
+table.voices thead th {
+  padding-top: 0;
+  border-top: 0;
+  border-bottom: var(--line) solid var(--rule);
+  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);
+  white-space: nowrap;
 }
+.voices__skill { white-space: nowrap; }
+.voices__skill code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
+.voices__default { margin-left: 0; font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
+td.voices__choice { width: 1%; white-space: nowrap; }
+select.voices__select { min-width: 140px; }
+.voices-empty, .craft-empty { padding: var(--sp-xs) 0; font-size: 13.5px; color: var(--ink-faint); }
 
-/* ---- Active sessions (task 1003341) — one row per live session, the current
-   one badged so nobody ends the page they are reading. ---- */
-.sessions-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--border);
-}
-.sessions-row:last-child { border-bottom: 0; }
-.sessions-row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
-.sessions-row__agent,
-.sessions-row__when { color: var(--ink-soft); font-size: 13px; }
-.sessions-row__agent { overflow-wrap: anywhere; }
-.sessions-row__when { flex-basis: 100%; }
-.sessions-row__badge {
-  font-size: 12px;
-  padding: 1px 7px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--ink-soft);
-}
+/* ---- Sounds: the volume line ------------------------------------------- */
+.sound-volume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-bottom: var(--sp-xs); }
+.sound-volume .field-label { margin: 0; }
+.sound-volume__pct { min-width: 3.2em; font-size: 13px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
 
-/* ---- Image key (task 1013) — the "we cover it" / "action needed" banner
-   uses the shared semantic status tokens. ---- */
+/* ---- Image key: the covered / action-needed banner ------------------------ */
 .artkey-banner {
-  border-radius: var(--radius-sm);
-  padding: 10px 14px;
-  font-size: 13px;
+  margin: 0 0 var(--sp-sm);
+  padding: var(--sp-xs) var(--sp-sm);
+  font-size: 14px;
   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 {
+  color: var(--ink);
+  border-left: 2px solid var(--warn);
   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-banner--covered { border-left-color: var(--ok); background: var(--ok-weak); }
+.artkey-banner strong { font-weight: 500; }
 #artkey-entry { flex-basis: 100%; }
+/* the entry renders inside the card's flex row, so its label takes the row */
+#artkey-card > .field-label, #artkey-entry > .field-label { flex: 1 1 100%; margin-top: 0; }
+#artkey-entry[hidden] { display: none; }
+.artkey-entry-row { flex-basis: 100%; }
+
+/* ---- Discord -----------------------------------------------------------------
+   THIRD-PARTY MARK, KEPT ON PURPOSE. Discord's blurple is Discord's, not the
+   world's: the button is recognisable as theirs only in their colour, and the
+   link opens their consent screen. These two literals are the one sanctioned
+   exception in this sheet — a future literal sweep must leave them alone. */
+.settings-btn--discord { background: #5865F2; border-color: #4853c4; color: #ffffff; }
+.settings-btn--discord:hover:not(:disabled) { background: #4853c4; border-color: #4853c4; color: #ffffff; }
+
+/* ---- dev box ------------------------------------------------------------- */
+/* the box panel is the shell's (.setup__box, box-panel.js); inside a settings
+   panel it sits on the glass rather than a second card */
+.settings-groups .setup__box { margin: var(--sp-sm) 0 0; background: var(--glass); border-color: var(--glass-edge); border-radius: var(--radius-sm); }