@skyhook-io/radar-app 1.8.3 → 1.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "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",
@@ -56,8 +56,8 @@
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.1",
-    "@tanstack/react-query": "^5.100.14",
-    "@types/node": "^26.0.0",
+    "@tanstack/react-query": "^5.101.2",
+    "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
@@ -68,8 +68,8 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.7.0",
-    "lucide-react": "^1.16.0",
-    "postcss": "^8.5.14",
+    "lucide-react": "^1.22.0",
+    "postcss": "^8.5.16",
     "prettier": "^3.8.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",

package/src/App.tsx

@@ -1,15 +1,14 @@
 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'
 import { DebugOverlay } from './components/DebugOverlay'
-import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind, gitOpsRouteForResource } from '@skyhook-io/k8s-ui'
+import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, FreshnessControl, gitOpsRouteForKind, gitOpsRouteForResource, ScopePill } from '@skyhook-io/k8s-ui'
 import { initNavigationMap } from '@skyhook-io/k8s-ui/utils/navigation'
-import { useAPIResources } from './api/apiResources'
+import { useAPIResources, CORE_RESOURCES } from './api/apiResources'
 import { TimelineView } from './components/timeline/TimelineView'
 import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
@@ -17,6 +16,7 @@ import { ResourceDetailDrawer } from './components/resources/ResourceDetailDrawe
 import { WorkloadViewRoute } from './components/workload/WorkloadView'
 import { CompareViewRoute } from './components/compare/CompareViewRoute'
 import { HelmView } from './components/helm/HelmView'
+import { HelmCompareRoute } from './components/helm/HelmCompareRoute'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
 import { AuditView } from './components/audit/AuditView'
@@ -48,11 +48,11 @@ import { useEventSource } from './hooks/useEventSource'
 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 { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts, useSuppressBaseShortcuts } 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 { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
@@ -105,10 +105,11 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'checks' | 'gitops' | 'compare' | 'issues' | 'applications'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
+  if (pathname.replace(/\/+$/, '') === '/helm/compare') return 'helmCompare'
   const path = pathname.replace(/^\//, '').split('/')[0]
   if (path === '' || path === 'home') return 'home'
   if (path === 'topology') return 'topology'
@@ -126,6 +127,48 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   return 'home'
 }
 
+// The namespace scope filter is meaningful only on namespaced surfaces. On
+// cluster-scoped views it does nothing, so we disable it with an explanation
+// rather than leaving a dead control that silently ignores the pick:
+//   - Cost is reported per-namespace across the whole cluster (the view IS the
+//     breakdown; a filter would only hide rows).
+//   - A GitOps detail tree spans namespaces — its controller lives in one
+//     namespace but manages workloads across many.
+//   - A cluster-scoped resource kind (Nodes, PVs, ClusterRoles…) has no
+//     namespace at all.
+// The pick itself is preserved so it re-applies when the user returns to a
+// namespaced view.
+function namespaceFilterDisabled(
+  view: ExtendedMainView,
+  pathname: string,
+  apiResources?: { name: string; kind: string; namespaced: boolean }[],
+): { disabled: boolean; tooltip?: string } {
+  if (view === 'cost') {
+    return {
+      disabled: true,
+      tooltip: 'Cost is reported per namespace across the whole cluster — the namespace filter doesn’t apply here.',
+    }
+  }
+  const segments = pathname.replace(/^\//, '').split('/')
+  if (view === 'gitops' && segments[1] === 'detail') {
+    return {
+      disabled: true,
+      tooltip: 'This resource manages workloads across namespaces — the namespace filter doesn’t apply to its tree.',
+    }
+  }
+  if (view === 'resources') {
+    const kindSlug = segments[1]
+    const match = kindSlug ? apiResources?.find(r => r.name === kindSlug) : undefined
+    if (match && !match.namespaced) {
+      return {
+        disabled: true,
+        tooltip: `${match.kind} is a cluster-scoped resource — namespaces don’t apply.`,
+      }
+    }
+  }
+  return { disabled: false }
+}
+
 // 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
@@ -337,6 +380,13 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   const { data: navApiResources } = useAPIResources()
   useEffect(() => { if (navApiResources) initNavigationMap(navApiResources) }, [navApiResources])
 
+  // View-aware namespace scope: disabled on cluster-scoped surfaces so the
+  // chip isn't a dead control next to the cluster switcher.
+  // Fall back to the static core-resource list before discovery loads, so the
+  // chip disables immediately on a cluster-scoped core kind (Nodes, PVs, …)
+  // instead of flickering enabled until /api-resources resolves.
+  const namespaceFilter = namespaceFilterDisabled(mainView, location.pathname, navApiResources ?? CORE_RESOURCES)
+
   // 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.
@@ -460,11 +510,16 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   // Diagnostics overlay state
   const [showDiagnostics, setShowDiagnostics] = useState(false)
 
-  // Drawer expanded state (drawer grows to full width and renders WorkloadView)
-  const [drawerExpanded, setDrawerExpanded] = useState(false)
+  // The peek drawer "expanded" into a fullscreen overlay = ?full=1 with a selected
+  // resource, on ANY view (resources list, topology graph, GitOps, Applications…) —
+  // the underlying view stays mounted. URL-derived so Back/Forward/refresh behave
+  // (non-list peeks aren't URL-backed, so refresh drops the overlay gracefully).
+  // Used by the routing effects below; the render uses `expandedView` (gated on what
+  // actually renders) — see further down.
+  const drawerExpanded = !!selectedResource && searchParams.get('full') === '1'
 
-  // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
-  const suppressViewClearRef = useRef(false)
+  // On mobile there's no room for the side drawer — a resource detail is always full-screen.
+  const isMobile = useMediaQuery('(max-width: 639px)')
 
   // 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
@@ -497,9 +552,9 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   // URL backing, so the only signal that the page beneath it has navigated is
   // that its owner-key (pathname + ?app) no longer matches where it was opened.
   // Hiding it here, at render time, closes the orphan on Back without adding
-  // another clearing effect that would race the `suppressViewClearRef` lifecycle.
-  // The /resources case is URL-backed and handled above; an expanded drawer
-  // (drawerExpanded) legitimately lives at /workload and must stay open there.
+  // another clearing effect. The /resources case is URL-backed and handled above;
+  // an expanded drawer (drawerExpanded) only exists on /resources (?full=1), so it
+  // is excluded here and never treated as an orphan.
   const peekRouteOrphaned = !!selectedResource && !drawerExpanded && mainView !== 'resources' &&
     peekOwnerKeyRef.current !== null &&
     peekOwnerKeyRef.current !== peekOwnerKey(location.pathname, location.search)
@@ -526,7 +581,6 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
 
     if (prev !== null && prev !== key && selectedResourceRouteMismatch) {
       setSelectedResource(null)
-      setDrawerExpanded(false)
     }
   }, [mainView, currentResourceKindSlug, currentResourceGroup, selectedResourceRouteMismatch])
 
@@ -542,6 +596,19 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   if (routeSelectedResource) lastResourceRef.current = routeSelectedResource
   const drawerResource = routeSelectedResource || lastResourceRef.current
 
+  // Effective fullscreen state — keyed off the resource that's ACTUALLY rendering
+  // (routeSelectedResource), not the raw selection, so an orphaned/mismatched peek
+  // can't inert the shell with no visible drawer. ?full=1 on any view, or forced on
+  // mobile (no room for a side drawer). Drives the inert backdrop + shortcut suppression.
+  const expandedView = !!routeSelectedResource && (searchParams.get('full') === '1' || isMobile)
+  useSuppressBaseShortcuts(expandedView)
+  // Held value for the drawer's `expanded` prop so closing an expanded drawer slides
+  // it out at full size instead of running a collapse morph mid-dismiss. Tracks the
+  // live state while a resource is selected; frozen during the slide-out.
+  const lastExpandedRef = useRef(expandedView)
+  if (routeSelectedResource) lastExpandedRef.current = expandedView
+  const drawerExpandedProp = routeSelectedResource ? expandedView : lastExpandedRef.current
+
   const lastHelmReleaseRef = useRef(selectedHelmRelease)
   if (selectedHelmRelease) lastHelmReleaseRef.current = selectedHelmRelease
   const drawerHelmRelease = selectedHelmRelease || lastHelmReleaseRef.current
@@ -580,6 +647,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     newParams.delete('kind')
     newParams.delete('mode')
     newParams.delete('group')
+    // Open as a normal drawer — never inherit a stale ?full=1/tab from an
+    // expanded view we're navigating away from (only expand/drill set those).
+    newParams.delete('full')
+    newParams.delete('tab')
     newParams.set('resource', resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name)
     if (resource.group) {
       newParams.set('apiGroup', resource.group)
@@ -627,12 +698,33 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     navigateToResourceList(resource)
   }, [navigate, navigateToHelmRelease, navigateToResourceList])
 
-  // Collapse from expanded WorkloadView back to drawer
+  // Collapse the over-list fullscreen back to the drawer = drop ?full=1 (and the
+  // resource-scoped ?tab) in place. The button means "collapse THIS to a drawer"
+  // regardless of how we got here (expand, deep link, or a drill trail), so it
+  // scrubs rather than walking history — `navigate(-1)` would leave the app on a
+  // deep link, or step back to the previous resource after a drill. Browser Back
+  // keeps its own natural history walk (it pops the ?full=1 entry → collapse).
   const handleCollapseFromExpanded = useCallback(() => {
-    suppressViewClearRef.current = true
-    setDrawerExpanded(false)
-    navigate(-1)
-  }, [navigate])
+    const p = new URLSearchParams(searchParams)
+    p.delete('full')
+    p.delete('tab')
+    setSearchParams(p, { replace: true })
+  }, [searchParams, setSearchParams])
+
+  // Close the peek and drop any expand flags. Outside /resources the drawer isn't
+  // URL-backed, so a lingering ?full=1/tab would make the next peek reopen
+  // fullscreen instead of as a side drawer. (On /resources, ResourcesView's own
+  // updateURL also scrubs these — deleting them here too is idempotent.)
+  const closeDrawer = useCallback(() => {
+    setSelectedResource(null)
+    setDrawerInitialTab('detail')
+    if (searchParams.has('full') || searchParams.has('tab')) {
+      const p = new URLSearchParams(searchParams)
+      p.delete('full')
+      p.delete('tab')
+      setSearchParams(p, { replace: true })
+    }
+  }, [searchParams, setSearchParams])
 
   // Theme toggle for keyboard shortcut
   const { toggleTheme } = useTheme()
@@ -659,7 +751,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     gitops: 'g o', checks: 'g u', cost: 'g c',
     // Non-rail views (reachable via deep links / actions, not the rail) get no
     // dedicated mnemonic — listed for exhaustiveness so the type stays total.
-    workload: '', compare: '',
+    workload: '', compare: '', helmCompare: '',
   }
   const views = Object.keys(VIEW_SHORTCUT_KEYS).filter(
     (v): v is ExtendedMainView => VIEW_SHORTCUT_KEYS[v as ExtendedMainView] !== '',
@@ -901,7 +993,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   // forceNamespaceFilter is only set for large clusters that require server-side filtering.
   // Fleet mode uses 'resources' topology on the backend — filtering is client-side
   const sseMode = topologyMode === 'fleet' ? 'resources' : topologyMode
-  const { topology, connected, reconnect: reconnectSSE } = useEventSource(namespaces, sseMode as 'resources' | 'traffic', {
+  const { topology } = useEventSource(namespaces, sseMode as 'resources' | 'traffic', {
     onContextSwitchComplete: endSwitch,
     onContextSwitchProgress: updateProgress,
     onContextChanged: () => {
@@ -918,8 +1010,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
       slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
 
       // Close any open drawers/overlays — old cluster's resources don't exist on the new one
+      // (?full=1 is cleared by the URL reset below).
       setSelectedResource(null)
-      setDrawerExpanded(false)
       setSelectedHelmRelease(null)
 
       // Reset URL to current view with no resource-specific params.
@@ -938,7 +1030,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     },
     onK8sEvent: handleK8sEvent,
   }, forceNamespaceFilter, showPolicyEffect)
-  const [reconnect, isReconnecting] = useRefreshAnimation(reconnectSSE)
+  const clusterConnected = connection.state === 'connected'
 
   // On large clusters (where the server requires namespace filtering), keep
   // SSE's server-side filter in lockstep with the user's namespace pick.
@@ -1284,15 +1376,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   // But preserve selectedResource when navigating TO resources view (e.g., from Helm deep link)
   const prevMainView = useRef(mainView)
   useEffect(() => {
-    // Skip clearing during controlled expand/collapse transitions
-    if (suppressViewClearRef.current) {
-      suppressViewClearRef.current = false
-      prevMainView.current = mainView
-      return
-    }
-
     const navigatingToResources = mainView === 'resources' && prevMainView.current !== 'resources'
-    const navigatingToHelm = mainView === 'helm' && prevMainView.current !== 'helm'
     prevMainView.current = mainView
 
     // The URL is the source of truth for what's selected. A deep link
@@ -1301,14 +1385,15 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     // asserts. (On a real view switch the URL no longer carries the param, so
     // the clear proceeds.) Without this, deep-linking straight to a Helm
     // release lands on the release list with no drawer.
+    // (drawerExpanded is URL-derived from ?full=1, so leaving /resources drops it
+    // automatically — no explicit reset needed.)
     const params = new URLSearchParams(window.location.search)
     if (!navigatingToResources && !params.has('resource')) {
       setSelectedResource(null)
     }
-    if (!navigatingToHelm && !params.has('release')) {
+    if (!params.has('release')) {
       setSelectedHelmRelease(null)
     }
-    setDrawerExpanded(false)
   }, [mainView])
 
   // Clear resource selection when namespaces change — but keep a selection the
@@ -1318,7 +1403,6 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     const params = new URLSearchParams(window.location.search)
     if (!params.has('resource')) setSelectedResource(null)
     if (!params.has('release')) setSelectedHelmRelease(null)
-    setDrawerExpanded(false)
   }, [namespacesKey])
 
   // Filter topology based on visible kinds (uses displayedTopology which respects pause)
@@ -1423,6 +1507,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     setVisibleKinds(new Set())
   }, [])
 
+  const navActiveView = mainView === 'helmCompare' ? 'helm' : mainView
+
   return (
     <PortForwardProvider>
     {/* Preserve the ~800px content floor: the rail is a fixed-width sibling, so
@@ -1435,7 +1521,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     >
       {showNavRail && (
         <PrimaryNavRail
-          activeView={mainView}
+          activeView={navActiveView}
           onNavigate={setMainView}
           pinned={navRailEffectivePinned}
           onTogglePinned={toggleNavRailPinned}
@@ -1452,20 +1538,58 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
       {/* Header — suppressed in chromeless embed; the host owns the chrome. */}
       {!chromeless && (
       <header className="relative z-50 flex items-center justify-between px-4 py-2 bg-theme-base/90 backdrop-blur-sm border-b border-theme-border/50">
-        {/* Left: Logo + Cluster info */}
-        <div className="flex items-center gap-4 shrink-0">
+        {/* Left: Logo + Cluster info. In the standalone (nav-rail) layout this
+            is a FIXED-WIDTH column so the omnibar after it is force-pinned: the
+            scope pill + status dot can change width (cluster/namespace value)
+            without ever shifting the search box. The pill's own name/value caps
+            keep it inside this width; the embedded/pill layout keeps auto width
+            (its center bar is absolutely positioned). */}
+        <div className={`flex items-center gap-4 shrink-0 ${showNavRail ? 'w-[492px]' : ''}`}>
           {/* Standalone rail owns the brand; only the embedded/pill layout
               shows it in the header (host may override via brandSlot). */}
           {navCustomization.brandSlot ?? (showNavRail ? null : <Logo />)}
 
-          <div className="flex items-center gap-2">
-            {navCustomization.contextSlot ?? <ContextSwitcher ref={contextSwitcherRef} />}
-            {/* Connection status - next to cluster name */}
-            <div className="flex items-center gap-1.5 ml-1">
+          <div className={`flex items-center gap-2 min-w-0 ${showNavRail ? 'flex-1' : ''}`}>
+            {navCustomization.contextSlot ? (
+              // Embedded host supplies its own cluster switcher — keep the two
+              // controls separate (the host owns the cluster chip's styling).
+              <>
+                {navCustomization.contextSlot}
+                <NamespaceSwitcher
+                  ref={namespaceSwitcherRef}
+                  disabled={namespaceFilter.disabled}
+                  disabledTooltip={namespaceFilter.tooltip}
+                />
+              </>
+            ) : (
+              // Standalone: cluster + namespace as one "scope" pill — two
+              // borderless segments split by a divider, reading as a single
+              // "what am I looking at" unit. The shared ScopePill shell is the
+              // same one Radar Hub's cluster top bar uses, so the two match.
+              <ScopePill>
+                <ContextSwitcher ref={contextSwitcherRef} variant="segment" />
+                <NamespaceSwitcher
+                  ref={namespaceSwitcherRef}
+                  variant="segment"
+                  disabled={namespaceFilter.disabled}
+                  disabledTooltip={namespaceFilter.tooltip}
+                />
+              </ScopePill>
+            )}
+            {/* Connection status — a fixed-size dot (state in the tooltip; the
+                dot is the reconnect control when disconnected) plus, when the
+                header is wide enough (xl+), a label. The label is nowrap and
+                unbounded: it overflows the fixed left column into the empty gap
+                before the centered search box rather than shifting anything (the
+                dot + pill are shrink-0, so layout stays put — the search box
+                never moves). Where the gap is smaller than the label, its tail
+                tucks under the omnibar's solid background. Below xl it's the dot
+                alone. */}
+            <div className="ml-1 flex items-center gap-1.5 shrink-0">
               <Tooltip
                 content={
-                  !connected
-                    ? 'Disconnected'
+                  !clusterConnected
+                    ? 'Cluster disconnected — click to reconnect'
                     : crdDiscoveryStatus === 'discovering'
                       ? 'Connected — discovering Custom Resources...'
                       : 'Connected'
@@ -1473,38 +1597,29 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                 delay={100}
                 position="bottom"
               >
-                <span
-                  className={`w-2 h-2 rounded-full ${
-                    !connected
-                      ? 'bg-red-500'
-                      : crdDiscoveryStatus === 'discovering'
-                        ? 'bg-amber-400 animate-pulse'
-                        : 'bg-green-500'
-                  }`}
-                />
+                {clusterConnected ? (
+                  <span
+                    className={`block w-2.5 h-2.5 shrink-0 rounded-full ${
+                      crdDiscoveryStatus === 'discovering' ? 'bg-amber-400 animate-pulse' : 'bg-green-500'
+                    }`}
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    onClick={retryConnection}
+                    disabled={isRetrying}
+                    aria-label="Cluster disconnected — reconnect"
+                    className="block shrink-0 disabled:cursor-default"
+                  >
+                    <span className={`block w-2.5 h-2.5 rounded-full bg-red-500 ${isRetrying ? 'animate-pulse' : ''}`} />
+                  </button>
+                )}
               </Tooltip>
-              {/* Inline label only for non-steady states where the user
-                  might need to act or wait. The healthy "Connected" case
-                  is the dot alone; the dot's tooltip discloses it. Keeping
-                  "Connected" text here would expand the left section and
-                  collide with the absolute-centered nav block at xl, which
-                  is the same breakpoint where nav labels appear. */}
-              {(!connected || crdDiscoveryStatus === 'discovering') && (
-                <span className="text-[11px] text-theme-text-tertiary hidden xl:inline">
-                  {!connected ? 'Disconnected' : 'Discovering Custom Resources...'}
+              {showNavRail && (!clusterConnected || crdDiscoveryStatus === 'discovering') && (
+                <span className="hidden xl:block whitespace-nowrap text-[11px] text-theme-text-tertiary">
+                  {!clusterConnected ? 'Disconnected' : 'Discovering Custom Resources…'}
                 </span>
               )}
-              {!connected && (
-                <Tooltip content="Reconnect">
-                <button
-                  onClick={reconnect}
-                  disabled={isReconnecting}
-                  className="p-1 text-theme-text-secondary hover:text-theme-text-primary disabled:opacity-50 disabled:pointer-events-none"
-                >
-                  <RefreshCw className={`w-3 h-3 ${isReconnecting ? 'animate-spin' : ''}`} />
-                </button>
-                </Tooltip>
-              )}
             </div>
             {/* Port forwards indicator — shown only when sessions exist */}
             <PortForwardIndicator />
@@ -1546,7 +1661,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               <button
                 onClick={() => setMainView(view)}
                 className={`flex items-center gap-1 px-2 py-1 text-[13px] rounded-full transition-colors ${
-                  mainView === view
+                  mainView === view || (mainView === 'helmCompare' && view === 'helm')
                     ? 'bg-skyhook-600 dark:bg-skyhook-500 text-white shadow-glow-brand-sm'
                     : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover'
                 }`}
@@ -1570,7 +1685,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
         )}
 
         {/* Center: omnibar — standalone search + command surface (the ⌘K entry).
-            Fills the space the pill bar left; embedded keeps the pills + modal. */}
+            Its container is one of three EQUAL flex-1 columns (see the left/right
+            groups): equal side columns keep this middle column — and the search
+            box centered in it — pinned regardless of how wide the left-side
+            chrome gets (cluster name, namespace label, "Discovering…" /
+            "Disconnected" text). Overflowing side content truncates instead of
+            dragging the box. Same pattern as Radar Hub's ClusterTopBar. */}
         {showNavRail && (
           <div className="hidden sm:flex flex-1 justify-center min-w-0 px-3">
             <RadarOmnibar
@@ -1581,6 +1701,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                 params.delete('kind')
                 if (group) params.set('apiGroup', group); else params.delete('apiGroup')
                 params.delete('resource')
+                params.delete('full')
+                params.delete('tab')
                 navigate({ pathname: `/resources/${kind}`, search: params.toString() })
               }}
               onSwitchContext={(name) => switchContext.mutate({ name }, { onSettled: () => setNamespaces([]) })}
@@ -1594,11 +1716,6 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
 
         {/* Right: Controls */}
         <div className="flex items-center gap-3 shrink-0">
-          <NamespaceSwitcher
-            ref={namespaceSwitcherRef}
-          />
-
-
           {/* Command palette trigger — embedded only; standalone has the
               top-center omnibar (which is the ⌘K surface). */}
           {!showNavRail && (
@@ -1639,7 +1756,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               to the host's cookie/backend) and the user would see the theme
               bounce on every navigation between host routes and /c/:id. */}
           {!navCustomization.embedded && (
-            <div className="hidden md:block">
+            <div className="hidden md:flex items-center">
               <ThemeToggle />
             </div>
           )}
@@ -1791,7 +1908,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
       )}
 
       {/* Main content - only show when connected and authenticated */}
-      {contentReady && <div className="flex-1 flex overflow-hidden">
+      {/* inert while a fullscreen detail overlay covers the views — keeps the
+          retained background list out of the focus order + a11y tree (the visual
+          cover already blocks pointer events). */}
+      {contentReady && <div className="flex-1 flex overflow-hidden" inert={expandedView}>
         <ErrorBoundary>
         {/* Home dashboard */}
         {mainView === 'home' && (
@@ -1806,6 +1926,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               newParams.delete('kind') // kind is now in the path
               newParams.delete('mode')
               newParams.delete('resource')
+              newParams.delete('full') // don't carry an expanded-overlay flag onto a fresh kind list
+              newParams.delete('tab')
               newParams.delete('group') // Clear topology grouping param to avoid leaking into resources view
               if (apiGroup) {
                 newParams.set('apiGroup', apiGroup)
@@ -1933,6 +2055,13 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                     onShowPolicyEffectChange={setShowPolicyEffect}
                     showFleetMode={displayedTopology?.nodes?.some(n => FLEET_MODE_KINDS.has(n.kind as NodeKind)) ?? false}
                     onNavigateToTraffic={() => setMainView('traffic')}
+                    leadingSlot={
+                      <FreshnessControl
+                        mode="auto"
+                        paused={topologyPaused}
+                        connectionState={connection.state}
+                      />
+                    }
                   />
                 </div>
               </>
@@ -1979,6 +2108,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           />
         )}
 
+        {mainView === 'helmCompare' && (
+          <HelmCompareRoute />
+        )}
+
         {/* GitOps view (inline only when the host hasn't taken it over — see
             the takeover splash below). */}
         {mainView === 'gitops' && !isViewTakenOver('gitops') && (
@@ -2074,8 +2207,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           />
         )}
 
-        {/* Workload full view (direct URL only — expand from drawer uses drawer's expanded state) */}
-        {mainView === 'workload' && !drawerExpanded && (
+        {/* Workload full view — the standalone fullscreen route for non-list
+            surfaces and deep links. Expand-from-drawer is the ?full=1 overlay on
+            /resources instead, so it never routes here. */}
+        {mainView === 'workload' && (
           <WorkloadViewRoute
             onNavigateToResource={(resource) => {
               navigate(buildWorkloadPath(resource))
@@ -2100,18 +2235,37 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           // to the top of the content area instead of leaving a 49px gap.
           headerHeight={chromeless ? 0 : undefined}
           isOpen={resourceDrawer.isOpen}
-          expanded={drawerExpanded}
-          onClose={() => { setSelectedResource(null); setDrawerInitialTab('detail'); setDrawerExpanded(false) }}
+          expanded={drawerExpandedProp}
+          onClose={closeDrawer}
           onNavigate={(res) => navigateToResource(res)}
-          onExpand={(res) => {
-            suppressViewClearRef.current = true
-            setDrawerExpanded(true)
-            navigate(buildWorkloadPath(res))
+          canCollapseToDrawer={!isMobile}
+          onExpand={(_res, opts) => {
+            // Grow the peek into a fullscreen overlay (?full=1, pushed so Back
+            // collapses) over whatever view is underneath — list, topology graph,
+            // GitOps, Applications — which stays mounted. Carry the YAML tab when
+            // expanding from the drawer's YAML view so the editor (and its
+            // session-persisted draft) is right there, not behind the Overview tab.
+            const p = new URLSearchParams(searchParams)
+            p.set('full', '1')
+            if (opts?.yaml) p.set('tab', 'yaml')
+            setSearchParams(p)
           }}
-          onCollapse={handleCollapseFromExpanded}
+          // On mobile there's no drawer to collapse back to, so the collapse/back
+          // control closes the resource (returns to the list) instead.
+          onCollapse={isMobile ? closeDrawer : handleCollapseFromExpanded}
           onNavigateToResource={(resource) => {
-            setSelectedResource(resource)
-            navigate(buildWorkloadPath(resource), { replace: true })
+            // Drill into a related resource while expanded: stay in the over-list
+            // overlay for the new resource (pushed, so Back walks resource→resource
+            // still expanded). The backdrop list follows to the new kind.
+            const pluralKind = kindToPlural(resource.kind)
+            setSelectedResource({ ...resource, kind: pluralKind })
+            const p = new URLSearchParams()
+            const ns = searchParams.get('namespaces')
+            if (ns) p.set('namespaces', ns)
+            p.set('resource', resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name)
+            if (resource.group) p.set('apiGroup', resource.group)
+            p.set('full', '1')
+            navigate({ pathname: `/resources/${pluralKind}`, search: p.toString() })
           }}
         />
       )}
@@ -2174,6 +2328,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
             if (group) params.set('apiGroup', group)
             else params.delete('apiGroup')
             params.delete('resource')
+            params.delete('full')
+            params.delete('tab')
             navigate({ pathname: `/resources/${kind}`, search: params.toString() })
             // Focus the table search after navigation — the user came from ⌘K
             // (keyboard flow) and expects to type a resource name immediately.