@skyhook-io/k8s-ui 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "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}
     />
   )
 }