synabun 2.0.0 → 2.0.7

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

@@ -359,11 +359,19 @@ export function injectAssistantStyles() {
     }
     .asst-empty-title { color: var(--asst-text); font-family: var(--ff-heading, inherit); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
     .asst-empty-body { max-width: 440px; color: var(--asst-text-3); font-size: 13px; line-height: 1.55; }
+    /* The greeting (public/shared/greeting/) takes the lead's place when there is one. */
+    .asst-empty-greet { display: contents; }
+    .asst-empty.has-greeting .asst-empty-body { display: none; }
     .asst-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 560px; margin-top: 6px; }
     .asst-chip.asst-suggestion { --cap-h: var(--asst-pill-h-md); --cap-r: var(--asst-pill-r-md); --cap-px: var(--asst-pill-px-md); --cap-fs: 12px; justify-content: flex-start; text-align: left; }
     .asst-chip.asst-suggestion > .asst-icon svg { width: 20px; height: 14px; }
     .asst-chip.asst-suggestion > .asst-icon { color: var(--asst-text-3); }
     .asst-chip.asst-suggestion:is(:hover, :focus-visible) > .asst-icon { color: var(--asst-text); }
+    /* Project and Budget: shared md capsules under the lead, like the suggestions. */
+    .asst-empty-project { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
+    .asst-dd.asst-empty-control-btn { max-width: min(100%, 360px); }
+    .asst-empty-control-btn .asst-dd-label { max-width: 30ch; }
+    .asst-empty-project-key { flex-shrink: 0; color: var(--asst-text-3); font-weight: 400; }
 
     /* ── Messages ───────────────────────────────────────────────────── */
     .asst-msg { display: flex; flex-direction: column; min-width: 0; }
@@ -570,32 +578,61 @@ export function injectAssistantStyles() {
       color: var(--asst-text-2);
     }
 
-    /* ── Route lines ────────────────────────────────────────────────── */
+    /* ── Route lines ────────────────────────────────────────────────────
+       One line at any width, in the cards' column (the rack's 560px, no
+       hang): the glyph, arrow, kind and mark hold; the rest (model ·
+       account · usage, or the state) takes only the room left (flex-basis 0)
+       and ellipsizes first; the class gives way once the rest is down to
+       its "…". The head's title carries the whole text. */
     .asst-route-line { font-size: 12.5px; }
     .asst-route-line-head {
-      display: inline-flex;
+      position: relative;
+      display: flex;
       align-items: center;
       gap: 6px;
-      max-width: calc(100% + 8px);
+      width: fit-content;
+      max-width: min(100%, 560px);
+      min-width: 0;
       min-height: 26px;
-      margin-left: -8px;
       padding: 3px 8px;
+      overflow: hidden;
       border: 0;
       border-radius: var(--asst-r-ctl);
       background: transparent;
       color: var(--asst-text-2);
       font: inherit;
+      white-space: nowrap;
       text-align: left;
       cursor: pointer;
     }
     .asst-route-line-head:hover { background: var(--asst-fill-1); }
     .asst-route-glyph { color: var(--asst-brand); }
+    .asst-route-glyph svg, .asst-route-icon svg { width: 12px; height: 12px; }
+    .asst-route-glyph, .asst-route-arrow, .asst-route-kind, .asst-route-icon, .asst-route-chev { flex: none; }
     .asst-route-arrow, .asst-route-chev { color: var(--asst-text-4); }
     .asst-route-kind { color: var(--asst-text-3); font-size: 11.5px; }
-    .asst-route-icon svg { width: 12px; height: 12px; }
-    .asst-route-target { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--asst-text); font-weight: 500; }
+    .asst-route-class { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .asst-route-rest { flex: 1 1 0; min-width: 1.2em; overflow: hidden; text-overflow: ellipsis; color: var(--asst-text-3); }
+    .asst-route-target { color: var(--asst-text); font-weight: 500; }
     .asst-route-meta, .asst-route-state { flex-shrink: 0; color: var(--asst-text-3); white-space: nowrap; }
+    .asst-route-meta:not([hidden]) + .asst-route-state::before { content: '· '; color: var(--asst-text-3); }
     .asst-route-line.pending .asst-route-state { color: var(--asst-warn); }
+    /* Live: the rack's sweep (asst-rk-sweep, asst-rack-styles.js) on the row's bottom edge, gold while
+       a run it dispatched works (the mark ticks like the rack's running tick), the warn tone while it
+       waits for your choice. Settled rows hold still. */
+    .asst-route-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; overflow: hidden; pointer-events: none; }
+    .asst-route-line[data-live] .asst-route-sweep::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 38%;
+      background: linear-gradient(90deg, transparent, var(--asst-brand), transparent);
+      animation: asst-rk-sweep 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
+    }
+    .asst-route-line[data-live="waiting"] .asst-route-sweep::after { background: linear-gradient(90deg, transparent, var(--asst-warn), transparent); }
+    .asst-route-line[data-live="working"] .asst-route-icon { animation: asst-rk-tick 1.1s ease-in-out infinite; }
     .asst-route-line.muted .asst-route-glyph { color: var(--asst-text-4); }
     .asst-route-line.muted .asst-route-class { color: var(--asst-text-3); }
     .asst-route-chev { transition: transform var(--asst-dur-base) var(--asst-ease-standard); }
@@ -610,6 +647,39 @@ export function injectAssistantStyles() {
       color: var(--asst-text-3);
       font-size: 12px;
     }
+    /* ── Automation trace (one row per turn: asst-automation.js) ─────── */
+    .asst-transcript > .asst-auto + .asst-route-line,
+    .asst-transcript > .asst-route-line + .asst-auto,
+    .asst-transcript > .asst-msg.msg-user + .asst-auto,
+    .asst-transcript > .asst-msg.msg-assistant + .asst-auto { margin-top: 4px; }
+    .asst-auto .asst-auto-head { color: var(--asst-text-3); }
+    .asst-auto .asst-route-glyph { display: inline-flex; color: var(--asst-text-4); }
+    .asst-auto .asst-route-glyph svg { width: 12px; height: 12px; }
+    .asst-auto.learned .asst-route-glyph { color: var(--asst-brand); }
+    .asst-auto-title { flex-shrink: 0; color: var(--asst-text-2); white-space: nowrap; }
+    /* The summary is what gives way in a narrow panel: one line, ellipsized. */
+    .asst-auto .asst-auto-summary { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+    .asst-auto.learned .asst-auto-state { color: var(--asst-brand); }
+    .asst-auto-detail { gap: 10px; }
+    .asst-auto-group { display: flex; flex-direction: column; gap: 4px; }
+    .asst-auto-h { color: var(--asst-text-3); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
+    .asst-auto-row { display: flex; flex-direction: column; gap: 2px; color: var(--asst-text-2); }
+    .asst-auto-row.muted { color: var(--asst-text-3); }
+    .asst-auto-row.learned .asst-auto-text { color: var(--asst-text); }
+    .asst-auto-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
+    .asst-auto-tier { color: var(--asst-text-2); font-weight: 500; }
+    .asst-auto-meta { color: var(--asst-text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
+    .asst-auto-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
+    pre.asst-auto-text {
+      padding: 6px 8px;
+      border-radius: var(--asst-r-ctl);
+      background: var(--asst-fill-1);
+      color: var(--asst-text-2);
+      font-family: var(--asst-mono);
+      font-size: 11.5px;
+      line-height: 1.45;
+    }
+    .asst-auto-ids { display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--asst-mono); font-size: 11px; }
     .asst-link { padding: 0; border: 0; background: transparent; color: var(--asst-focus); font: inherit; text-align: left; cursor: pointer; }
     .asst-link:hover { text-decoration: underline; }
     .asst-link:disabled { color: var(--asst-text-4); cursor: default; text-decoration: none; }
@@ -1038,6 +1108,11 @@ 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; }
     .asst-dd-caret {
@@ -1391,6 +1466,8 @@ export function injectAssistantStyles() {
     .asst-dd-item-main { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
     .asst-dd-item-label, .asst-dd-item-desc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
     .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; }
     .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); }
@@ -1460,11 +1537,50 @@ export function injectAssistantStyles() {
     .asst-account-label { color: var(--asst-text); }
     .asst-account-sub { color: var(--asst-text-3); font-size: 11px; }
     .asst-account-row input.asst-dd-input { margin: 0; }
+    /* Claude accounts (claude-account-view.js): what each runs on, its credentials and their actions. */
+    .asst-account-row.claude { flex-wrap: wrap; align-items: flex-start; }
+    .asst-account-row.claude .asst-account-main { flex-basis: 60%; }
+    .asst-account-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
+    .asst-account-badge { flex-shrink: 0; padding: 1px 6px; border-radius: var(--asst-pill-r-xs); color: var(--asst-text-2); font-size: 10.5px; box-shadow: inset 0 0 0 1px var(--asst-line-2); }
+    .asst-account-badge[data-tone="ok"] { color: var(--asst-text); box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring); }
+    .asst-account-badge[data-tone="warn"] { color: var(--asst-warn); box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring); }
+    .asst-account-creds { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; color: var(--asst-text-3); font-size: 11px; }
+    .asst-account-cred { display: flex; align-items: center; gap: 6px; }
+    .asst-account-cred-k { min-width: 120px; }
+    .asst-account-actions { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 6px; margin-top: 6px; }
+    .asst-account-form { display: flex; flex-basis: 100%; gap: 6px; margin-top: 6px; }
+    .asst-account-form input { flex: 1; min-width: 0; }
+    .asst-account-msg { flex-basis: 100%; margin-top: 4px; color: var(--asst-text-3); font-size: 11px; }
+    .asst-dd.asst-dd-warn { color: var(--asst-warn); box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring); }
     .asst-login-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--asst-r-field); box-shadow: inset 0 0 0 1px var(--asst-line-2); }
     .asst-login-code { color: var(--asst-text); font-family: var(--asst-mono); font-size: 15px; letter-spacing: .1em; }
 
     .asst-routes-modal { width: min(660px, 100%); }
-    .asst-budget-row { align-items: flex-start; }
+    .asst-budget-modal { width: min(560px, calc(100vw - 24px)); }
+    .asst-budget-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
+    .asst-budget-controls > :is(.asst-modal-note, .asst-budget-field-error, .asst-budget-switch-label) { grid-column: 1 / -1; }
+    .asst-budget-controls > .asst-btn { justify-self: start; }
+    .asst-budget-controls .asst-budget-input { width: 96px; min-width: 0; box-sizing: border-box; }
+    .asst-budget-switch-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--asst-text); cursor: pointer; }
+    .asst-budget-switch { appearance: none; position: relative; width: 30px; height: 18px; margin: 0; border: 0; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-3); box-shadow: inset 0 0 0 1px var(--asst-line-2); cursor: pointer; }
+    .asst-budget-switch::before { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: var(--asst-pill-r-xs); background: var(--asst-text-3); transition: transform var(--asst-dur-fast) var(--asst-ease-standard); }
+    .asst-budget-switch:checked { background: var(--asst-brand); }
+    .asst-budget-switch:checked::before { background: var(--asst-ink); transform: translateX(12px); }
+    .asst-budget-controls :is(input, button):focus-visible { outline: 2px solid var(--asst-focus); outline-offset: 2px; }
+    .asst-budget-controls input:disabled { opacity: .5; }
+    .asst-budget-popover .asst-dd-list { padding: 8px; }
+    .asst-budget-session { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--asst-line); }
+    .asst-budget-total { font-family: var(--asst-mono); }
+    .asst-budget-session[data-tone="warn"] .asst-budget-total, .asst-budget-dry { color: var(--asst-warn); }
+    .asst-budget-session[data-tone="over"] .asst-budget-total { color: var(--asst-live); }
+    .asst-budget-providers { display: flex; flex-direction: column; gap: 8px; }
+    .asst-budget-provider { padding: 8px; border-radius: var(--asst-r-field); background: var(--asst-fill-1); overflow-wrap: anywhere; }
+    .asst-budget-provider[data-eligible="false"] { color: var(--asst-text-3); }
+    .asst-budget-provider-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+    .asst-budget-provider-money { margin-top: 4px; font: 12px/1.5 var(--asst-mono); }
+    .asst-budget-brain { padding: 0 6px; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-2); font-size: 11.5px; }
+    .asst-budget-dry { font-size: 12px; }
+    .asst-budget-meter { width: 100%; accent-color: var(--asst-brand); }
     .asst-budget-desc, .asst-budget-meta { color: var(--asst-text-3); font-size: 11.5px; line-height: 1.4; }
     .asst-budget-meta { font-variant-numeric: tabular-nums; }
     .asst-budget-field-error { color: var(--asst-live); font-size: 11.5px; line-height: 1.4; }
@@ -1546,6 +1662,114 @@ export function injectAssistantStyles() {
       .asst-routes-row { flex-wrap: wrap; }
     }
 
+    /* Model routes editor: Settings density on a desktop pointer. Scoped here
+       so route cards, the model manager and other Assistant menus keep their UI. */
+    .asst-routes-overlay { font-family: var(--stg-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif); }
+    .asst-routes-overlay .asst-routes-modal { width: min(1040px, 100%); max-height: calc(100dvh - 32px); border-radius: var(--asst-r-card); line-height: 1.4; }
+    .asst-routes-modal :is(.asst-btn, .asst-dd, .asst-iconbtn) { --cap-h: var(--asst-pill-h-sm); --cap-r: var(--asst-pill-r-xs); --cap-px: var(--asst-pill-px-sm); --cap-icon: 12px; --cap-gap: 4px; }
+    .asst-routes-modal .asst-modal-head { min-height: 40px; padding: 8px 14px 8px 22px; font-size: 13px; }
+    .asst-routes-modal .asst-modal-head .asst-icon { color: var(--asst-text-2); }
+    .asst-routes-modal .asst-modal-close { width: var(--cap-h); height: var(--cap-h); }
+    .asst-routes-modal .asst-modal-body { gap: 12px; padding: 12px 22px; scroll-padding: 28px 0; }
+    .asst-routes-modal .asst-modal-foot { padding: 10px 22px; }
+    .asst-routes-modal .asst-btn { height: var(--cap-h); min-height: var(--cap-h); padding: 0 10px; }
+    .asst-routes-modal .asst-routes-section { flex-shrink: 0; gap: 6px; margin: 0; min-width: 0; }
+    .asst-routes-modal .asst-routes-section-title { margin: 0; color: var(--asst-text); font-size: 13px; font-weight: 600; }
+    .asst-routes-modal .asst-routes-modes { gap: 0; padding: 0; border-radius: var(--asst-pill-r-xs); background: var(--asst-fill-1); }
+    .asst-routes-modal .asst-routes-mode { position: relative; flex-direction: row; align-items: center; justify-content: center; height: var(--asst-pill-h-sm); padding: 0 8px; gap: 0; min-width: 0; border-radius: var(--asst-pill-r-xs); box-shadow: none; color: var(--asst-text-2); }
+    .asst-routes-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+    .asst-routes-modal .asst-routes-mode:has(input:checked) { background: var(--asst-fill-3); color: var(--asst-text); box-shadow: inset 0 0 0 1px var(--asst-line-2); }
+    .asst-routes-modal .asst-routes-mode-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
+    .asst-routes-modal .asst-routes-mode-desc, .asst-routes-session-note { margin: 0; color: var(--asst-text-2); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
+    .asst-routes-session-note { color: var(--asst-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .asst-routes-mode:has(:focus-visible) { outline: 2px solid var(--asst-focus); outline-offset: 2px; z-index: 1; }
+    .asst-routes-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+    .asst-routes-list-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+    .asst-routes-modal .asst-routes-list-actions .asst-btn { background: transparent; box-shadow: none; padding: 0 2px; color: var(--asst-text-2); font-weight: 400; }
+    .asst-routes-modal .asst-routes-list-actions .asst-btn:hover:not(:disabled) { color: var(--asst-text); background: var(--asst-fill-1); }
+    /* Reserve the widths the current model names, effort words and destinations
+       need; give all remaining space to task descriptions instead of a share. */
+    .asst-routes-modal .asst-routes-columns, .asst-routes-modal .asst-routes-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 200px) 70px 116px minmax(120px, 190px) var(--asst-pill-h-sm); column-gap: 6px; }
+    .asst-routes-columns { position: sticky; top: -14px; z-index: 1; padding: 4px 8px; color: var(--asst-text-3); font-size: 11.5px; background: var(--asst-popover); }
+    .asst-routes-columns span:last-child { visibility: hidden; }
+    .asst-routes-modal .asst-routes-list { padding: 0 8px; border: 1px solid var(--asst-line); border-radius: var(--radius-group, 9px); background: var(--asst-field); }
+    .asst-routes-modal .asst-routes-row { align-items: center; row-gap: 0; padding: 2px 0; border-top: 1px solid var(--asst-line); }
+    .asst-routes-modal .asst-routes-row:first-child { border-top: 0; }
+    .asst-routes-modal .asst-routes-row-main { min-width: 0; }
+    .asst-routes-modal .asst-routes-row-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 400; line-height: 1.3; }
+    .asst-routes-modal :is(.asst-routes-row-desc, .asst-routes-row-note, .asst-routes-row-warning, .asst-routes-row-context) { margin: 0; padding: 0; border: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--asst-text-3); font-size: 11.5px; line-height: 1.3; }
+    .asst-routes-modal :is(.asst-routes-row-note, .asst-routes-row-warning) { color: var(--asst-warn); }
+    .asst-routes-modal .asst-routes-row > :is(.asst-routes-row-note, .asst-routes-row-warning, .asst-routes-row-context) { grid-column: 1 / -1; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
+    .asst-routes-inactive { margin-inline-start: 6px; color: var(--asst-text-3); font-size: 11px; }
+    .asst-routes-cell { display: flex; min-width: 0; }
+    .asst-routes-cell-label { display: none; }
+    .asst-routes-modal .asst-dd { width: 100%; max-width: none; height: var(--cap-h); min-height: var(--cap-h); padding: 0 6px; background: var(--asst-fill-2); box-shadow: inset 0 0 0 1px var(--asst-line); color: var(--asst-text); }
+    .asst-routes-modal .asst-dd .asst-dd-label { flex: 1; max-width: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1; font-size: 12px; text-align: start; }
+    .asst-routes-modal .asst-dd > .asst-icon { margin: 0; padding: 0; box-shadow: none; }
+    .asst-routes-modal .asst-dd:disabled { opacity: 1; cursor: default; background: transparent; box-shadow: none; color: var(--asst-text-3); }
+    .asst-routes-modal .asst-routes-source { display: inline-flex; flex-shrink: 0; min-width: 0; width: 12px; height: 12px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--asst-text-3); }
+    .asst-routes-source svg { width: 12px; height: 12px; }
+    .asst-routes-modal .asst-routes-source[data-edited="true"] { color: var(--asst-text); }
+    .asst-routes-modal .asst-routes-source:is([data-source="disabled"], [data-source="incapable"]) { color: var(--asst-warn); text-decoration: none; }
+    .asst-routes-modal .asst-routes-reset { width: var(--cap-h); min-width: var(--cap-h); padding: 0; color: var(--asst-text-3); }
+    .asst-routes-draft { flex: 1; min-width: 0; color: var(--asst-text-3); font-size: 12px; }
+    .asst-routes-draft[data-dirty="true"] { color: var(--asst-brand); }
+    .asst-routes-scroll-cue { display: none; flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 0; border-top: 1px solid var(--asst-line); background: transparent; color: var(--asst-text-2); font: inherit; font-size: 12px; cursor: pointer; }
+    .asst-routes-confirm { display: flex; flex-shrink: 0; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 22px; border-top: 1px solid var(--asst-line); }
+    .asst-routes-confirm-copy { display: flex; flex: 1 1 240px; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
+    .asst-routes-confirm-copy span { color: var(--asst-text-2); }
+    .asst-routes-confirm-action { box-shadow: inset 0 0 0 1px var(--asst-warn); }
+    .asst-routes-modal .asst-routes-notice { box-shadow: none; padding: 0; color: var(--asst-text-2); }
+    .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) .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%; }
+    .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-desc { flex: 1; text-align: end; }
+    /* Account identities and quota windows need a second line in their menu. */
+    .asst-routes-overlay .asst-route-account-menu .asst-dd-item { height: auto; min-height: var(--asst-pill-h-sm); padding: 4px 8px; }
+    .asst-routes-overlay .asst-route-account-menu .asst-dd-item-main { flex-direction: column; align-items: stretch; gap: 2px; }
+    .asst-routes-overlay .asst-route-account-menu :is(.asst-dd-item-label, .asst-dd-item-desc) { white-space: normal; max-width: none; text-align: start; overflow-wrap: anywhere; }
+    .asst-model-menu .asst-dd-item[data-kind="radio"]:not([data-id*=":"]) .asst-dd-item-desc { white-space: normal; overflow-wrap: anywhere; }
+    .asst-routes-overlay .asst-route-model-menu .asst-dd-input { height: var(--asst-pill-h-sm); min-height: var(--asst-pill-h-sm); font-size: 12px; border-radius: var(--asst-pill-r-xs); }
+    .asst-routes-overlay .asst-route-model-menu .asst-dd-input:focus-visible { outline: 2px solid var(--asst-focus); outline-offset: -2px; }
+    .asst-route-menu-foot { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--asst-line-2); padding-top: 4px; }
+    .asst-route-menu-foot .asst-dd-info { flex: 1 0 100%; font-size: 12px; color: var(--asst-text-2); }
+    .asst-route-menu-foot .asst-dd-item { flex: 1; width: auto; }
+    /* Large targets belong to a coarse pointer or the narrow stacked layout. */
+    @media (pointer: coarse), (max-width: 600px) {
+      .asst-routes-modal :is(.asst-btn, .asst-dd, .asst-iconbtn) { --cap-h: 44px; }
+      .asst-routes-modal .asst-routes-mode { height: auto; min-height: 44px; }
+      .asst-routes-modal .asst-routes-mode-label { white-space: normal; }
+      .asst-routes-modal .asst-routes-columns, .asst-routes-modal .asst-routes-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, 1.4fr) 44px; }
+      .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) :is(.asst-dd-item, .asst-dd-input) { min-height: 44px; height: auto; padding: 8px; }
+      .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) .asst-dd-item-main { flex-direction: column; align-items: stretch; gap: 2px; }
+      .asst-routes-overlay :is(.asst-route-model-menu, .asst-route-field-menu) :is(.asst-dd-item-label, .asst-dd-item-desc) { white-space: normal; max-width: none; text-align: start; overflow-wrap: anywhere; }
+    }
+    @media (max-width: 600px) {
+      .asst-routes-overlay { padding: 8px; }
+      .asst-routes-overlay .asst-routes-modal { max-height: calc(100dvh - 16px); }
+      .asst-routes-modal .asst-modal-body { padding: 14px; gap: 16px; }
+      .asst-routes-modal .asst-modal-head { padding-inline: 14px 8px; }
+      .asst-routes-modal .asst-routes-modes { grid-template-columns: 1fr; }
+      .asst-routes-modal .asst-routes-columns { display: none; }
+      .asst-routes-modal .asst-routes-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; padding: 12px 0; }
+      .asst-routes-modal .asst-routes-row-main, .asst-routes-modal .asst-routes-model-cell, .asst-routes-modal .asst-routes-account-cell { grid-column: 1 / -1; }
+      .asst-routes-cell { flex-direction: column; gap: 4px; }
+      .asst-routes-cell-label { display: block; color: var(--asst-text-3); font-size: 11.5px; }
+      .asst-routes-reset-cell { align-self: end; }
+      .asst-routes-reset-cell:empty { display: none; }
+      .asst-routes-modal .asst-modal-foot { display: grid; grid-template-columns: 1fr auto auto; padding: 10px 14px; }
+      .asst-routes-draft { grid-column: 1 / -1; grid-row: 1; }
+      .asst-routes-reset-all { grid-column: 1; grid-row: 2; justify-self: start; }
+      .asst-routes-cancel { grid-column: 2; grid-row: 2; }
+      .asst-routes-save { grid-column: 3; grid-row: 2; }
+      .asst-routes-scroll-cue { display: block; }
+      .asst-routes-confirm { padding: 10px 14px; }
+    }
+
     /* ── Frame lightbox ─────────────────────────────────────────────── */
     .asst-lightbox { position: fixed; inset: 0; z-index: 100040; display: flex; align-items: center; justify-content: center; background: var(--asst-scrim-strong); }
     .asst-lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
@@ -1599,7 +1823,8 @@ export function injectAssistantStyles() {
     /* ── Narrow / short containers (the tab or float window) ──────────
        Toolbar priority, highest first: route mode · Computer · project ·
        MCP. The composer row (attach · model · effort · permission mode ·
-       account) keeps model; account hides ≤720px. A capsule that runs out of
+       test density · account) keeps model; account hides ≤720px, where test
+       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
@@ -1620,6 +1845,9 @@ export function injectAssistantStyles() {
     }
     @container asst (max-width: 720px) {
       :is(.asst-dd-mcp, .asst-dd-account, .asst-dd-project, .asst-bar-group[data-group="context"]) { display: none !important; }
+      .asst-composer-brain .asst-dd.asst-dd-tests { display: grid; place-content: center; place-items: center; padding: 0; }
+      .asst-composer-brain .asst-dd.asst-dd-tests > :is(.asst-dd-label, .asst-dd-caret) { display: none; }
+      .asst-composer-brain .asst-dd.asst-dd-tests > .asst-icon:not([hidden]) { margin: 0; padding: 0 var(--cap-glyph-pad); box-shadow: none; }
       .asst-route-keys { display: none; }
     }
     @container asst (max-width: 540px) {
@@ -1639,6 +1867,9 @@ export function injectAssistantStyles() {
       :is(.asst-cost, .asst-bar-group[data-group="context"]) { display: none !important; }
       .asst-suggestions { flex-direction: column; align-items: stretch; width: 100%; }
       .asst-chip.asst-suggestion { justify-content: flex-start; max-width: none; }
+      .asst-empty-project { width: 100%; }
+      .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; }
@@ -1649,12 +1880,13 @@ export function injectAssistantStyles() {
       .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; }
-      .asst-composer-actions { flex-wrap: wrap; row-gap: 6px; }
-      .asst-composer-brain { flex-wrap: wrap; row-gap: 6px; }
+      /* A tighter gap keeps attach · model · effort · variant · mode · tests · send on one row at 320px. */
+      .asst-composer-actions { flex-wrap: wrap; gap: 6px 4px; }
+      .asst-composer-brain { flex-wrap: wrap; gap: 6px 4px; }
     }
     @container asst (max-height: 260px) {
       /* the toolbar stays: it carries the controls */
-      :is(.asst-empty-body, .asst-empty-mascot, .asst-suggestions) { display: none !important; }
+      :is(.asst-empty-body, .asst-empty-mascot, .asst-empty-project, .asst-suggestions, .asst-empty-greet) { display: none !important; }
       .asst-empty { gap: 4px; padding: 4px; }
       .asst-empty-title { font-size: 14px; }
       .asst-bottom { margin-top: 6px; }
@@ -1671,6 +1903,8 @@ export function injectAssistantStyles() {
     @keyframes asst-spin { to { transform: rotate(360deg); } }
 
     body.ui-interacting :is(.asst-live-dot, .asst-spinner, .asst-computer-dot, .syna-cameo-eye) { animation-play-state: paused !important; }
+    body.ui-interacting .asst-route-line[data-live] .asst-route-icon,
+    body.ui-interacting .asst-route-line[data-live] .asst-route-sweep::after { animation-play-state: paused !important; }
 
     @media (prefers-reduced-motion: reduce) {
       .asst-transcript { scroll-behavior: auto; }
@@ -1680,6 +1914,8 @@ export function injectAssistantStyles() {
       .term-minimized-pill,
       .term-minimized-pill::before,
       .term-minimized-pill::after { animation: none !important; transition: none !important; }
+      /* A frozen sweep would be a stray stub: the route row draws none (its run card and state words remain). */
+      .asst-route-sweep { display: none; }
     }
   `;
   document.head.appendChild(style);

package/neural-interface/public/shared/blob-store.js

@@ -10,6 +10,38 @@
 const _putTimers = new Map();   // `${ns}/${id}` -> timeout id
 const _pendingPuts = new Map(); // `${ns}/${id}` -> { ns, id, value, opts }
 const DEFAULT_DEBOUNCE_MS = 500;
+// One request per entry at a time, in the order they were asked for: a delete
+// (or a newer write) that overtook a write still on its way would be undone by it.
+const _inFlight = new Map();       // `${ns}/${id}` -> the request under way (a write or a delete); never rejects
+const _waitingDeletes = new Map(); // `${ns}/${id}` -> sends the delete that waits behind that request
+const _asked = new Map();          // `${ns}/${id}` -> counts the puts and deletes asked for
+
+// Every put and delete of this page is numbered when it is asked for, and says which page it is of. Of two
+// requests of one page for an entry the server keeps the one with the higher number, whichever arrives first
+// (lib/ui-blob-store.js): what is sent while the page is being left (flushBlobs) cannot be put in an order here.
+// A server from before this ignores the two fields; the order kept above is then all there is, as it was.
+const _writer = (() => {
+  try { return Array.from(crypto.getRandomValues(new Uint8Array(12)), (byte) => byte.toString(16).padStart(2, '0')).join(''); }
+  catch { return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 12)}`; }
+})();
+let _revision = 0;
+
+/** The address of one entry, for the request numbered `rev` (and what a write asks to be evicted). */
+const _url = (ns, id, rev, opts = {}) => {
+  const params = new URLSearchParams();
+  if (opts.maxEntries) params.set('maxEntries', String(opts.maxEntries));
+  if (opts.maxChars) params.set('maxChars', String(opts.maxChars));
+  params.set('rev', String(rev));
+  params.set('writer', _writer);
+  return `/api/ui-blobs/${encodeURIComponent(ns)}/${encodeURIComponent(id)}?${params.toString()}`;
+};
+const _ask = (key) => { const n = (_asked.get(key) || 0) + 1; _asked.set(key, n); return n; };
+
+function _track(key, request) {
+  const tracked = Promise.resolve(request).then(() => {}, () => {}).then(() => { if (_inFlight.get(key) === tracked) _inFlight.delete(key); });
+  _inFlight.set(key, tracked);
+  return tracked;
+}
 
 export async function fetchBlobNamespace(ns) {
   try {
@@ -22,68 +54,125 @@ export async function fetchBlobNamespace(ns) {
   }
 }
 
+// One entry, or null: there is none, or the server has no such namespace.
+export async function fetchBlob(ns, id) {
+  try {
+    const res = await fetch(`/api/ui-blobs/${encodeURIComponent(ns)}/${encodeURIComponent(id)}`);
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
 async function _sendPut(key) {
   const pending = _pendingPuts.get(key);
   if (!pending) return;
-  _pendingPuts.delete(key);
   _putTimers.delete(key);
-  const { ns, id, value, opts } = pending;
-  const params = new URLSearchParams();
-  if (opts.maxEntries) params.set('maxEntries', String(opts.maxEntries));
-  if (opts.maxChars) params.set('maxChars', String(opts.maxChars));
-  const qs = params.toString();
-  try {
-    const res = await fetch(`/api/ui-blobs/${encodeURIComponent(ns)}/${encodeURIComponent(id)}${qs ? '?' + qs : ''}`, {
+  // Something of this entry is on its way: this write goes when that is settled (still pending until then).
+  const busy = _inFlight.get(key);
+  if (busy) { busy.then(() => _sendPut(key)); return; }
+  _pendingPuts.delete(key);
+  const { ns, id, value, opts, rev } = pending;
+  const asked = _asked.get(key);
+  const request = (async () => {
+    const res = await fetch(_url(ns, id, rev, opts), {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(value),
     });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  })();
+  _track(key, request);
+  try {
+    await request;
+    _answer(pending.waiters, true);
   } catch (err) {
-    console.warn(`[blob-store] PUT ${ns}/${id} failed:`, err.message, '— will retry');
-    // Re-queue unless a newer value superseded this one while in flight.
-    if (!_pendingPuts.has(key)) {
+    // Re-queue only if nothing was asked for this entry meanwhile: a newer value superseded this one, or the
+    // entry was deleted (a retry would bring back what was removed).
+    const retry = _asked.get(key) === asked && !_pendingPuts.has(key);
+    console.warn(`[blob-store] PUT ${ns}/${id} failed:`, err.message, retry ? '— will retry' : '— superseded');
+    if (retry) {
       _pendingPuts.set(key, pending);
       _putTimers.set(key, setTimeout(() => _sendPut(key), 2000));
+    } else {
+      // Whoever waits for this write waits for the newer one that took its place; without one (the entry was
+      // deleted) it was given up.
+      const newer = _pendingPuts.get(key);
+      if (newer) newer.waiters.push(...pending.waiters.splice(0));
+      else _answer(pending.waiters, false);
     }
   }
 }
 
-// Debounced per-(ns,id), latest value wins.
+// What the callers of putBlob that wait for it are told: `true`, the server has the value (or a newer one of the
+// entry); `false`, the write was given up.
+const _answer = (waiters, stored) => { for (const done of waiters.splice(0)) done(stored); };
+
+// Debounced per-(ns,id), latest value wins. Answers a promise, for a caller that must not go on before the value
+// is in the store: `true` once the server has stored it (or a newer value of the entry, when one was asked for
+// meanwhile), `false` when the write was given up (the entry was deleted, or the page is going and the write was
+// handed to a beacon, which says nothing back). It never rejects; a write that fails is tried again as before, and
+// the promise waits with it.
 export function putBlob(ns, id, value, opts = {}) {
   const key = `${ns}/${id}`;
   const debounceMs = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
-  _pendingPuts.set(key, { ns, id, value, opts });
+  _ask(key);
+  const waiters = _pendingPuts.get(key)?.waiters || [];
+  const stored = new Promise((done) => { waiters.push(done); });
+  _pendingPuts.set(key, { ns, id, value, opts, rev: ++_revision, waiters });
   if (_putTimers.has(key)) clearTimeout(_putTimers.get(key));
   _putTimers.set(key, setTimeout(() => _sendPut(key), debounceMs));
+  return stored;
 }
 
+// A delete is tried once: one that failed (the server could not make it, refused it, or was not reached) is not
+// sent again. This page cannot know what another page has written to the entry since, and a delete that arrived
+// late would remove that.
 export function deleteBlob(ns, id) {
   const key = `${ns}/${id}`;
   if (_putTimers.has(key)) { clearTimeout(_putTimers.get(key)); _putTimers.delete(key); }
+  const dropped = _pendingPuts.get(key);
   _pendingPuts.delete(key);
-  fetch(`/api/ui-blobs/${encodeURIComponent(ns)}/${encodeURIComponent(id)}`, { method: 'DELETE' })
-    .catch(() => {});
+  if (dropped) _answer(dropped.waiters, false);
+  _ask(key);
+  const rev = ++_revision;
+  const send = (init = {}) => fetch(_url(ns, id, rev), { method: 'DELETE', ...init }).catch(() => {});
+  const busy = _inFlight.get(key);
+  if (!busy) { _track(key, send()); return; }
+  // After the request of this entry that is on its way (sent once, also when the page goes first: flushBlobs).
+  // Its turn sends it only while it is still the one that waits: a later delete has taken its place, or the
+  // page that was about to be left has sent it already.
+  _waitingDeletes.set(key, send);
+  _track(key, busy.then(() => {
+    if (_waitingDeletes.get(key) !== send) return undefined;
+    _waitingDeletes.delete(key);
+    return send();
+  }));
 }
 
 // Flush all pending puts immediately. With useBeacon (pagehide path), bodies
 // under ~60KB go via sendBeacon (survives unload); larger ones use a best-
 // effort fetch — the last debounced PUT was at most a debounce window ago, so
-// little is lost if it doesn't complete.
+// little is lost if it doesn't complete. What goes out here goes out at once,
+// beside a request that may still be on its way: each carries its number, and
+// the server keeps what was asked for last.
 export function flushBlobs({ useBeacon = false } = {}) {
+  // The page is going: a delete that waits behind a request cannot wait any longer.
+  if (useBeacon) {
+    for (const [key, send] of [..._waitingDeletes.entries()]) { _waitingDeletes.delete(key); send({ keepalive: true }); }
+  }
   for (const [key, pending] of [..._pendingPuts.entries()]) {
     if (_putTimers.has(key)) { clearTimeout(_putTimers.get(key)); _putTimers.delete(key); }
     if (useBeacon) {
-      const { ns, id, value } = pending;
+      const { ns, id, value, rev } = pending;
       const body = JSON.stringify(value);
       _pendingPuts.delete(key);
+      _answer(pending.waiters, false);   // a beacon says nothing back: nobody is told it arrived
       if (body.length < 60_000) {
-        navigator.sendBeacon(
-          `/api/ui-blobs/${encodeURIComponent(ns)}/${encodeURIComponent(id)}`,
-          new Blob([body], { type: 'application/json' })
-        );
+        navigator.sendBeacon(_url(ns, id, rev), new Blob([body], { type: 'application/json' }));
       } else {
-        fetch(`/api/ui-blobs/${encodeURIComponent(ns)}/${encodeURIComponent(id)}`, {
+        fetch(_url(ns, id, rev), {
           method: 'PUT',
           headers: { 'Content-Type': 'application/json' },
           body,

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

@@ -20,6 +20,8 @@ const definitions = [
   ['hooks', 'Inspect configured hooks', 'hooks_list'],
   ['init', 'Create or update AGENTS.md guidance', null, true],
   ['logout', 'Sign out of Codex', 'account_logout'],
+  ['login', 'Sign in with ChatGPT'],
+  ['account', 'Choose an account or sign in'],
   ['mcp', 'Search MCP servers and tools', 'mcp_status'],
   ['mention', 'Add a structured file mention', null, true],
   ['model', 'Choose model'],
@@ -146,10 +148,11 @@ export function configChanges(definitions, inputs, original) {
 export const SESSION_CONFIG_FIELDS = Object.freeze({
   model: 'model', model_reasoning_effort: 'effort', model_reasoning_summary: 'summary',
   personality: 'personality', service_tier: 'serviceTier', approval_policy: 'approvalPolicy',
+  sandbox_mode: 'sandboxPolicy',
 });
 
 export function sessionSettings(config) {
-  return Object.fromEntries(Object.entries(config).filter(([key]) => SESSION_CONFIG_FIELDS[key]).map(([key, value]) => [SESSION_CONFIG_FIELDS[key], value]));
+  return Object.fromEntries(Object.entries(config).filter(([key]) => SESSION_CONFIG_FIELDS[key]).map(([key, value]) => [key === 'sandbox_mode' ? 'sandboxMode' : SESSION_CONFIG_FIELDS[key], value]));
 }
 
 export function modelServiceTiers(model) {