@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/gitops/GitOpsTableView.tsx

@@ -40,6 +40,7 @@ import { isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
+import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format'
 
 // =============================================================================
 // GitOpsTableView — the canonical GitOps fleet list (Argo + Flux).
@@ -1373,8 +1374,8 @@ function GitOpsTable({
               )}
               <TableCell>
                 {row.terminating
-                  ? <span className="text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</span>
-                  : formatRelativeAge(row.lastSync || row.createdAt)}
+                  ? <span className="text-orange-400/80">{pendingFor(row.terminationStartedAt)}</span>
+                  : row.lastSync ? formatRelativeAgeTime(row.lastSync, '') : row.createdAt ? `Created ${formatRelativeAgeTime(row.createdAt, '')}` : ''}
               </TableCell>
               {showActions && onRowAction && (
                 <td
@@ -1603,9 +1604,9 @@ function GitOpsTile({
             <div className="truncate font-mono text-[11px] text-theme-text-tertiary">{shortRevision(revision)}</div>
           )}
           {row.terminating ? (
-            <div className="font-medium text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</div>
+            <div className="font-medium text-orange-400/80">{pendingFor(row.terminationStartedAt)}</div>
           ) : (
-            lastSyncRaw && <div className={clsx('font-medium', recencyClass)}>{formatRelativeAge(lastSyncRaw)}</div>
+            lastSyncRaw && <div className={clsx('font-medium', recencyClass)}>{formatRelativeAgeTime(lastSyncRaw, '')}</div>
           )}
         </div>
         {(dest || ns || row.project) && (
@@ -1926,26 +1927,10 @@ function compactClusterURL(dest: string): string {
     .replace(/^kubernetes\.default\.svc(:\d+)?\/?$/, 'in-cluster')
 }
 
-// formatRelativeAge — inline relative-time formatter. Returns "" for unparseable
-// inputs so callers can treat empty as "no timestamp" and skip the time
-// cell gracefully.
-function formatRelativeAge(rfc3339: string): string {
-  if (!rfc3339) return ''
-  const time = Date.parse(rfc3339)
-  if (!Number.isFinite(time)) return ''
-  const diffMs = Date.now() - time
-  const s = Math.max(0, Math.floor(diffMs / 1000))
-  if (s < 60) return `${s}s ago`
-  const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
-  const h = Math.floor(m / 60)
-  if (h < 24) return `${h}h ago`
-  const d = Math.floor(h / 24)
-  if (d < 30) return `${d}d ago`
-  const mo = Math.floor(d / 30)
-  if (mo < 12) return `${mo}mo ago`
-  const y = Math.floor(d / 365)
-  return `${y}y ago`
+// How long deletion has been pending, not when it started.
+function pendingFor(startedAt?: string): string {
+  const age = formatCompactAge(startedAt)
+  return age ? `Pending for ${age}` : 'Pending'
 }
 
 // =============================================================================

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

@@ -82,7 +82,7 @@ export function describeGitOpsTerminating(summary?: {
   finalizers?: string[]
 }): { chipTooltip: string; actionDisabledTooltip: string } {
   const ageText = formatCompactAge(summary?.terminationStartedAt)
-  const ageSuffix = ageText ? ` ${ageText} ago` : ''
+  const ageSuffix = ageText ? ` for ${ageText}` : ''
   const finalizers = summary?.finalizers ?? []
   const finSuffix = finalizers.length > 0 ? ` Finalizers: ${finalizers.join(', ')}.` : ''
   const ageInline = ageText ? ` (${ageText})` : ''

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
@@ -72,7 +73,7 @@ export function GitOpsStatusStrip({ insight, loading, renderRevisionMeta }: GitO
   const revision = summary.lastRevision || summary.targetRevision || ''
   const shortRev = shortRevisionForCommit(revision)
   const commitUrl = revision ? commitURLForRepo(summary.source, revision) : null
-  const reconcileAge = formatRelative(summary.lastReconcile)
+  const reconcileAge = formatRelativeAgeTime(summary.lastReconcile)
   const healthSummary = buildHealthSummary(insight.changes ?? [])
   // STUCK belongs with the operation chip — it's a property of the same
   // state ("failed AND won't self-recover"). Co-locating FAILED + STUCK ·
@@ -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
@@ -257,7 +261,7 @@ function buildHealthSummary(changes: GitOpsChange[]): { text: string; tone: stri
 // disclosure — still available for forensics but not noise during deletion.
 function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsight['summary']> }) {
   const [showHistorical, setShowHistorical] = useState(false)
-  const pending = formatRelative(summary.terminationStartedAt) || 'recently'
+  const pending = formatRelativeAgeTime(summary.terminationStartedAt) || 'recently'
   const finalizers = summary.finalizers ?? []
   return (
     <div className="border-b border-orange-500/20 bg-orange-500/[0.04] px-4 py-2">
@@ -282,7 +286,7 @@ function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsigh
           {(summary.lastRevision || summary.targetRevision) && (
             <MetaFact label="Revision" value={summary.lastRevision || summary.targetRevision || '-'} mono />
           )}
-          {summary.lastReconcile && <MetaFact label="Last reconcile" value={formatRelative(summary.lastReconcile)} />}
+          {summary.lastReconcile && <MetaFact label="Last reconcile" value={formatRelativeAgeTime(summary.lastReconcile)} />}
           {summary.autoSyncMode && <MetaFact label="Sync mode" value={summary.autoSyncMode} />}
         </div>
       </Collapse>
@@ -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
@@ -1628,7 +1581,7 @@ function RecentEventsPanel({ events }: { events: NonNullable<GitOpsChange['recen
                 {e.count && e.count > 1 && (
                   <span className="text-[10px] text-theme-text-tertiary">×{e.count}</span>
                 )}
-                <span className="ml-auto text-[10px] text-theme-text-tertiary">{formatRelativeTime(e.lastTimestamp)}</span>
+                <span className="ml-auto text-[10px] text-theme-text-tertiary">{formatRelativeAgeTime(e.lastTimestamp, '')}</span>
               </div>
               <p className="mt-0.5 text-theme-text-secondary">{e.message}</p>
             </div>
@@ -1639,10 +1592,6 @@ function RecentEventsPanel({ events }: { events: NonNullable<GitOpsChange['recen
   )
 }
 
-function formatRelativeTime(value: string): string {
-  return formatRelativeAgeTime(value, '')
-}
-
 interface GitOpsActivityInsightViewProps {
   insight?: GitOpsInsight | null
   error?: Error | null
@@ -1729,7 +1678,7 @@ function HistoryRows({
               <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                 <span className="font-mono text-xs text-theme-text-primary">{item.revision || item.phase || '-'}</span>
                 <PhaseChip phase={item.phase} message={item.message} />
-                <span className="text-[11px] text-theme-text-tertiary">{formatRelative(item.deployedAt)}</span>
+                <span className="text-[11px] text-theme-text-tertiary">{formatRelativeAgeTime(item.deployedAt)}</span>
                 {item.initiatedBy && (
                   <span className="text-[11px] text-theme-text-tertiary">by {item.initiatedBy}</span>
                 )}
@@ -1831,6 +1780,3 @@ function InsightErrorState({ error }: { error: Error }) {
   )
 }
 
-function formatRelative(value?: string) {
-  return formatRelativeAgeTime(value)
-}

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()
+  })
+})