@skyhook-io/radar-app 1.8.1 → 1.8.3

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -1,18 +1,18 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { flushSync } from 'react-dom'
-import { FetchResult, useDockReservedHeight } from '@skyhook-io/k8s-ui'
+import { FetchResult, useDockReservedHeight, compareVersions } from '@skyhook-io/k8s-ui'
 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 } 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, 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 } 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'
@@ -23,6 +23,7 @@ import { ManifestViewer } from './ManifestViewer'
 import { ValuesViewer } from './ValuesViewer'
 import { OwnedResources } from './OwnedResources'
 import { ManifestDiffViewer } from './ManifestDiffViewer'
+import { TrackChartSourceDialog } from './TrackChartSourceDialog'
 
 interface HelmReleaseDrawerProps {
   release: SelectedHelmRelease
@@ -33,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
@@ -43,13 +45,17 @@ 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)
+  const [showTrackSource, setShowTrackSource] = useState(false)
+  const [selectedVersion, setSelectedVersion] = useState<string | null>(null)
   const resizeStartX = useRef(0)
   const resizeStartWidth = useRef(DEFAULT_WIDTH)
   const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
@@ -81,6 +87,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     release.name,
     showAllValues,
     canViewSensitive,
+    selectedRevision,
   )
 
   // Fetch diff if comparing revisions
@@ -89,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
@@ -99,6 +128,17 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   )
   const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade check failed'
 
+  // Available versions for the upgrade dialog's picker — only fetched while the
+  // confirm dialog is open. Default the selection to latest when it opens.
+  const { data: availableVersions } = useHelmReleaseVersions(helmNamespace, release.name, showUpgradeConfirm)
+  const targetVersion = selectedVersion ?? upgradeInfo?.latestVersion ?? ''
+  // Semver compare, not list-position: the installed version may be older than
+  // the newest-N versions the picker shows, so it isn't always in the list.
+  const isDowngrade = Boolean(
+    targetVersion && upgradeInfo?.currentVersion &&
+    compareVersions(targetVersion, upgradeInfo.currentVersion) === -1
+  )
+
   // Mutations for actions
   const uninstallMutation = useHelmUninstall()
   const queryClient = useQueryClient()
@@ -116,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
@@ -130,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)
@@ -162,6 +215,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   const handleCompareRevisions = (rev1: number, rev2: number) => {
     setDiffRevisions({ rev1, rev2 })
+    setCompareMode('summary')
     switchTab('diff')
   }
 
@@ -234,7 +288,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   }
 
   const handleUpgradeConfirm = async () => {
-    if (!upgradeInfo?.latestVersion) return
+    if (!targetVersion) return
     setIsUpgrading(true)
     setUpgradeProgress([])
 
@@ -242,8 +296,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       await upgradeWithProgress(
         helmNamespace,
         release.name,
-        upgradeInfo.latestVersion,
-        upgradeInfo.repositoryName,
+        targetVersion,
+        upgradeInfo?.repositoryName,
         (event) => {
           if (event.type === 'progress' && event.message) {
             setUpgradeProgress(prev => [...prev, {
@@ -256,7 +310,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
       setUpgradeProgress(prev => [...prev, {
         phase: 'complete',
-        message: `Successfully upgraded to ${upgradeInfo.latestVersion}`,
+        message: `Successfully upgraded to ${targetVersion}`,
       }])
 
       // Invalidate queries
@@ -268,6 +322,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       setTimeout(() => {
         setShowUpgradeConfirm(false)
         setUpgradeProgress([])
+        setSelectedVersion(null)
         refetch()
         switchTab('resources')
       }, 1500)
@@ -295,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 (
@@ -305,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
@@ -342,8 +397,18 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                 upgrade check failed
               </span>
               </Tooltip>
+            ) : upgradeInfo?.updateAvailable && releaseDetail?.managedByFluxHelmRelease ? (
+              // Route-only for GitOps-managed releases: a direct `helm upgrade`
+              // would be reverted at the next reconcile, so surface the available
+              // version as info and point at GitOps rather than offer the upgrade.
+              <Tooltip content={`${upgradeInfo.latestVersion} available — managed by Flux, upgrade via the GitOps view (a direct upgrade would be reverted at the next reconcile).`}>
+              <span className={clsx('badge', SEVERITY_BADGE.warning, 'opacity-90')}>
+                <ArrowUpCircle className="w-3 h-3" />
+                {upgradeInfo.latestVersion}
+              </span>
+              </Tooltip>
             ) : upgradeInfo?.updateAvailable ? (
-              <Tooltip content={canHelmWrite ? `Click to upgrade: ${upgradeInfo.currentVersion} → ${upgradeInfo.latestVersion}${upgradeInfo.repositoryName ? ` (${upgradeInfo.repositoryName})` : ''}` : helmActReason}>
+              <Tooltip content={canHelmWrite ? `Click to upgrade: ${upgradeInfo.currentVersion} → ${upgradeInfo.latestVersion}${upgradeInfo.repositoryName ? ` (${upgradeInfo.repositoryName})` : upgradeInfo.sourceType === 'oci' ? ' (OCI)' : ''}` : helmActReason}>
               <button
                 onClick={() => setShowUpgradeConfirm(true)}
                 disabled={!canHelmWrite}
@@ -363,13 +428,39 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               </span>
               </Tooltip>
             ) : upgradeInfo?.error ? (
-              <Tooltip content={upgradeInfo.error}>
-              <span
-                className="badge bg-theme-hover/50 text-theme-text-secondary"
-              >
-                upstream unknown
-              </span>
-              </Tooltip>
+              releaseDetail?.managedByFluxHelmRelease ? (
+                // Managed by Flux — the "Managed by Flux" badge routes to GitOps,
+                // where the chart source lives. Don't push a Helm source here.
+                <Tooltip content="Chart source is managed by Flux — track upgrades from the GitOps view.">
+                <span className="badge bg-theme-hover/50 text-theme-text-secondary">
+                  source via GitOps
+                </span>
+                </Tooltip>
+              ) : upgradeInfo.untracked ? (
+                // Helm doesn't record the install source. Offer to register one so
+                // Radar can track upgrades for the user's own (e.g. OCI) charts.
+                <Tooltip content={canHelmWrite ? "Radar can't tell where this chart was installed from. Register your chart source to track upgrades." : upgradeInfo.error}>
+                <button
+                  onClick={() => canHelmWrite && setShowTrackSource(true)}
+                  disabled={!canHelmWrite}
+                  className={clsx(
+                    'badge transition-colors disabled:pointer-events-none bg-theme-hover/50 text-theme-text-secondary',
+                    canHelmWrite ? 'hover:bg-theme-hover cursor-pointer' : 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <Link2 className="w-3 h-3" />
+                  upgrade source not tracked
+                </button>
+                </Tooltip>
+              ) : (
+                // Repo-side error (stale/broken index, classic ambiguity) — not an
+                // OCI tracking issue, so surface it without steering to registration.
+                <Tooltip content={upgradeInfo.error}>
+                <span className="badge bg-theme-hover/50 text-theme-text-secondary">
+                  upgrade source unresolved
+                </span>
+                </Tooltip>
+              )
             ) : null}
           </div>
           <div className="flex items-center gap-1">
@@ -462,6 +553,11 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
           <FetchResult loading={isLoading} error={releaseError} notFoundMessage="Release not found" className="h-32" />
         ) : (
           <>
+            <HelmOperationBanner
+              operation={releaseDetail.lastOperation}
+              managedByFluxHelmRelease={releaseDetail.managedByFluxHelmRelease}
+              hookDiagnostics={releaseDetail.hookDiagnostics}
+            />
             {activeTab === 'overview' && (
               <OverviewTab release={releaseDetail} onCopy={copyToClipboard} copied={copied} />
             )}
@@ -469,6 +565,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               <RevisionHistory
                 history={releaseDetail.history}
                 currentRevision={releaseDetail.revision}
+                operations={mergeHelmOperations(releaseDetail.operations, releaseDetail.lastOperation)}
                 onViewRevision={handleViewRevision}
                 onCompare={handleCompareRevisions}
                 onRollback={canHelmWrite ? handleRollbackRequest : undefined}
@@ -496,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>
@@ -507,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')
                   }}
                 />
@@ -572,6 +681,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
         onClose={() => {
           setShowUpgradeConfirm(false)
           setUpgradeProgress([])
+          setSelectedVersion(null)
           if (isUpgrading) {
             // Upgrade continues server-side — switch to resources tab to monitor
             setIsUpgrading(false)
@@ -580,18 +690,56 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
         }}
         onConfirm={handleUpgradeConfirm}
         title="Upgrade Release"
-        message={`Upgrade "${release.name}" to version ${upgradeInfo?.latestVersion}?`}
+        message={`Upgrade "${release.name}" to version ${targetVersion}?`}
         details={upgradeProgress.length === 0
-          ? `This will upgrade the chart from version ${upgradeInfo?.currentVersion} to ${upgradeInfo?.latestVersion}. Your existing values will be preserved. The upgrade will be applied to your cluster immediately.`
+          ? `The chart will move from version ${upgradeInfo?.currentVersion} to ${targetVersion}. Your existing values will be preserved. The change is applied to your cluster immediately.`
           : undefined
         }
-        confirmLabel="Upgrade"
+        confirmLabel={isDowngrade ? 'Downgrade' : 'Upgrade'}
         variant="warning"
         isLoading={isUpgrading}
         isClosable
       >
+        {upgradeProgress.length === 0 && availableVersions && availableVersions.length > 1 && (
+          <div className="mb-1">
+            <label htmlFor="upgrade-version" className="block text-sm font-medium text-theme-text-secondary mb-1.5">
+              Target version
+            </label>
+            <select
+              id="upgrade-version"
+              value={targetVersion}
+              onChange={(e) => setSelectedVersion(e.target.value)}
+              disabled={isUpgrading}
+              className="w-full px-3 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-accent disabled:opacity-50"
+            >
+              {availableVersions.map((v) => (
+                <option key={v} value={v}>
+                  {v}
+                  {v === upgradeInfo?.latestVersion ? ' (latest)' : ''}
+                  {v === upgradeInfo?.currentVersion ? ' (current)' : ''}
+                </option>
+              ))}
+            </select>
+            {isDowngrade && (
+              <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
+                This is a downgrade from {upgradeInfo?.currentVersion}.
+              </p>
+            )}
+            {availableVersions.length >= 50 && (
+              <p className="mt-1 text-xs text-theme-text-tertiary">
+                Showing the 50 newest versions. Type to filter.
+              </p>
+            )}
+          </div>
+        )}
         {upgradeProgress.length > 0 && <ProgressLog entries={upgradeProgress} />}
       </ConfirmDialog>
+
+      <TrackChartSourceDialog
+        open={showTrackSource}
+        onClose={() => setShowTrackSource(false)}
+        chartName={releaseDetail?.chart}
+      />
     </div>
   )
 }
@@ -623,6 +771,443 @@ function ProgressLog({ entries }: { entries: { phase: string; message: string }[
   )
 }
 
+function mergeHelmOperations(operations: HelmOperation[] | undefined, lastOperation: HelmOperation | undefined): HelmOperation[] {
+  const merged: HelmOperation[] = []
+  const seen = new Set<string>()
+  for (const op of [...(operations || []), ...(lastOperation ? [lastOperation] : [])]) {
+    const key = helmOperationKey(op)
+    if (seen.has(key)) continue
+    seen.add(key)
+    merged.push(op)
+  }
+  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,
+    operation.status,
+    operation.revision || 0,
+    operation.failedRevision || 0,
+    operation.rollbackRevision || 0,
+    operation.targetRevision || 0,
+  ].join(':')
+}
+
+function HelmOperationBanner({
+  operation,
+  managedByFluxHelmRelease,
+  hookDiagnostics,
+}: {
+  operation?: HelmOperation
+  managedByFluxHelmRelease?: string
+  hookDiagnostics?: HookDiagnostic[]
+}) {
+  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">
+      <div className="flex items-start gap-3">
+        <Icon 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">{title}</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>
+          {operation.failureDescription && (
+            <p className="mt-1 text-xs text-theme-text-tertiary truncate">
+              {operation.failureDescription}
+            </p>
+          )}
+          {operation.kind === 'upgrade_rolled_back' && (
+            <p className="mt-1 text-xs text-theme-text-tertiary">
+              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.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+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'
+}
+
+function operationTitle(operation: HelmOperation): string {
+  switch (operation.kind) {
+    case 'upgrade_rolled_back':
+      return 'Helm rolled back after failed upgrade'
+    case 'rollback':
+      return 'Helm rollback applied'
+    case 'pending':
+      return 'Helm operation may be stuck'
+    case 'upgrade_failed':
+      return 'Helm upgrade failed'
+    case 'release_failed':
+      return 'Helm release failed'
+    default:
+      return 'Helm operation'
+  }
+}
+
+function OperationRevisionChips({ operation }: { operation: HelmOperation }) {
+  const chips: Array<{ key: string; label: string; className: string }> = []
+  if (operation.failedRevision) {
+    chips.push({ key: 'failed', label: `failed rev ${operation.failedRevision}`, className: SEVERITY_BADGE.error })
+  }
+  if (operation.rollbackRevision) {
+    chips.push({ key: 'rollback', label: `rollback rev ${operation.rollbackRevision}`, className: SEVERITY_BADGE.warning })
+  }
+  if (operation.targetRevision) {
+    chips.push({ key: 'target', label: `target rev ${operation.targetRevision}`, className: SEVERITY_BADGE.info })
+  }
+  if (!operation.failedRevision && !operation.rollbackRevision && operation.revision) {
+    chips.push({ key: 'revision', label: `rev ${operation.revision}`, className: SEVERITY_BADGE.neutral })
+  }
+  if (chips.length === 0) {
+    return null
+  }
+  return (
+    <>
+      {chips.map((chip) => (
+        <span key={chip.key} className={clsx('badge-sm', chip.className)}>{chip.label}</span>
+      ))}
+    </>
+  )
+}
+
 // Overview tab content
 interface OverviewTabProps {
   release: {
@@ -758,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">
@@ -792,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 && (
@@ -827,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>
   )
 }