@skyhook-io/k8s-ui 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -88,7 +88,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.4",
+    "vitest": "^4.1.5",
     "yaml": "^2.8.3"
   }
 }

package/src/components/dock/LocalTerminalTab.tsx

@@ -96,6 +96,35 @@ export function LocalTerminalTab({
       setTimeout(doFit, 100)
     })
 
+    // Attach ResizeObserver synchronously — before createSession() resolves.
+    // The dock's expand animation runs concurrently with session creation, so
+    // a late-attached observer would miss its size changes and leave the
+    // terminal stuck at whatever dimensions it had when the dock was still
+    // collapsing. Debounced to coalesce animation frames.
+    let resizeTimeout: ReturnType<typeof setTimeout> | null = null
+    let lastWidth = 0
+    let lastHeight = 0
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const { width, height } = entry.contentRect
+      if (Math.abs(width - lastWidth) < 5 && Math.abs(height - lastHeight) < 5) return
+      lastWidth = width
+      lastHeight = height
+      if (resizeTimeout) clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        if (!fitAddonRef.current || !xtermRef.current) return
+        const dims = fitAddonRef.current.proposeDimensions()
+        if (dims) xtermRef.current.resize(dims.cols, dims.rows)
+        const conn = wsRef.current
+        if (conn?.readyState === WebSocket.OPEN) {
+          conn.send(JSON.stringify({ type: 'resize', rows: xtermRef.current.rows, cols: xtermRef.current.cols }))
+        }
+      }, 100)
+    })
+    resizeObserver.observe(terminalRef.current)
+    cleanupRef.current = () => resizeObserver.disconnect()
+
     createSessionRef.current()
       .then(({ wsUrl }) => {
         if (cancelledRef.current) return
@@ -152,35 +181,6 @@ export function LocalTerminalTab({
             ws.send(JSON.stringify({ type: 'input', data }))
           }
         })
-
-        // Debounced resize
-        let resizeTimeout: ReturnType<typeof setTimeout> | null = null
-        let lastWidth = 0
-        let lastHeight = 0
-        const resizeObserver = new ResizeObserver((entries) => {
-          const entry = entries[0]
-          if (!entry) return
-          const { width, height } = entry.contentRect
-          if (Math.abs(width - lastWidth) < 5 && Math.abs(height - lastHeight) < 5) return
-          lastWidth = width
-          lastHeight = height
-          if (resizeTimeout) clearTimeout(resizeTimeout)
-          resizeTimeout = setTimeout(() => {
-            if (fitAddonRef.current && xtermRef.current) {
-              const dims = fitAddonRef.current.proposeDimensions()
-              if (dims) xtermRef.current.resize(dims.cols, dims.rows)
-              if (ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({ type: 'resize', rows: xtermRef.current.rows, cols: xtermRef.current.cols }))
-              }
-            }
-          }, 100)
-        })
-        if (terminalRef.current) {
-          resizeObserver.observe(terminalRef.current)
-          cleanupRef.current = () => resizeObserver.disconnect()
-        } else {
-          resizeObserver.disconnect()
-        }
       })
       .catch((err) => {
         setError(err instanceof Error ? err.message : 'Failed to connect')

package/src/components/dock/TerminalTab.tsx

@@ -113,6 +113,35 @@ export function TerminalTab({
       setTimeout(doFit, 100)
     })
 
+    // Attach ResizeObserver synchronously — before createSession() resolves.
+    // The dock's expand animation runs concurrently with session creation, so
+    // a late-attached observer would miss its size changes and leave the
+    // terminal stuck at whatever dimensions it had when the dock was still
+    // collapsing. Debounced to coalesce animation frames.
+    let resizeTimeout: ReturnType<typeof setTimeout> | null = null
+    let lastWidth = 0
+    let lastHeight = 0
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const { width, height } = entry.contentRect
+      if (Math.abs(width - lastWidth) < 5 && Math.abs(height - lastHeight) < 5) return
+      lastWidth = width
+      lastHeight = height
+      if (resizeTimeout) clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        if (!fitAddonRef.current || !xtermRef.current) return
+        const dims = fitAddonRef.current.proposeDimensions()
+        if (dims) xtermRef.current.resize(dims.cols, dims.rows)
+        const conn = wsRef.current
+        if (conn?.readyState === WebSocket.OPEN) {
+          conn.send(JSON.stringify({ type: 'resize', rows: xtermRef.current.rows, cols: xtermRef.current.cols }))
+        }
+      }, 100)
+    })
+    resizeObserver.observe(terminalRef.current)
+    cleanupRef.current = () => resizeObserver.disconnect()
+
     createSessionRef.current(selectedContainer)
       .then(({ wsUrl }) => {
         if (cancelledRef.current) return
@@ -163,35 +192,6 @@ export function TerminalTab({
             ws.send(JSON.stringify({ type: 'input', data }))
           }
         })
-
-        // Debounced resize to avoid infinite loops
-        let resizeTimeout: ReturnType<typeof setTimeout> | null = null
-        let lastWidth = 0
-        let lastHeight = 0
-        const resizeObserver = new ResizeObserver((entries) => {
-          const entry = entries[0]
-          if (!entry) return
-          const { width, height } = entry.contentRect
-          if (Math.abs(width - lastWidth) < 5 && Math.abs(height - lastHeight) < 5) return
-          lastWidth = width
-          lastHeight = height
-          if (resizeTimeout) clearTimeout(resizeTimeout)
-          resizeTimeout = setTimeout(() => {
-            if (fitAddonRef.current && xtermRef.current) {
-              const dims = fitAddonRef.current.proposeDimensions()
-              if (dims) xtermRef.current.resize(dims.cols, dims.rows)
-              if (ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({ type: 'resize', rows: xtermRef.current.rows, cols: xtermRef.current.cols }))
-              }
-            }
-          }, 100)
-        })
-        if (terminalRef.current) {
-          resizeObserver.observe(terminalRef.current)
-          cleanupRef.current = () => resizeObserver.disconnect()
-        } else {
-          resizeObserver.disconnect()
-        }
       })
       .catch((err) => {
         setError(err instanceof Error ? err.message : 'Failed to connect')

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>
+  )
+}