@skyhook-io/k8s-ui 1.5.1 → 1.5.3

package/src/components/logs/LogToolbarSelects.tsx

@@ -1,8 +1,12 @@
 import { ChevronDown } from 'lucide-react'
 import { Tooltip } from '../ui/Tooltip'
+import { getLogPalette, type LogPalette } from './log-palette'
 
-const SELECT_CLASS =
-  'appearance-none bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border-light focus:outline-none focus:ring-1 focus:ring-blue-500'
+// See log-palette.ts for why the viewer uses explicit palette classes
+// instead of theme-* tokens.
+function selectClass(palette: LogPalette): string {
+  return `appearance-none ${palette.elevatedBg} ${palette.textPrimary} text-xs rounded px-2 py-1.5 border ${palette.borderLight} focus:outline-none focus:ring-1 focus:ring-blue-500`
+}
 
 // ── ContainerSelect ───────────────────────────────────────────────────────────
 
@@ -12,21 +16,24 @@ interface ContainerSelectProps {
   onChange: (value: string) => void
   /** If true, prepend an "All containers" option with value="" */
   includeAll?: boolean
+  /** Dark/light palette selector. Defaults to `true` (dark viewer). */
+  isDark?: boolean
 }
 
-export function ContainerSelect({ containers, value, onChange, includeAll = false }: ContainerSelectProps) {
+export function ContainerSelect({ containers, value, onChange, includeAll = false, isDark = true }: ContainerSelectProps) {
   if (containers.length <= 1 && !includeAll) return null
+  const palette = getLogPalette(isDark)
   return (
     <div className="relative">
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className={`${SELECT_CLASS} pr-6`}
+        className={`${selectClass(palette)} pr-6`}
       >
         {includeAll && <option value="">All containers</option>}
         {containers.map(c => <option key={c} value={c}>{c}</option>)}
       </select>
-      <ChevronDown className="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-secondary pointer-events-none" />
+      <ChevronDown className={`absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 ${palette.textSecondary} pointer-events-none`} />
     </div>
   )
 }
@@ -39,6 +46,8 @@ interface LogRangeSelectProps {
   /** Line count options to show. Defaults to [100, 500, 1000, 5000]. */
   lineOptions?: number[]
   tooltip?: string
+  /** Dark/light palette selector. Defaults to `true` (dark viewer). */
+  isDark?: boolean
 }
 
 export function LogRangeSelect({
@@ -46,13 +55,15 @@ export function LogRangeSelect({
   onChange,
   lineOptions = [100, 500, 1000, 5000],
   tooltip = 'How many logs to load — by line count or time range',
+  isDark = true,
 }: LogRangeSelectProps) {
+  const palette = getLogPalette(isDark)
   return (
     <Tooltip content={tooltip} position="bottom">
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className={`${SELECT_CLASS} pr-5`}
+        className={`${selectClass(palette)} pr-5`}
       >
         <optgroup label="Lines">
           {lineOptions.map(n => (

package/src/components/logs/LogsViewer.tsx

@@ -6,6 +6,7 @@ import { useLogStream } from './useLogStream'
 import { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
 import { LogCore } from './LogCore'
 import type { DownloadFormat } from './LogCore'
+import type { LogPalette } from './log-palette'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 
@@ -117,23 +118,23 @@ export function LogsViewer({
     }
   }, [entries, podName, selectedContainer, overrideDownload, showError, showSuccess])
 
-  const toolbarExtra = (
+  const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
-      <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} />
+      <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} isDark={isDark} />
 
       <Tooltip content="Show logs from the pod's previous instance (if it was restarted). Useful for troubleshooting crashed containers." position="bottom">
-        <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary">
+        <label className={`flex items-center gap-1.5 text-xs ${palette.textSecondary}`}>
           <input
             type="checkbox"
             checked={showPrevious}
             onChange={(e) => setShowPrevious(e.target.checked)}
-            className="w-3 h-3 rounded border-theme-border-light bg-theme-elevated text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
+            className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
           />
-          <span className="border-b border-dotted border-theme-text-tertiary">Previous</span>
+          <span className={`border-b border-dotted ${isDark ? 'border-slate-500' : 'border-slate-400'}`}>Previous</span>
         </label>
       </Tooltip>
 
-      <LogRangeSelect value={logRange} onChange={setLogRange} />
+      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} />
     </>
   )
 
@@ -148,7 +149,7 @@ export function LogsViewer({
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
-      toolbarExtra={toolbarExtra}
+      toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
     />
   )

package/src/components/logs/StructuredLogLine.tsx

@@ -1,15 +1,8 @@
 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,
-} from '../../utils/log-format'
-import { SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
+import { unescapeJsonStrings, parseLogfmt } from '../../utils/log-format'
+import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
 
 interface StructuredLogLineProps {
   content: string
@@ -17,9 +10,22 @@ 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
+  /**
+   * Whether the log viewer is in dark mode. Determines the color palette used
+   * for text, hover states, and level badges. Defaults to `true` since the
+   * viewer defaults to dark mode.
+   */
+  isDark?: boolean
 }
 
-export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultExpanded }: StructuredLogLineProps) {
+export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultExpanded, onFilterValue, isDark = true }: StructuredLogLineProps) {
+  const palette = useMemo(() => getLogPalette(isDark), [isDark])
   // null = user hasn't toggled this line; defers to defaultExpanded (global toggle)
   const [localExpanded, setLocalExpanded] = useState<boolean | null>(null)
   const expanded = localExpanded ?? defaultExpanded ?? false
@@ -37,7 +43,7 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
 
   if (!parsed) {
     return (
-      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${getLevelColor(level)}`}>
+      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${getLogLevelColor(level, isDark)}`}>
         {content}
       </span>
     )
@@ -47,8 +53,8 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
 
   const toggle = () => setLocalExpanded(!expanded)
   const chevron = expanded
-    ? <ChevronDown className="w-3 h-3 shrink-0 text-theme-text-tertiary" />
-    : <ChevronRight className="w-3 h-3 shrink-0 text-theme-text-tertiary" />
+    ? <ChevronDown className={`w-3 h-3 shrink-0 ${palette.textTertiary}`} />
+    : <ChevronRight className={`w-3 h-3 shrink-0 ${palette.textTertiary}`} />
 
   return (
     <span>
@@ -56,30 +62,32 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
         // Collapsed: entire summary line is clickable
         <span
           onClick={toggle}
-          className={`cursor-pointer hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
+          className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
-          <SummaryLine obj={parsed} />
-          <span className="text-theme-text-tertiary ml-1">{`{${fieldCount} fields}`}</span>
+          <SummaryLine obj={parsed} palette={palette} />
+          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
         </span>
       ) : (
         // Expanded: summary header is clickable to collapse, JSON content is selectable
         <>
         <span
           onClick={toggle}
-          className="cursor-pointer hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5"
+          className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5`}
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
-          <SummaryLine obj={parsed} />
-          <span className="text-theme-text-tertiary ml-1">{`{${fieldCount} fields}`}</span>
+          <SummaryLine obj={parsed} palette={palette} />
+          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
         </span>
         <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
           {isLogfmt ? (
-            <ExpandedLogfmt obj={parsed} />
+            <ExpandedLogfmt obj={parsed} onFilterValue={onFilterValue} palette={palette} />
           ) : (
-            <span dangerouslySetInnerHTML={{
-              __html: highlightJson(unescapeJsonStrings(JSON.stringify(parsed, null, 2)))
-            }} />
+            <JsonExpanded
+              text={unescapeJsonStrings(JSON.stringify(parsed, null, 2))}
+              onFilterValue={onFilterValue}
+              palette={palette}
+            />
           )}
         </span>
         </>
@@ -88,7 +96,78 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
   )
 }
 
-function SummaryLine({ obj }: { obj: Record<string, unknown> }) {
+/**
+ * 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, palette,
+}: { value: string; onFilter?: (v: string) => void; color?: string; palette: LogPalette }) {
+  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 ${palette.hoverSurface}`}>
+      <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 ${palette.textTertiary} ${palette.hoverText} 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, palette }: { text: string; onFilterValue?: (v: string) => void; palette: LogPalette }) {
+  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: palette.syntaxKey }}>{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={palette.syntaxString} palette={palette} />
+      )
+    } else if (num !== undefined) {
+      nodes.push(
+        <FilterableValue key={`n${idx++}`} value={num} onFilter={onFilterValue} color={palette.syntaxNumber} palette={palette} />
+      )
+    } else if (bool !== undefined) {
+      nodes.push(
+        <FilterableValue key={`b${idx++}`} value={bool} onFilter={onFilterValue} color={palette.syntaxBoolean} palette={palette} />
+      )
+    } else if (nil !== undefined) {
+      nodes.push(<span key={`z${idx++}`} style={{ color: palette.syntaxNull }}>{nil}</span>)
+    }
+    lastIndex = tokenRe.lastIndex
+  }
+  if (lastIndex < text.length) {
+    nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex)}</span>)
+  }
+  return <>{nodes}</>
+}
+
+function SummaryLine({ obj, palette }: { obj: Record<string, unknown>; palette: LogPalette }) {
   const lvl = obj.level ?? obj.severity ?? obj.lvl ?? nestedField(obj, 'log', 'level')
   const msg = obj.msg ?? obj.message
   const rawErr = obj.error ?? obj.err
@@ -100,33 +179,36 @@ function SummaryLine({ obj }: { obj: Record<string, unknown> }) {
   return (
     <>
       {lvl != null && (
-        <span className={`${getLevelBadgeColor(lvl)} text-[10px] font-semibold px-1 py-px rounded mr-1.5 inline-block`}>
+        <span className={`${getLevelBadgeColor(lvl, palette)} text-[10px] font-semibold px-1 py-px rounded mr-1.5 inline-block`}>
           {formatLevel(lvl)}
         </span>
       )}
       {typeof msg === 'string' && (
-        <span className="text-theme-text-primary">{msg}</span>
+        <span className={palette.textPrimary}>{msg}</span>
       )}
       {typeof err === 'string' && (
-        <span className="text-red-400 ml-2">error={err}</span>
+        <span className={`${palette.textError} ml-2`}>error={err}</span>
       )}
       {typeof caller === 'string' && (
-        <span className="text-theme-text-disabled ml-2">{caller}</span>
+        <span className={`${palette.textDisabled} ml-2`}>{caller}</span>
       )}
     </>
   )
 }
 
-function ExpandedLogfmt({ obj }: { obj: Record<string, unknown> }) {
+function ExpandedLogfmt({ obj, onFilterValue, palette }: { obj: Record<string, unknown>; onFilterValue?: (v: string) => void; palette: LogPalette }) {
   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: palette.syntaxKey }}>{key}</span>
+            <span className={palette.textTertiary}>=</span>
+            <FilterableValue value={str} onFilter={onFilterValue} color={palette.syntaxString} palette={palette} />
+          </div>
+        )
+      })}
     </>
   )
 }
@@ -149,7 +231,7 @@ function formatLevel(lvl: unknown): string {
   return String(lvl).toUpperCase()
 }
 
-function getLevelBadgeColor(lvl: unknown): string {
+function getLevelBadgeColor(lvl: unknown, palette: LogPalette): string {
   let normalized: string
   if (typeof lvl === 'number') {
     // Pino/bunyan numeric levels: 10=trace, 20=debug, 30=info, 40=warn, 50=error, 60=fatal
@@ -160,9 +242,9 @@ function getLevelBadgeColor(lvl: unknown): string {
   } else {
     normalized = String(lvl).toLowerCase()
   }
-  if (/^(error|err|fatal|panic|critical|crit)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.error
-  if (/^(warn|warning)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.warning
-  if (/^(info|information|notice)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.info
-  if (/^(debug|dbg|trace|verbose)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.debug
-  return SEVERITY_BADGE_BORDERED.neutral
+  if (/^(error|err|fatal|panic|critical|crit)$/.test(normalized)) return palette.levelBadgeError
+  if (/^(warn|warning)$/.test(normalized)) return palette.levelBadgeWarn
+  if (/^(info|information|notice)$/.test(normalized)) return palette.levelBadgeInfo
+  if (/^(debug|dbg|trace|verbose)$/.test(normalized)) return palette.levelBadgeDebug
+  return palette.levelBadgeNeutral
 }

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -7,6 +7,7 @@ import { useLogStream } from './useLogStream'
 import { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
 import { LogCore } from './LogCore'
 import type { DownloadFormat } from './LogCore'
+import type { LogPalette } from './log-palette'
 import type { WorkloadPodInfo } from '../../types'
 import { useToast } from '../ui/Toast'
 
@@ -48,11 +49,6 @@ export interface WorkloadLogsViewerProps {
   forceDark?: boolean
 }
 
-const POD_COLORS = [
-  'text-blue-400', 'text-green-400', 'text-yellow-400', 'text-purple-400',
-  'text-pink-400', 'text-cyan-400', 'text-orange-400', 'text-lime-400',
-]
-
 export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
@@ -67,9 +63,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const { entries, append, set, clear } = useLogBuffer()
   const { isStreaming, startStreaming, stopStreaming } = useLogStream()
 
-  const podColors = useMemo(() => {
-    const m = new Map<string, string>()
-    pods.forEach((pod, i) => m.set(pod.name, POD_COLORS[i % POD_COLORS.length]))
+  // Map pod.name → index. Color classes are resolved at render time from the
+  // current palette (see LogCore / pod-filter dropdown below) so toggling
+  // isDark re-themes pod labels without re-fetching.
+  const podColorIndex = useMemo(() => {
+    const m = new Map<string, number>()
+    pods.forEach((pod, i) => m.set(pod.name, i))
     return m
   }, [pods])
 
@@ -88,15 +87,15 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         setSelectedPods(new Set(result.pods.map(p => p.name)))
       }
 
-      const colors = new Map<string, string>()
-      result.pods.forEach((pod, i) => colors.set(pod.name, POD_COLORS[i % POD_COLORS.length]))
+      const indexByPod = new Map<string, number>()
+      result.pods.forEach((pod, i) => indexByPod.set(pod.name, i))
 
       set(result.logs.map(log => ({
         timestamp: log.timestamp,
         content: log.content,
         container: log.container,
         pod: log.pod,
-        podColor: colors.get(log.pod),
+        podColorIndex: indexByPod.get(log.pod),
       })))
     } catch (err) {
       console.error('Failed to fetch workload logs:', err)
@@ -129,7 +128,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
               content: data.content || '',
               container: data.container || '',
               pod: data.pod || '',
-              podColor: podColors.get(data.pod || ''),
+              podColorIndex: podColorIndex.get(data.pod || ''),
             })
           }
         },
@@ -159,7 +158,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       },
       'Workload log stream error',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColors, selectedPods.size])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColorIndex, selectedPods.size])
 
   const allContainers = useMemo(() => {
     const s = new Set<string>()
@@ -217,14 +216,14 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     }
   }, [filteredEntries, name, overrideDownload, showError, showSuccess])
 
-  const toolbarExtra = (
+  const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       {/* Pod filter */}
       <div className="relative">
         <button
           onClick={() => setShowPodFilter(v => !v)}
           className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors ${
-            showPodFilter ? 'btn-brand-toggle' : 'bg-theme-elevated text-theme-text-secondary hover:bg-theme-hover'
+            showPodFilter ? palette.toolbarActive : `${palette.elevatedBg} ${palette.textSecondary} ${palette.hoverBg}`
           }`}
         >
           <Filter className="w-3 h-3" />
@@ -233,27 +232,36 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         </button>
 
         {showPodFilter && (
-          <div className="absolute top-full left-0 mt-1 w-64 bg-theme-elevated border border-theme-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto">
-            <div className="p-2 border-b border-theme-border">
-              <button onClick={toggleAllPods} className="text-xs text-blue-400 hover:text-blue-300">
+          <div className={`absolute top-full left-0 mt-1 w-64 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto`}>
+            <div className={`p-2 border-b ${palette.border}`}>
+              <button onClick={toggleAllPods} className={`text-xs ${palette.textAccent} hover:underline`}>
                 {pods.every(p => selectedPods.has(p.name)) ? 'Deselect all' : 'Select all'}
               </button>
             </div>
-            {pods.map(pod => (
-              <label key={pod.name} className="flex items-center gap-2 px-3 py-2 hover:bg-theme-hover">
-                <input
-                  type="checkbox"
-                  checked={selectedPods.has(pod.name)}
-                  onChange={() => togglePod(pod.name)}
-                  className="w-3 h-3 rounded border-theme-border-light bg-theme-elevated text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
-                />
-                <span className={`w-2 h-2 rounded-full ${podColors.get(pod.name)?.replace('text-', 'bg-')}`} />
-                <span className="text-xs text-theme-text-primary truncate flex-1">{pod.name}</span>
-                <span className={`text-xs ${pod.ready ? 'text-green-400' : 'text-yellow-400'}`}>
-                  {pod.ready ? 'Ready' : 'Not Ready'}
-                </span>
-              </label>
-            ))}
+            {pods.map(pod => {
+              const dotBg = palette.podColors[(podColorIndex.get(pod.name) ?? 0) % palette.podColors.length].bg
+              let readyColor: string
+              if (pod.ready) {
+                readyColor = isDark ? 'text-emerald-400' : 'text-emerald-700'
+              } else {
+                readyColor = isDark ? 'text-amber-400' : 'text-amber-700'
+              }
+              return (
+                <label key={pod.name} className={`flex items-center gap-2 px-3 py-2 ${palette.hoverBg}`}>
+                  <input
+                    type="checkbox"
+                    checked={selectedPods.has(pod.name)}
+                    onChange={() => togglePod(pod.name)}
+                    className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
+                  />
+                  <span className={`w-2 h-2 rounded-full ${dotBg}`} />
+                  <span className={`text-xs ${palette.textPrimary} truncate flex-1`}>{pod.name}</span>
+                  <span className={`text-xs ${readyColor}`}>
+                    {pod.ready ? 'Ready' : 'Not Ready'}
+                  </span>
+                </label>
+              )
+            })}
           </div>
         )}
       </div>
@@ -263,6 +271,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         value={selectedContainer}
         onChange={setSelectedContainer}
         includeAll
+        isDark={isDark}
       />
 
       <LogRangeSelect
@@ -270,6 +279,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         onChange={setLogRange}
         lineOptions={[50, 100, 500, 1000]}
         tooltip="How many logs to load per pod — by line count or time range"
+        isDark={isDark}
       />
     </>
   )
@@ -284,7 +294,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
-      toolbarExtra={toolbarExtra}
+      toolbarExtra={renderToolbarExtra}
       showPodName
       emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
       errorMessage={fetchError}