@skyhook-io/k8s-ui 1.8.6 → 1.8.7

package/src/components/resources/resource-utils.ts

@@ -475,20 +475,23 @@ export function getPodProblems(pod: any): PodProblem[] {
     problems.push({ severity: 'high', message: 'Evicted', detail: podStatusMessage })
   }
 
-  // Stuck terminating (zombie pod)
+  // Stuck terminating (zombie pod). Use the same threshold as the badge
+  // (TERMINATING_STUCK_MINUTES) so the drawer problem and the table badge flip
+  // together — firing at 60s while the badge stayed calm to 10m was a mismatch.
   if (pod.metadata?.deletionTimestamp) {
-    const deleteTime = new Date(pod.metadata.deletionTimestamp).getTime()
-    const ageSeconds = (Date.now() - deleteTime) / 1000
-    if (ageSeconds > 60) {
+    if (minutesSince(pod.metadata.deletionTimestamp) >= TERMINATING_STUCK_MINUTES) {
       problems.push({ severity: 'medium', message: 'Stuck Terminating' })
     }
   }
 
-  // Not ready (Running but containers not ready)
+  // Not ready (Running but containers not ready). Use the same containerSettledOk
+  // gate as getPodStatus so a completing Job pod (Running, container terminated
+  // exit 0, Ready=false) doesn't raise a drawer problem while the table badge
+  // stays calm — a settled/completed container is not "Not Ready".
   if (phase === 'Running') {
-    const readyContainers = containerStatuses.filter((c: any) => c.ready).length
+    const unsettled = containerStatuses.filter((c: any) => !containerSettledOk(c)).length
     const totalContainers = containerStatuses.length
-    if (totalContainers > 0 && readyContainers < totalContainers) {
+    if (totalContainers > 0 && unsettled > 0) {
       // Only add if we haven't already flagged a more specific issue
       const hasSpecificIssue = problems.some(p =>
         p.message.includes('Probe') || p.message.includes('CrashLoop') || p.message.includes('OOM')
@@ -646,7 +649,9 @@ export function getWorkloadStatus(resource: any, kind: string): StatusBadge {
     const ready = status.numberReady || 0
     const updated = status.updatedNumberScheduled || 0
 
-    if (desired === 0) return { text: '0 nodes', color: healthColors.unknown, level: 'unknown' }
+    // 0 desired = the node selector matches no nodes — intentional/idle, not a
+    // fault and not "unknown" (matches pkg/health.Workload). Sky.
+    if (desired === 0) return { text: '0 nodes', color: healthColors.neutral, level: 'neutral' }
     if (ready === desired && updated === desired) {
       return { text: `${ready}/${desired}`, color: healthColors.healthy, level: 'healthy' }
     }
@@ -1008,7 +1013,9 @@ export function getJobStatus(job: any): StatusBadge {
 
   const completeCond = conditions.find((c: any) => c.type === 'Complete' && c.status === 'True')
   if (completeCond) {
-    return { text: 'Complete', color: healthColors.healthy, level: 'healthy' }
+    // A completed Job is done by design — neutral/idle (sky), not the green of a
+    // serving workload (matches pkg/health.Workload).
+    return { text: 'Complete', color: healthColors.neutral, level: 'neutral' }
   }
 
   if (job.spec?.suspend) {
@@ -1244,17 +1251,30 @@ export function cronToHuman(cron: string): string {
   if (minute === '0' && hour !== '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return `Daily at ${hour}:00`
   }
-  if (minute !== '*' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+  // Exclude step-minute ("*/N") here so it falls through to the interval branch
+  // below — otherwise "*/5 * * * *" rendered as "Every hour at :*/5" instead of
+  // "Every 5 minutes". A literal minute like "30" still reads "Every hour at :30".
+  if (minute !== '*' && !minute.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return `Every hour at :${minute.padStart(2, '0')}`
   }
   if (minute === '*' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     return 'Every minute'
   }
-  if (minute.startsWith('*/')) {
+  // Only claim a plain "Every N minutes" when nothing else constrains the window;
+  // otherwise "*/5 9 * * *" (only at 09:xx) or "*/5 * * * 1-5" (weekdays only)
+  // would read as an unconstrained interval. Constrained shapes fall through to
+  // the raw cron rather than assert something misleading.
+  if (minute.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
     const interval = minute.slice(2)
-    return `Every ${interval} minutes`
-  }
-  if (dayOfWeek === '1-5' || dayOfWeek === 'MON-FRI') {
+    return interval === '1' ? 'Every minute' : `Every ${interval} minutes`
+  }
+  // Weekday phrasing needs a literal hour:minute — a wildcard/step in either field
+  // (e.g. "*/5 * * * 1-5") would render "Weekdays at *:*/5", so let it fall to raw.
+  if (
+    (dayOfWeek === '1-5' || dayOfWeek === 'MON-FRI') &&
+    hour !== '*' && !hour.startsWith('*/') &&
+    minute !== '*' && !minute.startsWith('*/')
+  ) {
     return `Weekdays at ${hour}:${minute.padStart(2, '0')}`
   }
 

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -573,6 +573,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
           <HealthBarLegendItem color="bg-blue-500/60 dark:bg-blue-500/60" label="rolling" description="Expected degradation during deployment rollout" />
           <HealthBarLegendItem color="bg-amber-500/60 dark:bg-[#b8861e]" label="degraded" description="Unexpected partial availability" />
           <HealthBarLegendItem color="bg-red-500/60 dark:bg-red-500/60" label="unhealthy" description="Resource is failing or not ready" />
+          <HealthBarLegendItem color="bg-sky-500/60 dark:bg-sky-500/60" label="idle" description="Intentionally off/resting (completed, suspended, scaled to zero)" />
         </div>
       </div>
 

package/src/components/timeline/shared.tsx

@@ -138,6 +138,10 @@ export function HealthSpanLegend() {
         <span className="w-4 h-2 rounded-sm bg-red-500/60 dark:bg-red-500/60" />
         <span>Unhealthy</span>
       </span>
+      <span className="flex items-center gap-1">
+        <span className="w-4 h-2 rounded-sm bg-sky-500/60 dark:bg-sky-500/60" />
+        <span>Idle</span>
+      </span>
     </div>
   )
 }
@@ -387,7 +391,7 @@ export function TimeAxis({ startTime, endTime, tickCount = 8, labelColumnClass =
  * Health span bar showing a health state over a time range.
  */
 interface HealthSpanProps {
-  health: 'healthy' | 'degraded' | 'unhealthy' | string
+  health: 'healthy' | 'rolling' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown' | string
   left: number // percentage
   width: number // percentage
   title?: string
@@ -408,6 +412,9 @@ export function HealthSpan({ health, left, width, title, createdBefore }: Health
         return 'bg-amber-500/60 dark:bg-[#b8861e]'
       case 'unhealthy':
         return 'bg-red-500/60 dark:bg-red-500/60'
+      case 'neutral':
+        // intentional/idle (suspended, scaled-to-0) — sky, calm
+        return 'bg-sky-500/60 dark:bg-sky-500/60'
       default:
         // Unknown or other states
         return 'bg-gray-400/40'
@@ -569,7 +576,11 @@ export function buildHealthSpans(
   const existsUntil = deleteEvent ? new Date(deleteEvent.timestamp).getTime() : now
 
   const spans: { start: number; end: number; health: string }[] = []
-  let currentHealth = 'unknown'
+  // `null` is the "no health observed yet" sentinel — kept distinct from the
+  // real 'unknown' health value (emitted for node-lost pods). Overloading
+  // 'unknown' as both swallowed genuine-unknown spans and then false-greened
+  // them via the empty-spans fallback below.
+  let currentHealth: string | null = null
   let spanStart = Math.max(existsFrom, startTime)
 
   for (const evt of sorted) {
@@ -586,7 +597,7 @@ export function buildHealthSpans(
       continue
     }
 
-    if (newHealth !== currentHealth && currentHealth !== 'unknown') {
+    if (newHealth !== currentHealth && currentHealth !== null) {
       spans.push({ start: spanStart, end: ts, health: currentHealth })
       spanStart = ts
     }
@@ -594,7 +605,7 @@ export function buildHealthSpans(
   }
 
   // Close final span (only up to when resource existed)
-  if (currentHealth !== 'unknown') {
+  if (currentHealth !== null) {
     spans.push({ start: spanStart, end: Math.min(existsUntil, now), health: currentHealth })
   }
 

package/src/components/topology/K8sResourceNode.tsx

@@ -3,15 +3,17 @@ import { Handle, Position } from '@xyflow/react'
 import {
   ChevronDown,
   ChevronUp,
+  TriangleAlert,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
-import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
+import { healthToSeverity, SEVERITY_DOT, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { workloadHue } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { midTruncate } from '../../utils/format'
 import { Tooltip } from '../ui/Tooltip'
+import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 
 // Get actionable tooltip content for health issues
 function getIssueTooltip(issue: string | undefined): React.ReactNode {
@@ -215,6 +217,12 @@ const STATUS_STYLES: Record<HealthStatus, React.CSSProperties> = {
     border: '2px solid rgb(239 68 68 / 0.7)',
     backgroundColor: 'rgb(248 113 113 / 0.15)',
   },
+  // neutral = intentional/idle (suspended, scaled-to-0) — sky outline, calm.
+  // Distinct from `unknown`/`healthy` which carry no outline.
+  neutral: {
+    border: '2px solid rgb(56 189 248 / 0.55)',
+    backgroundColor: 'rgb(56 189 248 / 0.1)',
+  },
   healthy: {},
   unknown: {},
 }
@@ -376,6 +384,15 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   id,
 }: K8sResourceNodeProps) {
   const { kind, name, status, nodeData, selected, dimmed, onExpand, onCollapse, isExpanded } = data
+  // Cluster Audit findings joined onto this node by the host (web/ enriches each
+  // node's data by auditKey). The host only counts "badge-worthy" findings —
+  // reference-integrity / lifecycle, "this resource is actually broken" — not the
+  // posture/best-practice nags that fire near-universally, so the indicator stays
+  // a signal. Colored by worst severity (danger red, else warning amber).
+  const auditDanger = typeof nodeData.auditDanger === 'number' ? nodeData.auditDanger : 0
+  const auditWarning = typeof nodeData.auditWarning === 'number' ? nodeData.auditWarning : 0
+  const auditTotal = auditDanger + auditWarning
+  const auditMessages = Array.isArray(nodeData.auditMessages) ? (nodeData.auditMessages as AuditBadgeMessage[]) : []
   // Workload tint (application graph): a node owned by exactly one workload
   // carries that workload's hue. Only on healthy/unknown cards — degraded/
   // unhealthy already own the card background for health, which must win.
@@ -506,6 +523,16 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
                 </button>
               )}
+              {auditTotal > 0 && (
+                <Tooltip
+                  content={auditMessages.length > 0
+                    ? <AuditBadgeTooltip messages={auditMessages} clickHint={false} />
+                    : `${auditTotal} audit ${auditTotal === 1 ? 'finding' : 'findings'}${auditDanger > 0 ? ` · ${auditDanger} danger` : ''}`}
+                  position="right"
+                >
+                  <TriangleAlert className={clsx('w-3 h-3 cursor-help', auditDanger > 0 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)} />
+                </Tooltip>
+              )}
               {issueTooltip ? (
                 <Tooltip content={issueTooltip} position="right">
                   <span className={clsx('w-1.5 h-1.5 rounded-full cursor-help', getStatusDotColor(status))} />

package/src/components/topology/layout.ts

@@ -731,11 +731,14 @@ export function buildHierarchicalElkGraph(
   }
 }
 
-// Lower number = higher severity
-const HEALTH_PRIORITY: Record<HealthStatus, number> = { unhealthy: 0, degraded: 1, unknown: 2, healthy: 3 }
+// Lower number = higher severity. `neutral` (intentional/idle) is the
+// most-benign tier, so a group whose every member is idle rolls up to neutral,
+// while a mixed healthy+idle group still reads healthy (healthy out-ranks
+// neutral). An empty/unresolved group defaults to healthy.
+const HEALTH_PRIORITY: Record<HealthStatus, number> = { unhealthy: 0, degraded: 1, unknown: 2, healthy: 3, neutral: 4 }
 
 function computeGroupHealth(memberIds: string[], nodeMap: Map<string, TopologyNode>): { worstStatus: HealthStatus; unhealthyCount: number } {
-  let worstPriority = 3
+  let worstPriority = Infinity
   let worstStatus: HealthStatus = 'healthy'
   let unhealthyCount = 0
   for (const id of memberIds) {
@@ -804,8 +807,11 @@ function computeWorkloadCards(
     })
     const primary = sorted[0]
 
-    // Compute worst health
-    let worstPriority = 3
+    // Compute worst health. Seed with Infinity (not 3) so an all-neutral
+    // component can surface neutral — `neutral` is priority 4 (most benign), so a
+    // `< 3` seed would never accept it and the card would stay green. Matches
+    // computeGroupHealth.
+    let worstPriority = Infinity
     let worstStatus: HealthStatus = 'healthy'
     for (const node of comp) {
       const p = HEALTH_PRIORITY[node.status] ?? 2

package/src/components/ui/PaneLoader.tsx

@@ -5,9 +5,14 @@ import radarLoadingIconAsset from '../../assets/radar/radar-icon-loading.svg'
 // StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
 const radarLoadingIcon = assetUrl(radarLoadingIconAsset)
 
-// PaneLoader — center-of-pane loading state. Animated radar icon stacked
-// above a label so swapping the label across the loading chain doesn't
-// shift the icon horizontally. Pin to the parent's fill via `className`
+// PaneLoader — center-of-pane loading state. The animated radar icon is
+// pinned to the pane's exact center; the label hangs at a fixed offset
+// BELOW it, absolutely positioned (not a flex sibling), so the label never
+// affects where the icon sits. The icon therefore holds a single position
+// while only the text under it appears/changes — and it lands at the same
+// point as the host/connect splash surfaces (which center the icon at 50%
+// with the label decoupled below), so a splash → PaneLoader hand-off no
+// longer makes the logo jump. Pin to the parent's fill via `className`
 // (`flex-1`, `h-full`, `h-32`, `absolute inset-0`, etc.). The SVG self-
 // animates (sweep arm + blips, `prefers-reduced-motion` honored).
 export function PaneLoader({
@@ -17,10 +22,23 @@ export function PaneLoader({
   label?: string
   className?: string
 }) {
+  // No `relative` on the root: the label anchors to the inner `relative` span
+  // below, and callers may pass a positioning class (e.g. `absolute inset-0`,
+  // for topology panes) — a root `relative` would conflict with it.
   return (
-    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
-      <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-      <span className="text-sm text-theme-text-tertiary">{label}</span>
+    <div className={`flex items-center justify-center ${className}`} aria-live="polite">
+      {/* The icon is the only in-flow child, so it centers in the pane. The
+          label is absolutely positioned below the icon and so never shifts it. */}
+      <span className="relative">
+        <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+        {/* Label style matches the splash surfaces (17px semibold tracking-tight,
+            primary) so the whole loading family — boot splash, connect splash,
+            PaneLoader — reads as one continuous state, not a font change at the
+            hand-off. */}
+        <span className="absolute left-1/2 top-full mt-3 -translate-x-1/2 whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
+          {label}
+        </span>
+      </span>
     </div>
   )
 }

package/src/components/ui/drawer-components.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ProblemAlerts, OperationalIssuesShownContext } from './drawer-components'
+
+const problems = [
+  { color: 'red' as const, message: 'Application is Degraded' },
+  { color: 'yellow' as const, message: 'Application is OutOfSync' },
+]
+
+describe('ProblemAlerts', () => {
+  it('renders every problem', () => {
+    const html = renderToString(<ProblemAlerts problems={problems} />)
+    expect(html).toContain('Application is Degraded')
+    expect(html).toContain('Application is OutOfSync')
+  })
+
+  it('renders nothing when there are no problems', () => {
+    expect(renderToString(<ProblemAlerts problems={[]} />)).toBe('')
+  })
+
+  // Regression guard: ProblemAlerts is used only by GitOps renderers, whose
+  // problems the live-Issues pipeline does not comprehensively emit. It must NOT
+  // suppress itself under the Operational-Issues context — doing so hid real
+  // GitOps warnings (e.g. a manual Argo app's OutOfSync). Pod/Workload renderers
+  // self-gate their own arrays; this component never should.
+  it('still renders under OperationalIssuesShownContext (does not self-suppress)', () => {
+    const html = renderToString(
+      <OperationalIssuesShownContext.Provider value={true}>
+        <ProblemAlerts problems={problems} />
+      </OperationalIssuesShownContext.Provider>
+    )
+    expect(html).toContain('Application is Degraded')
+    expect(html).toContain('Application is OutOfSync')
+  })
+})

package/src/components/ui/drawer-components.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, createContext, useContext } from 'react'
 import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge, formatDuration, formatResources } from '../resources/resource-utils'
@@ -446,6 +446,18 @@ export interface Problem {
 }
 
 /** Displays a list of problem alerts (warnings and errors) */
+// True when the resource detail is already rendering a dedicated, authoritative
+// "Operational Issues" section (the Issues pipeline — richer cause/action). Only
+// renderers whose problems the pipeline COMPREHENSIVELY covers read this and drop
+// their own problem array so the same failure isn't shown twice — today that's
+// PodRenderer and WorkloadRenderer (workload + pod runtime). It is deliberately
+// NOT wired into ProblemAlerts: that component is used only by GitOps renderers
+// (Argo/Flux), whose Degraded/OutOfSync/revision-mismatch banners the pipeline
+// does not fully emit (e.g. OutOfSync only for automated Argo apps) — suppressing
+// them would hide real problems, which is worse than an occasional duplicate.
+export const OperationalIssuesShownContext = createContext(false)
+export const useOperationalIssuesShown = () => useContext(OperationalIssuesShownContext)
+
 export function ProblemAlerts({ problems }: { problems: Problem[] }) {
   if (problems.length === 0) return null
 

package/src/components/workload/WorkloadView.tsx

@@ -52,7 +52,7 @@ import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } f
 import type { ScalerDiagnosis } from '../resources/renderers/WorkloadRenderer'
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
-import { getKindColorOutline, displayKindName } from '../ui/drawer-components'
+import { getKindColorOutline, displayKindName, OperationalIssuesShownContext } from '../ui/drawer-components'
 import { midTruncate } from '../../utils/format'
 
 export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -211,6 +211,17 @@ interface WorkloadViewProps {
   isMetricsAvailable?: (kind: string, resource: any) => boolean
   /** Render extra content at the bottom of the overview tab (e.g. audit findings) */
   renderOverviewExtra?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** Render content at the TOP of the overview tab, above the renderer (e.g. live
+   *  Operational Issues). Optional + additive — consumers that don't pass it are
+   *  unaffected. Only rendered when `hasOperationalIssues` is true: the lead
+   *  component returns null when empty, but its padded wrapper can't tell, so
+   *  gating on the flag avoids an empty top gap on healthy resources. */
+  renderOverviewLead?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** When true, renderers suppress their own status-derived problem displays
+   *  because a dedicated Operational Issues section is shown (the host fetched
+   *  live issues for this resource). Avoids showing the same failure twice.
+   *  Also gates the `renderOverviewLead` wrapper (see above). */
+  hasOperationalIssues?: boolean
 
   // ── Duplicate ────────────────────────────────────────────────────────────
   /** Duplicate handler — opens create dialog with this resource's YAML */
@@ -282,6 +293,8 @@ export function WorkloadView({
   onDuplicate,
   onDownload,
   renderOverviewExtra,
+  renderOverviewLead,
+  hasOperationalIssues,
   // Actions bar
   actionsBarProps,
   // Renderer overrides
@@ -636,7 +649,9 @@ export function WorkloadView({
         {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
         <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
           {!resource ? (
-            <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
+            // Fill the drawer body so the loading logo centers in it, not in a
+            // 128px box pinned to the top (matches the splash/PaneLoader centering).
+            <FetchResult loading={resourceLoading} error={resourceError} className="h-full" />
           ) : showYaml ? (
             <EditableYamlView
               resource={selectedResource}
@@ -652,7 +667,12 @@ export function WorkloadView({
               onDownload={onDownload}
             />
           ) : (
-            <>
+            <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
+              {renderOverviewLead && hasOperationalIssues && (
+                <div className="px-4 pt-4">
+                  {renderOverviewLead({ kind, namespace, name })}
+                </div>
+              )}
               <ResourceRendererDispatch
                 resource={selectedResource}
                 data={resource}
@@ -679,7 +699,7 @@ export function WorkloadView({
                   {renderOverviewExtra({ kind, namespace, name })}
                 </div>
               )}
-            </>
+            </OperationalIssuesShownContext.Provider>
           )}
         </div>
       </div>
@@ -688,6 +708,7 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
+    <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
     <DetailShell
       breadcrumb={breadcrumb}
       nav={
@@ -802,6 +823,7 @@ export function WorkloadView({
               eventsError={overviewEventsError}
               updatesError={resourceFocusedUpdatesError}
               extraContent={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name })}
+              leadContent={hasOperationalIssues && renderOverviewLead ? renderOverviewLead({ kind, namespace, name }) : undefined}
             />
         )}
         {effectiveTab === 'topology' && (
@@ -881,7 +903,7 @@ export function WorkloadView({
               {yamlObject && !yamlObject.primary && renderRelatedYaml ? (
                 renderRelatedYaml(yamlObject)
               ) : !resource ? (
-                <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
+                <FetchResult loading={resourceLoading} error={resourceError} className="h-full" />
               ) : (
                 <EditableYamlView
                   resource={selectedResource}
@@ -901,6 +923,7 @@ export function WorkloadView({
           </div>
         )}
     </DetailShell>
+    </OperationalIssuesShownContext.Provider>
   )
 }
 
@@ -1335,6 +1358,7 @@ function InfoTab({
   eventsError,
   updatesError,
   extraContent,
+  leadContent,
 }: {
   resource: any
   selectedResource: SelectedResource
@@ -1358,6 +1382,7 @@ function InfoTab({
   eventsError?: Error | null
   updatesError?: Error | null
   extraContent?: ReactNode
+  leadContent?: ReactNode
 }) {
   if (!resource) {
     return <FetchResult loading={isLoading} error={error} className="h-full" />
@@ -1365,6 +1390,11 @@ function InfoTab({
 
   return (
     <div className="h-full overflow-auto">
+      {leadContent && (
+        <div className="px-4 pt-4">
+          {leadContent}
+        </div>
+      )}
       <ResourceRendererDispatch
         resource={selectedResource}
         data={resource}

package/src/types/core.ts

@@ -193,7 +193,7 @@ export function displayKind(kind: string): string {
   return shortNames[kind] || kind
 }
 
-export type HealthStatus = 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+export type HealthStatus = 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
 
 export type EdgeType = 'routes-to' | 'exposes' | 'manages' | 'uses' | 'configures' | 'protects'
 
@@ -557,7 +557,7 @@ export interface HelmRelease {
   lastOperation?: HelmOperation
   operations?: HelmOperation[]
   // Health summary from owned resources
-  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
   healthIssue?: string    // Primary issue if unhealthy (e.g., "OOMKilled")
   healthSummary?: string  // Brief summary like "2/3 pods ready"
   // When set, this release was installed by Flux's helm-controller — the
@@ -612,10 +612,11 @@ export interface HelmReleaseDetail {
   notes: string
   history: HelmRevision[]
   resources: HelmOwnedResource[]
-  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
   healthIssue?: string
   healthSummary?: string
   hooks?: HelmHook[]
+  hookDiagnostics?: HookDiagnostic[]
   readme?: string
   dependencies?: ChartDependency[]
   lastOperation?: HelmOperation
@@ -627,10 +628,78 @@ export interface HelmReleaseDetail {
 
 export interface HelmHook {
   name: string
+  namespace?: string
   kind: string
+  path?: string
   events: string[]
   weight: number
   status?: string
+  startedAt?: string
+  completedAt?: string
+  deletePolicies?: string[]
+  outputLogPolicies?: string[]
+}
+
+export interface HookDiagnostic {
+  name: string
+  namespace?: string
+  kind: string
+  events?: string[]
+  phase: string
+  message: string
+  evidence?: HookEvidence
+  evidenceUnavailable?: boolean
+  evidenceUnavailableReason?: string
+}
+
+export interface HookEvidence {
+  summary?: string
+  jobs?: HookJobEvidence[]
+  pods?: HookPodEvidence[]
+  events?: HookEventEvidence[]
+  logs?: HookLogEvidence[]
+  errors?: string[]
+}
+
+export interface HookJobEvidence {
+  name: string
+  namespace?: string
+  status?: string
+  active?: number
+  succeeded?: number
+  failed?: number
+  conditions?: string[]
+}
+
+export interface HookPodEvidence {
+  name: string
+  namespace?: string
+  phase?: string
+  ready?: string
+  restartCount?: number
+  reason?: string
+  message?: string
+}
+
+export interface HookEventEvidence {
+  involvedKind: string
+  involvedName: string
+  type?: string
+  reason?: string
+  message?: string
+  count?: number
+  lastSeen?: string
+}
+
+export interface HookLogEvidence {
+  pod: string
+  container: string
+  previous?: boolean
+  lines?: string[]
+  totalLines?: number
+  matchedLines?: number
+  fallback?: boolean
+  error?: string
 }
 
 export interface ChartDependency {
@@ -658,12 +727,40 @@ export interface HelmValues {
   computed?: Record<string, unknown>
 }
 
+export interface ValuesDiff {
+  revision1: number
+  revision2: number
+  allValues: boolean
+  diff: string
+}
+
 export interface ManifestDiff {
   revision1: number
   revision2: number
   diff: string
 }
 
+export interface NotesDiff {
+  revision1: number
+  revision2: number
+  diff: string
+}
+
+export interface HelmResourceRef {
+  kind: string
+  apiVersion?: string
+  name: string
+  namespace: string
+}
+
+export interface ResourceDiff {
+  revision1: number
+  revision2: number
+  added: HelmResourceRef[]
+  removed: HelmResourceRef[]
+  unchanged: HelmResourceRef[]
+}
+
 // Selected Helm release (for drawer state)
 export interface SelectedHelmRelease {
   namespace: string