@skyhook-io/radar-app 1.8.2 → 1.8.3

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -4,15 +4,15 @@ import { FetchResult, useDockReservedHeight, compareVersions } from '@skyhook-io
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
-import { X, Copy, Check, RefreshCw, Package, Code, History, FileText, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock } from 'lucide-react'
+import { X, Copy, Check, RefreshCw, Package, Code, History, FileText, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock, GitCompare, Plus, Minus, Equal } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { clsx } from 'clsx'
-import { useHelmRelease, useHelmManifest, useHelmValues, useHelmManifestDiff, useHelmUpgradeInfo, useHelmReleaseVersions, useHelmUninstall, upgradeWithProgress, rollbackWithProgress } from '../../api/client'
+import { useHelmRelease, useHelmManifest, useHelmValues, useHelmManifestDiff, useHelmValuesDiff, useHelmNotesDiff, useHelmResourceDiff, useHelmUpgradeInfo, useHelmReleaseVersions, useHelmUninstall, upgradeWithProgress, rollbackWithProgress } from '../../api/client'
 import { useQueryClient } from '@tanstack/react-query'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { Tooltip } from '../ui/Tooltip'
 import { Markdown } from '../ui/Markdown'
-import type { SelectedHelmRelease, HelmHook, ChartDependency, HelmOperation } from '../../types'
+import type { SelectedHelmRelease, HelmHook, ChartDependency, HelmOperation, HelmRevision, ResourceDiff, HookDiagnostic, HookLogEvidence } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { formatDate } from './helm-utils'
 import { getHelmStatusColor, SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
@@ -34,6 +34,7 @@ interface HelmReleaseDrawerProps {
 }
 
 type TabId = 'overview' | 'history' | 'manifest' | 'values' | 'resources' | 'hooks' | 'diff'
+type CompareMode = 'summary' | 'values' | 'manifest' | 'notes' | 'resources'
 
 const MIN_WIDTH = 500
 const MAX_WIDTH_PERCENT = 0.8
@@ -44,10 +45,12 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const [activeTab, setActiveTab] = useState<TabId>('overview')
   const [copied, setCopied] = useState<string | null>(null)
   const [drawerWidth, setDrawerWidth] = useState(DEFAULT_WIDTH)
+  const [viewportWidth, setViewportWidth] = useState(() => (typeof window === 'undefined' ? DEFAULT_WIDTH : window.innerWidth))
   const [isResizing, setIsResizing] = useState(false)
   const [selectedRevision, setSelectedRevision] = useState<number | undefined>(undefined)
   const [showAllValues, setShowAllValues] = useState(false)
   const [diffRevisions, setDiffRevisions] = useState<{ rev1: number; rev2: number } | null>(null)
+  const [compareMode, setCompareMode] = useState<CompareMode>('summary')
   const [rollbackRevision, setRollbackRevision] = useState<number | null>(null)
   const [showUninstallConfirm, setShowUninstallConfirm] = useState(false)
   const [showUpgradeConfirm, setShowUpgradeConfirm] = useState(false)
@@ -84,6 +87,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     release.name,
     showAllValues,
     canViewSensitive,
+    selectedRevision,
   )
 
   // Fetch diff if comparing revisions
@@ -92,7 +96,29 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     release.name,
     diffRevisions?.rev1 || 0,
     diffRevisions?.rev2 || 0,
-    canViewSensitive,
+    canViewSensitive && compareMode === 'manifest',
+  )
+  const { data: valuesDiffData, isLoading: valuesDiffLoading } = useHelmValuesDiff(
+    helmNamespace,
+    release.name,
+    diffRevisions?.rev1 || 0,
+    diffRevisions?.rev2 || 0,
+    false,
+    canViewSensitive && compareMode === 'values',
+  )
+  const { data: notesDiffData, isLoading: notesDiffLoading } = useHelmNotesDiff(
+    helmNamespace,
+    release.name,
+    diffRevisions?.rev1 || 0,
+    diffRevisions?.rev2 || 0,
+    canViewSensitive && compareMode === 'notes',
+  )
+  const { data: resourceDiffData, isLoading: resourceDiffLoading } = useHelmResourceDiff(
+    helmNamespace,
+    release.name,
+    diffRevisions?.rev1 || 0,
+    diffRevisions?.rev2 || 0,
+    canViewSensitive && compareMode === 'resources',
   )
 
   // Lazy check for upgrade availability
@@ -130,13 +156,24 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [onClose])
 
+  useEffect(() => {
+    const handleWindowResize = () => setViewportWidth(window.innerWidth)
+    handleWindowResize()
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
+
+  const minDrawerWidth = Math.min(MIN_WIDTH, viewportWidth)
+  const maxDrawerWidth = viewportWidth < MIN_WIDTH ? viewportWidth : Math.max(MIN_WIDTH, viewportWidth * MAX_WIDTH_PERCENT)
+  const renderedDrawerWidth = Math.max(minDrawerWidth, Math.min(drawerWidth, maxDrawerWidth))
+
   // Resize handlers
   const handleResizeStart = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
     setIsResizing(true)
     resizeStartX.current = e.clientX
-    resizeStartWidth.current = drawerWidth
-  }, [drawerWidth])
+    resizeStartWidth.current = renderedDrawerWidth
+  }, [renderedDrawerWidth])
 
   useEffect(() => {
     if (!isResizing) return
@@ -144,11 +181,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     document.body.style.cursor = 'ew-resize'
     document.body.style.userSelect = 'none'
 
-    const maxWidth = window.innerWidth * MAX_WIDTH_PERCENT
     const handleMouseMove = (e: MouseEvent) => {
       const deltaX = resizeStartX.current - e.clientX
       const newWidth = resizeStartWidth.current + deltaX
-      setDrawerWidth(Math.max(MIN_WIDTH, Math.min(newWidth, maxWidth)))
+      const viewport = window.innerWidth
+      const minWidth = Math.min(MIN_WIDTH, viewport)
+      const maxWidth = viewport < MIN_WIDTH ? viewport : Math.max(MIN_WIDTH, viewport * MAX_WIDTH_PERCENT)
+      setDrawerWidth(Math.max(minWidth, Math.min(newWidth, maxWidth)))
     }
     const handleMouseUp = () => setIsResizing(false)
     document.addEventListener('mousemove', handleMouseMove)
@@ -176,6 +215,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   const handleCompareRevisions = (rev1: number, rev2: number) => {
     setDiffRevisions({ rev1, rev2 })
+    setCompareMode('summary')
     switchTab('diff')
   }
 
@@ -310,7 +350,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   // Add diff tab only when comparing
   if (diffRevisions) {
-    tabs.push({ id: 'diff', label: 'Diff', icon: FileText })
+    tabs.push({ id: 'diff', label: 'Compare', icon: GitCompare })
   }
 
   return (
@@ -320,7 +360,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
         TRANSITION_DRAWER,
         isOpen ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
       )}
-      style={{ width: drawerWidth, top: headerHeight, height: `calc(100vh - ${headerHeight}px - ${dockInset}px)` }}
+      style={{ width: renderedDrawerWidth, top: headerHeight, height: `calc(100vh - ${headerHeight}px - ${dockInset}px)` }}
     >
       {/* Resize handle */}
       <div
@@ -409,7 +449,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   )}
                 >
                   <Link2 className="w-3 h-3" />
-                  source not tracked
+                  upgrade source not tracked
                 </button>
                 </Tooltip>
               ) : (
@@ -516,6 +556,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
             <HelmOperationBanner
               operation={releaseDetail.lastOperation}
               managedByFluxHelmRelease={releaseDetail.managedByFluxHelmRelease}
+              hookDiagnostics={releaseDetail.hookDiagnostics}
             />
             {activeTab === 'overview' && (
               <OverviewTab release={releaseDetail} onCopy={copyToClipboard} copied={copied} />
@@ -552,6 +593,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   copied={copied === 'values'}
                   namespace={helmNamespace}
                   name={release.name}
+                  revision={selectedRevision}
+                  currentRevision={releaseDetail.revision}
                   onApplySuccess={() => refetch()}
                 />
               </RoleGatedPanel>
@@ -563,17 +606,27 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               />
             )}
             {activeTab === 'hooks' && (
-              <HooksTab hooks={releaseDetail.hooks || []} />
+              <HooksTab hooks={releaseDetail.hooks || []} hookDiagnostics={releaseDetail.hookDiagnostics || []} />
             )}
             {activeTab === 'diff' && diffRevisions && (
-              <RoleGatedPanel min="member" feature="release manifest diffs">
-                <ManifestDiffViewer
-                  diff={diffData?.diff || ''}
-                  isLoading={diffLoading}
+              <RoleGatedPanel min="member" feature="release revision comparison">
+                <HelmRevisionCompareView
+                  revisions={releaseDetail.history}
                   revision1={diffRevisions.rev1}
                   revision2={diffRevisions.rev2}
+                  mode={compareMode}
+                  onModeChange={setCompareMode}
+                  manifestDiff={diffData?.diff || ''}
+                  manifestLoading={diffLoading}
+                  valuesDiff={valuesDiffData?.diff || ''}
+                  valuesLoading={valuesDiffLoading}
+                  notesDiff={notesDiffData?.diff || ''}
+                  notesLoading={notesDiffLoading}
+                  resourceDiff={resourceDiffData}
+                  resourceLoading={resourceDiffLoading}
                   onClose={() => {
                     setDiffRevisions(null)
+                    setCompareMode('summary')
                     setActiveTab('history')
                   }}
                 />
@@ -730,6 +783,278 @@ function mergeHelmOperations(operations: HelmOperation[] | undefined, lastOperat
   return merged
 }
 
+interface HelmRevisionCompareViewProps {
+  revisions: HelmRevision[]
+  revision1: number
+  revision2: number
+  mode: CompareMode
+  onModeChange: (mode: CompareMode) => void
+  manifestDiff: string
+  manifestLoading: boolean
+  valuesDiff: string
+  valuesLoading: boolean
+  notesDiff: string
+  notesLoading: boolean
+  resourceDiff?: ResourceDiff
+  resourceLoading: boolean
+  onClose: () => void
+}
+
+function HelmRevisionCompareView({
+  revisions,
+  revision1,
+  revision2,
+  mode,
+  onModeChange,
+  manifestDiff,
+  manifestLoading,
+  valuesDiff,
+  valuesLoading,
+  notesDiff,
+  notesLoading,
+  resourceDiff,
+  resourceLoading,
+  onClose,
+}: HelmRevisionCompareViewProps) {
+  const left = revisions.find((r) => r.revision === revision1)
+  const right = revisions.find((r) => r.revision === revision2)
+  const modes: Array<{ id: CompareMode; label: string; icon: typeof GitCompare }> = [
+    { id: 'summary', label: 'Summary', icon: GitCompare },
+    { id: 'values', label: 'Values', icon: Settings },
+    { id: 'manifest', label: 'Manifest', icon: Code },
+    { id: 'notes', label: 'Notes', icon: FileText },
+    { id: 'resources', label: 'Resources', icon: Link2 },
+  ]
+
+  return (
+    <div className="p-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <GitCompare className="h-4 w-4 text-theme-text-secondary" />
+            <span className="text-sm font-medium text-theme-text-primary">Revision {revision1} -&gt; {revision2}</span>
+          </div>
+          <p className="mt-1 text-xs text-theme-text-tertiary">
+            Compare rendered output and release metadata between two Helm revisions.
+          </p>
+        </div>
+        <button
+          onClick={onClose}
+          className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+        >
+          <X className="w-3.5 h-3.5" />
+          Close
+        </button>
+      </div>
+
+      <div className="mb-4 flex flex-wrap gap-1 rounded-lg bg-theme-base/50 p-1">
+        {modes.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => onModeChange(item.id)}
+            className={clsx(
+              'flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs transition-colors',
+              mode === item.id
+                ? 'bg-theme-elevated text-theme-text-primary shadow-theme-sm'
+                : 'text-theme-text-secondary hover:bg-theme-hover/70 hover:text-theme-text-primary'
+            )}
+          >
+            <item.icon className="h-3.5 w-3.5" />
+            {item.label}
+          </button>
+        ))}
+      </div>
+
+      {mode === 'summary' && <RevisionCompareSummary left={left} right={right} revision1={revision1} revision2={revision2} />}
+      {mode === 'values' && (
+        <ManifestDiffViewer
+          diff={valuesDiff}
+          isLoading={valuesLoading}
+          revision1={revision1}
+          revision2={revision2}
+          title={`Values diff: Revision ${revision1} -> ${revision2}`}
+          emptyLabel="No user-supplied value changes found"
+          onClose={onClose}
+        />
+      )}
+      {mode === 'manifest' && (
+        <ManifestDiffViewer
+          diff={manifestDiff}
+          isLoading={manifestLoading}
+          revision1={revision1}
+          revision2={revision2}
+          title={`Manifest diff: Revision ${revision1} -> ${revision2}`}
+          onClose={onClose}
+        />
+      )}
+      {mode === 'notes' && (
+        <ManifestDiffViewer
+          diff={notesDiff}
+          isLoading={notesLoading}
+          revision1={revision1}
+          revision2={revision2}
+          title={`Notes diff: Revision ${revision1} -> ${revision2}`}
+          emptyLabel="No release notes changes found"
+          onClose={onClose}
+        />
+      )}
+      {mode === 'resources' && (
+        <ResourceDiffView diff={resourceDiff} isLoading={resourceLoading} revision1={revision1} revision2={revision2} />
+      )}
+    </div>
+  )
+}
+
+function RevisionCompareSummary({
+  left,
+  right,
+  revision1,
+  revision2,
+}: {
+  left?: HelmRevision
+  right?: HelmRevision
+  revision1: number
+  revision2: number
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+        <RevisionSummaryCard revision={left} fallbackRevision={revision1} label="From" />
+        <RevisionSummaryCard revision={right} fallbackRevision={revision2} label="To" />
+      </div>
+      <div className="card-inner-lg">
+        <h3 className="text-sm font-medium text-theme-text-secondary">Changed fields</h3>
+        <div className="mt-3 grid grid-cols-1 gap-2 text-sm md:grid-cols-2">
+          <RevisionFieldDelta label="Chart" left={left?.chart} right={right?.chart} />
+          <RevisionFieldDelta label="App version" left={left?.appVersion || '-'} right={right?.appVersion || '-'} />
+          <RevisionFieldDelta label="Status" left={left?.status} right={right?.status} />
+          <RevisionFieldDelta label="Description" left={left?.description || '-'} right={right?.description || '-'} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function RevisionSummaryCard({ revision, fallbackRevision, label }: { revision?: HelmRevision; fallbackRevision: number; label: string }) {
+  return (
+    <div className="card-inner-lg">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-medium uppercase tracking-wide text-theme-text-tertiary">{label}</span>
+        <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">rev {revision?.revision || fallbackRevision}</span>
+      </div>
+      <div className="mt-3 space-y-2 text-sm">
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-theme-text-tertiary">Chart</span>
+          <span className="truncate text-theme-text-primary">{revision?.chart || '-'}</span>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-theme-text-tertiary">Status</span>
+          <span className={clsx('badge-sm', revision ? getHelmStatusColor(revision.status) : SEVERITY_BADGE.neutral)}>
+            {revision?.status || 'unknown'}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-theme-text-tertiary">Updated</span>
+          <span className="text-theme-text-secondary">{revision?.updated ? formatDate(revision.updated) : '-'}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function RevisionFieldDelta({ label, left, right }: { label: string; left?: string; right?: string }) {
+  const changed = (left || '') !== (right || '')
+  return (
+    <div className="rounded-md bg-theme-base/40 p-2">
+      <div className="mb-1 flex items-center justify-between gap-2">
+        <span className="text-xs text-theme-text-tertiary">{label}</span>
+        <span className={clsx('badge-sm', changed ? SEVERITY_BADGE.info : SEVERITY_BADGE.neutral)}>
+          {changed ? 'changed' : 'same'}
+        </span>
+      </div>
+      <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 text-xs">
+        <span className="truncate text-theme-text-secondary">{left || '-'}</span>
+        <span className="text-theme-text-tertiary">-&gt;</span>
+        <span className="truncate text-theme-text-primary">{right || '-'}</span>
+      </div>
+    </div>
+  )
+}
+
+function ResourceDiffView({
+  diff,
+  isLoading,
+  revision1,
+  revision2,
+}: {
+  diff?: ResourceDiff
+  isLoading: boolean
+  revision1: number
+  revision2: number
+}) {
+  if (isLoading) {
+    return <FetchResult loading className="h-32" />
+  }
+  if (!diff) {
+    return <FetchResult loading={false} notFoundMessage="Resource diff not available" className="h-32" />
+  }
+  return (
+    <div className="space-y-3">
+      <div className="text-sm font-medium text-theme-text-secondary">
+        Resource set diff: Revision {revision1} -&gt; {revision2}
+      </div>
+      <ResourceDiffGroup title="Added" icon={Plus} tone="success" resources={diff.added} />
+      <ResourceDiffGroup title="Removed" icon={Minus} tone="error" resources={diff.removed} />
+      <ResourceDiffGroup title="Unchanged" icon={Equal} tone="neutral" resources={diff.unchanged} collapsed />
+    </div>
+  )
+}
+
+function ResourceDiffGroup({
+  title,
+  icon: Icon,
+  tone,
+  resources,
+  collapsed = false,
+}: {
+  title: string
+  icon: typeof Plus
+  tone: keyof typeof SEVERITY_BADGE
+  resources: ResourceDiff['added']
+  collapsed?: boolean
+}) {
+  const items = resources || []
+  const visible = collapsed ? items.slice(0, 12) : items
+  return (
+    <div className="card-inner-lg">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Icon className="h-4 w-4 text-theme-text-secondary" />
+          <span className="text-sm font-medium text-theme-text-primary">{title}</span>
+        </div>
+        <span className={clsx('badge-sm', SEVERITY_BADGE[tone])}>{items.length}</span>
+      </div>
+      {items.length === 0 ? (
+        <div className="text-sm text-theme-text-tertiary">None</div>
+      ) : (
+        <div className="space-y-1">
+          {visible.map((resource) => (
+            <div key={`${resource.apiVersion}/${resource.kind}/${resource.namespace}/${resource.name}`} className="grid grid-cols-[110px_1fr] gap-2 rounded bg-theme-base/40 px-2 py-1 text-xs">
+              <span className="text-theme-text-tertiary">{resource.kind}</span>
+              <span className="truncate text-theme-text-primary">
+                {resource.namespace ? `${resource.namespace}/` : ''}{resource.name}
+              </span>
+            </div>
+          ))}
+          {visible.length < items.length && (
+            <div className="text-xs text-theme-text-tertiary">+{items.length - visible.length} more unchanged resources</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function helmOperationKey(operation: HelmOperation): string {
   return [
     operation.kind,
@@ -744,19 +1069,41 @@ function helmOperationKey(operation: HelmOperation): string {
 function HelmOperationBanner({
   operation,
   managedByFluxHelmRelease,
+  hookDiagnostics,
 }: {
   operation?: HelmOperation
   managedByFluxHelmRelease?: string
+  hookDiagnostics?: HookDiagnostic[]
 }) {
-  if (!operation || !shouldShowOperationBanner(operation)) {
+  const primaryHookDiagnostic = hookDiagnostics?.[0]
+  if ((!operation || !shouldShowOperationBanner(operation)) && !primaryHookDiagnostic) {
     return null
   }
+  if (!operation || !shouldShowOperationBanner(operation)) {
+    const tone = hookDiagnosticTone(primaryHookDiagnostic!)
+    return (
+      <div className="m-4 mb-0 card-inner-lg">
+        <div className="flex items-start gap-3">
+          <AlertTriangle className={clsx('mt-0.5 h-5 w-5 shrink-0', SEVERITY_TEXT[tone])} />
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-sm font-medium text-theme-text-primary">Helm hook needs attention</span>
+              <span className={clsx('badge-sm', SEVERITY_BADGE[tone])}>{primaryHookDiagnostic!.phase}</span>
+            </div>
+            <HookSignal diagnostic={primaryHookDiagnostic!} />
+          </div>
+        </div>
+      </div>
+    )
+  }
 
   const isFailure = operation.status === 'failed'
   const isPending = operation.status === 'stuck_pending'
   const tone: 'error' | 'warning' | 'info' = isFailure ? 'error' : operation.kind === 'rollback' ? 'info' : 'warning'
   const Icon = operation.kind === 'upgrade_rolled_back' || operation.kind === 'rollback' ? RotateCcw : isPending ? Clock : AlertTriangle
   const title = operationTitle(operation)
+  const statusLabel = operation.status.replace(/_/g, ' ')
+  const showStatusBadge = !(operation.status === 'failed' && title.toLowerCase().includes('failed'))
 
   return (
     <div className="m-4 mb-0 card-inner-lg">
@@ -765,7 +1112,9 @@ function HelmOperationBanner({
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
             <span className="text-sm font-medium text-theme-text-primary">{title}</span>
-            <span className={clsx('badge-sm', SEVERITY_BADGE[tone])}>{operation.status.replace(/_/g, ' ')}</span>
+            {showStatusBadge && (
+              <span className={clsx('badge-sm', SEVERITY_BADGE[tone])}>{statusLabel}</span>
+            )}
             <OperationRevisionChips operation={operation} />
           </div>
           <p className="mt-1 text-sm text-theme-text-secondary">{operation.message}</p>
@@ -779,6 +1128,7 @@ function HelmOperationBanner({
               Helm history does not record whether <code className="inline-code text-[11px]">--atomic</code> was set; the rollback is inferred from adjacent release revisions.
             </p>
           )}
+          {primaryHookDiagnostic && <HookSignal diagnostic={primaryHookDiagnostic} />}
           {managedByFluxHelmRelease && (
             <p className="mt-1 text-xs text-theme-text-tertiary">
               This release is managed by Flux HelmRelease {managedByFluxHelmRelease}; direct Helm changes may be reconciled back.
@@ -790,6 +1140,27 @@ function HelmOperationBanner({
   )
 }
 
+function hookDiagnosticTone(diagnostic: HookDiagnostic): 'error' | 'warning' {
+  return diagnostic.phase.toLowerCase() === 'failed' ? 'error' : 'warning'
+}
+
+function HookSignal({ diagnostic }: { diagnostic: HookDiagnostic }) {
+  return (
+    <div className="mt-2 rounded-md bg-theme-base/50 p-2 text-xs">
+      <div className="font-medium text-theme-text-secondary">
+        Hook signal: {formatHookRef(diagnostic)} is {diagnostic.phase}
+      </div>
+      <div className="mt-1 text-theme-text-tertiary">{diagnostic.message}</div>
+      {diagnostic.evidence?.summary && (
+        <div className="mt-1 text-theme-text-secondary">{diagnostic.evidence.summary}</div>
+      )}
+      {diagnostic.evidenceUnavailableReason && (
+        <div className="mt-1 text-theme-text-tertiary">{diagnostic.evidenceUnavailableReason}</div>
+      )}
+    </div>
+  )
+}
+
 function shouldShowOperationBanner(operation: HelmOperation): boolean {
   return operation.kind === 'upgrade_rolled_back' || operation.kind === 'rollback' || operation.status === 'failed' || operation.status === 'stuck_pending'
 }
@@ -972,9 +1343,10 @@ function OverviewTab({ release, onCopy, copied }: OverviewTabProps) {
 // Hooks tab content
 interface HooksTabProps {
   hooks: HelmHook[]
+  hookDiagnostics: HookDiagnostic[]
 }
 
-function HooksTab({ hooks }: HooksTabProps) {
+function HooksTab({ hooks, hookDiagnostics }: HooksTabProps) {
   if (hooks.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center h-48 text-theme-text-tertiary">
@@ -1006,23 +1378,31 @@ function HooksTab({ hooks }: HooksTabProps) {
     return SEVERITY_BADGE.neutral
   }
 
+  const diagnostics = new Map<string, HookDiagnostic>()
+  for (const diagnostic of hookDiagnostics) {
+    diagnostics.set(hookDiagnosticKey(diagnostic.namespace, diagnostic.kind, diagnostic.name), diagnostic)
+    diagnostics.set(hookDiagnosticKey(undefined, diagnostic.kind, diagnostic.name), diagnostic)
+  }
+
   return (
     <div className="p-4 space-y-3">
-      <p className="text-sm text-theme-text-secondary mb-4">
-        Helm hooks are executed at specific points during the release lifecycle.
-      </p>
-      {hooks.map((hook) => (
-        <div key={hook.name} className="bg-theme-elevated/30 rounded-lg p-4">
-          <div className="flex items-start justify-between mb-2">
-            <div>
-              <div className="flex items-center gap-2">
-                <span className="text-theme-text-primary font-medium">{hook.name}</span>
-                <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">
+      {hooks.map((hook) => {
+        const diagnostic = diagnostics.get(hookDiagnosticKey(hook.namespace, hook.kind, hook.name))
+          || diagnostics.get(hookDiagnosticKey(undefined, hook.kind, hook.name))
+        return (
+        <div key={`${hook.namespace || '_'}:${hook.kind}:${hook.name}`} className="bg-theme-elevated/30 rounded-lg p-4">
+          <div className="flex items-start justify-between gap-3 mb-2">
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="break-all text-theme-text-primary font-medium">{hook.name}</span>
+                <span className="badge-sm shrink-0 bg-theme-hover/50 text-theme-text-secondary">
                   {hook.kind}
                 </span>
               </div>
-              <div className="flex items-center gap-2 mt-1 text-xs text-theme-text-tertiary">
+              <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-theme-text-tertiary">
+                {hook.namespace && <span className="break-all">Namespace: {hook.namespace}</span>}
                 <span>Weight: {hook.weight}</span>
+                {hook.path && <span className="break-all">Path: {hook.path}</span>}
               </div>
             </div>
             {hook.status && (
@@ -1041,8 +1421,172 @@ function HooksTab({ hooks }: HooksTabProps) {
               </span>
             ))}
           </div>
+          {(hook.startedAt || hook.completedAt || hook.deletePolicies?.length || hook.outputLogPolicies?.length) && (
+            <div className="mt-3 grid grid-cols-1 gap-2 text-xs text-theme-text-tertiary sm:grid-cols-2">
+              {hook.startedAt && (
+                <div>
+                  <span className="text-theme-text-disabled">Started: </span>
+                  <span>{formatDate(hook.startedAt)}</span>
+                </div>
+              )}
+              {hook.completedAt && (
+                <div>
+                  <span className="text-theme-text-disabled">Completed: </span>
+                  <span>{formatDate(hook.completedAt)}</span>
+                </div>
+              )}
+              {hook.deletePolicies && hook.deletePolicies.length > 0 && (
+                <div className="sm:col-span-2">
+                  <span className="text-theme-text-disabled">Delete policies: </span>
+                  <span>{hook.deletePolicies.join(', ')}</span>
+                </div>
+              )}
+              {hook.outputLogPolicies && hook.outputLogPolicies.length > 0 && (
+                <div className="sm:col-span-2">
+                  <span className="text-theme-text-disabled">Output log policies: </span>
+                  <span>{hook.outputLogPolicies.join(', ')}</span>
+                </div>
+              )}
+            </div>
+          )}
+          {diagnostic && <HookDiagnosticEvidence diagnostic={diagnostic} />}
         </div>
-      ))}
+        )
+      })}
+    </div>
+  )
+}
+
+function hookDiagnosticKey(namespace: string | undefined, kind: string | undefined, name: string | undefined): string {
+  return `${namespace || ''}/${(kind || '').toLowerCase()}/${name || ''}`
+}
+
+function formatHookRef(hook: Pick<HookDiagnostic, 'namespace' | 'kind' | 'name'>): string {
+  return `${hook.namespace ? `${hook.namespace}/` : ''}${hook.name} (${hook.kind})`
+}
+
+function HookDiagnosticEvidence({ diagnostic }: { diagnostic: HookDiagnostic }) {
+  const evidence = diagnostic.evidence
+
+  return (
+    <div className="mt-3 border-t border-theme-border/60 pt-3 text-xs">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="font-medium text-theme-text-secondary">Diagnostic evidence</span>
+        <span className={clsx('badge-sm', diagnostic.phase.toLowerCase() === 'failed' ? SEVERITY_BADGE.error : SEVERITY_BADGE.warning)}>
+          {diagnostic.phase}
+        </span>
+        {evidence?.summary && <span className="text-theme-text-tertiary">{evidence.summary}</span>}
+      </div>
+      <div className="mt-1 text-theme-text-tertiary">{diagnostic.message}</div>
+      {diagnostic.evidenceUnavailableReason && (
+        <div className="mt-1 text-theme-text-tertiary">{diagnostic.evidenceUnavailableReason}</div>
+      )}
+      {evidence && (
+        <div className="mt-3 space-y-3">
+          {evidence.jobs && evidence.jobs.length > 0 && (
+            <div className="space-y-1">
+              {evidence.jobs.map((job) => (
+                <div key={`${job.namespace || ''}/${job.name}`} className="grid grid-cols-[80px_1fr] gap-2 rounded bg-theme-base/40 px-2 py-1">
+                  <span className="text-theme-text-tertiary">Job</span>
+                  <span className="min-w-0 text-theme-text-primary">
+                    <span className="break-all font-medium">{job.namespace ? `${job.namespace}/` : ''}{job.name}</span>
+                    {job.status && <span className="ml-2 text-theme-text-secondary">{job.status}</span>}
+                    <span className="ml-2 text-theme-text-tertiary">
+                      active {job.active || 0} · succeeded {job.succeeded || 0} · failed {job.failed || 0}
+                    </span>
+                  </span>
+                  {job.conditions?.map((condition) => (
+                    <span key={condition} className="col-start-2 text-theme-text-tertiary">{condition}</span>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {evidence.pods && evidence.pods.length > 0 && (
+            <div className="space-y-1">
+              {evidence.pods.map((pod) => (
+                <div key={`${pod.namespace || ''}/${pod.name}`} className="grid grid-cols-[80px_1fr] gap-2 rounded bg-theme-base/40 px-2 py-1">
+                  <span className="text-theme-text-tertiary">Pod</span>
+                  <span className="min-w-0 text-theme-text-primary">
+                    <span className="break-all font-medium">{pod.namespace ? `${pod.namespace}/` : ''}{pod.name}</span>
+                    {pod.phase && <span className="ml-2 text-theme-text-secondary">{pod.phase}</span>}
+                    {pod.ready && <span className="ml-2 text-theme-text-tertiary">{pod.ready} ready</span>}
+                    {Boolean(pod.restartCount) && <span className="ml-2 text-theme-text-tertiary">{pod.restartCount} restarts</span>}
+                  </span>
+                  {(pod.reason || pod.message) && (
+                    <span className="col-start-2 text-theme-text-tertiary">
+                      {pod.reason && <span className="font-medium">{pod.reason}: </span>}
+                      {pod.message}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {evidence.events && evidence.events.length > 0 && (
+            <div className="space-y-1">
+              {evidence.events.map((event, index) => (
+                <div key={`${event.involvedKind}/${event.involvedName}/${event.reason || index}`} className="grid grid-cols-[80px_1fr] gap-2 rounded bg-theme-base/40 px-2 py-1">
+                  <span className="text-theme-text-tertiary">Event</span>
+                  <span className="min-w-0 text-theme-text-primary">
+                    <span className={clsx('badge-sm mr-2', event.type === 'Warning' ? SEVERITY_BADGE.warning : SEVERITY_BADGE.neutral)}>
+                      {event.type || 'Event'}
+                    </span>
+                    <span className="font-medium">{event.reason || 'Unknown'}</span>
+                    <span className="ml-2 break-all text-theme-text-tertiary">{event.involvedKind}/{event.involvedName}</span>
+                  </span>
+                  {event.message && <span className="col-start-2 text-theme-text-tertiary">{event.message}</span>}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {evidence.logs && evidence.logs.length > 0 && (
+            <div className="space-y-2">
+              {evidence.logs.map((log, index) => (
+                <HookLogEvidenceBlock key={`${log.pod}/${log.container}/${log.previous ? 'previous' : 'current'}/${index}`} log={log} />
+              ))}
+            </div>
+          )}
+
+          {evidence.errors && evidence.errors.length > 0 && (
+            <div className="space-y-1 text-theme-text-tertiary">
+              {evidence.errors.map((error) => (
+                <div key={error}>Evidence read error: {error}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function HookLogEvidenceBlock({ log }: { log: HookLogEvidence }) {
+  const visibleLines = (log.lines || []).slice(0, 8)
+
+  return (
+    <div className="rounded bg-theme-base/40 px-2 py-2">
+      <div className="mb-1 flex flex-wrap items-center gap-2 text-theme-text-secondary">
+        <span className="font-medium">Logs</span>
+        <span className="break-all">{log.pod}/{log.container}</span>
+        {log.previous && <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">previous</span>}
+        {log.fallback && <span className="text-theme-text-tertiary">fallback tail</span>}
+      </div>
+      {log.error ? (
+        <div className="text-theme-text-tertiary">{log.error}</div>
+      ) : (
+        <>
+          <pre className="max-h-44 overflow-auto whitespace-pre-wrap rounded bg-theme-base px-2 py-1 font-mono text-[11px] leading-5 text-theme-text-secondary">
+            {visibleLines.join('\n')}
+          </pre>
+          {log.lines && log.lines.length > visibleLines.length && (
+            <div className="mt-1 text-theme-text-tertiary">+{log.lines.length - visibleLines.length} more lines in API response</div>
+          )}
+        </>
+      )}
     </div>
   )
 }