@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -45,13 +45,22 @@ const RESOURCE_KINDS: {
   { kind: 'PodGroup', label: 'Pod Group', icon: getTopologyIcon('PodGroup'), color: 'text-lime-400', category: 'workloads' },
   { kind: 'Job', label: 'Job', icon: getTopologyIcon('Job'), color: 'text-orange-400', category: 'workloads' },
   { kind: 'CronJob', label: 'CronJob', icon: getTopologyIcon('CronJob'), color: 'text-orange-300', category: 'workloads' },
+  { kind: 'Workflow', label: 'Workflow', icon: getTopologyIcon('Workflow'), color: 'text-purple-400', category: 'workloads' },
+  { kind: 'CronWorkflow', label: 'CronWorkflow', icon: getTopologyIcon('CronWorkflow'), color: 'text-purple-300', category: 'workloads' },
 
   // Config
   { kind: 'ConfigMap', label: 'ConfigMap', icon: getTopologyIcon('ConfigMap'), color: 'text-amber-400', category: 'config' },
   { kind: 'Secret', label: 'Secret', icon: getTopologyIcon('Secret'), color: 'text-red-400', category: 'config' },
+  { kind: 'ServiceAccount', label: 'Service Account', icon: getTopologyIcon('ServiceAccount'), color: 'text-fuchsia-400', category: 'config' },
+  { kind: 'SealedSecret', label: 'Sealed Secret', icon: getTopologyIcon('SealedSecret'), color: 'text-violet-400', category: 'config' },
+  { kind: 'ServiceMonitor', label: 'Service Monitor', icon: getTopologyIcon('ServiceMonitor'), color: 'text-sky-400', category: 'config' },
+  { kind: 'PodMonitor', label: 'Pod Monitor', icon: getTopologyIcon('PodMonitor'), color: 'text-sky-400', category: 'config' },
+  { kind: 'WorkflowTemplate', label: 'WorkflowTemplate', icon: getTopologyIcon('WorkflowTemplate'), color: 'text-purple-300', category: 'config' },
+  { kind: 'ClusterWorkflowTemplate', label: 'ClusterWorkflowTemplate', icon: getTopologyIcon('ClusterWorkflowTemplate'), color: 'text-purple-300', category: 'config' },
 
   // Scaling
   { kind: 'HorizontalPodAutoscaler', label: 'HPA', icon: getTopologyIcon('HorizontalPodAutoscaler'), color: 'text-pink-400', category: 'scaling' },
+  { kind: 'ScaledJob', label: 'ScaledJob', icon: getTopologyIcon('ScaledJob'), color: 'text-pink-300', category: 'scaling' },
 
   // Knative
   { kind: 'KnativeService', label: 'Knative Service', icon: getTopologyIcon('KnativeService'), color: 'text-fuchsia-400', category: 'custom' },

package/src/components/topology/TopologyGraph.tsx

@@ -14,6 +14,7 @@ import {
   type NodeTypes,
   type NodeChange,
   type Viewport,
+  type FitViewOptions,
   BackgroundVariant,
   MarkerType,
 } from '@xyflow/react'
@@ -22,6 +23,7 @@ import { toCanvas } from 'html-to-image'
 
 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 { Input } from '../ui/Input'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
@@ -201,6 +203,10 @@ interface TopologyGraphProps {
   /** Hover a node → reports its TopologyNode (null on leave). Drives the rail's
    *  reciprocal highlight. */
   onNodeHover?: (node: TopologyNode | null) => void
+  /** Toggle a stable Deployment's normally-collapsed ReplicaSet tier. */
+  onToggleReplicaSets?: (ownerID: string) => void
+  /** Padding reserved around fit-to-view operations for overlaid UI. */
+  fitViewPadding?: FitViewOptions['padding']
 }
 
 export function TopologyGraph({
@@ -221,6 +227,8 @@ export function TopologyGraph({
   focusNonce,
   focusedOwnerId,
   onNodeHover,
+  onToggleReplicaSets,
+  fitViewPadding = 0.15,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
@@ -701,6 +709,7 @@ export function TopologyGraph({
             onExpand: isExpandablePodGroup ? handleExpandPodGroup : undefined,
             onCollapse: expandedFromGroup ? handleCollapsePodGroup : undefined,
             isExpanded: isExpandablePodGroup ? expandedPodGroups.has(node.id) : undefined,
+            onToggleReplicaSets: nodeData?.replicaSetsExpandable ? onToggleReplicaSets : undefined,
           },
         }
       })
@@ -736,7 +745,7 @@ export function TopologyGraph({
     // No cleanup function - we use version-based invalidation instead
     // This prevents React's effect re-runs from canceling in-flight layouts
     // when the actual structure hasn't changed
-  }, [workingNodes, workingEdges, structureKey, groupingMode, hideGroupHeader, collapsedGroups, groupLevels, handleSetLevel, handleCardClick, onMaximizeNamespace, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, setNodes, setEdges, layoutRetryCount])
+  }, [workingNodes, workingEdges, structureKey, groupingMode, hideGroupHeader, collapsedGroups, groupLevels, handleSetLevel, handleCardClick, onMaximizeNamespace, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, onToggleReplicaSets, setNodes, setEdges, layoutRetryCount])
 
   // Handle node click
   const handleNodeClick = useCallback(
@@ -829,6 +838,55 @@ export function TopologyGraph({
     })
   }, [focusedOwnerId, setNodes, nodes])
 
+  // Data-only topology updates must repaint existing nodes without forcing an
+  // ELK relayout. Structure hashing deliberately ignores status and metadata;
+  // keep the React Flow node payload in sync on that fast path.
+  useEffect(() => {
+    const topologyById = new Map(workingNodes.map(node => [node.id, node]))
+    setNodes(nds => {
+      let changed = false
+      const updated = nds.map(node => {
+        if (node.type === 'group') return node
+        const topologyNode = topologyById.get(node.id)
+        if (!topologyNode) return node
+        const nodeData = topologyNode.data as Record<string, unknown>
+        const pods = nodeData.pods
+        const isExpandablePodGroup = topologyNode.kind === 'PodGroup' && Array.isArray(pods) && pods.length > 0
+        const expandedFromGroup = nodeData.expandedFromGroup as string | undefined
+        const onExpand = isExpandablePodGroup ? handleExpandPodGroup : undefined
+        const onCollapse = expandedFromGroup ? handleCollapsePodGroup : undefined
+        const isExpanded = isExpandablePodGroup ? expandedPodGroups.has(node.id) : undefined
+        const toggleReplicaSets = nodeData.replicaSetsExpandable ? onToggleReplicaSets : undefined
+        if (
+          node.data?.kind === topologyNode.kind &&
+          node.data?.name === topologyNode.name &&
+          node.data?.status === topologyNode.status &&
+          node.data?.nodeData === topologyNode.data &&
+          node.data?.onExpand === onExpand &&
+          node.data?.onCollapse === onCollapse &&
+          node.data?.isExpanded === isExpanded &&
+          node.data?.onToggleReplicaSets === toggleReplicaSets
+        ) return node
+        changed = true
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            kind: topologyNode.kind,
+            name: topologyNode.name,
+            status: topologyNode.status,
+            nodeData: topologyNode.data,
+            onExpand,
+            onCollapse,
+            isExpanded,
+            onToggleReplicaSets: toggleReplicaSets,
+          },
+        }
+      })
+      return changed ? updated : nds
+    })
+  }, [workingNodes, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, onToggleReplicaSets, setNodes])
+
   if (!topology) {
     return <PaneLoader label="Loading topology…" className="absolute inset-0" />
   }
@@ -897,10 +955,12 @@ export function TopologyGraph({
       {/* Warning banner for partial topology data */}
       {topology?.warnings && topology.warnings.length > 0 && (() => {
         const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
-        const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted'))
-        const isAllRbac = otherWarnings.length === 0
+        const viewWarnings = topology.warnings.filter(w => w.startsWith('Topology view:'))
+        const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted') && !w.startsWith('Topology view:'))
+        const isAllRbac = otherWarnings.length === 0 && viewWarnings.length === 0
+        const isViewLimited = otherWarnings.length === 0 && rbacWarnings.length === 0 && viewWarnings.length > 0
         return (
-          <div className={`absolute top-2 left-2 right-2 z-10 ${isAllRbac ? 'bg-amber-500/10 border-amber-500/20' : 'bg-amber-500/10 border-amber-500/30'} border rounded-lg p-2 backdrop-blur-sm`}>
+          <div className={`absolute top-2 z-10 ${isViewLimited ? 'left-2 max-w-xl' : 'left-2 right-2'} ${isAllRbac ? 'bg-amber-500/10 border-amber-500/20' : 'bg-amber-500/10 border-amber-500/30'} border rounded-lg p-2 backdrop-blur-sm`}>
             <div className="flex items-start gap-2">
               {isAllRbac ? (
                 <Shield className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
@@ -909,12 +969,14 @@ export function TopologyGraph({
               )}
               <div className="text-sm">
                 <span className="font-medium text-amber-400">
-                  {isAllRbac ? 'Limited Access:' : 'Warning:'}
+                  {isAllRbac ? 'Limited Access:' : isViewLimited ? 'View limited:' : 'Warning:'}
                 </span>
                 <span className="text-theme-text-secondary ml-1">
                   {isAllRbac
                     ? `${pluralize(rbacWarnings.length, 'resource type')} not accessible due to RBAC restrictions.`
-                    : 'Some resources failed to load. Data may be incomplete.'}
+                    : isViewLimited
+                      ? 'Large retained run history is summarized to keep the graph readable.'
+                      : 'Some resources failed to load. Data may be incomplete.'}
                 </span>
                 <details className="mt-1">
                   <summary className="text-xs text-amber-400/80 hover:text-amber-400">
@@ -927,7 +989,13 @@ export function TopologyGraph({
                     {rbacWarnings.map((w, i) => (
                       <li key={`rbac-${i}`} className="font-mono">{w}</li>
                     ))}
-                    {otherWarnings.length > 0 && rbacWarnings.length > 0 && (
+                    {viewWarnings.length > 0 && (rbacWarnings.length > 0 || otherWarnings.length > 0) && (
+                      <li className="text-amber-400/60 font-medium mt-1">View limits:</li>
+                    )}
+                    {viewWarnings.map((w, i) => (
+                      <li key={`view-${i}`} className="font-mono">{w}</li>
+                    ))}
+                    {otherWarnings.length > 0 && (rbacWarnings.length > 0 || viewWarnings.length > 0) && (
                       <li className="text-amber-400/60 font-medium mt-1">Other warnings:</li>
                     )}
                     {otherWarnings.map((w, i) => (
@@ -974,7 +1042,7 @@ export function TopologyGraph({
         onNodeMouseLeave={handleNodeMouseLeave}
         nodeTypes={nodeTypes}
         fitView
-        fitViewOptions={{ padding: 0.2 }}
+        fitViewOptions={{ padding: fitViewPadding }}
         minZoom={0.1}
         maxZoom={2}
         proOptions={{ hideAttribution: true }}
@@ -1021,6 +1089,7 @@ export function TopologyGraph({
               paused={paused}
               onTogglePause={onTogglePause}
               onExportingChange={setIsExporting}
+              fitViewPadding={fitViewPadding}
             />
           </div>
           {!isTrafficView && (
@@ -1057,6 +1126,7 @@ export function TopologyGraph({
           focusNodeId={focusNodeId}
           focusNonce={focusNonce}
           onRequestExpandForNode={expandGroupForNode}
+          fitViewPadding={fitViewPadding}
         />
       </ReactFlow>
     </ReactFlowProvider>
@@ -1240,9 +1310,8 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
         >
           <div className="text-sm font-medium text-theme-text-primary mb-3">Export topology</div>
           <label className="block text-xs text-theme-text-secondary mb-1">Filename</label>
-          <input
+          <Input
             ref={inputRef}
-            type="text"
             value={filename}
             onChange={(e) => setFilename(e.target.value)}
             className="w-full px-2 py-1.5 text-sm bg-theme-base border border-theme-border rounded text-theme-text-primary outline-none focus:border-blue-500 mb-3"
@@ -1340,11 +1409,13 @@ function CustomControlButtons({
   paused,
   onTogglePause,
   onExportingChange,
+  fitViewPadding,
 }: {
   showExportButton: boolean
   paused: boolean
   onTogglePause?: () => void
   onExportingChange: (v: boolean) => void
+  fitViewPadding: FitViewOptions['padding']
 }) {
   const { zoomIn, zoomOut, fitView } = useReactFlow()
   const TIP = 100
@@ -1361,7 +1432,7 @@ function CustomControlButtons({
         </button>
       </Tooltip>
       <Tooltip content="Fit view" delay={TIP} position="right">
-        <button className="react-flow__controls-button" onClick={() => fitView({ padding: 0.15, duration: 400 })}>
+        <button className="react-flow__controls-button" onClick={() => fitView({ padding: fitViewPadding, duration: 400 })}>
           <Maximize className="w-3 h-3" />
         </button>
       </Tooltip>
@@ -1394,6 +1465,7 @@ function ViewportController({
   focusNodeId,
   focusNonce = 0,
   onRequestExpandForNode,
+  fitViewPadding,
 }: {
   viewMode: string
   layoutRetryCount: number
@@ -1403,6 +1475,7 @@ function ViewportController({
   focusNodeId?: string
   focusNonce?: number
   onRequestExpandForNode?: (nodeId: string) => void
+  fitViewPadding: FitViewOptions['padding']
 }) {
   const { fitView, zoomIn, zoomOut, setViewport, getViewport, getInternalNode, setCenter } = useReactFlow()
   const nodes = useNodes() // Reactive hook to watch node changes
@@ -1431,7 +1504,7 @@ function ViewportController({
       description: 'Fit graph to screen',
       category: 'Topology',
       scope: 'topology',
-      handler: () => fitView({ padding: 0.15, duration: VIEWPORT_ANIMATION_DURATION }),
+      handler: () => fitView({ padding: fitViewPadding, duration: VIEWPORT_ANIMATION_DURATION }),
     },
     {
       id: 'topology-zoom-in',
@@ -1508,14 +1581,14 @@ function ViewportController({
     if (nodesJustPopulated || viewModeChanged || retryRequested || fitViewRequested) {
       const timeoutId = setTimeout(() => {
         fitView({
-          padding: 0.15,
+          padding: fitViewPadding,
           duration: nodesJustPopulated ? 0 : VIEWPORT_ANIMATION_DURATION,
         })
       }, 10)
 
       return () => clearTimeout(timeoutId)
     }
-  }, [viewMode, layoutRetryCount, fitViewCounter, nodes.length, fitView])
+  }, [viewMode, layoutRetryCount, fitViewCounter, nodes.length, fitView, fitViewPadding])
 
   // Pan/zoom to a single searched node. Gated on focusNonce so the same
   // node can be re-focused, and so this never fires on background updates.
@@ -1563,10 +1636,10 @@ function ViewportController({
     if (!fitAllAfterLayoutRef?.current) return
     const id = setTimeout(() => {
       fitAllAfterLayoutRef.current = false
-      fitView({ padding: 0.15, duration: VIEWPORT_ANIMATION_DURATION })
+      fitView({ padding: fitViewPadding, duration: VIEWPORT_ANIMATION_DURATION })
     }, 250)
     return () => clearTimeout(id)
-  }, [nodes, fitView, fitAllAfterLayoutRef])
+  }, [nodes, fitView, fitAllAfterLayoutRef, fitViewPadding])
 
   return null
 }

package/src/components/topology/TopologySearch.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
 import { Search, X, ChevronRight } from 'lucide-react'
+import { Input } from '../ui/Input'
 import { getTopologyIcon } from '../../utils/resource-icons'
 import { clsx } from 'clsx'
 import type { TopologyNode } from '../../types'
@@ -225,9 +226,8 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
             {/* Search input */}
             <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
               <Search className="w-5 h-5 text-theme-text-secondary" />
-              <input
+              <Input
                 ref={inputRef}
-                type="text"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={handleInputKeyDown}

package/src/components/topology/layout.ts

@@ -827,8 +827,16 @@ function computeWorkloadCards(
       subtitle = (d.type as string) || 'ClusterIP'
     } else if (primary.kind === 'CronJob') {
       subtitle = (d.schedule as string) || ''
+    } else if (primary.kind === 'CronWorkflow') {
+      subtitle = (d.schedule as string) || ''
     } else if (primary.kind === 'Job') {
       subtitle = (d.phase as string) || ''
+    } else if (primary.kind === 'Workflow') {
+      subtitle = (d.progress as string) || (d.phase as string) || ''
+    } else if (primary.kind === 'WorkflowTemplate' || primary.kind === 'ClusterWorkflowTemplate') {
+      const entrypoint = d.entrypoint as string
+      const templateCount = d.templateCount as number
+      subtitle = entrypoint || (templateCount ? `${templateCount} templates` : '')
     } else if (primary.kind === 'Application') {
       const sync = d.syncStatus as string
       const health = d.healthStatus as string
@@ -855,10 +863,10 @@ function computeWorkloadCards(
 // Shared kind priority map — used by both pickGroupName and computeWorkloadCards
 const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
-  'CronJob': 4, 'Job': 5, 'Service': 6, 'Gateway': 7,
+  'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
   'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'Ingress': 7,
   'ReplicaSet': 8, 'Pod': 9, 'PodGroup': 9,
-  'ConfigMap': 10, 'Secret': 10, 'PersistentVolumeClaim': 10, 'HorizontalPodAutoscaler': 10,
+  'ConfigMap': 10, 'Secret': 10, 'ServiceAccount': 10, 'SealedSecret': 10, 'ServiceMonitor': 10, 'PodMonitor': 10, 'WorkflowTemplate': 10, 'ClusterWorkflowTemplate': 10, 'PersistentVolumeClaim': 10, 'HorizontalPodAutoscaler': 10,
   'KnativeService': 1, 'KnativeConfiguration': 3, 'KnativeRevision': 4, 'KnativeRoute': 2,
   'Broker': 2, 'Channel': 2, 'Trigger': 3, 'PingSource': 3, 'ApiServerSource': 3,
   'ContainerSource': 3, 'SinkBinding': 3,

package/src/components/topology/topology.css

@@ -53,98 +53,6 @@
   background-color: rgb(100 116 139); /* slate-500 */
 }
 
-/* CSS-based topology icons (replaces Lucide SVGs - saves ~4000 DOM elements) */
-.topology-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  font-size: 9px;
-  font-weight: 700;
-  color: white;
-  flex-shrink: 0;
-  background: #6b7280; /* gray-500 - default for unknown CRD kinds */
-}
-.topology-icon-internet { background: #3b82f6; border-radius: 50%; }
-.topology-icon-ingress { background: #8b5cf6; }
-.topology-icon-gateway { background: #8b5cf6; }
-.topology-icon-httproute { background: #a78bfa; }
-.topology-icon-grpcroute { background: #a78bfa; }
-.topology-icon-tcproute { background: #a78bfa; }
-.topology-icon-tlsroute { background: #a78bfa; }
-.topology-icon-service { background: #3b82f6; border-radius: 50%; }
-.topology-icon-deployment { background: #10b981; }
-.topology-icon-rollout { background: #10b981; }
-.topology-icon-daemonset { background: #14b8a6; }
-.topology-icon-statefulset { background: #06b6d4; }
-.topology-icon-replicaset { background: #22c55e; }
-.topology-icon-pod { background: #84cc16; border-radius: 50%; }
-.topology-icon-podgroup { background: #84cc16; border-radius: 50%; }
-.topology-icon-configmap { background: #f59e0b; }
-.topology-icon-secret { background: #ef4444; }
-.topology-icon-horizontalpodautoscaler { background: #ec4899; }
-.topology-icon-job { background: #a855f7; }
-.topology-icon-cronjob { background: #a855f7; }
-.topology-icon-persistentvolumeclaim { background: #06b6d4; }
-.topology-icon-namespace { background: #6366f1; }
-.topology-icon-application { background: #f97316; }
-.topology-icon-kustomization { background: #0ea5e9; }
-.topology-icon-helmrelease { background: #0ea5e9; }
-.topology-icon-gitrepository { background: #14b8a6; }
-.topology-icon-knativeservice { background: #d946ef; }
-.topology-icon-knativeconfiguration { background: #c026d3; }
-.topology-icon-knativerevision { background: #a855f7; }
-.topology-icon-knativeroute { background: #d946ef; }
-.topology-icon-broker { background: #c026d3; }
-.topology-icon-trigger { background: #a855f7; }
-.topology-icon-pingsource { background: #d946ef; }
-.topology-icon-apiserversource { background: #c026d3; }
-.topology-icon-containersource { background: #a855f7; }
-.topology-icon-sinkbinding { background: #d946ef; }
-.topology-icon-channel { background: #c026d3; }
-.topology-icon-inmemorychannel { background: #c026d3; }
-.topology-icon-subscription { background: #a855f7; }
-.topology-icon-sequence { background: #d946ef; }
-.topology-icon-parallel { background: #d946ef; }
-.topology-icon-domainmapping { background: #d946ef; }
-.topology-icon-serverlessservice { background: #a855f7; }
-.topology-icon-node { background: #6366f1; }
-.topology-icon-nodepool { background: #6366f1; }
-.topology-icon-nodeclaim { background: #6366f1; }
-.topology-icon-nodeclass { background: #6366f1; }
-.topology-icon-httpproxy { background: #7c3aed; }
-.topology-icon-capicluster { background: #4338ca; }
-.topology-icon-machinedeployment { background: #5b4fcf; }
-.topology-icon-machineset { background: #6d5fd6; }
-.topology-icon-machine { background: #7c6fdd; }
-.topology-icon-machinepool { background: #5b4fcf; }
-.topology-icon-kubeadmcontrolplane { background: #4338ca; }
-.topology-icon-clusterclass { background: #3b2fba; }
-.topology-icon-machinehealthcheck { background: #8b7fe4; }
-/* AWS CAPI infrastructure provider */
-.topology-icon-awsmanagedcontrolplane { background: #d97706; }
-.topology-icon-awsmanagedmachinepool { background: #d97706; }
-.topology-icon-awsmachine { background: #f59e0b; }
-.topology-icon-awsmachinetemplate { background: #f59e0b; }
-.topology-icon-awsmanagedcluster { background: #d97706; }
-.topology-icon-eksconfig { background: #f59e0b; }
-.topology-icon-eksconfigtemplate { background: #f59e0b; }
-
-/* GCP CAPI infrastructure provider */
-.topology-icon-gcpmanagedcontrolplane { background: #0d9488; }
-.topology-icon-gcpmanagedmachinepool { background: #0d9488; }
-.topology-icon-gcpmachine { background: #14b8a6; }
-.topology-icon-gcpmachinetemplate { background: #14b8a6; }
-.topology-icon-gcpmanagedcluster { background: #0d9488; }
-/* Azure CAPI infrastructure provider */
-.topology-icon-azuremanagedcontrolplane { background: #2563eb; }
-.topology-icon-azuremanagedmachinepool { background: #2563eb; }
-.topology-icon-azuremachine { background: #3b82f6; }
-.topology-icon-azuremachinetemplate { background: #3b82f6; }
-.topology-icon-azuremanagedcluster { background: #2563eb; }
-
 /* Background dots - uses CSS variable for theme awareness */
 .react-flow__background pattern circle {
   fill: var(--topology-bg-dots) !important;

package/src/components/ui/Badge.tsx

@@ -91,6 +91,11 @@ const KIND: Record<string, string> = {
   // Jobs
   Job:           'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   CronJob:       'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  Workflow:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  CronWorkflow:  'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  WorkflowTemplate: 'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  ClusterWorkflowTemplate: 'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  ScaledJob: 'bg-pink-100 text-pink-700 border-pink-300 dark:bg-pink-950/50 dark:text-pink-400 dark:border-pink-700/40',
 
   // Scaling & Storage
   HorizontalPodAutoscaler: 'bg-pink-100 text-pink-800 border-pink-300 dark:bg-pink-950/50 dark:text-pink-300 dark:border-pink-700/40',

package/src/components/ui/BoardSkeleton.tsx

@@ -0,0 +1,47 @@
+// Shape-stable loading stand-ins for the list-board chassis (GitOps,
+// Applications). Both mirror the loaded anatomy so data resolves in place:
+// rows appear inside the table frame, facets inside the rail — no half-height
+// rail dangling next to a centered spinner, no layout jump when the response
+// lands.
+
+export function BoardTableSkeleton({ rows = 10 }: { rows?: number }) {
+  return (
+    <div aria-live="polite" aria-label="Loading…" className="divide-y divide-theme-border-light">
+      {Array.from({ length: rows }, (_, i) => (
+        <div key={i} className="flex items-center gap-6 px-4 py-3" style={{ opacity: 1 - i * 0.09 }}>
+          <div className="min-w-0 flex-[2] space-y-2">
+            <div className="h-4 w-2/3 animate-pulse rounded bg-theme-hover" />
+            <div className="h-3 w-1/2 animate-pulse rounded bg-theme-hover" />
+          </div>
+          <div className="hidden h-4 flex-1 animate-pulse rounded bg-theme-hover md:block" />
+          <div className="h-5 w-20 animate-pulse rounded-full bg-theme-hover" />
+          <div className="h-5 w-20 animate-pulse rounded-full bg-theme-hover" />
+          <div className="hidden h-4 flex-[1.5] animate-pulse rounded bg-theme-hover lg:block" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// Section stubs sized like the loaded rail so it keeps its height while
+// counts are unknown — real facet buttons with "0" counts would be false
+// zeros. `sections` = [title, rowCount] pairs approximating the loaded rail.
+export function BoardRailSkeleton({ sections }: { sections: Array<[string, number]> }) {
+  return (
+    <div aria-hidden>
+      {sections.map(([title, rows]) => (
+        <div key={title} className="border-b border-theme-border-light px-3 py-3">
+          <div className="mb-2 h-3 w-24 animate-pulse rounded bg-theme-hover" />
+          <div className="space-y-1.5">
+            {Array.from({ length: rows }, (_, i) => (
+              <div key={i} className="flex items-center justify-between px-1.5 py-1">
+                <div className="h-3.5 animate-pulse rounded bg-theme-hover" style={{ width: `${52 - i * 6}%` }} />
+                <div className="h-3.5 w-6 animate-pulse rounded bg-theme-hover" />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/ui/CardSection.tsx

@@ -0,0 +1,117 @@
+import { Fragment, type ComponentType, type ReactNode } from 'react'
+
+// =============================================================================
+// CARD SECTION PRIMITIVES — the shared "Sectioned + icons" vocabulary used by
+// the Issue card (IssuesView) and the Check card (ChecksView) so both read as
+// one product: ONE eyebrow style, an icon gutter per section, and a single body
+// contrast floor (body text is never lighter than the secondary token, so it
+// stays legible on the card surface). Severity is the only status color; section
+// icons carry quiet role hues (what's-wrong = amber, fix = emerald, neutral =
+// grey).
+// =============================================================================
+
+// Section role → eyebrow + icon hue. Body text always uses the secondary token
+// (the contrast floor), regardless of tone.
+export type CardSectionTone = 'neutral' | 'warn' | 'fix'
+
+const SECTION_TONE_CLASS: Record<CardSectionTone, string> = {
+  // Eyebrow grey — the default, for neutral sections (Why it matters, Raw error,
+  // Affected resources, Context, Subject).
+  neutral: 'text-theme-text-tertiary',
+  // What's wrong — amber, the diagnosis beat.
+  warn: 'text-amber-700 dark:text-amber-300',
+  // Next step / How to fix — emerald, the action beat.
+  fix: 'text-emerald-700 dark:text-emerald-400',
+}
+
+// The single eyebrow style: 11px / 600 / uppercase, with an icon in a fixed
+// gutter so every section's body aligns under the same left edge.
+export function CardSection({
+  icon: Icon,
+  label,
+  tone = 'neutral',
+  labelExtra,
+  children,
+}: {
+  icon: ComponentType<{ className?: string }>
+  label: string
+  tone?: CardSectionTone
+  /** Optional trailing eyebrow text (e.g. "· retried 5×"), rendered muted. */
+  labelExtra?: ReactNode
+  children: ReactNode
+}) {
+  const toneClass = SECTION_TONE_CLASS[tone]
+  return (
+    <section className="flex items-start gap-2.5">
+      {/* Icon sits in a fixed gutter, anchored to the eyebrow line (top-aligned
+          with a nudge to its optical center) — sections like Affected resources
+          can be dozens of rows tall, and a section-centered glyph would float
+          detached mid-list. */}
+      <Icon className={`mt-[-1px] h-[18px] w-[18px] shrink-0 ${toneClass}`} aria-hidden />
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <h4 className={`text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}>
+          {label}
+          {labelExtra ? <span className="font-medium normal-case tracking-normal text-theme-text-tertiary"> {labelExtra}</span> : null}
+        </h4>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+// Body paragraph at the contrast floor — 14px, secondary token, never lighter.
+export function CardBody({ children, className }: { children: ReactNode; className?: string }) {
+  return <p className={`text-sm leading-relaxed text-theme-text-secondary ${className ?? ''}`}>{children}</p>
+}
+
+// The dark terminal block for raw error output. Intentionally dark in BOTH
+// themes (it's a console surface, not chrome), so it draws from the dedicated
+// --terminal-* tokens rather than the theme surface tokens.
+export function TerminalBlock({ label, children }: { label?: ReactNode; children: ReactNode }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-[var(--terminal-border)] bg-[var(--terminal-bg)]">
+      {label ? (
+        <div className="border-b border-[var(--terminal-divider)] px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-[var(--terminal-label)]">
+          {label}
+        </div>
+      ) : null}
+      <pre className="overflow-x-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs leading-relaxed text-[var(--terminal-text)]">
+        {children}
+      </pre>
+    </div>
+  )
+}
+
+// The neutral category chip — drops the per-category hue so severity is the only
+// status color. Self-contained (don't pair with badge-sm): 11px / 600, 2px×8px
+// padding, no border, neutral grey.
+export const NEUTRAL_CHIP_CLASS =
+  'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-secondary'
+
+// Mono kind chip — the grey tag for an all-caps resource Kind (the Issue row
+// header + the Subject footer row). Mono and tighter than NEUTRAL_CHIP_CLASS,
+// which carries the label/category chips.
+export const KIND_CHIP_CLASS =
+  'shrink-0 rounded bg-theme-elevated px-1.5 py-px font-mono text-[11px] uppercase text-theme-text-secondary'
+
+// Render a prose string, turning markdown `inline-code` spans into mono chips
+// via the shared .inline-code class. Plain-text passthrough when the string
+// carries no backticks, so it's a no-op for today's plain catalog copy and
+// lights up automatically once backtick markup is added.
+export function renderProse(text: string | undefined | null): ReactNode {
+  if (!text) return null
+  if (!text.includes('`')) return text
+  const parts = text.split(/(`[^`]+`)/g)
+  return parts.map((part, i) => {
+    // length > 2 excludes a bare "``" (which the split leaves in a plain part)
+    // so it renders as literal text, not an empty chip.
+    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+      return (
+        <code key={i} className="inline-code">
+          {part.slice(1, -1)}
+        </code>
+      )
+    }
+    return <Fragment key={i}>{part}</Fragment>
+  })
+}

package/src/components/ui/CodeViewer.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Copy, Check, ChevronUp, ChevronDown, X, Search } from 'lucide-react'
 import { codeToHtml } from 'shiki'
+import { Input } from './Input'
 
 interface CodeViewerProps {
   code: string
@@ -343,9 +344,8 @@ export function CodeViewer({
       {searchOpen && (
         <div className="absolute top-2 right-2 z-20 flex items-center gap-1 px-2 py-1.5 bg-theme-surface border border-theme-border rounded-lg shadow-lg backdrop-blur-sm">
           <Search className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
-          <input
+          <Input
             ref={searchInputRef}
-            type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             onKeyDown={handleSearchKeyDown}