@skyhook-io/radar-app 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "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",
@@ -35,7 +35,7 @@
     "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.1",
-    "yaml": "^2.8.4"
+    "yaml": "^2.9.0"
   },
   "peerDependencies": {
     "@skyhook-io/k8s-ui": ">=1.5.0",
@@ -53,10 +53,10 @@
     "@playwright/test": "^1.59.1",
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.4",
+    "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-query": "^5.100.9",
     "@types/diff": "^8.0.0",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.7.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
@@ -66,13 +66,13 @@
     "lucide-react": "^1.12.0",
     "postcss": "^8.5.14",
     "prettier": "^3.8.1",
-    "react": "^19.2.5",
+    "react": "^19.2.6",
     "react-dom": "^19.2.5",
     "react-router-dom": "^7.15.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.2",
-    "vite": "^8.0.10"
+    "vite": "^8.0.12"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -3,10 +3,10 @@ import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from './hooks/useRefreshAnimation'
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { useQueryClient } from '@tanstack/react-query'
-import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
+import { useNavigate, useLocation, useSearchParams, useNavigationType, NavigationType } from 'react-router-dom'
 import { HomeView } from './components/home/HomeView'
 import { DebugOverlay } from './components/DebugOverlay'
-import { TopologyGraph, TopologyFilterSidebar, TopologyControls } from '@skyhook-io/k8s-ui'
+import { TopologyGraph, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
 import { TimelineView } from './components/timeline/TimelineView'
 import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
@@ -16,11 +16,13 @@ import { HelmView } from './components/helm/HelmView'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
 import { AuditView } from './components/audit/AuditView'
+import { GitOpsView } from './components/gitops/GitOpsView'
 import { HelmReleaseDrawer } from './components/helm/HelmReleaseDrawer'
 import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './components/portforward/PortForwardManager'
-import { DockProvider, BottomDock, useDock, useOpenLocalTerminal } from './components/dock'
+import { DockProvider, BottomDock, useDock, useDockReservedHeight, useOpenLocalTerminal } from './components/dock'
 import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
+import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { useNavCustomization } from './context/NavCustomization'
 import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitchContext'
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
@@ -28,24 +30,23 @@ import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
-import { NamespaceSelector, type NamespaceSelectorHandle } from './components/ui/NamespaceSelector'
 import { UpdateNotification } from './components/ui/UpdateNotification'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { CommandPalette } from './components/ui/CommandPalette'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
-import { useNamespaces, useSwitchContext, useAuthMe } from './api/client'
+import { debugNamespaceLog, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe } from './api/client'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
-import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck } from 'lucide-react'
+import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import type { TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
-import { kindToPlural, openExternal } from './utils/navigation'
+import { kindToPlural, openExternal, apiVersionToGroup, buildWorkloadPath } from './utils/navigation'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
 
 // All possible node kinds (core + GitOps)
@@ -115,7 +116,7 @@ function apiResourceToNodeIdPrefix(apiResource: string): string {
 }
 
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -129,6 +130,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'cost') return 'cost'
   if (path === 'workload') return 'workload'
   if (path === 'audit') return 'audit'
+  if (path === 'gitops') return 'gitops'
   return 'home'
 }
 
@@ -173,6 +175,7 @@ function AuthBarrier({ authMode }: { authMode: string }) {
 function AppInner() {
   const navigate = useNavigate()
   const location = useLocation()
+  const navigationType = useNavigationType()
   const [searchParams, setSearchParams] = useSearchParams()
   const capabilities = useCapabilitiesContext()
   const openLocalTerminal = useOpenLocalTerminal()
@@ -390,11 +393,11 @@ function AppInner() {
   const switchContext = useSwitchContext()
 
   // Refs for dropdown components to trigger them via shortcuts
-  const namespaceSelectorRef = useRef<NamespaceSelectorHandle>(null)
+  const namespaceSwitcherRef = useRef<NamespaceSwitcherHandle>(null)
   const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
 
   // View switching keyboard shortcuts
-  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'traffic', 'cost', 'audit']
+  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'gitops', 'traffic', 'cost', 'audit']
   useRegisterShortcuts([
     ...views.map((view, i) => ({
       id: `view-${view}`,
@@ -410,7 +413,7 @@ function AppInner() {
       description: 'Switch namespace',
       category: 'Navigation' as const,
       scope: 'global' as const,
-      handler: () => namespaceSelectorRef.current?.open(),
+      handler: () => namespaceSwitcherRef.current?.open(),
     },
     {
       id: 'switch-context',
@@ -490,7 +493,12 @@ function AppInner() {
   const hideGroupHeader = namespaces.length === 1 && effectiveGroupingMode === 'namespace'
 
   // Fetch available namespaces
-  const { data: availableNamespaces, error: namespacesError } = useNamespaces()
+  const { data: availableNamespaces } = useNamespaces()
+
+  // Per-user view filter served by the backend. Loaded eagerly so the
+  // picker can render its current state without showing the multi-select
+  // fallback during the initial scope fetch.
+  const { data: namespaceScope } = useNamespaceScope()
 
   // Context switch state
   const { isSwitching, targetContext, progressMessage, updateProgress, endSwitch } = useContextSwitch()
@@ -536,6 +544,16 @@ function AppInner() {
       if (pending.kinds.has('secrets')) {
         queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
       }
+      // GitOps tree + insights are derived views over the same informer
+      // cache that produced this SSE event — when *anything* changes, the
+      // managed-resource tree and the insights pipeline can have stale
+      // changes/events/drift. Invalidating broadly here is cheap (only the
+      // currently-mounted GitOps view re-fetches; other views have no
+      // matching keys) and is what makes the detail page actually live.
+      // Without this the failure card + topology lag behind the title chips
+      // until window focus or a manual refresh.
+      queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
+      queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
       // Reset accumulator
       pending.kinds = new Set()
       pending.hasCountChange = false
@@ -586,6 +604,26 @@ function AppInner() {
   }, forceNamespaceFilter, showPolicyEffect)
   const [reconnect, isReconnecting] = useRefreshAnimation(reconnectSSE)
 
+  // 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
+  // to a stale namespace while sidebar/topology show a different one. Small
+  // clusters never set forceNamespaceFilter and skip this path entirely.
+  useEffect(() => {
+    const isLarge = forceNamespaceFilter !== undefined || topology?.requiresNamespaceFilter === true
+    if (!isLarge) return
+    if (namespaces.length === 0) {
+      setForceNamespaceFilter(prev => (prev === undefined ? prev : undefined))
+      return
+    }
+    setForceNamespaceFilter(prev => {
+      const cur = prev ? [...prev].sort() : []
+      const next = [...namespaces].sort()
+      if (cur.length === next.length && cur.every((ns, i) => ns === next[i])) return prev
+      return [...namespaces]
+    })
+  }, [namespaces, forceNamespaceFilter, topology?.requiresNamespaceFilter])
+
   // Apply live topology updates only when not paused. While paused, buffer the
   // latest snapshot so we can apply it instantly when the user resumes.
   useEffect(() => {
@@ -651,16 +689,72 @@ function AppInner() {
     // TODO: Could show a list of pods in the group
     if (node.kind === 'PodGroup') return
 
+    const namespace = (node.data.namespace as string) || ''
+    // GitOps CRs (Application/Kustomization/HelmRelease/etc.) have a dedicated
+    // detail page with tree + insights + ops that the drawer can't reproduce.
+    // Route there from the main topology when the node is one of those kinds;
+    // everything else falls back to the drawer.
+    const gitOpsPath = gitOpsRouteForKind(node.kind, namespace, node.name)
+    if (gitOpsPath) {
+      navigate(gitOpsPath)
+      return
+    }
+
     navigateToResource({
       kind: kindToPlural(node.kind),
-      namespace: (node.data.namespace as string) || '',
+      namespace,
       name: node.name,
+      group: apiVersionToGroup(node.data.apiVersion as string | undefined),
     })
-  }, [])
+  }, [navigate])
 
   // Serialize namespaces for stable dependency tracking
   const namespacesKey = namespaces.join(',')
 
+  // The server is canonical for the per-user namespace pick. Mirror its
+  // `actives` into App.tsx state so consumer hooks (SSE, dashboard, resource
+  // lists) stay in lockstep with the picker. The dedicated URL-write effect
+  // below propagates the mirrored state to `?namespaces=`.
+  const setActiveNamespace = useSetActiveNamespace()
+  const initialBookmarkReconciledRef = useRef(false)
+  const scopeActives = useMemo(() => namespaceScope?.actives ?? [], [namespaceScope?.actives])
+  const namespaceScopeKey = useMemo(() => namespaceScope ? [...scopeActives].sort().join(',') : null, [namespaceScope, scopeActives])
+  useEffect(() => {
+    if (!namespaceScope) return
+    const sortedScope = [...scopeActives].sort()
+    const sortedState = [...namespaces].sort()
+    const sameAsState = sortedScope.length === sortedState.length && sortedScope.every((ns, i) => ns === sortedState[i])
+    debugNamespaceLog('app:scope-mirror', {
+      scopeActives,
+      stateNamespaces: namespaces,
+      sameAsState,
+      initialBookmarkReconciled: initialBookmarkReconciledRef.current,
+    })
+
+    // First-load bookmark reconciliation: if the URL had namespaces that
+    // differ from the server pick when the scope first arrives, push the
+    // URL choice to the server so shared/bookmarked deep links keep
+    // working. The ref flips on the first scope load regardless of whether
+    // the URL had namespaces — subsequent runs mirror server → state.
+    if (!initialBookmarkReconciledRef.current) {
+      initialBookmarkReconciledRef.current = true
+      if (!sameAsState && sortedState.length > 0) {
+        debugNamespaceLog('app:scope-mirror-bookmark-to-server', {
+          stateNamespaces: sortedState,
+          scopeActives: sortedScope,
+        })
+        setActiveNamespace.mutate({ namespaces: sortedState })
+        return
+      }
+    }
+
+    if (!sameAsState) {
+      debugNamespaceLog('app:scope-mirror-set-namespaces', { nextNamespaces: scopeActives })
+      setNamespaces(scopeActives)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- namespaces and setActiveNamespace are intentionally excluded; we only react to server-side changes.
+  }, [namespaceScope, namespaceScopeKey])
+
   // Update URL query params when state changes (path is handled by setMainView)
   // Read from window.location.search (not React Router's searchParams) to preserve
   // params set by child components via window.history.replaceState (e.g., kind from ResourcesView).
@@ -696,18 +790,48 @@ function AppInner() {
 
     // Only update if params actually changed vs current URL
     if (params.toString() !== new URLSearchParams(currentSearch).toString()) {
+      debugNamespaceLog('app:url-write', {
+        namespaces,
+        currentSearch,
+        nextSearch: params.toString(),
+        mainView,
+      })
       setSearchParams(params, { replace: true })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps -- reads window.location.search, not searchParams
   }, [namespacesKey, topologyMode, groupingMode, mainView, setSearchParams])
 
-  // Sync state from URL when navigating (back/forward)
+  // Sync namespace + helm picks from the query string only when the query
+  // string changes. If this also ran on pathname / mainView changes, a view
+  // whose URL omits ?namespaces= would clear App state and POST [] to the
+  // server while the per-user pick was still narrowed — the picker would
+  // show the server scope but lists/dashboard would stay on "all namespaces".
   useEffect(() => {
     const urlNamespaces = parseNamespacesFromURL(searchParams)
+    debugNamespaceLog('app:url-sync', {
+      search: searchParams.toString(),
+      urlNamespaces,
+      stateNamespaces: namespaces,
+      namespacesKey,
+    })
 
-    if (urlNamespaces.join(',') !== namespacesKey) setNamespaces(urlNamespaces)
+    if (urlNamespaces.join(',') !== namespacesKey) {
+      debugNamespaceLog('app:url-sync-set-namespaces', { nextNamespaces: urlNamespaces })
+      setNamespaces(urlNamespaces)
+      if (namespaceScope) {
+        const sortedURL = [...urlNamespaces].sort()
+        const sortedScope = [...(namespaceScope.actives ?? [])].sort()
+        const same = sortedURL.length === sortedScope.length && sortedURL.every((ns, i) => ns === sortedScope[i])
+        if (!same) {
+          debugNamespaceLog('app:url-sync-mutate-server', {
+            urlNamespaces,
+            scopeActives: namespaceScope.actives ?? [],
+          })
+          setActiveNamespace.mutate({ namespaces: urlNamespaces })
+        }
+      }
+    }
 
-    // Restore helm release from URL (back navigation)
     const releaseParam = searchParams.get('release')
     if (releaseParam) {
       const slashIdx = releaseParam.indexOf('/')
@@ -717,8 +841,34 @@ function AppInner() {
         setSelectedHelmRelease({ namespace: ns, name, storageNamespace: searchParams.get('releaseStorage') || undefined })
       }
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- run only when searchParams change; namespacesKey/namespaceScope are read for that transition
   }, [searchParams])
 
+  useEffect(() => {
+    if (navigationType !== NavigationType.Pop || mainView !== 'resources') return
+    const kindFromPath = location.pathname.match(/^\/resources\/([^/]+)/)?.[1] ?? ''
+    const resourceParam = searchParams.get('resource')
+    if (kindFromPath && resourceParam) {
+      const slashIdx = resourceParam.indexOf('/')
+      const ns = slashIdx > 0 ? resourceParam.slice(0, slashIdx) : ''
+      const name = slashIdx > 0 ? resourceParam.slice(slashIdx + 1) : resourceParam
+      const apiGroup = searchParams.get('apiGroup') ?? ''
+      const next: SelectedResource = { kind: kindFromPath, namespace: ns, name, group: apiGroup }
+      setSelectedResource(prev => {
+        if (
+          prev &&
+          prev.kind === next.kind &&
+          prev.namespace === next.namespace &&
+          prev.name === next.name &&
+          (prev.group ?? '') === (next.group ?? '')
+        ) return prev
+        return next
+      })
+    } else if (kindFromPath && !resourceParam) {
+      setSelectedResource(prev => (prev === null ? prev : null))
+    }
+  }, [navigationType, mainView, location.pathname, searchParams])
+
   // Auto-adjust grouping when namespaces change
   useEffect(() => {
     if (namespaces.length === 0 && groupingMode === 'none') {
@@ -828,7 +978,7 @@ function AppInner() {
 
   return (
     <PortForwardProvider>
-    <div className="flex flex-col h-screen bg-theme-base min-w-[800px]">
+    <div className="relative flex flex-col h-screen bg-theme-base min-w-[800px]">
       {/* Header */}
       <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 */}
@@ -867,7 +1017,7 @@ function AppInner() {
                   collide with the absolute-centered nav block at xl, which
                   is the same breakpoint where nav labels appear. */}
               {(!connected || crdDiscoveryStatus === 'discovering') && (
-                <span className="text-xs text-theme-text-tertiary hidden xl:inline">
+                <span className="text-[11px] text-theme-text-tertiary hidden xl:inline">
                   {!connected ? 'Disconnected' : 'Discovering Custom Resources...'}
                 </span>
               )}
@@ -888,13 +1038,14 @@ function AppInner() {
         </div>
 
         {/* Center: View tabs — absolute centered on wide, flows after left section on narrow */}
-        <div className="md:absolute md:left-1/2 md:-translate-x-1/2 flex items-center gap-1 bg-theme-elevated/50 rounded-full p-1 ml-2 md:ml-0">
+        <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">
           {([
             { view: 'home' as const, icon: Home, label: 'Home' },
             { view: 'topology' as const, icon: Network, label: 'Topology' },
             { view: 'resources' as const, icon: List, label: 'Resources' },
             { view: 'timeline' as const, icon: Clock, label: 'Timeline' },
             { view: 'helm' as const, icon: Package, label: 'Helm' },
+            { view: 'gitops' as const, icon: GitBranch, label: 'GitOps' },
             { view: 'traffic' as const, icon: Activity, label: 'Traffic' },
             // Cost is intentionally hidden from the pill bar for now — the view still
             // exists and is reachable via /cost, the Home dashboard card, and the
@@ -904,7 +1055,7 @@ function AppInner() {
             <Tooltip key={view} content={label} delay={100} position="bottom">
               <button
                 onClick={() => setMainView(view)}
-                className={`flex items-center gap-1.5 px-2.5 py-1.5 text-sm rounded-full transition-colors ${
+                className={`flex items-center gap-1 px-2 py-1 text-[13px] rounded-full transition-colors ${
                   mainView === view
                     ? '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'
@@ -929,17 +1080,13 @@ function AppInner() {
 
         {/* Right: Controls */}
         <div className="flex items-center gap-3 shrink-0">
-          {/* Namespace selector with search */}
-          <NamespaceSelector
-            ref={namespaceSelectorRef}
-            value={namespaces}
-            onChange={setNamespaces}
-            namespaces={availableNamespaces}
-            namespacesError={namespacesError}
+          <NamespaceSwitcher
+            ref={namespaceSwitcherRef}
             disabled={mainView === 'helm'}
             disabledTooltip="Helm view always shows all namespaces"
           />
 
+
           {/* Command palette trigger */}
           <button
             onClick={() => setShowCommandPalette(true)}
@@ -1164,6 +1311,7 @@ function AppInner() {
                         namespaces={availableNamespaces}
                         onSelect={(ns) => {
                           setNamespaces([ns])
+                          setActiveNamespace.mutate({ namespaces: [ns] })
                           // Large clusters need server-side filtering — reconnect SSE with namespace
                           setForceNamespaceFilter([ns])
                         }}
@@ -1200,9 +1348,9 @@ function AppInner() {
                     selectedNodeId={selectedResource ? `${apiResourceToNodeIdPrefix(selectedResource.kind)}-${selectedResource.namespace}-${selectedResource.name}` : undefined}
                     paused={topologyPaused}
                     onTogglePause={handleTogglePause}
-                    onMaximizeNamespace={(ns) => setNamespaces([ns])}
+                    onMaximizeNamespace={(ns) => setActiveNamespace.mutate({ namespaces: [ns] })}
                     namespaceBreadcrumb={namespaces.length === 1 ? namespaces[0] : undefined}
-                    onClearNamespace={namespaces.length === 1 ? () => setNamespaces([]) : undefined}
+                    onClearNamespace={namespaces.length >= 1 ? () => setActiveNamespace.mutate({ namespaces: [] }) : undefined}
                     namespacesKey={namespaces.join(',')}
                   />
 
@@ -1243,14 +1391,17 @@ function AppInner() {
           <TimelineView
             namespaces={namespaces}
             onResourceClick={(resource) => {
-              navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`)
+              navigate(buildWorkloadPath(resource))
             }}
             initialViewMode={(searchParams.get('view') as 'list' | 'swimlane') || undefined}
             initialFilter={(searchParams.get('filter') as 'all' | 'changes' | 'k8s_events' | 'warnings' | 'unhealthy') || undefined}
             initialTimeRange={(searchParams.get('time') as '5m' | '30m' | '1h' | '6h' | '24h' | 'all') || undefined}
             requiresNamespaceFilter={topology?.requiresNamespaceFilter && namespaces.length === 0}
             availableNamespaces={availableNamespaces}
-            onNamespaceSelect={(ns) => setNamespaces([ns])}
+            onNamespaceSelect={(ns) => {
+              setNamespaces([ns])
+              setActiveNamespace.mutate({ namespaces: [ns] })
+            }}
           />
         )}
 
@@ -1273,6 +1424,16 @@ function AppInner() {
           />
         )}
 
+        {/* GitOps view */}
+        {mainView === 'gitops' && (
+          <GitOpsView
+            namespaces={namespaces}
+            onOpenResource={(resource) => {
+              setSelectedResource(resource)
+            }}
+          />
+        )}
+
         {/* Traffic view */}
         {mainView === 'traffic' && (
           <TrafficView namespaces={namespaces} />
@@ -1310,7 +1471,7 @@ function AppInner() {
         {mainView === 'workload' && !drawerExpanded && (
           <WorkloadViewRoute
             onNavigateToResource={(resource) => {
-              navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`)
+              navigate(buildWorkloadPath(resource))
             }}
           />
         )}
@@ -1330,12 +1491,12 @@ function AppInner() {
           onExpand={(res) => {
             suppressViewClearRef.current = true
             setDrawerExpanded(true)
-            navigate(`/workload/${res.kind}/${res.namespace}/${res.name}`)
+            navigate(buildWorkloadPath(res))
           }}
           onCollapse={handleCollapseFromExpanded}
           onNavigateToResource={(resource) => {
             setSelectedResource(resource)
-            navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`, { replace: true })
+            navigate(buildWorkloadPath(resource), { replace: true })
           }}
         />
       )}
@@ -1353,11 +1514,11 @@ function AppInner() {
             setSearchParams(params, { replace: true })
           }}
           onNavigateToResource={(resource) => {
-            // Navigate to resources view with kind in path and open the resource detail drawer
             setSelectedHelmRelease(null)
             const newParams = new URLSearchParams()
             const globalNamespaces = searchParams.get('namespaces')
             if (globalNamespaces) newParams.set('namespaces', globalNamespaces)
+            if (resource.group) newParams.set('apiGroup', resource.group)
             navigate({ pathname: `/resources/${resource.kind}`, search: newParams.toString() })
             setSelectedResource(resource)
           }}
@@ -1405,9 +1566,14 @@ function AppInner() {
             { name },
             // Namespace filter from the previous context may not exist in the
             // new one — clear it so resource lists don't silently go empty.
+            // The server clears all per-user picks on context switch already;
+            // local state mirrors that via the namespace-scope effect.
             { onSettled: () => setNamespaces([]) },
           )}
-          onSetNamespaces={setNamespaces}
+          onSetNamespaces={(ns) => {
+            setNamespaces(ns)
+            setActiveNamespace.mutate({ namespaces: ns })
+          }}
           onToggleTheme={toggleTheme}
           onShowDiagnostics={() => setShowDiagnostics(true)}
         />
@@ -1428,11 +1594,20 @@ function AppInner() {
 
 // Spacer component that adds padding when dock is open
 function DockSpacer() {
-  const { tabs, isExpanded } = useDock()
+  const { tabs, isResizing } = useDock()
+  const dockInset = useDockReservedHeight()
   const location = useLocation()
   // Traffic view manages its own layout — spacer would break its flex sizing
   if (tabs.length === 0 || location.pathname === '/traffic') return null
-  return <div className="shrink-0" style={{ height: isExpanded ? 300 : 36, transition: `height ${DURATION_DOCK}ms cubic-bezier(0.4, 0, 0.2, 1)` }} />
+  return (
+    <div
+      className="shrink-0"
+      style={{
+        height: dockInset,
+        transition: isResizing ? 'none' : `height ${DURATION_DOCK}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+      }}
+    />
+  )
 }
 
 // Floating action buttons that position themselves above the dock