@skyhook-io/k8s-ui 1.14.6 → 1.14.8

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>
+  )
+}

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>
       )}
     </>