@skyhook-io/k8s-ui 1.5.9 → 1.5.11

package/src/components/ui/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
+import { computeTooltipPosition } from './tooltip-position'
 
 // Module-level singleton coordinator: only one Tooltip can be visible
 // at a time across the whole app. Without this, two Tooltip instances
@@ -45,53 +46,43 @@ export function Tooltip({
   wrapperStyle,
 }: TooltipProps) {
   const [isVisible, setIsVisible] = useState(false)
-  const [coords, setCoords] = useState({ top: 0, left: 0 })
+  // null until measured. Portal renders with visibility:hidden until coords
+  // resolve so the user never sees a frame painted at default (0,0).
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(
+    null
+  )
   const triggerRef = useRef<HTMLSpanElement>(null)
   const tooltipRef = useRef<HTMLSpanElement>(null)
   const timeoutRef = useRef<number | null>(null)
+  const rafRef = useRef<number | null>(null)
 
   const updatePosition = useCallback(() => {
     if (!triggerRef.current) return
 
-    const rect = triggerRef.current.getBoundingClientRect()
+    const triggerRect = triggerRef.current.getBoundingClientRect()
     const tooltipRect = tooltipRef.current?.getBoundingClientRect()
-    const tooltipWidth = tooltipRect?.width || 0
-    const tooltipHeight = tooltipRect?.height || 0
-
-    let top = 0
-    let left = 0
-
-    switch (position) {
-      case 'top':
-        top = rect.top - tooltipHeight - 6
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        break
-      case 'bottom':
-        top = rect.bottom + 6
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        break
-      case 'left':
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        left = rect.left - tooltipWidth - 6
-        break
-      case 'right':
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        left = rect.right + 6
-        break
-    }
 
-    // Keep tooltip within viewport
-    const padding = 8
-    if (left < padding) left = padding
-    if (left + tooltipWidth > window.innerWidth - padding) {
-      left = window.innerWidth - tooltipWidth - padding
-    }
-    if (top < padding) top = rect.bottom + 6 // flip to bottom
-    if (top + tooltipHeight > window.innerHeight - padding) {
-      top = rect.top - tooltipHeight - 6 // flip to top
-    }
+    const next = computeTooltipPosition({
+      triggerRect: {
+        top: triggerRect.top,
+        left: triggerRect.left,
+        width: triggerRect.width,
+        height: triggerRect.height,
+      },
+      tooltipSize: {
+        width: tooltipRect?.width ?? 0,
+        height: tooltipRect?.height ?? 0,
+      },
+      position,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+    })
 
-    setCoords({ top, left })
+    if (next) {
+      setCoords(next)
+    }
   }, [position])
 
   // Stable hide function for the singleton registry — useRef so the
@@ -104,6 +95,7 @@ export function Tooltip({
       timeoutRef.current = null
     }
     setIsVisible(false)
+    setCoords(null)
   }
 
   const showTooltip = () => {
@@ -128,12 +120,22 @@ export function Tooltip({
       activeHide = null
     }
     setIsVisible(false)
+    setCoords(null)
   }
 
   useEffect(() => {
     if (isVisible) {
-      // Small delay to let the tooltip render before measuring
-      requestAnimationFrame(updatePosition)
+      // Second rAF re-centers using the measured tooltip size; without
+      // it the first frame centers against size 0 and visibly jumps.
+      const id1 = requestAnimationFrame(() => {
+        updatePosition()
+        const id2 = requestAnimationFrame(updatePosition)
+        rafRef.current = id2
+      })
+      rafRef.current = id1
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      }
     }
   }, [isVisible, updatePosition])
 
@@ -142,6 +144,9 @@ export function Tooltip({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
       }
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current)
+      }
       // Clear from singleton registry on unmount — otherwise a Tooltip
       // that unmounts while visible (e.g. row removed during hover)
       // would leave a stale entry in activeHide pointing at a torn-down
@@ -165,9 +170,27 @@ export function Tooltip({
         timeoutRef.current = null
       }
       setIsVisible(false)
+      setCoords(null)
     }
   }, [disabled])
 
+  // Mouseleave doesn't fire when the trigger stays mounted across a
+  // navigation and the cursor is still over it; popstate + Escape give
+  // a deterministic dismissal path for those cases.
+  useEffect(() => {
+    if (!isVisible) return
+    const onPop = () => hideRef.current()
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hideRef.current()
+    }
+    window.addEventListener('popstate', onPop)
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('popstate', onPop)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [isVisible])
+
   if (disabled || !content) {
     return <>{children}</>
   }
@@ -182,6 +205,10 @@ export function Tooltip({
         onMouseLeave={hideTooltip}
         onFocus={showTooltip}
         onBlur={hideTooltip}
+        // pointerdown fires before click, so the tooltip is gone before
+        // the trigger's action runs. Required when the child handles
+        // navigation/state changes that don't unmount the trigger.
+        onPointerDown={hideTooltip}
       >
         {children}
       </span>
@@ -194,8 +221,14 @@ export function Tooltip({
               'whitespace-nowrap pointer-events-none',
               className
             )}
-            style={{ top: coords.top, left: coords.left }}
+            style={{
+              top: coords?.top ?? 0,
+              left: coords?.left ?? 0,
+              // Hide until first measurement so we never paint at (0,0).
+              visibility: coords ? 'visible' : 'hidden',
+            }}
             role="tooltip"
+            aria-hidden={coords ? undefined : true}
           >
             {content}
           </span>,

package/src/components/ui/tooltip-position.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect } from 'vitest'
+import { computeTooltipPosition } from './tooltip-position'
+
+const VIEWPORT = { width: 1280, height: 800 }
+
+describe('computeTooltipPosition', () => {
+  it('returns null when the trigger has no layout (prevents 0,0 flash)', () => {
+    expect(
+      computeTooltipPosition({
+        triggerRect: { top: 0, left: 0, width: 0, height: 0 },
+        tooltipSize: { width: 80, height: 24 },
+        position: 'top',
+        viewport: VIEWPORT,
+      })
+    ).toBeNull()
+  })
+
+  it('returns a valid position even when the tooltip itself is unmeasured (size 0,0)', () => {
+    // Real situation on the very first show: tooltip portal exists but
+    // hasn't laid out yet, so its rect is (0,0,0,0). We still need a
+    // sane anchor so the next frame's update has something to refine —
+    // but it must NOT be (0,0).
+    const result = computeTooltipPosition({
+      triggerRect: { top: 12, left: 200, width: 80, height: 28 },
+      tooltipSize: { width: 0, height: 0 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    expect(result).not.toBeNull()
+    // Top placement above a near-the-edge trigger flips to bottom; either
+    // way the tooltip must not land at the viewport origin.
+    expect(result!.top).toBeGreaterThanOrEqual(8)
+    expect(result!.left).toBeGreaterThanOrEqual(8)
+  })
+
+  it('centers a top-placed tooltip horizontally above the trigger', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    expect(result).toEqual({
+      // 200 - 24 - 6
+      top: 170,
+      // 400 + 50 - 40
+      left: 410,
+    })
+  })
+
+  it('flips a top-placed tooltip to bottom when the trigger is too close to the top edge (nav button case)', () => {
+    // Trigger near the top edge: "top" placement computes a negative top,
+    // so the helper must flip below.
+    const result = computeTooltipPosition({
+      triggerRect: { top: 12, left: 200, width: 80, height: 28 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    // 12 - 24 - 6 = -18 → flips to 12 + 28 + 6 = 46
+    expect(result!.top).toBe(46)
+    // Centered: 200 + 40 - 40 = 200
+    expect(result!.left).toBe(200)
+  })
+
+  it('clamps a tooltip that would overflow the right edge', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 100, left: 1240, width: 30, height: 28 },
+      tooltipSize: { width: 200, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    // viewport.width - tooltipWidth - padding = 1280 - 200 - 8
+    expect(result!.left).toBe(1072)
+  })
+
+  it('clamps a tooltip that would overflow the left edge', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 100, left: 4, width: 30, height: 28 },
+      tooltipSize: { width: 200, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    expect(result!.left).toBe(8)
+  })
+
+  it('places a bottom-anchored tooltip below the trigger', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'bottom',
+      viewport: VIEWPORT,
+    })
+    expect(result!.top).toBe(246)
+  })
+
+  it('places a left-anchored tooltip to the left of the trigger and centers vertically', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'left',
+      viewport: VIEWPORT,
+    })
+    expect(result).toEqual({
+      // 200 + 20 - 12
+      top: 208,
+      // 400 - 80 - 6
+      left: 314,
+    })
+  })
+
+  it('places a right-anchored tooltip to the right of the trigger', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'right',
+      viewport: VIEWPORT,
+    })
+    expect(result!.left).toBe(506)
+  })
+
+  it('respects a custom padding', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 100, left: 4, width: 30, height: 28 },
+      tooltipSize: { width: 200, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+      padding: 20,
+    })
+    expect(result!.left).toBe(20)
+  })
+})

package/src/components/ui/tooltip-position.ts

@@ -0,0 +1,86 @@
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface Rect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface Viewport {
+  width: number
+  height: number
+}
+
+export interface ComputeTooltipPositionInput {
+  triggerRect: Rect
+  tooltipSize: Size
+  position: TooltipPlacement
+  viewport: Viewport
+  padding?: number
+}
+
+/**
+ * Returns null when the trigger has no layout (zero rect at origin) so the
+ * caller can render hidden until a real measurement is available, instead
+ * of painting at (0, 0).
+ */
+export function computeTooltipPosition({
+  triggerRect,
+  tooltipSize,
+  position,
+  viewport,
+  padding = 8,
+}: ComputeTooltipPositionInput): { top: number; left: number } | null {
+  const triggerHasNoLayout =
+    triggerRect.width === 0 &&
+    triggerRect.height === 0 &&
+    triggerRect.top === 0 &&
+    triggerRect.left === 0
+  if (triggerHasNoLayout) {
+    return null
+  }
+
+  const { width: tw, height: th } = tooltipSize
+
+  let top = 0
+  let left = 0
+
+  switch (position) {
+    case 'top':
+      top = triggerRect.top - th - 6
+      left = triggerRect.left + triggerRect.width / 2 - tw / 2
+      break
+    case 'bottom':
+      top = triggerRect.top + triggerRect.height + 6
+      left = triggerRect.left + triggerRect.width / 2 - tw / 2
+      break
+    case 'left':
+      top = triggerRect.top + triggerRect.height / 2 - th / 2
+      left = triggerRect.left - tw - 6
+      break
+    case 'right':
+      top = triggerRect.top + triggerRect.height / 2 - th / 2
+      left = triggerRect.left + triggerRect.width + 6
+      break
+  }
+
+  if (left < padding) left = padding
+  if (left + tw > viewport.width - padding) {
+    left = viewport.width - tw - padding
+  }
+  if (top < padding) {
+    top = triggerRect.top + triggerRect.height + 6
+  }
+  if (top + th > viewport.height - padding) {
+    top = triggerRect.top - th - 6
+  }
+  if (top < padding) top = padding
+
+  return { top, left }
+}

package/src/components/workload/WorkloadView.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { startViewTransitionSafe } from '../../utils/view-transition'
 import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
@@ -212,12 +213,11 @@ export function WorkloadView({
   }, [kindProp, namespace, name, initialTab])
 
   const switchView = useCallback((yaml: boolean) => {
-    const update = () => flushSync(() => setShowYaml(yaml))
-    if (document.startViewTransition) {
-      document.startViewTransition(update)
-    } else {
-      setShowYaml(yaml)
-    }
+    // startViewTransitionSafe handles the API-missing fallback AND
+    // swallows the InvalidStateError that the API rejects with when
+    // a new transition supersedes an in-flight one (rapid clicks).
+    // (SKY-833 bug 49)
+    startViewTransitionSafe(() => flushSync(() => setShowYaml(yaml)))
   }, [])
 
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null)

package/src/types/core.ts

@@ -33,11 +33,27 @@ export interface Capabilities {
   helmWrite: boolean      // Helm write operations (install, upgrade, rollback, uninstall, apply values)
   nodeWrite: boolean      // Node write operations (cordon, uncordon, drain)
   mcpEnabled: boolean     // MCP server is running
+  // How / where this Radar binary is running. Optional on the wire so a
+  // newer frontend (e.g. radar-hub-web bundling a fresher @skyhook-io/radar-app)
+  // doesn't crash against an older backend that hasn't shipped the field yet —
+  // consumers should default to { mode: 'local' } when absent.
+  deployment?: Deployment
   resources?: ResourcePermissions // Per-resource-type permissions
   authEnabled?: boolean   // Auth is enabled on the backend
   username?: string       // Authenticated user's username (when auth enabled)
 }
 
+// DeploymentMode is the closed set of topologies Radar can run in.
+// `local` is a developer's machine with a kubeconfig (most OSS use).
+// `in-cluster` is a Radar pod inside the cluster, no kubeconfig.
+// `cloud` is in-cluster + tunneled to Radar Cloud's hub — UI suppresses
+// chrome the hub already renders (cluster headline, local-MCP card).
+export type DeploymentMode = 'local' | 'in-cluster' | 'cloud'
+
+export interface Deployment {
+  mode: DeploymentMode
+}
+
 // Core node kinds that have specific UI handling
 //
 // When adding a new kind here, also update:

package/src/utils/badge-colors.ts

@@ -53,6 +53,25 @@ export const HELM_STATUS_COLORS: Record<string, string> = {
   uninstalled: BADGE_SEVERITY_COLORS.neutral,
 }
 
+// Cloud instance capacity/priority badges — used by Karpenter NodeClaim and CAPI cloud-provider renderers
+// Keyed by the value as it appears in the resource (spot, on-demand, regular, onDemand)
+export const CAPACITY_TYPE_BADGE: Record<string, string> = {
+  spot: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
+  'on-demand': 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  onDemand: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  regular: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+}
+
+// AKS-style nodepool mode badges — System (control plane) vs User (workload)
+export const NODEPOOL_MODE_BADGE: Record<string, string> = {
+  System: 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  User: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+}
+
+// Translucent gray badge for "inactive / unknown / pending / unset / disabled" states.
+// The de-facto fallback in renderers when no severity or category applies.
+export const BADGE_INACTIVE = 'bg-gray-500/20 text-gray-400'
+
 // Best practices category colors
 export const BP_CATEGORY_BADGE: Record<string, string> = {
   Security: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950/40 dark:text-purple-400 dark:border-purple-800/40',

package/src/utils/index.ts

@@ -12,3 +12,5 @@ export * from './api-resources'
 export * from './skeleton-yaml'
 export * from './k8s-errors'
 export * from './parse-go-time'
+export * from './view-transition'
+export * from './validators'