synabun 2.2.0 → 2.2.1

package/neural-interface/public/shared/loading-teardown.js

@@ -0,0 +1,34 @@
+// SynaBun — taking the loading overlay out of rendering once it has faded (ui-loading.js). No imports, no DOM globals:
+// the element and the timer are handed in (unit-tested under node --test).
+//
+// `hidden` fades the overlay to opacity 0 (0.8 s). A transparent overlay still renders, and its `#loading-text` pulse
+// kept the page drawing 60 frames a second forever. After the fade the overlay also gets `gone` (display: none), which
+// stops every animation inside it; showing it again removes both classes in the same call.
+
+export const FADE_MS = 800;
+
+/** Fade `el` out, then take it out of rendering. Returns a cancel function. */
+export function concealOverlay(el, { setTimer = setTimeout, clearTimer = clearTimeout, fadeMs = FADE_MS } = {}) {
+  if (!el) return () => {};
+  el.classList.add('hidden');
+  let timer = null;
+  const done = () => {
+    timer = null;
+    el.removeEventListener?.('transitionend', onEnd);
+    if (el.classList.contains('hidden')) el.classList.add('gone');
+  };
+  const onEnd = (event) => { if (!event || event.target === el) { if (timer) clearTimer(timer); done(); } };
+  el.addEventListener?.('transitionend', onEnd);
+  // A transition that never runs (reduced motion, a background tab, display already none) still ends here.
+  timer = setTimer(done, fadeMs + 100);
+  el._synabunConceal = () => { if (timer) clearTimer(timer); timer = null; el.removeEventListener?.('transitionend', onEnd); };
+  return el._synabunConceal;
+}
+
+/** Show `el` again (cancels a pending conceal). */
+export function revealOverlay(el) {
+  if (!el) return;
+  el._synabunConceal?.();
+  el._synabunConceal = null;
+  el.classList.remove('gone', 'hidden');
+}

package/neural-interface/public/shared/ocp-v2/ocp-v2-childpanel.js

@@ -517,7 +517,12 @@ export function createChildPanel({
     close.setAttribute('data-tooltip', 'Close');
     close.setAttribute('data-tooltip-pos', 'left');
     close.textContent = '×';
-    pill.append(icon, _pillLabel, _pillBadge, close);
+    // The working ring (ocp-v2-styles.js .ocpv2-pill-ring): a box the compositor turns under a mask.
+    const ring = document.createElement('span');
+    ring.className = 'ocpv2-pill-ring';
+    ring.setAttribute('aria-hidden', 'true');
+    ring.appendChild(document.createElement('i'));
+    pill.append(ring, icon, _pillLabel, _pillBadge, close);
     // A click shows this sub-agent's panel; on the pill of the panel that is
     // on screen it minimizes it (as the main panel's pill does).
     pill.addEventListener('click', (event) => {

package/neural-interface/public/shared/ocp-v2/ocp-v2-panel.js

@@ -2271,6 +2271,7 @@ function createTabPill(sessionId) {
   pill.dataset.owner = PANEL_OWNER;
   pill.dataset.sessionId = sessionId;
   pill.innerHTML = `
+    <span class="ocpv2-pill-ring" aria-hidden="true"><i></i></span>
     <span class="term-minimized-pill-icon">${OPENCODE_ICON}</span>
     <span class="term-minimized-pill-label">${escapeHtml(tabLabelFor(sessionId))}</span>
     <button class="term-minimized-pill-close" data-tooltip="Close" data-tooltip-pos="top">&times;</button>

package/neural-interface/public/shared/ocp-v2/ocp-v2-render.js

@@ -853,6 +853,14 @@ function synabunSummaryText(name, input) {
 const _expandedToolIds = new Set();
 const SYNABUN_CHEVRON_SVG = '<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
 
+function spinRing() {
+  const ring = document.createElement('span');
+  ring.className = 'ocpv2-spin-ring';
+  ring.setAttribute('aria-hidden', 'true');
+  ring.appendChild(document.createElement('i'));
+  return ring;
+}
+
 function renderSynaBunToolPart(part, toolName, stateStatus) {
   const callId = part.callID || part.id || part.toolCallId || part.tool_use_id || `sb-${toolName}`;
   const expanded = _expandedToolIds.has(callId);
@@ -861,6 +869,8 @@ function renderSynaBunToolPart(part, toolName, stateStatus) {
   wrap.className = 'ocpv2-part ocpv2-part-tool ocpv2-tool-synabun' + (expanded ? ' ocpv2-tool-expanded' : '');
   wrap.dataset.toolId = callId;
   wrap.dataset.status = stateStatus;
+  // The working ring (.ocpv2-spin-ring): a box the compositor turns while the call runs or waits.
+  wrap.appendChild(spinRing());
 
   const head = document.createElement('div');
   head.className = 'ocpv2-tool-head ocpv2-sb-head';

package/neural-interface/public/shared/ocp-v2/ocp-v2-send.js

@@ -211,6 +211,12 @@ export function mountCompose(rootEl, store = getDefaultStore(), opts = {}) {
   const wrap = document.createElement('div');
   wrap.className = 'ocpv2-input-wrap';
   _wrap = wrap;
+  // The focus ring (.ocpv2-spin-ring): a box the compositor turns while the composer has focus.
+  const ring = document.createElement('span');
+  ring.className = 'ocpv2-spin-ring';
+  ring.setAttribute('aria-hidden', 'true');
+  ring.appendChild(document.createElement('i'));
+  wrap.appendChild(ring);
 
   const inner = document.createElement('div');
   inner.className = 'ocpv2-input-inner';

package/neural-interface/public/shared/ocp-v2/ocp-v2-styles.js

@@ -412,55 +412,56 @@ html.desktop-titlebar--win32 .ocpv2-panel { backdrop-filter: none; -webkit-backd
 }
 
 /* ── Tray pill (minimize-to-pill) ───────────────────────────────────────── */
-@property --ocpv2-pill-angle {
-  syntax: '<angle>';
-  initial-value: 0deg;
-  inherits: false;
-}
 .ocpv2-session-pill {
   position: relative;
   overflow: hidden;
   border-color: rgba(232, 224, 220, 0.12);
   transition: border-color 0.2s;
 }
-.ocpv2-session-pill::before {
-  content: '';
+/* A working pill's ring: a conic gradient turning inside the 1px border (the mask keeps only the
+   ring). The gradient is a square box that turns (rotate, run by the compositor) under the mask; an
+   animated custom property (the old --ocpv2-pill-angle) repainted the pill on the main thread every
+   frame for as long as the session worked. The square is wider than the pill's diagonal, so the
+   ring is the same conic gradient at every angle. */
+.ocpv2-pill-ring {
   position: absolute; inset: 0;
+  display: none;
   border-radius: 8px;
   padding: 1px;
+  overflow: hidden;
   pointer-events: none;
-  background: transparent;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
-  opacity: 0;
-}
-.ocpv2-session-pill.ocpv2-pill-running {
-  border-color: transparent;
 }
-.ocpv2-session-pill.ocpv2-pill-running::before {
+.ocpv2-pill-ring > i {
+  position: absolute; left: 50%; top: 50%;
+  width: calc(100% + 32px);
+  aspect-ratio: 1;
+  translate: -50% -50%;
   background: conic-gradient(
-    from var(--ocpv2-pill-angle, 0deg),
     rgba(232,224,220,0.0) 0%,
     rgba(232,224,220,0.55) 25%,
     rgba(232,224,220,0.10) 50%,
     rgba(232,224,220,0.55) 75%,
     rgba(232,224,220,0.0) 100%
   );
-  animation: ocpv2-pill-border-spin 2.4s linear infinite;
-  opacity: 1;
+  animation: ocpv2-pill-ring-turn 2.4s linear infinite;
+}
+.ocpv2-session-pill.ocpv2-pill-running {
+  border-color: transparent;
 }
-@keyframes ocpv2-pill-border-spin {
-  to { --ocpv2-pill-angle: 360deg; }
+.ocpv2-session-pill.ocpv2-pill-running .ocpv2-pill-ring { display: block; }
+@keyframes ocpv2-pill-ring-turn {
+  to { rotate: 360deg; }
 }
 .ocpv2-session-pill .term-minimized-pill-icon { color: rgba(232, 224, 220, 0.45); transition: color 0.2s; }
 .ocpv2-session-pill.ocpv2-pill-running .term-minimized-pill-icon { color: rgba(232, 224, 220, 1); }
 .ocpv2-session-pill:hover { border-color: rgba(232, 224, 220, 0.24); }
 .ocpv2-session-pill:hover .term-minimized-pill-icon { color: rgba(232, 224, 220, 0.85); }
-.ocpv2-session-pill:hover.ocpv2-pill-running::before {
+.ocpv2-session-pill:hover .ocpv2-pill-ring > i {
   background: conic-gradient(
-    from var(--ocpv2-pill-angle, 0deg),
     rgba(232,224,220,0.0) 0%,
     rgba(232,224,220,0.75) 25%,
     rgba(232,224,220,0.20) 50%,
@@ -476,11 +477,11 @@ html.platform-win32 .ocpv2-session-pill.ocpv2-pill-running:hover,
 html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running:hover {
   border-color: rgba(232, 224, 220, 0.58);
 }
-html.platform-win32 .ocpv2-session-pill.ocpv2-pill-running::before,
-html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running::before {
-  animation: none;
-  opacity: 0;
+html.platform-win32 .ocpv2-session-pill.ocpv2-pill-running .ocpv2-pill-ring,
+html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running .ocpv2-pill-ring {
+  display: none;
 }
+body.ui-interacting .ocpv2-pill-ring > i { animation-play-state: paused; }
 .ocpv2-session-pill.ocpv2-pill-running .term-minimized-pill-label::before {
   content: '';
   display: inline-block;
@@ -509,6 +510,12 @@ html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running::before {
   0%, 100% { opacity: 0.45; }
   50% { opacity: 1; }
 }
+/* Reduced motion: the ring, the dot and the edge hold still (the working look stays). */
+@media (prefers-reduced-motion: reduce) {
+  .ocpv2-pill-ring > i,
+  .ocpv2-session-pill.ocpv2-pill-running .term-minimized-pill-label::before,
+  .ocpv2-session-pill.ocpv2-pill-running::after { animation: none; }
+}
 
 /* Parent pill marker: sub-agent attached → arrow appears after the label.
    Brightens + pulses when the child is actively running. Without this a
@@ -1309,12 +1316,44 @@ html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running::before {
 }
 
 /* ── SynaBun-branded tool cards (OpenCode cream palette) ───────────────── */
-@property --ocpv2-sb-angle {
-  syntax: '<angle>';
-  initial-value: 0deg;
-  inherits: false;
+/* ── Spinning border ring (a SynaBun tool card at work, the composer with focus) ──
+   A conic gradient turning inside the 1px edge, the mask keeping only the ring. The gradient is a
+   square box that turns (rotate, run by the compositor) under the mask, and only while its owner's
+   state is on; an animated custom property (the old --ocpv2-sb-angle / --ocpv2-border-angle,
+   @property + a conic gradient from it) restyled and repainted the owner on the main thread 60 times
+   a second. The ring is a size container and the square 142cqmax + 4px, wider than the owner's
+   diagonal at any shape, so what the mask shows is the same conic gradient at every angle. Markup:
+   <span class="ocpv2-spin-ring" aria-hidden="true"><i></i></span>, the owner's first child. */
+.ocpv2-spin-ring {
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  overflow: hidden;
+  pointer-events: none;
+  container-type: size;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.ocpv2-spin-ring > i {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: calc(142cqmax + 4px);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+}
+@keyframes ocpv2-spin-ring-turn {
+  to { rotate: 360deg; }
+}
+body.ui-interacting .ocpv2-spin-ring > i { animation-play-state: paused !important; }
+/* Reduced motion: the ring holds still where the turn starts (the working / focus look stays). */
+@media (prefers-reduced-motion: reduce) {
+  .ocpv2-spin-ring > i { animation: none !important; will-change: auto !important; }
 }
-@keyframes ocpv2-sb-spin { to { --ocpv2-sb-angle: 360deg; } }
 
 .ocpv2-part-tool.ocpv2-tool-synabun {
   position: relative;
@@ -1329,33 +1368,27 @@ html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running::before {
 .ocpv2-part-tool.ocpv2-tool-synabun[data-status="error"] {
   border-left-color: rgba(220,140,140,0.5);
 }
-.ocpv2-part-tool.ocpv2-tool-synabun::before {
-  content: '';
-  position: absolute;
-  inset: 0;
+.ocpv2-part-tool.ocpv2-tool-synabun > .ocpv2-spin-ring {
   border-radius: 12px;
-  padding: 1px;
+  z-index: 1;
+}
+.ocpv2-part-tool.ocpv2-tool-synabun > .ocpv2-spin-ring > i {
   background: conic-gradient(
-    from var(--ocpv2-sb-angle, 0deg),
     rgba(232,224,220,0.0) 0%,
     rgba(232,224,220,0.35) 25%,
     rgba(232,224,220,0.06) 50%,
     rgba(232,224,220,0.35) 75%,
     rgba(232,224,220,0.0) 100%
   );
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  opacity: 0;
-  transition: opacity 0.4s;
-  pointer-events: none;
-  z-index: 1;
 }
-.ocpv2-part-tool.ocpv2-tool-synabun[data-status="running"]::before,
-.ocpv2-part-tool.ocpv2-tool-synabun[data-status="pending"]::before {
+.ocpv2-part-tool.ocpv2-tool-synabun[data-status="running"] > .ocpv2-spin-ring,
+.ocpv2-part-tool.ocpv2-tool-synabun[data-status="pending"] > .ocpv2-spin-ring {
   opacity: 1;
-  animation: ocpv2-sb-spin 3s linear infinite;
+}
+.ocpv2-part-tool.ocpv2-tool-synabun[data-status="running"] > .ocpv2-spin-ring > i,
+.ocpv2-part-tool.ocpv2-tool-synabun[data-status="pending"] > .ocpv2-spin-ring > i {
+  animation: ocpv2-spin-ring-turn 3s linear infinite;
+  will-change: rotate;
 }
 
 .ocpv2-tool-synabun .ocpv2-sb-head {
@@ -2105,15 +2138,7 @@ img.ocpv2-tool-screenshot {
   cursor: zoom-in;
 }
 
-/* Animated conic-gradient border wrapper — cream highlight on focus */
-@property --ocpv2-border-angle {
-  syntax: '<angle>';
-  initial-value: 0deg;
-  inherits: false;
-}
-@keyframes ocpv2-border-spin {
-  to { --ocpv2-border-angle: 360deg; }
-}
+/* Composer wrapper: a cream ring turns inside its edge on focus (the shared .ocpv2-spin-ring) */
 .ocpv2-input-wrap {
   flex: 1;
   position: relative;
@@ -2124,30 +2149,20 @@ img.ocpv2-tool-screenshot {
   min-width: 0;
   overflow: hidden;
 }
-.ocpv2-input-wrap::before {
-  content: '';
-  position: absolute; inset: 0;
-  border-radius: 14px;
-  padding: 1px;
-  pointer-events: none;
+.ocpv2-input-wrap > .ocpv2-spin-ring { border-radius: 14px; }
+.ocpv2-input-wrap > .ocpv2-spin-ring > i {
   background: conic-gradient(
-    from var(--ocpv2-border-angle, 0deg),
     rgba(232,224,220,0.0) 0%,
     rgba(232,224,220,0.45) 25%,
     rgba(232,224,220,0.10) 50%,
     rgba(232,224,220,0.45) 75%,
     rgba(232,224,220,0.0) 100%
   );
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  opacity: 0;
-  transition: opacity 0.4s;
 }
-.ocpv2-input-wrap:focus-within::before {
-  opacity: 1;
-  animation: ocpv2-border-spin 3s linear infinite;
+.ocpv2-input-wrap:focus-within > .ocpv2-spin-ring { opacity: 1; }
+.ocpv2-input-wrap:focus-within > .ocpv2-spin-ring > i {
+  animation: ocpv2-spin-ring-turn 3s linear infinite;
+  will-change: rotate;
 }
 .ocpv2-input-wrap:focus-within {
   background: rgba(232,224,220,0.04);
@@ -3346,7 +3361,8 @@ const PARITY_CSS = `
   background: rgba(232,180,80,0.22);
   box-shadow: 0 0 20px rgba(232,180,80,0.04);
 }
-.ocpv2-input-wrap.ocpv2-shell-mode::before { opacity: 0; animation: none; }
+.ocpv2-input-wrap.ocpv2-shell-mode > .ocpv2-spin-ring { opacity: 0; }
+.ocpv2-input-wrap.ocpv2-shell-mode > .ocpv2-spin-ring > i { animation: none; will-change: auto; }
 .ocpv2-input-wrap.ocpv2-shell-mode .ocpv2-input-inner::before {
   content: '!';
   align-self: center;

package/neural-interface/public/shared/storage-retry.js

@@ -0,0 +1,47 @@
+// SynaBun — when storage.js tries a refused flush again. DOM-free (unit-tested under node --test).
+//
+// A failure that may pass by itself (network, 5xx, 408, 429) waits base·2^(attempt-1), capped, with full jitter in
+// the upper half. A 401 / 403 is the server saying this client is not allowed: nothing is retried on a timer until
+// something changes (a new write, the window regaining focus, the network coming back). Unsent values stay queued.
+
+export const RETRY_BASE_MS = 1000;
+export const RETRY_CAP_MS = 60_000;
+
+/** Whether an HTTP status (or null for a network error) is a refusal that a timer will not fix. */
+export function isAuthRefusal(status) {
+  return status === 401 || status === 403;
+}
+
+/** The wait before retry number `attempt` (1-based): between half and all of min(cap, base·2^(attempt-1)). */
+export function retryDelay(attempt, { base = RETRY_BASE_MS, cap = RETRY_CAP_MS, random = Math.random } = {}) {
+  const n = Math.max(1, Math.floor(Number(attempt) || 1));
+  const ceiling = Math.min(cap, base * 2 ** Math.min(n - 1, 30));
+  const r = Math.min(1, Math.max(0, Number(random()) || 0));
+  return Math.round(ceiling / 2 + r * (ceiling / 2));
+}
+
+/**
+ * The retry state of one flusher. `fail(status)` → { blocked, delay } (delay null when blocked);
+ * `ok()` resets; `poke()` (a write or a reconnect) lifts a block and gives the wait the next try still owes.
+ */
+export function createRetryState({ base = RETRY_BASE_MS, cap = RETRY_CAP_MS, random = Math.random, now = () => Date.now() } = {}) {
+  let attempt = 0;
+  let blocked = false;
+  let notBefore = 0;
+  return {
+    get attempt() { return attempt; },
+    get blocked() { return blocked; },
+    fail(status) {
+      attempt++;
+      const delay = retryDelay(attempt, { base, cap, random });
+      notBefore = now() + delay;
+      blocked = isAuthRefusal(status);
+      return { blocked, delay: blocked ? null : delay };
+    },
+    ok() { attempt = 0; blocked = false; notBefore = 0; },
+    /** How long a flush asked for now must still wait (0 when none is owed). Lifts an auth block. */
+    poke() { blocked = false; return Math.max(0, notBefore - now()); },
+    /** How long a flush must still wait, without lifting a block (Infinity while blocked). */
+    wait() { return blocked ? Infinity : Math.max(0, notBefore - now()); },
+  };
+}

package/neural-interface/public/shared/storage.js

@@ -1,4 +1,5 @@
 import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
+import { createRetryState } from './storage-retry.js';
 // ═══════════════════════════════════════════
 // STORAGE — Server-synced persistent state
 // ═══════════════════════════════════════════
@@ -19,6 +20,8 @@ let _dirty = {};
 let _flushTimer = null;
 let _hydrated = false;
 const DEBOUNCE_MS = 500;
+// A refused flush is tried again with backoff (storage-retry.js); a 401 / 403 waits for a write or a reconnect.
+const _retry = createRetryState();
 // Keys that migrated to the per-entry blob store (see blob-store.js and the
 // server's FAT_KEY_ROUTES). Excluded from hydration so they can never re-enter
 // the whole-map PATCH cycle.
@@ -129,10 +132,20 @@ export const storage = (hostedSidepanelId && sidepanelHost()?.storageFor(hostedS
 
 // ── Debounced flush to server ────────────────────────
 
-function _scheduleDebouncedFlush() {
+/** `fromWrite`: a new write or a reconnect, which lifts a 401 / 403 block (the backoff still applies). */
+function _scheduleDebouncedFlush(fromWrite = true) {
   if (SHOWCASE_MODE) { _dirty = {}; return; }
+  const owed = fromWrite ? _retry.poke() : _retry.wait();
+  if (!Number.isFinite(owed)) return; // blocked: values stay in _dirty until something changes
   if (_flushTimer) clearTimeout(_flushTimer);
-  _flushTimer = setTimeout(_flushToServer, DEBOUNCE_MS);
+  _flushTimer = setTimeout(_flushToServer, Math.max(DEBOUNCE_MS, owed));
+}
+
+if (!SHOWCASE_MODE) {
+  const _reconnected = () => { if (Object.keys(_dirty).length) _scheduleDebouncedFlush(true); };
+  window.addEventListener('online', _reconnected);
+  window.addEventListener('focus', _reconnected);
+  window.addEventListener('synabun:auth-changed', _reconnected);
 }
 
 async function _flushToServer() {
@@ -150,20 +163,28 @@ async function _flushToServer() {
   _dirty = {};
   _flushTimer = null;
   if (Object.keys(payload).length === 0) return;
+  let status = null;
   try {
     const res = await fetch('/api/ui-state', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload),
     });
+    status = res.status;
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    _retry.ok();
   } catch (err) {
-    console.warn('[storage] Flush failed:', err.message, '— will retry');
     // Re-queue failed keys (don't overwrite newer dirty values)
     for (const [k, v] of Object.entries(payload)) {
       if (!(k in _dirty)) _dirty[k] = v;
     }
-    _scheduleDebouncedFlush();
+    const { blocked, delay } = _retry.fail(status);
+    if (blocked) {
+      if (_retry.attempt === 1 || _retry.attempt % 20 === 0) console.warn('[storage] Flush refused:', err.message, '— kept; will try again on the next change or reconnect');
+    } else {
+      if (_retry.attempt <= 3 || _retry.attempt % 20 === 0) console.warn('[storage] Flush failed:', err.message, `— will retry in ${Math.round(delay / 1000)} s`);
+      _scheduleDebouncedFlush(false);
+    }
   }
 }
 

package/neural-interface/public/shared/styles.css

@@ -16744,7 +16744,9 @@
     border: 1px solid var(--fe-menu-border);
     border-radius: var(--r-card);
     box-shadow: var(--fe-menu-shadow);
-    z-index: 300;
+    /* Same tier as .fe-ctx-flyout: a float anchored to the panel, appended to body to escape it, must still
+       outrank what is drawn beside it (#topright-controls at 400) and above it (a floating terminal at 10000). */
+    z-index: 100010;
     padding: 10px;
     opacity: 0;
     transform: translateX(-8px) scale(0.96);
@@ -18574,6 +18576,11 @@
     opacity: 0;
     pointer-events: none;
   }
+  /* Faded out: nothing inside keeps animating (loading-teardown.js adds `gone` once the fade ends). */
+  #loading-overlay.hidden #loading-text,
+  #loading-overlay.hidden #loading-mascot,
+  #loading-overlay.hidden #loading-mascot * { animation: none !important; }
+  #loading-overlay.gone { display: none !important; }
 
   .loading-logo {
     height: 28px;

package/neural-interface/public/shared/synabun-mascot.js

@@ -90,9 +90,10 @@
  * - `paintMascot(svg, frame)` — draw a frame on any `mascotSvg()`. A still
  *   frame (`stillFrame`, or a rig that is not looping) draws its prop at
  *   ≥ .7 opacity with strokes of ≥ 1.5 CSS px, so it reads at 28×14.
- * - `mascotCameoSvg()` — two 3×7 px pill eyes (`syna-cameo` /
- *   `syna-cameo-eye`) for running pills, leaning −12° like the two-pill mark
- *   (never a pause glyph); the host's CSS animates them.
+ * - `mascotCameoSvg()` — two 3×7 px pill eyes (`syna-cameo` >
+ *   `syna-cameo-eyes` > svg > `syna-cameo-eye` ×2) for running pills,
+ *   leaning −12° like the two-pill mark (never a pause glyph); the host's CSS
+ *   moves the `syna-cameo-eyes` box (an HTML element, so the compositor runs it).
  * - `mascotPropSvg(kind, { width, height })` + `paintMascotProp(svg, kind)`
  *   — a kind's prop alone, framed to its own box: the ledger's row glyphs.
  * - `mascotBounds(pose)` — the face-unit box a pose can draw in (the eyes over
@@ -167,14 +168,18 @@ export function blinkAmount(elapsed) {
 /**
  * Two 3×7 px pill eyes for a running pill; the host's CSS moves them. The
  * pair leans −12° like the two-pill mark (the right eye sits higher), so it
- * never reads as a pause glyph. The eyes stay untransformed for the CSS glance.
+ * never reads as a pause glyph. What moves is the HTML box around the eyes
+ * (`syna-cameo-eyes`), never a part of the SVG: a box's transform runs on
+ * the compositor and, when the page draws a frame anyway, restyles one
+ * element without laying the SVG out again.
  */
 export function mascotCameoSvg({ className = '' } = {}) {
-  return `<svg class="syna-cameo${className ? ` ${className}` : ''}" viewBox="0 0 10 7" width="10" height="7" style="overflow:visible" aria-hidden="true" focusable="false">`
+  return `<span class="syna-cameo${className ? ` ${className}` : ''}" aria-hidden="true"><span class="syna-cameo-eyes">`
+    + '<svg viewBox="0 0 10 7" width="10" height="7" style="display:block;overflow:visible" focusable="false">'
     + '<g class="syna-cameo-pair" transform="rotate(-12 5 3.5)">'
     + '<rect class="syna-cameo-eye" x="0" y="0" width="3" height="7" rx="1.5" fill="currentColor"/>'
     + '<rect class="syna-cameo-eye" x="7" y="0" width="3" height="7" rx="1.5" fill="currentColor"/>'
-    + '</g></svg>';
+    + '</g></svg></span></span>';
 }
 
 /** Each prop's own box in face units, to draw it alone (a ledger row's glyph, a suggestion's). */
@@ -1842,6 +1847,14 @@ function createPainter(svg, uid) {
     if (value == null) el.removeAttribute(attr);
     else el.setAttribute(attr, value);
   };
+  /** A prop's writes for this frame: the last value per attribute wins, put() writes it once (paint). */
+  const staged = new Map();
+  const stage = (el, attr, value) => {
+    if (!el) return;
+    let attrs = staged.get(el);
+    if (!attrs) { attrs = new Map(); staged.set(el, attrs); }
+    attrs.set(attr, value);
+  };
   /** CSS px per face unit: the SVG's box over its viewBox (xMidYMid meet: the tighter axis). */
   const unitPx = () => {
     const w = Number(svg.getAttribute?.('width'));
@@ -1898,8 +1911,14 @@ function createPainter(svg, uid) {
       put(entry.g, 'display', null);
       put(entry.g, 'opacity', op < 0.999 ? n(op) : null);
       put(entry.g, 'transform', p.dx || p.dy ? `translate(${n(p.dx || 0)},${n(p.dy || 0)})` : null);
-      if (!f.still) for (const b of entry.base) put(b.el, b.attr, b.value); // live: the drawn values
-      PROPS[name].update(entry.r, p, put);
+      // Live: the drawn values, then the frame's own over them. Both are staged and each attribute is
+      // written once with its final value, so a frame that changes nothing writes nothing (an attribute
+      // written twice a frame, back to its base and on again, restyles and re-lays the SVG out every frame).
+      staged.clear();
+      if (!f.still) for (const b of entry.base) stage(b.el, b.attr, b.value);
+      PROPS[name].update(entry.r, p, stage);
+      for (const [el, attrs] of staged) for (const [attr, value] of attrs) put(el, attr, value);
+      staged.clear();
       if (f.still) legible(entry);
     }
   }