@skyhook-io/k8s-ui 1.13.0 → 1.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.13.0",
+  "version": "1.13.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -98,7 +98,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.30.0",
+    "lucide-react": "^1.33.0",
     "monaco-editor": "0.55.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

package/src/components/applications/ApplicationDetail.tsx

@@ -13,7 +13,7 @@ import {
   Boxes,
   ChevronDown,
   Clock3,
-  DollarSign,
+  Coins,
   ExternalLink,
   GitCommit,
   Layers,
@@ -988,7 +988,7 @@ function ApplicationViewTabs({
                 : "border-transparent text-theme-text-secondary hover:border-theme-border-light hover:text-theme-text-primary",
             )}
           >
-            <DollarSign className="h-4 w-4" />
+            <Coins className="h-4 w-4" />
             Cost
           </button>
         )}

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -18,6 +18,9 @@ export interface ClusterSwitcherItem {
   /** Raw context / display string. ClusterName collapses GKE/EKS/AKS
    *  shapes; user-named clusters pass through unchanged. */
   name: string
+  /** Short qualifier rendered after the parsed name without affecting
+   *  provider detection, e.g. a source suffix for colliding contexts. */
+  nameQualifier?: string
   secondary?: string
   badge?: string
   /** Origin label, rendered as a folder-icon line under the name.
@@ -44,6 +47,8 @@ export interface ClusterSwitcherProps {
   /** Raw context / display string. Pass it as-is — the trigger renders
    *  through ClusterName, which handles parse + provider badge + tooltip. */
   currentName: string
+  /** Trigger-side counterpart to {@link ClusterSwitcherItem.nameQualifier}. */
+  currentNameQualifier?: string
   /** Trigger-side counterpart to {@link ClusterSwitcherItem.sourceLabel}.
    *  Only pass when 2+ kubeconfig sources are loaded. */
   currentSourceLabel?: string
@@ -80,6 +85,7 @@ const TRIGGER_NAME_MAX_WIDTH = 'max-w-[140px] sm:max-w-[220px] xl:max-w-[340px]'
 export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcherProps>(({
   currentId,
   currentName,
+  currentNameQualifier,
   currentSourceLabel,
   items,
   onSelect,
@@ -114,6 +120,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
       if (!q) return true
       return (
         item.name.toLowerCase().includes(q) ||
+        item.nameQualifier?.toLowerCase().includes(q) ||
         item.secondary?.toLowerCase().includes(q) ||
         item.badge?.toLowerCase().includes(q) ||
         item.sourceLabel?.toLowerCase().includes(q) ||
@@ -209,7 +216,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
         disabled={disabled || loading}
         className={
           variant === 'segment'
-            ? `flex items-center gap-1.5 px-3 py-1.5 h-full min-w-[150px] max-w-[264px] text-[13px] font-medium
+            ? `flex items-center gap-1.5 px-3 py-1.5 h-full min-w-[150px] max-w-[264px] overflow-hidden text-[13px] font-medium
                text-theme-text-primary hover:bg-theme-hover transition-colors cursor-pointer
                disabled:opacity-50 disabled:cursor-not-allowed`
             : `flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
@@ -236,12 +243,22 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
           // context inline (per-row secondary line), and an extra hover
           // tooltip would just overlap the search input.
           <>
-            <ClusterName
-              name={currentName}
-              fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
-              className={variant === 'segment' ? 'min-w-0 max-w-[214px]' : TRIGGER_NAME_MAX_WIDTH}
-              noTooltip={isOpen}
-            />
+            <span className={variant === 'segment' ? 'min-w-0 flex-1' : 'min-w-0'}>
+              <ClusterName
+                name={currentName}
+                fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
+                className={variant === 'segment' ? 'min-w-0 max-w-full' : TRIGGER_NAME_MAX_WIDTH}
+                noTooltip={isOpen}
+              />
+            </span>
+            {currentNameQualifier && (
+              <span
+                className="shrink-0 max-w-[80px] truncate text-xs font-normal text-theme-text-tertiary"
+                title={currentNameQualifier}
+              >
+                {currentNameQualifier}
+              </span>
+            )}
             {currentSourceLabel && (
               // Icon-only on the trigger: long folder paths (the very case
               // that motivates the chip) middle-truncate to something
@@ -358,6 +375,14 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
                                     : 'text-theme-text-primary'
                               }`}
                             />
+                            {item.nameQualifier && (
+                              <span
+                                className="shrink-0 max-w-[120px] truncate text-xs font-normal text-theme-text-tertiary"
+                                title={item.nameQualifier}
+                              >
+                                {item.nameQualifier}
+                              </span>
+                            )}
                             {item.badge && (
                               <span className="shrink-0 text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
                                 {item.badge}

package/src/components/resources/ResourcesView.tsx

@@ -35,6 +35,7 @@ import type { SelectedResource, APIResource } from '../../types'
 import { isForbiddenError } from '../../types/fetch-error'
 import type { NavigateToResource } from '../../utils/navigation'
 import { categorizeResources, CORE_RESOURCES, findAPIResourceForRoute } from '../../utils/api-resources'
+import { copyText } from '../../utils/clipboard'
 import {
   getPodStatus,
   getPodRestarts,
@@ -139,6 +140,7 @@ import {
 import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
 import { pluralize } from '../../utils/pluralize'
 import { getPodGpuCount, getNodeGpuCount } from '../../utils/extended-resources'
+import { parseQuantityToNumber } from '../../utils/format'
 import { type CustomColumnDef, type CustomColumnSource, customColumnKey, readCustomColumnValue, sanitizeCustomColumnDefs } from '../../utils/custom-columns'
 import { FreshnessControl, type FreshnessConnection } from '../ui/FreshnessControl'
 import { Tooltip } from '../ui/Tooltip'
@@ -5838,10 +5840,11 @@ function CopyNameButton({ name }: { name: string }) {
     <button
       onClick={(e) => {
         e.stopPropagation()
-        navigator.clipboard.writeText(name).then(() => {
+        void copyText(name).then((didCopy) => {
+          if (!didCopy) return
           setCopied(true)
           setTimeout(() => setCopied(false), 1500)
-        }).catch(() => {})
+        })
       }}
       className="shrink-0 p-0.5 text-theme-text-tertiary hover:text-theme-text-primary opacity-0 group-hover/row:opacity-100 transition-opacity"
       title="Copy name"
@@ -7518,8 +7521,10 @@ function NodeCell({ resource, column, majorityNodeMinorVersion }: { resource: an
       const allocatable = resource.status?.allocatable?.pods
       const podCount = m?.podCount ?? 0
       if (!allocatable) return <span className="text-sm text-theme-text-tertiary font-mono">{podCount || '-'}</span>
-      const max = parseInt(allocatable, 10)
-      if (isNaN(max) || max <= 0) return <span className="text-sm text-theme-text-tertiary font-mono">{podCount || '-'}</span>
+      // Allocatable pods is a Quantity, so a 1000-pod node reports "1k" —
+      // a raw-integer read would see 1 and peg the bar at 21600%.
+      const max = parseQuantityToNumber(allocatable)
+      if (!Number.isFinite(max) || max <= 0) return <span className="text-sm text-theme-text-tertiary font-mono">{podCount || '-'}</span>
       const pct = (podCount / max) * 100
       return <ResourceBar used={String(podCount)} total={String(max)} percent={pct} colorScheme="count" />
     }

package/src/components/resources/renderers/NamespaceRenderer.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { quotaUsageRatio } from './NamespaceRenderer'
+
+describe('quotaUsageRatio', () => {
+  // status.used is computed with quantity arithmetic, so a used pod count of
+  // 1000 serializes canonically as "1k". A raw-float read sees 1 and reports a
+  // saturated quota as barely used.
+  it('reads count quantities with SI suffixes on either side of the ratio', () => {
+    expect(quotaUsageRatio('pods', '1k', '1k')).toBe(1)
+    expect(quotaUsageRatio('pods', '900', '1k')).toBeCloseTo(0.9)
+    expect(quotaUsageRatio('count/pods', '1k', '2k')).toBeCloseTo(0.5)
+  })
+
+  it('leaves plain counts unchanged', () => {
+    expect(quotaUsageRatio('pods', '5', '10')).toBe(0.5)
+    expect(quotaUsageRatio('services', '0', '10')).toBe(0)
+  })
+
+  it('parses cpu and memory with their own unit parsers', () => {
+    expect(quotaUsageRatio('cpu', '500m', '1')).toBeCloseTo(0.5)
+    expect(quotaUsageRatio('requests.cpu', '2', '4')).toBeCloseTo(0.5)
+    expect(quotaUsageRatio('memory', '512Mi', '1Gi')).toBeCloseTo(0.5)
+    expect(quotaUsageRatio('requests.storage', '1Gi', '2Gi')).toBeCloseTo(0.5)
+  })
+
+  it('yields null when hard is unset or unparseable so the row falls back to raw strings', () => {
+    expect(quotaUsageRatio('pods', '5', '')).toBeNull()
+    expect(quotaUsageRatio('pods', '5', 'garbage')).toBeNull()
+  })
+})

package/src/components/resources/renderers/NamespaceRenderer.tsx

@@ -5,7 +5,7 @@ import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, Resou
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
 import { RBACErrorSection } from './RBACErrorSection'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
-import { parseCPUToNanocores, parseMemoryToBytes } from '../../../utils/format'
+import { parseCPUToNanocores, parseMemoryToBytes, parseQuantityToNumber } from '../../../utils/format'
 
 interface NamespaceRendererProps {
   data: any
@@ -95,11 +95,15 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quot
 // right unit parser by resource name (cpu → millicores, memory/storage →
 // bytes, everything else → plain count). Returns null when hard is unset or
 // unparseable so the row falls back to showing the raw strings.
-function quotaUsageRatio(resourceName: string, used: string, hard: string): number | null {
+// Count values are Quantities too: the quota controller computes status.used
+// with quantity arithmetic, which re-serializes canonically — a used pod count
+// of 1000 arrives as "1k". Read with parseFloat that is 1, and a saturated
+// quota renders as barely used.
+export function quotaUsageRatio(resourceName: string, used: string, hard: string): number | null {
   if (!hard) return null
   const isCPU = /(^|\.)cpu$/i.test(resourceName)
   const isBytes = /(memory|storage)$/i.test(resourceName)
-  const parse = isCPU ? parseCPUToNanocores : isBytes ? parseMemoryToBytes : (v: string) => parseFloat(v) || 0
+  const parse = isCPU ? parseCPUToNanocores : isBytes ? parseMemoryToBytes : parseQuantityToNumber
   const h = parse(hard)
   if (!h) return null
   return parse(used || '0') / h

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/workload/WorkloadView.tsx

@@ -30,7 +30,7 @@ import {
   BarChart3,
   Network,
   Stethoscope,
-  DollarSign,
+  Coins,
 } from 'lucide-react'
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode, HPADiagnosis, WorkloadPodInfo } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
@@ -722,7 +722,7 @@ export function WorkloadView({
       icon: <Stethoscope className="w-4 h-4" />,
       hidden: !(renderDiagnoseTab && (isDiagnoseKind(apiKind, group) || (reachableVia?.length ?? 0) > 0)),
     },
-    { id: 'cost', label: 'Cost', icon: <DollarSign className="w-4 h-4" />, hidden: !costTabVisible },
+    { id: 'cost', label: 'Cost', icon: <Coins className="w-4 h-4" />, hidden: !costTabVisible },
     { id: 'yaml', label: 'YAML', icon: <FileText className="w-4 h-4" /> },
   ]
   const requestedTabAvailable = tabs.some((tab) => tab.id === requestedTab && !tab.hidden)

package/src/types/core.ts

@@ -455,12 +455,15 @@ export interface ClusterInfo {
 // Context info for context switching
 export interface ContextInfo {
   name: string
+  /** Original context name inside its source file. Set for isolated sources
+   *  so display code need not infer backend-added collision qualifiers. */
+  originalName?: string
   cluster: string
   user: string
   namespace: string
   isCurrent: boolean
-  /** Source kubeconfig label (e.g. "kube-cluster-paris"). Set by backend
-   *  only when 2+ kubeconfig files are loaded; empty otherwise. */
+  /** Source kubeconfig label (e.g. "kube-cluster-paris"). Set by the backend
+   *  for contexts loaded through the isolated source registry. */
   source?: string
 }
 
@@ -1273,8 +1276,8 @@ export interface AggregatedFlow {
 
 // Cluster info for traffic detection
 export interface TrafficClusterInfo {
-  platform: string // gke, eks, aks, generic
-  cni: string // cilium, calico, flannel, vpc-cni, azure-cni
+  platform: string // rke2, gke, eks, aks, minikube, kind, docker-desktop, openshift, rancher, generic
+  cni: string // cilium, canal, calico, flannel, vpc-cni, azure-cni, gke-native, unknown
   dataplaneV2: boolean
   clusterName?: string
   k8sVersion?: string

package/src/utils/clipboard.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { copyText } from './clipboard'
+
+function fallbackDocument(copied: boolean) {
+  const document = {
+    createElement: vi.fn(() => textarea),
+    body: { appendChild: vi.fn() },
+    execCommand: vi.fn(() => copied),
+    activeElement: null as unknown,
+  }
+  const textarea = {
+    value: '',
+    style: {} as CSSStyleDeclaration,
+    setAttribute: vi.fn(),
+    select: vi.fn(() => { document.activeElement = textarea }),
+    setSelectionRange: vi.fn(),
+    remove: vi.fn(),
+  }
+  return { document, textarea }
+}
+
+describe('copyText', () => {
+  it('uses the synchronous fallback when the Clipboard API is unavailable on HTTP', async () => {
+    const { document } = fallbackDocument(true)
+
+    await expect(copyText('busybox', undefined, document as unknown as Document)).resolves.toBe(true)
+
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+  })
+
+  it('falls back to a synchronous copy command when the Clipboard API rejects', async () => {
+    const clipboard = { writeText: vi.fn().mockRejectedValue(new DOMException('Blocked', 'NotAllowedError')) }
+    const { document, textarea } = fallbackDocument(true)
+
+    await expect(copyText('busybox', clipboard, document as unknown as Document)).resolves.toBe(true)
+
+    expect(clipboard.writeText).toHaveBeenCalledWith('busybox')
+    expect(document.body.appendChild).toHaveBeenCalledWith(textarea)
+    expect(textarea.value).toBe('busybox')
+    expect(textarea.select).toHaveBeenCalledOnce()
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+    expect(textarea.remove).toHaveBeenCalledOnce()
+  })
+
+  it('restores focus to the previously active element without scrolling', async () => {
+    const { document } = fallbackDocument(true)
+    const previouslyFocused = { focus: vi.fn(), isConnected: true }
+    document.activeElement = previouslyFocused
+
+    await expect(copyText('busybox', undefined, document as unknown as Document)).resolves.toBe(true)
+
+    expect(previouslyFocused.focus).toHaveBeenCalledWith({ preventScroll: true })
+  })
+
+  it('leaves focus alone when a copy handler focused something else', async () => {
+    const { document, textarea } = fallbackDocument(true)
+    const previouslyFocused = { focus: vi.fn(), isConnected: true }
+    document.activeElement = previouslyFocused
+    const somethingElse = {}
+    textarea.select.mockImplementation(() => { document.activeElement = somethingElse })
+
+    await expect(copyText('busybox', undefined, document as unknown as Document)).resolves.toBe(true)
+
+    expect(previouslyFocused.focus).not.toHaveBeenCalled()
+  })
+
+  it('does not refocus an element that left the DOM during the copy', async () => {
+    const { document } = fallbackDocument(true)
+    const previouslyFocused = { focus: vi.fn(), isConnected: false }
+    document.activeElement = previouslyFocused
+
+    await expect(copyText('busybox', undefined, document as unknown as Document)).resolves.toBe(true)
+
+    expect(previouslyFocused.focus).not.toHaveBeenCalled()
+  })
+
+  it('does not create a fallback element when the Clipboard API succeeds', async () => {
+    const clipboard = { writeText: vi.fn().mockResolvedValue(undefined) }
+    const { document } = fallbackDocument(true)
+
+    await expect(copyText('busybox', clipboard, document as unknown as Document)).resolves.toBe(true)
+
+    expect(document.createElement).not.toHaveBeenCalled()
+  })
+})

package/src/utils/clipboard.ts

@@ -0,0 +1,50 @@
+type ClipboardWriter = Pick<Clipboard, 'writeText'>
+
+/**
+ * Copy text from a user gesture, including pages served from an insecure origin.
+ * The async Clipboard API is unavailable or rejects on plain HTTP, while the
+ * legacy command remains permitted when it runs synchronously from the click.
+ */
+export async function copyText(
+  text: string,
+  clipboard: ClipboardWriter | undefined = typeof navigator === 'undefined' ? undefined : navigator.clipboard,
+  doc: Document | undefined = typeof document === 'undefined' ? undefined : document,
+): Promise<boolean> {
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text)
+      return true
+    } catch {
+      // Fall through for insecure origins and denied Clipboard API access.
+    }
+  }
+
+  if (!doc?.body) return false
+
+  const previouslyFocused = doc.activeElement as { focus?: (options?: FocusOptions) => void; isConnected?: boolean } | null
+  const textarea = doc.createElement('textarea')
+  textarea.value = text
+  textarea.readOnly = true
+  textarea.setAttribute('aria-hidden', 'true')
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  textarea.style.pointerEvents = 'none'
+
+  try {
+    doc.body.appendChild(textarea)
+    textarea.select()
+    textarea.setSelectionRange(0, text.length)
+    return doc.execCommand('copy')
+  } catch {
+    return false
+  } finally {
+    // Restore focus only when the textarea still owns it — a copy handler may
+    // have legitimately focused something else — and without scrolling a
+    // now-offscreen element back into view.
+    const textareaOwnsFocus = doc.activeElement === (textarea as unknown as Element)
+    textarea.remove()
+    if (textareaOwnsFocus && previouslyFocused?.isConnected !== false) {
+      previouslyFocused?.focus?.({ preventScroll: true })
+    }
+  }
+}

package/src/utils/extended-resources.ts

@@ -2,7 +2,7 @@
 // the GPU views. Keep all effective-request math here — K8s semantics for
 // extended resources are subtle and must not be reimplemented per call site.
 
-import { parseMemoryToBytes } from './format'
+import { parseQuantityToNumber } from './format'
 
 const STANDARD_NODE_RESOURCES = new Set(['cpu', 'memory', 'pods', 'ephemeral-storage'])
 
@@ -48,14 +48,11 @@ export function getEffectiveResources(resources: any): Record<string, string> {
 }
 
 // K8s quantity → number. Counts are usually plain integers, but quantities may
-// legally carry suffixes: "3000m" is 3, "3k" is 3000.
+// legally carry suffixes: "3000m" is 3, "3k" is 3000. The shared quantity
+// parser is the one place that knows the suffix table.
 function asCount(value: unknown): number {
   if (typeof value === 'number') return Number.isFinite(value) ? value : 0
-  const s = String(value ?? '').trim()
-  if (!s) return 0
-  if (/^\d+(\.\d+)?m$/.test(s)) return Number(s.slice(0, -1)) / 1000
-  const n = parseMemoryToBytes(s)
-  return Number.isFinite(n) ? n : 0
+  return parseQuantityToNumber(String(value ?? ''))
 }
 
 function containerGpuCount(container: any): number {

package/src/utils/format.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { formatCPUString, formatMemoryString, parseMemoryToBytes } from './format'
+import { formatCPUString, formatMemoryString, parseMemoryToBytes, parseQuantityToNumber } from './format'
 
 describe('formatCPUString', () => {
   it('renders exact zero as zero, not a fabricated near-zero', () => {
@@ -32,4 +32,86 @@ describe('parseMemoryToBytes', () => {
     expect(parseMemoryToBytes('-1Ki')).toBe(-1024)
     expect(parseMemoryToBytes('1Ki')).toBe(1024)
   })
+
+  // Aggregate cluster memory reaches suffixes a single node never carries —
+  // "1Pi" must not fall through to the bare-number fallback and read as 1 byte.
+  it('parses the large suffixes an aggregate capacity can carry', () => {
+    expect(parseMemoryToBytes('1Pi')).toBe(1024 ** 5)
+    expect(parseMemoryToBytes('1Ei')).toBe(1024 ** 6)
+    expect(parseMemoryToBytes('1P')).toBe(1000 ** 5)
+    expect(parseMemoryToBytes('1E')).toBe(1000 ** 6)
+  })
+})
+
+describe('parseQuantityToNumber', () => {
+  // The reported bug. A Quantity's canonical form collapses trailing zeros into
+  // an SI suffix, so a node started with --max-pods=1000 reports "1k". Read as
+  // a raw integer that is 1, and a node running 216 pods rendered as 216 / 1
+  // with the usage bar pegged at 21600%.
+  it('reads a pod capacity of 1000 as 1000, not 1', () => {
+    expect(parseQuantityToNumber('1k')).toBe(1000)
+    expect((216 / parseQuantityToNumber('1k')) * 100).toBeCloseTo(21.6)
+  })
+
+  it('only collapses zeros in groups of three, so nearby counts are unchanged', () => {
+    expect(parseQuantityToNumber('2k')).toBe(2000)
+    expect(parseQuantityToNumber('1020')).toBe(1020)
+    expect(parseQuantityToNumber('990')).toBe(990)
+    expect(parseQuantityToNumber('216')).toBe(216)
+  })
+
+  it('handles the sub-unit decimal suffixes a count can legally carry', () => {
+    expect(parseQuantityToNumber('3000m')).toBe(3)
+    expect(parseQuantityToNumber('1500m')).toBe(1.5)
+    expect(parseQuantityToNumber('1000000u')).toBe(1)
+    expect(parseQuantityToNumber('1000000000n')).toBe(1)
+  })
+
+  it('handles the whole decimal SI range', () => {
+    expect(parseQuantityToNumber('5M')).toBe(5e6)
+    expect(parseQuantityToNumber('5G')).toBe(5e9)
+    expect(parseQuantityToNumber('5T')).toBe(5e12)
+    expect(parseQuantityToNumber('5P')).toBe(5e15)
+    expect(parseQuantityToNumber('5E')).toBe(5e18)
+  })
+
+  it('handles binary suffixes in powers of 1024', () => {
+    expect(parseQuantityToNumber('1Ki')).toBe(1024)
+    expect(parseQuantityToNumber('2Gi')).toBe(2 * 1024 ** 3)
+    expect(parseQuantityToNumber('1Ei')).toBe(1024 ** 6)
+  })
+
+  // "1E3" is the exponent form (1000), while "1E" is exa. Deciding the exponent
+  // first is what keeps the two apart.
+  it('reads the decimal-exponent form without confusing it for exa', () => {
+    expect(parseQuantityToNumber('1e3')).toBe(1000)
+    expect(parseQuantityToNumber('1E3')).toBe(1000)
+    expect(parseQuantityToNumber('1.5e3')).toBe(1500)
+    expect(parseQuantityToNumber('1e-3')).toBe(0.001)
+    expect(parseQuantityToNumber('1E')).toBe(1e18)
+  })
+
+  it('preserves the sign', () => {
+    expect(parseQuantityToNumber('-1k')).toBe(-1000)
+    expect(parseQuantityToNumber('+1k')).toBe(1000)
+  })
+
+  // A number this cannot read is reported as unknown so the caller can fall back,
+  // rather than becoming a plausible-looking wrong number on screen.
+  it('yields zero for input it cannot parse rather than guessing', () => {
+    expect(parseQuantityToNumber('1z')).toBe(0)
+    expect(parseQuantityToNumber('1KB')).toBe(0)
+    expect(parseQuantityToNumber('abc')).toBe(0)
+    expect(parseQuantityToNumber('')).toBe(0)
+    expect(parseQuantityToNumber('   ')).toBe(0)
+    expect(parseQuantityToNumber(null)).toBe(0)
+    expect(parseQuantityToNumber(undefined)).toBe(0)
+  })
+
+  it('passes through numbers the API already decoded, and rejects non-finite ones', () => {
+    expect(parseQuantityToNumber(216)).toBe(216)
+    expect(parseQuantityToNumber(0)).toBe(0)
+    expect(parseQuantityToNumber(Number.NaN)).toBe(0)
+    expect(parseQuantityToNumber(Number.POSITIVE_INFINITY)).toBe(0)
+  })
 })

package/src/utils/format.ts

@@ -126,12 +126,15 @@ export function parseMemoryToBytes(memString: string): number {
   const num = parseFloat(match[1])
   const suffix = match[2]
 
-  // Binary suffixes (powers of 1024)
+  // Binary suffixes (powers of 1024). Pi/Ei are real inputs at cluster scale —
+  // an aggregate of a thousand 1TiB nodes serializes as "1Pi".
   const binarySuffixes: Record<string, number> = {
     'Ki': 1024,
     'Mi': 1024 ** 2,
     'Gi': 1024 ** 3,
     'Ti': 1024 ** 4,
+    'Pi': 1024 ** 5,
+    'Ei': 1024 ** 6,
   }
 
   // Decimal suffixes (powers of 1000)
@@ -141,6 +144,8 @@ export function parseMemoryToBytes(memString: string): number {
     'M': 1000 ** 2,
     'G': 1000 ** 3,
     'T': 1000 ** 4,
+    'P': 1000 ** 5,
+    'E': 1000 ** 6,
   }
 
   if (suffix in binarySuffixes) {
@@ -164,6 +169,80 @@ export function formatMemoryString(memString: string): string {
   return formatMemoryBytes(parseMemoryToBytes(memString))
 }
 
+// =============================================================================
+// Quantity Parsing (counts)
+// =============================================================================
+
+/**
+ * Every suffix a `resource.Quantity` can carry, in the API's own groupings:
+ * decimal SI in powers of 1000 (including the sub-unit n/u/m), and binary SI in
+ * powers of 1024. `K` is not canonical Kubernetes — only lowercase `k` is — but
+ * it is accepted here for the same leniency `parseMemoryToBytes` already has.
+ */
+const QUANTITY_SUFFIXES: Record<string, number> = {
+  n: 1e-9,
+  u: 1e-6,
+  m: 1e-3,
+  k: 1e3,
+  K: 1e3,
+  M: 1e6,
+  G: 1e9,
+  T: 1e12,
+  P: 1e15,
+  E: 1e18,
+  Ki: 1024,
+  Mi: 1024 ** 2,
+  Gi: 1024 ** 3,
+  Ti: 1024 ** 4,
+  Pi: 1024 ** 5,
+  Ei: 1024 ** 6,
+}
+
+/**
+ * Parse a Kubernetes `resource.Quantity` into a plain number.
+ *
+ * Counts are the surface that needs this. A Quantity's canonical serialization
+ * collapses trailing zeros into an SI suffix, so a node started with
+ * `--max-pods=1000` reports `"1k"` and not `"1000"` — read as a raw integer
+ * that is 1, so a usage bar divides by 1 instead of 1000. Any count that is
+ * a multiple of 1000 hits it.
+ *
+ * Unlike `parseMemoryToBytes`, an unrecognised suffix yields 0 rather than the
+ * bare number: a Quantity this cannot read is better reported as unknown by the
+ * caller than silently turned into a plausible-looking wrong number.
+ *
+ * @param quantity - K8s quantity like "1k", "216", "3000m", "2Gi", "1e3"
+ * @returns The value as a number, or 0 when it cannot be parsed
+ */
+export function parseQuantityToNumber(quantity: string | number | null | undefined): number {
+  if (typeof quantity === 'number') return Number.isFinite(quantity) ? quantity : 0
+  if (!quantity) return 0
+
+  const str = String(quantity).trim()
+  if (!str) return 0
+
+  // Decimal-exponent form. A Quantity's suffix is either an SI suffix or an
+  // exponent, never both, so this is decided before the suffix table — which
+  // also keeps "1E3" (1000) from being read as exa (1e18).
+  const exponent = str.match(/^([+-]?\d+(?:\.\d+)?)[eE]([+-]?\d+)$/)
+  if (exponent) {
+    const value = Number(`${exponent[1]}e${exponent[2]}`)
+    return Number.isFinite(value) ? value : 0
+  }
+
+  const match = str.match(/^([+-]?\d+(?:\.\d+)?)\s*([A-Za-z]*)$/)
+  if (!match) return 0
+
+  const num = parseFloat(match[1])
+  if (!Number.isFinite(num)) return 0
+
+  const suffix = match[2]
+  if (!suffix) return num
+
+  const multiplier = QUANTITY_SUFFIXES[suffix]
+  return multiplier === undefined ? 0 : num * multiplier
+}
+
 // =============================================================================
 // Dashboard Metrics Formatting (different units from metrics-server)
 // =============================================================================

package/src/utils/inClusterConsent.test.ts

@@ -26,6 +26,15 @@ describe('inClusterConsent', () => {
     expect(inClusterConsentGiven('prod')).toBe(false)
   })
 
+  it('does not trust consent stored under the visible-name key format', () => {
+    const store: Record<string, string> = { 'radar.inClusterConsent.prod': '1' }
+    vi.stubGlobal('localStorage', {
+      getItem: (k: string) => (k in store ? store[k] : null),
+      setItem: (k: string, v: string) => { store[k] = v },
+    })
+    expect(inClusterConsentGiven('prod')).toBe(false)
+  })
+
   it('does not throw when localStorage is unavailable, and reports not-given', () => {
     vi.stubGlobal('localStorage', {
       getItem: () => { throw new Error('denied') },

package/src/utils/inClusterConsent.ts

@@ -1,9 +1,9 @@
 // Consent memory for the mutating in-cluster reachability test (it creates a
-// short-lived Job/pod). Keyed by CLUSTER so a "don't ask again" on one cluster
+// short-lived Job/pod). Keyed by an opaque source identity so a "don't ask again" on one cluster
 // never silently suppresses the confirm on another - the cluster the pod lands
 // in is the whole point of asking. Switching kube-context re-prompts.
 //
-// No cluster identity → no memory of ANY kind: the operator is asked on every
+// No source identity → no memory of ANY kind: the operator is asked on every
 // run. localStorage is per-ORIGIN, and one origin (Radar Hub) can front many
 // clusters, so a shared fallback key would let "don't ask again" on one cluster
 // suppress the pod-creating confirm on all of them - and even an in-memory
@@ -11,22 +11,22 @@
 // The dialog hides its "don't ask again" checkbox in that case, so nothing is
 // promised that doesn't stick.
 
-const key = (cluster: string) => `radar.inClusterConsent.${cluster}`
+const key = (clusterKey: string) => `radar.inClusterConsent.v2.${clusterKey}`
 
-export function inClusterConsentGiven(cluster?: string): boolean {
-  if (!cluster) return false
+export function inClusterConsentGiven(clusterKey?: string): boolean {
+  if (!clusterKey) return false
   try {
-    return localStorage.getItem(key(cluster)) === '1'
+    return localStorage.getItem(key(clusterKey)) === '1'
   } catch {
     // localStorage unavailable (private mode / non-browser) - fail toward asking.
     return false
   }
 }
 
-export function rememberInClusterConsent(cluster?: string): void {
-  if (!cluster) return
+export function rememberInClusterConsent(clusterKey?: string): void {
+  if (!clusterKey) return
   try {
-    localStorage.setItem(key(cluster), '1')
+    localStorage.setItem(key(clusterKey), '1')
   } catch {
     // Non-fatal: if we can't persist, the user is simply asked again next time.
   }

package/src/utils/index.ts

@@ -9,6 +9,7 @@ export * from './animation'
 export * from './resource-hierarchy'
 export * from './log-format'
 export * from './download'
+export * from './clipboard'
 export * from './env-from'
 export * from './extended-resources'
 export * from './api-resources'