cli-jaw 2.0.3 → 2.0.5

package/public/js/features/process-block.ts

@@ -1,11 +1,18 @@
 import { escapeHtml } from '../render.js';
 import { ICONS } from '../icons.js';
+
+declare global {
+    interface Window {
+        __jawProcessBlockLayoutMutation?: (anchor: Element | null, mutate: () => void) => void;
+    }
+}
 export interface ProcessStep {
     id: string;
     type: 'tool' | 'thinking' | 'search' | 'subagent';
     icon: string;
     rawIcon?: string | undefined;
     label: string;
+    isEmployee?: boolean | undefined;
     detail?: string;
     detailPreview?: string | undefined;
     detailLength?: number | undefined;
@@ -36,6 +43,7 @@ export interface StoredProcessStepMeta {
     icon: string;
     rawIcon?: string | undefined;
     label: string;
+    isEmployee?: boolean | undefined;
     stepRef?: string | undefined;
     traceRunId?: string | undefined; traceSeq?: number | undefined; detailAvailable?: boolean | undefined; detailBytes?: number | undefined; rawRetentionStatus?: string | undefined;
     status: ProcessStep['status'];
@@ -117,6 +125,7 @@ export function compactProcessStepForStorage(step: ProcessStep): ProcessStep {
         icon: step.icon,
         rawIcon: step.rawIcon,
         label: step.label,
+        isEmployee: step.isEmployee,
         stepRef: step.stepRef,
         traceRunId: step.traceRunId, traceSeq: step.traceSeq, detailAvailable: step.detailAvailable,
         detailBytes: step.detailBytes, rawRetentionStatus: step.rawRetentionStatus,
@@ -164,6 +173,7 @@ function updateStoredStepMeta(step: ProcessStep): void {
         icon: compact.icon,
         rawIcon: compact.rawIcon,
         label: compact.label,
+        isEmployee: compact.isEmployee,
         stepRef: compact.stepRef,
         traceRunId: compact.traceRunId, traceSeq: compact.traceSeq, detailAvailable: compact.detailAvailable,
         detailBytes: compact.detailBytes, rawRetentionStatus: compact.rawRetentionStatus,
@@ -204,6 +214,9 @@ function renderStep(step: ProcessStep): string {
     const badgeClass = `process-step-badge ${step.type}`;
     const badgeText = step.type.toUpperCase();
     const label = escapeHtml(step.label || step.icon || '');
+    const employeeMarker = step.isEmployee
+        ? '<span class="process-step-origin" aria-label="Employee tool">(E)</span>'
+        : '';
     const icon = renderTrustedIcon(step.icon);
     const detail = step.detailPreview || step.detail || '';
     const detailId = `process-detail-${step.id}`;
@@ -217,6 +230,7 @@ function renderStep(step: ProcessStep): string {
         data-step-id="${step.id}"
         data-type="${escapeHtml(step.type)}"
         data-status="${escapeHtml(step.status)}"
+        data-is-employee="${step.isEmployee ? 'true' : ''}"
         data-step-ref="${escapeHtml(step.stepRef || '')}"
         data-trace-run-id="${escapeHtml(step.traceRunId || '')}"
         data-trace-seq="${String(step.traceSeq || '')}"
@@ -226,6 +240,7 @@ function renderStep(step: ProcessStep): string {
             <span class="process-step-icon" aria-hidden="true">${icon}</span>
             <span class="${badgeClass}">${badgeText}</span>
             <span class="process-step-main">
+                ${employeeMarker}
                 <span class="process-step-label">${label}</span>
                 ${snippetHtml}
             </span>
@@ -300,6 +315,15 @@ function toggleStepDetails(toggle: HTMLElement): void {
     if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
 }
 
+function withProcessBlockLayoutMutation(anchor: Element | null, mutate: () => void): void {
+    const hook = window.__jawProcessBlockLayoutMutation;
+    if (typeof hook === 'function') {
+        hook(anchor, mutate);
+        return;
+    }
+    mutate();
+}
+
 export function bindProcessBlockInteractions(root: HTMLElement): void {
     if (root.dataset['processBlockBound'] === '1') return;
     root.addEventListener('click', (event) => {
@@ -318,7 +342,9 @@ export function bindProcessBlockInteractions(root: HTMLElement): void {
 
         const stepToggle = target.closest('.process-step-toggle') as HTMLElement | null;
         if (stepToggle) {
-            toggleStepDetails(stepToggle);
+            withProcessBlockLayoutMutation(stepToggle.closest('.process-step, .process-block'), () => {
+                toggleStepDetails(stepToggle);
+            });
             return;
         }
 
@@ -326,11 +352,13 @@ export function bindProcessBlockInteractions(root: HTMLElement): void {
         if (summary) {
             const block = summary.closest('.process-block');
             if (!block) return;
-            const expanding = block.classList.contains('collapsed');
-            block.classList.toggle('collapsed', !expanding);
-            summary.setAttribute('aria-expanded', expanding ? 'true' : 'false');
-            const chevron = summary.querySelector('.process-chevron');
-            if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
+            withProcessBlockLayoutMutation(block, () => {
+                const expanding = block.classList.contains('collapsed');
+                block.classList.toggle('collapsed', !expanding);
+                summary.setAttribute('aria-expanded', expanding ? 'true' : 'false');
+                const chevron = summary.querySelector('.process-chevron');
+                if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
+            });
         }
     });
     root.dataset['processBlockBound'] = '1';

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/process-step-match.ts

@@ -4,7 +4,8 @@ export function findLegacyRunningMatch(steps: ProcessStep[], step: ProcessStep):
     const matches = steps.filter(s => s.status === 'running'
         && !s.stepRef
         && s.label === step.label
-        && s.type === step.type);
+        && s.type === step.type
+        && Boolean(s.isEmployee) === Boolean(step.isEmployee));
     return matches.length === 1 ? matches[0]! : null;
 }
 

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();
+        }
+    });
+}