synabun 2026.4.21 → 2026.4.25-beta.2

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

@@ -9,6 +9,7 @@ import { fetchClaudeSessions, fetchBrowserSessions, searchSessions } from './api
 import { createFrameRenderer } from './utils.js';
 import { notify, NOTIF_TYPE } from './ui-notifications.js';
 import { reserveRightPanelLayout, clearRightPanelLayout } from './ui-sidepanel-layout.js';
+import { subscribeCliStatus, recheckCliStatus, getCliDocUrl, getCliInstallCommand, getCliLabel } from './cli-status.js';
 
 const CLAUDE_ICON = '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>';
 
@@ -120,6 +121,10 @@ function activeTab() { return _tabs[_activeTabIdx] || null; }
 let _browserEmbed = null;   // { sessionId, ws, canvas, ctx, urlBar, container }
 let _browserEmbedVisible = false;
 
+// ── CLI-installed status (claude binary detection) ──
+let _cliInstalled = null;   // null = unknown / missing, version string = installed
+let _cliUnsub = null;
+
 // Marked.js (lazy loaded)
 let _marked = null;
 (async () => {
@@ -150,8 +155,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 = {
@@ -411,6 +432,41 @@ function injectStyles() {
     .cp-messages:has(.msg) .cp-empty,
     .cp-messages:has(.msg-status) .cp-empty { display: none; }
 
+    /* ── CLI-not-installed banner (replaces empty-state hint when claude binary missing) ── */
+    .cp-cli-missing {
+      display: flex; flex-direction: column; align-items: center; gap: 8px;
+      max-width: 320px; padding: 14px 16px; margin-top: 4px;
+      border: 1px solid rgba(255,180,80,0.35); border-radius: 8px;
+      background: rgba(255,180,80,0.06); pointer-events: auto;
+    }
+    .cp-cli-missing-title {
+      font-size: 12px; font-weight: 600; color: rgba(255,200,120,0.9);
+      letter-spacing: 0.02em;
+    }
+    .cp-cli-missing-body {
+      font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; line-height: 1.45;
+    }
+    .cp-cli-missing-body code {
+      display: inline-block; padding: 1px 6px; margin-top: 4px;
+      background: rgba(0,0,0,0.35); border-radius: 4px; font-size: 10.5px;
+      color: rgba(255,255,255,0.75);
+    }
+    .cp-cli-missing-actions { display: flex; gap: 8px; margin-top: 4px; }
+    .cp-cli-missing-link, .cp-cli-missing-recheck {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 5px 10px; font-size: 11px; font-weight: 500;
+      border-radius: 5px; border: 1px solid rgba(255,255,255,0.15);
+      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85);
+      text-decoration: none; cursor: pointer; user-select: none;
+    }
+    .cp-cli-missing-link:hover, .cp-cli-missing-recheck:hover {
+      background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3);
+    }
+    .cp-cli-missing-recheck:disabled { opacity: 0.5; cursor: default; }
+    /* Block send button visually + functionally when CLI missing */
+    .claude-panel.cp-cli-blocked .cp-send { opacity: 0.4 !important; cursor: not-allowed !important; }
+    .claude-panel.cp-cli-blocked .cp-input { opacity: 0.7; }
+
     /* ── Browser embed (live screencast inside panel) ── */
     .cp-browser-embed {
       display: none;
@@ -1076,7 +1132,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 +1532,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 +2689,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
@@ -2695,6 +2752,7 @@ function createTab(sessionId = null, label = 'New chat', { autoSwitch = true } =
   msgDiv.innerHTML = `<div class="cp-empty"><div class="cp-empty-logo">${CLAUDE_ICON}</div><span class="cp-empty-name">Claude</span><span class="cp-empty-hint">Send a message to start</span></div>`;
   container.appendChild(msgDiv);
   tab.messagesEl = msgDiv;
+  if (_cliInstalled === null) _renderCliMissingBanner(msgDiv.querySelector('.cp-empty'));
   // Connect WebSocket
   connectTab(tab);
   // Create pill (rendered in shared tray, not inside panel)
@@ -2729,6 +2787,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 +2877,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 +3016,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 +3039,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 +3115,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 +3124,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;
@@ -3510,6 +3576,7 @@ async function selectSession(sid, label) {
   const btn = _panel?.querySelector('.cp-session-label');
   if (btn) btn.textContent = tab.label;
   tab.messagesEl.innerHTML = `<div class="cp-empty"><div class="cp-empty-logo">${CLAUDE_ICON}</div><span class="cp-empty-name">Claude</span><span class="cp-empty-hint">Send a message to start</span></div>`;
+  if (_cliInstalled === null) _renderCliMissingBanner(tab.messagesEl.querySelector('.cp-empty'));
   if (sid) {
     loadSessionHistory(sid, tab.messagesEl);
     // Restore session cost from server
@@ -3713,9 +3780,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 +3946,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 +4004,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 +4015,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 +4480,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 +4747,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 +4758,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 +5104,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 +6219,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 +6249,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() {
@@ -6357,6 +6586,10 @@ function runSlashCommand(tab, raw) {
 }
 
 function send({ shift = false } = {}) {
+  if (_cliInstalled === null) {
+    notify({ type: NOTIF_TYPE.WARN, title: 'Claude CLI not installed', body: 'Install the Claude Code CLI before sending a message.' });
+    return;
+  }
   const tab = activeTab();
   if (!tab) return;
   const $input = _panel?.querySelector('#cp-input');
@@ -7059,6 +7292,70 @@ function syncReservedWidth() {
   }
 }
 
+// ── CLI installation status (banner + send-block) ──
+function _renderCliMissingBanner(emptyEl) {
+  if (!emptyEl) return;
+  const label = getCliLabel('claude-code');
+  const cmd = getCliInstallCommand('claude-code');
+  const url = getCliDocUrl('claude-code');
+  const hint = emptyEl.querySelector('.cp-empty-hint');
+  if (hint) hint.style.display = 'none';
+  let banner = emptyEl.querySelector('.cp-cli-missing');
+  if (!banner) {
+    banner = document.createElement('div');
+    banner.className = 'cp-cli-missing';
+    banner.innerHTML = `
+      <div class="cp-cli-missing-title">${label} CLI not installed</div>
+      <div class="cp-cli-missing-body">Run: <code>${cmd}</code></div>
+      <div class="cp-cli-missing-actions">
+        <a class="cp-cli-missing-link" href="${url}" target="_blank" rel="noopener noreferrer">Install guide</a>
+        <button class="cp-cli-missing-recheck" type="button">Re-check</button>
+      </div>
+    `;
+    emptyEl.appendChild(banner);
+    const btn = banner.querySelector('.cp-cli-missing-recheck');
+    btn?.addEventListener('click', async () => {
+      btn.disabled = true;
+      btn.textContent = 'Checking…';
+      try { await recheckCliStatus('claude-code'); }
+      finally {
+        if (btn.isConnected) {
+          btn.disabled = false;
+          btn.textContent = 'Re-check';
+        }
+      }
+    });
+  }
+}
+
+function _refreshCliBanners() {
+  if (!_panel) return;
+  const empties = _panel.querySelectorAll('.cp-empty');
+  if (_cliInstalled === null) {
+    _panel.classList.add('cp-cli-blocked');
+    for (const el of empties) _renderCliMissingBanner(el);
+  } else {
+    _panel.classList.remove('cp-cli-blocked');
+    for (const el of empties) {
+      const banner = el.querySelector('.cp-cli-missing');
+      if (banner) banner.remove();
+      const hint = el.querySelector('.cp-empty-hint');
+      if (hint) hint.style.display = '';
+    }
+  }
+  // Re-sync send button state — installed transition should re-enable input drafts
+  const $send = _panel.querySelector('#cp-send');
+  if ($send && _cliInstalled === null) $send.disabled = true;
+}
+
+function _ensureCliSubscription() {
+  if (_cliUnsub) return;
+  _cliUnsub = subscribeCliStatus('claude-code', (info) => {
+    _cliInstalled = info?.installed || null;
+    _refreshCliBanners();
+  });
+}
+
 // ── Public API ──
 export async function toggleClaudePanel() {
   if (!_panel) {
@@ -7073,6 +7370,8 @@ export async function toggleClaudePanel() {
     syncSessionCosts();
     _wireBrowserSync();
     _startHeartbeat();
+    window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'claude' } }));
+    _ensureCliSubscription();
   }
   _visible = !_visible;
   if (_visible) {
@@ -7081,6 +7380,7 @@ export async function toggleClaudePanel() {
     _panel.classList.add('open');
     syncReservedWidth();
     _panel.querySelector('#cp-input')?.focus();
+    _refreshCliBanners();
   } else {
     const tab = activeTab();
     const $input = _panel?.querySelector('#cp-input');
@@ -7217,13 +7517,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 +8521,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) {