@skyhook-io/k8s-ui 1.14.6 → 1.14.7

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

@@ -1,7 +1,8 @@
-import { useState, useMemo } from 'react'
-import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle } from 'lucide-react'
+import { useState, useMemo, useId } from 'react'
+import { ShieldCheck, CheckCircle2, XCircle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../../ui/Collapse'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER, TrivyAlertBanner } from './trivy-shared'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
@@ -65,6 +66,10 @@ function groupChecks(checks: any[]): GroupedCheck[] {
 export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererProps) {
   const [expandedSection, setExpandedSection] = useState(true)
   const [expandedChecks, setExpandedChecks] = useState<Set<string>>(new Set())
+  const sectionDisclosure = useDisclosure(expandedSection)
+  // Check rows are mapped inline, so they can't each call useDisclosure; one
+  // generated prefix plus the check id keeps aria-controls unique.
+  const checkPanelBase = useId()
 
   const report = data.report || {}
   const summary = report.summary || {}
@@ -149,19 +154,22 @@ export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererPro
       {grouped.length > 0 && (
         <Section title="Checks">
           <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" />
             {grouped.length} unique checks{containerCount > 0 ? ` (${containerCount} containers scanned)` : ''}
           </button>
-          {expandedSection && (
+          <Collapse open={expandedSection} unmountOnExit id={sectionDisclosure.panelId}>
             <div className="space-y-0.5">
               {grouped.map((group) => {
                 const isExpanded = expandedChecks.has(group.checkID)
                 return (
                   <div key={group.checkID}>
                     <button
+                      aria-expanded={isExpanded}
+                      aria-controls={disclosurePanelId(checkPanelBase, group.checkID)}
                       onClick={() => toggleCheck(group.checkID)}
                       className="w-full flex items-center gap-2 py-1.5 px-1 rounded hover:bg-theme-hover/50 text-left"
                     >
@@ -177,13 +185,9 @@ export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererPro
                       {group.count > 1 && (
                         <span className="text-[10px] text-theme-text-tertiary shrink-0">{group.count} containers</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 && (
+                    <Collapse open={isExpanded} mountLazily id={disclosurePanelId(checkPanelBase, group.checkID)}>
                       <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">{group.checkID}</div>
                         {group.description && (
@@ -209,12 +213,12 @@ export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererPro
                           </div>
                         )}
                       </div>
-                    )}
+                    </Collapse>
                   </div>
                 )
               })}
             </div>
-          )}
+          </Collapse>
         </Section>
       )}
     </>

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

@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { KeyRound, ChevronDown, ChevronRight } from 'lucide-react'
+import { KeyRound } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
@@ -16,6 +17,7 @@ const INITIAL_SHOW_COUNT = 50
 export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendererProps) {
   const [showAll, setShowAll] = useState(false)
   const [expanded, setExpanded] = useState(true)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   const report = data.report || {}
   const summary = report.summary || {}
@@ -70,13 +72,17 @@ export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendere
       {secrets.length > 0 && (
         <Section title="Exposed Secrets">
           <button
+            {...buttonProps}
             onClick={() => setExpanded(!expanded)}
             className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
           >
-            {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
             {pluralize(secrets.length, 'secret')}
           </button>
-          {expanded && (
+          {/* The table can run to hundreds of rows; unmount it while closed
+              so a collapsed report stays cheap. Filters live above, so
+              nothing is lost. */}
+          <Collapse open={expanded} unmountOnExit id={panelId}>
             <div className="overflow-x-auto -mx-1">
               <table className="w-full text-xs">
                 <thead>
@@ -113,7 +119,7 @@ export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendere
                 </button>
               )}
             </div>
-          )}
+          </Collapse>
         </Section>
       )}
     </>

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

@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { Info, CheckCircle, XCircle, AlertCircle, ChevronRight, ChevronDown, FileCode, AlertTriangle, Layers } from 'lucide-react'
+import { Info, CheckCircle, XCircle, AlertCircle, FileCode, AlertTriangle, Layers } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { getGenericResourceStatus } from '../generic-status'
 import type { HealthLevel } from '../resource-utils'
 
@@ -244,19 +245,23 @@ interface NestedObjectViewerProps {
 
 function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps) {
   const [expanded, setExpanded] = useState(depth < 1)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   if (Array.isArray(value)) {
     return (
       <div className="text-sm">
         <button
+          {...buttonProps}
           onClick={() => setExpanded(!expanded)}
           className="flex items-center gap-1 text-theme-text-secondary hover:text-theme-text-primary transition-colors"
         >
-          {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+          <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
           <span className="font-medium">{name}</span>
           <span className="text-xs text-theme-text-tertiary">({value.length} items)</span>
         </button>
-        {expanded && (
+        {/* Recursive and unbounded: closed branches unmount so a deep object
+            costs only the rows the user has actually opened. */}
+        <Collapse open={expanded} unmountOnExit id={panelId}>
           <div className="ml-5 mt-1 space-y-1">
             {value.map((item, i) => {
               if (typeof item === 'object' && item !== null) {
@@ -269,7 +274,7 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
               )
             })}
           </div>
-        )}
+        </Collapse>
       </div>
     )
   }
@@ -282,14 +287,15 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
     return (
       <div className="text-sm">
         <button
+          {...buttonProps}
           onClick={() => setExpanded(!expanded)}
           className="flex items-center gap-1 text-theme-text-secondary hover:text-theme-text-primary transition-colors"
         >
-          {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+          <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
           <span className="font-medium">{name}</span>
           <span className="text-xs text-theme-text-tertiary">({entries.length} fields)</span>
         </button>
-        {expanded && (
+        <Collapse open={expanded} unmountOnExit id={panelId}>
           <div className="ml-5 mt-1 space-y-1">
             {simpleEntries.map(([k, v]) => (
               <div key={k} className="flex items-start gap-2 text-xs">
@@ -301,7 +307,7 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
               <NestedObjectViewer key={k} name={formatFieldName(k)} value={v} depth={depth + 1} />
             ))}
           </div>
-        )}
+        </Collapse>
       </div>
     )
   }

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

@@ -1,8 +1,9 @@
 import type React from 'react'
-import { Shield, ShieldCheck, ShieldAlert, FileWarning, ListChecks, ChevronDown, ChevronRight } from 'lucide-react'
+import { Shield, ShieldCheck, ShieldAlert, FileWarning, ListChecks } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useState } from 'react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron } from '../../ui/Collapse'
 import {
   getPolicyReportSummary,
   getPolicyReportResults,
@@ -60,7 +61,7 @@ function ResultRow({ result }: { result: any }) {
         onClick={() => hasMessage && setExpanded(!expanded)}
       >
         {hasMessage ? (
-          expanded ? <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={expanded} className="w-3 h-3" />
         ) : (
           <span className="w-3 shrink-0" />
         )}
@@ -80,7 +81,8 @@ function ResultRow({ result }: { result: any }) {
           <span className="text-theme-text-tertiary truncate">/ {result.rule}</span>
         )}
       </div>
-      {expanded && message && (
+      {/* A report can hold hundreds of rows; each detail renders on first open. */}
+      <Collapse open={expanded && hasMessage} mountLazily>
         <div className="px-2 pb-2 pl-7">
           <div className="text-xs text-theme-text-secondary break-all card-inner">
             {message}
@@ -97,7 +99,7 @@ function ResultRow({ result }: { result: any }) {
             </div>
           )}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

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

@@ -1,8 +1,8 @@
 import { ShieldAlert, ShieldCheck, ShieldQuestion } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useState } from 'react'
-import { ChevronDown, ChevronRight } from 'lucide-react'
 import { Section } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { SEVERITY_BADGE } from '../../../utils/badge-colors'
 import { isForbiddenError } from '../../../types/fetch-error'
 import { LookupFailureNote } from './LookupFailureNote'
@@ -829,6 +829,7 @@ function PassingGroup({
 }) {
   const [open, setOpen] = useState(false)
   const [showAll, setShowAll] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(open)
 
   // Nothing to open: the count is real but the subjects did not survive the
   // server cap, so the label stands alone rather than offering an empty drawer.
@@ -843,14 +844,16 @@ function PassingGroup({
   return (
     <div className="pt-0.5">
       <button
+        {...buttonProps}
         type="button"
         onClick={() => setOpen(!open)}
         className="flex items-center gap-1 text-xs text-theme-text-tertiary hover:text-theme-text-secondary"
       >
-        {open ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        <CollapseChevron open={open} className="w-3 h-3" />
         {label}
       </button>
-      {open && (
+      {/* One of these per rule; the subject list only renders once opened. */}
+      <Collapse open={open} mountLazily id={panelId}>
         <div className="space-y-1.5 mt-1.5">
           {visible.map((s, i) => (
             <SubjectRow
@@ -891,7 +894,7 @@ function PassingGroup({
             </div>
           )}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

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

@@ -1,7 +1,8 @@
 import { useState, useMemo } from 'react'
-import { Bell, Search, ChevronRight } from 'lucide-react'
+import { Bell, Search } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
 import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 import {
@@ -116,6 +117,7 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
 
   // Auto-expand when searching so matched rules are visible
   const expanded = searchTerm ? filteredRules.length > 0 : manualExpanded
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   // If searching and no matches, hide the group entirely
   if (searchTerm && filteredRules.length === 0) return null
@@ -123,11 +125,12 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
   return (
     <div className="card-inner">
       <button
+        {...buttonProps}
         onClick={() => setManualExpanded(!manualExpanded)}
         className="flex items-center justify-between w-full text-left"
       >
         <div className="flex items-center gap-2">
-          <ChevronRight className={clsx('w-3.5 h-3.5 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
+          <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
           <span className="text-sm text-theme-text-primary font-medium">{group.name}</span>
         </div>
         <div className="flex items-center gap-2">
@@ -147,20 +150,15 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
           {group.recordCount > 0 && <span>{group.recordCount} recording</span>}
         </div>
       )}
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        <div className="overflow-hidden">
-          <div className="mt-2 space-y-2">
-            {filteredRules.map((rule, i) => (
-              rule.type === 'alert'
-                ? <AlertRuleCard key={`alert-${rule.alert}-${i}`} rule={rule} />
-                : <RecordingRuleCard key={`rec-${rule.record}-${i}`} rule={rule} />
-            ))}
-          </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className="mt-2 space-y-2">
+          {filteredRules.map((rule, i) => (
+            rule.type === 'alert'
+              ? <AlertRuleCard key={`alert-${rule.alert}-${i}`} rule={rule} />
+              : <RecordingRuleCard key={`rec-${rule.record}-${i}`} rule={rule} />
+          ))}
         </div>
-      </div>
+      </Collapse>
     </div>
   )
 }

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

@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react'
-import { Package, ChevronDown, ChevronRight, Search } from 'lucide-react'
+import { Package, Search } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
 import { formatAge } from '../resource-utils'
 import { formatTrivyImage } from './trivy-shared'
@@ -14,6 +15,7 @@ const INITIAL_SHOW_COUNT = 100
 export function SbomReportRenderer({ data }: SbomReportRendererProps) {
   const [showAll, setShowAll] = useState(false)
   const [expanded, setExpanded] = useState(true)
+  const { panelId, buttonProps } = useDisclosure(expanded)
   const [searchTerm, setSearchTerm] = useState('')
 
   const report = data.report || {}
@@ -63,13 +65,17 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
       {bom.length > 0 && (
         <Section title="Components">
           <button
+            {...buttonProps}
             onClick={() => setExpanded(!expanded)}
             className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
           >
-            {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
             {bom.length} components
           </button>
-          {expanded && (
+          {/* The table can run to hundreds of rows; unmount it while closed
+              so a collapsed report stays cheap. Filters live above, so
+              nothing is lost. */}
+          <Collapse open={expanded} unmountOnExit id={panelId}>
             <div className="overflow-x-auto -mx-1">
               {/* Search */}
               <div className="flex items-center gap-2 mb-2 px-1">
@@ -131,7 +137,7 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
                 </button>
               )}
             </div>
-          )}
+          </Collapse>
         </Section>
       )}
     </>

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

@@ -1,7 +1,8 @@
 import { useState, useMemo } from 'react'
-import { Shield, Package, ChevronDown, ChevronRight, ChevronUp, ExternalLink, Search, ArrowUpDown, Wrench } from 'lucide-react'
+import { Shield, Package, ChevronDown, ChevronUp, ExternalLink, Search, ArrowUpDown, Wrench } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_BAR_COLORS, SEVERITY_TEXT_COLORS, SEVERITY_ORDER, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
@@ -27,6 +28,7 @@ const COLUMNS: { key: SortColumn; label: string }[] = [
 export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendererProps) {
   const [showAll, setShowAll] = useState(false)
   const [expanded, setExpanded] = useState(true)
+  const { panelId, buttonProps } = useDisclosure(expanded)
   const [searchTerm, setSearchTerm] = useState('')
   const [severityFilters, setSeverityFilters] = useState<Set<string>>(new Set())
   const [fixableOnly, setFixableOnly] = useState(false)
@@ -211,13 +213,17 @@ export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendere
       {vulnerabilities.length > 0 && (
         <Section title="Vulnerabilities" icon={Package}>
           <button
+            {...buttonProps}
             onClick={() => setExpanded(!expanded)}
             className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
           >
-            {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
             {vulnerabilities.length} vulnerabilities
           </button>
-          {expanded && (
+          {/* The table can run to hundreds of rows; unmount it while closed
+              so a collapsed report stays cheap. Filters live above, so
+              nothing is lost. */}
+          <Collapse open={expanded} unmountOnExit id={panelId}>
             <div className="overflow-x-auto -mx-1">
               {/* Search and filter toolbar */}
               <div className="flex items-center gap-2 mb-2 px-1">
@@ -339,7 +345,7 @@ export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendere
                 </button>
               )}
             </div>
-          )}
+          </Collapse>
         </Section>
       )}
     </>

package/src/components/resources/renderers/rollout/ReplicaSetProgression.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react'
-import { ChevronDown, ChevronRight, Box } from 'lucide-react'
+import { useState, useId } from 'react'
+import { Box } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge } from '../../resource-utils'
+import { Collapse, CollapseChevron, disclosurePanelId } from '../../../ui/Collapse'
 import { revisionRoleBadges } from '../../../shared/ResourceActionsBar'
 import type { WorkloadRevision, WorkloadPodInfo } from '../../../../types'
 
@@ -38,6 +39,9 @@ function podToneClass(pod: WorkloadPodInfo): string {
 // to that dialog — this is purely informational.
 export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }: ReplicaSetProgressionProps) {
   const [expanded, setExpanded] = useState<Set<number>>(new Set())
+  // Revision rows are mapped inline, so they can't each call useDisclosure;
+  // one generated prefix plus the revision number keeps aria-controls unique.
+  const panelBase = useId()
 
   const podsByHash = new Map<string, WorkloadPodInfo[]>()
   for (const pod of pods ?? []) {
@@ -59,17 +63,20 @@ export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }
     <div className="space-y-1">
       {revisions.map((rev) => {
         const revPods = rev.podHash ? podsByHash.get(rev.podHash) ?? [] : []
-        const isOpen = expanded.has(rev.number)
+        // One predicate for header, caret and panel: no pods, nothing to open.
+        const isOpen = expanded.has(rev.number) && revPods.length > 0
         return (
           <div key={rev.number} className="rounded border border-theme-border/50">
             <button
               type="button"
+              aria-expanded={isOpen}
+              aria-controls={disclosurePanelId(panelBase, rev.number)}
               onClick={() => toggle(rev.number)}
               className="flex w-full items-center gap-2 px-2 py-1.5 text-left hover:bg-theme-hover"
               disabled={revPods.length === 0}
             >
               {revPods.length > 0 ? (
-                isOpen ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" /> : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+                <CollapseChevron open={isOpen} className="h-3.5 w-3.5" />
               ) : (
                 <span className="w-3.5 shrink-0" />
               )}
@@ -85,7 +92,7 @@ export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }
               <span className="shrink-0 text-xs tabular-nums text-theme-text-tertiary">{rev.replicas ?? 0} replicas</span>
               <span className="shrink-0 text-xs text-theme-text-tertiary">{formatAge(rev.createdAt)}</span>
             </button>
-            {isOpen && revPods.length > 0 && (
+            <Collapse open={isOpen} mountLazily id={disclosurePanelId(panelBase, rev.number)}>
               <div className="space-y-0.5 border-t border-theme-border/50 px-2 py-1.5 pl-8">
                 {revPods.map((pod) => (
                   <div key={pod.name} className="flex items-center gap-2 py-0.5 text-xs">
@@ -107,7 +114,7 @@ export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }
                   </div>
                 ))}
               </div>
-            )}
+            </Collapse>
           </div>
         )
       })}

package/src/components/shared/CreateResourceDialog.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent } from 'react'
-import { AlertTriangle, Check, ChevronDown, ChevronRight, Loader2, Upload, X } from 'lucide-react'
+import { AlertTriangle, Check, Loader2, Upload, X } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import { YamlEditor, type YamlSchemaLoader } from '../ui/YamlEditor'
@@ -588,6 +589,7 @@ export function CreateResourceDialog({
 
 function ApplyErrorBanner({ error }: { error: string }) {
   const [expanded, setExpanded] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(expanded)
   const parsed = formatApplyError(error)
   const hasFriendly = Boolean(parsed.suggestion)
   return (
@@ -603,19 +605,20 @@ function ApplyErrorBanner({ error }: { error: string }) {
       </div>
       {hasFriendly && (
         <button
+          {...buttonProps}
           type="button"
           onClick={() => setExpanded((value) => !value)}
           className="flex items-center gap-1 px-3 pb-2 text-red-500/60 hover:text-red-500/80 dark:text-red-400/60 dark:hover:text-red-400/80"
         >
-          {expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+          <CollapseChevron open={expanded} inheritColor className="h-3 w-3" />
           Details
         </button>
       )}
-      {expanded && hasFriendly && (
+      <Collapse open={expanded && hasFriendly} id={panelId}>
         <div className="break-all px-3 pb-2 font-mono leading-relaxed text-red-500/60 dark:text-red-400/60">
           {parsed.raw}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

package/src/components/timeline/TimelineList.tsx

@@ -7,13 +7,13 @@ import {
   CheckCircle,
   Clock,
   RefreshCw,
-  ChevronRight,
   Plus,
   Trash2,
   Shield,
   X,
 } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Collapse, CollapseChevron } from '../ui/Collapse'
 import { DiffViewer, DiffBadge } from './DiffViewer'
 import { TimelineToolbar } from './TimelineToolbar'
 import {
@@ -696,17 +696,20 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               aria-label={expanded ? 'Collapse changes' : 'Expand changes'}
               className="shrink-0 rounded p-0.5 text-theme-text-disabled hover:bg-theme-elevated hover:text-theme-text-secondary"
             >
-              <ChevronRight className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} />
+              <CollapseChevron open={expanded} inheritColor className="w-4 h-4" />
             </button>
           )}
         </div>
 
-        {/* Expanded details - only for items with diffs */}
-        {expanded && hasExpandableContent && item.diff && (
-          <div className="mt-3 pt-3 border-t-subtle">
-            <div className="text-xs text-theme-text-tertiary mb-2">Changes:</div>
-            <DiffViewer diff={item.diff} />
-          </div>
+        {/* Expanded details - only for items with diffs. A list holds many
+            cards, each diff is real work to render: mount on first open. */}
+        {hasExpandableContent && item.diff && (
+          <Collapse open={expanded} mountLazily>
+            <div className="mt-3 pt-3 border-t-subtle">
+              <div className="text-xs text-theme-text-tertiary mb-2">Changes:</div>
+              <DiffViewer diff={item.diff} />
+            </div>
+          </Collapse>
         )}
       </div>
     </div>
@@ -826,12 +829,12 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
             aria-label={expanded ? 'Collapse occurrences' : 'Expand occurrences'}
             className="shrink-0 rounded p-0.5 text-theme-text-disabled hover:bg-theme-elevated hover:text-theme-text-secondary"
           >
-            <ChevronRight className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} />
+            <CollapseChevron open={expanded} inheritColor className="w-4 h-4" />
           </button>
         </div>
 
         {/* Expanded details */}
-        {expanded && (
+        <Collapse open={expanded}>
           <div className="mt-3 pt-3 border-t-subtle space-y-3">
             {/* First occurrence */}
             <div className="flex items-start gap-2">
@@ -865,7 +868,7 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
               </div>
             </div>
           </div>
-        )}
+        </Collapse>
       </div>
     </div>
   )