synabun 2026.4.21 → 2026.4.25-beta.1

package/neural-interface/public/shared/ui-automation-studio.js

@@ -21,6 +21,7 @@ import {
   reorderLoopFolders,
   fetchActiveLoop,
   launchLoop,
+  sendClientLoopLog,
   stopLoop,
   launchAgent,
   fetchAgents,
@@ -181,7 +182,8 @@ const CLI_MODELS = {
     { id: 'claude-haiku-4-5',  label: 'Haiku 4.5',   desc: 'Fastest' },
   ],
   'codex': [
-    { id: 'gpt-5.4',       label: 'GPT-5.4',       desc: 'Most capable', tier: 'top' },
+    { 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' },
   ],
@@ -1469,15 +1471,30 @@ async function confirmLaunch() {
     // Launch as floating terminal + floating browser
     showToast('Launching loop...');
     emit('terminal:expect-managed');
+    sendClientLoopLog(null, 'launch:client', 'confirmLaunch about to POST /api/loop/launch', {
+      profile: params.profile,
+      usesBrowser: !!params.usesBrowser,
+      iterations: params.iterations,
+      maxMinutes: params.maxMinutes,
+      taskLen: (params.task || '').length,
+      cwd: params.cwd || null,
+      browserSessionId: params.browserSessionId || null,
+    });
     console.log('[AS] confirmLaunch: calling launchLoop, profile =', params.profile, ', usesBrowser =', params.usesBrowser);
     const result = await launchLoop(params);
     console.log('[AS] confirmLaunch: launchLoop result =', JSON.stringify(result));
+    sendClientLoopLog(result?.terminalSessionId || null, 'launch:client', 'launchLoop response received', { result });
     if (!result?.ok) {
       emit('terminal:attach-floating', {});
       showToast(result?.error || 'Failed to launch loop');
       return;
     }
     console.log('[AS] confirmLaunch: emitting terminal:attach-floating, terminalSessionId =', result.terminalSessionId);
+    sendClientLoopLog(result.terminalSessionId, 'launch:client', 'emit terminal:attach-floating', {
+      terminalSessionId: result.terminalSessionId,
+      profile: params.profile || 'claude-code',
+      initialMessage: '[SynaBun Loop] Begin task.',
+    });
     emit('terminal:attach-floating', {
       terminalSessionId: result.terminalSessionId,
       profile: params.profile || 'claude-code',
@@ -1491,7 +1508,9 @@ async function confirmLaunch() {
     // Clear the managed-terminal flag since we won't emit terminal:attach-floating
     emit('terminal:attach-floating', {});
     console.error('[AS] confirmLaunch: caught error:', err);
+    sendClientLoopLog(null, 'launch:client', 'confirmLaunch caught error', { err: err?.message || String(err) });
     showToast('Launch failed: ' + (err.message || 'unknown error'));
+    try { alert(`[SynaBun] Loop launch failed: ${err?.message || err || 'unknown error'}\n\nOpen DevTools Console for stack trace.`); } catch {}
   }
 }
 
@@ -1541,20 +1560,25 @@ function buildTemplateCommand(template) {
 // ═══════════════════════════════════════════
 
 export function initAutomationStudio() {
-  on('automations:open', () => openPanel());
+  on('automations:open', (opts) => openPanel(opts || {}));
   on('automations:open-wizard', () => { openPanel(); });
-  on('automations:open-schedules', () => { openPanel().then(() => { _view = 'schedules'; _selected = null; loadScheduleData().then(() => renderView()); }); });
   on('automations:import', () => { openPanel().then(() => triggerImport()); });
   setupAgentWebSocket();
-  setupScheduleWebSocket();
 }
 
-async function openPanel() {
+async function openPanel(opts = {}) {
   if (isGuest() && !hasPermission('automations')) {
     showGuestToast('Automation Studio is disabled by the host');
     return;
   }
-  if (_panel) { _panel.focus(); return; }
+  if (_panel) {
+    if (opts.templateId) {
+      const tpl = _templates.find(t => t.id === opts.templateId);
+      if (tpl) switchToDetail(tpl);
+    }
+    _panel.focus();
+    return;
+  }
 
   // Backdrop
   _backdrop = document.createElement('div');
@@ -1574,7 +1598,12 @@ async function openPanel() {
 
   wirePanel();
   await loadData();
-  renderView();
+  if (opts.templateId) {
+    const tpl = _templates.find(t => t.id === opts.templateId);
+    if (tpl) switchToDetail(tpl); else renderView();
+  } else {
+    renderView();
+  }
   requestAnimationFrame(() => { _backdrop.classList.add('open'); _panel.classList.add('open'); });
   startPolling();
 }
@@ -1659,7 +1688,7 @@ function wirePanel() {
   $('as-close')?.addEventListener('click', closePanel);
   $('as-new-btn')?.addEventListener('click', () => { _view = 'picker'; _selected = null; renderView(); });
   $('as-new-folder-btn')?.addEventListener('click', (e) => openFolderPopover(e.currentTarget, null));
-  $('as-schedules-btn')?.addEventListener('click', () => { _view = 'schedules'; _selected = null; loadScheduleData().then(() => renderView()); });
+  $('as-schedules-btn')?.addEventListener('click', () => emit('automations:open-schedules'));
   $('as-import-btn')?.addEventListener('click', () => triggerImport());
 
   $('as-sidebar-toggle')?.addEventListener('click', () => {
@@ -1721,8 +1750,6 @@ function wirePanel() {
   const onEsc = (e) => {
     if (e.key === 'Escape' && _panel) {
       if (_view === 'launch') { closeLaunchInline(); return; }
-      if (_view === 'schedule-editor') { _view = 'schedules'; _editingSchedule = null; renderView(); return; }
-      if (_view === 'schedules') { _view = 'welcome'; renderView(); return; }
       if (_view === 'wizard') { _view = _selected ? 'detail' : 'welcome'; renderView(); return; }
       if (_view === 'detail' || _view === 'running' || _view === 'picker') {
         if (_detailDirty && !confirm('Discard unsaved changes?')) return;
@@ -2233,8 +2260,6 @@ function renderView() {
     case 'detail': renderDetailMain(); break;
     case 'wizard': renderWizardMain(); break;
     case 'running': renderRunningMain(); break;
-    case 'schedules': renderSchedulesMain(); break;
-    case 'schedule-editor': renderScheduleEditorMain(); break;
     case 'launch': break; // launch panel is rendered by showLaunchInline
   }
 }
@@ -3413,6 +3438,7 @@ function renderRunningMain() {
         </div>
         <div class="as-running-controls">
           <button class="as-btn-stop" data-action="force-stop" data-id="${loop.terminalSessionId || ''}">Stop</button>
+          ${loop.terminalSessionId ? `<a class="as-btn-stop" style="margin-left:8px;text-decoration:none;display:inline-flex;align-items:center;" href="/api/loop/log/${encodeURIComponent(loop.terminalSessionId)}" target="_blank" rel="noopener">View Loop Log</a>` : ''}
         </div>
       </div>`;
   }

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

@@ -150,8 +150,24 @@ const STOR = {
   windowRegistry: 'synabun-claude-panel-windows',   // JSON map of windowId → lastSeen timestamp
   bootId: 'synabun-claude-panel-boot-id',           // server boot ID — detect restarts
   defaultModel: 'synabun-claude-panel-default-model', // user's preferred default model
+  sessionSnapshots: 'synabun-claude-panel-session-snapshots', // global, per-sessionId rendered HTML cache
 };
 
+// ── Session HTML snapshot cache ──
+// Global per-sessionId cache of rendered transcript HTML so resume on a fresh
+// browser load mirrors the exact render that was produced during the live run.
+// Falls back to upstream JSONL rebuild when no snapshot exists or it is stale.
+const MAX_SESSION_SNAPSHOTS = 24;
+const MAX_SESSION_SNAPSHOT_CHARS = 2_500_000;
+let _sessionSnapshots = (() => {
+  try {
+    const raw = storage.getItem(STOR.sessionSnapshots);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) ? parsed : {};
+  } catch { return {}; }
+})();
+
 const EFFORT_LEVELS = ['off', 'low', 'medium', 'high', 'max'];
 const EFFORT_LABELS = { off: 'Think', low: 'lo', medium: 'med', high: 'hi', max: 'max' };
 const EFFORT_TITLES = {
@@ -1076,7 +1092,7 @@ function injectStyles() {
       padding: 1px;
       background: rgba(255,255,255,0.05);
       transition: background 0.4s;
-      min-width: 0; overflow: hidden;
+      min-width: 0;
     }
     .cp-input-wrap::before {
       content: '';
@@ -1476,7 +1492,8 @@ function injectStyles() {
       backdrop-filter: blur(20px);
       border: 1px solid rgba(255,255,255,0.08);
       border-radius: 10px; padding: 4px;
-      z-index: 310; max-height: 200px; overflow-y: auto;
+      z-index: 310; max-height: 320px; overflow-y: auto;
+      overscroll-behavior: contain;
       box-shadow: var(--shadow-lg);
     }
     .cp-slash-hints.open { display: block; }
@@ -2632,14 +2649,14 @@ document.addEventListener('click', (e) => {
 });
 
 // ── Tab lifecycle ──
-function createTab(sessionId = null, label = 'New chat', { autoSwitch = true } = {}) {
+function createTab(sessionId = null, label = 'New chat', { autoSwitch = true, id = null } = {}) {
   if (_tabs.length >= MAX_TABS) return null;
   // Capture current dropdown state for the new tab's project/model/effort
   const _$proj = _panel?.querySelector('#cp-project');
   const _$mod = _panel?.querySelector('#cp-model');
   const _$think = _panel?.querySelector('#cp-think-toggle');
   const tab = {
-    id: crypto.randomUUID(),
+    id: id || crypto.randomUUID(),
     sessionId,
     label,
     project: ddGetValue(_$proj) || '',       // per-tab project isolation
@@ -2729,6 +2746,7 @@ function switchTab(idx) {
   if (idx < 0 || idx >= _tabs.length) return;
   const prev = activeTab();
   if (prev && prev !== _tabs[idx]) {
+    flushSessionSnapshotSave(prev);
     const $input = _panel?.querySelector('#cp-input');
     if ($input) prev.draft = $input.value;
     // Animate out
@@ -2818,6 +2836,7 @@ function switchTab(idx) {
 function closeTab(idx) {
   if (idx < 0 || idx >= _tabs.length) return;
   const tab = _tabs[idx];
+  flushSessionSnapshotSave(tab);
   recordHookEvent(tab, 'SessionEnd', tab.sessionId || '(new)');
   tab.closed = true;
   clearTimeout(tab.reconnectTimer);
@@ -2956,7 +2975,7 @@ function restoreTabs() {
       const data = JSON.parse(raw);
       if (data.tabs?.length) {
         for (const saved of data.tabs) {
-          const t = createTab(saved.sessionId, saved.label, { autoSwitch: false });
+          const t = createTab(saved.sessionId, saved.label, { autoSwitch: false, id: saved.id });
           if (t && saved.sessionCost) t.sessionCost = saved.sessionCost;
           if (t && saved.running) t._wasRunning = true; // trigger reattach on WS open
           if (t && saved.project) t.project = saved.project;
@@ -2979,7 +2998,7 @@ function restoreTabs() {
       const data = JSON.parse(legacyRaw);
       if (data.tabs?.length) {
         for (const saved of data.tabs) {
-          const t = createTab(saved.sessionId, saved.label, { autoSwitch: false });
+          const t = createTab(saved.sessionId, saved.label, { autoSwitch: false, id: saved.id });
           if (t && saved.sessionCost) t.sessionCost = saved.sessionCost;
           if (t && saved.running) t._wasRunning = true;
           if (t && saved.project) t.project = saved.project;
@@ -3055,6 +3074,7 @@ async function _releaseAllSessionLocks() {
 
 // Release locks when window closes
 window.addEventListener('beforeunload', () => {
+  flushAllSessionSnapshots();
   _stopHeartbeat();
   // Use sendBeacon for reliable delivery on close
   navigator.sendBeacon(
@@ -3063,6 +3083,11 @@ window.addEventListener('beforeunload', () => {
   );
 });
 
+window.addEventListener('pagehide', flushAllSessionSnapshots);
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) flushAllSessionSnapshots();
+});
+
 // Re-sync UI state when window regains focus (catches stale running states from background tabs)
 window.addEventListener('focus', () => {
   if (!_panel) return;
@@ -3713,9 +3738,151 @@ function promptNameNewSession() {
   });
 }
 
+// ── Session HTML snapshot helpers ──
+function _normalizeSnapshotEntry(entry) {
+  if (!entry || typeof entry !== 'object') return null;
+  const html = typeof entry.html === 'string' ? entry.html : '';
+  if (!html) return null;
+  return {
+    html,
+    updatedAt: Number(entry.updatedAt) || 0,
+    label: typeof entry.label === 'string' ? entry.label : '',
+    usage: (entry.usage && typeof entry.usage === 'object') ? entry.usage : null,
+    contextWindow: Number(entry.contextWindow) || 0,
+    turns: Number(entry.turns) || 0,
+    sessionCost: Number(entry.sessionCost) || 0,
+    itemCount: Number(entry.itemCount) || 0,
+  };
+}
+
+function _persistSessionSnapshots() {
+  try {
+    const source = (_sessionSnapshots && typeof _sessionSnapshots === 'object' && !Array.isArray(_sessionSnapshots))
+      ? _sessionSnapshots : {};
+    const entries = Object.entries(source)
+      .map(([sid, e]) => [sid, _normalizeSnapshotEntry(e)])
+      .filter(([, e]) => !!e)
+      .sort(([, a], [, b]) => (b.updatedAt || 0) - (a.updatedAt || 0));
+    const next = {};
+    let totalChars = 0;
+    for (const [sid, entry] of entries) {
+      const size = entry.html.length;
+      if (Object.keys(next).length >= MAX_SESSION_SNAPSHOTS) break;
+      if (totalChars + size > MAX_SESSION_SNAPSHOT_CHARS && Object.keys(next).length) continue;
+      totalChars += size;
+      next[sid] = entry;
+    }
+    _sessionSnapshots = next;
+    storage.setItem(STOR.sessionSnapshots, JSON.stringify(next));
+  } catch {}
+}
+
+function getSessionSnapshot(sid) {
+  if (!sid) return null;
+  return _normalizeSnapshotEntry(_sessionSnapshots?.[sid]);
+}
+
+function writeSessionSnapshot(tab) {
+  const sid = tab?.sessionId || null;
+  const $msgs = tab?.messagesEl || null;
+  if (!sid || !$msgs) return;
+  const html = $msgs.innerHTML || '';
+  if (!html.trim()) return;
+  // Skip snapshot if the transcript only contains the empty-state placeholder
+  if ($msgs.children.length === 1 && $msgs.firstElementChild?.classList?.contains('cp-empty')) return;
+  if (!_sessionSnapshots || typeof _sessionSnapshots !== 'object' || Array.isArray(_sessionSnapshots)) {
+    _sessionSnapshots = {};
+  }
+  const itemCount = [...$msgs.children].filter(n =>
+    !n.classList?.contains('cp-empty') && !n.classList?.contains('thinking')
+  ).length;
+  _sessionSnapshots[sid] = {
+    html,
+    updatedAt: Date.now(),
+    label: tab.label || '',
+    usage: tab.usage ? { ...tab.usage } : null,
+    contextWindow: tab.contextWindow || 0,
+    turns: tab.turns || 0,
+    sessionCost: tab.sessionCost || 0,
+    itemCount,
+  };
+  _persistSessionSnapshots();
+}
+
+function scheduleSessionSnapshotSave(tab, ms = 350) {
+  if (!tab?.sessionId || !tab?.messagesEl) return;
+  if (tab._snapshotTimer) clearTimeout(tab._snapshotTimer);
+  tab._snapshotTimer = setTimeout(() => {
+    tab._snapshotTimer = null;
+    writeSessionSnapshot(tab);
+  }, ms);
+}
+
+function flushSessionSnapshotSave(tab) {
+  if (!tab) return;
+  if (tab._snapshotTimer) { clearTimeout(tab._snapshotTimer); tab._snapshotTimer = null; }
+  writeSessionSnapshot(tab);
+}
+
+function flushAllSessionSnapshots() {
+  for (const tab of _tabs) flushSessionSnapshotSave(tab);
+}
+
+function renderStoredSession(snapshot, $msgs, tab) {
+  const norm = _normalizeSnapshotEntry(snapshot);
+  if (!norm || !$msgs) return false;
+  $msgs.innerHTML = norm.html;
+  // Disable interactive controls — restored DOM has no event handlers and
+  // any pending state (permission prompts, plan cards, ask cards) is stale.
+  $msgs.querySelectorAll('button, input, select, textarea').forEach(node => { node.disabled = true; });
+  // Drop transient overlays that should never resurrect after a fresh load
+  $msgs.querySelectorAll('.thinking, .msg-permission-prompt, .post-plan-card').forEach(n => n.remove());
+  // Re-attach copy buttons + file path links — innerHTML wipes their listeners
+  $msgs.querySelectorAll('pre .cp-copy-btn').forEach(btn => btn.remove());
+  addCopyButtons($msgs);
+  linkifyFilePaths($msgs);
+  if (tab) {
+    if (norm.usage) {
+      tab.usage.inputTokens = norm.usage.inputTokens || 0;
+      tab.usage.outputTokens = norm.usage.outputTokens || 0;
+      tab.usage.cacheRead = norm.usage.cacheRead || 0;
+      tab.usage.cacheWrite = norm.usage.cacheWrite || 0;
+    }
+    if (norm.contextWindow) tab.contextWindow = norm.contextWindow;
+    if (norm.turns) tab.turns = norm.turns;
+    if (norm.sessionCost) tab.sessionCost = norm.sessionCost;
+    renderGauge(tab);
+  }
+  return true;
+}
+
 async function loadSessionHistory(sid, $msgs) {
   if (!$msgs) $msgs = activeTab()?.messagesEl;
   if (!$msgs) return;
+  // Try local snapshot first — exact replay of the live render, lossless.
+  const snap = getSessionSnapshot(sid);
+  if (snap && snap.html) {
+    const tab = _tabs.find(t => t.messagesEl === $msgs) || activeTab();
+    if (renderStoredSession(snap, $msgs, tab)) {
+      scrollEnd();
+      // Background refresh: pull latest JSONL in case the session continued in
+      // another window. If upstream has more turns than the snapshot, fall back
+      // to the rebuild path below so the resumed view is current.
+      try {
+        const $project = _panel?.querySelector('#cp-project');
+        const project = ddGetValue($project) || undefined;
+        const params = new URLSearchParams({ limit: '1' });
+        if (project) params.set('project', project);
+        const probe = await fetch(`/api/claude-code/sessions/${encodeURIComponent(sid)}/messages?${params}`);
+        const probeData = await probe.json();
+        if ((probeData?.total || 0) > (snap.itemCount || 0) + 2) {
+          // Upstream has materially more content — fall through to full rebuild
+        } else {
+          return;
+        }
+      } catch { return; }
+    }
+  }
   const $project = _panel?.querySelector('#cp-project');
   const project = ddGetValue($project) || undefined;
   const params = new URLSearchParams({ limit: '500' });
@@ -3737,6 +3904,13 @@ async function loadSessionHistory(sid, $msgs) {
         const avatar = document.createElement('div'); avatar.className = 'msg-avatar';
         avatar.innerHTML = CLAUDE_ICON; el.appendChild(avatar);
         const wrap = document.createElement('div'); wrap.className = 'msg-content';
+        if (m.thinking) {
+          const thinkEl = document.createElement('details');
+          thinkEl.className = 'msg-thinking';
+          thinkEl.innerHTML = `<summary><span class="msg-thinking-icon">${THINKING_ICON}</span><span class="msg-thinking-label">Thinking</span><span class="msg-thinking-chevron">&#x203A;</span></summary><div class="msg-thinking-content"></div>`;
+          thinkEl.querySelector('.msg-thinking-content').textContent = m.thinking;
+          wrap.appendChild(thinkEl);
+        }
         if (m.text) {
           const body = document.createElement('div'); body.className = 'msg-body';
           body._rawMd = m.text;
@@ -3788,7 +3962,7 @@ async function loadSessionHistory(sid, $msgs) {
       $msgs.prepend(note);
     }
     // Populate context gauge from session history usage
-    const tab = activeTab();
+    const tab = _tabs.find(t => t.messagesEl === $msgs) || activeTab();
     if (tab && data.usage) {
       tab.usage.inputTokens = data.usage.input_tokens || 0;
       tab.usage.outputTokens = data.usage.output_tokens || 0;
@@ -3799,6 +3973,9 @@ async function loadSessionHistory(sid, $msgs) {
       renderGauge(tab);
     }
     scrollEnd();
+    // Cache the rebuilt transcript so the next resume on a fresh browser hits
+    // the snapshot path and avoids paying the JSONL → DOM cost again.
+    if (tab && tab.sessionId === sid) writeSessionSnapshot(tab);
   } catch {
     $msgs.innerHTML = '<div class="msg-status">Failed to load history</div>';
   }
@@ -4261,6 +4438,7 @@ function handleTabEvent(tab, ev) {
   }
   if (ev.type === 'tool_result') {
     updateToolResult(tab, ev);
+    scheduleSessionSnapshotSave(tab);
     // Re-show thinking — Claude is processing the tool result
     if (tab.running && !tab.pendingAsk) showThinking(tab);
     return;
@@ -4527,6 +4705,7 @@ function renderPostPlanActions(tab, headerText) {
 
   const actions = [
     { label: 'Continue with implementation', prompt: 'Continue with the implementation based on the approved plan.', primary: true },
+    { label: 'Continue planning', action: 'continue-planning' },
     { label: 'Compact context', action: 'compact' },
     { label: 'Edit plan', action: 'plan' },
   ];
@@ -4537,7 +4716,11 @@ function renderPostPlanActions(tab, headerText) {
     btn.addEventListener('click', () => {
       card.style.opacity = '0.45';
       card.style.pointerEvents = 'none';
-      if (a.action === 'compact') {
+      if (a.action === 'continue-planning') {
+        tab.showPostPlanActions = false;
+        saveTabs();
+        return;
+      } else if (a.action === 'compact') {
         // Guard: cannot compact while running
         if (tab.running) { appendStatus(tab, 'Cannot compact while Claude is processing.'); card.style.opacity = '1'; card.style.pointerEvents = 'auto'; return; }
         if (tab.ws?.readyState === WebSocket.OPEN) {
@@ -4879,6 +5062,7 @@ function renderAssistant(tab, msg) {
     $msgs.appendChild(postPlanMsg);
   }
   if (tab === activeTab()) scrollEnd();
+  scheduleSessionSnapshotSave(tab);
 }
 
 /** Build an interactive AskUserQuestion card from a tool_use block */
@@ -5993,6 +6177,7 @@ function appendUser(tab, text, images, files) {
   if (text) { const txt = document.createTextNode(text); bubble.appendChild(txt); }
   el.appendChild(bubble); $msgs.appendChild(el);
   if (tab === activeTab()) scrollEnd();
+  scheduleSessionSnapshotSave(tab);
 }
 
 function showThinking(tab) {
@@ -6022,11 +6207,13 @@ function appendStatus(tab, text) {
   const $msgs = tab.messagesEl; if (!$msgs) return;
   const el = document.createElement('div'); el.className = 'msg-status'; el.textContent = text;
   $msgs.appendChild(el); pruneMessages($msgs); if (tab === activeTab()) scrollEnd();
+  scheduleSessionSnapshotSave(tab);
 }
 function appendError(tab, text) {
   const $msgs = tab.messagesEl; if (!$msgs) return;
   const el = document.createElement('div'); el.className = 'msg-error'; el.textContent = text;
   $msgs.appendChild(el); pruneMessages($msgs); if (tab === activeTab()) scrollEnd();
+  scheduleSessionSnapshotSave(tab);
 }
 
 function scrollEnd() {
@@ -7068,12 +7255,13 @@ export async function toggleClaudePanel() {
     wireEvents();
     await loadConfig();   // must complete before restoreTabs — checks server boot ID
     loadSkills();
-    restoreTabs();
-    loadMonthlyCost();
-    syncSessionCosts();
-    _wireBrowserSync();
-    _startHeartbeat();
-  }
+    restoreTabs();
+    loadMonthlyCost();
+    syncSessionCosts();
+    _wireBrowserSync();
+    _startHeartbeat();
+    window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'claude' } }));
+  }
   _visible = !_visible;
   if (_visible) {
     if (_tabs.length === 0) createTab(null, 'New chat');
@@ -7217,13 +7405,24 @@ async function loadSkills() {
       { name: 'loop', description: 'Run a command on a recurring interval' },
     ];
     for (const b of extras) { if (!seen.has(b.name)) { _skillsCache.push(b); seen.add(b.name); } }
+    try {
+      const pc = await fetch('/api/claude-code/plugin-commands').then(r => r.json());
+      for (const c of (pc?.commands || [])) {
+        if (!c?.name || seen.has(c.name)) continue;
+        const label = c.plugin ? `${c.description || ''}${c.description ? ' · ' : ''}(plugin: ${c.plugin})` : (c.description || '');
+        _skillsCache.push({ name: c.name, description: label });
+        seen.add(c.name);
+      }
+    } catch {}
     _skillsCache.sort((a, b) => a.name.localeCompare(b.name));
   } catch { _skillsCache = SLASH_COMMANDS.map(c => ({ name: c.name, description: c.desc })); }
   return _skillsCache;
 }
-function showSlashHints(filter) {
+async function showSlashHints(filter) {
   const $hints = _panel?.querySelector('#cp-slash-hints');
-  if (!$hints || !_skillsCache) return;
+  if (!$hints) return;
+  if (!_skillsCache) await loadSkills();
+  if (!_skillsCache) return;
   const q = filter.toLowerCase();
   const matches = _skillsCache.filter(s => s.name.toLowerCase().startsWith(q));
   if (!matches.length || !filter) { hideSlashHints(); return; }
@@ -8210,11 +8409,7 @@ function wireEvents() {
     if (source && source !== 'claude') return;
     const tab = activeTab();
     if (!tab || (tabId && tab.id !== tabId)) return;
-    // Restore post-plan card interactivity
-    tab.messagesEl?.querySelectorAll('.post-plan-card').forEach(card => {
-      card.style.opacity = '1';
-      card.style.pointerEvents = 'auto';
-    });
+    renderPostPlanActions(tab, tab._editedPlanContent ? 'PLAN UPDATED' : 'PLAN COMPLETE');
   });
 
   on('changelog-edit-cancelled', () => {

package/neural-interface/public/shared/ui-file-explorer.js

@@ -41,11 +41,28 @@ let _planEditMode = false;        // true when editing a plan file from Claude p
 let _planEditFilePath = null;     // path of the plan file being edited
 let _planEditSource = null;       // panel that opened the plan editor
 let _planEditTabId = null;        // tab id to route plan editor events back
-let _changelogEditMode = false;   // true when editing a changelog draft from Claude panel
-let _changelogEditFilePath = null; // path of the changelog draft being edited
+let _changelogEditMode = false;   // true when editing a changelog draft from Claude panel
+let _changelogEditFilePath = null; // path of the changelog draft being edited
 
 const MIN_WIDTH = 240;
-const MAX_WIDTH = 500;
+const MAX_WIDTH = 500;
+
+function planEditorSourceLabel(source) {
+  if (source === 'codex') return 'Codex';
+  if (source === 'opencode') return 'OpenCode';
+  return 'Claude';
+}
+
+function cancelPlanEditMode() {
+  if (!_planEditMode) return;
+  const source = _planEditSource;
+  const tabId = _planEditTabId;
+  _planEditMode = false;
+  _planEditFilePath = null;
+  _planEditSource = null;
+  _planEditTabId = null;
+  emit('plan-edit-cancelled', { source, tabId });
+}
 
 // ─── SVG icons ────────────────────────
 const FOLDER_SVG = '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
@@ -1779,12 +1796,14 @@ async function openFileEditor(filePath, opts = {}) {
     if (!res.ok) {
       const isOpencodeConfig = normalizedPath.endsWith('/.config/opencode/config.json');
       const isAllowlistMiss = res.status === 403 && data?.error === 'Path outside registered project roots';
-      if (isOpencodeConfig && isAllowlistMiss) {
-        showToast('Restart Synabun to apply OpenCode config editor support');
-        return;
-      }
-      showToast(data.error || 'Cannot open file');
-      return;
+      if (isOpencodeConfig && isAllowlistMiss) {
+        showToast('Restart Synabun to apply OpenCode config editor support');
+        cancelPlanEditMode();
+        return;
+      }
+      showToast(data.error || 'Cannot open file');
+      cancelPlanEditMode();
+      return;
     }
 
     _editorOpen = true;
@@ -1843,11 +1862,11 @@ async function openFileEditor(filePath, opts = {}) {
     // Plan/changelog edit banner
     const edPanel = $('fe-editor-panel');
     edPanel?.querySelector('.fe-plan-banner')?.remove();
-    if (_planEditMode) {
-      const banner = document.createElement('div');
-      banner.className = 'fe-plan-banner';
-      banner.textContent = 'Editing plan — save to send to Claude';
-      edPanel?.prepend(banner);
+    if (_planEditMode) {
+      const banner = document.createElement('div');
+      banner.className = 'fe-plan-banner';
+      banner.textContent = `Editing plan — save to send to ${planEditorSourceLabel(_planEditSource)}`;
+      edPanel?.prepend(banner);
     } else if (_changelogEditMode) {
       const banner = document.createElement('div');
       banner.className = 'fe-plan-banner';
@@ -1866,10 +1885,11 @@ async function openFileEditor(filePath, opts = {}) {
       updateScrollmap();
       syncHighlightScroll();
     });
-  } catch (err) {
-    showToast('Failed to open file');
-  }
-}
+  } catch (err) {
+    cancelPlanEditMode();
+    showToast('Failed to open file');
+  }
+}
 
 function closeFileEditor() {
   if (_editorDirty) {