@skyhook-io/radar-app 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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",
@@ -75,6 +75,7 @@
     "vite": "^8.0.12"
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./src/monaco-setup.ts"
   ]
 }

package/src/App.tsx

@@ -56,7 +56,8 @@ 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, openExternal, apiVersionToGroup, buildWorkloadPath, searchHitToSelectedResource } from './utils/navigation'
-import { Omnibar, type OmnibarHandle } from './components/ui/Omnibar'
+import { type OmnibarHandle } from './components/ui/Omnibar'
+import { RadarOmnibar } from './components/ui/RadarOmnibar'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
 
 // All possible node kinds (core + GitOps)
@@ -541,6 +542,10 @@ function AppInner() {
       description: 'Show keyboard shortcuts',
       category: 'General' as const,
       scope: 'global' as const,
+      // Radar owns the shortcut registry even in a chromeless embed, so its `?`
+      // overlay is the one that actually lists the working shortcuts. The host
+      // (Radar Hub) drives it from its own chrome by dispatching a `?` keydown —
+      // it has no registry of its own to populate a competing overlay with.
       handler: () => setShowHelp(prev => !prev),
     },
     {
@@ -550,8 +555,10 @@ function AppInner() {
       category: 'General' as const,
       scope: 'global' as const,
       allowInInputs: true,
-      // Standalone focuses the top-center omnibar; embedded opens the modal.
-      handler: () => { if (showNavRail) omnibarRef.current?.focus(); else setShowCommandPalette(true) },
+      // Standalone focuses the top-center omnibar; embedded opens the modal. In
+      // a chromeless embed the HOST owns ⌘K (its own omnibar), so do nothing —
+      // otherwise both the host omnibar and Radar's palette fire on one ⌘K.
+      handler: () => { if (showNavRail) omnibarRef.current?.focus(); else if (!chromeless) setShowCommandPalette(true) },
     },
     {
       id: 'diagnostics',
@@ -1130,7 +1137,7 @@ function AppInner() {
     // Fleet mode overrides visible kinds to show only CAPI resources + Node
     const effectiveKinds = topologyMode === 'fleet' ? FLEET_MODE_KINDS : visibleKinds
 
-    // Filter by namespace (frontend-side) and by visible kinds
+    // Filter by namespace (client-side) and by visible kinds
     const nsSet = namespaces.length > 0 ? new Set(namespaces) : null
     const filteredNodes = displayedTopology.nodes.filter(node =>
       effectiveKinds.has(node.kind) &&
@@ -1352,7 +1359,7 @@ function AppInner() {
             Fills the space the pill bar left; embedded keeps the pills + modal. */}
         {showNavRail && (
           <div className="hidden sm:flex flex-1 justify-center min-w-0 px-3">
-            <Omnibar
+            <RadarOmnibar
               ref={omnibarRef}
               onNavigateView={(view) => setMainView(view)}
               onNavigateKind={(kind, group) => {
@@ -1603,21 +1610,7 @@ function AppInner() {
               console.debug('[filters] App.onNavigateToResourceKind: navigating to', targetURL)
               navigate({ pathname: `/resources/${kind}`, search: newParams.toString() })
             }}
-            onNavigateToResource={(resource) => {
-              // Switch to resources view and open the resource detail drawer
-              setSelectedResource(resource)
-              const newParams = new URLSearchParams(searchParams)
-              newParams.delete('kind') // kind is now in the path
-              newParams.delete('mode')
-              newParams.delete('group')
-              newParams.delete('resource')
-              if (resource.group) {
-                newParams.set('apiGroup', resource.group)
-              } else {
-                newParams.delete('apiGroup')
-              }
-              navigate({ pathname: `/resources/${resource.kind}`, search: newParams.toString() })
-            }}
+            onNavigateToResource={navigateFromIssue}
           />
         )}
 
@@ -1851,6 +1844,9 @@ function AppInner() {
         <ResourceDetailDrawer
           resource={drawerResource}
           initialTab={drawerInitialTab}
+          // 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}
           isOpen={resourceDrawer.isOpen}
           expanded={drawerExpanded}
           onClose={() => { setSelectedResource(null); setDrawerInitialTab('detail'); setDrawerExpanded(false) }}
@@ -1964,8 +1960,9 @@ function AppInner() {
       />
       <MyPermissionsDialog open={showMyPermissions} onClose={() => setShowMyPermissions(false)} />
 
-      {/* Debug overlay - only in dev mode */}
-      {import.meta.env.DEV && <DebugOverlay />}
+      {/* Debug overlay — dev mode, standalone only. Embedded hosts (Radar Hub)
+          own their own dev tooling; ours would collide with theirs bottom-right. */}
+      {import.meta.env.DEV && showNavRail && <DebugOverlay />}
       </div>
     </div>
     </PortForwardProvider>

package/src/api/client.ts

@@ -122,7 +122,7 @@ export interface DashboardProblem {
   namespace: string
   name: string
   group?: string
-  severity: 'critical' | 'high' | 'medium'
+  severity: 'critical' | 'high' | 'medium' | 'warning' | 'info'
   reason: string
   message: string
   age: string
@@ -341,8 +341,9 @@ export function useAudit(namespaces: string[] = []) {
 
 // Live cluster Issues — the grouped triage queue (radar's /api/issues =
 // internal/issues.Compose+Classify+Group). Single-cluster here; the Hub fleet
-// view fans the same shape across clusters. keepPreviousData semantics via
-// placeholderData so the queue doesn't flash empty on the 30s refresh.
+// view fans the same shape across clusters. Do not carry old data across query
+// keys: issues are scope-sensitive, so namespace changes must not show the
+// previous scope's rows while the new scope fetches.
 // total = rows returned (after the cap); total_matched = rows that matched
 // before the cap. total_matched > total means the queue was truncated — surface
 // that honestly rather than presenting a capped list as if it were complete.
@@ -365,7 +366,6 @@ export function useIssues(namespaces: string[] = []) {
     queryFn: () => fetchJSON(`/issues${params}`),
     staleTime: 30000,
     refetchInterval: 30000,
-    placeholderData: (prev) => prev,
   })
 }
 
@@ -717,6 +717,11 @@ export interface SearchHit {
   name: string
   matched?: SearchMatchedField[]
   summaryContext?: SearchSummaryContext
+  /** Embedder (Radar Hub) only: the cluster this hit belongs to, for
+   *  cross-cluster fleet search. Standalone Radar (single-cluster) leaves these
+   *  unset — the omnibar keys + displays the cluster only when present. */
+  cluster?: string
+  clusterName?: string
 }
 
 export interface SearchResult {
@@ -817,7 +822,7 @@ export function useAuthMe() {
 }
 
 // Tier ordering for Cloud-role gates. Mirrors radar OSS pkg/auth
-// CloudRole.AtLeast — the SPA must agree with the backend on what
+// CloudRole.AtLeast — the frontend must agree with the backend on what
 // "member-or-higher" means; otherwise we'd hide a button the
 // backend would happily honor (or vice versa).
 const CLOUD_ROLE_RANK: Record<string, number> = { viewer: 1, member: 2, owner: 3 }
@@ -1036,6 +1041,7 @@ export interface UseChangesOptions {
   filter?: string // Filter preset name ('default', 'all', 'warnings-only', 'workloads')
   includeK8sEvents?: boolean
   includeManaged?: boolean
+  includeDeleted?: boolean
   limit?: number
   enabled?: boolean
 }
@@ -1060,7 +1066,7 @@ function getTimeRangeDate(range: TimeRange): Date | null {
 }
 
 export function useChanges(options: UseChangesOptions = {}) {
-  const { namespaces = [], kind, timeRange = '1h', filter = 'all', includeK8sEvents = true, includeManaged = false, limit = 200, enabled = true } = options
+  const { namespaces = [], kind, timeRange = '1h', filter = 'all', includeK8sEvents = true, includeManaged = false, includeDeleted = true, limit = 200, enabled = true } = options
 
   const params = new URLSearchParams()
   if (namespaces.length > 0) params.set('namespaces', namespaces.join(','))
@@ -1068,6 +1074,7 @@ export function useChanges(options: UseChangesOptions = {}) {
   if (filter) params.set('filter', filter)
   if (!includeK8sEvents) params.set('include_k8s_events', 'false')
   if (includeManaged) params.set('include_managed', 'true')
+  if (!includeDeleted) params.set('include_deleted', 'false')
   params.set('limit', String(limit))
 
   const sinceDate = getTimeRangeDate(timeRange)
@@ -1078,7 +1085,7 @@ export function useChanges(options: UseChangesOptions = {}) {
   const queryString = params.toString()
 
   return useQuery<TimelineEvent[]>({
-    queryKey: ['changes', namespaces, kind, timeRange, filter, includeK8sEvents, includeManaged, limit],
+    queryKey: ['changes', namespaces, kind, timeRange, filter, includeK8sEvents, includeManaged, includeDeleted, limit],
     queryFn: () => fetchJSON(`/changes${queryString ? `?${queryString}` : ''}`),
     staleTime: 5000, // Consider data stale after 5 seconds to ensure fresh data on navigation
     refetchInterval: 60000, // SSE handles real-time updates; this is a fallback
@@ -1129,6 +1136,7 @@ export function useResourceEvents(kind: string, namespace: string, name: string)
     const p = new URLSearchParams()
     p.set('namespace', namespace)
     p.set('kind', singularKind)
+    p.set('name', name)
     p.set('include_managed', 'true')
     p.set('since', since)
     return p
@@ -1145,8 +1153,7 @@ export function useResourceEvents(kind: string, namespace: string, name: string)
       const params = baseParams()
       params.set('sources', 'k8s_event')
       params.set('limit', '500')
-      const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
-      return events.filter(e => e.name === name)
+      return fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
     },
     enabled,
     refetchInterval: 15000,
@@ -1160,8 +1167,7 @@ export function useResourceEvents(kind: string, namespace: string, name: string)
       const params = baseParams()
       params.set('sources', 'informer,historical')
       params.set('limit', '50')
-      const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
-      return events.filter(e => e.name === name)
+      return fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
     },
     enabled,
     refetchInterval: 15000,
@@ -1305,21 +1311,28 @@ export interface TopNodeMetrics {
   memoryAllocatable: number // bytes
 }
 
-// Fetch bulk metrics for all pods (for CPU/Memory columns in resource table)
-export function useTopPodMetrics() {
+// Fetch bulk metrics for pods (for CPU/Memory columns in resource table)
+export function useTopPodMetrics(options?: { enabled?: boolean; namespaces?: string[] }) {
+  const namespacesParam = options?.namespaces?.join(',') ?? ''
+  const params = new URLSearchParams()
+  if (namespacesParam) params.set('namespaces', namespacesParam)
+  const queryString = params.toString()
+
   return useQuery<TopPodMetrics[]>({
-    queryKey: ['top-pod-metrics'],
-    queryFn: () => fetchJSON('/metrics/top/pods'),
+    queryKey: ['top-pod-metrics', namespacesParam],
+    queryFn: () => fetchJSON(`/metrics/top/pods${queryString ? `?${queryString}` : ''}`),
+    enabled: options?.enabled ?? true,
     staleTime: 25000,
     refetchInterval: 30000,
   })
 }
 
 // Fetch bulk metrics for all nodes (for CPU/Memory columns in resource table)
-export function useTopNodeMetrics() {
+export function useTopNodeMetrics(options?: { enabled?: boolean }) {
   return useQuery<TopNodeMetrics[]>({
     queryKey: ['top-node-metrics'],
     queryFn: () => fetchJSON('/metrics/top/nodes'),
+    enabled: options?.enabled ?? true,
     staleTime: 25000,
     refetchInterval: 30000,
   })

package/src/components/gitops/GitOpsView.tsx

@@ -83,6 +83,7 @@ const KIND_BY_NAME = new Map(GITOPS_KINDS.map((k) => [k.name, k]))
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
+  unavailable?: string[]
 }
 
 interface GitOpsViewProps {
@@ -136,9 +137,15 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     initNavigationMap([...(apiResources ?? []), ...GITOPS_KINDS])
   }, [apiResources])
 
-  // Counts come from radar's /api/resource-counts, kind-filtered to the
-  // GitOps set. The extracted GitOpsTableView reads them for the
-  // Scope-section mode tabs + the empty-state check.
+  const hasGitOpsRowResource = useMemo(() => (
+    hasAPIResource(apiResources, 'applications', 'argoproj.io') ||
+    hasAPIResource(apiResources, 'kustomizations', 'kustomize.toolkit.fluxcd.io') ||
+    hasAPIResource(apiResources, 'helmreleases', 'helm.toolkit.fluxcd.io')
+  ), [apiResources])
+
+  // Counts come from radar's /api/resource-counts. The extracted
+  // GitOpsTableView reads only the GitOps keys for mode tabs + empty-state
+  // checks.
   const countsQuery = useQuery({
     queryKey: ['gitops-resource-counts', namespacesParam],
     queryFn: async () => {
@@ -217,6 +224,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   const [coldRetrying, setColdRetrying] = useState(false)
   useEffect(() => { coldRetriesRef.current = 0; setColdRetrying(false) }, [apiResources, namespacesParam])
   useEffect(() => {
+    if (!hasGitOpsRowResource || rowsQuery.error) { setColdRetrying(false); return }
     if (apiResourcesLoading || rowsQuery.isFetching) return
     if ((rowsQuery.data?.length ?? 0) > 0) { setColdRetrying(false); return }
     if (coldRetriesRef.current >= 4) { setColdRetrying(false); return }
@@ -224,7 +232,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     const t = window.setTimeout(() => { coldRetriesRef.current += 1; refetchTable() }, 2000)
     return () => window.clearTimeout(t)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowsQuery.data, rowsQuery.isFetching, apiResourcesLoading])
+  }, [rowsQuery.data, rowsQuery.isFetching, rowsQuery.error, apiResourcesLoading, hasGitOpsRowResource])
 
   const handleRowAction = (row: GitOpsRow, action: GitOpsRowAction) => {
     const { kindName: kind, namespace, name, id } = row
@@ -271,6 +279,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
         loading={apiResourcesLoading || countsQuery.isLoading || rowsQuery.isLoading || coldRetrying}
         error={(rowsQuery.error as Error | null) ?? null}
         counts={countsQuery.data?.counts ?? {}}
+        countsUnavailable={countsQuery.data?.unavailable}
         onRefresh={() => rowsQuery.refetch()}
         onRowClick={(row) => {
           const ns = row.namespace || '_'
@@ -958,5 +967,3 @@ function TopologyCounts({ tree }: { tree: GitOpsResourceTree }) {
     </div>
   )
 }
-
-

package/src/components/helm/ChartBrowser.tsx

@@ -27,7 +27,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
 
   // Repo refresh is gated only by `requireHelmWrite` on the backend
   // (handleUpdateRepository deliberately skips requireCloudRole — it
-  // mutates pod-local chart cache, not cluster state). So the SPA gate
+  // mutates pod-local chart cache, not cluster state). So the frontend gate
   // here must NOT include the Cloud role check, or Cloud viewers with
   // rbac.helm=true would be blocked from a refresh the backend allows.
   const canHelmWrite = useCanHelmWrite()

package/src/components/helm/RoleGatedPanel.tsx

@@ -22,7 +22,7 @@ interface RoleGatedPanelProps {
  *
  * Bypasses for non-Cloud users (OSS, OIDC, etc.) — `canAtLeast` returns
  * true when no Cloud role is present. The backend gate has the same
- * shape, so the SPA stays in lockstep.
+ * shape, so the frontend stays in lockstep.
  */
 export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps) {
   const { role, canAtLeast } = useCloudRole()

package/src/components/home/ClusterHealthCard.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { DashboardResponse, DashboardMetrics, DashboardCRDCount, DashboardProblem } from '../../api/client'
+import type { DashboardResponse, DashboardMetrics, DashboardCRDCount } from '../../api/client'
 import { HealthRing } from './HealthRing'
 import {
   AlertTriangle, CheckCircle, XCircle,
@@ -23,12 +23,13 @@ interface ClusterHealthCardProps {
   metrics: DashboardMetrics | null
   metricsServerAvailable: boolean
   topCRDs?: DashboardCRDCount[] // Loaded lazily, may be undefined
-  problems: DashboardProblem[]
+  issueCount: number
+  hasCriticalIssues: boolean
   nodeVersionSkew: DashboardResponse['nodeVersionSkew']
   onNavigateToKind: (kind: string, group?: string) => void
   onNavigateToView: () => void
   onWarningEventsClick?: () => void
-  onUnhealthyClick?: () => void
+  onIssuesClick?: () => void
 }
 
 function getMetricsInstallHint(platform: string): string {
@@ -113,12 +114,13 @@ export function ClusterHealthCard({
   metrics,
   metricsServerAvailable,
   topCRDs: _topCRDs,
-  problems,
+  issueCount,
+  hasCriticalIssues,
   nodeVersionSkew,
   onNavigateToKind,
   onNavigateToView,
   onWarningEventsClick,
-  onUnhealthyClick,
+  onIssuesClick,
 }: ClusterHealthCardProps) {
   void _topCRDs // Reserved for future CRD display
 
@@ -450,14 +452,14 @@ export function ClusterHealthCard({
               <span><span className="font-mono">{health.warningEvents}</span> Warning Events</span>
             </button>
           )}
-          {problems.length > 0 && (
+          {issueCount > 0 && (
             <button
-              onClick={onUnhealthyClick}
-              title="View timeline of unhealthy/degraded workload events"
-              className="badge status-unhealthy w-fit gap-1.5 hover:opacity-80 transition-opacity"
+              onClick={onIssuesClick}
+              title="View grouped live operational issues"
+              className={clsx('badge w-fit gap-1.5 hover:opacity-80 transition-opacity', hasCriticalIssues ? 'status-unhealthy' : 'status-degraded')}
             >
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
-              <span>View unhealthy workload events</span>
+              <span>{pluralize(issueCount, 'Active Issue')}</span>
             </button>
           )}
         </div>