@skyhook-io/radar-app 1.8.2 → 1.8.5

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -4,25 +4,24 @@ 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, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock, GitCompare, ExternalLink } 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, 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 { NavigateToResource } from '../../utils/navigation'
+import type { SelectedHelmRelease, HelmHook, ChartDependency, HelmOperation, HelmOperationInsight, HelmOwnedResource, HookDiagnostic, HookLogEvidence } from '../../types'
+import { apiVersionToGroup, kindToPlural, type NavigateToResource } from '../../utils/navigation'
 import { formatDate } from './helm-utils'
-import { getHelmStatusColor, SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
+import { getHelmStatusColor, getKindBadgeColor, getResourceStatusColor, SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { useCanHelmAct, useCloudRole } from '../../api/client'
 import { RoleGatedPanel } from './RoleGatedPanel'
 import { RevisionHistory } from './RevisionHistory'
 import { ManifestViewer } from './ManifestViewer'
 import { ValuesViewer } from './ValuesViewer'
 import { OwnedResources } from './OwnedResources'
-import { ManifestDiffViewer } from './ManifestDiffViewer'
 import { TrackChartSourceDialog } from './TrackChartSourceDialog'
 
 interface HelmReleaseDrawerProps {
@@ -33,7 +32,7 @@ interface HelmReleaseDrawerProps {
   isOpen?: boolean
 }
 
-type TabId = 'overview' | 'history' | 'manifest' | 'values' | 'resources' | 'hooks' | 'diff'
+type TabId = 'overview' | 'history' | 'manifest' | 'values' | 'resources' | 'hooks'
 
 const MIN_WIDTH = 500
 const MAX_WIDTH_PERCENT = 0.8
@@ -44,10 +43,10 @@ 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 [rollbackRevision, setRollbackRevision] = useState<number | null>(null)
   const [showUninstallConfirm, setShowUninstallConfirm] = useState(false)
   const [showUpgradeConfirm, setShowUpgradeConfirm] = useState(false)
@@ -84,15 +83,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     release.name,
     showAllValues,
     canViewSensitive,
-  )
-
-  // Fetch diff if comparing revisions
-  const { data: diffData, isLoading: diffLoading } = useHelmManifestDiff(
-    helmNamespace,
-    release.name,
-    diffRevisions?.rev1 || 0,
-    diffRevisions?.rev2 || 0,
-    canViewSensitive,
+    selectedRevision,
   )
 
   // Lazy check for upgrade availability
@@ -130,13 +121,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 +146,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)
@@ -174,10 +178,16 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     startViewTransitionSafe(() => flushSync(() => setActiveTab(tab)))
   }, [])
 
-  const handleCompareRevisions = (rev1: number, rev2: number) => {
-    setDiffRevisions({ rev1, rev2 })
-    switchTab('diff')
-  }
+  const handleCompareRevisions = useCallback((rev1: number, rev2: number) => {
+    const params = new URLSearchParams()
+    const globalNamespaces = new URLSearchParams(window.location.search).get('namespaces')
+    if (globalNamespaces) params.set('namespaces', globalNamespaces)
+    params.set('release', `${release.namespace}/${release.name}`)
+    if (release.storageNamespace) params.set('releaseStorage', release.storageNamespace)
+    params.set('revision1', String(rev1))
+    params.set('revision2', String(rev2))
+    navigate({ pathname: '/helm/compare', search: params.toString() })
+  }, [navigate, release.name, release.namespace, release.storageNamespace])
 
   const handleViewRevision = (revision: number) => {
     setSelectedRevision(revision)
@@ -308,11 +318,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     { id: 'hooks', label: 'Hooks', icon: Anchor },
   ]
 
-  // Add diff tab only when comparing
-  if (diffRevisions) {
-    tabs.push({ id: 'diff', label: 'Diff', icon: FileText })
-  }
-
   return (
     <div
       className={clsx(
@@ -320,7 +325,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 +414,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   )}
                 >
                   <Link2 className="w-3 h-3" />
-                  source not tracked
+                  upgrade source not tracked
                 </button>
                 </Tooltip>
               ) : (
@@ -515,7 +520,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
           <>
             <HelmOperationBanner
               operation={releaseDetail.lastOperation}
+              operationInsight={releaseDetail.operationInsight}
+              releaseNamespace={releaseDetail.namespace}
               managedByFluxHelmRelease={releaseDetail.managedByFluxHelmRelease}
+              hookDiagnostics={releaseDetail.hookDiagnostics}
+              canCompare={canViewSensitive}
+              onCompare={handleCompareRevisions}
+              onNavigateToResource={onNavigateToResource}
             />
             {activeTab === 'overview' && (
               <OverviewTab release={releaseDetail} onCopy={copyToClipboard} copied={copied} />
@@ -552,6 +563,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,21 +576,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               />
             )}
             {activeTab === 'hooks' && (
-              <HooksTab hooks={releaseDetail.hooks || []} />
-            )}
-            {activeTab === 'diff' && diffRevisions && (
-              <RoleGatedPanel min="member" feature="release manifest diffs">
-                <ManifestDiffViewer
-                  diff={diffData?.diff || ''}
-                  isLoading={diffLoading}
-                  revision1={diffRevisions.rev1}
-                  revision2={diffRevisions.rev2}
-                  onClose={() => {
-                    setDiffRevisions(null)
-                    setActiveTab('history')
-                  }}
-                />
-              </RoleGatedPanel>
+              <HooksTab hooks={releaseDetail.hooks || []} hookDiagnostics={releaseDetail.hookDiagnostics || []} />
             )}
           </>
         )}
@@ -743,20 +742,54 @@ function helmOperationKey(operation: HelmOperation): string {
 
 function HelmOperationBanner({
   operation,
+  operationInsight,
+  releaseNamespace,
   managedByFluxHelmRelease,
+  hookDiagnostics,
+  canCompare,
+  onCompare,
+  onNavigateToResource,
 }: {
   operation?: HelmOperation
+  operationInsight?: HelmOperationInsight
+  releaseNamespace: string
   managedByFluxHelmRelease?: string
+  hookDiagnostics?: HookDiagnostic[]
+  canCompare?: boolean
+  onCompare?: (rev1: number, rev2: number) => void
+  onNavigateToResource?: NavigateToResource
 }) {
-  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'))
+  const rawMessage = operation.rawMessage?.trim()
+  const hasRawMessage = !!rawMessage && rawMessage !== operation.message.trim()
 
   return (
     <div className="m-4 mb-0 card-inner-lg">
@@ -765,20 +798,42 @@ 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>
-          {operation.failureDescription && (
-            <p className="mt-1 text-xs text-theme-text-tertiary truncate">
-              {operation.failureDescription}
-            </p>
+          {hasRawMessage && (
+            <details className="mt-2">
+              <summary className="cursor-pointer select-none text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary">
+                Show raw Helm error
+              </summary>
+              <pre className="mt-2 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-theme-base/60 p-2 font-mono text-[11px] leading-relaxed text-theme-text-tertiary">
+                {rawMessage}
+              </pre>
+            </details>
+          )}
+          {operation.failureDescription && !hasRawMessage && (
+            <Tooltip content={operation.failureDescription} wrapperClassName="mt-1 flex">
+              <span className="line-clamp-2 text-xs text-theme-text-tertiary">
+                {operation.failureDescription}
+              </span>
+            </Tooltip>
           )}
           {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>
           )}
+          <OperationInsightSignals
+            insight={operationInsight}
+            releaseNamespace={releaseNamespace}
+            canCompare={Boolean(canCompare)}
+            onCompare={onCompare}
+            onNavigateToResource={onNavigateToResource}
+          />
+          {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 +845,146 @@ function HelmOperationBanner({
   )
 }
 
+function OperationInsightSignals({
+  insight,
+  releaseNamespace,
+  canCompare,
+  onCompare,
+  onNavigateToResource,
+}: {
+  insight?: HelmOperationInsight
+  releaseNamespace: string
+  canCompare: boolean
+  onCompare?: (rev1: number, rev2: number) => void
+  onNavigateToResource?: NavigateToResource
+}) {
+  const compare = insight?.suggestedCompare
+  const primaryResource = insight?.primaryResource
+  const relatedCount = primaryResource
+    ? Math.max(0, (insight?.signalCount ?? 0) - 1)
+    : insight?.relatedResources?.length ?? 0
+  const showCompare = Boolean(compare && canCompare && onCompare)
+  if (!primaryResource && !showCompare) {
+    return null
+  }
+
+  return (
+    <div className="mt-2 space-y-2">
+      {primaryResource && (
+        <PrimaryOperationResourceSignal
+          resource={primaryResource}
+          releaseNamespace={releaseNamespace}
+          relatedCount={relatedCount}
+          onNavigateToResource={onNavigateToResource}
+        />
+      )}
+      {showCompare && compare && (
+        <Tooltip content={compare.reason || 'Compare the two Helm revisions'}>
+          <button
+            type="button"
+            onClick={() => onCompare?.(compare.revision1, compare.revision2)}
+            className="inline-flex items-center gap-1.5 rounded-md border border-theme-border-light bg-theme-elevated px-2.5 py-1.5 text-xs font-medium text-theme-text-primary shadow-theme-sm transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+          >
+            <GitCompare className="h-3.5 w-3.5" />
+            Compare rev {compare.revision1} to {compare.revision2}
+          </button>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+function PrimaryOperationResourceSignal({
+  resource,
+  releaseNamespace,
+  relatedCount,
+  onNavigateToResource,
+}: {
+  resource: HelmOwnedResource
+  releaseNamespace: string
+  relatedCount: number
+  onNavigateToResource?: NavigateToResource
+}) {
+  const canNavigate = Boolean(onNavigateToResource)
+  const resourceLabel = `${resource.kind}/${resource.name}`
+  const resourceTarget = resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name
+  const showNamespace = Boolean(resource.namespace && resource.namespace !== releaseNamespace)
+  const resourceTooltip = `Open ${resource.kind} ${resourceTarget}`
+  const showInlineReady = Boolean(resource.ready && !resource.summary)
+  const openResource = () => {
+    onNavigateToResource?.({
+      kind: kindToPlural(resource.kind),
+      namespace: resource.namespace,
+      name: resource.name,
+      group: apiVersionToGroup(resource.apiVersion),
+    })
+  }
+
+  return (
+    <div className="rounded-md bg-theme-base/50 p-2 text-xs">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="font-medium text-theme-text-secondary">Likely resource to inspect</span>
+        {canNavigate ? (
+          <Tooltip content={resourceTooltip}>
+            <button
+              type="button"
+              onClick={openResource}
+              aria-label={resourceTooltip}
+              className={clsx(
+                'badge-sm max-w-full min-w-0 transition-colors hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-1 focus:ring-offset-theme-base',
+                getKindBadgeColor(resource.kind)
+              )}
+            >
+              <span className="min-w-0 truncate">{resourceLabel}</span>
+              <ExternalLink className="h-3 w-3 shrink-0 opacity-70" />
+            </button>
+          </Tooltip>
+        ) : (
+          <span className={clsx('badge-sm max-w-full min-w-0', getKindBadgeColor(resource.kind))}>
+            <span className="min-w-0 truncate">{resourceLabel}</span>
+          </span>
+        )}
+        {showNamespace && <span className="text-theme-text-tertiary">ns/{resource.namespace}</span>}
+        {showInlineReady && <span className="font-mono text-theme-text-secondary">{resource.ready}</span>}
+        {resource.status && (
+          <span className={clsx('badge-sm', getResourceStatusColor(resource.status))}>{resource.status}</span>
+        )}
+      </div>
+      {(resource.issue || resource.summary || resource.message || relatedCount > 0) && (
+        <div className="mt-1 text-theme-text-tertiary">
+          {[
+            resource.issue || resource.summary || resource.message,
+            relatedCount > 0 ? `${relatedCount} more affected resource${relatedCount === 1 ? '' : 's'} in Resources tab` : null,
+          ]
+            .filter(Boolean)
+            .join(' - ')}
+        </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'
 }
@@ -849,12 +1044,15 @@ interface OverviewTabProps {
     notes: string
     readme?: string
     dependencies?: ChartDependency[]
+    lastOperation?: HelmOperation
   }
   onCopy: (text: string, key: string) => void
   copied: string | null
 }
 
 function OverviewTab({ release, onCopy, copied }: OverviewTabProps) {
+  const showDescription = !!release.description && !isDuplicateOperationRawDescription(release.description, release.lastOperation)
+
   return (
     <div className="p-4 space-y-4">
       {/* Chart info */}
@@ -885,7 +1083,7 @@ function OverviewTab({ release, onCopy, copied }: OverviewTabProps) {
       </div>
 
       {/* Description */}
-      {release.description && (
+      {showDescription && (
         <div className="bg-theme-elevated/30 rounded-lg p-4">
           <h3 className="text-sm font-medium text-theme-text-secondary mb-2">Description</h3>
           <p className="text-sm text-theme-text-secondary">{release.description}</p>
@@ -969,12 +1167,23 @@ function OverviewTab({ release, onCopy, copied }: OverviewTabProps) {
   )
 }
 
+function isDuplicateOperationRawDescription(description: string, operation?: HelmOperation): boolean {
+  const desc = normalizeComparableText(description)
+  const raw = normalizeComparableText(operation?.rawMessage || '')
+  return desc !== '' && raw.includes(desc)
+}
+
+function normalizeComparableText(value: string): string {
+  return value.trim().replace(/\s+/g, ' ')
+}
+
 // 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 +1215,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 +1258,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>
   )
 }