@leftium/gg 0.0.44 → 0.0.46

package/dist/GgConsole.svelte

@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 	import type { GgErudaOptions } from './eruda/types.js';
 
-	let { prod, maxEntries, erudaOptions }: GgErudaOptions = $props();
+	let { prod, maxEntries, erudaOptions, open }: GgErudaOptions = $props();
 
 	onMount(() => {
 		import('./eruda/index.js').then(({ initGgEruda }) => {
-			initGgEruda({ prod, maxEntries, erudaOptions });
+			initGgEruda({ prod, maxEntries, erudaOptions, open });
 		});
 	});
 </script>

package/dist/eruda/buffer.d.ts

@@ -1,19 +1,36 @@
 import type { CapturedEntry } from './types.js';
 /**
- * Ring buffer for captured log entries
+ * Ring buffer for captured log entries.
+ *
+ * Uses a fixed-size array with a head pointer so that push() is always O(1).
+ * The previous implementation used Array.push + Array.shift which is O(n)
+ * once the buffer is full (every shift copies all elements forward).
  */
 export declare class LogBuffer {
-    private entries;
+    private buf;
+    private head;
+    private count;
     private maxSize;
     private _totalPushed;
     constructor(maxSize?: number);
     /**
-     * Add an entry to the buffer
-     * If buffer is full, oldest entry is removed
+     * Add an entry to the buffer — O(1) always.
+     * If buffer is full, the oldest entry is overwritten.
      */
     push(entry: CapturedEntry): void;
     /**
-     * Get all entries (optionally filtered)
+     * Get a single entry by logical index (0 = oldest). O(1).
+     * Returns undefined if index is out of range.
+     */
+    get(index: number): CapturedEntry | undefined;
+    /**
+     * Get a range of entries [start, end) by logical index. O(end - start).
+     * Clamps to valid range. Returns a new array.
+     */
+    getRange(start: number, end: number): CapturedEntry[];
+    /**
+     * Get all entries in insertion order (optionally filtered).
+     * Allocates a new array — used for full renders, not the hot path.
      */
     getEntries(filter?: (entry: CapturedEntry) => boolean): CapturedEntry[];
     /**

package/dist/eruda/buffer.js

@@ -1,44 +1,87 @@
 /**
- * Ring buffer for captured log entries
+ * Ring buffer for captured log entries.
+ *
+ * Uses a fixed-size array with a head pointer so that push() is always O(1).
+ * The previous implementation used Array.push + Array.shift which is O(n)
+ * once the buffer is full (every shift copies all elements forward).
  */
 export class LogBuffer {
-    entries = [];
+    buf;
+    head = 0; // index of the oldest entry
+    count = 0; // number of live entries
     maxSize;
     _totalPushed = 0;
     constructor(maxSize = 2000) {
         this.maxSize = maxSize;
+        this.buf = new Array(maxSize);
     }
     /**
-     * Add an entry to the buffer
-     * If buffer is full, oldest entry is removed
+     * Add an entry to the buffer — O(1) always.
+     * If buffer is full, the oldest entry is overwritten.
      */
     push(entry) {
         this._totalPushed++;
-        this.entries.push(entry);
-        if (this.entries.length > this.maxSize) {
-            this.entries.shift(); // Remove oldest
+        if (this.count < this.maxSize) {
+            // Buffer not yet full — append at head + count
+            this.buf[(this.head + this.count) % this.maxSize] = entry;
+            this.count++;
+        }
+        else {
+            // Overwrite oldest entry, advance head
+            this.buf[this.head] = entry;
+            this.head = (this.head + 1) % this.maxSize;
         }
     }
     /**
-     * Get all entries (optionally filtered)
+     * Get a single entry by logical index (0 = oldest). O(1).
+     * Returns undefined if index is out of range.
+     */
+    get(index) {
+        if (index < 0 || index >= this.count)
+            return undefined;
+        return this.buf[(this.head + index) % this.maxSize];
+    }
+    /**
+     * Get a range of entries [start, end) by logical index. O(end - start).
+     * Clamps to valid range. Returns a new array.
+     */
+    getRange(start, end) {
+        const s = Math.max(0, start);
+        const e = Math.min(this.count, end);
+        const result = [];
+        for (let i = s; i < e; i++) {
+            result.push(this.buf[(this.head + i) % this.maxSize]);
+        }
+        return result;
+    }
+    /**
+     * Get all entries in insertion order (optionally filtered).
+     * Allocates a new array — used for full renders, not the hot path.
      */
     getEntries(filter) {
-        if (!filter)
-            return [...this.entries];
-        return this.entries.filter(filter);
+        const result = [];
+        for (let i = 0; i < this.count; i++) {
+            const entry = this.buf[(this.head + i) % this.maxSize];
+            if (!filter || filter(entry)) {
+                result.push(entry);
+            }
+        }
+        return result;
     }
     /**
      * Clear all entries
      */
     clear() {
-        this.entries = [];
+        this.buf = new Array(this.maxSize);
+        this.head = 0;
+        this.count = 0;
         this._totalPushed = 0;
     }
     /**
      * Get entry count
      */
     get size() {
-        return this.entries.length;
+        return this.count;
     }
     /**
      * Get total entries ever pushed (including evicted ones)
@@ -50,7 +93,7 @@ export class LogBuffer {
      * Get number of entries evicted due to buffer overflow
      */
     get evicted() {
-        return this._totalPushed - this.entries.length;
+        return this._totalPushed - this.count;
     }
     /**
      * Get the maximum capacity

package/dist/eruda/loader.js

@@ -86,10 +86,12 @@ export async function loadEruda(options) {
         const ggPlugin = createGgPlugin(options, gg);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         eruda.add(ggPlugin);
-        // Make GG tab the default selected tab
+        // Select GG tab as default (but don't open the panel)
         eruda.show('GG');
-        // Expand the Eruda panel (open from minimized floating button state)
-        eruda.show();
+        // Open the panel if requested
+        if (options.open) {
+            eruda.show();
+        }
         // Run diagnostics after Eruda is ready so they appear in Console tab
         await runGgDiagnostics();
     }

package/dist/eruda/plugin.js

@@ -1,5 +1,6 @@
 import { DEV } from 'esm-env';
 import { LogBuffer } from './buffer.js';
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect, measureElement } from '@tanstack/virtual-core';
 const _ggCallSitesPlugin = typeof __GG_TAG_PLUGIN__ !== 'undefined' ? __GG_TAG_PLUGIN__ : false;
 /**
  * Creates the gg Eruda plugin
@@ -19,8 +20,15 @@ export function createGgPlugin(options, gg) {
     let filterExpanded = false;
     let filterPattern = '';
     const enabledNamespaces = new Set();
-    // Last rendered entries (for hover tooltip arg lookup)
-    let renderedEntries = [];
+    // Virtual scroll: filtered indices into the buffer (the "rows" the virtualizer sees)
+    let filteredIndices = [];
+    // Virtual scroll: the @tanstack/virtual-core Virtualizer instance
+    let virtualizer = null;
+    // Virtual scroll: track expanded state so it survives re-renders.
+    // Keys are the uniqueId strings (e.g. "42-0") for object details and
+    // stack IDs (e.g. "stack-42") for stack traces.
+    const expandedDetails = new Set();
+    const expandedStacks = new Set();
     // Toast state for "namespace hidden" feedback
     let lastHiddenPattern = null; // filterPattern before the hide (for undo)
     let hasSeenToastExplanation = false; // first toast auto-expands help text
@@ -120,9 +128,9 @@ export function createGgPlugin(options, gg) {
         const time = new Date(entry.timestamp).toISOString().slice(11, 23);
         // Trim namespace and strip 'gg:' prefix to save tokens
         const ns = entry.namespace.trim().replace(/^gg:/, '');
-        // Include expression suffix when toggle is enabled
+        // Include expression on its own line above the value when toggle is enabled
         const hasSrcExpr = !entry.level && entry.src?.trim() && !/^['"`]/.test(entry.src);
-        const exprSuffix = includeExpressions && hasSrcExpr ? ` \u2039${entry.src}\u203A` : '';
+        const exprLine = includeExpressions && hasSrcExpr ? `\u2039${entry.src}\u203A\n` : '';
         // Format args: compact JSON for objects, primitives as-is
         const argsStr = entry.args
             .map((arg) => {
@@ -133,7 +141,7 @@ export function createGgPlugin(options, gg) {
             return stripAnsi(String(arg));
         })
             .join(' ');
-        return `${time} ${ns} ${argsStr}${exprSuffix}`;
+        return `${exprLine}${time} ${ns} ${argsStr}`;
     }
     const plugin = {
         name: 'GG',
@@ -225,8 +233,19 @@ export function createGgPlugin(options, gg) {
             if (gg) {
                 gg._onLog = null;
             }
+            // Clean up virtualizer
+            if (virtualizer && $el) {
+                const containerDom = $el.find('.gg-log-container').get(0);
+                if (containerDom) {
+                    const cleanup = containerDom.__ggVirtualCleanup;
+                    if (cleanup)
+                        cleanup();
+                }
+                virtualizer = null;
+            }
             buffer.clear();
             allNamespacesSet.clear();
+            filteredIndices = [];
         }
     };
     function toggleNamespace(namespace, enable) {
@@ -369,7 +388,10 @@ export function createGgPlugin(options, gg) {
     function gridColumns() {
         const ns = nsColWidth !== null ? `${nsColWidth}px` : 'auto';
         // Grid columns: diff | ns | handle | content
-        return `auto ${ns} 4px 1fr`;
+        // Diff uses a fixed width (3.5em) instead of auto to avoid column jitter
+        // when virtual scroll swaps rows in/out — only ~50 rows are in the DOM
+        // at a time so auto would resize based on visible subset.
+        return `3.5em ${ns} 4px 1fr`;
     }
     function buildHTML() {
         return `
@@ -380,9 +402,11 @@ export function createGgPlugin(options, gg) {
 				column-gap: 0;
 				align-items: start !important;
 			}
-			/* Desktop: hide wrapper divs, show direct children */
+			/* Virtual scroll: each entry is a subgrid row with measurable height */
 			.gg-log-entry {
-				display: contents;
+				display: grid;
+				grid-template-columns: subgrid;
+				grid-column: 1 / -1;
 			}
 		.gg-log-header {
 			display: contents;
@@ -395,6 +419,11 @@ export function createGgPlugin(options, gg) {
 			align-self: start !important;
 			border-top: 1px solid rgba(0,0,0,0.05);
 		}
+		/* Virtual scroll: spacer provides total height for scrollbar */
+		.gg-virtual-spacer {
+			position: relative;
+			width: 100%;
+		}
 	.gg-reset-filter-btn:hover {
 		background: #1976D2 !important;
 		transform: translateY(-1px);
@@ -1659,7 +1688,20 @@ export function createGgPlugin(options, gg) {
                     return;
                 const details = containerEl.querySelector(`.gg-details[data-index="${index}"]`);
                 if (details) {
-                    details.style.display = details.style.display === 'none' ? 'block' : 'none';
+                    const nowVisible = details.style.display === 'none';
+                    details.style.display = nowVisible ? 'block' : 'none';
+                    // Track state so it survives virtual scroll re-renders
+                    if (nowVisible) {
+                        expandedDetails.add(index);
+                    }
+                    else {
+                        expandedDetails.delete(index);
+                    }
+                    // Re-measure the entry so virtualizer adjusts total height
+                    const entryEl = details.closest('.gg-log-entry');
+                    if (entryEl && virtualizer) {
+                        virtualizer.measureElement(entryEl);
+                    }
                 }
                 return;
             }
@@ -1673,6 +1715,18 @@ export function createGgPlugin(options, gg) {
                     const isExpanded = stackEl.classList.contains('expanded');
                     stackEl.classList.toggle('expanded');
                     target.textContent = isExpanded ? '▶ stack' : '▼ stack';
+                    // Track state so it survives virtual scroll re-renders
+                    if (isExpanded) {
+                        expandedStacks.delete(stackId);
+                    }
+                    else {
+                        expandedStacks.add(stackId);
+                    }
+                    // Re-measure the entry so virtualizer adjusts total height
+                    const entryEl = stackEl.closest('.gg-log-entry');
+                    if (entryEl && virtualizer) {
+                        virtualizer.measureElement(entryEl);
+                    }
                 }
                 return;
             }
@@ -1817,7 +1871,7 @@ export function createGgPlugin(options, gg) {
                 const entryIdx = entryEl?.getAttribute('data-entry');
                 if (entryIdx === null || entryIdx === undefined)
                     return;
-                const entry = renderedEntries[Number(entryIdx)];
+                const entry = buffer.get(Number(entryIdx));
                 if (!entry)
                     return;
                 e.preventDefault();
@@ -1839,7 +1893,7 @@ export function createGgPlugin(options, gg) {
             const argIdx = target.getAttribute('data-arg');
             if (entryIdx === null || argIdx === null)
                 return;
-            const entry = renderedEntries[Number(entryIdx)];
+            const entry = buffer.get(Number(entryIdx));
             if (!entry)
                 return;
             const arg = entry.args[Number(argIdx)];
@@ -1992,8 +2046,11 @@ export function createGgPlugin(options, gg) {
         containerEl.addEventListener('pointerup', onPointerUp);
         resizeAttached = true;
     }
-    /** Build the HTML string for a single log entry */
-    function renderEntryHTML(entry, index) {
+    /** Build the HTML string for a single log entry.
+     * @param index Buffer index (used for data-entry, expand IDs, tooltip lookup)
+     * @param virtualIndex Position in filteredIndices (used by virtualizer for measurement)
+     */
+    function renderEntryHTML(entry, index, virtualIndex) {
         const color = entry.color || '#0066cc';
         const diff = `+${humanize(entry.diff)}`;
         // Split namespace into clickable segments on multiple delimiters: : @ / - _
@@ -2065,16 +2122,19 @@ export function createGgPlugin(options, gg) {
                     const uniqueId = `${index}-${argIdx}`;
                     // Expression header inside expanded details
                     const srcHeader = srcExpr ? `<div class="gg-details-src">${srcExpr}</div>` : '';
-                    // Store details separately to render after the row
-                    detailsHTML += `<div class="gg-details" data-index="${uniqueId}" style="display: none; margin: 4px 0 8px 0; padding: 8px; background: #f8f8f8; border-left: 3px solid ${color}; font-size: 11px; overflow-x: auto;">${srcHeader}<pre style="margin: 0;">${jsonStr}</pre></div>`;
+                    // Store details separately to render after the row.
+                    // Restore expanded state from expandedDetails set so it
+                    // survives virtual scroll re-renders.
+                    const detailsVisible = expandedDetails.has(uniqueId);
+                    detailsHTML += `<div class="gg-details" data-index="${uniqueId}" style="display: ${detailsVisible ? 'block' : 'none'}; margin: 4px 0 8px 0; padding: 8px; background: #f8f8f8; border-left: 3px solid ${color}; font-size: 11px; overflow-x: auto;">${srcHeader}<pre style="margin: 0;">${jsonStr}</pre></div>`;
                     // data-entry/data-arg for hover tooltip lookup, data-src for expression context
                     const srcAttr = srcExpr ? ` data-src="${srcExpr}"` : '';
                     const srcIcon = srcExpr ? `<span class="gg-src-icon">\uD83D\uDD0D</span>` : '';
-                    // Show expression inline after preview when toggle is enabled
-                    const inlineExpr = showExpressions && srcExpr
-                        ? ` <span class="gg-inline-expr">\u2039${srcExpr}\u203A</span>`
+                    // Show expression on its own line above the value when toggle is enabled
+                    const exprAbove = showExpressions && srcExpr
+                        ? `<div class="gg-inline-expr">\u2039${srcExpr}\u203A</div>`
                         : '';
-                    return `<span style="color: #888; cursor: pointer; text-decoration: underline;" class="gg-expand" data-index="${uniqueId}" data-entry="${index}" data-arg="${argIdx}"${srcAttr}>${srcIcon}${preview}${inlineExpr}</span>`;
+                    return `${exprAbove}<span style="color: #888; cursor: pointer; text-decoration: underline;" class="gg-expand" data-index="${uniqueId}" data-entry="${index}" data-arg="${argIdx}"${srcAttr}>${srcIcon}${preview}</span>`;
                 }
                 else {
                     // Parse ANSI codes first, then convert URLs to clickable links
@@ -2097,27 +2157,31 @@ export function createGgPlugin(options, gg) {
                 : entry.level === 'error'
                     ? ' gg-level-error'
                     : '';
-        // Stack trace toggle (for error/trace entries with captured stacks)
+        // Stack trace toggle (for error/trace entries with captured stacks).
+        // Restore expanded state from expandedStacks set so it survives
+        // virtual scroll re-renders.
         let stackHTML = '';
         if (entry.stack) {
             const stackId = `stack-${index}`;
+            const stackExpanded = expandedStacks.has(stackId);
             stackHTML =
-                `<span class="gg-stack-toggle" data-stack-id="${stackId}">▶ stack</span>` +
-                    `<div class="gg-stack-content" data-stack-id="${stackId}">${escapeHtml(entry.stack)}</div>`;
+                `<span class="gg-stack-toggle" data-stack-id="${stackId}">${stackExpanded ? '▼' : '▶'} stack</span>` +
+                    `<div class="gg-stack-content${stackExpanded ? ' expanded' : ''}" data-stack-id="${stackId}">${escapeHtml(entry.stack)}</div>`;
         }
         // Expression tooltip: skip table entries (tableData) -- expression is just gg.table(...) which isn't useful
         const hasSrcExpr = !entry.level && !entry.tableData && entry.src?.trim() && !/^['"`]/.test(entry.src);
-        // For primitives-only entries, append inline expression when showExpressions is enabled
-        const inlineExprForPrimitives = showExpressions && hasSrcExpr && !argsHTML.includes('gg-expand')
-            ? ` <span class="gg-inline-expr">\u2039${escapeHtml(entry.src)}\u203A</span>`
+        // For primitives-only entries, show expression on its own line above the value when showExpressions is enabled
+        const exprAboveForPrimitives = showExpressions && hasSrcExpr && !argsHTML.includes('gg-expand')
+            ? `<div class="gg-inline-expr">\u2039${escapeHtml(entry.src)}\u203A</div>`
             : '';
-        return (`<div class="gg-log-entry${levelClass}" data-entry="${index}">` +
+        const vindexAttr = virtualIndex !== undefined ? ` data-vindex="${virtualIndex}"` : '';
+        return (`<div class="gg-log-entry${levelClass}" data-entry="${index}"${vindexAttr}>` +
             `<div class="gg-log-header">` +
             `<div class="gg-log-diff" style="color: ${color};"${fileAttr}${lineAttr}${colAttr}>${diff}</div>` +
             `<div class="gg-log-ns" style="color: ${color};" data-namespace="${escapeHtml(entry.namespace)}"><span class="gg-ns-text">${nsHTML}</span><button class="gg-ns-hide" data-namespace="${escapeHtml(entry.namespace)}" title="Hide this namespace">\u00d7</button></div>` +
             `<div class="gg-log-handle"></div>` +
             `</div>` +
-            `<div class="gg-log-content"${hasSrcExpr ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${argsHTML}${inlineExprForPrimitives}${stackHTML}</div>` +
+            `<div class="gg-log-content"${hasSrcExpr ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${exprAboveForPrimitives}${argsHTML}${stackHTML}</div>` +
             detailsHTML +
             `</div>`);
     }
@@ -2146,21 +2210,129 @@ export function createGgPlugin(options, gg) {
         if (!copyCountSpan.length)
             return;
         const allCount = buffer.size;
-        const visibleCount = renderedEntries.length;
+        const visibleCount = filteredIndices.length;
         const countText = visibleCount === allCount
             ? `Copy ${visibleCount} ${visibleCount === 1 ? 'entry' : 'entries'}`
             : `Copy ${visibleCount} / ${allCount} ${visibleCount === 1 ? 'entry' : 'entries'}`;
         copyCountSpan.html(countText);
     }
-    /** Scroll to bottom only if user is already near the bottom */
-    function autoScroll(el) {
-        const threshold = 50; // px from bottom
-        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
-        if (nearBottom)
-            el.scrollTop = el.scrollHeight;
+    // ─── Virtual scroll helpers ───────────────────────────────────────────
+    /** Rebuild the filtered index list from the buffer. */
+    function rebuildFilteredIndices() {
+        filteredIndices = [];
+        for (let i = 0; i < buffer.size; i++) {
+            const entry = buffer.get(i);
+            if (enabledNamespaces.has(entry.namespace)) {
+                filteredIndices.push(i);
+            }
+        }
     }
+    /** Track whether user is near bottom (for auto-scroll decisions). */
+    let userNearBottom = true;
     /**
-     * Incremental append: add new entries to the existing DOM without full rebuild.
+     * Render the visible virtual items into the DOM grid.
+     * Called by the virtualizer's onChange and after new entries arrive.
+     */
+    let isRendering = false;
+    function renderVirtualItems() {
+        // Guard against re-entrant calls (measureElement → onChange → renderVirtualItems)
+        if (isRendering)
+            return;
+        if (!$el || !virtualizer)
+            return;
+        const containerDom = $el.find('.gg-log-container').get(0);
+        if (!containerDom)
+            return;
+        const spacer = containerDom.querySelector('.gg-virtual-spacer');
+        const grid = containerDom.querySelector('.gg-log-grid');
+        if (!spacer || !grid)
+            return;
+        const items = virtualizer.getVirtualItems();
+        if (items.length === 0) {
+            grid.innerHTML = '';
+            return;
+        }
+        // Set the spacer's height so the scrollbar reflects the full virtual list
+        spacer.style.height = `${virtualizer.getTotalSize()}px`;
+        // Position the grid at the start offset of the first visible item
+        const startOffset = items[0].start;
+        grid.style.transform = `translateY(${startOffset}px)`;
+        // Build HTML only for visible items
+        const html = items
+            .map((item) => {
+            const bufferIdx = filteredIndices[item.index];
+            const entry = buffer.get(bufferIdx);
+            if (!entry)
+                return '';
+            return renderEntryHTML(entry, bufferIdx, item.index);
+        })
+            .join('');
+        grid.innerHTML = html;
+        // After inserting HTML, measure each rendered entry so the virtualizer
+        // learns actual heights (drives dynamic sizing).
+        isRendering = true;
+        try {
+            const entryEls = grid.querySelectorAll('.gg-log-entry');
+            entryEls.forEach((el) => {
+                virtualizer.measureElement(el);
+            });
+        }
+        finally {
+            isRendering = false;
+        }
+    }
+    /**
+     * Create or reconfigure the virtualizer for the current filteredIndices.
+     * Call after filter changes or full rebuilds.
+     */
+    function setupVirtualizer(scrollToBottom) {
+        if (!$el)
+            return;
+        const containerDom = $el.find('.gg-log-container').get(0);
+        if (!containerDom)
+            return;
+        // Tear down previous virtualizer
+        if (virtualizer) {
+            virtualizer.setOptions({
+                ...virtualizer.options,
+                count: 0,
+                enabled: false
+            });
+            virtualizer = null;
+        }
+        const count = filteredIndices.length;
+        if (count === 0)
+            return;
+        virtualizer = new Virtualizer({
+            count,
+            getScrollElement: () => containerDom,
+            estimateSize: () => 24, // estimated row height in px
+            overscan: 10,
+            observeElementRect,
+            observeElementOffset,
+            scrollToFn: elementScroll,
+            measureElement: (el, entry, instance) => measureElement(el, entry, instance),
+            // Use buffer index as the stable key for each virtual row
+            getItemKey: (index) => filteredIndices[index],
+            // The data-index attribute TanStack uses to find elements for measurement
+            indexAttribute: 'data-vindex',
+            onChange: () => {
+                renderVirtualItems();
+            }
+        });
+        // Mount the virtualizer (attaches scroll/resize observers)
+        const cleanup = virtualizer._didMount();
+        // Store cleanup for when we tear down (TODO: call on destroy)
+        containerDom.__ggVirtualCleanup = cleanup;
+        // Initial render, then scroll to bottom if requested
+        virtualizer._willUpdate();
+        renderVirtualItems();
+        if (scrollToBottom) {
+            virtualizer.scrollToIndex(count - 1, { align: 'end' });
+        }
+    }
+    /**
+     * Incremental append: add new entries to the virtual scroll.
      * Called from the rAF-batched _onLog path.
      */
     function appendLogs(newEntries) {
@@ -2169,47 +2341,50 @@ export function createGgPlugin(options, gg) {
         const logContainer = $el.find('.gg-log-container');
         if (!logContainer.length)
             return;
-        // Filter new entries to only those matching enabled namespaces
-        const visibleNew = newEntries.filter((e) => enabledNamespaces.has(e.namespace));
-        // If there's no grid yet (first entries, or was showing empty state), do a full render
         const containerDom = logContainer.get(0);
-        const grid = containerDom?.querySelector('.gg-log-grid');
-        if (!grid || !containerDom) {
+        if (!containerDom)
+            return;
+        // Check if we need a full render (no grid yet, or empty state showing)
+        const grid = containerDom.querySelector('.gg-log-grid');
+        if (!grid) {
             renderLogs();
             return;
         }
-        if (visibleNew.length === 0) {
-            // New entries were all filtered out, just update count
+        // Check if any new entries pass the filter
+        const hasVisible = newEntries.some((e) => enabledNamespaces.has(e.namespace));
+        if (!hasVisible && buffer.evicted === 0) {
             updateCopyCount();
             return;
         }
-        // Compute the starting index (position in the renderedEntries array)
-        const startIndex = renderedEntries.length;
-        // Add to renderedEntries
-        renderedEntries.push(...visibleNew);
-        // Build HTML for just the new entries
-        const html = visibleNew.map((entry, i) => renderEntryHTML(entry, startIndex + i)).join('');
-        // Append to existing grid (no full DOM teardown!)
-        grid.insertAdjacentHTML('beforeend', html);
-        // Handle buffer overflow: the buffer evicts oldest entries when full.
-        // Count DOM entries and remove excess from the front to stay in sync.
-        // This avoids an expensive buffer.getEntries() + filter call.
-        const domEntries = grid.querySelectorAll(':scope > .gg-log-entry');
-        const excess = domEntries.length - buffer.capacity;
-        if (excess > 0) {
-            for (let i = 0; i < excess; i++) {
-                // Remove the entry and any associated .gg-details siblings
-                domEntries[i].remove();
-            }
-            // Trim renderedEntries from the front to match
-            renderedEntries.splice(0, excess);
-        }
+        // Rebuild filteredIndices from scratch. This is O(buffer.size) with a
+        // Set lookup per entry — ~0.1ms for 2000 entries. Always correct even
+        // when the buffer wraps and old logical indices shift.
+        rebuildFilteredIndices();
         updateCopyCount();
         updateTruncationBanner();
-        // Re-wire expanders after rendering
+        // Check if user is near bottom before we update the virtualizer
+        const nearBottom = containerDom.scrollHeight - containerDom.scrollTop - containerDom.clientHeight < 50;
+        userNearBottom = nearBottom;
+        // Update virtualizer count and re-render
+        if (virtualizer) {
+            virtualizer.setOptions({
+                ...virtualizer.options,
+                count: filteredIndices.length,
+                getItemKey: (index) => filteredIndices[index]
+            });
+            virtualizer._willUpdate();
+            // Render first so spacer height is updated, then scroll
+            renderVirtualItems();
+            if (userNearBottom) {
+                virtualizer.scrollToIndex(filteredIndices.length - 1, { align: 'end' });
+            }
+        }
+        else {
+            // First entries — set up the virtualizer
+            setupVirtualizer(true);
+        }
+        // Re-wire expanders (idempotent — only attaches once)
         wireUpExpanders();
-        // Smart auto-scroll
-        autoScroll(containerDom);
     }
     /** Full render: rebuild the entire log view (used for filter changes, clear, show, etc.) */
     function renderLogs() {
@@ -2218,16 +2393,27 @@ export function createGgPlugin(options, gg) {
         const logContainer = $el.find('.gg-log-container');
         if (!logContainer.length)
             return;
-        const allEntries = buffer.getEntries();
-        // Apply filtering
-        const entries = allEntries.filter((entry) => enabledNamespaces.has(entry.namespace));
-        renderedEntries = entries;
+        // Clear expansion state on full rebuild
+        expandedDetails.clear();
+        expandedStacks.clear();
+        // Rebuild filtered indices from scratch
+        rebuildFilteredIndices();
         updateCopyCount();
         updateTruncationBanner();
-        if (entries.length === 0) {
-            const hasFilteredLogs = allEntries.length > 0;
+        if (filteredIndices.length === 0) {
+            // Tear down virtualizer
+            if (virtualizer) {
+                const containerDom = logContainer.get(0);
+                if (containerDom) {
+                    const cleanup = containerDom.__ggVirtualCleanup;
+                    if (cleanup)
+                        cleanup();
+                }
+                virtualizer = null;
+            }
+            const hasFilteredLogs = buffer.size > 0;
             const message = hasFilteredLogs
-                ? `All ${allEntries.length} logs filtered out.`
+                ? `All ${buffer.size} logs filtered out.`
                 : 'No logs captured yet. Call gg() to see output here.';
             const resetButton = hasFilteredLogs
                 ? '<button class="gg-reset-filter-btn" style="margin-top: 12px; padding: 10px 20px; cursor: pointer; border: 1px solid #2196F3; background: #2196F3; color: white; border-radius: 6px; font-size: 13px; font-weight: 500; transition: background 0.2s;">Show all logs (gg:*)</button>'
@@ -2235,23 +2421,18 @@ export function createGgPlugin(options, gg) {
             logContainer.html(`<div style="padding: 20px; text-align: center; opacity: 0.5;">${message}<div>${resetButton}</div></div>`);
             return;
         }
-        const logsHTML = `<div class="gg-log-grid${filterExpanded ? ' filter-mode' : ''}${showExpressions ? ' gg-show-expr' : ''}" style="grid-template-columns: ${gridColumns()};">${entries
-            .map((entry, index) => renderEntryHTML(entry, index))
-            .join('')}</div>`;
-        logContainer.html(logsHTML);
-        // Append hover tooltip div (destroyed by .html() each render, so re-create)
-        const containerDom = logContainer.get(0);
-        if (containerDom) {
-            const tip = document.createElement('div');
-            tip.className = 'gg-hover-tooltip';
-            containerDom.appendChild(tip);
-        }
-        // Re-wire expanders after rendering
+        // Build the virtual scroll DOM structure:
+        // - .gg-virtual-spacer: sized to total virtual height (provides scrollbar)
+        //   - .gg-log-grid: positioned absolutely, translated to visible offset, holds only visible entries
+        const gridClasses = `gg-log-grid${filterExpanded ? ' filter-mode' : ''}${showExpressions ? ' gg-show-expr' : ''}`;
+        logContainer.html(`<div class="gg-virtual-spacer">` +
+            `<div class="${gridClasses}" style="position: absolute; top: 0; left: 0; width: 100%; grid-template-columns: ${gridColumns()};"></div>` +
+            `</div>` +
+            `<div class="gg-hover-tooltip"></div>`);
+        // Re-wire event delegation (idempotent)
         wireUpExpanders();
-        // Auto-scroll to bottom
-        const el = logContainer.get(0);
-        if (el)
-            el.scrollTop = el.scrollHeight;
+        // Create virtualizer and render
+        setupVirtualizer(true);
     }
     /** Format ms like debug's `ms` package: 0ms, 500ms, 5s, 2m, 1h, 3d */
     function humanize(ms) {

package/dist/eruda/types.d.ts

@@ -17,6 +17,11 @@ export interface GgErudaOptions {
      * @default {}
      */
     erudaOptions?: Record<string, unknown>;
+    /**
+     * Whether to open the GgConsole panel on load (not just the floating icon)
+     * @default false
+     */
+    open?: boolean;
 }
 /** Log severity level */
 export type LogLevel = 'debug' | 'info' | 'warn' | 'error';

package/dist/gg-call-sites-plugin.js

@@ -747,7 +747,9 @@ export function transformGgCalls(code, shortPath, filePath, svelteInfo, jsFuncti
                 }
                 // Extract the first argument (the namespace string)
                 // Look for the string literal after 'gg.ns('
-                const afterNsParen = i + 6; // position after 'gg.ns('
+                let afterNsParen = i + 6; // position after 'gg.ns('
+                while (afterNsParen < code.length && /\s/.test(code[afterNsParen]))
+                    afterNsParen++;
                 const quoteChar = code[afterNsParen];
                 if (quoteChar === "'" || quoteChar === '"') {
                     // Find the closing quote

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftium/gg",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Leftium/gg.git"
@@ -70,6 +70,7 @@
   ],
   "dependencies": {
     "@sveltejs/acorn-typescript": "^1.0.9",
+    "@tanstack/virtual-core": "^3.13.18",
     "@types/estree": "^1.0.8",
     "acorn": "^8.15.0",
     "dotenv": "^17.2.4",