@skyhook-io/radar-app 1.3.1 → 1.3.3

package/package.json

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

@@ -6,7 +6,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useLocation, useSearchParams, useNavigationType, NavigationType } from 'react-router-dom'
 import { HomeView } from './components/home/HomeView'
 import { DebugOverlay } from './components/DebugOverlay'
-import { TopologyGraph, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
+import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
 import { TimelineView } from './components/timeline/TimelineView'
 import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
@@ -17,6 +17,7 @@ import { HelmView } from './components/helm/HelmView'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
 import { AuditView } from './components/audit/AuditView'
+import { IssuesPane } from './components/issues/IssuesPane'
 import { GitOpsView } from './components/gitops/GitOpsView'
 import { HelmReleaseDrawer } from './components/helm/HelmReleaseDrawer'
 import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './components/portforward/PortForwardManager'
@@ -41,7 +42,7 @@ import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/con
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 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, Settings, SquareTerminal, ShieldCheck, GitBranch, Shield as ShieldIcon } from 'lucide-react'
+import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
@@ -91,34 +92,8 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 ])
 
 // Convert API resource name back to topology node ID prefix
-function apiResourceToNodeIdPrefix(apiResource: string): string {
-  const prefixMap: Record<string, string> = {
-    'pods': 'pod',
-    'services': 'service',
-    'deployments': 'deployment',
-    'daemonsets': 'daemonset',
-    'statefulsets': 'statefulset',
-    'replicasets': 'replicaset',
-    'ingresses': 'ingress',
-    'gateways': 'gateway',
-    'httproutes': 'httproute',
-    'grpcroutes': 'grpcroute',
-    'tcproutes': 'tcproute',
-    'tlsroutes': 'tlsroute',
-    'configmaps': 'configmap',
-    'secrets': 'secret',
-    'horizontalpodautoscalers': 'horizontalpodautoscaler',
-    'jobs': 'job',
-    'cronjobs': 'cronjob',
-    'persistentvolumeclaims': 'persistentvolumeclaim',
-    'namespaces': 'namespace',
-    'httpproxies': 'httpproxy', // Contour
-  }
-  return prefixMap[apiResource] || apiResource.replace(/s$/, '')
-}
-
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare' | 'issues'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -134,6 +109,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'audit') return 'audit'
   if (path === 'gitops') return 'gitops'
   if (path === 'compare') return 'compare'
+  if (path === 'issues') return 'issues'
   return 'home'
 }
 
@@ -301,6 +277,8 @@ function AppInner() {
   // Topology filter state
   const [visibleKinds, setVisibleKinds] = useState<Set<NodeKind>>(() => new Set(DEFAULT_VISIBLE_KINDS))
   const [filterSidebarCollapsed, setFilterSidebarCollapsed] = useState(false)
+  // Topology node-search → canvas focus request (nonce lets the same node re-focus)
+  const [topologyFocus, setTopologyFocus] = useState<{ id: string; nonce: number } | null>(null)
   // Track CRD kinds that have been auto-added to visibleKinds so we don't override user toggles
   const seededCRDKindsRef = useRef<Set<string>>(new Set())
 
@@ -344,6 +322,14 @@ function AppInner() {
   // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
   const suppressViewClearRef = useRef(false)
 
+  // On a history Pop (back/forward) the URL is authoritative. The URL-write
+  // effect, running with not-yet-synced state, would otherwise write the stale
+  // state back and revert the Pop — and oscillate with the URL→state read
+  // effect (infinite re-render, React #185, blank page). Suppress the writer
+  // for the synchronous reconciliation burst after a Pop, then auto-clear (see
+  // the arming effect) so later user-driven writes are never affected.
+  const skipUrlWriteAfterPopRef = useRef(false)
+
   // Close resource drawer when the /resources route no longer matches the
   // selected drawer resource. This covers both in-view kind switches and
   // cross-kind navigations from expanded drawers (for example Node -> View Pods).
@@ -409,6 +395,27 @@ function AppInner() {
     }
   }, [selectedResource])
 
+  // Navigate from a detector finding (Audit / Issues) to the resources list for
+  // its kind, opening the resource. Shared by both queues — the body was
+  // duplicated verbatim at each render site. Encodes the opened resource in the
+  // URL (?resource=ns/name) — the same deep-link shape the resources view
+  // round-trips — so refresh/share keeps the drawer open instead of dropping it.
+  const navigateToResourceList = useCallback((resource: SelectedResource) => {
+    const pluralKind = kindToPlural(resource.kind)
+    setSelectedResource({ ...resource, kind: pluralKind })
+    const newParams = new URLSearchParams(searchParams)
+    newParams.delete('kind')
+    newParams.delete('mode')
+    newParams.delete('group')
+    newParams.set('resource', resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name)
+    if (resource.group) {
+      newParams.set('apiGroup', resource.group)
+    } else {
+      newParams.delete('apiGroup')
+    }
+    navigate({ pathname: `/resources/${pluralKind}`, search: newParams.toString() })
+  }, [searchParams, navigate])
+
   // Collapse from expanded WorkloadView back to drawer
   const handleCollapseFromExpanded = useCallback(() => {
     suppressViewClearRef.current = true
@@ -843,10 +850,35 @@ function AppInner() {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- namespaces and setActiveNamespace are intentionally excluded; we only react to server-side changes.
   }, [namespaceScope, namespaceScopeKey])
 
+  // Arm the skip on every history Pop (location.key changes per nav), then
+  // clear it on the next macrotask. The revert/oscillation is a synchronous
+  // re-render burst, so a macrotask-deferred clear covers it; clearing
+  // afterward means a stale arm can't survive into an unrelated later write
+  // (e.g. a Pop that changes none of the write effect's deps would otherwise
+  // leave the flag set and silently drop the next user-driven URL write).
+  useEffect(() => {
+    if (navigationType !== NavigationType.Pop) {
+      // Any non-Pop navigation clears the guard. Without this, a Push/Replace
+      // that lands before the macrotask fires would run this cleanup (cancelling
+      // the timeout) and re-run as a no-op, leaving the flag stuck true and
+      // silently suppressing all later URL writes.
+      skipUrlWriteAfterPopRef.current = false
+      return
+    }
+    skipUrlWriteAfterPopRef.current = true
+    const id = setTimeout(() => { skipUrlWriteAfterPopRef.current = false }, 0)
+    return () => clearTimeout(id)
+  }, [location.key, navigationType])
+
   // Update URL query params when state changes (path is handled by setMainView)
   // Read from window.location.search (not React Router's searchParams) to preserve
   // params set by child components via window.history.replaceState (e.g., kind from ResourcesView).
   useEffect(() => {
+    // Don't write (and revert) the URL while state is still catching up to a
+    // Pop — the read effect below owns syncing state from the popped URL. The
+    // flag auto-clears on the next macrotask, so this never blocks a later
+    // user-driven write.
+    if (skipUrlWriteAfterPopRef.current) return
     const currentSearch = window.location.search
     const params = new URLSearchParams(currentSearch)
 
@@ -1045,6 +1077,21 @@ function AppInner() {
     }
   }, [displayedTopology, visibleKinds, namespaces, topologyMode])
 
+  // 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
+  // collisions — rebuilding the string can't match those reliably.
+  const selectedNodeId = useMemo(() => {
+    if (!selectedResource) return undefined
+    const ns = selectedResource.namespace || ''
+    const match = topology?.nodes.find(n =>
+      ((n.data.namespace as string) || '') === ns &&
+      n.name === selectedResource.name &&
+      (kindToPlural(n.kind) === selectedResource.kind || n.kind === selectedResource.kind)
+    )
+    return match?.id
+  }, [selectedResource, topology])
+
   // Filter handlers
   const handleToggleKind = useCallback((kind: NodeKind) => {
     setVisibleKinds(prev => {
@@ -1253,18 +1300,6 @@ function AppInner() {
             </button>
           )}
 
-          {/* My Permissions — what the current user can do in the cluster,
-              computed live by the apiserver via SelfSubjectRulesReview.
-              Available in embedded mode too — Radar Hub users still benefit
-              from "why can't I do X" debugging. */}
-          <button
-            onClick={() => setShowMyPermissions(true)}
-            className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-            title="My permissions in this cluster"
-          >
-            <ShieldIcon className="w-4 h-4" />
-          </button>
-
           {/* User menu (when auth enabled) — hidden in embedded mode;
               host app typically provides its own via rightExtras. */}
           {!navCustomization.embedded && <UserMenu />}
@@ -1497,13 +1532,27 @@ function AppInner() {
                     groupingMode={effectiveGroupingMode}
                     hideGroupHeader={hideGroupHeader}
                     onNodeClick={handleNodeClick}
-                    selectedNodeId={selectedResource ? `${apiResourceToNodeIdPrefix(selectedResource.kind)}-${selectedResource.namespace}-${selectedResource.name}` : undefined}
+                    selectedNodeId={selectedNodeId}
                     paused={topologyPaused}
                     onTogglePause={handleTogglePause}
                     onMaximizeNamespace={(ns) => setActiveNamespace.mutate({ namespaces: [ns] })}
                     namespaceBreadcrumb={namespaces.length === 1 ? namespaces[0] : undefined}
                     onClearNamespace={namespaces.length >= 1 ? () => setActiveNamespace.mutate({ namespaces: [] }) : undefined}
                     namespacesKey={namespaces.join(',')}
+                    focusNodeId={topologyFocus?.id}
+                    focusNonce={topologyFocus?.nonce}
+                  />
+
+                  {/* Topology node search overlay - top left */}
+                  <TopologySearch
+                    nodes={filteredTopology?.nodes ?? []}
+                    allNodes={topology?.nodes}
+                    viewModeLabel={topologyMode === 'fleet' ? 'Fleet' : topologyMode === 'traffic' ? 'Traffic' : 'Resources'}
+                    onNodeSelect={handleNodeClick}
+                    onZoomToNode={(id) => setTopologyFocus((prev) => ({ id, nonce: (prev?.nonce ?? 0) + 1 }))}
+                    // Stack below the namespace breadcrumb (shown only for a single
+                    // namespace) so the two don't overlap in the top-left corner.
+                    triggerClassName={namespaces.length === 1 ? 'top-12 left-3' : 'top-3 left-3'}
                   />
 
                   {/* Topology controls overlay - top right */}
@@ -1612,21 +1661,18 @@ function AppInner() {
           <AuditView
             namespaces={namespaces}
             onBack={() => setMainView('home')}
-            onNavigateToResource={(resource) => {
-              const pluralKind = kindToPlural(resource.kind)
-              setSelectedResource({ ...resource, kind: pluralKind })
-              const newParams = new URLSearchParams(searchParams)
-              newParams.delete('kind')
-              newParams.delete('mode')
-              newParams.delete('group')
-              newParams.delete('resource')
-              if (resource.group) {
-                newParams.set('apiGroup', resource.group)
-              } else {
-                newParams.delete('apiGroup')
-              }
-              navigate({ pathname: `/resources/${pluralKind}`, search: newParams.toString() })
-            }}
+            onNavigateToResource={navigateToResourceList}
+          />
+        )}
+
+        {/* Issues — per-cluster live triage queue (hidden route: not yet in the
+            nav `views` list; reachable at /issues). Same shared <IssuesView> the
+            Hub fleet uses; resource clicks open the standard resource drawer. */}
+        {mainView === 'issues' && (
+          <IssuesPane
+            namespaces={namespaces}
+            onBack={() => setMainView('home')}
+            onNavigateToResource={navigateToResourceList}
           />
         )}
 
@@ -1749,7 +1795,14 @@ function AppInner() {
       {diagnosticsOverlay.shouldRender && <DiagnosticsOverlay isOpen={diagnosticsOverlay.isOpen} onClose={() => setShowDiagnostics(false)} />}
 
       {/* Settings dialog */}
-      <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
+      <SettingsDialog
+        open={showSettings}
+        onClose={() => setShowSettings(false)}
+        onShowMyPermissions={() => {
+          setShowSettings(false)
+          setShowMyPermissions(true)
+        }}
+      />
       <MyPermissionsDialog open={showMyPermissions} onClose={() => setShowMyPermissions(false)} />
 
       {/* Debug overlay - only in dev mode */}

package/src/api/client.ts

@@ -237,7 +237,7 @@ export interface DashboardCRDCount {
 }
 
 // Re-export shared types from k8s-ui — single source of truth
-import type { AuditCardData, AuditFinding, ResourceGroup, CheckMeta, Check } from '@skyhook-io/k8s-ui'
+import type { AuditCardData, AuditFinding, ResourceGroup, CheckMeta, Check, Issue } from '@skyhook-io/k8s-ui'
 export type DashboardAudit = AuditCardData
 export type { AuditFinding, ResourceGroup, CheckMeta, Check }
 
@@ -338,6 +338,34 @@ export function useAudit(namespaces: string[] = []) {
   })
 }
 
+// Live cluster Issues — the grouped triage queue (radar's /api/issues =
+// internal/issues.Compose+Classify+Group). Single-cluster here; the Hub fleet
+// view fans the same shape across clusters. keepPreviousData semantics via
+// placeholderData so the queue doesn't flash empty on the 30s refresh.
+// total = rows returned (after the cap); total_matched = rows that matched
+// before the cap. total_matched > total means the queue was truncated — surface
+// that honestly rather than presenting a capped list as if it were complete.
+export interface IssuesResponse {
+  issues: Issue[]
+  total?: number
+  total_matched?: number
+  // Present only when RBAC visibility is incomplete (absent = full access).
+  // state 'degraded' means core workload reads are denied, so an empty list may
+  // mean "can't see" rather than "nothing broken" — the UI must say so.
+  visibility?: { state?: string; impact?: string }
+}
+
+export function useIssues(namespaces: string[] = []) {
+  const params = namespaces.length > 0 ? `?namespaces=${namespaces.join(',')}` : ''
+  return useQuery<IssuesResponse>({
+    queryKey: ['issues', namespaces],
+    queryFn: () => fetchJSON(`/issues${params}`),
+    staleTime: 30000,
+    refetchInterval: 30000,
+    placeholderData: (prev) => prev,
+  })
+}
+
 export function useResourceAudit(kind: string, namespace: string, name: string) {
   return useQuery<AuditFinding[]>({
     queryKey: ['audit', 'resource', kind, namespace, name],

package/src/components/ConnectionErrorView.tsx

@@ -197,13 +197,13 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
             Context: {connection.context ? (
               <ClusterName name={connection.context} />
             ) : (
-              <span className="font-mono text-theme-text-primary">(none)</span>
+              <span className="inline-code">(none)</span>
             )}
           </p>
 
           {connection.clusterName && (
             <p className="text-sm text-theme-text-secondary mb-4">
-              Cluster: <span className="font-mono text-theme-text-primary">{connection.clusterName}</span>
+              Cluster: <span className="inline-code">{connection.clusterName}</span>
             </p>
           )}
 

package/src/components/gitops/GitOpsView.tsx

@@ -18,6 +18,7 @@ import {
   formatGitOpsSourceUrl,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  isArgoSuspendedByRadar,
   gitOpsInsightChangeKey,
   initNavigationMap,
   kindToPlural,
@@ -34,6 +35,7 @@ import {
   type GitOpsResourceTree,
   type GitOpsInsightRef,
   type GitOpsRow,
+  type GitOpsRowAction,
   type GitOpsTreeFilters,
   type GitOpsTreeRef,
   type GitOpsTreePreset,
@@ -102,6 +104,34 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   const namespacesParam = namespaces.join(',')
   const { data: apiResources, isLoading: apiResourcesLoading } = useAPIResources()
 
+  const argoSync = useArgoSync()
+  const argoRefresh = useArgoRefresh()
+  const argoTerminate = useArgoTerminate()
+  const argoSuspend = useArgoSuspend()
+  const argoResume = useArgoResume()
+  const fluxReconcile = useFluxReconcile()
+  const fluxSyncWithSource = useFluxSyncWithSource()
+  const fluxSuspend = useFluxSuspend()
+  const fluxResume = useFluxResume()
+
+  const [syncDialogRow, setSyncDialogRow] = useState<GitOpsRow | null>(null)
+  const [pendingActions, setPendingActions] = useState<Map<string, Set<GitOpsRowAction>>>(new Map())
+
+  // Mark an action as in-flight (or done) for a given row. Cloning the
+  // outer Map + inner Set keeps the state immutable so React rerenders
+  // and the per-item spinner flips at the right moment.
+  function markAction(rowId: string, action: GitOpsRowAction, on: boolean) {
+    setPendingActions((prev) => {
+      const next = new Map(prev)
+      const current = new Set(next.get(rowId) ?? [])
+      if (on) current.add(action)
+      else current.delete(action)
+      if (current.size === 0) next.delete(rowId)
+      else next.set(rowId, current)
+      return next
+    })
+  }
+
   useEffect(() => {
     initNavigationMap([...(apiResources ?? []), ...GITOPS_KINDS])
   }, [apiResources])
@@ -157,23 +187,99 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     refetchInterval: 120_000,
   })
 
+  // Row mutations invalidate granular keys (['resource', …], ['gitops-tree', …])
+  // that don't match the table's aggregate gitops-rows-main / counts queries,
+  // so refetch those explicitly — otherwise a row keeps showing the pre-action
+  // state (e.g. "Suspend" after a successful suspend) until the 120s poll,
+  // inviting a duplicate request. Radar serves reads from an informer cache that
+  // lags the write by the watch-propagation delay, so refetch once now (covers
+  // an already-current cache) and once shortly after to catch the propagated
+  // update; refetch() forces a fetch regardless of staleTime.
+  const refetchTable = () => {
+    rowsQuery.refetch()
+    countsQuery.refetch()
+  }
+  const refetchTableAfterMutation = () => {
+    refetchTable()
+    window.setTimeout(refetchTable, 1200)
+  }
+
+  const handleRowAction = (row: GitOpsRow, action: GitOpsRowAction) => {
+    const { kindName: kind, namespace, name, id } = row
+    const settle = { onSuccess: refetchTableAfterMutation, onSettled: () => markAction(id, action, false) }
+    markAction(id, action, true)
+    switch (action) {
+      case 'sync':
+        // Argo Sync is the one action that confirms — same dialog the
+        // detail page uses. The mutation fires from onConfirm; clear the
+        // in-flight flag here since the dialog now owns the lifecycle.
+        markAction(id, action, false)
+        setSyncDialogRow(row)
+        return
+      case 'refresh':
+        argoRefresh.mutate({ namespace, name, hard: false }, settle)
+        return
+      case 'hard-refresh':
+        argoRefresh.mutate({ namespace, name, hard: true }, settle)
+        return
+      case 'terminate':
+        argoTerminate.mutate({ namespace, name }, settle)
+        return
+      case 'suspend':
+        if (row.tool === 'argo') argoSuspend.mutate({ namespace, name }, settle)
+        else fluxSuspend.mutate({ kind, namespace, name }, settle)
+        return
+      case 'resume':
+        if (row.tool === 'argo') argoResume.mutate({ namespace, name }, settle)
+        else fluxResume.mutate({ kind, namespace, name }, settle)
+        return
+      case 'reconcile':
+        fluxReconcile.mutate({ kind, namespace, name }, settle)
+        return
+      case 'sync-with-source':
+        fluxSyncWithSource.mutate({ kind, namespace, name }, settle)
+        return
+    }
+  }
+
   return (
-    <SharedGitOpsTableView
-      rows={rowsQuery.data ?? []}
-      loading={apiResourcesLoading || countsQuery.isLoading || rowsQuery.isLoading}
-      error={(rowsQuery.error as Error | null) ?? null}
-      counts={countsQuery.data?.counts ?? {}}
-      onRefresh={() => rowsQuery.refetch()}
-      onRowClick={(row) => {
-        const ns = row.namespace || '_'
-        const params = new URLSearchParams()
-        params.set('apiGroup', row.group)
-        navigate({ pathname: gitOpsDetailPath(row.kindName, ns, row.name), search: params.toString() })
-      }}
-      searchHotkey
-      globalNamespaces={namespaces}
-      onClearNamespaces={onClearNamespaces}
-    />
+    <>
+      <SharedGitOpsTableView
+        rows={rowsQuery.data ?? []}
+        loading={apiResourcesLoading || countsQuery.isLoading || rowsQuery.isLoading}
+        error={(rowsQuery.error as Error | null) ?? null}
+        counts={countsQuery.data?.counts ?? {}}
+        onRefresh={() => rowsQuery.refetch()}
+        onRowClick={(row) => {
+          const ns = row.namespace || '_'
+          const params = new URLSearchParams()
+          params.set('apiGroup', row.group)
+          navigate({ pathname: gitOpsDetailPath(row.kindName, ns, row.name), search: params.toString() })
+        }}
+        onRowAction={handleRowAction}
+        pendingRowActions={pendingActions}
+        searchHotkey
+        globalNamespaces={namespaces}
+        onClearNamespaces={onClearNamespaces}
+      />
+      <SyncOptionsDialog
+        open={!!syncDialogRow}
+        appLabel={syncDialogRow ? `${syncDialogRow.namespace}/${syncDialogRow.name}` : ''}
+        pending={argoSync.isPending}
+        onCancel={() => setSyncDialogRow(null)}
+        onConfirm={(opts) => {
+          if (!syncDialogRow) return
+          const { namespace, name } = syncDialogRow
+          argoSync.mutate(
+            { namespace, name, ...opts },
+            // onSettled so the dialog closes on both success and error —
+            // otherwise the error toast surfaces behind the still-open
+            // modal and the user can't read it.
+            { onSuccess: refetchTableAfterMutation, onSettled: () => setSyncDialogRow(null) },
+          )
+        }}
+      />
+    </>
   )
 }
 
@@ -219,15 +325,9 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   // pre-suspend prune/selfHeal state for restoration on resume. When present,
   // the app is in a deliberately-paused state (vs. Manual mode, which is a
   // normal operational choice) and should surface a Suspended chip alongside
-  // the other status indicators.
-  const argoSuspendedByRadar =
-    kind === 'applications' &&
-    Boolean(
-      resourceQ.data?.metadata?.annotations?.['radarhq.io/suspended-prune'] ||
-        resourceQ.data?.metadata?.annotations?.['radarhq.io/suspended-selfheal'] ||
-        resourceQ.data?.metadata?.annotations?.['skyhook.io/suspended-prune'] ||
-        resourceQ.data?.metadata?.annotations?.['skyhook.io/suspended-selfheal'],
-    )
+  // the other status indicators. Shared with the fleet table's row normalizer
+  // (isArgoSuspendedByRadar) so both surfaces agree on what "suspended" means.
+  const argoSuspendedByRadar = kind === 'applications' && isArgoSuspendedByRadar(resourceQ.data)
   const effectiveSuspended = (status?.suspended ?? false) || argoSuspendedByRadar
   // Lifecycle gate: when the resource is pending deletion, mutating
   // actions are futile (the controller is processing finalizers and
@@ -608,7 +708,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
             onCancel={() => setSyncDialogOpen(false)}
             onConfirm={(opts) => {
               argoSync.mutate({ namespace, name, ...opts }, {
-                onSuccess: () => setSyncDialogOpen(false),
+                onSettled: () => setSyncDialogOpen(false),
               })
             }}
           />
@@ -627,7 +727,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
                 return
               }
               argoRollback.mutate({ namespace, name, id, ...opts }, {
-                onSuccess: () => setRollbackTarget(null),
+                onSettled: () => setRollbackTarget(null),
               })
             }}
           />

package/src/components/helm/ChartBrowser.tsx

@@ -307,7 +307,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                   <div className="text-sm mt-1">
                     <p>No Helm repositories configured.</p>
                     <p className="mt-1">
-                      Add repositories using <code className="bg-theme-elevated px-1 rounded">helm repo add</code>
+                      Add repositories using <code className="inline-code">helm repo add</code>
                     </p>
                     <p className="mt-2">
                       Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-accent-text hover:underline">ArtifactHub</button>
@@ -476,7 +476,9 @@ function LocalChartCard({ chart, onSelect }: LocalChartCardProps) {
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+            <Tooltip content={chart.name} wrapperClassName="min-w-0 flex-1">
+              <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+            </Tooltip>
             {chart.deprecated && (
               <span className={clsx('px-1 py-0.5 text-[10px] rounded', SEVERITY_BADGE.warning)}>
                 deprecated
@@ -540,7 +542,9 @@ function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
 
         {/* Name and org */}
         <div className="flex-1 min-w-0">
-          <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+          <Tooltip content={chart.name} wrapperClassName="w-full">
+            <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+          </Tooltip>
           <div className="flex items-center gap-2 mt-0.5 text-xs text-theme-text-tertiary">
             <span className="flex items-center gap-1">
               <Building2 className="w-3 h-3" />

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { flushSync } from 'react-dom'
-import { PaneLoader, useDockReservedHeight } from '@skyhook-io/k8s-ui'
+import { FetchResult, useDockReservedHeight } from '@skyhook-io/k8s-ui'
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
@@ -60,7 +60,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const canViewSensitive = canAtLeast('member')
   const helmNamespace = release.storageNamespace || release.namespace
 
-  const { data: releaseDetail, isLoading, refetch: refetchRelease } = useHelmRelease(
+  const { data: releaseDetail, isLoading, error: releaseError, refetch: refetchRelease } = useHelmRelease(
     helmNamespace,
     release.name
   )
@@ -446,10 +446,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'helm-drawer-content' }}>
-        {isLoading ? (
-          <PaneLoader className="h-32" />
-        ) : !releaseDetail ? (
-          <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Release not found</div>
+        {!releaseDetail ? (
+          <FetchResult loading={isLoading} error={releaseError} notFoundMessage="Release not found" className="h-32" />
         ) : (
           <>
             {activeTab === 'overview' && (

package/src/components/helm/InstallWizard.tsx

@@ -893,7 +893,7 @@ function ReviewStep({
           <div>
             <p className="text-sm font-medium text-amber-400">Installing from ArtifactHub</p>
             <p className="text-xs text-theme-text-secondary mt-1">
-              This chart will be installed from: <code className="bg-theme-elevated px-1 rounded">{artifactHubRepoUrl || repo}</code>
+              This chart will be installed from: <code className="inline-code">{artifactHubRepoUrl || repo}</code>
             </p>
           </div>
         </div>

package/src/components/helm/RoleGatedPanel.tsx

@@ -38,8 +38,8 @@ export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps)
         Your role can't view {feature}
       </div>
       <div className="mt-1 max-w-md text-xs text-theme-text-secondary">
-        You're signed in as <span className="font-mono text-theme-text-primary">{role ?? 'viewer'}</span>.
-        This view requires <span className="font-mono text-theme-text-primary">{min}</span> or higher.
+        You're signed in as <span className="inline-code">{role ?? 'viewer'}</span>.
+        This view requires <span className="inline-code">{min}</span> or higher.
         Ask a {min} or owner if you need access.
       </div>
     </div>

package/src/components/home/ClusterHealthCard.tsx

@@ -52,7 +52,7 @@ function MetricsUnavailableHint({ platform, metricsServerAvailable }: { platform
       content={
         <div className="space-y-1">
           <div className="font-medium">How to fix</div>
-          <div>{isPreInstalled ? hint : <>Install by running:<br /><code className="text-[10px] opacity-80">{hint}</code></>}</div>
+          <div>{isPreInstalled ? hint : <>Install by running:<br /><code className="inline-code text-[10px] opacity-80">{hint}</code></>}</div>
         </div>
       }
       position="bottom"