@skyhook-io/k8s-ui 1.8.5 → 1.8.7

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/Badge.tsx

@@ -9,11 +9,31 @@ import type { ReactNode } from 'react'
 export type BadgeSeverity = 'success' | 'warning' | 'alert' | 'error' | 'info' | 'neutral'
 export type BadgeSize = 'sm' | 'default'
 
+// Intent tokens beyond severity/kind. Named by PURPOSE, not hue: two tokens may
+// share a color value today yet stay separate names so a future retune moves
+// exactly the right ones. See DESIGN.md "Badge decision tree".
+//
+// - protocol: transport/scheme tags (HTTP/TCP/UDP/…). Its OWN family because it
+//   is a recurring, meaningful axis and must NOT collide with severity hues
+//   (e.g. a green "HTTPS" must not read as "success").
+// - note:     neutral attention/FYI markers (cross-namespace, wildcard, default,
+//   immutable). Distinct from severity-info — it flags "noteworthy", not a status.
+// - accent1/2/3: LOCAL categorical distinction (rw/ro, spot/on-demand,
+//   control-plane/worker) where the hue carries no cross-screen meaning — just
+//   "tell these sibling options apart". The only place sharing is intended.
+// - structural: ports/paths/hosts/weights/names — neutral data fragments, not a
+//   status. Its own name so it can diverge from severity-neutral later.
+export type BadgeTone = 'note' | 'accent1' | 'accent2' | 'accent3' | 'structural'
+
 interface BadgeProps {
   /** Severity-based coloring (status badges) */
   severity?: BadgeSeverity
   /** K8s resource kind coloring (kind badges) */
   kind?: string
+  /** Transport protocol/scheme tag (http/https/tls/tcp/udp/grpc/h2) */
+  protocol?: string
+  /** Categorical/accent intent tone (see BadgeTone) */
+  tone?: BadgeTone
   /** Explicit color class override (bypasses severity/kind lookup) */
   colorClass?: string
   /** Size variant */
@@ -135,12 +155,49 @@ const KIND: Record<string, string> = {
 
 const DEFAULT_KIND_COLOR = 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-400 dark:border-fuchsia-800/40'
 
+// ---------------------------------------------------------------------------
+// PROTOCOL COLORS — transport/scheme tags. Deliberately avoid severity hues
+// (emerald/amber/orange/red/sky) so a protocol never reads as a status.
+// ---------------------------------------------------------------------------
+const PROTOCOL: Record<string, string> = {
+  http:  'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  http2: 'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  h2:    'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  h2c:   'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  https: 'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  tls:   'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  tcp:   'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  udp:   'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  grpc:  'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  'grpc-web': 'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+}
+const DEFAULT_PROTOCOL_COLOR = 'bg-slate-100 text-slate-700 border-slate-300 dark:bg-slate-950/50 dark:text-slate-400 dark:border-slate-700/40'
+
+// ---------------------------------------------------------------------------
+// TONE COLORS — note / local-categorical accents / structural.
+// ---------------------------------------------------------------------------
+const TONE: Record<BadgeTone, string> = {
+  // attention/FYI — distinct from severity so it doesn't read as warning/info
+  note:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  // three visually-distinct accents for local "tell siblings apart" use
+  accent1:    'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  accent2:    'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  accent3:    'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  // neutral data fragment (ports/paths/hosts/names)
+  structural: 'bg-theme-elevated text-theme-text-secondary border-theme-border',
+}
+
 // Structure classes
 const SIZE_CLASSES: Record<BadgeSize, string> = {
   default: 'badge',
   sm: 'badge-sm',
 }
 
+/** Resolve a protocol/scheme label (case-insensitive) to its color class. */
+export function getProtocolColorClass(protocol: string): string {
+  return PROTOCOL[protocol.toLowerCase().trim()] ?? DEFAULT_PROTOCOL_COLOR
+}
+
 /** Resolve kind color with fuzzy matching for plural/lowercase forms */
 export function getKindColorClass(kind: string): string {
   // Direct match
@@ -185,8 +242,14 @@ export function getSeverityColorClass(severity: BadgeSeverity): string {
  * Badge component — the ONE source of truth for badge rendering.
  * Use severity for status badges, kind for resource type badges, or colorClass for custom.
  */
-export function Badge({ severity, kind, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
-  const color = colorClass ?? (severity ? SEVERITY[severity] : kind ? getKindColorClass(kind) : '')
+export function Badge({ severity, kind, protocol, tone, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
+  const color =
+    colorClass ??
+    (severity ? SEVERITY[severity]
+      : protocol ? getProtocolColorClass(protocol)
+      : tone ? TONE[tone]
+      : kind ? getKindColorClass(kind)
+      : '')
   const cls = clsx(SIZE_CLASSES[size], color, className)
 
   if (onClick) {
@@ -196,4 +259,4 @@ export function Badge({ severity, kind, colorClass, size = 'default', className,
 }
 
 // Re-export the raw color maps for backwards compat (used by badge-colors.ts consumers)
-export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS }
+export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS, PROTOCOL as BADGE_PROTOCOL_COLORS, TONE as BADGE_TONE_COLORS }

package/src/components/ui/ClusterName.tsx

@@ -3,10 +3,18 @@ import { MiddleEllipsis } from './MiddleEllipsis'
 import { Tooltip } from './Tooltip'
 import { parseContextName } from '../../utils/context-name'
 import type { ParsedContextName } from '../../utils/context-name'
-import awsLogo from './provider-logos/aws.png'
-import awsLogoDark from './provider-logos/aws-dark.png'
-import gcpLogo from './provider-logos/gcp.png'
-import azureLogo from './provider-logos/azure.svg'
+import { assetUrl } from '../../utils/asset-url'
+import awsLogoAsset from './provider-logos/aws.png'
+import awsLogoDarkAsset from './provider-logos/aws-dark.png'
+import gcpLogoAsset from './provider-logos/gcp.png'
+import azureLogoAsset from './provider-logos/azure.svg'
+
+// assetUrl normalizes the bundler-specific asset-import type (string under Vite,
+// StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
+const awsLogo = assetUrl(awsLogoAsset)
+const awsLogoDark = assetUrl(awsLogoDarkAsset)
+const gcpLogo = assetUrl(gcpLogoAsset)
+const azureLogo = assetUrl(azureLogoAsset)
 
 // ClusterName renders a kubectl context string with the meaningful
 // cluster identity surfaced as primary text and provider/region pushed

package/src/components/ui/PaneLoader.tsx

@@ -1,8 +1,18 @@
-import radarLoadingIcon from '../../assets/radar/radar-icon-loading.svg'
+import { assetUrl } from '../../utils/asset-url'
+import radarLoadingIconAsset from '../../assets/radar/radar-icon-loading.svg'
 
-// 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`
+// assetUrl normalizes the bundler-specific asset-import type (string under Vite,
+// StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
+const radarLoadingIcon = assetUrl(radarLoadingIconAsset)
+
+// 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({
@@ -12,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'
 
@@ -554,8 +554,10 @@ export interface HelmRelease {
   status: string
   revision: number
   updated: string // ISO date string
+  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
@@ -574,6 +576,27 @@ export interface HelmRevision {
   updated: string // ISO date string
 }
 
+export type HelmOperationKind = 'release_failed' | 'upgrade_failed' | 'upgrade_rolled_back' | 'rollback' | 'pending'
+export type HelmOperationStatus = 'failed' | 'rolled_back' | 'completed' | 'stuck_pending'
+export type HelmOperationConfidence = 'high' | 'medium' | 'low'
+export type HelmOperationSource = 'helm_status' | 'helm_history'
+
+export interface HelmOperation {
+  kind: HelmOperationKind
+  status: HelmOperationStatus
+  source: HelmOperationSource
+  confidence: HelmOperationConfidence
+  message: string
+  evidence?: string
+  failureDescription?: string
+  revision?: number
+  failedRevision?: number
+  rollbackRevision?: number
+  targetRevision?: number
+  pendingStatus?: string
+  updated?: string
+}
+
 export interface HelmReleaseDetail {
   name: string
   namespace: string
@@ -589,9 +612,15 @@ export interface HelmReleaseDetail {
   notes: string
   history: HelmRevision[]
   resources: HelmOwnedResource[]
+  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
+  healthIssue?: string
+  healthSummary?: string
   hooks?: HelmHook[]
+  hookDiagnostics?: HookDiagnostic[]
   readme?: string
   dependencies?: ChartDependency[]
+  lastOperation?: HelmOperation
+  operations?: HelmOperation[]
   // When set, this release was installed by Flux's helm-controller — see
   // HelmRelease.managedByFluxHelmRelease for context. Format: "namespace/name".
   managedByFluxHelmRelease?: string
@@ -599,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 {
@@ -630,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
@@ -649,7 +774,16 @@ export interface UpgradeInfo {
   latestVersion?: string
   updateAvailable: boolean
   repositoryName?: string
+  // 'repository' for classic HTTP-repo matches, 'oci' when discovered via a
+  // registered OCI chart source. Absent when the source couldn't be determined.
+  sourceType?: 'repository' | 'oci'
+  // oci:// chart reference an OCI-sourced upgrade lives at (display only).
+  chartRef?: string
   error?: string
+  // True only when the error is a genuinely untracked source (registering a
+  // chart source could fix it) — NOT for repo-side errors like a stale index or
+  // classic ambiguity. Gates the "track source" affordance.
+  untracked?: boolean
 }
 
 // Batch upgrade info keyed by "storageNamespace/name".