@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/src/components/charts/AreaChart.tsx

@@ -5,6 +5,7 @@ import { formatMetricValue, formatTimestamp } from './format'
 import { layoutAnnotations } from './annotations'
 import { chartLayout, integerAxisTop, isCountUnit, yAxisValues } from './axis'
 import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
+import { nearestSample } from './nearestSample'
 
 // Below this rendered width the annotation label pills would cover most of the
 // plot once the 1000-unit viewBox is scaled down; the lines stay and the label
@@ -12,7 +13,7 @@ import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
 export const ANNOTATION_LABEL_MIN_WIDTH_PX = 420
 const ANNOTATION_HOVER_TOLERANCE = 8
 
-export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, layout = 'full' }: {
+export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full' }: {
   series: TimeSeries[]
   color: string
   fillColor: string
@@ -22,6 +23,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
   annotations?: ChartAnnotation[]
   /** X axis window in unix seconds. Defaults to the sample extent. */
   domain?: { start: number; end: number }
+  /** Expected positive sample interval; omitted evaluations break paths and cannot supply hover values. */
+  stepSeconds?: number
   /**
    * Display name per series, parallel to `series`. Pass it when the chart
    * shows a subset of a larger result so names stay distinguishable across
@@ -32,16 +35,18 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
    * 'full' is the fixed wide layout every existing caller gets. 'auto' switches
    * to the compact layout (two ticks per axis, larger text, taller plot) when
    * the rendered chart is narrower than ANNOTATION_LABEL_MIN_WIDTH_PX;
-   * 'compact' forces it.
+   * 'compact' forces it. 'dashboard' uses readable, medium-width axes and
+   * keeps text and plot height stable as its container resizes.
    */
-  layout?: 'full' | 'auto' | 'compact'
+  layout?: 'full' | 'auto' | 'compact' | 'dashboard'
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
   const [labelsFit, setLabelsFit] = useState(true)
+  const [renderedWidth, setRenderedWidth] = useState(0)
   const multiSeries = series.length > 1
-  const compact = layout === 'compact' || (layout === 'auto' && !labelsFit)
+  const compact = layout === 'compact' || (layout === 'auto' && !labelsFit) || (layout === 'dashboard' && renderedWidth > 0 && renderedWidth < 300)
   const countAxis = isCountUnit(unit)
 
   const chartData = useMemo(() => {
@@ -91,14 +96,14 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
   // Layout constants. marginLeft sized for the widest expected Y-tick label
   // ("422.4 MiB" etc.) — narrow grid panels squeeze the X axis so labels
   // need extra viewBox-space to survive the down-scale.
-  const base = chartLayout(compact)
+  const base = chartLayout(compact, layout === 'dashboard', renderedWidth)
   const { width, height, marginRight, marginTop, marginBottom, fontSize, yIntervals, xIntervals } = base
   const yValues = chartData ? yAxisValues(chartData.yMin, chartData.yMax, yIntervals, countAxis) : []
   const yLabels = yValues.map(val => formatMetricValue(val, unit))
   // The compact layout's larger text makes a label like "161.5 MiB" wider
   // than the fixed margin, and SVG clips it; grow the margin to the widest
   // label there. The full layout keeps its fixed margin for existing callers.
-  const marginLeft = compact
+  const marginLeft = compact || layout === 'dashboard'
     ? Math.max(base.marginLeft, Math.ceil(Math.max(0, ...yLabels.map(label => label.length)) * fontSize * 0.62 + 12))
     : base.marginLeft
   const plotWidth = width - marginLeft - marginRight
@@ -128,10 +133,10 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       const ts = minTs + ((maxTs - minTs) / xIntervals) * i
       // In the compact layout the two labels sit at the plot edges and would
       // otherwise spill past the viewBox.
-      const anchor: 'start' | 'middle' | 'end' = !compact ? 'middle' : i === 0 ? 'start' : 'end'
+      const anchor: 'start' | 'middle' | 'end' = !(compact || layout === 'dashboard') ? 'middle' : i === 0 ? 'start' : i === xIntervals ? 'end' : 'middle'
       return { ts, x: toX(ts), label: formatTimestamp(ts), anchor }
     })
-  }, [chartData, xIntervals, compact])
+  }, [chartData, xIntervals, compact, layout, marginLeft, plotWidth])
 
   const paths = useMemo(() => {
     if (!chartData) return []
@@ -155,6 +160,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       // rather than bridging across missing data or dropping to y=0. Each run
       // becomes its own path segment; a run needs >=2 points to render a line.
       let run: { x: number; y: number }[] = []
+      let previousTimestamp: number | undefined
       let runIdx = 0
       const flush = () => {
         if (run.length >= 2) {
@@ -177,15 +183,18 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       for (const dp of s.dataPoints) {
         if (dp.value == null) {
           flush()
+          previousTimestamp = undefined
           continue
         }
+        if (stepSeconds !== undefined && previousTimestamp !== undefined && dp.timestamp - previousTimestamp > stepSeconds * 1.5) flush()
         run.push({ x: toX(dp.timestamp), y: toY(dp.value) })
+        previousTimestamp = dp.timestamp
       }
       flush()
     })
 
     return segments
-  }, [chartData])
+  }, [chartData, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, fillColor, stepSeconds])
 
   const placedAnnotations = useMemo(() => {
     if (!chartData || !annotations?.length) return []
@@ -195,12 +204,16 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       { minTs: chartData.minTs, maxTs: chartData.maxTs },
       { left: marginLeft, right: width - marginRight },
     )
-  }, [chartData, annotations])
+  }, [chartData, annotations, width, marginLeft, marginRight])
 
   useEffect(() => {
     const el = wrapperRef.current
-    if (!el || (placedAnnotations.length === 0 && layout !== 'auto') || typeof ResizeObserver === 'undefined') return
-    const update = () => setLabelsFit(el.getBoundingClientRect().width >= ANNOTATION_LABEL_MIN_WIDTH_PX)
+    if (!el || (placedAnnotations.length === 0 && layout !== 'auto' && layout !== 'dashboard') || typeof ResizeObserver === 'undefined') return
+    const update = () => {
+      const measuredWidth = el.getBoundingClientRect().width
+      setLabelsFit(measuredWidth >= ANNOTATION_LABEL_MIN_WIDTH_PX)
+      if (layout === 'dashboard') setRenderedWidth(measuredWidth)
+    }
     update()
     const observer = new ResizeObserver(update)
     observer.observe(el)
@@ -236,18 +249,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       if (ts < seriesMin - tolerance || ts > seriesMax + tolerance) {
         return null
       }
-      // Only snap to finite points — a gap (undefined value) has no value to
-      // show and would render NaN in the tooltip / a dot at y=NaN.
-      let closest: { timestamp: number; value: number } | null = null
-      let closestDist = Infinity
-      for (const dp of dps) {
-        if (dp.value == null) continue
-        const dist = Math.abs(dp.timestamp - ts)
-        if (dist < closestDist) {
-          closestDist = dist
-          closest = { timestamp: dp.timestamp, value: dp.value }
-        }
-      }
+      const closest = nearestSample(dps, ts, stepSeconds)
       if (!closest) return null
       return {
         label: shortLabels[vi],
@@ -263,7 +265,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
     )
 
     return { ts, x: clampedX, points, nearbyAnnotations }
-  }, [hoverX, chartData, placedAnnotations, seriesLabels])
+  }, [hoverX, chartData, placedAnnotations, seriesLabels, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, stepSeconds])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current
@@ -286,6 +288,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
         ref={svgRef}
         viewBox={`0 0 ${width} ${height}`}
         className="w-full h-full"
+        style={layout === 'dashboard' ? { height: 240 } : undefined}
         preserveAspectRatio="xMidYMid meet"
         data-chart-layout={compact ? 'compact' : 'full'}
       >

package/src/components/charts/PrometheusChartsView.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { clsx } from "clsx";
 import { BarChart3, Wifi, WifiOff, Loader2 } from "lucide-react";
+import { Collapse, CollapseChevron, useDisclosure } from "../ui/Collapse";
 import { AreaChart } from "./AreaChart";
 import { PaneLoader } from "../ui/PaneLoader";
 import { MetricsSummary } from "./MetricsSummary";
@@ -157,6 +159,8 @@ export interface PrometheusChartsViewProps {
   statusError?: string;
   onConnect: () => void;
   connecting: boolean;
+  /** Discovery is running server-side (not triggered by this view); show progress, not the CTA. */
+  discovering?: boolean;
   // Selection (controlled by host)
   category: PrometheusMetricCategory;
   onCategoryChange: (c: PrometheusMetricCategory) => void;
@@ -177,6 +181,7 @@ export function PrometheusChartsView({
   statusError,
   onConnect,
   connecting,
+  discovering = false,
   category,
   onCategoryChange,
   range,
@@ -208,6 +213,15 @@ export function PrometheusChartsView({
     if (!metricsLoading && !metricsError && !series.length) return null;
   }
 
+  if (!isConnected && discovering) {
+    return (
+      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
+        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+        Discovering Prometheus…
+      </div>
+    );
+  }
+
   if (!isConnected) {
     return (
       <div className="flex flex-col items-center justify-center gap-4 py-12">
@@ -327,19 +341,36 @@ export function PrometheusChartsView({
                 {metrics.hint}
               </p>
             )}
-            {metrics?.query && (
-              <details className="mt-3 w-full max-w-lg text-left">
-                <summary className="cursor-pointer text-xs text-theme-text-quaternary hover:text-theme-text-tertiary">
-                  Diagnostics: show PromQL query
-                </summary>
-                <div className="mt-2 break-all rounded border border-theme-border bg-theme-base p-2 font-mono text-xs text-theme-text-secondary">
-                  {metrics.query}
-                </div>
-              </details>
-            )}
+            {metrics?.query && <QueryDiagnostics query={metrics.query} />}
           </div>
         )}
       </div>
     </div>
   );
 }
+
+// The PromQL behind an empty chart, for the reader who wants to run it
+// themselves. Lives on the shared disclosure so it opens like every other
+// fold in the app instead of the browser's default <details> jump.
+function QueryDiagnostics({ query }: { query: string }) {
+  const [open, setOpen] = useState(false);
+  const { panelId, buttonProps } = useDisclosure(open);
+  return (
+    <div className="mt-3 w-full max-w-lg text-left">
+      <button
+        {...buttonProps}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-1 text-xs text-theme-text-quaternary hover:text-theme-text-tertiary"
+      >
+        <CollapseChevron open={open} className="h-3 w-3" />
+        Diagnostics: show PromQL query
+      </button>
+      <Collapse open={open} id={panelId}>
+        <div className="mt-2 break-all rounded border border-theme-border bg-theme-base p-2 font-mono text-xs text-theme-text-secondary">
+          {query}
+        </div>
+      </Collapse>
+    </div>
+  );
+}

package/src/components/charts/axis.test.ts

@@ -29,4 +29,20 @@ describe('integer axes', () => {
     expect(compact.fontSize).toBeGreaterThan(full.fontSize)
     expect(compact.height / compact.width).toBeGreaterThan(full.height / full.width)
   })
+
+  it('keeps dashboard axes readable without changing existing layouts', () => {
+    const dashboard = chartLayout(false, true)
+    expect([dashboard.width, dashboard.height, dashboard.fontSize]).toEqual([600, 240, 14])
+    expect(chartLayout(true, true)).toEqual(chartLayout(true))
+    expect(chartLayout(false).width).toBe(1000)
+  })
+  it('fits dashboard plots to their container without scaling text or height', () => {
+    for (const width of [280, 380, 550, 1050]) {
+      const layout = chartLayout(width < 420, true, width)
+      expect(layout.width).toBe(width)
+      expect(layout.height).toBe(240)
+      expect(layout.fontSize).toBe(12)
+    }
+    expect(chartLayout(false, false, 500)).toEqual(chartLayout(false))
+  })
 })

package/src/components/charts/axis.ts

@@ -18,7 +18,9 @@ export interface ChartLayout {
 // The compact layout trades tick density for legible text: a 400-unit
 // viewBox scaled into a ~280px pane keeps 14-unit text near 10px, where the
 // full layout's 11-unit text in a 1000-unit viewBox would be 3px.
-export function chartLayout(compact: boolean): ChartLayout {
+export function chartLayout(compact: boolean, dashboard = false, renderedWidth = 0): ChartLayout {
+  if (dashboard && renderedWidth > 0) return { width: renderedWidth, height: 240, marginLeft: 60, marginRight: 14, marginTop: 12, marginBottom: 28, fontSize: 12, yIntervals: compact ? 1 : 2, xIntervals: compact ? 1 : renderedWidth >= 760 ? 4 : 2 }
+  if (dashboard && !compact) return { width: 600, height: 240, marginLeft: 90, marginRight: 24, marginTop: 12, marginBottom: 28, fontSize: 14, yIntervals: 2, xIntervals: 2 }
   return compact
     ? { width: 400, height: 260, marginLeft: 60, marginRight: 14, marginTop: 12, marginBottom: 28, fontSize: 14, yIntervals: 1, xIntervals: 1 }
     : { width: 1000, height: 300, marginLeft: 84, marginRight: 40, marginTop: 10, marginBottom: 30, fontSize: 11, yIntervals: 4, xIntervals: 6 }

package/src/components/charts/format.ts

@@ -7,6 +7,10 @@ export function formatMetricValue(value: number, unit: string): string {
   if (value < 0) return `-${formatMetricValue(-value, unit)}`
 
   switch (unit) {
+    case 'percent':
+      return `${value.toFixed(value < 1 ? 2 : 1)}%`
+    case 'requests/s':
+      return `${value.toFixed(value < 1 ? 3 : 1)} req/s`
     case 'cores': {
       if (value < 0.0001) return '< 0.1m'
       if (value < 0.001) return `${(value * 1000).toFixed(1)}m`

package/src/components/charts/nearestSample.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { nearestSample } from './nearestSample'
+
+const points = [
+  { timestamp: 0, value: 0 },
+  { timestamp: 15, value: 2 },
+  { timestamp: 105, value: 3 },
+  { timestamp: 120, value: 4 },
+]
+
+describe('nearestSample', () => {
+  it('withholds hover values inside missing evaluations, including a single missing slot', () => {
+    expect(nearestSample(points, 60, 15)).toBeNull()
+    expect(nearestSample([{ timestamp: 0, value: 1 }, { timestamp: 30, value: 2 }], 15, 15)).toBeNull()
+    expect(nearestSample([...points, { timestamp: 135, value: null }], 135, 15)).toBeNull()
+  })
+
+  it('keeps measured zero and only snaps within half an evaluation interval', () => {
+    expect(nearestSample(points, 0, 15)).toEqual(points[0])
+    expect(nearestSample(points, 110, 15)).toEqual(points[2])
+    expect(nearestSample(points, -8, 15)).toBeNull()
+    expect(nearestSample(points, 128, 15)).toBeNull()
+  })
+
+  it('preserves unrestricted nearest-finite behavior for generic charts', () => {
+    expect(nearestSample(points, 60)).toEqual(points[1])
+    expect(nearestSample([...points, { timestamp: 135, value: null }], 135)).toEqual(points[3])
+    expect(nearestSample([], 0)).toBeNull()
+    expect(nearestSample([{ timestamp: 0, value: null }], 0)).toBeNull()
+  })
+})

package/src/components/charts/nearestSample.ts

@@ -0,0 +1,15 @@
+import type { TimeSeriesPoint } from './types'
+
+export function nearestSample(points: TimeSeriesPoint[], timestamp: number, stepSeconds?: number): { timestamp: number; value: number } | null {
+  let closest: { timestamp: number; value: number } | null = null
+  let distance = Infinity
+  for (const point of points) {
+    if (point.value == null) continue
+    const candidateDistance = Math.abs(point.timestamp - timestamp)
+    if (candidateDistance < distance) {
+      distance = candidateDistance
+      closest = { timestamp: point.timestamp, value: point.value }
+    }
+  }
+  return stepSeconds !== undefined && distance > stepSeconds / 2 ? null : closest
+}

package/src/components/checks/ChecksView.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
+import { useEffect, useId, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { AlertCircle, AlertOctagon, AlertTriangle, ChevronDown, ChevronRight, ExternalLink, EyeOff, Info, Layers, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
-import { CardBody, CardSection, ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip, Input, NEUTRAL_CHIP_CLASS, renderProse } from '../ui'
+import { AlertCircle, AlertOctagon, AlertTriangle, ChevronDown, ExternalLink, EyeOff, Info, Layers, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
+import { AlertBanner, CardBody, CardSection, ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip, Input, NEUTRAL_CHIP_CLASS, renderProse } from '../ui'
+import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../ui/Collapse'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import type { CheckMeta, CheckReference } from '../audit'
 import { CHECK_SEVERITIES, CHECK_SEVERITY_RANK, type Check, type CheckSeverity, type EffectiveCheckFinding, type CheckResourceRef } from './types'
@@ -14,6 +15,8 @@ import {
   SEVERITY_SOLID_CLASS,
   SEVERITY_TEXT_CLASS,
 } from './severity'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 const CATEGORIES: readonly string[] = ['Security', 'Reliability', 'Efficiency']
 
@@ -56,6 +59,9 @@ export interface ChecksViewProps {
   catalog: Record<string, CheckMeta>
   /** True when at least one source returned audit data. */
   anyData: boolean
+  /** Evaluations and unavailable inputs for the scope supplied by the host. */
+  evaluated?: number
+  missingInputs?: string[]
   /** Deep-link href for a resource (host routing). Omit for non-link text. */
   resourceHref?: (ref: CheckResourceRef) => string
   /** In-app resource navigation (client-side). Takes precedence over href. */
@@ -106,7 +112,7 @@ const CHECKS_FILTER_SCHEMA = defineFilterSchema({
   q: { param: 'q', type: 'text' },
 })
 
-export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
+export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs = [], resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
   // Severity / category / framework / search live in the URL (shareable,
   // bookmarkable audit links) via the shared filter-state contract. The cluster
   // facet is deliberately NOT here — it's a host-controlled seam (see
@@ -345,6 +351,14 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
         </div>
       </div>
 
+      {missingInputs.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Some checks could not run"
+          message={<>Findings cover only available inputs. Unavailable inputs: {missingInputs.join(', ')}.</>}
+        />
+      )}
+
       {fleetChecks.length === 0 ? (
         hasFilters ? (
           <EmptyState
@@ -362,6 +376,13 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
               </button>
             }
           />
+        ) : missingInputs.length > 0 ? (
+          <EmptyState
+            headline="No findings in the available data"
+            body="The audit is incomplete. This does not mean all checks passed."
+          />
+        ) : evaluated === 0 ? (
+          <EmptyState headline="No resources evaluated" body="No resources were evaluated with the current scope and check settings." />
         ) : anyData ? (
           <EmptyState
             tone="healthy"
@@ -519,6 +540,7 @@ export function CheckCardShell({
   const Container = as
   const sev = normalizeCheckSeverity(severity)
   const SeverityIcon = CHECK_SEVERITY_ICON[sev]
+  const { panelId, buttonProps } = useDisclosure(open)
   return (
     <Container
       className={[
@@ -539,9 +561,9 @@ export function CheckCardShell({
           open/closed. Collapsed: neutral row + rail. Expanded: severity-tinted
           band + solid pill — the tint is a focus signal, not per-row alarm. */}
       <div
+        {...buttonProps}
         role="button"
         tabIndex={0}
-        aria-expanded={open}
         onClick={onToggle}
         onKeyDown={(e) => {
           if (e.target !== e.currentTarget) return
@@ -567,18 +589,15 @@ export function CheckCardShell({
           {SEVERITY_LABEL[sev]}
         </span>
         {renderActions?.()}
-        <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <CollapseChevron open={open} className="h-4 w-4" />
       </div>
 
-      {/* Kept mounted (not `open &&`) so the grid-rows transition animates the
-          collapse too, matching IssueRow; inert when closed so SR + tab skip
-          the clipped content. Body sits on the card surface (not a recessed grey
+      {/* Kept mounted (Collapse's default, not `open &&`) so the collapse
+          animates too. Body sits on the card surface (not a recessed grey
           panel) so its text keeps enough contrast. */}
-      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
-        <div className="overflow-hidden" inert={!open || undefined}>
-          <div className="flex flex-col divide-y divide-theme-border/70 border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">{children}</div>
-        </div>
-      </div>
+      <Collapse open={open} id={panelId}>
+        <div className="flex flex-col divide-y divide-theme-border/70 border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">{children}</div>
+      </Collapse>
     </Container>
   )
 }
@@ -613,6 +632,9 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
   const [showAllClusters, setShowAllClusters] = useState(false)
   const shown = showAllClusters ? groups : groups.slice(0, clusterCap)
   const hiddenClusters = groups.length - shown.length
+  // Group rows are mapped inline, so they can't each call useDisclosure; one
+  // generated prefix plus the group id keeps aria-controls unique.
+  const panelBase = useId()
 
   return (
     <section className="flex flex-col gap-1.5">
@@ -625,6 +647,7 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
               <button
                 type="button"
                 aria-expanded={isOpen}
+                aria-controls={disclosurePanelId(panelBase, group.id)}
                 onClick={() =>
                   setOpenClusters((prev) => {
                     const next = new Set(prev)
@@ -635,7 +658,7 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
                 }
                 className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors hover:bg-theme-hover/50"
               >
-                <ChevronDown className={`h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${isOpen ? '' : '-rotate-90'}`} />
+                <CollapseChevron open={isOpen} className="h-3.5 w-3.5" />
                 <span className="min-w-0 max-w-[260px] truncate text-sm font-medium text-theme-text-primary">{group.label}</span>
                 {group.environment && (
                   <span className="shrink-0 rounded bg-theme-elevated px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-secondary ring-1 ring-theme-border">
@@ -645,11 +668,9 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
                 <span className="flex-1" />
                 <span className="shrink-0 text-xs tabular-nums text-theme-text-secondary">{group.count}</span>
               </button>
-              <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}>
-                <div className="overflow-hidden" inert={!isOpen || undefined}>
-                  <div className="px-2.5 pb-2 pl-7">{renderGroupBody(group)}</div>
-                </div>
-              </div>
+              <Collapse open={isOpen} id={disclosurePanelId(panelBase, group.id)}>
+                <div className="px-2.5 pb-2 pl-7">{renderGroupBody(group)}</div>
+              </Collapse>
             </li>
           )
         })}
@@ -888,6 +909,10 @@ function ClusterFilter({
   onClear: () => void
 }) {
   const [menu, setMenu] = useState<{ top: number; left: number } | null>(null)
+  // `menu` is the logical open state; the placement outlives it so the exit
+  // transition plays where the menu was. Re-measured on the next open.
+  const placementRef = useRef<{ top: number; left: number } | null>(null)
+  const { shouldRender, isOpen } = useAnimatedUnmount(menu != null, overlayExitMs('menu'))
   const btnRef = useRef<HTMLButtonElement>(null)
   useEffect(() => {
     if (!menu) return
@@ -915,9 +940,13 @@ function ClusterFilter({
       return
     }
     const r = btnRef.current?.getBoundingClientRect()
-    if (r) setMenu({ top: r.bottom + 4, left: r.left })
+    if (r) {
+      placementRef.current = { top: r.bottom + 4, left: r.left }
+      setMenu(placementRef.current)
+    }
   }
   const active = selected.size > 0
+  const placement = menu ?? placementRef.current
 
   return (
     <>
@@ -935,14 +964,20 @@ function ClusterFilter({
         Clusters
         <ChevronDown className="h-3 w-3" />
       </button>
-      {menu &&
+      {shouldRender && placement &&
         createPortal(
           <div
             data-cluster-menu
             role="listbox"
             aria-multiselectable
-            className="fixed z-[60] max-h-80 w-64 overflow-auto rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl"
-            style={{ top: menu.top, left: menu.left }}
+            inert={!menu}
+            className={[
+              'fixed z-[60] max-h-80 w-64 origin-top-left overflow-auto rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+              TRANSITION_MENU,
+              isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+              !menu && 'pointer-events-none',
+            ].filter(Boolean).join(' ')}
+            style={{ top: placement.top, left: placement.left, ...overlayTransitionStyle(isOpen, 'menu') }}
           >
             {active && (
               <button
@@ -985,6 +1020,9 @@ function ClusterFilter({
 // it; position captured at open time, any scroll/resize closes it.
 function RowMenu({ items }: { items: { label: string; onClick: () => void }[] }) {
   const [menu, setMenu] = useState<{ top: number; right: number } | null>(null)
+  // See ClusterFilter: placement outlives the logical open state for the exit.
+  const placementRef = useRef<{ top: number; right: number } | null>(null)
+  const { shouldRender, isOpen } = useAnimatedUnmount(menu != null, overlayExitMs('menu'))
   const btnRef = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
@@ -1011,8 +1049,12 @@ function RowMenu({ items }: { items: { label: string; onClick: () => void }[] })
       return
     }
     const r = btnRef.current?.getBoundingClientRect()
-    if (r) setMenu({ top: r.bottom + 4, right: window.innerWidth - r.right })
+    if (r) {
+      placementRef.current = { top: r.bottom + 4, right: window.innerWidth - r.right }
+      setMenu(placementRef.current)
+    }
   }
+  const placement = menu ?? placementRef.current
 
   return (
     <>
@@ -1028,12 +1070,18 @@ function RowMenu({ items }: { items: { label: string; onClick: () => void }[] })
       >
         <MoreHorizontal className="h-4 w-4" />
       </button>
-      {menu &&
+      {shouldRender && placement &&
         createPortal(
           <div
             role="menu"
-            className="fixed z-[60] min-w-48 rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl"
-            style={{ top: menu.top, right: menu.right }}
+            inert={!menu}
+            className={[
+              'fixed z-[60] min-w-48 origin-top-right rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+              TRANSITION_MENU,
+              isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+              !menu && 'pointer-events-none',
+            ].filter(Boolean).join(' ')}
+            style={{ top: placement.top, right: placement.right, ...overlayTransitionStyle(isOpen, 'menu') }}
             onClick={(e) => e.stopPropagation()}
           >
             {items.map((it, i) => (