@bongos/core 1.24.81 → 1.24.83

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

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>
@@ -80,10 +80,10 @@
 <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-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>

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

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- The oversight family's archetype: a titled row with facts and actions, the
        group head and the foot line (records/oversight-family.md). This page's
        repeated thing is that row at the desk's one-line density. -->
@@ -82,10 +82,10 @@
 <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-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>

package/modules/hall-ui/public/options-menu.js

@@ -66,7 +66,8 @@
         ] },
     ] },
     { head: 'Preferences', items: [
-      { id: 'preferences', label: 'Preferences', native: true, gate: 'signed', words: 'usage reports' },
+      { id: 'preferences', label: 'Preferences', native: true, gate: 'signed', words: 'usage reports view game classic mode sidebar',
+        anchors: [{ label: 'View: game or classic', anchor: 'view-scroll', words: 'game classic mode full screen sidebar' }] },
       { id: 'sound', label: 'Sound', native: true, gate: 'signed', words: 'sounds audio chime event volume mute' },
     ] },
     { head: 'The project', items: [
@@ -253,6 +254,7 @@
     if (!state.menu.some(function (g) { return g.items.some(function (it) { return it.id === id; }); })) return false;
     state.active = id;
     groupsEl.dataset.active = id;
+    nameScreen(e);
     Array.prototype.forEach.call(groupsEl.querySelectorAll('.opt-embed'), function (s) { s.classList.remove('opt-embed--on'); });
     if (e.embed) frameFor(e, anchor).classList.add('opt-embed--on');
     else if (state.onNative) state.onNative(id, anchor);
@@ -270,6 +272,22 @@
     return true;
   }
 
+  // The open screen's name, over the screen (Helm, task 1005194): the entry's own
+  // label, so no new words. Drawn for the eye only: the rail's aria-current link
+  // and each frame's aria-label already say which screen is open.
+  function nameScreen(e) {
+    if (!groupsEl || !groupsEl.insertBefore || typeof document === 'undefined') return;
+    var h = document.getElementById('opt-screen');
+    if (!h) {
+      h = document.createElement('p');
+      h.id = 'opt-screen';
+      h.className = 'opt-screen';
+      h.setAttribute('aria-hidden', 'true');
+      groupsEl.insertBefore(h, groupsEl.firstChild);
+    }
+    h.textContent = e.label;
+  }
+
   function markActive() {
     if (!railEl) return;
     Array.prototype.forEach.call(railEl.querySelectorAll('.opt-link'), function (a) {
@@ -305,7 +323,10 @@
   // The rail: the search box, then the groups. Typing filters; Enter opens the first match.
   function draw() {
     railEl.classList.add('opt-rail');
+    // The panel's own name shows only where the top bar is away (settings.css); the
+    // <nav> already carries the same word as its aria-label.
     railEl.innerHTML =
+      '<p class="opt-title" aria-hidden="true">Options</p>' +
       '<label class="opt-search"><span class="sr-only">Search settings</span>' +
       '<input type="search" id="opt-search" placeholder="Search settings" autocomplete="off" spellcheck="false"></label>' +
       '<div class="opt-list"></div>';

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

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/room.css">
   <link rel="stylesheet" href="/builders/primer.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/diagram-viewer.css?v=2026-11-04-reading-room">
@@ -111,10 +111,10 @@
 <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-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>

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

@@ -14,7 +14,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- The PANEL archetype (task 1003308) before the page's own sheet. -->
   <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/hall-ask.css">
@@ -248,10 +248,10 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>

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

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>
@@ -75,10 +75,10 @@
 <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-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>

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

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- task 1003441: the identity cell (avatar, name, login). It was shared with
        the cross-project /people page until task 1003444 deleted it. -->
   <link rel="stylesheet" href="/builders/roster.css">
@@ -57,10 +57,10 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>

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

@@ -0,0 +1,75 @@
+// modules/hall-ui/public/settings-view.js — Options → Preferences → View: game or
+// classic (task 1005200; owner, 2026-11-11). The one place the view is switched after
+// sign-in. The two never mix: classic is the hall with its sidebar, game is the city
+// full screen with only the game's places (shell-game.js).
+//
+// The account holds the choice (GET/PATCH /api/bongos/me/hall-view, builder-settings
+// hall-view-prefs.js), so it follows the builder to any browser. This panel saves it
+// there first and only then switches the page, so a failed save never leaves the page
+// in one view and the account in the other.
+//
+// Own file on the settings-usage-reports.js precedent: it shares nothing with the rest
+// of the page.
+
+(() => {
+  'use strict';
+
+  const PATH = '/api/bongos/me/hall-view';
+  const { $ } = window.OTB;
+  const toast = (msg) => window.OTB.toast(msg);
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const game = () => window.OTBShellGame;
+
+  const CHOICES = [
+    { value: 'game', label: 'Game', desc: 'The project city, full screen. Only the game’s places: the city, the skies and the atlas.' },
+    { value: 'classic', label: 'Classic', desc: 'The hall with its sidebar and every page.' },
+  ];
+
+  function render(view) {
+    const wrap = $('#view-rows');
+    if (!wrap) return;
+    wrap.innerHTML =
+      '<fieldset class="pgroup" id="view-group">' +
+      '<legend class="prow__label">How you see the project</legend>' +
+      CHOICES.map((c) => {
+        const id = `view-${c.value}`;
+        return (
+          `<label class="prow prow--pick" for="${id}">` +
+          `<input class="pradio" type="radio" name="hall-view" id="${id}" value="${c.value}"${view === c.value ? ' checked' : ''}>` +
+          '<span class="prow__main">' +
+          `<span class="prow__label">${c.label}</span>` +
+          `<span class="prow__desc">${c.desc}</span>` +
+          '</span></label>'
+        );
+      }).join('') +
+      '</fieldset>';
+  }
+
+  async function save(view) {
+    const status = $('#view-status');
+    if (status) status.textContent = 'Saving…';
+    const res = await api.request('PATCH', PATH, { body: { view } });
+    if (!res.ok) {
+      render(game() && game().on() ? 'game' : 'classic');
+      if (status) status.textContent = 'Could not save. Try again.';
+      toast('Could not switch the view. Try again.');
+      return;
+    }
+    const msg = view === 'game' ? 'Saved. You are in the game view.' : 'Saved. You are in the classic view.';
+    if (status) status.textContent = msg;
+    if (game()) game().set(view === 'game', { local: true });
+  }
+
+  function setup() {
+    const section = $('#view-scroll');
+    if (!section || !game()) return;
+    render(game().on() ? 'game' : 'classic');
+    section.hidden = false;
+    $('#view-rows').addEventListener('change', (e) => {
+      if (e.target && e.target.name === 'hall-view') save(e.target.value);
+    });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', setup);
+  else setup();
+})();

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

@@ -1,18 +1,24 @@
 /* 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 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.
+   (task 1003308, goal 1000081; the archetype is panel.css). The options menu
+   and the screen it opens, the token ladder, 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.
 
-   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. */
+   THE OPTIONS MENU IS A HELM SCREEN (task 1005194, ADR 0402; the menu is ADR
+   0401). Left, the menu: one night panel closed left and right by the strong
+   ice hairline, the search over the entries, each entry a full-width row in
+   the name voice on a hairline, the open one the accent bar. Right, the open
+   screen: its name in the name voice over the strong hairline, then its
+   sections as plain rows on hairlines, not cards. In game mode the panel runs
+   the window's full height and names itself. The Helm pieces are the hall
+   tier's tokens (style.css); the rows' words, order and addresses are
+   options-menu.js's, unchanged. */
 
-/* ---- grouped layout: left rail + one visible group ------------------------ */
+/* ---- the layout: the menu panel + the one open screen --------------------- */
 .settings-layout {
   display: grid;
-  grid-template-columns: 206px minmax(0, 1fr);
-  gap: 30px;
+  grid-template-columns: minmax(0, min(var(--helm-panel-w), 32%)) minmax(0, 1fr);
+  gap: var(--ds-space-xl);
   align-items: start;
 }
 .settings-layout[hidden] { display: none !important; }
@@ -30,43 +36,98 @@
 .settings-groups > [data-group][hidden] { display: none !important; }
 /* A screen opened in the menu's frame (options-menu.js): one shows at a time. */
 .settings-groups > .opt-embed.opt-embed--on { display: block; }
-.settings-groups .scroll { margin: 0 0 var(--sp-sm); }
+/* ---- the open screen: its name, then its sections as rows on hairlines -------
+   options-menu.js writes the open entry's own label into .opt-screen. A section
+   is not a card here: no ground, no corner, one soft hairline under it, its
+   title in the name voice. */
+.settings-groups { --opt-screen-h: calc(var(--ds-space-xl) + var(--ds-space-lg)); }
+.opt-screen {
+  margin: 0;
+  padding: 0 0 var(--ds-space-sm);
+  border-bottom: var(--line-strong) solid var(--rule);
+  font-family: var(--name-face);
+  font-size: var(--ds-text-figure);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
+  line-height: 1;
+  overflow-wrap: anywhere;
+  color: var(--ink);
+  text-shadow: var(--name-glow);
+}
+.settings-groups .scroll {
+  margin: 0;
+  padding: var(--ds-space-md) 0;
+  background: none;
+  border: 0;
+  border-bottom: var(--line) solid var(--rule-soft);
+  border-radius: var(--press-radius);
+}
+.settings-groups .scroll__h {
+  font-family: var(--name-face);
+  font-size: var(--ds-text-2xl);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
+  color: var(--ink);
+}
 .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 */
-/* ---- the options menu rail (task 1005144, ADR 0401) ------------------------
-   A search box over a vertical list of groups. Sticky beside the open screen, so
-   the menu stays in reach while a long screen scrolls. */
-.opt-rail { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 96px); overflow-y: auto; }
-html[data-fullscreen="on"] .opt-rail { top: 24px; max-height: calc(100vh - 48px); }
-.opt-search { display: block; margin: 0 0 var(--sp-xs); }
-.opt-search input { width: 100%; min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: var(--line) solid var(--glass-edge); background: var(--glass); color: var(--ink); font: inherit; font-size: var(--ds-text-md); }
-.opt-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.opt-head { margin: var(--sp-sm) 0 2px; padding: 0 14px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
-.opt-link { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 38px; padding: 4px 14px; border-radius: var(--radius-pill); color: var(--ink-soft); font-size: var(--ds-text-md); text-decoration: none; }
-.opt-link:hover { color: var(--ink); background: var(--glass); }
-.opt-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-.opt-link--active { color: var(--ink); background: var(--glass); }
-.opt-link--active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: var(--radius-pill); background: var(--accent); }
-.opt-link__where { font-size: var(--ds-text-xs); color: var(--ink-faint); }
-.opt-none { margin: var(--sp-xs) 0; padding: 0 14px; font-size: var(--ds-text-sm-plus); color: var(--ink-soft); }
-/* The frame fills the column to the bottom of the window; the screen in it scrolls itself. */
-.opt-embed__frame { display: block; width: 100%; height: calc(100vh - 96px); min-height: 480px; border: 0; border-radius: var(--radius); background: transparent; }
-html[data-fullscreen="on"] .opt-embed__frame { height: calc(100vh - 48px); }
 
-/* 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);
+/* ---- the options menu (task 1005144, ADR 0401; Helm, task 1005194) -----------
+   The night panel: the search, then the entries. Sticky beside the open screen,
+   so the menu stays in reach while a long screen scrolls; it scrolls itself. */
+.opt-rail {
+  position: sticky; top: 72px; box-sizing: border-box;
+  display: flex; flex-direction: column;
+  max-height: calc(100vh - 96px); overflow-y: auto;
+  padding: var(--ds-space-md) 0;
+  background: var(--night-glass);
+  border: 0 solid var(--rule); border-left-width: var(--line-strong); border-right-width: var(--line-strong);
+}
+/* the panel's own name: only where the top bar is away (full screen, game mode),
+   since with the bars up the top bar already says it */
+.opt-title {
+  display: none;
+  margin: 0 0 var(--ds-space-md); padding: 0 var(--ds-space-lg);
+  font-family: var(--name-face); font-size: var(--ds-text-headline); font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-wide); text-transform: var(--name-case); line-height: 1.15;
+  color: var(--ink); text-shadow: var(--name-glow);
+}
+html[data-fullscreen="on"] .opt-title { display: block; }
+/* the search: the hall's one field (controls.css), on the glass, as wide as the panel */
+.opt-search { display: block; margin: 0 0 var(--ds-space-sm); padding: 0 var(--ds-space-lg); }
+.opt-search input { width: 100%; min-height: 46px; background: var(--glass); font-size: var(--ds-text-xl); }
+.opt-head {
+  margin: var(--ds-space-sm) 0 0; padding: var(--ds-space-hair) var(--ds-space-lg);
+  font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space);
+  text-transform: var(--label-case); color: var(--ink-soft);
+}
+/* an entry: a full-width row in the name voice on a soft hairline. The ring sits
+   inside the row (the start screen's rule), so it reads on the accent bar too. */
+.opt-link {
+  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
+  min-height: var(--ds-space-xl); padding: var(--ds-space-hair) var(--ds-space-lg);
+  border-bottom: var(--line) solid var(--rule-soft);
+  color: var(--ink); text-decoration: none;
+  font-family: var(--name-face); font-size: var(--ds-text-3xl); font-weight: 400;
+  letter-spacing: var(--name-space-tight); text-transform: var(--name-case); line-height: 1.2;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.opt-list > .opt-link:last-child { border-bottom-color: transparent; }
+.opt-link:hover { color: var(--ink); background: var(--glass); text-decoration: none; }
+.opt-link:focus-visible { outline: 0; border-radius: var(--press-radius); box-shadow: var(--press-focus); }
+/* the open entry is the one thing lit: the accent bar under its dark ink */
+.opt-link--active, .opt-link--active:hover {
+  color: var(--accent-on); background: var(--accent); border-bottom-color: transparent;
+  font-weight: var(--name-weight-lit); box-shadow: var(--accent-glow);
 }
-.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); }
+.opt-link--active:focus-visible { box-shadow: var(--press-focus), var(--accent-glow); }
+/* where a search hit lives: said, not named, so it is the body voice */
+.opt-link__where { font-family: var(--font-body); font-size: var(--ds-text-xs); letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
+.opt-none { margin: var(--ds-space-xs) 0; padding: 0 var(--ds-space-lg); font-size: var(--ds-text-sm-plus); color: var(--ink-soft); }
+/* The frame fills the column to the bottom of the window, under the screen's name; the screen in it scrolls itself. */
+.opt-embed__frame { display: block; width: 100%; height: calc(100vh - 96px - var(--opt-screen-h)); min-height: 480px; border: 0; border-radius: var(--press-radius); background: transparent; }
+html[data-fullscreen="on"] .opt-embed__frame { height: calc(100vh - 48px - var(--opt-screen-h)); }
 
 @media (max-width: 860px) {
   /* Collapse to one column: the menu sits above the open screen, no longer sticky. */
@@ -74,8 +135,14 @@ html[data-fullscreen="on"] .opt-embed__frame { height: calc(100vh - 48px); }
   .opt-rail { position: static; max-height: none; }
   .opt-embed__frame { height: 80vh; }
 }
-@media (max-width: 520px) {
-  .grp__head { flex-direction: column; align-items: flex-start; gap: 4px; }
+@media (min-width: 861px) {
+  /* Full screen and game mode: the panel is the window's full height, from the top
+     edge. The pull is the room the shell leaves a plain page above its content for
+     the corner button (style.css, data-fullscreen-plain). */
+  html[data-fullscreen="on"] .opt-rail {
+    top: 0; height: 100vh; max-height: none;
+    margin-top: -60px; padding-top: var(--ds-space-xl);
+  }
 }
 
 /* ---- the token ladder (CLI access) ------------------------------------------

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

@@ -11,13 +11,13 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <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-11-11-helm">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- The PANEL archetype (task 1003308): the row, the switch, the field, the
        chip control and the family's voices, shared with profile and pair.
        settings.css then holds only what this page
        has — the rail layout, the group head, the token ladder, the voices grid. -->
   <link rel="stylesheet" href="/builders/panel.css">
-  <link rel="stylesheet" href="/builders/settings.css">
+  <link rel="stylesheet" href="/builders/settings.css?v=2026-11-11-helm2">
   <!-- task 1005094: the device cards and their Run button in Your Autobongos runner. -->
   <link rel="stylesheet" href="/builders/runner-button.css">
 </head>
@@ -287,6 +287,18 @@
                  on the same routes. They live on My agents only now; this line is where
                  they were. Old deep links (#interaction, #wandering, #rendering, …) are
                  sent there by settings-moved.js. -->
+            <!-- VIEW — game or classic (task 1005200): the one place the view is switched
+                 after sign-in. Kept on the account (GET/PATCH /me/hall-view); drawn by
+                 settings-view.js. -->
+            <section class="scroll" id="view-scroll" aria-labelledby="view-h" data-group="preferences" hidden>
+              <h2 id="view-h" class="scroll__h">View</h2>
+              <p class="scroll__lede">
+                Game or classic, never both. You also choose each time you sign in.
+              </p>
+              <div class="sound-rows" id="view-rows"></div>
+              <p class="settings-status" id="view-status" role="status" aria-live="polite"></p>
+            </section>
+
             <section class="scroll" id="agents-moved-preferences" aria-labelledby="agents-moved-preferences-h" data-group="preferences">
               <h2 id="agents-moved-preferences-h" class="scroll__h">Your agents</h2>
               <p class="scroll__lede">
@@ -405,10 +417,10 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page scripts run. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-11-helm"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></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>
@@ -420,7 +432,7 @@
 <!-- task 1005044: the old deep links to the agent settings that moved to My agents -->
 <script src="/builders/settings-moved.js?v=2026-11-03-moved"></script>
 <!-- task 1005144: the ONE options menu — the rail, its search, and the screens it opens in a frame. -->
-<script src="/builders/options-menu.js?v=2026-11-10-options"></script>
+<script src="/builders/options-menu.js?v=2026-11-11-helm2"></script>
 <script src="/builders/settings.js?v=2026-11-10-options"></script>
 <!-- task 1003341: the Active sessions panel. Its own file rather than more of
      settings.js, which sits close to the 1500-line size ratchet. -->
@@ -437,6 +449,7 @@
 <script src="/builders/runner-button.js"></script>
 <script src="/builders/settings-autobongos.js?v=2026-11-09-run-button"></script>
 <!-- task 1003793: Settings → Module install reports. Own file on the same precedent. -->
+<script src="/builders/settings-view.js?v=2026-11-11-view"></script>
 <script src="/builders/settings-usage-reports.js?v=2026-10-08-usage-reports"></script>
 </body>
 </html>

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

@@ -85,6 +85,16 @@ html.gs-open { overflow: hidden; }
 .gs__foot { padding: var(--ds-space-md) var(--ds-space-lg) 0; border-top: var(--line-strong) solid var(--rule); }
 .gs__line, .gs__note { margin: 0; font-size: var(--ds-text-lg); line-height: 1.5; text-wrap: pretty; color: var(--ink-soft); }
 .gs__note { margin-top: var(--ds-space-xs); color: var(--ink); }
+/* the view chooser in front of the menu (task 1005200): Game or Classic as two rows in the
+   panel's own voice, each with one line saying what it is; the view chosen last time is lit
+   with the accent on its edge and says so */
+.gs__ask { margin: 0; padding: 0 var(--ds-space-lg) var(--ds-space-sm); font-size: var(--ds-text-lg); color: var(--ink-soft); }
+.gs__ask[hidden] { display: none; }
+.gs__item--view { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--ds-space-hair); padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-sm); }
+.gs__item--last { box-shadow: inset var(--line-strong) 0 0 var(--accent); }
+.gs__view { display: inline-flex; align-items: baseline; gap: var(--ds-space-sm); }
+.gs__sub { font-family: var(--font-body); font-size: var(--ds-text-md); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
+.gs__last { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: uppercase; color: var(--accent); }
 .gs__note[hidden] { display: none; }
 
 /* the load screen: the week it is showing, a segment per week, the city, and the tip under it */