synabun 2.0.0 → 2.0.5

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

@@ -26,7 +26,7 @@ import {
 } from '../ui-assistant.js';
 import { mountAssistant } from './asst-panel.js';
 import { openModelsManager } from './asst-route.js';
-import { brainLabel, readStoredBrain } from './asst-state.js';
+import { brainLabel, readStoredBrain, restoredSessionName } from './asst-state.js';
 import { closeMenu, isMenuOpen, openMenu } from './asst-menu.js';
 import { injectAssistantSidepanelStyles } from './asst-sidepanel-styles.js';
 import { createMascot, mascotCameoSvg } from '../synabun-mascot.js';
@@ -50,7 +50,7 @@ let _initialized = false;
 let _starting = false;
 let _startError = ''; // the last message the host showed while starting (the failed state repeats it)
 let _placeholderMascot = null; // the character while starting: the empty state's, same size; it flies to the empty state's spot
-let _pendingPath = '';
+let _pendingPaths = []; // file paths sent while no session was open: attached, in order, when one is
 let _toastTimer = null;
 let _renaming = false;
 const _tabs = [];   // { sessionId, viewport, toolbar, ctl, pill, label, userRenamed, status, brain }
@@ -260,7 +260,7 @@ function showPanelToast(text) {
 
 // ── Tabs ─────────────────────────────────────────────────────────────────────
 
-function mountTab({ sessionId, meta = null, brain = null, label = '', userRenamed = false, prompt = '', show = true } = {}) {
+function mountTab({ sessionId, meta = null, brain = null, label = '', userRenamed = false, prompt = '', show = true, restoring = false } = {}) {
   if (!sessionId) return null;
   ensurePanel();
   const existing = findTab(sessionId);
@@ -280,9 +280,13 @@ function mountTab({ sessionId, meta = null, brain = null, label = '', userRename
   toolbar.className = 'asp-tab-bar';
   toolbar.dataset.sessionId = sessionId;
   panelEl('.asp-bar-slot').appendChild(toolbar);
-  const renamed = !!(userRenamed && label);
+  // A renamed session comes back under its name: the session record's (a rename made in either
+  // host, the one the Sessions menu lists), else the rename saved with this tab. A record whose
+  // name was given up says so: the label and the renamed flag saved with a tab are stale.
+  const name = restoredSessionName(meta, userRenamed ? label : '');
+  const renamed = !!name;
   // The record exists before mountAssistant: the host hooks fire during mount.
-  const tab = { sessionId, viewport, toolbar, ctl: null, pill: null, label: renamed ? label : defaultLabel(), userRenamed: renamed, status: 'idle', brain: brain || meta?.brain || null };
+  const tab = { sessionId, viewport, toolbar, ctl: null, pill: null, label: renamed ? name : defaultLabel(), userRenamed: renamed, status: 'idle', brain: brain || meta?.brain || null };
   _tabs.push(tab);
   const host = {
     id: HOST_ID,
@@ -295,6 +299,16 @@ function mountTab({ sessionId, meta = null, brain = null, label = '', userRename
       renderPills();
       saveTabs();
     },
+    // A rename the panel could not save: the tab and its saved label go back to the record's name.
+    setName(text, renamed) {
+      const next = String(text || '').trim();
+      if (!next) return;
+      tab.label = next;
+      tab.userRenamed = !!renamed;
+      renderHeader();
+      renderPills();
+      saveTabs();
+    },
     setStatus(status) {
       tab.status = status || 'idle';
       if (tab.status === 'done' && isTabVisible(tab)) tab.status = 'idle';
@@ -311,7 +325,7 @@ function mountTab({ sessionId, meta = null, brain = null, label = '', userRename
     },
   };
   tab.ctl = mountAssistant(viewport, { sessionId, brain: tab.brain, host, session: meta });
-  if (tab.userRenamed) tab.ctl.setTitle(tab.label);
+  if (tab.userRenamed) tab.ctl.setTitle(tab.label, { restored: true });
   if (show) {
     switchTo(_tabs.length - 1);
     if (!_visible) setVisible(true);
@@ -324,7 +338,8 @@ function mountTab({ sessionId, meta = null, brain = null, label = '', userRename
   renderPills();
   saveTabs();
   if (prompt) setTimeout(() => { if (findTab(sessionId)) tab.ctl?.send(prompt); }, 50);
-  if (_pendingPath && tab === activeTab()) { const path = _pendingPath; _pendingPath = ''; tab.ctl.attachPath(path); }
+  // (Not while the saved tabs are coming back: the first of them is not the one that was showing.)
+  if (_pendingPaths.length && !restoring && tab === activeTab()) { const paths = _pendingPaths; _pendingPaths = []; for (const path of paths) tab.ctl.attachPath(path); }
   return tab;
 }
 
@@ -635,12 +650,14 @@ export async function initAssistantPanel() {
     if (!_visible) setVisible(true);
     tab.ctl?.attachImageDataUrl(dataUrl, 'whiteboard');
   });
-  on('assistant:attach-path', ({ path } = {}) => {
+  on('assistant:attach-path', (request = {}) => {
+    const { path } = request;
     if (!path || assistantBlocked()) return;
     const tab = activeTab();
     if (!_visible) setVisible(true);
     if (tab?.ctl) tab.ctl.attachPath(path);
-    else _pendingPath = String(path);
+    else _pendingPaths.push(String(path));
+    request.taken = true; // the sender says "sent" only of what was taken
   });
   // The server renamed a conversation (first prompt): refresh tooltips after the component applied it.
   on('sync:assistant:session-updated', (msg) => {
@@ -663,6 +680,7 @@ export async function initAssistantPanel() {
       label: entry.label || '',
       userRenamed: !!entry.userRenamed,
       show: false,
+      restoring: true,
     });
   }
   if (_tabs.length) {
@@ -670,6 +688,10 @@ export async function initAssistantPanel() {
     markActive();
     renderHeader();
     renderPills();
+    // Paths that were sent while the sessions were being asked about go to the one that is showing again.
+    const paths = _pendingPaths;
+    _pendingPaths = [];
+    for (const path of paths) activeTab()?.ctl?.attachPath(path);
   }
   saveTabs();
 }

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

@@ -231,6 +231,56 @@ export function modelShortName(model) {
   return tail.replace(/:\d+$/, '');
 }
 
+// ── Projects ────────────────────────────────────────────────────────────────
+
+/** A folder path without trailing separators ("/a/b/" is "/a/b"); the root stays itself. */
+function folderPath(path) {
+  const value = str(path);
+  return value.replace(/[\\/]+$/, '') || value;
+}
+
+/**
+ * What a working folder is called: its label among SynaBun's registered
+ * projects (GET /api/projects: [{ path, label }]), else the folder's own name;
+ * '' for none. The toolbar's Working project, the empty state's picker and the
+ * "Fix … in {project}" suggestion all read it, so they name it the same way.
+ */
+export function projectLabel(path, projects = []) {
+  const want = folderPath(path);
+  if (!want) return '';
+  const row = (Array.isArray(projects) ? projects : []).find(p => p && folderPath(p.path) === want);
+  return str(row?.label) || want.split(/[\\/]/).filter(Boolean).pop() || want;
+}
+
+const fillParams = (text, params) => (params ? String(text).replace(/\{(\w+)\}/g, (_, k) => (params[k] != null ? params[k] : `{${k}}`)) : String(text));
+
+/**
+ * The empty state's project picker: { chosen, key, label, title, aria }. With
+ * no project the brain works in the home directory and the picker asks
+ * "Choose a project"; with one it reads "Project  Synabun", the path in its
+ * tooltip. `tr(key, fallback, params)` translates.
+ */
+export function emptyProjectView(project, projects = [], tr = (_key, fallback, params) => fillParams(fallback, params)) {
+  const path = str(project);
+  const name = projectLabel(path, projects);
+  if (!name) {
+    return {
+      chosen: false,
+      key: '',
+      label: tr('assistant.empty.chooseProject', 'Choose a project'),
+      title: tr('assistant.brain.projectNoneTip', 'Working project: home directory'),
+      aria: tr('assistant.empty.projectAria', 'Choose a project (now: {project})', { project: tr('assistant.brain.projectNone', 'Home directory') }),
+    };
+  }
+  return {
+    chosen: true,
+    key: tr('assistant.empty.project', 'Project'),
+    label: name,
+    title: path,
+    aria: tr('assistant.empty.projectAria', 'Choose a project (now: {project})', { project: name === path ? name : `${name}, ${path}` }),
+  };
+}
+
 /** Does switching from `a` to `b` require a fresh server session (switch_brain)? */
 export function brainRequiresSwitch(a, b) {
   const x = normalizeBrain(a);
@@ -453,6 +503,22 @@ export function normalizeRouteMode(value, fallback = null) {
   return ROUTE_MODE_ALIASES[key] || fallback;
 }
 
+// Test density: how much testing SynaBun asks of dispatched workers (server: lib/assistant-test-density.js).
+// `null` means "server default" in a tab's own state; a missing or unknown value reads as the default level.
+export const TEST_DENSITIES = ['none', 'light', 'standard', 'thorough'];
+export const DEFAULT_TEST_DENSITY = 'light';
+
+/** A known level, else `fallback` (the default level; pass null to tell "not set" apart). */
+export function normalizeTestDensity(value, fallback = DEFAULT_TEST_DENSITY) {
+  const key = str(value).toLowerCase();
+  return TEST_DENSITIES.includes(key) ? key : fallback;
+}
+
+/** Bars of the composer's gauge that are filled at a level: none 0 · light 1 · standard 2 · thorough 3. */
+export function testDensityBars(level) {
+  return TEST_DENSITIES.indexOf(normalizeTestDensity(level));
+}
+
 const COMPUTER_ON = new Set(['on', 'true', '1', 'yes', 'enable', 'enabled']);
 const COMPUTER_OFF = new Set(['off', 'false', '0', 'no', 'disable', 'disabled']);
 
@@ -529,6 +595,121 @@ export function tabStorageKey(sessionId) {
   return `${KEYS.ASSISTANT_TAB_PREFIX}${sessionId}`;
 }
 
+/**
+ * The name the user gave a session, '' when they never renamed it. It lives on
+ * the server's session record (`title` + `userRenamed`, written by a rename in
+ * either host): the Sessions menu and a reopened tab read the same name, and a
+ * host's saved tab label is only its copy.
+ */
+export function userSessionTitle(meta) {
+  if (!meta || typeof meta !== 'object' || meta.userRenamed !== true) return '';
+  return str(meta.title);
+}
+
+/** What a tab is called until the user renames it (the server's DEFAULT_SESSION_TITLE). */
+export const DEFAULT_SESSION_TITLE = 'SynaBun';
+
+/**
+ * The title to write to the session record for a tab's name, null when there is
+ * nothing to write. `recordName` is userSessionTitle() of the record,
+ * `recordTitle` its title, `keepsRenames` whether the server marks renames
+ * (features.rename; one not restarted yet does not, and holds a name once its
+ * title says it), `defaultTitle` the default tab name as this locale shows it.
+ * The default name is no name: it is only written to take a rename back.
+ */
+export function renameToSave(name, { recordName = '', recordTitle = '', keepsRenames = false, defaultTitle = DEFAULT_SESSION_TITLE } = {}) {
+  const next = str(name);
+  if (!next) return null;
+  if (next === DEFAULT_SESSION_TITLE || next === str(defaultTitle)) return keepsRenames && str(recordName) ? DEFAULT_SESSION_TITLE : null;
+  return next === (keepsRenames ? str(recordName) : str(recordTitle)) ? null : next;
+}
+
+/**
+ * The name a host gives the tab it mounts for a session: the record's
+ * (userSessionTitle), else the label saved with the tab when the record says
+ * nothing about a name (a rename made before the record kept names). A record
+ * with `userRenamed: false` had its name given up: a saved label is stale.
+ */
+export function restoredSessionName(meta, savedLabel = '') {
+  return userSessionTitle(meta) || (sessionNameGivenUp(meta) ? '' : str(savedLabel));
+}
+
+/** The record says its name was taken back ("SynaBun" again): no saved label or renamed flag stands for it. */
+export function sessionNameGivenUp(meta) {
+  return !!meta && typeof meta === 'object' && meta.userRenamed === false;
+}
+
+/**
+ * Every rename on its way to a session record, one write at a time per session,
+ * so the name asked for last is the one the record ends with: after each answer
+ * the newest name is compared with what the record holds now, and what still
+ * differs (taking a rename back included) is written. One writer for the page,
+ * not one per tab: a write goes on after its tab closed, and a session list
+ * waits for `settled()`. `patch(sessionId, { title })` is the request.
+ *
+ * save(sessionId, name, opts): `recordName` / `recordTitle` / `keepsRenames` /
+ * `defaultTitle` are renameToSave()'s, as the caller knows the record (a write
+ * under way hears the record from its answer instead); `from` is the name the
+ * tab had before the first of them. `onSaved(session)` gets each answer,
+ * `onFailed({ name, back })` a write that did not get through: `name` was not
+ * saved, `back` is the name the record answers to (the last one it confirmed,
+ * else `from`). The latest call's callbacks are the ones used. The promise
+ * never rejects.
+ */
+export function createRenameWriter({ patch } = {}) {
+  const jobs = new Map(); // sessionId → { name, back, record, keepsRenames, defaultTitle, onSaved, onFailed, done }
+
+  const toWrite = (job) => renameToSave(job.name, { recordName: job.record.name, recordTitle: job.record.title, keepsRenames: job.keepsRenames, defaultTitle: job.defaultTitle });
+
+  async function run(sessionId, job) {
+    // The title of the last write the server answered. It may keep a name cut or tidied, which
+    // never equals the tab's: the same title is not sent twice in a row.
+    let written = null;
+    for (;;) {
+      const name = job.name;
+      const title = toWrite(job);
+      if (!title || title === written) break;
+      let session = null;
+      try { session = (await patch(sessionId, { title }))?.session || null; } catch {
+        jobs.delete(sessionId);
+        try { job.onFailed?.({ name: job.name, back: job.back }); } catch { /* the caller's */ }
+        return;
+      }
+      written = title;
+      job.back = name;
+      job.record = session?.title
+        ? { name: userSessionTitle(session), title: str(session.title) }
+        : { name: job.keepsRenames && title !== DEFAULT_SESSION_TITLE ? title : '', title };
+      try { job.onSaved?.(session); } catch { /* the caller's */ }
+    }
+    jobs.delete(sessionId);
+  }
+
+  function save(sessionId, name, { from = '', recordName = '', recordTitle = '', keepsRenames = false, defaultTitle = DEFAULT_SESSION_TITLE, onSaved = null, onFailed = null } = {}) {
+    const next = str(name);
+    if (!sessionId || !next) return Promise.resolve();
+    const waiting = jobs.get(sessionId);
+    if (waiting) {
+      // A write is under way: this name is the one compared with its answer.
+      Object.assign(waiting, { name: next, keepsRenames, defaultTitle, onSaved, onFailed });
+      return waiting.done;
+    }
+    const job = { name: next, back: str(from), record: { name: str(recordName), title: str(recordTitle) }, keepsRenames, defaultTitle, onSaved, onFailed, done: null };
+    if (!toWrite(job)) return Promise.resolve();
+    jobs.set(sessionId, job);
+    job.done = run(sessionId, job);
+    return job.done;
+  }
+
+  return {
+    save,
+    /** A rename of this session is on its way. */
+    pending: (sessionId) => jobs.has(sessionId),
+    /** Resolves once every rename that was on its way has its answer, whatever tab asked for it. */
+    settled: () => Promise.all([...jobs.values()].map((job) => job.done)).then(() => {}),
+  };
+}
+
 export function createTabState(sessionId, brain, extra = {}) {
   return {
     sessionId,
@@ -548,6 +729,7 @@ export function createTabState(sessionId, brain, extra = {}) {
     draft: '',
     routeMode: null,     // explicit per-session route mode; null = server default
     computerUse: null,   // explicit per-session computer use; null = server default
+    testDensity: null,   // explicit per-session test density; null = server default
     usageView: null,
     limit: null,         // the provider's usage limit notice (applyLimit); never persisted, the server re-sends it on attach
     ...extra,
@@ -568,12 +750,13 @@ export function serializeTabState(state) {
     costUsd: Number.isFinite(Number(state.costUsd)) ? Number(state.costUsd) : 0,
     routeMode: normalizeRouteMode(state.routeMode, null),
     computerUse: normalizeComputerMode(state.computerUse, null),
+    testDensity: normalizeTestDensity(state.testDensity, null),
     usageView: compactUsageView(state.usageView),
     updatedAt: Date.now(),
   };
 }
 
-/** Tolerant of older payloads: missing routeMode / computerUse read as null (server default). */
+/** Tolerant of older payloads: missing routeMode / computerUse / testDensity read as null (server default). */
 export function deserializeTabState(raw) {
   let data = raw;
   if (typeof raw === 'string') {
@@ -590,6 +773,7 @@ export function deserializeTabState(raw) {
     costUsd: Number.isFinite(Number(data.costUsd)) ? Number(data.costUsd) : 0,
     routeMode: normalizeRouteMode(data.routeMode, null),
     computerUse: normalizeComputerMode(data.computerUse, null),
+    testDensity: normalizeTestDensity(data.testDensity, null),
     usageView: compactUsageView(data.usageView),
   };
 }

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); }
+    /* "Choose a project": the toolbar's Working project field, centred under the lead (asst-brain-picker.js mountEmptyProject). An md capsule like the suggestions. */
+    .asst-empty-project { display: flex; justify-content: center; max-width: 100%; }
+    .asst-dd.asst-empty-project-btn { max-width: min(100%, 360px); }
+    .asst-empty-project-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; }
@@ -610,6 +618,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; }
@@ -1391,6 +1432,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); }
@@ -1546,6 +1589,109 @@ 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(800px, 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(0, 1fr) 208px 84px 128px 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; }
+    .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, 1.15fr) minmax(0, 1.55fr) minmax(0, .7fr) minmax(0, .9fr) 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 { 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 +1745,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 +1767,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 +1789,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-project-btn { flex: 1 1 auto; justify-content: flex-start; max-width: none; }
+      .asst-empty-project-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 +1802,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; }