synabun 1.3.0 → 2.0.0

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

@@ -0,0 +1,387 @@
+import { storage } from './storage.js';
+import { state } from './state.js';
+import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
+import { reserveRightPanelLayout, clearRightPanelLayout, setRightPanelResizing } from './ui-sidepanel-layout.js';
+import { createSidepanelController, clampSidepanelRect, resizeSidepanelRect } from './ui-sidepanel-state.js';
+
+const STORAGE_PREFIX = 'synabun-sidepanel-layout-';
+const surfaces = new Map();
+const LABELS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode', assistant: 'SynaBun Assistant' };
+const DETACH_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="7" width="14" height="14" rx="2"/><path d="M13 3h8v8M21 3l-9 9"/></svg>';
+const DOCK_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16M6 12h6m-3-3 3 3-3 3"/></svg>';
+const MOVE_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><circle cx="5" cy="4" r="1"/><circle cx="11" cy="4" r="1"/><circle cx="5" cy="8" r="1"/><circle cx="11" cy="8" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="11" cy="12" r="1"/></svg>';
+let interaction = null;
+
+const controller = createSidepanelController({
+  load: key => hostedSidepanelId ? null : storage.getItem(STORAGE_PREFIX + key),
+  save: (key, value) => { if (!hostedSidepanelId) storage.setItem(STORAGE_PREFIX + key, value); },
+  changed: (view, reason) => {
+    if (!view.visible && interaction?.id === view.id) finishInteraction(true);
+    renderPresentation(view);
+    if (reason !== 'geometry' || view.layout.mode === 'docked') {
+      syncSidepanelLayout(view.id, reason === 'geometry' ? view.layout.dockedWidth : undefined);
+    }
+  },
+  focused: view => {
+    state.lastActivePanel = view.provider;
+    state.lastActiveSidepanel = view.id;
+    if (hostedSidepanelId) sidepanelHost()?.focus(hostedSidepanelId);
+    // Bounded ranks keep panels above workspace windows and below app modals.
+    const ordered = controller.all().filter(entry => entry.visible).sort((a, b) => a.order - b.order);
+    ordered.forEach((entry, i) => {
+      const element = surfaces.get(entry.id)?.element;
+      element?.style.setProperty('--sp-window-layer', String(11000 + i));
+      element?.classList.toggle('sp-window-focused', entry.id === view.id);
+    });
+  },
+});
+
+function viewport() {
+  return {
+    width: window.innerWidth, height: window.innerHeight,
+    top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')) || 48,
+  };
+}
+
+function injectStyles() {
+  if (document.getElementById('sidepanel-window-styles')) return;
+  const style = document.createElement('style');
+  style.id = 'sidepanel-window-styles';
+  style.textContent = `
+    html .sp-sidepanel { z-index: var(--sp-window-layer, 11000) !important; }
+    html .sp-sidepanel[data-sp-visible="false"] { visibility: hidden; pointer-events: none; }
+    html .sp-sidepanel.sp-floating {
+      right: auto; bottom: auto; min-width: 0; max-width: none; min-height: 0;
+      transform: none !important; transition: opacity .15s ease;
+    }
+    .sp-sidepanel.sp-floating.sp-window-focused { border-color: rgba(148,163,184,.38); }
+    .sp-sidepanel.sp-floating > :is(.cp-resize-handle,.cxp-resize-handle,.ocpv2-resize-handle,.asp-resize-handle) { display: none; }
+    .sp-window-move { display: none !important; }
+    .sp-floating .sp-window-move { display: inline-flex !important; cursor: grab; flex-shrink: 0; }
+    .sp-floating > :is(.cp-header,.cxp-header,.ocpv2-header,.asp-header) { cursor: grab; touch-action: none; }
+    .sp-window-toggle svg, .sp-window-move svg { width: 13px; height: 13px; pointer-events: none; }
+    .sp-window-resize { display: none; position: absolute; z-index: 20; touch-action: none; }
+    .sp-floating > .sp-window-resize { display: block; }
+    .sp-window-resize[data-edge="n"] { top: -3px; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
+    .sp-window-resize[data-edge="s"] { bottom: -3px; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
+    .sp-window-resize[data-edge="e"] { right: -3px; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
+    .sp-window-resize[data-edge="w"] { left: -3px; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
+    .sp-window-resize[data-edge="ne"], .sp-window-resize[data-edge="nw"],
+    .sp-window-resize[data-edge="se"], .sp-window-resize[data-edge="sw"] { width: 12px; height: 12px; }
+    .sp-window-resize[data-edge="ne"] { top: -3px; right: -3px; cursor: nesw-resize; }
+    .sp-window-resize[data-edge="nw"] { top: -3px; left: -3px; cursor: nwse-resize; }
+    .sp-window-resize[data-edge="se"] { bottom: -3px; right: -3px; cursor: nwse-resize; }
+    .sp-window-resize[data-edge="sw"] { bottom: -3px; left: -3px; cursor: nesw-resize; }
+    .sp-floating > .sp-window-resize[data-edge="se"]::after {
+      content: ''; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px;
+      border-right: 1px solid #94a3b8; border-bottom: 1px solid #94a3b8;
+    }
+    .sp-sidepanel [data-sidepanel-handle]:focus-visible, .sp-window-toggle:focus-visible {
+      outline: 2px solid #3b82f6; outline-offset: 2px;
+    }
+    html .sp-sidepanel.sp-window-interacting {
+      transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
+      background: rgba(18,18,20,.985) !important;
+    }
+    .sp-window-interacting iframe { pointer-events: none; }
+    .sp-dock-resize { touch-action: none; }
+  `;
+  document.head.appendChild(style);
+}
+
+function renderPresentation(view) {
+  const surface = surfaces.get(view.id);
+  if (!surface) return;
+  const { element, toggle, dockHandle, moveHandle } = surface;
+  const floating = view.layout.mode === 'floating';
+  element.classList.toggle('sp-floating', floating);
+  element.dataset.spVisible = String(view.visible);
+  element.inert = !view.visible;
+  if (surface.renderedMode !== view.layout.mode) {
+    toggle.title = floating ? 'Dock panel' : 'Detach panel';
+    toggle.setAttribute('aria-label', `${toggle.title}: ${LABELS[view.provider]}`);
+    toggle.setAttribute('aria-pressed', String(floating));
+    toggle.innerHTML = floating ? DOCK_ICON : DETACH_ICON;
+    surface.renderedMode = view.layout.mode;
+  }
+  moveHandle.tabIndex = floating ? 0 : -1;
+  if (dockHandle) dockHandle.tabIndex = floating ? -1 : 0;
+  if (floating && view.layout.rect) {
+    const rect = view.layout.rect;
+    element.style.left = `${rect.x}px`;
+    element.style.top = `${rect.y}px`;
+    element.style.width = `${rect.width}px`;
+    element.style.height = `${rect.height}px`;
+  } else {
+    element.style.left = '';
+    element.style.top = '';
+    element.style.height = '';
+    if (view.layout.dockedWidth) element.style.width = `${view.layout.dockedWidth}px`;
+  }
+}
+
+export function registerSidepanel({ owner, provider, layoutKey = provider, element, header, actions, buttonClass, dockHandle, applyVisibility }) {
+  injectStyles();
+  element.classList.add('sp-sidepanel');
+  element.dataset.sidepanelProvider = provider;
+  element.tabIndex = -1;
+  element.setAttribute('role', 'region');
+  element.setAttribute('aria-label', `${LABELS[provider]} sidepanel`);
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.className = `${buttonClass} sp-window-toggle`;
+  actions.prepend(toggle);
+  const moveHandle = document.createElement('button');
+  moveHandle.type = 'button';
+  moveHandle.className = `${buttonClass} sp-window-move`;
+  moveHandle.dataset.sidepanelHandle = 'move';
+  moveHandle.title = 'Move panel (arrow keys; Shift for larger steps)';
+  moveHandle.setAttribute('aria-label', `Move ${LABELS[provider]} panel with arrow keys`);
+  moveHandle.innerHTML = MOVE_ICON;
+  header.prepend(moveHandle);
+  const abort = new AbortController();
+  const listen = (target, event, callback, options = {}) => target.addEventListener(event, callback, { ...options, signal: abort.signal });
+  surfaces.set(owner, { element, toggle, dockHandle, moveHandle, abort });
+  controller.register({ id: owner, provider, layoutKey, applyVisibility });
+  ensureFloatingRect(owner);
+  listen(toggle, 'click', () => {
+    if (controller.get(owner).layout.mode === 'floating') dockSidepanel(owner);
+    else detachSidepanel(owner);
+  });
+  listen(element, 'pointerdown', event => {
+    controller.focus(owner);
+    const control = event.target.closest('button,input,select,textarea,a,[contenteditable],[tabindex]');
+    if (!control || control === element) element.focus({ preventScroll: true });
+  }, { capture: true });
+  listen(element, 'focusin', () => controller.focus(owner));
+  listen(header, 'pointerdown', event => {
+    if (controller.get(owner).layout.mode !== 'floating') return;
+    if (!event.target.closest('.sp-window-move') && event.target.closest('button,input,select,textarea,a,[contenteditable],[draggable="true"]')) return;
+    startInteraction(owner, 'move', event);
+  });
+  listen(moveHandle, 'keydown', event => keyboardInteraction(owner, 'move', event));
+  for (const edge of ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']) {
+    const handle = document.createElement('div');
+    handle.className = 'sp-window-resize';
+    handle.dataset.edge = edge;
+    handle.dataset.sidepanelHandle = 'resize';
+    handle.tabIndex = edge === 'se' ? 0 : -1;
+    handle.setAttribute('role', 'button');
+    handle.setAttribute('aria-label', `Resize ${LABELS[provider]} panel with arrow keys`);
+    element.appendChild(handle);
+    listen(handle, 'pointerdown', event => startInteraction(owner, edge, event));
+    listen(handle, 'keydown', event => keyboardInteraction(owner, edge, event));
+  }
+  if (dockHandle) {
+    dockHandle.classList.add('sp-dock-resize');
+    dockHandle.dataset.sidepanelHandle = 'resize';
+    dockHandle.setAttribute('role', 'separator');
+    dockHandle.setAttribute('aria-orientation', 'vertical');
+    dockHandle.setAttribute('aria-label', `Resize docked ${LABELS[provider]} panel with arrow keys`);
+    listen(dockHandle, 'pointerdown', event => startInteraction(owner, 'dock', event));
+    listen(dockHandle, 'keydown', event => keyboardInteraction(owner, 'dock', event));
+  }
+  return () => {
+    if (interaction?.id === owner) finishInteraction(true);
+    controller.unregister(owner);
+    clearRightPanelLayout(owner);
+    abort.abort();
+    surfaces.delete(owner);
+  };
+}
+
+export const setSidepanelVisible = (owner, visible) => {
+  if (hostedSidepanelId && !visible) { sidepanelHost()?.hide(hostedSidepanelId); return; }
+  controller.setVisible(owner, visible);
+};
+export const focusSidepanel = owner => controller.focus(owner);
+export const getSidepanelPresentation = owner => controller.get(owner);
+
+export function openAnotherSidepanelSession(owner, provider, defaults = {}) {
+  if (!hostedSidepanelId && controller.get(owner)?.layout.mode !== 'floating') return false;
+  const host = sidepanelHost();
+  if (!host) return false;
+  host.open(provider, defaults);
+  return true;
+}
+
+export function isHostedSessionFocused() {
+  return !hostedSidepanelId && !!sidepanelHost()?.has(state.lastActiveSidepanel);
+}
+
+export function sendToFocusedSession(kind, data) {
+  if (!isHostedSessionFocused()) return false;
+  sidepanelHost().send(state.lastActiveSidepanel, kind, data);
+  return true;
+}
+
+export function syncSidepanelLayout(owner, knownWidth) {
+  const view = controller.get(owner);
+  const panel = surfaces.get(owner)?.element;
+  if (!view?.visible || view.layout.mode !== 'docked' || !panel) {
+    clearRightPanelLayout(owner);
+    return;
+  }
+  reserveRightPanelLayout(owner, typeof knownWidth === 'number' ? knownWidth + 20 : panel, 20);
+}
+
+function ensureFloatingRect(owner) {
+  const view = controller.get(owner);
+  if (view.layout.mode !== 'floating') return;
+  const element = surfaces.get(owner).element;
+  const rect = view.layout.rect || { x: window.innerWidth - element.offsetWidth - 44, y: viewport().top + 44,
+    width: element.offsetWidth, height: element.offsetHeight };
+  const clamped = clampSidepanelRect(rect, viewport());
+  if (!view.layout.rect || Object.keys(clamped).some(key => clamped[key] !== view.layout.rect[key])) {
+    controller.updateLayout(owner, { rect: clamped });
+  }
+}
+
+export function detachSidepanel(owner) {
+  const view = controller.get(owner);
+  if (!view || view.layout.mode === 'floating') return;
+  const rect = surfaces.get(owner).element.getBoundingClientRect();
+  const offset = 24 * (1 + controller.all().filter(entry => entry.visible && entry.layout.mode === 'floating').length);
+  controller.updateLayout(owner, {
+    dockedWidth: rect.width,
+    rect: clampSidepanelRect(view.layout.rect || { x: rect.x - offset, y: rect.y + offset, width: rect.width, height: rect.height }, viewport()),
+  });
+  controller.setMode(owner, 'floating');
+  window.dispatchEvent(new Event('resize'));
+}
+
+export function dockSidepanel(owner) {
+  if (interaction?.id === owner) finishInteraction(false);
+  controller.setMode(owner, 'docked');
+  window.dispatchEvent(new Event('resize'));
+}
+
+export function sidepanelAcceptsKeyboard(provider, event) {
+  if (isHostedSessionFocused()) return false;
+  if (event.defaultPrevented || interaction) return false;
+  const target = event.target;
+  if (target?.closest?.('[data-sidepanel-handle], [role="dialog"], [aria-modal="true"]')) return false;
+  const surface = target?.closest?.('[data-sidepanel-provider]');
+  if (surface) return surface.dataset.sidepanelProvider === provider;
+  if (target?.closest?.('input,textarea,select,[contenteditable="true"]')) return false;
+  return state.lastActivePanel === provider;
+}
+
+function startInteraction(id, kind, event) {
+  if (event.button !== 0 || interaction) return;
+  const view = controller.get(id);
+  if (!view?.visible || (kind === 'dock') !== (view.layout.mode === 'docked')) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const element = surfaces.get(id).element;
+  const focusTarget = kind === 'move' ? surfaces.get(id).moveHandle : event.currentTarget;
+  focusTarget.focus({ preventScroll: true });
+  interaction = { id, kind, pointerId: event.pointerId, target: event.currentTarget,
+    x: event.clientX, y: event.clientY, dx: 0, dy: 0, raf: 0, viewport: viewport(),
+    rect: view.layout.rect && { ...view.layout.rect }, width: element.offsetWidth,
+    cursor: document.body.style.cursor, userSelect: document.body.style.userSelect };
+  event.currentTarget.setPointerCapture?.(event.pointerId);
+  element.classList.add('sp-window-interacting');
+  document.body.classList.add('ui-interacting');
+  document.body.style.userSelect = 'none';
+  document.body.style.cursor = kind === 'move' ? 'grabbing' : kind === 'dock' ? 'col-resize' : `${kind}-resize`;
+  if (kind === 'dock') setRightPanelResizing(true);
+}
+
+function applyInteraction() {
+  if (!interaction) return;
+  const { id, kind, rect, width, dx, dy, viewport: bounds } = interaction;
+  interaction.raf = 0;
+  if (kind === 'dock') {
+    controller.updateLayout(id, { dockedWidth: Math.max(320, Math.min(700, width - dx)) });
+  } else {
+    controller.updateLayout(id, { rect: kind === 'move'
+      ? clampSidepanelRect({ ...rect, x: rect.x + dx, y: rect.y + dy }, bounds)
+      : resizeSidepanelRect(rect, kind, dx, dy, bounds) });
+  }
+}
+
+function finishInteraction(cancelled) {
+  if (!interaction) return;
+  const current = interaction;
+  if (current.raf) cancelAnimationFrame(current.raf);
+  if (!cancelled) applyInteraction();
+  interaction = null;
+  if (cancelled) controller.updateLayout(current.id, current.kind === 'dock'
+    ? { dockedWidth: current.width } : { rect: current.rect });
+  if (current.target.hasPointerCapture?.(current.pointerId)) current.target.releasePointerCapture(current.pointerId);
+  surfaces.get(current.id)?.element.classList.remove('sp-window-interacting');
+  document.body.classList.remove('ui-interacting');
+  document.body.style.cursor = current.cursor;
+  document.body.style.userSelect = current.userSelect;
+  if (current.kind === 'dock') setRightPanelResizing(false);
+  if (!cancelled) {
+    controller.persist(current.id);
+    window.dispatchEvent(new Event('resize'));
+  }
+}
+
+function keyboardInteraction(id, kind, event) {
+  const delta = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[event.key];
+  if (!delta) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const view = controller.get(id);
+  const step = event.shiftKey ? 24 : 8;
+  const [dx, dy] = delta.map(value => value * step);
+  if (kind === 'dock') {
+    controller.updateLayout(id, { dockedWidth: Math.max(320, Math.min(700, surfaces.get(id).element.offsetWidth - dx)) });
+  } else if (view.layout.rect) {
+    const rect = view.layout.rect;
+    controller.updateLayout(id, { rect: kind === 'move'
+      ? clampSidepanelRect({ ...rect, x: rect.x + dx, y: rect.y + dy }, viewport())
+      : resizeSidepanelRect(rect, kind, dx, dy, viewport()) });
+  }
+  controller.persist(id);
+}
+
+window.addEventListener('pointermove', event => {
+  if (!interaction || event.pointerId !== interaction.pointerId) return;
+  interaction.dx = event.clientX - interaction.x;
+  interaction.dy = event.clientY - interaction.y;
+  if (!interaction.raf) interaction.raf = requestAnimationFrame(applyInteraction);
+});
+window.addEventListener('pointerup', event => {
+  if (event.pointerId === interaction?.pointerId) {
+    interaction.dx = event.clientX - interaction.x;
+    interaction.dy = event.clientY - interaction.y;
+    finishInteraction(false);
+  }
+});
+window.addEventListener('pointercancel', event => { if (event.pointerId === interaction?.pointerId) finishInteraction(true); });
+window.addEventListener('lostpointercapture', event => { if (event.pointerId === interaction?.pointerId) finishInteraction(true); });
+window.addEventListener('blur', () => finishInteraction(true));
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && interaction) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    finishInteraction(true);
+  }
+}, { capture: true });
+function refreshViewport() {
+  if (interaction) finishInteraction(true);
+  for (const view of controller.all()) {
+    if (view.layout.mode === 'floating') ensureFloatingRect(view.id);
+    else syncSidepanelLayout(view.id);
+  }
+}
+window.addEventListener('resize', refreshViewport);
+
+// UI settings and the measured title bar can change without a window resize.
+// Inspect only those inline variables so reservation writes cannot retrigger us.
+function viewportStyleKey() {
+  const style = document.documentElement.style;
+  return `${style.getPropertyValue('--ui-scale')}|${style.getPropertyValue('--navbar-height')}`;
+}
+let lastViewportStyle = viewportStyleKey();
+new MutationObserver(() => {
+  const next = viewportStyleKey();
+  if (next === lastViewportStyle) return;
+  lastViewportStyle = next;
+  refreshViewport();
+}).observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });

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

@@ -12,7 +12,7 @@ import {
   fetchSkillsSubFile, saveSkillsSubFile, createSkillsSubFile, deleteSkillsSubFile,
   createSkillsArtifact, deleteSkillsArtifact, validateSkillsArtifact,
   installSkillsBundled, uninstallSkillsBundled,
-  importSkillsBundle, getSkillsExportUrl,
+  importSkillsBundleAsking, getSkillsExportUrl,
   getSkillsIconUrl, uploadSkillsIcon, deleteSkillsIcon,
 } from './api.js';
 
@@ -381,37 +381,12 @@ function wirePanel() {
   };
   document.addEventListener('keydown', onEsc);
 
-  // Drag
-  initDrag();
-}
+  // Drag/resize are handled by the shared panel system via drag-handle/resize-handle.
+}
 
-// ═══════════════════════════════════════════
-// DRAG SUPPORT (simplified, panel-specific)
-// ═══════════════════════════════════════════
-
-function initDrag() {
-  const handle = _panel.querySelector('.drag-handle');
-  if (!handle) return;
-  let dragging = false, startX, startY, startLeft, startTop;
-  handle.addEventListener('mousedown', (e) => {
-    if (e.target.closest('button') || e.target.closest('input')) return;
-    dragging = true;
-    startX = e.clientX; startY = e.clientY;
-    const rect = _panel.getBoundingClientRect();
-    startLeft = rect.left; startTop = rect.top;
-    e.preventDefault();
-  });
-  document.addEventListener('mousemove', (e) => {
-    if (!dragging) return;
-    _panel.style.left = (startLeft + e.clientX - startX) + 'px';
-    _panel.style.top = (startTop + e.clientY - startY) + 'px';
-  });
-  document.addEventListener('mouseup', () => { dragging = false; });
-}
-
-// ═══════════════════════════════════════════
-// DATA LOADING
-// ═══════════════════════════════════════════
+// ═══════════════════════════════════════════
+// DATA LOADING
+// ═══════════════════════════════════════════
 
 async function loadLibrary() {
   try {
@@ -2772,6 +2747,14 @@ async function createFromWizard() {
 // IMPORT
 // ═══════════════════════════════════════════
 
+// What the import asks when the bundle names files that are already there.
+function importOverwriteQuestion(existing) {
+  const names = existing.slice(0, 12);
+  const more = existing.length - names.length;
+  const what = existing.length === 1 ? 'a file that already exists' : `${existing.length} files that already exist`;
+  return `This import would replace ${what}:\n\n${names.map(n => `  ${n}`).join('\n')}${more > 0 ? `\n  and ${more} more` : ''}\n\nReplace ${existing.length === 1 ? 'it' : 'them'}?`;
+}
+
 function triggerImport() {
   const input = document.createElement('input');
   input.type = 'file';
@@ -2793,7 +2776,10 @@ function triggerImport() {
       if (scope === 'project' && _projects.length > 0) {
         projectPath = _projects[0].path; // default to first project
       }
-      const result = await importSkillsBundle(bundle, scope, projectPath);
+      // A bundle that would replace files which are already there is refused by
+      // the server with their names: ask, and only a yes sends it again as confirmed.
+      const result = await importSkillsBundleAsking(bundle, scope, projectPath, (existing) => confirm(importOverwriteQuestion(existing)));
+      if (!result) { toast('Import cancelled. Nothing was replaced.', 'info'); return; }
       toast(`Imported "${result.name}"!`, 'info');
       await loadLibrary();
       renderLibrary();

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

@@ -0,0 +1,35 @@
+// SynaBun Style Guide v2 — entry point. Shared panel handlers own drag and resize.
+import { on } from './state.js';
+import { initI18n, isReady, t } from './i18n.js';
+import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
+import { createPanel } from './styleguide/sg-panel.js';
+let current = null, opening = false;
+export function initStyleGuide() { on('styleguide:open', options => openPanel(options)); }
+async function openPanel(options = {}) {
+    if (opening)
+        return;
+    if (current) {
+        current.panel.focus();
+        return;
+    }
+    opening = true;
+    try {
+        if (!isReady())
+            await initI18n();
+        if (isGuest() && !hasPermission('styleGuide')) {
+            showGuestToast(t('styleguide.permissionDenied'));
+            return;
+        }
+        const backdrop = document.createElement('div');
+        backdrop.className = 'studio-backdrop open';
+        document.body.append(backdrop);
+        current = createPanel({ projectPath: options?.projectPath, onClosed: () => { backdrop.remove(); current = null; } });
+        document.body.append(current.panel);
+        current.panel.style.left = Math.max(8, (window.innerWidth - Math.min(1180, window.innerWidth - 16)) / 2) + 'px';
+        current.panel.style.top = Math.max(8, (window.innerHeight - Math.min(720, window.innerHeight - 32)) / 2) + 'px';
+        await current.ready;
+    }
+    finally {
+        opening = false;
+    }
+}

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

@@ -7,6 +7,8 @@
 // Also manages guest/owner role and feature permissions.
 
 import { emit } from './state.js';
+import { storage } from './storage.js';
+import { applyHiddenModels, hydrateHiddenModels } from './ocp-hidden-models.js';
 
 let _ws = null;
 let _reconnectTimer = null;
@@ -17,6 +19,32 @@ let _permissions = {};
 const RECONNECT_INTERVAL = 5000;
 const DEBOUNCE_MS = 300;
 
+function clearOpenCodeHistoryClientState(message) {
+  const exactKeys = new Set([
+    'opencode-v2-windows',
+    'synabun-ocp-windows',
+    'synabun-ocp-session-snapshots',
+    'synabun-opencode-session-mcp-profiles',
+  ]);
+  const prefixes = [
+    'opencode-v2-tabs-',
+    'opencode-v2-automations-',
+    'opencode-v2-title-states-',
+    'synabun-ocp-tabs-',
+  ];
+  for (const key of storage.keys()) {
+    if (exactKeys.has(key) || prefixes.some((prefix) => key.startsWith(prefix))) {
+      storage.removeItem(key);
+    }
+  }
+  emit('sync:opencode:history-cleared', message);
+
+  const ownRequest = sessionStorage.getItem('synabun-opencode-history-clear-request');
+  const initiatedHere = !!ownRequest && ownRequest === message?.requestId;
+  sessionStorage.removeItem('synabun-opencode-history-clear-request');
+  setTimeout(() => location.reload(), initiatedHere ? 4000 : 700);
+}
+
 // ── Server → Client event mapping ────────────
 // Data mutations from REST endpoints trigger UI refresh events.
 
@@ -29,6 +57,23 @@ const SYNC_HANDLERS = {
   'category:created': () => { emit('categories:changed'); emit('categories-changed'); scheduleReload(); },
   'category:updated': () => { emit('categories:changed'); emit('categories-changed'); scheduleReload(); },
   'category:deleted': () => { emit('categories:changed'); emit('categories-changed'); scheduleReload(); },
+  // Memory map positions changed (new memories placed, an island refit, a rebuild).
+  'map:updated':     (msg) => emit('sync:map:updated', msg),
+
+  // OpenCode history is global to the host. Drop stale per-window tab/session
+  // references in every connected UI before reloading against the empty DB.
+  'opencode:history-cleared': (msg) => clearOpenCodeHistoryClientState(msg),
+
+  // Settings → OpenCode model checkboxes changed in another window: refresh
+  // the localStorage mirror (fires ocp-hidden-models-changed when it differs).
+  'opencode:hidden-models-changed': (msg) => {
+    applyHiddenModels(msg.models);
+    emit('sync:opencode:hidden-models-changed', msg);
+  },
+
+  // Assistant → Models toggles (every provider): the Assistant's model menus,
+  // Routes editor and Models manager reload their lists.
+  'assistant:hidden-models-changed': (msg) => emit('sync:assistant:hidden-models-changed', msg),
 
   // Card sync (relayed from other clients)
   'card:opened':    (msg) => emit('sync:card:opened', msg),
@@ -42,6 +87,34 @@ const SYNC_HANDLERS = {
   'terminal:session-created': (msg) => emit('sync:terminal:created', msg),
   'terminal:session-deleted': (msg) => emit('sync:terminal:deleted', msg),
 
+  // Server-owned native loop conversations
+  'sidepanel:run-created':   (msg) => emit('sync:sidepanel:run-created', msg),
+  'sidepanel:run-updated':   (msg) => emit('sync:sidepanel:run-updated', msg),
+  'sidepanel:run-claimed':   (msg) => emit('sync:sidepanel:run-claimed', msg),
+  'sidepanel:run-completed': (msg) => emit('sync:sidepanel:run-completed', msg),
+  'sidepanel:run-failed':    (msg) => emit('sync:sidepanel:run-failed', msg),
+  'sidepanel:run-stopped':   (msg) => emit('sync:sidepanel:run-stopped', msg),
+  'sidepanel:provider-event':(msg) => emit('sync:sidepanel:provider-event', msg),
+
+  // Assistant (CLI-region orchestrator) — sessions, dispatches, permissions, accounts
+  'assistant:session-created':     (msg) => emit('sync:assistant:session-created', msg),
+  'assistant:session-updated':     (msg) => emit('sync:assistant:session-updated', msg),
+  'assistant:session-ended':       (msg) => emit('sync:assistant:session-ended', msg),
+  'assistant:dispatch':            (msg) => emit('sync:assistant:dispatch', msg),
+  'assistant:run-removed':         (msg) => emit('sync:assistant:run-removed', msg),
+  'assistant:permission-request':  (msg) => emit('sync:assistant:permission-request', msg),
+  'assistant:permission-resolved': (msg) => emit('sync:assistant:permission-resolved', msg),
+  'assistant:focus':               (msg) => emit('sync:assistant:focus', msg),
+  'assistant:accounts-changed':    (msg) => emit('sync:assistant:accounts-changed', msg),
+  'assistant:mailbox':             (msg) => emit('sync:assistant:mailbox', msg),
+  'assistant:cost':                (msg) => emit('sync:assistant:cost', msg),
+  'assistant:desktop':             (msg) => emit('sync:assistant:desktop', msg),
+  'assistant:desktop-setup':       (msg) => emit('sync:assistant:desktop-setup', msg),
+  'assistant:routing-changed':     (msg) => emit('sync:assistant:routing-changed', msg),
+
+  // WhatsApp Link — states and counters only (never a QR, code, number or text); Settings → WhatsApp re-reads /api/whatsapp/status
+  'whatsapp:status':               (msg) => emit('sync:whatsapp:status', msg),
+
   // Browser session lifecycle sync
   'browser:session-created': (msg) => emit('sync:browser:created', msg),
   'browser:session-deleted': (msg) => emit('sync:browser:deleted', msg),
@@ -54,6 +127,12 @@ const SYNC_HANDLERS = {
   // Browser auto-open (triggered by menu/keybind manual open)
   'browser:open': (msg) => emit('browser:open', msg),
 
+  // MCP profile sync
+  'mcp:profile-changed': (msg) => {
+    emit('mcp:profile-changed', msg);
+    emit('sync:mcp:profile-changed', msg);
+  },
+
   // Terminal link events
   'link:created':        (msg) => emit('sync:link:created', msg),
   'link:deleted':        (msg) => emit('sync:link:deleted', msg),
@@ -79,9 +158,15 @@ const SYNC_HANDLERS = {
   'schedule:fired':     (msg) => emit('sync:schedule:fired', msg),
   'schedule:completed':       (msg) => emit('sync:schedule:completed', msg),
   'schedule:failed':          (msg) => emit('sync:schedule:failed', msg),
+  'schedule:deferred':        (msg) => emit('sync:schedule:deferred', msg),
+  'schedule:deferred-expired':(msg) => emit('sync:schedule:deferred-expired', msg),
   'schedule:timer-set':       (msg) => emit('sync:schedule:timer-set', msg),
   'schedule:timer-fired':     (msg) => emit('sync:schedule:timer-fired', msg),
   'schedule:timer-cancelled': (msg) => emit('sync:schedule:timer-cancelled', msg),
+  'schedule-group:created':   (msg) => emit('sync:schedule-group:created', msg),
+  'schedule-group:updated':   (msg) => emit('sync:schedule-group:updated', msg),
+  'schedule-group:deleted':   (msg) => emit('sync:schedule-group:deleted', msg),
+  'schedule-group:reordered': (msg) => emit('sync:schedule-group:reordered', msg),
 
   // Quick timer events
   'quick-timer:set':       (msg) => emit('sync:quick-timer:set', msg),
@@ -113,6 +198,8 @@ const SYNC_HANDLERS = {
     _isGuest = !!msg.isGuest;
     _permissions = msg.permissions || {};
     emit('session:info', { isGuest: _isGuest, permissions: _permissions });
+    // Catch up on hidden-model changes missed while disconnected.
+    hydrateHiddenModels();
   },
 };