@skyhook-io/radar-app 1.1.1 → 1.2.0

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -4,7 +4,8 @@ import { clsx } from 'clsx'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { openExternal } from '../../utils/navigation'
 import { useDiagnostics } from '../../api/client'
-import type { DiagnosticsSnapshot, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry, DiagCacheSyncStatus, DiagInformerSyncStatus, DiagSyncPhase } from '../../api/client'
+import type { DiagnosticsSnapshot, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry, DiagCacheSyncStatus, DiagInformerSyncStatus, DiagSyncPhase, DiagSampleWindow } from '../../api/client'
+import { getK8sUIPerfSnapshot, type K8sUIPerfSnapshot } from '@skyhook-io/k8s-ui'
 
 interface DiagnosticsOverlayProps {
   onClose: () => void
@@ -31,9 +32,10 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
 
   const copyToClipboard = useCallback(async (type: 'json' | 'formatted') => {
     if (!data) return
+    const frontendPerf = getK8sUIPerfSnapshot()
     const text = type === 'json'
-      ? JSON.stringify(data, null, 2)
-      : formatForGitHub(data)
+      ? JSON.stringify({ ...data, frontendPerf }, null, 2)
+      : formatForGitHub(data, frontendPerf)
     try {
       await navigator.clipboard.writeText(text)
       setCopied(type)
@@ -46,7 +48,7 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
 
   const openBugReport = useCallback(() => {
     if (!data) return
-    const body = formatForBugReport(data)
+    const body = formatForBugReport(data, getK8sUIPerfSnapshot())
     const url = `https://github.com/skyhook-io/radar/issues/new?labels=bug&body=${encodeURIComponent(body)}`
     if (url.length > 8000) {
       // URL too long for GitHub — copy diagnostics to clipboard and open blank issue
@@ -116,6 +118,7 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
               <TrafficSection data={data} />
               <PermissionsSection data={data} />
               <APIDiscoverySection data={data} />
+              <PerfSection data={data} />
               <RuntimeSection data={data} />
               <ConfigSection data={data} />
               {data.errors && data.errors.length > 0 && (
@@ -459,6 +462,73 @@ function APIDiscoverySection({ data }: { data: DiagnosticsSnapshot }) {
   )
 }
 
+function PerfSection({ data }: { data: DiagnosticsSnapshot }) {
+  const backend = data.perf
+  const frontend = getK8sUIPerfSnapshot()
+  if (!backend && frontend.totalLayouts === 0 && frontend.totalStructureKeyComputes === 0) return null
+  // Warn when SSE has dropped frames, the topology payload window's p95 exceeds
+  // 5 MB, or the frontend ELK layout p95 exceeds 1s — these are the load-bearing
+  // thresholds for "the tab is going to feel bad."
+  const warn =
+    (backend?.sse.totalDrops ?? 0) > 0 ||
+    (backend?.topology.payloadBytes.p95 ?? 0) > 5 * 1024 * 1024 ||
+    frontend.layoutMs.p95 > 1000
+  return (
+    <Section title="Performance" warn={warn}>
+      {backend && (
+        <>
+          <Row label="Topology Builds" value={backend.topology.totalBuilds.toLocaleString()} />
+          <Row label="  Duration" value={formatSampleDuration(backend.topology.durationUs)} />
+          <Row label="  Node Count" value={formatSampleCount(backend.topology.nodeCount)} />
+          <Row label="  Edge Count" value={formatSampleCount(backend.topology.edgeCount)} />
+          <Row label="  Payload" value={formatSampleBytes(backend.topology.payloadBytes)} warn={backend.topology.payloadBytes.p95 > 5 * 1024 * 1024} />
+          <Row label="  Estimated Nodes" value={formatSampleCount(backend.topology.estimatedNodes)} />
+          <Row label="SSE Broadcasts" value={backend.sse.totalBroadcasts.toLocaleString()} />
+          <Row label="SSE Drops" value={backend.sse.totalDrops.toLocaleString()} warn={backend.sse.totalDrops > 0} />
+        </>
+      )}
+      {(frontend.totalLayouts > 0 || frontend.totalStructureKeyComputes > 0) && (
+        <>
+          <Row label="Frontend Layouts" value={`${frontend.totalLayouts.toLocaleString()} (skipped ${frontend.totalLayoutsSkipped.toLocaleString()})`} />
+          <Row label="  ELK Duration" value={formatFrontendMs(frontend.layoutMs)} warn={frontend.layoutMs.p95 > 1000} />
+          <Row label="  Last Rendered" value={`${frontend.lastLayoutNodeCount.toLocaleString()} nodes / ${frontend.lastLayoutEdgeCount.toLocaleString()} edges`} />
+          <Row label="Frontend structureKey" value={`${frontend.totalStructureKeyComputes.toLocaleString()} computes`} />
+          <Row label="  Duration" value={formatFrontendUs(frontend.structureKeyUs)} />
+        </>
+      )}
+    </Section>
+  )
+}
+
+function formatSampleDuration(w: DiagSampleWindow): string {
+  if (w.count === 0) return 'no samples'
+  const ms = (us: number) => (us / 1000).toFixed(us < 1000 ? 2 : 1)
+  return `last ${ms(w.last)}ms · p50 ${ms(w.p50)} · p95 ${ms(w.p95)} · max ${ms(w.max)}ms (n=${w.count})`
+}
+
+function formatSampleCount(w: DiagSampleWindow): string {
+  if (w.count === 0) return 'no samples'
+  return `last ${w.last.toLocaleString()} · p50 ${w.p50.toLocaleString()} · p95 ${w.p95.toLocaleString()} · max ${w.max.toLocaleString()}`
+}
+
+function formatSampleBytes(w: DiagSampleWindow): string {
+  if (w.count === 0) return 'no samples'
+  const kb = (b: number) => b < 1024 * 1024 ? `${(b / 1024).toFixed(1)}KB` : `${(b / 1024 / 1024).toFixed(2)}MB`
+  return `last ${kb(w.last)} · p50 ${kb(w.p50)} · p95 ${kb(w.p95)} · max ${kb(w.max)}`
+}
+
+function formatFrontendMs(w: { count: number; last: number; p50: number; p95: number; max: number }): string {
+  if (w.count === 0) return 'no samples'
+  const fmt = (v: number) => v < 100 ? v.toFixed(1) : Math.round(v).toString()
+  return `last ${fmt(w.last)}ms · p50 ${fmt(w.p50)} · p95 ${fmt(w.p95)} · max ${fmt(w.max)}ms (n=${w.count})`
+}
+
+function formatFrontendUs(w: { count: number; last: number; p50: number; p95: number; max: number }): string {
+  if (w.count === 0) return 'no samples'
+  const fmt = (v: number) => v < 1000 ? `${v.toFixed(0)}μs` : `${(v / 1000).toFixed(2)}ms`
+  return `last ${fmt(w.last)} · p50 ${fmt(w.p50)} · p95 ${fmt(w.p95)} · max ${fmt(w.max)} (n=${w.count})`
+}
+
 function RuntimeSection({ data }: { data: DiagnosticsSnapshot }) {
   if (!data.runtime) return null
   const rt = data.runtime
@@ -484,6 +554,7 @@ function ConfigSection({ data }: { data: DiagnosticsSnapshot }) {
       <Row label="History Limit" value={cfg.historyLimit.toLocaleString()} />
       <Row label="MCP Enabled" value={cfg.mcpEnabled ? 'Yes' : 'No'} />
       <Row label="Prometheus URL" value={cfg.hasPrometheusURL ? 'Set' : 'Auto-discover'} />
+      <Row label="Prometheus Headers" value={cfg.hasPrometheusHeaders ? 'Set' : 'None'} />
     </Section>
   )
 }
@@ -509,7 +580,7 @@ function CopyButton({ label, onClick, copied }: { label: string; onClick: () =>
 
 // --- GitHub-friendly formatting ---
 
-function formatForGitHub(data: DiagnosticsSnapshot, includeRawJson = true): string {
+function formatForGitHub(data: DiagnosticsSnapshot, frontendPerf?: K8sUIPerfSnapshot, includeRawJson = true): string {
   const lines: string[] = []
   lines.push(`## Radar Diagnostics`)
   lines.push(``)
@@ -599,9 +670,26 @@ function formatForGitHub(data: DiagnosticsSnapshot, includeRawJson = true): stri
       }
       const pending = getPendingInformers(sync)
       if (pending.length > 0) {
-        const parts = pending.map((i) => `${i.kind}(${i.deferred ? 'deferred' : 'critical'},${i.items.toLocaleString()} items)`)
+        const parts = pending.map((i) => {
+          const flags = [i.deferred ? 'deferred' : 'critical', `${i.items.toLocaleString()} items`]
+          if (i.forbiddenSeen) flags.push('forbidden')
+          if (i.lastError) flags.push(`err: ${i.lastError}`)
+          return `${i.kind}(${flags.join(', ')})`
+        })
         lines.push(`- **Pending:** ${parts.join(', ')}`)
       }
+      // Synced informers that have since hit a watch error or 403 — a count of 0
+      // from one of these is a stale/forbidden lister, not an empty cluster.
+      const errored = sync.informers.filter((i) => !pending.includes(i) && (i.lastError || i.forbiddenSeen))
+      if (errored.length > 0) {
+        const parts = errored.map((i) => {
+          const flags: string[] = []
+          if (i.forbiddenSeen) flags.push('forbidden')
+          if (i.lastError) flags.push(`err: ${i.lastError}`)
+          return `${i.kind}(${flags.join(', ')})`
+        })
+        lines.push(`- **Informer errors:** ${parts.join(', ')}`)
+      }
     }
     if (inf.watchedCRDs && inf.watchedCRDs.length > 0) {
       lines.push(`- CRDs: ${inf.watchedCRDs.join(', ')}`)
@@ -639,6 +727,37 @@ function formatForGitHub(data: DiagnosticsSnapshot, includeRawJson = true): stri
     lines.push(``)
   }
 
+  if (data.perf || (frontendPerf && (frontendPerf.totalLayouts > 0 || frontendPerf.totalStructureKeyComputes > 0))) {
+    lines.push(`### Performance`)
+    if (data.perf) {
+      const p = data.perf
+      const fmtMs = (us: number) => (us / 1000).toFixed(us < 1000 ? 2 : 1)
+      const fmtKB = (b: number) => b < 1024 * 1024 ? `${(b / 1024).toFixed(1)}KB` : `${(b / 1024 / 1024).toFixed(2)}MB`
+      lines.push(`- Topology Builds: ${p.topology.totalBuilds.toLocaleString()}`)
+      if (p.topology.durationUs.count > 0) {
+        lines.push(`  - Duration (ms): last ${fmtMs(p.topology.durationUs.last)} · p50 ${fmtMs(p.topology.durationUs.p50)} · p95 ${fmtMs(p.topology.durationUs.p95)} · max ${fmtMs(p.topology.durationUs.max)}`)
+        lines.push(`  - Nodes: last ${p.topology.nodeCount.last} · p95 ${p.topology.nodeCount.p95} · max ${p.topology.nodeCount.max}`)
+        lines.push(`  - Edges: last ${p.topology.edgeCount.last} · p95 ${p.topology.edgeCount.p95} · max ${p.topology.edgeCount.max}`)
+        lines.push(`  - Payload: last ${fmtKB(p.topology.payloadBytes.last)} · p95 ${fmtKB(p.topology.payloadBytes.p95)} · max ${fmtKB(p.topology.payloadBytes.max)}`)
+        lines.push(`  - Estimated Nodes: last ${p.topology.estimatedNodes.last} · p95 ${p.topology.estimatedNodes.p95}`)
+      }
+      lines.push(`- SSE: ${p.sse.totalBroadcasts.toLocaleString()} broadcasts, ${p.sse.totalDrops.toLocaleString()} drops`)
+    }
+    if (frontendPerf && (frontendPerf.totalLayouts > 0 || frontendPerf.totalStructureKeyComputes > 0)) {
+      const fmt = (v: number) => v < 100 ? v.toFixed(1) : Math.round(v).toString()
+      lines.push(`- Frontend Layouts: ${frontendPerf.totalLayouts.toLocaleString()} (${frontendPerf.totalLayoutsSkipped.toLocaleString()} skipped)`)
+      if (frontendPerf.layoutMs.count > 0) {
+        lines.push(`  - ELK (ms): last ${fmt(frontendPerf.layoutMs.last)} · p50 ${fmt(frontendPerf.layoutMs.p50)} · p95 ${fmt(frontendPerf.layoutMs.p95)} · max ${fmt(frontendPerf.layoutMs.max)}`)
+        lines.push(`  - Last rendered: ${frontendPerf.lastLayoutNodeCount.toLocaleString()} nodes / ${frontendPerf.lastLayoutEdgeCount.toLocaleString()} edges`)
+      }
+      if (frontendPerf.structureKeyUs.count > 0) {
+        const fmtUs = (v: number) => v < 1000 ? `${Math.round(v)}μs` : `${(v / 1000).toFixed(2)}ms`
+        lines.push(`  - structureKey: ${frontendPerf.totalStructureKeyComputes.toLocaleString()} computes · p50 ${fmtUs(frontendPerf.structureKeyUs.p50)} · p95 ${fmtUs(frontendPerf.structureKeyUs.p95)} · max ${fmtUs(frontendPerf.structureKeyUs.max)}`)
+      }
+    }
+    lines.push(``)
+  }
+
   if (data.runtime) {
     const rt = data.runtime
     lines.push(`### Runtime`)
@@ -682,8 +801,8 @@ function formatForGitHub(data: DiagnosticsSnapshot, includeRawJson = true): stri
   return lines.join('\n')
 }
 
-function formatForBugReport(data: DiagnosticsSnapshot): string {
-  const diagnostics = formatForGitHub(data, false)
+function formatForBugReport(data: DiagnosticsSnapshot, frontendPerf?: K8sUIPerfSnapshot): string {
+  const diagnostics = formatForGitHub(data, frontendPerf, false)
 
   const lines: string[] = []
   lines.push(`## Describe the bug`)

package/src/components/workload/WorkloadView.tsx

@@ -23,6 +23,9 @@ import {
   fetchJSON,
 } from '../../api/client'
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
+import { PrometheusChartsGrid } from '../resource/PrometheusChartsGrid'
+import { RestartEventLane } from '../resource/RestartChart'
+import { RightsizingStrip } from '../resource/RightsizingStrip'
 import { useResourceAudit, useResources } from '../../api/client'
 import { AuditAlerts } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
@@ -35,15 +38,30 @@ import { PodRenderer } from '../resources/renderers/PodRenderer'
 import { NodeRenderer } from '../resources/renderers/NodeRenderer'
 import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
 import { WorkloadRenderer } from '../resources/renderers/WorkloadRenderer'
+import { CompositeRenderer } from '../resources/CompositeRenderer'
+import { ServiceAccountRenderer } from '../resources/renderers/ServiceAccountRenderer'
+import { RoleRenderer } from '../resources/renderers/RoleRenderer'
+import { RoleBindingRenderer } from '../resources/renderers/RoleBindingRenderer'
+import { NamespaceRenderer } from '../resources/renderers/NamespaceRenderer'
+import { HPARenderer } from '../resources/renderers/HPARenderer'
+import { PVCRenderer } from '../resources/renderers/PVCRenderer'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { cleanYamlForDuplicate } from '../../utils/skeleton-yaml'
 import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+import { useCompareLauncher } from '../compare/useCompareLauncher'
+import { apiVersionToGroup } from '../../utils/navigation'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
 
 // Stable reference — web renderer wrappers inject platform hooks internally
 const rendererOverrides: RendererOverrides = {
-  PodRenderer, NodeRenderer, ServiceRenderer, WorkloadRenderer,
+  PodRenderer, NodeRenderer, ServiceRenderer, WorkloadRenderer, CompositeRenderer,
+  ServiceAccountRenderer,
+  RoleRenderer,
+  RoleBindingRenderer,
+  NamespaceRenderer,
+  HPARenderer,
+  PVCRenderer,
 }
 
 // ============================================================================
@@ -323,9 +341,27 @@ export function WorkloadView({
   // RBAC
   const canUpdateSecrets = useCanUpdateSecrets()
   const updateResource = useUpdateResource()
-  const actionsBarProps = useActionsBarProps(kindProp, namespace, name)
+  const baseActionsBarProps = useActionsBarProps(kindProp, namespace, name)
   const desktopDownload = useDesktopDownload()
 
+  const resourceGroup = useMemo(
+    () => (resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : undefined),
+    [resource?.apiVersion],
+  )
+  const { onCompareTo, onCompareAcrossClusters, picker: comparePicker } = useCompareLauncher({
+    kind: kindProp,
+    namespace,
+    name,
+    // Prefer the URL-supplied group so Compare works even before the resource
+    // fetch completes; fall back to the derived group for callers that don't
+    // pass one.
+    group: rest.group || resourceGroup || undefined,
+  })
+  const actionsBarProps = useMemo(
+    () => ({ ...baseActionsBarProps, onCompareTo, onCompareAcrossClusters }),
+    [baseActionsBarProps, onCompareTo, onCompareAcrossClusters],
+  )
+
   const handleUpdateResource = useCallback(async (params: { kind: string; namespace: string; name: string; yaml: string }) => {
     await updateResource.mutateAsync(params)
   }, [updateResource])
@@ -384,7 +420,7 @@ export function WorkloadView({
       // Render props
       renderLogsTab={(props) => <LogsTabContent {...props} />}
       renderMetricsTab={({ kind, namespace: ns, name: n }) => (
-        <PrometheusCharts kind={kind} namespace={ns} name={n} showEmptyState />
+        <MetricsTabContent kind={kind} namespace={ns} name={n} resource={resource} expanded={expanded} />
       )}
       isMetricsAvailable={(kind, res) =>
         isPrometheusSupported(kind) && !(kind === 'Pod' && res?.status?.phase === 'Pending')
@@ -412,6 +448,7 @@ export function WorkloadView({
         rest.onNavigateToResource?.({ kind: kindToPlural(result.kind), namespace: result.namespace, name: result.name, group: '' })
       }}
     />
+    {comparePicker}
     </>
   )
 }
@@ -651,6 +688,73 @@ function FluxSourceConsumersInner({ sourceKind, namespace, name }: { sourceKind:
   )
 }
 
+// Drawer mode: single chart + category tabs (compact for ~500px width).
+// Full-screen mode: multi-chart grid so CPU + Memory + Network can be
+// compared side-by-side without tab switching.
+function MetricsTabContent({ kind, namespace, name, resource, expanded }: {
+  kind: string
+  namespace: string
+  name: string
+  resource: any
+  expanded: boolean
+}) {
+  const showRightsizing = expanded && ['Deployment', 'StatefulSet', 'DaemonSet'].includes(kind)
+
+  if (expanded) {
+    return (
+      <div className="flex flex-col h-full">
+        {showRightsizing && (
+          <div className="px-4 pt-4">
+            <RightsizingStrip kind={kind} namespace={namespace} name={name} />
+          </div>
+        )}
+        <div className="flex-1 min-h-0">
+          <PrometheusChartsGrid
+            kind={kind}
+            namespace={namespace}
+            name={name}
+            resource={resource}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Drawer fallback: single chart with tabs + restart lane below. The chart's
+  // time-range selector is mirrored to the restart lane so they stay aligned.
+  return (
+    <DrawerMetricsContent
+      kind={kind}
+      namespace={namespace}
+      name={name}
+      resource={resource}
+    />
+  )
+}
+
+function DrawerMetricsContent({ kind, namespace, name, resource }: {
+  kind: string
+  namespace: string
+  name: string
+  resource: any
+}) {
+  const [chartRange, setChartRange] = useState<import('../../api/client').PrometheusTimeRange>('1h')
+  const showRestartLane = kind !== 'Node'
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 min-h-0">
+        <PrometheusCharts kind={kind} namespace={namespace} name={name} showEmptyState resource={resource} onTimeRangeChange={setChartRange} />
+      </div>
+      {showRestartLane && (
+        <div className="px-4 pb-4">
+          <RestartEventLane kind={kind} namespace={namespace} name={name} range={chartRange} />
+        </div>
+      )}
+    </div>
+  )
+}
+
 // FLUX_SOURCE_KIND_BY_LOWER maps lowercase kind (what the inner WorkloadView
 // produces via its plural-to-singular fallback) to the wire-correct
 // PascalCase form that consumers carry in spec.sourceRef.kind. HelmChart is

package/src/context/NavCustomization.tsx

@@ -18,6 +18,19 @@ interface NavCustomizationBase {
   brandSlot?: ReactNode;
   /** Replaces the ContextSwitcher (kubeconfig-context picker). */
   contextSlot?: ReactNode;
+  /**
+   * When set, a "Compare across clusters" option is added to the Compare
+   * button in resource action bars. The host returns the URL that should
+   * be navigated to (via window.location.assign — typically a hub fleet
+   * route). Standalone Radar omits this and the compare action stays
+   * single-cluster.
+   */
+  crossClusterCompareHref?: (ref: {
+    kind: string;
+    namespace: string;
+    name: string;
+    group?: string;
+  }) => string;
 }
 
 /**

package/src/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './monaco-setup'
 import { RadarApp } from './RadarApp'
 import { openExternal } from './utils/navigation'
 import './index.css'

package/src/monaco-deep.d.ts

@@ -0,0 +1,8 @@
+// monaco-editor's package `exports` map ("./*": "./*") doesn't surface type
+// declarations for deep ESM subpaths, so TS can't resolve these imports even
+// though the .js/.d.ts files exist on disk. Re-export the root types for the
+// editor API and declare the YAML grammar as a side-effect-only module.
+declare module 'monaco-editor/esm/vs/editor/editor.api' {
+  export * from 'monaco-editor'
+}
+declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'

package/src/monaco-setup.ts

@@ -0,0 +1,26 @@
+// Load the Monaco editor from the bundled npm package instead of the default
+// jsdelivr CDN. Without this, @monaco-editor/react fetches the editor at runtime
+// over the network, so the YAML editor never loads in airgapped / offline
+// deployments. Bundling makes the binary fully self-contained.
+//
+// Imported for side effects from main.tsx (Radar's binary entry) only — library
+// consumers (e.g. Radar Hub) keep the default CDN loader unless they opt in.
+//
+// Import the editor API + YAML grammar directly rather than the `monaco-editor`
+// barrel: the barrel pulls in the JSON/CSS/HTML/TypeScript language services,
+// each of which bundles a heavy web worker (the TS one alone is ~7MB) that Radar
+// never uses — it only ever edits YAML.
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
+import { loader } from '@monaco-editor/react'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+
+// YAML has no dedicated Monaco language worker — the base editor worker covers
+// everything we use, so route every label to it.
+;(self as typeof self & { MonacoEnvironment?: { getWorker(): Worker } }).MonacoEnvironment = {
+  getWorker() {
+    return new EditorWorker()
+  },
+}
+
+loader.config({ monaco })