@skyhook-io/k8s-ui 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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 } from 'lucide-react'
+import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces, Sun, Moon } from 'lucide-react'
 import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
 import { StructuredLogLine } from './StructuredLogLine'
@@ -28,6 +28,8 @@ interface LogCoreProps {
   showPodName?: boolean
   emptyMessage?: string
   errorMessage?: string | null
+  /** Force dark mode on the logs container (default: true). Logs are typically dark-themed. */
+  forceDark?: boolean
 }
 
 const LEVEL_OPTIONS: { level: LogLevel; label: string; color: string; activeColor: string }[] = [
@@ -52,9 +54,13 @@ export function LogCore({
   showPodName = false,
   emptyMessage = 'No logs available',
   errorMessage,
+  forceDark = true,
 }: 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 }
   })
@@ -171,7 +177,7 @@ export function LogCore({
     : -1
 
   return (
-    <div className="flex flex-col h-full bg-theme-base">
+    <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" }}>
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-theme-border bg-theme-surface">
         {toolbarExtra}
@@ -303,6 +309,20 @@ 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">

package/src/components/logs/LogsViewer.tsx

@@ -25,6 +25,8 @@ export interface LogsViewerProps {
   fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>
   /** If provided, the stream button is enabled. Called to open an SSE connection. */
   createStream?: (params: Omit<LogsFetchParams, 'previous'>) => EventSource
+  /** Force dark mode on the logs container (default: true) */
+  forceDark?: boolean
 }
 
 export function LogsViewer({
@@ -34,6 +36,7 @@ export function LogsViewer({
   initialContainer,
   fetchLogs,
   createStream,
+  forceDark,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
   const [isLoading, setIsLoading] = useState(false)
@@ -141,6 +144,7 @@ export function LogsViewer({
       onDownload={downloadLogs}
       onClear={clear}
       toolbarExtra={toolbarExtra}
+      forceDark={forceDark}
     />
   )
 }

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -42,6 +42,8 @@ export interface WorkloadLogsViewerProps {
    * Called to open an SSE connection for the whole workload.
    */
   createStream?: (params: WorkloadLogsFetchParams) => EventSource
+  /** Force dark mode on the logs container (default: true) */
+  forceDark?: boolean
 }
 
 const POD_COLORS = [
@@ -49,7 +51,7 @@ const POD_COLORS = [
   'text-pink-400', 'text-cyan-400', 'text-orange-400', 'text-lime-400',
 ]
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -258,6 +260,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream }: WorkloadLog
       showPodName
       emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
       errorMessage={fetchError}
+      forceDark={forceDark}
     />
   )
 }

package/src/utils/log-format.ts

@@ -272,12 +272,20 @@ export function escapeRegExp(text: string): string {
  * K8s timestamps are in RFC3339Nano format: 2024-01-20T10:30:00.123456789Z content
  */
 export function parseLogLine(line: string): { timestamp: string; content: string } {
+  // K8s timestamp prefix: "2026-03-19T00:01:19.811Z message..."
   if (line.length > 30 && line[4] === '-' && line[7] === '-' && line[10] === 'T') {
     const spaceIdx = line.indexOf(' ')
     if (spaceIdx > 20 && spaceIdx < 40) {
       return { timestamp: line.slice(0, spaceIdx), content: line.slice(spaceIdx + 1) }
     }
   }
+  // Structured JSON with "ts" or "timestamp" field
+  if (line[0] === '{') {
+    const tsMatch = line.match(/"(?:ts|timestamp|time)"\s*:\s*"(\d{4}-\d{2}-\d{2}T[^"]+)"/)
+    if (tsMatch) {
+      return { timestamp: tsMatch[1], content: line }
+    }
+  }
   return { timestamp: '', content: line }
 }