@hienlh/ppm 0.18.4 → 0.18.5

package/src/web/app.tsx

@@ -35,6 +35,7 @@ import { ExtensionQuickPick } from "@/components/extensions/extension-quickpick"
 import { ExtensionInputBox } from "@/components/extensions/extension-inputbox";
 import { useExtensionWs } from "@/hooks/use-extension-ws";
 import { useIsMobile } from "@/hooks/use-is-mobile";
+import { UploadProgressPanel } from "@/components/os-explorer/upload/upload-progress-panel";
 import { cn } from "@/lib/utils";
 
 // Lazy: the explorer feature (views, actions, skins, icon map) is the same heavy bundle the
@@ -366,6 +367,9 @@ export function App() {
         {/* Connection lost overlay — shown when API unreachable for >15s */}
         <ConnectionLostOverlay />
 
+        {/* Explorer upload progress — bottom-right card (desktop) or pill + sheet (mobile) */}
+        <UploadProgressPanel />
+
         {/* Toast notifications. Bottom-left collides with the mobile dock's
             terminal toolbar — a toast lands directly on the buttons that raised
             it — so phones get them out of the thumb zone instead. */}

package/src/web/components/os-explorer/actions/collision-prompt-queue.ts

@@ -0,0 +1,133 @@
+/**
+ * Pure serializing queue behind the collision-prompt dialog.
+ *
+ * Uploads and copy/move transfers both call `ctx.resolve()` — sometimes from several jobs
+ * running at once (`uploadEntries`' bounded-concurrency queue). Before this module, the
+ * dialog was a single React state slot: the second concurrent `resolve()` call silently
+ * replaced whichever request was already showing, and the first job's promise never
+ * settled — the queue stalled forever with a stuck "Uploading…" toast.
+ *
+ * Every request now queues here and only one shows at a time. "Apply to all" (set from the
+ * dialog when a choice is made) short-circuits every request still queued *in the same
+ * batch* without opening another prompt — see `startBatch`/`endBatch`.
+ *
+ * Pure and DOM-free on purpose, like `upload-queue.ts`: `use-collision-prompt.ts` is the
+ * thin React hook wrapping this for re-render notifications.
+ */
+
+export interface CollisionRequest {
+  name: string;
+  destination: string;
+}
+
+export type CollisionChoice = "replace" | "keep-both" | "skip";
+
+interface QueueItem {
+  request: CollisionRequest;
+  settle(choice: CollisionChoice): void;
+}
+
+export interface CollisionQueueSnapshot {
+  request: CollisionRequest;
+  /** How many more requests are queued behind this one — the dialog's "…and N more". */
+  remaining: number;
+}
+
+export interface QueueSnapshot<TRequest> {
+  request: TRequest;
+  remaining: number;
+}
+
+/**
+ * Generic one-at-a-time prompt queue: every `request()` call queues behind whatever is
+ * already showing, `snapshot()` exposes only the head, and `choose()` answers it and
+ * advances. Reused by anything that needs a single dialog serialized across concurrent
+ * callers — `CollisionPromptQueue` below layers "apply to all" sticky choices on top of one
+ * of these for collisions; the rarer permanent-overwrite confirm (no sticky concept needed)
+ * uses one directly via `use-permanent-overwrite-prompt.ts`. Both prompts used to be a bare
+ * `useState` slot each, with the same "second concurrent caller overwrites the first" race.
+ */
+export class SerialPromptQueue<TRequest, TChoice> {
+  private queue: Array<{ request: TRequest; settle(choice: TChoice): void }> = [];
+
+  /** Called whenever the queue or the visible request changes, so a React wrapper can
+   *  re-render. Never called synchronously from inside the constructor. */
+  constructor(private readonly onChange: () => void) {}
+
+  request(request: TRequest): Promise<TChoice> {
+    return new Promise((resolve) => {
+      this.queue.push({ request, settle: resolve });
+      this.onChange();
+    });
+  }
+
+  snapshot(): QueueSnapshot<TRequest> | null {
+    const head = this.queue[0];
+    return head ? { request: head.request, remaining: this.queue.length - 1 } : null;
+  }
+
+  /** Answers the head request (if any) with `choice` and advances to the next. */
+  choose(choice: TChoice): void {
+    const item = this.queue.shift();
+    if (!item) return;
+    item.settle(choice);
+    this.onChange();
+  }
+
+  /** Removes and answers every request currently queued (including the head) with the same
+   *  `choice` — how "apply to all" resolves the rest of a batch in one step. */
+  drain(choice: TChoice): void {
+    const rest = this.queue.splice(0);
+    if (rest.length === 0) return;
+    for (const item of rest) item.settle(choice);
+    this.onChange();
+  }
+}
+
+export class CollisionPromptQueue {
+  private readonly core: SerialPromptQueue<CollisionRequest, CollisionChoice>;
+  private stickyChoice: CollisionChoice | null = null;
+  private activeBatches = 0;
+
+  constructor(onChange: () => void) {
+    this.core = new SerialPromptQueue(onChange);
+  }
+
+  /**
+   * Marks the start of one batch of parallel `resolve()` calls that should share a single
+   * "apply to all" choice (one drop, one paste, one drag). Batches can overlap (a paste
+   * started while a drag is still resolving); "apply to all" only resets once every
+   * overlapping batch has called `endBatch`.
+   */
+  startBatch(): void {
+    this.activeBatches++;
+  }
+
+  endBatch(): void {
+    this.activeBatches = Math.max(0, this.activeBatches - 1);
+    if (this.activeBatches === 0) this.stickyChoice = null;
+  }
+
+  /** Raises one collision. Resolves immediately (no dialog) if a prior "apply to all" choice
+   *  is still sticky for the current batch; otherwise queues behind whatever is showing. */
+  request(request: CollisionRequest): Promise<CollisionChoice> {
+    if (this.stickyChoice) return Promise.resolve(this.stickyChoice);
+    return this.core.request(request);
+  }
+
+  /** The request currently on screen, or `null` when nothing is queued. */
+  snapshot(): CollisionQueueSnapshot | null {
+    return this.core.snapshot();
+  }
+
+  /** Answers the request on screen. When `applyToAll` is set, the choice also settles every
+   *  request still queued right now, and sticks for any that arrive before the batch ends. */
+  choose(choice: CollisionChoice, applyToAll: boolean): void {
+    if (applyToAll) {
+      this.stickyChoice = choice;
+      this.core.drain(choice);
+    } else {
+      this.core.choose(choice);
+    }
+  }
+}

package/src/web/components/os-explorer/actions/explorer-actions-clipboard.ts

@@ -33,6 +33,13 @@ export interface TransferContext {
    * delete would contradict what the user just agreed to. Returning false skips the item.
    */
   confirmPermanentOverwrite(name: string): Promise<boolean>;
+  /**
+   * Brackets one batch of parallel `resolve()` calls sharing this context's collision prompt
+   * (one paste, one drag, one upload), so "Apply to all" scopes to just that batch. Optional —
+   * a caller with no concurrent collisions (or a test building a bare context) can omit them.
+   */
+  startBatch?(): void;
+  endBatch?(): void;
 }
 
 export interface TransferResult {
@@ -56,6 +63,28 @@ export async function transfer(
   const result: TransferResult = { succeeded: 0, skipped: 0, failed: 0 };
   const touched = new Set<string>([dstDir]);
 
+  // `transfer()` itself resolves collisions one source at a time, but two *calls* to it can
+  // overlap (a paste fired while a drag-drop transfer is still resolving) sharing the same
+  // dialog — bracket this call so "Apply to all" only ever covers its own sources.
+  ctx.startBatch?.();
+  try {
+    await transferSources(sources, dstDir, op, ctx, result, touched);
+  } finally {
+    ctx.endBatch?.();
+  }
+
+  fsChanged(...touched);
+  return result;
+}
+
+async function transferSources(
+  sources: string[],
+  dstDir: string,
+  op: "copy" | "move",
+  ctx: TransferContext,
+  result: TransferResult,
+  touched: Set<string>,
+): Promise<void> {
   for (const source of sources) {
     const name = source.split(/[/\\]/).filter(Boolean).pop() ?? source;
     const sourceDir = dirnameOf(source, ctx.sep);
@@ -155,9 +184,6 @@ export async function transfer(
       toast.error(`${name} was removed but the replacement could not be written`, { description: errorDescription(e) });
     }
   }
-
-  fsChanged(...touched);
-  return result;
 }
 
 /** Put absolute paths on the shared clipboard. `origin` lets the tree keep its own routes. */

package/src/web/components/os-explorer/actions/explorer-actions-upload.ts

@@ -2,16 +2,23 @@
  * Turns a dropped/picked file batch into `PUT /api/fs/upload` calls, streamed through
  * `uploadFileXhr` with bounded concurrency. Mirrors `transfer()` in
  * `explorer-actions-clipboard.ts`: the same collision prompt (`ctx.resolve`), the same
- * trash-first "Replace" via the 409 `EEXIST` contract, and a `fsChanged` refresh once the
- * batch settles — drag-to-upload and the picker both funnel through this one function.
+ * trash-first "Replace" (delete via `/api/fs/delete`, then upload) and a `fsChanged` refresh
+ * once the batch settles — drag-to-upload and the picker both funnel through this one
+ * function.
+ *
+ * Per-file state lives in `upload-store.ts`, which backs the persistent progress panel that
+ * replaced the old "Uploading N files… NN%" toast — that toast had no room for a cancel
+ * button or per-file outcomes, and its single collision-dialog slot is the bug this module
+ * used to have (see `use-collision-prompt.ts`).
  */
 
-import { toast } from "sonner";
-import { FsError } from "@/lib/fs-api";
+import { fsApi, FsError } from "@/lib/fs-api";
 import { uploadFileXhr } from "@/lib/fs-upload-xhr";
 import { dirnameOf, joinPath } from "../format-file-meta";
 import { fsChanged } from "../explorer-store";
 import type { DroppedEntry } from "../upload/collect-dropped-entries";
+import { describeUploadError } from "../upload/upload-error-message";
+import { useUploadStore } from "../upload/upload-store";
 import { runUploadQueue, type UploadJob } from "../upload/upload-queue";
 import type { TransferContext } from "./explorer-actions-clipboard";
 import { freeName } from "./explorer-actions-transfer-helpers";
@@ -35,34 +42,42 @@ async function uploadResolvingCollisions(
   dstDir: string,
   sep: string,
   ctx: TransferContext,
+  signal: AbortSignal,
   onProgress: (bytesLoaded: number) => void,
-): Promise<void> {
+): Promise<"done" | "skipped"> {
   const destination = destinationFor(dstDir, entry.relativePath, sep);
   try {
-    await uploadFileXhr(destination, entry.file, false, (p) => onProgress(p.loaded));
-    return;
+    await uploadFileXhr(destination, entry.file, false, (p) => onProgress(p.loaded), signal);
+    return "done";
   } catch (e) {
     if (!(e instanceof FsError) || e.code !== "EEXIST") throw e;
   }
 
   const name = nameOf(entry.relativePath);
   const choice = await ctx.resolve({ name, destination });
-  if (choice === "skip") return;
+  if (choice === "skip") return "skipped";
   if (choice === "keep-both") {
     const containingDir = dirnameOf(destination, sep);
     const alternative = await freeName(containingDir, name, sep);
     if (!alternative) throw new Error("No free name available");
-    await uploadFileXhr(joinPath(containingDir, alternative, sep), entry.file, false, (p) => onProgress(p.loaded));
-    return;
+    await uploadFileXhr(joinPath(containingDir, alternative, sep), entry.file, false, (p) => onProgress(p.loaded), signal);
+    return "done";
   }
-  // Replace: the server upload route itself makes the overwrite atomic (tmp file + rename),
-  // so unlike the copy/move `transfer()` there is no separate trash-then-write step here.
-  await uploadFileXhr(destination, entry.file, true, (p) => onProgress(p.loaded));
-}
 
-function uploadLabel(entries: DroppedEntry[], fraction: number): string {
-  const label = entries.length === 1 ? entries[0]!.file.name : `${entries.length} files`;
-  return `Uploading ${label}… ${Math.round(fraction * 100)}%`;
+  // Replace: trash the existing entry first, same as copy/move's `transfer()` — the dialog's
+  // "moves the existing item to the Trash first" copy has to hold for every caller of it.
+  try {
+    await fsApi.remove(destination, false);
+  } catch (e) {
+    if (!(e instanceof FsError) || e.code !== "NO_TRASH") throw e;
+    // No trash backend on this host — ask before doing something permanent instead of
+    // silently downgrading to it (mirrors `transfer()`'s own NO_TRASH handling).
+    const proceed = await ctx.confirmPermanentOverwrite(name);
+    if (!proceed) return "skipped";
+    await fsApi.remove(destination, true);
+  }
+  await uploadFileXhr(destination, entry.file, true, (p) => onProgress(p.loaded), signal);
+  return "done";
 }
 
 export async function uploadEntries(
@@ -73,24 +88,64 @@ export async function uploadEntries(
 ): Promise<void> {
   if (entries.length === 0) return;
 
-  const toastId = toast.loading(uploadLabel(entries, 0));
-  const jobs: UploadJob<void>[] = entries.map((entry, index) => ({
-    id: String(index),
-    size: entry.file.size,
-    run: (onProgress) => uploadResolvingCollisions(entry, dstDir, sep, ctx, onProgress),
-  }));
+  const batchId = crypto.randomUUID();
+  const store = useUploadStore.getState();
+  store.addBatch(
+    batchId,
+    dstDir,
+    entries.map((entry, index) => ({
+      id: String(index),
+      name: nameOf(entry.relativePath),
+      relativePath: entry.relativePath,
+      size: entry.file.size,
+    })),
+  );
 
-  const results = await runUploadQueue(jobs, CONCURRENCY, (progress) => {
-    const fraction = progress.bytesTotal > 0 ? progress.bytesLoaded / progress.bytesTotal : 0;
-    toast.loading(uploadLabel(entries, fraction), { id: toastId });
+  const controllers = entries.map((_, index) => {
+    const controller = new AbortController();
+    store.registerCanceller(batchId, String(index), () => controller.abort());
+    return controller;
   });
 
-  fsChanged(dstDir);
-  const succeeded = results.filter((r) => r.ok).length;
-  const failed = results.length - succeeded;
-  if (failed === 0) {
-    toast.success(`Uploaded ${succeeded} item${succeeded === 1 ? "" : "s"}`, { id: toastId });
-  } else {
-    toast.error(`Uploaded ${succeeded}, ${failed} failed`, { id: toastId });
+  // Serializes this batch's collision prompts through the shared queue (see
+  // `use-collision-prompt.ts`) and scopes "Apply to all" to just these entries.
+  ctx.startBatch?.();
+  try {
+    const jobs: UploadJob<void>[] = entries.map((entry, index) => {
+      const id = String(index);
+      const controller = controllers[index]!;
+      return {
+        id,
+        size: entry.file.size,
+        run: async (onProgress) => {
+          if (controller.signal.aborted) {
+            store.setItemState(batchId, id, "cancelled");
+            throw new DOMException("Upload aborted", "AbortError");
+          }
+          store.setItemState(batchId, id, "uploading");
+          try {
+            const outcome = await uploadResolvingCollisions(
+              entry, dstDir, sep, ctx, controller.signal,
+              (loaded) => {
+                onProgress(loaded);
+                store.setItemProgress(batchId, id, loaded);
+              },
+            );
+            store.setItemState(batchId, id, outcome === "skipped" ? "skipped" : "done");
+          } catch (e) {
+            const cancelled = e instanceof DOMException && e.name === "AbortError";
+            store.setItemState(batchId, id, cancelled ? "cancelled" : "failed", cancelled ? undefined : describeUploadError(e));
+            throw e;
+          }
+        },
+      };
+    });
+
+    // The aggregate progress callback is unused here — the panel reads per-item state
+    // straight from the store, updated above as each job settles.
+    await runUploadQueue(jobs, CONCURRENCY, () => {});
+  } finally {
+    ctx.endBatch?.();
+    fsChanged(dstDir);
   }
 }

package/src/web/components/os-explorer/actions/use-collision-prompt.ts

@@ -0,0 +1,56 @@
+/**
+ * React wrapper around `CollisionPromptQueue`. Owns one queue instance per window/surface
+ * (`use-explorer-actions.ts` and `use-drop-transfer.tsx` each hold their own), exposing the
+ * dialog-facing state plus the `resolve`/`startBatch`/`endBatch` trio that `TransferContext`
+ * plugs into `transfer()` and `uploadEntries()`.
+ */
+
+import { useMemo, useRef, useState } from "react";
+import { CollisionPromptQueue, type CollisionChoice, type CollisionRequest } from "./collision-prompt-queue";
+
+export interface CollisionPromptState extends CollisionRequest {
+  /** How many more collisions are queued behind this one. */
+  remaining: number;
+  applyToAll: boolean;
+  setApplyToAll(value: boolean): void;
+  resolve(choice: CollisionChoice): void;
+}
+
+export interface CollisionPrompt {
+  /** Render-ready state for the dialog, or `null` when nothing is queued. */
+  state: CollisionPromptState | null;
+  resolve(request: CollisionRequest): Promise<CollisionChoice>;
+  startBatch(): void;
+  endBatch(): void;
+}
+
+export function useCollisionPrompt(): CollisionPrompt {
+  const [tick, setTick] = useState(0);
+  const [applyToAll, setApplyToAll] = useState(false);
+  const queueRef = useRef<CollisionPromptQueue | null>(null);
+  if (!queueRef.current) {
+    queueRef.current = new CollisionPromptQueue(() => setTick((n) => n + 1));
+  }
+  const queue = queueRef.current;
+
+  return useMemo(() => {
+    const snapshot = queue.snapshot();
+    return {
+      state: snapshot && {
+        ...snapshot.request,
+        remaining: snapshot.remaining,
+        applyToAll,
+        setApplyToAll,
+        resolve: (choice) => {
+          queue.choose(choice, applyToAll);
+          setApplyToAll(false);
+        },
+      },
+      resolve: (request) => queue.request(request),
+      startBatch: () => queue.startBatch(),
+      endBatch: () => queue.endBatch(),
+    };
+    // `tick` has no direct use below — it exists purely to force this memo to recompute
+    // whenever the queue notifies of a change (new request queued, or one resolved).
+  }, [queue, applyToAll, tick]);
+}

package/src/web/components/os-explorer/actions/use-explorer-actions.ts

@@ -1,10 +1,8 @@
 /**
- * Binds the action modules to one window's slice and owns the state of the three
- * interruptions they need: the collision prompt, the permanent-delete confirmation and
- * the properties dialog.
- *
- * Prompts are modelled as promises resolved by the dialog, so the action modules stay
- * plain async functions with no React inside them.
+ * Binds the action modules to one window's slice and owns the state of its interruptions:
+ * the collision prompt (`use-collision-prompt.ts`), the permanent-delete confirmation and the
+ * properties dialog. Prompts are modelled as promises resolved by the dialog, so the action
+ * modules stay plain async functions with no React inside them.
  */
 
 import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
@@ -15,12 +13,11 @@ import { useExplorerPinsStore } from "../explorer-pins-store";
 import { useExplorerStore, type ExplorerSlice } from "../explorer-store";
 import type { ExplorerNavigation } from "../use-explorer-navigation";
 import { copyTextLines, downloadEntries, openEntryInPpm, openPathInNewWindow } from "./explorer-actions-open";
-import {
-  pasteInto, setClipboardPaths, transfer,
-  type CollisionChoice, type CollisionRequest,
-} from "./explorer-actions-clipboard";
+import { pasteInto, setClipboardPaths, transfer } from "./explorer-actions-clipboard";
 import { createEntry, deleteEntries, renameEntry, validateEntryName } from "./explorer-actions-mutate";
 import { useExplorerUploadActions } from "./use-explorer-upload-actions";
+import { useCollisionPrompt, type CollisionPromptState } from "./use-collision-prompt";
+import { usePermanentOverwritePrompt, type PermanentOverwritePromptState } from "./use-permanent-overwrite-prompt";
 import type { DroppedEntry } from "../upload/collect-dropped-entries";
 
 export interface ExplorerActions {
@@ -52,10 +49,10 @@ export interface ExplorerActions {
 }
 
 export interface ExplorerDialogState {
-  collision: (CollisionRequest & { resolve(choice: CollisionChoice): void }) | null;
+  collision: CollisionPromptState | null;
   pendingDelete: { paths: string[]; names: string[] } | null;
   /** "Replace" hit a host with no trash backend — confirm a permanent overwrite instead. */
-  permanentOverwrite: { name: string; resolve(proceed: boolean): void } | null;
+  permanentOverwrite: PermanentOverwritePromptState | null;
   properties: FsEntry | null;
   inlineError: string | null;
   closeDelete(): void;
@@ -72,43 +69,31 @@ export function useExplorerActions(
   platform: string | undefined,
 ): { actions: ExplorerActions; dialogs: ExplorerDialogState } {
   const patch = useExplorerStore((s) => s.patch);
-  const [collision, setCollision] = useState<ExplorerDialogState["collision"]>(null);
+  const collisionPrompt = useCollisionPrompt();
+  const permanentOverwritePrompt = usePermanentOverwritePrompt();
   const [pendingDelete, setPendingDelete] = useState<ExplorerDialogState["pendingDelete"]>(null);
-  const [permanentOverwrite, setPermanentOverwrite] = useState<ExplorerDialogState["permanentOverwrite"]>(null);
   const [properties, setProperties] = useState<FsEntry | null>(null);
   const [inlineError, setInlineError] = useState<string | null>(null);
 
   const sliceRef = useRef(slice);
   sliceRef.current = slice;
 
-  const context = useMemo(
-    () => ({
-      get sep() {
-        return sliceRef.current?.sep ?? "/";
-      },
-      resolve: (request: CollisionRequest) =>
-        new Promise<CollisionChoice>((resolve) => {
-          setCollision({
-            ...request,
-            resolve: (choice) => {
-              setCollision(null);
-              resolve(choice);
-            },
-          });
-        }),
-      confirmPermanentOverwrite: (name: string) =>
-        new Promise<boolean>((resolve) => {
-          setPermanentOverwrite({
-            name,
-            resolve: (proceed) => {
-              setPermanentOverwrite(null);
-              resolve(proceed);
-            },
-          });
-        }),
-    }),
-    [],
-  );
+  // Read through refs so `context` keeps a stable identity ([]-deps) even though both
+  // prompts' own functions change identity on every queued/resolved request.
+  const collisionPromptRef = useRef(collisionPrompt);
+  collisionPromptRef.current = collisionPrompt;
+  const permanentOverwritePromptRef = useRef(permanentOverwritePrompt);
+  permanentOverwritePromptRef.current = permanentOverwritePrompt;
+
+  const context = useMemo(() => ({
+    get sep() {
+      return sliceRef.current?.sep ?? "/";
+    },
+    resolve: (request: Parameters<typeof collisionPrompt.resolve>[0]) => collisionPromptRef.current.resolve(request),
+    startBatch: () => collisionPromptRef.current.startBatch(),
+    endBatch: () => collisionPromptRef.current.endBatch(),
+    confirmPermanentOverwrite: (name: string) => permanentOverwritePromptRef.current.confirm(name),
+  }), []);
 
   const currentDir = () => sliceRef.current?.path ?? "";
   const upload = useExplorerUploadActions(context, currentDir);
@@ -212,9 +197,9 @@ export function useExplorerActions(
   return {
     actions,
     dialogs: {
-      collision,
+      collision: collisionPrompt.state,
       pendingDelete,
-      permanentOverwrite,
+      permanentOverwrite: permanentOverwritePrompt.state,
       properties,
       inlineError,
       closeDelete: () => setPendingDelete(null),

package/src/web/components/os-explorer/actions/use-permanent-overwrite-prompt.ts

@@ -0,0 +1,47 @@
+/**
+ * Serializes the "no Trash on this host" confirm (`ctx.confirmPermanentOverwrite`) behind the
+ * same one-at-a-time queue as the collision prompt (`SerialPromptQueue`, see
+ * `collision-prompt-queue.ts`). This confirm used to be its own bare `useState` slot with the
+ * exact same race: a Replace that hits `NO_TRASH` on two concurrent jobs could have the second
+ * call silently overwrite the first's dialog, leaving the first job's promise unresolved
+ * forever. No "apply to all" here — it is a much rarer prompt than a name collision, so a
+ * plain FIFO queue is all it needs.
+ */
+
+import { useMemo, useRef, useState } from "react";
+import { SerialPromptQueue } from "./collision-prompt-queue";
+
+export interface PermanentOverwritePromptState {
+  name: string;
+  /** How many more confirms are queued behind this one. */
+  remaining: number;
+  resolve(proceed: boolean): void;
+}
+
+export interface PermanentOverwritePrompt {
+  state: PermanentOverwritePromptState | null;
+  confirm(name: string): Promise<boolean>;
+}
+
+export function usePermanentOverwritePrompt(): PermanentOverwritePrompt {
+  const [tick, setTick] = useState(0);
+  const queueRef = useRef<SerialPromptQueue<string, boolean> | null>(null);
+  if (!queueRef.current) {
+    queueRef.current = new SerialPromptQueue(() => setTick((n) => n + 1));
+  }
+  const queue = queueRef.current;
+
+  return useMemo(() => {
+    const snapshot = queue.snapshot();
+    return {
+      state: snapshot && {
+        name: snapshot.request,
+        remaining: snapshot.remaining,
+        resolve: (proceed) => queue.choose(proceed),
+      },
+      confirm: (name) => queue.request(name),
+    };
+    // `tick` has no direct use below — it forces this memo to recompute whenever the queue
+    // notifies of a change (new confirm queued, or one resolved).
+  }, [queue, tick]);
+}