@skyhook-io/k8s-ui 1.15.0 → 1.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -100,12 +100,12 @@
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
     "jsdom": "^29.1.1",
-    "lucide-react": "^1.37.0",
+    "lucide-react": "^1.48.0",
     "monaco-editor": "0.55.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.11",
+    "vitest": "^5.0.2",
     "yaml": "^2.9.0"
   }
 }

package/src/components/audit/AuditFindingsTable.tsx

@@ -515,7 +515,7 @@ function FlatFindingRow({ finding, onResourceClick, showCluster, onClusterClick
         onClusterClick ? (
           <button
             onClick={() => onClusterClick(finding.cluster!.id)}
-            className="text-xs text-[var(--color-radar-accent)] hover:underline shrink-0 max-w-[160px] truncate text-left"
+            className="text-xs text-[var(--color-radar-accent,var(--accent))] hover:underline shrink-0 max-w-[160px] truncate text-left"
           >
             {finding.cluster.name}
           </button>

package/src/components/checks/ChecksView.tsx

@@ -285,7 +285,7 @@ export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs
               placeholder="Search checks…"
               value={search}
               onChange={(e) => filters.setString('q', e.target.value)}
-              className="w-64 rounded-lg border border-theme-border-light bg-theme-base py-1.5 pl-9 pr-8 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-[var(--color-radar-accent)]"
+              className="w-64 rounded-lg border border-theme-border-light bg-theme-base py-1.5 pl-9 pr-8 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-[var(--color-radar-accent,var(--accent))]"
             />
             {search && (
               <button
@@ -340,7 +340,7 @@ export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs
                 return (
                   <span
                     key={id}
-                    className="inline-flex items-center gap-1 rounded-full border border-[var(--color-radar-accent)]/30 bg-[var(--color-radar-accent)]/10 py-1 pl-2.5 pr-1 text-xs text-theme-text-primary"
+                    className="inline-flex items-center gap-1 rounded-full border border-[var(--color-radar-accent,var(--accent))]/30 bg-[var(--color-radar-accent,var(--accent))]/10 py-1 pl-2.5 pr-1 text-xs text-theme-text-primary"
                   >
                     <span className="min-w-0 max-w-[12rem] truncate">
                       <ClusterName name={label} />
@@ -520,7 +520,7 @@ function CheckReferenceLinks({ references }: { references: CheckReference[] }) {
           href={r.url}
           target="_blank"
           rel="noreferrer"
-          className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+          className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-radar-accent,var(--accent))] hover:underline"
         >
           {r.label}
           <ExternalLink className="h-3 w-3" />
@@ -594,7 +594,7 @@ export function CheckCardShell({
             onToggle()
           }
         }}
-        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? SEVERITY_HEADER_BAND_CLASS[sev] : SEVERITY_RAIL_CLASS[sev]}`}
+        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? SEVERITY_HEADER_BAND_CLASS[sev] : SEVERITY_RAIL_CLASS[sev]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${SEVERITY_TEXT_CLASS[sev]}`} aria-hidden />
 
@@ -701,7 +701,7 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
         <button
           type="button"
           onClick={() => setShowAllClusters(true)}
-          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent,var(--accent))] hover:underline"
         >
           View all {groups.length} clusters →
         </button>
@@ -849,7 +849,7 @@ function ResourceList({
         <button
           type="button"
           onClick={() => setShowAll(true)}
-          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent,var(--accent))] hover:underline"
         >
           View all {check.findings.length} →
         </button>
@@ -875,7 +875,7 @@ function FindingLine({
     <>
       <span className="flex min-w-0 items-baseline gap-2">
         <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
-        <span className={`min-w-0 break-all font-medium ${linkable ? 'text-[var(--color-radar-accent)]' : 'text-theme-text-primary'}`}>
+        <span className={`min-w-0 break-all font-medium ${linkable ? 'text-[var(--color-radar-accent,var(--accent))]' : 'text-theme-text-primary'}`}>
           {r.namespace ? `${r.namespace} / ` : ''}
           {r.name}
         </span>
@@ -1010,7 +1010,7 @@ function ClusterFilter({
                   onClick={() => onToggle(o.id)}
                   className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
                 >
-                  <span className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border ${on ? 'border-[var(--color-radar-accent)] bg-[var(--color-radar-accent)] text-white' : 'border-theme-border'}`}>
+                  <span className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border ${on ? 'border-[var(--color-radar-accent,var(--accent))] bg-[var(--color-radar-accent,var(--accent))] text-white' : 'border-theme-border'}`}>
                     {on && <span className="text-[9px] leading-none">✓</span>}
                   </span>
                   <span className="min-w-0 truncate">

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -147,6 +147,7 @@ export interface GitOpsDetailLayoutProps {
   remoteDestinationHint?: ReactNode
   // Opens the host's Argo CD settings, when it has such a place.
   onOpenSettings?: () => void
+  settingsNote?: string
 
   // Action buttons — Argo + Flux. Exactly one applies for any given CR.
   isArgoApp: boolean
@@ -235,6 +236,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     healthDocsUrl,
     remoteDestinationHint,
     onOpenSettings,
+    settingsNote,
     isArgoApp,
     isFlux,
     isFluxWorkload,
@@ -475,7 +477,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       {!fullscreen && (
         <>
           <GitOpsStatusStrip insight={insight ?? undefined} loading={insightLoading} renderRevisionMeta={renderRevisionMeta} />
-          <GitOpsHealthSourceNotice summary={insight?.summary} changes={insight?.changes} docsUrl={healthDocsUrl} remoteDestinationHint={remoteDestinationHint} onOpenSettings={onOpenSettings} />
+          <GitOpsHealthSourceNotice summary={insight?.summary} changes={insight?.changes} docsUrl={healthDocsUrl} remoteDestinationHint={remoteDestinationHint} onOpenSettings={onOpenSettings} settingsNote={settingsNote} />
           <GitOpsIssuesBand
             issues={insight?.issues}
             terminating={terminating}

package/src/components/gitops/GitOpsHealthSourceNotice.tsx

@@ -61,12 +61,18 @@ export function hasRadarFinding(changes: GitOpsChange[] | undefined): boolean {
   return (changes ?? []).some((c) => c.healthSource === 'radar' && (c.health === 'Degraded' || c.health === 'Missing'))
 }
 
+export function hasHealthSettingsHint(summary: HealthSourceNoticeSummary | undefined, changes: GitOpsChange[] | undefined): boolean {
+  return healthSourceNoticeKind(summary) === 'appTree'
+    && (!!summary?.resourceHealthApiError || (!hasRadarFinding(changes) && summary?.health === 'Degraded'))
+}
+
 export function GitOpsHealthSourceNotice({
   summary,
   changes,
   docsUrl,
   remoteDestinationHint,
   onOpenSettings,
+  settingsNote,
 }: {
   summary: HealthSourceNoticeSummary | undefined
   // Decides between the two appTree sentences: with a Radar-sourced
@@ -84,6 +90,9 @@ export function GitOpsHealthSourceNotice({
   // the first way out, and "check Settings" when a configured connection
   // didn't deliver. Without it, only the Argo-side knob is named.
   onOpenSettings?: () => void
+  // Host context shown before the settings link, such as settings that can
+  // be copied for this cluster.
+  settingsNote?: string
 }) {
   const kind = healthSourceNoticeKind(summary)
   if (!kind) return null
@@ -92,7 +101,7 @@ export function GitOpsHealthSourceNotice({
   // app with no Radar finding has nothing here to attribute.
   const radarFinding = hasRadarFinding(changes)
   const apiError = summary?.resourceHealthApiError
-  if (kind === 'appTree' && !radarFinding && !apiError && summary?.health !== 'Degraded') return null
+  if (kind === 'appTree' && !radarFinding && !hasHealthSettingsHint(summary, changes)) return null
   const settingsLink = (label: string) =>
     onOpenSettings ? (
       <button type="button" onClick={onOpenSettings} className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary">
@@ -117,7 +126,7 @@ export function GitOpsHealthSourceNotice({
             {apiError ? (
               <>
                 {APP_TREE_API_ERROR_NOTICE}: {apiError}.
-                {onOpenSettings && <> {settingsLink('Check Argo CD in Settings')}.</>}
+                {onOpenSettings && <> {settingsNote} {settingsLink('Check Argo CD in Settings')}.</>}
                 {' '}
                 {radarFinding ? APP_TREE_API_ERROR_FINDINGS : APP_TREE_API_ERROR_NO_FINDINGS}
               </>
@@ -127,6 +136,7 @@ export function GitOpsHealthSourceNotice({
                 {!radarFinding && (
                   <>
                     {' '}
+                    {settingsNote && onOpenSettings && <>{settingsNote}{' '}</>}
                     To see Argo's per-resource health here, {onOpenSettings && <>{settingsLink('connect Radar to your Argo CD server')}, or </>}
                     {APP_TREE_PERSIST_REMEDY}
                   </>

package/src/components/gitops/index.ts

@@ -61,4 +61,5 @@ export type {
   GitOpsHelmValuesData,
 } from './GitOpsDetailLayout'
 export { GitOpsHealthSourceNotice, healthSourceNoticeKind, hasRadarFinding, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, REMOTE_DESTINATION_NOTICE, REMOTE_FLUX_TARGET_NOTICE } from './GitOpsHealthSourceNotice'
+export { hasHealthSettingsHint } from './GitOpsHealthSourceNotice'
 export { radarHealthNote, RADAR_HEALTH_NOTE } from './health-provenance'

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -739,6 +739,7 @@ interface GitOpsChangesViewProps {
   // Opens the global Settings dialog. Backs the "Connect Argo CD" hint shown
   // when the root is an Argo Application without the diff integration.
   onOpenSettings?: () => void
+  settingsNote?: string
 }
 
 // Status facets for the Resources list. OutOfSync is a sync-status concern
@@ -749,7 +750,7 @@ const STATUS_FACETS: { key: ResourceStatusFacet; label: string; tone: FilterPill
   { key: 'missing', label: 'Missing', tone: 'danger' },
 ]
 
-export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResource, syncResourceDisabledReason, focusKey, tree, renderResourceDiff, onOpenSettings }: GitOpsChangesViewProps) {
+export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResource, syncResourceDisabledReason, focusKey, tree, renderResourceDiff, onOpenSettings, settingsNote }: GitOpsChangesViewProps) {
   // "All resources" toggle: when on, render generated descendants alongside
   // the controller's declared inventory. Argo's UI defaults to "all" — we
   // default to "declared" because the diagnostic data (drift, events) lives
@@ -1009,12 +1010,14 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
             {insight.capabilities?.argoConfigured ? (
               <>
                 Argo CD's full Git-rendered diff isn't available for this app (connection down or token not authorized).{' '}
+                {settingsNote && <>{settingsNote} </>}
                 <button type="button" onClick={onOpenSettings} className="font-medium text-accent-text hover:underline">
                   Check Argo CD in Settings
                 </button>.
               </>
             ) : (
               <>
+                {settingsNote && <>{settingsNote} </>}
                 <button type="button" onClick={onOpenSettings} className="font-medium text-accent-text hover:underline">
                   Connect Argo CD
                 </button>{' '}

package/src/components/issues/IssuesView.tsx

@@ -283,7 +283,7 @@ export function IssueRow({
             onToggle();
           }
         }}
-        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
+        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${ISSUE_SEVERITY_TEXT_CLASS[severity]}`} aria-hidden />
 
@@ -719,7 +719,7 @@ function ResourceLine({
       ) : (
         <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
       )}
-      <span className={`min-w-0 truncate text-sm ${linkable ? `${compact ? 'font-semibold' : 'font-medium'} text-[var(--color-radar-accent)]` : 'font-medium text-theme-text-primary'}`}>
+      <span className={`min-w-0 truncate text-sm ${linkable ? `${compact ? 'font-semibold' : 'font-medium'} text-[var(--color-radar-accent,var(--accent))]` : 'font-medium text-theme-text-primary'}`}>
         {r.namespace ? `${r.namespace} / ` : ''}
         {r.name}
       </span>

package/src/components/logs/LogCore.tsx

@@ -1,8 +1,8 @@
 import { useRef, useCallback, useState, useMemo, useEffect, type ReactNode } from 'react'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
-import { Play, Square, Download, FileDown, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, ChevronRight, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces, Palette, ListCollapse, Sun, Moon } from 'lucide-react'
+import { Play, Square, Download, FileDown, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, ChevronRight, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, EyeOff, Highlighter, Braces, Palette, ListCollapse, Sun, Moon } from 'lucide-react'
 import type { LogEntry, LogLevel } from './useLogBuffer'
-import { useLogSearch } from './useLogSearch'
+import { useLogSearch, type LogSearchMode } from './useLogSearch'
 import { StructuredLogLine } from './StructuredLogLine'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '../ui/Input'
@@ -16,6 +16,7 @@ import {
   TIMESTAMP_FORMAT_LABELS,
 } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
+import { associateContinuations, groupContinuations, type LogGroup } from '../../utils/log-level'
 import { copyText } from '../../utils/clipboard'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
@@ -71,13 +72,16 @@ interface LogCoreProps {
 interface LevelOption {
   level: LogLevel
   label: string
+  /** What the chip's lines are called in its tooltip */
+  noun: string
 }
 
 const LEVEL_OPTIONS: LevelOption[] = [
-  { level: 'error', label: 'ERR' },
-  { level: 'warn', label: 'WARN' },
-  { level: 'info', label: 'INFO' },
-  { level: 'debug', label: 'DBG' },
+  { level: 'error', label: 'ERR', noun: 'error logs' },
+  { level: 'warn', label: 'WARN', noun: 'warning logs' },
+  { level: 'info', label: 'INFO', noun: 'info logs' },
+  { level: 'debug', label: 'DBG', noun: 'debug logs' },
+  { level: 'unknown', label: 'OTHER', noun: 'lines with no level' },
 ]
 
 function getLevelActiveColor(level: LogLevel, palette: LogPalette): string {
@@ -86,7 +90,7 @@ function getLevelActiveColor(level: LogLevel, palette: LogPalette): string {
     case 'warn': return palette.levelActiveWarn
     case 'info': return palette.levelActiveInfo
     case 'debug': return palette.levelActiveDebug
-    default: return palette.levelActiveDebug
+    default: return palette.levelActiveOther
   }
 }
 
@@ -121,19 +125,6 @@ const TIMESTAMP_FORMAT_SHORT_LABELS: Record<TimestampFormat, string> = {
   'epoch': 'Unix time',
 }
 
-function isContinuationLine(content: string): boolean {
-  // Lines starting with whitespace are the dominant stack-trace continuation pattern:
-  // Java `\tat com.foo.Bar`, Go `\tpackage.func`, Node `    at func`, Python `  File "..."`.
-  if (/^\s/.test(content)) return true
-  // Java's secondary chain markers that don't start with whitespace.
-  return /^(Caused by:|Suppressed:|\.\.\. \d+ more)/.test(content)
-}
-
-interface LogGroup {
-  head: LogEntry
-  continuations: LogEntry[]
-}
-
 const TIP_DELAY = 150
 
 export function LogCore({
@@ -201,7 +192,7 @@ export function LogCore({
     try { return localStorage.getItem('radar-logs-collapse-stacks') !== 'false' } catch { return true }
   })
   const [enabledLevels, setEnabledLevels] = useState<Set<LogLevel>>(
-    new Set(['error', 'warn', 'info', 'debug'])
+    new Set(['error', 'warn', 'info', 'debug', 'unknown'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
   const downloadMenu = useAnimatedUnmount(showDownloadMenu, overlayExitMs('menu'))
@@ -232,32 +223,50 @@ export function LogCore({
     return () => clearInterval(id)
   }, [tsFormat, showTimestamps])
 
-  // Level-filtered entries
-  // 'unknown' logs are shown when all 4 known levels are enabled (no active filtering)
+  // One membership rule for filtering, counting and grouping: a stack-trace
+  // line belongs to the record its own pod and container started.
+  const association = useMemo(() => {
+    const { headOf, effectiveLevel } = associateContinuations(entries)
+    const headIdById = new Map<number, number>()
+    for (let i = 0; i < entries.length; i++) {
+      if (headOf[i] !== i) headIdById.set(entries[i].id, entries[headOf[i]].id)
+    }
+    return { headOf, effectiveLevel, headIdById }
+  }, [entries])
+
+  // Frames take their record's level so they filter and render as part of it.
+  const recordEntries = useMemo(
+    () => entries.map((e, i) => (association.effectiveLevel[i] === e.level ? e : { ...e, level: association.effectiveLevel[i] })),
+    [entries, association],
+  )
+
   const levelFilteredEntries = useMemo(() => {
     const allEnabled = LEVEL_OPTIONS.every(opt => enabledLevels.has(opt.level))
-    if (allEnabled) return entries
-    return entries.filter(e => enabledLevels.has(e.level))
-  }, [entries, enabledLevels])
+    if (allEnabled) return recordEntries
+    return recordEntries.filter(e => enabledLevels.has(e.level))
+  }, [recordEntries, enabledLevels])
 
-  // Level counts for badges
+  // Chip counts count records, so a 40-frame stack trace is one error.
   const levelCounts = useMemo(() => {
     const counts: Record<LogLevel, number> = { error: 0, warn: 0, info: 0, debug: 0, unknown: 0 }
-    for (const e of entries) {
-      counts[e.level]++
+    for (let i = 0; i < entries.length; i++) {
+      if (association.headOf[i] === i) counts[entries[i].level]++
     }
     return counts
-  }, [entries])
+  }, [entries, association])
 
   const hasStructuredEntries = useMemo(() => entries.some(e => e.isJson || e.isLogfmt), [entries])
 
-  // Search
-  const search = useLogSearch(levelFilteredEntries, virtuosoRef)
+  const recordIdOf = useCallback(
+    (e: LogEntry) => association.headIdById.get(e.id) ?? e.id,
+    [association],
+  )
+  const search = useLogSearch(levelFilteredEntries, virtuosoRef, recordIdOf)
 
-  // Display entries: use search-filtered when filter mode is active
-  const displayEntries = search.isFilterMode && search.query
-    ? search.filteredEntries
-    : levelFilteredEntries
+  const displayEntries = search.isFiltering ? search.filteredEntries : levelFilteredEntries
+  const hiddenCount = levelFilteredEntries.length - displayEntries.length
+  // Hidden lines leave nothing to highlight, so Hide keeps normal rendering and stack grouping.
+  const highlightQuery = search.mode === 'hide' ? '' : search.query
 
   const exportTriggerRef = useRef<HTMLButtonElement>(null)
   const closeExportMenu = useCallback(() => {
@@ -464,12 +473,12 @@ export function LogCore({
   }, [])
 
   // Clicking a filter chip in a structured log value pushes the value into the
-  // log search and enables filter mode so only matching lines are shown.
+  // log search and shows only the lines that match it.
   const handleFilterValue = useCallback((value: string) => {
     search.setQuery(value)
     // Values often contain regex metacharacters — force literal-substring matching.
     search.setIsRegex(false)
-    search.setFilterMode(true)
+    search.setMode('only')
     if (!search.isOpen) search.open()
   }, [search])
 
@@ -486,28 +495,19 @@ export function LogCore({
   }, [])
 
   // Highlight set for current match
-  const currentHighlightId = search.matchIndices.length > 0
-    ? (search.isFilterMode
-        ? search.filteredEntries[search.currentMatch]?.id
-        : levelFilteredEntries[search.matchIndices[search.currentMatch]]?.id)
-    : -1
-
-  // Group stack-trace continuation lines under their preceding head line.
-  // Disabled while search is active so matches inside continuations remain visible.
+  const currentHighlightId = search.matchIndices.length === 0 || search.mode === 'hide'
+    ? -1
+    : levelFilteredEntries[search.matchIndices[search.currentMatch]]?.id
+
+  // Group stack-trace lines under the line that started their record. Disabled
+  // while highlighting so matches inside stack frames remain visible. A line
+  // whose record start is filtered out stays on its own row.
   const groupedEntries = useMemo<LogGroup[]>(() => {
-    if (!collapseStacks || search.query) {
+    if (!collapseStacks || highlightQuery) {
       return displayEntries.map(e => ({ head: e, continuations: [] }))
     }
-    const groups: LogGroup[] = []
-    for (const entry of displayEntries) {
-      if (groups.length > 0 && isContinuationLine(entry.content)) {
-        groups[groups.length - 1].continuations.push(entry)
-      } else {
-        groups.push({ head: entry, continuations: [] })
-      }
-    }
-    return groups
-  }, [displayEntries, collapseStacks, search.query])
+    return groupContinuations(displayEntries, association.headIdById)
+  }, [displayEntries, collapseStacks, highlightQuery, association])
 
   const scrollToBottom = useCallback(() => {
     virtuosoRef.current?.scrollToIndex({
@@ -584,7 +584,7 @@ export function LogCore({
             const active = enabledLevels.has(opt.level)
             const count = levelCounts[opt.level]
             return (
-              <Tooltip key={opt.level} content={`${active ? 'Hide' : 'Show'} ${opt.label} logs`} delay={TIP_DELAY} position="bottom">
+              <Tooltip key={opt.level} content={`${active ? 'Hide' : 'Show'} ${opt.noun}`} delay={TIP_DELAY} position="bottom">
                 <button
                   onClick={() => toggleLevel(opt.level)}
                   className={`px-1.5 py-0.5 text-[10px] font-medium rounded border transition-colors ${
@@ -876,7 +876,7 @@ export function LogCore({
 
       {/* Search bar */}
       {search.isOpen && (
-        <div className={`flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
+        <div className={`@container/logsearch flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
           <Search className={`w-4 h-4 ${palette.textSecondary} shrink-0`} />
           <Input
             value={search.query}
@@ -921,47 +921,43 @@ export function LogCore({
             </button>
           </Tooltip>
 
-          {/* Filter mode toggle */}
-          <Tooltip content={search.isFilterMode ? 'Highlight mode' : 'Filter mode'} delay={TIP_DELAY} position="bottom">
-            <button
-              onClick={search.toggleFilterMode}
-              className={`p-1 rounded transition-colors ${
-                search.isFilterMode ? palette.toolbarActive : `${palette.textTertiary} ${palette.hoverText}`
-              }`}
-            >
-              <Filter className="w-3.5 h-3.5" />
-            </button>
-          </Tooltip>
+          <SearchModeControl mode={search.mode} onChange={search.setMode} palette={palette} />
 
           {search.query && (
             <>
               <span className={`text-xs whitespace-nowrap ${search.regexError ? palette.textError : palette.textTertiary}`}>
                 {search.regexError
                   ? 'Invalid regex'
-                  : search.matchCount > 0
-                    ? `${search.currentMatch + 1} / ${search.matchCount}`
-                    : '0 results'}
+                  : search.mode === 'hide'
+                    ? `${hiddenCount.toLocaleString()} hidden`
+                    : search.matchCount > 0
+                      ? `${search.currentMatch + 1} / ${search.matchCount}`
+                      : '0 results'}
               </span>
 
-              {/* Navigation arrows */}
-              <Tooltip content="Previous (Shift+Enter)" delay={TIP_DELAY} position="bottom">
-                <button
-                  onClick={search.goToPrev}
-                  disabled={search.matchCount === 0}
-                  className={`p-1 rounded ${palette.textSecondary} ${palette.hoverText} disabled:opacity-30`}
-                >
-                  <ChevronUp className="w-3.5 h-3.5" />
-                </button>
-              </Tooltip>
-              <Tooltip content="Next (Enter)" delay={TIP_DELAY} position="bottom">
-                <button
-                  onClick={search.goToNext}
-                  disabled={search.matchCount === 0}
-                  className={`p-1 rounded ${palette.textSecondary} ${palette.hoverText} disabled:opacity-30`}
-                >
-                  <ChevronDown className="w-3.5 h-3.5" />
-                </button>
-              </Tooltip>
+              {/* Matches are off screen in Hide mode, so there is nothing to step through */}
+              {search.mode !== 'hide' && (
+                <>
+                  <Tooltip content="Previous (Shift+Enter)" delay={TIP_DELAY} position="bottom">
+                    <button
+                      onClick={search.goToPrev}
+                      disabled={search.matchCount === 0}
+                      className={`p-1 rounded ${palette.textSecondary} ${palette.hoverText} disabled:opacity-30`}
+                    >
+                      <ChevronUp className="w-3.5 h-3.5" />
+                    </button>
+                  </Tooltip>
+                  <Tooltip content="Next (Enter)" delay={TIP_DELAY} position="bottom">
+                    <button
+                      onClick={search.goToNext}
+                      disabled={search.matchCount === 0}
+                      className={`p-1 rounded ${palette.textSecondary} ${palette.hoverText} disabled:opacity-30`}
+                    >
+                      <ChevronDown className="w-3.5 h-3.5" />
+                    </button>
+                  </Tooltip>
+                </>
+              )}
 
               <button
                 onClick={() => search.setQuery('')}
@@ -990,8 +986,8 @@ export function LogCore({
       ) : groupedEntries.length === 0 ? (
         <div className={`${EMPTY_STATE_CLASS} ${palette.textTertiary}`}>
           <Terminal className="w-8 h-8" />
-          <span>{emptyMessage}</span>
-          {emptyCommand && (
+          <span>{entries.length > 0 ? `Filters hide all ${entries.length.toLocaleString()} loaded lines` : emptyMessage}</span>
+          {entries.length === 0 && emptyCommand && (
             <button type="button" onClick={() => { void copyText(emptyCommand) }} className={`mt-2 inline-flex max-w-[80%] items-center gap-2 rounded border px-3 py-2 font-mono text-xs ${palette.border} ${palette.toolbarBg}`} title="Copy recovery command">
               <code className="truncate">{emptyCommand}</code>
               <Copy className="h-3.5 w-3.5 shrink-0" />
@@ -1011,7 +1007,7 @@ export function LogCore({
             itemContent={(_index, group) => (
               <LogGroupItem
                 group={group}
-                searchQuery={search.query}
+                searchQuery={highlightQuery}
                 searchIsRegex={search.isRegex}
                 searchIsCaseSensitive={search.isCaseSensitive}
                 showPodName={showPodName}
@@ -1047,14 +1043,52 @@ export function LogCore({
       <div className={`flex items-center gap-4 px-3 py-1 border-t ${palette.border} ${palette.toolbarBg} text-[10px] ${palette.textDisabled}`}>
         {onStartStream && <Shortcut keys="S" label={isStreaming ? 'Stop stream' : 'Stream'} palette={palette} />}
         <Shortcut keys="Ctrl+F" label="Search" palette={palette} />
-        <Shortcut keys="Enter" label="Next match" palette={palette} />
-        <Shortcut keys="Shift+Enter" label="Prev match" palette={palette} />
+        {search.mode !== 'hide' && (
+          <>
+            <Shortcut keys="Enter" label="Next match" palette={palette} />
+            <Shortcut keys="Shift+Enter" label="Prev match" palette={palette} />
+          </>
+        )}
         <Shortcut keys="Esc" label="Close search" palette={palette} />
       </div>
     </div>
   )
 }
 
+const SEARCH_MODES: { mode: LogSearchMode; label: string; tip: string; Icon: typeof Filter }[] = [
+  { mode: 'highlight', label: 'Highlight', tip: 'Show all lines and highlight matches', Icon: Highlighter },
+  { mode: 'only', label: 'Only matching', tip: 'Show only matching lines, with their stack traces', Icon: Filter },
+  { mode: 'hide', label: 'Hide matching', tip: 'Hide matching lines and their stack traces, like grep -v', Icon: EyeOff },
+]
+
+/** What the search query does to the list. Labels collapse to icons when the search row is narrow. */
+function SearchModeControl({ mode, onChange, palette }: {
+  mode: LogSearchMode
+  onChange: (mode: LogSearchMode) => void
+  palette: LogPalette
+}) {
+  return (
+    <div role="radiogroup" aria-label="Search mode" className={`flex items-center shrink-0 rounded border ${palette.border}`}>
+      {SEARCH_MODES.map(({ mode: m, label, tip, Icon }) => (
+        <Tooltip key={m} content={tip} delay={TIP_DELAY} position="bottom">
+          <button
+            role="radio"
+            aria-checked={mode === m}
+            aria-label={label}
+            onClick={() => onChange(m)}
+            className={`flex items-center gap-1 px-1.5 py-0.5 text-[11px] whitespace-nowrap transition-colors ${
+              mode === m ? palette.toolbarActive : `${palette.textTertiary} ${palette.hoverText}`
+            }`}
+          >
+            <Icon className="w-3.5 h-3.5" />
+            <span className="hidden @xl/logsearch:inline">{label}</span>
+          </button>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
+
 /** One pill in the export popover's scope and format rows. */
 function ExportChoice({ active, onClick, palette, children }: {
   active: boolean