@skyhook-io/k8s-ui 1.5.10 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.10",
+  "version": "1.5.12",
   "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/dock/BottomDock.tsx

@@ -3,7 +3,7 @@ import { DURATION_DOCK } from '../../utils/animation'
 import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useDock, DockTab } from './DockContext'
-import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
+import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 const MIN_HEIGHT = 200
 const DEFAULT_HEIGHT = 400
@@ -80,25 +80,36 @@ export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset:
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [isMaximized])
 
-  useRegisterShortcut({
-    id: 'dock-toggle',
-    keys: 'Ctrl+`',
-    description: 'Toggle dock',
-    category: 'Dock',
-    scope: 'global',
-    handler: () => toggleExpanded(),
-    enabled: tabs.length > 0,
-  })
+  useRegisterShortcuts([
+    {
+      id: 'dock-toggle-backtick',
+      keys: 'Ctrl+`',
+      description: 'Toggle dock',
+      category: 'Dock',
+      scope: 'global',
+      handler: () => toggleExpanded(),
+      enabled: tabs.length > 0,
+    },
+    {
+      id: 'dock-toggle-j',
+      keys: 'Cmd+J',
+      description: 'Toggle dock',
+      category: 'Dock',
+      scope: 'global',
+      handler: () => toggleExpanded(),
+      enabled: tabs.length > 0,
+    },
+  ])
 
   if (tabs.length === 0) {
     return null
   }
 
-  const effectiveHeight = !isExpanded ? 36 : isMaximized ? `calc(100vh - ${MAXIMIZED_TOP_OFFSET}px)` : height
+  const effectiveHeight = !isExpanded ? 36 : isMaximized ? `calc(100% - ${MAXIMIZED_TOP_OFFSET}px)` : height
 
   return (
     <div
-      className="fixed bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40 overflow-hidden"
+      className="absolute bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40 overflow-hidden"
       style={{ height: effectiveHeight, left: leftOffset, transition: `height ${DURATION_DOCK}ms cubic-bezier(0.4, 0, 0.2, 1), left ${DURATION_DOCK}ms ease-out` }}
     >
       {isExpanded && !isMaximized && (

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