@skyhook-io/k8s-ui 1.14.6 → 1.14.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.6",
+  "version": "1.14.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/applications/ApplicationDetail.tsx

@@ -27,6 +27,12 @@ import argoCdLogo from "../../assets/gitops/argocd.png";
 import fluxLogo from "../../assets/gitops/flux.svg";
 import { StatusDot, mapHealthToTone } from "../ui/status-tone";
 import { Tooltip } from "../ui/Tooltip";
+import { useAnimatedUnmount } from "../../hooks/useAnimatedUnmount";
+import {
+  TRANSITION_MENU,
+  overlayExitMs,
+  overlayTransitionStyle,
+} from "../../utils/animation";
 import { EmptyState } from "../ui/EmptyState";
 import { ResourceRefBadge } from "../ui/drawer-components";
 import { TopologyGraph } from "../topology/TopologyGraph";
@@ -2884,6 +2890,10 @@ function ApplicationScopeSelector({
   onFocus: (owner: WorkloadFocus) => void;
 }) {
   const [open, setOpen] = useState(false);
+  const { shouldRender, isOpen } = useAnimatedUnmount(
+    open,
+    overlayExitMs("menu"),
+  );
   const [query, setQuery] = useState("");
   const rootRef = useDismissablePopover<HTMLDivElement>(open, setOpen);
   const selectedKey = selectedWorkload ? workloadKey(selectedWorkload) : null;
@@ -2944,10 +2954,19 @@ function ApplicationScopeSelector({
           aria-hidden
         />
       </button>
-      {open && (
+      {shouldRender && (
         <div
           role="listbox"
-          className="absolute left-0 top-full z-50 mt-1 w-[min(32rem,calc(100vw-2rem))] overflow-hidden rounded-md border border-theme-border bg-theme-surface shadow-theme-md"
+          inert={!open}
+          className={clsx(
+            "absolute left-0 top-full z-50 mt-1 w-[min(32rem,calc(100vw-2rem))] origin-top-left overflow-hidden rounded-md border border-theme-border bg-theme-surface shadow-theme-md",
+            TRANSITION_MENU,
+            isOpen
+              ? "opacity-100 translate-y-0 scale-100"
+              : "opacity-0 -translate-y-1 scale-[0.97]",
+            !open && "pointer-events-none",
+          )}
+          style={overlayTransitionStyle(isOpen, "menu")}
           onMouseLeave={() => onFocus(null)}
         >
           <div className="border-b border-theme-border p-1">
@@ -3371,6 +3390,10 @@ function EnvSwitcher({
   onSwitch?: (appKey: string) => void;
 }) {
   const [open, setOpen] = useState(false);
+  const { shouldRender, isOpen } = useAnimatedUnmount(
+    open,
+    overlayExitMs("menu"),
+  );
   const rootRef = useDismissablePopover<HTMLDivElement>(open, setOpen);
 
   const envInstances = useMemo(
@@ -3475,10 +3498,19 @@ function EnvSwitcher({
       </button>
       {evidenceChip}
       {lagChip}
-      {open && (
+      {shouldRender && (
         <div
           role="listbox"
-          className="absolute left-0 top-full z-50 mt-1 max-h-80 w-80 overflow-y-auto rounded-md border border-theme-border bg-theme-surface p-1 shadow-theme-md"
+          inert={!open}
+          className={clsx(
+            "absolute left-0 top-full z-50 mt-1 max-h-80 w-80 origin-top-left overflow-y-auto rounded-md border border-theme-border bg-theme-surface p-1 shadow-theme-md",
+            TRANSITION_MENU,
+            isOpen
+              ? "opacity-100 translate-y-0 scale-100"
+              : "opacity-0 -translate-y-1 scale-[0.97]",
+            !open && "pointer-events-none",
+          )}
+          style={overlayTransitionStyle(isOpen, "menu")}
         >
           {instances.map((inst) => {
             const isActive = inst.appKey === activeKey;

package/src/components/applications/ApplicationsView.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { ChevronRight, Layers, Boxes, HeartPulse, Shapes, Globe, Tag } from 'lucide-react'
+import { CollapseChevron } from '../ui/Collapse'
 import { clsx } from 'clsx'
 import { StatusDot, mapHealthToTone } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
@@ -497,7 +498,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                           <Tooltip content={applicationRuntimeLabel(r.members.map((member) => member.row), r.workloadClass, r.health)} delay={150}>
                             <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[r.health].bar)} />
                           </Tooltip>
-                          <ChevronRight className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', r.expanded && 'rotate-90')} aria-hidden />
+                          <CollapseChevron open={r.expanded} className="h-3.5 w-3.5" />
                           <span className="truncate font-semibold text-theme-text-primary">{r.label}</span>
                           {r.workloadClass !== 'job' && <BatchSignalChip signal={firstBatchSignal(r.members.map((m) => m.row))} />}
                           <Tooltip

package/src/components/audit/AuditAlerts.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { ClipboardCheck, ChevronRight, ShieldAlert, AlertTriangle, ArrowRight } from 'lucide-react'
+import { ClipboardCheck, ShieldAlert, AlertTriangle, ArrowRight } from 'lucide-react'
 import { clsx } from 'clsx'
 import { BP_CATEGORY_BADGE, DEFAULT_BADGE_COLOR } from '../../utils/badge-colors'
 import { SEVERITY_TEXT_CLASS } from '../checks/severity'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 
 export interface AuditFinding {
   kind: string
@@ -36,6 +37,7 @@ interface AuditAlertsProps {
  */
 export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
   const [expanded, setExpanded] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   if (findings.length === 0) return null
 
@@ -45,11 +47,12 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
   return (
     <section className="rounded-lg border border-theme-border bg-theme-surface p-4 shadow-theme-sm">
       <button
+        {...buttonProps}
         type="button"
         onClick={() => setExpanded(!expanded)}
         className="flex w-full items-center gap-2 rounded-md text-left transition-colors hover:text-theme-text-primary"
       >
-        <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
+        <CollapseChevron open={expanded} className="w-4 h-4" />
         <ClipboardCheck className="w-4 h-4 text-theme-text-secondary" />
         <span className="text-sm font-semibold text-theme-text-primary">Audit Findings</span>
         <div className="flex items-center gap-2 ml-1">
@@ -62,43 +65,38 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
         </div>
       </button>
 
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        <div className="overflow-hidden">
-          <div className="flex flex-col gap-0.5 pt-3">
-            {findings.map((f, i) => {
-              const isHigh = f.severity === 'danger'
-              return (
-                <div key={`${f.checkID}-${i}`} className="flex items-start gap-2 py-1">
-                  {isHigh ? (
-                    <ShieldAlert className={clsx('w-3.5 h-3.5 shrink-0 mt-0.5', SEVERITY_TEXT_CLASS.high)} />
-                  ) : (
-                    <AlertTriangle className={clsx('w-3.5 h-3.5 shrink-0 mt-0.5', SEVERITY_TEXT_CLASS.medium)} />
-                  )}
-                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
-                    <span className="text-xs text-theme-text-secondary">{f.message}</span>
-                    <span className={clsx('badge-sm text-[10px] shrink-0', BP_CATEGORY_BADGE[f.category] || DEFAULT_BADGE_COLOR)}>
-                      {f.category}
-                    </span>
-                  </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className="flex flex-col gap-0.5 pt-3">
+          {findings.map((f, i) => {
+            const isHigh = f.severity === 'danger'
+            return (
+              <div key={`${f.checkID}-${i}`} className="flex items-start gap-2 py-1">
+                {isHigh ? (
+                  <ShieldAlert className={clsx('w-3.5 h-3.5 shrink-0 mt-0.5', SEVERITY_TEXT_CLASS.high)} />
+                ) : (
+                  <AlertTriangle className={clsx('w-3.5 h-3.5 shrink-0 mt-0.5', SEVERITY_TEXT_CLASS.medium)} />
+                )}
+                <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
+                  <span className="text-xs text-theme-text-secondary">{f.message}</span>
+                  <span className={clsx('badge-sm text-[10px] shrink-0', BP_CATEGORY_BADGE[f.category] || DEFAULT_BADGE_COLOR)}>
+                    {f.category}
+                  </span>
                 </div>
-              )
-            })}
-            {onViewAll && (
-              <button
-                type="button"
-                onClick={(e) => { e.stopPropagation(); onViewAll() }}
-                className="mt-1 flex items-center gap-1 py-1 text-xs text-accent-text transition-colors hover:text-accent"
-              >
-                View all findings
-                <ArrowRight className="w-3 h-3" />
-              </button>
-            )}
-          </div>
+              </div>
+            )
+          })}
+          {onViewAll && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onViewAll() }}
+              className="mt-1 flex items-center gap-1 py-1 text-xs text-accent-text transition-colors hover:text-accent"
+            >
+              View all findings
+              <ArrowRight className="w-3 h-3" />
+            </button>
+          )}
         </div>
-      </div>
+      </Collapse>
     </section>
   )
 }

package/src/components/audit/AuditFindingsTable.tsx

@@ -1,5 +1,5 @@
-import { useState, useMemo, useRef, useEffect, type Dispatch, type SetStateAction } from 'react'
-import { ShieldAlert, AlertTriangle, ChevronRight, CheckCircle2, ExternalLink, MoreHorizontal, EyeOff, Layers } from 'lucide-react'
+import { useState, useMemo, useRef, useEffect, useId, type Dispatch, type SetStateAction } from 'react'
+import { ShieldAlert, AlertTriangle, CheckCircle2, ExternalLink, MoreHorizontal, EyeOff, Layers } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { AuditFinding } from './AuditAlerts'
 import { BP_CATEGORY_BADGE, DEFAULT_BADGE_COLOR } from '../../utils/badge-colors'
@@ -8,6 +8,7 @@ import { SearchBox } from '../ui/SearchBox'
 import { FilterPill } from '../ui/FilterPill'
 import { pluralize } from '../../utils/pluralize'
 import { SEVERITY_TEXT_CLASS } from '../checks/severity'
+import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../ui/Collapse'
 
 const CATEGORIES = ['Security', 'Reliability', 'Efficiency'] as const
 const RAW_SEVERITIES = ['danger', 'warning'] as const
@@ -68,6 +69,9 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
   const [searchTerm, setSearchTerm] = useState('')
   const [expanded, setExpanded] = useState<Set<string>>(new Set())
   const [expandedNS, setExpandedNS] = useState<Set<string>>(new Set())
+  // Namespace rows are mapped inline, so they can't each call useDisclosure;
+  // one generated prefix plus the namespace keeps aria-controls unique.
+  const nsPanelBase = useId()
   const [groupByNS, setGroupByNS] = useState(false)
 
   const toggleInSet = (setter: Dispatch<SetStateAction<Set<string>>>, value: string) => {
@@ -328,6 +332,7 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
                   role="button"
                   tabIndex={0}
                   aria-expanded={nsExpanded}
+                  aria-controls={disclosurePanelId(nsPanelBase, ns)}
                   onClick={() => toggleNS(ns)}
                   onKeyDown={(e) => {
                     if (e.target !== e.currentTarget) return
@@ -335,7 +340,7 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
                   }}
                   className="group flex items-center gap-3 w-full px-4 py-2 rounded-lg hover:bg-theme-hover/30 transition-colors text-left cursor-pointer focus-visible:ring-2 focus-visible:ring-theme-text-primary/20 focus-visible:outline-none"
                 >
-                  <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary shrink-0 transition-transform duration-200', nsExpanded && 'rotate-90')} />
+                  <CollapseChevron open={nsExpanded} className="w-4 h-4" />
                   <span className="text-sm font-semibold text-theme-text-primary">{ns}</span>
                   <span className="text-xs text-theme-text-tertiary">{pluralize(nsGroups.length, 'resource')}</span>
                   <span className="flex-1" />
@@ -347,18 +352,13 @@ export function AuditFindingsTable({ groups, findings, checks, onResourceClick,
                     <ContextMenu items={[{ label: `Hide ${ns} namespace`, onClick: () => onHideNamespace(ns) }]} />
                   )}
                 </div>
-                <div
-                  className="grid transition-[grid-template-rows] duration-200 ease-out"
-                  style={{ gridTemplateRows: nsExpanded ? '1fr' : '0fr' }}
-                >
-                  <div className="overflow-hidden">
-                    <div className="pl-4">
-                      {nsGroups.map(g => (
-                        <ResourceGroupRow key={`${g.kind}/${g.namespace}/${g.name}`} group={g} checks={checks} expanded={expanded} onToggle={toggle} onResourceClick={onResourceClick} onHideCheck={onHideCheck} onHideCategory={onHideCategory} />
-                      ))}
-                    </div>
+                <Collapse open={nsExpanded} id={disclosurePanelId(nsPanelBase, ns)}>
+                  <div className="pl-4">
+                    {nsGroups.map(g => (
+                      <ResourceGroupRow key={`${g.kind}/${g.namespace}/${g.name}`} group={g} checks={checks} expanded={expanded} onToggle={toggle} onResourceClick={onResourceClick} onHideCheck={onHideCheck} onHideCategory={onHideCategory} />
+                    ))}
                   </div>
-                </div>
+                </Collapse>
               </div>
             )
           })}
@@ -441,13 +441,14 @@ function ResourceGroupRow({ group: g, checks, expanded, onToggle, onResourceClic
   const key = `${g.kind}/${g.namespace}/${g.name}`
   const isExpanded = expanded.has(key)
   const hasHigh = g.danger > 0
+  const { panelId, buttonProps } = useDisclosure(isExpanded)
 
   return (
     <div>
       <div
+        {...buttonProps}
         role="button"
         tabIndex={0}
-        aria-expanded={isExpanded}
         onClick={() => onToggle(key)}
         onKeyDown={(e) => {
           if (e.target !== e.currentTarget) return
@@ -455,7 +456,7 @@ function ResourceGroupRow({ group: g, checks, expanded, onToggle, onResourceClic
         }}
         className="group flex items-center gap-3 w-full px-4 py-2.5 rounded-lg hover:bg-theme-hover/50 transition-colors text-left cursor-pointer focus-visible:ring-2 focus-visible:ring-theme-text-primary/20 focus-visible:outline-none"
       >
-        <ChevronRight className={clsx('w-3.5 h-3.5 text-theme-text-tertiary shrink-0 transition-transform duration-200', isExpanded && 'rotate-90')} />
+        <CollapseChevron open={isExpanded} className="w-3.5 h-3.5" />
         {hasHigh ? (
           <ShieldAlert className={clsx('w-4 h-4 shrink-0', SEVERITY_TEXT_CLASS.high)} />
         ) : (
@@ -485,18 +486,13 @@ function ResourceGroupRow({ group: g, checks, expanded, onToggle, onResourceClic
           <ContextMenu items={[{ label: `Hide ${g.namespace} namespace`, onClick: () => onHideNamespace(g.namespace) }]} />
         )}
       </div>
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: isExpanded ? '1fr' : '0fr' }}
-      >
-        <div className="overflow-hidden">
-          <div className="pl-11 pb-1">
-            {g.findings.map((f, i) => (
-              <FindingDetail key={`${f.checkID}-${i}`} finding={f} meta={checks?.[f.checkID]} onHideCheck={onHideCheck} onHideCategory={onHideCategory} />
-            ))}
-          </div>
+      <Collapse open={isExpanded} id={panelId}>
+        <div className="pl-11 pb-1">
+          {g.findings.map((f, i) => (
+            <FindingDetail key={`${f.checkID}-${i}`} finding={f} meta={checks?.[f.checkID]} onHideCheck={onHideCheck} onHideCategory={onHideCategory} />
+          ))}
         </div>
-      </div>
+      </Collapse>
     </div>
   )
 }

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";
@@ -339,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/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 { 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']
 
@@ -537,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={[
@@ -557,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
@@ -585,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>
   )
 }
@@ -631,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">
@@ -643,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)
@@ -653,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">
@@ -663,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>
           )
         })}
@@ -906,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
@@ -933,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 (
     <>
@@ -953,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
@@ -1003,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(() => {
@@ -1029,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 (
     <>
@@ -1046,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) => (

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, type ComponentType, type ReactNode } from 'react'
-import { ArrowDownUp, ChevronDown, ChevronRight, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
+import { ArrowDownUp, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { PaneLoader } from '../ui/PaneLoader'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
@@ -257,6 +258,10 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     documentTitleSuffix,
     children,
   } = props
+  // One predicate for header, caret and panel: without content there is
+  // nothing to open, so the header must not announce expanded.
+  const helmValuesShown = !!helmValuesOpen && !!helmValuesContent
+  const helmValuesDisclosure = useDisclosure(helmValuesShown)
 
   // Document title side effect — opt-in so hub-web can take ownership of
   // its own title format.
@@ -481,16 +486,12 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
           {helmValues && onToggleHelmValues && (
             <div className="shrink-0 border-b border-theme-border bg-theme-base">
               <button
+                {...helmValuesDisclosure.buttonProps}
                 type="button"
                 onClick={onToggleHelmValues}
                 className="flex w-full items-center gap-2 px-4 py-2 text-left text-xs text-theme-text-secondary hover:bg-theme-hover"
-                aria-expanded={helmValuesOpen}
               >
-                {helmValuesOpen ? (
-                  <ChevronDown className="h-3.5 w-3.5 shrink-0" />
-                ) : (
-                  <ChevronRight className="h-3.5 w-3.5 shrink-0" />
-                )}
+                <CollapseChevron open={helmValuesShown} className="h-3.5 w-3.5" />
                 <Settings className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
                 <span className="font-medium text-theme-text-primary">Helm values</span>
                 <span className="tabular-nums text-theme-text-tertiary">
@@ -500,11 +501,13 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   <span className="text-[10px] uppercase tracking-wider text-theme-text-tertiary">parameters</span>
                 )}
               </button>
-              {helmValuesOpen && helmValuesContent && (
+              {/* The values viewer is a full code pane; keep it out of the tree
+                  while closed rather than paying for it on every detail open. */}
+              <Collapse open={helmValuesShown} unmountOnExit id={helmValuesDisclosure.panelId}>
                 <div className="border-t border-theme-border bg-theme-surface px-4 py-3">
                   {helmValuesContent}
                 </div>
-              )}
+              </Collapse>
             </div>
           )}
         </>