synabun 1.3.0 → 2.0.0-beta

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

@@ -0,0 +1,309 @@
+// ── Context settings: the header cog and its popover ──
+// The cog (#cp-cog-btn in the panel header) opens a popover with what the old
+// context row showed and more: the context window and Compact, the connected
+// tools, the versions, the session. It shows the active tab, from
+// contextMenuModel(); this file only renders it, as elements and text.
+//
+// The popover is a child of <body>, fixed and placed from the cog's rectangle:
+// the panel's overflow cannot clip it, and a dragged, resized or docked panel is
+// all the same to it. It is built when it first opens, so nothing may assume its
+// elements exist: state lives in the tab (and in the monolith's _compactingUI),
+// and every render reads it again.
+
+import { cpCtx } from './cp-ctx.js';
+import { contextReading, contextMenuModel, isUnset } from './cp-context-model.js';
+
+const POP_ID = 'cp-context-popover';
+const LABEL = 'Context settings';
+const WIDTH = 300;
+const MARGIN = 8;   // kept clear of the viewport's edges
+const GAP = 6;      // between the cog and the popover
+
+let _pop = null;
+let _open = false;
+let _sig = '';          // what is rendered, so an unchanged model touches nothing
+let _timer = null;
+let _watch = null;
+let _tooltip = '';      // the cog's data-tooltip, taken off while the popover is open
+let _copiedUntil = 0;
+
+function cog() { return cpCtx?.panel()?.querySelector('#cp-cog-btn') || null; }
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+// One grammar for every section. A head: the title, and at most one action on
+// its right. Then rows of one height: a label on the left, one value on the
+// right edge. A value is text, a status (dot and word) or a text link; a missing
+// one is muted. Nothing sits beside a row or under the rows.
+
+function row(label, value, { tip = '', muted = false } = {}) {
+  const r = el('div', 'cp-ctxpop-row');
+  r.appendChild(el('span', 'cp-ctxpop-k', label));
+  const v = typeof value === 'string' ? el('span', `cp-ctxpop-v${muted ? ' cp-ctxpop-muted' : ''}`, value) : value;
+  if (tip) v.dataset.tooltip = tip;
+  r.appendChild(v);
+  return r;
+}
+
+// A [label, value, hover?] row of the model.
+function modelRow([label, value, tip]) {
+  return row(label, value, { tip, muted: isUnset(value) });
+}
+
+function action(className, label, act, name = '') {
+  const b = el('button', className, label);
+  b.type = 'button';
+  b.dataset.act = act;
+  if (name) b.setAttribute('aria-label', name);
+  return b;
+}
+
+function section(title, act = null) {
+  const s = el('section', 'cp-ctxpop-section');
+  const head = el('div', 'cp-ctxpop-head');
+  head.appendChild(el('h3', 'cp-ctxpop-title', title));
+  if (act) head.appendChild(act);
+  s.appendChild(head);
+  return s;
+}
+
+function build(m, { copied = false } = {}) {
+  const frag = document.createDocumentFragment();
+
+  // Compact says what it does, or why it cannot, on hover. A disabled button
+  // takes no hover in every engine, so its cell says it then.
+  const compact = action('cp-ctxpop-btn', m.compact.label, 'compact');
+  compact.id = 'cp-compact-btn';
+  compact.disabled = m.compact.disabled;
+  compact.dataset.tooltip = m.compact.hint;
+  compact.setAttribute('aria-description', m.compact.hint);
+  const compactCell = el('span', 'cp-ctxpop-act');
+  if (m.compact.disabled) compactCell.dataset.tooltip = m.compact.hint;
+  compactCell.appendChild(compact);
+
+  const ctx = section('Context window', compactCell);
+  const bar = el('div', 'cp-ctxpop-bar');
+  bar.setAttribute('role', 'progressbar');
+  bar.setAttribute('aria-label', 'Context used');
+  bar.setAttribute('aria-valuemin', '0');
+  bar.setAttribute('aria-valuemax', '100');
+  if (m.context.pct != null) bar.setAttribute('aria-valuenow', String(Math.round(m.context.pct)));
+  bar.setAttribute('aria-valuetext', m.context.headline);
+  const fill = el('div', `cp-ctxpop-fill${m.pressure ? ` cp-ctxpop-${m.pressure}` : ''}`);
+  fill.style.width = m.context.pct == null ? '0%' : `${m.context.pct}%`;
+  bar.appendChild(fill);
+  ctx.appendChild(bar);
+  // Under the bar, flanking it: used / window on the left, the share on the right.
+  const usage = el('div', 'cp-ctxpop-usage');
+  usage.appendChild(el('span', `cp-ctxpop-used${isUnset(m.context.usage) ? ' cp-ctxpop-muted' : ''}`, m.context.usage));
+  if (m.context.share) usage.appendChild(el('span', 'cp-ctxpop-share', m.context.share));
+  if (m.context.tip) usage.dataset.tooltip = m.context.tip;
+  ctx.appendChild(usage);
+  for (const r of m.context.rows) ctx.appendChild(modelRow(r));
+  ctx.appendChild(row('Breakdown', action('cp-ctxpop-link', 'Show', 'breakdown', 'Show breakdown')));
+  frag.appendChild(ctx);
+
+  const tools = section('Connected tools', action('cp-ctxpop-link', 'Manage', 'mcp', 'Manage servers'));
+  for (const s of m.tools.servers) {
+    const status = el('span', 'cp-ctxpop-v cp-ctxpop-status');
+    status.appendChild(el('span', `cp-ctxpop-dot${s.tone ? ` cp-ctxpop-dot-${s.tone}` : ''}`));
+    status.appendChild(el('span', '', s.detail ? `${s.word} · ${s.detail}` : s.word));
+    const line = row(s.name, status);
+    line.classList.add('cp-ctxpop-row-server');
+    tools.appendChild(line);
+  }
+  if (m.tools.note) tools.appendChild(row('MCP servers', m.tools.note, { muted: true }));
+  for (const r of m.tools.totals) tools.appendChild(modelRow(r));
+  frag.appendChild(tools);
+
+  const versions = section('Versions');
+  for (const r of m.versions) versions.appendChild(modelRow(r));
+  frag.appendChild(versions);
+
+  const session = section('Session', action('cp-ctxpop-link', 'Settings', 'session', 'Session settings'));
+  if (m.session.id) {
+    // The whole value copies the id, and says so in its place.
+    const copy = action(`cp-ctxpop-v cp-ctxpop-copy${copied ? ' cp-ctxpop-copied' : ''}`, copied ? 'Copied' : m.session.id, 'copy-session', 'Copy session ID');
+    copy.dataset.value = m.session.id;
+    session.appendChild(row('Session ID', copy, { tip: `${m.session.id}\nClick to copy` }));
+  } else {
+    session.appendChild(row('Session ID', 'Not started', { muted: true }));
+  }
+  for (const r of m.session.rows) session.appendChild(modelRow(r));
+  if (m.session.hasBackground) session.appendChild(row('Tasks', action('cp-ctxpop-link', 'Show', 'tasks', 'Show tasks')));
+  frag.appendChild(session);
+
+  return frag;
+}
+
+// A label or a value its ellipsis cut says the whole of it on hover.
+function tipClipped() {
+  for (const cell of _pop.querySelectorAll('.cp-ctxpop-k, .cp-ctxpop-v')) {
+    if (!cell.dataset.tooltip && cell.scrollWidth > cell.clientWidth) cell.dataset.tooltip = cell.textContent;
+  }
+}
+
+// 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.
+function place() {
+  const $cog = cog();
+  if (!_open || !_pop || !$cog) return;
+  const r = $cog.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const width = Math.max(0, Math.min(WIDTH, vw - MARGIN * 2));
+  _pop.style.width = `${width}px`;
+  const below = vh - r.bottom - GAP - MARGIN;
+  const above = r.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 top = up
+    ? Math.max(MARGIN, r.top - GAP - height)
+    : Math.max(MARGIN, Math.min(r.bottom + GAP, vh - 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.
+  tipClipped();
+}
+
+// The cog's only decoration: a dot from 80% of the window, stronger from 90%.
+function paintCog(reading) {
+  const $cog = cog();
+  const dot = $cog?.querySelector('.cp-cog-dot');
+  if (!dot) return;
+  dot.hidden = !reading.pressure;
+  dot.className = `cp-cog-dot${reading.pressure ? ` cp-cog-dot-${reading.pressure}` : ''}`;
+  $cog.setAttribute('aria-label', reading.pressure ? `${LABEL}, context ${Math.round(reading.pct)}% used` : LABEL);
+}
+
+/** Paints the cog for `tab` and, while the popover is open, its content. Other tabs are ignored. */
+export function syncContextMenu(tab) {
+  if (!cpCtx || !tab || tab !== cpCtx.activeTab()) return;
+  const showing = _open && !!_pop;
+  let data;
+  try { data = cpCtx.contextMenuData(tab, { full: showing }); } catch { return; }
+  paintCog(contextReading(data));
+  if (!showing) return;
+  const copied = Date.now() < _copiedUntil;
+  const model = contextMenuModel(data);
+  const sig = `${JSON.stringify(model)}|${copied}`;
+  if (sig === _sig) return;
+  _sig = sig;
+  const focused = _pop.contains(document.activeElement) ? document.activeElement.dataset?.act || '' : null;
+  _pop.replaceChildren(build(model, { copied }));
+  // A re-render replaces the control that had the focus: it goes to the same
+  // control, or to the popover when that one is now disabled.
+  if (focused) (_pop.querySelector(`[data-act="${focused}"]:not(:disabled)`) || _pop).focus({ preventScroll: true });
+  place();
+}
+
+function onClick(e) {
+  const btn = e.target.closest?.('[data-act]');
+  if (!btn || btn.disabled) return;
+  const tab = cpCtx.activeTab();
+  if (!tab) return;
+  const act = btn.dataset.act;
+  if (act === 'copy-session') {
+    const id = btn.dataset.value || '';
+    if (!id || !navigator.clipboard?.writeText) return;
+    navigator.clipboard.writeText(id).then(() => {
+      _copiedUntil = Date.now() + 1400;
+      syncContextMenu(cpCtx.activeTab());
+      setTimeout(() => syncContextMenu(cpCtx.activeTab()), 1450);
+    }).catch(() => {});
+    return;
+  }
+  // Compact answers in the popover (its button says so); the others answer in
+  // the message list, which the popover would cover.
+  if (act !== 'compact') closeContextMenu();
+  try { cpCtx.contextMenuAction(tab, act); } catch {}
+  syncContextMenu(tab);
+}
+
+function onOutside(e) {
+  if (_pop?.contains(e.target) || cog()?.contains(e.target)) return;
+  closeContextMenu();
+}
+
+function onKey(e) {
+  if (e.key !== 'Escape') return;
+  // The popover takes this Escape: it must not also stop a turn or close a menu.
+  e.preventDefault();
+  e.stopPropagation();
+  closeContextMenu({ focus: true });
+}
+
+export function isContextMenuOpen() { return _open; }
+
+export function openContextMenu() {
+  const $panel = cpCtx?.panel();
+  const $cog = cog();
+  const tab = cpCtx?.activeTab();
+  if (_open || !$panel || !$cog || !tab) return;
+  if (!_pop) {
+    _pop = el('div', 'cp-ctxpop');
+    _pop.id = POP_ID;
+    _pop.tabIndex = -1;
+    _pop.setAttribute('role', 'dialog');
+    _pop.setAttribute('aria-label', LABEL);
+    _pop.addEventListener('click', onClick);
+  }
+  _open = true;
+  _sig = '';
+  // The session menu stays open on a click inside the header: one menu at a time.
+  $panel.querySelector('#cp-session-menu')?.classList.remove('open');
+  // Above the panel wherever the layout put it (docked, floating, focused).
+  _pop.style.zIndex = String((parseInt(getComputedStyle($panel).zIndex, 10) || 200) + 1);
+  document.body.appendChild(_pop);
+  $cog.setAttribute('aria-expanded', 'true');
+  // Its hover label would sit on the popover.
+  _tooltip = $cog.getAttribute('data-tooltip') || _tooltip;
+  $cog.removeAttribute('data-tooltip');
+  syncContextMenu(tab);
+  place();
+  document.addEventListener('pointerdown', onOutside, true);
+  document.addEventListener('keydown', onKey, true);
+  window.addEventListener('resize', place);
+  if (typeof ResizeObserver === 'function') {
+    _watch = new ResizeObserver(place);
+    _watch.observe($panel);
+  }
+  // Most changes arrive through syncContextMenu(); this catches the rest
+  // (a mode painted elsewhere, a session id, a cost).
+  _timer = setInterval(() => syncContextMenu(cpCtx.activeTab()), 1000);
+  _pop.focus({ preventScroll: true });
+}
+
+/** Closes the popover. `focus` puts the focus back on the cog (Escape). */
+export function closeContextMenu({ focus = false } = {}) {
+  if (!_open) return;
+  _open = false;
+  clearInterval(_timer);
+  _timer = null;
+  _watch?.disconnect();
+  _watch = null;
+  document.removeEventListener('pointerdown', onOutside, true);
+  document.removeEventListener('keydown', onKey, true);
+  window.removeEventListener('resize', place);
+  _pop?.remove();
+  const $cog = cog();
+  if (!$cog) return;
+  $cog.setAttribute('aria-expanded', 'false');
+  if (_tooltip) $cog.setAttribute('data-tooltip', _tooltip);
+  if (focus) $cog.focus();
+}
+
+/** Wires the cog. Called once the panel exists. */
+export function initContextMenu() {
+  const $cog = cog();
+  if (!$cog || $cog._wired) return;
+  $cog._wired = true;
+  $cog.addEventListener('click', () => { if (_open) closeContextMenu(); else openContextMenu(); });
+}

package/neural-interface/public/shared/cp/cp-context-model.js

@@ -0,0 +1,157 @@
+// ── Context settings popover: what it shows ──
+// Pure (no DOM, no panel state): the monolith hands over a tab's plain values
+// (_contextMenuData) and cp-context-menu.js renders what comes back. Nothing
+// here is a guess: what the session has not reported is said to be missing,
+// and a context window is shown only when something named it.
+
+import { mcpRows } from './cp-usage-model.js';
+
+export const NOT_REPORTED = 'Not reported yet';
+const DASH = '—';
+
+/** A value that stands for one the session has not given: the popover shows it muted. */
+export const isUnset = (value) => value === NOT_REPORTED || value === DASH;
+
+// Share of the window from which the header cog carries a dot, and its stronger form.
+export const PRESSURE_HIGH = 80;
+export const PRESSURE_CRITICAL = 90;
+
+const WINDOW_SOURCES = { reported: 'reported by Claude Code', catalog: 'from the model list', id: 'from the model id' };
+const MCP_WORDS = { connected: 'Connected', pending: 'Connecting', 'needs-auth': 'Needs sign-in', failed: 'Failed', disabled: 'Disabled', unknown: 'Unknown' };
+
+const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
+
+/** 216431 → "216k", 1000000 → "1M". Always formats a number. */
+export function fmtTokens(n) {
+  const v = Number(n) || 0;
+  if (v >= 1_000_000) {
+    const m = v / 1_000_000;
+    return (Number.isInteger(m) ? m.toFixed(0) : m.toFixed(1)) + 'M';
+  }
+  if (v >= 1000) return Math.round(v / 1000) + 'k';
+  return String(v);
+}
+
+/** The name a server has inside a tool name: "claude.ai Docs" → "claude_ai_Docs". */
+export function mcpServerKey(name) {
+  return String(name || '').replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
+/** Tools per MCP server, from the "mcp__<server>__<tool>" names system/init lists. */
+export function mcpToolCounts(tools) {
+  const counts = {};
+  for (const name of Array.isArray(tools) ? tools : []) {
+    const m = /^mcp__(.+?)__/.exec(String(name));
+    if (m) counts[m[1]] = (counts[m[1]] || 0) + 1;
+  }
+  return counts;
+}
+
+/**
+ * The context in use against its window. `source` says what named the window
+ * (contextWindowSource); without one there is no window, no share and no pressure.
+ * Counts can come back from a stored snapshot: they are numbers before they are
+ * added up.
+ */
+export function contextReading({ usage = null, window = 0, source = '' } = {}) {
+  const u = usage || {};
+  const cacheRead = Number(u.cacheRead) || 0;
+  const cacheWrite = Number(u.cacheWrite) || 0;
+  const used = (Number(u.inputTokens) || 0) + cacheRead + cacheWrite;
+  const size = source ? Number(window) || 0 : 0;
+  const pct = used > 0 && size > 0 ? Math.min(100, (used / size) * 100) : null;
+  const pressure = pct == null ? '' : pct >= PRESSURE_CRITICAL ? 'critical' : pct >= PRESSURE_HIGH ? 'high' : '';
+  return { used, size, source: size ? source : '', pct, pressure, cacheRead, cacheWrite, output: Number(u.outputTokens) || 0 };
+}
+
+function compactState({ compacting = false, running = false, connected = false } = {}) {
+  if (compacting) return { label: 'Compacting…', disabled: true, hint: 'Summarising the conversation.' };
+  if (!connected) return { label: 'Compact', disabled: true, hint: 'Not connected to a session.' };
+  if (running) return { label: 'Compact', disabled: true, hint: 'Available when Claude finishes this turn.' };
+  return { label: 'Compact', disabled: false, hint: 'Summarises the conversation to free up context.' };
+}
+
+function serverRows(servers, toolCounts) {
+  const list = Array.isArray(servers) ? servers : [];
+  const counts = toolCounts && typeof toolCounts === 'object' ? toolCounts : {};
+  return mcpRows(list, { controls: false }).map((row) => {
+    const raw = list.find(s => s?.name === row.name) || {};
+    // The server's own count when the bridge sent one, else the tools init listed under its name.
+    const n = raw.toolCount != null ? Number(raw.toolCount) : Array.isArray(raw.tools) ? raw.tools.length : Number(counts[mcpServerKey(row.name)]);
+    return {
+      name: row.name,
+      tone: ['ok', 'warn', 'err'].includes(row.tone) ? row.tone : '',
+      word: MCP_WORDS[row.status] || String(row.status),
+      detail: Number.isFinite(n) && n >= 0 ? plural(n, 'tool') : '',
+    };
+  });
+}
+
+/**
+ * Everything the popover shows, as text: sections of [label, value] rows; a
+ * third item is what the value says on hover. `d` is _contextMenuData(tab, { full: true }).
+ */
+export function contextMenuModel(d = {}) {
+  const r = contextReading(d);
+  const init = d.init && typeof d.init === 'object' ? d.init : null;
+  const count = (v) => (Array.isArray(v) ? v.length : Number(v) || 0);
+
+  // The line under the bar: used / window on one side, the share on the other,
+  // what named the window on hover. `headline` is the same reading as one string.
+  const windowTip = r.size ? `Window size ${WINDOW_SOURCES[r.source] || r.source}` : '';
+  const usage = r.used === 0
+    ? NOT_REPORTED
+    : r.pct == null
+      ? `${fmtTokens(r.used)} tokens used`
+      : `${fmtTokens(r.used)} / ${fmtTokens(r.size)} tokens`;
+  const share = r.pct == null ? '' : `${Math.round(r.pct)}%`;
+  const headline = share ? `${usage} (${share})` : usage;
+
+  const contextRows = [['Model', d.modelLabel || init?.model || DASH]];
+  // The usage line carries the window; it has a row of its own only while that line cannot.
+  if (r.pct == null) contextRows.push(r.size ? ['Window', `${fmtTokens(r.size)} tokens`, windowTip] : ['Window', NOT_REPORTED]);
+  if (r.used > 0) {
+    if (r.cacheRead > 0 || r.cacheWrite > 0) {
+      const cache = ['Cache', [r.cacheRead > 0 ? `${fmtTokens(r.cacheRead)} read` : '', r.cacheWrite > 0 ? `${fmtTokens(r.cacheWrite)} written` : ''].filter(Boolean).join(' · ')];
+      if (r.cacheRead > 0) cache.push(`${Math.round((r.cacheRead / r.used) * 100)}% of the context read from cache`);
+      contextRows.push(cache);
+    }
+    if (r.output > 0) contextRows.push(['Output', `${fmtTokens(r.output)} tokens`]);
+  }
+
+  const servers = serverRows(d.mcpServers, d.toolCounts);
+  const totals = [];
+  if (count(init?.tools) > 0) totals.push(['Tools', String(count(init.tools))]);
+  if (count(init?.skills) > 0) totals.push(['Skills', String(count(init.skills))]);
+  if (count(d.slashCommands) > 0) totals.push(['Slash commands', String(count(d.slashCommands))]);
+  if (count(init?.agents) > 0) totals.push(['Agents', String(count(init.agents))]);
+  if (count(init?.plugins) > 0) totals.push(['Plugins', String(count(init.plugins))]);
+  // Without servers the section still has its row: "MCP servers" and this.
+  const toolsNote = servers.length ? '' : init ? 'None in this session' : NOT_REPORTED;
+
+  const sessionRowsOut = [
+    ['Folder', d.folder || DASH],
+    ['Permission mode', d.mode || DASH],
+  ];
+  if (d.account) sessionRowsOut.push(['Account', String(d.account)]);
+  const flags = Array.isArray(d.flags) ? d.flags.filter(Boolean) : [];
+  if (flags.length) sessionRowsOut.push(['Settings', flags.join(' · ')]);
+  if (d.limit) sessionRowsOut.push(['Usage limit', String(d.limit)]);
+  const tasks = count(d.backgroundTasks);
+  const scheduled = count(d.scheduled);
+  if (tasks || scheduled) sessionRowsOut.push(['Background', [tasks ? plural(tasks, 'task') : '', scheduled ? `${scheduled} scheduled` : ''].filter(Boolean).join(' · ')]);
+  if (d.sessionId) sessionRowsOut.push(['Turns', String(count(d.turns))]);
+  if (Number(d.cost) > 0) sessionRowsOut.push(['Cost', `$${Number(d.cost).toFixed(2)}`]);
+
+  return {
+    pressure: r.pressure,
+    context: { pct: r.pct == null ? null : Math.round(r.pct * 10) / 10, headline, usage, share, tip: share ? windowTip : '', rows: contextRows },
+    compact: compactState(d),
+    tools: { servers, totals, note: toolsNote },
+    versions: [
+      ['Claude Agent SDK', d.sdkVersion ? String(d.sdkVersion) : NOT_REPORTED],
+      ['Claude Code', init?.cliVersion ? String(init.cliVersion) : NOT_REPORTED],
+    ],
+    session: { id: d.sessionId ? String(d.sessionId) : '', rows: sessionRowsOut, hasBackground: !!(tasks || scheduled) },
+  };
+}

package/neural-interface/public/shared/cp/cp-context-window.js

@@ -0,0 +1,80 @@
+// ── Context window for the Claude sidepanel ──
+// Pure helpers (no DOM, no panel state) so the node suite can import them.
+// The window the context reading divides by comes from, in order of authority:
+//   1. result.modelUsage — what the CLI reports for the main loop;
+//   2. the selected model's catalog entry (/api/claude/models);
+//   3. the context in use — a window smaller than it is provably stale.
+
+// Claude Code runs a model at 1M only with the `[1m]` marker on its id
+// ("claude-opus-5-5[1m]"); everything else runs at 200K.
+export const ONE_M_CONTEXT = 1_000_000;
+export const DEFAULT_CONTEXT = 200_000;
+
+// "claude-opus-5-5[1m]" → "claude-opus-5-5"; "claude-haiku-4-5-20251001" → "claude-haiku-4-5".
+export function modelBase(id) {
+  return String(id || '').trim().replace(/\[[^\]]*\]$/, '').replace(/-\d{8}$/, '');
+}
+
+// The catalog entry a selector id spawns as. Unknown and empty ids fall back to the
+// CLI default, exactly as the dropdown resolves them (_resolveModelValue).
+export function catalogModel(models, id) {
+  const list = Array.isArray(models) ? models : [];
+  return list.find(m => m?.id === id) || list.find(m => m?.tier === 'default') || list[0] || null;
+}
+
+// Window of a selector id. Before the catalog loads, the id itself still says which
+// window was picked: the `[1m]` marker, or a legacy "<id>:<window>" composite.
+export function catalogContextWindow(models, id) {
+  const known = Number(catalogModel(models, id)?.contextWindow) || 0;
+  if (known > 0) return known;
+  const raw = String(id || '');
+  if (/\[1m\]$/i.test(raw)) return ONE_M_CONTEXT;
+  const composite = parseInt(raw.split(':')[1], 10);
+  return composite > 0 ? composite : DEFAULT_CONTEXT;
+}
+
+// The main loop's window from a result event. modelUsage covers every model the query
+// used — Task subagents (Explore runs on Haiku), compaction, helpers — cumulatively,
+// and a resumed session restores it from the transcript's cost-state in whatever
+// order that was saved (Haiku first is common), so its first key is not the main
+// loop. Keys carry the CLI's `[1m]` marker; the main loop's API model does not, so
+// match on the base id. One model can appear at two windows (a 1M main loop with
+// 200K subagents on the same model, or a variant switch): the selected variant wins
+// when it is the model that ran, otherwise the larger one.
+// Returns 0 when nothing identifies the main loop — callers keep what they had.
+export function mainLoopContextWindow(modelUsage, mainModel, selected = null) {
+  const want = modelBase(mainModel);
+  if (!want || !modelUsage || typeof modelUsage !== 'object') return 0;
+  const windows = [];
+  for (const [key, usage] of Object.entries(modelUsage)) {
+    const cw = Number(usage?.contextWindow) || 0;
+    if (cw > 0 && (modelBase(key) === want || modelBase(usage?.canonicalModel) === want)) windows.push(cw);
+  }
+  if (!windows.length) return 0;
+  const picked = modelBase(selected?.resolvedModel || selected?.id) === want
+    ? Number(selected?.contextWindow) || 0
+    : 0;
+  return windows.includes(picked) ? picked : Math.max(...windows);
+}
+
+// What the gauge divides by: the CLI's report for this session, else the selected
+// model's window. Context above the window cannot happen — the CLI compacts first —
+// so a smaller window is stale: take the smallest known window that holds it.
+export function gaugeContextWindow({ reported = 0, selected = 0, used = 0, models = [] } = {}) {
+  const window = reported > 0 ? reported : (selected > 0 ? selected : DEFAULT_CONTEXT);
+  if (used <= window) return window;
+  const known = (Array.isArray(models) ? models : []).map(m => Number(m?.contextWindow) || 0);
+  const fits = [...known, ONE_M_CONTEXT].filter(cw => cw >= used).sort((a, b) => a - b);
+  return fits[0] || window;
+}
+
+// What named a tab's window, so the context settings popover shows one only when
+// something did: 'reported' (the CLI, result.modelUsage), 'catalog' (the selected
+// model's entry, resolved as the dropdown resolves it), 'id' (the `[1m]` marker
+// before the catalog loads), or '' — then the popover says it is not known yet
+// rather than showing DEFAULT_CONTEXT.
+export function contextWindowSource({ reported = 0, models = [], modelId = '' } = {}) {
+  if (Number(reported) > 0) return 'reported';
+  if (Number(catalogModel(models, modelId)?.contextWindow) > 0) return 'catalog';
+  return /\[1m\]$/i.test(String(modelId || '')) ? 'id' : '';
+}

package/neural-interface/public/shared/cp/cp-ctx.js

@@ -0,0 +1,11 @@
+// ── Shared context for cp/ feature modules ──
+// The ui-claude-panel.js monolith owns all state; cp/ modules receive these
+// references once at init (mirrors the cdx-render setRenderContext pattern
+// without touching any cdx code). Every function the modules need from the
+// monolith is injected here — cp/ modules never import the monolith directly.
+
+export let cpCtx = null;
+
+export function setCpCtx(ctx) {
+  cpCtx = ctx;
+}