@skyhook-io/k8s-ui 1.8.11 → 1.8.13

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -77,6 +77,7 @@ export interface ArgoActionHandlers {
   autoSyncEnabled: boolean
   // isRunning: caller derives from status.operationState.phase === 'Running'.
   isRunning: boolean
+  operationInProgress?: boolean
 }
 
 export interface FluxActionHandlers {
@@ -158,6 +159,9 @@ export interface GitOpsDetailLayoutProps {
   // hub-web and OSS can wire their own data sources without the layout
   // knowing.
   renderTabBody: (ctx: { tab: GitOpsDetailTab; fullscreen: boolean }) => ReactNode
+  // Optional host slot: inline Git commit metadata next to the status strip's
+  // latest revision (author, signature). Wired by the host to a data loader.
+  renderRevisionMeta?: (revision: string) => ReactNode
   // Optional: top-right tab-bar accessory (Clear filters + Fullscreen
   // buttons in OSS, can be anything else in hub-web).
   renderTabBarAccessory?: (ctx: { tab: GitOpsDetailTab; fullscreen: boolean }) => ReactNode
@@ -228,6 +232,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     fullscreen,
     onToggleFullscreen,
     renderTabBody,
+    renderRevisionMeta,
     renderTabBarAccessory,
     renderTabBarCounts,
     resourceLoading,
@@ -252,6 +257,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
   }, [identity.name, manageDocumentTitle, documentTitleSuffix])
 
   const effectiveSuspended = status?.suspended ?? false
+  const argoOperationInProgress = argo?.operationInProgress ?? argo?.isRunning ?? false
   // graphFullscreen hides everything chrome-side; the body region expands.
   // Mirrors the OSS GitOpsDetailView shell behavior so the visual chrome
   // class set carries through.
@@ -344,8 +350,12 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                     icon={ArrowDownUp}
                     loading={argo.syncing}
                     onClick={argo.onSyncRequested}
-                    disabled={effectiveSuspended || terminating}
-                    disabledReason={terminating ? terminatingActionTooltip : undefined}
+                    disabled={effectiveSuspended || terminating || argoOperationInProgress}
+                    disabledReason={terminating
+                      ? terminatingActionTooltip
+                      : argoOperationInProgress
+                        ? 'Wait for the current Argo operation to finish.'
+                        : undefined}
                     primary
                   />
                   <ActionButton
@@ -447,7 +457,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       )}
       {!fullscreen && (
         <>
-          <GitOpsStatusStrip insight={insight ?? undefined} loading={insightLoading} />
+          <GitOpsStatusStrip insight={insight ?? undefined} loading={insightLoading} renderRevisionMeta={renderRevisionMeta} />
           <GitOpsIssuesBand
             issues={insight?.issues}
             terminating={terminating}

package/src/components/gitops/GitOpsTableView.tsx

@@ -35,7 +35,7 @@ import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
 import { BoardTableSkeleton, BoardRailSkeleton } from '../ui/BoardSkeleton'
 import { getGitOpsResourceStatus } from './detail-helpers'
-import { isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
+import { isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
@@ -1358,13 +1358,20 @@ function buildRowActionItems(
   const items: RowActionItem[] = []
 
   if (row.tool === 'argo') {
+    const operationInProgress = isArgoOperationInProgress(row.raw)
     items.push({
       key: 'sync',
       label: 'Sync...',
       icon: ArrowDownUp,
       onClick: () => onAction(row, 'sync'),
-      disabled: suspended || terminating,
-      disabledReason: terminating ? terminatingReason : suspended ? suspendedReason : undefined,
+      disabled: suspended || terminating || operationInProgress,
+      disabledReason: terminating
+        ? terminatingReason
+        : suspended
+          ? suspendedReason
+          : operationInProgress
+            ? 'Wait for the current Argo operation to finish.'
+            : undefined,
       pending: isPending('sync'),
     })
     // Refresh / Hard refresh are read-style verbs — they re-read Git and

package/src/components/gitops/SyncOptionsDialog.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { buildArgoSyncOpts } from './SyncOptionsDialog'
+
+describe('buildArgoSyncOpts', () => {
+  it('keeps full application sync controls', () => {
+    expect(
+      buildArgoSyncOpts({
+        resourceMode: false,
+        revision: ' main ',
+        prune: true,
+        dryRun: true,
+        force: false,
+        applyOnly: true,
+        replace: true,
+        serverSideApply: false,
+      }),
+    ).toEqual({
+      revision: 'main',
+      prune: true,
+      dryRun: true,
+      force: false,
+      applyOnly: true,
+      syncOptions: ['Replace=true'],
+    })
+  })
+
+  it('removes revision, prune, and apply-only semantics from resource sync', () => {
+    expect(
+      buildArgoSyncOpts({
+        resourceMode: true,
+        revision: 'unsafe-revision',
+        prune: true,
+        dryRun: false,
+        force: true,
+        applyOnly: true,
+        replace: false,
+        serverSideApply: true,
+      }),
+    ).toEqual({
+      revision: undefined,
+      prune: false,
+      dryRun: false,
+      force: true,
+      applyOnly: false,
+      syncOptions: ['ServerSideApply=true'],
+    })
+  })
+})

package/src/components/gitops/SyncOptionsDialog.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect, type ComponentType } from 'react'
-import { Loader2, RefreshCw } from 'lucide-react'
+import { AlertTriangle, CheckCircle2, CircleAlert, Loader2, RefreshCw, ShieldCheck, XCircle } from 'lucide-react'
 
 import { DialogPortal } from '../ui/DialogPortal'
 import { Input } from '../ui/Input'
+import { Tooltip } from '../ui/Tooltip'
+import type { GitOpsInsightRef } from '../../types/gitops-insights'
 
 // =============================================================================
 // SyncOptionsDialog — Argo CD Sync drawer, shared between per-cluster
@@ -11,9 +13,9 @@ import { Input } from '../ui/Input'
 // the onConfirm callback (POST to /api/argo/applications/{ns}/{name}/sync
 // or the hub-proxied equivalent /c/{ctrl}/api/argo/...).
 //
-// Defaults match Argo's most-common path (prune true, no dry-run, no
-// force) so the two-click sync stays cheap. Revision is optional — empty
-// falls through to the Application's targetRevision.
+// Full sync defaults match Argo's most-common path (prune true, no dry-run,
+// no force). Resource sync fixes prune off and omits revision/apply-only so
+// selecting one object cannot opt into deletion behavior.
 // =============================================================================
 
 // ArgoSyncOpts is the payload shape the dialog passes to its onConfirm
@@ -33,12 +35,29 @@ export interface ArgoSyncOpts {
 export interface SyncOptionsDialogProps {
   open: boolean
   appLabel: string
+  resource?: GitOpsInsightRef
   pending?: boolean
+  autoSyncEnabled?: boolean
+  validationPending?: boolean
+  operationInProgress?: boolean
+  validationResult?: ResourceValidationResult | null
+  validationError?: string | null
   onCancel: () => void
   onConfirm: (opts: ArgoSyncOpts) => void
+  onValidate?: (opts: ArgoSyncOpts) => void
+  onValidationReset?: () => void
 }
 
-export function SyncOptionsDialog({ open, appLabel, pending, onCancel, onConfirm }: SyncOptionsDialogProps) {
+export interface ResourceValidationResult {
+  outcome: 'succeeded' | 'failed' | 'inconclusive'
+  message: string
+  resource?: {
+    status?: string
+    message?: string
+  }
+}
+
+export function SyncOptionsDialog({ open, appLabel, resource, pending, autoSyncEnabled, validationPending, operationInProgress, validationResult, validationError, onCancel, onConfirm, onValidate, onValidationReset }: SyncOptionsDialogProps) {
   const [revision, setRevision] = useState('')
   const [prune, setPrune] = useState(true)
   const [dryRun, setDryRun] = useState(false)
@@ -46,87 +65,212 @@ export function SyncOptionsDialog({ open, appLabel, pending, onCancel, onConfirm
   const [applyOnly, setApplyOnly] = useState(false)
   const [replace, setReplace] = useState(false)
   const [serverSideApply, setServerSideApply] = useState(false)
+  const richResourceValidation = !!resource && !!onValidate
+  const busy = !!pending || !!validationPending
+  const optionsDisabled = busy || !!operationInProgress
 
   // Reset on each open so a previous attempt's flags don't leak into the
   // next sync — easy footgun in modal-heavy flows.
   useEffect(() => {
     if (open) {
       setRevision('')
-      setPrune(true)
+      setPrune(!resource)
       setDryRun(false)
       setForce(false)
       setApplyOnly(false)
       setReplace(false)
       setServerSideApply(false)
     }
-  }, [open])
+  }, [open, resource])
 
   function submit() {
-    const syncOptions: string[] = []
-    if (replace) syncOptions.push('Replace=true')
-    if (serverSideApply) syncOptions.push('ServerSideApply=true')
-    onConfirm({
-      revision: revision.trim() || undefined,
-      prune,
-      dryRun,
-      force,
-      applyOnly,
-      syncOptions,
-    })
+    onConfirm(buildArgoSyncOpts({ resourceMode: !!resource, revision, prune, dryRun: richResourceValidation ? false : dryRun, force, applyOnly, replace, serverSideApply }))
+  }
+
+  function validate() {
+    onValidate?.(buildArgoSyncOpts({ resourceMode: true, revision, prune, dryRun: true, force, applyOnly, replace, serverSideApply }))
+  }
+
+  function updateValidationOption(setter: (value: boolean) => void, value: boolean) {
+    setter(value)
+    onValidationReset?.()
   }
 
   return (
-    <DialogPortal open={open} onClose={pending ? () => {} : onCancel} className="w-[480px]" closable={!pending}>
+    <DialogPortal open={open} onClose={busy ? () => {} : onCancel} className="w-[480px]" closable={!busy}>
       <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">Sync application</h2>
-        <p className="mt-0.5 text-xs text-theme-text-tertiary">{appLabel}</p>
+        <h2 className="text-sm font-semibold text-theme-text-primary">{resource ? 'Sync resource' : 'Sync application'}</h2>
+        <p className="mt-0.5 break-all text-xs text-theme-text-tertiary">{appLabel}</p>
       </div>
       <div className="space-y-4 px-4 py-4 text-sm">
-        <label className="block">
-          <span className="text-xs font-medium text-theme-text-secondary">Revision (optional)</span>
-          <Input
-            value={revision}
-            onChange={(e) => setRevision(e.target.value)}
-            placeholder="HEAD"
-            disabled={pending}
-            className="mt-1 w-full rounded-md border border-theme-border bg-theme-base px-2 py-1.5 font-mono text-xs text-theme-text-primary outline-none placeholder:text-theme-text-tertiary focus:border-sky-500"
-          />
-          <span className="mt-0.5 block text-[11px] text-theme-text-tertiary">
-            Branch, tag, or commit SHA. Leave empty to use the Application's targetRevision.
-          </span>
-        </label>
+        {resource && (
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2.5">
+            <div className="flex items-start gap-2">
+              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+              <div className="min-w-0">
+                <div className="break-all text-xs font-medium text-theme-text-primary">
+                  {resource.kind} / {resource.namespace ? `${resource.namespace}/` : ''}{resource.name}
+                </div>
+                <p className="mt-1 text-[11px] leading-relaxed text-theme-text-secondary">
+                  Only this resource will be applied. Selective sync bypasses hooks and normal sync-wave ordering; use a full application sync when this resource depends on them.
+                </p>
+                {autoSyncEnabled && (
+                  <p className="mt-2 border-t border-amber-500/20 pt-2 text-[11px] leading-relaxed text-theme-text-secondary">
+                    Auto-sync is enabled. Argo can reconcile this Application independently while the dry-run runs; a dry-run does not pause automation.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+        {!resource && (
+          <label className="block">
+            <span className="text-xs font-medium text-theme-text-secondary">Revision (optional)</span>
+            <Input
+              value={revision}
+              onChange={(e) => setRevision(e.target.value)}
+              placeholder="HEAD"
+              disabled={optionsDisabled}
+              className="mt-1 w-full rounded-md border border-theme-border bg-theme-base px-2 py-1.5 font-mono text-xs text-theme-text-primary outline-none placeholder:text-theme-text-tertiary focus:border-sky-500"
+            />
+            <span className="mt-0.5 block text-[11px] text-theme-text-tertiary">
+              Branch, tag, or commit SHA. Leave empty to use the Application's targetRevision.
+            </span>
+          </label>
+        )}
 
         {/* Common (Prune / Dry run) sit above a divider; Advanced toggles
             stay accessible but visually subordinate so the common-case user
             can scan past them without parsing every helper line. */}
-        <fieldset className="space-y-2">
-          <legend className="mb-1 text-xs font-medium text-theme-text-secondary">Sync options</legend>
-          <Toggle label="Prune" checked={prune} onChange={setPrune} disabled={pending} hint="Delete resources that are no longer in Git." />
-          <Toggle label="Dry run" checked={dryRun} onChange={setDryRun} disabled={pending} hint="Preview only — Argo computes the diff but applies nothing." />
-        </fieldset>
+        {!richResourceValidation && (
+          <fieldset className="space-y-2">
+            <legend className="mb-1 text-xs font-medium text-theme-text-secondary">Sync options</legend>
+            {!resource && <Toggle label="Prune" checked={prune} onChange={setPrune} disabled={optionsDisabled} hint="Delete resources that are no longer in Git." />}
+            <Toggle label="Dry run" checked={dryRun} onChange={setDryRun} disabled={optionsDisabled} hint="Preview only — Argo computes the diff but applies nothing." />
+          </fieldset>
+        )}
         <fieldset className="space-y-2 border-t border-theme-border pt-3">
           <legend className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Advanced</legend>
-          <Toggle label="Apply only" checked={applyOnly} onChange={setApplyOnly} disabled={pending} hint="Skip PreSync / PostSync / SyncFail hooks." />
-          <Toggle label="Force" checked={force} onChange={setForce} disabled={pending} hint="Use kubectl --force; required for some immutable-field changes." />
-          <Toggle label="Replace" checked={replace} onChange={setReplace} disabled={pending} hint="kubectl replace instead of apply (drops fields not in source)." />
-          <Toggle label="Server-side apply" checked={serverSideApply} onChange={setServerSideApply} disabled={pending} hint="Use the K8s server-side apply mechanism for ownership tracking." />
+          {!resource && <Toggle label="Apply only" checked={applyOnly} onChange={setApplyOnly} disabled={optionsDisabled} hint="Skip PreSync / PostSync / SyncFail hooks." />}
+          <Toggle label="Force" checked={force} onChange={(value) => updateValidationOption(setForce, value)} disabled={optionsDisabled} hint="Use kubectl --force; required for some immutable-field changes." />
+          <Toggle label="Replace" checked={replace} onChange={(value) => updateValidationOption(setReplace, value)} disabled={optionsDisabled} hint="kubectl replace instead of apply (drops fields not in source)." />
+          <Toggle label="Server-side apply" checked={serverSideApply} onChange={(value) => updateValidationOption(setServerSideApply, value)} disabled={optionsDisabled} hint="Use the K8s server-side apply mechanism for ownership tracking." />
         </fieldset>
+        {richResourceValidation && (validationPending || validationResult || validationError) && (
+          <ValidationResult pending={!!validationPending} result={validationResult} error={validationError} />
+        )}
+        {richResourceValidation && !validationPending && operationInProgress && (
+          <p className="text-[11px] leading-relaxed text-theme-text-secondary">
+            Argo is finishing the current operation. Sync becomes available when it releases the operation slot.
+          </p>
+        )}
       </div>
       <div className="flex items-center justify-end gap-2 border-t border-theme-border bg-theme-base px-4 py-3">
         <button
           type="button"
           onClick={onCancel}
-          disabled={pending}
+          disabled={busy}
           className="rounded-md border border-theme-border bg-theme-surface px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
         >
           Cancel
         </button>
-        <PrimaryButton onClick={submit} disabled={pending} icon={pending ? Loader2 : RefreshCw} loading={pending} label={dryRun ? 'Run dry-run' : 'Sync now'} />
+        {richResourceValidation && (
+          <Tooltip content="Runs an Argo selective dry-run. Applies nothing; API admission can still reject the real sync." wrapperClassName="inline-flex">
+            <button
+              type="button"
+              onClick={validate}
+              disabled={optionsDisabled}
+              className="inline-flex items-center gap-1.5 rounded-md border border-theme-border bg-theme-surface px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {validationPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <ShieldCheck className="h-3.5 w-3.5" />}
+              {validationPending ? 'Running dry-run…' : 'Dry-run'}
+            </button>
+          </Tooltip>
+        )}
+        <PrimaryButton onClick={submit} disabled={optionsDisabled} icon={pending ? Loader2 : RefreshCw} loading={pending} label={dryRun && !richResourceValidation ? 'Run dry-run' : resource ? 'Sync resource' : 'Sync now'} />
       </div>
     </DialogPortal>
   )
 }
 
+function ValidationResult({ pending, result, error }: { pending: boolean; result?: ResourceValidationResult | null; error?: string | null }) {
+  if (pending) {
+    return (
+      <div className="card-inner flex items-start gap-2 px-3 py-2.5">
+        <Loader2 className="mt-0.5 h-4 w-4 shrink-0 animate-spin text-theme-text-secondary" />
+        <div>
+          <div className="text-xs font-medium text-theme-text-primary">Running selective dry-run</div>
+          <p className="mt-0.5 text-[11px] text-theme-text-secondary">Waiting for the selective dry-run result. No resource changes will be applied.</p>
+        </div>
+      </div>
+    )
+  }
+  if (error) {
+    return (
+      <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2.5">
+        <div className="flex items-start gap-2">
+          <XCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
+          <div>
+            <div className="text-xs font-medium text-theme-text-primary">Dry-run could not start or complete</div>
+            <p className="mt-0.5 max-h-20 overflow-auto break-words text-[11px] text-theme-text-secondary">{error}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  if (!result) return null
+
+  const succeeded = result.outcome === 'succeeded'
+  const inconclusive = result.outcome === 'inconclusive'
+  const Icon = succeeded ? CheckCircle2 : inconclusive ? CircleAlert : XCircle
+  const title = succeeded ? 'Dry-run passed' : inconclusive ? 'Dry-run was inconclusive' : 'Dry-run failed'
+  const surface = succeeded
+    ? 'border-emerald-500/30 bg-emerald-500/5'
+    : inconclusive
+      ? 'border-amber-500/30 bg-amber-500/5'
+      : 'border-red-500/30 bg-red-500/5'
+  const iconTone = succeeded ? 'text-emerald-500' : inconclusive ? 'text-amber-500' : 'text-red-500'
+  return (
+    <div className={`rounded-md border px-3 py-2.5 ${surface}`}>
+      <div className="flex items-start gap-2">
+        <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${iconTone}`} />
+        <div className="min-w-0">
+          <div className="text-xs font-medium text-theme-text-primary">{title}</div>
+          <p className="mt-0.5 max-h-20 overflow-auto break-words text-[11px] text-theme-text-secondary">{result.message}</p>
+          {(result.resource?.status || result.resource?.message) && (
+            <div className="mt-2 max-h-28 overflow-auto break-all font-mono text-[10px] text-theme-text-secondary">
+              {result.resource.status}{result.resource.status && result.resource.message ? ' — ' : ''}{result.resource.message}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function buildArgoSyncOpts({ resourceMode, revision, prune, dryRun, force, applyOnly, replace, serverSideApply }: {
+  resourceMode: boolean
+  revision: string
+  prune: boolean
+  dryRun: boolean
+  force: boolean
+  applyOnly: boolean
+  replace: boolean
+  serverSideApply: boolean
+}): ArgoSyncOpts {
+  const syncOptions: string[] = []
+  if (replace) syncOptions.push('Replace=true')
+  if (serverSideApply) syncOptions.push('ServerSideApply=true')
+  return {
+    revision: resourceMode ? undefined : revision.trim() || undefined,
+    prune: resourceMode ? false : prune,
+    dryRun,
+    force,
+    applyOnly: resourceMode ? false : applyOnly,
+    syncOptions,
+  }
+}
+
 function Toggle({ label, checked, onChange, disabled, hint }: { label: string; checked: boolean; onChange: (v: boolean) => void; disabled?: boolean; hint?: string }) {
   return (
     <label className="flex items-start gap-2">

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

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { createTwoFilesPatch } from 'diff'
+import { GitCompare, Maximize2, ShieldOff, X } from 'lucide-react'
+import type { GitOpsResourceDiff } from '../../../types'
+import { DiffLine, hasDiffBodyChange } from '../../shared/UnifiedDiff'
+
+interface ArgoResourceDiffProps {
+  diff?: GitOpsResourceDiff | null
+  loading: boolean
+  // Server error string ({"error"} body), surfaced inline — not a toast.
+  error?: string | null
+}
+
+// ArgoResourceDiff renders the full Git-rendered desired-vs-live diff for a
+// single Argo CD managed resource. Pure presentation: the host (web/) wires the
+// fetch and passes data / loading / error. The inline view is a unified line
+// diff; the maximize control opens the same content full-screen with side-by-
+// side panes on wide viewports.
+export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps) {
+  const [maximized, setMaximized] = useState(false)
+
+  if (loading) {
+    // An inline row expansion, not a full pane — a quiet skeleton of the diff's
+    // own shape reads as "content arriving here" without the page-level radar
+    // loader shouting for attention.
+    return (
+      <div className="rounded-md border border-theme-border bg-theme-base/50 p-3" aria-busy="true" aria-label="Loading diff">
+        <div className="mb-2 flex items-center gap-1.5 text-[11px] text-theme-text-tertiary">
+          <GitCompare className="h-3.5 w-3.5 shrink-0" />
+          <span>Loading diff…</span>
+        </div>
+        <div className="space-y-1.5">
+          {[92, 68, 81, 55, 74].map((w, i) => (
+            <div key={i} className="h-2.5 animate-pulse rounded bg-theme-hover" style={{ width: `${w}%` }} />
+          ))}
+        </div>
+      </div>
+    )
+  }
+  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>
+    )
+  }
+  if (!diff) return null
+
+  const unchanged = !docsDiffer(diff.desired, diff.live)
+
+  return (
+    <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" />
+          <span className="text-[11px] text-theme-text-tertiary">
+            desired (Git-rendered) <span className="mx-0.5">→</span> live (normalized)
+          </span>
+          {diff.redacted && <RedactedChip />}
+        </div>
+        <button
+          type="button"
+          onClick={() => setMaximized(true)}
+          className="flex shrink-0 items-center gap-1 rounded border border-theme-border bg-theme-base px-1.5 py-0.5 text-[10px] text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
+        >
+          <Maximize2 className="h-3 w-3" />
+          Expand
+        </button>
+      </div>
+      {unchanged ? (
+        <p className="text-[11px] text-theme-text-tertiary">No differences between the Git-rendered desired state and live cluster state.</p>
+      ) : (
+        <div className="max-h-80 overflow-auto rounded-md border border-theme-border bg-theme-base/50">
+          <UnifiedDiffBody desired={diff.desired} live={diff.live} />
+        </div>
+      )}
+
+      {maximized && <ArgoResourceDiffOverlay diff={diff} onClose={() => setMaximized(false)} />}
+    </div>
+  )
+}
+
+function RedactedChip() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[10px] text-theme-text-tertiary">
+      <ShieldOff className="h-3 w-3" />
+      Secret values masked
+    </span>
+  )
+}
+
+// Full-screen compare overlay. Side-by-side desired / live panes on wide
+// viewports; unified diff when narrow. Portaled to body so it escapes the
+// expanded row's overflow clipping.
+function ArgoResourceDiffOverlay({ diff, onClose }: { diff: GitOpsResourceDiff; onClose: () => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', onKey, true)
+    return () => document.removeEventListener('keydown', onKey, true)
+  }, [onClose])
+
+  const unchanged = !docsDiffer(diff.desired, diff.live)
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="dialog relative flex max-h-[90vh] w-full max-w-6xl flex-col">
+        <div className="flex items-center justify-between gap-2 border-b border-theme-border px-4 py-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <GitCompare className="h-4 w-4 shrink-0 text-theme-text-secondary" />
+            <span className="truncate text-sm font-medium text-theme-text-primary">
+              desired (Git-rendered) <span className="mx-0.5 text-theme-text-tertiary">→</span> live (normalized)
+            </span>
+            {diff.redacted && <RedactedChip />}
+          </div>
+          <button
+            onClick={onClose}
+            className="flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary"
+          >
+            <X className="h-3.5 w-3.5" />
+            Close
+          </button>
+        </div>
+        {unchanged ? (
+          <div className="p-6 text-sm text-theme-text-secondary">
+            No differences between the Git-rendered desired state and live cluster state.
+          </div>
+        ) : (
+          // Unified (not side-by-side) even full-screen: two unhighlighted
+          // panes make the reader hunt for the drifted line by eye across a
+          // whole manifest. The unified view marks every changed line — the
+          // same default Argo's own UI makes. An aligned split-diff with
+          // per-line highlighting can supersede this later.
+          <div className="min-h-0 flex-1 overflow-auto bg-theme-base/50">
+            <UnifiedDiffBody desired={diff.desired} live={diff.live} />
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+
+// Renders a unified diff of two YAML documents using the `diff` package, via the
+// shared DiffLine so this reads identically to the Helm manifest diff.
+function UnifiedDiffBody({ desired, live }: { desired: string; live: string }) {
+  const patch = createTwoFilesPatch('desired', 'live', desired, live, '', '', { context: 3 })
+  const lines = patch.split('\n').filter((line) => !line.startsWith('===') && !line.startsWith('Index:'))
+  return (
+    <div className="p-3 font-mono text-[11px]">
+      {lines.map((line, index) => (
+        <DiffLine key={index} line={line} />
+      ))}
+    </div>
+  )
+}
+
+// True when the desired and live documents differ in a body line (ignoring the
+// patch's own file headers). Cheaper than rendering for the "no differences"
+// short-circuit.
+function docsDiffer(desired: string, live: string): boolean {
+  if (desired === live) return false
+  const patch = createTwoFilesPatch('desired', 'live', desired, live, '', '', { context: 0 })
+  return hasDiffBodyChange(patch)
+}