synabun 2.1.0 → 2.2.1

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

@@ -116,6 +116,8 @@ export function runChip(run, t = tFallback) {
   }
   if (awaitsAnswer(run)) return { tone: 'action', label: t('assistant.run.waitingInput', 'waiting for your answer') };
   const tone = runTone(run);
+  // A held run whose card the user answered "here": the assistant does it, this worker never started.
+  if (run?.completionReason === 'route_here') return { tone, label: t('assistant.run.routedHere', 'not started: done here instead') };
   if (run?.turnState === 'awaiting_permission') return { tone, label: t('assistant.run.needsApproval', 'needs approval') };
   if (run?.turnState === 'needs_input') return { tone, label: t('assistant.run.needsInput', 'needs input') };
   // A Claude Code worker a server restart cut off, until the next start has resumed it (lib/assistant-dispatch.js).
@@ -169,6 +171,46 @@ export const CODEX_ITEM_EVENTS = Object.freeze({
  */
 export const OPENCODE_TOOL_STATES = Object.freeze(['running', 'completed', 'error']);
 
+// The path-like fields of an Antigravity tool call's arguments (lib/worker-confinement.js reads the same ones).
+const ACP_PATH_KEYS = ['path', 'file_path', 'filePath', 'Path', 'AbsolutePath', 'TargetFile', 'DirectoryPath', 'SearchPath'];
+
+/**
+ * An Antigravity (ACP) tool call as an activity: its `kind` says what it does (read, edit, delete,
+ * move, search, execute, think, fetch, switch_mode, other), its `rawInput` holds the tool's own
+ * arguments and its `locations` the files it touches. Another tool (an MCP server's) is read by its
+ * name, as for the other providers. null for a mode switch.
+ */
+function acpToolActivity(call) {
+  const args = obj(call.rawInput);
+  const kind = str(call.kind) || 'other';
+  const title = str(call.title).trim();
+  const paths = [...new Set([
+    ...(Array.isArray(call.locations) ? call.locations : []).map((location) => str(location?.path)),
+    ...ACP_PATH_KEYS.map((key) => (typeof args[key] === 'string' ? args[key] : '')),
+  ].filter(Boolean))];
+  const pick = (...values) => values.map((v) => (typeof v === 'string' ? v.trim() : '')).find(Boolean) || '';
+  switch (kind) {
+    case 'execute': {
+      const command = Array.isArray(args.command) ? args.command.map(str).join(' ') : pick(args.command, args.CommandLine, args.cmd);
+      return { kind: 'shell', name: 'exec_command', input: { command: command || title } };
+    }
+    case 'read': return { kind: 'read', name: 'read', input: { file_path: paths[0] || title } };
+    case 'edit': case 'delete': case 'move':
+      return { kind: 'edit', name: kind === 'edit' ? 'edit' : 'apply_patch', input: paths.length > 1 ? { changes: paths.map((path) => ({ path })) } : { file_path: paths[0] || title } };
+    case 'search': return { kind: 'search', name: 'grep', input: { pattern: pick(args.pattern, args.query, args.Query, args.Pattern) || title, path: paths[0] || '' } };
+    case 'fetch': {
+      const url = pick(args.url, args.Url, args.href);
+      return url ? { kind: 'web', name: 'WebFetch', input: { url } } : { kind: 'web', name: 'WebSearch', input: { query: pick(args.query, args.Query) || title } };
+    }
+    case 'think': return { kind: 'think', name: 'thinking', input: {} };
+    case 'switch_mode': return null;
+    default: {
+      const name = pick(call.name, args.toolName, title) || 'tool';
+      return { kind: kindOf(name, args), name, input: args };
+    }
+  }
+}
+
 /**
  * A worker's provider event ({ provider, eventType?, event }, the payload of
  * sync:sidepanel:provider-event) as what it is doing: { kind, name, input }
@@ -177,7 +219,11 @@ export const OPENCODE_TOOL_STATES = Object.freeze(['running', 'completed', 'erro
  * stage and the tray keep only compactActivity() of it. OpenCode names its
  * tools bash, read, edit, write, patch, glob, grep, list, webfetch,
  * websearch, codesearch, task, todowrite, and MCP tools `<server>_<tool>`
- * (SynaBun_browser_navigate): kindOf() reads all of them.
+ * (SynaBun_browser_navigate): kindOf() reads all of them. An Antigravity
+ * worker's events are ACP session updates (eventType = their `sessionUpdate`):
+ * a tool call when it is announced (`tool_call`, or an update that starts it
+ * and names its kind), a thought chunk as thinking, a plan as planning; its
+ * message text is no activity, as for the others.
  */
 export function activityOf(payload) {
   const provider = str(payload?.provider);
@@ -222,6 +268,13 @@ export function activityOf(payload) {
     const input = obj(part.state?.input);
     return { kind: kindOf(name, input), name, input };
   }
+  if (provider === 'antigravity') {
+    const type = str(payload.eventType || event.sessionUpdate);
+    if (type === 'agent_thought_chunk') return { kind: 'think', name: 'thinking', input: {} };
+    if (type === 'plan') return { kind: 'plan', name: 'update_plan', input: { todos: Array.isArray(event.entries) ? event.entries : [] } };
+    if (type === 'tool_call' || (type === 'tool_call_update' && str(event.kind) && event.status === 'in_progress')) return acpToolActivity(event);
+    return null;
+  }
   return null;
 }
 
@@ -347,12 +400,77 @@ export function stageLabel({ scene = 'generic', phase = 'working', title = '', m
 // currentColor (the container's muted text); `sc-gold` is the one live part
 // (gold only means live). Every part sits where its still frame wants it:
 // with no animation (reduced motion, waiting, settled) the scene still reads.
+//
+// A scene is an HTML box (`.asst-scene`, sized by its holder) holding one SVG
+// of everything that stands still (`.sc-base`) and, for every part that
+// moves, an HTML layer of its own (`.sc-layer`: a box over the whole scene
+// with an SVG of that part alone in the same viewBox, so the part sits
+// exactly where it did). The CSS moves the layer box, transform and opacity
+// only, never an SVG element: a box's animation runs on the compositor, and a
+// frame the page draws anyway (a rig's) restyles one span and lays nothing
+// out, where a moving SVG part re-lays its whole SVG out on every frame.
+// Lengths are percentages of the box, since a scene is drawn at several sizes
+// (boxPct); a part that turned round its own centre (the SVG's fill-box)
+// turns round the same point here (`transform-origin`). Parts on the same
+// beat share a layer (the image's tiles); a part that stood above a moving
+// one stays above it in a still layer of its own (`.sc-top`: the playhead).
 
 /** The code scene's six lines, repeated twice so its stepped scroll loops seamlessly: [indent, keyword, rest]. */
 export const CODE_LINES = Object.freeze([[6, 8, 26], [12, 10, 42], [12, 6, 22], [18, 9, 35], [12, 12, 48], [6, 7, 14]]);
 export const CODE_STEP = 6; // one line, in viewBox units
+/** The code scene's scrolling window and the video scene's film window (full) and the mini film's: [x, y, w, h]. */
+export const CODE_WINDOW = Object.freeze([4, 4, 112, 32]);
+export const FILM_WINDOW = Object.freeze([4, 4, 112, 32]);
+export const FILM_MINI_WINDOW = Object.freeze([2, 2, 36, 16]);
+
+/** The viewBox of a full scene and of a mini, in units. */
+export const SCENE_BOX = Object.freeze({ full: Object.freeze({ w: 120, h: 40 }), mini: Object.freeze({ w: 40, h: 20 }) });
 
 const r1 = (v) => Math.round(v * 100) / 100;
+const r3 = (v) => Math.round(v * 1000) / 1000;
+
+/** A length in viewBox units as a percentage of the box's width or height: boxPct(14, 120) → '11.667%'. */
+export function boxPct(v, of) {
+  return `${r3((Number(v) / of) * 100)}%`;
+}
+
+/**
+ * The centre of a polyline path's box (M L H V Z, absolute or relative):
+ * where an SVG part with transform-box: fill-box turned round (a tick, the
+ * zap, a triangle). Curves are not read (no moving part has one).
+ */
+export function pathCentre(d) {
+  const tokens = String(d).match(/[MLHVZmlhvz]|-?\d*\.?\d+/g) || [];
+  const xs = [];
+  const ys = [];
+  let x = 0;
+  let y = 0;
+  let sx = 0;
+  let sy = 0;
+  let cmd = 'M';
+  let i = 0;
+  const num = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    if (/^[A-Za-z]$/.test(tokens[i])) {
+      cmd = tokens[i];
+      i += 1;
+      if (cmd === 'Z' || cmd === 'z') { x = sx; y = sy; continue; }
+    }
+    if (cmd === 'M') { x = num(); y = num(); sx = x; sy = y; cmd = 'L'; }
+    else if (cmd === 'm') { x += num(); y += num(); sx = x; sy = y; cmd = 'l'; }
+    else if (cmd === 'L') { x = num(); y = num(); }
+    else if (cmd === 'l') { x += num(); y += num(); }
+    else if (cmd === 'H') x = num();
+    else if (cmd === 'h') x += num();
+    else if (cmd === 'V') y = num();
+    else if (cmd === 'v') y += num();
+    else { i += 1; continue; }
+    xs.push(x);
+    ys.push(y);
+  }
+  if (!xs.length) return [0, 0];
+  return [r3((Math.min(...xs) + Math.max(...xs)) / 2), r3((Math.min(...ys) + Math.max(...ys)) / 2)];
+}
 
 /** A gear outline: n trapezoid teeth between radius r and R round (cx, cy). */
 export function gearPath(cx, cy, r, R, n) {
@@ -373,93 +491,149 @@ export function codeCaretX(s) {
   return 4 + indent + key + 3 + rest + 2;
 }
 
-function codeFull() {
+const SVG_ATTRS = 'fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" focusable="false"';
+const svgOf = (viewBox, body) => `<svg viewBox="${viewBox}" ${SVG_ATTRS}>${body}</svg>`;
+
+/** Everything of a scene that stands still: one SVG under the layers. */
+function base(box, body) {
+  return `<svg class="sc-base" viewBox="0 0 ${box.w} ${box.h}" width="${box.w}" height="${box.h}" ${SVG_ATTRS}>${body}</svg>`;
+}
+
+/**
+ * One moving part's layer, over the whole box (or over a window: clipOf).
+ * `cls` names its motion (the CSS animates it); `body` is the part's SVG
+ * markup in the box's units, or `html` another layer inside it (a caret that
+ * blinks inside a caret that steps). `origin` [x, y]: what rotation and scale
+ * turn round (the old fill-box centre, or a view-box point); `still` [x, y,
+ * more]: the resting transform of a part drawn at 0,0; `i`: its beat.
+ */
+function layerOf(box, cls, body, { origin = null, still = null, i = null, html = null } = {}) {
+  const style = [];
+  if (i != null) style.push(`--i:${i}`);
+  if (origin) style.push(`transform-origin:${boxPct(origin[0], box.w)} ${boxPct(origin[1], box.h)}`);
+  if (still) style.push(`transform:translate(${boxPct(still[0], box.w)},${boxPct(still[1], box.h)})${still[2] ? ` ${still[2]}` : ''}`);
+  const inner = html != null ? html : svgOf(`0 0 ${box.w} ${box.h}`, body);
+  return `<span class="sc-layer${cls ? ` ${cls}` : ''}"${style.length ? ` style="${style.join(';')}"` : ''}>${inner}</span>`;
+}
+
+/** A still part that stood above a moving one: it stays above it. */
+const topOf = (box, body) => layerOf(box, 'sc-top', body);
+
+/** A clipped window of the scene ([x, y, w, h] in units): what scrolls inside it is cut at its edges. */
+function clipOf(box, [x, y, w, h], inner) {
+  return `<span class="sc-clip" style="left:${boxPct(x, box.w)};top:${boxPct(y, box.h)};width:${boxPct(w, box.w)};height:${boxPct(h, box.h)}">${inner}</span>`;
+}
+
+/** Parts that share a beat (`--i`) share one layer: [{ i, body }] → one layer per beat, in first-seen order. */
+function beatLayers(box, cls, parts) {
+  const beats = new Map();
+  for (const { i, body } of parts) beats.set(i, (beats.get(i) || '') + body);
+  return [...beats].map(([i, body]) => layerOf(box, cls, body, { i })).join('');
+}
+
+function codeFull(box) {
   let lines = '';
   for (let i = 0; i < CODE_LINES.length * 2; i += 1) {
     const [indent, key, rest] = CODE_LINES[i % CODE_LINES.length];
     const y = 5 + CODE_STEP * i;
     lines += `<path class="sc-mid" d="M${indent} ${y}h${key}"/><path class="sc-dim" d="M${indent + key + 3} ${y}h${rest}"/>`;
   }
-  return '<rect class="sc-dim" x="1" y="1.5" width="118" height="37" rx="5"/>'
-    + `<svg x="4" y="4" width="112" height="32" overflow="hidden"><g class="sc-code-scroll">${lines}</g></svg>`
-    + `<g class="sc-code-caret" style="transform:translateX(${codeCaretX(0)}px)"><rect class="sc-gold sc-fill sc-caret" x="0" y="30.5" width="2" height="5" rx="1"/></g>`;
+  const [, , w, h] = CODE_WINDOW;
+  const caret = layerOf(box, 'sc-caret', '<rect class="sc-gold sc-fill" x="0" y="30.5" width="2" height="5" rx="1"/>');
+  return base(box, '<rect class="sc-dim" x="1" y="1.5" width="118" height="37" rx="5"/>')
+    + clipOf(box, CODE_WINDOW, layerOf({ w, h }, 'sc-code-scroll', lines))
+    + layerOf(box, 'sc-code-caret', null, { still: [codeCaretX(0), 0], html: caret });
 }
 
 const GEAR_BIG = gearPath(66, 20, 9, 12.5, 8);
 const GEAR_SMALL = gearPath(86.5, 12.5, 5.5, 8, 6);
 
-function complexFull() {
-  return '<path class="sc-dim" d="M14 7h13l5 5v21H14z"/><path class="sc-mid" d="M8 11h13l5 5v21H8zM21 11v5h5M12 23h9M12 28h11"/>'
-    + `<g class="sc-gear-big sc-box"><path class="sc-mid" d="${GEAR_BIG}"/><circle class="sc-dim" cx="66" cy="20" r="3.2"/></g>`
-    + `<g class="sc-gear-small sc-box"><path class="sc-gold" d="${GEAR_SMALL}"/><circle class="sc-gold" cx="86.5" cy="12.5" r="2"/></g>`
-    + '<path class="sc-dim" d="M98 30h14M102 25h10"/>';
+function complexFull(box) {
+  return base(box, '<path class="sc-dim" d="M14 7h13l5 5v21H14z"/><path class="sc-mid" d="M8 11h13l5 5v21H8zM21 11v5h5M12 23h9M12 28h11"/><path class="sc-dim" d="M98 30h14M102 25h10"/>')
+    + layerOf(box, 'sc-gear-big', `<path class="sc-mid" d="${GEAR_BIG}"/><circle class="sc-dim" cx="66" cy="20" r="3.2"/>`, { origin: [66, 20] })
+    + layerOf(box, 'sc-gear-small', `<path class="sc-gold" d="${GEAR_SMALL}"/><circle class="sc-gold" cx="86.5" cy="12.5" r="2"/>`, { origin: [86.5, 12.5] });
 }
 
-function reviewFull() {
+/** A review tick, its own layer (it pops round its own centre). */
+function tickLayer(box, d, i) {
+  return layerOf(box, 'sc-tick', `<path class="sc-gold" d="${d}"/>`, { origin: pathCentre(d), i });
+}
+
+function reviewFull(box) {
   const rows = [[9, '+', 52], [16, '-', 64], [23, '+', 40], [30, '+', 58]];
-  let out = '<rect class="sc-dim" x="1" y="1.5" width="118" height="37" rx="5"/>';
+  let still = '<rect class="sc-dim" x="1" y="1.5" width="118" height="37" rx="5"/>';
+  let ticks = '';
   rows.forEach(([y, sign, len], i) => {
-    out += sign === '+' ? `<path class="sc-mid" d="M6 ${y}h4M8 ${y - 2}v4"/>` : `<path class="sc-mid" d="M6 ${y}h4"/>`;
-    out += `<path class="sc-dim" d="M15 ${y}h${len}"/>`;
-    out += `<path class="sc-gold sc-tick sc-box" style="--i:${i}" d="M${95} ${y}l2.2 2.2 4.4-4.6"/>`;
+    still += sign === '+' ? `<path class="sc-mid" d="M6 ${y}h4M8 ${y - 2}v4"/>` : `<path class="sc-mid" d="M6 ${y}h4"/>`;
+    still += `<path class="sc-dim" d="M15 ${y}h${len}"/>`;
+    ticks += tickLayer(box, `M95 ${y}l2.2 2.2 4.4-4.6`, i);
   });
-  return out;
+  return base(box, still) + ticks;
 }
 
-function researchFull() {
+function researchFull(box) {
   const page = (x) => `<rect class="sc-dim" x="${x}" y="4" width="40" height="32" rx="3"/><path class="sc-dim" d="M${x + 6} 11h26M${x + 6} 17h22M${x + 6} 23h28M${x + 6} 29h16"/>`;
-  return page(8) + page(56)
-    + '<g class="sc-lens"><circle class="sc-gold" cx="24" cy="17" r="7"/><path class="sc-gold" d="M29.2 22.2l5 5"/></g>';
+  return base(box, page(8) + page(56))
+    + layerOf(box, 'sc-lens', '<circle class="sc-gold" cx="24" cy="17" r="7"/><path class="sc-gold" d="M29.2 22.2l5 5"/>');
 }
 
 const POINTER = 'M0 0v10.5l2.8-2.6 2 4.4 2-.9-2-4.3h3.9z';
 
-function browserFull() {
-  return '<rect class="sc-dim" x="1" y="1.5" width="118" height="37" rx="5"/><path class="sc-dim" d="M1 9.5h118"/>'
+/** A click's ring (a layer that starts invisible: .sc-ring) and the pointer that clicks there (drawn at 0,0, placed by its layer). */
+function pointerLayers(box, kind, [cx, cy], r) {
+  return layerOf(box, `sc-ring sc-ripple-${kind}`, `<circle class="sc-gold" cx="${cx}" cy="${cy}" r="${r}"/>`, { origin: [cx, cy] })
+    + layerOf(box, `sc-point-${kind}`, `<path class="sc-gold sc-fill" d="${POINTER}"/>`, { still: [cx, cy] });
+}
+
+function browserFull(box) {
+  return base(box, '<rect class="sc-dim" x="1" y="1.5" width="118" height="37" rx="5"/><path class="sc-dim" d="M1 9.5h118"/>'
     + '<circle class="sc-mid sc-fill" cx="6" cy="5.5" r="1"/><circle class="sc-mid sc-fill" cx="10" cy="5.5" r="1"/><circle class="sc-mid sc-fill" cx="14" cy="5.5" r="1"/>'
     + '<rect class="sc-dim" x="22" y="3.5" width="56" height="4" rx="2"/>'
-    + '<path class="sc-mid" d="M8 16h36"/><path class="sc-dim" d="M8 22h54M8 27h44M8 32h30"/><rect class="sc-mid" x="78" y="25" width="28" height="8" rx="2"/>'
-    + '<circle class="sc-gold sc-ring sc-ripple-browser sc-box" cx="92" cy="29" r="5"/>'
-    + `<g class="sc-point-browser" style="transform:translate(92px,29px)"><path class="sc-gold sc-fill" d="${POINTER}"/></g>`;
+    + '<path class="sc-mid" d="M8 16h36"/><path class="sc-dim" d="M8 22h54M8 27h44M8 32h30"/><rect class="sc-mid" x="78" y="25" width="28" height="8" rx="2"/>')
+    + pointerLayers(box, 'browser', [92, 29], 5);
 }
 
-function computerFull() {
-  return '<rect class="sc-dim" x="10" y="1.5" width="100" height="30" rx="3"/><path class="sc-dim" d="M60 31.5v4M48 37.5h24"/>'
+function computerFull(box) {
+  return base(box, '<rect class="sc-dim" x="10" y="1.5" width="100" height="30" rx="3"/><path class="sc-dim" d="M60 31.5v4M48 37.5h24"/>'
     + '<rect class="sc-mid sc-shade" x="16" y="6" width="44" height="20" rx="2"/><path class="sc-dim" d="M16 10h44M21 15h20M21 20h28"/>'
-    + '<rect class="sc-mid sc-shade" x="52" y="11" width="50" height="17" rx="2"/><path class="sc-dim" d="M52 15h50"/><rect class="sc-mid" x="84" y="20" width="13" height="5" rx="1.5"/>'
-    + '<circle class="sc-gold sc-ring sc-ripple-computer sc-box" cx="90" cy="22.5" r="4.5"/>'
-    + `<g class="sc-point-computer" style="transform:translate(90px,22.5px)"><path class="sc-gold sc-fill" d="${POINTER}"/></g>`;
+    + '<rect class="sc-mid sc-shade" x="52" y="11" width="50" height="17" rx="2"/><path class="sc-dim" d="M52 15h50"/><rect class="sc-mid" x="84" y="20" width="13" height="5" rx="1.5"/>')
+    + pointerLayers(box, 'computer', [90, 22.5], 4.5);
 }
 
-function automationFull() {
-  return '<circle class="sc-mid" cx="18" cy="20" r="13"/><path class="sc-dim" d="M18 9v2M18 29v2M7 20h2M27 20h2"/>'
-    + '<path class="sc-mid" d="M18 20l5-4"/>'
-    + '<g class="sc-hand sc-vb" style="transform-origin:18px 20px"><path class="sc-gold" d="M18 20v-9"/></g><circle class="sc-gold sc-fill" cx="18" cy="20" r="1.6"/>'
+function automationFull(box) {
+  // The hub dot sits in the still SVG: hand and dot are the same gold, so which is on top shows nowhere.
+  return base(box, '<circle class="sc-mid" cx="18" cy="20" r="13"/><path class="sc-dim" d="M18 9v2M18 29v2M7 20h2M27 20h2"/>'
+    + '<path class="sc-mid" d="M18 20l5-4"/><circle class="sc-gold sc-fill" cx="18" cy="20" r="1.6"/>'
     + '<path class="sc-dim" d="M52 24h14M76 24h14"/><rect class="sc-mid" x="44" y="20" width="8" height="8" rx="2"/><rect class="sc-mid" x="66" y="20" width="10" height="8" rx="2"/><rect class="sc-mid" x="90" y="20" width="8" height="8" rx="2"/>'
-    + '<path class="sc-dim" d="M94 17c0-9-46-9-46 0M48 17l-2.5-3M48 17l3-2"/>'
-    + '<g class="sc-run-dot"><circle class="sc-gold sc-fill" cx="48" cy="24" r="2.2"/></g>';
+    + '<path class="sc-dim" d="M94 17c0-9-46-9-46 0M48 17l-2.5-3M48 17l3-2"/>')
+    + layerOf(box, 'sc-hand', '<path class="sc-gold" d="M18 20v-9"/>', { origin: [18, 20] })
+    + layerOf(box, 'sc-run-dot', '<circle class="sc-gold sc-fill" cx="48" cy="24" r="2.2"/>');
 }
 
-function designFull() {
-  return '<rect class="sc-gold sc-fill sc-swatch" x="4" y="5" width="9" height="9" rx="2"/><rect class="sc-mid sc-fill sc-swatch-b" x="4" y="16" width="9" height="9" rx="2"/><rect class="sc-dim sc-fill sc-swatch-c" x="4" y="27" width="9" height="9" rx="2"/>'
-    + '<rect class="sc-dim" x="20" y="2.5" width="96" height="35" rx="4"/>'
-    + '<circle class="sc-mid sc-shape sc-box" style="--i:0" cx="40" cy="20" r="8"/>'
-    + '<rect class="sc-mid sc-shape sc-box" style="--i:1" x="58" y="12" width="16" height="16" rx="3"/>'
-    + '<path class="sc-mid sc-shape sc-box" style="--i:2" d="M86 28l9-16 9 16z"/>'
-    + '<g class="sc-pen" style="transform:translate(40px,20px)"><path class="sc-gold" d="M0 0l6-6M6-6l2.5 2.5M0 0l-1.2 3.7L2.5 2.5z"/></g>';
+const TRIANGLE = 'M86 28l9-16 9 16z';
+
+function designFull(box) {
+  return base(box, '<rect class="sc-gold sc-fill sc-swatch" x="4" y="5" width="9" height="9" rx="2"/><rect class="sc-mid sc-fill sc-swatch-b" x="4" y="16" width="9" height="9" rx="2"/><rect class="sc-dim sc-fill sc-swatch-c" x="4" y="27" width="9" height="9" rx="2"/>'
+    + '<rect class="sc-dim" x="20" y="2.5" width="96" height="35" rx="4"/>')
+    + layerOf(box, 'sc-shape', '<circle class="sc-mid" cx="40" cy="20" r="8"/>', { origin: [40, 20], i: 0 })
+    + layerOf(box, 'sc-shape', '<rect class="sc-mid" x="58" y="12" width="16" height="16" rx="3"/>', { origin: [66, 20], i: 1 })
+    + layerOf(box, 'sc-shape', `<path class="sc-mid" d="${TRIANGLE}"/>`, { origin: pathCentre(TRIANGLE), i: 2 })
+    + layerOf(box, 'sc-pen', '<path class="sc-gold" d="M0 0l6-6M6-6l2.5 2.5M0 0l-1.2 3.7L2.5 2.5z"/>', { still: [40, 20] });
 }
 
-function imageFull() {
-  let tiles = '';
+const SPARKLE = 'M104 6l1.6 4.4L110 12l-4.4 1.6L104 18l-1.6-4.4L98 12l4.4-1.6z';
+
+function imageFull(box) {
+  const tiles = [];
   for (let row = 0; row < 3; row += 1) {
     for (let col = 0; col < 4; col += 1) {
       const gold = (row === 1 && col === 2) || (row === 2 && col === 0);
-      tiles += `<rect class="${gold ? 'sc-gold' : 'sc-mid'} sc-fill sc-tile" style="--i:${row + col}" x="${34 + col * 13.5}" y="${6 + row * 10}" width="11.5" height="8" rx="1.5"/>`;
+      tiles.push({ i: row + col, body: `<rect class="${gold ? 'sc-gold' : 'sc-mid'} sc-fill" x="${34 + col * 13.5}" y="${6 + row * 10}" width="11.5" height="8" rx="1.5"/>` });
     }
   }
-  return `<rect class="sc-dim" x="30" y="2.5" width="61" height="35" rx="3"/>${tiles}`
-    + '<g class="sc-sparkle sc-box"><path class="sc-gold sc-fill" d="M104 6l1.6 4.4L110 12l-4.4 1.6L104 18l-1.6-4.4L98 12l4.4-1.6z"/></g>'
-    + '<path class="sc-dim" d="M100 26h12M100 31h8"/>';
+  return base(box, '<rect class="sc-dim" x="30" y="2.5" width="61" height="35" rx="3"/><path class="sc-dim" d="M100 26h12M100 31h8"/>')
+    + beatLayers(box, 'sc-tile', tiles)
+    + layerOf(box, 'sc-sparkle', `<path class="sc-gold sc-fill" d="${SPARKLE}"/>`, { origin: pathCentre(SPARKLE) });
 }
 
 function filmFrames(width, y, h, frameW, count) {
@@ -469,47 +643,71 @@ function filmFrames(width, y, h, frameW, count) {
   return out;
 }
 
-function videoFull() {
-  return `<svg x="4" y="4" width="112" height="32" overflow="hidden"><g class="sc-film">${filmFrames(160, 2, 28, 24, 7)}</g></svg>`
-    + '<path class="sc-gold" d="M58 2v36M55 2h6l-3 3z"/>';
+function videoFull(box) {
+  const [, , w, h] = FILM_WINDOW;
+  return base(box, '')
+    + clipOf(box, FILM_WINDOW, layerOf({ w, h }, 'sc-film', filmFrames(160, 2, 28, 24, 7)))
+    + topOf(box, '<path class="sc-gold" d="M58 2v36M55 2h6l-3 3z"/>');
 }
 
 /** An open-end wrench, horizontal, its jaw round (0, 0): place it with translate(bolt) rotate(a) translate(3.5 0). */
 const WRENCH = 'M-4.6 -3.86L-1 -2V2L-4.6 3.86A6 6 0 0 0 5.5 2.4H24A2.4 2.4 0 0 0 24 -2.4H5.5A6 6 0 0 0 -4.6 -3.86Z';
 const hexagon = (cx, cy, r) => `M${[0, 1, 2, 3, 4, 5].map(i => `${r1(cx + r * Math.cos(i * Math.PI / 3))} ${r1(cy + r * Math.sin(i * Math.PI / 3))}`).join('L')}Z`;
+const ZAP = 'M92 5l-8 15h7l-3 14 11-18h-7.5z';
+
+/** Sparks off the bolt: one layer each (they flash one after another). */
+const sparkLayers = (box, ds) => ds.map((d, i) => layerOf(box, 'sc-spark', `<path class="sc-gold" d="${d}"/>`, { i })).join('');
 
-function quickFull() {
-  return `<path class="sc-mid" d="${hexagon(38, 24, 3.4)}"/>`
-    + `<g class="sc-wrench sc-vb" style="transform-origin:38px 24px"><path class="sc-gold" transform="translate(38 24) rotate(-32) translate(3.5 0)" d="${WRENCH}"/></g>`
-    + '<path class="sc-gold sc-spark" style="--i:0" d="M30.5 19.5l-3-2"/><path class="sc-gold sc-spark" style="--i:1" d="M29.5 24.5h-3.5"/><path class="sc-gold sc-spark" style="--i:2" d="M30.5 29.5l-3 2"/>'
-    + '<g class="sc-zap sc-box"><path class="sc-gold" d="M92 5l-8 15h7l-3 14 11-18h-7.5z"/></g>';
+function quickFull(box) {
+  return base(box, `<path class="sc-mid" d="${hexagon(38, 24, 3.4)}"/>`)
+    + layerOf(box, 'sc-wrench', `<path class="sc-gold" transform="translate(38 24) rotate(-32) translate(3.5 0)" d="${WRENCH}"/>`, { origin: [38, 24] })
+    + sparkLayers(box, ['M30.5 19.5l-3-2', 'M29.5 24.5h-3.5', 'M30.5 29.5l-3 2'])
+    + layerOf(box, 'sc-zap', `<path class="sc-gold" d="${ZAP}"/>`, { origin: pathCentre(ZAP) });
 }
 
-function genericFull() {
-  return '<path class="sc-dim" d="M14 20h92"/><circle class="sc-mid" cx="14" cy="20" r="3"/><circle class="sc-mid" cx="60" cy="20" r="3"/><circle class="sc-mid" cx="106" cy="20" r="3"/>'
-    + '<g class="sc-slide"><rect class="sc-gold sc-fill" x="14" y="18.5" width="24" height="3" rx="1.5"/></g>';
+function genericFull(box) {
+  return base(box, '<path class="sc-dim" d="M14 20h92"/><circle class="sc-mid" cx="14" cy="20" r="3"/><circle class="sc-mid" cx="60" cy="20" r="3"/><circle class="sc-mid" cx="106" cy="20" r="3"/>')
+    + layerOf(box, 'sc-slide', '<rect class="sc-gold sc-fill" x="14" y="18.5" width="24" height="3" rx="1.5"/>');
 }
 
+const MINI_TRIANGLE = 'M29 15l4.5-8 4.5 8z';
+
 // Minis (40×20, the tray at 32×16): one gesture each.
 const MINI = {
-  code: () => '<path class="sc-mid" d="M5 5h20M9 10h24M5 15h14"/><rect class="sc-gold sc-fill sc-caret" x="21.5" y="12.5" width="1.8" height="5" rx=".9"/>',
-  complex: () => `<g class="sc-gear-big sc-box"><path class="sc-mid" d="${gearPath(14, 11, 4.5, 6.6, 6)}"/></g><g class="sc-gear-small sc-box"><path class="sc-gold" d="${gearPath(26.5, 7.5, 3, 4.6, 6)}"/></g>`,
-  review: () => '<path class="sc-dim" d="M4 5h20M4 10h24M4 15h18"/><path class="sc-gold sc-tick sc-box" style="--i:0" d="M30 5l1.6 1.6 3.2-3.4"/><path class="sc-gold sc-tick sc-box" style="--i:1" d="M32 10l1.6 1.6 3.2-3.4"/>',
-  research: () => '<rect class="sc-dim" x="3" y="2.5" width="26" height="15" rx="2"/><path class="sc-dim" d="M7 7h16M7 11h12M7 15h14"/><g class="sc-lens-mini"><circle class="sc-gold" cx="12" cy="9" r="3.8"/><path class="sc-gold" d="M14.8 11.8l2.8 2.8"/></g>',
-  browser: () => `<rect class="sc-dim" x="2" y="2" width="36" height="16" rx="2.5"/><path class="sc-dim" d="M2 6h36"/><rect class="sc-mid" x="24" y="11" width="10" height="4" rx="1.2"/><g class="sc-point-mini" style="transform:translate(29px,13px) scale(.6)"><path class="sc-gold sc-fill" d="${POINTER}"/></g>`,
-  computer: () => `<rect class="sc-dim" x="5" y="1.5" width="30" height="14" rx="2"/><path class="sc-dim" d="M20 15.5v2M15 18.5h10"/><rect class="sc-mid" x="8" y="4.5" width="13" height="8" rx="1"/><g class="sc-point-mini" style="transform:translate(29px,13px) scale(.6)"><path class="sc-gold sc-fill" d="${POINTER}"/></g>`,
-  automation: () => '<circle class="sc-mid" cx="11" cy="10" r="7.5"/><path class="sc-dim" d="M11 10l3-2.5"/><g class="sc-hand sc-vb" style="transform-origin:11px 10px"><path class="sc-gold" d="M11 10V4.5"/></g>'
-    + '<path class="sc-mid" d="M33.5 10a5 5 0 1 1-1.5-3.6M32 3.6v2.8h-2.8"/>',
-  design: () => '<rect class="sc-mid sc-fill" x="3" y="3" width="6" height="6" rx="1.5"/><rect class="sc-dim sc-fill" x="3" y="11" width="6" height="6" rx="1.5"/><circle class="sc-gold sc-shape sc-box" style="--i:0" cx="21" cy="10" r="5"/><path class="sc-mid sc-shape sc-box" style="--i:1" d="M29 15l4.5-8 4.5 8z"/>',
-  image_gen: () => {
-    let tiles = '';
-    for (let row = 0; row < 2; row += 1) for (let col = 0; col < 3; col += 1) tiles += `<rect class="${row === 1 && col === 2 ? 'sc-gold' : 'sc-mid'} sc-fill sc-tile" style="--i:${row + col}" x="${11 + col * 6.4}" y="${5 + row * 5.6}" width="5" height="4.2" rx="1"/>`;
-    return `<rect class="sc-dim" x="9" y="2.5" width="22" height="15" rx="2"/>${tiles}`;
+  code: box => base(box, '<path class="sc-mid" d="M5 5h20M9 10h24M5 15h14"/>')
+    + layerOf(box, 'sc-caret', '<rect class="sc-gold sc-fill" x="21.5" y="12.5" width="1.8" height="5" rx=".9"/>'),
+  complex: box => base(box, '')
+    + layerOf(box, 'sc-gear-big', `<path class="sc-mid" d="${gearPath(14, 11, 4.5, 6.6, 6)}"/>`, { origin: [14, 11] })
+    + layerOf(box, 'sc-gear-small', `<path class="sc-gold" d="${gearPath(26.5, 7.5, 3, 4.6, 6)}"/>`, { origin: [26.5, 7.5] }),
+  review: box => base(box, '<path class="sc-dim" d="M4 5h20M4 10h24M4 15h18"/>')
+    + tickLayer(box, 'M30 5l1.6 1.6 3.2-3.4', 0) + tickLayer(box, 'M32 10l1.6 1.6 3.2-3.4', 1),
+  research: box => base(box, '<rect class="sc-dim" x="3" y="2.5" width="26" height="15" rx="2"/><path class="sc-dim" d="M7 7h16M7 11h12M7 15h14"/>')
+    + layerOf(box, 'sc-lens-mini', '<circle class="sc-gold" cx="12" cy="9" r="3.8"/><path class="sc-gold" d="M14.8 11.8l2.8 2.8"/>'),
+  browser: box => base(box, '<rect class="sc-dim" x="2" y="2" width="36" height="16" rx="2.5"/><path class="sc-dim" d="M2 6h36"/><rect class="sc-mid" x="24" y="11" width="10" height="4" rx="1.2"/>')
+    + layerOf(box, 'sc-point-mini', `<path class="sc-gold sc-fill" d="${POINTER}"/>`, { still: [29, 13, 'scale(.6)'] }),
+  computer: box => base(box, '<rect class="sc-dim" x="5" y="1.5" width="30" height="14" rx="2"/><path class="sc-dim" d="M20 15.5v2M15 18.5h10"/><rect class="sc-mid" x="8" y="4.5" width="13" height="8" rx="1"/>')
+    + layerOf(box, 'sc-point-mini', `<path class="sc-gold sc-fill" d="${POINTER}"/>`, { still: [29, 13, 'scale(.6)'] }),
+  automation: box => base(box, '<circle class="sc-mid" cx="11" cy="10" r="7.5"/><path class="sc-dim" d="M11 10l3-2.5"/><path class="sc-mid" d="M33.5 10a5 5 0 1 1-1.5-3.6M32 3.6v2.8h-2.8"/>')
+    + layerOf(box, 'sc-hand', '<path class="sc-gold" d="M11 10V4.5"/>', { origin: [11, 10] }),
+  design: box => base(box, '<rect class="sc-mid sc-fill" x="3" y="3" width="6" height="6" rx="1.5"/><rect class="sc-dim sc-fill" x="3" y="11" width="6" height="6" rx="1.5"/>')
+    + layerOf(box, 'sc-shape', '<circle class="sc-gold" cx="21" cy="10" r="5"/>', { origin: [21, 10], i: 0 })
+    + layerOf(box, 'sc-shape', `<path class="sc-mid" d="${MINI_TRIANGLE}"/>`, { origin: pathCentre(MINI_TRIANGLE), i: 1 }),
+  image_gen: (box) => {
+    const tiles = [];
+    for (let row = 0; row < 2; row += 1) for (let col = 0; col < 3; col += 1) tiles.push({ i: row + col, body: `<rect class="${row === 1 && col === 2 ? 'sc-gold' : 'sc-mid'} sc-fill" x="${11 + col * 6.4}" y="${5 + row * 5.6}" width="5" height="4.2" rx="1"/>` });
+    return base(box, '<rect class="sc-dim" x="9" y="2.5" width="22" height="15" rx="2"/>') + beatLayers(box, 'sc-tile', tiles);
+  },
+  video_gen: (box) => {
+    const [, , w, h] = FILM_MINI_WINDOW;
+    return base(box, '')
+      + clipOf(box, FILM_MINI_WINDOW, layerOf({ w, h }, 'sc-film-mini', filmFrames(60, 1, 14, 12, 5)))
+      + topOf(box, '<path class="sc-gold" d="M20 1v18"/>');
   },
-  video_gen: () => `<svg x="2" y="2" width="36" height="16" overflow="hidden"><g class="sc-film-mini">${filmFrames(60, 1, 14, 12, 5)}</g></svg><path class="sc-gold" d="M20 1v18"/>`,
-  quick: () => `<path class="sc-mid" d="${hexagon(11, 11, 2.6)}"/><g class="sc-wrench sc-vb" style="transform-origin:11px 11px"><path class="sc-gold" stroke-width="2.4" transform="translate(11 11) rotate(-32) scale(.62) translate(3.5 0)" d="${WRENCH}"/></g>`
-    + '<path class="sc-gold sc-spark" style="--i:0" d="M5.5 7.5l-2-1.3"/><path class="sc-gold sc-spark" style="--i:1" d="M5 11.5H2.6"/>',
-  generic: () => '<circle class="sc-gold sc-fill sc-dot" style="--i:0" cx="11" cy="10" r="2.4"/><circle class="sc-gold sc-fill sc-dot" style="--i:1" cx="20" cy="10" r="2.4"/><circle class="sc-gold sc-fill sc-dot" style="--i:2" cx="29" cy="10" r="2.4"/>',
+  quick: box => base(box, `<path class="sc-mid" d="${hexagon(11, 11, 2.6)}"/>`)
+    + layerOf(box, 'sc-wrench', `<path class="sc-gold" stroke-width="2.4" transform="translate(11 11) rotate(-32) scale(.62) translate(3.5 0)" d="${WRENCH}"/>`, { origin: [11, 11] })
+    + sparkLayers(box, ['M5.5 7.5l-2-1.3', 'M5 11.5H2.6']),
+  generic: box => base(box, '')
+    + [11, 20, 29].map((cx, i) => layerOf(box, 'sc-dot', `<circle class="sc-gold sc-fill" cx="${cx}" cy="10" r="2.4"/>`, { i })).join(''),
 };
 
 const FULL = {
@@ -518,13 +716,14 @@ const FULL = {
 };
 
 /**
- * A scene's SVG (decorative: aria-hidden). `mini` draws the tray's 40×20
+ * A scene's markup (decorative: aria-hidden): an HTML box with its still SVG
+ * and one layer per moving part (see above). `mini` draws the tray's 40×20
  * version. `live` starts it moving (the stage and tray set data-live
  * themselves later; this is only the first state).
  */
 export function sceneSvg(scene, { mini = false, live = false, className = '' } = {}) {
   const id = Object.hasOwn(FULL, scene) ? scene : 'generic';
-  const [w, h] = mini ? [40, 20] : [120, 40];
-  const body = (mini ? MINI[id] : FULL[id])();
-  return `<svg class="asst-scene${mini ? ' is-mini' : ''}${className ? ` ${className}` : ''}" data-scene="${id}"${live ? ' data-live=""' : ''} viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+  const box = mini ? SCENE_BOX.mini : SCENE_BOX.full;
+  const body = (mini ? MINI[id] : FULL[id])(box);
+  return `<span class="asst-scene${mini ? ' is-mini' : ''}${className ? ` ${className}` : ''}" data-scene="${id}"${live ? ' data-live=""' : ''} aria-hidden="true">${body}</span>`;
 }

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

@@ -459,15 +459,15 @@ export function injectAssistantSidepanelStyles() {
 
     body.ui-interacting .asp-placeholder .asp-mark,
     body.ui-interacting .asp-placeholder-track::after,
-    body.ui-interacting .asp-status .syna-cameo-eye,
-    body.ui-interacting .asp-session-pill .syna-cameo-eye { animation-play-state: paused !important; }
+    body.ui-interacting .asp-status .syna-cameo-eyes,
+    body.ui-interacting .asp-session-pill .syna-cameo-eyes { animation-play-state: paused !important; }
 
     @media (prefers-reduced-motion: reduce) {
       .assistant-panel { transition: opacity 0.15s ease; }
       .asp-placeholder .asp-mark,
       .asp-placeholder-track::after,
-      .asp-status .syna-cameo-eye,
-      .asp-session-pill .syna-cameo-eye,
+      .asp-status .syna-cameo-eyes,
+      .asp-session-pill .syna-cameo-eyes,
       .assistant-panel .asst-send::before { animation: none !important; }
       .asp-placeholder-track::after { left: 31%; }
     }