@skyhook-io/radar-app 1.8.2 → 1.8.5

package/src/RadarApp.tsx

@@ -25,6 +25,7 @@ import { ThemeProvider } from './context/ThemeContext';
 import { ToastProvider, showApiError, showApiSuccess } from './components/ui/Toast';
 import { setApiBase, setBasename } from './api/config';
 import { NavCustomizationProvider } from './context/NavCustomization';
+import { FilterLocationBridge } from './filter/FilterLocationBridge';
 import type { NavCustomization } from './context/NavCustomization';
 
 // Declare the shape of mutation meta here — inlined rather than in a
@@ -70,6 +71,21 @@ export interface RadarAppProps {
    * See ./context/NavCustomization for the slot shape.
    */
   navSlots?: NavCustomization;
+  /**
+   * Whether Radar may set the browser tab title (`document.title`) per view.
+   * Defaults to OFF: embedders keep title ownership without opting out. The
+   * standalone binary opts in (`web/src/main.tsx` renders
+   * `<RadarApp manageDocumentTitle />`), and any full-page embed that wants
+   * Radar's per-view titles can do the same.
+   */
+  manageDocumentTitle?: boolean;
+  /**
+   * Trailing string appended after the per-view label (only when
+   * `manageDocumentTitle` is on). It's the *full* suffix including any
+   * separator, so a host can rebrand (`' — My Cloud'`) or drop it (`''`).
+   * Defaults to `' · Radar'`.
+   */
+  documentTitleSuffix?: string;
   /**
    * Initial route for `router: 'memory'` (ignored for 'browser'). Lets a host
    * deep-link a specific view (e.g. '/topology') without owning the URL bar —
@@ -116,6 +132,8 @@ export function RadarApp({
   router = 'browser',
   queryClient,
   navSlots,
+  manageDocumentTitle = false,
+  documentTitleSuffix,
   initialPath,
 }: RadarAppProps): React.ReactElement {
   // Apply runtime config during render so module-level singletons are set
@@ -136,7 +154,9 @@ export function RadarApp({
       <QueryClientProvider client={client}>
         <ToastProvider>
           <NavCustomizationProvider value={navSlots}>
-            <App />
+            <FilterLocationBridge>
+              <App manageDocumentTitle={manageDocumentTitle} documentTitleSuffix={documentTitleSuffix} />
+            </FilterLocationBridge>
           </NavCustomizationProvider>
         </ToastProvider>
       </QueryClientProvider>

package/src/api/client.ts

@@ -16,8 +16,12 @@ import type {
   HelmReleaseDetail,
   HelmValues,
   ManifestDiff,
+  NotesDiff,
+  HooksDiff,
+  ResourceDiff,
   UpgradeInfo,
   BatchUpgradeInfo,
+  ValuesDiff,
   ValuesPreviewResponse,
   HelmRepository,
   ChartSearchResult,
@@ -32,6 +36,15 @@ import type { GitOpsOperationResponse } from '../types/gitops'
 import { getApiBase, getAuthHeaders, getCredentialsMode, getBasename, routePath } from './config'
 import { pluralToKind } from '../utils/navigation'
 
+// Auto-refresh cadences (ms) — named constants for each polled hook's
+// refetchInterval below, so the poll rate reads clearly at each call site.
+const DASHBOARD_REFRESH_INTERVAL_MS = 30_000
+const AUDIT_REFRESH_INTERVAL_MS = 60_000
+const ISSUES_REFRESH_INTERVAL_MS = 30_000
+const COST_REFRESH_INTERVAL_MS = 60_000
+const CHANGES_REFRESH_INTERVAL_MS = 60_000
+const APPLICATIONS_REFRESH_INTERVAL_MS = 60_000
+
 // Wrapper around fetch that always includes credentials (for session cookies)
 // and handles 401 responses globally. Merges caller-provided headers with
 // auth headers from the config module so library consumers (Radar Hub) can
@@ -323,7 +336,7 @@ export function useDashboard(namespaces: string[] = []) {
     queryKey: ['dashboard', namespaces],
     queryFn: () => fetchJSON(`/dashboard${params}`),
     staleTime: 15000, // 15 seconds
-    refetchInterval: 30000, // Refresh every 30 seconds
+    refetchInterval: DASHBOARD_REFRESH_INTERVAL_MS,
   })
 }
 
@@ -334,7 +347,7 @@ export function useAudit(namespaces: string[] = []) {
     queryKey: ['audit', namespaces],
     queryFn: () => fetchJSON(`/audit${params}`),
     staleTime: 30000,
-    refetchInterval: 60000,
+    refetchInterval: AUDIT_REFRESH_INTERVAL_MS,
     placeholderData: (prev) => prev,
   })
 }
@@ -365,7 +378,7 @@ export function useIssues(namespaces: string[] = []) {
     queryKey: ['issues', namespaces],
     queryFn: () => fetchJSON(`/issues${params}`),
     staleTime: 30000,
-    refetchInterval: 30000,
+    refetchInterval: ISSUES_REFRESH_INTERVAL_MS,
   })
 }
 
@@ -377,6 +390,28 @@ export function useResourceAudit(kind: string, namespace: string, name: string)
   })
 }
 
+// Live Issues that touch ONE resource — its own issues plus, for a workload, its
+// owned pods' issues (server-side owner rollup via issues.RelatedIssues). Backs
+// the "Operational Issues" section in the resource detail. Cluster-scoped
+// resources pass "_" for namespace; namespaced ones also scope the scan via
+// ?namespaces= for a cheap, bounded Compose.
+export function useResourceIssues(kind: string, group: string | undefined, namespace: string, name: string, enabled = true) {
+  const clusterScoped = !namespace
+  const pathNs = clusterScoped ? '_' : encodeURIComponent(namespace)
+  const params = new URLSearchParams()
+  if (group) params.set('group', group)
+  const path = `/issues/resource/${encodeURIComponent(kind)}/${pathNs}/${encodeURIComponent(name)}`
+  const qs = params.toString()
+  return useQuery<Issue[]>({
+    queryKey: ['issues', 'resource', kind, group ?? '', namespace, name],
+    queryFn: () => fetchJSON(`${path}${qs ? `?${qs}` : ''}`),
+    // No refetchInterval: a drawer doesn't need to poll; staleTime keeps it fresh
+    // on reopen without re-running an uncapped Compose every 30s.
+    staleTime: 30000,
+    enabled: enabled && !!kind && !!name,
+  })
+}
+
 // Audit settings
 export interface AuditSettings {
   ignoredNamespaces: string[]
@@ -491,7 +526,7 @@ export function useOpenCostSummary() {
   return useQuery<OpenCostSummary>({
     queryKey: ['opencost-summary'],
     queryFn: () => fetchJSON('/opencost/summary'),
-    refetchInterval: 60000, // Refresh every minute
+    refetchInterval: COST_REFRESH_INTERVAL_MS,
     staleTime: 30000,
     placeholderData: (prev) => prev, // Keep previous data visible during refetch
   })
@@ -929,7 +964,7 @@ export function useApplications(namespaces: string[]) {
     queryKey: ['applications', namespaces],
     queryFn: () => fetchJSON(`/applications${queryString ? `?${queryString}` : ''}`),
     staleTime: 30_000,
-    refetchInterval: 60_000,
+    refetchInterval: APPLICATIONS_REFRESH_INTERVAL_MS,
   })
 }
 
@@ -1088,7 +1123,7 @@ export function useChanges(options: UseChangesOptions = {}) {
     queryKey: ['changes', namespaces, kind, timeRange, filter, includeK8sEvents, includeManaged, includeDeleted, limit],
     queryFn: () => fetchJSON(`/changes${queryString ? `?${queryString}` : ''}`),
     staleTime: 5000, // Consider data stale after 5 seconds to ensure fresh data on navigation
-    refetchInterval: 60000, // SSE handles real-time updates; this is a fallback
+    refetchInterval: CHANGES_REFRESH_INTERVAL_MS, // SSE handles real-time updates; this is a fallback
     enabled,
   })
 }
@@ -2358,11 +2393,14 @@ export function useHelmManifest(namespace: string, name: string, revision?: numb
 }
 
 // Get values for a Helm release. `enabled` see useHelmManifest.
-export function useHelmValues(namespace: string, name: string, allValues?: boolean, enabled = true) {
-  const params = allValues ? '?all=true' : ''
+export function useHelmValues(namespace: string, name: string, allValues?: boolean, enabled = true, revision?: number) {
+  const params = new URLSearchParams()
+  if (allValues) params.set('all', 'true')
+  if (revision && revision > 0) params.set('revision', String(revision))
+  const query = params.toString() ? `?${params.toString()}` : ''
   return useQuery<HelmValues>({
-    queryKey: ['helm-values', namespace, name, allValues],
-    queryFn: () => fetchJSON(`/helm/releases/${namespace}/${name}/values${params}`),
+    queryKey: ['helm-values', namespace, name, allValues, revision],
+    queryFn: () => fetchJSON(`/helm/releases/${namespace}/${name}/values${query}`),
     enabled: Boolean(namespace && name && enabled),
     staleTime: 60000,
   })
@@ -2385,6 +2423,77 @@ export function useHelmManifestDiff(
   })
 }
 
+export function useHelmValuesDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  allValues = false,
+  enabled = true,
+) {
+  return useQuery<ValuesDiff>({
+    queryKey: ['helm-values-diff', namespace, name, revision1, revision2, allValues],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        revision1: String(revision1),
+        revision2: String(revision2),
+      })
+      if (allValues) params.set('all', 'true')
+      return fetchJSON(`/helm/releases/${namespace}/${name}/values/diff?${params.toString()}`)
+    },
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
+export function useHelmNotesDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  enabled = true,
+) {
+  return useQuery<NotesDiff>({
+    queryKey: ['helm-notes-diff', namespace, name, revision1, revision2],
+    queryFn: () =>
+      fetchJSON(`/helm/releases/${namespace}/${name}/notes/diff?revision1=${revision1}&revision2=${revision2}`),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
+export function useHelmHooksDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  enabled = true,
+) {
+  return useQuery<HooksDiff>({
+    queryKey: ['helm-hooks-diff', namespace, name, revision1, revision2],
+    queryFn: () =>
+      fetchJSON(`/helm/releases/${namespace}/${name}/hooks/diff?revision1=${revision1}&revision2=${revision2}`),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
+export function useHelmResourceDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  enabled = true,
+) {
+  return useQuery<ResourceDiff>({
+    queryKey: ['helm-resource-diff', namespace, name, revision1, revision2],
+    queryFn: () =>
+      fetchJSON(`/helm/releases/${namespace}/${name}/resources/diff?revision1=${revision1}&revision2=${revision2}`),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
 // Check for upgrade availability (lazy - called when drawer opens)
 export function useHelmUpgradeInfo(namespace: string, name: string, enabled = true) {
   return useQuery<UpgradeInfo>({
@@ -3147,6 +3256,11 @@ export interface NamespaceScope {
   authoritative: boolean
   /** false when clearing would leave no usable namespace fallback. */
   canClearNamespace: boolean
+  /** true when the backend informer cache is pinned to a namespace. */
+  cacheScoped: boolean
+  cacheScopeNamespace?: string
+  /** true when this client may rebuild the local cache for another namespace. */
+  namespaceRescope: boolean
 }
 
 export function useNamespaceScope() {
@@ -3158,6 +3272,7 @@ export function useNamespaceScope() {
 }
 
 const NAMESPACE_SWITCH_TIMEOUT = 5000
+const NAMESPACE_RESCOPE_TIMEOUT = 120000
 
 export function debugNamespaceLog(label: string, payload?: Record<string, unknown>) {
   if (typeof window === 'undefined') return
@@ -3184,7 +3299,16 @@ export function useSetActiveNamespace() {
     mutationFn: async ({ namespaces }) => {
       debugNamespaceLog('mutation:start', { namespaces })
       const controller = new AbortController()
-      const timeoutId = setTimeout(() => controller.abort(), NAMESPACE_SWITCH_TIMEOUT)
+      const currentScope = queryClient.getQueryData<NamespaceScope>(['namespace-scope'])
+      // cacheScoped is a stable per-process property (the server's --namespace-scope
+      // flag). If the scope query is missing/stale we can't yet tell a cheap
+      // view-filter change from a cache-rebuilding rescope, so bias to the long
+      // timeout — only a confirmed non-scoped session gets the fast switch timeout.
+      // Aborting a real rebuild at 5s surfaces a spurious failure while the server
+      // keeps going.
+      const isRescope = currentScope?.cacheScoped !== false
+      const timeoutMs = isRescope ? NAMESPACE_RESCOPE_TIMEOUT : NAMESPACE_SWITCH_TIMEOUT
+      const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
       const startedAt = performance.now()
       try {
         const response = await apiFetch(`${getApiBase()}/cluster/namespace`, {
@@ -3212,7 +3336,9 @@ export function useSetActiveNamespace() {
           error: error instanceof Error ? error.message : String(error),
         })
         if (error instanceof Error && error.name === 'AbortError') {
-          throw new Error('Namespace switch timed out. The cluster may be unreachable.', { cause: error })
+          throw new Error(isRescope
+            ? 'Namespace rescope timed out. The cluster may still be loading.'
+            : 'Namespace switch timed out. The cluster may be unreachable.', { cause: error })
         }
         throw error
       }
@@ -3223,7 +3349,13 @@ export function useSetActiveNamespace() {
         mode: scope.mode,
         accessibleCount: scope.accessibleNamespaces.length,
       })
+      if (scope.cacheScoped) {
+        queryClient.removeQueries({ predicate: query => query.queryKey[0] !== 'namespace-scope' })
+      }
       queryClient.setQueryData<NamespaceScope>(['namespace-scope'], scope)
+      if (scope.cacheScoped) {
+        queryClient.invalidateQueries()
+      }
       debugNamespaceLog('mutation:success-after-scope-cache-write')
     },
     onError: () => {

package/src/components/ConnectionErrorView.tsx

@@ -254,7 +254,7 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
 
           {connection.error && (
             <div className="w-full bg-theme-elevated border border-theme-border rounded-lg p-3 mb-6 overflow-auto max-h-32">
-              <code className="text-xs text-red-400 font-mono whitespace-pre-wrap break-all">
+              <code className="text-xs text-red-400 font-mono whitespace-pre-wrap break-words">
                 {connection.error}
               </code>
             </div>

package/src/components/ContextSwitcher.tsx

@@ -14,6 +14,8 @@ import { parseContextName, type ParsedContextName } from '../utils/context-name'
 
 interface ContextSwitcherProps {
   className?: string
+  variant?: 'chip' | 'segment'
+  label?: string
 }
 
 export interface ContextSwitcherHandle {
@@ -24,7 +26,7 @@ interface ParsedContext extends ParsedContextName {
   context: ContextInfo
 }
 
-export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '' }, ref) => {
+export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '', variant, label }, ref) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
   const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
@@ -191,6 +193,8 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
       <ClusterSwitcher
         ref={ref}
         className={className}
+        variant={variant}
+        label={label}
         currentId={currentId}
         currentName={currentRaw}
         currentSourceLabel={currentSourceLabel}

package/src/components/NamespaceSwitcher.tsx

@@ -1,298 +1,41 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { forwardRef } from 'react'
+import { NamespacePicker, type NamespacePickerHandle } from '@skyhook-io/k8s-ui'
 import { useNamespaceScope, useSetActiveNamespace } from '../api/client'
-import { Tooltip } from './ui/Tooltip'
 
-export interface NamespaceSwitcherHandle {
-  open: () => void
-}
+export type NamespaceSwitcherHandle = NamespacePickerHandle
 
 interface NamespaceSwitcherProps {
   className?: string
   disabled?: boolean
   disabledTooltip?: string
+  variant?: 'chip' | 'segment'
+  label?: string
 }
 
 /**
- * NamespaceSwitcher is a per-user multi-select view filter for the cluster
- * view. It does NOT reshape the shared informer cache — picks are saved
- * server-side per user and intersected with the user's RBAC-allowed
- * namespaces on each read.
- *
- * Three states reflect what the backend reports:
- *   - cluster-wide: empty trigger label "All namespaces", picker lets the
- *     user narrow the view; otherwise informational.
- *   - namespace:    label shows the namespace count (or single name); picker
- *     offers other accessible namespaces and a clear-all reset.
- *   - restricted:   user can't list namespaces and isn't pinned; picker
- *     surfaces only the kubeconfig context's namespace + any saved picks.
- *
- * Selection model: the dropdown keeps a draft Set<string>; toggling rows
- * mutates the draft locally; closing the dropdown applies the draft in a
- * single mutation. "Clear all" applies immediately and closes; "Select all
- * visible" / "Clear visible" mutate the draft only and wait for close.
+ * OSS Radar's namespace scope control — a thin data container over the shared
+ * presentational NamespacePicker (@skyhook-io/k8s-ui). Wires Radar's own API
+ * hooks; Radar Hub supplies its own container over the per-cluster apiBase.
  */
 export const NamespaceSwitcher = forwardRef<NamespaceSwitcherHandle, NamespaceSwitcherProps>(function NamespaceSwitcher(
-  { className = '', disabled = false, disabledTooltip },
+  { className, disabled, disabledTooltip, variant, label },
   ref,
 ) {
   const { data: scope, isLoading } = useNamespaceScope()
   const setActive = useSetActiveNamespace()
 
-  const [isOpen, setIsOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
-  const [draft, setDraft] = useState<Set<string>>(() => new Set())
-
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
-  const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
-
-  // Sync the draft with the server's view whenever it changes (initial load,
-  // post-mutation refetch, eviction after RBAC drift).
-  useEffect(() => {
-    setDraft(new Set(scopeActives))
-  }, [activesKey, scopeActives])
-
-  const items = useMemo(() => {
-    if (!scope) return [] as string[]
-    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
-  }, [scope])
-
-  const filteredItems = useMemo(() => {
-    const q = search.trim().toLowerCase()
-    if (!q) return items
-    return items.filter(n => n.toLowerCase().includes(q))
-  }, [items, search])
-
-  const applySelection = useCallback((next: Set<string>) => {
-    if (!scope) return
-    const nextArr = Array.from(next).sort()
-    if (nextArr.join(',') === activesKey) return
-    setActive.mutate({ namespaces: nextArr })
-  }, [activesKey, scope, setActive])
-
-  const closeAndApply = useCallback(() => {
-    setIsOpen(false)
-    setSearch('')
-    applySelection(draft)
-  }, [applySelection, draft])
-
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      if (disabled || isLoading || setActive.isPending) return
-      setIsOpen(true)
-    },
-  }), [disabled, isLoading, setActive.isPending])
-
-  useEffect(() => {
-    if (!isOpen) return
-    const trigger = triggerRef.current
-    if (!trigger) return
-    const r = trigger.getBoundingClientRect()
-    setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) })
-  }, [isOpen])
-
-  useEffect(() => {
-    if (!isOpen) return
-    function onClick(e: MouseEvent) {
-      if (
-        !dropdownRef.current?.contains(e.target as Node) &&
-        !triggerRef.current?.contains(e.target as Node)
-      ) {
-        closeAndApply()
-      }
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') closeAndApply()
-    }
-    document.addEventListener('mousedown', onClick)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onClick)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [isOpen, closeAndApply])
-
-  if (!scope) return null
-
-  const toggle = (ns: string) => {
-    const next = new Set(draft)
-    if (next.has(ns)) next.delete(ns)
-    else next.add(ns)
-    setDraft(next)
-  }
-
-  const clearAll = () => {
-    setDraft(new Set())
-    setIsOpen(false)
-    setSearch('')
-    applySelection(new Set())
-  }
-
-  const selectAllVisible = () => {
-    const next = new Set(draft)
-    for (const ns of filteredItems) next.add(ns)
-    setDraft(next)
-  }
-
-  const clearVisible = () => {
-    const next = new Set(draft)
-    for (const ns of filteredItems) next.delete(ns)
-    setDraft(next)
-  }
-
-  const activeCount = scopeActives.length
-  const triggerLabel =
-    activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
-  const isClusterWide = activeCount === 0
-  const restrictedHint = scope.mode === 'restricted'
-  const isDisabled = disabled || isLoading || setActive.isPending
-  const canClearAll = scope.canClearNamespace || activeCount === 0
-  const tooltipContent = disabled && disabledTooltip
-    ? disabledTooltip
-    : restrictedHint
-      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
-      : isClusterWide
-        ? 'Currently viewing all namespaces. Click to narrow the view.'
-        : activeCount === 1
-          ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
-          : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
-
-  // Counts used to label the bulk-action buttons; computed against the visible
-  // (filtered) set so the labels match what the action will affect.
-  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
-  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
-
   return (
-    <>
-      <Tooltip
-        content={tooltipContent}
-        delay={300}
-        position="bottom"
-      >
-        <button
-          ref={triggerRef}
-          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
-          disabled={isDisabled}
-          className={`flex items-center gap-1.5 px-2 py-1 rounded text-sm bg-theme-elevated hover:bg-theme-hover text-theme-text-primary disabled:opacity-60 transition-colors ${className}`}
-          aria-label="Switch active namespaces"
-        >
-          {isClusterWide ? (
-            <Globe className="w-3.5 h-3.5 text-theme-text-tertiary" />
-          ) : restrictedHint ? (
-            <AlertTriangle className="w-3.5 h-3.5 text-theme-text-tertiary" />
-          ) : null}
-          <span className="font-medium max-w-[180px] truncate">
-            {setActive.isPending ? 'Switching…' : triggerLabel}
-          </span>
-          <ChevronDown className="w-3 h-3 opacity-60" />
-        </button>
-      </Tooltip>
-
-      {isOpen &&
-        createPortal(
-          <div
-            ref={dropdownRef}
-            style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
-            className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
-          >
-            {items.length > 6 && (
-              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
-                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
-                <input
-                  autoFocus
-                  value={search}
-                  onChange={e => setSearch(e.target.value)}
-                  placeholder="Filter namespaces"
-                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
-                />
-              </div>
-            )}
-
-            <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
-              <button
-                onClick={canClearAll ? clearAll : undefined}
-                disabled={!canClearAll || activeCount === 0}
-                className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
-                aria-label="Clear namespace selection"
-              >
-                <X className="w-3 h-3" />
-                Clear all
-              </button>
-              <button
-                onClick={allVisibleSelected ? clearVisible : selectAllVisible}
-                disabled={filteredItems.length === 0}
-                className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
-              >
-                {allVisibleSelected
-                  ? `Clear ${filteredItems.length} visible`
-                  : search.trim()
-                    ? `Select ${filteredItems.length} visible`
-                    : 'Select all'}
-              </button>
-            </div>
-
-            <ul className="max-h-80 overflow-y-auto py-1">
-              {filteredItems.length === 0 && (
-                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
-                  {search ? 'No matches.' : 'No namespaces available.'}
-                </li>
-              )}
-
-              {filteredItems.map(ns => {
-                const isChecked = draft.has(ns)
-                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
-                return (
-                  <li key={ns}>
-                    <label
-                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
-                    >
-                      <span className="flex items-center gap-2 min-w-0">
-                        <input
-                          type="checkbox"
-                          checked={isChecked}
-                          onChange={() => toggle(ns)}
-                          className="shrink-0 accent-current"
-                        />
-                        <span className="truncate">{ns}</span>
-                        {isContextDefault && (
-                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
-                            kubeconfig
-                          </span>
-                        )}
-                      </span>
-                    </label>
-                  </li>
-                )
-              })}
-            </ul>
-
-            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
-              <span>
-                {draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
-              </span>
-              <button
-                onClick={closeAndApply}
-                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
-              >
-                Done
-              </button>
-            </div>
-
-            {!scope.authoritative && (
-              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
-                Limited list — your RBAC doesn&rsquo;t allow listing all
-                namespaces. Other namespaces may be accessible but won&rsquo;t
-                appear here until you switch context.
-              </div>
-            )}
-          </div>,
-          document.body,
-        )}
-    </>
+    <NamespacePicker
+      ref={ref}
+      scope={scope}
+      loading={isLoading}
+      pending={setActive.isPending}
+      onApply={namespaces => setActive.mutate({ namespaces })}
+      disabled={disabled}
+      disabledTooltip={disabledTooltip}
+      className={className}
+      variant={variant}
+      label={label}
+    />
   )
 })