@hienlh/ppm 0.18.4 → 0.18.6

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]);
+}

package/src/web/components/os-explorer/dnd/use-drop-transfer.tsx

@@ -8,10 +8,11 @@
  * only the promise wiring is local — so a collision looks identical wherever the drop landed.
  */
 
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import type { CollisionChoice, CollisionRequest, TransferContext } from "../actions/explorer-actions-clipboard";
+import { useEffect, useMemo, useRef, type ReactNode } from "react";
+import type { TransferContext } from "../actions/explorer-actions-clipboard";
 import { uploadEntries } from "../actions/explorer-actions-upload";
-import type { ExplorerDialogState } from "../actions/use-explorer-actions";
+import { useCollisionPrompt } from "../actions/use-collision-prompt";
+import { usePermanentOverwritePrompt } from "../actions/use-permanent-overwrite-prompt";
 import { ExplorerDialogs } from "../explorer-dialogs";
 import type { DroppedEntry } from "../upload/collect-dropped-entries";
 import { transferRunner, type DropRunner } from "./entry-drop-executor";
@@ -25,8 +26,8 @@ export interface DropTransfer {
 }
 
 export function useDropTransfer(sep: string, platform?: string): DropTransfer {
-  const [collision, setCollision] = useState<ExplorerDialogState["collision"]>(null);
-  const [permanentOverwrite, setPermanentOverwrite] = useState<ExplorerDialogState["permanentOverwrite"]>(null);
+  const collisionPrompt = useCollisionPrompt();
+  const permanentOverwritePrompt = usePermanentOverwritePrompt();
 
   // The separator can change under a long-lived surface (the tree follows the active
   // project), so the context reads it live rather than closing over the first value.
@@ -34,31 +35,22 @@ export function useDropTransfer(sep: string, platform?: string): DropTransfer {
   const sepRef = useRef(sep);
   useEffect(() => { sepRef.current = sep; }, [sep]);
 
+  // Read through refs so `context`'s identity stays stable across renders — see the same
+  // pattern in `use-explorer-actions.ts`.
+  const collisionPromptRef = useRef(collisionPrompt);
+  collisionPromptRef.current = collisionPrompt;
+  const permanentOverwritePromptRef = useRef(permanentOverwritePrompt);
+  permanentOverwritePromptRef.current = permanentOverwritePrompt;
+
   const context = useMemo<TransferContext>(
     () => ({
       get sep() {
         return sepRef.current;
       },
-      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);
-            },
-          });
-        }),
+      resolve: (request) => collisionPromptRef.current.resolve(request),
+      startBatch: () => collisionPromptRef.current.startBatch(),
+      endBatch: () => collisionPromptRef.current.endBatch(),
+      confirmPermanentOverwrite: (name: string) => permanentOverwritePromptRef.current.confirm(name),
     }),
     [],
   );
@@ -72,8 +64,8 @@ export function useDropTransfer(sep: string, platform?: string): DropTransfer {
   const prompts = (
     <ExplorerDialogs
       dialogs={{
-        collision,
-        permanentOverwrite,
+        collision: collisionPrompt.state,
+        permanentOverwrite: permanentOverwritePrompt.state,
         pendingDelete: null,
         properties: null,
         inlineError: null,

package/src/web/components/os-explorer/explorer-dialogs.tsx

@@ -31,7 +31,7 @@ export function ExplorerDialogs({ dialogs, platform, sep }: ExplorerDialogsProps
           // Dismissing without choosing must not silently overwrite anything.
           onClose={() => collision.resolve("skip")}
           title="An item with that name already exists"
-          description={collision.name}
+          description={collision.remaining > 0 ? `${collision.name} — and ${collision.remaining} more` : collision.name}
           footer={
             <>
               <Button variant="outline" onClick={() => collision.resolve("skip")}>Skip</Button>
@@ -44,6 +44,17 @@ export function ExplorerDialogs({ dialogs, platform, sep }: ExplorerDialogsProps
             Replacing moves the existing item to the Trash first, so it stays recoverable.
             Keep both adds a numbered suffix.
           </p>
+          {collision.remaining > 0 && (
+            <label className="flex min-h-11 items-center gap-2 text-sm text-text-2">
+              <input
+                type="checkbox"
+                className="size-4"
+                checked={collision.applyToAll}
+                onChange={(e) => collision.setApplyToAll(e.target.checked)}
+              />
+              Apply to all {collision.remaining} remaining item{collision.remaining === 1 ? "" : "s"}
+            </label>
+          )}
         </ExplorerModalShell>
       )}
 

package/src/web/components/os-explorer/upload/capture-picked-files.ts

@@ -0,0 +1,18 @@
+/**
+ * Pulls every file out of a (possibly live) `FileList`-shaped object into a plain array,
+ * BEFORE the caller resets the `<input>`'s value. Some Chromium versions empty the input's
+ * *live* `FileList` the instant `value` is reset, so calling `resetInput` first silently
+ * drops every picked file — this ordering is the one thing that must never be inlined and
+ * reshuffled, hence its own pure, unit-testable function.
+ */
+
+export interface PickableFileList {
+  length: number;
+  item(index: number): File | null;
+}
+
+export function capturePickedFiles(list: PickableFileList | null, resetInput: () => void): File[] {
+  const files = list ? Array.from({ length: list.length }, (_, i) => list.item(i)).filter((f): f is File => f != null) : [];
+  resetInput();
+  return files;
+}

package/src/web/components/os-explorer/upload/upload-batch-card.tsx

@@ -0,0 +1,64 @@
+/**
+ * One batch's contents: header (destination + overall progress + Cancel all/Close) and the
+ * per-file rows. Shared by the desktop floating card and the mobile sheet — only the outer
+ * chrome differs between them (see `upload-progress-panel.tsx`).
+ */
+
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { summarizeBatch } from "./upload-batch-progress";
+import { UploadBatchRow } from "./upload-batch-row";
+import type { UploadBatch } from "./upload-store";
+import { useUploadStore } from "./upload-store";
+
+function formatMb(bytes: number): string {
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export interface UploadBatchCardProps {
+  batch: UploadBatch;
+}
+
+export function UploadBatchCard({ batch }: UploadBatchCardProps) {
+  const cancelItem = useUploadStore((s) => s.cancelItem);
+  const cancelBatch = useUploadStore((s) => s.cancelBatch);
+  const dismissBatch = useUploadStore((s) => s.dismissBatch);
+  const summary = summarizeBatch(batch.items);
+  const settled = batch.settled;
+  const pct = summary.bytesTotal > 0 ? Math.round((summary.bytesLoaded / summary.bytesTotal) * 100) : 0;
+
+  return (
+    <div className="w-full overflow-hidden rounded-lg border border-border bg-panel shadow-lg" data-testid="upload-batch-card">
+      <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-text">
+            {settled
+              ? `${summary.doneCount}/${summary.totalCount} uploaded${summary.failedCount > 0 ? `, ${summary.failedCount} failed` : ""}`
+              : `Uploading ${summary.totalCount} item${summary.totalCount === 1 ? "" : "s"}… ${pct}%`}
+          </p>
+          <p className="truncate text-xs text-text-2">{formatMb(summary.bytesLoaded)} / {formatMb(summary.bytesTotal)}</p>
+        </div>
+        {settled ? (
+          <Button variant="ghost" size="sm" className="h-11 shrink-0" onClick={() => dismissBatch(batch.id)}>
+            Close
+          </Button>
+        ) : (
+          <button
+            type="button"
+            aria-label="Cancel all"
+            onClick={() => cancelBatch(batch.id)}
+            className="flex size-11 shrink-0 items-center justify-center rounded-md can-hover:hover:bg-surface-elevated"
+          >
+            <X className="size-4 text-text-2" />
+          </button>
+        )}
+      </div>
+
+      <div className="max-h-64 divide-y divide-border overflow-y-auto">
+        {batch.items.map((item) => (
+          <UploadBatchRow key={item.id} item={item} onCancel={() => cancelItem(batch.id, item.id)} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/web/components/os-explorer/upload/upload-batch-progress.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure aggregation over one batch's items — overall bytes and counts for the panel header.
+ * Split out of the store/UI so the arithmetic (weighting in-flight bytes, treating "skipped"
+ * as complete) is unit-testable without zustand or a browser.
+ */
+
+import type { UploadItem } from "./upload-store";
+
+export interface BatchProgressSummary {
+  bytesLoaded: number;
+  bytesTotal: number;
+  /** Uploaded or intentionally skipped — both count toward "how much of the batch is over". */
+  doneCount: number;
+  failedCount: number;
+  totalCount: number;
+}
+
+export function summarizeBatch(items: UploadItem[]): BatchProgressSummary {
+  let bytesLoaded = 0;
+  let bytesTotal = 0;
+  let doneCount = 0;
+  let failedCount = 0;
+
+  for (const item of items) {
+    bytesTotal += item.size;
+    bytesLoaded += item.state === "done" || item.state === "skipped"
+      ? item.size
+      : Math.min(item.bytesLoaded, item.size);
+    if (item.state === "done" || item.state === "skipped") doneCount++;
+    if (item.state === "failed" || item.state === "cancelled") failedCount++;
+  }
+
+  return { bytesLoaded, bytesTotal, doneCount, failedCount, totalCount: items.length };
+}

package/src/web/components/os-explorer/upload/upload-batch-row.tsx

@@ -0,0 +1,79 @@
+/**
+ * One file row inside the upload progress panel/sheet: name, relative path, size, progress
+ * bar, state, and a per-row Cancel while it is still queued/uploading.
+ */
+
+import { AlertTriangle, Check, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { UploadItem } from "./upload-store";
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+export interface UploadBatchRowProps {
+  item: UploadItem;
+  onCancel(): void;
+}
+
+export function UploadBatchRow({ item, onCancel }: UploadBatchRowProps) {
+  const pct = item.size > 0 ? Math.min(100, Math.round((item.bytesLoaded / item.size) * 100)) : 0;
+  const active = item.state === "queued" || item.state === "uploading";
+  const showsPath = item.relativePath !== item.name;
+
+  return (
+    <div className="flex flex-col gap-1 px-3 py-2" data-testid="upload-row" data-state={item.state}>
+      <div className="flex items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm text-text">{item.name}</p>
+          {showsPath && <p className="truncate text-xs text-text-2">{item.relativePath}</p>}
+        </div>
+        <span className="shrink-0 text-xs text-text-2">{formatBytes(item.size)}</span>
+        {active ? (
+          <button
+            type="button"
+            aria-label={`Cancel ${item.name}`}
+            onClick={onCancel}
+            className="flex size-11 shrink-0 items-center justify-center rounded-md can-hover:hover:bg-surface-elevated"
+          >
+            <X className="size-4 text-text-2" />
+          </button>
+        ) : (
+          <span className="flex size-11 shrink-0 items-center justify-center" aria-label={item.state}>
+            {item.state === "done" && <Check className="size-4 text-success" />}
+            {item.state === "skipped" && <span className="text-xs text-text-2">Skipped</span>}
+            {(item.state === "failed" || item.state === "cancelled") && (
+              <AlertTriangle className="size-4 text-destructive" />
+            )}
+          </span>
+        )}
+      </div>
+
+      {active && (
+        <div className="h-1 w-full overflow-hidden rounded-full bg-surface-elevated">
+          <div
+            className={cn(
+              "h-full rounded-full bg-primary transition-[width]",
+              item.state === "queued" && "w-0 opacity-40",
+            )}
+            style={item.state === "uploading" ? { width: `${pct}%` } : undefined}
+          />
+        </div>
+      )}
+
+      {(item.state === "failed" || item.state === "cancelled") && (
+        <p className="text-xs text-destructive">
+          {item.state === "cancelled" ? "Cancelled" : item.errorMessage ?? "Upload failed"}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/web/components/os-explorer/upload/upload-error-message.ts

@@ -0,0 +1,19 @@
+/**
+ * Turns an upload failure into a short, human row message for the progress panel. A fresh
+ * 409/EEXIST never reaches here — `uploadResolvingCollisions` already resolves that through
+ * the collision prompt before the job can fail.
+ */
+
+import { FsError } from "@/lib/fs-api";
+
+export function describeUploadError(error: unknown): string {
+  if (error instanceof FsError) {
+    if (error.status === 403) return "Not allowed here";
+    // Cloudflare's free-tier request-body cap when the app is reached through a tunnel — a
+    // client-observed HTTP status, not a code PPM's own upload route ever emits itself.
+    if (error.status === 413) return "File too large for the tunnel (100 MB)";
+    return error.message || "Upload failed";
+  }
+  if (error instanceof Error) return "Connection lost";
+  return "Upload failed";
+}

package/src/web/components/os-explorer/upload/upload-progress-panel.tsx

@@ -0,0 +1,72 @@
+/**
+ * Global upload progress surface — mounted once at the app root (`app.tsx`), reading straight
+ * from `upload-store.ts`. Replaces the old "Uploading N files… NN%" toast: desktop gets a
+ * persistent bottom-right card per batch (a normal fixed panel, not a modal — `z-30` keeps it
+ * under the floating-window band's own max of `z-38` and well under Radix's `z-50`); mobile
+ * collapses every batch behind a small pinned pill that opens a bottom sheet, so the keyboard
+ * dock and thumb zone stay clear.
+ */
+
+import { useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { UploadBatchCard } from "./upload-batch-card";
+import { useUploadStore, type UploadBatch } from "./upload-store";
+
+// `useShallow` keeps this selector's returned array reference-stable across renders that
+// don't actually change any batch — the plain `.map().filter()` used before it built a new
+// array identity on every call, and zustand's `useSyncExternalStore` subscription then saw
+// a "changed" snapshot on every single render, looping forever ("Maximum update depth
+// exceeded") the moment any batch existed.
+function useActiveBatches(): UploadBatch[] {
+  return useUploadStore(
+    useShallow((s) => s.order.map((id) => s.batches[id]).filter((b): b is UploadBatch => b != null)),
+  );
+}
+
+export function UploadProgressPanel() {
+  const isMobile = useIsMobile();
+  const batches = useActiveBatches();
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  if (batches.length === 0) return null;
+
+  if (!isMobile) {
+    return (
+      <div
+        className="fixed bottom-4 right-4 z-30 flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
+        data-testid="upload-progress-panel"
+      >
+        {batches.map((batch) => (
+          <UploadBatchCard key={batch.id} batch={batch} />
+        ))}
+      </div>
+    );
+  }
+
+  const uploading = batches.filter((b) => !b.settled).length;
+  const label = uploading > 0
+    ? `Uploading ${batches.reduce((n, b) => n + b.items.length, 0)}…`
+    : "Uploads finished";
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setSheetOpen(true)}
+        data-testid="upload-progress-pill"
+        className="fixed bottom-20 right-3 z-30 flex h-11 items-center gap-2 rounded-full border border-border bg-panel px-4 text-sm text-text shadow-lg"
+      >
+        {label}
+      </button>
+      <BottomSheet open={sheetOpen} onClose={() => setSheetOpen(false)} className="max-h-[70vh] overflow-y-auto p-2">
+        <div className="flex flex-col gap-2 px-2 pb-2">
+          {batches.map((batch) => (
+            <UploadBatchCard key={batch.id} batch={batch} />
+          ))}
+        </div>
+      </BottomSheet>
+    </>
+  );
+}