@hienlh/ppm 0.18.4 → 0.18.5

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

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

@@ -0,0 +1,109 @@
+/**
+ * Global upload progress state — batches of in-flight uploads (a drop or a picker pick), each
+ * with per-file rows. Backs the persistent upload panel that replaced the old
+ * "Uploading N files… NN%" toast, which had no room for per-file outcomes or a cancel button.
+ *
+ * Cancel hooks are kept in a side map (`cancellers`), not on the serializable item/batch
+ * state — an `AbortController.abort` closure has no business living next to plain data a
+ * test might snapshot or log.
+ */
+
+import { create } from "zustand";
+
+export type UploadItemState = "queued" | "uploading" | "done" | "skipped" | "failed" | "cancelled";
+
+export interface UploadItem {
+  id: string;
+  name: string;
+  relativePath: string;
+  size: number;
+  bytesLoaded: number;
+  state: UploadItemState;
+  errorMessage?: string;
+}
+
+export interface UploadBatch {
+  id: string;
+  dstDir: string;
+  items: UploadItem[];
+  /** True once every item has left "queued"/"uploading" — the panel swaps Cancel for Close. */
+  settled: boolean;
+}
+
+type NewUploadItem = Pick<UploadItem, "id" | "name" | "relativePath" | "size">;
+
+function deriveSettled(items: UploadItem[]): boolean {
+  return items.every((i) => i.state !== "queued" && i.state !== "uploading");
+}
+
+interface UploadStoreState {
+  order: string[];
+  batches: Record<string, UploadBatch>;
+  cancellers: Record<string, () => void>;
+
+  addBatch(id: string, dstDir: string, items: NewUploadItem[]): void;
+  registerCanceller(batchId: string, itemId: string, cancel: () => void): void;
+  setItemState(batchId: string, itemId: string, state: UploadItemState, errorMessage?: string): void;
+  setItemProgress(batchId: string, itemId: string, bytesLoaded: number): void;
+  cancelItem(batchId: string, itemId: string): void;
+  cancelBatch(batchId: string): void;
+  dismissBatch(batchId: string): void;
+}
+
+export const useUploadStore = create<UploadStoreState>((set, get) => ({
+  order: [],
+  batches: {},
+  cancellers: {},
+
+  addBatch: (id, dstDir, items) => {
+    const batch: UploadBatch = {
+      id,
+      dstDir,
+      items: items.map((item) => ({ ...item, bytesLoaded: 0, state: "queued" })),
+      settled: false,
+    };
+    set((s) => ({ order: [...s.order, id], batches: { ...s.batches, [id]: batch } }));
+  },
+
+  registerCanceller: (batchId, itemId, cancel) => {
+    set((s) => ({ cancellers: { ...s.cancellers, [`${batchId}:${itemId}`]: cancel } }));
+  },
+
+  setItemState: (batchId, itemId, state, errorMessage) => {
+    set((s) => {
+      const batch = s.batches[batchId];
+      if (!batch) return s;
+      const items = batch.items.map((i) => (i.id === itemId ? { ...i, state, errorMessage } : i));
+      return { batches: { ...s.batches, [batchId]: { ...batch, items, settled: deriveSettled(items) } } };
+    });
+  },
+
+  setItemProgress: (batchId, itemId, bytesLoaded) => {
+    set((s) => {
+      const batch = s.batches[batchId];
+      if (!batch) return s;
+      const items = batch.items.map((i) => (i.id === itemId ? { ...i, bytesLoaded } : i));
+      return { batches: { ...s.batches, [batchId]: { ...batch, items } } };
+    });
+  },
+
+  // Cancelling only ever *asks* the in-flight job to stop (abort the XHR, or skip a queued
+  // job before it starts) — the resulting "cancelled" state is set by the job itself once its
+  // promise actually rejects, not here, so state and reality never disagree.
+  cancelItem: (batchId, itemId) => {
+    get().cancellers[`${batchId}:${itemId}`]?.();
+  },
+
+  cancelBatch: (batchId) => {
+    const batch = get().batches[batchId];
+    if (!batch) return;
+    for (const item of batch.items) get().cancelItem(batchId, item.id);
+  },
+
+  dismissBatch: (batchId) => {
+    set((s) => {
+      const { [batchId]: _removed, ...batches } = s.batches;
+      return { batches, order: s.order.filter((id) => id !== batchId) };
+    });
+  },
+}));

package/src/web/components/os-explorer/upload/use-upload-picker.tsx

@@ -8,6 +8,7 @@
  */
 
 import { useRef, type ChangeEvent, type ReactNode } from "react";
+import { capturePickedFiles } from "./capture-picked-files";
 import type { DroppedEntry } from "./collect-dropped-entries";
 
 export interface UploadPicker {
@@ -30,11 +31,12 @@ export function useUploadPicker(onFiles: (entries: DroppedEntry[]) => void): Upl
     typeof document !== "undefined" && "webkitdirectory" in document.createElement("input");
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    // Clears the value so picking the exact same file/folder again still fires `onChange`.
-    e.target.value = "";
-    if (!files || files.length === 0) return;
-    const entries: DroppedEntry[] = Array.from(files).map((file) => ({
+    // Captures the live FileList into a plain array BEFORE clearing `value` (see
+    // `capture-picked-files.ts`) — clearing first, so picking the exact same file/folder
+    // again still fires `onChange`, would otherwise race Chromium emptying the list itself.
+    const picked = capturePickedFiles(e.target.files, () => { e.target.value = ""; });
+    if (picked.length === 0) return;
+    const entries: DroppedEntry[] = picked.map((file) => ({
       file,
       // The folder picker sets `webkitRelativePath` ("folder/sub/file.txt"); a plain file
       // picker leaves it empty, so the bare name is the relative path.

package/src/web/lib/fs-upload-xhr.ts

@@ -29,8 +29,14 @@ export function uploadFileXhr(
   file: File,
   overwrite: boolean,
   onProgress: (progress: UploadProgress) => void,
+  signal?: AbortSignal,
 ): Promise<{ path: string; size: number }> {
   return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException("Upload aborted", "AbortError"));
+      return;
+    }
+
     const xhr = new XMLHttpRequest();
     xhr.open("PUT", fsApi.uploadUrl(path, overwrite));
     const token = getAuthToken();
@@ -41,7 +47,12 @@ export function uploadFileXhr(
       if (e.lengthComputable) onProgress({ loaded: e.loaded, total: e.total });
     };
 
+    const onAbortSignal = () => xhr.abort();
+    signal?.addEventListener("abort", onAbortSignal);
+    const detach = () => signal?.removeEventListener("abort", onAbortSignal);
+
     xhr.onload = () => {
+      detach();
       let json: UploadResponseBody = {};
       try {
         json = JSON.parse(xhr.responseText);
@@ -54,8 +65,8 @@ export function uploadFileXhr(
       }
       reject(new FsError(json.error ?? `HTTP ${xhr.status}`, json.code ?? "EUNKNOWN", xhr.status));
     };
-    xhr.onerror = () => reject(new Error("Network error during upload"));
-    xhr.onabort = () => reject(new DOMException("Upload aborted", "AbortError"));
+    xhr.onerror = () => { detach(); reject(new Error("Network error during upload")); };
+    xhr.onabort = () => { detach(); reject(new DOMException("Upload aborted", "AbortError")); };
 
     xhr.send(file);
   });

package/dist/web/assets/architecture-PBZL5I3N-Bs7wzj-W.js

@@ -1 +0,0 @@
-import{K as e}from"./vendor-mermaid-Bg4vE8QA.js";export{e as createArchitectureServices};