synabun 2026.4.21 → 2026.4.25-beta.2

package/neural-interface/public/shared/cli-status.js

@@ -0,0 +1,157 @@
+// ═══════════════════════════════════════════
+// SynaBun — CLI Status (shared)
+// Detects whether Claude / Codex / OpenCode CLIs are installed by
+// querying /api/system/tool-versions. Caches the response, fans out
+// updates to subscribers, and auto-polls (every 30s) while at least
+// one subscribed tool reports installed=null.
+// ═══════════════════════════════════════════
+
+const TOOL_KEYS = ['claude-code', 'codex', 'opencode', 'gemini'];
+
+const CLI_DOC_URLS = {
+  'claude-code': 'https://docs.claude.com/en/docs/claude-code/setup',
+  'codex':       'https://developers.openai.com/codex/cli/',
+  'opencode':    'https://opencode.ai/docs/',
+  'gemini':      'https://github.com/google-gemini/gemini-cli',
+};
+
+const CLI_INSTALL_CMDS = {
+  'claude-code': 'npm install -g @anthropic-ai/claude-code',
+  'codex':       'npm install -g @openai/codex',
+  'opencode':    'npm install -g opencode-ai',
+  'gemini':      'npm install -g @google/gemini-cli',
+};
+
+const CLI_LABELS = {
+  'claude-code': 'Claude Code',
+  'codex':       'Codex',
+  'opencode':    'OpenCode',
+  'gemini':      'Gemini CLI',
+};
+
+const POLL_INTERVAL_MS = 30000;
+const CACHE_TTL_MS = 10000;
+
+let _cache = { fetchedAt: 0, tools: null };
+let _inflight = null;
+const _subscribers = new Map();
+let _pollTimer = null;
+
+export function getCliDocUrl(toolKey) {
+  return CLI_DOC_URLS[toolKey] || null;
+}
+
+export function getCliInstallCommand(toolKey) {
+  return CLI_INSTALL_CMDS[toolKey] || '';
+}
+
+export function getCliLabel(toolKey) {
+  return CLI_LABELS[toolKey] || toolKey;
+}
+
+async function _fetchToolVersions(force) {
+  if (!force && _cache.tools && (Date.now() - _cache.fetchedAt) < CACHE_TTL_MS) {
+    return _cache.tools;
+  }
+  if (_inflight) return _inflight;
+  const url = force ? '/api/system/tool-versions?force=1' : '/api/system/tool-versions';
+  _inflight = (async () => {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      _cache = { fetchedAt: Date.now(), tools: data?.tools || {} };
+      return _cache.tools;
+    } finally {
+      _inflight = null;
+    }
+  })();
+  return _inflight;
+}
+
+function _emitChange(prevTools, nextTools) {
+  for (const key of TOOL_KEYS) {
+    const prev = prevTools?.[key]?.installed ?? null;
+    const next = nextTools?.[key]?.installed ?? null;
+    const subs = _subscribers.get(key);
+    if (!subs || !subs.size) continue;
+    if (prev !== next || prevTools == null) {
+      const info = nextTools?.[key] || { installed: null };
+      for (const cb of subs) {
+        try { cb(info); } catch (e) { console.error('[cli-status] subscriber error:', e); }
+      }
+    }
+  }
+}
+
+function _hasMissingSubscribed() {
+  for (const key of _subscribers.keys()) {
+    const subs = _subscribers.get(key);
+    if (!subs?.size) continue;
+    const installed = _cache.tools?.[key]?.installed ?? null;
+    if (!installed) return true;
+  }
+  return false;
+}
+
+function _maybeStartPoller() {
+  if (_pollTimer) return;
+  if (!_hasMissingSubscribed()) return;
+  _pollTimer = setInterval(async () => {
+    if (!_hasMissingSubscribed()) {
+      _stopPoller();
+      return;
+    }
+    const prev = _cache.tools;
+    try {
+      const next = await _fetchToolVersions(true);
+      _emitChange(prev, next);
+      if (!_hasMissingSubscribed()) _stopPoller();
+    } catch { /* ignore — retry next tick */ }
+  }, POLL_INTERVAL_MS);
+}
+
+function _stopPoller() {
+  if (_pollTimer) {
+    clearInterval(_pollTimer);
+    _pollTimer = null;
+  }
+}
+
+export async function getCliStatus(toolKey, { force = false } = {}) {
+  const tools = await _fetchToolVersions(force);
+  return tools?.[toolKey] || { installed: null, latest: null };
+}
+
+export function subscribeCliStatus(toolKey, callback) {
+  if (!TOOL_KEYS.includes(toolKey)) return () => {};
+  let set = _subscribers.get(toolKey);
+  if (!set) { set = new Set(); _subscribers.set(toolKey, set); }
+  set.add(callback);
+
+  const cached = _cache.tools?.[toolKey];
+  if (cached) {
+    try { callback(cached); } catch (e) { console.error('[cli-status] subscriber error:', e); }
+    _maybeStartPoller();
+  } else {
+    _fetchToolVersions(false).then((tools) => {
+      try { callback(tools?.[toolKey] || { installed: null }); } catch {}
+      _maybeStartPoller();
+    }).catch(() => {});
+  }
+
+  return () => {
+    const s = _subscribers.get(toolKey);
+    if (!s) return;
+    s.delete(callback);
+    if (!s.size) _subscribers.delete(toolKey);
+    if (!_hasMissingSubscribed()) _stopPoller();
+  };
+}
+
+export async function recheckCliStatus(toolKey) {
+  const prev = _cache.tools;
+  const next = await _fetchToolVersions(true);
+  _emitChange(prev, next);
+  return next?.[toolKey] || { installed: null };
+}

package/neural-interface/public/shared/constants.js

@@ -67,8 +67,9 @@ export const KEYS = {
   ACTIVE_WORKSPACE:    'neural-active-workspace',  // sessionStorage
   GRID_SNAP:           'neural-grid-snap',
   CATEGORIES_VISIBLE:  'neural-categories-visible',
-  WHITEBOARD:          'neural-whiteboard',
-  TUTORIAL_COMPLETED:  'neural-tutorial-completed',
+  WHITEBOARD:          'neural-whiteboard',
+  WHITEBOARD_RULESET_ALERT_DISMISSED: 'neural-whiteboard-ruleset-alert-dismissed',
+  TUTORIAL_COMPLETED:  'neural-tutorial-completed',
   TUTORIAL_SKIPPED:    'neural-tutorial-skipped',
   TUTORIAL_STEP:       'neural-tutorial-step',
   TUTORIAL_STARTED:    'neural-tutorial-started',

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

@@ -294,11 +294,23 @@ export function getSharedHTML() {
             <span class="menu-shortcut">A</span>
           </div>
           <div class="menu-sep"></div>
-          <div class="menu-item" id="menu-automations-schedules">
-            <span class="menu-check"></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"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span> Schedules</span>
-          </div>
-          <div class="menu-sep"></div>
+          <div class="menu-item" id="menu-automations-schedules">
+            <span class="menu-check"></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"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span> Schedules</span>
+          </div>
+          <div class="menu-item" id="menu-automations-schedule-new">
+            <span class="menu-check"></span>
+            <span class="menu-text">New Cron Schedule</span>
+          </div>
+          <div class="menu-item" id="menu-automations-quick-timer">
+            <span class="menu-check"></span>
+            <span class="menu-text">Quick Timer</span>
+          </div>
+          <div class="menu-item" id="menu-automations-schedule-groups">
+            <span class="menu-check"></span>
+            <span class="menu-text">Schedule Groups</span>
+          </div>
+          <div class="menu-sep"></div>
           <div class="menu-item" id="menu-automations-new">
             <span class="menu-check"></span>
             <span class="menu-text">${t('menu.automations.newAutomation')}</span>
@@ -703,12 +715,21 @@ export function getSharedHTML() {
 </div>
 
 <!-- Static background (shown in Focus Mode) -->
-<div id="static-bg">
-  <div class="focus-breathe"></div>
-  <img src="synabun.png?v=2" alt="SynaBun" class="static-bg-logo">
-
-  <!-- Whiteboard (Focus Mode canvas) -->
-  <div id="wb-root">
+<div id="static-bg">
+  <div class="focus-breathe"></div>
+  <img src="synabun.png?v=2" alt="SynaBun" class="static-bg-logo">
+  <div id="wb-ruleset-alert" class="wb-ruleset-alert" aria-live="polite">
+    <div class="wb-ruleset-alert-text">
+      Add <code>AGENTS.md</code> and <code>CLAUDE.md</code> rulesets so memory usage stays consistent.
+    </div>
+    <div class="wb-ruleset-alert-actions">
+      <button type="button" id="wb-ruleset-settings" class="wb-ruleset-alert-btn">Setup</button>
+      <button type="button" id="wb-ruleset-dismiss" class="wb-ruleset-alert-btn wb-ruleset-alert-dismiss">Don't Show This Again</button>
+    </div>
+  </div>
+
+  <!-- Whiteboard (Focus Mode canvas) -->
+  <div id="wb-root">
     <div id="wb-toolbar" class="glass">
       <button class="wb-tool active" data-tool="select" data-tooltip="Select">
         <svg viewBox="0 0 24 24"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg>

package/neural-interface/public/shared/ocp/ocp-panel.js

@@ -8,6 +8,7 @@ import { state, emit, on } from '../state.js';
 import { storage } from '../storage.js';
 import { fetchProjects } from '../api.js';
 import { reserveRightPanelLayout, clearRightPanelLayout } from '../ui-sidepanel-layout.js';
+import { subscribeCliStatus, recheckCliStatus, getCliDocUrl, getCliInstallCommand, getCliLabel } from '../cli-status.js';
 
 import { injectStyles } from './ocp-styles.js';
 import {
@@ -21,11 +22,18 @@ import {
   setPanelEl, setOnUpdate, setPanelVisible, setOnShow, setOnHide, setOnEditPlan,
   createTab, switchTab, closeTab, renderPills, saveTabs, restoreTabs,
   loadSessions, createSession, renameSession, loadProviders, loadAgents, populateModelDropdown,
-  sendMessage, abortMessage, abortAllTabs, anyTabRunning, handleSSEEvent,
+  sendMessage, abortMessage, handleSSEEvent,
   revertSession, compactSession, shareSession, executeCommand, renderTabMessages,
   getActiveTabMode, setTabMode, resolveContextInputTokens, setActivityVisible,
-  toggleActivityExpanded, abortAgent,
+  toggleActivityExpanded, abortAgent, ensurePlanFile, showPostPlanUI, applySavedPlan,
+  flushAllSessionSnapshots,
 } from './ocp-tabs.js';
+
+window.addEventListener('beforeunload', () => { try { flushAllSessionSnapshots(); } catch {} });
+window.addEventListener('pagehide', () => { try { flushAllSessionSnapshots(); } catch {} });
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) { try { flushAllSessionSnapshots(); } catch {} }
+});
 import { isClaudePanelOpen, toggleClaudePanel } from '../ui-claude-panel.js';
 import { isCodexPanelOpen, toggleCodexPanel } from '../ui-codex-panel.js';
 
@@ -57,9 +65,15 @@ let _serverVersion = null;
 let _serverManaged = false;
 let _projects = [];
 let _projectsLoaded = false;
+let _cliInstalled = null;
+let _cliUnsub = null;
 
 function panelEl(sel) { return _panel?.querySelector(sel) || null; }
 
+function activeTabRunning() {
+  return !!activeTab()?.running;
+}
+
 function sessionTitleFor(sessionOrTab) {
   const sid = sessionOrTab?.id || sessionOrTab?.sessionID || sessionOrTab?.sessionId || '';
   const candidates = [sessionOrTab?.sessionTitle, sessionOrTab?.title, sessionOrTab?.description, sessionOrTab?.slug];
@@ -496,10 +510,10 @@ function wireEvents() {
       }
       if (e.key === 'Escape') {
         hideSlashHints();
-        if (anyTabRunning()) {
+        if (activeTabRunning()) {
           e.preventDefault();
           e.stopPropagation();
-          abortAllTabs();
+          abortMessage();
         }
       }
       // Navigate slash hints with arrow keys
@@ -543,17 +557,17 @@ function wireEvents() {
         || _panel.querySelector('#ocp-slash-hints:not([hidden])')
         || _panel.querySelector('.ocp-rename-input')
         || _panel.querySelector('#ocp-session-menu.open');
-      if (!ownsEsc && anyTabRunning()) {
+      if (!ownsEsc && activeTabRunning()) {
         e.preventDefault();
         e.stopPropagation();
-        abortAllTabs();
+        abortMessage();
       }
     }
   });
   if (sendBtn) {
     sendBtn.addEventListener('click', () => {
-      if (anyTabRunning()) {
-        abortAllTabs();
+      if (activeTabRunning()) {
+        abortMessage();
       } else {
         handleSend();
       }
@@ -896,9 +910,17 @@ async function handleSend() {
   if (!input) return;
   const tab = activeTab();
   if (!tab) return;
+  if (_cliInstalled === null) {
+    setStatus('offline', 'OpenCode CLI not installed. Install it first, then click Re-check.');
+    return;
+  }
   let text = input.value.trim();
   const images = Array.isArray(tab.attachedImages) ? [...tab.attachedImages] : [];
   if (!text && !images.length) return;
+  if (tab.showPostPlanActions) {
+    setStatus('working', 'Choose Continue, Compact, or Edit plan first.');
+    return;
+  }
 
   // Parse and execute slash commands. If executeSlashCommand returns false
   // (e.g. a SynaBun skill that the server will expand), keep `text` in flight
@@ -991,14 +1013,26 @@ function syncSendButton() {
   const tab = activeTab();
   if (!sendBtn) return;
 
-  // Stop button shows if any tab in the panel is running, so the user can
-  // abort the whole panel regardless of which tab is focused.
-  const panelRunning = anyTabRunning();
-  if (panelRunning) {
+  const cliBlocked = _cliInstalled === null;
+
+  if (cliBlocked) {
+    sendBtn.classList.remove('running');
+    sendBtn.disabled = true;
+    sendBtn.setAttribute('data-tooltip', 'OpenCode CLI not installed');
+    sendBtn.setAttribute('aria-label', 'OpenCode CLI not installed');
+    return;
+  }
+
+  if (tab?.running) {
     sendBtn.disabled = false;
     sendBtn.classList.add('running');
     sendBtn.setAttribute('data-tooltip', 'Stop turn (Esc)');
     sendBtn.setAttribute('aria-label', 'Stop turn');
+  } else if (tab?.showPostPlanActions) {
+    sendBtn.classList.remove('running');
+    sendBtn.disabled = true;
+    sendBtn.setAttribute('data-tooltip', 'Choose a plan action first');
+    sendBtn.setAttribute('aria-label', 'Choose a plan action first');
   } else {
     sendBtn.classList.remove('running');
     sendBtn.disabled = (!input?.value.trim() && !(tab?.attachedImages?.length)) || !_serverReady;
@@ -1478,12 +1512,75 @@ function syncReservedWidth() {
 function _ocpDocEscHandler(event) {
   if (event.key !== 'Escape') return;
   if (!_visible) return;
-  if (!anyTabRunning()) return;
+  if (!activeTabRunning()) return;
   const hintsEl = panelEl('#ocp-slash-hints');
   if (hintsEl && hintsEl.classList.contains('open')) return; // let input handler dismiss hints first
   event.preventDefault();
   event.stopImmediatePropagation();
-  abortAllTabs();
+  abortMessage();
+}
+
+// ── CLI installation status (banner + send-block) ──
+function renderCliMissingBanner(emptyEl) {
+  if (!emptyEl) return;
+  const label = getCliLabel('opencode');
+  const cmd = getCliInstallCommand('opencode');
+  const url = getCliDocUrl('opencode');
+  const hintEl = emptyEl.querySelector('.ocp-empty-hint');
+  if (hintEl) hintEl.style.display = 'none';
+  let banner = emptyEl.querySelector('.ocp-cli-missing');
+  if (!banner) {
+    banner = document.createElement('div');
+    banner.className = 'ocp-cli-missing';
+    banner.innerHTML = `
+      <div class="ocp-cli-missing-title">${label} CLI not installed</div>
+      <div class="ocp-cli-missing-body">Run: <code>${cmd}</code></div>
+      <div class="ocp-cli-missing-actions">
+        <a class="ocp-cli-missing-link" href="${url}" target="_blank" rel="noopener noreferrer">Install guide</a>
+        <button class="ocp-cli-missing-recheck" type="button">Re-check</button>
+      </div>
+    `;
+    emptyEl.appendChild(banner);
+    const btn = banner.querySelector('.ocp-cli-missing-recheck');
+    btn?.addEventListener('click', async () => {
+      btn.disabled = true;
+      btn.textContent = 'Checking…';
+      try { await recheckCliStatus('opencode'); }
+      finally {
+        if (btn.isConnected) {
+          btn.disabled = false;
+          btn.textContent = 'Re-check';
+        }
+      }
+    });
+  }
+}
+
+function refreshCliBanners() {
+  if (!_panel) return;
+  const empties = _panel.querySelectorAll('.ocp-empty');
+  if (_cliInstalled === null) {
+    _panel.classList.add('ocp-cli-blocked');
+    for (const el of empties) renderCliMissingBanner(el);
+  } else {
+    _panel.classList.remove('ocp-cli-blocked');
+    for (const el of empties) {
+      const banner = el.querySelector('.ocp-cli-missing');
+      if (banner) banner.remove();
+      const hintEl = el.querySelector('.ocp-empty-hint');
+      if (hintEl) hintEl.style.display = '';
+    }
+  }
+  syncSendButton();
+}
+
+function ensureCliSubscription() {
+  if (_cliUnsub) return;
+  _cliUnsub = subscribeCliStatus('opencode', (info) => {
+    _cliInstalled = info?.installed || null;
+    refreshCliBanners();
+  });
+  document.addEventListener('ocp-empty-rebuilt', () => refreshCliBanners());
 }
 
 function setVisible(nextVisible) {
@@ -1511,6 +1608,7 @@ function setVisible(nextVisible) {
     if (_curProject) loadBranches(_curProject);
     loadCurrentProfile();
     loadRecallProfile();
+    refreshCliBanners();
   } else {
     document.removeEventListener('keydown', _ocpDocEscHandler, { capture: true });
   }
@@ -1599,32 +1697,31 @@ function ensurePanel() {
     if (tab.planFilePath) { openPlan(tab.planFilePath); return; }
     if (!tab.planContent) return;
     try {
-      const res = await fetch('/api/create-plan', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: tab.planContent }),
-      });
-      const result = await res.json();
-      if (result.ok && result.path) {
-        tab.planFilePath = result.path;
-        saveTabs();
-        openPlan(result.path);
-      }
+      const planPath = await ensurePlanFile(tab);
+      if (planPath) openPlan(planPath);
     } catch (e) {
       console.error('[ocp-panel] Edit plan failed:', e);
+      showPostPlanUI(tab);
     }
   });
 
   // Listen for edited plan content from file explorer
-  on('plan-saved', ({ content, source, tabId }) => {
+  on('plan-saved', ({ filePath, content, source, tabId }) => {
     if (source !== 'opencode') return;
     const tab = getTabs().find(t => t.id === tabId) || activeTab();
     if (tab && content) {
-      tab.editedPlanContent = content;
-      saveTabs();
+      applySavedPlan(tab, content, filePath);
     }
   });
 
+  on('plan-edit-cancelled', ({ source, tabId } = {}) => {
+    if (source !== 'opencode') return;
+    const tab = getTabs().find(t => t.id === tabId) || activeTab();
+    if (!tab) return;
+    tab.showPostPlanActions = true;
+    showPostPlanUI(tab, tab.postPlanHeader || 'PLAN COMPLETE');
+  });
+
   wireEvents();
   autosizeInput();
 
@@ -1632,8 +1729,10 @@ function ensurePanel() {
   if (!restoreTabs()) {
     createTab({ project: storage.getItem(STOR.project) || '' });
   }
+  window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'opencode' } }));
 
   syncSendButton();
+  ensureCliSubscription();
 
   // Connect WebSocket
   connectWs(wsCallbacks());