@skyhook-io/k8s-ui 1.13.0 → 1.13.4

package/src/components/timeline/TimelineList.tsx

@@ -30,7 +30,7 @@ import { isChangeEvent, isHistoricalEvent } from '../../types'
 import { getHealthBadgeColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { ResourceRefBadge } from '../ui/drawer-components'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
+import { kindToPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
 
 /** Format resource age (e.g., "3d", "5h", "10m") */
@@ -604,7 +604,15 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               <button
                 onClick={(e) => {
                   e.stopPropagation()
-                  onResourceClick?.({ kind: kindToPlural(item.kind), namespace: item.namespace, name: item.name, group: apiVersionToGroup(item.apiVersion) })
+                  onResourceClick?.({
+                    kind: kindToPluralWithGroup(
+                      item.kind,
+                      apiVersionToGroup(item.apiVersion),
+                    ),
+                    namespace: item.namespace,
+                    name: item.name,
+                    group: apiVersionToGroup(item.apiVersion),
+                  })
                 }}
                 className="flex items-center gap-2 hover:bg-theme-elevated/50 rounded px-1 -ml-1 transition-colors group"
               >
@@ -777,7 +785,15 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
               <button
                 onClick={(e) => {
                   e.stopPropagation()
-                  onResourceClick?.({ kind: kindToPlural(first.kind), namespace: first.namespace, name: first.name, group: apiVersionToGroup(first.apiVersion) })
+                  onResourceClick?.({
+                    kind: kindToPluralWithGroup(
+                      first.kind,
+                      apiVersionToGroup(first.apiVersion),
+                    ),
+                    namespace: first.namespace,
+                    name: first.name,
+                    group: apiVersionToGroup(first.apiVersion),
+                  })
                 }}
                 className="flex items-center gap-2 hover:bg-theme-elevated/50 rounded px-1 -ml-1 transition-colors group"
               >

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -26,7 +26,7 @@ import {
 } from 'lucide-react'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
+import { kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
 import { PaneLoader } from '../ui/PaneLoader'
 import { TimelineToolbar } from './TimelineToolbar'
 import { sortTimelineLanes, TIMELINE_SORT_DEFAULT, type TimelineSort } from './timeline-lane-sort'
@@ -770,7 +770,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       onNavigatePath(gitOpsPath)
       return
     }
-    onResourceClick?.({ kind: kindToPlural(kind), namespace, name, group })
+    onResourceClick?.({ kind: kindToPluralWithGroup(kind, group ?? ''), namespace, name, group })
   }, [onNavigatePath, onResourceClick])
   const containerRef = useRef<HTMLDivElement>(null)
   const [zoom, setZoom] = useState(1)
@@ -3097,7 +3097,15 @@ export function EventDetailPanel({ events, selectedId, onSelectId, onClose, onRe
   // divider separates "the dot you clicked" from "what happened around it".
   const neighborsFrom = events.length === 1 && railEvents.length > 1 ? 1 : -1
   const openResource = () =>
-    onResourceClick?.({ kind: kindToPlural(selected.kind), namespace: selected.namespace, name: selected.name, group: apiVersionToGroup(selected.apiVersion) })
+    onResourceClick?.({
+      kind: kindToPluralWithGroup(
+        selected.kind,
+        apiVersionToGroup(selected.apiVersion),
+      ),
+      namespace: selected.namespace,
+      name: selected.name,
+      group: apiVersionToGroup(selected.apiVersion),
+    })
 
   return (
     <div

package/src/components/trace/ReachabilityView.tsx

@@ -535,7 +535,7 @@ export function problemRows(
     // entry can carry several findings, and one origin several failed routes.
     // `k` is what `seen` just proved unique, so pairing them is what makes the
     // React key safe rather than each caller having to get it right.
-    rows.push({ ...r, key: `${r.key}${k}` })
+    rows.push({ ...r, key: `${r.key}\x00${k}` })
   }
   const refNode = (r?: ResourceRef) => (r ? `n:${r.kind}/${r.namespace ?? ''}/${r.name || 'pods'}` : '')
 

package/src/components/trace/TracePanel.tsx

@@ -87,6 +87,7 @@ export interface InClusterCapability {
   allowed: boolean
   reason?: string
   cluster?: string
+  clusterKey?: string
   namespace: string
   /** Per-call ceiling on probe Pods. Routes past it never run - ordering is
    *  deterministic, so re-running starts from the same first maxProbes. */

package/src/components/ui/InClusterConsentDialog.tsx

@@ -13,6 +13,7 @@ export interface ConsentRequest {
 interface InClusterConsentDialogProps {
   open: boolean
   cluster?: string
+  clusterKey?: string
   namespace: string
   /** The requests this run will send, one per declared route. */
   requests?: ConsentRequest[]
@@ -85,7 +86,7 @@ function cluster(name?: string): string {
 // Confirms the mutating in-cluster reachability test before it spawns a Job/pod,
 // naming the cluster it lands in. Permission is enforced upstream (the button only
 // renders when the capability SSAR allows), so this is a safety confirm, not authz.
-export function InClusterConsentDialog({ open, cluster, namespace, requests, untestedCount, maxProbes, onClose, onConfirm }: InClusterConsentDialogProps) {
+export function InClusterConsentDialog({ open, cluster, clusterKey, namespace, requests, untestedCount, maxProbes, onClose, onConfirm }: InClusterConsentDialogProps) {
   const [dontAskAgain, setDontAskAgain] = useState(false)
 
   function handleClose() {
@@ -94,7 +95,7 @@ export function InClusterConsentDialog({ open, cluster, namespace, requests, unt
   }
 
   function handleConfirm() {
-    if (dontAskAgain && cluster) rememberInClusterConsent(cluster)
+    if (dontAskAgain && clusterKey) rememberInClusterConsent(clusterKey)
     setDontAskAgain(false)
     onConfirm()
   }
@@ -117,11 +118,11 @@ export function InClusterConsentDialog({ open, cluster, namespace, requests, unt
       cancelLabel="Cancel"
       variant="warning"
     >
-      {/* "Don't ask again" is stored per cluster. Without a cluster identity
+      {/* "Don't ask again" is stored per cluster source. Without a source identity
           there is nothing safe to key it on (one origin can front many
           clusters), so consent is never remembered - hide the checkbox rather
           than promise a persistence that doesn't stick. */}
-      {cluster ? (
+      {clusterKey ? (
         <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
           <input
             type="checkbox"

package/src/components/ui/SelectMenu.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'react'
-import { Check, ChevronDown } from 'lucide-react'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import { Check, ChevronDown, Search } from 'lucide-react'
 import { clsx } from 'clsx'
 
 export interface SelectMenuOption {
@@ -13,67 +13,241 @@ export function SelectMenu({
   onChange,
   ariaLabel,
   className,
+  searchPlaceholder,
 }: {
   value: string
   options: SelectMenuOption[]
   onChange: (value: string) => void
   ariaLabel: string
   className?: string
+  searchPlaceholder?: string
 }) {
   const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+  const listboxId = useId()
   const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  const pointerDownInsideRef = useRef(false)
   const selected = options.find((option) => option.value === value) ?? options[0]
+  const filteredOptions = useMemo(() => {
+    const normalized = query.trim().toLowerCase()
+    if (!normalized) return options
+    return options.filter((option) => option.label.toLowerCase().includes(normalized))
+  }, [options, query])
+  const selectedIsVisible = filteredOptions.some((option) => option.value === value)
+
+  const selectOption = (nextValue: string) => {
+    onChange(nextValue)
+    setOpen(false)
+    triggerRef.current?.focus()
+  }
 
   useEffect(() => {
     if (!open) return
     const onPointerDown = (event: MouseEvent) => {
       if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
     }
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') setOpen(false)
-    }
     document.addEventListener('mousedown', onPointerDown)
-    document.addEventListener('keydown', onKeyDown)
     return () => {
       document.removeEventListener('mousedown', onPointerDown)
-      document.removeEventListener('keydown', onKeyDown)
     }
   }, [open])
 
+  useEffect(() => {
+    if (!open) setQuery('')
+  }, [open])
+
+  useEffect(() => {
+    if (!open || !query) return
+    if (listRef.current) listRef.current.scrollTop = 0
+  }, [open, query])
+
+  useEffect(() => {
+    if (!open) return
+    if (!searchPlaceholder) {
+      triggerRef.current?.focus()
+      return
+    }
+    listRef.current
+      ?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]')
+      ?.scrollIntoView({ block: 'nearest' })
+  }, [open, searchPlaceholder])
+
   return (
-    <div ref={rootRef} className={clsx('relative', className)}>
+    <div
+      ref={rootRef}
+      className={clsx('relative', className)}
+      onMouseDownCapture={() => {
+        pointerDownInsideRef.current = true
+        requestAnimationFrame(() => {
+          pointerDownInsideRef.current = false
+        })
+      }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !open) return
+        event.preventDefault()
+        event.stopPropagation()
+        setOpen(false)
+        triggerRef.current?.focus()
+      }}
+      onBlur={(event) => {
+        if (!open) return
+        if (event.relatedTarget && rootRef.current?.contains(event.relatedTarget)) return
+        if (!pointerDownInsideRef.current) {
+          setOpen(false)
+          return
+        }
+        requestAnimationFrame(() => {
+          if (!document.hasFocus() || !listRef.current) return
+          if (searchPlaceholder) searchInputRef.current?.focus()
+          else triggerRef.current?.focus()
+        })
+      }}
+    >
       <button
+        ref={triggerRef}
         type="button"
         aria-label={ariaLabel}
         aria-haspopup="listbox"
         aria-expanded={open}
-        onClick={() => setOpen((current) => !current)}
+        aria-controls={open ? listboxId : undefined}
+        onClick={() => {
+          if (!open) {
+            setHighlightedIndex(
+              Math.max(
+                options.findIndex((option) => option.value === value),
+                0,
+              ),
+            )
+          }
+          setOpen(!open)
+        }}
         className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover"
       >
         <span className="truncate">{selected?.label}</span>
         <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
       </button>
       {open && (
-        <div role="listbox" className="absolute right-0 top-full z-50 mt-1 min-w-full overflow-hidden rounded-md border border-theme-border bg-theme-surface py-1 shadow-theme-lg">
-          {options.map((option) => {
-            const active = option.value === value
-            return (
-              <button
-                key={option.value}
-                type="button"
-                role="option"
-                aria-selected={active}
-                onClick={() => {
-                  onChange(option.value)
-                  setOpen(false)
+        <div
+          className={clsx(
+            'absolute top-full z-50 mt-1 min-w-full overflow-hidden rounded-md border border-theme-border bg-theme-surface shadow-theme-lg',
+            searchPlaceholder ? 'left-0 right-0' : 'right-0'
+          )}
+        >
+          {searchPlaceholder && (
+            <div
+              className="flex items-center gap-2 border-b border-theme-border px-2.5 py-2"
+              onMouseDown={(event) => {
+                if (event.target !== searchInputRef.current) event.preventDefault()
+              }}
+            >
+              <Search className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+              <input
+                ref={searchInputRef}
+                autoFocus
+                value={query}
+                onChange={(event) => {
+                  setQuery(event.target.value)
+                  setHighlightedIndex(0)
                 }}
-                className="flex w-full items-center gap-2 whitespace-nowrap px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
-              >
-                <Check className={clsx('h-3.5 w-3.5 shrink-0 text-accent', !active && 'opacity-0')} />
-                {option.label}
-              </button>
-            )
-          })}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && filteredOptions.length > 0) {
+                    event.preventDefault()
+                    const nextIndex = Math.min(highlightedIndex, filteredOptions.length - 1)
+                    selectOption(filteredOptions[nextIndex].value)
+                  } else if (event.key === 'ArrowDown') {
+                    event.preventDefault()
+                    const optionElements = listRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]')
+                    optionElements?.[Math.min(highlightedIndex, optionElements.length - 1)]?.focus()
+                  }
+                }}
+                aria-label={searchPlaceholder}
+                role="combobox"
+                aria-autocomplete="list"
+                aria-controls={listboxId}
+                aria-expanded="true"
+                aria-activedescendant={
+                  filteredOptions.length > 0
+                    ? `${listboxId}-option-${Math.min(highlightedIndex, filteredOptions.length - 1)}`
+                    : undefined
+                }
+                placeholder={searchPlaceholder}
+                className="min-w-0 flex-1 bg-transparent text-xs text-theme-text-primary outline-none placeholder:text-theme-text-tertiary"
+              />
+            </div>
+          )}
+          {searchPlaceholder && (
+            <span className="sr-only" aria-live="polite">
+              {filteredOptions.length === 0
+                ? 'No matches.'
+                : `${filteredOptions.length} ${filteredOptions.length === 1 ? 'option' : 'options'} available.`}
+            </span>
+          )}
+          <div
+            id={listboxId}
+            ref={listRef}
+            role="listbox"
+            aria-label={ariaLabel}
+            onKeyDown={(event) => {
+              if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return
+              const optionElements = Array.from(
+                listRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]') ?? [],
+              )
+              const currentIndex = optionElements.indexOf(event.target as HTMLButtonElement)
+              if (currentIndex < 0) return
+              event.preventDefault()
+              if (event.key === 'ArrowUp' && currentIndex === 0 && searchPlaceholder) {
+                searchInputRef.current?.focus()
+                return
+              }
+              const nextIndex = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                  ? optionElements.length - 1
+                  : event.key === 'ArrowDown'
+                    ? Math.min(currentIndex + 1, optionElements.length - 1)
+                    : Math.max(currentIndex - 1, 0)
+              optionElements[nextIndex]?.focus()
+            }}
+            className={clsx(filteredOptions.length > 0 && 'py-1', searchPlaceholder && 'max-h-64 overflow-y-auto')}
+          >
+            {filteredOptions.map((option, index) => {
+              const active = option.value === value
+              return (
+                <button
+                  key={option.value}
+                  id={`${listboxId}-option-${index}`}
+                  type="button"
+                  role="option"
+                  aria-selected={active}
+                  tabIndex={
+                    searchPlaceholder ? (index === highlightedIndex ? 0 : -1) : active || (!selectedIsVisible && index === 0) ? 0 : -1
+                  }
+                  onClick={() => selectOption(option.value)}
+                  onFocus={() => setHighlightedIndex(index)}
+                  className={clsx(
+                    'flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary',
+                    searchPlaceholder && index === highlightedIndex && 'bg-theme-hover text-theme-text-primary',
+                    !searchPlaceholder && 'whitespace-nowrap'
+                  )}
+                >
+                  <Check className={clsx('h-3.5 w-3.5 shrink-0 text-accent', !active && 'opacity-0')} />
+                  <span className={clsx(searchPlaceholder && 'truncate')}>{option.label}</span>
+                </button>
+              )
+            })}
+          </div>
+          {filteredOptions.length === 0 && (
+            <p
+              onMouseDown={(event) => event.preventDefault()}
+              className="px-3 py-2 text-xs text-theme-text-tertiary"
+            >
+              No matches.
+            </p>
+          )}
         </div>
       )}
     </div>

package/src/components/ui/drawer-components.tsx

@@ -733,6 +733,18 @@ export function formatKindName(kind: string): string {
     resourceclaims: 'ResourceClaim', resourceclaimtemplates: 'ResourceClaimTemplate',
     deviceclasses: 'DeviceClass', resourceslices: 'ResourceSlice',
     clusterpolicies: 'ClusterPolicy', nvidiadrivers: 'NVIDIADriver',
+    clusterqueues: 'ClusterQueue', localqueues: 'LocalQueue', resourceflavors: 'ResourceFlavor',
+    admissionchecks: 'AdmissionCheck', provisioningrequests: 'ProvisioningRequest',
+    rayclusters: 'RayCluster', rayjobs: 'RayJob', rayservices: 'RayService', raycronjobs: 'RayCronJob',
+    leaderworkersets: 'LeaderWorkerSet', jobsets: 'JobSet',
+    inferenceservices: 'InferenceService', servingruntimes: 'ServingRuntime',
+    clusterservingruntimes: 'ClusterServingRuntime', inferencegraphs: 'InferenceGraph',
+    trainedmodels: 'TrainedModel', llminferenceservices: 'LLMInferenceService',
+    inferencepools: 'InferencePool', inferenceobjectives: 'InferenceObjective',
+    jobflows: 'JobFlow', jobtemplates: 'JobTemplate', ragengines: 'RAGEngine',
+    nimservices: 'NIMService', nimcaches: 'NIMCache', nimpipelines: 'NIMPipeline',
+    deviceconfigs: 'DeviceConfig',
+    pytorchjobs: 'PyTorchJob', tfjobs: 'TFJob', mpijobs: 'MPIJob', trainjobs: 'TrainJob',
   }
   if (names[k]) return names[k]
 

package/src/components/workload/WorkloadRolloutNotice.tsx

@@ -0,0 +1,60 @@
+import { AlertTriangle, Check, Clock3, Loader2, Pause } from 'lucide-react'
+import { Badge, type BadgeSeverity } from '../ui/Badge'
+import type { WorkloadRolloutActivity } from '../../utils/workload-rollout'
+
+export function WorkloadRolloutNotice({
+  activity,
+  recentImageSave = false,
+  className = '',
+}: {
+  activity: WorkloadRolloutActivity
+  recentImageSave?: boolean
+  className?: string
+}) {
+  if (activity.phase === 'idle' && !recentImageSave) return null
+  const shown = activity.phase === 'idle' && recentImageSave
+    ? { ...activity, phase: 'applying' as const, active: true, label: 'Waiting for controller', detail: 'The template change was accepted; waiting for live rollout status' }
+    : activity
+  const severity: BadgeSeverity = shown.phase === 'stalled'
+    ? 'error'
+    : shown.phase === 'paused' || shown.manual
+      ? 'warning'
+      : 'info'
+  const Icon = shown.phase === 'stalled'
+    ? AlertTriangle
+    : shown.phase === 'paused'
+      ? Pause
+      : shown.phase === 'waiting'
+        ? Clock3
+        : Loader2
+  const warning = shown.phase === 'paused' || shown.manual
+  const containerTone = shown.phase === 'stalled'
+    ? 'border-semantic-error/30 bg-semantic-error/5'
+    : warning
+      ? 'border-semantic-warning/30 bg-semantic-warning/5'
+      : 'border-theme-border bg-accent-muted'
+  const iconTone = shown.phase === 'stalled'
+    ? 'text-semantic-error'
+    : warning
+      ? 'text-semantic-warning'
+      : 'text-accent-text'
+
+  return (
+    <div className={`rounded-lg border px-3 py-2.5 shadow-theme-sm ${containerTone} ${className}`} role={shown.phase === 'stalled' ? 'alert' : 'status'}>
+      <div className="flex min-w-0 items-start gap-2.5">
+        <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${iconTone} ${shown.active && (shown.phase === 'applying' || shown.phase === 'progressing') ? 'animate-spin' : ''}`} />
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+            {recentImageSave && (
+              <span className="inline-flex items-center gap-1 text-xs font-medium text-theme-text-secondary">
+                <Check className="h-3.5 w-3.5" /> Image saved <span aria-hidden>·</span>
+              </span>
+            )}
+            <Badge severity={severity}>{shown.label}</Badge>
+          </div>
+          {shown.detail && <div className="mt-1 text-xs leading-5 text-theme-text-secondary">{shown.detail}</div>}
+        </div>
+      </div>
+    </div>
+  )
+}