@leftium/gg 0.0.26 → 0.0.27

package/dist/eruda/loader.js

@@ -62,6 +62,17 @@ export async function loadEruda(options) {
         // Dynamic import of Eruda
         const erudaModule = await import('eruda');
         const eruda = erudaModule.default;
+        // Clear Eruda position state to prevent icon from being stuck in wrong position
+        // Eruda stores draggable icon position in localStorage which can get corrupted
+        // This ensures the icon always appears in the default bottom-right corner
+        try {
+            // Eruda uses keys like 'eruda-entry-button' for position state
+            const positionKeys = ['eruda-entry-button', 'eruda-position'];
+            positionKeys.forEach((key) => localStorage.removeItem(key));
+        }
+        catch {
+            // localStorage might not be available
+        }
         // Initialize Eruda
         eruda.init({
             ...options.erudaOptions,
@@ -81,13 +92,15 @@ export async function loadEruda(options) {
         }
         // Register gg plugin
         // Import gg and pass it to the plugin directly
-        const { gg } = await import('../gg.js');
+        const { gg, runGgDiagnostics } = await import('../gg.js');
         const { createGgPlugin } = await import('./plugin.js');
         const ggPlugin = createGgPlugin(options, gg);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         eruda.add(ggPlugin);
         // Make GG tab the default selected tab
         eruda.show('GG');
+        // Run diagnostics after Eruda is ready so they appear in Console tab
+        await runGgDiagnostics();
     }
     catch (error) {
         console.error('[gg] Failed to load Eruda:', error);

package/dist/eruda/plugin.js

@@ -172,29 +172,37 @@ export function createGgPlugin(options, gg) {
     }
     function gridColumns() {
         const ns = nsColWidth !== null ? `${nsColWidth}px` : 'auto';
-        if (filterExpanded) {
-            // [×] | diff | ns | handle | content
-            return `24px auto ${ns} 4px 1fr`;
-        }
-        else {
-            // diff | ns | handle | content
-            return `auto ${ns} 4px 1fr`;
-        }
+        // diff | ns | handle | content (× is now inside ns)
+        return `auto ${ns} 4px 1fr`;
     }
     function buildHTML() {
         return `
 			<style>
-				.gg-log-grid {
-					display: grid;
-					grid-template-columns: ${gridColumns()};
-					column-gap: 0;
-					align-items: start !important;
-				}
-				.gg-log-grid > * {
-					min-width: 0;
-					border-top: 1px solid rgba(0,0,0,0.05);
-					align-self: start !important;
-				}
+			.gg-log-grid {
+				display: grid;
+				grid-template-columns: ${gridColumns()};
+				column-gap: 0;
+				align-items: start !important;
+			}
+			/* Desktop: hide wrapper divs, show direct children */
+			.gg-log-entry {
+				display: contents;
+			}
+			.gg-log-header {
+				display: contents;
+			}
+			.gg-log-diff,
+			.gg-log-ns,
+			.gg-log-handle,
+			.gg-log-content {
+				min-width: 0;
+				align-self: start !important;
+				border-top: 1px solid rgba(0,0,0,0.05);
+			}
+			.gg-details {
+				grid-column: 1 / -1;
+				border-top: none;
+			}
 				.gg-details {
 					align-self: stretch !important;
 					border-bottom: none;
@@ -234,19 +242,15 @@ export function createGgPlugin(options, gg) {
 					word-break: break-word;
 					padding: 4px 0;
 				}
-				.gg-row-filter {
-					text-align: center;
-					padding: 4px 8px 4px 0;
-					cursor: pointer;
-					user-select: none;
-					opacity: 0.6;
-					font-size: 14px;
-					align-self: start;
-				}
-				.gg-row-filter:hover {
-					opacity: 1;
-					background: rgba(0,0,0,0.05);
-				}
+			/* Make header clickable for filtering when filters are expanded */
+			.gg-log-header.clickable {
+				cursor: pointer;
+			}
+			/* Desktop: highlight child elements since header has display: contents */
+			.gg-log-header.clickable:hover .gg-log-diff,
+			.gg-log-header.clickable:hover .gg-log-ns {
+				background: rgba(0,0,0,0.05);
+			}
 				.gg-filter-panel {
 					background: #f5f5f5;
 					padding: 10px;
@@ -262,7 +266,7 @@ export function createGgPlugin(options, gg) {
 					width: 100%;
 					padding: 4px 8px;
 					font-family: monospace;
-					font-size: 12px;
+					font-size: 16px;
 					margin-bottom: 8px;
 				}
 				.gg-filter-checkboxes {
@@ -281,16 +285,125 @@ export function createGgPlugin(options, gg) {
 					font-family: monospace;
 					white-space: nowrap;
 				}
+				/* Mobile responsive styles */
+				.gg-toolbar {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					margin-bottom: 8px;
+					flex-shrink: 0;
+					overflow-x: auto;
+					-webkit-overflow-scrolling: touch;
+				}
+				.gg-toolbar button {
+					padding: 4px 10px;
+					cursor: pointer;
+					flex-shrink: 0;
+				}
+				.gg-btn-text {
+					display: inline;
+				}
+				.gg-btn-icon {
+					display: none;
+				}
+				@media (max-width: 640px) {
+					.gg-btn-text {
+						display: none;
+					}
+					.gg-btn-icon {
+						display: inline;
+					}
+					.gg-toolbar button {
+						padding: 4px 8px;
+						min-width: 32px;
+					}
+					.gg-filter-btn {
+						font-family: monospace;
+						font-size: 12px;
+					}
+					/* Stack log entries vertically on mobile */
+					.gg-log-grid {
+						display: block;
+					}
+					.gg-log-entry {
+						display: block;
+						padding: 8px 0;
+					}
+					/* Remove double borders on mobile - only border on entry wrapper */
+					.gg-log-entry:not(:first-child) {
+						border-top: 1px solid rgba(0,0,0,0.05);
+					}
+				.gg-log-diff,
+				.gg-log-ns,
+				.gg-log-handle,
+				.gg-log-content,
+				.gg-details {
+					border-top: none !important;
+				}
+			.gg-log-header {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				margin-bottom: 4px;
+				min-width: 0;
+			}
+			/* Mobile: hover on container since it's not display: contents */
+			.gg-log-header.clickable {
+				padding: 2px 0;
+			}
+			.gg-log-header.clickable:hover {
+				background: rgba(0,0,0,0.05);
+			}
+				/* Override desktop child hover on mobile */
+				.gg-log-header.clickable:hover .gg-log-diff,
+				.gg-log-header.clickable:hover .gg-log-ns {
+					background: transparent;
+				}
+				.gg-log-diff {
+					padding: 0;
+					text-align: left;
+					flex-shrink: 0;
+					white-space: nowrap;
+				}
+				.gg-log-ns {
+					padding: 0;
+					flex: 1;
+					min-width: 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+				.gg-log-handle {
+					display: none;
+				}
+				.gg-log-content {
+					padding: 0;
+					padding-left: 0;
+				}
+					.gg-details {
+						margin-top: 4px;
+					}
+				}
 			</style>
-			<div class="eruda-gg" style="padding: 10px; height: 100%; display: flex; flex-direction: column; font-size: 14px;">
-				<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-shrink: 0;">
-					<button class="gg-clear-btn" style="padding: 4px 10px; cursor: pointer;">Clear</button>
-					<button class="gg-copy-btn" style="padding: 4px 10px; cursor: pointer;">Copy</button>
-					<button class="gg-filter-btn" style="padding: 4px 10px; cursor: pointer; flex: 1; min-width: 0; text-align: left; font-family: monospace; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">⚙️ Filters: <span class="gg-filter-summary"></span></button>
-					<span class="gg-count" style="opacity: 0.6; white-space: nowrap;"></span>
-				</div>
+		<div class="eruda-gg" style="padding: 10px; height: 100%; display: flex; flex-direction: column; font-size: 14px; touch-action: none; overscroll-behavior: contain;">
+			<div class="gg-toolbar">
+				<button class="gg-copy-btn">
+					<span class="gg-btn-text">Copy</span>
+					<span class="gg-btn-icon" title="Copy">📋</span>
+				</button>
+			<button class="gg-filter-btn" style="text-align: left; white-space: nowrap;">
+				<span class="gg-btn-text">Namespaces: </span>
+				<span class="gg-btn-icon">NS: </span>
+				<span class="gg-filter-summary"></span>
+			</button>
+				<span class="gg-count" style="opacity: 0.6; white-space: nowrap; flex: 1; text-align: right;"></span>
+				<button class="gg-clear-btn">
+					<span class="gg-btn-text">Clear</span>
+					<span class="gg-btn-icon" title="Clear">⊘</span>
+				</button>
+			</div>
 				<div class="gg-filter-panel"></div>
-				<div class="gg-log-container" style="flex: 1; overflow-y: auto; font-family: monospace; font-size: 12px;"></div>
+				<div class="gg-log-container" style="flex: 1; overflow-y: auto; font-family: monospace; font-size: 12px; touch-action: pan-y; overscroll-behavior: contain;"></div>
 			</div>
 		`;
     }
@@ -340,6 +453,27 @@ export function createGgPlugin(options, gg) {
         // Wire up checkboxes
         filterPanel.addEventListener('change', (e) => {
             const target = e.target;
+            // Handle ALL checkbox
+            if (target.classList.contains('gg-all-checkbox')) {
+                const allNamespaces = getAllCapturedNamespaces();
+                if (target.checked) {
+                    // Select all
+                    filterPattern = 'gg:*';
+                    enabledNamespaces.clear();
+                    allNamespaces.forEach((ns) => enabledNamespaces.add(ns));
+                }
+                else {
+                    // Deselect all
+                    const exclusions = allNamespaces.map((ns) => `-${ns}`).join(',');
+                    filterPattern = `gg:*,${exclusions}`;
+                    enabledNamespaces.clear();
+                }
+                localStorage.setItem('debug', filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+            // Handle individual namespace checkboxes
             if (target.classList.contains('gg-ns-checkbox')) {
                 const namespace = target.getAttribute('data-namespace');
                 if (!namespace)
@@ -355,11 +489,13 @@ export function createGgPlugin(options, gg) {
     function renderFilterUI() {
         if (!$el)
             return;
-        // Update button summary
+        const allNamespaces = getAllCapturedNamespaces();
+        const enabledCount = enabledNamespaces.size;
+        const totalCount = allNamespaces.length;
+        // Update button summary with count of enabled namespaces
         const filterSummary = $el.find('.gg-filter-summary').get(0);
         if (filterSummary) {
-            const summary = filterPattern || 'gg:*';
-            filterSummary.textContent = summary;
+            filterSummary.textContent = `${enabledCount}/${totalCount}`;
         }
         // Update panel
         const filterPanel = $el.find('.gg-filter-panel').get(0);
@@ -374,32 +510,37 @@ export function createGgPlugin(options, gg) {
             const effectivePattern = filterPattern || 'gg:*';
             let checkboxesHTML = '';
             if (simple && allNamespaces.length > 0) {
+                const allChecked = enabledCount === totalCount;
                 checkboxesHTML = `
-					<div class="gg-filter-checkboxes">
-						${allNamespaces
+				<div class="gg-filter-checkboxes">
+					<label class="gg-filter-checkbox" style="font-weight: bold;">
+						<input type="checkbox" class="gg-all-checkbox" ${allChecked ? 'checked' : ''}>
+						<span>ALL</span>
+					</label>
+					${allNamespaces
                     .map((ns) => {
                     // Check if namespace matches the current pattern
                     const checked = namespaceMatchesPattern(ns, effectivePattern);
                     return `
-								<label class="gg-filter-checkbox">
-									<input type="checkbox" class="gg-ns-checkbox" data-namespace="${escapeHtml(ns)}" ${checked ? 'checked' : ''}>
-									<span>${escapeHtml(ns)}</span>
-								</label>
-							`;
+							<label class="gg-filter-checkbox">
+								<input type="checkbox" class="gg-ns-checkbox" data-namespace="${escapeHtml(ns)}" ${checked ? 'checked' : ''}>
+								<span>${escapeHtml(ns)}</span>
+							</label>
+						`;
                 })
                     .join('')}
-					</div>
-				`;
+				</div>
+			`;
             }
             else if (!simple) {
                 checkboxesHTML = `<div style="opacity: 0.6; font-size: 11px; margin: 8px 0;">⚠️ Complex pattern - edit manually (quick filters disabled)</div>`;
             }
             filterPanel.innerHTML = `
-				<div style="margin-bottom: 8px;">
-					<input type="text" class="gg-filter-pattern" value="${escapeHtml(filterPattern)}" placeholder="gg:*" style="width: 100%;">
-				</div>
-				${checkboxesHTML}
-			`;
+			<div style="margin-bottom: 8px;">
+				<input type="text" class="gg-filter-pattern" value="${escapeHtml(filterPattern)}" placeholder="gg:*" style="width: 100%;">
+			</div>
+			${checkboxesHTML}
+		`;
         }
         else {
             // Hide panel
@@ -470,9 +611,12 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
-            // Handle row filter button
-            if (target?.classList?.contains('gg-row-filter')) {
-                const namespace = target.getAttribute('data-namespace');
+            // Handle clickable header (when filters expanded)
+            // Skip if clicking on resize handle
+            if (!target?.classList?.contains('gg-log-handle') &&
+                target?.closest('.gg-log-header.clickable')) {
+                const header = target.closest('.gg-log-header.clickable');
+                const namespace = header.getAttribute('data-namespace');
                 if (!namespace)
                     return;
                 // Toggle this namespace off
@@ -567,25 +711,40 @@ export function createGgPlugin(options, gg) {
                         const jsonStr = escapeHtml(JSON.stringify(arg, null, 2));
                         const uniqueId = `${index}-${argIdx}`;
                         // Store details separately to render after the row
-                        detailsHTML += `<div class="gg-details" data-index="${uniqueId}" style="display: none; grid-column: 1 / -1; margin: 4px 0 8px 0; padding: 8px; background: #f8f8f8; border-left: 3px solid ${color}; font-size: 11px; overflow-x: auto;"><pre style="margin: 0;">${jsonStr}</pre></div>`;
+                        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;"><pre style="margin: 0;">${jsonStr}</pre></div>`;
                         return `<span style="color: #888; cursor: pointer; text-decoration: underline;" class="gg-expand" data-index="${uniqueId}">${preview}</span>`;
                     }
                     else {
-                        return `<span>${escapeHtml(String(arg))}</span>`;
+                        // Convert URLs to clickable links
+                        const argStr = String(arg);
+                        const urlRegex = /(https?:\/\/[^\s]+)/g;
+                        const linkedText = argStr.replace(urlRegex, (url) => {
+                            return `<a href="${escapeHtml(url)}" target="_blank" style="color: #0066cc; text-decoration: underline;">${escapeHtml(url)}</a>`;
+                        });
+                        return `<span>${linkedText}</span>`;
                     }
                 })
                     .join(' ');
             }
-            // Add filter button if expanded
-            const filterBtn = filterExpanded
-                ? `<div class="gg-row-filter" data-namespace="${ns}" title="Hide this namespace">×</div>`
+            // Make header clickable when filters expanded
+            const headerClass = filterExpanded ? 'gg-log-header clickable' : 'gg-log-header';
+            const headerAttrs = filterExpanded
+                ? ` data-namespace="${ns}" title="Click to hide this namespace"`
+                : '';
+            // Add × at start of diff when filters expanded (bold, darker)
+            const filterIcon = filterExpanded
+                ? '<span style="font-weight: bold; color: #000; opacity: 0.6;">× </span>'
                 : '';
-            return (filterBtn +
-                `<div class="gg-log-diff" style="color: ${color};">${diff}</div>` +
+            // Desktop: grid layout, Mobile: stacked layout
+            return (`<div class="gg-log-entry">` +
+                `<div class="${headerClass}"${headerAttrs}>` +
+                `<div class="gg-log-diff" style="color: ${color};">${filterIcon}${diff}</div>` +
                 `<div class="gg-log-ns" style="color: ${color};">${ns}</div>` +
                 `<div class="gg-log-handle"></div>` +
+                `</div>` +
                 `<div class="gg-log-content">${argsHTML}</div>` +
-                detailsHTML);
+                detailsHTML +
+                `</div>`);
         })
             .join('')}</div>`;
         logContainer.html(logsHTML);

package/dist/gg.d.ts

@@ -22,6 +22,13 @@ export declare namespace gg {
     var disable: () => void;
     var enable: (namespaces: string) => void;
     var clearPersist: () => void;
-    var _onLog: OnLogCallback | null;
 }
+export declare namespace gg {
+    let _onLog: OnLogCallback | null;
+}
+/**
+ * Run gg diagnostics and log configuration status
+ * Can be called immediately or delayed (e.g., after Eruda loads)
+ */
+export declare function runGgDiagnostics(): Promise<void>;
 export {};

package/dist/gg.js

@@ -209,37 +209,51 @@ export function gg(...args) {
     }
     const ggLogFunction = namespaceToLogFunction.get(namespace) ||
         namespaceToLogFunction.set(namespace, createGgDebugger(namespace)).get(namespace);
+    // Prepare args for logging
+    let logArgs;
+    let returnValue;
     if (!args.length) {
-        ggLogFunction(`    📝📝 ${url} 👀👀`);
-        return {
+        // No arguments: log editor link
+        logArgs = [`    📝📝 ${url} 👀👀`];
+        returnValue = {
             fileName,
             functionName,
             url,
             stack
         };
     }
-    // Handle the case where args might be empty or have any number of arguments
-    if (args.length === 1) {
-        ggLogFunction(args[0]);
+    else if (args.length === 1) {
+        logArgs = [args[0]];
+        returnValue = args[0];
     }
     else {
-        ggLogFunction(args[0], ...args.slice(1));
+        logArgs = [args[0], ...args.slice(1)];
+        returnValue = args[0];
+    }
+    // Log to console via debug
+    if (logArgs.length === 1) {
+        ggLogFunction(logArgs[0]);
+    }
+    else {
+        ggLogFunction(logArgs[0], ...logArgs.slice(1));
     }
     // Call capture hook if registered (for Eruda plugin)
-    if (gg._onLog) {
-        // Don't stringify args - keep them as-is for expandable objects
-        const message = args.length === 1 ? String(args[0]) : args.map(String).join(' ');
-        // Use debug's native color (now deterministic since namespace has no padding)
-        gg._onLog({
-            namespace,
-            color: ggLogFunction.color,
-            diff: ggLogFunction.diff || 0, // Millisecond diff from debug library
-            message,
-            args, // Keep raw args for object inspection
-            timestamp: Date.now()
-        });
+    const entry = {
+        namespace,
+        color: ggLogFunction.color,
+        diff: ggLogFunction.diff || 0, // Millisecond diff from debug library
+        message: logArgs.length === 1 ? String(logArgs[0]) : logArgs.map(String).join(' '),
+        args: logArgs, // Keep raw args for object inspection
+        timestamp: Date.now()
+    };
+    if (_onLogCallback) {
+        _onLogCallback(entry);
+    }
+    else {
+        // Buffer early logs before Eruda initializes
+        earlyLogBuffer.push(entry);
     }
-    return args[0];
+    return returnValue;
 }
 gg.disable = isCloudflareWorker() ? () => { } : debugFactory.disable;
 gg.enable = isCloudflareWorker() ? () => { } : debugFactory.enable;
@@ -262,21 +276,47 @@ gg.clearPersist = () => {
  * Hook for capturing gg() output (used by Eruda plugin)
  * Set this to a callback function to receive log entries
  */
-gg._onLog = null;
-// Log some gg info to the JS console/terminal:
-if (ggConfig.showHints && !isCloudflareWorker()) {
+// Buffer for capturing early logs before Eruda initializes
+const earlyLogBuffer = [];
+let _onLogCallback = null;
+// Proxy property that replays buffered logs when hook is registered
+Object.defineProperty(gg, '_onLog', {
+    get() {
+        return _onLogCallback;
+    },
+    set(callback) {
+        _onLogCallback = callback;
+        // Replay buffered logs when callback is first registered
+        if (callback && earlyLogBuffer.length > 0) {
+            earlyLogBuffer.forEach((entry) => callback(entry));
+            earlyLogBuffer.length = 0; // Clear buffer after replay
+        }
+    }
+});
+// Namespace for adding properties to the gg function
+// eslint-disable-next-line @typescript-eslint/no-namespace
+(function (gg) {
+})(gg || (gg = {}));
+/**
+ * Run gg diagnostics and log configuration status
+ * Can be called immediately or delayed (e.g., after Eruda loads)
+ */
+export async function runGgDiagnostics() {
+    if (!ggConfig.showHints || isCloudflareWorker())
+        return;
     const ggLogTest = debugFactory('gg:TEST');
     let ggMessage = '\n';
     // Utilities for forming ggMessage:
     const message = (s) => (ggMessage += `${s}\n`);
     const checkbox = (test) => (test ? '✅' : '❌');
     const makeHint = (test, ifTrue, ifFalse = '') => (test ? ifTrue : ifFalse);
+    // Use plain console.log for diagnostics - appears in Eruda's Console tab
     console.log(`Loaded gg module. Checking configuration...`);
     if (ggConfig.enabled && ggLogTest.enabled) {
         gg('If you can see this logg, gg configured correctly!');
         message(`No problems detected:`);
         if (BROWSER) {
-            message(`ℹ️ If gg output still not visible above, enable "Verbose" log level in browser DevTools.`);
+            message(`ℹ️ If gg output not visible: enable "Verbose" log level in DevTools, or check Eruda's GG tab.`);
         }
     }
     else {
@@ -307,8 +347,18 @@ if (ggConfig.showHints && !isCloudflareWorker()) {
         }
         message(`${checkbox(ggLogTest.enabled)} DEBUG env variable: ${process?.env?.DEBUG}${hint}`);
     }
+    // Use plain console.log for diagnostics - appears in Eruda's Console tab
     console.log(ggMessage);
     // Reset namespace width after configuration check
     // This prevents the long callpoint from the config check from affecting subsequent logs
     resetNamespaceWidth();
 }
+// Run diagnostics immediately on module load if Eruda is not being used
+// (If Eruda will load, the loader will call runGgDiagnostics after Eruda is ready)
+if (ggConfig.showHints && !isCloudflareWorker()) {
+    // Only run immediately if we're not in a context where Eruda might load
+    // In browser dev mode, assume Eruda might load and skip immediate diagnostics
+    if (!BROWSER || !DEV) {
+        runGgDiagnostics();
+    }
+}

package/package.json

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