@skyhook-io/radar-app 1.13.5 → 1.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.13.5",
+  "version": "1.14.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",
@@ -29,7 +29,7 @@
     "lint": "eslint src && node scripts/check-no-native-title.mjs"
   },
   "dependencies": {
-    "@fontsource-variable/dm-sans": "^5.2.8",
+    "@fontsource-variable/dm-sans": "^5.3.0",
     "@fontsource/dm-mono": "^5.3.0",
     "@monaco-editor/react": "^4.7.0",
     "diff": "^9.0.0",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.14.2",
+    "@skyhook-io/k8s-ui": ">=1.15.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -60,9 +60,9 @@
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.102.8",
     "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
     "@xyflow/react": "^12.11.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
@@ -73,13 +73,13 @@
     "lucide-react": "^1.37.0",
     "postcss": "^8.5.28",
     "prettier": "^3.9.5",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "react-router-dom": "^7.18.3",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.67.0",
+    "typescript-eslint": "^8.70.0",
     "vite": "^8.2.2"
   },
   "sideEffects": [

package/src/App.tsx

@@ -30,7 +30,7 @@ import { ApplicationsView } from './components/applications/ApplicationsView'
 import { HelmReleaseDrawer } from './components/helm/HelmReleaseDrawer'
 import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './components/portforward/PortForwardManager'
 import { DockProvider, BottomDock, useDock, useDockReservedHeight, useOpenLocalTerminal } from './components/dock'
-import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
+import { DURATION_DOCK, overlayExitMs } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
 import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { CloudFunnelButton } from './components/CloudFunnelButton'
@@ -43,6 +43,7 @@ import { useMediaQuery } from './hooks/useMediaQuery'
 import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitchContext'
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
 import { ConnectionErrorView } from './components/ConnectionErrorView'
+import { SyncProgressPanel } from './components/SyncProgressPanel'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
@@ -53,6 +54,7 @@ import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
 import { debugNamespaceLog, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe, useAudit } from './api/client'
 import { buildAuditSeverityMap } from './utils/auditBadges'
+import { isInNamespaceScope, scopeNodesToNamespaces } from './utils/topology-namespace'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode, stripBasename } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts, useSuppressBaseShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
@@ -678,9 +680,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   // Animation hooks for smooth mount/unmount transitions
   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)
+  // Dialog-kind overlays wait their exit duration (shorter than the entrance);
+  // drawers keep the symmetric slide.
+  const helpOverlay = useAnimatedUnmount(showHelp, overlayExitMs('dialog'))
+  const commandPaletteAnim = useAnimatedUnmount(showCommandPalette, overlayExitMs('dialog'))
+  const diagnosticsOverlay = useAnimatedUnmount(showDiagnostics, overlayExitMs('dialog'))
 
   // Hold last valid values so drawers can animate out before data disappears
   const lastResourceRef = useRef(routeSelectedResource)
@@ -992,6 +996,15 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const contentReady = !isSwitching && !authMePending &&
     !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connected'
 
+  // Progressive shell during the initial informer sync: once the server
+  // publishes per-kind sync progress, render the app instead of the splash.
+  // Resource views serve kinds as they become ready; everything else shows
+  // the sync progress panel until 'connected'.
+  const shellDuringSync = !isSwitching && !authMePending &&
+    !(authMe?.authEnabled && !authMe?.username) &&
+    connection.state === 'connecting' && !!connection.syncStatus?.kinds?.length
+  const viewsSyncGated = shellDuringSync && mainView !== 'resources'
+
   const { clusterLoadState, showHomeClusterLoadFallback, clusterLoadInitial } = useClusterLoadState({
     namespaces,
     mainView,
@@ -1245,16 +1258,22 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const clusterConnectionState = connection.state
   const clusterConnected = clusterConnectionState === 'connected'
   const liveUpdatesDisconnected = clusterConnected && !eventStreamConnected && !eventStreamConnecting
+  // During the progressive shell, the header label carries the global sync
+  // progress — the one place that explains why some views are open and
+  // others still loading.
+  const syncProgressLabel = connection.syncStatus
+    ? `Loading cluster data — ${connection.syncStatus.criticalSynced + connection.syncStatus.deferredSynced} of ${connection.syncStatus.criticalTotal + connection.syncStatus.deferredTotal} ready`
+    : 'Connecting'
   const headerConnectionLabel =
     clusterConnectionState === 'disconnected' ? 'Disconnected' :
-    clusterConnectionState === 'connecting' ? 'Connecting' :
+    clusterConnectionState === 'connecting' ? syncProgressLabel :
     liveUpdatesDisconnected ? 'Live updates disconnected' :
     clusterLoadState.loading ? `Connected — ${clusterLoadState.message}` :
     crdDiscoveryStatus === 'discovering' ? 'Connected — discovering Custom Resources...' :
     'Connected'
   const headerConnectionDisplayLabel =
     clusterConnectionState === 'disconnected' ? 'Disconnected' :
-    clusterConnectionState === 'connecting' ? 'Connecting' :
+    clusterConnectionState === 'connecting' ? syncProgressLabel :
     liveUpdatesDisconnected ? 'Live updates disconnected' :
     showClusterWarmupLabel ? clusterLoadState.message :
     crdDiscoveryStatus === 'discovering' ? 'Discovering Custom Resources…' :
@@ -1604,8 +1623,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     // Filter by namespace (client-side) and by visible kinds
     const nsSet = namespaces.length > 0 ? new Set(namespaces) : null
     const filteredNodes = displayedTopology.nodes.filter(node =>
-      effectiveKinds.has(node.kind) &&
-      (!nsSet || nsSet.has(node.data.namespace as string) || !(node.data.namespace as string))
+      effectiveKinds.has(node.kind) && isInNamespaceScope(node, nsSet)
     )
     const filteredNodeIds = new Set(filteredNodes.map(n => n.id))
 
@@ -1630,6 +1648,16 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     }
   }, [displayedTopology, visibleKinds, namespaces, topologyMode])
 
+  // Namespace-scoped but NOT kind-filtered: the sidebar derives its kind list
+  // and visible/hidden footer counts from this prop, so handing it the
+  // kind-filtered graph nodes would drop every hidden kind from the list and
+  // "hidden" would always read zero. Reads displayedTopology so the counts
+  // freeze with the graph while paused.
+  const filterSidebarNodes = useMemo(() => {
+    if (!displayedTopology) return []
+    return scopeNodesToNamespaces(displayedTopology.nodes, namespaces)
+  }, [displayedTopology, namespaces])
+
   // Cluster Audit findings, joined onto topology nodes by the audit key the
   // backend stamps on each node (data.auditKey). Only badge-worthy findings
   // reach the graph; the raw auditDanger/auditWarning property names remain at
@@ -2021,7 +2049,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       {/* Connecting view — shown during initial connection or retry.
           Icon is pane-anchored so its screen position matches the
           host hub splash across cross-document transitions. */}
-      {!isSwitching && !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connecting' && (
+      {!isSwitching && !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connecting' && !shellDuringSync && (
         <PaneLoader
           label="Connecting to cluster"
           className="flex-1 min-h-0 bg-theme-base"
@@ -2082,13 +2110,21 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       {/* inert while a fullscreen detail overlay covers the views — keeps the
           retained background list out of the focus order + a11y tree (the visual
           cover already blocks pointer events). */}
-      {contentReady && <div className="flex-1 flex overflow-hidden" inert={expandedView}>
+      {(contentReady || shellDuringSync) && <div className="flex-1 flex overflow-hidden" inert={expandedView}>
         {/* Search included, not just the path: selection inside a view rides in
             the query (?resource=, ?release=), so a path-only key would still
             strand a crash on the view that produced it. */}
         <ErrorBoundary resetKey={location.pathname + location.search}>
+        {/* Initial sync in progress: views that need the full cluster dataset
+            show per-kind progress instead; resource views work as kinds sync. */}
+        {viewsSyncGated && connection.syncStatus && (
+          <SyncProgressPanel
+            syncStatus={connection.syncStatus}
+            onNavigateToKind={(key) => navigate({ pathname: `/resources/${key}` })}
+          />
+        )}
         {/* Home dashboard */}
-        {mainView === 'home' && (
+        {!viewsSyncGated && mainView === 'home' && (
           <HomeView
             namespaces={namespaces}
             topology={topology}
@@ -2147,7 +2183,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         )}
 
         {/* Topology view */}
-        {mainView === 'topology' && (
+        {!viewsSyncGated && mainView === 'topology' && (
           <>
             {topology?.requiresNamespaceFilter && namespaces.length === 0 ? (
               /* Large cluster: prompt user to select a namespace */
@@ -2182,14 +2218,14 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
               <>
                 {/* Filter sidebar */}
                 <TopologyFilterSidebar
-                  nodes={topology?.nodes || []}
+                  nodes={filterSidebarNodes}
                   visibleKinds={visibleKinds}
                   onToggleKind={handleToggleKind}
                   onShowAll={handleShowAllKinds}
                   onHideAll={handleHideAllKinds}
                   collapsed={filterSidebarCollapsed}
                   onToggleCollapse={() => setFilterSidebarCollapsed(prev => !prev)}
-                  hiddenKinds={topology?.hiddenKinds}
+                  hiddenKinds={displayedTopology?.hiddenKinds}
                   onEnableHiddenKind={(kind) => {
                     setVisibleKinds(prev => new Set(prev).add(kind as NodeKind))
                     console.log(`[topology] User requested to show hidden kind: ${kind}`)
@@ -2275,7 +2311,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         )}
 
         {/* Timeline view */}
-        {mainView === 'timeline' && (
+        {!viewsSyncGated && mainView === 'timeline' && (
           <TimelineView
             namespaces={namespaces}
             onResourceClick={(resource) => {
@@ -2293,7 +2329,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           />
         )}
 
-        {mainView === 'helm' && (
+        {!viewsSyncGated && mainView === 'helm' && (
           <HelmView
             namespaces={namespaces}
             selectedRelease={selectedHelmRelease}
@@ -2301,13 +2337,13 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           />
         )}
 
-        {mainView === 'helmCompare' && (
+        {!viewsSyncGated && mainView === 'helmCompare' && (
           <HelmCompareRoute />
         )}
 
         {/* GitOps view (inline only when the host hasn't taken it over — see
             the takeover splash below). */}
-        {mainView === 'gitops' && !isViewTakenOver('gitops') && (
+        {!viewsSyncGated && mainView === 'gitops' && !isViewTakenOver('gitops') && (
           <GitOpsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
@@ -2317,12 +2353,14 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
               navigateToResource(resource)
             }}
             onClearNamespaces={clearAllNamespaces}
-            onOpenSettings={() => openSettings()}
+            // Every GitOps "open Settings" ask is about the Argo CD connection
+            // (diff CTA, per-resource health notice), so land on that section.
+            onOpenSettings={() => openSettings('argocd')}
           />
         )}
 
         {/* Applications view — deployable software grouped by app/release evidence */}
-        {mainView === 'applications' && (
+        {!viewsSyncGated && mainView === 'applications' && (
           <ApplicationsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
@@ -2343,16 +2381,16 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         )}
 
         {/* Traffic view */}
-        {mainView === 'traffic' && (
+        {!viewsSyncGated && mainView === 'traffic' && (
           <TrafficView namespaces={namespaces} />
         )}
 
         {/* Cost detail view */}
-        {mainView === 'cost' && (
+        {!viewsSyncGated && mainView === 'cost' && (
           <CostView namespaces={namespaces} onBack={() => setMainView('home')} onOpenResource={navigateToResource} />
         )}
 
-        {mainView === 'capacity' && (
+        {!viewsSyncGated && mainView === 'capacity' && (
           <CapacityView onOpenResource={navigateToResource} />
         )}
 
@@ -2370,7 +2408,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
         {/* Checks detail view. Cloud can take over fleet best practices while
             the target-specific upgrade route continues to render locally. */}
-        {mainView === 'checks' && (!isViewTakenOver('checks') || upgradeReadinessRoute) && (
+        {!viewsSyncGated && mainView === 'checks' && (!isViewTakenOver('checks') || upgradeReadinessRoute) && (
           <AuditView
             namespaces={namespaces}
             onNavigateToResource={navigateToResourceList}
@@ -2382,7 +2420,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             Hub fleet uses; a GitOps reconciler subject routes to its detail page,
             other resources open the standard resource view. Inline only when the
             host hasn't taken it over. */}
-        {mainView === 'issues' && !isViewTakenOver('issues') && (
+        {!viewsSyncGated && mainView === 'issues' && !isViewTakenOver('issues') && (
           <IssuesPane
             namespaces={namespaces}
             onNavigateToResource={navigateFromIssue}
@@ -2392,7 +2430,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         {/* Workload full view — the standalone fullscreen route for non-list
             surfaces and deep links. Expand-from-drawer is the ?full=1 overlay on
             /resources instead, so it never routes here. */}
-        {mainView === 'workload' && (
+        {!viewsSyncGated && mainView === 'workload' && (
           <WorkloadViewRoute
             onNavigateToResource={(resource) => {
               navigate(relatedResourcePath(resource))
@@ -2401,7 +2439,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         )}
 
         {/* Compare two resources of the same kind side-by-side */}
-        {mainView === 'compare' && <CompareViewRoute />}
+        {!viewsSyncGated && mainView === 'compare' && <CompareViewRoute />}
 
         </ErrorBoundary>
       </div>}
@@ -2410,7 +2448,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       {/* Resource detail drawer — stays mounted, expands to full-screen WorkloadView.
           Gated on contentReady so it never renders over the connecting/switching
           splash (which would push the centered logo off-center). */}
-      {contentReady && resourceDrawer.shouldRender && drawerResource && (
+      {(contentReady || shellDuringSync) && resourceDrawer.shouldRender && drawerResource && (
         <ResourceDetailDrawer
           resource={drawerResource}
           initialTab={drawerInitialTab}

package/src/api/client.authRedirect.test.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 
 // Deterministic config so the 401 handler's basename/routePath math is fixed and
 // independent of window/env. client.ts only consumes these six exports.
@@ -67,6 +67,17 @@ function make401(authMode: string): Response {
   } as unknown as Response
 }
 
+// Each test re-imports ./client after resetModules, and the first import in the
+// file is the one that transforms client.ts and everything it pulls in. That is
+// seconds of work on a contended machine, and it would otherwise be charged to
+// whichever test happens to run first, failing it on timeout while the rest of
+// the suite passes in under a second. Pay it once, outside any test's budget —
+// resetModules drops module instances but keeps the transform cache, so the
+// per-test re-import stays cheap.
+beforeAll(async () => {
+  await import('./client')
+}, 120_000)
+
 beforeEach(() => {
   // Reset module state so the redirect gate starts fresh.
   vi.resetModules()

package/src/api/client.prometheusStatus.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import {
+  PROM_STATUS_POLL_DISCOVERING_MS,
+  PROM_STATUS_POLL_IDLE_MS,
+  prometheusStatusRefetchInterval,
+} from './client'
+
+describe('prometheusStatusRefetchInterval', () => {
+  it('polls quickly while discovery is in flight or has not reported yet', () => {
+    expect(prometheusStatusRefetchInterval(undefined)).toBe(PROM_STATUS_POLL_IDLE_MS)
+    // Read before the server's run started: transient, keep polling.
+    expect(prometheusStatusRefetchInterval({ available: false, connected: false })).toBe(PROM_STATUS_POLL_DISCOVERING_MS)
+    // A run that ended without a connection carries its outcome.
+    expect(prometheusStatusRefetchInterval({ available: false, connected: false, error: 'no Prometheus service found in cluster' })).toBe(
+      PROM_STATUS_POLL_IDLE_MS,
+    )
+    expect(prometheusStatusRefetchInterval({ available: false, connected: false, discovering: true })).toBe(
+      PROM_STATUS_POLL_DISCOVERING_MS,
+    )
+    expect(prometheusStatusRefetchInterval({ available: true, connected: true, address: 'http://localhost:1' })).toBe(
+      PROM_STATUS_POLL_IDLE_MS,
+    )
+  })
+})