synabun 2026.4.21 → 2026.4.25-beta.2

package/neural-interface/public/shared/ui-sidepanel-tray.js

@@ -0,0 +1,287 @@
+// SynaBun sidepanel tray placeholders.
+// Renders minimized pills for persisted sidepanel tabs before a panel is booted.
+
+import { storage } from './storage.js';
+import { emit } from './state.js';
+import { getProviderMeta } from './provider-icons.js';
+import { toggleClaudePanel, isClaudePanelOpen } from './ui-claude-panel.js';
+import { toggleCodexPanel, isCodexPanelOpen } from './ui-codex-panel.js';
+import { toggleOpencodePanel, isOpencodePanelOpen } from './ui-opencode-panel.js';
+
+const PLACEHOLDER_CLASS = 'sidepanel-tray-placeholder';
+
+const PROVIDERS = {
+  claude: {
+    providerId: 'claude-code',
+    windowKey: 'cp-window-id',
+    tabsKeyPrefix: 'synabun-claude-panel-tabs',
+    pillClass: 'cp-session-pill',
+    eventName: 'claude-panel:show',
+  },
+  codex: {
+    providerId: 'codex',
+    windowKey: 'cxp-window-id',
+    tabsKeyPrefix: 'synabun-codex-panel-tabs',
+    pillClass: 'cxp-session-pill',
+    eventName: 'codex-panel:show',
+  },
+  opencode: {
+    providerId: 'opencode',
+    windowKey: 'ocp-window-id',
+    tabsKeyPrefix: 'synabun-ocp-tabs',
+    pillClass: 'ocp-session-pill',
+    eventName: 'opencode-panel:show',
+  },
+};
+
+const _loadedProviders = new Set();
+let _initialized = false;
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function parseJson(raw, fallback = null) {
+  try { return raw ? JSON.parse(raw) : fallback; } catch { return fallback; }
+}
+
+function ensureWindowId(key) {
+  let id = sessionStorage.getItem(key);
+  if (!id) {
+    id = crypto.randomUUID();
+    sessionStorage.setItem(key, id);
+  }
+  return id;
+}
+
+function scopedTabsKey(meta) {
+  return `${meta.tabsKeyPrefix}-${ensureWindowId(meta.windowKey)}`;
+}
+
+function normalizeLabel(value) {
+  return String(value || '').trim();
+}
+
+function isDefaultLabel(label, defaults) {
+  const normalized = normalizeLabel(label).toLowerCase();
+  return !normalized || defaults.includes(normalized);
+}
+
+function hasClaudeState(tab) {
+  const label = normalizeLabel(tab.label);
+  return !!(
+    tab.sessionId
+    || tab.running
+    || tab.sessionCost
+    || tab.planFilePath
+    || tab.queue?.length
+    || !isDefaultLabel(label, ['new chat', 'new session', 'claude'])
+  );
+}
+
+function hasCodexState(tab) {
+  const label = normalizeLabel(tab.pendingSessionLabel || tab.title || tab.sessionLabel);
+  const draft = normalizeLabel(tab.draft);
+  return !!(
+    tab.threadId
+    || tab.running
+    || tab.startingThread
+    || draft
+    || tab.planContent
+    || tab.editedPlanContent
+    || tab.showPostPlanActions
+    || tab.planApprovalPending
+    || tab.showPostCompactionPrompt
+    || tab.postCompactionPending
+    || tab.queue?.length
+    || !isDefaultLabel(label, ['new session', 'saved session', 'untitled session', 'codex'])
+  );
+}
+
+function hasOpenCodeState(tab) {
+  const label = normalizeLabel(tab.sessionTitle);
+  const draft = normalizeLabel(tab.draft);
+  return !!(
+    tab.sessionId
+    || tab.running
+    || draft
+    || tab.planContent
+    || tab.editedPlanContent
+    || tab.showPostPlanActions
+    || tab.threadTokenUsage
+    || !isDefaultLabel(label, ['new session', 'opencode'])
+  );
+}
+
+function tabLabel(provider, tab) {
+  if (provider === 'claude') return normalizeLabel(tab.label) || 'New chat';
+  if (provider === 'codex') return normalizeLabel(tab.pendingSessionLabel || tab.title || tab.sessionLabel) || 'New session';
+  return normalizeLabel(tab.sessionTitle || tab.title) || 'New session';
+}
+
+function tabId(provider, tab, index) {
+  if (tab.id) return String(tab.id);
+  if (provider === 'claude' && tab.sessionId) return String(tab.sessionId);
+  if (provider === 'codex' && tab.threadId) return String(tab.threadId);
+  if (provider === 'opencode' && tab.sessionId) return String(tab.sessionId);
+  return `${provider}-${index}`;
+}
+
+function isRunning(tab) {
+  return !!(tab.running || tab.startingThread);
+}
+
+function providerPayload(provider) {
+  const meta = PROVIDERS[provider];
+  if (!meta) return null;
+  const key = scopedTabsKey(meta);
+  const data = parseJson(storage.getItem(key), null);
+  if (Array.isArray(data?.tabs) && data.tabs.length) {
+    return { key, activeIdx: Number(data.activeIdx) || 0, tabs: data.tabs };
+  }
+
+  if (provider === 'claude') {
+    const legacy = parseJson(storage.getItem('synabun-claude-panel-tabs'), null);
+    if (Array.isArray(legacy?.tabs) && legacy.tabs.length) {
+      return { key: 'synabun-claude-panel-tabs', activeIdx: Number(legacy.activeIdx) || 0, tabs: legacy.tabs };
+    }
+    const sessionId = storage.getItem('synabun-claude-panel-session');
+    if (sessionId) {
+      const label = storage.getItem(`synabun-session-label:${sessionId}`) || `${sessionId.slice(0, 8)}...`;
+      return { key: 'synabun-claude-panel-session', activeIdx: 0, tabs: [{ sessionId, label }], legacySingle: true };
+    }
+  }
+
+  if (provider === 'codex') {
+    const threadId = storage.getItem('synabun-codex-panel-thread');
+    const title = storage.getItem('synabun-codex-panel-title') || '';
+    if (threadId || title) {
+      return {
+        key: 'synabun-codex-panel-thread',
+        activeIdx: 0,
+        tabs: [{
+          id: 'legacy-codex-thread',
+          threadId,
+          title,
+          project: storage.getItem('synabun-codex-panel-project') || '',
+        }],
+        legacySingle: true,
+      };
+    }
+  }
+
+  return null;
+}
+
+function meaningfulTabs(provider, payload) {
+  const predicate = provider === 'claude'
+    ? hasClaudeState
+    : provider === 'codex'
+      ? hasCodexState
+      : hasOpenCodeState;
+  return (payload?.tabs || [])
+    .map((tab, index) => ({ tab, index }))
+    .filter(({ tab }) => predicate(tab));
+}
+
+function removePlaceholders(provider = '') {
+  const selector = provider
+    ? `.${PLACEHOLDER_CLASS}[data-sidepanel-provider="${provider}"]`
+    : `.${PLACEHOLDER_CLASS}`;
+  document.querySelectorAll(selector).forEach((node) => node.remove());
+}
+
+function writeProviderPayload(provider, payload, removeIndex) {
+  if (!payload || removeIndex < 0) return;
+  if (payload.legacySingle) {
+    if (provider === 'claude') storage.removeItem('synabun-claude-panel-session');
+    if (provider === 'codex') {
+      storage.removeItem('synabun-codex-panel-thread');
+      storage.removeItem('synabun-codex-panel-title');
+    }
+    return;
+  }
+
+  const tabs = payload.tabs.filter((_, index) => index !== removeIndex);
+  if (!tabs.length) {
+    storage.removeItem(payload.key);
+    return;
+  }
+  const activeIdx = Math.min(
+    Math.max((Number(payload.activeIdx) || 0) - (removeIndex < payload.activeIdx ? 1 : 0), 0),
+    tabs.length - 1,
+  );
+  storage.setItem(payload.key, JSON.stringify({ activeIdx, tabs }));
+}
+
+async function openProvider(provider, tabIdValue) {
+  if (provider === 'claude') {
+    if (!isClaudePanelOpen()) await toggleClaudePanel();
+  } else if (provider === 'codex') {
+    if (!isCodexPanelOpen()) await toggleCodexPanel();
+  } else if (provider === 'opencode') {
+    if (!isOpencodePanelOpen()) await toggleOpencodePanel();
+  }
+  emit(PROVIDERS[provider]?.eventName, { tabId: tabIdValue });
+}
+
+function createPlaceholder(provider, payload, tab, index) {
+  const tray = document.getElementById('term-minimized-tray');
+  const meta = PROVIDERS[provider];
+  if (!tray || !meta) return null;
+  const providerMeta = getProviderMeta(meta.providerId);
+  const id = tabId(provider, tab, index);
+  const pill = document.createElement('div');
+  pill.className = `term-minimized-pill ${meta.pillClass} ${PLACEHOLDER_CLASS}`;
+  pill.dataset.sidepanelProvider = provider;
+  pill.dataset.tabId = id;
+  pill.innerHTML = `
+    <span class="term-minimized-pill-icon" style="color:${providerMeta.color}">${providerMeta.icon}</span>
+    <span class="term-minimized-pill-label">${esc(tabLabel(provider, tab))}</span>
+    <button class="term-minimized-pill-close" data-tooltip="Close">&times;</button>
+  `;
+  pill.classList.toggle(`${meta.pillClass.replace('-session-pill', '')}-pill-running`, isRunning(tab));
+  pill.addEventListener('click', () => openProvider(provider, id));
+  pill.querySelector('.term-minimized-pill-close')?.addEventListener('click', (event) => {
+    event.stopPropagation();
+    writeProviderPayload(provider, payload, index);
+    pill.remove();
+    renderSidepanelTrayPlaceholders();
+  });
+  tray.appendChild(pill);
+  return pill;
+}
+
+export function renderSidepanelTrayPlaceholders() {
+  for (const provider of Object.keys(PROVIDERS)) {
+    if (_loadedProviders.has(provider)) {
+      removePlaceholders(provider);
+      continue;
+    }
+    removePlaceholders(provider);
+    const payload = providerPayload(provider);
+    for (const { tab, index } of meaningfulTabs(provider, payload)) {
+      createPlaceholder(provider, payload, tab, index);
+    }
+  }
+}
+
+export function markSidepanelTrayProviderLoaded(provider) {
+  if (!PROVIDERS[provider]) return;
+  _loadedProviders.add(provider);
+  removePlaceholders(provider);
+}
+
+export function initSidepanelTrayPlaceholders() {
+  if (_initialized) return;
+  _initialized = true;
+  window.addEventListener('sidepanel-tray:provider-loaded', (event) => {
+    markSidepanelTrayProviderLoaded(event.detail?.provider);
+  });
+  window.addEventListener('sidepanel-tray:refresh', renderSidepanelTrayPlaceholders);
+  renderSidepanelTrayPlaceholders();
+}

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

@@ -79,11 +79,15 @@ const SYNC_HANDLERS = {
   'schedule:fired':     (msg) => emit('sync:schedule:fired', msg),
   'schedule:completed':       (msg) => emit('sync:schedule:completed', msg),
   'schedule:failed':          (msg) => emit('sync:schedule:failed', msg),
-  'schedule:timer-set':       (msg) => emit('sync:schedule:timer-set', msg),
-  'schedule:timer-fired':     (msg) => emit('sync:schedule:timer-fired', msg),
-  'schedule:timer-cancelled': (msg) => emit('sync:schedule:timer-cancelled', msg),
-
-  // Quick timer events
+  'schedule:timer-set':       (msg) => emit('sync:schedule:timer-set', msg),
+  'schedule:timer-fired':     (msg) => emit('sync:schedule:timer-fired', msg),
+  'schedule:timer-cancelled': (msg) => emit('sync:schedule:timer-cancelled', msg),
+  'schedule-group:created':   (msg) => emit('sync:schedule-group:created', msg),
+  'schedule-group:updated':   (msg) => emit('sync:schedule-group:updated', msg),
+  'schedule-group:deleted':   (msg) => emit('sync:schedule-group:deleted', msg),
+  'schedule-group:reordered': (msg) => emit('sync:schedule-group:reordered', msg),
+
+  // Quick timer events
   'quick-timer:set':       (msg) => emit('sync:quick-timer:set', msg),
   'quick-timer:fired':     (msg) => emit('sync:quick-timer:fired', msg),
   'quick-timer:fired-now': (msg) => emit('sync:quick-timer:fired-now', msg),

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

@@ -682,6 +682,41 @@ function _sendResize(session) {
   } catch {}
 }
 
+const TERMINAL_WRITE_CHUNK = 64 * 1024;
+
+function _createTerminalWriter(term) {
+  const queue = [];
+  let writing = false;
+  let disposed = false;
+
+  const pump = () => {
+    if (disposed || writing || !queue.length) return;
+    let chunk = queue.shift();
+    if (chunk.length > TERMINAL_WRITE_CHUNK) {
+      queue.unshift(chunk.slice(TERMINAL_WRITE_CHUNK));
+      chunk = chunk.slice(0, TERMINAL_WRITE_CHUNK);
+    }
+    writing = true;
+    try {
+      term.write(chunk, () => {
+        writing = false;
+        queueMicrotask(pump);
+      });
+    } catch {
+      writing = false;
+    }
+  };
+
+  const write = (data) => {
+    if (disposed || data == null || data === '') return;
+    queue.push(String(data));
+    pump();
+  };
+  write.clear = () => { queue.length = 0; writing = false; };
+  write.dispose = () => { disposed = true; queue.length = 0; };
+  return write;
+}
+
 
 // ── Session registry (persists across page refresh) ──
 
@@ -856,23 +891,24 @@ async function loadXterm() {
     _xtermCSS = true;
   }
 
-  // Dynamic ESM imports from CDN
+  // Dynamic ESM imports from CDN. Intentionally avoid addon-webgl/addon-canvas
+  // for CLI/TUI sessions: multiple long-lived terminals can exhaust/corrupt
+  // glyph atlases or WebGL contexts. xterm's DOM renderer is slower, but it is
+  // the most deterministic renderer for agent TUIs.
   try {
-    const [xtermMod, fitMod, linksMod, searchMod, webglMod, canvasMod, unicodeMod] = await Promise.all([
+    const [xtermMod, fitMod, linksMod, searchMod, unicodeMod] = await Promise.all([
       import('https://esm.sh/@xterm/xterm@5.5.0'),
       import('https://esm.sh/@xterm/addon-fit@0.10.0'),
       import('https://esm.sh/@xterm/addon-web-links@0.11.0'),
       import('https://esm.sh/@xterm/addon-search@0.15.0'),
-      import('https://esm.sh/@xterm/addon-webgl@0.18.0').catch(() => null),
-      import('https://esm.sh/@xterm/addon-canvas@0.7.0').catch(() => null),
       import('https://esm.sh/@xterm/addon-unicode11@0.8.0'),
     ]);
     _Terminal = xtermMod.Terminal;
     _FitAddon = fitMod.FitAddon;
     _WebLinksAddon = linksMod.WebLinksAddon;
     _SearchAddon = searchMod.SearchAddon;
-    _WebglAddon = webglMod?.WebglAddon || null;
-    _CanvasAddon = canvasMod?.CanvasAddon || null;
+    _WebglAddon = null;
+    _CanvasAddon = null;
     _Unicode11Addon = unicodeMod.Unicode11Addon;
   } catch (err) {
     // Show error in terminal container if it exists, or throw
@@ -1608,6 +1644,7 @@ async function openSession(profile, cwd, existingSessionId, options = {}) {
   // and TUI layouts (box-drawing, spinners) are permanently misaligned.
   if (document.fonts?.ready) await document.fonts.ready;
   term.open(viewport);
+  const writeTerminal = _createTerminalWriter(term);
 
   // Find xterm's internal textarea (used for paste handler below, after ws is created)
   const xtermTextarea = viewport.querySelector('.xterm-helper-textarea');
@@ -1832,14 +1869,15 @@ async function openSession(profile, cwd, existingSessionId, options = {}) {
   ws.onmessage = (e) => {
     try {
       const msg = JSON.parse(e.data);
-      if (msg.type === 'output' || msg.type === 'replay') {
-        term.write(msg.data);
+      if (msg.type === 'output' || msg.type === 'replay' || msg.type === 'snapshot') {
+        writeTerminal(msg.data);
+        const replayData = (msg.type === 'snapshot' && msg.plain) ? msg.plain : msg.data;
         if (NOTIF_TRACKED_CLI_PROFILES.has(profile)) _scheduleCliStatusCheck(sessionId);
         // Accumulate output for _sendOnceReady replay buffer check
         const sess = _sessions.find(s => s.id === sessionId);
         if (sess) {
           if (!sess._replayBuf) sess._replayBuf = '';
-          sess._replayBuf += msg.data;
+          sess._replayBuf += replayData;
           if (sess._replayBuf.length > 16384) sess._replayBuf = sess._replayBuf.slice(-8192);
         }
       }
@@ -1850,7 +1888,7 @@ async function openSession(profile, cwd, existingSessionId, options = {}) {
       }
       if (msg.type === 'error') {
         if (msg.message === 'Session not found') { markSessionDead(sessionId); return; }
-        term.write(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
+        writeTerminal(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
       }
       if (msg.type === 'image_saved' && msg.path) {
         _clipCopy(msg.path);
@@ -1903,6 +1941,7 @@ async function openSession(profile, cwd, existingSessionId, options = {}) {
     cwd: cwd || null,
     label: options.label || (cwdLabel ? `${profileDef?.label || profile} · ${cwdLabel}` : (profileDef?.label || profile)),
     term, fitAddon, searchAddon, ws, viewport, ro,
+    _terminalWriter: writeTerminal,
     renderer,
     _webgl: webgl, // GPU renderer handle — disposed before term.dispose() on close
     dead: false,
@@ -2485,6 +2524,7 @@ async function reconnectSession(sessionId, profile, options = {}) {
   // Wait for fonts before opening (same FOUT fix as openSession)
   if (document.fonts?.ready) await document.fonts.ready;
   term.open(viewport);
+  const writeTerminal = _createTerminalWriter(term);
 
   // Find xterm's internal textarea (used for paste handler below, after ws is created)
   const xtermTextarea = viewport.querySelector('.xterm-helper-textarea');
@@ -2659,13 +2699,14 @@ async function reconnectSession(sessionId, profile, options = {}) {
   ws.onmessage = (e) => {
     try {
       const msg = JSON.parse(e.data);
-      if (msg.type === 'output' || msg.type === 'replay') {
-        term.write(msg.data);
+      if (msg.type === 'output' || msg.type === 'replay' || msg.type === 'snapshot') {
+        writeTerminal(msg.data);
+        const replayData = (msg.type === 'snapshot' && msg.plain) ? msg.plain : msg.data;
         // Accumulate output for _sendOnceReady replay buffer check
         const sess = _sessions.find(s => s.id === sessionId);
         if (sess) {
           if (!sess._replayBuf) sess._replayBuf = '';
-          sess._replayBuf += msg.data;
+          sess._replayBuf += replayData;
           if (sess._replayBuf.length > 16384) sess._replayBuf = sess._replayBuf.slice(-8192);
         }
       }
@@ -2679,7 +2720,7 @@ async function reconnectSession(sessionId, profile, options = {}) {
           markSessionDead(sessionId);
           return;
         }
-        term.write(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
+        writeTerminal(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
       }
       if (msg.type === 'image_saved' && msg.path) {
         _clipCopy(msg.path);
@@ -2726,6 +2767,7 @@ async function reconnectSession(sessionId, profile, options = {}) {
     cwd: options.cwd || null,
     label: options.label || (profileDef?.label || profile),
     term, fitAddon, searchAddon, ws, viewport, ro,
+    _terminalWriter: writeTerminal,
     renderer,
     _webgl: webgl, // GPU renderer handle — disposed before term.dispose() on close
     dead: false,
@@ -2825,8 +2867,9 @@ async function closeSession(idx) {
   if (session.ro) session.ro.disconnect();
   if (session._frameRenderer) session._frameRenderer.destroy();
   if (session.ws) session.ws.close();
-  // Dispose WebGL addon BEFORE term.dispose() so the GPU texture atlas is
-  // released — otherwise the atlas leaks across session close → new session.
+  if (session._terminalWriter) session._terminalWriter.dispose();
+  // Historical sessions may still have a WebGL addon handle from older code;
+  // dispose it before term.dispose() so GPU resources are released.
   if (session._webgl) { try { session._webgl.dispose(); } catch {} session._webgl = null; }
   if (session.term) session.term.dispose();
   if (session._visibilityHandler) document.removeEventListener('visibilitychange', session._visibilityHandler);
@@ -2930,6 +2973,7 @@ export function disconnectAllSessions() {
     session.dead = true;
     if (session.ro) session.ro.disconnect();
     session.ws.close();
+    if (session._terminalWriter) session._terminalWriter.dispose();
     if (session._webgl) { try { session._webgl.dispose(); } catch {} session._webgl = null; }
     if (session.term) session.term.dispose();
     session.viewport.remove();
@@ -2987,10 +3031,8 @@ function _reconnectTerminalWs(session, attempt = 0) {
   ws.onopen = () => {
     session._reconnecting = false;
     session.ws = ws;
-    // Server replays the full PTY outputBuffer on every connect. xterm.write()
-    // appends at cursor — without a reset, the prior render stacks under the
-    // replay, producing a visibly duplicated banner. Clear the screen and
-    // scrollback so the replay paints onto a clean slate.
+    // Server restores reconnects with a terminal-state snapshot. Clear any
+    // stale queued writes so the snapshot becomes the new canonical screen.
     session._needsReplayReset = true;
     session._replayBuf = '';
     if (session.term) {
@@ -3007,15 +3049,16 @@ function _reconnectTerminalWs(session, attempt = 0) {
     if (session.ws !== ws) return;
     try {
       const msg = JSON.parse(e.data);
-      if (msg.type === 'output' || msg.type === 'replay') {
-        if (msg.type === 'replay' && session._needsReplayReset) {
+      if (msg.type === 'output' || msg.type === 'replay' || msg.type === 'snapshot') {
+        if ((msg.type === 'replay' || msg.type === 'snapshot') && session._needsReplayReset) {
           session._needsReplayReset = false;
           if (session.term) {
-            try { session.term.reset(); } catch {}
+            try { session._terminalWriter?.clear?.(); session.term.reset(); } catch {}
           }
         }
         if (session.term) {
-          session.term.write(msg.data);
+          if (session._terminalWriter) session._terminalWriter(msg.data);
+          else session.term.write(msg.data);
           if (NOTIF_TRACKED_CLI_PROFILES.has(session.profile)) _scheduleCliStatusCheck(session.id);
         }
       }
@@ -3025,7 +3068,8 @@ function _reconnectTerminalWs(session, attempt = 0) {
       }
       if (msg.type === 'error') {
         if (msg.message === 'Session not found') { markSessionDead(session.id); return; }
-        if (session.term) session.term.write(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
+        if (session._terminalWriter) session._terminalWriter(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
+        else if (session.term) session.term.write(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
       }
       if (msg.type === 'image_saved' && msg.path) {
         _clipCopy(msg.path);
@@ -5089,6 +5133,11 @@ async function attachDetached(terminalSessionId, profile, initialMessage, autoSu
     _pendingSessionIds.delete(terminalSessionId);
     console.error('[SynaBun] attachDetached failed:', err);
     showTermToast(`Failed to attach terminal: ${err.message || 'unknown error'}`);
+    const termContainer = $('term-container');
+    const termHidden = !termContainer || termContainer.offsetParent === null;
+    if (termHidden) {
+      try { alert(`[SynaBun] Launch failed: ${err.message || 'unknown error'}\n\nOpen DevTools Console for stack trace.`); } catch {}
+    }
   }
 }
 
@@ -5187,8 +5236,8 @@ function _sendOnceReady(session, message, autoSubmit) {
   function onMessage(e) {
     try {
       const msg = JSON.parse(e.data);
-      if (msg.type === 'output' || msg.type === 'replay') {
-        _outputBuf += msg.data;
+      if (msg.type === 'output' || msg.type === 'replay' || msg.type === 'snapshot') {
+        _outputBuf += (msg.type === 'snapshot' && msg.plain) ? msg.plain : msg.data;
         // Strip ANSI codes before matching — CLI prompts are colorized
         const clean = _outputBuf.replace(ANSI_RE, '');
         if (READY_PATTERNS.some(p => p.test(clean))) {

package/neural-interface/public/shared/ui-tool-updates.js

@@ -53,22 +53,56 @@ function runUpdate(key, badge) {
   }
 
   emit('terminal:run-command', { command: cmd, label: `Update ${TOOL_LABELS[key] || key}` });
-  // Optimistically clear the badge and restore parent tooltip
-  if (badge) {
-    badge.textContent = '';
-    const parents = PARENT_ELEMENTS[key];
-    if (parents?.toolbar) {
-      const btn = $(parents.toolbar);
-      if (btn?.dataset.tooltipOriginal) btn.dataset.tooltip = btn.dataset.tooltipOriginal;
-    }
-  }
-  // Poll for the new installed version after the install completes.
-  // npm-global installs typically take 5–45s; opencode upgrade similar.
-  // Re-check a few times, bail once the badge is cleared or retries run out.
-  const delays = [20000, 45000, 90000];
-  for (const ms of delays) {
-    setTimeout(() => { forceCheckToolUpdates(); }, ms);
+  // Optimistically clear BOTH toolbar + menu badges and restore parent tooltips.
+  const ids = TOOL_ELEMENTS[key];
+  const parents = PARENT_ELEMENTS[key];
+  for (const which of ['toolbar', 'menu']) {
+    const b = ids?.[which] && $(ids[which]);
+    if (b) b.textContent = '';
+    const pBtn = parents?.[which] && $(parents[which]);
+    if (pBtn?.dataset.tooltipOriginal) pBtn.dataset.tooltip = pBtn.dataset.tooltipOriginal;
   }
+  // Poll repeatedly until the server confirms the new version is installed
+  // (updateAvailable flips to false for this tool) or we hit the max window.
+  // Native installer updates can take 1–3min; npm-global 5–60s.
+  schedulePostUpdatePolling(key);
+}
+
+// Poll /api/system/tool-versions?force=1 until the specified tool reports
+// updateAvailable=false, or a max window elapses. Safe to call repeatedly —
+// latest call supersedes any prior poll loop for the same tool.
+const _pollTimers = new Map();
+function schedulePostUpdatePolling(key) {
+  const prior = _pollTimers.get(key);
+  if (prior) clearTimeout(prior);
+
+  const startedAt = Date.now();
+  const maxMs = 10 * 60 * 1000;
+  const initialDelay = 10000;
+  const interval = 10000;
+
+  const tick = async () => {
+    try {
+      const res = await fetch('/api/system/tool-versions?force=1');
+      if (res.ok) {
+        const data = await res.json();
+        applyBadges(data);
+        const info = data?.tools?.[key];
+        if (info && !info.updateAvailable) {
+          _pollTimers.delete(key);
+          return;
+        }
+      }
+    } catch { /* ignore, will retry */ }
+
+    if (Date.now() - startedAt >= maxMs) {
+      _pollTimers.delete(key);
+      return;
+    }
+    _pollTimers.set(key, setTimeout(tick, interval));
+  };
+
+  _pollTimers.set(key, setTimeout(tick, initialDelay));
 }
 
 function wireParentIntercept(parentId, badgeId, key) {

package/neural-interface/public/shared/ui-tutorial-steps.js

@@ -483,8 +483,10 @@ export const TUTORIAL_STEPS = [
           { id: 'claude-haiku-4-5',  label: 'Haiku 4.5',   desc: 'Fastest',       tier: 'light' },
         ],
         'codex': [
-          { id: 'o3',      label: 'o3',      desc: 'Deep reasoning',  tier: 'top' },
-          { id: 'o4-mini', label: 'o4-mini', desc: 'Fast reasoning',  tier: 'default' },
+          { id: 'gpt-5.5',       label: 'GPT-5.5',       desc: 'Most capable',   tier: 'top' },
+          { id: 'gpt-5.4',       label: 'GPT-5.4',       desc: 'Strong general' },
+          { id: 'gpt-5.4-mini',  label: 'GPT-5.4 Mini',  desc: 'Fast & cheap',   tier: 'default' },
+          { id: 'gpt-5.3-codex', label: 'GPT-5.3 Codex', desc: 'Codex-tuned' },
         ],
         'gemini': [
           { id: 'gemini-2.5-pro',   label: '2.5 Pro',   desc: 'Most capable',  tier: 'default' },