synabun 2.0.7 → 2.0.10

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

@@ -14,8 +14,8 @@ import { t } from './i18n.js';
 import { registerAction } from './ui-keybinds.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
 import { createAssistantHosts, describeBrainFallback } from './assistant/asst-hosts.js';
-import { createAssistantSession, getAssistantSession, listAssistantSessions } from './assistant/asst-api.js';
-import { providerShortLabel, readStoredBrain } from './assistant/asst-state.js';
+import { createAssistantSession, getAssistantSession, listAssistantSessions, removeAssistantSession } from './assistant/asst-api.js';
+import { providerShortLabel, readStoredBrain, tabStorageKey } from './assistant/asst-state.js';
 
 /** Guests need the terminal permission for the Assistant, in either host. */
 export function assistantBlocked() {
@@ -30,7 +30,7 @@ function brainFallbackText(fallback) {
 }
 
 const hosts = createAssistantHosts({
-  api: { list: listAssistantSessions, get: getAssistantSession, create: createAssistantSession },
+  api: { list: listAssistantSessions, get: getAssistantSession, create: createAssistantSession, remove: removeAssistantSession },
   isBlocked: assistantBlocked,
   toast: (text) => showGuestToast(text),
   storedBrain: () => readStoredBrain(storage),
@@ -48,6 +48,11 @@ export const noteAssistantFocus = (sessionId, hostId) => hosts.noteFocus(session
 
 let _initialized = false;
 
+/** A removed session's per-tab UI state (composer draft, dock, route mode): written by its tab as it closes, then dropped. */
+function forgetTabState(sessionId) {
+  try { storage.removeItem(tabStorageKey(sessionId)); } catch { /* storage unavailable */ }
+}
+
 /** Bus events + keybinds for both hosts. Idempotent: initNavbar and initTerminal both call it. */
 export function initAssistant() {
   if (_initialized) return;
@@ -60,8 +65,24 @@ export function initAssistant() {
     floating: data?.floating,
     prompt: data?.prompt,
   }));
-  on('assistant:resume', (data) => {
-    if (data?.sessionId) hosts.open({ resume: data.sessionId, host: data?.host || null, floating: data?.floating });
+  // `replaces`: the session the user left by picking this one, when nobody chatted in it: it goes.
+  on('assistant:resume', async (data) => {
+    if (!data?.sessionId) return;
+    const res = await hosts.open({ resume: data.sessionId, host: data?.host || null, floating: data?.floating });
+    if (res && data.replaces && data.replaces !== data.sessionId) hosts.discard(data.replaces);
+  });
+  // Sessions menu → Remove. `done(result)` tells the menu that asked how it went.
+  on('assistant:remove', (data) => {
+    if (!data?.sessionId) return;
+    hosts.remove(data.sessionId, { host: data.host || null, fresh: data.fresh === true, brain: data.brain || null })
+      .then((result) => {
+        if (result?.ok) forgetTabState(data.sessionId);
+        try { data.done?.(result); } catch { /* the menu is gone */ }
+      });
+  });
+  // A session the server no longer has: its tab closes (a fresh one in its place when it was showing unused).
+  on('assistant:gone', (data) => {
+    if (data?.sessionId) hosts.gone(data.sessionId, { host: data.host || null, fresh: data.fresh === true, brain: data.brain || null }).finally(() => forgetTabState(data.sessionId));
   });
   on('assistant:toggle', () => hosts.toggle());
   // Notification clicks (toasts and OS banners) — see ui-notifications _getNotifMeta.
@@ -71,6 +92,7 @@ export function initAssistant() {
   on('sync:assistant:session-ended', (msg) => {
     const id = msg?.sessionId || msg?.session?.id || msg?.id;
     if (id) hosts.ended(id);
+    if (id && msg?.destroyed) forgetTabState(id); // removed for good: its tab's UI state goes too
   });
   registerAction('launch-assistant', () => hosts.openOrFocus());
   registerAction('toggle-assistant', () => hosts.toggle());

package/neural-interface/public/shared/ui-automation-studio.js

@@ -9,6 +9,7 @@ import { storage } from './storage.js';
 import { initI18n, isReady as i18nReady, t } from './i18n.js';
 import { fetchStyleGuideProjects, fetchStyleGuideSummary } from './api.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
+import { registerLaunchPrefetch } from './launch-prefetch.js';
 import {
   getNativeLoopRouterClaimToken,
   getNativeLoopRouterWindowId,
@@ -90,6 +91,9 @@ let _prevLoopActive = false;
 
 // Cleanup: stored references for document-level listeners so closePanel() can remove them
 let _docListeners = [];
+// What the last read found (templates, folders, the active loop, agents): a later open paints from it at once
+// and reads it again behind it.
+let _keptData = null;
 
 // Detail/editor state
 let _metaDirty = false;
@@ -283,9 +287,9 @@ function renderMcpProfileChips(presets, selected) {
     return renderLaunchSelect('mcp', options, selected);
   }
   return entries.map(([id, p]) => `
-    <button class="as-launch-mcp-profile${id === selected ? ' active' : ''}" data-mcp-profile="${id}">
-      <span class="as-launch-mcp-profile-name">${p.label || id}</span>
-      <span class="as-launch-mcp-profile-tools">${p.tools} tools</span>
+    <button class="as-launch-mcp-profile${id === selected ? ' active' : ''}" data-mcp-profile="${_escLaunch(id)}">
+      <span class="as-launch-mcp-profile-name">${_escLaunch(p.label || id)}</span>
+      <span class="as-launch-mcp-profile-tools">${_escLaunch(p.tools)} tools</span>
     </button>
   `).join('');
 }
@@ -1187,9 +1191,9 @@ function renderModelChips(profileId, selectedModel) {
     return renderLaunchSelect('model', models, selectedModel, { groupByDesc: profileId === 'opencode' });
   }
   return models.map(m => `
-    <button class="as-launch-model${modelMatchesSelector(m, selectedModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-model="${modelSelectorValue(m)}">
-      <span class="as-launch-model-name">${m.label}</span>
-      <span class="as-launch-model-desc">${m.desc}</span>
+    <button class="as-launch-model${modelMatchesSelector(m, selectedModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-model="${_escLaunch(modelSelectorValue(m))}">
+      <span class="as-launch-model-name">${_escLaunch(m.label)}</span>
+      <span class="as-launch-model-desc">${_escLaunch(m.desc)}</span>
     </button>
   `).join('');
 }
@@ -1299,7 +1303,10 @@ function wireLaunchSelect(root, type, onChange) {
       });
     });
 
-    document.addEventListener('click', e => { if (!sel.contains(e.target)) close(); });
+    // Outside click closes it; removed with the panel (closePanel) like the studio's other document listeners.
+    const onOutside = e => { if (!sel.contains(e.target)) close(); };
+    document.addEventListener('click', onOutside);
+    _docListeners.push(['click', onOutside]);
   });
 }
 
@@ -1721,6 +1728,8 @@ function buildTemplateCommand(template) {
 // ═══════════════════════════════════════════
 
 export function initAutomationStudio() {
+  // Launch: the studio's lists are read once the page has painted (launch-prefetch.js), so the first open paints at once.
+  registerLaunchPrefetch('automation-studio', prefetchAutomationStudio, { order: 72 });
   on('automations:open', (opts) => openPanel(opts || {}));
   on('automations:open-wizard', () => { openPanel(); });
   on('automations:import', () => { openPanel().then(() => triggerImport()); });
@@ -1759,15 +1768,44 @@ async function openPanel(opts = {}) {
   _panel.style.top = Math.max(48, (window.innerHeight - 520) / 2) + 'px';
 
   wirePanel();
-  await loadData();
+  const kept = _keptData;
+  if (kept) {
+    // The studio as last read paints at once; it is read again behind it and the sidebar follows in place.
+    _templates = kept.templates; _folders = kept.folders; _activeLoop = kept.activeLoop; _agents = kept.agents;
+    updateSidebarFooter();
+  } else {
+    await loadData();
+  }
   if (opts.templateId) {
     const tpl = _templates.find(t => t.id === opts.templateId);
     if (tpl) switchToDetail(tpl); else renderView();
   } else {
     renderView();
   }
-  requestAnimationFrame(() => { _backdrop.classList.add('open'); _panel.classList.add('open'); });
+  requestAnimationFrame(() => { _backdrop?.classList.add('open'); _panel?.classList.add('open'); });
   startPolling();
+  if (kept) refreshDataInPlace();
+}
+
+// The data read again behind a studio painted from the kept one: the sidebar list is redrawn when the templates
+// or folders changed (an open template, the wizard and the editors keep what the user is doing).
+async function refreshDataInPlace() {
+  const before = JSON.stringify([_templates, _folders]);
+  await loadData();
+  if (!_panel) return;
+  if (JSON.stringify([_templates, _folders]) === before) return;
+  const list = $('as-template-list');
+  const scroll = list ? list.scrollTop : 0;
+  renderSidebar();
+  const count = $('as-total-count');
+  if (count) count.textContent = `${PRESET_TEMPLATES.length + _templates.length}`;
+  if (list && list.isConnected) list.scrollTop = scroll;
+}
+
+/** Launch prefetch: the studio's data read once, so the first open paints at once (nothing is drawn here). */
+export function prefetchAutomationStudio() {
+  if (_keptData || _panel || (isGuest() && !hasPermission('automations'))) return Promise.resolve();
+  return loadData().catch(() => {});
 }
 
 function closePanel() {
@@ -2326,11 +2364,15 @@ async function promptCreateFolder() {
 // ═══════════════════════════════════════════
 
 async function loadData() {
-  try { _templates = await fetchLoopTemplates(); } catch { _templates = []; }
-  try { _folders = await fetchLoopFolders(); } catch { _folders = []; }
-  try { _activeLoop = await fetchActiveLoop(); } catch { _activeLoop = null; }
+  // One round trip for the three lists (they were asked one after another), then the agents.
+  const [templates, folders, active] = await Promise.allSettled([fetchLoopTemplates(), fetchLoopFolders(), fetchActiveLoop()]);
+  _templates = templates.status === 'fulfilled' ? templates.value : [];
+  _folders = folders.status === 'fulfilled' ? folders.value : [];
+  _activeLoop = active.status === 'fulfilled' ? active.value : null;
   await refreshAgents();
-  updateSidebarFooter();
+  if (_panel) updateSidebarFooter();
+  // Kept only when the templates answered (a failed read must not paint an empty studio next time).
+  if (templates.status === 'fulfilled') _keptData = { templates: _templates, folders: _folders, activeLoop: _activeLoop, agents: _agents };
 }
 
 function startPolling() {
@@ -3754,16 +3796,14 @@ async function refreshAgents() {
   try {
     const data = await fetchAgents();
     _agents = data?.agents || [];
-    // Update local output buffers with any text we haven't captured via WebSocket
-    for (const a of _agents) {
-      if (!_agentOutputs[a.id] && a.textLength > 0) {
-        // Fetch full details to get textOutput
-        try {
-          const full = await fetchAgent(a.id);
-          if (full?.textOutput) _agentOutputs[a.id] = full.textOutput;
-        } catch {}
-      }
-    }
+    // Update local output buffers with any text we haven't captured via WebSocket (together, not one by one)
+    await Promise.all(_agents.filter(a => !_agentOutputs[a.id] && a.textLength > 0).map(async (a) => {
+      // Fetch full details to get textOutput
+      try {
+        const full = await fetchAgent(a.id);
+        if (full?.textOutput) _agentOutputs[a.id] = full.textOutput;
+      } catch {}
+    }));
   } catch {}
 }
 
@@ -4742,9 +4782,9 @@ function renderSchedulesMain() {
     ? (qtModels.length > LAUNCH_CHIP_MAX
         ? renderLaunchSelect('qt-model', qtModels, qtCurrentModel, { groupByDesc: qtProfile === 'opencode' })
         : qtModels.map(m => `
-        <button class="as-launch-model${modelMatchesSelector(m, qtCurrentModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-action="qt-model" data-model="${modelSelectorValue(m)}">
-          <span class="as-launch-model-name">${m.label}</span>
-          <span class="as-launch-model-desc">${m.desc}</span>
+        <button class="as-launch-model${modelMatchesSelector(m, qtCurrentModel) ? ' active' : ''}${m.tier ? ` as-launch-model--${m.tier}` : ''}" data-action="qt-model" data-model="${_escLaunch(modelSelectorValue(m))}">
+          <span class="as-launch-model-name">${_escLaunch(m.label)}</span>
+          <span class="as-launch-model-desc">${_escLaunch(m.desc)}</span>
         </button>
       `).join(''))
     : `<span class="as-launch-no-models">${esc(dynamicModelEmptyText(qtProfile))}</span>`;
@@ -4942,7 +4982,7 @@ function renderScheduleEditorMain() {
     </div>`).join('');
 
   const templateOptions = allTemplates.map(t =>
-    `<option value="${t.id}"${(s?.templateId === t.id) ? ' selected' : ''}>${esc(t.name)} (${t.category})</option>`
+    `<option value="${esc(t.id)}"${(s?.templateId === t.id) ? ' selected' : ''}>${esc(t.name)} (${esc(t.category)})</option>`
   ).join('');
 
   // Reorder: Mon(1)–Sat(6) then Sun(0) so 2-column grid pairs weekdays nicely

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

@@ -8,6 +8,7 @@ import { state, emit, on } from './state.js';
 import { KEYS } from './constants.js';
 import { storage } from './storage.js';
 import { catColor } from './colors.js';
+import { escapeHtml } from './utils.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -120,7 +121,7 @@ export function renderBookmarks() {
     item.innerHTML = `
       <div class="dropdown-item-dot" style="background:${color}"></div>
       <div class="dropdown-item-text">
-        <div class="dropdown-item-title">${b.title}</div>
+        <div class="dropdown-item-title">${escapeHtml(String(b.title ?? ''))}</div>
         <div class="dropdown-item-sub">${b.category}</div>
       </div>
       <button class="icon-btn icon-btn--danger" style="width:22px;height:22px;font-size:13px;border:none" data-tooltip="Remove">&times;</button>

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

@@ -24,6 +24,7 @@ import { requestGeneratedSessionTitle } from './session-title.js';
 import { wireFileLinks } from './ui-file-links.js';
 import { WORKER_END_CLASS, backToAssistant, buildWorkerEndCard, endWorkerRunOnClose, forgetWorkerEnd, trackWorkerEnd, updateWorkerEndBusy } from './ui-worker-end.js';
 import { isDispatchedRun, isEndOfRunAbort } from './worker-end.js';
+import { runAwaitsAnswer } from './sidepanel-session-status.js';
 // ── cp/ feature modules (SDK-engine CLI parity: diffs, agents, bash, perms, statusline) ──
 import { setCpCtx } from './cp/cp-ctx.js';
 import { buildDiffCard, buildDiffPreviewEl, finalizeDiffCard } from './cp/cp-diff.js';
@@ -46,7 +47,8 @@ import { historyHasResultSupport, historyResultsNotice, snapshotWantsResults, fu
 import { CP_STYLES } from './cp/cp-styles.js';
 import { TEMPORARY_CAPABILITY, keepsNothing, chooseTemporary, applyTemporary, temporaryRefusal, endTemporary, leaveTemporary, tabAfterTemporary, persistableTabs, temporaryBlocks, reattaches } from './cp/cp-temporary.js';
 import { paintTemporary } from './cp/cp-temporary-view.js';
-import { renderMarkdown, scrubStoredHtml } from './cp/cp-markdown.js';
+import { renderMarkdown } from './cp/cp-markdown.js';
+import { sanitizeStoredHtml } from './assistant/asst-sanitize.js';
 import { escapeHtml, classToken } from './cp/cp-markdown.js';
 import { rehydrateStoredTranscript } from './cp/cp-rehydrate.js';
 import { compactHolds, compactQueue, isCompactCommand, newConversation, nextQueued, ownsQueued, queuedRefusal, restoredQueue, QUEUED_REFUSAL_LINES } from './cp/cp-compose.js';
@@ -178,7 +180,7 @@ let _cliBanner = null;
 let _marked = null;
 (async () => {
   try {
-    const m = await import('https://cdn.jsdelivr.net/npm/marked@14/lib/marked.esm.js').catch(() => null);
+    const m = await import('/vendor/marked/marked-14.1.4.esm.js').catch(() => null);
     if (m) {
       _marked = m.marked || m.default;
       if (_marked?.setOptions) _marked.setOptions({ breaks: true, gfm: true });
@@ -1905,10 +1907,44 @@ function injectStyles() {
       background: rgba(22, 22, 26, 0.95);
       z-index: 3;
       box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,255,255,0.06);
-    }
+      /* A query container measured in controls: 1em is one header button (24px docked, the
+         window's control size when detached, which follows the font scale), so the thresholds
+         below hold at any scale. Nothing in the row inherits it; the session menu takes the
+         panel's back. */
+      container: cp-header / inline-size;
+      font-size: 24px;
+    }
+    .sp-sidepanel.sp-floating > .cp-header { font-size: var(--fw-header-control-size); }
+    .cp-header > .cp-session-menu { font-size: 1rem; }
     .cp-header-actions {
       display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0;
     }
+    /* The header buttons never shrink. The account menu's trigger (account-menu.js) is the one
+       piece of the actions that gives way, once the session name is at its readable 88px, down to
+       its compact 64px, and truncates. */
+    .cp-header-actions > * { flex-shrink: 0; }
+    .cp-header-actions:has(> .acct-menu-trigger) { flex-shrink: 1; min-width: 0; }
+    .cp-header-actions > .acct-menu-trigger { flex-shrink: 1; }
+    /* Narrow headers, in order: the trigger stays at its compact 64px and the name goes from 88px
+       down to its caret; then the trigger is hidden. Room counted in controls (em) plus px: docked,
+       the pencil and six buttons are 7em with 21px of gaps; detached, the move handle makes 8em,
+       the window's 6px gaps 39px, the name's floor is 1em. Thresholds: name + 64px trigger + that row. */
+    @container cp-header (width < calc(7em + 173px)) {
+      .claude-panel:not(.sp-floating) > .cp-header .cp-session-btn { flex: 1 1 0; }
+      .claude-panel:not(.sp-floating) > .cp-header > .cp-header-actions { flex-shrink: 0; }
+      .claude-panel:not(.sp-floating) > .cp-header .acct-menu-trigger { flex: 0 0 64px; width: 64px; }
+    }
+    @container cp-header (width < calc(7em + 117px)) {
+      .claude-panel:not(.sp-floating) > .cp-header .acct-menu-trigger { display: none; }
+    }
+    @container cp-header (width < calc(8em + 191px)) {
+      .claude-panel.sp-floating > .cp-header .cp-session-btn { flex: 1 1 0; }
+      .claude-panel.sp-floating > .cp-header > .cp-header-actions { flex-shrink: 0; }
+      .claude-panel.sp-floating > .cp-header .acct-menu-trigger { flex: 0 0 64px; width: 64px; }
+    }
+    @container cp-header (width < calc(9em + 103px)) {
+      .claude-panel.sp-floating > .cp-header .acct-menu-trigger { display: none; }
+    }
     .cp-header-btn {
       display: flex; align-items: center; justify-content: center;
       width: 24px; height: 24px; border-radius: 7px;
@@ -1934,14 +1970,18 @@ function injectStyles() {
       font-size: 11px; font-family: 'JetBrains Mono', monospace;
       cursor: pointer; padding: 5px 10px; border-radius: 8px 0 0 8px;
       transition: background 0.15s, color 0.15s;
-      max-width: 100%; overflow: hidden;
+      /* The session name keeps a readable 88px (about 8 characters, or its own width if shorter)
+         and gives way first above that: it grows only into the room the pencil and the actions
+         leave, so a long name never pushes them. Narrower, the container queries above let it go
+         down to 32px (the caret). */
+      flex: 1 0 88px; min-width: 32px; max-width: max-content; overflow: hidden;
     }
     .cp-session-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); }
     .cp-session-btn .cp-session-label {
-      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
     .cp-session-btn .cp-dd-arrow {
-      font-size: 9px; padding: 4px 6px; margin: -4px -6px -4px 0;
+      flex-shrink: 0; font-size: 9px; padding: 4px 6px; margin: -4px -6px -4px 0;
       border-radius: 0 6px 6px 0; cursor: pointer;
       transition: background 0.15s, color 0.2s, transform 0.2s;
     }
@@ -1956,6 +1996,7 @@ function injectStyles() {
       -webkit-tap-highlight-color: transparent;
       touch-action: manipulation;
       flex-shrink: 0;
+      margin-right: 3px; /* the actions' own gap, kept when the name fills the row */
     }
     .cp-header-rename-btn:hover { color: rgba(100,160,255,0.95); background: rgba(100,160,255,0.14); }
     .cp-header-rename-btn:active { transform: scale(0.92); transition-duration: 0.06s; }
@@ -2299,6 +2340,11 @@ function injectStyles() {
     .cp-session-pill.cp-pill-running .term-minimized-pill-icon { color: rgba(212, 162, 127, 1); }
     .cp-session-pill:hover .term-minimized-pill-icon { color: rgba(212, 162, 127, 0.85); }
     .cp-session-pill .term-minimized-pill-icon svg { width: 12px; height: 12px; }
+    /* A session that waits on you (a permission, a plan, an MCP server's request, a question): the
+       warn hairline and mark of the Assistant's and a detached window's pills, in place of the
+       working look (paintPillState). */
+    .cp-session-pill.cp-pill-attention { border-color: color-mix(in srgb, var(--accent-orange, #FFB74D) 42%, transparent); }
+    .cp-session-pill.cp-pill-attention .term-minimized-pill-icon { color: var(--accent-orange, #FFB74D); }
     .cp-session-pill.cp-pill-enter {
       animation: cp-pill-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     }
@@ -2870,6 +2916,7 @@ function newTabState(sessionId = null, label = 'New chat', id = null) {
     mcpServers: [],           // from system/init + mcp_status events
     automationRunId: null,
     automationActive: false,
+    automationAwaits: false,  // the run's turn ended asking the user (runAwaitsAnswer): its pill needs you
     automationOwnerId: null,
     releasedRunId: null,      // the ended run this tab showed before the user continued it by hand
   };
@@ -3162,6 +3209,9 @@ function _createTrayPill(tab) {
     if (idx >= 0) closeTab(idx);
   });
   pill.style.display = 'none'; // Hidden by default; renderPills() controls visibility
+  // A pill made after the tab started working (a tray that was not there yet) starts out working too,
+  // or needing you.
+  paintPillState(pill, tab);
   tray.appendChild(pill);
   return pill;
 }
@@ -3181,8 +3231,10 @@ function _renderPillsNow() {
   const panelOpen = _visible;
   for (let i = 0; i < _tabs.length; i++) {
     const tab = _tabs[i];
-    if (!tab.pillEl) tab.pillEl = _createTrayPill(tab);
+    if (!tab.pillEl?.isConnected) tab.pillEl = _createTrayPill(tab);
     if (!tab.pillEl) continue;
+    // Every pass says it again: a re-render never leaves a working tab's pill idle.
+    paintPillState(tab.pillEl, tab);
     const isActive = i === activeIdx;
     const shouldShow = !isActive || !panelOpen;
     const wasHidden = tab.pillEl.style.display === 'none';
@@ -3208,15 +3260,52 @@ function updatePillLabel(tab) {
   if (lbl) lbl.textContent = tab.label;
 }
 
+/**
+ * A tab works while its turn runs, and also once the turn ended while background work it started
+ * still runs (agents, shells, workflows: the CLI's own live list, non-ambient, the statusline's count):
+ * the session reports back when they end, so its pill keeps moving, like their cards in the transcript.
+ */
+function tabWorking(tab) {
+  return !!tab?.running || (Array.isArray(tab?.backgroundWork) && tab.backgroundWork.length > 0);
+}
+
+/**
+ * A tab needs you while its session waits on your answer: a permission, a plan approval or an MCP
+ * server's request (the card on screen, and the ones queued behind it), or a question; and, for a
+ * dispatched worker, while its turn ended asking you something (the run's outcome: automationAwaits).
+ */
+function tabNeedsYou(tab) {
+  return !!(tab?._activePerm || tab?._permQueue?.length || tab?.pendingAskRequestId || tab?.automationAwaits);
+}
+
+/** What a tab's pill says: it needs you > it works > it rests (read for a detached window's pill too). */
+function paintPillState(pill, tab) {
+  const needsYou = tabNeedsYou(tab);
+  pill.classList.toggle('cp-pill-attention', needsYou);
+  pill.classList.toggle('cp-pill-running', !needsYou && tabWorking(tab));
+}
+
+// Whether each tab was saved needing you: a change is written at once, for the placeholder a reload
+// shows and the pill of a detached window that has not loaded yet (ui-sidepanel-tray.js).
+const _needsYouSaved = new WeakMap();
 function updatePillRunning(tab) {
-  if (tab.pillEl) tab.pillEl.classList.toggle('cp-pill-running', tab.running);
+  if (tab.pillEl) paintPillState(tab.pillEl, tab);
+  const needsYou = tabNeedsYou(tab);
+  if ((_needsYouSaved.get(tab) || false) === needsYou) return;
+  _needsYouSaved.set(tab, needsYou);
+  saveTabs();
 }
 
 function saveTabs() {
   try {
     // A temporary tab is never written: not the tab, its label, its queue or its session id.
+    // `backgroundWork`: how many background agents and shells it still ran (tabWorking). A tab whose turn
+    // ended while they run is working too: after a reload its placeholder says so and the panel loads to ask
+    // (ui-sidepanel-tray.js). Never restored: the reattach's live list says what still runs. `needsYou`:
+    // a permission or a question waited on the user (tabNeedsYou): its placeholder says so and the panel
+    // loads to ask, and the reattach brings the card back.
     const kept = persistableTabs(_tabs, _activeTabIdx);
-    const localTabs = kept.tabs.map(t => ({ id: t.id, sessionId: t.sessionId, label: t.label, titleState: t.titleState === 'generating' ? 'default' : (t.titleState || 'default'), sessionCost: t.sessionCost || 0, running: t.running || false, project: t.project || '', model: t.model || '', effort: t.effort || 'off', planMode: t.planMode || false, ...savedMode(t), toolPolicy: t.toolPolicy || 'full', accountId: t.accountId || '', session: normalizeSession(t.session), transcriptAt: t.transcriptAt || null, planFilePath: t.planFilePath || '', conversation: t.conversation || '', queue: t.queue || [], queuePaused: t.queuePaused || false, automationRunId: t.automationRunId || null, automationActive: !!t.automationActive, automationOwnerId: t.automationOwnerId || null, releasedRunId: t.releasedRunId || null }));
+    const localTabs = kept.tabs.map(t => ({ id: t.id, sessionId: t.sessionId, label: t.label, titleState: t.titleState === 'generating' ? 'default' : (t.titleState || 'default'), sessionCost: t.sessionCost || 0, running: t.running || false, backgroundWork: Array.isArray(t.backgroundWork) ? t.backgroundWork.length : 0, needsYou: tabNeedsYou(t), project: t.project || '', model: t.model || '', effort: t.effort || 'off', planMode: t.planMode || false, ...savedMode(t), toolPolicy: t.toolPolicy || 'full', accountId: t.accountId || '', session: normalizeSession(t.session), transcriptAt: t.transcriptAt || null, planFilePath: t.planFilePath || '', conversation: t.conversation || '', queue: t.queue || [], queuePaused: t.queuePaused || false, automationRunId: t.automationRunId || null, automationActive: !!t.automationActive, automationOwnerId: t.automationOwnerId || null, releasedRunId: t.releasedRunId || null }));
     const localRunIds = new Set(localTabs.map((tab) => tab.automationRunId).filter(Boolean));
     let foreignAutomationTabs = [];
     try {
@@ -4511,9 +4600,9 @@ function flushAllSessionSnapshots() {
 function renderStoredSession(snapshot, $msgs, tab) {
   const norm = _normalizeSnapshotEntry(snapshot);
   if (!norm || !$msgs) return false;
-  // A snapshot comes back from storage and may predate the sanitiser: nothing
-  // that can run or load code is put back (cp/cp-markdown.js).
-  $msgs.replaceChildren(scrubStoredHtml(norm.html));
+  // A snapshot comes back from storage and may predate the sanitiser: it is rebuilt
+  // from the stored-transcript allowlist every panel uses (asst-sanitize.js).
+  $msgs.replaceChildren(sanitizeStoredHtml(norm.html));
   // Restored DOM has no event handlers. Pending prompts (permission, plan, ask
   // cards) are stale and go, answered ones stay inert; the read-only actions
   // are wired again from what the markup saved: rewind (prompt uuid), the
@@ -5243,10 +5332,14 @@ function _setBackgroundWork(tab, tasks) {
   // reloaded while it ran) gets one, so /tasks can show and stop it.
   try { adoptLiveTasks(tab.tasks, tasks); } catch {}
   try { reconcileTasks(tab.tasks, tasks); } catch {}
+  const before = Array.isArray(tab.backgroundWork) ? tab.backgroundWork.length : 0;
   tab.backgroundWork = (Array.isArray(tasks) ? tasks : [])
     .filter(t => t && !t.ambient)
     .map(t => ({ id: t.task_id, type: t.task_type || '', description: t.description || '' }));
   if (tab === activeTab()) { try { renderStatusline(tab); } catch {} }
+  updatePillRunning(tab);
+  // Saved as it changes: a reload with only this left running loads the panel to ask (saveTabs).
+  if (tab.backgroundWork.length !== before) saveTabs();
 }
 
 function _processTabMsg(tab, msg) {
@@ -5304,6 +5397,7 @@ function _processTabMsg(tab, msg) {
       if (tab._pendingPlan?.requestId === msg.request_id) tab._pendingPlan = null;
       if (tab._activePerm) { tab._activePerm = false; _showNextPerm(tab); }
       else _flushMsgBuffer(tab);
+      updatePillRunning(tab);
       break;
     }
     case 'reattach_result': {
@@ -6846,6 +6940,7 @@ function sendAskAnswer(tab, questions, answers, annotations = null) {
   tab.pendingAskRequestId = null;
   tab.pendingAskToolUseId = null;
   tab.pendingAskBufferedAnswer = null;
+  updatePillRunning(tab); // answered: the pill no longer needs you
   // Flush BEFORE clearing askRenderedViaControl — buffered assistant events
   // must see the flag so buildAskFromToolUse returns a hidden placeholder
   // instead of rendering a duplicate card.
@@ -7361,6 +7456,7 @@ function handleControlRequest(tab, msg) {
   if (toolName === 'AskUserQuestion') {
     // AskUserQuestion: save the request_id — answer is sent via control_response when user picks an option
     tab.pendingAskRequestId = requestId;
+    updatePillRunning(tab); // the pill needs you
     // If tool_use block hasn't rendered the ask card yet, render from control_request input
     // Also check askRenderedViaControl to prevent duplicate cards from denial control_requests
     if (!tab.pendingAskToolUseId && !tab.askRenderedViaControl) {
@@ -8462,6 +8558,7 @@ function finishTab(tab, skipNotif) {
   if (tab.sessionId && tab._snapshotDirty) flushSessionSnapshotSave(tab);
   hideThinking(tab); setRunning(tab, false); tab._wasRunning = false; tab.currentMsgEl = null; tab.currentMsgId = null; tab.pendingAskToolUseId = null; tab.pendingAskRequestId = null; tab.pendingAskBufferedAnswer = null; tab.askRenderedViaControl = false; tab.sendStartedAt = null; tab._planContentCaptured = false; if (tab._stream?.mdTimer) clearTimeout(tab._stream.mdTimer); tab._stream = null;
   tab.currentActivity = null;
+  updatePillRunning(tab); // (its question went with the turn)
   if (tab === activeTab()) { try { renderStatusline(tab); } catch {} }
   if (tab.compacting) { tab.compacting = false; if (tab === activeTab()) _setCompactingUI(false); }
   tab._compactSentAt = 0; // a Compact the user started ends here too (cp-compose.js)
@@ -10308,6 +10405,14 @@ function applyClaudeVisibility(visible) {
 
 export function isClaudePanelOpen() { return _visible; }
 
+/**
+ * Boot the panel without showing it (ui-sidepanel-tray.js, when a tab saved while it worked comes back
+ * after a reload): its tabs reconnect and reattach, so their pills say what the sessions do now.
+ */
+export async function bootClaudePanel() {
+  await _ensureClaudePanelReady();
+}
+
 export function endHostedClaudeSessions() {
   while (_tabs.length) closeTab(_tabs.length - 1);
 }
@@ -10357,6 +10462,8 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
   tab.project = run.cwd || tab.project;
   tab.model = run.model || tab.model;
   tab.effort = run.effort || tab.effort;
+  // A warm worker whose turn ended on a question needs you, like one with a card up (setRunning repaints).
+  tab.automationAwaits = runAwaitsAnswer(run);
   setRunning(tab, running);
   updatePillLabel(tab);
   tab._automationIteration = run.currentIteration;
@@ -11605,6 +11712,13 @@ function wireEvents() {
   const $sessMenu = _panel.querySelector('#cp-session-menu');
   const $sessLabel = _panel.querySelector('.cp-session-label');
   let _sessClickTimer = null;
+  // The whole name as the chip's tooltip, for when the header shows only part of it. The label is
+  // written from many places (switch, rename, title, reset), so it follows the label itself.
+  const syncSessionTooltip = () => {
+    if (!$sessLabel.querySelector('.cp-rename-input')) $sessBtn.title = $sessLabel.textContent;
+  };
+  syncSessionTooltip();
+  new MutationObserver(syncSessionTooltip).observe($sessLabel, { childList: true, characterData: true, subtree: true });
 
   $sessBtn.addEventListener('click', (e) => {
     // Block menu toggle while rename input is active

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

@@ -6,6 +6,7 @@
 export {
   toggleCodexPanel,
   isCodexPanelOpen,
+  bootCodexPanel,
   attachCodexAutomation,
   detachCodexAutomation,
   handleCodexAutomationEvent,

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

@@ -12,7 +12,7 @@ import { updateMemory, deleteMemory, fetchMemory } from './api.js';
 import { KEYS } from './constants.js';
 import { storage } from './storage.js';
 import { catColor } from './colors.js';
-import { truncate, formatMemoryContent, exportMemoryAsMarkdown, rafThrottle } from './utils.js';
+import { truncate, formatMemoryContent, exportMemoryAsMarkdown, rafThrottle, escapeHtml } from './utils.js';
 import { t, getLocale } from './i18n.js';
 import { savePanelLayout, restorePanelLayout } from './ui-panels.js';
 import { sendSync as _sendSync, hasPermission, isGuest } from './ui-sync.js';
@@ -111,7 +111,7 @@ function showTagDeleteModal(tagName, onConfirm) {
   overlay.innerHTML = `
     <div class="tag-delete-modal">
       <div class="tag-delete-modal-title">Remove tag</div>
-      <div class="tag-delete-modal-tag">${tagName}</div>
+      <div class="tag-delete-modal-tag">${escapeHtml(tagName)}</div>
       <div class="tag-delete-modal-actions">
         <button class="action-btn action-btn--ghost tag-modal-cancel">Cancel</button>
         <button class="action-btn action-btn--danger tag-modal-confirm">Delete</button>
@@ -363,7 +363,7 @@ function openCategoryChangeModal(card, node) {
             <div class="cat-opt-dot" style="color:${catColor(cat)}; background:${catColor(cat)}"></div>
             <div class="cat-opt-info">
               <span class="cat-opt-name">${cat}</span>
-              ${desc ? `<span class="cat-opt-desc">${desc}</span>` : ''}
+              ${desc ? `<span class="cat-opt-desc">${escapeHtml(desc)}</span>` : ''}
             </div>
           </div>`;
       }
@@ -375,7 +375,7 @@ function openCategoryChangeModal(card, node) {
         <div class="cat-opt-dot" style="color:${catColor(cat)}; background:${catColor(cat)}"></div>
         <div class="cat-opt-info">
           <span class="cat-opt-name">${cat}</span>
-          ${desc ? `<span class="cat-opt-desc">${desc}</span>` : ''}
+          ${desc ? `<span class="cat-opt-desc">${escapeHtml(desc)}</span>` : ''}
         </div>
         ${isActive ? '<svg class="cat-opt-check" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>' : ''}
       </div>`;
@@ -863,7 +863,7 @@ export function openMemoryCard(node, savedPosition) {
     if (!value) return;
     const row = document.createElement('div');
     row.className = 'detail-meta-row';
-    row.innerHTML = `<span style="color:rgba(255,255,255,0.3)">${label}</span><span>${value}</span>`;
+    row.innerHTML = `<span style="color:rgba(255,255,255,0.3)">${label}</span><span>${escapeHtml(String(value))}</span>`;
     meta.appendChild(row);
   };
   addMeta('Project', p.project);
@@ -893,7 +893,7 @@ export function openMemoryCard(node, savedPosition) {
   const filesContent = q(card, 'files-content');
   if (p.related_files && p.related_files.length) {
     filesContent.innerHTML = p.related_files.map(f =>
-      `<div style="font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:12px;color:rgba(255,255,255,0.45);padding:2px 0">${f}</div>`
+      `<div style="font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:12px;color:rgba(255,255,255,0.45);padding:2px 0">${escapeHtml(String(f))}</div>`
     ).join('');
     filesDiv.style.display = '';
   } else {

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

@@ -1441,6 +1441,8 @@ export function initExplorer() {
   if (selectAllBtn) {
     selectAllBtn.addEventListener('click', () => {
       Object.keys(state.categoryMetadata).forEach(c => state.activeCategories.add(c));
+      // and the categories memories use without a registered one ("uncategorized" included), as the sidebar does
+      (state.allNodes || []).forEach(n => { if (n.payload?.category) state.activeCategories.add(n.payload.category); });
       cancelScheduledRemoval();
       emit('graph:refresh');
       emit('categories-changed');

package/neural-interface/public/shared/ui-file-links.js

@@ -65,6 +65,7 @@ const handlers = createFileLinkHandlers({
   say: fileLinkText,
   notify: showFileLinkNotice,
   follow: (anchor) => {
+    if (anchor.protocol !== 'http:' && anchor.protocol !== 'https:') return; // an address of this app, never a script link
     if (anchor.target === '_blank') window.open(anchor.href, '_blank', 'noopener,noreferrer');
     else window.location.assign(anchor.href);
   },