synabun 2.0.7 → 2.0.9

package/neural-interface/public/shared/assistant/asst-styles.js

@@ -1108,13 +1108,21 @@ export function injectAssistantStyles() {
     /* Fields (toolbar and composer): glyph · seam · value ▾ */
     .asst-dd { flex: 0 1 auto; justify-content: flex-start; max-width: calc(18ch + 60px); }
     .asst-dd .asst-dd-label { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
-    .asst-dd-model .asst-dd-label.asst-model-account-label { display: flex; gap: 4px; max-width: 34ch; }
-    .asst-model-account-label :is(.asst-model-name, .asst-model-account) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-    .asst-model-account-label .asst-model-name { flex: 1 1 auto; }
-    .asst-model-account-label .asst-model-account { flex: 0 1 auto; min-width: 4ch; max-width: 12ch; }
-    .asst-model-account-label .asst-model-mode { flex-shrink: 0; }
-    /* A display name ("Sonnet 5", a project) is sans; a raw model id (opus[1m]) is mono. */
-    .asst-dd.asst-dd-model[data-raw] .asst-dd-label { font-family: var(--asst-mono); font-weight: 400; }
+    /* The model chip: name · context tag · account cue · API (asst-model-chip.js). The picker
+       draws the longest form that fits the row, so no part shrinks or ends in an ellipsis; the
+       cue and the API badge are the account menu's avatar and badge at the row's xs size. */
+    .asst-dd.asst-dd-model { max-width: calc(30ch + 60px); }
+    .asst-dd-model .asst-dd-label.asst-model-label { display: inline-flex; align-items: center; gap: 4px; max-width: none; }
+    .asst-model-label > * { flex: none; }
+    .asst-model-label > [hidden] { display: none; }
+    .asst-model-tag { color: var(--asst-text-3); font-family: var(--asst-mono); font-size: 10.5px; font-weight: 400; }
+    .asst-model-label > .asst-acct-avatar { flex: 0 0 auto; min-width: 16px; width: auto; height: 16px; padding: 0 4px; font-size: 10px; }
+    .asst-model-label > .asst-acct-avatar[data-tone="warn"] { box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring); color: var(--asst-warn); }
+    .asst-model-label > .asst-acct-badge { margin: 0; }
+    /* Even the shortest form does not fit (a row narrower than 320px that cannot wrap): the name gives. */
+    .asst-dd-model[data-squeezed] .asst-model-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    /* A display name ("Sonnet 5", a project) is sans; a raw model id (opus) is mono. */
+    .asst-dd.asst-dd-model[data-raw] .asst-model-name { font-family: var(--asst-mono); font-weight: 400; }
     .asst-dd-caret {
       display: inline-flex;
       flex-shrink: 0;
@@ -1420,8 +1428,9 @@ export function injectAssistantStyles() {
       z-index: 100030; /* above modals (100020): the routes editor opens model menus */
       display: flex;
       flex-direction: column;
-      min-width: 200px;
-      max-width: min(380px, calc(100vw - 16px));
+      /* --asst-dd-room: the width of the box the menu stays inside, less its margins (asst-menu.js positionMenu). */
+      min-width: min(200px, var(--asst-dd-room, 200px));
+      max-width: min(380px, calc(100vw - 16px), var(--asst-dd-room, 100vw));
       max-height: 380px;
       overflow: hidden;
       padding: 4px;
@@ -1468,6 +1477,8 @@ export function injectAssistantStyles() {
     .asst-dd-item-desc { color: var(--asst-text-3); font-size: 11px; }
     /* Test density: each level's description is a sentence, so it wraps instead of truncating. */
     .asst-tests-menu .asst-dd-item-desc { white-space: normal; }
+    /* Admin sandbox (permission menu): its note is a sentence too. */
+    .asst-dd-item.asst-admin-sandbox-item .asst-dd-item-desc { white-space: normal; }
     .asst-dd-item-tag { flex-shrink: 0; margin-left: auto; color: var(--asst-text-3); font-size: 11px; }
     .asst-dd-kbd { flex-shrink: 0; margin-left: auto; color: var(--asst-text-3); font-family: var(--asst-mono); font-size: 10.5px; }
     .asst-dd-sep { flex-shrink: 0; height: 1px; margin: 4px 6px; background: var(--asst-line); }
@@ -1497,6 +1508,45 @@ export function injectAssistantStyles() {
     .asst-dd-input::placeholder { color: var(--asst-text-3); }
     .asst-dd-filter { margin: 2px 0 4px; }
     .asst-dd-empty { padding: 8px 10px; color: var(--asst-text-3); }
+    /* A footer stays under a scrolling list; a button row is one line of compact items. */
+    .asst-dd-foot { flex-shrink: 0; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--asst-line); }
+    .asst-dd-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
+    .asst-dd-btnrow-label { flex: 1 1 auto; min-width: 0; padding: 5px 10px; color: var(--asst-text-2); overflow-wrap: anywhere; }
+    .asst-dd-btnrow .asst-dd-item { flex: 0 1 auto; width: auto; }
+
+    /* ── Account menu (asst-account-menu.js) ────────────────────────
+       Every account once: initial · name ✓ · plan or credential badge, then who it is and its
+       usage in full (lines wrap, nothing is cut). Kept inside the panel by asst-menu.js. The
+       composer's Model menu lists the same rows: the rules follow the rows' own classes. */
+    .asst-dd-item.asst-acct-item { gap: 8px; padding: 6px 8px; }
+    :is(.asst-account-menu .asst-dd-item, .asst-dd-item:is(.asst-acct-item, .asst-acct-choice))[data-checked="1"] { background: var(--asst-fill-1); }
+    :is(.asst-account-menu .asst-dd-item, .asst-dd-item:is(.asst-acct-item, .asst-acct-choice)):is(:hover, .focused) { background: var(--asst-fill-2); }
+    .asst-acct-avatar { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-2); color: var(--asst-text-2); font-size: 11px; font-weight: 600; line-height: 1; }
+    .asst-acct-avatar svg { width: 14px; height: 14px; }
+    .asst-acct-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
+    /* A long name wraps; its check and badge stay on its first line. */
+    .asst-acct-head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
+    .asst-acct-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+    .asst-acct-check { display: inline-flex; flex: none; margin-top: 3px; color: var(--asst-text); }
+    .asst-acct-check svg { width: 12px; height: 12px; }
+    .asst-acct-badge { flex: none; margin: 1px 0 0 auto; padding: 0 var(--asst-pill-px-xs); border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-1); box-shadow: inset 0 0 0 1px var(--asst-line); color: var(--asst-text-2); font-size: 10.5px; font-weight: 500; line-height: 16px; white-space: nowrap; }
+    .asst-acct-line { color: var(--asst-text-3); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
+    .asst-dd-item:is(:hover, .focused) .asst-acct-line:not([data-tone="warn"]) { color: var(--asst-text-2); }
+    :is(.asst-acct-badge, .asst-acct-line, .asst-acct-value-text)[data-tone="warn"] { color: var(--asst-warn); }
+    /* The note under the accounts lines up with their names. */
+    .asst-dd-info.asst-acct-note { padding: 3px 8px 5px 40px; font-size: 11px; }
+    .asst-dd-item.asst-acct-value { gap: 6px; }
+    /* Footer rows read "label … value": the label muted, as the button row's. */
+    .asst-acct-value-label { flex: 1 1 auto; min-width: 0; color: var(--asst-text-2); overflow-wrap: anywhere; }
+    .asst-acct-value-text { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
+    .asst-acct-next { display: inline-flex; flex: none; color: var(--asst-text-3); }
+    .asst-acct-next svg { width: 12px; height: 12px; }
+    .asst-dd-item.asst-acct-back { gap: 6px; color: var(--asst-text-2); }
+    .asst-dd-item.asst-acct-choice { gap: 4px; padding: 5px 8px; }
+    .asst-dd-btnrow[data-id="manage-row"] .asst-dd-item { flex: 1 1 0; }
+    @media (pointer: coarse) {
+      :is(.asst-account-menu .asst-dd-item, .asst-dd-item:is(.asst-acct-item, .asst-acct-choice), .asst-dd-btnrow[data-id="manage-row"] .asst-dd-item) { min-height: 44px; }
+    }
 
     /* ── Modals (help, accounts, model routes) ──────────────────────── */
     .asst-modal-overlay {
@@ -1723,7 +1773,7 @@ export function injectAssistantStyles() {
     .asst-routes-catalog-note { padding: 8px; color: var(--asst-warn); font-size: 12px; line-height: 1.45; background: var(--asst-fill-1); border-radius: var(--asst-pill-r-xs); }
     .asst-routes-modal .asst-routes-error { flex-wrap: wrap; }
     .asst-routes-modal .asst-routes-error span { min-width: 0; overflow-wrap: anywhere; }
-    .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) { max-width: min(440px, calc(100vw - 16px)); font-family: inherit; font-size: 12px; }
+    .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) { max-width: min(440px, calc(100vw - 16px), var(--asst-dd-room, 100vw)); font-family: inherit; font-size: 12px; }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item { height: var(--asst-pill-h-sm); min-height: var(--asst-pill-h-sm); padding: 0 8px; border-radius: var(--asst-pill-r-xs); }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-main { flex-direction: row; align-items: center; gap: 8px; }
     .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-label { flex-shrink: 0; max-width: 60%; }
@@ -1827,8 +1877,9 @@ export function injectAssistantStyles() {
        density is its gauge alone. A capsule that runs out of
        room drops its label half first and stays a glyph (its words remain in
        aria-label and the tooltip): route mode and Computer ≤960px, the mode
-       ≤540px, every composer field but the model ≤440px. Model, history, new
-       and "⋯" never hide; whatever hides stays in "⋯". A toolbar placed
+       ≤540px, every composer field but the model ≤440px, where the model
+       drops its caret and keeps its name (its form fits the row: see the
+       model chip above). Model, history, new and "⋯" never hide; whatever hides stays in "⋯". A toolbar placed
        outside the root (the sidepanel header) is out of reach of these rules:
        its host sizes it (asst-sidepanel-styles.js).
        Glyph only is the same three rules everywhere (see Capsules): the
@@ -1854,13 +1905,13 @@ export function injectAssistantStyles() {
       .asst-composer-brain .asst-dd.asst-dd-mode { display: grid; place-content: center; place-items: center; padding: 0; }
       .asst-composer-brain .asst-dd.asst-dd-mode > :is(.asst-dd-label, .asst-dd-caret) { display: none; }
       .asst-composer-brain .asst-dd.asst-dd-mode > .asst-icon:not([hidden]) { margin: 0; padding: 0 var(--cap-glyph-pad); box-shadow: none; }
-      .asst-dd-model .asst-dd-label { max-width: 14ch; }
       .asst-route-badge { display: none; }
     }
     @container asst (max-width: 440px) {
       .asst-composer-brain .asst-dd:is(.asst-dd-effort, .asst-dd-variant, .asst-dd-mode, .asst-dd-account) { display: grid; place-content: center; place-items: center; padding: 0; }
       .asst-composer-brain .asst-dd:is(.asst-dd-effort, .asst-dd-variant, .asst-dd-mode, .asst-dd-account) > :is(.asst-dd-label, .asst-dd-caret) { display: none; }
       .asst-composer-brain .asst-dd:is(.asst-dd-effort, .asst-dd-variant, .asst-dd-mode, .asst-dd-account) > .asst-icon:not([hidden]) { margin: 0; padding: 0 var(--cap-glyph-pad); box-shadow: none; }
+      .asst-composer-brain .asst-dd.asst-dd-model > .asst-dd-caret { display: none; }
     }
     @container asst (max-width: 400px) {
       .asst-root > * { --asst-inline: 6px; }
@@ -1871,16 +1922,14 @@ export function injectAssistantStyles() {
       .asst-dd.asst-empty-control-btn { flex: 1 1 auto; justify-content: flex-start; max-width: none; }
       .asst-empty-control-btn .asst-dd-label { flex: 1 1 auto; max-width: none; text-align: start; }
       .asst-msg.msg-user .asst-msg-content { max-width: 92%; }
-      .asst-dd-model .asst-dd-label { max-width: 9ch; }
       .asst-route-opt-sub { display: none; }
       .asst-run-main { flex-wrap: wrap; row-gap: 2px; }
       .asst-run-title { flex-basis: 100%; }
     }
     @container asst (max-width: 320px) {
       .asst-bar-group[data-group="computer"] { display: none !important; }
-      /* The model keeps a readable name (at least 5ch): the composer row wraps instead of truncating it. */
-      .asst-dd-model .asst-dd-label { min-width: 5ch; max-width: 14ch; }
-      /* A tighter gap keeps attach · model · effort · variant · mode · tests · send on one row at 320px. */
+      /* A tighter gap keeps attach · model · effort · variant · mode · tests · send on one row at 320px;
+         narrower, the row wraps rather than cut the model chip. */
       .asst-composer-actions { flex-wrap: wrap; gap: 6px 4px; }
       .asst-composer-brain { flex-wrap: wrap; gap: 6px 4px; }
     }

package/neural-interface/public/shared/cdx/cdx-panel.js

@@ -261,7 +261,7 @@ function buildPanel() {
   panel.innerHTML = `
     <div class="cxp-resize-handle"></div>
     <div class="cxp-header">
-      <button class="cxp-session-btn" id="cxp-session-btn" type="button">
+      <button class="cxp-session-btn" id="cxp-session-btn" type="button" title="${esc(_sessionLabel)}">
         <span class="cxp-session-label" id="cxp-session-label">${esc(_sessionLabel)}</span>
         <span class="cxp-dd-arrow">&#x25BE;</span>
       </button>

package/neural-interface/public/shared/cdx/cdx-styles.js

@@ -168,7 +168,15 @@ export function injectStyles() {
       align-items: center;
       background: var(--cxp-surface-1);
       z-index: 3;
-    }
+      /* A query container measured in controls: 1em is one header button (24px
+         docked, the window's control size when detached, which follows the font
+         scale), so the thresholds at the end of this section hold at any scale.
+         Nothing in the row inherits it; the session menu takes the panel's back. */
+      container: cxp-header / inline-size;
+      font-size: 24px;
+    }
+    .sp-sidepanel.sp-floating > .cxp-header { font-size: var(--fw-header-control-size); }
+    .cxp-header > .cxp-session-menu { font-size: 1rem; }
     .cxp-session-btn {
       background: var(--cxp-surface-1);
       border: none;
@@ -182,10 +190,14 @@ export function injectStyles() {
       padding: 5px 10px;
       border-radius: var(--cxp-radius-md) 0 0 var(--cxp-radius-md);
       transition: background var(--cxp-dur-fast), color var(--cxp-dur-fast);
-      max-width: 100%;
+      /* The session name keeps a readable 88px (about 8 characters, or its own
+         width if shorter) and gives way first above that: it grows only into the
+         room the pencil and the actions leave, so a long name never pushes them.
+         Narrower, the container queries let it go down to 32px (the caret). */
+      flex: 1 0 88px;
+      min-width: 32px;
+      max-width: max-content;
       overflow: hidden;
-      flex-shrink: 1;
-      min-width: 0;
     }
     .cxp-session-btn:hover {
       background: var(--cxp-surface-2);
@@ -231,6 +243,8 @@ export function injectStyles() {
       cursor: pointer;
       transition: background var(--cxp-dur-fast), color var(--cxp-dur-fast);
       flex-shrink: 0;
+      /* The actions' own gap, kept when the name fills the row. */
+      margin-right: 3px;
     }
     .cxp-header-rename:hover:not(:disabled) {
       color: var(--cxp-text);
@@ -256,8 +270,34 @@ export function injectStyles() {
       margin-left: auto;
       flex-shrink: 0;
     }
-    /* The header account menu's trigger (account-menu.js) gives way before the session name does. */
+    /* The header buttons never shrink. The account menu's trigger (account-menu.js)
+       is the one piece of the actions that gives way, once the session name is at
+       its readable 88px, down to its compact 64px, and truncates. */
+    .cxp-actions > * { flex-shrink: 0; }
     .cxp-actions:has(> .acct-menu-trigger) { flex-shrink: 1; min-width: 0; }
+    .cxp-actions > .acct-menu-trigger { flex-shrink: 1; }
+    /* Narrow headers, in order: the trigger stays at its compact 64px and the name
+       goes from 88px down to its caret; then the trigger is hidden (the cog's
+       Account row still opens its menu). Room counted in controls (em) plus px:
+       docked, the pencil and six buttons are 7em with 21px of gaps; detached, the
+       move handle makes 8em, the window's 6px gaps 39px, the name's floor is 1em.
+       Thresholds: name + 64px trigger + that row. */
+    @container cxp-header (width < calc(7em + 173px)) {
+      .codex-panel:not(.sp-floating) > .cxp-header .cxp-session-btn { flex: 1 1 0; }
+      .codex-panel:not(.sp-floating) > .cxp-header > .cxp-actions { flex-shrink: 0; }
+      .codex-panel:not(.sp-floating) > .cxp-header .acct-menu-trigger { flex: 0 0 64px; width: 64px; }
+    }
+    @container cxp-header (width < calc(7em + 117px)) {
+      .codex-panel:not(.sp-floating) > .cxp-header .acct-menu-trigger { display: none; }
+    }
+    @container cxp-header (width < calc(8em + 191px)) {
+      .codex-panel.sp-floating > .cxp-header .cxp-session-btn { flex: 1 1 0; }
+      .codex-panel.sp-floating > .cxp-header > .cxp-actions { flex-shrink: 0; }
+      .codex-panel.sp-floating > .cxp-header .acct-menu-trigger { flex: 0 0 64px; width: 64px; }
+    }
+    @container cxp-header (width < calc(9em + 103px)) {
+      .codex-panel.sp-floating > .cxp-header .acct-menu-trigger { display: none; }
+    }
     .cxp-btn {
       width: 24px;
       height: 24px;

package/neural-interface/public/shared/cdx/cdx-tabs.js

@@ -2437,6 +2437,9 @@ export function setSessionLabel(label, { persist = true } = {}) {
   if (isActiveTab(_boundTab)) {
     const labelEl = panelEl('#cxp-session-label');
     if (labelEl) labelEl.replaceChildren(document.createTextNode(_sessionLabel));
+    // The whole name, for when the header shows only part of it.
+    const sessionBtn = panelEl('#cxp-session-btn');
+    if (sessionBtn) sessionBtn.title = _sessionLabel;
     syncLegacyState();
   }
   updateTrayPillLabel();

package/neural-interface/public/shared/ocp-v2/ocp-v2-childpanel.js

@@ -419,9 +419,12 @@ export function createChildPanel({
         _statusEl.removeAttribute('data-tooltip');
       }
     }
+    const title = sessionTitleFor(store);
     if (_titleEl && !_titleEl.querySelector('.ocpv2-rename-input')) {
-      _titleEl.textContent = sessionTitleFor(store);
+      _titleEl.textContent = title;
     }
+    // The whole name, for when the header shows only part of it.
+    if (_titleEl?.parentElement) _titleEl.parentElement.title = title;
     if (_renameBtn) _renameBtn.disabled = !s.sessionId;
     renderCrumbs();
     renderPill();

package/neural-interface/public/shared/ocp-v2/ocp-v2-panel.js

@@ -671,10 +671,13 @@ function syncHeader() {
   // The footer row gives the text only the room that is left: the tooltip
   // says it in full when just the dot fits.
   _statusEl.setAttribute('data-tooltip', status.text);
+  const title = sessionTitleFor(s);
   // Skip label update while user is mid-rename (input is mounted in the label).
   if (_sessionLabelEl && !_sessionLabelEl.querySelector('.ocpv2-rename-input')) {
-    _sessionLabelEl.textContent = sessionTitleFor(s);
+    _sessionLabelEl.textContent = title;
   }
+  // The whole name, for when the header shows only part of it.
+  if (_sessionBtnEl) _sessionBtnEl.title = title;
   if (_renameBtnEl) {
     _renameBtnEl.disabled = !s.sessionId;
   }

package/neural-interface/public/shared/ocp-v2/ocp-v2-styles.js

@@ -98,8 +98,12 @@ const CSS = `
   padding: 5px 10px;
   border-radius: 8px 0 0 8px;
   transition: background 0.15s, color 0.15s;
-  max-width: 100%;
-  min-width: 0;
+  /* The session name gives way first: it starts from nothing and takes only
+     the room the pencil and the actions leave, up to its own width, so a long
+     name can never push them. 32px keeps the caret in view. */
+  flex: 1 1 0;
+  min-width: 32px;
+  max-width: max-content;
   overflow: hidden;
 }
 .ocpv2-session-btn:hover {
@@ -135,6 +139,7 @@ const CSS = `
 .ocpv2-rename-input:focus { border-color: rgba(100,160,255,0.5); }
 .ocpv2-rename-input::placeholder { color: rgba(255,255,255,0.3); }
 .ocpv2-session-btn .ocpv2-dd-arrow {
+  flex-shrink: 0;
   font-size: 9px;
   padding: 4px 6px;
   margin: -4px -6px -4px 0;
@@ -164,6 +169,8 @@ const CSS = `
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
   flex-shrink: 0;
+  /* The actions' own gap, kept when the name fills the row. */
+  margin-right: 3px;
 }
 .ocpv2-header-rename:hover:not(:disabled) {
   color: rgba(100,160,255,0.95);
@@ -359,6 +366,8 @@ const CSS = `
   margin-left: auto;
   flex-shrink: 0;
 }
+/* The header buttons never shrink, whatever the session name's length. */
+.ocpv2-actions > * { flex-shrink: 0; }
 .ocpv2-btn {
   display: flex;
   align-items: center;
@@ -2718,16 +2727,56 @@ const CHILD_CSS = `
      set inline via --right-panel-offset-{owner}. */
   border: 0.5px dashed rgba(180, 200, 255, 0.18);
 }
+/* A query container measured in controls: 1em is one header button (24px
+   docked, the window's control size when detached, which follows the font
+   scale), so the thresholds below hold at any scale. Nothing in this row
+   inherits it: the crumbs and the title set their own sizes. */
+.ocpv2-panel-child > .ocpv2-header {
+  container: ocpv2-child-header / inline-size;
+  font-size: 24px;
+}
+.ocpv2-panel-child.sp-floating > .ocpv2-header { font-size: var(--fw-header-control-size); }
+/* The sub-agent's name keeps a readable 88px (or its own width if shorter):
+   the chain of parents gives way first. */
+.ocpv2-panel-child .ocpv2-session-btn { flex: 1 0 88px; }
+/* The chain of parents: at most 40% of the row, and it gives way before the
+   name. When it is cut, it is cut from the left, so the nearest parent (the
+   last crumb, which keeps its own width, at most 140px) stays readable. */
 .ocpv2-panel-child .ocpv2-child-crumbs {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 3px;
   min-width: 0;
+  max-width: 40%;
   flex-shrink: 1;
   overflow: hidden;
   margin-right: 6px;
 }
 .ocpv2-panel-child .ocpv2-child-crumbs:empty { display: none; }
+.ocpv2-panel-child .ocpv2-child-crumbs > .ocpv2-child-crumb:last-child { flex-shrink: 0; }
+/* Narrow headers, in order: with less than 140px for the chain, only the
+   nearest parent shows, truncated; with less than 64px, the chain is hidden
+   and the name goes down to its caret. Room counted in controls (em) plus px:
+   docked, the pencil and six buttons are 7em with 18px of gaps; detached, the
+   move handle makes 8em and the window's 6px gaps 42px. Thresholds: the
+   name's 88px + the chain's 6px margin + 140px or 64px + that row. */
+@container ocpv2-child-header (width < calc(7em + 252px)) {
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-child-crumbs > :not(:last-child) { display: none; }
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-child-crumbs > .ocpv2-child-crumb:last-child { flex-shrink: 1; min-width: 0; }
+}
+@container ocpv2-child-header (width < calc(7em + 176px)) {
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-child-crumbs { display: none; }
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-session-btn { flex: 1 1 0; }
+}
+@container ocpv2-child-header (width < calc(8em + 276px)) {
+  .ocpv2-panel-child.sp-floating .ocpv2-child-crumbs > :not(:last-child) { display: none; }
+  .ocpv2-panel-child.sp-floating .ocpv2-child-crumbs > .ocpv2-child-crumb:last-child { flex-shrink: 1; min-width: 0; }
+}
+@container ocpv2-child-header (width < calc(8em + 200px)) {
+  .ocpv2-panel-child.sp-floating .ocpv2-child-crumbs { display: none; }
+  .ocpv2-panel-child.sp-floating .ocpv2-session-btn { flex: 1 1 0; }
+}
 .ocpv2-panel-child .ocpv2-child-crumb-sep {
   flex-shrink: 0;
   color: rgba(180, 200, 255, 0.4);

package/neural-interface/public/shared/showcase-privacy.js

@@ -69,7 +69,8 @@ export const WHOLESALE_SELECTORS = [
   '.resume-project-badge', '.resume-branch',
   // Account emails and names
   '.acct-menu-trigger-name', '.acct-menu-item-name', '.acct-menu-item-id', '.acct-menu-avatar', '.acct-menu-note', '.acct-menu-v',
-  '.asst-account-label', '.asst-account-sub', '.asst-account-cred', '.asst-model-account', '.as-launch-account-name',
+  '.asst-account-label', '.asst-account-sub', '.asst-account-cred', '.as-launch-account-name',
+  '.asst-acct-name', '.asst-acct-line', '.asst-acct-avatar', '.asst-acct-value-text',
   '.invite-key-box', '.invite-url-text', '.invite-key-status',
   // Toast text
   '.notif-toast-msg', '.term-toast', '#fe-toast', '.as-toast', '.ss-toast', '.cc-toast', '.asp-toast',

package/neural-interface/public/shared/styles.css

@@ -26727,7 +26727,9 @@
   body .term-float-tab.term-float-tab > .term-float-tab-header .term-float-tab-title { font-size: var(--fs-xs); }
   body :is(.sched-header-icon, .sm-header-icon, .ig-icon),
   body :is(.sched-header-icon, .sm-header-icon, .ig-icon) svg { width: 16px; height: 16px; }
-  body .sp-sidepanel.sp-floating > :is(.cp-header, .cxp-header, .ocpv2-header, .asp-header) { flex-wrap: wrap; }
+  /* The Claude Code, Codex and OpenCode headers stay one row: their session name gives way
+     instead (the panels' own header styles). */
+  body .sp-sidepanel.sp-floating > .asp-header { flex-wrap: wrap; }
 
   body .term-float-tab-title { flex: 1 1 100px; }
   body .term-float-tab-actions { flex-wrap: wrap; max-width: 100%; }

package/neural-interface/public/shared/ui-claude-panel.js

@@ -1905,10 +1905,44 @@ function injectStyles() {
       background: rgba(22, 22, 26, 0.95);
       z-index: 3;
       box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,255,255,0.06);
-    }
+      /* A query container measured in controls: 1em is one header button (24px docked, the
+         window's control size when detached, which follows the font scale), so the thresholds
+         below hold at any scale. Nothing in the row inherits it; the session menu takes the
+         panel's back. */
+      container: cp-header / inline-size;
+      font-size: 24px;
+    }
+    .sp-sidepanel.sp-floating > .cp-header { font-size: var(--fw-header-control-size); }
+    .cp-header > .cp-session-menu { font-size: 1rem; }
     .cp-header-actions {
       display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0;
     }
+    /* The header buttons never shrink. The account menu's trigger (account-menu.js) is the one
+       piece of the actions that gives way, once the session name is at its readable 88px, down to
+       its compact 64px, and truncates. */
+    .cp-header-actions > * { flex-shrink: 0; }
+    .cp-header-actions:has(> .acct-menu-trigger) { flex-shrink: 1; min-width: 0; }
+    .cp-header-actions > .acct-menu-trigger { flex-shrink: 1; }
+    /* Narrow headers, in order: the trigger stays at its compact 64px and the name goes from 88px
+       down to its caret; then the trigger is hidden. Room counted in controls (em) plus px: docked,
+       the pencil and six buttons are 7em with 21px of gaps; detached, the move handle makes 8em,
+       the window's 6px gaps 39px, the name's floor is 1em. Thresholds: name + 64px trigger + that row. */
+    @container cp-header (width < calc(7em + 173px)) {
+      .claude-panel:not(.sp-floating) > .cp-header .cp-session-btn { flex: 1 1 0; }
+      .claude-panel:not(.sp-floating) > .cp-header > .cp-header-actions { flex-shrink: 0; }
+      .claude-panel:not(.sp-floating) > .cp-header .acct-menu-trigger { flex: 0 0 64px; width: 64px; }
+    }
+    @container cp-header (width < calc(7em + 117px)) {
+      .claude-panel:not(.sp-floating) > .cp-header .acct-menu-trigger { display: none; }
+    }
+    @container cp-header (width < calc(8em + 191px)) {
+      .claude-panel.sp-floating > .cp-header .cp-session-btn { flex: 1 1 0; }
+      .claude-panel.sp-floating > .cp-header > .cp-header-actions { flex-shrink: 0; }
+      .claude-panel.sp-floating > .cp-header .acct-menu-trigger { flex: 0 0 64px; width: 64px; }
+    }
+    @container cp-header (width < calc(9em + 103px)) {
+      .claude-panel.sp-floating > .cp-header .acct-menu-trigger { display: none; }
+    }
     .cp-header-btn {
       display: flex; align-items: center; justify-content: center;
       width: 24px; height: 24px; border-radius: 7px;
@@ -1934,14 +1968,18 @@ function injectStyles() {
       font-size: 11px; font-family: 'JetBrains Mono', monospace;
       cursor: pointer; padding: 5px 10px; border-radius: 8px 0 0 8px;
       transition: background 0.15s, color 0.15s;
-      max-width: 100%; overflow: hidden;
+      /* The session name keeps a readable 88px (about 8 characters, or its own width if shorter)
+         and gives way first above that: it grows only into the room the pencil and the actions
+         leave, so a long name never pushes them. Narrower, the container queries above let it go
+         down to 32px (the caret). */
+      flex: 1 0 88px; min-width: 32px; max-width: max-content; overflow: hidden;
     }
     .cp-session-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); }
     .cp-session-btn .cp-session-label {
-      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
     .cp-session-btn .cp-dd-arrow {
-      font-size: 9px; padding: 4px 6px; margin: -4px -6px -4px 0;
+      flex-shrink: 0; font-size: 9px; padding: 4px 6px; margin: -4px -6px -4px 0;
       border-radius: 0 6px 6px 0; cursor: pointer;
       transition: background 0.15s, color 0.2s, transform 0.2s;
     }
@@ -1956,6 +1994,7 @@ function injectStyles() {
       -webkit-tap-highlight-color: transparent;
       touch-action: manipulation;
       flex-shrink: 0;
+      margin-right: 3px; /* the actions' own gap, kept when the name fills the row */
     }
     .cp-header-rename-btn:hover { color: rgba(100,160,255,0.95); background: rgba(100,160,255,0.14); }
     .cp-header-rename-btn:active { transform: scale(0.92); transition-duration: 0.06s; }
@@ -11605,6 +11644,13 @@ function wireEvents() {
   const $sessMenu = _panel.querySelector('#cp-session-menu');
   const $sessLabel = _panel.querySelector('.cp-session-label');
   let _sessClickTimer = null;
+  // The whole name as the chip's tooltip, for when the header shows only part of it. The label is
+  // written from many places (switch, rename, title, reset), so it follows the label itself.
+  const syncSessionTooltip = () => {
+    if (!$sessLabel.querySelector('.cp-rename-input')) $sessBtn.title = $sessLabel.textContent;
+  };
+  syncSessionTooltip();
+  new MutationObserver(syncSessionTooltip).observe($sessLabel, { childList: true, characterData: true, subtree: true });
 
   $sessBtn.addEventListener('click', (e) => {
     // Block menu toggle while rename input is active

package/neural-interface/public/shared/ui-explorer.js

@@ -1441,6 +1441,8 @@ export function initExplorer() {
   if (selectAllBtn) {
     selectAllBtn.addEventListener('click', () => {
       Object.keys(state.categoryMetadata).forEach(c => state.activeCategories.add(c));
+      // and the categories memories use without a registered one ("uncategorized" included), as the sidebar does
+      (state.allNodes || []).forEach(n => { if (n.payload?.category) state.activeCategories.add(n.payload.category); });
       cancelScheduledRemoval();
       emit('graph:refresh');
       emit('categories-changed');

package/neural-interface/public/shared/ui-sync.js

@@ -129,6 +129,8 @@ const SYNC_HANDLERS = {
   'assistant:desktop':             (msg) => emit('sync:assistant:desktop', msg),
   'assistant:desktop-setup':       (msg) => emit('sync:assistant:desktop-setup', msg),
   'assistant:routing-changed':     (msg) => emit('sync:assistant:routing-changed', msg),
+  // Admin sandbox (lib/agent-sandbox-setting.js): the one global value changed in some window
+  'agents:admin-sandbox-changed':  (msg) => emit('sync:agents:admin-sandbox-changed', msg),
 
   // WhatsApp Link — states and counters only (never a QR, code, number or text); Settings → WhatsApp re-reads /api/whatsapp/status
   'whatsapp:status':               (msg) => emit('sync:whatsapp:status', msg),

package/neural-interface/public/shared/ui-update.js

@@ -1076,12 +1076,14 @@ function openUpdateModal() {
         failure.code = code;
         throw failure;
       }
-      await res.json();
+      const launched = await res.json();
+      // On Windows the updater also stops the SynaBun MCP servers AI clients started (updater.mjs).
+      const onWindows = launched?.platform === 'win32';
 
       icon.className = 'update-backup-icon';
       icon.textContent = '✓';
       icon.style.color = '#34c759';
-      text.innerHTML = `<strong>Updater terminal launched</strong><span class="update-run-detail">SynaBun is shutting down so npm can replace the package. Watch the terminal for install progress; SynaBun will relaunch automatically when it finishes.</span><span class="update-run-hint">If no terminal window appears, run <code>${esc(installPlan.displayCommand || 'npm i -g synabun@latest')}</code> manually.</span>`;
+      text.innerHTML = `<strong>Updater terminal launched</strong><span class="update-run-detail">SynaBun is shutting down so npm can replace the package. Watch the terminal for install progress; SynaBun will relaunch automatically when it finishes.</span>${onWindows ? '<span class="update-run-detail">It also stops the SynaBun MCP servers your AI clients started. Reconnect them afterwards (in Claude Code: /mcp).</span>' : ''}<span class="update-run-hint">If no terminal window appears, ${onWindows ? 'close your AI clients, then ' : ''}run <code>${esc(installPlan.displayCommand || 'npm i -g synabun@latest')}</code> manually.</span>`;
       runBtn.innerHTML = 'Updater running…';
 
       // Server is shutting down. Optionally redirect to a friendly offline

package/neural-interface/scripts/rebuild-pty.js

@@ -16,10 +16,16 @@ import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { ensureVendoredExecutables } from '../lib/native-binary-runtime.js';
 import { pruneExternalTools } from '../../lib/external-tools.js';
+import { findInstalled } from '../../lib/runtime-dependencies.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const neuralRoot = resolve(__dirname, '..');
-const ptyDir = resolve(neuralRoot, 'node_modules', 'node-pty');
+const packageRoot = resolve(neuralRoot, '..');
+// node-pty where Node finds it from the Neural Interface: the package root's
+// node_modules after `npm i -g synabun`, neural-interface/node_modules in a
+// development checkout or a desktop build.
+const ptyDir = findInstalled(neuralRoot, 'node-pty', { stopAt: packageRoot })?.path
+  || resolve(neuralRoot, 'node_modules', 'node-pty');
 
 // Step 0: Claude Code, Codex, OpenCode and Gemini CLI are installed by the user,
 // never by SynaBun. The lockfile holds none of them; an `npm install` that
@@ -40,7 +46,13 @@ for (const item of pruneExternalTools(resolve(neuralRoot, 'node_modules')).remov
 // linux dirs that do not exist here while missing ones that do). The sweep
 // below enumerates instead.
 function sweepVendoredBinaries(label) {
-  const sweep = ensureVendoredExecutables({ root: neuralRoot, log: console.log });
+  // Both node_modules an install can have: the package root's and the Neural Interface's own.
+  const sweep = { repaired: [], failed: [] };
+  for (const root of new Set([neuralRoot, packageRoot])) {
+    const found = ensureVendoredExecutables({ root, log: console.log });
+    sweep.repaired.push(...found.repaired);
+    sweep.failed.push(...found.failed);
+  }
   for (const failure of sweep.failed) {
     console.warn(`[rebuild-pty] ${failure.path} is not launchable (${failure.state}).`
       + (failure.repairCommand ? ` Try: ${failure.repairCommand}` : ''));