@skyhook-io/k8s-ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,34 @@
+// Contour HTTPProxy CRD utility functions for resource list cells and detail renderers
+
+export function getHTTPProxyFQDN(resource: any): string {
+  return resource.spec?.virtualhost?.fqdn || '-'
+}
+
+export function getHTTPProxyStatus(resource: any): { status: string; label: string } {
+  const currentStatus = resource.status?.currentStatus?.toLowerCase()
+  if (currentStatus === 'valid') return { status: 'healthy', label: 'Valid' }
+  if (currentStatus === 'invalid') return { status: 'unhealthy', label: 'Invalid' }
+  if (currentStatus === 'orphaned') return { status: 'degraded', label: 'Orphaned' }
+  return { status: 'unknown', label: '-' }
+}
+
+export function getHTTPProxyRouteCount(resource: any): number {
+  return resource.spec?.routes?.length || 0
+}
+
+export function getHTTPProxyServiceCount(resource: any): number {
+  let count = 0
+  for (const route of resource.spec?.routes || []) {
+    count += (route.services || []).length
+  }
+  count += (resource.spec?.tcpproxy?.services || []).length
+  return count
+}
+
+export function getHTTPProxyIncludeCount(resource: any): number {
+  return resource.spec?.includes?.length || 0
+}
+
+export function hasHTTPProxyTLS(resource: any): boolean {
+  return !!resource.spec?.virtualhost?.tls
+}

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

@@ -197,6 +197,97 @@ export function getPodRestarts(pod: any): number {
   return containerStatuses.reduce((sum: number, c: any) => sum + (c.restartCount || 0), 0)
 }
 
+export interface ContainerSquareState {
+  name: string
+  status: 'ready' | 'running' | 'waiting' | 'completed' | 'terminated' | 'unknown'
+  restarts: number
+  reason?: string
+  message?: string
+  exitCode?: number
+  startedAt?: string
+  finishedAt?: string
+  isInit?: boolean
+  /** Last termination info — crucial for debugging CrashLoopBackOff */
+  lastTermination?: {
+    reason?: string
+    exitCode?: number
+    startedAt?: string
+    finishedAt?: string
+  }
+}
+
+export function getContainerSquareStates(pod: any): ContainerSquareState[] {
+  const result: ContainerSquareState[] = []
+  const initStatuses = pod.status?.initContainerStatuses || []
+  const containerStatuses = pod.status?.containerStatuses || []
+  const specContainers = pod.spec?.containers || []
+
+  for (const cs of initStatuses) {
+    const stateKey = cs.state ? Object.keys(cs.state)[0] : 'unknown'
+    let status: ContainerSquareState['status'] = 'unknown'
+    if (stateKey === 'terminated' && cs.state?.terminated?.exitCode === 0) {
+      status = 'completed'
+    } else if (stateKey === 'running') {
+      status = cs.ready ? 'ready' : 'running'
+    } else if (stateKey === 'waiting') {
+      status = 'waiting'
+    } else if (stateKey === 'terminated') {
+      status = 'terminated'
+    }
+    const stateDetail = cs.state?.[stateKey]
+    const lastTerm = cs.lastState?.terminated
+    result.push({
+      name: cs.name,
+      status,
+      restarts: cs.restartCount || 0,
+      reason: stateDetail?.reason,
+      message: stateDetail?.message,
+      exitCode: stateDetail?.exitCode,
+      startedAt: stateDetail?.startedAt,
+      finishedAt: stateDetail?.finishedAt,
+      isInit: true,
+      lastTermination: lastTerm ? { reason: lastTerm.reason, exitCode: lastTerm.exitCode, startedAt: lastTerm.startedAt, finishedAt: lastTerm.finishedAt } : undefined,
+    })
+  }
+
+  if (containerStatuses.length > 0) {
+    for (const cs of containerStatuses) {
+      const stateKey = cs.state ? Object.keys(cs.state)[0] : 'unknown'
+      let status: ContainerSquareState['status'] = 'unknown'
+      if (stateKey === 'running' && cs.ready) {
+        status = 'ready'
+      } else if (stateKey === 'running') {
+        status = 'running'
+      } else if (stateKey === 'terminated' && cs.state?.terminated?.exitCode === 0) {
+        status = 'completed'
+      } else if (stateKey === 'terminated') {
+        status = 'terminated'
+      } else if (stateKey === 'waiting') {
+        status = 'waiting'
+      }
+      const stateDetail = cs.state?.[stateKey]
+      const lastTerm = cs.lastState?.terminated
+      result.push({
+        name: cs.name,
+        status,
+        restarts: cs.restartCount || 0,
+        reason: stateDetail?.reason,
+        message: stateDetail?.message,
+        exitCode: stateDetail?.exitCode,
+        startedAt: stateDetail?.startedAt,
+        finishedAt: stateDetail?.finishedAt,
+        lastTermination: lastTerm ? { reason: lastTerm.reason, exitCode: lastTerm.exitCode, startedAt: lastTerm.startedAt, finishedAt: lastTerm.finishedAt } : undefined,
+      })
+    }
+  } else {
+    for (const c of specContainers) {
+      result.push({ name: c.name, status: 'unknown', restarts: 0 })
+    }
+  }
+
+  return result
+}
+
 // ============================================================================
 // WORKLOAD UTILITIES (Deployment, StatefulSet, DaemonSet, ReplicaSet)
 // ============================================================================

package/src/components/shared/ResourceActionsBar.tsx

@@ -6,6 +6,8 @@ import {
   Trash2,
   Play,
   Pause,
+  Ban,
+  AlertTriangle,
   Box,
   ChevronDown,
   History,
@@ -16,7 +18,9 @@ import {
 } from 'lucide-react'
 import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
-import { ForceDeleteConfirmDialog } from '../ui/ForceDeleteConfirmDialog'
+import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDeleteConfirmDialog'
+import { ConfirmDialog } from '../ui/ConfirmDialog'
+import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
 import { formatKindName } from '../ui/drawer-components'
 
@@ -49,6 +53,8 @@ interface ResourceActionsBarProps {
   // Delete
   onDelete?: (params: { kind: string; namespace: string; name: string; force: boolean }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
   isDeleting?: boolean
+  cascadeDependents?: CascadeDependent[]
+  cascadeLoading?: boolean
 
   // Workload restart
   onRestart?: (params: { kind: string; namespace: string; name: string }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
@@ -88,6 +94,18 @@ interface ResourceActionsBarProps {
   isArgoSuspending?: boolean
   onArgoResume?: (params: { namespace: string; name: string }) => void
   isArgoResuming?: boolean
+
+  // Node debug shell
+  onOpenNodeTerminal?: (params: { nodeName: string }) => void
+
+  // Node operations (cordon/uncordon/drain)
+  canNodeWrite?: boolean
+  onCordonNode?: (params: { name: string }) => void
+  isCordoningNode?: boolean
+  onUncordonNode?: (params: { name: string }) => void
+  isUncordoningNode?: boolean
+  onDrainNode?: (params: { name: string; options?: { deleteEmptyDirData?: boolean; force?: boolean } }) => void
+  isDrainingNode?: boolean
 }
 
 export function ResourceActionsBar({
@@ -95,7 +113,7 @@ export function ResourceActionsBar({
   canExec, canViewLogs, canPortForward,
   onOpenTerminal, onOpenLogs: openLogs, onOpenWorkloadLogs: openWorkloadLogs, onCopyCommand,
   renderPortForward,
-  onDelete, isDeleting,
+  onDelete, isDeleting, cascadeDependents, cascadeLoading,
   onRestart, isRestarting,
   revisions: revisionsList, revisionsLoading, revisionsError, onRollback, isRollingBack,
   onTriggerCronJob, isTriggeringCronJob,
@@ -109,12 +127,22 @@ export function ResourceActionsBar({
   onArgoRefresh, isArgoRefreshing,
   onArgoSuspend, isArgoSuspending,
   onArgoResume, isArgoResuming,
+  onOpenNodeTerminal,
+  canNodeWrite,
+  onCordonNode, isCordoningNode,
+  onUncordonNode, isUncordoningNode,
+  onDrainNode, isDrainingNode,
 }: ResourceActionsBarProps) {
   const kind = resource.kind.toLowerCase()
 
   // Delete confirmation state
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
+  // Node operation confirmation state
+  const [showCordonConfirm, setShowCordonConfirm] = useState(false)
+  const [showDrainConfirm, setShowDrainConfirm] = useState(false)
+  const [drainForce, setDrainForce] = useState(false)
+
   // Rollback dialog state
   const [showRevisions, setShowRevisions] = useState(false)
   const isRollbackKind = ['deployments', 'statefulsets', 'daemonsets'].includes(kind)
@@ -226,6 +254,60 @@ export function ResourceActionsBar({
         </>
       )}
 
+      {/* Node actions */}
+      {kind === 'nodes' && (
+        <>
+          {canExec && onOpenNodeTerminal && (
+            <button
+              onClick={() => onOpenNodeTerminal({ nodeName: resource.name })}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+            >
+              <Terminal className="w-3.5 h-3.5" />
+              Debug Shell
+            </button>
+          )}
+
+          {canNodeWrite && (
+            <>
+              {data?.spec?.unschedulable ? (
+                onUncordonNode && (
+                  <button
+                    onClick={() => onUncordonNode({ name: resource.name })}
+                    disabled={isUncordoningNode}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg transition-colors disabled:opacity-50"
+                  >
+                    <Play className={`w-3.5 h-3.5 ${isUncordoningNode ? 'animate-pulse' : ''}`} />
+                    {isUncordoningNode ? 'Uncordoning...' : 'Uncordon'}
+                  </button>
+                )
+              ) : (
+                onCordonNode && (
+                  <button
+                    onClick={() => setShowCordonConfirm(true)}
+                    disabled={isCordoningNode}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-amber-600 hover:bg-amber-700 rounded-lg transition-colors disabled:opacity-50"
+                  >
+                    <Ban className={`w-3.5 h-3.5 ${isCordoningNode ? 'animate-pulse' : ''}`} />
+                    {isCordoningNode ? 'Cordoning...' : 'Cordon'}
+                  </button>
+                )
+              )}
+
+              {onDrainNode && (
+                <button
+                  onClick={() => setShowDrainConfirm(true)}
+                  disabled={isDrainingNode}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
+                >
+                  <AlertTriangle className={`w-3.5 h-3.5 ${isDrainingNode ? 'animate-pulse' : ''}`} />
+                  {isDrainingNode ? 'Draining...' : 'Drain'}
+                </button>
+              )}
+            </>
+          )}
+        </>
+      )}
+
       {/* Service actions */}
       {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && canPortForward && resource.namespace && resource.name && renderPortForward && (
         renderPortForward({
@@ -418,8 +500,60 @@ export function ResourceActionsBar({
         resourceKind={formatKindName(resource.kind)}
         namespaceName={resource.namespace}
         isLoading={isDeleting ?? false}
+        cascadeDependents={cascadeDependents}
+        cascadeLoading={cascadeLoading}
+      />
+
+      {/* Node cordon confirmation */}
+      <ConfirmDialog
+        open={showCordonConfirm}
+        onClose={() => setShowCordonConfirm(false)}
+        onConfirm={() => {
+          onCordonNode?.({ name: resource.name })
+          setShowCordonConfirm(false)
+        }}
+        title="Cordon Node"
+        message={`Mark node "${resource.name}" as unschedulable? No new pods will be scheduled on this node.`}
+        confirmLabel="Cordon"
+        variant="warning"
+        isLoading={isCordoningNode}
       />
 
+      {/* Node drain confirmation */}
+      <ConfirmDialog
+        open={showDrainConfirm}
+        onClose={() => {
+          setShowDrainConfirm(false)
+          setDrainForce(false)
+        }}
+        onConfirm={() => {
+          onDrainNode?.({
+            name: resource.name,
+            options: { deleteEmptyDirData: true, force: drainForce || undefined },
+          })
+          setShowDrainConfirm(false)
+          setDrainForce(false)
+        }}
+        title="Drain Node"
+        message={`Cordon and evict all pods from node "${resource.name}"? DaemonSet pods will be skipped.`}
+        confirmLabel={isDrainingNode ? 'Draining...' : 'Drain'}
+        variant="danger"
+        isLoading={isDrainingNode}
+        isClosable
+      >
+        <div className="flex flex-col gap-2 text-sm text-theme-text-secondary">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={drainForce}
+              onChange={(e) => setDrainForce(e.target.checked)}
+              className="rounded border-theme-border"
+            />
+            Force (evict pods not managed by a controller)
+          </label>
+        </div>
+      </ConfirmDialog>
+
       {showRevisions && ['deployments', 'statefulsets', 'daemonsets'].includes(kind) && (
         <RevisionHistoryDialog
           kind={resource.kind}
@@ -619,7 +753,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
   const [confirmRevision, setConfirmRevision] = useState<number | null>(null)
   const [diffRevision, setDiffRevision] = useState<number | null>(null)
 
-  if (!open) return null
+  const handleClose = () => { setDiffRevision(null); onClose() }
 
   const currentRevision = revisions?.find(r => r.isCurrent)
   const selectedRevision = revisions?.find(r => r.number === diffRevision)
@@ -660,160 +794,158 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={isRollingBack ? undefined : () => { setDiffRevision(null); onClose() }}
-      />
-
-      <div className={clsx(
-        "relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl mx-4 outline-none flex flex-col",
+    <DialogPortal
+      open={open}
+      onClose={handleClose}
+      closable={!isRollingBack}
+      className={clsx(
+        "flex flex-col",
         diffRevision ? "max-w-5xl w-full max-h-[85vh]" : "max-w-lg w-full"
-      )}>
-        <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
-          <div className="flex items-center gap-2">
-            <History className="w-5 h-5 text-amber-500" />
-            <h3 className="text-lg font-semibold text-theme-text-primary">Revision History</h3>
-            {diffRevision && currentRevision && (
-              <span className="flex items-center gap-1 ml-2 px-2 py-0.5 text-xs bg-blue-500/15 text-blue-400 rounded">
-                <GitCompare className="w-3 h-3" />
-                #{currentRevision.number} vs #{diffRevision}
-              </span>
-            )}
-          </div>
-          <button
-            onClick={() => { setDiffRevision(null); onClose() }}
-            disabled={isRollingBack}
-            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
-          >
-            <X className="w-5 h-5" />
-          </button>
+      )}
+    >
+      <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
+        <div className="flex items-center gap-2">
+          <History className="w-5 h-5 text-amber-500" />
+          <h3 className="text-lg font-semibold text-theme-text-primary">Revision History</h3>
+          {diffRevision && currentRevision && (
+            <span className="flex items-center gap-1 ml-2 px-2 py-0.5 text-xs bg-blue-500/15 text-blue-400 rounded">
+              <GitCompare className="w-3 h-3" />
+              #{currentRevision.number} vs #{diffRevision}
+            </span>
+          )}
         </div>
+        <button
+          onClick={handleClose}
+          disabled={isRollingBack}
+          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
 
-        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-          <div className={clsx("p-4 overflow-y-auto", diffRevision ? "max-h-48 shrink-0" : "max-h-80")}>
-            {isLoading && (
-              <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
-                Loading revisions...
-              </div>
-            )}
-
-            {error && (
-              <div className="flex items-center justify-center py-8 text-red-400 text-sm">
-                Failed to load revisions: {error instanceof Error ? error.message : 'Unknown error'}
-              </div>
-            )}
-
-            {revisions && revisions.length === 0 && (
-              <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
-                No revisions found
-              </div>
-            )}
-
-            {revisions && revisions.length > 0 && (
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="text-theme-text-secondary text-left text-xs uppercase tracking-wider">
-                    <th className="pb-2 pr-3 font-medium">Rev</th>
-                    <th className="pb-2 pr-3 font-medium">Image</th>
-                    <th className="pb-2 pr-3 font-medium">Age</th>
-                    <th className="pb-2 font-medium text-right">Action</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {revisions.map((rev: WorkloadRevision) => (
-                    <tr
-                      key={rev.number}
-                      className={clsx(
-                        "border-t border-theme-border/50",
-                        diffRevision === rev.number && "bg-blue-500/10"
-                      )}
-                    >
-                      <td className="py-2 pr-3 text-theme-text-primary font-mono">
-                        #{rev.number}
-                      </td>
-                      <td className="py-2 pr-3 text-theme-text-secondary font-mono truncate max-w-[180px]" title={rev.image}>
-                        {getImageTag(rev.image)}
-                      </td>
-                      <td className="py-2 pr-3 text-theme-text-secondary whitespace-nowrap">
-                        {formatTimeAgo(rev.createdAt)}
-                      </td>
-                      <td className="py-2 text-right">
-                        <div className="flex items-center gap-1 justify-end">
-                          {!rev.isCurrent && rev.template && currentRevision?.template && (
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <div className={clsx("p-4 overflow-y-auto", diffRevision ? "max-h-48 shrink-0" : "max-h-80")}>
+          {isLoading && (
+            <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
+              Loading revisions...
+            </div>
+          )}
+
+          {error && (
+            <div className="flex items-center justify-center py-8 text-red-400 text-sm">
+              Failed to load revisions: {error instanceof Error ? error.message : 'Unknown error'}
+            </div>
+          )}
+
+          {revisions && revisions.length === 0 && (
+            <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
+              No revisions found
+            </div>
+          )}
+
+          {revisions && revisions.length > 0 && (
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-theme-text-secondary text-left text-xs uppercase tracking-wider">
+                  <th className="pb-2 pr-3 font-medium">Rev</th>
+                  <th className="pb-2 pr-3 font-medium">Image</th>
+                  <th className="pb-2 pr-3 font-medium">Age</th>
+                  <th className="pb-2 font-medium text-right">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {revisions.map((rev: WorkloadRevision) => (
+                  <tr
+                    key={rev.number}
+                    className={clsx(
+                      "border-t border-theme-border/50",
+                      diffRevision === rev.number && "bg-blue-500/10"
+                    )}
+                  >
+                    <td className="py-2 pr-3 text-theme-text-primary font-mono">
+                      #{rev.number}
+                    </td>
+                    <td className="py-2 pr-3 text-theme-text-secondary font-mono truncate max-w-[180px]" title={rev.image}>
+                      {getImageTag(rev.image)}
+                    </td>
+                    <td className="py-2 pr-3 text-theme-text-secondary whitespace-nowrap">
+                      {formatTimeAgo(rev.createdAt)}
+                    </td>
+                    <td className="py-2 text-right">
+                      <div className="flex items-center gap-1 justify-end">
+                        {!rev.isCurrent && rev.template && currentRevision?.template && (
+                          <button
+                            onClick={() => setDiffRevision(diffRevision === rev.number ? null : rev.number)}
+                            className={clsx(
+                              "px-2 py-0.5 text-xs font-medium rounded transition-colors flex items-center gap-1",
+                              diffRevision === rev.number
+                                ? "bg-blue-500/20 text-blue-400 border border-blue-400/50"
+                                : "text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 border border-transparent"
+                            )}
+                            title={`Compare with current revision`}
+                          >
+                            <GitCompare className="w-3 h-3" />
+                            Diff
+                          </button>
+                        )}
+                        {rev.isCurrent ? (
+                          <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-green-500/20 text-green-400 rounded">
+                            Current
+                          </span>
+                        ) : confirmRevision === rev.number ? (
+                          <>
                             <button
-                              onClick={() => setDiffRevision(diffRevision === rev.number ? null : rev.number)}
-                              className={clsx(
-                                "px-2 py-0.5 text-xs font-medium rounded transition-colors flex items-center gap-1",
-                                diffRevision === rev.number
-                                  ? "bg-blue-500/20 text-blue-400 border border-blue-400/50"
-                                  : "text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 border border-transparent"
-                              )}
-                              title={`Compare with current revision`}
+                              onClick={() => handleRollback(rev.number)}
+                              disabled={isRollingBack}
+                              className="px-2 py-0.5 text-xs font-medium text-white bg-amber-600 hover:bg-amber-700 rounded transition-colors disabled:opacity-50"
                             >
-                              <GitCompare className="w-3 h-3" />
-                              Diff
+                              {isRollingBack ? 'Rolling back...' : 'Confirm'}
                             </button>
-                          )}
-                          {rev.isCurrent ? (
-                            <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-green-500/20 text-green-400 rounded">
-                              Current
-                            </span>
-                          ) : confirmRevision === rev.number ? (
-                            <>
-                              <button
-                                onClick={() => handleRollback(rev.number)}
-                                disabled={isRollingBack}
-                                className="px-2 py-0.5 text-xs font-medium text-white bg-amber-600 hover:bg-amber-700 rounded transition-colors disabled:opacity-50"
-                              >
-                                {isRollingBack ? 'Rolling back...' : 'Confirm'}
-                              </button>
-                              <button
-                                onClick={() => setConfirmRevision(null)}
-                                disabled={isRollingBack}
-                                className="px-2 py-0.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary rounded transition-colors disabled:opacity-50"
-                              >
-                                Cancel
-                              </button>
-                            </>
-                          ) : (
                             <button
-                              onClick={() => setConfirmRevision(rev.number)}
-                              className="px-2 py-0.5 text-xs font-medium text-amber-400 hover:text-white hover:bg-amber-600 border border-amber-400/50 hover:border-amber-600 rounded transition-colors"
+                              onClick={() => setConfirmRevision(null)}
+                              disabled={isRollingBack}
+                              className="px-2 py-0.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary rounded transition-colors disabled:opacity-50"
                             >
-                              Rollback
+                              Cancel
                             </button>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            )}
-          </div>
-
-          {diffRevision && hasDiffData && (
-            <RevisionDiffView
-              currentTemplate={currentRevision!.template!}
-              selectedTemplate={selectedRevision!.template!}
-              currentRevision={currentRevision!.number}
-              selectedRevision={diffRevision}
-            />
+                          </>
+                        ) : (
+                          <button
+                            onClick={() => setConfirmRevision(rev.number)}
+                            className="px-2 py-0.5 text-xs font-medium text-amber-400 hover:text-white hover:bg-amber-600 border border-amber-400/50 hover:border-amber-600 rounded transition-colors"
+                          >
+                            Rollback
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           )}
         </div>
 
-        <div className="flex items-center justify-end p-4 border-t border-theme-border shrink-0">
-          <button
-            onClick={() => { setDiffRevision(null); onClose() }}
-            disabled={isRollingBack}
-            className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
-          >
-            Close
-          </button>
-        </div>
+        {diffRevision && hasDiffData && (
+          <RevisionDiffView
+            currentTemplate={currentRevision!.template!}
+            selectedTemplate={selectedRevision!.template!}
+            currentRevision={currentRevision!.number}
+            selectedRevision={diffRevision}
+          />
+        )}
       </div>
-    </div>
+
+      <div className="flex items-center justify-end p-4 border-t border-theme-border shrink-0">
+        <button
+          onClick={handleClose}
+          disabled={isRollingBack}
+          className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
+        >
+          Close
+        </button>
+      </div>
+    </DialogPortal>
   )
 }