@skyhook-io/radar-app 1.8.6 → 1.8.8

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, TopologyBreadcrumb, 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,15 @@ 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 +71,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 +89,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>([
@@ -143,7 +152,10 @@ function namespaceFilterDisabled(
   pathname: string,
   apiResources?: { name: string; kind: string; namespaced: boolean }[],
 ): { disabled: boolean; tooltip?: string } {
-  if (view === 'cost') {
+  if (
+    view === 'cost' &&
+    !pathname.startsWith('/cost/rightsizing')
+  ) {
     return {
       disabled: true,
       tooltip: 'Cost is reported per namespace across the whole cluster — the namespace filter doesn’t apply here.',
@@ -226,27 +238,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 +274,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 +288,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.
@@ -482,6 +487,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
   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)
+  // The topology pane element — the search overlay portals into it so its
+  // backdrop dims only the pane (not the app) and stays clickable. Callback-ref
+  // state so it updates once the pane mounts.
+  const [topologyPane, setTopologyPane] = useState<HTMLDivElement | 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())
 
@@ -498,7 +507,6 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
 
   // Settings dialog state
   const [showSettings, setShowSettings] = useState(false)
-  const [showMyPermissions, setShowMyPermissions] = useState(false)
 
   // Listen for "open-settings" DOM event (used by MCPSetupDialog etc.)
   useEffect(() => {
@@ -507,6 +515,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 +915,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 +955,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 +1031,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 +1054,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 +1080,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 +1124,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 +1586,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 +1605,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 +1650,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 +1704,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 +1751,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 +1766,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 +1807,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 +1835,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 +1876,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 +1902,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 +1969,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
@@ -2014,7 +2062,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                   }}
                 />
 
-                <div className="flex-1 relative">
+                <div ref={setTopologyPane} className="flex-1 relative">
                   <TopologyGraph
                     topology={topologyWithAudit}
                     viewMode={topologyMode}
@@ -2025,48 +2073,55 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
                     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' ? 'Network Flow' : '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 */}
-                  <TopologyControls
-                    viewMode={topologyMode}
-                    onViewModeChange={(mode) => {
-                      setTopologyMode(mode)
-                      // Fleet mode: namespace grouping for structure, but expanded (not collapsed chips)
-                      if (mode === 'fleet') setGroupingMode('namespace')
-                    }}
-                    groupingMode={groupingMode}
-                    onGroupingModeChange={setGroupingMode}
-                    showNoGrouping={hasNamespaceFilter}
-                    showPolicyEffect={showPolicyEffect}
-                    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}
+                  >
+                    {/* Overlay row: left column (namespace breadcrumb over search)
+                        + controls. items-start pins the controls to the top even
+                        when the breadcrumb grows the left column; w-full so
+                        justify-between spans the canvas. */}
+                    <div className="flex w-full items-start justify-between gap-2">
+                      <div className="flex flex-col items-start gap-2">
+                        {namespaces.length === 1 && (
+                          <TopologyBreadcrumb
+                            namespace={namespaces[0]}
+                            onClear={() => setActiveNamespace.mutate({ namespaces: [] })}
+                          />
+                        )}
+                        <TopologySearch
+                          nodes={filteredTopology?.nodes ?? []}
+                          allNodes={topology?.nodes}
+                          viewModeLabel={topologyMode === 'fleet' ? 'Fleet' : topologyMode === 'traffic' ? 'Network Flow' : 'Resources'}
+                          onNodeSelect={handleNodeClick}
+                          onZoomToNode={(id) => setTopologyFocus((prev) => ({ id, nonce: (prev?.nonce ?? 0) + 1 }))}
+                          overlayContainer={topologyPane}
+                        />
+                      </div>
+                      <TopologyControls
+                        viewMode={topologyMode}
+                        onViewModeChange={(mode) => {
+                          setTopologyMode(mode)
+                          // Fleet mode: namespace grouping for structure, but expanded (not collapsed chips)
+                          if (mode === 'fleet') setGroupingMode('namespace')
+                        }}
+                        groupingMode={groupingMode}
+                        onGroupingModeChange={setGroupingMode}
+                        showNoGrouping={hasNamespaceFilter}
+                        showPolicyEffect={showPolicyEffect}
+                        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>
+                  </TopologyGraph>
                 </div>
               </>
             )}
@@ -2090,7 +2145,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}
@@ -2128,6 +2183,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
               navigateToResource(resource)
             }}
             onClearNamespaces={clearAllNamespaces}
+            onOpenSettings={() => setShowSettings(true)}
           />
         )}
 
@@ -2141,9 +2197,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)
@@ -2158,7 +2215,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
 
         {/* Cost detail view */}
         {mainView === 'cost' && (
-          <CostView onBack={() => setMainView('home')} />
+          <CostView namespaces={namespaces} onBack={() => setMainView('home')} onOpenResource={navigateToResource} />
         )}
 
         {/* Takeover splash. When the host claims the current view via
@@ -2167,27 +2224,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 +2257,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
         {mainView === 'workload' && (
           <WorkloadViewRoute
             onNavigateToResource={(resource) => {
-              navigate(buildWorkloadPath(resource))
+              navigate(relatedResourcePath(resource))
             }}
           />
         )}
@@ -2227,6 +2267,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 +2279,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 +2321,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 +2341,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 />
 
@@ -2362,16 +2411,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix }: { manage
       {/* Diagnostics overlay */}
       {diagnosticsOverlay.shouldRender && <DiagnosticsOverlay isOpen={diagnosticsOverlay.isOpen} onClose={() => setShowDiagnostics(false)} />}
 
-      {/* Settings dialog */}
+      {/* Settings dialog — My permissions is rendered inline in its own section */}
       <SettingsDialog
         open={showSettings}
         onClose={() => setShowSettings(false)}
-        onShowMyPermissions={() => {
-          setShowSettings(false)
-          setShowMyPermissions(true)
-        }}
       />
-      <MyPermissionsDialog open={showMyPermissions} onClose={() => setShowMyPermissions(false)} />
 
       {/* Debug overlay — dev mode, standalone only. Embedded hosts (Radar Hub)
           own their own dev tooling; ours would collide with theirs bottom-right. */}
@@ -2424,14 +2468,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>