@skyhook-io/radar-app 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
     "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.1",
-    "yaml": "^2.8.3"
+    "yaml": "^2.8.4"
   },
   "peerDependencies": {
     "@skyhook-io/k8s-ui": ">=1.5.0",
@@ -54,7 +54,7 @@
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-query": "^5.100.6",
+    "@tanstack/react-query": "^5.100.9",
     "@types/diff": "^8.0.0",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
@@ -64,11 +64,11 @@
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
     "lucide-react": "^1.12.0",
-    "postcss": "^8.5.12",
+    "postcss": "^8.5.14",
     "prettier": "^3.8.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-router-dom": "^7.14.2",
+    "react-router-dom": "^7.15.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.2",

package/src/App.tsx

@@ -21,6 +21,7 @@ import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './c
 import { DockProvider, BottomDock, useDock, useOpenLocalTerminal } from './components/dock'
 import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
+import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { useNavCustomization } from './context/NavCustomization'
 import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitchContext'
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
@@ -28,13 +29,12 @@ import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
-import { NamespaceSelector } from './components/ui/NamespaceSelector'
 import { UpdateNotification } from './components/ui/UpdateNotification'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { CommandPalette } from './components/ui/CommandPalette'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
-import { useNamespaces, useSwitchContext, useAuthMe } from './api/client'
+import { useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe } from './api/client'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
@@ -46,6 +46,7 @@ import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNam
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import type { TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
 import { kindToPlural, openExternal } from './utils/navigation'
+import type { ContextSwitcherHandle } from './components/ContextSwitcher'
 
 // All possible node kinds (core + GitOps)
 const ALL_NODE_KINDS: NodeKind[] = [
@@ -310,34 +311,51 @@ function AppInner() {
   // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
   const suppressViewClearRef = useRef(false)
 
-  // Close resource drawer when switching workload kind in URL (/resources/pods → /resources/deployments).
-  // Keeps stale Pod drawer from masking the table after sidebar navigation (Radar Hub / app.radarhq.io).
-  const prevResourcesKindSlugRef = useRef<string | null>(null)
+  // Close resource drawer when the /resources route no longer matches the
+  // selected drawer resource. This covers both in-view kind switches and
+  // cross-kind navigations from expanded drawers (for example Node -> View Pods).
+  const prevResourcesKindKeyRef = useRef<string | null>(null)
+  const currentResourceKindSlug = normalizedResourcesKindSlug.toLowerCase()
+  const currentResourceGroup = searchParams.get('apiGroup') ?? ''
+  const selectedResourceKindSlug = selectedResource ? kindToPlural(selectedResource.kind).toLowerCase() : ''
+  const selectedResourceGroup = selectedResource?.group ?? ''
+  const selectedResourceRouteMismatch = mainView === 'resources' && !!selectedResource && (
+    selectedResourceKindSlug !== currentResourceKindSlug ||
+    selectedResourceGroup !== currentResourceGroup
+  )
+  const resourcesKindRouteChanged = mainView === 'resources' &&
+    prevResourcesKindKeyRef.current !== null &&
+    prevResourcesKindKeyRef.current !== `${currentResourceGroup}/${currentResourceKindSlug}`
+  const routeSelectedResource = resourcesKindRouteChanged && selectedResourceRouteMismatch
+    ? null
+    : selectedResource
+
   useEffect(() => {
     if (mainView !== 'resources') {
-      prevResourcesKindSlugRef.current = null
+      prevResourcesKindKeyRef.current = null
       return
     }
-    const slug = normalizedResourcesKindSlug
-    const prev = prevResourcesKindSlugRef.current
-    prevResourcesKindSlugRef.current = slug
-    if (prev !== null && prev !== slug) {
+    const key = `${currentResourceGroup}/${currentResourceKindSlug}`
+    const prev = prevResourcesKindKeyRef.current
+    prevResourcesKindKeyRef.current = key
+
+    if (prev !== null && prev !== key && selectedResourceRouteMismatch) {
       setSelectedResource(null)
       setDrawerExpanded(false)
     }
-  }, [mainView, normalizedResourcesKindSlug])
+  }, [mainView, currentResourceKindSlug, currentResourceGroup, selectedResourceRouteMismatch])
 
   // Animation hooks for smooth mount/unmount transitions
-  const resourceDrawer = useAnimatedUnmount(!!selectedResource, 300)
+  const resourceDrawer = useAnimatedUnmount(!!routeSelectedResource, 300)
   const helmDrawer = useAnimatedUnmount(!!(mainView === 'helm' && selectedHelmRelease), 300)
   const helpOverlay = useAnimatedUnmount(showHelp, 300)
   const commandPaletteAnim = useAnimatedUnmount(showCommandPalette, 300)
   const diagnosticsOverlay = useAnimatedUnmount(showDiagnostics, 300)
 
   // Hold last valid values so drawers can animate out before data disappears
-  const lastResourceRef = useRef(selectedResource)
-  if (selectedResource) lastResourceRef.current = selectedResource
-  const drawerResource = selectedResource || lastResourceRef.current
+  const lastResourceRef = useRef(routeSelectedResource)
+  if (routeSelectedResource) lastResourceRef.current = routeSelectedResource
+  const drawerResource = routeSelectedResource || lastResourceRef.current
 
   const lastHelmReleaseRef = useRef(selectedHelmRelease)
   if (selectedHelmRelease) lastHelmReleaseRef.current = selectedHelmRelease
@@ -371,6 +389,10 @@ function AppInner() {
   // Context switching for command palette
   const switchContext = useSwitchContext()
 
+  // Refs for dropdown components to trigger them via shortcuts
+  const namespaceSwitcherRef = useRef<NamespaceSwitcherHandle>(null)
+  const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
+
   // View switching keyboard shortcuts
   const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'traffic', 'cost', 'audit']
   useRegisterShortcuts([
@@ -382,6 +404,22 @@ function AppInner() {
       scope: 'global' as const,
       handler: () => setMainView(view),
     })),
+    {
+      id: 'switch-namespace',
+      keys: 'n',
+      description: 'Switch namespace',
+      category: 'Navigation' as const,
+      scope: 'global' as const,
+      handler: () => namespaceSwitcherRef.current?.open(),
+    },
+    {
+      id: 'switch-context',
+      keys: 'c',
+      description: 'Switch context',
+      category: 'Navigation' as const,
+      scope: 'global' as const,
+      handler: () => contextSwitcherRef.current?.open(),
+    },
     {
       id: 'theme-toggle',
       keys: 't',
@@ -452,7 +490,12 @@ function AppInner() {
   const hideGroupHeader = namespaces.length === 1 && effectiveGroupingMode === 'namespace'
 
   // Fetch available namespaces
-  const { data: availableNamespaces, error: namespacesError } = useNamespaces()
+  const { data: availableNamespaces } = useNamespaces()
+
+  // Per-user view filter served by the backend. Loaded eagerly so the
+  // picker can render its current state without showing the multi-select
+  // fallback during the initial scope fetch.
+  const { data: namespaceScope } = useNamespaceScope()
 
   // Context switch state
   const { isSwitching, targetContext, progressMessage, updateProgress, endSwitch } = useContextSwitch()
@@ -623,6 +666,39 @@ function AppInner() {
   // Serialize namespaces for stable dependency tracking
   const namespacesKey = namespaces.join(',')
 
+  // The server is canonical for the per-user namespace pick. Mirror its
+  // `actives` into App.tsx state so consumer hooks (SSE, dashboard, resource
+  // lists) stay in lockstep with the picker. The dedicated URL-write effect
+  // below propagates the mirrored state to `?namespaces=`.
+  const setActiveNamespace = useSetActiveNamespace()
+  const initialBookmarkReconciledRef = useRef(false)
+  const scopeActives = useMemo(() => namespaceScope?.actives ?? [], [namespaceScope?.actives])
+  const namespaceScopeKey = useMemo(() => namespaceScope ? [...scopeActives].sort().join(',') : null, [namespaceScope, scopeActives])
+  useEffect(() => {
+    if (!namespaceScope) return
+    const sortedScope = [...scopeActives].sort()
+    const sortedState = [...namespaces].sort()
+    const sameAsState = sortedScope.length === sortedState.length && sortedScope.every((ns, i) => ns === sortedState[i])
+
+    // First-load bookmark reconciliation: if the URL had namespaces that
+    // differ from the server pick when the scope first arrives, push the
+    // URL choice to the server so shared/bookmarked deep links keep
+    // working. The ref flips on the first scope load regardless of whether
+    // the URL had namespaces — subsequent runs mirror server → state.
+    if (!initialBookmarkReconciledRef.current) {
+      initialBookmarkReconciledRef.current = true
+      if (!sameAsState && sortedState.length > 0) {
+        setActiveNamespace.mutate({ namespaces: sortedState })
+        return
+      }
+    }
+
+    if (!sameAsState) {
+      setNamespaces(scopeActives)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- namespaces and setActiveNamespace are intentionally excluded; we only react to server-side changes.
+  }, [namespaceScope, namespaceScopeKey])
+
   // Update URL query params when state changes (path is handled by setMainView)
   // Read from window.location.search (not React Router's searchParams) to preserve
   // params set by child components via window.history.replaceState (e.g., kind from ResourcesView).
@@ -663,11 +739,24 @@ function AppInner() {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- reads window.location.search, not searchParams
   }, [namespacesKey, topologyMode, groupingMode, mainView, setSearchParams])
 
-  // Sync state from URL when navigating (back/forward)
+  // Sync state from URL when navigating (back/forward). Push the URL choice
+  // to the server too so the canonical pick stays in lockstep — otherwise a
+  // back-nav would visually update but leave the next reload pulling the
+  // server's previous (forward-nav) pick.
   useEffect(() => {
     const urlNamespaces = parseNamespacesFromURL(searchParams)
 
-    if (urlNamespaces.join(',') !== namespacesKey) setNamespaces(urlNamespaces)
+    if (urlNamespaces.join(',') !== namespacesKey) {
+      setNamespaces(urlNamespaces)
+      if (namespaceScope) {
+        const sortedURL = [...urlNamespaces].sort()
+        const sortedScope = [...(namespaceScope.actives ?? [])].sort()
+        const same = sortedURL.length === sortedScope.length && sortedURL.every((ns, i) => ns === sortedScope[i])
+        if (!same) {
+          setActiveNamespace.mutate({ namespaces: urlNamespaces })
+        }
+      }
+    }
 
     // Restore helm release from URL (back navigation)
     const releaseParam = searchParams.get('release')
@@ -676,7 +765,7 @@ function AppInner() {
       if (slashIdx > 0) {
         const ns = releaseParam.slice(0, slashIdx)
         const name = releaseParam.slice(slashIdx + 1)
-        setSelectedHelmRelease({ namespace: ns, name })
+        setSelectedHelmRelease({ namespace: ns, name, storageNamespace: searchParams.get('releaseStorage') || undefined })
       }
     }
   }, [searchParams])
@@ -790,7 +879,7 @@ function AppInner() {
 
   return (
     <PortForwardProvider>
-    <div className="flex flex-col h-screen bg-theme-base min-w-[800px]">
+    <div className="relative flex flex-col h-screen bg-theme-base min-w-[800px]">
       {/* Header */}
       <header className="relative z-50 flex items-center justify-between px-4 py-2 bg-theme-base/90 backdrop-blur-sm border-b border-theme-border/50">
         {/* Left: Logo + Cluster info */}
@@ -798,7 +887,7 @@ function AppInner() {
           {navCustomization.brandSlot ?? <Logo />}
 
           <div className="flex items-center gap-2">
-            {navCustomization.contextSlot ?? <ContextSwitcher />}
+            {navCustomization.contextSlot ?? <ContextSwitcher ref={contextSwitcherRef} />}
             {/* Connection status - next to cluster name */}
             <div className="flex items-center gap-1.5 ml-1">
               <Tooltip
@@ -891,16 +980,13 @@ function AppInner() {
 
         {/* Right: Controls */}
         <div className="flex items-center gap-3 shrink-0">
-          {/* Namespace selector with search */}
-          <NamespaceSelector
-            value={namespaces}
-            onChange={setNamespaces}
-            namespaces={availableNamespaces}
-            namespacesError={namespacesError}
+          <NamespaceSwitcher
+            ref={namespaceSwitcherRef}
             disabled={mainView === 'helm'}
             disabledTooltip="Helm view always shows all namespaces"
           />
 
+
           {/* Command palette trigger */}
           <button
             onClick={() => setShowCommandPalette(true)}
@@ -1125,6 +1211,7 @@ function AppInner() {
                         namespaces={availableNamespaces}
                         onSelect={(ns) => {
                           setNamespaces([ns])
+                          setActiveNamespace.mutate({ namespaces: [ns] })
                           // Large clusters need server-side filtering — reconnect SSE with namespace
                           setForceNamespaceFilter([ns])
                         }}
@@ -1161,9 +1248,9 @@ function AppInner() {
                     selectedNodeId={selectedResource ? `${apiResourceToNodeIdPrefix(selectedResource.kind)}-${selectedResource.namespace}-${selectedResource.name}` : undefined}
                     paused={topologyPaused}
                     onTogglePause={handleTogglePause}
-                    onMaximizeNamespace={(ns) => setNamespaces([ns])}
+                    onMaximizeNamespace={(ns) => setActiveNamespace.mutate({ namespaces: [ns] })}
                     namespaceBreadcrumb={namespaces.length === 1 ? namespaces[0] : undefined}
-                    onClearNamespace={namespaces.length === 1 ? () => setNamespaces([]) : undefined}
+                    onClearNamespace={namespaces.length >= 1 ? () => setActiveNamespace.mutate({ namespaces: [] }) : undefined}
                     namespacesKey={namespaces.join(',')}
                   />
 
@@ -1192,7 +1279,7 @@ function AppInner() {
         {mainView === 'resources' && (
           <ResourcesView
             namespaces={namespaces}
-            selectedResource={selectedResource}
+            selectedResource={routeSelectedResource}
             onResourceClick={(res) => res ? navigateToResource(res) : setSelectedResource(null)}
             onResourceClickYaml={(res) => navigateToResource(res, 'yaml')}
             onKindChange={() => setSelectedResource(null)}
@@ -1211,7 +1298,10 @@ function AppInner() {
             initialTimeRange={(searchParams.get('time') as '5m' | '30m' | '1h' | '6h' | '24h' | 'all') || undefined}
             requiresNamespaceFilter={topology?.requiresNamespaceFilter && namespaces.length === 0}
             availableNamespaces={availableNamespaces}
-            onNamespaceSelect={(ns) => setNamespaces([ns])}
+            onNamespaceSelect={(ns) => {
+              setNamespaces([ns])
+              setActiveNamespace.mutate({ namespaces: [ns] })
+            }}
           />
         )}
 
@@ -1220,10 +1310,15 @@ function AppInner() {
           <HelmView
             namespace=""
             selectedRelease={selectedHelmRelease}
-            onReleaseClick={(ns, name) => {
-              setSelectedHelmRelease({ namespace: ns, name })
+            onReleaseClick={(ns, name, storageNamespace) => {
+              setSelectedHelmRelease({ namespace: ns, name, storageNamespace })
               const params = new URLSearchParams(window.location.search)
               params.set('release', `${ns}/${name}`)
+              if (storageNamespace) {
+                params.set('releaseStorage', storageNamespace)
+              } else {
+                params.delete('releaseStorage')
+              }
               setSearchParams(params, { replace: true })
             }}
           />
@@ -1305,6 +1400,7 @@ function AppInner() {
             setSelectedHelmRelease(null)
             const params = new URLSearchParams(window.location.search)
             params.delete('release')
+            params.delete('releaseStorage')
             setSearchParams(params, { replace: true })
           }}
           onNavigateToResource={(resource) => {
@@ -1360,9 +1456,14 @@ function AppInner() {
             { name },
             // Namespace filter from the previous context may not exist in the
             // new one — clear it so resource lists don't silently go empty.
+            // The server clears all per-user picks on context switch already;
+            // local state mirrors that via the namespace-scope effect.
             { onSettled: () => setNamespaces([]) },
           )}
-          onSetNamespaces={setNamespaces}
+          onSetNamespaces={(ns) => {
+            setNamespaces(ns)
+            setActiveNamespace.mutate({ namespaces: ns })
+          }}
           onToggleTheme={toggleTheme}
           onShowDiagnostics={() => setShowDiagnostics(true)}
         />

package/src/api/client.ts

@@ -298,6 +298,7 @@ export function useAudit(namespaces: string[] = []) {
     queryFn: () => fetchJSON(`/audit${params}`),
     staleTime: 30000,
     refetchInterval: 60000,
+    placeholderData: (prev) => prev,
   })
 }
 
@@ -1347,6 +1348,7 @@ export interface AvailablePort {
   protocol: string
   containerName?: string
   name?: string
+  scheme?: 'http' | 'https'
 }
 
 export function useAvailablePorts(type: 'pod' | 'service', namespace: string, name: string) {
@@ -1967,15 +1969,20 @@ function streamHelmProgress(
 
                 if (data.type === 'complete') {
                   resolve(data)
+                  return
                 } else if (data.type === 'error') {
                   reject(new Error(data.message || failureLabel))
+                  return
                 }
-              } catch {
-                // Ignore parse errors
+              } catch (err) {
+                reject(err instanceof Error ? err : new Error(`${failureLabel}: invalid progress event`))
+                return
               }
             }
           }
         }
+
+        reject(new Error(`${failureLabel}: stream ended before completion`))
       })
       .catch(reject)
   })
@@ -1986,10 +1993,13 @@ export function upgradeWithProgress(
   namespace: string,
   name: string,
   version: string,
+  repositoryName: string | undefined,
   onProgress: (event: InstallProgressEvent) => void
 ): Promise<void> {
+  const params = new URLSearchParams({ version })
+  if (repositoryName) params.set('repository', repositoryName)
   return streamHelmProgress(
-    `${getApiBase()}/helm/releases/${namespace}/${name}/upgrade-stream?version=${encodeURIComponent(version)}`,
+    `${getApiBase()}/helm/releases/${namespace}/${name}/upgrade-stream?${params.toString()}`,
     { method: 'POST' },
     onProgress,
     'Upgrade failed',
@@ -2441,6 +2451,87 @@ 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 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 }) => {
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), NAMESPACE_SWITCH_TIMEOUT)
+      try {
+        const response = await apiFetch(`${getApiBase()}/cluster/namespace`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ namespaces }),
+          signal: controller.signal,
+        })
+        clearTimeout(timeoutId)
+        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)
+        if (error instanceof Error && error.name === 'AbortError') {
+          throw new Error('Namespace switch timed out. The cluster may be unreachable.')
+        }
+        throw error
+      }
+    },
+    onSuccess: () => {
+      // The user's view filter changed; every cached query result was
+      // shaped by the previous filter, so drop and refetch.
+      queryClient.removeQueries()
+      queryClient.invalidateQueries()
+    },
+    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.
+      queryClient.invalidateQueries({ queryKey: ['namespace-scope'] })
+    },
+  })
+}
+
 // ============================================================================
 // Image Filesystem Inspection
 // ============================================================================

package/src/components/ContextSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, forwardRef } from 'react'
 import { AlertTriangle } from 'lucide-react'
 import {
   ClusterSwitcher,
@@ -16,11 +16,15 @@ interface ContextSwitcherProps {
   className?: string
 }
 
+export interface ContextSwitcherHandle {
+  open: () => void
+}
+
 interface ParsedContext extends ParsedContextName {
   context: ContextInfo
 }
 
-export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
+export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '' }, ref) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
   const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
@@ -33,13 +37,37 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
   const { tabs } = useDock()
 
   // Parse contexts and decide whether to render group headers (multi-account only).
-  const { parsedById, hasMultipleAccounts } = useMemo(() => {
-    if (!contexts) return { parsedById: new Map<string, ParsedContext>(), hasMultipleAccounts: false }
-    const parsed: ParsedContext[] = contexts.map(ctx => ({ context: ctx, ...parseContextName(ctx.name) }))
+  // hasMultipleSources gates the kubeconfig-source chip — only useful when 2+
+  // distinct kubeconfig files are in play. Single-source setups (the common
+  // case) skip the chip entirely so the dropdown stays clean.
+  const { parsedById, hasMultipleAccounts, hasMultipleSources } = useMemo(() => {
+    if (!contexts) return {
+      parsedById: new Map<string, ParsedContext>(),
+      hasMultipleAccounts: false,
+      hasMultipleSources: false,
+    }
+    // Strip the disambiguation suffix (" (<source>)" or " (<source> #N)")
+    // before parsing — qualified names won't match the GKE/EKS/AKS regexes
+    // otherwise, and the suffix is redundant with the source chip we
+    // render separately.
+    const stripSourceSuffix = (name: string, source?: string): string => {
+      if (!source) return name
+      const escaped = source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      return name.replace(new RegExp(`\\s+\\(${escaped}(?:\\s+#\\d+)?\\)$`), '')
+    }
+    const parsed: ParsedContext[] = contexts.map(ctx => ({
+      context: ctx,
+      ...parseContextName(stripSourceSuffix(ctx.name, ctx.source)),
+    }))
     const accounts = new Set(parsed.map(p => `${p.provider}:${p.account}`))
+    const sources = new Set(contexts.map(c => c.source).filter(Boolean))
     const byId = new Map<string, ParsedContext>()
     for (const p of parsed) byId.set(p.context.name, p)
-    return { parsedById: byId, hasMultipleAccounts: accounts.size > 1 }
+    return {
+      parsedById: byId,
+      hasMultipleAccounts: accounts.size > 1,
+      hasMultipleSources: sources.size > 1,
+    }
   }, [contexts])
 
   // Map parsed contexts → generic ClusterSwitcher items, sorted GKE/EKS/AKS/Other → account → name.
@@ -61,20 +89,16 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
         : hasMultipleAccounts
           ? 'Other'
           : undefined
-      // `name` is the raw context — ClusterSwitcher renders it through
-      // ClusterName, which collapses GKE/EKS/AKS shapes to the meaningful
-      // tail. `secondary` shows the original raw when we collapsed it,
-      // so users always see the full context at a glance (rather than
-      // having to hover to reveal it).
       return {
         id: p.context.name,
-        name: p.context.name,
+        name: p.raw,
         secondary: p.provider ? p.raw : undefined,
         badge: p.region || undefined,
+        sourceLabel: hasMultipleSources ? p.context.source : undefined,
         group: { key: groupKey, label: groupLabel },
       }
     })
-  }, [parsedById, hasMultipleAccounts])
+  }, [parsedById, hasMultipleAccounts, hasMultipleSources])
 
   const performSwitch = async (parsed: ParsedContext) => {
     startSwitch({
@@ -152,15 +176,24 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
     )
   }
 
-  const currentRaw = clusterInfo?.context || contexts?.find(c => c.isCurrent)?.name || 'Unknown'
-  const currentId = contexts?.find(c => c.isCurrent)?.name
+  const currentCtx = contexts?.find(c => c.isCurrent)
+  const currentId = currentCtx?.name
+  // Use parsed.raw (the source-stripped form) for the trigger so the
+  // disambiguation suffix doesn't double up with the source chip.
+  // Fall back to clusterInfo.context for the very-early window before
+  // /api/contexts has resolved.
+  const currentParsed = currentId ? parsedById.get(currentId) : undefined
+  const currentRaw = currentParsed?.raw || clusterInfo?.context || currentCtx?.name || 'Unknown'
+  const currentSourceLabel = hasMultipleSources ? currentCtx?.source || undefined : undefined
 
   return (
     <>
       <ClusterSwitcher
+        ref={ref}
         className={className}
         currentId={currentId}
         currentName={currentRaw}
+        currentSourceLabel={currentSourceLabel}
         items={items}
         onSelect={handleSelect}
         loading={switchContext.isPending}
@@ -222,4 +255,4 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
       )}
     </>
   )
-}
+})