synabun 2.1.0 → 2.2.1

package/neural-interface/public/shared/html-shell.js

@@ -177,10 +177,10 @@ export function getSharedHTML() {
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg></span> ${t('menu.apps.codexCli')} <span class="count-badge count-badge--green menu-update-badge" id="codex-menu-update-badge"></span></span>
             <span class="menu-shortcut" data-keybind-for="launch-codex"></span>
           </div>
-          <div class="menu-item" id="menu-terminal-gemini">
+          <div class="menu-item" id="menu-terminal-antigravity">
             <span class="menu-check"></span>
-            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"/></svg></span> ${t('menu.apps.geminiCli')} <span class="count-badge count-badge--green menu-update-badge" id="gemini-menu-update-badge"></span></span>
-            <span class="menu-shortcut" data-keybind-for="launch-gemini"></span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 20 12 4l7.5 16"/><path d="M8.2 20a3.8 3.8 0 0 1 7.6 0"/></svg></span> ${t('menu.apps.antigravityCli')} <span class="count-badge count-badge--green menu-update-badge" id="antigravity-menu-update-badge"></span></span>
+            <span class="menu-shortcut" data-keybind-for="launch-antigravity"></span>
           </div>
           <div class="menu-item" id="menu-terminal-opencode">
             <span class="menu-check"></span>
@@ -495,7 +495,8 @@ ${is3D ? '' : `
 </div>
 
 <!-- Top-Right Controls: one row. The glass dock (workspace switcher, then the tools), then #topright-buttons: the
-     tools toggle (#topright-tools-btn, shows and hides the dock) and the agent side panels, always one row of their own.
+     ⋯ (#topright-overflow-btn: what does not fit the band, ui-topright-overflow.js), the tools toggle
+     (#topright-tools-btn, shows and hides the dock) and the agent side panels. Always one row, never wrapped.
      Snap to grid and Tile terminals are on the whiteboard rail (#wb-toolbar) and in View. The session pills
      (#term-minimized-tray) are a row under the bar, right-aligned with it (styles.css: "Fit"). -->
 <div id="topright-controls">
@@ -569,6 +570,10 @@ ${is3D ? '' : `
   </button>
   </div>
   <div id="topright-buttons">
+  <button id="topright-overflow-btn" class="topright-icon-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="topright-overflow-menu" aria-label="${t('toolbar.more')}" data-tooltip="${t('toolbar.more')}">
+    <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></svg>
+  </button>
+  <div id="topright-overflow-menu" role="menu" aria-label="${t('toolbar.more')}" hidden></div>
   <button id="topright-tools-btn" class="topright-icon-btn" type="button" aria-expanded="true" aria-controls="topright-inner" aria-label="${t('toolbar.hideTools')}" data-tooltip="${t('toolbar.hideTools')}">
     <svg viewBox="0 0 24 24"><path d="M13 17l5-5-5-5"/><path d="M6 17l5-5-5-5"/></svg>
     <span class="topright-tools-dot" aria-hidden="true"></span>
@@ -588,9 +593,16 @@ ${is3D ? '' : `
     <svg viewBox="0 0 24 30" fill="currentColor"><path d="M18 6H6V24H18V6ZM24 30H0V0H24V30Z"/></svg>
     <span class="count-badge count-badge--green" id="opencode-update-badge"></span>
   </button>
+  <button id="topright-antigravity-panel-btn" class="topright-icon-btn" data-tooltip="${t('antigravityPanel.toolbar')}">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 20 12 4l7.5 16"/><path d="M8.2 20a3.8 3.8 0 0 1 7.6 0"/></svg>
+    <span class="count-badge count-badge--green" id="antigravity-update-badge"></span>
+  </button>
   </div>
   <div id="term-minimized-tray"></div>
 </div>
+<button id="toolbar-show-btn" type="button" aria-pressed="true" aria-controls="wb-toolbar" aria-label="${t('toolbar.showWhiteboardToolbar')}" data-tooltip="${t('toolbar.showWhiteboardToolbar')}" hidden>
+  <img src="logo-synabun.png" alt="" draggable="false">
+</button>
 
 <!-- Help Modal -->
 <div id="help-overlay">
@@ -701,6 +713,7 @@ ${is3D ? '' : `
       <span class="fe-branch-btn-name" id="fe-branch-btn-name"></span>
       <span class="fe-branch-btn-badge" id="fe-branch-btn-badge"></span>
     </button>
+    <span class="fe-git-scan-live" id="fe-git-scan-live" role="status" aria-live="polite"></span>
   </div>
   <div class="fe-filter">
     <svg class="fe-filter-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></svg>
@@ -821,6 +834,10 @@ ${getEditorPanelHTML()}
       <button class="wb-tool wb-tool-sm" id="wb-toggle-logo" data-tooltip="Toggle logo">
         <img src="logo-synabun.png" alt="" style="width:18px;height:auto;opacity:0.6;">
       </button>
+      <div class="wb-tool-sep"></div>
+      <button class="wb-tool" id="wb-hide-btn" type="button" aria-pressed="false" aria-controls="wb-toolbar" aria-label="${t('toolbar.hideWhiteboardToolbar')}" data-tooltip="${t('toolbar.hideWhiteboardToolbar')}">
+        <svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
+      </button>
     </div>
 
     <div id="wb-canvas">

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

@@ -1,3 +1,4 @@
+import { syncOpenCodeWorkerQuestions, forgetWorkerQuestions } from './ocp-v2-ws.js';
 import { workerRestart } from '../worker-restart.js';
 import { t } from '../i18n.js';
 import { hostedSidepanelId, sidepanelHost } from '../ui-sidepanel-runtime.js';
@@ -1616,7 +1617,12 @@ async function boot() {
         // the session on screen stays.
         renderPill();
       } else if (liveTabs.length) {
-        const targetSid = liveTabs[liveTabs.length - 1];
+        const pendingSid = globalThis.__synabunPendingTab?.provider === 'opencode'
+          ? String(globalThis.__synabunPendingTab.tabId || '')
+          : '';
+        const targetSid = (pendingSid && liveTabs.includes(pendingSid))
+          ? pendingSid
+          : liveTabs[liveTabs.length - 1];
         const targetInfo = _tabInfoCache.get(targetSid) || null;
         bootNav.apply(() => {
           setSession(targetSid, targetInfo);
@@ -2233,6 +2239,8 @@ function removeTab(sessionId, { byUser = false } = {}) {
   forgetWorkerEnd(_automationRunIds.get(sessionId));
   _workerEnds.delete(sessionId);
   _automationRunIds.delete(sessionId);
+  forgetWorkerQuestions(sessionId);
+  forgetWorkerQuestions(sessionId);
   unregisterAutomationSession(sessionId);
   _automationRunning.delete(sessionId);
   _automationTurn.delete(sessionId);
@@ -2263,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>
@@ -2273,7 +2282,7 @@ function createTabPill(sessionId) {
   });
   pill.querySelector('.term-minimized-pill-close')?.addEventListener('click', (event) => {
     event.stopPropagation();
-    closeTabByUser(sessionId, 'pill close');
+    closeTabByUser(sessionId, 'pill close', { deleteBeforeClose: true });
   });
   tray.appendChild(pill);
   return pill;
@@ -2283,10 +2292,16 @@ function createTabPill(sessionId) {
 // continued the terminal automation manually; backend cleanup is best-effort.
 // Asked first when prompts are still waiting in that session; declined: the
 // tab stays, nothing is deleted, and this resolves false.
-async function closeTabByUser(sessionId, context) {
+async function closeTabByUser(sessionId, context, { deleteBeforeClose = false } = {}) {
   if (!(await mayCloseTab(sessionId))) return false;
-  const wasRunning = sessionId === getState().sessionId && !!getState().running;
-  closeSessionBackend(sessionId, { wasRunning, context }).catch(() => {});
+  // Only the tray X waits for deletion, including a turn in a background tab.
+  // Worker tabs retain their existing stop/dismiss and transcript ownership.
+  const deletePillSession = deleteBeforeClose && !_automationRunIds.has(sessionId);
+  const wasRunning = sessionId === getState().sessionId
+    ? !!getState().running
+    : deletePillSession && _sessionBusy.get(sessionId) === true;
+  const backendClose = closeSessionBackend(sessionId, { wasRunning, context }).catch(() => {});
+  if (deletePillSession) await backendClose;
   try { await handlePillClose(sessionId, { byUser: true }); }
   catch (err) { console.warn(`[ocp-v2-panel] local ${context} failed`, err); }
   return true;
@@ -2436,9 +2451,13 @@ async function handlePillClose(sessionId, { byUser = false } = {}) {
 }
 
 // Sub-agent child panel coordination ─────────────────────────────────────────
-on('opencode-panel:show', async () => {
+on('opencode-panel:show', async (data) => {
   try {
+    const requestedId = typeof data?.tabId === 'string' ? data.tabId : '';
     await showPrimaryOpencodePanel();
+    if (requestedId && _tabSessionIds.includes(requestedId)) {
+      await switchToSession(requestedId, _tabInfoCache.get(requestedId) || null);
+    }
   } catch (err) {
     console.warn('[ocp-v2-panel] show request failed', err);
   }
@@ -2457,7 +2476,7 @@ on('opencode-panel:request-show', async () => {
 on('opencode-panel:request-new-session', () => { beginNewSession(); });
 
 // Whiteboard "Send to Panel" → attach image to compose footer if OCP v2 is the
-// active sidepanel. Mirrors the gating used by Claude/Codex/OCP v1 so the event
+// active sidepanel. Mirrors the gating used by Claude/Codex/Antigravity so the event
 // is consumed by exactly one panel.
 on('wb:send-to-panel', async ({ dataUrl }) => {
   if (!dataUrl) return;
@@ -2527,6 +2546,7 @@ export async function attachOpenCodeAutomation(run, { focus = !!run?.focus, isCa
     && (_automationContinuedManually.has(sessionId) || _automationManualSendInFlight.has(sessionId));
   _automationRunIds.set(sessionId, run.runId);
   registerAutomationSession(sessionId, run.runId);
+  syncOpenCodeWorkerQuestions(run);
   if (running || previousRunId !== run.runId) {
     _automationContinuedManually.delete(sessionId);
     _automationManualSendInFlight.delete(sessionId);
@@ -2595,6 +2615,7 @@ export async function detachOpenCodeAutomation(runId) {
   if (!entry) return false;
   const [sessionId] = entry;
   _automationRunIds.delete(sessionId);
+  forgetWorkerQuestions(sessionId);
   _automationRunning.delete(sessionId);
   _automationTurn.delete(sessionId);
   _automationContinuedManually.delete(sessionId);

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

@@ -284,20 +284,29 @@ export async function rehydratePanelSession(store, api, {
   const left = () => { out.moved = true; return out; };
   if (!current()) return left();
 
-  if (refreshInfo) {
+  if (refreshInfo && requireInfo) {
     let res;
     try { res = await api.sessionGet(sessionId); } catch (err) { res = { ok: false, error: err?.message || String(err) }; }
     if (!current()) return left();
     if (!replyFailed(res) && res.data) { store.setSession(sessionId, res.data); out.info = true; }
-    else if (requireInfo) {
+    else {
       out.unavailable = true;
       out.error = (typeof res?.error === 'string' && res.error) || `Session ${String(sessionId).slice(0, 8)} is unavailable`;
       return out;
     }
-    // Otherwise the transcript may still answer.
   }
+  const infoTask = (refreshInfo && !requireInfo)
+    ? (async () => {
+        let res;
+        try { res = await api.sessionGet(sessionId); } catch (err) { res = { ok: false, error: err?.message || String(err) }; }
+        if (!current()) return false;
+        if (!replyFailed(res) && res.data) { store.setSession(sessionId, res.data); out.info = true; }
+        return true;
+      })()
+    : null;
   const transcript = await hydrateTranscript(store, api, { sessionId, isCurrent: current });
-  if (transcript.superseded) return left();
+  if (infoTask) await infoTask;
+  if (!current() || transcript.superseded) return left();
   out.transcript = transcript.applied;
   if (!transcript.applied) out.error = transcript.error;
   const s = store.getState();

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

@@ -10,7 +10,7 @@
 // ─────────────────────────────────────────────────────────────────────────────
 
 import { getDefaultStore } from './ocp-v2-state.js';
-import { api, supports, isDescendantSession, isKnownDescendantSession, onEvent } from './ocp-v2-ws.js';
+import { hasWorkerQuestions, api, supports, isDescendantSession, isKnownDescendantSession, onEvent } from './ocp-v2-ws.js';
 import {
   permissionCardView, ALWAYS_ALLOW_SCOPE, replyToPermission, FOREIGN_REQUEST_MESSAGE,
   transcriptQuestionCard, answerQuestion, skipQuestion,
@@ -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';
@@ -1001,6 +1011,12 @@ function renderToolPart(part, store) {
       done.textContent = 'Question answered.';
       return done;
     }
+    if (hasWorkerQuestions(store.getState().sessionId)) {
+      const stub = document.createElement('div');
+      stub.className = 'ocpv2-part ocpv2-part-question-stub';
+      stub.textContent = store.getState().pendingQuestions?.length ? 'Awaiting your answer…' : 'Question answered.';
+      return stub;
+    }
     // Dedup: if an SSE-driven QuestionRequest exists whose tool.callID matches
     // this tool part, let the pendingQuestions render handle it instead.
     const partCallId = part.callID || part.id;

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

@@ -45,6 +45,10 @@ const CSS = `
   opacity: 1;
   overflow: visible;
 }
+/* Windows: the shell is 92% opaque, so the blur behind it barely shows, yet Chromium recomputes it on every
+   repaint inside the panel (a transcript rendering, a stream). There it goes; the colour stays. */
+html.platform-win32 .ocpv2-panel,
+html.desktop-titlebar--win32 .ocpv2-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
 /* Keep footer menus above focused floating terminal windows. */
 .ocpv2-panel:has(.ocpv2-dropdown.open) {
   z-index: 99999;
@@ -408,55 +412,56 @@ const CSS = `
 }
 
 /* ── 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%,
@@ -464,6 +469,19 @@ const CSS = `
     rgba(232,224,220,0.0) 100%
   );
 }
+html.platform-win32 .ocpv2-session-pill.ocpv2-pill-running,
+html.desktop-titlebar--win32 .ocpv2-session-pill.ocpv2-pill-running {
+  border-color: rgba(232, 224, 220, 0.38);
+}
+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 .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;
@@ -492,6 +510,12 @@ const CSS = `
   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
@@ -1292,12 +1316,44 @@ const CSS = `
 }
 
 /* ── 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;
@@ -1312,33 +1368,27 @@ const CSS = `
 .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 {
@@ -2088,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;
@@ -2107,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);
@@ -3329,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;