synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/assistant/asst-tool-kinds.js

@@ -13,16 +13,43 @@
 
 export const KIND_IDS = Object.freeze(['shell', 'read', 'edit', 'search', 'web', 'subagent', 'plan', 'memory', 'runs', 'computer', 'think', 'mcp']);
 
-// Tool names after lowercasing and stripping `mcp__<server>__` / `<server>_`.
+// Tool names after lowercasing and stripping `mcp__<server>__` / `<server>_`. Antigravity's own tools keep their
+// snake_case names (run_command, read_file, write_to_file, grep_search, search_web …).
 const KIND_TOOLS = {
-  shell: ['bash', 'bashoutput', 'killshell', 'shell', 'exec_command', 'commandexecution'],
-  read: ['read', 'notebookread', 'view'],
-  edit: ['edit', 'multiedit', 'write', 'notebookedit', 'patch', 'apply_patch', 'filechange'],
-  search: ['grep', 'glob', 'ls', 'list', 'codesearch', 'toolsearch'],
-  web: ['webfetch', 'websearch'],
-  subagent: ['task', 'agent', 'collabtoolcall', 'taskstop'],
+  shell: ['bash', 'bashoutput', 'killshell', 'shell', 'exec_command', 'commandexecution', 'run_command', 'send_command_input', 'command_status', 'read_terminal', 'shell_exec'],
+  read: ['read', 'notebookread', 'view', 'read_file', 'view_file', 'view_file_outline', 'view_code_item', 'view_content_chunk', 'read_resource', 'read_notebook'],
+  edit: ['edit', 'multiedit', 'write', 'notebookedit', 'patch', 'apply_patch', 'filechange', 'write_to_file', 'write_file', 'create_file', 'replace_file_content', 'multi_replace_file_content', 'edit_file', 'edit_notebook', 'delete_file', 'move_file'],
+  search: ['grep', 'glob', 'ls', 'list', 'codesearch', 'toolsearch', 'grep_search', 'find_by_name', 'list_dir', 'list_directory', 'codebase_search', 'code_search'],
+  web: ['webfetch', 'websearch', 'search_web', 'read_url_content', 'open_browser_url', 'read_browser_page', 'browser_subagent'],
+  subagent: ['task', 'agent', 'collabtoolcall', 'taskstop', 'invoke_subagent'],
   plan: ['todowrite', 'todoread', 'update_plan'],
 };
+
+// Antigravity names its arguments in its own words: each alias is filled from the first of them that is set.
+const INPUT_ALIASES = [
+  ['command', ['CommandLine']],
+  ['cwd', ['Cwd']],
+  ['file_path', ['AbsolutePath', 'TargetFile', 'Path']],
+  ['path', ['DirectoryPath', 'SearchPath', 'SearchDirectory']],
+  ['query', ['Query']],
+  ['url', ['Url']],
+];
+
+/**
+ * A tool call's input with the names the rack reads (command, file_path, path, query, url) filled from
+ * Antigravity's own (CommandLine, AbsolutePath, TargetFile, DirectoryPath, Query, Url …). A name that is set
+ * already is kept; anything else is left as it came. Not an object: {}.
+ */
+export function canonicalToolInput(input) {
+  const i = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
+  let out = null;
+  for (const [alias, sources] of INPUT_ALIASES) {
+    if (i[alias] !== undefined && i[alias] !== null && i[alias] !== '') continue;
+    const value = sources.map(key => i[key]).find(v => typeof v === 'string' && v);
+    if (value) { out = out || { ...i }; out[alias] = value; }
+  }
+  return out || i;
+}
 // SynaBun's own tools: only when the call is SynaBun's (or carries no server).
 const MEMORY_TOOLS = ['recall', 'remember', 'reflect', 'forget', 'restore', 'memories', 'sync', 'category'];
 const COMPUTER_TOOLS = ['computer', 'computer_apps', 'computer_ax', 'computer_status'];
@@ -181,11 +208,18 @@ export function capitalize(text) {
   return s ? s[0].toLocaleUpperCase() + s.slice(1) : s;
 }
 
+/** A letter or a digit: what a cut must keep some of. */
+const CONTENT = /[\p{L}\p{N}]/u;
+/** The "…" a text ends on (a clipped query, `"…"`), with the quote or bracket after it. */
+const END_CUT = /…([^\p{L}\p{N}…]*)$/u;
+
 /**
  * Cut `text` in the middle so it fits `max` chars, keeping at least `minTail`
  * tail chars and cutting at token boundaries (spaces, slashes) when one is near.
- * One cut, shorter than the text: never a head and a tail that overlap, and a
- * token the text already shortened ("…/name") that the cut meets goes with it.
+ * One cut, shorter than the text: never a head and a tail that overlap. What it
+ * shows has one "…": the cut takes in every "…" the text already has (a token
+ * the summary shortened, "…/name"; its clipped end), so the head comes from
+ * before the first of them and the tail from after the last.
  */
 export function middleEllipsis(text, max = 96, minTail = 24) {
   const s = str(text);
@@ -194,28 +228,133 @@ export function middleEllipsis(text, max = 96, minTail = 24) {
   // A cut that keeps this much removes nothing: under a small `max` the budget rises to minTail + 6,
   // past a short text's end, and the head and the tail overlapped ("$ np…npm test" of "$ npm test").
   if (s.length <= budget + 1) return s;
-  let tailStart = s.length - minTail;
-  // Pull the tail back to the token boundary before it, within a third of the budget.
-  const floor = s.length - Math.max(minTail, Math.floor(budget / 3) + minTail);
-  for (let i = tailStart; i > floor && i > 0; i -= 1) {
+  const first = s.indexOf('…');
+  const last = s.lastIndexOf('…');
+  const headEnd = first < 0 ? s.length : first;
+  const tailFrom = last < 0 ? 0 : last + 1;
+  // "…words…" (a thought's tail that ends on its own "…"): nothing to keep on either side of the cuts (headEllipsis).
+  if (first >= 0 && !CONTENT.test(s.slice(0, headEnd)) && !CONTENT.test(s.slice(tailFrom))) return headEllipsis(s, max);
+  let tailStart = Math.max(tailFrom, s.length - minTail);
+  // A head that stops at the text's first "…" leaves the rest of the budget to the tail.
+  if (headEnd < budget - (s.length - tailStart)) tailStart = Math.max(tailFrom, s.length - (budget - headEnd));
+  // Pull the tail back to the token boundary before it, within a third of the budget and short of all of it
+  // (a char of head, or the cut runs one past `max`).
+  const floor = s.length - Math.min(budget - 1, Math.max(minTail, Math.floor(budget / 3) + minTail));
+  let atBoundary = false;
+  for (let i = tailStart; i > floor && i > tailFrom && i > 0; i -= 1) {
     const c = s[i - 1];
-    if (c === ' ') { tailStart = i; break; }
-    if (c === '/') { tailStart = i - 1; break; }
+    if (c === ' ') { tailStart = i; atBoundary = true; break; }
+    if (c === '/') { tailStart = i - 1; atBoundary = true; break; }
+  }
+  // None near enough behind a tail that opens inside a word: it starts at the next boundary instead, when
+  // that keeps half of it ("$ node --test…b.mjs c.mjs", never "…r.mjs b.mjs c.mjs").
+  if (!atBoundary && tailStart > tailFrom) {
+    const rest = s.slice(tailStart);
+    const next = rest.search(/[\s/]/);
+    if (next > 0 && next <= rest.length / 2 && CONTENT.test(rest.slice(next))) tailStart += rest[next] === '/' ? next : next + 1;
   }
   const tail = s.slice(tailStart);
-  let head = s.slice(0, Math.max(1, budget - tail.length));
+  let head = s.slice(0, Math.min(headEnd, Math.max(1, budget - tail.length)));
   const cut = Math.max(head.lastIndexOf(' '), head.lastIndexOf('/'));
   if (cut >= head.length * 0.6) head = head.slice(0, head[cut] === '/' ? cut + 1 : cut);
   return joinCut(head, tail);
 }
 
-/** `head…tail`, one "…": a shortened token's own "…" beside the cut is dropped ("…/…/x.js" read as two cuts). */
+/**
+ * "…ender-events.browser.mjs": the last `max` chars, from a token boundary when one is near. One "…":
+ * a "…" the text already has in that tail goes with the cut ("…--test …/x.js" reads "…/x.js"). A text
+ * that ends on its own "…" (a clipped query) has no tail to keep: its head stays (middleEllipsis); one
+ * that starts and ends on one ("…words…") loses the end's.
+ */
+export function headEllipsis(text, max) {
+  let s = str(text);
+  if (s.length <= max) return s;
+  if (END_CUT.test(s)) {
+    if (CONTENT.test(s.slice(0, s.indexOf('…')))) return middleEllipsis(s, max, Math.min(8, max - 1));
+    s = s.replace(/…[^\p{L}\p{N}]*$/u, m => m.replace(/…/g, ''));
+    if (s.length <= max) return s;
+  }
+  let tail = s.slice(s.length - Math.max(8, max - 1));
+  const own = tail.lastIndexOf('…'); // followed by a word: the text no longer ends on one
+  if (own >= 0) return joinCut('', tail.slice(own));
+  const cut = tail.search(/[\s/]/);
+  // A fragment of a word before the first boundary goes too, when that keeps half the tail ("…c.mjs", never "…ker-stage.mjs c.mjs").
+  const inWord = !/[\s/]/.test(s[s.length - tail.length - 1] ?? ' ');
+  if (inWord && cut > 0 && cut <= tail.length / 2 && CONTENT.test(tail.slice(cut))) tail = tail.slice(tail[cut] === '/' ? cut : cut + 1);
+  return joinCut('', tail);
+}
+
+/** `head…tail`, one "…": a shortened token's own "…" beside the cut is dropped ("…/…/x.js" read as two cuts), and so is the space next to it. */
 export function joinCut(head, tail) {
   const h = str(head).trimEnd().replace(/\/?…\/?$/, '').trimEnd();
-  const t = str(tail).trimStart().replace(/^\/?…/, '');
+  const t = str(tail).trimStart().replace(/^\/?…/, '').trimStart();
   return `${h}…${t}`;
 }
 
+// A URL or a path in a subject wraps at its separators, never mid-word (wrapRuns).
+const URL_START = /^[a-z][a-z0-9+.-]*:\/\//i;
+const HOST_OR_FILE = /^[\p{L}\p{N}_~@%+…-]+(?:\.[\p{L}\p{N}_~@%+…-]+)+(?::\d+(?:[-:]\d+)?)?$/u; // a file may end on its lines, ":131-191"
+const TOKEN_LEAD = /^[("'“‘[<{]+/;
+const TOKEN_TRAIL = /[)"'”’\]>},;:!?.]+$/;
+const PATH_MIN = 12; // a shorter token wraps whole, as a word does
+const LONG_PIECE = 20; // a longer segment also breaks inside it
+const MIN_PIECE = 3; // "~/", "…/", "./" stay with the piece after them
+
+function isPathToken(tok) {
+  if (tok.length < PATH_MIN || !CONTENT.test(tok)) return false;
+  return URL_START.test(tok) || /[/\\]/.test(tok) || HOST_OR_FILE.test(tok);
+}
+
+/**
+ * A URL or path as the pieces a line may break between: after "/" (a run of
+ * slashes, "https://", stays whole); in a segment over LONG_PIECE chars, also
+ * before "?" or "#" and after "-", "_", "=" or "&" when a letter follows, and
+ * before "." only in a piece still that long ("queue.browser.mjs" keeps its
+ * extension). A piece under MIN_PIECE chars, and a scheme ("https://"), joins
+ * its neighbour. The pieces join to `tok`.
+ */
+export function pathPieces(tok) {
+  const s = str(tok);
+  const long = (p) => p.replace(/[/\\]+$/, '').length > LONG_PIECE;
+  const pieces = [];
+  for (const part of s.match(/[^/\\]*[/\\]+|[^/\\]+$/g) || [s]) {
+    if (!long(part)) { pieces.push(part); continue; }
+    for (const p of part.split(/(?=[?#])|(?<=[-_=&])(?=\p{L})/u).filter(Boolean)) pieces.push(...(long(p) ? p.split(/(?=\.)/).filter(Boolean) : [p]));
+  }
+  const leans = (p) => p.length < MIN_PIECE || /^[a-z][a-z0-9+.-]*:\/+$/i.test(p);
+  const out = [];
+  for (const piece of pieces) {
+    if (out.length && (leans(out[out.length - 1]) || piece.length < MIN_PIECE)) out[out.length - 1] += piece;
+    else out.push(piece);
+  }
+  return out;
+}
+
+/**
+ * Where a bubble subject may wrap: its URL and path tokens (a scheme, a slash,
+ * or a dotted host or file name, PATH_MIN chars or more; quotes, brackets and
+ * the sentence's punctuation around them left out) as `{ text, pieces }` that
+ * break only between their pieces (pathPieces); the rest as `{ text }`, which
+ * wraps as any text does. The runs' texts join to `text`.
+ */
+export function wrapRuns(text) {
+  const s = str(text);
+  const runs = [];
+  let at = 0;
+  for (const m of s.matchAll(/\S+/g)) {
+    const lead = m[0].match(TOKEN_LEAD)?.[0] || '';
+    const rest = m[0].slice(lead.length);
+    const core = rest.slice(0, rest.length - (rest.match(TOKEN_TRAIL)?.[0].length || 0));
+    if (!isPathToken(core)) continue;
+    const start = m.index + lead.length;
+    if (start > at) runs.push({ text: s.slice(at, start) });
+    runs.push({ text: core, pieces: pathPieces(core) });
+    at = start + core.length;
+  }
+  if (at < s.length) runs.push({ text: s.slice(at) });
+  return runs;
+}
+
 /** A path's last two folders and its basename: `shared/assistant/asst-render.js`. */
 export function splitPath(path) {
   const clean = str(path).replace(/\\/g, '/').replace(/\/+$/, '');
@@ -274,14 +413,39 @@ export function commandCore(cmd) {
   return s;
 }
 
+/** A path token's file name with what wraps it: `--config=` or a quote before, `;` or a quote after it. */
+function fileNameOf(tok) {
+  const lead = tok.match(/^(?:[^/\\=]*=)?["'(]*/)[0];
+  const rest = tok.slice(lead.length);
+  const trail = rest.match(/[)"'\];,]*$/)[0];
+  const path = rest.slice(0, rest.length - trail.length);
+  const base = path.replace(/[/\\]+$/, '').split(/[/\\]/).pop();
+  return base ? { lead, base: `${base}${/[/\\]$/.test(path) ? '/' : ''}`, trail } : null;
+}
+
 /**
  * The command a bubble says: its core (commandCore), the home directory shown
  * as ~/, whitespace collapsed and tokens over 28 chars cut in the middle.
+ * `oneCut` (the stage bubble): one "…" at most, however many paths it shortens.
+ * The first path over 28 chars spends it on its dropped folders; a later one
+ * keeps its file name, unmarked ("…/a.mjs b.mjs c.mjs"); every other token
+ * (a bare file name, a flag) stays whole. A "…" of the command's own counts.
  */
-export function summarizeCommand(cmd) {
+export function summarizeCommand(cmd, { oneCut = false } = {}) {
   let s = commandCore(cmd);
   s = s.replace(HOME_RE, '$1~').replace(/(^|[\s"'=:(])\$HOME(?=\/|$|[\s"'])/g, '$1~');
-  return s.split(' ').map(tok => shortenToken(tok, 28)).join(' ');
+  if (!oneCut) return s.split(' ').map(tok => shortenToken(tok, 28)).join(' ');
+  let spent = s.includes('…');
+  return s.split(' ').map((tok) => {
+    if (tok.length <= 28 || !/[/\\]/.test(tok)) return tok;
+    const file = fileNameOf(tok);
+    if (!file) return tok;
+    if (spent) return `${file.lead}${file.base}${file.trail}`;
+    spent = true;
+    const short = shortenToken(tok, 28);
+    if (short.includes('…/')) return short;
+    return `${file.lead}…${tok.includes('/') ? '/' : '\\'}${file.base}${file.trail}`; // never a file name cut in its middle
+  }).join(' ');
 }
 
 /** The command a shell call ran: `command` or `cmd`, as a string (Codex sends argv arrays). */
@@ -596,6 +760,7 @@ export function urlSubject(url) {
 /**
  * The bubble for one call: { verb, text, detail?, mono, segments?, meta[], caption, copy, tag }.
  * `detail` (computer calls) is what the call's own row shows when it differs from the bubble's subject.
+ * `stage` (commands) is the stage bubble's subject: `text` with one "…" at most (summarizeCommand `oneCut`).
  * `call`: { name, kind, input, result, state, memories?, app? }.
  * `ctx`: { t, runLabel(call), runState(call), describeComputer(input, name) }.
  */
@@ -614,6 +779,7 @@ export function sayCall(call, ctx = {}) {
       out.verb = 'run';
       out.text = `$ ${summarizeCommand(cmd)}`;
       out.full = `$ ${str(cmd).replace(/\s+/g, ' ').trim()}`; // the literal line: the title and the opened bubble
+      if (cmd.trim()) out.stage = `$ ${summarizeCommand(cmd, { oneCut: true })}`; // the stage bubble's: one "…" at most
       out.mono = true;
       out.copy = cmd;
       out.caption = firstString(input.description);
@@ -765,7 +931,7 @@ export function sayCall(call, ctx = {}) {
     case 'think': {
       out.verb = 'think';
       const text = str(call?.text).replace(/\s+/g, ' ').trim();
-      out.text = text ? (text.length > 80 ? `…${text.slice(-79)}` : text) : '…';
+      out.text = text ? headEllipsis(text, 80) : '…'; // the tail: one "…", a "…" of the thought's own in it goes with the cut
       out.muted = true;
       break;
     }
@@ -807,7 +973,8 @@ export function targetKey(call) {
 
 /**
  * The subject parallel calls of one kind share: "a.js, b.js +1" for reads and
- * edits, "$ npm test +1" for commands; "server.js ×2" for a re-read.
+ * edits, "$ npm test +1" for commands (one "…" at most, as the stage says a
+ * command); "server.js ×2" for a re-read.
  * `calls`: the calls running side by side (the bubble's own call last);
  * `all`: every call of the row (for re-reads). Empty when one subject says it.
  */
@@ -825,7 +992,7 @@ export function groupSubject(kind, calls, all = calls) {
   if (list.length >= 2) {
     if (kind === 'shell') {
       const cmd = commandOf(list[list.length - 1].input);
-      return cmd ? `$ ${summarizeCommand(cmd)} +${list.length - 1}` : '';
+      return cmd ? `$ ${summarizeCommand(cmd, { oneCut: true })} +${list.length - 1}` : '';
     }
     const names = [...new Set(list.map(nameOf).filter(Boolean))];
     if (names.length >= 2) return `${names[0]}, ${names[1]}${names.length > 2 ? ` +${names.length - 2}` : ''}`;

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

@@ -13,6 +13,7 @@ const REASONS = {
   'codex-no-records': ['reason.codex-no-records', 'Codex ended without final usage records.'],
   'codex-rollout-missing': ['reason.codex-rollout-missing', "Codex usage records were missing; the turn's own totals were used."],
   'opencode-not-reconciled': ['reason.opencode-not-reconciled', "OpenCode's final message check did not finish."],
+  'antigravity-total-mismatch': ['reason.antigravity-total-mismatch', "Antigravity's token total did not match its token classes; the classes were counted as reported."],
   interrupted: ['reason.interrupted', 'A turn was interrupted; the call it cut off is counted from the stream.'],
   'no-result': ['reason.no-result', 'A run ended mid-turn; its last calls are counted from the stream.'],
 };
@@ -34,7 +35,7 @@ const node = (tag, cls, value) => {
 };
 const valid = (n) => Number.isSafeInteger(n) && n >= 0;
 const safe = (n) => (valid(n) ? n : 0);
-const providerName = (id) => ['claude-code', 'codex', 'opencode'].includes(id) ? getProviderMeta(id).label : id === 'jev' ? 'Jev' : String(id || '');
+const providerName = (id) => ['claude-code', 'codex', 'opencode'].includes(id) ? getProviderMeta(id).label : id === 'antigravity' ? 'Antigravity' : id === 'jev' ? 'Jev' : String(id || '');
 const defaultTr = (_, fallback, params) => String(fallback).replace(/\{(\w+)\}/g, (_m, key) => params?.[key] ?? `{${key}}`);
 export const formatExactTokens = (n) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(valid(n) ? n : 0);
 export function formatCompactTokens(n) {

package/neural-interface/public/shared/automation-context.js

@@ -59,14 +59,17 @@ export function claudeAutomationSupportsOneMillion(model) {
   return !/(haiku|claude-3|opus-4-[0-5](?:-|$)|opus-4-\d{8}|opus-4$)/.test(id);
 }
 
+// `size` is the window as a short label ("272K"), '' when unknown: a page that words the choice in
+// another language puts it in its own sentence (the Schedules window).
 export function automationContextOptions(profile, modelId, models = []) {
   const id = normalizeAutomationSelection(profile, modelId).model;
   const model = models.find((entry) => entry?.id === id);
   const baseSize = contextSizeLabel(model?.contextWindow);
-  const options = [{ id: 'default', label: baseSize ? `Default (${baseSize})` : 'Provider default' }];
+  const options = [{ id: 'default', label: baseSize ? `Default (${baseSize})` : 'Provider default', size: baseSize }];
   if (profile === 'codex' && model?.supportsExtendedContext === true
     && Number(model.maxContextWindow) > Number(model.contextWindow)) {
-    options.push({ id: 'extended', label: `Extended (${contextSizeLabel(model.maxContextWindow)})` });
+    const size = contextSizeLabel(model.maxContextWindow);
+    options.push({ id: 'extended', label: `Extended (${size})`, size });
   } else if (profile === 'claude-code'
     && (models.some((entry) => entry?.id === `${id}[1m]`) || claudeAutomationSupportsOneMillion(model))) {
     options.push({ id: '1m', label: '1M' });

package/neural-interface/public/shared/cc-dropdown.js

@@ -25,6 +25,8 @@
 // closes and moves on, the choice as it was. An open menu is placed `fixed` against its trigger,
 // so a scrolling pane never cuts it off, and kept inside the box that clips it (a window).
 
+import { placementArea } from './app-frame.js';
+
 const ARROW = '<svg class="cc-dropdown-arrow" viewBox="0 0 24 24" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>';
 const GAP = 4;          // between the trigger and its menu
 const EDGE = 6;         // the least room left between a menu and the edge of what clips it
@@ -94,13 +96,39 @@ export function matchIndex(options, typed, from = -1) {
   return -1;
 }
 
+/** Multi-choice values in menu order. Disabled selected rows are mandatory. */
+export function multipleValues(options) {
+  const exclusive = options.find(o => o.selected && o.exclusive && !o.scope);
+  if (exclusive) return [String(exclusive.value ?? '')];
+  const scoped = new Set(options.filter(o => o.selected && o.exclusive && o.scope).map(o => o.scope));
+  return options.filter(o => o.selected && (!scoped.has(o.scope) || o.exclusive)).map(o => String(o.value ?? ''));
+}
+
+/** Exclusive rows may apply globally (inheritance) or within a named section. */
+export function toggleMultiple(options, values, index) {
+  const option = options[index];
+  if (!option || option.disabled) return [...values];
+  if (option.exclusive && !option.scope) return [String(option.value ?? '')];
+  const selected = new Set(values);
+  for (const row of options) {
+    if ((row.exclusive && !row.scope) || (option.exclusive && row.scope === option.scope) || (!option.exclusive && row.exclusive && row.scope === option.scope)) selected.delete(String(row.value ?? ''));
+  }
+  const value = String(option.value ?? '');
+  if (option.exclusive) selected.add(value);
+  else if (selected.has(value)) selected.delete(value); else selected.add(value);
+  return multipleValues(options.map(row => ({ ...row, selected: selected.has(String(row.value ?? '')) || (!option.exclusive && row.disabled && row.selected) })));
+}
+
+const multipleText = (options, values) => options.filter(o => values.includes(String(o.value ?? '')))
+  .map(o => o.label).join(', ');
+
 // ── Markup ──
 
 function optionHTML(id, option, index, chosen) {
   const label = String(option.label ?? '');
-  const active = index === chosen;
+  const active = Array.isArray(chosen) ? (chosen.includes(String(option.value ?? '')) || (option.automatic && option.selected)) : index === chosen;
   return `<div class="cc-dropdown-item${active ? ' active' : ''}" id="${esc(id)}-opt-${index}" role="option" aria-selected="${active}"`
-    + `${option.disabled ? ' aria-disabled="true"' : ''} data-value="${esc(option.value ?? '')}" data-index="${index}" title="${esc(label)}">${esc(label)}</div>`;
+    + `${option.disabled ? ' aria-disabled="true"' : ''} data-value="${esc(option.value ?? '')}" data-index="${index}"${option.exclusive ? ' data-exclusive="true"' : ''}${option.scope ? ` data-scope="${esc(option.scope)}"` : ''}${option.automatic ? ' data-automatic="true"' : ''} data-label="${esc(label)}" title="${esc(option.caption || label)}">${Array.isArray(chosen) ? '<span class="cc-dropdown-check" aria-hidden="true"></span>' : ''}<span>${esc(label)}${option.caption ? `<small class="cc-dropdown-caption">${esc(option.caption)}</small>` : ''}</span></div>`;
 }
 
 /** The menu's options (and headings) for `entries`, the `chosen` index marked. */
@@ -120,17 +148,17 @@ export function menuHTML(id, entries, chosen = chosenIndex(flatOptions(entries))
  * Name it with `labelledBy` (the id of its visible label) or `label`. `classes` and `attrs` go on
  * the `.cc-dropdown`.
  */
-export function dropdownHTML(id, entries, { classes = '', labelledBy = '', label = '', attrs = '', inputAttrs = '', disabled = false } = {}) {
+export function dropdownHTML(id, entries, { classes = '', labelledBy = '', label = '', attrs = '', inputAttrs = '', disabled = false, multiple = false, summary = '' } = {}) {
   const options = flatOptions(entries);
-  const chosen = chosenIndex(options);
+  const chosen = multiple ? multipleValues(options) : chosenIndex(options);
   const current = chosen >= 0 ? options[chosen] : null;
   const name = labelledBy ? ` aria-labelledby="${esc(labelledBy)}"` : label ? ` aria-label="${esc(label)}"` : '';
-  const text = String(current?.label ?? '');
-  return `<input type="hidden" id="${esc(id)}" value="${esc(current?.value ?? '')}"${disabled ? ' disabled' : ''}${inputAttrs ? ` ${inputAttrs}` : ''}>`
-    + `<div class="cc-dropdown${classes ? ` ${classes}` : ''}${disabled ? ' disabled' : ''}" data-for="${esc(id)}"${attrs ? ` ${attrs}` : ''}>`
+  const text = multiple ? (summary || multipleText(options, chosen)) : String(current?.label ?? '');
+  return `<input type="hidden" id="${esc(id)}" value="${esc(multiple ? chosen.join(',') : current?.value ?? '')}"${disabled ? ' disabled' : ''}${inputAttrs ? ` ${inputAttrs}` : ''}>`
+    + `<div class="cc-dropdown${classes ? ` ${classes}` : ''}${disabled ? ' disabled' : ''}" data-for="${esc(id)}"${multiple ? ' data-multiple="true"' : ''}${attrs ? ` ${attrs}` : ''}>`
     + `<button type="button" class="cc-dropdown-trigger" id="${esc(id)}-trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${esc(id)}-menu"${name}${disabled ? ' disabled' : ''}>`
     + `<span class="cc-dropdown-value" title="${esc(text)}">${esc(text)}</span>${ARROW}</button>`
-    + `<div class="cc-dropdown-menu" id="${esc(id)}-menu" role="listbox"${name} tabindex="-1">${menuHTML(id, entries, chosen)}</div>`
+    + `<div class="cc-dropdown-menu" id="${esc(id)}-menu" role="listbox"${multiple ? ' aria-multiselectable="true"' : ''}${name} tabindex="-1">${menuHTML(id, entries, chosen)}</div>`
     + '</div>';
 }
 
@@ -143,7 +171,7 @@ const partsOf = (dd) => ({
   input: dd.dataset.for ? document.getElementById(dd.dataset.for) : null,
 });
 const itemsOf = (dd) => [...(partsOf(dd).menu?.querySelectorAll('.cc-dropdown-item') || [])];
-const optionsOf = (items) => items.map(el => ({ value: el.dataset.value ?? '', label: el.textContent, disabled: el.getAttribute('aria-disabled') === 'true' }));
+const optionsOf = (items) => items.map(el => ({ value: el.dataset.value ?? '', label: el.dataset.label ?? el.textContent, disabled: el.getAttribute('aria-disabled') === 'true', exclusive: el.dataset.exclusive === 'true', scope: el.dataset.scope || undefined, selected: el.classList.contains('active') }));
 const highlightedOf = (items) => items.findIndex(el => el.classList.contains('highlight'));
 const chosenOf = (items) => items.findIndex(el => el.classList.contains('active'));
 const isOpen = (dd) => !!dd?.classList.contains('open');
@@ -194,6 +222,21 @@ function showChosen(dd, index) {
   }
 }
 
+function showMultiple(dd, values) {
+  const { label, input } = partsOf(dd);
+  const items = itemsOf(dd);
+  items.forEach(el => {
+    const active = values.includes(el.dataset.value ?? '') || el.dataset.automatic === 'true';
+    el.classList.toggle('active', active);
+    el.setAttribute('aria-selected', String(active));
+  });
+  if (input) input.value = values.join(',');
+  if (label) {
+    label.textContent = multipleText(optionsOf(items), values);
+    label.title = label.textContent;
+  }
+}
+
 function highlight(dd, index) {
   const { trigger, menu } = partsOf(dd);
   const items = itemsOf(dd);
@@ -227,7 +270,9 @@ function place(dd) {
   Object.assign(style, { position: 'fixed', left: '0px', top: '0px', right: 'auto', bottom: 'auto', width: 'auto', maxHeight: 'none', minWidth: '0px', maxWidth: 'none' });
   const origin = menu.getBoundingClientRect(); // where the containing block's (0, 0) is on screen
   const t = trigger.getBoundingClientRect();
-  let room = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+  // The app frame for a trigger inside it (app-frame.js), else the window; then whatever clips the menu
+  const area = placementArea(t.left + t.width / 2, t.top + t.height / 2);
+  let room = { left: area.left, top: area.top, right: area.right, bottom: area.bottom };
   const box = fixedContainer(dd);
   if (box) {
     const cs = getComputedStyle(box);
@@ -268,8 +313,12 @@ function open(dd, index = null) {
   if (!trigger || trigger.disabled || dd.classList.contains('disabled')) return;
   for (const other of document.querySelectorAll('.cc-dropdown.open')) if (other !== dd) close(other);
   ensureAria(dd);
+  dd._ccBefore = partsOf(dd).input?.value;
+  dd._ccBeforeLabel = partsOf(dd).label?.textContent;
+  dd._ccBeforeMenu = partsOf(dd).menu?.innerHTML;
   dd.classList.add('open');
   trigger.setAttribute('aria-expanded', 'true');
+  partsOf(dd).input?.dispatchEvent(new Event('cc-dropdown-open', { bubbles: true }));
   if (document.activeElement !== trigger) trigger.focus({ preventScroll: true });
   place(dd);
   const items = itemsOf(dd);
@@ -278,8 +327,14 @@ function open(dd, index = null) {
   highlight(dd, index ?? (chosen >= 0 && !options[chosen].disabled ? chosen : edgeIndex(options, 'first')));
 }
 
-function close(dd, { focus = false } = {}) {
-  const { trigger, menu } = partsOf(dd);
+function close(dd, { focus = false, cancel = false } = {}) {
+  const { trigger, menu, input, label } = partsOf(dd);
+  const changed = isOpen(dd) && dd.dataset.multiple === 'true' && input && input.value !== dd._ccBefore;
+  if (cancel && changed) {
+    if (menu && dd._ccBeforeMenu != null) menu.innerHTML = dd._ccBeforeMenu;
+    showMultiple(dd, dd._ccBefore === '' ? [''] : dd._ccBefore.split(','));
+    if (label) { label.textContent = dd._ccBeforeLabel; label.title = label.textContent; }
+  }
   dd.classList.remove('open', 'drop-up');
   trigger?.setAttribute('aria-expanded', 'false');
   trigger?.removeAttribute('aria-activedescendant');
@@ -287,6 +342,10 @@ function close(dd, { focus = false } = {}) {
   menu?.removeAttribute('style');
   dd._ccPlacedAt = null;
   if (focus && trigger?.isConnected) trigger.focus({ preventScroll: true });
+  if (changed && !cancel) {
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+  }
 }
 
 /** The user's choice: shown, the menu closed, the focus on the trigger, then `input` and `change` when it changed. */
@@ -295,6 +354,12 @@ function choose(dd, index) {
   const item = items[index];
   const { input } = partsOf(dd);
   if (!item || item.getAttribute('aria-disabled') === 'true') { close(dd, { focus: true }); return; }
+  if (dd.dataset.multiple === 'true') {
+    showMultiple(dd, toggleMultiple(optionsOf(items), items.filter(el => el.classList.contains('active')).map(el => el.dataset.value), index));
+    input?.dispatchEvent(new Event('cc-dropdown-draft', { bubbles: true }));
+    highlight(dd, index);
+    return;
+  }
   const changed = !!input && input.value !== (item.dataset.value ?? '');
   showChosen(dd, index);
   close(dd, { focus: true });
@@ -315,20 +380,25 @@ export function setDropdownItems(input, entries) {
   const wasOpen = isOpen(dd);
   const before = wasOpen ? itemsOf(dd)[highlightedOf(itemsOf(dd))]?.dataset.value : undefined;
   const options = flatOptions(entries);
-  const chosen = chosenIndex(options);
+  const multiple = dd.dataset.multiple === 'true';
+  const chosen = multiple ? multipleValues(options) : chosenIndex(options);
   menu.innerHTML = menuHTML(input.id, entries, chosen);
-  showChosen(dd, chosen);
+  if (multiple) showMultiple(dd, chosen); else showChosen(dd, chosen);
   if (!wasOpen) return;
   place(dd);
   const items = itemsOf(dd);
   const again = before === undefined ? -1 : items.findIndex(el => el.dataset.value === before);
-  highlight(dd, again >= 0 ? again : chosen);
+  highlight(dd, again >= 0 ? again : chosenOf(items));
 }
 
 /** `select.value = …`: the first choice with that value, or none (the value is then ''). No event. */
 export function setDropdownValue(input, value) {
   const dd = dropdownOf(input);
   if (!dd) { if (input) input.value = value ?? ''; return; }
+  if (dd.dataset.multiple === 'true') {
+    showMultiple(dd, Array.isArray(value) ? value.map(String) : String(value ?? '').split(','));
+    return;
+  }
   showChosen(dd, itemsOf(dd).findIndex(el => el.dataset.value === String(value ?? '')));
 }
 
@@ -337,16 +407,16 @@ export function setDropdownDisabled(input, disabled) {
   const dd = dropdownOf(input);
   if (input) input.disabled = !!disabled;
   if (!dd) return;
-  if (disabled && isOpen(dd)) close(dd);
+  if (disabled && isOpen(dd)) close(dd, { cancel: true });
   dd.classList.toggle('disabled', !!disabled);
   const { trigger } = partsOf(dd);
   if (trigger) trigger.disabled = !!disabled;
 }
 
 /** Closes every open dropdown under `root`; true when one was open. `focus` puts the focus back on its trigger. */
-export function closeDropdowns(root = document, { focus = false } = {}) {
+export function closeDropdowns(root = document, { focus = false, cancel = false } = {}) {
   const open = [...root.querySelectorAll('.cc-dropdown.open')];
-  for (const dd of open) close(dd, { focus });
+  for (const dd of open) close(dd, { focus, cancel });
   return open.length > 0;
 }
 
@@ -446,7 +516,7 @@ export function wireDropdowns(root, { signal } = {}) {
       case 'Escape':
         e.preventDefault();
         e.stopPropagation();
-        close(dd, { focus: true });
+        close(dd, { focus: true, cancel: true });
         break;
       case 'Tab':
         close(dd); // the focus moves on as usual; the choice stays as it was

package/neural-interface/public/shared/cdx/cdx-context-menu.js

@@ -164,6 +164,7 @@ function build(m, { copied = false } = {}) {
  *   opts.onManage()    opens the MCP servers; without it there is no "Manage"
  *   opts.onSettings()  opens Codex settings; without it there is no "Settings"
  *   opts.onAccount()   opens the account menu; without it there is no Account row
+ *   opts.bounds()      the area the popover stays in ({ left, top, right, bottom }: the app frame); the window without it
  * Returns { element, open(), close({ focus }), isOpen(), sync(), destroy() }.
  */
 export function mountContextMenu(actionsEl, panelEl, opts = {}) {
@@ -215,23 +216,23 @@ export function mountContextMenu(actionsEl, panelEl, opts = {}) {
   }
 
   // Below the cog, its right edge on the cog's; above it when there is more room
-  // there; always inside the viewport, scrolling inside when it is taller.
+  // there; always inside the app frame, scrolling inside when it is taller.
   function place() {
     if (!open || !pop) return;
     const r = cog.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const width = Math.max(0, Math.min(WIDTH, vw - MARGIN * 2));
+    // Inside the area the panel names (the app frame), else the window
+    const f = opts.bounds?.() || { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth };
+    const width = Math.max(0, Math.min(WIDTH, f.width - MARGIN * 2));
     pop.style.width = `${width}px`;
-    const below = vh - r.bottom - GAP - MARGIN;
-    const above = r.top - GAP - MARGIN;
+    const below = f.bottom - r.bottom - GAP - MARGIN;
+    const above = r.top - f.top - GAP - MARGIN;
     const up = below < 220 && above > below;
     pop.style.maxHeight = `${Math.max(120, up ? above : below)}px`;
     const height = pop.offsetHeight;
-    const left = Math.max(MARGIN, Math.min(r.right - width, vw - width - MARGIN));
+    const left = Math.max(f.left + MARGIN, Math.min(r.right - width, f.right - width - MARGIN));
     const top = up
-      ? Math.max(MARGIN, r.top - GAP - height)
-      : Math.max(MARGIN, Math.min(r.bottom + GAP, vh - MARGIN - height));
+      ? Math.max(f.top + MARGIN, r.top - GAP - height)
+      : Math.max(f.top + MARGIN, Math.min(r.bottom + GAP, f.bottom - MARGIN - height));
     pop.style.left = `${Math.round(left)}px`;
     pop.style.top = `${Math.round(top)}px`;
     // Once it has its width: only now is a cut value known.

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

@@ -0,0 +1,16 @@
+let translate = null;
+export function setCodexTranslator(fn) { translate = typeof fn === 'function' ? fn : null; }
+
+// Detached panels/tests can render before the locale bundle is ready.
+export function cxpText(key, english, params) {
+  const path = `codexPanel.${key}`;
+  const value = translate?.(path, params) || path;
+  if (value !== path) return value;
+  return english.replace(/\{(\w+)\}/g, (_, name) => params?.[name] ?? `{${name}}`);
+}
+
+export function cxpSessionLabel(label) {
+  if (label === 'New session') return cxpText('newSession', 'New session');
+  if (label === 'Saved session') return cxpText('savedSession', 'Saved session');
+  return label;
+}