synabun 2.2.0 → 2.2.1

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

@@ -9,6 +9,18 @@
 // requestFrames(ms) lifts the animation subscribers (≥ 24 fps) to 60 fps for a
 // moment: a pose blend, a hop.
 //
+// A frame is only requested for the vsync a subscriber is due on: a 30 fps
+// rig costs 30 frames a second, not one per vsync. Every frame the page draws
+// makes the browser restyle each running CSS animation on the main thread
+// (composited or not), so a frame nobody needs is never free. Between due
+// frames the loop sleeps on a timer that wakes half a frame before the vsync
+// it wants; the frame interval is learnt from back-to-back frames (60 Hz,
+// 120 Hz displays).
+//
+// A subscriber may name a `target` element: it runs only while that element
+// is on screen (one shared IntersectionObserver), and a loop whose every
+// subscriber is off screen requests nothing at all until one comes back.
+//
 // The loop stops while the tab is hidden (document.hidden, body.app-hidden)
 // and freezes while the UI is dragged (body.ui-interacting): subscribers are
 // skipped, and the first frame after either hands each one a dt of at most
@@ -20,7 +32,7 @@
 // pointermove listener and one keydown listener (both capture phase, so a
 // handler that stops propagation cannot hide input from them).
 //
-//   subscribe(fn(now, dt), { fps })  → unsubscribe()   (unsubscribe.setFps(n) re-caps)
+//   subscribe(fn(now, dt), { fps, target })  → unsubscribe()   (unsubscribe.setFps(n) re-caps)
 //   requestFrames(ms)                   60 fps for the next ms
 //   isReducedMotion()                   live prefers-reduced-motion
 //   onReducedMotionChange(fn(on))    → unsubscribe()
@@ -41,8 +53,10 @@
 const FRAME_60 = 1000 / 60;
 const SLOP = 4; // ms of rAF jitter a capped subscriber tolerates before it skips a frame
 const RESUME_DT = 50; // the first dt after a stop or a freeze is at most this
-const SLEEP_OVER = 48; // a wait longer than this sleeps on a timer instead of frames
 const POLL_MS = 250; // how often a stopped loop re-checks when no MutationObserver exists
+const PHASE_MS = 1500; // a frame newer than this still tells where the vsyncs fall
+const MIN_FRAME = 4; // ms: the shortest frame interval believed (240 Hz)
+const MAX_FRAME = 34; // ms: the longest (30 Hz)
 const MAX_BOOST = 5000;
 const LISTEN = { passive: true, capture: true };
 
@@ -84,10 +98,73 @@ let pollId = 0;
 let boostUntil = -Infinity;
 let watching = false;
 let observer = null;
+let frameMs = FRAME_60; // the display's frame interval, as back-to-back frames show it
+let lastTs = -Infinity; // the last frame's timestamp: where the vsyncs fall
+let inFrame = false; // frame() is running
+let chained = false; // the frame in flight was requested by the previous one, with no wait between
+const counts = { frames: 0, requests: 0, sleeps: 0 }; // for tests and the idle-CPU suite
 
 const capFps = fps => Math.max(1, Math.min(60, Number(fps) > 0 ? Number(fps) : 30));
 const boosted = (sub, t) => t < boostUntil && sub.fps >= 24;
 const intervalOf = (sub, t) => (boosted(sub, t) ? FRAME_60 : 1000 / sub.fps);
+/** A subscriber with a target off screen is parked: it is neither called nor waited for. */
+const parked = sub => sub.target && !sub.seen;
+
+// ── Targets: one IntersectionObserver for every subscriber that names an element ──
+
+let targetIo = null; // undefined while unavailable
+const targetSubs = new Map(); // element → Set of subs
+const targetSeen = new Map(); // element → on screen as last reported (absent until the first report)
+
+function targetObserver() {
+  if (targetIo !== null) return targetIo;
+  const IO = env ? env.IntersectionObserver : globalThis.IntersectionObserver;
+  if (typeof IO !== 'function') { targetIo = undefined; return targetIo; }
+  try {
+    targetIo = new IO((entries) => {
+      let woke = false;
+      for (const entry of entries) {
+        const set = targetSubs.get(entry.target);
+        if (!set) continue;
+        const on = !!entry.isIntersecting;
+        targetSeen.set(entry.target, on);
+        for (const sub of set) {
+          if (sub.seen === on) continue;
+          sub.seen = on;
+          if (on) { sub.resume = true; woke = true; }
+        }
+      }
+      if (woke && subs.size) wakeNow();
+    });
+  } catch { targetIo = undefined; }
+  return targetIo;
+}
+
+function watchTarget(sub) {
+  const el = sub.target;
+  const io = targetObserver();
+  if (!io) { sub.target = null; return; } // no observer: the target counts as on screen
+  let set = targetSubs.get(el);
+  if (!set) {
+    set = new Set();
+    targetSubs.set(el, set);
+    try { io.observe(el); } catch { targetSubs.delete(el); sub.target = null; return; }
+  }
+  set.add(sub);
+  // Until the observer's first report the target counts as on screen (it draws at once, as before).
+  sub.seen = targetSeen.has(el) ? targetSeen.get(el) : true;
+}
+
+function unwatchTarget(sub) {
+  const el = sub.target;
+  const set = el ? targetSubs.get(el) : null;
+  if (!set) return;
+  set.delete(sub);
+  if (set.size) return;
+  targetSubs.delete(el);
+  targetSeen.delete(el);
+  try { targetIo?.unobserve(el); } catch { /* already gone */ }
+}
 
 /** Why the loop is not running: '' (it runs), 'hidden' or 'interacting'. */
 export function tickerPaused() {
@@ -102,17 +179,20 @@ export function tickerPaused() {
 
 /**
  * Call `fn(now, dt)` from the shared loop, at most `fps` times a second
- * (1-60, default 30). Returns unsubscribe(); unsubscribe.setFps(n) changes the
- * cap in place.
+ * (1-60, default 30). With `target` (an element) it is called only while that
+ * element is on screen. Returns unsubscribe(); unsubscribe.setFps(n) changes
+ * the cap in place.
  */
-export function subscribe(fn, { fps = 30 } = {}) {
+export function subscribe(fn, { fps = 30, target = null } = {}) {
   if (typeof fn !== 'function') return Object.assign(() => {}, { setFps() {} });
-  const sub = { fn, fps: capFps(fps), last: -1, born: now(), resume: false };
+  const sub = { fn, fps: capFps(fps), last: -1, born: now(), resume: false, target: target && typeof target === 'object' ? target : null, seen: true };
   subs.add(sub);
+  if (sub.target) watchTarget(sub);
   watch();
   wakeNow();
   const unsubscribe = () => {
     if (!subs.delete(sub)) return;
+    unwatchTarget(sub);
     if (!subs.size) halt();
   };
   unsubscribe.setFps = (next) => {
@@ -138,31 +218,71 @@ function wakeNow() {
   schedule();
 }
 
+/**
+ * Request the next frame a subscriber is due on, and no other: when the next
+ * vsync serves it, at once; otherwise a timer wakes half a frame before the
+ * vsync it wants. Nothing at all while every subscriber is parked.
+ */
 function schedule() {
   if (rafId || timerId || !subs.size) return;
   const raf = rafFn();
   if (!raf) return;
   if (tickerPaused()) { stopped(); return; }
   const t = now();
-  let wait = Infinity;
+  let due = Infinity;
   for (const sub of subs) {
-    const due = sub.last < 0 ? 0 : sub.last + intervalOf(sub, t) - SLOP - t;
-    if (due < wait) wait = due;
+    if (parked(sub)) continue;
+    const at = sub.last < 0 ? t : sub.last + intervalOf(sub, t) - SLOP;
+    if (at < due) due = at;
   }
-  if (wait > SLEEP_OVER) {
-    timerId = later(() => { timerId = 0; schedule(); }, wait - FRAME_60);
+  if (!Number.isFinite(due)) return; // every subscriber is off screen: the observer wakes the loop
+  const phase = lastTs > -Infinity && t - lastTs < PHASE_MS ? lastTs : null;
+  let lead;
+  if (due <= t) lead = 0;
+  else if (phase === null) lead = due - t - frameMs; // no recent vsync to count from: the frame before `due`
+  else {
+    const k = Math.max(1, Math.ceil((due - phase) / frameMs - 1e-6));
+    lead = k === 1 ? 0 : phase + (k - 0.5) * frameMs - t; // half a frame before the vsync that serves `due`
+  }
+  if (lead > 1) {
+    counts.sleeps += 1;
+    timerId = later(() => { timerId = 0; schedule(); }, lead);
     return;
   }
+  counts.requests += 1;
+  chained = inFrame;
   rafId = raf(frame);
 }
 
+/** Learn the display's frame interval from two frames requested back to back. */
+function learnInterval(ts) {
+  if (!chained || !(lastTs > -Infinity)) return;
+  const d = ts - lastTs;
+  if (!(d >= MIN_FRAME && d <= MAX_FRAME)) return;
+  // Snap down to the shortest seen; drift back up slowly (a dropped frame is two, not a slower display).
+  frameMs = Math.min(d, Math.min(MAX_FRAME, frameMs + 0.05));
+}
+
 function frame(ts) {
   rafId = 0;
   if (!subs.size) return;
   if (tickerPaused()) { stopped(); return; }
   const t = typeof ts === 'number' && Number.isFinite(ts) ? ts : now();
+  counts.frames += 1;
+  learnInterval(t);
+  lastTs = t;
+  chained = false;
+  inFrame = true;
+  try {
+    runSubscribers(t);
+    schedule(); // inside the frame: a frame requested from here is the next vsync's (it teaches the interval)
+  } finally { inFrame = false; }
+}
+
+function runSubscribers(t) {
   for (const sub of Array.from(subs)) {
     if (!subs.has(sub)) continue; // unsubscribed by an earlier subscriber this frame
+    if (parked(sub)) continue;
     const interval = intervalOf(sub, t);
     if (sub.last >= 0 && t - sub.last < interval - SLOP) continue;
     let dt = t - (sub.last >= 0 ? sub.last : sub.born);
@@ -172,7 +292,6 @@ function frame(ts) {
     sub.last = t;
     try { sub.fn(t, dt); } catch (err) { report(err); }
   }
-  schedule();
 }
 
 /** The loop stopped (hidden) or froze (drag): mark the jump, wait for the watchers. */
@@ -334,6 +453,17 @@ function reset() {
   halt();
   subs.clear();
   boostUntil = -Infinity;
+  try { targetIo?.disconnect(); } catch { /* gone */ }
+  targetIo = null;
+  targetSubs.clear();
+  targetSeen.clear();
+  frameMs = FRAME_60;
+  lastTs = -Infinity;
+  inFrame = false;
+  chained = false;
+  counts.frames = 0;
+  counts.requests = 0;
+  counts.sleeps = 0;
   const q = motionQuery;
   if (q && motionFns.size) {
     if (q.removeEventListener) q.removeEventListener('change', onMotionQuery);
@@ -372,5 +502,10 @@ export const __ticker = {
     keyListeners: keyFns.size,
     keyAttached: keyOn,
     motionListeners: motionFns.size,
+    parked: Array.from(subs).filter(parked).length,
+    targets: targetSubs.size,
+    frameMs,
   }),
+  /** Frames run, frames requested and timer sleeps since the last reset (the idle-CPU suite reads them). */
+  counts: () => ({ ...counts }),
 };

package/neural-interface/public/shared/ui-claude-panel.js

@@ -419,6 +419,7 @@ function buildPanel() {
       </div>
       <div class="cp-input-area">
         <div class="cp-input-wrap">
+          <span class="cp-spin-ring" aria-hidden="true"><i></i></span>
           <div class="cp-image-preview" id="cp-image-preview"></div>
           <div class="cp-input-inner">
             <textarea class="cp-input" id="cp-input" placeholder="Message SynaBun..." rows="1" autocomplete="off" spellcheck="false"></textarea>
@@ -1061,26 +1062,17 @@ function injectStyles() {
       margin-top: 8px; transition: opacity 0.3s, border-color 0.2s, box-shadow 0.3s;
     }
     .perm-card { position: relative; }
-    .perm-card::before {
-      content: '';
-      position: absolute; inset: 0;
-      border-radius: 8px;
-      padding: 1px;
-      pointer-events: none;
+    /* A card that waits on you turns an amber ring inside its edge: the shared .cp-spin-ring (with the
+       composer's, below), turning only while the card is .active-perm. */
+    .perm-card > .cp-spin-ring { border-radius: 8px; }
+    .perm-card > .cp-spin-ring > i {
       background: conic-gradient(
-        from var(--cp-border-angle, 0deg),
         rgba(245,180,60,0.0) 0%,
         rgba(245,180,60,0.55) 25%,
         rgba(245,180,60,0.1) 50%,
         rgba(245,180,60,0.55) 75%,
         rgba(245,180,60,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;
     }
     .perm-card.active-perm {
       border-color: rgba(245,180,60,0.25);
@@ -1088,9 +1080,10 @@ function injectStyles() {
       box-shadow: 0 0 16px rgba(245,180,60,0.08), 0 0 40px rgba(245,180,60,0.04);
       animation: cp-perm-glow 2.5s ease-in-out infinite;
     }
-    .perm-card.active-perm::before {
-      opacity: 1;
-      animation: cp-border-spin 3s linear infinite;
+    .perm-card.active-perm > .cp-spin-ring { opacity: 1; }
+    .perm-card.active-perm > .cp-spin-ring > i {
+      animation: cp-spin-ring-turn 3s linear infinite;
+      will-change: rotate;
     }
     .perm-card:hover { border-color: var(--b-light); }
     .perm-card.active-perm:hover { border-color: rgba(245,180,60,0.4); }
@@ -1234,47 +1227,64 @@ function injectStyles() {
       transition: background 0.4s;
       min-width: 0;
     }
-    .cp-input-wrap::before {
-      content: '';
+    /* ── Spinning border ring (composer focus, a waiting permission card) ──
+       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 --cp-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="cp-spin-ring"
+       aria-hidden="true"><i></i></span>, the owner's first child. */
+    .cp-spin-ring {
       position: absolute; inset: 0;
-      border-radius: 14px;
       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;
+    }
+    .cp-spin-ring > i {
+      position: absolute; left: 50%; top: 50%;
+      width: calc(142cqmax + 4px);
+      aspect-ratio: 1;
+      translate: -50% -50%;
+    }
+    @keyframes cp-spin-ring-turn {
+      to { rotate: 360deg; }
+    }
+    body.ui-interacting .cp-spin-ring > i { animation-play-state: paused !important; }
+    /* Reduced motion: the ring holds still where the turn starts (the focus / waiting look stays). */
+    @media (prefers-reduced-motion: reduce) {
+      .cp-spin-ring > i { animation: none !important; will-change: auto !important; }
+    }
+    .cp-input-wrap > .cp-spin-ring { border-radius: 14px; }
+    .cp-input-wrap > .cp-spin-ring > i {
       background: conic-gradient(
-        from var(--cp-border-angle, 0deg),
         rgba(212,162,127,0.0) 0%,
         rgba(212,162,127,0.35) 25%,
         rgba(212,162,127,0.10) 50%,
         rgba(212,162,127,0.35) 75%,
         rgba(212,162,127,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;
     }
-    .cp-input-wrap:focus-within::before {
-      opacity: 1;
-      animation: cp-border-spin 3s linear infinite;
+    .cp-input-wrap:focus-within > .cp-spin-ring { opacity: 1; }
+    .cp-input-wrap:focus-within > .cp-spin-ring > i {
+      animation: cp-spin-ring-turn 3s linear infinite;
+      will-change: rotate;
     }
     .cp-input-wrap:focus-within {
       background: rgba(212,162,127,0.03);
       box-shadow: 0 0 20px rgba(212,162,127,0.04), 0 0 60px rgba(212,162,127,0.015);
     }
-    @keyframes cp-border-spin {
-      to { --cp-border-angle: 360deg; }
-    }
     @keyframes cp-perm-glow {
       0%, 100% { box-shadow: 0 0 16px rgba(245,180,60,0.08), 0 0 40px rgba(245,180,60,0.04); }
       50% { box-shadow: 0 0 20px rgba(245,180,60,0.14), 0 0 50px rgba(245,180,60,0.07); }
     }
-    @property --cp-border-angle {
-      syntax: '<angle>';
-      initial-value: 0deg;
-      inherits: false;
-    }
 
     .cp-input-inner {
       display: flex; align-items: flex-end;
@@ -2301,52 +2311,53 @@ function injectStyles() {
     }
 
     /* ── Claude session pills in shared tray ── */
-    @property --cp-pill-angle {
-      syntax: '<angle>';
-      initial-value: 0deg;
-      inherits: false;
-    }
     .cp-session-pill {
       position: relative;
       overflow: hidden;
       border-color: rgba(212, 162, 127, 0.14);
       transition: border-color 0.2s;
     }
-    .cp-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 --cp-pill-angle) repainted the pill on the main thread every
+       frame for as long as a session worked. The square is wider than the pill's diagonal, so the ring
+       is the same conic gradient at every angle. */
+    .cp-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;
-    }
-    .cp-session-pill.cp-pill-running {
-      border-color: transparent;
     }
-    .cp-session-pill.cp-pill-running::before {
+    .cp-pill-ring > i {
+      position: absolute; left: 50%; top: 50%;
+      width: calc(100% + 32px);
+      aspect-ratio: 1;
+      translate: -50% -50%;
       background: conic-gradient(
-        from var(--cp-pill-angle, 0deg),
         rgba(212,162,127,0.0) 0%,
         rgba(212,162,127,0.6) 25%,
         rgba(212,162,127,0.12) 50%,
         rgba(212,162,127,0.6) 75%,
         rgba(212,162,127,0.0) 100%
       );
-      animation: cp-pill-border-spin 2.4s linear infinite;
-      opacity: 1;
+      animation: cp-pill-ring-turn 2.4s linear infinite;
     }
-    @keyframes cp-pill-border-spin {
-      to { --cp-pill-angle: 360deg; }
+    .cp-session-pill.cp-pill-running {
+      border-color: transparent;
+    }
+    .cp-session-pill.cp-pill-running .cp-pill-ring { display: block; }
+    @keyframes cp-pill-ring-turn {
+      to { rotate: 360deg; }
     }
     .cp-session-pill:hover { border-color: rgba(212, 162, 127, 0.28); }
-    .cp-session-pill:hover.cp-pill-running::before {
+    .cp-session-pill:hover .cp-pill-ring > i {
       background: conic-gradient(
-        from var(--cp-pill-angle, 0deg),
         rgba(212,162,127,0.0) 0%,
         rgba(212,162,127,0.8) 25%,
         rgba(212,162,127,0.20) 50%,
@@ -2362,11 +2373,11 @@ function injectStyles() {
     html.desktop-titlebar--win32 .cp-session-pill.cp-pill-running:hover {
       border-color: rgba(212, 162, 127, 0.62);
     }
-    html.platform-win32 .cp-session-pill.cp-pill-running::before,
-    html.desktop-titlebar--win32 .cp-session-pill.cp-pill-running::before {
-      animation: none;
-      opacity: 0;
+    html.platform-win32 .cp-session-pill.cp-pill-running .cp-pill-ring,
+    html.desktop-titlebar--win32 .cp-session-pill.cp-pill-running .cp-pill-ring {
+      display: none;
     }
+    body.ui-interacting .cp-pill-ring > i { animation-play-state: paused; }
     .cp-session-pill .term-minimized-pill-icon { color: rgba(212, 162, 127, 0.45); transition: color 0.2s; }
     .cp-session-pill.cp-pill-running .term-minimized-pill-icon { color: rgba(212, 162, 127, 1); }
     .cp-session-pill:hover .term-minimized-pill-icon { color: rgba(212, 162, 127, 0.85); }
@@ -2401,6 +2412,12 @@ function injectStyles() {
       pointer-events: none;
     }
     @keyframes cp-pill-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+    /* Reduced motion: the ring, the dot and the edge hold still (the working look stays). */
+    @media (prefers-reduced-motion: reduce) {
+      .cp-pill-ring > i,
+      .cp-session-pill.cp-pill-running .term-minimized-pill-label::before,
+      .cp-session-pill.cp-pill-running::after { animation: none; }
+    }
 
     /* ── Think intensity toggle ── */
     /* ── Shared toggle base ── */
@@ -3238,6 +3255,7 @@ function _createTrayPill(tab) {
   pill.className = 'term-minimized-pill cp-session-pill';
   pill.dataset.tabId = tab.id;
   pill.innerHTML = `
+    <span class="cp-pill-ring" aria-hidden="true"><i></i></span>
     <span class="term-minimized-pill-icon">${_CP_ICON_SVG}</span>
     <span class="term-minimized-pill-label">${escH(tab.label)}</span>
     <button class="term-minimized-pill-close" data-tooltip="Close" data-tooltip-pos="top">&times;</button>

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

@@ -7,6 +7,7 @@
 import { fetchHealth, startHealth } from './api.js';
 import { emit, on } from './state.js';
 import { t } from './i18n.js';
+import { concealOverlay, revealOverlay } from './loading-teardown.js';
 import {
   START_LIMITS, START_STORAGE, createStartBridge, fetchStartBeacon, isMacPlatform, isWindowsPlatform,
   manualStartCommands, openStartLink, startBeaconTarget, startButtonUsable, startStatusView,
@@ -127,7 +128,7 @@ export function showLoadingError(title, sub, canStart, serverOffline) {
  */
 export function hideLoading(delay = 400) {
   const $overlay = $('loading-overlay');
-  if ($overlay) setTimeout(() => $overlay.classList.add('hidden'), delay);
+  if ($overlay) setTimeout(() => concealOverlay($overlay), delay);
 }
 
 /**
@@ -135,7 +136,7 @@ export function hideLoading(delay = 400) {
  */
 export function showLoading() {
   const $overlay = $('loading-overlay');
-  if ($overlay) $overlay.classList.remove('hidden');
+  if ($overlay) revealOverlay($overlay);
 }
 
 /**
@@ -479,7 +480,7 @@ function beginRestart({ request = null, announced = false, boot = '' } = {}) {
   _offlineTitle = t('loading.serverOffline');
   // `over-app`: no fade-in and above whatever is open. The screen is there in the frame of the click.
   $overlay.classList.add('over-app', 'error', 'server-offline');
-  $overlay.classList.remove('hidden');
+  revealOverlay($overlay);
   // Nothing behind the screen keeps the keyboard (a terminal, an editor).
   try { document.activeElement?.blur?.(); } catch {}
   if (_statusDot) _statusDot.classList.add('error');
@@ -503,7 +504,7 @@ function dismissRestart() {
   if (_restartTitle !== null) document.title = _restartTitle;
   _restartTitle = null;
   const $overlay = $('loading-overlay');
-  if ($overlay) $overlay.classList.add('hidden');
+  if ($overlay) concealOverlay($overlay);
 }
 
 // ═══════════════════════════════════════════