@skyhook-io/k8s-ui 1.8.7 → 1.8.8

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

@@ -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 */
@@ -248,8 +255,11 @@ export function WorkloadView({
   onNavigateToResource,
   onCollapseToDrawer,
   expanded = true,
+  active = true,
   onClose,
   onExpand,
+  onExpandIntent,
+  onCancelExpandIntent,
   initialTab,
   group,
   breadcrumb,
@@ -524,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',
@@ -535,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',
@@ -544,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)
 
@@ -586,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"
                 >

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

package/src/index.ts

@@ -53,6 +53,14 @@ export * from './components/issues'
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
 
+// Namespace picker (shared scope-filter trigger+dropdown for OSS Radar and
+// Radar Hub — pure presentation, data injected via props)
+export * from './components/namespace-switcher'
+
+// Scope pill — the shared bordered shell that groups the cluster + namespace
+// segments into one unit (OSS header + Radar Hub cluster top bar)
+export * from './components/scope-pill'
+
 // Applications (shared host-agnostic list + detail shell for the deployable-
 // software surface; OSS renders single-cluster, Cloud adds the fleet layer)
 export * from './components/applications'

package/src/types/core.ts

@@ -587,6 +587,7 @@ export interface HelmOperation {
   source: HelmOperationSource
   confidence: HelmOperationConfidence
   message: string
+  rawMessage?: string
   evidence?: string
   failureDescription?: string
   revision?: number
@@ -597,6 +598,22 @@ export interface HelmOperation {
   updated?: string
 }
 
+export type HelmOperationInsightState = 'active' | 'recovered'
+
+export interface HelmSuggestedCompare {
+  revision1: number
+  revision2: number
+  reason?: string
+}
+
+export interface HelmOperationInsight {
+  state: HelmOperationInsightState
+  primaryResource?: HelmOwnedResource
+  relatedResources?: HelmOwnedResource[]
+  signalCount?: number
+  suggestedCompare?: HelmSuggestedCompare
+}
+
 export interface HelmReleaseDetail {
   name: string
   namespace: string
@@ -621,6 +638,7 @@ export interface HelmReleaseDetail {
   dependencies?: ChartDependency[]
   lastOperation?: HelmOperation
   operations?: HelmOperation[]
+  operationInsight?: HelmOperationInsight
   // When set, this release was installed by Flux's helm-controller — see
   // HelmRelease.managedByFluxHelmRelease for context. Format: "namespace/name".
   managedByFluxHelmRelease?: string
@@ -631,6 +649,7 @@ export interface HelmHook {
   namespace?: string
   kind: string
   path?: string
+  manifestChanged?: boolean
   events: string[]
   weight: number
   status?: string
@@ -746,6 +765,15 @@ export interface NotesDiff {
   diff: string
 }
 
+export interface HooksDiff {
+  revision1: number
+  revision2: number
+  added: HelmHook[]
+  removed: HelmHook[]
+  modified: HelmHook[]
+  unchanged: HelmHook[]
+}
+
 export interface HelmResourceRef {
   kind: string
   apiVersion?: string
@@ -753,12 +781,26 @@ export interface HelmResourceRef {
   namespace: string
 }
 
+export interface HelmResourceFieldChange {
+  path: string
+  oldValue: unknown
+  newValue: unknown
+}
+
+export interface HelmResourceChange extends HelmResourceRef {
+  summary?: string
+  fieldCount: number
+  fields: HelmResourceFieldChange[]
+}
+
 export interface ResourceDiff {
   revision1: number
   revision2: number
   added: HelmResourceRef[]
   removed: HelmResourceRef[]
+  modified: HelmResourceChange[]
   unchanged: HelmResourceRef[]
+  parseErrorCount?: number
 }
 
 // Selected Helm release (for drawer state)

package/src/types/gitops-insights.ts

@@ -45,6 +45,7 @@ export interface GitOpsInsightSummary {
   // Latest operation status message — surfaced inline in the status strip
   // when an operation is in flight or just failed.
   operationMessage?: string
+  rawOperationMessage?: string
   source?: string
   targetRevision?: string
   lastRevision?: string
@@ -79,6 +80,7 @@ export interface GitOpsIssue {
   scope: GitOpsScope
   reason: string
   message: string
+  rawMessage?: string
   refs?: GitOpsInsightRef[]
   action?: string
   // Plain-English root cause when the message matched a recognized error
@@ -112,6 +114,7 @@ export interface GitOpsChange {
   // Per-resource sync failure message (Argo's status.resources[].syncResult).
   // Distinct from `message` (live health). Empty when sync succeeded.
   syncError?: string
+  rawSyncError?: string
   // Sync hook phase: PreSync / PostSync / SyncFail / PostDelete. Empty
   // for non-hook resources.
   hookPhase?: string
@@ -175,6 +178,7 @@ export interface GitOpsHistoryItem {
   deployedAt?: string
   phase?: string
   message?: string
+  rawMessage?: string
   source?: string
   initiatedBy?: string
 }

package/src/utils/animation.ts

@@ -22,6 +22,16 @@ export const DURATION_DOCK = 150
 /** Toast exit animation */
 export const DURATION_TOAST_EXIT = 200
 
+/** Drawer ↔ fullscreen expand/collapse morph. Longer than DURATION_NORMAL so a
+ *  large width change advances in small per-frame steps (reads as fluid, not
+ *  abrupt). Drives the frame width, the content crossfade, and the JS window
+ *  together — keep them in lockstep. */
+export const DURATION_DRAWER_MORPH = 260
+/** Decelerate curve — fast start, gentle settle. Reads as snappy/responsive (the
+ *  earlier ease-in-out's slow start felt sluggish). Safe now that the pinned-layer
+ *  crossfade fixed the reflow that originally needed the gentle start. */
+export const EASE_DRAWER_MORPH = 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+
 // -- Tailwind class presets ---------------------------------------------------
 // Reusable class fragments — import and spread into clsx() calls.