@skyhook-io/k8s-ui 1.5.11 → 1.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/audit/AuditFindingsTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, useEffect } from 'react'
+import { useState, useMemo, useRef, useEffect, type Dispatch, type SetStateAction } from 'react'
 import { ShieldAlert, AlertTriangle, ChevronRight, CheckCircle2, Search, ExternalLink, MoreHorizontal, EyeOff, Layers } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { AuditFinding } from './AuditAlerts'
@@ -48,15 +48,35 @@ export interface AuditFindingsTableProps {
 }
 
 export function AuditFindingsTable({ groups, findings, checks, onResourceClick, onHideCheck, onHideCategory, onHideNamespace, multiCluster, onClusterClick }: AuditFindingsTableProps) {
-  const [categoryFilter, setCategoryFilter] = useState<string | null>(null)
-  const [severityFilter, setSeverityFilter] = useState<string | null>(null)
-  const [frameworkFilter, setFrameworkFilter] = useState<string | null>(null)
+  const [categoryFilter, setCategoryFilter] = useState<Set<string>>(new Set())
+  const [severityFilter, setSeverityFilter] = useState<Set<string>>(new Set())
+  const [frameworkFilter, setFrameworkFilter] = useState<Set<string>>(new Set())
   const [searchTerm, setSearchTerm] = useState('')
   const [expanded, setExpanded] = useState<Set<string>>(new Set())
   const [expandedNS, setExpandedNS] = useState<Set<string>>(new Set())
   const [groupByNS, setGroupByNS] = useState(false)
   const searchInputRef = useRef<HTMLInputElement>(null)
 
+  const toggleInSet = (setter: Dispatch<SetStateAction<Set<string>>>, value: string) => {
+    setter(prev => {
+      const next = new Set(prev)
+      if (next.has(value)) next.delete(value)
+      else next.add(value)
+      return next
+    })
+  }
+
+  const clearChipFilters = () => {
+    setCategoryFilter(new Set())
+    setSeverityFilter(new Set())
+    setFrameworkFilter(new Set())
+  }
+
+  const clearAllFilters = () => {
+    clearChipFilters()
+    setSearchTerm('')
+  }
+
   // "/" keyboard shortcut to focus search
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -88,13 +108,14 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
 
   const searchLower = searchTerm.toLowerCase()
 
-  // Match a finding against category/severity/framework filters
+  // Match a finding against category/severity/framework filters.
+  // Within a dimension, multiple selected values are OR'd. Across dimensions, AND.
   const matchesFinding = (f: AuditFinding) => {
-    if (categoryFilter && f.category !== categoryFilter) return false
-    if (severityFilter && f.severity !== severityFilter) return false
-    if (frameworkFilter && checks) {
-      const meta = checks[f.checkID]
-      if (!meta?.frameworks?.includes(frameworkFilter)) return false
+    if (categoryFilter.size > 0 && !categoryFilter.has(f.category)) return false
+    if (severityFilter.size > 0 && !severityFilter.has(f.severity)) return false
+    if (frameworkFilter.size > 0 && checks) {
+      const fws = checks[f.checkID]?.frameworks
+      if (!fws || !fws.some(fw => frameworkFilter.has(fw))) return false
     }
     return true
   }
@@ -141,7 +162,8 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
   }
 
   // Compute counts from filtered results (so summary reflects active filters)
-  const hasActiveFilters = !!(categoryFilter || severityFilter || frameworkFilter || searchTerm)
+  const hasActiveChipFilters = categoryFilter.size > 0 || severityFilter.size > 0 || frameworkFilter.size > 0
+  const hasActiveFilters = hasActiveChipFilters || searchTerm !== ''
   const filteredAllFindings = filteredGroups
     ? filteredGroups.flatMap(g => g.findings)
     : filteredFindings ?? []
@@ -243,28 +265,30 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
           )}
         </div>
 
-        {/* Row 2: Filter chips — three groups separated by dividers (All | Categories | Severities | Frameworks). */}
+        {/* Row 2: Filter chips — three groups separated by dividers (All | Categories | Severities | Frameworks).
+            Each chip is an independent toggle. Multiple chips within a dimension OR together;
+            dimensions AND together. */}
         <div className="flex flex-wrap items-center gap-1.5">
-          <FilterPill label="All" active={!categoryFilter && !severityFilter && !frameworkFilter} onClick={() => { setCategoryFilter(null); setSeverityFilter(null); setFrameworkFilter(null) }} />
+          <FilterPill label="All" active={!hasActiveChipFilters} onClick={clearChipFilters} />
           <span className="w-px h-5 bg-theme-border mx-2" />
           {CATEGORIES.map(cat => (
-            <FilterPill key={cat} label={cat} active={categoryFilter === cat} onClick={() => setCategoryFilter(categoryFilter === cat ? null : cat)} />
+            <FilterPill key={cat} label={cat} active={categoryFilter.has(cat)} onClick={() => toggleInSet(setCategoryFilter, cat)} />
           ))}
           <span className="w-px h-5 bg-theme-border mx-2" />
           {SEVERITIES.map(sev => (
             <FilterPill
               key={sev}
               label={sev === 'danger' ? 'Critical' : 'Warning'}
-              active={severityFilter === sev}
+              active={severityFilter.has(sev)}
               tone={sev === 'danger' ? 'danger' : 'warn'}
-              onClick={() => setSeverityFilter(severityFilter === sev ? null : sev)}
+              onClick={() => toggleInSet(setSeverityFilter, sev)}
             />
           ))}
           {frameworks.length > 0 && (
             <>
               <span className="w-px h-5 bg-theme-border mx-2" />
               {frameworks.map(fw => (
-                <FilterPill key={fw} label={fw} active={frameworkFilter === fw} onClick={() => setFrameworkFilter(frameworkFilter === fw ? null : fw)} />
+                <FilterPill key={fw} label={fw} active={frameworkFilter.has(fw)} onClick={() => toggleInSet(setFrameworkFilter, fw)} />
               ))}
             </>
           )}
@@ -292,7 +316,7 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
             action={
               <button
                 type="button"
-                onClick={() => { setCategoryFilter(null); setSeverityFilter(null); setFrameworkFilter(null); setSearchTerm('') }}
+                onClick={clearAllFilters}
                 className="badge badge-sm border border-theme-border bg-theme-elevated text-theme-text-primary hover:bg-theme-hover transition-colors"
               >
                 Clear all filters
@@ -309,9 +333,16 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
             const nsWarning = nsGroups.reduce((n, g) => n + g.warning, 0)
             return (
               <div key={ns}>
-                <button
+                <div
+                  role="button"
+                  tabIndex={0}
+                  aria-expanded={nsExpanded}
                   onClick={() => toggleNS(ns)}
-                  className="group flex items-center gap-3 w-full px-4 py-2 rounded-lg hover:bg-theme-hover/30 transition-colors text-left"
+                  onKeyDown={(e) => {
+                    if (e.target !== e.currentTarget) return
+                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleNS(ns) }
+                  }}
+                  className="group flex items-center gap-3 w-full px-4 py-2 rounded-lg hover:bg-theme-hover/30 transition-colors text-left cursor-pointer focus-visible:ring-2 focus-visible:ring-theme-text-primary/20 focus-visible:outline-none"
                 >
                   <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary shrink-0 transition-transform duration-200', nsExpanded && 'rotate-90')} />
                   <span className="text-sm font-semibold text-theme-text-primary">{ns}</span>
@@ -324,7 +355,7 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
                   {onHideNamespace && ns !== '(cluster-scoped)' && (
                     <ContextMenu items={[{ label: `Hide ${ns} namespace`, onClick: () => onHideNamespace(ns) }]} />
                   )}
-                </button>
+                </div>
                 <div
                   className="grid transition-[grid-template-rows] duration-200 ease-out"
                   style={{ gridTemplateRows: nsExpanded ? '1fr' : '0fr' }}
@@ -422,9 +453,16 @@ function ResourceGroupRow({ group: g, checks, expanded, onToggle, onResourceClic
 
   return (
     <div>
-      <button
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
         onClick={() => onToggle(key)}
-        className="group flex items-center gap-3 w-full px-4 py-2.5 rounded-lg hover:bg-theme-hover/50 transition-colors text-left focus-visible:ring-2 focus-visible:ring-theme-text-primary/20 focus-visible:outline-none"
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle(key) }
+        }}
+        className="group flex items-center gap-3 w-full px-4 py-2.5 rounded-lg hover:bg-theme-hover/50 transition-colors text-left cursor-pointer focus-visible:ring-2 focus-visible:ring-theme-text-primary/20 focus-visible:outline-none"
       >
         <ChevronRight className={clsx('w-3.5 h-3.5 text-theme-text-tertiary shrink-0 transition-transform duration-200', isExpanded && 'rotate-90')} />
         {hasDanger ? (
@@ -434,16 +472,14 @@ function ResourceGroupRow({ group: g, checks, expanded, onToggle, onResourceClic
         )}
         <span className="text-xs text-theme-text-tertiary shrink-0">{g.kind}</span>
         {onResourceClick ? (
-          <span
-            role="link"
-            tabIndex={0}
+          <button
+            type="button"
             onClick={(e) => { e.stopPropagation(); onResourceClick(g.kind, g.namespace, g.name) }}
-            onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); onResourceClick(g.kind, g.namespace, g.name) } }}
-            className="text-sm font-medium text-skyhook-500 hover:text-skyhook-400 hover:underline cursor-pointer truncate max-w-[300px] inline-flex items-center gap-1"
+            className="text-sm font-medium text-skyhook-500 hover:text-skyhook-400 hover:underline cursor-pointer truncate max-w-[300px] inline-flex items-center gap-1 text-left"
           >
             {showNamespace && g.namespace ? `${g.namespace} / ` : ''}{g.name}
             <ExternalLink className="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-          </span>
+          </button>
         ) : (
           <span className="text-sm font-medium text-theme-text-primary truncate max-w-[300px]">
             {showNamespace && g.namespace ? `${g.namespace} / ` : ''}{g.name}
@@ -457,7 +493,7 @@ function ResourceGroupRow({ group: g, checks, expanded, onToggle, onResourceClic
         {showNamespace && onHideNamespace && g.namespace && (
           <ContextMenu items={[{ label: `Hide ${g.namespace} namespace`, onClick: () => onHideNamespace(g.namespace) }]} />
         )}
-      </button>
+      </div>
       <div
         className="grid transition-[grid-template-rows] duration-200 ease-out"
         style={{ gridTemplateRows: isExpanded ? '1fr' : '0fr' }}

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -4,9 +4,12 @@ import {
   useMemo,
   useRef,
   useState,
+  forwardRef,
+  useImperativeHandle,
 } from 'react'
-import { ChevronDown, Check, Loader2, Search, Server, X } from 'lucide-react'
+import { ChevronDown, Check, FolderOpen, Loader2, Search, Server, X } from 'lucide-react'
 import { ClusterName } from '../ui/ClusterName'
+import { MiddleEllipsis } from '../ui/MiddleEllipsis'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
 
 export interface ClusterSwitcherItem {
@@ -16,6 +19,10 @@ export interface ClusterSwitcherItem {
   name: string
   secondary?: string
   badge?: string
+  /** Origin label, rendered as a folder-icon line under the name.
+   *  Caller must only set this when 2+ distinct sources exist — the
+   *  chip surfaces unconditionally when present. */
+  sourceLabel?: string
   group?: { key: string; label?: string }
   disabled?: boolean
   status?: StatusTone
@@ -27,11 +34,18 @@ export interface ClusterSwitcherItem {
   title?: string
 }
 
+export interface ClusterSwitcherHandle {
+  open: () => void
+}
+
 export interface ClusterSwitcherProps {
   currentId?: string
   /** Raw context / display string. Pass it as-is — the trigger renders
    *  through ClusterName, which handles parse + provider badge + tooltip. */
   currentName: string
+  /** Trigger-side counterpart to {@link ClusterSwitcherItem.sourceLabel}.
+   *  Only pass when 2+ kubeconfig sources are loaded. */
+  currentSourceLabel?: string
   items: ClusterSwitcherItem[]
   onSelect?: (item: ClusterSwitcherItem) => void
   searchable?: boolean
@@ -54,9 +68,10 @@ export interface ClusterSwitcherProps {
 // full — comfortably covering parsed cluster names from any provider.
 const TRIGGER_NAME_MAX_WIDTH = 'max-w-[160px] sm:max-w-[260px] xl:max-w-[400px]'
 
-export function ClusterSwitcher({
+export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcherProps>(({
   currentId,
   currentName,
+  currentSourceLabel,
   items,
   onSelect,
   searchable = true,
@@ -69,13 +84,19 @@ export function ClusterSwitcher({
   errorSlot,
   className = '',
   align = 'left',
-}: ClusterSwitcherProps) {
+}, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
   const rootRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
 
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (!disabled && !loading) setIsOpen(true)
+    }
+  }), [disabled, loading])
+
   const groups = useMemo(() => {
     const q = search.trim().toLowerCase()
     const matches = (item: ClusterSwitcherItem) => {
@@ -84,6 +105,7 @@ export function ClusterSwitcher({
         item.name.toLowerCase().includes(q) ||
         item.secondary?.toLowerCase().includes(q) ||
         item.badge?.toLowerCase().includes(q) ||
+        item.sourceLabel?.toLowerCase().includes(q) ||
         item.group?.label?.toLowerCase().includes(q)
       )
     }
@@ -175,7 +197,7 @@ export function ClusterSwitcher({
         onClick={() => setIsOpen(v => !v)}
         disabled={disabled || loading}
         className={`
-          flex items-center gap-1.5 px-2.5 py-1.5
+          flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
           bg-theme-elevated border border-theme-border rounded text-sm font-medium
           text-theme-text-primary hover:bg-theme-hover hover:border-theme-border-light
           transition-colors cursor-pointer
@@ -195,14 +217,31 @@ export function ClusterSwitcher({
           // while the dropdown is open — the popover already shows the raw
           // context inline (per-row secondary line), and an extra hover
           // tooltip would just overlap the search input.
-          <ClusterName
-            name={currentName}
-            fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
-            className={TRIGGER_NAME_MAX_WIDTH}
-            noTooltip={isOpen}
-          />
+          <>
+            <ClusterName
+              name={currentName}
+              fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
+              className={TRIGGER_NAME_MAX_WIDTH}
+              noTooltip={isOpen}
+            />
+            {currentSourceLabel && (
+              // Icon-only on the trigger: long folder paths (the very case
+              // that motivates the chip) middle-truncate to something
+              // useless like "kube-cluster-pro…ion-eu" and steal width
+              // from the cluster name + nav. The folder icon signals
+              // "multi-source — disambiguation in dropdown"; hover or
+              // open the dropdown for the full label.
+              <span
+                className="shrink-0 inline-flex items-center text-theme-text-tertiary opacity-80"
+                title={`From kubeconfig: ${currentSourceLabel}`}
+                aria-label={`From kubeconfig: ${currentSourceLabel}`}
+              >
+                <FolderOpen className="w-3 h-3" />
+              </span>
+            )}
+          </>
         )}
-        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-3 h-3 ml-auto transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {isOpen && (
@@ -308,6 +347,20 @@ export function ClusterSwitcher({
                               </span>
                             )}
                           </div>
+                          {item.sourceLabel && (
+                            // Source chip lives on its own line under the
+                            // name so long folder paths get the full row
+                            // width to render via MiddleEllipsis. Inline
+                            // would steal width from the name and force
+                            // both to truncate.
+                            <div
+                              className="flex items-center gap-0.5 text-[10px] text-theme-text-tertiary opacity-80 mt-0.5"
+                              title={`From kubeconfig: ${item.sourceLabel}`}
+                            >
+                              <FolderOpen className="w-2.5 h-2.5 shrink-0" />
+                              <MiddleEllipsis text={item.sourceLabel} className="font-mono" />
+                            </div>
+                          )}
                           {item.secondary && (
                             <div
                               className="text-[10px] text-theme-text-tertiary opacity-70 truncate mt-0.5"
@@ -344,4 +397,4 @@ export function ClusterSwitcher({
       )}
     </div>
   )
-}
+})

package/src/components/gitops/ManagedResourcesList.tsx

@@ -132,8 +132,10 @@ function ResourceItem({ resource, onClick, showHealth }: ResourceItemProps) {
 
   const content = (
     <div className="flex items-center gap-2 py-0.5">
-      {showHealth && resource.health && (
-        <HealthDot health={resource.health} />
+      {showHealth && (
+        <span className="shrink-0 w-1.5 h-1.5 inline-flex items-center justify-center">
+          {resource.health && <HealthDot health={resource.health} />}
+        </span>
       )}
       <span className="text-xs text-theme-text-secondary truncate" title={displayName}>
         {displayName}

package/src/components/logs/LogCore.tsx

@@ -72,6 +72,22 @@ const TIMESTAMP_FORMAT_ORDER: TimestampFormat[] = [
   'time-local', 'time-utc', 'iso-local', 'iso-utc', 'relative', 'epoch',
 ]
 
+export type StructuredMode = 'compact' | 'expanded' | 'raw'
+
+const STRUCTURED_MODE_ORDER: StructuredMode[] = ['compact', 'expanded', 'raw']
+
+const STRUCTURED_MODE_LABELS: Record<StructuredMode, string> = {
+  compact: 'Compact',
+  expanded: 'Expanded',
+  raw: 'Raw',
+}
+
+const STRUCTURED_MODE_DESCRIPTIONS: Record<StructuredMode, string> = {
+  compact: 'Summary line with field count',
+  expanded: 'All fields shown as a tree',
+  raw: 'Original log line, unparsed',
+}
+
 const TIMESTAMP_FORMAT_SHORT_LABELS: Record<TimestampFormat, string> = {
   'time-local': 'Local time',
   'time-utc': 'UTC time',
@@ -163,7 +179,13 @@ export function LogCore({
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
   const [showTsMenu, setShowTsMenu] = useState(false)
-  const [expandAllStructured, setExpandAllStructured] = useState(false)
+  const [showStructuredMenu, setShowStructuredMenu] = useState(false)
+  const [structuredMode, setStructuredMode] = useState<StructuredMode>(() => {
+    try {
+      const v = localStorage.getItem('radar-logs-structured-mode') as StructuredMode | null
+      return v && STRUCTURED_MODE_ORDER.includes(v) ? v : 'compact'
+    } catch { return 'compact' }
+  })
   const [expandedStacks, setExpandedStacks] = useState<Set<number>>(() => new Set())
 
   // Re-render every 15s so "relative" timestamps tick forward during idle viewing.
@@ -225,6 +247,33 @@ export function LogCore({
     return () => window.removeEventListener('click', handleClick)
   }, [showTsMenu])
 
+  const structuredMenuRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!showStructuredMenu) return
+    const handleClick = (e: MouseEvent) => {
+      if (structuredMenuRef.current?.contains(e.target as Node)) return
+      setShowStructuredMenu(false)
+    }
+    window.addEventListener('click', handleClick)
+    return () => window.removeEventListener('click', handleClick)
+  }, [showStructuredMenu])
+
+  const pickStructuredMode = useCallback((mode: StructuredMode) => {
+    setStructuredMode(mode)
+    try { localStorage.setItem('radar-logs-structured-mode', mode) } catch {}
+    setShowStructuredMenu(false)
+  }, [])
+
+  // Icon click cycles through the three modes; chevron exposes the explicit picker.
+  const cycleStructuredMode = useCallback(() => {
+    setStructuredMode(prev => {
+      const idx = STRUCTURED_MODE_ORDER.indexOf(prev)
+      const next = STRUCTURED_MODE_ORDER[(idx + 1) % STRUCTURED_MODE_ORDER.length]
+      try { localStorage.setItem('radar-logs-structured-mode', next) } catch {}
+      return next
+    })
+  }, [])
+
   // Keyboard shortcut: Ctrl+F to open search
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -429,18 +478,59 @@ export function LogCore({
 
         <div className="flex-1" />
 
-        {/* Expand all structured logs toggle */}
+        {/* Structured-log display mode: icon cycles compact→expanded→raw, chevron picks explicitly. */}
         {hasStructuredEntries && (
-          <Tooltip content={expandAllStructured ? 'Collapse all structured' : 'Expand all structured'} delay={TIP_DELAY} position="bottom">
-            <button
-              onClick={() => setExpandAllStructured(prev => !prev)}
-              className={`p-1.5 rounded transition-colors ${
-                expandAllStructured ? palette.toolbarActive : iconBtnInactive
-              }`}
-            >
-              <Braces className="w-4 h-4" />
-            </button>
-          </Tooltip>
+          <div className="flex items-center">
+            <Tooltip content={`Structured: ${STRUCTURED_MODE_LABELS[structuredMode]} — click to cycle`} delay={TIP_DELAY} position="bottom">
+              <button
+                onClick={cycleStructuredMode}
+                className={`p-1.5 rounded-l transition-colors ${
+                  structuredMode === 'compact' ? iconBtnInactive : palette.toolbarActive
+                }`}
+                aria-label={`Structured log display mode: ${STRUCTURED_MODE_LABELS[structuredMode]}`}
+              >
+                <Braces className="w-4 h-4" />
+              </button>
+            </Tooltip>
+            <div className="relative" ref={structuredMenuRef}>
+              <Tooltip content="Pick structured display mode" delay={TIP_DELAY} position="bottom">
+                <button
+                  onClick={() => setShowStructuredMenu(prev => !prev)}
+                  className={`px-2 py-1.5 rounded-r text-[10px] font-medium transition-colors whitespace-nowrap ${
+                    structuredMode === 'compact' ? iconBtnInactiveTertiary : palette.toolbarActive
+                  }`}
+                  aria-label="Pick structured log display mode"
+                >
+                  <span className="inline-flex items-center gap-1">
+                    <span>{STRUCTURED_MODE_LABELS[structuredMode]}</span>
+                    <ChevronDown className="w-3 h-3" />
+                  </span>
+                </button>
+              </Tooltip>
+              {showStructuredMenu && (
+                <div className={`absolute top-full right-0 mt-1 w-56 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50`}>
+                  <div className={`px-3 py-1.5 text-[10px] uppercase tracking-wide ${palette.textTertiary} border-b ${palette.border}`}>
+                    Structured display
+                  </div>
+                  {STRUCTURED_MODE_ORDER.map(mode => (
+                    <button
+                      key={mode}
+                      onClick={() => pickStructuredMode(mode)}
+                      className={`w-full text-left px-3 py-1.5 text-xs ${palette.hoverBg} flex items-start justify-between gap-2 ${
+                        structuredMode === mode ? palette.textPrimary : palette.textSecondary
+                      }`}
+                    >
+                      <span className="flex flex-col">
+                        <span>{STRUCTURED_MODE_LABELS[mode]}</span>
+                        <span className={`text-[10px] ${palette.textTertiary}`}>{STRUCTURED_MODE_DESCRIPTIONS[mode]}</span>
+                      </span>
+                      {structuredMode === mode && <span className={`text-[10px] ${palette.textAccent} mt-0.5`}>✓</span>}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
         )}
 
         {/* Timestamp toggle + format picker */}
@@ -731,7 +821,8 @@ export function LogCore({
                 ansiEnabled={ansiEnabled}
                 isCurrentMatch={group.head.id === currentHighlightId}
                 wordWrap={wordWrap}
-                defaultExpanded={expandAllStructured}
+                defaultExpanded={structuredMode === 'expanded'}
+                rawStructured={structuredMode === 'raw'}
                 onFilterValue={handleFilterValue}
                 isStackExpanded={expandedStacks.has(group.head.id)}
                 onToggleStack={toggleStackExpanded}
@@ -785,6 +876,8 @@ interface LogLineProps {
   isCurrentMatch: boolean
   wordWrap: boolean
   defaultExpanded: boolean
+  /** When true, JSON/logfmt entries render as plain raw text instead of via StructuredLogLine. */
+  rawStructured: boolean
   onFilterValue?: (value: string) => void
   /** Optional lead element rendered at the start of the row (e.g. stack-trace toggle). */
   leadSlot?: ReactNode
@@ -804,6 +897,7 @@ function LogLine({
   isCurrentMatch,
   wordWrap,
   defaultExpanded,
+  rawStructured,
   onFilterValue,
   leadSlot,
   isDark,
@@ -825,7 +919,7 @@ function LogLine({
         dangerouslySetInnerHTML={{ __html: highlighted }}
       />
     )
-  } else if (entry.isJson || entry.isLogfmt) {
+  } else if ((entry.isJson || entry.isLogfmt) && !rawStructured) {
     contentElement = (
       <StructuredLogLine
         content={entry.content}
@@ -901,6 +995,7 @@ interface LogGroupItemProps {
   isCurrentMatch: boolean
   wordWrap: boolean
   defaultExpanded: boolean
+  rawStructured: boolean
   onFilterValue: (value: string) => void
   isStackExpanded: boolean
   onToggleStack: (id: number) => void

package/src/components/resources/ResourcesView.tsx

@@ -156,7 +156,7 @@ const WORKLOAD_KINDS = new Set(['deployments', 'statefulsets', 'daemonsets'])
 
 // Columns to skip for auto-detected filters (high cardinality, text-like, or non-filterable)
 const SKIP_FILTER_COLUMNS = new Set([
-  'name', 'namespace', 'age', 'keys', 'size', 'images', 'domains', 'hosts', 'rules',
+  'name', 'age', 'keys', 'size', 'images', 'domains', 'hosts', 'rules',
   'ports', 'message', 'url', 'ref', 'revision', 'path', 'selector', 'ready', 'restarts',
   'completions', 'duration', 'schedule', 'lastRun', 'target', 'replicas', 'metrics',
   'capacity', 'accessModes', 'volume', 'step', 'progress', 'template', 'expires',
@@ -3471,7 +3471,7 @@ export function ResourcesView({
           {lastUpdated && (
             <div className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
               <Clock className="w-3.5 h-3.5" />
-              <span>Updated {formatAge(lastUpdated.toISOString())}</span>
+              <span>Updated <span className="inline-block min-w-[4ch] tabular-nums">{formatAge(lastUpdated.toISOString())}</span></span>
             </div>
           )}
           {/* Column picker */}
@@ -3578,6 +3578,23 @@ export function ResourcesView({
                   <X className="w-3.5 h-3.5" />
                 </button>
               )}
+              {/*
+                The sidebar's count badge shows the cluster-wide
+                total for the selected kind (from resourceCounts) and
+                deliberately stays unfiltered. When a search yields
+                zero results the user can think the badge is lying.
+                Spell out that the badge is the cluster total, not
+                the filtered count.
+              */}
+              {searchTerm && (() => {
+                const totalForKind = counts[selectedKind.group ? `${selectedKind.group}/${selectedKind.kind}` : selectedKind.kind] ?? 0
+                if (totalForKind === 0) return null
+                return (
+                  <p className="text-xs mt-1 text-theme-text-disabled">
+                    The sidebar shows {pluralize(totalForKind, selectedKind.kind)} in the cluster — the count is unfiltered.
+                  </p>
+                )
+              })()}
               {namespaces.length > 0 && <p className="text-sm mt-1 text-theme-text-disabled">Searching in {namespaces.length === 1 ? `namespace: ${namespaces[0]}` : `${namespaces.length} namespaces`}</p>}
               {/* Show active filters as dismissible badges so user can clear them */}
               {(() => {

package/src/components/resources/renderers/KarpenterNodePoolRenderer.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { KarpenterNodePoolRenderer } from './KarpenterNodePoolRenderer'
+
+describe('KarpenterNodePoolRenderer', () => {
+  it('renders CPU quantities expressed as millicore strings', () => {
+    const html = renderToString(
+      <KarpenterNodePoolRenderer
+        data={{
+          spec: { limits: { cpu: '12000m' } },
+          status: { resources: { cpu: '6000m' } },
+        }}
+      />,
+    )
+
+    expect(html).toContain('6 / 12')
+  })
+
+  it('renders non-string CPU quantities without throwing', () => {
+    expect(() =>
+      renderToString(
+        <KarpenterNodePoolRenderer
+          data={{
+            spec: { limits: { cpu: 16 } },
+            status: { resources: { cpu: 12 } },
+          }}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})

package/src/components/resources/renderers/KarpenterNodePoolRenderer.tsx

@@ -9,13 +9,13 @@ import {
   getNodePoolWeight,
 } from '../resource-utils-karpenter'
 
-function formatCpuCores(value: string): string {
-  // Karpenter status.resources CPU is typically in millicores (e.g. "12000m") or cores (e.g. "12")
-  if (value.endsWith('m')) {
-    const millis = parseInt(value, 10)
+function formatCpuCores(value: unknown): string {
+  const quantity = String(value)
+  if (quantity.endsWith('m')) {
+    const millis = parseInt(quantity, 10)
     if (!isNaN(millis)) return String(millis / 1000)
   }
-  return value
+  return quantity
 }
 
 

package/src/components/resources/resource-utils.ts

@@ -1636,6 +1636,8 @@ export function getCellFilterValue(resource: any, column: string, kind: string):
   const kindLower = kind.toLowerCase()
 
   switch (column) {
+    case 'namespace':
+      return resource.metadata?.namespace || ''
     case 'type':
       if (kindLower === 'secrets' || kindLower === 'sealedsecrets') return getSecretType(resource).type
       if (kindLower === 'services') return resource.spec?.type || ''

package/src/components/resources/resources-search-sidebar-hint.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest'
+import { pluralize } from '../../utils/pluralize'
+import type { SelectedKindInfo } from './ResourcesSidebar'
+
+// Mirrors the empty-state hint rule inside ResourcesView (kept in
+// sync by reuse) — pure so we can pin the lookup + render contract
+// without rendering the React component. See
+// `packages/k8s-ui/src/components/resources/ResourcesView.tsx`
+// search for "the count is unfiltered".
+function sidebarHint(
+  counts: Record<string, number>,
+  selectedKind: SelectedKindInfo,
+  searchTerm: string,
+): string | null {
+  if (!searchTerm) return null
+  const key = selectedKind.group ? `${selectedKind.group}/${selectedKind.kind}` : selectedKind.kind
+  const totalForKind = counts[key] ?? 0
+  if (totalForKind === 0) return null
+  return `The sidebar shows ${pluralize(totalForKind, selectedKind.kind)} in the cluster — the count is unfiltered.`
+}
+
+describe('ResourcesView empty-search sidebar hint (SKY-828 bug 46)', () => {
+  // The bug: sidebar count badge stays unfiltered and shows the
+  // cluster-wide total per kind. When a search returns zero rows
+  // (e.g. "5 Pods" in sidebar, "No Pods found" in pane) the user
+  // reads the badge as a lie. The empty-state appends a sentence
+  // making the unfiltered nature explicit. The rule must:
+  //   1. Suppress entirely when there's no active search.
+  //   2. Suppress when the cluster total for the kind is 0
+  //      (no badge to explain → no hint).
+  //   3. Look up the count under `${group}/${kind}` for grouped
+  //      kinds, plain `kind` for core kinds (matches sidebar key).
+  //   4. Pluralize via pluralize() so "Ingress" → "Ingresses",
+  //      "NetworkPolicy" → "NetworkPolicies" (regression of the
+  //      naive `${kind}s` Cursor Bugbot caught in 80eb64b).
+  //   5. Singular for n===1: "1 Pod", not "1 Pods".
+
+  const pod: SelectedKindInfo = { name: 'pods', kind: 'Pod', group: '' }
+
+  it('returns null when there is no active search', () => {
+    expect(sidebarHint({ Pod: 232 }, pod, '')).toBeNull()
+  })
+
+  it('returns null when the cluster total for the kind is 0', () => {
+    expect(sidebarHint({ Pod: 0 }, pod, 'xyz')).toBeNull()
+  })
+
+  it('returns null when the kind is missing from counts', () => {
+    expect(sidebarHint({}, pod, 'xyz')).toBeNull()
+  })
+
+  it('formats the sentence with the cluster total and pluralized kind', () => {
+    expect(sidebarHint({ Pod: 232 }, pod, 'xyz')).toBe(
+      'The sidebar shows 232 Pods in the cluster — the count is unfiltered.',
+    )
+  })
+
+  it('uses singular noun when total is 1', () => {
+    expect(sidebarHint({ Pod: 1 }, pod, 'xyz')).toBe(
+      'The sidebar shows 1 Pod in the cluster — the count is unfiltered.',
+    )
+  })
+
+  it('looks up grouped kinds under `${group}/${kind}`', () => {
+    const ar: SelectedKindInfo = { name: 'rollouts', kind: 'Rollout', group: 'argoproj.io' }
+    const counts = { Rollout: 999, 'argoproj.io/Rollout': 4 }
+    expect(sidebarHint(counts, ar, 'xyz')).toBe(
+      'The sidebar shows 4 Rollouts in the cluster — the count is unfiltered.',
+    )
+  })
+
+  it('pluralizes Ingress correctly (regression: not "Ingresss")', () => {
+    const ing: SelectedKindInfo = { name: 'ingresses', kind: 'Ingress', group: '' }
+    expect(sidebarHint({ Ingress: 3 }, ing, 'xyz')).toBe(
+      'The sidebar shows 3 Ingresses in the cluster — the count is unfiltered.',
+    )
+  })
+
+  it('pluralizes NetworkPolicy correctly (regression: not "NetworkPolicys")', () => {
+    const np: SelectedKindInfo = { name: 'networkpolicies', kind: 'NetworkPolicy', group: 'networking.k8s.io' }
+    expect(sidebarHint({ 'networking.k8s.io/NetworkPolicy': 2 }, np, 'xyz')).toBe(
+      'The sidebar shows 2 NetworkPolicies in the cluster — the count is unfiltered.',
+    )
+  })
+})

package/src/components/topology/TopologySearch.tsx

@@ -9,6 +9,20 @@ interface TopologySearchProps {
   nodes: TopologyNode[]
   onNodeSelect?: (node: TopologyNode) => void
   onZoomToNode?: (nodeId: string) => void
+  /**
+   * Optional unfiltered node set. When the parent has applied a
+   * view-mode filter (e.g. Fleet mode hides Pods/Deployments and
+   * only shows CAPI kinds), it should still pass the full topology
+   * here so the empty-state can tell users "your query matches X
+   * resources hidden by the current view" rather than the
+   * misleading "No resources found." (SKY-828 bug 45)
+   */
+  allNodes?: TopologyNode[]
+  /**
+   * Human-readable label for the current view mode. Used in the
+   * empty-state hint above. Defaults to "current view".
+   */
+  viewModeLabel?: string
 }
 
 // Icon mapping for different resource kinds
@@ -50,33 +64,47 @@ function getKindColor(kind: string): string {
   }
 }
 
-export function TopologySearch({ nodes, onNodeSelect, onZoomToNode }: TopologySearchProps) {
+export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel }: TopologySearchProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
   const inputRef = useRef<HTMLInputElement>(null)
   const resultsRef = useRef<HTMLDivElement>(null)
 
+  const matchesQuery = useCallback((node: TopologyNode, lowerQuery: string) => {
+    const name = node.name.toLowerCase()
+    const kind = node.kind.toLowerCase()
+    const namespace = (node.data.namespace as string || '').toLowerCase()
+    return (
+      name.includes(lowerQuery) ||
+      kind.includes(lowerQuery) ||
+      namespace.includes(lowerQuery) ||
+      `${kind}/${name}`.includes(lowerQuery) ||
+      `${namespace}/${name}`.includes(lowerQuery)
+    )
+  }, [])
+
   // Filter nodes based on query
   const filteredNodes = useMemo(() => {
     if (!query.trim()) return []
-
     const lowerQuery = query.toLowerCase()
     return nodes
-      .filter(node => {
-        const name = node.name.toLowerCase()
-        const kind = node.kind.toLowerCase()
-        const namespace = (node.data.namespace as string || '').toLowerCase()
-        return (
-          name.includes(lowerQuery) ||
-          kind.includes(lowerQuery) ||
-          namespace.includes(lowerQuery) ||
-          `${kind}/${name}`.includes(lowerQuery) ||
-          `${namespace}/${name}`.includes(lowerQuery)
-        )
-      })
+      .filter(node => matchesQuery(node, lowerQuery))
       .slice(0, 10) // Limit results
-  }, [nodes, query])
+  }, [nodes, query, matchesQuery])
+
+  // Count of matches in the unfiltered topology that the current
+  // view-mode filter is hiding. We only compute this when there's
+  // a query AND the visible set returned zero results, so the cost
+  // is bounded to actual no-result interactions.
+  // (SKY-828 bug 45: Fleet view hides Pods, so searching pod names
+  // returned "No resources found" — misleading.)
+  const hiddenMatchCount = useMemo(() => {
+    if (!query.trim() || filteredNodes.length > 0 || !allNodes) return 0
+    const lowerQuery = query.toLowerCase()
+    const visibleIds = new Set(nodes.map(n => n.id))
+    return allNodes.filter(n => !visibleIds.has(n.id) && matchesQuery(n, lowerQuery)).length
+  }, [query, filteredNodes.length, allNodes, nodes, matchesQuery])
 
   // Reset selection when results change
   useEffect(() => {
@@ -216,7 +244,12 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode }: TopologySe
               {query && filteredNodes.length === 0 && (
                 <div className="px-4 py-8 text-center text-theme-text-tertiary">
                   <Search className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                  <p>No resources found for "{query}"</p>
+                  <p>No resources found for "{query}"{viewModeLabel ? ` in ${viewModeLabel}` : ''}</p>
+                  {hiddenMatchCount > 0 && (
+                    <p className="mt-2 text-xs text-amber-400">
+                      {hiddenMatchCount} {hiddenMatchCount === 1 ? 'match is' : 'matches are'} hidden by the current view{viewModeLabel ? ` (${viewModeLabel})` : ''}. Switch view to see them.
+                    </p>
+                  )}
                 </div>
               )}
 

package/src/components/topology/topology-search-match.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import type { TopologyNode } from '../../types'
+
+// Mirrors the matching predicate inside TopologySearch (kept in sync
+// by reuse) — pure so we can pin the matching rule without rendering
+// the React component.
+function matchesQuery(node: TopologyNode, lowerQuery: string): boolean {
+  const name = node.name.toLowerCase()
+  const kind = node.kind.toLowerCase()
+  const namespace = (node.data.namespace as string || '').toLowerCase()
+  return (
+    name.includes(lowerQuery) ||
+    kind.includes(lowerQuery) ||
+    namespace.includes(lowerQuery) ||
+    `${kind}/${name}`.includes(lowerQuery) ||
+    `${namespace}/${name}`.includes(lowerQuery)
+  )
+}
+
+function countHidden(allNodes: TopologyNode[], visibleNodes: TopologyNode[], query: string): number {
+  if (!query.trim()) return 0
+  const lowerQuery = query.toLowerCase()
+  // First check whether the visible set already has matches — the
+  // hint should only appear when the visible search yielded zero.
+  const visibleMatches = visibleNodes.filter(n => matchesQuery(n, lowerQuery))
+  if (visibleMatches.length > 0) return 0
+  const visibleIds = new Set(visibleNodes.map(n => n.id))
+  return allNodes.filter(n => !visibleIds.has(n.id) && matchesQuery(n, lowerQuery)).length
+}
+
+function makeNode(id: string, kind: string, name: string, namespace = 'default'): TopologyNode {
+  // Tests only need the four fields the matcher reads — cast through
+  // unknown so the partial shape doesn't have to satisfy the full
+  // TopologyNode type.
+  return {
+    id,
+    kind,
+    name,
+    data: { namespace },
+  } as unknown as TopologyNode
+}
+
+describe('TopologySearch hidden-match counting (SKY-828 bug 45)', () => {
+  // The bug: in Fleet topology view (which only shows CAPI kinds),
+  // searching pod names returned "No resources found" — misleading
+  // when the cluster has 338 pods. We compute a hidden-match count
+  // so the empty-state can say "X matches are hidden by the current
+  // view; switch view to see them."
+  //
+  // The count should:
+  //  1. Be 0 when the visible set has any match (don't shame the
+  //     visible empty-state).
+  //  2. Otherwise count nodes that match in the unfiltered set but
+  //     are NOT in the visible set.
+  //  3. Match by name, kind, namespace, kind/name, or
+  //     namespace/name (case-insensitive).
+
+  it('returns 0 when visible nodes contain a match', () => {
+    const visible = [makeNode('a', 'Cluster', 'prod')]
+    const all = [
+      ...visible,
+      makeNode('b', 'Pod', 'prod-app'), // would also match "prod"
+    ]
+    expect(countHidden(all, visible, 'prod')).toBe(0)
+  })
+
+  it('returns count of hidden matches when visible has none (Fleet → pod search)', () => {
+    const visible = [
+      makeNode('cluster-1', 'Cluster', 'prod-cluster'),
+      makeNode('machine-1', 'Machine', 'prod-machine-1'),
+    ]
+    const all = [
+      ...visible,
+      makeNode('pod-1', 'Pod', '3scale-gateway-abc'),
+      makeNode('pod-2', 'Pod', '3scale-system-xyz'),
+      makeNode('pod-3', 'Pod', 'billing-api-789'),
+    ]
+    expect(countHidden(all, visible, '3scale')).toBe(2)
+    expect(countHidden(all, visible, 'billing')).toBe(1)
+  })
+
+  it('matches case-insensitively', () => {
+    const visible = [makeNode('a', 'Cluster', 'prod')]
+    const all = [...visible, makeNode('b', 'Pod', 'MyApp')]
+    expect(countHidden(all, visible, 'myapp')).toBe(1)
+    expect(countHidden(all, visible, 'MYAPP')).toBe(1)
+  })
+
+  it('matches by namespace as well as name', () => {
+    const visible = [makeNode('a', 'Cluster', 'prod')]
+    const all = [
+      ...visible,
+      makeNode('p1', 'Pod', 'frontend', 'billing'),
+      makeNode('p2', 'Pod', 'backend', 'billing'),
+    ]
+    expect(countHidden(all, visible, 'billing')).toBe(2)
+  })
+
+  it('returns 0 for an empty/whitespace query', () => {
+    const visible: TopologyNode[] = []
+    const all = [makeNode('a', 'Pod', 'foo')]
+    expect(countHidden(all, visible, '')).toBe(0)
+    expect(countHidden(all, visible, '   ')).toBe(0)
+  })
+
+  it('does not double-count: a node visible AND matching is excluded from hidden', () => {
+    const visible = [makeNode('a', 'Pod', 'foo-1')]
+    const all = [...visible, makeNode('b', 'Pod', 'foo-2')]
+    // visible has a match → hint suppressed entirely
+    expect(countHidden(all, visible, 'foo')).toBe(0)
+  })
+})

package/src/types/core.ts

@@ -329,6 +329,9 @@ export interface ContextInfo {
   user: string
   namespace: string
   isCurrent: boolean
+  /** Source kubeconfig label (e.g. "kube-cluster-paris"). Set by backend
+   *  only when 2+ kubeconfig files are loaded; empty otherwise. */
+  source?: string
 }
 
 // Namespace
@@ -439,6 +442,8 @@ export interface APIResource {
 export interface HelmRelease {
   name: string
   namespace: string
+  // Empty means Helm stores release metadata in namespace.
+  storageNamespace?: string
   chart: string
   chartVersion: string
   appVersion: string
@@ -463,6 +468,8 @@ export interface HelmRevision {
 export interface HelmReleaseDetail {
   name: string
   namespace: string
+  // Empty means Helm stores release metadata in namespace.
+  storageNamespace?: string
   chart: string
   chartVersion: string
   appVersion: string
@@ -520,6 +527,7 @@ export interface ManifestDiff {
 export interface SelectedHelmRelease {
   namespace: string
   name: string
+  storageNamespace?: string
 }
 
 // Upgrade availability info
@@ -531,7 +539,7 @@ export interface UpgradeInfo {
   error?: string
 }
 
-// Batch upgrade info (map of "namespace/name" to UpgradeInfo)
+// Batch upgrade info keyed by "storageNamespace/name".
 export interface BatchUpgradeInfo {
   releases: Record<string, UpgradeInfo>
 }