@skyhook-io/radar-app 1.8.6 → 1.8.7

package/src/App.tsx

@@ -6,7 +6,10 @@ 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, FreshnessControl, gitOpsRouteForKind, gitOpsRouteForResource, ScopePill } from '@skyhook-io/k8s-ui'
+import { GlobalDiagnoseButton } from './components/diagnose/LocalDiagnoseAction'
+import { useDiagnoseLayout } from './components/diagnose/DiagnoseContext'
+import { DiagnoseSurface } from './components/diagnose/DiagnoseSurface'
+import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, FreshnessControl, gitOpsRouteForKind, gitOpsRouteForResource, ScopePill, PaneLoader } from '@skyhook-io/k8s-ui'
 import { initNavigationMap } from '@skyhook-io/k8s-ui/utils/navigation'
 import { useAPIResources, CORE_RESOURCES } from './api/apiResources'
 import { TimelineView } from './components/timeline/TimelineView'
@@ -51,15 +54,16 @@ import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/con
 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 { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle } from 'lucide-react'
+import type { ClusterLoadState } from './types/clusterLoadState'
+import { useClusterLoadState } from './hooks/useClusterLoadState'
+import { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle, Loader2, RefreshCw } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
 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, pluralToKind, openExternal, apiVersionToGroup, buildWorkloadPath, searchHitToSelectedResource } from './utils/navigation'
+import { kindToPlural, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
 import { type OmnibarHandle } from './components/ui/Omnibar'
 import { RadarOmnibar } from './components/ui/RadarOmnibar'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
@@ -68,7 +72,7 @@ import type { ContextSwitcherHandle } from './components/ContextSwitcher'
 const ALL_NODE_KINDS: NodeKind[] = [
   'Internet', 'Ingress', 'Gateway', 'HTTPRoute', 'GRPCRoute', 'TCPRoute', 'TLSRoute',
   'Service', 'Deployment', 'Rollout', 'DaemonSet', 'StatefulSet',
-  'ReplicaSet', 'Pod', 'PodGroup', 'ConfigMap', 'Secret', 'HorizontalPodAutoscaler', 'Job', 'CronJob', 'PersistentVolumeClaim', 'Namespace',
+  'ReplicaSet', 'Pod', 'PodGroup', 'ConfigMap', 'Secret', 'ServiceAccount', 'SealedSecret', 'ServiceMonitor', 'PodMonitor', 'HorizontalPodAutoscaler', 'Job', 'CronJob', 'PersistentVolumeClaim', 'Namespace',
   'Application', 'Kustomization', 'HelmRelease', 'GitRepository',
   'KnativeService', 'KnativeConfiguration', 'KnativeRevision', 'KnativeRoute',
   'Broker', 'Trigger', 'PingSource', 'ApiServerSource', 'ContainerSource', 'SinkBinding', 'Channel',
@@ -86,6 +90,12 @@ const DEFAULT_VISIBLE_KINDS = ALL_NODE_KINDS.filter(k => k !== 'ReplicaSet')
 // Users can re-enable via the filter sidebar.
 const CRD_HIDDEN_BY_DEFAULT = new Set(['GatewayClass', 'IngressClass', 'NodePool', 'NodeClaim', 'NodeClass'])
 
+// Top-bar height in px. The body frame's right-side surfaces (AI panel, resource +
+// Helm drawers) all inset their top by this so they sit BELOW the header. 0 in
+// chromeless embeds (the host owns the chrome, no Radar header). Keep in sync with
+// the <header> py/line-height; the drawers historically hardcoded the same 49.
+const APP_HEADER_HEIGHT = 49
+
 // CAPI kinds shown in Fleet topology mode (+ Node for Machine→Node edges)
 // Includes core CAPI kinds and all infrastructure provider kinds
 const FLEET_MODE_KINDS = new Set<NodeKind>([
@@ -226,27 +236,10 @@ function AuthBarrier({ authMode }: { authMode: string }) {
 
   if (authMode === 'oidc') {
     return (
-      <div className="flex-1 relative bg-theme-base">
-        <div className="absolute inset-0 pointer-events-none">
-          <img
-            src={radarLoadingIcon}
-            alt=""
-            aria-hidden
-            // 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)' }}
-          />
-          <div
-            className="absolute left-1/2 -translate-x-1/2 text-center"
-            style={{ top: 'calc(50% + 34px)' }}
-          >
-            <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
-              Redirecting to login…
-            </p>
-          </div>
-        </div>
-      </div>
+      <PaneLoader
+        label="Redirecting to login…"
+        className="flex-1 min-h-0 bg-theme-base"
+      />
     )
   }
 
@@ -279,7 +272,13 @@ function peekOwnerKey(pathname: string, search: string): string {
   return `${pathname}\n${new URLSearchParams(search).get('app') ?? ''}`
 }
 
-function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manageDocumentTitle?: boolean; documentTitleSuffix?: string }) {
+interface AppProps {
+  manageDocumentTitle?: boolean
+  documentTitleSuffix?: string
+  onClusterLoadStateChange?: (state: ClusterLoadState) => void
+}
+
+function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterLoadStateChange }: AppProps) {
   const navigate = useNavigate()
   const location = useLocation()
   const navigationType = useNavigationType()
@@ -287,6 +286,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   const capabilities = useCapabilitiesContext()
   const openLocalTerminal = useOpenLocalTerminal()
   const navCustomization = useNavCustomization()
+  // The AI panel is an absolute slot in the body frame (the column under the header):
+  // it reserves a right gutter on the CONTENT only, so the navbar + nav rail stay
+  // static. contentGutter is the docked panel width (0 when closed/overlay/maximized).
+  const { open: diagnoseOpen, contentGutter } = useDiagnoseLayout()
   // Hand off to a host-owned URL. The host's `onHostNavigate` (Radar Cloud's
   // cross-tree swap) navigates same-document so the chrome morphs instead of
   // cold-booting; without it we fall back to a hard `window.location` nav.
@@ -507,6 +510,18 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     return () => window.removeEventListener('radar:open-settings', handler)
   }, [])
 
+  // Listen for "open-local-terminal" DOM event — the AI surface is portaled above
+  // the DockProvider, so it can't call useOpenLocalTerminal directly; it dispatches
+  // this instead (mirrors the open-settings pattern).
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { command, title } = (e as CustomEvent).detail ?? {}
+      openLocalTerminal({ initialCommand: command, title })
+    }
+    window.addEventListener('radar:open-local-terminal', handler)
+    return () => window.removeEventListener('radar:open-local-terminal', handler)
+  }, [openLocalTerminal])
+
   // Diagnostics overlay state
   const [showDiagnostics, setShowDiagnostics] = useState(false)
 
@@ -895,6 +910,18 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   const contentReady = !isSwitching && !authMePending &&
     !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connected'
 
+  const { clusterLoadState, showHomeClusterLoadFallback, clusterLoadInitial } = useClusterLoadState({
+    namespaces,
+    mainView,
+    chromeless,
+    contentReady,
+    onClusterLoadStateChange,
+  })
+  // Suppress the topbar warmup label during the initial dashboard fetch only on
+  // Home, where the center "Loading dashboard…" splash already covers it. Off
+  // Home there's no splash, so keep the label as the only text cue.
+  const showClusterWarmupLabel = clusterLoadState.loading && !(clusterLoadInitial && mainView === 'home')
+
   // Query client for cache invalidation
   const queryClient = useQueryClient()
 
@@ -923,8 +950,22 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
     timer: number | null
   }>({ updatedKinds: new Set(), timer: null })
+  const timelineInvalidationRef = useRef<{ timer: number | null }>({ timer: null })
 
   const handleK8sEvent = useCallback((event: K8sEvent) => {
+    // The timeline consumes every frame — including the K8s Event kind the
+    // resource tiers skip below (warnings like BackOff are timeline content).
+    // Its own trailing throttle keeps the live view fresh within seconds
+    // while batching bursts into one refetch; the 60s poll on useChanges
+    // remains the no-SSE fallback.
+    const tl = timelineInvalidationRef.current
+    if (tl.timer === null) {
+      tl.timer = window.setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: ['changes'] })
+        timelineInvalidationRef.current = { timer: null }
+      }, 5000)
+    }
+
     // Skip K8s Event kind — informational, not resource mutations
     if (event.kind === 'Event') return
 
@@ -985,15 +1026,17 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   useEffect(() => () => {
     if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
     if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
+    if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
     fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
     slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
+    timelineInvalidationRef.current = { timer: null }
   }, [])
 
   // SSE connection for real-time updates — no namespace filter for small/medium clusters (frontend filters).
   // 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 } = useEventSource(namespaces, sseMode as 'resources' | 'traffic', {
+  const { topology, connected: eventStreamConnected, connecting: eventStreamConnecting, reconnect: reconnectEventStream } = useEventSource(namespaces, sseMode as 'resources' | 'traffic', {
     onContextSwitchComplete: endSwitch,
     onContextSwitchProgress: updateProgress,
     onContextChanged: () => {
@@ -1006,8 +1049,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
       // Cancel any pending SSE-driven invalidation — old cluster's events are irrelevant
       if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
       if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
+      if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
       fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
       slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
+      timelineInvalidationRef.current = { 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).
@@ -1030,8 +1075,6 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
     },
     onK8sEvent: handleK8sEvent,
   }, forceNamespaceFilter, showPolicyEffect)
-  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.
   // Without this, header switches and deep-link loads can leave SSE filtered
@@ -1076,6 +1119,28 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   // Track CRD discovery status from topology (more direct than cluster-info)
   // When discovery completes, topology will auto-update via SSE with new CRD nodes
   const crdDiscoveryStatus = topology?.crdDiscoveryStatus
+  const clusterConnectionState = connection.state
+  const clusterConnected = clusterConnectionState === 'connected'
+  const liveUpdatesDisconnected = clusterConnected && !eventStreamConnected && !eventStreamConnecting
+  const headerConnectionLabel =
+    clusterConnectionState === 'disconnected' ? 'Disconnected' :
+    clusterConnectionState === 'connecting' ? 'Connecting' :
+    liveUpdatesDisconnected ? 'Live updates disconnected' :
+    clusterLoadState.loading ? `Connected — ${clusterLoadState.message}` :
+    crdDiscoveryStatus === 'discovering' ? 'Connected — discovering Custom Resources...' :
+    'Connected'
+  const headerConnectionDisplayLabel =
+    clusterConnectionState === 'disconnected' ? 'Disconnected' :
+    clusterConnectionState === 'connecting' ? 'Connecting' :
+    liveUpdatesDisconnected ? 'Live updates disconnected' :
+    showClusterWarmupLabel ? clusterLoadState.message :
+    crdDiscoveryStatus === 'discovering' ? 'Discovering Custom Resources…' :
+    ''
+  const showHeaderReconnect =
+    clusterConnectionState === 'disconnected' ||
+    liveUpdatesDisconnected
+  const headerReconnect = clusterConnectionState === 'disconnected' ? retryConnection : reconnectEventStream
+  const headerReconnectPending = clusterConnectionState === 'disconnected' ? isRetrying : false
 
   // Debug: log discovery status changes
   useEffect(() => {
@@ -1516,7 +1581,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
         content column (min-w-0, shrinkable) would fall below the old desktop
         floor at small windows. Embedded mode has no rail → plain 800. */}
     <div
-      className="relative flex h-screen bg-theme-base"
+      className={`relative flex bg-theme-base ${navCustomization.embedded ? 'h-full min-h-0' : 'h-screen'}`}
       style={{ minWidth: 800 + (showNavRail ? (navRailEffectivePinned ? 176 : 56) : 0) }}
     >
       {showNavRail && (
@@ -1535,9 +1600,13 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           span the content area AFTER the rail rather than the full viewport
           under it. `fixed` splashes (connecting/switching) are unaffected. */}
       <div className="relative flex flex-col flex-1 min-w-0 h-full">
-      {/* Header — suppressed in chromeless embed; the host owns the chrome. */}
+      {/* Header — suppressed in chromeless embed; the host owns the chrome.
+          @container: the header's responsive layout keys off its OWN width (≈ viewport
+          − nav rail), not the viewport, so it collapses gracefully on narrow windows.
+          The AI panel docks BELOW the navbar and pushes only the content region, so the
+          navbar is never squeezed by it — these thresholds react to real window width. */}
       {!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">
+      <header className="@container 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. 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)
@@ -1576,49 +1645,49 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                 />
               </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. */}
+            {/* Connection status — a fixed-size dot (state in the tooltip), an
+                optional reconnect button, and 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
+                unless reconnect is available. */}
             <div className="ml-1 flex items-center gap-1.5 shrink-0">
               <Tooltip
-                content={
-                  !clusterConnected
-                    ? 'Cluster disconnected — click to reconnect'
-                    : crdDiscoveryStatus === 'discovering'
-                      ? 'Connected — discovering Custom Resources...'
-                      : 'Connected'
-                }
+                content={headerConnectionLabel}
                 delay={100}
                 position="bottom"
               >
-                {clusterConnected ? (
-                  <span
-                    className={`block w-2.5 h-2.5 shrink-0 rounded-full ${
-                      crdDiscoveryStatus === 'discovering' ? 'bg-amber-400 animate-pulse' : 'bg-green-500'
-                    }`}
-                  />
-                ) : (
+                <span
+                  className={`block w-2.5 h-2.5 shrink-0 rounded-full ${
+                    clusterConnectionState === 'disconnected' || liveUpdatesDisconnected
+                      ? 'bg-red-500'
+                      : clusterConnectionState === 'connecting' || crdDiscoveryStatus === 'discovering' || clusterLoadState.loading
+                        ? 'bg-amber-400 animate-pulse'
+                        : 'bg-green-500'
+                  }`}
+                />
+              </Tooltip>
+              {showNavRail && headerConnectionDisplayLabel && (
+                <span className="hidden xl:flex items-center gap-1.5 whitespace-nowrap text-[11px] text-theme-text-tertiary">
+                  {showClusterWarmupLabel && <Loader2 className="w-3 h-3 animate-spin" />}
+                  {headerConnectionDisplayLabel}
+                </span>
+              )}
+              {showHeaderReconnect && (
+                <Tooltip content="Reconnect" delay={100} position="bottom">
                   <button
                     type="button"
-                    onClick={retryConnection}
-                    disabled={isRetrying}
-                    aria-label="Cluster disconnected — reconnect"
-                    className="block shrink-0 disabled:cursor-default"
+                    onClick={headerReconnect}
+                    disabled={headerReconnectPending}
+                    aria-label={clusterConnectionState === 'disconnected' ? 'Reconnect cluster' : 'Reconnect live updates'}
+                    className="p-1 text-theme-text-secondary hover:text-theme-text-primary disabled:opacity-50 disabled:pointer-events-none"
                   >
-                    <span className={`block w-2.5 h-2.5 rounded-full bg-red-500 ${isRetrying ? 'animate-pulse' : ''}`} />
+                    <RefreshCw className={`w-3 h-3 ${headerReconnectPending ? 'animate-spin' : ''}`} />
                   </button>
-                )}
-              </Tooltip>
-              {showNavRail && (!clusterConnected || crdDiscoveryStatus === 'discovering') && (
-                <span className="hidden xl:block whitespace-nowrap text-[11px] text-theme-text-tertiary">
-                  {!clusterConnected ? 'Disconnected' : 'Discovering Custom Resources…'}
-                </span>
+                </Tooltip>
               )}
             </div>
             {/* Port forwards indicator — shown only when sessions exist */}
@@ -1630,7 +1699,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
             navigates via the left rail (showNavRail), so the pill bar is
             suppressed there to avoid a duplicate primary nav. */}
         {!showNavRail && (
-        <div className="md:absolute md:left-1/2 md:-translate-x-1/2 flex items-center gap-0.5 bg-theme-elevated/50 rounded-full p-1 ml-2 md:ml-0">
+        <div className="@min-[920px]:absolute @min-[920px]:left-1/2 @min-[920px]:-translate-x-1/2 flex items-center gap-0.5 bg-theme-elevated/50 rounded-full p-1 ml-2 @min-[920px]:ml-0">
           {([
             { view: 'home' as const, icon: Home, label: 'Home' },
             { view: 'topology' as const, icon: Network, label: 'Topology' },
@@ -1677,7 +1746,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                     off-system breakpoint chosen by measurement at the time
                     of this PR — recompute if the cluster switcher cap or
                     other left-section chrome changes appreciably. */}
-                <span className="hidden min-[1440px]:inline">{label}</span>
+                <span className="hidden @min-[1264px]:inline">{label}</span>
               </button>
             </Tooltip>
           ))}
@@ -1692,7 +1761,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
             "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">
+          <div className="hidden @min-[720px]:flex flex-1 justify-center min-w-0 px-3">
             <RadarOmnibar
               ref={omnibarRef}
               onNavigateView={(view) => setMainView(view)}
@@ -1733,11 +1802,14 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
 
           {/* GitHub star — hidden in embedded mode (not OSS-distribution chrome). */}
           {!navCustomization.embedded && (
-            <div className="hidden lg:block">
+            <div className="hidden @min-[1100px]:block">
               <GitHubStarButton />
             </div>
           )}
 
+          {/* AI investigations (self-hides when no agent CLI is present) */}
+          <GlobalDiagnoseButton />
+
           {/* Local terminal */}
           {capabilities.localTerminal && (
             <Tooltip content="Open local terminal">
@@ -1758,7 +1830,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:flex items-center">
+            <div className="hidden @min-[920px]:flex items-center">
               <ThemeToggle />
             </div>
           )}
@@ -1799,6 +1871,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
       </header>
       )}
 
+      {/* Body frame — every content state lives here and reflows left of the docked
+          AI panel (an absolute slot in this column). The header + nav rail are OUTSIDE
+          this wrapper, so they never move when the panel opens. */}
+      <div className="relative flex flex-1 flex-col min-h-0" style={{ paddingRight: contentGutter, transition: 'padding-right 0.2s ease' }}>
+
       {/* Auth barrier - show when auth is enabled but user is not authenticated */}
       {authMe?.authEnabled && !authMe?.username && authMe.authMode === 'proxy' && (
         <AuthBarrier authMode="proxy" />
@@ -1820,95 +1897,60 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           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 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="absolute inset-0 pointer-events-none">
-            <img
-              src={radarLoadingIcon}
-              alt=""
-              aria-hidden
-              // 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)' }}
-            />
-            <div
-              className="absolute left-1/2 -translate-x-1/2 text-center"
-              style={{ top: 'calc(50% + 34px)' }}
-            >
-              {/* 17px semibold matches the other splash surfaces so font
-                  weight doesn't visibly swap during hub → cluster
-                  transitions. Subtitles below stay smaller/dimmer. */}
-              <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
-                Connecting to cluster
-              </p>
-              {connection.context && (
-                <p className="text-sm text-theme-text-secondary mt-1">{connection.context}</p>
-              )}
-              {connection.progressMessage && (
-                <p className="text-xs text-theme-text-tertiary animate-pulse mt-3">
-                  {connection.progressMessage}
-                </p>
-              )}
-            </div>
-          </div>
-        </div>
+        <PaneLoader
+          label="Connecting to cluster"
+          className="flex-1 min-h-0 bg-theme-base"
+        >
+          {connection.context && (
+            <span className="mt-1 block text-sm font-normal tracking-normal text-theme-text-secondary">
+              {connection.context}
+            </span>
+          )}
+          {connection.progressMessage && (
+            <span className="mt-3 block text-xs font-normal tracking-normal text-theme-text-tertiary animate-pulse">
+              {connection.progressMessage}
+            </span>
+          )}
+        </PaneLoader>
       )}
 
-      {/* Context switching overlay — icon pane-anchored, label below. */}
+      {/* Context switching overlay */}
       {isSwitching && (
-        <div className="flex-1 relative bg-theme-base">
-          <div className="absolute inset-0 pointer-events-none">
-            <img
-              src={radarLoadingIcon}
-              alt=""
-              aria-hidden
-              // 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)' }}
-            />
-            <div
-              className="absolute left-1/2 -translate-x-1/2 text-center"
-              style={{ top: 'calc(50% + 34px)' }}
-            >
-              <div className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">Switching context</div>
-              {targetContext && (
-                <div className="text-xs mt-2 text-theme-text-tertiary">
-                  {targetContext.provider ? (
-                    <span className="flex items-center justify-center gap-1.5">
-                      <span className="text-blue-400 font-medium">{targetContext.provider}</span>
-                      {targetContext.account && (
-                        <>
-                          <span className="text-theme-text-tertiary/50">•</span>
-                          <span>{targetContext.account}</span>
-                        </>
-                      )}
-                      {targetContext.region && (
-                        <>
-                          <span className="text-theme-text-tertiary/50">•</span>
-                          <span>{targetContext.region}</span>
-                        </>
-                      )}
+        <PaneLoader
+          label="Switching context"
+          className="flex-1 min-h-0 bg-theme-base"
+        >
+          {targetContext && (
+            <span className="mt-2 block text-xs font-normal tracking-normal text-theme-text-tertiary">
+              {targetContext.provider ? (
+                <span className="flex items-center justify-center gap-1.5">
+                  <span className="text-blue-400 font-medium">{targetContext.provider}</span>
+                  {targetContext.account && (
+                    <>
                       <span className="text-theme-text-tertiary/50">•</span>
-                      <span className="text-theme-text-secondary font-medium">{targetContext.clusterName}</span>
-                    </span>
-                  ) : (
-                    <span>{targetContext.raw}</span>
+                      <span>{targetContext.account}</span>
+                    </>
                   )}
-                </div>
-              )}
-              {progressMessage && (
-                <div className="text-xs mt-3 text-theme-text-tertiary animate-pulse">
-                  {progressMessage}
-                </div>
+                  {targetContext.region && (
+                    <>
+                      <span className="text-theme-text-tertiary/50">•</span>
+                      <span>{targetContext.region}</span>
+                    </>
+                  )}
+                  <span className="text-theme-text-tertiary/50">•</span>
+                  <span className="text-theme-text-secondary font-medium">{targetContext.clusterName}</span>
+                </span>
+              ) : (
+                <span>{targetContext.raw}</span>
               )}
-            </div>
-          </div>
-        </div>
+            </span>
+          )}
+          {progressMessage && (
+            <span className="mt-3 block text-xs font-normal tracking-normal text-theme-text-tertiary animate-pulse">
+              {progressMessage}
+            </span>
+          )}
+        </PaneLoader>
       )}
 
       {/* Main content - only show when connected and authenticated */}
@@ -1922,6 +1964,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           <HomeView
             namespaces={namespaces}
             topology={topology}
+            fallbackClusterLoadState={showHomeClusterLoadFallback ? clusterLoadState : undefined}
             onNavigateToView={setMainView}
             onNavigateToResourceKind={(kind, apiGroup, filters) => {
               // Navigate to resources view with kind in URL path
@@ -2090,7 +2133,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           <TimelineView
             namespaces={namespaces}
             onResourceClick={(resource) => {
-              navigate(buildWorkloadPath(resource))
+              navigate(relatedResourcePath(resource))
             }}
             initialViewMode={(searchParams.get('view') as 'list' | 'swimlane') || undefined}
             initialFilter={(searchParams.get('filter') as 'all' | 'changes' | 'k8s_events' | 'warnings' | 'unhealthy') || undefined}
@@ -2141,9 +2184,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               // detail panel) sits behind the peek. Search-only change keeps the
               // pathname — and thus the peek's owner-path — intact.
               const params = new URLSearchParams(window.location.search)
-              if (params.has('workload') || params.has('tab')) {
+              if (params.has('workload') || params.has('tab') || params.has('run')) {
                 params.delete('workload')
                 params.delete('tab')
+                params.delete('run')
                 navigate({ pathname: window.location.pathname, search: params.toString() }, { replace: true })
               }
               navigateToResource(resource)
@@ -2167,27 +2211,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
             own fetches) while the cross-document nav lands. Covers checks /
             issues / gitops with one block since only one view is active. */}
         {viewTakeoverHref && (
-          <div className="flex-1 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="absolute inset-0 pointer-events-none">
-              <img
-                src={radarLoadingIcon}
-                alt=""
-                aria-hidden
-                className="absolute w-11 h-11"
-                style={{ left: 'calc(50% - 22px)', top: 'calc(50% - 22px)' }}
-              />
-              <div
-                className="absolute left-1/2 -translate-x-1/2 text-center"
-                style={{ top: 'calc(50% + 34px)' }}
-              >
-                <p className="whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
-                  Opening…
-                </p>
-              </div>
-            </div>
-          </div>
+          <PaneLoader
+            label="Opening…"
+            className="flex-1 min-h-0 bg-theme-base"
+          />
         )}
 
         {/* Best practices detail view (inline only when the host hasn't taken
@@ -2217,7 +2244,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
         {mainView === 'workload' && (
           <WorkloadViewRoute
             onNavigateToResource={(resource) => {
-              navigate(buildWorkloadPath(resource))
+              navigate(relatedResourcePath(resource))
             }}
           />
         )}
@@ -2227,6 +2254,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
 
         </ErrorBoundary>
       </div>}
+      </div>{/* /body frame */}
 
       {/* Resource detail drawer — stays mounted, expands to full-screen WorkloadView.
           Gated on contentReady so it never renders over the connecting/switching
@@ -2238,6 +2266,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
           // No Radar header in chromeless embeds (Radar Hub) — anchor the drawer
           // to the top of the content area instead of leaving a 49px gap.
           headerHeight={chromeless ? 0 : undefined}
+          rightInset={contentGutter}
           isOpen={resourceDrawer.isOpen}
           expanded={drawerExpandedProp}
           onClose={closeDrawer}
@@ -2279,6 +2308,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
         <HelmReleaseDrawer
           release={drawerHelmRelease}
           isOpen={helmDrawer.isOpen}
+          rightInset={contentGutter}
           onClose={() => {
             setSelectedHelmRelease(null)
             const params = new URLSearchParams(window.location.search)
@@ -2298,6 +2328,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
         />
       )}
 
+      {/* AI investigation panel — an absolute slot in this column (the body frame),
+          below the header and right of the nav rail, sharing the frame with the
+          drawers above. Docked = right slot (pushes content via contentGutter);
+          maximized = fills the frame. */}
+      {diagnoseOpen && <DiagnoseSurface topInset={chromeless ? 0 : APP_HEADER_HEIGHT} />}
+
       {/* Port Forward floating panel (indicator lives in header) */}
       <PortForwardPanel />
 
@@ -2424,14 +2460,18 @@ function FloatingButtons({ showHelp, showCommandPalette, showDiagnostics, onHelp
 }
 
 // Main App component wrapped with providers
-function App({ manageDocumentTitle = false, documentTitleSuffix }: { manageDocumentTitle?: boolean; documentTitleSuffix?: string }) {
+function App({ manageDocumentTitle = false, documentTitleSuffix, onClusterLoadStateChange }: AppProps) {
   return (
     <ConnectionProvider>
       <CapabilitiesProvider>
         <ContextSwitchProvider>
           <DockProvider>
             <KeyboardShortcutProvider>
-              <AppInner manageDocumentTitle={manageDocumentTitle} documentTitleSuffix={documentTitleSuffix} />
+              <AppInner
+                manageDocumentTitle={manageDocumentTitle}
+                documentTitleSuffix={documentTitleSuffix}
+                onClusterLoadStateChange={onClusterLoadStateChange}
+              />
             </KeyboardShortcutProvider>
           </DockProvider>
         </ContextSwitchProvider>