@skyhook-io/k8s-ui 1.14.7 → 1.14.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.7",
+  "version": "1.14.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/tree/GitOpsTreeGraph.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSubtitle } from './GitOpsTreeGraph'
+import type { GitOpsTreeNode } from '../../../types'
+
+function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
+  return {
+    id: 'node-1',
+    ref: { kind: 'Service', name: 'podinfo', namespace: 'demo-flux' },
+    role: 'declared',
+    tool: 'fluxcd',
+    ...extras,
+  }
+}
+
+describe('getSubtitle', () => {
+  it('shows what a healthy resource exposes, not that it is healthy', () => {
+    // The status dot and the left border stripe already paint a healthy node
+    // green, so the word adds nothing and the ports are the only thing here the
+    // rest of the card can't say.
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Service', value: 'ClusterIP :9898 +1 more' }],
+    }))).toBe('Synced • ClusterIP :9898 +1 more')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Pod', name: 'podinfo-6b4f8c9d7-xk2mv', namespace: 'demo-flux' },
+      role: 'generated',
+      health: 'Healthy',
+      info: [{ name: 'Phase', value: 'Running' }],
+    }))).toBe('Running')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Ingress', name: 'podinfo', namespace: 'demo-flux' },
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Host', value: 'podinfo.example.com' }],
+    }))).toBe('Synced • podinfo.example.com')
+  })
+
+  it('keeps every health value the stripe colour cannot identify on its own', () => {
+    // Progressing and Suspended are both yellow, Degraded and Missing both red.
+    // Drop the word and the two become indistinguishable.
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Progressing',
+      info: [{ name: 'Service', value: 'LoadBalancer :80' }],
+    }))).toBe('Synced • Progressing • LoadBalancer :80')
+
+    expect(getSubtitle(node({
+      ref: { kind: 'Deployment', name: 'podinfo', namespace: 'demo-flux' },
+      sync: 'OutOfSync',
+      health: 'Degraded',
+      info: [{ name: 'Ready', value: '2/3' }],
+    }))).toBe('OutOfSync • Degraded • 2/3')
+
+    expect(getSubtitle(node({
+      health: 'Unknown',
+      info: [{ name: 'Service', value: 'ClusterIP :80' }],
+    }))).toBe('Unknown • ClusterIP :80')
+  })
+
+  it('still reads as Healthy when there is nothing to say instead', () => {
+    // Kinds infoFromTopology doesn't cover, and remote Argo destinations, reach
+    // the tree with no info line at all. Those must not lose their status line.
+    expect(getSubtitle(node({ sync: 'Synced', health: 'Healthy' }))).toBe('Synced • Healthy')
+    expect(getSubtitle(node({ health: 'Healthy' }))).toBe('Healthy')
+    expect(getSubtitle(node({ sync: 'OutOfSync', health: 'Missing' }))).toBe('OutOfSync • Missing')
+  })
+
+  it('lets lifecycle and grouping own the line outright', () => {
+    expect(getSubtitle(node({
+      role: 'group',
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Phase', value: 'Running' }],
+    }))).toBe('Click to expand')
+
+    expect(getSubtitle(node({
+      sync: 'Synced',
+      health: 'Healthy',
+      info: [{ name: 'Service', value: 'ClusterIP :9898 +1 more' }],
+      data: { deletionTimestamp: '2026-09-11T13:09:43Z' },
+    }))).toBe('Pending deletion')
+  })
+
+  it('falls back to the namespace only when the node states nothing else', () => {
+    expect(getSubtitle(node())).toBe('demo-flux')
+    expect(getSubtitle(node({ ref: { kind: 'ClusterRole', name: 'podinfo', namespace: '' } }))).toBe('')
+  })
+})

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -25,6 +25,7 @@ import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
 import { radarHealthNote } from '../health-provenance'
+import { servicePortsTooltip, type ServicePortEntry } from '../../topology/K8sResourceNode'
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
@@ -592,6 +593,15 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   // (ReplicaSets, Pods) are always Radar's read; marking each would be
   // noise.
   const radarNote = node.role === 'declared' ? radarHealthNote(node) : ''
+  // A Service's subtitle names its first port and counts the rest, so without a
+  // hover the ones behind "+1 more" can't be reached from the graph at all. Same
+  // affordance the topology graph's Service node carries, same renderer. Stood
+  // down when the card already explains an unhealthy verdict: that reason is
+  // what the hover should say, and only one tooltip is ever visible anyway.
+  const portsTooltip = kind === 'Service' && !cause
+    ? servicePortsTooltip((node.data?.ports as ServicePortEntry[] | undefined) ?? [])
+    : null
+  const subtitle = getSubtitle(node)
 
   const card = (
       <div
@@ -654,7 +664,13 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
               own page". The subtitle text alone wasn't enough — users were
               treating the count as an immutable fact rather than a button. */}
           <div className="mt-0.5 flex items-center gap-1 text-xs text-theme-text-secondary">
-            <span className="truncate">{getSubtitle(node)}</span>
+            {portsTooltip ? (
+              <Tooltip content={portsTooltip} position="bottom" wrapperClassName="min-w-0">
+                <span className="cursor-help truncate">{subtitle}</span>
+              </Tooltip>
+            ) : (
+              <span className="truncate">{subtitle}</span>
+            )}
             {(node.role === 'group' || gitopsTool) && <ChevronRight className="ml-auto h-3 w-3 shrink-0 text-theme-text-tertiary" />}
           </div>
           {chips.length > 0 && (
@@ -755,7 +771,21 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   return chips
 }
 
-function getSubtitle(node: GitOpsTreeNode): string {
+// The subtitle is the node's one line of prose, and sync, health and the
+// backend's info line all want it. It can't be won on precedence: the backend
+// derives a health for every node it can build an info line for, so a rule that
+// only reaches info when health is absent never reaches it at all, and a
+// Service's ports, a Pod's phase and an Ingress's host stay invisible.
+//
+// So all three share the line, and "Healthy" is the part that yields when the
+// space is contested. It is the one health value the node already states without
+// words — healthToTopology maps it onto the green status dot and the green left
+// stripe, one value to one colour. Progressing and Suspended are both yellow and
+// Degraded and Missing are both red, so for those the word is the only thing
+// that tells them apart and it keeps its place. "Healthy" gives up the line only
+// when there is a concrete info line to spend it on, so a node with nothing to
+// say instead still reads as Healthy.
+export function getSubtitle(node: GitOpsTreeNode): string {
   if (node.role === 'group') {
     // Action-oriented copy invites the click; "collapsed" alone reads as
     // a state description, not an affordance.
@@ -764,10 +794,10 @@ function getSubtitle(node: GitOpsTreeNode): string {
   if (isNodeTerminating(node)) {
     return 'Pending deletion'
   }
-  if (node.sync || node.health) {
-    return [node.sync, node.health].filter(Boolean).join(' • ')
-  }
-  if (node.info?.[0]?.value) return node.info[0].value
+  const info = node.info?.[0]?.value
+  const health = node.health === 'Healthy' && info ? undefined : node.health
+  const parts = [node.sync, health, info].filter(Boolean)
+  if (parts.length > 0) return parts.join(' • ')
   return node.ref.namespace || ''
 }
 

package/src/components/resources/renderers/RolloutRenderer.tsx

@@ -257,59 +257,9 @@ export function rolloutConditionTone(cond: { type?: string; status?: string }):
   }
 }
 
-/** Every CanaryStep variant Argo defines; raw JSON is unreadable in a step list. */
-export function canaryStepLabel(step: any): string {
-  if (!step || typeof step !== 'object') return 'Unknown step'
-
-  if (step.setWeight !== undefined) return `Set weight: ${step.setWeight}%`
-
-  if (step.pause !== undefined) {
-    return step.pause?.duration ? `Pause: ${step.pause.duration}` : 'Pause: until promoted'
-  }
-
-  if (step.analysis) {
-    const templates = (step.analysis.templates || [])
-      .map((t: any) => t.templateName || t.clusterTemplateName)
-      .filter(Boolean)
-    return templates.length > 0 ? `Analysis: ${templates.join(', ')}` : 'Analysis'
-  }
-
-  if (step.experiment) {
-    const templates = (step.experiment.templates || []).map((t: any) => t.name).filter(Boolean)
-    const duration = step.experiment.duration ? ` for ${step.experiment.duration}` : ''
-    return templates.length > 0
-      ? `Experiment: ${templates.join(', ')}${duration}`
-      : `Experiment${duration}`
-  }
-
-  if (step.setCanaryScale) {
-    const { weight, replicas, matchTrafficWeight } = step.setCanaryScale
-    if (matchTrafficWeight) return 'Set canary scale: match traffic weight'
-    if (replicas !== undefined) return `Set canary scale: ${replicas} replicas`
-    if (weight !== undefined) return `Set canary scale: ${weight}%`
-    return 'Set canary scale'
-  }
-
-  if (step.setHeaderRoute) {
-    const { name, match } = step.setHeaderRoute
-    // An empty match list is how a header route is torn down again.
-    if (!match || match.length === 0) return `Remove header route${name ? `: ${name}` : ''}`
-    const headers = match.map((m: any) => m.headerName).filter(Boolean)
-    return `Header route${name ? ` ${name}` : ''}${headers.length ? `: ${headers.join(', ')}` : ''}`
-  }
-
-  if (step.setMirrorRoute) {
-    const { name, match, percentage } = step.setMirrorRoute
-    if (!match || match.length === 0) return `Remove mirror route${name ? `: ${name}` : ''}`
-    const pct = percentage !== undefined ? ` (${percentage}%)` : ''
-    return `Mirror route${name ? ` ${name}` : ''}${pct}`
-  }
-
-  if (step.plugin) return `Plugin: ${step.plugin.name || 'unnamed'}`
-
-  const key = Object.keys(step)[0]
-  return key ? `Unrecognized step: ${key}` : 'Unknown step'
-}
+// canaryStepLabel lives in utils/workload-rollout.ts (not here) so that
+// module doesn't have to import a renderer component just for step text.
+export { canaryStepLabel } from '../../../utils/workload-rollout'
 
 /** AnalysisTemplate/ClusterAnalysisTemplate references on either a canary
  *  step's analysis.templates[] array, or a single Experiment spec.analyses[]

package/src/components/topology/K8sResourceNode.tsx

@@ -16,6 +16,7 @@ import { ownershipOf } from '../../utils/topology-neighborhood'
 import { midTruncate } from '../../utils/format'
 import { getTopologyIcon } from '../../utils/resource-icons'
 import { Tooltip } from '../ui/Tooltip'
+import { Badge } from '../ui/Badge'
 import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 import { SEVERITY_TEXT_CLASS } from '../checks/severity'
 import argoCdLogo from '../../assets/gitops/argocd.png'
@@ -173,8 +174,10 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
 // a multi-port Service's other ports are visible without opening the detail
 // page. Formatting (hide targetPort when it matches port) mirrors
 // ServicePortCards in ServiceRenderer.tsx so a Service's ports read the same
-// whether glanced at in the graph or opened in the full resource view.
-function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode | null {
+// whether glanced at in the graph or opened in the full resource view. Exported
+// because the GitOps resource tree's Service node summarises ports the same way
+// and needs the same hover to reach the ones the summary drops.
+export function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode | null {
   if (ports.length < 2) return null;
   return (
     <div className="max-w-xs space-y-0.5">
@@ -566,6 +569,11 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const policyStatus = nodeData.policyStatus as string | undefined
   const deploymentMembership = nodeData.deploymentMembership as 'runtime-only' | 'source-only' | undefined
   const deploymentSourceLabel = nodeData.deploymentSourceLabel as string | undefined
+  // Argo Rollouts canary/stable (or blue-green active/preview) traffic role,
+  // set server-side on Pod/ReplicaSet/Service nodes owned by or matched to a
+  // Rollout. canary/preview are the "being tested" side, stable/active the
+  // "serving" side — tone only tells the two apart, it carries no other meaning.
+  const trafficRole = nodeData.trafficRole as 'canary' | 'stable' | 'active' | 'preview' | undefined
 
   const Icon = getTopologyIcon(kind);
 
@@ -656,6 +664,15 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   </span>
                 </Tooltip>
               )}
+              {trafficRole && (
+                <Badge
+                  tone={trafficRole === 'canary' || trafficRole === 'preview' ? 'accent1' : 'accent2'}
+                  size="sm"
+                  className="!text-[9px] !px-1 !py-0.5 normal-case tracking-normal"
+                >
+                  {trafficRole[0].toUpperCase() + trafficRole.slice(1)}
+                </Badge>
+              )}
               {onToggleReplicaSets && (
                 <Tooltip content={nodeData.replicaSetsCollapsed ? 'Show ReplicaSet' : 'Hide stable ReplicaSet'} position="right">
                   <button

package/src/components/topology/TopologyGraph.tsx

@@ -69,21 +69,32 @@ const EDGE_LEGEND: { label: string; color: string }[] = [
 // Memoized edge style cache to avoid creating new objects on every render
 const edgeStyleCache = new Map<string, React.CSSProperties>()
 
-function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boolean, animated: boolean, partial: boolean): React.CSSProperties {
-  const cacheKey = `${type}-${isTrafficView}-${isTrafficEdge}-${animated}-${partial}`
+function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boolean, animated: boolean, partial: boolean, isRolloutTrafficEdge: boolean): React.CSSProperties {
+  const cacheKey = `${type}-${isTrafficView}-${isTrafficEdge}-${animated}-${partial}-${isRolloutTrafficEdge}`
   let style = edgeStyleCache.get(cacheKey)
   if (!style) {
     const edgeColor = getEdgeColor(type, isTrafficView)
+    const dashed = (isTrafficView && isTrafficEdge && animated) || (isRolloutTrafficEdge && animated)
     style = {
       stroke: edgeColor,
       strokeWidth: isTrafficView ? 2 : 1.5,
-      strokeDasharray: partial ? '6 3' : isTrafficView && isTrafficEdge && animated ? '5 5' : undefined,
+      strokeDasharray: partial ? '6 3' : dashed ? '5 5' : undefined,
     }
     edgeStyleCache.set(cacheKey, style)
   }
   return style
 }
 
+// A Rollout canary/stable (weighted) or blue-green active/preview Service
+// edge — set server-side via a fixed label vocabulary (pkg/topology
+// builder.go's "Check Rollouts" block). These carry a live traffic split
+// worth animating even outside the separate Network Flow view, since that
+// view doesn't build Rollout nodes/edges at all — this is the only place
+// they render.
+function isRolloutTrafficEdgeLabel(label: TopologyEdge['label']): boolean {
+  return typeof label === 'string' && (label === 'Active' || label === 'Preview' || label.startsWith('Canary') || label.startsWith('Stable'))
+}
+
 // Reachability outcome → edge color/dash, set by the Reachability view via
 // TopologyEdge.reachOutcome (distinct from policyEffect, a NetworkPolicy concept).
 // Honest + DISTINCT: "blocked" (a CONSEQUENCE - downstream of a real break) is a gray
@@ -126,6 +137,7 @@ function buildEdges(
   nodeCount?: number,
   groupLevels?: Map<string, GroupDisplayLevel>,
   smartDefaultActive = false,
+  nodes?: TopologyNode[],
 ): Edge[] {
   const edges: Edge[] = []
   const seenEdgeIds = new Set<string>() // O(1) duplicate detection
@@ -144,6 +156,21 @@ function buildEdges(
     }
   }
 
+  // nodeId -> trafficRole, so a Rollout->ReplicaSet or ReplicaSet/Rollout->Pod
+  // ownership edge can animate too when it leads to a canary/stable/active/
+  // preview node - the "active DAG" should read as a continuous path from the
+  // Service all the way down to the pods actually serving that role, not stop
+  // at the Rollout.
+  const nodeTrafficRoleById = new Map<string, string>()
+  if (nodes) {
+    for (const n of nodes) {
+      const role = (n.data as Record<string, unknown> | undefined)?.trafficRole
+      if (typeof role === 'string' && role) {
+        nodeTrafficRoleById.set(n.id, role)
+      }
+    }
+  }
+
   for (const edge of topologyEdges) {
     let source = edge.source
     let target = edge.target
@@ -176,8 +203,22 @@ function buildEdges(
     const reach = edge.reachOutcome
     const edgeColor = reach ? (REACH_COLORS[reach] || '#94a3b8') : getEdgeColor(edge.type, isTrafficView)
     const isTrafficEdge = edge.type === 'routes-to' || edge.type === 'exposes'
+    // Exposes: detected via the fixed label vocabulary (Canary/Stable/Active/
+    // Preview) set server-side on Service->Rollout edges. Manages: the SAME
+    // path continued down through Rollout->ReplicaSet and ReplicaSet/Rollout->
+    // Pod ownership edges, detected via the target node's own trafficRole
+    // (also set server-side) rather than a label, since an ownership edge
+    // carries no label today and doesn't need one just for this.
+    const isRolloutTrafficEdge =
+      (edge.type === 'exposes' && isRolloutTrafficEdgeLabel(edge.label)) ||
+      (edge.type === 'manages' && nodeTrafficRoleById.has(edge.target))
     // A reachability edge never animates (a dashed "blocked" must not look like flow).
-    const animated = enableAnimations && isTrafficView && isTrafficEdge && !reach && !edge.partial
+    // Rollout canary/stable/active/preview edges animate regardless of view mode —
+    // they only exist in the resources-view topology, so gating on isTrafficView
+    // (the separate Network Flow view) would mean they never animate at all.
+    const animated = enableAnimations && !reach && !edge.partial && (
+      (isTrafficView && isTrafficEdge) || isRolloutTrafficEdge
+    )
 
     edges.push({
       id: edgeId,
@@ -197,7 +238,7 @@ function buildEdges(
         width: 12,
         height: 12,
       },
-      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated, edge.partial === true),
+      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated, edge.partial === true, isRolloutTrafficEdge),
     })
   }
 
@@ -429,11 +470,25 @@ export function TopologyGraph({
       restarts: number
       containers: number
       status?: HealthStatus
+      // Present only when the group spans more than one owner (e.g. a
+      // Rollout's canary + stable ReplicaSets) — the specific edge
+      // source(s) that actually own this pod, from the backend's own
+      // per-pod owner resolution. See pkg/topology/builder.go's
+      // ownerKeyToSourceIDs.
+      ownerIds?: string[]
+      // The group's own trafficRole (podGroupNode.data.trafficRole) is only
+      // set when every pod agrees — this is each pod's OWN role, so a mixed
+      // canary/stable group still badges correctly once expanded.
+      trafficRole?: string
     }>
 
     // Find edges pointing to this pod group
     const edgesToGroup = topoEdges.filter(e => e.target === podGroupId)
     const sourceIds = edgesToGroup.map(e => e.source)
+    // Homogeneous per build — resources-view feeds `manages` ownership
+    // edges, traffic-view feeds `routes-to` Service edges — so any surviving
+    // edge's type applies to the whole group.
+    const edgeType = edgesToGroup[0]?.type ?? 'routes-to'
 
     // Remove the PodGroup node and its edges
     const newNodes = topoNodes.filter(n => n.id !== podGroupId)
@@ -457,17 +512,33 @@ export function TopologyGraph({
           phase: pod.phase,
           restarts: pod.restarts,
           containers: pod.containers,
+          trafficRole: pod.trafficRole,
           expandedFromGroup: podGroupId, // Track which group this came from
         },
       })
 
-      // Add edges from all sources to this pod
-      for (const sourceId of sourceIds) {
+      // A group with a single owner has every source apply to every pod —
+      // the common case. A mixed-owner group (pod.ownerIds present) instead
+      // connects each pod only to the source(s) that are actually its own
+      // owner, so e.g. a canary pod doesn't end up drawn as owned by the
+      // stable ReplicaSet too.
+      const podSourceIds = pod.ownerIds?.filter(id => sourceIds.includes(id)) ?? sourceIds
+      // A mixed-owner group's shared sources (e.g. a Rollout, reached via
+      // both a canary and a stable edge) can't be told apart by source id
+      // alone once collapsed — both edges point at the same node id, just
+      // with different labels. The pod's own trafficRole is unambiguous, so
+      // an ownership edge derives its label from that directly rather than
+      // trying to match back to one specific original edge.
+      const label = edgeType === 'manages' && pod.trafficRole
+        ? pod.trafficRole[0].toUpperCase() + pod.trafficRole.slice(1)
+        : undefined
+      for (const sourceId of podSourceIds) {
         newEdges.push({
           id: `${sourceId}-to-${podId}`,
           source: sourceId,
           target: podId,
-          type: 'routes-to' as const,
+          type: edgeType,
+          ...(label ? { label } : {}),
         })
       }
     }
@@ -796,7 +867,8 @@ export function TopologyGraph({
           nodeToGroup,
           nodesWithHandlers.length,
           groupLevels,
-          smartDefaultActive
+          smartDefaultActive,
+          workingNodes
         )
         setEdges(builtEdges)
       }
@@ -845,7 +917,13 @@ export function TopologyGraph({
       })
       return changed ? next : prev
     })
-    setEdges(prev => (prev.length === 0 ? prev : buildEdges(workingEdges, collapsedGroups, groupMapRef.current ?? new Map(), groupingMode, isTrafficView, undefined, prev.length, groupLevels, false)))
+    // nodeCount must be a real NODE count (buildEdges gates animations on it
+    // for the large-graph performance safeguard) — workingNodes.length, not
+    // the previous EDGES array's length. A tree-shaped graph commonly has
+    // fewer edges than nodes, so using edge count here could report "under
+    // the threshold" and re-enable animations on a graph that's actually
+    // over it.
+    setEdges(prev => (prev.length === 0 ? prev : buildEdges(workingEdges, collapsedGroups, groupMapRef.current ?? new Map(), groupingMode, isTrafficView, undefined, workingNodes.length, groupLevels, false, workingNodes)))
     // layoutEpoch is a dep so this re-applies AFTER any in-flight ELK layout lands -
     // a stale layout closure can't leave the canvas painted with pre-probe styles.
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/ui/Collapse.test.tsx

@@ -1,10 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { readFileSync } from 'fs'
-import { join } from 'path'
 import { Collapse, CollapseChevron, disclosurePanelId } from './Collapse'
 import {
-  CSS_EASE,
   DURATION_DISCLOSURE,
   TRANSITION_CHEVRON,
   TRANSITION_DISCLOSURE,
@@ -62,13 +59,3 @@ describe('CollapseChevron', () => {
     expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
   })
 })
-
-describe('motion tokens stay in step with the stylesheet', () => {
-  it('.issue-details-motion mirrors DURATION_DISCLOSURE and CSS_EASE', () => {
-    const css = readFileSync(join(__dirname, '../../theme/components.css'), 'utf8')
-    const m = css.match(/\.issue-details-motion \{[^}]*transition: grid-template-rows (\d+)ms ([^;]+);/)
-    expect(m, 'legacy class present').not.toBeNull()
-    expect(Number(m![1])).toBe(DURATION_DISCLOSURE)
-    expect(m![2].replace(/\s+/g, '')).toBe(CSS_EASE.replace(/\s+/g, ''))
-  })
-})

package/src/components/ui/Disclosure.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { Disclosure } from './Disclosure'
+
+describe('Disclosure', () => {
+  it('wires the header to the panel and keeps closed content mounted', () => {
+    const html = renderToString(<Disclosure summary="More">hidden-copy</Disclosure>)
+    expect(html).toContain('aria-expanded="false"')
+    const id = html.match(/aria-controls="([^"]+)"/)?.[1]
+    expect(id).toBeTruthy()
+    expect(html).toContain(`id="${id}"`)
+    expect(html).toContain('hidden-copy')
+    expect(html).toMatch(/inert=""|inert>/)
+  })
+
+  it('honours defaultOpen and a controlled open', () => {
+    expect(renderToString(<Disclosure summary="s" defaultOpen>x</Disclosure>)).toContain('aria-expanded="true"')
+    expect(renderToString(<Disclosure summary="s" open onOpenChange={() => {}}>x</Disclosure>)).toContain('aria-expanded="true"')
+    expect(renderToString(<Disclosure summary="s" open={false} defaultOpen>x</Disclosure>)).toContain('aria-expanded="false"')
+  })
+
+  it('caret follows the header color unless pinned', () => {
+    expect(renderToString(<Disclosure summary="s">x</Disclosure>)).not.toContain('text-theme-text-tertiary')
+    expect(renderToString(<Disclosure summary="s" inheritColor={false}>x</Disclosure>)).toContain('text-theme-text-tertiary')
+  })
+})

package/src/components/ui/Disclosure.tsx

@@ -0,0 +1,69 @@
+import { useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
+
+// Disclosure — in-flow expand/collapse with the app-standard motion; the
+// replacement for native <details>/<summary> on primary paths. Native details
+// snaps open with no transition and its marker ignores the caret language;
+// this pairs a button header (aria-expanded / aria-controls via useDisclosure)
+// with CollapseChevron and an animated Collapse panel. Shared by Radar and
+// Radar Cloud so both open alike.
+//
+// Content stays mounted while closed (Collapse's default), exactly like native
+// details — server-rendered markup and in-page search still see the collapsed
+// copy. Sites whose panel polls or holds an editor should use
+// <Collapse unmountOnExit> directly instead.
+//
+// Uncontrolled by default (`defaultOpen`); pass `open` + `onOpenChange` to
+// control it from above (a form that keys other state on the disclosure).
+// The chevron takes currentColor from the header by default: a summary's
+// caret should read as part of its text, including on hover.
+export function Disclosure({
+  summary,
+  children,
+  className,
+  summaryClassName,
+  chevronClassName = 'h-3.5 w-3.5',
+  inheritColor = true,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+}: {
+  summary: ReactNode
+  children: ReactNode
+  /** Classes for the wrapper around header and panel. */
+  className?: string
+  /** Classes for the header button (layout, size and color of the summary). */
+  summaryClassName?: string
+  chevronClassName?: string
+  /** False pins the caret to the tertiary grey regardless of the header's color. */
+  inheritColor?: boolean
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
+  const open = controlledOpen ?? uncontrolledOpen
+  const disclosure = useDisclosure(open)
+  const toggle = () => {
+    const next = !open
+    if (controlledOpen === undefined) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        {...disclosure.buttonProps}
+        onClick={toggle}
+        className={clsx('flex w-full cursor-pointer select-none items-center gap-1.5 text-left', summaryClassName)}
+      >
+        <CollapseChevron open={open} inheritColor={inheritColor} className={chevronClassName} />
+        {summary}
+      </button>
+      <Collapse open={open} id={disclosure.panelId}>
+        {children}
+      </Collapse>
+    </div>
+  )
+}

package/src/components/ui/index.ts

@@ -27,6 +27,7 @@ export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'
 export * from './drawer-components'
 export { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from './Collapse'
+export { Disclosure } from './Disclosure'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { InClusterConsentDialog } from './InClusterConsentDialog'

package/src/theme/components.css

@@ -142,28 +142,6 @@
     padding: 0.75rem;
   }
 
-  /* ── ISSUE ROW DETAILS ── */
-
-  /* Legacy: prefer <Collapse unmountOnExit> (ui/Collapse.tsx). Kept for any
-     straggler; timing mirrors DURATION_DISCLOSURE / CSS_EASE in
-     utils/animation.ts — the source-hygiene test keeps them equal. */
-  .issue-details-motion {
-    display: grid;
-    grid-template-rows: 0fr;
-    overflow: hidden;
-    transition: grid-template-rows 300ms cubic-bezier(0.32, 0.72, 0, 1);
-  }
-
-  .issue-details-motion-open {
-    grid-template-rows: 1fr;
-  }
-
-  @starting-style {
-    .issue-details-motion-open {
-      grid-template-rows: 0fr;
-    }
-  }
-
   /* ── SUBTLE BORDERS ── */
 
   .table-divide-subtle > * + * {

package/src/utils/topology-neighborhood.ts

@@ -265,10 +265,23 @@ export function neighborhoodFor(topology: Topology, seeds: NeighborhoodSeed[]):
     }
   }
 
+  const keptNodes = topology.nodes.filter((n) => keep.has(n.id))
+  // A shortcut edge (Rollout->Pod, CronJob->Pod, ...) exists to bridge the gap
+  // left when its intermediate kind is filtered out. The main view drops it
+  // once that kind reappears in the user's visible-kinds toggle; this
+  // neighborhood has no such toggle, so the equivalent check is whether a
+  // node of that kind is actually present in the resulting subgraph.
+  const presentKinds = new Set(keptNodes.map((n) => n.kind))
+  const keptEdges = topology.edges.filter((e) => {
+    if (!keep.has(e.source) || !keep.has(e.target)) return false
+    if (e.skipIfKindVisible && presentKinds.has(e.skipIfKindVisible as NodeKind)) return false
+    return true
+  })
+
   return {
     ...topology,
-    nodes: topology.nodes.filter((n) => keep.has(n.id)),
-    edges: topology.edges.filter((e) => keep.has(e.source) && keep.has(e.target)),
+    nodes: keptNodes,
+    edges: keptEdges,
     warnings: [
       ...(topology.warnings ?? []),
       ...Array.from(cappedSources).map((sourceId) => {

package/src/utils/workload-rollout.ts

@@ -1,5 +1,59 @@
 import type { WorkloadPodInfo } from '../types/core'
 
+/** Every CanaryStep variant Argo defines; raw JSON is unreadable in a step list. */
+export function canaryStepLabel(step: any): string {
+  if (!step || typeof step !== 'object') return 'Unknown step'
+
+  if (step.setWeight !== undefined) return `Set weight: ${step.setWeight}%`
+
+  if (step.pause !== undefined) {
+    return step.pause?.duration ? `Pause: ${step.pause.duration}` : 'Pause: until promoted'
+  }
+
+  if (step.analysis) {
+    const templates = (step.analysis.templates || [])
+      .map((t: any) => t.templateName || t.clusterTemplateName)
+      .filter(Boolean)
+    return templates.length > 0 ? `Analysis: ${templates.join(', ')}` : 'Analysis'
+  }
+
+  if (step.experiment) {
+    const templates = (step.experiment.templates || []).map((t: any) => t.name).filter(Boolean)
+    const duration = step.experiment.duration ? ` for ${step.experiment.duration}` : ''
+    return templates.length > 0
+      ? `Experiment: ${templates.join(', ')}${duration}`
+      : `Experiment${duration}`
+  }
+
+  if (step.setCanaryScale) {
+    const { weight, replicas, matchTrafficWeight } = step.setCanaryScale
+    if (matchTrafficWeight) return 'Set canary scale: match traffic weight'
+    if (replicas !== undefined) return `Set canary scale: ${replicas} replicas`
+    if (weight !== undefined) return `Set canary scale: ${weight}%`
+    return 'Set canary scale'
+  }
+
+  if (step.setHeaderRoute) {
+    const { name, match } = step.setHeaderRoute
+    // An empty match list is how a header route is torn down again.
+    if (!match || match.length === 0) return `Remove header route${name ? `: ${name}` : ''}`
+    const headers = match.map((m: any) => m.headerName).filter(Boolean)
+    return `Header route${name ? ` ${name}` : ''}${headers.length ? `: ${headers.join(', ')}` : ''}`
+  }
+
+  if (step.setMirrorRoute) {
+    const { name, match, percentage } = step.setMirrorRoute
+    if (!match || match.length === 0) return `Remove mirror route${name ? `: ${name}` : ''}`
+    const pct = percentage !== undefined ? ` (${percentage}%)` : ''
+    return `Mirror route${name ? ` ${name}` : ''}${pct}`
+  }
+
+  if (step.plugin) return `Plugin: ${step.plugin.name || 'unnamed'}`
+
+  const key = Object.keys(step)[0]
+  return key ? `Unrecognized step: ${key}` : 'Unknown step'
+}
+
 export type WorkloadRolloutPhase =
   | 'idle'
   | 'applying'
@@ -225,10 +279,22 @@ export function getArgoRolloutStepNumber(resource: any): number | null {
   return Math.min(Math.max(currentIndex + 1, 1), steps.length)
 }
 
+// Mirrors pkg/health/workload_rollout.go's argoStepDetail exactly (same
+// output string, same step-type coverage via canaryStepLabel) - the two are
+// checked against the same golden fixture
+// (pkg/health/testdata/workload_rollout_vectors.json), so a change to one
+// without the other silently breaks cross-language parity rather than
+// failing loudly.
 function argoDetail(resource: any, updated: number, desired: number, available: number): string {
+  const steps = resource?.spec?.strategy?.canary?.steps || []
   const stepNumber = getArgoRolloutStepNumber(resource)
-  const step = stepNumber === null ? '' : `Step ${stepNumber} · `
-  return `${step}${updated}/${desired} updated · ${available} available`
+  const step = stepNumber === null ? '' : `Step ${stepNumber}`
+  const currentStep = stepNumber === null ? undefined : steps[stepNumber - 1]
+  const label = currentStep ? ` (${canaryStepLabel(currentStep)})` : ''
+  const weight = resource?.status?.canary?.weights?.canary?.weight
+  const weightSuffix = typeof weight === 'number' ? ` · ${weight}% canary traffic` : ''
+  const prefix = stepNumber === null ? '' : `${step}${label} · `
+  return `${prefix}${updated}/${desired} updated · ${available} available${weightSuffix}`
 }
 
 function replicaDetail(updated: number, desired: number, available: number): string {