@leftium/gg 0.0.31 → 0.0.34

package/dist/eruda/plugin.js

@@ -1,4 +1,6 @@
+import { DEV } from 'esm-env';
 import { LogBuffer } from './buffer.js';
+const _ggCallSitesPlugin = typeof __GG_TAG_PLUGIN__ !== 'undefined' ? __GG_TAG_PLUGIN__ : false;
 /**
  * Creates the gg Eruda plugin
  *
@@ -17,34 +19,142 @@ export function createGgPlugin(options, gg) {
     let filterExpanded = false;
     let filterPattern = '';
     const enabledNamespaces = new Set();
+    // Last rendered entries (for hover tooltip arg lookup)
+    let renderedEntries = [];
+    // Settings UI state
+    let settingsExpanded = false;
+    // Filter pattern persistence key (independent of localStorage.debug)
+    const FILTER_KEY = 'gg-filter';
+    // Namespace click action: 'open' uses Vite dev middleware, 'copy' copies formatted string, 'open-url' navigates to URI
+    const NS_ACTION_KEY = 'gg-ns-action';
+    const EDITOR_BIN_KEY = 'gg-editor-bin';
+    const COPY_FORMAT_KEY = 'gg-copy-format';
+    const URL_FORMAT_KEY = 'gg-url-format';
+    const PROJECT_ROOT_KEY = 'gg-project-root';
+    // Plugin detection state (probed once at init)
+    let openInEditorPluginDetected = null; // null = not yet probed
+    // Editor bins for launch-editor (common first, then alphabetical)
+    const editorBins = [
+        { label: 'Auto-detect', value: '' },
+        { label: 'VS Code', value: 'code' },
+        { label: 'Cursor', value: 'cursor' },
+        { label: 'Zed', value: 'zed' },
+        { label: 'Sublime Text', value: 'sublime' },
+        { label: 'Vim', value: 'vim' },
+        { label: 'Emacs', value: 'emacs' },
+        { label: 'WebStorm', value: 'webstorm' },
+        { label: 'IDEA', value: 'idea' },
+        { label: 'Atom', value: 'atom' },
+        { label: 'AppCode', value: 'appcode' },
+        { label: 'Brackets', value: 'brackets' },
+        { label: 'CLion', value: 'clion' },
+        { label: 'Code Insiders', value: 'code-insiders' },
+        { label: 'Notepad++', value: 'notepad++' },
+        { label: 'PhpStorm', value: 'phpstorm' },
+        { label: 'PyCharm', value: 'pycharm' },
+        { label: 'Rider', value: 'rider' },
+        { label: 'RubyMine', value: 'rubymine' },
+        { label: 'VSCodium', value: 'codium' },
+        { label: 'Visual Studio', value: 'visualstudio' }
+    ];
+    // Terminal command presets
+    const copyPresets = {
+        'Raw path': '$FILE:$LINE:$COL',
+        'VS Code': 'code -g $FILE:$LINE:$COL',
+        Cursor: 'cursor -g $FILE:$LINE:$COL',
+        Zed: 'zed $FILE:$LINE:$COL',
+        Vim: 'vim +$LINE $FILE',
+        Emacs: 'emacs +$LINE:$COL $FILE',
+        JetBrains: 'idea --line $LINE --column $COL $FILE'
+    };
+    // URI scheme presets (use $ROOT for absolute paths)
+    const uriPresets = {
+        'VS Code': 'vscode://file/$ROOT/$FILE:$LINE:$COL',
+        'VS Code Insiders': 'vscode-insiders://file/$ROOT/$FILE:$LINE:$COL',
+        Cursor: 'cursor://file/$ROOT/$FILE:$LINE:$COL',
+        Windsurf: 'windsurf://file/$ROOT/$FILE:$LINE:$COL',
+        VSCodium: 'vscodium://file/$ROOT/$FILE:$LINE:$COL',
+        Zed: 'zed://file/$ROOT/$FILE:$LINE:$COL',
+        JetBrains: 'jetbrains://open?file=$ROOT/$FILE&line=$LINE&column=$COL',
+        'Sublime Text': 'subl://open?url=file://$ROOT/$FILE&line=$LINE&column=$COL',
+        Emacs: 'org-protocol://open-source?url=file://$ROOT/$FILE&line=$LINE&col=$COL',
+        Atom: 'atom://open?url=file://$ROOT/$FILE&line=$LINE&column=$COL'
+    };
+    let nsClickAction = localStorage.getItem(NS_ACTION_KEY) || (DEV ? 'open' : 'copy');
+    let editorBin = localStorage.getItem(EDITOR_BIN_KEY) || '';
+    let copyFormat = localStorage.getItem(COPY_FORMAT_KEY) || copyPresets['Raw path'];
+    let urlFormat = localStorage.getItem(URL_FORMAT_KEY) || uriPresets['VS Code'];
+    let projectRoot = localStorage.getItem(PROJECT_ROOT_KEY) || '';
+    /** Get the active format string for the current action mode */
+    function activeFormat() {
+        return nsClickAction === 'open-url' ? urlFormat : copyFormat;
+    }
+    /** Set the active format string and persist it */
+    function setActiveFormat(value) {
+        if (nsClickAction === 'open-url') {
+            urlFormat = value;
+            localStorage.setItem(URL_FORMAT_KEY, urlFormat);
+        }
+        else {
+            copyFormat = value;
+            localStorage.setItem(COPY_FORMAT_KEY, copyFormat);
+        }
+    }
     const plugin = {
         name: 'GG',
         init($container) {
             $el = $container;
+            // Load filter state BEFORE registering _onLog hook, because setting _onLog
+            // triggers replay of earlyLogBuffer and each entry checks filterPattern
+            filterPattern = localStorage.getItem(FILTER_KEY) || '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);
                     buffer.push(entry);
                     // Add new namespace to enabledNamespaces if it matches the current pattern
                     const effectivePattern = filterPattern || 'gg:*';
                     if (namespaceMatchesPattern(entry.namespace, effectivePattern)) {
                         enabledNamespaces.add(entry.namespace);
                     }
-                    // Update filter UI if expanded (new namespace may have appeared)
-                    if (filterExpanded) {
+                    // Update filter UI if new namespace appeared (updates button summary count)
+                    if (!hadNamespace) {
                         renderFilterUI();
                     }
                     renderLogs();
                 };
             }
-            // Load initial filter state
-            filterPattern = localStorage.getItem('debug') || '';
+            // Probe for openInEditorPlugin (status 222) and auto-populate $ROOT in dev mode
+            if (DEV) {
+                fetch('/__open-in-editor?file=+')
+                    .then((r) => {
+                    openInEditorPluginDetected = r.status === 222;
+                    // If plugin detected, fetch project root for $ROOT variable
+                    if (openInEditorPluginDetected && !projectRoot) {
+                        return fetch('/__gg-project-root').then((r) => r.text());
+                    }
+                })
+                    .then((root) => {
+                    if (root) {
+                        projectRoot = root.trim();
+                        localStorage.setItem(PROJECT_ROOT_KEY, projectRoot);
+                    }
+                    // Re-render settings if panel is open (to show detection result)
+                    if (settingsExpanded)
+                        renderSettingsUI();
+                })
+                    .catch(() => {
+                    openInEditorPluginDetected = false;
+                });
+            }
             // Render initial UI
             $el.html(buildHTML());
             wireUpButtons();
             wireUpExpanders();
             wireUpResize();
             wireUpFilterUI();
+            wireUpSettingsUI();
             renderLogs();
         },
         show() {
@@ -244,6 +354,29 @@ export function createGgPlugin(options, gg) {
 			.gg-solo-target:hover {
 				background: rgba(0,0,0,0.05);
 			}
+			/* Clickable namespace cells with file metadata (open-in-editor) */
+			.gg-log-ns[data-file] {
+				cursor: pointer;
+				text-decoration: underline;
+				text-decoration-style: dotted;
+				text-underline-offset: 3px;
+			}
+			.gg-log-ns[data-file]:hover {
+				text-decoration-style: solid;
+				background: rgba(0,0,0,0.05);
+			}
+			.gg-log-ns[data-file]::after {
+				content: ' \u{1F4CB}';
+				font-size: 10px;
+				opacity: 0;
+				transition: opacity 0.1s;
+			}
+			.gg-action-open .gg-log-ns[data-file]::after {
+				content: ' \u{1F517}';
+			}
+			.gg-log-ns[data-file]:hover::after {
+				opacity: 1;
+			}
 			.gg-details {
 				grid-column: 1 / -1;
 				border-top: none;
@@ -286,6 +419,107 @@ export function createGgPlugin(options, gg) {
 				.gg-log-content {
 					word-break: break-word;
 					padding: 4px 0;
+					position: relative;
+					-webkit-user-select: text !important;
+					user-select: text !important;
+					cursor: text;
+				}
+				.gg-log-content * {
+					-webkit-user-select: text !important;
+					user-select: text !important;
+				}
+				.gg-log-diff, .gg-log-ns {
+					-webkit-user-select: text !important;
+					user-select: text !important;
+				}
+				.gg-details, .gg-details * {
+					-webkit-user-select: text !important;
+					user-select: text !important;
+					cursor: text;
+				}
+				/* Fast custom tooltip for src expression on primitive-only rows (no expandable objects) */
+				.gg-log-content[data-src] {
+					cursor: help;
+				}
+				/* Show icon only on primitive rows (no .gg-expand child) */
+				.gg-log-content[data-src]:not(:has(.gg-expand))::before {
+					content: '\uD83D\uDD0D';
+					font-size: 10px;
+					margin-right: 4px;
+					opacity: 0.4;
+				}
+				.gg-log-content[data-src]:not(:has(.gg-expand)):hover::before {
+					opacity: 1;
+				}
+				.gg-log-content[data-src]:not(:has(.gg-expand))::after {
+					content: attr(data-src);
+					position: absolute;
+					top: 100%;
+					left: 0;
+					background: #333;
+					color: #fff;
+					font-size: 11px;
+					font-family: monospace;
+					padding: 3px 8px;
+					border-radius: 3px;
+					white-space: nowrap;
+					pointer-events: none;
+					opacity: 0;
+					transition: opacity 0.1s;
+					z-index: 1000;
+					max-width: 90vw;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+				.gg-log-content[data-src]:not(:has(.gg-expand)):hover::after {
+					opacity: 1;
+				}
+				/* Expression icon inline with expandable object labels */
+				.gg-src-icon {
+					font-size: 10px;
+					margin-right: 2px;
+					opacity: 0.4;
+					cursor: pointer;
+				}
+				.gg-expand:hover .gg-src-icon,
+				.gg-src-icon:hover {
+					opacity: 1;
+				}
+				/* Hover tooltip for expandable objects/arrays */
+				.gg-hover-tooltip {
+					display: none;
+					position: fixed;
+					background: #1e1e1e;
+					color: #d4d4d4;
+					font-size: 11px;
+					font-family: monospace;
+					padding: 8px 10px;
+					border-radius: 4px;
+					white-space: pre;
+					pointer-events: none;
+					z-index: 100000;
+					max-width: min(90vw, 500px);
+					max-height: 300px;
+					overflow: auto;
+					box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+					line-height: 1.4;
+				}
+				.gg-hover-tooltip-src {
+					color: #9cdcfe;
+					font-style: italic;
+					margin-bottom: 4px;
+					padding-bottom: 4px;
+					border-bottom: 1px solid #444;
+				}
+				/* Expression header inside expanded details */
+				.gg-details-src {
+					color: #555;
+					font-style: italic;
+					font-family: monospace;
+					font-size: 11px;
+					margin-bottom: 6px;
+					padding-bottom: 4px;
+					border-bottom: 1px solid #ddd;
 				}
 				.gg-filter-panel {
 					background: #f5f5f5;
@@ -313,15 +547,88 @@ export function createGgPlugin(options, gg) {
 					max-height: 100px;
 					overflow-y: auto;
 				}
-				.gg-filter-checkbox {
-					display: flex;
-					align-items: center;
-					gap: 4px;
-					font-size: 11px;
-					font-family: monospace;
-					white-space: nowrap;
-				}
-				/* Mobile responsive styles */
+			.gg-filter-checkbox {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				font-size: 11px;
+				font-family: monospace;
+				white-space: nowrap;
+			}
+			.gg-settings-panel {
+				background: #f5f5f5;
+				padding: 10px;
+				margin-bottom: 8px;
+				border-radius: 4px;
+				flex-shrink: 0;
+				display: none;
+			}
+			.gg-settings-panel.expanded {
+				display: block;
+			}
+			.gg-settings-label {
+				font-size: 11px;
+				font-weight: bold;
+				margin-bottom: 4px;
+			}
+			.gg-editor-format-input,
+			.gg-project-root-input {
+				width: 100%;
+				padding: 4px 8px;
+				font-family: monospace;
+				font-size: 14px;
+				margin-bottom: 8px;
+				box-sizing: border-box;
+			}
+			.gg-editor-presets {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 4px;
+			}
+			.gg-editor-presets button {
+				padding: 2px 8px;
+				font-size: 11px;
+				cursor: pointer;
+				border: 1px solid #ccc;
+				border-radius: 3px;
+				background: #fff;
+			}
+			.gg-editor-presets button.active {
+				background: #4a9eff;
+				color: #fff;
+				border-color: #4a9eff;
+			}
+			.gg-editor-presets button:hover {
+				background: #e0e0e0;
+			}
+			.gg-editor-presets button.active:hover {
+				background: #3a8eef;
+			}
+			.gg-settings-radios {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 4px 12px;
+				margin-bottom: 8px;
+			}
+			.gg-settings-radios label {
+				font-size: 12px;
+				padding: 3px 0;
+				cursor: pointer;
+				white-space: nowrap;
+			}
+			.gg-settings-radios label.disabled {
+				opacity: 0.4;
+				cursor: not-allowed;
+			}
+			.gg-settings-sub {
+				margin-top: 4px;
+				margin-bottom: 8px;
+			}
+			.gg-settings-sub select {
+				padding: 2px 4px;
+				font-size: 12px;
+			}
+			/* Mobile responsive styles */
 				.gg-toolbar {
 					display: flex;
 					align-items: center;
@@ -410,7 +717,7 @@ export function createGgPlugin(options, gg) {
 					}
 				}
 			</style>
-		<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="eruda-gg${nsClickAction === 'open' || nsClickAction === 'open-url' ? ' gg-action-open' : ''}" 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>
@@ -421,6 +728,10 @@ export function createGgPlugin(options, gg) {
 				<span class="gg-btn-icon">NS: </span>
 				<span class="gg-filter-summary"></span>
 			</button>
+				<button class="gg-settings-btn">
+					<span class="gg-btn-text">⚙️ Settings</span>
+					<span class="gg-btn-icon" title="Settings">⚙️</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>
@@ -428,13 +739,15 @@ export function createGgPlugin(options, gg) {
 				</button>
 			</div>
 				<div class="gg-filter-panel"></div>
+				<div class="gg-settings-panel"></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>
+				<iframe class="gg-editor-iframe" hidden title="open-in-editor"></iframe>
 			</div>
 		`;
     }
     function applyPatternFromInput(value) {
         filterPattern = value;
-        localStorage.setItem('debug', filterPattern);
+        localStorage.setItem(FILTER_KEY, filterPattern);
         // Sync enabledNamespaces from the new pattern
         const allNamespaces = getAllCapturedNamespaces();
         enabledNamespaces.clear();
@@ -455,9 +768,13 @@ export function createGgPlugin(options, gg) {
         if (!filterBtn || !filterPanel)
             return;
         renderFilterUI();
-        // Wire up button toggle
+        // Wire up button toggle (close settings if opening filter)
         filterBtn.addEventListener('click', () => {
             filterExpanded = !filterExpanded;
+            if (filterExpanded) {
+                settingsExpanded = false;
+                renderSettingsUI();
+            }
             renderFilterUI();
             renderLogs(); // Re-render to update grid columns
         });
@@ -493,7 +810,7 @@ export function createGgPlugin(options, gg) {
                     filterPattern = `gg:*,${exclusions}`;
                     enabledNamespaces.clear();
                 }
-                localStorage.setItem('debug', filterPattern);
+                localStorage.setItem(FILTER_KEY, filterPattern);
                 renderFilterUI();
                 renderLogs();
                 return;
@@ -572,6 +889,214 @@ export function createGgPlugin(options, gg) {
             filterPanel.classList.remove('expanded');
         }
     }
+    /** Render the format field + $ROOT field shared by "Copy to clipboard" and "Open as URL" */
+    function renderFormatSection(isUrlMode) {
+        const presets = isUrlMode ? uriPresets : copyPresets;
+        const placeholder = isUrlMode ? 'vscode://file/$ROOT/$FILE:$LINE:$COL' : '$FILE:$LINE:$COL';
+        const description = isUrlMode
+            ? 'Opens a URI in the browser. Editor apps register URI schemes to handle these.'
+            : 'Copies a command to your clipboard. Paste in a terminal to open the source file.';
+        const currentFormat = activeFormat();
+        const presetButtons = Object.entries(presets)
+            .map(([name, fmt]) => {
+            const active = currentFormat === fmt ? ' active' : '';
+            return `<button class="gg-preset-btn${active}" data-format="${escapeHtml(fmt)}">${escapeHtml(name)}</button>`;
+        })
+            .join('');
+        return `
+			<div class="gg-settings-sub">
+				<div style="font-size: 11px; opacity: 0.7; margin-bottom: 6px;">${description}<br>Variables: <code>$FILE</code>, <code>$LINE</code>, <code>$COL</code>, <code>$ROOT</code></div>
+				<input type="text" class="gg-editor-format-input" value="${escapeHtml(currentFormat)}" placeholder="${escapeHtml(placeholder)}">
+				<div class="gg-settings-label" style="margin-top: 4px;">Presets:</div>
+				<div class="gg-editor-presets">${presetButtons}</div>
+				<div style="margin-top: 8px;">
+					<div class="gg-settings-label">Project root (<code>$ROOT</code>):</div>
+					<input type="text" class="gg-project-root-input" value="${escapeHtml(projectRoot)}" placeholder="/home/user/my-project" style="width: 100%; padding: 4px 8px; font-family: monospace; font-size: 14px; box-sizing: border-box;">
+					<div style="font-size: 10px; opacity: 0.5; margin-top: 2px;">${DEV && openInEditorPluginDetected ? 'Auto-filled from dev server.' : 'Set manually for URI schemes.'} Uses forward slashes on all platforms.</div>
+				</div>
+			</div>
+		`;
+    }
+    function renderSettingsUI() {
+        if (!$el)
+            return;
+        const settingsPanel = $el.find('.gg-settings-panel').get(0);
+        if (!settingsPanel)
+            return;
+        // Toggle CSS class on container for hover icon (📝 vs 📋)
+        const container = $el.find('.eruda-gg').get(0);
+        if (container) {
+            container.classList.toggle('gg-action-open', nsClickAction === 'open' || nsClickAction === 'open-url');
+        }
+        if (settingsExpanded) {
+            settingsPanel.classList.add('expanded');
+            const openDisabled = !DEV;
+            const openLabelClass = openDisabled ? ' disabled' : '';
+            // Warning when call-sites plugin not installed (no file/line/col metadata)
+            const callSitesWarning = !_ggCallSitesPlugin
+                ? `<div style="font-size: 11px; color: #b8860b; margin-bottom: 6px;">\u26A0 call-sites vite plugin not detected \u2014 namespaces have no file locations. Add ggCallSitesPlugin() to vite.config.ts to enable click-to-open.</div>`
+                : '';
+            // Options section below all radios (editor buttons or format field)
+            let optionsSection = '';
+            if (nsClickAction === 'open' && !openDisabled) {
+                const pluginWarning = openInEditorPluginDetected === false
+                    ? `<div style="font-size: 11px; color: #b8860b; margin-bottom: 6px;">\u26A0 open-in-editor vite plugin not detected \u2014 file will open at line 1 (no cursor positioning or editor selection). Add openInEditorPlugin() to vite.config.ts for full support.</div>`
+                    : '';
+                let editorButtons = '';
+                if (openInEditorPluginDetected !== false) {
+                    const buttons = editorBins
+                        .map(({ label, value }) => {
+                        const active = value === editorBin ? ' active' : '';
+                        return `<button class="gg-editor-bin-btn${active}" data-editor="${escapeHtml(value)}">${escapeHtml(label)}</button>`;
+                    })
+                        .join('');
+                    editorButtons = `<div class="gg-settings-label">Editor:</div><div class="gg-editor-presets">${buttons}</div>`;
+                }
+                optionsSection = `<div class="gg-settings-sub">${pluginWarning}${editorButtons}</div>`;
+            }
+            else if (nsClickAction === 'copy' || nsClickAction === 'open-url') {
+                optionsSection = renderFormatSection(nsClickAction === 'open-url');
+            }
+            // Native Console section
+            const currentDebugValue = localStorage.getItem('debug');
+            const debugDisplay = currentDebugValue !== null ? `'${escapeHtml(currentDebugValue)}'` : 'not set';
+            const currentFilter = filterPattern || 'gg:*';
+            const debugMatchesFilter = currentDebugValue === currentFilter;
+            const debugIncludesGg = currentDebugValue !== null &&
+                (currentDebugValue.includes('gg:') || currentDebugValue === '*');
+            const nativeConsoleSection = `
+				<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #ddd;">
+					<div class="gg-settings-label">Native Console Output</div>
+					<div style="font-size: 11px; opacity: 0.7; margin-bottom: 8px;">
+						gg messages always appear in this GG panel. To also see them in the browser's native console, set <code>localStorage.debug</code> below.
+						For server-side: <code>DEBUG=gg:* npm run dev</code>
+					</div>
+					<div style="font-family: monospace; font-size: 12px; margin-bottom: 6px;">
+						localStorage.debug = ${debugDisplay}
+						${debugIncludesGg ? '<span style="color: green;">✅</span>' : '<span style="color: #999;">⚫ gg:* not included</span>'}
+					</div>
+					<div style="display: flex; gap: 6px; flex-wrap: wrap;">
+						<button class="gg-sync-debug-btn" style="padding: 4px 10px; font-size: 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 3px; background: ${debugMatchesFilter ? '#e8e8e8' : '#fff'};"${debugMatchesFilter ? ' disabled' : ''}>
+							${debugMatchesFilter ? 'In sync' : `Set to '${escapeHtml(currentFilter)}'`}
+						</button>
+						<button class="gg-clear-debug-btn" style="padding: 4px 10px; font-size: 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 3px; background: #fff;"${currentDebugValue === null ? ' disabled' : ''}>
+							Clear
+						</button>
+					</div>
+					<div style="font-size: 10px; opacity: 0.5; margin-top: 4px;">
+						Changes take effect on next page reload.
+					</div>
+				</div>
+			`;
+            settingsPanel.innerHTML = `
+				${callSitesWarning}
+				<div class="gg-settings-label">When namespace clicked:</div>
+				<div class="gg-settings-radios">
+					<label class="${openLabelClass}">
+						<input type="radio" name="gg-ns-action" value="open" ${nsClickAction === 'open' ? 'checked' : ''} ${openDisabled ? 'disabled' : ''}>
+						Open via dev server${openDisabled ? ' (dev mode only)' : ''}
+					</label>
+					<label>
+						<input type="radio" name="gg-ns-action" value="open-url" ${nsClickAction === 'open-url' ? 'checked' : ''}>
+						Open via URL
+					</label>
+					<label>
+						<input type="radio" name="gg-ns-action" value="copy" ${nsClickAction === 'copy' ? 'checked' : ''}>
+						Copy to clipboard
+					</label>
+				</div>
+				${optionsSection}
+				${nativeConsoleSection}
+			`;
+        }
+        else {
+            settingsPanel.classList.remove('expanded');
+        }
+    }
+    function wireUpSettingsUI() {
+        if (!$el)
+            return;
+        const settingsBtn = $el.find('.gg-settings-btn').get(0);
+        const settingsPanel = $el.find('.gg-settings-panel').get(0);
+        if (!settingsBtn || !settingsPanel)
+            return;
+        // Toggle settings panel (close filter if opening settings)
+        settingsBtn.addEventListener('click', () => {
+            settingsExpanded = !settingsExpanded;
+            if (settingsExpanded) {
+                filterExpanded = false;
+                renderFilterUI();
+                renderLogs();
+            }
+            renderSettingsUI();
+        });
+        // Event delegation on settings panel
+        settingsPanel.addEventListener('change', (e) => {
+            const target = e.target;
+            // Radio buttons: open vs copy vs open-url
+            if (target.name === 'gg-ns-action') {
+                nsClickAction = target.value;
+                localStorage.setItem(NS_ACTION_KEY, nsClickAction);
+                renderSettingsUI();
+                renderLogs(); // Re-render tooltips
+            }
+        });
+        // Format + project root inputs: apply on blur or Enter
+        settingsPanel.addEventListener('blur', (e) => {
+            const target = e.target;
+            if (target.classList.contains('gg-editor-format-input')) {
+                setActiveFormat(target.value);
+                renderSettingsUI();
+            }
+            if (target.classList.contains('gg-project-root-input')) {
+                projectRoot = target.value;
+                localStorage.setItem(PROJECT_ROOT_KEY, projectRoot);
+            }
+        }, true);
+        settingsPanel.addEventListener('keydown', (e) => {
+            const target = e.target;
+            if (target.classList.contains('gg-editor-format-input') && e.key === 'Enter') {
+                setActiveFormat(target.value);
+                target.blur();
+                renderSettingsUI();
+            }
+            if (target.classList.contains('gg-project-root-input') && e.key === 'Enter') {
+                projectRoot = target.value;
+                localStorage.setItem(PROJECT_ROOT_KEY, projectRoot);
+                target.blur();
+            }
+        });
+        // Preset button clicks + editor bin button clicks + native console buttons
+        settingsPanel.addEventListener('click', (e) => {
+            const target = e.target;
+            if (target.classList.contains('gg-preset-btn')) {
+                const fmt = target.getAttribute('data-format');
+                if (fmt) {
+                    setActiveFormat(fmt);
+                    renderSettingsUI();
+                }
+            }
+            if (target.classList.contains('gg-editor-bin-btn')) {
+                const editor = target.getAttribute('data-editor');
+                if (editor !== null) {
+                    editorBin = editor;
+                    localStorage.setItem(EDITOR_BIN_KEY, editorBin);
+                    renderSettingsUI();
+                }
+            }
+            // Native Console: sync localStorage.debug to current gg-filter
+            if (target.classList.contains('gg-sync-debug-btn')) {
+                const currentFilter = localStorage.getItem(FILTER_KEY) || 'gg:*';
+                localStorage.setItem('debug', currentFilter);
+                renderSettingsUI();
+            }
+            // Native Console: clear localStorage.debug
+            if (target.classList.contains('gg-clear-debug-btn')) {
+                localStorage.removeItem('debug');
+                renderSettingsUI();
+            }
+        });
+    }
     function wireUpButtons() {
         if (!$el)
             return;
@@ -616,6 +1141,58 @@ export function createGgPlugin(options, gg) {
             }
         });
     }
+    /** Substitute format variables ($ROOT, $FILE, $LINE, $COL) in a format string */
+    function formatString(format, file, line, col) {
+        return format
+            .replace(/\$ROOT/g, projectRoot)
+            .replace(/\$FILE/g, file)
+            .replace(/\$LINE/g, line || '1')
+            .replace(/\$COL/g, col || '1');
+    }
+    /**
+     * Handle namespace click: open in editor via Vite middleware, copy to clipboard, or open URL.
+     * Behavior is controlled by the nsClickAction setting.
+     */
+    function handleNamespaceClick(target) {
+        if (!$el)
+            return;
+        const file = target.getAttribute('data-file');
+        if (!file)
+            return;
+        const line = target.getAttribute('data-line');
+        const col = target.getAttribute('data-col');
+        if (nsClickAction === 'open' && DEV) {
+            // Open in editor via Vite dev server middleware
+            let url = `/__open-in-editor?file=${encodeURIComponent(file)}`;
+            if (line)
+                url += `&line=${line}`;
+            if (line && col)
+                url += `&col=${col}`;
+            if (editorBin)
+                url += `&editor=${encodeURIComponent(editorBin)}`;
+            const iframe = $el.find('.gg-editor-iframe').get(0);
+            if (iframe) {
+                iframe.src = url;
+            }
+        }
+        else if (nsClickAction === 'open-url') {
+            // Open formatted URI in browser (editor handles the URI scheme)
+            const formatted = formatString(activeFormat(), file, line, col);
+            window.open(formatted, '_blank');
+        }
+        else {
+            // Copy formatted file path to clipboard
+            const formatted = formatString(activeFormat(), file, line, col);
+            navigator.clipboard.writeText(formatted).then(() => {
+                // Brief "Copied!" feedback on the namespace cell
+                const original = target.textContent;
+                target.textContent = '\u{1F4CB} Copied!';
+                setTimeout(() => {
+                    target.textContent = original;
+                }, 1200);
+            });
+        }
+    }
     function wireUpExpanders() {
         if (!$el || expanderAttached)
             return;
@@ -637,6 +1214,13 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
+            // Handle clicking namespace to open in editor (when filter collapsed)
+            if (target?.classList?.contains('gg-log-ns') &&
+                target.hasAttribute('data-file') &&
+                !target.classList.contains('gg-solo-target')) {
+                handleNamespaceClick(target);
+                return;
+            }
             // Handle filter icon clicks (hide / solo)
             if (target?.classList?.contains('gg-icon-hide') ||
                 target?.classList?.contains('gg-icon-solo')) {
@@ -650,7 +1234,7 @@ export function createGgPlugin(options, gg) {
                 else {
                     soloNamespace(namespace);
                 }
-                localStorage.setItem('debug', filterPattern);
+                localStorage.setItem(FILTER_KEY, filterPattern);
                 renderFilterUI();
                 renderLogs();
                 return;
@@ -661,7 +1245,7 @@ export function createGgPlugin(options, gg) {
                 if (!namespace)
                     return;
                 soloNamespace(namespace);
-                localStorage.setItem('debug', filterPattern);
+                localStorage.setItem(FILTER_KEY, filterPattern);
                 renderFilterUI();
                 renderLogs();
                 return;
@@ -673,11 +1257,75 @@ export function createGgPlugin(options, gg) {
                 filterPattern = 'gg:*';
                 enabledNamespaces.clear();
                 getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
-                localStorage.setItem('debug', filterPattern);
+                localStorage.setItem(FILTER_KEY, filterPattern);
                 renderFilterUI();
                 renderLogs();
             }
         });
+        // Hover tooltip for expandable objects/arrays.
+        // The tooltip div is re-created after each renderLogs() call
+        // since logContainer.html() destroys children. Event listeners query it dynamically.
+        containerEl.addEventListener('mouseover', (e) => {
+            const target = e.target?.closest?.('.gg-expand');
+            if (!target)
+                return;
+            const entryIdx = target.getAttribute('data-entry');
+            const argIdx = target.getAttribute('data-arg');
+            if (entryIdx === null || argIdx === null)
+                return;
+            const entry = renderedEntries[Number(entryIdx)];
+            if (!entry)
+                return;
+            const arg = entry.args[Number(argIdx)];
+            if (arg === undefined)
+                return;
+            const tip = containerEl.querySelector('.gg-hover-tooltip');
+            if (!tip)
+                return;
+            const srcExpr = target.getAttribute('data-src');
+            // Build tooltip content using DOM API (safe, no HTML injection)
+            tip.textContent = '';
+            if (srcExpr) {
+                const srcDiv = document.createElement('div');
+                srcDiv.className = 'gg-hover-tooltip-src';
+                srcDiv.textContent = srcExpr;
+                tip.appendChild(srcDiv);
+            }
+            const pre = document.createElement('pre');
+            pre.style.margin = '0';
+            pre.textContent = JSON.stringify(arg, null, 2);
+            tip.appendChild(pre);
+            tip.style.display = 'block';
+            // Position below the hovered element using viewport coords (fixed positioning)
+            const targetRect = target.getBoundingClientRect();
+            let left = targetRect.left;
+            let top = targetRect.bottom + 4;
+            // Keep tooltip within viewport
+            const tipRect = tip.getBoundingClientRect();
+            if (left + tipRect.width > window.innerWidth) {
+                left = window.innerWidth - tipRect.width - 8;
+            }
+            if (left < 4)
+                left = 4;
+            // If tooltip would go below viewport, show above instead
+            if (top + tipRect.height > window.innerHeight) {
+                top = targetRect.top - tipRect.height - 4;
+            }
+            tip.style.left = `${left}px`;
+            tip.style.top = `${top}px`;
+        });
+        containerEl.addEventListener('mouseout', (e) => {
+            const target = e.target?.closest?.('.gg-expand');
+            if (!target)
+                return;
+            // Only hide if we're not moving to another child of the same .gg-expand
+            const related = e.relatedTarget;
+            if (related?.closest?.('.gg-expand') === target)
+                return;
+            const tip = containerEl.querySelector('.gg-hover-tooltip');
+            if (tip)
+                tip.style.display = 'none';
+        });
         expanderAttached = true;
     }
     function wireUpResize() {
@@ -737,6 +1385,7 @@ export function createGgPlugin(options, gg) {
         const allEntries = buffer.getEntries();
         // Apply filtering
         const entries = allEntries.filter((entry) => enabledNamespaces.has(entry.namespace));
+        renderedEntries = entries;
         const countText = entries.length === allEntries.length
             ? `${entries.length} entries`
             : `${entries.length} / ${allEntries.length} entries`;
@@ -753,6 +1402,8 @@ export function createGgPlugin(options, gg) {
             // 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) : '';
             if (entry.args.length > 0) {
                 argsHTML = entry.args
                     .map((arg, argIdx) => {
@@ -761,9 +1412,14 @@ export function createGgPlugin(options, gg) {
                         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;"><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>`;
+                        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>` : '';
+                        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}</span>`;
                     }
                     else {
                         // Parse ANSI codes first, then convert URLs to clickable links
@@ -787,20 +1443,44 @@ export function createGgPlugin(options, gg) {
             // When filter expanded, diff+ns are clickable (solo) with data-namespace
             const soloAttr = filterExpanded ? ` data-namespace="${ns}"` : '';
             const soloClass = filterExpanded ? ' gg-solo-target' : '';
+            // 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}"` : '';
+            let fileTitleText = '';
+            if (entry.file) {
+                if (nsClickAction === 'open' && DEV) {
+                    fileTitleText = `Open in editor: ${entry.file}${entry.line ? ':' + entry.line : ''}${entry.col ? ':' + entry.col : ''}`;
+                }
+                else if (nsClickAction === 'open-url') {
+                    fileTitleText = `Open URL: ${formatString(activeFormat(), entry.file, String(entry.line || 1), String(entry.col || 1))}`;
+                }
+                else {
+                    fileTitleText = `Copy: ${formatString(activeFormat(), entry.file, String(entry.line || 1), String(entry.col || 1))}`;
+                }
+            }
+            const fileTitle = fileTitleText ? ` title="${escapeHtml(fileTitleText)}"` : '';
             // Desktop: grid layout, Mobile: stacked layout
             return (`<div class="gg-log-entry">` +
                 `<div class="gg-log-header">` +
                 iconsCol +
                 `<div class="gg-log-diff${soloClass}" style="color: ${color};"${soloAttr}>${diff}</div>` +
-                `<div class="gg-log-ns${soloClass}" style="color: ${color};"${soloAttr}>${ns}</div>` +
+                `<div class="gg-log-ns${soloClass}" style="color: ${color};"${soloAttr}${fileAttr}${lineAttr}${colAttr}${fileTitle}>${ns}</div>` +
                 `<div class="gg-log-handle"></div>` +
                 `</div>` +
-                `<div class="gg-log-content">${argsHTML}</div>` +
+                `<div class="gg-log-content"${entry.src?.trim() && !/^['"`]/.test(entry.src) ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${argsHTML}</div>` +
                 detailsHTML +
                 `</div>`);
         })
             .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
         wireUpExpanders();
         // Auto-scroll to bottom
@@ -832,17 +1512,58 @@ export function createGgPlugin(options, gg) {
      */
     function stripAnsi(text) {
         // Remove all ANSI escape codes
+        // eslint-disable-next-line no-control-regex
         return text.replace(/\x1b\[[0-9;]*m/g, '');
     }
+    // Standard ANSI 3/4-bit color palette
+    const ANSI_COLORS = {
+        // Normal foreground (30-37)
+        30: '#000000',
+        31: '#cc0000',
+        32: '#00cc00',
+        33: '#cccc00',
+        34: '#0000cc',
+        35: '#cc00cc',
+        36: '#00cccc',
+        37: '#cccccc',
+        // Normal background (40-47)
+        40: '#000000',
+        41: '#cc0000',
+        42: '#00cc00',
+        43: '#cccc00',
+        44: '#0000cc',
+        45: '#cc00cc',
+        46: '#00cccc',
+        47: '#cccccc',
+        // Bright foreground (90-97)
+        90: '#555555',
+        91: '#ff5555',
+        92: '#55ff55',
+        93: '#ffff55',
+        94: '#5555ff',
+        95: '#ff55ff',
+        96: '#55ffff',
+        97: '#ffffff',
+        // Bright background (100-107)
+        100: '#555555',
+        101: '#ff5555',
+        102: '#55ff55',
+        103: '#ffff55',
+        104: '#5555ff',
+        105: '#ff55ff',
+        106: '#55ffff',
+        107: '#ffffff'
+    };
     /**
      * Parse ANSI escape codes and convert to HTML with inline styles
      * Supports:
+     * - Basic 3/4-bit colors: \x1b[31m (fg red), \x1b[41m (bg red), \x1b[91m (bright fg), etc.
      * - 24-bit RGB: \x1b[38;2;r;g;bm (foreground), \x1b[48;2;r;g;bm (background)
      * - Reset: \x1b[0m
      */
     function parseAnsiToHtml(text) {
         // ANSI escape sequence regex
-        // Matches: \x1b[38;2;r;g;bm, \x1b[48;2;r;g;bm, \x1b[0m
+        // eslint-disable-next-line no-control-regex
         const ansiRegex = /\x1b\[([0-9;]+)m/g;
         let html = '';
         let lastIndex = 0;
@@ -871,6 +1592,25 @@ export function createGgPlugin(options, gg) {
                 // Background RGB: 48;2;r;g;b
                 currentBg = `rgb(${parts[2]},${parts[3]},${parts[4]})`;
             }
+            else if (parts[0] === 39) {
+                // Default foreground
+                currentFg = null;
+            }
+            else if (parts[0] === 49) {
+                // Default background
+                currentBg = null;
+            }
+            else {
+                // Basic 3/4-bit colors
+                for (const p of parts) {
+                    if ((p >= 30 && p <= 37) || (p >= 90 && p <= 97)) {
+                        currentFg = ANSI_COLORS[p] || null;
+                    }
+                    else if ((p >= 40 && p <= 47) || (p >= 100 && p <= 107)) {
+                        currentBg = ANSI_COLORS[p] || null;
+                    }
+                }
+            }
             lastIndex = ansiRegex.lastIndex;
         }
         // Add remaining text