synabun 2026.4.21 → 2026.4.25-beta.1

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

@@ -21,11 +21,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';
 
@@ -60,6 +67,10 @@ let _projectsLoaded = false;
 
 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 +507,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 +554,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();
       }
@@ -899,6 +910,10 @@ async function handleSend() {
   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 +1006,16 @@ 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) {
+  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 +1495,12 @@ 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();
 }
 
 function setVisible(nextVisible) {
@@ -1599,32 +1616,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,6 +1648,7 @@ function ensurePanel() {
   if (!restoreTabs()) {
     createTab({ project: storage.getItem(STOR.project) || '' });
   }
+  window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'opencode' } }));
 
   syncSendButton();
 

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

@@ -229,27 +229,6 @@ function linkifyFilePaths(container) {
   attachFileLinkHandlers(container);
 }
 
-// ── Throttle helper for streaming ──
-function throttle(fn, ms) {
-  let last = 0;
-  let timer = null;
-  return function (...args) {
-    const now = Date.now();
-    const remaining = ms - (now - last);
-    if (remaining <= 0) {
-      if (timer) { clearTimeout(timer); timer = null; }
-      last = now;
-      fn.apply(this, args);
-    } else if (!timer) {
-      timer = setTimeout(() => {
-        last = Date.now();
-        timer = null;
-        fn.apply(this, args);
-      }, remaining);
-    }
-  };
-}
-
 function thinkBlockHtml(content, partial) {
   const label = partial ? 'Thinking…' : 'Thought';
   return `<details class="ocp-think-block"${partial ? ' open' : ''}><summary><span class="ocp-think-icon">${THINK_ICON_SVG}</span><span class="ocp-think-label">${label}</span><span class="ocp-think-chevron">&#x203A;</span></summary><div class="ocp-think-content">${esc(content)}</div></details>`;
@@ -842,19 +821,46 @@ export function getOrCreateStreamingEl(container) {
   return el;
 }
 
+function renderStreamingElement(container, el, { partialThinking = true } = {}) {
+  if (!el) return;
+  let html = '';
+  let hasContent = false;
+  if (el.dataset.thinkText) {
+    html += thinkBlockHtml(el.dataset.thinkText, partialThinking);
+    hasContent = true;
+  }
+  if (el.dataset.rawText) {
+    const rendered = renderAssistantMarkdown(el.dataset.rawText);
+    if (rendered.hasContent) {
+      html += rendered.html;
+      hasContent = true;
+    }
+  }
+  el.innerHTML = html;
+  clearThinkingTimer(el);
+  el.classList.toggle('ocp-msg-empty', !hasContent);
+  postProcessRenderedHtml(el);
+  scrollToBottom(container);
+}
+
+function scheduleStreamingRender(container, el) {
+  if (el._ocpStreamRaf) return;
+  const schedule = typeof requestAnimationFrame === 'function'
+    ? requestAnimationFrame
+    : (fn) => setTimeout(fn, 16);
+  el._ocpStreamRaf = schedule(() => {
+    el._ocpStreamRaf = null;
+    renderStreamingElement(container, el, { partialThinking: true });
+  });
+}
+
 /** Append a text chunk to the streaming element. */
 export function appendStreamChunk(container, text) {
   const chunk = normalizeTextContent(text, { stringifyObjects: false });
   if (!chunk) return getOrCreateStreamingEl(container);
   const el = getOrCreateStreamingEl(container);
   el.dataset.rawText = (el.dataset.rawText || '') + chunk;
-  const doRender = throttle(() => {
-    if (el.dataset.rawText != null) {
-      setAssistantHtml(el, el.dataset.rawText);
-      scrollToBottom(container);
-    }
-  }, 32);
-  doRender();
+  scheduleStreamingRender(container, el);
   return el;
 }
 
@@ -864,12 +870,7 @@ export function appendThinkChunk(container, text) {
   if (!chunk) return getOrCreateStreamingEl(container);
   const el = getOrCreateStreamingEl(container);
   el.dataset.thinkText = (el.dataset.thinkText || '') + chunk;
-  // Re-render: think block first, then any accumulated response text
-  const thinkHtml = thinkBlockHtml(el.dataset.thinkText, true);
-  const responseHtml = el.dataset.rawText ? renderAssistantMarkdown(el.dataset.rawText).html : '';
-  el.innerHTML = thinkHtml + responseHtml;
-  clearThinkingTimer(el);
-  scrollToBottom(container);
+  scheduleStreamingRender(container, el);
   return el;
 }
 
@@ -878,10 +879,9 @@ export function finalizeStreamingMessage(container) {
   const el = container.querySelector('.ocp-msg-assistant.streaming');
   if (el) {
     el.classList.remove('streaming');
-    if (el.dataset.rawText != null) {
-      setAssistantHtml(el, el.dataset.rawText);
-    }
+    renderStreamingElement(container, el, { partialThinking: false });
     delete el.dataset.rawText;
+    delete el.dataset.thinkText;
   }
   const pending = container.querySelector('.ocp-msg-assistant.pending');
   if (pending) {
@@ -1137,6 +1137,7 @@ function extractAllQuestions(input) {
     : (input.question || input.text || input.options) ? [input]
     : [input];
   return questions.map(q => ({
+    id: q.id || q.key || q.name || '',
     question: q.question || q.text || q.message || '',
     header: q.header || '',
     options: normalizeOptions(q.options || q.choices),
@@ -1192,7 +1193,7 @@ export function renderQuestionCard(container, toolName, toolInput, toolId, { onA
   // Render each question block
   for (let qi = 0; qi < questions.length; qi++) {
     const q = questions[qi];
-    const questionKey = q.question || q.header || `question_${qi}`;
+    const questionKey = q.id || q.question || q.header || `question_${qi}`;
     const block = document.createElement('div');
     block.className = 'ocp-question-block';
 
@@ -1255,6 +1256,7 @@ export function renderQuestionCard(container, toolName, toolInput, toolId, { onA
         const isOther = opt.value === '__other__' || /^other$/i.test(opt.label);
         const btn = document.createElement('button');
         btn.className = `ocp-question-option${q.multiSelect ? ' multi' : ''}`;
+        btn.dataset.value = opt.value;
         btn.innerHTML = `
           <span class="ocp-question-option-radio"></span>
           <span>
@@ -1268,9 +1270,9 @@ export function renderQuestionCard(container, toolName, toolInput, toolId, { onA
             const selected = [];
             optsEl.querySelectorAll('.ocp-question-option.selected').forEach(b => {
               const lbl = b.querySelector('.ocp-question-option-label');
-              if (lbl && !/^other$/i.test(lbl.textContent)) selected.push(lbl.textContent);
+              if (lbl && !/^other$/i.test(lbl.textContent)) selected.push(b.dataset.value || lbl.textContent);
             });
-            if (selected.length > 0) pendingAnswers[questionKey] = selected.join(', ');
+            if (selected.length > 0) pendingAnswers[questionKey] = selected;
             else delete pendingAnswers[questionKey];
           } else {
             optsEl.querySelectorAll('.ocp-question-option').forEach(b => b.classList.remove('selected'));
@@ -1283,7 +1285,7 @@ export function renderQuestionCard(container, toolName, toolInput, toolId, { onA
               queueMicrotask(() => otherInput.focus());
             } else {
               otherWrap.hidden = true;
-              pendingAnswers[questionKey] = opt.label;
+              pendingAnswers[questionKey] = opt.value;
             }
           }
           updateSubmitState();
@@ -1339,7 +1341,7 @@ export function lockQuestionCard(container, toolId) {
 
 // ── Post-plan action card ──
 
-export function renderPostPlanCard(container, { onContinue, onCompact, onEditPlan } = {}) {
+export function renderPostPlanCard(container, { headerText = 'PLAN COMPLETE', onContinue, onCompact, onEditPlan, onContinuePlanning } = {}) {
   const card = document.createElement('div');
   card.className = 'ocp-post-plan-card';
   card.innerHTML = `
@@ -1347,11 +1349,12 @@ export function renderPostPlanCard(container, { onContinue, onCompact, onEditPla
       <svg class="ocp-post-plan-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
       </svg>
-      PLAN COMPLETE
+      ${esc(headerText || 'PLAN COMPLETE')}
     </div>
     <div class="ocp-post-plan-note">Review the plan above, then choose how to proceed.</div>
     <div class="ocp-post-plan-actions">
       <button class="ocp-post-plan-btn primary" data-action="continue">Continue with implementation</button>
+      <button class="ocp-post-plan-btn" data-action="continue-planning">Continue planning</button>
       <button class="ocp-post-plan-btn" data-action="compact">Compact context</button>
       <button class="ocp-post-plan-btn" data-action="edit">Edit plan</button>
     </div>
@@ -1367,6 +1370,10 @@ export function renderPostPlanCard(container, { onContinue, onCompact, onEditPla
   card.querySelector('[data-action="edit"]').addEventListener('click', () => {
     if (typeof onEditPlan === 'function') onEditPlan();
   });
+  card.querySelector('[data-action="continue-planning"]').addEventListener('click', () => {
+    card.remove();
+    if (typeof onContinuePlanning === 'function') onContinuePlanning();
+  });
 
   container.appendChild(card);
   scrollToBottom(container);