@leftium/gg 0.0.39 → 0.0.40

package/dist/eruda/plugin.js

@@ -205,6 +205,41 @@ export function createGgPlugin(options, gg) {
             }
         });
     }
+    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();
+        const effectivePattern = filterPattern || 'gg:*';
+        allNamespaces.forEach((ns) => {
+            if (namespaceMatchesPattern(ns, effectivePattern)) {
+                enabledNamespaces.add(ns);
+            }
+        });
+        // Persist the new pattern
+        localStorage.setItem(FILTER_KEY, filterPattern);
+    }
     function soloNamespace(namespace) {
         const ns = namespace.trim();
         // Toggle: if already soloed on this namespace, restore all
@@ -377,6 +412,20 @@ export function createGgPlugin(options, gg) {
 			.gg-log-ns[data-file]:hover::after {
 				opacity: 1;
 			}
+		/* Clickable namespace segments */
+		.gg-ns-segment {
+			cursor: pointer;
+			padding: 1px 2px;
+			border-radius: 2px;
+			transition: background 0.1s;
+		}
+		/* Only show segment hover styling when in filter mode */
+		.gg-log-grid.filter-mode .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;
@@ -870,6 +919,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,24 +970,50 @@ 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
+					${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>
+								<span>${escapeHtml(ns)} (${count})</span>
 							</label>
 						`;
                 })
                     .join('')}
+					${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>
 			`;
             }
@@ -1282,6 +1370,38 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
+            // Handle clicking namespace segments
+            if (target?.classList?.contains('gg-ns-segment')) {
+                // When filter is collapsed, open in editor instead of filtering
+                if (!filterExpanded) {
+                    const nsContainer = target.closest('.gg-log-ns');
+                    if (nsContainer?.hasAttribute('data-file')) {
+                        handleNamespaceClick(nsContainer);
+                    }
+                    return;
+                }
+                // When filter is expanded, apply hierarchical filtering
+                const filter = target.getAttribute('data-filter');
+                if (!filter)
+                    return;
+                // Toggle behavior: if already at this filter, restore all
+                if (filterPattern === filter) {
+                    filterPattern = 'gg:*';
+                    enabledNamespaces.clear();
+                    getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
+                }
+                else {
+                    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 namespace to open in editor (when filter collapsed)
             if (target?.classList?.contains('gg-log-ns') &&
                 target.hasAttribute('data-file') &&
@@ -1462,11 +1582,45 @@ export function createGgPlugin(options, gg) {
             logContainer.html('<div style="padding: 20px; text-align: center; opacity: 0.5;">No logs captured yet. Call gg() to see output here.</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' : ''}" 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 = '';
@@ -1569,7 +1723,7 @@ export function createGgPlugin(options, gg) {
                 `<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-ns${soloClass}" style="color: ${color};" data-namespace="${escapeHtml(entry.namespace)}"${fileAttr}${lineAttr}${colAttr}${fileTitle}>${nsHTML}</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>` +

package/package.json

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