@skyhook-io/k8s-ui 1.17.0 → 1.18.0

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

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
-import { getSubtitle } from './GitOpsTreeGraph'
-import type { GitOpsTreeNode } from '../../../types'
+import { buildCauseByRef, getSubtitle, nodeCause } from './GitOpsTreeGraph'
+import type { GitOpsIssue, GitOpsTreeNode } from '../../../types'
 
 function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
   return {
@@ -14,6 +14,9 @@ function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
 }
 
 describe('getSubtitle', () => {
+  it('shows confirmed absence even when controller health is unknown or stale', () => {
+    expect(getSubtitle(node({ tool: 'argocd', missing: true, sync: 'OutOfSync', health: 'Healthy' }))).toBe('OutOfSync • Not found in cluster')
+  })
   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
@@ -90,3 +93,89 @@ describe('getSubtitle', () => {
     expect(getSubtitle(node({ ref: { kind: 'ClusterRole', name: 'podinfo', namespace: '' } }))).toBe('')
   })
 })
+
+describe('nodeCause', () => {
+  // Shapes as the tree API sends them: the Go side maps Argo's Degraded and
+  // Missing to topologyStatus 'unhealthy', Progressing and Suspended to
+  // 'degraded' (pkg/gitops/tree healthToTopology).
+  const FAILURE = { text: 'Back-off restarting failed container main', lead: false }
+  const LEAD = { text: 'Elasticsearch cluster health degraded', lead: true }
+
+  it('shows the cause on a node the controller calls Degraded', () => {
+    expect(nodeCause(node({ health: 'Degraded', healthSource: 'controller', topologyStatus: 'unhealthy' }), FAILURE)).toBe(FAILURE.text)
+  })
+
+  it('hides a failure verdict on a Progressing node, even when an issue matched it', () => {
+    // A rollout in flight is not broken; a cause tooltip on it says it is.
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'controller', topologyStatus: 'degraded' }), FAILURE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'radar', topologyStatus: 'degraded' }), FAILURE)).toBeUndefined()
+  })
+
+  it('hides it on a Suspended node, even when an issue matched it', () => {
+    expect(nodeCause(node({ health: 'Suspended', healthSource: 'controller', topologyStatus: 'degraded' }), FAILURE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Suspended', healthSource: 'controller', topologyStatus: 'degraded' }), LEAD)).toBeUndefined()
+  })
+
+  it('never shows it on a healthy node', () => {
+    expect(nodeCause(node({ health: 'Healthy', healthSource: 'controller', topologyStatus: 'healthy' }), FAILURE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Healthy', healthSource: 'radar', topologyStatus: 'healthy' }), LEAD)).toBeUndefined()
+  })
+
+  it('shows a lead on a node that is not failing, framed as possible', () => {
+    // Argo CD 3 does not persist per-resource health, so an Argo-Degraded app
+    // can have every node read Progressing or unknown by Radar. The events
+    // lead is then the only pointer, and it lands on one of those nodes.
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'radar', topologyStatus: 'degraded' }), LEAD))
+      .toBe('Possible cause: Elasticsearch cluster health degraded')
+    expect(nodeCause(node({ ref: { group: 'elasticsearch.k8s.elastic.co', kind: 'Elasticsearch', name: 'logs', namespace: 'search' }, topologyStatus: 'unknown' }), LEAD))
+      .toBe('Possible cause: Elasticsearch cluster health degraded')
+  })
+
+  it('shows a Flux source fetch error on the source while Flux retries it', () => {
+    const source = node({
+      ref: { group: 'source.toolkit.fluxcd.io', kind: 'GitRepository', name: 'podinfo', namespace: 'flux-system' },
+      health: 'Progressing',
+      topologyStatus: 'degraded',
+    })
+    // Keyed like the tree's own nodes, so the issue's ref finds this node.
+    const cause = buildCauseByRef([{
+      severity: 'warning',
+      scope: 'tree',
+      reason: 'SourceNotReady',
+      message: 'GitRepository flux-system/podinfo can\'t fetch updates.',
+      cause: 'authentication required',
+      refs: [{ group: 'source.toolkit.fluxcd.io', kind: 'GitRepository', namespace: 'flux-system', name: 'podinfo' }],
+    }]).get('source.toolkit.fluxcd.io/GitRepository/flux-system/podinfo')
+    expect(nodeCause(source, cause)).toBe('Possible cause: authentication required')
+  })
+
+  it('shows a lead as is on a failing node', () => {
+    expect(nodeCause(node({ health: 'Degraded', topologyStatus: 'unhealthy' }), LEAD)).toBe(LEAD.text)
+  })
+})
+
+describe('buildCauseByRef', () => {
+  const ref = { group: 'apps', kind: 'Deployment', namespace: 'demo', name: 'web' }
+  function issue(extras: Partial<GitOpsIssue>): GitOpsIssue {
+    return { severity: 'critical', scope: 'resource', reason: 'Degraded', message: 'Deployment web is Degraded', cause: 'crashloop', refs: [ref], ...extras }
+  }
+
+  it('marks the Warning-event lead and the Flux blockers as leads, and nothing else', () => {
+    const lead = (reason: string) => [...buildCauseByRef([issue({ reason })]).values()][0]?.lead
+    expect(lead('PossibleCause')).toBe(true)
+    expect(lead('SourceNotReady')).toBe(true)
+    expect(lead('ArtifactFailed')).toBe(true)
+    expect(lead('DependencyNotReady')).toBe(true)
+    expect(lead('Degraded')).toBe(false)
+    expect(lead('Failed')).toBe(false)
+  })
+
+  it('keeps the first, most severe cause for a node', () => {
+    const map = buildCauseByRef([issue({ cause: 'crashloop' }), issue({ severity: 'warning', reason: 'PossibleCause', cause: 'probe failed' })])
+    expect([...map.values()]).toEqual([{ text: 'crashloop', lead: false }])
+  })
+
+  it('skips issues without a cause or a ref', () => {
+    expect(buildCauseByRef([issue({ cause: undefined }), issue({ refs: [] })]).size).toBe(0)
+  })
+})

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

@@ -28,7 +28,8 @@ 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'
+import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, treeNodeHealth, type GitOpsTreeFilters } from './tree-helpers'
+import { rankTree, renderedEdge, shortcutEdges, upstreamClosure, upstreamEdges } from './layout'
 
 export type GitOpsTreePreset = 'full' | 'compact' | 'workloads' | 'app'
 
@@ -123,19 +124,7 @@ function GitOpsTreeGraphInner({
   useEffect(() => {
     if (preset !== 'compact') setExpandedGroups(new Set())
   }, [preset])
-  const causeByRef = useMemo(() => {
-    const map = new Map<string, string>()
-    for (const issue of issues ?? []) {
-      const cause = issue.cause
-      const ref = issue.refs?.[0]
-      if (!cause || !ref) continue
-      const key = refKey(ref)
-      // First match wins — issues arrive ranked by severity, so a node
-      // that's the subject of multiple issues keeps its most severe cause.
-      if (!map.has(key)) map.set(key, cause)
-    }
-    return map
-  }, [issues])
+  const causeByRef = useMemo(() => buildCauseByRef(issues), [issues])
   const { nodes, edges } = useMemo(() => buildFlowGraph(tree, preset, query, filters, expandedGroups, causeByRef), [tree, preset, query, filters, expandedGroups, causeByRef])
 
   useEffect(() => {
@@ -231,7 +220,7 @@ function GitOpsTreeGraphInner({
 function EdgeLegend({ edges }: { edges: Edge[] }) {
   const types = new Set(edges.map((e) => e.data?.type as string).filter(Boolean))
   const rows: Array<{ key: string; color: string; label: string }> = []
-  if (types.has('source')) rows.push({ key: 'source', color: getEdgeColor('source'), label: 'Source repo' })
+  if (types.has('source')) rows.push({ key: 'source', color: getEdgeColor('source'), label: 'Source artifact' })
   if (types.has('dependsOn')) rows.push({ key: 'dependsOn', color: getEdgeColor('dependsOn'), label: 'Depends on' })
   // Always show the default ownership color when there are 2+ edge kinds —
   // operators need to compare against it. Hide when "owns" is the only kind.
@@ -329,20 +318,14 @@ function getEdgeColor(type: string): string {
   }
 }
 
-function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>, causeByRef?: Map<string, string>): { nodes: Node[]; edges: Edge[] } {
+function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>, causeByRef?: Map<string, NodeCause>): { nodes: Node[]; edges: Edge[] } {
   if (!tree) return { nodes: [], edges: [] }
   const visibleTree = applyGraphFilters(applyPreset(tree, preset, expandedGroups), filters)
   const byID = new Map(visibleTree.nodes.map(node => [node.id, node]))
-  const children = new Map<string, string[]>()
-  const incoming = new Map<string, number>()
-  for (const edge of visibleTree.edges) {
-    if (!byID.has(edge.source) || !byID.has(edge.target)) continue
-    children.set(edge.source, [...(children.get(edge.source) ?? []), edge.target])
-    incoming.set(edge.target, (incoming.get(edge.target) ?? 0) + 1)
-  }
-
-  const ranks = assignRanks(visibleTree.root.id, byID, children, incoming)
+  const ranks = groupRanks(rankTree(visibleTree), byID)
   const positioned = positionRanks(ranks, byID)
+  const upstreamTargets = new Set(upstreamEdges(visibleTree).map(edge => edge.target))
+  const shortcuts = shortcutEdges(visibleTree)
   const normalizedQuery = query.trim().toLowerCase()
   const nodes = Array.from(positioned.entries()).map(([id, position]) => {
     const node = byID.get(id)!
@@ -359,11 +342,10 @@ function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePrese
   })
 
   const edges = visibleTree.edges
-    .filter(edge => positioned.has(edge.source) && positioned.has(edge.target))
+    .filter(edge => positioned.has(edge.source) && positioned.has(edge.target) && !shortcuts.has(edge))
     .map(edge => ({
       id: `${edge.source}->${edge.target}`,
-      source: edge.source,
-      target: edge.target,
+      ...renderedEdge(edge, upstreamTargets),
       type: 'smoothstep',
       // The legend reads back edge.data?.type to decide which rows to render —
       // ReactFlow doesn't preserve our custom `type` field at the top level
@@ -394,7 +376,9 @@ function applyPreset(tree: GitOpsResourceTree, preset: GitOpsTreePreset, expande
     children.set(edge.source, [...(children.get(edge.source) ?? []), edge.target])
   }
 
-  const keep = new Set<string>([tree.root.id])
+  // Dependencies answer "where does this come from" and are few, so every
+  // preset keeps them.
+  const keep = new Set<string>([tree.root.id, ...upstreamClosure(tree)])
   if (preset === 'app') {
     for (const edge of tree.edges) {
       if (edge.source === tree.root.id) keep.add(edge.target)
@@ -438,7 +422,7 @@ function applyGraphFilters(tree: GitOpsResourceTree, filters?: GitOpsTreeFilters
     if (node.id === tree.root.id) continue
     if (matchesGitOpsTreeFilters(node, filters)) {
       let current: string | undefined = node.id
-      while (current) {
+      while (current && !keep.has(current)) {
         keep.add(current)
         current = parent.get(current)
       }
@@ -506,43 +490,10 @@ function compactInfra(tree: GitOpsResourceTree, expandedGroups?: Set<string>): G
   }
 }
 
-function assignRanks(
-  rootID: string,
-  nodes: Map<string, GitOpsTreeNode>,
-  children: Map<string, string[]>,
-  incoming: Map<string, number>
-): Map<number, string[]> {
-  const rankByID = new Map<string, number>()
-  const queue = [{ id: rootID, rank: 0 }]
-  // Cycle/explosion guard: GitOps trees are owner-ref DAGs in practice, but
-  // the EdgeManages set we feed in could pathologically include a cycle
-  // (e.g. a CRD whose owner ref points back at one of its own children, or
-  // a malformed inventory). Without this cap, the "previous >= rank" skip
-  // never fires for cyclic edges and the loop runs forever, freezing the
-  // UI thread. Cap at a large multiple of node count so legitimate trees
-  // never hit it; cycles bail with the partial layout we have so far.
-  let iterations = 0
-  const maxIterations = nodes.size * 8 + 64
-
-  while (queue.length > 0) {
-    if (++iterations > maxIterations) break
-    const current = queue.shift()!
-    const previous = rankByID.get(current.id)
-    if (previous !== undefined && previous >= current.rank) continue
-    rankByID.set(current.id, current.rank)
-    for (const child of children.get(current.id) ?? []) {
-      queue.push({ id: child, rank: current.rank + 1 })
-    }
-  }
-
-  for (const id of nodes.keys()) {
-    if (!rankByID.has(id)) {
-      rankByID.set(id, incoming.get(id) ? 1 : 0)
-    }
-  }
-
+function groupRanks(rankByID: Map<string, number>, nodes: Map<string, GitOpsTreeNode>): Map<number, string[]> {
   const ranks = new Map<number, string[]>()
   for (const [id, rank] of rankByID.entries()) {
+    if (!nodes.has(id)) continue
     ranks.set(rank, [...(ranks.get(rank) ?? []), id])
   }
   for (const ids of ranks.values()) {
@@ -565,29 +516,38 @@ function positionRanks(ranks: Map<number, string[]>, nodes: Map<string, GitOpsTr
   const rootRank = ranks.get(0) ?? []
   if (rootRank.length === 1) {
     const rootID = rootRank[0]
-    const nextRank = ranks.get(1) ?? []
-    if (nextRank.length > 0) {
-      const maxY = (nextRank.length - 1) * ROW_GAP
-      const rootHeight = getNodeDimensions(nodes.get(rootID)!).height
+    const rootHeight = getNodeDimensions(nodes.get(rootID)!).height
+    const tallest = Math.max((ranks.get(1)?.length ?? 0), (ranks.get(-1)?.length ?? 0))
+    if (tallest > 0) {
+      const maxY = (tallest - 1) * ROW_GAP
       positioned.set(rootID, { x: 0, y: Math.max(0, (maxY - rootHeight) / 2 - ROOT_Y_OFFSET) })
     }
+    // Dependency columns are short; center them on the root so the chain
+    // reads as one line into it.
+    const rootCenter = positioned.get(rootID)!.y + rootHeight / 2
+    for (const rank of sortedRanks) {
+      if (rank >= 0) continue
+      const ids = ranks.get(rank) ?? []
+      const columnCenter = ((ids.length - 1) * ROW_GAP + rootHeight) / 2
+      ids.forEach((id, row) => {
+        positioned.set(id, { x: rank * RANK_GAP, y: row * ROW_GAP + rootCenter - columnCenter })
+      })
+    }
   }
 
   return positioned
 }
 
-const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean; cause?: string }>>) {
+const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean; cause?: NodeCause }>>) {
   const node = data.node
   const kind = normalizeDisplayKind(node)
-  const status = normalizeHealth(node.topologyStatus)
+  const status = node.missing ? 'unhealthy' : normalizeHealth(node.topologyStatus)
   const terminating = isNodeTerminating(node)
   const gitopsTool = gitopsToolForNode(node)
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
   const KindIcon = getTopologyIcon(kind)
-  // Only unhealthy nodes carry a cause worth surfacing — a healthy node
-  // matched by a stale/unrelated issue ref shouldn't show a tooltip.
-  const cause = status === 'unhealthy' || status === 'degraded' ? data.cause : undefined
+  const cause = nodeCause(node, data.cause)
   // Only declared resources can carry the controller's verdict, so only
   // there does "this one is Radar's" mean anything. Generated children
   // (ReplicaSets, Pods) are always Radar's read; marking each would be
@@ -767,10 +727,49 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   const relationship = stringData(data.relationship)
   if (relationship) chips.push({ value: relationship })
   if (node.sync === 'OutOfSync') chips.push({ value: 'OutOfSync', tone: 'warning' })
-  if (node.health === 'Degraded' || node.health === 'Missing') chips.push({ value: node.health, tone: 'danger' })
+  const health = treeNodeHealth(node)
+  if (health === 'Degraded' || health === 'Missing') chips.push({ value: health, tone: 'danger' })
   return chips
 }
 
+export interface NodeCause {
+  text: string
+  // An issue that names a resource as a lead without saying it failed: Argo's
+  // Warning-event lead (Go: degradedResourceFromEvents) and the Flux
+  // source/dependency blockers (Go: attachFluxBlocker, fluxSourceWarnings).
+  lead: boolean
+}
+
+const LEAD_REASONS = new Set(['PossibleCause', 'SourceNotReady', 'ArtifactFailed', 'DependencyNotReady'])
+
+export function buildCauseByRef(issues?: GitOpsIssue[]): Map<string, NodeCause> {
+  const map = new Map<string, NodeCause>()
+  for (const issue of issues ?? []) {
+    const cause = issue.cause
+    const ref = issue.refs?.[0]
+    if (!cause || !ref) continue
+    const key = refKey(ref)
+    // First match wins — issues arrive ranked by severity, so a node
+    // that's the subject of multiple issues keeps its most severe cause.
+    if (!map.has(key)) map.set(key, { text: cause, lead: LEAD_REASONS.has(issue.reason) })
+  }
+  return map
+}
+
+// A failing node (topology 'unhealthy') shows any cause as is. A failure
+// verdict on a Progressing node would read as "this is broken" on a rollout
+// in flight, so elsewhere only a lead shows, framed as possible. That is where
+// leads land: the Warning-event lead is only emitted when no resource reads
+// as failing, and a Flux source mid-retry reads Progressing while its fetch
+// error is still the answer. Healthy and Suspended nodes show nothing.
+export function nodeCause(node: GitOpsTreeNode, cause?: NodeCause): string | undefined {
+  if (!cause) return undefined
+  const status = normalizeHealth(node.topologyStatus)
+  if (status === 'unhealthy') return cause.text
+  if (!cause.lead || status === 'healthy' || node.health === 'Suspended') return undefined
+  return `Possible cause: ${cause.text}`
+}
+
 // 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
@@ -791,6 +790,7 @@ export function getSubtitle(node: GitOpsTreeNode): string {
     // a state description, not an affordance.
     return 'Click to expand'
   }
+  if (node.missing) return `${node.sync ? `${node.sync} • ` : ''}Not found in cluster`
   if (isNodeTerminating(node)) {
     return 'Pending deletion'
   }
@@ -827,7 +827,7 @@ function matchesQuery(node: GitOpsTreeNode, query: string): boolean {
     node.ref.namespace,
     node.ref.group,
     node.sync,
-    node.health,
+    treeNodeHealth(node),
   ].some(value => String(value ?? '').toLowerCase().includes(query))
 }
 

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

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+
+import type { GitOpsResourceTree, GitOpsTreeEdge, GitOpsTreeNode } from '../../../types'
+import { rankTree, renderedEdge, shortcutEdges, upstreamClosure, upstreamEdges } from './layout'
+
+function node(id: string, kind = 'Deployment', role: GitOpsTreeNode['role'] = 'declared'): GitOpsTreeNode {
+  return { id, ref: { kind, namespace: 'flux-system', name: id }, role, tool: 'fluxcd' }
+}
+
+function tree(nodes: GitOpsTreeNode[], edges: GitOpsTreeEdge[]): GitOpsResourceTree {
+  return { root: nodes[0], nodes, edges }
+}
+
+describe('rankTree', () => {
+  it('draws a release\'s generated chart and repository upstream, repository first', () => {
+    // The release names the repository directly and through its chart; the
+    // longer path wins so the chain reads repository → chart → release.
+    const t = tree(
+      [node('release', 'HelmRelease', 'root'), node('chart', 'HelmChart'), node('repo', 'HelmRepository'), node('deploy')],
+      [
+        { source: 'release', target: 'repo', type: 'source' },
+        { source: 'release', target: 'chart', type: 'source' },
+        { source: 'chart', target: 'repo', type: 'source' },
+        { source: 'release', target: 'deploy', type: 'owns' },
+      ],
+    )
+    const rank = rankTree(t)
+    expect(rank.get('release')).toBe(0)
+    expect(rank.get('chart')).toBe(-1)
+    expect(rank.get('repo')).toBe(-2)
+    expect(rank.get('deploy')).toBe(1)
+  })
+
+  it('keeps managed resources downstream even when they are also a source (bootstrap)', () => {
+    const t = tree(
+      [node('flux-system', 'Kustomization', 'root'), node('repo', 'GitRepository'), node('controller')],
+      [
+        { source: 'flux-system', target: 'repo', type: 'owns' },
+        { source: 'flux-system', target: 'repo', type: 'source' },
+        { source: 'flux-system', target: 'controller', type: 'owns' },
+      ],
+    )
+    expect(upstreamEdges(t)).toEqual([])
+    expect(rankTree(t).get('repo')).toBe(1)
+  })
+
+  it('places dependsOn targets upstream and keeps the owned subtree depth', () => {
+    const t = tree(
+      [node('overlay', 'Kustomization', 'root'), node('base', 'Kustomization'), node('repo', 'GitRepository'), node('deploy'), node('rs', 'ReplicaSet', 'generated'), node('pod', 'Pod', 'generated')],
+      [
+        { source: 'overlay', target: 'repo', type: 'source' },
+        { source: 'overlay', target: 'base', type: 'dependsOn' },
+        { source: 'overlay', target: 'deploy', type: 'owns' },
+        { source: 'deploy', target: 'rs', type: 'owns' },
+        { source: 'rs', target: 'pod', type: 'owns' },
+      ],
+    )
+    const rank = rankTree(t)
+    expect([rank.get('repo'), rank.get('base')]).toEqual([-1, -1])
+    expect([rank.get('deploy'), rank.get('rs'), rank.get('pod')]).toEqual([1, 2, 3])
+  })
+
+  it('terminates on a dependency cycle and never moves the root', () => {
+    const t = tree(
+      [node('a', 'Kustomization', 'root'), node('b', 'Kustomization'), node('c', 'Kustomization')],
+      [
+        { source: 'a', target: 'b', type: 'dependsOn' },
+        { source: 'b', target: 'c', type: 'dependsOn' },
+        { source: 'c', target: 'b', type: 'dependsOn' },
+        { source: 'c', target: 'a', type: 'dependsOn' },
+      ],
+    )
+    const rank = rankTree(t)
+    expect(rank.get('a')).toBe(0)
+    expect(rank.get('b')).toBeLessThan(0)
+    expect(rank.get('c')).toBeLessThan(0)
+  })
+})
+
+describe('renderedEdge', () => {
+  it('points a dependency edge into its consumer and leaves ownership alone', () => {
+    const upstream = new Set(['repo'])
+    expect(renderedEdge({ source: 'ks', target: 'repo', type: 'source' }, upstream)).toEqual({ source: 'repo', target: 'ks' })
+    expect(renderedEdge({ source: 'ks', target: 'deploy', type: 'owns' }, upstream)).toEqual({ source: 'ks', target: 'deploy' })
+  })
+})
+
+describe('upstreamClosure', () => {
+  it('follows the chart hop so every preset keeps the whole source chain', () => {
+    const t = tree(
+      [node('release', 'HelmRelease', 'root'), node('chart', 'HelmChart'), node('repo', 'HelmRepository'), node('deploy')],
+      [
+        { source: 'release', target: 'chart', type: 'source' },
+        { source: 'chart', target: 'repo', type: 'source' },
+        { source: 'release', target: 'deploy', type: 'owns' },
+      ],
+    )
+    expect([...upstreamClosure(t)].sort()).toEqual(['chart', 'repo'])
+  })
+})
+
+describe('shortcutEdges', () => {
+  it('drops the direct release → repository edge only when the chart path covers it', () => {
+    const direct: GitOpsTreeEdge = { source: 'release', target: 'repo', type: 'source' }
+    const viaChart: GitOpsTreeEdge[] = [{ source: 'release', target: 'chart', type: 'source' }, { source: 'chart', target: 'repo', type: 'source' }]
+    const nodes = [node('release', 'HelmRelease', 'root'), node('chart', 'HelmChart'), node('repo', 'HelmRepository')]
+    expect([...shortcutEdges(tree(nodes, [direct, ...viaChart]))]).toEqual([direct])
+    // Before the chart is generated the direct edge is the only path.
+    expect(shortcutEdges(tree(nodes, [direct])).size).toBe(0)
+  })
+})

package/src/components/gitops/tree/layout.ts

@@ -0,0 +1,128 @@
+import type { GitOpsResourceTree, GitOpsTreeEdge } from '../../../types'
+
+// Flux source, chart and dependsOn edges travel consumer → dependency on the
+// wire. A dependency feeds its consumer, so the graph draws it upstream (left
+// of the consumer) with the arrow pointing into the consumer, as Flux's own
+// tooling does. An object the root also manages (a bootstrap Kustomization
+// that owns its GitRepository) keeps its place among the managed resources:
+// ownership wins.
+export function isUpstreamEdgeType(type: GitOpsTreeEdge['type']): boolean {
+  return type === 'source' || type === 'dependsOn'
+}
+
+export function upstreamEdges(tree: Pick<GitOpsResourceTree, 'edges'>): GitOpsTreeEdge[] {
+  const owned = new Set(tree.edges.filter(edge => edge.type === 'owns').map(edge => edge.target))
+  return tree.edges.filter(edge => isUpstreamEdgeType(edge.type) && !owned.has(edge.target))
+}
+
+// rankTree places the root at 0, managed resources at positive ranks by
+// ownership depth, and dependencies at negative ranks by their longest
+// dependency path from the root, so a repository that a release names
+// directly and through its generated chart still sits left of the chart.
+// Cycles are bounded: a rank never moves past the node count.
+export function rankTree(tree: GitOpsResourceTree): Map<string, number> {
+  const ids = new Set(tree.nodes.map(node => node.id))
+  ids.add(tree.root.id)
+  const limit = ids.size
+  const upstream = upstreamEdges(tree).filter(edge => ids.has(edge.source) && ids.has(edge.target) && edge.target !== tree.root.id)
+
+  const depth = new Map<string, number>([[tree.root.id, 0]])
+  for (let pass = 0; pass < limit; pass++) {
+    let changed = false
+    for (const edge of upstream) {
+      const from = depth.get(edge.source)
+      if (from === undefined) continue
+      const next = Math.min(from + 1, limit)
+      if ((depth.get(edge.target) ?? 0) < next) {
+        depth.set(edge.target, next)
+        changed = true
+      }
+    }
+    if (!changed) break
+  }
+
+  const rank = new Map<string, number>([[tree.root.id, 0]])
+  for (const [id, d] of depth) {
+    if (id !== tree.root.id) rank.set(id, -d)
+  }
+
+  const children = new Map<string, string[]>()
+  for (const edge of tree.edges) {
+    if (!ids.has(edge.source) || !ids.has(edge.target)) continue
+    if (rank.has(edge.target) && rank.get(edge.target)! < 0) continue
+    if (rank.has(edge.source) && rank.get(edge.source)! < 0) continue
+    children.set(edge.source, [...(children.get(edge.source) ?? []), edge.target])
+  }
+  const downstream = new Map<string, number>()
+  const queue = [{ id: tree.root.id, rank: 0 }]
+  let iterations = 0
+  const maxIterations = limit * 8 + 64
+  while (queue.length > 0 && ++iterations <= maxIterations) {
+    const current = queue.shift()!
+    const previous = downstream.get(current.id)
+    if (previous !== undefined && previous >= current.rank) continue
+    downstream.set(current.id, current.rank)
+    for (const child of children.get(current.id) ?? []) {
+      queue.push({ id: child, rank: current.rank + 1 })
+    }
+  }
+  for (const [id, r] of downstream) {
+    if (id !== tree.root.id) rank.set(id, r)
+  }
+
+  const incoming = new Set(tree.edges.map(edge => edge.target))
+  for (const id of ids) {
+    if (!rank.has(id)) rank.set(id, incoming.has(id) ? 1 : 0)
+  }
+  return rank
+}
+
+// renderedEdge returns the edge as drawn: dependency edges point from the
+// dependency into its consumer.
+export function renderedEdge(edge: GitOpsTreeEdge, upstreamTargets: Set<string>): { source: string; target: string } {
+  if (isUpstreamEdgeType(edge.type) && upstreamTargets.has(edge.target)) {
+    return { source: edge.target, target: edge.source }
+  }
+  return { source: edge.source, target: edge.target }
+}
+
+// upstreamClosure returns every dependency reachable from the root, for
+// presets that must keep "where does this come from" in view.
+export function upstreamClosure(tree: GitOpsResourceTree): Set<string> {
+  const edges = upstreamEdges(tree)
+  const out = new Set<string>()
+  const queue = [tree.root.id]
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    for (const edge of edges) {
+      if (edge.source !== id || out.has(edge.target) || edge.target === tree.root.id) continue
+      out.add(edge.target)
+      queue.push(edge.target)
+    }
+  }
+  return out
+}
+
+// shortcutEdges returns the dependency edges that a longer dependency path
+// already covers: an inline HelmRelease names its repository directly and
+// through its generated chart, and drawing both puts the shortcut behind the
+// chart card. The data keeps the edge; the drawing doesn't need it.
+export function shortcutEdges(tree: Pick<GitOpsResourceTree, 'edges'>): Set<GitOpsTreeEdge> {
+  const edges = upstreamEdges(tree)
+  const out = new Set<GitOpsTreeEdge>()
+  for (const edge of edges) {
+    const seen = new Set<string>([edge.source])
+    const queue = edges.filter(e => e !== edge && e.source === edge.source).map(e => e.target)
+    while (queue.length > 0) {
+      const id = queue.shift()!
+      if (id === edge.target) {
+        out.add(edge)
+        break
+      }
+      if (seen.has(id)) continue
+      seen.add(id)
+      for (const next of edges) if (next.source === id) queue.push(next.target)
+    }
+  }
+  return out
+}

package/src/components/gitops/tree/tree-helpers.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { buildTreeFacets } from '../GitOpsGraphFilterRail'
+import { matchesGitOpsTreeFilters } from './tree-helpers'
+import type { GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
+
+const node = (group: string): GitOpsTreeNode => ({ id: group, ref: { kind: 'Service', group, name: 'same', namespace: 'team' }, role: 'generated', tool: 'fluxcd' })
+
+describe('GitOps kind filter contract', () => {
+  it('uses confirmed absence in health facets rather than stale health', () => {
+    const missing = { ...node(''), missing: true, health: 'Healthy' as const }
+    expect(matchesGitOpsTreeFilters(missing, { health: ['Missing'] })).toBe(true)
+    expect(matchesGitOpsTreeFilters(missing, { health: ['Healthy'] })).toBe(false)
+    expect(buildTreeFacets({ nodes: [missing] } as GitOpsResourceTree).health).toEqual([{ name: 'Missing', count: 1 }])
+  })
+  it('uses bare Kubernetes kinds across API groups', () => {
+    const nodes = [node(''), node('serving.knative.dev')]
+    expect(buildTreeFacets({ nodes } as GitOpsResourceTree).kinds).toEqual([{ name: 'Service', count: 2 }])
+    for (const n of nodes) {
+      expect(matchesGitOpsTreeFilters(n, { kinds: new Set(['Service']) })).toBe(true)
+      expect(matchesGitOpsTreeFilters(n, { kinds: new Set(['Deployment']) })).toBe(false)
+    }
+  })
+})

package/src/components/gitops/tree/tree-helpers.ts

@@ -14,6 +14,16 @@ export function gitOpsFilterSet(values?: Set<string> | string[]): Set<string> |
   return set.size > 0 ? set : undefined
 }
 
+// treeNodeFilterRole is the node's role as the filter rail presents it: a
+// dependency the root consumes but doesn't manage is not "Declared".
+export function treeNodeFilterRole(node: GitOpsTreeNode): string {
+  return node.dependency ? 'dependency' : node.role
+}
+
+export function treeNodeHealth(node: GitOpsTreeNode): string {
+  return node.missing ? 'Missing' : node.health || 'Unknown'
+}
+
 export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsTreeFilters): boolean {
   if (!filters) return true
   const kinds = gitOpsFilterSet(filters.kinds)
@@ -25,8 +35,8 @@ export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsT
   if (kinds && !kinds.has(node.ref.kind)) return false
   if (namespaces && !namespaces.has(node.ref.namespace || '(cluster)')) return false
   if (sync && !sync.has(node.sync || 'Unknown')) return false
-  if (health && !health.has(node.health || 'Unknown')) return false
-  if (roles && !roles.has(node.role)) return false
+  if (health && !health.has(treeNodeHealth(node))) return false
+  if (roles && !roles.has(treeNodeFilterRole(node))) return false
   return true
 }