@leftium/gg 0.0.49 → 0.0.51

package/dist/eruda/plugin.js

@@ -1,6 +1,7 @@
 import { DEV } from 'esm-env';
 import { LogBuffer } from './buffer.js';
 import { Virtualizer, elementScroll, observeElementOffset, observeElementRect, measureElement } from '@tanstack/virtual-core';
+import { matchesGlob, matchesPattern as _matchesPattern } from '../pattern.js';
 const _ggCallSitesPlugin = typeof __GG_TAG_PLUGIN__ !== 'undefined' ? __GG_TAG_PLUGIN__ : false;
 /**
  * Creates the gg Eruda plugin
@@ -9,7 +10,10 @@ const _ggCallSitesPlugin = typeof __GG_TAG_PLUGIN__ !== 'undefined' ? __GG_TAG_P
  * Methods: $el.html(), $el.show(), $el.hide(), $el.find(), $el.on()
  */
 export function createGgPlugin(options, gg) {
-    const buffer = new LogBuffer(options.maxEntries ?? 2000);
+    const _savedCap = typeof localStorage !== 'undefined'
+        ? parseInt(localStorage.getItem('gg-buffer-cap') ?? '', 10)
+        : NaN;
+    const buffer = new LogBuffer(!isNaN(_savedCap) && _savedCap > 0 ? _savedCap : (options.maxEntries ?? 2000));
     // The licia jQuery-like wrapper Eruda passes to init()
     let $el = null;
     let expanderAttached = false;
@@ -17,7 +21,6 @@ export function createGgPlugin(options, gg) {
     // null = auto (fit content), number = user-dragged px width
     let nsColWidth = null;
     // Filter UI state
-    let filterExpanded = false;
     let filterPattern = '';
     const enabledNamespaces = new Set();
     // Virtual scroll: filtered indices into the buffer (the "rows" the virtualizer sees)
@@ -29,16 +32,36 @@ export function createGgPlugin(options, gg) {
     // stack IDs (e.g. "stack-42") for stack traces.
     const expandedDetails = new Set();
     const expandedStacks = new Set();
-    // Toast state for "namespace hidden" feedback
+    // Toast state
     let lastHiddenPattern = null; // filterPattern before the hide (for undo)
+    let lastDroppedPattern = null; // keepPattern before the drop (for undo)
+    let lastKeptPattern = null; // keepPattern before the [+] keep (for undo)
+    let lastKeptNamespaceInfo = null; // sentinel entry to restore on undo
+    let toastMode = 'hide'; // which layer the current toast targets
     let hasSeenToastExplanation = false; // first toast auto-expands help text
+    // Sentinel section debounce: pending rAF for re-rendering dropped sentinels
+    let sentinelRenderPending = false;
+    // Whether the sentinel section is expanded (persists across re-renders)
+    let sentinelExpanded = true;
     // Settings UI state
     let settingsExpanded = false;
+    // Layer 1: Keep gate pattern ('gg-keep') — controls which loggs enter the ring buffer.
+    // Default 'gg:*' (keep all gg namespaces). Users narrow it to reduce buffer pressure.
+    let keepPattern = 'gg:*';
+    // Native console output toggle ('gg-console')
+    // Default: true (gg works without Eruda), but Eruda flips it to false on init
+    // unless the user has explicitly set it.
+    let ggConsoleEnabled = true;
     // Expression visibility toggle
     let showExpressions = false;
-    // Filter pattern persistence key (independent of localStorage.debug)
-    const FILTER_KEY = 'gg-filter';
+    // Filter pattern persistence keys
+    const SHOW_KEY = 'gg-show'; // Layer 2: which kept loggs to display in panel + console
+    const KEEP_KEY = 'gg-keep'; // Layer 1: which loggs enter the ring buffer
+    const CONSOLE_KEY = 'gg-console'; // Whether shown loggs also go to native console
     const SHOW_EXPRESSIONS_KEY = 'gg-show-expressions';
+    const BUFFER_CAP_KEY = 'gg-buffer-cap'; // Ring buffer capacity (maxEntries)
+    // Backward-compat alias (old key name — ignored after migration)
+    const LEGACY_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';
@@ -50,6 +73,11 @@ export function createGgPlugin(options, gg) {
     let pendingEntries = []; // new entries since last render
     // All namespaces ever seen (maintained incrementally, avoids scanning buffer)
     const allNamespacesSet = new Set();
+    // Phase 2: loggs dropped by the keep gate, tracked outside the ring buffer.
+    // Key: namespace string. Grows with distinct dropped namespaces (expected: tens, not thousands).
+    const droppedNamespaces = new Map();
+    // Total loggs ever received (kept + dropped).
+    let receivedTotal = 0;
     // Plugin detection state (probed once at init)
     let openInEditorPluginDetected = null; // null = not yet probed
     // Editor bins for launch-editor (common first, then alphabetical)
@@ -126,8 +154,7 @@ export function createGgPlugin(options, gg) {
     function formatEntryForClipboard(entry, includeExpressions) {
         // Extract HH:MM:SS.mmm from timestamp (with milliseconds)
         const time = new Date(entry.timestamp).toISOString().slice(11, 23);
-        // Trim namespace and strip 'gg:' prefix to save tokens
-        const ns = entry.namespace.trim().replace(/^gg:/, '');
+        const ns = entry.namespace.trim();
         // Include expression on its own line above the value when toggle is enabled
         const hasSrcExpr = !entry.level && entry.src?.trim() && !/^['"`]/.test(entry.src);
         const exprLine = includeExpressions && hasSrcExpr ? `\u2039${entry.src}\u203A\n` : '';
@@ -147,18 +174,77 @@ export function createGgPlugin(options, gg) {
         name: 'GG',
         init($container) {
             $el = $container;
-            // Load filter state BEFORE registering _onLog hook, because setting _onLog
+            // Load filter state BEFORE registering _onLog hook, because registering
             // triggers replay of earlyLogBuffer and each entry checks filterPattern
-            filterPattern = localStorage.getItem(FILTER_KEY) || 'gg:*';
+            const _legacyFilter = localStorage.getItem(LEGACY_FILTER_KEY);
+            filterPattern = localStorage.getItem(SHOW_KEY) || _legacyFilter || 'gg:*';
+            keepPattern = localStorage.getItem(KEEP_KEY) || 'gg:*';
             showExpressions = localStorage.getItem(SHOW_EXPRESSIONS_KEY) === 'true';
-            // Register the capture hook on gg
+            // gg-console: Eruda flips to false on init, unless user explicitly set it.
+            // This lets gg work zero-config (console output enabled) before Eruda loads,
+            // while silencing the noise when the Eruda panel is in use.
+            const userSetConsole = localStorage.getItem(CONSOLE_KEY);
+            if (userSetConsole === null) {
+                // Not explicitly set — Eruda auto-flips to false
+                localStorage.setItem(CONSOLE_KEY, 'false');
+                ggConsoleEnabled = false;
+            }
+            else {
+                ggConsoleEnabled = userSetConsole !== 'false';
+            }
+            // Tell the debug factory to reload its enabled state from gg-show/gg-console.
+            // browser.ts load() now reads gg-console + gg-show instead of localStorage.debug.
+            // Re-calling enable() with the right pattern updates which namespaces output to console.
+            import('../debug/index.js').then(({ default: dbg }) => {
+                try {
+                    // Only call enable() when console output is on — enable('') would
+                    // call localStorage.removeItem('gg-show'), wiping the persisted Show filter.
+                    // When console is disabled, load() in browser.ts already returns '' via
+                    // the gg-console=false check, so no enable() call is needed.
+                    if (ggConsoleEnabled) {
+                        dbg.enable(filterPattern || 'gg:*');
+                    }
+                }
+                catch {
+                    // ignore
+                }
+            });
+            // Register the capture hook on gg (prefer multi-listener API, fall back to legacy)
             if (gg) {
-                gg._onLog = (entry) => {
+                const onEntry = (entry) => {
+                    // Track total received (before any filtering)
+                    receivedTotal++;
+                    // Layer 1: Keep gate — drop loggs that don't match gg-keep
+                    const effectiveKeep = keepPattern || 'gg:*';
+                    if (!namespaceMatchesPattern(entry.namespace, effectiveKeep)) {
+                        // Logg is dropped — not stored in ring buffer. Track it in droppedNamespaces.
+                        const typeKey = entry.level ?? 'log';
+                        const existing = droppedNamespaces.get(entry.namespace);
+                        if (existing) {
+                            existing.lastSeen = entry.timestamp;
+                            existing.total++;
+                            existing.byType[typeKey] = (existing.byType[typeKey] ?? 0) + 1;
+                            existing.preview = entry;
+                        }
+                        else {
+                            droppedNamespaces.set(entry.namespace, {
+                                namespace: entry.namespace,
+                                firstSeen: entry.timestamp,
+                                lastSeen: entry.timestamp,
+                                total: 1,
+                                byType: { [typeKey]: 1 },
+                                preview: entry
+                            });
+                        }
+                        // Schedule debounced sentinel re-render
+                        scheduleSentinelRender();
+                        return;
+                    }
                     // Track namespaces incrementally (O(1) instead of scanning buffer)
                     const isNewNamespace = !allNamespacesSet.has(entry.namespace);
                     allNamespacesSet.add(entry.namespace);
                     buffer.push(entry);
-                    // Add new namespace to enabledNamespaces if it matches the current pattern
+                    // Layer 2: Show filter — track which namespaces are currently visible
                     const effectivePattern = filterPattern || 'gg:*';
                     if (namespaceMatchesPattern(entry.namespace, effectivePattern)) {
                         enabledNamespaces.add(entry.namespace);
@@ -179,6 +265,15 @@ export function createGgPlugin(options, gg) {
                         });
                     }
                 };
+                if (gg.addLogListener) {
+                    gg.addLogListener(onEntry);
+                    // Store reference for removal on destroy
+                    gg.__ggErudaListener = onEntry;
+                }
+                else {
+                    // Legacy fallback: single-slot _onLog
+                    gg._onLog = onEntry;
+                }
             }
             // Probe for openInEditorPlugin (status 222) and auto-populate $ROOT in dev mode
             if (DEV) {
@@ -187,7 +282,7 @@ export function createGgPlugin(options, gg) {
                     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());
+                        return fetch('/__gg/project-root').then((r) => r.text());
                     }
                 })
                     .then((root) => {
@@ -209,6 +304,7 @@ export function createGgPlugin(options, gg) {
             wireUpExpanders();
             wireUpResize();
             wireUpFilterUI();
+            wireUpKeepUI();
             wireUpSettingsUI();
             wireUpToast();
             // Discard any entries queued during early-buffer replay (before the DOM
@@ -231,13 +327,22 @@ export function createGgPlugin(options, gg) {
         },
         destroy() {
             if (gg) {
-                gg._onLog = null;
+                const listener = gg
+                    .__ggErudaListener;
+                if (gg.removeLogListener && listener) {
+                    gg.removeLogListener(listener);
+                    delete gg.__ggErudaListener;
+                }
+                else {
+                    gg._onLog = null;
+                }
             }
             // Clean up virtualizer
             if (virtualizer && $el) {
                 const containerDom = $el.find('.gg-log-container').get(0);
                 if (containerDom) {
-                    const cleanup = containerDom.__ggVirtualCleanup;
+                    const cleanup = containerDom
+                        .__ggVirtualCleanup;
                     if (cleanup)
                         cleanup();
                 }
@@ -245,9 +350,39 @@ export function createGgPlugin(options, gg) {
             }
             buffer.clear();
             allNamespacesSet.clear();
+            droppedNamespaces.clear();
             filteredIndices = [];
+            receivedTotal = 0;
+        },
+        /** Returns a read-only view of the dropped-namespace tracking map (Phase 2 data layer). */
+        getDroppedNamespaces() {
+            return droppedNamespaces;
         }
     };
+    function toggleKeepNamespace(namespace, enable) {
+        const currentPattern = keepPattern || 'gg:*';
+        const ns = namespace.trim();
+        const parts = currentPattern
+            .split(',')
+            .map((p) => p.trim())
+            .filter(Boolean);
+        if (enable) {
+            // Remove exclusion — namespace is now kept
+            const filtered = parts.filter((p) => p !== `-${ns}`);
+            keepPattern = filtered.join(',') || 'gg:*';
+            // Remove from droppedNamespaces so sentinel disappears
+            droppedNamespaces.delete(ns);
+        }
+        else {
+            // Add exclusion — namespace is dropped
+            const exclusion = `-${ns}`;
+            if (!parts.includes(exclusion))
+                parts.push(exclusion);
+            keepPattern = parts.join(',');
+        }
+        keepPattern = simplifyPattern(keepPattern) || 'gg:*';
+        localStorage.setItem(KEEP_KEY, keepPattern);
+    }
     function toggleNamespace(namespace, enable) {
         const currentPattern = filterPattern || 'gg:*';
         const ns = namespace.trim();
@@ -310,21 +445,38 @@ export function createGgPlugin(options, gg) {
                 enabledNamespaces.add(ns);
             }
         });
-        // Persist the new pattern
-        localStorage.setItem(FILTER_KEY, filterPattern);
+        localStorage.setItem(SHOW_KEY, filterPattern);
     }
     function simplifyPattern(pattern) {
         if (!pattern)
             return '';
-        // Remove empty parts
-        let parts = pattern
+        // Remove empty parts and duplicates
+        const parts = Array.from(new Set(pattern
             .split(',')
             .map((p) => p.trim())
-            .filter(Boolean);
-        // Remove duplicates
-        parts = Array.from(new Set(parts));
-        // Clean up trailing/leading commas
-        return parts.join(',');
+            .filter(Boolean)));
+        const inclusions = parts.filter((p) => !p.startsWith('-'));
+        const exclusions = parts.filter((p) => p.startsWith('-'));
+        const hasWildcardBase = inclusions.includes('gg:*') || inclusions.includes('*');
+        const wildcardBase = inclusions.includes('gg:*') ? 'gg:*' : '*';
+        // If there's a wildcard base (gg:* or *), drop all other inclusions (they're subsumed)
+        const finalInclusions = hasWildcardBase ? [wildcardBase] : inclusions;
+        // Drop exclusions that are subsumed by a broader exclusion.
+        // e.g. -routes/demo-helpers.ts:validation is subsumed by -routes/demo-*
+        const finalExclusions = exclusions.filter((excl) => {
+            const exclNs = excl.slice(1); // strip leading '-'
+            // Keep this exclusion only if no other exclusion is broader and covers it
+            return !exclusions.some((other) => {
+                if (other === excl)
+                    return false;
+                const otherNs = other.slice(1);
+                return matchesGlob(exclNs, otherNs);
+            });
+        });
+        // If there's a wildcard base, also drop inclusions that match no exclusion boundary
+        // (they can't add any namespace that * doesn't already include)
+        // Final inclusions are already collapsed to ['*'] above, so nothing more to do.
+        return [...finalInclusions, ...finalExclusions].join(',');
     }
     function getAllCapturedNamespaces() {
         return Array.from(allNamespacesSet).sort();
@@ -332,54 +484,20 @@ export function createGgPlugin(options, gg) {
     function namespaceMatchesPattern(namespace, pattern) {
         if (!pattern)
             return true; // Empty pattern = show all
-        // Split by comma for OR logic
-        const parts = pattern.split(',').map((p) => p.trim());
-        let included = false;
-        let excluded = false;
-        for (const part of parts) {
-            if (part.startsWith('-')) {
-                // Exclusion pattern
-                const excludePattern = part.slice(1);
-                if (matchesGlob(namespace, excludePattern)) {
-                    excluded = true;
-                }
-            }
-            else {
-                // Inclusion pattern
-                if (matchesGlob(namespace, part)) {
-                    included = true;
-                }
-            }
-        }
-        // If no inclusion patterns, default to included
-        const hasInclusions = parts.some((p) => !p.startsWith('-'));
-        if (!hasInclusions)
-            included = true;
-        return included && !excluded;
-    }
-    function matchesGlob(str, pattern) {
-        // Trim both for comparison (namespaces may have trailing spaces from padEnd)
-        const s = str.trim();
-        const p = pattern.trim();
-        // Convert glob pattern to regex
-        const regexPattern = p
-            .replace(/[.+^${}()|[\]\\]/g, '\\$&') // Escape special chars
-            .replace(/\*/g, '.*'); // * becomes .*
-        const regex = new RegExp(`^${regexPattern}$`);
-        return regex.test(s);
+        return _matchesPattern(namespace, pattern);
     }
     function isSimplePattern(pattern) {
         if (!pattern)
             return true;
         // Simple patterns:
-        // 1. 'gg:*' with optional exclusions
-        // 2. Explicit comma-separated list of exact namespaces
+        // 1. '*' with optional exclusions (e.g. '*,-api:verbose:*')
+        // 2. Explicit comma-separated list of exact namespaces (no wildcards, no exclusions)
         const parts = pattern.split(',').map((p) => p.trim());
-        // Check if it's 'gg:*' based (with exclusions)
-        const hasWildcardBase = parts.some((p) => p === 'gg:*' || p === '*');
+        // Check if it's '*' or 'gg:*' based (with exclusions)
+        const hasWildcardBase = parts.some((p) => p === '*' || p === 'gg:*');
         if (hasWildcardBase) {
-            // All other parts must be exclusions starting with '-gg:'
-            const otherParts = parts.filter((p) => p !== 'gg:*' && p !== '*');
+            // All other parts must be plain exclusions (no wildcards in the exclusion)
+            const otherParts = parts.filter((p) => p !== '*' && p !== 'gg:*');
             return otherParts.every((p) => p.startsWith('-') && !p.includes('*', 1));
         }
         // Check if it's an explicit list (no wildcards)
@@ -393,6 +511,30 @@ export function createGgPlugin(options, gg) {
         // at a time so auto would resize based on visible subset.
         return `3.5em ${ns} 4px 1fr`;
     }
+    // ─── Inline SVG icons ────────────────────────────────────────────────────
+    // All icons use currentColor so they inherit the namespace color on log rows
+    // or the green tint on sentinel keep buttons.
+    const SVG_ATTR = `viewBox="0 0 12 12" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"`;
+    /** Eye with diagonal slash — hide from view (Layer 2 / gg-show) */
+    const ICON_HIDE = `<svg ${SVG_ATTR}>` +
+        `<path d="M1 6 C2.5 2.5 9.5 2.5 11 6 C9.5 9.5 2.5 9.5 1 6"/>` +
+        `<circle cx="6" cy="6" r="1.5" fill="currentColor" stroke="none"/>` +
+        `<line x1="9.5" y1="1.5" x2="2.5" y2="10.5"/>` +
+        `</svg>`;
+    /** Trash can — drop from buffer (Layer 1 / gg-keep) */
+    const ICON_DROP = `<svg ${SVG_ATTR}>` +
+        `<line x1="2" y1="3.5" x2="10" y2="3.5"/>` +
+        `<path d="M4.5 3.5V2.5h3v1"/>` +
+        `<path d="M3 3.5l.5 7h5l.5-7"/>` +
+        `<line x1="5" y1="5.5" x2="5" y2="9"/>` +
+        `<line x1="7" y1="5.5" x2="7" y2="9"/>` +
+        `</svg>`;
+    /** Plus inside a circle — keep in buffer (Layer 1 / gg-keep) */
+    const ICON_KEEP = `<svg ${SVG_ATTR}>` +
+        `<circle cx="6" cy="6" r="4.5"/>` +
+        `<line x1="6" y1="3.5" x2="6" y2="8.5"/>` +
+        `<line x1="3.5" y1="6" x2="8.5" y2="6"/>` +
+        `</svg>`;
     function buildHTML() {
         return `
 			<style>
@@ -458,6 +600,7 @@ export function createGgPlugin(options, gg) {
 			text-decoration-style: solid;
 			text-underline-offset: 2px;
 		}
+
 			.gg-details {
 				grid-column: 1 / -1;
 				border-top: none;
@@ -485,25 +628,213 @@ export function createGgPlugin(options, gg) {
 			text-overflow: ellipsis;
 			min-width: 0;
 		}
-	.gg-ns-hide {
+	.gg-ns-hide,
+	.gg-ns-drop {
 		all: unset;
 		cursor: pointer;
 		opacity: 0;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 1;
-		padding: 1px 4px;
-		transition: opacity 0.15s;
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 3px;
+		border-radius: 3px;
+		transition: opacity 0.15s, background 0.1s;
 		flex-shrink: 0;
 	}
-		.gg-log-ns:hover .gg-ns-hide {
-			opacity: 0.4;
+	.gg-ns-hide svg,
+	.gg-ns-drop svg,
+	.gg-sentinel-keep svg {
+		pointer-events: none;
+	}
+		.gg-log-ns:hover .gg-ns-hide,
+		.gg-log-ns:hover .gg-ns-drop {
+			opacity: 0.35;
 		}
 		.gg-ns-hide:hover {
 			opacity: 1 !important;
 			background: rgba(0,0,0,0.08);
-			border-radius: 3px;
 		}
+		.gg-ns-drop:hover {
+			opacity: 1 !important;
+			background: rgba(200,50,0,0.12);
+		}
+	/* Sentinel section: collapsible above log container */
+	.gg-sentinel-section {
+		flex-shrink: 0;
+		background: #f9f9f9;
+		border-bottom: 2px solid rgba(0,0,0,0.1);
+	}
+	.gg-sentinel-header {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 10px;
+		cursor: pointer;
+		font-size: 11px;
+		opacity: 0.6;
+		user-select: none;
+	}
+	.gg-sentinel-header:hover {
+		opacity: 1;
+		background: rgba(0,0,0,0.03);
+	}
+	.gg-sentinel-toggle {
+		font-size: 10px;
+	}
+	.gg-sentinel-rows {
+		max-height: 120px;
+		overflow-y: auto;
+	}
+	.gg-sentinel-rows.collapsed {
+		display: none;
+	}
+	.gg-sentinel-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 6px;
+		padding: 5px 10px 4px;
+		border-bottom: 1px solid rgba(0,0,0,0.04);
+		color: #888;
+		font-family: monospace;
+		font-size: 12px;
+	}
+	.gg-sentinel-row:last-child {
+		border-bottom: none;
+	}
+	.gg-sentinel-keep {
+		all: unset;
+		cursor: pointer;
+		color: #4caf50;
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 3px;
+		border-radius: 3px;
+		transition: background 0.1s;
+	}
+	.gg-sentinel-keep:hover {
+		background: rgba(76,175,80,0.15);
+	}
+	.gg-sentinel-ns {
+		font-weight: bold;
+		color: #777;
+	}
+	.gg-sentinel-count {
+		color: #999;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+	.gg-sentinel-preview {
+		color: #aaa;
+		font-style: italic;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		flex: 1;
+	}
+	/* Pipeline row */
+	.gg-pipeline {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 2px;
+		padding: 3px 2px;
+		flex-shrink: 0;
+		margin-bottom: 2px;
+	}
+	.gg-pipeline-arrow {
+		font-size: 11px;
+		opacity: 0.35;
+		flex-shrink: 0;
+		user-select: none;
+	}
+	.gg-pipeline-node {
+		font-size: 11px;
+		font-family: monospace;
+		background: rgba(0,0,0,0.06);
+		border-radius: 4px;
+		padding: 2px 6px;
+		white-space: nowrap;
+		color: #444;
+		border: none;
+		cursor: default;
+	}
+	button.gg-pipeline-node {
+		cursor: pointer;
+	}
+	button.gg-pipeline-node:hover {
+		background: rgba(0,0,0,0.11);
+	}
+	.gg-buf-size-input {
+		width: 5em;
+		font-family: monospace;
+		font-size: 11px;
+		padding: 1px 4px;
+		border: 1px solid rgba(0,0,0,0.25);
+		border-radius: 3px;
+		background: #fff;
+	}
+	.gg-pipeline-handle {
+		all: unset;
+		font-size: 10px;
+		font-family: monospace;
+		color: #888;
+		cursor: pointer;
+		padding: 1px 5px;
+		border-radius: 3px;
+		border: 1px solid rgba(0,0,0,0.15);
+		white-space: nowrap;
+		transition: background 0.1s, color 0.1s;
+		user-select: none;
+	}
+	.gg-pipeline-handle:hover,
+	.gg-pipeline-handle.active {
+		background: rgba(0,0,0,0.08);
+		color: #222;
+	}
+	.gg-pipeline-handle.active {
+		border-color: rgba(0,0,0,0.3);
+	}
+	/* Pipeline panels (keep / show) */
+	.gg-pipeline-panel {
+		flex-shrink: 0;
+		margin-bottom: 4px;
+	}
+	.gg-pipeline-panel-header {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 2px 2px 4px;
+	}
+	.gg-filter-label {
+		font-size: 11px;
+		opacity: 0.6;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+	.gg-keep-input,
+	.gg-show-input {
+		flex: 1;
+		min-width: 0;
+		padding: 3px 6px;
+		font-family: monospace;
+		font-size: 13px;
+		border: 1px solid rgba(0,0,0,0.2);
+		border-radius: 3px;
+		background: transparent;
+	}
+	.gg-filter-count {
+		font-size: 11px;
+		opacity: 0.5;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+	.gg-filter-details-body {
+		background: #f5f5f5;
+		padding: 8px 10px;
+		border-radius: 4px;
+		margin-bottom: 4px;
+	}
 	/* Toast bar for "namespace hidden" feedback */
 	.gg-toast {
 		display: none;
@@ -796,25 +1127,7 @@ export function createGgPlugin(options, gg) {
 				.gg-stack-content.expanded {
 					display: block;
 				}
-			.gg-filter-panel {
-					background: #f5f5f5;
-					padding: 10px;
-					margin-bottom: 8px;
-					border-radius: 4px;
-					flex-shrink: 0;
-					display: none;
-				}
-				.gg-filter-panel.expanded {
-					display: block;
-				}
-				.gg-filter-pattern {
-					width: 100%;
-					padding: 4px 8px;
-					font-family: monospace;
-					font-size: 16px;
-					margin-bottom: 8px;
-				}
-				.gg-filter-checkboxes {
+		.gg-filter-checkboxes {
 					display: flex;
 					flex-wrap: wrap;
 					gap: 8px;
@@ -997,11 +1310,6 @@ export function createGgPlugin(options, gg) {
 					<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;">
-				<span class="gg-btn-text">Namespaces: </span>
-				<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>
@@ -1016,9 +1324,36 @@ export function createGgPlugin(options, gg) {
 					<span class="gg-btn-icon" title="Clear">⊘</span>
 				</button>
 			</div>
-				<div class="gg-filter-panel"></div>
+		<div class="gg-pipeline">
+		<span class="gg-pipeline-node gg-pipeline-recv" title="Total loggs received by gg"></span>
+		<span class="gg-pipeline-arrow">→</span>
+		<button class="gg-pipeline-handle gg-pipeline-keep-handle" title="Edit keep filter (Layer 1: ring buffer gate)">keep</button>
+		<span class="gg-pipeline-arrow">→</span>
+		<button class="gg-pipeline-node gg-pipeline-buf" title="Click to change buffer size"></button>
+		<span class="gg-pipeline-arrow">→</span>
+		<button class="gg-pipeline-handle gg-pipeline-show-handle" title="Edit show filter (Layer 2: display filter)">show</button>
+		<span class="gg-pipeline-arrow">→</span>
+		<span class="gg-pipeline-node gg-pipeline-vis" title="Loggs currently visible"></span>
+		</div>
+		<div class="gg-pipeline-panel gg-keep-panel" style="display:none;">
+			<div class="gg-pipeline-panel-header">
+				<span class="gg-filter-label">Keep:</span>
+				<input class="gg-keep-input" type="text" value="${escapeHtml(keepPattern)}" placeholder="gg:*" title="gg-keep: which loggs enter the ring buffer">
+				<span class="gg-keep-filter-summary gg-filter-count"></span>
+			</div>
+			<div class="gg-keep-filter-panel gg-filter-details-body"></div>
+		</div>
+		<div class="gg-pipeline-panel gg-show-panel" style="display:none;">
+			<div class="gg-pipeline-panel-header">
+				<span class="gg-filter-label">Show:</span>
+				<input class="gg-show-input" type="text" value="${escapeHtml(filterPattern)}" placeholder="gg:*" title="gg-show: which kept loggs to display">
+				<span class="gg-filter-summary gg-filter-count"></span>
+			</div>
+			<div class="gg-filter-panel gg-filter-details-body"></div>
+		</div>
 				<div class="gg-settings-panel"></div>
-				<div class="gg-truncation-banner" style="display: none; padding: 6px 12px; background: #7f4f00; color: #ffe0a0; font-size: 11px; align-items: center; gap: 6px; flex-shrink: 0;"></div>
+				<div class="gg-sentinel-section" style="display: none;"></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>
@@ -1026,8 +1361,8 @@ export function createGgPlugin(options, gg) {
 		`;
     }
     function applyPatternFromInput(value) {
-        filterPattern = value;
-        localStorage.setItem(FILTER_KEY, filterPattern);
+        filterPattern = value || 'gg:*';
+        localStorage.setItem(SHOW_KEY, filterPattern);
         // Sync enabledNamespaces from the new pattern
         const allNamespaces = getAllCapturedNamespaces();
         enabledNamespaces.clear();
@@ -1037,41 +1372,62 @@ export function createGgPlugin(options, gg) {
                 enabledNamespaces.add(ns);
             }
         });
+        // Sync toolbar Show input value
+        if ($el) {
+            const showInput = $el.find('.gg-show-input').get(0);
+            if (showInput && document.activeElement !== showInput) {
+                showInput.value = filterPattern;
+            }
+        }
         renderFilterUI();
+        renderSentinelSection();
         renderLogs();
     }
+    function applyKeepPatternFromInput(value) {
+        keepPattern = value || 'gg:*';
+        localStorage.setItem(KEEP_KEY, keepPattern);
+        renderKeepUI();
+        scheduleSentinelRender();
+    }
     function wireUpFilterUI() {
         if (!$el)
             return;
-        const filterBtn = $el.find('.gg-filter-btn').get(0);
         const filterPanel = $el.find('.gg-filter-panel').get(0);
-        if (!filterBtn || !filterPanel)
+        if (!filterPanel)
             return;
         renderFilterUI();
-        // 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
-        });
-        // Wire up pattern input - apply on blur or Enter
-        filterPanel.addEventListener('blur', (e) => {
-            const target = e.target;
-            if (target.classList.contains('gg-filter-pattern')) {
-                applyPatternFromInput(target.value);
-            }
-        }, true); // useCapture for blur (doesn't bubble)
-        filterPanel.addEventListener('keydown', (e) => {
-            const target = e.target;
-            if (target.classList.contains('gg-filter-pattern') && e.key === 'Enter') {
-                applyPatternFromInput(target.value);
-                target.blur();
-            }
-        });
+        // Show handle toggles the show panel
+        const showHandle = $el.find('.gg-pipeline-show-handle').get(0);
+        const showPanel = $el.find('.gg-show-panel').get(0);
+        if (showHandle && showPanel) {
+            showHandle.addEventListener('click', () => {
+                const open = showPanel.style.display !== 'none';
+                showPanel.style.display = open ? 'none' : '';
+                showHandle.classList.toggle('active', !open);
+                // Close keep panel when opening show
+                if (!open) {
+                    const keepPanel = $el?.find('.gg-keep-panel').get(0);
+                    const keepHandle = $el?.find('.gg-pipeline-keep-handle').get(0);
+                    if (keepPanel)
+                        keepPanel.style.display = 'none';
+                    if (keepHandle)
+                        keepHandle.classList.remove('active');
+                }
+            });
+        }
+        // Wire up the Show input (blur or Enter)
+        const showInput = $el.find('.gg-show-input').get(0);
+        if (showInput) {
+            showInput.addEventListener('blur', () => {
+                applyPatternFromInput(showInput.value);
+            });
+            showInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    applyPatternFromInput(showInput.value);
+                    showInput.blur();
+                }
+            });
+        }
         // Wire up checkboxes
         filterPanel.addEventListener('change', (e) => {
             const target = e.target;
@@ -1090,8 +1446,9 @@ export function createGgPlugin(options, gg) {
                     filterPattern = `gg:*,${exclusions}`;
                     enabledNamespaces.clear();
                 }
-                localStorage.setItem(FILTER_KEY, filterPattern);
+                localStorage.setItem(SHOW_KEY, filterPattern);
                 renderFilterUI();
+                renderSentinelSection();
                 renderLogs();
                 return;
             }
@@ -1105,6 +1462,7 @@ export function createGgPlugin(options, gg) {
                 toggleNamespaces(otherNamespaces, target.checked);
                 // localStorage already saved in toggleNamespaces()
                 renderFilterUI();
+                renderSentinelSection();
                 renderLogs();
                 return;
             }
@@ -1117,96 +1475,426 @@ export function createGgPlugin(options, gg) {
                 toggleNamespace(namespace, target.checked);
                 // Re-render to update UI
                 renderFilterUI();
+                renderSentinelSection();
                 renderLogs();
             }
         });
     }
+    /** Update the three pipeline node labels with current counts. */
+    function renderPipelineUI() {
+        if (!$el)
+            return;
+        const keptNs = allNamespacesSet.size;
+        const droppedNs = droppedNamespaces.size;
+        const totalNs = keptNs + droppedNs;
+        const visNs = enabledNamespaces.size;
+        // recv node: "N total loggs" (no ns count — it moves to the keep button)
+        const recvNode = $el.find('.gg-pipeline-recv').get(0);
+        if (recvNode) {
+            recvNode.textContent = `${receivedTotal} total loggs`;
+        }
+        // keep handle: "keep N/N namespaces" (kept ns / total ns ever seen)
+        const keepHandle = $el.find('.gg-pipeline-keep-handle').get(0);
+        if (keepHandle) {
+            const countStr = totalNs ? ` ${keptNs}/${totalNs} namespaces` : '';
+            // Preserve active class — only update text content
+            keepHandle.textContent = `keep${countStr}`;
+        }
+        // buf node: buffer.size / buffer.capacity (no ns count — moved to keep button)
+        const bufNode = $el.find('.gg-pipeline-buf').get(0);
+        if (bufNode) {
+            const bufSize = buffer.size;
+            const bufCap = buffer.capacity;
+            const full = bufSize >= bufCap;
+            bufNode.textContent = full ? `${bufSize}/${bufCap} ⚠` : `${bufSize}/${bufCap}`;
+            bufNode.style.color = full ? '#b94' : '';
+        }
+        // show handle: "show N/N namespaces" (visible ns / kept ns)
+        const showHandle = $el.find('.gg-pipeline-show-handle').get(0);
+        if (showHandle) {
+            const countStr = keptNs ? ` ${visNs}/${keptNs} namespaces` : '';
+            showHandle.textContent = `show${countStr}`;
+        }
+        // vis node: "N loggs shown" (no ns count — moved to show button)
+        const visNode = $el.find('.gg-pipeline-vis').get(0);
+        if (visNode) {
+            visNode.textContent = `${filteredIndices.length} loggs shown`;
+        }
+    }
     function renderFilterUI() {
         if (!$el)
             return;
+        renderPipelineUI();
         const allNamespaces = getAllCapturedNamespaces();
         const enabledCount = enabledNamespaces.size;
         const totalCount = allNamespaces.length;
-        // Update button summary with count of enabled namespaces
+        // Sync input value (may have changed via hide/undo/right-click)
+        const showInput = $el.find('.gg-show-input').get(0);
+        if (showInput && document.activeElement !== showInput)
+            showInput.value = filterPattern;
+        // Update count in summary
         const filterSummary = $el.find('.gg-filter-summary').get(0);
-        if (filterSummary) {
+        if (filterSummary)
             filterSummary.textContent = `${enabledCount}/${totalCount}`;
-        }
-        // Update panel
+        // Always render panel body — <details> open state handles visibility
         const filterPanel = $el.find('.gg-filter-panel').get(0);
         if (!filterPanel)
             return;
-        if (filterExpanded) {
-            // Show panel
-            filterPanel.classList.add('expanded');
-            // Render expanded view
-            const allNamespaces = getAllCapturedNamespaces();
-            const simple = isSimplePattern(filterPattern);
-            const effectivePattern = filterPattern || '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>
-				${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)} (${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>
-		`;
-            }
-            else if (!simple) {
-                checkboxesHTML = `<div style="opacity: 0.6; font-size: 11px; margin: 8px 0;">⚠️ Complex pattern - edit manually (quick filters disabled)</div>`;
-            }
-            filterPanel.innerHTML = `
-			<div style="margin-bottom: 8px;">
-				<input type="text" class="gg-filter-pattern" value="${escapeHtml(filterPattern)}" placeholder="gg:*" style="width: 100%;">
-			</div>
-			${checkboxesHTML}
-		`;
+        const simple = isSimplePattern(filterPattern);
+        const effectivePattern = filterPattern || 'gg:*';
+        if (simple && allNamespaces.length > 0) {
+            const allChecked = enabledCount === totalCount;
+            const allEntries = buffer.getEntries();
+            const nsCounts = new Map();
+            allEntries.forEach((entry) => {
+                nsCounts.set(entry.namespace, (nsCounts.get(entry.namespace) || 0) + 1);
+            });
+            const sortedAll = [...allNamespaces].sort((a, b) => (nsCounts.get(b) || 0) - (nsCounts.get(a) || 0));
+            const displayed = sortedAll.slice(0, 5);
+            const displayedSet = new Set(displayed);
+            const others = allNamespaces.filter((ns) => !displayedSet.has(ns));
+            const otherChecked = others.some((ns) => enabledNamespaces.has(ns));
+            const otherCount = others.reduce((sum, ns) => sum + (nsCounts.get(ns) || 0), 0);
+            filterPanel.innerHTML =
+                `<div style="font-size: 11px; opacity: 0.6; margin-bottom: 6px;">Layer 2: controls which kept loggs are displayed.</div>` +
+                    `<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>` +
+                    displayed
+                        .map((ns) => {
+                        const checked = namespaceMatchesPattern(ns, effectivePattern);
+                        return `<label class="gg-filter-checkbox"><input type="checkbox" class="gg-ns-checkbox" data-namespace="${escapeHtml(ns)}" ${checked ? 'checked' : ''}><span>${escapeHtml(ns)} (${nsCounts.get(ns) || 0})</span></label>`;
+                    })
+                        .join('') +
+                    (others.length > 0
+                        ? `<label class="gg-filter-checkbox" style="opacity: 0.7;"><input type="checkbox" class="gg-other-checkbox" ${otherChecked ? 'checked' : ''} data-other-namespaces='${JSON.stringify(others)}'><span>other (${otherCount})</span></label>`
+                        : '') +
+                    `</div>`;
+        }
+        else if (!simple) {
+            filterPanel.innerHTML = `<div style="opacity: 0.6; font-size: 11px;">⚠️ Complex pattern — edit directly in the input above</div>`;
         }
         else {
-            // Hide panel
-            filterPanel.classList.remove('expanded');
+            filterPanel.innerHTML = '';
+        }
+    }
+    /** Render the Keep filter UI (count + panel body) */
+    function renderKeepUI() {
+        if (!$el)
+            return;
+        renderPipelineUI();
+        const droppedCount = droppedNamespaces.size;
+        const keptCount = allNamespacesSet.size;
+        const totalCount = keptCount + droppedCount;
+        // Sync input value
+        const keepInput = $el.find('.gg-keep-input').get(0);
+        if (keepInput && document.activeElement !== keepInput)
+            keepInput.value = keepPattern;
+        // Update count in summary (keep panel header)
+        const keepSummary = $el.find('.gg-keep-filter-summary').get(0);
+        if (keepSummary)
+            keepSummary.textContent = `${keptCount}/${totalCount}`;
+        // Always render panel body — <details> open state handles visibility
+        const keepPanel = $el.find('.gg-keep-filter-panel').get(0);
+        if (!keepPanel)
+            return;
+        const simple = isSimplePattern(keepPattern);
+        const allKept = [...allNamespacesSet].sort();
+        const allDropped = [...droppedNamespaces.keys()].sort();
+        // Also extract namespaces explicitly excluded in keepPattern itself — these may
+        // never have sent a logg so they won't be in allNamespacesSet or droppedNamespaces
+        const patternExcluded = (keepPattern || 'gg:*')
+            .split(',')
+            .map((p) => p.trim())
+            .filter((p) => p.startsWith('-') && p.length > 1)
+            .map((p) => p.slice(1));
+        const allNs = [...new Set([...allKept, ...allDropped, ...patternExcluded])];
+        if (simple && allNs.length > 0) {
+            const allChecked = droppedCount === 0;
+            const effectiveKeep = keepPattern || 'gg:*';
+            // Count loggs per namespace (kept + dropped combined for context)
+            const allEntries = buffer.getEntries();
+            const nsCounts = new Map();
+            allEntries.forEach((entry) => {
+                nsCounts.set(entry.namespace, (nsCounts.get(entry.namespace) || 0) + 1);
+            });
+            // Also add dropped counts
+            droppedNamespaces.forEach((info, ns) => {
+                nsCounts.set(ns, (nsCounts.get(ns) || 0) + info.total);
+            });
+            const sorted = allNs.sort((a, b) => (nsCounts.get(b) || 0) - (nsCounts.get(a) || 0));
+            const displayed = sorted.slice(0, 5);
+            const displayedSet = new Set(displayed);
+            const others = allNs.filter((ns) => !displayedSet.has(ns));
+            const otherKept = others.filter((ns) => namespaceMatchesPattern(ns, effectiveKeep));
+            const otherCount = others.reduce((sum, ns) => sum + (nsCounts.get(ns) || 0), 0);
+            keepPanel.innerHTML =
+                `<div style="font-size: 11px; opacity: 0.6; margin-bottom: 6px;">Layer 1: controls which loggs enter the ring buffer.</div>` +
+                    `<div class="gg-filter-checkboxes">` +
+                    `<label class="gg-filter-checkbox" style="font-weight: bold;"><input type="checkbox" class="gg-keep-all-checkbox" ${allChecked ? 'checked' : ''}><span>ALL</span></label>` +
+                    displayed
+                        .map((ns) => {
+                        const checked = namespaceMatchesPattern(ns, effectiveKeep);
+                        return `<label class="gg-filter-checkbox"><input type="checkbox" class="gg-keep-ns-checkbox" data-namespace="${escapeHtml(ns)}" ${checked ? 'checked' : ''}><span>${escapeHtml(ns)} (${nsCounts.get(ns) || 0})</span></label>`;
+                    })
+                        .join('') +
+                    (others.length > 0
+                        ? `<label class="gg-filter-checkbox" style="opacity: 0.7;"><input type="checkbox" class="gg-keep-other-checkbox" ${otherKept.length > 0 ? 'checked' : ''} data-other-namespaces='${JSON.stringify(others)}'><span>other (${otherCount})</span></label>`
+                        : '') +
+                    `</div>`;
+        }
+        else if (!simple) {
+            keepPanel.innerHTML = `<div style="opacity: 0.6; font-size: 11px;">⚠️ Complex pattern — edit directly in the input above</div>`;
+        }
+        else {
+            keepPanel.innerHTML = '';
+        }
+    }
+    /** Schedule a debounced re-render of the sentinel section (via rAF) */
+    function scheduleSentinelRender() {
+        if (sentinelRenderPending)
+            return;
+        sentinelRenderPending = true;
+        requestAnimationFrame(() => {
+            sentinelRenderPending = false;
+            renderSentinelSection();
+        });
+    }
+    /** Render the dropped-namespace sentinel section above the log container */
+    function renderSentinelSection() {
+        if (!$el)
+            return;
+        const sentinelSection = $el.find('.gg-sentinel-section').get(0);
+        if (!sentinelSection)
+            return;
+        if (droppedNamespaces.size === 0) {
+            sentinelSection.style.display = 'none';
+            sentinelSection.innerHTML = '';
+            return;
+        }
+        // Sort by total dropped count descending (noisiest first)
+        // Also respect filterPattern (Layer 2 show filter) — sentinels for hidden namespaces
+        // are themselves hidden, consistent with how filtered log entries are hidden.
+        const effectiveShowPattern = filterPattern || 'gg:*';
+        const sorted = [...droppedNamespaces.values()]
+            .filter((info) => namespaceMatchesPattern(info.namespace, effectiveShowPattern))
+            .sort((a, b) => b.total - a.total);
+        if (sorted.length === 0) {
+            sentinelSection.style.display = 'none';
+            sentinelSection.innerHTML = '';
+            return;
+        }
+        const total = sorted.reduce((sum, i) => sum + i.total, 0);
+        // Header: "▼ Dropped: 3 namespaces, 47 loggs" — click to collapse
+        const arrow = sentinelExpanded ? '▼' : '▶';
+        const headerText = `${sorted.length} dropped namespace${sorted.length === 1 ? '' : 's'}, ${total} logg${total === 1 ? '' : 's'}`;
+        let html = `<div class="gg-sentinel-header"><span class="gg-sentinel-toggle">${arrow}</span> ${escapeHtml(headerText)}</div>`;
+        html += `<div class="gg-sentinel-rows${sentinelExpanded ? '' : ' collapsed'}">`;
+        for (const info of sorted) {
+            const ns = escapeHtml(info.namespace);
+            const typeEntries = Object.entries(info.byType);
+            const breakdown = typeEntries.length > 1 ? ` (${typeEntries.map(([t, n]) => `${n} ${t}`).join(', ')})` : '';
+            const countStr = `${info.total} logg${info.total === 1 ? '' : 's'}${breakdown}`;
+            let previewStr = '';
+            if (info.preview.args && info.preview.args.length > 0) {
+                const raw = info.preview.args
+                    .map((a) => (typeof a === 'object' ? JSON.stringify(a) : String(a)))
+                    .join(' ');
+                previewStr = raw.length > 80 ? raw.slice(0, 77) + '...' : raw;
+            }
+            html +=
+                `<div class="gg-sentinel-row" data-namespace="${ns}">` +
+                    `<button class="gg-sentinel-keep" data-namespace="${ns}" title="Keep this namespace (start capturing its loggs)">${ICON_KEEP}</button>` +
+                    `<span class="gg-sentinel-ns">DROPPED:${ns}</span>` +
+                    `<span class="gg-sentinel-count">${escapeHtml(countStr)}</span>` +
+                    (previewStr
+                        ? `<span class="gg-sentinel-preview">\u21b3 ${escapeHtml(previewStr)}</span>`
+                        : '') +
+                    `</div>`;
         }
+        html += `</div>`;
+        sentinelSection.innerHTML = html;
+        sentinelSection.style.display = 'block';
+        // Update keep UI summary too
+        renderKeepUI();
+    }
+    /** Wire up the Keep input + sentinel section */
+    function wireUpKeepUI() {
+        if (!$el)
+            return;
+        // Keep handle toggles the keep panel
+        const keepHandle = $el.find('.gg-pipeline-keep-handle').get(0);
+        const keepPanelEl = $el.find('.gg-keep-panel').get(0);
+        if (keepHandle && keepPanelEl) {
+            keepHandle.addEventListener('click', () => {
+                const open = keepPanelEl.style.display !== 'none';
+                keepPanelEl.style.display = open ? 'none' : '';
+                keepHandle.classList.toggle('active', !open);
+                // Close show panel when opening keep
+                if (!open) {
+                    const showPanel = $el?.find('.gg-show-panel').get(0);
+                    const showHandle = $el?.find('.gg-pipeline-show-handle').get(0);
+                    if (showPanel)
+                        showPanel.style.display = 'none';
+                    if (showHandle)
+                        showHandle.classList.remove('active');
+                }
+            });
+        }
+        // Buf node click: replace node text with an inline input to change capacity
+        const bufNode = $el.find('.gg-pipeline-buf').get(0);
+        if (bufNode) {
+            bufNode.addEventListener('click', () => {
+                // Already editing?
+                if (bufNode.querySelector('.gg-buf-size-input'))
+                    return;
+                const current = buffer.capacity;
+                const input = document.createElement('input');
+                input.type = 'number';
+                input.className = 'gg-buf-size-input';
+                input.value = String(current);
+                input.min = '100';
+                input.max = '100000';
+                input.title = 'Buffer capacity (Enter to apply, Escape to cancel)';
+                bufNode.textContent = '';
+                bufNode.appendChild(input);
+                input.focus();
+                input.select();
+                const restore = () => {
+                    input.remove();
+                    renderPipelineUI(); // restores text content
+                };
+                const apply = () => {
+                    const val = parseInt(input.value, 10);
+                    if (!isNaN(val) && val > 0 && val !== current) {
+                        buffer.resize(val);
+                        localStorage.setItem(BUFFER_CAP_KEY, String(val));
+                        renderLogs();
+                    }
+                    restore();
+                };
+                input.addEventListener('blur', apply);
+                input.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        input.blur();
+                    }
+                    if (e.key === 'Escape') {
+                        input.removeEventListener('blur', apply);
+                        restore();
+                    }
+                });
+                // Stop click from immediately re-triggering
+                input.addEventListener('click', (e) => e.stopPropagation());
+            });
+        }
+        const keepInput = $el.find('.gg-keep-input').get(0);
+        if (keepInput) {
+            keepInput.addEventListener('blur', () => {
+                applyKeepPatternFromInput(keepInput.value);
+            });
+            keepInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    applyKeepPatternFromInput(keepInput.value);
+                    keepInput.blur();
+                }
+            });
+        }
+        // Wire up sentinel section: collapse toggle + [+] keep buttons
+        const sentinelSection = $el.find('.gg-sentinel-section').get(0);
+        if (sentinelSection) {
+            sentinelSection.addEventListener('click', (e) => {
+                const target = e.target;
+                // Header click: toggle collapse
+                if (target?.closest?.('.gg-sentinel-header')) {
+                    sentinelExpanded = !sentinelExpanded;
+                    renderSentinelSection();
+                    return;
+                }
+                const keepBtn = target?.closest?.('.gg-sentinel-keep');
+                if (keepBtn) {
+                    const namespace = keepBtn.getAttribute('data-namespace');
+                    if (!namespace)
+                        return;
+                    const info = droppedNamespaces.get(namespace);
+                    if (!info)
+                        return;
+                    const previousKeep = keepPattern || 'gg:*';
+                    // Remove the exact exclusion for this namespace from keepPattern.
+                    // If no exclusion exists (Case B: namespace simply not included), add it.
+                    const currentKeep = keepPattern || 'gg:*';
+                    const exclusion = `-${namespace}`;
+                    const parts = currentKeep
+                        .split(',')
+                        .map((p) => p.trim())
+                        .filter(Boolean);
+                    const hasExclusion = parts.includes(exclusion);
+                    if (hasExclusion) {
+                        keepPattern = parts.filter((p) => p !== exclusion).join(',') || 'gg:*';
+                    }
+                    else {
+                        // No explicit exclusion — add an inclusion for the exact namespace
+                        keepPattern = parts.some((p) => !p.startsWith('-'))
+                            ? `${currentKeep},${namespace}`
+                            : `gg:*,${namespace}`;
+                    }
+                    keepPattern = simplifyPattern(keepPattern);
+                    localStorage.setItem(KEEP_KEY, keepPattern);
+                    // Sync keep input
+                    if (keepInput)
+                        keepInput.value = keepPattern;
+                    // Remove from droppedNamespaces map so sentinel disappears immediately
+                    droppedNamespaces.delete(namespace);
+                    renderKeepUI();
+                    renderSentinelSection();
+                    // Show keep toast for undo / segment broadening
+                    showKeepToast(namespace, previousKeep, info);
+                }
+            });
+        }
+        // Wire up Keep panel checkboxes
+        const keepPanel = $el.find('.gg-keep-filter-panel').get(0);
+        if (keepPanel) {
+            keepPanel.addEventListener('change', (e) => {
+                const target = e.target;
+                if (target.classList.contains('gg-keep-all-checkbox')) {
+                    const allNs = [...allNamespacesSet, ...droppedNamespaces.keys()];
+                    if (target.checked) {
+                        // Keep all: remove all exclusions
+                        keepPattern = 'gg:*';
+                        droppedNamespaces.clear();
+                    }
+                    else {
+                        // Drop all
+                        const exclusions = allNs.map((ns) => `-${ns}`).join(',');
+                        keepPattern = `gg:*,${exclusions}`;
+                        keepPattern = simplifyPattern(keepPattern) || 'gg:*';
+                    }
+                    localStorage.setItem(KEEP_KEY, keepPattern);
+                    renderKeepUI();
+                    renderLogs();
+                    renderSentinelSection();
+                    return;
+                }
+                if (target.classList.contains('gg-keep-other-checkbox')) {
+                    const otherNs = JSON.parse(target.getAttribute('data-other-namespaces') || '[]');
+                    otherNs.forEach((ns) => toggleKeepNamespace(ns, target.checked));
+                    renderKeepUI();
+                    renderLogs();
+                    renderSentinelSection();
+                    return;
+                }
+                if (target.classList.contains('gg-keep-ns-checkbox')) {
+                    const namespace = target.getAttribute('data-namespace');
+                    if (!namespace)
+                        return;
+                    toggleKeepNamespace(namespace, target.checked);
+                    renderKeepUI();
+                    renderLogs();
+                    renderSentinelSection();
+                }
+            });
+        }
+        renderKeepUI();
     }
     /** Render the format field + $ROOT field shared by "Copy to clipboard" and "Open as URL" */
     function renderFormatSection(isUrlMode) {
@@ -1277,34 +1965,17 @@ export function createGgPlugin(options, gg) {
                 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.
+						When enabled, loggs shown in the GG panel are also output to the browser's native console (filtered by the Show pattern).
 					</div>
+					<label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;">
+						<input type="checkbox" class="gg-console-toggle" ${ggConsoleEnabled ? 'checked' : ''}>
+						Native console output
+					</label>
+					${ggConsoleEnabled ? `<div style="font-size: 10px; opacity: 0.5; margin-top: 4px;">Disable to silence gg loggs in DevTools console.</div>` : ''}
 				</div>
 			`;
             settingsPanel.innerHTML = `
@@ -1343,7 +2014,6 @@ export function createGgPlugin(options, gg) {
         settingsBtn.addEventListener('click', () => {
             settingsExpanded = !settingsExpanded;
             if (settingsExpanded) {
-                filterExpanded = false;
                 renderFilterUI();
                 renderLogs();
             }
@@ -1403,15 +2073,21 @@ export function createGgPlugin(options, gg) {
                     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');
+            // Native Console: gg-console toggle
+            if (target.classList.contains('gg-console-toggle')) {
+                const checked = target.checked;
+                ggConsoleEnabled = checked;
+                localStorage.setItem(CONSOLE_KEY, String(checked));
+                // Update the debug factory's enabled pattern immediately
+                import('../debug/index.js').then(({ default: dbg }) => {
+                    try {
+                        const pattern = ggConsoleEnabled ? filterPattern || 'gg:*' : '';
+                        dbg.enable(pattern);
+                    }
+                    catch {
+                        // ignore
+                    }
+                });
                 renderSettingsUI();
             }
         });
@@ -1422,7 +2098,10 @@ export function createGgPlugin(options, gg) {
         $el.find('.gg-clear-btn').on('click', () => {
             buffer.clear();
             allNamespacesSet.clear();
+            droppedNamespaces.clear();
             renderLogs();
+            renderSentinelSection();
+            renderKeepUI();
         });
         $el.find('.gg-copy-btn').on('click', async () => {
             const allEntries = buffer.getEntries();
@@ -1507,14 +2186,8 @@ 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)
+    /** Build clickable segment HTML for a namespace (shared by hide/drop toasts) */
+    function buildToastNsHTML(namespace) {
         const parts = namespace.split(/([:/@ \-_])/);
         const segments = [];
         const delimiters = [];
@@ -1527,27 +2200,31 @@ export function createGgPlugin(options, gg) {
                 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) {
+                if (j < i)
                     segFilter += delimiters[j];
-                }
-                else if (j < segments.length - 1) {
+                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-segment" data-filter="${escapeHtml(segFilter)}">${escapeHtml(segments[i])}</span>`;
+            if (i < segments.length - 1)
                 nsHTML += `<span class="gg-toast-delim">${escapeHtml(delimiters[i])}</span>`;
-            }
         }
-        // Auto-expand explanation on first use
+        return nsHTML;
+    }
+    function showHideToast(namespace, previousPattern) {
+        if (!$el)
+            return;
+        toastMode = 'hide';
+        lastHiddenPattern = previousPattern;
+        const toast = $el.find('.gg-toast').get(0);
+        if (!toast)
+            return;
+        const nsHTML = buildToastNsHTML(namespace);
         const showExplanation = !hasSeenToastExplanation;
         toast.innerHTML =
             `<button class="gg-toast-btn gg-toast-dismiss" title="Dismiss">\u00d7</button>` +
@@ -1558,13 +2235,64 @@ export function createGgPlugin(options, gg) {
                 `<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:*). ` +
+                `Click a segment above to hide all matching namespaces (e.g. click "api" to hide api/*). ` +
                 `Tip: you can also right-click any segment in the log to hide it directly.` +
                 `</div>`;
         toast.classList.add('visible');
-        if (showExplanation) {
+        if (showExplanation)
+            hasSeenToastExplanation = true;
+    }
+    function showDropToast(namespace, previousKeep) {
+        if (!$el)
+            return;
+        toastMode = 'drop';
+        lastDroppedPattern = previousKeep;
+        const toast = $el.find('.gg-toast').get(0);
+        if (!toast)
+            return;
+        const nsHTML = buildToastNsHTML(namespace);
+        const showExplanation = !hasSeenToastExplanation;
+        toast.innerHTML =
+            `<button class="gg-toast-btn gg-toast-dismiss" title="Dismiss">\u00d7</button>` +
+                `<span class="gg-toast-label">Dropped:</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 drop all matching namespaces from the buffer (e.g. click "api" to drop api/*).` +
+                `</div>`;
+        toast.classList.add('visible');
+        if (showExplanation)
+            hasSeenToastExplanation = true;
+    }
+    function showKeepToast(namespace, previousKeep, info) {
+        if (!$el)
+            return;
+        toastMode = 'keep';
+        lastKeptPattern = previousKeep;
+        lastKeptNamespaceInfo = { ns: namespace, info };
+        const toast = $el.find('.gg-toast').get(0);
+        if (!toast)
+            return;
+        const nsHTML = buildToastNsHTML(namespace);
+        const showExplanation = !hasSeenToastExplanation;
+        toast.innerHTML =
+            `<button class="gg-toast-btn gg-toast-dismiss" title="Dismiss">\u00d7</button>` +
+                `<span class="gg-toast-label">Kept:</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 keep all matching namespaces (e.g. click "api" to keep api/*). ` +
+                `Only new loggs from this point forward will be captured.` +
+                `</div>`;
+        toast.classList.add('visible');
+        if (showExplanation)
             hasSeenToastExplanation = true;
-        }
     }
     /** Dismiss the toast bar */
     function dismissToast() {
@@ -1575,25 +2303,64 @@ export function createGgPlugin(options, gg) {
             toast.classList.remove('visible');
         }
         lastHiddenPattern = null;
+        lastDroppedPattern = null;
+        lastKeptPattern = null;
+        lastKeptNamespaceInfo = null;
     }
-    /** Undo the last namespace hide */
+    /** Undo the last namespace hide, drop, or keep */
     function undoHide() {
-        if (!$el || lastHiddenPattern === null)
+        if (!$el)
             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();
+        if (toastMode === 'keep' && lastKeptPattern !== null) {
+            // Restore keepPattern
+            keepPattern = lastKeptPattern;
+            localStorage.setItem(KEEP_KEY, keepPattern);
+            const keepInput = $el.find('.gg-keep-input').get(0);
+            if (keepInput)
+                keepInput.value = keepPattern;
+            // Re-insert the sentinel entry so it reappears
+            if (lastKeptNamespaceInfo) {
+                droppedNamespaces.set(lastKeptNamespaceInfo.ns, lastKeptNamespaceInfo.info);
+            }
+            dismissToast();
+            renderKeepUI();
+            renderSentinelSection();
+            renderLogs();
+        }
+        else if (toastMode === 'drop' && lastDroppedPattern !== null) {
+            // Restore keepPattern
+            keepPattern = lastDroppedPattern;
+            localStorage.setItem(KEEP_KEY, keepPattern);
+            const keepInput = $el.find('.gg-keep-input').get(0);
+            if (keepInput)
+                keepInput.value = keepPattern;
+            // Restore enabledNamespaces from current show filter
+            enabledNamespaces.clear();
+            const effectiveShow = filterPattern || 'gg:*';
+            getAllCapturedNamespaces().forEach((ns) => {
+                if (namespaceMatchesPattern(ns, effectiveShow))
+                    enabledNamespaces.add(ns);
+            });
+            dismissToast();
+            renderKeepUI();
+            renderFilterUI();
+            renderLogs();
+        }
+        else if (toastMode === 'hide' && lastHiddenPattern !== null) {
+            // Restore filterPattern
+            filterPattern = lastHiddenPattern;
+            localStorage.setItem(SHOW_KEY, filterPattern);
+            enabledNamespaces.clear();
+            const effectivePattern = filterPattern || 'gg:*';
+            getAllCapturedNamespaces().forEach((ns) => {
+                if (namespaceMatchesPattern(ns, effectivePattern))
+                    enabledNamespaces.add(ns);
+            });
+            dismissToast();
+            renderFilterUI();
+            renderSentinelSection();
+            renderLogs();
+        }
     }
     /** Wire up toast event handlers (called once after init) */
     function wireUpToast() {
@@ -1622,41 +2389,101 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
-            // Segment click: add exclusion for that pattern
+            // Segment click: add exclusion to the appropriate layer
             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:*';
+                if (toastMode === 'keep') {
+                    // Broaden the keep: remove all exclusions whose prefix matches `filter`,
+                    // then add `filter` as an inclusion if pattern has no wildcard base.
+                    const currentKeep = keepPattern || 'gg:*';
+                    const keepParts = currentKeep
+                        .split(',')
+                        .map((p) => p.trim())
+                        .filter(Boolean);
+                    // Remove any exclusion that is a sub-pattern of filter (starts with -filter prefix)
+                    const narrowed = keepParts.filter((p) => {
+                        if (!p.startsWith('-'))
+                            return true;
+                        const excl = p.slice(1).replace(/\*$/, '');
+                        const filterBase = filter.replace(/\*$/, '');
+                        return !excl.startsWith(filterBase) && !filterBase.startsWith(excl);
+                    });
+                    const hasWildcardBase = narrowed.some((p) => p === '*' || p === 'gg:*');
+                    if (!hasWildcardBase &&
+                        !narrowed.some((p) => !p.startsWith('-') && namespaceMatchesPattern(filter.replace(/\*$/, 'x'), p))) {
+                        narrowed.push(filter);
+                    }
+                    keepPattern = simplifyPattern(narrowed.join(',') || 'gg:*');
+                    localStorage.setItem(KEEP_KEY, keepPattern);
+                    const keepInput = $el?.find('.gg-keep-input').get(0);
+                    if (keepInput)
+                        keepInput.value = keepPattern;
+                    // Remove all dropped namespaces that now match the new keepPattern
+                    for (const ns of [...droppedNamespaces.keys()]) {
+                        if (namespaceMatchesPattern(ns, keepPattern)) {
+                            droppedNamespaces.delete(ns);
+                        }
+                    }
+                    dismissToast();
+                    renderKeepUI();
+                    renderSentinelSection();
+                    renderLogs();
+                }
+                else if (toastMode === 'drop') {
+                    // Add exclusion to keepPattern (Layer 1)
+                    const currentKeep = keepPattern || 'gg:*';
+                    const keepParts = currentKeep.split(',').map((p) => p.trim());
+                    if (!keepParts.includes(exclusion)) {
+                        keepPattern = keepParts.some((p) => !p.startsWith('-'))
+                            ? `${currentKeep},${exclusion}`
+                            : `gg:*,${exclusion}`;
+                        keepPattern = simplifyPattern(keepPattern);
+                    }
+                    localStorage.setItem(KEEP_KEY, keepPattern);
+                    const keepInput = $el?.find('.gg-keep-input').get(0);
+                    if (keepInput)
+                        keepInput.value = keepPattern;
+                    // Remove newly-dropped namespace from visible list
+                    // (the segment pattern may match multiple namespaces)
+                    getAllCapturedNamespaces().forEach((ns) => {
+                        if (!namespaceMatchesPattern(ns, keepPattern)) {
+                            enabledNamespaces.delete(ns);
+                        }
+                    });
+                    dismissToast();
+                    renderKeepUI();
+                    renderFilterUI();
+                    renderLogs();
+                    scheduleSentinelRender();
                 }
                 else {
-                    const hasInclusion = parts.some((p) => !p.startsWith('-'));
-                    if (hasInclusion) {
-                        filterPattern = `${currentPattern},${exclusion}`;
+                    // toastMode === 'hide': add exclusion to filterPattern (Layer 2)
+                    const currentPattern = filterPattern || 'gg:*';
+                    const parts = currentPattern.split(',').map((p) => p.trim());
+                    if (parts.includes(exclusion)) {
+                        filterPattern = parts.filter((p) => p !== exclusion).join(',') || 'gg:*';
                     }
                     else {
-                        filterPattern = `gg:*,${exclusion}`;
+                        filterPattern = parts.some((p) => !p.startsWith('-'))
+                            ? `${currentPattern},${exclusion}`
+                            : `gg:*,${exclusion}`;
                     }
+                    filterPattern = simplifyPattern(filterPattern);
+                    enabledNamespaces.clear();
+                    const effectivePattern = filterPattern || 'gg:*';
+                    getAllCapturedNamespaces().forEach((ns) => {
+                        if (namespaceMatchesPattern(ns, effectivePattern))
+                            enabledNamespaces.add(ns);
+                    });
+                    localStorage.setItem(SHOW_KEY, filterPattern);
+                    dismissToast();
+                    renderFilterUI();
+                    renderSentinelSection();
+                    renderLogs();
                 }
-                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;
             }
         });
@@ -1671,13 +2498,25 @@ export function createGgPlugin(options, gg) {
             return;
         containerEl.addEventListener('click', (e) => {
             const target = e.target;
-            // Handle reset filter button (shown when all logs filtered out)
+            // Handle reset filter button (shown when all logs filtered out by gg-show)
             if (target?.classList?.contains('gg-reset-filter-btn')) {
                 filterPattern = 'gg:*';
                 enabledNamespaces.clear();
                 getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
-                localStorage.setItem(FILTER_KEY, filterPattern);
+                localStorage.setItem(SHOW_KEY, filterPattern);
                 renderFilterUI();
+                renderSentinelSection();
+                renderLogs();
+                return;
+            }
+            // Handle keep-all button (shown when gg-keep is restrictive and buffer is empty)
+            if (target?.classList?.contains('gg-keep-all-btn')) {
+                keepPattern = 'gg:*';
+                localStorage.setItem(KEEP_KEY, keepPattern);
+                const keepInput = $el?.find('.gg-keep-input').get(0);
+                if (keepInput)
+                    keepInput.value = keepPattern;
+                renderKeepUI();
                 renderLogs();
                 return;
             }
@@ -1748,8 +2587,9 @@ export function createGgPlugin(options, gg) {
                         .filter((ns) => namespaceMatchesPattern(ns, filter))
                         .forEach((ns) => enabledNamespaces.add(ns));
                 }
-                localStorage.setItem(FILTER_KEY, filterPattern);
+                localStorage.setItem(SHOW_KEY, filterPattern);
                 renderFilterUI();
+                renderSentinelSection();
                 renderLogs();
                 return;
             }
@@ -1758,41 +2598,65 @@ export function createGgPlugin(options, gg) {
                 handleNamespaceClick(target);
                 return;
             }
+            // Handle clicking drop button for namespace (Layer 1: gg-keep)
+            const dropBtn = target?.closest?.('.gg-ns-drop');
+            if (dropBtn) {
+                const namespace = dropBtn.getAttribute('data-namespace');
+                if (!namespace)
+                    return;
+                const currentKeep = keepPattern || 'gg:*';
+                const exclusion = `-${namespace}`;
+                const parts = currentKeep.split(',').map((p) => p.trim());
+                if (!parts.includes(exclusion)) {
+                    const previousKeep = keepPattern;
+                    keepPattern = `${currentKeep},${exclusion}`;
+                    keepPattern = simplifyPattern(keepPattern);
+                    localStorage.setItem(KEEP_KEY, keepPattern);
+                    // Sync keep input
+                    const keepInput = $el?.find('.gg-keep-input').get(0);
+                    if (keepInput)
+                        keepInput.value = keepPattern;
+                    // Remove from visible loggs (Layer 1 drop hides from display too)
+                    enabledNamespaces.delete(namespace);
+                    renderKeepUI();
+                    renderFilterUI();
+                    renderLogs();
+                    scheduleSentinelRender();
+                    showDropToast(namespace, previousKeep);
+                }
+                return;
+            }
             // Handle clicking hide button for namespace
-            if (target?.classList?.contains('gg-ns-hide')) {
-                const namespace = target.getAttribute('data-namespace');
+            const hideBtn = target?.closest?.('.gg-ns-hide');
+            if (hideBtn) {
+                const namespace = hideBtn.getAttribute('data-namespace');
                 if (!namespace)
                     return;
                 // Save current pattern for undo before hiding
                 const previousPattern = filterPattern;
                 toggleNamespace(namespace, false);
-                localStorage.setItem(FILTER_KEY, filterPattern);
+                localStorage.setItem(SHOW_KEY, filterPattern);
                 renderFilterUI();
+                renderSentinelSection();
                 renderLogs();
                 // Show toast with undo option
                 showHideToast(namespace, previousPattern);
                 return;
             }
-            // Clicking background (container or grid, not a log element) restores all
-            if (filterExpanded &&
-                filterPattern !== 'gg:*' &&
+            // Clicking background (container or grid, not a log entry) restores show filter
+            if (filterPattern !== 'gg:*' &&
                 (target === containerEl || target?.classList?.contains('gg-log-grid'))) {
                 filterPattern = 'gg:*';
                 enabledNamespaces.clear();
                 getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
-                localStorage.setItem(FILTER_KEY, filterPattern);
+                localStorage.setItem(SHOW_KEY, filterPattern);
                 renderFilterUI();
+                renderSentinelSection();
                 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();
+        /** Clamp and apply tooltip position below (or above) a target element. */
+        function positionTooltip(tip, targetRect) {
             let left = targetRect.left;
             let top = targetRect.bottom + 4;
             const tipRect = tip.getBoundingClientRect();
@@ -1806,6 +2670,15 @@ export function createGgPlugin(options, gg) {
             }
             tip.style.left = `${left}px`;
             tip.style.top = `${top}px`;
+        }
+        // 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';
+            positionTooltip(tip, target.getBoundingClientRect());
             setTimeout(() => {
                 tip.style.display = 'none';
             }, 1500);
@@ -1847,8 +2720,9 @@ export function createGgPlugin(options, gg) {
                         enabledNamespaces.add(ns);
                     }
                 });
-                localStorage.setItem(FILTER_KEY, filterPattern);
+                localStorage.setItem(SHOW_KEY, filterPattern);
                 renderFilterUI();
+                renderSentinelSection();
                 renderLogs();
                 return;
             }
@@ -1916,23 +2790,7 @@ export function createGgPlugin(options, gg) {
             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`;
+            positionTooltip(tip, target.getBoundingClientRect());
         });
         containerEl.addEventListener('mouseout', (e) => {
             const target = e.target?.closest?.('.gg-expand');
@@ -1972,22 +2830,7 @@ export function createGgPlugin(options, gg) {
             }
             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`;
+            positionTooltip(tip, target.getBoundingClientRect());
         });
         containerEl.addEventListener('mouseout', (e) => {
             const target = e.target;
@@ -2178,31 +3021,13 @@ export function createGgPlugin(options, gg) {
         return (`<div class="gg-log-entry${levelClass}" data-entry="${index}"${vindexAttr}>` +
             `<div class="gg-log-header">` +
             `<div class="gg-log-diff" style="color: ${color};"${fileAttr}${lineAttr}${colAttr}>${diff}</div>` +
-            `<div class="gg-log-ns" style="color: ${color};" data-namespace="${escapeHtml(entry.namespace)}"><span class="gg-ns-text">${nsHTML}</span><button class="gg-ns-hide" data-namespace="${escapeHtml(entry.namespace)}" title="Hide this namespace">\u00d7</button></div>` +
+            `<div class="gg-log-ns" style="color: ${color};" data-namespace="${escapeHtml(entry.namespace)}"><span class="gg-ns-text">${nsHTML}</span><button class="gg-ns-drop" data-namespace="${escapeHtml(entry.namespace)}" title="Drop this namespace (stop buffering its loggs)">${ICON_DROP}</button><button class="gg-ns-hide" data-namespace="${escapeHtml(entry.namespace)}" title="Hide this namespace">${ICON_HIDE}</button></div>` +
             `<div class="gg-log-handle"></div>` +
             `</div>` +
             `<div class="gg-log-content"${hasSrcExpr ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${exprAboveForPrimitives}${argsHTML}${stackHTML}</div>` +
             detailsHTML +
             `</div>`);
     }
-    /** Update the copy-button count text */
-    function updateTruncationBanner() {
-        if (!$el)
-            return;
-        const banner = $el.find('.gg-truncation-banner').get(0);
-        if (!banner)
-            return;
-        const evicted = buffer.evicted;
-        if (evicted > 0) {
-            const total = buffer.totalPushed;
-            const retained = buffer.size;
-            banner.innerHTML = `⚠ Showing ${retained.toLocaleString()} of ${total.toLocaleString()} messages &mdash; ${evicted.toLocaleString()} truncated. Increase <code style="font-family:monospace;background:rgba(255,255,255,0.15);padding:0 3px;border-radius:3px;">maxEntries</code> to retain more.`;
-            banner.style.display = 'flex';
-        }
-        else {
-            banner.style.display = 'none';
-        }
-    }
     function updateCopyCount() {
         if (!$el)
             return;
@@ -2323,7 +3148,8 @@ export function createGgPlugin(options, gg) {
         // Mount the virtualizer (attaches scroll/resize observers)
         const cleanup = virtualizer._didMount();
         // Store cleanup for when we tear down (TODO: call on destroy)
-        containerDom.__ggVirtualCleanup = cleanup;
+        containerDom.__ggVirtualCleanup =
+            cleanup;
         // Initial render, then scroll to bottom if requested
         virtualizer._willUpdate();
         renderVirtualItems();
@@ -2354,6 +3180,7 @@ export function createGgPlugin(options, gg) {
         const hasVisible = newEntries.some((e) => enabledNamespaces.has(e.namespace));
         if (!hasVisible && buffer.evicted === 0) {
             updateCopyCount();
+            renderPipelineUI();
             return;
         }
         // Rebuild filteredIndices from scratch. This is O(buffer.size) with a
@@ -2361,7 +3188,7 @@ export function createGgPlugin(options, gg) {
         // when the buffer wraps and old logical indices shift.
         rebuildFilteredIndices();
         updateCopyCount();
-        updateTruncationBanner();
+        renderPipelineUI();
         // Check if user is near bottom before we update the virtualizer
         const nearBottom = containerDom.scrollHeight - containerDom.scrollTop - containerDom.clientHeight < 50;
         userNearBottom = nearBottom;
@@ -2398,33 +3225,46 @@ export function createGgPlugin(options, gg) {
         expandedStacks.clear();
         // Rebuild filtered indices from scratch
         rebuildFilteredIndices();
+        renderPipelineUI();
         updateCopyCount();
-        updateTruncationBanner();
         if (filteredIndices.length === 0) {
             // Tear down virtualizer
             if (virtualizer) {
                 const containerDom = logContainer.get(0);
                 if (containerDom) {
-                    const cleanup = containerDom.__ggVirtualCleanup;
+                    const cleanup = containerDom
+                        .__ggVirtualCleanup;
                     if (cleanup)
                         cleanup();
                 }
                 virtualizer = null;
             }
             const hasFilteredLogs = buffer.size > 0;
-            const message = hasFilteredLogs
-                ? `All ${buffer.size} 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>`);
+            const keepIsRestrictive = (keepPattern || 'gg:*') !== 'gg:*' && (keepPattern || 'gg:*') !== '*';
+            let message;
+            let actionButton;
+            if (hasFilteredLogs) {
+                message = `All ${buffer.size} logs filtered out.`;
+                actionButton =
+                    '<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>';
+            }
+            else if (keepIsRestrictive) {
+                message = 'No loggs kept.';
+                actionButton =
+                    `<button class="gg-keep-all-btn" style="margin-top: 12px; padding: 10px 20px; cursor: pointer; border: 1px solid #4CAF50; background: #4CAF50; color: white; border-radius: 6px; font-size: 13px; font-weight: 500; transition: background 0.2s;">Keep All</button>` +
+                        `<div style="margin-top: 10px; font-size: 11px; opacity: 0.7;">gg-keep: ${escapeHtml(keepPattern || 'gg:*')}</div>`;
+            }
+            else {
+                message = 'No loggs captured yet. Call gg() to see output here.';
+                actionButton = '';
+            }
+            logContainer.html(`<div style="padding: 20px; text-align: center; opacity: 0.5;">${message}<div>${actionButton}</div></div>`);
             return;
         }
         // Build the virtual scroll DOM structure:
         // - .gg-virtual-spacer: sized to total virtual height (provides scrollbar)
         //   - .gg-log-grid: positioned absolutely, translated to visible offset, holds only visible entries
-        const gridClasses = `gg-log-grid${filterExpanded ? ' filter-mode' : ''}${showExpressions ? ' gg-show-expr' : ''}`;
+        const gridClasses = `gg-log-grid${showExpressions ? ' gg-show-expr' : ''}`;
         logContainer.html(`<div class="gg-virtual-spacer">` +
             `<div class="${gridClasses}" style="position: absolute; top: 0; left: 0; width: 100%; grid-template-columns: ${gridColumns()};"></div>` +
             `</div>` +