synabun 2.0.7 → 2.0.10

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

@@ -897,6 +897,7 @@ async function refreshSessions() {
     const fetchedAt = Date.now();
     loops = (loopRes.loops || []).map(l => ({ ...l, _fetchedAt: fetchedAt }));
     staleLoopCount = loopRes.staleCount || 0;
+    _sessionsLoaded = true;
     emitLoopsUpdate();
     // Refresh notification feed alongside session/loop data
     refreshRulesStatus().then(() => render()).catch(() => {});
@@ -1015,7 +1016,8 @@ async function loadProviderModels(provider) {
       const r = await fetch('/api/claude/config').then(r => r.json());
       models = (r?.models || []).map(m => ({ id: m.id, label: m.label || m.id }));
     } else if (provider === 'opencode') {
-      const r = await fetch('/api/opencode/providers/full').then(r => r.json()).catch(() => null);
+      // The connected providers (the compact view), not the whole models.dev catalog.
+      const r = await fetch('/api/opencode/providers/full?view=compact').then(r => r.json()).catch(() => null);
       const provs = r?.providers || r?.data || r || [];
       const flat = [];
       for (const p of (Array.isArray(provs) ? provs : Object.values(provs || {}))) {
@@ -1148,6 +1150,9 @@ function formatDuration(ms) {
 
 // ── Panel open/close ──
 
+let _sessionsLoaded = false; // a read of the lists succeeded once: later opens paint from it first
+let _panelLife = null;       // the open panel's document listeners end with it
+
 function openPanel() {
   if (_panel) { _panel.focus(); return; }
 
@@ -1173,13 +1178,17 @@ function openPanel() {
   wirePanel();
   isVisible = true;
   connectWs();
+  // What the last read found paints at once; the read below brings it up to date.
+  if (_sessionsLoaded) render();
   refreshSessions();
 
-  // ESC key to close
+  // ESC key to close (removed with the panel, however it closes)
+  _panelLife?.abort();
+  _panelLife = new AbortController();
   const onEsc = (e) => {
-    if (e.key === 'Escape' && _panel) { closePanel(); document.removeEventListener('keydown', onEsc); }
+    if (e.key === 'Escape' && _panel) closePanel();
   };
-  document.addEventListener('keydown', onEsc);
+  document.addEventListener('keydown', onEsc, { signal: _panelLife.signal });
 
   requestAnimationFrame(() => {
     _backdrop.classList.add('open');
@@ -1189,6 +1198,8 @@ function openPanel() {
 
 function closePanel() {
   if (!_panel) return;
+  _panelLife?.abort();
+  _panelLife = null;
   stopStalledTicker();
   if (_backdrop) { _backdrop.remove(); _backdrop = null; }
   _panel.remove();

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

@@ -3,6 +3,7 @@ import { buildJudgmentsTab, wireJudgmentsTab } from './ui-judgments.js';
 import { buildWhatsAppTab, wireWhatsAppTab } from './ui-whatsapp.js';
 import { buildCodeEditorTab, wireCodeEditorTab } from './settings/settings-code-editor-pane.js';
 import { buildAboutTab, wireAboutTab } from './settings/settings-about-pane.js';
+import { buildAppTab, wireAppTab } from './settings/settings-app-pane.js';
 import { SETTINGS_GROUPS, SETTINGS_PAGES, DEFAULT_SETTINGS_PAGE, pageKeys, getSettingsPage, resolveSettingsTarget, homeOfControl } from './settings/settings-ia.js';
 import * as kit from './settings/settings-kit.js';
 import { RULES_HOST_LABELS, describeRulesHost, describeRulesInstall, describeRulesInstallAll } from './settings/settings-rules.js';
@@ -20,12 +21,14 @@ setGitBashTranslator((key, params) => kit.tx(`gitBash.${key}`, params));
 import { initI18n, isReady as i18nReady, SUPPORTED_LOCALES, LOCALE_NAMES, SYSTEM_LOCALE, getLocale, getLocaleChoice, setLocaleChoice, getSystemLocale, englishTranslator, loadEnglishTranslator } from './i18n.js';
 import { wireSettingsShell, wireSettingsSearch, collectSearchRows, revealSettingsTarget, followSettingsTarget, onSettingsTakeover, applyStoredSections, storeSectionState } from './settings/settings-shell.js';
 import { buildSettingsSearchIndex } from './settings/settings-search.js';
+import { prefetchSettingsData, readSettingsData, refreshSettingsData } from './settings/settings-data.js';
+import { registerLaunchPrefetch } from './launch-prefetch.js';
 // ═══════════════════════════════════════════
 // UI-SETTINGS — Settings modal with shared tabs + variant tab injection
 // ═══════════════════════════════════════════
 //
 // The most complex shared UI module. Builds a floating settings panel with
-// thirteen task pages in six groups (./settings/settings-ia.js). A page is a
+// fourteen task pages in six groups (./settings/settings-ia.js). A page is a
 // title, a one-line purpose and section cards (./settings/settings-kit.js);
 // each builder below owns one pane of a page. Variant-registered tabs (the 2D
 // Graphics tab) join the Appearance page. Old tab ids still open the right page.
@@ -76,6 +79,8 @@ const TAB_ICONS = {
   whatsapp: '<svg viewBox="0 0 24 24"><path d="M3.5 20.5l1.3-3.9A8.5 8.5 0 1 1 8 19.6z"/><path d="M9.5 8.5c.4 2.6 2.9 5.2 5.5 5.6l1-1.2 1.6.8c-.3 1-1.1 1.6-2.1 1.5-2.9-.3-5.8-3.2-6.1-6.1-.1-1 .5-1.8 1.5-2.1l.8 1.6z"/></svg>',
   morelogin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M12 11.5a1 1 0 0 0-1 1c0 1.8-.3 3.6-1.2 5.2"/><path d="M7.8 14.5a8 8 0 0 0-.6 4.3"/><path d="M12 7.5a4.5 4.5 0 0 1 4.5 4.5c0 .6 0 1.2-.1 1.8"/><path d="M5 9.2a7 7 0 0 1 11-1.9"/><path d="M15 13a3 3 0 0 1-3 3"/></svg>',
   editor: '<svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="13.5" y1="5" x2="10.5" y2="19"/></svg>',
+  // Settings > App: the software's own controls (a window with its title bar)
+  app: '<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="6.5" y1="6.5" x2="6.51" y2="6.5"/><line x1="9.5" y1="6.5" x2="9.51" y2="6.5"/></svg>',
   about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="11"/><line x1="12" y1="7.5" x2="12.01" y2="7.5"/></svg>',
 };
 
@@ -1665,17 +1670,17 @@ function buildSkillsTab(ccSkills) {
     const anyOn = targets.some(t => installed[t.id]);
     const chips = targets.map(t => `
               <button type="button" class="cc-skill-target${installed[t.id] ? ' on' : ''}"
-                      data-cc-skill="${skill.dirName}"
+                      data-cc-skill="${kit.esc(skill.dirName)}"
                       data-cc-target="${t.id}"
                       data-state="${installed[t.id] ? 'on' : 'off'}"
                       ${kit.inv('SKL001')} data-stg-pressed="on" aria-pressed="${installed[t.id] ? 'true' : 'false'}"
                       title="${kit.te('settings.redesign.skills.installFor', { skill: skill.name, assistant: t.label })}">${t.label}</button>
           `).join('');
     return `
-          <div class="cc-skill-row${anyOn ? ' installed' : ''}" data-skill-name="${skill.dirName}">
+          <div class="cc-skill-row${anyOn ? ' installed' : ''}" data-skill-name="${kit.esc(skill.dirName)}">
             <div class="cc-skill-info">
-              <span class="cc-skill-name">/${skill.name}</span>
-              <span class="cc-skill-desc">${skill.description || ''}</span>
+              <span class="cc-skill-name">/${kit.esc(skill.name)}</span>
+              <span class="cc-skill-desc">${kit.esc(skill.description || '')}</span>
             </div>
             <div class="cc-skill-targets" role="group" aria-label="${kit.te('settings.redesign.skills.targets', { skill: skill.name })}">${chips}</div>
           </div>`;
@@ -3168,10 +3173,45 @@ function landOnSearchEntry(overlay, entry, { focus = false, watch = true } = {})
 }
 
 // ═══════════════════════════════════════════
+// The search index of a locale (and of the variant tabs the page registered): what the strings are, not what
+// the panes hold, so it is made once (at launch idle, or by the first open) and every open reuses it.
+let _searchIndexMemo = null;
+function memoSearchIndex(en, variantTabs, build) {
+  const key = JSON.stringify([getLocale(), typeof en === 'function', (variantTabs || []).map(tab => [tab.id, tab.label || ''])]);
+  if (_searchIndexMemo?.key !== key) _searchIndexMemo = { key, index: build() };
+  return _searchIndexMemo.index;
+}
+
+/** Make the index now (launch idle), with the English names when the locale is another (loaded once, here). */
+function prebuildSettingsSearchIndex() {
+  const variantTabs = getSettingsTabs();
+  const make = (en) => memoSearchIndex(en, variantTabs, () => buildSettingsSearchIndex({ t: kit.tx, en, variants: variantTabs.map(tab => ({ id: tab.id, label: tab.label })) }));
+  if (getLocale() === 'en') { make(null); return undefined; }
+  const english = englishTranslator();
+  if (english) { make(english); return undefined; }
+  make(null);
+  return loadEnglishTranslator().then((en) => { if (en) make(en); }).catch(() => {});
+}
+
 // MAIN ENTRY — openSettingsModal
 // ═══════════════════════════════════════════
 
-export async function openSettingsModal(options = {}) {
+// An open that comes while another is still reading its data joins it: one panel, the later options applied.
+let _settingsOpening = null;
+export function openSettingsModal(options = {}) {
+  if (_settingsOpening) {
+    return _settingsOpening.then(() => {
+      const panel = document.getElementById('settings-panel');
+      if (panel) { panel.style.zIndex = '300001'; applySettingsOpenOptions(panel, options); }
+    });
+  }
+  const opening = openSettingsModalNow(options);
+  const guarded = opening.catch(() => {}).finally(() => { if (_settingsOpening === guarded) _settingsOpening = null; });
+  _settingsOpening = guarded;
+  return opening;
+}
+
+async function openSettingsModalNow(options = {}) {
   // If already open, just bring it to front
   const existing = document.getElementById('settings-panel');
   if (existing) {
@@ -3207,26 +3247,17 @@ export async function openSettingsModal(options = {}) {
   let userContextReading = readUserContextResponse({ status: 0 });
 
   try {
-    const [settingsRes, connRes, ccRes, skillsRes, tunnelRes, keyRes, bridgeRes, greetRes, setupRes, cliRes, toolPermsRes, toolCatsRes, discordRes, skinsRes, iconsRes, youtubeRes, typesafeRes, userContextRes] = await Promise.allSettled([
-      fetch('/api/settings').then(r => r.json()),
-      fetch('/api/connections').then(r => r.json()),
-      fetch('/api/claude-code/integrations').then(r => r.json()),
-      fetch('/api/claude-code/skills').then(r => r.json()),
-      fetch('/api/tunnel/status').then(r => r.json()),
-      fetch('/api/mcp-key').then(r => r.json()),
-      fetch('/api/bridges/openclaw').then(r => r.json()),
-      loadGreetingReading(),
-      fetch('/api/setup/status').then(r => r.json()),
-      fetch('/api/cli/config').then(r => r.json()),
-      fetch('/api/claude-code/tool-permissions').then(r => r.json()),
-      fetch('/api/claude-code/tool-categories').then(r => r.json()),
-      fetch('/api/discord/config').then(r => r.json()),
-      fetch('/api/skins').then(r => r.json()),
-      fetch('/api/file-icons').then(r => r.json()),
-      fetch('/api/youtube/config').then(r => r.json()),
-      fetch('/api/typesafe/config').then(r => r.json()),
-      loadUserContextReading(),
-    ]);
+    // Read through the page's data cache (settings/settings-data.js): kept answers at once (each open its own
+    // copy; read again in the background when old), so Settings waits only the first time.
+    const reads = await readSettingsData();
+    // The greeting and the user context are readings of what their endpoints answered (no answer is a reading too).
+    const readingOf = (entry, make) => ({ status: 'fulfilled', value: entry?.status === 'fulfilled' ? make(entry.value) : make({ status: 0, error: entry?.reason?.message }) });
+    const greetRes = readingOf(reads.greeting, readGreetingStatus);
+    const userContextRes = readingOf(reads.userContext, readUserContextResponse);
+    const settingsRes = reads.settings, connRes = reads.connections, ccRes = reads.integrations, skillsRes = reads.skills;
+    const tunnelRes = reads.tunnel, keyRes = reads.mcpKey, bridgeRes = reads.openclaw, setupRes = reads.setup, cliRes = reads.cli;
+    const toolPermsRes = reads.toolPermissions, toolCatsRes = reads.toolCategories, discordRes = reads.discord, skinsRes = reads.skins;
+    const iconsRes = reads.icons, youtubeRes = reads.youtube, typesafeRes = reads.typesafe;
     if (typesafeRes.status === 'fulfilled' && typesafeRes.value.ok) typesafeConfig = typesafeRes.value;
     if (userContextRes.status === 'fulfilled') userContextReading = userContextRes.value;
     if (settingsRes.status === 'fulfilled') settings = settingsRes.value;
@@ -3256,6 +3287,8 @@ export async function openSettingsModal(options = {}) {
     || getSettingsPage(storage.getItem(KEYS.SETTINGS_LAST_PAGE))?.id
     || DEFAULT_SETTINGS_PAGE;
   const openerEl = document.activeElement;
+  // Listeners on document and window that belong to this panel end with it (close aborts it).
+  const panelLife = new AbortController();
 
   // ── Panel ──
   const overlay = document.createElement('div');
@@ -3320,6 +3353,7 @@ export async function openSettingsModal(options = {}) {
             skins: buildSkinsTab(skinsData.skins, skinsData.active),
             interface: buildInterfaceTab(),
             icons: buildIconsTab(customIconsData),
+            app: buildAppTab(),
             about: buildAboutTab(),
           }, variantTabs, initialPage)}
         </div>
@@ -3361,10 +3395,14 @@ export async function openSettingsModal(options = {}) {
   // ── Close helper ──
   const close = () => {
     document.removeEventListener('keydown', onSettingsEsc);
+    const first = !panelLife.signal.aborted;
+    panelLife.abort();
     // Tabs that poll (Judgments) clear their timers on this event.
     overlay.dispatchEvent(new CustomEvent('settings-close'));
     backdrop.remove();
     overlay.remove();
+    // What was changed here is what the next open shows: its reads are asked for again now, in the background.
+    if (first) refreshSettingsData();
     // Give the keyboard back to whatever opened Settings.
     if (openerEl && openerEl !== document.body && document.body.contains(openerEl)) { try { openerEl.focus({ preventScroll: true }); } catch {} }
   };
@@ -3525,12 +3563,12 @@ export async function openSettingsModal(options = {}) {
           + '</div>';
         html += '<div style="padding:4px 0">';
         if (data.parent) {
-          html += `<div class="cc-browse-item" data-path="${escapeHtml(data.parent)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--t-muted)">`
+          html += `<div class="cc-browse-item" data-path="${kit.esc(data.parent)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--t-muted)">`
             + '<svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2"><polyline points="15 18 9 12 15 6"/></svg>'
             + '' + kit.te('settings.redesign.server.parent') + '</div>';
         }
         for (const d of data.directories) {
-          html += `<div class="cc-browse-item" data-path="${escapeHtml(data.current + '/' + d)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px">`
+          html += `<div class="cc-browse-item" data-path="${kit.esc(data.current + '/' + d)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px">`
             + '<svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2"><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>'
             + escapeHtml(d) + '</div>';
         }
@@ -3914,7 +3952,7 @@ export async function openSettingsModal(options = {}) {
       container.querySelectorAll('.stg-dropdown.open').forEach(dd => {
         if (!dd.contains(e.target)) dd.classList.remove('open');
       });
-    });
+    }, { signal: panelLife.signal });
   }
 
   function syncStgDropdown(container, hiddenId) {
@@ -4410,6 +4448,9 @@ export async function openSettingsModal(options = {}) {
   // ── Code editor: AI autocomplete (loads and saves itself) ──
   wireCodeEditorTab(overlay);
 
+  // ── App: updates, start at login, the window, maintenance (loads itself when its page is shown) ──
+  wireAppTab(overlay, { toast: showCCToast });
+
   // ── About: version, links, system and dependencies (loads itself the first time its page is shown) ──
   wireAboutTab(overlay, { toast: showCCToast });
 
@@ -4788,7 +4829,7 @@ export async function openSettingsModal(options = {}) {
 
     // Re-poll when tab regains visibility (covers Permissions API gaps on Safari).
     const visHandler = () => { if (!document.hidden) refreshNotifPermRow(); };
-    document.addEventListener('visibilitychange', visHandler);
+    document.addEventListener('visibilitychange', visHandler, { signal: panelLife.signal });
 
     // Request permission
     if (requestPermBtn) {
@@ -5591,7 +5632,7 @@ export async function openSettingsModal(options = {}) {
       overlay.querySelectorAll('.bc-dropdown.open').forEach(dd => {
         if (!dd.contains(e.target)) dd.classList.remove('open');
       });
-    });
+    }, { signal: panelLife.signal });
 
     // Sync dropdown display from hidden input value (for applyBrowserConfig)
     function syncBcDropdowns() {
@@ -6091,12 +6132,12 @@ export async function openSettingsModal(options = {}) {
             + '</div>';
           html += '<div style="padding:4px 0">';
           if (data.parent) {
-            html += `<div class="cc-browse-item" data-path="${escapeHtml(data.parent)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--t-muted)">`
+            html += `<div class="cc-browse-item" data-path="${kit.esc(data.parent)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--t-muted)">`
               + '<svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2"><polyline points="15 18 9 12 15 6"/></svg>'
               + '' + kit.te('settings.redesign.browser.parent') + '</div>';
           }
           for (const d of data.directories) {
-            html += `<div class="cc-browse-item" data-path="${escapeHtml(data.current + '/' + d)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px">`
+            html += `<div class="cc-browse-item" data-path="${kit.esc(data.current + '/' + d)}" style="padding:4px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px">`
               + '<svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2"><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>'
               + escapeHtml(d) + '</div>';
           }
@@ -7274,7 +7315,7 @@ export async function openSettingsModal(options = {}) {
     const ocpToolsEl = overlay.querySelector('#stg-ocp-tools');
     const ocpHistoryMetaEl = overlay.querySelector('#stg-ocp-history-meta');
     const ocpHistoryClearBtn = overlay.querySelector('#stg-ocp-clear-history');
-    const esc = s => String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const esc = s => String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
     // ── Helpers ──
     let _ocpConnected = new Set();
@@ -8181,7 +8222,8 @@ export async function openSettingsModal(options = {}) {
                 attempts++;
                 if (attempts > 60) { clearInterval(poll); if (waitEl) waitEl.style.display = 'none'; return; }
                 try {
-                  const pr = await fetch('/api/opencode/providers/full');
+                  // Only `connected` is read: the compact view (connected providers), not the whole catalog every 2 s.
+                  const pr = await fetch('/api/opencode/providers/full?view=compact');
                   const pd = await pr.json();
                   const connected = pd.data?.connected || [];
                   if (connected.includes(provId)) {
@@ -9382,7 +9424,7 @@ export async function openSettingsModal(options = {}) {
   // ── Search: the index is built from the strings of the active locale; what the panes load is read at query time ──
   // In another locale the English names are searched too (someone who learned the settings in English still finds
   // them): from the bundle i18n already holds as its fallback, or, when it has none, loaded once as the field is first used.
-  const searchIndex = (en) => buildSettingsSearchIndex({ t: kit.tx, en, variants: variantTabs.map(tab => ({ id: tab.id, label: tab.label })) });
+  const searchIndex = (en) => memoSearchIndex(en, variantTabs, () => buildSettingsSearchIndex({ t: kit.tx, en, variants: variantTabs.map(tab => ({ id: tab.id, label: tab.label })) }));
   const english = getLocale() === 'en' ? null : englishTranslator();
   wireSettingsSearch(overlay, {
     index: searchIndex(english),
@@ -9580,6 +9622,15 @@ export function initSettings() {
   const reopenPage = takeSettingsReopen();
   if (reopenPage) setTimeout(() => openSettingsModal({ tab: reopenPage, expand: ['stg-sec-language'] }), 0);
 
+  // Launch: what Settings is built from, and its search index (the English names too), read and made once the
+  // page has painted, so the first open and the first search wait for nothing.
+  registerLaunchPrefetch('settings-data', () => prefetchSettingsData(), { order: 60, owner: true });
+  registerLaunchPrefetch('settings-search-index', () => prebuildSettingsSearchIndex(), { order: 62 });
+  // Changes other windows announce: the next open shows them.
+  on('sync:skin:changed', () => refreshSettingsData(['skins']));
+  on('sync:greeting:changed', () => refreshSettingsData(['greeting']));
+  on('sync:assistant:user-context-changed', () => refreshSettingsData(['userContext']));
+
   // Expose sync functions for inline onclick attributes (if any remain)
   window.checkSyncStatus = checkSyncStatus;
   window.copySyncPrompt = copySyncPrompt;

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

@@ -18,7 +18,7 @@
 import { state, emit, on } from './state.js';
 import { KEYS, COLOR_PALETTE } from './constants.js';
 import { storage } from './storage.js';
-import { normalizeNodes } from './utils.js';
+import { normalizeNodes, escapeHtml } from './utils.js';
 import { catColor, upgradeSelect } from './colors.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
 import {
@@ -212,7 +212,7 @@ function openDescEditor(cat, chipEl) {
   const currentDesc = state.categoryDescriptions[cat] || '';
   editor.innerHTML = `
     <label>Description for "${cat}"</label>
-    <textarea class="desc-textarea">${currentDesc}</textarea>
+    <textarea class="desc-textarea">${escapeHtml(currentDesc)}</textarea>
     <div class="category-desc-actions">
       <button class="action-btn action-btn--ghost desc-cancel-btn">Cancel</button>
       <button class="action-btn action-btn--primary desc-save-btn">Save</button>
@@ -277,7 +277,7 @@ export function openCategoryChangeModal(node) {
       <div class="cat-modal-option${isActive ? ' active' : ''}" data-cat="${cat}">
         <div class="cat-opt-dot" style="color:${catColor(cat)}; background:${catColor(cat)}"></div>
         <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>`;
   });
 
@@ -476,7 +476,7 @@ async function editCategoryUI(name) {
 
         <div class="ecm-field">
           <label>Description</label>
-          <textarea class="edit-cat-desc ecm-input ecm-textarea" rows="4" placeholder="What this category is for...">${currentDesc}</textarea>
+          <textarea class="edit-cat-desc ecm-input ecm-textarea" rows="4" placeholder="What this category is for...">${escapeHtml(currentDesc)}</textarea>
         </div>
 
         <div class="ecm-divider"></div>

package/neural-interface/public/shared/ui-sidepanel-session-entry.js

@@ -1,5 +1,6 @@
 import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
 import { emit } from './state.js';
+import { sessionWindowStatus } from './sidepanel-session-status.js';
 
 const host = sidepanelHost();
 const provider = new URLSearchParams(location.search).get('provider');
@@ -32,6 +33,18 @@ if (hostedSidepanelId && host) {
     const syncTitle = () => host.title(hostedSidepanelId, title?.textContent?.trim());
     if (title) new MutationObserver(syncTitle).observe(title, { childList: true, subtree: true, characterData: true });
     syncTitle();
+    // What its sessions do, for this window's pill in the main window: read from this document's own tray
+    // pills, which the panel paints from its sessions' state, and sent when it changes.
+    const tray = document.getElementById('term-minimized-tray');
+    let sentStatus = '';
+    const syncStatus = () => {
+      const status = sessionWindowStatus([...(tray?.querySelectorAll('.term-minimized-pill') || [])].map((pill) => [...pill.classList]));
+      if (status === sentStatus) return;
+      sentStatus = status;
+      host.status?.(hostedSidepanelId, status);
+    };
+    if (tray) new MutationObserver(syncStatus).observe(tray, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
+    syncStatus();
     host.ready(hostedSidepanelId, { focus, defaults, end, receive(kind, data) {
       if (kind === 'path') return receivePath(data);
       emit(kind === 'image' ? 'wb:send-to-panel' : kind, data);

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

@@ -2,9 +2,15 @@ import { storage } from './storage.js';
 import { state, emit } from './state.js';
 import { hostedSidepanelId } from './ui-sidepanel-runtime.js';
 import { registerSidepanel, setSidepanelVisible, focusSidepanel, detachSidepanel, getSidepanelPresentation, sendToFocusedSession } from './ui-sidepanel-windows.js';
+import { getProviderMeta } from './provider-icons.js';
+import { normalizeSessionWindowStatus } from './sidepanel-session-status.js';
+import { savedTabsStatus } from './ui-sidepanel-tray.js';
 
 let manifestKey;
 const PROVIDERS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode' };
+// provider-icons.js ids: the window's pill wears its provider's icon and colour.
+const PROVIDER_IDS = { claude: 'claude-code', codex: 'codex', opencode: 'opencode' };
+const STATUS_WORDS = { working: 'working', action: 'needs you' };
 const entries = new Map();
 const editorOwners = new Map();
 let initialized = false;
@@ -38,6 +44,11 @@ function pillFor(entry) {
   const pill = document.createElement('div');
   pill.className = 'term-minimized-pill sp-session-pill';
   pill.dataset.sessionWindow = entry.id;
+  const meta = getProviderMeta(PROVIDER_IDS[entry.provider]);
+  pill.style.setProperty('--sp-pill-color', meta.color);
+  const icon = document.createElement('span');
+  icon.className = 'term-minimized-pill-icon';
+  icon.innerHTML = meta.icon; // provider-icons.js's own SVG
   const label = document.createElement('span');
   label.className = 'term-minimized-pill-label';
   const close = document.createElement('button');
@@ -45,7 +56,7 @@ function pillFor(entry) {
   close.textContent = '×';
   close.title = 'End detached session';
   close.addEventListener('click', event => { event.stopPropagation(); end(entry).catch(showError.bind(null, entry)); });
-  pill.append(label, close);
+  pill.append(icon, label, close);
   pill.addEventListener('click', () => show(entry));
   tray.append(pill);
   entry.pill = pill;
@@ -55,16 +66,25 @@ function pillFor(entry) {
 function renderPill(entry) {
   const pill = pillFor(entry);
   if (!pill) return;
-  pill.querySelector('.term-minimized-pill-label').textContent = entry.title || `${PROVIDERS[entry.provider]} session`;
+  const name = entry.title || `${PROVIDERS[entry.provider]} session`;
+  pill.querySelector('.term-minimized-pill-label').textContent = name;
   // Visible session pills also act as a window switcher when windows overlap.
   pill.classList.toggle('active', !!getSidepanelPresentation(entry.id)?.visible);
+  // What its sessions do, as the window's own tray pills say it (ui-sidepanel-session-entry.js): working
+  // like a tray pill, or needing you (a session in it waits on an answer).
+  const status = normalizeSessionWindowStatus(entry.status);
+  pill.classList.toggle('sp-pill-running', status === 'working');
+  pill.classList.toggle('sp-pill-attention', status === 'action');
+  pill.dataset.status = status;
+  pill.title = STATUS_WORDS[status] ? `${name} · ${STATUS_WORDS[status]}` : name;
 }
 
 function showError(entry, error) {
   if (entry.loading) entry.loading.textContent = `Could not open session: ${error?.message || error}`;
 }
 
-function show(entry) {
+/** The window and its session's frame, made once. Whether it shows is setSidepanelVisible's: show(). */
+function mount(entry) {
   if (!entry.element) {
     const element = document.createElement('section');
     element.className = 'sp-session-window';
@@ -103,6 +123,10 @@ function show(entry) {
     const lang = new URLSearchParams(window.location.search).get('lang');
     frame.src = `/sidepanel-session.html?provider=${entry.provider}${lang ? `&lang=${encodeURIComponent(lang)}` : ''}`;
   }
+}
+
+function show(entry) {
+  mount(entry);
   setSidepanelVisible(entry.id, true);
 }
 
@@ -167,6 +191,15 @@ export function initDetachedAgentSessions() {
     .sp-session-button:hover { color:white; background:#ffffff18; }
     .sp-session-window iframe { border:0; width:100%; flex:1; min-height:0; border-radius:0 0 15px 15px; }
     .sp-session-loading { padding:12px; font:12px sans-serif; color:#cbd5e1; }
+    .sp-session-pill .term-minimized-pill-icon { color: color-mix(in srgb, var(--sp-pill-color, #fff) 45%, transparent); transition: color .2s; }
+    .sp-session-pill.sp-pill-running { border-color: color-mix(in srgb, var(--sp-pill-color, #fff) 42%, transparent); }
+    .sp-session-pill.sp-pill-running .term-minimized-pill-icon { color: var(--sp-pill-color, #fff); }
+    .sp-session-pill.sp-pill-running .term-minimized-pill-label::before { content: ''; display: inline-block; width: 6px;
+      height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sp-pill-color, #fff); vertical-align: middle;
+      animation: sp-pill-pulse 1.2s ease-in-out infinite; }
+    .sp-session-pill.sp-pill-attention { border-color: color-mix(in srgb, var(--accent-orange, #FFB74D) 42%, transparent); }
+    .sp-session-pill.sp-pill-attention .term-minimized-pill-icon { color: var(--accent-orange, #FFB74D); }
+    @keyframes sp-pill-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
     .sp-session-pill.active { border-color:#3b82f680; }
   `;
   document.head.append(style);
@@ -189,6 +222,15 @@ export function initDetachedAgentSessions() {
       entry.title = next; if (entry.label) entry.label.textContent = next; renderPill(entry); save();
     },
     fail: (id, error) => { const entry = entries.get(id); if (entry) showError(entry, error); },
+    // What the window's sessions do, sent by the window when it changes (sidepanel-session-status.js).
+    status(id, status) {
+      const entry = entries.get(id);
+      if (!entry) return;
+      const next = normalizeSessionWindowStatus(status);
+      if (entry.status === next) return;
+      entry.status = next;
+      renderPill(entry);
+    },
     send(id, kind, data) {
       const entry = entries.get(id);
       if (!entry) return;
@@ -217,7 +259,16 @@ export function initDetachedAgentSessions() {
   try {
     for (const record of JSON.parse(storage.getItem(manifestKey) || '[]')) {
       if (!/^session-[a-f0-9-]+$/.test(record.id) || !PROVIDERS[record.provider]) continue;
-      entries.set(record.id, record); renderPill(record);
+      entries.set(record.id, record);
+      // A window whose session was working, or waiting on the user, when the page went away (its saved tabs say
+      // so, read as the tray's placeholders read them) says it at once, and its panel loads, hidden, to say what
+      // the session does now.
+      const saved = savedTabsStatus(record.provider, record.id);
+      if (saved !== 'idle') {
+        record.status = saved;
+        try { mount(record); } catch (error) { console.warn('[sidepanel-sessions] could not load a working window', error); }
+      }
+      renderPill(record);
     }
   } catch { /* Missing or invalid saved manifest starts with no extra windows. */ }
 }