@skyhook-io/radar-app 1.14.0 → 1.14.2

package/src/components/helm/HelmCompareRoute.tsx

@@ -32,6 +32,8 @@ import { getHelmStatusColor, getKindBadgeColor, SEVERITY_BADGE } from '../../uti
 import { formatDate } from './helm-utils'
 import { RoleGatedPanel } from './RoleGatedPanel'
 import { Tooltip } from '../ui/Tooltip'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 
 type DiffTone = 'success' | 'warning' | 'error' | 'info' | 'neutral'
 
@@ -342,6 +344,9 @@ function RevisionSelect({
   onChange: (revision: number) => void
 }) {
   const [open, setOpen] = useState(false)
+  // Presence outlives `open` by the menu exit so the list fades out in place;
+  // the outside-click / Escape listeners below still key off logical `open`.
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const [activeIndex, setActiveIndex] = useState(0)
   const rootRef = useRef<HTMLDivElement>(null)
   const listboxId = useId()
@@ -371,12 +376,14 @@ function RevisionSelect({
     if (open) setActiveIndex(selectedIndex)
   }, [open, selectedIndex])
 
+  // The listbox mounts a commit after `open` (presence hook); without
+  // `shouldRender` here a reopen at an unchanged activeIndex never scrolls.
   useEffect(() => {
-    if (!open) return
+    if (!open || !shouldRender) return
     const revision = revisions[activeIndex]
     if (!revision) return
     document.getElementById(`${listboxId}-${revision.revision}`)?.scrollIntoView({ block: 'nearest' })
-  }, [activeIndex, listboxId, open, revisions])
+  }, [activeIndex, listboxId, open, shouldRender, revisions])
 
   const selectRevision = (revision: number) => {
     setOpen(false)
@@ -438,11 +445,18 @@ function RevisionSelect({
         <span className="min-w-0 truncate">{selected ? formatRevisionOption(selected) : 'No revisions'}</span>
         <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
       </button>
-      {open && (
+      {shouldRender && (
         <div
           id={listboxId}
           role="listbox"
-          className="absolute right-0 top-full z-50 mt-1 max-h-80 w-[min(36rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-theme-border bg-theme-surface p-1 shadow-theme-lg"
+          inert={!open || undefined}
+          className={clsx(
+            'absolute right-0 top-full z-50 mt-1 max-h-80 w-[min(36rem,calc(100vw-2rem))] origin-top-right overflow-y-auto rounded-lg border border-theme-border bg-theme-surface p-1 shadow-theme-lg',
+            TRANSITION_MENU,
+            isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
+          )}
+          style={overlayTransitionStyle(isOpen, 'menu')}
         >
           {revisions.map((revision, index) => {
             const selectedRevision = revision.revision === value

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -4,7 +4,7 @@ import { FetchResult, useDockReservedHeight, compareVersions } from '@skyhook-io
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
-import { X, Copy, Check, RefreshCw, Package, Code, History, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock, GitCompare, ExternalLink, ChevronRight, SlidersHorizontal, Eye, Loader2 } from 'lucide-react'
+import { X, Copy, Check, RefreshCw, Package, Code, History, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock, GitCompare, ExternalLink, SlidersHorizontal, Eye, Loader2 } from 'lucide-react'
 import yaml from 'yaml'
 import { useNavigate } from 'react-router-dom'
 import { clsx } from 'clsx'
@@ -25,6 +25,8 @@ import { ManifestViewer } from './ManifestViewer'
 import { ValuesViewer } from './ValuesViewer'
 import { OwnedResources } from './OwnedResources'
 import { TrackChartSourceDialog } from './TrackChartSourceDialog'
+import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+import { Disclosure } from '../ui/Disclosure'
 
 interface HelmReleaseDrawerProps {
   release: SelectedHelmRelease
@@ -117,7 +119,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const [showTrackSource, setShowTrackSource] = useState(false)
   const [selectedVersion, setSelectedVersion] = useState<string | null>(null)
   const [adjustValues, setAdjustValues] = useState(false)
-  const [renderAdjustValues, setRenderAdjustValues] = useState(false)
   const [editedUpgradeYaml, setEditedUpgradeYaml] = useState('')
   const [upgradeYamlError, setUpgradeYamlError] = useState<string | null>(null)
   const [upgradeValuesSeeded, setUpgradeValuesSeeded] = useState(false)
@@ -357,7 +358,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     setUpgradeProgress([])
     setSelectedVersion(null)
     setAdjustValues(false)
-    setRenderAdjustValues(false)
     setEditedUpgradeYaml('')
     editedUpgradeYamlRef.current = ''
     setUpgradeYamlError(null)
@@ -383,7 +383,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       return
     }
 
-    setRenderAdjustValues(true)
     setEditedUpgradeYaml('')
     editedUpgradeYamlRef.current = ''
     setUpgradeYamlError(null)
@@ -911,24 +910,15 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                 aria-controls="helm-upgrade-values-panel"
                 className="flex items-center gap-1.5 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary disabled:opacity-50"
               >
-                <ChevronRight className={clsx('w-4 h-4 transition-transform duration-200', adjustValues && 'rotate-90')} />
+                <CollapseChevron open={adjustValues} className="w-4 h-4" />
                 <SlidersHorizontal className="w-3.5 h-3.5" />
                 Adjust your values (optional)
               </button>
             </Tooltip>
-            <div
-              id="helm-upgrade-values-panel"
-              className={`issue-details-motion ${adjustValues ? 'issue-details-motion-open' : ''}`}
-              onTransitionEnd={(event) => {
-                if (event.target !== event.currentTarget) return
-                if (event.propertyName !== 'grid-template-rows') return
-                if (!adjustValues) {
-                  setRenderAdjustValues(false)
-                }
-              }}
-            >
-              <div className="overflow-hidden">
-                {renderAdjustValues && (
+            {/* unmountOnExit: the editor (uncontrolled textarea + seeded values)
+                must reset between opens, and the values query only runs while
+                the panel is open. */}
+            <Collapse open={adjustValues} unmountOnExit id="helm-upgrade-values-panel">
                   <div className="mt-2">
                     <p className="mb-2 text-xs text-theme-text-tertiary">
                       These are your current settings — edit them to carry into {targetVersion}. What you see here is exactly what gets applied.
@@ -988,9 +978,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                       </Tooltip>
                     </div>
                   </div>
-                )}
-              </div>
-            </div>
+            </Collapse>
           </div>
         )}
         {upgradeProgress.length > 0 && <ProgressLog entries={upgradeProgress} />}
@@ -1138,14 +1126,11 @@ function HelmOperationBanner({
           </div>
           <p className="mt-1 text-sm text-theme-text-secondary">{operation.message}</p>
           {hasRawMessage && (
-            <details className="mt-2">
-              <summary className="cursor-pointer select-none text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary">
-                Show raw Helm error
-              </summary>
+            <Disclosure className="mt-2" summaryClassName="select-none text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary" summary="Show raw Helm error">
               <pre className="mt-2 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-theme-base/60 p-2 font-mono text-[11px] leading-relaxed text-theme-text-tertiary">
                 {rawMessage}
               </pre>
-            </details>
+            </Disclosure>
           )}
           {operation.failureDescription && !hasRawMessage && (
             <Tooltip content={operation.failureDescription} wrapperClassName="mt-1 flex">

package/src/components/helm/InstallWizard.tsx

@@ -9,6 +9,7 @@ import { useChartDetail, useNamespaces, useArtifactHubChart, installChartWithPro
 import { useCanHelmAct } from '../../api/client'
 import type { ChartSource, ChartDetail, ArtifactHubChartDetail } from '../../types'
 import { YamlEditor } from '../ui/YamlEditor'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { Markdown } from '../ui/Markdown'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
@@ -656,6 +657,7 @@ interface ValuesStepProps {
 
 function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartDetail, source }: ValuesStepProps) {
   const [showEditor, setShowEditor] = useState(false)
+  const editorDisclosure = useDisclosure(showEditor)
 
   const isLocal = source === 'local'
   const localDetail = chartDetail as ChartDetail | undefined
@@ -700,11 +702,12 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
       {/* Collapsible editor section */}
       <div className="border border-theme-border rounded-lg overflow-hidden">
         <button
+          {...editorDisclosure.buttonProps}
           onClick={() => setShowEditor(!showEditor)}
           className="w-full flex items-center justify-between px-4 py-3 bg-theme-elevated/50 hover:bg-theme-elevated transition-colors"
         >
           <div className="flex items-center gap-2">
-            <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform', showEditor && 'rotate-90')} />
+            <CollapseChevron open={showEditor} className="w-4 h-4" />
             <span className="text-sm font-medium text-theme-text-primary">
               {hasValues ? (showEditor ? 'Hide' : 'Show') : 'Add'} configuration values
             </span>
@@ -715,7 +718,9 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
           </div>
         </button>
 
-        {showEditor && (
+        {/* unmountOnExit: the Monaco editor is heavy and its instance should
+            not outlive a closed section; values live in `valuesYaml` above. */}
+        <Collapse open={showEditor} unmountOnExit id={editorDisclosure.panelId}>
           <div className="p-4 border-t border-theme-border">
             {/* Action buttons */}
             <div className="flex items-center gap-3 mb-4">
@@ -777,7 +782,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
               </div>
             )}
           </div>
-        )}
+        </Collapse>
       </div>
     </div>
   )

package/src/components/home/MCPSetupDialog.tsx

@@ -1,8 +1,9 @@
 import { useRef, useEffect, useState, useCallback } from 'react'
-import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, ChevronRight, Pin } from 'lucide-react'
+import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, Pin } from 'lucide-react'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { MCP_TOOL_CATALOG } from './mcpToolCatalog'
 import { Tooltip } from '../ui/Tooltip'
+import { Disclosure } from '../ui/Disclosure'
 
 interface MCPSetupDialogProps {
   open: boolean
@@ -285,17 +286,22 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               { icon: Terminal, name: 'OpenAI Codex', path: '~/.codex/config.toml', config: codexConfig },
               { icon: Terminal, name: 'Gemini CLI', path: '~/.gemini/settings.json', config: geminiConfig },
             ].map((agent) => (
-              <details key={agent.name} className="group rounded-md border border-theme-border/50 bg-theme-base/30">
-                <summary className="flex items-center gap-2 px-3 py-2 select-none list-none hover:bg-theme-hover/50 rounded-md transition-colors [&::-webkit-details-marker]:hidden">
-                  <ChevronRight className="w-3.5 h-3.5 text-theme-text-tertiary transition-transform group-open:rotate-90" />
-                  <agent.icon className="w-4 h-4 text-theme-text-tertiary" />
-                  <span className="text-sm font-medium text-theme-text-primary">{agent.name}</span>
-                  {agent.path && <span className="text-[10px] text-theme-text-tertiary ml-auto">{agent.path}</span>}
-                </summary>
+              <Disclosure
+                key={agent.name}
+                className="rounded-md border border-theme-border/50 bg-theme-base/30"
+                summaryClassName="gap-2 px-3 py-2 select-none hover:bg-theme-hover/50 rounded-md transition-colors"
+                summary={
+                  <>
+                    <agent.icon className="w-4 h-4 text-theme-text-tertiary" />
+                    <span className="text-sm font-medium text-theme-text-primary">{agent.name}</span>
+                    {agent.path && <span className="text-[10px] text-theme-text-tertiary ml-auto">{agent.path}</span>}
+                  </>
+                }
+              >
                 <div className="px-3 pb-3 pt-1">
                   <CodeBlock>{agent.config}</CodeBlock>
                 </div>
-              </details>
+              </Disclosure>
             ))}
           </div>
 

package/src/components/portforward/PortForwardManager.tsx

@@ -33,6 +33,7 @@ import { openExternal } from '../../utils/navigation'
 import { apiUrl } from '../../api/config'
 import { apiFetch, useCapabilities } from '../../api/client'
 import { pluralize } from '@skyhook-io/k8s-ui'
+import { Collapse } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 
 // --- Types -------------------------------------------------------------------
 
@@ -661,17 +662,10 @@ export function PortForwardPanel() {
           keeping border and rounded corners correct at every intermediate height. */}
       <div className="overflow-hidden rounded-xl bg-theme-surface dark:bg-theme-elevated border-2 border-skyhook-500/35 dark:border-skyhook-400/40 shadow-2xl dark:shadow-[0_24px_60px_-12px_rgba(0,0,0,0.75),0_10px_24px_-6px_rgba(0,0,0,0.45)]">
 
-        {/* Grid sizer — the height engine. grid-template-rows 0fr→1fr animates
-            height from 0 to auto. Content clips from the bottom up, creating a
-            natural top-to-bottom reveal (header appears first, sessions follow). */}
-        <div
-          className={clsx(
-            'grid transition-[grid-template-rows] duration-300',
-            isPanelOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-          )}
-          style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
-        >
-          <div className="overflow-hidden">
+        {/* Height engine — Collapse animates grid-template-rows 0fr→1fr so the
+            shell grows from 0 to auto. Content clips from the bottom up, creating
+            a natural top-to-bottom reveal (header appears first, sessions follow). */}
+        <Collapse open={isPanelOpen}>
 
       {/* Header — tinted green when all sessions running, red when any have failed. */}
       <div
@@ -927,8 +921,7 @@ export function PortForwardPanel() {
         )}
       </div>
 
-          </div>{/* /overflow-hidden */}
-        </div>{/* /grid-sizer */}
+        </Collapse>
       </div>{/* /panel-shell */}
 
       {/* Caret — rendered after the shell so it paints on top (z-10). Opaque fill

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Loader2, Wifi, WifiOff } from "lucide-react";
+import { Disclosure } from "../ui/Disclosure";
 import {
   AreaChart,
   SeriesLegend,
@@ -213,10 +214,9 @@ export function PrometheusChartsGrid({
 
       <div className="metrics-layout min-w-0 px-4 pt-4">
         {isWorkload && <h3 className="mb-2 text-sm font-semibold text-theme-text-primary">Network and storage</h3>}
-        {isWorkload && <details className="mb-2 text-xs text-theme-text-secondary">
-          <summary className="cursor-pointer">Pod-name matched · identity unverified</summary>
+        {isWorkload && <Disclosure className="mb-2 text-xs text-theme-text-secondary" summary="Pod-name matched · identity unverified">
           <p className="mt-2 max-w-2xl text-sm leading-relaxed">These charts match current Pod names, independently of the identity-checked charts above. Matching names in a shared backend may include another cluster.</p>
-        </details>}
+        </Disclosure>}
         <div className="metrics-chart-grid">
           {chartPanels.filter(({ def }) => !isWorkload || (def.key !== "cpu" && def.key !== "memory")).map(renderPanel)}
         </div>

package/src/components/resource/WorkloadMetricsHelpDialog.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { ExternalLink, X } from 'lucide-react'
+import { Disclosure } from '../ui/Disclosure'
 import type { WorkloadMetrics } from '../../api/workloadMetrics'
 import type { PrometheusTimeRange } from '../../api/client'
 
@@ -124,8 +125,7 @@ export function WorkloadMetricsHelpContent({ data, pending, error }: Pick<Props,
         <div><dt className="font-medium text-theme-text-primary">Resource usage</dt><dd className="mt-1">CPU and memory include reporting containers and sidecars. Their historical charts show the workload total and maximum Pod; current-Pod charts show individual Pods. Throttling measures CFS periods, not CPU time lost.</dd></div>
       </dl>
     </section>
-    <details className="border-t border-theme-border pt-4">
-      <summary className="cursor-pointer font-medium text-theme-text-primary">Troubleshooting identity matching</summary>
+    <Disclosure className="border-t border-theme-border pt-4" summaryClassName="font-medium text-theme-text-primary" chevronClassName="h-4 w-4" summary="Troubleshooting identity matching">
       <div className="mt-3 space-y-3">
         <p>Check the affected chart’s warning first. Scope overrides address cluster identity; they do not add missing metrics, instrumentation or ownership history.</p>
         <p>If automatic matching cannot establish identity, an operator can explicitly assert the backend’s scope:</p>
@@ -140,6 +140,6 @@ export function WorkloadMetricsHelpContent({ data, pending, error }: Pick<Props,
         <p><strong className="font-medium">Desktop:</strong> automatic matching works without flags. Desktop does not expose these overrides yet; if one is required, use the standalone CLI with a verified scope.</p>
         <p><strong className="font-medium">Multiple Beyla observation jobs:</strong> workload charts currently honor <code className="font-mono text-xs">--beyla-job-selector</code> only alongside a verified scope override. Use one matcher, such as <code className="font-mono text-xs">{'\'job="primary-beyla"\''}</code>; Helm uses <code className="font-mono text-xs">traffic.beylaJobSelector</code>. A custom job name alone normally needs no override.</p>
       </div>
-    </details>
+    </Disclosure>
   </div>
 }

package/src/components/resource/WorkloadMetricsSection.tsx

@@ -18,6 +18,7 @@ import {
 } from "../../api/workloadMetrics";
 import { latestWorkloadValue, workloadPodValues } from "./workloadMetricValues";
 import { WorkloadMetricsHelpDialog } from './WorkloadMetricsHelpDialog';
+import { Disclosure } from '../ui/Disclosure';
 
 interface Props {
   kind: string;
@@ -87,14 +88,13 @@ export function WorkloadMetricsSection(props: Props) {
           />}
         </div>
         {(data?.panels.cpu || data?.panels.memory || data?.panels.throttling) && <p className="mt-2 text-xs text-theme-text-tertiary">Resource totals include reporting containers and sidecars.</p>}
-        {data && hasResourceDetails && <details className="mt-2 text-xs text-theme-text-tertiary">
-          <summary className="cursor-pointer">About resource metrics</summary>
+        {data && hasResourceDetails && <Disclosure className="mt-2 text-xs text-theme-text-tertiary" summary="About resource metrics">
           <div className="mt-2 max-w-2xl space-y-2 text-sm leading-relaxed text-theme-text-secondary">
             {hasHistoricalTotals && <p>In workload-history CPU and memory charts, Workload is the total across reporting Pods; Maximum Pod exposes skew.</p>}
             {data.history.throttling?.mode === 'workload-history' && <p>Throttling is weighted by total periods, not an average of Pod percentages.</p>}
             {resourceNotice?.state === 'stale' && <ul className="space-y-1">{(['cpu', 'memory', 'throttling'] as const).map((key) => data.panels[key]?.reason && <li key={key}>{key}: {data.panels[key]!.reason}</li>)}</ul>}
           </div>
-        </details>}
+        </Disclosure>}
       </section>
       {nameMatchedFallbacks.length > 0 && <details aria-label="Name-matched resource metrics">
         <summary className="mb-2 cursor-pointer text-xs text-theme-text-secondary">Basic {nameMatchedFallbacks.map((key) => key === 'cpu' ? 'CPU' : 'memory').join(' / ')} · identity unverified</summary>
@@ -116,13 +116,12 @@ export function WorkloadMetricsSection(props: Props) {
 
 function HistoryNotice({ scope, omitReason }: { scope?: WorkloadMetrics['history']['cpu']; omitReason?: string }) {
   if (!scope) return null;
-  return <details className={`text-xs ${scope.mode === 'workload-history' ? 'text-theme-text-tertiary' : SEVERITY_TEXT.warning}`}>
-    <summary className="cursor-pointer">{scope.mode === 'workload-history' ? 'Workload history' : scope.mode === 'current-pods' ? 'Current Pods only' : 'Workload history unavailable'}</summary>
+  return <Disclosure className={`text-xs ${scope.mode === 'workload-history' ? 'text-theme-text-tertiary' : SEVERITY_TEXT.warning}`} summary={scope.mode === 'workload-history' ? 'Workload history' : scope.mode === 'current-pods' ? 'Current Pods only' : 'Workload history unavailable'}>
     <div className="my-2 max-w-2xl space-y-2 text-sm leading-relaxed text-theme-text-secondary">
       <p>{scope.mode === 'workload-history' ? 'Includes previous replicas where ownership and metrics were retained. Missing history produces gaps, not current-Pod substitutes.' : scope.mode === 'current-pods' ? 'Previous replicas are not reconstructed.' : 'Workload history could not be checked.'}</p>
       {scope.reason && scope.reason !== omitReason && <p>{scope.reason}</p>}
     </div>
-  </details>;
+  </Disclosure>;
 }
 
 function WorkloadRequests({ data, isLoading, error, setSource }: {
@@ -172,12 +171,11 @@ function WorkloadRequests({ data, isLoading, error, setSource }: {
           <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1"><h3 className="text-sm font-semibold text-theme-text-primary">
             Requests
           </h3>
-          {hasRequests ? <HistoryNotice scope={data.history.requests} /> : <details className={`text-xs ${requestPanel?.state === 'error' ? SEVERITY_TEXT.error : requestPanel?.state === 'partial' ? SEVERITY_TEXT.warning : 'text-theme-text-secondary'}`}>
-            <summary className="cursor-pointer">{requestPanel?.state === 'error' ? 'Request metrics query failed' : requestPanel?.state === 'partial' ? 'Request metrics withheld' : requestPanel?.state === 'detecting' ? 'Checking request metrics…' : 'No usable HTTP metrics in this window'}</summary>
+          {hasRequests ? <HistoryNotice scope={data.history.requests} /> : <Disclosure className={`text-xs ${requestPanel?.state === 'error' ? SEVERITY_TEXT.error : requestPanel?.state === 'partial' ? SEVERITY_TEXT.warning : 'text-theme-text-secondary'}`} summary={requestPanel?.state === 'error' ? 'Request metrics query failed' : requestPanel?.state === 'partial' ? 'Request metrics withheld' : requestPanel?.state === 'detecting' ? 'Checking request metrics…' : 'No usable HTTP metrics in this window'}>
             {unmatchedSources.length > 0 ? <ul className="mt-2 max-w-2xl space-y-1 text-sm leading-relaxed text-theme-text-secondary">
               {unmatchedSources.map((candidate) => <li key={candidate.id}><span className="font-medium">{candidate.label}:</span> {data.attribution?.[candidate.id]}</li>)}
             </ul> : <p className="mt-2 max-w-2xl text-sm leading-relaxed text-theme-text-secondary">{requestPanel?.reason || 'No usable HTTP request samples were returned for this workload.'}</p>}
-          </details>}
+          </Disclosure>}
           </div>
           {sources.length > 1 ? (
             <select
@@ -233,8 +231,7 @@ function WorkloadRequests({ data, isLoading, error, setSource }: {
             </div>
             <div className="mt-2 text-xs text-theme-text-tertiary space-y-2">
               <p>{Math.round(data.rateWindowSeconds / 60)}-minute rates{reportingPods != null && <> · {data.history.requests?.mode === 'workload-history' ? `${reportingPods} Pods reporting` : `${reportingPods} of ${data.podsTotal} current Pods reporting`}</>}</p>
-              <details>
-                <summary className="cursor-pointer">Coverage details</summary>
+              <Disclosure summary="Coverage details">
                 <div className="mt-2 max-w-2xl space-y-2 text-sm leading-relaxed text-theme-text-secondary">
                 {reportingPods == null && <p>Reporting Pod count unavailable.</p>}
                 <p>
@@ -247,7 +244,7 @@ function WorkloadRequests({ data, isLoading, error, setSource }: {
                 </p>
                 {requestNotice?.state === 'stale' && <ul className="space-y-1">{(['requests', 'errors', 'p50', 'p95'] as const).map((key) => data.panels[key]?.reason && <li key={key}>{key}: {data.panels[key]!.reason}</li>)}</ul>}
                 </div>
-              </details>
+              </Disclosure>
             </div>
           </>
         ) : null}
@@ -352,10 +349,9 @@ function sharedPanelNotice(panels: (WorkloadMetricPanel | undefined)[]) {
 function MetricNotice({ panel, empty, label }: { panel?: WorkloadMetricPanel; empty?: boolean; label?: string }) {
   if (!empty && !panel?.reason && panel?.state !== 'stale') return null;
   const tone = panel?.state === 'error' ? SEVERITY_TEXT.error : panel?.state === 'partial' || panel?.state === 'stale' ? SEVERITY_TEXT.warning : 'text-theme-text-secondary';
-  if (panel?.state === 'stale' && !empty) return <details className={`mt-2 text-xs ${tone}`}>
-    <summary className="cursor-pointer">{label && `${label}: `}Historical samples only · no recent samples</summary>
+  if (panel?.state === 'stale' && !empty) return <Disclosure className={`mt-2 text-xs ${tone}`} summary={<>{label && `${label}: `}Historical samples only · no recent samples</>}>
     {panel.reason && <p className="mt-2 max-w-2xl text-sm leading-relaxed text-theme-text-secondary">{panel.reason}</p>}
-  </details>;
+  </Disclosure>;
   return <p role="status" className={`mt-2 text-xs ${tone}`}>{label && `${label}: `}{panel?.reason || 'No usable samples in this window.'}</p>;
 }
 
@@ -421,14 +417,12 @@ function PodComparison({
       <h4 className="mb-2 text-xs font-medium text-theme-text-secondary">
         Compare current Pods · latest samples
       </h4>
-      {hasTemplate && <details className="mb-2 text-xs text-theme-text-tertiary">
-        <summary className="cursor-pointer">Template per Pod · actual Pods may differ</summary>
+      {hasTemplate && <Disclosure className="mb-2 text-xs text-theme-text-tertiary" summary="Template per Pod · actual Pods may differ">
         <p className="mt-2 max-w-2xl text-sm leading-relaxed text-theme-text-secondary">Actual Pods can differ after injection or rollout. Template values below are not measured allocations for each Pod.</p>
-      </details>}
-      {window.pods < window.podsTotal && <details className={`mb-2 text-xs ${SEVERITY_TEXT.warning}`}>
-        <summary className="cursor-pointer">Comparing {window.pods} of {window.podsTotal} current Pods</summary>
+      </Disclosure>}
+      {window.pods < window.podsTotal && <Disclosure className={`mb-2 text-xs ${SEVERITY_TEXT.warning}`} summary={<>Comparing {window.pods} of {window.podsTotal} current Pods</>}>
         <p className="mt-2 text-sm text-theme-text-secondary">This comparison cap does not limit workload-history totals.</p>
-      </details>}
+      </Disclosure>}
       {pending.length > 0 && <p role="status" className="mb-2 text-xs text-theme-text-secondary">Matching {pending.map(({ label }) => label).join(' / ')} metrics to current Pods…</p>}
       {Array.from(notices, ([key, { labels, panel }]) => <MetricNotice key={key} panel={panel} label={labels.join(' / ')} />)}
       <div className="max-h-72 overflow-auto">

package/src/components/resources/PodFilePreview.tsx

@@ -3,6 +3,7 @@ import Editor from '@monaco-editor/react'
 import { AlertTriangle, Download, FileText, RotateCw } from 'lucide-react'
 import { PaneLoader, ensureMonacoRuntime } from '@skyhook-io/k8s-ui'
 import { formatBytes } from '../../utils/format'
+import { Disclosure } from '../ui/Disclosure'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 
 // A curated inline viewer for text files inside a pod container, rendered in
@@ -296,12 +297,11 @@ function PreviewErrorState({
       </div>
 
       {shape.details && (
-        <details className="mt-4 text-xs text-theme-text-tertiary">
-          <summary className="cursor-pointer hover:text-theme-text-secondary">Technical details</summary>
+        <Disclosure className="mt-4 text-xs text-theme-text-tertiary" summaryClassName="hover:text-theme-text-secondary" summary="Technical details">
           <div className="mt-2 font-mono whitespace-pre-wrap text-left bg-theme-elevated/40 p-3 rounded max-w-xl">
             {shape.details}
           </div>
-        </details>
+        </Disclosure>
       )}
     </div>
   )

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

@@ -5,6 +5,7 @@ import { CurlButton, CurlPanel, isHttpishPort, defaultScheme, defaultPathForPort
 import { useResources } from '../../../api/client'
 import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
 import type { ResourceRef } from '../../../types'
+import { DURATION_DISCLOSURE } from '@skyhook-io/k8s-ui/utils/animation'
 
 interface ServiceRendererProps {
   data: any
@@ -32,7 +33,7 @@ export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRen
     setCurl((p) => (p ? { ...p, closing: true } : null))
     // Only drop the panel if it's still the one closing. Opening another port
     // (which sets closing:false) before this fires must not clear the new panel.
-    window.setTimeout(() => setCurl((p) => (p?.closing ? null : p)), 220)
+    window.setTimeout(() => setCurl((p) => (p?.closing ? null : p)), DURATION_DISCLOSURE + 20)
   }, [])
   const spec = data.spec || {}
   const shouldLoadEndpointSlices = Boolean(

package/src/components/settings/SettingsDialog.tsx

@@ -9,7 +9,7 @@ import {
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { apiUrl, getAuthHeaders, getCredentialsMode, routePath } from '../../api/config'
 import {
   useCloudRole, useVersionCheck, useClusterInfo, usePrometheusStatus, useArgoStatus, useCapabilities,
@@ -135,7 +135,7 @@ export function SettingsDialog({
 }: SettingsDialogProps) {
   const queryClient = useQueryClient()
   const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('dialog'))
   const { data: versionInfo } = useVersionCheck()
   // Radar configuration (kubeconfig, port, integrations…) is host-level and
   // affects every user of this instance, so it's gated to owners. Personal
@@ -473,6 +473,7 @@ export function SettingsDialog({
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={() => requestCloseRef.current()}
       />
 
@@ -499,6 +500,7 @@ export function SettingsDialog({
           TRANSITION_PANEL,
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
       >
         {/* Header — spans both panes */}
         <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">

package/src/components/ui/CommandPalette.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
 import { Search, X, ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useCommandItems, bestScore, type CommandItem, type CommandItemCallbacks } from './command-items'
@@ -130,15 +130,19 @@ export function CommandPalette({ onClose, isOpen = true, ...callbacks }: Command
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={onClose}
       />
 
       {/* Panel */}
-      <div className={clsx(
-        'relative w-full max-w-lg mx-4 dialog overflow-hidden',
-        TRANSITION_PANEL,
-        isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
-      )}>
+      <div
+        className={clsx(
+          'relative w-full max-w-lg mx-4 dialog overflow-hidden',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
+        )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
+      >
         {/* Search input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
           <Search className="w-5 h-5 text-theme-text-secondary shrink-0" />

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import { X, Copy, Check, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
 import { openExternal } from '../../utils/navigation'
 import { useDiagnostics } from '../../api/client'
 import type { DiagnosticsSnapshot, DiagEnvVar, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry, DiagCacheSyncStatus, DiagInformerSyncStatus, DiagSyncPhase, DiagSampleWindow } from '../../api/client'
@@ -72,15 +72,19 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={onClose}
       />
 
       {/* Panel */}
-      <div className={clsx(
-        'relative w-full max-w-2xl mx-4 dialog overflow-hidden flex flex-col max-h-[84vh]',
-        TRANSITION_PANEL,
-        isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
-      )}>
+      <div
+        className={clsx(
+          'relative w-full max-w-2xl mx-4 dialog overflow-hidden flex flex-col max-h-[84vh]',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
+        )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border shrink-0">
           <div className="flex items-center gap-3">