synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/app-frame.js

@@ -0,0 +1,192 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — App frame
+// The inset rounded card the workspace sits in (styles.css "APP FRAME"). Outside it is the chrome: the title bar,
+// the two explorers and a gutter of their tone. Inside it is everything else: the 3D and 2D graphs, every floating
+// window and panel, the terminal, menus, tooltips and popovers. Modals and full-window backdrops still cover the
+// whole window.
+//
+// One source of geometry: the CSS variables of :root (--navbar-height, --explorer-width, --file-explorer-width and
+// --frame-gap, which is 0 on a page without the frame). frameRect() is the rect every clamp uses instead of 0,
+// innerWidth, innerHeight or --navbar-height. The top half of this file is DOM-free (unit-tested).
+// ═══════════════════════════════════════════
+
+/** The class on <html> of a page that draws the frame (html-shell.js). */
+export const FRAMED_CLASS = 'app-framed';
+
+const num = (value) => {
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+};
+
+/**
+ * The frame's rect in viewport pixels from the window's size and the chrome around it: the navbar's height, the
+ * open explorers' width and the gutter. A frame the window is too small for collapses to a zero-size rect at its
+ * top-left corner instead of turning inside out.
+ */
+export function computeFrameRect({ viewportWidth = 0, viewportHeight = 0, navbarHeight = 0, sidebarWidth = 0, gap = 0 } = {}) {
+  const g = Math.max(0, num(gap));
+  const left = Math.max(0, num(sidebarWidth)) + g;
+  const top = Math.max(0, num(navbarHeight)) + g;
+  const right = Math.max(left, num(viewportWidth) - g);
+  const bottom = Math.max(top, num(viewportHeight) - g);
+  return { left, top, right, bottom, width: right - left, height: bottom - top, gap: g };
+}
+
+/** The area a menu, tooltip or popover for a point is kept in: `frame` when the point is inside it, else null (the
+ *  window: the bar and the explorers are outside the frame, and what opens from them stays by them). */
+export function boundsForPoint(frame, x, y) {
+  if (!frame || !Number.isFinite(x) || !Number.isFinite(y)) return null;
+  return x >= frame.left && x <= frame.right && y >= frame.top && y <= frame.bottom ? frame : null;
+}
+
+/** A rect `margin` pixels inside another (never inverted). */
+export function insetRect(rect, margin = 0) {
+  const m = Math.max(0, num(margin));
+  const left = rect.left + m, top = rect.top + m;
+  const right = Math.max(left, rect.right - m), bottom = Math.max(top, rect.bottom - m);
+  return { ...rect, left, top, right, bottom, width: right - left, height: bottom - top };
+}
+
+/**
+ * Where a box of `width` × `height` at (x, y) goes to stay inside `bounds`. A box larger than the bounds keeps its
+ * top-left corner inside them (its header stays reachable), the same rule the old window clamps followed.
+ */
+export function clampBox(x, y, width, height, bounds) {
+  return {
+    x: Math.max(bounds.left, Math.min(num(x), bounds.right - Math.max(0, num(width)))),
+    y: Math.max(bounds.top, Math.min(num(y), bounds.bottom - Math.max(0, num(height)))),
+  };
+}
+
+/**
+ * Where a box goes that must keep only `keep` pixels on screen (the floating terminals): its left edge may run
+ * past the frame's left side and its right side past the frame's right, but its top never above the frame's top
+ * (the header stays reachable).
+ */
+export function clampBoxLoose(x, y, width, height, bounds, keep = 80) {
+  const k = Math.max(0, num(keep));
+  return {
+    x: Math.max(bounds.left + k - Math.max(0, num(width)), Math.min(num(x), bounds.right - k)),
+    y: Math.max(bounds.top, Math.min(num(y), bounds.bottom - k)),
+  };
+}
+
+// ── Page side ──
+
+let _cacheKey = '';
+let _cacheRect = null;
+
+const isFramed = (el) => !!el?.classList?.contains?.(FRAMED_CLASS);
+
+function inlineKey(el, win) {
+  const s = el.style;
+  return [
+    isFramed(el) ? 1 : 0,
+    s.getPropertyValue('--navbar-height'),
+    s.getPropertyValue('--explorer-width'),
+    s.getPropertyValue('--file-explorer-width'),
+    s.getPropertyValue('--frame-gap'),
+    win.innerWidth,
+    win.innerHeight,
+  ].join('|');
+}
+
+/**
+ * The frame's rect now, in viewport pixels. Cheap to call per pointer event: the computed style is read only when
+ * the window's size or one of the inline variables it depends on changed since the last call. A page without the
+ * frame (a detached session window, onboarding) has no bar or explorers around its content: the whole window.
+ */
+export function frameRect(win = typeof window !== 'undefined' ? window : null) {
+  const whole = () => computeFrameRect({ viewportWidth: win?.innerWidth || 0, viewportHeight: win?.innerHeight || 0 });
+  const el = win?.document?.documentElement;
+  if (!el || !isFramed(el) || typeof win.getComputedStyle !== 'function') return whole();
+  try {
+    const key = inlineKey(el, win);
+    if (key === _cacheKey && _cacheRect) return _cacheRect;
+    const cs = win.getComputedStyle(el);
+    const navbar = cs.getPropertyValue('--navbar-height');
+    _cacheRect = computeFrameRect({
+      viewportWidth: win.innerWidth,
+      viewportHeight: win.innerHeight,
+      navbarHeight: navbar.trim() ? num(navbar) : 48,
+      sidebarWidth: num(cs.getPropertyValue('--explorer-width')) + num(cs.getPropertyValue('--file-explorer-width')),
+      gap: num(cs.getPropertyValue('--frame-gap')),
+    });
+    _cacheKey = key;
+    return _cacheRect;
+  } catch {
+    return whole();
+  }
+}
+
+/** Keep a box inside the frame (inset by `margin`): `{ x, y }` for its top-left corner. */
+export function clampToFrame(x, y, width, height, margin = 0) {
+  return clampBox(x, y, width, height, insetRect(frameRect(), margin));
+}
+
+/** The area a window of `width` × `height` is kept in: the frame when it fits there, else the whole window less
+ *  8px (a modal taller than the frame still shows whole, as it did before the frame). */
+export function windowArea(width, height, rect = frameRect()) {
+  if (width <= rect.width && height <= rect.height) return rect;
+  const vw = typeof window !== 'undefined' ? window.innerWidth : rect.right;
+  const vh = typeof window !== 'undefined' ? window.innerHeight : rect.bottom;
+  return insetRect(computeFrameRect({ viewportWidth: vw, viewportHeight: vh }), 8);
+}
+
+/** Where a window of `width` × `height` opens by default: centred in the frame, inside it (windowArea). */
+export function centeredInFrame(width, height, rect = frameRect()) {
+  const area = windowArea(width, height, rect);
+  const at = clampBox(area.left + (area.width - width) / 2, area.top + (area.height - height) / 2, width, height, area);
+  return { left: Math.round(at.x), top: Math.round(at.y) };
+}
+
+/** The area kept for something opened at a point: the frame when the point is in it, else the whole window. */
+export function placementArea(x, y) {
+  const f = frameRect();
+  return boundsForPoint(f, x, y) || computeFrameRect({ viewportWidth: window.innerWidth, viewportHeight: window.innerHeight });
+}
+
+const _listeners = new Set();
+let _watching = false;
+let _lastNotified = '';
+let _notifyRaf = 0;
+
+function notify() {
+  _notifyRaf = 0;
+  const rect = frameRect();
+  const key = `${rect.left}|${rect.top}|${rect.right}|${rect.bottom}`;
+  if (key === _lastNotified) return;
+  _lastNotified = key;
+  for (const fn of [..._listeners]) {
+    try { fn(rect); } catch (err) { console.error('[app-frame] listener failed', err); }
+  }
+}
+
+function schedule() {
+  if (_notifyRaf) return;
+  _notifyRaf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(notify) : setTimeout(notify, 16);
+}
+
+function watch() {
+  if (_watching || typeof window === 'undefined' || !window.document?.documentElement) return;
+  _watching = true;
+  const r = frameRect();
+  _lastNotified = `${r.left}|${r.top}|${r.right}|${r.bottom}`;
+  window.addEventListener?.('resize', schedule);
+  // An explorer opening or closing, the navbar's measured height and the frame's own class all land on <html>'s
+  // inline style or class list. Writes the frame does not depend on (--terminal-height, --right-panel-width…) are
+  // filtered out by the rect comparison in notify().
+  if (typeof MutationObserver === 'function') {
+    new MutationObserver(schedule).observe(window.document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] });
+  }
+}
+
+/**
+ * Call `fn(rect)` once per frame in which the frame's rect changed (window resize, an explorer opening or closing,
+ * the navbar's height). Returns the unsubscribe function.
+ */
+export function onFrameChange(fn) {
+  _listeners.add(fn);
+  watch();
+  return () => _listeners.delete(fn);
+}

package/neural-interface/public/shared/assistant/asst-agents-dock.js

@@ -17,15 +17,19 @@
 // and current step. A mini scene or a lane brings that run's card into view
 // in the transcript (hooks.onReveal). hooks.onRunChange hears every change
 // to a run, whatever its source, so the transcript's card follows the tray.
+// "Stop all" asks twice (asst-stop.js createConfirmGate): the first press
+// turns it into "Stop N agents?", a second press within a few seconds stops
+// every run of the session at once. It sits right under the transcript's
+// last card, so one stray click or key there must not end the session's work.
 
 import { on } from '../state.js';
-import { getProviderMeta } from '../provider-icons.js';
 import { listAssistantRuns } from './asst-api.js';
 import { buildRunCard, tickRunCard, updateRunCard } from './asst-render.js';
 import { awaitsAnswer, compactActivity, isLivePhase, phaseLine, sceneFor, sceneSvg, stageLabel, stagePhase, stepLine } from './asst-scenes.js';
 import { injectSceneStyles } from './asst-scene-styles.js';
 import { plural } from './asst-tool-kinds.js';
-import { isRemovableRun, isRunIdle, isTerminalRunStatus, mergeRunDescriptor, runFromPayload, runNeedsAttention, sortRuns } from './asst-state.js';
+import { isRemovableRun, isRunIdle, isTerminalRunStatus, mergeRunDescriptor, providerMeta, runFromPayload, runNeedsAttention, sortRuns } from './asst-state.js';
+import { createConfirmGate } from './asst-stop.js';
 
 const TICK_MS = 5000;
 const SHOW_ALL_LIMIT = 40;
@@ -47,7 +51,8 @@ function esc(value) {
 
 /**
  * createAgentsDock(hostEl, hooks)
- * hooks: { t, sessionId, onFocus(runId), onStop(runId), onRead(runId), onEscalate(runId, target), onStopAll(),
+ * hooks: { t, sessionId, onFocus(runId), onStop(runId), onRead(runId), onEscalate(runId, target),
+ *          onStopAll() (the second press of "Stop all"; stopAllConfirmMs / stopAllMinGapMs time it),
  *          onRemove(runId), onClearFinished(runIds), onReveal(runId), onRunChange(run),
  *          open, showAll, onToggle(open), onShowAllChange(showAll),
  *          onCountChange({ total, active, attention, answer, idle, working, waiting, visible }) }
@@ -83,6 +88,20 @@ export function createAgentsDock(hostEl, hooks = {}) {
   const stopAllBtn = root.querySelector('.asst-dock-stopall');
   const clearBtn = root.querySelector('.asst-dock-clear');
   const body = root.querySelector('.asst-dock-body');
+  // Armed, "Stop all" says what it would stop and waits for the second press (then lapses by itself).
+  const stopAllGate = createConfirmGate({ windowMs: hooks.stopAllConfirmMs, minGapMs: hooks.stopAllMinGapMs, onChange: () => paintStopAll() });
+  function paintStopAll(active = counts().active) {
+    const armed = stopAllGate.isArmed();
+    const label = armed
+      ? plural(t, 'assistant.dock.stopAllConfirm', active, 'Stop {count} agent?', 'Stop {count} agents?')
+      : t('assistant.dock.stopAll', 'Stop all');
+    const tip = armed
+      ? t('assistant.dock.stopAllConfirmTip', 'Press again to stop every agent of this session')
+      : t('assistant.dock.stopAllTip', 'Stop every agent of this session (asks once more)');
+    if (stopAllBtn.textContent !== label) stopAllBtn.textContent = label;
+    stopAllBtn.dataset.armed = armed ? 'true' : 'false';
+    stopAllBtn.setAttribute('data-tooltip', tip);
+  }
 
   const runs = new Map();   // runId → descriptor
   const cards = new Map();  // runId → element
@@ -146,8 +165,8 @@ export function createAgentsDock(hostEl, hooks = {}) {
     return {
       t: hooks.t,
       compact: true,
-      providerIcon: (p) => getProviderMeta(p).icon,
-      providerColor: (p) => getProviderMeta(p).color,
+      providerIcon: (p) => providerMeta(p).icon,
+      providerColor: (p) => providerMeta(p).color,
       onFocus: hooks.onFocus,
       onStop: hooks.onStop,
       onRead: hooks.onRead,
@@ -181,6 +200,8 @@ export function createAgentsDock(hostEl, hooks = {}) {
     summaryEl.textContent = summaryText(c);
     root.classList.toggle('attention', c.attention > 0);
     stopAllBtn.hidden = c.active === 0;
+    if (stopAllBtn.hidden) stopAllGate.reset();
+    paintStopAll(c.active);
     clearBtn.hidden = !open || typeof hooks.onClearFinished !== 'function' || ![...runs.values()].some(isRemovableRun);
     showAllBtn.hidden = !open;
     showAllBtn.setAttribute('aria-pressed', showAll ? 'true' : 'false');
@@ -390,7 +411,15 @@ export function createAgentsDock(hostEl, hooks = {}) {
 
   toggle.addEventListener('click', () => setOpen(!open));
   showAllBtn.addEventListener('click', () => { showAll = !showAll; hooks.onShowAllChange?.(showAll); refresh().finally(render); });
-  stopAllBtn.addEventListener('click', () => hooks.onStopAll?.());
+  stopAllBtn.addEventListener('click', () => {
+    if (stopAllBtn.hidden || destroyed) return;
+    if (stopAllGate.press() === 'confirmed') hooks.onStopAll?.();
+  });
+  stopAllBtn.addEventListener('keydown', (e) => {
+    // A held Enter repeats its click: only the first press of a key counts.
+    if (e.repeat && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); return; }
+    if (e.key === 'Escape' && stopAllGate.reset()) { e.preventDefault(); e.stopPropagation(); }
+  });
   clearBtn.addEventListener('click', () => {
     const ids = [...runs.values()].filter(isRemovableRun).map(r => r.runId);
     if (ids.length) hooks.onClearFinished?.(ids);
@@ -443,6 +472,7 @@ export function createAgentsDock(hostEl, hooks = {}) {
     destroy() {
       destroyed = true;
       if (ticker) clearInterval(ticker);
+      stopAllGate.destroy();
       activities.clear();
       unsubs.forEach(off => { try { off(); } catch { /* ignore */ } });
       root.remove();

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

@@ -48,7 +48,7 @@ export function fetchAssistantCatalog({ force = false } = {}) {
 
 // ── Hidden models (Assistant → Models) ───────
 
-/** → { ok, providers: { 'claude-code': [], codex: [], opencode: [] } } */
+/** → { ok, providers: { 'claude-code': [], codex: [], opencode: [], antigravity: [] } } */
 export function getHiddenModelLists() {
   return jsonFetch('/api/assistant/hidden-models');
 }

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

@@ -0,0 +1,270 @@
+// ═══════════════════════════════════════════
+// SynaBun Assistant — the cards the mascot presents: styles
+// ═══════════════════════════════════════════
+// Injected once as <style id="asst-ask-styles">, right after the main
+// assistant styles (asst-styles.js), like the rack's sheet. Two kinds of card
+// share it (asst-ask.js): the follow-ups card under a finished message and the
+// question cards a brain asks with (.asst-control.asst-ask). Both open on a
+// stage, the rack's: the mascot (64×32; 48×24 at 400px, 40×20 at 320px) beside
+// what it says, in a bubble whose notch points at it; the answers run full
+// width under it: option rows with a number key, gold once picked. Gold means
+// picked (or live) only; red never appears here. No keyframes and no infinite
+// motion: the rig moves on the shared ticker, the rows move by transitions,
+// and prefers-reduced-motion drops those too. Focus rings are the panel's one
+// recipe (asst-styles.js). Tokens come from asst-styles.js.
+
+export const ASK_STYLE_ID = 'asst-ask-styles';
+
+export const ASK_CSS = `
+  .asst-ask {
+    --ask-face-col: 68px;
+    --ask-face-w: 64px;
+    --ask-face-h: 32px;
+    --ask-ring: var(--asst-line);
+  }
+  .asst-ask-face { display: flex; flex: 0 0 var(--ask-face-col); justify-content: center; align-self: flex-start; min-width: 0; padding-top: 2px; color: var(--asst-text); line-height: 0; }
+  .asst-ask-face svg { display: block; width: var(--ask-face-w); height: var(--ask-face-h); overflow: visible; }
+  /* The stage: the face and its first bubble, side by side. */
+  .asst-ask-stage { display: flex; align-items: flex-start; gap: 2px; min-width: 0; }
+
+  /* What the mascot says: a bubble whose notch points at it (the rack's bubble). */
+  .asst-ask-bubble {
+    position: relative;
+    flex: 0 1 auto;
+    align-self: flex-start;
+    max-width: calc(100% - 6px);
+    min-width: 0;
+    margin-left: 6px;
+    padding: 7px 11px 8px;
+    border-radius: 3px 12px 12px 12px;
+    background: var(--asst-fill-1);
+    box-shadow: inset 0 0 0 1px var(--asst-line);
+    color: var(--asst-text);
+    overflow-wrap: anywhere;
+  }
+  .asst-ask-bubble.is-lead::before {
+    content: '';
+    position: absolute;
+    left: -5.5px;
+    top: 9px;
+    width: 11px;
+    height: 11px;
+    background: var(--asst-fill-1);
+    box-shadow: inset 1px -1px 0 var(--asst-line);
+    clip-path: polygon(0 0, 0 100%, 100% 100%);
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+  .asst-ask-title { font-size: 13px; font-weight: 500; line-height: 1.45; }
+  .asst-ask-hint { margin-top: 2px; color: var(--asst-text-3); font-size: 11.5px; line-height: 1.4; }
+
+  /* Answers: one row each, its number key first; picked rows are gold. */
+  .asst-ask-options { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+  .asst-ask .asst-ask-option {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    min-width: 0;
+    min-height: 36px;
+    padding: 6px 10px;
+    border: 0;
+    border-radius: var(--asst-r-field);
+    background: var(--asst-fill-1);
+    box-shadow: inset 0 0 0 1px var(--asst-line);
+    color: var(--asst-text);
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.4;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background-color var(--asst-dur-fast) var(--asst-ease-standard),
+      box-shadow var(--asst-dur-fast) var(--asst-ease-standard),
+      opacity var(--asst-dur-fast) var(--asst-ease-standard),
+      transform var(--asst-dur-instant) var(--asst-ease-standard);
+  }
+  .asst-ask .asst-ask-option:hover:not(:disabled) { background: var(--asst-fill-2); box-shadow: inset 0 0 0 1px var(--asst-line-2); }
+  .asst-ask .asst-ask-option:active:not(:disabled) { transform: translateY(1px); }
+  .asst-ask .asst-ask-option:disabled { cursor: default; }
+  .asst-ask .asst-ask-option:is(.selected, .chosen) { background: var(--asst-pill-on-fill); box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring); }
+  .asst-ask-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--asst-pill-h-xs);
+    height: var(--asst-pill-h-xs);
+    border-radius: var(--asst-pill-r-xs);
+    background: var(--asst-fill-1);
+    box-shadow: inset 0 0 0 1px var(--asst-line-2);
+    color: var(--asst-text-2);
+    font-family: var(--asst-mono);
+    font-size: 10.5px;
+    font-variant-numeric: tabular-nums;
+    transition: background-color var(--asst-dur-fast) var(--asst-ease-standard), color var(--asst-dur-fast) var(--asst-ease-standard);
+  }
+  .asst-ask .asst-ask-option:is(.selected, .chosen) .asst-ask-key { background: var(--asst-brand); box-shadow: none; color: var(--asst-ink); }
+  .asst-ask-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
+  .asst-ask-label { font-weight: 500; overflow-wrap: anywhere; }
+  .asst-ask-desc { color: var(--asst-text-3); font-size: 11.5px; overflow-wrap: anywhere; }
+  .asst-ask-badge {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: var(--asst-pill-h-xs);
+    padding: 0 var(--asst-pill-px-xs);
+    border-radius: var(--asst-pill-r-xs);
+    background: var(--asst-fill-1);
+    box-shadow: inset 0 0 0 1px var(--asst-line-2);
+    color: var(--asst-text-2);
+    font-size: 10.5px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .asst-ask-go { flex-shrink: 0; color: var(--asst-text-4); font-size: 12px; transition: color var(--asst-dur-fast) var(--asst-ease-standard); }
+  .asst-ask .asst-ask-option:is(:hover, :focus-visible):not(:disabled) .asst-ask-go { color: var(--asst-text); }
+  .asst-ask[data-state="answered"] .asst-ask-option:not(.chosen) { opacity: .45; }
+
+  /* A typed answer: the field the composer's own look, Enter sends it. */
+  .asst-ask-answer { display: flex; gap: 6px; min-width: 0; }
+  .asst-ask .asst-ask-input {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    height: 32px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: var(--asst-r-field);
+    outline: none;
+    background: var(--asst-field);
+    box-shadow: inset 0 0 0 1px var(--asst-line);
+    color: var(--asst-text);
+    font: inherit;
+    font-size: 12.5px;
+    resize: none;
+  }
+  .asst-ask .asst-ask-input:focus { box-shadow: inset 0 0 0 1px var(--asst-line-2); }
+  .asst-ask .asst-ask-input::placeholder { color: var(--asst-text-3); opacity: 1; }
+
+  .asst-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+  .asst-ask-actions .asst-btn { max-width: 100%; }
+  /* A confirm's choice stays clear while the mascot hops; the other one dims like any spent button. */
+  .asst-ask .asst-ask-actions .asst-btn.chosen:disabled { opacity: 1; }
+  .asst-ask-actions .asst-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .asst-ask .asst-ask-other { background: transparent; box-shadow: none; color: var(--asst-text-3); }
+  .asst-ask .asst-ask-other:hover:not(:disabled) { background: var(--asst-fill-1); box-shadow: none; color: var(--asst-text); }
+  /* The keys, said once focus is in the card. */
+  .asst-ask-keys { display: none; margin-left: auto; color: var(--asst-text-3); font-size: 11px; line-height: 1.4; }
+  .asst-ask:focus-within .asst-ask-keys { display: inline; }
+
+  /* ── The follow-ups card: open, the mascot presents; answered or left behind, one line ── */
+  .asst-followups.asst-ask {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 560px;
+    min-width: 0;
+    margin-top: 10px;
+    padding: 12px 14px;
+    border-radius: var(--asst-r-card);
+    background: var(--asst-card);
+    box-shadow: inset 0 0 0 1px var(--ask-ring), var(--asst-card-hi);
+    color: var(--asst-text);
+    font-size: 13px;
+  }
+  .asst-followups.asst-ask[data-style="question"] { --ask-ring: color-mix(in srgb, var(--asst-info) 30%, transparent); }
+  .asst-ask-receipt { display: none; }
+  .asst-followups.asst-ask:not([data-state="open"]):not([data-phase="sending"]) {
+    --ask-face-col: 28px;
+    --ask-face-w: 28px;
+    --ask-face-h: 14px;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    max-width: min(100%, 560px);
+    min-height: var(--asst-pill-h-md);
+    padding: 4px 10px 4px 8px;
+    border-radius: var(--asst-pill-r-md);
+    background: var(--asst-fill-1);
+    box-shadow: inset 0 0 0 1px var(--asst-line);
+  }
+  .asst-followups.asst-ask:not([data-state="open"]):not([data-phase="sending"]) > .asst-ask-stage { display: contents; }
+  .asst-followups.asst-ask:not([data-state="open"]):not([data-phase="sending"]) .asst-ask-face { padding: 0; align-self: center; }
+  .asst-followups.asst-ask:not([data-state="open"]):not([data-phase="sending"]) :is(.asst-ask-bubble, .asst-ask-options, .asst-ask-answer, .asst-ask-actions) { display: none; }
+  .asst-followups.asst-ask:not([data-state="open"]):not([data-phase="sending"]) .asst-ask-receipt {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 8px;
+    min-width: 0;
+    color: var(--asst-text-3);
+    font-size: 12px;
+    line-height: 1.4;
+  }
+  .asst-followups.asst-ask[data-state="stale"] .asst-ask-face { opacity: .55; }
+  .asst-ask-receipt-title { min-width: 0; max-width: 100%; overflow: hidden; color: var(--asst-text-2); text-overflow: ellipsis; white-space: nowrap; }
+  .asst-ask-receipt-arrow { color: var(--asst-text-4); }
+  .asst-ask-chip {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-height: 20px;
+    padding: 1px 7px;
+    border-radius: var(--asst-pill-r-xs);
+    background: var(--asst-pill-on-fill);
+    box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring);
+    color: var(--asst-text);
+    font-size: 11.5px;
+    font-weight: 500;
+    overflow-wrap: anywhere;
+  }
+  .asst-ask-receipt-list { min-width: 0; color: var(--asst-text-3); overflow-wrap: anywhere; }
+  .asst-ask-receipt-status { color: var(--asst-text-3); font-size: 11px; }
+
+  /* ── The question cards (asst-control.js): the same mascot, the card's own head and actions ── */
+  .asst-control.asst-ask { background: var(--asst-card); }
+  /* The presenter is its face: no second cameo in the head. */
+  .asst-control.asst-ask .asst-control-head > .asst-control-face { display: none; }
+  .asst-control.asst-ask .asst-control-q { gap: 8px; }
+  .asst-control.asst-ask .asst-control-q-header { color: var(--asst-text-3); font-size: 11.5px; font-weight: 500; }
+  .asst-control.asst-ask .asst-control-options { gap: 4px; }
+  .asst-control.asst-ask .asst-control-option.selected { background: var(--asst-pill-on-fill); box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring); }
+  /* Answered: the picks stay (gold), the rest goes; nothing to press any more. The record stays readable
+     (no dimming of the whole card: the ✓ capsule, the status word and the still face say it is settled). */
+  .asst-control.asst-ask.resolved { opacity: 1; }
+  .asst-control.asst-ask.resolved .asst-control-option:not(.selected) { display: none; }
+  .asst-control.asst-ask.resolved .asst-ask-input:placeholder-shown { display: none; }
+  .asst-control.asst-ask.resolved :is(.asst-control-actions, .asst-control-deny-msg, .asst-control-q-hint, .asst-ask-keys) { display: none; }
+  .asst-control.asst-ask.resolved .asst-ask-face:not(.is-answered) { opacity: .55; }
+
+  /* Narrow panels: a smaller mascot in a narrower column; at 320px the keys line goes. */
+  @container asst (max-width: 400px) {
+    .asst-ask { --ask-face-col: 52px; --ask-face-w: 48px; --ask-face-h: 24px; }
+    .asst-followups.asst-ask, .asst-control.asst-ask { padding: 10px; }
+    .asst-ask .asst-ask-option { min-height: 40px; }
+  }
+  @container asst (max-width: 320px) {
+    .asst-ask { --ask-face-col: 44px; --ask-face-w: 40px; --ask-face-h: 20px; }
+    .asst-ask .asst-ask-option { gap: 8px; padding: 6px 8px; }
+    .asst-ask:focus-within .asst-ask-keys { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .asst-ask, .asst-ask * { transition: none !important; }
+  }
+`;
+
+/** Add the sheet once, right after the main assistant styles when they are in the page. */
+export function injectAskStyles(doc = globalThis.document) {
+  if (!doc || typeof doc.getElementById !== 'function' || typeof doc.createElement !== 'function') return;
+  if (doc.getElementById(ASK_STYLE_ID)) return;
+  const style = doc.createElement('style');
+  style.id = ASK_STYLE_ID;
+  style.textContent = ASK_CSS;
+  const main = doc.getElementById('assistant-panel-styles');
+  if (main?.parentNode) main.after(style);
+  else doc.head?.appendChild(style);
+}