cli-jaw 2.0.1 → 2.0.2

package/public/js/ui.ts

@@ -1,6 +1,6 @@
 // ── UI Utilities ──
 import { state } from './state.js';
-import { renderMarkdown, escapeHtml, stripOrchestration, linkifyFilePaths } from './render.js';
+import { renderMarkdown, escapeHtml, sanitizeHtml, stripOrchestration, linkifyFilePaths } from './render.js';
 import { renderMermaidBlocks } from './render.js';
 import { generateId } from './uuid.js';
 import { getAppName } from './features/appname.js';
@@ -15,6 +15,13 @@ import { activateWidgets } from './diagram/iframe-renderer.js';
 import { renderLiveToolActivity, cleanupToolElements, bindToolItemInteractions, type ToolLogEntry } from './features/tool-ui.js';
 import { ICONS, emojiToIcon, emojiToStatus, isCompletionEmoji } from './icons.js';
 import { providerIcon } from './provider-icons.js';
+import { findRunningProcessStepMatch } from './features/process-step-match.js';
+import {
+    parseToolLogBounded,
+    sanitizeToolLogForDurableStorage,
+    serializeSanitizedToolLog,
+    type SanitizedToolLogEntry,
+} from '../../src/shared/tool-log-sanitize.js';
 import {
     createProcessBlock,
     addStep,
@@ -24,10 +31,14 @@ import {
     stopBlockTicker,
     buildProcessBlockHtml,
     bindProcessBlockInteractions,
+    getStoredProcessStepDetail,
+    mergeStoredProcessStepDetail,
+    processStepMetaFromStore,
+    releaseProcessBlockDetails,
     type ProcessStep,
     type ProcessBlockState,
 } from './features/process-block.js';
-interface MessageItem { role: string; content: string; tool_log?: string | null; cli?: string | null; }
+interface MessageItem { role: string; content: string; tool_log?: string | null; trace_run_id?: string | null; cli?: string | null; }
 interface QueuedOverlayItem { id: string; prompt: string; source?: string; ts?: number; }
 interface ActiveRunSnapshot { running?: boolean; cli?: string; text?: string; toolLog?: ToolLogEntry[]; startedAt?: number; }
 
@@ -37,14 +48,27 @@ function processStepType(toolType?: string): ProcessStep['type'] {
         : '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';
+}
+
 function parseToolLog(toolLog?: string | null): ToolLogEntry[] {
-    if (!toolLog) return [];
-    try {
-        const parsed = JSON.parse(toolLog);
-        return Array.isArray(parsed) ? parsed : [];
-    } catch {
-        return [];
-    }
+    return parseToolLogBounded(toolLog) as ToolLogEntry[];
+}
+
+function sanitizedToolLogJson(toolLog?: string | null): string | null {
+    return serializeSanitizedToolLog(parseToolLog(toolLog));
+}
+
+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) };
 }
 
 function getAgentIcon(_cli?: string | null): string {
@@ -53,15 +77,20 @@ function getAgentIcon(_cli?: string | null): string {
 
 function toProcessSteps(tools: ToolLogEntry[], runStartedAt?: number): ProcessStep[] {
     const baseTime = runStartedAt && runStartedAt > 0 ? runStartedAt : Date.now();
-    return tools.map((tool: any) => ({
+    return tools.map((tool) => ({
         id: generateId(),
         icon: tool.icon ? emojiToIcon(tool.icon) : ICONS.tool,
         rawIcon: tool.rawIcon || tool.icon || '',
-        label: tool.label || tool.name || 'tool',
+        label: fallbackToolLabel(tool),
         type: processStepType(tool.toolType),
         detail: tool.detail || '',
         stepRef: tool.stepRef || '',
-        status: tool.status || 'done',
+        traceRunId: tool.traceRunId || '',
+        traceSeq: tool.traceSeq,
+        detailAvailable: tool.detailAvailable,
+        detailBytes: tool.detailBytes,
+        rawRetentionStatus: tool.rawRetentionStatus,
+        status: processStepStatus(tool.status),
         startTime: baseTime,
     }));
 }
@@ -102,7 +131,10 @@ function normalizeAgentToolBlocks(agentMsg: HTMLElement): void {
     }
 
     for (const block of blocks) {
-        if (block !== keep) block.remove();
+        if (block !== keep) {
+            releaseProcessBlockDetails(block);
+            block.remove();
+        }
     }
 }
 
@@ -121,21 +153,34 @@ function processStepStatusFromDom(status?: string): ProcessStep['status'] {
 }
 
 function processStepFromDom(row: HTMLElement): ProcessStep | null {
-    const id = row.dataset.stepId || '';
+    const id = row.dataset['stepId'] || '';
     if (!id) return null;
+    const storedMeta = processStepMetaFromStore(id);
     const label = row.querySelector('.process-step-label')?.textContent?.trim() || '';
-    const detail = row.querySelector('.process-step-full')?.textContent || '';
+    const pre = row.querySelector('.process-step-full') as HTMLElement | null;
+    const detail = pre?.dataset['detailLazy'] === 'true'
+        ? getStoredProcessStepDetail(id) || storedMeta?.preview || ''
+        : pre?.textContent || getStoredProcessStepDetail(id) || storedMeta?.preview || '';
     const iconEl = row.querySelector('.process-step-icon') as HTMLElement | null;
     const icon = iconEl?.innerHTML || ICONS.tool;
-    const startTime = Number(row.dataset.startTime || '');
+    const startTime = Number(row.dataset['startTime'] || '');
     return {
         id,
-        type: processStepTypeFromDom(row.dataset.type),
-        icon,
-        label,
+        type: storedMeta?.type || processStepTypeFromDom(row.dataset['type']),
+        icon: storedMeta?.icon || icon,
+        rawIcon: storedMeta?.rawIcon,
+        label: storedMeta?.label || label,
         detail,
-        stepRef: row.dataset.stepRef || '',
-        status: processStepStatusFromDom(row.dataset.status),
+        detailPreview: storedMeta?.preview,
+        detailLength: storedMeta?.detailLength,
+        detailTruncated: storedMeta?.detailTruncated,
+        stepRef: storedMeta?.stepRef || row.dataset['stepRef'] || '',
+        traceRunId: storedMeta?.traceRunId || row.dataset['traceRunId'] || '',
+        traceSeq: storedMeta?.traceSeq || Number(row.dataset['traceSeq'] || 0) || undefined,
+        detailAvailable: storedMeta?.detailAvailable,
+        detailBytes: storedMeta?.detailBytes,
+        rawRetentionStatus: storedMeta?.rawRetentionStatus,
+        status: storedMeta?.status || processStepStatusFromDom(row.dataset['status']),
         startTime: Number.isFinite(startTime) && startTime > 0 ? startTime : Date.now(),
     };
 }
@@ -153,25 +198,118 @@ function currentProcessBlockFromDom(agentMsg: HTMLElement): ProcessBlockState |
     };
 }
 
-function findLegacyRunningMatch(steps: ProcessStep[], step: ProcessStep): ProcessStep | null {
-    const matches = steps.filter(s => s.status === 'running'
-        && !s.stepRef
-        && s.label === step.label
-        && s.type === step.type);
-    return matches.length === 1 ? matches[0] : null;
+function processStepToToolLog(step: ProcessStep, finalize = false): ToolLogEntry {
+    const detail = getStoredProcessStepDetail(step.id) || step.detail || step.detailPreview || '';
+    const status = finalize && step.status === 'running' ? 'done' : step.status;
+    return {
+        icon: step.rawIcon || step.icon || ICONS.tool,
+        rawIcon: step.rawIcon || step.icon || '',
+        label: step.label || 'tool',
+        detail,
+        toolType: step.type,
+        stepRef: step.stepRef || '',
+        status,
+        traceRunId: step.traceRunId || '',
+        traceSeq: step.traceSeq,
+        detailAvailable: step.detailAvailable,
+        detailBytes: step.detailBytes,
+        rawRetentionStatus: step.rawRetentionStatus,
+    };
 }
 
-function findRunningProcessStepMatch(steps: ProcessStep[], step: ProcessStep): ProcessStep | null {
-    const running = [...steps].reverse().filter(s => s.status === 'running');
-    if (step.stepRef) {
-        return running.find(s => s.stepRef === step.stepRef)
-            ?? findLegacyRunningMatch(running, step);
-    }
-    return findLegacyRunningMatch(running, step);
+function processStepFromMeta(stepId: string, finalize = false): ToolLogEntry | null {
+    const meta = processStepMetaFromStore(stepId);
+    if (!meta) return null;
+    const status = finalize && meta.status === 'running' ? 'done' : meta.status;
+    return {
+        icon: meta.rawIcon || meta.icon || ICONS.tool,
+        rawIcon: meta.rawIcon || meta.icon || '',
+        label: meta.label || 'tool',
+        detail: getStoredProcessStepDetail(stepId) || meta.preview || '',
+        toolType: meta.type,
+        stepRef: meta.stepRef || '',
+        status,
+        traceRunId: meta.traceRunId || '',
+        traceSeq: meta.traceSeq,
+        detailAvailable: meta.detailAvailable,
+        detailBytes: meta.detailBytes,
+        rawRetentionStatus: meta.rawRetentionStatus,
+    };
 }
 
+function serializeProcessStepsForToolLog(source: ProcessBlockState | HTMLElement | null, finalize = false): ToolLogEntry[] {
+    if (!source) return [];
+    if ('steps' in source) return source.steps.map(step => processStepToToolLog(step, finalize));
+
+    const ids = new Set<string>();
+    source.querySelectorAll<HTMLElement>('.process-block[data-process-step-ids]').forEach(block => {
+        (block.dataset['processStepIds'] || '').split(/\s+/).filter(Boolean).forEach(id => ids.add(id));
+    });
+    source.querySelectorAll<HTMLElement>('.process-step[data-step-id]').forEach(row => {
+        const id = row.dataset['stepId'];
+        if (id) ids.add(id);
+    });
+    const entries: ToolLogEntry[] = [];
+    ids.forEach(id => {
+        const fromMeta = processStepFromMeta(id, finalize);
+        if (fromMeta) {
+            entries.push(fromMeta);
+            return;
+        }
+        const row = source.querySelector<HTMLElement>(`.process-step[data-step-id="${CSS.escape(id)}"]`);
+        const step = row ? processStepFromDom(row) : null;
+        if (step) entries.push(processStepToToolLog(step, finalize));
+    });
+    return entries;
+}
+
+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}`;
+}
+
+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());
+}
+
+function sanitizedToolLogEntries(entries: ToolLogEntry[]): ToolLogEntry[] {
+    return sanitizeToolLogForDurableStorage(entries) as ToolLogEntry[];
+}
+
+function sanitizedToolLogJsonFromEntries(entries: ToolLogEntry[]): string | null {
+    return serializeSanitizedToolLog(entries);
+}
+
+
 function removeAgentToolBlocks(agentMsg: HTMLElement): void {
-    for (const block of agentToolBlocks(agentMsg)) block.remove();
+    for (const block of agentToolBlocks(agentMsg)) {
+        releaseProcessBlockDetails(block);
+        block.remove();
+    }
 }
 
 export function setStatus(s: string): void {
@@ -240,7 +378,7 @@ export function addSystemMsg(text: string, extraClass?: string, type?: string):
     const div = document.createElement('div');
     const typeClass = type ? ` msg-type-${type}` : '';
     div.className = 'msg msg-system' + typeClass + (extraClass ? ' ' + extraClass : '');
-    div.innerHTML = text;
+    div.innerHTML = sanitizeHtml(text);
     if (vs.active) {
         vs.appendLiveItem(div);
     } else {
@@ -250,6 +388,8 @@ export function addSystemMsg(text: string, extraClass?: string, type?: string):
 }
 
 export function cleanupToolActivity(): void {
+    if (state.currentProcessBlock) releaseProcessBlockDetails(state.currentProcessBlock);
+    if (state.currentAgentDiv instanceof HTMLElement) releaseProcessBlockDetails(state.currentAgentDiv);
     cleanupToolElements();
     stopBlockTicker();
     state.currentAgentDiv = null;
@@ -295,15 +435,14 @@ export function showProcessStep(step: ProcessStep): void {
             const match = findRunningProcessStepMatch(state.currentProcessBlock.steps, step);
             if (match) {
                 step.icon = emojiToIcon(step.icon);
-                const mergedDetail = step.detail
-                    ? (match.detail ? `${match.detail}\n${step.detail}` : step.detail)
-                    : match.detail;
+                const mergedPreview = mergeStoredProcessStepDetail(match.id, step.detail);
                 replaceStep(state.currentProcessBlock, match.id, {
                     ...match,
                     ...step,
                     id: match.id,
                     rawIcon,
-                    detail: mergedDetail,
+                    detail: mergedPreview,
+                    detailPreview: mergedPreview,
                     label: step.label || match.label,
                     status: resolvedStatus,
                 });
@@ -321,7 +460,7 @@ export function showProcessStep(step: ProcessStep): void {
                         id: existingDone.id,
                         rawIcon,
                         status: resolvedStatus,
-                        detail: step.detail,
+                        detail: mergeStoredProcessStepDetail(existingDone.id, step.detail),
                     });
                     scrollToBottom();
                     return;
@@ -391,11 +530,12 @@ export function hydrateActiveRun(snapshot?: ActiveRunSnapshot | null): void {
     state.currentAgentDiv = ensureActiveRunMessage(snapshot.cli || null);
     state.currentProcessBlock = null;
     const body = state.currentAgentDiv.querySelector('.agent-body') as HTMLElement | null;
-    if (body && snapshot.toolLog?.length) {
+    const snapshotToolLog = sanitizedToolLogEntries(snapshot.toolLog || []);
+    if (body && snapshotToolLog.length) {
         normalizeAgentToolBlocks(state.currentAgentDiv);
         removeAgentToolBlocks(state.currentAgentDiv);
         const pb = createProcessBlock(body);
-        for (const tool of toProcessSteps(snapshot.toolLog, snapshot.startedAt)) addStep(pb, tool);
+        for (const tool of toProcessSteps(snapshotToolLog, snapshot.startedAt)) addStep(pb, tool);
         state.currentProcessBlock = pb;
     } else {
         normalizeAgentToolBlocks(state.currentAgentDiv);
@@ -426,8 +566,8 @@ let lastFinalizeTs = 0;
 
 function clearMermaidTransientState(root: HTMLElement): void {
     root.querySelectorAll<HTMLElement>('.mermaid-pending').forEach(el => {
-        delete el.dataset.mermaidQueued;
-        delete el.dataset.mermaidQueuedAt;
+        delete el.dataset['mermaidQueued'];
+        delete el.dataset['mermaidQueuedAt'];
     });
 }
 
@@ -439,6 +579,15 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
     cleanupToolElements();
     removeSkeleton();
     if (state.currentAgentDiv) normalizeAgentToolBlocks(state.currentAgentDiv);
+    const liveToolLog = serializeProcessStepsForToolLog(
+        state.currentProcessBlock ?? state.currentAgentDiv,
+        true,
+    );
+    const explicitToolLog = Array.isArray(toolLog) ? toolLog : [];
+    const durableToolLog = sanitizedToolLogEntries(
+        mergeExplicitAndLiveToolLogs(explicitToolLog, liveToolLog),
+    );
+    const durableToolLogJson = sanitizedToolLogJsonFromEntries(durableToolLog);
     const hadProcessBlock =
         Boolean(state.currentProcessBlock) ||
         Boolean(state.currentAgentDiv && hasAgentToolBlock(state.currentAgentDiv));
@@ -446,7 +595,7 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
         collapseBlock(state.currentProcessBlock);
         state.currentProcessBlock = null;
     }
-    const hasTools = toolLog && toolLog.length > 0;
+    const hasTools = durableToolLog.length > 0;
     if (text || hasTools) {
         if (!state.currentAgentDiv || !state.currentAgentDiv.isConnected) {
             state.currentAgentDiv = addMessage('agent', '');
@@ -463,7 +612,7 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
             if (contentEl) {
                 contentEl.insertAdjacentHTML(
                     'beforebegin',
-                    buildProcessBlockHtml(toProcessSteps(toolLog!), true),
+                    buildProcessBlockHtml(toProcessSteps(durableToolLog), true),
                 );
             }
         }
@@ -490,14 +639,24 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
             const div = state.currentAgentDiv;
             clearMermaidTransientState(div);
             div.querySelectorAll('.diagram-widget').forEach(widget => {
-                const encoded = (widget as HTMLElement).dataset.widgetHtml;
+                const encoded = (widget as HTMLElement).dataset['widgetHtml'];
                 if (!encoded) return;
                 const pending = document.createElement('div');
                 pending.className = 'diagram-widget-pending';
-                pending.dataset.diagramHtml = encoded;
+                pending.dataset['diagramHtml'] = encoded;
                 widget.replaceWith(pending);
             });
-            vs.appendLiveItem(div);
+            if (durableToolLogJson) {
+                vs.appendItem(buildLazyVirtualMessageItem({
+                    role: 'assistant',
+                    content: finalText,
+                    cli: null,
+                    tool_log: durableToolLogJson,
+                }));
+                releaseProcessBlockDetails(div);
+            } else {
+                vs.appendLiveItem(div);
+            }
             div.remove();
         }
 
@@ -505,7 +664,7 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
         if (finalText) upsertMessage({
             role: 'assistant',
             content: finalText,
-            tool_log: toolLog ? JSON.stringify(toolLog) : null,
+            tool_log: durableToolLogJson,
             timestamp: Date.now(),
         }).catch(() => {});
     }
@@ -663,7 +822,7 @@ export function showChatRestoreIndicator(reason: string): void {
         indicator.innerHTML = '<span class="chat-restore-dot"></span><span class="chat-restore-text">Restoring</span>';
         host.appendChild(indicator);
     }
-    indicator.dataset.restoreReason = reason;
+    indicator.dataset['restoreReason'] = reason;
 }
 
 export function hideChatRestoreIndicator(): void {
@@ -768,21 +927,26 @@ export async function loadStats(): Promise<void> {
 
 // ── Virtual scroll bootstrap helpers ──
 
-function buildVirtualHistoryItems(msgs: MessageItem[]): VirtualItem[] {
-    return msgs.map((m) => {
+function buildLazyVirtualMessageItem(m: MessageItem): VirtualItem {
         const role = m.role === 'assistant' ? 'agent' : m.role;
         const rawContent = stripOrchestration(
             role === 'user' ? formatUserPrompt(m.content) : m.content,
         );
         const label = escapeHtml(role === 'user' ? t('msg.you') : getAppName());
-        const rawToolLog = m.role === 'assistant' && m.tool_log ? escapeHtml(m.tool_log) : '';
+        const sanitizedToolLog = m.role === 'assistant' && m.tool_log
+            ? sanitizedToolLogJson(m.tool_log)
+            : null;
+        const rawToolLog = sanitizedToolLog ? escapeHtml(sanitizedToolLog) : '';
         const toolAttr = rawToolLog ? ` data-tool-log="${rawToolLog}"` : '';
         const contentHtml = `<div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}"></div>`;
         const html = role === 'agent'
             ? `<div class="msg msg-agent"><div class="agent-icon" aria-hidden="true">${getAgentIcon(m.cli)}</div><div class="agent-body"${toolAttr}>${contentHtml}<button class="msg-copy" title="Copy" aria-label="Copy message"></button></div></div>`
             : `<div class="msg msg-${role}"><div class="user-body"><div class="msg-label">${label}</div>${contentHtml}<button class="msg-copy" title="Copy" aria-label="Copy message"></button></div><div class="user-icon" aria-hidden="true">${getUserAvatarMarkup()}</div></div>`;
-        return { id: generateId(), html, height: 80 };
-    });
+        return { id: generateId(), html, height: 80, rehydratesProcessDetails: Boolean(rawToolLog) };
+}
+
+function buildVirtualHistoryItems(msgs: MessageItem[]): VirtualItem[] {
+    return msgs.map((m) => buildLazyVirtualMessageItem(normalizeMessageToolLog(m)));
 }
 
 function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualScroll>): void {
@@ -792,7 +956,7 @@ function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualScroll>)
             const raw = el.getAttribute('data-raw') || '';
             const msgEl = el.closest('.msg-agent') as HTMLElement | null;
             const body = msgEl?.querySelector('.agent-body') as HTMLElement | null;
-            const rawToolLog = body?.dataset.toolLog || '';
+            const rawToolLog = body?.dataset['toolLog'] || '';
             if (msgEl && body && rawToolLog && !hasAgentToolBlock(msgEl)) {
                 const tools = parseToolLog(rawToolLog);
                 if (tools.length > 0) {
@@ -801,7 +965,7 @@ function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualScroll>)
                         buildProcessBlockHtml(toProcessSteps(tools), true),
                     );
                 }
-                delete body.dataset.toolLog;
+                delete body.dataset['toolLog'];
                 normalizeAgentToolBlocks(msgEl);
             }
             el.innerHTML = raw ? renderMarkdown(raw) : '';
@@ -845,15 +1009,16 @@ export async function loadMessages(): Promise<void> {
     const msgs = await api<MessageItem[]>('/api/messages');
 
     if (msgs !== null) {
+        const safeMsgs = msgs.map(normalizeMessageToolLog);
         // Successful fetch — clear DOM and render (even if empty array after /clear)
         vs.clear();
         if (chatEl) chatEl.innerHTML = '';
 
-        if (msgs.length >= VS_THRESHOLD) {
-            const vsItems = buildVirtualHistoryItems(msgs);
+        if (safeMsgs.length >= VS_THRESHOLD) {
+            const vsItems = buildVirtualHistoryItems(safeMsgs);
             bootstrapVirtualHistory(vsItems, makeBootstrapDeps(vs));
         } else {
-            msgs.forEach(m => {
+            safeMsgs.forEach(m => {
                 const div = addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content, m.cli);
                 if (m.role === 'assistant') {
                     const tools = parseToolLog(m.tool_log);
@@ -869,10 +1034,10 @@ export async function loadMessages(): Promise<void> {
             });
         }
         // Sync to IndexedDB (full replace — server is source of truth)
-        cacheMessages(msgs.map(m => ({
+        cacheMessages(safeMsgs.map(m => ({
             role: m.role, content: m.content, cli: m.cli ?? null, tool_log: m.tool_log ?? null, timestamp: Date.now(),
         }))).catch(() => {});
-        updateStatMsgs(msgs.length);
+        updateStatMsgs(safeMsgs.length);
         showEmptyState();
         return;
     }
@@ -885,11 +1050,12 @@ export async function loadMessages(): Promise<void> {
     // DOM empty + server down — try IndexedDB cache
     const cached = await getScopedMessages();
     if (cached.length > 0) {
-        if (cached.length >= VS_THRESHOLD) {
-            const vsItems = buildVirtualHistoryItems(cached as MessageItem[]);
+        const safeCached = (cached as MessageItem[]).map(normalizeMessageToolLog);
+        if (safeCached.length >= VS_THRESHOLD) {
+            const vsItems = buildVirtualHistoryItems(safeCached);
             bootstrapVirtualHistory(vsItems, makeBootstrapDeps(vs));
         } else {
-            cached.forEach(m => {
+            safeCached.forEach(m => {
                 const div = addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content, m.cli);
                 if (m.role === 'assistant' && m.tool_log) {
                     const tools = parseToolLog(m.tool_log);
@@ -905,7 +1071,7 @@ export async function loadMessages(): Promise<void> {
             });
         }
         addSystemMsg(`${ICONS.warning} ${t('ui.offline.banner')}`);
-        updateStatMsgs(cached.length);
+        updateStatMsgs(safeCached.length);
     }
     showEmptyState();
 }