@leftium/gg 0.0.43 → 0.0.44

package/dist/debug/common.js

@@ -15,7 +15,9 @@ export function humanize(ms) {
         return Math.round(ms / 60_000) + 'm';
     if (abs >= 1_000)
         return Math.round(ms / 1_000) + 's';
-    return ms + 'ms';
+    if (abs >= 1 || abs === 0)
+        return Math.round(ms) + 'ms';
+    return ms.toFixed(1) + 'ms';
 }
 /**
  * Wildcard pattern matching (same algorithm as debug's `matchesTemplate`).
@@ -118,7 +120,7 @@ export function setup(env) {
         const debug = function (...args) {
             if (!debug.enabled)
                 return;
-            const curr = Date.now();
+            const curr = performance.now();
             const ms = curr - (prevTime || curr);
             debug.diff = ms;
             prevTime = curr;

package/dist/eruda/buffer.d.ts

@@ -5,6 +5,7 @@ import type { CapturedEntry } from './types.js';
 export declare class LogBuffer {
     private entries;
     private maxSize;
+    private _totalPushed;
     constructor(maxSize?: number);
     /**
      * Add an entry to the buffer
@@ -23,4 +24,16 @@ export declare class LogBuffer {
      * Get entry count
      */
     get size(): number;
+    /**
+     * Get total entries ever pushed (including evicted ones)
+     */
+    get totalPushed(): number;
+    /**
+     * Get number of entries evicted due to buffer overflow
+     */
+    get evicted(): number;
+    /**
+     * Get the maximum capacity
+     */
+    get capacity(): number;
 }

package/dist/eruda/buffer.js

@@ -4,6 +4,7 @@
 export class LogBuffer {
     entries = [];
     maxSize;
+    _totalPushed = 0;
     constructor(maxSize = 2000) {
         this.maxSize = maxSize;
     }
@@ -12,6 +13,7 @@ export class LogBuffer {
      * If buffer is full, oldest entry is removed
      */
     push(entry) {
+        this._totalPushed++;
         this.entries.push(entry);
         if (this.entries.length > this.maxSize) {
             this.entries.shift(); // Remove oldest
@@ -30,6 +32,7 @@ export class LogBuffer {
      */
     clear() {
         this.entries = [];
+        this._totalPushed = 0;
     }
     /**
      * Get entry count
@@ -37,4 +40,22 @@ export class LogBuffer {
     get size() {
         return this.entries.length;
     }
+    /**
+     * Get total entries ever pushed (including evicted ones)
+     */
+    get totalPushed() {
+        return this._totalPushed;
+    }
+    /**
+     * Get number of entries evicted due to buffer overflow
+     */
+    get evicted() {
+        return this._totalPushed - this.entries.length;
+    }
+    /**
+     * Get the maximum capacity
+     */
+    get capacity() {
+        return this.maxSize;
+    }
 }

package/dist/eruda/loader.js

@@ -88,6 +88,8 @@ export async function loadEruda(options) {
         eruda.add(ggPlugin);
         // Make GG tab the default selected tab
         eruda.show('GG');
+        // Expand the Eruda panel (open from minimized floating button state)
+        eruda.show();
         // Run diagnostics after Eruda is ready so they appear in Console tab
         await runGgDiagnostics();
     }

package/dist/eruda/plugin.js

@@ -37,6 +37,11 @@ export function createGgPlugin(options, gg) {
     const COPY_FORMAT_KEY = 'gg-copy-format';
     const URL_FORMAT_KEY = 'gg-url-format';
     const PROJECT_ROOT_KEY = 'gg-project-root';
+    // Render batching: coalesce multiple _onLog calls into a single rAF
+    let renderPending = false;
+    let pendingEntries = []; // new entries since last render
+    // All namespaces ever seen (maintained incrementally, avoids scanning buffer)
+    const allNamespacesSet = new Set();
     // Plugin detection state (probed once at init)
     let openInEditorPluginDetected = null; // null = not yet probed
     // Editor bins for launch-editor (common first, then alphabetical)
@@ -141,8 +146,9 @@ export function createGgPlugin(options, gg) {
             // Register the capture hook on gg
             if (gg) {
                 gg._onLog = (entry) => {
-                    // Track namespaces for filter UI update (check BEFORE pushing to buffer)
-                    const hadNamespace = getAllCapturedNamespaces().includes(entry.namespace);
+                    // Track namespaces incrementally (O(1) instead of scanning buffer)
+                    const isNewNamespace = !allNamespacesSet.has(entry.namespace);
+                    allNamespacesSet.add(entry.namespace);
                     buffer.push(entry);
                     // Add new namespace to enabledNamespaces if it matches the current pattern
                     const effectivePattern = filterPattern || 'gg:*';
@@ -150,10 +156,20 @@ export function createGgPlugin(options, gg) {
                         enabledNamespaces.add(entry.namespace);
                     }
                     // Update filter UI if new namespace appeared (updates button summary count)
-                    if (!hadNamespace) {
+                    if (isNewNamespace) {
                         renderFilterUI();
                     }
-                    renderLogs();
+                    // Batch: collect pending entries, schedule one render per frame
+                    pendingEntries.push(entry);
+                    if (!renderPending) {
+                        renderPending = true;
+                        requestAnimationFrame(() => {
+                            renderPending = false;
+                            const batch = pendingEntries;
+                            pendingEntries = [];
+                            appendLogs(batch);
+                        });
+                    }
                 };
             }
             // Probe for openInEditorPlugin (status 222) and auto-populate $ROOT in dev mode
@@ -187,6 +203,11 @@ export function createGgPlugin(options, gg) {
             wireUpFilterUI();
             wireUpSettingsUI();
             wireUpToast();
+            // Discard any entries queued during early-buffer replay (before the DOM
+            // existed). renderLogs() below will do a full render from buffer, so the
+            // pending rAF batch would only duplicate those entries.
+            pendingEntries = [];
+            renderPending = false;
             renderLogs();
         },
         show() {
@@ -205,6 +226,7 @@ export function createGgPlugin(options, gg) {
                 gg._onLog = null;
             }
             buffer.clear();
+            allNamespacesSet.clear();
         }
     };
     function toggleNamespace(namespace, enable) {
@@ -286,10 +308,7 @@ export function createGgPlugin(options, gg) {
         return parts.join(',');
     }
     function getAllCapturedNamespaces() {
-        const entries = buffer.getEntries();
-        const nsSet = new Set();
-        entries.forEach((e) => nsSet.add(e.namespace));
-        return Array.from(nsSet).sort();
+        return Array.from(allNamespacesSet).sort();
     }
     function namespaceMatchesPattern(namespace, pattern) {
         if (!pattern)
@@ -970,6 +989,7 @@ export function createGgPlugin(options, gg) {
 			</div>
 				<div class="gg-filter-panel"></div>
 				<div class="gg-settings-panel"></div>
+				<div class="gg-truncation-banner" style="display: none; padding: 6px 12px; background: #7f4f00; color: #ffe0a0; font-size: 11px; align-items: center; gap: 6px; flex-shrink: 0;"></div>
 				<div class="gg-log-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; font-family: monospace; font-size: 12px; touch-action: pan-y; overscroll-behavior: contain;"></div>
 				<div class="gg-toast"></div>
 				<iframe class="gg-editor-iframe" hidden title="open-in-editor"></iframe>
@@ -1372,6 +1392,7 @@ export function createGgPlugin(options, gg) {
             return;
         $el.find('.gg-clear-btn').on('click', () => {
             buffer.clear();
+            allNamespacesSet.clear();
             renderLogs();
         });
         $el.find('.gg-copy-btn').on('click', async () => {
@@ -1971,21 +1992,238 @@ export function createGgPlugin(options, gg) {
         containerEl.addEventListener('pointerup', onPointerUp);
         resizeAttached = true;
     }
+    /** Build the HTML string for a single log entry */
+    function renderEntryHTML(entry, index) {
+        const color = entry.color || '#0066cc';
+        const diff = `+${humanize(entry.diff)}`;
+        // Split namespace into clickable segments on multiple delimiters: : @ / - _
+        const parts = entry.namespace.split(/([:/@ \-_])/);
+        const nsSegments = [];
+        const delimiters = [];
+        for (let i = 0; i < parts.length; i++) {
+            if (i % 2 === 0) {
+                // Even indices are segments
+                if (parts[i])
+                    nsSegments.push(parts[i]);
+            }
+            else {
+                // Odd indices are delimiters
+                delimiters.push(parts[i]);
+            }
+        }
+        let nsHTML = '';
+        for (let i = 0; i < nsSegments.length; i++) {
+            const segment = escapeHtml(nsSegments[i]);
+            // Build filter pattern: reconstruct namespace up to this point
+            let filterPattern = '';
+            for (let j = 0; j <= i; j++) {
+                filterPattern += nsSegments[j];
+                if (j < i) {
+                    filterPattern += delimiters[j];
+                }
+                else if (j < nsSegments.length - 1) {
+                    filterPattern += delimiters[j] + '*';
+                }
+            }
+            nsHTML += `<span class="gg-ns-segment" data-filter="${escapeHtml(filterPattern)}">${segment}</span>`;
+            if (i < nsSegments.length - 1) {
+                nsHTML += escapeHtml(delimiters[i]);
+            }
+        }
+        // Format each arg individually - objects are expandable
+        let argsHTML = '';
+        let detailsHTML = '';
+        // Source expression for this entry (used in hover tooltips and expanded details)
+        const srcExpr = entry.src?.trim() && !/^['"`]/.test(entry.src) ? escapeHtml(entry.src) : '';
+        // HTML table rendering for gg.table() entries
+        if (entry.tableData && entry.tableData.keys.length > 0) {
+            const { keys, rows: tableRows } = entry.tableData;
+            const headerCells = keys
+                .map((k) => `<th style="padding: 2px 8px; border: 1px solid #ccc; background: #f0f0f0; font-size: 11px; white-space: nowrap;">${escapeHtml(k)}</th>`)
+                .join('');
+            const bodyRowsHtml = tableRows
+                .map((row) => {
+                const cells = keys
+                    .map((k) => {
+                    const val = row[k];
+                    const display = val === undefined ? '' : escapeHtml(String(val));
+                    return `<td style="padding: 2px 8px; border: 1px solid #ddd; font-size: 11px; white-space: nowrap;">${display}</td>`;
+                })
+                    .join('');
+                return `<tr>${cells}</tr>`;
+            })
+                .join('');
+            argsHTML = `<div style="overflow-x: auto;"><table style="border-collapse: collapse; margin: 2px 0; font-family: monospace;"><thead><tr>${headerCells}</tr></thead><tbody>${bodyRowsHtml}</tbody></table></div>`;
+        }
+        else if (entry.args.length > 0) {
+            argsHTML = entry.args
+                .map((arg, argIdx) => {
+                if (typeof arg === 'object' && arg !== null) {
+                    // Show expandable object
+                    const preview = Array.isArray(arg) ? `Array(${arg.length})` : 'Object';
+                    const jsonStr = escapeHtml(JSON.stringify(arg, null, 2));
+                    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>`;
+                    // 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>`
+                        : '';
+                    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>`;
+                }
+                else {
+                    // Parse ANSI codes first, then convert URLs to clickable links
+                    const argStr = String(arg);
+                    const parsedAnsi = parseAnsiToHtml(argStr);
+                    return `<span>${parsedAnsi}</span>`;
+                }
+            })
+                .join(' ');
+        }
+        // Open-in-editor data attributes (file, line, col)
+        const fileAttr = entry.file ? ` data-file="${escapeHtml(entry.file)}"` : '';
+        const lineAttr = entry.line ? ` data-line="${entry.line}"` : '';
+        const colAttr = entry.col ? ` data-col="${entry.col}"` : '';
+        // Level class for info/warn/error styling
+        const levelClass = entry.level === 'info'
+            ? ' gg-level-info'
+            : entry.level === 'warn'
+                ? ' gg-level-warn'
+                : entry.level === 'error'
+                    ? ' gg-level-error'
+                    : '';
+        // Stack trace toggle (for error/trace entries with captured stacks)
+        let stackHTML = '';
+        if (entry.stack) {
+            const stackId = `stack-${index}`;
+            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>`;
+        }
+        // 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>`
+            : '';
+        return (`<div class="gg-log-entry${levelClass}" data-entry="${index}">` +
+            `<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>` +
+            detailsHTML +
+            `</div>`);
+    }
+    /** Update the copy-button count text */
+    function updateTruncationBanner() {
+        if (!$el)
+            return;
+        const banner = $el.find('.gg-truncation-banner').get(0);
+        if (!banner)
+            return;
+        const evicted = buffer.evicted;
+        if (evicted > 0) {
+            const total = buffer.totalPushed;
+            const retained = buffer.size;
+            banner.innerHTML = `⚠ Showing ${retained.toLocaleString()} of ${total.toLocaleString()} messages &mdash; ${evicted.toLocaleString()} truncated. Increase <code style="font-family:monospace;background:rgba(255,255,255,0.15);padding:0 3px;border-radius:3px;">maxEntries</code> to retain more.`;
+            banner.style.display = 'flex';
+        }
+        else {
+            banner.style.display = 'none';
+        }
+    }
+    function updateCopyCount() {
+        if (!$el)
+            return;
+        const copyCountSpan = $el.find('.gg-copy-count');
+        if (!copyCountSpan.length)
+            return;
+        const allCount = buffer.size;
+        const visibleCount = renderedEntries.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;
+    }
+    /**
+     * Incremental append: add new entries to the existing DOM without full rebuild.
+     * Called from the rAF-batched _onLog path.
+     */
+    function appendLogs(newEntries) {
+        if (!$el)
+            return;
+        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) {
+            renderLogs();
+            return;
+        }
+        if (visibleNew.length === 0) {
+            // New entries were all filtered out, just update count
+            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);
+        }
+        updateCopyCount();
+        updateTruncationBanner();
+        // Re-wire expanders after rendering
+        wireUpExpanders();
+        // Smart auto-scroll
+        autoScroll(containerDom);
+    }
+    /** Full render: rebuild the entire log view (used for filter changes, clear, show, etc.) */
     function renderLogs() {
         if (!$el)
             return;
         const logContainer = $el.find('.gg-log-container');
-        const copyCountSpan = $el.find('.gg-copy-count');
-        if (!logContainer.length || !copyCountSpan.length)
+        if (!logContainer.length)
             return;
         const allEntries = buffer.getEntries();
         // Apply filtering
         const entries = allEntries.filter((entry) => enabledNamespaces.has(entry.namespace));
         renderedEntries = entries;
-        const countText = entries.length === allEntries.length
-            ? `Copy ${entries.length} ${entries.length === 1 ? 'entry' : 'entries'}`
-            : `Copy ${entries.length} / ${allEntries.length} ${entries.length === 1 ? 'entry' : 'entries'}`;
-        copyCountSpan.html(countText);
+        updateCopyCount();
+        updateTruncationBanner();
         if (entries.length === 0) {
             const hasFilteredLogs = allEntries.length > 0;
             const message = hasFilteredLogs
@@ -1998,139 +2236,7 @@ export function createGgPlugin(options, gg) {
             return;
         }
         const logsHTML = `<div class="gg-log-grid${filterExpanded ? ' filter-mode' : ''}${showExpressions ? ' gg-show-expr' : ''}" style="grid-template-columns: ${gridColumns()};">${entries
-            .map((entry, index) => {
-            const color = entry.color || '#0066cc';
-            const diff = `+${humanize(entry.diff)}`;
-            // Split namespace into clickable segments on multiple delimiters: : @ / - _
-            const parts = entry.namespace.split(/([:/@ \-_])/);
-            const nsSegments = [];
-            const delimiters = [];
-            for (let i = 0; i < parts.length; i++) {
-                if (i % 2 === 0) {
-                    // Even indices are segments
-                    if (parts[i])
-                        nsSegments.push(parts[i]);
-                }
-                else {
-                    // Odd indices are delimiters
-                    delimiters.push(parts[i]);
-                }
-            }
-            let nsHTML = '';
-            for (let i = 0; i < nsSegments.length; i++) {
-                const segment = escapeHtml(nsSegments[i]);
-                // Build filter pattern: reconstruct namespace up to this point
-                let filterPattern = '';
-                for (let j = 0; j <= i; j++) {
-                    filterPattern += nsSegments[j];
-                    if (j < i) {
-                        filterPattern += delimiters[j];
-                    }
-                    else if (j < nsSegments.length - 1) {
-                        filterPattern += delimiters[j] + '*';
-                    }
-                }
-                nsHTML += `<span class="gg-ns-segment" data-filter="${escapeHtml(filterPattern)}">${segment}</span>`;
-                if (i < nsSegments.length - 1) {
-                    nsHTML += escapeHtml(delimiters[i]);
-                }
-            }
-            // Format each arg individually - objects are expandable
-            let argsHTML = '';
-            let detailsHTML = '';
-            // Source expression for this entry (used in hover tooltips and expanded details)
-            const srcExpr = entry.src?.trim() && !/^['"`]/.test(entry.src) ? escapeHtml(entry.src) : '';
-            // HTML table rendering for gg.table() entries
-            if (entry.tableData && entry.tableData.keys.length > 0) {
-                const { keys, rows: tableRows } = entry.tableData;
-                const headerCells = keys
-                    .map((k) => `<th style="padding: 2px 8px; border: 1px solid #ccc; background: #f0f0f0; font-size: 11px; white-space: nowrap;">${escapeHtml(k)}</th>`)
-                    .join('');
-                const bodyRowsHtml = tableRows
-                    .map((row) => {
-                    const cells = keys
-                        .map((k) => {
-                        const val = row[k];
-                        const display = val === undefined ? '' : escapeHtml(String(val));
-                        return `<td style="padding: 2px 8px; border: 1px solid #ddd; font-size: 11px; white-space: nowrap;">${display}</td>`;
-                    })
-                        .join('');
-                    return `<tr>${cells}</tr>`;
-                })
-                    .join('');
-                argsHTML = `<div style="overflow-x: auto;"><table style="border-collapse: collapse; margin: 2px 0; font-family: monospace;"><thead><tr>${headerCells}</tr></thead><tbody>${bodyRowsHtml}</tbody></table></div>`;
-            }
-            else if (entry.args.length > 0) {
-                argsHTML = entry.args
-                    .map((arg, argIdx) => {
-                    if (typeof arg === 'object' && arg !== null) {
-                        // Show expandable object
-                        const preview = Array.isArray(arg) ? `Array(${arg.length})` : 'Object';
-                        const jsonStr = escapeHtml(JSON.stringify(arg, null, 2));
-                        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>`;
-                        // 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>`
-                            : '';
-                        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>`;
-                    }
-                    else {
-                        // Parse ANSI codes first, then convert URLs to clickable links
-                        const argStr = String(arg);
-                        const parsedAnsi = parseAnsiToHtml(argStr);
-                        // Note: URL linking happens after ANSI parsing, so links work inside colored text
-                        // This is a simple approach - URLs inside ANSI codes won't be linkified
-                        // For more complex parsing, we'd need to track ANSI state while matching URLs
-                        return `<span>${parsedAnsi}</span>`;
-                    }
-                })
-                    .join(' ');
-            }
-            // Time diff will be clickable for open-in-editor when file metadata exists
-            // Open-in-editor data attributes (file, line, col)
-            const fileAttr = entry.file ? ` data-file="${escapeHtml(entry.file)}"` : '';
-            const lineAttr = entry.line ? ` data-line="${entry.line}"` : '';
-            const colAttr = entry.col ? ` data-col="${entry.col}"` : '';
-            // Level class for info/warn/error styling
-            const levelClass = entry.level === 'info'
-                ? ' gg-level-info'
-                : entry.level === 'warn'
-                    ? ' gg-level-warn'
-                    : entry.level === 'error'
-                        ? ' gg-level-error'
-                        : '';
-            // Stack trace toggle (for error/trace entries with captured stacks)
-            let stackHTML = '';
-            if (entry.stack) {
-                const stackId = `stack-${index}`;
-                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>`;
-            }
-            // Desktop: grid layout, Mobile: stacked layout
-            // 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>`
-                : '';
-            return (`<div class="gg-log-entry${levelClass}" data-entry="${index}">` +
-                `<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>` +
-                detailsHTML +
-                `</div>`);
-        })
+            .map((entry, index) => renderEntryHTML(entry, index))
             .join('')}</div>`;
         logContainer.html(logsHTML);
         // Append hover tooltip div (destroyed by .html() each render, so re-create)
@@ -2158,12 +2264,15 @@ export function createGgPlugin(options, gg) {
             return Math.round(ms / 60000) + 'm ';
         if (abs >= 1000)
             return Math.round(ms / 1000) + 's ';
-        return ms + 'ms';
+        return Math.round(ms) + 'ms';
     }
     function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
     }
     /**
      * Strip ANSI escape codes from text

package/dist/gg.js

@@ -182,6 +182,9 @@ const srcRootRegex = new RegExp(ggConfig.srcRootPattern, 'i');
 // - Cache and reuse the same log function for a given callpoint.
 const namespaceToLogFunction = new Map();
 let maxCallpointLength = 0;
+// Per-namespace prevTime for diff tracking (independent of debug library's enabled state,
+// so GgConsole diffs are correct even when localStorage.debug doesn't include gg:*).
+const namespaceToPrevTime = new Map();
 // Cache: raw stack line → word tuple (avoids re-hashing the same call site)
 const stackLineCache = new Map();
 /**
@@ -311,6 +314,14 @@ function ggLog(options, ...args) {
     else if (level === 'error') {
         logArgs[0] = `⛔ ${logArgs[0]}`;
     }
+    // Compute diff independently of the debug library's enabled state.
+    // ggLogFunction.diff only updates when the debugger is enabled (i.e. localStorage.debug
+    // matches the namespace), so relying on it would always show +0ms when console output is
+    // disabled — even though the GgConsole panel always captures entries.
+    const now = performance.now();
+    const prevTime = namespaceToPrevTime.get(namespace);
+    const diff = prevTime !== undefined ? now - prevTime : 0;
+    namespaceToPrevTime.set(namespace, now);
     // Log to console via debug
     if (logArgs.length === 1) {
         ggLogFunction(logArgs[0]);
@@ -322,7 +333,7 @@ function ggLog(options, ...args) {
     const entry = {
         namespace,
         color: ggLogFunction.color,
-        diff: ggLogFunction.diff || 0,
+        diff,
         message: logArgs.length === 1 ? String(logArgs[0]) : logArgs.map(String).join(' '),
         args: logArgs,
         timestamp: Date.now(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftium/gg",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Leftium/gg.git"