cli-jaw 1.6.13 → 1.6.14

package/public/js/features/avatar.ts

@@ -30,40 +30,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 {
@@ -91,7 +76,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 +95,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 +143,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 +152,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 +160,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/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

@@ -403,21 +403,7 @@ 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
+            // 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;
@@ -441,6 +427,22 @@ export async function loadMessages(): Promise<void> {
                 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();
         } else {
             msgs.forEach(m => {

package/public/js/virtual-scroll.ts

@@ -24,8 +24,8 @@ export class VirtualScroll {
     private _active = false;
     private _totalHeight = 0;
     private rafId: number | null = null;
-    private firstVisible = 0;
-    private lastVisible = 0;
+    private firstVisible = -1;
+    private lastVisible = -1;
 
     /** Called after render() mounts items in viewport — for lazy rendering and widget activation */
     onLazyRender: LazyRenderCallback | null = null;
@@ -53,18 +53,28 @@ export class VirtualScroll {
         if (this.rafId) { cancelAnimationFrame(this.rafId); this.rafId = null; }
         this.container.innerHTML = this.items.map(it => it.html).join('');
         this._active = false;
-        this.firstVisible = 0;
-        this.lastVisible = 0;
+        this.firstVisible = -1;
+        this.lastVisible = -1;
         this.items = [];
         this._totalHeight = 0;
     }
 
+    /** Bulk-load items without triggering activate mid-loop (RC5 fix).
+     *  Call this AFTER registering onLazyRender/onPostRender. */
+    setItems(items: VirtualItem[]): void {
+        this.items = items;
+        this._totalHeight = items.reduce((sum, it) => sum + it.height, 0);
+        if (!this._active && this.items.length >= THRESHOLD) {
+            this.activate(true);
+        }
+    }
+
     addItem(id: string, html: string): void {
         const item: VirtualItem = { id, html, height: EST_HEIGHT };
         this.items.push(item);
         this._totalHeight += EST_HEIGHT;
         if (!this._active && this.items.length >= THRESHOLD) {
-            this.activate();
+            this.activate(true);
         }
         if (this._active) {
             this.scheduleRender();
@@ -80,8 +90,7 @@ export class VirtualScroll {
         const item: VirtualItem = { id, html, height: EST_HEIGHT };
         this.items.push(item);
         this._totalHeight += EST_HEIGHT;
-        // Render immediately then scroll again after height is remeasured
-        this.render();
+        // RC7 fix: use synchronous scrollToBottom (which handles spacers + render)
         this.scrollToBottom();
     }
 
@@ -94,7 +103,8 @@ export class VirtualScroll {
 
     private scrollHandler = () => this.scheduleRender();
 
-    private activate(): void {
+    /** RC6 fix: activate always scrolls to bottom (new messages are at the end) */
+    private activate(toBottom = false): void {
         this._active = true;
         this._totalHeight = 0;
         const existing = this.container.querySelectorAll('.msg');
@@ -103,14 +113,20 @@ export class VirtualScroll {
                 this.items[i].height = el.getBoundingClientRect().height;
             }
         });
-        // Rebuild _totalHeight from items array (covers both DOM-measured and estimated heights)
         for (const item of this.items) {
             this._totalHeight += item.height;
         }
-        // Atomic swap — avoids visible blank frame during activation
         this.container.classList.add('vs-active');
         this.container.replaceChildren(this.spacerTop, this.viewport, this.spacerBottom);
         this.container.addEventListener('scroll', this.scrollHandler, { passive: true });
+        if (toBottom) {
+            // Set spacers for bottom position BEFORE render to avoid top flash
+            this.spacerTop.style.height = `${this._totalHeight}px`;
+            this.spacerBottom.style.height = '0px';
+            this.container.scrollTop = this.container.scrollHeight;
+            this.firstVisible = -1;
+            this.lastVisible = -1;
+        }
         this.render();
     }
 
@@ -127,7 +143,7 @@ export class VirtualScroll {
         const viewHeight = this.container.clientHeight;
 
         let accum = 0;
-        let startIdx = this.items.length - 1;   // fallback to bottom, not top
+        let startIdx = this.items.length - 1;
         for (let i = 0; i < this.items.length; i++) {
             if (accum + this.items[i].height > scrollTop) {
                 startIdx = i;
@@ -146,10 +162,7 @@ export class VirtualScroll {
         }
         const last = Math.min(this.items.length - 1, endIdx + BUFFER);
 
-        if (first === this.firstVisible && last === this.lastVisible) return;
-        this.firstVisible = first;
-        this.lastVisible = last;
-
+        // RC3 fix: always update spacers even if range unchanged
         let topSpace = 0;
         for (let i = 0; i < first; i++) topSpace += this.items[i].height;
         let bottomSpace = 0;
@@ -158,6 +171,10 @@ export class VirtualScroll {
         this.spacerTop.style.height = `${topSpace}px`;
         this.spacerBottom.style.height = `${bottomSpace}px`;
 
+        if (first === this.firstVisible && last === this.lastVisible) return;
+        this.firstVisible = first;
+        this.lastVisible = last;
+
         // Build map of currently mounted items by vsIdx
         const mounted = new Map<number, HTMLElement>();
         for (const child of Array.from(this.viewport.children) as HTMLElement[]) {
@@ -221,7 +238,6 @@ export class VirtualScroll {
     /** Batch-read heights from visible elements, batch-write to items array.
      *  Separated read/write passes = single forced reflow. */
     private remeasureVisible(): void {
-        // Capture bottom-proximity BEFORE heights change
         const wasAtBottom = this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < 80;
 
         const rects: { idx: number; newH: number }[] = [];
@@ -240,15 +256,22 @@ export class VirtualScroll {
                 heightChanged = true;
             }
         }
-        // Re-snap to bottom if user was there before heights grew
         if (heightChanged && wasAtBottom) {
             this.scrollToBottom();
         }
     }
 
+    /** RC2 fix: synchronous scroll — cancel pending RAF, update spacers, render directly */
     scrollToBottom(): void {
+        if (this.rafId) { cancelAnimationFrame(this.rafId); this.rafId = null; }
+        // Update spacers to reflect full content height at bottom position
+        this.spacerTop.style.height = `${this._totalHeight}px`;
+        this.spacerBottom.style.height = '0px';
         this.container.scrollTop = this.container.scrollHeight;
-        this.scheduleRender();
+        // Reset visible range to force full re-render at new position
+        this.firstVisible = -1;
+        this.lastVisible = -1;
+        this.render();
     }
 
     clear(): void {
@@ -263,8 +286,8 @@ export class VirtualScroll {
             this.container.innerHTML = '';
         }
         this._active = false;
-        this.firstVisible = 0;
-        this.lastVisible = 0;
+        this.firstVisible = -1;
+        this.lastVisible = -1;
         this.onLazyRender = null;
         this.onPostRender = null;
         if (this.rafId) {