@skyhook-io/k8s-ui 1.14.5 → 1.14.7

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

@@ -0,0 +1,150 @@
+import { Activity, Server } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
+
+interface AnalysisTemplateRendererProps {
+  data: any
+}
+
+// Every metric.provider Argo Rollouts defines. Order matches the CRD's own
+// AnalysisTemplate reference doc.
+const PROVIDER_KEYS = [
+  'prometheus', 'web', 'kubernetes', 'job', 'wavefront', 'newRelic',
+  'datadog', 'cloudWatch', 'graphite', 'influxdb', 'skywalking', 'plugin',
+] as const
+
+function detectProvider(metric: any): { name: string; details: any } | null {
+  const provider = metric?.provider
+  if (!provider) return null
+  for (const key of PROVIDER_KEYS) {
+    if (provider[key]) return { name: key, details: provider[key] }
+  }
+  const key = Object.keys(provider)[0]
+  return key ? { name: key, details: provider[key] } : null
+}
+
+function providerLabel(name: string): string {
+  switch (name) {
+    case 'web': return 'Web'
+    case 'newRelic': return 'New Relic'
+    case 'cloudWatch': return 'CloudWatch'
+    default: return name.charAt(0).toUpperCase() + name.slice(1)
+  }
+}
+
+// A metric's provider config is unbounded (a full Job PodSpec, a PromQL
+// query, a plugin's arbitrary args) — show the handful of fields an operator
+// actually scans for per provider, not a full dump.
+function ProviderDetails({ name, details }: { name: string; details: any }) {
+  switch (name) {
+    case 'prometheus':
+      return (
+        <>
+          {details.address && <Property label="Address" value={details.address} />}
+          {details.query && <Property label="Query" value={<code className="text-xs">{details.query}</code>} />}
+        </>
+      )
+    case 'web':
+      return (
+        <>
+          {details.url && <Property label="URL" value={details.url} />}
+          {details.jsonPath && <Property label="JSON Path" value={<code className="text-xs">{details.jsonPath}</code>} />}
+          {details.method && <Property label="Method" value={details.method} />}
+        </>
+      )
+    case 'job':
+      return (
+        <Property
+          label="Job Image"
+          value={details.spec?.template?.spec?.containers?.[0]?.image}
+        />
+      )
+    case 'kubernetes':
+      return <Property label="Function" value={details.function} />
+    case 'datadog':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'newRelic':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'graphite':
+      return (
+        <>
+          {details.address && <Property label="Address" value={details.address} />}
+          {details.query && <Property label="Query" value={<code className="text-xs">{details.query}</code>} />}
+        </>
+      )
+    case 'influxdb':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'wavefront':
+      return details.query ? <Property label="Query" value={<code className="text-xs">{details.query}</code>} /> : null
+    case 'plugin':
+      return null
+    default:
+      return null
+  }
+}
+
+// Pure spec renderer for AnalysisTemplate / ClusterAnalysisTemplate — no live
+// status to show (that's the AnalysisRun this template gets instantiated
+// into), just the metric definitions and args an operator configured.
+export function AnalysisTemplateRenderer({ data }: AnalysisTemplateRendererProps) {
+  const spec = data?.spec || {}
+  const metrics: any[] = spec.metrics || []
+  const args: any[] = spec.args || []
+
+  return (
+    <>
+      {metrics.length > 0 && (
+        <Section title={`Metrics (${metrics.length})`} icon={Activity} defaultExpanded>
+          <div className="space-y-2">
+            {metrics.map((metric: any) => {
+              const provider = detectProvider(metric)
+              return (
+                <div key={metric.name} className="card-inner space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-mono text-sm text-theme-text-primary">{metric.name}</span>
+                    {provider && <Badge severity="neutral" size="sm">{providerLabel(provider.name)}</Badge>}
+                  </div>
+                  <PropertyList>
+                    {metric.interval && <Property label="Interval" value={metric.interval} />}
+                    {metric.count != null && <Property label="Count" value={metric.count} />}
+                    {metric.initialDelay && <Property label="Initial Delay" value={metric.initialDelay} />}
+                    {metric.successCondition && (
+                      <Property label="Success if" value={<code className="text-xs">{metric.successCondition}</code>} />
+                    )}
+                    {metric.failureCondition && (
+                      <Property label="Fail if" value={<code className="text-xs">{metric.failureCondition}</code>} />
+                    )}
+                    {metric.failureLimit != null && <Property label="Failure Limit" value={metric.failureLimit} />}
+                    {metric.inconclusiveLimit != null && <Property label="Inconclusive Limit" value={metric.inconclusiveLimit} />}
+                    {metric.consecutiveErrorLimit != null && (
+                      <Property label="Consecutive Error Limit" value={metric.consecutiveErrorLimit} />
+                    )}
+                    {provider && <ProviderDetails name={provider.name} details={provider.details} />}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {args.length > 0 && (
+        <Section title={`Arguments (${args.length})`} icon={Server}>
+          <PropertyList>
+            {args.map((arg: any) => (
+              <Property
+                key={arg.name}
+                label={arg.name}
+                value={arg.value ?? (arg.valueFrom ? 'from reference' : undefined)}
+              />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {metrics.length === 0 && args.length === 0 && (
+        <div className="p-4 text-sm text-theme-text-tertiary">This template declares no metrics.</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>
+  )
+}

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

@@ -2,10 +2,14 @@ import { useState, useRef, useEffect } from 'react'
 import { AlertTriangle, Copy, Check } from 'lucide-react'
 import { Section, ExpandableSection } from '../../ui/drawer-components'
 import { Tooltip } from '../../ui/Tooltip'
+import type { Relationships, ResourceRef } from '../../../types'
+import { ReflectorSummary, ReflectorSection } from './ReflectorSection'
 import { formatBytes } from '../../../utils/format'
 
 interface ConfigMapRendererProps {
   data: any
+  relationships?: Relationships
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 // Short = single-line and under 120 chars — render inline
@@ -46,7 +50,7 @@ function CopyButton({ text }: { text: string }) {
   )
 }
 
-export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
+export function ConfigMapRenderer({ data, relationships, onNavigate }: ConfigMapRendererProps) {
   const dataEntries = Object.entries((data.data || {}) as Record<string, string>)
   const binaryDataKeys = Object.keys(data.binaryData || {})
 
@@ -62,6 +66,7 @@ export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
 
   return (
     <>
+      <ReflectorSummary data={data} reflection={relationships?.reflection} onNavigate={onNavigate} />
       <Section title={`Data (${dataEntries.length + binaryDataKeys.length} keys)`} defaultExpanded>
         <div className="space-y-3">
           {/* Short values: compact table */}
@@ -113,6 +118,8 @@ export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
         </div>
       </Section>
 
+      <ReflectorSection data={data} reflection={relationships?.reflection} onNavigate={onNavigate} />
+
       {data.immutable && (
         <div className="flex items-center gap-2 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-yellow-400 text-sm">
           <AlertTriangle className="w-4 h-4" />

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

@@ -0,0 +1,179 @@
+import { Activity, Boxes, Server } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, ConditionsSection } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { canaryStepTemplateRefs } from './RolloutRenderer'
+
+interface ExperimentRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function phaseClass(phase?: string): string {
+  switch (phase) {
+    case 'Successful':
+      return 'status-healthy'
+    case 'Running':
+    case 'Progressing':
+    case 'Pending':
+      return 'status-degraded'
+    case 'Inconclusive':
+      return 'status-alert'
+    case 'Failed':
+    case 'Error':
+      return 'status-unhealthy'
+    default:
+      return 'status-unknown'
+  }
+}
+
+// Experiments run one or more Deployment-shaped templates side by side
+// (often unweighted "just try it" baselines, not always traffic-split) for
+// spec.duration, optionally gated by the same AnalysisTemplate references a
+// canary analysis step uses. No live demo fixture exists for this CRD (see
+// scripts/rollouts-demo/README.md) — built against the public schema.
+export function ExperimentRenderer({ data, onNavigate }: ExperimentRendererProps) {
+  const spec = data?.spec || {}
+  const status = data?.status || {}
+  const phase = status.phase || 'Unknown'
+  const templates: any[] = spec.templates || []
+  const templateStatuses: any[] = status.templateStatuses || []
+  const analyses: any[] = spec.analyses || []
+  // The controller's real field is analysisRuns (verified live) — each entry
+  // is {name, analysisRun, phase}, not the analysisRunStatuses/status shape
+  // the public docs' examples suggest.
+  const analysisRunStatuses: any[] = status.analysisRuns || []
+
+  const templateStatusByName = new Map(templateStatuses.map((t) => [t.name, t]))
+  const analysisRunStatusByName = new Map(analysisRunStatuses.map((a) => [a.name, a]))
+
+  const ownerRollout = (data?.metadata?.ownerReferences || []).find((ref: any) => ref.kind === 'Rollout')
+
+  return (
+    <>
+      {(phase === 'Failed' || phase === 'Error') && (
+        <AlertBanner
+          variant="error"
+          title={phase === 'Error' ? 'Experiment could not run' : 'Experiment failed'}
+          message={status.message || 'One or more templates or analyses did not succeed.'}
+        />
+      )}
+
+      {phase === 'Inconclusive' && (
+        <AlertBanner
+          variant="warning"
+          title="Experiment inconclusive"
+          message={status.message || 'An analysis matched neither its success nor failure condition.'}
+        />
+      )}
+
+      <Section title="Status" icon={Server}>
+        <PropertyList>
+          <Property label="Phase" value={<span className={clsx('badge', phaseClass(phase))}>{phase}</span>} />
+          <Property label="Duration" value={spec.duration} />
+          <Property label="Message" value={status.message} />
+          <Property label="Available At" value={status.availableAt ? formatAge(status.availableAt) : undefined} />
+          {ownerRollout && (
+            <Property
+              label="Rollout"
+              value={
+                onNavigate ? (
+                  <button
+                    onClick={() => onNavigate({ kind: 'Rollout', namespace: data?.metadata?.namespace ?? '', name: ownerRollout.name })}
+                    className="text-brand hover:underline"
+                  >
+                    {ownerRollout.name}
+                  </button>
+                ) : (
+                  ownerRollout.name
+                )
+              }
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      {templates.length > 0 && (
+        <Section title={`Templates (${templates.length})`} icon={Boxes} defaultExpanded>
+          <div className="space-y-2">
+            {templates.map((tmpl: any) => {
+              const tmplStatus = templateStatusByName.get(tmpl.name)
+              return (
+                <div key={tmpl.name} className="card-inner space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-mono text-sm text-theme-text-primary">{tmpl.name}</span>
+                    {tmplStatus?.status && <span className={clsx('badge-sm', phaseClass(tmplStatus.status))}>{tmplStatus.status}</span>}
+                  </div>
+                  <PropertyList>
+                    <Property label="Replicas" value={tmpl.replicas} />
+                    {tmpl.weight !== undefined && <Property label="Weight" value={`${tmpl.weight}%`} />}
+                    {tmplStatus && (
+                      <Property
+                        label="Ready"
+                        value={`${tmplStatus.readyReplicas ?? 0}/${tmplStatus.replicas ?? tmpl.replicas ?? 0}`}
+                      />
+                    )}
+                    {tmplStatus?.podTemplateHash && <Property label="Pod Hash" value={tmplStatus.podTemplateHash} />}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {analyses.length > 0 && (
+        <Section title={`Analyses (${analyses.length})`} icon={Activity} defaultExpanded>
+          <PropertyList>
+            {analyses.map((analysis: any) => {
+              const runStatus = analysisRunStatusByName.get(analysis.name)
+              const refs = canaryStepTemplateRefs(analysis)
+              return (
+                <Property
+                  key={analysis.name}
+                  label={analysis.name}
+                  value={
+                    <span className="flex flex-wrap items-center gap-2">
+                      {runStatus?.phase && (
+                        <span className={clsx('badge-sm', phaseClass(runStatus.phase))}>{runStatus.phase}</span>
+                      )}
+                      {refs.map((ref) =>
+                        onNavigate ? (
+                          <button
+                            key={ref.name}
+                            onClick={() =>
+                              onNavigate({
+                                kind: ref.clusterScoped ? 'ClusterAnalysisTemplate' : 'AnalysisTemplate',
+                                namespace: ref.clusterScoped ? '' : data?.metadata?.namespace ?? '',
+                                name: ref.name,
+                              })
+                            }
+                            className="font-mono text-xs text-brand hover:underline"
+                          >
+                            {ref.name}
+                          </button>
+                        ) : (
+                          <span key={ref.name} className="font-mono text-xs text-theme-text-secondary">{ref.name}</span>
+                        )
+                      )}
+                      {runStatus?.analysisRun && onNavigate && (
+                        <button
+                          onClick={() => onNavigate({ kind: 'AnalysisRun', namespace: data?.metadata?.namespace ?? '', name: runStatus.analysisRun })}
+                          className="font-mono text-xs text-theme-text-tertiary hover:underline"
+                        >
+                          run: {runStatus.analysisRun}
+                        </button>
+                      )}
+                    </span>
+                  }
+                />
+              )
+            })}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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