@skyhook-io/radar-app 1.9.1 → 1.9.2

package/src/components/diagnose/AgentSetupNotice.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { Sparkles, Copy, Check, ExternalLink, RotateCw } from "lucide-react";
+import { SUPPORTED_AGENTS, type AgentInstall } from "./agentCatalog";
+import { type DiagnoseSetup } from "./DiagnoseContext";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        void navigator.clipboard?.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1100);
+      }}
+      className="shrink-0 rounded-md p-1 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+      aria-label={copied ? "Copied" : "Copy install command"}
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5 text-emerald-500" />
+      ) : (
+        <Copy className="h-3.5 w-3.5" />
+      )}
+    </button>
+  );
+}
+
+function AgentRow({ agent }: { agent: AgentInstall }) {
+  return (
+    <div className="rounded-lg border border-theme-border bg-theme-base p-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <span className="text-sm font-medium text-theme-text-primary">
+          {agent.label}
+        </span>
+        <a
+          href={agent.docs}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-theme-text-tertiary hover:text-theme-text-primary"
+        >
+          Docs
+          <ExternalLink className="h-3 w-3" />
+        </a>
+      </div>
+      <div className="flex items-center gap-1.5 rounded-md bg-theme-elevated px-2 py-1.5">
+        <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-xs text-theme-text-secondary">
+          {agent.install}
+        </code>
+        <CopyButton text={agent.install} />
+      </div>
+    </div>
+  );
+}
+
+// Shown in the AI surface's Home when diagnosis is eligible in this deployment
+// but not runnable yet — either no agent CLI is installed ("needs-install") or a
+// supported one appeared after Radar booted ("needs-restart"). Radar decides the
+// engine once at startup, so a fresh install needs a restart to take effect.
+export function AgentSetupNotice({
+  setupState,
+}: {
+  setupState: DiagnoseSetup;
+}) {
+  const needsRestart = setupState === "needs-restart";
+  return (
+    <div className="mx-auto max-w-md px-1 py-6">
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl border border-accent/30 bg-accent/5">
+        <Sparkles className="h-5 w-5 text-accent" />
+      </div>
+      <h3 className="text-base font-semibold text-theme-text-primary">
+        {needsRestart
+          ? "Restart Radar to enable AI diagnosis"
+          : "Set up AI diagnosis"}
+      </h3>
+      <p className="mt-1 text-sm text-theme-text-secondary">
+        {needsRestart ? (
+          <>
+            A supported agent CLI is now installed, but Radar started before it
+            was — restart Radar to pick it up. Investigations then run locally
+            on your machine, keyless, using your own agent.
+          </>
+        ) : (
+          <>
+            Radar runs investigations through a coding agent CLI on your own
+            machine — no Radar cloud, no API key. Install one of these, then
+            restart Radar:
+          </>
+        )}
+      </p>
+
+      {!needsRestart && (
+        <div className="mt-4 flex flex-col gap-2.5">
+          {SUPPORTED_AGENTS.map((a) => (
+            <AgentRow key={a.name} agent={a} />
+          ))}
+        </div>
+      )}
+
+      {/* The panel only re-reads /api/agents on load, so after installing or
+          restarting the user needs a way to refresh in place rather than
+          hunting for a manual browser reload. */}
+      <button
+        type="button"
+        onClick={() => window.location.reload()}
+        className="btn-brand mt-4 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm"
+      >
+        <RotateCw className="h-3.5 w-3.5" />
+        {needsRestart ? "Reload after restarting" : "Reload after installing"}
+      </button>
+
+      <p className="mt-4 text-xs text-theme-text-tertiary">
+        The agent reads this cluster through Radar and finds the root cause. It
+        never leaves your machine.
+      </p>
+    </div>
+  );
+}

package/src/components/diagnose/DiagnoseContext.tsx

@@ -35,8 +35,18 @@ export interface Target {
 }
 export type DiagnoseView = "home" | "investigation";
 
+// Setup readiness of the local AI-diagnosis feature, derived from the agents API:
+//  - "ready":         an agent is installed and the engine is running (available)
+//  - "needs-install": the feature is supported here but no agent CLI is installed
+//  - "needs-restart": a supported agent is now on PATH but Radar booted before it
+//                     existed (the engine is decided once, at startup)
+//  - "off":           not available in this deployment (proxy/OIDC auth, --no-mcp,
+//                     or an embed host) — no install nudge would help
+export type DiagnoseSetup = "ready" | "needs-install" | "needs-restart" | "off";
+
 interface DiagnoseCtx {
   available: boolean; // an agent CLI is present (button/entry gate)
+  setupState: DiagnoseSetup; // readiness for the setup nudge (see DiagnoseSetup)
   agentLabel: string; // label of the selected agent, e.g. "Claude Code"
   hosted: boolean; // selected agent runs on the host's backend, not this machine
   agents: AgentInfo[]; // supported agents detected on PATH (for the picker)
@@ -86,7 +96,11 @@ interface DiagnoseLayoutCtx {
 
 // Stable key for "is THIS resource being investigated right now" — built the same way
 // from a run summary and from a button's target so the two always match.
-export function runTargetKey(kind: string, namespace: string, name: string): string {
+export function runTargetKey(
+  kind: string,
+  namespace: string,
+  name: string,
+): string {
   return `${kind} ${namespace} ${name}`;
 }
 
@@ -95,7 +109,8 @@ const LayoutCtx = createContext<DiagnoseLayoutCtx | null>(null);
 
 export function useDiagnoseLayout(): DiagnoseLayoutCtx {
   const c = useContext(LayoutCtx);
-  if (!c) throw new Error("useDiagnoseLayout must be used within DiagnoseProvider");
+  if (!c)
+    throw new Error("useDiagnoseLayout must be used within DiagnoseProvider");
   return c;
 }
 
@@ -161,6 +176,7 @@ function writeStored(key: string, value: string) {
 
 export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const [available, setAvailable] = useState(false);
+  const [eligible, setEligible] = useState(false);
   const [agents, setAgents] = useState<AgentInfo[]>([]);
   const [consented, setConsented] = useState<Record<string, boolean>>({});
   const [selectedAgent, setSelectedAgentState] = useState<string>(
@@ -205,6 +221,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
       .then((r) => {
         if (!live) return;
         setConsented(r.consented ?? {});
+        setEligible(!!r.eligible);
         const supported = r.agents.filter(
           (a) =>
             a.supported &&
@@ -256,7 +273,8 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     (name: string) => {
       setSelectedAgentState(name);
       writeStored(AGENT_KEY, name);
-      const nextProfile = agents.find((agent) => agent.name === name)?.profiles?.[0];
+      const nextProfile = agents.find((agent) => agent.name === name)
+        ?.profiles?.[0];
       if (nextProfile) {
         setProfileState(nextProfile);
         writeStored(PROFILE_KEY, nextProfile);
@@ -274,10 +292,9 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const selectedAgentInfo = agents.find((a) => a.name === selectedAgent);
-  const effectiveProfile =
-    selectedAgentInfo?.profiles?.includes(profile)
-      ? profile
-      : (selectedAgentInfo?.profiles?.[0] ?? profile);
+  const effectiveProfile = selectedAgentInfo?.profiles?.includes(profile)
+    ? profile
+    : (selectedAgentInfo?.profiles?.[0] ?? profile);
   const agentLabel = agentLabelFor(selectedAgent, selectedAgentInfo?.label);
   const hosted = !!selectedAgentInfo?.hosted;
   // Hosted Radar uses its existing per-user disclosure surface and supplies its
@@ -286,6 +303,16 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     ? "standard"
     : (selectedAgentInfo?.consentSurfaces?.[effectiveProfile] ?? "");
 
+  // `agents` holds only supported CLIs (filtered on fetch), so a non-empty list
+  // while the engine is off means a drivable agent appeared on PATH after boot.
+  const setupState: DiagnoseSetup = available
+    ? "ready"
+    : !eligible
+      ? "off"
+      : agents.length > 0
+        ? "needs-restart"
+        : "needs-install";
+
   useEffect(() => {
     const onResize = () => setViewportW(window.innerWidth);
     window.addEventListener("resize", onResize);
@@ -374,7 +401,9 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
       setOpen(true);
       if (!hosted && !consentSurface) {
         setPendingTarget(null);
-        setStartError("Radar can’t run this agent with a verified execution profile.");
+        setStartError(
+          "Radar can’t run this agent with a verified execution profile.",
+        );
         setView("investigation");
         return;
       }
@@ -410,7 +439,9 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
         window.history.replaceState(
           null,
           "",
-          window.location.pathname + (qs ? `?${qs}` : "") + window.location.hash,
+          window.location.pathname +
+            (qs ? `?${qs}` : "") +
+            window.location.hash,
         );
       }
     } catch {
@@ -464,6 +495,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
 
   const value: DiagnoseCtx = {
     available,
+    setupState,
     agentLabel,
     hosted,
     agents,
@@ -513,7 +545,16 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
       panelWidthKey: WIDTH_KEY,
       runningKeys,
     }),
-    [open, contentGutter, maximized, width, narrow, runningKeys, setMaximized, setWidth],
+    [
+      open,
+      contentGutter,
+      maximized,
+      width,
+      narrow,
+      runningKeys,
+      setMaximized,
+      setWidth,
+    ],
   );
 
   return (

package/src/components/diagnose/DiagnoseSurface.tsx

@@ -26,6 +26,7 @@ import {
 import { useDiagnoseCustomization } from "../../context/DiagnoseCustomization";
 import { InvestigationView } from "./InvestigationView";
 import { RecentList } from "./Home";
+import { AgentSetupNotice } from "./AgentSetupNotice";
 import { ConsentCard } from "./parts";
 import { buildLaunchCommand, launchAgentLabel, openInTerminal } from "./launch";
 import { type RunSummary, type ExecutionProfile } from "../../api/diagnose";
@@ -179,6 +180,11 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
     document.addEventListener("mouseup", onUp);
   };
 
+  // Feature is eligible here but not runnable yet (no agent installed, or one
+  // appeared after boot) — Home leads with the setup notice instead of an empty list.
+  const setupPending =
+    d.setupState === "needs-install" || d.setupState === "needs-restart";
+
   const activeRun = d.runs.find((r) => r.id === d.activeRunId) ?? null;
   // A focused run shows the agent it actually ran with; Home reflects the current pick.
   const activeAgentLabel = activeRun?.agent
@@ -263,6 +269,10 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
         Dismiss
       </button>
     </div>
+  ) : setupPending ? (
+    <div className="flex-1 overflow-y-auto">
+      <AgentSetupNotice setupState={d.setupState} />
+    </div>
   ) : (
     <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-theme-text-tertiary">
       Select an investigation, or open a resource and click Diagnose.
@@ -362,7 +372,7 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
           only appears when expanded; keys keep the detail node identity-stable
           as it comes and goes. */}
       <div className="flex min-h-0 flex-1">
-        {showHistory && (
+        {showHistory && (!setupPending || d.runs.length > 0) && (
           <aside
             key="recent"
             className="w-72 shrink-0 overflow-y-auto border-r border-theme-border px-3 py-3"
@@ -381,12 +391,15 @@ export function DiagnoseSurface({ topInset = 0 }: { topInset?: number }) {
             key="main"
             className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-3"
           >
-            <RecentList
-              agentLabel={d.agentLabel}
-              runs={d.runs}
-              onSelect={d.openRun}
-              historyDegraded={d.historyDegraded}
-            />
+            {setupPending && <AgentSetupNotice setupState={d.setupState} />}
+            {(!setupPending || d.runs.length > 0) && (
+              <RecentList
+                agentLabel={d.agentLabel}
+                runs={d.runs}
+                onSelect={d.openRun}
+                historyDegraded={d.historyDegraded}
+              />
+            )}
           </div>
         ) : (
           <div key="main" className="flex min-h-0 min-w-0 flex-1 flex-col">

package/src/components/diagnose/LocalDiagnoseAction.tsx

@@ -1,5 +1,9 @@
 import { Loader2, Sparkles } from "lucide-react";
-import { useDiagnose, useDiagnoseLayout, runTargetKey } from "./DiagnoseContext";
+import {
+  useDiagnose,
+  useDiagnoseLayout,
+  runTargetKey,
+} from "./DiagnoseContext";
 import { Tooltip } from "../ui/Tooltip";
 import type { RenderDiagnoseAction } from "../../context/DiagnoseCustomization";
 
@@ -27,31 +31,41 @@ function DiagnoseResourceButton({
 }) {
   const d = useDiagnose();
   const { runningKeys } = useDiagnoseLayout();
-  if (!d.available) return null;
+  // Hidden only when the feature can't work here (auth/cloud/--no-mcp). When it's
+  // supported but no agent is installed we KEEP the button — clicking opens the
+  // setup notice so the feature is discoverable rather than silently absent.
+  if (d.setupState === "off") return null;
+  const ready = d.available;
   const problem = health === "problem";
-  const running = runningKeys.has(runTargetKey(kind, namespace, name));
-  const tooltip = running
-    ? `${d.agentLabel} is investigating this resource — click to watch it live.`
-    : d.hosted
-      ? problem
-        ? `Diagnose with ${d.agentLabel} — reads this resource's spec, events & logs to find the root cause.`
-        : `Ask ${d.agentLabel} about this resource — reads its spec, events & logs.`
-      : problem
-        ? `Diagnose with your own ${d.agentLabel} — runs locally, reads this resource's spec, events & logs to find the root cause.`
-        : `Ask your own ${d.agentLabel} about this resource — runs locally, reads its spec, events & logs.`;
+  const running = ready && runningKeys.has(runTargetKey(kind, namespace, name));
+  const tooltip = !ready
+    ? "Set up AI diagnosis to investigate this — runs your own agent locally."
+    : running
+      ? `${d.agentLabel} is investigating this resource — click to watch it live.`
+      : d.hosted
+        ? problem
+          ? `Diagnose with ${d.agentLabel} — reads this resource's spec, events & logs to find the root cause.`
+          : `Ask ${d.agentLabel} about this resource — reads its spec, events & logs.`
+        : problem
+          ? `Diagnose with your own ${d.agentLabel} — runs locally, reads this resource's spec, events & logs to find the root cause.`
+          : `Ask your own ${d.agentLabel} about this resource — runs locally, reads its spec, events & logs.`;
   // While an investigation is live, the button advertises it (and clicking focuses
   // the existing run rather than starting a new one — openInvestigation dedups).
   const showLabel = problem || running;
   return (
     <Tooltip content={tooltip} position="bottom">
       <button
-        onClick={() => d.openInvestigation({ kind, namespace, name })}
+        onClick={() =>
+          ready ? d.openInvestigation({ kind, namespace, name }) : d.openHome()
+        }
         aria-label={
-          running
-            ? "Investigation running — click to view"
-            : problem
-              ? "Diagnose with AI"
-              : "Ask AI about this resource"
+          !ready
+            ? "Set up AI diagnosis"
+            : running
+              ? "Investigation running — click to view"
+              : problem
+                ? "Diagnose with AI"
+                : "Ask AI about this resource"
         }
         className={
           showLabel
@@ -97,20 +111,26 @@ export function IssueDiagnoseButton({
   name: string;
 }) {
   const d = useDiagnose();
-  if (!d.available) return null;
+  if (d.setupState === "off") return null;
+  const ready = d.available;
   return (
     <Tooltip
       content={
-        d.hosted
-          ? `Sends this resource's context to ${d.agentLabel} to find the root cause`
-          : `Runs ${d.agentLabel} on your machine and sends it this resource's context to find the root cause`
+        d.setupState === "needs-restart"
+          ? "Restart Radar to enable AI diagnosis — a supported agent is installed"
+          : !ready
+            ? "Set up AI diagnosis — install a local agent to investigate"
+            : d.hosted
+              ? `Sends this resource's context to ${d.agentLabel} to find the root cause`
+              : `Runs ${d.agentLabel} on your machine and sends it this resource's context to find the root cause`
       }
       position="left"
     >
       <button
         onClick={(e) => {
           e.stopPropagation();
-          d.openInvestigation({ kind, namespace, name });
+          if (ready) d.openInvestigation({ kind, namespace, name });
+          else d.openHome();
         }}
         className="flex shrink-0 items-center gap-1 rounded-md border border-theme-border px-2 py-1 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
       >
@@ -126,7 +146,8 @@ export function IssueDiagnoseButton({
 export function GlobalDiagnoseButton() {
   const d = useDiagnose();
   const { runningKeys } = useDiagnoseLayout();
-  if (!d.available) return null;
+  if (d.setupState === "off") return null;
+  const ready = d.available;
   const runningCount = runningKeys.size;
   const agentSuffix = d.hosted
     ? `powered by ${d.agentLabel}`
@@ -134,9 +155,11 @@ export function GlobalDiagnoseButton() {
   return (
     <Tooltip
       content={
-        runningCount > 0
-          ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — ${agentSuffix}`
-          : `AI investigations — ${agentSuffix}`
+        !ready
+          ? "Set up AI investigations — runs your own agent locally"
+          : runningCount > 0
+            ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — ${agentSuffix}`
+            : `AI investigations — ${agentSuffix}`
       }
       position="bottom"
     >

package/src/components/diagnose/agentCatalog.ts

@@ -0,0 +1,30 @@
+// Install metadata for the agent CLIs Radar can drive. Used by the setup notice
+// shown when AI diagnosis is eligible but no agent is installed. Names match the
+// backend's supported set (see internal/ai/detect.go knownAgents + isSupportedAgent).
+export interface AgentInstall {
+  name: string; // stable id, matches AgentInfo.name
+  label: string; // display name
+  install: string; // one-line install command
+  docs: string; // canonical setup/docs URL
+}
+
+export const SUPPORTED_AGENTS: AgentInstall[] = [
+  {
+    name: "claude",
+    label: "Claude Code",
+    install: "npm install -g @anthropic-ai/claude-code",
+    docs: "https://docs.claude.com/en/docs/claude-code/setup",
+  },
+  {
+    name: "codex",
+    label: "Codex",
+    install: "npm install -g @openai/codex",
+    docs: "https://github.com/openai/codex",
+  },
+  {
+    name: "cursor-agent",
+    label: "Cursor CLI",
+    install: "curl https://cursor.com/install -fsS | bash",
+    docs: "https://docs.cursor.com/en/cli/overview",
+  },
+];

package/src/components/home/CapacityCard.test.tsx

@@ -0,0 +1,150 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderToString } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type {
+  CapacityOverviewResponse,
+  CapacityResponseMeta,
+  CapacitySourceCoverage,
+} from "@skyhook-io/k8s-ui";
+import { CapacityCard } from "./CapacityCard";
+
+let mockKarpenterState = "available";
+vi.mock("../../contexts/CapabilitiesContext", () => ({
+  useCapabilitiesContext: () => ({ karpenter: { state: mockKarpenterState } }),
+}));
+beforeEach(() => {
+  mockKarpenterState = "available";
+});
+
+const generatedAt = "2026-07-13T08:00:00Z";
+
+function sourceCoverage(
+  scope: CapacitySourceCoverage["scope"] = "cluster",
+): CapacitySourceCoverage {
+  return {
+    status: "available",
+    scope,
+    observedAt: generatedAt,
+    impactFields: [],
+  };
+}
+
+const meta: CapacityResponseMeta = {
+  schemaVersion: "v1alpha1",
+  generatedAt,
+  clusterContext: { contextName: "radar-test-eks" },
+  provider: {
+    type: "karpenter",
+    controllerMode: "self_managed",
+    apiVersionsByKind: {},
+    nodeClassKinds: [],
+    features: {},
+  },
+  coverage: { nodes: sourceCoverage(), pods: sourceCoverage() },
+};
+
+function overview(
+  summary: Partial<CapacityOverviewResponse["summary"]> = {},
+  coverage: CapacityResponseMeta["coverage"] = meta.coverage,
+): CapacityOverviewResponse {
+  return {
+    ...meta,
+    coverage,
+    state: "available",
+    summary: {
+      actions: [],
+      poolCount: 2,
+      claimCount: 4,
+      nodeCount: 6,
+      pendingPodCount: 3,
+      managers: [],
+      ...summary,
+    },
+    pools: [],
+    poolsTruncated: false,
+    groups: [],
+    orphanAutoscalerGroups: [],
+    orphanAutoscalerGroupsMeta: { total: 0, returned: 0, truncated: false },
+  };
+}
+
+function renderCard(data: CapacityOverviewResponse): string {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, retryOnMount: false } },
+  });
+  client.setQueryData(["capacity", "overview"], data);
+  return renderToString(
+    <QueryClientProvider client={client}>
+      <CapacityCard onNavigate={() => {}} />
+    </QueryClientProvider>,
+  );
+}
+
+describe("CapacityCard", () => {
+  it("shows exact counts under cluster-wide coverage", () => {
+    const html = renderCard(overview());
+    expect(html).toContain(">3<");
+    expect(html).not.toContain("≥");
+  });
+
+  it("hedges the pending-pod count when pod coverage is a lower bound", () => {
+    const html = renderCard(
+      overview(
+        {},
+        {
+          ...meta.coverage,
+          pods: sourceCoverage("all_authorized_namespaces"),
+        },
+      ),
+    );
+    expect(html).toContain("≥3");
+  });
+
+  it("renders the softened truth for a denied Karpenter instead of vanishing", () => {
+    mockKarpenterState = "denied";
+    const html = renderCard({
+      ...overview({ poolCount: undefined, claimCount: undefined }),
+      state: "denied",
+    });
+    expect(html).toContain("Karpenter view unavailable");
+    expect(html).not.toContain("No active signals");
+    expect(html).toContain("NodePools");
+    expect(html).toContain("—");
+    expect(html).toContain(">6<");
+  });
+
+  it("renders a cluster card on a Karpenter-less cluster with managers", () => {
+    mockKarpenterState = "not_detected";
+    const html = renderCard({
+      ...overview({
+        poolCount: undefined,
+        claimCount: undefined,
+        managers: [
+          { manager: "gke_autoscaler", groupCount: 2, status: "healthy" },
+        ],
+      }),
+      state: "not_detected",
+    });
+    expect(html).toContain("Node groups");
+    expect(html).toContain("Managers");
+    expect(html).not.toContain("NodePools");
+    expect(html).not.toContain("NodeClaims");
+  });
+
+  it("keeps a quiet Home on a bare cluster with no capacity story", () => {
+    mockKarpenterState = "not_detected";
+    const html = renderCard({
+      ...overview({ poolCount: undefined, claimCount: undefined, managers: [] }),
+      state: "not_detected",
+    });
+    expect(html).toBe("");
+  });
+
+  it("renders an omitted NodePool count as unavailable, never zero", () => {
+    // The server omits poolCount when NodePools were not observed.
+    const html = renderCard(overview({ poolCount: undefined }));
+    expect(html).toContain("NodePools");
+    expect(html).toContain("—");
+    expect(html).not.toContain(">0<");
+  });
+});