cli-jaw 1.6.14 → 1.6.15

package/public/dist/assets/{ws-CleMWrLF.js → ws-BtTpgocf.js}

@@ -1,2 +1,2 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/vendor-render-Bjnw0wQ6.css"])))=>i.map(i=>d[i]);
-import{t as e}from"./state-O6NVkWcL.js";import{Z as t}from"./vendor-mermaid-C2RBgdM6.js";import{f as n,h as r,n as i,s as a,t as o}from"./render-CVr6a-dp.js";import{a as s,d as c,f as l,g as u,i as d,m as f,n as p,r as m,t as h}from"./ui-BXZhbE_1.js";var g=[`P`,`A`,`B`,`C`],_=null;function v(e,t,n){let r=g.indexOf(n);if(r<0)return;let i=e.getBoundingClientRect(),a=t.offsetWidth||36,o=document.getElementById(`dot-${n}`);if(!o)return;let s=g[r+1],c=s?document.getElementById(`dot-${s}`):null;if(c){let e=o.getBoundingClientRect(),n=c.getBoundingClientRect(),r=(e.right+n.left)/2;t.style.left=r-i.left-a/2+`px`}else{let e=o.getBoundingClientRect();t.style.left=e.left-i.left+e.width/2-a/2+`px`}}var y={},b=``,x=0;function S(e){for(let e of Object.keys(y))delete y[e];for(let t of e)t.state===`running`&&t.phase&&(y[t.agentId]={phase:t.phase,phaseLabel:t.phaseLabel||``})}function C(t,n){let r=new Set([`IDLE`,`P`,`A`,`B`,`C`,`D`]).has(t)?t:`IDLE`;if(e.orcState=r,r===`IDLE`||r===`D`)document.body.removeAttribute(`data-orc-state`),document.body.style.removeProperty(`--orc-glow`);else{document.body.setAttribute(`data-orc-state`,r);let e=`--orc-glow-${r}`,t=getComputedStyle(document.documentElement).getPropertyValue(e).trim();document.body.style.setProperty(`--orc-glow`,t)}document.body.classList.add(`orc-pulse`),setTimeout(()=>document.body.classList.remove(`orc-pulse`),700);let i=document.getElementById(`orcStateBadge`);i&&(i.textContent={IDLE:``,P:`PLAN`,A:`AUDIT`,B:`BUILD`,C:`CHECK`,D:`DONE`}[r],i.style.display=r===`IDLE`?`none`:`inline-block`);let a=document.getElementById(`pabcRoadmap`),o=document.getElementById(`sharkRunner`),s=document.getElementById(`pabcBrand`);if(a&&o){if(!a.dataset.resizeObserved){a.dataset.resizeObserved=`1`,new ResizeObserver(()=>{_&&o.classList.contains(`running`)&&v(a,o,_)}).observe(a);let e=0;window.addEventListener(`resize`,()=>{cancelAnimationFrame(e),e=requestAnimationFrame(()=>{_&&o.classList.contains(`running`)&&v(a,o,_)})})}if(r===`IDLE`)a.classList.remove(`visible`,`shimmer-out`),o.classList.remove(`running`),_=null;else if(r===`D`){g.forEach(e=>{let t=document.getElementById(`dot-${e}`);t&&(t.className=`pabc-dot done`,t.setAttribute(`data-phase`,e))});for(let e=0;e<4;e++){let t=document.getElementById(`pabc-conn-${e}`);t&&(t.className=`pabc-connector done`)}o.classList.remove(`running`),_=null,a.classList.add(`shimmer-out`),setTimeout(()=>a.classList.remove(`visible`,`shimmer-out`),1e3)}else{a.classList.remove(`shimmer-out`),a.classList.add(`visible`),o.classList.add(`running`);let e=g.indexOf(r);g.forEach((t,n)=>{let r=document.getElementById(`dot-${t}`);r&&(r.className=`pabc-dot ${n<e?`done`:n===e?`active`:`future`}`,r.setAttribute(`data-phase`,t))});for(let t=0;t<4;t++){let n=document.getElementById(`pabc-conn-${t}`);n&&(n.className=`pabc-connector ${t<e?`done`:``}`)}_=r,requestAnimationFrame(()=>v(a,o,r))}s&&n&&(s.textContent=n)}}function w(){let g=`ws://${location.host}`;e.ws=new WebSocket(`${g}?lang=${n()}`),e.ws.onmessage=e=>{let n;try{n=JSON.parse(e.data)}catch{console.warn(`[ws] malformed message:`,e.data);return}if(!n||typeof n!=`object`||typeof n.type!=`string`){console.warn(`[ws] invalid message shape:`,n);return}if(n.type===`agent_status`)n.running===void 0?c(n.status||`idle`):c(n.running?`running`:`idle`),n.agentId&&n.phase&&(y[n.agentId]={phase:n.phase,phaseLabel:n.phaseLabel||``},t(()=>import(`./employees-zxrU6ZV_.js`).then(e=>e.loadEmployees()),__vite__mapDeps([0])));else if(n.type===`queue_update`)f(n.pending||0);else if(n.type===`worklog_created`)p(`${a.clipboard} Worklog: ${i(n.path||``)}`);else if(n.type===`round_start`){let e=n.agentPhases||n.subtasks||[],t=e.map(e=>i(e.agent||e.name||``)).join(`, `);p(r(`ws.roundStart`,{round:n.round||0,count:e.length,names:t}))}else if(n.type===`round_done`)n.action===`complete`?p(r(`ws.roundDone`,{round:n.round||0})):n.action===`next`?p(r(`ws.roundNext`,{round:n.round||0})):p(r(`ws.roundRetry`,{round:n.round||0}));else if(n.type===`agent_tool`){let e=n.toolType===`thinking`?`thinking`:n.toolType===`search`?`search`:`tool`;l({id:`step-${Date.now()}-${Math.random().toString(36).slice(2,6)}`,type:e,icon:n.icon||a.tool,label:n.label||``,detail:n.detail||``,stepRef:n.stepRef||``,status:n.status||`running`,startTime:Date.now()})}else if(n.type===`agent_output`)m(n.text||``);else if(n.type===`agent_retry`)p(r(`ws.retry`,{cli:i(n.cli||``),delay:n.delay||10}),`tool-activity`);else if(n.type===`agent_fallback`)p(r(`ws.fallback`,{from:i(n.from||``),to:i(n.to||``)}),`tool-activity`);else if(n.type===`agent_smoke`)p(`${a.warning} ${i(n.cli||`agent`)}: smoke response detected — auto-continuing`,`tool-activity`);else if(n.type===`agent_done`)s(n.text||``,n.toolLog);else if(n.type===`orchestrate_done`)s(n.text||``);else if(n.type===`clear`){o(),d(),u().clear();let e=document.getElementById(`chatMessages`);e&&(e.innerHTML=``),t(()=>import(`./idb-cache-C7z4qE00.js`).then(e=>e.clearCache()),[]).catch(()=>{})}else if(n.type===`session_reset`)p(`${a.refresh} Session reset — history preserved`,`tool-activity`);else if(n.type===`agent_added`||n.type===`agent_updated`||n.type===`agent_deleted`)t(()=>import(`./employees-zxrU6ZV_.js`).then(e=>e.loadEmployees()),__vite__mapDeps([0]));else if(n.type===`orc_state`){if(n.scope&&b&&n.scope!==b)return;C(typeof n.state==`string`?n.state:`IDLE`,n.title)}else n.type===`new_message`&&(n.source===`telegram`||n.source===`discord`)&&h(n.role===`assistant`?`agent`:n.role||`user`,n.content||``,n.cli)},e.ws.onopen=()=>{console.log(`[ws] connected`);let e=Date.now()-x<1e4;t(()=>import(`./ui-qR28iS0L.js`).then(async t=>{if(t.cleanupToolActivity(),!e)try{await t.loadMessages(),x=Date.now()}catch(e){console.error(`[ws] loadMessages failed`,e)}t.setStatus(`idle`)}),__vite__mapDeps([0])),fetch(`/api/orchestrate/snapshot`).then(e=>e.json()).then(e=>{b=String(e.orc.scope||``),C(e.orc.state),S(e.workers),f(e.runtime.queuePending),c(e.runtime.busy?`running`:`idle`),t(()=>import(`./employees-zxrU6ZV_.js`).then(e=>{typeof e.renderEmployees==`function`&&e.renderEmployees()}),__vite__mapDeps([0]))}).catch(()=>{})},e.ws.onclose=()=>{console.log(`[ws] disconnected, reconnecting in 2s...`),t(()=>import(`./ui-qR28iS0L.js`).then(e=>e.cleanupToolActivity()),__vite__mapDeps([0])),c(`idle`),p(`${a.exec} 연결 끊김 — 재연결 중...`,`tool-activity`),setTimeout(w,2e3)}}function T(e){return y[e]||null}export{T as n,w as t};
+import{t as e}from"./state-O6NVkWcL.js";import{Z as t}from"./vendor-mermaid-C2RBgdM6.js";import{f as n,h as r,n as i,s as a,t as o}from"./render-BoxeLlL9.js";import{a as s,d as c,f as l,g as u,i as d,m as f,n as p,r as m,t as h}from"./ui-KQ8_sSP8.js";var g=[`P`,`A`,`B`,`C`],_=null;function v(e,t,n){let r=g.indexOf(n);if(r<0)return;let i=e.getBoundingClientRect(),a=t.offsetWidth||36,o=document.getElementById(`dot-${n}`);if(!o)return;let s=g[r+1],c=s?document.getElementById(`dot-${s}`):null;if(c){let e=o.getBoundingClientRect(),n=c.getBoundingClientRect(),r=(e.right+n.left)/2;t.style.left=r-i.left-a/2+`px`}else{let e=o.getBoundingClientRect();t.style.left=e.left-i.left+e.width/2-a/2+`px`}}var y={},b=``,x=0;function S(e){for(let e of Object.keys(y))delete y[e];for(let t of e)t.state===`running`&&t.phase&&(y[t.agentId]={phase:t.phase,phaseLabel:t.phaseLabel||``})}function C(t,n){let r=new Set([`IDLE`,`P`,`A`,`B`,`C`,`D`]).has(t)?t:`IDLE`;if(e.orcState=r,r===`IDLE`||r===`D`)document.body.removeAttribute(`data-orc-state`),document.body.style.removeProperty(`--orc-glow`);else{document.body.setAttribute(`data-orc-state`,r);let e=`--orc-glow-${r}`,t=getComputedStyle(document.documentElement).getPropertyValue(e).trim();document.body.style.setProperty(`--orc-glow`,t)}document.body.classList.add(`orc-pulse`),setTimeout(()=>document.body.classList.remove(`orc-pulse`),700);let i=document.getElementById(`orcStateBadge`);i&&(i.textContent={IDLE:``,P:`PLAN`,A:`AUDIT`,B:`BUILD`,C:`CHECK`,D:`DONE`}[r],i.style.display=r===`IDLE`?`none`:`inline-block`);let a=document.getElementById(`pabcRoadmap`),o=document.getElementById(`sharkRunner`),s=document.getElementById(`pabcBrand`);if(a&&o){if(!a.dataset.resizeObserved){a.dataset.resizeObserved=`1`,new ResizeObserver(()=>{_&&o.classList.contains(`running`)&&v(a,o,_)}).observe(a);let e=0;window.addEventListener(`resize`,()=>{cancelAnimationFrame(e),e=requestAnimationFrame(()=>{_&&o.classList.contains(`running`)&&v(a,o,_)})})}if(r===`IDLE`)a.classList.remove(`visible`,`shimmer-out`),o.classList.remove(`running`),_=null;else if(r===`D`){g.forEach(e=>{let t=document.getElementById(`dot-${e}`);t&&(t.className=`pabc-dot done`,t.setAttribute(`data-phase`,e))});for(let e=0;e<4;e++){let t=document.getElementById(`pabc-conn-${e}`);t&&(t.className=`pabc-connector done`)}o.classList.remove(`running`),_=null,a.classList.add(`shimmer-out`),setTimeout(()=>a.classList.remove(`visible`,`shimmer-out`),1e3)}else{a.classList.remove(`shimmer-out`),a.classList.add(`visible`),o.classList.add(`running`);let e=g.indexOf(r);g.forEach((t,n)=>{let r=document.getElementById(`dot-${t}`);r&&(r.className=`pabc-dot ${n<e?`done`:n===e?`active`:`future`}`,r.setAttribute(`data-phase`,t))});for(let t=0;t<4;t++){let n=document.getElementById(`pabc-conn-${t}`);n&&(n.className=`pabc-connector ${t<e?`done`:``}`)}_=r,requestAnimationFrame(()=>v(a,o,r))}s&&n&&(s.textContent=n)}}function w(){let g=`ws://${location.host}`;e.ws=new WebSocket(`${g}?lang=${n()}`),e.ws.onmessage=e=>{let n;try{n=JSON.parse(e.data)}catch{console.warn(`[ws] malformed message:`,e.data);return}if(!n||typeof n!=`object`||typeof n.type!=`string`){console.warn(`[ws] invalid message shape:`,n);return}if(n.type===`agent_status`)n.running===void 0?c(n.status||`idle`):c(n.running?`running`:`idle`),n.agentId&&n.phase&&(y[n.agentId]={phase:n.phase,phaseLabel:n.phaseLabel||``},t(()=>import(`./employees-V7lNStu1.js`).then(e=>e.loadEmployees()),__vite__mapDeps([0])));else if(n.type===`queue_update`)f(n.pending||0);else if(n.type===`worklog_created`)p(`${a.clipboard} Worklog: ${i(n.path||``)}`);else if(n.type===`round_start`){let e=n.agentPhases||n.subtasks||[],t=e.map(e=>i(e.agent||e.name||``)).join(`, `);p(r(`ws.roundStart`,{round:n.round||0,count:e.length,names:t}))}else if(n.type===`round_done`)n.action===`complete`?p(r(`ws.roundDone`,{round:n.round||0})):n.action===`next`?p(r(`ws.roundNext`,{round:n.round||0})):p(r(`ws.roundRetry`,{round:n.round||0}));else if(n.type===`agent_tool`){let e=n.toolType===`thinking`?`thinking`:n.toolType===`search`?`search`:`tool`;l({id:`step-${Date.now()}-${Math.random().toString(36).slice(2,6)}`,type:e,icon:n.icon||a.tool,label:n.label||``,detail:n.detail||``,stepRef:n.stepRef||``,status:n.status||`running`,startTime:Date.now()})}else if(n.type===`agent_output`)m(n.text||``);else if(n.type===`agent_retry`)p(r(`ws.retry`,{cli:i(n.cli||``),delay:n.delay||10}),`tool-activity`);else if(n.type===`agent_fallback`)p(r(`ws.fallback`,{from:i(n.from||``),to:i(n.to||``)}),`tool-activity`);else if(n.type===`agent_smoke`)p(`${a.warning} ${i(n.cli||`agent`)}: smoke response detected — auto-continuing`,`tool-activity`);else if(n.type===`agent_done`)s(n.text||``,n.toolLog);else if(n.type===`orchestrate_done`)s(n.text||``);else if(n.type===`clear`){o(),d(),u().clear();let e=document.getElementById(`chatMessages`);e&&(e.innerHTML=``),t(()=>import(`./idb-cache-C7z4qE00.js`).then(e=>e.clearCache()),[]).catch(()=>{})}else if(n.type===`session_reset`)p(`${a.refresh} Session reset — history preserved`,`tool-activity`);else if(n.type===`agent_added`||n.type===`agent_updated`||n.type===`agent_deleted`)t(()=>import(`./employees-V7lNStu1.js`).then(e=>e.loadEmployees()),__vite__mapDeps([0]));else if(n.type===`orc_state`){if(n.scope&&b&&n.scope!==b)return;C(typeof n.state==`string`?n.state:`IDLE`,n.title)}else n.type===`new_message`&&(n.source===`telegram`||n.source===`discord`)&&h(n.role===`assistant`?`agent`:n.role||`user`,n.content||``,n.cli)},e.ws.onopen=()=>{console.log(`[ws] connected`);let e=Date.now()-x<1e4;t(()=>import(`./ui-rD__Mvbs.js`).then(async t=>{if(t.cleanupToolActivity(),!e)try{await t.loadMessages(),x=Date.now()}catch(e){console.error(`[ws] loadMessages failed`,e)}t.setStatus(`idle`)}),__vite__mapDeps([0])),fetch(`/api/orchestrate/snapshot`).then(e=>e.json()).then(e=>{b=String(e.orc.scope||``),C(e.orc.state),S(e.workers),f(e.runtime.queuePending),c(e.runtime.busy?`running`:`idle`),t(()=>import(`./employees-V7lNStu1.js`).then(e=>{typeof e.renderEmployees==`function`&&e.renderEmployees()}),__vite__mapDeps([0]))}).catch(()=>{})},e.ws.onclose=()=>{console.log(`[ws] disconnected, reconnecting in 2s...`),t(()=>import(`./ui-rD__Mvbs.js`).then(e=>e.cleanupToolActivity()),__vite__mapDeps([0])),c(`idle`),p(`${a.exec} 연결 끊김 — 재연결 중...`,`tool-activity`),setTimeout(w,2e3)}}function T(e){return y[e]||null}export{T as n,w as t};

package/public/dist/index.html

@@ -25,7 +25,7 @@
         href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap"
         rel="stylesheet">
     <!-- Vite handles module bundling in dev (HMR) and production (build) -->
-  <script type="module" crossorigin src="/dist/assets/index-D61icK-D.js"></script>
+  <script type="module" crossorigin src="/dist/assets/index-Cpe1jccL.js"></script>
   <link rel="stylesheet" crossorigin href="/dist/assets/vendor-render-Bjnw0wQ6.css">
   <link rel="stylesheet" crossorigin href="/dist/assets/index-DVTRbkJF.css">
 </head>
@@ -90,7 +90,7 @@
             <div class="section-title" style="margin-top:12px" data-i18n="sidebar.avatar">아바타</div>
             <div class="avatar-row">
                 <div class="avatar-card">
-                    <div class="avatar-preview agent-icon" id="agentAvatarPreview" aria-hidden="true">🦈</div>
+                    <div class="avatar-preview agent-icon" id="agentAvatarPreview" data-icon="shark" aria-hidden="true"></div>
                     <span class="avatar-card-label">Agent</span>
                     <div class="avatar-card-actions">
                         <button class="avatar-action-btn" id="agentAvatarUploadBtn" title="Upload image">
@@ -103,7 +103,7 @@
                     <input type="file" id="agentAvatarFile" hidden accept="image/png,image/jpeg,image/webp,image/gif">
                 </div>
                 <div class="avatar-card">
-                    <div class="avatar-preview user-icon" id="userAvatarPreview" aria-hidden="true">👤</div>
+                    <div class="avatar-preview user-icon" id="userAvatarPreview" data-icon="user" aria-hidden="true"></div>
                     <span class="avatar-card-label">User</span>
                     <div class="avatar-card-actions">
                         <button class="avatar-action-btn" id="userAvatarUploadBtn" title="Upload image">

package/public/index.html

@@ -96,7 +96,7 @@
             <div class="section-title" style="margin-top:12px" data-i18n="sidebar.avatar">아바타</div>
             <div class="avatar-row">
                 <div class="avatar-card">
-                    <div class="avatar-preview agent-icon" id="agentAvatarPreview" aria-hidden="true">🦈</div>
+                    <div class="avatar-preview agent-icon" id="agentAvatarPreview" data-icon="shark" aria-hidden="true"></div>
                     <span class="avatar-card-label">Agent</span>
                     <div class="avatar-card-actions">
                         <button class="avatar-action-btn" id="agentAvatarUploadBtn" title="Upload image">
@@ -109,7 +109,7 @@
                     <input type="file" id="agentAvatarFile" hidden accept="image/png,image/jpeg,image/webp,image/gif">
                 </div>
                 <div class="avatar-card">
-                    <div class="avatar-preview user-icon" id="userAvatarPreview" aria-hidden="true">👤</div>
+                    <div class="avatar-preview user-icon" id="userAvatarPreview" data-icon="user" aria-hidden="true"></div>
                     <span class="avatar-card-label">User</span>
                     <div class="avatar-card-actions">
                         <button class="avatar-action-btn" id="userAvatarUploadBtn" title="Upload image">

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 },
@@ -56,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 {

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/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,47 +485,8 @@ export async function loadMessages(): Promise<void> {
         if (chatEl) chatEl.innerHTML = '';
 
         if (msgs.length >= VS_THRESHOLD) {
-            // RC5 fix: register callbacks BEFORE feeding items so activate() has them
-            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);
-            };
-
-            // Bulk-load all items at once — avoids mid-loop activate (RC5 fix)
-            const vsItems: import('./virtual-scroll.js').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 });
-            }
-            vs.setItems(vsItems);
-
-            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);
@@ -478,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();
+}