@skyhook-io/radar-app 1.8.7 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "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",
@@ -63,16 +63,16 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
-    "@xyflow/react": "^12.10.2",
+    "@xyflow/react": "^12.11.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
     "eslint": "^10.6.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.7.0",
-    "lucide-react": "^1.23.0",
+    "lucide-react": "^1.24.0",
     "postcss": "^8.5.16",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.5",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router-dom": "^7.18.1",

package/src/App.tsx

@@ -9,7 +9,7 @@ import { DebugOverlay } from './components/DebugOverlay'
 import { GlobalDiagnoseButton } from './components/diagnose/LocalDiagnoseAction'
 import { useDiagnoseLayout } from './components/diagnose/DiagnoseContext'
 import { DiagnoseSurface } from './components/diagnose/DiagnoseSurface'
-import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, FreshnessControl, gitOpsRouteForKind, gitOpsRouteForResource, ScopePill, PaneLoader } from '@skyhook-io/k8s-ui'
+import { 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'
@@ -61,7 +61,6 @@ 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, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
 import { type OmnibarHandle } from './components/ui/Omnibar'
@@ -153,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.',
@@ -485,6 +487,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   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())
 
@@ -501,7 +507,6 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
   // Settings dialog state
   const [showSettings, setShowSettings] = useState(false)
-  const [showMyPermissions, setShowMyPermissions] = useState(false)
 
   // Listen for "open-settings" DOM event (used by MCPSetupDialog etc.)
   useEffect(() => {
@@ -2057,7 +2062,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
                   }}
                 />
 
-                <div className="flex-1 relative">
+                <div ref={setTopologyPane} className="flex-1 relative">
                   <TopologyGraph
                     topology={topologyWithAudit}
                     viewMode={topologyMode}
@@ -2068,48 +2073,55 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
                     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>
               </>
             )}
@@ -2171,6 +2183,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
               navigateToResource(resource)
             }}
             onClearNamespaces={clearAllNamespaces}
+            onOpenSettings={() => setShowSettings(true)}
           />
         )}
 
@@ -2202,7 +2215,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
         {/* 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
@@ -2398,16 +2411,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       {/* 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. */}

package/src/api/client.argoResourceSync.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest'
+import { buildArgoResourceSyncVars } from './client'
+
+const options = {
+  revision: 'should-not-survive',
+  prune: true,
+  dryRun: false,
+  force: true,
+  applyOnly: true,
+  syncOptions: ['ServerSideApply=true'],
+}
+
+describe('buildArgoResourceSyncVars', () => {
+  it('preserves the complete Argo status ref and forces resource-safe options', () => {
+    expect(
+      buildArgoResourceSyncVars(
+        'argocd',
+        'guestbook',
+        {
+          group: 'apps',
+          kind: 'Deployment',
+          namespace: 'guestbook',
+          name: 'guestbook-ui',
+        },
+        options,
+      ),
+    ).toEqual({
+      namespace: 'argocd',
+      name: 'guestbook',
+      resources: [
+        {
+          group: 'apps',
+          kind: 'Deployment',
+          namespace: 'guestbook',
+          name: 'guestbook-ui',
+        },
+      ],
+      revision: undefined,
+      prune: false,
+      dryRun: false,
+      force: true,
+      applyOnly: false,
+      syncOptions: ['ServerSideApply=true'],
+    })
+  })
+
+  it('preserves an empty core API group', () => {
+    const variables = buildArgoResourceSyncVars(
+      'argocd',
+      'guestbook',
+      {
+        group: '',
+        kind: 'Service',
+        namespace: 'guestbook',
+        name: 'guestbook-ui',
+      },
+      options,
+    )
+
+    expect(variables.resources).toEqual([
+      {
+        group: '',
+        kind: 'Service',
+        namespace: 'guestbook',
+        name: 'guestbook-ui',
+      },
+    ])
+  })
+})

package/src/api/client.rightsizing.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { skipToken } from '@tanstack/react-query'
+import { getRightsizingScanCacheConfig } from './client'
+
+describe('rightsizing scan cache config', () => {
+  it('is manual-only and retained briefly', () => {
+    const config = getRightsizingScanCacheConfig(['staging', 'default'], 'cluster-a')
+
+    expect(config.queryFn).toBe(skipToken)
+    expect(config.gcTime).toBe(5 * 60 * 1000)
+  })
+
+  it('normalizes namespace order and isolates cluster and namespace scopes', () => {
+    const config = getRightsizingScanCacheConfig(['staging', 'default'], 'cluster-a')
+
+    expect(config.namespaceKey).toBe('default,staging')
+    expect(config.queryKey).toEqual([
+      'prometheus-rightsizing-scan',
+      'cluster-a',
+      'default,staging',
+    ])
+    expect(getRightsizingScanCacheConfig(['default', 'staging'], 'cluster-a').queryKey).toEqual(
+      config.queryKey,
+    )
+    expect(getRightsizingScanCacheConfig(['default'], 'cluster-a').queryKey).not.toEqual(
+      config.queryKey,
+    )
+    expect(getRightsizingScanCacheConfig(['staging', 'default'], 'cluster-b').queryKey).not.toEqual(
+      config.queryKey,
+    )
+  })
+})