@skyhook-io/k8s-ui 1.14.5 → 1.14.7

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

package/src/components/ui/Collapse.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { Collapse, CollapseChevron, disclosurePanelId } from './Collapse'
+import {
+  CSS_EASE,
+  DURATION_DISCLOSURE,
+  TRANSITION_CHEVRON,
+  TRANSITION_DISCLOSURE,
+} from '../../utils/animation'
+
+// The primitive is the app-wide standard for expand/collapse; these pin the
+// contract other components rely on rather than the visuals.
+describe('Collapse', () => {
+  it('animates grid-template-rows with the shared disclosure timing', () => {
+    const html = renderToString(<Collapse open={false}>x</Collapse>)
+    expect(html).toContain('grid-template-rows:0fr')
+    expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
+    expect(TRANSITION_DISCLOSURE).toContain(`duration-${DURATION_DISCLOSURE}`)
+    expect(TRANSITION_DISCLOSURE).toContain('motion-reduce:transition-none')
+  })
+
+  it('keeps closed content mounted but inert, and clipped', () => {
+    const html = renderToString(<Collapse open={false}>hidden-content</Collapse>)
+    expect(html).toContain('hidden-content')
+    expect(html).toMatch(/inert=""|inert>/)
+    expect(html).toContain('overflow-hidden')
+    const opened = renderToString(<Collapse open>shown</Collapse>)
+    expect(opened).toContain('grid-template-rows:1fr')
+    expect(opened).not.toMatch(/inert=""|inert>/)
+  })
+
+  it('mountLazily renders nothing until first open', () => {
+    expect(renderToString(<Collapse open={false} mountLazily>lazy</Collapse>)).not.toContain('lazy')
+    expect(renderToString(<Collapse open mountLazily>lazy</Collapse>)).toContain('lazy')
+  })
+
+  it('unmountOnExit renders nothing when initially closed', () => {
+    // Initial-closed mount never had a transition to wait for.
+    expect(renderToString(<Collapse open={false} unmountOnExit>gone</Collapse>)).not.toContain('gone')
+    expect(renderToString(<Collapse open unmountOnExit>here</Collapse>)).toContain('here')
+  })
+
+  it('exposes the panel id for aria-controls', () => {
+    expect(renderToString(<Collapse open id="panel-1">x</Collapse>)).toContain('id="panel-1"')
+  })
+
+  it('disclosurePanelId never yields whitespace (aria-controls is a space-separated list)', () => {
+    expect(disclosurePanelId(':r1:', 'Access Control')).toBe(':r1:-Access%20Control')
+    expect(disclosurePanelId(':r1:', 7)).toBe(':r1:-7')
+    // Injective: keys that only differ by the separator stay distinct.
+    expect(disclosurePanelId('p', 'a b')).not.toBe(disclosurePanelId('p', 'a_b'))
+  })
+})
+
+describe('CollapseChevron', () => {
+  it('runs the same clock as the panel', () => {
+    expect(TRANSITION_CHEVRON).toContain(`duration-${DURATION_DISCLOSURE}`)
+    const html = renderToString(<CollapseChevron open />)
+    expect(html).toContain('rotate-90')
+    expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
+  })
+})
+
+describe('motion tokens stay in step with the stylesheet', () => {
+  it('.issue-details-motion mirrors DURATION_DISCLOSURE and CSS_EASE', () => {
+    const css = readFileSync(join(__dirname, '../../theme/components.css'), 'utf8')
+    const m = css.match(/\.issue-details-motion \{[^}]*transition: grid-template-rows (\d+)ms ([^;]+);/)
+    expect(m, 'legacy class present').not.toBeNull()
+    expect(Number(m![1])).toBe(DURATION_DISCLOSURE)
+    expect(m![2].replace(/\s+/g, '')).toBe(CSS_EASE.replace(/\s+/g, ''))
+  })
+})

package/src/components/ui/Collapse.tsx

@@ -1,47 +1,93 @@
-import { useState, type ReactNode } from 'react'
+import { useEffect, useId, useState, type ReactNode, type TransitionEvent } from 'react'
 import { ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
+import { DURATION_DISCLOSURE, TRANSITION_CHEVRON, TRANSITION_DISCLOSURE, prefersReducedMotion } from '../../utils/animation'
 
 // Animated show/hide using the grid-template-rows 0fr→1fr technique — the
-// app-wide standard for expand/collapse (drawers, checks, audit, resources
-// sidebar, port-forward). The inner overflow-hidden wrapper is load-bearing:
-// it clips the content while the grid row animates between 0 and its natural
-// height, so nothing spills before the row is fully open.
+// app-wide standard for expand/collapse (drawer sections, checks, audit,
+// resources sidebar, issue rows, and every disclosure in Radar Cloud). The
+// inner overflow-hidden wrapper is load-bearing: it clips the content while
+// the grid row animates between 0 and its natural height, so nothing spills
+// before the row is fully open.
 //
-// Content stays mounted while closed (clipped to zero height) — that's what
-// lets it animate. `inert` when closed keeps that clipped content out of the
-// tab order and the accessibility tree, so keyboard/screen-reader users don't
-// land on invisible rows (matching ChecksView's collapse).
+// Timing lives in utils/animation (DURATION_DISCLOSURE, one curve). The caret
+// (CollapseChevron) runs the same clock, so an interrupted toggle reverses
+// panel and caret together.
 //
-// `mountLazily` defers rendering the children until the first open, then keeps
-// them mounted so both the open and close animations still run. Use it when the
-// collapsed content is heavy and there are many instances (e.g. hundreds of
-// resource rows, each with a drift panel) — otherwise every collapsed instance
-// pays its render cost up front. Off by default so the common single-instance
-// case keeps the simplest behavior.
+// Mount policy — pick per site, it is not cosmetic:
+//   default        content stays mounted while closed, clipped to zero height
+//                  and `inert` so keyboard/screen-reader users can't land on
+//                  invisible rows. Right for static or cheap content.
+//   mountLazily    defers the first render until the first open, then keeps
+//                  it. For many instances with heavy collapsed content
+//                  (hundreds of rows each with a drift panel).
+//   unmountOnExit  unmounts the children once the close transition has
+//                  finished (transitionend on this wrapper, with a timer
+//                  fallback so disposal is guaranteed under reduced motion,
+//                  for empty content, or if the event never fires). For
+//                  subtrees that poll, subscribe, or should reset on close.
+//                  Note: work stops when the subtree unmounts, i.e. after the
+//                  exit; a query that must stop at logical close should also
+//                  take `enabled: open`.
 export function Collapse({
   open,
   children,
   className,
   mountLazily = false,
+  unmountOnExit = false,
+  id,
 }: {
   open: boolean
   children: ReactNode
   className?: string
   mountLazily?: boolean
+  unmountOnExit?: boolean
+  /** Panel id for the header's aria-controls (see useDisclosure). */
+  id?: string
 }) {
   // Latch: once opened, stay mounted. Conditional setState-in-render is the
   // supported pattern for deriving state from props without an extra commit.
   const [hasOpened, setHasOpened] = useState(open)
   if (mountLazily && open && !hasOpened) setHasOpened(true)
-  const render = !mountLazily || hasOpened
+
+  // unmountOnExit: keep rendering through the close transition, then stop.
+  // `exiting` must flip in the SAME render that sees `open` go false — doing
+  // it in an effect would commit one frame with the children already gone
+  // (render = open || exiting, both false) before the effect put them back.
+  // Same setState-in-render pattern as the latch above.
+  const [exiting, setExiting] = useState(false)
+  const [prevOpen, setPrevOpen] = useState(open)
+  if (open !== prevOpen) {
+    setPrevOpen(open)
+    // Reopen before disposal cancels the pending unmount; under reduced motion
+    // the stylesheet has zeroed the transition, so dispose at logical close.
+    setExiting(!open && unmountOnExit && !prefersReducedMotion())
+  }
+  // Guarantee disposal even if transitionend never arrives (empty content
+  // transitions instantly; a cancelled transition fires no end). Any change to
+  // `exiting` (reopen, transitionend) clears the pending timer via cleanup.
+  useEffect(() => {
+    if (!exiting) return
+    const t = window.setTimeout(() => setExiting(false), DURATION_DISCLOSURE + 50)
+    return () => window.clearTimeout(t)
+  }, [exiting])
+
+  const onTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {
+    if (!exiting) return
+    // Only this wrapper's own row transition — descendants' transitions
+    // bubble here too.
+    if (event.target !== event.currentTarget) return
+    if (event.propertyName !== 'grid-template-rows') return
+    setExiting(false)
+  }
+
+  const render = unmountOnExit ? open || exiting : !mountLazily || hasOpened
   return (
     <div
-      className={clsx(
-        'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
-        className,
-      )}
+      id={id}
+      className={clsx('grid', TRANSITION_DISCLOSURE, className)}
       style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+      onTransitionEnd={onTransitionEnd}
     >
       {/* `relative` is load-bearing. Collapsed content is still laid out at full
           height and only clipped by `overflow-hidden` — but an absolutely-positioned
@@ -51,24 +97,64 @@ export function Collapse({
           and extends the enclosing scroll container's scrollable overflow: the drawer
           scrolls past its own content into blank space. Anchoring here puts those
           boxes back inside the clip, so a collapsed section contributes nothing. */}
-      <div className="relative overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
+      <div className="relative overflow-hidden" inert={!open || undefined}>
+        {render ? children : null}
+      </div>
     </div>
   )
 }
 
 // CollapseChevron is the disclosure caret that pairs with <Collapse>: a single
 // ChevronRight that rotates 90° when open, rather than swapping between two
-// icons. Matches the drawer Section / ExpandableSection affordance so every
-// collapsible surface animates the same way.
-export function CollapseChevron({ open, className }: { open: boolean; className?: string }) {
+// icons. Same duration and curve as the panel, so every collapsible surface
+// animates the same way and an interrupted toggle keeps caret and panel in
+// step. Menu triggers are a different thing — they keep ChevronDown/Up
+// flipping toward the menu.
+//
+// The caret is tertiary grey by default. Inside a tinted header (an amber
+// warning, a red error banner, a button whose hover recolors its text) pass
+// `inheritColor` so it takes currentColor from the header instead — a color
+// utility in `className` would race the default in the cascade.
+export function CollapseChevron({
+  open,
+  className,
+  inheritColor = false,
+}: {
+  open: boolean
+  className?: string
+  inheritColor?: boolean
+}) {
   return (
     <ChevronRight
       aria-hidden="true"
-      className={clsx(
-        'shrink-0 text-theme-text-tertiary transition-transform duration-200 motion-reduce:transition-none',
-        open && 'rotate-90',
-        className,
-      )}
+      className={clsx('shrink-0', !inheritColor && 'text-theme-text-tertiary', TRANSITION_CHEVRON, open && 'rotate-90', className)}
     />
   )
 }
+
+// useDisclosure wires the header ↔ panel relationship: the header gets
+// aria-expanded + aria-controls, the panel gets a stable id. Works with any
+// header markup (a plain button, or a compound row with its own actions), so
+// it does not force a <button> wrapper around things that already contain
+// buttons.
+//
+//   const d = useDisclosure(open)
+//   <button {...d.buttonProps} onClick={toggle}>…<CollapseChevron open={open} /></button>
+//   <Collapse open={open} id={d.panelId}>…</Collapse>
+// Rows mapped inline can't each call useDisclosure; they build ids from one
+// useId() prefix plus a row key. The key is display data (a category name, a
+// cluster id) and may contain whitespace, which would split `aria-controls`
+// into two references — so it is percent-encoded here (injective, so two
+// distinct keys can't land on one id).
+export function disclosurePanelId(base: string, key: string | number): string {
+  return `${base}-${encodeURIComponent(String(key))}`
+}
+
+export function useDisclosure(open: boolean, explicitId?: string) {
+  const generated = useId()
+  const panelId = explicitId ?? `disclosure-${generated}`
+  return {
+    panelId,
+    buttonProps: { 'aria-expanded': open, 'aria-controls': panelId } as const,
+  }
+}

package/src/components/ui/DialogPortal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, type KeyboardEvent as ReactKeyboardEvent, type React
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 interface DialogPortalProps {
   open: boolean
@@ -27,7 +27,10 @@ interface DialogPortalProps {
  */
 export function DialogPortal({ open, onClose, children, className, closable = true }: DialogPortalProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  // The unmount window is the exit duration: shorter than the entrance, and
+  // exactly what the panel transition below runs — a mismatch here cut the
+  // close at two-thirds (200ms window under a 300ms panel).
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('dialog'))
 
   // Bubble phase lets nested editors and menus consume Escape before the dialog closes.
   const handleDialogKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
@@ -81,6 +84,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0',
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={closable ? onClose : undefined}
       />
       <div
@@ -95,6 +99,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
           className,
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
       >
         {children}
       </div>

package/src/components/ui/FetchResult.test.tsx

@@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import { FetchResult } from './FetchResult'
 
-function shaped(message: string, status: number) {
-  return Object.assign(new Error(message), { status })
+function shaped(message: string, status: number, data?: Record<string, unknown>) {
+  return Object.assign(new Error(message), { status, data })
 }
 
 describe('FetchResult', () => {
@@ -54,6 +54,24 @@ describe('FetchResult', () => {
     expect(html).toContain('Resource cache not available')
   })
 
+  it('does not blame the cluster for a kind_sync_failed 503', () => {
+    const html = renderToString(
+      <FetchResult
+        loading={false}
+        error={shaped('pods failed to load within the sync deadline', 503, { error_code: 'kind_sync_failed' })}
+      />,
+    )
+    expect(html).not.toContain('Cluster unavailable')
+    expect(html).toContain('Couldn')
+    expect(html).toContain('pods failed to load within the sync deadline')
+  })
+
+  it('renders a Retry button only when onRetry is given', () => {
+    const err = shaped('internal server error', 500)
+    expect(renderToString(<FetchResult loading={false} error={err} onRetry={() => {}} />)).toContain('Retry')
+    expect(renderToString(<FetchResult loading={false} error={err} />)).not.toContain('Retry')
+  })
+
   it('renders "Sign-in required" on 401', () => {
     const html = renderToString(
       <FetchResult loading={false} error={shaped('Unauthorized', 401)} />,

package/src/components/ui/FetchResult.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, type LucideIcon } from 'lucide-react'
+import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, RefreshCw, type LucideIcon } from 'lucide-react'
 import { clsx } from 'clsx'
 import { PaneLoader } from './PaneLoader'
 import { isFetchError } from '../../types/fetch-error'
@@ -14,6 +14,7 @@ import { isFetchError } from '../../types/fetch-error'
 //   loading                  → <PaneLoader/>
 //   error (403)              → "Access denied"            + error.message
 //   error (404)              → notFoundMessage            + error.message
+//   error (503 sync failed)  → "Couldn't load this view"  + error.message
 //   error (503)              → "Cluster unavailable"      + error.message
 //   error (401)              → "Sign-in required"         (apiFetch redirects; fallback)
 //   error (other / no shape) → "Couldn't load this view"  + error.message
@@ -34,6 +35,8 @@ interface FetchResultProps {
   notFoundMessage?: string
   /** Pin to parent height. Existing call sites use "h-32" or "h-full". */
   className?: string
+  /** Renders a Retry button on the error surface. */
+  onRetry?: () => void
 }
 
 export function FetchResult({
@@ -41,6 +44,7 @@ export function FetchResult({
   error,
   notFoundMessage = 'Resource not found',
   className = 'h-32',
+  onRetry,
 }: FetchResultProps) {
   if (loading) {
     return <PaneLoader className={className} />
@@ -55,16 +59,17 @@ export function FetchResult({
       </div>
     )
   }
-  return <ErrorSurface error={error} notFoundMessage={notFoundMessage} className={className} />
+  return <ErrorSurface error={error} notFoundMessage={notFoundMessage} className={className} onRetry={onRetry} />
 }
 
 interface ErrorSurfaceProps {
   error: unknown
   notFoundMessage: string
   className: string
+  onRetry?: () => void
 }
 
-function ErrorSurface({ error, notFoundMessage, className }: ErrorSurfaceProps) {
+function ErrorSurface({ error, notFoundMessage, className, onRetry }: ErrorSurfaceProps) {
   const classified = classify(error, notFoundMessage)
   const Icon = classified.icon
 
@@ -81,6 +86,16 @@ function ErrorSurface({ error, notFoundMessage, className }: ErrorSurfaceProps)
           <CopyErrorButton text={classified.detail} />
         </div>
       )}
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="mt-1 flex items-center gap-1.5 rounded-md border border-theme-border bg-theme-elevated px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+        >
+          <RefreshCw className="h-3.5 w-3.5" aria-hidden />
+          Retry
+        </button>
+      )}
     </div>
   )
 }
@@ -101,6 +116,17 @@ function classify(error: unknown, notFoundMessage: string): Classified {
       case 401:
         return { headline: 'Sign-in required', detail: error.message, icon: LogIn }
       case 503:
+        // The cluster is connected; one kind's informer missed its sync
+        // deadline, so "Cluster unavailable" would send the reader the wrong way.
+        if (errorCodeOf(error) === 'kind_sync_failed') {
+          return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
+        }
+        // The cluster is healthy and still loading — the retry policies keep
+        // these surfaces polling, but a caller without one must not tell the
+        // user a connecting cluster is down.
+        if (errorCodeOf(error) === 'cluster_connecting' || errorCodeOf(error) === 'kind_sync_pending') {
+          return { headline: 'Cluster is still loading', detail: error.message, icon: AlertTriangle }
+        }
         return { headline: 'Cluster unavailable', detail: error.message, icon: ServerCrash }
       default:
         return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
@@ -110,6 +136,10 @@ function classify(error: unknown, notFoundMessage: string): Classified {
   return { headline: "Couldn't load this view", detail: errorMessageOf(error), icon: AlertTriangle }
 }
 
+function errorCodeOf(error: unknown): unknown {
+  return (error as { data?: { error_code?: unknown } }).data?.error_code
+}
+
 function errorMessageOf(error: unknown): string | null {
   if (error instanceof Error && error.message) return error.message
   if (typeof error === 'string') return error