@leftium/gg 0.0.39 → 0.0.41

package/dist/eruda/plugin.js

@@ -21,10 +21,16 @@ export function createGgPlugin(options, gg) {
     const enabledNamespaces = new Set();
     // Last rendered entries (for hover tooltip arg lookup)
     let renderedEntries = [];
+    // Toast state for "namespace hidden" feedback
+    let lastHiddenPattern = null; // filterPattern before the hide (for undo)
+    let hasSeenToastExplanation = false; // first toast auto-expands help text
     // Settings UI state
     let settingsExpanded = false;
+    // Expression visibility toggle
+    let showExpressions = false;
     // Filter pattern persistence key (independent of localStorage.debug)
     const FILTER_KEY = 'gg-filter';
+    const SHOW_EXPRESSIONS_KEY = 'gg-show-expressions';
     // 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';
@@ -107,6 +113,7 @@ export function createGgPlugin(options, gg) {
             // 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:*';
+            showExpressions = localStorage.getItem(SHOW_EXPRESSIONS_KEY) === 'true';
             // Register the capture hook on gg
             if (gg) {
                 gg._onLog = (entry) => {
@@ -155,6 +162,7 @@ export function createGgPlugin(options, gg) {
             wireUpResize();
             wireUpFilterUI();
             wireUpSettingsUI();
+            wireUpToast();
             renderLogs();
         },
         show() {
@@ -205,19 +213,40 @@ export function createGgPlugin(options, gg) {
             }
         });
     }
-    function soloNamespace(namespace) {
-        const ns = namespace.trim();
-        // Toggle: if already soloed on this namespace, restore all
-        if (filterPattern === ns) {
-            filterPattern = 'gg:*';
-            enabledNamespaces.clear();
-            getAllCapturedNamespaces().forEach((n) => enabledNamespaces.add(n));
-            return;
-        }
-        // Solo: show only this namespace
-        filterPattern = ns;
+    function toggleNamespaces(namespaces, enable) {
+        const currentPattern = filterPattern || 'gg:*';
+        let parts = currentPattern
+            .split(',')
+            .map((p) => p.trim())
+            .filter(Boolean);
+        namespaces.forEach((namespace) => {
+            const ns = namespace.trim();
+            if (enable) {
+                // Remove any exclusion for this namespace
+                parts = parts.filter((p) => p !== `-${ns}`);
+            }
+            else {
+                // Add exclusion if not already present
+                const exclusion = `-${ns}`;
+                if (!parts.includes(exclusion)) {
+                    parts.push(exclusion);
+                }
+            }
+        });
+        filterPattern = parts.join(',');
+        // Simplify pattern
+        filterPattern = simplifyPattern(filterPattern);
+        // Sync enabledNamespaces from the NEW pattern
+        const allNamespaces = getAllCapturedNamespaces();
         enabledNamespaces.clear();
-        enabledNamespaces.add(ns);
+        const effectivePattern = filterPattern || 'gg:*';
+        allNamespaces.forEach((ns) => {
+            if (namespaceMatchesPattern(ns, effectivePattern)) {
+                enabledNamespaces.add(ns);
+            }
+        });
+        // Persist the new pattern
+        localStorage.setItem(FILTER_KEY, filterPattern);
     }
     function simplifyPattern(pattern) {
         if (!pattern)
@@ -296,11 +325,7 @@ export function createGgPlugin(options, gg) {
     }
     function gridColumns() {
         const ns = nsColWidth !== null ? `${nsColWidth}px` : 'auto';
-        // When filter expanded: icons | diff | ns | handle | content
-        // When collapsed:               diff | ns | handle | content
-        if (filterExpanded) {
-            return `auto auto ${ns} 4px 1fr`;
-        }
+        // Grid columns: diff | ns | handle | content
         return `auto ${ns} 4px 1fr`;
     }
     function buildHTML() {
@@ -316,67 +341,51 @@ export function createGgPlugin(options, gg) {
 			.gg-log-entry {
 				display: contents;
 			}
-			.gg-log-header {
-				display: contents;
-			}
-			.gg-log-icons,
-			.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-log-icons {
-				display: flex;
-				gap: 2px;
-				padding: 0 4px 0 0;
-				white-space: nowrap;
-				align-self: stretch !important;
-			}
-			.gg-log-icons button {
-				all: unset;
-				cursor: pointer;
-				opacity: 0.35;
-				padding: 4px 10px;
-				line-height: 1;
-				display: flex;
-				align-items: center;
-			}
-			.gg-log-icons button:hover {
-				opacity: 1;
-				background: rgba(0,0,0,0.05);
-			}
-			.gg-solo-target {
-				cursor: pointer;
-			}
-			.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-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-reset-filter-btn:hover {
+		background: #1976D2 !important;
+		transform: translateY(-1px);
+		box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
+	}
+	.gg-reset-filter-btn:active {
+		transform: translateY(0);
+	}
+		/* Clickable time diff with file metadata (open-in-editor) */
+		.gg-log-diff[data-file] {
+			cursor: pointer;
+			text-decoration: underline;
+			text-decoration-style: dotted;
+			text-underline-offset: 2px;
+			opacity: 0.85;
+		}
+		.gg-log-diff[data-file]:hover {
+			text-decoration-style: solid;
+			opacity: 1;
+			background: rgba(0,0,0,0.05);
+		}
+	/* Clickable namespace segments - always enabled for filtering */
+		.gg-ns-segment {
+			cursor: pointer;
+			padding: 1px 2px;
+			border-radius: 2px;
+			transition: background 0.1s;
+		}
+		.gg-ns-segment:hover {
+			background: rgba(0,0,0,0.1);
+			text-decoration: underline;
+			text-decoration-style: solid;
+			text-underline-offset: 2px;
+		}
 			.gg-details {
 				grid-column: 1 / -1;
 				border-top: none;
@@ -390,13 +399,138 @@ export function createGgPlugin(options, gg) {
 					padding: 4px 8px 4px 0;
 					white-space: pre;
 				}
-				.gg-log-ns {
-					font-weight: bold;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					padding: 4px 8px 4px 0;
-				}
+		.gg-log-ns {
+			font-weight: bold;
+			white-space: nowrap;
+			overflow: hidden;
+			padding: 4px 8px 4px 0;
+			display: flex;
+			align-items: center;
+			gap: 6px;
+		}
+		.gg-ns-text {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			min-width: 0;
+		}
+	.gg-ns-hide {
+		all: unset;
+		cursor: pointer;
+		opacity: 0;
+		font-size: 14px;
+		font-weight: bold;
+		line-height: 1;
+		padding: 1px 4px;
+		transition: opacity 0.15s;
+		flex-shrink: 0;
+	}
+		.gg-log-ns:hover .gg-ns-hide {
+			opacity: 0.4;
+		}
+		.gg-ns-hide:hover {
+			opacity: 1 !important;
+			background: rgba(0,0,0,0.08);
+			border-radius: 3px;
+		}
+	/* Toast bar for "namespace hidden" feedback */
+	.gg-toast {
+		display: none;
+		background: #333;
+		color: #e0e0e0;
+		font-size: 12px;
+		font-family: monospace;
+		padding: 8px 12px;
+		border-radius: 6px 6px 0 0;
+		flex-shrink: 0;
+		align-items: center;
+		gap: 8px;
+		margin-top: 4px;
+		animation: gg-toast-slide-up 0.2s ease-out;
+	}
+	.gg-toast.visible {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	@keyframes gg-toast-slide-up {
+		from { transform: translateY(100%); opacity: 0; }
+		to { transform: translateY(0); opacity: 1; }
+	}
+	.gg-toast-label {
+		opacity: 0.7;
+		flex-shrink: 0;
+	}
+	.gg-toast-ns {
+		display: inline-flex;
+		align-items: center;
+		gap: 0;
+	}
+	.gg-toast-segment {
+		cursor: pointer;
+		padding: 1px 3px;
+		border-radius: 2px;
+		color: #bbb;
+		text-decoration: line-through;
+		transition: background 0.1s, color 0.1s;
+	}
+	.gg-toast-segment:hover {
+		color: #ef5350;
+		background: rgba(239, 83, 80, 0.15);
+	}
+	.gg-toast-delim {
+		opacity: 0.5;
+	}
+	.gg-toast-actions {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+	.gg-toast-btn {
+		all: unset;
+		cursor: pointer;
+		padding: 2px 8px;
+		border-radius: 3px;
+		font-size: 11px;
+		transition: background 0.1s;
+	}
+	.gg-toast-undo {
+		color: #64b5f6;
+		font-weight: bold;
+	}
+	.gg-toast-undo:hover {
+		background: rgba(100, 181, 246, 0.2);
+	}
+	.gg-toast-help {
+		color: #999;
+		font-size: 13px;
+		line-height: 1;
+	}
+	.gg-toast-help:hover {
+		color: #ccc;
+		background: rgba(255,255,255,0.1);
+	}
+	.gg-toast-dismiss {
+		color: #999;
+		font-size: 14px;
+		line-height: 1;
+	}
+	.gg-toast-dismiss:hover {
+		color: #fff;
+		background: rgba(255,255,255,0.1);
+	}
+	.gg-toast-explanation {
+		display: none;
+		width: 100%;
+		font-size: 11px;
+		opacity: 0.6;
+		padding-top: 4px;
+		margin-top: 4px;
+		border-top: 1px solid rgba(255,255,255,0.1);
+	}
+	.gg-toast-explanation.visible {
+		display: block;
+	}
 				.gg-log-handle {
 					width: 4px;
 					cursor: col-resize;
@@ -416,14 +550,14 @@ export function createGgPlugin(options, gg) {
 				.gg-log-handle.gg-dragging {
 					background: rgba(0,0,0,0.15);
 				}
-				.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 {
+				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;
@@ -474,6 +608,20 @@ export function createGgPlugin(options, gg) {
 				.gg-log-content[data-src]:not(:has(.gg-expand)):hover::after {
 					opacity: 1;
 				}
+				/* Inline expression label (shown when expression toggle is on) */
+				.gg-inline-expr {
+					color: #888;
+					font-style: italic;
+					font-size: 11px;
+				}
+				/* When expressions are shown inline, suppress the CSS tooltip and magnifying glass on primitives */
+				.gg-show-expr .gg-log-content[data-src] {
+					cursor: text;
+				}
+				.gg-show-expr .gg-log-content[data-src]:not(:has(.gg-expand))::before,
+				.gg-show-expr .gg-log-content[data-src]:not(:has(.gg-expand))::after {
+					display: none;
+				}
 				/* Expression icon inline with expandable object labels */
 				.gg-src-icon {
 					font-size: 10px;
@@ -727,18 +875,17 @@ export function createGgPlugin(options, gg) {
 						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-icons,
-				.gg-log-diff,
-				.gg-log-ns,
-				.gg-log-handle,
-				.gg-log-content,
-				.gg-details {
-					border-top: none !important;
+				/* 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;
@@ -775,7 +922,7 @@ export function createGgPlugin(options, gg) {
 		<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>
+					<span class="gg-btn-text">📋 <span class="gg-copy-count">Copy 0 entries</span></span>
 					<span class="gg-btn-icon" title="Copy">📋</span>
 				</button>
 			<button class="gg-filter-btn" style="text-align: left; white-space: nowrap;">
@@ -783,11 +930,15 @@ export function createGgPlugin(options, gg) {
 				<span class="gg-btn-icon">NS: </span>
 				<span class="gg-filter-summary"></span>
 			</button>
+			<button class="gg-expressions-btn" style="background: ${showExpressions ? '#e8f5e9' : 'transparent'};" title="Toggle expression visibility in logs and clipboard">
+				<span class="gg-btn-text">\uD83D\uDD0D Expr</span>
+				<span class="gg-btn-icon" title="Expressions">\uD83D\uDD0D</span>
+			</button>
+				<span style="flex: 1;"></span>
 				<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>
 					<span class="gg-btn-icon" title="Clear">⊘</span>
@@ -795,7 +946,8 @@ export function createGgPlugin(options, gg) {
 			</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>
+				<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>
 			</div>
 		`;
@@ -870,6 +1022,19 @@ export function createGgPlugin(options, gg) {
                 renderLogs();
                 return;
             }
+            // Handle "other" checkbox
+            if (target.classList.contains('gg-other-checkbox')) {
+                const otherNamespacesJson = target.getAttribute('data-other-namespaces');
+                if (!otherNamespacesJson)
+                    return;
+                const otherNamespaces = JSON.parse(otherNamespacesJson);
+                // Toggle all "other" namespaces at once
+                toggleNamespaces(otherNamespaces, target.checked);
+                // localStorage already saved in toggleNamespaces()
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
             // Handle individual namespace checkboxes
             if (target.classList.contains('gg-ns-checkbox')) {
                 const namespace = target.getAttribute('data-namespace');
@@ -908,26 +1073,52 @@ export function createGgPlugin(options, gg) {
             let checkboxesHTML = '';
             if (simple && allNamespaces.length > 0) {
                 const allChecked = enabledCount === totalCount;
+                // Count frequency of each namespace in the buffer
+                const allEntries = buffer.getEntries();
+                const nsCounts = new Map();
+                allEntries.forEach((entry) => {
+                    nsCounts.set(entry.namespace, (nsCounts.get(entry.namespace) || 0) + 1);
+                });
+                // Sort ALL namespaces by frequency (most common first)
+                const sortedAllNamespaces = [...allNamespaces].sort((a, b) => (nsCounts.get(b) || 0) - (nsCounts.get(a) || 0));
+                // Take top 5 most common (regardless of enabled state)
+                const displayedNamespaces = sortedAllNamespaces.slice(0, 5);
+                // Calculate "other" namespaces (not in top 5)
+                const displayedSet = new Set(displayedNamespaces);
+                const otherNamespaces = allNamespaces.filter((ns) => !displayedSet.has(ns));
+                const otherEnabledCount = otherNamespaces.filter((ns) => enabledNamespaces.has(ns)).length;
+                const otherTotalCount = otherNamespaces.length;
+                const otherChecked = otherEnabledCount > 0;
+                const otherCount = otherNamespaces.reduce((sum, ns) => sum + (nsCounts.get(ns) || 0), 0);
                 checkboxesHTML = `
-				<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
+			<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>
+				${displayedNamespaces
                     .map((ns) => {
                     // Check if namespace matches the current pattern
                     const checked = namespaceMatchesPattern(ns, effectivePattern);
+                    const count = nsCounts.get(ns) || 0;
                     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)} (${count})</span>
+						</label>
+					`;
                 })
                     .join('')}
-				</div>
-			`;
+				${otherTotalCount > 0
+                    ? `
+				<label class="gg-filter-checkbox" style="opacity: 0.7;">
+					<input type="checkbox" class="gg-other-checkbox" ${otherChecked ? 'checked' : ''} data-other-namespaces='${JSON.stringify(otherNamespaces)}'>
+					<span>other (${otherCount})</span>
+				</label>
+				`
+                    : ''}
+			</div>
+		`;
             }
             else if (!simple) {
                 checkboxesHTML = `<div style="opacity: 0.6; font-size: 11px; margin: 8px 0;">⚠️ Complex pattern - edit manually (quick filters disabled)</div>`;
@@ -1169,6 +1360,9 @@ export function createGgPlugin(options, gg) {
                 const time = new Date(e.timestamp).toISOString().slice(11, 19);
                 // Trim namespace and strip 'gg:' prefix to save tokens
                 const ns = e.namespace.trim().replace(/^gg:/, '');
+                // Include expression suffix when toggle is enabled
+                const hasSrcExpr = !e.level && e.src?.trim() && !/^['"`]/.test(e.src);
+                const exprSuffix = showExpressions && hasSrcExpr ? ` \u2039${e.src}\u203A` : '';
                 // Format args: compact JSON for objects, primitives as-is
                 const argsStr = e.args
                     .map((arg) => {
@@ -1179,7 +1373,7 @@ export function createGgPlugin(options, gg) {
                     return stripAnsi(String(arg));
                 })
                     .join(' ');
-                return `${time} ${ns} ${argsStr}`;
+                return `${time} ${ns} ${argsStr}${exprSuffix}`;
             })
                 .join('\n');
             try {
@@ -1195,6 +1389,15 @@ export function createGgPlugin(options, gg) {
                 document.body.removeChild(textarea);
             }
         });
+        $el.find('.gg-expressions-btn').on('click', () => {
+            showExpressions = !showExpressions;
+            localStorage.setItem(SHOW_EXPRESSIONS_KEY, String(showExpressions));
+            // Update button styling inline (toolbar is not re-rendered by renderLogs)
+            const btn = $el.find('.gg-expressions-btn').get(0);
+            if (btn)
+                btn.style.background = showExpressions ? '#e8f5e9' : 'transparent';
+            renderLogs();
+        });
     }
     /** Substitute format variables ($ROOT, $FILE, $LINE, $COL) in a format string */
     function formatString(format, file, line, col) {
@@ -1248,6 +1451,161 @@ export function createGgPlugin(options, gg) {
             });
         }
     }
+    /** Show toast bar after hiding a namespace via the x button */
+    function showHideToast(namespace, previousPattern) {
+        if (!$el)
+            return;
+        lastHiddenPattern = previousPattern;
+        const toast = $el.find('.gg-toast').get(0);
+        if (!toast)
+            return;
+        // Split namespace into segments with delimiters (same logic as log row rendering)
+        const parts = namespace.split(/([:/@ \-_])/);
+        const segments = [];
+        const delimiters = [];
+        for (let i = 0; i < parts.length; i++) {
+            if (i % 2 === 0) {
+                if (parts[i])
+                    segments.push(parts[i]);
+            }
+            else {
+                delimiters.push(parts[i]);
+            }
+        }
+        // Build clickable segment HTML
+        let nsHTML = '';
+        for (let i = 0; i < segments.length; i++) {
+            const segment = escapeHtml(segments[i]);
+            // Build filter pattern for this segment level
+            let segFilter = '';
+            for (let j = 0; j <= i; j++) {
+                segFilter += segments[j];
+                if (j < i) {
+                    segFilter += delimiters[j];
+                }
+                else if (j < segments.length - 1) {
+                    segFilter += delimiters[j] + '*';
+                }
+            }
+            nsHTML += `<span class="gg-toast-segment" data-filter="${escapeHtml(segFilter)}">${segment}</span>`;
+            if (i < segments.length - 1) {
+                nsHTML += `<span class="gg-toast-delim">${escapeHtml(delimiters[i])}</span>`;
+            }
+        }
+        // Auto-expand explanation on first use
+        const showExplanation = !hasSeenToastExplanation;
+        toast.innerHTML =
+            `<button class="gg-toast-btn gg-toast-dismiss" title="Dismiss">\u00d7</button>` +
+                `<span class="gg-toast-label">Hidden:</span>` +
+                `<span class="gg-toast-ns">${nsHTML}</span>` +
+                `<span class="gg-toast-actions">` +
+                `<button class="gg-toast-btn gg-toast-undo">Undo</button>` +
+                `<button class="gg-toast-btn gg-toast-help" title="Toggle help">?</button>` +
+                `</span>` +
+                `<div class="gg-toast-explanation${showExplanation ? ' visible' : ''}">` +
+                `Click a segment above to hide all matching namespaces (e.g. click "api" to hide gg:api:*). ` +
+                `Tip: you can also right-click any segment in the log to hide it directly.` +
+                `</div>`;
+        toast.classList.add('visible');
+        if (showExplanation) {
+            hasSeenToastExplanation = true;
+        }
+    }
+    /** Dismiss the toast bar */
+    function dismissToast() {
+        if (!$el)
+            return;
+        const toast = $el.find('.gg-toast').get(0);
+        if (toast) {
+            toast.classList.remove('visible');
+        }
+        lastHiddenPattern = null;
+    }
+    /** Undo the last namespace hide */
+    function undoHide() {
+        if (!$el || lastHiddenPattern === null)
+            return;
+        // Restore the previous filter pattern
+        filterPattern = lastHiddenPattern;
+        localStorage.setItem(FILTER_KEY, filterPattern);
+        // Sync enabledNamespaces from the restored pattern
+        enabledNamespaces.clear();
+        const effectivePattern = filterPattern || 'gg:*';
+        getAllCapturedNamespaces().forEach((ns) => {
+            if (namespaceMatchesPattern(ns, effectivePattern)) {
+                enabledNamespaces.add(ns);
+            }
+        });
+        dismissToast();
+        renderFilterUI();
+        renderLogs();
+    }
+    /** Wire up toast event handlers (called once after init) */
+    function wireUpToast() {
+        if (!$el)
+            return;
+        const toast = $el.find('.gg-toast').get(0);
+        if (!toast)
+            return;
+        toast.addEventListener('click', (e) => {
+            const target = e.target;
+            // Undo button
+            if (target.classList?.contains('gg-toast-undo')) {
+                undoHide();
+                return;
+            }
+            // Dismiss button
+            if (target.classList?.contains('gg-toast-dismiss')) {
+                dismissToast();
+                return;
+            }
+            // Help toggle
+            if (target.classList?.contains('gg-toast-help')) {
+                const explanation = toast.querySelector('.gg-toast-explanation');
+                if (explanation) {
+                    explanation.classList.toggle('visible');
+                }
+                return;
+            }
+            // Segment click: add exclusion for that pattern
+            if (target.classList?.contains('gg-toast-segment')) {
+                const filter = target.getAttribute('data-filter');
+                if (!filter)
+                    return;
+                // Add exclusion pattern (same logic as right-click segment)
+                const currentPattern = filterPattern || 'gg:*';
+                const exclusion = `-${filter}`;
+                const parts = currentPattern.split(',').map((p) => p.trim());
+                if (parts.includes(exclusion)) {
+                    // Already excluded, toggle off
+                    filterPattern = parts.filter((p) => p !== exclusion).join(',') || 'gg:*';
+                }
+                else {
+                    const hasInclusion = parts.some((p) => !p.startsWith('-'));
+                    if (hasInclusion) {
+                        filterPattern = `${currentPattern},${exclusion}`;
+                    }
+                    else {
+                        filterPattern = `gg:*,${exclusion}`;
+                    }
+                }
+                filterPattern = simplifyPattern(filterPattern);
+                // Sync enabledNamespaces
+                enabledNamespaces.clear();
+                const effectivePattern = filterPattern || 'gg:*';
+                getAllCapturedNamespaces().forEach((ns) => {
+                    if (namespaceMatchesPattern(ns, effectivePattern)) {
+                        enabledNamespaces.add(ns);
+                    }
+                });
+                localStorage.setItem(FILTER_KEY, filterPattern);
+                dismissToast();
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+        });
+    }
     function wireUpExpanders() {
         if (!$el || expanderAttached)
             return;
@@ -1258,6 +1616,16 @@ export function createGgPlugin(options, gg) {
             return;
         containerEl.addEventListener('click', (e) => {
             const target = e.target;
+            // Handle reset filter button (shown when all logs filtered out)
+            if (target?.classList?.contains('gg-reset-filter-btn')) {
+                filterPattern = 'gg:*';
+                enabledNamespaces.clear();
+                getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
+                localStorage.setItem(FILTER_KEY, filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
             // Handle expand/collapse
             if (target?.classList?.contains('gg-expand')) {
                 const index = target.getAttribute('data-index');
@@ -1282,40 +1650,47 @@ 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')) {
-                const iconsDiv = target.closest('.gg-log-icons');
-                const namespace = iconsDiv?.getAttribute('data-namespace');
-                if (!namespace)
+            // Handle clicking namespace segments - always filter
+            if (target?.classList?.contains('gg-ns-segment')) {
+                const filter = target.getAttribute('data-filter');
+                if (!filter)
                     return;
-                if (target.classList.contains('gg-icon-hide')) {
-                    toggleNamespace(namespace, false);
+                // Toggle behavior: if already at this filter, restore all
+                if (filterPattern === filter) {
+                    filterPattern = 'gg:*';
+                    enabledNamespaces.clear();
+                    getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
                 }
                 else {
-                    soloNamespace(namespace);
+                    filterPattern = filter;
+                    enabledNamespaces.clear();
+                    getAllCapturedNamespaces()
+                        .filter((ns) => namespaceMatchesPattern(ns, filter))
+                        .forEach((ns) => enabledNamespaces.add(ns));
                 }
                 localStorage.setItem(FILTER_KEY, filterPattern);
                 renderFilterUI();
                 renderLogs();
                 return;
             }
-            // Handle clicking diff/ns cells to solo (same as 🎯)
-            if (target?.classList?.contains('gg-solo-target')) {
+            // Handle clicking time diff to open in editor
+            if (target?.classList?.contains('gg-log-diff') && target.hasAttribute('data-file')) {
+                handleNamespaceClick(target);
+                return;
+            }
+            // Handle clicking hide button for namespace
+            if (target?.classList?.contains('gg-ns-hide')) {
                 const namespace = target.getAttribute('data-namespace');
                 if (!namespace)
                     return;
-                soloNamespace(namespace);
+                // Save current pattern for undo before hiding
+                const previousPattern = filterPattern;
+                toggleNamespace(namespace, false);
                 localStorage.setItem(FILTER_KEY, filterPattern);
                 renderFilterUI();
                 renderLogs();
+                // Show toast with undo option
+                showHideToast(namespace, previousPattern);
                 return;
             }
             // Clicking background (container or grid, not a log element) restores all
@@ -1330,6 +1705,116 @@ export function createGgPlugin(options, gg) {
                 renderLogs();
             }
         });
+        // Helper: show confirmation tooltip near target element
+        function showConfirmationTooltip(containerEl, target, text) {
+            const tip = containerEl.querySelector('.gg-hover-tooltip');
+            if (!tip)
+                return;
+            tip.textContent = text;
+            tip.style.display = 'block';
+            const targetRect = target.getBoundingClientRect();
+            let left = targetRect.left;
+            let top = targetRect.bottom + 4;
+            const tipRect = tip.getBoundingClientRect();
+            if (left + tipRect.width > window.innerWidth) {
+                left = window.innerWidth - tipRect.width - 8;
+            }
+            if (left < 4)
+                left = 4;
+            if (top + tipRect.height > window.innerHeight) {
+                top = targetRect.top - tipRect.height - 4;
+            }
+            tip.style.left = `${left}px`;
+            tip.style.top = `${top}px`;
+            setTimeout(() => {
+                tip.style.display = 'none';
+            }, 1500);
+        }
+        // Right-click context actions
+        containerEl.addEventListener('contextmenu', (e) => {
+            const target = e.target;
+            // Right-click namespace segment: hide that pattern
+            if (target?.classList?.contains('gg-ns-segment')) {
+                const filter = target.getAttribute('data-filter');
+                if (!filter)
+                    return;
+                e.preventDefault();
+                // Add exclusion pattern: keep current base, add -<pattern>
+                const currentPattern = filterPattern || 'gg:*';
+                const exclusion = `-${filter}`;
+                // Check if already excluded (toggle off)
+                const parts = currentPattern.split(',').map((p) => p.trim());
+                if (parts.includes(exclusion)) {
+                    // Remove the exclusion to un-hide
+                    filterPattern = parts.filter((p) => p !== exclusion).join(',') || 'gg:*';
+                }
+                else {
+                    // Ensure we have a base inclusion pattern
+                    const hasInclusion = parts.some((p) => !p.startsWith('-'));
+                    if (hasInclusion) {
+                        filterPattern = `${currentPattern},${exclusion}`;
+                    }
+                    else {
+                        filterPattern = `gg:*,${exclusion}`;
+                    }
+                }
+                filterPattern = simplifyPattern(filterPattern);
+                // Sync enabledNamespaces from the new pattern
+                enabledNamespaces.clear();
+                const effectivePattern = filterPattern || 'gg:*';
+                getAllCapturedNamespaces().forEach((ns) => {
+                    if (namespaceMatchesPattern(ns, effectivePattern)) {
+                        enabledNamespaces.add(ns);
+                    }
+                });
+                localStorage.setItem(FILTER_KEY, filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+            // Right-click time diff: copy file location to clipboard
+            if (target?.classList?.contains('gg-log-diff') && target.hasAttribute('data-file')) {
+                e.preventDefault();
+                const file = target.getAttribute('data-file') || '';
+                const line = target.getAttribute('data-line');
+                const col = target.getAttribute('data-col');
+                const formatted = formatString(activeFormat(), file, line, col);
+                navigator.clipboard.writeText(formatted).then(() => {
+                    showConfirmationTooltip(containerEl, target, `Copied: ${formatted}`);
+                });
+                return;
+            }
+            // Right-click message area: copy that single message
+            const contentEl = target?.closest?.('.gg-log-content');
+            if (contentEl) {
+                const entryEl = contentEl.closest('.gg-log-entry');
+                const entryIdx = entryEl?.getAttribute('data-entry');
+                if (entryIdx === null || entryIdx === undefined)
+                    return;
+                const entry = renderedEntries[Number(entryIdx)];
+                if (!entry)
+                    return;
+                e.preventDefault();
+                const time = new Date(entry.timestamp).toISOString().slice(11, 19);
+                const ns = entry.namespace.trim().replace(/^gg:/, '');
+                // Include expression suffix when toggle is enabled
+                const hasSrcExpr = !entry.level && entry.src?.trim() && !/^['"`]/.test(entry.src);
+                const exprSuffix = showExpressions && hasSrcExpr ? ` \u2039${entry.src}\u203A` : '';
+                const argsStr = entry.args
+                    .map((arg) => {
+                    if (typeof arg === 'object' && arg !== null) {
+                        return JSON.stringify(arg);
+                    }
+                    return stripAnsi(String(arg));
+                })
+                    .join(' ');
+                const text = `${time} ${ns} ${argsStr}${exprSuffix}`;
+                navigator.clipboard.writeText(text).then(() => {
+                    showConfirmationTooltip(containerEl, contentEl, 'Copied message');
+                });
+                return;
+            }
+        });
         // 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.
@@ -1394,6 +1879,57 @@ export function createGgPlugin(options, gg) {
             if (tip)
                 tip.style.display = 'none';
         });
+        // Tooltip for time diff (open-in-editor action)
+        containerEl.addEventListener('mouseover', (e) => {
+            const target = e.target;
+            if (!target?.classList?.contains('gg-log-diff'))
+                return;
+            if (!target.hasAttribute('data-file'))
+                return;
+            const file = target.getAttribute('data-file') || '';
+            const line = target.getAttribute('data-line') || '1';
+            const col = target.getAttribute('data-col') || '1';
+            const tip = containerEl.querySelector('.gg-hover-tooltip');
+            if (!tip)
+                return;
+            // Build tooltip content
+            let actionText;
+            if (nsClickAction === 'open' && DEV) {
+                actionText = `Open in editor: ${file}:${line}:${col}`;
+            }
+            else if (nsClickAction === 'open-url') {
+                actionText = `Open URL: ${formatString(activeFormat(), file, line, col)}`;
+            }
+            else {
+                actionText = `Copy: ${formatString(activeFormat(), file, line, col)}`;
+            }
+            tip.textContent = actionText;
+            tip.style.display = 'block';
+            // Position below the target
+            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 (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;
+            if (!target?.classList?.contains('gg-log-diff'))
+                return;
+            const tip = containerEl.querySelector('.gg-hover-tooltip');
+            if (tip)
+                tip.style.display = 'none';
+        });
         expanderAttached = true;
     }
     function wireUpResize() {
@@ -1447,26 +1983,66 @@ export function createGgPlugin(options, gg) {
         if (!$el)
             return;
         const logContainer = $el.find('.gg-log-container');
-        const countSpan = $el.find('.gg-count');
-        if (!logContainer.length || !countSpan.length)
+        const copyCountSpan = $el.find('.gg-copy-count');
+        if (!logContainer.length || !copyCountSpan.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
-            ? `${entries.length} entries`
-            : `${entries.length} / ${allEntries.length} entries`;
-        countSpan.html(countText);
+            ? `Copy ${entries.length} ${entries.length === 1 ? 'entry' : 'entries'}`
+            : `Copy ${entries.length} / ${allEntries.length} ${entries.length === 1 ? 'entry' : 'entries'}`;
+        copyCountSpan.html(countText);
         if (entries.length === 0) {
-            logContainer.html('<div style="padding: 20px; text-align: center; opacity: 0.5;">No logs captured yet. Call gg() to see output here.</div>');
+            const hasFilteredLogs = allEntries.length > 0;
+            const message = hasFilteredLogs
+                ? `All ${allEntries.length} logs filtered out.`
+                : 'No logs captured yet. Call gg() to see output here.';
+            const resetButton = hasFilteredLogs
+                ? '<button class="gg-reset-filter-btn" style="margin-top: 12px; padding: 10px 20px; cursor: pointer; border: 1px solid #2196F3; background: #2196F3; color: white; border-radius: 6px; font-size: 13px; font-weight: 500; transition: background 0.2s;">Show all logs (gg:*)</button>'
+                : '';
+            logContainer.html(`<div style="padding: 20px; text-align: center; opacity: 0.5;">${message}<div>${resetButton}</div></div>`);
             return;
         }
-        const logsHTML = `<div class="gg-log-grid" style="grid-template-columns: ${gridColumns()};">${entries
+        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)}`;
-            const ns = escapeHtml(entry.namespace);
+            // 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 = '';
@@ -1490,7 +2066,7 @@ export function createGgPlugin(options, gg) {
                     return `<tr>${cells}</tr>`;
                 })
                     .join('');
-                argsHTML = `<table style="border-collapse: collapse; margin: 2px 0; font-family: monospace;"><thead><tr>${headerCells}</tr></thead><tbody>${bodyRowsHtml}</tbody></table>`;
+                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
@@ -1507,7 +2083,11 @@ export function createGgPlugin(options, gg) {
                         // 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>`;
+                        // 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
@@ -1521,33 +2101,11 @@ export function createGgPlugin(options, gg) {
                 })
                     .join(' ');
             }
-            // Filter icons column (only when expanded)
-            const iconsCol = filterExpanded
-                ? `<div class="gg-log-icons" data-namespace="${ns}">` +
-                    `<button class="gg-icon-hide" title="Hide this namespace">🗑</button>` +
-                    `<button class="gg-icon-solo" title="Show only this namespace">🎯</button>` +
-                    `</div>`
-                : '';
-            // When filter expanded, diff+ns are clickable (solo) with data-namespace
-            const soloAttr = filterExpanded ? ` data-namespace="${ns}"` : '';
-            const soloClass = filterExpanded ? ' gg-solo-target' : '';
+            // 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}"` : '';
-            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)}"` : '';
             // Level class for info/warn/error styling
             const levelClass = entry.level === 'info'
                 ? ' gg-level-info'
@@ -1565,14 +2123,19 @@ export function createGgPlugin(options, gg) {
                         `<div class="gg-stack-content" data-stack-id="${stackId}">${escapeHtml(entry.stack)}</div>`;
             }
             // Desktop: grid layout, Mobile: stacked layout
-            return (`<div class="gg-log-entry${levelClass}">` +
+            // 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">` +
-                iconsCol +
-                `<div class="gg-log-diff${soloClass}" style="color: ${color};"${soloAttr}>${diff}</div>` +
-                `<div class="gg-log-ns${soloClass}" style="color: ${color};"${soloAttr}${fileAttr}${lineAttr}${colAttr}${fileTitle}>${ns}</div>` +
+                `<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"${!entry.level && entry.src?.trim() && !/^['"`]/.test(entry.src) ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${argsHTML}${stackHTML}</div>` +
+                `<div class="gg-log-content"${hasSrcExpr ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${argsHTML}${inlineExprForPrimitives}${stackHTML}</div>` +
                 detailsHTML +
                 `</div>`);
         })

package/package.json

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