@skyhook-io/k8s-ui 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -65,7 +65,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^6.0.2",
-    "vitest": "^4.0.18",
+    "vitest": "^4.1.3",
     "yaml": "^2.8.3"
   }
 }

package/src/components/resources/ResourcesSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, forwardRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback, forwardRef } from 'react'
 import {
   Search,
   ChevronDown,
@@ -44,6 +44,9 @@ export interface ResourcesSidebarProps {
   onNavigate?: (path: string) => void
   /** Base path for generating navigation URLs (e.g., '/org/clusters/id/k8s-resources') */
   basePath?: string
+  /** Called when a kind is selected via keyboard (Enter in the filter). Parent uses this
+   *  to move focus to the next UI level (e.g., the table search input). */
+  onKindNavigated?: () => void
 }
 
 // Persisted across remounts so collapsed categories survive tab switches
@@ -93,6 +96,8 @@ interface ResourceTypeButtonProps {
   resource: APIResource
   count: number
   isSelected: boolean
+  /** Keyboard-highlight state (arrow nav in the filter input). */
+  isHighlighted?: boolean
   isForbidden?: boolean
   isPinned?: boolean
   onTogglePin?: () => void
@@ -100,7 +105,7 @@ interface ResourceTypeButtonProps {
 }
 
 const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps>(
-  function ResourceTypeButton({ resource, count, isSelected, isForbidden: forbidden, isPinned, onTogglePin, onClick }, ref) {
+  function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick }, ref) {
     const Icon = getResourceIcon(resource.kind)
     return (
       <button
@@ -110,9 +115,11 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
           '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
             ? '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'
+            : isHighlighted
+              ? 'bg-theme-hover text-theme-text-primary'
+              : 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'
         )}
       >
         <Icon className="w-4 h-4 shrink-0" />
@@ -172,6 +179,7 @@ export function ResourcesSidebar({
   className,
   onNavigate,
   basePath,
+  onKindNavigated,
 }: ResourcesSidebarProps) {
   // Wraps kind selection to also navigate when basePath/onNavigate are provided
   const selectKind = (kind: SelectedKindInfo) => {
@@ -195,6 +203,15 @@ export function ResourcesSidebar({
   // Ref to selected sidebar item for scrolling into view on deeplink
   const selectedSidebarRef = useRef<HTMLButtonElement>(null)
 
+  // Ref to kind search input — auto-focused on mount so users can type a kind name immediately
+  const kindSearchRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    // Only focus on fine-pointer devices to avoid popping up the virtual keyboard on touch
+    if (typeof window !== 'undefined' && window.matchMedia('(pointer: fine)').matches) {
+      kindSearchRef.current?.focus()
+    }
+  }, [])
+
   // Effective selected kind — fall back to a safe default
   const effectiveSelectedKind = selectedKind ?? { name: 'pods', kind: 'Pod', group: '' }
 
@@ -335,6 +352,69 @@ export function ResourcesSidebar({
     })
   }
 
+  // --- Keyboard navigation ---
+  // Flat list of all navigable kinds in the order they appear in the sidebar.
+  const flatVisibleKinds = useMemo<SelectedKindInfo[]>(() => {
+    const kinds: SelectedKindInfo[] = []
+    if (favoritesExpanded) {
+      for (const p of pinned) {
+        kinds.push({ name: p.name, kind: p.kind, group: p.group })
+      }
+    }
+    if (filteredCategories) {
+      for (const cat of filteredCategories) {
+        if (effectiveExpandedCategories.has(cat.name)) {
+          for (const r of cat.visibleResources) {
+            kinds.push({ name: r.name, kind: r.kind, group: r.group })
+          }
+        }
+      }
+    }
+    return kinds
+  }, [favoritesExpanded, pinned, filteredCategories, effectiveExpandedCategories])
+
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  // Reset highlight when the filter or kind list changes
+  useEffect(() => {
+    setHighlightedIndex(kindFilter ? 0 : -1)
+  }, [kindFilter]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const highlightedKind = highlightedIndex >= 0 && highlightedIndex < flatVisibleKinds.length
+    ? flatVisibleKinds[highlightedIndex]
+    : null
+
+  // Scroll the highlighted kind button into view
+  const highlightedRef = useRef<HTMLButtonElement>(null)
+  useEffect(() => {
+    if (highlightedRef.current) {
+      highlightedRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }
+  }, [highlightedIndex])
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      setKindFilter('')
+      setHighlightedIndex(-1)
+      ;(e.target as HTMLInputElement).blur()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightedIndex(prev => Math.min(prev + 1, flatVisibleKinds.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightedIndex(prev => Math.max(prev - 1, 0))
+    } else if (e.key === 'Enter' && highlightedKind) {
+      e.preventDefault()
+      selectKind(highlightedKind)
+      setHighlightedIndex(-1)
+      setKindFilter('')
+      onKindNavigated?.()
+    }
+  }, [flatVisibleKinds.length, highlightedKind, selectKind, onKindNavigated]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isKindHighlighted = useCallback((name: string, group: string) => {
+    return highlightedKind?.name === name && highlightedKind?.group === group
+  }, [highlightedKind])
+
   // Scroll sidebar to show selected kind on mount (deep linking) and on kind changes (keyboard nav)
   const lastScrolledKind = useRef<string | null>(null)
   const isInitialScroll = useRef(true)
@@ -362,11 +442,12 @@ export function ResourcesSidebar({
         <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" />
           <input
+            ref={kindSearchRef}
             type="text"
             placeholder="Filter resources..."
             value={kindFilter}
             onChange={(e) => setKindFilter(e.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Escape') { setKindFilter(''); (e.target as HTMLInputElement).blur() } }}
+            onKeyDown={handleSearchKeyDown}
             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 && (
@@ -398,34 +479,41 @@ export function ResourcesSidebar({
               </span>
             )}
           </button>
-          {favoritesExpanded && (
-            <div className="space-y-0.5">
-              {pinned.length === 0 ? (
-                <div className="px-3 py-2 text-xs text-theme-text-disabled">
-                  No pinned resources. Click <Pin className="w-3 h-3 inline" /> on any resource type to pin it here.
-                </div>
-              ) : (
-                pinned.map((p) => {
-                  const isResourceSelected =
-                    (effectiveSelectedKind.name === p.name && effectiveSelectedKind.group === p.group) ||
-                    (effectiveSelectedKind.kind.toLowerCase() === p.kind.toLowerCase() && effectiveSelectedKind.group === p.group)
-                  return (
-                    <ResourceTypeButton
-                      key={`${p.name}-${p.group}`}
-                      ref={isResourceSelected ? selectedSidebarRef : null}
-                      resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
-                      count={counts?.[(p.group ? `${p.group}/${p.kind}` : p.kind)] ?? 0}
-                      isSelected={isResourceSelected}
-                      isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
-                      isPinned={true}
-                      onTogglePin={() => togglePin(p)}
-                      onClick={() => selectKind({ name: p.name, kind: p.kind, group: p.group })}
-                    />
-                  )
-                })
-              )}
+          <div className={clsx(
+            'grid transition-[grid-template-rows] duration-200',
+            favoritesExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+          )} style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}>
+            <div className="overflow-hidden">
+              <div className="space-y-0.5">
+                {pinned.length === 0 ? (
+                  <div className="px-3 py-2 text-xs text-theme-text-disabled">
+                    No pinned resources. Click <Pin className="w-3 h-3 inline" /> on any resource type to pin it here.
+                  </div>
+                ) : (
+                  pinned.map((p) => {
+                    const isResourceSelected =
+                      (effectiveSelectedKind.name === p.name && effectiveSelectedKind.group === p.group) ||
+                      (effectiveSelectedKind.kind.toLowerCase() === p.kind.toLowerCase() && effectiveSelectedKind.group === p.group)
+                    const highlighted = isKindHighlighted(p.name, p.group)
+                    return (
+                      <ResourceTypeButton
+                        key={`${p.name}-${p.group}`}
+                        ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
+                        resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
+                        count={counts?.[(p.group ? `${p.group}/${p.kind}` : p.kind)] ?? 0}
+                        isSelected={isResourceSelected}
+                        isHighlighted={highlighted}
+                        isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
+                        isPinned={true}
+                        onTogglePin={() => togglePin(p)}
+                        onClick={() => selectKind({ name: p.name, kind: p.kind, group: p.group })}
+                      />
+                    )
+                  })
+                )}
+              </div>
             </div>
-          )}
+          </div>
         </div>
         {filteredCategories ? (
           // Dynamic categories from API
@@ -449,31 +537,38 @@ export function ResourcesSidebar({
                     </span>
                   )}
                 </button>
-                {isExpanded && (
-                  <div className="space-y-0.5">
-                    {category.visibleResources.map((resource) => {
-                      const resourceIsPinned = isPinned(resource.name, resource.group)
-                      const isResourceSelected =
-                        (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
-                        (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
-                      // If the resource is pinned, let the Favorites section own the highlight
-                      const showSelected = isResourceSelected && !resourceIsPinned
-                      return (
-                      <ResourceTypeButton
-                        key={resource.name}
-                        ref={isResourceSelected ? selectedSidebarRef : null}
-                        resource={resource}
-                        count={counts?.[(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)] ?? 0}
-                        isSelected={showSelected}
-                        isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
-                        isPinned={resourceIsPinned}
-                        onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
-                        onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
-                      />
-                      )
-                    })}
+                <div className={clsx(
+                  'grid transition-[grid-template-rows] duration-200',
+                  isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                )} style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}>
+                  <div className="overflow-hidden">
+                    <div className="space-y-0.5">
+                      {category.visibleResources.map((resource) => {
+                        const resourceIsPinned = isPinned(resource.name, resource.group)
+                        const isResourceSelected =
+                          (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
+                          (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
+                        // If the resource is pinned, let the Favorites section own the highlight
+                        const showSelected = isResourceSelected && !resourceIsPinned
+                        const highlighted = isKindHighlighted(resource.name, resource.group)
+                        return (
+                        <ResourceTypeButton
+                          key={resource.name}
+                          ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
+                          resource={resource}
+                          count={counts?.[(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)] ?? 0}
+                          isSelected={showSelected}
+                          isHighlighted={highlighted}
+                          isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
+                          isPinned={resourceIsPinned}
+                          onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
+                          onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
+                        />
+                        )
+                      })}
+                    </div>
                   </div>
-                )}
+                </div>
               </div>
             )
           })

package/src/components/resources/ResourcesView.tsx

@@ -31,6 +31,8 @@ import {
   getPodStatus,
   getPodRestarts,
   getPodProblems,
+  getWorkloadProblems,
+  workloadMatchesProblemCategory,
   getContainerSquareStates,
   getWorkloadImages,
   getWorkloadConditions,
@@ -116,6 +118,8 @@ import {
   getCellFilterValue,
   parseColumnFilters,
   serializeColumnFilters,
+  podMatchesProblemCategory,
+  SEVERITY_DOT_COLOR,
 } from './resource-utils'
 import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
@@ -140,7 +144,9 @@ import { ResourcesSidebar } from './ResourcesSidebar'
 import type { SelectedKindInfo } from './ResourcesSidebar'
 
 // Pod problem filter options (special multi-select, not a single column value)
-const POD_PROBLEMS = ['CrashLoopBackOff', 'ImagePullBackOff', 'OOMKilled', 'Unschedulable', 'Not Ready', 'High Restarts'] as const
+const POD_PROBLEMS = ['CrashLoopBackOff', 'ImagePullBackOff', 'OOMKilled', 'Unschedulable', 'Not Ready', 'High Restarts', 'Init Failed', 'Exit Code Error', 'Failed', 'Other'] as const
+const WORKLOAD_PROBLEMS = ['Unavailable', 'Rollout Stuck', 'Rollout In Progress'] as const
+const WORKLOAD_KINDS = new Set(['deployments', 'statefulsets', 'daemonsets'])
 
 // Columns to skip for auto-detected filters (high cardinality, text-like, or non-filterable)
 const SKIP_FILTER_COLUMNS = new Set([
@@ -455,6 +461,8 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'namespace', label: 'Namespace', width: 'w-36' },
     { key: 'status', label: 'Status', width: 'w-24' },
     { key: 'instanceType', label: 'Instance Type', width: 'w-32' },
+    { key: 'capacityType', label: 'Capacity', width: 'w-24', tooltip: 'Spot or On-Demand' },
+    { key: 'zone', label: 'Zone', width: 'w-28', hideOnMobile: true },
     { key: 'nodePool', label: 'Node Pool', width: 'w-32' },
     { key: 'nodeName', label: 'Node', width: 'w-40', hideOnMobile: true },
     { key: 'age', label: 'Age', width: 'w-20' },
@@ -2476,27 +2484,8 @@ export function ResourcesView({
   const podMatchesProblemFilter = useCallback((pod: any, filters: string[]): boolean => {
     if (filters.length === 0) return true
     const problems = getPodProblems(pod)
-    const problemMessages = problems.map(p => p.message)
     const restarts = getPodRestarts(pod)
-
-    return filters.some(filter => {
-      switch (filter) {
-        case 'CrashLoopBackOff':
-          return problemMessages.includes('CrashLoopBackOff')
-        case 'ImagePullBackOff':
-          return problemMessages.some(m => m.includes('ImagePull'))
-        case 'OOMKilled':
-          return problemMessages.includes('OOMKilled')
-        case 'Unschedulable':
-          return problemMessages.includes('Unschedulable')
-        case 'Not Ready':
-          return problemMessages.includes('Not Ready') || problemMessages.some(m => m.includes('Probe'))
-        case 'High Restarts':
-          return restarts > 5
-        default:
-          return false
-      }
-    })
+    return filters.some(filter => podMatchesProblemCategory(problems, restarts, filter))
   }, [])
 
 
@@ -2526,9 +2515,17 @@ export function ResourcesView({
       )
     }
 
-    // Apply problem filters (pods only)
-    if (problemFilters.length > 0 && selectedKind.name.toLowerCase() === 'pods') {
-      result = result.filter((r: any) => podMatchesProblemFilter(r, problemFilters))
+    // Apply problem filters
+    if (problemFilters.length > 0) {
+      const kindLower = normalizeKindToPlural(selectedKind.name, selectedKind.group)
+      if (kindLower === 'pods') {
+        result = result.filter((r: any) => podMatchesProblemFilter(r, problemFilters))
+      } else if (WORKLOAD_KINDS.has(kindLower)) {
+        result = result.filter((r: any) => {
+          const problems = getWorkloadProblems(r, kindLower)
+          return problemFilters.some(f => workloadMatchesProblemCategory(problems, f))
+        })
+      }
     }
 
     // Apply inactive ReplicaSet filter (default: hide inactive)
@@ -2802,15 +2799,12 @@ export function ResourcesView({
 
       for (const pod of resources) {
         const podProblems = getPodProblems(pod)
-        const msgs = podProblems.map(p => p.message)
         const restarts = getPodRestarts(pod)
-
-        if (msgs.includes('CrashLoopBackOff')) problemCounts['CrashLoopBackOff']++
-        if (msgs.some(m => m.includes('ImagePull'))) problemCounts['ImagePullBackOff']++
-        if (msgs.includes('OOMKilled')) problemCounts['OOMKilled']++
-        if (msgs.includes('Unschedulable')) problemCounts['Unschedulable']++
-        if (msgs.includes('Not Ready') || msgs.some(m => m.includes('Probe'))) problemCounts['Not Ready']++
-        if (restarts > 5) problemCounts['High Restarts']++
+        for (const category of POD_PROBLEMS) {
+          if (podMatchesProblemCategory(podProblems, restarts, category)) {
+            problemCounts[category]++
+          }
+        }
       }
 
       const activeProblems = POD_PROBLEMS
@@ -2821,6 +2815,28 @@ export function ResourcesView({
       }
     }
 
+    // Workload-specific: compute problem counts
+    if (WORKLOAD_KINDS.has(kindLower)) {
+      const problemCounts: Record<string, number> = {}
+      WORKLOAD_PROBLEMS.forEach(p => problemCounts[p] = 0)
+
+      for (const resource of resources) {
+        const workloadProblems = getWorkloadProblems(resource, kindLower)
+        for (const category of WORKLOAD_PROBLEMS) {
+          if (workloadMatchesProblemCategory(workloadProblems, category)) {
+            problemCounts[category]++
+          }
+        }
+      }
+
+      const activeProblems = WORKLOAD_PROBLEMS
+        .map(p => ({ value: p, count: problemCounts[p] }))
+        .filter(p => p.count > 0)
+      if (activeProblems.length > 0) {
+        problems = activeProblems
+      }
+    }
+
     // Compute available labels for label filtering
     const labelCounts: Record<string, number> = {}
     for (const r of resources) {
@@ -2922,6 +2938,11 @@ export function ResourcesView({
           pinned={pinned}
           togglePin={togglePin}
           isPinned={isPinned}
+          onKindNavigated={() => {
+            // After selecting a kind via keyboard, move focus to the table search
+            // so the user can immediately filter within the selected kind.
+            setTimeout(() => searchInputRef.current?.focus(), 50)
+          }}
         />
       )}
 
@@ -2937,6 +2958,30 @@ export function ResourcesView({
               placeholder="Search... (press /)"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'ArrowDown') {
+                  // Hand off to the table's keyboard navigation — blur the input
+                  // so the registered ArrowDown/j/k shortcuts take over, and
+                  // highlight the first row.
+                  e.preventDefault()
+                  searchInputRef.current?.blur()
+                  setHighlightedIndex(0)
+                } else if (e.key === 'Enter' && filteredResourceCountRef.current > 0) {
+                  // Select the first (or currently highlighted) resource
+                  e.preventDefault()
+                  searchInputRef.current?.blur()
+                  if (highlightedIndex < 0) setHighlightedIndex(0)
+                  // Defer to next frame so the highlight renders before we open
+                  requestAnimationFrame(() => {
+                    const res = highlightedResourceRef.current ?? filteredResources[0]
+                    if (res?.metadata?.name) {
+                      onResourceClick?.({ kind: selectedKind.name, namespace: res.metadata.namespace || '', name: res.metadata.name, group: selectedKind.group })
+                    }
+                  })
+                } else if (e.key === 'Escape') {
+                  searchInputRef.current?.blur()
+                }
+              }}
               className="w-full max-w-md pl-10 pr-4 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"
             />
           </div>
@@ -4021,12 +4066,21 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
       const status = getPodStatus(resource)
       const problems = getPodProblems(resource)
       return (
-        <div className="flex items-center gap-2">
-          <span className={clsx('badge', status.color)}>
+        <div className="flex items-center gap-2 min-w-0">
+          <span className={clsx('badge truncate', status.color)} title={status.text}>
             {status.text}
           </span>
-          {problems.length > 0 && (
-            <Tooltip content={problems.map(p => p.message).join(', ')}>
+          {problems.length > 1 && (
+            <Tooltip content={
+              <div className="space-y-0.5">
+                {problems.map((p, i) => (
+                  <div key={i} className="flex items-center gap-1.5">
+                    <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                    <span>{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            }>
               <span className="text-red-400">
                 <AlertTriangle className="w-3.5 h-3.5" />
               </span>
@@ -4101,7 +4155,7 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
-function WorkloadCell({ resource, column }: { resource: any; kind: string; column: string }) {
+function WorkloadCell({ resource, column, kind }: { resource: any; kind: string; column: string }) {
   const status = resource.status || {}
   const spec = resource.spec || {}
 
@@ -4110,13 +4164,32 @@ function WorkloadCell({ resource, column }: { resource: any; kind: string; colum
       const desired = spec.replicas ?? 0
       const ready = status.readyReplicas || 0
       const allReady = ready === desired && desired > 0
+      const problems = getWorkloadProblems(resource, kind)
       return (
-        <span className={clsx(
-          'text-sm font-medium',
-          desired === 0 ? 'text-theme-text-secondary' : allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
-        )}>
-          {ready}/{desired}
-        </span>
+        <div className="flex items-center gap-1.5">
+          <span className={clsx(
+            'text-sm font-medium',
+            desired === 0 ? 'text-theme-text-secondary' : allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
+          )}>
+            {ready}/{desired}
+          </span>
+          {problems.length > 0 && (
+            <Tooltip content={
+              <div className="space-y-0.5">
+                {problems.map((p, i) => (
+                  <div key={i} className="flex items-center gap-1.5">
+                    <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                    <span>{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            }>
+              <span className="text-red-400">
+                <AlertTriangle className="w-3.5 h-3.5" />
+              </span>
+            </Tooltip>
+          )}
+        </div>
       )
     }
     case 'upToDate':
@@ -4167,13 +4240,32 @@ function DaemonSetCell({ resource, column }: { resource: any; column: string })
       const desired = status.desiredNumberScheduled || 0
       const ready = status.numberReady || 0
       const allReady = ready === desired && desired > 0
+      const problems = getWorkloadProblems(resource, 'daemonsets')
       return (
-        <span className={clsx(
-          'text-sm font-medium',
-          allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
-        )}>
-          {ready}
-        </span>
+        <div className="flex items-center gap-1.5">
+          <span className={clsx(
+            'text-sm font-medium',
+            allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
+          )}>
+            {ready}
+          </span>
+          {problems.length > 0 && (
+            <Tooltip content={
+              <div className="space-y-0.5">
+                {problems.map((p, i) => (
+                  <div key={i} className="flex items-center gap-1.5">
+                    <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                    <span>{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            }>
+              <span className="text-red-400">
+                <AlertTriangle className="w-3.5 h-3.5" />
+              </span>
+            </Tooltip>
+          )}
+        </div>
       )
     }
     case 'upToDate':