@skyhook-io/radar-app 1.8.0 → 1.8.2

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
+import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo } from '../../api/client'
+
+interface TrackChartSourceDialogProps {
+  open: boolean
+  onClose: () => void
+  /** Chart name of the release this was opened from, for the example prompt. */
+  chartName?: string
+}
+
+// TrackChartSourceDialog lets the user register an OCI chart-source prefix — the
+// OCI analog of `helm repo add`. Helm doesn't persist the ref a release was
+// installed from, so for charts published to an OCI registry (and not managed by
+// GitOps) Radar can only track upgrades once the user declares where they live.
+// Registering a registry/org prefix lets Radar probe "<prefix>/<chartName>".
+export function TrackChartSourceDialog({ open, onClose, chartName }: TrackChartSourceDialogProps) {
+  const [value, setValue] = useState('')
+  const { data: sources } = useHelmOCISources()
+  const { data: clusterInfo } = useClusterInfo()
+  const addSource = useAddOCISource()
+  const removeSource = useRemoveOCISource()
+
+  // In-cluster Radar has no `helm registry login` store (the pod's HELM_CONFIG_HOME
+  // points at an empty /tmp), so private registries can't authenticate — only
+  // public charts can be tracked. Be honest about it rather than silently failing.
+  const inCluster = clusterInfo?.inCluster ?? false
+
+  const trimmed = value.trim()
+  const invalid = trimmed !== '' && !trimmed.startsWith('oci://')
+
+  const handleAdd = () => {
+    if (!trimmed || invalid) return
+    addSource.mutate(trimmed, { onSuccess: () => setValue('') })
+  }
+
+  return (
+    <DialogPortal open={open} onClose={onClose} className="max-w-lg w-full">
+      <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+        <div className="flex items-center justify-center w-10 h-10 rounded-full shrink-0 bg-theme-hover">
+          <Link2 className="w-5 h-5 text-theme-text-secondary" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-semibold text-theme-text-primary">Track chart source</h3>
+          <p className="text-sm text-theme-text-secondary mt-1">
+            Helm doesn&apos;t record where a chart was installed from. Register your OCI
+            registry prefix and Radar will check it for newer versions of your charts.
+          </p>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="p-4 space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-theme-text-secondary mb-2">
+            OCI registry prefix
+          </label>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
+              placeholder="oci://ghcr.io/myorg/charts"
+              aria-invalid={invalid ? true : undefined}
+              className={clsx(
+                'flex-1 px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                invalid ? 'border-red-500/60 focus:ring-red-500' : 'border-theme-border-light focus:ring-accent',
+              )}
+            />
+            <button
+              onClick={handleAdd}
+              disabled={!trimmed || invalid || addSource.isPending}
+              className="btn-brand px-3 py-2 text-sm inline-flex items-center gap-1 disabled:opacity-50 disabled:pointer-events-none"
+            >
+              <Plus className="w-4 h-4" />
+              Add
+            </button>
+          </div>
+          <p className="mt-1 text-xs text-theme-text-tertiary">
+            {invalid
+              ? 'Must be an oci:// reference.'
+              : chartName
+                ? `Radar will look for "${chartName}" under this prefix (and any others below).`
+                : 'Radar probes <prefix>/<chartName> for each untracked release.'}
+          </p>
+        </div>
+
+        {sources && sources.length > 0 && (
+          <div>
+            <p className="text-xs font-medium text-theme-text-tertiary uppercase tracking-wide mb-2">
+              Registered sources
+            </p>
+            <ul className="space-y-1">
+              {sources.map((src) => (
+                <li
+                  key={src}
+                  className="flex items-center justify-between gap-2 px-3 py-2 bg-theme-elevated rounded-lg"
+                >
+                  <span className="text-sm text-theme-text-primary font-mono truncate">{src}</span>
+                  <button
+                    onClick={() => removeSource.mutate(src)}
+                    disabled={removeSource.isPending}
+                    className="p-1 text-theme-text-secondary hover:text-red-400 hover:bg-red-500/10 rounded disabled:opacity-50"
+                    aria-label={`Remove ${src}`}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {inCluster ? (
+          <div className="flex items-start gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
+            <AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
+            <span>
+              Radar is running in-cluster, where it has no{' '}
+              <span className="font-mono">helm registry login</span> credentials — only{' '}
+              <strong>public</strong> charts can be tracked. Private-registry support for in-cluster
+              Radar isn&apos;t available yet.
+            </span>
+          </div>
+        ) : (
+          <p className="text-xs text-theme-text-tertiary">
+            Credentials are reused from your <span className="font-mono">helm registry login</span>.
+            Radar stores no registry secrets.
+          </p>
+        )}
+      </div>
+    </DialogPortal>
+  )
+}

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/home/TrafficSummary.tsx

@@ -100,7 +100,7 @@ export function TrafficSummary({ data, onNavigate }: TrafficSummaryProps) {
       <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
         <div className="flex items-center gap-2">
           <Activity className="w-4 h-4 text-theme-text-tertiary" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Traffic</span>
+          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Live Traffic</span>
         </div>
         {hasFlows && (
           <span className="text-[11px] text-theme-text-tertiary">
@@ -145,7 +145,7 @@ export function TrafficSummary({ data, onNavigate }: TrafficSummaryProps) {
       </div>
 
       <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">
-        Open Traffic
+        Open Live Traffic
         <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
       </div>
       </div>

package/src/components/home/mcpToolCatalog.ts

@@ -126,7 +126,7 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   },
   {
     name: 'get_changes',
-    desc: 'Recent resource creates, updates, and deletes from the cluster timeline. Use to investigate what changed before an incident.',
+    desc: 'Recent resource creates, updates, and deletes from the Kubernetes timeline. Helm release history is separate; use list_helm_releases or get_helm_release include=history,operations for failed upgrades and rollbacks.',
     params: [
       { arg: 'namespace', desc: 'filter to a specific namespace' },
       { arg: 'kind', desc: 'filter to a resource kind (e.g. Deployment)' },
@@ -147,16 +147,16 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   },
   {
     name: 'list_helm_releases',
-    desc: 'All Helm releases in the cluster with status and resource health — name, namespace, chart, version.',
+    desc: 'All Helm releases with status, resource health, storage namespace, Flux ownership, current lastOperation, and capped operation trails for failed upgrades, rollbacks, or stuck pending operations.',
     params: [{ arg: 'namespace', desc: 'filter to a specific namespace' }],
   },
   {
     name: 'get_helm_release',
-    desc: 'Detailed Helm release info with owned resources and their status. Optionally include values, revision history, or a manifest diff between revisions.',
+    desc: 'Detailed Helm release info with owned resources, health, Flux ownership, and current lastOperation; include history and operations for the full revision trail.',
     params: [
-      { arg: 'namespace', required: true, desc: 'release namespace' },
+      { arg: 'namespace', required: true, desc: 'Helm storage namespace; use storageNamespace from list_helm_releases when present' },
       { arg: 'name', required: true, desc: 'release name' },
-      { arg: 'include', desc: 'values, history, diff' },
+      { arg: 'include', desc: 'values, history, operations, diff' },
       { arg: 'diff_revision_1', desc: 'first revision for diff' },
       { arg: 'diff_revision_2', desc: 'second revision for diff (defaults to current)' },
     ],

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/nav/PrimaryNavRail.tsx

@@ -45,7 +45,7 @@ const NAV_ITEMS: NavItemDef[] = [
   { view: 'topology', icon: Network, label: 'Topology' },
   { view: 'applications', icon: Boxes, label: 'Applications' },
   { view: 'timeline', icon: Clock, label: 'Timeline' },
-  { view: 'traffic', icon: Activity, label: 'Traffic' },
+  { view: 'traffic', icon: Activity, label: 'Live Traffic' },
   { view: 'helm', icon: Package, label: 'Helm' },
   { view: 'gitops', icon: GitBranch, label: 'GitOps' },
   { view: 'checks', icon: ShieldCheck, label: 'Checks' },

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>