cli-jaw 2.0.3 → 2.0.5

package/public/js/ui.ts

@@ -1,6 +1,6 @@
 // ── UI Utilities ──
 import { state } from './state.js';
-import { renderMarkdown, escapeHtml, sanitizeHtml, stripOrchestration, linkifyFilePaths } from './render.js';
+import { renderMarkdown, escapeHtml, stripOrchestration, linkifyFilePaths } from './render.js';
 import { renderMermaidBlocks } from './render.js';
 import { generateId } from './uuid.js';
 import { getAppName } from './features/appname.js';
@@ -12,7 +12,15 @@ import { getVirtualScroll, VS_THRESHOLD, type RestoreReason, type VirtualItem }
 import { bootstrapVirtualHistory, type VirtualHistoryBootstrapDeps } from './virtual-scroll-bootstrap.js';
 import { createStreamRenderer, appendChunk, finalizeStream, hydrateStreamRenderer, type StreamState } from './streaming-render.js';
 import { activateWidgets } from './diagram/iframe-renderer.js';
-import { renderLiveToolActivity, cleanupToolElements, bindToolItemInteractions, type ToolLogEntry } from './features/tool-ui.js';
+import { renderLiveToolActivity, cleanupToolElements, type ToolLogEntry } from './features/tool-ui.js';
+import { initMessageActions } from './features/message-actions.js';
+import { addSystemMsg, addMessage, removeSkeleton } from './features/chat-messages.js';
+import { buildLazyVirtualMessageItem } from './features/message-item-html.js';
+import { loadMessages } from './features/message-history.js';
+import { isChatNearBottom, reconcileChatBottomAfterLayout, showChatRestoreIndicator, hideChatRestoreIndicator, hideChatRestoreIndicatorAfterSettle, reconcileChatBottomAfterRestore, scrollToBottom, ensureScrollTracking, canFollowAfterRestore, markFollowingBottom } from './features/chat-scroll.js';
+import { currentProcessBlockFromDom, hasAgentToolBlock, normalizeAgentToolBlocks, removeAgentToolBlocks, serializeProcessStepsForToolLog } from './features/process-block-dom.js';
+import { mergeExplicitAndLiveToolLogs, normalizeMessageToolLog, parseToolLog, sanitizedToolLogEntries, sanitizedToolLogJson, sanitizedToolLogJsonFromEntries, toProcessSteps, type ActiveRunSnapshot, type MessageItem, type QueuedOverlayItem } from './features/process-log-adapter.js';
+import { setStatus, updateQueueBadge, updateStatMsgs, loadStats } from './features/ui-status.js';
 import { ICONS, emojiToIcon, emojiToStatus, isCompletionEmoji } from './icons.js';
 import { providerIcon } from './provider-icons.js';
 import { findRunningProcessStepMatch } from './features/process-step-match.js';
@@ -30,7 +38,6 @@ import {
     collapseBlock,
     stopBlockTicker,
     buildProcessBlockHtml,
-    bindProcessBlockInteractions,
     getStoredProcessStepDetail,
     mergeStoredProcessStepDetail,
     processStepMetaFromStore,
@@ -38,353 +45,24 @@ import {
     type ProcessStep,
     type ProcessBlockState,
 } from './features/process-block.js';
-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; }
 
-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';
-}
-
-function parseToolLog(toolLog?: string | null): ToolLogEntry[] {
-    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) };
-}
+export {
+    setStatus, updateQueueBadge, loadStats, loadMessages,
+    addSystemMsg, addMessage,
+    isChatNearBottom, reconcileChatBottomAfterLayout, showChatRestoreIndicator,
+    hideChatRestoreIndicator, hideChatRestoreIndicatorAfterSettle, reconcileChatBottomAfterRestore,
+    scrollToBottom,
+};
 
 function getAgentIcon(_cli?: string | null): string {
     return getAgentAvatarMarkup();
 }
 
-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),
-        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,
-    }));
-}
-
-const TOOL_BLOCK_SELECTOR =
-    ':scope > .process-block, :scope > .tool-group, ' +
-    ':scope > .msg-content > .process-block, :scope > .msg-content > .tool-group';
-
-function agentBody(agentMsg: HTMLElement): HTMLElement | null {
-    return agentMsg.querySelector('.agent-body') as HTMLElement | null;
-}
-
-function agentToolBlocks(agentMsg: HTMLElement): HTMLElement[] {
-    const body = agentBody(agentMsg);
-    return body ? Array.from(body.querySelectorAll<HTMLElement>(TOOL_BLOCK_SELECTOR)) : [];
-}
-
-function preferredAgentToolBlock(body: HTMLElement): HTMLElement | null {
-    const content = body.querySelector(':scope > .msg-content') as HTMLElement | null;
-    return body.querySelector(':scope > .process-block')
-        ?? body.querySelector(':scope > .tool-group')
-        ?? content?.querySelector(':scope > .process-block')
-        ?? content?.querySelector(':scope > .tool-group')
-        ?? null;
-}
-
-function normalizeAgentToolBlocks(agentMsg: HTMLElement): void {
-    const body = agentBody(agentMsg);
-    if (!body) return;
-
-    const content = body.querySelector('.msg-content') as HTMLElement | null;
-    const blocks = agentToolBlocks(agentMsg);
-    if (blocks.length === 0) return;
-
-    const keep = preferredAgentToolBlock(body) ?? blocks[0];
-    if (content && keep.parentElement !== body) {
-        body.insertBefore(keep, content);
-    }
-
-    for (const block of blocks) {
-        if (block !== keep) {
-            releaseProcessBlockDetails(block);
-            block.remove();
-        }
-    }
-}
-
-function hasAgentToolBlock(agentMsg: HTMLElement): boolean {
-    return agentToolBlocks(agentMsg).length > 0;
-}
-
-function processStepTypeFromDom(type?: string): ProcessStep['type'] {
-    return type === 'thinking' || type === 'search' || type === 'subagent'
-        ? type
-        : 'tool';
-}
-
-function processStepStatusFromDom(status?: string): ProcessStep['status'] {
-    return status === 'done' || status === 'error' ? status : 'running';
-}
-
-function processStepFromDom(row: HTMLElement): ProcessStep | null {
-    const id = row.dataset['stepId'] || '';
-    if (!id) return null;
-    const storedMeta = processStepMetaFromStore(id);
-    const label = row.querySelector('.process-step-label')?.textContent?.trim() || '';
-    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'] || '');
-    return {
-        id,
-        type: storedMeta?.type || processStepTypeFromDom(row.dataset['type']),
-        icon: storedMeta?.icon || icon,
-        rawIcon: storedMeta?.rawIcon,
-        label: storedMeta?.label || label,
-        detail,
-        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(),
-    };
-}
-
-function currentProcessBlockFromDom(agentMsg: HTMLElement): ProcessBlockState | null {
-    const block = agentBody(agentMsg)?.querySelector(':scope > .process-block') as HTMLElement | null;
-    if (!block) return null;
-    const steps = Array.from(block.querySelectorAll<HTMLElement>('.process-step'))
-        .map(processStepFromDom)
-        .filter((step): step is ProcessStep => Boolean(step));
-    return {
-        element: block,
-        steps,
-        collapsed: block.classList.contains('collapsed'),
-    };
-}
-
-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 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)) {
-        releaseProcessBlockDetails(block);
-        block.remove();
-    }
-}
-
-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); }
+declare global {
+    interface Window {
+        __jawProcessBlockLayoutMutation?: (anchor: Element | null, mutate: () => void) => void;
     }
-    el.textContent = count > 0 ? String(count) : '';
-    el.style.display = count > 0 ? 'flex' : 'none';
-}
-
-function showSkeleton(): void {
-    const container = document.getElementById('chatMessages');
-    if (!container || container.querySelector('.skeleton-msg')) return;
-    if (state.currentAgentDiv && state.currentAgentDiv.isConnected) return;
-    // No flushToDOM — skeleton goes directly into container as overlay
-    hideEmptyState();
-    const skel = document.createElement('div');
-    skel.className = 'skeleton-msg';
-    skel.innerHTML = '<div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div>';
-    container.appendChild(skel);
-    scrollToBottom();
-}
-
-function removeSkeleton(): void {
-    document.querySelectorAll('.skeleton-msg').forEach(el => el.remove());
-}
-
-function hideEmptyState(): void {
-    document.getElementById('emptyState')?.classList.remove('visible');
-}
-
-function showEmptyState(): void {
-    const container = document.getElementById('chatMessages');
-    if (container && container.children.length === 0) {
-        document.getElementById('emptyState')?.classList.add('visible');
-    }
-}
-
-export function addSystemMsg(text: string, extraClass?: string, type?: string): void {
-    const container = document.getElementById('chatMessages');
-    if (!container) return;
-    const vs = getVirtualScroll();
-    hideEmptyState();
-    const div = document.createElement('div');
-    const typeClass = type ? ` msg-type-${type}` : '';
-    div.className = 'msg msg-system' + typeClass + (extraClass ? ' ' + extraClass : '');
-    div.innerHTML = sanitizeHtml(text);
-    if (vs.active) {
-        vs.appendLiveItem(div);
-    } else {
-        container.appendChild(div);
-    }
-    scrollToBottom();
 }
 
 export function cleanupToolActivity(): void {
@@ -473,6 +151,7 @@ export function showProcessStep(step: ProcessStep): void {
                 .find(s => s.status === 'running'
                     && s.label === step.label
                     && s.type === step.type
+                    && Boolean(s.isEmployee) === Boolean(step.isEmployee)
                     && !s.detail);
             if (ghost) {
                 replaceStep(state.currentProcessBlock, ghost.id, step);
@@ -652,7 +331,7 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
                     content: finalText,
                     cli: null,
                     tool_log: durableToolLogJson,
-                }));
+                }, vs.count));
                 releaseProcessBlockDetails(div);
             } else {
                 vs.appendLiveItem(div);
@@ -675,218 +354,6 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
     loadStats();
 }
 
-/** Convert server-stored prompts back to display format on reload.
- *  Handles: file uploads, multi-file, voice+file combos (ko + en patterns) */
-function formatUserPrompt(text: string): string {
-    // Multi-file: "[사용자가 파일 3개를 보냈습니다]" or "[User sent 3 files]"
-    const multiMatch = text.match(/^\[(?:사용자가 파일 (\d+)개를 보냈습니다|User sent (\d+) files)\]/);
-    if (multiMatch) {
-        const count = multiMatch[1] || multiMatch[2];
-        const userMsgMatch = text.match(/(?:사용자 메시지|User message): (.+)$/s);
-        const userMsg = userMsgMatch ? ' ' + userMsgMatch[1].trim() : '';
-        return `📎 [${count} files]${userMsg}`;
-    }
-
-    // Single file: "[사용자가 파일을 보냈습니다: /path/to/file.md]"
-    const fileMatch = text.match(/^\[(?:사용자가 파일을 보냈습니다|User sent a file): ([^\]]+)\]/);
-    if (fileMatch) {
-        const fileName = fileMatch[1].split('/').pop() || fileMatch[1];
-        // Check if voice is also present (🎤 after file block)
-        const voiceMatch = text.match(/🎤\s*(.{0,80})/);
-        const voicePart = voiceMatch ? `${t('chat.voice.label')} ` : '';
-        const userMsgMatch = text.match(/(?:사용자 메시지|User message): (.+)$/s);
-        const userMsg = userMsgMatch ? ' ' + userMsgMatch[1].trim() : '';
-        return `${voicePart}📎 [${fileName}]${userMsg}`;
-    }
-
-    return text;
-}
-
-export function addMessage(role: string, text: string, cli?: string | null): HTMLDivElement {
-    const container = document.getElementById('chatMessages');
-    const vs = getVirtualScroll();
-    hideEmptyState();
-    removeSkeleton();
-
-    // For user messages: convert file-upload prompts to clean display format
-    const displayText = role === 'user' ? formatUserPrompt(text) : text;
-    const rendered = renderMarkdown(displayText);
-    const label = escapeHtml(role === 'user' ? t('msg.you') : getAppName());
-
-    const div = document.createElement('div');
-    if (role === 'agent') {
-        div.className = 'msg msg-agent';
-        div.innerHTML = `<div class="agent-icon" aria-hidden="true">${getAgentIcon(cli)}</div><div class="agent-body"><div class="msg-content">${rendered}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div>`;
-    } else {
-        div.className = `msg msg-${role}`;
-        div.innerHTML = `<div class="user-body"><div class="msg-label">${label}</div><div class="msg-content">${rendered}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div><div class="user-icon" aria-hidden="true">${getUserAvatarMarkup()}</div>`;
-    }
-    const contentEl = div.querySelector('.msg-content');
-    if (contentEl) contentEl.setAttribute('data-raw', stripOrchestration(text));
-
-    // Streaming placeholder (agent + empty text) must stay in real DOM
-    // so state.currentAgentDiv reference remains valid during streaming.
-    const isStreamingPlaceholder = role === 'agent' && !text;
-
-    if (vs.active && !isStreamingPlaceholder) {
-        if (div.classList.contains('msg-agent')) normalizeAgentToolBlocks(div);
-        vs.appendLiveItem(div);
-    } else {
-        container?.appendChild(div);
-        activateWidgets(div);
-
-        // Check if live growth crossed threshold — activate VS
-        if (!vs.active && !isStreamingPlaceholder && container) {
-            const msgCount = container.querySelectorAll('.msg').length;
-            if (msgCount >= VS_THRESHOLD) {
-                // Feed all existing DOM messages into VS items array
-                container.querySelectorAll('.msg').forEach(el => {
-                    if (el.classList.contains('msg-agent')) normalizeAgentToolBlocks(el as HTMLElement);
-                    vs.addItem(generateId(), el.outerHTML);
-                });
-                // Wire widget activation + file path linkification for VS-rendered items
-                vs.onPostRender = (viewport: HTMLElement) => {
-                    activateWidgets(viewport);
-                    linkifyFilePaths(viewport);
-                    // Phase 127-F7b: render mermaid in newly mounted VS viewport
-                    void renderMermaidBlocks(viewport, { immediate: true });
-                };
-            }
-        }
-    }
-    // Force scroll for user messages so they're always visible after sending;
-    // agent/system messages respect the user's current scroll position.
-    scrollToBottom(role === 'user');
-    return div;
-}
-
-let scrollRAF: number | null = null;
-let userNearBottom = true;
-let scrollTrackingBound = false;
-const SCROLL_BOTTOM_THRESHOLD = 80; // px
-const RESTORE_INDICATOR_SETTLE_MS = 1100;
-let chatRestoreIndicatorHideTimer: number | null = null;
-
-function ensureScrollTracking(): void {
-    if (scrollTrackingBound) return;
-    const c = document.getElementById('chatMessages');
-    if (!c) return;
-    scrollTrackingBound = true;
-    c.addEventListener('scroll', () => {
-        const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
-        userNearBottom = dist < SCROLL_BOTTOM_THRESHOLD;
-    }, { passive: true });
-}
-
-export function isChatNearBottom(): boolean {
-    ensureScrollTracking();
-    const c = document.getElementById('chatMessages');
-    if (!c) return userNearBottom;
-    const vs = getVirtualScroll();
-    if (vs.active) return vs.isNearBottom(SCROLL_BOTTOM_THRESHOLD);
-    const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
-    return dist < SCROLL_BOTTOM_THRESHOLD;
-}
-
-export function reconcileChatBottomAfterLayout(shouldFollow = isChatNearBottom()): void {
-    ensureScrollTracking();
-    if (!shouldFollow) return;
-    userNearBottom = true;
-    const vs = getVirtualScroll();
-    if (vs.active) {
-        vs.reconcileBottomAfterLayout('reconnect', true);
-        return;
-    }
-    requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-            const c = document.getElementById('chatMessages');
-            if (c) c.scrollTop = c.scrollHeight;
-        });
-    });
-}
-
-export function showChatRestoreIndicator(reason: string): void {
-    if (chatRestoreIndicatorHideTimer !== null) {
-        window.clearTimeout(chatRestoreIndicatorHideTimer);
-        chatRestoreIndicatorHideTimer = null;
-    }
-    const host = document.querySelector('.chat-area') as HTMLElement | null;
-    if (!host) return;
-    let indicator = host.querySelector('[data-restore-indicator="true"]') as HTMLElement | null;
-    if (!indicator) {
-        indicator = document.createElement('div');
-        indicator.className = 'chat-restore-indicator';
-        indicator.setAttribute('data-restore-indicator', 'true');
-        indicator.setAttribute('role', 'status');
-        indicator.setAttribute('aria-live', 'polite');
-        indicator.innerHTML = '<span class="chat-restore-dot"></span><span class="chat-restore-text">Restoring</span>';
-        host.appendChild(indicator);
-    }
-    indicator.dataset['restoreReason'] = reason;
-}
-
-export function hideChatRestoreIndicator(): void {
-    if (chatRestoreIndicatorHideTimer !== null) {
-        window.clearTimeout(chatRestoreIndicatorHideTimer);
-        chatRestoreIndicatorHideTimer = null;
-    }
-    document.querySelectorAll('[data-restore-indicator="true"]').forEach(el => el.remove());
-}
-
-export function hideChatRestoreIndicatorAfterSettle(delayMs = RESTORE_INDICATOR_SETTLE_MS): void {
-    if (chatRestoreIndicatorHideTimer !== null) {
-        window.clearTimeout(chatRestoreIndicatorHideTimer);
-    }
-    chatRestoreIndicatorHideTimer = window.setTimeout(() => {
-        chatRestoreIndicatorHideTimer = null;
-        hideChatRestoreIndicator();
-    }, delayMs);
-}
-
-export function reconcileChatBottomAfterRestore(reason: string): void {
-    showChatRestoreIndicator(reason);
-    hideChatRestoreIndicatorAfterSettle();
-    ensureScrollTracking();
-    userNearBottom = true;
-    const vs = getVirtualScroll();
-    if (vs.active) {
-        vs.forceBottomAfterRestore(reason as RestoreReason);
-        return;
-    }
-    const scroll = () => {
-        const c = document.getElementById('chatMessages');
-        if (c) c.scrollTop = c.scrollHeight;
-    };
-    scroll();
-    requestAnimationFrame(scroll);
-    requestAnimationFrame(() => requestAnimationFrame(scroll));
-    window.setTimeout(scroll, 250);
-    window.setTimeout(scroll, 1000);
-    void document.fonts?.ready.then(scroll);
-}
-
-/** Scroll chat to bottom.
- *  @param force - bypass user-scroll detection (use for explicit user actions) */
-export function scrollToBottom(force = false): void {
-    ensureScrollTracking();
-    if (!force && !userNearBottom) return;
-    // After force scroll, mark as near-bottom so subsequent
-    // streaming chunks keep auto-scrolling until user scrolls up
-    if (force) userNearBottom = true;
-
-    const vs = getVirtualScroll();
-    if (vs.active) {
-        vs.scrollToBottom();
-        return;
-    }
-    if (scrollRAF) return;
-    scrollRAF = requestAnimationFrame(() => {
-        scrollRAF = null;
-        const c = document.getElementById('chatMessages');
-        if (c) c.scrollTop = c.scrollHeight;
-    });
-}
-
 export function switchTab(name: string, targetBtn: Element): void {
     document.querySelectorAll('.tab-btn').forEach(b => {
         b.classList.remove('active');
@@ -914,208 +381,10 @@ export function handleSave(): void {
     }
 }
 
-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);
-}
-
-// ── Virtual scroll bootstrap helpers ──
-
-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 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, rehydratesProcessDetails: Boolean(rawToolLog) };
-}
-
-function buildVirtualHistoryItems(msgs: MessageItem[]): VirtualItem[] {
-    return msgs.map((m) => buildLazyVirtualMessageItem(normalizeMessageToolLog(m)));
-}
-
-function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualScroll>): void {
-    vs.onLazyRender = (targets: HTMLElement[]) => {
-        for (const el of targets) {
-            if (!el.classList.contains('lazy-pending')) continue;
-            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'] || '';
-            if (msgEl && body && rawToolLog && !hasAgentToolBlock(msgEl)) {
-                const tools = parseToolLog(rawToolLog);
-                if (tools.length > 0) {
-                    el.insertAdjacentHTML(
-                        'beforebegin',
-                        buildProcessBlockHtml(toProcessSteps(tools), true),
-                    );
-                }
-                delete body.dataset['toolLog'];
-                normalizeAgentToolBlocks(msgEl);
-            }
-            el.innerHTML = raw ? renderMarkdown(raw) : '';
-            el.classList.remove('lazy-pending');
-            activateWidgets(el);
-            // Phase 127-F7a: lazy-rendered blocks (fresh markdown just converted)
-            void renderMermaidBlocks(el, { immediate: true });
-        }
-    };
-    vs.onPostRender = (viewport: HTMLElement) => {
-        activateWidgets(viewport);
-        linkifyFilePaths(viewport);
-        // Phase 127-F7b: mounted viewport scope — handles VS items that arrive
-        // pre-rendered with .mermaid-pending (buildVirtualHistoryItems path,
-        // addMessage append path). These are NOT .lazy-pending so F7a misses them.
-        void renderMermaidBlocks(viewport, { immediate: true });
-    };
-}
-
-function makeBootstrapDeps(
-    vs: ReturnType<typeof getVirtualScroll>,
-): VirtualHistoryBootstrapDeps {
-    return {
-        registerCallbacks: () => registerVirtualScrollCallbacks(vs),
-        setItems: (items, opts) => vs.setItems(items, opts),
-        activateIfNeeded: (toBottom) => vs.activateIfNeeded(toBottom),
-        scrollToBottom: () => vs.scrollToBottom(),
-    };
-}
-
-export async function loadMessages(): Promise<void> {
-    const vs = getVirtualScroll();
-    const chatEl = document.getElementById('chatMessages');
-
-    // Set scope from server workingDir (localStorage fallback if server is down)
-    try {
-        const settings = await api<{ workingDir?: string }>('/api/settings');
-        if (settings?.workingDir) setMessageScope(settings.workingDir);
-    } catch { /* localStorage fallback already initialized currentScope */ }
-
-    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 (safeMsgs.length >= VS_THRESHOLD) {
-            const vsItems = buildVirtualHistoryItems(safeMsgs);
-            bootstrapVirtualHistory(vsItems, makeBootstrapDeps(vs));
-        } else {
-            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);
-                    if (tools.length > 0) {
-                        const body = div.querySelector('.agent-body') as HTMLElement;
-                        if (body) {
-                            const pb = createProcessBlock(body);
-                            for (const tool of toProcessSteps(tools)) addStep(pb, tool);
-                            collapseBlock(pb);
-                        }
-                    }
-                }
-            });
-        }
-        // Sync to IndexedDB (full replace — server is source of truth)
-        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(safeMsgs.length);
-        showEmptyState();
-        return;
-    }
-
-    // Server unreachable (api() returned null) — preserve existing DOM messages
-    if (chatEl && chatEl.children.length > 0) {
-        showEmptyState();
-        return;
-    }
-    // DOM empty + server down — try IndexedDB cache
-    const cached = await getScopedMessages();
-    if (cached.length > 0) {
-        const safeCached = (cached as MessageItem[]).map(normalizeMessageToolLog);
-        if (safeCached.length >= VS_THRESHOLD) {
-            const vsItems = buildVirtualHistoryItems(safeCached);
-            bootstrapVirtualHistory(vsItems, makeBootstrapDeps(vs));
-        } else {
-            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);
-                    if (tools.length > 0) {
-                        const body = div.querySelector('.agent-body') as HTMLElement;
-                        if (body) {
-                            const pb = createProcessBlock(body);
-                            for (const tool of toProcessSteps(tools)) addStep(pb, tool);
-                            collapseBlock(pb);
-                        }
-                    }
-                }
-            });
-        }
-        addSystemMsg(`${ICONS.warning} ${t('ui.offline.banner')}`);
-        updateStatMsgs(safeCached.length);
-    }
-    showEmptyState();
-}
-
 // loadMemory removed — #memoryList element does not exist in HTML.
 // Memory is now handled by features/memory.ts via the modal UI.
 
-// ── Message copy delegation ──
+// ── Message action delegation ──
 export function initMsgCopy(): void {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) return;
-    bindProcessBlockInteractions(chatMessages);
-    bindToolItemInteractions(chatMessages);
-    chatMessages.addEventListener('click', (e) => {
-        const target = e.target as HTMLElement;
-
-        // Tool group toggle (event delegation instead of inline onclick)
-        const summary = target.closest('.tool-group-summary') as HTMLElement | null;
-        if (summary) {
-            const group = summary.closest('.tool-group');
-            const details = summary.nextElementSibling as HTMLElement;
-            if (group && details) {
-                const isExpanding = !group.classList.contains('expanded');
-                group.classList.toggle('expanded');
-                details.classList.toggle('collapsed');
-                summary.setAttribute('aria-expanded', isExpanding ? 'true' : 'false');
-            }
-            return;
-        }
-
-        // Message copy
-        const btn = target.closest('.msg-copy') as HTMLElement | null;
-        if (!btn) return;
-        const msg = btn.closest('.msg');
-        const content = msg?.querySelector('.msg-content') as HTMLElement | null;
-        if (!content) return;
-        const text = content.getAttribute('data-raw') || content.innerText || content.textContent || '';
-        navigator.clipboard.writeText(text).then(() => {
-            btn.classList.add('copied');
-            btn.innerHTML = ICONS.checkSimple;
-            setTimeout(() => {
-                btn.classList.remove('copied');
-                btn.textContent = '';
-            }, 600);
-        }).catch(() => { });
-    });
+    initMessageActions({ onStatus: addSystemMsg });
 }