cli-jaw 2.0.4 → 2.0.5

package/public/js/features/process-log-adapter.ts

@@ -0,0 +1,104 @@
+import { generateId } from '../uuid.js';
+import { ICONS, emojiToIcon } from '../icons.js';
+import {
+    parseToolLogBounded,
+    sanitizeToolLogForDurableStorage,
+    serializeSanitizedToolLog,
+} from '../../../src/shared/tool-log-sanitize.js';
+import type { ProcessStep } from './process-block.js';
+import type { ToolLogEntry } from './tool-ui.js';
+
+export interface MessageItem { role: string; content: string; tool_log?: string | null; trace_run_id?: string | null; cli?: string | null; }
+export interface QueuedOverlayItem { id: string; prompt: string; source?: string; ts?: number; }
+export interface ActiveRunSnapshot { running?: boolean; cli?: string; text?: string; toolLog?: ToolLogEntry[]; startedAt?: number; }
+
+function processStepType(toolType?: string): ProcessStep['type'] {
+    return toolType === 'thinking' || toolType === 'search' || toolType === 'subagent'
+        ? toolType
+        : 'tool';
+}
+
+function processStepStatus(status?: string): ProcessStep['status'] {
+    return status === 'running' || status === 'done' || status === 'error' ? status : 'done';
+}
+
+function fallbackToolLabel(tool: ToolLogEntry): string {
+    if (tool.label) return tool.label;
+    const named = tool as ToolLogEntry & { name?: unknown };
+    return typeof named.name === 'string' && named.name ? named.name : 'tool';
+}
+
+export function parseToolLog(toolLog?: string | null): ToolLogEntry[] {
+    return parseToolLogBounded(toolLog) as ToolLogEntry[];
+}
+
+export function sanitizedToolLogJson(toolLog?: string | null): string | null {
+    return serializeSanitizedToolLog(parseToolLog(toolLog));
+}
+
+export function normalizeMessageToolLog<T extends MessageItem>(message: T): T {
+    if (message.role !== 'assistant' || !message.tool_log) return { ...message, tool_log: null };
+    return { ...message, tool_log: sanitizedToolLogJson(message.tool_log) };
+}
+
+export function toProcessSteps(tools: ToolLogEntry[], runStartedAt?: number): ProcessStep[] {
+    const baseTime = runStartedAt && runStartedAt > 0 ? runStartedAt : Date.now();
+    return tools.map((tool) => ({
+        id: generateId(),
+        icon: tool.icon ? emojiToIcon(tool.icon) : ICONS.tool,
+        rawIcon: tool.rawIcon || tool.icon || '',
+        label: fallbackToolLabel(tool),
+        isEmployee: tool.isEmployee === true,
+        type: processStepType(tool.toolType),
+        detail: tool.detail || '',
+        stepRef: tool.stepRef || '',
+        traceRunId: tool.traceRunId || '',
+        traceSeq: tool.traceSeq,
+        detailAvailable: tool.detailAvailable,
+        detailBytes: tool.detailBytes,
+        rawRetentionStatus: tool.rawRetentionStatus,
+        status: processStepStatus(tool.status),
+        startTime: baseTime,
+    }));
+}
+
+function identityKey(entry: ToolLogEntry, ordinal: number): string {
+    const stepRef = String(entry.stepRef || '').trim();
+    if (stepRef) return `ref:${stepRef}`;
+    return `ord:${entry.toolType || 'tool'}:${entry.label || 'tool'}:${ordinal}`;
+}
+
+export function mergeExplicitAndLiveToolLogs(explicit: ToolLogEntry[], live: ToolLogEntry[]): ToolLogEntry[] {
+    if (explicit.length === 0) return live;
+    const merged = new Map<string, ToolLogEntry>();
+    const ordinalCounts = new Map<string, number>();
+    const keyFor = (entry: ToolLogEntry): string => {
+        const base = `${entry.toolType || 'tool'}:${entry.label || 'tool'}`;
+        const next = (ordinalCounts.get(base) || 0) + 1;
+        ordinalCounts.set(base, next);
+        return identityKey(entry, next);
+    };
+    live.forEach(entry => merged.set(keyFor(entry), entry));
+    ordinalCounts.clear();
+    explicit.forEach(entry => {
+        const key = keyFor(entry);
+        const liveEntry = merged.get(key);
+        const liveDetail = liveEntry?.detail || '';
+        const explicitDetail = entry.detail || '';
+        merged.set(key, {
+            ...(liveEntry || {}),
+            ...entry,
+            detail: explicitDetail.length >= liveDetail.length ? explicitDetail : liveDetail,
+            status: entry.status || liveEntry?.status || 'done',
+        });
+    });
+    return Array.from(merged.values());
+}
+
+export function sanitizedToolLogEntries(entries: ToolLogEntry[]): ToolLogEntry[] {
+    return sanitizeToolLogForDurableStorage(entries) as ToolLogEntry[];
+}
+
+export function sanitizedToolLogJsonFromEntries(entries: ToolLogEntry[]): string | null {
+    return serializeSanitizedToolLog(entries);
+}

package/public/js/features/settings-cli-status.ts

@@ -12,6 +12,55 @@ const DEFAULT_CLI_STATUS_INTERVAL_SEC = 0;
 
 let cliStatusTimer: number | null = null;
 
+const CLI_STATUS_COLLAPSED_KEY = 'cliStatusCollapsed';
+
+function readCliStatusCollapsed(): boolean {
+    try { return localStorage.getItem(CLI_STATUS_COLLAPSED_KEY) === 'true'; }
+    catch { return false; }
+}
+
+function saveCliStatusCollapsed(collapsed: boolean): void {
+    try { localStorage.setItem(CLI_STATUS_COLLAPSED_KEY, collapsed ? 'true' : 'false'); }
+    catch { /* ignore */ }
+}
+
+let cliStatusExpanded = !readCliStatusCollapsed();
+
+export function isCliStatusExpanded(): boolean {
+    return cliStatusExpanded;
+}
+
+export function expandCliStatus(): void {
+    cliStatusExpanded = true;
+    const list = document.getElementById('cliStatusList');
+    const header = document.getElementById('cliStatusHeader');
+    if (list) list.style.display = 'block';
+    if (header) header.classList.add('expanded');
+    saveCliStatusCollapsed(false);
+    void loadCliStatus(true);
+}
+
+export function initCliStatusToggle(): void {
+    const header = document.getElementById('cliStatusHeader');
+    const list = document.getElementById('cliStatusList');
+    if (!header || !list) return;
+
+    if (!cliStatusExpanded) {
+        list.style.display = 'none';
+    } else {
+        list.style.display = 'block';
+        header.classList.add('expanded');
+    }
+
+    header.addEventListener('click', () => {
+        cliStatusExpanded = !cliStatusExpanded;
+        list.style.display = cliStatusExpanded ? 'block' : 'none';
+        header.classList.toggle('expanded', cliStatusExpanded);
+        saveCliStatusCollapsed(!cliStatusExpanded);
+        if (cliStatusExpanded) void loadCliStatus(true);
+    });
+}
+
 function readCliStatusInterval(): number {
     const raw = Number(localStorage.getItem('cliStatusInterval') || DEFAULT_CLI_STATUS_INTERVAL_SEC);
     return CLI_STATUS_INTERVAL_VALUES.has(raw) ? raw : DEFAULT_CLI_STATUS_INTERVAL_SEC;
@@ -37,7 +86,7 @@ export function scheduleCliStatusRefresh(): void {
     if (interval <= 0) return;
 
     cliStatusTimer = window.setInterval(() => {
-        if (document.hidden || !document.hasFocus()) return;
+        if (document.hidden || !document.hasFocus() || !cliStatusExpanded) return;
         void loadCliStatus(true);
     }, interval * 1000);
 }
@@ -70,6 +119,8 @@ export function normalizeQuotaWindowLabel(cliName: string, label: string): strin
 }
 
 export async function loadCliStatus(force = false): Promise<void> {
+    if (!cliStatusExpanded && !force) return;
+
     const interval = readCliStatusInterval();
     if (!force && state.cliStatusCache && interval > 0 && (Date.now() - state.cliStatusTs) < interval * 1000) {
         renderCliStatus({ cliStatus: (state.cliStatusCache as Record<string, unknown>)?.['cliStatus'] as Record<string, { available: boolean }> | null, quota: (state.cliStatusCache as Record<string, unknown>)?.['quota'] as Record<string, QuotaEntry> | null });

package/public/js/features/settings.ts

@@ -5,5 +5,6 @@ export { setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentio
 export { setActiveChannel, loadFallbackOrder, saveFallbackOrder } from './settings-channel.js';
 export { loadMcpServers, syncMcpServers, installMcpGlobal } from './settings-mcp.js';
 export { loadCliStatus, scheduleCliStatusRefresh, setCliStatusInterval } from './settings-cli-status.js';
+export { initCliStatusToggle, isCliStatusExpanded, expandCliStatus } from './settings-cli-status.js';
 export { initSttSettings } from './settings-stt.js';
 export { openPromptModal, closePromptModal, savePromptFromModal, openTemplateModal, saveTemplateFromModal, closeTemplateModal, templateGoBack, toggleDevMode } from './settings-templates.js';

package/public/js/features/sidebar.ts

@@ -90,6 +90,12 @@ export function toggleRight(): void {
     } else {
         document.body.classList.toggle('right-collapsed');
     }
+    if (isRightOpen()) {
+        const agentsTab = document.getElementById('tabAgents');
+        if (agentsTab?.classList.contains('active')) {
+            void import('./employees.js').then(m => m.loadEmployees(true));
+        }
+    }
     save();
     syncIcons();
 }
@@ -99,7 +105,7 @@ function isLeftOpen(): boolean {
     return !document.body.classList.contains('left-collapsed');
 }
 
-function isRightOpen(): boolean {
+export function isRightOpen(): boolean {
     if (isNarrow()) return document.body.classList.contains('right-expanded');
     return !document.body.classList.contains('right-collapsed');
 }

package/public/js/features/ui-status.ts

@@ -0,0 +1,47 @@
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { ICONS } from '../icons.js';
+import { t } from './i18n.js';
+import { showSkeleton, removeSkeleton } from './chat-messages.js';
+import type { MessageItem } from './process-log-adapter.js';
+
+export function setStatus(s: string): void {
+    const badge = document.getElementById('statusBadge');
+    const btn = document.getElementById('btnSend');
+    state.agentBusy = s === 'running';
+    document.getElementById('typingIndicator')?.classList.toggle('active', state.agentBusy);
+    if (s === 'running') {
+        if (badge) { badge.className = 'status-badge status-running'; badge.textContent = 'running'; }
+        if (btn) { btn.innerHTML = ICONS.stop; btn.title = t('btn.stop'); btn.classList.add('stop-mode'); }
+        showSkeleton();
+    } else {
+        if (badge) { badge.className = 'status-badge status-idle'; badge.textContent = 'idle'; }
+        if (btn) { btn.innerHTML = ICONS.send; btn.title = 'Send'; btn.classList.remove('stop-mode'); }
+        removeSkeleton();
+    }
+}
+
+export function updateQueueBadge(count: number): void {
+    let el = document.getElementById('queueBadge');
+    if (!el) {
+        el = document.createElement('span');
+        el.id = 'queueBadge';
+        el.className = 'queue-badge';
+        const sendBtn = document.getElementById('btnSend');
+        if (sendBtn?.parentElement) sendBtn.parentElement.style.position = 'relative';
+        if (sendBtn) { sendBtn.style.position = 'relative'; sendBtn.appendChild(el); }
+    }
+    el.textContent = count > 0 ? String(count) : '';
+    el.style.display = count > 0 ? 'flex' : 'none';
+}
+
+export function updateStatMsgs(count: number): void {
+    const el = document.getElementById('statMsgs');
+    if (el) el.textContent = t('stat.messages', { count });
+}
+
+export async function loadStats(): Promise<void> {
+    const msgs = await api<MessageItem[]>('/api/messages');
+    if (!msgs) return;
+    updateStatMsgs(msgs.length);
+}

package/public/js/main.ts

@@ -52,6 +52,7 @@ import {
     onFlushCliChange, loadFlushAgentSidebar,
     closePromptModal, savePromptFromModal, syncMcpServers, installMcpGlobal,
     loadCliStatus, scheduleCliStatusRefresh, setCliStatusInterval,
+    initCliStatusToggle, isCliStatusExpanded, expandCliStatus,
     setTelegram, setForwardAll, setTelegramMentionOnly, saveTelegramSettings,
     setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentionOnly, saveDiscordSettings, setActiveChannel,
     saveFallbackOrder,
@@ -78,6 +79,7 @@ import { initAppName } from './features/appname.js';
 import { initAvatar } from './features/avatar.js';
 import { initSidebar, toggleLeft, toggleRight } from './features/sidebar.js';
 import { initTheme } from './features/theme.js';
+import { initPreviewShortcutBridge } from './features/preview-shortcut-bridge.js';
 import { initGestures } from './features/gesture.js';
 import { initI18n, setLang, getLang, t } from './features/i18n.js';
 import { toggleRecording, cancelRecording } from './features/voice-recorder.js';
@@ -313,7 +315,10 @@ function bindPerCliControlEvents(): void {
 // MCP
 document.querySelector('[data-action="syncMcp"]')?.addEventListener('click', syncMcpServers);
 document.querySelector('[data-action="installMcp"]')?.addEventListener('click', installMcpGlobal);
-document.querySelector('[data-action="refreshCli"]')?.addEventListener('click', () => loadCliStatus(true));
+document.querySelector('[data-action="refreshCli"]')?.addEventListener('click', () => {
+    if (!isCliStatusExpanded()) expandCliStatus();
+    else loadCliStatus(true);
+});
 document.getElementById('cliStatusInterval')?.addEventListener('change', function (this: HTMLSelectElement) {
     setCliStatusInterval(this.value);
 });
@@ -449,6 +454,7 @@ async function bootstrap(): Promise<void> {
     hydrateIcons();
     hydrateProviderIcons();
     initTheme();
+    initPreviewShortcutBridge();
     await initI18n();
     const langSel = document.getElementById('langSelect') as HTMLSelectElement | null;
     if (langSel) langSel.value = getLang();
@@ -462,15 +468,16 @@ async function bootstrap(): Promise<void> {
     await loadCommands();
     await loadSettings();
     loadFlushAgentSidebar();
-    loadCliStatus();
     scheduleCliStatusRefresh();
+    initCliStatusToggle();
+    if (isCliStatusExpanded()) loadCliStatus();
     // loadMessages() is handled by ws.js onopen (clear + reload)
+    initSidebar();
     loadEmployees();
     initHeartbeatBadge();
     void refreshMemorySidebar();
     initAppName();
     await initAvatar();
-    initSidebar();
     initMsgCopy();
     initGestures();
     try { sessionStorage.removeItem(STALE_BUNDLE_RELOAD_KEY); } catch {}

package/public/js/render/code-copy.ts

@@ -0,0 +1,47 @@
+// ── Copy button event delegation ──
+import { t } from '../features/i18n.js';
+
+// ── Copy button event delegation (one-time setup) ──
+let codeCopyDelegationReady = false;
+
+export function ensureCodeCopyDelegation(): void {
+    if (codeCopyDelegationReady) return;
+    codeCopyDelegationReady = true;
+    document.addEventListener('click', (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+        // New structure: .code-copy-btn inside .code-block
+        const copyBtn = target?.closest('.code-copy-btn') as HTMLElement | null;
+        if (copyBtn) {
+            const block = copyBtn.closest('.code-block');
+            if (!block) return;
+            const codeEl = block.querySelector('pre code');
+            if (!codeEl) return;
+            navigator.clipboard.writeText(codeEl.textContent || '').then(() => {
+                const orig = copyBtn.textContent || '';
+                copyBtn.textContent = t('code.copied');
+                copyBtn.classList.add('copied');
+                setTimeout(() => {
+                    copyBtn.textContent = orig;
+                    copyBtn.classList.remove('copied');
+                }, 1500);
+            }).catch(() => { /* clipboard API fail silently */ });
+            return;
+        }
+        // Legacy structure: .code-lang-label inside .code-block-wrapper
+        const label = target?.closest('.code-lang-label') as HTMLElement | null;
+        if (!label) return;
+        const wrapper = label.closest('.code-block-wrapper');
+        if (!wrapper) return;
+        const codeEl = wrapper.querySelector('pre code');
+        if (!codeEl) return;
+        navigator.clipboard.writeText(codeEl.textContent || '').then(() => {
+            const orig = label.textContent || '';
+            label.textContent = t('code.copied');
+            label.classList.add('copied');
+            setTimeout(() => {
+                label.textContent = orig;
+                label.classList.remove('copied');
+            }, 1500);
+        }).catch(() => { /* clipboard API fail silently */ });
+    });
+}

package/public/js/render/delegations.ts

@@ -0,0 +1,10 @@
+// ── One-time render event delegations ──
+import { ensureCodeCopyDelegation } from './code-copy.js';
+import { ensureDiagramActionDelegation } from './svg-actions.js';
+import { ensureFilePathDelegation } from './file-links.js';
+
+export function ensureRenderDelegations(): void {
+    ensureCodeCopyDelegation();
+    ensureDiagramActionDelegation();
+    ensureFilePathDelegation();
+}

package/public/js/render/file-links.ts

@@ -0,0 +1,150 @@
+// ── File path linkification and click-to-open delegation ──
+import { apiJson } from '../api.js';
+
+// ── File path linkification (click-to-open in Finder) ──
+
+const FILE_PATH_RE_G = /(?:~\/[^\s)`\]"'<>]+|\/(?:Users|home|tmp|var|opt|private)\/[^\s)`\]"'<>]+)/g;
+const TRAILING_PUNCT_RE = /[.,!?:;]+$/;
+const LOCAL_FILE_HREF_RE = /^(?:~\/|\/(?:Users|home|tmp|var|opt|private)\/)/;
+
+function isLocalFileHref(href: string): boolean {
+    return LOCAL_FILE_HREF_RE.test(href);
+}
+
+function openLocalPath(path: string, el?: HTMLElement | null): void {
+    if (el) el.classList.add('opening');
+
+    apiJson<{ ok?: boolean; error?: string }>('/api/file/open', 'POST', { path })
+        .then(data => {
+            el?.classList.remove('opening');
+            if (data?.ok !== false) {
+                el?.classList.add('opened');
+                setTimeout(() => el?.classList.remove('opened'), 1500);
+            } else {
+                el?.classList.add('open-failed');
+                if (el) el.title = data?.error || 'Failed to open';
+                setTimeout(() => {
+                    el?.classList.remove('open-failed');
+                    if (el) el.title = '';
+                }, 2000);
+            }
+        })
+        .catch(() => {
+            el?.classList.remove('opening');
+            el?.classList.add('open-failed');
+            setTimeout(() => el?.classList.remove('open-failed'), 2000);
+        });
+}
+
+/**
+ * Walk text nodes inside container, wrap file paths in clickable spans.
+ * Idempotent — skips already-linkified paths.
+ * Skips: <pre>, <a>, <button>, .file-path-link
+ */
+export function linkifyFilePaths(container: HTMLElement): void {
+    const SKIP_TAGS = new Set(['PRE', 'A', 'BUTTON', 'TEXTAREA', 'INPUT', 'SCRIPT', 'STYLE']);
+
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            let el = node.parentElement;
+            while (el && el !== container) {
+                if (SKIP_TAGS.has(el.tagName)) return NodeFilter.FILTER_REJECT;
+                if (el.classList.contains('file-path-link')) return NodeFilter.FILTER_REJECT;
+                if (el.tagName === 'CODE' && el.parentElement?.tagName === 'PRE') {
+                    return NodeFilter.FILTER_REJECT;
+                }
+                el = el.parentElement;
+            }
+            return NodeFilter.FILTER_ACCEPT;
+        },
+    });
+
+    // Collect text nodes with matches, grouped by node
+    const nodeMatches = new Map<Text, { index: number; raw: string; clean: string }[]>();
+    let textNode: Text | null;
+    while ((textNode = walker.nextNode() as Text | null)) {
+        const text = textNode.textContent || '';
+        FILE_PATH_RE_G.lastIndex = 0;
+        let m: RegExpExecArray | null;
+        const hits: { index: number; raw: string; clean: string }[] = [];
+        while ((m = FILE_PATH_RE_G.exec(text))) {
+            const raw = m[0];
+            const clean = raw.replace(TRAILING_PUNCT_RE, '');
+            if (clean.length < 4) continue;
+            hits.push({ index: m.index, raw, clean });
+        }
+        if (hits.length) nodeMatches.set(textNode, hits);
+    }
+
+    // Replace each text node once — build full fragment with all matches
+    for (const [node, hits] of nodeMatches) {
+        const text = node.textContent || '';
+        const parent = node.parentNode;
+        if (!parent) continue;
+
+        const frag = document.createDocumentFragment();
+        let cursor = 0;
+
+        for (const { index, raw, clean } of hits) {
+            // Text before this match
+            if (index > cursor) {
+                frag.appendChild(document.createTextNode(text.slice(cursor, index)));
+            }
+            // The clickable span
+            const span = document.createElement('span');
+            span.className = 'file-path-link';
+            span.setAttribute('data-file-path', clean);
+            span.setAttribute('role', 'button');
+            span.setAttribute('tabindex', '0');
+            span.textContent = clean;
+            frag.appendChild(span);
+            // Trailing punctuation that was trimmed
+            const trailingPunct = raw.slice(clean.length);
+            if (trailingPunct) frag.appendChild(document.createTextNode(trailingPunct));
+            cursor = index + raw.length;
+        }
+
+        // Remaining text after last match
+        if (cursor < text.length) {
+            frag.appendChild(document.createTextNode(text.slice(cursor)));
+        }
+
+        parent.replaceChild(frag, node);
+    }
+}
+
+// ── File path click event delegation (one-time setup) ──
+let filePathDelegationReady = false;
+
+export function ensureFilePathDelegation(): void {
+    if (filePathDelegationReady) return;
+    filePathDelegationReady = true;
+
+    document.addEventListener('click', (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+        const anchor = target?.closest('a') as HTMLAnchorElement | null;
+        const href = anchor?.getAttribute('href') || '';
+        if (anchor && isLocalFileHref(href)) {
+            e.preventDefault();
+            anchor.classList.add('file-path-link');
+            openLocalPath(href, anchor);
+            return;
+        }
+
+        const link = target?.closest('.file-path-link') as HTMLElement | null;
+        if (!link) return;
+
+        const filePath = link.getAttribute('data-file-path');
+        if (!filePath) return;
+        openLocalPath(filePath, link);
+    });
+
+    document.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key !== 'Enter' && e.key !== ' ') return;
+        const target = e.target as HTMLElement;
+        if (target?.classList.contains('file-path-link')) {
+            e.preventDefault();
+            target.click();
+        }
+    });
+}

package/public/js/render/highlight.ts

@@ -0,0 +1,83 @@
+// ── Highlight.js language registry and helpers ──
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import python from 'highlight.js/lib/languages/python';
+import bash from 'highlight.js/lib/languages/bash';
+import shell from 'highlight.js/lib/languages/shell';
+import json from 'highlight.js/lib/languages/json';
+import css from 'highlight.js/lib/languages/css';
+import xml from 'highlight.js/lib/languages/xml';
+import markdown from 'highlight.js/lib/languages/markdown';
+import yaml from 'highlight.js/lib/languages/yaml';
+import sql from 'highlight.js/lib/languages/sql';
+import rust from 'highlight.js/lib/languages/rust';
+import go from 'highlight.js/lib/languages/go';
+import java from 'highlight.js/lib/languages/java';
+import cpp from 'highlight.js/lib/languages/cpp';
+import diff from 'highlight.js/lib/languages/diff';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+import { escapeHtml } from './html.js';
+
+let highlightLanguagesReady = false;
+
+export function ensureHighlightLanguages(): void {
+    if (highlightLanguagesReady) return;
+    highlightLanguagesReady = true;
+    hljs.registerLanguage('javascript', javascript);
+    hljs.registerLanguage('js', javascript);
+    hljs.registerLanguage('typescript', typescript);
+    hljs.registerLanguage('ts', typescript);
+    hljs.registerLanguage('python', python);
+    hljs.registerLanguage('py', python);
+    hljs.registerLanguage('bash', bash);
+    hljs.registerLanguage('shell', shell);
+    hljs.registerLanguage('sh', shell);
+    hljs.registerLanguage('json', json);
+    hljs.registerLanguage('css', css);
+    hljs.registerLanguage('xml', xml);
+    hljs.registerLanguage('html', xml);
+    hljs.registerLanguage('markdown', markdown);
+    hljs.registerLanguage('md', markdown);
+    hljs.registerLanguage('yaml', yaml);
+    hljs.registerLanguage('yml', yaml);
+    hljs.registerLanguage('sql', sql);
+    hljs.registerLanguage('rust', rust);
+    hljs.registerLanguage('rs', rust);
+    hljs.registerLanguage('go', go);
+    hljs.registerLanguage('java', java);
+    hljs.registerLanguage('cpp', cpp);
+    hljs.registerLanguage('c', cpp);
+    hljs.registerLanguage('diff', diff);
+    hljs.registerLanguage('plaintext', plaintext);
+    hljs.registerLanguage('text', plaintext);
+}
+
+export function highlightCode(text: string, lang?: string): string {
+    ensureHighlightLanguages();
+    if (lang && hljs.getLanguage(lang)) {
+        try { return hljs.highlight(text, { language: lang }).value; }
+        catch { return escapeHtml(text); }
+    }
+    try { return hljs.highlightAuto(text).value; }
+    catch { return escapeHtml(text); }
+}
+
+// ── Rehighlight all code blocks ──
+export function rehighlightAll(scope?: HTMLElement | Document): void {
+    ensureHighlightLanguages();
+    const root = scope || document;
+    root.querySelectorAll('.code-block pre code, .code-block-wrapper pre code').forEach(el => {
+        if ((el as HTMLElement).dataset['highlighted'] === 'yes') return;
+        const lang = [...el.classList].find(c => c.startsWith('language-'))?.replace('language-', '');
+        const raw = el.textContent || '';
+        try {
+            if (lang && hljs.getLanguage(lang)) {
+                el.innerHTML = hljs.highlight(raw, { language: lang }).value;
+            } else {
+                el.innerHTML = hljs.highlightAuto(raw).value;
+            }
+            (el as HTMLElement).dataset['highlighted'] = 'yes';
+        } catch { /* ignore */ }
+    });
+}

package/public/js/render/html.ts

@@ -0,0 +1,26 @@
+// ── HTML and orchestration helpers ──
+export function escapeHtml(str: string): string {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+// ── Orchestration JSON stripping ──
+// Only strip JSON blocks that contain orchestration-specific keys, not all JSON blocks
+// Require keys unique to orchestration payloads (avoid generic words like "phase")
+const ORCH_KEYS = /["'](?:subtasks|employee_config|agent_phases|orchestration_plan)["']\s*:/;
+const PROMPT_LEAK_START = /(^|\n)(?:## Approved Plan \((?:authoritative|auto-injected by orchestrator)[^\n]*\)|\[PABCD — [A-Z]:[^\n]*\]|\[PLANNING MODE[^\n]*\]|\[PLAN AUDIT[^\n]*\]|The approved plan is already injected above)/m;
+
+export function stripPromptLeakage(text: string): string {
+    const match = PROMPT_LEAK_START.exec(text);
+    if (!match || match.index < 0) return text;
+    return text.slice(0, match.index).trim();
+}
+
+export function stripOrchestration(text: string): string {
+    // Strip fenced JSON blocks only if they contain orchestration keys
+    let cleaned = text.replace(/```json\n([\s\S]*?)\n```/g, (_match, inner) =>
+        ORCH_KEYS.test(inner) ? '' : _match);
+    // Strip inline orchestration objects containing subtasks array
+    cleaned = cleaned.replace(/\{[^{}]*"subtasks"\s*:\s*\[[\s\S]*?\]\s*\}/g, '').trim();
+    return stripPromptLeakage(cleaned);
+}