Collapsible row

Sections that fold, with the header carrying enough state that folding costs nothing. A collapsed row hiding a firing alert is the failure case, so the count belongs on the header.

npx shadcn@latest add collapsible card
npm i lucide-react

Tokens this needs: --card, --card-foreground, --muted-foreground, --border, --status-critical
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// CollapsibleRows.tsx
────────────────────────────────────────────────────────────────────────

import { useState, type ReactNode } from "react";
import { ChevronRight } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { cn } from "@/lib/utils";

export type Section = {
  id: string;
  /** The whole design. "Advanced" hides its contents from everyone forever;
   *  "Disk and filesystem" is a promise specific enough to spend a click on. */
  title: string;
  panels: ReactNode[];
  /** Alerts firing inside, by name. A folded row still says so, because a
   *  page that looks healthy with the unhealthy part folded away is worse
   *  than a long page. */
  firing?: string[];
};

type Props = {
  sections: Section[];
  /** Which rows start open. The open set should answer "is it okay"; the
   *  folded rows answer why. */
  defaultOpen: string[];
  /** Remember it per viewer, and carry it in a shared link. */
  onToggle?: (id: string, open: boolean) => void;
};

export function CollapsibleRows({ sections, defaultOpen, onToggle }: Props) {
  const [open, setOpen] = useState(() => new Set(defaultOpen));
  const toggle = (id: string, next: boolean) => {
    const s = new Set(open);
    next ? s.add(id) : s.delete(id);
    setOpen(s);
    onToggle?.(id, next);
  };

  return (
    <div className="flex flex-col gap-2">
      {sections.map((s) => {
        const isOpen = open.has(s.id);
        const firing = s.firing ?? [];
        return (
          <Collapsible key={s.id} open={isOpen} onOpenChange={(o) => toggle(s.id, o)} className="rounded-lg border bg-card">
            <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-card-foreground">
              <ChevronRight className={cn("size-3.5 shrink-0 text-muted-foreground transition-transform", isOpen && "rotate-90")} />
              <span className="truncate">{s.title}</span>
              <span className="ml-auto flex shrink-0 items-center gap-2">
                {firing.length > 0 && (
                  <span
                    className="inline-flex items-center gap-1.5 rounded-full bg-status-critical/10 px-2 py-0.5 text-[11px] text-status-critical"
                    title={firing.join(", ")}
                  >
                    <span className="size-1.5 rounded-full bg-status-critical" aria-hidden="true" />
                    {firing.length} firing
                  </span>
                )}
                {/* The count is what is behind the click, so it shows only
                    while the row is folded. */}
                {!isOpen && (
                  <span className="text-[11px] tabular-nums text-muted-foreground">{s.panels.length} panels</span>
                )}
              </span>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="grid grid-cols-3 gap-2 border-t p-3">{s.panels}</div>
            </CollapsibleContent>
          </Collapsible>
        );
      })}
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { Card } from "@/components/ui/card";
import { KpiTile } from "../kpi-tile/KpiTile";
import { CollapsibleRows, type Section } from "./CollapsibleRows";

/**
 * Three sections. Service health is open and answers "is it okay". Disk is
 * folded with its count. JVM is folded too, and two alerts inside it show on
 * the header so folding it cost nothing.
 */
const NOW = new Date("2026-09-15T09:00:00Z");
const ago = (s: number) => new Date(NOW.getTime() - s * 1000);

const Stat = ({ label, value }: { label: string; value: string }) => (
  <Card className="p-3 shadow-none">
    <p className="text-xs text-muted-foreground">{label}</p>
    <p className="mt-1 text-lg font-semibold tabular-nums">{value}</p>
  </Card>
);

const DISK: [string, string][] = [
  ["Root used", "61%"], ["/var used", "78%"], ["/data used", "43%"], ["Inodes root", "12%"],
  ["Read IOPS", "1.2k"], ["Write IOPS", "640"], ["Read latency", "3.1 ms"], ["Write latency", "5.4 ms"],
  ["Queue depth", "2"], ["Throughput", "210 MB/s"], ["I/O errors", "0"], ["Days until full", "41"],
];
const JVM: [string, string][] = [
  ["Heap used", "92%"], ["GC pause p99", "1.8 s"], ["Old gen", "88%"],
  ["Threads", "412"], ["Young GC / min", "14"], ["Full GC / hr", "3"],
];

const SECTIONS: Section[] = [
  {
    id: "health",
    title: "Service health",
    panels: [
      <KpiTile key="ok" label="Checkout success" value="99.4%" delta={0.3} window="Last 24 hours" lastArrival={ago(40)} expectedEveryMs={60_000} now={NOW} />,
      <KpiTile key="p95" label="p95 latency" value="412 ms" delta={-2.1} polarity="lower-is-better" window="Last 24 hours" lastArrival={ago(40)} expectedEveryMs={60_000} now={NOW} />,
      <KpiTile key="budget" label="Error budget left" value="71%" delta={-4.0} window="This quarter" lastArrival={ago(300)} expectedEveryMs={60_000} now={NOW} />,
    ],
  },
  { id: "disk", title: "Disk and filesystem", panels: DISK.map(([l, v]) => <Stat key={l} label={l} value={v} />) },
  {
    id: "jvm",
    title: "JVM and garbage collection",
    firing: ["Heap used above 90%", "GC pause p99 above 1 s"],
    panels: JVM.map(([l, v]) => <Stat key={l} label={l} value={v} />),
  },
];

export default function Demo() {
  return (
    <div className="max-w-[560px]">
      <CollapsibleRows sections={SECTIONS} defaultOpen={["health"]} />
    </div>
  );
}