@skyhook-io/k8s-ui 1.8.6 → 1.8.8

package/src/components/ui/drawer-components.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, createContext, useContext } from 'react'
 import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge, formatDuration, formatResources } from '../resources/resource-utils'
@@ -446,6 +446,18 @@ export interface Problem {
 }
 
 /** Displays a list of problem alerts (warnings and errors) */
+// True when the resource detail is already rendering a dedicated, authoritative
+// "Operational Issues" section (the Issues pipeline — richer cause/action). Only
+// renderers whose problems the pipeline COMPREHENSIVELY covers read this and drop
+// their own problem array so the same failure isn't shown twice — today that's
+// PodRenderer and WorkloadRenderer (workload + pod runtime). It is deliberately
+// NOT wired into ProblemAlerts: that component is used only by GitOps renderers
+// (Argo/Flux), whose Degraded/OutOfSync/revision-mismatch banners the pipeline
+// does not fully emit (e.g. OutOfSync only for automated Argo apps) — suppressing
+// them would hide real problems, which is worse than an occasional duplicate.
+export const OperationalIssuesShownContext = createContext(false)
+export const useOperationalIssuesShown = () => useContext(OperationalIssuesShownContext)
+
 export function ProblemAlerts({ problems }: { problems: Problem[] }) {
   if (problems.length === 0) return null
 

package/src/components/ui/index.ts

@@ -1,4 +1,6 @@
 export { Tooltip } from './Tooltip'
+export { FreshnessControl } from './FreshnessControl'
+export type { FreshnessMode, FreshnessConnection } from './FreshnessControl'
 export { PaneLoader } from './PaneLoader'
 export { ClusterName } from './ClusterName'
 export { MiddleEllipsis } from './MiddleEllipsis'

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -1,5 +1,8 @@
-import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react'
-import { TRANSITION_DRAWER } from '../../utils/animation'
+import { useState, useCallback, useEffect, useLayoutEffect, useReducer, useRef, type ReactNode } from 'react'
+import {
+  DURATION_DRAWER_MORPH,
+  EASE_DRAWER_MORPH,
+} from '../../utils/animation'
 import { clsx } from 'clsx'
 import type { SelectedResource } from '../../types'
 import { useDockReservedHeight } from '../dock/DockContext'
@@ -16,8 +19,13 @@ interface ResourceDetailDrawerProps {
   expanded?: boolean
   /** Called when user clicks collapse in expanded mode */
   onCollapse?: () => void
-  /** Called when user clicks expand button */
-  onExpand?: (resource: SelectedResource) => void
+  /** Called when user clicks expand button. `opts.yaml` is true when expanding
+   *  from the drawer's YAML view, so the host can open the full view on YAML. */
+  onExpand?: (resource: SelectedResource, opts?: { yaml?: boolean }) => void
+  /** Whether the expanded view can collapse back to a side drawer. False on
+   *  mobile (no room for a drawer) — the collapse-to-drawer control is hidden
+   *  there and the host's onCollapse should close instead. Default true. */
+  canCollapseToDrawer?: boolean
   /** Navigate to another resource within expanded WorkloadView */
   onNavigateToResource?: (resource: SelectedResource) => void
   /** Height of the host app's top navigation bar in px (default: 49) */
@@ -28,9 +36,16 @@ interface ResourceDetailDrawerProps {
   children: (props: {
     resource: SelectedResource
     expanded: boolean
+    /** false on the outgoing layer mid-transition — suspend shortcuts/interaction */
+    active: boolean
     initialTab?: 'detail' | 'yaml'
     onClose: () => void
-    onExpand?: () => void
+    onExpand?: (opts?: { yaml?: boolean }) => void
+    /** Signal (hover/press the expand control) that expand is likely — pre-mounts
+     *  the heavy fullscreen layer invisibly so the click starts the morph instantly. */
+    onExpandIntent?: () => void
+    /** Intent withdrawn (pointer left the expand control) — discard the pre-mount. */
+    onCancelExpandIntent?: () => void
     onBack?: () => void
     onNavigateToResource?: (resource: SelectedResource) => void
     onCollapseToDrawer?: () => void
@@ -52,18 +67,101 @@ function getDefaultWidth(kind: string): number {
   return WIDE_KINDS.has(kind.toLowerCase()) ? WIDE_WIDTH : DEFAULT_WIDTH
 }
 
-export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab, isOpen = true, expanded, onCollapse, onExpand, onNavigateToResource, headerHeight: headerHeightProp, leftOffset = 0, children }: ResourceDetailDrawerProps) {
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(
+    () => typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches,
+  )
+  useEffect(() => {
+    const mq = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    if (!mq) return
+    const onChange = () => setReduced(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+  return reduced
+}
+
+export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab, isOpen = true, expanded, onCollapse, onExpand, canCollapseToDrawer = true, onNavigateToResource, headerHeight: headerHeightProp, leftOffset = 0, children }: ResourceDetailDrawerProps) {
   const [drawerWidth, setDrawerWidth] = useState(() => getDefaultWidth(resource.kind))
   const [isResizing, setIsResizing] = useState(false)
   const resizeStartX = useRef(0)
   const resizeStartWidth = useRef(getDefaultWidth(resource.kind))
+  const containerRef = useRef<HTMLDivElement>(null)
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  // Expand/collapse crossfade. During the window we mount BOTH the drawer and
+  // full-screen layouts, each pinned to its own width (so neither reflows or
+  // squashes), and crossfade opacity while the container width (the frame)
+  // animates between them.
+  //
+  // `settledExpanded` is the last finished state. While it differs from the
+  // incoming `expanded` prop we're mid-transition: render both layers, fade
+  // `crossfadeArmed` 0→1 once a start frame has painted, then settle.
+  const settledExpanded = useRef(!!expanded)
+  const [crossfadeArmed, setCrossfadeArmed] = useState(false)
+  const [fullWidthPx, setFullWidthPx] = useState<number | null>(null)
+  const [, forceSettle] = useReducer((c: number) => c + 1, 0)
+  const transitioning = settledExpanded.current !== !!expanded
 
-  // Detect collapse direction: was expanded last render, now not.
-  // Width snaps instantly on collapse (0ms) so content and size match.
-  // Expand keeps the nice 300ms width animation via TRANSITION_DRAWER.
-  const wasExpanded = useRef(!!expanded)
-  const isCollapsing = wasExpanded.current && !expanded
-  wasExpanded.current = !!expanded
+  // Pre-mount: hovering/pressing the expand control mounts the heavy fullscreen
+  // layer invisibly ahead of the click, so the click reuses it (same key) and the
+  // morph's first frames aren't competing with the layer's mount cost.
+  const [prewarmExpand, setPrewarmExpand] = useState(false)
+
+  const measureFullWidth = useCallback(() => {
+    const el = containerRef.current
+    const parent = el?.offsetParent as HTMLElement | null
+    const measured = parent ? parent.clientWidth - leftOffset : el?.clientWidth
+    if (measured && measured > 0) setFullWidthPx(measured)
+  }, [leftOffset])
+
+  const handleExpandIntent = useCallback(() => {
+    if (expanded || transitioning) return
+    measureFullWidth()
+    setPrewarmExpand(true)
+  }, [expanded, transitioning, measureFullWidth])
+
+  const handleCancelExpandIntent = useCallback(() => {
+    if (transitioning || expanded) return
+    setPrewarmExpand(false)
+  }, [transitioning, expanded])
+
+  useLayoutEffect(() => {
+    if (settledExpanded.current === !!expanded) return
+    if (prefersReducedMotion) {
+      settledExpanded.current = !!expanded
+      setPrewarmExpand(false)
+      forceSettle()
+      return
+    }
+    // Pin the full-screen layer to the measured expanded width so its content
+    // lays out at its final width from the first frame (no live reflow).
+    measureFullWidth()
+    // The prewarm layer (if any) becomes the real transition layer now (reused by key).
+    setPrewarmExpand(false)
+    // Double-rAF so the incoming layer's mount+paint lands BEFORE the motion starts
+    // (else it drops frames in the first third). Prewarm keeps the heavy mount off
+    // the click path; these two frames are then cheap (the layer's already there).
+    setCrossfadeArmed(false)
+    let raf2 = 0
+    let timer = 0
+    const arm = () => {
+      setCrossfadeArmed(true)
+      timer = window.setTimeout(() => {
+        settledExpanded.current = !!expanded
+        setCrossfadeArmed(false)
+        forceSettle()
+      }, DURATION_DRAWER_MORPH)
+    }
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(arm)
+    })
+    return () => {
+      cancelAnimationFrame(raf1)
+      cancelAnimationFrame(raf2)
+      clearTimeout(timer)
+    }
+  }, [expanded, prefersReducedMotion, measureFullWidth])
 
   // Reset drawer width when resource kind changes
   useEffect(() => {
@@ -72,14 +170,20 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
     resizeStartWidth.current = w
   }, [resource.kind])
 
-  // Resize handlers (disabled when expanded)
+  // Drop a pending prewarm if the drawer closes or the target resource changes —
+  // its hover intent is stale, and a reopened drawer shouldn't pre-mount unbidden.
+  useEffect(() => {
+    setPrewarmExpand(false)
+  }, [isOpen, resource.kind, resource.namespace, resource.name])
+
+  // Resize handlers (disabled when expanded or mid-transition)
   const handleResizeStart = useCallback((e: React.MouseEvent) => {
-    if (expanded) return
+    if (expanded || transitioning) return
     e.preventDefault()
     setIsResizing(true)
     resizeStartX.current = e.clientX
     resizeStartWidth.current = drawerWidth
-  }, [drawerWidth, expanded])
+  }, [drawerWidth, expanded, transitioning])
 
   useEffect(() => {
     if (!isResizing) return
@@ -114,27 +218,72 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   const headerHeight = headerHeightProp ?? 49
   const dockInset = useDockReservedHeight()
 
+  // Width animates during expand/collapse, but snaps during manual resize and
+  // when the user prefers reduced motion.
+  const animateWidth = !isResizing && !prefersReducedMotion
+
+  // During the pre-mount frames (transitioning but not yet armed) hold the frame
+  // at its START width so the width transition fires only once the incoming
+  // layer has painted; otherwise it snaps to the target.
+  const fullW = `calc(100% - ${leftOffset}px)`
+  const startWidth = settledExpanded.current ? fullW : drawerWidth
+  const targetWidth = expanded ? fullW : drawerWidth
+  const containerWidth = transitioning && !crossfadeArmed ? startWidth : targetWidth
+
+  const renderLayer = (layerExpanded: boolean, active: boolean) =>
+    children({
+      resource,
+      expanded: layerExpanded,
+      active,
+      initialTab,
+      onClose,
+      onExpand: onExpand ? (opts) => onExpand(resource, opts) : undefined,
+      onExpandIntent: onExpand ? handleExpandIntent : undefined,
+      onCancelExpandIntent: onExpand ? handleCancelExpandIntent : undefined,
+      onBack: onCollapse ? () => onCollapse() : undefined,
+      onNavigateToResource: handleNavigate,
+      // Hidden on mobile (no drawer to collapse to) — the host routes the
+      // back/close control through onCollapse instead.
+      onCollapseToDrawer: (canCollapseToDrawer && onCollapse) ? () => onCollapse() : undefined,
+    })
+
+  // While transitioning render both layers (outgoing = settled state, incoming
+  // = target). Keying by expanded-ness keeps the incoming layer's React
+  // identity stable into idle, so it survives (state intact) while only the
+  // outgoing layer unmounts when the window ends. While prewarming (collapsed,
+  // intent signalled) also mount the expanded layer invisibly — keyed 'expanded'
+  // so it's reused (not remounted) when the real expand starts.
+  const showPrewarmLayer = prewarmExpand && isOpen && !transitioning && !expanded
+  const layerExpandedValues = transitioning ? [true, false] : showPrewarmLayer ? [false, true] : [!!expanded]
+
   return (
     <div
+      ref={containerRef}
       className={clsx(
-        'absolute right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
-        TRANSITION_DRAWER,
+        'absolute right-0 bg-theme-surface border-l border-theme-border flex flex-col z-40',
+        // Clip the wider layer only while morphing; keep overflow visible at idle
+        // so drawer popovers/tooltips aren't clipped.
+        transitioning && 'overflow-hidden',
+        // No drawer shadow in fullscreen — it's a full page, not a floating panel.
+        !expanded && 'shadow-drawer',
         isOpen
           ? 'translate-x-0 opacity-100'
           : 'translate-x-full opacity-0',
         expanded && '!border-l-0',
       )}
       style={{
-        width: expanded ? `calc(100% - ${leftOffset}px)` : drawerWidth,
+        width: containerWidth,
         top: headerHeight,
         height: `calc(100% - ${headerHeight}px - ${dockInset}px)`,
-        // Collapse is instant — no animation, content and width snap together.
-        // Expand + slide-in/out animate via TRANSITION_DRAWER class.
-        ...(isCollapsing && { transition: 'none' }),
+        // Inline so the morph duration/easing is controlled precisely (and stays
+        // in lockstep with the crossfade + JS window). Width only animates when
+        // not resizing / reduced-motion.
+        transition: `translate ${DURATION_DRAWER_MORPH}ms ${EASE_DRAWER_MORPH}, opacity ${DURATION_DRAWER_MORPH}ms ${EASE_DRAWER_MORPH}${animateWidth ? `, width ${DURATION_DRAWER_MORPH}ms ${EASE_DRAWER_MORPH}` : ''}`,
+        willChange: 'transform, width',
       }}
     >
-      {/* Resize handle — hidden when expanded or on mobile */}
-      {!expanded && (
+      {/* Resize handle — hidden when expanded or mid-transition or on mobile */}
+      {!expanded && !transitioning && (
         <div
           onMouseDown={handleResizeStart}
           className={clsx(
@@ -145,15 +294,49 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         />
       )}
 
-      {children({
-        resource,
-        expanded: !!expanded,
-        initialTab,
-        onClose,
-        onExpand: onExpand ? () => onExpand(resource) : undefined,
-        onBack: onCollapse ? () => onCollapse() : undefined,
-        onNavigateToResource: handleNavigate,
-        onCollapseToDrawer: onCollapse ? () => onCollapse() : undefined,
+      {layerExpandedValues.map((layerExpanded) => {
+        if (!transitioning) {
+          // Prewarm: the expanded layer mounted invisibly ahead of the click.
+          // Pinned at full width + inert + opacity 0 so its mount cost is paid now,
+          // off-screen, and it's reused (same key) when the morph actually starts.
+          if (showPrewarmLayer && layerExpanded) {
+            return (
+              <div
+                key="expanded"
+                aria-hidden
+                inert
+                className="absolute top-0 bottom-0 right-0 overflow-hidden pointer-events-none opacity-0"
+                style={{ width: fullWidthPx ?? `calc(100% - ${leftOffset}px)` }}
+              >
+                {renderLayer(true, false)}
+              </div>
+            )
+          }
+          // Idle (or the visible collapsed layer during prewarm): fills the container.
+          return (
+            <div key={layerExpanded ? 'expanded' : 'collapsed'} className="absolute inset-0">
+              {renderLayer(layerExpanded, true)}
+            </div>
+          )
+        }
+        const isIncoming = layerExpanded === !!expanded
+        return (
+          <div
+            key={layerExpanded ? 'expanded' : 'collapsed'}
+            className="absolute top-0 bottom-0 right-0 overflow-hidden pointer-events-none"
+            style={{
+              width: layerExpanded ? (fullWidthPx ?? `calc(100% - ${leftOffset}px)`) : drawerWidth,
+              opacity: isIncoming ? (crossfadeArmed ? 1 : 0) : (crossfadeArmed ? 0 : 1),
+              transition: `opacity ${DURATION_DRAWER_MORPH}ms ${EASE_DRAWER_MORPH}`,
+              willChange: 'opacity',
+            }}
+            aria-hidden={!isIncoming}
+          >
+            {/* Both layers inactive mid-crossfade — shortcuts shouldn't dispatch
+                during the animation; the settled layer owns them once idle. */}
+            {renderLayer(layerExpanded, false)}
+          </div>
+        )
       })}
     </div>
   )

package/src/components/workload/WorkloadView.tsx

@@ -52,7 +52,7 @@ import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } f
 import type { ScalerDiagnosis } from '../resources/renderers/WorkloadRenderer'
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
-import { getKindColorOutline, displayKindName } from '../ui/drawer-components'
+import { getKindColorOutline, displayKindName, OperationalIssuesShownContext } from '../ui/drawer-components'
 import { midTruncate } from '../../utils/format'
 
 export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -71,10 +71,17 @@ interface WorkloadViewProps {
   onCollapseToDrawer?: () => void
   /** false = collapsed drawer mode, true (default) = full expanded mode */
   expanded?: boolean
+  /** false on the outgoing layer during an expand/collapse crossfade — suspend
+   *  keyboard shortcuts so the invisible layer doesn't capture them (default true) */
+  active?: boolean
   /** Close the drawer (collapsed mode) */
   onClose?: () => void
-  /** Expand from drawer to full view */
-  onExpand?: () => void
+  /** Expand from drawer to full view. `opts.yaml` true when expanding from the
+   *  drawer's YAML view so the full view opens on the YAML tab (edits carry over). */
+  onExpand?: (opts?: { yaml?: boolean }) => void
+  /** Hover/press the expand control = likely expand → pre-mount the full view. */
+  onExpandIntent?: () => void
+  onCancelExpandIntent?: () => void
   /** Initial view tab — 'yaml' opens YAML directly */
   initialTab?: 'detail' | 'yaml'
   /** API group for CRD resources */
@@ -211,6 +218,17 @@ interface WorkloadViewProps {
   isMetricsAvailable?: (kind: string, resource: any) => boolean
   /** Render extra content at the bottom of the overview tab (e.g. audit findings) */
   renderOverviewExtra?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** Render content at the TOP of the overview tab, above the renderer (e.g. live
+   *  Operational Issues). Optional + additive — consumers that don't pass it are
+   *  unaffected. Only rendered when `hasOperationalIssues` is true: the lead
+   *  component returns null when empty, but its padded wrapper can't tell, so
+   *  gating on the flag avoids an empty top gap on healthy resources. */
+  renderOverviewLead?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** When true, renderers suppress their own status-derived problem displays
+   *  because a dedicated Operational Issues section is shown (the host fetched
+   *  live issues for this resource). Avoids showing the same failure twice.
+   *  Also gates the `renderOverviewLead` wrapper (see above). */
+  hasOperationalIssues?: boolean
 
   // ── Duplicate ────────────────────────────────────────────────────────────
   /** Duplicate handler — opens create dialog with this resource's YAML */
@@ -237,8 +255,11 @@ export function WorkloadView({
   onNavigateToResource,
   onCollapseToDrawer,
   expanded = true,
+  active = true,
   onClose,
   onExpand,
+  onExpandIntent,
+  onCancelExpandIntent,
   initialTab,
   group,
   breadcrumb,
@@ -282,6 +303,8 @@ export function WorkloadView({
   onDuplicate,
   onDownload,
   renderOverviewExtra,
+  renderOverviewLead,
+  hasOperationalIssues,
   // Actions bar
   actionsBarProps,
   // Renderer overrides
@@ -511,9 +534,12 @@ export function WorkloadView({
       keys: 'Escape',
       description: expanded ? 'Go back' : 'Close drawer',
       category: expanded ? 'Navigation' as const : 'Drawer' as const,
-      scope: expanded ? 'global' as const : 'drawer' as const,
+      // 'drawer' (top priority) in both modes so when this is the fullscreen
+      // overlay its Escape unambiguously wins over any background view's Escape
+      // (incl. another 'global'-scope WorkloadView mounted underneath).
+      scope: 'drawer' as const,
       handler: expanded ? onBack : () => onClose?.(),
-      enabled: true,
+      enabled: active,
     },
     {
       id: 'drawer-yaml',
@@ -522,7 +548,7 @@ export function WorkloadView({
       category: 'Drawer' as const,
       scope: 'drawer' as const,
       handler: () => switchView(true),
-      enabled: !expanded,
+      enabled: active && !expanded,
     },
     {
       id: 'drawer-detail',
@@ -531,9 +557,9 @@ export function WorkloadView({
       category: 'Drawer' as const,
       scope: 'drawer' as const,
       handler: () => switchView(false),
-      enabled: !expanded,
+      enabled: active && !expanded,
     },
-  ], [expanded, onBack, onClose, switchView]))
+  ], [active, expanded, onBack, onClose, switchView]))
 
   const status = getResourceStatus(apiKind, resource)
 
@@ -573,7 +599,12 @@ export function WorkloadView({
             <div className="flex items-center gap-1">
               {onExpand && (
                 <button
-                  onClick={onExpand}
+                  onClick={() => onExpand({ yaml: showYaml })}
+                  // Pre-mount the fullscreen view on hover/press so the click starts
+                  // the morph instantly (its heavy mount is already paid for).
+                  onPointerEnter={onExpandIntent}
+                  onPointerDown={onExpandIntent}
+                  onPointerLeave={onCancelExpandIntent}
                   className="p-1.5 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
                   title="Open full view"
                 >
@@ -636,7 +667,9 @@ export function WorkloadView({
         {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
         <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
           {!resource ? (
-            <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
+            // Fill the drawer body so the loading logo centers in it, not in a
+            // 128px box pinned to the top (matches the splash/PaneLoader centering).
+            <FetchResult loading={resourceLoading} error={resourceError} className="h-full" />
           ) : showYaml ? (
             <EditableYamlView
               resource={selectedResource}
@@ -652,7 +685,12 @@ export function WorkloadView({
               onDownload={onDownload}
             />
           ) : (
-            <>
+            <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
+              {renderOverviewLead && hasOperationalIssues && (
+                <div className="px-4 pt-4">
+                  {renderOverviewLead({ kind, namespace, name })}
+                </div>
+              )}
               <ResourceRendererDispatch
                 resource={selectedResource}
                 data={resource}
@@ -679,7 +717,7 @@ export function WorkloadView({
                   {renderOverviewExtra({ kind, namespace, name })}
                 </div>
               )}
-            </>
+            </OperationalIssuesShownContext.Provider>
           )}
         </div>
       </div>
@@ -688,6 +726,7 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
+    <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
     <DetailShell
       breadcrumb={breadcrumb}
       nav={
@@ -802,6 +841,7 @@ export function WorkloadView({
               eventsError={overviewEventsError}
               updatesError={resourceFocusedUpdatesError}
               extraContent={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name })}
+              leadContent={hasOperationalIssues && renderOverviewLead ? renderOverviewLead({ kind, namespace, name }) : undefined}
             />
         )}
         {effectiveTab === 'topology' && (
@@ -881,7 +921,7 @@ export function WorkloadView({
               {yamlObject && !yamlObject.primary && renderRelatedYaml ? (
                 renderRelatedYaml(yamlObject)
               ) : !resource ? (
-                <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
+                <FetchResult loading={resourceLoading} error={resourceError} className="h-full" />
               ) : (
                 <EditableYamlView
                   resource={selectedResource}
@@ -901,6 +941,7 @@ export function WorkloadView({
           </div>
         )}
     </DetailShell>
+    </OperationalIssuesShownContext.Provider>
   )
 }
 
@@ -1335,6 +1376,7 @@ function InfoTab({
   eventsError,
   updatesError,
   extraContent,
+  leadContent,
 }: {
   resource: any
   selectedResource: SelectedResource
@@ -1358,6 +1400,7 @@ function InfoTab({
   eventsError?: Error | null
   updatesError?: Error | null
   extraContent?: ReactNode
+  leadContent?: ReactNode
 }) {
   if (!resource) {
     return <FetchResult loading={isLoading} error={error} className="h-full" />
@@ -1365,6 +1408,11 @@ function InfoTab({
 
   return (
     <div className="h-full overflow-auto">
+      {leadContent && (
+        <div className="px-4 pt-4">
+          {leadContent}
+        </div>
+      )}
       <ResourceRendererDispatch
         resource={selectedResource}
         data={resource}

package/src/hooks/index.ts

@@ -5,5 +5,6 @@ export {
   useRegisterShortcut,
   useRegisterShortcuts,
   useActiveShortcuts,
+  useSuppressBaseShortcuts,
 } from './useKeyboardShortcuts'
 export type { KeyboardShortcut, ShortcutCategory } from './useKeyboardShortcuts'

package/src/hooks/useKeyboardShortcuts.tsx

@@ -46,6 +46,10 @@ interface RegisteredShortcut extends KeyboardShortcut {
 interface KeyboardShortcutContextType {
   registerShortcut: (shortcut: KeyboardShortcut) => () => void
   activeShortcuts: KeyboardShortcut[]
+  /** When true, view-level shortcuts (the per-page scopes) are suppressed — used
+   *  while a fullscreen detail overlay covers the page so the hidden view's keys
+   *  don't fire. `global` (⌘K, the overlay's Escape) and `drawer` still fire. */
+  setBaseShortcutsSuppressed: (suppressed: boolean) => void
 }
 
 const KeyboardShortcutContext = createContext<KeyboardShortcutContextType | null>(null)
@@ -142,6 +146,9 @@ export function KeyboardShortcutProvider({ children }: { children: ReactNode })
   const [version, setVersion] = useState(0)
   const sequenceKeyRef = useRef<string | null>(null)
   const sequenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Read in the keydown handler (a ref, so no re-subscribe needed on change).
+  const baseSuppressedRef = useRef(false)
+  const setBaseShortcutsSuppressed = useCallback((s: boolean) => { baseSuppressedRef.current = s }, [])
 
   const registerShortcut = useCallback((shortcut: KeyboardShortcut) => {
     const id = nextRegistrationId++
@@ -161,9 +168,13 @@ export function KeyboardShortcutProvider({ children }: { children: ReactNode })
       const suppression = getSuppressionLevel(e)
       const suppressed = suppression !== 'none'
 
-      // Get all enabled shortcuts, sorted by scope priority (highest first)
+      // Get all enabled shortcuts, sorted by scope priority (highest first).
+      // While a fullscreen overlay covers the page, drop the view-level scopes
+      // (the hidden page's keys) but keep `global` (⌘K, the overlay's Escape) and
+      // `drawer` so the overlay still works.
       const shortcuts = Array.from(shortcutsRef.current.values())
         .filter(s => s.enabled !== false)
+        .filter(s => !baseSuppressedRef.current || s.scope === 'global' || s.scope === 'drawer')
         .sort((a, b) => SCOPE_PRIORITY[b.scope] - SCOPE_PRIORITY[a.scope])
 
       // Check for multi-key sequence completion
@@ -258,12 +269,22 @@ export function KeyboardShortcutProvider({ children }: { children: ReactNode })
   , [version])
 
   return (
-    <KeyboardShortcutContext.Provider value={{ registerShortcut, activeShortcuts }}>
+    <KeyboardShortcutContext.Provider value={{ registerShortcut, activeShortcuts, setBaseShortcutsSuppressed }}>
       {children}
     </KeyboardShortcutContext.Provider>
   )
 }
 
+/** Suppress view-level shortcuts while `active` (a fullscreen detail overlay is up).
+ *  `global` and `drawer` scopes keep firing so ⌘K and the overlay's own keys work. */
+export function useSuppressBaseShortcuts(active: boolean) {
+  const ctx = useContext(KeyboardShortcutContext)
+  useEffect(() => {
+    ctx?.setBaseShortcutsSuppressed(active)
+    return () => ctx?.setBaseShortcutsSuppressed(false)
+  }, [ctx, active])
+}
+
 /** Register a keyboard shortcut. Automatically deregisters on unmount or when key config changes. */
 export function useRegisterShortcut(shortcut: KeyboardShortcut) {
   const ctx = useContext(KeyboardShortcutContext)

package/src/hooks/useRefreshAnimation.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 
 const MIN_SPIN_DURATION = 400 // ms
 const SUCCESS_DISPLAY_DURATION = 1200 // ms
@@ -15,6 +15,18 @@ type RefreshPhase = 'idle' | 'spinning' | 'success'
 export function useRefreshAnimation(refetchFn: () => void | Promise<unknown>): [() => void, boolean, RefreshPhase] {
   const [phase, setPhase] = useState<RefreshPhase>('idle')
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Guards the async `finally`/timer callbacks from setting state after the
+  // host unmounts — this hook now lives on routed views that mount/unmount.
+  const mountedRef = useRef(true)
+  useEffect(() => {
+    // Re-arm on (re)mount — Strict Mode's mount→cleanup→remount would otherwise
+    // leave this stuck false and freeze the spinner on the next refresh.
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
 
   const wrappedRefetch = useCallback(() => {
     if (timeoutRef.current) {
@@ -31,9 +43,10 @@ export function useRefreshAnimation(refetchFn: () => void | Promise<unknown>): [
       const remaining = MIN_SPIN_DURATION - elapsed
 
       const transitionToSuccess = () => {
+        if (!mountedRef.current) return
         setPhase('success')
         timeoutRef.current = setTimeout(() => {
-          setPhase('idle')
+          if (mountedRef.current) setPhase('idle')
         }, SUCCESS_DISPLAY_DURATION)
       }