@skyhook-io/radar-app 1.1.1 → 1.2.0

package/src/api/rbac.ts

@@ -0,0 +1,57 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  RBACSubjectResponse,
+  RBACRoleResponse,
+  RBACWhoamiResponse,
+  RBACNamespaceResponse,
+} from '@skyhook-io/k8s-ui'
+import { fetchJSON } from './client'
+
+// /api/rbac/subject/{kind}/{namespace}/{name}   (ServiceAccount)
+// /api/rbac/subject/{kind}/{name}               (User/Group — no namespace)
+export function useRBACSubject(kind: 'ServiceAccount' | 'User' | 'Group', namespace: string, name: string, enabled = true) {
+  // Subject lookups depend on cluster-wide RBAC. They don't change often,
+  // and operators bouncing between Pod/SA pages re-hit the same SA. Use a
+  // 15s stale window so cross-page navigation is instant.
+  const path =
+    kind === 'ServiceAccount'
+      ? `/rbac/subject/${kind}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`
+      : `/rbac/subject/${kind}/${encodeURIComponent(name)}`
+  return useQuery<RBACSubjectResponse>({
+    queryKey: ['rbac', 'subject', kind, namespace, name],
+    queryFn: () => fetchJSON<RBACSubjectResponse>(path),
+    enabled: enabled && !!name && (kind !== 'ServiceAccount' || !!namespace),
+    staleTime: 15000,
+  })
+}
+
+// /api/rbac/role/{kind}/{namespace}/{name}  (use "_" for ClusterRole's empty namespace)
+export function useRBACRole(kind: 'Role' | 'ClusterRole', namespace: string, name: string, enabled = true) {
+  const nsSegment = kind === 'ClusterRole' ? '_' : encodeURIComponent(namespace)
+  return useQuery<RBACRoleResponse>({
+    queryKey: ['rbac', 'role', kind, namespace, name],
+    queryFn: () => fetchJSON<RBACRoleResponse>(`/rbac/role/${kind}/${nsSegment}/${encodeURIComponent(name)}`),
+    enabled: enabled && !!name && (kind !== 'Role' || !!namespace),
+    staleTime: 15000,
+  })
+}
+
+// /api/rbac/namespace/{namespace}
+export function useRBACNamespace(namespace: string, enabled = true) {
+  return useQuery<RBACNamespaceResponse>({
+    queryKey: ['rbac', 'namespace', namespace],
+    queryFn: () => fetchJSON<RBACNamespaceResponse>(`/rbac/namespace/${encodeURIComponent(namespace)}`),
+    enabled: enabled && !!namespace,
+    staleTime: 15000,
+  })
+}
+
+// /api/rbac/whoami?namespace=<ns>
+export function useRBACWhoami(namespace: string, enabled = true) {
+  return useQuery<RBACWhoamiResponse>({
+    queryKey: ['rbac', 'whoami', namespace],
+    queryFn: () => fetchJSON<RBACWhoamiResponse>(`/rbac/whoami?namespace=${encodeURIComponent(namespace)}`),
+    enabled: enabled && !!namespace,
+    staleTime: 30000,
+  })
+}

package/src/components/compare/CompareViewRoute.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import {
+  ResourceCompareView,
+  CompareResourcePicker,
+  parseRef,
+  refToParam,
+  type CompareResourceRef,
+  type CompareSide,
+  type CompareSideError,
+} from '@skyhook-io/k8s-ui'
+import { useResource } from '../../api/client'
+import { useTheme } from '../../context/ThemeContext'
+import { useCompareCandidates } from './useCompareCandidates'
+
+export function CompareViewRoute() {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { theme } = useTheme()
+
+  const kind = (searchParams.get('kind') ?? '').toLowerCase()
+  // Matches Radar's repo-wide URL convention. The bare `group` param is
+  // reserved for topology grouping mode and gets stripped by App.tsx's URL
+  // sync on every non-topology view.
+  const group = searchParams.get('apiGroup') ?? undefined
+  const aParsed = parseRef(searchParams.get('a'))
+  const bParsed = parseRef(searchParams.get('b'))
+
+  const [pickerOpen, setPickerOpen] = useState<CompareSide | null>(null)
+
+  const a: CompareResourceRef | null = aParsed ? { kind, namespace: aParsed.namespace, name: aParsed.name, group } : null
+  const b: CompareResourceRef | null = bParsed ? { kind, namespace: bParsed.namespace, name: bParsed.name, group } : null
+
+  const aQuery = useResource<unknown>(a?.kind ?? '', a?.namespace ?? '', a?.name ?? '', a?.group)
+  const bQuery = useResource<unknown>(b?.kind ?? '', b?.namespace ?? '', b?.name ?? '', b?.group)
+
+  const { candidates, isPending: candidatesPending, error: candidatesError } = useCompareCandidates(kind, group, !!pickerOpen)
+
+  const updateParam = useCallback(
+    (next: Record<string, string>) => {
+      const params = new URLSearchParams(searchParams)
+      for (const [k, v] of Object.entries(next)) params.set(k, v)
+      setSearchParams(params, { replace: true })
+    },
+    [searchParams, setSearchParams],
+  )
+
+  const handleSwap = useCallback(() => {
+    if (!a || !b) return
+    updateParam({ a: refToParam(b), b: refToParam(a) })
+  }, [a, b, updateParam])
+
+  const handleClose = useCallback(() => {
+    navigate(-1)
+  }, [navigate])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      if (!pickerOpen) return
+      updateParam({ [pickerOpen]: refToParam({ namespace: picked.namespace, name: picked.name }) })
+      setPickerOpen(null)
+    },
+    [pickerOpen, updateParam],
+  )
+
+  if (!kind || !a || !b) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-theme-text-secondary gap-3 p-8">
+        <p className="text-sm">This compare link is missing required parameters.</p>
+        <button
+          onClick={() => navigate('/resources')}
+          className="px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
+        >
+          Back to resources
+        </button>
+      </div>
+    )
+  }
+
+  // A refetch failure with cached data is not worth shouting about — show the
+  // stale data instead of blanking the side with a misleading "failed" banner.
+  const errors: CompareSideError[] = []
+  if (aQuery.error && !aQuery.data) errors.push({ side: 'a', message: aQuery.error instanceof Error ? aQuery.error.message : String(aQuery.error) })
+  if (bQuery.error && !bQuery.data) errors.push({ side: 'b', message: bQuery.error instanceof Error ? bQuery.error.message : String(bQuery.error) })
+
+  const source = pickerOpen === 'a' ? a : pickerOpen === 'b' ? b : null
+
+  return (
+    <>
+      <ResourceCompareView
+        a={a}
+        b={b}
+        aData={aQuery.data}
+        bData={bQuery.data}
+        errors={errors}
+        editorTheme={theme === 'dark' ? 'vs-dark' : 'vs'}
+        onSwap={handleSwap}
+        onClose={handleClose}
+        onChangeA={() => setPickerOpen('a')}
+        onChangeB={() => setPickerOpen('b')}
+      />
+      {source && pickerOpen && (
+        <CompareResourcePicker
+          open={true}
+          onClose={() => setPickerOpen(null)}
+          source={source}
+          sourceSide={pickerOpen}
+          candidates={candidates}
+          loading={candidatesPending}
+          error={candidatesError}
+          onPick={handlePick}
+        />
+      )}
+    </>
+  )
+}

package/src/components/compare/useCompareCandidates.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../api/client'
+
+/**
+ * Fetch candidates for the compare picker — same kind as the source.
+ * Pass `enabled=false` when the picker is closed to avoid hitting the API.
+ */
+export function useCompareCandidates(kind: string, group: string | undefined, enabled: boolean) {
+  const query = useResources<{ metadata?: { name?: string; namespace?: string } }>(
+    enabled ? kind : '',
+    undefined,
+    group,
+  )
+  const candidates: CompareResourceRef[] = useMemo(() => {
+    if (!query.data) return []
+    return query.data
+      .filter(r => r?.metadata?.name)
+      .map(r => ({
+        kind,
+        namespace: r.metadata?.namespace ?? '',
+        name: r.metadata!.name!,
+        group,
+      }))
+  }, [query.data, kind, group])
+  return { candidates, isPending: query.isPending, error: query.error }
+}

package/src/components/compare/useCompareLauncher.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { CompareResourcePicker, refToParam, type CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useCompareCandidates } from './useCompareCandidates'
+import { useNavCustomization } from '../../context/NavCustomization'
+
+interface UseCompareLauncherArgs {
+  /** API plural kind (e.g. "deployments") — must match the route segment used by `/api/resources/{kind}`. */
+  kind: string
+  namespace: string
+  name: string
+  /** API group for the resource — required for CRDs that collide with core kinds. */
+  group?: string
+}
+
+interface CompareLauncher {
+  /** Wire this to ResourceActionsBar's `onCompareTo` prop. */
+  onCompareTo: () => void
+  /**
+   * Wire this to ResourceActionsBar's `onCompareAcrossClusters` prop. Undefined
+   * when the host (NavCustomization.crossClusterCompareHref) hasn't opted in
+   * — keeps the standalone Radar experience identical.
+   */
+  onCompareAcrossClusters?: () => void
+  /** Render this anywhere in the same tree to surface the picker dialog. */
+  picker: React.ReactNode
+}
+
+export function useCompareLauncher({ kind, namespace, name, group }: UseCompareLauncherArgs): CompareLauncher {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+  const kindLower = kind.toLowerCase()
+  const { candidates, isPending, error } = useCompareCandidates(kindLower, group, open)
+  const { crossClusterCompareHref } = useNavCustomization()
+
+  const onCompareTo = useCallback(() => setOpen(true), [])
+
+  const onCompareAcrossClusters = useCallback(() => {
+    if (!crossClusterCompareHref) return
+    const href = crossClusterCompareHref({ kind: kindLower, namespace, name, group })
+    window.location.assign(href)
+  }, [crossClusterCompareHref, kindLower, namespace, name, group])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      setOpen(false)
+      const params = new URLSearchParams()
+      params.set('kind', kindLower)
+      if (group) params.set('apiGroup', group)
+      params.set('a', refToParam({ namespace, name }))
+      params.set('b', refToParam({ namespace: picked.namespace, name: picked.name }))
+      navigate({ pathname: '/compare', search: params.toString() })
+    },
+    [navigate, kindLower, group, namespace, name],
+  )
+
+  const source: CompareResourceRef = { kind: kindLower, namespace, name, group }
+
+  const picker = (
+    <CompareResourcePicker
+      open={open}
+      onClose={() => setOpen(false)}
+      source={source}
+      candidates={candidates}
+      loading={open && isPending}
+      error={open ? error : null}
+      onPick={handlePick}
+    />
+  )
+
+  return {
+    onCompareTo,
+    onCompareAcrossClusters: crossClusterCompareHref ? onCompareAcrossClusters : undefined,
+    picker,
+  }
+}

package/src/components/cost/CostView.tsx

@@ -417,7 +417,7 @@ function CostHelpDialog({ onClose }: { onClose: () => void }) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative dialog max-w-lg w-full mx-4 max-h-[80vh] overflow-y-auto">
+      <div className="relative dialog max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-theme-border sticky top-0 bg-theme-surface rounded-t-lg">
           <div className="flex items-center gap-2">

package/src/components/dock/TerminalTab.tsx

@@ -19,7 +19,7 @@ export function TerminalTab({ namespace, podName, containerName, containers, isA
     const response = await fetch(apiUrl(`/pods/${namespace}/${podName}/debug`), {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ targetContainer, image: 'busybox:latest' }),
+      body: JSON.stringify({ targetContainer }),
     })
     if (!response.ok) {
       const err = await response.json().catch(() => ({ error: 'Unknown error' }))

package/src/components/gitops/GitOpsView.tsx

@@ -685,7 +685,7 @@ function extractHelmValues(kind: string, resource: any): HelmValuesData | null {
 
 function safeStringifyYaml(value: unknown): string {
   try {
-    return yaml.stringify(value)
+    return yaml.stringify(value, { lineWidth: 0 })
   } catch {
     return JSON.stringify(value, null, 2)
   }

package/src/components/helm/InstallWizard.tsx

@@ -106,11 +106,11 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
       }
     }
     if (baseValues && defaultValues) {
-      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues)))
+      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues), { lineWidth: 0 }))
     } else if (defaultValues && !baseValues) {
-      setValuesYaml(yaml.stringify(defaultValues))
+      setValuesYaml(yaml.stringify(defaultValues, { lineWidth: 0 }))
     } else if (baseValues) {
-      setValuesYaml(yaml.stringify(baseValues))
+      setValuesYaml(yaml.stringify(baseValues, { lineWidth: 0 }))
     }
   }, [localChartDetail?.values, artifactHubDetail?.values, isLocal, defaultValues])
 
@@ -349,7 +349,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   valuesYaml={valuesYaml}
                   defaultValuesYaml={
                     isLocal
-                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values) : '')
+                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values, { lineWidth: 0 }) : '')
                       : (artifactHubDetail?.values || '')
                   }
                 />
@@ -664,7 +664,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
   const ahDetail = chartDetail as ArtifactHubChartDetail | undefined
 
   const defaultValues = isLocal
-    ? (localDetail?.values ? yaml.stringify(localDetail.values) : '')
+    ? (localDetail?.values ? yaml.stringify(localDetail.values, { lineWidth: 0 }) : '')
     : (ahDetail?.values || '')
 
   const hasDefaults = Boolean(defaultValues)

package/src/components/helm/ValuesViewer.tsx

@@ -320,43 +320,7 @@ function ToggleButton({ showAll, onToggle, disabled }: { showAll: boolean; onTog
   )
 }
 
-// Simple JSON to YAML converter for display
-function jsonToYaml(obj: Record<string, unknown>, indent = 0): string {
-  const spaces = '  '.repeat(indent)
-  let result = ''
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === undefined) {
-      result += `${spaces}${key}: null\n`
-    } else if (typeof value === 'object' && !Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      result += jsonToYaml(value as Record<string, unknown>, indent + 1)
-    } else if (Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      for (const item of value) {
-        if (typeof item === 'object' && item !== null) {
-          result += `${spaces}- \n`
-          const itemYaml = jsonToYaml(item as Record<string, unknown>, indent + 2)
-          result += itemYaml
-        } else {
-          result += `${spaces}- ${formatValue(item)}\n`
-        }
-      }
-    } else {
-      result += `${spaces}${key}: ${formatValue(value)}\n`
-    }
-  }
-
-  return result
-}
-
-function formatValue(value: unknown): string {
-  if (typeof value === 'string') {
-    // Quote strings that contain special characters
-    if (value.includes(':') || value.includes('#') || value.includes('\n') || value.startsWith(' ') || value.endsWith(' ')) {
-      return `"${value.replace(/"/g, '\\"')}"`
-    }
-    return value
-  }
-  return String(value)
+function jsonToYaml(obj: Record<string, unknown>): string {
+  if (!obj || Object.keys(obj).length === 0) return ''
+  return yaml.stringify(obj, { lineWidth: 0 })
 }

package/src/components/home/ClusterHealthCard.tsx

@@ -389,12 +389,14 @@ export function ClusterHealthCard({
                     <Cpu className="w-3.5 h-3.5 text-theme-text-tertiary" />
                     CPU
                   </div>
-                  <ResourceBar
-                    label="Used"
-                    used={formatCPUMillicores(metrics.cpu.usageMillis)}
-                    total={formatCPUMillicores(metrics.cpu.capacityMillis)}
-                    percent={metrics.cpu.usagePercent}
-                  />
+                  {metricsServerAvailable && (
+                    <ResourceBar
+                      label="Used"
+                      used={formatCPUMillicores(metrics.cpu.usageMillis)}
+                      total={formatCPUMillicores(metrics.cpu.capacityMillis)}
+                      percent={metrics.cpu.usagePercent}
+                    />
+                  )}
                   <ResourceBar
                     label="Requested"
                     used={formatCPUMillicores(metrics.cpu.requestsMillis)}
@@ -409,12 +411,14 @@ export function ClusterHealthCard({
                     <MemoryStick className="w-3.5 h-3.5 text-theme-text-tertiary" />
                     Memory
                   </div>
-                  <ResourceBar
-                    label="Used"
-                    used={formatMemoryMiB(metrics.memory.usageMillis)}
-                    total={formatMemoryMiB(metrics.memory.capacityMillis)}
-                    percent={metrics.memory.usagePercent}
-                  />
+                  {metricsServerAvailable && (
+                    <ResourceBar
+                      label="Used"
+                      used={formatMemoryMiB(metrics.memory.usageMillis)}
+                      total={formatMemoryMiB(metrics.memory.capacityMillis)}
+                      percent={metrics.memory.usagePercent}
+                    />
+                  )}
                   <ResourceBar
                     label="Requested"
                     used={formatMemoryMiB(metrics.memory.requestsMillis)}
@@ -423,7 +427,7 @@ export function ClusterHealthCard({
                   />
                 </div>
               )}
-              {!metrics?.cpu && !metrics?.memory && (
+              {!metricsServerAvailable && (
                 <MetricsUnavailableHint platform={cluster.platform} metricsServerAvailable={metricsServerAvailable} />
               )}
             </div>

package/src/components/home/HomeView.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
 import type { DashboardResponse } from '../../api/client'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
@@ -25,6 +26,21 @@ interface HomeViewProps {
 
 export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
   const { data, isLoading, error } = useDashboard(namespaces)
+
+  // SSE is cluster-wide on small/medium clusters; the picker only narrows the
+  // dashboard summary, so re-apply the filter here or the legend disagrees.
+  const scopedTopology = useMemo<Topology | null>(() => {
+    if (!topology) return null
+    if (namespaces.length === 0) return topology
+    const nsSet = new Set(namespaces)
+    const nodes = topology.nodes.filter(n => {
+      const ns = n.data.namespace as string | undefined
+      return !ns || nsSet.has(ns)
+    })
+    const nodeIds = new Set(nodes.map(n => n.id))
+    const edges = topology.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
+    return { nodes, edges }
+  }, [topology, namespaces])
   // CRDs and Helm load lazily after main dashboard to keep initial load fast
   const { data: crdsData } = useDashboardCRDs(namespaces)
   const { data: helmData } = useDashboardHelm(namespaces)
@@ -100,7 +116,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
             {/* Primary cards — 2-col grid */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <TopologyPreview
-                topology={topology}
+                topology={scopedTopology}
                 summary={data.topologySummary}
                 onNavigate={() => onNavigateToView('topology')}
               />
@@ -110,7 +126,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
               />
               <ActivitySummary
                 namespaces={namespaces}
-                topology={topology}
+                topology={scopedTopology}
                 onNavigate={() => onNavigateToView('timeline')}
               />
               <TrafficSummary

package/src/components/home/MCPSetupDialog.tsx

@@ -306,11 +306,13 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
                   { name: 'kind', required: true, desc: 'resource kind, e.g. pods, deployments, services' },
                   { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
                 ]},
-                { name: 'get_resource', desc: 'Get detailed information about a single Kubernetes resource. Returns minified spec, status, and metadata. Optionally include related context (events, relationships, metrics, logs) to avoid extra tool calls.', params: [
+                { name: 'get_resource', desc: 'Get a single Kubernetes resource: minified spec/status/metadata plus default-on resourceContext (managedBy, exposes, selectedBy, uses, runsOn, issue/audit rollups). Optionally include heavier sidecars (events, metrics, logs).', params: [
                   { name: 'kind', required: true, desc: 'resource kind, e.g. pod, deployment, service' },
-                  { name: 'namespace', required: true, desc: 'resource namespace' },
+                  { name: 'namespace', required: false, desc: 'omit for cluster-scoped kinds (Node, ClusterRole, IngressClass, etc.)' },
                   { name: 'name', required: true, desc: 'resource name' },
-                  { name: 'include', required: false, desc: 'events, relationships, metrics, logs' },
+                  { name: 'group', required: false, desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev for Knative Service vs core Service)' },
+                  { name: 'include', required: false, desc: 'events, metrics, logs' },
+                  { name: 'context', required: false, desc: 'resourceContext tier: basic (default) or none (bare minified)' },
                 ]},
                 { name: 'get_topology', desc: 'Get the topology graph showing relationships between Kubernetes resources. Returns nodes and edges representing Deployments, Services, Ingresses, Pods, etc. Use \'traffic\' view for network flow or \'resources\' view for ownership hierarchy. Use \'summary\' format for LLM-friendly text descriptions.', params: [
                   { name: 'namespace', required: false, desc: 'filter to a specific namespace' },