@skyhook-io/k8s-ui 1.7.12 → 1.7.14

package/src/components/topology/K8sResourceNode.tsx

@@ -8,6 +8,9 @@ import { clsx } from 'clsx'
 import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
+import { workloadHue } from '../../utils/workload-colors'
+import { ownershipOf } from '../../utils/topology-neighborhood'
+import { midTruncate } from '../../utils/format'
 import { Tooltip } from '../ui/Tooltip'
 
 // Get actionable tooltip content for health issues
@@ -359,6 +362,8 @@ interface K8sResourceNodeProps {
     status: HealthStatus
     nodeData: Record<string, unknown>
     selected?: boolean
+    /** Hover-focus: when a sibling workload is focused, non-members dim. */
+    dimmed?: boolean
     onExpand?: (nodeId: string) => void
     onCollapse?: (nodeId: string) => void
     isExpanded?: boolean
@@ -370,7 +375,14 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   data,
   id,
 }: K8sResourceNodeProps) {
-  const { kind, name, status, nodeData, selected, onExpand, onCollapse, isExpanded } = data
+  const { kind, name, status, nodeData, selected, dimmed, onExpand, onCollapse, isExpanded } = data
+  // Workload tint (application graph): a node owned by exactly one workload
+  // carries that workload's hue. Only on healthy/unknown cards — degraded/
+  // unhealthy already own the card background for health, which must win.
+  const { ownerColorIndex } = ownershipOf(nodeData)
+  const hue = ownerColorIndex !== null && (status === 'healthy' || status === 'unknown')
+    ? workloadHue(ownerColorIndex)
+    : undefined
   const subtitle = getSubtitle(kind, nodeData)
   const isInternet = kind === 'Internet'
   const isPodGroup = kind === 'PodGroup'
@@ -423,10 +435,11 @@ export const K8sResourceNode = memo(function K8sResourceNode({
 
       <div
         className={clsx(
-          'relative rounded-lg overflow-hidden',
+          'relative rounded-lg overflow-hidden transition-opacity duration-150',
           'bg-theme-surface topology-node-card',
           selected && 'topology-node-selected',
-          isSmallNode && 'opacity-90',
+          !selected && dimmed && 'opacity-30',
+          isSmallNode && !dimmed && 'opacity-90',
           // Status bar via CSS pseudo-element (defined in index.css)
           (status === 'healthy' || status === 'unknown') && 'topology-node-status-bar',
           status === 'healthy' && 'topology-node-status-healthy',
@@ -437,6 +450,13 @@ export const K8sResourceNode = memo(function K8sResourceNode({
           ...getStatusStyle(status),
         }}
       >
+        {/* Workload tint — layered over the surface, inset past the 4px status bar */}
+        {hue && (
+          <div
+            className="pointer-events-none absolute inset-y-0 right-0 rounded-r-lg"
+            style={{ left: 4, background: hue.wash }}
+          />
+        )}
 
         {/* Content */}
         <div className={clsx(
@@ -496,9 +516,10 @@ export const K8sResourceNode = memo(function K8sResourceNode({
             </div>
           </div>
 
-          {/* Name */}
+          {/* Name — middle-ellipsis so the differentiating suffix survives
+              (a column of pods sharing a long prefix must stay tellable apart). */}
           <div className="text-sm font-medium text-theme-text-primary truncate pr-1">
-            {name}
+            {midTruncate(name, 34)}
           </div>
 
           {/* Subtitle */}

package/src/components/topology/TopologyGraph.tsx

@@ -20,7 +20,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
+import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Info, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -28,6 +28,8 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
+import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
+import { ownershipOf } from '../../utils/topology-neighborhood'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
 import { pluralize } from '../../utils/pluralize'
@@ -51,6 +53,15 @@ function getEdgeColor(type: string, isTrafficView: boolean): string {
   return EDGE_COLORS[type as keyof typeof EDGE_COLORS] || '#64748b'
 }
 
+// Human-readable edge legend for the resources view (traffic view is all-green).
+const EDGE_LEGEND: { label: string; color: string }[] = [
+  { label: 'owns', color: EDGE_COLORS['manages'] },
+  { label: 'exposes', color: EDGE_COLORS['exposes'] },
+  { label: 'configures', color: EDGE_COLORS['configures'] },
+  { label: 'scales', color: EDGE_COLORS['uses'] },
+  { label: 'routes to', color: EDGE_COLORS['routes-to'] },
+]
+
 // Memoized edge style cache to avoid creating new objects on every render
 const edgeStyleCache = new Map<string, React.CSSProperties>()
 
@@ -179,6 +190,13 @@ interface TopologyGraphProps {
   focusNodeId?: string
   /** Increment to request a focus on focusNodeId (lets the same node be re-focused). */
   focusNonce?: number
+  /** Application graph hover-focus (see WorkloadFocus): when set, nodes outside
+   *  the focused workload's neighborhood dim. Cheap node-data toggle — never
+   *  re-layouts. */
+  focusedOwnerId?: WorkloadFocus
+  /** Hover a node → reports its TopologyNode (null on leave). Drives the rail's
+   *  reciprocal highlight. */
+  onNodeHover?: (node: TopologyNode | null) => void
 }
 
 export function TopologyGraph({
@@ -197,6 +215,8 @@ export function TopologyGraph({
   namespacesKey = '',
   focusNodeId,
   focusNonce,
+  focusedOwnerId,
+  onNodeHover,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
@@ -227,6 +247,7 @@ export function TopologyGraph({
   const [layoutRetryCount, setLayoutRetryCount] = useState(0)
   const [fitViewCounter, setFitViewCounter] = useState(0)
   const [isExporting, setIsExporting] = useState(false)
+  const [showLegend, setShowLegend] = useState(false)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
   // Saved node positions for preservation across topology updates.
@@ -298,18 +319,26 @@ export function TopologyGraph({
     fitAllAfterLayoutRef.current = true
   }, [groupingMode])
 
-  // Expand pod group to show individual pods
+  // Expand pod group to show individual pods. Clear saved positions so ELK
+  // re-lays out the whole graph from scratch — otherwise existing nodes snap
+  // back to their saved spots while the newly-added pods get fresh ELK
+  // coordinates, and the two coordinate spaces collide (overlapping nodes).
+  // Re-fit afterwards since the expanded pods enlarge the content bounds.
   const handleExpandPodGroup = useCallback((podGroupId: string) => {
     setExpandedPodGroups(prev => new Set(prev).add(podGroupId))
+    savedPositionsRef.current.clear()
+    fitAllAfterLayoutRef.current = true
   }, [])
 
-  // Collapse pod group back
+  // Collapse pod group back — same full relayout + re-fit (the graph shrinks).
   const handleCollapsePodGroup = useCallback((podGroupId: string) => {
     setExpandedPodGroups(prev => {
       const next = new Set(prev)
       next.delete(podGroupId)
       return next
     })
+    savedPositionsRef.current.clear()
+    fitAllAfterLayoutRef.current = true
   }, [])
 
   // Expand PodGroup to individual pods
@@ -348,6 +377,7 @@ export function TopologyGraph({
         name: pod.name,
         status: pod.phase === 'Running' ? 'healthy' : pod.phase === 'Pending' ? 'degraded' : 'unhealthy',
         data: {
+          ...podGroupNode.data,
           namespace: pod.namespace,
           phase: pod.phase,
           restarts: pod.restarts,
@@ -625,6 +655,12 @@ export function TopologyGraph({
             return saved ? { ...node, position: saved } : node
           })
 
+      // The ReactFlow fitView prop fires against the pre-layout canvas; once
+      // the first ELK layout lands the content can sit off-center. Re-frame it.
+      if (isInitialLayout) {
+        fitAllAfterLayoutRef.current = true
+      }
+
       // Update saved positions: add/overwrite with positions from this layout run.
       // Remove stale entries for nodes no longer in the topology.
       const currentIds = new Set(positionedNodes.map(n => n.id))
@@ -710,6 +746,17 @@ export function TopologyGraph({
     [topology, workingNodes, onNodeClick]
   )
 
+  const handleNodeMouseEnter = useCallback(
+    (_e: React.MouseEvent, node: Node) => {
+      if (!onNodeHover || node.type === 'group') return
+      const topologyNode =
+        topology?.nodes.find(n => n.id === node.id) ?? workingNodes.find(n => n.id === node.id)
+      if (topologyNode) onNodeHover(topologyNode)
+    },
+    [topology, workingNodes, onNodeHover]
+  )
+  const handleNodeMouseLeave = useCallback(() => onNodeHover?.(null), [onNodeHover])
+
   // Update selected state - only update nodes that actually changed
   useEffect(() => {
     setNodes(nds => {
@@ -743,6 +790,32 @@ export function TopologyGraph({
     // functional update returns the same array ref when nothing changed.
   }, [selectedNodeId, setNodes, nodes])
 
+  // Hover-focus dim (application graph): when a workload is focused, dim every
+  // resource node not owned by it. A pure data toggle on the existing nodes —
+  // positions are untouched, so it never re-runs the (expensive) ELK layout.
+  useEffect(() => {
+    setNodes(nds => {
+      let changed = false
+      const updated = nds.map(node => {
+        if (node.type === 'group') return node
+        const stamp = ownershipOf(node.data?.nodeData as Record<string, unknown> | undefined)
+        // A focused workload lights its whole neighborhood (focusWorkloadIds);
+        // the "Shared / unscoped" focus lights every neutral node.
+        const inFocus =
+          focusedOwnerId == null
+            ? true
+            : focusedOwnerId === NEUTRAL_OWNER
+              ? stamp.ownerWorkloadId == null
+              : stamp.focusWorkloadIds.includes(focusedOwnerId)
+        const shouldDim = focusedOwnerId != null && !inFocus
+        if (!!node.data?.dimmed === shouldDim) return node
+        changed = true
+        return { ...node, data: { ...node.data, dimmed: shouldDim } }
+      })
+      return changed ? updated : nds
+    })
+  }, [focusedOwnerId, setNodes, nodes])
+
   if (!topology) {
     return <PaneLoader label="Loading topology…" className="absolute inset-0" />
   }
@@ -884,6 +957,8 @@ export function TopologyGraph({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onNodeClick={handleNodeClick}
+        onNodeMouseEnter={handleNodeMouseEnter}
+        onNodeMouseLeave={handleNodeMouseLeave}
         nodeTypes={nodeTypes}
         fitView
         fitViewOptions={{ padding: 0.2 }}
@@ -935,6 +1010,30 @@ export function TopologyGraph({
               onExportingChange={setIsExporting}
             />
           </div>
+          {!isTrafficView && (
+            <>
+              {showLegend && (
+                <div className="rounded-md border border-theme-border bg-theme-surface/95 px-3 py-2 shadow-theme-md backdrop-blur">
+                  <div className="mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Edge colors</div>
+                  <div className="flex flex-col gap-1">
+                    {EDGE_LEGEND.map((e) => (
+                      <div key={e.label} className="flex items-center gap-2 text-[11px] text-theme-text-secondary">
+                        <span className="inline-block h-0.5 w-5 rounded-full" style={{ background: e.color }} />
+                        {e.label}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className="react-flow__controls overflow-hidden" style={{ position: 'static', margin: 0 }}>
+                <Tooltip content="Edge color legend" delay={100} position="right">
+                  <button className="react-flow__controls-button" onClick={() => setShowLegend((v) => !v)}>
+                    <Info className="w-3.5 h-3.5" />
+                  </button>
+                </Tooltip>
+              </div>
+            </>
+          )}
         </Panel>
         <ViewportController
           viewMode={viewMode}

package/src/components/topology/layout.ts

@@ -109,6 +109,17 @@ const pendingRequests = new Map<number, {
   reject: (error: Error) => void
 }>()
 
+const WORKER_UNAVAILABLE = 'Worker unavailable'
+
+function rejectPendingWorkerRequests() {
+  for (const [, pending] of pendingRequests) {
+    pending.reject(new Error(WORKER_UNAVAILABLE))
+  }
+  pendingRequests.clear()
+  layoutWorker?.terminate()
+  layoutWorker = null
+}
+
 function getOrCreateWorker(): Worker {
   if (!layoutWorker) {
     layoutWorker = new Worker(new URL('./layout.worker.ts', import.meta.url), { type: 'module' })
@@ -126,10 +137,7 @@ function getOrCreateWorker(): Worker {
     }
     layoutWorker.onerror = (e) => {
       console.error('[TopologyLayout] Worker error:', e)
-      for (const [, pending] of pendingRequests) {
-        pending.reject(new Error('Worker error'))
-      }
-      pendingRequests.clear()
+      rejectPendingWorkerRequests()
     }
   }
   return layoutWorker
@@ -142,10 +150,16 @@ function runLayoutViaWorker(
   padding: typeof GROUP_PADDING
 ): Promise<LayoutResult> {
   return new Promise((resolve, reject) => {
-    const worker = getOrCreateWorker()
-    const requestId = ++requestIdCounter
-    pendingRequests.set(requestId, { resolve, reject })
-    worker.postMessage({ type: 'layout', requestId, elkGraph, groupingMode, hideGroupHeader, padding })
+    try {
+      const worker = getOrCreateWorker()
+      const requestId = ++requestIdCounter
+      pendingRequests.set(requestId, { resolve, reject })
+      worker.postMessage({ type: 'layout', requestId, elkGraph, groupingMode, hideGroupHeader, padding })
+    } catch (err) {
+      console.error('[TopologyLayout] Worker unavailable:', err)
+      rejectPendingWorkerRequests()
+      reject(new Error(WORKER_UNAVAILABLE))
+    }
   })
 }
 
@@ -273,7 +287,18 @@ function runLayout(
   if (layoutEngine === 'main-thread') {
     return runLayoutOnMainThread(elkGraph, groupingMode, hideGroupHeader, padding)
   }
-  return runLayoutViaWorker(elkGraph, groupingMode, hideGroupHeader, padding)
+  return runLayoutViaWorker(elkGraph, groupingMode, hideGroupHeader, padding).catch((err) => {
+    // A worker failure before a layout result arrives usually means the
+    // consumer's bundler/CSP couldn't serve or run the worker chunk.
+    // Fall back to the inline engine permanently rather than rendering a dead
+    // "Layout Error" pane.
+    if (err instanceof Error && err.message === WORKER_UNAVAILABLE) {
+      console.warn('[TopologyLayout] layout worker unavailable — falling back to main-thread ELK')
+      layoutEngine = 'main-thread'
+      return runLayoutOnMainThread(elkGraph, groupingMode, hideGroupHeader, padding)
+    }
+    throw err
+  })
 }
 
 interface ElkNode {
@@ -798,7 +823,7 @@ function computeGridDimensions(cardCount: number, groupKey: string): { width: nu
 }
 
 // Two-phase layout: first layout groups internally, then position groups based on connections
-// Layout is performed in a Web Worker to avoid blocking the main thread
+// Layout runs via the active engine — a Web Worker when available, else inline
 export async function applyHierarchicalLayout(
   elkGraph: ElkGraph,
   topologyNodes: TopologyNode[],
@@ -817,7 +842,7 @@ export async function applyHierarchicalLayout(
   try {
     const padding = hideGroupHeader ? GROUP_PADDING_NO_HEADER : GROUP_PADDING
 
-    // Run layout in worker (off main thread)
+    // Run layout via the active engine
     const workerResult = await runLayout(elkGraph, groupingMode, hideGroupHeader, padding)
 
     if (workerResult.error) {

package/src/components/ui/CenteredEmpty.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { EmptyState, type EmptyStateTone } from './EmptyState'
+
+// CenteredEmpty — the shared "whole panel is empty" state, centered in the
+// available height (matches how the view components present their own
+// empty/healthy states). Use for not-found / no-data-at-all; for "the filter
+// excluded everything" render an inline EmptyState card where the rows would be.
+export function CenteredEmpty({
+  tone = 'neutral',
+  icon,
+  headline,
+  body,
+  action,
+}: {
+  tone?: EmptyStateTone
+  icon?: LucideIcon
+  headline: string
+  body?: ReactNode
+  action?: ReactNode
+}) {
+  return (
+    <div className="flex min-h-[55vh] flex-1 items-center justify-center p-4">
+      <EmptyState tone={tone} variant="card" icon={icon} headline={headline} body={body} action={action} className="border-none bg-transparent" />
+    </div>
+  )
+}

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,7 +1,6 @@
 import { useState, useMemo } from 'react'
 import { ChevronDown, ChevronRight, Loader2 } from 'lucide-react'
 import { ConfirmDialog } from './ConfirmDialog'
-import { formatKindName } from './drawer-components'
 import { pluralize } from '../../utils/pluralize'
 
 export interface CascadeDependent {
@@ -115,7 +114,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
         <div className="px-3 pb-2.5 space-y-1.5">
           {grouped.map(([kind, names]) => (
             <div key={kind} className="text-xs">
-              <span className="font-medium text-theme-text-primary">{formatKindName(kind)}</span>
+              <span className="font-medium text-theme-text-primary">{kind}</span>
               <span className="text-theme-text-tertiary ml-1">({names.length})</span>
               <div className="ml-3 mt-0.5 text-theme-text-secondary font-mono break-all">
                 {names.slice(0, MAX_NAMES_PER_KIND).join(', ')}

package/src/components/ui/SearchBox.tsx

@@ -0,0 +1,85 @@
+import { useRef } from 'react'
+import { Search, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useRegisterShortcut, type ShortcutScope } from '../../hooks/useKeyboardShortcuts'
+
+/** The standard list-view search box: themed input with a `/`-to-focus
+ *  shortcut, Escape-to-blur, and a clear affordance. One definition so the
+ *  views can't drift (hand-rolled copies had already diverged: a blue focus
+ *  ring in Timeline, no clear button in Audit). ResourcesView keeps its inline
+ *  variant — regex mode and row-navigation handoff are coupled to its table. */
+export function SearchBox({
+  value,
+  onChange,
+  scope,
+  shortcutId,
+  placeholder = 'Search... (press /)',
+  className,
+  onEnter,
+  onArrowDown,
+}: {
+  value: string
+  onChange: (value: string) => void
+  /** Help-overlay grouping + collision priority for the `/` shortcut. */
+  scope: ShortcutScope
+  /** Unique shortcut id, e.g. 'applications-search'. */
+  shortcutId: string
+  placeholder?: string
+  /** Width/layout overrides — the box itself stays themed. */
+  className?: string
+  /** Enter in the box — e.g. open the first filtered row. */
+  onEnter?: () => void
+  /** ArrowDown in the box — hand focus off to list keyboard navigation. */
+  onArrowDown?: () => void
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useRegisterShortcut({
+    id: shortcutId,
+    keys: '/',
+    description: 'Focus search',
+    category: 'Search',
+    scope,
+    handler: () => inputRef.current?.focus(),
+  })
+
+  return (
+    <div className={clsx('relative', className)}>
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-theme-text-tertiary" />
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            inputRef.current?.blur()
+          } else if (e.key === 'Enter' && onEnter) {
+            e.preventDefault()
+            inputRef.current?.blur()
+            onEnter()
+          } else if (e.key === 'ArrowDown' && onArrowDown) {
+            e.preventDefault()
+            inputRef.current?.blur()
+            onArrowDown()
+          }
+        }}
+        className="w-full rounded-lg border border-theme-border-light bg-theme-elevated py-1.5 pl-10 pr-9 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-skyhook-500"
+      />
+      {value && (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => {
+            onChange('')
+            inputRef.current?.focus()
+          }}
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-primary"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}

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

@@ -701,6 +701,14 @@ export function formatKindName(kind: string): string {
   return kind
 }
 
+// Resolve the display label for a kind chip. The fetched resource's `dataKind`
+// is the authoritative PascalCase kind and is correct for every CRD; prefer it.
+// Before data loads, fall back to deriving from the URL plural — which is only
+// reliable for the core kinds in formatKindName's map.
+export function displayKindName(urlPlural: string, dataKind?: string): string {
+  return dataKind || formatKindName(urlPlural)
+}
+
 // Type for copy handler
 export type CopyHandler = (text: string, key: string) => void
 

package/src/components/ui/index.ts

@@ -6,6 +6,7 @@ export type { MiddleEllipsisProps } from './MiddleEllipsis'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
 export { FetchResult } from './FetchResult'
+export { SearchBox } from './SearchBox'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
 export { StatusDot, mapHealthToTone } from './status-tone'