synabun 2.1.0 → 2.2.1

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

@@ -50,13 +50,16 @@ import { closeMenu, isMenuOpen } from './asst-menu.js';
 import { computerToolName, describeComputerAction, frameUrls, markerPercent, openFrameLightbox, parseComputerResult, swapImage } from './asst-computer.js';
 import * as mascotLib from '../synabun-mascot.js';
 import { isReducedMotion, subscribe } from '../synabun-ticker.js';
-import { KIND_SPECS, callOutcome, commandOf, editDiff, editPaths, fmtDuration, groupSubject, headEllipsis, kindOf, maskEcho, mcpServerOf, middleEllipsis, planState, plural, prettyServer, receiptSentence, redactInput, resultDetail, sayCall, shouldFoldNarration, stationAggregate, stationKey, targetKey, toolWords, verbText, wrapRuns } from './asst-tool-kinds.js';
+import { KIND_SPECS, callOutcome, canonicalToolInput, commandOf, editDiff, editPaths, fmtDuration, groupSubject, headEllipsis, kindOf, maskEcho, mcpServerOf, middleEllipsis, planState, plural, prettyServer, receiptSentence, redactInput, resultDetail, sayCall, shouldFoldNarration, stationAggregate, stationKey, targetKey, toolWords, verbText, wrapRuns } from './asst-tool-kinds.js';
 import { injectRackStyles } from './asst-rack-styles.js';
 import { injectSceneStyles } from './asst-scene-styles.js';
 import { activityScene, compactActivity, isLivePhase, runChip, sceneOfClass, sceneSvg, stagePhase } from './asst-scenes.js';
 import { STAGE_TIMING, createWorkerStage } from './asst-run-stage.js';
+import { createMotionGate } from './asst-motion-gate.js';
+import { createStyleCache } from './asst-style-cache.js';
 import { formatRunTokens } from './asst-usage.js';
 import { sanitizeHtmlString, sanitizeInto } from './asst-sanitize.js';
+import { renderStreamingMarkdown } from '../streaming-markdown.js';
 import { automationView } from './asst-automation.js';
 import { guessFollowups, splitFollowups } from './asst-followups.js';
 import { createFollowupsCard } from './asst-followups-card.js';
@@ -502,7 +505,9 @@ const SUGGESTION_KINDS = { computer: 'computer', web: 'web', fix: 'edit', skill:
  *          onFollowup(text, { set, indices }) (a follow-up was clicked: send `text` as the user's message),
  *          onFollowupOther() ("Something else…": the composer), limitInfo() → the session's limit notice
  *          ({ status, resetsAt } | null), brainProvider() → the brain's provider id, onLimitRetry(text)
- *          (Retry now on the Assistant's own limit card: send `text`) }
+ *          (Retry now on the Assistant's own limit card: send `text`), onSwitchProvider(anchorEl, { excludeProvider, retryText })
+ *          (Continue with another provider on the Assistant's own limit card: the host opens its own
+ *          provider picker anchored on anchorEl and decides what a pick does) }
  */
 export function createRenderer(transcriptEl, hooks = {}) {
   loadMarked();
@@ -522,6 +527,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   // there, above the "Working…" row, until it is answered; rows appended meanwhile go above it.
   const askTail = createAskTail($msgs, { anchor: () => (working?.parentNode === $msgs ? working : null) });
   let followTail = true;
+  let scrollFrame = 0;
   let emptyEl = null;
   let hero = null; // the empty state's character: { rig, el, box, parked, leaving, held, dock, egg, target }
   const mcpWarned = new Set();
@@ -570,6 +576,16 @@ export function createRenderer(transcriptEl, hooks = {}) {
   const stageWidths = new WeakMap(); // stage element → { rack, width }
   const toRecut = new Set();
   let recutTimer = 0;
+  // What the stylesheet decides about a bubble (--rk-cut, the line's white-space) changes only with a container
+  // query, so only with the stage's width: read once, forgotten when the width changes (here) or the fonts load.
+  const styleCache = createStyleCache();
+  // A web font that arrives changes every measured width: the next paint of each bubble measures again.
+  const onFontsLoaded = () => { styleCache.invalidate(); for (const rack of racks) rack.budgetMemo = null; };
+  const fontSet = typeof document !== 'undefined' ? document.fonts : null;
+  try { fontSet?.addEventListener?.('loadingdone', onFontsLoaded); } catch { /* no FontFaceSet events */ }
+  const stopFontWatch = () => { try { fontSet?.removeEventListener?.('loadingdone', onFontsLoaded); } catch { /* gone */ } };
+  // The transcript's loops run only while their holder is on screen (run cards, racks, route lines).
+  const motion = createMotionGate();
   const stageResizes = typeof ResizeObserver === 'function' ? new ResizeObserver((entries) => {
     for (const entry of entries) {
       const seen = stageWidths.get(entry.target);
@@ -578,6 +594,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       if (seen.width === null) { seen.width = width; continue; } // the first report: the width it was cut at
       if (width === seen.width) continue;
       seen.width = width;
+      forgetBubbleStyle(seen.rack);
       toRecut.add(seen.rack);
     }
     if (!toRecut.size) return;
@@ -637,7 +654,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function scrollEnd(force = false) {
     if (!force && !followTail) return;
-    requestAnimationFrame(() => { $msgs.scrollTop = $msgs.scrollHeight; });
+    if (scrollFrame) return;
+    scrollFrame = requestAnimationFrame(() => { scrollFrame = 0; $msgs.scrollTop = $msgs.scrollHeight; });
   }
 
   function root() { return { container: $msgs, stream: null, key: null, msgId: null, lastAt: 0 }; }
@@ -948,7 +966,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
    */
   function paintMessage(row, body, text, { streaming = false, scope = rootScope } = {}) {
     const split = splitFollowups(text, { streaming });
-    renderMarkdownInto(body, split.body);
+    renderStreamingMarkdown(body, split.body, renderMarkdownInto, { streaming });
     if (!streaming && split.block && scope === rootScope) attachFollowups(row, split.block);
     return split;
   }
@@ -963,6 +981,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
   function attachFollowups(row, set) {
     if (!row || !set?.items?.length) return null;
     if (row._followups?.el.isConnected) return row._followups;
+    // One turn, one card: a set offered earlier in this turn (another text segment between tool calls, a
+    // streamed row the final message replaced) is superseded by this one. `offers` holds only this turn's:
+    // the user's prompt and a new turn settle and drop the earlier ones (settleOffers), which stay as history.
+    supersedeFollowups(row);
     const card = createFollowupsCard(set, {
       t,
       // A card drawn from the journal comes in quietly; a live one with a nod.
@@ -972,6 +994,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       onFocusComposer: () => hooks.onFollowupOther?.(),
     });
     row._followups = card;
+    card._row = row;
     (row.querySelector('.asst-msg-content') || row).appendChild(card.el);
     offers.add(card);
     registerAsk(card);
@@ -980,6 +1003,19 @@ export function createRenderer(transcriptEl, hooks = {}) {
     return card;
   }
 
+  /** Take out this turn's open follow-ups cards that belong to a row other than `row`. */
+  function supersedeFollowups(row) {
+    for (const offer of [...offers]) {
+      if (!offer._row || offer._row === row) continue;
+      offers.delete(offer);
+      askCards.delete(offer);
+      try { offer.presenter?.destroy?.(); } catch { /* gone */ }
+      if (offer._row._followups === offer) offer._row._followups = null;
+      offer.el?.remove();
+    }
+    askTail.sync();
+  }
+
   /**
    * A finished turn whose last message still ends in a list of options or an "I can X, or Y" offer,
    * with no block: best-effort items read from the prose. Once per message.
@@ -987,6 +1023,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
   function guessOffer() {
     const row = lastTextRow;
     if (!row?.isConnected || row._followups || row._guessed || row.classList.contains('asst-msg-error')) return;
+    // The turn already offered a set from its block: a guess from the prose would be a second card.
+    for (const offer of offers) if (offer._row && offer.el?.isConnected) return;
     row._guessed = true;
     const set = guessFollowups(row._text || '');
     if (set) attachFollowups(row, set);
@@ -1023,9 +1061,17 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (!read && !(brainError && reported)) return null;
     const resetsAt = reported ? info.resetsAt : read?.resetsAt;
     const retryText = t('assistant.limitWait.continue', 'The usage limit has reset. Retry what was blocked and continue where you left off.');
-    let provider = '';
-    try { provider = providerShortLabel(hooks.brainProvider?.() || ''); } catch { /* unknown */ }
-    return limitDock.set('brain', { resetsAt, since: nowMs(), provider, onRetry: () => { limitDock.set('brain', null); hooks.onLimitRetry?.(retryText); } });
+    let providerId = '';
+    try { providerId = hooks.brainProvider?.() || ''; } catch { /* unknown */ }
+    const provider = providerId ? providerShortLabel(providerId) : '';
+    return limitDock.set('brain', {
+      resetsAt, since: nowMs(), provider,
+      onRetry: () => { limitDock.set('brain', null); hooks.onLimitRetry?.(retryText); },
+      onSwitchProvider: typeof hooks.onSwitchProvider === 'function'
+        ? (anchor) => hooks.onSwitchProvider(anchor, { excludeProvider: providerId, retryText })
+        : null,
+      onClose: () => limitDock.set('brain', null),
+    });
   }
 
   /** The session's limit report changed (assistant:limit): this turn's waiting card counts to its reset time. */
@@ -1368,7 +1414,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const kind = kindOf(block.name, block.input);
     const step = {
       type: 'call', id: block.id || `call-${++stepSeq}`, seq: ++stepSeq, name: block.name || 'tool', kind, key: stationKey(kind, block.name),
-      input: block.input || {}, state: 'running', result: '', detail: '', code: null, startedAt: nowMs(), endedAt: 0, progress: 0,
+      input: canonicalToolInput(block.input), state: 'running', result: '', detail: '', code: null, startedAt: nowMs(), endedAt: 0, progress: 0,
       timed: isTimed(), ghost, stale: false, rack, station: null, card: null, parent: parentOf(rack.scope), bodyBuilt: false,
       ...(extra || {}),
     };
@@ -1383,7 +1429,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   /** The final block of a streamed call, or the same block replayed: the step learns its input, nothing is added. */
   function updateCall(step, block) {
     if (block.name) step.name = block.name;
-    if (block.input && typeof block.input === 'object' && Object.keys(block.input).length) step.input = block.input;
+    if (block.input && typeof block.input === 'object' && Object.keys(block.input).length) step.input = canonicalToolInput(block.input);
     step.ghost = false;
     if (step.card?._computer) { step.card._computer.input = step.input; step.card._computer.description = describeComputerAction(step.input, step.name); }
     refreshStep(step);
@@ -1568,6 +1614,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       sr: { last: 0, timer: 0, pending: '' },
     };
     row._rack = rack;
+    motion.watch(row); // its sweep, ticks and scene loop only while it is on screen
     rack.receipt.btn.addEventListener('click', () => setRackOpen(rack, !rack.open));
     row.querySelector('.asst-rack-view').addEventListener('click', (e) => {
       const btn = e.target.closest('button[data-view]');
@@ -2046,6 +2093,22 @@ export function createRenderer(transcriptEl, hooks = {}) {
    * head (subjectCut).
    */
   function subjectBudget(rack, verb, cut = 'middle') {
+    const s = rack.stage;
+    // The same inputs give the same budget: the 1 Hz clock tick reuses it instead of measuring the stage again
+    // (a measure on the frame's path forces style and layout of whatever the frame dirtied). The key holds every
+    // input the measure reads: the stage's width (its ResizeObserver's), the scene beside the mascot, whether the
+    // bubble shows, the verb, the clock's length (tabular digits: same length, same width), the running reserve, the cut.
+    const seen = stageResizes ? stageWidths.get(s.el) : null;
+    const key = seen && seen.width != null
+      ? `${seen.width}|${rack.sceneId}|${s.bubble.hidden ? 0 : 1}|${verb}|${s.meta.textContent.length}|${rack.bubble.step?.state === 'running' ? 1 : 0}|${cut}`
+      : '';
+    if (key && rack.budgetMemo?.key === key) return rack.budgetMemo.value;
+    const value = measureSubjectBudget(rack, verb, cut);
+    rack.budgetMemo = key ? { key, value } : null;
+    return value;
+  }
+
+  function measureSubjectBudget(rack, verb, cut) {
     const s = rack.stage;
     const width = s.el.clientWidth;
     if (!width) return 96;
@@ -2062,14 +2125,30 @@ export function createRenderer(transcriptEl, hooks = {}) {
     // Two lines, less what wrapping at token boundaries wastes (a head cut is one tail: close to two full
     // lines, a path's pieces wrapping at its separators); a guess on the generous side, since fitSubject
     // cuts what the clamp would hide or a piece would push past the edge.
-    const lines = getComputedStyle(s.line).whiteSpace === 'nowrap' ? 1 : cut === 'head' ? 2 : 1.85;
+    const lines = bubbleStyle(rack, s.line, 'white-space') === 'nowrap' ? 1 : cut === 'head' ? 2 : 1.85;
     const taken = Math.ceil((verbPx + 7 + (numbersPx ? numbersPx + 7 : 0)) / 7);
     return Math.max(24, Math.min(240, Math.floor(perLine * lines) - taken - 1));
   }
 
-  /** 'head' where the stylesheet says so (≤320 px: keep the tail), else 'middle'. */
+  /**
+   * A computed style of the bubble, read once while the stage keeps its width (styleCache; the stage's
+   * ResizeObserver forgets it). Without a ResizeObserver nothing would say when to forget: read it each time.
+   */
+  function bubbleStyle(rack, node, prop) {
+    if (stageResizes && stageWidths.has(rack.stage.el)) return styleCache.get(node, prop);
+    try { return getComputedStyle(node).getPropertyValue(prop).trim(); } catch { return ''; }
+  }
+
+  /** The stage's width changed (or the fonts did): its cut, its line's wrap and its budget are read again. */
+  function forgetBubbleStyle(rack) {
+    styleCache.invalidate(rack.stage.subject);
+    styleCache.invalidate(rack.stage.line);
+    rack.budgetMemo = null;
+  }
+
+  /** 'head' where the stylesheet says so (≤320 px: keep the tail), else 'middle'. Never read per frame: see bubbleStyle. */
   function subjectCut(rack) {
-    try { return getComputedStyle(rack.stage.subject).getPropertyValue('--rk-cut').trim() === 'head' ? 'head' : 'middle'; } catch { return 'middle'; }
+    return bubbleStyle(rack, rack.stage.subject, '--rk-cut') === 'head' ? 'head' : 'middle';
   }
 
   /**
@@ -2828,9 +2907,11 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   // ── Rack upkeep ──
+  // The 1 Hz beats run only while the transcript is on screen (a hidden tab, a closed panel): they paint clocks
+  // and bubbles nobody would see. Back on screen, the ticker runs them at once.
   function needTicker() {
     if (unsubTick) return;
-    try { unsubTick = subscribe(tickRacks, { fps: 1 }); } catch { unsubTick = null; }
+    try { unsubTick = subscribe(tickRacks, { fps: 1, target: $msgs }); } catch { unsubTick = null; }
   }
 
   function stopTicker() {
@@ -2855,6 +2936,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const stage = rack.stage.el;
     if (on && !stageWidths.has(stage)) {
       stageWidths.set(stage, { rack, width: null });
+      forgetBubbleStyle(rack); // read again from here on, while the observer watches the width
       stageResizes.observe(stage);
     } else if (!on && stageWidths.has(stage)) {
       stageWidths.delete(stage);
@@ -2881,6 +2963,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function dropRack(rack) {
     watchStageWidth(rack, false);
+    motion.unwatch(rack.row);
     clearTimeout(rack.stageTimer);
     clearTimeout(rack.clearTimer);
     clearTimeout(rack.sr.timer);
@@ -3145,6 +3228,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     runCards.set(run.runId, card);
     const { wrap } = assistantRow(rootScope);
     wrap.appendChild(card);
+    motion.watch(card); // its cameo, stage, scene and sweep loop only while it is on screen
     syncStage(run.runId, card, run);
     return card;
   }
@@ -3187,7 +3271,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function needStageTicker() {
     if (unsubStageTick) return;
-    try { unsubStageTick = subscribe(tickStages, { fps: 1 }); } catch { unsubStageTick = null; }
+    try { unsubStageTick = subscribe(tickStages, { fps: 1, target: $msgs }); } catch { unsubStageTick = null; }
   }
 
   function stopStageTicker() {
@@ -3366,6 +3450,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const line = createRouteLine(route, routeLineOpts(phase));
     routeLines.set(routeId, line);
     append(line.el);
+    motion.watch(line.el); // its sweep and icon loop only while it is on screen
     syncRouteLive(routeId);
     enterRow(line.el);
     return line;
@@ -3376,6 +3461,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (!routeId || !line) return;
     const fresh = routeLines.get(routeId) !== line;
     routeLines.set(routeId, line);
+    if (line.el) motion.watch(line.el);
     syncRouteLive(routeId);
     if (fresh && line.el?.isConnected) enterRow(line.el);
   }
@@ -3397,7 +3483,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function removeRouteLine(routeId) {
     const line = routeLines.get(routeId);
-    if (line) { line.el.remove(); routeLines.delete(routeId); }
+    if (line) { motion.unwatch(line.el); line.el.remove(); routeLines.delete(routeId); }
   }
 
   // ── The automation trace ──
@@ -3833,8 +3919,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
       }
       case 'result': {
         flushStream(scope);
-        // Codex/OpenCode also send an `error` packet; the SDK reports only here.
-        const errorText = !parentId && ev.brain !== 'codex' && ev.brain !== 'opencode' ? resultErrorText(ev, t) : '';
+        // Codex/OpenCode/Antigravity also send an `error` packet; the SDK reports only here.
+        const errorText = !parentId && ev.brain !== 'codex' && ev.brain !== 'opencode' && ev.brain !== 'antigravity' ? resultErrorText(ev, t) : '';
         if (errorText && !muted) turn.errored = true;
         // The stage on screen waits for the turn's verdict (onResult → finishTurn) before it folds.
         if (!parentId && !muted) grace = newestStage();
@@ -4043,6 +4129,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
   }
 
   function clear() {
+    if (scrollFrame) { cancelAnimationFrame(scrollFrame); scrollFrame = 0; }
+    clearTimeout(recutTimer);
+    recutTimer = 0;
+    toRecut.clear();
     for (const scope of scopes.values()) { if (scope.stream?.mdTimer) clearTimeout(scope.stream.mdTimer); if (scope.stream?.thinkTimer) clearTimeout(scope.stream.thinkTimer); }
     if (rootScope.stream?.mdTimer) clearTimeout(rootScope.stream.mdTimer);
     if (rootScope.stream?.thinkTimer) clearTimeout(rootScope.stream.thinkTimer);
@@ -4057,6 +4147,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
     runActivity.clear();
     runCards.clear();
     routeLines.clear();
+    motion.disconnect(); // every holder it watched goes with the transcript
+    styleCache.invalidate();
     autoRows.clear();
     turnFrames = [];
     rootScope.stream = null;
@@ -4085,7 +4177,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
   return {
     el: $msgs,
     clear,
-    destroy: () => { clear(); limitDock.destroy(); },
+    destroy: () => { clear(); stageResizes?.disconnect(); limitDock.destroy(); stopFontWatch(); },
     appendUser,
     appendAssistantMarkdown,
     appendStatus,
@@ -4126,6 +4218,8 @@ export function createRenderer(transcriptEl, hooks = {}) {
     setWaiting,
     /** The session's usage-limit report changed: this turn's waiting card counts to its reset time. */
     noteLimit,
+    /** Dismiss the Assistant's own limit-wait card (a provider switch already decided what follows). */
+    clearLimitWait: () => limitDock.set('brain', null),
     finishTurn,
     renderTranscript,
     showWorking,