@skyhook-io/radar-app 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.0.1",
+  "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,9 +16,10 @@ 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'
@@ -34,18 +35,18 @@ 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, useNamespaceScope, useSetActiveNamespace, 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()
@@ -394,7 +397,7 @@ function AppInner() {
   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}`,
@@ -541,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
@@ -591,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(() => {
@@ -656,12 +689,24 @@ 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(',')
@@ -679,6 +724,12 @@ function AppInner() {
     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
@@ -688,12 +739,17 @@ function AppInner() {
     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.
@@ -734,31 +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). Push the URL choice
-  // to the server too so the canonical pick stays in lockstep — otherwise a
-  // back-nav would visually update but leave the next reload pulling the
-  // server's previous (forward-nav) pick.
+  // 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) {
+      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('/')
@@ -768,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') {
@@ -918,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>
               )}
@@ -939,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
@@ -955,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'
@@ -1291,7 +1391,7 @@ 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}
@@ -1324,6 +1424,16 @@ function AppInner() {
           />
         )}
 
+        {/* GitOps view */}
+        {mainView === 'gitops' && (
+          <GitOpsView
+            namespaces={namespaces}
+            onOpenResource={(resource) => {
+              setSelectedResource(resource)
+            }}
+          />
+        )}
+
         {/* Traffic view */}
         {mainView === 'traffic' && (
           <TrafficView namespaces={namespaces} />
@@ -1361,7 +1471,7 @@ function AppInner() {
         {mainView === 'workload' && !drawerExpanded && (
           <WorkloadViewRoute
             onNavigateToResource={(resource) => {
-              navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`)
+              navigate(buildWorkloadPath(resource))
             }}
           />
         )}
@@ -1381,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 })
           }}
         />
       )}
@@ -1404,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)
           }}
@@ -1484,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