cli-jaw 1.4.11 → 1.5.0

package/public/js/ui.ts

@@ -4,10 +4,43 @@ import { renderMarkdown, escapeHtml, stripOrchestration } from './render.js';
 import { getAppName } from './features/appname.js';
 import { t } from './features/i18n.js';
 import { api } from './api.js';
+import { cacheMessages, getCachedMessages, appendCachedMessage } from './features/idb-cache.js';
+import { getVirtualScroll, VS_THRESHOLD } from './virtual-scroll.js';
+import { createStreamRenderer, appendChunk, finalizeStream, type StreamState } from './streaming-render.js';
+import { renderLiveToolActivity, cleanupToolElements, bindToolItemInteractions, type ToolLogEntry } from './features/tool-ui.js';
+import {
+    createProcessBlock,
+    addStep,
+    replaceStep,
+    updateStepStatus,
+    collapseBlock,
+    buildProcessBlockHtml,
+    bindProcessBlockInteractions,
+    type ProcessStep,
+} from './features/process-block.js';
+interface MessageItem { role: string; content: string; tool_log?: string | null; }
 
-interface ToolLogEntry { icon: string; label: string; }
-interface MessageItem { role: string; content: string; }
-interface MemoryItem { key: string; value: string; }
+function parseToolLog(toolLog?: string | null): ToolLogEntry[] {
+    if (!toolLog) return [];
+    try {
+        const parsed = JSON.parse(toolLog);
+        return Array.isArray(parsed) ? parsed : [];
+    } catch {
+        return [];
+    }
+}
+
+function toProcessSteps(tools: ToolLogEntry[]): ProcessStep[] {
+    return tools.map((tool: any) => ({
+        id: crypto.randomUUID(),
+        icon: tool.icon || '🔧',
+        label: tool.label || tool.name || 'tool',
+        type: tool.toolType || 'tool',
+        detail: tool.detail || '',
+        status: tool.status || 'done',
+        startTime: Date.now(),
+    }));
+}
 
 export function setStatus(s: string): void {
     const badge = document.getElementById('statusBadge');
@@ -15,11 +48,13 @@ export function setStatus(s: string): void {
     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 (badge) { badge.className = 'status-badge status-running'; badge.textContent = 'running'; }
         if (btn) { btn.textContent = '■'; btn.title = t('btn.stop'); btn.classList.add('stop-mode'); }
+        showSkeleton();
     } else {
-        if (badge) { badge.className = 'status-badge status-idle'; badge.textContent = '⚡ idle'; }
+        if (badge) { badge.className = 'status-badge status-idle'; badge.textContent = 'idle'; }
         if (btn) { btn.textContent = '➤'; btn.title = 'Send'; btn.classList.remove('stop-mode'); }
+        removeSkeleton();
         updateQueueBadge(0);
     }
 }
@@ -29,7 +64,7 @@ export function updateQueueBadge(count: number): void {
     if (!el) {
         el = document.createElement('span');
         el.id = 'queueBadge';
-        el.style.cssText = 'position:absolute;top:-6px;right:-6px;background:#f80;color:#fff;border-radius:50%;font-size:11px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-weight:bold';
+        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); }
@@ -38,9 +73,40 @@ export function updateQueueBadge(count: number): void {
     el.style.display = count > 0 ? 'flex' : 'none';
 }
 
+function showSkeleton(): void {
+    const container = document.getElementById('chatMessages');
+    if (!container || container.querySelector('.skeleton-msg')) return;
+    const vs = getVirtualScroll();
+    if (vs.active) vs.flushToDOM();
+    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();
+    if (vs.active) vs.flushToDOM();
+    hideEmptyState();
     const div = document.createElement('div');
     const typeClass = type ? ` msg-type-${type}` : '';
     div.className = 'msg msg-system' + typeClass + (extraClass ? ' ' + extraClass : '');
@@ -49,13 +115,90 @@ export function addSystemMsg(text: string, extraClass?: string, type?: string):
     container.scrollTop = container.scrollHeight;
 }
 
+export function cleanupToolActivity(): void {
+    cleanupToolElements();
+    state.currentAgentDiv = null;
+    state.currentProcessBlock = null;
+}
+
+export function showLiveToolActivity(label: string): void {
+    removeSkeleton();
+    if (!state.currentAgentDiv || !state.currentAgentDiv.isConnected) {
+        state.currentAgentDiv = addMessage('agent', '');
+    }
+    renderLiveToolActivity(state.currentAgentDiv as HTMLElement, label);
+    scrollToBottom();
+}
+
+export function showProcessStep(step: ProcessStep): void {
+    removeSkeleton();
+    if (!state.currentAgentDiv || !state.currentAgentDiv.isConnected) {
+        state.currentAgentDiv = addMessage('agent', '');
+        state.currentProcessBlock = null;
+    }
+    if (!state.currentProcessBlock) {
+        const body = state.currentAgentDiv.querySelector('.agent-body') as HTMLElement;
+        if (body) {
+            state.currentProcessBlock = createProcessBlock(body);
+        }
+    }
+    if (state.currentProcessBlock) {
+        // Completion icons (✅/❌) update the last matching running step
+        if (step.icon === '✅' || step.icon === '❌') {
+            const status = step.icon === '✅' ? 'done' : 'error';
+            // Prefer matching by stepRef (stable correlation), fall back to label
+            const ref = step.stepRef;
+            const match = ref
+                ? [...state.currentProcessBlock.steps].reverse()
+                    .find(s => s.status === 'running' && s.stepRef === ref)
+                : [...state.currentProcessBlock.steps].reverse()
+                    .find(s => s.status === 'running' && s.label === step.label);
+            if (match) {
+                updateStepStatus(state.currentProcessBlock, match.id, status);
+                scrollToBottom();
+                return;
+            }
+            // No matching running step — try any running step as fallback
+            const anyRunning = [...state.currentProcessBlock.steps].reverse()
+                .find(s => s.status === 'running');
+            if (anyRunning) {
+                updateStepStatus(state.currentProcessBlock, anyRunning.id, status);
+                scrollToBottom();
+                return;
+            }
+        }
+        // Dedupe: detail이 있는 재broadcast → 같은 label+type의 detail 없는 유령 교체
+        if (step.detail) {
+            const ghost = [...state.currentProcessBlock.steps].reverse()
+                .find(s => s.status === 'running'
+                    && s.label === step.label
+                    && s.type === step.type
+                    && !s.detail);
+            if (ghost) {
+                replaceStep(state.currentProcessBlock, ghost.id, step);
+                scrollToBottom();
+                return;
+            }
+        }
+        addStep(state.currentProcessBlock, step);
+    }
+    scrollToBottom();
+}
+
+let currentStream: StreamState | null = null;
+
 export function appendAgentText(text: string): void {
     if (!text) return;
-    if (!state.currentAgentDiv) {
+    removeSkeleton();
+    if (!state.currentAgentDiv || !state.currentAgentDiv.isConnected) {
         state.currentAgentDiv = addMessage('agent', '');
+        currentStream = null;
     }
     const content = (state.currentAgentDiv as HTMLElement)?.querySelector('.msg-content');
-    if (content) content.textContent += text;
+    if (content) {
+        if (!currentStream) currentStream = createStreamRenderer(content as HTMLElement);
+        appendChunk(currentStream, text);
+    }
     scrollToBottom();
 }
 
@@ -66,35 +209,54 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
     const now = Date.now();
     if (!state.currentAgentDiv && now - lastFinalizeTs < 500) return;
 
-    document.querySelectorAll('.msg-system.tool-activity').forEach(el => el.remove());
-    if (text) {
-        if (!state.currentAgentDiv) {
+    cleanupToolElements();
+    removeSkeleton();
+    const hadProcessBlock = !!state.currentProcessBlock;
+    if (state.currentProcessBlock) {
+        collapseBlock(state.currentProcessBlock);
+        state.currentProcessBlock = null;
+    }
+    const hasTools = toolLog && toolLog.length > 0;
+    if (text || hasTools) {
+        if (!state.currentAgentDiv || !state.currentAgentDiv.isConnected) {
             state.currentAgentDiv = addMessage('agent', '');
         }
         const content = (state.currentAgentDiv as HTMLElement)?.querySelector('.msg-content');
-        let toolHtml = '';
-        if (toolLog && toolLog.length > 0) {
-            const counts: Record<string, number> = {};
-            toolLog.forEach(tl => { counts[tl.icon] = (counts[tl.icon] || 0) + 1; });
-            const summaryParts = Object.entries(counts).map(([icon, n]) => `${icon}×${n}`).join(' ');
-            const logLines = toolLog.map(tl => `${tl.icon} ${escapeHtml(tl.label)}`).join('\n');
-            toolHtml = `<details class="tool-summary"><summary>${summaryParts}</summary><div class="tool-log">${logLines}</div></details>`;
-        }
-        if (content) content.innerHTML = toolHtml + renderMarkdown(text);
-        if (content) content.setAttribute('data-raw', stripOrchestration(text));
+        // Finalize rAF stream if active, otherwise use raw text
+        const finalText = currentStream ? finalizeStream(currentStream) || text : text;
+        currentStream = null;
+        // Skip static tool HTML when process block already shows tool summary
+        const toolHtml = hasTools && !hadProcessBlock ? buildProcessBlockHtml(toProcessSteps(toolLog!), true) : '';
+        if (content) content.innerHTML = toolHtml + renderMarkdown(finalText);
+        if (content) content.setAttribute('data-raw', stripOrchestration(finalText));
     }
+    currentStream = null;
     state.currentAgentDiv = null;
     lastFinalizeTs = Date.now();
     setStatus('idle');
     loadStats();
+    // Cache agent response for offline
+    if (text) appendCachedMessage('assistant', text).catch(() => {});
 }
 
 export function addMessage(role: string, text: string): HTMLDivElement {
     const container = document.getElementById('chatMessages');
-    const div = document.createElement('div');
-    div.className = `msg msg-${role}`;
+    const vs = getVirtualScroll();
+    if (vs.active) vs.flushToDOM();
+    hideEmptyState();
+    removeSkeleton();
+
     const rendered = renderMarkdown(text);
-    div.innerHTML = `<div class="msg-label">${role === 'user' ? t('msg.you') : getAppName()}</div><div class="msg-content">${rendered}</div><button class="msg-copy" title="Copy"></button>`;
+    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">🦈</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="msg-label">${label}</div><div class="msg-content">${rendered}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button>`;
+    }
     const contentEl = div.querySelector('.msg-content');
     if (contentEl) contentEl.setAttribute('data-raw', stripOrchestration(text));
     container?.appendChild(div);
@@ -102,17 +264,29 @@ export function addMessage(role: string, text: string): HTMLDivElement {
     return div;
 }
 
+let scrollRAF: number | null = null;
+
 export function scrollToBottom(): void {
-    const c = document.getElementById('chatMessages');
-    if (c) c.scrollTop = c.scrollHeight;
+    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'));
+    document.querySelectorAll('.tab-btn').forEach(b => {
+        b.classList.remove('active');
+        b.setAttribute('aria-selected', 'false');
+    });
     document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
     const tabMap: Record<string, string> = { agents: 'tabAgents', settings: 'tabSettings', skills: 'tabSkills' };
     document.getElementById(tabMap[name])?.classList.add('active');
-    if (targetBtn) targetBtn.classList.add('active');
+    if (targetBtn) {
+        targetBtn.classList.add('active');
+        targetBtn.setAttribute('aria-selected', 'true');
+    }
     // Lazy-load tab content
     if (name === 'settings') { import('./features/settings.js').then(m => m.loadSettings()); }
     if (name === 'agents') { import('./features/employees.js').then(m => m.loadEmployees()); }
@@ -136,30 +310,95 @@ export async function loadStats(): Promise<void> {
 }
 
 export async function loadMessages(): Promise<void> {
+    // api() returns null on any failure (never throws), so null = server unreachable
     const msgs = await api<MessageItem[]>('/api/messages');
-    if (!msgs) return;
-    msgs.forEach(m => addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content));
-}
 
-export async function loadMemory(): Promise<void> {
-    try {
-        const items = await api<MemoryItem[]>('/api/memory');
-        const list = document.getElementById('memoryList');
-        if (!list || !items) return;
-        if (items.length === 0) {
-            list.innerHTML = `<li style="color:var(--text-dim)">${t('mem.empty')}</li>`;
-            return;
+    if (msgs !== null) {
+        // Successful fetch — clear DOM and render (even if empty array after /clear)
+        const vs = getVirtualScroll();
+        vs.clear();
+        const chatEl = document.getElementById('chatMessages');
+        if (chatEl) chatEl.innerHTML = '';
+
+        if (msgs.length >= VS_THRESHOLD) {
+            for (const m of msgs) {
+                const role = m.role === 'assistant' ? 'agent' : m.role;
+                const rendered = renderMarkdown(m.content);
+                const label = escapeHtml(role === 'user' ? t('msg.you') : getAppName());
+                const tools = m.role === 'assistant' ? parseToolLog(m.tool_log) : [];
+                const toolHtml = tools.length > 0 ? buildProcessBlockHtml(toProcessSteps(tools), true) : '';
+                const html = role === 'agent'
+                    ? `<div class="msg msg-agent"><div class="agent-icon" aria-hidden="true">🦈</div><div class="agent-body">${toolHtml}<div class="msg-content" data-raw="${escapeHtml(stripOrchestration(m.content))}">${rendered}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div></div>`
+                    : `<div class="msg msg-${role}"><div class="msg-label">${label}</div><div class="msg-content" data-raw="${escapeHtml(stripOrchestration(m.content))}">${rendered}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div>`;
+                vs.addItem(crypto.randomUUID(), html);
+            }
+            vs.scrollToBottom();
+        } else {
+            msgs.forEach(m => {
+                const div = addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content);
+                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);
+                        }
+                    }
+                }
+            });
         }
-        list.innerHTML = items.map(m =>
-            `<li><span class="memory-key">${escapeHtml(m.key)}</span>: ${escapeHtml(m.value)}</li>`
-        ).join('');
-    } catch { }
+        cacheMessages(msgs.map(m => ({
+            role: m.role, content: m.content, timestamp: Date.now(),
+        }))).catch(() => {});
+        showEmptyState();
+        return;
+    }
+
+    // Server unreachable (api() returned null) — preserve existing DOM messages
+    const chatEl = document.getElementById('chatMessages');
+    if (chatEl && chatEl.children.length > 0) {
+        showEmptyState();
+        return;
+    }
+    // DOM empty + server down — try IndexedDB cache
+    const cached = await getCachedMessages();
+    if (cached.length > 0) {
+        cached.forEach(m => addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content));
+        addMessage('system', '📴 오프라인 모드 — 캐시된 메시지 표시 중');
+    }
+    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 ──
 export function initMsgCopy(): void {
-    document.getElementById('chatMessages')?.addEventListener('click', (e) => {
-        const btn = (e.target as HTMLElement)?.closest('.msg-copy') as HTMLElement | null;
+    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;
@@ -167,7 +406,11 @@ export function initMsgCopy(): void {
         const text = content.getAttribute('data-raw') || content.innerText || content.textContent || '';
         navigator.clipboard.writeText(text).then(() => {
             btn.classList.add('copied');
-            setTimeout(() => btn.classList.remove('copied'), 600);
+            btn.textContent = '✓';
+            setTimeout(() => {
+                btn.classList.remove('copied');
+                btn.textContent = '';
+            }, 600);
         }).catch(() => { });
     });
 }

package/public/js/virtual-scroll.ts

@@ -0,0 +1,189 @@
+// ── Virtual Scroll ──
+// Activates at THRESHOLD messages to prevent DOM bloat
+// Below threshold: standard DOM append (zero overhead)
+
+const THRESHOLD = 200;
+const BUFFER = 5;
+const EST_HEIGHT = 80;
+
+export interface VirtualItem {
+    id: string;
+    html: string;
+    height: number;
+}
+
+export class VirtualScroll {
+    private items: VirtualItem[] = [];
+    private container: HTMLElement;
+    private spacerTop: HTMLDivElement;
+    private spacerBottom: HTMLDivElement;
+    private viewport: HTMLDivElement;
+    private _active = false;
+    private rafId: number | null = null;
+    private firstVisible = 0;
+    private lastVisible = 0;
+
+    constructor(containerId: string) {
+        this.container = document.getElementById(containerId)!;
+        this.spacerTop = document.createElement('div');
+        this.spacerTop.className = 'vs-spacer-top';
+        this.spacerBottom = document.createElement('div');
+        this.spacerBottom.className = 'vs-spacer-bottom';
+        this.viewport = document.createElement('div');
+        this.viewport.className = 'vs-viewport';
+    }
+
+    get active(): boolean { return this._active; }
+    get count(): number { return this.items.length; }
+
+    /** Flush all virtual items to real DOM and deactivate VS.
+     *  Called before live message append to prevent spacer/DOM conflicts. */
+    flushToDOM(): void {
+        if (!this._active) return;
+        this.container.removeEventListener('scroll', this.scrollHandler);
+        if (this.rafId) { cancelAnimationFrame(this.rafId); this.rafId = null; }
+        // Render all items as real DOM nodes
+        this.container.innerHTML = this.items.map(it => it.html).join('');
+        this._active = false;
+        this.firstVisible = 0;
+        this.lastVisible = 0;
+        // Release items to free memory (DOM now owns the content)
+        this.items = [];
+    }
+
+    addItem(id: string, html: string): void {
+        this.items.push({ id, html, height: EST_HEIGHT });
+        if (!this._active && this.items.length >= THRESHOLD) {
+            this.activate();
+        }
+        if (this._active) {
+            this.scheduleRender();
+        }
+    }
+
+    private scrollHandler = () => this.scheduleRender();
+
+    private activate(): void {
+        this._active = true;
+        // Measure existing DOM nodes
+        const existing = this.container.querySelectorAll('.msg');
+        existing.forEach((el, i) => {
+            if (this.items[i]) {
+                this.items[i].height = el.getBoundingClientRect().height;
+            }
+        });
+        // Replace DOM with virtual structure
+        this.container.innerHTML = '';
+        this.container.append(this.spacerTop, this.viewport, this.spacerBottom);
+        this.container.addEventListener('scroll', this.scrollHandler, { passive: true });
+        this.render();
+    }
+
+    private scheduleRender(): void {
+        if (this.rafId) return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.render();
+        });
+    }
+
+    private render(): void {
+        const scrollTop = this.container.scrollTop;
+        const viewHeight = this.container.clientHeight;
+
+        // Binary-ish search for start index
+        let accum = 0;
+        let startIdx = 0;
+        for (let i = 0; i < this.items.length; i++) {
+            if (accum + this.items[i].height > scrollTop) {
+                startIdx = i;
+                break;
+            }
+            accum += this.items[i].height;
+        }
+
+        const first = Math.max(0, startIdx - BUFFER);
+        let endAccum = accum;
+        let endIdx = startIdx;
+        for (let i = startIdx; i < this.items.length; i++) {
+            endAccum += this.items[i].height;
+            endIdx = i;
+            if (endAccum > scrollTop + viewHeight) break;
+        }
+        const last = Math.min(this.items.length - 1, endIdx + BUFFER);
+
+        // Skip re-render if range unchanged
+        if (first === this.firstVisible && last === this.lastVisible) return;
+        this.firstVisible = first;
+        this.lastVisible = last;
+
+        // Compute spacer heights
+        let topSpace = 0;
+        for (let i = 0; i < first; i++) topSpace += this.items[i].height;
+        let bottomSpace = 0;
+        for (let i = last + 1; i < this.items.length; i++) bottomSpace += this.items[i].height;
+
+        this.spacerTop.style.height = `${topSpace}px`;
+        this.spacerBottom.style.height = `${bottomSpace}px`;
+
+        // Render visible items
+        const frag = document.createDocumentFragment();
+        for (let i = first; i <= last; i++) {
+            const item = this.items[i];
+            const div = document.createElement('div');
+            div.innerHTML = item.html;
+            const el = div.firstElementChild as HTMLElement;
+            if (el) {
+                el.dataset.vsIdx = String(i);
+                frag.appendChild(el);
+            }
+        }
+        this.viewport.innerHTML = '';
+        this.viewport.appendChild(frag);
+
+        // Re-measure rendered heights
+        this.viewport.querySelectorAll('[data-vs-idx]').forEach(el => {
+            const idx = Number((el as HTMLElement).dataset.vsIdx);
+            if (this.items[idx]) {
+                this.items[idx].height = el.getBoundingClientRect().height;
+            }
+        });
+    }
+
+    scrollToBottom(): void {
+        const total = this.items.reduce((sum, it) => sum + it.height, 0);
+        this.container.scrollTop = total;
+        this.scheduleRender();
+    }
+
+    clear(): void {
+        this.items = [];
+        if (this._active) {
+            this.container.removeEventListener('scroll', this.scrollHandler);
+            // Restore normal DOM structure
+            this.viewport.innerHTML = '';
+            this.spacerTop.style.height = '0';
+            this.spacerBottom.style.height = '0';
+            this.container.innerHTML = '';
+        }
+        this._active = false;
+        this.firstVisible = 0;
+        this.lastVisible = 0;
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+}
+
+// Singleton instance
+let instance: VirtualScroll | null = null;
+
+export function getVirtualScroll(): VirtualScroll {
+    if (!instance) {
+        instance = new VirtualScroll('chatMessages');
+    }
+    return instance;
+}
+
+export { THRESHOLD as VS_THRESHOLD };