@skyhook-io/k8s-ui 1.5.13 → 1.6.1

package/src/components/gitops/tree/index.ts

@@ -0,0 +1,6 @@
+export { GitOpsTreeGraph } from './GitOpsTreeGraph'
+export type { GitOpsTreePreset } from './GitOpsTreeGraph'
+export type { GitOpsTreeFilters } from './tree-helpers'
+export { gitOpsFilterSet, hasGitOpsTreeFilters, matchesGitOpsTreeFilters } from './tree-helpers'
+export { mergeGitOpsTrees, MERGED_NODE_SOURCE_KEY } from './merge'
+export type { MergedNodeSource } from './merge'

package/src/components/gitops/tree/merge.test.ts

@@ -0,0 +1,240 @@
+import { describe, test, expect } from 'vitest'
+
+import { mergeGitOpsTrees, MERGED_NODE_SOURCE_KEY } from './merge'
+import type { GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
+
+// Helper: build a controller-side tree node. IDs follow the controller
+// scheme (no prefix) so the merge function's destination-prefixing logic
+// is what we actually test against.
+function ctrlNode(
+  id: string,
+  kind: string,
+  name: string,
+  namespace: string,
+  extras: Partial<GitOpsTreeNode> = {},
+): GitOpsTreeNode {
+  return {
+    id,
+    ref: { kind, name, namespace },
+    role: 'declared',
+    tool: 'argocd',
+    ...extras,
+  }
+}
+
+// Helper: build a destination-side tree node. Same shape as a controller
+// node; the merge function looks at refs + ids, not provenance.
+function destNode(
+  id: string,
+  kind: string,
+  name: string,
+  namespace: string,
+  extras: Partial<GitOpsTreeNode> = {},
+): GitOpsTreeNode {
+  return {
+    id,
+    ref: { kind, name, namespace },
+    role: 'declared',
+    tool: 'argocd',
+    ...extras,
+  }
+}
+
+describe('mergeGitOpsTrees', () => {
+  // The classic in-cluster case — caller didn't fetch a destination tree
+  // (single-cluster app) so destination is null. Returning the controller
+  // tree unchanged is what preserves Argo's status + summary tile counts
+  // on the in-cluster code path.
+  test('null destination returns controller unchanged', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+        ctrlNode('dep1', 'Deployment', 'web', 'prod'),
+      ],
+      edges: [{ source: 'app1', target: 'dep1', type: 'owns' }],
+      warnings: ['ctrl-warn'],
+    }
+    const merged = mergeGitOpsTrees(controller, null)
+    expect(merged).toEqual(controller)
+  })
+
+  // Matched node: destination provides live health (informer-side, more
+  // authoritative than Argo's polled status). The merge must overlay
+  // health/info without dropping the controller's per-resource sync state.
+  test('matched nodes get destination health overlaid; controller sync preserved', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+        ctrlNode('dep1', 'Deployment', 'web', 'prod', { sync: 'Synced', health: 'Unknown' }),
+      ],
+      edges: [],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+        destNode('d1', 'Deployment', 'web', 'prod', { health: 'Healthy', info: [{ name: 'replicas', value: '3/3' }] }),
+      ],
+      edges: [],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    const dep = merged.nodes.find((n) => n.ref.kind === 'Deployment')
+    expect(dep?.sync).toBe('Synced') // controller's sync wins
+    expect(dep?.health).toBe('Healthy') // destination's health overlaid
+    expect(dep?.info).toEqual([{ name: 'replicas', value: '3/3' }])
+  })
+
+  // The whole point of the merge: destination-side descendants (ReplicaSet,
+  // Pod) that Argo never sees get appended to the tree. Their ids get a
+  // `dest:` prefix to avoid collision with controller ids.
+  test('destination-only descendants get prefixed ids + edges follow', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+        ctrlNode('dep1', 'Deployment', 'web', 'prod'),
+      ],
+      edges: [{ source: 'app1', target: 'dep1', type: 'owns' }],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+        destNode('d1', 'Deployment', 'web', 'prod'),
+        destNode('rs1', 'ReplicaSet', 'web-abc', 'prod'),
+        destNode('p1', 'Pod', 'web-abc-xy', 'prod'),
+      ],
+      edges: [
+        { source: 'd1', target: 'rs1', type: 'owns' },
+        { source: 'rs1', target: 'p1', type: 'owns' },
+      ],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    // 2 controller nodes + 2 destination-only descendants.
+    expect(merged.nodes).toHaveLength(4)
+    // Destination-only nodes carry the dest: prefix.
+    const rs = merged.nodes.find((n) => n.ref.kind === 'ReplicaSet')
+    const pod = merged.nodes.find((n) => n.ref.kind === 'Pod')
+    expect(rs?.id).toBe('dest:rs1')
+    expect(pod?.id).toBe('dest:p1')
+    // Edge from Deployment (matched: id becomes controller's `dep1`) to
+    // the prefixed ReplicaSet — proves the matched-id remap entry wires
+    // descendant edges to the correct parent.
+    expect(merged.edges).toContainEqual({ source: 'dep1', target: 'dest:rs1', type: 'owns' })
+    expect(merged.edges).toContainEqual({ source: 'dest:rs1', target: 'dest:p1', type: 'owns' })
+    // Controller's original edge survives.
+    expect(merged.edges).toContainEqual({ source: 'app1', target: 'dep1', type: 'owns' })
+  })
+
+  // Edge dedup must key on type — different edge types between the same
+  // nodes are distinct and both should survive. A regression that drops
+  // the type from the key would silently lose `owns` vs `dependsOn`.
+  test('edges deduped by source+target+type tuple, not just source+target', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' }),
+        ctrlNode('svc', 'Service', 'web', 'prod'),
+      ],
+      edges: [{ source: 'app', target: 'svc', type: 'owns' }],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dr', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [
+        destNode('dr', 'Application', 'app', 'argocd', { role: 'root' }),
+        destNode('s', 'Service', 'web', 'prod'),
+      ],
+      edges: [
+        { source: 'dr', target: 's', type: 'owns' }, // duplicate (different ids but same matched node) — should dedup
+        { source: 'dr', target: 's', type: 'dependsOn' }, // distinct type — should survive
+      ],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    // dr is the synthetic dest root — dropped. So both edges in the
+    // destination tree have an undefined remapped source (the dropped
+    // root) and get filtered out. The controller edge survives.
+    expect(merged.edges).toHaveLength(1)
+    expect(merged.edges[0]).toEqual({ source: 'app', target: 'svc', type: 'owns' })
+  })
+
+  // Warnings concat from both sides. Hub-only concern: per-cluster RBAC
+  // denials surface as destination warnings; controller-side scan errors
+  // surface as controller warnings. Both must reach the consumer.
+  test('warnings concat from both sides', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' })],
+      edges: [],
+      warnings: ['ctrl-warn'],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dr', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [destNode('dr', 'Application', 'app', 'argocd', { role: 'root' })],
+      edges: [],
+      warnings: ['dest-warn-1', 'dest-warn-2'],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    expect(merged.warnings).toEqual(['ctrl-warn', 'dest-warn-1', 'dest-warn-2'])
+  })
+
+  // Summary recomputation: the merge sets summary to undefined so
+  // GitOpsTreeGraph recomputes from the merged node list (avoids
+  // double-counting overlay matches in declared/generated counts).
+  test('summary cleared to defer recomputation by GitOpsTreeGraph', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' })],
+      edges: [],
+      summary: { declared: 5, generated: 2, grouped: 0, degraded: 1, outOfSync: 0 },
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dr', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [destNode('dr', 'Application', 'app', 'argocd', { role: 'root' })],
+      edges: [],
+      summary: { declared: 3, generated: 0, grouped: 0, degraded: 0, outOfSync: 0 },
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    expect(merged.summary).toBeUndefined()
+  })
+
+  // Routing signal: every node carries `data._source` so consumers
+  // (Radar Hub's fleet detail page) can route resource-viewer clicks
+  // to the correct cluster without depending on the `dest:` ID prefix
+  // string convention. A future change to the ID format must NOT break
+  // routing — this test pins that separation.
+  test('every output node carries data._source for routing', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app', 'Application', 'app', 'argocd', { role: 'root' }),
+        ctrlNode('dep', 'Deployment', 'web', 'prod'),
+      ],
+      edges: [],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dr', 'Application', 'app', 'argocd', { role: 'root' }),
+      nodes: [
+        destNode('dr', 'Application', 'app', 'argocd', { role: 'root' }),
+        destNode('dep', 'Deployment', 'web', 'prod'), // matches controller node
+        destNode('pod', 'Pod', 'web-xyz', 'prod'),    // destination-only
+      ],
+      edges: [],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    for (const n of merged.nodes) {
+      const source = (n.data ?? {})[MERGED_NODE_SOURCE_KEY]
+      expect(source).toBeDefined()
+    }
+    // `root` carries the same routing tag — consumers that read merged.root
+    // directly (rather than walking nodes) must not get undefined.
+    expect(merged.root.data?.[MERGED_NODE_SOURCE_KEY]).toBe('controller')
+    const app = merged.nodes.find((n) => n.ref.kind === 'Application')
+    const dep = merged.nodes.find((n) => n.ref.kind === 'Deployment')
+    const pod = merged.nodes.find((n) => n.ref.kind === 'Pod')
+    expect(app?.data?.[MERGED_NODE_SOURCE_KEY]).toBe('controller')
+    expect(dep?.data?.[MERGED_NODE_SOURCE_KEY]).toBe('controller') // matched: controller wins
+    expect(pod?.data?.[MERGED_NODE_SOURCE_KEY]).toBe('destination')
+  })
+})

package/src/components/gitops/tree/merge.ts

@@ -0,0 +1,160 @@
+import type { GitOpsResourceTree, GitOpsTreeEdge, GitOpsTreeNode, GitOpsTreeRef } from '../../../types/gitops-tree'
+
+// =============================================================================
+// mergeGitOpsTrees — used by Radar Hub's fleet GitOps detail page to compose
+// a complete cross-cluster tree from two independent fetches:
+//
+//   1. The controller cluster's /api/gitops/tree/{kind}/{ns}/{name} response
+//      ("controller tree"). Argo CD's view of the Application: the declared
+//      resources from .status.resources + Argo's server-computed sync state
+//      per resource. Truthful for "what does Argo think should exist + how
+//      does it think those resources are doing", but Argo doesn't walk
+//      ownerReferences past the resources it manages directly — it never
+//      sees ReplicaSets, Pods, EndpointSlices, etc.
+//
+//   2. The destination cluster's /api/gitops/managed-resources?app=...
+//      response ("destination tree"). Discovered by Argo's tracking
+//      annotation in the destination cluster's actual workloads. Carries
+//      the LIVE health/info from the in-cluster informer (more authoritative
+//      for "is this pod actually running") AND the walked descendant
+//      subtree (Deployment → ReplicaSet → Pod) that the controller can't see.
+//
+// Single-cluster Radar never needs this — for in-cluster apps the controller
+// tree already has everything because Radar runs in the same cluster as
+// the workloads. The merge is what makes Radar Hub's cross-cluster view
+// strictly more complete than self-hosted Radar, not just a list of apps.
+//
+// Strategy: controller is the spine (preserves Argo's declared view +
+// per-resource sync state); destination provides (a) live health/info
+// overlay onto matching nodes, (b) descendant nodes Argo doesn't track.
+// Destination's synthetic root is dropped; its non-root nodes that have
+// no controller match are added with prefixed IDs to avoid ID collisions
+// with the controller's node ids.
+//
+// Each output node carries an explicit `data._source` field set to
+// `'controller'` or `'destination'`, which downstream consumers
+// (Radar Hub's fleet detail page) use to route resource-viewer clicks
+// to the correct cluster. The `dest:` ID prefix is preserved for graph
+// rendering (duplicate IDs would break edge resolution) but NOT used as
+// the routing signal — that's the explicit `data._source` field. This
+// separation keeps a future ID-format change from silently breaking
+// cross-cluster navigation.
+// =============================================================================
+
+// MergedNodeSource is the value of `node.data._source` after merge.
+// Reading it from `data` (the documented extension point on
+// GitOpsTreeNode) keeps the canonical type stable while giving
+// consumers an explicit, type-checkable routing signal.
+export type MergedNodeSource = 'controller' | 'destination'
+
+// Key in node.data for the source tag. Exported so consumers don't
+// hard-code the string; if it ever changes, both sides update together.
+export const MERGED_NODE_SOURCE_KEY = '_source' as const
+
+function refKey(ref: GitOpsTreeRef): string {
+  return `${ref.group ?? ''}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}`
+}
+
+// withSource returns a shallow copy of `node` whose data field carries
+// the given source tag. Other data keys pass through unchanged.
+function withSource(node: GitOpsTreeNode, source: MergedNodeSource): GitOpsTreeNode {
+  return {
+    ...node,
+    data: { ...(node.data ?? {}), [MERGED_NODE_SOURCE_KEY]: source },
+  }
+}
+
+export function mergeGitOpsTrees(
+  controller: GitOpsResourceTree,
+  destination: GitOpsResourceTree | null | undefined,
+): GitOpsResourceTree {
+  if (!destination) return controller
+
+  // Index destination's non-root nodes by ref-key for overlay lookup.
+  const destByKey = new Map<string, GitOpsTreeNode>()
+  for (const n of destination.nodes) {
+    if (n.role === 'root') continue
+    destByKey.set(refKey(n.ref), n)
+  }
+
+  // Pass 1: walk controller nodes; for any match in destination, overlay
+  // its live health, info, and topologyStatus onto the controller node.
+  // Argo's per-resource sync state stays controller-side — it's
+  // Argo-internal and the destination informer doesn't compute it.
+  // Every controller node is tagged with _source='controller' for
+  // resource-viewer routing.
+  const nodes: GitOpsTreeNode[] = controller.nodes.map((n) => {
+    const dest = destByKey.get(refKey(n.ref))
+    const merged = dest
+      ? {
+          ...n,
+          health: dest.health ?? n.health,
+          info: dest.info ?? n.info,
+          topologyStatus: dest.topologyStatus ?? n.topologyStatus,
+        }
+      : n
+    return withSource(merged, 'controller')
+  })
+
+  // Pass 2: any destination node WITHOUT a controller match is a descendant
+  // Argo doesn't track (ReplicaSet, Pod, EndpointSlice, etc.) — include
+  // them with a remapped ID to avoid colliding with controller IDs.
+  // destIdRemap is also used to rewrite destination edges in pass 3.
+  const controllerKeys = new Set(controller.nodes.map((n) => refKey(n.ref)))
+  const destOnly: GitOpsTreeNode[] = []
+  const destIdRemap = new Map<string, string>()
+
+  for (const n of destination.nodes) {
+    if (n.role === 'root') continue
+    const k = refKey(n.ref)
+    if (controllerKeys.has(k)) {
+      // Match — point destination's id at the controller's id for edge rewriting.
+      const ctrlNode = nodes.find((c) => refKey(c.ref) === k)
+      if (ctrlNode) destIdRemap.set(n.id, ctrlNode.id)
+    } else {
+      const newId = `dest:${n.id}`
+      destIdRemap.set(n.id, newId)
+      // dest: ID prefix is the collision-avoidance mechanism (graph
+      // rendering breaks on duplicate IDs); _source='destination' is
+      // the routing signal consumers actually read. Two distinct
+      // concerns, two distinct fields.
+      destOnly.push(withSource({ ...n, id: newId }, 'destination'))
+    }
+  }
+
+  // Pass 3: edge merge. Controller edges stay as-is (they describe Argo's
+  // declared topology). Destination edges between non-root nodes are
+  // remapped via destIdRemap; skip any whose endpoint is the (dropped)
+  // synthetic dest root, and skip duplicates of controller edges.
+  const edgeKey = (e: GitOpsTreeEdge) => `${e.source}->${e.target}:${e.type}`
+  const seen = new Set(controller.edges.map(edgeKey))
+  const edges: GitOpsTreeEdge[] = [...controller.edges]
+
+  for (const e of destination.edges) {
+    const src = destIdRemap.get(e.source)
+    const tgt = destIdRemap.get(e.target)
+    if (!src || !tgt) continue // endpoint was the synthetic root — drop.
+    const merged: GitOpsTreeEdge = { source: src, target: tgt, type: e.type }
+    const k = edgeKey(merged)
+    if (seen.has(k)) continue
+    seen.add(k)
+    edges.push(merged)
+  }
+
+  // Warnings concat — destination's warnings (e.g. partial RBAC denials on
+  // some kinds during scan) surface alongside controller's.
+  const warnings = [...(controller.warnings ?? []), ...(destination.warnings ?? [])]
+
+  return {
+    // `root` is tagged the same way nodes are — consumers reading
+    // `merged.root.data._source` rely on the same contract as nodes.
+    root: withSource(controller.root, 'controller'),
+    nodes: [...nodes, ...destOnly],
+    edges,
+    warnings: warnings.length > 0 ? warnings : undefined,
+    // Summary is derived UI metadata — let GitOpsTreeGraph recompute from
+    // the merged node list rather than trying to add controller +
+    // destination summaries (would double-count the overlay matches).
+    summary: undefined,
+  }
+}

package/src/components/gitops/tree/tree-helpers.ts

@@ -0,0 +1,42 @@
+import type { GitOpsTreeNode } from '../../../types'
+
+export interface GitOpsTreeFilters {
+  kinds?: Set<string> | string[]
+  namespaces?: Set<string> | string[]
+  sync?: Set<string> | string[]
+  health?: Set<string> | string[]
+  roles?: Set<string> | string[]
+}
+
+export function gitOpsFilterSet(values?: Set<string> | string[]): Set<string> | undefined {
+  if (!values) return undefined
+  const set = values instanceof Set ? values : new Set(values)
+  return set.size > 0 ? set : undefined
+}
+
+export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsTreeFilters): boolean {
+  if (!filters) return true
+  const kinds = gitOpsFilterSet(filters.kinds)
+  const namespaces = gitOpsFilterSet(filters.namespaces)
+  const sync = gitOpsFilterSet(filters.sync)
+  const health = gitOpsFilterSet(filters.health)
+  const roles = gitOpsFilterSet(filters.roles)
+
+  if (kinds && !kinds.has(node.ref.kind)) return false
+  if (namespaces && !namespaces.has(node.ref.namespace || '(cluster)')) return false
+  if (sync && !sync.has(node.sync || 'Unknown')) return false
+  if (health && !health.has(node.health || 'Unknown')) return false
+  if (roles && !roles.has(node.role)) return false
+  return true
+}
+
+export function hasGitOpsTreeFilters(filters?: GitOpsTreeFilters): boolean {
+  if (!filters) return false
+  return Boolean(
+    gitOpsFilterSet(filters.kinds) ||
+    gitOpsFilterSet(filters.namespaces) ||
+    gitOpsFilterSet(filters.sync) ||
+    gitOpsFilterSet(filters.health) ||
+    gitOpsFilterSet(filters.roles),
+  )
+}

package/src/components/resources/ResourcesSidebar.tsx

@@ -94,7 +94,9 @@ const CORE_RESOURCE_TYPES = [
 // Resource type button in sidebar
 interface ResourceTypeButtonProps {
   resource: APIResource
-  count: number
+  /** `null` means "count not loaded yet" — rendered as a placeholder so
+   *  the badge doesn't flicker to "0" while the API call is in flight. */
+  count: number | null
   isSelected: boolean
   /** Keyboard-highlight state (arrow nav in the filter input). */
   isHighlighted?: boolean
@@ -155,9 +157,11 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
             <span className={clsx(
               'text-xs py-0.5 rounded text-center font-mono',
               isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
-              count < 1000 ? 'w-8' : 'w-9'
+              count === null
+                ? 'w-8 text-theme-text-disabled'
+                : count < 1000 ? 'w-8' : 'w-9',
             )}>
-              {count}
+              {count === null ? '–' : count}
             </span>
           )}
         </div>
@@ -253,12 +257,28 @@ export function ResourcesSidebar({
     }))
   }, [categories])
 
+  // null for a key means "not loaded yet" (rendered as a placeholder
+  // dash in the badge). 0 means "the API replied and confirmed there
+  // are zero of this kind". Don't conflate them — otherwise the
+  // sidebar shows a confident "0" for every kind while the count
+  // payload is still in flight.
   const counts = useMemo(() => {
-    if (!resourceCounts) return {} as Record<string, number>
-    const results: Record<string, number> = {}
+    const results: Record<string, number | null> = {}
+    if (!resourceCounts) {
+      for (const resource of resourcesToCount) {
+        const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
+        results[key] = null
+      }
+      return results
+    }
     for (const resource of resourcesToCount) {
       const key = resource.group ? `${resource.group}/${resource.kind}` : resource.kind
-      results[key] = resourceCounts[key] ?? 0
+      const v = resourceCounts[key]
+      // Treat missing keys in a present resourceCounts payload as
+      // "the API replied and didn't include this kind" → 0. Treat the
+      // entire payload being absent as "not loaded" → null (handled
+      // above).
+      results[key] = v ?? 0
     }
     return results
   }, [resourcesToCount, resourceCounts])
@@ -276,16 +296,22 @@ export function ResourcesSidebar({
     let totalHiddenGroups = 0
 
     const withTotals = categories.map(category => {
+      // Coerce nulls (loading) to 0 for the category total — we still
+      // want to show *some* number on collapsed categories during
+      // load, just not "0" badges on every individual kind.
       const total = category.resources.reduce(
-        (sum, resource) => sum + (counts?.[(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)] ?? 0),
+        (sum, resource) => sum + (counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? 0),
         0
       )
 
-      // Filter resources: show if has instances, is core kind, or showEmptyKinds is true
+      // Filter resources: show if has instances, is core kind, has an
+      // unknown count (loading — don't pre-emptively hide), or
+      // showEmptyKinds is true.
       const visibleResources = category.resources.filter(resource => {
-        const count = counts?.[(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)] ?? 0
+        const count = counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind]
         const isCore = ALWAYS_SHOWN_KINDS.has(resource.kind)
-        const shouldShow = count > 0 || isCore || showEmptyKinds
+        const isLoading = count === null
+        const shouldShow = (count ?? 0) > 0 || isCore || isLoading || showEmptyKinds
         if (!shouldShow) totalHiddenKinds++
         return shouldShow
       })
@@ -500,7 +526,7 @@ export function ResourcesSidebar({
                         key={`${p.name}-${p.group}`}
                         ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
                         resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
-                        count={counts?.[(p.group ? `${p.group}/${p.kind}` : p.kind)] ?? 0}
+                        count={counts[p.group ? `${p.group}/${p.kind}` : p.kind] ?? null}
                         isSelected={isResourceSelected}
                         isHighlighted={highlighted}
                         isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
@@ -556,7 +582,7 @@ export function ResourcesSidebar({
                           key={resource.name}
                           ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
                           resource={resource}
-                          count={counts?.[(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)] ?? 0}
+                          count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
                           isSelected={showSelected}
                           isHighlighted={highlighted}
                           isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
@@ -581,7 +607,7 @@ export function ResourcesSidebar({
               ? type.label.slice(0, -1)
               : type.label
             const Icon = getResourceIcon(kindKey)
-            const count = counts?.[kindKey] ?? 0
+            const count = counts[kindKey] ?? null
             const isSelected = effectiveSelectedKind.name === type.kind && !effectiveSelectedKind.group
             return (
               <button
@@ -600,9 +626,10 @@ export function ResourcesSidebar({
                 <span className="flex-1 text-left">{type.label}</span>
                 <span className={clsx(
                   'badge font-mono',
-                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated'
+                  isSelected ? 'bg-skyhook-500/30 selection-text' : 'bg-theme-elevated',
+                  count === null && 'text-theme-text-disabled',
                 )}>
-                  {count}
+                  {count === null ? '–' : count}
                 </span>
               </button>
             )