cli-jaw 1.6.13 → 1.6.15

package/public/js/features/avatar.ts

@@ -1,5 +1,6 @@
 import { escapeHtml } from '../render.js';
 import { api, getAuthToken } from '../api.js';
+import { ICONS } from '../icons.js';
 
 type AvatarRole = 'agent' | 'user';
 type AvatarServerEntry = {
@@ -16,8 +17,8 @@ type AvatarState = {
 
 const AGENT_KEY = 'agentAvatar';
 const USER_KEY = 'userAvatar';
-const DEFAULT_AGENT = '🦈';
-const DEFAULT_USER = '👤';
+const DEFAULT_AGENT = ICONS.shark;
+const DEFAULT_USER = ICONS.user;
 
 const avatarState: Record<AvatarRole, AvatarState> = {
     agent: { emoji: DEFAULT_AGENT, imageUrl: '', updatedAt: null },
@@ -30,40 +31,25 @@ function stateFor(role: AvatarRole): AvatarState {
     return avatarState[role];
 }
 
-function defaultEmoji(role: AvatarRole): string {
-    return role === 'agent' ? DEFAULT_AGENT : DEFAULT_USER;
-}
-
 function storageKey(role: AvatarRole): string {
     return role === 'agent' ? AGENT_KEY : USER_KEY;
 }
 
-function inputId(role: AvatarRole): string {
-    return role === 'agent' ? 'agentAvatarInput' : 'userAvatarInput';
-}
-
-function statusId(role: AvatarRole): string {
-    return role === 'agent' ? 'agentAvatarStatus' : 'userAvatarStatus';
+function inputId(_role: AvatarRole): string {
+    return _role === 'agent' ? 'agentAvatarPreview' : 'userAvatarPreview';
 }
 
 function iconSelector(role: AvatarRole): string {
     return role === 'agent' ? '.agent-icon' : '.user-icon';
 }
 
-function getEmoji(role: AvatarRole): string {
-    return stateFor(role).emoji;
-}
-
-function syncInputs(role: AvatarRole): void {
-    const input = document.getElementById(inputId(role)) as HTMLInputElement | null;
-    if (input) input.value = getEmoji(role);
-    const status = document.getElementById(statusId(role));
-    if (status) status.textContent = stateFor(role).imageUrl ? 'image active' : 'emoji active';
-}
-
-function setStatus(role: AvatarRole, text: string): void {
-    const status = document.getElementById(statusId(role));
-    if (status) status.textContent = text;
+function syncPreview(role: AvatarRole): void {
+    const preview = document.getElementById(inputId(role));
+    if (preview) {
+        preview.innerHTML = avatarMarkup(role);
+        const kind = stateFor(role).imageUrl ? 'image' : 'emoji';
+        preview.setAttribute('data-avatar-kind', kind);
+    }
 }
 
 function avatarMarkup(role: AvatarRole): string {
@@ -71,7 +57,8 @@ function avatarMarkup(role: AvatarRole): string {
     if (current.imageUrl) {
         return `<img class="avatar-image" src="${escapeHtml(current.imageUrl)}" alt="" loading="lazy" decoding="async">`;
     }
-    return escapeHtml(current.emoji);
+    // Default icons are Lucide SVG strings — render as-is
+    return current.emoji;
 }
 
 function applyAvatar(role: AvatarRole): void {
@@ -91,7 +78,7 @@ function setServerAvatar(role: AvatarRole, payload?: AvatarServerEntry | null):
         stateFor(role).imageUrl = '';
         stateFor(role).updatedAt = payload?.updatedAt ?? null;
     }
-    syncInputs(role);
+    syncPreview(role);
     applyAvatar(role);
 }
 
@@ -110,28 +97,20 @@ async function authorizedFetch(path: string, init: RequestInit): Promise<Respons
 }
 
 async function uploadAvatar(role: AvatarRole, file: File): Promise<void> {
-    setStatus(role, 'uploading...');
     const res = await authorizedFetch(`/api/avatar/${role}/upload`, {
         method: 'POST',
         headers: { 'X-Filename': encodeURIComponent(file.name) },
         body: file,
     });
     const json = await res.json().catch(() => null);
-    if (!res.ok) {
-        setStatus(role, 'upload failed');
-        throw new Error(json?.error || `avatar upload failed (${res.status})`);
-    }
+    if (!res.ok) throw new Error(json?.error || `avatar upload failed (${res.status})`);
     setServerAvatar(role, json?.data || json);
 }
 
 async function resetAvatarImage(role: AvatarRole): Promise<void> {
-    setStatus(role, 'resetting...');
     const res = await authorizedFetch(`/api/avatar/${role}/image`, { method: 'DELETE' });
     const json = await res.json().catch(() => null);
-    if (!res.ok) {
-        setStatus(role, 'reset failed');
-        throw new Error(json?.error || `avatar reset failed (${res.status})`);
-    }
+    if (!res.ok) throw new Error(json?.error || `avatar reset failed (${res.status})`);
     setServerAvatar(role, json?.data || json);
 }
 
@@ -166,8 +145,8 @@ function bindRoleControls(role: AvatarRole): void {
     });
 }
 
-export function getAgentAvatar(): string { return getEmoji('agent'); }
-export function getUserAvatar(): string { return getEmoji('user'); }
+export function getAgentAvatar(): string { return stateFor('agent').emoji; }
+export function getUserAvatar(): string { return stateFor('user').emoji; }
 export function getAgentAvatarMarkup(): string { return avatarMarkup('agent'); }
 export function getUserAvatarMarkup(): string { return avatarMarkup('user'); }
 
@@ -175,7 +154,7 @@ export function setAgentAvatar(emoji: string): void {
     const next = (emoji || '').trim() || DEFAULT_AGENT;
     stateFor('agent').emoji = next;
     localStorage.setItem(storageKey('agent'), next);
-    syncInputs('agent');
+    syncPreview('agent');
     if (!stateFor('agent').imageUrl) applyAvatar('agent');
 }
 
@@ -183,37 +162,18 @@ export function setUserAvatar(emoji: string): void {
     const next = (emoji || '').trim() || DEFAULT_USER;
     stateFor('user').emoji = next;
     localStorage.setItem(storageKey('user'), next);
-    syncInputs('user');
+    syncPreview('user');
     if (!stateFor('user').imageUrl) applyAvatar('user');
 }
 
 export async function initAvatar(): Promise<void> {
     stateFor('agent').emoji = localStorage.getItem(AGENT_KEY) || DEFAULT_AGENT;
     stateFor('user').emoji = localStorage.getItem(USER_KEY) || DEFAULT_USER;
-    syncInputs('agent');
-    syncInputs('user');
+    syncPreview('agent');
+    syncPreview('user');
 
     if (!initialized) {
         initialized = true;
-
-        document.getElementById('avatarSave')?.addEventListener('click', () => {
-            const agentInput = document.getElementById('agentAvatarInput') as HTMLInputElement | null;
-            const userInput = document.getElementById('userAvatarInput') as HTMLInputElement | null;
-            if (agentInput) setAgentAvatar(agentInput.value);
-            if (userInput) setUserAvatar(userInput.value);
-        });
-
-        for (const id of ['agentAvatarInput', 'userAvatarInput']) {
-            document.getElementById(id)?.addEventListener('keydown', (e: Event) => {
-                const keyEvent = e as KeyboardEvent;
-                if (keyEvent.key === 'Enter') {
-                    keyEvent.preventDefault();
-                    document.getElementById('avatarSave')?.click();
-                    (keyEvent.target as HTMLInputElement).blur();
-                }
-            });
-        }
-
         bindRoleControls('agent');
         bindRoleControls('user');
     }

package/public/js/features/memory.ts

@@ -2,6 +2,7 @@
 import { escapeHtml } from '../render.js';
 import { api, apiJson } from '../api.js';
 import { ICONS } from '../icons.js';
+import { t } from '../locale.js';
 
 interface MemoryFile {
     name: string;
@@ -79,7 +80,7 @@ function syncSidebarBadge(status: AdvancedMemoryStatus | null, basicCount: numbe
     const sideBtn = $('memorySidebarBtn');
     if (!sideBtn) return;
     if (status?.enabled && status?.hasSoul === false) {
-        sideBtn.innerHTML = `${ICONS.brain} Memory · <span style="color:var(--accent)">업데이트 필요</span>`;
+        sideBtn.innerHTML = `${ICONS.brain} Memory · <span style="color:var(--accent)">${t('updateNeeded')}</span>`;
         return;
     }
     const state = status?.indexState === 'ready'
@@ -101,7 +102,7 @@ function renderStatusBanner(status: AdvancedMemoryStatus | null) {
     banner.style.display = '';
     if (status.hasSoul === false) {
         banner.innerHTML = `<span>Memory structure upgrade available.</span>
-            <button id="advUpgradeSoulBtn" class="btn-sm" style="margin-left:8px">메모리 업데이트하기</button>`;
+            <button id="advUpgradeSoulBtn" class="btn-sm" style="margin-left:8px">${t('memoryUpdateBtn')}</button>`;
         return;
     }
     if (status.state === 'not_initialized') {
@@ -324,12 +325,23 @@ export async function rerunAdvancedBootstrap(): Promise<void> {
 
 export async function upgradeSoulMemory(): Promise<void> {
     setAdvBusy(true);
-    setAdvBanner('메모리 구조를 업데이트하는 중...', true);
-    await apiJson<{ message?: string }>('/api/memory/reindex', 'POST', {});
+    setAdvBanner(t('memoryUpdating'), true);
+    const result = await apiJson<{
+        activated: boolean;
+        created: boolean;
+        preview: string;
+    }>('/api/jaw-memory/soul/activate', 'POST', {});
     setAdvBusy(false);
-    setAdvBanner('✓ Memory structure upgraded. Soul identity created.');
+    if (result?.created) {
+        setAdvBanner('✓ Soul identity created.');
+    } else {
+        setAdvBanner('✓ Soul already active.');
+    }
     await openMemoryModal();
     switchMemTab('status');
+    const freshStatus = await apiJson<any>('/api/memory/status');
+    syncSidebarBadge(freshStatus, 0);
+    renderStatusBanner(freshStatus);
 }
 
 export async function reindexAdvancedMemory(): Promise<void> {

package/public/js/features/settings-templates.ts

@@ -2,6 +2,7 @@
 import { api, apiJson } from '../api.js';
 import { ICONS } from '../icons.js';
 import { escapeHtml } from '../render.js';
+import { t as i18n, getLang, setLang } from '../locale.js';
 
 // ── Prompt Modal ──
 
@@ -80,7 +81,7 @@ function openTemplateEditor(tmpl: TemplateInfo): void {
     const saveBtn = document.getElementById('templateSaveBtn');
     if (saveBtn) saveBtn.style.display = 'none';
     const toggle = document.getElementById('templateDevToggle');
-    if (toggle) { toggle.style.color = 'var(--text-dim)'; toggle.style.borderColor = 'var(--border)'; toggle.innerHTML = `${ICONS.tool} 개발자 모드`; }
+    if (toggle) { toggle.style.color = 'var(--text-dim)'; toggle.style.borderColor = 'var(--border)'; toggle.innerHTML = `${ICONS.tool} ${i18n('devMode')}`; }
     const title = document.getElementById('templateModalTitle');
     if (title) title.innerHTML = `${ICONS.file} ${escapeHtml(tmpl.filename)}`;
     showTemplateView('editor');
@@ -88,7 +89,7 @@ function openTemplateEditor(tmpl: TemplateInfo): void {
 
 export function toggleDevMode(): void {
     if (!_devMode) {
-        if (!confirm('⚠ 프롬프트를 직접 수정하면 예상치 못한 동작이 발생할 수 있습니다.\n계속하시겠습니까?')) return;
+        if (!confirm(i18n('promptEditWarning'))) return;
     }
     _devMode = !_devMode;
     const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
@@ -99,7 +100,7 @@ export function toggleDevMode(): void {
     if (toggle) {
         toggle.style.color = _devMode ? 'var(--stop-btn)' : 'var(--text-dim)';
         toggle.style.borderColor = _devMode ? 'var(--stop-btn)' : 'var(--border)';
-        toggle.innerHTML = _devMode ? `${ICONS.lockOpen} 개발자 모드 ON` : `${ICONS.tool} 개발자 모드`;
+        toggle.innerHTML = _devMode ? `${ICONS.lockOpen} ${i18n('devModeOn')}` : `${ICONS.tool} ${i18n('devMode')}`;
     }
 }
 
@@ -109,7 +110,7 @@ export async function saveTemplateFromModal(): Promise<void> {
     if (!id) return;
     await apiJson(`/api/prompt-templates/${id}`, 'PUT', { content: editor.value });
     const label = document.getElementById('templateEditorLabel');
-    if (label) { label.innerHTML = `${ICONS.check} 저장 + 핫리로드 완료!`; setTimeout(() => { label.innerHTML = `${ICONS.file} ${escapeHtml(id)}.md`; }, 2000); }
+    if (label) { label.innerHTML = `${ICONS.check} ${i18n('savedAndReloaded')}`; setTimeout(() => { label.innerHTML = `${ICONS.file} ${escapeHtml(id)}.md`; }, 2000); }
     const t = _templates.find(x => x.id === id);
     if (t) t.content = editor.value;
 }
@@ -120,7 +121,7 @@ function showTemplateView(view: 'tree' | 'editor'): void {
     if (treeView) treeView.style.display = view === 'tree' ? '' : 'none';
     if (editorView) editorView.style.display = view === 'editor' ? 'flex' : 'none';
     const title = document.getElementById('templateModalTitle');
-    if (title && view === 'tree') title.innerHTML = `${ICONS.plan} 프롬프트 구조`;
+    if (title && view === 'tree') title.innerHTML = `${ICONS.plan} ${i18n('promptStructure')}`;
 }
 
 export function templateGoBack(): void { showTemplateView('tree'); }

package/public/js/icons.ts

@@ -29,6 +29,7 @@ import {
     Package,
     ClipboardList,
     Bot,
+    CircleUserRound,
     Palette,
     Link,
     HandMetal,
@@ -54,6 +55,9 @@ import {
     Download,
 } from '@lucide/icons';
 
+// ── Inline SVG assets (embedded to avoid ?raw import issues in Node.js tests) ──
+const sharkSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12c0 0 2-4 6-4 1 0 2 .5 3 1l3-6c0 0 1 5 3 7 1.5 1.5 5 2 5 2s-1 4-5 4c-1 0-2-.3-3-.8L12 18c0 0-2-1-4-1-4 0-6-5-6-5z"/><circle cx="17" cy="11" r="0.5" fill="currentColor" stroke="none"/><path d="M7 12l1 2"/><path d="M9.5 12l1 2"/></svg>';
+
 // ── Size presets ──
 const S = 14;  // inline / small
 const M = 16;  // default UI
@@ -62,8 +66,7 @@ function luc(data: Parameters<typeof buildLucideSvg>[0], size = M): string {
     return buildLucideSvg(data, { size });
 }
 
-// ── Shark mascot (🦈 emoji — brand identity) ──
-const SHARK_SVG = '🦈';
+// ── Default avatar icons (Lucide-based, no emoji literals) ──
 
 // ── Icon registry ──
 // Keys match the semantic role, NOT the old emoji codepoint.
@@ -101,8 +104,9 @@ export const ICONS = {
     link:        luc(Link),
     salute:      luc(HandMetal),
 
-    // Mascot
-    shark:       SHARK_SVG,
+    // Avatar defaults
+    shark:       sharkSvg,
+    user:        luc(CircleUserRound),
 
     // HTML template icons
     paperclip:   luc(Paperclip),
@@ -165,6 +169,7 @@ const iconMap: Partial<Record<IconName, (s: number) => string>> = {
     palette:    (s) => luc(Palette, s),
     link:       (s) => luc(Link, s),
     salute:     (s) => luc(HandMetal, s),
+    user:       (s) => luc(CircleUserRound, s),
     paperclip:  (s) => luc(Paperclip, s),
     save:       (s) => luc(Save, s),
     gamepad:    (s) => luc(Gamepad2, s),
@@ -197,6 +202,7 @@ const EMOJI_TO_ICON: Record<string, IconName> = {
     '⚠️': 'warning',
     '💡': 'lightbulb',
     '🦈': 'shark',
+    '👤': 'user',
     '💭': 'thinking',
     '🔍': 'search',
     '🌐': 'web',

package/public/js/locale.ts

@@ -21,3 +21,33 @@ export function syncStoredLocale(locale: string): void {
         }
     } catch { }
 }
+
+// ── Translation Map ──
+type Lang = 'ko' | 'en';
+
+const STRINGS: Record<string, Record<Lang, string>> = {
+    devMode:           { ko: '개발자 모드',   en: 'Developer Mode' },
+    devModeOn:         { ko: '개발자 모드 ON', en: 'Developer Mode ON' },
+    promptEditWarning: {
+        ko: '⚠ 프롬프트를 직접 수정하면 예상치 못한 동작이 발생할 수 있습니다.\n계속하시겠습니까?',
+        en: '⚠ Editing prompts directly may cause unexpected behavior.\nContinue?'
+    },
+    savedAndReloaded:  { ko: '저장 + 핫리로드 완료!', en: 'Saved + Hot Reloaded!' },
+    promptStructure:   { ko: '프롬프트 구조',  en: 'Prompt Structure' },
+    updateNeeded:      { ko: '업데이트 필요',  en: 'Update Needed' },
+    memoryUpdating:    { ko: '메모리 구조를 업데이트하는 중...', en: 'Upgrading memory structure...' },
+    memoryUpdateBtn:   { ko: '메모리 업데이트하기', en: 'Update Memory' },
+};
+
+function detectLang(): Lang {
+    const pref = getPreferredLocale();
+    return pref.startsWith('ko') ? 'ko' : 'en';
+}
+
+let _lang: Lang = detectLang();
+
+export function setLang(lang: Lang) { _lang = lang; syncStoredLocale(lang); }
+export function getLang(): Lang { return _lang; }
+export function t(key: string): string {
+    return STRINGS[key]?.[_lang] ?? STRINGS[key]?.['en'] ?? key;
+}

package/public/js/render.ts

@@ -117,6 +117,7 @@ function applyMermaidTheme() {
     mermaidModule!.default.initialize({
         startOnLoad: false,
         theme: 'base',
+        htmlLabels: false,
         themeVariables: getMermaidThemeVars(),
         securityLevel: 'strict',
         suppressErrorRendering: true,
@@ -333,7 +334,7 @@ export async function rerenderMermaidDiagrams(): Promise<void> {
         try {
             applyMermaidTheme();
             const { svg } = await mm.render(id, code);
-            el.innerHTML = svg;
+            el.innerHTML = sanitizeMermaidSvg(svg);
             appendMermaidActionBtns(el as HTMLElement);
         } catch { /* keep existing render on failure */ }
     }

package/public/js/ui.ts

@@ -7,7 +7,8 @@ import { getAgentAvatarMarkup, getUserAvatarMarkup } from './features/avatar.js'
 import { t } from './features/i18n.js';
 import { api } from './api.js';
 import { cacheMessages, getCachedMessages, appendCachedMessage, upsertMessage, setMessageScope, getScopedMessages } from './features/idb-cache.js';
-import { getVirtualScroll, VS_THRESHOLD } from './virtual-scroll.js';
+import { getVirtualScroll, VS_THRESHOLD, type VirtualItem } from './virtual-scroll.js';
+import { bootstrapVirtualHistory, BOOTSTRAP_SEED_COUNT, type VirtualHistoryBootstrapDeps } from './virtual-scroll-bootstrap.js';
 import { createStreamRenderer, appendChunk, finalizeStream, type StreamState } from './streaming-render.js';
 import { activateWidgets } from './diagram/iframe-renderer.js';
 import { renderLiveToolActivity, cleanupToolElements, bindToolItemInteractions, type ToolLogEntry } from './features/tool-ui.js';
@@ -385,6 +386,87 @@ export async function loadStats(): Promise<void> {
     updateStatMsgs(msgs.length);
 }
 
+// ── Virtual scroll bootstrap helpers ──
+
+function buildVirtualHistoryItems(msgs: MessageItem[]): VirtualItem[] {
+    const vsItems: VirtualItem[] = [];
+    for (const m of msgs) {
+        const role = m.role === 'assistant' ? 'agent' : m.role;
+        const rawContent = stripOrchestration(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 skeletonContent = '<div class="skeleton-line"></div><div class="skeleton-line"></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">${toolHtml}<div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}">${skeletonContent}</div><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><div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}">${skeletonContent}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div><div class="user-icon" aria-hidden="true">${getUserAvatarMarkup()}</div></div>`;
+        vsItems.push({ id: generateId(), html, height: 80 });
+    }
+    return vsItems;
+}
+
+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') || '';
+            el.innerHTML = raw ? renderMarkdown(raw) : '';
+            el.classList.remove('lazy-pending');
+            activateWidgets(el);
+            const msgEl = el.closest('[data-vs-idx]') as HTMLElement | null;
+            if (msgEl) {
+                const idx = Number(msgEl.dataset.vsIdx);
+                vs.updateItemHtml(idx, msgEl.outerHTML);
+            }
+        }
+    };
+    vs.onPostRender = (viewport: HTMLElement) => {
+        activateWidgets(viewport);
+        linkifyFilePaths(viewport);
+    };
+}
+
+function measureTailWindow(
+    chatEl: HTMLElement,
+    items: VirtualItem[],
+    seedCount: number,
+): number[] {
+    const start = Math.max(0, items.length - seedCount);
+    const slice = items.slice(start);
+    if (slice.length === 0) return [];
+
+    // Render tail items temporarily into empty chatEl, measure, then clear
+    const fragment = document.createDocumentFragment();
+    for (const item of slice) {
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = item.html;
+        const el = wrapper.firstElementChild;
+        if (el) fragment.appendChild(el);
+    }
+    chatEl.appendChild(fragment);
+    const heights: number[] = [];
+    const children = chatEl.children;
+    for (let i = 0; i < children.length; i++) {
+        heights.push(children[i].getBoundingClientRect().height);
+    }
+    chatEl.innerHTML = '';
+    return heights;
+}
+
+function makeBootstrapDeps(
+    vs: ReturnType<typeof getVirtualScroll>,
+    chatEl: HTMLElement,
+): VirtualHistoryBootstrapDeps {
+    return {
+        registerCallbacks: () => registerVirtualScrollCallbacks(vs),
+        measureTailWindow: (items, seedCount) => measureTailWindow(chatEl, items, seedCount),
+        setItems: (items, opts) => vs.setItems(items, opts),
+        seedMeasuredHeights: (start, h) => vs.seedMeasuredHeights(start, h),
+        activateIfNeeded: (toBottom) => vs.activateIfNeeded(toBottom),
+        scrollToBottom: () => vs.scrollToBottom(),
+    };
+}
+
 export async function loadMessages(): Promise<void> {
     const vs = getVirtualScroll();
     const chatEl = document.getElementById('chatMessages');
@@ -403,45 +485,8 @@ export async function loadMessages(): Promise<void> {
         if (chatEl) chatEl.innerHTML = '';
 
         if (msgs.length >= VS_THRESHOLD) {
-            // Lazy render — store skeleton HTML, render on viewport entry
-            for (const m of msgs) {
-                const role = m.role === 'assistant' ? 'agent' : m.role;
-                const rawContent = stripOrchestration(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 skeletonContent = '<div class="skeleton-line"></div><div class="skeleton-line"></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">${toolHtml}<div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}">${skeletonContent}</div><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><div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}">${skeletonContent}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div><div class="user-icon" aria-hidden="true">${getUserAvatarMarkup()}</div></div>`;
-                vs.addItem(generateId(), html);
-            }
-
-            // Register lazy render callback
-            vs.onLazyRender = (targets: HTMLElement[]) => {
-                for (const el of targets) {
-                    if (!el.classList.contains('lazy-pending')) continue;
-                    const raw = el.getAttribute('data-raw') || '';
-                    el.innerHTML = raw ? renderMarkdown(raw) : '';
-                    el.classList.remove('lazy-pending');
-                    activateWidgets(el);
-
-                    // Persist rendered HTML back into VS cache
-                    const msgEl = el.closest('[data-vs-idx]') as HTMLElement | null;
-                    if (msgEl) {
-                        const idx = Number(msgEl.dataset.vsIdx);
-                        vs.updateItemHtml(idx, msgEl.outerHTML);
-                    }
-                }
-            };
-
-            // Activate widgets + file path linkification on all VS-rendered items
-            vs.onPostRender = (viewport: HTMLElement) => {
-                activateWidgets(viewport);
-                linkifyFilePaths(viewport);
-            };
-
-            vs.scrollToBottom();
+            const vsItems = buildVirtualHistoryItems(msgs);
+            bootstrapVirtualHistory(vsItems, makeBootstrapDeps(vs, chatEl!));
         } else {
             msgs.forEach(m => {
                 const div = addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content, m.cli);
@@ -476,37 +521,8 @@ export async function loadMessages(): Promise<void> {
     const cached = await getScopedMessages();
     if (cached.length > 0) {
         if (cached.length >= VS_THRESHOLD) {
-            for (const m of cached) {
-                const role = m.role === 'assistant' ? 'agent' : m.role;
-                const rawContent = stripOrchestration(m.content);
-                const label = escapeHtml(role === 'user' ? t('msg.you') : getAppName());
-                const tools = m.role === 'assistant' && m.tool_log ? parseToolLog(m.tool_log) : [];
-                const toolHtml = tools.length > 0 ? buildProcessBlockHtml(toProcessSteps(tools), true) : '';
-                const skeletonContent = '<div class="skeleton-line"></div><div class="skeleton-line"></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">${toolHtml}<div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}">${skeletonContent}</div><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><div class="msg-content lazy-pending" data-raw="${escapeHtml(rawContent)}">${skeletonContent}</div><button class="msg-copy" title="Copy" aria-label="Copy message"></button></div><div class="user-icon" aria-hidden="true">${getUserAvatarMarkup()}</div></div>`;
-                vs.addItem(generateId(), html);
-            }
-            vs.onLazyRender = (targets: HTMLElement[]) => {
-                for (const el of targets) {
-                    if (!el.classList.contains('lazy-pending')) continue;
-                    const raw = el.getAttribute('data-raw') || '';
-                    el.innerHTML = raw ? renderMarkdown(raw) : '';
-                    el.classList.remove('lazy-pending');
-                    activateWidgets(el);
-                    const msgEl = el.closest('[data-vs-idx]') as HTMLElement | null;
-                    if (msgEl) {
-                        const idx = Number(msgEl.dataset.vsIdx);
-                        vs.updateItemHtml(idx, msgEl.outerHTML);
-                    }
-                }
-            };
-            vs.onPostRender = (viewport: HTMLElement) => {
-                activateWidgets(viewport);
-                linkifyFilePaths(viewport);
-            };
-            vs.scrollToBottom();
+            const vsItems = buildVirtualHistoryItems(cached as MessageItem[]);
+            bootstrapVirtualHistory(vsItems, makeBootstrapDeps(vs, chatEl!));
         } else {
             cached.forEach(m => {
                 const div = addMessage(m.role === 'assistant' ? 'agent' : m.role, m.content, m.cli);

package/public/js/virtual-scroll-bootstrap.ts

@@ -0,0 +1,42 @@
+/**
+ * Pure-logic bootstrap orchestrator for virtual scroll.
+ * No DOM imports — safe to import in Node test environment.
+ */
+import type { VirtualItem, LazyRenderCallback } from './virtual-scroll.js';
+
+export const BOOTSTRAP_SEED_COUNT = 20;
+
+export interface VirtualHistoryBootstrapDeps {
+    registerCallbacks: () => void;
+    measureTailWindow: (items: VirtualItem[], seedCount: number) => number[];
+    setItems: (items: VirtualItem[], options?: { autoActivate?: boolean; toBottom?: boolean }) => void;
+    seedMeasuredHeights: (startIndex: number, heights: number[]) => void;
+    activateIfNeeded: (toBottom: boolean) => void;
+    scrollToBottom: () => void;
+}
+
+/**
+ * Orchestrates virtual scroll bootstrap in correct order:
+ * 1. registerCallbacks (onLazyRender, onPostRender)
+ * 2. setItems with autoActivate:false (load all items without triggering activate)
+ * 3. measureTailWindow (measure last N items for accurate initial heights)
+ * 4. seedMeasuredHeights (feed measured heights back)
+ * 5. activateIfNeeded (switch to VS mode with accurate bottom heights)
+ * 6. scrollToBottom
+ */
+export function bootstrapVirtualHistory(
+    items: VirtualItem[],
+    deps: VirtualHistoryBootstrapDeps,
+): void {
+    deps.registerCallbacks();
+    deps.setItems(items, { autoActivate: false });
+
+    const seedStart = Math.max(0, items.length - BOOTSTRAP_SEED_COUNT);
+    const heights = deps.measureTailWindow(items, BOOTSTRAP_SEED_COUNT);
+    if (heights.length > 0) {
+        deps.seedMeasuredHeights(seedStart, heights);
+    }
+
+    deps.activateIfNeeded(true);
+    deps.scrollToBottom();
+}