synabun 2.0.9 → 2.1.0

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

@@ -1,3 +1,4 @@
+import { cxpText } from './cdx-copy.js';
 // ═══════════════════════════════════════════
 // SynaBun — Codex Panel: Render Module
 // Text utilities, card rendering, delta appending, and history rendering.
@@ -16,7 +17,8 @@ import { bindExpandableCard, setCardExpanded } from './cdx-cards.js';
 import { mountMcpAppCard } from './cdx-mcp-app-host.js';
 import { OUTPUT_LIMITS, boundedText, jsonAnswer, prettyJsonFences, readableStructuredValue, fileChangeDiffs, parseUnifiedDiff, deduplicateTurnDiff } from './cdx-output-model.js';
 import { renderReadableOutput, renderReadableBlock, cleanOutputBlocks, hydrateOutputControls, observeOutputBlocks, renderDiffView, restoreDiffViews } from './cdx-output.js';
-import { fileLinkTitle, fillFileLinkCopy, isInsideRoots, parseFileLinkTarget } from '../file-links.js';
+import { fileLinkTitle, fillFileLinkCopy, isInsideRoots, parseFileLinkTarget, readFileLink } from '../file-links.js';
+import { sanitizeHtmlString } from '../assistant/asst-sanitize.js';
 export { setCardExpanded } from './cdx-cards.js';
 
 // ── Shared context (set by cdx-tabs via setRenderContext) ──
@@ -98,6 +100,11 @@ export function esc(s) {
 // streaming delta tick. Memoize so identical text — unchanged messages
 // elsewhere in the transcript that get re-rendered anyway — returns cached
 // HTML without re-parsing.
+//
+// What a model writes is not ours, and marked passes raw HTML through: an
+// `<img onerror>` in a reply would run in SynaBun's origin with no click. Every
+// Markdown sink of the panel takes md()'s output, so it goes through the
+// allowlist sanitiser the Assistant, Claude and OpenCode panels use, here, once.
 const _mdCache = new Map();
 const _MD_CACHE_LIMIT = 512;
 let _mdRenderer = null;
@@ -134,6 +141,9 @@ export function md(text) {
     try { html = parser.call(renderer, prettyJsonFences(key)); }
     catch { html = markdownFallback(key); }
   }
+  // A page with no DOM to sanitise in, or a sanitiser that fails, gets escaped text: never raw HTML.
+  try { html = sanitizeHtmlString(html); }
+  catch { html = markdownFallback(key); }
   if (_mdCache.size >= _MD_CACHE_LIMIT) {
     const firstKey = _mdCache.keys().next().value;
     if (firstKey !== undefined) _mdCache.delete(firstKey);
@@ -165,7 +175,7 @@ function extractCompactAssistantSummary(text) {
     .replace(/^[#>\-\*\d\.\s]+/gm, '')
     .replace(/\s+/g, ' ')
     .trim();
-  if (!value) return 'Working through the next step';
+  if (!value) return cxpText('working', 'Working through the next step');
   return value;
 }
 
@@ -409,8 +419,11 @@ function openInEditorTitle(target) {
 
 export function markProjectFileAnchors(container) {
   if (!container) return;
-  container.querySelectorAll('a[href]').forEach((link) => {
-    const target = projectFileTarget(link.getAttribute('href'));
+  // A path the sanitiser kept as written (data-file-target) is the link's target: its href, when it has one, is
+  // that path resolved against the page.
+  container.querySelectorAll('a[href], a[data-file-target]').forEach((link) => {
+    const read = readFileLink(link);
+    const target = read && projectFileTarget(read.raw);
     if (!target) return;
     link.classList.add('cxp-file-link');
     link.dataset.projectFilePath = target.path;
@@ -608,7 +621,7 @@ function resolveFileChangeSummary(item) {
   const changes = Array.isArray(item?.changes) ? item.changes.slice(0, OUTPUT_LIMITS.files) : [];
   const lines = changes.map((change) => describeFileChange(change)).filter(Boolean);
   if (lines.length) return lines.join('\n');
-  return 'Pending file changes';
+  return cxpText('pendingFiles', 'Pending file changes');
 }
 
 function collectStructuredText(value, seen = new Set()) {
@@ -796,14 +809,27 @@ export function sanitizeStoredTranscriptDom(container) {
   });
   if (!_ctx.running) container.querySelectorAll('.cxp-reasoning').forEach(card => {
     const body = card.querySelector('.cxp-reasoning-body');
-    if (body && /^Waiting for reasoning summary/.test(body.textContent)) body.textContent = 'No reasoning summary was provided.';
+    const text = body?.textContent.trim() || '';
+    if (!text || ['Waiting for reasoning summary...', 'No reasoning summary was provided.', cxpText('waitingReasoning', 'Waiting for reasoning summary...'), cxpText('noReasoning', 'No reasoning summary was provided.')].includes(text)) { card.remove(); return; }
+    const title = card.querySelector('.cxp-card-title');
+    if (title) title.textContent = cxpText('reasoning', 'Reasoning Summary');
     const pill = card.querySelector('.cxp-status-pill');
-    if (pill?.textContent === 'live') pill.textContent = 'complete';
+    if (pill) pill.textContent = cxpText('status_complete', 'complete');
   });
   syncStatusPillTones(container);
   cleanOutputBlocks(container);
   // Old snapshots retain their classes; replace just their verbose diff body.
   container.querySelectorAll('[data-item-type="fileChange"]').forEach(card => {
+    const title = card.querySelector('.cxp-card-title');
+    if (title) title.textContent = cxpText('fileChange', 'File change');
+    const pill = card.querySelector('.cxp-status-pill');
+    const completed = ['completed', cxpText('status_completed', 'completed')].includes(pill?.textContent);
+    const subtitle = card.querySelector('.cxp-card-subtitle');
+    if (subtitle) subtitle.textContent = fileChangeSubtitle({ status: completed ? 'completed' : '' });
+    if (completed && pill) pill.textContent = cxpText('status_completed', 'completed');
+    const meta = card.querySelector('.cxp-card-meta');
+    const count = meta?.textContent.match(/^(\d+) file changes?$/)?.[1];
+    if (count) meta.textContent = cxpText(Number(count) === 1 ? 'oneFileChange' : 'fileChanges', Number(count) === 1 ? '1 file change' : '{count} file changes', { count });
     const fold = card.querySelector('.cxp-fold-diff');
     const raw = fold?.querySelector('.cxp-card-pre-diff')?.textContent;
     if (!raw) return;
@@ -2021,14 +2047,17 @@ function getReasoningPreviewText(state) {
   const contentText = Array.isArray(state?.contentLines)
     ? state.contentLines.map((line) => String(line || '').trim()).filter(Boolean).join(' ')
     : '';
-  return _ctx.cleanPreview(summaryText || contentText || 'Working through the next step');
+  return _ctx.cleanPreview(summaryText || contentText || cxpText('working', 'Working through the next step'));
 }
 
 function updateReasoningChrome(state, { complete = false } = {}) {
   if (!state) return;
-  if (state.summaryEl) state.summaryEl.textContent = complete && !state.summaryLines?.some(line => String(line).trim()) && !state.contentLines?.some(line => String(line).trim()) ? 'No reasoning summary was provided.' : getReasoningPreviewText(state);
-  if (state.pillEl) state.pillEl.textContent = complete ? 'complete' : 'live';
-  if (state.el) state.el.classList.toggle('cxp-reasoning-done', !!complete);
+  if (state.summaryEl) state.summaryEl.textContent = complete && !state.summaryLines?.some(line => String(line).trim()) && !state.contentLines?.some(line => String(line).trim()) ? cxpText('noReasoning', 'No reasoning summary was provided.') : getReasoningPreviewText(state);
+  if (state.pillEl) state.pillEl.textContent = complete ? cxpText('status_complete', 'complete') : cxpText('live', 'live');
+  if (state.el) {
+    state.el.hidden = !state.summaryLines?.some(line => String(line).trim()) && !state.contentLines?.some(line => String(line).trim());
+    state.el.classList.toggle('cxp-reasoning-done', !!complete);
+  }
 }
 
 function cacheCollapsedCardState(state, item, itemType) {
@@ -2088,15 +2117,9 @@ function cacheCollapsedCardState(state, item, itemType) {
     case 'fileChange': {
       const changes = Array.isArray(item.changes) ? item.changes : [];
       if (hasOwnField(item, 'changes')) {
-        state.fileMetaText = changes.length ? `${changes.length} file change${changes.length > 1 ? 's' : ''}` : 'Pending file changes';
+        state.fileMetaText = changes.length ? cxpText(changes.length === 1 ? 'oneFileChange' : 'fileChanges', changes.length === 1 ? '1 file change' : '{count} file changes', { count: changes.length }) : cxpText('pendingFiles', 'Pending file changes');
         state.filesText = resolveFileChangeSummary(item);
-        const diffText = changes
-          .map((change) => extractStructuredText(change?.diff || change?.patch || change?.content || change?.output || ''))
-          .filter(Boolean)
-          .join('\n\n');
-        if (item.aggregatedOutput != null || diffText) {
-          state.outputBuf = extractStructuredText(item.aggregatedOutput) || item.aggregatedOutput || diffText;
-        }
+        if (item.aggregatedOutput != null) state.outputBuf = extractStructuredText(item.aggregatedOutput) || item.aggregatedOutput || '';
       } else if (item.aggregatedOutput != null) {
         state.outputBuf = extractStructuredText(item.aggregatedOutput) || item.aggregatedOutput || '';
       }
@@ -2150,8 +2173,8 @@ export function flushCardBody(state) {
       setOptionalSection(state.resultSectionEl, state.resultEl, state.resultText || '');
       break;
     case 'fileChange':
-      if (state.metaEl) state.metaEl.textContent = state.fileMetaText || 'Pending file changes';
-      if (state.filesEl) state.filesEl.textContent = state.filesText || 'Pending file changes';
+      if (state.metaEl) state.metaEl.textContent = state.fileMetaText || cxpText('pendingFiles', 'Pending file changes');
+      if (state.filesEl) state.filesEl.textContent = state.filesText || cxpText('pendingFiles', 'Pending file changes');
       refreshFileChangeView(state);
       break;
     case 'collabAgentToolCall':
@@ -2376,6 +2399,7 @@ export function ensureReasoningState(item) {
 
   const details = document.createElement('details');
   details.className = 'cxp-card cxp-reasoning';
+  details.hidden = true;
   details.dataset.itemId = item.id || '';
   details.dataset.expanded = '1';
 
@@ -2383,8 +2407,8 @@ export function ensureReasoningState(item) {
   summary.innerHTML = `
     <span class="cxp-card-icon">${ICON_SPARK}</span>
     <span class="cxp-card-titles">
-      <span class="cxp-card-title">Reasoning Summary</span>
-      <span class="cxp-card-subtitle">Working through the next step</span>
+      <span class="cxp-card-title">${cxpText('reasoning', 'Reasoning Summary')}</span>
+      <span class="cxp-card-subtitle">${cxpText('working', 'Working through the next step')}</span>
     </span>
     <span class="cxp-think-dots"><span></span><span></span><span></span></span>
     <span class="cxp-status-pill">live</span>
@@ -2631,10 +2655,14 @@ export function completeTurnOutputs(turnId) {
   }
 }
 
+function fileChangeSubtitle(item) {
+  return item.status === 'completed' ? cxpText('filesUpdated', 'File updates applied') : cxpText('fileUpdates', 'File updates');
+}
+
 export function ensureFileChangeState(item) {
   let state = _ctx.items.get(item.id);
   if (state) return state;
-  const card = createCard(item, ICON_FILES, 'File change', 'Proposed file updates');
+  const card = createCard(item, ICON_FILES, cxpText('fileChange', 'File change'), fileChangeSubtitle(item));
   setCardExpanded(card.el, true);
 
   const summary = document.createElement('div');
@@ -2645,7 +2673,7 @@ export function ensureFileChangeState(item) {
   filesSection.className = 'cxp-card-section';
   const filesLabel = document.createElement('div');
   filesLabel.className = 'cxp-card-section-label';
-  filesLabel.textContent = 'Files changed';
+  filesLabel.textContent = cxpText('filesChanged', 'Files changed');
   const filesBody = document.createElement('div');
   filesBody.className = 'cxp-card-meta';
   filesSection.append(filesLabel, filesBody);
@@ -2660,6 +2688,7 @@ export function ensureFileChangeState(item) {
     type: 'fileChange',
     el: card.el,
     pillEl: card.pill,
+    subtitleEl: card.subtitleEl,
     metaEl: summary,
     filesEl: filesBody,
     outputSectionEl: outputEl,
@@ -2877,8 +2906,9 @@ export function updateItemFromData(item) {
       state.titleEl.textContent = head?.title || h.detail || item.type || 'Item';
       if (head && state.subtitleEl) state.subtitleEl.textContent = head.subtitle;
     }
+    if (itemType === 'fileChange' && state.subtitleEl) state.subtitleEl.textContent = fileChangeSubtitle(state._lastItem);
     if (state.pillEl && item.status != null) state.pillEl.textContent = _ctx.formatStatus(item.status);
-    if (isCardBodyHidden(state)) { state._bodyDirty = true; _ctx.scheduleThreadSnapshotSave(_ctx.boundTab); return; }
+    if (itemType !== 'reasoning' && isCardBodyHidden(state)) { state._bodyDirty = true; _ctx.scheduleThreadSnapshotSave(_ctx.boundTab); return; }
   }
 
   switch (itemType) {
@@ -2966,8 +2996,8 @@ export function updateItemFromData(item) {
     }
     case 'fileChange': {
       state.pillEl.textContent = _ctx.formatStatus(item.status);
-      state.metaEl.textContent = state.fileMetaText || 'Pending file changes';
-      if (state.filesEl) state.filesEl.textContent = state.filesText || 'Pending file changes';
+      state.metaEl.textContent = state.fileMetaText || cxpText('pendingFiles', 'Pending file changes');
+      if (state.filesEl) state.filesEl.textContent = state.filesText || cxpText('pendingFiles', 'Pending file changes');
       if (item.aggregatedOutput != null) {
         state.outputBuf = extractStructuredText(item.aggregatedOutput) || item.aggregatedOutput || '';
       }
@@ -3092,26 +3122,26 @@ export function appendAgentDelta(itemId, delta) {
 
 export function appendPlanDelta(itemId, delta) {
   const state = ensurePlanState({ id: itemId });
-  if (state.pillEl) state.pillEl.textContent = 'live';
+  if (state.pillEl) state.pillEl.textContent = cxpText('live', 'live');
   state.buffer += delta || '';
   if (isCardBodyHidden(state)) { state._bodyDirty = true; return; }
   setMarkdownBuffer(state, state.buffer, false);
 }
 
 export function getReasoningBodyText(state, { complete = false } = {}) {
-  if (!state) return complete ? 'No reasoning summary was provided.' : 'Waiting for reasoning summary...';
+  if (!state) return complete ? cxpText('noReasoning', 'No reasoning summary was provided.') : cxpText('waitingReasoning', 'Waiting for reasoning summary...');
   const contentText = Array.isArray(state.contentLines) ? state.contentLines.join('').trim() : '';
   if (contentText) return contentText;
   const summaryText = Array.isArray(state.summaryLines)
     ? state.summaryLines.map((line) => String(line || '').trim()).filter(Boolean).join('\n')
     : '';
-  return summaryText || (complete ? 'No reasoning summary was provided.' : 'Waiting for reasoning summary...');
+  return summaryText || (complete ? cxpText('noReasoning', 'No reasoning summary was provided.') : cxpText('waitingReasoning', 'Waiting for reasoning summary...'));
 }
 
 export function appendReasoningDelta(itemId, delta, isSummary = false, summaryIndex = null) {
   const state = ensureReasoningState({ id: itemId });
   state.el?.classList.remove('cxp-reasoning-done');
-  if (state.pillEl) state.pillEl.textContent = 'live';
+  if (state.pillEl) state.pillEl.textContent = cxpText('live', 'live');
   if (!state.userToggled && state.el && !state.el.open) {
     state.suppressToggleTracking = true;
     state.el.open = true;

package/neural-interface/public/shared/cdx/cdx-requests.js

@@ -12,7 +12,7 @@ import {
   buildSynaBunChoiceContent,
   codexApprovalDecisionActions,
   codexHeldServerRequests,
-  codexMcpElicitationMeta,
+  codexMcpToolApproval,
   codexMcpToolApprovalActions,
   codexPermissionApprovalActions,
   codexRequestIdentityKey,
@@ -546,9 +546,9 @@ export function isElicitationValueSatisfied(value, schema) {
 
 export function renderMcpToolApprovalRequest(requestId, params) {
   if (_ctx.requestCards.has(String(requestId))) return;
-  const metadata = codexMcpElicitationMeta(params);
+  const approval = codexMcpToolApproval(params);
   const serverName = String(params?.serverName || 'MCP');
-  const toolName = String(metadata.tool_name || metadata.toolName || 'unknown tool');
+  const toolName = approval?.toolName || 'unknown tool';
   const entry = createInteractiveRequestCard(requestId, {
     title: `${serverName} Tool Approval`,
     subtitle: 'mcp tool approval',

package/neural-interface/public/shared/cdx/cdx-skill-hints.js

@@ -0,0 +1,54 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Codex panel: native skills in the slash hints
+// ═══════════════════════════════════════════
+//
+// Codex lists its skills itself (app-server skills/list): each with its name, its SKILL.md path and its scope.
+// A hint keeps that path, so picking one sends Codex's own `skill` input (name + path: the exact skill, even when
+// two share a name) with the prompt, instead of only the text "/name" (SK-050). Same-named skills are told apart
+// by their scope in the hint. No DOM: cdx-tabs.js draws the hints, the tests read this.
+
+const SCOPE_LABEL = { user: 'personal', repo: 'repository', system: 'Codex', admin: 'admin' };
+
+/**
+ * Hint rows of native skills: `{ cmd, desc, skill: { name, path }, scope }`, enabled ones only, sorted.
+ * @param {object[]} skills skills/list entries (name, description, path, scope, enabled)
+ * @param {Set<string>} [taken] commands already shown (built-ins win their name)
+ */
+export function skillHintEntries(skills, taken = new Set()) {
+  const rows = (Array.isArray(skills) ? skills : [])
+    .filter((s) => s && s.enabled !== false)
+    .map((s) => {
+      const name = String(s.name || s.dirName || '').trim();
+      return { cmd: name ? `/${name}` : '', desc: String(s.description || '').trim(), skill: typeof s.path === 'string' && s.path ? { name, path: s.path } : null, scope: s.scope || null };
+    })
+    .filter((row) => row.cmd !== '/' && row.cmd && !taken.has(row.cmd));
+  const counts = rows.reduce((m, r) => m.set(r.cmd, (m.get(r.cmd) || 0) + 1), new Map());
+  for (const row of rows) {
+    if (counts.get(row.cmd) > 1) row.desc = `(${SCOPE_LABEL[row.scope] || row.scope || 'other'}) ${row.desc}`.trim();
+  }
+  return rows.sort((a, b) => a.cmd.localeCompare(b.cmd) || String(a.scope).localeCompare(String(b.scope)));
+}
+
+/**
+ * The native skill inputs a prompt carries: the picked skill, while the prompt still starts with its /name.
+ * @param {string} prompt the text being sent
+ * @param {{ cmd: string, name: string, path: string }|null} pending what was picked from the hints
+ * @returns {{ name: string, path: string }[]}
+ */
+export function skillsForPrompt(prompt, pending) {
+  if (!pending || typeof pending.cmd !== 'string' || typeof pending.path !== 'string') return [];
+  const text = String(prompt || '').trimStart();
+  if (text !== pending.cmd && !text.startsWith(`${pending.cmd} `) && !text.startsWith(`${pending.cmd}\n`)) return [];
+  return [{ name: pending.name, path: pending.path }];
+}
+
+/**
+ * The skills_list request the panel sends for a tab: Codex's app-server (0.164.0, checked 2026-10-23) keeps its skill
+ * list until asked with forceReload, and sends no notification of its own when a skill folder appears or changes, so
+ * after SynaBun installed, removed or changed a skill (skills:changed) the next request forces the reload; otherwise
+ * the cached list is enough. The forced reload also refreshes the skills the app-server offers its threads.
+ * @param {{ project?: string|null }} tab @param {boolean} changed whether a skills:changed arrived since the last list
+ */
+export function skillsListRequest(tab, changed) {
+  return { cwds: tab?.project ? [tab.project] : [], forceReload: changed === true };
+}

package/neural-interface/public/shared/cdx/cdx-styles.js

@@ -352,6 +352,12 @@ export function injectStyles() {
       display: inline-flex; align-items: center; gap: 3px;
       position: relative;
     }
+    /* SVGs with only a viewBox have platform-dependent intrinsic sizes. */
+    .cxp-toolbar-toggle > svg {
+      width: var(--cxp-space-3);
+      height: var(--cxp-space-3);
+      flex-shrink: 0;
+    }
     .cxp-toolbar-toggle::after {
       content: '';
       position: absolute; bottom: 0; left: 25%; right: 25%;
@@ -774,6 +780,7 @@ export function injectStyles() {
     /* ── Project bar and dropdowns ── */
     .cxp-projectbar {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
       gap: 4px;
       padding: 4px 10px 0;
@@ -796,7 +803,6 @@ export function injectStyles() {
       transition: background var(--cxp-dur-fast);
     }
     .cxp-dropdown-sm { max-width: 72px; }
-    #cxp-profile { max-width: 80px; }
     .cxp-dropdown:hover {
       background: var(--cxp-surface-1);
     }
@@ -1691,6 +1697,7 @@ export function injectStyles() {
     .cxp-thinking .cxp-msg-think-dots span:nth-child(2) { animation-delay: 0.2s; }
     .cxp-think-dots span:nth-child(3),
     .cxp-thinking .cxp-msg-think-dots span:nth-child(3) { animation-delay: 0.4s; }
+    .cxp-reasoning[hidden] { display: none; }
     .cxp-reasoning.cxp-reasoning-done .cxp-think-dots { display: none; }
     .cxp-thinking {
       display: flex;
@@ -2521,7 +2528,7 @@ export function injectStyles() {
     }
     /* The wrap draws the input's edge: 1px of padding over a border-coloured fill. */
     .cxp-input-wrap {
-      flex: 1; position: relative;
+      flex: 0 0 auto; position: relative;
       margin: 8px 8px 2px;
       border-radius: var(--cxp-radius-lg);
       padding: 1px;
@@ -2687,6 +2694,7 @@ export function injectStyles() {
       background: var(--cxp-surface-2);
     }
     .cxp-projectbar-actions {
+      flex-shrink: 0;
       display: flex;
       align-items: center;
       gap: 2px;
@@ -2724,6 +2732,10 @@ export function injectStyles() {
       animation: cxp-working 1.6s ease-in-out infinite;
       flex-shrink: 0;
     }
+    /* A session that waits on you (an approval or a question card): the warn hairline and mark of
+       the Assistant's and a detached window's pills, in place of the working look (paintTrayPill). */
+    .cxp-session-pill.cxp-pill-attention { border-color: color-mix(in srgb, var(--cxp-warning) 42%, transparent); }
+    .cxp-session-pill.cxp-pill-attention .term-minimized-pill-icon { color: var(--cxp-warning); }
     .cxp-hint {
       margin-top: 8px;
       font-size: var(--cxp-fs-xs);
@@ -3083,7 +3095,7 @@ export function injectStyles() {
       color: var(--cxp-text-2);
       background: var(--cxp-surface-1);
       margin-bottom: 2px;
-      cursor: grab;
+      cursor: move;
     }
     .cxp-queue-item.dragging { opacity: 0.4; }
     .cxp-queue-item.drag-over { box-shadow: inset 0 2px 0 var(--cxp-text-2); }