@skyhook-io/k8s-ui 1.1.0 → 1.2.0

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -64,6 +64,7 @@ import {
   getKnativeConditionStatus,
   getRevisionStatus,
 } from '../resources/resource-utils-knative'
+import { getHTTPProxyStatus } from '../resources/resource-utils-contour'
 import {
   PodRenderer,
   WorkloadRenderer,
@@ -169,8 +170,37 @@ import {
   RuntimeClassRenderer,
   LeaseRenderer,
   TraefikIngressRouteRenderer,
+  ContourHTTPProxyRenderer,
 } from '../resources/renderers'
-import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo } from '../../types'
+import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom } from '../../types'
+import type { CopyHandler } from '../ui/drawer-components'
+
+/**
+ * Override map letting each platform consumer swap in its own renderer components.
+ * Each override receives only the props that ResourceRendererDispatch passes at its
+ * call site — a subset of the base renderer's full props. The override is responsible
+ * for wiring any additional behavior (metrics, exec, port-forward, scale, etc.) internally.
+ *
+ * When an override is not provided, the base (shared) renderer is used.
+ */
+export interface RendererOverrides {
+  PodRenderer?: React.ComponentType<{
+    data: any; onCopy: CopyHandler; copied: string | null
+    onNavigate?: (ref: ResourceRef) => void
+    onOpenLogs?: (podName: string, containerName: string) => void
+    resolvedEnvFrom?: ResolvedEnvFrom
+  }>
+  NodeRenderer?: React.ComponentType<{
+    data: any; relationships?: Relationships
+  }>
+  ServiceRenderer?: React.ComponentType<{
+    data: any; onCopy: CopyHandler; copied: string | null
+  }>
+  WorkloadRenderer?: React.ComponentType<{
+    kind: string; data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+}
 
 // Known resource types with specific renderers (module-level to avoid re-allocation)
 const KNOWN_KINDS = new Set([
@@ -206,6 +236,7 @@ const KNOWN_KINDS = new Set([
   'channels', 'inmemorychannels', 'subscriptions', 'sequences', 'parallels',
   'knativeingresses', 'knativecertificates', 'serverlessservices', 'domainmappings',
   'ingressroutes', 'ingressroutetcps', 'ingressrouteudps',
+  'httpproxies',
 ])
 
 // ============================================================================
@@ -228,6 +259,10 @@ interface ResourceRendererDispatchProps {
   showMetrics?: boolean
   /** When provided, container-level Logs buttons call this instead of opening the dock */
   onOpenLogs?: (podName: string, containerName: string) => void
+  /** Resolved ConfigMap/Secret data for envFrom expansion in PodRenderer */
+  resolvedEnvFrom?: ResolvedEnvFrom
+  /** Platform-specific renderer overrides (e.g. with hooks for metrics, exec, port-forward) */
+  rendererOverrides?: RendererOverrides
   /** Optional hint shown in the Events section (e.g. link to Timeline tab) */
   eventsHint?: React.ReactNode
   /** When provided, sidebar sections (related resources, events, labels, annotations, metadata) are passed to this render prop instead of being rendered inline */
@@ -258,11 +293,18 @@ export function ResourceRendererDispatch({
   events,
   eventsLoading,
   renderMetrics,
+  resolvedEnvFrom,
+  rendererOverrides,
 }: ResourceRendererDispatchProps) {
   const kind = resource.kind.toLowerCase()
 
   const isKnownKind = KNOWN_KINDS.has(kind)
 
+  const PodComp = rendererOverrides?.PodRenderer ?? PodRenderer
+  const WorkloadComp = rendererOverrides?.WorkloadRenderer ?? WorkloadRenderer
+  const NodeComp = rendererOverrides?.NodeRenderer ?? NodeRenderer
+  const ServiceComp = rendererOverrides?.ServiceRenderer ?? ServiceRenderer
+
   const sidebarContent = showCommonSections && (
     <>
       <RelatedResourcesSection relationships={relationships} onNavigate={onNavigate} />
@@ -277,17 +319,17 @@ export function ResourceRendererDispatch({
     <div className={renderSidebar ? 'lg:flex' : ''}>
       <div className={clsx('p-4 space-y-4', renderSidebar && 'lg:flex-1 lg:min-w-0')}>
         {/* Kind-specific content - delegates to modular renderers */}
-        {kind === 'pods' && <PodRenderer data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} onOpenLogs={onOpenLogs} />}
-        {['deployments', 'statefulsets', 'daemonsets'].includes(kind) && <WorkloadRenderer kind={kind} data={data} onNavigate={onNavigate} />}
+        {kind === 'pods' && <PodComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} onOpenLogs={onOpenLogs} resolvedEnvFrom={resolvedEnvFrom} />}
+        {['deployments', 'statefulsets', 'daemonsets'].includes(kind) && <WorkloadComp kind={kind} data={data} onNavigate={onNavigate} />}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
-        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceRenderer data={data} onCopy={onCopy} copied={copied} />}
+        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} />}
         {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'configmaps' && <ConfigMapRenderer data={data} />}
         {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && <JobRenderer data={data} />}
         {kind === 'cronjobs' && <CronJobRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPARenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'nodes' && <NodeRenderer data={data} relationships={relationships} />}
+        {kind === 'nodes' && <NodeComp data={data} relationships={relationships} />}
         {kind === 'persistentvolumeclaims' && <PVCRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'rollouts' && <RolloutRenderer data={data} />}
         {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
@@ -390,6 +432,9 @@ export function ResourceRendererDispatch({
         {/* Traefik */}
         {(kind === 'ingressroutes' || kind === 'ingressroutetcps' || kind === 'ingressrouteudps') && <TraefikIngressRouteRenderer data={data} onNavigate={onNavigate} />}
 
+        {/* Contour */}
+        {kind === 'httpproxies' && <ContourHTTPProxyRenderer data={data} onNavigate={onNavigate} />}
+
         {/* Generic renderer for CRDs and unknown resource types */}
         {!isKnownKind && <GenericRenderer data={data} />}
 
@@ -502,6 +547,15 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'peerauthentications') return getPeerAuthenticationStatus(data)
   if (k === 'authorizationpolicies') return getAuthorizationPolicyStatus(data)
 
+  // Contour HTTPProxy
+  if (k === 'httpproxies') {
+    const s = getHTTPProxyStatus(data)
+    if (s.status === 'healthy') return { text: s.label, color: 'bg-green-500/20 text-green-400' }
+    if (s.status === 'unhealthy') return { text: s.label, color: 'bg-red-500/20 text-red-400' }
+    if (s.status === 'degraded') return { text: s.label, color: 'bg-yellow-500/20 text-yellow-400' }
+    return null
+  }
+
   // Knative Revisions have custom status logic (scaled-to-zero, activating)
   if (k === 'knativerevisions') {
     const status = getRevisionStatus(data)

package/src/components/shared/index.ts

@@ -1,3 +1,3 @@
-export { ResourceRendererDispatch, getResourceStatus } from './ResourceRendererDispatch'
+export { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from './ResourceRendererDispatch'
 export { EditableYamlView, SaveSuccessAnimation } from './EditableYamlView'
 export { ResourceActionsBar, RevisionHistoryDialog } from './ResourceActionsBar'

package/src/components/timeline/shared.tsx

@@ -123,19 +123,19 @@ export function HealthSpanLegend() {
   return (
     <div className="flex items-center gap-4 text-xs text-theme-text-tertiary">
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-green-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-green-500/60 dark:bg-green-600/60" />
         <span>Healthy</span>
       </span>
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-blue-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-blue-500/60 dark:bg-blue-500/60" />
         <span>Rolling</span>
       </span>
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-amber-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-amber-500/60 dark:bg-[#b8861e]" />
         <span>Degraded</span>
       </span>
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-red-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-red-500/60 dark:bg-red-500/60" />
         <span>Unhealthy</span>
       </span>
     </div>
@@ -402,15 +402,13 @@ export function HealthSpan({ health, left, width, title, createdBefore }: Health
   const getHealthColor = () => {
     switch (health) {
       case 'healthy':
-        return 'bg-green-500/60'
+        return 'bg-green-500/60 dark:bg-green-600/60'
       case 'rolling':
-        // Blue/purple for expected degradation during rollout
-        return 'bg-blue-500/60'
+        return 'bg-blue-500/60 dark:bg-blue-500/60'
       case 'degraded':
-        // Amber for unexpected degradation
-        return 'bg-amber-500/60'
+        return 'bg-amber-500/60 dark:bg-[#b8861e]'
       case 'unhealthy':
-        return 'bg-red-500/60'
+        return 'bg-red-500/60 dark:bg-red-500/60'
       default:
         // Unknown or other states
         return 'bg-gray-400/40'

package/src/components/topology/K8sResourceNode.tsx

@@ -134,6 +134,7 @@ export const NODE_DIMENSIONS: Record<NodeKind, { width: number; height: number }
   ServersTransportTCP: { width: 300, height: 56 },
   TLSOption: { width: 280, height: 56 },
   TLSStore: { width: 280, height: 56 },
+  HTTPProxy: { width: 280, height: 56 }, // Contour
 }
 
 

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -77,6 +77,9 @@ const RESOURCE_KINDS: {
   { kind: 'ServersTransportTCP', label: 'Transport TCP', icon: getTopologyIcon('ServersTransportTCP'), color: 'text-cyan-400', category: 'custom' },
   { kind: 'TLSOption', label: 'TLS Option', icon: getTopologyIcon('TLSOption'), color: 'text-cyan-400', category: 'custom' },
   { kind: 'TLSStore', label: 'TLS Store', icon: getTopologyIcon('TLSStore'), color: 'text-cyan-400', category: 'custom' },
+
+  // Contour
+  { kind: 'HTTPProxy', label: 'HTTPProxy', icon: getTopologyIcon('HTTPProxy'), color: 'text-violet-400', category: 'networking' },
 ]
 
 const CATEGORIES = [

package/src/components/topology/TopologyGraph.tsx

@@ -19,7 +19,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, Download, Loader2, RotateCw, Scissors, Shield } from 'lucide-react'
+import { AlertTriangle, Download, Loader2, RotateCw, Shield } from 'lucide-react'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
@@ -541,23 +541,8 @@ export function TopologyGraph({
 
   return (
     <ReactFlowProvider>
-      {/* Truncation banner - shown when topology has too many nodes */}
-      {topology?.truncated && (
-        <div className="absolute top-2 left-2 right-2 z-10 bg-blue-500/10 border border-blue-500/30 rounded-lg p-2 backdrop-blur-sm">
-          <div className="flex items-center gap-2">
-            <Scissors className="w-4 h-4 text-blue-400 shrink-0" />
-            <div className="text-sm">
-              <span className="font-medium text-blue-400">Large cluster:</span>
-              <span className="text-theme-text-secondary ml-1">
-                Showing {topology.nodes.length} of {topology.totalNodes} nodes.
-                Select a namespace for better performance.
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
       {/* Warning banner for partial topology data */}
-      {topology?.warnings && topology.warnings.length > 0 && !topology.truncated && (() => {
+      {topology?.warnings && topology.warnings.length > 0 && (() => {
         const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
         const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted'))
         const isAllRbac = otherWarnings.length === 0

package/src/components/topology/layout.ts

@@ -444,6 +444,7 @@ function pickGroupName(nodes: TopologyNode[]): string {
     'ServersTransportTCP': 4,
     'TLSOption': 4,
     'TLSStore': 4,
+    'HTTPProxy': 1, // Contour
   }
 
   // Sort by priority and pick the first

package/src/components/topology/topology.css

@@ -96,6 +96,7 @@
 .topology-icon-nodepool { background: #6366f1; }
 .topology-icon-nodeclaim { background: #6366f1; }
 .topology-icon-nodeclass { background: #6366f1; }
+.topology-icon-httpproxy { background: #7c3aed; }
 
 /* Background dots - uses CSS variable for theme awareness */
 .react-flow__background pattern circle {

package/src/components/ui/CodeViewer.tsx

@@ -401,8 +401,7 @@ export function CodeViewer({
       </div>
 
       <style>{`
-        :root[data-theme="light"] { --code-line-number: #8b949e; }
-        :root[data-theme="dark"] { --code-line-number: #484f58; }
+        :root { --code-line-number: light-dark(#8b949e, #484f58); }
         .shiki-viewer pre {
           margin: 0;
           padding: 12px;

package/src/components/ui/ConfirmDialog.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useRef, ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { ReactNode } from 'react'
 import { AlertTriangle, X } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
-import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { DialogPortal } from './DialogPortal'
 
 
 interface ConfirmDialogProps {
@@ -18,6 +16,7 @@ interface ConfirmDialogProps {
   cancelLabel?: string
   variant?: 'danger' | 'warning'
   isLoading?: boolean
+  isClosable?: boolean // Allow closing even when isLoading (e.g., for long-running ops the user can dismiss)
   children?: ReactNode // Optional custom content (e.g., checkboxes)
 }
 
@@ -32,99 +31,56 @@ export function ConfirmDialog({
   cancelLabel = 'Cancel',
   variant = 'danger',
   isLoading = false,
+  isClosable = false,
   children,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
-
-  // Handle ESC key
-  useEffect(() => {
-    if (!open) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !isLoading) {
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [open, onClose, isLoading])
-
-  // Focus trap
-  useEffect(() => {
-    if (open && dialogRef.current) {
-      dialogRef.current.focus()
-    }
-  }, [open])
-
-  if (!shouldRender) return null
-
+  const canClose = !isLoading || isClosable
   const isDanger = variant === 'danger'
   const severity = isDanger ? 'error' : 'warning'
 
-  return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className={clsx(
-          'absolute inset-0 bg-black/60 backdrop-blur-sm',
-          TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0'
-        )}
-        onClick={isLoading ? undefined : onClose}
-      />
-
-      {/* Dialog */}
-      <div
-        ref={dialogRef}
-        tabIndex={-1}
-        className={clsx(
-          'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl max-w-md w-full mx-4 outline-none',
-          TRANSITION_PANEL,
-          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-        )}
-      >
-        {/* Header */}
-        <div className="flex items-start gap-3 p-4 border-b border-theme-border">
-          <div
-            className={clsx(
-              'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
-              isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
-            )}
-          >
-            <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
-          </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
-            <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
-          </div>
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            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>
+  return (
+    <DialogPortal open={open} onClose={onClose} closable={canClose} className="max-w-md w-full">
+      {/* Header */}
+      <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+        <div
+          className={clsx(
+            'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
+            isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
+          )}
+        >
+          <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
         </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+          <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
+        </div>
+        <button
+          onClick={onClose}
+          disabled={!canClose}
+          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>
 
-        {/* Details */}
-        {details && (
-          <div className="p-4 border-b border-theme-border">
-            <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
-              {details}
-            </pre>
-          </div>
-        )}
+      {/* Details */}
+      {details && (
+        <div className="p-4 border-b border-theme-border">
+          <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
+            {details}
+          </pre>
+        </div>
+      )}
 
-        {/* Custom content */}
-        {children && (
-          <div className="px-4 pt-4">
-            {children}
-          </div>
-        )}
+      {/* Custom content */}
+      {children && (
+        <div className="px-4 pt-4">
+          {children}
+        </div>
+      )}
 
-        {/* Warning message */}
+      {/* Warning message — hidden once the action is in progress */}
+      {!isLoading && !children && (
         <div className="p-4">
           <div
             className={clsx(
@@ -140,49 +96,48 @@ export function ConfirmDialog({
             </span>
           </div>
         </div>
+      )}
 
-        {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            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"
-          >
-            {cancelLabel}
-          </button>
-          <button
-            onClick={onConfirm}
-            disabled={isLoading}
-            className={clsx(
-              'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
-              isDanger
-                ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
-                : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
-            )}
-          >
-            {isLoading && (
-              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
-                <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-            )}
-            {confirmLabel}
-          </button>
-        </div>
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
+        <button
+          onClick={onClose}
+          disabled={!canClose}
+          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"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          onClick={onConfirm}
+          disabled={isLoading}
+          className={clsx(
+            'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
+            isDanger
+              ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
+              : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
+          )}
+        >
+          {isLoading && (
+            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+              <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          )}
+          {confirmLabel}
+        </button>
       </div>
-    </div>,
-    document.body
+    </DialogPortal>
   )
 }

package/src/components/ui/DialogPortal.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+
+interface DialogPortalProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  /** Extra classes on the panel container (width, max-height, etc.) */
+  className?: string
+  /** Prevent closing via Escape / backdrop click (e.g. during async operation) */
+  closable?: boolean
+}
+
+/**
+ * Minimal dialog primitive — handles portal, backdrop, escape, focus, animation.
+ * Renders children inside a centered panel portaled to document.body, so it works
+ * correctly even inside CSS-transformed containers (drawers, slide panels).
+ *
+ * Usage:
+ *   <DialogPortal open={showDialog} onClose={() => setShowDialog(false)} className="w-80">
+ *     <h3>Title</h3>
+ *     <p>Content</p>
+ *   </DialogPortal>
+ */
+export function DialogPortal({ open, onClose, children, className, closable = true }: DialogPortalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+
+  // Capture-phase ESC handler — stops event before it reaches document listeners (e.g. drawer shortcuts)
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && closable) {
+        e.stopPropagation()
+        e.preventDefault()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [open, onClose, closable])
+
+  // Move focus into the dialog for accessibility and tab navigation
+  useEffect(() => {
+    if (open && dialogRef.current) {
+      dialogRef.current.focus()
+    }
+  }, [open])
+
+  if (!shouldRender) return null
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className={clsx(
+          'absolute inset-0 bg-black/60 backdrop-blur-sm',
+          TRANSITION_BACKDROP,
+          isOpen ? 'opacity-100' : 'opacity-0',
+        )}
+        onClick={closable ? onClose : undefined}
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        className={clsx(
+          'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl mx-4 outline-none',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  )
+}