@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -1,7 +1,8 @@
 // Utility functions for resource display in tables
 
+import { getNodeLifecycle } from '../../utils/node-lifecycle'
 import { effectivePolicyTypeNames } from '../../utils/network-policy'
-import { formatCPUString, formatMemoryString, formatBytes } from '../../utils/format'
+import { formatCPUString, formatMemoryString, formatBytes, formatCompactAge } from '../../utils/format'
 import { pluralize } from '../../utils/pluralize'
 import type { WorkloadPodInfo } from '../../types/core'
 import { getArgoRolloutStepNumber, getObservedGeneration, getWorkloadRolloutActivity, isArgoRolloutResource, isRolloutActivityVisible, rolloutActivityBadge, type WorkloadRolloutActivity } from '../../utils/workload-rollout'
@@ -85,12 +86,57 @@ export interface PodProblem {
  * misses. Presentation-only; the backend `scheduling` issue source does the
  * structured decomposition + node-label resolution (e.g. naming arm64).
  */
-export function summarizeSchedulerMessage(message?: string): string {
+export function summarizeSchedulerMessage(message?: string, options: { plain?: boolean } = {}): string {
   if (!message) return ''
   let m = message.split('. preemption:')[0].split(' preemption:')[0].trim()
-  const colon = m.indexOf(':')
-  if (colon >= 0) m = m.slice(colon + 1).trim()
-  return m.replace(/\.\s*$/, '').trim()
+  if (options.plain) {
+    m = m.replace(/^(?:Pod cannot be scheduled:\s*)?(?:Unschedulable:\s*)?(?:0\/\d+ nodes are available:\s*)?/i, '')
+    // Schedulers with dynamic resource allocation append this after the node reasons.
+    m = m.replace(/no new claims to deallocate,?/i, '').trim()
+  } else {
+    const colon = m.indexOf(':')
+    if (colon >= 0) m = m.slice(colon + 1).trim()
+  }
+  m = m.replace(/\.\s*$/, '').trim()
+  if (!options.plain) return m
+  const total = /0\/(\d+) nodes (?:are )?available/.exec(message)?.[1]
+  const causes: [RegExp, string][] = [
+    [/^(\d+) (?:Too many pods|(?:node\(s\) )?insufficient pods)(?: \(0\/\d+ nodes available\))?$/i, 'have reached their Pod limit'],
+    [/^(\d+) (?:node\(s\) )?Insufficient cpu(?: \(0\/\d+ nodes available\))?$/i, 'do not have enough CPU'],
+    [/^(\d+) (?:node\(s\) )?Insufficient memory(?: \(0\/\d+ nodes available\))?$/i, 'do not have enough memory'],
+    [/^(\d+) node\(s\) (?:didn.t match Pod.s node affinity\/selector|node affinity\/selector mismatch)(?: \(0\/\d+ nodes available\))?$/i, 'do not match the Pod’s node affinity or selector'],
+    [/^(\d+) node\(s\) (?:had )?untolerated taint(?:\(s\))?(?: \{[^}]*\}| [^\s]+)?(?: \(0\/\d+ nodes available\))?$/i, 'have taints the Pod does not tolerate'],
+    [/^(\d+) node\(s\) (?:had )?volume node[- ]affinity conflict(?: \(0\/\d+ nodes available\))?$/i, 'do not match the volume’s node affinity'],
+  ]
+  return splitSchedulerClauses(m).filter((part) => part.trim()).map((part) => {
+    const clause = part.trim()
+    for (const [pattern, cause] of causes) {
+      const count = pattern.exec(clause)?.[1]
+      if (count) return `${count === '1' ? '1 node' : count === total && count === '2' ? 'both nodes' : count === total ? 'all nodes' : `${count} nodes`} ${count === '1' ? cause.replace(/^have /, 'has ').replace(/^do /, 'does ') : cause}`
+    }
+    if (/^(?:pod has )?unbound (?:immediate )?PersistentVolumeClaims?(?:\s*\(0\/\d+ nodes available\))?$/i.test(clause)) return 'a required volume claim is not bound'
+    return clause
+  }).join('; ')
+}
+
+// Splits on commas and semicolons, except where the next bracket ahead closes:
+// scheduler taints and resolved node labels can contain comma-separated values.
+// One pass from the end keeps long messages linear.
+function splitSchedulerClauses(m: string): string[] {
+  const parts: string[] = []
+  let end = m.length
+  let insideBrackets = false
+  for (let i = m.length - 1; i >= 0; i--) {
+    const c = m[i]
+    if (c === ']' || c === '}') insideBrackets = true
+    else if (c === '[' || c === '{') insideBrackets = false
+    else if ((c === ',' || c === ';') && !insideBrackets) {
+      parts.push(m.slice(i + 1, end))
+      end = i
+    }
+  }
+  parts.push(m.slice(0, end))
+  return parts.reverse()
 }
 
 /** Tailwind classes for severity dot indicators (used in tooltips and alert banners) */
@@ -1329,25 +1375,8 @@ export function getHPAMetrics(hpa: any): { cpu?: number; memory?: number; custom
 // ============================================================================
 
 export function getNodeStatus(node: any): StatusBadge {
-  const conditions = node.status?.conditions || []
-  const readyCondition = conditions.find((c: any) => c.type === 'Ready')
-
-  const isReady = readyCondition?.status === 'True'
-  const isUnschedulable = node.spec?.unschedulable === true
-
-  if (isReady && isUnschedulable) {
-    // Cordon is intentional but consequential — it's lost scheduling capacity, and
-    // a forgotten cordon strands nodes — so it stays on the warning axis (matching
-    // the backend Cordoned issue), unlike no-op intentional states (suspended/idle).
-    return { text: 'Ready,SchedulingDisabled', color: healthColors.degraded, level: 'degraded' }
-  }
-  if (isReady) {
-    return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
-  }
-  if (readyCondition?.status === 'False') {
-    return { text: 'NotReady', color: healthColors.unhealthy, level: 'unhealthy' }
-  }
-  return { text: 'Unknown', color: healthColors.unknown, level: 'unknown' }
+  const lifecycle = getNodeLifecycle(node)
+  return { text: lifecycle.label, color: healthColors[lifecycle.level], level: lifecycle.level }
 }
 
 export function getNodeRoles(node: any): string {
@@ -1375,27 +1404,32 @@ export interface NodeCondition {
   message?: string
 }
 
-// Problem conditions that indicate node issues
-const NODE_PROBLEM_CONDITIONS = ['DiskPressure', 'MemoryPressure', 'PIDPressure', 'NetworkUnavailable']
-
-export function getNodeConditions(node: any): { problems: string[]; healthy: boolean } {
+export function getNodeConditions(node: any): { problems: string[]; healthy: boolean; readinessLabel: string } {
   const conditions = node.status?.conditions || []
   const problems: string[] = []
+  const lifecycle = getNodeLifecycle(node)
 
   for (const cond of conditions) {
     // Ready=False is a problem
-    if (cond.type === 'Ready' && cond.status !== 'True') {
+    if (cond.type === 'Ready' && lifecycle.readinessFailed) {
       problems.push('NotReady')
     }
     // Other conditions are problems when True
-    if (NODE_PROBLEM_CONDITIONS.includes(cond.type) && cond.status === 'True') {
+    if (lifecycle.problems.includes(cond.type) && cond.status === 'True') {
       // Format: "DiskPressure" -> "Disk Pressure"
       const formatted = cond.type.replace(/([A-Z])/g, ' $1').trim()
       problems.push(formatted)
     }
   }
 
-  return { problems, healthy: problems.length === 0 }
+  if (lifecycle.delayed) problems.push('Removal delayed')
+  const ready = conditions.find((cond: any) => cond.type === 'Ready')
+  const readinessLabel = lifecycle.removing && !lifecycle.readinessFailed && ready?.status === 'False'
+    ? 'Not ready (expected during removal)'
+    : lifecycle.removing && !lifecycle.readinessFailed && ready?.status === 'Unknown'
+      ? 'Readiness unknown during removal'
+      : 'Readiness unknown'
+  return { problems, healthy: problems.length === 0 && ready?.status === 'True', readinessLabel }
 }
 
 export function getNodeTaints(node: any): { count: number; text: string } {
@@ -1414,11 +1448,7 @@ export function getNodeVersion(node: any): string {
 // ============================================================================
 
 export function formatAge(timestamp: string): string {
-  if (!timestamp) return '-'
-  const created = new Date(timestamp)
-  const now = new Date()
-  const diffMs = now.getTime() - created.getTime()
-  return formatDuration(diffMs)
+  return formatCompactAge(timestamp) || '-'
 }
 
 export function formatDuration(ms: number, detailed: boolean = false): string {
@@ -1869,7 +1899,7 @@ export function getGatewayClassDescription(gc: any): string {
 }
 
 // ============================================================================
-// GATEWAY API ROUTE UTILITIES (shared by HTTPRoute, GRPCRoute, TCPRoute, TLSRoute)
+// GATEWAY API ROUTE UTILITIES (shared by HTTPRoute, GRPCRoute, TCPRoute, TLSRoute, UDPRoute)
 // ============================================================================
 
 const GATEWAY_API_GROUP = 'gateway.networking.k8s.io'
@@ -2279,6 +2309,37 @@ export function parseColumnFilterExcludes(filtersParam: string | null): Record<s
   return excludes
 }
 
+/** The Resources list's own filter params in the URL (the kind is in the path, `apiGroup` beside it). */
+export const RESOURCE_LIST_FILTER_PARAMS = ['search', 'regex', 'filters', 'problems', 'labels', 'ownerKind', 'ownerName', 'showInactive'] as const
+
+/** The per-kind filters in a query string: what a kind switch resets or restores. */
+export function kindFiltersFromSearch(search: string | undefined) {
+  const params = new URLSearchParams(search ?? '')
+  const filtersParam = params.get('filters')
+  return {
+    columnFilters: parseColumnFilters(filtersParam),
+    columnFilterExcludes: parseColumnFilterExcludes(filtersParam),
+    problemFilters: params.get('problems')?.split(',').filter(Boolean) || [],
+  }
+}
+
+/** The `filters` param value. Drops an exclude flag on a column with no active values. */
+export function columnFiltersParam(colFilters: Record<string, string[]>, colExcludes: Record<string, boolean>): string {
+  const activeExcludes = Object.fromEntries(
+    Object.entries(colExcludes).filter(([k, on]) => on && (colFilters[k]?.length ?? 0) > 0)
+  )
+  return serializeColumnFilters(colFilters, activeExcludes)
+}
+
+/** Inverse of kindFiltersFromSearch: the `filters` + `problems` query, '' when none. */
+export function kindFiltersToSearch(f: ReturnType<typeof kindFiltersFromSearch>): string {
+  const params = new URLSearchParams()
+  const filters = columnFiltersParam(f.columnFilters, f.columnFilterExcludes)
+  if (filters) params.set('filters', filters)
+  if (f.problemFilters.length > 0) params.set('problems', f.problemFilters.join(','))
+  return params.toString()
+}
+
 // Split a single "col[:operator]:values" pair into its decoded key, values, and
 // whether the explicit exclude operator was present. The first literal colon
 // delimits key from the rest (keys are encoded, so their own colons don't
@@ -2357,7 +2418,7 @@ export function getCellFilterValue(resource: any, column: string, kind: string):
       if (kindLower === 'hpas' || kindLower === 'horizontalpodautoscalers') return getHPAStatus(resource).text
       if (kindLower === 'gateways') return getGatewayStatus(resource).text
       if (kindLower === 'gatewayclasses') return getGatewayClassStatus(resource).text
-      if (['httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes'].includes(kindLower)) return getRouteStatus(resource).text
+      if (['httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'udproutes'].includes(kindLower)) return getRouteStatus(resource).text
       if (kindLower === 'sealedsecrets') return getSealedSecretStatus(resource).text
       if (kindLower === 'poddisruptionbudgets') return getPDBStatus(resource).text
       if (kindLower === 'applications') return getArgoApplicationStatus(resource).text
@@ -2691,7 +2752,6 @@ export {
   getScaledObjectTriggers,
   getScaledObjectTriggerCount,
   getScaledObjectHpaName,
-  getScaledObjectLastActiveTime,
   getScaledObjectPollingInterval,
   getScaledObjectCooldownPeriod,
   getScaledJobStatus,

package/src/components/resources/rules-column-width.test.ts

@@ -27,7 +27,7 @@ function columnSetBody(key: string): string {
 // in the sortable-key list, so neither affordance ever renders on it. w-20
 // (80px) leaves 47px.
 describe('Rules column width', () => {
-  const kinds = ['kyvernopolicies', 'clusterpolicies', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes']
+  const kinds = ['kyvernopolicies', 'clusterpolicies', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'udproutes']
 
   it.each(kinds)('%s Rules column is at least w-20', (kind) => {
     const rules = columnSetBody(kind).match(/\{ key: 'rules'.*\}/)

package/src/components/resources/summarize-scheduler-message.test.ts

@@ -28,3 +28,33 @@ describe('summarizeSchedulerMessage', () => {
     expect(summarizeSchedulerMessage(undefined)).toBe('')
   })
 })
+
+it.each([
+  ['0/2 nodes are available: 2 Too many pods.', 'both nodes have reached their Pod limit'],
+  ['Unschedulable: 0/2 nodes are available: 2 Too many pods.', 'both nodes have reached their Pod limit'],
+  ['2 node(s) insufficient pods (0/2 nodes available)', 'both nodes have reached their Pod limit'],
+  ['0/1 nodes are available: 1 Insufficient cpu.', '1 node does not have enough CPU'],
+  ['0/3 nodes are available: 3 Insufficient cpu.', 'all nodes do not have enough CPU'],
+  ['0/2 nodes are available: 2 Insufficient memory, 2 Too many pods.', 'both nodes do not have enough memory; both nodes have reached their Pod limit'],
+  ["0/2 nodes are available: 2 node(s) didn’t match Pod’s node affinity/selector.", 'both nodes do not match the Pod’s node affinity or selector'],
+  ['1 node(s) had untolerated taint {dedicated: db}.', '1 node has taints the Pod does not tolerate'],
+  ['0/2 nodes are available: 1 node(s) had untolerated taint {dedicated: db}.', '1 node has taints the Pod does not tolerate'],
+  ['0/2 nodes are available: pod has unbound immediate PersistentVolumeClaims.', 'a required volume claim is not bound'],
+  ['1 node(s) untolerated taint dedicated=db, 1 node(s) insufficient cpu (0/2 nodes available)', '1 node has taints the Pod does not tolerate; 1 node does not have enough CPU'],
+  ['2 node(s) node affinity/selector mismatch (0/2 nodes available)', 'both nodes do not match the Pod’s node affinity or selector'],
+  ['unbound PersistentVolumeClaim, 1 node(s) volume node-affinity conflict (0/2 nodes available)', 'a required volume claim is not bound; 1 node does not match the volume’s node affinity'],
+  ['0/2 nodes are available: 1 node(s) had volume node affinity conflict, 1 Insufficient memory.', '1 node does not match the volume’s node affinity; 1 node does not have enough memory'],
+  ['no node has kubernetes.io/arch=arm64 — 2 node(s) carry kubernetes.io/arch: [amd64]; 1 node(s) insufficient cpu (0/3 nodes available)', 'no node has kubernetes.io/arch=arm64 — 2 node(s) carry kubernetes.io/arch: [amd64]; 1 node does not have enough CPU'],
+  ['custom scheduler says 2 Insufficient cpu, 1 Insufficient memory', 'custom scheduler says 2 Insufficient cpu; 1 node does not have enough memory'],
+  ['1 node(s) pod anti-affinity conflict, 1 node(s) insufficient memory, no node has zone=west — 2 node(s) carry zone: [east, north]', '1 node(s) pod anti-affinity conflict; 1 node does not have enough memory; no node has zone=west — 2 node(s) carry zone: [east, north]'],
+  ["0/14 nodes are available: 6 node(s) had untolerated taint(s), 8 node(s) didn't match Pod's node affinity/selector. no new claims to deallocate, preemption: 0/14 nodes are available: 14 Preemption is not helpful for scheduling.", '6 nodes have taints the Pod does not tolerate; 8 nodes do not match the Pod’s node affinity or selector'],
+])('offers a plain summary additively for %s', (raw, expected) => {
+  expect(summarizeSchedulerMessage(raw, { plain: true })).toBe(expected)
+})
+
+it('summarizes a very long, separator-heavy message in linear time', () => {
+  const message = '0/2 nodes are available: ' + '1 node(s) custom reason, '.repeat(10_000) + '2 Insufficient cpu.'
+  const summary = summarizeSchedulerMessage(message, { plain: true })
+  expect(summary.split('; ')).toHaveLength(10_001)
+  expect(summary.endsWith('both nodes do not have enough CPU')).toBe(true)
+})

package/src/components/shared/ActionConfirmDialog.test.tsx

@@ -0,0 +1,154 @@
+// @vitest-environment jsdom
+import { act, useState } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ActionConfirmDialog, type ActionConfirmDialogProps } from './ActionConfirmDialog'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+const roots: Root[] = []
+const base: ActionConfirmDialogProps = {
+  open: true, onClose: () => {}, onConfirm: () => {}, title: 'Scale worker?',
+  subject: { kind: 'Deployment', namespace: 'jobs', name: 'worker' },
+  context: 'test-cluster', effect: 'Set the desired replicas to three.', confirmLabel: 'Scale',
+}
+function render(props: Partial<ActionConfirmDialogProps> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  roots.push(root)
+  const update = (next: Partial<ActionConfirmDialogProps>) => act(() => root.render(<ActionConfirmDialog {...base} {...next} />))
+  update(props)
+  return update
+}
+function button(label: string) {
+  return [...document.querySelectorAll('button')].find(b => b.textContent?.trim() === label)!
+}
+function type(text: string) {
+  const input = document.querySelector('input')!
+  act(() => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, text)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+afterEach(() => {
+  act(() => roots.splice(0).forEach(root => root.unmount()))
+  document.body.innerHTML = ''
+})
+
+describe('ActionConfirmDialog', () => {
+  it('shows the target and context before a reviewed write', () => {
+    const confirm = vi.fn()
+    render({ onConfirm: confirm })
+    expect(document.body.textContent).toContain('Deployment jobs/worker · context test-cluster')
+    act(() => button('Scale').click())
+    expect(confirm).toHaveBeenCalledOnce()
+  })
+  it('shows an incomplete form as a quiet hint and a disabled confirm', () => {
+    render({ incompleteReason: 'The replica count is unchanged' })
+    expect(document.body.textContent).toContain('The replica count is unchanged')
+    expect(document.body.textContent).not.toContain('This action is not available')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('keeps the alert for a real blocker', () => {
+    render({ disabledReason: 'Needs patch deployments in jobs' })
+    expect(document.body.textContent).toContain('This action is not available')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('requires typed acknowledgement and clears it after closing', () => {
+    const update = render({ typedConfirmation: 'worker' })
+    expect(button('Scale').disabled).toBe(true)
+    type('other')
+    expect(button('Scale').disabled).toBe(true)
+    type('worker')
+    expect(button('Scale').disabled).toBe(false)
+    update({ typedConfirmation: 'worker', open: false })
+    update({ typedConfirmation: 'worker' })
+    expect(document.querySelector('input')?.value).toBe('')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('requires the host write guard even with the correct acknowledgement', () => {
+    render({ typedConfirmation: 'worker', guardSatisfied: false })
+    type('worker')
+    expect(button('Scale').disabled).toBe(true)
+  })
+  it('locks resubmission for an unknown or partial result without claiming no write happened', () => {
+    render({ result: { state: 'unknown', message: 'Refresh the target before another attempt.' } })
+    expect(button('Scale').disabled).toBe(true)
+    expect(document.body.textContent).toContain('Radar could not tell whether this took effect')
+    expect(document.body.textContent).not.toContain('The write did not happen')
+  })
+  it('locks an unknown result even without an error string', () => {
+    render({ result: { state: 'unknown' } })
+    expect(button('Scale').disabled).toBe(true)
+    expect(document.body.textContent).toContain('Radar could not tell whether this took effect')
+    expect(document.body.textContent).toContain('Check the object’s current state')
+  })
+  it('allows retry after a known refusal, using neutral default error copy', () => {
+    render({ result: { state: 'error', message: 'The reviewed replica count changed.' } })
+    expect(button('Scale').disabled).toBe(false)
+    expect(document.body.textContent).toContain('The action could not be completed')
+  })
+  it('locks confirm, Back and dismissal while the request is pending', () => {
+    const close = vi.fn(), back = vi.fn()
+    render({ isLoading: true, onClose: close, onBack: back })
+    expect(button('Scale').disabled).toBe(true)
+    expect(button('Back').disabled).toBe(true)
+    expect(button('Cancel').disabled).toBe(true)
+    act(() => button('Cancel').click())
+    act(() => document.querySelector<HTMLButtonElement>('[aria-label="Close"]')!.click())
+    expect(close).not.toHaveBeenCalled()
+    expect(back).not.toHaveBeenCalled()
+  })
+  it('keeps Back and Cancel distinct', () => {
+    const close = vi.fn(), back = vi.fn()
+    render({ onClose: close, onBack: back })
+    act(() => button('Back').click())
+    expect(back).toHaveBeenCalledOnce()
+    expect(close).not.toHaveBeenCalled()
+    act(() => button('Cancel').click())
+    expect(close).toHaveBeenCalledOnce()
+  })
+  it('reveals the reviewed writes through an accessible disclosure', () => {
+    render({ writes: [{ summary: 'patch Deployment jobs/worker', detail: 'spec.replicas: 3' }] })
+    const toggle = button('The API write')
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    act(() => toggle.click())
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(document.body.textContent).toContain('spec.replicas: 3')
+  })
+})
+
+it('retains a host-owned outcome lock across dialog dismissal and remount', () => {
+  function Host() {
+    const [open, setOpen] = useState(true)
+    const [unknown, setUnknown] = useState(true)
+    return <>
+      <button onClick={() => setOpen(true)}>Review action</button>
+      <button onClick={() => setUnknown(false)}>Current state reviewed</button>
+      {open && <ActionConfirmDialog {...base} result={unknown ? { state: 'unknown' } : undefined} onClose={() => setOpen(false)} />}
+    </>
+  }
+  const root = createRoot(document.body.appendChild(document.createElement('div')))
+  roots.push(root)
+  act(() => root.render(<Host />))
+  expect(button('Scale').disabled).toBe(true)
+  act(() => button('Cancel').click())
+  act(() => button('Review action').click())
+  expect(button('Scale').disabled).toBe(true)
+  act(() => button('Current state reviewed').click())
+  expect(button('Scale').disabled).toBe(false)
+})
+
+it('locks a partial result and explains that changes completed', () => {
+  render({ result: { state: 'partial' } })
+  expect(button('Scale').disabled).toBe(true)
+  expect(document.body.textContent).toContain('Some changes completed')
+  expect(document.body.textContent).toContain('Check the object’s current state')
+})
+
+it('keeps an empty known-refusal message distinct from an uncertain outcome', () => {
+  render({ result: { state: 'error', message: '' } })
+  expect(button('Scale').disabled).toBe(false)
+  expect(document.body.textContent).toContain('The action could not be completed')
+  expect(document.body.textContent).not.toContain('Check the object’s current state')
+})

package/src/components/shared/ActionConfirmDialog.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useId, useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { AlertTriangle, Info, X } from 'lucide-react'
+import { DialogPortal } from '../ui/DialogPortal'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
+import { TONE_SOLID_CLASS } from '../ui/severity-tone'
+import { AlertBanner } from '../ui/drawer-components'
+import type { ResourceRef } from '../../types/core'
+
+/** One API call the action will make, shown in the technical section. */
+export interface ActionWrite {
+  /** Plain-language line, e.g. "patch Cluster payments/pg-orders status". */
+  summary: string
+  /** The literal body or field change, shown monospaced. */
+  detail?: string
+}
+
+export type ActionConfirmResult =
+  | { state: 'error'; message: string; title?: string }
+  | { state: 'unknown' | 'partial'; message?: string; title?: string }
+
+export interface ActionConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void
+  onBack?: () => void
+  backLabel?: string
+  /** Imperative title: "Switch over pg-orders?" */
+  title: string
+  subject: Pick<ResourceRef, 'kind' | 'name'> & Partial<Pick<ResourceRef, 'namespace'>>
+  /** Kubernetes context the write goes to, always visible. */
+  context?: string
+  /** What happens, stated first. */
+  effect: ReactNode
+  /** Form fields (targets, options). */
+  children?: ReactNode
+  notes?: ReactNode[]
+  warnings?: ReactNode[]
+  /** Extra acknowledgement block, e.g. the GitOps write warning. */
+  guard?: ReactNode
+  /** Blocks confirm until the guard is satisfied. */
+  guardSatisfied?: boolean
+  writes?: ActionWrite[]
+  /** When set, the user must type this exact text to confirm. */
+  typedConfirmation?: string
+  confirmLabel: string
+  /** Disruptive actions use the danger styling. */
+  disruptive?: boolean
+  /** Why the action cannot run right now; disables confirm and is shown. */
+  disabledReason?: string
+  /** What the form still needs (an unchanged value, a missing input); disables confirm with a quiet hint beside it, not an alert. */
+  incompleteReason?: string
+  isLoading?: boolean
+  /**
+   * Unknown and partial results lock Confirm: repeating the action could apply
+   * it twice. The host must retain the result
+   * across dismissal/remount until it has reviewed the current target again.
+   */
+  result?: ActionConfirmResult
+  /** `wide` for dialogs that show evidence beside their form fields. */
+  size?: 'default' | 'wide'
+}
+
+export function ActionConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  onBack,
+  backLabel = 'Back',
+  title,
+  subject,
+  context,
+  effect,
+  children,
+  notes = [],
+  warnings = [],
+  guard,
+  guardSatisfied = true,
+  writes = [],
+  typedConfirmation,
+  confirmLabel,
+  disruptive = false,
+  disabledReason,
+  incompleteReason,
+  isLoading = false,
+  result,
+  size = 'default',
+}: ActionConfirmDialogProps) {
+  const titleId = useId()
+  const [typed, setTyped] = useState('')
+  const [showWrites, setShowWrites] = useState(false)
+  const writesDisclosure = useDisclosure(showWrites)
+
+  useEffect(() => {
+    if (!open) {
+      setTyped('')
+      setShowWrites(false)
+    }
+  }, [open])
+
+  const typedOk = !typedConfirmation || typed.trim() === typedConfirmation
+  const outcomeLocked = result?.state === 'unknown' || result?.state === 'partial'
+  const canConfirm = !disabledReason && !incompleteReason && !outcomeLocked && typedOk && guardSatisfied && !isLoading
+  const where = [subject.namespace, subject.name].filter(Boolean).join('/')
+
+  return (
+    <DialogPortal open={open} onClose={onClose} closable={!isLoading} className={size === 'wide' ? 'w-full max-w-4xl' : 'w-full max-w-xl'} ariaLabelledBy={titleId}>
+      <div className="flex items-start gap-3 border-b border-theme-border p-4">
+        <div className="min-w-0 flex-1">
+          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+          <div className="mt-0.5 text-xs text-theme-text-tertiary">
+            {subject.kind} <span className="font-mono">{where}</span>
+            {context && (
+              <>
+                {' · context '}
+                <span className="font-mono">{context}</span>
+              </>
+            )}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isLoading}
+          aria-label="Close"
+          className="rounded p-1 text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary disabled:opacity-50"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      <div className="max-h-[70vh] space-y-4 overflow-y-auto p-4 text-sm text-theme-text-primary">
+        <div className="text-theme-text-primary">{effect}</div>
+
+        {disabledReason && <AlertBanner variant="info" title="This action is not available" message={disabledReason} />}
+
+        {children}
+
+        {warnings.length > 0 && (
+          <div className="space-y-2">
+            {warnings.map((w, i) => (
+              <div key={i} className="flex items-start gap-2 text-sm text-theme-text-primary">
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-warning-text" />
+                <div className="min-w-0">{w}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {notes.length > 0 && (
+          <div className="space-y-1.5">
+            {notes.map((n, i) => (
+              <div key={i} className="flex items-start gap-2 text-xs text-theme-text-secondary">
+                <Info className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+                <div className="min-w-0">{n}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {guard}
+
+        {writes.length > 0 && (
+          <div>
+            <button
+              type="button"
+              {...writesDisclosure.buttonProps}
+              onClick={() => setShowWrites((v) => !v)}
+              className="flex items-center gap-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
+            >
+              <CollapseChevron open={showWrites} className="h-3.5 w-3.5" />
+              {writes.length === 1 ? 'The API write' : `The API writes, in order (${writes.length})`}
+            </button>
+            <Collapse open={showWrites} id={writesDisclosure.panelId}>
+              <ol className="mt-2 space-y-2 pl-5 text-xs">
+                {writes.map((w, i) => (
+                  <li key={i} className="list-decimal text-theme-text-secondary">
+                    <div>{w.summary}</div>
+                    {w.detail && (
+                      <pre className="mt-1 overflow-auto whitespace-pre-wrap rounded bg-theme-base/60 p-2 font-mono text-[11.5px] text-theme-text-primary">
+                        {w.detail}
+                      </pre>
+                    )}
+                  </li>
+                ))}
+              </ol>
+            </Collapse>
+          </div>
+        )}
+
+        {typedConfirmation && (
+          <label className="block">
+            <span className="text-xs text-theme-text-secondary">
+              Type <span className="font-mono font-semibold text-theme-text-primary">{typedConfirmation}</span> to confirm
+            </span>
+            <input
+              value={typed}
+              onChange={(e) => setTyped(e.target.value)}
+              autoComplete="off"
+              spellCheck={false}
+              className="mt-1 w-full rounded-lg border border-theme-border bg-theme-base px-3 py-1.5 font-mono text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-skyhook-500"
+            />
+          </label>
+        )}
+
+        {result && (
+          <AlertBanner
+            variant={outcomeLocked ? 'warning' : 'error'}
+            title={result.title ?? (result.state === 'partial' ? 'Some changes completed' : result.state === 'unknown' ? 'Radar could not tell whether this took effect' : 'The action could not be completed')}
+            message={result.message || (outcomeLocked ? 'Check the object’s current state before another attempt.' : undefined)}
+          />
+        )}
+      </div>
+
+      <div className="flex items-center justify-end gap-3 border-t border-theme-border p-4">
+        {onBack && <button type="button" onClick={onBack} disabled={isLoading} className="btn-secondary mr-auto px-4 py-2 text-sm disabled:opacity-50">{backLabel}</button>}
+        {incompleteReason && !disabledReason && <span className="mr-auto min-w-0 text-xs text-theme-text-tertiary">{incompleteReason}</span>}
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isLoading}
+          className="rounded-lg px-4 py-2 text-sm font-medium text-theme-text-secondary transition-colors hover:bg-theme-elevated hover:text-theme-text-primary disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={onConfirm}
+          disabled={!canConfirm}
+          className={clsx(
+            'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+            disruptive ? [TONE_SOLID_CLASS.red, 'hover:opacity-90'] : 'btn-brand',
+          )}
+        >
+          {isLoading && (
+            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" aria-hidden>
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          )}
+          {confirmLabel}
+        </button>
+      </div>
+    </DialogPortal>
+  )
+}