@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/src/components/resources/renderers/rollout/CanaryStepTimeline.tsx

@@ -0,0 +1,199 @@
+import { Check, X, AlertTriangle, Minus, Clock } from 'lucide-react'
+import { clsx } from 'clsx'
+import { canaryStepLabel, canaryStepTemplateRefs } from '../RolloutRenderer'
+import { analysisPhaseLevel, healthColors, type HealthLevel } from '../../resource-utils'
+
+export interface StepAnalysisStatus {
+  name?: string
+  status?: string
+  message?: string
+}
+
+interface CanaryStepTimelineProps {
+  steps: any[]
+  currentStepIndex?: number
+  // The live "Step analysis" slot from rolloutAnalysisRuns(status) — shown
+  // inline on the current step when it's an analysis step, instead of only
+  // in the separate Analysis section above.
+  stepAnalysisStatus?: StepAnalysisStatus
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  namespace?: string
+}
+
+type StepState = 'completed' | 'current' | 'pending'
+
+// Only 'unhealthy' (Failed/Error) and 'alert' (Inconclusive) colour the dot.
+// A Successful or still-running analysis deliberately gets no special colour:
+// the step itself may still be paused or in progress regardless, so it keeps
+// the same "current" tone as any other in-progress step rather than reading
+// as done.
+function stepDotTone(state: StepState, analysisLevel?: HealthLevel) {
+  if (state === 'current' && (analysisLevel === 'unhealthy' || analysisLevel === 'alert')) {
+    return healthColors[analysisLevel]
+  }
+  switch (state) {
+    case 'completed':
+      return healthColors.healthy
+    case 'current':
+      return healthColors.neutral
+    default:
+      return 'bg-theme-hover text-theme-text-tertiary'
+  }
+}
+
+function StepDot({ state, analysisLevel }: { state: StepState; analysisLevel?: HealthLevel }) {
+  const tone = stepDotTone(state, analysisLevel)
+  let Icon = Minus
+  if (state === 'current' && analysisLevel === 'unhealthy') Icon = X
+  else if (state === 'current' && analysisLevel === 'alert') Icon = AlertTriangle
+  else if (state === 'completed') Icon = Check
+  else if (state === 'current') Icon = Clock
+  return (
+    <span className={clsx('z-10 mt-1 flex h-3 w-3 shrink-0 items-center justify-center rounded-full ring-2 ring-theme-surface', tone)}>
+      <Icon className="h-2 w-2" strokeWidth={4} />
+    </span>
+  )
+}
+
+// Vertical connected stepper for a Rollout's canary steps — a linear
+// sequence (no branching), so a simple top-to-bottom timeline reads more
+// naturally than a graph. Same connecting-line visual as ConditionsSection.
+export function CanaryStepTimeline({ steps, currentStepIndex, stepAnalysisStatus, onNavigate, namespace }: CanaryStepTimelineProps) {
+  if (steps.length === 0) return null
+
+  return (
+    <div className="relative">
+      <div className="absolute bottom-2 left-[9px] top-2 w-px bg-theme-border" />
+      <div className="space-y-0.5">
+        {steps.map((step, index) => {
+          const state: StepState =
+            currentStepIndex === undefined ? 'pending' : index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'current' : 'pending'
+          const isCurrent = state === 'current'
+          const label = canaryStepLabel(step)
+          const templateRefs = step.analysis ? canaryStepTemplateRefs(step) : []
+          const showAnalysisStatus = isCurrent && step.analysis && stepAnalysisStatus?.status
+          const analysisLevel: HealthLevel | undefined = showAnalysisStatus
+            ? analysisPhaseLevel(stepAnalysisStatus!.status)
+            : undefined
+
+          return (
+            <div key={index} className="relative flex items-start gap-2 py-1.5 pr-1 text-sm">
+              <StepDot state={state} analysisLevel={analysisLevel} />
+              <div className="min-w-0 flex-1 pl-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] text-theme-text-tertiary">#{index}</span>
+                  <span className={clsx(isCurrent ? 'font-medium text-theme-text-primary' : state === 'completed' ? 'text-theme-text-secondary' : 'text-theme-text-tertiary')}>
+                    {label}
+                  </span>
+                  {showAnalysisStatus && analysisLevel && (
+                    onNavigate && stepAnalysisStatus!.name ? (
+                      <button
+                        onClick={() =>
+                          onNavigate({ kind: 'AnalysisRun', namespace: namespace ?? '', name: stepAnalysisStatus!.name! })
+                        }
+                        className={clsx('badge-sm hover:underline', healthColors[analysisLevel])}
+                        title={stepAnalysisStatus!.name}
+                      >
+                        {stepAnalysisStatus!.status}
+                      </button>
+                    ) : (
+                      <span className={clsx('badge-sm', healthColors[analysisLevel])}>
+                        {stepAnalysisStatus!.status}
+                      </span>
+                    )
+                  )}
+                </div>
+                {templateRefs.length > 0 && (
+                  <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                    {templateRefs.map((ref) => (
+                      <button
+                        key={ref.name}
+                        onClick={() =>
+                          onNavigate?.({
+                            kind: ref.clusterScoped ? 'ClusterAnalysisTemplate' : 'AnalysisTemplate',
+                            namespace: ref.clusterScoped ? '' : namespace ?? '',
+                            name: ref.name,
+                          })
+                        }
+                        disabled={!onNavigate}
+                        className={clsx(
+                          'font-mono text-[11px]',
+                          onNavigate ? 'text-brand hover:underline' : 'text-theme-text-tertiary'
+                        )}
+                      >
+                        {ref.name}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export interface BlueGreenPhase {
+  label: string
+  state: 'completed' | 'current' | 'pending'
+  analysis?: { name?: string; status?: string }
+}
+
+// Same connected-dot visual as CanaryStepTimeline, for blueGreenPhases()'s
+// derived phase list — blueGreen has no steps[] array to iterate, so there's
+// nothing to reuse structurally, but the "linear sequence, top to bottom"
+// visual language should match.
+export function BlueGreenTimeline({
+  phases,
+  onNavigate,
+  namespace,
+}: {
+  phases: BlueGreenPhase[]
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  namespace?: string
+}) {
+  if (phases.length === 0) return null
+  return (
+    <div className="relative">
+      <div className="absolute bottom-2 left-[9px] top-2 w-px bg-theme-border" />
+      <div className="space-y-0.5">
+        {phases.map((phase, index) => {
+          const level = phase.analysis?.status ? analysisPhaseLevel(phase.analysis.status) : undefined
+          return (
+            <div key={index} className="relative flex items-start gap-2 py-1.5 pr-1 text-sm">
+              <StepDot state={phase.state} analysisLevel={level} />
+              <span
+                className={clsx(
+                  'pl-1',
+                  phase.state === 'current'
+                    ? 'font-medium text-theme-text-primary'
+                    : phase.state === 'completed'
+                      ? 'text-theme-text-secondary'
+                      : 'text-theme-text-tertiary'
+                )}
+              >
+                {phase.label}
+              </span>
+              {level &&
+                (onNavigate && phase.analysis?.name ? (
+                  <button
+                    onClick={() =>
+                      onNavigate({ kind: 'AnalysisRun', namespace: namespace ?? '', name: phase.analysis!.name! })
+                    }
+                    className={clsx('badge-sm hover:underline', healthColors[level])}
+                    title={phase.analysis.name}
+                  >
+                    {phase.analysis.status}
+                  </button>
+                ) : (
+                  <span className={clsx('badge-sm', healthColors[level])}>{phase.analysis!.status}</span>
+                ))}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/resources/renderers/rollout/ReplicaSetProgression.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronRight, Box } from 'lucide-react'
+import { clsx } from 'clsx'
+import { formatAge } from '../../resource-utils'
+import { revisionRoleBadges } from '../../../shared/ResourceActionsBar'
+import type { WorkloadRevision, WorkloadPodInfo } from '../../../../types'
+
+interface ReplicaSetProgressionProps {
+  revisions: WorkloadRevision[]
+  pods?: WorkloadPodInfo[]
+  isRollout: true
+  namespace: string
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function imageTag(image: string): string {
+  const lastColon = image.lastIndexOf(':')
+  const lastSlash = image.lastIndexOf('/')
+  return lastColon > lastSlash ? image.slice(lastColon + 1) : image
+}
+
+function podToneClass(pod: WorkloadPodInfo): string {
+  switch (pod.healthLevel) {
+    case 'healthy':
+      return 'status-healthy'
+    case 'degraded':
+      return 'status-degraded'
+    case 'unhealthy':
+      return 'status-unhealthy'
+    default:
+      return 'status-unknown'
+  }
+}
+
+// Read-only revision tree: Rollout -> ReplicaSet revision -> pods, mirroring
+// `kubectl argo rollouts get rollout`'s tree output. Newest first, matching
+// the existing rollback-history dialog's ordering. Rollback stays exclusive
+// to that dialog — this is purely informational.
+export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }: ReplicaSetProgressionProps) {
+  const [expanded, setExpanded] = useState<Set<number>>(new Set())
+
+  const podsByHash = new Map<string, WorkloadPodInfo[]>()
+  for (const pod of pods ?? []) {
+    if (!pod.revisionIdentity) continue
+    const list = podsByHash.get(pod.revisionIdentity) ?? []
+    list.push(pod)
+    podsByHash.set(pod.revisionIdentity, list)
+  }
+
+  const toggle = (number: number) =>
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(number)) next.delete(number)
+      else next.add(number)
+      return next
+    })
+
+  return (
+    <div className="space-y-1">
+      {revisions.map((rev) => {
+        const revPods = rev.podHash ? podsByHash.get(rev.podHash) ?? [] : []
+        const isOpen = expanded.has(rev.number)
+        return (
+          <div key={rev.number} className="rounded border border-theme-border/50">
+            <button
+              type="button"
+              onClick={() => toggle(rev.number)}
+              className="flex w-full items-center gap-2 px-2 py-1.5 text-left hover:bg-theme-hover"
+              disabled={revPods.length === 0}
+            >
+              {revPods.length > 0 ? (
+                isOpen ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" /> : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+              ) : (
+                <span className="w-3.5 shrink-0" />
+              )}
+              <span className="font-mono text-xs text-theme-text-primary">#{rev.number}</span>
+              <span className="min-w-0 flex-1 truncate font-mono text-xs text-theme-text-secondary">{imageTag(rev.image)}</span>
+              <div className="flex shrink-0 items-center gap-1">
+                {revisionRoleBadges(rev, true).map(({ label, tone, tip }) => (
+                  <span key={label} title={tip} className={clsx('badge', tone)}>
+                    {label}
+                  </span>
+                ))}
+              </div>
+              <span className="shrink-0 text-xs tabular-nums text-theme-text-tertiary">{rev.replicas ?? 0} replicas</span>
+              <span className="shrink-0 text-xs text-theme-text-tertiary">{formatAge(rev.createdAt)}</span>
+            </button>
+            {isOpen && revPods.length > 0 && (
+              <div className="space-y-0.5 border-t border-theme-border/50 px-2 py-1.5 pl-8">
+                {revPods.map((pod) => (
+                  <div key={pod.name} className="flex items-center gap-2 py-0.5 text-xs">
+                    <Box className="h-3 w-3 shrink-0 text-theme-text-tertiary" />
+                    {onNavigate ? (
+                      <button
+                        onClick={() => onNavigate({ kind: 'Pod', namespace, name: pod.name })}
+                        className="min-w-0 flex-1 truncate text-left font-mono text-theme-text-secondary hover:text-brand hover:underline"
+                      >
+                        {pod.name}
+                      </button>
+                    ) : (
+                      <span className="min-w-0 flex-1 truncate font-mono text-theme-text-secondary">{pod.name}</span>
+                    )}
+                    <span className={clsx('badge-sm', podToneClass(pod))}>{pod.phase || (pod.ready ? 'Ready' : 'Not Ready')}</span>
+                    {(pod.restartCount ?? 0) > 0 && (
+                      <span className="shrink-0 text-theme-text-tertiary">{pod.restartCount} restarts</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -1,5 +1,6 @@
 // Utility functions for resource display in tables
 
+import { effectivePolicyTypeNames } from '../../utils/network-policy'
 import { formatCPUString, formatMemoryString, formatBytes } from '../../utils/format'
 import { pluralize } from '../../utils/pluralize'
 import type { WorkloadPodInfo } from '../../types/core'
@@ -1544,24 +1545,33 @@ export function getRolloutStatus(rollout: any): StatusBadge {
   return rolloutActivityBadge(getWorkloadRolloutActivity(rollout, 'rollout'))
 }
 
-export function getAnalysisRunStatus(run: any): StatusBadge {
-  const phase = run.status?.phase || 'Unknown'
+/** The AnalysisPhase vocabulary (AnalysisRun, Experiment, and a Rollout's
+ *  analysis slots all report it) mapped onto HealthLevel. Shared so a caller
+ *  holding only the phase string lands on the same tone as one holding the
+ *  whole run. */
+export function analysisPhaseLevel(phase?: string): HealthLevel {
   switch (phase) {
     case 'Successful':
-      return { text: 'Successful', color: healthColors.healthy, level: 'healthy' }
+      return 'healthy'
     case 'Running':
     case 'Pending':
-      return { text: phase, color: healthColors.degraded, level: 'degraded' }
+      return 'degraded'
     case 'Inconclusive':
-      return { text: 'Inconclusive', color: healthColors.alert, level: 'alert' }
+      return 'alert'
     case 'Failed':
     case 'Error':
-      return { text: phase, color: healthColors.unhealthy, level: 'unhealthy' }
+      return 'unhealthy'
     default:
-      return { text: phase, color: healthColors.unknown, level: 'unknown' }
+      return 'unknown'
   }
 }
 
+export function getAnalysisRunStatus(run: any): StatusBadge {
+  const phase = run.status?.phase || 'Unknown'
+  const level = analysisPhaseLevel(phase)
+  return { text: phase, color: healthColors[level], level }
+}
+
 // Counts only verdict-bearing metrics: Argo excludes dryRun results from the run's
 // phase, and Running/Pending have not passed yet.
 export function summarizeAnalysisMetrics(run: any): {
@@ -2068,8 +2078,7 @@ export function getWorkflowTemplateEntrypoint(wt: any): string {
 // ============================================================================
 
 export function getNetworkPolicyTypes(np: any): string {
-  const types = np.spec?.policyTypes || []
-  return types.join(', ') || '-'
+  return effectivePolicyTypeNames(np.spec).join(', ')
 }
 
 export function getNetworkPolicyRuleCount(np: any): { ingress: number; egress: number } {

package/src/components/shared/CreateResourceDialog.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useState } from 'react'
-import { AlertTriangle, Check, ChevronDown, ChevronRight, Loader2, X } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent } from 'react'
+import { AlertTriangle, Check, ChevronDown, ChevronRight, Loader2, Upload, X } from 'lucide-react'
+import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import { YamlEditor, type YamlSchemaLoader } from '../ui/YamlEditor'
 import {
@@ -9,6 +10,17 @@ import {
 } from '../ui/YamlReview'
 import { Tooltip } from '../ui/Tooltip'
 import { formatApplyError } from '../../utils/k8s-errors'
+import {
+  describeFileDrag,
+  needsReplaceConfirmation,
+  readYamlFile,
+  YAML_FILE_ACCEPT,
+  type FileDragState,
+} from '../../utils/yaml-file-import'
+
+// A frame this close to the last one means the main thread is keeping up; a
+// blocked editor produces gaps far larger.
+const responsiveFrameMs = 100
 
 export interface ApplyResult {
   name: string
@@ -71,6 +83,41 @@ export function CreateResourceDialog({
     nonAtomic: boolean
     context?: string
   } | null>(null)
+  const [drag, setDrag] = useState<FileDragState>('none')
+  const [pendingImport, setPendingImport] = useState<{ fileName: string; yaml: string } | null>(null)
+  const [importing, setImporting] = useState<string | null>(null)
+  // An import is several awaits and several frames long. Anything that changes
+  // what the result should land on — a newer import, a close, a reopen — bumps
+  // the generation, and every deferred step checks it before touching state.
+  const importGeneration = useRef(0)
+  const scheduledFrames = useRef(new Set<number>())
+  // The buffer as it stands now, not as it stood when a read began.
+  const yamlRef = useRef(yaml)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  // dragenter/dragleave also fire for the editor's own descendants, so the
+  // overlay tracks depth rather than the first dragleave it sees.
+  const dragDepth = useRef(0)
+
+  useEffect(() => {
+    yamlRef.current = yaml
+  }, [yaml])
+
+  const retireDeferredImports = useCallback(() => {
+    importGeneration.current += 1
+    for (const id of scheduledFrames.current) cancelAnimationFrame(id)
+    scheduledFrames.current.clear()
+  }, [])
+
+  useEffect(() => retireDeferredImports, [retireDeferredImports])
+
+  const scheduleFrame = useCallback((generation: number, run: () => void) => {
+    const id = requestAnimationFrame(() => {
+      scheduledFrames.current.delete(id)
+      if (generation !== importGeneration.current) return
+      run()
+    })
+    scheduledFrames.current.add(id)
+  }, [])
 
   useEffect(() => {
     if (!open) return
@@ -82,16 +129,24 @@ export function CreateResourceDialog({
     setError(null)
     setSuccess(null)
     setPreview(null)
-  }, [open, initialYaml])
+    setDrag('none')
+    setPendingImport(null)
+    setImporting(null)
+    dragDepth.current = 0
+    retireDeferredImports()
+  }, [open, initialYaml, retireDeferredImports])
 
   const pending = isApplying || isPreviewing
   const closeNow = useCallback(() => {
+    retireDeferredImports()
     setError(null)
     setSuccess(null)
     setPreview(null)
+    setPendingImport(null)
+    setImporting(null)
     setYaml('')
     onClose()
-  }, [onClose])
+  }, [onClose, retireDeferredImports])
   const handleClose = useCallback(() => {
     if (!pending) closeNow()
   }, [closeNow, pending])
@@ -123,6 +178,100 @@ export function CreateResourceDialog({
     [closeNow, onCreated],
   )
 
+  // Handing a document to the editor parses the whole buffer and blocks the
+  // main thread, so the status has to be on screen before that starts. Two
+  // frames: the first commits it, the second lets the browser paint it. A
+  // spinner would only freeze mid-turn, so this says what is happening instead
+  // of pretending to animate.
+  const loadIntoEditor = useCallback(
+    (fileName: string, content: string, generation: number) => {
+      setImporting(fileName)
+      scheduleFrame(generation, () => {
+        scheduleFrame(generation, () => {
+          setYaml(content)
+          // Clearing it in this same callback would batch it into the very
+          // render that blocks, retiring the status while the editor is still
+          // unusable. Wait for a frame to arrive on time instead: that is the
+          // editor answering again, which is what the status was promising.
+          let previous = performance.now()
+          const clearWhenResponsive = () => {
+            const now = performance.now()
+            if (now - previous < responsiveFrameMs) {
+              setImporting(null)
+              return
+            }
+            previous = now
+            scheduleFrame(generation, clearWhenResponsive)
+          }
+          scheduleFrame(generation, clearWhenResponsive)
+        })
+      })
+    },
+    [scheduleFrame],
+  )
+
+  const loadFiles = useCallback(
+    async (files: File[]) => {
+      const generation = ++importGeneration.current
+      const result = await readYamlFile(files)
+      // A newer import, a close or a reopen happened while this one was
+      // reading; its result describes an editor that has moved on.
+      if (generation !== importGeneration.current) return
+      // This import owns the status from here. Taking the generation retired
+      // the frames that would have cleared a previous import's overlay, so
+      // every path out of this function has to leave it in a sane state — the
+      // ones that return early below would otherwise strand it on screen.
+      setImporting(null)
+      if (!result.ok) {
+        setSuccess(null)
+        setError(result.message)
+        return
+      }
+      setError(null)
+      setSuccess(null)
+      if (needsReplaceConfirmation(yamlRef.current, initialYaml)) {
+        setPendingImport({ fileName: result.fileName, yaml: result.yaml })
+        return
+      }
+      loadIntoEditor(result.fileName, result.yaml, generation)
+    },
+    [initialYaml, loadIntoEditor],
+  )
+
+  const handleDragEnter = useCallback((event: ReactDragEvent) => {
+    const state = describeFileDrag(event.dataTransfer)
+    if (state === 'none') return
+    event.preventDefault()
+    dragDepth.current += 1
+    setDrag(state)
+  }, [])
+
+  const handleDragOver = useCallback((event: ReactDragEvent) => {
+    if (describeFileDrag(event.dataTransfer) === 'none') return
+    // Without this the browser navigates away to the dropped file.
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }, [])
+
+  const handleDragLeave = useCallback((event: ReactDragEvent) => {
+    if (describeFileDrag(event.dataTransfer) === 'none') return
+    dragDepth.current = Math.max(0, dragDepth.current - 1)
+    if (dragDepth.current === 0) setDrag('none')
+  }, [])
+
+  const handleDrop = useCallback(
+    (event: ReactDragEvent) => {
+      if (describeFileDrag(event.dataTransfer) === 'none') return
+      event.preventDefault()
+      dragDepth.current = 0
+      setDrag('none')
+      // The DataTransfer is neutered once this handler returns, so take the
+      // files off it before anything awaits.
+      void loadFiles(Array.from(event.dataTransfer.files))
+    },
+    [loadFiles],
+  )
+
   const handleSubmit = useCallback(async () => {
     if (!yaml.trim()) {
       setError('YAML content is required')
@@ -256,13 +405,64 @@ export function CreateResourceDialog({
           </div>
 
           <div className="min-h-0 flex-1 px-5 py-3">
-            <YamlEditor
-              value={yaml}
-              onChange={setYaml}
-              height="400px"
-              onValidate={handleValidate}
-              schemaLoader={schemaLoader}
-            />
+            <div className="mb-2 flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="flex items-center gap-1.5 rounded-md border border-theme-border px-2.5 py-1 text-xs font-medium text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
+              >
+                <Upload className="h-3.5 w-3.5" />
+                Import YAML file
+              </button>
+              <span className="text-xs text-theme-text-tertiary">
+                or drop a YAML file into the editor
+              </span>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={YAML_FILE_ACCEPT}
+                className="hidden"
+                onChange={(event) => {
+                  const picked = Array.from(event.target.files ?? [])
+                  // Clearing the input empties its FileList, so read it first.
+                  event.target.value = ''
+                  void loadFiles(picked)
+                }}
+              />
+            </div>
+
+            <div
+              className="relative h-[400px]"
+              onDragEnter={handleDragEnter}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <YamlEditor
+                value={yaml}
+                onChange={setYaml}
+                height="400px"
+                onValidate={handleValidate}
+                schemaLoader={schemaLoader}
+              />
+              {importing && (
+                <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border border-theme-border bg-theme-base/85">
+                  <span className="text-sm font-medium text-theme-text-primary">
+                    Loading {importing}…
+                  </span>
+                </div>
+              )}
+              {drag !== 'none' && (
+                <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed border-accent bg-theme-base/85">
+                  <span className="flex items-center gap-2 text-sm font-medium text-theme-text-primary">
+                    <Upload className="h-4 w-4" />
+                    {drag === 'multiple-files'
+                      ? 'Drop a single YAML file'
+                      : 'Drop YAML file to load'}
+                  </span>
+                </div>
+              )}
+            </div>
           </div>
 
           {(error || previewError) && (
@@ -362,6 +562,26 @@ export function CreateResourceDialog({
           </div>
         </>
       )}
+
+      <ConfirmDialog
+        open={pendingImport !== null}
+        onClose={() => setPendingImport(null)}
+        onConfirm={() => {
+          // Confirming is its own decision about the editor as it stands now,
+          // so it loads under a fresh generation rather than the one the read
+          // started under, which anything since may have retired.
+          if (pendingImport) {
+            const generation = ++importGeneration.current
+            loadIntoEditor(pendingImport.fileName, pendingImport.yaml, generation)
+          }
+          setPendingImport(null)
+        }}
+        variant="warning"
+        showWarning={false}
+        title="Replace editor contents?"
+        message={`Loading ${pendingImport?.fileName ?? 'this file'} discards the YAML currently in the editor.`}
+        confirmLabel="Replace"
+      />
     </DialogPortal>
   )
 }