@skyhook-io/radar-app 1.8.0 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.0",
+  "version": "1.8.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",
@@ -57,7 +57,7 @@
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.1",
     "@tanstack/react-query": "^5.100.14",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",

package/src/App.tsx

@@ -138,14 +138,19 @@ function AuthBarrier({ authMode }: { authMode: string }) {
             src={radarLoadingIcon}
             alt=""
             aria-hidden
-            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-11 h-11"
+            // Integer offset (vw/2 − 22) — matches the Connecting/Opening splashes;
+            // avoids sub-pixel jitter from translate(-50%) on odd-width viewports.
+            className="absolute w-11 h-11"
+            style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
           />
-          <p
-            className="absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary"
+          <div
+            className="absolute left-1/2 -translate-x-1/2 text-center"
             style={{ top: 'calc(50% + 34px)' }}
           >
-            Redirecting to login…
-          </p>
+            <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+              Redirecting to login…
+            </p>
+          </div>
         </div>
       </div>
     )
@@ -171,6 +176,15 @@ function AuthBarrier({ authMode }: { authMode: string }) {
   )
 }
 
+// Identity of the "page" a non-URL-backed peek drawer belongs to. Pathname alone
+// is not enough: Applications keeps the list and an app's detail on the same
+// `/applications` pathname and distinguishes them with `?app=`, so a Back from
+// detail to list would otherwise leave the peek orphaned. Only `app` is included
+// (not the whole query) so filter/tab/namespace churn doesn't close the peek.
+function peekOwnerKey(pathname: string, search: string): string {
+  return `${pathname}${new URLSearchParams(search).get('app') ?? ''}`
+}
+
 function AppInner() {
   const navigate = useNavigate()
   const location = useLocation()
@@ -410,6 +424,9 @@ function AppInner() {
   // selected drawer resource. This covers both in-view kind switches and
   // cross-kind navigations from expanded drawers (for example Node -> View Pods).
   const prevResourcesKindKeyRef = useRef<string | null>(null)
+  // Owner-key (pathname + ?app) a non-URL-backed peek was opened on; see
+  // navigateToResource and peekOwnerKey.
+  const peekOwnerKeyRef = useRef<string | null>(null)
   const currentResourceKindSlug = normalizedResourcesKindSlug.toLowerCase()
   const currentResourceGroup = searchParams.get('apiGroup') ?? ''
   const selectedResourceKindSlug = selectedResource ? kindToPlural(selectedResource.kind).toLowerCase() : ''
@@ -421,9 +438,28 @@ function AppInner() {
   const resourcesKindRouteChanged = mainView === 'resources' &&
     prevResourcesKindKeyRef.current !== null &&
     prevResourcesKindKeyRef.current !== `${currentResourceGroup}/${currentResourceKindSlug}`
-  const routeSelectedResource = resourcesKindRouteChanged && selectedResourceRouteMismatch
-    ? null
-    : selectedResource
+
+  // A peek opened outside /resources (topology, GitOps, Applications) carries no
+  // URL backing, so the only signal that the page beneath it has navigated is
+  // that its owner-key (pathname + ?app) no longer matches where it was opened.
+  // Hiding it here, at render time, closes the orphan on Back without adding
+  // another clearing effect that would race the `suppressViewClearRef` lifecycle.
+  // The /resources case is URL-backed and handled above; an expanded drawer
+  // (drawerExpanded) legitimately lives at /workload and must stay open there.
+  const peekRouteOrphaned = !!selectedResource && !drawerExpanded && mainView !== 'resources' &&
+    peekOwnerKeyRef.current !== null &&
+    peekOwnerKeyRef.current !== peekOwnerKey(location.pathname, location.search)
+
+  // In Applications the inline WorkloadView (?workload) and the peek drawer are
+  // mutually exclusive — never two detail surfaces at once. ?workload is the
+  // single source of truth: while it's set the peek yields to the inline view.
+  // (Opening a child peek from Applications clears ?workload, see onOpenResource.)
+  const appsInlineWorkloadActive = mainView === 'applications' && searchParams.has('workload')
+
+  const routeSelectedResource =
+    (resourcesKindRouteChanged && selectedResourceRouteMismatch) || peekRouteOrphaned || appsInlineWorkloadActive
+      ? null
+      : selectedResource
 
   useEffect(() => {
     if (mainView !== 'resources') {
@@ -458,6 +494,13 @@ function AppInner() {
 
   // Navigate to a resource — uses View Transitions cross-fade when drawer is already open
   const navigateToResource = useCallback((res: SelectedResource, tab: 'detail' | 'yaml' = 'detail') => {
+    // Record the page this peek was opened on. Outside /resources the drawer is
+    // not URL-backed, so this ref is what lets the render-time gate below close
+    // the peek when the page under it changes (e.g. browser Back off a GitOps
+    // detail page, or Applications detail → list via ?app). window.location is
+    // read (not the `location` closure) so the value is always current
+    // regardless of this callback's memoization.
+    peekOwnerKeyRef.current = peekOwnerKey(window.location.pathname, window.location.search)
     const update = () => { setDrawerInitialTab(tab); setSelectedResource(res) }
     // Skip the cross-fade animation entirely on first open (no
     // `selectedResource`); otherwise route through
@@ -920,7 +963,7 @@ function AppInner() {
       name: node.name,
       group: apiVersionToGroup(node.data.apiVersion as string | undefined),
     })
-  }, [navigate])
+  }, [navigate, navigateToResource])
 
   // Serialize namespaces for stable dependency tracking
   const namespacesKey = namespaces.join(',')
@@ -1136,6 +1179,11 @@ function AppInner() {
       // Switching to specific namespaces - disable namespace grouping
       setGroupingMode('none')
     }
+    // Intentionally runs ONLY when the namespace selection changes. It reads the
+    // current groupingMode but must not re-run when grouping changes, or it would
+    // immediately revert a manual/fleet grouping choice. namespacesKey is the
+    // manual dependency standing in for the namespaces array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [namespacesKey])
 
   // Clear resource selection when changing views or namespaces
@@ -1362,7 +1410,7 @@ function AppInner() {
             // the bar is full, and the view's primary home is Cloud's fleet
             // rail. The view still exists and is reachable via /applications
             // and the view-switching shortcuts. Same treatment as Cost below.
-            { view: 'traffic' as const, icon: Activity, label: 'Traffic' },
+            { view: 'traffic' as const, icon: Activity, label: 'Live Traffic' },
             // Cost is intentionally hidden from the pill bar for now — the view still
             // exists and is reachable via /cost, the Home dashboard card, and the
             // command palette (⌘K). Remove this comment to restore it.
@@ -1745,7 +1793,7 @@ function AppInner() {
                   <TopologySearch
                     nodes={filteredTopology?.nodes ?? []}
                     allNodes={topology?.nodes}
-                    viewModeLabel={topologyMode === 'fleet' ? 'Fleet' : topologyMode === 'traffic' ? 'Traffic' : 'Resources'}
+                    viewModeLabel={topologyMode === 'fleet' ? 'Fleet' : topologyMode === 'traffic' ? 'Network Flow' : 'Resources'}
                     onNodeSelect={handleNodeClick}
                     onZoomToNode={(id) => setTopologyFocus((prev) => ({ id, nonce: (prev?.nonce ?? 0) + 1 }))}
                     // Stack below the namespace breadcrumb (shown only for a single
@@ -1767,6 +1815,7 @@ function AppInner() {
                     showPolicyEffect={showPolicyEffect}
                     onShowPolicyEffectChange={setShowPolicyEffect}
                     showFleetMode={displayedTopology?.nodes?.some(n => FLEET_MODE_KINDS.has(n.kind as NodeKind)) ?? false}
+                    onNavigateToTraffic={() => setMainView('traffic')}
                   />
                 </div>
               </>
@@ -1829,7 +1878,10 @@ function AppInner() {
           <GitOpsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
-              setSelectedResource(resource)
+              // Route through navigateToResource so the peek records the page it
+              // opened on — that's what lets Back off the GitOps detail page close
+              // the drawer instead of orphaning it on the list.
+              navigateToResource(resource)
             }}
             onClearNamespaces={clearAllNamespaces}
           />
@@ -1840,7 +1892,17 @@ function AppInner() {
           <ApplicationsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
-              setSelectedResource(resource)
+              // The peek and the inline WorkloadView are mutually exclusive: drop
+              // the inline workload selection so the app graph (not a second
+              // detail panel) sits behind the peek. Search-only change keeps the
+              // pathname — and thus the peek's owner-path — intact.
+              const params = new URLSearchParams(window.location.search)
+              if (params.has('workload') || params.has('tab')) {
+                params.delete('workload')
+                params.delete('tab')
+                navigate({ pathname: window.location.pathname, search: params.toString() }, { replace: true })
+              }
+              navigateToResource(resource)
             }}
           />
         )}
@@ -1861,9 +1923,26 @@ function AppInner() {
             own fetches) while the cross-document nav lands. Covers checks /
             issues / gitops with one block since only one view is active. */}
         {viewTakeoverHref && (
-          <div className="flex-1 flex flex-col items-center justify-center gap-3 bg-theme-base">
-            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-            <p className="text-sm text-theme-text-secondary">Opening…</p>
+          <div className="flex-1 relative bg-theme-base">
+            {/* Viewport-anchored, 17px — identical to the "Connecting" splash so
+                the mark doesn't move or resize across the takeover hand-off. */}
+            <div className="fixed inset-0 pointer-events-none">
+              <img
+                src={radarLoadingIcon}
+                alt=""
+                aria-hidden
+                className="absolute w-11 h-11"
+                style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
+              />
+              <div
+                className="absolute left-1/2 -translate-x-1/2 text-center"
+                style={{ top: 'calc(50% + 34px)' }}
+              >
+                <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+                  Opening…
+                </p>
+              </div>
+            </div>
           </div>
         )}
 

package/src/api/client.ts

@@ -1509,7 +1509,7 @@ export function useAutoPromConnect(): void {
     if (attemptedRef.current === context) return
     let cached: string | null = null
     try { cached = window.localStorage.getItem(promAutoConnectKey(context)) } catch {
-      cached = null
+      // keep the null fallback
     }
 
     attemptedRef.current = context
@@ -2396,6 +2396,19 @@ export function useHelmUpgradeInfo(namespace: string, name: string, enabled = tr
   })
 }
 
+// Available chart versions for a release (newest-first), for the upgrade dialog's
+// version picker. Empty when the source can't be resolved — the dialog then falls
+// back to the latest version from upgrade-info.
+export function useHelmReleaseVersions(namespace: string, name: string, enabled = true) {
+  return useQuery<string[]>({
+    queryKey: ['helm-release-versions', namespace, name],
+    queryFn: () => fetchJSON(`/helm/releases/${namespace}/${name}/versions`),
+    enabled: Boolean(namespace && name && enabled),
+    staleTime: 30000,
+    retry: false,
+  })
+}
+
 // Batch check for upgrade availability (for list view)
 export function useHelmBatchUpgradeInfo(namespaces: string[] = [], enabled = true) {
   const params = helmNamespaceParams(namespaces)
@@ -2668,6 +2681,54 @@ export function useUpdateRepositorySilent() {
   })
 }
 
+// Registered OCI chart sources (the OCI analog of `helm repo add`). Used to
+// track upgrades for the user's own OCI-published charts.
+export function useHelmOCISources() {
+  return useQuery<string[]>({
+    queryKey: ['helm-oci-sources'],
+    queryFn: () => fetchJSON('/helm/oci-sources'),
+  })
+}
+
+async function mutateOCISource(method: 'POST' | 'DELETE', source: string): Promise<string[]> {
+  const response = await apiFetch(`${getApiBase()}/helm/oci-sources`, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ source }),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+    throw new Error(error.error || `HTTP ${response.status}`)
+  }
+  return response.json()
+}
+
+// Invalidate the upgrade-info queries so a newly-registered source is probed
+// immediately and "source not tracked" re-resolves.
+function invalidateHelmAfterSourceChange(queryClient: ReturnType<typeof useQueryClient>) {
+  queryClient.invalidateQueries({ queryKey: ['helm-oci-sources'] })
+  queryClient.invalidateQueries({ queryKey: ['helm-upgrade-info'] })
+  queryClient.invalidateQueries({ queryKey: ['helm-batch-upgrade-info'] })
+}
+
+export function useAddOCISource() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (source: string) => mutateOCISource('POST', source),
+    meta: { errorMessage: 'Failed to add chart source', successMessage: 'Chart source added' },
+    onSuccess: () => invalidateHelmAfterSourceChange(queryClient),
+  })
+}
+
+export function useRemoveOCISource() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (source: string) => mutateOCISource('DELETE', source),
+    meta: { errorMessage: 'Failed to remove chart source', successMessage: 'Chart source removed' },
+    onSuccess: () => invalidateHelmAfterSourceChange(queryClient),
+  })
+}
+
 // Search charts across all repositories
 export function useSearchCharts(query: string, allVersions = false, enabled = true) {
   return useQuery<ChartSearchResult>({
@@ -3048,7 +3109,7 @@ export function useSwitchContext() {
       } catch (error) {
         clearTimeout(timeoutId)
         if (error instanceof Error && error.name === 'AbortError') {
-          throw new Error('Context switch timed out. The cluster may be unreachable.')
+          throw new Error('Context switch timed out. The cluster may be unreachable.', { cause: error })
         }
         throw error
       }
@@ -3151,7 +3212,7 @@ export function useSetActiveNamespace() {
           error: error instanceof Error ? error.message : String(error),
         })
         if (error instanceof Error && error.name === 'AbortError') {
-          throw new Error('Namespace switch timed out. The cluster may be unreachable.')
+          throw new Error('Namespace switch timed out. The cluster may be unreachable.', { cause: error })
         }
         throw error
       }

package/src/components/DebugOverlay.tsx

@@ -88,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/applications/ApplicationsView.tsx

@@ -28,7 +28,7 @@ interface ApplicationsViewProps {
 
 export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsViewProps) {
   const query = useApplications(namespaces)
-  const apps = query.data?.applications ?? []
+  const apps = useMemo(() => query.data?.applications ?? [], [query.data])
 
   // Which app is open lives in the URL (?app=<key>) so the detail view is
   // deep-linkable and the browser back button returns to the list. Opening or

package/src/components/compare/CompareViewRoute.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import {
   ResourceCompareView,
@@ -23,13 +23,21 @@ export function CompareViewRoute() {
   // reserved for topology grouping mode and gets stripped by App.tsx's URL
   // sync on every non-topology view.
   const group = searchParams.get('apiGroup') ?? undefined
-  const aParsed = parseRef(searchParams.get('a'))
-  const bParsed = parseRef(searchParams.get('b'))
+  const aRaw = searchParams.get('a')
+  const bRaw = searchParams.get('b')
 
   const [pickerOpen, setPickerOpen] = useState<CompareSide | null>(null)
 
-  const a: CompareResourceRef | null = aParsed ? { kind, namespace: aParsed.namespace, name: aParsed.name, group } : null
-  const b: CompareResourceRef | null = bParsed ? { kind, namespace: bParsed.namespace, name: bParsed.name, group } : null
+  // Memoized so the refs keep a stable identity across renders — otherwise the
+  // useCallbacks below (which depend on a/b) would be rebuilt every render.
+  const a: CompareResourceRef | null = useMemo(() => {
+    const p = parseRef(aRaw)
+    return p ? { kind, namespace: p.namespace, name: p.name, group } : null
+  }, [aRaw, kind, group])
+  const b: CompareResourceRef | null = useMemo(() => {
+    const p = parseRef(bRaw)
+    return p ? { kind, namespace: p.namespace, name: p.name, group } : null
+  }, [bRaw, kind, group])
 
   const aQuery = useResource<unknown>(a?.kind ?? '', a?.namespace ?? '', a?.name ?? '', a?.group)
   const bQuery = useResource<unknown>(b?.kind ?? '', b?.namespace ?? '', b?.name ?? '', b?.group)

package/src/components/cost/CostTrendChart.tsx

@@ -34,7 +34,7 @@ export function CostTrendChart() {
       <div className="rounded-lg border border-theme-border bg-theme-surface/50 p-4">
         <div className="flex items-center justify-center h-[200px] text-theme-text-tertiary">
           <Loader2 className="w-5 h-5 animate-spin mr-2" />
-          Loading cost trend...
+          Loading cost trend…
         </div>
       </div>
     )
@@ -164,7 +164,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
     })
 
     return { timestamps, stacked, minTs, maxTs, yMax, seriesLookups, toX, toY, yTicks, xTicks, paths }
-  }, [series])
+  }, [series, plotHeight, plotWidth])
 
   // Hover data — depends on hoverX + chartData, must be a separate hook (called unconditionally)
   const hoverData = useMemo(() => {
@@ -193,7 +193,7 @@ function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
     })
 
     return { ts: closestTs, x: toX(closestTs), total, points }
-  }, [hoverX, chartData, series])
+  }, [hoverX, chartData, series, plotWidth])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current

package/src/components/cost/CostView.tsx

@@ -282,7 +282,7 @@ function WorkloadRows({ namespace }: { namespace: string }) {
     return (
       <div className="px-4 py-3 flex items-center gap-2 text-xs text-theme-text-tertiary bg-theme-elevated/30">
         <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        Loading workloads...
+        Loading workloads…
       </div>
     )
   }

package/src/components/helm/ChartBrowser.tsx

@@ -190,7 +190,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 </button>
                 <div className="border-t border-theme-border my-1" />
                 {reposLoading ? (
-                  <div className="px-3 py-2 text-sm text-theme-text-tertiary">Loading...</div>
+                  <div className="px-3 py-2 text-sm text-theme-text-tertiary">Loading…</div>
                 ) : repositories?.length === 0 ? (
                   <div className="px-3 py-2 text-sm text-theme-text-tertiary">No repositories configured</div>
                 ) : (