diff --git a/app/components/ConfirmModal.tsx b/app/components/ConfirmModal.tsx
new file mode 100644
index 000000000..7dc18b125
--- /dev/null
+++ b/app/components/ConfirmModal.tsx
@@ -0,0 +1,122 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { Dialog as BaseDialog } from '@base-ui/react/dialog'
+import * as m from 'motion/react-m'
+import { useRef, type ReactNode } from 'react'
+
+import { Close12Icon } from '@oxide/design-system/icons/react'
+
+import { Modal } from '~/ui/lib/Modal'
+import { ModalContext, useSideModalPopupRef } from '~/ui/lib/modal-context'
+
+type ConfirmModalProps = {
+  isOpen: boolean
+  onDismiss: () => void
+  onConfirm: () => void
+  /** Short question, sentence case. e.g. "Cancel upload?" */
+  title: string
+  /** One or two short lines. State the consequence first. */
+  children: ReactNode
+  /** Verb phrase matching the destructive action. e.g. "Cancel upload" */
+  confirmText: string
+  /** Verb phrase meaning "stay where I am". e.g. "Keep uploading" */
+  dismissText: string
+  /** @default 'danger' */
+  actionType?: 'primary' | 'danger'
+}
+
+/**
+ * A confirm dialog stacked over a SideModal (e.g. a nav guard on an edited
+ * form, or a cancel guard on an in-flight upload). Portals into the
+ * SideModal's popup rather than document body, so the scrim and dialog use
+ * the SideModal as their positioning context — auto-centered, no hard-coded
+ * widths.
+ *
+ * On open, focus lands on the destructive primary action so a user who got
+ * here by triggering a dismiss can press Enter once more to confirm. Esc and
+ * the × close only this dialog, leaving the SideModal open.
+ *
+ * Must be rendered inside a SideModal — relies on SideModalPopupRefContext.
+ */
+export function ConfirmModal({
+  isOpen,
+  onDismiss,
+  onConfirm,
+  title,
+  children,
+  confirmText,
+  dismissText,
+  actionType = 'danger',
+}: ConfirmModalProps) {
+  const actionRef = useRef<HTMLButtonElement>(null)
+  const sideModalRef = useSideModalPopupRef()
+  if (!isOpen || !sideModalRef) return null
+  return (
+    <ModalContext.Provider value>
+      <BaseDialog.Root
+        open
+        onOpenChange={(open, { reason }) => {
+          // Ignore focus-out to prevent a dismiss loop when a native confirm()
+          // dialog steals and returns focus. Same trick as Modal.
+          if (!open && reason !== 'focus-out') onDismiss()
+        }}
+      >
+        {/* Portal into the SideModal so absolute children use the SideModal
+            as their positioning context — no hard-coded widths. */}
+        <BaseDialog.Portal container={sideModalRef}>
+          {/* Scrim. absolute inset-0 fills the SideModal's popup, not the
+            viewport. forceRender so base-ui doesn't hide the nested backdrop. */}
+          <BaseDialog.Backdrop
+            forceRender
+            render={
+              <m.div
+                className="bg-raise/80 absolute inset-0 z-10 -mx-(--gutter)"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15, ease: 'easeOut' }}
+              />
+            }
+          />
+          <BaseDialog.Popup
+            initialFocus={actionRef}
+            render={
+              <m.div
+                initial={{ x: '-50%', y: 'calc(-50% - 16px)', opacity: 0 }}
+                animate={{ x: '-50%', y: '-50%', opacity: 1 }}
+                transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
+                className="bg-default light:bg-default shadow-modal pointer-events-auto absolute top-1/2 left-1/2 z-20 flex max-h-[calc(100%-2rem)] w-full max-w-md -translate-y-1/2 flex-col overflow-hidden rounded-lg"
+              />
+            }
+          >
+            <Modal.Section>
+              <BaseDialog.Title className="text-sans-semi-lg mb-2">
+                {title}
+              </BaseDialog.Title>
+              {children}
+            </Modal.Section>
+            <Modal.Footer
+              onDismiss={onDismiss}
+              onAction={onConfirm}
+              cancelText={dismissText}
+              actionText={confirmText}
+              actionType={actionType}
+              actionRef={actionRef}
+            />
+            <BaseDialog.Close
+              className="hover:bg-hover absolute top-2 right-2 flex items-center justify-center rounded-md p-2"
+              aria-label="Close"
+            >
+              <Close12Icon className="text-default" />
+            </BaseDialog.Close>
+          </BaseDialog.Popup>
+        </BaseDialog.Portal>
+      </BaseDialog.Root>
+    </ModalContext.Provider>
+  )
+}
diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index dc2ba135a..62e1e66ad 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -9,9 +9,9 @@
 import { useEffect, useId, useState, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
 
+import { ConfirmModal } from '~/components/ConfirmModal'
 import { useShouldAnimateModal } from '~/hooks/use-should-animate-modal'
 import { Button } from '~/ui/lib/Button'
-import { Modal } from '~/ui/lib/Modal'
 import { SideModal } from '~/ui/lib/SideModal'
 
 type CreateFormProps = {
@@ -128,28 +128,16 @@ export function SideModalForm<TFieldValues extends FieldValues>({
         </SideModal.Footer>
       )}
 
-      {showNavGuard && (
-        <Modal
-          isOpen
-          onDismiss={() => setShowNavGuard(false)}
-          title="Confirm navigation"
-          width="narrow"
-          overlay={false}
-        >
-          <Modal.Section>
-            Are you sure you want to leave this form?
-            <br />
-            All progress will be lost.
-          </Modal.Section>
-          <Modal.Footer
-            onAction={onDismiss}
-            onDismiss={() => setShowNavGuard(false)}
-            cancelText="Keep editing"
-            actionText="Leave form"
-            actionType="danger"
-          />
-        </Modal>
-      )}
+      <ConfirmModal
+        isOpen={showNavGuard}
+        onDismiss={() => setShowNavGuard(false)}
+        onConfirm={onDismiss}
+        title="Leave form?"
+        confirmText="Leave form"
+        dismissText="Keep editing"
+      >
+        Any unsaved changes will be lost.
+      </ConfirmModal>
     </SideModal>
   )
 }
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index f47d8b673..a9920df1d 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -7,9 +7,10 @@
  */
 import { skipToken, useQuery } from '@tanstack/react-query'
 import cn from 'classnames'
+import * as m from 'motion/react-m'
 import pMap from 'p-map'
 import pRetry from 'p-retry'
-import { useRef, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router'
 
@@ -29,26 +30,33 @@ import {
   Unauthorized12Icon,
 } from '@oxide/design-system/icons/react'
 
+import { ConfirmModal } from '~/components/ConfirmModal'
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { FileField } from '~/components/form/fields/FileField'
 import { NameField } from '~/components/form/fields/NameField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField } from '~/components/form/fields/TextField'
-import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
+import { useShouldAnimateModal } from '~/hooks/use-should-animate-modal'
+import { addToast } from '~/stores/toast'
+import { EmptyCell } from '~/table/cells/EmptyCell'
+import { Button } from '~/ui/lib/Button'
 import { Message } from '~/ui/lib/Message'
-import { Modal } from '~/ui/lib/Modal'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { Progress } from '~/ui/lib/Progress'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { SideModal } from '~/ui/lib/SideModal'
 import { Spinner } from '~/ui/lib/Spinner'
+import { Truncate } from '~/ui/lib/Truncate'
 import { anySignal } from '~/util/abort'
 import { readBlobAsBase64 } from '~/util/file'
 import { invariant } from '~/util/invariant'
 import { docLinks, links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import { isAllZeros } from '~/util/str'
-import { formatBytes, GiB, KiB } from '~/util/units'
+import { bytesToGiB, formatBytes, GiB, KiB } from '~/util/units'
 
 // Padded because otherwise the numbers jump around a bit, e.g., when it goes
 // from 10.55 to 14.7 to 19.23
@@ -109,9 +117,12 @@ type StepProps = {
   label: string
   duration?: number
   className?: string
+  /** When true, sets aria-current="step" and accepts a ref for focus management */
+  active?: boolean
+  stepRef?: React.Ref<HTMLDivElement>
 }
 
-function Step({ children, state, label, className }: StepProps) {
+function Step({ children, state, label, className, active, stepRef }: StepProps) {
   /* eslint-disable react/jsx-key */
   const [status, icon] = state.isSuccess
     ? ['complete', <Success12Icon className="text-accent" />]
@@ -122,15 +133,26 @@ function Step({ children, state, label, className }: StepProps) {
         : ['ready', <Unauthorized12Icon className="text-disabled" />]
   /* eslint-enable react/jsx-key */
   return (
-    // data-status used only for e2e testing
     <div
-      className={cn('upload-step flex gap-2 px-4 py-3', className)}
+      ref={stepRef}
+      tabIndex={-1}
+      className={cn(
+        'upload-step flex items-baseline gap-2 px-8 py-3 outline-none',
+        state.isPending && 'text-raise',
+        className
+      )}
       data-testid={`upload-step: ${label}`}
       data-status={status}
+      aria-current={active ? 'step' : undefined}
     >
       {/* padding on icon to align it with text since everything is aligned to top */}
-      <div className="pt-px">{icon}</div>
-      <div className={cn('w-full space-y-2', state.isError ? 'text-error' : 'text-raise')}>
+      <div className="">{icon}</div>
+      <div
+        className={cn(
+          'w-full space-y-2 text-sans-md',
+          state.isError ? 'text-error' : 'text-raise'
+        )}
+      >
         <div>{label}</div>
         {children}
       </div>
@@ -170,51 +192,54 @@ const ABORT_ERROR = new Error('Upload canceled')
  */
 const CHUNK_SIZE_BYTES = 512 * KiB
 
-// States
-//
-// - Form
-//   - Clean or filled
-//   - Error
-//   - Checking that image name isn't taken (back to form if taken)
-// - Upload in progress
-//   - Happy path
-//     - Create disk
-//     - Import start
-//     - Uploading
-//     - Import stop
-//     - Finalize disk + create snapshot
-//     - Create image from snapshot
-//     - Cleanup
-//   - Error
-//     - Show error, click here to try again
-//       - If we failed after upload complete, maybe try again from there?
-//       - Otherwise, restart everything
-//     - If image name got taken in the meantime, give chance to rename?
-//
-// Part of the problem is that I'm relying on RQ for the state of the upload
-// steps, but there's slippage with what I actually want that to represent
-
-// TODO: make sure cleanup, cancelEverything, and resetMainFlow are called in
-// the right places
-
 export const handle = titleCrumb('Upload image')
 
+type Phase = 'form' | 'progress'
+
+function SummaryHeader({ values }: { values: FormValues }) {
+  const file = values.imageFile
+  return (
+    <PropertiesTable className="mb-4 basis-[initial]">
+      <PropertiesTable.Row label="Name">{values.imageName}</PropertiesTable.Row>
+      <PropertiesTable.Row label="OS">
+        {values.os ? values.os : <EmptyCell />}
+      </PropertiesTable.Row>
+      <PropertiesTable.Row label="Version">
+        {values.version ? values.version : <EmptyCell />}
+      </PropertiesTable.Row>
+      <PropertiesTable.Row label="Block size">
+        {values.blockSize} <span className="text-tertiary ml-1 inline-block">B</span>
+      </PropertiesTable.Row>
+      {file && (
+        <PropertiesTable.Row label="File name">
+          <Truncate maxLength={120} text={file.name} />
+        </PropertiesTable.Row>
+      )}
+      {file && (
+        <PropertiesTable.Row label="File size">
+          <span>{bytesToGiB(file.size)}</span>
+          <span className="text-tertiary ml-1 inline-block">GiB</span>
+        </PropertiesTable.Row>
+      )}
+    </PropertiesTable>
+  )
+}
+
 /**
- * Upload an image. Opens a second modal to show upload progress.
+ * Upload an image. Swaps between a form phase and a progress phase inside a
+ * single side modal — no second modal is mounted.
  */
 export default function ImageCreate() {
   const navigate = useNavigate()
   const { project } = useProjectSelector()
+  const formId = useId()
+  const animate = useShouldAnimateModal()
 
-  // The state in this component is very complex because we are doing a bunch of
-  // requests in order, all of which can fail, plus the whole thing can be
-  // aborted. We have the usual form state, plus an additional validation step
-  // where we check the API to make sure the name is not taken. Then, while we
-  // are submitting, we rely on the RQ mutations themselves, plus a synthetic
-  // mutation state representing the many calls of the bulk upload step.
+  const [phase, setPhase] = useState<Phase>('form')
+  const [showCancelGuard, setShowCancelGuard] = useState(false)
+  const [showNavGuard, setShowNavGuard] = useState(false)
 
   const [formError, setFormError] = useState<{ message: string } | null>(null)
-  const [modalOpen, setModalOpen] = useState(false)
   const [modalError, setModalError] = useState<string | null>(null)
 
   // progress bar, 0-100
@@ -228,14 +253,20 @@ export default function ImageCreate() {
   // done with everything, ready to close the modal
   const [allDone, setAllDone] = useState(false)
 
+  // true while cleanup() is awaiting after a cancel/error, so the form footer
+  // can explain why the resubmit button is in a loading state
+  const [isCleaningUp, setIsCleaningUp] = useState(false)
+
+  // for restoring focus when returning from progress to form
+  const previousFocusRef = useRef<HTMLElement | null>(null)
+  // first step row, focused on phase change to progress
+  const firstStepRef = useRef<HTMLDivElement | null>(null)
+
   const createDisk = useApiMutation(api.diskCreate)
   const startImport = useApiMutation(api.diskBulkWriteImportStart)
 
   // gcTime: 0 prevents the mutation cache from holding onto all the chunks for
-  // 5 minutes. It can be a ton of memory. To be honest, I don't even understand
-  // why the mutation cache exists. It's not like the query cache, which dedupes
-  // identical queries made around the same time.
-  // https://tanstack.com/query/v5/docs/reference/MutationCache
+  // 5 minutes. It can be a ton of memory.
   const uploadChunk = useApiMutation(api.diskBulkWriteImport, { gcTime: 0 })
 
   // synthetic state for upload step because it consists of multiple requests
@@ -248,10 +279,6 @@ export default function ImageCreate() {
   const deleteDisk = useApiMutation(api.diskDelete)
   const deleteSnapshot = useApiMutation(api.snapshotDelete)
 
-  // TODO: Distinguish cleanup mutations being called after successful run vs.
-  // due to error. In the former case, they have their own steps to highlight as
-  // successful. In the latter, we do not want to highlight the steps.
-
   const mainFlowMutations = [
     createDisk,
     startImport,
@@ -280,53 +307,14 @@ export default function ImageCreate() {
     },
   })
 
-  const cleanupMutations = [
-    stopImportCleanup,
-    finalizeDiskCleanup,
-    deleteDiskCleanup,
-    deleteSnapshotCleanup,
-  ]
-
-  const allMutations = [...mainFlowMutations, syntheticUploadState, ...cleanupMutations]
-
-  // we don't want to be able to click submit while anything is running
-  const formLoading = allMutations.some((m) => m.isPending)
-
   // the created snapshot and disk. presence used in cleanup to decide whether we need to
   // attempt to delete them
   const snapshot = useRef<Snapshot | null>(null)
   const disk = useRef<Disk | null>(null)
 
-  function closeModal() {
-    if (allDone) {
-      backToImages()
-      return
-    }
-
-    // if we're still going, need to confirm cancellation. if we have an error,
-    // everything is already stopped
-    if (modalError || confirm('Are you sure? Closing the modal will cancel the upload.')) {
-      // Note we don't run cleanup() here -- cancelEverything triggers an
-      // abort, which gets caught by the try/catch in the onSubmit on the upload
-      // form, which does the cleanup. We used to call cleanup here and used
-      // error-prone state logic to avoid it running twice.
-      //
-      // Because we are working with a closed-over copy of allDone, there is
-      // a possibility that the upload finishes while the user is looking at
-      // the confirm modal, in which case cancelEverything simply won't do
-      // anything. The finally{} in onSubmit clears out the abortController so
-      // cancelEverything() is a noop.
-      cancelEverything()
-      resetMainFlow()
-      setModalOpen(false)
-    }
-  }
-
   // Aborting works for steps other than file upload despite the
   // signal not being used directly in the former because we call
-  // `abortController.throwIfAborted()` after each step. We could technically
-  // plumb through the signal to the requests themselves, but they complete so
-  // quickly it's probably not necessary.
+  // `abortController.throwIfAborted()` after each step.
   function cancelEverything() {
     abortController.current?.abort(ABORT_ERROR)
   }
@@ -334,6 +322,7 @@ export default function ImageCreate() {
   function resetMainFlow() {
     setModalError(null)
     setUploadProgress(0)
+    setAllDone(false)
     mainFlowMutations.forEach((m) => m.reset())
     setSyntheticUploadState(initSyntheticState)
   }
@@ -363,7 +352,7 @@ export default function ImageCreate() {
     }
   }
 
-  async function onSubmit({
+  async function runUpload({
     imageName,
     imageDescription,
     imageFile,
@@ -373,15 +362,6 @@ export default function ImageCreate() {
   }: FormValues) {
     invariant(imageFile, 'imageFile must exist') // shouldn't be possible to fail bc file is a required field
 
-    // this is done up here instead of next to the upload step because after
-    // upload is canceled, a few outstanding bulk writes will complete, setting
-    // uploadProgress to non-zero values. if we do this reset down there instead
-    // of up here, cancel and retry will bring up a modal briefly showing the
-    // previous run's progress, and it resets only when bulk upload starts
-    resetMainFlow()
-
-    setModalOpen(true)
-
     // Create a disk in state import-ready
     const diskName = getTmpDiskName(imageName)
     disk.current = await createDisk.mutateAsync({
@@ -407,17 +387,11 @@ export default function ImageCreate() {
     abortController.current?.signal.throwIfAborted()
 
     // Post file to the API in chunks of size `maxChunkSize`. Browsers cap
-    // concurrent fetches at 6 per host. If we ran without a concurrency limit,
-    // we'd read way more chunks into memory than we're ready to POST, and we'd
-    // be sitting around waiting for the browser to let the fetches through.
-    // That sounds bad. So we use pMap to process at most 6 chunks at a time.
-
+    // concurrent fetches at 6 per host. So we use pMap to process at most 6
+    // chunks at a time.
     setSyntheticUploadState({ isPending: true, isSuccess: false, isError: false })
 
     const nChunks = Math.ceil(imageFile.size / CHUNK_SIZE_BYTES)
-
-    // TODO: try to warn user if they try to close the tab while this is going
-
     let chunksProcessed = 0
 
     const postChunk = async (i: number) => {
@@ -488,9 +462,7 @@ export default function ImageCreate() {
 
     // TODO: we checked at the beginning that the image name was free, but it
     // could be taken during upload. If this fails with object already exists,
-    // don't delete the snapshot (could still delete the disk). Instead, link
-    // user to snapshot detail and tell them to go there and create the image
-    // from it.
+    // don't delete the snapshot (could still delete the disk).
     await createImage.mutateAsync({
       query: { project },
       body: {
@@ -513,6 +485,30 @@ export default function ImageCreate() {
     setAllDone(true)
   }
 
+  /** Wraps runUpload with abort/cleanup/error handling. */
+  async function runUploadGuarded(values: FormValues) {
+    abortController.current = new AbortController()
+    try {
+      await runUpload(values)
+    } catch (e) {
+      if (e !== ABORT_ERROR) {
+        console.error(e)
+        setModalError(getUploadErrorMessage(e))
+        // abort anything in flight in case
+        cancelEverything()
+      }
+      // user canceled or error: clean up any partial state
+      setIsCleaningUp(true)
+      try {
+        await cleanup()
+      } finally {
+        setIsCleaningUp(false)
+      }
+    } finally {
+      abortController.current = null
+    }
+  }
+
   const form = useForm({ defaultValues })
   const file = form.watch('imageFile')
   const blockSize = form.watch('blockSize')
@@ -522,182 +518,348 @@ export default function ImageCreate() {
     queryFn: file ? () => validateImage(file) : skipToken,
   })
 
+  async function onSubmit(values: FormValues) {
+    setFormError(null)
+
+    // check that image name isn't taken before starting the whole thing
+    const image = await queryClient
+      .fetchQuery(
+        q(
+          api.imageView,
+          { path: { image: values.imageName }, query: { project } },
+          {
+            errorsExpected: {
+              explanation: 'the image name may not exist yet.',
+              statusCode: 404,
+            },
+          }
+        )
+      )
+      .catch((e) => {
+        // eat a 404 since that's what we want. anything else should still blow up
+        if (e.statusCode === 404) return null
+        throw e
+      })
+    if (image) {
+      setFormError({ message: 'Image name already exists' })
+      return
+    }
+
+    // stash currently focused element so we can restore it on cancel
+    previousFocusRef.current = document.activeElement as HTMLElement | null
+
+    setPhase('progress')
+    await runUploadGuarded(values)
+  }
+
+  function backToForm() {
+    // controller is still live → there's an in-flight upload to tear down.
+    // show "Cleaning up…" right away rather than waiting for the catch in
+    // runUploadGuarded, which only fires once the in-flight step throws.
+    if (abortController.current) setIsCleaningUp(true)
+    cancelEverything()
+    resetMainFlow()
+    setPhase('form')
+    setShowCancelGuard(false)
+    // defer focus restore until after re-render so the field is visible again
+    setTimeout(() => previousFocusRef.current?.focus(), 0)
+  }
+
+  async function handleRetry() {
+    resetMainFlow()
+    await runUploadGuarded(form.getValues())
+  }
+
+  function handleDismiss() {
+    if (phase === 'form') {
+      if (form.formState.isDirty) {
+        setShowNavGuard(true)
+      } else {
+        backToImages()
+      }
+      return
+    }
+    // progress phase: error path means upload is already aborted; allow exit
+    if (modalError) {
+      backToImages()
+      return
+    }
+    // success: nothing to cancel; treat as Done (toast + close)
+    if (allDone) {
+      handleDone()
+      return
+    }
+    // running: confirm before aborting
+    setShowCancelGuard(true)
+  }
+
+  // move focus to the first step on phase change to progress
+  useEffect(() => {
+    if (phase === 'progress') {
+      firstStepRef.current?.focus()
+    }
+  }, [phase])
+
+  // If the run reaches a terminal state (success or error) while the cancel
+  // guard is open, dismiss the guard so the outer modal can run its normal
+  // success/error path. The user no longer has anything to cancel.
+  useEffect(() => {
+    if (allDone || modalError) setShowCancelGuard(false)
+  }, [allDone, modalError])
+
+  function handleDone() {
+    const imageName = form.getValues('imageName')
+    addToast({
+      // prettier-ignore
+      content: <>Image <HL>{imageName}</HL> uploaded</>,
+      cta: {
+        text: `View ${imageName}`,
+        link: pb.projectImageEdit({ project, image: imageName }),
+      },
+    })
+    backToImages()
+  }
+
+  // determine which step is the active one for aria-current
+  const activeStepIndex = (() => {
+    if (createDisk.isPending) return 0
+    if (startImport.isPending) return 1
+    if (syntheticUploadState.isPending) return 2
+    if (stopImport.isPending) return 3
+    if (finalizeDisk.isPending) return 4
+    if (createImage.isPending) return 5
+    if (deleteDisk.isPending || deleteSnapshot.isPending) return 6
+    return -1
+  })()
+
+  // once createImage starts there's no abort checkpoint left and the snapshot/disk
+  // deletes don't honor the signal, so cancellation would leave the image in place
+  // while the UI pretends nothing happened
+  const cancelDisabledReason =
+    createImage.isPending || createImage.isSuccess
+      ? 'Image has been created and can no longer be canceled'
+      : undefined
+
   return (
-    <SideModalForm
-      form={form}
-      formType="create"
-      resourceName="image"
+    <SideModal
       title="Upload image"
-      onDismiss={backToImages}
-      onSubmit={async (values) => {
-        setFormError(null)
-
-        // check that image name isn't taken before starting the whole thing
-        const image = await queryClient
-          .fetchQuery(
-            q(
-              api.imageView,
-              { path: { image: values.imageName }, query: { project } },
-              {
-                errorsExpected: {
-                  explanation: 'the image name may not exist yet.',
-                  statusCode: 404,
-                },
-              }
-            )
-          )
-          .catch((e) => {
-            // eat a 404 since that's what we want. anything else should still blow up
-            if (e.statusCode === 404) return null
-            throw e
-          })
-        if (image) {
-          // TODO: set this error on the field instead of the whole form
-          // TODO: make setError available here somehow :(
-          setFormError({ message: 'Image name already exists' })
-          return
-        }
-
-        // every submit needs its own AbortController because they can't be
-        // reset
-        abortController.current = new AbortController()
-
-        try {
-          await onSubmit(values)
-        } catch (e) {
-          if (e !== ABORT_ERROR) {
-            console.error(e)
-            setModalError(getUploadErrorMessage(e))
-            // abort anything in flight in case
-            cancelEverything()
-          }
-          // user canceled
-          await cleanup()
-          // TODO: if we get here, show failure state in the upload modal
-        } finally {
-          // Clear the abort controller. This is aimed at the case where the
-          // user clicks cancel and then stares at the confirm modal without
-          // clicking for so long that the upload manages to finish, which means
-          // there's no longer anything to cancel. If abortController is gone,
-          // cancelEverything is a noop.
-          abortController.current = null
-        }
-      }}
-      loading={formLoading}
-      submitError={formError}
-      submitLabel={allDone ? 'Done' : 'Upload image'}
+      isOpen
+      onDismiss={handleDismiss}
+      animate={animate}
+      errors={phase === 'form' && formError ? [formError.message] : undefined}
     >
-      <NameField name="imageName" label="Name" control={form.control} />
-      <DescriptionField
-        name="imageDescription"
-        label="Description"
-        control={form.control}
-      />
-      {/* TODO: are OS and Version supposed to be non-empty? I doubt the API cares,
-       * but it will be pretty for end users if they're empty
-       */}
-      <TextField name="os" label="OS" control={form.control} required />
-      <TextField name="version" control={form.control} required />
-      <div className="flex w-full flex-col flex-wrap space-y-4">
-        <RadioField
-          name="blockSize"
-          label="Block size"
-          units="Bytes"
-          control={form.control}
-          parseValue={(val) => parseInt(val, 10) as BlockSize}
-          items={[
-            { label: '512', value: 512 },
-            { label: '2048', value: 2048 },
-            { label: '4096', value: 4096 },
-          ]}
-        />
-        {imageValidation && <BlockSizeNotice {...imageValidation} blockSize={blockSize} />}
-      </div>
-      <div className="flex w-full flex-col flex-wrap space-y-4">
-        <FileField
-          id="image-file-input"
-          name="imageFile"
-          label="Image file"
-          required
-          control={form.control}
-        />
-        {imageValidation && <BootableNotice {...imageValidation} />}
-      </div>
-      {file && modalOpen && (
-        <Modal isOpen onDismiss={closeModal} title="Image upload progress">
-          <Modal.Body className="p-0!">
-            <Modal.Section className="p-0!">
-              <div className="*:border-b-secondary *:border-b last:*:border-b-0">
-                {modalError && (
-                  <Message
-                    variant="error"
-                    title="Error"
-                    content={modalError}
-                    className="rounded-none! shadow-none!"
-                  />
-                )}
-                <Step state={createDisk} label="Create temporary disk" />
-                <Step state={startImport} label="Put disk in import mode" />
-                <Step state={syntheticUploadState} label="Upload image file">
-                  <div className="bg-default border-default rounded-lg border">
-                    <div className="border-b-secondary flex justify-between border-b p-3 pb-2">
-                      <div className="text-sans-md text-raise">{file.name}</div>
-                      {/* cancel and/or pause buttons could go here */}
-                    </div>
-                    <div className="p-3 pt-2">
-                      <div className="text-mono-sm flex justify-between">
-                        <div className="text-default normal-case!">
-                          {fsize((uploadProgress / 100) * file.size)}{' '}
-                          <span className="text-quaternary">/</span> {fsize(file.size)}
-                        </div>
-                        <div className="text-accent">{uploadProgress}%</div>
+      {phase === 'progress' && <SummaryHeader values={form.getValues()} />}
+      <SideModal.Body>
+        <div hidden={phase === 'progress'}>
+          <form
+            id={formId}
+            className="ox-form"
+            autoComplete="off"
+            onSubmit={(e) => {
+              e.stopPropagation()
+              form.handleSubmit(onSubmit)(e)
+            }}
+          >
+            <NameField name="imageName" label="Name" control={form.control} />
+            <DescriptionField
+              name="imageDescription"
+              label="Description"
+              control={form.control}
+            />
+            <TextField name="os" label="OS" control={form.control} required />
+            <TextField name="version" control={form.control} required />
+            <div className="flex w-full flex-col flex-wrap space-y-4">
+              <RadioField
+                name="blockSize"
+                label="Block size"
+                units="Bytes"
+                control={form.control}
+                parseValue={(val) => parseInt(val, 10) as BlockSize}
+                items={[
+                  { label: '512', value: 512 },
+                  { label: '2048', value: 2048 },
+                  { label: '4096', value: 4096 },
+                ]}
+              />
+              {imageValidation && (
+                <BlockSizeNotice {...imageValidation} blockSize={blockSize} />
+              )}
+            </div>
+            <div className="flex w-full flex-col flex-wrap space-y-4">
+              <FileField
+                id="image-file-input"
+                name="imageFile"
+                label="Image file"
+                required
+                control={form.control}
+              />
+              {imageValidation && <BootableNotice {...imageValidation} />}
+            </div>
+            <SideModalFormDocs docs={[docLinks.images]} />
+          </form>
+        </div>
+        {phase === 'progress' && (
+          <div
+            aria-label="Upload progress"
+            aria-live="polite"
+            className="*:border-b-secondary mx-0! -mt-8 *:border-b *:last:border-b-0"
+          >
+            {modalError && (
+              <Message
+                variant="error"
+                title="Error"
+                content={modalError}
+                className="rounded-none! shadow-none!"
+              />
+            )}
+            <Step
+              state={createDisk}
+              label="Create temporary disk"
+              active={activeStepIndex === 0}
+              stepRef={firstStepRef}
+            />
+            <Step
+              state={startImport}
+              label="Put disk in import mode"
+              active={activeStepIndex === 1}
+            />
+            <Step
+              state={syntheticUploadState}
+              label="Upload image file"
+              active={activeStepIndex === 2}
+            >
+              {file && (
+                <div className="bg-default border-default rounded-lg border">
+                  <div className="border-b-secondary flex justify-between border-b p-3 pb-2">
+                    <div className="text-sans-md text-raise">{file.name}</div>
+                  </div>
+                  <div className="p-3 pt-2">
+                    <div className="text-mono-sm flex justify-between">
+                      <div className="text-default normal-case!">
+                        {fsize((uploadProgress / 100) * file.size)}{' '}
+                        <span className="text-quaternary">/</span> {fsize(file.size)}
                       </div>
-                      <Progress
-                        className="mt-1.5"
-                        aria-label="Upload progress"
-                        value={uploadProgress}
-                      />
+                      <div className="text-accent">{uploadProgress}%</div>
                     </div>
+                    <Progress
+                      className="mt-1.5"
+                      aria-label="Upload progress"
+                      value={uploadProgress}
+                    />
                   </div>
-                </Step>
-                <Step state={stopImport} label="Get disk out of import mode" />
-                <Step state={finalizeDisk} label="Finalize disk and create snapshot" />
-                <Step state={createImage} label="Create image" duration={15} />
-                <Step
-                  state={{
-                    isPending: deleteDisk.isPending || deleteSnapshot.isPending,
-                    isSuccess: deleteDisk.isSuccess && deleteSnapshot.isSuccess,
-                    isError: deleteDisk.isError || deleteSnapshot.isError,
-                  }}
-                  label="Delete disk and snapshot"
-                />
-                <Step
-                  state={{
-                    isPending: false,
-                    isSuccess: allDone,
-                    isError: false,
-                  }}
-                  label="Image uploaded successfully"
-                  className={
-                    allDone
-                      ? 'bg-accent *:text-accent transition-colors'
-                      : 'transition-colors'
-                  }
-                />
-              </div>
-            </Modal.Section>
-          </Modal.Body>
-          <Modal.Footer
-            onDismiss={closeModal}
-            onAction={backToImages}
-            actionText="Done"
-            cancelText={modalError || allDone ? 'Back' : 'Cancel'}
-            disabled={!allDone}
-          />
-        </Modal>
-      )}
-      <SideModalFormDocs docs={[docLinks.images]} />
-    </SideModalForm>
+                </div>
+              )}
+            </Step>
+            <Step
+              state={stopImport}
+              label="Get disk out of import mode"
+              active={activeStepIndex === 3}
+            />
+            <Step
+              state={finalizeDisk}
+              label="Finalize disk and create snapshot"
+              active={activeStepIndex === 4}
+            />
+            <Step
+              state={createImage}
+              label="Create image"
+              duration={15}
+              active={activeStepIndex === 5}
+            />
+            <Step
+              state={{
+                isPending: deleteDisk.isPending || deleteSnapshot.isPending,
+                isSuccess: deleteDisk.isSuccess && deleteSnapshot.isSuccess,
+                isError: deleteDisk.isError || deleteSnapshot.isError,
+              }}
+              label="Delete disk and snapshot"
+              active={activeStepIndex === 6}
+            />
+            <Step
+              state={{ isPending: false, isSuccess: allDone, isError: false }}
+              label="Image uploaded"
+              className={
+                allDone ? 'bg-accent *:text-accent transition-colors' : 'transition-colors'
+              }
+            />
+          </div>
+        )}
+      </SideModal.Body>
+      <SideModal.Footer error={phase === 'form' && !!formError}>
+        {phase === 'form' ? (
+          <>
+            {isCleaningUp && (
+              <m.div
+                animate={{ opacity: 1, y: 0 }}
+                initial={{ opacity: 0, y: 8 }}
+                transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
+                className="text-sans-md flex grow items-center gap-1.5"
+              >
+                <Spinner />
+                <span className="text-tertiary">Cleaning up…</span>
+              </m.div>
+            )}
+            <Button variant="ghost" size="sm" onClick={handleDismiss}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              form={formId}
+              disabled={form.formState.isSubmitting}
+            >
+              Upload image
+            </Button>
+          </>
+        ) : modalError ? (
+          <>
+            <Button variant="ghost" size="sm" onClick={backToForm}>
+              Back to form
+            </Button>
+            <Button variant="primary" size="sm" onClick={handleRetry}>
+              Retry from here
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowCancelGuard(true)}
+              disabled={!!cancelDisabledReason}
+              disabledReason={cancelDisabledReason}
+            >
+              Cancel upload
+            </Button>
+            <Button variant="primary" size="sm" disabled={!allDone} onClick={handleDone}>
+              Done
+            </Button>
+          </>
+        )}
+      </SideModal.Footer>
+
+      <ConfirmModal
+        isOpen={showCancelGuard}
+        onDismiss={() => setShowCancelGuard(false)}
+        onConfirm={backToForm}
+        title="Cancel upload?"
+        confirmText="Cancel upload"
+        dismissText="Keep uploading"
+      >
+        All progress will be lost. Your form values are kept.
+      </ConfirmModal>
+
+      <ConfirmModal
+        isOpen={showNavGuard}
+        onDismiss={() => setShowNavGuard(false)}
+        onConfirm={backToImages}
+        title="Leave form?"
+        confirmText="Leave form"
+        dismissText="Keep editing"
+      >
+        Any unsaved changes will be lost.
+      </ConfirmModal>
+    </SideModal>
   )
 }
 
diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
index 15d3a8d3f..9c4c982dc 100644
--- a/app/ui/lib/Modal.tsx
+++ b/app/ui/lib/Modal.tsx
@@ -8,6 +8,7 @@
 import { Dialog as BaseDialog } from '@base-ui/react/dialog'
 import cn from 'classnames'
 import * as m from 'motion/react-m'
+import type { RefObject } from 'react'
 import type { MergeExclusive } from 'type-fest'
 
 import { Close12Icon } from '@oxide/design-system/icons/react'
@@ -106,6 +107,8 @@ type FooterProps = {
   actionType?: 'primary' | 'danger'
   actionText: React.ReactNode
   actionLoading?: boolean
+  /** Forwarded to the action button so callers can focus it programmatically. */
+  actionRef?: RefObject<HTMLButtonElement | null>
   cancelText?: string
   disabled?: boolean
   disabledReason?: React.ReactNode
@@ -119,6 +122,7 @@ Modal.Footer = ({
   actionType = 'primary',
   actionText,
   actionLoading,
+  actionRef,
   cancelText,
   disabled,
   disabledReason,
@@ -134,6 +138,7 @@ Modal.Footer = ({
         </Button>
       )}
       <Button
+        ref={actionRef}
         type={formId ? 'submit' : 'button'}
         form={formId}
         size="sm"
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index 7fdf94614..39e01be8c 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -6,18 +6,21 @@
  * Copyright Oxide Computer Company
  */
 import { Dialog as BaseDialog } from '@base-ui/react/dialog'
-import cn from 'classnames'
 import * as m from 'motion/react-m'
 import { useRef, type ReactNode } from 'react'
 
 import { Close12Icon, Error12Icon } from '@oxide/design-system/icons/react'
 
-import { useIsOverflow } from '~/hooks/use-is-overflow'
 import { Message } from '~/ui/lib/Message'
 import { classed } from '~/util/classed'
 
 import { DialogOverlay } from './DialogOverlay'
-import { SideModalContext, useIsInModal, useIsInSideModal } from './modal-context'
+import {
+  SideModalContext,
+  SideModalPopupRefContext,
+  useIsInModal,
+  useIsInSideModal,
+} from './modal-context'
 
 export function usePopoverZIndex() {
   const isInModal = useIsInModal()
@@ -52,66 +55,70 @@ export function SideModal({
   animate = true,
   errors,
 }: SideModalProps) {
+  const popupRef = useRef<HTMLDivElement>(null)
   return (
     <SideModalContext.Provider value>
-      <BaseDialog.Root
-        open
-        onOpenChange={(open) => {
-          if (!open) onDismiss()
-        }}
-      >
-        <BaseDialog.Portal>
-          <DialogOverlay />
-          <BaseDialog.Popup
-            render={
-              <m.div
-                initial={{ x: animate ? 40 : 0 }}
-                animate={{ x: 0 }}
-                transition={{ type: 'spring', duration: 0.4, bounce: 0 }}
-                className="ox-side-modal bg-raise shadow-modal pointer-events-auto fixed top-0 right-0 bottom-0 z-(--z-side-modal) m-0 flex w-lg flex-col justify-between p-0"
-              />
-            }
-          >
-            <div className="mt-8 mb-4">
-              <BaseDialog.Title className="text-sans-2xl text-raise flex w-full items-center justify-between pr-8 wrap-break-word">
-                {title}
-              </BaseDialog.Title>
-              {subtitle}
-            </div>
-            {errors && errors.length > 0 && (
-              <div className="mb-6">
-                <Message
-                  variant="error"
-                  content={
-                    errors.length === 1 ? (
-                      errors[0]
-                    ) : (
-                      <>
-                        <div>{errors.length} issues:</div>
-                        <ul className="ml-4 list-disc">
-                          {errors.map((error, idx) => (
-                            <li key={idx}>{error}</li>
-                          ))}
-                        </ul>
-                      </>
-                    )
-                  }
-                  title={errors.length > 1 ? 'Errors' : 'Error'}
+      <SideModalPopupRefContext.Provider value={popupRef}>
+        <BaseDialog.Root
+          open
+          onOpenChange={(open) => {
+            if (!open) onDismiss()
+          }}
+        >
+          <BaseDialog.Portal>
+            <DialogOverlay />
+            <BaseDialog.Popup
+              render={
+                <m.div
+                  ref={popupRef}
+                  initial={{ x: animate ? 40 : 0 }}
+                  animate={{ x: 0 }}
+                  transition={{ type: 'spring', duration: 0.4, bounce: 0 }}
+                  className="ox-side-modal bg-raise shadow-modal pointer-events-auto fixed top-0 right-0 bottom-0 z-(--z-side-modal) m-0 flex w-lg flex-col justify-between p-0"
                 />
+              }
+            >
+              <div className="mt-8 mb-4">
+                <BaseDialog.Title className="text-sans-2xl text-raise flex w-full items-center justify-between pr-8 wrap-break-word">
+                  {title}
+                </BaseDialog.Title>
+                {subtitle}
               </div>
-            )}
-            {children}
+              {errors && errors.length > 0 && (
+                <div className="mb-6">
+                  <Message
+                    variant="error"
+                    content={
+                      errors.length === 1 ? (
+                        errors[0]
+                      ) : (
+                        <>
+                          <div>{errors.length} issues:</div>
+                          <ul className="ml-4 list-disc">
+                            {errors.map((error, idx) => (
+                              <li key={idx}>{error}</li>
+                            ))}
+                          </ul>
+                        </>
+                      )
+                    }
+                    title={errors.length > 1 ? 'Errors' : 'Error'}
+                  />
+                </div>
+              )}
+              {children}
 
-            {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
-            <BaseDialog.Close
-              className="hover:bg-hover absolute top-10 right-(--content-gutter) -m-2 flex rounded-md p-2"
-              aria-label="Close"
-            >
-              <Close12Icon className="text-default" />
-            </BaseDialog.Close>
-          </BaseDialog.Popup>
-        </BaseDialog.Portal>
-      </BaseDialog.Root>
+              {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
+              <BaseDialog.Close
+                className="hover:bg-hover absolute top-10 right-(--content-gutter) -m-2 flex rounded-md p-2"
+                aria-label="Close"
+              >
+                <Close12Icon className="text-default" />
+              </BaseDialog.Close>
+            </BaseDialog.Popup>
+          </BaseDialog.Portal>
+        </BaseDialog.Root>
+      </SideModalPopupRefContext.Provider>
     </SideModalContext.Provider>
   )
 }
@@ -122,15 +129,11 @@ export const ResourceLabel = classed.h3`mt-2 flex items-center gap-1.5 text-sans
 // gets mad about the use of hooks
 function SideModalBody({ children }: { children?: ReactNode }) {
   const overflowRef = useRef<HTMLDivElement>(null)
-  const { scrollStart } = useIsOverflow(overflowRef, 'vertical')
 
   return (
     <div
       ref={overflowRef}
-      className={cn(
-        'body relative h-full overflow-y-auto pt-8 pb-12 overscroll-none',
-        !scrollStart && 'border-t-secondary border-t'
-      )}
+      className="body border-t-secondary relative h-full overflow-y-auto overscroll-none border-t pt-8 pb-12"
       data-testid="sidemodal-scroll-container"
     >
       {children}
diff --git a/app/ui/lib/modal-context.ts b/app/ui/lib/modal-context.ts
index 54ac67763..28f567036 100644
--- a/app/ui/lib/modal-context.ts
+++ b/app/ui/lib/modal-context.ts
@@ -6,10 +6,17 @@
  * Copyright Oxide Computer Company
  */
 
-import { createContext, useContext } from 'react'
+import { createContext, useContext, type RefObject } from 'react'
 
 export const ModalContext = createContext(false)
 export const useIsInModal = () => useContext(ModalContext)
 
 export const SideModalContext = createContext(false)
 export const useIsInSideModal = () => useContext(SideModalContext)
+
+// Ref to the SideModal's popup element. Used by ConfirmModal so its Dialog
+// can portal into the SideModal instead of the document body — that lets the
+// scrim and centered dialog sit inside the SideModal naturally.
+export const SideModalPopupRefContext =
+  createContext<RefObject<HTMLDivElement | null> | null>(null)
+export const useSideModalPopupRef = () => useContext(SideModalPopupRefContext)
diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index da4111ba3..3d0604fe7 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -713,7 +713,7 @@ test("esc in combobox doesn't close form", async ({ page }) => {
   await page.getByRole('textbox', { name: 'Name' }).fill('a')
 
   // make sure the confirm modal does pop up on esc when we're not in a combobox
-  const confirmModal = page.getByRole('dialog', { name: 'Confirm navigation' })
+  const confirmModal = page.getByRole('dialog', { name: 'Leave form?' })
   await expect(confirmModal).toBeHidden()
   await page.keyboard.press('Escape')
   await expect(confirmModal).toBeVisible()
diff --git a/test/e2e/image-upload.e2e.ts b/test/e2e/image-upload.e2e.ts
index 0f7618328..a1cd50d33 100644
--- a/test/e2e/image-upload.e2e.ts
+++ b/test/e2e/image-upload.e2e.ts
@@ -13,22 +13,19 @@ import {
   expectNotVisible,
   expectRowVisible,
   expectVisible,
-  sleep,
 } from './utils'
 
 // playwright isn't quick enough to catch each step going from ready to running
 // to complete in time, so we just assert that they all start out ready and end
 // up complete
 async function expectUploadProcess(page: Page) {
-  // check these here instead of first because if we don't look for the ready
-  // states right away we won't catch them in time
-  const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
-  await expect(progressModal).toBeVisible()
+  const modal = page.getByRole('dialog', { name: 'Upload image' })
+  await expect(modal).toBeVisible()
 
   const steps = page.locator('css=.upload-step')
   await expect(steps).toHaveCount(8)
 
-  const done = progressModal.getByRole('button', { name: 'Done' })
+  const done = modal.getByRole('button', { name: 'Done' })
 
   for (const step of await steps.all()) {
     await expect(step).toHaveAttribute('data-status', 'complete', { timeout: 20000 })
@@ -67,7 +64,7 @@ test.describe('Image upload', () => {
 
     await page.getByRole('button', { name: 'Upload image' }).click()
 
-    // now the modal pops open and the thing starts going
+    // now the form swaps into progress phase
     await expectUploadProcess(page)
 
     // the image name check 404 should be logged as expected-info, with context
@@ -139,94 +136,62 @@ test.describe('Image upload', () => {
     test(`cancel in state '${state}'`, async ({ page }) => {
       await fillForm(page, 'new-image')
 
-      await page.getByRole('button', { name: 'Upload image' }).click()
+      const modal = page.getByRole('dialog', { name: 'Upload image' })
 
-      const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
-      await expect(progressModal).toBeVisible()
+      await page.getByRole('button', { name: 'Upload image' }).click()
+      await expect(modal).toBeVisible()
 
       // wait to be in the middle of the specified step
       const uploadStep = page.getByTestId(`upload-step: ${state}`)
       await expect(uploadStep).toHaveAttribute('data-status', 'running')
 
-      // form is disabled and semi-hidden
-      // await expectNotVisible(page, ['role=textbox[name="Name"]'])
-
-      page.on('dialog', (dialog) => dialog.accept()) // click yes on the are you sure prompt
-      await progressModal.getByRole('button', { name: 'Cancel' }).click()
-
-      // modal has closed
-      await expect(progressModal).toBeHidden()
+      // open the cancel guard and confirm
+      await modal.getByRole('button', { name: 'Cancel upload' }).click()
+      const cancelGuard = page.getByRole('dialog', { name: 'Cancel upload?' })
+      await cancelGuard.getByRole('button', { name: 'Cancel upload' }).click()
 
       // form's back
-      await expect(page.getByRole('textbox', { name: 'Name' })).toBeVisible()
+      await expect(modal.getByRole('textbox', { name: 'Name' })).toBeVisible()
+      // wait for cleanup to finish: submit re-enables once the temp disk is gone
+      await expect(modal.getByRole('button', { name: 'Upload image' })).toBeEnabled()
+
+      // dismiss the form (react-hook-form treats post-submit state as clean,
+      // so this skips the nav guard and navigates directly)
+      await modal.getByRole('button', { name: 'Cancel' }).click()
 
-      // get out of the form and go to the disks page to check it's not there
-      await page.getByRole('button', { name: 'Cancel' }).click()
+      // navigate to disks to verify the temp disk was deleted
       await page.getByRole('link', { name: 'Disks' }).click()
       await expect(page.getByRole('cell', { name: 'disk-1', exact: true })).toBeVisible()
       await expect(page.getByRole('cell', { name: 'tmp' })).toBeHidden()
     })
   }
 
-  // testing the onFocusOutside fix
   test('cancel canceling', async ({ page, browserName }) => {
     // eslint-disable-next-line playwright/no-skipped-test
     test.skip(browserName === 'webkit', 'safari. stop this')
 
     await fillForm(page, 'new-image')
 
-    const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
-
+    const modal = page.getByRole('dialog', { name: 'Upload image' })
     await page.getByRole('button', { name: 'Upload image' }).click()
-    await expect(progressModal).toBeVisible()
-
-    let confirmCount = 0
-
-    page.on('dialog', async (dialog) => {
-      confirmCount += 1
-      await dialog.dismiss()
-    }) // click cancel on the are you sure prompt
-
-    await progressModal.getByRole('button', { name: 'Cancel' }).click()
-
-    // still visible because we canceled the cancel!
-    await expect(progressModal).toBeVisible()
-    expect(confirmCount).toEqual(1)
-
-    // now try dismissing by clicking the scrim outside the progress modal
-    await page.mouse.click(50, 50)
-
-    await sleep(300)
-
-    // without the onFocusOutside fix this is a higher number
-    expect(confirmCount).toEqual(2)
-  })
-
-  // regression test for the nested-dialog scrim: the progress modal's backdrop
-  // must cover the SideModal behind it. Without forceRender on Dialog.Backdrop,
-  // base-ui hides a nested backdrop by default, leaving the SideModal
-  // interactive through the "overlay". Without raising --z-modal-overlay above
-  // --z-side-modal, the overlay sits below the SideModal and doesn't cover it.
-  test('progress modal scrim covers the side modal underneath', async ({
-    page,
-    browserName,
-  }) => {
-    // eslint-disable-next-line playwright/no-skipped-test
-    test.skip(browserName === 'webkit', 'safari. stop this')
-
-    await fillForm(page, 'new-image')
-
-    const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
-    await page.getByRole('button', { name: 'Upload image' }).click()
-    await expect(progressModal).toBeVisible()
-
-    // 4096 is a block-size radio in the SideModal behind the progress modal.
-    // Playwright's actionability check should fail here: the scrim intercepts
-    // pointer events, so the click can't land on the radio. Without the fix,
-    // nothing covers the radio and the click would succeed.
-    await expect(page.getByLabel('4096').click({ timeout: 2000 })).rejects.toThrow(
-      /intercepts pointer events/
-    )
+    await expect(modal).toBeVisible()
+
+    // open the cancel guard
+    await modal.getByRole('button', { name: 'Cancel upload' }).click()
+    const cancelGuard = page.getByRole('dialog', { name: 'Cancel upload?' })
+    await expect(cancelGuard).toBeVisible()
+
+    // "Keep uploading" dismisses just the guard; SideModal stays open
+    await cancelGuard.getByRole('button', { name: 'Keep uploading' }).click()
+    await expect(cancelGuard).toBeHidden()
+    await expect(modal).toBeVisible()
+
+    // Esc also dismisses only the guard
+    await modal.getByRole('button', { name: 'Cancel upload' }).click()
+    await expect(cancelGuard).toBeVisible()
+    await page.keyboard.press('Escape')
+    await expect(cancelGuard).toBeHidden()
+    await expect(modal).toBeVisible()
   })
 
   test('Image upload cancel and retry', async ({ page, browserName }) => {
@@ -235,27 +200,21 @@ test.describe('Image upload', () => {
 
     await fillForm(page, 'new-image')
 
+    const modal = page.getByRole('dialog', { name: 'Upload image' })
     await page.getByRole('button', { name: 'Upload image' }).click()
 
     // wait to be in the middle of upload
     const uploadStep = page.getByTestId('upload-step: Upload image file')
     await expect(uploadStep).toHaveAttribute('data-status', 'running')
 
-    // form is disabled and semi-hidden
-    // await expectNotVisible(page, ['role=textbox[name="Name"]'])
-
-    page.on('dialog', (dialog) => dialog.accept()) // click yes on the are you sure prompt
-    const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
-    await progressModal.getByRole('button', { name: 'Cancel' }).click()
-
-    // modal has closed
-    await expect(progressModal).toBeHidden()
+    // open the cancel guard and confirm
+    await modal.getByRole('button', { name: 'Cancel upload' }).click()
+    const cancelGuard = page.getByRole('dialog', { name: 'Cancel upload?' })
+    await cancelGuard.getByRole('button', { name: 'Cancel upload' }).click()
 
-    // form's back
-    await expect(page.getByRole('textbox', { name: 'Name' })).toBeVisible()
-    // need to wait for submit button to come back because it's in a loading
-    // state while the cleanup runs
-    await expect(page.getByRole('button', { name: 'Upload image' })).toBeVisible()
+    // form's back; wait for cleanup so submit is enabled again
+    await expect(modal.getByRole('textbox', { name: 'Name' })).toBeVisible()
+    await expect(modal.getByRole('button', { name: 'Upload image' })).toBeEnabled()
 
     // resubmit and it should work fine
     await page.getByRole('button', { name: 'Upload image' }).click()
@@ -311,7 +270,7 @@ test.describe('Image upload', () => {
       if (message !== genericMessage) {
         await expect(page.getByText(genericMessage)).toBeHidden()
       }
-      await expect(page.getByRole('button', { name: 'Back' })).toBeVisible()
+      await expect(page.getByRole('button', { name: 'Back to form' })).toBeVisible()
     })
   }
 })
diff --git a/test/e2e/nav-guard-modal.e2e.ts b/test/e2e/nav-guard-modal.e2e.ts
index da2a4b8ab..9b0dedc0c 100644
--- a/test/e2e/nav-guard-modal.e2e.ts
+++ b/test/e2e/nav-guard-modal.e2e.ts
@@ -14,7 +14,7 @@ test('navigating away from SideModal form triggers nav guard', async ({ page })
   // it, base-ui aria-hides the form modal (it's outside the inner dialog's
   // portal tree), so role-based locators can't find it.
   const formModal = page.locator('[role=dialog]:has(h2:text-is("Create floating IP"))')
-  const confirmModal = page.getByRole('dialog', { name: 'Confirm navigation' })
+  const confirmModal = page.getByRole('dialog', { name: 'Leave form?' })
 
   await page.goto(floatingIpsPage)