@skyhook-io/radar-app 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.0",
+  "version": "1.8.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",
@@ -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
@@ -1829,7 +1877,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 +1891,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 +1922,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
@@ -3048,7 +3048,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 +3151,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>
                 ) : (

package/src/components/helm/InstallWizard.tsx

@@ -191,7 +191,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
     } finally {
       setIsInstalling(false)
     }
-  }, [releaseName, namespace, chartName, version, repo, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
+  }, [releaseName, namespace, chartName, version, repo, repoUrl, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
 
   // Validate release name + namespace before letting the user
   // advance. Without this, a name like "Invalid Name With Spaces!"

package/src/components/home/ActivitySummary.tsx

@@ -82,6 +82,9 @@ export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySu
     limit: 1000,
   })
 
+  // Intentionally re-sample 'now' only when events refresh (not every render),
+  // so the timeline window stays stable between data updates.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const now = useMemo(() => Date.now(), [events])
   const spanMs = SPAN_MINUTES * 60 * 1000
   const startTime = now - spanMs
@@ -125,7 +128,7 @@ export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySu
       <div className="flex-1 min-h-0 overflow-hidden px-4 py-1.5">
         {isLoading ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
-            Loading...
+            Loading…
           </div>
         ) : error ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">

package/src/components/issues/IssuesPane.tsx

@@ -33,7 +33,7 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
   const { data, isLoading, error } = useIssues(namespaces)
   const [severityFilter, setSeverityFilter] = useState<Set<IssueSeverity>>(new Set())
 
-  const allIssues = data?.issues ?? []
+  const allIssues = useMemo(() => data?.issues ?? [], [data])
   const totals = useMemo(() => {
     const t: Record<IssueSeverity, number> = { critical: 0, warning: 0 }
     for (const i of allIssues) t[i.severity] = (t[i.severity] ?? 0) + 1
@@ -44,7 +44,7 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
   const toggleSeverity = (s: IssueSeverity) =>
     setSeverityFilter((prev) => {
       const next = new Set(prev)
-      next.has(s) ? next.delete(s) : next.add(s)
+      if (next.has(s)) next.delete(s); else next.add(s)
       return next
     })
 

package/src/components/portforward/PortForwardManager.tsx

@@ -20,6 +20,7 @@ import {
   Globe,
   Monitor,
   PenLine,
+  RotateCw,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 // CSS_EASE (the shared spring curve) is intentionally NOT used for this panel —
@@ -30,6 +31,7 @@ import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { openExternal } from '../../utils/navigation'
 import { apiUrl } from '../../api/config'
+import { apiFetch } from '../../api/client'
 import { pluralize } from '@skyhook-io/k8s-ui'
 
 // --- Types -------------------------------------------------------------------
@@ -86,7 +88,7 @@ function usePortForwardQuery() {
   return useQuery<PortForwardSession[]>({
     queryKey: ['portforwards'],
     queryFn: async () => {
-      const res = await fetch(apiUrl('/portforwards'))
+      const res = await apiFetch(apiUrl('/portforwards'))
       if (!res.ok) throw new Error('Failed to fetch port forwards')
       return res.json()
     },
@@ -390,6 +392,9 @@ export function PortForwardPanel() {
   // without disabling all stop buttons (the old shared-mutation approach blocked
   // every row when any single stop was in-flight).
   const [stoppingIds, setStoppingIds] = useState<Set<string>>(() => new Set())
+  // Per-session retry tracking — same rationale as stoppingIds: multiple failed
+  // forwards can be retried independently without disabling every retry button.
+  const [retryingIds, setRetryingIds] = useState<Set<string>>(() => new Set())
   const queryClient = useQueryClient()
   const { showSuccess, showError } = useToast()
 
@@ -424,7 +429,7 @@ export function PortForwardPanel() {
   const stopPortForward = useCallback(async (id: string) => {
     setStoppingIds(prev => new Set(prev).add(id))
     try {
-      const res = await fetch(apiUrl(`/portforwards/${id}`), { method: 'DELETE' })
+      const res = await apiFetch(apiUrl(`/portforwards/${id}`), { method: 'DELETE' })
       if (!res.ok) {
         const body = await res.json().catch(() => ({}))
         throw new Error(body.error || `Failed to stop port forward (HTTP ${res.status})`)
@@ -444,6 +449,48 @@ export function PortForwardPanel() {
     }
   }, [queryClient, showError])
 
+  // Recreate a failed forward. The errored session is already dead — there's no live
+  // forward to lose — so we drop the stale row FIRST, then recreate. Delete-first keeps
+  // the panel at exactly one row in every outcome (success → one running row; failure →
+  // one errored row), avoiding the orphaned-duplicate the reverse order would leave when
+  // the backend keeps a failed-start session in its map. A 404 means it was already
+  // cleared (e.g. context switch) — benign, proceed. Service-resolved sessions re-route
+  // through the service path via buildRecreateBody, so a retry after the backing pod was
+  // replaced re-resolves to a currently-running pod.
+  const retryPortForward = useCallback(async (session: PortForwardSession) => {
+    commitInteraction()
+    setRetryingIds(prev => new Set(prev).add(session.id))
+    try {
+      const delRes = await apiFetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
+      if (!delRes.ok && delRes.status !== 404) {
+        const body = await delRes.json().catch(() => ({}))
+        throw new Error(body.error || `Failed to clear failed port forward (HTTP ${delRes.status})`)
+      }
+      const res = await apiFetch(apiUrl('/portforwards'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(buildRecreateBody(session, { localPort: session.localPort, listenAddress: session.listenAddress })),
+      })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body.error || `Failed to retry port forward (HTTP ${res.status})`)
+      }
+      queryClient.invalidateQueries({ queryKey: ['portforwards'] })
+      showSuccess('Port forward restarted', `Now listening on localhost:${session.localPort}`)
+    } catch (err) {
+      queryClient.invalidateQueries({ queryKey: ['portforwards'] })
+      const msg = err instanceof Error ? err.message : 'Failed to retry port forward'
+      showError('Failed to retry port forward', msg)
+      console.error('Failed to retry port forward:', err)
+    } finally {
+      setRetryingIds(prev => {
+        const next = new Set(prev)
+        next.delete(session.id)
+        return next
+      })
+    }
+  }, [commitInteraction, queryClient, showSuccess, showError])
+
   const toggleListenAddress = async (session: PortForwardSession) => {
     commitInteraction()
     const newAddress = session.listenAddress === '0.0.0.0' ? '127.0.0.1' : '0.0.0.0'
@@ -454,13 +501,13 @@ export function PortForwardPanel() {
     // apart from "original gone and recreate failed = data loss."
     let deleted = false
     try {
-      const delRes = await fetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
+      const delRes = await apiFetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
       if (!delRes.ok) {
         const body = await delRes.json().catch(() => ({}))
         throw new Error(body.error || `Failed to stop existing port forward (HTTP ${delRes.status})`)
       }
       deleted = true
-      const res = await fetch(apiUrl('/portforwards'), {
+      const res = await apiFetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(buildRecreateBody(session, { localPort: session.localPort, listenAddress: newAddress })),
@@ -501,13 +548,13 @@ export function PortForwardPanel() {
     // apart from "original gone and recreate failed = data loss."
     let deleted = false
     try {
-      const delRes = await fetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
+      const delRes = await apiFetch(apiUrl(`/portforwards/${session.id}`), { method: 'DELETE' })
       if (!delRes.ok) {
         const body = await delRes.json().catch(() => ({}))
         throw new Error(body.error || `Failed to stop existing port forward (HTTP ${delRes.status})`)
       }
       deleted = true
-      const res = await fetch(apiUrl('/portforwards'), {
+      const res = await apiFetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(buildRecreateBody(session, { localPort: newPort, listenAddress: session.listenAddress })),
@@ -716,13 +763,28 @@ export function PortForwardPanel() {
                       </button>
                       </Tooltip>
                     )}
+                    {session.status === 'error' && (
+                      <Tooltip content="Retry" delay={300} position="bottom" disabled={!isPanelOpen}>
+                      <button
+                        onClick={() => retryPortForward(session)}
+                        disabled={retryingIds.has(session.id) || stoppingIds.has(session.id)}
+                        className="p-1.5 text-theme-text-tertiary hover:text-green-400 hover:bg-theme-hover rounded disabled:opacity-50"
+                      >
+                        {retryingIds.has(session.id) ? (
+                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                        ) : (
+                          <RotateCw className="w-3.5 h-3.5" />
+                        )}
+                      </button>
+                      </Tooltip>
+                    )}
                     <Tooltip content={session.status === 'error' ? 'Dismiss' : 'Stop'} delay={300} position="bottom" disabled={!isPanelOpen}>
                     <button
                       onClick={() => {
                         commitInteraction()
                         stopPortForward(session.id)
                       }}
-                      disabled={stoppingIds.has(session.id)}
+                      disabled={stoppingIds.has(session.id) || retryingIds.has(session.id)}
                       className="p-1.5 text-theme-text-tertiary hover:text-red-400 hover:bg-theme-hover rounded disabled:opacity-50"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
@@ -882,7 +944,7 @@ export function useStartPortForward() {
       localPort?: number
       listenAddress?: string // "127.0.0.1" (default) or "0.0.0.0"
     }) => {
-      const res = await fetch(apiUrl('/portforwards'), {
+      const res = await apiFetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(req),

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -316,7 +316,7 @@ function PanelLoading() {
   return (
     <div className="flex items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs">
       <Loader2 className="w-4 h-4 animate-spin mr-2" />
-      Loading...
+      Loading…
     </div>
   )
 }

package/src/components/resources/ResourcesView.tsx

@@ -23,6 +23,7 @@ import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
+  reasons?: Record<string, string>
   unavailable?: string[]
 }
 
@@ -284,6 +285,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       // Lightweight counts for sidebar (replaces 233 parallel queries)
       resourceCounts={countsData?.counts}
       resourceForbidden={countsData?.forbidden}
+      resourceReasons={countsData?.reasons}
       resourceUnavailable={countsData?.unavailable}
       selectedKindQuery={selectedKindQueryResult}
       largeListGuard={largeListGuard}

package/src/components/settings/MyPermissionsDialog.tsx

@@ -1,17 +1,19 @@
 import { useState, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import { Shield, X, Loader2 } from 'lucide-react'
+import { Shield, X, Loader2, Lock, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
+import { useQuery } from '@tanstack/react-query'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
   rbacApiGroupBadgeClass,
   rbacResourceNameBadgeClass,
   rbacNonResourceUrlBadgeClass,
+  type RBACWhoamiResponse,
 } from '@skyhook-io/k8s-ui'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
-import { useNamespaces, useAuthMe } from '../../api/client'
+import { useNamespaces, useAuthMe, fetchJSON } from '../../api/client'
 import { useRBACWhoami } from '../../api/rbac'
 
 interface MyPermissionsDialogProps {
@@ -71,7 +73,7 @@ export function MyPermissionsDialog({ open, onClose }: MyPermissionsDialogProps)
         <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
           <div className="flex items-center gap-2">
             <Shield className="w-5 h-5 text-theme-text-secondary" />
-            <h2 className="text-lg font-semibold text-theme-text-primary">My Permissions</h2>
+            <h2 className="text-lg font-semibold text-theme-text-primary">Your access on this cluster</h2>
           </div>
           <button
             onClick={onClose}
@@ -134,6 +136,8 @@ export function MyPermissionsDialog({ open, onClose }: MyPermissionsDialogProps)
           ) : whoami ? (
             <PermissionsTable whoami={whoami} />
           ) : null}
+
+          <RestrictedResources enabled={open} />
         </div>
       </div>
     </div>,
@@ -141,7 +145,7 @@ export function MyPermissionsDialog({ open, onClose }: MyPermissionsDialogProps)
   )
 }
 
-function PermissionsTable({ whoami }: { whoami: { resourceRules: any[]; nonResourceRules: any[] } }) {
+function PermissionsTable({ whoami }: { whoami: RBACWhoamiResponse }) {
   const resourceRules = whoami.resourceRules ?? []
   const nonResourceRules = whoami.nonResourceRules ?? []
 
@@ -229,3 +233,59 @@ function ResourceRuleRow({ rule }: { rule: { verbs?: string[]; apiGroups?: strin
     </div>
   )
 }
+
+// displayKind strips the API group from a resource-counts key ("group/Kind" →
+// "Kind"; core kinds have no prefix).
+function displayKind(countKey: string): string {
+  const i = countKey.indexOf('/')
+  return i === -1 ? countKey : countKey.slice(i + 1)
+}
+
+// RestrictedResources surfaces the kinds Radar isn't showing the user (the
+// resource-counts `forbidden` set) — the "what's hidden from me" half of access,
+// alongside the SelfSubjectRulesReview rules above. That set mixes RBAC denials
+// with not-installed/not-watched kinds, so the copy says "usually RBAC" rather
+// than asserting a cause, and links to the docs that carry the unblock RBAC.
+function RestrictedResources({ enabled }: { enabled: boolean }) {
+  const { data } = useQuery<{ forbidden?: string[] }>({
+    queryKey: ['resource-counts', 'your-access'],
+    queryFn: () => fetchJSON('/resource-counts'),
+    enabled,
+    staleTime: 10000,
+  })
+  const forbidden = data?.forbidden ?? []
+  if (forbidden.length === 0) return null
+
+  return (
+    <div>
+      <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-2 flex items-center gap-1.5">
+        <Lock className="w-3.5 h-3.5 text-amber-400" />
+        Restricted or unavailable ({forbidden.length})
+      </div>
+      <p className="text-xs text-theme-text-tertiary mb-2">
+        Resource types Radar isn't showing you — usually because your RBAC doesn't allow listing
+        them, sometimes because the type isn't installed or watched on this cluster. Either way,
+        not an empty cluster.
+      </p>
+      <div className="flex flex-wrap gap-1.5">
+        {forbidden.map((k) => (
+          <span
+            key={k}
+            className="inline-flex items-center px-2 py-0.5 text-xs rounded border border-theme-border bg-theme-elevated text-theme-text-secondary"
+          >
+            {displayKind(k)}
+          </span>
+        ))}
+      </div>
+      <a
+        href="https://radarhq.io/docs/cloud/rbac"
+        target="_blank"
+        rel="noreferrer"
+        className="inline-flex items-center gap-1 text-xs text-accent-text hover:underline mt-2"
+      >
+        How to get access
+        <ExternalLink className="w-3 h-3" />
+      </a>
+    </div>
+  )
+}

package/src/components/shared/LargeClusterNamespacePicker.tsx

@@ -39,7 +39,7 @@ export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
       <div className="max-h-[240px] overflow-y-auto rounded-lg border border-theme-border bg-theme-base">
         {!namespaces ? (
           <div className="px-3 py-6 text-center text-sm text-theme-text-tertiary">
-            Loading namespaces...
+            Loading namespaces…
           </div>
         ) : filtered.length === 0 ? (
           <div className="px-3 py-6 text-center text-sm text-theme-text-tertiary">

package/src/components/traffic/TrafficGraph.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState, useCallback, useRef } from 'react'
+import { useMemo, useEffect, useState, useCallback, useRef, type MutableRefObject } from 'react'
 import {
   ReactFlow,
   Background,
@@ -971,6 +971,33 @@ const nodeTypes = {
   addonGroup: AddonGroupNode,
 }
 
+// Fits the view once nodes have been laid out. Module-scope (not defined inside
+// TrafficGraph's render) so it keeps a stable identity — otherwise it remounts
+// every render and its effect churns. Must render inside <ReactFlow> for the
+// useReactFlow() context; the trigger state is passed in as props.
+function FitViewOnChange({
+  shouldFitViewRef,
+  layoutedNodes,
+}: {
+  shouldFitViewRef: MutableRefObject<boolean>
+  layoutedNodes: Node<TrafficNodeData>[]
+}) {
+  const { fitView } = useReactFlow()
+
+  useEffect(() => {
+    if (shouldFitViewRef.current && layoutedNodes.length > 0) {
+      // Small delay to ensure nodes are rendered
+      const timer = setTimeout(() => {
+        fitView({ padding: 0.2, duration: 200 })
+        shouldFitViewRef.current = false
+      }, 50)
+      return () => clearTimeout(timer)
+    }
+  }, [fitView, layoutedNodes, shouldFitViewRef])
+
+  return null
+}
+
 export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups = false, serviceCategories, addonMode = 'show', trafficSource = '', onSelectionChange }: TrafficGraphProps) {
   const isIstio = trafficSource === 'istio'
   const connLabel = isIstio ? 'req/s' : 'conn'
@@ -1492,24 +1519,6 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
     onSelectionChange?.(null)
   }, [onSelectionChange])
 
-  // FitView handler component - must be inside ReactFlow
-  const FitViewOnChange = () => {
-    const { fitView } = useReactFlow()
-
-    useEffect(() => {
-      if (shouldFitViewRef.current && layoutedNodes.length > 0) {
-        // Small delay to ensure nodes are rendered
-        const timer = setTimeout(() => {
-          fitView({ padding: 0.2, duration: 200 })
-          shouldFitViewRef.current = false
-        }, 50)
-        return () => clearTimeout(timer)
-      }
-    }, [fitView, layoutedNodes])
-
-    return null
-  }
-
   return (
     <div className="w-full h-full relative">
       <ReactFlow
@@ -1535,7 +1544,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       >
         <Background />
         <Controls />
-        <FitViewOnChange />
+        <FitViewOnChange shouldFitViewRef={shouldFitViewRef} layoutedNodes={layoutedNodes} />
       </ReactFlow>
 
       {/* Legend */}

package/src/components/traffic/TrafficView.tsx

@@ -620,13 +620,13 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
   // Toggle L7 filter helpers
   const toggleL7Method = useCallback((method: string) => {
-    setL7Methods(prev => { const next = new Set(prev); next.has(method) ? next.delete(method) : next.add(method); return next })
+    setL7Methods(prev => { const next = new Set(prev); if (next.has(method)) next.delete(method); else next.add(method); return next })
   }, [])
   const toggleL7StatusRange = useCallback((range: string) => {
-    setL7StatusRanges(prev => { const next = new Set(prev); next.has(range) ? next.delete(range) : next.add(range); return next })
+    setL7StatusRanges(prev => { const next = new Set(prev); if (next.has(range)) next.delete(range); else next.add(range); return next })
   }, [])
   const toggleL7Verdict = useCallback((verdict: string) => {
-    setL7Verdicts(prev => { const next = new Set(prev); next.has(verdict) ? next.delete(verdict) : next.add(verdict); return next })
+    setL7Verdicts(prev => { const next = new Set(prev); if (next.has(verdict)) next.delete(verdict); else next.add(verdict); return next })
   }, [])
 
   // Toggle namespace visibility

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -99,7 +99,7 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
         {/* Content */}
         <div className="overflow-y-auto flex-1 px-5 py-4 space-y-4">
           {isLoading && (
-            <div className="text-sm text-theme-text-tertiary text-center py-8">Loading diagnostics...</div>
+            <div className="text-sm text-theme-text-tertiary text-center py-8">Loading diagnostics…</div>
           )}
           {error && (
             <div className="text-sm text-red-400 text-center py-8">Failed to load diagnostics: {(error as Error).message}</div>

package/src/components/workload/WorkloadView.tsx

@@ -199,45 +199,45 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
     renderPortForward: ({ type, namespace: ns, name: n, className }: { type: 'pod' | 'service'; namespace: string; name: string; className?: string }) => (
       <PortForwardButton type={type} namespace={ns} name={n} className={className} />
     ),
-    onDelete: (params: any, callbacks?: any) => deleteMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
+    onDelete: (params: Parameters<typeof deleteMutation.mutate>[0], callbacks?: { onSuccess?: () => void }) => deleteMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
     isDeleting: deleteMutation.isPending,
     cascadeDependents: cascadePreview?.dependents,
     cascadeLoading,
-    onRestart: (params: any) => restartWorkloadMutation.mutate(params),
+    onRestart: (params: Parameters<typeof restartWorkloadMutation.mutate>[0]) => restartWorkloadMutation.mutate(params),
     isRestarting: restartWorkloadMutation.isPending,
     revisions: revisionsList,
     revisionsLoading,
     revisionsError: revisionsError ?? null,
-    onRollback: (params: any, callbacks?: any) => rollbackMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
+    onRollback: (params: Parameters<typeof rollbackMutation.mutate>[0], callbacks?: { onSuccess?: () => void }) => rollbackMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
     isRollingBack: rollbackMutation.isPending,
-    onTriggerCronJob: (params: any) => triggerCronJobMutation.mutate(params),
+    onTriggerCronJob: (params: Parameters<typeof triggerCronJobMutation.mutate>[0]) => triggerCronJobMutation.mutate(params),
     isTriggeringCronJob: triggerCronJobMutation.isPending,
-    onSuspendCronJob: (params: any) => suspendCronJobMutation.mutate(params),
+    onSuspendCronJob: (params: Parameters<typeof suspendCronJobMutation.mutate>[0]) => suspendCronJobMutation.mutate(params),
     isSuspendingCronJob: suspendCronJobMutation.isPending,
-    onResumeCronJob: (params: any) => resumeCronJobMutation.mutate(params),
+    onResumeCronJob: (params: Parameters<typeof resumeCronJobMutation.mutate>[0]) => resumeCronJobMutation.mutate(params),
     isResumingCronJob: resumeCronJobMutation.isPending,
-    onFluxReconcile: (params: any) => fluxReconcileMutation.mutate(params),
+    onFluxReconcile: (params: Parameters<typeof fluxReconcileMutation.mutate>[0]) => fluxReconcileMutation.mutate(params),
     isFluxReconciling: fluxReconcileMutation.isPending,
-    onFluxSyncWithSource: (params: any) => fluxSyncWithSourceMutation.mutate(params),
+    onFluxSyncWithSource: (params: Parameters<typeof fluxSyncWithSourceMutation.mutate>[0]) => fluxSyncWithSourceMutation.mutate(params),
     isFluxSyncing: fluxSyncWithSourceMutation.isPending,
-    onFluxSuspend: (params: any) => fluxSuspendMutation.mutate(params),
+    onFluxSuspend: (params: Parameters<typeof fluxSuspendMutation.mutate>[0]) => fluxSuspendMutation.mutate(params),
     isFluxSuspending: fluxSuspendMutation.isPending,
-    onFluxResume: (params: any) => fluxResumeMutation.mutate(params),
+    onFluxResume: (params: Parameters<typeof fluxResumeMutation.mutate>[0]) => fluxResumeMutation.mutate(params),
     isFluxResuming: fluxResumeMutation.isPending,
-    onArgoSync: (params: any) => argoSyncMutation.mutate(params),
+    onArgoSync: (params: Parameters<typeof argoSyncMutation.mutate>[0]) => argoSyncMutation.mutate(params),
     isArgoSyncing: argoSyncMutation.isPending,
-    onArgoRefresh: (params: any) => argoRefreshMutation.mutate(params),
+    onArgoRefresh: (params: Parameters<typeof argoRefreshMutation.mutate>[0]) => argoRefreshMutation.mutate(params),
     isArgoRefreshing: argoRefreshMutation.isPending,
-    onArgoSuspend: (params: any) => argoSuspendMutation.mutate(params),
+    onArgoSuspend: (params: Parameters<typeof argoSuspendMutation.mutate>[0]) => argoSuspendMutation.mutate(params),
     isArgoSuspending: argoSuspendMutation.isPending,
-    onArgoResume: (params: any) => argoResumeMutation.mutate(params),
+    onArgoResume: (params: Parameters<typeof argoResumeMutation.mutate>[0]) => argoResumeMutation.mutate(params),
     isArgoResuming: argoResumeMutation.isPending,
     canNodeWrite,
-    onCordonNode: (params: any) => cordonMutation.mutate(params),
+    onCordonNode: (params: Parameters<typeof cordonMutation.mutate>[0]) => cordonMutation.mutate(params),
     isCordoningNode: cordonMutation.isPending,
-    onUncordonNode: (params: any) => uncordonMutation.mutate(params),
+    onUncordonNode: (params: Parameters<typeof uncordonMutation.mutate>[0]) => uncordonMutation.mutate(params),
     isUncordoningNode: uncordonMutation.isPending,
-    onDrainNode: (params: any) => drainMutation.mutate(params),
+    onDrainNode: (params: Parameters<typeof drainMutation.mutate>[0]) => drainMutation.mutate(params),
     isDrainingNode: drainMutation.isPending,
   }
 }

package/src/main.tsx

@@ -130,7 +130,7 @@ document.execCommand = function (command: string, showUI?: boolean, value?: stri
         dt.setData('text/plain', text)
         const ev = new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })
         if (!el.dispatchEvent(ev)) return
-      } catch (_e) { /* ClipboardEvent dispatch failed, fall back to insertText */ }
+      } catch { /* ClipboardEvent dispatch failed, fall back to insertText */ }
       _origExecCommand('insertText', false, text)
     }).catch((err) => { console.warn('[Radar] Paste failed:', err) })
     return true