@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.5",
+  "version": "1.14.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
@@ -100,8 +100,8 @@
     "elkjs": "^0.11.1",
     "lucide-react": "^1.37.0",
     "monaco-editor": "0.55.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "^6.0.2",
     "vitest": "^4.1.11",
     "yaml": "^2.9.0"

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/AuditCard.tsx

@@ -1,9 +1,10 @@
-import { ClipboardCheck, ArrowRight, Check } from 'lucide-react'
+import { ClipboardCheck, ArrowRight, Check, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../utils/badge-colors'
 import { SEVERITY_FILL_CLASS, SEVERITY_TEXT_CLASS } from '../checks/severity'
 
 export interface AuditCardData {
+  missingInputs?: string[]
   passing: number
   /** Raw compatibility counts; warning renders as Medium and danger as High. */
   warning: number
@@ -17,16 +18,17 @@ interface AuditCardProps {
   onNavigate: () => void
 }
 
-type SeverityLevel = 'success' | 'high' | 'medium'
+type SeverityLevel = 'success' | 'high' | 'medium' | 'neutral'
 
 function getSeverityLevel(data: AuditCardData): SeverityLevel {
-  if (data.warning + data.danger === 0) return 'success'
+  if (data.warning + data.danger === 0) return data.missingInputs?.length || data.passing === 0 ? 'neutral' : 'success'
   const highRatio = data.danger / (data.warning + data.danger)
   if (highRatio > 0.2) return 'high'
   return 'medium'
 }
 
 const ACCENT_BG: Record<SeverityLevel, string> = {
+  neutral: 'bg-theme-elevated',
   success: 'bg-green-500/10',
   high: 'bg-orange-500/10',
   medium: 'bg-yellow-500/10',
@@ -35,9 +37,10 @@ const ACCENT_BG: Record<SeverityLevel, string> = {
 export function AuditCard({ data, onNavigate }: AuditCardProps) {
   const total = data.passing + data.warning + data.danger
   const issueCount = data.warning + data.danger
-  const allPassing = issueCount === 0
+  const incomplete = (data.missingInputs?.length ?? 0) > 0
+  const allPassing = issueCount === 0 && total > 0 && !incomplete
   const level = getSeverityLevel(data)
-  const accentColor = level === 'success' ? SEVERITY_TEXT.success : SEVERITY_TEXT_CLASS[level]
+  const accentColor = level === 'neutral' ? 'text-theme-text-secondary' : level === 'success' ? SEVERITY_TEXT.success : SEVERITY_TEXT_CLASS[level]
   const accentBg = ACCENT_BG[level]
 
   return (
@@ -56,7 +59,7 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
               </span>
             ) : (
               <span className={clsx('badge-sm', accentBg, accentColor)}>
-                <Check className="w-3 h-3" />
+                {allPassing ? <Check className="w-3 h-3" /> : <ClipboardCheck className="w-3 h-3" />}
               </span>
             )}
           </div>
@@ -71,6 +74,12 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
                 <span className="text-xs text-theme-text-tertiary">{total} checks across {Object.keys(data.categories).length} categories</span>
               )}
             </div>
+          ) : issueCount === 0 ? (
+            <div className="flex flex-col items-center gap-2 text-center">
+              {incomplete ? <AlertTriangle className="w-8 h-8 text-warning-text" /> : <ClipboardCheck className="w-8 h-8 text-theme-text-tertiary" />}
+              <span className="text-sm font-medium text-theme-text-primary">{incomplete ? 'Some checks could not run' : 'No resources evaluated'}</span>
+              <span className="text-xs text-theme-text-secondary">{incomplete ? 'No findings in the available data.' : 'Check the selected scope and check settings.'}</span>
+            </div>
           ) : (
             <>
               {/* Distribution bar — only show when we have passing data for context */}
@@ -107,7 +116,7 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
                           )}
                         </div>
                       ) : (
-                        <span className={clsx('text-xs font-semibold', SEVERITY_TEXT.success)}>All passing</span>
+                        <span className={clsx('text-xs font-semibold', incomplete ? 'text-theme-text-secondary' : SEVERITY_TEXT.success)}>{incomplete ? 'No findings' : 'All passing'}</span>
                       )}
                     </div>
                   )
@@ -117,6 +126,8 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
           )}
         </div>
 
+        {incomplete && issueCount > 0 && <p className="px-4 pb-2 text-xs text-warning-text">Some checks could not run.</p>}
+
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end">
           <span className={clsx(
             'flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider transition-colors',

package/src/components/audit/AuditCoveragePresentation.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { AuditCard } from './AuditCard'
+import { ChecksView } from '../checks/ChecksView'
+import { FilterLocationProvider } from '../../filter-state'
+
+describe('audit coverage presentation', () => {
+  for (const [passing, missingInputs, expected] of [
+    [0, [], 'No resources evaluated'],
+    [0, ['secrets'], 'Some checks could not run'],
+    [4, ['secrets'], 'Some checks could not run'],
+    [4, [], 'All checks passing'],
+  ] as const) {
+    it(`shows ${expected} with ${passing} passing and ${missingInputs.length} unavailable inputs`, () => {
+      const html = renderToString(<AuditCard data={{ passing, missingInputs: [...missingInputs], warning: 0, danger: 0, categories: {} }} onNavigate={() => {}} />)
+      expect(html).toContain(expected)
+      if (missingInputs.length || passing === 0) expect(html).not.toContain('All checks passing')
+    })
+  }
+  it('keeps a coverage warning alongside real findings', () => {
+    const html = renderToString(<AuditCard data={{ passing: 1, missingInputs: ['secrets'], warning: 1, danger: 0, categories: { Security: { passing: 1, warning: 0, danger: 0 } } }} onNavigate={() => {}} />)
+    expect(html).toContain('Some checks could not run')
+    expect(html).not.toContain('All passing')
+  })
+  for (const [evaluated, missingInputs, expected] of [
+    [0, [], 'No resources evaluated'],
+    [0, ['secrets'], 'No findings in the available data'],
+    [4, ['secrets'], 'No findings in the available data'],
+    [4, [], 'Every audited resource passed'],
+  ] as const) {
+    it(`Checks: ${expected}`, () => {
+      const html = renderToString(
+        <FilterLocationProvider value={{ searchParams: new URLSearchParams(), update: () => {} }}>
+          <ChecksView checks={[]} catalog={{}} anyData evaluated={evaluated} missingInputs={[...missingInputs]} />
+        </FilterLocationProvider>,
+      )
+      expect(html).toContain(expected)
+      if (missingInputs.length) {
+        expect(html).toContain('Unavailable inputs:')
+        expect(html).toContain('secrets')
+        expect(html).not.toContain('Every audited resource passed')
+      }
+    })
+  }
+})

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/AreaChart.test.tsx

@@ -102,6 +102,19 @@ describe('AreaChart domain and axes', () => {
     expect(attrs(render({ series: [series([[0, 1], [3600, 5]])] }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(1)
   })
 
+  it('breaks omitted evaluations only when the caller supplies the interval', () => {
+    const sparse = [series([[0, 1], [15, 2], [105, 3], [120, 4]])]
+    const paths = (stepSeconds?: number) => attrs(render({ series: sparse, stepSeconds }), 'path', 'fill').filter(fill => fill === 'none')
+    expect(paths(15)).toHaveLength(2)
+    expect(paths()).toHaveLength(1)
+  })
+
+  it('preserves explicit gaps, zeros and isolated-sample behavior with a known interval', () => {
+    const gaps = [series([[0, 0], [15, 0], [30, null], [45, 1], [60, 2]])]
+    expect(attrs(render({ series: gaps, stepSeconds: 15 }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(2)
+    expect(attrs(render({ series: [series([[0, 1]])], stepSeconds: 15 }), 'path', 'fill')).toHaveLength(0)
+  })
+
   it('renders nothing for an empty series list', () => {
     expect(render({ series: [] })).toBe('')
   })