@hienlh/ppm 0.18.4 → 0.18.6

package/src/web/components/chat/chat-tab.tsx

@@ -12,6 +12,8 @@ import { openBugReportPopup } from "@/lib/report-bug";
 import { getAISettings } from "@/lib/api-settings";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
+import { TeamWorkingBar } from "./team-working-bar";
+import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
 import { MessageInput, type ChatAttachment, type MessagePriority } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
@@ -131,6 +133,12 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     killBackgroundShell,
   } = useChat(sessionId, providerId, projectName);
 
+  // Teammates keep working long after their spawn card scrolled away — a resume
+  // arrives by SendMessage and writes no card at all. Poll the roster whenever this
+  // session has a team so the working bar below the conversation stays truthful.
+  const primaryTeam = teamActivity?.teamNames?.[0] ?? "";
+  const { members: teamMembers } = useTeamActivityFeed(primaryTeam, !!primaryTeam);
+
   // Flush pending message once WS connects (replaces unreliable setTimeout)
   useEffect(() => {
     if (isConnected && pendingSendRef.current) {
@@ -627,6 +635,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         bashPartialOutput={bashPartialOutput}
       />
 
+      {/* Teammates still working — pinned here so it is the last thing under the conversation */}
+      <TeamWorkingBar teamName={primaryTeam} members={teamMembers} projectName={projectName} />
+
       {/* Bottom toolbar */}
       <div className="border-t border-border bg-panel shrink-0">
         {/* Unified toolbar: History, Config, Usage, Bug report, Connection */}

package/src/web/components/chat/team-activity-panel.tsx

@@ -11,7 +11,7 @@ import { RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
-import { useWindowStore } from "@/components/floating-window/window-store";
+import { useOpenTeamMember } from "./use-open-team-member";
 import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
 import { TeamMemberList } from "./team-member-list";
 import { TeamMessageList } from "./team-message-list";
@@ -35,7 +35,7 @@ function teamLabel(name: string, sessionId?: string | null): string {
 export function TeamActivityPanel({ teamNames, messages, sessionId, projectName }: TeamActivityPanelProps) {
   const [selectedTeam, setSelectedTeam] = useState(teamNames[0] ?? "");
   const [tab, setTab] = useState<TeamTab>("members");
-  const openWindow = useWindowStore((s) => s.open);
+  const openMember = useOpenTeamMember();
   // Touch needs the 44px minimum even at desktop width; a mouse does not.
   const coarse = usePrefersCoarsePointer();
 
@@ -51,9 +51,9 @@ export function TeamActivityPanel({ teamNames, messages, sessionId, projectName
 
   const openMemberSession = useCallback(
     (memberName: string) => {
-      openWindow("team-member", { teamName: selectedTeam, memberName, projectName });
+      openMember({ teamName: selectedTeam, memberName, projectName });
     },
-    [openWindow, selectedTeam, projectName],
+    [openMember, selectedTeam, projectName],
   );
 
   /**

package/src/web/components/chat/team-member-activity-format.ts

@@ -0,0 +1,38 @@
+/**
+ * Formatting shared by every surface that shows a teammate's activity — the roster
+ * row in the team panel and the working bar pinned under the conversation.
+ *
+ * Kept apart from the components so both read the same answer to "who is this and
+ * what is it doing right now" instead of drifting into two phrasings.
+ */
+
+import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
+
+/** Trailing agent-type segment — `ak-engineer:tester` reads as `tester`. */
+export function shortAgentType(agentType?: string): string | undefined {
+  if (!agentType) return undefined;
+  const tail = agentType.split(":").pop();
+  return tail && tail !== "general-purpose" ? tail : agentType;
+}
+
+/** `1h 4m` / `12m` / `45s` — compact enough for a dense row. */
+export function formatDuration(fromIso?: string, toIso?: string): string | undefined {
+  if (!fromIso) return undefined;
+  const from = new Date(fromIso).getTime();
+  const to = toIso ? new Date(toIso).getTime() : Date.now();
+  if (!Number.isFinite(from) || !Number.isFinite(to) || to < from) return undefined;
+  const totalSeconds = Math.floor((to - from) / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m`;
+  return `${totalSeconds}s`;
+}
+
+/** Best one-line answer to "what is it doing" from the transcript tail. */
+export function currentStep(member: TeamMemberActivity): string | undefined {
+  if (member.lastTool) {
+    return member.lastToolArg ? `${member.lastTool}: ${member.lastToolArg}` : member.lastTool;
+  }
+  return member.lastNarrative ?? member.description;
+}

package/src/web/components/chat/team-member-activity-row.tsx

@@ -9,6 +9,7 @@
 import { Loader2, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
+import { currentStep, formatDuration, shortAgentType } from "./team-member-activity-format";
 
 interface TeamMemberActivityRowProps {
   member: TeamMemberActivity;
@@ -22,35 +23,6 @@ const STATE_LABEL: Record<string, string> = {
   "no-transcript": "no session",
 };
 
-/** Trailing agent-type segment — `ak-engineer:tester` reads as `tester`. */
-function shortAgentType(agentType?: string): string | undefined {
-  if (!agentType) return undefined;
-  const tail = agentType.split(":").pop();
-  return tail && tail !== "general-purpose" ? tail : agentType;
-}
-
-/** `1h 4m` / `12m` / `45s` — compact enough for a dense row. */
-export function formatDuration(fromIso?: string, toIso?: string): string | undefined {
-  if (!fromIso) return undefined;
-  const from = new Date(fromIso).getTime();
-  const to = toIso ? new Date(toIso).getTime() : Date.now();
-  if (!Number.isFinite(from) || !Number.isFinite(to) || to < from) return undefined;
-  const totalSeconds = Math.floor((to - from) / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  if (hours > 0) return `${hours}h ${minutes}m`;
-  if (minutes > 0) return `${minutes}m`;
-  return `${totalSeconds}s`;
-}
-
-/** Best one-line answer to "what is it doing" from the transcript tail. */
-function currentStep(member: TeamMemberActivity): string | undefined {
-  if (member.lastTool) {
-    return member.lastToolArg ? `${member.lastTool}: ${member.lastToolArg}` : member.lastTool;
-  }
-  return member.lastNarrative ?? member.description;
-}
-
 export function TeamMemberActivityRow({ member, onOpen }: TeamMemberActivityRowProps) {
   const working = member.workState === "working";
   const step = currentStep(member);

package/src/web/components/chat/team-member-sheet.tsx

@@ -0,0 +1,47 @@
+/**
+ * Full-screen mobile presentation of a teammate's work session.
+ *
+ * Hosts the same content component the desktop floating window uses, so the steps,
+ * refresh and error states are shared code rather than a parallel mobile build.
+ * Self-gated singleton, mounted once at the app root beside the other overlays.
+ */
+
+import { lazy, Suspense } from "react";
+import { X } from "lucide-react";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useTeamMemberSheet } from "./use-open-team-member";
+
+const TeamMemberWindowContent = lazy(() => import("./team-member-window-content"));
+
+export function TeamMemberSheet() {
+  const payload = useTeamMemberSheet((s) => s.payload);
+  const close = useTeamMemberSheet((s) => s.close);
+  if (!payload) return null;
+
+  return (
+    <BottomSheet open onClose={close} zIndex={45} className="flex h-[var(--sheet-vh)] flex-col p-0">
+      <div className="flex items-center gap-2 border-b border-border px-3 py-2 shrink-0">
+        <span className="truncate text-sm font-medium text-text-primary">
+          Session — {payload.memberName}
+        </span>
+        <button
+          type="button"
+          onClick={close}
+          className="ml-auto flex size-11 items-center justify-center rounded text-text-secondary hover:text-text-primary"
+          aria-label="Close"
+        >
+          <X className="size-5" />
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto">
+        <Suspense fallback={<div className="p-4 text-sm text-text-2">Loading…</div>}>
+          {/* No floating window backs this sheet, so the id is only an identity for the content. */}
+          <TeamMemberWindowContent
+            id={`sheet-${payload.memberName}`}
+            payload={payload as unknown as Record<string, unknown>}
+          />
+        </Suspense>
+      </div>
+    </BottomSheet>
+  );
+}

package/src/web/components/chat/team-working-bar.tsx

@@ -0,0 +1,62 @@
+/**
+ * Teammates working right now, pinned under the conversation.
+ *
+ * A teammate only appears in the transcript when it is *spawned*; every later task
+ * reaches it through SendMessage, which resumes the same agent and writes no new
+ * card. So after the first round the conversation goes quiet while members are
+ * still working, and the only way to notice was to open the team panel.
+ *
+ * This is deliberately a live overlay rather than chat events: work state is derived
+ * from transcripts on disk within a 90s window, so replaying an old session must show
+ * nothing here instead of claiming a long-finished teammate is still running.
+ */
+
+import { Users } from "lucide-react";
+import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
+import { currentStep, formatDuration, shortAgentType } from "./team-member-activity-format";
+import { useOpenTeamMember } from "./use-open-team-member";
+
+interface TeamWorkingBarProps {
+  teamName: string;
+  members: TeamMemberActivity[];
+  projectName?: string;
+}
+
+export function TeamWorkingBar({ teamName, members, projectName }: TeamWorkingBarProps) {
+  const openMember = useOpenTeamMember();
+  const working = members.filter((m) => m.workState === "working");
+  if (!teamName || working.length === 0) return null;
+
+  return (
+    <div className="shrink-0 border-t border-border bg-surface-elevated/60 px-2 py-1.5 space-y-1">
+      {working.map((member) => {
+        const step = currentStep(member);
+        const elapsed = formatDuration(member.startedAt);
+        const agentType = shortAgentType(member.agentType);
+        return (
+          <button
+            key={member.name}
+            type="button"
+            onClick={() => openMember({ teamName, memberName: member.name, projectName })}
+            className="flex w-full items-center gap-2 rounded px-1 py-1.5 min-h-[36px] text-left text-xs hover:bg-surface transition-colors"
+            title={`Open ${member.name}'s work session`}
+          >
+            <span className="relative flex size-2 shrink-0">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-60" />
+              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+            </span>
+            <Users className="size-3.5 shrink-0 text-accent-2" />
+            <span className="font-medium text-text-primary shrink-0">{member.name}</span>
+            {!!agentType && <span className="text-text-3 shrink-0 hidden sm:inline">{agentType}</span>}
+            {!!step && (
+              <span className="flex-1 truncate text-text-subtle" title={step}>
+                {step}
+              </span>
+            )}
+            {!!elapsed && <span className="ml-auto shrink-0 text-text-3 font-mono">{elapsed}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/web/components/chat/use-open-team-member.ts

@@ -0,0 +1,41 @@
+/**
+ * Opening a teammate's work session, on whichever presentation the device has.
+ *
+ * `WindowLayer` renders nothing below the `md` breakpoint, so `openWindow("team-member")`
+ * is a silent no-op on a phone — the tap looked broken. Desktop keeps the floating window;
+ * mobile gets the full-screen sheet, both hosting the same content component.
+ */
+
+import { useCallback } from "react";
+import { create } from "zustand";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import type { TeamMemberWindowPayload } from "./team-member-window-content";
+
+interface TeamMemberSheetState {
+  payload: TeamMemberWindowPayload | null;
+  open: (payload: TeamMemberWindowPayload) => void;
+  close: () => void;
+}
+
+/** Mobile-only: which teammate the full-screen sheet is showing, if any. */
+export const useTeamMemberSheet = create<TeamMemberSheetState>((set) => ({
+  payload: null,
+  open: (payload) => set({ payload }),
+  close: () => set({ payload: null }),
+}));
+
+/** Callback that opens a teammate's session the right way for this viewport. */
+export function useOpenTeamMember(): (payload: TeamMemberWindowPayload) => void {
+  const isMobile = useIsMobile();
+  const openWindow = useWindowStore((s) => s.open);
+  const openSheet = useTeamMemberSheet((s) => s.open);
+
+  return useCallback(
+    (payload: TeamMemberWindowPayload) => {
+      if (isMobile) openSheet(payload);
+      else openWindow("team-member", payload as unknown as Record<string, unknown>);
+    },
+    [isMobile, openSheet, openWindow],
+  );
+}

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