@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/ConnectionErrorView.tsx

@@ -1,9 +1,11 @@
-import { XCircle, RefreshCw, Loader2, Copy, Check, TerminalSquare } from 'lucide-react'
-import { useState } from 'react'
+import { ServerOff, RefreshCw, Loader2, Copy, Check, TerminalSquare, ChevronRight } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import type { ConnectionState } from '../context/ConnectionContext'
 import { ContextSwitcher } from './ContextSwitcher'
 import { parseContextName } from '../utils/context-name'
 import { useOpenLocalTerminal, ClusterName } from '@skyhook-io/k8s-ui'
+import { useAuthMe } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
 
 interface ConnectionErrorViewProps {
   connection: ConnectionState
@@ -27,8 +29,8 @@ function getAuthHints(context: string): AuthHints {
     case 'GKE': {
       const result: AuthHints = {
         title: 'GKE Authentication Failed',
-        hints: ['Your Google Cloud credentials have expired.'],
-        authCommand: { label: 'Re-authenticate with Google Cloud:', command: 'gcloud auth login' },
+        hints: ['Radar could not get Google Cloud credentials for this context.'],
+        authCommand: { label: 'Refresh Google Cloud credentials:', command: 'gcloud auth login' },
       }
       if (parsed.region && parsed.account) {
         const isZone = /^[a-z]+-[a-z]+\d+-[a-z]$/.test(parsed.region)
@@ -43,8 +45,11 @@ function getAuthHints(context: string): AuthHints {
     case 'EKS': {
       const result: AuthHints = {
         title: 'EKS Authentication Failed',
-        hints: ['Your AWS credentials have expired.'],
-        authCommand: { label: 'Re-authenticate with AWS:', command: 'aws sso login' },
+        hints: [
+          'Radar could not get AWS credentials for this context.',
+          'For AWS SSO contexts, the SSO session may need login.',
+        ],
+        authCommand: { label: 'If this context uses AWS SSO, refresh credentials:', command: 'aws sso login' },
       }
       if (parsed.region) {
         result.fallbackCommand = {
@@ -57,21 +62,71 @@ function getAuthHints(context: string): AuthHints {
     case 'AKS':
       return {
         title: 'AKS Authentication Failed',
-        hints: ['Your Azure credentials have expired.'],
-        authCommand: { label: 'Re-authenticate with Azure:', command: 'az login' },
+        hints: ['Radar could not get Azure credentials for this context.'],
+        authCommand: { label: 'Refresh Azure credentials:', command: 'az login' },
         fallbackCommand: { label: 'If that doesn\'t work, refresh cluster credentials:', command: 'az aks get-credentials --name <cluster> --resource-group <rg>' },
       }
     default:
       return {
         title: 'Authentication Failed',
         hints: [
-          'Your credentials may have expired',
+          'Radar could not get Kubernetes credentials for this context',
           'Re-authenticate with your cloud provider and try again',
         ],
       }
   }
 }
 
+function getTimeoutHints(context: string): AuthHints | null {
+  const parsed = parseContextName(context)
+  const baseHints = [
+    'The Kubernetes API did not respond before the deadline.',
+    'Check VPN, firewall rules, and whether the cluster endpoint is reachable.',
+  ]
+
+  switch (parsed.provider) {
+    case 'GKE': {
+      const result: AuthHints = {
+        title: 'Connection Timed Out',
+        hints: [...baseHints, 'If the endpoint is reachable, Google Cloud credentials may need refresh.'],
+        authCommand: { label: 'If network access looks healthy, refresh Google Cloud credentials:', command: 'gcloud auth login' },
+      }
+      if (parsed.region && parsed.account) {
+        const isZone = /^[a-z]+-[a-z]+\d+-[a-z]$/.test(parsed.region)
+        const flag = isZone ? '--zone' : '--region'
+        result.fallbackCommand = {
+          label: 'If that does not work, refresh cluster credentials:',
+          command: `gcloud container clusters get-credentials ${parsed.clusterName} ${flag} ${parsed.region} --project ${parsed.account}`,
+        }
+      }
+      return result
+    }
+    case 'EKS': {
+      const result: AuthHints = {
+        title: 'Connection Timed Out',
+        hints: [...baseHints, 'If the endpoint is reachable, AWS credentials or SSO may need refresh.'],
+        authCommand: { label: 'If this context uses AWS SSO and network access looks healthy, refresh credentials:', command: 'aws sso login' },
+      }
+      if (parsed.region) {
+        result.fallbackCommand = {
+          label: 'If that does not work, refresh cluster credentials:',
+          command: `aws eks update-kubeconfig --name ${parsed.clusterName} --region ${parsed.region}`,
+        }
+      }
+      return result
+    }
+    case 'AKS':
+      return {
+        title: 'Connection Timed Out',
+        hints: [...baseHints, 'If the endpoint is reachable, Azure credentials may need refresh.'],
+        authCommand: { label: 'If network access looks healthy, refresh Azure credentials:', command: 'az login' },
+        fallbackCommand: { label: 'If that does not work, refresh cluster credentials:', command: 'az aks get-credentials --name <cluster> --resource-group <rg>' },
+      }
+    default:
+      return null
+  }
+}
+
 const errorHints: Record<string, { title: string; hints: string[] }> = {
   config: {
     title: 'No Kubeconfig Found',
@@ -99,6 +154,14 @@ const errorHints: Record<string, { title: string; hints: string[] }> = {
       'Confirm the cluster is running',
     ],
   },
+  tls: {
+    title: 'Certificate Error',
+    hints: [
+      'Radar reached the Kubernetes API, but could not verify its TLS certificate',
+      'Check the kubeconfig cluster server hostname and certificate-authority settings',
+      'If this cluster intentionally uses a private CA, refresh the kubeconfig for this context',
+    ],
+  },
   timeout: {
     title: 'Connection Timed Out',
     hints: [
@@ -120,6 +183,7 @@ const errorHints: Record<string, { title: string; hints: string[] }> = {
 
 function CopyableCommand({ command, onRunInTerminal }: { command: string; onRunInTerminal?: (command: string) => void }) {
   const [copied, setCopied] = useState(false)
+  const commandParts = command.split(/(\s+)/)
 
   const handleCopy = () => {
     navigator.clipboard.writeText(command).then(() => {
@@ -132,29 +196,37 @@ function CopyableCommand({ command, onRunInTerminal }: { command: string; onRunI
 
   return (
     <div className="mt-2 flex items-center gap-2 bg-theme-elevated border border-theme-border rounded-md px-3 py-2 group">
-      <code className="text-xs font-mono text-theme-text-primary flex-1 select-all break-all">
-        {command}
+      <code className="text-xs font-mono text-theme-text-primary flex-1 min-w-0 select-all whitespace-pre-wrap break-normal">
+        {commandParts.map((part, index) => (
+          /\s+/.test(part) ? part : <span key={index} className="inline-block whitespace-nowrap">{part}</span>
+        ))}
       </code>
       {onRunInTerminal && (
+        <Tooltip content="Run in terminal" wrapperClassName="shrink-0">
+          <button
+            type="button"
+            onClick={() => onRunInTerminal(command)}
+            aria-label="Run command in terminal"
+            className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+          >
+            <TerminalSquare className="w-3.5 h-3.5" />
+          </button>
+        </Tooltip>
+      )}
+      <Tooltip content="Copy to clipboard" wrapperClassName="shrink-0">
         <button
-          onClick={() => onRunInTerminal(command)}
+          type="button"
+          onClick={handleCopy}
+          aria-label="Copy command to clipboard"
           className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-          title="Run in terminal"
         >
-          <TerminalSquare className="w-3.5 h-3.5" />
+          {copied ? (
+            <Check className="w-3.5 h-3.5 text-green-400" />
+          ) : (
+            <Copy className="w-3.5 h-3.5" />
+          )}
         </button>
-      )}
-      <button
-        onClick={handleCopy}
-        className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-        title="Copy to clipboard"
-      >
-        {copied ? (
-          <Check className="w-3.5 h-3.5 text-green-400" />
-        ) : (
-          <Copy className="w-3.5 h-3.5" />
-        )}
-      </button>
+      </Tooltip>
     </div>
   )
 }
@@ -162,17 +234,36 @@ function CopyableCommand({ command, onRunInTerminal }: { command: string; onRunI
 export function ConnectionErrorView({ connection, onRetry, isRetrying }: ConnectionErrorViewProps) {
   // For auth errors, generate context-aware hints with a specific re-auth command
   const isAuth = connection.errorType === 'auth'
-  const authInfo = isAuth ? getAuthHints(connection.context || '') : null
-  const errorInfo = authInfo || errorHints[connection.errorType || 'unknown'] || errorHints.unknown
+  const isTimeout = connection.errorType === 'timeout'
+  const commandInfo = isAuth
+    ? getAuthHints(connection.context || '')
+    : isTimeout
+      ? getTimeoutHints(connection.context || '')
+      : null
+  const errorInfo = commandInfo || errorHints[connection.errorType || 'unknown'] || errorHints.unknown
   const openLocalTerminal = useOpenLocalTerminal()
+  const { data: authMe } = useAuthMe()
+  const rawErrorDefaultOpen = !connection.errorType || connection.errorType === 'unknown'
+  const [showRawError, setShowRawError] = useState(rawErrorDefaultOpen)
 
-  // Build a command that auto-retries connection after successful auth
+  useEffect(() => {
+    setShowRawError(rawErrorDefaultOpen)
+  }, [connection.error, rawErrorDefaultOpen])
+
+  // Auto-retry after successful auth. The terminal shell runs on the server
+  // host, so the auth command itself fixes the server's credentials in every
+  // mode — but the chained retry curl carries no session cookie, so it 401s
+  // once /api/connection is auth-gated. Only chain it when auth is *known*
+  // disabled (authMe still loading → don't chain a doomed call).
   const retryCmd = `curl -s -X POST http://${window.location.host}/api/connection/retry > /dev/null`
 
   const handleAuthInTerminal = () => {
-    if (!authInfo?.authCommand) return
+    if (!commandInfo?.authCommand) return
+    const cmd = authMe?.authEnabled === false
+      ? `${commandInfo.authCommand.command} && ${retryCmd}`
+      : commandInfo.authCommand.command
     openLocalTerminal({
-      initialCommand: `${authInfo.authCommand.command} && ${retryCmd}`,
+      initialCommand: cmd,
       title: 'Auth',
     })
   }
@@ -182,32 +273,34 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
   }
 
   return (
-    <div className="flex-1 flex items-start justify-center pt-16 px-8">
-      <div className="max-w-lg w-full">
+    <div className="flex-1 flex items-start justify-center pt-12 px-8">
+      <div className="max-w-xl w-full">
         <div className="flex flex-col items-center text-center">
-          <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-6">
-            <XCircle className="w-10 h-10 text-red-400" />
+          <div className="w-14 h-14 rounded-full bg-red-500/10 flex items-center justify-center mb-5">
+            <ServerOff className="w-8 h-8 text-red-400" />
           </div>
 
           <h2 className="text-xl font-semibold text-theme-text-primary mb-2">
             {connection.errorType === 'config' ? 'No Cluster Configuration' : 'Cannot Connect to Cluster'}
           </h2>
 
-          <p className="text-sm text-theme-text-secondary mb-1 inline-flex items-center gap-1.5">
-            Context: {connection.context ? (
-              <ClusterName name={connection.context} />
-            ) : (
-              <span className="font-mono text-theme-text-primary">(none)</span>
-            )}
-          </p>
-
-          {connection.clusterName && (
-            <p className="text-sm text-theme-text-secondary mb-4">
-              Cluster: <span className="font-mono text-theme-text-primary">{connection.clusterName}</span>
+          <div className="mb-6 space-y-1">
+            <p className="text-sm text-theme-text-secondary inline-flex items-center gap-1.5">
+              Context: {connection.context ? (
+                <ClusterName name={connection.context} />
+              ) : (
+                <span className="inline-code">(none)</span>
+              )}
             </p>
-          )}
 
-          <div className="w-full bg-theme-surface border border-theme-border rounded-lg p-4 mb-6 text-left">
+            {connection.clusterName && (
+              <p className="text-sm text-theme-text-secondary">
+                Cluster: <span className="inline-code">{connection.clusterName}</span>
+              </p>
+            )}
+          </div>
+
+          <div className="w-full bg-theme-surface border border-theme-border rounded-lg p-4 mb-5 text-left">
             <h3 className="text-sm font-medium text-theme-text-primary mb-2">
               {errorInfo.title}
             </h3>
@@ -219,35 +312,52 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
                 </li>
               ))}
             </ul>
-            {authInfo?.authCommand && (
+            {commandInfo?.authCommand && (
               <div className="mt-3">
-                <p className="text-xs text-theme-text-tertiary">{authInfo.authCommand.label}</p>
-                <CopyableCommand command={authInfo.authCommand.command} onRunInTerminal={handleRunInTerminal} />
-                <button
-                  onClick={handleAuthInTerminal}
-                  className="mt-3 w-full inline-flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium btn-brand rounded-md"
-                >
-                  <TerminalSquare className="w-3.5 h-3.5" />
-                  Authenticate in terminal
-                </button>
+                <p className="text-xs text-theme-text-tertiary">{commandInfo.authCommand.label}</p>
+                <CopyableCommand command={commandInfo.authCommand.command} onRunInTerminal={handleRunInTerminal} />
+                {isAuth && (
+                  <button
+                    onClick={handleAuthInTerminal}
+                    className="mt-3 w-full inline-flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium btn-brand rounded-md"
+                  >
+                    <TerminalSquare className="w-3.5 h-3.5" />
+                    Authenticate in terminal
+                  </button>
+                )}
               </div>
             )}
-            {authInfo?.fallbackCommand && (
+            {commandInfo?.fallbackCommand && (
               <div className="mt-4 pt-3 border-t border-theme-border/50">
-                <p className="text-xs text-theme-text-tertiary">{authInfo.fallbackCommand.label}</p>
-                <CopyableCommand command={authInfo.fallbackCommand.command} onRunInTerminal={handleRunInTerminal} />
+                <p className="text-xs text-theme-text-tertiary">{commandInfo.fallbackCommand.label}</p>
+                <CopyableCommand command={commandInfo.fallbackCommand.command} onRunInTerminal={handleRunInTerminal} />
+              </div>
+            )}
+            {connection.error && (
+              <div className="mt-4 pt-3 border-t border-theme-border/50">
+                <button
+                  type="button"
+                  aria-expanded={showRawError}
+                  aria-controls="connection-raw-error"
+                  onClick={() => setShowRawError((open) => !open)}
+                  className="flex items-center gap-1 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+                >
+                  <ChevronRight className={`h-3.5 w-3.5 transition-transform duration-200 ${showRawError ? 'rotate-90' : ''}`} />
+                  Raw error
+                </button>
+                <div className={`issue-details-motion ${showRawError ? 'issue-details-motion-open' : ''}`}>
+                  <div className="overflow-hidden">
+                    <div id="connection-raw-error" className="mt-2 bg-theme-elevated border border-theme-border rounded-md p-3 overflow-auto max-h-32">
+                      <code className="text-xs text-theme-text-tertiary font-mono whitespace-pre-wrap break-words">
+                        {connection.error}
+                      </code>
+                    </div>
+                  </div>
+                </div>
               </div>
             )}
           </div>
 
-          {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">
-                {connection.error}
-              </code>
-            </div>
-          )}
-
           <div className="flex items-center gap-5">
             <button
               onClick={onRetry}
@@ -267,8 +377,14 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
               )}
             </button>
 
-            {connection.errorType !== 'config' && <ContextSwitcher />}
+            {connection.errorType !== 'config' && <ContextSwitcher triggerName="Switch context" />}
           </div>
+
+          {isAuth && (
+            <p className="mt-4 text-xs text-theme-text-tertiary">
+              Radar will keep retrying after credentials are refreshed.
+            </p>
+          )}
         </div>
       </div>
     </div>

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,
@@ -14,13 +14,25 @@ import { parseContextName, type ParsedContextName } from '../utils/context-name'
 
 interface ContextSwitcherProps {
   className?: string
+  variant?: 'chip' | 'segment'
+  label?: string
+  triggerName?: string
+}
+
+export interface ContextSwitcherHandle {
+  open: () => void
 }
 
 interface ParsedContext extends ParsedContextName {
   context: ContextInfo
 }
 
-export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
+function shouldSuppressSwitchErrorToast(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : ''
+  return message.includes('cluster connection failed:')
+}
+
+export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '', variant, label, triggerName }, ref) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
   const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
@@ -33,13 +45,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 +97,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({
@@ -91,8 +123,10 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
       endSwitch()
       // Backend may not transition to StateDisconnected on client-side errors
       // (network, timeout) — without this toast the user gets no feedback.
-      const message = error instanceof Error ? error.message : 'Unknown error'
-      showError('Failed to switch context', message)
+      if (!shouldSuppressSwitchErrorToast(error)) {
+        const message = error instanceof Error ? error.message : 'Unknown error'
+        showError('Failed to switch context', message)
+      }
     }
   }
 
@@ -152,15 +186,26 @@ 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 = triggerName || currentParsed?.raw || clusterInfo?.context || currentCtx?.name || 'Unknown'
+  const currentSourceLabel = triggerName ? undefined : hasMultipleSources ? currentCtx?.source || undefined : undefined
 
   return (
     <>
       <ClusterSwitcher
+        ref={ref}
         className={className}
+        variant={variant}
+        label={label}
         currentId={currentId}
         currentName={currentRaw}
+        currentSourceLabel={currentSourceLabel}
         items={items}
         onSelect={handleSelect}
         loading={switchContext.isPending}
@@ -222,4 +267,4 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
       )}
     </>
   )
-}
+})

package/src/components/DebugOverlay.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Bug, X, ChevronDown, ChevronUp } from 'lucide-react'
 import { useRuntimeStats } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
 
 function formatUptime(seconds: number): string {
   if (seconds < 60) return `${seconds}s`
@@ -17,13 +18,14 @@ export function DebugOverlay() {
 
   if (!visible) {
     return (
+      <Tooltip content="Show debug stats" position="left" wrapperClassName="fixed bottom-3 right-3 z-50">
       <button
         onClick={() => setVisible(true)}
-        className="fixed bottom-3 right-3 z-50 p-2 bg-theme-surface/90 border border-theme-border rounded-lg text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-        title="Show debug stats"
+        className="p-2 bg-theme-surface/90 border border-theme-border rounded-lg text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
       >
         <Bug className="w-4 h-4" />
       </button>
+      </Tooltip>
     )
   }
 
@@ -86,7 +88,7 @@ export function DebugOverlay() {
             )}
           </>
         ) : (
-          <span className="text-theme-text-tertiary">Loading...</span>
+          <span className="text-theme-text-tertiary">Loading…</span>
         )}
       </div>
     </div>

package/src/components/NamespaceSwitcher.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react'
+import { NamespacePicker, type NamespacePickerHandle } from '@skyhook-io/k8s-ui'
+import { useNamespaceScope, useSetActiveNamespace } from '../api/client'
+
+export type NamespaceSwitcherHandle = NamespacePickerHandle
+
+interface NamespaceSwitcherProps {
+  className?: string
+  disabled?: boolean
+  disabledTooltip?: string
+  variant?: 'chip' | 'segment'
+  label?: string
+}
+
+/**
+ * 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, disabledTooltip, variant, label },
+  ref,
+) {
+  const { data: scope, isLoading } = useNamespaceScope()
+  const setActive = useSetActiveNamespace()
+
+  return (
+    <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}
+    />
+  )
+})