@skyhook-io/k8s-ui 1.14.6 → 1.14.7

package/src/components/issues/IssuesView.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
-import { AlertOctagon, AlertTriangle, ArrowRight, ChevronRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
+import { useMemo, useState, type ComponentType, type ReactNode } from 'react';
+import { AlertOctagon, AlertTriangle, ArrowRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
 import { CardBody, CardSection, ClusterName, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse';
 import { Tooltip } from '../ui/Tooltip';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
 import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
@@ -207,7 +208,7 @@ export function IssueRow({
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
-  const [renderDetails, setRenderDetails] = useState(open);
+  const { panelId, buttonProps } = useDisclosure(open);
   const Container = as;
   const severity = normalizeIssueSeverity(issue.severity);
   const SeverityIcon = ISSUE_SEVERITY_ICON[severity];
@@ -244,17 +245,6 @@ export function IssueRow({
     </div>
   );
 
-  useEffect(() => {
-    if (open) {
-      setRenderDetails(true);
-      return;
-    }
-    if (!renderDetails) return;
-
-    const timeout = window.setTimeout(() => setRenderDetails(false), 200);
-    return () => window.clearTimeout(timeout);
-  }, [open, renderDetails]);
-
   return (
     <Container
       className={[
@@ -276,9 +266,9 @@ export function IssueRow({
           be invalid). 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;
@@ -357,50 +347,41 @@ export function IssueRow({
         <div className="flex shrink-0 items-center gap-3">
           {metaChips('hidden @2xl/issue:flex')}
           {renderActions?.(slotCtx)}
-          <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>
       </div>
 
-      {renderDetails ? (
-        <div
-          className={`issue-details-motion ${open ? 'issue-details-motion-open' : ''}`}
-          onTransitionEnd={(event) => {
-            if (event.target !== event.currentTarget) return;
-            if (event.propertyName !== 'grid-template-rows') return;
-            if (!open) setRenderDetails(false);
-          }}
-        >
-          <div className="overflow-hidden">
-            {/* Body sits on the card surface (not a recessed grey panel) so its
-                text keeps enough contrast. */}
-            <div className="border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4">
-              <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
-                <Diagnosis issue={issue} source={diagnosisSource} />
-                {issue.incident_parent ? (
-                  <section className="flex flex-col gap-1">
-                    <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
-                      {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
-                      {issue.incident_parent.confidence ? (
-                        <Tooltip content={confidenceTitle(issue.incident_parent.confidence)} delay={200}>
-                          <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary">
-                            {issue.incident_parent.confidence} confidence
-                          </span>
-                        </Tooltip>
-                      ) : null}
-                    </h4>
-                    <ul className="flex flex-col gap-px">
-                      <ResourceLine refForLink={memberRef(issue, issue.incident_parent.ref)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                    </ul>
-                  </section>
-                ) : null}
-                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                {renderDetailSection?.(slotCtx)}
-              </div>
-            </div>
+      {/* Details unmount after the close transition: a list can hold hundreds
+          of rows and the body is the expensive part, so closed rows stay light. */}
+      <Collapse open={open} unmountOnExit id={panelId}>
+        {/* Body sits on the card surface (not a recessed grey panel) so its
+            text keeps enough contrast. */}
+        <div className="border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4">
+          <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+            <Diagnosis issue={issue} source={diagnosisSource} />
+            {issue.incident_parent ? (
+              <section className="flex flex-col gap-1">
+                <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
+                  {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
+                  {issue.incident_parent.confidence ? (
+                    <Tooltip content={confidenceTitle(issue.incident_parent.confidence)} delay={200}>
+                      <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary">
+                        {issue.incident_parent.confidence} confidence
+                      </span>
+                    </Tooltip>
+                  ) : null}
+                </h4>
+                <ul className="flex flex-col gap-px">
+                  <ResourceLine refForLink={memberRef(issue, issue.incident_parent.ref)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+                </ul>
+              </section>
+            ) : null}
+            <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+            <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+            {renderDetailSection?.(slotCtx)}
           </div>
         </div>
-      ) : null}
+      </Collapse>
     </Container>
   );
 }

package/src/components/logs/LogCore.tsx

@@ -17,6 +17,8 @@ import {
 } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
 import { copyText } from '../../utils/clipboard'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import {
   LOG_EXPORT_FORMAT_LABELS,
   LOG_EXPORT_FORMATS,
@@ -202,6 +204,7 @@ export function LogCore({
     new Set(['error', 'warn', 'info', 'debug'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
+  const downloadMenu = useAnimatedUnmount(showDownloadMenu, overlayExitMs('menu'))
   const [exportScope, setExportScope] = useState<'visible' | 'all'>('visible')
   const [exportFormat, setExportFormat] = useState<LogExportFormat>(() => {
     try {
@@ -210,7 +213,9 @@ export function LogCore({
     } catch { return 'txt' }
   })
   const [showTsMenu, setShowTsMenu] = useState(false)
+  const tsMenu = useAnimatedUnmount(showTsMenu, overlayExitMs('menu'))
   const [showStructuredMenu, setShowStructuredMenu] = useState(false)
+  const structuredMenu = useAnimatedUnmount(showStructuredMenu, overlayExitMs('menu'))
   const [structuredMode, setStructuredMode] = useState<StructuredMode>(() => {
     try {
       const v = localStorage.getItem('radar-logs-structured-mode') as StructuredMode | null
@@ -297,9 +302,11 @@ export function LogCore({
     () => ({ format: exportFormat, showTimestamps, showPodName }),
     [exportFormat, showTimestamps, showPodName],
   )
+  // Keyed on presence, not logical open, so the preview doesn't flip to
+  // "nothing to export" while the popover is still fading out.
   const exportPreview = useMemo(
-    () => showDownloadMenu ? previewLogExport(exportEntries, exportOptions) : [],
-    [showDownloadMenu, exportEntries, exportOptions],
+    () => downloadMenu.shouldRender ? previewLogExport(exportEntries, exportOptions) : [],
+    [downloadMenu.shouldRender, exportEntries, exportOptions],
   )
   // Offering a scope that resolves to the same lines is a choice about nothing.
   const scopeIsMeaningful = displayEntries.length !== bufferEntries.length
@@ -309,8 +316,12 @@ export function LogCore({
   // silently exporting the whole buffer on a later visit.
   const toggleExportMenu = useCallback(() => {
     setShowDownloadMenu(prev => !prev)
-    setExportScope('visible')
   }, [])
+  // The reset lands once the popover has left the DOM, not at logical close,
+  // so the preview doesn't re-scope while the popover is still fading out.
+  useEffect(() => {
+    if (!downloadMenu.shouldRender) setExportScope('visible')
+  }, [downloadMenu.shouldRender])
 
   const handleExportCopy = useCallback(() => {
     closeExportMenu()
@@ -620,8 +631,14 @@ export function LogCore({
                   </span>
                 </button>
               </Tooltip>
-              {showStructuredMenu && (
-                <div className={`absolute top-full right-0 mt-1 w-56 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50`}>
+              {structuredMenu.shouldRender && (
+                <div
+                  inert={!showStructuredMenu}
+                  className={`absolute top-full right-0 mt-1 w-56 origin-top-right ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 ${TRANSITION_MENU} ${
+                    structuredMenu.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]'
+                  } ${showStructuredMenu ? '' : 'pointer-events-none'}`}
+                  style={overlayTransitionStyle(structuredMenu.isOpen, 'menu')}
+                >
                   <div className={`px-3 py-1.5 text-[10px] uppercase tracking-wide ${palette.textTertiary} border-b ${palette.border}`}>
                     Structured display
                   </div>
@@ -673,8 +690,14 @@ export function LogCore({
                 </span>
               </button>
             </Tooltip>
-            {showTsMenu && (
-              <div className={`absolute top-full right-0 mt-1 w-44 ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50`}>
+            {tsMenu.shouldRender && (
+              <div
+                inert={!showTsMenu}
+                className={`absolute top-full right-0 mt-1 w-44 origin-top-right ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 ${TRANSITION_MENU} ${
+                  tsMenu.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]'
+                } ${showTsMenu ? '' : 'pointer-events-none'}`}
+                style={overlayTransitionStyle(tsMenu.isOpen, 'menu')}
+              >
                 <div className={`px-3 py-1.5 text-[10px] uppercase tracking-wide ${palette.textTertiary} border-b ${palette.border}`}>
                   Timestamp format
                 </div>
@@ -769,8 +792,16 @@ export function LogCore({
               <Download className="w-4 h-4" />
             </button>
           </Tooltip>
-          {showDownloadMenu && (
-            <div role="dialog" aria-label="Export logs" className={`absolute top-full right-0 mt-1 w-[23rem] ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 p-3 space-y-2.5`}>
+          {downloadMenu.shouldRender && (
+            <div
+              role="dialog"
+              aria-label="Export logs"
+              inert={!showDownloadMenu}
+              className={`absolute top-full right-0 mt-1 w-[23rem] origin-top-right ${palette.menuBg} border ${palette.border} rounded-lg shadow-lg z-50 p-3 space-y-2.5 ${TRANSITION_MENU} ${
+                downloadMenu.isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]'
+              } ${showDownloadMenu ? '' : 'pointer-events-none'}`}
+              style={overlayTransitionStyle(downloadMenu.isOpen, 'menu')}
+            >
               <div className="flex items-center gap-3">
                 <span id="log-export-scope-label" className={exportLabelCls}>Lines</span>
                 {scopeIsMeaningful ? (

package/src/components/resources/ResourcesSidebar.tsx

@@ -1,8 +1,6 @@
-import { useState, useMemo, useEffect, useRef, useCallback, forwardRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useCallback, useId, forwardRef } from 'react'
 import {
   Search,
-  ChevronDown,
-  ChevronRight,
   Eye,
   EyeOff,
   Pin,
@@ -10,6 +8,7 @@ import {
   X,
 } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../ui/Collapse'
 import type { APIResource } from '../../types'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import { getResourceIcon } from '../../utils/resource-icons'
@@ -213,6 +212,10 @@ export function ResourcesSidebar({
   useEffect(() => { persistedExpandedCategories = expandedCategories }, [expandedCategories])
   const [showEmptyKinds, setShowEmptyKinds] = useState(false)
   const [favoritesExpanded, setFavoritesExpanded] = useState(() => pinned.length > 0)
+  const favoritesDisclosure = useDisclosure(favoritesExpanded)
+  // Category sections are mapped inline, so they can't each call useDisclosure;
+  // one generated prefix plus the category name keeps aria-controls unique.
+  const categoryPanelBase = useId()
 
   // Ref to selected sidebar item for scrolling into view on deeplink
   const selectedSidebarRef = useRef<HTMLButtonElement>(null)
@@ -499,14 +502,11 @@ export function ResourcesSidebar({
         {/* Favorites (pinned kinds) section — always visible */}
         <div className="mb-2">
           <button
+            {...favoritesDisclosure.buttonProps}
             onClick={() => setFavoritesExpanded((v) => !v)}
             className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
           >
-            {favoritesExpanded ? (
-              <ChevronDown className="w-3 h-3" />
-            ) : (
-              <ChevronRight className="w-3 h-3" />
-            )}
+            <CollapseChevron open={favoritesExpanded} className="w-3 h-3" />
             <span className="flex-1 text-left">Favorites</span>
             {!favoritesExpanded && pinned.length > 0 && (
               <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', pinned.length < 1000 ? 'w-8' : 'w-9')}>
@@ -514,41 +514,36 @@ export function ResourcesSidebar({
               </span>
             )}
           </button>
-          <div className={clsx(
-            'grid transition-[grid-template-rows] duration-200',
-            favoritesExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-          )} style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}>
-            <div className="overflow-hidden">
-              <div className="space-y-0.5">
-                {pinned.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-theme-text-disabled">
-                    No pinned resources. Click <Pin className="w-3 h-3 inline" /> on any resource type to pin it here.
-                  </div>
-                ) : (
-                  pinned.map((p) => {
-                    const isResourceSelected =
-                      (effectiveSelectedKind.name === p.name && effectiveSelectedKind.group === p.group) ||
-                      (effectiveSelectedKind.kind.toLowerCase() === p.kind.toLowerCase() && effectiveSelectedKind.group === p.group)
-                    const highlighted = isKindHighlighted(p.name, p.group)
-                    return (
-                      <ResourceTypeButton
-                        key={`${p.name}-${p.group}`}
-                        ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
-                        resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
-                        count={counts[p.group ? `${p.group}/${p.kind}` : p.kind] ?? null}
-                        isSelected={isResourceSelected}
-                        isHighlighted={highlighted}
-                        isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
-                        isPinned={true}
-                        onTogglePin={() => togglePin(p)}
-                        onClick={() => selectKind({ name: p.name, kind: p.kind, group: p.group })}
-                      />
-                    )
-                  })
-                )}
-              </div>
+          <Collapse open={favoritesExpanded} id={favoritesDisclosure.panelId}>
+            <div className="space-y-0.5">
+              {pinned.length === 0 ? (
+                <div className="px-3 py-2 text-xs text-theme-text-disabled">
+                  No pinned resources. Click <Pin className="w-3 h-3 inline" /> on any resource type to pin it here.
+                </div>
+              ) : (
+                pinned.map((p) => {
+                  const isResourceSelected =
+                    (effectiveSelectedKind.name === p.name && effectiveSelectedKind.group === p.group) ||
+                    (effectiveSelectedKind.kind.toLowerCase() === p.kind.toLowerCase() && effectiveSelectedKind.group === p.group)
+                  const highlighted = isKindHighlighted(p.name, p.group)
+                  return (
+                    <ResourceTypeButton
+                      key={`${p.name}-${p.group}`}
+                      ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
+                      resource={{ name: p.name, kind: p.kind, group: p.group, version: '', namespaced: true, isCrd: false, verbs: [] }}
+                      count={counts[p.group ? `${p.group}/${p.kind}` : p.kind] ?? null}
+                      isSelected={isResourceSelected}
+                      isHighlighted={highlighted}
+                      isForbidden={forbiddenKinds.has(p.group ? `${p.group}/${p.kind}` : p.kind)}
+                      isPinned={true}
+                      onTogglePin={() => togglePin(p)}
+                      onClick={() => selectKind({ name: p.name, kind: p.kind, group: p.group })}
+                    />
+                  )
+                })
+              )}
             </div>
-          </div>
+          </Collapse>
         </div>
         {filteredCategories ? (
           // Dynamic categories from API
@@ -558,14 +553,12 @@ export function ResourcesSidebar({
             return (
               <div key={category.name} className="mb-2">
                 <button
+                  aria-expanded={isExpanded}
+                  aria-controls={disclosurePanelId(categoryPanelBase, category.name)}
                   onClick={() => toggleCategory(category.name)}
                   className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
                 >
-                  {isExpanded ? (
-                    <ChevronDown className="w-3 h-3" />
-                  ) : (
-                    <ChevronRight className="w-3 h-3" />
-                  )}
+                  <CollapseChevron open={isExpanded} className="w-3 h-3" />
                   <span className="flex-1 text-left truncate" title={rawGroupTitle}>{category.name}</span>
                   {!isExpanded && (
                     <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center font-mono', category.total < 1000 ? 'w-8' : 'w-9')}>
@@ -573,38 +566,33 @@ export function ResourcesSidebar({
                     </span>
                   )}
                 </button>
-                <div className={clsx(
-                  'grid transition-[grid-template-rows] duration-200',
-                  isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-                )} style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}>
-                  <div className="overflow-hidden">
-                    <div className="space-y-0.5">
-                      {category.visibleResources.map((resource) => {
-                        const resourceIsPinned = isPinned(resource.name, resource.group)
-                        const isResourceSelected =
-                          (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
-                          (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
-                        // If the resource is pinned, let the Favorites section own the highlight
-                        const showSelected = isResourceSelected && !resourceIsPinned
-                        const highlighted = isKindHighlighted(resource.name, resource.group)
-                        return (
-                        <ResourceTypeButton
-                          key={resource.name}
-                          ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
-                          resource={resource}
-                          count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
-                          isSelected={showSelected}
-                          isHighlighted={highlighted}
-                          isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
-                          isPinned={resourceIsPinned}
-                          onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
-                          onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
-                        />
-                        )
-                      })}
-                    </div>
+                <Collapse open={isExpanded} id={disclosurePanelId(categoryPanelBase, category.name)}>
+                  <div className="space-y-0.5">
+                    {category.visibleResources.map((resource) => {
+                      const resourceIsPinned = isPinned(resource.name, resource.group)
+                      const isResourceSelected =
+                        (effectiveSelectedKind.name === resource.name && effectiveSelectedKind.group === resource.group) ||
+                        (effectiveSelectedKind.kind.toLowerCase() === resource.kind.toLowerCase() && effectiveSelectedKind.group === resource.group)
+                      // If the resource is pinned, let the Favorites section own the highlight
+                      const showSelected = isResourceSelected && !resourceIsPinned
+                      const highlighted = isKindHighlighted(resource.name, resource.group)
+                      return (
+                      <ResourceTypeButton
+                        key={resource.name}
+                        ref={highlighted ? highlightedRef : (isResourceSelected ? selectedSidebarRef : null)}
+                        resource={resource}
+                        count={counts[resource.group ? `${resource.group}/${resource.kind}` : resource.kind] ?? null}
+                        isSelected={showSelected}
+                        isHighlighted={highlighted}
+                        isForbidden={forbiddenKinds.has(resource.group ? `${resource.group}/${resource.kind}` : resource.kind)}
+                        isPinned={resourceIsPinned}
+                        onTogglePin={() => togglePin({ name: resource.name, kind: resource.kind, group: resource.group })}
+                        onClick={() => selectKind({ name: resource.name, kind: resource.kind, group: resource.group })}
+                      />
+                      )
+                    })}
                   </div>
-                </div>
+                </Collapse>
               </div>
             )
           })

package/src/components/resources/renderers/ClusterComplianceReportRenderer.tsx

@@ -1,7 +1,8 @@
-import { useState, useMemo } from 'react'
-import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle, Search } from 'lucide-react'
+import { useState, useMemo, useId } from 'react'
+import { ShieldCheck, CheckCircle2, XCircle, Search } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER } from './trivy-shared'
@@ -15,6 +16,10 @@ interface ClusterComplianceReportRendererProps {
 export function ClusterComplianceReportRenderer({ data }: ClusterComplianceReportRendererProps) {
   const [expandedSection, setExpandedSection] = useState(true)
   const [expandedControls, setExpandedControls] = useState<Set<string>>(new Set())
+  const sectionDisclosure = useDisclosure(expandedSection)
+  // Control rows are mapped inline, so they can't each call useDisclosure;
+  // one generated prefix plus the control id keeps aria-controls unique.
+  const controlPanelBase = useId()
   const [searchTerm, setSearchTerm] = useState('')
   const [showFailedOnly, setShowFailedOnly] = useState(false)
 
@@ -127,13 +132,14 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
       {sortedChecks.length > 0 && (
         <Section title="Controls">
           <button
+            {...sectionDisclosure.buttonProps}
             onClick={() => setExpandedSection(!expandedSection)}
             className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
           >
-            {expandedSection ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            <CollapseChevron open={expandedSection} className="w-3.5 h-3.5" />
             {sortedChecks.length} controls
           </button>
-          {expandedSection && (
+          <Collapse open={expandedSection} unmountOnExit id={sectionDisclosure.panelId}>
             <>
             {/* Search and filter */}
             <div className="flex items-center gap-2 mb-2">
@@ -174,10 +180,14 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
               {filteredChecks.map((check: any) => {
                 const hasFail = (check.totalFail || 0) > 0
                 const controlDef = controlMap.get(check.id)
-                const isExpanded = expandedControls.has(check.id)
+                // One predicate for header, caret and panel: a control with no
+                // definition has nothing to show, so it never reads as expanded.
+                const isExpanded = expandedControls.has(check.id) && !!controlDef
                 return (
                   <div key={check.id}>
                     <button
+                      aria-expanded={isExpanded}
+                      aria-controls={disclosurePanelId(controlPanelBase, check.id)}
                       onClick={() => toggleControl(check.id)}
                       className="w-full flex items-center gap-2 py-1.5 px-1 rounded hover:bg-theme-hover/50 text-left"
                     >
@@ -193,22 +203,18 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
                       <span className="text-[10px] text-theme-text-tertiary shrink-0">
                         {check.totalFail || 0}F / {check.totalPass || 0}P
                       </span>
-                      {isExpanded ? (
-                        <ChevronDown className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                      ) : (
-                        <ChevronRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                      )}
+                      <CollapseChevron open={isExpanded} className="w-3 h-3" />
                     </button>
-                    {isExpanded && controlDef && (
+                    <Collapse open={isExpanded} mountLazily id={disclosurePanelId(controlPanelBase, check.id)}>
                       <div className="ml-6 mr-1 mb-2 p-2.5 bg-theme-elevated/50 rounded border border-theme-border/50 space-y-2">
                         <div className="text-[10px] font-mono text-theme-text-tertiary">{check.id}</div>
-                        {controlDef.description && (
+                        {controlDef?.description && (
                           <div>
                             <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-0.5">Description</div>
                             <div className="text-xs text-theme-text-secondary">{controlDef.description}</div>
                           </div>
                         )}
-                        {controlDef.checks?.length > 0 && (
+                        {controlDef?.checks?.length > 0 && (
                           <div>
                             <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-0.5">Check IDs</div>
                             <div className="flex flex-wrap gap-1">
@@ -219,7 +225,7 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
                           </div>
                         )}
                       </div>
-                    )}
+                    </Collapse>
                   </div>
                 )
               })}
@@ -230,7 +236,7 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
               )}
             </div>
             </>
-          )}
+          </Collapse>
         </Section>
       )}
     </>

package/src/components/resources/renderers/CompositionRenderer.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react'
 import { clsx } from 'clsx'
 import { Layers, GitBranch, FileText, Boxes, ScrollText } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { CodeViewer } from '../../ui/CodeViewer'
 import { kindToPlural } from '../../../utils/navigation'
 
@@ -122,16 +124,7 @@ function CompositionBody({ data, onNavigate, revision }: CompositionRendererProp
                       />
                     )}
                   </PropertyList>
-                  {step.input && (
-                    <details className="mt-2">
-                      <summary className="text-xs text-theme-text-tertiary cursor-pointer hover:text-theme-text-secondary">
-                        Show input
-                      </summary>
-                      <div className="mt-1">
-                        <CodeViewer code={JSON.stringify(step.input, null, 2)} language="json" maxHeight="200px" />
-                      </div>
-                    </details>
-                  )}
+                  {step.input && <StepInputDisclosure input={step.input} />}
                 </div>
               )
             })}
@@ -216,3 +209,30 @@ export function CompositionRevisionRenderer({ data, onNavigate }: CompositionRev
     </>
   )
 }
+
+// Per-step input viewer. A native <details> looked nothing like the rest of
+// the drawer's disclosures and skipped the shared open/close motion. The
+// viewer renders on first open: one highlighted JSON pane per pipeline step
+// is real work to do for steps nobody expands.
+function StepInputDisclosure({ input }: { input: unknown }) {
+  const [open, setOpen] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(open)
+  return (
+    <div className="mt-2">
+      <button
+        {...buttonProps}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-1 text-xs text-theme-text-tertiary hover:text-theme-text-secondary"
+      >
+        <CollapseChevron open={open} className="h-3 w-3" />
+        Show input
+      </button>
+      <Collapse open={open} mountLazily id={panelId}>
+        <div className="mt-1">
+          <CodeViewer code={JSON.stringify(input, null, 2)} language="json" maxHeight="200px" />
+        </div>
+      </Collapse>
+    </div>
+  )
+}