@skyhook-io/k8s-ui 1.14.6 → 1.14.7

package/src/components/timeline/TimelineStrip.tsx

@@ -26,6 +26,8 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { clsx } from 'clsx'
 import { Calendar, ChevronDown, ChevronLeft, ChevronRight, Minus, Plus } from 'lucide-react'
 import { Tooltip } from '../ui/Tooltip'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import {
   barHeight,
   clampLensToSelection,
@@ -100,6 +102,7 @@ function DateTimeField({ label, valueMs, onChange, nowMs }: {
   nowMs: number
 }) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const rootRef = useRef<HTMLDivElement>(null)
   const value = new Date(valueMs)
   const [viewY, setViewY] = useState(() => value.getFullYear())
@@ -145,9 +148,16 @@ function DateTimeField({ label, valueMs, onChange, nowMs }: {
         {fieldStamp(valueMs)}
         <Calendar className="h-3 w-3 shrink-0 text-theme-text-tertiary" />
       </button>
-      {open && (
+      {shouldRender && (
         <div
-          className="absolute left-0 top-full z-[60] mt-1 w-[232px] rounded-lg border border-theme-border bg-theme-surface p-2.5 shadow-theme-lg"
+          inert={!open}
+          className={clsx(
+            'absolute left-0 top-full z-[60] mt-1 w-[232px] origin-top-left rounded-lg border border-theme-border bg-theme-surface p-2.5 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')}
           role="dialog"
           aria-label={`Pick ${label.toLowerCase()} date and time`}
         >
@@ -294,6 +304,7 @@ export function TimelineStrip({
   const trackRef = useRef<HTMLDivElement>(null)
   const [width, setWidth] = useState(800)
   const [pickerOpen, setPickerOpen] = useState(false)
+  const { shouldRender: pickerRender, isOpen: pickerShown } = useAnimatedUnmount(pickerOpen, overlayExitMs('menu'))
   const [customFromMs, setCustomFromMs] = useState(0)
   const [customToMs, setCustomToMs] = useState(0)
 
@@ -528,11 +539,22 @@ export function TimelineStrip({
               <ChevronDown className="h-3 w-3 text-theme-text-tertiary" />
             </button>
           </Tooltip>
-          {pickerOpen && (
+          {pickerRender && (
             // NO overflow-hidden: the DateTimeField calendars pop past the
             // dialog's bottom edge and were getting clipped to a header sliver.
             // The footer rounds its own bottom corners instead.
-            <div className="absolute left-0 top-full z-50 mt-2 w-[460px] max-w-[92vw] rounded-xl border border-theme-border bg-theme-surface shadow-theme-lg" role="dialog" aria-label="Time range picker">
+            <div
+              inert={!pickerOpen}
+              className={clsx(
+                'absolute left-0 top-full z-50 mt-2 w-[460px] max-w-[92vw] origin-top-left rounded-xl border border-theme-border bg-theme-surface shadow-theme-lg',
+                TRANSITION_MENU,
+                pickerShown ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+                !pickerOpen && 'pointer-events-none',
+              )}
+              style={overlayTransitionStyle(pickerShown, 'menu')}
+              role="dialog"
+              aria-label="Time range picker"
+            >
               <p className="border-b border-theme-border/60 px-4 py-2.5 text-[11px] leading-relaxed text-theme-text-secondary">
                 How much history to load. The blue band zooms into a slice of it.
               </p>

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -43,6 +43,7 @@ import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../.
 import { DiffViewer } from './DiffViewer'
 import { getHealthBadgeColor, getEventTypeColor } from '../../utils/badge-colors'
 import { MiddleEllipsis } from '../ui/MiddleEllipsis'
+import { CollapseChevron } from '../ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { ResourceRefBadge } from '../ui/drawer-components'
 import { buildResourceHierarchy, extractPinnedLanes, removePinnedLanes, isProblematicEvent, laneTrackEvents, isChildVisibleInWindow, collidingLaneKeys, laneCollisionKey, type ResourceLane as BaseResourceLane, type TimelineGrouping, type PinnedLaneRef } from '../../utils/resource-hierarchy'
@@ -1644,10 +1645,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                     aria-label={isExpanded ? 'Collapse' : 'Expand'}
                     className="p-1 -m-0.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
                   >
-                    <ChevronRight className={clsx(
-                      'w-4 h-4 transition-transform',
-                      isExpanded && 'rotate-90'
-                    )} />
+                    <CollapseChevron open={isExpanded} inheritColor className="w-4 h-4" />
                   </button>
                 ) : compact ? null : (
                   <div className="w-4" />
@@ -2285,7 +2283,7 @@ function ChildLaneLabel({ kind, group, showGroupChip, kindTitle, name, labelWidt
           style={{ left: selfRailPx }}
           aria-label={expanded ? 'Collapse' : 'Expand'}
         >
-          <ChevronRight className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-90')} />
+          <CollapseChevron open={!!expanded} inheritColor className="w-4 h-4" />
         </button>
       )}
       {/* Single-line child row: kind chip · name (middle-ellipsis). Colored chips

package/src/components/timeline/TimelineToolbar.tsx

@@ -18,6 +18,8 @@ import {
 import { SearchBox } from '../ui/SearchBox'
 import { type ShortcutScope } from '../../hooks/useKeyboardShortcuts'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { pluralize } from '../../utils/pluralize'
 import type { TimelineEvent, TimeRange } from '../../types'
 import type { TimelineGrouping } from '../../utils/resource-hierarchy'
@@ -475,6 +477,7 @@ function SegmentedRadioGroup<T extends string>({
  */
 export function ViewMenu({ viewOptions }: { viewOptions: TimelineViewOptions }) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const rootRef = useRef<HTMLDivElement | null>(null)
   usePopoverDismiss(open, setOpen, rootRef)
 
@@ -497,11 +500,18 @@ export function ViewMenu({ viewOptions }: { viewOptions: TimelineViewOptions })
         <ChevronDown className="w-3.5 h-3.5 text-theme-text-tertiary" />
       </button>
 
-      {open && (
+      {shouldRender && (
         <div
           role="menu"
           aria-label="View options"
-          className="absolute right-0 top-full z-50 mt-1 min-w-[14rem] rounded-lg border border-theme-border bg-theme-elevated p-2 shadow-theme-lg"
+          inert={!open}
+          className={clsx(
+            'absolute right-0 top-full z-50 mt-1 min-w-[14rem] origin-top-right rounded-lg border border-theme-border bg-theme-elevated p-2 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')}
         >
           <span className="block px-2 pb-1 text-[10px] font-bold uppercase tracking-[0.08em] text-theme-text-tertiary">Sort</span>
           <SegmentedRadioGroup
@@ -634,10 +644,11 @@ function usePopoverDismiss(
  */
 function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuProps) {
   const [open, setOpen] = useState(false)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const [search, setSearch] = useState('')
   const rootRef = useRef<HTMLDivElement | null>(null)
   const panelRef = useRef<HTMLDivElement | null>(null)
-  const [anchor, setAnchor] = useState<{ left: number; top: number; maxHeight: number } | null>(null)
+  const [anchor, setAnchor] = useState<{ left: number; top: number; maxHeight: number; flipUp: boolean } | null>(null)
   const activeCount = kindFilter.length
   const selected = useMemo(() => new Set(kindFilter), [kindFilter])
 
@@ -645,9 +656,11 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
   // clips absolutely-positioned children. Portal the popover to the body and pin
   // it to the button with fixed coords so it escapes the clip. Dismiss must treat
   // BOTH the chip and the portaled panel as "inside".
+  // The anchor is kept through the exit transition (clearing it at logical
+  // close would unmount the panel mid-fade) and re-placed on the next open.
   const PANEL_WIDTH = 256
   useLayoutEffect(() => {
-    if (!open) { setAnchor(null); return }
+    if (!open) return
     const place = () => {
       const r = rootRef.current?.getBoundingClientRect()
       if (!r) return
@@ -666,11 +679,13 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
       const top = flipUp
         ? Math.max(4, r.top - 4 - Math.min(panelH, maxHeight))
         : r.bottom + 4
-      setAnchor({ left, top, maxHeight })
+      setAnchor({ left, top, maxHeight, flipUp })
     }
     place()
     // Re-place after the panel mounts so the first open can measure its height and
-    // flip; the initial pass runs with panelH=0 (panel not yet in the DOM).
+    // flip; the initial pass runs with panelH=0 (panel not yet in the DOM). The
+    // presence hook mounts the panel a tick after `open`, hence `shouldRender` in
+    // the deps: the pass that runs once it is in the DOM does the real measurement.
     const raf = requestAnimationFrame(place)
     window.addEventListener('scroll', place, true)
     window.addEventListener('resize', place)
@@ -679,7 +694,7 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
       window.removeEventListener('scroll', place, true)
       window.removeEventListener('resize', place)
     }
-  }, [open])
+  }, [open, shouldRender])
 
   useEffect(() => {
     if (!open) return
@@ -731,11 +746,29 @@ function KindsMenu({ kindFilter, onKindFilterChange, kindOptions }: KindsMenuPro
         <ChevronDown className="w-3.5 h-3.5 text-theme-text-tertiary" />
       </button>
 
-      {open && anchor && createPortal(
+      {shouldRender && anchor && createPortal(
         <div
           ref={panelRef}
-          style={{ position: 'fixed', left: anchor.left, top: anchor.top, width: PANEL_WIDTH, maxHeight: anchor.maxHeight }}
-          className="z-50 overflow-y-auto rounded-md border border-theme-border bg-theme-surface shadow-theme-lg"
+          inert={!open}
+          style={{
+            position: 'fixed',
+            left: anchor.left,
+            top: anchor.top,
+            width: PANEL_WIDTH,
+            maxHeight: anchor.maxHeight,
+            ...overlayTransitionStyle(isOpen, 'menu'),
+          }}
+          className={clsx(
+            'z-50 overflow-y-auto rounded-md border border-theme-border bg-theme-surface shadow-theme-lg',
+            anchor.flipUp ? 'origin-bottom-left' : 'origin-top-left',
+            TRANSITION_MENU,
+            isOpen
+              ? 'opacity-100 translate-y-0 scale-100'
+              : anchor.flipUp
+                ? 'opacity-0 translate-y-1 scale-[0.97]'
+                : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
+          )}
         >
           <MultiSelectPicker
             items={kindOptions}

package/src/components/topology/TopologyControls.tsx

@@ -3,6 +3,8 @@ import { FolderTree, ShieldCheck, ChevronDown, Check } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { TopologyMode, GroupingMode } from '../../types/core'
 import { Tooltip } from '../ui/Tooltip'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 interface TopologyControlsProps {
   viewMode: TopologyMode
@@ -37,6 +39,7 @@ export function TopologyControls({
   leadingSlot,
 }: TopologyControlsProps) {
   const [groupOpen, setGroupOpen] = useState(false)
+  const { shouldRender: groupRender, isOpen: groupShown } = useAnimatedUnmount(groupOpen, overlayExitMs('menu'))
   const groupRef = useRef<HTMLDivElement>(null)
   const groupTriggerRef = useRef<HTMLButtonElement>(null)
   const groupItemRefs = useRef<(HTMLButtonElement | null)[]>([])
@@ -53,20 +56,25 @@ export function TopologyControls({
     if (restoreFocus) groupTriggerRef.current?.focus()
   }, [])
 
-  // On open, move focus onto the active option so the menu is keyboard-navigable
-  // (parity with the native <select> this replaced). Click-outside closes it.
+  // On open, move focus onto the active option so the menu is keyboard-navigable.
+  // The items exist only once the presence hook has mounted the menu, so this
+  // waits for `groupRender`.
   useEffect(() => {
-    if (!groupOpen) return
+    if (!groupOpen || !groupRender) return
     const active = Math.max(0, groupOptions.findIndex((o) => o.value === groupingMode))
     groupItemRefs.current[active]?.focus()
+    // groupOptions/groupingMode are read once at open; re-running on their
+    // identity change would steal focus mid-interaction.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupOpen, groupRender])
+
+  useEffect(() => {
+    if (!groupOpen) return
     const onDown = (e: MouseEvent) => {
       if (groupRef.current && !groupRef.current.contains(e.target as Node)) setGroupOpen(false)
     }
     document.addEventListener('mousedown', onDown)
     return () => document.removeEventListener('mousedown', onDown)
-    // groupOptions/groupingMode are read once at open; re-running on their
-    // identity change would steal focus mid-interaction.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [groupOpen])
 
   const onGroupMenuKey = (e: KeyboardEvent<HTMLDivElement>) => {
@@ -123,8 +131,19 @@ export function TopologyControls({
           {currentGroupLabel}
           <ChevronDown className="w-3 h-3 text-theme-text-tertiary" />
         </button>
-        {groupOpen && (
-          <div role="menu" onKeyDown={onGroupMenuKey} className="absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl">
+        {groupRender && (
+          <div
+            role="menu"
+            onKeyDown={onGroupMenuKey}
+            inert={!groupOpen}
+            className={clsx(
+              'absolute right-0 top-full mt-1 z-50 min-w-[160px] origin-top-right rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+              TRANSITION_MENU,
+              groupShown ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+              !groupOpen && 'pointer-events-none',
+            )}
+            style={overlayTransitionStyle(groupShown, 'menu')}
+          >
             {groupOptions.map((o, idx) => (
               <button
                 key={o.value}

package/src/components/topology/TopologyGraph.tsx

@@ -23,6 +23,7 @@ import { toCanvas } from 'html-to-image'
 
 import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Info, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { TopologyOverlayBar } from './TopologyOverlayBar'
 import { Input } from '../ui/Input'
 import { Tooltip } from '../ui/Tooltip'
@@ -315,6 +316,8 @@ export function TopologyGraph({
   const [fitViewCounter, setFitViewCounter] = useState(0)
   const [isExporting, setIsExporting] = useState(false)
   const [showLegend, setShowLegend] = useState(false)
+  const [warningsOpen, setWarningsOpen] = useState(false)
+  const warningsDisclosure = useDisclosure(warningsOpen)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
   // Saved node positions for preservation across topology updates.
@@ -1064,10 +1067,16 @@ export function TopologyGraph({
                         ? 'Large retained run history is summarized to keep the graph readable.'
                         : 'Some resources failed to load. Data may be incomplete.'}
                   </span>
-                  <details className="mt-1">
-                    <summary className="text-xs text-amber-400/80 hover:text-amber-400">
-                      Show details ({topology.warnings.length})
-                    </summary>
+                  <button
+                    {...warningsDisclosure.buttonProps}
+                    type="button"
+                    onClick={() => setWarningsOpen((v) => !v)}
+                    className="mt-1 flex items-center gap-1 text-xs text-amber-400/80 hover:text-amber-400"
+                  >
+                    <CollapseChevron open={warningsOpen} inheritColor className="h-3 w-3" />
+                    Show details ({topology.warnings.length})
+                  </button>
+                  <Collapse open={warningsOpen} id={warningsDisclosure.panelId}>
                     <ul className="mt-1 text-xs text-theme-text-tertiary space-y-0.5">
                       {rbacWarnings.length > 0 && otherWarnings.length > 0 && (
                         <li className="text-amber-400/60 font-medium mt-1">RBAC restrictions:</li>
@@ -1088,7 +1097,7 @@ export function TopologyGraph({
                         <li key={`other-${i}`} className="font-mono">{w}</li>
                       ))}
                     </ul>
-                  </details>
+                  </Collapse>
                 </div>
               </div>
             </div>

package/src/components/trace/ReachabilityView.tsx

@@ -4,7 +4,8 @@ import { ReachActions, JustTestedNote, CopyableCommand, completedRequestMode, ty
 import { AlertBanner } from '../ui/drawer-components'
 import { PaneLoader } from '../ui/PaneLoader'
 import { ReachabilityGraph, MarkGlyph } from './ReachabilityGraph'
-import { Activity, ChevronRight } from 'lucide-react'
+import { Activity } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { buildGraph, noteHeadline } from './reachGraphModel'
 import { buildOrigins, defaultOrigin, probeCheckStats, type Origin, type OriginId } from './reachOrigins'
@@ -778,10 +779,10 @@ function untestableSummary(out: Origin[]): string {
 // ---------------------------------------------------------------- inspector
 
 /**
- * The panel's one disclosure, matching drawer-components' Section: a rotating
- * ChevronRight and a grid-template-rows transition. Hand-rolled "›"/"⌄" toggles
- * neither looked like the rest of Radar nor animated, so a section appearing was
- * an abrupt jump with no affordance saying it could be opened at all.
+ * The panel's one disclosure, on the shared Collapse primitive like
+ * drawer-components' Section. Hand-rolled "›"/"⌄" toggles neither looked like
+ * the rest of Radar nor animated, so a section appearing was an abrupt jump
+ * with no affordance saying it could be opened at all.
  */
 function Disclosure({
   open,
@@ -796,21 +797,22 @@ function Disclosure({
   count?: number
   children: React.ReactNode
 }) {
+  const { panelId, buttonProps } = useDisclosure(open)
   return (
     <div>
       <button
+        {...buttonProps}
         type="button"
         onClick={onToggle}
-        aria-expanded={open}
         className="flex w-full items-center gap-1.5 text-[9.5px] font-bold tracking-[0.07em] text-theme-text-tertiary transition-colors hover:text-theme-text-secondary"
       >
-        <ChevronRight className={`h-3 w-3 flex-none transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <CollapseChevron open={open} className="h-3 w-3 flex-none" />
         <span>{label}</span>
         {count !== undefined && <span className="flex-1 text-right font-normal tracking-normal">{count}</span>}
       </button>
-      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
-        <div className="overflow-hidden">{children}</div>
-      </div>
+      <Collapse open={open} id={panelId}>
+        {children}
+      </Collapse>
     </div>
   )
 }
@@ -981,6 +983,7 @@ function HopSection({
 }) {
   const [openOverride, setOpenOverride] = useState<boolean | null>(null)
   const open = openOverride ?? hop.expanded
+  const { panelId, buttonProps } = useDisclosure(open)
   const ref = useRef<HTMLDivElement>(null)
   // A click on the graph scrolls its hop into view instead of replacing the
   // panel - the gesture still means "I care about this one", it just no longer
@@ -1012,15 +1015,15 @@ function HopSection({
       className={`mt-2 rounded-md px-2 py-1 transition-colors duration-200 ${selected ? 'selection selection-ring' : ''}`}
     >
       <button
+        {...buttonProps}
         type="button"
         onClick={() => {
           setOpenOverride(!open)
           onSelect(hop.id)
         }}
-        aria-expanded={open}
         className="flex w-full items-center gap-1.5 text-left"
       >
-        <ChevronRight className={`h-3 w-3 flex-none text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <CollapseChevron open={open} className="h-3 w-3 flex-none" />
         <span className="text-[9px] font-bold tracking-[0.04em] text-theme-text-tertiary">{hop.kind}</span>
         <span className="min-w-0 flex-1 truncate font-mono text-[11.5px] font-semibold text-theme-text-primary">{hop.name}</span>
         <span className={`badge-sm whitespace-nowrap ${SEV_BADGE[hop.chipTone]}`}>{hop.chipText || HOP_STATE_NOTE[hop.state]}</span>
@@ -1032,8 +1035,7 @@ function HopSection({
             .join(' — ')}
         </div>
       )}
-      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
-        <div className="overflow-hidden">
+      <Collapse open={open} id={panelId}>
         <div className="pb-1 pl-[18px]">
           {hop.openRef?.name && (
             <button type="button" onClick={() => onOpen(hop.openRef!)} className="text-[11px] text-accent-text hover:underline">
@@ -1084,8 +1086,7 @@ function HopSection({
             <Caveats items={hop.notProve} />
           </div>
         </div>
-        </div>
-      </div>
+      </Collapse>
     </div>
   )
 }

package/src/components/ui/CardSection.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type ComponentType, type ReactNode } from 'react'
+import { Fragment, type ComponentType, type ReactNode } from "react";
 
 // =============================================================================
 // CARD SECTION PRIMITIVES — the shared "Sectioned + icons" vocabulary used by
@@ -12,106 +12,150 @@ import { Fragment, type ComponentType, type ReactNode } from 'react'
 
 // Section role → eyebrow + icon hue. Body text always uses the secondary token
 // (the contrast floor), regardless of tone.
-export type CardSectionTone = 'neutral' | 'warn' | 'fix'
+export type CardSectionTone = "neutral" | "warn" | "fix";
 
 const SECTION_TONE_CLASS: Record<CardSectionTone, string> = {
   // Eyebrow grey — the default, for neutral sections (Why it matters, Raw error,
   // Affected resources, Context, Subject).
-  neutral: 'text-theme-text-tertiary',
+  neutral: "text-theme-text-tertiary",
   // What's wrong — amber, the diagnosis beat.
-  warn: 'text-amber-700 dark:text-amber-300',
+  warn: "text-amber-700 dark:text-amber-300",
   // Next step / How to fix — emerald, the action beat.
-  fix: 'text-emerald-700 dark:text-emerald-400',
-}
+  fix: "text-emerald-700 dark:text-emerald-400",
+};
 
 // The single eyebrow style: 11px / 600 / uppercase, with an icon in a fixed
 // gutter so every section's body aligns under the same left edge.
 export function CardSection({
   icon: Icon,
   label,
-  tone = 'neutral',
+  tone = "neutral",
   labelExtra,
   children,
 }: {
-  icon: ComponentType<{ className?: string }>
-  label: string
-  tone?: CardSectionTone
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  tone?: CardSectionTone;
   /** Optional trailing eyebrow text (e.g. "· retried 5×"), rendered muted. */
-  labelExtra?: ReactNode
-  children: ReactNode
+  labelExtra?: ReactNode;
+  children: ReactNode;
 }) {
-  const toneClass = SECTION_TONE_CLASS[tone]
+  const toneClass = SECTION_TONE_CLASS[tone];
   return (
     <section className="flex items-start gap-2.5">
       {/* Icon sits in a fixed gutter, anchored to the eyebrow line (top-aligned
           with a nudge to its optical center) — sections like Affected resources
           can be dozens of rows tall, and a section-centered glyph would float
           detached mid-list. */}
-      <Icon className={`mt-[-1px] h-[18px] w-[18px] shrink-0 ${toneClass}`} aria-hidden />
+      <Icon
+        className={`mt-[-1px] h-[18px] w-[18px] shrink-0 ${toneClass}`}
+        aria-hidden
+      />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <h4 className={`text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}>
+        <h4
+          className={`text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}
+        >
           {label}
-          {labelExtra ? <span className="font-medium normal-case tracking-normal text-theme-text-tertiary"> {labelExtra}</span> : null}
+          {labelExtra ? (
+            <span className="font-medium normal-case tracking-normal text-theme-text-tertiary">
+              {" "}
+              {labelExtra}
+            </span>
+          ) : null}
         </h4>
         {children}
       </div>
     </section>
-  )
+  );
 }
 
 // Body paragraph at the contrast floor — 14px, secondary token, never lighter.
-export function CardBody({ children, className }: { children: ReactNode; className?: string }) {
-  return <p className={`text-sm leading-relaxed text-theme-text-secondary ${className ?? ''}`}>{children}</p>
+export function CardBody({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <p
+      className={`text-sm leading-relaxed text-theme-text-secondary ${className ?? ""}`}
+    >
+      {children}
+    </p>
+  );
 }
 
 // The dark terminal block for raw error output. Intentionally dark in BOTH
 // themes (it's a console surface, not chrome), so it draws from the dedicated
 // --terminal-* tokens rather than the theme surface tokens.
-export function TerminalBlock({ label, children }: { label?: ReactNode; children: ReactNode }) {
+export function TerminalBlockLabel({
+  children,
+  divider,
+}: {
+  children: ReactNode;
+  divider?: boolean;
+}) {
+  return (
+    <div
+      className={`${divider ? "border-t" : "border-b"} border-[var(--terminal-divider)] px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-[var(--terminal-label)]`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TerminalBlock({
+  label,
+  children,
+  footer,
+}: {
+  label?: ReactNode;
+  children: ReactNode;
+  /** Rendered under the output, inside the same block: a folded tail, a divider. */
+  footer?: ReactNode;
+}) {
   return (
     <div className="overflow-hidden rounded-lg border border-[var(--terminal-border)] bg-[var(--terminal-bg)]">
-      {label ? (
-        <div className="border-b border-[var(--terminal-divider)] px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-[var(--terminal-label)]">
-          {label}
-        </div>
-      ) : null}
+      {label ? <TerminalBlockLabel>{label}</TerminalBlockLabel> : null}
       <pre className="overflow-x-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs leading-relaxed text-[var(--terminal-text)]">
         {children}
       </pre>
+      {footer}
     </div>
-  )
+  );
 }
 
 // The neutral category chip — drops the per-category hue so severity is the only
 // status color. Self-contained (don't pair with badge-sm): 11px / 600, 2px×8px
 // padding, no border, neutral grey.
 export const NEUTRAL_CHIP_CLASS =
-  'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-secondary'
+  "inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-secondary";
 
 // Mono kind chip — the grey tag for an all-caps resource Kind (the Issue row
 // header + the Subject footer row). Mono and tighter than NEUTRAL_CHIP_CLASS,
 // which carries the label/category chips.
 export const KIND_CHIP_CLASS =
-  'shrink-0 rounded bg-theme-elevated px-1.5 py-px font-mono text-[11px] uppercase text-theme-text-secondary'
+  "shrink-0 rounded bg-theme-elevated px-1.5 py-px font-mono text-[11px] uppercase text-theme-text-secondary";
 
 // Render a prose string, turning markdown `inline-code` spans into mono chips
 // via the shared .inline-code class. Plain-text passthrough when the string
 // carries no backticks, so it's a no-op for today's plain catalog copy and
 // lights up automatically once backtick markup is added.
 export function renderProse(text: string | undefined | null): ReactNode {
-  if (!text) return null
-  if (!text.includes('`')) return text
-  const parts = text.split(/(`[^`]+`)/g)
+  if (!text) return null;
+  if (!text.includes("`")) return text;
+  const parts = text.split(/(`[^`]+`)/g);
   return parts.map((part, i) => {
     // length > 2 excludes a bare "``" (which the split leaves in a plain part)
     // so it renders as literal text, not an empty chip.
-    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+    if (part.length > 2 && part.startsWith("`") && part.endsWith("`")) {
       return (
         <code key={i} className="inline-code">
           {part.slice(1, -1)}
         </code>
-      )
+      );
     }
-    return <Fragment key={i}>{part}</Fragment>
-  })
+    return <Fragment key={i}>{part}</Fragment>;
+  });
 }