@skyhook-io/k8s-ui 1.14.6 → 1.14.8

package/src/components/gitops/tree/GitOpsTreeGraph.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSubtitle } from './GitOpsTreeGraph'
+import type { GitOpsTreeNode } from '../../../types'
+
+function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
+  return {
+    id: 'node-1',
+    ref: { kind: 'Service', name: 'podinfo', namespace: 'demo-flux' },
+    role: 'declared',
+    tool: 'fluxcd',
+    ...extras,
+  }
+}
+
+describe('getSubtitle', () => {
+  it('shows what a healthy resource exposes, not that it is healthy', () => {
+    // The status dot and the left border stripe already paint a healthy node
+    // green, so the word adds nothing and the ports are the only thing here the
+    // rest of the card can't say.
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Service', value: 'ClusterIP :9898 +1 more' }],
+    }))).toBe('Synced • ClusterIP :9898 +1 more')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Pod', name: 'podinfo-6b4f8c9d7-xk2mv', namespace: 'demo-flux' },
+      role: 'generated',
+      health: 'Healthy',
+      info: [{ name: 'Phase', value: 'Running' }],
+    }))).toBe('Running')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Ingress', name: 'podinfo', namespace: 'demo-flux' },
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Host', value: 'podinfo.example.com' }],
+    }))).toBe('Synced • podinfo.example.com')
+  })
+
+  it('keeps every health value the stripe colour cannot identify on its own', () => {
+    // Progressing and Suspended are both yellow, Degraded and Missing both red.
+    // Drop the word and the two become indistinguishable.
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Progressing',
+      info: [{ name: 'Service', value: 'LoadBalancer :80' }],
+    }))).toBe('Synced • Progressing • LoadBalancer :80')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Deployment', name: 'podinfo', namespace: 'demo-flux' },
+      sync: 'OutOfSync',
+      health: 'Degraded',
+      info: [{ name: 'Ready', value: '2/3' }],
+    }))).toBe('OutOfSync • Degraded • 2/3')
+
+    expect(getSubtitle(node({
+      health: 'Unknown',
+      info: [{ name: 'Service', value: 'ClusterIP :80' }],
+    }))).toBe('Unknown • ClusterIP :80')
+  })
+
+  it('still reads as Healthy when there is nothing to say instead', () => {
+    // Kinds infoFromTopology doesn't cover, and remote Argo destinations, reach
+    // the tree with no info line at all. Those must not lose their status line.
+    expect(getSubtitle(node({ sync: 'Synced', health: 'Healthy' }))).toBe('Synced • Healthy')
+    expect(getSubtitle(node({ health: 'Healthy' }))).toBe('Healthy')
+    expect(getSubtitle(node({ sync: 'OutOfSync', health: 'Missing' }))).toBe('OutOfSync • Missing')
+  })
+
+  it('lets lifecycle and grouping own the line outright', () => {
+    expect(getSubtitle(node({
+      role: 'group',
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Phase', value: 'Running' }],
+    }))).toBe('Click to expand')
+
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Service', value: 'ClusterIP :9898 +1 more' }],
+      data: { deletionTimestamp: '2026-09-11T13:09:43Z' },
+    }))).toBe('Pending deletion')
+  })
+
+  it('falls back to the namespace only when the node states nothing else', () => {
+    expect(getSubtitle(node())).toBe('demo-flux')
+    expect(getSubtitle(node({ ref: { kind: 'ClusterRole', name: 'podinfo', namespace: '' } }))).toBe('')
+  })
+})

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -25,6 +25,7 @@ import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
 import { radarHealthNote } from '../health-provenance'
+import { servicePortsTooltip, type ServicePortEntry } from '../../topology/K8sResourceNode'
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
@@ -592,6 +593,15 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   // (ReplicaSets, Pods) are always Radar's read; marking each would be
   // noise.
   const radarNote = node.role === 'declared' ? radarHealthNote(node) : ''
+  // A Service's subtitle names its first port and counts the rest, so without a
+  // hover the ones behind "+1 more" can't be reached from the graph at all. Same
+  // affordance the topology graph's Service node carries, same renderer. Stood
+  // down when the card already explains an unhealthy verdict: that reason is
+  // what the hover should say, and only one tooltip is ever visible anyway.
+  const portsTooltip = kind === 'Service' && !cause
+    ? servicePortsTooltip((node.data?.ports as ServicePortEntry[] | undefined) ?? [])
+    : null
+  const subtitle = getSubtitle(node)
 
   const card = (
       <div
@@ -654,7 +664,13 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
               own page". The subtitle text alone wasn't enough — users were
               treating the count as an immutable fact rather than a button. */}
           <div className="mt-0.5 flex items-center gap-1 text-xs text-theme-text-secondary">
-            <span className="truncate">{getSubtitle(node)}</span>
+            {portsTooltip ? (
+              <Tooltip content={portsTooltip} position="bottom" wrapperClassName="min-w-0">
+                <span className="cursor-help truncate">{subtitle}</span>
+              </Tooltip>
+            ) : (
+              <span className="truncate">{subtitle}</span>
+            )}
             {(node.role === 'group' || gitopsTool) && <ChevronRight className="ml-auto h-3 w-3 shrink-0 text-theme-text-tertiary" />}
           </div>
           {chips.length > 0 && (
@@ -755,7 +771,21 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   return chips
 }
 
-function getSubtitle(node: GitOpsTreeNode): string {
+// The subtitle is the node's one line of prose, and sync, health and the
+// backend's info line all want it. It can't be won on precedence: the backend
+// derives a health for every node it can build an info line for, so a rule that
+// only reaches info when health is absent never reaches it at all, and a
+// Service's ports, a Pod's phase and an Ingress's host stay invisible.
+//
+// So all three share the line, and "Healthy" is the part that yields when the
+// space is contested. It is the one health value the node already states without
+// words — healthToTopology maps it onto the green status dot and the green left
+// stripe, one value to one colour. Progressing and Suspended are both yellow and
+// Degraded and Missing are both red, so for those the word is the only thing
+// that tells them apart and it keeps its place. "Healthy" gives up the line only
+// when there is a concrete info line to spend it on, so a node with nothing to
+// say instead still reads as Healthy.
+export function getSubtitle(node: GitOpsTreeNode): string {
   if (node.role === 'group') {
     // Action-oriented copy invites the click; "collapsed" alone reads as
     // a state description, not an affordance.
@@ -764,10 +794,10 @@ function getSubtitle(node: GitOpsTreeNode): string {
   if (isNodeTerminating(node)) {
     return 'Pending deletion'
   }
-  if (node.sync || node.health) {
-    return [node.sync, node.health].filter(Boolean).join(' • ')
-  }
-  if (node.info?.[0]?.value) return node.info[0].value
+  const info = node.info?.[0]?.value
+  const health = node.health === 'Healthy' && info ? undefined : node.health
+  const parts = [node.sync, health, info].filter(Boolean)
+  if (parts.length > 0) return parts.join(' • ')
   return node.ref.namespace || ''
 }
 

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