@skyhook-io/radar-app 1.0.2 → 1.1.0

package/src/api/client.ts

@@ -23,6 +23,8 @@ import type {
   InstallChartRequest,
   ArtifactHubSearchResult,
   ArtifactHubChartDetail,
+  GitOpsResourceTree,
+  GitOpsInsight,
 } from '../types'
 import type { GitOpsOperationResponse } from '../types/gitops'
 import { getApiBase, getAuthHeaders, getCredentialsMode, getBasename, routePath } from './config'
@@ -256,6 +258,31 @@ export interface DashboardNetworkPolicyCoverage {
   totalWorkloads: number
 }
 
+export interface DashboardGitOpsControllers {
+  // Aggregate roll-up across all detected controllers.
+  status: 'healthy' | 'degraded' | 'crashing'
+  controllers: DashboardGitOpsController[]
+}
+
+export interface DashboardGitOpsController {
+  name: string
+  // Tool vocabulary aligns with the backend `ctrlTool*` constants in
+  // internal/server/dashboard_gitops.go and the GitOps tree-builder
+  // tags in pkg/gitops/tree/graph.go (`gitopsTool`). Keep these three
+  // surfaces in sync — diverging vocabulary across surfaces was a real
+  // source of confusion until consolidated.
+  tool: 'argocd' | 'fluxcd'
+  namespace: string
+  ready: number
+  total: number
+  // Per-controller status (aggregate is in the parent and excludes
+  // 'pending' — it normalizes into 'degraded' there).
+  status: 'healthy' | 'degraded' | 'crashing' | 'pending'
+  // Reason for the crash when status === 'crashing'. Common values:
+  // "CrashLoopBackOff", "Error". Empty for non-crashing states.
+  crashReason?: string
+}
+
 export interface DashboardResponse {
   cluster: DashboardCluster
   health: DashboardHealth
@@ -270,6 +297,7 @@ export interface DashboardResponse {
   certificateHealth: DashboardCertificateHealth | null
   networkPolicyCoverage: DashboardNetworkPolicyCoverage | null
   audit: DashboardAudit | null
+  gitopsControllers: DashboardGitOpsControllers | null
   nodeVersionSkew: { versions: Record<string, string[]>; minVersion: string; maxVersion: string } | null
   deferredLoading?: boolean // True while deferred informers (secrets, events, etc.) are still syncing
   partialData?: string[] // Critical kinds promoted at first paint that haven't yet finished syncing (live-filtered)
@@ -783,6 +811,46 @@ export function useTopology(namespaces: string[], viewMode: string = 'resources'
   })
 }
 
+export function useGitOpsTree(kind: string, namespace: string, name: string, group?: string, namespaces: string[] = []) {
+  const ns = namespace || '_'
+  const params = new URLSearchParams()
+  if (group) params.set('group', group)
+  if (namespaces.length > 0) params.set('namespaces', namespaces.join(','))
+  const queryString = params.toString()
+
+  return useQuery<GitOpsResourceTree>({
+    queryKey: ['gitops-tree', kind, namespace, name, group, namespaces],
+    queryFn: () => fetchJSON(`/gitops/tree/${kind}/${ns}/${name}${queryString ? `?${queryString}` : ''}`),
+    enabled: Boolean(kind && name),
+    staleTime: 5000,
+  })
+}
+
+// Poll fast (2s) while a sync/rollback is in flight so the user sees the
+// outcome quickly; otherwise rely on staleTime + manual refetch. Argo flips
+// operationState.phase from "Running" -> Succeeded/Failed when done, so this
+// auto-quiesces on completion.
+const INSIGHTS_RUNNING_POLL_MS = 2000
+
+export function useGitOpsInsights(kind: string, namespace: string, name: string, group?: string, namespaces: string[] = []) {
+  const ns = namespace || '_'
+  const params = new URLSearchParams()
+  if (group) params.set('group', group)
+  if (namespaces.length > 0) params.set('namespaces', namespaces.join(','))
+  const queryString = params.toString()
+
+  return useQuery<GitOpsInsight>({
+    queryKey: ['gitops-insights', kind, namespace, name, group, namespaces],
+    queryFn: () => fetchJSON(`/gitops/insights/${kind}/${ns}/${name}${queryString ? `?${queryString}` : ''}`),
+    enabled: Boolean(kind && name),
+    staleTime: 5000,
+    refetchInterval: (query) => {
+      const phase = query.state.data?.summary?.operationPhase
+      return phase === 'Running' ? INSIGHTS_RUNNING_POLL_MS : false
+    },
+  })
+}
+
 // Generic resource fetching - returns resource with relationships
 // Uses '_' as placeholder for cluster-scoped resources (empty namespace)
 export function useResource<T>(kind: string, namespace: string, name: string, group?: string) {
@@ -1348,6 +1416,7 @@ export interface AvailablePort {
   protocol: string
   containerName?: string
   name?: string
+  scheme?: 'http' | 'https'
 }
 
 export function useAvailablePorts(type: 'pod' | 'service', namespace: string, name: string) {
@@ -2231,6 +2300,7 @@ export function useArtifactHubChart(repoName: string, chartName: string, version
 
 interface GitOpsMutationConfig<TVariables> {
   getPath: (variables: TVariables) => string
+  getBody?: (variables: TVariables) => unknown
   errorMessage: string
   successMessage: string
   getInvalidateKeys: (variables: TVariables) => (string | undefined)[][]
@@ -2247,6 +2317,8 @@ function createGitOpsMutation<TVariables>(config: GitOpsMutationConfig<TVariable
       mutationFn: async (variables: TVariables): Promise<GitOpsOperationResponse> => {
         const response = await apiFetch(`${getApiBase()}${config.getPath(variables)}`, {
           method: 'POST',
+          headers: config.getBody ? { 'Content-Type': 'application/json' } : undefined,
+          body: config.getBody ? JSON.stringify(config.getBody(variables)) : undefined,
         })
         if (!response.ok) {
           const error = await response.json().catch(() => ({ error: 'Unknown error' }))
@@ -2269,16 +2341,46 @@ function createGitOpsMutation<TVariables>(config: GitOpsMutationConfig<TVariable
 
 // Common variable types
 type FluxResourceVars = { kind: string; namespace: string; name: string }
+// ArgoAppVars identifies the target Application. Used by mutations that don't
+// take a body (terminate, suspend, resume, refresh).
 type ArgoAppVars = { namespace: string; name: string }
+// ArgoSyncVars extends ArgoAppVars with the sync request body fields. Only
+// useArgoSync sends these — splitting the type prevents callers from passing
+// resources/revision/prune to mutations that would silently drop them.
+type ArgoSyncVars = ArgoAppVars & {
+  resources?: Array<{ group?: string; kind: string; namespace?: string; name: string }>
+  revision?: string
+  prune?: boolean
+  dryRun?: boolean
+  force?: boolean
+  applyOnly?: boolean
+  // Free-form Argo SyncOption strings, e.g. "Replace=true",
+  // "ServerSideApply=true", "PruneLast=true". Caller is responsible for
+  // spelling.
+  syncOptions?: string[]
+}
+
+// ArgoRollbackVars targets a specific Argo history entry by ID. Prune and
+// DryRun mirror the sync flags so the rollback dialog can offer the same
+// safety net.
+type ArgoRollbackVars = ArgoAppVars & {
+  id: number
+  prune?: boolean
+  dryRun?: boolean
+}
 
 // Standard invalidation patterns
 const fluxInvalidateKeys = (v: FluxResourceVars) => [
   ['resources', v.kind],
   ['resource', v.kind, v.namespace, v.name],
+  ['gitops-tree', v.kind, v.namespace, v.name],
+  ['gitops-insights', v.kind, v.namespace, v.name],
 ]
 const argoInvalidateKeys = (v: ArgoAppVars) => [
   ['resources', 'applications'],
   ['resource', 'applications', v.namespace, v.name],
+  ['gitops-tree', 'applications', v.namespace, v.name],
+  ['gitops-insights', 'applications', v.namespace, v.name],
 ]
 
 // ============================================================================
@@ -2323,13 +2425,30 @@ export const useFluxSyncWithSource = createGitOpsMutation<FluxResourceVars>({
 // ArgoCD API hooks
 // ============================================================================
 
-export const useArgoSync = createGitOpsMutation<ArgoAppVars>({
+export const useArgoSync = createGitOpsMutation<ArgoSyncVars>({
   getPath: (v) => `/argo/applications/${v.namespace}/${v.name}/sync`,
+  getBody: (v) => ({
+    resources: v.resources,
+    revision: v.revision,
+    prune: v.prune,
+    dryRun: v.dryRun,
+    force: v.force,
+    applyOnly: v.applyOnly,
+    syncOptions: v.syncOptions,
+  }),
   errorMessage: 'Failed to trigger sync',
   successMessage: 'Sync initiated',
   getInvalidateKeys: argoInvalidateKeys,
 })
 
+export const useArgoRollback = createGitOpsMutation<ArgoRollbackVars>({
+  getPath: (v) => `/argo/applications/${v.namespace}/${v.name}/rollback`,
+  getBody: (v) => ({ id: v.id, prune: v.prune, dryRun: v.dryRun }),
+  errorMessage: 'Failed to roll back application',
+  successMessage: 'Rollback initiated',
+  getInvalidateKeys: argoInvalidateKeys,
+})
+
 export const useArgoTerminate = createGitOpsMutation<ArgoAppVars>({
   getPath: (v) => `/argo/applications/${v.namespace}/${v.name}/terminate`,
   errorMessage: 'Failed to terminate sync',
@@ -2372,8 +2491,13 @@ export function useArgoRefresh() {
       successMessage: 'Application refreshed',
     },
     onSuccess: (_, variables) => {
-      queryClient.invalidateQueries({ queryKey: ['resources', 'applications'] })
-      queryClient.invalidateQueries({ queryKey: ['resource', 'applications', variables.namespace, variables.name] })
+      // Match the standard Argo invalidation set so the GitOps detail page
+      // (insights strip, resource tree) refetches after Refresh / Hard
+      // Refresh — without these two extra keys the user clicks Refresh and
+      // sees stale insight/tree data until the next staleTime tick.
+      argoInvalidateKeys(variables).forEach((key) =>
+        queryClient.invalidateQueries({ queryKey: key })
+      )
     },
   })
 }
@@ -2450,6 +2574,114 @@ export function useSwitchContext() {
   })
 }
 
+// ============================================================================
+// Active namespace switcher
+// ============================================================================
+
+export interface NamespaceScope {
+  actives: string[]
+  kubeconfigNamespace: string
+  /**
+   * 'cluster-wide' — no per-user pick; user can list across namespaces.
+   * 'namespace'    — per-user view filter pinned to one or more namespaces.
+   * 'restricted'   — user can't list namespaces and isn't pinned to any.
+   */
+  mode: 'cluster-wide' | 'namespace' | 'restricted'
+  accessibleNamespaces: string[]
+  /** false when accessibleNamespaces is a best-effort short list (no list perm). */
+  authoritative: boolean
+  /** false when clearing would leave no usable namespace fallback. */
+  canClearNamespace: boolean
+}
+
+export function useNamespaceScope() {
+  return useQuery<NamespaceScope>({
+    queryKey: ['namespace-scope'],
+    queryFn: () => fetchJSON('/cluster/namespace-scope'),
+    staleTime: 30000,
+  })
+}
+
+const NAMESPACE_SWITCH_TIMEOUT = 5000
+
+export function debugNamespaceLog(label: string, payload?: Record<string, unknown>) {
+  if (typeof window === 'undefined') return
+  const enabled = window.localStorage.getItem('radar:debug:namespaces')
+  if (enabled !== '1' && enabled !== 'true') return
+  console.log(`[namespace-debug] ${label}`, {
+    t: Math.round(performance.now()),
+    href: window.location.href,
+    ...payload,
+  })
+}
+
+export function useSetActiveNamespace() {
+  const queryClient = useQueryClient()
+  return useMutation<NamespaceScope, Error, { namespaces: string[] }>({
+    meta: {
+      // Surface 403s (RBAC drift, denied bookmark) and network errors via the
+      // global toast. Without this, App.tsx call sites that mutate without
+      // their own onError (bookmark reconciliation, back-nav, topology
+      // maximize/clear, command palette) silently revert when the scope
+      // refetches and the mirror effect overwrites local state.
+      errorMessage: 'Failed to update namespace selection',
+    },
+    mutationFn: async ({ namespaces }) => {
+      debugNamespaceLog('mutation:start', { namespaces })
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), NAMESPACE_SWITCH_TIMEOUT)
+      const startedAt = performance.now()
+      try {
+        const response = await apiFetch(`${getApiBase()}/cluster/namespace`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ namespaces }),
+          signal: controller.signal,
+        })
+        clearTimeout(timeoutId)
+        debugNamespaceLog('mutation:response', {
+          namespaces,
+          status: response.status,
+          durationMs: Math.round(performance.now() - startedAt),
+        })
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+          throw new Error(error.error || `HTTP ${response.status}`)
+        }
+        return response.json()
+      } catch (error) {
+        clearTimeout(timeoutId)
+        debugNamespaceLog('mutation:error', {
+          namespaces,
+          durationMs: Math.round(performance.now() - startedAt),
+          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.')
+        }
+        throw error
+      }
+    },
+    onSuccess: (scope) => {
+      debugNamespaceLog('mutation:success-before-scope-cache-write', {
+        actives: scope.actives,
+        mode: scope.mode,
+        accessibleCount: scope.accessibleNamespaces.length,
+      })
+      queryClient.setQueryData<NamespaceScope>(['namespace-scope'], scope)
+      debugNamespaceLog('mutation:success-after-scope-cache-write')
+    },
+    onError: () => {
+      // A failed switch can leave the server's stored pick out of sync
+      // with the cached scope (network timeout after the server wrote;
+      // partial mutation). Refetch so the displayed picker matches what
+      // the server actually persisted instead of what we assumed.
+      debugNamespaceLog('mutation:on-error-invalidate-scope')
+      queryClient.invalidateQueries({ queryKey: ['namespace-scope'] })
+    },
+  })
+}
+
 // ============================================================================
 // Image Filesystem Inspection
 // ============================================================================

package/src/components/NamespaceSwitcher.tsx

@@ -0,0 +1,298 @@
+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 { useNamespaceScope, useSetActiveNamespace } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
+
+export interface NamespaceSwitcherHandle {
+  open: () => void
+}
+
+interface NamespaceSwitcherProps {
+  className?: string
+  disabled?: boolean
+  disabledTooltip?: 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.
+ */
+export const NamespaceSwitcher = forwardRef<NamespaceSwitcherHandle, NamespaceSwitcherProps>(function NamespaceSwitcher(
+  { className = '', disabled = false, disabledTooltip },
+  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,
+        )}
+    </>
+  )
+})

package/src/components/dock/DockContext.tsx

@@ -2,6 +2,7 @@
 export {
   DockProvider,
   useDock,
+  useDockReservedHeight,
   useOpenTerminal,
   useOpenLogs,
   useOpenWorkloadLogs,

package/src/components/dock/index.ts

@@ -1,2 +1,2 @@
-export { DockProvider, useDock, useOpenTerminal, useOpenLogs, useOpenWorkloadLogs, useOpenNodeTerminal, useOpenLocalTerminal } from './DockContext'
+export { DockProvider, useDock, useDockReservedHeight, useOpenTerminal, useOpenLogs, useOpenWorkloadLogs, useOpenNodeTerminal, useOpenLocalTerminal } from './DockContext'
 export { BottomDock } from './BottomDock'