@skyhook-io/radar-app 1.1.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "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",
@@ -31,6 +31,7 @@
     "@fontsource/dm-mono": "^5.2.7",
     "@monaco-editor/react": "^4.7.0",
     "diff": "^9.0.0",
+    "monaco-editor": "^0.55.1",
     "react-markdown": "^10.1.0",
     "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",

package/src/App.tsx

@@ -523,58 +523,97 @@ function AppInner() {
   // Query client for cache invalidation
   const queryClient = useQueryClient()
 
-  // SSE-driven cache invalidation for resource lists, counts, and detail views.
-  // Uses a 3-second throttle window: first event starts the timer, all events within the
-  // window accumulate, then fire a single batch invalidation. This keeps max latency at 3s
-  // while coalescing burst events (e.g., 100-pod rollout → ~10 invalidations total).
-  const pendingInvalidationRef = useRef<{
-    kinds: Set<string>
-    hasCountChange: boolean
+  // SSE-driven cache invalidation, split into two cadences so constant status
+  // churn on large clusters doesn't force the *expensive* queries (big resource
+  // lists + dashboard) to refetch every 3s. The core distinction: add/delete
+  // changes what rows/counts exist (membership — keep fast); update is mostly
+  // status/restart/health noise that can fire constantly on a 10k-pod cluster
+  // and shouldn't drag a giant list onto a 3s cadence.
+  //
+  //   FAST (3s): detail drawer for any change (one cheap mounted object), and
+  //     on add/delete: the list, counts, and dashboard. GitOps + cert keep
+  //     their existing every-batch behavior — Phase 2 makes GitOps relevance-aware.
+  //   SLOW (15s): list + dashboard for kinds with update churn. A kind that also
+  //     had an add/delete in the window gets refreshed by both tiers (an extra
+  //     refetch per 15s at most) — that's fine and avoids a stale-list bug:
+  //     deduping by "was structural this window" would wrongly suppress an
+  //     update that arrived *after* the fast structural flush already ran.
+  const fastInvalidationRef = useRef<{
+    changedKinds: Set<string>   // every changed kind (any op) → detail drawer
+    structuralKinds: Set<string> // add/delete kinds → list membership + counts + dashboard
+    secretsChanged: boolean
     timer: number | null
-  }>({ kinds: new Set(), hasCountChange: false, timer: null })
+  }>({ changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null })
+  const slowInvalidationRef = useRef<{
+    updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
+    timer: number | null
+  }>({ updatedKinds: new Set(), timer: null })
 
   const handleK8sEvent = useCallback((event: K8sEvent) => {
     // Skip K8s Event kind — informational, not resource mutations
     if (event.kind === 'Event') return
 
-    const pending = pendingInvalidationRef.current
-    pending.kinds.add(kindToPlural(event.kind))
-    if (event.operation === 'add' || event.operation === 'delete') {
-      pending.hasCountChange = true
+    const kind = kindToPlural(event.kind)
+    const structural = event.operation === 'add' || event.operation === 'delete'
+
+    const fast = fastInvalidationRef.current
+    fast.changedKinds.add(kind)
+    if (structural) fast.structuralKinds.add(kind)
+    if (kind === 'secrets') fast.secretsChanged = true
+
+    const slow = slowInvalidationRef.current
+    if (!structural) slow.updatedKinds.add(kind)
+
+    // FAST tier — membership-sensitive + cheap, bounded 3s latency.
+    if (fast.timer === null) {
+      fast.timer = window.setTimeout(() => {
+        const f = fastInvalidationRef.current
+        for (const k of f.changedKinds) {
+          queryClient.invalidateQueries({ queryKey: ['resource', k] }) // open detail drawer stays live
+        }
+        for (const k of f.structuralKinds) {
+          queryClient.invalidateQueries({ queryKey: ['resources', k] }) // list membership changed
+        }
+        if (f.structuralKinds.size > 0) {
+          queryClient.invalidateQueries({ queryKey: ['resource-counts'] })
+          queryClient.invalidateQueries({ queryKey: ['dashboard'] })
+        }
+        if (f.secretsChanged) {
+          queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
+        }
+        // GitOps behavior unchanged from before — refreshes every batch when a
+        // GitOps view is mounted (Phase 2 will make this relevance-aware).
+        queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
+        queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
+        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+      }, 3000)
     }
 
-    // Start throttle window on first event (don't reset — bounded 3s latency)
-    if (pending.timer !== null) return
-    pending.timer = window.setTimeout(() => {
-      for (const kind of pending.kinds) {
-        // Invalidate list queries (['resources', kind, ...]) and detail queries (['resource', kind, ...])
-        queryClient.invalidateQueries({ queryKey: ['resources', kind] })
-        queryClient.invalidateQueries({ queryKey: ['resource', kind] })
-      }
-      if (pending.hasCountChange) {
-        queryClient.invalidateQueries({ queryKey: ['resource-counts'] })
-      }
-      queryClient.invalidateQueries({ queryKey: ['dashboard'] })
-      if (pending.kinds.has('secrets')) {
-        queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
-      }
-      // GitOps tree + insights are derived views over the same informer
-      // cache that produced this SSE event — when *anything* changes, the
-      // managed-resource tree and the insights pipeline can have stale
-      // changes/events/drift. Invalidating broadly here is cheap (only the
-      // currently-mounted GitOps view re-fetches; other views have no
-      // matching keys) and is what makes the detail page actually live.
-      // Without this the failure card + topology lag behind the title chips
-      // until window focus or a manual refresh.
-      queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
-      queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
-      // Reset accumulator
-      pending.kinds = new Set()
-      pending.hasCountChange = false
-      pending.timer = null
-    }, 3000)
+    // SLOW tier — throttle the expensive queries for status-only churn. Only
+    // updates schedule it; structural changes are fully handled by the fast tier.
+    if (!structural && slow.timer === null) {
+      slow.timer = window.setTimeout(() => {
+        const s = slowInvalidationRef.current
+        for (const k of s.updatedKinds) {
+          queryClient.invalidateQueries({ queryKey: ['resources', k] })
+        }
+        queryClient.invalidateQueries({ queryKey: ['dashboard'] }) // health reflects status updates
+        slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
+      }, 15000)
+    }
   }, [queryClient])
 
+  // Clear pending invalidation timers on unmount. Reset the refs (not just
+  // clearTimeout) so a same-instance remount doesn't inherit a non-null timer
+  // id — handleK8sEvent only schedules when timer === null, so a stale id would
+  // silently wedge all further SSE-driven invalidation.
+  useEffect(() => () => {
+    if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
+    if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
+    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+    slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
+  }, [])
+
   // SSE connection for real-time updates — no namespace filter for small/medium clusters (frontend filters).
   // forceNamespaceFilter is only set for large clusters that require server-side filtering.
   // Fleet mode uses 'resources' topology on the backend — filtering is client-side
@@ -590,10 +629,10 @@ function AppInner() {
       queryClient.invalidateQueries()
 
       // Cancel any pending SSE-driven invalidation — old cluster's events are irrelevant
-      if (pendingInvalidationRef.current.timer !== null) {
-        clearTimeout(pendingInvalidationRef.current.timer)
-        pendingInvalidationRef.current = { kinds: new Set(), hasCountChange: false, timer: null }
-      }
+      if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
+      if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
+      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+      slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
 
       // Close any open drawers/overlays — old cluster's resources don't exist on the new one
       setSelectedResource(null)
@@ -957,6 +996,7 @@ function AppInner() {
     })
 
     return {
+      ...displayedTopology,
       nodes: filteredNodes,
       edges: filteredEdges,
     }

package/src/api/client.ts

@@ -140,6 +140,9 @@ export interface WorkloadCount {
 export interface DashboardMetrics {
   cpu?: MetricSummary
   memory?: MetricSummary
+  // When false, only requests/capacity are meaningful — live usage (from
+  // metrics-server) is unavailable and usage fields are zero.
+  usageAvailable: boolean
 }
 
 export interface MetricSummary {
@@ -3026,6 +3029,9 @@ export interface DiagInformerSyncStatus {
   synced: boolean
   syncedAt?: string
   items: number
+  lastError?: string
+  lastErrorAt?: string
+  forbiddenSeen?: boolean
 }
 
 export interface DiagCacheSyncStatus {
@@ -3042,6 +3048,31 @@ export interface DiagCacheSyncStatus {
   promotedKinds?: string[]
 }
 
+export interface DiagSampleWindow {
+  count: number
+  last: number
+  min: number
+  p50: number
+  p95: number
+  p99: number
+  max: number
+}
+
+export interface DiagPerfSnapshot {
+  topology: {
+    totalBuilds: number
+    durationUs: DiagSampleWindow
+    nodeCount: DiagSampleWindow
+    edgeCount: DiagSampleWindow
+    payloadBytes: DiagSampleWindow
+    estimatedNodes: DiagSampleWindow
+  }
+  sse: {
+    totalBroadcasts: number
+    totalDrops: number
+  }
+}
+
 export interface DiagnosticsSnapshot {
   timestamp: string
   radarVersion: string
@@ -3136,6 +3167,7 @@ export interface DiagnosticsSnapshot {
   sse?: {
     connectedClients: number
   }
+  perf?: DiagPerfSnapshot
   runtime?: {
     heapMB: number
     heapObjectsK: number

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/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/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' },

package/src/components/traffic/TrafficFlowList.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo } from 'react'
+import { Virtuoso } from 'react-virtuoso'
 import type { TrafficFlow } from '../../types'
 import { clsx } from 'clsx'
 import { ChevronDown, ChevronUp, ShieldCheck } from 'lucide-react'
@@ -141,14 +142,18 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
         <span className="text-right">Verdict</span>
       </div>
 
-      {/* Flow rows */}
-      <div className="flex-1 overflow-y-auto">
-        {sorted.length === 0 ? (
-          <div className="flex items-center justify-center h-32 text-sm text-theme-text-tertiary">
-            {search ? 'No flows match the search' : 'No flows to display'}
-          </div>
-        ) : (
-          sorted.map((flow, i) => {
+      {/* Flow rows — virtualized so tens of thousands of Hubble/Cilium flows
+          don't all become DOM. Virtuoso measures variable row heights, so the
+          expand/collapse panel still works. */}
+      {sorted.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center text-sm text-theme-text-tertiary">
+          {search ? 'No flows match the search' : 'No flows to display'}
+        </div>
+      ) : (
+        <Virtuoso
+          className="flex-1"
+          data={sorted}
+          itemContent={(i, flow) => {
             const isExpanded = expandedIdx === i
             const isHTTP = flow.l7Protocol === 'HTTP'
             const isDNS = flow.l7Protocol === 'DNS'
@@ -316,9 +321,9 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                 )}
               </div>
             )
-          })
-        )}
-      </div>
+          }}
+        />
+      )}
 
       {/* Footer */}
       <div className="px-3 py-1.5 border-t border-theme-border text-[10px] text-theme-text-tertiary">

package/src/components/traffic/TrafficGraph.tsx

@@ -1264,9 +1264,13 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
     try {
       const layoutResult = await elk.layout(elkGraph)
 
+      // Index ELK's positioned children by id once — a .find() per node here is
+      // O(nodes²) and bites on dense traffic graphs.
+      const elkPositions = new Map((layoutResult.children ?? []).map(n => [n.id, n]))
+
       // Apply positions from ELK to nodes
       let positionedNodes = rawNodes.map(node => {
-        const elkNode = layoutResult.children?.find(n => n.id === node.id)
+        const elkNode = elkPositions.get(node.id)
         return {
           ...node,
           position: {

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
@@ -510,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(``)
@@ -600,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(', ')}`)
@@ -640,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`)
@@ -683,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/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 })