@skyhook-io/k8s-ui 1.2.4 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "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"
   },
@@ -65,6 +66,6 @@
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18",
-    "yaml": "^2.7.1"
+    "yaml": "^2.8.3"
   }
 }

package/src/components/dock/BottomDock.tsx

@@ -91,7 +91,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}
         />
       )}

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/WorkloadLogsViewer.tsx

@@ -131,6 +131,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 +175,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)),
@@ -196,11 +220,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 +232,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>