@skyhook-io/radar-app 0.1.6 → 0.1.9

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { flushSync } from 'react-dom'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { X, Copy, Check, RefreshCw, Package, Code, History, FileText, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2 } from 'lucide-react'
@@ -12,7 +13,8 @@ import type { SelectedHelmRelease, HelmHook, ChartDependency } from '../../types
 import type { NavigateToResource } from '../../utils/navigation'
 import { formatDate } from './helm-utils'
 import { getHelmStatusColor, SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
-import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
+import { useCanHelmAct, useCloudRole } from '../../api/client'
+import { RoleGatedPanel } from './RoleGatedPanel'
 import { RevisionHistory } from './RevisionHistory'
 import { ManifestViewer } from './ManifestViewer'
 import { ValuesViewer } from './ValuesViewer'
@@ -46,7 +48,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const [showUpgradeConfirm, setShowUpgradeConfirm] = useState(false)
   const resizeStartX = useRef(0)
   const resizeStartWidth = useRef(DEFAULT_WIDTH)
-  const canHelmWrite = useCanHelmWrite()
+  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
+  // Cloud viewers can't view release manifests / values / diffs
+  // (backend gate at requireCloudRole('member')). Skip the queries
+  // when the role would 403 — saves a round-trip and avoids a
+  // transient error state under the role-gated panel.
+  const { canAtLeast } = useCloudRole()
+  const canViewSensitive = canAtLeast('member')
 
   const { data: releaseDetail, isLoading, refetch: refetchRelease } = useHelmRelease(
     release.namespace,
@@ -58,14 +66,16 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const { data: manifest, isLoading: manifestLoading } = useHelmManifest(
     release.namespace,
     release.name,
-    selectedRevision
+    selectedRevision,
+    canViewSensitive,
   )
 
   // Fetch values
   const { data: values, isLoading: valuesLoading } = useHelmValues(
     release.namespace,
     release.name,
-    showAllValues
+    showAllValues,
+    canViewSensitive,
   )
 
   // Fetch diff if comparing revisions
@@ -73,7 +83,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     release.namespace,
     release.name,
     diffRevisions?.rev1 || 0,
-    diffRevisions?.rev2 || 0
+    diffRevisions?.rev2 || 0,
+    canViewSensitive,
   )
 
   // Lazy check for upgrade availability
@@ -325,7 +336,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   'badge transition-colors', SEVERITY_BADGE.warning,
                   canHelmWrite ? 'hover:bg-amber-500/30 cursor-pointer' : 'opacity-50 cursor-not-allowed'
                 )}
-                title={canHelmWrite ? `Click to upgrade: ${upgradeInfo.currentVersion} → ${upgradeInfo.latestVersion}${upgradeInfo.repositoryName ? ` (${upgradeInfo.repositoryName})` : ''}` : 'Helm write permissions required (rbac.helm=true)'}
+                title={canHelmWrite ? `Click to upgrade: ${upgradeInfo.currentVersion} → ${upgradeInfo.latestVersion}${upgradeInfo.repositoryName ? ` (${upgradeInfo.repositoryName})` : ''}` : helmActReason}
               >
                 <ArrowUpCircle className="w-3 h-3" />
                 {upgradeInfo.latestVersion}
@@ -354,7 +365,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   ? 'text-theme-text-secondary hover:text-red-400 hover:bg-red-500/10'
                   : 'text-theme-text-disabled cursor-not-allowed'
               )}
-              title={canHelmWrite ? 'Uninstall release' : 'Helm write permissions required (rbac.helm=true)'}
+              title={canHelmWrite ? 'Uninstall release' : helmActReason}
             >
               <Trash2 className="w-4 h-4" />
             </button>
@@ -403,7 +414,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       {/* Content */}
       <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'helm-drawer-content' }}>
         {isLoading ? (
-          <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Loading...</div>
+          <PaneLoader className="h-32" />
         ) : !releaseDetail ? (
           <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Release not found</div>
         ) : (
@@ -421,26 +432,30 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               />
             )}
             {activeTab === 'manifest' && (
-              <ManifestViewer
-                manifest={manifest || ''}
-                isLoading={manifestLoading}
-                revision={selectedRevision}
-                onCopy={(text) => copyToClipboard(text, 'manifest')}
-                copied={copied === 'manifest'}
-              />
+              <RoleGatedPanel min="member" feature="release manifests">
+                <ManifestViewer
+                  manifest={manifest || ''}
+                  isLoading={manifestLoading}
+                  revision={selectedRevision}
+                  onCopy={(text) => copyToClipboard(text, 'manifest')}
+                  copied={copied === 'manifest'}
+                />
+              </RoleGatedPanel>
             )}
             {activeTab === 'values' && (
-              <ValuesViewer
-                values={values}
-                isLoading={valuesLoading}
-                showAllValues={showAllValues}
-                onToggleAllValues={setShowAllValues}
-                onCopy={(text) => copyToClipboard(text, 'values')}
-                copied={copied === 'values'}
-                namespace={release.namespace}
-                name={release.name}
-                onApplySuccess={() => refetch()}
-              />
+              <RoleGatedPanel min="member" feature="release values">
+                <ValuesViewer
+                  values={values}
+                  isLoading={valuesLoading}
+                  showAllValues={showAllValues}
+                  onToggleAllValues={setShowAllValues}
+                  onCopy={(text) => copyToClipboard(text, 'values')}
+                  copied={copied === 'values'}
+                  namespace={release.namespace}
+                  name={release.name}
+                  onApplySuccess={() => refetch()}
+                />
+              </RoleGatedPanel>
             )}
             {activeTab === 'resources' && (
               <OwnedResources
@@ -452,16 +467,18 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               <HooksTab hooks={releaseDetail.hooks || []} />
             )}
             {activeTab === 'diff' && diffRevisions && (
-              <ManifestDiffViewer
-                diff={diffData?.diff || ''}
-                isLoading={diffLoading}
-                revision1={diffRevisions.rev1}
-                revision2={diffRevisions.rev2}
-                onClose={() => {
-                  setDiffRevisions(null)
-                  setActiveTab('history')
-                }}
-              />
+              <RoleGatedPanel min="member" feature="release manifest diffs">
+                <ManifestDiffViewer
+                  diff={diffData?.diff || ''}
+                  isLoading={diffLoading}
+                  revision1={diffRevisions.rev1}
+                  revision2={diffRevisions.rev2}
+                  onClose={() => {
+                    setDiffRevisions(null)
+                    setActiveTab('history')
+                  }}
+                />
+              </RoleGatedPanel>
             )}
           </>
         )}

package/src/components/helm/HelmView.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo, useRef, useEffect, useCallback, forwardRef } from 'r
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import { useHelmReleases, useHelmBatchUpgradeInfo, isForbiddenError } from '../../api/client'
 import type { HelmRelease, SelectedHelmRelease, UpgradeInfo, ChartSource } from '../../types'
@@ -232,9 +233,7 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
             {/* Releases Table */}
             <div className="flex-1 overflow-auto">
               {isLoading ? (
-                <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-                  Loading...
-                </div>
+                <PaneLoader className="h-full" />
               ) : isForbidden ? (
                 <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary">
                   <Shield className="w-8 h-8 text-amber-400 mb-2" />

package/src/components/helm/InstallWizard.tsx

@@ -1,11 +1,12 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { X, Package, ChevronRight, ChevronLeft, Play, Loader2, AlertTriangle, CheckCircle, User, BookOpen, Link as LinkIcon, Star, BadgeCheck, Shield, Globe, Building2, Plus, Minus, Terminal } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import yaml from 'yaml'
 import { createPatch } from 'diff'
 import { useQueryClient } from '@tanstack/react-query'
 import { useChartDetail, useNamespaces, useArtifactHubChart, installChartWithProgress, type InstallProgressEvent } from '../../api/client'
-import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
+import { useCanHelmAct } from '../../api/client'
 import type { ChartSource, ChartDetail, ArtifactHubChartDetail } from '../../types'
 import { YamlEditor } from '../ui/YamlEditor'
 import { Tooltip } from '../ui/Tooltip'
@@ -64,7 +65,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
   const progressEndRef = useRef<HTMLDivElement>(null)
 
   const queryClient = useQueryClient()
-  const canHelmWrite = useCanHelmWrite()
+  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
 
   // Choose the right data based on source
   const isLocal = source === 'local'
@@ -277,10 +278,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
         {/* Content */}
         <div className="flex-1 overflow-auto p-4">
           {chartLoading ? (
-            <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
-              <Loader2 className="w-5 h-5 animate-spin mr-2" />
-              Loading chart details...
-            </div>
+            <PaneLoader label="Loading chart details…" className="h-32" />
           ) : (
             <>
               {step === 'info' && (
@@ -389,7 +387,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                     onClick={handleInstall}
                     disabled={!canInstall || isInstalling || !canHelmWrite}
                     className="flex items-center gap-2 px-4 py-2 text-sm font-medium btn-brand rounded-lg disabled:cursor-not-allowed"
-                    title={!canHelmWrite ? 'Helm write permissions required (rbac.helm=true)' : undefined}
+                    title={!canHelmWrite ? helmActReason : undefined}
                   >
                     {isInstalling ? (
                       <Loader2 className="w-4 h-4 animate-spin" />

package/src/components/helm/ManifestDiffViewer.tsx

@@ -1,4 +1,5 @@
 import { X, GitCompare } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 
 interface ManifestDiffViewerProps {
@@ -11,11 +12,7 @@ interface ManifestDiffViewerProps {
 
 export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onClose }: ManifestDiffViewerProps) {
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
-        Computing diff...
-      </div>
-    )
+    return <PaneLoader label="Computing diff…" className="h-32" />
   }
 
   if (!diff) {

package/src/components/helm/ManifestViewer.tsx

@@ -1,4 +1,5 @@
 import { Copy, Check, Code } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { CodeViewer } from '../ui/CodeViewer'
 
 interface ManifestViewerProps {
@@ -11,11 +12,7 @@ interface ManifestViewerProps {
 
 export function ManifestViewer({ manifest, isLoading, revision, onCopy, copied }: ManifestViewerProps) {
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
-        Loading manifest...
-      </div>
-    )
+    return <PaneLoader label="Loading manifest…" className="h-32" />
   }
 
   if (!manifest) {

package/src/components/helm/RoleGatedPanel.tsx

@@ -0,0 +1,47 @@
+import { Lock } from 'lucide-react'
+import { useCloudRole, type CloudRole } from '../../api/client'
+
+interface RoleGatedPanelProps {
+  /** Minimum Cloud tier required to view the children. */
+  min: CloudRole
+  /** Human-readable name of the gated content, e.g. "release manifests". */
+  feature: string
+  children: React.ReactNode
+}
+
+/**
+ * RoleGatedPanel wraps tab-content surfaces that require a Cloud role
+ * (member+) to view. Renders the children when the gate passes; renders
+ * an explanatory empty state when the caller's role is insufficient.
+ *
+ * Why a per-tab gate rather than hiding tabs from the list: viewers
+ * should learn what the platform offers and what their tier can't do,
+ * not have features silently vanish. This mirrors how the action
+ * buttons (Uninstall, Upgrade, etc.) are rendered visible-but-disabled
+ * with a role-aware tooltip.
+ *
+ * Bypasses for non-Cloud users (OSS, OIDC, etc.) — `canAtLeast` returns
+ * true when no Cloud role is present. The backend gate has the same
+ * shape, so the SPA stays in lockstep.
+ */
+export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps) {
+  const { role, canAtLeast } = useCloudRole()
+  if (canAtLeast(min)) {
+    return <>{children}</>
+  }
+  return (
+    <div className="flex flex-col items-center justify-center h-full py-12 px-6 text-center">
+      <div className="rounded-full bg-theme-surface p-3 mb-3">
+        <Lock className="w-5 h-5 text-theme-text-tertiary" aria-hidden />
+      </div>
+      <div className="text-sm font-medium text-theme-text-primary">
+        Your role can't view {feature}
+      </div>
+      <div className="mt-1 max-w-md text-xs text-theme-text-secondary">
+        You're signed in as <span className="font-mono text-theme-text-primary">{role ?? 'viewer'}</span>.
+        This view requires <span className="font-mono text-theme-text-primary">{min}</span> or higher.
+        Ask a {min} or owner if you need access.
+      </div>
+    </div>
+  )
+}

package/src/components/helm/ValuesViewer.tsx

@@ -1,12 +1,13 @@
 import { useState, useCallback } from 'react'
 import { Copy, Check, Settings, Pencil, X, Eye, Play, Loader2 } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import yaml from 'yaml'
 import type { HelmValues, ValuesPreviewResponse } from '../../types'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
 import { useHelmPreviewValues, useHelmApplyValues } from '../../api/client'
-import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
+import { useCanHelmAct } from '../../api/client'
 import { ValuesDiffPreview } from './ValuesDiffPreview'
 
 interface ValuesViewerProps {
@@ -41,7 +42,7 @@ export function ValuesViewer({
 
   const previewMutation = useHelmPreviewValues()
   const applyMutation = useHelmApplyValues()
-  const canHelmWrite = useCanHelmWrite()
+  const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
 
   const canEdit = Boolean(namespace && name) && canHelmWrite
 
@@ -138,11 +139,7 @@ export function ValuesViewer({
   }, [previewData, namespace, name, applyMutation, handleCancelEdit, onApplySuccess])
 
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
-        Loading values...
-      </div>
-    )
+    return <PaneLoader label="Loading values…" className="h-32" />
   }
 
   if (isEmpty && !isEditing) {
@@ -234,7 +231,7 @@ export function ValuesViewer({
                 onClick={handleApply}
                 disabled={!!yamlError || applyMutation.isPending || !canHelmWrite}
                 className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded disabled:cursor-not-allowed"
-                title={!canHelmWrite ? 'Helm write permissions required (rbac.helm=true)' : undefined}
+                title={!canHelmWrite ? helmActReason : undefined}
               >
                 {applyMutation.isPending ? (
                   <Loader2 className="w-3.5 h-3.5 animate-spin" />

package/src/components/home/HelmSummary.tsx

@@ -82,6 +82,18 @@ export function HelmSummary({ data, onNavigate }: HelmSummaryProps) {
             <span className="text-xs font-medium text-theme-text-secondary">Access Restricted</span>
             <span className="text-[11px] mt-1">Insufficient permissions to list Helm releases</span>
           </div>
+        ) : data.error ? (
+          <div className="flex flex-col items-center justify-center h-full py-4 text-theme-text-tertiary">
+            <Shield className="w-8 h-8 text-amber-400 mb-2" />
+            <span className="text-xs font-medium text-theme-text-secondary">
+              {data.errorCode === 'unconfigured' ? 'Helm not configured' : 'Helm unavailable'}
+            </span>
+            <span className="text-[11px] mt-1 text-center px-2 truncate max-w-full" title={data.error}>
+              {data.errorCode === 'unconfigured'
+                ? 'Set rbac.helm=true in the Radar Helm chart values.'
+                : data.error}
+            </span>
+          </div>
         ) : !data.releases || data.releases.length === 0 ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
             No Helm releases found

package/src/components/home/HomeView.tsx

@@ -9,9 +9,9 @@ import { TrafficSummary } from './TrafficSummary'
 import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
-import { AuditCard, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
+import { AuditCard, PaneLoader, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
 import { ClusterHealthCard } from './ClusterHealthCard'
-import { AlertTriangle, Loader2, Shield } from 'lucide-react'
+import { AlertTriangle, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface HomeViewProps {
@@ -29,14 +29,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
   const { data: helmData } = useDashboardHelm(namespaces)
 
   if (isLoading) {
-    return (
-      <div className="flex-1 flex items-center justify-center">
-        <div className="flex flex-col items-center gap-3">
-          <Loader2 className="w-6 h-6 animate-spin text-theme-text-tertiary" />
-          <span className="text-sm text-theme-text-tertiary">Loading dashboard...</span>
-        </div>
-      </div>
-    )
+    return <PaneLoader label="Loading dashboard…" className="flex-1" />
   }
 
   if (error || !data) {

package/src/components/resources/ImageFilesystemModal.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { X, Folder, File, Link2, ChevronRight, ChevronDown, AlertTriangle, Loader2, Search, Download, HardDrive, Shield, ShieldCheck, Terminal, Copy, Check, RefreshCw } from 'lucide-react'
+import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
 import { clsx } from 'clsx'
 import { useImageMetadata, ApiError } from '../../api/client'
 import type { FileNode, ImageFilesystem } from '../../types'
@@ -177,13 +178,13 @@ export function ImageFilesystemModal({
         <div className="flex-1 overflow-y-auto p-4">
           {/* Loading state */}
           {isLoading && (
-            <div className="flex flex-col items-center justify-center h-64">
-              <Loader2 className="w-8 h-8 text-blue-400 animate-spin" />
-              <span className="mt-3 text-theme-text-secondary">
-                {isLoadingMetadata ? 'Checking image...' : 'Downloading image layers...'}
+            <div className="flex flex-col items-center justify-center gap-3 h-64">
+              <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+              <span className="text-sm text-theme-text-secondary">
+                {isLoadingMetadata ? 'Checking image…' : 'Downloading image layers…'}
               </span>
               {isLoadingFilesystem && metadata && (
-                <span className="mt-1 text-xs text-theme-text-tertiary">
+                <span className="text-xs text-theme-text-tertiary">
                   This may take a moment for large images
                 </span>
               )}

package/src/components/resources/PodFilesystemModal.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { X, File, Link2, ChevronRight, AlertTriangle, Loader2, Search, Download, FolderOpen } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import type { FileNode } from '../../types'
 import { formatBytes } from '../../utils/format'
@@ -204,12 +205,7 @@ export function PodFilesystemModal({
         {/* Content */}
         <div className="flex-1 overflow-y-auto p-4">
           {/* Loading */}
-          {isLoading && (
-            <div className="flex flex-col items-center justify-center h-64">
-              <Loader2 className="w-8 h-8 text-blue-400 animate-spin" />
-              <span className="mt-3 text-theme-text-secondary">Loading files...</span>
-            </div>
-          )}
+          {isLoading && <PaneLoader label="Loading files…" className="h-64" />}
 
           {/* Error */}
           {error && !isLoading && (

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -27,7 +27,7 @@ import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural } from '../../utils/navigation'
-import { pluralize } from '@skyhook-io/k8s-ui'
+import { PaneLoader, pluralize } from '@skyhook-io/k8s-ui'
 import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../../types'
 import { DiffViewer } from './DiffViewer'
 import { getOperationColor, getHealthBadgeColor, getEventTypeColor } from '../../utils/badge-colors'
@@ -436,12 +436,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   }, [])
 
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-full w-full text-theme-text-tertiary">
-        <RefreshCw className="w-5 h-5 animate-spin mr-2" />
-        Loading timeline...
-      </div>
-    )
+    return <PaneLoader label="Loading timeline…" className="h-full w-full" />
   }
 
   // Compute empty state info (but don't early return - we need the toolbar visible)

package/src/components/traffic/TrafficView.tsx

@@ -11,7 +11,7 @@ import { Loader2, RefreshCw, Filter, Plug, ChevronDown, List, Activity, AlertTri
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
-import { EmptyState } from '@skyhook-io/k8s-ui'
+import { EmptyState, PaneLoader } from '@skyhook-io/k8s-ui'
 
 // Addon types for filtering
 export type AddonMode = 'show' | 'group' | 'hide'
@@ -1136,12 +1136,10 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
           })()}
 
           {isConnecting || (flowsFetching && finalFlows.length === 0) ? (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="flex items-center gap-2 text-theme-text-secondary">
-                <Loader2 className="h-5 w-5 animate-spin" />
-                <span>{isConnecting ? 'Connecting to traffic source...' : 'Loading traffic data...'}</span>
-              </div>
-            </div>
+            <PaneLoader
+              label={isConnecting ? 'Connecting to traffic source…' : 'Loading traffic data…'}
+              className="absolute inset-0"
+            />
           ) : finalFlows.length > 0 ? (
             <TrafficGraph
               flows={finalFlows}

package/src/components/traffic/TrafficWizard.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react'
 import type { TrafficSourcesResponse, TrafficWizardState } from '../../types'
-import { Loader2, CheckCircle2, XCircle, AlertTriangle, Copy, ExternalLink, ArrowRight, ArrowLeft, Package } from 'lucide-react'
+import { CheckCircle2, XCircle, AlertTriangle, Copy, ExternalLink, ArrowRight, ArrowLeft, Package } from 'lucide-react'
+import { PaneLoader } from '@skyhook-io/k8s-ui'
+import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
 import { InstallWizard } from '../helm/InstallWizard'
 
 interface TrafficWizardProps {
@@ -88,14 +90,7 @@ export function TrafficWizard({
 
   // Detecting state
   if (state === 'detecting' || sourcesLoading) {
-    return (
-      <div className="flex items-center justify-center h-full w-full">
-        <div className="text-center space-y-4">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-400 mx-auto" />
-          <p className="text-theme-text-secondary">Detecting traffic sources...</p>
-        </div>
-      </div>
-    )
+    return <PaneLoader label="Detecting traffic sources…" className="h-full w-full" />
   }
 
   // Checking state (polling for newly enabled source)
@@ -104,9 +99,9 @@ export function TrafficWizard({
       <>
         <div className="flex items-center justify-center h-full w-full">
           <div className="max-w-md w-full p-6 space-y-6">
-            <div className="text-center space-y-2">
-              <Loader2 className="h-8 w-8 animate-spin text-blue-400 mx-auto" />
-              <h2 className="text-lg font-medium text-theme-text-primary">Waiting for traffic source...</h2>
+            <div className="flex flex-col items-center gap-3">
+              <img src={radarLoadingIcon} alt="" aria-hidden className="h-11 w-11" />
+              <h2 className="text-lg font-medium text-theme-text-primary">Waiting for traffic source…</h2>
               <p className="text-sm text-theme-text-secondary">
                 Checking for availability
               </p>

package/src/index.ts

@@ -16,3 +16,9 @@ export {
 } from './api/config';
 export type { NavCustomization } from './context/NavCustomization';
 export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
+
+// Shared cluster-switcher primitive — re-exported from @skyhook-io/k8s-ui so
+// embedders (Radar Hub) can render a switcher visually identical to OSS Radar's
+// kubeconfig ContextSwitcher without taking a direct dep on k8s-ui internals.
+export { ClusterSwitcher } from '@skyhook-io/k8s-ui';
+export type { ClusterSwitcherProps, ClusterSwitcherItem } from '@skyhook-io/k8s-ui';