synabun 2.0.9 → 2.1.0

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

@@ -4,12 +4,14 @@
 // marked turns what a brain said into HTML, and that text is not ours: a
 // quoted web page, a plan, a tool's output can carry <img onerror>, a
 // javascript: link or an <svg onload>. Every Markdown sink in the Assistant
-// goes through this allowlist first. The markup is parsed into an inert
+// and in the Claude, Codex and OpenCode panels goes through this allowlist
+// first: it is the one sanitiser, never write a second. The markup is parsed into an inert
 // <template> (nothing runs, nothing loads) and rebuilt node by node into
 // fresh elements, so nothing the parser saw survives unless it is listed
 // here: no on* or style attributes, no ids, no namespaced markup. No
 // dependency beyond file-links.js (pure), nothing touches `document` at
-// import time.
+// import time. A transcript a panel saved and shows again goes through the
+// second list at the end of this file (sanitizeStoredHtml).
 
 import { localFileHref } from '../file-links.js';
 
@@ -27,7 +29,21 @@ const SAFE_SCHEMES = new Set(['http:', 'https:', 'mailto:']);
 const CLASS_RE = /^language-[\w+#.-]{1,40}$/;
 // The panel's own generated media (readRun shows a run's images inline).
 const MEDIA_SRC_RE = /^\/api\/assistant\/runs\/[\w.-]+\/media\/\d+$/;
+// An image of SynaBun's own gallery (GET /api/images/file/<name>: a screenshot, a paste, an image a CLI saved), as
+// written by the model: a path of this server only (no host, scheme, query or fragment), one file name (no folder,
+// no escaped slash, backslash or dot) with an image extension.
+const GALLERY_SRC_RE = /^\/api\/images\/file\/((?!\.)(?:[\w.-]|%(?!2[eEfF]|5[cC])[0-9A-Fa-f]{2})+)$/;
+const GALLERY_EXT_RE = /\.(?:png|jpe?g|gif|webp|bmp|svg)$/i;
+
+/** An <img> src the Markdown list keeps: a run's own media, or an image of SynaBun's gallery. */
+export function isOwnImageSrc(src) {
+  const value = String(src ?? '');
+  if (MEDIA_SRC_RE.test(value)) return true;
+  const gallery = GALLERY_SRC_RE.exec(value);
+  return !!gallery && GALLERY_EXT_RE.test(gallery[1]);
+}
 const MAX_DEPTH = 64;
+const ALIGNS = new Set(['left', 'center', 'right']);
 
 /** An href the Assistant may render: http(s) or mailto after resolving it, else null. */
 export function safeHref(raw, base = globalThis.document?.baseURI || 'http://localhost/') {
@@ -54,6 +70,8 @@ function copyAttributes(from, to, tag) {
     if (href) to.setAttribute('href', href);
     // A path or a file: URL does not survive as an href (it is resolved against the page, or dropped).
     // Kept as written, as data: ui-file-links.js reads it on a click and opens the file in the editor.
+    // A target whose scheme hides behind spaces, controls or entities (`JaVa\tScript:`), or is one a browser
+    // runs (javascript, vbscript, data…), is no file: that link keeps neither an href nor a target.
     const file = localFileHref(from.getAttribute('href'));
     if (file) to.setAttribute('data-file-target', file);
     const title = from.getAttribute('title');
@@ -65,6 +83,15 @@ function copyAttributes(from, to, tag) {
     const classes = String(from.getAttribute('class') || '').split(/\s+/).filter(c => CLASS_RE.test(c));
     if (classes.length) to.setAttribute('class', classes.join(' '));
   }
+  // A table column's alignment and a list's first number: marked writes both, and they are words and digits only.
+  if (tag === 'th' || tag === 'td') {
+    const align = String(from.getAttribute('align') || '').toLowerCase();
+    if (ALIGNS.has(align)) to.setAttribute('align', align);
+  }
+  if (tag === 'ol') {
+    const start = String(from.getAttribute('start') || '');
+    if (/^\d{1,9}$/.test(start)) to.setAttribute('start', start);
+  }
 }
 
 function clean(source, target, doc, depth) {
@@ -84,7 +111,7 @@ function clean(source, target, doc, depth) {
     }
     if (tag === 'img') {
       const src = String(node.getAttribute('src') || '');
-      if (MEDIA_SRC_RE.test(src)) {
+      if (isOwnImageSrc(src)) {
         const img = doc.createElement('img');
         img.setAttribute('src', src);
         img.setAttribute('alt', node.getAttribute('alt') || '');
@@ -122,3 +149,166 @@ export function sanitizeHtmlString(html, doc = globalThis.document) {
   holder.appendChild(sanitizeHtml(html, doc));
   return holder.innerHTML;
 }
+
+// ── Stored transcripts ──
+// A side panel saves its transcript's own markup (messages, cards, buttons, data attributes, the inline SVG of
+// its icons) and puts it back when the session is opened again. That markup is the panel's, so the Markdown list
+// above would take it apart; but it comes back from storage, and a build from before the panels sanitised their
+// Markdown saved model HTML into it as it was. So it is rebuilt here the same way, node by node into fresh
+// elements, from a second list: what a panel writes is kept exactly as it was written (a normal transcript looks
+// as it did), and nothing else is. No script, handler, frame or form, no id or name, no image from another site
+// (a remote image is not loaded again from storage), no style that loads something or leaves the transcript.
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const STORED_MAX_DEPTH = 128;
+/** The panel's own elements, besides the Markdown ones; an element not listed is unwrapped (a <form> too). */
+const STORED_TAGS = new Set([...ALLOWED_TAGS, 'div', 'section', 'header', 'footer', 'article', 'aside', 'figure', 'figcaption',
+  'small', 'b', 'i', 'u', 's', 'sub', 'sup', 'mark', 'kbd', 'samp', 'var', 'abbr', 'cite', 'q', 'dfn', 'ins', 'time', 'wbr',
+  'caption', 'colgroup', 'col', 'tfoot', 'dl', 'dt', 'dd', 'details', 'summary', 'label', 'button', 'input', 'textarea',
+  'select', 'option', 'optgroup', 'progress', 'meter', 'img']);
+const STORED_DROPPED = new Set([...DROPPED].filter(tag => tag !== 'input'));
+/** The shapes of the panels' icons; any other SVG element (script, a, use, image, foreignObject, animate…) goes with what is in it. */
+const STORED_SVG_TAGS = new Set(['svg', 'g', 'path', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'rect', 'title', 'desc']);
+const STORED_SVG_ATTRS = new Set(['viewBox', 'width', 'height', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
+  'stroke-dasharray', 'stroke-dashoffset', 'stroke-miterlimit', 'stroke-opacity', 'fill-opacity', 'fill-rule', 'clip-rule', 'opacity',
+  'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'transform', 'preserveAspectRatio', 'vector-effect',
+  'shape-rendering', 'focusable']);
+const SVG_PAINT_ATTRS = new Set(['fill', 'stroke']);
+const SVG_PAINT_RE = /^(?:none|currentColor|transparent|context-fill|context-stroke|inherit|#[0-9a-f]{3,8}|[a-z]{3,24}|(?:rgb|rgba|hsl|hsla)\(\s*[0-9.,%\s/+-]*\))$/i;
+const STORED_GLOBAL_ATTRS = new Set(['class', 'title', 'role', 'hidden', 'lang', 'dir', 'tabindex', 'draggable', 'spellcheck', 'translate']);
+// ARIA that names an element by id: the ids are gone, so these would point at nothing (or at the panel's own chrome).
+const ARIA_ID_REFS = new Set(['aria-controls', 'aria-describedby', 'aria-labelledby', 'aria-owns', 'aria-activedescendant', 'aria-details', 'aria-errormessage', 'aria-flowto']);
+const STORED_TAG_ATTRS = {
+  a: ['target', 'rel'],
+  img: ['alt', 'width', 'height', 'loading', 'decoding'],
+  button: ['type', 'disabled', 'value'],
+  input: ['type', 'value', 'checked', 'disabled', 'readonly', 'placeholder', 'min', 'max', 'step', 'maxlength', 'size', 'autocomplete'],
+  textarea: ['rows', 'cols', 'placeholder', 'disabled', 'readonly', 'maxlength', 'wrap', 'autocomplete'],
+  select: ['disabled', 'multiple', 'size'],
+  option: ['value', 'selected', 'disabled', 'label'],
+  optgroup: ['label', 'disabled'],
+  details: ['open'],
+  th: ['align', 'colspan', 'rowspan', 'scope'],
+  td: ['align', 'colspan', 'rowspan'],
+  col: ['span'],
+  colgroup: ['span'],
+  ol: ['start', 'reversed', 'type'],
+  li: ['value'],
+  time: ['datetime'],
+  progress: ['value', 'max'],
+  meter: ['value', 'min', 'max', 'low', 'high', 'optimum'],
+};
+const STORED_VALUES = {
+  target: /^_blank$/,
+  type: /^(?:button|submit|reset|text|search|number|checkbox|radio|range|email|url|tel|hidden|1|a|A|i|I)$/,
+  tabindex: /^-?\d{1,3}$/,
+};
+const REL_TOKENS = new Set(['noopener', 'noreferrer', 'nofollow', 'ugc', 'external']);
+// Inline styles: the layout properties the panels set (a code block's position, an image preview's size, a card
+// hidden or dimmed while busy, a chip's colour) and nothing that loads, positions over the page or hides behind an
+// escape: a value names no function but the colour and arithmetic ones, so `background` is a colour, never an image.
+const STYLE_PROPS = new Set(['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
+  'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding', 'padding-top', 'padding-right', 'padding-bottom',
+  'padding-left', 'border', 'border-top', 'border-right', 'border-bottom', 'border-left', 'border-color', 'border-width', 'border-style',
+  'border-radius', 'box-sizing', 'opacity', 'visibility', 'pointer-events', 'cursor', 'overflow', 'overflow-x', 'overflow-y',
+  'overflow-wrap', 'word-break', 'white-space', 'text-overflow', 'text-align', 'vertical-align', 'line-height', 'font-size',
+  'font-weight', 'font-style', 'letter-spacing', 'text-decoration', 'color', 'background', 'background-color', 'gap', 'row-gap', 'column-gap',
+  'flex', 'flex-direction', 'flex-wrap', 'flex-grow', 'flex-shrink', 'flex-basis', 'align-items', 'align-self', 'justify-content',
+  'object-fit', 'tab-size']);
+const STYLE_FUNCTIONS = new Set(['var', 'calc', 'rgb', 'rgba', 'hsl', 'hsla', 'min', 'max', 'clamp']);
+
+/** A style attribute as written when every declaration is a layout one; else only those; '' when none is left. */
+export function storedStyle(text) {
+  const kept = [];
+  let dropped = false;
+  for (const part of String(text ?? '').split(';')) {
+    const decl = part.trim();
+    if (!decl) continue;
+    const colon = decl.indexOf(':');
+    const prop = colon > 0 ? decl.slice(0, colon).trim().toLowerCase() : '';
+    const value = colon > 0 ? decl.slice(colon + 1).trim() : '';
+    const functions = [...value.matchAll(/([a-z-]*)\s*\(/gi)].map(m => m[1].toLowerCase());
+    const ok = (STYLE_PROPS.has(prop) || /^--[a-z0-9-]{1,64}$/.test(prop)) && value !== ''
+      && functions.every(fn => STYLE_FUNCTIONS.has(fn))
+      && !/[\\<>{}@"']|\/\*|url|expression|javascript|image|attr/i.test(value)
+      && (prop !== 'position' || /^(?:static|relative)$/i.test(value));
+    if (ok) kept.push(decl); else dropped = true;
+  }
+  if (!dropped) return String(text ?? '');
+  return kept.length ? `${kept.join('; ')};` : '';
+}
+
+/** An image a stored transcript may show again: a data: image, or a file of this page's own origin (a blob: of it). */
+export function storedImageSrc(raw, base = globalThis.document?.baseURI || 'http://localhost/') {
+  const value = String(raw ?? '');
+  if (/^data:image\//i.test(value.replace(/[\u0000- ]/g, ''))) return value;
+  let url;
+  let page;
+  try { url = new URL(value, base); page = new URL(base); } catch { return null; }
+  if (!value.trim() || !['http:', 'https:', 'blob:'].includes(url.protocol)) return null;
+  return url.origin === page.origin ? value : null;
+}
+
+function storedAttribute(tag, svg, name, value, base) {
+  const lower = name.toLowerCase();
+  if (lower === 'style') {
+    const style = storedStyle(value);
+    return style || null;
+  }
+  if (/^data-[\w.-]+$/i.test(name)) return value;
+  if (/^aria-[a-z]+$/.test(lower)) return ARIA_ID_REFS.has(lower) ? null : value;
+  if (STORED_GLOBAL_ATTRS.has(lower)) return !STORED_VALUES[lower] || STORED_VALUES[lower].test(value) ? value : null;
+  if (svg) {
+    if (name === 'xmlns') return value === SVG_NS ? value : null;
+    // A presentation attribute is read as CSS, where an escape spells anything (u\72 l( is url(): a value with an
+    // escape, a comment or the word url is not kept, and a paint is a colour or a keyword, never a paint server.
+    if (!STORED_SVG_ATTRS.has(name) || /\\|\/\*|url/i.test(value)) return null;
+    return !SVG_PAINT_ATTRS.has(name) || SVG_PAINT_RE.test(value.trim()) ? value : null;
+  }
+  if (tag === 'a' && lower === 'href') return safeHref(value, base) ? value : null;
+  if (tag === 'img' && lower === 'src') return storedImageSrc(value, base);
+  if (!(STORED_TAG_ATTRS[tag] || []).includes(lower)) return null;
+  if (lower === 'rel') {
+    const tokens = value.split(/\s+/).filter(token => REL_TOKENS.has(token.toLowerCase()));
+    return tokens.length ? tokens.join(' ') : null;
+  }
+  return !STORED_VALUES[lower] || STORED_VALUES[lower].test(value) ? value : null;
+}
+
+function cleanStored(source, target, doc, depth, base) {
+  for (const node of source.childNodes) {
+    if (node.nodeType === 3) { target.appendChild(doc.createTextNode(node.data)); continue; }
+    if (node.nodeType !== 1) continue;
+    const tag = node.localName;
+    const svg = node.namespaceURI === SVG_NS;
+    if (depth >= STORED_MAX_DEPTH || (!svg && (node.namespaceURI !== HTML_NS || tag === 'math'))) {
+      const text = textOf(node);
+      if (text) target.appendChild(doc.createTextNode(text));
+      continue;
+    }
+    if (svg ? !STORED_SVG_TAGS.has(tag) : STORED_DROPPED.has(tag)) continue;
+    if (!svg && !STORED_TAGS.has(tag)) { cleanStored(node, target, doc, depth + 1, base); continue; } // unwrap
+    if (tag === 'img' && !storedImageSrc(node.getAttribute('src'), base)) continue;
+    const el = svg ? doc.createElementNS(SVG_NS, tag) : doc.createElement(tag);
+    for (const name of node.getAttributeNames()) {
+      const value = storedAttribute(tag, svg, name, node.getAttribute(name), base);
+      if (value !== null) el.setAttribute(name, value);
+    }
+    // A link that opens a tab never hands that tab this page.
+    if (tag === 'a' && el.getAttribute('target') === '_blank') {
+      const rel = new Set(String(el.getAttribute('rel') || '').split(/\s+/).filter(Boolean));
+      if (!rel.has('noopener') || !rel.has('noreferrer')) el.setAttribute('rel', [...rel, 'noopener', 'noreferrer'].filter((t, i, all) => all.indexOf(t) === i).join(' '));
+    }
+    cleanStored(node, el, doc, depth + 1, base);
+    target.appendChild(el);
+  }
+}
+
+/** A stored transcript's markup → a DocumentFragment of fresh nodes from the stored-transcript list. */
+export function sanitizeStoredHtml(html, doc = globalThis.document) {
+  const tpl = doc.createElement('template');
+  tpl.innerHTML = String(html ?? '');
+  const out = doc.createDocumentFragment();
+  cleanStored(tpl.content, out, doc, 0, doc.baseURI || globalThis.document?.baseURI || 'http://localhost/');
+  return out;
+}

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

@@ -0,0 +1,273 @@
+// ═══════════════════════════════════════════
+// SynaBun Assistant — worker stage and scene styles
+// ═══════════════════════════════════════════
+// Injected once by asst-render.js as <style id="asst-scene-styles">, right
+// after the rack's sheet (asst-rack-styles.js), whose sweep (asst-rk-sweep)
+// and caret blink (asst-rk-caret) it reuses. Three things live here:
+//
+// - the stage a run card opens while its worker works (asst-run-stage.js):
+//   the mascot, the scene and the step in one faint panel of a
+//   fixed height, the rack's gold sweep on its bottom edge; it folds like the
+//   rack's stage (grid rows 0fr ↔ 1fr, 240 ms) once the worker settles;
+// - the scenes (asst-scenes.js): transform and opacity loops only, running
+//   while the scene carries data-live, never while it waits on you (calm,
+//   dimmed, no gold) or after it settled;
+// - the agents tray's mini scenes and lanes (asst-agents-dock.js).
+//
+// Rules as the rack's: gold only means live; infinite loops pause while the
+// UI is dragged (body.ui-interacting) and stop under prefers-reduced-motion,
+// where every scene is its still frame and the sweep is not drawn. Tokens
+// come from asst-styles.js, always with a fallback. No backdrop blur and no
+// standing layer hints.
+
+import { CODE_LINES, CODE_STEP, codeCaretX } from './asst-scenes.js';
+
+export const SCENE_STYLE_ID = 'asst-scene-styles';
+
+/** The code scene's stepped scroll (one line per step) and its caret, which lands on each new bottom line's end. */
+function codeFrames() {
+  const n = CODE_LINES.length;
+  const at = (s) => Math.round((s * 100000) / n) / 1000;
+  const hold = (s) => Math.round(((s * 100) / n + (100 / n) * 0.72) * 1000) / 1000;
+  let scroll = '';
+  let caret = '';
+  for (let s = 0; s < n; s += 1) {
+    scroll += ` ${at(s)}%, ${hold(s)}% { transform: translateY(${-CODE_STEP * s}px); }`;
+    caret += ` ${at(s)}%, ${hold(s)}% { transform: translateX(${codeCaretX(s)}px); }`;
+  }
+  scroll += ` 100% { transform: translateY(${-CODE_STEP * n}px); }`;
+  caret += ` 100% { transform: translateX(${codeCaretX(n)}px); }`;
+  return `@keyframes asst-sc-code {${scroll} }\n  @keyframes asst-sc-code-caret {${caret} }`;
+}
+
+export const SCENE_CSS = `
+  /* ── The stage in a run card ──────────────────────────────────────── */
+  .asst-run-stage-wrap {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-rows: 0fr;
+    min-width: 0;
+    transition: grid-template-rows var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9));
+  }
+  .asst-run.is-staged > .asst-run-stage-wrap { grid-template-rows: 1fr; }
+  .asst-run-stage {
+    --sc-gold: var(--asst-brand, rgba(255,215,0,.85));
+    --sc-shade: var(--asst-popover, #131316);
+    position: relative;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: 40px 16px;
+    grid-template-areas: "face scene" "line line";
+    align-items: center;
+    column-gap: 10px;
+    row-gap: 6px;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    margin-top: 0;
+    padding: 0 10px;
+    border-radius: var(--asst-r-field, 8px);
+    background: var(--asst-field, rgba(255,255,255,.025));
+    box-shadow: inset 0 0 0 1px var(--asst-line, rgba(255,255,255,.07));
+    color: var(--asst-text-2, rgba(255,255,255,.64));
+    visibility: hidden;
+    transition: margin-top var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)), padding var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)), visibility 0s linear var(--asst-dur-moderate, 240ms);
+  }
+  .asst-run.is-staged .asst-run-stage {
+    margin-top: 8px;
+    padding: 8px 10px;
+    visibility: visible;
+    transition: margin-top var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)), padding var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)), visibility 0s;
+  }
+  .asst-run-stage-face { grid-area: face; width: 56px; height: 28px; color: var(--asst-text, rgba(255,255,255,.9)); line-height: 0; }
+  .asst-run-stage-face svg { display: block; width: 56px; height: 28px; }
+  .asst-run-stage-scene { grid-area: scene; min-width: 0; height: 40px; overflow: hidden; color: var(--asst-text-2, rgba(255,255,255,.64)); line-height: 0; }
+  .asst-run-stage-scene .asst-scene { width: 120px; height: 40px; }
+  .asst-run-stage-line { grid-area: line; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 11.5px; line-height: 16px; }
+  .asst-run-stage-step { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--asst-text-2, rgba(255,255,255,.64)); }
+  /* Waiting on you: calm and dimmed, no gold, "◆ Waiting for your approval" in the warn tone. */
+  .asst-run-stage[data-phase="waiting"] { --sc-gold: currentColor; }
+  .asst-run-stage[data-phase="waiting"] .asst-run-stage-scene { opacity: .55; }
+  .asst-run-stage[data-phase="waiting"] .asst-run-stage-step { color: var(--asst-warn, #ffb74d); }
+  .asst-run-stage[data-phase="waiting"] .asst-run-stage-step::before { content: '◆'; margin-right: 5px; font-size: 9px; vertical-align: 1px; }
+  /* Settled: the final frame holds, then the stage folds. */
+  .asst-run-stage[data-final] { --sc-gold: currentColor; }
+  .asst-run-stage[data-final] .asst-run-stage-scene { opacity: .6; }
+  .asst-run-stage[data-final="failed"] .asst-run-stage-step { color: var(--asst-live, #ff5252); }
+  .asst-run-stage-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; overflow: hidden; pointer-events: none; }
+  .asst-run-stage[data-live] .asst-run-stage-sweep::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 38%;
+    background: linear-gradient(90deg, transparent, var(--sc-gold), transparent);
+    animation: asst-rk-sweep 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
+  }
+  /* A card the agents tray pointed at. */
+  .asst-transcript .asst-run { transition: background-color var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)), box-shadow var(--asst-dur-moderate, 240ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)); }
+  .asst-run.is-revealed { background: var(--asst-fill-1, rgba(255,255,255,.04)); box-shadow: 0 0 0 1px var(--asst-line-2, rgba(255,255,255,.12)); }
+
+  /* ── Scenes ─────────────────────────────────────────────────────────── */
+  /* --sc-gold is set by a holder that neutralizes it (waiting, settled); unset, it is the brand gold. */
+  .asst-scene { display: block; overflow: visible; }
+  .asst-scene .sc-dim { stroke-opacity: .5; }
+  .asst-scene .sc-mid { stroke-opacity: .72; }
+  .asst-scene .sc-gold { stroke: var(--sc-gold, var(--asst-brand, rgba(255,215,0,.85))); }
+  .asst-scene .sc-fill { fill: currentColor; stroke: none; }
+  .asst-scene .sc-fill.sc-dim { fill-opacity: .34; }
+  .asst-scene .sc-fill.sc-mid { fill-opacity: .55; }
+  .asst-scene .sc-fill.sc-gold { fill: var(--sc-gold, var(--asst-brand, rgba(255,215,0,.85))); }
+  .asst-scene .sc-shade { fill: var(--sc-shade, #131316); }
+  .asst-scene .sc-ring { fill: none; opacity: 0; }
+  .asst-scene .sc-box { transform-box: fill-box; transform-origin: center; }
+  .asst-scene .sc-vb { transform-box: view-box; }
+  .asst-scene[data-live] .sc-code-scroll { animation: asst-sc-code 6.6s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-code-caret { animation: asst-sc-code-caret 6.6s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-caret { animation: asst-rk-caret 1.06s steps(1) infinite; }
+  .asst-scene[data-live] .sc-gear-big { animation: asst-sc-spin 8s linear infinite; }
+  .asst-scene[data-live] .sc-gear-small { animation: asst-sc-spin 6s linear infinite reverse; }
+  .asst-scene[data-live] .sc-tick { animation: asst-sc-tick 3.2s cubic-bezier(.2, 0, .38, .9) calc(var(--i, 0) * .45s) infinite both; }
+  .asst-scene[data-live] .sc-lens { animation: asst-sc-lens 4s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-lens-mini { animation: asst-sc-lens-mini 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-point-browser { animation: asst-sc-point-browser 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-point-computer { animation: asst-sc-point-computer 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-point-mini { animation: asst-sc-point-mini 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] :is(.sc-ripple-browser, .sc-ripple-computer) { animation: asst-sc-ripple 3.6s cubic-bezier(0, 0, .38, .9) infinite; }
+  .asst-scene[data-live] .sc-hand { animation: asst-sc-spin 4s linear infinite; }
+  .asst-scene[data-live] .sc-run-dot { animation: asst-sc-run 3s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-shape { animation: asst-sc-shape 3.6s cubic-bezier(.2, 0, .38, .9) calc(var(--i, 0) * .5s) infinite both; }
+  .asst-scene[data-live] .sc-pen { animation: asst-sc-pen 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-tile { animation: asst-sc-develop 3.6s ease-in-out calc(var(--i, 0) * .22s) infinite both; }
+  .asst-scene[data-live] .sc-sparkle { animation: asst-sc-twinkle 2.2s ease-in-out infinite; }
+  .asst-scene[data-live] .sc-zap { animation: asst-sc-zap 1.1s ease-in-out infinite; }
+  .asst-scene[data-live] .sc-film { animation: asst-sc-film 1.4s linear infinite; }
+  .asst-scene[data-live] .sc-film-mini { animation: asst-sc-film-mini 1.2s linear infinite; }
+  .asst-scene[data-live] .sc-wrench { animation: asst-sc-wrench 1.1s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-spark { animation: asst-sc-spark 1.1s ease-out calc(var(--i, 0) * .08s) infinite both; }
+  .asst-scene[data-live] .sc-slide { animation: asst-sc-slide 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
+  .asst-scene[data-live] .sc-dot { animation: asst-sc-dot 1.2s ease-in-out calc(var(--i, 0) * .2s) infinite both; }
+
+  /* ── The agents tray: mini scenes (collapsed) and lanes (open) ──────── */
+  /* The minis keep their size: the summary beside them ellipsizes first (narrow panels: their own row, below). */
+  .asst-dock-minis { display: flex; flex: none; align-items: center; gap: 4px; }
+  .asst-dock-minis:empty { display: none; }
+  .asst-dock-mini, .asst-dock-more {
+    position: relative;
+    isolation: isolate;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    height: var(--asst-pill-h-sm, 22px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--asst-pill-r-sm, 6px);
+    background: var(--asst-fill-1, rgba(255,255,255,.04));
+    box-shadow: inset 0 0 0 1px var(--asst-line, rgba(255,255,255,.07));
+    color: var(--asst-text-3, rgba(255,255,255,.52));
+    font: inherit;
+    cursor: pointer;
+    transition: background-color var(--asst-dur-fast, 140ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9)), box-shadow var(--asst-dur-fast, 140ms) var(--asst-ease-standard, cubic-bezier(.2,0,.38,.9));
+  }
+  .asst-dock-mini { width: 38px; }
+  .asst-dock-mini .asst-scene { width: 32px; height: 16px; }
+  .asst-dock-more { min-width: var(--asst-pill-h-sm, 22px); padding: 0 6px; font-family: var(--asst-mono, 'JetBrains Mono', monospace); font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
+  :is(.asst-dock-mini, .asst-dock-more):hover { background: var(--asst-fill-2, rgba(255,255,255,.065)); color: var(--asst-text-2, rgba(255,255,255,.64)); }
+  .asst-dock-mini:is([data-phase="working"], [data-phase="queued"], [data-phase="starting"]) { box-shadow: inset 0 0 0 1px var(--asst-pill-on-ring, rgba(255,215,0,.36)); }
+  .asst-dock-mini[data-phase="waiting"] { --sc-gold: currentColor; box-shadow: inset 0 0 0 1px var(--asst-pill-warn-ring, rgba(255,183,77,.42)); }
+  /* Every tray control reaches 24×24: an invisible margin under the content. */
+  :is(.asst-dock-mini, .asst-dock-more, .asst-run-lane)::after { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; }
+  .asst-run-lane {
+    position: relative;
+    isolation: isolate;
+    grid-column: 2 / -1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    height: 22px;
+    margin-top: 2px;
+    padding: 0 6px 0 2px;
+    border: 0;
+    border-radius: var(--asst-pill-r-sm, 6px);
+    background: transparent;
+    color: var(--asst-text-2, rgba(255,255,255,.64));
+    font: inherit;
+    font-size: 11.5px;
+    text-align: left;
+    cursor: pointer;
+  }
+  .asst-run-lane:hover { background: var(--asst-fill-1, rgba(255,255,255,.04)); }
+  .asst-run-lane .asst-scene { flex: none; width: 32px; height: 16px; color: var(--asst-text-3, rgba(255,255,255,.52)); }
+  .asst-run-lane[data-phase="waiting"] .asst-scene { --sc-gold: currentColor; opacity: .55; }
+  .asst-run-lane-step { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .asst-run-lane[data-phase="waiting"] .asst-run-lane-step { color: var(--asst-warn, #ffb74d); }
+
+  /* ── Wider containers: a larger face and scene (the stage's height is still fixed for the width) ── */
+  @container asst (min-width: 361px) {
+    .asst-run-stage { grid-template-rows: 50px 16px; column-gap: 12px; }
+    .asst-run-stage-face, .asst-run-stage-face svg { width: 64px; height: 32px; }
+    .asst-run-stage-scene { height: 50px; }
+    .asst-run-stage-scene .asst-scene { width: 150px; height: 50px; }
+  }
+
+  /* ── Narrow containers ───────────────────────────────────────────────── */
+  @container asst (max-width: 420px) {
+    /* The head keeps the title, the summary and Stop all on one row; the minis get the next one, under the title. */
+    .asst-dock-head:has(> .asst-dock-minis:not(:empty)) { flex-wrap: wrap; row-gap: 2px; }
+    .asst-dock-head:has(> .asst-dock-minis:not(:empty)) > .asst-dock-toggle { flex: 1 1 0; }
+    .asst-dock-head:has(> .asst-dock-minis:not(:empty)) > .asst-dock-spacer { display: none; }
+    .asst-dock-minis { order: 1; flex-basis: 100%; padding: 0 0 2px 26px; }
+  }
+  @container asst (max-width: 320px) {
+    .asst-run-stage { column-gap: 8px; }
+    .asst-dock-minis { padding-left: 8px; }
+  }
+
+  /* ── Motion ─────────────────────────────────────────────────────────── */
+  ${codeFrames()}
+  @keyframes asst-sc-spin { to { transform: rotate(360deg); } }
+  @keyframes asst-sc-tick { 0%, 8% { opacity: 0; transform: scale(.4); } 16%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
+  @keyframes asst-sc-lens { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, 4px); } 50% { transform: translate(48px, 0); } 75% { transform: translate(34px, 5px); } }
+  @keyframes asst-sc-lens-mini { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, 2px); } }
+  @keyframes asst-sc-point-browser { 0%, 22% { transform: translate(92px, 29px); } 46%, 72% { transform: translate(26px, 16px); } 96%, 100% { transform: translate(92px, 29px); } }
+  @keyframes asst-sc-point-computer { 0%, 22% { transform: translate(90px, 22.5px); } 46%, 72% { transform: translate(32px, 9px); } 96%, 100% { transform: translate(90px, 22.5px); } }
+  @keyframes asst-sc-point-mini { 0%, 24% { transform: translate(29px, 13px) scale(.6); } 48%, 74% { transform: translate(12px, 8px) scale(.6); } 98%, 100% { transform: translate(29px, 13px) scale(.6); } }
+  @keyframes asst-sc-ripple { 0% { opacity: .9; transform: scale(.3); } 16% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
+  @keyframes asst-sc-run { 0% { opacity: 0; transform: translateX(0); } 8%, 12% { opacity: 1; transform: translateX(0); } 45%, 55% { transform: translateX(23px); } 88% { opacity: 1; transform: translateX(46px); } 100% { opacity: 0; transform: translateX(46px); } }
+  @keyframes asst-sc-shape { 0%, 6% { opacity: 0; transform: scale(.4); } 16%, 84% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.9); } }
+  @keyframes asst-sc-pen { 0%, 8% { transform: translate(47px, 13px); } 18%, 24% { transform: translate(73px, 13px); } 32%, 84% { transform: translate(100px, 20px); } 100% { transform: translate(47px, 13px); } }
+  @keyframes asst-sc-develop { 0% { opacity: .08; } 30%, 82% { opacity: 1; } 100% { opacity: .08; } }
+  @keyframes asst-sc-twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
+  @keyframes asst-sc-zap { 0%, 100% { opacity: .45; transform: scale(.92); } 40% { opacity: 1; transform: scale(1.06); } }
+  @keyframes asst-sc-film { to { transform: translateX(-24px); } }
+  @keyframes asst-sc-film-mini { to { transform: translateX(-12px); } }
+  @keyframes asst-sc-wrench { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
+  @keyframes asst-sc-spark { 0%, 38% { opacity: 0; } 50% { opacity: 1; } 72%, 100% { opacity: 0; } }
+  @keyframes asst-sc-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(68px); } }
+  @keyframes asst-sc-dot { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
+  body.ui-interacting .asst-scene *,
+  body.ui-interacting .asst-run-stage-sweep::after { animation-play-state: paused !important; }
+  @media (prefers-reduced-motion: reduce) {
+    .asst-run-stage-wrap,
+    .asst-run-stage,
+    .asst-run-stage *,
+    .asst-run-stage *::before,
+    .asst-run-stage *::after,
+    .asst-scene * { animation: none !important; transition: none !important; }
+    /* A frozen sweep would be a stray gold stub: no sweep at all. */
+    .asst-run-stage-sweep { display: none; }
+  }
+`;
+
+/** Add the stage and scene stylesheet once, right after the rack's (else the main assistant styles, else the head's end). */
+export function injectSceneStyles(doc = globalThis.document) {
+  if (!doc || doc.getElementById(SCENE_STYLE_ID)) return;
+  const style = doc.createElement('style');
+  style.id = SCENE_STYLE_ID;
+  style.textContent = SCENE_CSS;
+  const after = doc.getElementById('asst-rack-styles') || doc.getElementById('assistant-panel-styles');
+  if (after?.parentNode) after.after(style);
+  else doc.head.appendChild(style);
+}