@skyhook-io/k8s-ui 1.7.11 → 1.7.13

package/src/components/resources/ResourcesView.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect, useCallback, useRef, useContext } from 'react'
+import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, useId } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
@@ -24,6 +24,7 @@ import {
   Plus,
   GitCompare,
   Regex,
+  ListChecks,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { ResourceBar } from '../ui/ResourceBar'
@@ -127,6 +128,8 @@ import {
 } from './resource-utils'
 import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
 import { pluralize } from '../../utils/pluralize'
+import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
+import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
 import { Tooltip } from '../ui/Tooltip'
 // CRD-specific cell components (extracted)
 import { GitRepositoryCell, OCIRepositoryCell, HelmRepositoryCell, KustomizationCell, FluxHelmReleaseCell, FluxAlertCell } from './renderers/flux-cells'
@@ -135,6 +138,8 @@ import { VulnerabilityReportCell, ConfigAuditReportCell, ExposedSecretReportCell
 import { CertificateCell, CertificateRequestCell, ClusterIssuerCell, IssuerCell, OrderCell, ChallengeCell } from './renderers/certmanager-cells'
 import { NodePoolCell, NodeClaimCell, EC2NodeClassCell } from './renderers/karpenter-cells'
 import { ScaledObjectCell, ScaledJobCell, TriggerAuthenticationCell, ClusterTriggerAuthenticationCell } from './renderers/keda-cells'
+import { ResourceClaimCell, ResourceClaimTemplateCell, DeviceClassCell, ResourceSliceCell } from './renderers/dra-cells'
+import { NvidiaClusterPolicyCell, NvidiaDriverCell } from './renderers/nvidia-cells'
 import { ServiceMonitorCell, PrometheusRuleCell, PodMonitorCell } from './renderers/prometheus-cells'
 import { PolicyReportCell, ClusterPolicyReportCell, KyvernoPolicyCell, ClusterPolicyCell } from './renderers/kyverno-cells'
 import { ExternalSecretCell, ClusterExternalSecretCell, SecretStoreCell, ClusterSecretStoreCell } from './renderers/eso-cells'
@@ -154,6 +159,7 @@ import { useRegisterShortcut, useRegisterShortcuts } from '../../hooks/useKeyboa
 import { ResourcesSidebar } from './ResourcesSidebar'
 import type { SelectedKindInfo } from './ResourcesSidebar'
 import { CompareTray, togglePick, pickIndex, refToParam, SIDE_TONES, type CompareTrayPick, type NamespacedRef } from '../compare'
+import { ConfirmDialog } from '../ui/ConfirmDialog'
 
 // Pod problem filter options (special multi-select, not a single column value)
 const POD_PROBLEMS = ['CrashLoopBackOff', 'ImagePullBackOff', 'OOMKilled', 'Unschedulable', 'Not Ready', 'High Restarts', 'Init Failed', 'Exit Code Error', 'Failed', 'Other'] as const
@@ -222,6 +228,31 @@ export interface ExtraColumn extends Column {
   getFilterValue?: (resource: any) => string
 }
 
+// Materializes a custom-column def into a self-contained ExtraColumn so it
+// rides the existing render/sort/filter override rails (extraColumnsByKey).
+// The pure parts (key encoding, value read, load-boundary sanitizer) live in
+// utils/custom-columns so they're unit-tested; only the JSX render stays here.
+function buildCustomColumn(d: CustomColumnDef): ExtraColumn {
+  return {
+    key: customColumnKey(d),
+    label: d.path,
+    width: 'w-40',
+    defaultVisible: true,
+    tooltip: d.source === 'label' ? `Label: ${d.path}` : `Annotation: ${d.path}`,
+    render: (resource: any) => {
+      const v = readCustomColumnValue(resource, d)
+      if (!v) return <span className="text-sm text-theme-text-secondary">-</span>
+      return (
+        <Tooltip content={v}>
+          <span className="text-sm text-theme-text-secondary truncate block">{v}</span>
+        </Tooltip>
+      )
+    },
+    getSortValue: (resource: any) => readCustomColumnValue(resource, d),
+    getFilterValue: (resource: any) => readCustomColumnValue(resource, d),
+  }
+}
+
 // Tailwind width class → pixel minimum mapping for CSS Grid column sizing
 const TAILWIND_WIDTH_TO_PX: Record<string, number> = {
   'w-12': 48, 'w-14': 56, 'w-16': 64, 'w-20': 80, 'w-24': 96,
@@ -261,6 +292,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'cpu', label: 'CPU', width: 'w-40', tooltip: 'CPU usage / limit (marker = request)' },
     { key: 'memory', label: 'Memory', width: 'w-40', tooltip: 'Memory usage / limit (marker = request)' },
     { key: 'restarts', label: 'Restarts', width: 'w-28' },
+    { key: 'gpu', label: 'GPU', width: 'w-20', tooltip: 'Effective GPU request (requests, falling back to limits) summed across containers', defaultVisible: false },
     { key: 'podIP', label: 'Pod IP', width: 'w-32', defaultVisible: false },
     { key: 'node', label: 'Node', width: 'w-44', hideOnMobile: true },
     { key: 'age', label: 'Age', width: 'w-24' },
@@ -337,6 +369,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'cpu', label: 'CPU', width: 'w-40', tooltip: 'Current CPU usage / allocatable' },
     { key: 'memory', label: 'Memory', width: 'w-40', tooltip: 'Current memory usage / allocatable' },
     { key: 'pods', label: 'Pods', width: 'w-28', tooltip: 'Pods running / allocatable' },
+    { key: 'gpu', label: 'GPUs', width: 'w-20', tooltip: 'Allocatable GPUs', defaultVisible: false },
     { key: 'conditions', label: 'Conditions', width: 'w-40', hideOnMobile: true },
     { key: 'taints', label: 'Taints', width: 'w-24', hideOnMobile: true },
     { key: 'version', label: 'Version', width: 'w-28' },
@@ -548,6 +581,48 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'triggerTypes', label: 'Trigger Types', width: 'w-40' },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  resourceclaims: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-36' },
+    { key: 'status', label: 'Status', width: 'w-28', tooltip: 'Allocated + reserved, allocated-but-unreserved, or pending' },
+    { key: 'deviceClass', label: 'Device Class', width: 'w-44' },
+    { key: 'allocated', label: 'Allocated Driver', width: 'w-44' },
+    { key: 'reservedFor', label: 'Reserved For', width: 'w-44' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  resourceclaimtemplates: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-36' },
+    { key: 'deviceClass', label: 'Device Class', width: 'w-44' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  deviceclasses: [
+    { key: 'name', label: 'Name' },
+    { key: 'selectors', label: 'Selectors', width: 'w-28', tooltip: 'CEL device selector count' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  resourceslices: [
+    { key: 'name', label: 'Name' },
+    { key: 'driver', label: 'Driver', width: 'w-44' },
+    { key: 'pool', label: 'Pool', width: 'w-36' },
+    { key: 'node', label: 'Node', width: 'w-44' },
+    { key: 'devices', label: 'Devices', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  nvidiaclusterpolicies: [
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status', width: 'w-28' },
+    { key: 'components', label: 'Components', width: 'w-64', tooltip: 'Enabled GPU Operator components' },
+    { key: 'mig', label: 'MIG', width: 'w-24' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
+  nvidiadrivers: [
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status', width: 'w-28' },
+    { key: 'driverType', label: 'Type', width: 'w-28' },
+    { key: 'version', label: 'Version', width: 'w-32' },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   scaledjobs: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-36' },
@@ -1589,6 +1664,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
 // Map (plural, group) → KNOWN_COLUMNS key for kinds that collide with core K8s
 const GROUP_QUALIFIED_COLUMN_KEYS: Record<string, Record<string, string>> = {
   clusters: { 'postgresql.cnpg.io': 'cnpgclusters', 'cluster.x-k8s.io': 'capiclusters' },
+  clusterpolicies: { 'nvidia.com': 'nvidiaclusterpolicies' },
   services: { 'serving.knative.dev': 'knativeservices' },
   configurations: { 'serving.knative.dev': 'knativeconfigurations' },
   revisions: { 'serving.knative.dev': 'knativerevisions' },
@@ -1649,12 +1725,36 @@ function getDefaultVisibleColumns(columns: Column[]): Set<string> {
   return new Set(columns.filter(c => c.defaultVisible !== false).map(c => c.key))
 }
 
+// Host-injected leading columns minus any whose key collides with a built-in.
+// Rendering two columns under one key duplicates React keys and corrupts the
+// visibleColumns / columnWidths maps, so a colliding extra is dropped (dev-warn).
+// Shared by the allColumns memo and the settings-load effect so the collision
+// rule can't drift between them.
+function filterHostExtras(
+  extraLeadingColumns: ExtraColumn[] | undefined,
+  builtinKeys: Set<string>,
+  kindName: string,
+): ExtraColumn[] {
+  if (!extraLeadingColumns?.length) return []
+  return extraLeadingColumns.filter(c => {
+    if (builtinKeys.has(c.key)) {
+      if (import.meta.env?.DEV) {
+        // eslint-disable-next-line no-console
+        console.warn(`[ResourcesView] extraLeadingColumns key "${c.key}" collides with a built-in column for kind "${kindName}" — extra ignored`)
+      }
+      return false
+    }
+    return true
+  })
+}
+
 // localStorage helpers for column settings
 const COLUMN_SETTINGS_PREFIX = 'radar-columns-'
 
 interface ColumnSettings {
   visible: string[]
   widths: Record<string, number>
+  custom?: CustomColumnDef[]
 }
 
 function loadColumnSettings(kind: string, group?: string): ColumnSettings | null {
@@ -1805,6 +1905,9 @@ interface ResourcesViewProps {
    * the switcher lives outside this component and may persist server-side.
    */
   onClearNamespaces?: () => void
+  // Bulk operations
+  onBulkDelete?: (items: Array<{ kind: string; group?: string; namespace: string; name: string }>, options?: { force?: boolean; onSuccess?: () => void }) => void
+  isBulkDeleting?: boolean
 }
 
 // Default selected kind
@@ -1953,6 +2056,8 @@ export function ResourcesView({
   onCompareSubmit,
   resolveRowCluster,
   onClearNamespaces,
+  onBulkDelete,
+  isBulkDeleting = false,
 }: ResourcesViewProps) {
   const initialFilters = getInitialFiltersFromURL()
   const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(() => getInitialKindFromURL(basePath, defaultKind, locationPathname, locationSearch))
@@ -1970,6 +2075,8 @@ export function ResourcesView({
   // Notify parent of selected kind changes (including initial mount)
   useEffect(() => {
     onSelectedKindChange?.(selectedKind)
+    setBulkMode(false)
+    setCheckedResources(new Set())
   }, [selectedKind.name, selectedKind.group]) // eslint-disable-line react-hooks/exhaustive-deps
   const [searchTerm, setSearchTerm] = useState(initialFilters.search)
   const [regexMode, setRegexMode] = useState(false)
@@ -1993,12 +2100,30 @@ export function ResourcesView({
   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(new Set())
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
   const [showColumnPicker, setShowColumnPicker] = useState(false)
+  const [customColumns, setCustomColumns] = useState<CustomColumnDef[]>([])
+  const [customColumnDraft, setCustomColumnDraft] = useState<CustomColumnDef>({ source: 'label', path: '' })
+  // Per-instance so two ResourcesView tables on one page (e.g. fleet compare)
+  // don't share a datalist id and cross-suggest each other's keys.
+  const customColKeysListId = useId()
   const columnPickerRef = useRef<HTMLDivElement>(null)
   // Label/owner filtering for deep-linking from workload details
   const [labelSelector, setLabelSelector] = useState<string>(initialFilters.labelSelector)
   const [ownerKind, setOwnerKind] = useState<string>(initialFilters.ownerKind)
   const [ownerName, setOwnerName] = useState<string>(initialFilters.ownerName)
 
+  // Multi-select state for bulk operations. Checkboxes only render while
+  // bulk mode is active — entered via the toolbar toggle — so the risky
+  // bulk-delete surface stays out of the way during normal browsing.
+  const [bulkMode, setBulkMode] = useState(false)
+  const [checkedResources, setCheckedResources] = useState<Set<string>>(new Set())
+  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
+  const [bulkForceDelete, setBulkForceDelete] = useState(false)
+
+  const exitBulkMode = useCallback(() => {
+    setBulkMode(false)
+    setCheckedResources(new Set())
+  }, [])
+
   // Column filter helpers
   const clearColumnFilter = useCallback((key: string) => {
     setColumnFilters(prev => {
@@ -2064,6 +2189,12 @@ export function ResourcesView({
     return { pods, nodes }
   }, [topPodMetrics, topNodeMetrics])
 
+  // User-defined label/annotation columns materialized as self-contained
+  // ExtraColumns — appended after the built-ins and wired through the same
+  // render/sort/filter override rails (extraColumnsByKey).
+  const builtCustomColumns = useMemo(() => customColumns.map(buildCustomColumn), [customColumns])
+  const customColumnKeySet = useMemo(() => new Set(builtCustomColumns.map(c => c.key)), [builtCustomColumns])
+
   // Prepend extraLeadingColumns (host-injected leading columns) before
   // the kind-specific KNOWN_COLUMNS entries. When extras are undefined,
   // this collapses to single-cluster behavior. Built-in keys win on
@@ -2072,48 +2203,74 @@ export function ResourcesView({
   // duplicate React keys and corrupt visibleColumns / columnWidths state.
   const allColumns = useMemo(() => {
     const kindColumns = getColumnsForKind(selectedKind.name, selectedKind.group)
-    if (!extraLeadingColumns?.length) return kindColumns
+    if (!extraLeadingColumns?.length && !builtCustomColumns.length) return kindColumns
     const builtinKeys = new Set(kindColumns.map(c => c.key))
-    const filteredExtras = extraLeadingColumns.filter(c => {
-      if (builtinKeys.has(c.key)) {
-        if (import.meta.env?.DEV) {
-          // eslint-disable-next-line no-console
-          console.warn(`[ResourcesView] extraLeadingColumns key "${c.key}" collides with a built-in column for kind "${selectedKind.name}" — extra ignored`)
-        }
-        return false
-      }
-      return true
-    })
-    return [...filteredExtras, ...kindColumns]
-  }, [selectedKind.name, selectedKind.group, extraLeadingColumns])
+    const filteredExtras = filterHostExtras(extraLeadingColumns, builtinKeys, selectedKind.name)
+    return [...filteredExtras, ...kindColumns, ...builtCustomColumns]
+  }, [selectedKind.name, selectedKind.group, extraLeadingColumns, builtCustomColumns])
 
   // Map of extra column keys for fast O(1) lookup on each render path
   // (cell render, sort, column-filter unique-values).
   const extraColumnsByKey = useMemo(() => {
     const m = new Map<string, ExtraColumn>()
     extraLeadingColumns?.forEach(c => m.set(c.key, c))
+    builtCustomColumns.forEach(c => m.set(c.key, c))
     return m
-  }, [extraLeadingColumns])
+  }, [extraLeadingColumns, builtCustomColumns])
 
+  // Guards the save effect from persisting on the initial load of each kind
+  // (set false by the load effect, flipped true on its first skipped save).
+  const isColumnSettingsLoaded = useRef(false)
+  // Whether the user has a persisted column blob for this kind — data-driven
+  // column defaults (GPU auto-show) must never override explicit user choices.
+  const hadSavedColumnSettings = useRef(false)
+  // Kinds where GPU auto-show already fired this mount. Firing is one-shot:
+  // without this, hiding the auto-shown column re-triggers the effect (it
+  // depends on visibleColumns) and instantly reverts the user's hide.
+  const gpuAutoShownKinds = useRef<Set<string>>(new Set())
   useEffect(() => {
+    // Re-arm the skip-initial-save guard per kind. This effect repopulates
+    // visible/widths/custom for the new kind via async setState, so the save
+    // effect (also keyed to selectedKind) that runs in this same commit still
+    // sees the PREVIOUS kind's columns in state and would persist them under
+    // the new kind's storage key. Skipping the first save after each load
+    // prevents that cross-kind write.
+    isColumnSettingsLoaded.current = false
     const saved = loadColumnSettings(selectedKind.name, selectedKind.group)
+    hadSavedColumnSettings.current = !!saved
+    // Reconstruct the effective column list locally rather than reading
+    // `allColumns` — keying this effect to the kind (not allColumns) keeps
+    // runtime custom-column add/remove from re-running it and clobbering the
+    // in-session edit (and avoids a setCustomColumns → allColumns → re-run loop).
+    // sanitize guards the localStorage boundary: a corrupted/hand-edited blob
+    // (non-array, blank path, bad source) must not crash the later .map or add dead columns.
+    const savedCustom = sanitizeCustomColumnDefs(saved?.custom)
+    setCustomColumns(savedCustom)
+    const kindColumns = getColumnsForKind(selectedKind.name, selectedKind.group)
+    const builtinKeys = new Set(kindColumns.map(c => c.key))
+    const extras = filterHostExtras(extraLeadingColumns, builtinKeys, selectedKind.name)
+    const effective = [...extras, ...kindColumns, ...savedCustom.map(buildCustomColumn)]
     // Host-injected extra columns (e.g. fleet Cluster) default to visible
     // even when the saved column-visibility blob predates them — a naive
     // Set(saved.visible) would silently hide host columns the user has
     // never been shown. Trade-off: a user can't permanently hide a host
     // extra column via the column picker — next mount re-adds it. Track
     // a sibling "hidden-extras" set if this becomes a real complaint.
-    const extraKeys = extraLeadingColumns?.map(c => c.key) ?? []
+    const extraKeys = extras.map(c => c.key)
     if (saved) {
       // If saved columns are just the defaults but this kind has specialized columns,
-      // discard the stale save and use the specialized columns instead
+      // discard the stale save and use the specialized columns instead. User-added
+      // custom columns mean the blob isn't a stale pure-defaults save — keep it, or
+      // the migration would clear them from storage (and un-hide hidden ones).
       const defaultKeys = DEFAULT_COLUMNS.map(c => c.key)
-      const isStaleDefaults = allColumns !== DEFAULT_COLUMNS &&
+      const isStaleDefaults = kindColumns !== DEFAULT_COLUMNS &&
+        !savedCustom.length &&
         saved.visible.length === defaultKeys.length &&
         saved.visible.every(v => defaultKeys.includes(v))
       if (isStaleDefaults) {
         clearColumnSettings(selectedKind.name, selectedKind.group)
-        setVisibleColumns(getDefaultVisibleColumns(allColumns))
+        hadSavedColumnSettings.current = false
+        setVisibleColumns(getDefaultVisibleColumns(effective))
         setColumnWidths({})
       } else {
         const merged = new Set(saved.visible)
@@ -2122,13 +2279,12 @@ export function ResourcesView({
         setColumnWidths(saved.widths || {})
       }
     } else {
-      setVisibleColumns(getDefaultVisibleColumns(allColumns))
+      setVisibleColumns(getDefaultVisibleColumns(effective))
       setColumnWidths({})
     }
-  }, [selectedKind.name, selectedKind.group, allColumns, extraLeadingColumns])
+  }, [selectedKind.name, selectedKind.group, extraLeadingColumns])
 
-  // Save column settings when they change (skip initial load)
-  const isColumnSettingsLoaded = useRef(false)
+  // Save column settings when they change (skip the initial load of each kind)
   useEffect(() => {
     if (visibleColumns.size === 0) return // not loaded yet
     if (!isColumnSettingsLoaded.current) {
@@ -2138,8 +2294,12 @@ export function ResourcesView({
     saveColumnSettings(selectedKind.name, selectedKind.group, {
       visible: Array.from(visibleColumns),
       widths: columnWidths,
+      custom: customColumns,
     })
-  }, [visibleColumns, columnWidths, selectedKind.name, selectedKind.group])
+    // A persisted blob blocks GPU auto-show from here on — same rule in-session
+    // as across sessions, so a later data refresh can't override user choices.
+    hadSavedColumnSettings.current = true
+  }, [visibleColumns, columnWidths, customColumns, selectedKind.name, selectedKind.group])
 
   // Close column picker on outside click or Escape
   useEffect(() => {
@@ -2239,13 +2399,56 @@ export function ResourcesView({
     })
   }, [])
 
-  // Reset column settings to defaults
+  // Reset column settings to defaults (also drops user-added custom columns)
   const resetColumnSettings = useCallback(() => {
     clearColumnSettings(selectedKind.name, selectedKind.group)
-    setVisibleColumns(getDefaultVisibleColumns(allColumns))
+    setCustomColumns([])
+    const customKeys = new Set(builtCustomColumns.map(c => c.key))
+    setVisibleColumns(getDefaultVisibleColumns(allColumns.filter(c => !customKeys.has(c.key))))
     setColumnWidths({})
     isColumnSettingsLoaded.current = false
-  }, [selectedKind.name, selectedKind.group, allColumns])
+    // Back to data-driven defaults: re-arm GPU auto-show for this kind.
+    hadSavedColumnSettings.current = false
+    gpuAutoShownKinds.current.delete(selectedKind.name.toLowerCase())
+  }, [selectedKind.name, selectedKind.group, allColumns, builtCustomColumns])
+
+  // Add a user-defined label/annotation column (dedupe by key) and show it.
+  const addCustomColumn = useCallback((def: CustomColumnDef) => {
+    const path = def.path.trim()
+    if (!path) return
+    const key = customColumnKey({ ...def, path })
+    setCustomColumns(prev => prev.some(c => customColumnKey(c) === key) ? prev : [...prev, { ...def, path }])
+    setVisibleColumns(prev => {
+      if (prev.has(key)) return prev
+      const next = new Set(prev)
+      next.add(key)
+      return next
+    })
+  }, [])
+
+  // Remove a user-defined column entirely (not just hide it).
+  const removeCustomColumn = useCallback((key: string) => {
+    setCustomColumns(prev => prev.filter(c => customColumnKey(c) !== key))
+    setVisibleColumns(prev => {
+      if (!prev.has(key)) return prev
+      const next = new Set(prev)
+      next.delete(key)
+      return next
+    })
+    // Drop any filter/sort that targeted the removed column — otherwise the
+    // table keeps filtering (and syncing to the URL) on a key with no column
+    // and no UI to clear it, and sort silently references a gone column.
+    setColumnFilters(prev => {
+      if (!(key in prev)) return prev
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+    if (sortColumn === key) {
+      setSortColumn(null)
+      setSortDirection(null)
+    }
+  }, [sortColumn])
 
   // Keyboard shortcut: / to focus search
   useRegisterShortcut({
@@ -2510,6 +2713,7 @@ export function ResourcesView({
         if (showProblemsDropdown) { setShowProblemsDropdown(false); return }
         if (showLabelsDropdown) { setShowLabelsDropdown(false); return }
         if (compareMode) { exitCompareMode(); return }
+        if (bulkMode) { exitBulkMode(); return }
         if (highlightedIndex >= 0) setHighlightedIndex(-1)
         else searchInputRef.current?.blur()
       },
@@ -2934,6 +3138,46 @@ export function ResourcesView({
 
   const selectedQuery = selectedKindQueryProp ?? resourceQueries[selectedQueryIndex]
   const resources = selectedQuery?.data
+
+  // Auto-surface the GPU column the first time GPU-bearing rows load for a kind
+  // the user has never customized — a static default can't know whether the
+  // cluster has GPUs, and hiding the signal on GPU clusters buries the point.
+  // The resulting save persists it; explicit user hides are never overridden
+  // (hadSavedColumnSettings guard).
+  useEffect(() => {
+    if (hadSavedColumnSettings.current) return
+    const kindLower = selectedKind.name.toLowerCase()
+    if (kindLower !== 'pods' && kindLower !== 'nodes') return
+    if (gpuAutoShownKinds.current.has(kindLower)) return
+    if (visibleColumns.size === 0 || visibleColumns.has('gpu')) return
+    const rows = (resources as any[] | undefined) ?? []
+    if (rows.length === 0) return
+    const hasGpu = kindLower === 'pods'
+      ? rows.some(r => getPodGpuCount(r) > 0)
+      : rows.some(r => getNodeGpuCount(r) > 0)
+    if (hasGpu) {
+      gpuAutoShownKinds.current.add(kindLower)
+      setVisibleColumns(prev => new Set([...prev, 'gpu']))
+    }
+  }, [resources, selectedKind.name, visibleColumns])
+
+  // Label/annotation keys present on the loaded rows — powers the
+  // add-custom-column autocomplete so users don't type keys blind. Sampled
+  // to bound cost on large lists; keys converge fast across rows of one kind.
+  const customColumnKeySuggestions = useMemo(() => {
+    const labels = new Set<string>()
+    const annotations = new Set<string>()
+    const rows = (resources as any[] | undefined) ?? []
+    for (let i = 0; i < rows.length && i < 500; i++) {
+      const meta = rows[i]?.metadata
+      if (meta?.labels) for (const k of Object.keys(meta.labels)) labels.add(k)
+      if (meta?.annotations) for (const k of Object.keys(meta.annotations)) annotations.add(k)
+    }
+    return {
+      label: Array.from(labels).sort(),
+      annotation: Array.from(annotations).sort(),
+    }
+  }, [resources])
   const isLoading = selectedQuery?.isLoading ?? true
   const selectedQueryError = selectedQuery?.error
   const isSelectedForbidden = isForbiddenError(selectedQueryError)
@@ -3111,6 +3355,11 @@ export function ResourcesView({
         }
         return 0
       }
+      case 'gpu': {
+        if (kindLower === 'pods') return getPodGpuCount(resource)
+        if (kindLower === 'nodes') return getNodeGpuCount(resource)
+        return 0
+      }
       default:
         return ''
     }
@@ -3315,7 +3564,7 @@ export function ResourcesView({
     }
 
     return result
-  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, podMatchesProblemFilter])
+  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -3378,6 +3627,39 @@ export function ResourcesView({
     flatKindListRef.current = list
   }, [pinned, categories])
 
+  // Multi-select helpers
+  const getResourceKey = useCallback((resource: any) => {
+    return resource.metadata?.uid || `${resource.metadata?.namespace || ''}/${resource.metadata?.name || ''}`
+  }, [])
+
+  const toggleChecked = useCallback((resource: any) => {
+    const key = getResourceKey(resource)
+    setCheckedResources(prev => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }, [getResourceKey])
+
+  // Selection state is keyed by resource, but everything user-facing
+  // (count, select-all, the delete payload) derives from checkedItems —
+  // the checked ∩ currently-visible intersection. Rows checked and then
+  // hidden by a filter are excluded, so the bar never promises more
+  // deletions than the confirm dialog will perform.
+  const checkedItems = useMemo(() => {
+    if (checkedResources.size === 0) return []
+    return filteredResources.filter(r => checkedResources.has(getResourceKey(r)))
+  }, [filteredResources, checkedResources, getResourceKey])
+
+  const allVisibleChecked = filteredResources.length > 0 && checkedItems.length === filteredResources.length
+
+  const toggleCheckAll = useCallback(() => {
+    setCheckedResources(allVisibleChecked ? new Set() : new Set(filteredResources.map(getResourceKey)))
+  }, [allVisibleChecked, filteredResources, getResourceKey])
+
+  const isCheckboxMode = onBulkDelete != null && bulkMode
+
   // Filter columns by visibility
   const columns = useMemo(() => {
     if (visibleColumns.size === 0) return allColumns.filter(c => c.defaultVisible !== false)
@@ -3415,6 +3697,7 @@ export function ResourcesView({
               — typically blowing this narrow column out to ~200px.
             */}
             {compareMode && <col style={{ width: COMPARE_COLUMN_WIDTH }} />}
+            {isCheckboxMode && <col style={{ width: '40px' }} />}
             {columns.map(col => (
               <col
                 key={col.key}
@@ -3432,7 +3715,7 @@ export function ResourcesView({
       )
     }),
     TableRow: VirtuosoTableRow,
-  }), [columns, columnWidths, hasResizedColumns, compareMode, tableMinWidth])
+  }), [columns, columnWidths, hasResizedColumns, compareMode, tableMinWidth, isCheckboxMode])
 
   // Calculate filter options with counts based on current resources (before filtering)
   const filterOptions = useMemo(() => {
@@ -3899,8 +4182,8 @@ export function ResourcesView({
               <Columns3 className="w-4 h-4" />
             </button>
             {showColumnPicker && (
-              <div className="absolute right-0 top-full mt-1 z-50 bg-theme-surface border border-theme-border rounded-lg shadow-lg py-1 min-w-[200px] max-h-[400px] overflow-auto">
-                <div className="px-3 py-2 border-b border-theme-border flex items-center justify-between">
+              <div className="absolute right-0 top-full mt-1 z-50 bg-theme-surface border border-theme-border rounded-lg shadow-lg py-1 min-w-[200px] max-h-[400px] flex flex-col">
+                <div className="shrink-0 px-3 py-2 border-b border-theme-border flex items-center justify-between">
                   <span className="text-xs font-medium text-theme-text-secondary uppercase">Columns</span>
                   <button
                     onClick={resetColumnSettings}
@@ -3911,26 +4194,95 @@ export function ResourcesView({
                     Reset
                   </button>
                 </div>
-                {allColumns.map(col => (
-                  <label
-                    key={col.key}
-                    className="flex items-center gap-2 px-3 py-1.5 hover:bg-theme-elevated"
+                {/* Column list scrolls; the add-column footer stays pinned so
+                    its input isn't pushed below the fold on kinds with many columns. */}
+                <div className="overflow-y-auto flex-1 min-h-0">
+                {allColumns.map(col => {
+                  const isCustom = customColumnKeySet.has(col.key)
+                  return (
+                    <div
+                      key={col.key}
+                      className="group flex items-center gap-2 px-3 py-1.5 hover:bg-theme-elevated"
+                    >
+                      <label className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={visibleColumns.has(col.key)}
+                          onChange={() => toggleColumnVisibility(col.key)}
+                          disabled={col.key === 'name'}
+                          className="rounded border-theme-border"
+                        />
+                        <span className={clsx(
+                          'text-sm truncate',
+                          col.key === 'name' ? 'text-theme-text-tertiary' : 'text-theme-text-primary'
+                        )} title={col.tooltip || col.label}>
+                          {col.label}
+                        </span>
+                      </label>
+                      {isCustom && (
+                        <button
+                          type="button"
+                          onClick={() => removeCustomColumn(col.key)}
+                          className="shrink-0 p-0.5 text-theme-text-tertiary hover:text-red-500 opacity-0 group-hover:opacity-100 focus:opacity-100"
+                          title="Remove column"
+                        >
+                          <X className="w-3.5 h-3.5" />
+                        </button>
+                      )}
+                    </div>
+                  )
+                })}
+                </div>
+                {/* Add a label/annotation column */}
+                <div className="shrink-0 border-t border-theme-border pt-2 px-3 pb-1">
+                  <div className="flex items-center gap-1 mb-1.5">
+                    {(['label', 'annotation'] as CustomColumnSource[]).map(src => (
+                      <button
+                        key={src}
+                        type="button"
+                        onClick={() => setCustomColumnDraft(d => ({ ...d, source: src }))}
+                        className={clsx(
+                          'px-2 py-0.5 text-xs rounded capitalize',
+                          customColumnDraft.source === src
+                            ? 'bg-skyhook-500/20 text-skyhook-400'
+                            : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated'
+                        )}
+                      >
+                        {src}
+                      </button>
+                    ))}
+                  </div>
+                  <form
+                    className="flex items-center gap-1"
+                    onSubmit={e => {
+                      e.preventDefault()
+                      addCustomColumn(customColumnDraft)
+                      setCustomColumnDraft(d => ({ ...d, path: '' }))
+                    }}
                   >
                     <input
-                      type="checkbox"
-                      checked={visibleColumns.has(col.key)}
-                      onChange={() => toggleColumnVisibility(col.key)}
-                      disabled={col.key === 'name'}
-                      className="rounded border-theme-border"
+                      type="text"
+                      list={customColKeysListId}
+                      value={customColumnDraft.path}
+                      onChange={e => setCustomColumnDraft(d => ({ ...d, path: e.target.value }))}
+                      placeholder={`Add ${customColumnDraft.source} key…`}
+                      className="flex-1 min-w-0 px-2 py-1 text-xs rounded bg-theme-base border border-theme-border text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
                     />
-                    <span className={clsx(
-                      'text-sm',
-                      col.key === 'name' ? 'text-theme-text-tertiary' : 'text-theme-text-primary'
-                    )}>
-                      {col.label}
-                    </span>
-                  </label>
-                ))}
+                    <datalist id={customColKeysListId}>
+                      {customColumnKeySuggestions[customColumnDraft.source].map(k => (
+                        <option key={k} value={k} />
+                      ))}
+                    </datalist>
+                    <button
+                      type="submit"
+                      disabled={!customColumnDraft.path.trim()}
+                      className="shrink-0 p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-40 disabled:hover:bg-transparent"
+                      title="Add column"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </button>
+                  </form>
+                </div>
               </div>
             )}
           </div>
@@ -3961,7 +4313,11 @@ export function ResourcesView({
           {compareEnabled && (
             <Tooltip content={compareMode ? 'Exit compare mode' : 'Compare two resources side-by-side'}>
               <button
-                onClick={() => (compareMode ? exitCompareMode() : setCompareMode(true))}
+                onClick={() => {
+                  if (compareMode) { exitCompareMode(); return }
+                  exitBulkMode()
+                  setCompareMode(true)
+                }}
                 aria-pressed={compareMode}
                 className={clsx(
                   'p-2 rounded-lg transition-colors',
@@ -3974,8 +4330,51 @@ export function ResourcesView({
               </button>
             </Tooltip>
           )}
+          {onBulkDelete && (
+            <Tooltip content={bulkMode ? 'Exit bulk select mode' : 'Select multiple resources'}>
+              <button
+                onClick={() => {
+                  if (bulkMode) { exitBulkMode(); return }
+                  exitCompareMode()
+                  setBulkMode(true)
+                }}
+                aria-pressed={bulkMode}
+                className={clsx(
+                  'p-2 rounded-lg transition-colors',
+                  bulkMode
+                    ? 'bg-skyhook-500/15 text-skyhook-300 border border-skyhook-400/50'
+                    : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated',
+                )}
+              >
+                <ListChecks className="w-4 h-4" />
+              </button>
+            </Tooltip>
+          )}
         </div>
 
+        {/* Bulk actions bar */}
+        {isCheckboxMode && (
+          <div className="flex items-center gap-3 px-4 py-2 bg-skyhook-500/10 border-b border-skyhook-400/20 shrink-0">
+            <span className="text-sm font-medium text-theme-text-primary">
+              {checkedItems.length} selected
+            </span>
+            <button
+              onClick={() => setShowBulkDeleteConfirm(true)}
+              disabled={checkedItems.length === 0}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:pointer-events-none text-white rounded-lg transition-colors"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+              Delete
+            </button>
+            <button
+              onClick={exitBulkMode}
+              className="px-3 py-1.5 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+
         {/* Table */}
         <div
           className="flex-1 overflow-auto relative"
@@ -4081,8 +4480,22 @@ export function ResourcesView({
                       <GitCompare className="w-3.5 h-3.5 inline-block opacity-70" />
                     </th>
                   )}
+                  {isCheckboxMode && (
+                    <th className="bg-theme-surface border-b border-theme-border w-10 text-center px-0 py-3">
+                      <input
+                        type="checkbox"
+                        checked={allVisibleChecked}
+                        ref={(el) => { if (el) el.indeterminate = checkedItems.length > 0 && checkedItems.length < filteredResources.length }}
+                        onChange={toggleCheckAll}
+                        className="w-3.5 h-3.5 rounded border-theme-border accent-skyhook-500 cursor-pointer"
+                        title={checkedItems.length > 0 ? 'Deselect all' : 'Select all'}
+                      />
+                    </th>
+                  )}
                   {columns.map((col, colIdx) => {
+                    // Built-in sortable keys, plus any extra/custom column that carries its own getSortValue.
                     const isSortable = ['name', 'namespace', 'age', 'status', 'ready', 'restarts', 'type', 'version', 'desired', 'available', 'upToDate', 'lastSeen', 'count', 'reason', 'object', 'cpu', 'memory', 'containers'].includes(col.key)
+                      || !!extraColumnsByKey.get(col.key)?.getSortValue
                     const isSorted = sortColumn === col.key
                     const isLastCol = colIdx === columns.length - 1
                     const filterCol = filterableColumnMap.get(col.key)
@@ -4259,6 +4672,7 @@ export function ResourcesView({
                       clusterId: resolveRowCluster?.(resource)?.id,
                     })
                   : -1
+                const resourceKey = getResourceKey(resource)
                 return (
                   <ResourceRowCells
                     resource={resource}
@@ -4269,12 +4683,15 @@ export function ResourcesView({
                     hasSpacerColumn={hasResizedColumns}
                     isSelected={isSelected}
                     isHighlighted={isHighlighted}
+                    isChecked={checkedResources.has(resourceKey)}
+                    showCheckbox={isCheckboxMode}
                     majorityNodeMinorVersion={majorityNodeMinorVersion}
-                    onClick={() => compareMode ? toggleComparePick(resource) : selectResource(resource, isSelected)}
+                    onClick={() => compareMode ? toggleComparePick(resource) : isCheckboxMode ? toggleChecked(resource) : selectResource(resource, isSelected)}
                     onMouseEnter={() => setHighlightedIndex(-1)}
                     compareMode={compareMode}
                     comparePickIndex={pickIdx}
                     rowHref={rowHrefFor?.(resource)}
+                    onCheckToggle={() => toggleChecked(resource)}
                   />
                 )
               }}
@@ -4301,6 +4718,45 @@ export function ResourcesView({
         )}
       </div>
     </div>
+
+    {/* Bulk delete confirmation */}
+    <ConfirmDialog
+      open={showBulkDeleteConfirm}
+      onClose={() => { setShowBulkDeleteConfirm(false); setBulkForceDelete(false) }}
+      onConfirm={() => {
+        const items = checkedItems.map(r => ({
+          kind: selectedKind.name,
+          group: selectedKind.group,
+          namespace: r.metadata?.namespace || '',
+          name: r.metadata?.name || '',
+        }))
+        onBulkDelete?.(items, {
+          force: bulkForceDelete,
+          onSuccess: () => {
+            exitBulkMode()
+            setShowBulkDeleteConfirm(false)
+            setBulkForceDelete(false)
+          },
+        })
+      }}
+      title={`Delete ${checkedItems.length} ${selectedKind.kind}${checkedItems.length > 1 ? 's' : ''}?`}
+      message={`You are about to delete ${checkedItems.length} resource${checkedItems.length > 1 ? 's' : ''}. This action cannot be undone.`}
+      details={checkedItems.map(r => `${r.metadata?.namespace ? r.metadata.namespace + '/' : ''}${r.metadata?.name}`).join('\n')}
+      confirmLabel={bulkForceDelete ? `Force Delete ${checkedItems.length} resource${checkedItems.length > 1 ? 's' : ''}` : `Delete ${checkedItems.length} resource${checkedItems.length > 1 ? 's' : ''}`}
+      variant="danger"
+      isLoading={isBulkDeleting}
+      isClosable
+    >
+      <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
+        <input
+          type="checkbox"
+          checked={bulkForceDelete}
+          onChange={(e) => setBulkForceDelete(e.target.checked)}
+          className="w-4 h-4 rounded border-theme-border bg-theme-base text-red-600 focus:ring-red-500 focus:ring-offset-0"
+        />
+        <span>Force delete (strips finalizers and bypasses grace period)</span>
+      </label>
+    </ConfirmDialog>
     </ResourcesViewDataContext.Provider>
   )
 }
@@ -4314,6 +4770,8 @@ interface ResourceRowCellsProps {
   hasSpacerColumn: boolean
   isSelected?: boolean
   isHighlighted?: boolean
+  isChecked?: boolean
+  showCheckbox?: boolean
   majorityNodeMinorVersion?: string
   onClick?: () => void
   onMouseEnter?: () => void
@@ -4324,6 +4782,7 @@ interface ResourceRowCellsProps {
    *  data cells drop their click handlers. The compare-mode chip column
    *  is unaffected (still toggles picks). */
   rowHref?: string
+  onCheckToggle?: () => void
 }
 
 function rowHighlightClass(
@@ -4331,6 +4790,7 @@ function rowHighlightClass(
   comparePickIndex: number,
   isSelected: boolean | undefined,
   isHighlighted: boolean | undefined,
+  isChecked?: boolean,
 ): string {
   if (compareMode) {
     if (comparePickIndex === 0) return `${SIDE_TONES.a.rowBg} ${SIDE_TONES.a.rowBgHover}`
@@ -4339,12 +4799,13 @@ function rowHighlightClass(
     return 'group-hover/row:bg-theme-surface/50'
   }
   if (isSelected) return 'selection-strong group-hover/row:bg-skyhook-500/30'
+  if (isChecked) return 'selection group-hover/row:bg-skyhook-500/20'
   if (isHighlighted) return 'selection selection-ring'
   return 'group-hover/row:bg-theme-surface/50'
 }
 
-function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, majorityNodeMinorVersion, onClick, onMouseEnter, compareMode, comparePickIndex = -1, rowHref }: ResourceRowCellsProps) {
-  const rowHighlight = rowHighlightClass(compareMode, comparePickIndex, isSelected, isHighlighted)
+function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, hasSpacerColumn, isSelected, isHighlighted, isChecked, showCheckbox, majorityNodeMinorVersion, onClick, onMouseEnter, compareMode, comparePickIndex = -1, rowHref, onCheckToggle }: ResourceRowCellsProps) {
+  const rowHighlight = rowHighlightClass(compareMode, comparePickIndex, isSelected, isHighlighted, isChecked)
   const pickedSide = comparePickIndex === 0 ? 'a' : comparePickIndex === 1 ? 'b' : null
   // When the host supplies an anchor, drop per-cell onClick for the data
   // columns: the anchor is the only navigation surface. The compare-mode
@@ -4377,6 +4838,19 @@ function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, h
           )}
         </td>
       )}
+      {showCheckbox && (
+        <td
+          className={clsx('border-b-subtle text-center px-0 py-3 w-10 cursor-pointer transition-colors', rowHighlight)}
+          onClick={(e) => { e.stopPropagation(); onCheckToggle?.() }}
+        >
+          <input
+            type="checkbox"
+            checked={!!isChecked}
+            onChange={() => {}}
+            className="w-3.5 h-3.5 rounded border-theme-border accent-skyhook-500 cursor-pointer"
+          />
+        </td>
+      )}
       {columns.map((col) => (
         <td
           key={col.key}
@@ -4636,6 +5110,20 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <TriggerAuthenticationCell resource={resource} column={column} />
     case 'clustertriggerauthentications':
       return <ClusterTriggerAuthenticationCell resource={resource} column={column} />
+    // DRA (resource.k8s.io)
+    case 'resourceclaims':
+      return <ResourceClaimCell resource={resource} column={column} />
+    case 'resourceclaimtemplates':
+      return <ResourceClaimTemplateCell resource={resource} column={column} />
+    case 'deviceclasses':
+      return <DeviceClassCell resource={resource} column={column} />
+    case 'resourceslices':
+      return <ResourceSliceCell resource={resource} column={column} />
+    // NVIDIA GPU Operator (nvidiaclusterpolicies is the group-qualified key for nvidia.com clusterpolicies)
+    case 'nvidiaclusterpolicies':
+      return <NvidiaClusterPolicyCell resource={resource} column={column} />
+    case 'nvidiadrivers':
+      return <NvidiaDriverCell resource={resource} column={column} />
     // ArgoCD GitOps resources
     case 'applications':
       return <ArgoApplicationCell resource={resource} column={column} />
@@ -5117,6 +5605,11 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
       const tip = buildResourceTooltip('Memory', m.memory, m.memoryRequest, m.memoryLimit, formatMemoryShort)
       return <ResourceBar used={formatMemoryShort(m.memory)} total={formatMemoryShort(denom)} percent={pct} colorScheme={getBulletBarScheme(pct, marker)} markerPercent={marker} tooltip={tip} />
     }
+    case 'gpu': {
+      const count = getPodGpuCount(resource)
+      if (!count) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return <span className="text-sm text-theme-text-secondary font-mono">{count}</span>
+    }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>
   }
@@ -5759,6 +6252,11 @@ function NodeCell({ resource, column, majorityNodeMinorVersion }: { resource: an
       const pct = (podCount / max) * 100
       return <ResourceBar used={String(podCount)} total={String(max)} percent={pct} colorScheme="count" />
     }
+    case 'gpu': {
+      const count = getNodeGpuCount(resource)
+      if (!count) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return <span className="text-sm text-theme-text-secondary font-mono">{count}</span>
+    }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>
   }