@skyhook-io/radar-app 1.8.2 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "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",

package/src/App.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from './hooks/useRefreshAnimation'
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
+import { englishPlural } from '@skyhook-io/k8s-ui/utils/pluralize'
 import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useLocation, useSearchParams, useNavigationType, NavigationType } from 'react-router-dom'
 import { HomeView } from './components/home/HomeView'
@@ -44,10 +45,12 @@ import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { CommandPalette } from './components/ui/CommandPalette'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
-import { debugNamespaceLog, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe } from './api/client'
+import { debugNamespaceLog, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe, useAudit } from './api/client'
+import { buildAuditSeverityMap } from './utils/auditBadges'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
+import { useDocumentTitle } from './hooks/useDocumentTitle'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
 import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
@@ -56,7 +59,7 @@ import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNam
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import { MyPermissionsDialog } from './components/settings/MyPermissionsDialog'
 import type { TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
-import { kindToPlural, openExternal, apiVersionToGroup, buildWorkloadPath, searchHitToSelectedResource } from './utils/navigation'
+import { kindToPlural, pluralToKind, openExternal, apiVersionToGroup, buildWorkloadPath, searchHitToSelectedResource } from './utils/navigation'
 import { type OmnibarHandle } from './components/ui/Omnibar'
 import { RadarOmnibar } from './components/ui/RadarOmnibar'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
@@ -123,6 +126,54 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   return 'home'
 }
 
+// Browser tab label for every Radar view, derived from the route URL so it's
+// correct regardless of which component renders it. A detail drawer that opens
+// over a list (?resource=…) is deliberately NOT titled — it's the same page, so
+// it keeps the list's title.
+function radarPageTitle(pathname: string, search = '', apiResources?: { name: string; kind: string; group?: string }[]): string | null {
+  const decode = (s: string) => {
+    try {
+      return decodeURIComponent(s)
+    } catch {
+      return s
+    }
+  }
+  const capitalize = (text: string) =>
+    text ? text.charAt(0).toUpperCase() + text.slice(1) : text
+  const pluralKindTitle = (kind: string, resourceName: string) =>
+    kind.toLowerCase() === resourceName.toLowerCase() ? kind : englishPlural(kind)
+  const pathSegments = pathname.replace(/^\//, '').split('/').filter(Boolean)
+  const view = getViewFromPath(pathname)
+
+  // Full-page resource detail: /workload/<kind>/<ns>/<name> (name may contain '/').
+  if (view === 'workload') return pathSegments.slice(3).map(decode).join('/') || null
+  // Resources is browsed per-kind: /resources/<kind> → "<Kind>" (e.g. ConfigMap);
+  // bare /resources (before it redirects to a default kind) → "Resources".
+  if (view === 'resources') {
+    const resourceName = decode(pathSegments[1] ?? '')
+    if (!resourceName) return 'Resources'
+    const match = apiResources?.find((r) => r.name === resourceName)
+    return pluralKindTitle(match?.kind ?? pluralToKind(resourceName), resourceName)
+  }
+  // GitOps detail is /gitops/detail/<kind>/<ns>/<name> → the resource name;
+  // anything else (the list) → "GitOps".
+  if (view === 'gitops')
+    return pathSegments[1] === 'detail' ? decode(pathSegments[4] ?? '') || 'GitOps' : 'GitOps'
+  if (view === 'applications') {
+    const appKey = new URLSearchParams(search).get('app')
+    if (!appKey) return 'Applications'
+    const decoded = decode(appKey)
+    const slash = decoded.lastIndexOf('/')
+    return slash >= 0 && slash < decoded.length - 1 ? decoded.slice(slash + 1) : decoded
+  }
+
+  // The landing view reads "Overview" rather than "Home" in the tab.
+  if (view === 'home') return 'Overview'
+  // Every other view's label is its id capitalized — getViewFromPath has already
+  // normalized aliases (e.g. /audit → 'checks'), so no lookup table is needed.
+  return capitalize(view)
+}
+
 function AuthBarrier({ authMode }: { authMode: string }) {
   useEffect(() => {
     if (authMode === 'oidc') {
@@ -133,12 +184,12 @@ function AuthBarrier({ authMode }: { authMode: string }) {
   if (authMode === 'oidc') {
     return (
       <div className="flex-1 relative bg-theme-base">
-        <div className="fixed inset-0 pointer-events-none">
+        <div className="absolute inset-0 pointer-events-none">
           <img
             src={radarLoadingIcon}
             alt=""
             aria-hidden
-            // Integer offset (vw/2 − 22) — matches the Connecting/Opening splashes;
+            // Integer offset (50% − 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)' }}
@@ -182,10 +233,10 @@ function AuthBarrier({ authMode }: { authMode: string }) {
 // 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') ?? ''}`
+  return `${pathname}\n${new URLSearchParams(search).get('app') ?? ''}`
 }
 
-function AppInner() {
+function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manageDocumentTitle?: boolean; documentTitleSuffix?: string }) {
   const navigate = useNavigate()
   const location = useLocation()
   const navigationType = useNavigationType()
@@ -279,6 +330,18 @@ function AppInner() {
   // Get mainView from URL path
   const mainView = getViewFromPath(location.pathname)
 
+  // Initialize the kind→plural discovery map app-wide (not just on ResourcesView
+  // mount) so the omnibar can open a CRD hit with an irregular plural from any
+  // view — kindToPlural would otherwise English-guess the route before a
+  // resources view has run initNavigationMap().
+  const { data: navApiResources } = useAPIResources()
+  useEffect(() => { if (navApiResources) initNavigationMap(navApiResources) }, [navApiResources])
+
+  // One URL-derived tab title for every view (see radarPageTitle). Driving it
+  // from the URL — not the mounted component. Off unless the host opts in
+  // (standalone passes manageDocumentTitle), so embedders keep title ownership.
+  useDocumentTitle(manageDocumentTitle ? radarPageTitle(location.pathname, location.search, navApiResources) : null, documentTitleSuffix)
+
   // Workload slug after `/resources/` (defaults to `pods`). Bare `/resources` redirects to `/resources/pods`.
   const normalizedResourcesKindSlug = useMemo(() => {
     const m = location.pathname.match(/^\/resources(?:\/([^/]+))?/)
@@ -387,15 +450,6 @@ function AppInner() {
   const [showSettings, setShowSettings] = useState(false)
   const [showMyPermissions, setShowMyPermissions] = useState(false)
 
-  // Listen for desktop "open-settings" event from native menu
-  useEffect(() => {
-    const wailsRuntime = (window as unknown as Record<string, unknown>).runtime as
-      | { EventsOn?: (event: string, callback: () => void) => () => void }
-      | undefined
-    if (!wailsRuntime?.EventsOn) return
-    return wailsRuntime.EventsOn('open-settings', () => setShowSettings(true))
-  }, [])
-
   // Listen for "open-settings" DOM event (used by MCPSetupDialog etc.)
   useEffect(() => {
     const handler = () => setShowSettings(true)
@@ -535,11 +589,32 @@ function AppInner() {
     navigate({ pathname: `/resources/${pluralKind}`, search: newParams.toString() })
   }, [searchParams, navigate])
 
-  // From the Issues queue: a GitOps reconciler subject (Argo Application / Flux
-  // Kustomization / HelmRelease) routes to its rich detail page (tree + insights
-  // + ops), not the generic resource drawer that's a dead-end for it. Member
-  // resources (Pods, Services, …) fall through to the standard resource view.
+  const navigateToHelmRelease = useCallback((namespace: string, name: string, storageNamespace?: string) => {
+    const newParams = new URLSearchParams()
+    const globalNamespaces = searchParams.get('namespaces')
+    if (globalNamespaces) {
+      newParams.set('namespaces', globalNamespaces)
+    }
+    newParams.set('release', `${namespace}/${name}`)
+    if (storageNamespace) {
+      newParams.set('releaseStorage', storageNamespace)
+    }
+    setSelectedHelmRelease({ namespace, name, storageNamespace })
+    if (mainView === 'helm') {
+      setSearchParams(newParams, { replace: true })
+      return
+    }
+    navigate({ pathname: '/helm', search: newParams.toString() })
+  }, [mainView, searchParams, navigate, setSearchParams])
+
+  // From the Issues queue: special controller/manager subjects route to their
+  // rich detail pages, not the generic resource drawer that's a dead-end for
+  // them. Member resources (Pods, Services, …) fall through to resources.
   const navigateFromIssue = useCallback((resource: SelectedResource) => {
+    if (resource.kind === 'HelmRelease' && resource.group === 'helm.sh' && resource.namespace) {
+      navigateToHelmRelease(resource.namespace, resource.name)
+      return
+    }
     const gitOpsPath = gitOpsRouteForResource({
       apiVersion: resource.group ? `${resource.group}/v1` : 'v1',
       kind: resource.kind,
@@ -550,7 +625,7 @@ function AppInner() {
       return
     }
     navigateToResourceList(resource)
-  }, [navigate, navigateToResourceList])
+  }, [navigate, navigateToHelmRelease, navigateToResourceList])
 
   // Collapse from expanded WorkloadView back to drawer
   const handleCollapseFromExpanded = useCallback(() => {
@@ -569,12 +644,6 @@ function AppInner() {
   const namespaceSwitcherRef = useRef<NamespaceSwitcherHandle>(null)
   const omnibarRef = useRef<OmnibarHandle>(null)
 
-  // Initialize the kind→plural discovery map app-wide (not just on ResourcesView
-  // mount) so the omnibar can open a CRD hit with an irregular plural from any
-  // view — kindToPlural would otherwise English-guess the route before a
-  // resources view has run n().
-  const { data: navApiResources } = useAPIResources()
-  useEffect(() => { if (navApiResources) initNavigationMap(navApiResources) }, [navApiResources])
   const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
 
   // View switching keyboard shortcuts
@@ -724,6 +793,16 @@ function AppInner() {
   // Connection state (for graceful startup)
   const { connection, retry: retryConnection, isRetrying, updateFromSSE: updateConnectionFromSSE } = useConnection()
 
+  // The app's content surface is ready to show: auth resolved, not mid context-
+  // switch, and the cluster connection is live. The main content area gates on
+  // exactly this, and so do the overlay drawers — otherwise a deep-link/refresh
+  // with `?resource=`/`?release=` renders the drawer on top of the connecting/
+  // switching splash, pushing the centered loading logo off-center and showing an
+  // empty drawer over a not-yet-loaded view. Gating both on the SAME readiness so
+  // a drawer only ever sits over a real content surface.
+  const contentReady = !isSwitching && !authMePending &&
+    !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connected'
+
   // Query client for cache invalidation
   const queryClient = useQueryClient()
 
@@ -986,12 +1065,13 @@ function AppInner() {
   // mutation immediately, which re-introduces the same race. The state→URL
   // effect propagates state=[] → URL on its own after onSuccess flips state.
   const clearAllNamespaces = useCallback(() => {
+    if (namespaceScope?.cacheScoped) return
     if (namespaces.length === 0) return
     setActiveNamespace.mutate(
       { namespaces: [] },
       { onSuccess: () => setNamespaces([]) },
     )
-  }, [namespaces.length, setActiveNamespace])
+  }, [namespaceScope?.cacheScoped, namespaces.length, setActiveNamespace])
   const initialBookmarkReconciledRef = useRef(false)
   const scopeActives = useMemo(() => namespaceScope?.actives ?? [], [namespaceScope?.actives])
   const namespaceScopeKey = useMemo(() => namespaceScope ? [...scopeActives].sort().join(',') : null, [namespaceScope, scopeActives])
@@ -1015,6 +1095,14 @@ function AppInner() {
     if (!initialBookmarkReconciledRef.current) {
       initialBookmarkReconciledRef.current = true
       if (!sameAsState && sortedState.length > 0) {
+        if (namespaceScope.cacheScoped && (!namespaceScope.namespaceRescope || sortedState.length !== 1)) {
+          debugNamespaceLog('app:scope-mirror-cache-scope-preserve', {
+            stateNamespaces: sortedState,
+            scopeActives: sortedScope,
+          })
+          setNamespaces(scopeActives)
+          return
+        }
         debugNamespaceLog('app:scope-mirror-bookmark-to-server', {
           stateNamespaces: sortedState,
           scopeActives: sortedScope,
@@ -1117,6 +1205,12 @@ function AppInner() {
     })
 
     if (urlNamespaces.join(',') !== namespacesKey) {
+      if (namespaceScope?.cacheScoped && (!namespaceScope.namespaceRescope || urlNamespaces.length !== 1)) {
+        const scopedNamespaces = namespaceScope.actives ?? []
+        debugNamespaceLog('app:url-sync-cache-scope-preserve', { scopedNamespaces })
+        setNamespaces(scopedNamespaces)
+        return
+      }
       debugNamespaceLog('app:url-sync-set-namespaces', { nextNamespaces: urlNamespaces })
       setNamespaces(urlNamespaces)
       if (namespaceScope) {
@@ -1263,6 +1357,29 @@ function AppInner() {
     }
   }, [displayedTopology, visibleKinds, namespaces, topologyMode])
 
+  // Cluster Audit findings, joined onto topology nodes by the audit key the
+  // backend stamps on each node (data.auditKey). The graph surfaces DANGER only
+  // (warnings would turn a dense graph into a heatmap); the node component reads
+  // data.auditDanger. Re-runs only when findings change, and copies nodes only
+  // when there are findings to attach — no overhead on clusters with none.
+  const audit = useAudit(namespaces)
+  const auditSeverityMap = useMemo(
+    () => buildAuditSeverityMap(audit.data?.findings, audit.data?.checks),
+    [audit.data?.findings, audit.data?.checks],
+  )
+  const topologyWithAudit = useMemo((): Topology | null => {
+    if (!filteredTopology) return null
+    if (auditSeverityMap.size === 0) return filteredTopology
+    return {
+      ...filteredTopology,
+      nodes: filteredTopology.nodes.map(node => {
+        const counts = auditSeverityMap.get(node.data.auditKey as string)
+        if (!counts) return node
+        return { ...node, data: { ...node.data, auditDanger: counts.danger, auditWarning: counts.warning, auditMessages: counts.messages } }
+      }),
+    }
+  }, [filteredTopology, auditSeverityMap])
+
   // The graph node id of the currently open resource, used to highlight it on
   // the canvas. Looked up from the topology (not reconstructed) because node
   // ids are `<lowercaseKind>/<ns>/<name>` with special prefixes for CRD
@@ -1579,20 +1696,20 @@ function AppInner() {
       )}
 
       {/* Connecting view — shown during initial connection or retry.
-          Icon is viewport-anchored so its screen position matches the
+          Icon is pane-anchored so its screen position matches the
           host hub splash across cross-document transitions. */}
       {!isSwitching && !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connecting' && (
         <div className="flex-1 relative bg-theme-base">
-          {/* Icon absolutely anchored to viewport-center. The label block
+          {/* Icon absolutely anchored to the pane center. The label block
               sits at a fixed offset below — independent of label height
               so multi-line messages (context + progress) don't shift the
               icon's screen position. */}
-          <div className="fixed inset-0 pointer-events-none">
+          <div className="absolute inset-0 pointer-events-none">
             <img
               src={radarLoadingIcon}
               alt=""
               aria-hidden
-              // Integer offset (vw/2 − 22) — avoids sub-pixel jitter from
+              // Integer offset (50% − 22) — avoids sub-pixel jitter from
               // `translate(-50%, -50%)` on odd-width viewports.
               className="absolute w-11 h-11"
               style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
@@ -1620,15 +1737,15 @@ function AppInner() {
         </div>
       )}
 
-      {/* Context switching overlay — icon viewport-anchored, label below. */}
+      {/* Context switching overlay — icon pane-anchored, label below. */}
       {isSwitching && (
         <div className="flex-1 relative bg-theme-base">
-          <div className="fixed inset-0 pointer-events-none">
+          <div className="absolute inset-0 pointer-events-none">
             <img
               src={radarLoadingIcon}
               alt=""
               aria-hidden
-              // Integer offset (vw/2 − 22) — avoids sub-pixel jitter from
+              // Integer offset (50% − 22) — avoids sub-pixel jitter from
               // `translate(-50%, -50%)` on odd-width viewports.
               className="absolute w-11 h-11"
               style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
@@ -1674,7 +1791,7 @@ function AppInner() {
       )}
 
       {/* Main content - only show when connected and authenticated */}
-      {!isSwitching && !authMePending && !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connected' && <div className="flex-1 flex overflow-hidden">
+      {contentReady && <div className="flex-1 flex overflow-hidden">
         <ErrorBoundary>
         {/* Home dashboard */}
         {mainView === 'home' && (
@@ -1773,7 +1890,7 @@ function AppInner() {
 
                 <div className="flex-1 relative">
                   <TopologyGraph
-                    topology={filteredTopology}
+                    topology={topologyWithAudit}
                     viewMode={topologyMode}
                     groupingMode={effectiveGroupingMode}
                     hideGroupHeader={hideGroupHeader}
@@ -1858,17 +1975,7 @@ function AppInner() {
           <HelmView
             namespaces={namespaces}
             selectedRelease={selectedHelmRelease}
-            onReleaseClick={(ns, name, storageNamespace) => {
-              setSelectedHelmRelease({ namespace: ns, name, storageNamespace })
-              const params = new URLSearchParams(window.location.search)
-              params.set('release', `${ns}/${name}`)
-              if (storageNamespace) {
-                params.set('releaseStorage', storageNamespace)
-              } else {
-                params.delete('releaseStorage')
-              }
-              setSearchParams(params, { replace: true })
-            }}
+            onReleaseClick={navigateToHelmRelease}
           />
         )}
 
@@ -1926,7 +2033,7 @@ function AppInner() {
           <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">
+            <div className="absolute inset-0 pointer-events-none">
               <img
                 src={radarLoadingIcon}
                 alt=""
@@ -1982,8 +2089,10 @@ function AppInner() {
         </ErrorBoundary>
       </div>}
 
-      {/* Resource detail drawer — stays mounted, expands to full-screen WorkloadView */}
-      {resourceDrawer.shouldRender && drawerResource && (
+      {/* Resource detail drawer — stays mounted, expands to full-screen WorkloadView.
+          Gated on contentReady so it never renders over the connecting/switching
+          splash (which would push the centered logo off-center). */}
+      {contentReady && resourceDrawer.shouldRender && drawerResource && (
         <ResourceDetailDrawer
           resource={drawerResource}
           initialTab={drawerInitialTab}
@@ -2007,8 +2116,8 @@ function AppInner() {
         />
       )}
 
-      {/* Helm release drawer */}
-      {helmDrawer.shouldRender && drawerHelmRelease && (
+      {/* Helm release drawer — same contentReady gate as the resource drawer. */}
+      {contentReady && helmDrawer.shouldRender && drawerHelmRelease && (
         <HelmReleaseDrawer
           release={drawerHelmRelease}
           isOpen={helmDrawer.isOpen}
@@ -2081,6 +2190,7 @@ function AppInner() {
             { onSettled: () => setNamespaces([]) },
           )}
           onSetNamespaces={(ns) => {
+            if (namespaceScope?.cacheScoped && ns.length !== 1) return
             setNamespaces(ns)
             setActiveNamespace.mutate({ namespaces: ns })
           }}
@@ -2154,14 +2264,14 @@ function FloatingButtons({ showHelp, showCommandPalette, showDiagnostics, onHelp
 }
 
 // Main App component wrapped with providers
-function App() {
+function App({ manageDocumentTitle = false, documentTitleSuffix }: { manageDocumentTitle?: boolean; documentTitleSuffix?: string }) {
   return (
     <ConnectionProvider>
       <CapabilitiesProvider>
         <ContextSwitchProvider>
           <DockProvider>
             <KeyboardShortcutProvider>
-              <AppInner />
+              <AppInner manageDocumentTitle={manageDocumentTitle} documentTitleSuffix={documentTitleSuffix} />
             </KeyboardShortcutProvider>
           </DockProvider>
         </ContextSwitchProvider>

package/src/RadarApp.tsx

@@ -70,6 +70,21 @@ export interface RadarAppProps {
    * See ./context/NavCustomization for the slot shape.
    */
   navSlots?: NavCustomization;
+  /**
+   * Whether Radar may set the browser tab title (`document.title`) per view.
+   * Defaults to OFF: embedders keep title ownership without opting out. The
+   * standalone binary opts in (`web/src/main.tsx` renders
+   * `<RadarApp manageDocumentTitle />`), and any full-page embed that wants
+   * Radar's per-view titles can do the same.
+   */
+  manageDocumentTitle?: boolean;
+  /**
+   * Trailing string appended after the per-view label (only when
+   * `manageDocumentTitle` is on). It's the *full* suffix including any
+   * separator, so a host can rebrand (`' — My Cloud'`) or drop it (`''`).
+   * Defaults to `' · Radar'`.
+   */
+  documentTitleSuffix?: string;
   /**
    * Initial route for `router: 'memory'` (ignored for 'browser'). Lets a host
    * deep-link a specific view (e.g. '/topology') without owning the URL bar —
@@ -116,6 +131,8 @@ export function RadarApp({
   router = 'browser',
   queryClient,
   navSlots,
+  manageDocumentTitle = false,
+  documentTitleSuffix,
   initialPath,
 }: RadarAppProps): React.ReactElement {
   // Apply runtime config during render so module-level singletons are set
@@ -136,7 +153,7 @@ export function RadarApp({
       <QueryClientProvider client={client}>
         <ToastProvider>
           <NavCustomizationProvider value={navSlots}>
-            <App />
+            <App manageDocumentTitle={manageDocumentTitle} documentTitleSuffix={documentTitleSuffix} />
           </NavCustomizationProvider>
         </ToastProvider>
       </QueryClientProvider>

package/src/api/client.ts

@@ -16,8 +16,11 @@ import type {
   HelmReleaseDetail,
   HelmValues,
   ManifestDiff,
+  NotesDiff,
+  ResourceDiff,
   UpgradeInfo,
   BatchUpgradeInfo,
+  ValuesDiff,
   ValuesPreviewResponse,
   HelmRepository,
   ChartSearchResult,
@@ -377,6 +380,28 @@ export function useResourceAudit(kind: string, namespace: string, name: string)
   })
 }
 
+// Live Issues that touch ONE resource — its own issues plus, for a workload, its
+// owned pods' issues (server-side owner rollup via issues.RelatedIssues). Backs
+// the "Operational Issues" section in the resource detail. Cluster-scoped
+// resources pass "_" for namespace; namespaced ones also scope the scan via
+// ?namespaces= for a cheap, bounded Compose.
+export function useResourceIssues(kind: string, group: string | undefined, namespace: string, name: string, enabled = true) {
+  const clusterScoped = !namespace
+  const pathNs = clusterScoped ? '_' : encodeURIComponent(namespace)
+  const params = new URLSearchParams()
+  if (group) params.set('group', group)
+  const path = `/issues/resource/${encodeURIComponent(kind)}/${pathNs}/${encodeURIComponent(name)}`
+  const qs = params.toString()
+  return useQuery<Issue[]>({
+    queryKey: ['issues', 'resource', kind, group ?? '', namespace, name],
+    queryFn: () => fetchJSON(`${path}${qs ? `?${qs}` : ''}`),
+    // No refetchInterval: a drawer doesn't need to poll; staleTime keeps it fresh
+    // on reopen without re-running an uncapped Compose every 30s.
+    staleTime: 30000,
+    enabled: enabled && !!kind && !!name,
+  })
+}
+
 // Audit settings
 export interface AuditSettings {
   ignoredNamespaces: string[]
@@ -2358,11 +2383,14 @@ export function useHelmManifest(namespace: string, name: string, revision?: numb
 }
 
 // Get values for a Helm release. `enabled` see useHelmManifest.
-export function useHelmValues(namespace: string, name: string, allValues?: boolean, enabled = true) {
-  const params = allValues ? '?all=true' : ''
+export function useHelmValues(namespace: string, name: string, allValues?: boolean, enabled = true, revision?: number) {
+  const params = new URLSearchParams()
+  if (allValues) params.set('all', 'true')
+  if (revision && revision > 0) params.set('revision', String(revision))
+  const query = params.toString() ? `?${params.toString()}` : ''
   return useQuery<HelmValues>({
-    queryKey: ['helm-values', namespace, name, allValues],
-    queryFn: () => fetchJSON(`/helm/releases/${namespace}/${name}/values${params}`),
+    queryKey: ['helm-values', namespace, name, allValues, revision],
+    queryFn: () => fetchJSON(`/helm/releases/${namespace}/${name}/values${query}`),
     enabled: Boolean(namespace && name && enabled),
     staleTime: 60000,
   })
@@ -2385,6 +2413,61 @@ export function useHelmManifestDiff(
   })
 }
 
+export function useHelmValuesDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  allValues = false,
+  enabled = true,
+) {
+  return useQuery<ValuesDiff>({
+    queryKey: ['helm-values-diff', namespace, name, revision1, revision2, allValues],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        revision1: String(revision1),
+        revision2: String(revision2),
+      })
+      if (allValues) params.set('all', 'true')
+      return fetchJSON(`/helm/releases/${namespace}/${name}/values/diff?${params.toString()}`)
+    },
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
+export function useHelmNotesDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  enabled = true,
+) {
+  return useQuery<NotesDiff>({
+    queryKey: ['helm-notes-diff', namespace, name, revision1, revision2],
+    queryFn: () =>
+      fetchJSON(`/helm/releases/${namespace}/${name}/notes/diff?revision1=${revision1}&revision2=${revision2}`),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
+export function useHelmResourceDiff(
+  namespace: string,
+  name: string,
+  revision1: number,
+  revision2: number,
+  enabled = true,
+) {
+  return useQuery<ResourceDiff>({
+    queryKey: ['helm-resource-diff', namespace, name, revision1, revision2],
+    queryFn: () =>
+      fetchJSON(`/helm/releases/${namespace}/${name}/resources/diff?revision1=${revision1}&revision2=${revision2}`),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
+    staleTime: 60000,
+  })
+}
+
 // Check for upgrade availability (lazy - called when drawer opens)
 export function useHelmUpgradeInfo(namespace: string, name: string, enabled = true) {
   return useQuery<UpgradeInfo>({
@@ -3147,6 +3230,11 @@ export interface NamespaceScope {
   authoritative: boolean
   /** false when clearing would leave no usable namespace fallback. */
   canClearNamespace: boolean
+  /** true when the backend informer cache is pinned to a namespace. */
+  cacheScoped: boolean
+  cacheScopeNamespace?: string
+  /** true when this client may rebuild the local cache for another namespace. */
+  namespaceRescope: boolean
 }
 
 export function useNamespaceScope() {
@@ -3158,6 +3246,7 @@ export function useNamespaceScope() {
 }
 
 const NAMESPACE_SWITCH_TIMEOUT = 5000
+const NAMESPACE_RESCOPE_TIMEOUT = 120000
 
 export function debugNamespaceLog(label: string, payload?: Record<string, unknown>) {
   if (typeof window === 'undefined') return
@@ -3184,7 +3273,16 @@ export function useSetActiveNamespace() {
     mutationFn: async ({ namespaces }) => {
       debugNamespaceLog('mutation:start', { namespaces })
       const controller = new AbortController()
-      const timeoutId = setTimeout(() => controller.abort(), NAMESPACE_SWITCH_TIMEOUT)
+      const currentScope = queryClient.getQueryData<NamespaceScope>(['namespace-scope'])
+      // cacheScoped is a stable per-process property (the server's --namespace-scope
+      // flag). If the scope query is missing/stale we can't yet tell a cheap
+      // view-filter change from a cache-rebuilding rescope, so bias to the long
+      // timeout — only a confirmed non-scoped session gets the fast switch timeout.
+      // Aborting a real rebuild at 5s surfaces a spurious failure while the server
+      // keeps going.
+      const isRescope = currentScope?.cacheScoped !== false
+      const timeoutMs = isRescope ? NAMESPACE_RESCOPE_TIMEOUT : NAMESPACE_SWITCH_TIMEOUT
+      const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
       const startedAt = performance.now()
       try {
         const response = await apiFetch(`${getApiBase()}/cluster/namespace`, {
@@ -3212,7 +3310,9 @@ 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.', { cause: error })
+          throw new Error(isRescope
+            ? 'Namespace rescope timed out. The cluster may still be loading.'
+            : 'Namespace switch timed out. The cluster may be unreachable.', { cause: error })
         }
         throw error
       }
@@ -3223,7 +3323,13 @@ export function useSetActiveNamespace() {
         mode: scope.mode,
         accessibleCount: scope.accessibleNamespaces.length,
       })
+      if (scope.cacheScoped) {
+        queryClient.removeQueries({ predicate: query => query.queryKey[0] !== 'namespace-scope' })
+      }
       queryClient.setQueryData<NamespaceScope>(['namespace-scope'], scope)
+      if (scope.cacheScoped) {
+        queryClient.invalidateQueries()
+      }
       debugNamespaceLog('mutation:success-after-scope-cache-write')
     },
     onError: () => {