@skyhook-io/radar-app 1.8.7 → 1.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "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,9 +9,9 @@ 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 { useAPIResources, findAPIResourceForRoute } from './api/apiResources'
 import { TimelineView } from './components/timeline/TimelineView'
 import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
@@ -61,8 +61,7 @@ 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 type { APIResource, 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'
 import { RadarOmnibar } from './components/ui/RadarOmnibar'
@@ -151,9 +150,13 @@ function getViewFromPath(pathname: string): ExtendedMainView {
 function namespaceFilterDisabled(
   view: ExtendedMainView,
   pathname: string,
-  apiResources?: { name: string; kind: string; namespaced: boolean }[],
+  search = '',
+  apiResources?: APIResource[],
 ): { 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.',
@@ -168,7 +171,8 @@ function namespaceFilterDisabled(
   }
   if (view === 'resources') {
     const kindSlug = segments[1]
-    const match = kindSlug ? apiResources?.find(r => r.name === kindSlug) : undefined
+    const group = new URLSearchParams(search).get('apiGroup') || ''
+    const match = kindSlug ? findAPIResourceForRoute(apiResources, kindSlug, group) : undefined
     if (match && !match.namespaced) {
       return {
         disabled: true,
@@ -183,7 +187,7 @@ function namespaceFilterDisabled(
 // correct regardless of which component renders it. A detail drawer that opens
 // over a list (?resource=…) is deliberately NOT titled — it's the same page, so
 // it keeps the list's title.
-function radarPageTitle(pathname: string, search = '', apiResources?: { name: string; kind: string; group?: string }[]): string | null {
+function radarPageTitle(pathname: string, search = '', apiResources?: APIResource[]): string | null {
   const decode = (s: string) => {
     try {
       return decodeURIComponent(s)
@@ -194,7 +198,7 @@ function radarPageTitle(pathname: string, search = '', apiResources?: { name: st
   const capitalize = (text: string) =>
     text ? text.charAt(0).toUpperCase() + text.slice(1) : text
   const pluralKindTitle = (kind: string, resourceName: string) =>
-    kind.toLowerCase() === resourceName.toLowerCase() ? kind : englishPlural(kind)
+    kind.toLowerCase() === resourceName.toLowerCase() || /Metrics$/.test(kind) ? kind : englishPlural(kind)
   const pathSegments = pathname.replace(/^\//, '').split('/').filter(Boolean)
   const view = getViewFromPath(pathname)
 
@@ -205,7 +209,8 @@ function radarPageTitle(pathname: string, search = '', apiResources?: { name: st
   if (view === 'resources') {
     const resourceName = decode(pathSegments[1] ?? '')
     if (!resourceName) return 'Resources'
-    const match = apiResources?.find((r) => r.name === resourceName)
+    const group = new URLSearchParams(search).get('apiGroup') || ''
+    const match = findAPIResourceForRoute(apiResources, resourceName, group)
     return pluralKindTitle(match?.kind ?? pluralToKind(resourceName), resourceName)
   }
   // GitOps detail is /gitops/detail/<kind>/<ns>/<name> → the resource name;
@@ -385,10 +390,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
   // View-aware namespace scope: disabled on cluster-scoped surfaces so the
   // chip isn't a dead control next to the cluster switcher.
-  // Fall back to the static core-resource list before discovery loads, so the
-  // chip disables immediately on a cluster-scoped core kind (Nodes, PVs, …)
-  // instead of flickering enabled until /api-resources resolves.
-  const namespaceFilter = namespaceFilterDisabled(mainView, location.pathname, navApiResources ?? CORE_RESOURCES)
+  const namespaceFilter = namespaceFilterDisabled(mainView, location.pathname, location.search, navApiResources)
 
   // One URL-derived tab title for every view (see radarPageTitle). Driving it
   // from the URL — not the mounted component. Off unless the host opts in
@@ -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/RadarApp.tsx

@@ -40,7 +40,10 @@ import type { ClusterLoadState } from "./types/clusterLoadState";
 import { TimelineSourceProvider } from "./context/TimelineSource";
 import type { TimelineSourceConfig } from "./api/timelineSource";
 import { DiagnoseCustomizationProvider } from "./context/DiagnoseCustomization";
-import type { RenderDiagnoseAction } from "./context/DiagnoseCustomization";
+import type {
+  RenderDiagnoseAction,
+  DiagnoseConsentCopy,
+} from "./context/DiagnoseCustomization";
 import { defaultDiagnoseAction } from "./components/diagnose/LocalDiagnoseAction";
 import { DiagnoseProvider } from "./components/diagnose/DiagnoseContext";
 
@@ -110,6 +113,15 @@ export interface RadarAppProps {
    * agent-free. See ./context/DiagnoseCustomization for the render-prop shape.
    */
   renderDiagnoseAction?: RenderDiagnoseAction;
+  /**
+   * Replaces the first-run consent card's trust copy. REQUIRED of any host whose
+   * backend runs the agent somewhere other than the user's own machine — the
+   * default copy states the agent runs locally, under the user's own model
+   * account, with transcripts kept on their disk, and none of that is true of a
+   * hosted runner. Radar keeps the card's chrome and the Approve/Cancel flow; a
+   * host only supplies the claims. See ./context/DiagnoseCustomization.
+   */
+  diagnoseConsent?: DiagnoseConsentCopy;
   /**
    * Initial route for `router: 'memory'` (ignored for 'browser'). Lets a host
    * deep-link a specific view (e.g. '/topology') without owning the URL bar —
@@ -184,6 +196,7 @@ export function RadarApp({
   manageDocumentTitle = false,
   documentTitleSuffix,
   renderDiagnoseAction,
+  diagnoseConsent,
   initialPath,
   onClusterLoadStateChange,
   timelineSource,
@@ -213,6 +226,7 @@ export function RadarApp({
               <TimelineSourceProvider config={timelineSource}>
                 <DiagnoseCustomizationProvider
                   value={renderDiagnoseAction ?? defaultDiagnoseAction}
+                  consentCopy={diagnoseConsent}
                 >
                   <DiagnoseProvider>
                     <App

package/src/api/apiResources.ts

@@ -3,7 +3,7 @@ import type { APIResource } from '../types'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from './config'
 
 // Re-export pure functions from package
-export { categorizeResources, CORE_RESOURCES, formatGroupName, shortenGroupName, getKindLabel, getKindPlural } from '@skyhook-io/k8s-ui'
+export { categorizeResources, CORE_RESOURCES, findAPIResourceForRoute, formatGroupName, shortenGroupName, getKindLabel, getKindPlural } from '@skyhook-io/k8s-ui'
 export type { ResourceCategory } from '@skyhook-io/k8s-ui'
 
 async function fetchJSON<T>(path: string): Promise<T> {

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,
+    )
+  })
+})