@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/gitops/insights/ArgoResourceDiff.test.tsx

@@ -0,0 +1,115 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, test } from 'vitest'
+
+import type { GitOpsChange, GitOpsDrift, GitOpsInsight, GitOpsResourceDiff } from '../../../types'
+import { ArgoResourceDiff } from './ArgoResourceDiff'
+import { GitOpsChangesView } from './GitOpsInsightViews'
+
+// Shape seen live on Argo CD 3.5.2: the Deployment was scaled by hand (1 -> 3)
+// and a Git commit bumping the image hasn't synced yet. last-applied holds the
+// manifest from the last sync, so it only sees the scale.
+const lastApplied: GitOpsDrift = {
+  source: 'lastAppliedAnnotation',
+  entries: [{ path: 'spec.replicas', op: 'changed', desired: '1', live: '3' }],
+}
+
+const argoDiff: GitOpsResourceDiff = {
+  source: 'argocd-api',
+  desired: 'spec:\n  replicas: 1\n  image: nginx:1.28-alpine\n',
+  live: 'spec:\n  replicas: 3\n  image: nginx:1.27-alpine\n',
+  fieldEntries: [
+    { path: 'spec.replicas', op: 'changed', desired: '1', live: '3' },
+    { path: 'spec.template.spec.containers.[0].image', op: 'changed', desired: '"nginx:1.28-alpine"', live: '"nginx:1.27-alpine"' },
+  ],
+  redacted: false,
+  hook: false,
+}
+
+const IMAGE_PATH = 'spec.template.spec.containers.[0].image'
+
+const count = (html: string, needle: string) => html.split(needle).length - 1
+
+describe('ArgoResourceDiff field list', () => {
+  test("shows Argo's field list above the YAML diff, including the unsynced Git change", () => {
+    const html = renderToStaticMarkup(<ArgoResourceDiff diff={argoDiff} loading={false} fallbackDrift={lastApplied} />)
+    expect(html).toContain('Field diff')
+    expect(html).toContain(IMAGE_PATH)
+    expect(html).toContain('via Argo CD API')
+    expect(html.indexOf('Field diff')).toBeLessThan(html.indexOf('desired (Git-rendered)'))
+    // One list, not Argo's plus the last-applied fallback.
+    expect(count(html, 'Field diff')).toBe(1)
+  })
+
+  test('renders no field list box when Argo reports no field differences', () => {
+    const html = renderToStaticMarkup(<ArgoResourceDiff diff={{ ...argoDiff, fieldEntries: [] }} loading={false} fallbackDrift={lastApplied} />)
+    expect(html).not.toContain('Field diff')
+  })
+
+  test('treats a null field list (sent by older Radars) as empty instead of crashing', () => {
+    const html = renderToStaticMarkup(<ArgoResourceDiff diff={{ ...argoDiff, fieldEntries: null }} loading={false} fallbackDrift={lastApplied} />)
+    expect(html).not.toContain('Field diff')
+    expect(html).toContain('desired (Git-rendered)')
+  })
+
+  test('says the list was cut short instead of presenting the cap as the count', () => {
+    const html = renderToStaticMarkup(<ArgoResourceDiff diff={{ ...argoDiff, fieldEntriesTruncated: true }} loading={false} />)
+    expect(html).toContain('showing first 50 entries')
+    expect(html).not.toContain('2 fields')
+  })
+
+  test("falls back to the last-applied list when Argo's diff fails to load", () => {
+    const html = renderToStaticMarkup(<ArgoResourceDiff loading={false} error="Failed to fetch the diff from the Argo CD API server." fallbackDrift={lastApplied} />)
+    expect(html).toContain('Field diff')
+    expect(html).toContain('spec.replicas')
+    expect(html).not.toContain('via Argo CD API')
+    expect(html).toContain('Failed to fetch the diff from the Argo CD API server.')
+  })
+})
+
+describe('GitOpsChangesView expanded Argo row', () => {
+  const change: GitOpsChange = {
+    ref: { group: 'apps', kind: 'Deployment', namespace: 'web', name: 'web' },
+    category: 'OutOfSync',
+    sync: 'OutOfSync',
+    health: 'Healthy',
+    hasDesired: true,
+    hasLive: true,
+    drift: lastApplied,
+    partial: false,
+  }
+  const insight = (argoDiffAvailable: boolean): GitOpsInsight => ({
+    summary: { tool: 'argocd', kind: 'Application', namespace: 'argocd', name: 'web', sync: 'OutOfSync', health: 'Healthy' },
+    changes: [change],
+    capabilities: {
+      sync: true, refresh: true, terminate: false, suspend: false, resume: false,
+      syncWithSource: false, selectiveSync: true, rollback: false, argoDiffAvailable,
+    },
+  })
+
+  test("hands the last-applied list to the Argo diff instead of rendering it alongside", () => {
+    let passed: GitOpsDrift | undefined
+    const html = renderToStaticMarkup(
+      <GitOpsChangesView
+        insight={insight(true)}
+        focusKey="Deployment/web/web"
+        renderResourceDiff={(_ref, fallbackDrift) => {
+          passed = fallbackDrift
+          return <div data-testid="argo-diff" />
+        }}
+      />,
+    )
+    expect(html).toContain('argo-diff')
+    expect(html).not.toContain('Field diff')
+    expect(passed).toEqual(lastApplied)
+    // The row's "N diff" badge counts the last-applied list, which can
+    // undercount here, so it isn't shown.
+    expect(html).not.toContain('1 diff')
+  })
+
+  test('without the Argo diff, the row still shows the last-applied list', () => {
+    const html = renderToStaticMarkup(<GitOpsChangesView insight={insight(false)} focusKey="Deployment/web/web" />)
+    expect(html).toContain('Field diff')
+    expect(html).toContain('spec.replicas')
+    expect(html).toContain('1 diff')
+  })
+})

package/src/components/gitops/insights/ArgoResourceDiff.tsx

@@ -2,18 +2,23 @@ import { useState } from 'react'
 import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
 import { FileText, GitCompare, Maximize2, Rows, ShieldOff, X } from 'lucide-react'
-import type { GitOpsResourceDiff } from '../../../types'
+import type { GitOpsDrift, GitOpsResourceDiff } from '../../../types'
 import { DiffLine, hasDiffBodyChange } from '../../shared/UnifiedDiff'
 import { CodeViewer } from '../../ui/CodeViewer'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { YamlDiffEditor } from '../../ui/YamlEditor'
 import { Tooltip } from '../../ui/Tooltip'
+import { DriftPanel } from './DriftPanel'
 
 interface ArgoResourceDiffProps {
   diff?: GitOpsResourceDiff | null
   loading: boolean
   // Server error string ({"error"} body), surfaced inline — not a toast.
   error?: string | null
+  // The row's last-applied field list, shown only when Argo's diff can't be
+  // loaded. A loaded diff carries Argo's own field list, which also covers Git
+  // changes that haven't synced yet.
+  fallbackDrift?: GitOpsDrift | null
 }
 
 // ArgoResourceDiff renders the full Git-rendered desired-vs-live diff for a
@@ -21,7 +26,8 @@ interface ArgoResourceDiffProps {
 // fetch and passes data / loading / error. The inline view is a compact unified
 // preview; the maximize control opens the full view (Diff / Live manifest /
 // Desired manifest, with the Monaco-based YamlDiffEditor powering the Diff tab).
-export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps) {
+// Argo's per-field list sits above the preview, and only when it has entries.
+export function ArgoResourceDiff({ diff, loading, error, fallbackDrift }: ArgoResourceDiffProps) {
   const [maximized, setMaximized] = useState(false)
 
   if (loading) {
@@ -42,19 +48,30 @@ export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps
       </div>
     )
   }
+  const fallbackPanel = fallbackDrift && fallbackDrift.entries.length > 0 ? <DriftPanel drift={fallbackDrift} /> : null
   if (error) {
     return (
-      <div className="rounded-md border border-red-500/40 bg-red-500/5 px-3 py-2 text-xs text-red-700 dark:text-red-400">
-        {error}
+      <div className="space-y-3">
+        {fallbackPanel}
+        <div className="rounded-md border border-red-500/40 bg-red-500/5 px-3 py-2 text-xs text-red-700 dark:text-red-400">
+          {error}
+        </div>
       </div>
     )
   }
-  if (!diff) return null
+  if (!diff) return fallbackPanel
 
   const unchanged = !docsDiffer(diff.desired, diff.live)
+  // Older Radars send null for an empty list.
+  const fieldEntries = diff.fieldEntries ?? []
 
   return (
     <div>
+      {fieldEntries.length > 0 && (
+        <div className="mb-3">
+          <DriftPanel drift={{ entries: fieldEntries, source: diff.source, truncated: diff.fieldEntriesTruncated }} />
+        </div>
+      )}
       <div className="mb-2 flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <GitCompare className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />

package/src/components/gitops/insights/DriftPanel.tsx

@@ -0,0 +1,62 @@
+import type { GitOpsDrift, GitOpsDriftEntry } from '../../../types'
+
+// DriftPanel renders the structured per-field diff. Format mimics a
+// `diff -u` summary: removed paths in red, added in green, changed shown
+// inline as "old → new". Path is monospace; values are JSON-encoded and
+// pre-wrapped so structured values (objects, arrays) render readably.
+export function DriftPanel({ drift }: { drift: GitOpsDrift }) {
+  const sourceLabel = driftSourceLabel(drift.source)
+  return (
+    <div>
+      <div className="mb-2 flex items-baseline justify-between gap-2">
+        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Field diff</h4>
+        <span className="text-[10px] text-theme-text-tertiary">
+          desired (Git) → live ·
+          {drift.truncated ? ' showing first 50 entries' : ` ${drift.entries.length} field${drift.entries.length === 1 ? '' : 's'}`}
+          {sourceLabel && ` · ${sourceLabel}`}
+        </span>
+      </div>
+      <div className="space-y-1 font-mono text-[11px]">
+        {drift.entries.map((entry, i) => (
+          <DriftEntryRow key={`${entry.path}-${i}`} entry={entry} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Provenance label for a Drift's field entries. Only Argo-sourced drift gets an
+// explicit label; the built-in last-applied path renders without one (the
+// "desired (Git) → live" copy already implies it). Unknown sources (a library
+// consumer lagging the backend) fall through to no label rather than surfacing
+// a raw enum string.
+function driftSourceLabel(source: GitOpsDrift['source']): string {
+  return source === 'argocd-api' ? 'via Argo CD API' : ''
+}
+
+function DriftEntryRow({ entry }: { entry: GitOpsDriftEntry }) {
+  if (entry.op === 'removed') {
+    return (
+      <div>
+        <span className="text-red-600 dark:text-red-400">- {entry.path}</span>
+        {entry.desired && <span className="ml-2 text-theme-text-secondary">{entry.desired}</span>}
+      </div>
+    )
+  }
+  if (entry.op === 'added') {
+    return (
+      <div>
+        <span className="text-emerald-700 dark:text-emerald-400">+ {entry.path}</span>
+        {entry.live && <span className="ml-2 text-theme-text-secondary">{entry.live}</span>}
+      </div>
+    )
+  }
+  return (
+    <div>
+      <span className="text-amber-700 dark:text-amber-400">~ {entry.path}</span>
+      <span className="ml-2 text-theme-text-tertiary">{entry.desired}</span>
+      <span className="mx-1 text-theme-text-tertiary">→</span>
+      <span className="text-theme-text-primary">{entry.live}</span>
+    </div>
+  )
+}

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -2,7 +2,7 @@ import { AlertTriangle, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, Circl
 import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
-import type { GitOpsChange, GitOpsHistoryItem, GitOpsInsight, GitOpsInsightRef, GitOpsIssue, GitOpsPlanItem, GitOpsRemediation, GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
+import type { GitOpsChange, GitOpsDrift, GitOpsHistoryItem, GitOpsInsight, GitOpsInsightRef, GitOpsIssue, GitOpsPlanItem, GitOpsRemediation, GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
 import { HealthStatusBadge, SyncStatusBadge } from '../GitOpsStatusBadge'
 import { radarHealthNote } from '../health-provenance'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../../utils/badge-colors'
@@ -30,6 +30,7 @@ import {
   type ResourceSortKey,
   type ResourceStatusFacet,
 } from './insights-helpers'
+import { DriftPanel } from './DriftPanel'
 
 interface GitOpsStatusStripProps {
   insight?: GitOpsInsight | null
@@ -222,7 +223,10 @@ function commitURLForRepo(source: string | undefined, revision: string): string
 // "did everything come up?" summary. All-healthy reads green and explicit
 // ("4/4 resources healthy"); mixed states list the unhealthy buckets so
 // the user sees at a glance what didn't make it.
-function buildHealthSummary(changes: GitOpsChange[]): { text: string; tone: string } | null {
+function buildHealthSummary(allChanges: GitOpsChange[]): { text: string; tone: string } | null {
+  // Dependencies are consumed, not deployed, so they don't count toward
+  // "did everything come up"; a failing one has its own Issue.
+  const changes = allChanges.filter((c) => !c.dependency)
   if (changes.length === 0) return null
   let healthy = 0
   let degraded = 0
@@ -735,7 +739,10 @@ interface GitOpsChangesViewProps {
   // returns the loaded <ArgoResourceDiff/>. When present AND
   // insight.capabilities.argoDiffAvailable, resolvable rows expose a "Full
   // diff" toggle. Library consumers that don't wire it get no such affordance.
-  renderResourceDiff?: (ref: GitOpsInsightRef) => ReactNode
+  // fallbackDrift is the row's last-applied field list. The loaded diff shows
+  // Argo's own field list instead, and falls back to this one when the diff
+  // can't be loaded.
+  renderResourceDiff?: (ref: GitOpsInsightRef, fallbackDrift?: GitOpsDrift) => ReactNode
   // Opens the global Settings dialog. Backs the "Connect Argo CD" hint shown
   // when the root is an Argo Application without the diff integration.
   onOpenSettings?: () => void
@@ -1005,7 +1012,7 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
             )}
           </div>
         )}
-        {totalCount > 0 && isArgoRoot && !insight.capabilities?.argoDiffAvailable && onOpenSettings && (
+        {totalCount > 0 && isArgoRoot && !insight.capabilities?.argoDiffAvailable && !insight.capabilities?.argoConnecting && onOpenSettings && (
           <div className="border-b border-theme-border bg-theme-base/40 px-4 py-2 text-[11px] text-theme-text-tertiary">
             {insight.capabilities?.argoConfigured ? (
               <>
@@ -1330,7 +1337,7 @@ function ChangeRow({
   // When true, the expanded panel offers a "Full diff" toggle that mounts the
   // host-wired Argo CD diff loader for this resource.
   canFullDiff: boolean
-  renderResourceDiff?: (ref: GitOpsInsightRef) => ReactNode
+  renderResourceDiff?: (ref: GitOpsInsightRef, fallbackDrift?: GitOpsDrift) => ReactNode
   onOpenResource?: (ref: GitOpsChange['ref']) => void
   onSyncResource?: (ref: GitOpsChange['ref']) => void
   syncResourceDisabledReason?: string
@@ -1422,8 +1429,11 @@ function ChangeRow({
             )}
             {/* Detail badges: surface that there's something to see in
                 the expanded panel. Without these the user has no signal
-                that clicking will reveal anything useful. */}
-            {driftEntries.length > 0 && (
+                that clicking will reveal anything useful. The field count
+                comes from the last-applied list, which can undercount on an
+                Argo row (Argo's own list loads only on expand), so it is
+                left off there. The OutOfSync badge already marks the row. */}
+            {!canFullDiff && driftEntries.length > 0 && (
               <Tooltip content={`${driftEntries.length} field${driftEntries.length === 1 ? '' : 's'} differ from Git`} delay={200} wrapperClassName="shrink-0">
                 <span className="rounded border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-400">
                   {driftEntries.length} diff
@@ -1523,15 +1533,19 @@ function ChangeRow({
       {expandable && (
         <Collapse open={expanded} mountLazily>
           <div className="border-t border-theme-border bg-theme-base/40 px-4 py-3">
-            {driftEntries.length > 0 && <DriftPanel drift={change.drift!} />}
+            {/* The last-applied list only knows what was applied at the last
+                sync, so it misses a Git change that hasn't synced yet. When
+                Argo's diff can load, it owns the field list and shows this
+                one only if that load fails. */}
+            {!canFullDiff && driftEntries.length > 0 && <DriftPanel drift={change.drift!} />}
             {events.length > 0 && <RecentEventsPanel events={events} />}
             {/* Expanding a row IS the request to see its diff — render it inline
                 rather than behind a second "Full diff" click. The capability is
                 already gated on a live Argo connection, so this only mounts (and
                 fetches) when the diff can actually be served. */}
             {canFullDiff && (
-              <div className={clsx((driftEntries.length > 0 || events.length > 0) && 'mt-3')}>
-                {renderResourceDiff?.(change.ref)}
+              <div className={clsx(events.length > 0 && 'mt-3')}>
+                {renderResourceDiff?.(change.ref, change.drift)}
               </div>
             )}
           </div>
@@ -1541,67 +1555,6 @@ function ChangeRow({
   )
 }
 
-// DriftPanel renders the structured per-field diff. Format mimics a
-// `diff -u` summary: removed paths in red, added in green, changed shown
-// inline as "old → new". Path is monospace; values are JSON-encoded and
-// pre-wrapped so structured values (objects, arrays) render readably.
-function DriftPanel({ drift }: { drift: NonNullable<GitOpsChange['drift']> }) {
-  const sourceLabel = driftSourceLabel(drift.source)
-  return (
-    <div>
-      <div className="mb-2 flex items-baseline justify-between gap-2">
-        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Field diff</h4>
-        <span className="text-[10px] text-theme-text-tertiary">
-          desired (Git) → live ·
-          {drift.truncated ? ' showing first 50 entries' : ` ${drift.entries.length} field${drift.entries.length === 1 ? '' : 's'}`}
-          {sourceLabel && ` · ${sourceLabel}`}
-        </span>
-      </div>
-      <div className="space-y-1 font-mono text-[11px]">
-        {drift.entries.map((entry, i) => (
-          <DriftEntryRow key={`${entry.path}-${i}`} entry={entry} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// Provenance label for a Drift's field entries. Only Argo-sourced drift gets an
-// explicit label; the built-in last-applied path renders without one (the
-// "desired (Git) → live" copy already implies it). Unknown sources (a library
-// consumer lagging the backend) fall through to no label rather than surfacing
-// a raw enum string.
-function driftSourceLabel(source: NonNullable<GitOpsChange['drift']>['source']): string {
-  return source === 'argocd-api' ? 'via Argo CD API' : ''
-}
-
-function DriftEntryRow({ entry }: { entry: NonNullable<GitOpsChange['drift']>['entries'][number] }) {
-  if (entry.op === 'removed') {
-    return (
-      <div>
-        <span className="text-red-600 dark:text-red-400">- {entry.path}</span>
-        {entry.desired && <span className="ml-2 text-theme-text-secondary">{entry.desired}</span>}
-      </div>
-    )
-  }
-  if (entry.op === 'added') {
-    return (
-      <div>
-        <span className="text-emerald-700 dark:text-emerald-400">+ {entry.path}</span>
-        {entry.live && <span className="ml-2 text-theme-text-secondary">{entry.live}</span>}
-      </div>
-    )
-  }
-  return (
-    <div>
-      <span className="text-amber-700 dark:text-amber-400">~ {entry.path}</span>
-      <span className="ml-2 text-theme-text-tertiary">{entry.desired}</span>
-      <span className="mx-1 text-theme-text-tertiary">→</span>
-      <span className="text-theme-text-primary">{entry.live}</span>
-    </div>
-  )
-}
-
 // RecentEventsPanel surfaces the last few events involving this resource.
 // Warning events get a red bar so the eye lands on them; normals are
 // muted. Aggregation count (when present) is a critical signal — "this

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { getSubtitle } from './GitOpsTreeGraph'
+import { getSubtitle, nodeCause } from './GitOpsTreeGraph'
 import type { GitOpsTreeNode } from '../../../types'
 
 function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
@@ -90,3 +90,28 @@ 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 CAUSE = 'Back-off restarting failed container main'
+
+  it('shows the cause on a node the controller calls Degraded', () => {
+    expect(nodeCause(node({ health: 'Degraded', healthSource: 'controller', topologyStatus: 'unhealthy' }), CAUSE)).toBe(CAUSE)
+  })
+
+  it('hides it 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' }), CAUSE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'radar', topologyStatus: 'degraded' }), CAUSE)).toBeUndefined()
+  })
+
+  it('hides it on a Suspended node, even when an issue matched it', () => {
+    expect(nodeCause(node({ health: 'Suspended', healthSource: 'controller', topologyStatus: 'degraded' }), CAUSE)).toBeUndefined()
+  })
+
+  it('never shows it on a healthy node', () => {
+    expect(nodeCause(node({ health: 'Healthy', healthSource: 'controller', topologyStatus: 'healthy' }), CAUSE)).toBeUndefined()
+  })
+})

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

@@ -29,6 +29,7 @@ import { servicePortsTooltip, type ServicePortEntry } from '../../topology/K8sRe
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
+import { rankTree, renderedEdge, shortcutEdges, upstreamClosure, upstreamEdges } from './layout'
 
 export type GitOpsTreePreset = 'full' | 'compact' | 'workloads' | 'app'
 
@@ -231,7 +232,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.
@@ -333,16 +334,10 @@ function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePrese
   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 +354,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 +388,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 +434,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 +502,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,12 +528,23 @@ 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
@@ -587,7 +561,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   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
@@ -771,6 +745,15 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   return chips
 }
 
+// nodeCause returns the matched issue's cause when the node's hover should
+// show it: only on a node that is actually failing (Degraded or Missing,
+// topology 'unhealthy'). 'degraded' is also where Progressing and Suspended
+// land, and a cause there reads as "this is broken" on a rollout in flight
+// or a deliberate pause.
+export function nodeCause(node: GitOpsTreeNode, cause?: string): string | undefined {
+  return normalizeHealth(node.topologyStatus) === 'unhealthy' ? cause : undefined
+}
+
 // 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