@skyhook-io/k8s-ui 1.2.4 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -22,6 +22,7 @@
     "./topology": "./src/components/topology/index.ts",
     "./theme/variables.css": "./src/theme/variables.css",
     "./theme/tailwind-theme.css": "./src/theme/tailwind-theme.css",
+    "./theme/components.css": "./src/theme/components.css",
     "./theme": "./src/theme/index.ts",
     "./topology.css": "./src/components/topology/topology.css"
   },
@@ -63,8 +64,8 @@
     "lucide-react": "^0.575.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "vitest": "^4.0.18",
-    "yaml": "^2.7.1"
+    "yaml": "^2.8.3"
   }
 }

package/src/components/dock/BottomDock.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect, ReactNode } from 'react'
 import { DURATION_DOCK } from '../../utils/animation'
-import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2 } from 'lucide-react'
+import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useDock, DockTab } from './DockContext'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
@@ -12,13 +12,25 @@ const MAXIMIZED_TOP_OFFSET = 48
 
 interface BottomDockProps {
   renderTabContent: (tab: DockTab, isActive: boolean) => ReactNode
+  /** Optional extra content rendered in the dock header bar (between tabs and action buttons) */
+  renderTabHeaderExtra?: (tab: DockTab) => ReactNode
   /** Offset from the left edge in px — use to avoid overlapping a fixed sidebar */
   leftOffset?: number
+  /** Override the default dock height in px */
+  defaultHeight?: number
 }
 
-export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps) {
-  const { tabs, activeTabId, isExpanded, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
-  const [height, setHeight] = useState(DEFAULT_HEIGHT)
+export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset: leftOffsetProp, defaultHeight }: BottomDockProps) {
+  const { tabs, activeTabId, isExpanded, leftOffset: leftOffsetCtx, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
+  const leftOffset = leftOffsetProp ?? leftOffsetCtx
+  const [height, setHeight] = useState(defaultHeight ?? DEFAULT_HEIGHT)
+  const prevDefaultHeight = useRef(defaultHeight)
+  useEffect(() => {
+    if (defaultHeight != null && defaultHeight !== prevDefaultHeight.current) {
+      setHeight(defaultHeight)
+    }
+    prevDefaultHeight.current = defaultHeight
+  }, [defaultHeight])
   const [isMaximized, setIsMaximized] = useState(false)
   const isDragging = useRef(false)
   const startY = useRef(0)
@@ -91,7 +103,7 @@ export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps
     >
       {isExpanded && !isMaximized && (
         <div
-          className="absolute top-0 left-0 right-0 h-1 cursor-ns-resize hover:bg-blue-500/50 transition-colors"
+          className="absolute top-0 left-0 right-0 h-1 cursor-ns-resize hover:bg-skyhook-500/50 transition-colors"
           onMouseDown={handleMouseDown}
         />
       )}
@@ -112,6 +124,12 @@ export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps
           ))}
         </div>
 
+        {/* Per-tab extra header content */}
+        {renderTabHeaderExtra && activeTabId && (() => {
+          const activeTab = tabs.find(t => t.id === activeTabId)
+          return activeTab ? renderTabHeaderExtra(activeTab) : null
+        })()}
+
         <div className="flex items-center gap-1 ml-2">
           {tabs.length > 1 && (
             <button
@@ -175,7 +193,7 @@ function TabButton({
   onClose: () => void
 }) {
   const Icon = tab.type === 'terminal' || tab.type === 'node-terminal' || tab.type === 'local-terminal'
-    ? Terminal : tab.type === 'workload-logs' ? Layers : FileText
+    ? Terminal : tab.type === 'workload-logs' ? Layers : tab.type === 'traffic-flows' ? Activity : FileText
 
   return (
     <div

package/src/components/dock/DockContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react'
 
-export type DockTabType = 'terminal' | 'logs' | 'workload-logs' | 'node-terminal' | 'local-terminal'
+export type DockTabType = 'terminal' | 'logs' | 'workload-logs' | 'node-terminal' | 'local-terminal' | 'traffic-flows'
 
 export interface DockTab {
   id: string
@@ -26,11 +26,13 @@ export interface DockContextValue {
   tabs: DockTab[]
   activeTabId: string | null
   isExpanded: boolean
+  leftOffset: number
   addTab: (tab: Omit<DockTab, 'id'>) => string
   removeTab: (id: string) => void
   setActiveTab: (id: string) => void
   toggleExpanded: () => void
   setExpanded: (expanded: boolean) => void
+  setLeftOffset: (offset: number) => void
   closeAll: () => void
 }
 
@@ -42,6 +44,7 @@ export function DockProvider({ children }: { children: ReactNode }) {
   const [tabs, setTabs] = useState<DockTab[]>([])
   const [activeTabId, setActiveTabId] = useState<string | null>(null)
   const [isExpanded, setIsExpanded] = useState(false)
+  const [leftOffset, setLeftOffset] = useState(0)
   // Keep a ref to the latest tabs for deduplication without stale-closure issues
   const tabsRef = useRef<DockTab[]>(tabs)
   useEffect(() => { tabsRef.current = tabs }, [tabs])
@@ -62,6 +65,9 @@ export function DockProvider({ children }: { children: ReactNode }) {
       if (t.type === 'local-terminal') {
         return false // Allow multiple local terminals
       }
+      if (t.type === 'traffic-flows') {
+        return true // Singleton — always reuse existing tab
+      }
       return t.namespace === tabData.namespace &&
              t.podName === tabData.podName &&
              t.containerName === tabData.containerName
@@ -117,11 +123,13 @@ export function DockProvider({ children }: { children: ReactNode }) {
       tabs,
       activeTabId,
       isExpanded,
+      leftOffset,
       addTab,
       removeTab,
       setActiveTab,
       toggleExpanded,
       setExpanded: setIsExpanded,
+      setLeftOffset,
       closeAll,
     }}>
       {children}

package/src/components/dock/LocalTerminalTab.tsx

@@ -227,7 +227,7 @@ export function LocalTerminalTab({
           <div className="text-xs text-theme-text-disabled mb-3">{error}</div>
           <button
             onClick={connect}
-            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+            className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded"
           >
             <RefreshCw className="w-3 h-3" />
             Retry

package/src/components/dock/NodeTerminalTab.tsx

@@ -101,7 +101,7 @@ export function NodeTerminalTab({
         <div className="text-xs text-theme-text-tertiary text-center max-w-md break-all">{error}</div>
         <button
           onClick={createPod}
-          className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+          className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded"
         >
           <RefreshCw className="w-3 h-3" />
           Retry

package/src/components/dock/TerminalTab.tsx

@@ -293,7 +293,7 @@ export function TerminalTab({
                   <button
                     onClick={handleCreateDebugContainer}
                     disabled={isCreatingDebug}
-                    className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 disabled:opacity-50"
+                    className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded"
                   >
                     {isCreatingDebug ? (
                       <><RefreshCw className="w-3 h-3 animate-spin" />Creating debug container...</>
@@ -317,7 +317,7 @@ export function TerminalTab({
               <div className="text-xs text-theme-text-disabled mb-3">{error}</div>
               <button
                 onClick={connect}
-                className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+                className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded"
               >
                 <RefreshCw className="w-3 h-3" />
                 Retry

package/src/components/gitops/GitOpsActions.tsx

@@ -1,5 +1,6 @@
 import { RefreshCw, Pause, Play, Loader2 } from 'lucide-react'
 import { clsx } from 'clsx'
+import { SEVERITY_BADGE } from '../../utils/badge-colors'
 
 interface GitOpsActionsProps {
   /** The GitOps tool type */
@@ -53,10 +54,10 @@ export function GitOpsActions({
             'flex items-center rounded font-medium transition-colors',
             buttonClass,
             isSyncing
-              ? 'bg-blue-500/20 text-blue-400 cursor-wait'
+              ? `${SEVERITY_BADGE.info} cursor-wait`
               : suspended
               ? 'bg-theme-elevated text-theme-text-tertiary cursor-not-allowed'
-              : 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30'
+              : `${SEVERITY_BADGE.info} hover:bg-sky-500/30`
           )}
           title={suspended ? 'Cannot sync while suspended' : syncLabel}
         >
@@ -79,8 +80,8 @@ export function GitOpsActions({
               'flex items-center rounded font-medium transition-colors',
               buttonClass,
               isSuspending
-                ? 'bg-green-500/20 text-green-400 cursor-wait'
-                : 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
+                ? `${SEVERITY_BADGE.success} cursor-wait`
+                : `${SEVERITY_BADGE.success} hover:bg-emerald-500/30`
             )}
           >
             {isSuspending ? (
@@ -100,8 +101,8 @@ export function GitOpsActions({
               'flex items-center rounded font-medium transition-colors',
               buttonClass,
               isSuspending
-                ? 'bg-yellow-500/20 text-yellow-400 cursor-wait'
-                : 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
+                ? `${SEVERITY_BADGE.warning} cursor-wait`
+                : `${SEVERITY_BADGE.warning} hover:bg-amber-500/30`
             )}
           >
             {isSuspending ? (
@@ -147,7 +148,7 @@ export function SyncButton({
         buttonClass,
         loading || disabled
           ? 'bg-theme-elevated text-theme-text-tertiary cursor-not-allowed'
-          : 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30'
+          : `${SEVERITY_BADGE.info} hover:bg-sky-500/30`
       )}
     >
       {loading ? (
@@ -190,8 +191,8 @@ export function SuspendToggle({
           'flex items-center rounded font-medium transition-colors',
           buttonClass,
           loading
-            ? 'bg-green-500/20 text-green-400 cursor-wait'
-            : 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
+            ? `${SEVERITY_BADGE.success} cursor-wait`
+            : `${SEVERITY_BADGE.success} hover:bg-emerald-500/30`
         )}
       >
         {loading ? (
@@ -212,8 +213,8 @@ export function SuspendToggle({
         'flex items-center rounded font-medium transition-colors',
         buttonClass,
         loading
-          ? 'bg-yellow-500/20 text-yellow-400 cursor-wait'
-          : 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
+          ? `${SEVERITY_BADGE.warning} cursor-wait`
+          : `${SEVERITY_BADGE.warning} hover:bg-amber-500/30`
       )}
     >
       {loading ? (

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -21,7 +21,7 @@ export function GitOpsStatusBadge({ status, showHealth = true, compact = false }
   if (compact) {
     return (
       <span
-        className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', colorClass)}
+        className={clsx('badge', colorClass)}
         title={status.message}
       >
         <Icon className="w-3 h-3" />
@@ -37,7 +37,7 @@ export function GitOpsStatusBadge({ status, showHealth = true, compact = false }
   return (
     <div className="flex items-center gap-2">
       <span
-        className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', colorClass)}
+        className={clsx('badge', colorClass)}
         title={status.message}
       >
         <Icon className="w-3.5 h-3.5" />
@@ -94,7 +94,7 @@ function HealthIndicator({ health }: HealthIndicatorProps) {
 
   return (
     <span
-      className={clsx('px-1.5 py-0.5 rounded text-xs inline-flex items-center gap-1', color)}
+      className={clsx('badge-sm', color)}
       title={`Health: ${label}`}
     >
       <Icon className="w-3 h-3" />
@@ -126,7 +126,7 @@ function getHealthInfo(health: GitOpsHealthStatus) {
 export function SyncStatusBadge({ sync, suspended }: { sync: SyncStatus; suspended?: boolean }) {
   if (suspended) {
     return (
-      <span className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', SEVERITY_BADGE_BORDERED.warning)}>
+      <span className={clsx('badge', SEVERITY_BADGE_BORDERED.warning)}>
         <Pause className="w-3 h-3" />
         Suspended
       </span>
@@ -137,7 +137,7 @@ export function SyncStatusBadge({ sync, suspended }: { sync: SyncStatus; suspend
   const Icon = config.icon
 
   return (
-    <span className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', config.color)}>
+    <span className={clsx('badge', config.color)}>
       <Icon className={clsx('w-3 h-3', sync === 'Reconciling' && 'animate-spin')} />
       {config.label}
     </span>
@@ -164,7 +164,7 @@ export function HealthStatusBadge({ health }: { health: GitOpsHealthStatus }) {
   const { icon: Icon, color, label } = getHealthInfo(health)
 
   return (
-    <span className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', color)}>
+    <span className={clsx('badge', color)}>
       <Icon className={clsx('w-3 h-3', health === 'Progressing' && 'animate-spin')} />
       {label}
     </span>

package/src/components/logs/LogCore.tsx

@@ -240,7 +240,7 @@ export function LogCore({
             <button
               onClick={() => setExpandAllStructured(prev => !prev)}
               className={`p-1.5 rounded transition-colors ${
-                expandAllStructured ? 'bg-blue-600/50 text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+                expandAllStructured ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
               }`}
             >
               <Braces className="w-4 h-4" />
@@ -253,7 +253,7 @@ export function LogCore({
           <button
             onClick={toggleTimestamps}
             className={`p-1.5 rounded transition-colors ${
-              showTimestamps ? 'bg-blue-600/50 text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              showTimestamps ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
             }`}
           >
             <Clock className="w-4 h-4" />
@@ -265,7 +265,7 @@ export function LogCore({
           <button
             onClick={toggleWrap}
             className={`p-1.5 rounded transition-colors ${
-              wordWrap ? 'bg-blue-600/50 text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              wordWrap ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
             }`}
           >
             <WrapText className="w-4 h-4" />
@@ -277,7 +277,7 @@ export function LogCore({
           <button
             onClick={() => search.isOpen ? search.close() : search.open()}
             className={`p-1.5 rounded transition-colors ${
-              search.isOpen ? 'bg-blue-600 text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              search.isOpen ? 'btn-brand-toggle' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
             }`}
           >
             <Search className="w-4 h-4" />
@@ -365,7 +365,7 @@ export function LogCore({
             <button
               onClick={search.toggleRegex}
               className={`p-1 rounded transition-colors ${
-                search.isRegex ? 'bg-blue-600 text-theme-text-primary' : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                search.isRegex ? 'btn-brand-toggle' : 'text-theme-text-tertiary hover:text-theme-text-secondary'
               }`}
             >
               <Regex className="w-3.5 h-3.5" />
@@ -377,7 +377,7 @@ export function LogCore({
             <button
               onClick={search.toggleCaseSensitive}
               className={`p-1 rounded transition-colors ${
-                search.isCaseSensitive ? 'bg-blue-600 text-theme-text-primary' : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                search.isCaseSensitive ? 'btn-brand-toggle' : 'text-theme-text-tertiary hover:text-theme-text-secondary'
               }`}
             >
               <CaseSensitive className="w-3.5 h-3.5" />
@@ -389,7 +389,7 @@ export function LogCore({
             <button
               onClick={search.toggleFilterMode}
               className={`p-1 rounded transition-colors ${
-                search.isFilterMode ? 'bg-blue-600 text-theme-text-primary' : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                search.isFilterMode ? 'btn-brand-toggle' : 'text-theme-text-tertiary hover:text-theme-text-secondary'
               }`}
             >
               <Filter className="w-3.5 h-3.5" />
@@ -484,7 +484,7 @@ export function LogCore({
           {!atBottom && (
             <button
               onClick={scrollToBottom}
-              className="absolute bottom-4 right-14 px-3 py-1.5 bg-blue-600 text-white text-xs rounded-full shadow-lg hover:bg-blue-700 z-10"
+              className="absolute bottom-4 right-14 px-3 py-1.5 btn-brand text-xs rounded-full shadow-lg z-10"
             >
               Scroll to bottom
             </button>

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
+  /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
+  overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
 }
@@ -36,6 +38,7 @@ export function LogsViewer({
   initialContainer,
   fetchLogs,
   createStream,
+  overrideDownload,
   forceDark,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
@@ -105,12 +108,14 @@ export function LogsViewer({
         mime = 'text/plain'
     }
     try {
-      triggerDownload(content, mime, filename)
-      showSuccess('Log download started', `Saving ${filename}. Check your browser or desktop Downloads location.`)
+      triggerDownload(content, mime, filename, overrideDownload)
+      if (!overrideDownload) {
+        showSuccess('Log download started', `Saving ${filename}. Check your browser Downloads.`)
+      }
     } catch (err) {
       showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
     }
-  }, [entries, podName, selectedContainer, showError, showSuccess])
+  }, [entries, podName, selectedContainer, overrideDownload, showError, showSuccess])
 
   const toolbarExtra = (
     <>

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
+  /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
+  overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
 }
@@ -51,7 +53,7 @@ const POD_COLORS = [
   'text-pink-400', 'text-cyan-400', 'text-orange-400', 'text-lime-400',
 ]
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -131,6 +133,29 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }:
             })
           }
         },
+        onPodAdded: (data: any) => {
+          if (data?.pods) {
+            const newPods = data.pods as WorkloadPodInfo[]
+            setPods(prev => {
+              const existing = new Set(prev.map(p => p.name))
+              const toAdd = newPods.filter(p => !existing.has(p.name))
+              return toAdd.length > 0 ? [...prev, ...toAdd] : prev
+            })
+            setSelectedPods(prev => {
+              const next = new Set(prev)
+              newPods.forEach(p => next.add(p.name))
+              return next
+            })
+          }
+        },
+        onPodRemoved: (data: any) => {
+          if (data?.pod) {
+            const removedName = data.pod as string
+            setPods(prev => prev.filter(p => p.name !== removedName))
+            // Don't remove from selectedPods — keep old log entries visible
+            // while new pod logs start flowing in
+          }
+        },
       },
       'Workload log stream error',
     )
@@ -152,8 +177,9 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }:
   }, [])
 
   const toggleAllPods = useCallback(() => {
-    setSelectedPods(selectedPods.size === pods.length ? new Set() : new Set(pods.map(p => p.name)))
-  }, [selectedPods.size, pods])
+    const allSelected = pods.every(p => selectedPods.has(p.name))
+    setSelectedPods(allSelected ? new Set() : new Set(pods.map(p => p.name)))
+  }, [selectedPods, pods])
 
   const filteredEntries = useMemo(
     () => entries.filter(e => !e.pod || selectedPods.has(e.pod)),
@@ -182,12 +208,14 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }:
         mime = 'text/plain'
     }
     try {
-      triggerDownload(content, mime, filename)
-      showSuccess('Log download started', `Saving ${filename}. Check your browser or desktop Downloads location.`)
+      triggerDownload(content, mime, filename, overrideDownload)
+      if (!overrideDownload) {
+        showSuccess('Log download started', `Saving ${filename}. Check your browser Downloads.`)
+      }
     } catch (err) {
       showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
     }
-  }, [filteredEntries, name, showError, showSuccess])
+  }, [filteredEntries, name, overrideDownload, showError, showSuccess])
 
   const toolbarExtra = (
     <>
@@ -196,11 +224,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }:
         <button
           onClick={() => setShowPodFilter(v => !v)}
           className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors ${
-            showPodFilter ? 'bg-blue-600 text-theme-text-primary' : 'bg-theme-elevated text-theme-text-secondary hover:bg-theme-hover'
+            showPodFilter ? 'btn-brand-toggle' : 'bg-theme-elevated text-theme-text-secondary hover:bg-theme-hover'
           }`}
         >
           <Filter className="w-3 h-3" />
-          <span>{selectedPods.size}/{pods.length} pods</span>
+          <span>{pods.filter(p => selectedPods.has(p.name)).length}/{pods.length} pods</span>
           <ChevronDown className="w-3 h-3" />
         </button>
 
@@ -208,7 +236,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }:
           <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">
-                {selectedPods.size === pods.length ? 'Deselect all' : 'Select all'}
+                {pods.every(p => selectedPods.has(p.name)) ? 'Deselect all' : 'Select all'}
               </button>
             </div>
             {pods.map(pod => (

package/src/components/logs/useLogStream.ts

@@ -6,6 +6,10 @@ export interface LogStreamHandlers {
   onConnected?: (data: unknown) => void
   /** Called for each log event with parsed event data */
   onLog: (data: unknown) => void
+  /** Called when new pods are discovered during streaming (workload logs only) */
+  onPodAdded?: (data: unknown) => void
+  /** Called when pods are terminated during streaming (workload logs only) */
+  onPodRemoved?: (data: unknown) => void
 }
 
 /**
@@ -45,6 +49,22 @@ export function useLogStream() {
       }
     })
 
+    es.addEventListener('pod_added', (event) => {
+      if (handlers.onPodAdded) {
+        try { handlers.onPodAdded(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse pod_added event:', e)
+        }
+      }
+    })
+
+    es.addEventListener('pod_removed', (event) => {
+      if (handlers.onPodRemoved) {
+        try { handlers.onPodRemoved(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse pod_removed event:', e)
+        }
+      }
+    })
+
     es.addEventListener('end', () => setIsStreaming(false))
 
     es.addEventListener('error', (event) => {

package/src/components/resources/ResourcesSidebar.tsx

@@ -109,7 +109,7 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
         className={clsx(
           'w-full flex items-center gap-2 px-2 xl:px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
           isSelected
-            ? 'bg-blue-500/20 text-blue-700 dark:text-blue-300'
+            ? 'selection-strong selection-text'
             : forbidden
               ? 'text-theme-text-disabled hover:bg-theme-elevated hover:text-theme-text-secondary'
               : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
@@ -146,8 +146,8 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
             </Tooltip>
           ) : (
             <span className={clsx(
-              'text-xs py-0.5 rounded text-center',
-              isSelected ? 'bg-blue-500/30 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated',
+              'text-xs py-0.5 rounded text-center font-mono',
+              isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
               count < 1000 ? 'w-8' : 'w-9'
             )}>
               {count}
@@ -357,7 +357,7 @@ export function ResourcesSidebar({
   }, [effectiveSelectedKind.name, effectiveSelectedKind.group])
 
   return (
-    <div className={clsx('w-56 2xl:w-72 bg-theme-surface border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0', className)}>
+    <div className={clsx('w-56 2xl:w-72 bg-theme-surface dark:bg-theme-base border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0', className)}>
       <div className="px-2 py-2 border-b border-theme-border">
         <div className="relative">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
@@ -367,7 +367,7 @@ export function ResourcesSidebar({
             value={kindFilter}
             onChange={(e) => setKindFilter(e.target.value)}
             onKeyDown={(e) => { if (e.key === 'Escape') { setKindFilter(''); (e.target as HTMLInputElement).blur() } }}
-            className="w-full pl-7 pr-7 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full pl-7 pr-7 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-skyhook-500"
           />
           {kindFilter && (
             <button
@@ -393,7 +393,7 @@ export function ResourcesSidebar({
             )}
             <span className="flex-1 text-left">Favorites</span>
             {!favoritesExpanded && pinned.length > 0 && (
-              <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center', pinned.length < 1000 ? 'w-8' : 'w-9')}>
+              <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', pinned.length < 1000 ? 'w-8' : 'w-9')}>
                 {pinned.length}
               </span>
             )}
@@ -444,7 +444,7 @@ export function ResourcesSidebar({
                   )}
                   <span className="flex-1 text-left">{category.name}</span>
                   {!isExpanded && (
-                    <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center', category.total < 1000 ? 'w-8' : 'w-9')}>
+                    <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', category.total < 1000 ? 'w-8' : 'w-9')}>
                       {category.total}
                     </span>
                   )}
@@ -497,15 +497,15 @@ export function ResourcesSidebar({
                 className={clsx(
                   'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
                   isSelected
-                    ? 'bg-blue-500/20 text-blue-700 dark:text-blue-300'
+                    ? 'selection-strong selection-text'
                     : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
                 )}
               >
                 <Icon className="w-4 h-4 shrink-0" />
                 <span className="flex-1 text-left">{type.label}</span>
                 <span className={clsx(
-                  'text-xs px-2 py-0.5 rounded',
-                  isSelected ? 'bg-blue-500/30 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated'
+                  'badge font-mono',
+                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated'
                 )}>
                   {count}
                 </span>