@skyhook-io/radar-app 1.9.0 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "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",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.8.15",
+    "@skyhook-io/k8s-ui": ">=1.10.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -54,15 +54,15 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.62.0",
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.20",
-    "@tailwindcss/vite": "^4.3.1",
-    "@tanstack/react-query": "^5.101.2",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-query": "^5.101.4",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
     "@xyflow/react": "^12.11.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
@@ -77,7 +77,7 @@
     "react-dom": "^19.2.7",
     "react-router-dom": "^7.18.1",
     "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.62.0",
     "vite": "^8.1.5"

package/src/App.tsx

@@ -22,6 +22,7 @@ import { HelmView } from './components/helm/HelmView'
 import { HelmCompareRoute } from './components/helm/HelmCompareRoute'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
+import { CapacityView } from './components/capacity/CapacityView'
 import { AuditView } from './components/audit/AuditView'
 import { IssuesPane } from './components/issues/IssuesPane'
 import { GitOpsView } from './components/gitops/GitOpsView'
@@ -50,17 +51,17 @@ 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 { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/config'
+import { routePath, apiUrl, getAuthHeaders, getCredentialsMode, stripBasename } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts, useSuppressBaseShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 import { useDocumentTitle } from './hooks/useDocumentTitle'
 import type { ClusterLoadState } from './types/clusterLoadState'
 import { useClusterLoadState } from './hooks/useClusterLoadState'
-import { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle, Loader2, RefreshCw } from 'lucide-react'
+import { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, Gauge, HelpCircle, Loader2, RefreshCw } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
-import { SettingsDialog } from './components/settings/SettingsDialog'
+import { SettingsDialog, type SettingsSectionId } from './components/settings/SettingsDialog'
 import type { APIResource, TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
 import { kindToPlural, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
 import { type OmnibarHandle } from './components/ui/Omnibar'
@@ -114,7 +115,7 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'capacity' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -127,6 +128,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'helm') return 'helm'
   if (path === 'traffic') return 'traffic'
   if (path === 'cost') return 'cost'
+  if (path === 'capacity') return 'capacity'
   if (path === 'workload') return 'workload'
   if (path === 'checks' || path === 'audit') return 'checks'  // /audit = legacy → checks
   if (path === 'gitops') return 'gitops'
@@ -162,6 +164,12 @@ function namespaceFilterDisabled(
       tooltip: 'Cost is reported per namespace across the whole cluster — the namespace filter doesn’t apply here.',
     }
   }
+  if (view === 'capacity') {
+    return {
+      disabled: true,
+      tooltip: 'Capacity is reported across the cluster — the namespace filter doesn’t apply here.',
+    }
+  }
   const segments = pathname.replace(/^\//, '').split('/')
   if (view === 'gitops' && segments[1] === 'detail') {
     return {
@@ -226,6 +234,12 @@ function radarPageTitle(pathname: string, search = '', apiResources?: APIResourc
   }
 
   // The landing view reads "Overview" rather than "Home" in the tab.
+  if (view === 'capacity') {
+    if (pathSegments[1] === 'pools') return decode(pathSegments[2] ?? '') || 'Capacity'
+    if (pathSegments[1] === 'demand') return 'Capacity Demand'
+    if (pathSegments[1] === 'activity') return 'Capacity Activity'
+  }
+
   if (view === 'home') return 'Overview'
   // Every other view's label is its id capitalized — getViewFromPath has already
   // normalized aliases (e.g. /audit → 'checks'), so no lookup table is needed.
@@ -343,12 +357,19 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   // Auth check — detect if auth is enabled but user is not authenticated
   const { data: authMe, isPending: authMePending } = useAuthMe()
 
-  // Restore navigation path after session-expiry re-auth redirect
+  // Restore navigation path after session-expiry re-auth redirect.
+  // The stored value is basename-relative, but strip defensively anyway:
+  // sessionStorage outlives app upgrades, so a value written by an older
+  // version may still carry the basename — and navigate() re-applies the
+  // basename, which would double it (/c/abc/c/abc/...). Trade-off: if a host
+  // mounts the app at a basename that exactly equals an internal route (e.g.
+  // /topology), this second strip eats the route and re-auth lands on home —
+  // accepted, since a wrong-but-valid landing beats a doubled URL.
   useEffect(() => {
     const returnPath = sessionStorage.getItem('radar_return_path')
     if (returnPath) {
       sessionStorage.removeItem('radar_return_path')
-      navigate(returnPath, { replace: true })
+      navigate(stripBasename(returnPath), { replace: true })
     }
   }, [navigate])
 
@@ -507,13 +528,23 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
   // Settings dialog state
   const [showSettings, setShowSettings] = useState(false)
+  const [settingsSection, setSettingsSection] = useState<SettingsSectionId>('overview')
+  const openSettings = useCallback((section: SettingsSectionId = 'overview') => {
+    setSettingsSection(section)
+    setShowSettings(true)
+  }, [])
 
   // Listen for "open-settings" DOM event (used by MCPSetupDialog etc.)
   useEffect(() => {
-    const handler = () => setShowSettings(true)
+    const handler = (event: Event) => {
+      const section =
+        (event as CustomEvent<{ section?: SettingsSectionId }>).detail?.section ??
+        'overview'
+      openSettings(section)
+    }
     window.addEventListener('radar:open-settings', handler)
     return () => window.removeEventListener('radar:open-settings', handler)
-  }, [])
+  }, [openSettings])
 
   // Listen for "open-local-terminal" DOM event — the AI surface is portaled above
   // the DockProvider, so it can't call useOpenLocalTerminal directly; it dispatches
@@ -768,7 +799,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const VIEW_SHORTCUT_KEYS: Record<ExtendedMainView, string> = {
     home: 'g h', resources: 'g r', issues: 'g i', topology: 'g t',
     applications: 'g a', timeline: 'g l', traffic: 'g f', helm: 'g m',
-    gitops: 'g o', checks: 'g u', cost: 'g c',
+    gitops: 'g o', checks: 'g u', cost: 'g c', capacity: 'g p',
     // Non-rail views (reachable via deep links / actions, not the rail) get no
     // dedicated mnemonic — listed for exhaustiveness so the type stays total.
     workload: '', compare: '', helmCompare: '',
@@ -853,7 +884,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           description: 'Open settings',
           category: 'General' as const,
           scope: 'global' as const,
-          handler: () => setShowSettings(true),
+          handler: () => openSettings(),
         }]
       : []),
   ])
@@ -948,9 +979,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const fastInvalidationRef = useRef<{
     changedKinds: Set<string>   // every changed kind (any op) → detail drawer
     structuralKinds: Set<string> // add/delete kinds → list membership + counts + dashboard
+    environmentNamespaces: Set<string>
+    environmentPods: Map<string, Set<string>>
     secretsChanged: boolean
     timer: number | null
-  }>({ changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null })
+  }>({ changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null })
   const slowInvalidationRef = useRef<{
     updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
     timer: number | null
@@ -985,6 +1018,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     fast.changedKinds.add(kind)
     if (structural) fast.structuralKinds.add(kind)
     if (kind === 'secrets') fast.secretsChanged = true
+    if ((kind === 'configmaps' || kind === 'secrets') && event.namespace) fast.environmentNamespaces.add(event.namespace)
+    if (kind === 'pods' && event.namespace && event.name) {
+      const names = fast.environmentPods.get(event.namespace) ?? new Set<string>()
+      names.add(event.name)
+      fast.environmentPods.set(event.namespace, names)
+    }
 
     const slow = slowInvalidationRef.current
     if (!structural) slow.updatedKinds.add(kind)
@@ -1006,11 +1045,19 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         if (f.secretsChanged) {
           queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
         }
+        for (const namespace of f.environmentNamespaces) {
+          queryClient.invalidateQueries({ queryKey: ['pod-environment', namespace] })
+        }
+        for (const [namespace, names] of f.environmentPods) {
+          for (const name of names) {
+            queryClient.invalidateQueries({ queryKey: ['pod-environment', namespace, name] })
+          }
+        }
         // GitOps behavior unchanged from before — refreshes every batch when a
         // GitOps view is mounted (Phase 2 will make this relevance-aware).
         queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
         queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
-        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       }, 3000)
     }
 
@@ -1036,7 +1083,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
     if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
     if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
     slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
     timelineInvalidationRef.current = { timer: null }
   }, [])
@@ -1059,7 +1106,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
       if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
       if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
       timelineInvalidationRef.current = { timer: null }
 
@@ -1599,7 +1646,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           pinned={navRailEffectivePinned}
           onTogglePinned={toggleNavRailPinned}
           showPinToggle={!railForcedSlim}
-          onOpenSettings={() => setShowSettings(true)}
+          onOpenSettings={() => openSettings()}
           accountSlot={<UserMenu variant="rail" pinned={navRailEffectivePinned} />}
         />
       )}
@@ -1712,6 +1759,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             { view: 'home' as const, icon: Home, label: 'Home' },
             { view: 'topology' as const, icon: Network, label: 'Topology' },
             { view: 'resources' as const, icon: List, label: 'Resources' },
+            { view: 'capacity' as const, icon: Gauge, label: 'Capacity' },
             { view: 'timeline' as const, icon: Clock, label: 'Timeline' },
             { view: 'helm' as const, icon: Package, label: 'Helm' },
             { view: 'gitops' as const, icon: GitBranch, label: 'GitOps' },
@@ -2186,7 +2234,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
               navigateToResource(resource)
             }}
             onClearNamespaces={clearAllNamespaces}
-            onOpenSettings={() => setShowSettings(true)}
+            onOpenSettings={() => openSettings()}
           />
         )}
 
@@ -2221,6 +2269,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           <CostView namespaces={namespaces} onBack={() => setMainView('home')} onOpenResource={navigateToResource} />
         )}
 
+        {mainView === 'capacity' && (
+          <CapacityView onOpenResource={navigateToResource} />
+        )}
+
         {/* Takeover splash. When the host claims the current view via
             fleetTakeoverHref, the redirect effect above is mid-flight — render a
             brief splash instead of the inline view (which would flash + fire its
@@ -2417,6 +2469,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       {/* Settings dialog — My permissions is rendered inline in its own section */}
       <SettingsDialog
         open={showSettings}
+        initialSection={settingsSection}
         onClose={() => setShowSettings(false)}
       />
 

package/src/api/apiResources.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { hasKarpenterNodePools } from './apiResources'
+
+describe('hasKarpenterNodePools', () => {
+  it('uses exact API discovery rather than top-CRD counts or kind name alone', () => {
+    expect(hasKarpenterNodePools([{ name: 'nodepools', kind: 'NodePool', group: 'karpenter.sh', verbs: ['get', 'list'] } as any])).toBe(true)
+    expect(hasKarpenterNodePools([{ name: 'nodepools', kind: 'NodePool', group: 'example.io', verbs: ['list'] } as any])).toBe(false)
+    expect(hasKarpenterNodePools([{ name: 'nodepools', kind: 'NodePool', group: 'karpenter.sh', verbs: ['get'] } as any])).toBe(false)
+    expect(hasKarpenterNodePools(undefined)).toBe(false)
+  })
+})

package/src/api/apiResources.ts

@@ -1,28 +1,67 @@
-import { useQuery } from '@tanstack/react-query'
-import type { APIResource } from '../types'
-import { apiUrl, getAuthHeaders, getCredentialsMode } from './config'
+import { useQuery } from "@tanstack/react-query";
+import type { APIResource } from "../types";
+import { apiUrl, getAuthHeaders, getCredentialsMode } from "./config";
 
 // Re-export pure functions from package
-export { categorizeResources, CORE_RESOURCES, findAPIResourceForRoute, formatGroupName, shortenGroupName, getKindLabel, getKindPlural } from '@skyhook-io/k8s-ui'
-export type { ResourceCategory } from '@skyhook-io/k8s-ui'
+export {
+  categorizeResources,
+  CORE_RESOURCES,
+  findAPIResourceForRoute,
+  formatGroupName,
+  shortenGroupName,
+  getKindLabel,
+  getKindPlural,
+} from "@skyhook-io/k8s-ui";
+export type { ResourceCategory } from "@skyhook-io/k8s-ui";
 
 async function fetchJSON<T>(path: string): Promise<T> {
   const response = await fetch(apiUrl(path), {
     credentials: getCredentialsMode(),
     headers: getAuthHeaders(),
-  })
+  });
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
-    throw new Error(error.error || `HTTP ${response.status}`)
+    const error = await response
+      .json()
+      .catch(() => ({ error: "Unknown error" }));
+    throw new Error(error.error || `HTTP ${response.status}`);
   }
-  return response.json()
+  return response.json();
 }
 
 // Fetch all API resources from the cluster
 export function useAPIResources() {
   return useQuery<APIResource[]>({
-    queryKey: ['api-resources'],
-    queryFn: () => fetchJSON('/api-resources'),
+    queryKey: ["api-resources"],
+    queryFn: () => fetchJSON("/api-resources"),
     staleTime: 5 * 60 * 1000, // 5 minutes - resources don't change often
-  })
+  });
+}
+
+export function hasKarpenterNodePools(
+  resources: APIResource[] | undefined,
+): boolean {
+  return (
+    resources?.some(
+      (resource) =>
+        resource.name === "nodepools" &&
+        resource.group === "karpenter.sh" &&
+        resource.verbs?.includes("list"),
+    ) ?? false
+  );
+}
+
+// Whether the Capacity screens are reachable for this caller — the gate on
+// links and entry points into them. The per-request capability is authoritative
+// once it has resolved discovery + RBAC: available opens, denied/not_detected
+// closes (an RBAC-denied user would otherwise land on a 403 page). While the
+// capability is still syncing pre-discovery (cluster connecting), fall back to
+// the discovery signal so entry points don't flicker.
+export function karpenterCapacityAvailable(
+  capability: { state: string } | undefined,
+  apiResources: APIResource[] | undefined,
+): boolean {
+  if (capability?.state === "available") return true;
+  if (capability?.state === "denied" || capability?.state === "not_detected")
+    return false;
+  return hasKarpenterNodePools(apiResources);
 }

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

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import {
+  ApiError,
+  capacityRefetchInterval,
+  isCapacityCursorInvalidError,
+  shouldRetryCapacityQuery,
+} from "./client";
+
+describe("isCapacityCursorInvalidError", () => {
+  it("uses the structured capacity error code", () => {
+    expect(
+      isCapacityCursorInvalidError(
+        new ApiError("cursor expired", 400, {
+          error_code: "capacity_cursor_invalid",
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it("does not infer cursor failures from status or message text", () => {
+    expect(
+      isCapacityCursorInvalidError(new ApiError("cursor expired", 400)),
+    ).toBe(false);
+    expect(
+      isCapacityCursorInvalidError(
+        new ApiError("unrelated", 400, { code: "another_error" }),
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("shouldRetryCapacityQuery", () => {
+  it("does not retry stable client or authorization failures", () => {
+    expect(
+      shouldRetryCapacityQuery(0, new ApiError("invalid since", 400)),
+    ).toBe(false);
+    expect(shouldRetryCapacityQuery(0, new ApiError("forbidden", 403))).toBe(
+      false,
+    );
+    expect(shouldRetryCapacityQuery(0, new ApiError("not found", 404))).toBe(
+      false,
+    );
+  });
+
+  it("bounds retries for transient failures", () => {
+    expect(shouldRetryCapacityQuery(0, new ApiError("unavailable", 503))).toBe(
+      true,
+    );
+    expect(shouldRetryCapacityQuery(3, new ApiError("unavailable", 503))).toBe(
+      false,
+    );
+  });
+});
+
+describe("capacityRefetchInterval", () => {
+  const withData = (data?: { state?: string }) => ({ state: { data } });
+
+  it("suspends polling while the user holds a page cursor", () => {
+    // A background refetch on page 2 races membership changes and yanks the
+    // user back to page 1.
+    expect(
+      capacityRefetchInterval(undefined, true, "cursor-abc")(withData()),
+    ).toBe(false);
+  });
+
+  it("polls fast while the server reports syncing", () => {
+    expect(
+      capacityRefetchInterval(undefined, true)(withData({ state: "syncing" })),
+    ).toBe(2_500);
+  });
+
+  it("arms the normal cadence for a settled, enabled query", () => {
+    expect(
+      capacityRefetchInterval(
+        undefined,
+        true,
+      )(withData({ state: "available" })),
+    ).toBe(30_000);
+    expect(
+      capacityRefetchInterval(
+        { refetchInterval: 5_000 },
+        true,
+      )(withData({ state: "available" })),
+    ).toBe(5_000);
+  });
+
+  it("does not poll a disabled query, even while syncing", () => {
+    expect(
+      capacityRefetchInterval(undefined, false)(withData({ state: "syncing" })),
+    ).toBe(false);
+  });
+});