@skyhook-io/k8s-ui 1.18.2 → 1.20.0

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

@@ -1,4 +1,5 @@
 import { AlertTriangle, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, CircleAlert, Clock3, GitBranch, GitCommit, Info, Loader2, Plus, RefreshCw, Trash2 } from 'lucide-react'
+import { IssueGuidance } from '../../issues/IssueGuidance'
 import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
@@ -8,6 +9,8 @@ import { radarHealthNote } from '../health-provenance'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../../utils/badge-colors'
 import { formatRelativeAgeTime } from '../../../utils/format'
 import { Tooltip } from '../../ui/Tooltip'
+import { RadarUpgradeNote, radarUpgradeNoteText } from '../../ui/RadarUpgradeNote'
+import type { RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { SearchBox } from '../../ui/SearchBox'
 import { FilterPill, type FilterPillTone } from '../../ui/FilterPill'
 import { Collapse, CollapseChevron } from '../../ui/Collapse'
@@ -21,6 +24,7 @@ import {
   entryTone,
   gitopsToSeverity,
   healthStatusRank,
+  historyRollbackBlockedReason,
   isArgoResourceSyncEligible,
   messageToPhase,
   missingResourceMessage,
@@ -359,7 +363,7 @@ export function GitOpsIssuesBand({
         <GitOpsHistoricalIssuesDisclosure operationFailure={operationFailure} others={others} onSelectIssue={onSelectIssue} onRemediate={onRemediate} remediationPending={remediationPending} />
       ) : (
         <>
-          {operationFailure && <GitOpsFailureCard issue={operationFailure} onSelect={onSelectIssue} onRemediate={onRemediate} remediationPending={remediationPending} />}
+          {operationFailure && <GitOpsFailureCard issue={operationFailure} emptyRenderGuardShown={others[0]?.reason === 'AutoSyncBlockedEmpty'} onSelect={onSelectIssue} onRemediate={onRemediate} remediationPending={remediationPending} />}
           {others.length > 0 && <GitOpsCompactIssueStack issues={others} onSelectIssue={onSelectIssue} />}
         </>
       )}
@@ -383,7 +387,7 @@ function GitOpsLifecycleBanner({ issue }: { issue: GitOpsIssue }) {
           </div>
           <p className="mt-1 text-[13px] text-theme-text-secondary">{issue.message}</p>
           {issue.cause && <p className="mt-1 text-[12px] text-orange-300/90">{issue.cause}</p>}
-          {issue.action && <p className="mt-1 text-[11px] text-theme-text-tertiary">{issue.action}</p>}
+          <IssueNextStep issue={issue} className="mt-1" />
         </div>
       </div>
     </div>
@@ -431,7 +435,7 @@ function GitOpsHistoricalIssuesDisclosure({
       </button>
       <Collapse open={expanded}>
         <div className="border-t border-theme-border">
-          {operationFailure && <GitOpsFailureCard issue={operationFailure} onSelect={onSelectIssue} onRemediate={onRemediate} remediationPending={remediationPending} />}
+          {operationFailure && <GitOpsFailureCard issue={operationFailure} emptyRenderGuardShown={others[0]?.reason === 'AutoSyncBlockedEmpty'} onSelect={onSelectIssue} onRemediate={onRemediate} remediationPending={remediationPending} />}
           {others.length > 0 && <GitOpsCompactIssueStack issues={others} onSelectIssue={onSelectIssue} />}
         </div>
       </Collapse>
@@ -440,15 +444,18 @@ function GitOpsHistoricalIssuesDisclosure({
 }
 
 // Structured failure card. One unit, owns the failure narrative end-to-end:
-// title (parsed cause when recognized, falls back to raw reason), affected
-// resource, retry posture, raw controller error in a collapsed details.
+// title (parsed cause when recognized, falls back to raw reason), sync
+// hazard, cause, next step, affected resource, retry posture, raw controller
+// error in a collapsed details.
 function GitOpsFailureCard({
   issue,
+  emptyRenderGuardShown,
   onSelect,
   onRemediate,
   remediationPending,
 }: {
   issue: GitOpsIssue
+  emptyRenderGuardShown: boolean
   onSelect?: (issue: GitOpsIssue) => void
   // onRemediate fires when the contextual fix button is clicked. The host
   // app (web/) dispatches on issue.remediation.kind to run the right
@@ -492,7 +499,16 @@ function GitOpsFailureCard({
               <span className="text-[11px] text-theme-text-tertiary">retried {issue.retryCount}×</span>
             )}
           </div>
+          {/* Ahead of the body: a cause can end in its own sync advice
+              ("so Argo creates it on sync"), which the hazard overrides. */}
+          {issue.hazard && (
+            <div className={clsx('mt-2 flex items-start gap-1.5 rounded border px-2 py-1.5 text-[12px] font-medium', SEVERITY_BADGE.warning)}>
+              <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <p className="min-w-0">{emptyRenderGuardShown ? 'See the empty-render guard below before syncing.' : issue.hazard}</p>
+            </div>
+          )}
           {body && <p className="mt-1 text-[13px] text-theme-text-secondary">{body}</p>}
+          <IssueNextStep issue={issue} className="mt-1" />
           {ref && (
             <dl className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-[12px]">
               <div className="flex gap-1.5">
@@ -591,6 +607,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
   const [expanded, setExpanded] = useState(false)
   if (issues.length === 0) return null
   const headline = issues[0]!
+  const wrapHeadline = headline.reason === 'RolledBack' || headline.reason === 'RollbackRevisionMismatch' || headline.reason === 'SyncWindowBlocked'
   const remaining = issues.length - 1
   const tone = severityTone(headline.severity)
   const headlineRef = headline.refs?.[0]
@@ -618,7 +635,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
         <div className="flex w-full items-center gap-2">
           {tone.icon}
           <span className={clsx('shrink-0 font-semibold', tone.text)}>{headline.reason}</span>
-          <span className="min-w-0 flex-1 truncate text-theme-text-secondary">{headline.message}</span>
+          <span className={clsx('min-w-0 flex-1 text-theme-text-secondary', wrapHeadline ? 'whitespace-normal break-words' : 'truncate')}>{headline.message}</span>
           {/* Inline count when there are more issues behind the headline.
               Lightweight text — pairs with the chevron as a single disclosure
               unit instead of a separator-bordered count button. */}
@@ -637,10 +654,13 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
           )}
           {canExpand && <CollapseChevron open={expanded} className="h-3.5 w-3.5" />}
         </div>
-        {headline.cause && (
-          <p className="truncate pl-[22px] text-[11px] text-theme-text-tertiary">{headline.cause}</p>
-        )}
       </button>
+      {(headline.cause || headline.action) && (
+        <div className="px-4 pb-2 pl-[38px]">
+          {headline.cause && <p className="text-[11px] text-theme-text-tertiary">{headline.cause}</p>}
+          <IssueNextStep issue={headline} />
+        </div>
+      )}
       {canExpand && (
         <Collapse open={expanded}>
         <div className="divide-y divide-theme-border border-t border-theme-border bg-theme-base/40">
@@ -650,33 +670,34 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
             const actionable = !!(onSelectIssue && ref)
             const rawMessage = issue.rawMessage && issue.rawMessage !== issue.message ? issue.rawMessage : ''
             return (
-              <button
-                key={`${issue.reason}-${index}`}
-                type="button"
-                onClick={() => actionable && onSelectIssue?.(issue)}
-                disabled={!actionable}
-                className={clsx(
-                  'group flex w-full items-start gap-2 px-4 py-2 text-left text-xs transition-colors',
-                  actionable ? 'hover:bg-theme-hover/50' : 'cursor-default',
-                )}
-              >
-                {t.icon}
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className={clsx('font-semibold', t.text)}>{issue.reason}</span>
-                    <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{issue.scope}</span>
+              <div key={`${issue.reason}-${index}`}>
+                <button
+                  type="button"
+                  onClick={() => actionable && onSelectIssue?.(issue)}
+                  disabled={!actionable}
+                  className={clsx(
+                    'group flex w-full items-start gap-2 px-4 py-2 text-left text-xs transition-colors',
+                    actionable ? 'hover:bg-theme-hover/50' : 'cursor-default',
+                  )}
+                >
+                  {t.icon}
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className={clsx('font-semibold', t.text)}>{issue.reason}</span>
+                      <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{issue.scope}</span>
+                    </div>
+                    <p className="mt-0.5 text-theme-text-secondary">{issue.message}</p>
+                    {issue.cause && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.cause}</p>}
+                    {rawMessage && <p className="mt-0.5 break-words font-mono text-[11px] text-theme-text-tertiary">{rawMessage}</p>}
                   </div>
-                  <p className="mt-0.5 text-theme-text-secondary">{issue.message}</p>
-                  {issue.cause && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.cause}</p>}
-                  {rawMessage && <p className="mt-0.5 break-words font-mono text-[11px] text-theme-text-tertiary">{rawMessage}</p>}
-                  {issue.action && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.action}</p>}
-                </div>
-                {actionable && ref && (
-                  <span className="shrink-0 self-center text-[11px] font-medium text-theme-text-secondary opacity-70 transition-opacity group-hover:opacity-100">
-                    Open {refText(ref)} →
-                  </span>
-                )}
-              </button>
+                  {actionable && ref && (
+                    <span className="shrink-0 self-center text-[11px] font-medium text-theme-text-secondary opacity-70 transition-opacity group-hover:opacity-100">
+                      Open {refText(ref)} →
+                    </span>
+                  )}
+                </button>
+                <IssueNextStep issue={issue} className="px-4 pb-2 pl-[38px]" />
+              </div>
             )
           })}
         </div>
@@ -686,6 +707,13 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
   )
 }
 
+// IssueNextStep is an issue's next step, styled alike on every surface of the
+// band. Wrapped, never truncated: a next step often ends in the caveat that
+// makes it safe (what not to sync), which truncation would cut.
+function IssueNextStep({ issue, className }: { issue: GitOpsIssue; className?: string }) {
+  return <IssueGuidance action={issue.action} primary={issue.actionPrimary} secondaryTitle={issue.actionSecondaryTitle} secondary={issue.actionSecondary} ordered={issue.reason === 'SharedResourceWarning'} className={clsx('text-[11px] text-theme-text-tertiary', className)} />
+}
+
 // firstSentence/remainderAfterFirstSentence split a string at the first
 // sentence boundary so the failure card can render "headline + body" from a
 // single source string. Falls back to the whole string when there's no
@@ -865,6 +893,7 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
   // 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'
+  const syncHazard = insight.issues?.find((issue) => issue.hazard)?.hazard
   // 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
@@ -877,6 +906,7 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
   // 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 rolledBack = !!insight.summary.rollbackRevision
   const toggleFacet = (facet: ResourceStatusFacet) => {
     setStatusFilters((prev) => {
       const next = new Set(prev)
@@ -1098,9 +1128,9 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
                 const rowKey = refKey(change.ref)
                 const focused = focusKey === rowKey
                 const explanation = change.missing
-                  ? missingResourceMessage(change.sync)
+                  ? missingResourceMessage(change.sync, { hazard: syncHazard, rolledBack })
                   : !change.syncError && !change.message
-                    ? explainChangeStatus(change.sync, change.health, insight.summary)
+                    ? explainChangeStatus(change.sync, change.health, insight.summary, { hazard: syncHazard, rolledBack })
                     : ''
                 const hasInlineDetail = !!(
                   (change.drift && change.drift.entries.length > 0) ||
@@ -1275,7 +1305,12 @@ function explainChangeStatus(
   sync: string | undefined,
   health: string | undefined,
   summary: GitOpsInsight['summary'],
+  context?: { hazard?: string; rolledBack?: boolean },
 ): string {
+  if (context?.hazard && (sync === 'OutOfSync' || health === 'Missing')) {
+    return 'See the sync warning above before syncing this Application.'
+  }
+  if (context?.rolledBack && health === 'Missing') return missingResourceMessage(sync, context)
   const isAuto = (summary.autoSyncMode ?? '').toLowerCase().startsWith('auto')
   const phase = (summary.operationPhase ?? '').toLowerCase()
   const inFlight = phase === 'running'
@@ -1287,6 +1322,7 @@ function explainChangeStatus(
   if (sync === 'OutOfSync') {
     if (parentFailed) return 'Sync failed for this resource — see the operation error above for the cause.'
     if (inFlight) return 'Live state differs from Git. A sync is in progress — wait for it to finish.'
+    if (context?.rolledBack) return 'Live state differs from Git after a rollback. Sync applies the desired state and can undo the rollback.'
     if (isAuto) return 'Live state differs from Git. Auto-sync should reconcile this within a few minutes; click Sync to force it.'
     return 'Live state differs from Git. Click Sync to apply the desired state.'
   }
@@ -1606,12 +1642,17 @@ interface GitOpsActivityInsightViewProps {
   // with the target entry. The consumer is responsible for the confirmation
   // dialog + the actual mutation.
   onRollback?: (item: GitOpsHistoryItem) => void
+  // Set when the connected Radar is too old to roll back: every Rollback
+  // renders disabled, with the upgrade note above the history.
+  rollbackUpgrade?: RadarUpgradeRequirement | null
+  rollbackBlockedReason?: string
 }
 
-export function GitOpsActivityInsightView({ insight, error, onRollback }: GitOpsActivityInsightViewProps) {
+export function GitOpsActivityInsightView({ insight, error, onRollback, rollbackUpgrade, rollbackBlockedReason }: GitOpsActivityInsightViewProps) {
   if (error && !insight) return <InsightErrorState error={error} />
   if (!insight) return <PaneLoader label="Loading GitOps activity…" className="h-full" />
   const canRollback = !!insight.capabilities?.rollback && !!onRollback
+  const upgrade = canRollback ? rollbackUpgrade ?? null : null
   // Auto-sync makes rollback futile — the controller would re-sync to HEAD
   // immediately. Argo's own Web UI disables the button in this state. Detect
   // by autoSyncMode prefix so "Auto · prune", "Auto · self-heal", etc. all match.
@@ -1625,12 +1666,18 @@ export function GitOpsActivityInsightView({ insight, error, onRollback }: GitOps
         <SectionHeader
           icon={Clock3}
           title="History"
-          hint={canRollback ? 'Each revision can be rolled back to.' : undefined}
+          hint={canRollback && !upgrade && !rollbackBlockedReason ? 'Each revision can be rolled back to.' : undefined}
         />
+        {upgrade && <RadarUpgradeNote requirement={upgrade} className="border-b border-theme-border px-4 py-2.5" />}
+        {canRollback && rollbackBlockedReason && <p className="border-b border-theme-border px-4 py-2.5 text-xs text-theme-text-secondary">{rollbackBlockedReason}</p>}
         <HistoryRows
           items={insight.history ?? []}
           canRollback={canRollback}
-          rollbackBlockedReason={autoSyncBlocksRollback ? 'Auto-sync is enabled. Disable it to enable rollback — otherwise the controller will sync forward to HEAD again.' : undefined}
+          rollbackBlockedReason={rollbackBlockedReason || (upgrade
+            ? radarUpgradeNoteText(upgrade)
+            : autoSyncBlocksRollback
+              ? 'Auto-sync is enabled. Disable it to enable rollback — otherwise the controller will sync forward to HEAD again.'
+              : undefined)}
           onRollback={onRollback}
         />
       </section>
@@ -1670,6 +1717,7 @@ function HistoryRows({
         // the in-flight current operation row has no ID and rolling "back"
         // to it is meaningless.
         const showRollback = canRollback && !!item.id && !!onRollback
+        const blockedReason = historyRollbackBlockedReason(item, rollbackBlockedReason)
         return (
           // `group` enables the Rollback button's hover-reveal; baseline
           // opacity-40 keeps it touch-discoverable.
@@ -1690,22 +1738,22 @@ function HistoryRows({
                 )}
                 {showRollback && (
                   <Tooltip
-                    content={rollbackBlockedReason || `Roll back to revision ${item.revision || `#${item.id}`}`}
+                    content={blockedReason || `Roll back to revision ${item.revision || `#${item.id}`}`}
                     delay={200}
                     wrapperClassName="ml-auto"
                   >
                     {/* Two visually distinct states:
                         - Enabled: low-emphasis baseline (opacity-40), brightens on row hover
-                        - Disabled (auto-sync on): full opacity but desaturated, cursor-not-allowed,
+                        - Disabled (auto-sync on, or an entry with no source): full opacity but desaturated, cursor-not-allowed,
                           no hover affordance — reads unambiguously as "not actionable, here's why" */}
                     <button
                       type="button"
-                      onClick={() => !rollbackBlockedReason && onRollback?.(item)}
-                      disabled={!!rollbackBlockedReason}
-                      aria-disabled={!!rollbackBlockedReason}
+                      onClick={() => !blockedReason && onRollback?.(item)}
+                      disabled={!!blockedReason}
+                      aria-disabled={!!blockedReason}
                       className={clsx(
                         'rounded border px-1.5 py-0.5 text-[10px] transition-opacity',
-                        rollbackBlockedReason
+                        blockedReason
                           ? 'cursor-not-allowed border-theme-border bg-theme-base text-theme-text-tertiary'
                           : 'border-theme-border bg-theme-elevated text-theme-text-secondary opacity-40 hover:bg-theme-hover hover:text-theme-text-primary hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100'
                       )}

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

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { GitOpsIssuesBand } from './GitOpsInsightViews'
+import type { GitOpsIssue } from '../../../types/gitops-insights'
+import { SEVERITY_BADGE } from '../../../utils/badge-colors'
+
+const guard: GitOpsIssue = {
+  severity: 'critical',
+  scope: 'condition',
+  reason: 'AutoSyncBlockedEmpty',
+  message: 'Auto-sync blocked: the render includes none of the managed resources',
+  rawMessage: 'Skipping sync attempt to [8088f4c]: auto-sync will wipe out all resources',
+  cause: 'Argo CD blocked auto-sync because the render includes none of the resources this Application manages.',
+  action: 'The render includes none of the resources this Application manages. A sync with Prune enabled could delete all of them. Prune=false blocks direct Argo pruning; Prune=confirm requires confirmation. Pruning a rendered Namespace deletes its contents, regardless of their Prune options.',
+}
+
+// The band's top row is the most severe issue. Its next step must be visible
+// without expanding, or a lower row's "click Sync" is the only advice on screen.
+describe('GitOpsIssuesBand headline', () => {
+  it('shows the top issue’s next step when it stands alone', () => {
+    const html = renderToString(<GitOpsIssuesBand issues={[guard]} />)
+    expect(html).toContain(guard.action)
+  })
+
+  it('shows the top issue’s next step above a collapsed stack', () => {
+    const drift: GitOpsIssue = {
+      severity: 'warning',
+      scope: 'operation',
+      reason: 'OutOfSync',
+      message: 'Application is OutOfSync.',
+      action: 'Review the drift.',
+    }
+    const html = renderToString(<GitOpsIssuesBand issues={[guard, drift]} />)
+    expect(html).toContain(guard.action)
+    expect(html.indexOf(guard.action!)).toBeLessThan(html.indexOf(drift.action!))
+  })
+
+  it('renders no next-step line when the top issue has none', () => {
+    const html = renderToString(
+      <GitOpsIssuesBand issues={[{ severity: 'warning', scope: 'condition', reason: 'X', message: 'only a message' }]} />,
+    )
+    expect(html).toContain('only a message')
+    expect(html.match(/pl-\[22px\]/g)).toBeNull()
+  })
+})
+
+// Argo's namespace-not-found cause ends in its own sync advice.
+const failedSync: GitOpsIssue = {
+  severity: 'critical',
+  scope: 'operation',
+  reason: 'Failed',
+  message: 'one or more objects failed to apply, reason: namespaces demo not found',
+  cause: 'The destination namespace does not exist. Create it, or enable CreateNamespace=true in the syncOptions so Argo creates it on sync.',
+  action: 'Open Activity for operation details.',
+}
+const causeAdvice = 'so Argo creates it on sync'
+const emptyRenderHazard = 'The render includes none of the resources this Application manages. A sync with Prune enabled could delete all of them. Prune=false blocks direct Argo pruning; Prune=confirm requires confirmation. Pruning a rendered Namespace deletes its contents, regardless of their Prune options. Check the source path, targetRevision, Helm values, and Kustomize or directory include/exclude settings first.'
+const emptyRenderReference = 'See the empty-render guard below before syncing.'
+
+describe('GitOpsIssuesBand failure card', () => {
+  it('shows the failure’s next step after its cause', () => {
+    const html = renderToString(<GitOpsIssuesBand issues={[failedSync]} />)
+    expect(html).toContain(failedSync.action)
+    expect(html.indexOf(causeAdvice)).toBeLessThan(html.indexOf(failedSync.action!))
+    expect(html).not.toContain(SEVERITY_BADGE.warning)
+  })
+
+  it('warns of a sync hazard before the cause’s own sync advice', () => {
+    const hazard = emptyRenderHazard
+    const html = renderToString(<GitOpsIssuesBand issues={[{ ...failedSync, hazard }]} />)
+    const at = html.indexOf(hazard)
+    expect(at).toBeGreaterThan(-1)
+    expect(at).toBeLessThan(html.indexOf(causeAdvice))
+    expect(html.lastIndexOf(SEVERITY_BADGE.warning, at)).toBeGreaterThan(-1)
+    expect(html).toContain(failedSync.action)
+    expect(html).not.toContain(emptyRenderReference)
+  })
+
+  it.each([false, true])('points to the empty-render guard in the issue band (terminating=%s)', (terminating) => {
+    const html = renderToString(<GitOpsIssuesBand issues={[{ ...failedSync, hazard: emptyRenderHazard }, guard]} terminating={terminating} />)
+    expect(html).toContain(emptyRenderReference)
+    expect(html).not.toContain(emptyRenderHazard)
+    expect(html).toContain(guard.message)
+    expect(html).toContain(guard.action)
+    expect(html.indexOf(emptyRenderReference)).toBeLessThan(html.indexOf(causeAdvice))
+  })
+
+  it('keeps the full hazard when the guard is behind a collapsed row', () => {
+    const comparisonError: GitOpsIssue = { severity: 'critical', scope: 'condition', reason: 'ComparisonError', message: 'Cannot render source.' }
+    const html = renderToString(<GitOpsIssuesBand issues={[{ ...failedSync, hazard: emptyRenderHazard }, comparisonError, guard]} />)
+    expect(html).toContain(emptyRenderHazard)
+    expect(html).not.toContain(emptyRenderReference)
+  })
+
+  it('keeps shared-ownership hazards unchanged', () => {
+    const hazard = 'Resolve shared ownership before syncing: some resources are also tracked by Application payments. A successful sync can take over their tracking unless it uses FailOnSharedResource=true. While Application payments still declares them, its next successful sync can take tracking back.'
+    const shared: GitOpsIssue = { severity: 'warning', scope: 'condition', reason: 'SharedResourceWarning', message: 'Shared resource' }
+    const html = renderToString(<GitOpsIssuesBand issues={[{ ...failedSync, hazard }, shared]} />)
+    expect(html).toContain(hazard)
+    expect(html).not.toContain(emptyRenderReference)
+  })
+
+  it('shows a remote failure’s destination-cluster instruction', () => {
+    const action = 'Create namespace demo on the destination cluster, or add the CreateNamespace=true sync option.'
+    const html = renderToString(<GitOpsIssuesBand issues={[{ ...failedSync, action }]} />)
+    expect(html).toContain(action)
+  })
+})

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

@@ -0,0 +1,73 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { GitOpsInsight } from '../../../types'
+import { GitOpsChangesView, GitOpsIssuesBand } from './GitOpsInsightViews'
+
+function insight(rolledBack: boolean): GitOpsInsight {
+  return {
+    summary: { tool: 'argocd', kind: 'Application', namespace: 'argocd', name: 'demo', autoSyncMode: 'Manual', operationPhase: 'Succeeded', rollbackRevision: rolledBack ? 'a'.repeat(40) : undefined },
+    issues: rolledBack ? [{
+      reason: 'RolledBack', scope: 'operation', severity: 'info',
+      message: `Last rollback deployed ${'a'.repeat(40)} by alice.`,
+      cause: "Auto-sync is off, so Argo won't deploy a new revision on its own. Changes made since the rollback can also show as drift. Syncing or enabling auto-sync deploys the current revision and can undo the rollback.",
+    }] : [],
+    changes: [{
+      ref: { group: 'apps', kind: 'Deployment', namespace: 'default', name: 'demo' },
+      sync: 'OutOfSync', category: 'OutOfSync', hasDesired: true, hasLive: true, partial: false,
+    }],
+  }
+}
+
+describe('rollback insights', () => {
+  it('puts the consequence on a separate line from the full revision', () => {
+    const html = renderToString(<GitOpsIssuesBand issues={insight(true).issues} />)
+    expect(html).toContain('a'.repeat(40))
+    expect(html).toMatch(/<span class="[^"]*whitespace-normal break-words">Last rollback deployed/)
+    expect(html).toMatch(/<p class="[^"]*">Auto-sync is off/)
+    expect(html).toContain('Changes made since the rollback can also show as drift.')
+  })
+
+  it('shows the mismatch revisions, compatibility explanation, and recovery advice in full', () => {
+    const message = `Last rollback deployed different sources or revisions than requested: ${'b'.repeat(40)} instead of ${'a'.repeat(40)}.`
+    const cause = "On Argo CD before 2.12, rolling back across a single-source/multi-source change or to a multi-source entry can deploy the wrong revisions or render nothing; with prune, it can delete resources."
+    const action = 'Check the Argo CD controller version, then sync the intended revision manually.'
+    const html = renderToString(<GitOpsIssuesBand issues={[{
+      reason: 'RollbackRevisionMismatch', scope: 'operation', severity: 'warning', message, cause, action,
+    }]} />)
+    expect(html).toMatch(/<span class="[^"]*whitespace-normal break-words">Last rollback deployed/)
+    expect(html).toContain(message)
+    expect(html).toMatch(/<p class="[^"]*">On Argo CD before 2.12/)
+    expect(html).toContain(action)
+  })
+
+  it('explains that resource Sync can undo the rollback', () => {
+    const html = renderToString(<GitOpsChangesView insight={insight(true)} />)
+    expect(html).toContain('Live state differs from Git after a rollback. Sync applies the desired state and can undo the rollback.')
+    expect(html).not.toContain('Click Sync to apply the desired state.')
+  })
+
+  it('keeps ordinary manual-drift resource copy unchanged', () => {
+    expect(renderToString(<GitOpsChangesView insight={insight(false)} />)).toContain('Live state differs from Git. Click Sync to apply the desired state.')
+  })
+})
+
+it('keeps Missing rows rollback-aware when sync is Unknown and no RolledBack issue exists', () => {
+  const data = insight(true)
+  data.summary.sync = 'Unknown'
+  data.issues = []
+  data.changes![0].sync = 'Unknown'
+  data.changes![0].missing = true
+  data.changes![0].hasLive = false
+  const html = renderToString(<GitOpsChangesView insight={data} />)
+  expect(html).toContain('Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.')
+  expect(html).not.toContain('Sync the application to create it.')
+})
+
+it('keeps Missing health explanations rollback-aware without a confirmed missing lookup', () => {
+  const data = insight(true)
+  data.changes![0].sync = 'Unknown'
+  data.changes![0].health = 'Missing'
+  const html = renderToString(<GitOpsChangesView insight={data} />)
+  expect(html).toContain('Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.')
+  expect(html).not.toContain('Declared in Git but not present in the cluster. Sync to create it.')
+})

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

@@ -0,0 +1,29 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { GitOpsIssue } from '../../../types/gitops-insights'
+import { GitOpsIssuesBand } from './GitOpsInsightViews'
+
+const windowIssues: GitOpsIssue[] = [
+  {
+    reason: 'SyncWindowBlocked', scope: 'operation', severity: 'warning',
+    message: "A sync window is holding this sync. Argo CD continues it when the AppProject's sync windows allow syncing.",
+    action: 'Wait for the window, or terminate the operation to drop it. A terminated operation stays Terminating until a window allows syncing; it applies nothing more, and changes already applied stay.',
+  },
+  {
+    reason: 'SyncWindowBlocked', scope: 'operation', severity: 'warning',
+    message: 'This operation was terminated while a sync window held it. Argo CD completes the termination when a window allows syncing. It applies nothing more; changes already applied stay.',
+    action: "Wait for the window to open, or change the AppProject's sync windows.",
+  },
+]
+
+describe('sync-window insights', () => {
+  it.each(windowIssues)('shows the full message and action for $message', (issue) => {
+    for (const issues of [[issue], [issue, { ...issue, reason: 'OtherIssue' }]]) {
+      const html = renderToString(<GitOpsIssuesBand issues={issues} />)
+      expect(html).toMatch(/<span class="[^"]*whitespace-normal break-words">/)
+      expect(html).not.toMatch(/<span class="[^"]*truncate">/)
+      expect(html).toContain(issue.message.replaceAll("'", '&#x27;'))
+      expect(html).toContain(`>${issue.action!.replaceAll("'", '&#x27;')}</p>`)
+    }
+  })
+})

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

@@ -9,6 +9,7 @@ import {
   entryTone,
   gitopsToSeverity,
   healthStatusRank,
+  historyRollbackBlockedReason,
   isArgoResourceSyncEligible,
   messageToPhase,
   missingResourceMessage,
@@ -30,6 +31,49 @@ describe('confirmed missing resources', () => {
     expect(isArgoResourceSyncEligible(item, true)).toBe(true)
   })
 
+  it.each(['OutOfSync', 'Unknown', undefined])('defers to the hazard before rollback advice for %s', (sync) => {
+    expect(missingResourceMessage(sync, { hazard: 'Sync can delete resources.', rolledBack: true })).toBe('Not present in the cluster. See the sync warning above before syncing this Application.')
+    expect(missingResourceMessage(sync, { hazard: 'Sync can delete resources.' })).toBe('Not present in the cluster. See the sync warning above before syncing this Application.')
+  })
+
+  it('keeps refresh advice for Synced even with hazard and rollback context', () => {
+    expect(missingResourceMessage('Synced', { hazard: 'Sync can delete resources.', rolledBack: true })).toBe(missingResourceMessage('Synced'))
+  })
+
+  it('uses named rollback context and treats an empty hazard as absent', () => {
+    expect(missingResourceMessage('OutOfSync', { rolledBack: true })).toBe('Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.')
+    expect(missingResourceMessage('OutOfSync', { hazard: '', rolledBack: true })).toBe(missingResourceMessage('OutOfSync', { rolledBack: true }))
+    expect(missingResourceMessage('OutOfSync', { rolledBack: false })).toBe(missingResourceMessage('OutOfSync'))
+  })
+
+  it('defers creation advice to the sync hazard while preserving stale Synced refresh advice', () => {
+    for (const sync of ['OutOfSync', 'Unknown', undefined]) {
+      expect(missingResourceMessage(sync, { hazard: 'Resolve shared ownership before syncing.' })).toBe(
+        'Not present in the cluster. See the sync warning above before syncing this Application.',
+      )
+    }
+    expect(missingResourceMessage('Synced', { hazard: 'A pruning sync could delete everything.' })).toContain('Refresh')
+  })
+
+  it('warns that recreating a missing resource can undo a rollback', () => {
+    for (const sync of ['OutOfSync', 'Unknown', undefined]) {
+      expect(missingResourceMessage(sync, { rolledBack: true })).toBe(
+        'Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.',
+      )
+    }
+  })
+
+  it('prioritizes the sync hazard over rollback advice', () => {
+    for (const sync of ['OutOfSync', 'Unknown', undefined]) {
+      expect(missingResourceMessage(sync, { hazard: 'Resolve shared tracking.', rolledBack: true })).toBe(
+        'Not present in the cluster. See the sync warning above before syncing this Application.',
+      )
+    }
+    // Argo calling it Synced means the cluster view is stale: refresh, whatever the context.
+    expect(missingResourceMessage('Synced', { hazard: 'Resolve shared tracking.', rolledBack: true })).toContain('Refresh the application')
+    expect(missingResourceMessage('OutOfSync', {})).toContain('Sync the application')
+  })
+
   it('asks for a refresh when Argo still reports Synced', () => {
     expect(missingResourceMessage('Synced')).toContain('Refresh')
     expect(missingResourceMessage('Synced')).not.toContain('Sync the application')
@@ -215,3 +259,24 @@ describe('syncStatusRank / healthStatusRank', () => {
     expect(healthStatusRank('Degraded')).toBeLessThan(healthStatusRank('Healthy'))
   })
 })
+
+describe('historyRollbackBlockedReason', () => {
+  const autoSync = 'Auto-sync is enabled.'
+  it('allows an entry the backend marks rollbackable', () => {
+    expect(historyRollbackBlockedReason({ id: '0', rollbackable: true })).toBeUndefined()
+  })
+  it('blocks an entry that records no source', () => {
+    expect(historyRollbackBlockedReason({ id: '1', rollbackable: false })).toMatch(/records no source/)
+  })
+  // Turning auto-sync off would not make this entry rollbackable.
+  it('names the missing source over auto-sync', () => {
+    expect(historyRollbackBlockedReason({ id: '1', rollbackable: false }, autoSync)).toMatch(/records no source/)
+  })
+  it('passes the app-wide reason through for a rollbackable entry', () => {
+    expect(historyRollbackBlockedReason({ id: '0', rollbackable: true }, autoSync)).toBe(autoSync)
+  })
+  // A Radar that predates the field omits it; the rollback API decides.
+  it('leaves an entry without the field enabled', () => {
+    expect(historyRollbackBlockedReason({ id: '2' })).toBeUndefined()
+  })
+})