synabun 2.0.7 → 2.0.10

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

@@ -1,12 +1,16 @@
 // SynaBun sidepanel tray placeholders.
 // Renders minimized pills for persisted sidepanel tabs before a panel is booted.
+// A tab saved while it was working may still be working (its turn outlives the
+// page on the server): its provider's panel boots then, hidden, and asks, and
+// its own pills (its styles, the sessions' real state) take the placeholders'
+// places. Panels whose saved tabs were all idle stay lazy.
 
 import { storage } from './storage.js';
 import { emit } from './state.js';
 import { getProviderMeta } from './provider-icons.js';
-import { toggleClaudePanel, isClaudePanelOpen } from './ui-claude-panel.js';
-import { toggleCodexPanel, isCodexPanelOpen } from './ui-codex-panel.js';
-import { toggleOpencodePanel, isOpencodePanelOpen } from './ui-opencode-panel-v2.js';
+import { toggleClaudePanel, isClaudePanelOpen, bootClaudePanel } from './ui-claude-panel.js';
+import { toggleCodexPanel, isCodexPanelOpen, bootCodexPanel } from './ui-codex-panel.js';
+import { toggleOpencodePanel, isOpencodePanelOpen, bootOpencodePanel } from './ui-opencode-panel-v2.js';
 import { nativeLoopWindowId } from './ui-native-window-id.js';
 
 const PLACEHOLDER_CLASS = 'sidepanel-tray-placeholder';
@@ -17,6 +21,8 @@ const PROVIDERS = {
     windowKey: 'cp-window-id',
     tabsKeyPrefix: 'synabun-claude-panel-tabs',
     pillClass: 'cp-session-pill',
+    // A tab saved while a permission or a question waited on the user (tabNeedsYou in ui-claude-panel.js).
+    attentionClass: 'cp-pill-attention',
     eventName: 'claude-panel:show',
   },
   codex: {
@@ -24,6 +30,8 @@ const PROVIDERS = {
     windowKey: 'cxp-window-id',
     tabsKeyPrefix: 'synabun-codex-panel-tabs',
     pillClass: 'cxp-session-pill',
+    // A tab saved while an approval or a question card waited on the user (paintTrayPill in cdx-tabs.js).
+    attentionClass: 'cxp-pill-attention',
     eventName: 'codex-panel:show',
   },
   opencode: {
@@ -35,13 +43,30 @@ const PROVIDERS = {
     automationKeyPrefix: 'opencode-v2-automations',
     v2Plain: true,
     windowScopedPlain: true,
+    // The sessions that were working when the panel last saw them (ocp-v2-panel.js STOR_BUSY).
+    busyKeyPrefix: 'opencode-v2-busy',
     legacyV1Prefix: 'synabun-ocp-tabs',
     legacyV1CleanupFlag: 'opencode-v1-cleanup-done',
-    pillClass: 'ocp-session-pill',
+    // The v2 panel's own pill (the v1 panel and its ocp-session-pill styles are gone), so a
+    // working placeholder wears ocpv2-pill-running like the real one.
+    pillClass: 'ocpv2-session-pill',
     eventName: 'opencode-panel:show',
   },
 };
 
+// How each panel boots without showing itself, and whether it should: OpenCode only
+// while its server runs (a SynaBun restart stopped every turn, and booting would
+// start the server again just to hear that).
+const BOOT_HIDDEN = {
+  claude: { boot: () => bootClaudePanel() },
+  codex: { boot: () => bootCodexPanel() },
+  opencode: {
+    boot: () => bootOpencodePanel(),
+    ready: async () => (await (await fetch('/api/opencode-v2/status')).json())?.running === true,
+  },
+};
+const _bootedHidden = new Set();
+
 const _loadedProviders = new Set();
 let _initialized = false;
 
@@ -147,8 +172,16 @@ function tabId(provider, tab, index) {
   return `${provider}-${index}`;
 }
 
+// Working when it was saved: a turn (or, in Codex, a thread being made), or, in Claude, background agents
+// and shells its turn left running (`backgroundWork`, their count: the real pill's tabWorking).
 function isRunning(tab) {
-  return !!(tab.running || tab.startingThread);
+  return !!(tab.running || tab.startingThread || Number(tab.backgroundWork) > 0);
+}
+
+// Waiting on the user when it was saved (Claude, Codex: `needsYou`): its placeholder says so before it says
+// working, and the panel boots to ask, as for a working tab (the reattach brings the card back).
+function needsYou(tab) {
+  return tab.needsYou === true;
 }
 
 function isForeignActiveAutomation(tab) {
@@ -168,6 +201,10 @@ function readPayload(key, meta = null) {
       const automationBySession = new Map((Array.isArray(automationRows) ? automationRows : [])
         .filter((row) => row?.sessionId && row?.runId)
         .map((row) => [row.sessionId, row]));
+      const busyRows = windowId && meta.busyKeyPrefix
+        ? parseJson(storage.getItem(`${meta.busyKeyPrefix}-${windowId}`), [])
+        : [];
+      const busy = new Set(Array.isArray(busyRows) ? busyRows : []);
       const tabs = arr
         .filter((s) => typeof s === 'string' && s)
         .map((sid) => {
@@ -177,7 +214,8 @@ function readPayload(key, meta = null) {
             automationRunId: automation?.runId || null,
             automationActive: !!automation?.running,
             automationOwnerId: automation?.ownerId || null,
-            running: !!automation?.running,
+            // An automation's pill follows its turn: a warm worker saved between turns ('idle') rests.
+            running: (!!automation?.running && automation.turn !== 'idle') || busy.has(sid),
           };
         });
       if (!tabs.length) return null;
@@ -492,7 +530,9 @@ function createPlaceholder(provider, payload, tab, index) {
     <span class="term-minimized-pill-label">${esc(tabLabel(provider, tab))}</span>
     <button class="term-minimized-pill-close" data-tooltip="Close" data-tooltip-pos="top">&times;</button>
   `;
-  pill.classList.toggle(`${meta.pillClass.replace('-session-pill', '')}-pill-running`, isRunning(tab));
+  const waiting = !!meta.attentionClass && needsYou(tab);
+  if (meta.attentionClass) pill.classList.toggle(meta.attentionClass, waiting);
+  pill.classList.toggle(`${meta.pillClass.replace('-session-pill', '')}-pill-running`, !waiting && isRunning(tab));
   pill.dataset.sourceKey = payload.key || '';
   pill.addEventListener('click', () => openProvider(provider, id, payload.key));
   pill.querySelector('.term-minimized-pill-close')?.addEventListener('click', (event) => {
@@ -517,6 +557,40 @@ function createPlaceholder(provider, payload, tab, index) {
   return pill;
 }
 
+/**
+ * Whether a provider's panel should boot, hidden, to ask after its tabs: one of this window's own
+ * saved tabs (the ones its restore brings back; never another window's, which a click migrates)
+ * was working when it was saved. Pure: `pills` is meaningfulPills(), `currentKey` this window's key.
+ */
+export function placeholdersNeedBoot(pills, currentKey) {
+  return (Array.isArray(pills) ? pills : [])
+    .some(({ payload, tab }) => payload?.key === currentKey && (isRunning(tab) || needsYou(tab)));
+}
+
+/**
+ * What the tabs a window of `provider` saved were doing then, read as the placeholders read them:
+ * 'action' when one waited on the user (needsYou), 'working' when one worked, else 'idle'. A detached
+ * session window's pill says it before the window loads (ui-sidepanel-sessions.js).
+ */
+export function savedTabsStatus(provider, windowId) {
+  const meta = PROVIDERS[provider];
+  if (!meta || !windowId) return 'idle';
+  const tabs = readPayload(`${meta.tabsKeyPrefix}-${windowId}`, meta)?.tabs || [];
+  if (tabs.some((tab) => needsYou(tab))) return 'action';
+  return tabs.some((tab) => isRunning(tab)) ? 'working' : 'idle';
+}
+
+function bootHiddenIfWorking(provider, pills) {
+  const meta = PROVIDERS[provider];
+  const entry = BOOT_HIDDEN[provider];
+  if (!meta || !entry || _bootedHidden.has(provider) || _loadedProviders.has(provider)) return;
+  if (!placeholdersNeedBoot(pills, scopedTabsKey(meta))) return;
+  _bootedHidden.add(provider);
+  Promise.resolve(entry.ready ? entry.ready() : true)
+    .then((ok) => (ok ? entry.boot() : null))
+    .catch((err) => console.warn(`[sidepanel-tray] ${provider}: could not boot to ask after its working tabs`, err));
+}
+
 export function renderSidepanelTrayPlaceholders() {
   for (const provider of Object.keys(PROVIDERS)) {
     if (_loadedProviders.has(provider)) {
@@ -524,9 +598,11 @@ export function renderSidepanelTrayPlaceholders() {
       continue;
     }
     removePlaceholders(provider);
-    for (const { payload, tab, index } of meaningfulPills(provider)) {
+    const pills = meaningfulPills(provider);
+    for (const { payload, tab, index } of pills) {
       createPlaceholder(provider, payload, tab, index);
     }
+    bootHiddenIfWorking(provider, pills);
   }
 }
 

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

@@ -6,7 +6,9 @@
 
 import { emit, on } from './state.js';
 import { storage } from './storage.js';
+import { safeHref } from './assistant/asst-sanitize.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
+import { registerLaunchPrefetch } from './launch-prefetch.js';
 import {
   fetchSkillsLibrary, fetchSkillsArtifact, saveSkillsArtifact,
   fetchSkillsSubFile, saveSkillsSubFile, createSkillsSubFile, deleteSkillsSubFile,
@@ -22,6 +24,9 @@ const $ = (id) => document.getElementById(id);
 let _panel = null;
 let _backdrop = null;
 let _library = [];
+let _libraryLoaded = false;  // the library was read once: later opens paint from it and read it again behind
+let _panelLife = null;       // document listeners of the open panel end with it
+let _toolsMenuLife = null;   // the tools dropdown's outside-click listener (one at a time)
 let _projects = [];
 let _selected = null;      // currently selected artifact
 let _selectedContent = null; // loaded content of selected artifact
@@ -242,6 +247,8 @@ function toast(msg, type = 'info') {
 // ═══════════════════════════════════════════
 
 export function initSkillsStudio() {
+  // Launch: the library is read once the page has painted (launch-prefetch.js), so the first open paints at once.
+  registerLaunchPrefetch('skills-library', prefetchSkillsLibrary, { order: 70 });
   on('skills:open', () => openPanel());
   on('skills:open-wizard', () => { openPanel(); switchToWizard(); });
   on('skills:import', () => { openPanel(); triggerImport(); });
@@ -276,6 +283,16 @@ async function openPanel() {
   _panel.style.top = Math.max(48, (window.innerHeight - 520) / 2) + 'px';
 
   wirePanel();
+  if (_libraryLoaded) {
+    // The library as last read paints at once; it is read again behind it and the list follows in place.
+    const countEl = $('ss-total-count');
+    if (countEl) countEl.textContent = _library.length;
+    renderLibrary();
+    renderView();
+    requestAnimationFrame(() => { _backdrop?.classList.add('open'); _panel?.classList.add('open'); });
+    refreshLibraryInPlace();
+    return;
+  }
   await loadLibrary();
   renderView();
 
@@ -284,6 +301,10 @@ async function openPanel() {
 
 function closePanel() {
   if (!_panel) return;
+  _panelLife?.abort();
+  _panelLife = null;
+  _toolsMenuLife?.abort();
+  _toolsMenuLife = null;
   if (_backdrop) { _backdrop.remove(); _backdrop = null; }
   _panel.remove();
   _panel = null;
@@ -340,6 +361,8 @@ function buildPanelHTML() {
 }
 
 function wirePanel() {
+  _panelLife?.abort();
+  _panelLife = new AbortController();
   // Close button
   $('ss-close')?.addEventListener('click', closePanel);
 
@@ -376,10 +399,10 @@ function wirePanel() {
       if (_view === 'editor' && _tabs.length > 0) { closeTab(_activeTabIdx); return; }
       if (_view === 'wizard') { switchToLibrary(); return; }
       closePanel();
-      document.removeEventListener('keydown', onEsc);
     }
   };
-  document.addEventListener('keydown', onEsc);
+  // Removed with the panel, however it closes (the close button too).
+  document.addEventListener('keydown', onEsc, { signal: _panelLife.signal });
 
   // Drag/resize are handled by the shared panel system via drag-handle/resize-handle.
 }
@@ -393,6 +416,7 @@ async function loadLibrary() {
     const data = await fetchSkillsLibrary();
     _library = data.artifacts || [];
     _projects = data.projects || [];
+    _libraryLoaded = true;
     const countEl = $('ss-total-count');
     if (countEl) countEl.textContent = _library.length;
     renderLibrary();
@@ -402,6 +426,35 @@ async function loadLibrary() {
   }
 }
 
+// The library read again behind a panel painted from the kept one: the list is redrawn only when it changed,
+// at the scroll position it had (a failed read leaves the kept library as it is).
+async function refreshLibraryInPlace() {
+  const before = JSON.stringify([_library, _projects]);
+  try {
+    const data = await fetchSkillsLibrary();
+    const next = [data.artifacts || [], data.projects || []];
+    if (!_panel || JSON.stringify(next) === before) return;
+    [_library, _projects] = next;
+    const list = $('ss-library');
+    const scroll = list ? list.scrollTop : 0;
+    const countEl = $('ss-total-count');
+    if (countEl) countEl.textContent = _library.length;
+    renderLibrary();
+    if (list) list.scrollTop = scroll;
+  } catch { /* the kept library stays */ }
+}
+
+/** Launch prefetch: the library read once, so the first open paints at once (nothing is drawn here). */
+export function prefetchSkillsLibrary() {
+  if (_libraryLoaded || (isGuest() && !hasPermission('skills'))) return Promise.resolve();
+  return fetchSkillsLibrary().then((data) => {
+    if (_libraryLoaded) return;
+    _library = data.artifacts || [];
+    _projects = data.projects || [];
+    _libraryLoaded = true;
+  }).catch(() => { /* the first open reads it */ });
+}
+
 // ═══════════════════════════════════════════
 // VIEW SWITCHING
 // ═══════════════════════════════════════════
@@ -795,7 +848,7 @@ function buildMetadataForm(artifact, fm) {
 
     html += `<div class="ss-field">
       <label>Max Turns</label>
-      <input type="number" class="ss-input" id="ss-f-max-turns" value="${fm.maxTurns || ''}" min="0" data-fm="maxTurns" placeholder="0 = unlimited">
+      <input type="number" class="ss-input" id="ss-f-max-turns" value="${esc(String(fm.maxTurns || ''))}" min="0" data-fm="maxTurns" placeholder="0 = unlimited">
     </div>`;
 
     html += `<div class="ss-field">
@@ -1291,15 +1344,17 @@ function wireToolsDropdown() {
     updateDirtyState();
   });
 
-  // Close on outside click
+  // Close on outside click. Every editor render wires a new dropdown: the previous one's listener ends here,
+  // and the last one with the panel.
   const closeMenu = (e) => {
     if (!trigger.contains(e.target) && !menu.contains(e.target)) {
       menu.classList.remove('open');
       trigger.classList.remove('open');
     }
   };
-  document.addEventListener('click', closeMenu);
-  // Clean up when panel is destroyed (captured via MutationObserver is overkill — just leave it)
+  _toolsMenuLife?.abort();
+  _toolsMenuLife = new AbortController();
+  document.addEventListener('click', closeMenu, { signal: _toolsMenuLife.signal });
 }
 
 // ── Metadata ↔ Frontmatter helpers ──
@@ -1598,8 +1653,8 @@ function renderMarkdown(md) {
   // Strip YAML frontmatter
   let text = md.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, '');
 
-  // Escape HTML first
-  text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  // Escape HTML first (quotes too: a link's target lands in an attribute)
+  text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
   // Code blocks (``` ... ```)
   text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
@@ -1626,8 +1681,11 @@ function renderMarkdown(md) {
   // Inline code
   text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
 
-  // Links
-  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+  // Links: http(s) and mailto only, checked as the Markdown sanitiser checks them; any other target stays text
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (whole, label, target) => {
+    const href = safeHref(target.replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&'));
+    return href ? `<a href="${esc(href)}" target="_blank" rel="noopener noreferrer">${label}</a>` : label;
+  });
 
   // Blockquotes
   text = text.replace(/^&gt;\s?(.*)$/gm, '<blockquote>$1</blockquote>');
@@ -1663,7 +1721,7 @@ function renderMarkdown(md) {
   return text;
 }
 
-// ── Mermaid support (lazy-loaded from CDN) ──
+// ── Mermaid support (lazy-loaded, vendored in public/vendor/mermaid/) ──
 let _mermaidLoaded = false;
 let _mermaidLoading = false;
 let _mermaidId = 0;
@@ -1679,7 +1737,7 @@ async function loadMermaid() {
   }
   _mermaidLoading = true;
   try {
-    const mod = await import('https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs');
+    const mod = await import('/vendor/mermaid/mermaid-11.17.2.esm.min.mjs');
     mod.default.initialize({ startOnLoad: false, theme: 'dark', themeVariables: {
       darkMode: true, background: 'transparent', primaryColor: '#1e3a5f',
       primaryTextColor: '#e0e0e0', lineColor: '#94a3b8', secondaryColor: '#2a2a4a',

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

@@ -66,6 +66,13 @@ const SYNC_HANDLERS = {
 
   // Settings → OpenCode model checkboxes changed in another window: refresh
   // the localStorage mirror (fires ocp-hidden-models-changed when it differs).
+  // OpenCode's provider list changed (a provider connected or removed, a catalog refresh): every window's
+  // pickers read it again, also where no OpenCode panel (and so no OpenCode socket) is open.
+  'opencode:providers-changed': (msg) => {
+    emit('sync:opencode:providers-changed', msg);
+    if (typeof document !== 'undefined') document.dispatchEvent(new CustomEvent('ocp-providers-changed'));
+  },
+
   'opencode:hidden-models-changed': (msg) => {
     applyHiddenModels(msg.models);
     emit('sync:opencode:hidden-models-changed', msg);
@@ -129,6 +136,8 @@ const SYNC_HANDLERS = {
   '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),
+  // Admin sandbox (lib/agent-sandbox-setting.js): the one global value changed in some window
+  'agents:admin-sandbox-changed':  (msg) => emit('sync:agents:admin-sandbox-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),

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

@@ -20,6 +20,7 @@ import { readinessKind, typeWhenReady } from './term-ready.js';
 import { initRendererManager, acquireRenderer, disposeRenderer, hasWebgl, noteFocus, adoptRenderer, rendererState, rendererStats } from './term-renderer.js';
 import { mountAssistant } from './assistant/asst-panel.js';
 import { getAssistantSession } from './assistant/asst-api.js';
+import { mascotCameoSvg } from './synabun-mascot.js';
 import { brainLabel, normalizeBrain, readStoredBrain, restoredSessionName, sessionNameGivenUp } from './assistant/asst-state.js';
 import { initAssistant, registerAssistantHost, openAssistant, assistantOwnerOf, fetchLiveAssistantSessions, isAssistantSessionLive } from './ui-assistant.js';
 
@@ -447,13 +448,25 @@ function _setBadgeStatus(container, status) {
   if (lbl) lbl.textContent = _CLI_LABELS[status] || '';
 }
 
+/**
+ * An Assistant tab minimises to the Assistant's own tray pill (assistant/asst-styles.js "Tray pill"), the one
+ * its sidepanel shows: the mark, the gold cameo and hairline while the session works (its turn or a worker it
+ * dispatched), the warn tint while it needs you. No CLI dot and no check: its status is the panel's.
+ */
+function _paintAssistantPill(pill, status) {
+  pill.classList.toggle('asp-pill-running', status === CLI_STATUS.WORKING);
+  pill.classList.toggle('asp-pill-attention', status === CLI_STATUS.ACTION);
+  pill.classList.toggle('asp-pill-done', status === CLI_STATUS.DONE);
+}
+
 function _updateSessionBadges(sessionId, status) {
   _notifyStatusChange(sessionId, status);
   const refs = _getBadgeContainers(sessionId);
   _setBadgeStatus(refs.tab, status);
   _setBadgeStatus(refs.float, status);
+  if (refs.pill?.classList.contains('asp-session-pill')) _paintAssistantPill(refs.pill, status);
   // Minimized pill badge + icon swap on done
-  if (refs.pill) {
+  else if (refs.pill) {
     _setBadgeStatus(refs.pill, status);
     const ico = refs.pill.querySelector('.term-minimized-pill-icon');
     if (ico) {
@@ -646,7 +659,7 @@ function _initFloatProfileDropdown(dd) {
     for (const [id, preset] of Object.entries(data.presets)) {
       const opt = document.createElement('div');
       opt.className = 'term-float-profile-option' + (id === data.current ? ' selected' : '');
-      opt.innerHTML = `<span class="tfp-name">${preset.label || id}</span><span class="tfp-hint">${preset.tools} tools</span>`;
+      opt.innerHTML = `<span class="tfp-name">${_escHtml(String(preset.label || id))}</span><span class="tfp-hint">${_escHtml(String(preset.tools))} tools</span>`;
       opt.addEventListener('click', async (ev) => {
         ev.stopPropagation();
         menu.classList.remove('open');
@@ -726,7 +739,7 @@ function _initFloatRecallDropdown(dd) {
     for (const p of FLOAT_RECALL_META) {
       const opt = document.createElement('div');
       opt.className = 'term-float-recall-option' + (p.value === data.profile ? ' selected' : '');
-      opt.innerHTML = `<span class="tfr-name">${p.label}</span><span class="tfr-hint">${p.hint}</span>`;
+      opt.innerHTML = `<span class="tfr-name">${_escHtml(p.label)}</span><span class="tfr-hint">${_escHtml(p.hint)}</span>`;
       opt.addEventListener('click', async (ev) => {
         ev.stopPropagation();
         menu.classList.remove('open');
@@ -1740,7 +1753,7 @@ function pickProject(profile) {
 
     const title = document.createElement('div');
     title.className = 'term-picker-title';
-    title.innerHTML = `<span class="term-picker-icon">${profileDef?.svg || SVG_SHELL}</span>Open ${label} in...`;
+    title.innerHTML = `<span class="term-picker-icon">${profileDef?.svg || SVG_SHELL}</span>Open ${_escHtml(String(label))} in...`;
 
     const list = document.createElement('div');
     list.className = 'term-picker-list';
@@ -1757,7 +1770,7 @@ function pickProject(profile) {
       const item = document.createElement('button');
       item.className = 'term-picker-item';
       const folder = p.path.split(/[\\/]/).pop();
-      item.innerHTML = `<span class="term-picker-item-icon"><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></span><span class="term-picker-item-label">${p.label || folder}</span><span class="term-picker-item-path">${p.path}</span>`;
+      item.innerHTML = `<span class="term-picker-item-icon"><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></span><span class="term-picker-item-label">${_escHtml(String(p.label || folder))}</span><span class="term-picker-item-path">${_escHtml(String(p.path))}</span>`;
       item.addEventListener('click', () => { overlay.remove(); resolve(p.path); });
       list.appendChild(item);
     });
@@ -3288,7 +3301,7 @@ async function reconnectBrowserSession(sessionId, liveData, saved) {
     <div class="browser-url-bar">
       <input type="text" class="browser-url-input" value="${currentUrl.replace(/"/g, '&quot;')}" spellcheck="false" autocomplete="off">
     </div>
-    <span class="browser-title-label">${liveData?.title || ''}</span>
+    <span class="browser-title-label">${_escHtml(String(liveData?.title || ''))}</span>
   `;
   viewport.appendChild(navbar);
 
@@ -5133,10 +5146,11 @@ function minimizeTab(sessionId) {
   if (!tray) { tabState.el.style.display = 'none'; _syncRenderers(); return; }
   const prof = PROFILES.find(p => p.id === session.profile);
   const pill = document.createElement('div');
-  pill.className = 'term-minimized-pill' + (session._bell ? ' has-bell' : '');
+  pill.className = 'term-minimized-pill' + (session._isAssistant ? ' asp-session-pill' : '') + (session._bell ? ' has-bell' : '');
   pill.setAttribute('data-session-id', sessionId);
+  // (An Assistant's carries the running cameo beside its mark: _paintAssistantPill shows one or the other.)
   pill.innerHTML = `
-    <span class="term-minimized-pill-icon">${prof?.svg || SVG_SHELL}</span>
+    <span class="term-minimized-pill-icon"${session._isAssistant ? ' aria-hidden="true"' : ''}>${prof?.svg || SVG_SHELL}${session._isAssistant ? mascotCameoSvg() : ''}</span>
     <span class="term-minimized-pill-label">${_escHtml(_displayLabel(session))}</span>
     <button class="term-minimized-pill-close" data-tooltip="Close">&times;</button>
   `;
@@ -5150,9 +5164,11 @@ function minimizeTab(sessionId) {
   tray.appendChild(pill);
   tabState.pill = pill;
 
-  // Set initial CLI status badge on pill
+  // Set initial CLI status badge on pill (an Assistant's: the state the panel last pushed)
   const tracked = _cliSessionStatus.get(sessionId);
-  if (tracked) {
+  if (tracked && session._isAssistant) {
+    _paintAssistantPill(pill, tracked.status);
+  } else if (tracked) {
     const badge = _ensureBadge(pill);
     badge.dataset.status = tracked.status;
     const lbl = badge.querySelector('.cli-status-label');
@@ -6905,9 +6921,9 @@ async function toggleFileTree(sidebar, session) {
 
     // Branch (clickable if git)
     const branchHtml = data.branch
-      ? `<button class="ft-branch" data-tooltip="Switch branch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg><span class="ft-branch-name">${data.branch}</span></button>`
+      ? `<button class="ft-branch" data-tooltip="Switch branch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg><span class="ft-branch-name">${_escHtml(String(data.branch))}</span></button>`
       : '';
-    header.innerHTML = `<span class="ft-header-label" data-tooltip="Click to change path" title="${session.cwd}">${dirName}</span>${branchHtml}`;
+    header.innerHTML = `<span class="ft-header-label" data-tooltip="Click to change path" title="${_escHtml(session.cwd).replace(/"/g, '&quot;')}">${_escHtml(dirName)}</span>${branchHtml}`;
 
     // Wire header label click → inline path editor
     header.querySelector('.ft-header-label').addEventListener('click', (e) => {
@@ -6980,7 +6996,7 @@ async function toggleFileTree(sidebar, session) {
 
     renderFileItems(tree, originalItems, session.cwd, 0, session);
   } catch (err) {
-    sidebar.innerHTML = `<div class="ft-empty">Error: ${err.message}</div>`;
+    sidebar.innerHTML = `<div class="ft-empty">Error: ${_escHtml(String(err?.message || err))}</div>`;
   }
 }
 
@@ -7001,7 +7017,7 @@ function renderFileItems(container, items, parentPath, depth, session) {
     const gitBadge = item.git ? `<span class="ft-git-badge" data-tooltip="${item.git}">${GIT_STATUS_LABEL[item.git] || '?'}</span>` : '';
 
     if (item.type === 'dir') {
-      row.innerHTML = `<span class="ft-chevron">${SVG_CHEVRON}</span><span class="ft-icon">${SVG_DIR}</span><span class="ft-name">${item.name}</span>${gitBadge}`;
+      row.innerHTML = `<span class="ft-chevron">${SVG_CHEVRON}</span><span class="ft-icon">${SVG_DIR}</span><span class="ft-name">${_escHtml(item.name)}</span>${gitBadge}`;
       row.dataset.path = fullPath;
       row.dataset.expanded = 'false';
 
@@ -7045,7 +7061,7 @@ function renderFileItems(container, items, parentPath, depth, session) {
         }
       });
     } else {
-      row.innerHTML = `<span class="ft-chevron-spacer"></span><span class="ft-icon">${SVG_FILE}</span><span class="ft-name">${item.name}</span>${gitBadge}`;
+      row.innerHTML = `<span class="ft-chevron-spacer"></span><span class="ft-icon">${SVG_FILE}</span><span class="ft-name">${_escHtml(item.name)}</span>${gitBadge}`;
       row.dataset.path = fullPath;
 
       // Click file → type path into terminal
@@ -7076,9 +7092,9 @@ function renderSearchResults(container, items, session) {
     // Show relative path — highlight the filename part
     const parts = item.name.split('/');
     const fileName = parts.pop();
-    const dirPath = parts.length ? `<span class="ft-search-path">${parts.join('/')}/</span>` : '';
+    const dirPath = parts.length ? `<span class="ft-search-path">${_escHtml(parts.join('/'))}/</span>` : '';
 
-    row.innerHTML = `<span class="ft-icon">${icon}</span>${dirPath}<span class="ft-name">${fileName}</span>`;
+    row.innerHTML = `<span class="ft-icon">${icon}</span>${dirPath}<span class="ft-name">${_escHtml(fileName)}</span>`;
 
     const fullPath = session.cwd.replace(/[\\/]$/, '') + '/' + item.name;
     row.dataset.path = fullPath;
@@ -7235,7 +7251,7 @@ async function openBranchPicker(sidebar, session, anchorEl) {
     for (const branch of data.branches) {
       const item = document.createElement('button');
       item.className = `ft-branch-item${branch === data.current ? ' current' : ''}`;
-      item.innerHTML = `<span class="ft-branch-item-name">${branch}</span>${branch === data.current ? '<span class="ft-branch-item-check">&#10003;</span>' : ''}`;
+      item.innerHTML = `<span class="ft-branch-item-name">${_escHtml(branch)}</span>${branch === data.current ? '<span class="ft-branch-item-check">&#10003;</span>' : ''}`;
 
       item.addEventListener('click', async (e) => {
         e.stopPropagation();
@@ -7246,7 +7262,7 @@ async function openBranchPicker(sidebar, session, anchorEl) {
 
         // Show loading state
         item.classList.add('switching');
-        item.innerHTML = `<span class="ft-branch-item-name">${branch}</span><span class="ft-branch-item-check">...</span>`;
+        item.innerHTML = `<span class="ft-branch-item-name">${_escHtml(branch)}</span><span class="ft-branch-item-check">...</span>`;
 
         try {
           const result = await checkoutTerminalBranch(session.cwd, branch);
@@ -7270,7 +7286,7 @@ async function openBranchPicker(sidebar, session, anchorEl) {
           }
         } catch (err) {
           item.classList.remove('switching');
-          item.innerHTML = `<span class="ft-branch-item-name">${branch}</span><span class="ft-branch-item-check" style="color:#ff5252">!</span>`;
+          item.innerHTML = `<span class="ft-branch-item-name">${_escHtml(branch)}</span><span class="ft-branch-item-check" style="color:#ff5252">!</span>`;
           writeGitOutput('error', err.message || 'Checkout failed');
         }
       });

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

@@ -200,10 +200,17 @@ function openTrashPanel() {
     renderTrashList();
   });
 
-  // Fetch and render
+  // The trash as last read (at start-up, after every change) paints at once; the read below brings it up to
+  // date in place, at the list's scroll position, and only when it changed.
+  const kept = trashItems.length ? JSON.stringify(trashItems) : null;
+  if (kept) { renderTrashFilters(); renderTrashList(); }
   fetchTrashItems().then(() => {
+    if (kept && JSON.stringify(trashItems) === kept) return;
+    const list = $('tw-list');
+    const scroll = list ? list.scrollTop : 0;
     renderTrashFilters();
     renderTrashList();
+    if (kept && list && list.isConnected) list.scrollTop = scroll;
   });
 }
 

package/neural-interface/public/shared/ui-tutorial-steps.js

@@ -74,7 +74,9 @@ export const ONBOARDING_STEPS = [
 //   targets  ordered alternatives, [selector, copyKey = 'body', lastSelector?]. The first one on
 //            screen is annotated and its copy shown; `lastSelector` widens the outline to a run
 //            of controls. None on screen: the note stays, with the navigation.
-//   menu     a menubar dropdown opened while the step shows (closed again after).
+//   menu     a menubar dropdown opened while the step shows (closed again after); an object
+//            names it per variant ({ '3d': 'apps' }: none in the other).
+//   submenu  a submenu of that dropdown opened too, by its data-submenu name, same forms as `menu`.
 //   panel    'assistant' shows the Assistant panel for the step when that starts nothing
 //            (see assistantPanelPeekable); otherwise the last target, its button, is used.
 //   copy     per-variant copy key for the first target ({ '2d': 'body2d' }).
@@ -88,14 +90,16 @@ const TOOLS_TOGGLE = ['#topright-tools-btn'];
 
 export const FEATURE_STEPS = [
   { id: 'explain-memory-explorer', chapter: 'memory', targets: [['#topright-memory-explorer-btn'], TOOLS_TOGGLE] },
-  { id: 'explain-graph', chapter: 'memory', copy: { '2d': 'body2d' }, targets: [['[data-menu="graph"] > .menubar-label']] },
+  // 3D: the Map submenu of Apps. 2D: the Graph menu.
+  { id: 'explain-graph', chapter: 'memory', menu: { '3d': 'apps' }, submenu: { '3d': 'map' }, copy: { '2d': 'body2d' },
+    targets: [['#menu-map-label', 'body', '#menu-map-rebuild'], ['[data-menu="graph"] > .menubar-label', 'body2d']] },
   { id: 'explain-focus', chapter: 'workspace', targets: [['#wb-toolbar'], ['#titlebar-viz-toggle', 'graph']] },
   { id: 'explain-workspaces', chapter: 'workspace', targets: [['#ws-indicator'], TOOLS_TOGGLE] },
   { id: 'explain-terminals', chapter: 'tools', menu: 'apps', targets: [['#menu-terminal-claude', 'body', '#menu-terminal-opencode']] },
   { id: 'explain-browser', chapter: 'tools', menu: 'apps', targets: [['#menu-terminal-browser']] },
   { id: 'explain-side-panel', chapter: 'tools', targets: [['#topright-claude-panel-btn', 'body', '#topright-opencode-panel-btn']] },
   { id: 'explain-automations', chapter: 'automation', menu: 'automations', targets: [['#menu-open-automation-studio']] },
-  { id: 'explain-schedules', chapter: 'automation', menu: 'automations', targets: [['#menu-automations-schedules']] },
+  { id: 'explain-schedules', chapter: 'automation', targets: [['#menubar-schedules-btn']] },
   { id: 'assistant-start', chapter: 'assistant', panel: 'assistant', targets: [[`${ACTIVE_TAB} .asst-input`], ASSISTANT_BUTTON] },
   { id: 'assistant-tools', chapter: 'assistant', panel: 'assistant', targets: [[`${ACTIVE_BAR} .asst-computer-toggle`], ASSISTANT_BUTTON] },
   { id: 'assistant-route', chapter: 'assistant', panel: 'assistant', targets: [[`${ACTIVE_BAR} .asst-route-chip`], ASSISTANT_BUTTON] },