@skyhook-io/k8s-ui 1.5.1 → 1.5.2

package/package.json

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

package/src/components/logs/LogCore.tsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback, useState, useMemo, useEffect, type ReactNode } from 'react'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
-import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces, Sun, Moon } from 'lucide-react'
+import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, ChevronRight, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces, Palette, ListCollapse } from 'lucide-react'
 import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
 import { StructuredLogLine } from './StructuredLogLine'
@@ -11,6 +11,8 @@ import {
   highlightSearchMatches,
   stripAnsi,
   ansiToHtml,
+  type TimestampFormat,
+  TIMESTAMP_FORMAT_LABELS,
 } from '../../utils/log-format'
 
 export type DownloadFormat = 'txt' | 'json' | 'csv'
@@ -28,7 +30,7 @@ interface LogCoreProps {
   showPodName?: boolean
   emptyMessage?: string
   errorMessage?: string | null
-  /** Force dark mode on the logs container (default: true). Logs are typically dark-themed. */
+  /** Optionally force dark styling for embedded consumers. */
   forceDark?: boolean
 }
 
@@ -39,6 +41,32 @@ const LEVEL_OPTIONS: { level: LogLevel; label: string; color: string; activeColo
   { level: 'debug', label: 'DBG', color: 'text-theme-text-secondary', activeColor: 'bg-theme-surface text-theme-text-secondary border-theme-border-light' },
 ]
 
+const TIMESTAMP_FORMAT_ORDER: TimestampFormat[] = [
+  'time-local', 'time-utc', 'iso-local', 'iso-utc', 'relative', 'epoch',
+]
+
+const TIMESTAMP_FORMAT_SHORT_LABELS: Record<TimestampFormat, string> = {
+  'time-local': 'Local time',
+  'time-utc': 'UTC time',
+  'iso-local': 'Full date',
+  'iso-utc': 'UTC date',
+  'relative': 'Relative',
+  '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({
@@ -54,24 +82,43 @@ export function LogCore({
   showPodName = false,
   emptyMessage = 'No logs available',
   errorMessage,
-  forceDark = true,
+  forceDark = false,
 }: LogCoreProps) {
   const virtuosoRef = useRef<VirtuosoHandle>(null)
   const [atBottom, setAtBottom] = useState(true)
-  const [isDark, setIsDark] = useState(() => {
-    try { const v = localStorage.getItem('radar-logs-dark'); return v !== null ? v !== 'false' : forceDark } catch { return forceDark }
-  })
   const [wordWrap, setWordWrap] = useState(() => {
     try { return localStorage.getItem('radar-logs-wrap') !== 'false' } catch { return true }
   })
   const [showTimestamps, setShowTimestamps] = useState(() => {
     try { return localStorage.getItem('radar-logs-timestamps') !== 'false' } catch { return true }
   })
+  const [tsFormat, setTsFormat] = useState<TimestampFormat>(() => {
+    try {
+      const v = localStorage.getItem('radar-logs-ts-format') as TimestampFormat | null
+      return v && TIMESTAMP_FORMAT_ORDER.includes(v) ? v : 'time-local'
+    } catch { return 'time-local' }
+  })
+  const [ansiEnabled, setAnsiEnabled] = useState(() => {
+    try { return localStorage.getItem('radar-logs-ansi') !== 'false' } catch { return true }
+  })
+  const [collapseStacks, setCollapseStacks] = useState(() => {
+    try { return localStorage.getItem('radar-logs-collapse-stacks') !== 'false' } catch { return true }
+  })
   const [enabledLevels, setEnabledLevels] = useState<Set<LogLevel>>(
     new Set(['error', 'warn', 'info', 'debug'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
+  const [showTsMenu, setShowTsMenu] = useState(false)
   const [expandAllStructured, setExpandAllStructured] = useState(false)
+  const [expandedStacks, setExpandedStacks] = useState<Set<number>>(() => new Set())
+
+  // Re-render every 15s so "relative" timestamps tick forward during idle viewing.
+  const [, setNowTick] = useState(0)
+  useEffect(() => {
+    if (tsFormat !== 'relative' || !showTimestamps) return
+    const id = setInterval(() => setNowTick(n => n + 1), 15_000)
+    return () => clearInterval(id)
+  }, [tsFormat, showTimestamps])
 
   // Level-filtered entries
   // 'unknown' logs are shown when all 4 known levels are enabled (no active filtering)
@@ -112,6 +159,18 @@ export function LogCore({
     return () => window.removeEventListener('click', handleClick)
   }, [showDownloadMenu])
 
+  // Same close-on-outside-click for the timestamp format menu.
+  const tsMenuRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!showTsMenu) return
+    const handleClick = (e: MouseEvent) => {
+      if (tsMenuRef.current?.contains(e.target as Node)) return
+      setShowTsMenu(false)
+    }
+    window.addEventListener('click', handleClick)
+    return () => window.removeEventListener('click', handleClick)
+  }, [showTsMenu])
+
   // Keyboard shortcut: Ctrl+F to open search
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -133,14 +192,6 @@ export function LogCore({
     setAtBottom(bottom)
   }, [])
 
-  const scrollToBottom = useCallback(() => {
-    virtuosoRef.current?.scrollToIndex({
-      index: displayEntries.length - 1,
-      align: 'end',
-      behavior: 'smooth',
-    })
-  }, [displayEntries.length])
-
   const toggleWrap = useCallback(() => {
     setWordWrap(prev => {
       const next = !prev
@@ -157,6 +208,50 @@ export function LogCore({
     })
   }, [])
 
+  const pickTsFormat = useCallback((fmt: TimestampFormat) => {
+    setTsFormat(fmt)
+    try { localStorage.setItem('radar-logs-ts-format', fmt) } catch {}
+    // Auto-show timestamps when user picks a format — otherwise the change isn't visible.
+    setShowTimestamps(true)
+    try { localStorage.setItem('radar-logs-timestamps', 'true') } catch {}
+    setShowTsMenu(false)
+  }, [])
+
+  const toggleAnsi = useCallback(() => {
+    setAnsiEnabled(prev => {
+      const next = !prev
+      try { localStorage.setItem('radar-logs-ansi', String(next)) } catch {}
+      return next
+    })
+  }, [])
+
+  const toggleCollapseStacks = useCallback(() => {
+    setCollapseStacks(prev => {
+      const next = !prev
+      try { localStorage.setItem('radar-logs-collapse-stacks', String(next)) } catch {}
+      return next
+    })
+  }, [])
+
+  const toggleStackExpanded = useCallback((id: number) => {
+    setExpandedStacks(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  // 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.
+  const handleFilterValue = useCallback((value: string) => {
+    search.setQuery(value)
+    // Values often contain regex metacharacters — force literal-substring matching.
+    search.setIsRegex(false)
+    search.setFilterMode(true)
+    if (!search.isOpen) search.open()
+  }, [search])
+
   const toggleLevel = useCallback((level: LogLevel) => {
     setEnabledLevels(prev => {
       const next = new Set(prev)
@@ -176,8 +271,36 @@ export function LogCore({
         : 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 groupedEntries = useMemo<LogGroup[]>(() => {
+    if (!collapseStacks || search.query) {
+      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])
+
+  const scrollToBottom = useCallback(() => {
+    virtuosoRef.current?.scrollToIndex({
+      index: groupedEntries.length - 1,
+      align: 'end',
+      behavior: 'smooth',
+    })
+  }, [groupedEntries.length])
+
   return (
-    <div className={`flex flex-col h-full bg-theme-base${isDark ? ' dark' : ''}`} style={{ colorScheme: isDark ? 'dark' : 'light', fontFamily: "'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace" }}>
+    <div
+      className={`flex flex-col h-full bg-theme-base${forceDark ? ' dark' : ''}`}
+      style={{ colorScheme: forceDark ? 'dark' : undefined, fontFamily: "'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace" }}
+    >
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-theme-border bg-theme-surface">
         {toolbarExtra}
@@ -248,15 +371,76 @@ export function LogCore({
           </Tooltip>
         )}
 
-        {/* Timestamp toggle */}
-        <Tooltip content={showTimestamps ? 'Hide timestamps' : 'Show timestamps'} delay={TIP_DELAY} position="bottom">
+        {/* Timestamp toggle + format picker */}
+        <div className="flex items-center">
+          <Tooltip content={showTimestamps ? 'Hide timestamps' : 'Show timestamps'} delay={TIP_DELAY} position="bottom">
+            <button
+              onClick={toggleTimestamps}
+              className={`p-1.5 rounded-l transition-colors ${
+                showTimestamps ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              }`}
+            >
+              <Clock className="w-4 h-4" />
+            </button>
+          </Tooltip>
+          <div className="relative" ref={tsMenuRef}>
+            <Tooltip content={`Timestamp format: ${TIMESTAMP_FORMAT_LABELS[tsFormat]}`} delay={TIP_DELAY} position="bottom">
+              <button
+                onClick={() => setShowTsMenu(prev => !prev)}
+                className={`px-2 py-1.5 rounded-r text-[10px] font-medium transition-colors whitespace-nowrap ${
+                  showTimestamps ? 'btn-brand-toggle' : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated'
+                }`}
+                aria-label="Pick timestamp format"
+              >
+                <span className="inline-flex items-center gap-1">
+                  <span>{TIMESTAMP_FORMAT_SHORT_LABELS[tsFormat]}</span>
+                  <ChevronDown className="w-3 h-3" />
+                </span>
+              </button>
+            </Tooltip>
+            {showTsMenu && (
+              <div className="absolute top-full right-0 mt-1 w-44 bg-theme-elevated border border-theme-border rounded-lg shadow-lg z-50">
+                <div className="px-3 py-1.5 text-[10px] uppercase tracking-wide text-theme-text-tertiary border-b border-theme-border">
+                  Timestamp format
+                </div>
+                {TIMESTAMP_FORMAT_ORDER.map(fmt => (
+                  <button
+                    key={fmt}
+                    onClick={() => pickTsFormat(fmt)}
+                    className={`w-full text-left px-3 py-1.5 text-xs hover:bg-theme-hover flex items-center justify-between ${
+                      tsFormat === fmt ? 'text-theme-text-primary' : 'text-theme-text-secondary'
+                    }`}
+                  >
+                    <span>{TIMESTAMP_FORMAT_LABELS[fmt]}</span>
+                    {tsFormat === fmt && <span className="text-[10px] text-blue-400">✓</span>}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Collapse stack-trace continuations toggle */}
+        <Tooltip content={collapseStacks ? 'Stop grouping stack traces' : 'Group stack-trace lines'} delay={TIP_DELAY} position="bottom">
+          <button
+            onClick={toggleCollapseStacks}
+            className={`p-1.5 rounded transition-colors ${
+              collapseStacks ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+            }`}
+          >
+            <ListCollapse className="w-4 h-4" />
+          </button>
+        </Tooltip>
+
+        {/* ANSI color rendering toggle */}
+        <Tooltip content={ansiEnabled ? 'Hide ANSI colors' : 'Render ANSI colors'} delay={TIP_DELAY} position="bottom">
           <button
-            onClick={toggleTimestamps}
+            onClick={toggleAnsi}
             className={`p-1.5 rounded transition-colors ${
-              showTimestamps ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              ansiEnabled ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
             }`}
           >
-            <Clock className="w-4 h-4" />
+            <Palette className="w-4 h-4" />
           </button>
         </Tooltip>
 
@@ -309,20 +493,6 @@ export function LogCore({
           )}
         </div>
 
-        {/* Dark/Light toggle */}
-        <Tooltip content={isDark ? 'Light mode' : 'Dark mode'} delay={TIP_DELAY} position="bottom">
-          <button
-            onClick={() => {
-              const next = !isDark
-              setIsDark(next)
-              try { localStorage.setItem('radar-logs-dark', String(next)) } catch {}
-            }}
-            className="p-1.5 rounded text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated"
-          >
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-          </button>
-        </Tooltip>
-
         {/* Clear */}
         {onClear && (
           <Tooltip content="Clear logs" delay={TIP_DELAY} position="bottom">
@@ -450,7 +620,7 @@ export function LogCore({
           <Terminal className="w-8 h-8" />
           <span>{errorMessage}</span>
         </div>
-      ) : displayEntries.length === 0 ? (
+      ) : groupedEntries.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center text-theme-text-tertiary gap-2">
           <Terminal className="w-8 h-8" />
           <span>{emptyMessage}</span>
@@ -459,23 +629,28 @@ export function LogCore({
         <div className="flex-1 relative">
           <Virtuoso
             ref={virtuosoRef}
-            data={displayEntries}
+            data={groupedEntries}
             followOutput={handleFollowOutput}
-            initialTopMostItemIndex={displayEntries.length - 1}
+            initialTopMostItemIndex={groupedEntries.length - 1}
             atBottomStateChange={handleAtBottomStateChange}
             atBottomThreshold={50}
             increaseViewportBy={200}
-            itemContent={(_index, entry) => (
-              <LogLine
-                entry={entry}
+            itemContent={(_index, group) => (
+              <LogGroupItem
+                group={group}
                 searchQuery={search.query}
                 searchIsRegex={search.isRegex}
                 searchIsCaseSensitive={search.isCaseSensitive}
                 showPodName={showPodName}
                 showTimestamp={showTimestamps}
-                isCurrentMatch={entry.id === currentHighlightId}
+                tsFormat={tsFormat}
+                ansiEnabled={ansiEnabled}
+                isCurrentMatch={group.head.id === currentHighlightId}
                 wordWrap={wordWrap}
                 defaultExpanded={expandAllStructured}
+                onFilterValue={handleFilterValue}
+                isStackExpanded={expandedStacks.has(group.head.id)}
+                onToggleStack={toggleStackExpanded}
               />
             )}
             className="h-full font-mono text-xs"
@@ -512,6 +687,23 @@ function Shortcut({ keys, label }: { keys: string; label: string }) {
   )
 }
 
+interface LogLineProps {
+  entry: LogEntry
+  searchQuery: string
+  searchIsRegex: boolean
+  searchIsCaseSensitive: boolean
+  showPodName: boolean
+  showTimestamp: boolean
+  tsFormat: TimestampFormat
+  ansiEnabled: boolean
+  isCurrentMatch: boolean
+  wordWrap: boolean
+  defaultExpanded: boolean
+  onFilterValue?: (value: string) => void
+  /** Optional lead element rendered at the start of the row (e.g. stack-trace toggle). */
+  leadSlot?: ReactNode
+}
+
 function LogLine({
   entry,
   searchQuery,
@@ -519,23 +711,17 @@ function LogLine({
   searchIsCaseSensitive,
   showPodName,
   showTimestamp,
+  tsFormat,
+  ansiEnabled,
   isCurrentMatch,
   wordWrap,
   defaultExpanded,
-}: {
-  entry: LogEntry
-  searchQuery: string
-  searchIsRegex: boolean
-  searchIsCaseSensitive: boolean
-  showPodName: boolean
-  showTimestamp: boolean
-  isCurrentMatch: boolean
-  wordWrap: boolean
-  defaultExpanded: boolean
-}) {
+  onFilterValue,
+  leadSlot,
+}: LogLineProps) {
   const levelColor = getLevelColor(entry.level)
 
-  // Determine content rendering
+  // Determine content rendering. Priority: search highlight > structured > ANSI/plain.
   let contentElement: React.ReactNode
   if (searchQuery) {
     const plain = stripAnsi(entry.content)
@@ -554,9 +740,10 @@ function LogLine({
         wordWrap={wordWrap}
         isLogfmt={entry.isLogfmt}
         defaultExpanded={defaultExpanded}
+        onFilterValue={onFilterValue}
       />
     )
-  } else {
+  } else if (ansiEnabled) {
     const html = ansiToHtml(entry.content)
     contentElement = (
       <span
@@ -564,6 +751,12 @@ function LogLine({
         dangerouslySetInnerHTML={{ __html: html }}
       />
     )
+  } else {
+    contentElement = (
+      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${levelColor}`}>
+        {stripAnsi(entry.content)}
+      </span>
+    )
   }
 
   const handleCopy = () => {
@@ -573,9 +766,13 @@ function LogLine({
 
   return (
     <div className={`flex hover:bg-theme-surface/50 group leading-5 px-2 ${isCurrentMatch ? 'bg-yellow-500/10' : ''}`}>
+      {leadSlot}
       {showTimestamp && entry.timestamp && (
-        <span className="text-theme-text-tertiary select-none pr-2 whitespace-nowrap">
-          {formatLogTimestamp(entry.timestamp)}
+        <span
+          className="text-theme-text-tertiary select-none pr-2 whitespace-nowrap"
+          title={entry.timestamp}
+        >
+          {formatLogTimestamp(entry.timestamp, tsFormat)}
         </span>
       )}
       {showPodName && entry.pod && (
@@ -597,3 +794,60 @@ function LogLine({
     </div>
   )
 }
+
+interface LogGroupItemProps {
+  group: LogGroup
+  searchQuery: string
+  searchIsRegex: boolean
+  searchIsCaseSensitive: boolean
+  showPodName: boolean
+  showTimestamp: boolean
+  tsFormat: TimestampFormat
+  ansiEnabled: boolean
+  isCurrentMatch: boolean
+  wordWrap: boolean
+  defaultExpanded: boolean
+  onFilterValue: (value: string) => void
+  isStackExpanded: boolean
+  onToggleStack: (id: number) => void
+}
+
+function LogGroupItem(props: LogGroupItemProps) {
+  const { group, isStackExpanded, onToggleStack, ...rest } = props
+  const hasStack = group.continuations.length > 0
+
+  const stackToggle = hasStack ? (
+    <button
+      onClick={() => onToggleStack(group.head.id)}
+      className="mr-1 self-start p-0.5 rounded text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-surface/50 shrink-0"
+      title={isStackExpanded ? 'Collapse stack trace' : `Expand ${group.continuations.length} stack frames`}
+    >
+      {isStackExpanded
+        ? <ChevronDown className="w-3 h-3" />
+        : <ChevronRight className="w-3 h-3" />}
+    </button>
+  ) : null
+
+  return (
+    <div>
+      <LogLine
+        entry={group.head}
+        {...rest}
+        leadSlot={stackToggle}
+      />
+      {hasStack && !isStackExpanded && (
+        <button
+          onClick={() => onToggleStack(group.head.id)}
+          className="block w-full text-left pl-6 pr-2 py-0 text-[10px] text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-surface/40"
+        >
+          [+{group.continuations.length} stack {group.continuations.length === 1 ? 'line' : 'lines'}]
+        </button>
+      )}
+      {hasStack && isStackExpanded && group.continuations.map(cont => (
+        <div key={cont.id} className="pl-4">
+          <LogLine entry={cont} {...rest} isCurrentMatch={false} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/logs/StructuredLogLine.tsx

@@ -1,13 +1,15 @@
 import { useState, useMemo } from 'react'
-import { ChevronRight, ChevronDown } from 'lucide-react'
+import { ChevronRight, ChevronDown, Filter } from 'lucide-react'
 import type { LogLevel } from './useLogBuffer'
 import {
   getLevelColor,
-  highlightJson,
   unescapeJsonStrings,
   parseLogfmt,
   SYNTAX_COLOR_KEY,
   SYNTAX_COLOR_STRING,
+  SYNTAX_COLOR_NUMBER,
+  SYNTAX_COLOR_BOOLEAN,
+  SYNTAX_COLOR_NULL,
 } from '../../utils/log-format'
 import { SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
 
@@ -17,9 +19,15 @@ interface StructuredLogLineProps {
   wordWrap: boolean
   isLogfmt?: boolean
   defaultExpanded?: boolean
+  /**
+   * When provided, field values in the expanded view become filterable — hovering
+   * shows a chip that, on click, calls onFilterValue(value) so the parent can
+   * add the value to the log search/filter.
+   */
+  onFilterValue?: (value: string) => void
 }
 
-export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultExpanded }: StructuredLogLineProps) {
+export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultExpanded, onFilterValue }: StructuredLogLineProps) {
   // null = user hasn't toggled this line; defers to defaultExpanded (global toggle)
   const [localExpanded, setLocalExpanded] = useState<boolean | null>(null)
   const expanded = localExpanded ?? defaultExpanded ?? false
@@ -75,11 +83,12 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
         </span>
         <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
           {isLogfmt ? (
-            <ExpandedLogfmt obj={parsed} />
+            <ExpandedLogfmt obj={parsed} onFilterValue={onFilterValue} />
           ) : (
-            <span dangerouslySetInnerHTML={{
-              __html: highlightJson(unescapeJsonStrings(JSON.stringify(parsed, null, 2)))
-            }} />
+            <JsonExpanded
+              text={unescapeJsonStrings(JSON.stringify(parsed, null, 2))}
+              onFilterValue={onFilterValue}
+            />
           )}
         </span>
         </>
@@ -88,6 +97,77 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
   )
 }
 
+/**
+ * Render a primitive log-field value with an optional filter chip that appears on hover.
+ * Clicking the chip calls onFilter(value) so the caller can push it into log search.
+ */
+function FilterableValue({
+  value, onFilter, color,
+}: { value: string; onFilter?: (v: string) => void; color?: string }) {
+  if (!onFilter) {
+    return <span style={color ? { color } : undefined}>{value}</span>
+  }
+  return (
+    <span className="group/flt inline-flex items-baseline align-baseline gap-0.5 rounded hover:bg-theme-surface/60">
+      <span style={color ? { color } : undefined}>{value}</span>
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); onFilter(value) }}
+        className="opacity-0 group-hover/flt:opacity-100 transition-opacity text-theme-text-tertiary hover:text-theme-text-primary px-0.5"
+        title={`Filter to lines containing "${value}"`}
+        aria-label={`Filter to lines containing ${value}`}
+      >
+        <Filter className="w-3 h-3 inline" />
+      </button>
+    </span>
+  )
+}
+
+/**
+ * Render pretty-printed JSON with filterable primitive values while preserving
+ * the layout that JSON.stringify(..., null, 2) produces. Tokenizes the string
+ * and emits React nodes so the hover chip can be wired per value.
+ */
+function JsonExpanded({ text, onFilterValue }: { text: string; onFilterValue?: (v: string) => void }) {
+  const tokenRe = /("(?:\\.|[^"\\])*")\s*:|("(?:\\.|[^"\\])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false)\b|\b(null)\b/g
+  const nodes: React.ReactNode[] = []
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+  let idx = 0
+  while ((match = tokenRe.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex, match.index)}</span>)
+    }
+    const [, key, str, num, bool, nil] = match
+    if (key !== undefined) {
+      nodes.push(<span key={`k${idx++}`} style={{ color: SYNTAX_COLOR_KEY }}>{key}</span>)
+      nodes.push(<span key={`c${idx++}`}>:</span>)
+    } else if (str !== undefined) {
+      // Unescape the quoted string for the filter value (users expect to filter on
+      // the displayed string, not JSON-escaped bytes).
+      const inner = str.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\')
+      nodes.push(
+        <FilterableValue key={`s${idx++}`} value={inner} onFilter={onFilterValue} color={SYNTAX_COLOR_STRING} />
+      )
+    } else if (num !== undefined) {
+      nodes.push(
+        <FilterableValue key={`n${idx++}`} value={num} onFilter={onFilterValue} color={SYNTAX_COLOR_NUMBER} />
+      )
+    } else if (bool !== undefined) {
+      nodes.push(
+        <FilterableValue key={`b${idx++}`} value={bool} onFilter={onFilterValue} color={SYNTAX_COLOR_BOOLEAN} />
+      )
+    } else if (nil !== undefined) {
+      nodes.push(<span key={`z${idx++}`} style={{ color: SYNTAX_COLOR_NULL }}>{nil}</span>)
+    }
+    lastIndex = tokenRe.lastIndex
+  }
+  if (lastIndex < text.length) {
+    nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex)}</span>)
+  }
+  return <>{nodes}</>
+}
+
 function SummaryLine({ obj }: { obj: Record<string, unknown> }) {
   const lvl = obj.level ?? obj.severity ?? obj.lvl ?? nestedField(obj, 'log', 'level')
   const msg = obj.msg ?? obj.message
@@ -117,16 +197,19 @@ function SummaryLine({ obj }: { obj: Record<string, unknown> }) {
   )
 }
 
-function ExpandedLogfmt({ obj }: { obj: Record<string, unknown> }) {
+function ExpandedLogfmt({ obj, onFilterValue }: { obj: Record<string, unknown>; onFilterValue?: (v: string) => void }) {
   return (
     <>
-      {Object.entries(obj).map(([key, val]) => (
-        <div key={key}>
-          <span style={{ color: SYNTAX_COLOR_KEY }}>{key}</span>
-          <span className="text-theme-text-tertiary">=</span>
-          <span style={{ color: SYNTAX_COLOR_STRING }}>{String(val)}</span>
-        </div>
-      ))}
+      {Object.entries(obj).map(([key, val]) => {
+        const str = String(val)
+        return (
+          <div key={key}>
+            <span style={{ color: SYNTAX_COLOR_KEY }}>{key}</span>
+            <span className="text-theme-text-tertiary">=</span>
+            <FilterableValue value={str} onFilter={onFilterValue} color={SYNTAX_COLOR_STRING} />
+          </div>
+        )
+      })}
     </>
   )
 }

package/src/components/logs/useLogSearch.ts

@@ -8,10 +8,12 @@ interface UseLogSearchReturn {
   setQuery: (q: string) => void
   isRegex: boolean
   toggleRegex: () => void
+  setIsRegex: (v: boolean) => void
   isCaseSensitive: boolean
   toggleCaseSensitive: () => void
   isFilterMode: boolean
   toggleFilterMode: () => void
+  setFilterMode: (v: boolean) => void
   matchCount: number
   currentMatch: number
   /** Indices into the entries array that match */
@@ -121,6 +123,7 @@ export function useLogSearch(
   const toggleRegex = useCallback(() => setIsRegex(p => !p), [])
   const toggleCaseSensitive = useCallback(() => setIsCaseSensitive(p => !p), [])
   const toggleFilterMode = useCallback(() => setIsFilterMode(p => !p), [])
+  const setFilterMode = useCallback((v: boolean) => setIsFilterMode(v), [])
 
   const open = useCallback(() => setIsOpen(true), [])
   const close = useCallback(() => {
@@ -133,10 +136,12 @@ export function useLogSearch(
     setQuery,
     isRegex,
     toggleRegex,
+    setIsRegex,
     isCaseSensitive,
     toggleCaseSensitive,
     isFilterMode,
     toggleFilterMode,
+    setFilterMode,
     matchCount: matchIndices.length,
     currentMatch,
     matchIndices,

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

@@ -12,9 +12,16 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   const sync = app.status?.sync?.status
   const opPhase = app.status?.operationState?.phase
 
-  // Check for suspended (no automated sync policy)
+  // Check for suspended (no automated sync policy). Honor both the current
+  // "radarhq.io/suspended-prune" annotation and the legacy "skyhook.io/..."
+  // key still present on Applications suspended by older Radar builds.
+  // The annotation value stores the prior prune state as "true"/"false" for
+  // restore on resume — both strings are truthy in JS, which is intentional:
+  // the *presence* of the annotation is what signals suspended, not its value.
   const hasAutomatedSync = !!app.spec?.syncPolicy?.automated
-  if (health === 'Suspended' || (!hasAutomatedSync && app.metadata?.annotations?.['radar.skyhook.io/suspended-prune'])) {
+  const annotations = app.metadata?.annotations
+  const suspendedByRadar = annotations?.['radarhq.io/suspended-prune'] || annotations?.['skyhook.io/suspended-prune']
+  if (health === 'Suspended' || (!hasAutomatedSync && suspendedByRadar)) {
     return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
   }
 

package/src/utils/log-format.ts

@@ -5,22 +5,87 @@
 
 import type { LogLevel } from '../components/logs/useLogBuffer'
 
+export type TimestampFormat =
+  | 'time-local'
+  | 'time-utc'
+  | 'iso-local'
+  | 'iso-utc'
+  | 'relative'
+  | 'epoch'
+
+export const TIMESTAMP_FORMAT_LABELS: Record<TimestampFormat, string> = {
+  'time-local': 'Time (local)',
+  'time-utc': 'Time (UTC)',
+  'iso-local': 'ISO (local)',
+  'iso-utc': 'ISO (UTC)',
+  'relative': 'Relative',
+  'epoch': 'Epoch',
+}
+
+function pad2(n: number): string {
+  return n < 10 ? '0' + n : String(n)
+}
+
+function formatIsoLocal(date: Date): string {
+  const offset = -date.getTimezoneOffset()
+  const sign = offset >= 0 ? '+' : '-'
+  const abs = Math.abs(offset)
+  return (
+    date.getFullYear() +
+    '-' + pad2(date.getMonth() + 1) +
+    '-' + pad2(date.getDate()) +
+    'T' + pad2(date.getHours()) +
+    ':' + pad2(date.getMinutes()) +
+    ':' + pad2(date.getSeconds()) +
+    sign + pad2(Math.floor(abs / 60)) + ':' + pad2(abs % 60)
+  )
+}
+
+function formatRelative(date: Date, now: number): string {
+  const diffSec = Math.round((now - date.getTime()) / 1000)
+  const abs = Math.abs(diffSec)
+  const suffix = diffSec >= 0 ? ' ago' : ' from now'
+  if (abs < 2) return 'just now'
+  if (abs < 60) return `${abs}s${suffix}`
+  if (abs < 3600) return `${Math.floor(abs / 60)}m${suffix}`
+  if (abs < 86400) return `${Math.floor(abs / 3600)}h${suffix}`
+  return `${Math.floor(abs / 86400)}d${suffix}`
+}
+
 /**
  * Format a K8s log timestamp for display.
- * Extracts and formats the time portion (HH:MM:SS).
+ * Supports multiple display formats and UTC/local time zones.
+ * `now` is accepted for testability; defaults to Date.now().
  */
-export function formatLogTimestamp(ts: string): string {
+export function formatLogTimestamp(
+  ts: string,
+  format: TimestampFormat = 'time-local',
+  now?: number,
+): string {
   const date = new Date(ts)
   if (isNaN(date.getTime())) {
-    // Fallback: extract HH:MM:SS from ISO timestamp
     return ts.slice(11, 19) || ts
   }
-  return date.toLocaleTimeString('en-US', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
+  switch (format) {
+    case 'time-utc':
+      return date.toISOString().slice(11, 19)
+    case 'iso-local':
+      return formatIsoLocal(date)
+    case 'iso-utc':
+      return date.toISOString()
+    case 'relative':
+      return formatRelative(date, now ?? Date.now())
+    case 'epoch':
+      return String(Math.floor(date.getTime() / 1000))
+    case 'time-local':
+    default:
+      return date.toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      })
+  }
 }
 
 /** Map a detected LogLevel to a Tailwind color class. */
@@ -294,9 +359,9 @@ export function parseLogRange(logRange: string): { tailLines?: number; sinceSeco
 // Syntax highlight colors shared between JSON and logfmt rendering
 export const SYNTAX_COLOR_KEY = '#7cacf8'
 export const SYNTAX_COLOR_STRING = '#73c991'
-const SYNTAX_COLOR_NUMBER = '#e5c07b'
-const SYNTAX_COLOR_BOOLEAN = '#c678dd'
-const SYNTAX_COLOR_NULL = '#808080'
+export const SYNTAX_COLOR_NUMBER = '#e5c07b'
+export const SYNTAX_COLOR_BOOLEAN = '#c678dd'
+export const SYNTAX_COLOR_NULL = '#808080'
 
 /**
  * Syntax-highlight a pretty-printed JSON string for HTML display.