From 7190f942b87295d13ae681d3b7c3756bc91b09bb Mon Sep 17 00:00:00 2001
From: Haksung Jang <haksung@sk.com>
Date: Fri, 14 Aug 2026 13:42:54 +0900
Subject: [PATCH] feat(web): confirm a scan delete and trap focus in modals

Deleting a scan removed its output folder on a single click, from both the
scan table and the top-bar menu, and the files leave the disk with no copy
kept. Both paths now go through a confirm dialog that names the scan, opens
focus on Cancel, and reports the delete once it happens.

The prompt comes from a shared Modal that owns the focus contract: focus
enters the panel on open, Tab cycles inside it, Escape and a backdrop click
close it, and focus returns to the control that opened it. FileViewer
declared a focus trap in a comment but only handled Escape; it now uses the
shared one.
---
 CHANGELOG.md                                  |   4 +
 .../frontend/src/components/FileViewer.tsx    |  90 ++++-----
 .../web/frontend/src/components/NextApp.tsx   |  39 +++-
 .../web/frontend/src/components/ui/dialog.tsx | 172 ++++++++++++++++++
 docker/web/frontend/src/lib/focus.test.ts     |  41 +++++
 docker/web/frontend/src/lib/focus.ts          |  43 +++++
 .../web/frontend/src/locales/en/common.json   |   6 +
 .../web/frontend/src/locales/ko/common.json   |   6 +
 docker/web/frontend/tests/ui/dialog.spec.ts   | 171 +++++++++++++++++
 docker/web/frontend/tests/ui/shell.spec.ts    |   4 +-
 docs/reference/ui.ko.md                       |   2 +-
 docs/reference/ui.md                          |   2 +-
 12 files changed, 521 insertions(+), 59 deletions(-)
 create mode 100644 docker/web/frontend/src/components/ui/dialog.tsx
 create mode 100644 docker/web/frontend/src/lib/focus.test.ts
 create mode 100644 docker/web/frontend/src/lib/focus.ts
 create mode 100644 docker/web/frontend/tests/ui/dialog.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f026c7e..bc9e9511 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Deleting a scan asks for confirmation first, naming the scan it is about to remove. The delete control in the scan table and the one in the top bar's scan menu both removed a scan's output folder on a single click, and because the files are gone from disk with no copy kept, a mis-click could not be taken back. The prompt opens on Cancel, and a confirmed delete says so. Modal dialogs also hold the keyboard now: focus moves into the panel when one opens, Tab stays inside it, and it returns to whatever opened the dialog on close.
+
 ### Added
 
 - A scanned AI model file is checked for whether loading it runs code. Pickle-format weights (`.pkl`, and the pickle inside a PyTorch archive or an `object`-dtype `.npz` member) are analyzed with picklescan, now installed in the base image, and the verdict feeds the file-security axis of the model risk assessment: a dangerous global reads `caution`, globals that need a human reads `review`, and a format that cannot execute code on load reads `ok`. BomLens reported this for models on HuggingFace by reading the Hub's own scan; a file that was never published had no such record and therefore no verdict at all. A clean result states its scope — it is a pickle analysis, not a malware scan — and a scan that could not run leaves no security axis rather than implying the file is safe.
diff --git a/docker/web/frontend/src/components/FileViewer.tsx b/docker/web/frontend/src/components/FileViewer.tsx
index 4de7a40e..344a022c 100644
--- a/docker/web/frontend/src/components/FileViewer.tsx
+++ b/docker/web/frontend/src/components/FileViewer.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
+import { Modal } from "@/components/ui/dialog";
 import { fileUrl } from "@/lib/api";
 
 interface Props {
@@ -18,8 +19,7 @@ interface Props {
 /**
  * Lightweight modal artifact viewer. HTML reports render in an iframe (so the
  * report's own styles apply); JSON is pretty-printed; text/markdown shown raw.
- * No @radix-ui/react-dialog dependency — a focus-trapped overlay is enough for
- * this single-purpose viewer.
+ * The overlay, focus handling and Escape come from the shared Modal.
  */
 export function FileViewer({ name, scanId, onClose }: Props) {
   const { t } = useTranslation();
@@ -42,14 +42,6 @@ export function FileViewer({ name, scanId, onClose }: Props) {
     };
   }, [name, scanId, isHtml]);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    if (name) window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [name, onClose]);
-
   if (!name) return null;
 
   let body = text;
@@ -62,50 +54,44 @@ export function FileViewer({ name, scanId, onClose }: Props) {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
-      role="dialog"
-      aria-modal="true"
-      aria-label={name}
+    <Modal
+      open
+      onClose={onClose}
+      label={name}
+      className="h-[80vh] max-w-4xl"
     >
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="relative z-10 flex h-[80vh] w-full max-w-4xl flex-col overflow-hidden rounded-xl border bg-card shadow-lg animate-fade-in">
-        <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
-          <span className="truncate font-mono text-sm">{name}</span>
-          <div className="flex shrink-0 items-center gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <a href={fileUrl(scanId, name)} download={name}>
-                <Download className="h-4 w-4" />
-                {t("result.download")}
-              </a>
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onClose}
-              aria-label={t("viewer.close")}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-        <div className="flex-1 overflow-auto">
-          {isHtml ? (
-            <iframe
-              title={name}
-              src={fileUrl(scanId, name)}
-              className="h-full w-full bg-white"
-            />
-          ) : (
-            <pre className="whitespace-pre-wrap break-all p-4 font-mono text-xs">
-              {body}
-            </pre>
-          )}
+      <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+        <span className="truncate font-mono text-sm">{name}</span>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <a href={fileUrl(scanId, name)} download={name}>
+              <Download className="h-4 w-4" />
+              {t("result.download")}
+            </a>
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            aria-label={t("viewer.close")}
+          >
+            <X className="h-4 w-4" />
+          </Button>
         </div>
       </div>
-    </div>
+      <div className="flex-1 overflow-auto">
+        {isHtml ? (
+          <iframe
+            title={name}
+            src={fileUrl(scanId, name)}
+            className="h-full w-full bg-white"
+          />
+        ) : (
+          <pre className="whitespace-pre-wrap break-all p-4 font-mono text-xs">
+            {body}
+          </pre>
+        )}
+      </div>
+    </Modal>
   );
 }
diff --git a/docker/web/frontend/src/components/NextApp.tsx b/docker/web/frontend/src/components/NextApp.tsx
index c2398c16..95559166 100644
--- a/docker/web/frontend/src/components/NextApp.tsx
+++ b/docker/web/frontend/src/components/NextApp.tsx
@@ -11,6 +11,7 @@ import { ProgressLog } from "./ProgressLog";
 import { RecentScans } from "./RecentScans";
 import { ResultSection } from "./ResultSections";
 import { ScanRunning } from "./ScanRunning";
+import { ConfirmDialog } from "./ui/dialog";
 import {
   deleteScan,
   getCapabilities,
@@ -33,6 +34,7 @@ import {
 } from "@/lib/nav";
 import { homeHash, newHash, parseHash, scanHash } from "@/lib/route";
 import { deriveScanContext, sectionCounts } from "@/lib/results";
+import { useToast } from "@/lib/toast";
 
 type Status = "idle" | "running" | "done" | "error";
 
@@ -91,6 +93,7 @@ function toRecentLink(s: RecentScan): RecentScanLink {
  */
 export function NextApp() {
   const { t } = useTranslation();
+  const { toast } = useToast();
   const [status, setStatus] = useState<Status>("idle");
   const [logs, setLogs] = useState<string[]>([]);
   // The failure message surfaced on the Scan-running screen when a scan can't
@@ -110,6 +113,8 @@ export function NextApp() {
     docker: true,
   });
   const [recent, setRecent] = useState<RecentScan[]>([]);
+  // The scan a delete button asked to remove, waiting on the confirm dialog.
+  const [pendingDelete, setPendingDelete] = useState<string | null>(null);
   // A finished scan's config, parked here when the user hits "Re-scan" so the
   // New scan form can seed itself from it. The form reads it once on mount and
   // clears it, so a subsequent plain New scan starts blank.
@@ -248,10 +253,24 @@ export function NextApp() {
   // Close the live scan stream if the app unmounts.
   useEffect(() => () => streamRef.current?.close(), []);
 
-  // Delete a past scan (its artifacts) and refresh the Recent list.
-  const deleteRecent = (id: string) => {
+  // Deleting a scan removes its output files from disk, and the server keeps no
+  // copy — there is nothing to undo afterwards. So the guard goes in front: both
+  // delete controls (the Recent table and the top-bar menu) park the id here and
+  // the dialog is what actually calls the API.
+  const pendingScan = recent.find((s) => s.id === pendingDelete);
+  // Name the scan in the prompt so the user sees which one is going. Falls back
+  // to the id when the list hasn't caught up with the menu.
+  const pendingLabel = pendingScan
+    ? [pendingScan.project, pendingScan.version].filter(Boolean).join(" ")
+    : (pendingDelete ?? "");
+
+  const confirmDelete = () => {
+    const id = pendingDelete;
+    setPendingDelete(null);
+    if (!id) return;
     void deleteScan(id).then(() => {
       void refreshRecent();
+      toast(t("recent.deleted"));
       // If we're viewing the scan we just deleted, drop back to New scan.
       if (loadedIdRef.current === id) window.location.hash = homeHash();
     });
@@ -358,7 +377,7 @@ export function NextApp() {
       activeSection={activeSection}
       activeScanId={loadedIdRef.current}
       recent={recentLinks}
-      onDeleteRecent={deleteRecent}
+      onDeleteRecent={setPendingDelete}
       counts={counts}
       showSections={Boolean(result)}
       homeHref={homeHash()}
@@ -377,7 +396,7 @@ export function NextApp() {
             <RecentScans
               scans={recent}
               newHref={newHash()}
-              onDelete={deleteRecent}
+              onDelete={setPendingDelete}
             />
           ) : (
             <NewScan
@@ -475,6 +494,18 @@ export function NextApp() {
             )}
         </div>
       )}
+
+      {/* Fixed-position overlay, so it renders the same wherever it sits in the
+          tree — kept here to cover both the home and the result screens. */}
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        title={t("recent.confirmDeleteTitle")}
+        description={t("recent.confirmDeleteBody", { scan: pendingLabel })}
+        confirmLabel={t("recent.delete")}
+        destructive
+        onConfirm={confirmDelete}
+        onCancel={() => setPendingDelete(null)}
+      />
     </AppShell>
   );
 }
diff --git a/docker/web/frontend/src/components/ui/dialog.tsx b/docker/web/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..200f886f
--- /dev/null
+++ b/docker/web/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,172 @@
+// Copyright 2026 SK Telecom Co., Ltd.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useId, useRef, type ReactNode, type RefObject } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { FOCUSABLE_SELECTOR, wrapFocusIndex } from "@/lib/focus";
+import { cn } from "@/lib/utils";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  /** Accessible name. Use `labelledBy` instead when a heading carries it. */
+  label?: string;
+  labelledBy?: string;
+  describedBy?: string;
+  /** Extra classes for the panel (size, layout). */
+  className?: string;
+  /** Where focus lands on open. Defaults to the first focusable control. */
+  initialFocus?: RefObject<HTMLElement | null>;
+  children: ReactNode;
+}
+
+/**
+ * The app's modal shell: an overlay panel that holds focus while it is open.
+ *
+ * No dialog library — what a modal owes the user is a small, fixed list, and
+ * all of it is here: focus enters the panel on open, Tab cycles inside it
+ * instead of wandering into the page behind, Escape and a backdrop click close
+ * it, and focus returns to whatever opened it. Everything modal in the app goes
+ * through this component so those guarantees hold in one place.
+ */
+export function Modal({
+  open,
+  onClose,
+  label,
+  labelledBy,
+  describedBy,
+  className,
+  initialFocus,
+  children,
+}: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    // Remember who opened us, to hand focus back on close.
+    const opener = document.activeElement as HTMLElement | null;
+    const focusables = () =>
+      Array.from(
+        panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ??
+          [],
+      );
+
+    (initialFocus?.current ?? focusables()[0] ?? panelRef.current)?.focus();
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const items = focusables();
+      const next = wrapFocusIndex(
+        items.length,
+        items.indexOf(document.activeElement as HTMLElement),
+        e.shiftKey,
+      );
+      if (next === null) return;
+      e.preventDefault();
+      items[next].focus();
+    };
+
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      // The opener can be gone (a deleted row's button); focus then falls to
+      // the body, which is the browser's own default.
+      opener?.focus?.();
+    };
+  }, [open, onClose, initialFocus]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+        aria-labelledby={labelledBy}
+        aria-describedby={describedBy}
+        tabIndex={-1}
+        className={cn(
+          "relative z-10 flex w-full flex-col overflow-hidden rounded-xl border bg-card shadow-lg animate-fade-in focus-visible:outline-none",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  description?: string;
+  confirmLabel: string;
+  cancelLabel?: string;
+  /** Paints the confirm button as destructive. */
+  destructive?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * Confirmation step for an action that cannot be taken back. Focus opens on
+ * Cancel, so a stray Enter or Escape leaves the data alone.
+ */
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  destructive,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const { t } = useTranslation();
+  const id = useId();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onCancel}
+      labelledBy={`${id}-title`}
+      describedBy={description ? `${id}-desc` : undefined}
+      initialFocus={cancelRef}
+      className="max-w-md gap-4 p-6"
+    >
+      <h2 id={`${id}-title`} className="text-base font-semibold">
+        {title}
+      </h2>
+      {description && (
+        <p id={`${id}-desc`} className="text-sm text-muted-foreground">
+          {description}
+        </p>
+      )}
+      <div className="flex justify-end gap-2">
+        <Button ref={cancelRef} variant="outline" size="sm" onClick={onCancel}>
+          {cancelLabel ?? t("dialog.cancel")}
+        </Button>
+        <Button
+          variant={destructive ? "destructive" : "default"}
+          size="sm"
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/docker/web/frontend/src/lib/focus.test.ts b/docker/web/frontend/src/lib/focus.test.ts
new file mode 100644
index 00000000..1f1412d2
--- /dev/null
+++ b/docker/web/frontend/src/lib/focus.test.ts
@@ -0,0 +1,41 @@
+// Copyright 2026 SK Telecom Co., Ltd.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+
+import { FOCUSABLE_SELECTOR, wrapFocusIndex } from "./focus";
+
+describe("wrapFocusIndex", () => {
+  it("moves forward and wraps at the end", () => {
+    expect(wrapFocusIndex(3, 0, false)).toBe(1);
+    expect(wrapFocusIndex(3, 1, false)).toBe(2);
+    expect(wrapFocusIndex(3, 2, false)).toBe(0);
+  });
+
+  it("moves backward and wraps at the start", () => {
+    expect(wrapFocusIndex(3, 2, true)).toBe(1);
+    expect(wrapFocusIndex(3, 0, true)).toBe(2);
+  });
+
+  it("enters at the near end when focus is outside the dialog", () => {
+    expect(wrapFocusIndex(3, -1, false)).toBe(0);
+    expect(wrapFocusIndex(3, -1, true)).toBe(2);
+  });
+
+  it("stays put with a single focusable element", () => {
+    expect(wrapFocusIndex(1, 0, false)).toBe(0);
+    expect(wrapFocusIndex(1, 0, true)).toBe(0);
+  });
+
+  it("returns null when there is nothing to focus", () => {
+    expect(wrapFocusIndex(0, -1, false)).toBeNull();
+    expect(wrapFocusIndex(0, 0, true)).toBeNull();
+  });
+});
+
+describe("FOCUSABLE_SELECTOR", () => {
+  it("excludes elements taken out of the tab order", () => {
+    expect(FOCUSABLE_SELECTOR).toContain('[tabindex]:not([tabindex="-1"])');
+    expect(FOCUSABLE_SELECTOR).toContain("button:not([disabled])");
+  });
+});
diff --git a/docker/web/frontend/src/lib/focus.ts b/docker/web/frontend/src/lib/focus.ts
new file mode 100644
index 00000000..507ddfaf
--- /dev/null
+++ b/docker/web/frontend/src/lib/focus.ts
@@ -0,0 +1,43 @@
+// Copyright 2026 SK Telecom Co., Ltd.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Focus-trap arithmetic, kept out of the component so it can be tested without
+ * a DOM. The component collects the focusable elements and applies the index
+ * this returns.
+ */
+
+/** CSS selector for the elements a Tab press can reach. */
+export const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  '[tabindex]:not([tabindex="-1"])',
+].join(",");
+
+/**
+ * The index Tab should land on, wrapping at both ends so focus stays inside the
+ * dialog.
+ *
+ * `current` is the index of the focused element, or -1 when focus sits on the
+ * panel itself or has escaped the dialog — Tab then enters at the first element
+ * and Shift+Tab at the last, which is what a user expects on re-entry.
+ *
+ * Returns null when there is nothing to focus, and the caller leaves the event
+ * alone.
+ */
+export function wrapFocusIndex(
+  count: number,
+  current: number,
+  backwards: boolean,
+): number | null {
+  if (count <= 0) return null;
+  if (current < 0) return backwards ? count - 1 : 0;
+  const next = backwards ? current - 1 : current + 1;
+  if (next < 0) return count - 1;
+  if (next >= count) return 0;
+  return next;
+}
diff --git a/docker/web/frontend/src/locales/en/common.json b/docker/web/frontend/src/locales/en/common.json
index 2ab6812c..afea16a2 100644
--- a/docker/web/frontend/src/locales/en/common.json
+++ b/docker/web/frontend/src/locales/en/common.json
@@ -336,6 +336,9 @@
     "open": "View artifact",
     "close": "Close"
   },
+  "dialog": {
+    "cancel": "Cancel"
+  },
   "theme": {
     "toLight": "Switch to light",
     "toDark": "Switch to dark"
@@ -898,6 +901,9 @@
     "colComponents": "Components",
     "colSeverity": "Top severity",
     "delete": "Delete",
+    "deleted": "Scan deleted",
+    "confirmDeleteTitle": "Delete this scan?",
+    "confirmDeleteBody": "The output files for {{scan}} are removed from this machine. Nothing is kept elsewhere, so this cannot be undone.",
     "typeAi": "AI model",
     "typeSbom": "SBOM",
     "typeSource": "Source",
diff --git a/docker/web/frontend/src/locales/ko/common.json b/docker/web/frontend/src/locales/ko/common.json
index ce99fc96..377b4763 100644
--- a/docker/web/frontend/src/locales/ko/common.json
+++ b/docker/web/frontend/src/locales/ko/common.json
@@ -336,6 +336,9 @@
     "open": "결과물 보기",
     "close": "닫기"
   },
+  "dialog": {
+    "cancel": "취소"
+  },
   "theme": {
     "toLight": "라이트 모드로",
     "toDark": "다크 모드로"
@@ -898,6 +901,9 @@
     "colComponents": "컴포넌트",
     "colSeverity": "최고 심각도",
     "delete": "삭제",
+    "deleted": "스캔을 삭제했습니다",
+    "confirmDeleteTitle": "이 스캔을 삭제할까요?",
+    "confirmDeleteBody": "{{scan}}의 산출물 파일이 이 컴퓨터에서 지워집니다. 다른 곳에 사본이 없으므로 되돌릴 수 없습니다.",
     "typeAi": "AI 모델",
     "typeSbom": "SBOM",
     "typeSource": "소스",
diff --git a/docker/web/frontend/tests/ui/dialog.spec.ts b/docker/web/frontend/tests/ui/dialog.spec.ts
new file mode 100644
index 00000000..593ea639
--- /dev/null
+++ b/docker/web/frontend/tests/ui/dialog.spec.ts
@@ -0,0 +1,171 @@
+// Copyright 2026 SK Telecom Co., Ltd.
+// SPDX-License-Identifier: Apache-2.0
+
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test, type Page } from "@playwright/test";
+
+/**
+ * Modal behaviour that the visual snapshots and axe cannot see: the confirm
+ * step in front of a delete (the files go from disk, so there is no undo), and
+ * the focus contract of the shared Modal — focus enters the panel, Tab stays
+ * inside it, and it returns to the opener on close.
+ *
+ * The backend is stubbed, and DELETE calls are counted, so "cancel deletes
+ * nothing" is asserted against the network rather than the screen.
+ */
+
+const SCANS = [
+  {
+    id: "demo_2.1",
+    project: "demo",
+    version: "2.1",
+    components: 1,
+    maxSeverity: null,
+    isAiScan: false,
+    componentType: "application",
+    generatedAt: 1700000000,
+  },
+];
+
+const DONE = {
+  ok: true,
+  mode: "SOURCE",
+  id: "demo_2.1",
+  results: [{ name: "demo_2.1_bom.json", size: 100 }],
+  security: null,
+  conformance: null,
+  sbom: {
+    components: 1,
+    componentList: [
+      {
+        name: "openssl",
+        version: "3.0.0",
+        group: "",
+        purl: "pkg:github/openssl/openssl",
+        type: "library",
+        licenses: ["Apache-2.0"],
+      },
+    ],
+  },
+};
+
+const SBOM = {
+  bomFormat: "CycloneDX",
+  metadata: { component: { "bom-ref": "root", name: "demo", version: "2.1" } },
+  components: [
+    { "bom-ref": "o", name: "openssl", version: "3.0.0", type: "library", purl: "o" },
+  ],
+  dependencies: [],
+};
+
+/** Stub the backend and record every DELETE the app sends. */
+async function stub(page: Page) {
+  const deletes: string[] = [];
+  await page.route("**/capabilities", (r) =>
+    r.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({ firmware: false, docker: true }),
+    }),
+  );
+  await page.route("**/results", (r) =>
+    r.fulfill({ contentType: "application/json", body: "[]" }),
+  );
+  await page.route("**/scans", (r) =>
+    r.fulfill({ contentType: "application/json", body: JSON.stringify(SCANS) }),
+  );
+  await page.route("**/scan-delete**", (r) => {
+    deletes.push(new URL(r.request().url()).searchParams.get("id") ?? "");
+    return r.fulfill({ status: 200, contentType: "application/json", body: "{}" });
+  });
+  await page.route("**/scan?id=demo_2.1", (r) =>
+    r.fulfill({ contentType: "application/json", body: JSON.stringify(DONE) }),
+  );
+  await page.route("**/file**", (r) =>
+    r.fulfill({ contentType: "application/json", body: JSON.stringify(SBOM) }),
+  );
+  return deletes;
+}
+
+test("deleting a scan asks first, and cancelling sends nothing", async ({ page }) => {
+  const deletes = await stub(page);
+  await page.goto("/?ui=next#/");
+  await expect(page.getByRole("heading", { name: "Scan management" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Delete" }).first().click();
+
+  // The prompt names the scan and warns that the files go.
+  const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible();
+  await expect(dialog).toContainText("demo 2.1");
+  await expect(dialog).toContainText("cannot be undone");
+
+  // Focus opens on Cancel, the safe choice.
+  await expect(page.getByRole("button", { name: "Cancel" })).toBeFocused();
+
+  await page.getByRole("button", { name: "Cancel" }).click();
+  await expect(dialog).toHaveCount(0);
+  expect(deletes).toEqual([]);
+  await expect(page.getByRole("cell", { name: /demo/ }).first()).toBeVisible();
+});
+
+test("confirming the prompt deletes the scan and says so", async ({ page }) => {
+  const deletes = await stub(page);
+  await page.goto("/?ui=next#/");
+  await page.getByRole("button", { name: "Delete" }).first().click();
+
+  // The confirm button carries the destructive verb, not a bare "OK".
+  await page.getByRole("dialog").getByRole("button", { name: "Delete" }).click();
+
+  await expect.poll(() => deletes).toEqual(["demo_2.1"]);
+  await expect(page.getByText("Scan deleted")).toBeVisible();
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+});
+
+test("Escape dismisses the prompt without deleting", async ({ page }) => {
+  const deletes = await stub(page);
+  await page.goto("/?ui=next#/");
+  await page.getByRole("button", { name: "Delete" }).first().click();
+  await expect(page.getByRole("dialog")).toBeVisible();
+
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+  expect(deletes).toEqual([]);
+});
+
+test("the prompt is accessible", async ({ page }) => {
+  await stub(page);
+  await page.goto("/?ui=next#/");
+  await page.getByRole("button", { name: "Delete" }).first().click();
+  await expect(page.getByRole("dialog")).toBeVisible();
+
+  const axe = await new AxeBuilder({ page })
+    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+    .analyze();
+  expect(axe.violations).toEqual([]);
+});
+
+test("the artifact viewer traps focus and hands it back", async ({ page }) => {
+  await stub(page);
+  await page.goto("/?ui=next#/scan/demo_2.1/artifacts");
+
+  const opener = page.getByRole("button", { name: "View" }).first();
+  await opener.click();
+
+  const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible();
+
+  // Focus moved into the panel...
+  await expect(
+    dialog.locator(":focus"),
+    "focus should sit on a control inside the dialog",
+  ).toHaveCount(1);
+
+  // ...and Tab keeps it there, however many times it is pressed.
+  for (let i = 0; i < 6; i += 1) await page.keyboard.press("Tab");
+  await expect(dialog.locator(":focus")).toHaveCount(1);
+
+  // Closing returns focus to the button that opened it.
+  await page.keyboard.press("Escape");
+  await expect(dialog).toHaveCount(0);
+  await expect(opener).toBeFocused();
+});
diff --git a/docker/web/frontend/tests/ui/shell.spec.ts b/docker/web/frontend/tests/ui/shell.spec.ts
index c09d54c9..e3a7ac88 100644
--- a/docker/web/frontend/tests/ui/shell.spec.ts
+++ b/docker/web/frontend/tests/ui/shell.spec.ts
@@ -278,8 +278,10 @@ test("Recent home deletes a scan from its row", async ({ page }) => {
 
   const row = page.getByRole("link", { name: /demo @1.0/ });
   await expect(row).toBeVisible();
-  // The row's trash button deletes the scan; the list refreshes to empty.
+  // The row's trash button asks first (dialog.spec covers the prompt itself);
+  // confirming deletes the scan and the list refreshes to empty.
   await page.getByRole("button", { name: "Delete", exact: true }).click();
+  await page.getByRole("dialog").getByRole("button", { name: "Delete" }).click();
   await expect(row).toHaveCount(0);
   await expect(page.getByText("Generate your first SBOM")).toBeVisible();
 });
diff --git a/docs/reference/ui.ko.md b/docs/reference/ui.ko.md
index 2a3ff57e..f88384e8 100644
--- a/docs/reference/ui.ko.md
+++ b/docs/reference/ui.ko.md
@@ -120,7 +120,7 @@ AI G7 최소 요소 검사는 위의 **SBOM 적합성** 섹션 안에 나타납
 
 ## 스캔 관리
 
-홈 화면은 레일의 스캔 관리 링크, 로고, 상단 바의 스캔 관리(시계) 메뉴로 열리며, 이 머신에 저장된 모든 지난 스캔을 나열합니다. 출력 베이스 아래 각 스캔의 `{Project}_{Version}/` 하위 폴더가 하나의 항목입니다. 검색창과 스캔 유형 필터 칩(존재하는 유형만, 곧 소스, 컨테이너, RootFS, 펌웨어, AI 모델, SBOM)으로 목록을 좁힙니다. 유형은 그 스캔이 무엇을 대상으로 삼았는지에서 정하고, 그것으로 갈리지 않는 경우에만 SBOM이 선언한 최상위 컴포넌트를 봅니다. 공급사가 보낸 SBOM을 분석한 스캔은 그 문서의 최상위가 대개 응용 프로그램이어서 소스로 보이던 것이 이제 SBOM으로 표시됩니다. 요약 카드 세 개가 전체 스캔 수, 위험 주의 건수(그 카드를 누르면 위험 항목만 필터됨), 프로젝트 수를 보여줍니다. 표는 스캔, 생성 시각, 컴포넌트, 최고 심각도로 정렬됩니다. 행을 클릭하면 결과를 다시 열고, 삭제하면 그 하위 폴더가 제거됩니다. 계정이나 데이터베이스 없이 로컬 파일만 사용합니다.
+홈 화면은 레일의 스캔 관리 링크, 로고, 상단 바의 스캔 관리(시계) 메뉴로 열리며, 이 머신에 저장된 모든 지난 스캔을 나열합니다. 출력 베이스 아래 각 스캔의 `{Project}_{Version}/` 하위 폴더가 하나의 항목입니다. 검색창과 스캔 유형 필터 칩(존재하는 유형만, 곧 소스, 컨테이너, RootFS, 펌웨어, AI 모델, SBOM)으로 목록을 좁힙니다. 유형은 그 스캔이 무엇을 대상으로 삼았는지에서 정하고, 그것으로 갈리지 않는 경우에만 SBOM이 선언한 최상위 컴포넌트를 봅니다. 공급사가 보낸 SBOM을 분석한 스캔은 그 문서의 최상위가 대개 응용 프로그램이어서 소스로 보이던 것이 이제 SBOM으로 표시됩니다. 요약 카드 세 개가 전체 스캔 수, 위험 주의 건수(그 카드를 누르면 위험 항목만 필터됨), 프로젝트 수를 보여줍니다. 표는 스캔, 생성 시각, 컴포넌트, 최고 심각도로 정렬됩니다. 행을 클릭하면 결과를 다시 열고, 삭제하면 확인 창을 거쳐 그 하위 폴더가 제거됩니다. 파일이 디스크에서 지워지고 복구할 사본이 남지 않기 때문에 먼저 확인을 받습니다. 계정이나 데이터베이스 없이 로컬 파일만 사용합니다.
 
 ## 참고
 
diff --git a/docs/reference/ui.md b/docs/reference/ui.md
index 7c05a4e3..42121869 100644
--- a/docs/reference/ui.md
+++ b/docs/reference/ui.md
@@ -122,7 +122,7 @@ That section also shows an AI compliance profile card: a one-glance rollup of th
 
 ## Scan management
 
-The home screen — opened from the rail's Scan management link, the logo, or the top bar's Scan management (clock) menu — lists every past scan saved on this machine. Each scan's `{Project}_{Version}/` subfolder under the output base is one entry. A search box and scan-type filter chips (only the types that exist — Source, Container, RootFS, Firmware, AI model, SBOM) narrow the list. The type comes from what the scan was pointed at and, where that leaves it open, from the root component the SBOM declares — an analyzed supplier document reads as SBOM rather than as the Source its root usually claims to be. Three summary cards show the total scans, how many are at risk (click that card to filter to them), and the project count. The table sorts by scan, generated time, components or top severity. Click a row to re-open its results, or delete one to remove its subfolder. This is local files only — no account, no database.
+The home screen — opened from the rail's Scan management link, the logo, or the top bar's Scan management (clock) menu — lists every past scan saved on this machine. Each scan's `{Project}_{Version}/` subfolder under the output base is one entry. A search box and scan-type filter chips (only the types that exist — Source, Container, RootFS, Firmware, AI model, SBOM) narrow the list. The type comes from what the scan was pointed at and, where that leaves it open, from the root component the SBOM declares — an analyzed supplier document reads as SBOM rather than as the Source its root usually claims to be. Three summary cards show the total scans, how many are at risk (click that card to filter to them), and the project count. The table sorts by scan, generated time, components or top severity. Click a row to re-open its results, or delete one to remove its subfolder — a prompt confirms first, because the files are removed from disk and nothing is kept to restore. This is local files only — no account, no database.
 
 ## Notes