@skyhook-io/k8s-ui 1.8.11 → 1.8.13

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

@@ -1,4 +1,4 @@
-import { AlertTriangle, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, CircleAlert, Clock3, GitBranch, GitCommit, Info, Loader2, Plus, Trash2 } from 'lucide-react'
+import { AlertTriangle, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, CircleAlert, Clock3, GitBranch, GitCommit, Info, Loader2, Plus, RefreshCw, Trash2 } from 'lucide-react'
 import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
@@ -20,6 +20,7 @@ import {
   entryTone,
   gitopsToSeverity,
   healthStatusRank,
+  isArgoResourceSyncEligible,
   messageToPhase,
   normalizeHealthStatus,
   normalizeSyncStatus,
@@ -32,6 +33,10 @@ import {
 interface GitOpsStatusStripProps {
   insight?: GitOpsInsight | null
   loading?: boolean
+  // Optional host slot: given the latest revision, render inline Git commit
+  // metadata (author, signature) next to the revision SHA. The host wires this
+  // to a data loader; when absent, only the SHA is shown.
+  renderRevisionMeta?: (revision: string) => ReactNode
 }
 
 // Status strip carries the operation chip (when a sync is in flight or
@@ -51,7 +56,7 @@ interface GitOpsStatusStripProps {
 //
 // Health and Sync badges live next to the title in the page header —
 // pair them there with identity, not here.
-export function GitOpsStatusStrip({ insight, loading }: GitOpsStatusStripProps) {
+export function GitOpsStatusStrip({ insight, loading, renderRevisionMeta }: GitOpsStatusStripProps) {
   const summary = insight?.summary
   if (loading) {
     return <div className="h-8 animate-pulse border-b border-theme-border bg-theme-base" />
@@ -135,6 +140,7 @@ export function GitOpsStatusStrip({ insight, loading }: GitOpsStatusStripProps)
                 </Tooltip>
               )}
               {reconcileAge && <span className="text-theme-text-tertiary">· {reconcileAge}</span>}
+              {revision && renderRevisionMeta?.(revision)}
             </span>
           )}
           {!shortRev && reconcileAge && <MetaFact label="Last reconcile" value={reconcileAge} />}
@@ -223,11 +229,13 @@ function buildHealthSummary(changes: GitOpsChange[]): { text: string; tone: stri
   let outOfSync = 0
   let other = 0
   for (const c of changes) {
-    const cat = c.category
-    if (cat === 'Synced' || c.health === 'Healthy') healthy++
-    else if (cat === 'Degraded') degraded++
-    else if (cat === 'Missing') missing++
-    else if (cat === 'OutOfSync') outOfSync++
+    // Count HEALTH, not sync — a Synced resource can still be Degraded, so check
+    // degraded/missing FIRST and never let a Synced sync-state mask it. A Synced
+    // resource with no assessed health (ConfigMaps etc.) still reads as fine.
+    if (c.health === 'Degraded' || c.category === 'Degraded') degraded++
+    else if (c.health === 'Missing' || c.category === 'Missing') missing++
+    else if (c.health === 'Healthy' || c.category === 'Synced') healthy++
+    else if (c.category === 'OutOfSync') outOfSync++
     else other++
   }
   const total = changes.length
@@ -283,7 +291,7 @@ function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsigh
 
 function isInFlightPhase(phase: string): boolean {
   const p = phase.toLowerCase()
-  return p.includes('running') || p.includes('progress') || p.includes('reconcil')
+  return p.includes('running') || p.includes('terminat') || p.includes('progress') || p.includes('reconcil')
 }
 
 // Show the operation chip only for phases the operator needs to *act on*.
@@ -703,6 +711,8 @@ interface GitOpsChangesViewProps {
   insight?: GitOpsInsight | null
   error?: Error | null
   onOpenResource?: (ref: GitOpsChange['ref']) => void
+  onSyncResource?: (ref: GitOpsChange['ref']) => void
+  syncResourceDisabledReason?: string
   // When set, the matching change row scrolls into view and gets a transient
   // highlight ring. Used when the user clicks "View →" on an issue alert in
   // the band above. Key shape: `${kind}/${namespace||''}/${name}` (group is
@@ -714,6 +724,15 @@ interface GitOpsChangesViewProps {
   // Argo's default list-view behavior. Default mode still shows declared
   // resources only — the diagnostic data (drift, events) lives there.
   tree?: GitOpsResourceTree | null
+  // Host-wired loader for the full Git-rendered desired-vs-live diff of a
+  // single managed resource (Argo CD only). Data fetching lives in web/; this
+  // 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
+  // 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
 }
 
 // Status facets for the Resources list. OutOfSync is a sync-status concern
@@ -724,7 +743,7 @@ const STATUS_FACETS: { key: ResourceStatusFacet; label: string; tone: FilterPill
   { key: 'missing', label: 'Missing', tone: 'danger' },
 ]
 
-export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tree }: GitOpsChangesViewProps) {
+export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResource, syncResourceDisabledReason, focusKey, tree, renderResourceDiff, onOpenSettings }: GitOpsChangesViewProps) {
   // "All resources" toggle: when on, render generated descendants alongside
   // the controller's declared inventory. Argo's UI defaults to "all" — we
   // default to "declared" because the diagnostic data (drift, events) lives
@@ -741,6 +760,9 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
   const [statusFilters, setStatusFilters] = useState<Set<ResourceStatusFacet>>(new Set())
   const [sort, setSort] = useState<{ key: ResourceSortKey; dir: SortDir }>({ key: 'order', dir: 'asc' })
   const changes = insight?.changes ?? []
+  // Keep object identity here: tree extras are newly allocated, while ordered
+  // controller changes retain their original references.
+  const declaredChanges = new Set(changes)
   const plan = insight?.plan ?? []
   // Synthesize Change rows for generated tree nodes that aren't already in
   // the declared inventory. These rows carry less diagnostic data — no
@@ -823,6 +845,23 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
   // doesn't exist), but we CAN point at where they're declared in Git —
   // which is the most useful thing to do when there's no drawer to open.
   const sourceTreeURL = gitTreeURL(insight.summary.source, insight.summary.lastRevision || insight.summary.targetRevision || '')
+  // Comparison-coverage disclosure (Argo only). spec.ignoreDifferences hides
+  // fields from drift comparison; surfacing the count keeps the drift view
+  // honest about what it's NOT checking. Neutral note, not an alarm.
+  const ignoredDiffs = insight.summary.ignoredDifferences
+  const isArgoRoot = insight.summary.tool === 'argocd' && insight.summary.kind === 'Application'
+  // Full-diff affordance is offered only when the backend reports the Argo CD
+  // integration is connected for this app AND the host wired the loader.
+  const argoDiffAvailable = isArgoRoot && !!insight.capabilities?.argoDiffAvailable && !!renderResourceDiff
+  // When Argo can't build the desired state (ComparisonError — unreachable repo,
+  // missing revision, broken spec), it can't compare live-vs-Git for ANY
+  // resource, so every row's sync arrives Unknown. Those per-row Unknowns are
+  // all shadows of the one app-level failure already surfaced in the issues
+  // band above; rendering them as N alarming pills makes one problem look like
+  // many. When the app-level sync is Unknown, quiet the derivative per-row sync
+  // to a muted placeholder and explain the cause once. Health stays — it's a
+  // live signal that's still knowable and still worth reading.
+  const syncUnavailable = isArgoRoot && (insight.summary.sync ?? '').toLowerCase() === 'unknown'
   const toggleFacet = (facet: ResourceStatusFacet) => {
     setStatusFilters((prev) => {
       const next = new Set(prev)
@@ -887,6 +926,17 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
             </div>
           )}
         </div>
+        {syncUnavailable && totalCount > 0 && (
+          <div className="flex items-start gap-2 border-b border-theme-border bg-theme-base/40 px-4 py-2 text-xs text-theme-text-secondary">
+            <Info className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+            <span>
+              Argo CD hasn't compared this app against Git yet, so per-resource
+              <span className="font-medium text-theme-text-primary"> sync</span> status is unavailable
+              (a first refresh may still be in flight; if an error is shown above, resolve it to restore comparison).
+              <span className="font-medium text-theme-text-primary"> Health</span> below is still live.
+            </span>
+          </div>
+        )}
         {/* Filter/sort toolbar. The status facets are the primary way to
             answer "which resources are the problem?" now that the issues band
             no longer restates every OutOfSync resource above. */}
@@ -931,8 +981,11 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
         {/* Honest disclaimer about diff scope. Neither Argo nor Flux exposes
             per-resource desired-vs-live diffs on the CRD — they're computed
             on demand by their respective servers/CLIs, which Radar doesn't
-            call. */}
-        {totalCount > 0 && (
+            call. Suppressed for an Argo app that shows the connect/reconnect bar
+            below (which points at Settings), so the two don't stack with subtly
+            different advice — the CLI fallback stays for Flux and for consumers
+            that don't wire Settings. */}
+        {totalCount > 0 && !argoDiffAvailable && !(isArgoRoot && !!onOpenSettings) && (
           <div className="border-b border-theme-border bg-theme-base/40 px-4 py-2 text-[11px] text-theme-text-tertiary">
             Radar reads each resource's drift status from the controller. For a line-by-line diff, {insight.summary.tool === 'fluxcd' ? (
               insight.summary.kind === 'HelmRelease' ? (
@@ -945,6 +998,56 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
             )}
           </div>
         )}
+        {totalCount > 0 && isArgoRoot && !insight.capabilities?.argoDiffAvailable && 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 ? (
+              <>
+                Argo CD's full Git-rendered diff isn't available for this app (connection down or token not authorized).{' '}
+                <button type="button" onClick={onOpenSettings} className="font-medium text-accent-text hover:underline">
+                  Check Argo CD in Settings
+                </button>.
+              </>
+            ) : (
+              <>
+                <button type="button" onClick={onOpenSettings} className="font-medium text-accent-text hover:underline">
+                  Connect Argo CD
+                </button>{' '}
+                for the full Git-rendered diff.
+              </>
+            )}
+          </div>
+        )}
+        {ignoredDiffs && ignoredDiffs.ruleCount > 0 && (
+          <div className="flex items-center gap-1.5 border-b border-theme-border bg-theme-base/40 px-4 py-2 text-[11px] text-theme-text-tertiary">
+            <span>
+              Some fields are intentionally excluded from drift comparison, so a resource can read as in sync
+              even if those fields differ.
+            </span>
+            <Tooltip
+              content={
+                <div className="max-w-[46ch] space-y-1 text-left">
+                  <div>
+                    {ignoredDiffs.ruleCount} exclusion {ignoredDiffs.ruleCount === 1 ? 'rule' : 'rules'} configured
+                    {ignoredDiffs.kinds.length > 0 && <> on {ignoredDiffs.kinds.join(', ')}</>} (Argo CD{' '}
+                    <code className="inline-code">spec.ignoreDifferences</code>).
+                  </div>
+                  {ignoredDiffs.unsupportedRuleCount > 0 && (
+                    <div>
+                      {ignoredDiffs.unsupportedRuleCount} of them use jq expressions or managed-fields managers,
+                      which Radar doesn&apos;t evaluate — so a few fields Argo hides may still appear here.
+                    </div>
+                  )}
+                </div>
+              }
+              delay={200}
+            >
+              <span className="inline-flex cursor-help items-center text-theme-text-tertiary hover:text-theme-text-secondary">
+                <Info className="h-3 w-3" />
+                <span className="ml-1 underline decoration-dotted underline-offset-2">details</span>
+              </span>
+            </Tooltip>
+          </div>
+        )}
         {totalCount === 0 ? (
           <div className="p-4 text-sm text-theme-text-secondary">No managed resources reported by the GitOps controller.</div>
         ) : displayChanges.length === 0 ? (
@@ -984,6 +1087,13 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
                   (change.drift && change.drift.entries.length > 0) ||
                   (change.recentEvents && change.recentEvents.length > 0)
                 )
+                // Change rows come from the Application's status.resources, so
+                // they are in the Argo managed set by construction — the diff
+                // endpoint can serve every one (a Missing resource just has an
+                // empty live side). NOT gated on change.hasDesired/partial:
+                // those describe Radar's LOCAL last-applied view, and the Argo
+                // API diff exists precisely for the rows where it's absent.
+                const canFullDiff = argoDiffAvailable && !!change.ref.kind && !!change.ref.name
                 // Render a wave separator above this row when the wave value
                 // changed from the previous one. waveSet=false rows under a
                 // waved plan get a "Default wave" header — matches how Argo's
@@ -1002,10 +1112,16 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
                       change={change}
                       hook={hook}
                       explanation={explanation}
+                      syncUnavailable={syncUnavailable}
                       focused={focused}
                       autoExpand={focused}
                       hasInlineDetail={hasInlineDetail}
+                      canFullDiff={canFullDiff}
+                      renderResourceDiff={renderResourceDiff}
                       onOpenResource={onOpenResource}
+                      onSyncResource={onSyncResource}
+                      syncResourceDisabledReason={syncResourceDisabledReason}
+                      declared={declaredChanges.has(change)}
                       sourceTreeURL={sourceTreeURL}
                       registerRef={(el) => {
                         if (el) {
@@ -1174,10 +1290,16 @@ function ChangeRow({
   change,
   hook,
   explanation,
+  syncUnavailable,
   focused,
   autoExpand,
   hasInlineDetail,
+  canFullDiff,
+  renderResourceDiff,
   onOpenResource,
+  onSyncResource,
+  syncResourceDisabledReason,
+  declared,
   sourceTreeURL,
   registerRef,
 }: {
@@ -1187,10 +1309,20 @@ function ChangeRow({
   // resources that already ran their hook.
   hook: string | undefined
   explanation: string
+  // True when the parent app can't compare against Git at all (ComparisonError):
+  // this row's Unknown sync is derivative, so render it muted instead of loud.
+  syncUnavailable: boolean
   focused: boolean
   autoExpand: boolean
   hasInlineDetail: boolean
+  // 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
   onOpenResource?: (ref: GitOpsChange['ref']) => void
+  onSyncResource?: (ref: GitOpsChange['ref']) => void
+  syncResourceDisabledReason?: string
+  declared: boolean
   // Constructed URL pointing at the source directory in the remote Git
   // host (github / gitlab / bitbucket). Used as the "where this would be
   // declared" affordance on Missing rows, since opening the drawer for a
@@ -1198,12 +1330,15 @@ function ChangeRow({
   sourceTreeURL?: string | null
   registerRef: (el: HTMLDivElement | null) => void
 }) {
-  const [expanded, setExpanded] = useState(autoExpand && hasInlineDetail)
+  // A row expands when it has inline diagnostics (drift/events) or can load a
+  // full Argo CD diff — both live in the same disclosure panel.
+  const expandable = hasInlineDetail || canFullDiff
+  const [expanded, setExpanded] = useState(autoExpand && expandable)
   // Auto-expand when an issue alert deep-links to this row — the user just
   // clicked the issue, so they want to see the detail immediately.
   useEffect(() => {
-    if (autoExpand && hasInlineDetail) setExpanded(true)
-  }, [autoExpand, hasInlineDetail])
+    if (autoExpand && expandable) setExpanded(true)
+  }, [autoExpand, expandable])
   const driftEntries = change.drift?.entries ?? []
   const events = change.recentEvents ?? []
   // Missing resources have no live state to drill into — opening the drawer
@@ -1213,17 +1348,29 @@ function ChangeRow({
   // declared source instead of a non-existent live object.
   const isAbsent = change.health === 'Missing' && !change.hasLive
   const handleRowClick = () => {
-    if (hasInlineDetail) {
+    if (expandable) {
       setExpanded((v) => !v)
     } else if (!isAbsent && onOpenResource) {
       onOpenResource(change.ref)
     }
   }
-  // Row stays click-affordant when there's inline detail to expand OR a
+  // Row stays click-affordant when there's a disclosure panel to expand OR a
   // live resource to drill into. Missing rows without inline detail are
   // intentionally non-interactive — there's nowhere useful to go.
-  const rowInteractive = hasInlineDetail || (!isAbsent && !!onOpenResource)
+  const rowInteractive = expandable || (!isAbsent && !!onOpenResource)
   const hookLabel = change.hookPhase || hook
+  const canSyncResource = !!onSyncResource && isArgoResourceSyncEligible(change, declared, hookLabel)
+  const syncResourceButton = canSyncResource ? (
+    <button
+      type="button"
+      onClick={() => onSyncResource(change.ref)}
+      disabled={!!syncResourceDisabledReason}
+      className="inline-flex w-full items-center justify-center gap-1.5 rounded border border-theme-border bg-theme-base px-2 py-1 text-[11px] font-medium text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      <RefreshCw className="h-3 w-3" />
+      Sync resource
+    </button>
+  ) : null
   return (
     <div
       ref={registerRef}
@@ -1247,7 +1394,7 @@ function ChangeRow({
           )}
         >
           <div className="flex items-baseline gap-2">
-            {hasInlineDetail ? (
+            {expandable ? (
               <CollapseChevron open={expanded} className="h-3.5 w-3.5 self-center" />
             ) : (
               <span aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
@@ -1297,9 +1444,22 @@ function ChangeRow({
             <div className="ml-[18px] mt-1 text-xs text-theme-text-tertiary">{explanation}</div>
           )}
         </button>
-        <div className="self-start"><SyncStatusBadge sync={normalizeSyncStatus(change.sync ?? change.category)} /></div>
-        <div className="self-start"><HealthStatusBadge health={normalizeHealthStatus(change.health)} /></div>
         <div className="self-start">
+          {syncUnavailable && normalizeSyncStatus(change.sync ?? change.category) === 'Unknown' ? (
+            <Tooltip content="Sync unavailable — Argo CD hasn't compared this app against Git yet." delay={200} wrapperClassName="inline-flex">
+              <span className="cursor-help select-none px-1 text-theme-text-tertiary" aria-label="Sync status unavailable">—</span>
+            </Tooltip>
+          ) : (
+            <SyncStatusBadge sync={normalizeSyncStatus(change.sync ?? change.category)} />
+          )}
+        </div>
+        <div className="self-start"><HealthStatusBadge health={normalizeHealthStatus(change.health)} /></div>
+        <div className="self-start space-y-1.5">
+          {syncResourceButton && syncResourceDisabledReason ? (
+            <Tooltip content={syncResourceDisabledReason} delay={200} wrapperClassName="block">
+              {syncResourceButton}
+            </Tooltip>
+          ) : syncResourceButton}
           {/* Three affordance states:
               - Live resource (not Missing): "Open <kind> <name> →" opens the
                 K8s drawer.
@@ -1338,11 +1498,20 @@ function ChangeRow({
           )}
         </div>
       </div>
-      {hasInlineDetail && (
+      {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!} />}
             {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>
+            )}
           </div>
         </Collapse>
       )}
@@ -1355,6 +1524,7 @@ function ChangeRow({
 // 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">
@@ -1362,6 +1532,7 @@ function DriftPanel({ drift }: { drift: NonNullable<GitOpsChange['drift']> }) {
         <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]">
@@ -1373,6 +1544,15 @@ function DriftPanel({ drift }: { drift: NonNullable<GitOpsChange['drift']> }) {
   )
 }
 
+// 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 (

package/src/components/gitops/insights/index.ts

@@ -4,3 +4,4 @@ export {
   GitOpsIssuesBand,
   GitOpsStatusStrip,
 } from './GitOpsInsightViews'
+export { ArgoResourceDiff } from './ArgoResourceDiff'

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

@@ -8,6 +8,7 @@ import {
   entryTone,
   gitopsToSeverity,
   healthStatusRank,
+  isArgoResourceSyncEligible,
   messageToPhase,
   phaseToTone,
   resourceStatusCounts,
@@ -171,6 +172,21 @@ describe('resourceStatusCounts', () => {
   })
 })
 
+describe('isArgoResourceSyncEligible', () => {
+  const outOfSync = change({ ref: { group: 'apps', kind: 'Deployment', namespace: 'demo', name: 'web' }, sync: 'OutOfSync' })
+
+  it('allows declared OutOfSync and Missing resources', () => {
+    expect(isArgoResourceSyncEligible(outOfSync, true)).toBe(true)
+    expect(isArgoResourceSyncEligible(change({ ref: { kind: 'Service', name: 'missing' }, health: 'Missing' }), true)).toBe(true)
+  })
+
+  it('excludes generated, hook, and already-synced resources', () => {
+    expect(isArgoResourceSyncEligible(outOfSync, false)).toBe(false)
+    expect(isArgoResourceSyncEligible(outOfSync, true, 'PreSync')).toBe(false)
+    expect(isArgoResourceSyncEligible(change({ ref: { kind: 'Service', name: 'ready' }, sync: 'Synced', health: 'Healthy' }), true)).toBe(false)
+  })
+})
+
 describe('syncStatusRank / healthStatusRank', () => {
   it('ascending sync rank surfaces OutOfSync before Synced', () => {
     expect(syncStatusRank('OutOfSync')).toBeLessThan(syncStatusRank('Synced'))

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

@@ -46,6 +46,11 @@ export function changeHealth(change: GitOpsChange): GitOpsHealthStatus {
   return normalizeHealthStatus(change.health)
 }
 
+export function isArgoResourceSyncEligible(change: GitOpsChange, declared: boolean, hook?: string): boolean {
+  if (!declared || hook || change.hookPhase) return false
+  return changeSync(change) === 'OutOfSync' || changeHealth(change) === 'Missing' || change.category === 'Missing'
+}
+
 // Rank sync/health so an ascending sort surfaces the states an operator cares
 // about first (drift, then failures). Mirrors the GitOps application table's
 // syncRank/healthRank so the two tables order status the same way.

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

@@ -658,6 +658,11 @@ function isNodeTerminating(node: GitOpsTreeNode): boolean {
 // treatment around them (tool icon overlay, "→" affordance, stronger
 // border) advertises that they're not just leaves.
 function gitopsToolForNode(node: GitOpsTreeNode): 'argocd' | 'fluxcd' | undefined {
+  // The root node IS the resource this detail page is already showing — it is
+  // the subject, not a portal to another page. Never give it the portal
+  // treatment (tool badge, chevron, click-to-dive ring): clicking the thing
+  // you're already viewing would just stack an identical page onto itself.
+  if (node.role === 'root') return undefined
   const t = node.data?.gitopsTool
   if (t === 'argocd' || t === 'fluxcd') return t
   return undefined

package/src/components/issues/IssuesView.tsx

@@ -132,6 +132,10 @@ export interface IssueRowProps {
   as?: 'li' | 'div';
   className?: string;
   dimmed?: boolean;
+  /** Suppress the "Subject" deep-link in the expanded body — set by hosts that
+   *  embed the row under the very resource that IS the subject (the drawer header
+   *  already names it), so it doesn't echo back redundantly. */
+  hideSubject?: boolean;
   renderBadges?: (ctx: IssueRowSlotContext) => ReactNode;
   renderMeta?: (ctx: IssueRowSlotContext) => ReactNode;
   renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
@@ -148,6 +152,7 @@ export function IssueRow({
   as = 'li',
   className,
   dimmed,
+  hideSubject,
   renderBadges,
   renderMeta,
   renderActions,
@@ -163,6 +168,36 @@ export function IssueRow({
   const slotCtx = { issue, open };
   const timing = issueTiming(issue);
 
+  // Severity pill + age + timing chip. Rendered in two positions the container
+  // query toggles: inline at the row's right edge on a wide container, and on a
+  // line of its own below the resource line once the row is too narrow to hold
+  // it beside the title — so the title never has to truncate to make room.
+  const metaChips = (wrapperClass: string) => (
+    <div className={`items-center gap-3 ${wrapperClass}`}>
+      <span className={`badge-sm shrink-0 px-2.5 py-0.5 text-xs font-semibold ${open ? ISSUE_SEVERITY_SOLID_CLASS[severity] : ISSUE_SEVERITY_BADGE_CLASS[severity]}`}>
+        {ISSUE_SEVERITY_LABEL[severity]}
+      </span>
+      {issue.first_seen ? (
+        <>
+          <Tooltip content={ageTitle(issue)} delay={200} wrapperClassName="shrink-0">
+            <time
+              dateTime={issue.first_seen}
+              className="flex items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
+            >
+              <Clock className="h-3 w-3" aria-hidden />
+              {formatCompactAge(issue.first_seen)}
+            </time>
+          </Tooltip>
+          {timing ? (
+            <Tooltip content={timing.tooltip} delay={200}>
+              <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>
+            </Tooltip>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+
   useEffect(() => {
     if (open) {
       setRenderDetails(true);
@@ -206,13 +241,13 @@ export function IssueRow({
             onToggle();
           }
         }}
-        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
+        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${ISSUE_SEVERITY_TEXT_CLASS[severity]}`} aria-hidden />
 
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           <div className="flex min-w-0 items-baseline gap-2">
-            <span className="shrink-0 text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
+            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
             <span className={`shrink-0 self-center ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
             {renderBadges?.(slotCtx)}
             {/* The detector reason rides the title row while COLLAPSED so the
@@ -265,32 +300,16 @@ export function IssueRow({
             ) : null}
             {renderMeta?.(slotCtx)}
           </div>
+          {/* Narrow container: the meta chips drop to their own line here rather
+              than stealing width from the title on the row above. Hidden once the
+              row is wide enough to hold them inline in the right cluster. */}
+          {metaChips('flex @2xl/issue:hidden')}
         </div>
 
-        {/* Right cluster — severity pill THEN age, vertically centered as a group. */}
+        {/* Right cluster — the always-visible affordances (per-row action +
+            chevron) plus, on a wide container, the inline meta chips. */}
         <div className="flex shrink-0 items-center gap-3">
-          <span className={`badge-sm shrink-0 px-2.5 py-0.5 text-xs font-semibold ${open ? ISSUE_SEVERITY_SOLID_CLASS[severity] : ISSUE_SEVERITY_BADGE_CLASS[severity]}`}>
-            {ISSUE_SEVERITY_LABEL[severity]}
-          </span>
-          {/* Age chip: keep recency visible; the deployment-start signal rides as a secondary tag. */}
-          {issue.first_seen ? (
-            <>
-              <Tooltip content={ageTitle(issue)} delay={200} wrapperClassName="shrink-0">
-                <time
-                  dateTime={issue.first_seen}
-                  className="flex items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
-                >
-                  <Clock className="h-3 w-3" aria-hidden />
-                  {formatCompactAge(issue.first_seen)}
-                </time>
-              </Tooltip>
-              {timing ? (
-                <Tooltip content={timing.tooltip} delay={200}>
-                  <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>
-                </Tooltip>
-              ) : null}
-            </>
-          ) : null}
+          {metaChips('hidden @2xl/issue:flex')}
           {renderActions?.(slotCtx)}
           <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
         </div>
@@ -329,7 +348,7 @@ export function IssueRow({
                   </section>
                 ) : null}
                 <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+                <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
               </div>
             </div>
           </div>
@@ -519,11 +538,13 @@ function ageTitle(issue: Issue): string {
 
 function AffectedResources({
   issue,
+  hideSubject,
   resourceHref,
   onResourceClick,
   ResourceLinkIcon,
 }: {
   issue: Issue;
+  hideSubject?: boolean;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
   ResourceLinkIcon: ComponentType<{ className?: string }>;
@@ -532,14 +553,19 @@ function AffectedResources({
   // count is the backend fan-out size (members, subject excluded — see
   // grouping.go); fall back to the inline member count, not +1.
   const total = issue.count ?? members.length;
+  // With the subject suppressed and no fanned-out members, this section has
+  // nothing to show — return null so the divider row above it doesn't render empty.
+  if (hideSubject && members.length === 0) return null;
   return (
     <section className="flex flex-col gap-3">
       {/* The subject (the grouped thing — e.g. the Deployment) is always the
           first deep-link; members (the folded pods) follow. ResourceLine emits
           an <li>, so it needs a list parent of its own. */}
-      <ul className="flex flex-col gap-px">
-        <ResourceLine label="Subject" compact refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-      </ul>
+      {!hideSubject && (
+        <ul className="flex flex-col gap-px">
+          <ResourceLine label="Subject" compact refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+        </ul>
+      )}
       {members.length > 0 && (
         <CardSection icon={Layers} label="Affected resources" labelExtra={`· ${total}`}>
           <ul className="flex flex-col gap-px">