@skyhook-io/radar-app 1.0.2 → 1.1.0

package/src/components/workload/WorkloadView.tsx

@@ -6,9 +6,11 @@ import { Terminal } from 'lucide-react'
 import {
   WorkloadView as BaseWorkloadView,
   type RendererOverrides,
+  type GitOpsOwnerRef,
+  gitOpsRouteForOwner,
 } from '@skyhook-io/k8s-ui'
 import type { SelectedResource, ResourceRef, ResolvedEnvFrom } from '../../types'
-import { kindToPlural, type NavigateToResource } from '../../utils/navigation'
+import { kindToPlural, buildWorkloadPath, type NavigateToResource } from '../../utils/navigation'
 import {
   useChanges, useResourceWithRelationships, usePodLogs, useTopology, useUpdateResource,
   useDeleteResource, useTriggerCronJob, useSuspendCronJob, useResumeCronJob,
@@ -21,7 +23,7 @@ import {
   fetchJSON,
 } from '../../api/client'
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
-import { useResourceAudit } from '../../api/client'
+import { useResourceAudit, useResources } from '../../api/client'
 import { AuditAlerts } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
 import { LogsViewer } from '../logs/LogsViewer'
@@ -35,6 +37,7 @@ import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
 import { WorkloadRenderer } from '../resources/renderers/WorkloadRenderer'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { cleanYamlForDuplicate } from '../../utils/skeleton-yaml'
+import { useDesktopDownload } from '../../hooks/useDesktopDownload'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
 
@@ -54,13 +57,19 @@ interface WorkloadViewRouteProps {
 export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRouteProps) {
   const location = useLocation()
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
 
-  // Parse /workload/:kind/:ns/:name from pathname
+  // Parse /workload/:kind/:ns/:name from pathname. Segments are URL-encoded by
+  // buildWorkloadPath; names can also contain literal slashes (e.g. some CRD names),
+  // which survive encoding as %2F and reassemble correctly here.
   const parts = location.pathname.replace(/^\//, '').split('/')
-  // parts[0] = 'workload', parts[1] = kind, parts[2] = ns, parts[3+] = name (may contain slashes)
-  const kind = parts[1] || ''
-  const namespace = parts[2] || ''
-  const name = parts.slice(3).join('/') || ''
+  const decode = (s: string): string => {
+    try { return decodeURIComponent(s) } catch { return s }
+  }
+  const kind = decode(parts[1] ?? '')
+  const namespace = decode(parts[2] ?? '')
+  const name = parts.slice(3).map(decode).join('/')
+  const group = searchParams.get('apiGroup') || ''
 
   if (!kind || !namespace || !name) {
     return (
@@ -79,8 +88,7 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
   }, [navigate])
 
   const handleNavigate = useCallback((resource: SelectedResource) => {
-    // Navigate to another workload view
-    navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`)
+    navigate(buildWorkloadPath(resource))
   }, [navigate])
 
   return (
@@ -88,6 +96,7 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
       kind={kind}
       namespace={namespace}
       name={name}
+      group={group}
       onBack={handleBack}
       onNavigateToResource={onNavigateToResource || handleNavigate}
     />
@@ -315,11 +324,22 @@ export function WorkloadView({
   const canUpdateSecrets = useCanUpdateSecrets()
   const updateResource = useUpdateResource()
   const actionsBarProps = useActionsBarProps(kindProp, namespace, name)
+  const desktopDownload = useDesktopDownload()
 
   const handleUpdateResource = useCallback(async (params: { kind: string; namespace: string; name: string; yaml: string }) => {
     await updateResource.mutateAsync(params)
   }, [updateResource])
 
+  const navigateRouter = useNavigate()
+  const handleOpenGitOpsResource = useCallback(
+    (ref: GitOpsOwnerRef) => navigateRouter(gitOpsRouteForOwner(ref)),
+    [navigateRouter],
+  )
+  const handleNavigateGitOpsPath = useCallback(
+    (path: string) => navigateRouter(path),
+    [navigateRouter],
+  )
+
   // Duplicate dialog
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [duplicateYaml, setDuplicateYaml] = useState('')
@@ -370,12 +390,18 @@ export function WorkloadView({
         isPrometheusSupported(kind) && !(kind === 'Pod' && res?.status?.phase === 'Pending')
       }
       onDuplicate={handleDuplicate}
+      onDownload={desktopDownload}
       actionsBarProps={actionsBarProps}
       rendererOverrides={rendererOverrides}
       resolvedEnvFrom={resolvedEnvFrom}
       renderOverviewExtra={({ kind: k, namespace: ns, name: n }) => (
-        <AuditSection kind={k} namespace={ns} name={n} />
+        <>
+          <AuditSection kind={k} namespace={ns} name={n} />
+          <FluxSourceConsumersSection kind={k} namespace={ns} name={n} />
+        </>
       )}
+      onOpenGitOpsResource={handleOpenGitOpsResource}
+      onNavigateGitOpsPath={handleNavigateGitOpsPath}
     />
     <CreateResourceDialog
       open={duplicateDialogOpen}
@@ -546,3 +572,93 @@ function AuditSection({ kind, namespace, name }: { kind: string; namespace: stri
   if (!findings || findings.length === 0) return null
   return <AuditAlerts findings={findings} onViewAll={() => navigate('/audit')} />
 }
+
+// FluxSourceConsumersSection lists the reconcilers (Kustomization, HelmRelease)
+// that reference this Flux source CR — the inverse of `spec.sourceRef`. Renders
+// only when the focused resource is a Flux source kind; otherwise null. Sources
+// can have many consumers (one repo feeding multiple apps), so this answers
+// "if I edit this source, what gets affected on the next reconcile?".
+//
+// Filtering happens client-side off the namespaced reconciler lists — these
+// are typically small (tens, not thousands) and the dynamic informer cache
+// makes the request cheap. If a cluster ever has thousands of HelmReleases,
+// a dedicated /api/gitops/consumers endpoint would be the right move; today
+// it'd be premature.
+// Outer component is cheap — it does only the kind check and decides whether
+// to mount the data-fetching child. Without this split, useResources would
+// fire two API calls on EVERY workload drawer open (Pod, Deployment, Service,
+// …), since the hook has no `enabled` flag and can't be conditionally called
+// (Rules of Hooks). The hooks only need to run when the focused resource is
+// actually a Flux source CR.
+function FluxSourceConsumersSection({ kind, namespace, name }: { kind: string; namespace: string; name: string }) {
+  // The inner WorkloadView de-pluralizes the URL's plural form, which gives
+  // "Gitrepository" (single-uppercase) rather than the wire-correct
+  // "GitRepository" — so we match lowercase. spec.sourceRef.kind on consumers
+  // is always wire-correct, so we look that up separately.
+  const sourceKind = FLUX_SOURCE_KIND_BY_LOWER.get(kind.toLowerCase()) ?? null
+  if (!sourceKind) return null
+  return <FluxSourceConsumersInner sourceKind={sourceKind} namespace={namespace} name={name} />
+}
+
+function FluxSourceConsumersInner({ sourceKind, namespace, name }: { sourceKind: string; namespace: string; name: string }) {
+  const navigate = useNavigate()
+  const { data: kustomizations } = useResources<any>('kustomizations', undefined, 'kustomize.toolkit.fluxcd.io')
+  const { data: helmReleases } = useResources<any>('helmreleases', undefined, 'helm.toolkit.fluxcd.io')
+
+  const consumers: Array<{ kind: 'Kustomization' | 'HelmRelease'; namespace: string; name: string; plural: string }> = []
+  for (const k of kustomizations ?? []) {
+    const ref = k?.spec?.sourceRef ?? {}
+    const refNs = ref.namespace || k?.metadata?.namespace
+    if (ref.kind === sourceKind && ref.name === name && refNs === namespace) {
+      consumers.push({ kind: 'Kustomization', namespace: k.metadata.namespace, name: k.metadata.name, plural: 'kustomizations' })
+    }
+  }
+  for (const h of helmReleases ?? []) {
+    const ref = h?.spec?.chart?.spec?.sourceRef ?? {}
+    const refNs = ref.namespace || h?.metadata?.namespace
+    if (ref.kind === sourceKind && ref.name === name && refNs === namespace) {
+      consumers.push({ kind: 'HelmRelease', namespace: h.metadata.namespace, name: h.metadata.name, plural: 'helmreleases' })
+    }
+  }
+
+  if (consumers.length === 0) {
+    return (
+      <div className="rounded-lg border border-theme-border bg-theme-elevated/40 p-3 text-xs text-theme-text-tertiary">
+        Consumed by — no Kustomization or HelmRelease references this source.
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border border-theme-border bg-theme-elevated/40 p-3">
+      <h3 className="mb-2 text-xs font-medium text-theme-text-secondary">
+        Consumed by ({consumers.length})
+      </h3>
+      <div className="flex flex-wrap gap-1.5">
+        {consumers.map((c) => (
+          <button
+            key={`${c.kind}/${c.namespace}/${c.name}`}
+            onClick={() => navigate(`/gitops/detail/${c.plural}/${encodeURIComponent(c.namespace)}/${encodeURIComponent(c.name)}`)}
+            className="inline-flex items-center gap-1.5 rounded border border-theme-border bg-theme-surface px-1.5 py-0.5 text-[11px] text-theme-text-secondary hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors"
+            title={`${c.kind} ${c.namespace}/${c.name}`}
+          >
+            <span className="text-theme-text-tertiary">{c.kind === 'HelmRelease' ? 'HR' : 'K'}</span>
+            <span>{c.namespace}/{c.name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// FLUX_SOURCE_KIND_BY_LOWER maps lowercase kind (what the inner WorkloadView
+// produces via its plural-to-singular fallback) to the wire-correct
+// PascalCase form that consumers carry in spec.sourceRef.kind. HelmChart is
+// intentionally absent — it's an auto-generated internal CR, not something
+// users create or point reconcilers at directly.
+const FLUX_SOURCE_KIND_BY_LOWER = new Map<string, string>([
+  ['gitrepository', 'GitRepository'],
+  ['helmrepository', 'HelmRepository'],
+  ['ocirepository', 'OCIRepository'],
+  ['bucket', 'Bucket'],
+])

package/src/types.ts

@@ -1,3 +1,5 @@
 // Re-export all types from the shared @skyhook-io/k8s-ui package.
 // This file exists for backward compatibility — new code should import from '@skyhook-io/k8s-ui' directly.
 export * from '@skyhook-io/k8s-ui/types/core'
+export * from '@skyhook-io/k8s-ui/types/gitops-tree'
+export * from '@skyhook-io/k8s-ui/types/gitops-insights'

package/src/utils/navigation.ts

@@ -1,9 +1,22 @@
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+import type { SelectedResource } from '@skyhook-io/k8s-ui/types/core'
 
 // Re-export shared navigation utilities from @skyhook-io/k8s-ui.
-export { kindToPlural, pluralToKind, refToSelectedResource } from '@skyhook-io/k8s-ui/utils/navigation'
+export { kindToPlural, pluralToKind, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
 export type { NavigateToResource } from '@skyhook-io/k8s-ui/utils/navigation'
 
+/**
+ * Build a /workload/:kind/:namespace/:name URL, preserving the API group as a
+ * query param so the WorkloadView can resolve CRDs with colliding kind names.
+ */
+export function buildWorkloadPath(resource: SelectedResource): string {
+  const kind = encodeURIComponent(resource.kind)
+  const namespace = encodeURIComponent(resource.namespace)
+  const name = encodeURIComponent(resource.name)
+  const base = `/workload/${kind}/${namespace}/${name}`
+  return resource.group ? `${base}?apiGroup=${encodeURIComponent(resource.group)}` : base
+}
+
 // radar-specific: open URL in system browser (desktop app support)
 export function openExternal(url: string): void {
   fetch(apiUrl('/desktop/open-url'), {

package/src/components/ui/NamespaceSelector.tsx

@@ -1,446 +0,0 @@
-import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
-import { createPortal } from 'react-dom'
-import { clsx } from 'clsx'
-import { ChevronDown, Search, X, Check, Shield } from 'lucide-react'
-import { Tooltip } from './Tooltip'
-import { isForbiddenError } from '../../api/client'
-
-interface Namespace {
-  name: string
-}
-
-export interface NamespaceSelectorHandle {
-  open: () => void
-}
-
-interface NamespaceSelectorProps {
-  value: string[]
-  onChange: (value: string[]) => void
-  namespaces: Namespace[] | undefined
-  namespacesError?: Error | null
-  className?: string
-  disabled?: boolean
-  disabledTooltip?: string
-}
-
-export const NamespaceSelector = forwardRef<NamespaceSelectorHandle, NamespaceSelectorProps>(({
-  value,
-  onChange,
-  namespaces,
-  namespacesError,
-  className,
-  disabled,
-  disabledTooltip,
-}, ref) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [manualInput, setManualInput] = useState('')
-  const [highlightedIndex, setHighlightedIndex] = useState(0)
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 })
-
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
-
-  const isForbidden = isForbiddenError(namespacesError)
-
-  // Convert value to Set for efficient lookups
-  const selectedSet = useMemo(() => new Set(value), [value])
-
-  // Sort and filter namespaces
-  const sortedNamespaces = useMemo(() => {
-    if (!namespaces) return []
-    return [...namespaces].sort((a, b) => a.name.localeCompare(b.name))
-  }, [namespaces])
-
-  const filteredNamespaces = useMemo(() => {
-    if (!search.trim()) return sortedNamespaces
-    const searchLower = search.toLowerCase()
-    return sortedNamespaces.filter((ns) =>
-      ns.name.toLowerCase().includes(searchLower)
-    )
-  }, [sortedNamespaces, search])
-
-  // Update position when dropdown opens
-  const updatePosition = useCallback(() => {
-    if (!triggerRef.current) return
-    const rect = triggerRef.current.getBoundingClientRect()
-    const dropdownWidth = Math.max(rect.width, 220) // Minimum width for checkboxes
-    // Align dropdown to the right edge of the button
-    const left = rect.right - dropdownWidth
-    setDropdownPosition({
-      top: rect.bottom + 4,
-      left: Math.max(8, left), // Ensure at least 8px from screen edge
-      width: dropdownWidth,
-    })
-  }, [])
-
-  // Open dropdown
-  const openDropdown = useCallback(() => {
-    if (disabled) return
-    setIsOpen(true)
-    setSearch('')
-    setHighlightedIndex(0)
-    updatePosition()
-  }, [disabled, updatePosition])
-
-  // Expose open method via ref
-  useImperativeHandle(ref, () => ({
-    open: openDropdown
-  }), [openDropdown])
-
-  // Close dropdown
-  const closeDropdown = useCallback(() => {
-    setIsOpen(false)
-    setSearch('')
-  }, [])
-
-  // Toggle a namespace selection
-  const toggleNamespace = useCallback((ns: string) => {
-    if (selectedSet.has(ns)) {
-      onChange(value.filter((v) => v !== ns))
-    } else {
-      onChange([...value, ns])
-    }
-  }, [selectedSet, value, onChange])
-
-  // Select all visible namespaces
-  const selectAll = useCallback(() => {
-    const allNames = sortedNamespaces.map((ns) => ns.name)
-    onChange(allNames)
-  }, [sortedNamespaces, onChange])
-
-  // Clear all selections (shows all namespaces)
-  const clearAll = useCallback(() => {
-    onChange([])
-  }, [onChange])
-
-  // Add a manually typed namespace
-  const addManualNamespace = useCallback(() => {
-    const ns = manualInput.trim()
-    if (ns && !selectedSet.has(ns)) {
-      onChange([...value, ns])
-    }
-    setManualInput('')
-  }, [manualInput, selectedSet, value, onChange])
-
-  // Focus search input when dropdown opens
-  useEffect(() => {
-    if (isOpen) {
-      // Small delay to ensure the dropdown is rendered
-      requestAnimationFrame(() => {
-        searchInputRef.current?.focus()
-      })
-    }
-  }, [isOpen])
-
-  // Reset highlighted index when filtered options change
-  useEffect(() => {
-    setHighlightedIndex(0)
-  }, [filteredNamespaces])
-
-  // Handle click outside
-  useEffect(() => {
-    if (!isOpen) return
-
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node
-      if (
-        triggerRef.current?.contains(target) ||
-        dropdownRef.current?.contains(target)
-      ) {
-        return
-      }
-      closeDropdown()
-    }
-
-    // Small delay to prevent immediate close on open click
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('mousedown', handleClickOutside)
-    }, 0)
-
-    return () => {
-      clearTimeout(timeoutId)
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [isOpen, closeDropdown])
-
-  // Handle keyboard navigation
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault()
-        setHighlightedIndex((prev) =>
-          prev < filteredNamespaces.length - 1 ? prev + 1 : prev
-        )
-        break
-      case 'ArrowUp':
-        e.preventDefault()
-        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0))
-        break
-      case 'Enter':
-      case ' ':
-        e.preventDefault()
-        if (filteredNamespaces[highlightedIndex]) {
-          toggleNamespace(filteredNamespaces[highlightedIndex].name)
-        }
-        break
-      case 'Escape':
-        e.preventDefault()
-        closeDropdown()
-        break
-      case 'Tab':
-        closeDropdown()
-        break
-    }
-  }, [filteredNamespaces, highlightedIndex, toggleNamespace, closeDropdown])
-
-  // Scroll highlighted item into view
-  useEffect(() => {
-    if (!isOpen || !dropdownRef.current) return
-    const highlighted = dropdownRef.current.querySelector('[data-highlighted="true"]')
-    if (highlighted) {
-      highlighted.scrollIntoView({ block: 'nearest' })
-    }
-  }, [highlightedIndex, isOpen])
-
-  // Get display value
-  const displayValue = useMemo(() => {
-    if (value.length === 0) return 'All Namespaces'
-    if (value.length === 1) return value[0]
-    return `${value.length} namespaces`
-  }, [value])
-
-  const allSelected = sortedNamespaces.length > 0 && value.length === sortedNamespaces.length
-
-  return (
-    <>
-      <Tooltip content={disabledTooltip} disabled={!disabled} position="bottom">
-        <button
-          ref={triggerRef}
-          type="button"
-          disabled={disabled}
-          onClick={() => (isOpen ? closeDropdown() : openDropdown())}
-          className={clsx(
-            'appearance-none bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1 pr-6 border border-theme-border-light',
-            'focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-[100px] text-left relative',
-            'transition-colors',
-            disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-theme-hover',
-            className
-          )}
-        >
-          <span className="block truncate">{displayValue}</span>
-          <ChevronDown
-            className={clsx(
-              'absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-secondary transition-transform',
-              isOpen && 'rotate-180'
-            )}
-          />
-        </button>
-      </Tooltip>
-
-      {isOpen &&
-        createPortal(
-          <>
-          {/* Backdrop to capture clicks outside the dropdown */}
-          <div
-            className="fixed inset-0 z-[9998]"
-            onClick={closeDropdown}
-          />
-          <div
-            ref={dropdownRef}
-            className="fixed z-[9999] bg-theme-elevated border border-theme-border rounded-md shadow-lg overflow-hidden"
-            style={{
-              top: dropdownPosition.top,
-              left: dropdownPosition.left,
-              width: dropdownPosition.width,
-            }}
-            onKeyDown={handleKeyDown}
-          >
-            {isForbidden ? (
-              <>
-                {/* Manual namespace input when listing is forbidden */}
-                <div className="p-2 border-b border-theme-border">
-                  <div className="flex items-center gap-1.5 text-[10px] text-amber-400 mb-2">
-                    <Shield className="w-3 h-3" />
-                    <span>Cannot list namespaces — type a name</span>
-                  </div>
-                  <div className="flex gap-1">
-                    <input
-                      ref={searchInputRef}
-                      type="text"
-                      value={manualInput}
-                      onChange={(e) => setManualInput(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          e.preventDefault()
-                          addManualNamespace()
-                        } else if (e.key === 'Escape') {
-                          closeDropdown()
-                        }
-                      }}
-                      placeholder="Namespace name..."
-                      className="flex-1 bg-theme-base text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border-light focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder:text-theme-text-tertiary"
-                    />
-                    <button
-                      type="button"
-                      onClick={addManualNamespace}
-                      disabled={!manualInput.trim()}
-                      className="px-2 py-1 text-xs btn-brand rounded"
-                    >
-                      Add
-                    </button>
-                  </div>
-                </div>
-
-                {/* Show currently selected namespaces with remove button */}
-                <div className="max-h-[200px] overflow-y-auto">
-                  {value.length === 0 ? (
-                    <div className="px-3 py-4 text-center text-xs text-theme-text-tertiary">
-                      All namespaces (type a name to filter)
-                    </div>
-                  ) : (
-                    value.map((ns) => (
-                      <div
-                        key={ns}
-                        className="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between gap-2 text-theme-text-primary hover:bg-theme-hover"
-                      >
-                        <span className="truncate">{ns}</span>
-                        <button
-                          type="button"
-                          onClick={() => onChange(value.filter(v => v !== ns))}
-                          className="text-theme-text-tertiary hover:text-red-400 flex-shrink-0"
-                        >
-                          <X className="w-3 h-3" />
-                        </button>
-                      </div>
-                    ))
-                  )}
-                </div>
-
-                {value.length > 0 && (
-                  <div className="px-3 py-1.5 text-[10px] text-theme-text-tertiary border-t border-theme-border bg-theme-base flex justify-between">
-                    <span>{value.length} selected</span>
-                    <button type="button" onClick={clearAll} className="text-blue-400 hover:text-blue-300">
-                      Clear all
-                    </button>
-                  </div>
-                )}
-              </>
-            ) : (
-              <>
-                {/* Search input */}
-                <div className="p-2 border-b border-theme-border">
-                  <div className="relative">
-                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
-                    <input
-                      ref={searchInputRef}
-                      type="text"
-                      value={search}
-                      onChange={(e) => setSearch(e.target.value)}
-                      placeholder="Search namespaces..."
-                      className="w-full bg-theme-base text-theme-text-primary text-xs rounded px-2 py-1.5 pl-7 pr-7 border border-theme-border-light focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder:text-theme-text-tertiary"
-                    />
-                    {search && (
-                      <button
-                        type="button"
-                        onClick={() => setSearch('')}
-                        className="absolute right-2 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-secondary"
-                      >
-                        <X className="w-3.5 h-3.5" />
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                {/* Select All / Clear All buttons */}
-                <div className="flex gap-1 px-2 py-1.5 border-b border-theme-border bg-theme-base">
-                  <button
-                    type="button"
-                    onClick={selectAll}
-                    disabled={allSelected}
-                    className={clsx(
-                      'flex-1 text-[10px] px-2 py-1 rounded transition-colors',
-                      allSelected
-                        ? 'text-theme-text-tertiary cursor-not-allowed'
-                        : 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary'
-                    )}
-                  >
-                    Select All
-                  </button>
-                  <button
-                    type="button"
-                    onClick={clearAll}
-                    disabled={value.length === 0}
-                    className={clsx(
-                      'flex-1 text-[10px] px-2 py-1 rounded transition-colors',
-                      value.length === 0
-                        ? 'text-theme-text-tertiary cursor-not-allowed'
-                        : 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary'
-                    )}
-                  >
-                    Clear All
-                  </button>
-                </div>
-
-                {/* Options list with checkboxes */}
-                <div className="max-h-[240px] overflow-y-auto">
-                  {filteredNamespaces.length === 0 ? (
-                    <div className="px-3 py-6 text-center text-xs text-theme-text-tertiary">
-                      No namespaces match "{search}"
-                    </div>
-                  ) : (
-                    filteredNamespaces.map((ns, index) => {
-                      const isSelected = selectedSet.has(ns.name)
-                      return (
-                        <button
-                          key={ns.name}
-                          type="button"
-                          data-highlighted={index === highlightedIndex}
-                          onClick={() => toggleNamespace(ns.name)}
-                          onMouseEnter={() => setHighlightedIndex(index)}
-                          className={clsx(
-                            'w-full text-left px-3 py-1.5 text-xs transition-colors flex items-center gap-2',
-                            'text-theme-text-primary',
-                            index === highlightedIndex && 'bg-theme-hover'
-                          )}
-                        >
-                          <div
-                            className={clsx(
-                              'w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0',
-                              isSelected
-                                ? 'bg-blue-500 border-blue-500'
-                                : 'border-theme-border-light bg-theme-base'
-                            )}
-                          >
-                            {isSelected && <Check className="w-2.5 h-2.5 text-white" />}
-                          </div>
-                          <span className="truncate">{ns.name}</span>
-                        </button>
-                      )
-                    })
-                  )}
-                </div>
-
-                {/* Namespace count and selection info */}
-                {sortedNamespaces.length > 0 && (
-                  <div className="px-3 py-1.5 text-[10px] text-theme-text-tertiary border-t border-theme-border bg-theme-base flex justify-between">
-                    <span>
-                      {filteredNamespaces.length === sortedNamespaces.length
-                        ? `${sortedNamespaces.length} namespaces`
-                        : `${filteredNamespaces.length} of ${sortedNamespaces.length} namespaces`}
-                    </span>
-                    {value.length > 0 && (
-                      <span className="text-blue-400">{value.length} selected</span>
-                    )}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-          </>,
-          document.body
-        )}
-    </>
-  )
-})