From d9bd50eca071eb0b6dd597f41c71dbf5a556d79f Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 13:54:36 +0100
Subject: [PATCH 01/21] Defer desktop media uploads until send

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       |  10 +-
 .../src/features/channels/ui/ChannelPane.tsx  |   3 +-
 .../features/communities/useCommunityInit.ts  |   2 +
 .../lib/backgroundMediaUploadStore.ts         | 175 ++++++++++++++++++
 .../features/messages/lib/useMediaUpload.ts   | 172 ++++++++++++++++-
 .../messages/ui/ComposerAttachments.tsx       |  68 ++++++-
 .../ui/ComposerUploadProgressPill.tsx         |  85 +++++++++
 .../features/messages/ui/MessageComposer.tsx  | 141 +++++++-------
 .../messages/ui/MessageComposer.types.ts      |   2 +
 .../features/messages/ui/NewMessageScreen.tsx |   1 +
 .../features/messages/ui/submitMessageEdit.ts | 100 ++++++++++
 .../messages/ui/useMentionSendFlow.ts         |  98 +++++++---
 desktop/src/shared/api/tauri.ts               |   8 +-
 desktop/src/testing/e2eBridge.ts              |   2 +
 desktop/tests/e2e/file-attachment.spec.ts     |  76 +++++++-
 desktop/tests/helpers/bridge.ts               |   2 +
 16 files changed, 832 insertions(+), 113 deletions(-)
 create mode 100644 desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
 create mode 100644 desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
 create mode 100644 desktop/src/features/messages/ui/submitMessageEdit.ts

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index ed3b340238..b3921be02d 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -573,6 +573,7 @@ async fn process_picked_path(
     path: std::path::PathBuf,
     state: &AppState,
     images_only: bool,
+    progress: Option<(tauri::AppHandle, String)>,
 ) -> Result<BlobDescriptor, String> {
     // Pin the inode by opening the fd BEFORE spawn_blocking. This prevents a
     // local attacker from swapping the file between dialog return and read.
@@ -639,8 +640,7 @@ async fn process_picked_path(
 
     // Upload video first, then poster (best-effort). If poster upload fails,
     // the video descriptor is returned without an image field.
-    let mut descriptor = do_upload(body, &mime, state, None).await?;
-
+    let mut descriptor = do_upload(body, &mime, state, progress).await?;
     if let Some(poster) = poster_bytes {
         match do_upload(poster, "image/jpeg", state, None).await {
             Ok(poster_desc) => descriptor.image = Some(poster_desc.url),
@@ -675,6 +675,7 @@ async fn process_picked_path(
 #[tauri::command]
 pub async fn pick_and_upload_media(
     app: tauri::AppHandle,
+    progress_id: Option<String>,
     state: State<'_, AppState>,
 ) -> Result<Vec<BlobDescriptor>, String> {
     use tauri_plugin_dialog::DialogExt;
@@ -694,7 +695,8 @@ pub async fn pick_and_upload_media(
     let mut descriptors = Vec::with_capacity(file_paths.len());
     for file_path in file_paths {
         let path = file_path.as_path().ok_or("invalid path")?.to_path_buf();
-        let descriptor = process_picked_path(path, &state, false).await?;
+        let progress = progress_id.clone().map(|id| (app.clone(), id));
+        let descriptor = process_picked_path(path, &state, false, progress).await?;
         descriptors.push(descriptor);
     }
 
@@ -735,7 +737,7 @@ pub async fn pick_and_upload_image(
     };
 
     let path = file_path.as_path().ok_or("invalid path")?.to_path_buf();
-    let descriptor = process_picked_path(path, &state, true).await?;
+    let descriptor = process_picked_path(path, &state, true, None).await?;
     Ok(Some(descriptor))
 }
 
diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 770c45e445..9489d95209 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -174,7 +174,7 @@ export const ChannelPane = React.memo(function ChannelPane({
     activeChannel,
     currentPubkey,
   );
-  const mainComposerMedia = useMediaUpload();
+  const mainComposerMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const isNonMemberView =
     activeChannel !== null &&
     !activeChannel.isMember &&
@@ -792,6 +792,7 @@ export const ChannelPane = React.memo(function ChannelPane({
                               : "Select a channel"
                   }
                   showTopBorder={false}
+                  showBackgroundUploadProgress
                 />
                 {/* The activity accessory is anchored in the dock's reserved
                     bottom rail, so fading it cannot change the observed
diff --git a/desktop/src/features/communities/useCommunityInit.ts b/desktop/src/features/communities/useCommunityInit.ts
index afa69f913f..1bd1e090a7 100644
--- a/desktop/src/features/communities/useCommunityInit.ts
+++ b/desktop/src/features/communities/useCommunityInit.ts
@@ -19,6 +19,7 @@ import {
   initDraftStore,
 } from "@/features/messages/lib/useDrafts";
 import { resetRenderScopedReactionHydration } from "@/features/messages/lib/renderScopedReactions";
+import { resetBackgroundMediaUploads } from "@/features/messages/lib/backgroundMediaUploadStore";
 import {
   resetActiveAgentTurnsStore,
   saveActiveAgentTurnsForCommunity,
@@ -67,6 +68,7 @@ function resetCommunityState({
   resetMediaCaches();
   resetVideoPlayerState();
   resetRenderScopedReactionHydration();
+  resetBackgroundMediaUploads();
   clearSearchHitEventCache();
   clearMarkdownNodeCache();
 }
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
new file mode 100644
index 0000000000..9add1223a3
--- /dev/null
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -0,0 +1,175 @@
+import * as React from "react";
+
+import { type BlobDescriptor, uploadMediaBytes } from "@/shared/api/tauri";
+
+export type QueuedMediaAttachment = {
+  file: File;
+  id: number;
+  previewUrl?: string;
+};
+
+type BackgroundUploadTask = {
+  canceled: boolean;
+  fileProgress: number[];
+  id: number;
+};
+
+type BackgroundUploadSnapshot = {
+  isUploading: boolean;
+  percentage: number;
+};
+
+type EnqueueBackgroundUploadOptions = {
+  attachments: QueuedMediaAttachment[];
+  onComplete: (descriptors: BlobDescriptor[]) => Promise<void>;
+  onError: (error: unknown) => void;
+};
+
+const tasks = new Map<number, BackgroundUploadTask>();
+const listeners = new Set<() => void>();
+let nextTaskId = 0;
+let snapshot: BackgroundUploadSnapshot = {
+  isUploading: false,
+  percentage: 0,
+};
+let stopProgressListener: (() => void) | null = null;
+let progressListenerPromise: Promise<void> | null = null;
+
+function progressId(taskId: number, fileIndex: number): string {
+  return `background-media-upload-${taskId}-${fileIndex}`;
+}
+
+function rebuildSnapshot(): void {
+  const allProgress = [...tasks.values()].flatMap((task) => task.fileProgress);
+  snapshot = {
+    isUploading: allProgress.length > 0,
+    percentage:
+      allProgress.length === 0
+        ? 0
+        : Math.round(
+            allProgress.reduce((total, progress) => total + progress, 0) /
+              allProgress.length,
+          ),
+  };
+  for (const listener of listeners) listener();
+}
+
+async function ensureProgressListener(): Promise<void> {
+  if (stopProgressListener || progressListenerPromise) return;
+  progressListenerPromise = (async () => {
+    try {
+      const { listen } = await import("@tauri-apps/api/event");
+      const dispose = await listen<{
+        id: string;
+        sent: number;
+        total: number;
+      }>("media-upload-progress", (event) => {
+        const match = /^background-media-upload-(\d+)-(\d+)$/.exec(
+          event.payload.id,
+        );
+        if (!match || event.payload.total <= 0) return;
+
+        const task = tasks.get(Number(match[1]));
+        const fileIndex = Number(match[2]);
+        if (!task || fileIndex >= task.fileProgress.length) return;
+
+        task.fileProgress[fileIndex] = Math.min(
+          100,
+          Math.max(
+            0,
+            Math.round((event.payload.sent / event.payload.total) * 100),
+          ),
+        );
+        rebuildSnapshot();
+      });
+      if (tasks.size === 0) dispose();
+      else stopProgressListener = dispose;
+    } catch {
+      // Browser and E2E runtimes do not emit native byte-level progress.
+    } finally {
+      progressListenerPromise = null;
+    }
+  })();
+  await progressListenerPromise;
+}
+
+function finishTask(taskId: number): void {
+  tasks.delete(taskId);
+  rebuildSnapshot();
+  if (tasks.size === 0 && stopProgressListener) {
+    stopProgressListener();
+    stopProgressListener = null;
+  }
+}
+
+export function enqueueBackgroundMediaUpload({
+  attachments,
+  onComplete,
+  onError,
+}: EnqueueBackgroundUploadOptions): void {
+  if (attachments.length === 0) {
+    void onComplete([]).catch(onError);
+    return;
+  }
+
+  const taskId = nextTaskId;
+  nextTaskId += 1;
+  const task: BackgroundUploadTask = {
+    canceled: false,
+    fileProgress: attachments.map(() => 0),
+    id: taskId,
+  };
+  tasks.set(taskId, task);
+  rebuildSnapshot();
+  void ensureProgressListener();
+
+  void (async () => {
+    try {
+      const descriptors: BlobDescriptor[] = [];
+      for (let index = 0; index < attachments.length; index += 1) {
+        if (task.canceled) return;
+        const attachment = attachments[index];
+        const buffer = await attachment.file.arrayBuffer();
+        if (task.canceled) return;
+        const descriptor = await uploadMediaBytes(
+          [...new Uint8Array(buffer)],
+          attachment.file.name,
+          progressId(taskId, index),
+        );
+        if (task.canceled) return;
+        task.fileProgress[index] = 100;
+        rebuildSnapshot();
+        descriptors.push(descriptor);
+      }
+
+      if (!task.canceled) await onComplete(descriptors);
+    } catch (error) {
+      if (!task.canceled) onError(error);
+    } finally {
+      finishTask(taskId);
+    }
+  })();
+}
+
+export function cancelBackgroundMediaUploads(): void {
+  for (const task of tasks.values()) task.canceled = true;
+  tasks.clear();
+  rebuildSnapshot();
+  stopProgressListener?.();
+  stopProgressListener = null;
+}
+
+export const resetBackgroundMediaUploads = cancelBackgroundMediaUploads;
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function getSnapshot(): BackgroundUploadSnapshot {
+  return snapshot;
+}
+
+export function useBackgroundMediaUpload(): BackgroundUploadSnapshot {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
diff --git a/desktop/src/features/messages/lib/useMediaUpload.ts b/desktop/src/features/messages/lib/useMediaUpload.ts
index b627633be2..f14d153d4d 100644
--- a/desktop/src/features/messages/lib/useMediaUpload.ts
+++ b/desktop/src/features/messages/lib/useMediaUpload.ts
@@ -5,6 +5,7 @@ import {
   pickAndUploadMedia,
   uploadMediaBytes,
 } from "@/shared/api/tauri";
+import type { QueuedMediaAttachment } from "./backgroundMediaUploadStore";
 
 /**
  * First 4 hex chars of the sha256 — used as a short display name.
@@ -133,7 +134,22 @@ async function captureVideoPosterFrame(
   }
 }
 
-export function useMediaUpload() {
+type UseMediaUploadOptions = {
+  /** Keep newly selected files local until the message is submitted. */
+  deferUploadsUntilSend?: boolean;
+};
+
+export function useMediaUpload({
+  deferUploadsUntilSend = false,
+}: UseMediaUploadOptions = {}) {
+  const e2eConfig = (
+    window as Window & {
+      __BUZZ_E2E__?: { mock?: { deferredComposerUploads?: boolean } };
+    }
+  ).__BUZZ_E2E__;
+  const queueUntilSend =
+    deferUploadsUntilSend &&
+    (!e2eConfig || e2eConfig.mock?.deferredComposerUploads === true);
   const [uploadState, setUploadState] = React.useState<UploadState>({
     status: "idle",
   });
@@ -144,6 +160,11 @@ export function useMediaUpload() {
   >([]);
   const uploadingPreviewsRef = React.useRef(uploadingPreviews);
   uploadingPreviewsRef.current = uploadingPreviews;
+  const [queuedAttachments, setQueuedAttachmentsState] = React.useState<
+    QueuedMediaAttachment[]
+  >([]);
+  const queuedAttachmentsRef = React.useRef(queuedAttachments);
+  queuedAttachmentsRef.current = queuedAttachments;
   React.useEffect(() => {
     let unlisten: (() => void) | null = null;
     let cancelled = false;
@@ -248,6 +269,83 @@ export function useMediaUpload() {
    *  before React flushes the state update. */
   const nextSlotRef = React.useRef(0);
   const nextUploadingPreviewIdRef = React.useRef(0);
+  const nextQueuedAttachmentIdRef = React.useRef(0);
+
+  const updateQueuedVideoPoster = React.useCallback(
+    (id: number, posterUrl: string) => {
+      setQueuedAttachmentsState((current) =>
+        current.map((attachment) =>
+          attachment.id === id
+            ? { ...attachment, previewUrl: posterUrl }
+            : attachment,
+        ),
+      );
+    },
+    [],
+  );
+
+  const queueFiles = React.useCallback(
+    (files: File[]) => {
+      if (files.length === 0) return;
+
+      const attachments = files.map((file) => {
+        const id = nextQueuedAttachmentIdRef.current;
+        nextQueuedAttachmentIdRef.current += 1;
+        const previewUrl = file.type.startsWith("image/")
+          ? URL.createObjectURL(file)
+          : undefined;
+        if (file.type.startsWith("video/")) {
+          void captureVideoPosterFrame(file).then((poster) => {
+            if (poster) updateQueuedVideoPoster(id, poster.posterUrl);
+          });
+        }
+        return { file, id, previewUrl };
+      });
+
+      setQueuedAttachmentsState((current) => [...current, ...attachments]);
+    },
+    [updateQueuedVideoPoster],
+  );
+
+  const removeQueuedAttachment = React.useCallback((id: number) => {
+    setQueuedAttachmentsState((current) => {
+      const removed = current.find((attachment) => attachment.id === id);
+      if (removed?.previewUrl?.startsWith("blob:")) {
+        URL.revokeObjectURL(removed.previewUrl);
+      }
+      return current.filter((attachment) => attachment.id !== id);
+    });
+  }, []);
+
+  const clearQueuedAttachments = React.useCallback(() => {
+    setQueuedAttachmentsState((current) => {
+      for (const attachment of current) {
+        if (attachment.previewUrl?.startsWith("blob:")) {
+          URL.revokeObjectURL(attachment.previewUrl);
+        }
+      }
+      return [];
+    });
+  }, []);
+
+  const restoreQueuedAttachments = React.useCallback(
+    (attachments: QueuedMediaAttachment[]) => {
+      clearQueuedAttachments();
+      queueFiles(attachments.map((attachment) => attachment.file));
+    },
+    [clearQueuedAttachments, queueFiles],
+  );
+
+  React.useEffect(
+    () => () => {
+      for (const attachment of queuedAttachmentsRef.current) {
+        if (attachment.previewUrl?.startsWith("blob:")) {
+          URL.revokeObjectURL(attachment.previewUrl);
+        }
+      }
+    },
+    [],
+  );
 
   const isUploadCanceled = React.useCallback(
     (previewId?: number) =>
@@ -367,6 +465,19 @@ export function useMediaUpload() {
   );
 
   const handlePaperclip = React.useCallback(async () => {
+    if (queueUntilSend) {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.addEventListener(
+        "change",
+        () => queueFiles(Array.from(input.files ?? [])),
+        { once: true },
+      );
+      input.click();
+      return;
+    }
+
     // Hold a single pending tick while the native picker is open + uploads
     // run in Rust. We don't know the file count until the dialog returns,
     // and uploads are already complete by then, so we just append each
@@ -374,7 +485,7 @@ export function useMediaUpload() {
     const previewId = reserveUploadingPreview();
     setUploadingCount((c) => c + 1);
     try {
-      const descriptors = await pickAndUploadMedia();
+      const descriptors = await pickAndUploadMedia(uploadProgressId(previewId));
       if (isUploadCanceled(previewId)) return;
       finishUpload(previewId);
       for (const descriptor of descriptors) {
@@ -385,7 +496,14 @@ export function useMediaUpload() {
       if (isUploadCanceled(previewId)) return;
       onUploadError(err, previewId);
     }
-  }, [finishUpload, isUploadCanceled, onUploadError, reserveUploadingPreview]);
+  }, [
+    queueUntilSend,
+    finishUpload,
+    isUploadCanceled,
+    onUploadError,
+    queueFiles,
+    reserveUploadingPreview,
+  ]);
 
   const handleDrop = React.useCallback(
     async (event: React.DragEvent<HTMLElement>) => {
@@ -399,6 +517,11 @@ export function useMediaUpload() {
       // (active-content + executables) and size caps; everything else uploads.
       const validFiles = files;
 
+      if (queueUntilSend) {
+        queueFiles(validFiles);
+        return;
+      }
+
       setUploadingCount((c) => c + validFiles.length);
       const baseIndex = reserveSlots(validFiles.length);
 
@@ -425,9 +548,11 @@ export function useMediaUpload() {
     },
     [
       reserveSlots,
+      queueUntilSend,
       fillSlot,
       isUploadCanceled,
       onUploadError,
+      queueFiles,
       reserveUploadingPreview,
     ],
   );
@@ -497,6 +622,11 @@ export function useMediaUpload() {
 
       event.preventDefault();
 
+      if (queueUntilSend) {
+        queueFiles(mediaFiles);
+        return;
+      }
+
       setUploadingCount((c) => c + mediaFiles.length);
       const baseIndex = reserveSlots(mediaFiles.length);
 
@@ -522,9 +652,11 @@ export function useMediaUpload() {
     },
     [
       reserveSlots,
+      queueUntilSend,
       fillSlot,
       isUploadCanceled,
       onUploadError,
+      queueFiles,
       reserveUploadingPreview,
     ],
   );
@@ -532,6 +664,10 @@ export function useMediaUpload() {
   /** Upload a File directly — used by Tiptap's editorProps.handlePaste. */
   const uploadFile = React.useCallback(
     async (file: File) => {
+      if (queueUntilSend) {
+        queueFiles([file]);
+        return;
+      }
       const previewId = reserveUploadingPreview(file);
       setUploadingCount((c) => c + 1);
       try {
@@ -547,7 +683,14 @@ export function useMediaUpload() {
         onUploadError(err, previewId);
       }
     },
-    [isUploadCanceled, onUploaded, onUploadError, reserveUploadingPreview],
+    [
+      queueUntilSend,
+      isUploadCanceled,
+      onUploaded,
+      onUploadError,
+      queueFiles,
+      reserveUploadingPreview,
+    ],
   );
 
   /**
@@ -642,10 +785,21 @@ export function useMediaUpload() {
   );
 
   const isUploading = uploadingCount > 0;
+  const queuedPreviews = React.useMemo<UploadingAttachmentPreview[]>(
+    () =>
+      queuedAttachments.map((attachment) => ({
+        filename: attachment.file.name,
+        id: attachment.id,
+        posterUrl: attachment.previewUrl,
+        type: attachment.file.type,
+      })),
+    [queuedAttachments],
+  );
 
   return React.useMemo(
     () => ({
       cancelUpload,
+      clearQueuedAttachments,
       handleDragEnter,
       handleDragLeave,
       handleDragOver,
@@ -657,7 +811,12 @@ export function useMediaUpload() {
       originalUrlByUrl,
       pendingImeta,
       pendingImetaRef,
+      queuedAttachments,
+      queuedAttachmentsRef,
+      queuedPreviews,
       removeAttachment,
+      removeQueuedAttachment,
+      restoreQueuedAttachments,
       revertAttachment,
       setPendingImeta,
       setUploadState,
@@ -669,6 +828,7 @@ export function useMediaUpload() {
     }),
     [
       cancelUpload,
+      clearQueuedAttachments,
       handleDragEnter,
       handleDragLeave,
       handleDragOver,
@@ -679,7 +839,11 @@ export function useMediaUpload() {
       isUploading,
       originalUrlByUrl,
       pendingImeta,
+      queuedAttachments,
+      queuedPreviews,
       removeAttachment,
+      removeQueuedAttachment,
+      restoreQueuedAttachments,
       revertAttachment,
       setPendingImeta,
       uploadEditedAttachment,
diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index bee38e321c..c27a0a2943 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -61,6 +61,10 @@ type ComposerAttachmentsProps = {
   attachments: ImetaMedia[];
   isUploading?: boolean;
   onCancelUpload?: (previewId: number) => void;
+  /** Remove a local attachment that has not started uploading yet. */
+  onRemoveQueued?: (previewId: number) => void;
+  /** Local previews that are queued for upload when the message is sent. */
+  queuedPreviews?: UploadingAttachmentPreview[];
   uploadingCount?: number;
   uploadingPreviews?: UploadingAttachmentPreview[];
   /** Upload annotated bytes as a replacement for the attachment at `url`. */
@@ -511,6 +515,8 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
   uploadingCount = 0,
   uploadingPreviews = [],
   onCancelUpload,
+  onRemoveQueued,
+  queuedPreviews = [],
   onEditSave,
   onRemove,
   onRevert,
@@ -518,7 +524,8 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
   onToggleSpoiler,
   spoileredUrls,
 }: ComposerAttachmentsProps) {
-  if (attachments.length === 0 && !isUploading) return null;
+  if (attachments.length === 0 && queuedPreviews.length === 0 && !isUploading)
+    return null;
 
   const uploadPlaceholders: UploadingAttachmentPreview[] =
     uploadingPreviews.length > 0
@@ -609,6 +616,65 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
               />
             );
           })}
+          {queuedPreviews.map((preview) => {
+            const isMedia =
+              preview.type?.startsWith("image/") ||
+              preview.type?.startsWith("video/");
+            return (
+              <motion.div
+                animate={{ opacity: 1, scale: 1 }}
+                className="group relative"
+                exit={{ opacity: 0, scale: 0.8 }}
+                initial={{ opacity: 0, scale: 0.8 }}
+                key={`queued-attachment-${preview.id}`}
+                layout
+                transition={{ type: "spring", stiffness: 500, damping: 30 }}
+              >
+                {isMedia ? (
+                  <div
+                    className="relative h-[55px] max-w-[55px]"
+                    style={composerMediaStyle()}
+                  >
+                    <div className="h-full w-full overflow-hidden rounded-2xl border border-border/70 bg-muted">
+                      {preview.posterUrl ? (
+                        <img
+                          alt={preview.filename ?? "Queued attachment"}
+                          className="h-full w-full object-cover"
+                          src={preview.posterUrl}
+                        />
+                      ) : (
+                        <div className="flex h-full w-full items-center justify-center text-muted-foreground">
+                          <Play className="size-5" />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex h-5 max-w-40 items-center gap-1 rounded border border-border/70 bg-muted px-1.5">
+                    <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <span className="truncate text-2xs text-muted-foreground">
+                      {preview.filename ?? "Attachment"}
+                    </span>
+                  </div>
+                )}
+                {onRemoveQueued ? (
+                  <Tooltip disableHoverableContent>
+                    <TooltipTrigger asChild>
+                      <button
+                        aria-label="Remove attachment"
+                        className="absolute -right-1 -top-1 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-foreground text-background"
+                        onClick={() => onRemoveQueued(preview.id)}
+                        type="button"
+                      >
+                        <X className="h-2.5 w-2.5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Remove attachment</TooltipContent>
+                  </Tooltip>
+                ) : null}
+              </motion.div>
+            );
+          })}
           {isUploading &&
             uploadPlaceholders.map((preview) => (
               <motion.div
diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
new file mode 100644
index 0000000000..fe51c6adf7
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
@@ -0,0 +1,85 @@
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+
+import { cn } from "@/shared/lib/cn";
+
+export function ComposerUploadProgressPill({
+  isUploading,
+  onCancel,
+  percentage,
+}: {
+  isUploading: boolean;
+  onCancel: () => void;
+  percentage: number;
+}) {
+  const reducedMotion = useReducedMotion();
+
+  return (
+    <AnimatePresence initial={false}>
+      {isUploading ? (
+        <motion.div
+          animate="visible"
+          className="relative z-0 flex justify-center pb-2"
+          data-testid="composer-upload-progress-motion"
+          exit="hidden"
+          initial="hidden"
+          variants={{
+            hidden: {
+              opacity: reducedMotion ? 1 : 0,
+              transition: reducedMotion
+                ? { duration: 0 }
+                : { duration: 0.18, ease: "easeOut" },
+              y: reducedMotion ? 0 : 28,
+            },
+            visible: {
+              opacity: 1,
+              transition: reducedMotion
+                ? { duration: 0 }
+                : { duration: 0.22, ease: "easeIn" },
+              y: 0,
+            },
+          }}
+        >
+          <div
+            aria-label={`Uploading ${percentage}%`}
+            aria-live="polite"
+            className="relative h-9 w-[18.75rem] max-w-full overflow-hidden rounded-full border border-border bg-muted"
+            data-testid="composer-upload-progress"
+            role="status"
+          >
+            <motion.div
+              animate={{ width: `${percentage}%` }}
+              className="absolute inset-y-0 left-0 bg-primary/[0.12] dark:bg-primary/[0.15]"
+              data-testid="composer-upload-progress-fill"
+              initial={false}
+              transition={
+                reducedMotion
+                  ? { duration: 0 }
+                  : { duration: 0.15, ease: "easeOut" }
+              }
+            />
+            <div className="relative flex h-full items-center gap-2 pl-3 pr-1">
+              <span className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+                Uploading
+                <span className="text-muted-foreground">
+                  {" · "}
+                  {percentage}%
+                </span>
+              </span>
+              <button
+                className={cn(
+                  "shrink-0 rounded-full bg-transparent px-2 py-1 text-sm font-semibold text-foreground",
+                  "transition-colors hover:bg-foreground/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+                )}
+                data-testid="composer-upload-cancel"
+                onClick={onCancel}
+                type="button"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 69e4ec67b5..e454c62be8 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -10,20 +10,20 @@ import { resolveSentDraftKey } from "@/features/messages/ui/draftSubmitKey";
 import { useEmojiAutocomplete } from "@/features/messages/lib/useEmojiAutocomplete";
 import type { EmojiSuggestion } from "@/features/messages/lib/useEmojiAutocomplete";
 import { useCustomEmoji } from "@/features/custom-emoji/hooks";
-import { buildCustomEmojiTags } from "@/shared/lib/customEmojiTags";
 import {
-  buildOutgoingMessage,
   findSpoileredImetaMediaUrls,
   type ImetaMedia,
-  mergeOutgoingTags,
   restoreImetaMediaDisplayLabels,
   stripImetaMediaLines,
 } from "@/features/messages/lib/imetaMediaMarkdown";
 
 import { useAttachmentEditing } from "@/features/messages/lib/useAttachmentEditing";
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
+import {
+  cancelBackgroundMediaUploads,
+  useBackgroundMediaUpload,
+} from "@/features/messages/lib/backgroundMediaUploadStore";
 import { useMentions } from "@/features/messages/lib/useMentions";
-import { diffAddedMentionPubkeys } from "@/features/messages/lib/threading";
 import { getPersistentAgentAudienceScope } from "@/features/messages/lib/persistentAgentAudience";
 import { useIdentityQuery } from "@/shared/api/hooks";
 import {
@@ -50,11 +50,13 @@ import {
   type MentionSuggestion,
 } from "./MentionAutocomplete";
 import { ComposerDockToolbar } from "./ComposerDockToolbar";
+import { ComposerUploadProgressPill } from "./ComposerUploadProgressPill";
 import { NonMemberMentionDialog } from "./NonMemberMentionDialog";
 import { useMentionSendFlow } from "./useMentionSendFlow";
 import { usePersistentAgentMentionHydration } from "./usePersistentAgentMentionHydration";
 import { useComposerContentState } from "./useComposerContentState";
 import { useDraftPersistLifecycle } from "./useDraftPersistSnapshot";
+import { submitMessageEdit } from "./submitMessageEdit";
 
 import type { MessageComposerProps } from "./MessageComposer.types";
 
@@ -83,6 +85,7 @@ function MessageComposerImpl({
   profiles,
   replyTarget = null,
   mediaController,
+  showBackgroundUploadProgress = false,
   showTopBorder = false,
   toolbarExtraActions,
   typingParentEventId = null,
@@ -142,11 +145,12 @@ function MessageComposerImpl({
     typingRootEventId,
   );
 
-  // We pass a custom setter that both updates React state AND inserts
-  // markdown into the Tiptap editor when media upload completes.
-  const internalMedia = useMediaUpload();
+  // New files stay local so the composer can render previews immediately;
+  // submitting hands them to the app-wide background upload queue.
+  const internalMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const media = mediaController ?? internalMedia;
   const ownsDropZone = mediaController === undefined;
+  const backgroundUpload = useBackgroundMediaUpload();
 
   // Draft-persist lifecycle: restore/clear content + imeta + spoilered urls on
   // key change, and persist the outgoing draft in the cleanup. The StrictMode
@@ -308,6 +312,8 @@ function MessageComposerImpl({
     setContent: setComposerContent,
     setIsEmojiPickerOpen,
     setPendingImeta: media.setPendingImeta,
+    clearQueuedAttachments: media.clearQueuedAttachments,
+    restoreQueuedAttachments: media.restoreQueuedAttachments,
     setSpoileredAttachmentUrls,
     onSuccessfulExplicitAgentAudience:
       persistentAudience.enabled && audienceContext && ownerPubkey
@@ -512,77 +518,52 @@ function MessageComposerImpl({
     // Edit mode
     if (editTargetRef.current && onEditSaveRef.current) {
       if (isSendingRef.current || isUploadingRef.current) return;
-      const currentPendingImeta = media.pendingImetaRef.current;
       // No empty-edit guard here: clearing an edit to empty (no text, no
       // attachments) flows through to onEditSave as empty content, which
       // deletes the message instead of publishing it (see handleEditSave).
-
-      // Build the edit's body + imeta tag set. Coerce `mediaTags ?? []`
-      // because edit semantics use `[]` as the explicit "wipe all
-      // attachments" signal — the receiver overlay drops imeta when the
-      // edit carries an empty (but defined) set.
-      const { content: finalContent, mediaTags } = buildOutgoingMessage(
-        trimmed,
-        currentPendingImeta,
+      await submitMessageEdit({
+        content: trimmed,
+        customEmoji,
+        originalContent: editTargetRef.current.body,
+        ownerPubkey: ownerPubkeyRef.current,
+        pendingImeta: media.pendingImetaRef.current,
+        queuedAttachments: media.queuedAttachmentsRef.current,
         spoileredAttachmentUrls,
-      );
-
-      // NIP-30: attach `["emoji", shortcode, url]` tags for custom emoji in the
-      // edited body, exactly like the send path. Without this an edited message
-      // ships with no emoji tags, so the receiver can't resolve a `:shortcode:`
-      // and renders the literal text. `?? []` preserves edit semantics (a
-      // defined-but-empty media set means "wipe attachments").
-      const outgoingTags =
-        mergeOutgoingTags(
-          mediaTags,
-          buildCustomEmojiTags(finalContent, customEmoji),
-        ) ?? [];
-
-      // Notify only mentions this edit *newly adds* (see
-      // diffAddedMentionPubkeys): a typo-fix edit that leaves the mention set
-      // unchanged emits no `p` tags and re-wakes nobody. Computed before the
-      // composer state is cleared below.
-      const addedMentionPubkeys = diffAddedMentionPubkeys(
-        extractMentionPubkeysRef.current(editTargetRef.current.body),
-        extractMentionPubkeysRef.current(finalContent),
-        ownerPubkeyRef.current ?? "",
-      );
-
-      const savedContent = trimmed;
-      const savedImeta = [...currentPendingImeta];
-      const savedSpoileredAttachmentUrls = new Set(spoileredAttachmentUrls);
-      setComposerContent("");
-      richText.clearContent();
-      media.setPendingImeta([]);
-      setSpoileredAttachmentUrls(new Set());
-      mentions.clearMentions();
-      channelLinks.clearChannels();
-      emojiAutocomplete.clearEmojis();
-      setIsEmojiPickerOpen(false);
-
-      try {
-        await onEditSaveRef.current(
-          finalContent,
-          outgoingTags,
-          addedMentionPubkeys,
-        );
-      } catch {
-        setComposerContent(savedContent);
-        richText.setContent(savedContent);
-        media.setPendingImeta(savedImeta);
-        setSpoileredAttachmentUrls(savedSpoileredAttachmentUrls);
-      }
+        extractMentionPubkeys: extractMentionPubkeysRef.current,
+        save: onEditSaveRef.current,
+        clearComposer: () => {
+          setComposerContent("");
+          richText.clearContent();
+          media.setPendingImeta([]);
+          media.clearQueuedAttachments();
+          setSpoileredAttachmentUrls(new Set());
+          mentions.clearMentions();
+          channelLinks.clearChannels();
+          emojiAutocomplete.clearEmojis();
+          setIsEmojiPickerOpen(false);
+        },
+        restoreComposer: (draft) => {
+          setComposerContent(draft.content);
+          richText.setContent(draft.content);
+          media.setPendingImeta(draft.pendingImeta);
+          media.restoreQueuedAttachments(draft.queuedAttachments);
+          setSpoileredAttachmentUrls(draft.spoileredAttachmentUrls);
+        },
+        setUploadError: (message) =>
+          media.setUploadState({ status: "error", message }),
+      });
       return;
     }
 
     // Normal send
     const currentPendingImeta = media.pendingImetaRef.current;
-    const hasMedia = currentPendingImeta.length > 0;
+    const currentQueuedAttachments = media.queuedAttachmentsRef.current;
+    const hasMedia =
+      currentPendingImeta.length > 0 || currentQueuedAttachments.length > 0;
     if (
       (!trimmed && !hasMedia) ||
       disabledRef.current ||
       isSendingRef.current ||
-      isUploadingRef.current ||
       mentionSendFlow.isPreparingMentionSend
     ) {
       return;
@@ -603,6 +584,7 @@ function MessageComposerImpl({
         capturedChannelId: channelId,
         capturedThreadContext,
         pendingImeta: currentPendingImeta,
+        queuedAttachments: currentQueuedAttachments,
         sentDraftKey: resolveSentDraftKey(
           effectiveDraftKeyRef.current,
           drafts.loadDraft,
@@ -622,8 +604,12 @@ function MessageComposerImpl({
     customEmoji,
     drafts.loadDraft,
     emojiAutocomplete.clearEmojis,
+    media.clearQueuedAttachments,
     media.pendingImetaRef,
+    media.queuedAttachmentsRef,
+    media.restoreQueuedAttachments,
     media.setPendingImeta,
+    media.setUploadState,
     mentionSendFlow.isPreparingMentionSend,
     mentionSendFlow.sendMessageWithMentionFlow,
     mentions.clearMentions,
@@ -825,21 +811,23 @@ function MessageComposerImpl({
   const sendDisabled = React.useMemo(
     () =>
       disabled ||
-      media.isUploading ||
+      (editTarget !== null && media.isUploading) ||
       mentionSendFlow.isPreparingMentionSend ||
-      (isContentEmpty && media.pendingImeta.length === 0),
+      (isContentEmpty &&
+        media.pendingImeta.length === 0 &&
+        media.queuedAttachments.length === 0),
     [
       disabled,
+      editTarget,
       media.isUploading,
       mentionSendFlow.isPreparingMentionSend,
       isContentEmpty,
       media.pendingImeta.length,
+      media.queuedAttachments.length,
     ],
   );
 
-  const handleCaptureSelection = React.useCallback(() => {
-    // No-op for Tiptap — selection is managed by ProseMirror.
-  }, []);
+  const handleCaptureSelection = React.useCallback(() => {}, []);
 
   const handlePaperclipClick = React.useCallback(() => {
     void media.handlePaperclip();
@@ -897,6 +885,13 @@ function MessageComposerImpl({
             onCancelEdit={onCancelEdit}
             onCancelReply={onCancelReply}
           />
+          {showBackgroundUploadProgress ? (
+            <ComposerUploadProgressPill
+              isUploading={backgroundUpload.isUploading}
+              onCancel={cancelBackgroundMediaUploads}
+              percentage={backgroundUpload.percentage}
+            />
+          ) : null}
           <form
             className={cn(
               "relative z-10 isolate rounded-2xl border border-border/50 bg-background/80 px-3 pb-2 pt-3 shadow-none supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:supports-[backdrop-filter]:bg-background/55 sm:px-4",
@@ -956,12 +951,16 @@ function MessageComposerImpl({
               </div>
             ) : null}
 
-            {(media.pendingImeta.length > 0 || media.isUploading) && (
+            {(media.pendingImeta.length > 0 ||
+              media.queuedAttachments.length > 0 ||
+              media.isUploading) && (
               <div className="mb-2 flex items-center gap-2">
                 <ComposerAttachments
                   attachments={media.pendingImeta}
                   isUploading={media.isUploading}
                   onCancelUpload={media.cancelUpload}
+                  onRemoveQueued={media.removeQueuedAttachment}
+                  queuedPreviews={media.queuedPreviews}
                   uploadingCount={media.uploadingCount}
                   uploadingPreviews={media.uploadingPreviews}
                   onEditSave={handleAttachmentEditSave}
diff --git a/desktop/src/features/messages/ui/MessageComposer.types.ts b/desktop/src/features/messages/ui/MessageComposer.types.ts
index 800474c3dd..70b3f50a21 100644
--- a/desktop/src/features/messages/ui/MessageComposer.types.ts
+++ b/desktop/src/features/messages/ui/MessageComposer.types.ts
@@ -92,6 +92,8 @@ export type MessageComposerProps = {
     id: string;
   } | null;
   showTopBorder?: boolean;
+  /** Render the app-wide upload queue above this composer dock. */
+  showBackgroundUploadProgress?: boolean;
   toolbarExtraActions?: ReactNode;
   typingParentEventId?: string | null;
   typingRootEventId?: string | null;
diff --git a/desktop/src/features/messages/ui/NewMessageScreen.tsx b/desktop/src/features/messages/ui/NewMessageScreen.tsx
index 4e212c523f..f2a1427aa6 100644
--- a/desktop/src/features/messages/ui/NewMessageScreen.tsx
+++ b/desktop/src/features/messages/ui/NewMessageScreen.tsx
@@ -603,6 +603,7 @@ export function NewMessageScreen() {
         onPreparingMentionSendChange={setIsPreparingMentionSend}
         onSend={sendFirstMessage}
         placeholder={composerPlaceholder}
+        showBackgroundUploadProgress
       />
       <div aria-hidden="true" className="min-h-8 bg-background px-5 pb-1.5" />
     </div>
diff --git a/desktop/src/features/messages/ui/submitMessageEdit.ts b/desktop/src/features/messages/ui/submitMessageEdit.ts
new file mode 100644
index 0000000000..6762745461
--- /dev/null
+++ b/desktop/src/features/messages/ui/submitMessageEdit.ts
@@ -0,0 +1,100 @@
+import type { QueuedMediaAttachment } from "@/features/messages/lib/backgroundMediaUploadStore";
+import { enqueueBackgroundMediaUpload } from "@/features/messages/lib/backgroundMediaUploadStore";
+import {
+  buildOutgoingMessage,
+  type ImetaMedia,
+  mergeOutgoingTags,
+} from "@/features/messages/lib/imetaMediaMarkdown";
+import { diffAddedMentionPubkeys } from "@/features/messages/lib/threading";
+import { buildCustomEmojiTags } from "@/shared/lib/customEmojiTags";
+import type { CustomEmoji } from "@/shared/lib/remarkCustomEmoji";
+
+type EditDraft = {
+  content: string;
+  pendingImeta: ImetaMedia[];
+  queuedAttachments: QueuedMediaAttachment[];
+  spoileredAttachmentUrls: Set<string>;
+};
+
+type SubmitMessageEditOptions = EditDraft & {
+  clearComposer: () => void;
+  customEmoji: ReadonlyArray<CustomEmoji>;
+  extractMentionPubkeys: (content: string) => string[];
+  originalContent: string;
+  ownerPubkey: string | null;
+  restoreComposer: (draft: EditDraft) => void;
+  save: (
+    content: string,
+    mediaTags?: string[][],
+    mentionPubkeys?: string[],
+  ) => Promise<void>;
+  setUploadError: (message: string) => void;
+};
+
+/** Clear an edited message immediately, then upload and save captured state. */
+export async function submitMessageEdit({
+  clearComposer,
+  content,
+  customEmoji,
+  extractMentionPubkeys,
+  originalContent,
+  ownerPubkey,
+  pendingImeta,
+  queuedAttachments,
+  restoreComposer,
+  save,
+  setUploadError,
+  spoileredAttachmentUrls,
+}: SubmitMessageEditOptions): Promise<void> {
+  const draft: EditDraft = {
+    content,
+    pendingImeta: [...pendingImeta],
+    queuedAttachments: [...queuedAttachments],
+    spoileredAttachmentUrls: new Set(spoileredAttachmentUrls),
+  };
+  const addedMentionPubkeys = diffAddedMentionPubkeys(
+    extractMentionPubkeys(originalContent),
+    extractMentionPubkeys(content),
+    ownerPubkey ?? "",
+  );
+  clearComposer();
+
+  const finishEdit = async (uploaded: ImetaMedia[]) => {
+    // An explicit empty media tag set tells edit receivers to wipe attachments.
+    const { content: finalContent, mediaTags } = buildOutgoingMessage(
+      content,
+      [...draft.pendingImeta, ...uploaded],
+      draft.spoileredAttachmentUrls,
+    );
+    const outgoingTags =
+      mergeOutgoingTags(
+        mediaTags,
+        buildCustomEmojiTags(finalContent, customEmoji),
+      ) ?? [];
+    await save(finalContent, outgoingTags, addedMentionPubkeys);
+  };
+
+  if (draft.queuedAttachments.length > 0) {
+    enqueueBackgroundMediaUpload({
+      attachments: draft.queuedAttachments,
+      onComplete: async (uploaded) => {
+        try {
+          await finishEdit(uploaded);
+        } catch {
+          restoreComposer(draft);
+        }
+      },
+      onError: (error) => {
+        restoreComposer(draft);
+        setUploadError(String(error));
+      },
+    });
+    return;
+  }
+
+  try {
+    await finishEdit([]);
+  } catch {
+    restoreComposer(draft);
+  }
+}
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index 6d4e007cd4..345b87fc12 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -13,6 +13,10 @@ import {
 import { resolvePersonaRuntime } from "@/features/agents/lib/resolvePersonaRuntime";
 import { useAddChannelMembersMutation } from "@/features/channels/hooks";
 import { filterEffectiveExplicitAgentPubkeys } from "@/features/messages/lib/effectiveExplicitAgentPubkeys";
+import {
+  enqueueBackgroundMediaUpload,
+  type QueuedMediaAttachment,
+} from "@/features/messages/lib/backgroundMediaUploadStore";
 import type { UseChannelLinksResult } from "@/features/messages/lib/useChannelLinks";
 import type { UseEmojiAutocompleteResult } from "@/features/messages/lib/useEmojiAutocomplete";
 import {
@@ -36,7 +40,7 @@ type PendingNonMemberMentionSend = {
     parentEventId: string | null;
     threadHeadId: string | null;
   } | null;
-  finalContent: string;
+  trimmed: string;
   mentionPubkeys: string[];
   nonMemberPubkeys: string[];
   outgoingTags?: string[][];
@@ -44,6 +48,7 @@ type PendingNonMemberMentionSend = {
   readyAgentPubkeys?: string[];
   savedContent: string;
   savedImeta: ImetaMedia[];
+  queuedAttachments: QueuedMediaAttachment[];
   savedSpoileredAttachmentUrls: Set<string>;
   sentDraftKey: string | null | undefined;
   audienceGeneration: number;
@@ -60,6 +65,7 @@ type SendMessageWithMentionFlowInput = {
     threadHeadId: string | null;
   } | null;
   pendingImeta: ImetaMedia[];
+  queuedAttachments?: QueuedMediaAttachment[];
   sentDraftKey: string | null | undefined;
   spoileredAttachmentUrls?: ReadonlySet<string>;
   trimmed: string;
@@ -98,6 +104,8 @@ type UseMentionSendFlowOptions = {
   setContent: (content: string) => void;
   setIsEmojiPickerOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setPendingImeta: (pendingImeta: ImetaMedia[]) => void;
+  clearQueuedAttachments: () => void;
+  restoreQueuedAttachments: (attachments: QueuedMediaAttachment[]) => void;
   setSpoileredAttachmentUrls?: React.Dispatch<
     React.SetStateAction<Set<string>>
   >;
@@ -161,6 +169,8 @@ export function useMentionSendFlow({
   setContent,
   setIsEmojiPickerOpen,
   setPendingImeta,
+  clearQueuedAttachments,
+  restoreQueuedAttachments,
   setSpoileredAttachmentUrls,
   onSuccessfulExplicitAgentAudience,
   resolvePostSendContent,
@@ -398,6 +408,7 @@ export function useMentionSendFlow({
         mentions.cancelMentionAutocomplete();
       } else richText.clearContent();
       setPendingImeta([]);
+      clearQueuedAttachments();
       setSpoileredAttachmentUrls?.(new Set());
       if (!postSendContent) mentions.clearMentions();
       channelLinks.clearChannels();
@@ -415,6 +426,7 @@ export function useMentionSendFlow({
       setContent,
       setIsEmojiPickerOpen,
       setPendingImeta,
+      clearQueuedAttachments,
       setSpoileredAttachmentUrls,
     ],
   );
@@ -514,11 +526,37 @@ export function useMentionSendFlow({
           );
         }
 
-        try {
-          await onSendRef.current(
-            draft.finalContent,
+        const send = onSendRef.current;
+        const restoreComposerAfterFailure = () => {
+          if (
+            !isMountedRef.current ||
+            draft.capturedChannelId !== channelIdRef.current
+          ) {
+            return;
+          }
+          setContent(draft.savedContent);
+          contentRef.current = draft.savedContent;
+          richText.setContent(draft.savedContent);
+          setPendingImeta(draft.savedImeta);
+          restoreQueuedAttachments(draft.queuedAttachments);
+          setSpoileredAttachmentUrls?.(
+            new Set(draft.savedSpoileredAttachmentUrls),
+          );
+        };
+        const finishSend = async (uploaded: ImetaMedia[]) => {
+          const { content: finalContent, mediaTags } = buildOutgoingMessage(
+            draft.trimmed,
+            [...draft.savedImeta, ...uploaded],
+            draft.savedSpoileredAttachmentUrls,
+          );
+          const finalOutgoingTags = mergeOutgoingTags(
+            mediaTags,
+            outgoingTags ?? [],
+          );
+          await send(
+            finalContent,
             mentionPubkeys,
-            outgoingTags,
+            finalOutgoingTags,
             sendChannelId,
             draft.capturedThreadContext,
           );
@@ -542,17 +580,30 @@ export function useMentionSendFlow({
               [...draft.savedSpoileredAttachmentUrls],
             );
           }
-        } catch {
-          // Only restore the composer content if the user is still on the
-          // channel that originated the send.
-          if (draft.capturedChannelId === channelIdRef.current) {
-            setContent(draft.savedContent);
-            contentRef.current = draft.savedContent;
-            richText.setContent(draft.savedContent);
-            setPendingImeta(draft.savedImeta);
-            setSpoileredAttachmentUrls?.(
-              new Set(draft.savedSpoileredAttachmentUrls),
-            );
+        };
+
+        if (draft.queuedAttachments.length > 0) {
+          enqueueBackgroundMediaUpload({
+            attachments: draft.queuedAttachments,
+            onComplete: async (uploaded) => {
+              try {
+                await finishSend(uploaded);
+              } catch {
+                restoreComposerAfterFailure();
+              }
+            },
+            onError: (error) => {
+              restoreComposerAfterFailure();
+              toast.error(
+                `Upload failed: ${getErrorMessage(error, "Unknown error")}`,
+              );
+            },
+          });
+        } else {
+          try {
+            await finishSend([]);
+          } catch {
+            restoreComposerAfterFailure();
           }
         }
       } finally {
@@ -576,6 +627,7 @@ export function useMentionSendFlow({
       richText.setContent,
       setContent,
       setPendingImeta,
+      restoreQueuedAttachments,
       setSpoileredAttachmentUrls,
     ],
   );
@@ -642,6 +694,7 @@ export function useMentionSendFlow({
       capturedChannelId,
       capturedThreadContext = null,
       pendingImeta,
+      queuedAttachments = [],
       sentDraftKey,
       spoileredAttachmentUrls = new Set(),
       trimmed,
@@ -703,15 +756,7 @@ export function useMentionSendFlow({
             createdPersonaAgentPubkeySet.has(pubkey),
         );
         const pubkeys = explicitMentionPubkeys;
-        const { content: finalContent, mediaTags } = buildOutgoingMessage(
-          trimmed,
-          pendingImeta,
-          spoileredAttachmentUrls,
-        );
-        const outgoingTags = mergeOutgoingTags(
-          mediaTags,
-          buildCustomEmojiTags(finalContent, customEmoji),
-        );
+        const outgoingTags = buildCustomEmojiTags(trimmed, customEmoji);
         const nonMemberPubkeys = getNonMemberMentionPubkeys(pubkeys);
         let promptNonMemberPubkeys = nonMemberPubkeys.filter(
           (pubkey) =>
@@ -734,7 +779,7 @@ export function useMentionSendFlow({
         const pendingDraft: PendingNonMemberMentionSend = {
           capturedChannelId: effectiveChannelId,
           capturedThreadContext,
-          finalContent,
+          trimmed,
           mentionPubkeys: pubkeys,
           nonMemberPubkeys: promptNonMemberPubkeys,
           outgoingTags,
@@ -745,6 +790,7 @@ export function useMentionSendFlow({
               : createdPersonaAgentPubkeys,
           savedContent: trimmed,
           savedImeta: [...pendingImeta],
+          queuedAttachments: [...queuedAttachments],
           savedSpoileredAttachmentUrls: new Set(spoileredAttachmentUrls),
           sentDraftKey,
           audienceGeneration,
diff --git a/desktop/src/shared/api/tauri.ts b/desktop/src/shared/api/tauri.ts
index 69e2e455ec..17265ae309 100644
--- a/desktop/src/shared/api/tauri.ts
+++ b/desktop/src/shared/api/tauri.ts
@@ -596,11 +596,11 @@ export async function uploadMedia(
     isTemp,
   });
 }
-
-export async function pickAndUploadMedia(): Promise<BlobDescriptor[]> {
-  return invokeTauri<BlobDescriptor[]>("pick_and_upload_media", {});
+export async function pickAndUploadMedia(
+  progressId?: string,
+): Promise<BlobDescriptor[]> {
+  return invokeTauri<BlobDescriptor[]>("pick_and_upload_media", { progressId });
 }
-
 export async function uploadMediaBytes(
   data: number[],
   filename?: string,
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index f17faa218b..d1b65ebe79 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -355,6 +355,8 @@ type E2eConfig = {
     // (e.g. a generic PDF) without a real upload pipeline. See
     // tests/helpers/bridge.ts:MockBridgeOptions.uploadDescriptors.
     uploadDelayMs?: number;
+    /** Exercise the production composer path that queues files until send. */
+    deferredComposerUploads?: boolean;
     /** Delay (ms) applied to `encode_agent_snapshot_for_send` so E2E tests can
      *  observe the "preparing" phase before the upload begins. 0/undefined = instant. */
     encodeDelayMs?: number;
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index 403d26c136..dd7a700c4d 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import type { Page } from "@playwright/test";
 
 import { installMockBridge } from "../helpers/bridge";
 import { expectCornerRadiusPx, expectSmoothCorners } from "../helpers/css";
@@ -11,6 +12,7 @@ import { expectCornerRadiusPx, expectSmoothCorners } from "../helpers/css";
 
 test.beforeEach(async ({ page }) => {
   await installMockBridge(page, {
+    deferredComposerUploads: true,
     uploadDescriptors: [
       {
         url: `https://mock.relay/media/${"a".repeat(64)}.pdf`,
@@ -24,13 +26,25 @@ test.beforeEach(async ({ page }) => {
   });
 });
 
+async function chooseQuarterlyReport(page: Page) {
+  const [chooser] = await Promise.all([
+    page.waitForEvent("filechooser"),
+    page.getByRole("button", { name: "Attach image" }).click(),
+  ]);
+  await chooser.setFiles({
+    buffer: Buffer.from("quarterly report"),
+    mimeType: "application/pdf",
+    name: "quarterly-report.pdf",
+  });
+}
+
 test("upload a file and see a FileCard in the timeline", async ({ page }) => {
   await page.goto("/");
   await page.getByTestId("channel-general").click();
   await expect(page.getByTestId("chat-title")).toHaveText("general");
 
-  // Paperclip → mocked pick_and_upload_media returns the PDF descriptor.
-  await page.getByRole("button", { name: "Attach image" }).click();
+  // The paperclip queues the local file without starting its upload.
+  await chooseQuarterlyReport(page);
 
   // The composer shows a chip with the original filename.
   await expect(page.getByTestId("message-composer")).toContainText(
@@ -63,6 +77,64 @@ test("upload a file and see a FileCard in the timeline", async ({ page }) => {
     .toContain("download_file");
 });
 
+test("sends immediately and keeps upload progress across channels", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.evaluate(() => {
+    const e2e = (
+      window as Window & {
+        __BUZZ_E2E__?: { mock?: { uploadDelayMs?: number } };
+      }
+    ).__BUZZ_E2E__;
+    if (e2e?.mock) e2e.mock.uploadDelayMs = 1_000;
+  });
+  await page.getByTestId("channel-general").click();
+  await chooseQuarterlyReport(page);
+
+  await expect(page.getByTestId("composer-upload-progress")).toHaveCount(0);
+  await page.getByTestId("send-message").click();
+
+  await expect(page.getByTestId("message-composer")).not.toContainText(
+    "quarterly-report.pdf",
+  );
+  await expect(page.getByTestId("composer-upload-progress")).toBeVisible();
+
+  await page.getByTestId("channel-random").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("random");
+  await expect(page.getByTestId("composer-upload-progress")).toBeVisible();
+  await expect(page.getByTestId("composer-upload-progress")).toHaveCount(0, {
+    timeout: 5_000,
+  });
+
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("file-card").last()).toContainText(
+    "quarterly-report.pdf",
+  );
+});
+
+test("canceling a background upload prevents the message from publishing", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.evaluate(() => {
+    const e2e = (
+      window as Window & {
+        __BUZZ_E2E__?: { mock?: { uploadDelayMs?: number } };
+      }
+    ).__BUZZ_E2E__;
+    if (e2e?.mock) e2e.mock.uploadDelayMs = 1_000;
+  });
+  await page.getByTestId("channel-general").click();
+  await chooseQuarterlyReport(page);
+  await page.getByTestId("send-message").click();
+
+  await page.getByTestId("composer-upload-cancel").click();
+  await expect(page.getByTestId("composer-upload-progress")).toHaveCount(0);
+  await page.waitForTimeout(1_100);
+  await expect(page.getByTestId("file-card")).toHaveCount(0);
+});
+
 test("dropping a file on the channel column attaches it to the composer", async ({
   page,
 }) => {
diff --git a/desktop/tests/helpers/bridge.ts b/desktop/tests/helpers/bridge.ts
index 345e1ee4d7..9e1626b756 100644
--- a/desktop/tests/helpers/bridge.ts
+++ b/desktop/tests/helpers/bridge.ts
@@ -361,6 +361,8 @@ type MockBridgeOptions = {
    * explicit `[]` is honoured (models a picker cancel / no files selected).
    */
   uploadDelayMs?: number;
+  /** Exercise the production composer path that queues files until send. */
+  deferredComposerUploads?: boolean;
   /** Delay (ms) applied to `encode_agent_snapshot_for_send` so E2E tests can
    *  observe the "preparing" phase before the upload begins. 0/undefined = instant. */
   encodeDelayMs?: number;

From 2aae111ba6dee1462777cd7cd873b2d36f06afcd Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 14:29:25 +0100
Subject: [PATCH 02/21] Keep upload progress clear of latest control

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../src/features/channels/ui/ChannelPane.tsx  |  3 +-
 .../ui/ComposerUploadProgressOverlay.tsx      | 19 +++++++
 .../features/messages/ui/MessageTimeline.tsx  |  5 +-
 .../messages/ui/useComposerHeightPadding.ts   | 12 +++-
 desktop/tests/e2e/file-attachment.spec.ts     | 55 +++++++++++++++++++
 5 files changed, 89 insertions(+), 5 deletions(-)
 create mode 100644 desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 9489d95209..8d29e1a7a9 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -4,6 +4,7 @@ import { AnimatePresence } from "motion/react";
 import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import { ComposerDockBackdrop } from "@/features/messages/ui/ComposerDockBackdrop";
+import { ComposerUploadProgressOverlay } from "@/features/messages/ui/ComposerUploadProgressOverlay";
 import { MessageComposer } from "@/features/messages/ui/MessageComposer";
 import { ComposerTimeoutBanner } from "@/features/moderation/ui/ComposerTimeoutBanner";
 import { useTimeoutState } from "@/features/moderation/lib/timeoutStore";
@@ -733,6 +734,7 @@ export const ChannelPane = React.memo(function ChannelPane({
               data-testid="channel-composer-overlay"
               ref={composerWrapperRef}
             >
+              <ComposerUploadProgressOverlay />
               <div
                 className={cn(
                   "composer-dock composer-overlay-corner-masks relative pointer-events-auto",
@@ -792,7 +794,6 @@ export const ChannelPane = React.memo(function ChannelPane({
                               : "Select a channel"
                   }
                   showTopBorder={false}
-                  showBackgroundUploadProgress
                 />
                 {/* The activity accessory is anchored in the dock's reserved
                     bottom rail, so fading it cannot change the observed
diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
new file mode 100644
index 0000000000..a972b6efe3
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
@@ -0,0 +1,19 @@
+import {
+  cancelBackgroundMediaUploads,
+  useBackgroundMediaUpload,
+} from "@/features/messages/lib/backgroundMediaUploadStore";
+import { ComposerUploadProgressPill } from "@/features/messages/ui/ComposerUploadProgressPill";
+
+export function ComposerUploadProgressOverlay() {
+  const backgroundUpload = useBackgroundMediaUpload();
+
+  return (
+    <div className="pointer-events-auto">
+      <ComposerUploadProgressPill
+        isUploading={backgroundUpload.isUploading}
+        onCancel={cancelBackgroundMediaUploads}
+        percentage={backgroundUpload.percentage}
+      />
+    </div>
+  );
+}
diff --git a/desktop/src/features/messages/ui/MessageTimeline.tsx b/desktop/src/features/messages/ui/MessageTimeline.tsx
index 954da08b01..34e20fa381 100644
--- a/desktop/src/features/messages/ui/MessageTimeline.tsx
+++ b/desktop/src/features/messages/ui/MessageTimeline.tsx
@@ -827,8 +827,9 @@ const MessageTimelineBase = React.forwardRef<
         {!isAtBottom ? (
           <div
             className={cn(
-              "pointer-events-none absolute inset-x-0 z-50 flex justify-center px-4",
-              hasComposerOverlay ? "bottom-36" : "bottom-4",
+              "pointer-events-none absolute inset-x-0 bottom-4 z-50 flex justify-center px-4",
+              hasComposerOverlay &&
+                "translate-y-[calc(-1*var(--composer-overlay-height,8rem))] transform-gpu transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
             )}
           >
             <UnreadPill
diff --git a/desktop/src/features/messages/ui/useComposerHeightPadding.ts b/desktop/src/features/messages/ui/useComposerHeightPadding.ts
index 9990ce5066..6035ed7369 100644
--- a/desktop/src/features/messages/ui/useComposerHeightPadding.ts
+++ b/desktop/src/features/messages/ui/useComposerHeightPadding.ts
@@ -40,6 +40,11 @@ export function useComposerHeightPadding(
       return;
     }
 
+    // In CSS-variable mode the timeline controls are siblings of the scroll
+    // element. Set the measurement on their shared parent so both the virtual
+    // trailing spacer and floating controls inherit the same live height.
+    const cssVariableTarget = scrollEl.parentElement ?? scrollEl;
+
     const getScrollElement = (): HTMLElement =>
       mode === "css-variable"
         ? (scrollEl.querySelector<HTMLElement>(
@@ -79,7 +84,10 @@ export function useComposerHeightPadding(
       const wasAtBottom = isNearBottom();
 
       if (mode === "css-variable") {
-        scrollEl.style.setProperty("--composer-overlay-height", `${padding}px`);
+        cssVariableTarget.style.setProperty(
+          "--composer-overlay-height",
+          `${padding}px`,
+        );
       } else {
         scrollEl.style.paddingBottom = `${padding}px`;
       }
@@ -116,7 +124,7 @@ export function useComposerHeightPadding(
         cancelAnimationFrame(followBottomFrame);
       }
       if (mode === "css-variable") {
-        scrollEl.style.removeProperty("--composer-overlay-height");
+        cssVariableTarget.style.removeProperty("--composer-overlay-height");
       } else {
         scrollEl.style.paddingBottom = "";
       }
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index dd7a700c4d..f3ccd465c6 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -135,6 +135,61 @@ test("canceling a background upload prevents the message from publishing", async
   await expect(page.getByTestId("file-card")).toHaveCount(0);
 });
 
+test("upload progress floats above the dock and lifts Jump to latest", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.evaluate(() => {
+    const e2e = (
+      window as Window & {
+        __BUZZ_E2E__?: { mock?: { uploadDelayMs?: number } };
+      }
+    ).__BUZZ_E2E__;
+    if (e2e?.mock) e2e.mock.uploadDelayMs = 2_000;
+  });
+  await page.getByTestId("channel-deep-history").click();
+
+  const timeline = page.getByTestId("message-timeline");
+  await expect(timeline.locator("[data-message-id]").first()).toBeVisible();
+  await timeline.evaluate((element) => {
+    element.scrollTop = Math.max(500, element.scrollHeight / 2);
+    element.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+  const jumpToLatest = page.getByTestId("message-scroll-to-latest");
+  await expect(jumpToLatest).toBeVisible();
+  const restingBox = await jumpToLatest.boundingBox();
+
+  await chooseQuarterlyReport(page);
+  await page.getByTestId("send-message").click();
+  const uploadMotion = page.getByTestId("composer-upload-progress-motion");
+  await expect(uploadMotion).toBeVisible();
+  await timeline.evaluate((element) => {
+    element.scrollTop = Math.max(500, element.scrollHeight / 2);
+    element.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+  await expect(jumpToLatest).toBeVisible();
+  await page.waitForTimeout(250);
+
+  const [uploadBox, dockBackdropBox, liftedBox] = await Promise.all([
+    uploadMotion.boundingBox(),
+    page.getByTestId("composer-dock-backdrop").boundingBox(),
+    jumpToLatest.boundingBox(),
+  ]);
+  expect(restingBox).not.toBeNull();
+  expect(uploadBox).not.toBeNull();
+  expect(dockBackdropBox).not.toBeNull();
+  expect(liftedBox).not.toBeNull();
+  expect((dockBackdropBox?.y ?? 0) + 1).toBeGreaterThanOrEqual(
+    (uploadBox?.y ?? 0) + (uploadBox?.height ?? 0),
+  );
+  expect((liftedBox?.y ?? 0) + (liftedBox?.height ?? 0)).toBeLessThanOrEqual(
+    uploadBox?.y ?? 0,
+  );
+  expect(liftedBox?.y ?? 0).toBeLessThan((restingBox?.y ?? 0) - 10);
+
+  await page.getByTestId("composer-upload-cancel").click();
+});
+
 test("dropping a file on the channel column attaches it to the composer", async ({
   page,
 }) => {

From 60022c5487371b26870ae9357f1901728e3ce56e Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 14:58:08 +0100
Subject: [PATCH 03/21] Show desktop upload feedback immediately

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       |   8 +-
 desktop/src-tauri/src/commands/media_raw.rs   |  73 +++++++++++
 desktop/src-tauri/src/commands/mod.rs         |   2 +
 desktop/src-tauri/src/lib.rs                  |   2 +-
 .../lib/backgroundMediaUploadStore.ts         | 123 +++++++++++++-----
 .../messages/ui/useMentionSendFlow.ts         |  36 +++--
 desktop/src/shared/api/tauriMedia.ts          |  31 +++++
 desktop/src/testing/e2eBridge.ts              |  12 +-
 desktop/tests/e2e/file-attachment.spec.ts     |  54 ++++++++
 9 files changed, 284 insertions(+), 57 deletions(-)
 create mode 100644 desktop/src-tauri/src/commands/media_raw.rs

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index b3921be02d..10fe129936 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -741,13 +741,7 @@ pub async fn pick_and_upload_image(
     Ok(Some(descriptor))
 }
 
-/// Upload raw bytes directly (for paste and drag-drop).
-///
-/// The renderer already has the bytes in memory from the clipboard/drag event.
-/// If the bytes are a video, they're written to a temp file, transcoded via
-/// ffmpeg, and the transcoded output is uploaded instead.
-#[tauri::command]
-pub async fn upload_media_bytes(
+pub(super) async fn upload_media_bytes_inner(
     data: Vec<u8>,
     filename: Option<String>,
     progress_id: Option<String>,
diff --git a/desktop/src-tauri/src/commands/media_raw.rs b/desktop/src-tauri/src/commands/media_raw.rs
new file mode 100644
index 0000000000..747121b549
--- /dev/null
+++ b/desktop/src-tauri/src/commands/media_raw.rs
@@ -0,0 +1,73 @@
+use base64::{engine::general_purpose::URL_SAFE_NO_PAD, Engine};
+use tauri::{
+    ipc::{InvokeBody, Request},
+    State,
+};
+
+use crate::app_state::AppState;
+
+use super::media::{upload_media_bytes_inner, BlobDescriptor};
+
+/// Upload raw bytes directly (for paste and drag-drop).
+///
+/// The renderer already has the bytes in memory from the clipboard/drag event.
+/// If the bytes are a video, they're written to a temp file, transcoded via
+/// ffmpeg, and the transcoded output is uploaded instead.
+#[tauri::command]
+pub async fn upload_media_bytes(
+    data: Vec<u8>,
+    filename: Option<String>,
+    progress_id: Option<String>,
+    app: tauri::AppHandle,
+    state: State<'_, AppState>,
+) -> Result<BlobDescriptor, String> {
+    upload_media_bytes_inner(data, filename, progress_id, app, state).await
+}
+
+fn decode_raw_upload_header(value: &str) -> Result<String, String> {
+    let bytes = URL_SAFE_NO_PAD
+        .decode(value)
+        .map_err(|error| format!("invalid raw upload header: {error}"))?;
+    String::from_utf8(bytes).map_err(|error| format!("invalid raw upload header text: {error}"))
+}
+
+fn optional_raw_upload_header(request: &Request<'_>, name: &str) -> Result<Option<String>, String> {
+    request
+        .headers()
+        .get(name)
+        .map(|value| {
+            value
+                .to_str()
+                .map_err(|error| format!("invalid {name} header: {error}"))
+                .and_then(decode_raw_upload_header)
+        })
+        .transpose()
+}
+
+/// Upload raw IPC bytes without expanding a large browser File into JSON.
+#[tauri::command]
+pub async fn upload_media_bytes_raw(
+    request: Request<'_>,
+    app: tauri::AppHandle,
+    state: State<'_, AppState>,
+) -> Result<BlobDescriptor, String> {
+    let data = match request.body() {
+        InvokeBody::Raw(data) => data.clone(),
+        InvokeBody::Json(_) => return Err("raw upload requires a byte body".to_string()),
+    };
+    let filename = optional_raw_upload_header(&request, "x-buzz-filename")?;
+    let progress_id = optional_raw_upload_header(&request, "x-buzz-progress-id")?;
+
+    upload_media_bytes_inner(data, filename, progress_id, app, state).await
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_decode_raw_upload_header_preserves_unicode() {
+        let encoded = URL_SAFE_NO_PAD.encode("clip 🎬.mp4");
+        assert_eq!(decode_raw_upload_header(&encoded).unwrap(), "clip 🎬.mp4");
+    }
+}
diff --git a/desktop/src-tauri/src/commands/mod.rs b/desktop/src-tauri/src/commands/mod.rs
index 66ef7ef17b..c5e1b41f5b 100644
--- a/desktop/src-tauri/src/commands/mod.rs
+++ b/desktop/src-tauri/src/commands/mod.rs
@@ -28,6 +28,7 @@ pub(crate) mod media;
 mod media_animated;
 mod media_download;
 mod media_gif;
+mod media_raw;
 mod media_snapshot_png;
 mod media_transcode;
 #[cfg(feature = "mesh-llm")]
@@ -85,6 +86,7 @@ pub use legacy_storage::*;
 pub use link_preview::*;
 pub use media::*;
 pub use media_download::*;
+pub use media_raw::*;
 #[cfg(feature = "mesh-llm")]
 pub use mesh_llm::*;
 pub use messages::*;
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index c4b733e3e0..09c68b83e3 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -659,7 +659,6 @@ pub fn run() {
                     }
                 });
             }
-
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![
@@ -778,6 +777,7 @@ pub fn run() {
             pick_and_upload_media,
             pick_and_upload_image,
             upload_media_bytes,
+            upload_media_bytes_raw,
             download_image,
             save_png_data_url,
             download_file,
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index 9add1223a3..43f16aa80e 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -1,6 +1,7 @@
 import * as React from "react";
 
-import { type BlobDescriptor, uploadMediaBytes } from "@/shared/api/tauri";
+import type { BlobDescriptor } from "@/shared/api/tauri";
+import { uploadMediaFile } from "@/shared/api/tauriMedia";
 
 export type QueuedMediaAttachment = {
   file: File;
@@ -25,6 +26,16 @@ type EnqueueBackgroundUploadOptions = {
   onError: (error: unknown) => void;
 };
 
+type StartBackgroundUploadOptions = Omit<
+  EnqueueBackgroundUploadOptions,
+  "attachments"
+>;
+
+export type PreparedBackgroundMediaUpload = {
+  cancel: () => void;
+  start: (options: StartBackgroundUploadOptions) => boolean;
+};
+
 const tasks = new Map<number, BackgroundUploadTask>();
 const listeners = new Set<() => void>();
 let nextTaskId = 0;
@@ -102,14 +113,34 @@ function finishTask(taskId: number): void {
   }
 }
 
-export function enqueueBackgroundMediaUpload({
-  attachments,
-  onComplete,
-  onError,
-}: EnqueueBackgroundUploadOptions): void {
+function yieldForUploadFeedback(): Promise<void> {
+  if (
+    typeof window === "undefined" ||
+    typeof window.requestAnimationFrame !== "function" ||
+    document.visibilityState === "hidden"
+  ) {
+    return new Promise((resolve) => setTimeout(resolve, 0));
+  }
+
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(() => window.setTimeout(resolve, 0));
+  });
+}
+
+export function prepareBackgroundMediaUpload(
+  attachments: QueuedMediaAttachment[],
+): PreparedBackgroundMediaUpload {
   if (attachments.length === 0) {
-    void onComplete([]).catch(onError);
-    return;
+    let started = false;
+    return {
+      cancel: () => undefined,
+      start: ({ onComplete, onError }) => {
+        if (started) return false;
+        started = true;
+        void onComplete([]).catch(onError);
+        return true;
+      },
+    };
   }
 
   const taskId = nextTaskId;
@@ -119,36 +150,60 @@ export function enqueueBackgroundMediaUpload({
     fileProgress: attachments.map(() => 0),
     id: taskId,
   };
+  let started = false;
   tasks.set(taskId, task);
   rebuildSnapshot();
-  void ensureProgressListener();
 
-  void (async () => {
-    try {
-      const descriptors: BlobDescriptor[] = [];
-      for (let index = 0; index < attachments.length; index += 1) {
-        if (task.canceled) return;
-        const attachment = attachments[index];
-        const buffer = await attachment.file.arrayBuffer();
-        if (task.canceled) return;
-        const descriptor = await uploadMediaBytes(
-          [...new Uint8Array(buffer)],
-          attachment.file.name,
-          progressId(taskId, index),
-        );
-        if (task.canceled) return;
-        task.fileProgress[index] = 100;
-        rebuildSnapshot();
-        descriptors.push(descriptor);
-      }
-
-      if (!task.canceled) await onComplete(descriptors);
-    } catch (error) {
-      if (!task.canceled) onError(error);
-    } finally {
+  return {
+    cancel: () => {
+      if (task.canceled) return;
+      task.canceled = true;
       finishTask(taskId);
-    }
-  })();
+    },
+    start: ({ onComplete, onError }) => {
+      if (started || task.canceled) return false;
+      started = true;
+      void ensureProgressListener();
+
+      void (async () => {
+        try {
+          // Let React commit and paint the 0% task before file reads or native
+          // IPC begin, so large attachments never hide the initial feedback.
+          await yieldForUploadFeedback();
+          const descriptors: BlobDescriptor[] = [];
+          for (let index = 0; index < attachments.length; index += 1) {
+            if (task.canceled) return;
+            const attachment = attachments[index];
+            const descriptor = await uploadMediaFile(
+              attachment.file,
+              progressId(taskId, index),
+            );
+            if (task.canceled) return;
+            task.fileProgress[index] = 100;
+            rebuildSnapshot();
+            descriptors.push(descriptor);
+          }
+
+          if (!task.canceled) await onComplete(descriptors);
+        } catch (error) {
+          if (!task.canceled) onError(error);
+        } finally {
+          finishTask(taskId);
+        }
+      })();
+      return true;
+    },
+  };
+}
+
+export function enqueueBackgroundMediaUpload({
+  attachments,
+  onComplete,
+  onError,
+}: EnqueueBackgroundUploadOptions): PreparedBackgroundMediaUpload {
+  const preparedUpload = prepareBackgroundMediaUpload(attachments);
+  preparedUpload.start({ onComplete, onError });
+  return preparedUpload;
 }
 
 export function cancelBackgroundMediaUploads(): void {
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index 345b87fc12..cb91badf65 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -14,7 +14,7 @@ import { resolvePersonaRuntime } from "@/features/agents/lib/resolvePersonaRunti
 import { useAddChannelMembersMutation } from "@/features/channels/hooks";
 import { filterEffectiveExplicitAgentPubkeys } from "@/features/messages/lib/effectiveExplicitAgentPubkeys";
 import {
-  enqueueBackgroundMediaUpload,
+  prepareBackgroundMediaUpload,
   type QueuedMediaAttachment,
 } from "@/features/messages/lib/backgroundMediaUploadStore";
 import type { UseChannelLinksResult } from "@/features/messages/lib/useChannelLinks";
@@ -453,6 +453,11 @@ export function useMentionSendFlow({
 
       isCompleteSendPendingRef.current = true;
       setIsCompleteSendPending(true);
+      const preparedUpload =
+        draft.queuedAttachments.length > 0
+          ? prepareBackgroundMediaUpload(draft.queuedAttachments)
+          : null;
+      let uploadStarted = false;
       try {
         const readyAgentPubkeys = new Set(
           (draft.readyAgentPubkeys ?? []).map(normalizePubkey),
@@ -517,15 +522,6 @@ export function useMentionSendFlow({
             mentionPubkeys,
           );
 
-        // Replace the sent body directly with its final post-send state before
-        // the async network send starts. This avoids an intermediate blank frame
-        // for persistent audiences while preserving the ordinary empty state.
-        if (draft.capturedChannelId === channelIdRef.current) {
-          clearComposer(
-            resolvePostSendContent?.(effectiveExplicitAgentPubkeys),
-          );
-        }
-
         const send = onSendRef.current;
         const restoreComposerAfterFailure = () => {
           if (
@@ -582,9 +578,8 @@ export function useMentionSendFlow({
           }
         };
 
-        if (draft.queuedAttachments.length > 0) {
-          enqueueBackgroundMediaUpload({
-            attachments: draft.queuedAttachments,
+        if (preparedUpload) {
+          uploadStarted = preparedUpload.start({
             onComplete: async (uploaded) => {
               try {
                 await finishSend(uploaded);
@@ -599,7 +594,19 @@ export function useMentionSendFlow({
               );
             },
           });
-        } else {
+          if (!uploadStarted) return;
+        }
+
+        // Replace the sent body directly with its final post-send state before
+        // the async network send starts. This avoids an intermediate blank frame
+        // for persistent audiences while preserving the ordinary empty state.
+        if (draft.capturedChannelId === channelIdRef.current) {
+          clearComposer(
+            resolvePostSendContent?.(effectiveExplicitAgentPubkeys),
+          );
+        }
+
+        if (!preparedUpload) {
           try {
             await finishSend([]);
           } catch {
@@ -607,6 +614,7 @@ export function useMentionSendFlow({
           }
         }
       } finally {
+        if (!uploadStarted) preparedUpload?.cancel();
         isCompleteSendPendingRef.current = false;
         if (isMountedRef.current) {
           setIsCompleteSendPending(false);
diff --git a/desktop/src/shared/api/tauriMedia.ts b/desktop/src/shared/api/tauriMedia.ts
index 1dab9b7728..5bef1195d3 100644
--- a/desktop/src/shared/api/tauriMedia.ts
+++ b/desktop/src/shared/api/tauriMedia.ts
@@ -1,5 +1,36 @@
+import { invoke as invokeTauriRaw } from "@tauri-apps/api/core";
 import { type BlobDescriptor, invokeTauri } from "./tauri";
 
+function encodeRawIpcHeader(value: string): string {
+  const bytes = new TextEncoder().encode(value);
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return window
+    .btoa(binary)
+    .replaceAll("+", "-")
+    .replaceAll("/", "_")
+    .replace(/=+$/, "");
+}
+
+/** Transfer a browser File to Rust as a raw IPC body, avoiding JSON expansion. */
+export async function uploadMediaFile(
+  file: File,
+  progressId?: string,
+): Promise<BlobDescriptor> {
+  const headers: Record<string, string> = {
+    "x-buzz-filename": encodeRawIpcHeader(file.name),
+  };
+  if (progressId) {
+    headers["x-buzz-progress-id"] = encodeRawIpcHeader(progressId);
+  }
+
+  return invokeTauriRaw<BlobDescriptor>(
+    "upload_media_bytes_raw",
+    new Uint8Array(await file.arrayBuffer()),
+    { headers },
+  );
+}
+
 /**
  * Open a native single-file picker constrained to images and upload the
  * chosen file. Non-image files are rejected in Rust (via MIME sniffing)
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index d1b65ebe79..6be4d78fae 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -8629,7 +8629,7 @@ async function resolveMockUploadDescriptors(
 }
 
 async function resolveMockUploadDescriptorForBytes(
-  args: { data: number[]; filename?: string | null },
+  args: { data: number[] | Uint8Array; filename?: string | null },
   config: E2eConfig | undefined,
 ): Promise<RawBlobDescriptor> {
   const configured = config?.mock?.uploadDescriptors;
@@ -9943,6 +9943,9 @@ export function maybeInstallE2eTauriMocks() {
     const identity = getActiveIdentity(activeConfig);
     window.__BUZZ_E2E_COMMANDS__?.push(command);
     const loggedPayload = (() => {
+      if (payload instanceof Uint8Array) {
+        return { rawByteLength: payload.byteLength };
+      }
       try {
         return JSON.parse(JSON.stringify(payload ?? null));
       } catch {
@@ -11814,6 +11817,13 @@ export function maybeInstallE2eTauriMocks() {
           payload as { data: number[]; filename?: string | null },
           activeConfig,
         );
+      case "upload_media_bytes_raw":
+        return resolveMockUploadDescriptorForBytes(
+          {
+            data: payload as Uint8Array,
+          },
+          activeConfig,
+        );
       case "fetch_media_bytes": {
         // The real command fetches relay media through Rust reqwest and
         // replies with raw bytes (`tauri::ipc::Response` → ArrayBuffer). In
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index f3ccd465c6..6548107e5a 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -38,6 +38,18 @@ async function chooseQuarterlyReport(page: Page) {
   });
 }
 
+async function chooseLargeVideo(page: Page) {
+  const [chooser] = await Promise.all([
+    page.waitForEvent("filechooser"),
+    page.getByRole("button", { name: "Attach image" }).click(),
+  ]);
+  await chooser.setFiles({
+    buffer: Buffer.alloc(16 * 1024 * 1024, 1),
+    mimeType: "video/mp4",
+    name: "large-video.mp4",
+  });
+}
+
 test("upload a file and see a FileCard in the timeline", async ({ page }) => {
   await page.goto("/");
   await page.getByTestId("channel-general").click();
@@ -113,6 +125,48 @@ test("sends immediately and keeps upload progress across channels", async ({
   );
 });
 
+test("shows upload feedback before transferring a large file", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.evaluate(() => {
+    const e2e = (
+      window as Window & {
+        __BUZZ_E2E__?: { mock?: { uploadDelayMs?: number } };
+      }
+    ).__BUZZ_E2E__;
+    if (e2e?.mock) e2e.mock.uploadDelayMs = 1_000;
+  });
+  await page.getByTestId("channel-general").click();
+  await chooseLargeVideo(page);
+
+  const progress = page.getByTestId("composer-upload-progress");
+  await Promise.all([
+    page.getByTestId("send-message").click(),
+    expect(progress).toBeVisible({ timeout: 800 }),
+  ]);
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () =>
+          (
+            window as Window & {
+              __BUZZ_E2E_COMMAND_PAYLOADS__?: Array<{
+                command: string;
+                payload: { rawByteLength?: number } | null;
+              }>;
+            }
+          ).__BUZZ_E2E_COMMAND_PAYLOADS__ ?? [],
+      ),
+    )
+    .toContainEqual({
+      command: "upload_media_bytes_raw",
+      payload: { rawByteLength: 16 * 1024 * 1024 },
+    });
+
+  await page.getByTestId("composer-upload-cancel").click();
+});
+
 test("canceling a background upload prevents the message from publishing", async ({
   page,
 }) => {

From 96fa445edc79c3c4084dc4cdd10eda96feb1c9c0 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 15:17:44 +0100
Subject: [PATCH 04/21] Polish desktop upload progress colors

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../messages/ui/ComposerUploadProgressPill.tsx       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
index fe51c6adf7..3c7676bf6d 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
@@ -42,13 +42,13 @@ export function ComposerUploadProgressPill({
           <div
             aria-label={`Uploading ${percentage}%`}
             aria-live="polite"
-            className="relative h-9 w-[18.75rem] max-w-full overflow-hidden rounded-full border border-border bg-muted"
+            className="relative h-9 w-[18.75rem] max-w-full overflow-hidden rounded-full border border-primary bg-primary text-primary-foreground"
             data-testid="composer-upload-progress"
             role="status"
           >
             <motion.div
               animate={{ width: `${percentage}%` }}
-              className="absolute inset-y-0 left-0 bg-primary/[0.12] dark:bg-primary/[0.15]"
+              className="absolute inset-y-0 left-0 bg-primary-foreground/20"
               data-testid="composer-upload-progress-fill"
               initial={false}
               transition={
@@ -58,17 +58,17 @@ export function ComposerUploadProgressPill({
               }
             />
             <div className="relative flex h-full items-center gap-2 pl-3 pr-1">
-              <span className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+              <span className="min-w-0 flex-1 truncate text-sm font-semibold text-primary-foreground">
                 Uploading
-                <span className="text-muted-foreground">
+                <span className="text-primary-foreground/80">
                   {" · "}
                   {percentage}%
                 </span>
               </span>
               <button
                 className={cn(
-                  "shrink-0 rounded-full bg-transparent px-2 py-1 text-sm font-semibold text-foreground",
-                  "transition-colors hover:bg-foreground/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+                  "shrink-0 rounded-full bg-transparent px-2 py-1 text-sm font-semibold text-primary-foreground",
+                  "transition-colors hover:bg-primary-foreground/20 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-foreground",
                 )}
                 data-testid="composer-upload-cancel"
                 onClick={onCancel}

From f435c57f8ff088e4f7f2eb22f974662bfc9b7865 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 15:39:04 +0100
Subject: [PATCH 05/21] Show desktop media upload phases

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       |  61 ++------
 .../src/commands/media_upload_progress.rs     |  61 ++++++++
 desktop/src-tauri/src/commands/mod.rs         |   1 +
 .../lib/backgroundMediaUploadPhase.test.mjs   |  45 ++++++
 .../lib/backgroundMediaUploadPhase.ts         |  60 ++++++++
 .../lib/backgroundMediaUploadStore.ts         | 132 ++++++++++++------
 .../ui/ComposerUploadProgressOverlay.tsx      |   1 +
 .../ui/ComposerUploadProgressPill.tsx         |  45 +++++-
 .../features/messages/ui/MessageComposer.tsx  |   1 +
 desktop/src/testing/e2eBridge.ts              |  15 ++
 desktop/tests/e2e/file-attachment.spec.ts     |  39 +++++-
 11 files changed, 364 insertions(+), 97 deletions(-)
 create mode 100644 desktop/src-tauri/src/commands/media_upload_progress.rs
 create mode 100644 desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs
 create mode 100644 desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index 10fe129936..8f3ae0094e 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -5,15 +5,13 @@ use sha2::{Digest, Sha256};
 use tauri::State;
 
 use crate::app_state::AppState;
-use crate::relay::{
-    classify_request_error, parse_json_response, relay_api_base_url_with_override,
-    relay_error_message,
-};
+use crate::relay::{parse_json_response, relay_api_base_url_with_override, relay_error_message};
 
 use super::media_transcode::{
     has_heic_extension, is_heic_file, is_video_file, transcode_and_extract_poster,
     transcode_heic_path_to_jpeg_bytes,
 };
+use super::media_upload_progress::{emit_media_upload_phase, send_upload_attempt};
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct BlobDescriptor {
@@ -410,51 +408,6 @@ fn should_retry_legacy_upload(status: reqwest::StatusCode) -> bool {
     )
 }
 
-async fn send_upload_attempt(
-    state: &AppState,
-    url: String,
-    auth_header: &str,
-    mime: &str,
-    sha256: &str,
-    body: bytes::Bytes,
-    progress: Option<&(tauri::AppHandle, String)>,
-) -> Result<reqwest::Response, String> {
-    let req = state
-        .http_client
-        .put(url)
-        .header("Authorization", auth_header)
-        .header("Content-Type", mime)
-        .header("X-SHA-256", sha256);
-
-    let response = if let Some((app, progress_id)) = progress {
-        use tauri::Emitter;
-        let app = app.clone();
-        let progress_id = progress_id.clone();
-        let total = body.len() as u64;
-        let chunk_size = 64 * 1024;
-        let chunk_count = body.len().div_ceil(chunk_size);
-        let mut sent: u64 = 0;
-        let stream = futures_util::stream::iter((0..chunk_count).map(move |i| {
-            let start = i * chunk_size;
-            let end = usize::min(start + chunk_size, body.len());
-            let chunk = body.slice(start..end);
-            sent += chunk.len() as u64;
-            let _ = app.emit(
-                "media-upload-progress",
-                serde_json::json!({ "id": progress_id, "sent": sent, "total": total }),
-            );
-            Ok::<bytes::Bytes, std::io::Error>(chunk)
-        }));
-        req.header(reqwest::header::CONTENT_LENGTH, total)
-            .body(reqwest::Body::wrap_stream(stream))
-            .send()
-            .await
-    } else {
-        req.body(body).send().await
-    };
-    response.map_err(|error| classify_request_error(&error))
-}
-
 pub(crate) async fn upload_image_bytes(
     body: Vec<u8>,
     state: &AppState,
@@ -494,6 +447,9 @@ async fn do_upload(
         URL_SAFE_NO_PAD.encode(auth_event.as_json().as_bytes())
     );
     let body = bytes::Bytes::from(body);
+    if let Some((app, progress_id)) = progress.as_ref() {
+        emit_media_upload_phase(app, Some(progress_id.as_str()), "uploading");
+    }
     let mut resp = send_upload_attempt(
         state,
         format!("{base_url}/upload"),
@@ -752,7 +708,10 @@ pub(super) async fn upload_media_bytes_inner(
         return Err("empty upload".to_string());
     }
 
+    emit_media_upload_phase(&app, progress_id.as_deref(), "preparing");
+
     let (body, poster_bytes) = if is_video_file(&data) {
+        emit_media_upload_phase(&app, progress_id.as_deref(), "processing-video");
         // Video: write to temp → transcode + extract poster → read results.
         // All blocking I/O runs off the async runtime via spawn_blocking.
         tokio::task::spawn_blocking(move || -> Result<(Vec<u8>, Option<Vec<u8>>), String> {
@@ -770,6 +729,7 @@ pub(super) async fn upload_media_bytes_inner(
         .await
         .map_err(|e| format!("transcode task failed: {e}"))??
     } else if is_heic_file(&data) {
+        emit_media_upload_phase(&app, progress_id.as_deref(), "converting-image");
         // HEIC/HEIF still pasted/dropped: no filename here, so detection is
         // magic-bytes only. ffmpeg needs a path, so write to temp, transcode
         // to JPEG, and clean up. (Mirrors mobile's pre-upload transcode.)
@@ -795,9 +755,10 @@ pub(super) async fn upload_media_bytes_inner(
     let body = sanitize_image_for_upload(body, &mime)?;
 
     // Upload video first, then poster (best-effort).
-    let progress = progress_id.map(|id| (app, id));
+    let progress = progress_id.as_ref().map(|id| (app.clone(), id.clone()));
     let mut descriptor = do_upload(body, &mime, &state, progress).await?;
 
+    emit_media_upload_phase(&app, progress_id.as_deref(), "finishing");
     if let Some(poster) = poster_bytes {
         match do_upload(poster, "image/jpeg", &state, None).await {
             Ok(poster_desc) => descriptor.image = Some(poster_desc.url),
diff --git a/desktop/src-tauri/src/commands/media_upload_progress.rs b/desktop/src-tauri/src/commands/media_upload_progress.rs
new file mode 100644
index 0000000000..0d4fdae6a0
--- /dev/null
+++ b/desktop/src-tauri/src/commands/media_upload_progress.rs
@@ -0,0 +1,61 @@
+use tauri::Emitter;
+
+use crate::{app_state::AppState, relay::classify_request_error};
+
+pub(super) async fn send_upload_attempt(
+    state: &AppState,
+    url: String,
+    auth_header: &str,
+    mime: &str,
+    sha256: &str,
+    body: bytes::Bytes,
+    progress: Option<&(tauri::AppHandle, String)>,
+) -> Result<reqwest::Response, String> {
+    let req = state
+        .http_client
+        .put(url)
+        .header("Authorization", auth_header)
+        .header("Content-Type", mime)
+        .header("X-SHA-256", sha256);
+
+    let response = if let Some((app, progress_id)) = progress {
+        let app = app.clone();
+        let progress_id = progress_id.clone();
+        let total = body.len() as u64;
+        let chunk_size = 64 * 1024;
+        let chunk_count = body.len().div_ceil(chunk_size);
+        let mut sent: u64 = 0;
+        let stream = futures_util::stream::iter((0..chunk_count).map(move |i| {
+            let start = i * chunk_size;
+            let end = usize::min(start + chunk_size, body.len());
+            let chunk = body.slice(start..end);
+            sent += chunk.len() as u64;
+            let _ = app.emit(
+                "media-upload-progress",
+                serde_json::json!({ "id": progress_id, "sent": sent, "total": total }),
+            );
+            Ok::<bytes::Bytes, std::io::Error>(chunk)
+        }));
+        req.header(reqwest::header::CONTENT_LENGTH, total)
+            .body(reqwest::Body::wrap_stream(stream))
+            .send()
+            .await
+    } else {
+        req.body(body).send().await
+    };
+    response.map_err(|error| classify_request_error(&error))
+}
+
+pub(super) fn emit_media_upload_phase(
+    app: &tauri::AppHandle,
+    progress_id: Option<&str>,
+    phase: &'static str,
+) {
+    let Some(id) = progress_id else {
+        return;
+    };
+    let _ = app.emit(
+        "media-upload-phase",
+        serde_json::json!({ "id": id, "phase": phase }),
+    );
+}
diff --git a/desktop/src-tauri/src/commands/mod.rs b/desktop/src-tauri/src/commands/mod.rs
index c5e1b41f5b..237bc06e8d 100644
--- a/desktop/src-tauri/src/commands/mod.rs
+++ b/desktop/src-tauri/src/commands/mod.rs
@@ -31,6 +31,7 @@ mod media_gif;
 mod media_raw;
 mod media_snapshot_png;
 mod media_transcode;
+mod media_upload_progress;
 #[cfg(feature = "mesh-llm")]
 pub(crate) mod mesh_llm;
 mod messages;
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs
new file mode 100644
index 0000000000..bbb847ad44
--- /dev/null
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs
@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  backgroundMediaUploadPhaseLabel,
+  isNativeMediaUploadPhase,
+  resolveBackgroundMediaUploadPhase,
+} from "./backgroundMediaUploadPhase.ts";
+
+test("upload phase labels describe the real work in plain language", () => {
+  assert.equal(backgroundMediaUploadPhaseLabel("preparing"), "Preparing");
+  assert.equal(
+    backgroundMediaUploadPhaseLabel("processing-video"),
+    "Processing video",
+  );
+  assert.equal(
+    backgroundMediaUploadPhaseLabel("converting-image"),
+    "Converting image",
+  );
+  assert.equal(backgroundMediaUploadPhaseLabel("uploading"), "Uploading");
+  assert.equal(backgroundMediaUploadPhaseLabel("finishing"), "Finishing");
+});
+
+test("upload phase validation accepts only phases emitted by native code", () => {
+  assert.equal(isNativeMediaUploadPhase("processing-video"), true);
+  assert.equal(isNativeMediaUploadPhase("processing-files"), false);
+  assert.equal(isNativeMediaUploadPhase("transcribing"), false);
+  assert.equal(isNativeMediaUploadPhase(null), false);
+});
+
+test("upload phase aggregation favors active transfer and combines mixed work", () => {
+  assert.equal(resolveBackgroundMediaUploadPhase([]), "preparing");
+  assert.equal(
+    resolveBackgroundMediaUploadPhase(["processing-video", "uploading"]),
+    "uploading",
+  );
+  assert.equal(
+    resolveBackgroundMediaUploadPhase(["processing-video", "preparing"]),
+    "processing-files",
+  );
+  assert.equal(
+    resolveBackgroundMediaUploadPhase(["finishing", "finishing"]),
+    "finishing",
+  );
+});
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts
new file mode 100644
index 0000000000..7809cf20e2
--- /dev/null
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts
@@ -0,0 +1,60 @@
+export type BackgroundMediaUploadPhase =
+  | "preparing"
+  | "processing-video"
+  | "converting-image"
+  | "processing-files"
+  | "uploading"
+  | "finishing";
+
+export type NativeMediaUploadPhase = Exclude<
+  BackgroundMediaUploadPhase,
+  "processing-files"
+>;
+
+const NATIVE_PHASES = new Set<NativeMediaUploadPhase>([
+  "preparing",
+  "processing-video",
+  "converting-image",
+  "uploading",
+  "finishing",
+]);
+
+export function isNativeMediaUploadPhase(
+  value: unknown,
+): value is NativeMediaUploadPhase {
+  return (
+    typeof value === "string" &&
+    NATIVE_PHASES.has(value as NativeMediaUploadPhase)
+  );
+}
+
+export function resolveBackgroundMediaUploadPhase(
+  phases: BackgroundMediaUploadPhase[],
+): BackgroundMediaUploadPhase {
+  if (phases.length === 0) return "preparing";
+  if (phases.includes("uploading")) return "uploading";
+
+  const activePhases = new Set(phases.filter((phase) => phase !== "finishing"));
+  if (activePhases.size === 0) return "finishing";
+  if (activePhases.size > 1) return "processing-files";
+  return activePhases.values().next().value ?? "preparing";
+}
+
+export function backgroundMediaUploadPhaseLabel(
+  phase: BackgroundMediaUploadPhase,
+): string {
+  switch (phase) {
+    case "processing-video":
+      return "Processing video";
+    case "converting-image":
+      return "Converting image";
+    case "processing-files":
+      return "Processing files";
+    case "uploading":
+      return "Uploading";
+    case "finishing":
+      return "Finishing";
+    default:
+      return "Preparing";
+  }
+}
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index 43f16aa80e..7e6aea9647 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -2,6 +2,11 @@ import * as React from "react";
 
 import type { BlobDescriptor } from "@/shared/api/tauri";
 import { uploadMediaFile } from "@/shared/api/tauriMedia";
+import {
+  type BackgroundMediaUploadPhase,
+  isNativeMediaUploadPhase,
+  resolveBackgroundMediaUploadPhase,
+} from "./backgroundMediaUploadPhase";
 
 export type QueuedMediaAttachment = {
   file: File;
@@ -11,12 +16,14 @@ export type QueuedMediaAttachment = {
 
 type BackgroundUploadTask = {
   canceled: boolean;
+  filePhases: BackgroundMediaUploadPhase[];
   fileProgress: number[];
   id: number;
 };
 
 type BackgroundUploadSnapshot = {
   isUploading: boolean;
+  phase: BackgroundMediaUploadPhase;
   percentage: number;
 };
 
@@ -41,19 +48,24 @@ const listeners = new Set<() => void>();
 let nextTaskId = 0;
 let snapshot: BackgroundUploadSnapshot = {
   isUploading: false,
+  phase: "preparing",
   percentage: 0,
 };
-let stopProgressListener: (() => void) | null = null;
-let progressListenerPromise: Promise<void> | null = null;
+let stopUploadListeners: (() => void)[] = [];
+let uploadListenersPromise: Promise<void> | null = null;
 
 function progressId(taskId: number, fileIndex: number): string {
   return `background-media-upload-${taskId}-${fileIndex}`;
 }
 
 function rebuildSnapshot(): void {
-  const allProgress = [...tasks.values()].flatMap((task) => task.fileProgress);
+  const allTasks = [...tasks.values()];
+  const allProgress = allTasks.flatMap((task) => task.fileProgress);
   snapshot = {
     isUploading: allProgress.length > 0,
+    phase: resolveBackgroundMediaUploadPhase(
+      allTasks.flatMap((task) => task.filePhases),
+    ),
     percentage:
       allProgress.length === 0
         ? 0
@@ -65,51 +77,83 @@ function rebuildSnapshot(): void {
   for (const listener of listeners) listener();
 }
 
-async function ensureProgressListener(): Promise<void> {
-  if (stopProgressListener || progressListenerPromise) return;
-  progressListenerPromise = (async () => {
+async function ensureUploadListeners(): Promise<void> {
+  if (stopUploadListeners.length > 0) return;
+  if (uploadListenersPromise) {
+    await uploadListenersPromise;
+    return;
+  }
+  uploadListenersPromise = (async () => {
+    const disposers: (() => void)[] = [];
     try {
       const { listen } = await import("@tauri-apps/api/event");
-      const dispose = await listen<{
-        id: string;
-        sent: number;
-        total: number;
-      }>("media-upload-progress", (event) => {
-        const match = /^background-media-upload-(\d+)-(\d+)$/.exec(
-          event.payload.id,
-        );
-        if (!match || event.payload.total <= 0) return;
-
-        const task = tasks.get(Number(match[1]));
-        const fileIndex = Number(match[2]);
-        if (!task || fileIndex >= task.fileProgress.length) return;
-
-        task.fileProgress[fileIndex] = Math.min(
-          100,
-          Math.max(
-            0,
-            Math.round((event.payload.sent / event.payload.total) * 100),
-          ),
-        );
-        rebuildSnapshot();
-      });
-      if (tasks.size === 0) dispose();
-      else stopProgressListener = dispose;
+      disposers.push(
+        await listen<{
+          id: string;
+          sent: number;
+          total: number;
+        }>("media-upload-progress", (event) => {
+          const match = /^background-media-upload-(\d+)-(\d+)$/.exec(
+            event.payload.id,
+          );
+          if (!match || event.payload.total <= 0) return;
+
+          const task = tasks.get(Number(match[1]));
+          const fileIndex = Number(match[2]);
+          if (!task || fileIndex >= task.fileProgress.length) return;
+
+          task.filePhases[fileIndex] = "uploading";
+          task.fileProgress[fileIndex] = Math.min(
+            100,
+            Math.max(
+              0,
+              Math.round((event.payload.sent / event.payload.total) * 100),
+            ),
+          );
+          rebuildSnapshot();
+        }),
+      );
+      disposers.push(
+        await listen<{ id: string; phase: unknown }>(
+          "media-upload-phase",
+          (event) => {
+            const match = /^background-media-upload-(\d+)-(\d+)$/.exec(
+              event.payload.id,
+            );
+            if (!match || !isNativeMediaUploadPhase(event.payload.phase)) {
+              return;
+            }
+
+            const task = tasks.get(Number(match[1]));
+            const fileIndex = Number(match[2]);
+            if (!task || fileIndex >= task.filePhases.length) return;
+
+            task.filePhases[fileIndex] = event.payload.phase;
+            rebuildSnapshot();
+          },
+        ),
+      );
+      if (tasks.size === 0) {
+        for (const dispose of disposers) dispose();
+      } else {
+        stopUploadListeners = disposers;
+      }
     } catch {
-      // Browser and E2E runtimes do not emit native byte-level progress.
+      for (const dispose of disposers) dispose();
+      // Browser and E2E runtimes do not emit native upload state.
     } finally {
-      progressListenerPromise = null;
+      uploadListenersPromise = null;
     }
   })();
-  await progressListenerPromise;
+  await uploadListenersPromise;
 }
 
 function finishTask(taskId: number): void {
   tasks.delete(taskId);
   rebuildSnapshot();
-  if (tasks.size === 0 && stopProgressListener) {
-    stopProgressListener();
-    stopProgressListener = null;
+  if (tasks.size === 0) {
+    for (const dispose of stopUploadListeners) dispose();
+    stopUploadListeners = [];
   }
 }
 
@@ -147,6 +191,7 @@ export function prepareBackgroundMediaUpload(
   nextTaskId += 1;
   const task: BackgroundUploadTask = {
     canceled: false,
+    filePhases: attachments.map(() => "preparing"),
     fileProgress: attachments.map(() => 0),
     id: taskId,
   };
@@ -163,10 +208,10 @@ export function prepareBackgroundMediaUpload(
     start: ({ onComplete, onError }) => {
       if (started || task.canceled) return false;
       started = true;
-      void ensureProgressListener();
 
       void (async () => {
         try {
+          await ensureUploadListeners();
           // Let React commit and paint the 0% task before file reads or native
           // IPC begin, so large attachments never hide the initial feedback.
           await yieldForUploadFeedback();
@@ -179,12 +224,17 @@ export function prepareBackgroundMediaUpload(
               progressId(taskId, index),
             );
             if (task.canceled) return;
+            task.filePhases[index] = "finishing";
             task.fileProgress[index] = 100;
             rebuildSnapshot();
             descriptors.push(descriptor);
           }
 
-          if (!task.canceled) await onComplete(descriptors);
+          if (!task.canceled) {
+            task.filePhases.fill("finishing");
+            rebuildSnapshot();
+            await onComplete(descriptors);
+          }
         } catch (error) {
           if (!task.canceled) onError(error);
         } finally {
@@ -210,8 +260,8 @@ export function cancelBackgroundMediaUploads(): void {
   for (const task of tasks.values()) task.canceled = true;
   tasks.clear();
   rebuildSnapshot();
-  stopProgressListener?.();
-  stopProgressListener = null;
+  for (const dispose of stopUploadListeners) dispose();
+  stopUploadListeners = [];
 }
 
 export const resetBackgroundMediaUploads = cancelBackgroundMediaUploads;
diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
index a972b6efe3..fa13997023 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
@@ -12,6 +12,7 @@ export function ComposerUploadProgressOverlay() {
       <ComposerUploadProgressPill
         isUploading={backgroundUpload.isUploading}
         onCancel={cancelBackgroundMediaUploads}
+        phase={backgroundUpload.phase}
         percentage={backgroundUpload.percentage}
       />
     </div>
diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
index 3c7676bf6d..59ecc3e433 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
@@ -1,17 +1,27 @@
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 
+import {
+  type BackgroundMediaUploadPhase,
+  backgroundMediaUploadPhaseLabel,
+} from "@/features/messages/lib/backgroundMediaUploadPhase";
 import { cn } from "@/shared/lib/cn";
 
 export function ComposerUploadProgressPill({
   isUploading,
   onCancel,
+  phase,
   percentage,
 }: {
   isUploading: boolean;
   onCancel: () => void;
+  phase: BackgroundMediaUploadPhase;
   percentage: number;
 }) {
   const reducedMotion = useReducedMotion();
+  const phaseLabel = backgroundMediaUploadPhaseLabel(phase);
+  const phaseTransition = reducedMotion
+    ? { duration: 0 }
+    : { duration: 0.18, ease: [0.77, 0, 0.175, 1] as const };
 
   return (
     <AnimatePresence initial={false}>
@@ -40,7 +50,7 @@ export function ComposerUploadProgressPill({
           }}
         >
           <div
-            aria-label={`Uploading ${percentage}%`}
+            aria-label={`${phaseLabel} ${percentage}%`}
             aria-live="polite"
             className="relative h-9 w-[18.75rem] max-w-full overflow-hidden rounded-full border border-primary bg-primary text-primary-foreground"
             data-testid="composer-upload-progress"
@@ -59,10 +69,35 @@ export function ComposerUploadProgressPill({
             />
             <div className="relative flex h-full items-center gap-2 pl-3 pr-1">
               <span className="min-w-0 flex-1 truncate text-sm font-semibold text-primary-foreground">
-                Uploading
-                <span className="text-primary-foreground/80">
-                  {" · "}
-                  {percentage}%
+                <span className="inline-flex items-baseline">
+                  <AnimatePresence initial={false} mode="popLayout">
+                    <motion.span
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{
+                        opacity: reducedMotion ? 1 : 0,
+                        y: reducedMotion ? 0 : -2,
+                      }}
+                      initial={{
+                        opacity: reducedMotion ? 1 : 0,
+                        y: reducedMotion ? 0 : 2,
+                      }}
+                      data-testid="composer-upload-phase"
+                      key={phase}
+                      layout="position"
+                      transition={phaseTransition}
+                    >
+                      {phaseLabel}
+                    </motion.span>
+                  </AnimatePresence>
+                  <motion.span
+                    className="text-primary-foreground/80"
+                    data-testid="composer-upload-percentage"
+                    layout="position"
+                    transition={phaseTransition}
+                  >
+                    {" · "}
+                    {percentage}%
+                  </motion.span>
                 </span>
               </span>
               <button
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index e454c62be8..b3049ce8e3 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -889,6 +889,7 @@ function MessageComposerImpl({
             <ComposerUploadProgressPill
               isUploading={backgroundUpload.isUploading}
               onCancel={cancelBackgroundMediaUploads}
+              phase={backgroundUpload.phase}
               percentage={backgroundUpload.percentage}
             />
           ) : null}
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 6be4d78fae..f5a491986e 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -1051,6 +1051,15 @@ declare global {
       command: string;
       payload: unknown;
     }>;
+    __BUZZ_E2E_EMIT_MEDIA_UPLOAD_PHASE__?: (input: {
+      id: string;
+      phase: string;
+    }) => Promise<void>;
+    __BUZZ_E2E_EMIT_MEDIA_UPLOAD_PROGRESS__?: (input: {
+      id: string;
+      sent: number;
+      total: number;
+    }) => Promise<void>;
     __BUZZ_E2E_WEBVIEW_ZOOM__?: number;
     __BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?: (input: {
       channelName: string;
@@ -9638,6 +9647,12 @@ export function maybeInstallE2eTauriMocks() {
   window.__BUZZ_E2E_COMMAND_LOG__ = [];
   window.__BUZZ_E2E_SIGNED_EVENTS__ = [];
   window.__BUZZ_E2E_WEBVIEW_ZOOM__ = 1;
+  window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PHASE__ = async (input) => {
+    await emit("media-upload-phase", input);
+  };
+  window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PROGRESS__ = async (input) => {
+    await emit("media-upload-progress", input);
+  };
   window.__BUZZ_E2E_SET_MOCK_HUDDLE_SNAPSHOT__ = async ({
     members,
     transcriptionEnabled,
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index 6548107e5a..cc8b4a03cc 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import type { Page } from "@playwright/test";
 
+import { waitForAnimations } from "../helpers/animations";
 import { installMockBridge } from "../helpers/bridge";
 import { expectCornerRadiusPx, expectSmoothCorners } from "../helpers/css";
 
@@ -135,7 +136,7 @@ test("shows upload feedback before transferring a large file", async ({
         __BUZZ_E2E__?: { mock?: { uploadDelayMs?: number } };
       }
     ).__BUZZ_E2E__;
-    if (e2e?.mock) e2e.mock.uploadDelayMs = 1_000;
+    if (e2e?.mock) e2e.mock.uploadDelayMs = 5_000;
   });
   await page.getByTestId("channel-general").click();
   await chooseLargeVideo(page);
@@ -145,6 +146,7 @@ test("shows upload feedback before transferring a large file", async ({
     page.getByTestId("send-message").click(),
     expect(progress).toBeVisible({ timeout: 800 }),
   ]);
+  await expect(progress).toHaveAttribute("aria-label", "Preparing 0%");
   await expect
     .poll(() =>
       page.evaluate(
@@ -164,6 +166,41 @@ test("shows upload feedback before transferring a large file", async ({
       payload: { rawByteLength: 16 * 1024 * 1024 },
     });
 
+  const uploadId = "background-media-upload-0-0";
+  await page.evaluate(async (id) => {
+    await window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PHASE__?.({
+      id,
+      phase: "processing-video",
+    });
+  }, uploadId);
+  await expect(progress).toHaveAttribute("aria-label", "Processing video 0%");
+  await waitForAnimations(page);
+  const processingPercentageBox = await page
+    .getByTestId("composer-upload-percentage")
+    .boundingBox();
+
+  await page.evaluate(async (id) => {
+    await window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PHASE__?.({
+      id,
+      phase: "uploading",
+    });
+    await window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PROGRESS__?.({
+      id,
+      sent: 42,
+      total: 100,
+    });
+  }, uploadId);
+  await expect(progress).toHaveAttribute("aria-label", "Uploading 42%");
+  await waitForAnimations(page);
+  const uploadingPercentageBox = await page
+    .getByTestId("composer-upload-percentage")
+    .boundingBox();
+  expect(processingPercentageBox).not.toBeNull();
+  expect(uploadingPercentageBox).not.toBeNull();
+  expect(uploadingPercentageBox?.x ?? 0).toBeLessThan(
+    processingPercentageBox?.x ?? 0,
+  );
+
   await page.getByTestId("composer-upload-cancel").click();
 });
 

From 891fc43fb1f4b647b2fa33f21f37b723234f583a Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 15:46:25 +0100
Subject: [PATCH 06/21] Shorten desktop upload phase labels

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../messages/lib/backgroundMediaUploadPhase.test.mjs      | 8 ++++++--
 .../features/messages/lib/backgroundMediaUploadPhase.ts   | 6 +++---
 desktop/tests/e2e/file-attachment.spec.ts                 | 2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs
index bbb847ad44..ed4ab860f7 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.test.mjs
@@ -11,11 +11,15 @@ test("upload phase labels describe the real work in plain language", () => {
   assert.equal(backgroundMediaUploadPhaseLabel("preparing"), "Preparing");
   assert.equal(
     backgroundMediaUploadPhaseLabel("processing-video"),
-    "Processing video",
+    "Processing",
   );
   assert.equal(
     backgroundMediaUploadPhaseLabel("converting-image"),
-    "Converting image",
+    "Converting",
+  );
+  assert.equal(
+    backgroundMediaUploadPhaseLabel("processing-files"),
+    "Processing",
   );
   assert.equal(backgroundMediaUploadPhaseLabel("uploading"), "Uploading");
   assert.equal(backgroundMediaUploadPhaseLabel("finishing"), "Finishing");
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts
index 7809cf20e2..0d8a98f2ff 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadPhase.ts
@@ -45,11 +45,11 @@ export function backgroundMediaUploadPhaseLabel(
 ): string {
   switch (phase) {
     case "processing-video":
-      return "Processing video";
+      return "Processing";
     case "converting-image":
-      return "Converting image";
+      return "Converting";
     case "processing-files":
-      return "Processing files";
+      return "Processing";
     case "uploading":
       return "Uploading";
     case "finishing":
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index cc8b4a03cc..e0b3028c48 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -173,7 +173,7 @@ test("shows upload feedback before transferring a large file", async ({
       phase: "processing-video",
     });
   }, uploadId);
-  await expect(progress).toHaveAttribute("aria-label", "Processing video 0%");
+  await expect(progress).toHaveAttribute("aria-label", "Processing 0%");
   await waitForAnimations(page);
   const processingPercentageBox = await page
     .getByTestId("composer-upload-percentage")

From 5697f36adae1cb88b6c8c5acca0d98bf3bf3bbb5 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 15:52:13 +0100
Subject: [PATCH 07/21] Space desktop upload progress label

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../messages/ui/ComposerUploadProgressPill.tsx         |  4 ++--
 desktop/tests/e2e/file-attachment.spec.ts              | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
index 59ecc3e433..94fe60ea9d 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
@@ -90,12 +90,12 @@ export function ComposerUploadProgressPill({
                     </motion.span>
                   </AnimatePresence>
                   <motion.span
-                    className="text-primary-foreground/80"
+                    className="ml-1 text-primary-foreground/80"
                     data-testid="composer-upload-percentage"
                     layout="position"
                     transition={phaseTransition}
                   >
-                    {" · "}
+                    {"· "}
                     {percentage}%
                   </motion.span>
                 </span>
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index e0b3028c48..7c0205ccd6 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -175,9 +175,18 @@ test("shows upload feedback before transferring a large file", async ({
   }, uploadId);
   await expect(progress).toHaveAttribute("aria-label", "Processing 0%");
   await waitForAnimations(page);
+  const processingPhaseBox = await page
+    .getByTestId("composer-upload-phase")
+    .boundingBox();
   const processingPercentageBox = await page
     .getByTestId("composer-upload-percentage")
     .boundingBox();
+  expect(processingPhaseBox).not.toBeNull();
+  expect(processingPercentageBox).not.toBeNull();
+  expect(
+    (processingPercentageBox?.x ?? 0) -
+      ((processingPhaseBox?.x ?? 0) + (processingPhaseBox?.width ?? 0)),
+  ).toBeGreaterThanOrEqual(3);
 
   await page.evaluate(async (id) => {
     await window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PHASE__?.({
@@ -195,7 +204,6 @@ test("shows upload feedback before transferring a large file", async ({
   const uploadingPercentageBox = await page
     .getByTestId("composer-upload-percentage")
     .boundingBox();
-  expect(processingPercentageBox).not.toBeNull();
   expect(uploadingPercentageBox).not.toBeNull();
   expect(uploadingPercentageBox?.x ?? 0).toBeLessThan(
     processingPercentageBox?.x ?? 0,

From d47e8d6f293ebad56a5333f527d6023851806ae2 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 16:07:10 +0100
Subject: [PATCH 08/21] Show spinner before desktop media transfer

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../ui/ComposerUploadProgressPill.tsx         | 57 +++++++++++++++++--
 desktop/tests/e2e/file-attachment.spec.ts     | 25 ++++----
 2 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
index 94fe60ea9d..624ec9b6e0 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
@@ -5,6 +5,7 @@ import {
   backgroundMediaUploadPhaseLabel,
 } from "@/features/messages/lib/backgroundMediaUploadPhase";
 import { cn } from "@/shared/lib/cn";
+import { Spinner } from "@/shared/ui/spinner";
 
 export function ComposerUploadProgressPill({
   isUploading,
@@ -19,6 +20,7 @@ export function ComposerUploadProgressPill({
 }) {
   const reducedMotion = useReducedMotion();
   const phaseLabel = backgroundMediaUploadPhaseLabel(phase);
+  const isTransferring = phase === "uploading";
   const phaseTransition = reducedMotion
     ? { duration: 0 }
     : { duration: 0.18, ease: [0.77, 0, 0.175, 1] as const };
@@ -50,7 +52,9 @@ export function ComposerUploadProgressPill({
           }}
         >
           <div
-            aria-label={`${phaseLabel} ${percentage}%`}
+            aria-label={
+              isTransferring ? `${phaseLabel} ${percentage}%` : phaseLabel
+            }
             aria-live="polite"
             className="relative h-9 w-[18.75rem] max-w-full overflow-hidden rounded-full border border-primary bg-primary text-primary-foreground"
             data-testid="composer-upload-progress"
@@ -90,13 +94,56 @@ export function ComposerUploadProgressPill({
                     </motion.span>
                   </AnimatePresence>
                   <motion.span
-                    className="ml-1 text-primary-foreground/80"
-                    data-testid="composer-upload-percentage"
+                    className="ml-1 inline-flex items-center text-primary-foreground/80"
+                    data-testid="composer-upload-status"
                     layout="position"
                     transition={phaseTransition}
                   >
-                    {"· "}
-                    {percentage}%
+                    <span aria-hidden="true">·</span>
+                    <AnimatePresence initial={false} mode="popLayout">
+                      {isTransferring ? (
+                        <motion.span
+                          animate={{ opacity: 1, y: 0 }}
+                          className="ml-1"
+                          data-testid="composer-upload-percentage"
+                          exit={{
+                            opacity: reducedMotion ? 1 : 0,
+                            y: reducedMotion ? 0 : -2,
+                          }}
+                          initial={{
+                            opacity: reducedMotion ? 1 : 0,
+                            y: reducedMotion ? 0 : 2,
+                          }}
+                          key="percentage"
+                          layout="position"
+                          transition={phaseTransition}
+                        >
+                          {percentage}%
+                        </motion.span>
+                      ) : (
+                        <motion.span
+                          animate={{ opacity: 1, y: 0 }}
+                          className="ml-1 inline-flex"
+                          data-testid="composer-upload-spinner"
+                          exit={{
+                            opacity: reducedMotion ? 1 : 0,
+                            y: reducedMotion ? 0 : -2,
+                          }}
+                          initial={{
+                            opacity: reducedMotion ? 1 : 0,
+                            y: reducedMotion ? 0 : 2,
+                          }}
+                          key="spinner"
+                          layout="position"
+                          transition={phaseTransition}
+                        >
+                          <Spinner
+                            aria-hidden="true"
+                            className="size-3.5 border-2"
+                          />
+                        </motion.span>
+                      )}
+                    </AnimatePresence>
                   </motion.span>
                 </span>
               </span>
diff --git a/desktop/tests/e2e/file-attachment.spec.ts b/desktop/tests/e2e/file-attachment.spec.ts
index 7c0205ccd6..699e711984 100644
--- a/desktop/tests/e2e/file-attachment.spec.ts
+++ b/desktop/tests/e2e/file-attachment.spec.ts
@@ -146,7 +146,9 @@ test("shows upload feedback before transferring a large file", async ({
     page.getByTestId("send-message").click(),
     expect(progress).toBeVisible({ timeout: 800 }),
   ]);
-  await expect(progress).toHaveAttribute("aria-label", "Preparing 0%");
+  await expect(progress).toHaveAttribute("aria-label", "Preparing");
+  await expect(page.getByTestId("composer-upload-spinner")).toBeVisible();
+  await expect(page.getByTestId("composer-upload-percentage")).toHaveCount(0);
   await expect
     .poll(() =>
       page.evaluate(
@@ -173,20 +175,22 @@ test("shows upload feedback before transferring a large file", async ({
       phase: "processing-video",
     });
   }, uploadId);
-  await expect(progress).toHaveAttribute("aria-label", "Processing 0%");
+  await expect(progress).toHaveAttribute("aria-label", "Processing");
   await waitForAnimations(page);
   const processingPhaseBox = await page
     .getByTestId("composer-upload-phase")
     .boundingBox();
-  const processingPercentageBox = await page
-    .getByTestId("composer-upload-percentage")
+  const processingStatusBox = await page
+    .getByTestId("composer-upload-status")
     .boundingBox();
   expect(processingPhaseBox).not.toBeNull();
-  expect(processingPercentageBox).not.toBeNull();
+  expect(processingStatusBox).not.toBeNull();
   expect(
-    (processingPercentageBox?.x ?? 0) -
+    (processingStatusBox?.x ?? 0) -
       ((processingPhaseBox?.x ?? 0) + (processingPhaseBox?.width ?? 0)),
   ).toBeGreaterThanOrEqual(3);
+  await expect(page.getByTestId("composer-upload-spinner")).toBeVisible();
+  await expect(page.getByTestId("composer-upload-percentage")).toHaveCount(0);
 
   await page.evaluate(async (id) => {
     await window.__BUZZ_E2E_EMIT_MEDIA_UPLOAD_PHASE__?.({
@@ -201,12 +205,9 @@ test("shows upload feedback before transferring a large file", async ({
   }, uploadId);
   await expect(progress).toHaveAttribute("aria-label", "Uploading 42%");
   await waitForAnimations(page);
-  const uploadingPercentageBox = await page
-    .getByTestId("composer-upload-percentage")
-    .boundingBox();
-  expect(uploadingPercentageBox).not.toBeNull();
-  expect(uploadingPercentageBox?.x ?? 0).toBeLessThan(
-    processingPercentageBox?.x ?? 0,
+  await expect(page.getByTestId("composer-upload-spinner")).toHaveCount(0);
+  await expect(page.getByTestId("composer-upload-percentage")).toHaveText(
+    "42%",
   );
 
   await page.getByTestId("composer-upload-cancel").click();

From 4c579d4df403c0836355d8c5705ef091dc4c2146 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 16:20:34 +0100
Subject: [PATCH 09/21] Address deferred upload review feedback

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       | 30 ++++++--
 desktop/src-tauri/src/commands/media_raw.rs   | 28 +++++++-
 .../src/commands/media_upload_progress.rs     | 60 ++++++++++++++--
 desktop/src-tauri/src/lib.rs                  |  2 +-
 .../src/features/channels/ui/ChannelPane.tsx  |  1 +
 .../channels/useChannelPaneHandlers.ts        |  5 +-
 .../lib/backgroundMediaUploadStore.ts         | 69 ++++++++++++-------
 .../features/messages/lib/useDrafts.test.mjs  | 14 ++++
 .../src/features/messages/lib/useDrafts.ts    | 22 ++++--
 .../features/messages/lib/useMediaUpload.ts   | 22 +++++-
 .../messages/ui/ComposerAttachments.tsx       | 32 +++++++++
 .../features/messages/ui/MessageComposer.tsx  | 22 +++---
 .../messages/ui/MessageComposer.types.ts      |  2 +
 .../features/messages/ui/submitMessageEdit.ts | 12 +++-
 .../messages/ui/useDraftPersistSnapshot.ts    |  6 ++
 .../messages/ui/useMentionSendFlow.ts         | 19 ++++-
 desktop/src/shared/api/tauriMedia.ts          |  5 ++
 17 files changed, 286 insertions(+), 65 deletions(-)

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index 8f3ae0094e..96c54ef705 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -3,6 +3,7 @@ use nostr::{EventBuilder, JsonUtil, Keys, Kind, Tag, Timestamp};
 use serde::{Deserialize, Serialize};
 use sha2::{Digest, Sha256};
 use tauri::State;
+use tokio_util::sync::CancellationToken;
 
 use crate::app_state::AppState;
 use crate::relay::{parse_json_response, relay_api_base_url_with_override, relay_error_message};
@@ -417,7 +418,7 @@ pub(crate) async fn upload_image_bytes(
         return Err("profile avatar must be an image".to_string());
     }
     let body = sanitize_image_for_upload(body, &mime)?;
-    do_upload(body, &mime, state, None).await
+    do_upload(body, &mime, state, None, None).await
 }
 
 async fn do_upload(
@@ -425,6 +426,7 @@ async fn do_upload(
     mime: &str,
     state: &AppState,
     progress: Option<(tauri::AppHandle, String)>,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<BlobDescriptor, String> {
     let sha256 = hex::encode(Sha256::digest(&body));
 
@@ -458,6 +460,7 @@ async fn do_upload(
         &sha256,
         body.clone(),
         progress.as_ref(),
+        cancellation,
     )
     .await?;
     if should_retry_legacy_upload(resp.status()) {
@@ -469,6 +472,7 @@ async fn do_upload(
             &sha256,
             body,
             progress.as_ref(),
+            cancellation,
         )
         .await?;
     }
@@ -515,7 +519,7 @@ pub async fn upload_media(
 
     let mime = detect_and_validate_mime(&body)?;
     let body = sanitize_image_for_upload(body, &mime)?;
-    do_upload(body, &mime, &state, None).await
+    do_upload(body, &mime, &state, None, None).await
 }
 
 /// Read a picked path through the TOCTOU-safe pipeline (fd pin → sniff →
@@ -596,9 +600,9 @@ async fn process_picked_path(
 
     // Upload video first, then poster (best-effort). If poster upload fails,
     // the video descriptor is returned without an image field.
-    let mut descriptor = do_upload(body, &mime, state, progress).await?;
+    let mut descriptor = do_upload(body, &mime, state, progress, None).await?;
     if let Some(poster) = poster_bytes {
-        match do_upload(poster, "image/jpeg", state, None).await {
+        match do_upload(poster, "image/jpeg", state, None, None).await {
             Ok(poster_desc) => descriptor.image = Some(poster_desc.url),
             Err(e) => eprintln!("buzz-desktop: poster upload failed (non-fatal): {e}"),
         }
@@ -703,13 +707,22 @@ pub(super) async fn upload_media_bytes_inner(
     progress_id: Option<String>,
     app: tauri::AppHandle,
     state: State<'_, AppState>,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<BlobDescriptor, String> {
     if data.is_empty() {
         return Err("empty upload".to_string());
     }
 
+    if cancellation.is_some_and(CancellationToken::is_cancelled) {
+        return Err("upload cancelled".to_string());
+    }
+
     emit_media_upload_phase(&app, progress_id.as_deref(), "preparing");
 
+    let heic_by_extension = filename
+        .as_deref()
+        .is_some_and(|name| has_heic_extension(std::path::Path::new(name)));
+
     let (body, poster_bytes) = if is_video_file(&data) {
         emit_media_upload_phase(&app, progress_id.as_deref(), "processing-video");
         // Video: write to temp → transcode + extract poster → read results.
@@ -728,7 +741,7 @@ pub(super) async fn upload_media_bytes_inner(
         })
         .await
         .map_err(|e| format!("transcode task failed: {e}"))??
-    } else if is_heic_file(&data) {
+    } else if is_heic_file(&data) || heic_by_extension {
         emit_media_upload_phase(&app, progress_id.as_deref(), "converting-image");
         // HEIC/HEIF still pasted/dropped: no filename here, so detection is
         // magic-bytes only. ffmpeg needs a path, so write to temp, transcode
@@ -756,11 +769,14 @@ pub(super) async fn upload_media_bytes_inner(
 
     // Upload video first, then poster (best-effort).
     let progress = progress_id.as_ref().map(|id| (app.clone(), id.clone()));
-    let mut descriptor = do_upload(body, &mime, &state, progress).await?;
+    if cancellation.is_some_and(CancellationToken::is_cancelled) {
+        return Err("upload cancelled".to_string());
+    }
+    let mut descriptor = do_upload(body, &mime, &state, progress, cancellation).await?;
 
     emit_media_upload_phase(&app, progress_id.as_deref(), "finishing");
     if let Some(poster) = poster_bytes {
-        match do_upload(poster, "image/jpeg", &state, None).await {
+        match do_upload(poster, "image/jpeg", &state, None, cancellation).await {
             Ok(poster_desc) => descriptor.image = Some(poster_desc.url),
             Err(e) => eprintln!("buzz-desktop: poster upload failed (non-fatal): {e}"),
         }
diff --git a/desktop/src-tauri/src/commands/media_raw.rs b/desktop/src-tauri/src/commands/media_raw.rs
index 747121b549..b99a44a6fa 100644
--- a/desktop/src-tauri/src/commands/media_raw.rs
+++ b/desktop/src-tauri/src/commands/media_raw.rs
@@ -6,7 +6,13 @@ use tauri::{
 
 use crate::app_state::AppState;
 
-use super::media::{upload_media_bytes_inner, BlobDescriptor};
+use super::{
+    media::{upload_media_bytes_inner, BlobDescriptor},
+    media_upload_progress::{
+        begin_media_upload, cancel_media_upload as cancel_registered_media_upload,
+        finish_media_upload,
+    },
+};
 
 /// Upload raw bytes directly (for paste and drag-drop).
 ///
@@ -21,7 +27,7 @@ pub async fn upload_media_bytes(
     app: tauri::AppHandle,
     state: State<'_, AppState>,
 ) -> Result<BlobDescriptor, String> {
-    upload_media_bytes_inner(data, filename, progress_id, app, state).await
+    upload_media_bytes_inner(data, filename, progress_id, app, state, None).await
 }
 
 fn decode_raw_upload_header(value: &str) -> Result<String, String> {
@@ -44,6 +50,11 @@ fn optional_raw_upload_header(request: &Request<'_>, name: &str) -> Result<Optio
         .transpose()
 }
 
+#[tauri::command]
+pub fn cancel_media_upload(progress_id: String) {
+    cancel_registered_media_upload(&progress_id);
+}
+
 /// Upload raw IPC bytes without expanding a large browser File into JSON.
 #[tauri::command]
 pub async fn upload_media_bytes_raw(
@@ -58,7 +69,18 @@ pub async fn upload_media_bytes_raw(
     let filename = optional_raw_upload_header(&request, "x-buzz-filename")?;
     let progress_id = optional_raw_upload_header(&request, "x-buzz-progress-id")?;
 
-    upload_media_bytes_inner(data, filename, progress_id, app, state).await
+    let cancellation = begin_media_upload(progress_id.as_deref());
+    let result = upload_media_bytes_inner(
+        data,
+        filename,
+        progress_id.clone(),
+        app,
+        state,
+        cancellation.as_ref(),
+    )
+    .await;
+    finish_media_upload(progress_id.as_deref());
+    result
 }
 
 #[cfg(test)]
diff --git a/desktop/src-tauri/src/commands/media_upload_progress.rs b/desktop/src-tauri/src/commands/media_upload_progress.rs
index 0d4fdae6a0..67fef2e5d5 100644
--- a/desktop/src-tauri/src/commands/media_upload_progress.rs
+++ b/desktop/src-tauri/src/commands/media_upload_progress.rs
@@ -1,7 +1,42 @@
+use std::{
+    collections::HashMap,
+    sync::{LazyLock, Mutex},
+};
+
 use tauri::Emitter;
+use tokio_util::sync::CancellationToken;
 
 use crate::{app_state::AppState, relay::classify_request_error};
 
+static MEDIA_UPLOAD_CANCELLATIONS: LazyLock<Mutex<HashMap<String, CancellationToken>>> =
+    LazyLock::new(|| Mutex::new(HashMap::new()));
+
+pub(super) fn begin_media_upload(progress_id: Option<&str>) -> Option<CancellationToken> {
+    let progress_id = progress_id?;
+    let cancel = CancellationToken::new();
+    if let Ok(mut uploads) = MEDIA_UPLOAD_CANCELLATIONS.lock() {
+        uploads.insert(progress_id.to_string(), cancel.clone());
+    }
+    Some(cancel)
+}
+
+pub(super) fn cancel_media_upload(progress_id: &str) {
+    if let Ok(uploads) = MEDIA_UPLOAD_CANCELLATIONS.lock() {
+        if let Some(cancel) = uploads.get(progress_id) {
+            cancel.cancel();
+        }
+    }
+}
+
+pub(super) fn finish_media_upload(progress_id: Option<&str>) {
+    let Some(progress_id) = progress_id else {
+        return;
+    };
+    if let Ok(mut uploads) = MEDIA_UPLOAD_CANCELLATIONS.lock() {
+        uploads.remove(progress_id);
+    }
+}
+
 pub(super) async fn send_upload_attempt(
     state: &AppState,
     url: String,
@@ -10,6 +45,7 @@ pub(super) async fn send_upload_attempt(
     sha256: &str,
     body: bytes::Bytes,
     progress: Option<&(tauri::AppHandle, String)>,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<reqwest::Response, String> {
     let req = state
         .http_client
@@ -36,12 +72,28 @@ pub(super) async fn send_upload_attempt(
             );
             Ok::<bytes::Bytes, std::io::Error>(chunk)
         }));
-        req.header(reqwest::header::CONTENT_LENGTH, total)
+        let request = req
+            .header(reqwest::header::CONTENT_LENGTH, total)
             .body(reqwest::Body::wrap_stream(stream))
-            .send()
-            .await
+            .send();
+        if let Some(cancellation) = cancellation {
+            tokio::select! {
+                _ = cancellation.cancelled() => return Err("upload cancelled".to_string()),
+                response = request => response,
+            }
+        } else {
+            request.await
+        }
     } else {
-        req.body(body).send().await
+        let request = req.body(body).send();
+        if let Some(cancellation) = cancellation {
+            tokio::select! {
+                _ = cancellation.cancelled() => return Err("upload cancelled".to_string()),
+                response = request => response,
+            }
+        } else {
+            request.await
+        }
     };
     response.map_err(|error| classify_request_error(&error))
 }
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index 09c68b83e3..ed804f29cf 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -778,6 +778,7 @@ pub fn run() {
             pick_and_upload_image,
             upload_media_bytes,
             upload_media_bytes_raw,
+            cancel_media_upload,
             download_image,
             save_png_data_url,
             download_file,
@@ -946,7 +947,6 @@ pub fn run() {
         ])
         .build(tauri::generate_context!())
         .expect("error while building tauri application");
-
     let shutdown_done = Arc::new(AtomicBool::new(false));
 
     #[cfg(unix)]
diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 8d29e1a7a9..4dc8ad54d6 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -777,6 +777,7 @@ export const ChannelPane = React.memo(function ChannelPane({
                   }
                   onSend={handleSendMessage}
                   profiles={profiles}
+                  showBackgroundUploadProgress={false}
                   placeholder={
                     timeoutState.active
                       ? "You're timed out by community moderators."
diff --git a/desktop/src/features/channels/useChannelPaneHandlers.ts b/desktop/src/features/channels/useChannelPaneHandlers.ts
index 53170257a4..40382092d1 100644
--- a/desktop/src/features/channels/useChannelPaneHandlers.ts
+++ b/desktop/src/features/channels/useChannelPaneHandlers.ts
@@ -150,8 +150,9 @@ export function useChannelPaneHandlers({
       content: string,
       mediaTags?: string[][],
       mentionPubkeys?: string[],
+      capturedEventId?: string,
     ) => {
-      const eventId = editTargetIdRef.current;
+      const eventId = capturedEventId ?? editTargetIdRef.current;
       if (!eventId) {
         return;
       }
@@ -178,7 +179,7 @@ export function useChannelPaneHandlers({
         mediaTags,
         mentionPubkeys,
       });
-      setEditTargetId(null);
+      setEditTargetId((current) => (current === eventId ? null : current));
     },
     [onRequestEmptyEditDelete, setEditTargetId],
   );
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index 7e6aea9647..809bf4a7ad 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import type { BlobDescriptor } from "@/shared/api/tauri";
-import { uploadMediaFile } from "@/shared/api/tauriMedia";
+import { cancelMediaUpload, uploadMediaFile } from "@/shared/api/tauriMedia";
 import {
   type BackgroundMediaUploadPhase,
   isNativeMediaUploadPhase,
@@ -12,13 +12,15 @@ export type QueuedMediaAttachment = {
   file: File;
   id: number;
   previewUrl?: string;
+  spoilered: boolean;
 };
 
 type BackgroundUploadTask = {
   canceled: boolean;
   filePhases: BackgroundMediaUploadPhase[];
-  fileProgress: number[];
+  fileProgress: Array<{ sent: number; total: number }>;
   id: number;
+  onCancel?: () => void;
 };
 
 type BackgroundUploadSnapshot = {
@@ -29,6 +31,7 @@ type BackgroundUploadSnapshot = {
 
 type EnqueueBackgroundUploadOptions = {
   attachments: QueuedMediaAttachment[];
+  onCancel?: () => void;
   onComplete: (descriptors: BlobDescriptor[]) => Promise<void>;
   onError: (error: unknown) => void;
 };
@@ -61,18 +64,21 @@ function progressId(taskId: number, fileIndex: number): string {
 function rebuildSnapshot(): void {
   const allTasks = [...tasks.values()];
   const allProgress = allTasks.flatMap((task) => task.fileProgress);
+  const totalBytes = allProgress.reduce(
+    (total, progress) => total + progress.total,
+    0,
+  );
+  const sentBytes = allProgress.reduce(
+    (total, progress) => total + progress.sent,
+    0,
+  );
   snapshot = {
-    isUploading: allProgress.length > 0,
+    isUploading: allTasks.length > 0,
     phase: resolveBackgroundMediaUploadPhase(
       allTasks.flatMap((task) => task.filePhases),
     ),
     percentage:
-      allProgress.length === 0
-        ? 0
-        : Math.round(
-            allProgress.reduce((total, progress) => total + progress, 0) /
-              allProgress.length,
-          ),
+      totalBytes === 0 ? 0 : Math.round((sentBytes / totalBytes) * 100),
   };
   for (const listener of listeners) listener();
 }
@@ -103,13 +109,13 @@ async function ensureUploadListeners(): Promise<void> {
           if (!task || fileIndex >= task.fileProgress.length) return;
 
           task.filePhases[fileIndex] = "uploading";
-          task.fileProgress[fileIndex] = Math.min(
-            100,
-            Math.max(
-              0,
-              Math.round((event.payload.sent / event.payload.total) * 100),
+          task.fileProgress[fileIndex] = {
+            sent: Math.min(
+              event.payload.total,
+              Math.max(0, event.payload.sent),
             ),
-          );
+            total: event.payload.total,
+          };
           rebuildSnapshot();
         }),
       );
@@ -157,6 +163,16 @@ function finishTask(taskId: number): void {
   }
 }
 
+function cancelTask(task: BackgroundUploadTask): void {
+  if (task.canceled) return;
+  task.canceled = true;
+  task.onCancel?.();
+  for (let index = 0; index < task.fileProgress.length; index += 1) {
+    void cancelMediaUpload(progressId(task.id, index)).catch(() => undefined);
+  }
+  finishTask(task.id);
+}
+
 function yieldForUploadFeedback(): Promise<void> {
   if (
     typeof window === "undefined" ||
@@ -192,7 +208,10 @@ export function prepareBackgroundMediaUpload(
   const task: BackgroundUploadTask = {
     canceled: false,
     filePhases: attachments.map(() => "preparing"),
-    fileProgress: attachments.map(() => 0),
+    fileProgress: attachments.map((attachment) => ({
+      sent: 0,
+      total: attachment.file.size,
+    })),
     id: taskId,
   };
   let started = false;
@@ -201,13 +220,12 @@ export function prepareBackgroundMediaUpload(
 
   return {
     cancel: () => {
-      if (task.canceled) return;
-      task.canceled = true;
-      finishTask(taskId);
+      cancelTask(task);
     },
-    start: ({ onComplete, onError }) => {
+    start: ({ onCancel, onComplete, onError }) => {
       if (started || task.canceled) return false;
       started = true;
+      task.onCancel = onCancel;
 
       void (async () => {
         try {
@@ -225,7 +243,10 @@ export function prepareBackgroundMediaUpload(
             );
             if (task.canceled) return;
             task.filePhases[index] = "finishing";
-            task.fileProgress[index] = 100;
+            task.fileProgress[index] = {
+              sent: task.fileProgress[index].total,
+              total: task.fileProgress[index].total,
+            };
             rebuildSnapshot();
             descriptors.push(descriptor);
           }
@@ -257,11 +278,7 @@ export function enqueueBackgroundMediaUpload({
 }
 
 export function cancelBackgroundMediaUploads(): void {
-  for (const task of tasks.values()) task.canceled = true;
-  tasks.clear();
-  rebuildSnapshot();
-  for (const dispose of stopUploadListeners) dispose();
-  stopUploadListeners = [];
+  for (const task of [...tasks.values()]) cancelTask(task);
 }
 
 export const resetBackgroundMediaUploads = cancelBackgroundMediaUploads;
diff --git a/desktop/src/features/messages/lib/useDrafts.test.mjs b/desktop/src/features/messages/lib/useDrafts.test.mjs
index c66c607b9a..e4741baa8b 100644
--- a/desktop/src/features/messages/lib/useDrafts.test.mjs
+++ b/desktop/src/features/messages/lib/useDrafts.test.mjs
@@ -488,6 +488,20 @@ test("markDraftSent_new_active_draft_after_send_is_independent", () => {
   assert.equal(getSentDraftEntries().length, 0, "no sent records");
 });
 
+test("markDraftSent_keeps_a_newer_draft_with_the_same_key", () => {
+  setup("pubkey-sent-race");
+  persistDraftEntry("chan-race", "submitted", "chan-race", [IMG_A], []);
+  // A background upload is still in flight when the user starts the next
+  // message in this channel. Its completion must not clear this newer entry.
+  persistDraftEntry("chan-race", "next draft", "chan-race", [IMG_B], []);
+
+  markDraftSentEntry("chan-race", "submitted", "chan-race", [IMG_A], []);
+
+  const draft = loadDraftEntry("chan-race");
+  assert.equal(draft?.content, "next draft");
+  assert.deepEqual(draft?.pendingImeta, [IMG_B]);
+});
+
 test("getActiveDraftEntries_excludes_cleared_drafts", () => {
   setup("pubkey-active");
   persistDraftEntry("chan-active", "active draft", "chan-active", [], []);
diff --git a/desktop/src/features/messages/lib/useDrafts.ts b/desktop/src/features/messages/lib/useDrafts.ts
index 1e9fee6e56..772c7bfbc1 100644
--- a/desktop/src/features/messages/lib/useDrafts.ts
+++ b/desktop/src/features/messages/lib/useDrafts.ts
@@ -495,12 +495,24 @@ export function getSentDraftEntries(): Array<{
  */
 export function markDraftSentEntry(
   draftKey: string,
-  _content: string,
-  _channelId: string,
-  _pendingImeta: ImetaMedia[],
-  _spoileredAttachmentUrls: string[],
+  content: string,
+  channelId: string,
+  pendingImeta: ImetaMedia[],
+  spoileredAttachmentUrls: string[],
 ): void {
-  clearDraftEntry(draftKey);
+  const draft = loadDraftEntry(draftKey);
+  // A background upload can finish after the user has started the next draft
+  // in this same channel. Clear only the exact submitted snapshot rather than
+  // deleting whichever newer entry currently owns the key.
+  if (
+    draft?.content === content &&
+    draft.channelId === channelId &&
+    JSON.stringify(draft.pendingImeta) === JSON.stringify(pendingImeta) &&
+    JSON.stringify(draft.spoileredAttachmentUrls) ===
+      JSON.stringify(spoileredAttachmentUrls)
+  ) {
+    clearDraftEntry(draftKey);
+  }
 }
 
 // ── Reactive hooks ────────────────────────────────────────────────────────────
diff --git a/desktop/src/features/messages/lib/useMediaUpload.ts b/desktop/src/features/messages/lib/useMediaUpload.ts
index f14d153d4d..b4c3cae44f 100644
--- a/desktop/src/features/messages/lib/useMediaUpload.ts
+++ b/desktop/src/features/messages/lib/useMediaUpload.ts
@@ -31,6 +31,7 @@ export type UploadingAttachmentPreview = {
    * (e.g. video transcoding before the HTTP upload starts). */
   progress?: number | null;
   slotIndex?: number;
+  spoilered?: boolean;
   type?: string;
 };
 
@@ -299,7 +300,7 @@ export function useMediaUpload({
             if (poster) updateQueuedVideoPoster(id, poster.posterUrl);
           });
         }
-        return { file, id, previewUrl };
+        return { file, id, previewUrl, spoilered: false };
       });
 
       setQueuedAttachmentsState((current) => [...current, ...attachments]);
@@ -332,10 +333,26 @@ export function useMediaUpload({
     (attachments: QueuedMediaAttachment[]) => {
       clearQueuedAttachments();
       queueFiles(attachments.map((attachment) => attachment.file));
+      setQueuedAttachmentsState((current) =>
+        current.map((attachment, index) => ({
+          ...attachment,
+          spoilered: attachments[index]?.spoilered ?? false,
+        })),
+      );
     },
     [clearQueuedAttachments, queueFiles],
   );
 
+  const toggleQueuedAttachmentSpoiler = React.useCallback((id: number) => {
+    setQueuedAttachmentsState((current) =>
+      current.map((attachment) =>
+        attachment.id === id
+          ? { ...attachment, spoilered: !attachment.spoilered }
+          : attachment,
+      ),
+    );
+  }, []);
+
   React.useEffect(
     () => () => {
       for (const attachment of queuedAttachmentsRef.current) {
@@ -791,6 +808,7 @@ export function useMediaUpload({
         filename: attachment.file.name,
         id: attachment.id,
         posterUrl: attachment.previewUrl,
+        spoilered: attachment.spoilered,
         type: attachment.file.type,
       })),
     [queuedAttachments],
@@ -820,6 +838,7 @@ export function useMediaUpload({
       revertAttachment,
       setPendingImeta,
       setUploadState,
+      toggleQueuedAttachmentSpoiler,
       uploadEditedAttachment,
       uploadFile,
       uploadingCount,
@@ -846,6 +865,7 @@ export function useMediaUpload({
       restoreQueuedAttachments,
       revertAttachment,
       setPendingImeta,
+      toggleQueuedAttachmentSpoiler,
       uploadEditedAttachment,
       uploadFile,
       uploadingCount,
diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index c27a0a2943..8578e4c083 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -63,6 +63,8 @@ type ComposerAttachmentsProps = {
   onCancelUpload?: (previewId: number) => void;
   /** Remove a local attachment that has not started uploading yet. */
   onRemoveQueued?: (previewId: number) => void;
+  /** Toggle spoiler state for a local attachment before it receives a URL. */
+  onToggleQueuedSpoiler?: (previewId: number) => void;
   /** Local previews that are queued for upload when the message is sent. */
   queuedPreviews?: UploadingAttachmentPreview[];
   uploadingCount?: number;
@@ -516,6 +518,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
   uploadingPreviews = [],
   onCancelUpload,
   onRemoveQueued,
+  onToggleQueuedSpoiler,
   queuedPreviews = [],
   onEditSave,
   onRemove,
@@ -648,6 +651,11 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
                         </div>
                       )}
                     </div>
+                    {preview.spoilered ? (
+                      <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-background/55 text-foreground/70 backdrop-blur-[1px]">
+                        <HatGlasses className="h-4 w-4" />
+                      </div>
+                    ) : null}
                   </div>
                 ) : (
                   <div className="flex h-5 max-w-40 items-center gap-1 rounded border border-border/70 bg-muted px-1.5">
@@ -672,6 +680,30 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
                     <TooltipContent>Remove attachment</TooltipContent>
                   </Tooltip>
                 ) : null}
+                {isMedia && onToggleQueuedSpoiler ? (
+                  <Tooltip disableHoverableContent>
+                    <TooltipTrigger asChild>
+                      <Toggle
+                        aria-label={
+                          preview.spoilered
+                            ? "Remove spoiler"
+                            : "Mark as spoiler"
+                        }
+                        className="absolute -bottom-1 -left-1 z-10 h-4 w-4 rounded-full bg-foreground text-background hover:bg-foreground"
+                        onPressedChange={() =>
+                          onToggleQueuedSpoiler(preview.id)
+                        }
+                        pressed={preview.spoilered}
+                        type="button"
+                      >
+                        <HatGlasses className="h-2.5 w-2.5" />
+                      </Toggle>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {preview.spoilered ? "Remove spoiler" : "Mark as spoiler"}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
               </motion.div>
             );
           })}
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index b3049ce8e3..064aafa098 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -85,7 +85,7 @@ function MessageComposerImpl({
   profiles,
   replyTarget = null,
   mediaController,
-  showBackgroundUploadProgress = false,
+  showBackgroundUploadProgress = true,
   showTopBorder = false,
   toolbarExtraActions,
   typingParentEventId = null,
@@ -127,10 +127,10 @@ function MessageComposerImpl({
       : null;
   const effectiveDraftKeyRef = React.useRef(effectiveDraftKey);
   effectiveDraftKeyRef.current = effectiveDraftKey;
-  // Snapshot composer state before edit mode so cancel can restore it.
   const preEditSnapshotRef = React.useRef<{
     content: string;
     pendingImeta: ImetaMedia[];
+    queuedAttachments: ReturnType<typeof useMediaUpload>["queuedAttachments"];
     spoileredAttachmentUrls: Set<string>;
   } | null>(null);
   const mentions = useMentions(channelId, undefined, profiles, {
@@ -144,17 +144,12 @@ function MessageComposerImpl({
     typingParentEventId,
     typingRootEventId,
   );
-
-  // New files stay local so the composer can render previews immediately;
-  // submitting hands them to the app-wide background upload queue.
   const internalMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const media = mediaController ?? internalMedia;
   const ownsDropZone = mediaController === undefined;
   const backgroundUpload = useBackgroundMediaUpload();
 
-  // Draft-persist lifecycle: restore/clear content + imeta + spoilered urls on
-  // key change, and persist the outgoing draft in the cleanup. The StrictMode
-  // fix lives inside this hook — see useDraftPersistSnapshot.ts.
+  // Restore/persist drafts at a key boundary; the hook handles StrictMode.
   useDraftPersistLifecycle({
     effectiveDraftKey,
     channelId,
@@ -164,6 +159,7 @@ function MessageComposerImpl({
     restoreMentionRefs: mentions.restoreDraftMentionRefs,
     livePendingImeta: media.pendingImeta,
     setPendingImeta: media.setPendingImeta,
+    clearQueuedAttachments: media.clearQueuedAttachments,
     setContent: (content) => {
       setComposerContent(content);
       richText.setContent(content);
@@ -332,12 +328,11 @@ function MessageComposerImpl({
   // biome-ignore lint/correctness/useExhaustiveDependencies: editTarget?.id is the trigger
   React.useEffect(() => {
     if (editTarget) {
-      // Snapshot the current draft (text + attachments) so the user's
-      // in-flight work survives the edit-mode hijack and is restored on
-      // edit-cancel/exit.
+      // Preserve the user's in-flight draft while editing another message.
       preEditSnapshotRef.current = {
         content: syncComposerContentFromEditor(),
         pendingImeta: [...media.pendingImetaRef.current],
+        queuedAttachments: [...media.queuedAttachmentsRef.current],
         spoileredAttachmentUrls: new Set(spoileredAttachmentUrls),
       };
       // Strip the trailing `![image|video](url)` lines that correspond to
@@ -354,6 +349,7 @@ function MessageComposerImpl({
       // attachments so they show up in `ComposerAttachments` and the user
       // can remove existing ones / add new ones before saving.
       media.setPendingImeta(editableImeta);
+      media.clearQueuedAttachments();
       setSpoileredAttachmentUrls(
         findSpoileredImetaMediaUrls(editTarget.body, editableImeta),
       );
@@ -369,6 +365,7 @@ function MessageComposerImpl({
       const {
         content: restoredContent,
         pendingImeta: restoredImeta,
+        queuedAttachments: restoredQueuedAttachments,
         spoileredAttachmentUrls: restoredSpoileredAttachmentUrls,
       } = preEditSnapshotRef.current;
       preEditSnapshotRef.current = null;
@@ -377,6 +374,7 @@ function MessageComposerImpl({
         ? richText.setContent(restoredContent)
         : richText.clearContent();
       media.setPendingImeta(restoredImeta);
+      media.restoreQueuedAttachments(restoredQueuedAttachments);
       setSpoileredAttachmentUrls(restoredSpoileredAttachmentUrls);
     }
   }, [editTarget?.id]);
@@ -523,6 +521,7 @@ function MessageComposerImpl({
       // deletes the message instead of publishing it (see handleEditSave).
       await submitMessageEdit({
         content: trimmed,
+        editTargetId: editTargetRef.current.id,
         customEmoji,
         originalContent: editTargetRef.current.body,
         ownerPubkey: ownerPubkeyRef.current,
@@ -961,6 +960,7 @@ function MessageComposerImpl({
                   isUploading={media.isUploading}
                   onCancelUpload={media.cancelUpload}
                   onRemoveQueued={media.removeQueuedAttachment}
+                  onToggleQueuedSpoiler={media.toggleQueuedAttachmentSpoiler}
                   queuedPreviews={media.queuedPreviews}
                   uploadingCount={media.uploadingCount}
                   uploadingPreviews={media.uploadingPreviews}
diff --git a/desktop/src/features/messages/ui/MessageComposer.types.ts b/desktop/src/features/messages/ui/MessageComposer.types.ts
index 70b3f50a21..7418687cfa 100644
--- a/desktop/src/features/messages/ui/MessageComposer.types.ts
+++ b/desktop/src/features/messages/ui/MessageComposer.types.ts
@@ -66,6 +66,8 @@ export type MessageComposerProps = {
     content: string,
     mediaTags?: string[][],
     mentionPubkeys?: string[],
+    /** Target captured when the edit was submitted; avoids a later ref swap. */
+    eventId?: string,
   ) => Promise<void>;
   /** Captures send context synchronously before awaits can change navigation. */
   onCaptureSendContext?: () => {
diff --git a/desktop/src/features/messages/ui/submitMessageEdit.ts b/desktop/src/features/messages/ui/submitMessageEdit.ts
index 6762745461..b2f3db1827 100644
--- a/desktop/src/features/messages/ui/submitMessageEdit.ts
+++ b/desktop/src/features/messages/ui/submitMessageEdit.ts
@@ -20,6 +20,7 @@ type SubmitMessageEditOptions = EditDraft & {
   clearComposer: () => void;
   customEmoji: ReadonlyArray<CustomEmoji>;
   extractMentionPubkeys: (content: string) => string[];
+  editTargetId: string;
   originalContent: string;
   ownerPubkey: string | null;
   restoreComposer: (draft: EditDraft) => void;
@@ -27,6 +28,7 @@ type SubmitMessageEditOptions = EditDraft & {
     content: string,
     mediaTags?: string[][],
     mentionPubkeys?: string[],
+    eventId?: string,
   ) => Promise<void>;
   setUploadError: (message: string) => void;
 };
@@ -36,6 +38,7 @@ export async function submitMessageEdit({
   clearComposer,
   content,
   customEmoji,
+  editTargetId,
   extractMentionPubkeys,
   originalContent,
   ownerPubkey,
@@ -64,14 +67,19 @@ export async function submitMessageEdit({
     const { content: finalContent, mediaTags } = buildOutgoingMessage(
       content,
       [...draft.pendingImeta, ...uploaded],
-      draft.spoileredAttachmentUrls,
+      new Set([
+        ...draft.spoileredAttachmentUrls,
+        ...draft.queuedAttachments.flatMap((attachment, index) =>
+          attachment.spoilered && uploaded[index] ? [uploaded[index].url] : [],
+        ),
+      ]),
     );
     const outgoingTags =
       mergeOutgoingTags(
         mediaTags,
         buildCustomEmojiTags(finalContent, customEmoji),
       ) ?? [];
-    await save(finalContent, outgoingTags, addedMentionPubkeys);
+    await save(finalContent, outgoingTags, addedMentionPubkeys, editTargetId);
   };
 
   if (draft.queuedAttachments.length > 0) {
diff --git a/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts b/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
index e2c4134bd6..442aea4da4 100644
--- a/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
+++ b/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
@@ -28,6 +28,8 @@ type UseDraftPersistLifecycleParams = {
   livePendingImeta: ImetaMedia[];
   /** Async setter for pendingImeta — called after the synchronous snapshot. */
   setPendingImeta: (imeta: ImetaMedia[]) => void;
+  /** Local files cannot be persisted, so clear them at a draft-key boundary. */
+  clearQueuedAttachments?: () => void;
   /** Set the rich-text editor content from a draft string. */
   setContent: (content: string) => void;
   /** Clear the rich-text editor content (no-draft path). */
@@ -80,6 +82,7 @@ export function useDraftPersistLifecycle({
   restoreMentionRefs,
   livePendingImeta,
   setPendingImeta,
+  clearQueuedAttachments,
   setContent,
   clearContent,
   setSpoileredAttachmentUrls,
@@ -99,6 +102,9 @@ export function useDraftPersistLifecycle({
     // already reflects the incoming channel, which would corrupt the outgoing
     // draft's channelId metadata.
 
+    // Files cannot be serialized into the draft store. Dropping the in-memory
+    // queue here prevents it from being sent in the next channel or thread.
+    clearQueuedAttachments?.();
     const saved = effectiveDraftKey ? loadDraft(effectiveDraftKey) : undefined;
     if (saved) {
       setContent(saved.content);
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index cb91badf65..ad9c5d1a46 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -526,7 +526,9 @@ export function useMentionSendFlow({
         const restoreComposerAfterFailure = () => {
           if (
             !isMountedRef.current ||
-            draft.capturedChannelId !== channelIdRef.current
+            (draft.capturedChannelId !== channelIdRef.current &&
+              channelIdRef.current !== null) ||
+            contentRef.current.trim().length > 0
           ) {
             return;
           }
@@ -543,7 +545,14 @@ export function useMentionSendFlow({
           const { content: finalContent, mediaTags } = buildOutgoingMessage(
             draft.trimmed,
             [...draft.savedImeta, ...uploaded],
-            draft.savedSpoileredAttachmentUrls,
+            new Set([
+              ...draft.savedSpoileredAttachmentUrls,
+              ...draft.queuedAttachments.flatMap((attachment, index) =>
+                attachment.spoilered && uploaded[index]
+                  ? [uploaded[index].url]
+                  : [],
+              ),
+            ]),
           );
           const finalOutgoingTags = mergeOutgoingTags(
             mediaTags,
@@ -593,6 +602,7 @@ export function useMentionSendFlow({
                 `Upload failed: ${getErrorMessage(error, "Unknown error")}`,
               );
             },
+            onCancel: restoreComposerAfterFailure,
           });
           if (!uploadStarted) return;
         }
@@ -600,7 +610,10 @@ export function useMentionSendFlow({
         // Replace the sent body directly with its final post-send state before
         // the async network send starts. This avoids an intermediate blank frame
         // for persistent audiences while preserving the ordinary empty state.
-        if (draft.capturedChannelId === channelIdRef.current) {
+        if (
+          draft.capturedChannelId === channelIdRef.current ||
+          channelIdRef.current === null
+        ) {
           clearComposer(
             resolvePostSendContent?.(effectiveExplicitAgentPubkeys),
           );
diff --git a/desktop/src/shared/api/tauriMedia.ts b/desktop/src/shared/api/tauriMedia.ts
index 5bef1195d3..110403daf2 100644
--- a/desktop/src/shared/api/tauriMedia.ts
+++ b/desktop/src/shared/api/tauriMedia.ts
@@ -31,6 +31,11 @@ export async function uploadMediaFile(
   );
 }
 
+/** Stop the native HTTP request associated with a background media upload. */
+export async function cancelMediaUpload(progressId: string): Promise<void> {
+  await invokeTauri("cancel_media_upload", { progressId });
+}
+
 /**
  * Open a native single-file picker constrained to images and upload the
  * chosen file. Non-image files are rejected in Rust (via MIME sniffing)

From 6f1b3e69bd2dd9623dd8d97c4fa69e4c57fda72d Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 16:34:01 +0100
Subject: [PATCH 10/21] Prevent cancelling deferred publish

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../lib/backgroundMediaUploadStore.ts         |  8 +++++-
 .../ui/ComposerUploadProgressOverlay.tsx      |  1 +
 .../ui/ComposerUploadProgressPill.tsx         | 26 +++++++++++--------
 .../features/messages/ui/MessageComposer.tsx  |  2 +-
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index 809bf4a7ad..f82436cb6f 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -20,10 +20,12 @@ type BackgroundUploadTask = {
   filePhases: BackgroundMediaUploadPhase[];
   fileProgress: Array<{ sent: number; total: number }>;
   id: number;
+  isCompleting: boolean;
   onCancel?: () => void;
 };
 
 type BackgroundUploadSnapshot = {
+  canCancel: boolean;
   isUploading: boolean;
   phase: BackgroundMediaUploadPhase;
   percentage: number;
@@ -50,6 +52,7 @@ const tasks = new Map<number, BackgroundUploadTask>();
 const listeners = new Set<() => void>();
 let nextTaskId = 0;
 let snapshot: BackgroundUploadSnapshot = {
+  canCancel: false,
   isUploading: false,
   phase: "preparing",
   percentage: 0,
@@ -73,6 +76,7 @@ function rebuildSnapshot(): void {
     0,
   );
   snapshot = {
+    canCancel: allTasks.some((task) => !task.isCompleting),
     isUploading: allTasks.length > 0,
     phase: resolveBackgroundMediaUploadPhase(
       allTasks.flatMap((task) => task.filePhases),
@@ -164,7 +168,7 @@ function finishTask(taskId: number): void {
 }
 
 function cancelTask(task: BackgroundUploadTask): void {
-  if (task.canceled) return;
+  if (task.canceled || task.isCompleting) return;
   task.canceled = true;
   task.onCancel?.();
   for (let index = 0; index < task.fileProgress.length; index += 1) {
@@ -213,6 +217,7 @@ export function prepareBackgroundMediaUpload(
       total: attachment.file.size,
     })),
     id: taskId,
+    isCompleting: false,
   };
   let started = false;
   tasks.set(taskId, task);
@@ -252,6 +257,7 @@ export function prepareBackgroundMediaUpload(
           }
 
           if (!task.canceled) {
+            task.isCompleting = true;
             task.filePhases.fill("finishing");
             rebuildSnapshot();
             await onComplete(descriptors);
diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
index fa13997023..d021e49783 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressOverlay.tsx
@@ -10,6 +10,7 @@ export function ComposerUploadProgressOverlay() {
   return (
     <div className="pointer-events-auto">
       <ComposerUploadProgressPill
+        canCancel={backgroundUpload.canCancel}
         isUploading={backgroundUpload.isUploading}
         onCancel={cancelBackgroundMediaUploads}
         phase={backgroundUpload.phase}
diff --git a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
index 624ec9b6e0..288b32f8f1 100644
--- a/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
+++ b/desktop/src/features/messages/ui/ComposerUploadProgressPill.tsx
@@ -8,11 +8,13 @@ import { cn } from "@/shared/lib/cn";
 import { Spinner } from "@/shared/ui/spinner";
 
 export function ComposerUploadProgressPill({
+  canCancel,
   isUploading,
   onCancel,
   phase,
   percentage,
 }: {
+  canCancel: boolean;
   isUploading: boolean;
   onCancel: () => void;
   phase: BackgroundMediaUploadPhase;
@@ -147,17 +149,19 @@ export function ComposerUploadProgressPill({
                   </motion.span>
                 </span>
               </span>
-              <button
-                className={cn(
-                  "shrink-0 rounded-full bg-transparent px-2 py-1 text-sm font-semibold text-primary-foreground",
-                  "transition-colors hover:bg-primary-foreground/20 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-foreground",
-                )}
-                data-testid="composer-upload-cancel"
-                onClick={onCancel}
-                type="button"
-              >
-                Cancel
-              </button>
+              {canCancel ? (
+                <button
+                  className={cn(
+                    "shrink-0 rounded-full bg-transparent px-2 py-1 text-sm font-semibold text-primary-foreground",
+                    "transition-colors hover:bg-primary-foreground/20 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-foreground",
+                  )}
+                  data-testid="composer-upload-cancel"
+                  onClick={onCancel}
+                  type="button"
+                >
+                  Cancel
+                </button>
+              ) : null}
             </div>
           </div>
         </motion.div>
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 064aafa098..e7bb99f538 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import { EditorContent } from "@tiptap/react";
 import { useChannelLinks } from "@/features/messages/lib/useChannelLinks";
 import { handleAgentSnapshotPaste } from "@/features/messages/lib/agentSnapshotClipboard";
@@ -886,6 +885,7 @@ function MessageComposerImpl({
           />
           {showBackgroundUploadProgress ? (
             <ComposerUploadProgressPill
+              canCancel={backgroundUpload.canCancel}
               isUploading={backgroundUpload.isUploading}
               onCancel={cancelBackgroundMediaUploads}
               phase={backgroundUpload.phase}

From f23e8133e138bba8768ea8d93ba1d0280b34f196 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 17:41:18 +0100
Subject: [PATCH 11/21] Address deferred upload follow-up

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       | 34 +++++++++++--------
 .../src/commands/media_upload_progress.rs     | 27 +++++++++++----
 .../lib/backgroundMediaUploadStore.ts         |  4 +++
 .../features/messages/ui/MessageComposer.tsx  | 12 +++----
 .../features/messages/ui/NewMessageScreen.tsx |  6 +---
 .../features/messages/ui/submitMessageEdit.ts | 12 +++++--
 desktop/src/shared/api/tauriMedia.ts          | 13 ++++---
 7 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index 96c54ef705..7ae2575664 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -12,7 +12,7 @@ use super::media_transcode::{
     has_heic_extension, is_heic_file, is_video_file, transcode_and_extract_poster,
     transcode_heic_path_to_jpeg_bytes,
 };
-use super::media_upload_progress::{emit_media_upload_phase, send_upload_attempt};
+use super::media_upload_progress::{emit_media_upload_phase, send_upload_attempt, UploadAttempt};
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct BlobDescriptor {
@@ -454,25 +454,29 @@ async fn do_upload(
     }
     let mut resp = send_upload_attempt(
         state,
-        format!("{base_url}/upload"),
-        &auth_header,
-        mime,
-        &sha256,
-        body.clone(),
-        progress.as_ref(),
-        cancellation,
+        UploadAttempt {
+            url: format!("{base_url}/upload"),
+            auth_header: &auth_header,
+            mime,
+            sha256: &sha256,
+            body: body.clone(),
+            progress: progress.as_ref(),
+            cancellation,
+        },
     )
     .await?;
     if should_retry_legacy_upload(resp.status()) {
         resp = send_upload_attempt(
             state,
-            format!("{base_url}/media/upload"),
-            &auth_header,
-            mime,
-            &sha256,
-            body,
-            progress.as_ref(),
-            cancellation,
+            UploadAttempt {
+                url: format!("{base_url}/media/upload"),
+                auth_header: &auth_header,
+                mime,
+                sha256: &sha256,
+                body,
+                progress: progress.as_ref(),
+                cancellation,
+            },
         )
         .await?;
     }
diff --git a/desktop/src-tauri/src/commands/media_upload_progress.rs b/desktop/src-tauri/src/commands/media_upload_progress.rs
index 67fef2e5d5..850afe1b12 100644
--- a/desktop/src-tauri/src/commands/media_upload_progress.rs
+++ b/desktop/src-tauri/src/commands/media_upload_progress.rs
@@ -37,16 +37,29 @@ pub(super) fn finish_media_upload(progress_id: Option<&str>) {
     }
 }
 
+pub(super) struct UploadAttempt<'a> {
+    pub url: String,
+    pub auth_header: &'a str,
+    pub mime: &'a str,
+    pub sha256: &'a str,
+    pub body: bytes::Bytes,
+    pub progress: Option<&'a (tauri::AppHandle, String)>,
+    pub cancellation: Option<&'a CancellationToken>,
+}
+
 pub(super) async fn send_upload_attempt(
     state: &AppState,
-    url: String,
-    auth_header: &str,
-    mime: &str,
-    sha256: &str,
-    body: bytes::Bytes,
-    progress: Option<&(tauri::AppHandle, String)>,
-    cancellation: Option<&CancellationToken>,
+    attempt: UploadAttempt<'_>,
 ) -> Result<reqwest::Response, String> {
+    let UploadAttempt {
+        url,
+        auth_header,
+        mime,
+        sha256,
+        body,
+        progress,
+        cancellation,
+    } = attempt;
     let req = state
         .http_client
         .put(url)
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index f82436cb6f..9949542626 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -16,6 +16,7 @@ export type QueuedMediaAttachment = {
 };
 
 type BackgroundUploadTask = {
+  abortController: AbortController;
   canceled: boolean;
   filePhases: BackgroundMediaUploadPhase[];
   fileProgress: Array<{ sent: number; total: number }>;
@@ -170,6 +171,7 @@ function finishTask(taskId: number): void {
 function cancelTask(task: BackgroundUploadTask): void {
   if (task.canceled || task.isCompleting) return;
   task.canceled = true;
+  task.abortController.abort();
   task.onCancel?.();
   for (let index = 0; index < task.fileProgress.length; index += 1) {
     void cancelMediaUpload(progressId(task.id, index)).catch(() => undefined);
@@ -210,6 +212,7 @@ export function prepareBackgroundMediaUpload(
   const taskId = nextTaskId;
   nextTaskId += 1;
   const task: BackgroundUploadTask = {
+    abortController: new AbortController(),
     canceled: false,
     filePhases: attachments.map(() => "preparing"),
     fileProgress: attachments.map((attachment) => ({
@@ -245,6 +248,7 @@ export function prepareBackgroundMediaUpload(
             const descriptor = await uploadMediaFile(
               attachment.file,
               progressId(taskId, index),
+              task.abortController.signal,
             );
             if (task.canceled) return;
             task.filePhases[index] = "finishing";
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index e7bb99f538..b562a7a6b1 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -15,7 +15,6 @@ import {
   restoreImetaMediaDisplayLabels,
   stripImetaMediaLines,
 } from "@/features/messages/lib/imetaMediaMarkdown";
-
 import { useAttachmentEditing } from "@/features/messages/lib/useAttachmentEditing";
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import {
@@ -56,9 +55,7 @@ import { usePersistentAgentMentionHydration } from "./usePersistentAgentMentionH
 import { useComposerContentState } from "./useComposerContentState";
 import { useDraftPersistLifecycle } from "./useDraftPersistSnapshot";
 import { submitMessageEdit } from "./submitMessageEdit";
-
 import type { MessageComposerProps } from "./MessageComposer.types";
-
 function MessageComposerImpl({
   audienceContext = null,
   channelId = null,
@@ -105,12 +102,10 @@ function MessageComposerImpl({
   >(() => new Set());
   const spoileredAttachmentUrlsRef = React.useRef(spoileredAttachmentUrls);
   spoileredAttachmentUrlsRef.current = spoileredAttachmentUrls;
-
   const handleFormattingToggle = React.useCallback((pressed: boolean) => {
     if (pressed) setIsEmojiPickerOpen(false);
     setIsFormattingOpen(pressed);
   }, []);
-
   const drafts = useDrafts();
   const identityQuery = useIdentityQuery();
   const effectiveDraftKey = draftKey ?? channelId;
@@ -145,6 +140,11 @@ function MessageComposerImpl({
   );
   const internalMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const media = mediaController ?? internalMedia;
+  const canRestoreEditDraftRef = React.useRef(false);
+  canRestoreEditDraftRef.current =
+    contentRef.current.trim().length === 0 &&
+    media.pendingImetaRef.current.length === 0 &&
+    media.queuedAttachmentsRef.current.length === 0;
   const ownsDropZone = mediaController === undefined;
   const backgroundUpload = useBackgroundMediaUpload();
 
@@ -178,7 +178,6 @@ function MessageComposerImpl({
     channelLinks.clearChannels();
     emojiAutocomplete.clearEmojis();
   }, [effectiveDraftKey]);
-
   const disabledRef = React.useRef(disabled);
   const isSendingRef = React.useRef(isSending);
   const isUploadingRef = React.useRef(media.isUploading);
@@ -547,6 +546,7 @@ function MessageComposerImpl({
           media.restoreQueuedAttachments(draft.queuedAttachments);
           setSpoileredAttachmentUrls(draft.spoileredAttachmentUrls);
         },
+        shouldRestoreComposer: () => canRestoreEditDraftRef.current,
         setUploadError: (message) =>
           media.setUploadState({ status: "error", message }),
       });
diff --git a/desktop/src/features/messages/ui/NewMessageScreen.tsx b/desktop/src/features/messages/ui/NewMessageScreen.tsx
index f2a1427aa6..f94dd5d1e1 100644
--- a/desktop/src/features/messages/ui/NewMessageScreen.tsx
+++ b/desktop/src/features/messages/ui/NewMessageScreen.tsx
@@ -257,10 +257,6 @@ export function NewMessageScreen() {
         );
       }
 
-      if (!isMountedRef.current) {
-        return;
-      }
-
       try {
         await sendMessageMutation.mutateAsync({
           targetChannel: directMessage,
@@ -272,7 +268,7 @@ export function NewMessageScreen() {
         preparedDirectMessageRef.current = null;
         const message =
           error instanceof Error ? error.message : "Failed to send message.";
-        setSubmitErrorMessage(message);
+        if (isMountedRef.current) setSubmitErrorMessage(message);
         throw error;
       }
 
diff --git a/desktop/src/features/messages/ui/submitMessageEdit.ts b/desktop/src/features/messages/ui/submitMessageEdit.ts
index b2f3db1827..0ce8cea324 100644
--- a/desktop/src/features/messages/ui/submitMessageEdit.ts
+++ b/desktop/src/features/messages/ui/submitMessageEdit.ts
@@ -24,6 +24,7 @@ type SubmitMessageEditOptions = EditDraft & {
   originalContent: string;
   ownerPubkey: string | null;
   restoreComposer: (draft: EditDraft) => void;
+  shouldRestoreComposer: () => boolean;
   save: (
     content: string,
     mediaTags?: string[][],
@@ -45,6 +46,7 @@ export async function submitMessageEdit({
   pendingImeta,
   queuedAttachments,
   restoreComposer,
+  shouldRestoreComposer,
   save,
   setUploadError,
   spoileredAttachmentUrls,
@@ -55,6 +57,9 @@ export async function submitMessageEdit({
     queuedAttachments: [...queuedAttachments],
     spoileredAttachmentUrls: new Set(spoileredAttachmentUrls),
   };
+  const restoreDraft = () => {
+    if (shouldRestoreComposer()) restoreComposer(draft);
+  };
   const addedMentionPubkeys = diffAddedMentionPubkeys(
     extractMentionPubkeys(originalContent),
     extractMentionPubkeys(content),
@@ -89,13 +94,14 @@ export async function submitMessageEdit({
         try {
           await finishEdit(uploaded);
         } catch {
-          restoreComposer(draft);
+          restoreDraft();
         }
       },
       onError: (error) => {
-        restoreComposer(draft);
+        restoreDraft();
         setUploadError(String(error));
       },
+      onCancel: restoreDraft,
     });
     return;
   }
@@ -103,6 +109,6 @@ export async function submitMessageEdit({
   try {
     await finishEdit([]);
   } catch {
-    restoreComposer(draft);
+    restoreDraft();
   }
 }
diff --git a/desktop/src/shared/api/tauriMedia.ts b/desktop/src/shared/api/tauriMedia.ts
index 110403daf2..60205a45fe 100644
--- a/desktop/src/shared/api/tauriMedia.ts
+++ b/desktop/src/shared/api/tauriMedia.ts
@@ -16,6 +16,7 @@ function encodeRawIpcHeader(value: string): string {
 export async function uploadMediaFile(
   file: File,
   progressId?: string,
+  signal?: AbortSignal,
 ): Promise<BlobDescriptor> {
   const headers: Record<string, string> = {
     "x-buzz-filename": encodeRawIpcHeader(file.name),
@@ -24,11 +25,13 @@ export async function uploadMediaFile(
     headers["x-buzz-progress-id"] = encodeRawIpcHeader(progressId);
   }
 
-  return invokeTauriRaw<BlobDescriptor>(
-    "upload_media_bytes_raw",
-    new Uint8Array(await file.arrayBuffer()),
-    { headers },
-  );
+  if (signal?.aborted) throw new Error("upload cancelled");
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  if (signal?.aborted) throw new Error("upload cancelled");
+
+  return invokeTauriRaw<BlobDescriptor>("upload_media_bytes_raw", bytes, {
+    headers,
+  });
 }
 
 /** Stop the native HTTP request associated with a background media upload. */

From 1dddbec2bf548237328f727d6f4d1f02cb1525ee Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 18:32:00 +0100
Subject: [PATCH 12/21] Harden deferred upload lifecycle

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../lib/backgroundMediaUploadStore.ts         | 27 +++++++++++-----
 .../messages/ui/ComposerReplyEditBanner.tsx   |  3 ++
 .../features/messages/ui/MessageComposer.tsx  | 32 +++++++++----------
 .../features/messages/ui/submitMessageEdit.ts | 21 +++++++++---
 .../messages/ui/useMentionSendFlow.ts         | 11 +++++--
 5 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index 9949542626..f7076dc979 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -35,7 +35,10 @@ type BackgroundUploadSnapshot = {
 type EnqueueBackgroundUploadOptions = {
   attachments: QueuedMediaAttachment[];
   onCancel?: () => void;
-  onComplete: (descriptors: BlobDescriptor[]) => Promise<void>;
+  onComplete: (
+    descriptors: BlobDescriptor[],
+    signal: AbortSignal,
+  ) => Promise<void>;
   onError: (error: unknown) => void;
 };
 
@@ -168,11 +171,14 @@ function finishTask(taskId: number): void {
   }
 }
 
-function cancelTask(task: BackgroundUploadTask): void {
-  if (task.canceled || task.isCompleting) return;
+function cancelTask(
+  task: BackgroundUploadTask,
+  { force = false, notify = true }: { force?: boolean; notify?: boolean } = {},
+): void {
+  if (task.canceled || (task.isCompleting && !force)) return;
   task.canceled = true;
   task.abortController.abort();
-  task.onCancel?.();
+  if (notify) task.onCancel?.();
   for (let index = 0; index < task.fileProgress.length; index += 1) {
     void cancelMediaUpload(progressId(task.id, index)).catch(() => undefined);
   }
@@ -203,7 +209,7 @@ export function prepareBackgroundMediaUpload(
       start: ({ onComplete, onError }) => {
         if (started) return false;
         started = true;
-        void onComplete([]).catch(onError);
+        void onComplete([], new AbortController().signal).catch(onError);
         return true;
       },
     };
@@ -264,7 +270,7 @@ export function prepareBackgroundMediaUpload(
             task.isCompleting = true;
             task.filePhases.fill("finishing");
             rebuildSnapshot();
-            await onComplete(descriptors);
+            await onComplete(descriptors, task.abortController.signal);
           }
         } catch (error) {
           if (!task.canceled) onError(error);
@@ -279,11 +285,12 @@ export function prepareBackgroundMediaUpload(
 
 export function enqueueBackgroundMediaUpload({
   attachments,
+  onCancel,
   onComplete,
   onError,
 }: EnqueueBackgroundUploadOptions): PreparedBackgroundMediaUpload {
   const preparedUpload = prepareBackgroundMediaUpload(attachments);
-  preparedUpload.start({ onComplete, onError });
+  preparedUpload.start({ onCancel, onComplete, onError });
   return preparedUpload;
 }
 
@@ -291,7 +298,11 @@ export function cancelBackgroundMediaUploads(): void {
   for (const task of [...tasks.values()]) cancelTask(task);
 }
 
-export const resetBackgroundMediaUploads = cancelBackgroundMediaUploads;
+export function resetBackgroundMediaUploads(): void {
+  for (const task of [...tasks.values()]) {
+    cancelTask(task, { force: true, notify: false });
+  }
+}
 
 function subscribe(listener: () => void): () => void {
   listeners.add(listener);
diff --git a/desktop/src/features/messages/ui/ComposerReplyEditBanner.tsx b/desktop/src/features/messages/ui/ComposerReplyEditBanner.tsx
index 5032fa453e..485d11de28 100644
--- a/desktop/src/features/messages/ui/ComposerReplyEditBanner.tsx
+++ b/desktop/src/features/messages/ui/ComposerReplyEditBanner.tsx
@@ -14,11 +14,13 @@ const BANNER_CLASS =
  */
 export function ComposerReplyEditBanner({
   isEditing,
+  isEditCancelDisabled = false,
   replyTarget,
   onCancelEdit,
   onCancelReply,
 }: {
   isEditing: boolean;
+  isEditCancelDisabled?: boolean;
   replyTarget?: { author: string; body: string; id: string } | null;
   onCancelEdit?: () => void;
   onCancelReply?: () => void;
@@ -39,6 +41,7 @@ export function ComposerReplyEditBanner({
           <Button
             aria-label="Cancel edit"
             className="-mr-1 h-7 w-7 shrink-0 px-0 text-muted-foreground hover:text-foreground"
+            disabled={isEditCancelDisabled}
             onClick={onCancelEdit}
             size="icon"
             type="button"
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index b562a7a6b1..e804539cee 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -140,6 +140,10 @@ function MessageComposerImpl({
   );
   const internalMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const media = mediaController ?? internalMedia;
+  const [isDeferredEditPending, setDeferredEditPending] = React.useState(false);
+  const composerDisabled = disabled || isDeferredEditPending;
+  const isEditSubmissionLocked =
+    isSending || media.isUploading || isDeferredEditPending;
   const canRestoreEditDraftRef = React.useRef(false);
   canRestoreEditDraftRef.current =
     contentRef.current.trim().length === 0 &&
@@ -147,7 +151,6 @@ function MessageComposerImpl({
     media.queuedAttachmentsRef.current.length === 0;
   const ownsDropZone = mediaController === undefined;
   const backgroundUpload = useBackgroundMediaUpload();
-
   // Restore/persist drafts at a key boundary; the hook handles StrictMode.
   useDraftPersistLifecycle({
     effectiveDraftKey,
@@ -196,16 +199,13 @@ function MessageComposerImpl({
   editTargetRef.current = editTarget;
   extractMentionPubkeysRef.current = mentions.extractMentionPubkeys;
   ownerPubkeyRef.current = ownerPubkey;
-
   const isAutocompleteOpenRef = React.useRef(false);
   isAutocompleteOpenRef.current =
     mentions.isMentionOpen ||
     channelLinks.isChannelOpen ||
     emojiAutocomplete.isEmojiAutocompleteOpen;
-
   const submitMessageRef = React.useRef<() => void>(() => {});
   const composerScrollRef = React.useRef<HTMLDivElement>(null);
-
   // Set after `useLinkEditor` exists below; the editor's link-click handler
   // delegates through this ref to break the hook ordering cycle (the editor
   // needs `onEditLink`, but the link editor needs the editor's `richText`).
@@ -216,7 +216,6 @@ function MessageComposerImpl({
     ((info: LinkSelectionInfo | null) => void) | null
   >(null);
   const onLinkShortcutRef = React.useRef<(() => boolean) | null>(null);
-
   const scrollComposerToBottom = React.useCallback(() => {
     window.requestAnimationFrame(() => {
       const scrollElement = composerScrollRef.current;
@@ -224,7 +223,6 @@ function MessageComposerImpl({
       scrollElement.scrollTop = scrollElement.scrollHeight;
     });
   }, []);
-
   const computedPlaceholder = editTarget
     ? "Edit your message"
     : (placeholder ??
@@ -234,7 +232,7 @@ function MessageComposerImpl({
 
   const richText = useRichTextEditor({
     placeholder: computedPlaceholder,
-    editable: !disabled,
+    editable: !composerDisabled,
     mentionNames: mentions.knownNames,
     agentMentionNames: mentions.agentKnownNames,
     channelNames: channelLinks.knownChannelNames,
@@ -253,7 +251,6 @@ function MessageComposerImpl({
     onLinkShortcut: () => onLinkShortcutRef.current?.() ?? false,
     onUpdate: ({ cursor, text }) => {
       setComposerContentFromText(text);
-
       mentions.updateMentionQuery(text, cursor);
       channelLinks.updateChannelQuery(text, cursor);
       emojiAutocomplete.updateEmojiQuery(text, cursor);
@@ -381,12 +378,12 @@ function MessageComposerImpl({
   // Use focusPreserve so that re-renders (e.g. new messages arriving in
   // a thread) don't yank the cursor to the end while the user is editing.
   React.useEffect(() => {
-    if (!replyTarget || disabled) return;
+    if (!replyTarget || composerDisabled) return;
     richText.focusPreserve();
-  }, [disabled, replyTarget, richText.focusPreserve]);
+  }, [composerDisabled, replyTarget, richText.focusPreserve]);
 
   // ── Autofocus on mount / channel switch ─────────────────────────────
-  useComposerAutofocus(richText.focus, effectiveDraftKey, disabled);
+  useComposerAutofocus(richText.focus, effectiveDraftKey, composerDisabled);
 
   // ── Mention / channel / emoji autocomplete insertion ────────────────
   // Hooks return a plain-text edit descriptor; `replacePlainTextRange`
@@ -513,7 +510,7 @@ function MessageComposerImpl({
 
     // Edit mode
     if (editTargetRef.current && onEditSaveRef.current) {
-      if (isSendingRef.current || isUploadingRef.current) return;
+      if (isEditSubmissionLocked) return;
       // No empty-edit guard here: clearing an edit to empty (no text, no
       // attachments) flows through to onEditSave as empty content, which
       // deletes the message instead of publishing it (see handleEditSave).
@@ -547,6 +544,7 @@ function MessageComposerImpl({
           setSpoileredAttachmentUrls(draft.spoileredAttachmentUrls);
         },
         shouldRestoreComposer: () => canRestoreEditDraftRef.current,
+        setDeferredUploadPending: setDeferredEditPending,
         setUploadError: (message) =>
           media.setUploadState({ status: "error", message }),
       });
@@ -622,6 +620,7 @@ function MessageComposerImpl({
     persistentMentionHydration,
     persistentAudience.generation,
     persistentAudience.revision,
+    isEditSubmissionLocked,
   ]);
   submitMessageRef.current = submitMessage;
 
@@ -808,14 +807,14 @@ function MessageComposerImpl({
   // ── Send button state ───────────────────────────────────────────────
   const sendDisabled = React.useMemo(
     () =>
-      disabled ||
+      composerDisabled ||
       (editTarget !== null && media.isUploading) ||
       mentionSendFlow.isPreparingMentionSend ||
       (isContentEmpty &&
         media.pendingImeta.length === 0 &&
         media.queuedAttachments.length === 0),
     [
-      disabled,
+      composerDisabled,
       editTarget,
       media.isUploading,
       mentionSendFlow.isPreparingMentionSend,
@@ -879,6 +878,7 @@ function MessageComposerImpl({
         <div className="relative flex w-full flex-col gap-0">
           <ComposerReplyEditBanner
             isEditing={editTarget != null}
+            isEditCancelDisabled={isDeferredEditPending}
             replyTarget={replyTarget}
             onCancelEdit={onCancelEdit}
             onCancelReply={onCancelReply}
@@ -986,10 +986,10 @@ function MessageComposerImpl({
 
             <ComposerDockToolbar
               layoutMode={layoutMode}
-              composerDisabled={disabled}
+              composerDisabled={composerDisabled}
               editor={richText.editor}
               extraActions={toolbarExtraActions}
-              formattingDisabled={disabled}
+              formattingDisabled={composerDisabled}
               isEmojiPickerOpen={isEmojiPickerOpen}
               isFormattingOpen={isFormattingOpen}
               isSending={isSending}
diff --git a/desktop/src/features/messages/ui/submitMessageEdit.ts b/desktop/src/features/messages/ui/submitMessageEdit.ts
index 0ce8cea324..ce12de7210 100644
--- a/desktop/src/features/messages/ui/submitMessageEdit.ts
+++ b/desktop/src/features/messages/ui/submitMessageEdit.ts
@@ -25,6 +25,7 @@ type SubmitMessageEditOptions = EditDraft & {
   ownerPubkey: string | null;
   restoreComposer: (draft: EditDraft) => void;
   shouldRestoreComposer: () => boolean;
+  setDeferredUploadPending: (isPending: boolean) => void;
   save: (
     content: string,
     mediaTags?: string[][],
@@ -46,6 +47,7 @@ export async function submitMessageEdit({
   pendingImeta,
   queuedAttachments,
   restoreComposer,
+  setDeferredUploadPending,
   shouldRestoreComposer,
   save,
   setUploadError,
@@ -65,9 +67,11 @@ export async function submitMessageEdit({
     extractMentionPubkeys(content),
     ownerPubkey ?? "",
   );
+  const hasQueuedAttachments = draft.queuedAttachments.length > 0;
+  if (hasQueuedAttachments) setDeferredUploadPending(true);
   clearComposer();
 
-  const finishEdit = async (uploaded: ImetaMedia[]) => {
+  const finishEdit = async (uploaded: ImetaMedia[], signal?: AbortSignal) => {
     // An explicit empty media tag set tells edit receivers to wipe attachments.
     const { content: finalContent, mediaTags } = buildOutgoingMessage(
       content,
@@ -84,24 +88,31 @@ export async function submitMessageEdit({
         mediaTags,
         buildCustomEmojiTags(finalContent, customEmoji),
       ) ?? [];
+    if (signal?.aborted) return;
     await save(finalContent, outgoingTags, addedMentionPubkeys, editTargetId);
   };
 
-  if (draft.queuedAttachments.length > 0) {
+  if (hasQueuedAttachments) {
     enqueueBackgroundMediaUpload({
       attachments: draft.queuedAttachments,
-      onComplete: async (uploaded) => {
+      onComplete: async (uploaded, signal) => {
         try {
-          await finishEdit(uploaded);
+          await finishEdit(uploaded, signal);
         } catch {
           restoreDraft();
+        } finally {
+          setDeferredUploadPending(false);
         }
       },
       onError: (error) => {
         restoreDraft();
         setUploadError(String(error));
+        setDeferredUploadPending(false);
+      },
+      onCancel: () => {
+        restoreDraft();
+        setDeferredUploadPending(false);
       },
-      onCancel: restoreDraft,
     });
     return;
   }
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index ad9c5d1a46..5bc0d0dbb0 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -541,7 +541,10 @@ export function useMentionSendFlow({
             new Set(draft.savedSpoileredAttachmentUrls),
           );
         };
-        const finishSend = async (uploaded: ImetaMedia[]) => {
+        const finishSend = async (
+          uploaded: ImetaMedia[],
+          signal?: AbortSignal,
+        ) => {
           const { content: finalContent, mediaTags } = buildOutgoingMessage(
             draft.trimmed,
             [...draft.savedImeta, ...uploaded],
@@ -558,6 +561,7 @@ export function useMentionSendFlow({
             mediaTags,
             outgoingTags ?? [],
           );
+          if (signal?.aborted) return;
           await send(
             finalContent,
             mentionPubkeys,
@@ -565,6 +569,7 @@ export function useMentionSendFlow({
             sendChannelId,
             draft.capturedThreadContext,
           );
+          if (signal?.aborted) return;
           if (effectiveExplicitAgentPubkeys.length > 0) {
             // Promote only explicitly authored agents that remained effective
             // for this successful send. "Send without inviting" removes its
@@ -589,9 +594,9 @@ export function useMentionSendFlow({
 
         if (preparedUpload) {
           uploadStarted = preparedUpload.start({
-            onComplete: async (uploaded) => {
+            onComplete: async (uploaded, signal) => {
               try {
-                await finishSend(uploaded);
+                await finishSend(uploaded, signal);
               } catch {
                 restoreComposerAfterFailure();
               }

From 3f9fd468ce2656a08fb8da093c291045aa467118 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 19:17:44 +0100
Subject: [PATCH 13/21] Preserve deferred upload drafts on cancellation

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       |  5 +-
 .../src-tauri/src/commands/media_transcode.rs | 72 ++++++++++----
 .../lib/backgroundMediaUploadStore.ts         |  7 +-
 .../features/messages/ui/MessageComposer.tsx  | 24 ++---
 .../messages/ui/useMentionSendFlow.helpers.ts | 36 +++++++
 .../messages/ui/useMentionSendFlow.ts         | 97 ++++++++++---------
 6 files changed, 164 insertions(+), 77 deletions(-)
 create mode 100644 desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index 7ae2575664..d605cbec8d 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -10,7 +10,7 @@ use crate::relay::{parse_json_response, relay_api_base_url_with_override, relay_
 
 use super::media_transcode::{
     has_heic_extension, is_heic_file, is_video_file, transcode_and_extract_poster,
-    transcode_heic_path_to_jpeg_bytes,
+    transcode_and_extract_poster_with_cancellation, transcode_heic_path_to_jpeg_bytes,
 };
 use super::media_upload_progress::{emit_media_upload_phase, send_upload_attempt, UploadAttempt};
 
@@ -731,6 +731,7 @@ pub(super) async fn upload_media_bytes_inner(
         emit_media_upload_phase(&app, progress_id.as_deref(), "processing-video");
         // Video: write to temp → transcode + extract poster → read results.
         // All blocking I/O runs off the async runtime via spawn_blocking.
+        let cancellation = cancellation.cloned();
         tokio::task::spawn_blocking(move || -> Result<(Vec<u8>, Option<Vec<u8>>), String> {
             let tmp_input =
                 std::env::temp_dir().join(format!("buzz-drop-{}", uuid::Uuid::new_v4()));
@@ -738,7 +739,7 @@ pub(super) async fn upload_media_bytes_inner(
             let result = (|| {
                 std::fs::write(&tmp_input, &data)
                     .map_err(|e| format!("failed to write temp file: {e}"))?;
-                transcode_and_extract_poster(&tmp_input)
+                transcode_and_extract_poster_with_cancellation(&tmp_input, cancellation.as_ref())
             })();
             let _ = std::fs::remove_file(&tmp_input);
             result
diff --git a/desktop/src-tauri/src/commands/media_transcode.rs b/desktop/src-tauri/src/commands/media_transcode.rs
index 46a5decaa7..41e7116e72 100644
--- a/desktop/src-tauri/src/commands/media_transcode.rs
+++ b/desktop/src-tauri/src/commands/media_transcode.rs
@@ -6,6 +6,7 @@
 //! `validate_video_file()`) and to produce a JPEG poster frame.
 
 use crate::managed_agents::resolve_command;
+use tokio_util::sync::CancellationToken;
 
 /// Build an ffmpeg command without inheriting user-controlled process knobs.
 ///
@@ -135,6 +136,17 @@ pub(super) fn run_ffmpeg_with_timeout(
     cmd: &mut std::process::Command,
     timeout: std::time::Duration,
 ) -> Result<std::process::Output, String> {
+    run_ffmpeg_with_cancellation(cmd, timeout, None)
+}
+
+fn run_ffmpeg_with_cancellation(
+    cmd: &mut std::process::Command,
+    timeout: std::time::Duration,
+    cancellation: Option<&CancellationToken>,
+) -> Result<std::process::Output, String> {
+    if cancellation.is_some_and(CancellationToken::is_cancelled) {
+        return Err("upload cancelled".to_string());
+    }
     let mut child = cmd
         .spawn()
         .map_err(|e| format!("failed to spawn ffmpeg: {e}"))?;
@@ -162,6 +174,11 @@ pub(super) fn run_ffmpeg_with_timeout(
             }
             Ok(None) => {
                 // Still running — check deadline.
+                if cancellation.is_some_and(CancellationToken::is_cancelled) {
+                    let _ = child.kill();
+                    let _ = child.wait();
+                    return Err("upload cancelled".to_string());
+                }
                 if std::time::Instant::now() > deadline {
                     let _ = child.kill();
                     let _ = child.wait(); // reap zombie
@@ -181,14 +198,15 @@ pub(super) fn run_ffmpeg_with_timeout(
 /// relay's `validate_video_file()`.
 ///
 /// Returns the path to a temp file. Caller must clean up.
-pub(super) fn transcode_to_mp4(
+fn transcode_to_mp4_with_cancellation(
     source: &std::path::Path,
     ffmpeg: &std::path::Path,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<std::path::PathBuf, String> {
     // UUID-based temp path — unique across concurrent uploads.
     let output = std::env::temp_dir().join(format!("buzz-transcode-{}.mp4", uuid::Uuid::new_v4()));
 
-    let result = run_ffmpeg_with_timeout(
+    let result = run_ffmpeg_with_cancellation(
         ffmpeg_command(ffmpeg)
             .args([
                 "-y",
@@ -240,6 +258,7 @@ pub(super) fn transcode_to_mp4(
             .stdout(std::process::Stdio::null())
             .stderr(std::process::Stdio::piped()),
         FFMPEG_TIMEOUT,
+        cancellation,
     )?;
 
     if !result.status.success() {
@@ -340,9 +359,10 @@ pub(super) fn transcode_heic_path_to_jpeg_bytes(
 ///
 /// Best-effort: returns `Err` on failure — callers should log and continue
 /// without a poster rather than failing the entire video upload.
-pub(super) fn extract_poster_frame(
+fn extract_poster_frame_with_cancellation(
     mp4_path: &std::path::Path,
     ffmpeg: &std::path::Path,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<std::path::PathBuf, String> {
     let output = std::env::temp_dir().join(format!("buzz-poster-{}.jpg", uuid::Uuid::new_v4()));
 
@@ -350,7 +370,7 @@ pub(super) fn extract_poster_frame(
     let poster_timeout = std::time::Duration::from_secs(30);
 
     // Try seeking to 1s first (avoids black first frames from fade-ins).
-    let result = run_ffmpeg_with_timeout(
+    let result = run_ffmpeg_with_cancellation(
         ffmpeg_command(ffmpeg)
             .args([
                 "-y",
@@ -369,6 +389,7 @@ pub(super) fn extract_poster_frame(
             .stdout(std::process::Stdio::null())
             .stderr(std::process::Stdio::piped()),
         poster_timeout,
+        cancellation,
     )?;
 
     // If seek to 1s failed (video shorter than 1s), retry from first frame.
@@ -381,7 +402,7 @@ pub(super) fn extract_poster_frame(
             eprintln!("buzz-desktop: poster seek-to-1s failed, trying first frame: {stderr}");
         }
         let _ = std::fs::remove_file(&output);
-        let fallback = run_ffmpeg_with_timeout(
+        let fallback = run_ffmpeg_with_cancellation(
             ffmpeg_command(ffmpeg)
                 .args([
                     "-y",
@@ -398,6 +419,7 @@ pub(super) fn extract_poster_frame(
                 .stdout(std::process::Stdio::null())
                 .stderr(std::process::Stdio::piped()),
             poster_timeout,
+            cancellation,
         )?;
 
         if !fallback.status.success() || !output.exists() {
@@ -417,22 +439,35 @@ pub(super) fn extract_poster_frame(
 /// and the video bytes are still valid. All temp files are cleaned up.
 pub(super) fn transcode_and_extract_poster(
     source: &std::path::Path,
+) -> Result<(Vec<u8>, Option<Vec<u8>>), String> {
+    transcode_and_extract_poster_with_cancellation(source, None)
+}
+
+pub(super) fn transcode_and_extract_poster_with_cancellation(
+    source: &std::path::Path,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<(Vec<u8>, Option<Vec<u8>>), String> {
     let ffmpeg_path = find_ffmpeg()?;
-    let transcoded = transcode_to_mp4(source, &ffmpeg_path)?;
+    let transcoded = transcode_to_mp4_with_cancellation(source, &ffmpeg_path, cancellation)?;
 
     // Extract poster from the transcoded file (not the original — guarantees decodability).
-    let poster_bytes = match extract_poster_frame(&transcoded, &ffmpeg_path) {
-        Ok(poster_path) => {
-            let bytes = std::fs::read(&poster_path).ok();
-            let _ = std::fs::remove_file(&poster_path);
-            bytes
-        }
-        Err(e) => {
-            eprintln!("buzz-desktop: poster extraction failed (non-fatal): {e}");
-            None
-        }
-    };
+    let poster_bytes =
+        match extract_poster_frame_with_cancellation(&transcoded, &ffmpeg_path, cancellation) {
+            Ok(poster_path) => {
+                let bytes = std::fs::read(&poster_path).ok();
+                let _ = std::fs::remove_file(&poster_path);
+                bytes
+            }
+            Err(e) => {
+                eprintln!("buzz-desktop: poster extraction failed (non-fatal): {e}");
+                None
+            }
+        };
+
+    if cancellation.is_some_and(CancellationToken::is_cancelled) {
+        let _ = std::fs::remove_file(&transcoded);
+        return Err("upload cancelled".to_string());
+    }
 
     let video_bytes =
         std::fs::read(&transcoded).map_err(|e| format!("failed to read transcoded file: {e}"));
@@ -599,7 +634,8 @@ mod tests {
             return;
         }
 
-        let output = transcode_to_mp4(&source, &ffmpeg).expect("transcode fixture");
+        let output =
+            transcode_to_mp4_with_cancellation(&source, &ffmpeg, None).expect("transcode fixture");
         let bytes = std::fs::read(&output).expect("read transcoded video");
         let _ = std::fs::remove_file(&source);
         let _ = std::fs::remove_file(&output);
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index f7076dc979..207e765d4b 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -295,7 +295,12 @@ export function enqueueBackgroundMediaUpload({
 }
 
 export function cancelBackgroundMediaUploads(): void {
-  for (const task of [...tasks.values()]) cancelTask(task);
+  for (const task of [...tasks.values()].reverse()) {
+    if (!task.isCompleting) {
+      cancelTask(task);
+      return;
+    }
+  }
 }
 
 export function resetBackgroundMediaUploads(): void {
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index e804539cee..4d3b83c232 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -141,9 +141,15 @@ function MessageComposerImpl({
   const internalMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const media = mediaController ?? internalMedia;
   const [isDeferredEditPending, setDeferredEditPending] = React.useState(false);
-  const composerDisabled = disabled || isDeferredEditPending;
+  const [isDeferredUploadPending, setDeferredUploadPending] =
+    React.useState(false);
+  const composerDisabled =
+    disabled || isDeferredEditPending || isDeferredUploadPending;
   const isEditSubmissionLocked =
-    isSending || media.isUploading || isDeferredEditPending;
+    isSending ||
+    media.isUploading ||
+    isDeferredEditPending ||
+    isDeferredUploadPending;
   const canRestoreEditDraftRef = React.useRef(false);
   canRestoreEditDraftRef.current =
     contentRef.current.trim().length === 0 &&
@@ -229,7 +235,6 @@ function MessageComposerImpl({
       (replyTarget
         ? `Reply to ${replyTarget.author} in #${channelName}`
         : `Message #${channelName}`));
-
   const richText = useRichTextEditor({
     placeholder: computedPlaceholder,
     editable: !composerDisabled,
@@ -254,7 +259,6 @@ function MessageComposerImpl({
       mentions.updateMentionQuery(text, cursor);
       channelLinks.updateChannelQuery(text, cursor);
       emojiAutocomplete.updateEmojiQuery(text, cursor);
-
       persistentMentionHydrationRef.current?.reconcile(text);
 
       if (text.trim().length > 0) {
@@ -262,7 +266,6 @@ function MessageComposerImpl({
       }
     },
   });
-
   const linkEditor = useLinkEditor(richText);
   syncContentRefFromEditorRef.current = () => {
     const markdown = richText.getMarkdown();
@@ -273,7 +276,6 @@ function MessageComposerImpl({
   onLinkSelectionChangeRef.current = linkEditor.showFromCursor;
   onLinkShortcutRef.current = linkEditor.openFromShortcut;
   useComposerSpoilerParticles(richText.editor, composerScrollRef);
-
   const persistentMentionHydration = usePersistentAgentMentionHydration({
     audienceScope,
     hydrationKey: effectiveDraftKey,
@@ -287,7 +289,6 @@ function MessageComposerImpl({
     persistentMentionHydration,
   );
   persistentMentionHydrationRef.current = persistentMentionHydration;
-
   const mentionSendFlow = useMentionSendFlow({
     channelId,
     channelLinks,
@@ -303,6 +304,10 @@ function MessageComposerImpl({
     setContent: setComposerContent,
     setIsEmojiPickerOpen,
     setPendingImeta: media.setPendingImeta,
+    hasUnsavedMedia: () =>
+      media.pendingImetaRef.current.length > 0 ||
+      media.queuedAttachmentsRef.current.length > 0,
+    setDeferredUploadPending,
     clearQueuedAttachments: media.clearQueuedAttachments,
     restoreQueuedAttachments: media.restoreQueuedAttachments,
     setSpoileredAttachmentUrls,
@@ -319,7 +324,6 @@ function MessageComposerImpl({
         : undefined,
     resolvePostSendContent: persistentMentionHydration.resolvePostSendContent,
   });
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: editTarget?.id is the trigger
   React.useEffect(() => {
     if (editTarget) {
@@ -373,7 +377,6 @@ function MessageComposerImpl({
       setSpoileredAttachmentUrls(restoredSpoileredAttachmentUrls);
     }
   }, [editTarget?.id]);
-
   // ── Focus on reply ──────────────────────────────────────────────────
   // Use focusPreserve so that re-renders (e.g. new messages arriving in
   // a thread) don't yank the cursor to the end while the user is editing.
@@ -381,10 +384,8 @@ function MessageComposerImpl({
     if (!replyTarget || composerDisabled) return;
     richText.focusPreserve();
   }, [composerDisabled, replyTarget, richText.focusPreserve]);
-
   // ── Autofocus on mount / channel switch ─────────────────────────────
   useComposerAutofocus(richText.focus, effectiveDraftKey, composerDisabled);
-
   // ── Mention / channel / emoji autocomplete insertion ────────────────
   // Hooks return a plain-text edit descriptor; `replacePlainTextRange`
   // applies it as a single ProseMirror transaction (no markdown round-trip).
@@ -411,7 +412,6 @@ function MessageComposerImpl({
       richText.getPlainTextAndCursor,
     ],
   );
-
   const applyChannelInsert = React.useCallback(
     (suggestion: ChannelSuggestion) => {
       const { cursor } = richText.getPlainTextAndCursor();
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts b/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts
new file mode 100644
index 0000000000..8c63b45dc8
--- /dev/null
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts
@@ -0,0 +1,36 @@
+import type { ManagedAgent } from "@/shared/api/types";
+import { normalizePubkey } from "@/shared/lib/pubkey";
+import { MENTION_REFERENCE_TAG } from "@/shared/lib/resolveMentionNames";
+
+export { MENTION_REFERENCE_TAG };
+
+export function mergeOutgoingTagsWithReferenceMentions(
+  outgoingTags: string[][] | undefined,
+  pubkeys: Iterable<string>,
+) {
+  const normalizedPubkeys = uniqueNormalizedPubkeys(pubkeys);
+  if (normalizedPubkeys.length === 0) {
+    return outgoingTags;
+  }
+
+  return [
+    ...(outgoingTags ?? []),
+    ...normalizedPubkeys.map((pubkey) => [MENTION_REFERENCE_TAG, pubkey]),
+  ];
+}
+
+export function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+
+export function uniqueNormalizedPubkeys(pubkeys: Iterable<string>) {
+  return [...new Set([...pubkeys].map(normalizePubkey))].filter(Boolean);
+}
+
+export function isManagedAgentRunning(agent: ManagedAgent) {
+  return agent.status === "running" || agent.status === "deployed";
+}
+
+export function isProviderBackedAgent(agent: ManagedAgent) {
+  return agent.backend.type === "provider";
+}
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index 5bc0d0dbb0..5ee5e49265 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -30,8 +30,15 @@ import type { UseDraftsResult } from "@/features/messages/lib/useDrafts";
 import type { CustomEmoji } from "@/shared/lib/remarkCustomEmoji";
 import type { AcpRuntime, ChannelType, ManagedAgent } from "@/shared/api/types";
 import { normalizePubkey, truncatePubkey } from "@/shared/lib/pubkey";
-import { MENTION_REFERENCE_TAG } from "@/shared/lib/resolveMentionNames";
 import { buildCustomEmojiTags } from "@/shared/lib/customEmojiTags";
+import {
+  getErrorMessage,
+  isManagedAgentRunning,
+  isProviderBackedAgent,
+  MENTION_REFERENCE_TAG,
+  mergeOutgoingTagsWithReferenceMentions,
+  uniqueNormalizedPubkeys,
+} from "./useMentionSendFlow.helpers";
 
 type PendingNonMemberMentionSend = {
   capturedChannelId: string | null;
@@ -79,7 +86,7 @@ type UseMentionSendFlowOptions = {
   channelType: ChannelType | null;
   contentRef: React.MutableRefObject<string>;
   customEmoji: CustomEmoji[];
-  drafts: Pick<UseDraftsResult, "markDraftSent">;
+  drafts: Pick<UseDraftsResult, "loadDraft" | "markDraftSent" | "persistDraft">;
   emojiAutocomplete: Pick<UseEmojiAutocompleteResult, "clearEmojis">;
   mentions: UseMentionsResult;
   onPrepareSendChannel?: (
@@ -104,6 +111,8 @@ type UseMentionSendFlowOptions = {
   setContent: (content: string) => void;
   setIsEmojiPickerOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setPendingImeta: (pendingImeta: ImetaMedia[]) => void;
+  hasUnsavedMedia: () => boolean;
+  setDeferredUploadPending: (isPending: boolean) => void;
   clearQueuedAttachments: () => void;
   restoreQueuedAttachments: (attachments: QueuedMediaAttachment[]) => void;
   setSpoileredAttachmentUrls?: React.Dispatch<
@@ -117,43 +126,10 @@ type UseMentionSendFlowOptions = {
   }) => void;
   resolvePostSendContent?: (effectiveExplicitAgentPubkeys: string[]) => string;
 };
-
-function mergeOutgoingTagsWithReferenceMentions(
-  outgoingTags: string[][] | undefined,
-  pubkeys: Iterable<string>,
-) {
-  const normalizedPubkeys = uniqueNormalizedPubkeys(pubkeys);
-  if (normalizedPubkeys.length === 0) {
-    return outgoingTags;
-  }
-
-  return [
-    ...(outgoingTags ?? []),
-    ...normalizedPubkeys.map((pubkey) => [MENTION_REFERENCE_TAG, pubkey]),
-  ];
-}
-
-function getErrorMessage(error: unknown, fallback: string) {
-  return error instanceof Error && error.message ? error.message : fallback;
-}
-
-function uniqueNormalizedPubkeys(pubkeys: Iterable<string>) {
-  return [...new Set([...pubkeys].map(normalizePubkey))].filter(Boolean);
-}
-
-function isManagedAgentRunning(agent: ManagedAgent) {
-  return agent.status === "running" || agent.status === "deployed";
-}
-
-function isProviderBackedAgent(agent: ManagedAgent) {
-  return agent.backend.type === "provider";
-}
-
 const DM_THREAD_AGENT_MENTION_ERROR =
   "Agents must already be in a DM to be mentioned in its threads. Start a new conversation that includes the agent.";
 const DM_THREAD_MEMBERS_LOADING_ERROR =
   "Checking conversation members. Try again in a moment.";
-
 export function useMentionSendFlow({
   channelId,
   channelLinks,
@@ -169,6 +145,8 @@ export function useMentionSendFlow({
   setContent,
   setIsEmojiPickerOpen,
   setPendingImeta,
+  hasUnsavedMedia,
+  setDeferredUploadPending,
   clearQueuedAttachments,
   restoreQueuedAttachments,
   setSpoileredAttachmentUrls,
@@ -197,7 +175,6 @@ export function useMentionSendFlow({
       isMountedRef.current = false;
     };
   }, []);
-
   const addMembersMutation = useAddChannelMembersMutation(channelId);
   const attachAgentMutation = useAttachManagedAgentToChannelMutation(channelId);
   const createPersonaAgentMutation =
@@ -207,18 +184,15 @@ export function useMentionSendFlow({
   const availableRuntimesQuery = useAvailableAcpRuntimes();
   const managedAgentsQuery = useManagedAgentsQuery();
   const startAgentMutation = useStartManagedAgentMutation();
-
   const getManagedAgentsByPubkey = React.useCallback(async () => {
     const agents =
       managedAgentsQuery.data ??
       (await managedAgentsQuery.refetch()).data ??
       [];
-
     return new Map(
       agents.map((agent) => [normalizePubkey(agent.pubkey), agent]),
     );
   }, [managedAgentsQuery.data, managedAgentsQuery.refetch]);
-
   const getAvailableRuntimes = React.useCallback(async (): Promise<
     AcpRuntime[]
   > => {
@@ -226,7 +200,6 @@ export function useMentionSendFlow({
     if (cached.length > 0 || !availableRuntimesQuery.isLoading) {
       return cached;
     }
-
     const refetched = await availableRuntimesQuery.refetch();
     return (refetched.data ?? []).filter(
       (runtime): runtime is AcpRuntime =>
@@ -239,7 +212,6 @@ export function useMentionSendFlow({
     availableRuntimesQuery.isLoading,
     availableRuntimesQuery.refetch,
   ]);
-
   const ensureManagedAgentMentionsReady = React.useCallback(
     async (
       mentionPubkeys: string[],
@@ -523,12 +495,37 @@ export function useMentionSendFlow({
           );
 
         const send = onSendRef.current;
+        const persistCanceledDraft = () => {
+          if (!draft.sentDraftKey) return;
+          const existing = drafts.loadDraft(draft.sentDraftKey);
+          if (
+            existing &&
+            (existing.content !== draft.savedContent ||
+              existing.channelId !==
+                (draft.capturedChannelId ?? draft.sentDraftKey) ||
+              JSON.stringify(existing.pendingImeta) !==
+                JSON.stringify(draft.savedImeta) ||
+              JSON.stringify(existing.spoileredAttachmentUrls) !==
+                JSON.stringify([...draft.savedSpoileredAttachmentUrls]))
+          ) {
+            return;
+          }
+          drafts.persistDraft(
+            draft.sentDraftKey,
+            draft.savedContent,
+            draft.capturedChannelId ?? draft.sentDraftKey,
+            draft.savedImeta,
+            [...draft.savedSpoileredAttachmentUrls],
+          );
+        };
         const restoreComposerAfterFailure = () => {
+          persistCanceledDraft();
           if (
             !isMountedRef.current ||
             (draft.capturedChannelId !== channelIdRef.current &&
               channelIdRef.current !== null) ||
-            contentRef.current.trim().length > 0
+            contentRef.current.trim().length > 0 ||
+            hasUnsavedMedia()
           ) {
             return;
           }
@@ -593,23 +590,33 @@ export function useMentionSendFlow({
         };
 
         if (preparedUpload) {
+          setDeferredUploadPending(true);
           uploadStarted = preparedUpload.start({
             onComplete: async (uploaded, signal) => {
               try {
                 await finishSend(uploaded, signal);
               } catch {
                 restoreComposerAfterFailure();
+              } finally {
+                setDeferredUploadPending(false);
               }
             },
             onError: (error) => {
               restoreComposerAfterFailure();
+              setDeferredUploadPending(false);
               toast.error(
                 `Upload failed: ${getErrorMessage(error, "Unknown error")}`,
               );
             },
-            onCancel: restoreComposerAfterFailure,
+            onCancel: () => {
+              restoreComposerAfterFailure();
+              setDeferredUploadPending(false);
+            },
           });
-          if (!uploadStarted) return;
+          if (!uploadStarted) {
+            setDeferredUploadPending(false);
+            return;
+          }
         }
 
         // Replace the sent body directly with its final post-send state before
@@ -655,6 +662,8 @@ export function useMentionSendFlow({
       setPendingImeta,
       restoreQueuedAttachments,
       setSpoileredAttachmentUrls,
+      hasUnsavedMedia,
+      setDeferredUploadPending,
     ],
   );
 

From 5dbe71729bf726bb219410a09ae043fbabc247c2 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 20:45:26 +0100
Subject: [PATCH 14/21] Fix deferred composer locking

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../src/features/channels/ui/ChannelPane.tsx  | 13 +++----
 .../features/messages/ui/MessageComposer.tsx  | 36 +++++++++----------
 .../messages/ui/MessageComposer.types.ts      |  1 +
 .../messages/ui/useMentionSendFlow.ts         |  9 -----
 4 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 4dc8ad54d6..fb9d6eccc3 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -176,6 +176,8 @@ export const ChannelPane = React.memo(function ChannelPane({
     currentPubkey,
   );
   const mainComposerMedia = useMediaUpload({ deferUploadsUntilSend: true });
+  const [isMainDeferredEditPending, setMainDeferredEditPending] =
+    React.useState(false);
   const isNonMemberView =
     activeChannel !== null &&
     !activeChannel.isMember &&
@@ -231,15 +233,12 @@ export const ChannelPane = React.memo(function ChannelPane({
       welcomeComposerHideTimerRef.current = null;
     }
   }, []);
-
   React.useEffect(
     () => () => clearWelcomeComposerDismissTimer(),
     [clearWelcomeComposerDismissTimer],
   );
-
   React.useEffect(() => {
     clearWelcomeComposerDismissTimer();
-
     if (
       activeChannelId &&
       isActiveWelcomeChannel &&
@@ -248,7 +247,6 @@ export const ChannelPane = React.memo(function ChannelPane({
       setWelcomeComposerBannerState("hidden");
       return;
     }
-
     setWelcomeComposerBannerState("prompt");
   }, [
     activeChannelId,
@@ -263,7 +261,6 @@ export const ChannelPane = React.memo(function ChannelPane({
       threadMessages.some((entry) => entry.message.id === editTarget.id));
   const mainEditTarget = editTarget && !isEditInThread ? editTarget : null;
   const threadEditTarget = editTarget && isEditInThread ? editTarget : null;
-
   const findLastOwnEditable = React.useCallback(
     (candidates: TimelineMessage[]): TimelineMessage | null => {
       if (!onEdit || !currentPubkey) return null;
@@ -400,7 +397,10 @@ export const ChannelPane = React.memo(function ChannelPane({
     ],
   );
   const canDropInMainColumn =
-    hasMainComposerOverlay && !isComposerDisabled && !isSinglePanelView;
+    hasMainComposerOverlay &&
+    !isComposerDisabled &&
+    !isMainDeferredEditPending &&
+    !isSinglePanelView;
   const hasTypingActivity = typingPubkeys.length > 0;
   // Unified working set for the composer bar: observer-derived turns primary,
   // bot typing fallback (both folded together by agentWorkingSignal). This is
@@ -767,6 +767,7 @@ export const ChannelPane = React.memo(function ChannelPane({
                   onAutoSubmitComplete={handleAutoSubmitComplete}
                   isSending={isSending}
                   mediaController={mainComposerMedia}
+                  onDeferredEditPendingChange={setMainDeferredEditPending}
                   onCancelEdit={onCancelEdit}
                   onEditLastOwnMessage={handleEditLastOwnMainMessage}
                   onEditSave={onEditSave}
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 4d3b83c232..0b8522004c 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -69,6 +69,7 @@ function MessageComposerImpl({
   onAutoSubmitComplete,
   editTarget = null,
   isSending = false,
+  onDeferredEditPendingChange,
   onCancelEdit,
   onCancelReply,
   onCaptureSendContext,
@@ -141,15 +142,9 @@ function MessageComposerImpl({
   const internalMedia = useMediaUpload({ deferUploadsUntilSend: true });
   const media = mediaController ?? internalMedia;
   const [isDeferredEditPending, setDeferredEditPending] = React.useState(false);
-  const [isDeferredUploadPending, setDeferredUploadPending] =
-    React.useState(false);
-  const composerDisabled =
-    disabled || isDeferredEditPending || isDeferredUploadPending;
+  const composerDisabled = disabled || isDeferredEditPending;
   const isEditSubmissionLocked =
-    isSending ||
-    media.isUploading ||
-    isDeferredEditPending ||
-    isDeferredUploadPending;
+    isSending || media.isUploading || isDeferredEditPending;
   const canRestoreEditDraftRef = React.useRef(false);
   canRestoreEditDraftRef.current =
     contentRef.current.trim().length === 0 &&
@@ -307,7 +302,6 @@ function MessageComposerImpl({
     hasUnsavedMedia: () =>
       media.pendingImetaRef.current.length > 0 ||
       media.queuedAttachmentsRef.current.length > 0,
-    setDeferredUploadPending,
     clearQueuedAttachments: media.clearQueuedAttachments,
     restoreQueuedAttachments: media.restoreQueuedAttachments,
     setSpoileredAttachmentUrls,
@@ -324,6 +318,10 @@ function MessageComposerImpl({
         : undefined,
     resolvePostSendContent: persistentMentionHydration.resolvePostSendContent,
   });
+  React.useEffect(() => {
+    onDeferredEditPendingChange?.(isDeferredEditPending);
+    return () => onDeferredEditPendingChange?.(false);
+  }, [isDeferredEditPending, onDeferredEditPendingChange]);
   // biome-ignore lint/correctness/useExhaustiveDependencies: editTarget?.id is the trigger
   React.useEffect(() => {
     if (editTarget) {
@@ -400,7 +398,6 @@ function MessageComposerImpl({
     },
     [richText.replacePlainTextRange],
   );
-
   const applyMentionInsert = React.useCallback(
     (suggestion: MentionSuggestion) => {
       const { cursor } = richText.getPlainTextAndCursor();
@@ -423,7 +420,6 @@ function MessageComposerImpl({
       richText.getPlainTextAndCursor,
     ],
   );
-
   const applyEmojiInsert = React.useCallback(
     (suggestion: EmojiSuggestion) => {
       const { cursor } = richText.getPlainTextAndCursor();
@@ -435,7 +431,6 @@ function MessageComposerImpl({
       richText.getPlainTextAndCursor,
     ],
   );
-
   // ── Emoji insertion ─────────────────────────────────────────────────
   const insertEmoji = React.useCallback(
     (emoji: string) => {
@@ -472,12 +467,10 @@ function MessageComposerImpl({
     },
     [richText.editor, mentions.clearMentions, customEmoji],
   );
-
   // ── @ mention picker (toolbar button) ───────────────────────────────
   const openMentionPicker = React.useCallback(() => {
     if (!richText.editor) return;
     const { text, cursor } = richText.getPlainTextAndCursor();
-
     // Check if there's already an @-query in progress
     const beforeCursor = text.slice(0, cursor);
     if (/(?:^|[\s])@[^\s]*$/.test(beforeCursor)) {
@@ -492,7 +485,6 @@ function MessageComposerImpl({
       cursor > 0 && previousChar && !/\s/.test(previousChar) ? " @" : "@";
     richText.editor.chain().focus().insertContent(prefix).run();
     setIsEmojiPickerOpen(false);
-
     // Trigger mention detection after inserting @
     const { text: updatedText, cursor: updatedCursor } =
       richText.getPlainTextAndCursor();
@@ -550,7 +542,6 @@ function MessageComposerImpl({
       });
       return;
     }
-
     // Normal send
     const currentPendingImeta = media.pendingImetaRef.current;
     const currentQueuedAttachments = media.queuedAttachmentsRef.current;
@@ -564,7 +555,6 @@ function MessageComposerImpl({
     ) {
       return;
     }
-
     const capturedThreadContext = onCaptureSendContext?.() ?? null;
     if (
       capturedThreadContext !== null &&
@@ -710,7 +700,12 @@ function MessageComposerImpl({
       }
 
       // Escape in edit mode
-      if (event.key === "Escape" && editTargetRef.current && onCancelEdit) {
+      if (
+        event.key === "Escape" &&
+        !isDeferredEditPending &&
+        editTargetRef.current &&
+        onCancelEdit
+      ) {
         event.preventDefault();
         onCancelEdit();
         return;
@@ -725,6 +720,7 @@ function MessageComposerImpl({
       applyMentionInsert,
       linkEditor.isCardOpen,
       linkEditor.focusCardFirstControl,
+      isDeferredEditPending,
       onCancelEdit,
     ],
   );
@@ -905,6 +901,10 @@ function MessageComposerImpl({
             onDrop={
               ownsDropZone
                 ? (e) => {
+                    if (isDeferredEditPending) {
+                      e.preventDefault();
+                      return;
+                    }
                     void media.handleDrop(e);
                   }
                 : undefined
diff --git a/desktop/src/features/messages/ui/MessageComposer.types.ts b/desktop/src/features/messages/ui/MessageComposer.types.ts
index 7418687cfa..22e9b75b0a 100644
--- a/desktop/src/features/messages/ui/MessageComposer.types.ts
+++ b/desktop/src/features/messages/ui/MessageComposer.types.ts
@@ -51,6 +51,7 @@ export type MessageComposerProps = {
   } | null;
   isSending?: boolean;
   mediaController?: MediaUploadController;
+  onDeferredEditPendingChange?: (isPending: boolean) => void;
   onCancelEdit?: () => void;
   onCancelReply?: () => void;
   /**
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index 5ee5e49265..5e1ad5b31a 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -112,7 +112,6 @@ type UseMentionSendFlowOptions = {
   setIsEmojiPickerOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setPendingImeta: (pendingImeta: ImetaMedia[]) => void;
   hasUnsavedMedia: () => boolean;
-  setDeferredUploadPending: (isPending: boolean) => void;
   clearQueuedAttachments: () => void;
   restoreQueuedAttachments: (attachments: QueuedMediaAttachment[]) => void;
   setSpoileredAttachmentUrls?: React.Dispatch<
@@ -146,7 +145,6 @@ export function useMentionSendFlow({
   setIsEmojiPickerOpen,
   setPendingImeta,
   hasUnsavedMedia,
-  setDeferredUploadPending,
   clearQueuedAttachments,
   restoreQueuedAttachments,
   setSpoileredAttachmentUrls,
@@ -590,31 +588,25 @@ export function useMentionSendFlow({
         };
 
         if (preparedUpload) {
-          setDeferredUploadPending(true);
           uploadStarted = preparedUpload.start({
             onComplete: async (uploaded, signal) => {
               try {
                 await finishSend(uploaded, signal);
               } catch {
                 restoreComposerAfterFailure();
-              } finally {
-                setDeferredUploadPending(false);
               }
             },
             onError: (error) => {
               restoreComposerAfterFailure();
-              setDeferredUploadPending(false);
               toast.error(
                 `Upload failed: ${getErrorMessage(error, "Unknown error")}`,
               );
             },
             onCancel: () => {
               restoreComposerAfterFailure();
-              setDeferredUploadPending(false);
             },
           });
           if (!uploadStarted) {
-            setDeferredUploadPending(false);
             return;
           }
         }
@@ -663,7 +655,6 @@ export function useMentionSendFlow({
       restoreQueuedAttachments,
       setSpoileredAttachmentUrls,
       hasUnsavedMedia,
-      setDeferredUploadPending,
     ],
   );
 

From d2145a64d74e1bf252696970e847fc72060683bc Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 21:10:54 +0100
Subject: [PATCH 15/21] Cancel queued HEIC transcoding

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media.rs       |  8 ++++++-
 .../src-tauri/src/commands/media_transcode.rs | 24 ++++++++++---------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/desktop/src-tauri/src/commands/media.rs b/desktop/src-tauri/src/commands/media.rs
index d605cbec8d..86a91a9842 100644
--- a/desktop/src-tauri/src/commands/media.rs
+++ b/desktop/src-tauri/src/commands/media.rs
@@ -11,6 +11,7 @@ use crate::relay::{parse_json_response, relay_api_base_url_with_override, relay_
 use super::media_transcode::{
     has_heic_extension, is_heic_file, is_video_file, transcode_and_extract_poster,
     transcode_and_extract_poster_with_cancellation, transcode_heic_path_to_jpeg_bytes,
+    transcode_heic_path_to_jpeg_bytes_with_cancellation,
 };
 use super::media_upload_progress::{emit_media_upload_phase, send_upload_attempt, UploadAttempt};
 
@@ -751,6 +752,7 @@ pub(super) async fn upload_media_bytes_inner(
         // HEIC/HEIF still pasted/dropped: no filename here, so detection is
         // magic-bytes only. ffmpeg needs a path, so write to temp, transcode
         // to JPEG, and clean up. (Mirrors mobile's pre-upload transcode.)
+        let cancellation = cancellation.cloned();
         tokio::task::spawn_blocking(move || -> Result<(Vec<u8>, Option<Vec<u8>>), String> {
             let tmp_input =
                 std::env::temp_dir().join(format!("buzz-drop-{}", uuid::Uuid::new_v4()));
@@ -758,7 +760,11 @@ pub(super) async fn upload_media_bytes_inner(
             let result = (|| {
                 std::fs::write(&tmp_input, &data)
                     .map_err(|e| format!("failed to write temp file: {e}"))?;
-                transcode_heic_path_to_jpeg_bytes(&tmp_input).map(|jpeg| (jpeg, None))
+                transcode_heic_path_to_jpeg_bytes_with_cancellation(
+                    &tmp_input,
+                    cancellation.as_ref(),
+                )
+                .map(|jpeg| (jpeg, None))
             })();
             let _ = std::fs::remove_file(&tmp_input);
             result
diff --git a/desktop/src-tauri/src/commands/media_transcode.rs b/desktop/src-tauri/src/commands/media_transcode.rs
index 41e7116e72..b1db4e0d39 100644
--- a/desktop/src-tauri/src/commands/media_transcode.rs
+++ b/desktop/src-tauri/src/commands/media_transcode.rs
@@ -122,7 +122,7 @@ pub(super) fn has_heic_extension(path: &std::path::Path) -> bool {
 /// blocking a Tokio worker thread indefinitely.
 const FFMPEG_TIMEOUT: std::time::Duration = std::time::Duration::from_secs(600);
 
-/// Run an ffmpeg command with a wall-clock timeout.
+/// Run an ffmpeg command with a wall-clock timeout and optional cancellation.
 ///
 /// Spawns the child process, polls `try_wait()` every 500ms, and kills it
 /// if the deadline is exceeded. Returns the same `Output` as `Command::output()`.
@@ -132,13 +132,6 @@ const FFMPEG_TIMEOUT: std::time::Duration = std::time::Duration::from_secs(600);
 /// enough progress/diagnostic output to fill the OS pipe buffer (~64 KiB),
 /// the child blocks on write() and never exits — causing a false timeout.
 /// `-loglevel error` suppresses progress spam, keeping stderr small.
-pub(super) fn run_ffmpeg_with_timeout(
-    cmd: &mut std::process::Command,
-    timeout: std::time::Duration,
-) -> Result<std::process::Output, String> {
-    run_ffmpeg_with_cancellation(cmd, timeout, None)
-}
-
 fn run_ffmpeg_with_cancellation(
     cmd: &mut std::process::Command,
     timeout: std::time::Duration,
@@ -284,9 +277,10 @@ fn transcode_to_mp4_with_cancellation(
 /// Uses `-frames:v 1` so multi-image HEIF containers (Live Photos, bursts)
 /// yield a single still, and `-q:v 2` for high JPEG quality. Returns the path
 /// to a temp file. Caller must clean up.
-pub(super) fn transcode_heic_to_jpeg(
+fn transcode_heic_to_jpeg(
     source: &std::path::Path,
     ffmpeg: &std::path::Path,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<std::path::PathBuf, String> {
     // UUID-based temp path — unique across concurrent uploads.
     let output = std::env::temp_dir().join(format!("buzz-heic-{}.jpg", uuid::Uuid::new_v4()));
@@ -294,7 +288,7 @@ pub(super) fn transcode_heic_to_jpeg(
     // Single-frame image decode — 60s is generous even for large HEICs.
     let heic_timeout = std::time::Duration::from_secs(60);
 
-    let result = run_ffmpeg_with_timeout(
+    let result = run_ffmpeg_with_cancellation(
         ffmpeg_command(ffmpeg)
             .args([
                 "-y",
@@ -320,6 +314,7 @@ pub(super) fn transcode_heic_to_jpeg(
             .stdout(std::process::Stdio::null())
             .stderr(std::process::Stdio::piped()),
         heic_timeout,
+        cancellation,
     )?;
 
     if !result.status.success() {
@@ -342,9 +337,16 @@ pub(super) fn transcode_heic_to_jpeg(
 /// file. Mirrors `transcode_and_extract_poster` but for images (no poster).
 pub(super) fn transcode_heic_path_to_jpeg_bytes(
     source: &std::path::Path,
+) -> Result<Vec<u8>, String> {
+    transcode_heic_path_to_jpeg_bytes_with_cancellation(source, None)
+}
+
+pub(super) fn transcode_heic_path_to_jpeg_bytes_with_cancellation(
+    source: &std::path::Path,
+    cancellation: Option<&CancellationToken>,
 ) -> Result<Vec<u8>, String> {
     let ffmpeg_path = find_ffmpeg()?;
-    let jpeg_path = transcode_heic_to_jpeg(source, &ffmpeg_path)?;
+    let jpeg_path = transcode_heic_to_jpeg(source, &ffmpeg_path, cancellation)?;
     let bytes =
         std::fs::read(&jpeg_path).map_err(|e| format!("failed to read transcoded HEIC: {e}"));
     let _ = std::fs::remove_file(&jpeg_path);

From 8a652f96fadfcc28c7ec95a8c12d9e56db36f96a Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 21:26:51 +0100
Subject: [PATCH 16/21] Recover canceled background uploads

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media_raw.rs   |  1 +
 .../src-tauri/src/commands/media_transcode.rs | 12 +++++++--
 .../lib/backgroundMediaUploadStore.ts         | 22 ++++++++++++++++
 .../features/messages/ui/MessageComposer.tsx  |  6 ++---
 .../messages/ui/useDraftPersistSnapshot.ts    | 20 +++++++++++++++
 .../messages/ui/useMentionSendFlow.ts         | 25 +++++++++++++------
 6 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/desktop/src-tauri/src/commands/media_raw.rs b/desktop/src-tauri/src/commands/media_raw.rs
index b99a44a6fa..a74ccd4dfe 100644
--- a/desktop/src-tauri/src/commands/media_raw.rs
+++ b/desktop/src-tauri/src/commands/media_raw.rs
@@ -50,6 +50,7 @@ fn optional_raw_upload_header(request: &Request<'_>, name: &str) -> Result<Optio
         .transpose()
 }
 
+/// Cancel the native upload associated with a background progress ID.
 #[tauri::command]
 pub fn cancel_media_upload(progress_id: String) {
     cancel_registered_media_upload(&progress_id);
diff --git a/desktop/src-tauri/src/commands/media_transcode.rs b/desktop/src-tauri/src/commands/media_transcode.rs
index b1db4e0d39..7e3305e545 100644
--- a/desktop/src-tauri/src/commands/media_transcode.rs
+++ b/desktop/src-tauri/src/commands/media_transcode.rs
@@ -252,7 +252,11 @@ fn transcode_to_mp4_with_cancellation(
             .stderr(std::process::Stdio::piped()),
         FFMPEG_TIMEOUT,
         cancellation,
-    )?;
+    )
+    .map_err(|error| {
+        let _ = std::fs::remove_file(&output);
+        error
+    })?;
 
     if !result.status.success() {
         let _ = std::fs::remove_file(&output);
@@ -315,7 +319,11 @@ fn transcode_heic_to_jpeg(
             .stderr(std::process::Stdio::piped()),
         heic_timeout,
         cancellation,
-    )?;
+    )
+    .map_err(|error| {
+        let _ = std::fs::remove_file(&output);
+        error
+    })?;
 
     if !result.status.success() {
         let _ = std::fs::remove_file(&output);
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index 207e765d4b..f17d9cbc5d 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -53,6 +53,7 @@ export type PreparedBackgroundMediaUpload = {
 };
 
 const tasks = new Map<number, BackgroundUploadTask>();
+const queuedAttachmentsByDraftKey = new Map<string, QueuedMediaAttachment[]>();
 const listeners = new Set<() => void>();
 let nextTaskId = 0;
 let snapshot: BackgroundUploadSnapshot = {
@@ -307,6 +308,27 @@ export function resetBackgroundMediaUploads(): void {
   for (const task of [...tasks.values()]) {
     cancelTask(task, { force: true, notify: false });
   }
+  queuedAttachmentsByDraftKey.clear();
+}
+
+/**
+ * Retain local files that cannot be serialized with a draft while a deferred
+ * upload recovers after the user has left its channel.
+ */
+export function saveQueuedAttachmentsForDraft(
+  draftKey: string,
+  attachments: QueuedMediaAttachment[],
+): void {
+  queuedAttachmentsByDraftKey.set(draftKey, attachments);
+}
+
+/** Return and remove the local files retained for a recovered draft. */
+export function takeQueuedAttachmentsForDraft(
+  draftKey: string,
+): QueuedMediaAttachment[] {
+  const attachments = queuedAttachmentsByDraftKey.get(draftKey) ?? [];
+  queuedAttachmentsByDraftKey.delete(draftKey);
+  return attachments;
 }
 
 function subscribe(listener: () => void): () => void {
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 0b8522004c..5217872633 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -19,6 +19,7 @@ import { useAttachmentEditing } from "@/features/messages/lib/useAttachmentEditi
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import {
   cancelBackgroundMediaUploads,
+  takeQueuedAttachmentsForDraft,
   useBackgroundMediaUpload,
 } from "@/features/messages/lib/backgroundMediaUploadStore";
 import { useMentions } from "@/features/messages/lib/useMentions";
@@ -163,6 +164,8 @@ function MessageComposerImpl({
     livePendingImeta: media.pendingImeta,
     setPendingImeta: media.setPendingImeta,
     clearQueuedAttachments: media.clearQueuedAttachments,
+    restoreQueuedAttachments: media.restoreQueuedAttachments,
+    takeQueuedAttachmentsForDraft,
     setContent: (content) => {
       setComposerContent(content);
       richText.setContent(content);
@@ -478,7 +481,6 @@ function MessageComposerImpl({
       richText.focus();
       return;
     }
-
     // Insert @ at cursor
     const previousChar = text.slice(0, cursor).slice(-1);
     const prefix =
@@ -495,11 +497,9 @@ function MessageComposerImpl({
     richText.focus,
     mentions.updateMentionQuery,
   ]);
-
   // ── Submit message ──────────────────────────────────────────────────
   const submitMessage = React.useCallback(async () => {
     const trimmed = syncComposerContentFromEditor().trim();
-
     // Edit mode
     if (editTargetRef.current && onEditSaveRef.current) {
       if (isEditSubmissionLocked) return;
diff --git a/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts b/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
index 442aea4da4..a42fcdc887 100644
--- a/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
+++ b/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import type { ImetaMedia } from "@/features/messages/lib/imetaMediaMarkdown";
+import type { QueuedMediaAttachment } from "@/features/messages/lib/backgroundMediaUploadStore";
 import type {
   DraftMentionRef,
   DraftState,
@@ -30,6 +31,10 @@ type UseDraftPersistLifecycleParams = {
   setPendingImeta: (imeta: ImetaMedia[]) => void;
   /** Local files cannot be persisted, so clear them at a draft-key boundary. */
   clearQueuedAttachments?: () => void;
+  /** Restore local files retained while a deferred upload was off-channel. */
+  restoreQueuedAttachments?: (attachments: QueuedMediaAttachment[]) => void;
+  /** Read and remove local files retained for a recovered draft. */
+  takeQueuedAttachmentsForDraft?: (draftKey: string) => QueuedMediaAttachment[];
   /** Set the rich-text editor content from a draft string. */
   setContent: (content: string) => void;
   /** Clear the rich-text editor content (no-draft path). */
@@ -83,6 +88,8 @@ export function useDraftPersistLifecycle({
   livePendingImeta,
   setPendingImeta,
   clearQueuedAttachments,
+  restoreQueuedAttachments,
+  takeQueuedAttachmentsForDraft,
   setContent,
   clearContent,
   setSpoileredAttachmentUrls,
@@ -90,6 +97,12 @@ export function useDraftPersistLifecycle({
   syncComposerContentFromEditor,
 }: UseDraftPersistLifecycleParams): void {
   const pendingImetaForPersistRef = React.useRef<ImetaMedia[]>([]);
+  const restoredQueuedAttachmentsRef = React.useRef<QueuedMediaAttachment[]>(
+    [],
+  );
+  const restoredQueuedAttachmentsDraftKeyRef = React.useRef<string | null>(
+    null,
+  );
   // Render-time update: keep the ref in sync with committed state so the
   // cleanup always reads the latest value during normal mounted operation.
   pendingImetaForPersistRef.current = livePendingImeta;
@@ -105,6 +118,13 @@ export function useDraftPersistLifecycle({
     // Files cannot be serialized into the draft store. Dropping the in-memory
     // queue here prevents it from being sent in the next channel or thread.
     clearQueuedAttachments?.();
+    if (effectiveDraftKey !== restoredQueuedAttachmentsDraftKeyRef.current) {
+      restoredQueuedAttachmentsDraftKeyRef.current = effectiveDraftKey ?? null;
+      restoredQueuedAttachmentsRef.current = effectiveDraftKey
+        ? (takeQueuedAttachmentsForDraft?.(effectiveDraftKey) ?? [])
+        : [];
+    }
+    restoreQueuedAttachments?.(restoredQueuedAttachmentsRef.current);
     const saved = effectiveDraftKey ? loadDraft(effectiveDraftKey) : undefined;
     if (saved) {
       setContent(saved.content);
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index 5e1ad5b31a..fa5d89abf7 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -15,6 +15,7 @@ import { useAddChannelMembersMutation } from "@/features/channels/hooks";
 import { filterEffectiveExplicitAgentPubkeys } from "@/features/messages/lib/effectiveExplicitAgentPubkeys";
 import {
   prepareBackgroundMediaUpload,
+  saveQueuedAttachmentsForDraft,
   type QueuedMediaAttachment,
 } from "@/features/messages/lib/backgroundMediaUploadStore";
 import type { UseChannelLinksResult } from "@/features/messages/lib/useChannelLinks";
@@ -518,13 +519,22 @@ export function useMentionSendFlow({
         };
         const restoreComposerAfterFailure = () => {
           persistCanceledDraft();
-          if (
-            !isMountedRef.current ||
-            (draft.capturedChannelId !== channelIdRef.current &&
-              channelIdRef.current !== null) ||
-            contentRef.current.trim().length > 0 ||
-            hasUnsavedMedia()
-          ) {
+          const canRestoreCurrentComposer =
+            isMountedRef.current &&
+            (draft.capturedChannelId === channelIdRef.current ||
+              channelIdRef.current === null) &&
+            contentRef.current.trim().length === 0 &&
+            !hasUnsavedMedia();
+          const isOffChannel =
+            draft.capturedChannelId !== channelIdRef.current &&
+            channelIdRef.current !== null;
+          if (isOffChannel && draft.sentDraftKey) {
+            saveQueuedAttachmentsForDraft(
+              draft.sentDraftKey,
+              draft.queuedAttachments,
+            );
+          }
+          if (!canRestoreCurrentComposer) {
             return;
           }
           setContent(draft.savedContent);
@@ -586,7 +596,6 @@ export function useMentionSendFlow({
             );
           }
         };
-
         if (preparedUpload) {
           uploadStarted = preparedUpload.start({
             onComplete: async (uploaded, signal) => {

From 7143d97c66e619bdeb376f6d8969062907d7acff Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 21:40:14 +0100
Subject: [PATCH 17/21] Clean up canceled transcodes

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src-tauri/src/commands/media_transcode.rs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/desktop/src-tauri/src/commands/media_transcode.rs b/desktop/src-tauri/src/commands/media_transcode.rs
index 7e3305e545..3fb7eda5f0 100644
--- a/desktop/src-tauri/src/commands/media_transcode.rs
+++ b/desktop/src-tauri/src/commands/media_transcode.rs
@@ -253,9 +253,8 @@ fn transcode_to_mp4_with_cancellation(
         FFMPEG_TIMEOUT,
         cancellation,
     )
-    .map_err(|error| {
+    .inspect_err(|_| {
         let _ = std::fs::remove_file(&output);
-        error
     })?;
 
     if !result.status.success() {
@@ -320,9 +319,8 @@ fn transcode_heic_to_jpeg(
         heic_timeout,
         cancellation,
     )
-    .map_err(|error| {
+    .inspect_err(|_| {
         let _ = std::fs::remove_file(&output);
-        error
     })?;
 
     if !result.status.success() {

From 0d667a5720df60da41ad6eeabe09016d35088519 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 22:13:24 +0100
Subject: [PATCH 18/21] Preserve deferred send recovery context

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../channels/useChannelPaneHandlers.ts        | 11 +--
 .../features/messages/ui/MessageComposer.tsx  |  4 +-
 .../messages/ui/useMentionSendFlow.helpers.ts | 40 +++++++++
 .../messages/ui/useMentionSendFlow.ts         | 83 ++++++++-----------
 4 files changed, 83 insertions(+), 55 deletions(-)

diff --git a/desktop/src/features/channels/useChannelPaneHandlers.ts b/desktop/src/features/channels/useChannelPaneHandlers.ts
index 71ad1a1d8a..7e78d9601f 100644
--- a/desktop/src/features/channels/useChannelPaneHandlers.ts
+++ b/desktop/src/features/channels/useChannelPaneHandlers.ts
@@ -79,9 +79,6 @@ export function useChannelPaneHandlers({
   const deleteMutateRef = React.useRef(deleteMessageMutation.mutateAsync);
   deleteMutateRef.current = deleteMessageMutation.mutateAsync;
 
-  const editMutateRef = React.useRef(editMessageMutation.mutateAsync);
-  editMutateRef.current = editMessageMutation.mutateAsync;
-
   const toggleMutateRef = React.useRef(toggleReactionMutation.mutateAsync);
   toggleMutateRef.current = toggleReactionMutation.mutateAsync;
 
@@ -176,7 +173,7 @@ export function useChannelPaneHandlers({
         return;
       }
 
-      await editMutateRef.current({
+      await editMessageMutation.mutateAsync({
         eventId,
         content,
         mediaTags,
@@ -184,7 +181,11 @@ export function useChannelPaneHandlers({
       });
       setEditTargetId((current) => (current === eventId ? null : current));
     },
-    [onRequestEmptyEditDelete, setEditTargetId],
+    [
+      editMessageMutation.mutateAsync,
+      onRequestEmptyEditDelete,
+      setEditTargetId,
+    ],
   );
 
   const handleOpenThread = React.useCallback(
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 5217872633..3988f01a4d 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -562,7 +562,6 @@ function MessageComposerImpl({
     ) {
       return;
     }
-
     onPreparingMentionSendChange?.(true);
     persistentMentionHydration.beginSubmit();
     try {
@@ -575,6 +574,7 @@ function MessageComposerImpl({
           effectiveDraftKeyRef.current,
           drafts.loadDraft,
         ),
+        recoveryDraftKey: effectiveDraftKey,
         spoileredAttachmentUrls,
         trimmed,
         audienceGeneration: persistentAudience.generation,
@@ -611,9 +611,9 @@ function MessageComposerImpl({
     persistentAudience.generation,
     persistentAudience.revision,
     isEditSubmissionLocked,
+    effectiveDraftKey,
   ]);
   submitMessageRef.current = submitMessage;
-
   // ── Auto-submit on draft send ────────────────────────────────────────────
   // When `autoSubmitDraftKey` is set (the user clicked "Send message" in the
   // Drafts panel and confirmed), fire `submitMessage` once after mount so the
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts b/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts
index 8c63b45dc8..76503bfab1 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.helpers.ts
@@ -1,9 +1,49 @@
 import type { ManagedAgent } from "@/shared/api/types";
+import type { ImetaMedia } from "@/features/messages/lib/imetaMediaMarkdown";
+import type { QueuedMediaAttachment } from "@/features/messages/lib/backgroundMediaUploadStore";
+import type { DraftMentionRef } from "@/features/messages/lib/useDrafts";
 import { normalizePubkey } from "@/shared/lib/pubkey";
 import { MENTION_REFERENCE_TAG } from "@/shared/lib/resolveMentionNames";
 
 export { MENTION_REFERENCE_TAG };
 
+export type PendingNonMemberMentionSend = {
+  capturedChannelId: string | null;
+  capturedThreadContext: {
+    parentEventId: string | null;
+    threadHeadId: string | null;
+  } | null;
+  trimmed: string;
+  mentionPubkeys: string[];
+  nonMemberPubkeys: string[];
+  outgoingTags?: string[][];
+  preparedManagedAgents?: ManagedAgent[];
+  readyAgentPubkeys?: string[];
+  savedContent: string;
+  savedImeta: ImetaMedia[];
+  queuedAttachments: QueuedMediaAttachment[];
+  savedSpoileredAttachmentUrls: Set<string>;
+  sentDraftKey: string | null | undefined;
+  recoveryDraftKey: string | null | undefined;
+  savedMentionRefs: DraftMentionRef[];
+  audienceGeneration: number;
+  audienceRevision: number | null;
+  explicitAgentPubkeys: string[];
+};
+
+export type SendMessageWithMentionFlowInput = {
+  capturedChannelId: string | null;
+  capturedThreadContext?: PendingNonMemberMentionSend["capturedThreadContext"];
+  pendingImeta: ImetaMedia[];
+  queuedAttachments?: QueuedMediaAttachment[];
+  sentDraftKey: string | null | undefined;
+  recoveryDraftKey: string | null | undefined;
+  spoileredAttachmentUrls?: ReadonlySet<string>;
+  trimmed: string;
+  audienceGeneration?: number;
+  audienceRevision?: number | null;
+};
+
 export function mergeOutgoingTagsWithReferenceMentions(
   outgoingTags: string[][] | undefined,
   pubkeys: Iterable<string>,
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index fa5d89abf7..c90206b24d 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -38,49 +38,11 @@ import {
   isProviderBackedAgent,
   MENTION_REFERENCE_TAG,
   mergeOutgoingTagsWithReferenceMentions,
+  type PendingNonMemberMentionSend,
+  type SendMessageWithMentionFlowInput,
   uniqueNormalizedPubkeys,
 } from "./useMentionSendFlow.helpers";
 
-type PendingNonMemberMentionSend = {
-  capturedChannelId: string | null;
-  /** Thread context captured at submit time — null for main-timeline sends. */
-  capturedThreadContext: {
-    parentEventId: string | null;
-    threadHeadId: string | null;
-  } | null;
-  trimmed: string;
-  mentionPubkeys: string[];
-  nonMemberPubkeys: string[];
-  outgoingTags?: string[][];
-  preparedManagedAgents?: ManagedAgent[];
-  readyAgentPubkeys?: string[];
-  savedContent: string;
-  savedImeta: ImetaMedia[];
-  queuedAttachments: QueuedMediaAttachment[];
-  savedSpoileredAttachmentUrls: Set<string>;
-  sentDraftKey: string | null | undefined;
-  audienceGeneration: number;
-  audienceRevision: number | null;
-  /** Agent mentions explicitly authored in this draft (never inferred). */
-  explicitAgentPubkeys: string[];
-};
-
-type SendMessageWithMentionFlowInput = {
-  capturedChannelId: string | null;
-  /** Thread context captured at submit time — null for main-timeline sends. */
-  capturedThreadContext?: {
-    parentEventId: string | null;
-    threadHeadId: string | null;
-  } | null;
-  pendingImeta: ImetaMedia[];
-  queuedAttachments?: QueuedMediaAttachment[];
-  sentDraftKey: string | null | undefined;
-  spoileredAttachmentUrls?: ReadonlySet<string>;
-  trimmed: string;
-  audienceGeneration?: number;
-  audienceRevision?: number | null;
-};
-
 type UseMentionSendFlowOptions = {
   channelId: string | null;
   channelLinks: Pick<UseChannelLinksResult, "clearChannels">;
@@ -428,6 +390,21 @@ export function useMentionSendFlow({
         draft.queuedAttachments.length > 0
           ? prepareBackgroundMediaUpload(draft.queuedAttachments)
           : null;
+      const persistPreflightDraft = () => {
+        if (!draft.recoveryDraftKey) return;
+        drafts.persistDraft(
+          draft.recoveryDraftKey,
+          draft.savedContent,
+          draft.capturedChannelId ?? draft.recoveryDraftKey,
+          draft.savedImeta,
+          [...draft.savedSpoileredAttachmentUrls],
+          draft.savedMentionRefs,
+        );
+        saveQueuedAttachmentsForDraft(
+          draft.recoveryDraftKey,
+          draft.queuedAttachments,
+        );
+      };
       let uploadStarted = false;
       try {
         const readyAgentPubkeys = new Set(
@@ -435,6 +412,7 @@ export function useMentionSendFlow({
         );
         const managedAgentsByPubkey = await getManagedAgentsByPubkey();
         if (!isMountedRef.current) {
+          persistPreflightDraft();
           return;
         }
         for (const agent of draft.preparedManagedAgents ?? []) {
@@ -460,6 +438,7 @@ export function useMentionSendFlow({
             return;
           }
           if (!isMountedRef.current) {
+            persistPreflightDraft();
             return;
           }
         }
@@ -473,6 +452,7 @@ export function useMentionSendFlow({
           [...managedAgentsByPubkey.values()],
         );
         if (!isMountedRef.current) {
+          persistPreflightDraft();
           return;
         }
         if (agentReadiness.errors.length > 0) {
@@ -495,13 +475,13 @@ export function useMentionSendFlow({
 
         const send = onSendRef.current;
         const persistCanceledDraft = () => {
-          if (!draft.sentDraftKey) return;
-          const existing = drafts.loadDraft(draft.sentDraftKey);
+          if (!draft.recoveryDraftKey) return;
+          const existing = drafts.loadDraft(draft.recoveryDraftKey);
           if (
             existing &&
             (existing.content !== draft.savedContent ||
               existing.channelId !==
-                (draft.capturedChannelId ?? draft.sentDraftKey) ||
+                (draft.capturedChannelId ?? draft.recoveryDraftKey) ||
               JSON.stringify(existing.pendingImeta) !==
                 JSON.stringify(draft.savedImeta) ||
               JSON.stringify(existing.spoileredAttachmentUrls) !==
@@ -510,11 +490,12 @@ export function useMentionSendFlow({
             return;
           }
           drafts.persistDraft(
-            draft.sentDraftKey,
+            draft.recoveryDraftKey,
             draft.savedContent,
-            draft.capturedChannelId ?? draft.sentDraftKey,
+            draft.capturedChannelId ?? draft.recoveryDraftKey,
             draft.savedImeta,
             [...draft.savedSpoileredAttachmentUrls],
+            draft.savedMentionRefs,
           );
         };
         const restoreComposerAfterFailure = () => {
@@ -528,9 +509,9 @@ export function useMentionSendFlow({
           const isOffChannel =
             draft.capturedChannelId !== channelIdRef.current &&
             channelIdRef.current !== null;
-          if (isOffChannel && draft.sentDraftKey) {
+          if (isOffChannel && draft.recoveryDraftKey) {
             saveQueuedAttachmentsForDraft(
-              draft.sentDraftKey,
+              draft.recoveryDraftKey,
               draft.queuedAttachments,
             );
           }
@@ -542,6 +523,7 @@ export function useMentionSendFlow({
           richText.setContent(draft.savedContent);
           setPendingImeta(draft.savedImeta);
           restoreQueuedAttachments(draft.queuedAttachments);
+          mentions.restoreDraftMentionRefs(draft.savedMentionRefs);
           setSpoileredAttachmentUrls?.(
             new Set(draft.savedSpoileredAttachmentUrls),
           );
@@ -590,7 +572,7 @@ export function useMentionSendFlow({
             drafts.markDraftSent(
               draft.sentDraftKey,
               draft.savedContent,
-              sendChannelId ?? draft.sentDraftKey,
+              draft.capturedChannelId ?? draft.sentDraftKey,
               draft.savedImeta,
               [...draft.savedSpoileredAttachmentUrls],
             );
@@ -664,6 +646,7 @@ export function useMentionSendFlow({
       restoreQueuedAttachments,
       setSpoileredAttachmentUrls,
       hasUnsavedMedia,
+      mentions.restoreDraftMentionRefs,
     ],
   );
 
@@ -731,6 +714,7 @@ export function useMentionSendFlow({
       pendingImeta,
       queuedAttachments = [],
       sentDraftKey,
+      recoveryDraftKey,
       spoileredAttachmentUrls = new Set(),
       trimmed,
       audienceGeneration = 0,
@@ -828,6 +812,8 @@ export function useMentionSendFlow({
           queuedAttachments: [...queuedAttachments],
           savedSpoileredAttachmentUrls: new Set(spoileredAttachmentUrls),
           sentDraftKey,
+          recoveryDraftKey,
+          savedMentionRefs: mentions.getDraftMentionRefs(trimmed),
           audienceGeneration,
           audienceRevision,
           explicitAgentPubkeys,
@@ -856,6 +842,7 @@ export function useMentionSendFlow({
       mentions.extractMentionPubkeys,
       mentions.isAgentPubkey,
       mentions.isManagedAgentPubkey,
+      mentions.getDraftMentionRefs,
       onPrepareSendChannel,
     ],
   );

From 279294ee24203c7c63aceff018388becf30cdbf0 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Mon, 3 Aug 2026 22:42:10 +0100
Subject: [PATCH 19/21] Recover failed composer mention state

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src/features/messages/ui/MessageComposer.tsx |  5 ++++-
 .../src/features/messages/ui/submitMessageEdit.ts    | 12 +++++++++++-
 .../src/features/messages/ui/useMentionSendFlow.ts   |  5 +----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 3988f01a4d..2e381a1f97 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -512,6 +512,7 @@ function MessageComposerImpl({
         customEmoji,
         originalContent: editTargetRef.current.body,
         ownerPubkey: ownerPubkeyRef.current,
+        getMentionRefs: mentions.getDraftMentionRefs,
         pendingImeta: media.pendingImetaRef.current,
         queuedAttachments: media.queuedAttachmentsRef.current,
         spoileredAttachmentUrls,
@@ -535,6 +536,7 @@ function MessageComposerImpl({
           media.restoreQueuedAttachments(draft.queuedAttachments);
           setSpoileredAttachmentUrls(draft.spoileredAttachmentUrls);
         },
+        restoreMentionRefs: mentions.restoreDraftMentionRefs,
         shouldRestoreComposer: () => canRestoreEditDraftRef.current,
         setDeferredUploadPending: setDeferredEditPending,
         setUploadError: (message) =>
@@ -612,6 +614,8 @@ function MessageComposerImpl({
     persistentAudience.revision,
     isEditSubmissionLocked,
     effectiveDraftKey,
+    mentions.getDraftMentionRefs,
+    mentions.restoreDraftMentionRefs,
   ]);
   submitMessageRef.current = submitMessage;
   // ── Auto-submit on draft send ────────────────────────────────────────────
@@ -650,7 +654,6 @@ function MessageComposerImpl({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // mount-only
-
   const handleSubmit = React.useCallback(
     (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
diff --git a/desktop/src/features/messages/ui/submitMessageEdit.ts b/desktop/src/features/messages/ui/submitMessageEdit.ts
index ce12de7210..e7fc584623 100644
--- a/desktop/src/features/messages/ui/submitMessageEdit.ts
+++ b/desktop/src/features/messages/ui/submitMessageEdit.ts
@@ -1,5 +1,6 @@
 import type { QueuedMediaAttachment } from "@/features/messages/lib/backgroundMediaUploadStore";
 import { enqueueBackgroundMediaUpload } from "@/features/messages/lib/backgroundMediaUploadStore";
+import type { DraftMentionRef } from "@/features/messages/lib/useDrafts";
 import {
   buildOutgoingMessage,
   type ImetaMedia,
@@ -11,6 +12,7 @@ import type { CustomEmoji } from "@/shared/lib/remarkCustomEmoji";
 
 type EditDraft = {
   content: string;
+  mentionRefs: DraftMentionRef[];
   pendingImeta: ImetaMedia[];
   queuedAttachments: QueuedMediaAttachment[];
   spoileredAttachmentUrls: Set<string>;
@@ -20,10 +22,12 @@ type SubmitMessageEditOptions = EditDraft & {
   clearComposer: () => void;
   customEmoji: ReadonlyArray<CustomEmoji>;
   extractMentionPubkeys: (content: string) => string[];
+  getMentionRefs: (content: string) => DraftMentionRef[];
   editTargetId: string;
   originalContent: string;
   ownerPubkey: string | null;
   restoreComposer: (draft: EditDraft) => void;
+  restoreMentionRefs: (refs: DraftMentionRef[]) => void;
   shouldRestoreComposer: () => boolean;
   setDeferredUploadPending: (isPending: boolean) => void;
   save: (
@@ -42,11 +46,13 @@ export async function submitMessageEdit({
   customEmoji,
   editTargetId,
   extractMentionPubkeys,
+  getMentionRefs,
   originalContent,
   ownerPubkey,
   pendingImeta,
   queuedAttachments,
   restoreComposer,
+  restoreMentionRefs,
   setDeferredUploadPending,
   shouldRestoreComposer,
   save,
@@ -55,12 +61,16 @@ export async function submitMessageEdit({
 }: SubmitMessageEditOptions): Promise<void> {
   const draft: EditDraft = {
     content,
+    mentionRefs: getMentionRefs(content),
     pendingImeta: [...pendingImeta],
     queuedAttachments: [...queuedAttachments],
     spoileredAttachmentUrls: new Set(spoileredAttachmentUrls),
   };
   const restoreDraft = () => {
-    if (shouldRestoreComposer()) restoreComposer(draft);
+    if (shouldRestoreComposer()) {
+      restoreComposer(draft);
+      restoreMentionRefs(draft.mentionRefs);
+    }
   };
   const addedMentionPubkeys = diffAddedMentionPubkeys(
     extractMentionPubkeys(originalContent),
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index c90206b24d..77208d5cf5 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -506,10 +506,7 @@ export function useMentionSendFlow({
               channelIdRef.current === null) &&
             contentRef.current.trim().length === 0 &&
             !hasUnsavedMedia();
-          const isOffChannel =
-            draft.capturedChannelId !== channelIdRef.current &&
-            channelIdRef.current !== null;
-          if (isOffChannel && draft.recoveryDraftKey) {
+          if (!canRestoreCurrentComposer && draft.recoveryDraftKey) {
             saveQueuedAttachmentsForDraft(
               draft.recoveryDraftKey,
               draft.queuedAttachments,

From ea1ccc269baa56ae1dd85aa9be681d17723e6888 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Mon, 3 Aug 2026 18:30:01 -0600
Subject: [PATCH 20/21] fix(desktop): retain deferred draft attachments

Keep locally queued files scoped to their outgoing draft key while switching
channels or threads, then restore them when the draft becomes active again.
Also remove the redundant mentionRefs requirement from message-edit submission.

Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
---
 .../src/features/channels/ui/ChannelPane.tsx  |  4 --
 .../features/messages/ui/MessageComposer.tsx  |  9 +--
 .../MessageComposerDraftImagePersist.test.mjs | 67 +++++++++++++++++++
 .../features/messages/ui/submitMessageEdit.ts |  2 +-
 .../messages/ui/useDraftPersistSnapshot.ts    | 17 ++++-
 .../messages/ui/useMentionSendFlow.ts         |  2 -
 6 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 9f65674dfe..9e5152edfe 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -64,12 +64,10 @@ import { KIND_SYSTEM_MESSAGE } from "@/shared/constants/kinds";
 import { useIsThreadPanelOverlay } from "@/shared/hooks/use-mobile";
 import { channelChrome } from "@/shared/layout/chromeLayout";
 import { cn } from "@/shared/lib/cn";
-
 const HUDDLE_TRANSCRIPT_ROOT_STYLE = {
   "--buzz-channel-content-top-padding": "0rem",
   "--channel-top-chrome-height": "0.25rem",
 } as React.CSSProperties;
-
 export const ChannelPane = React.memo(function ChannelPane({
   activeChannel,
   agentPubkeys,
@@ -253,7 +251,6 @@ export const ChannelPane = React.memo(function ChannelPane({
     clearWelcomeComposerDismissTimer,
     isActiveWelcomeChannel,
   ]);
-
   const isEditInThread =
     editTarget != null &&
     threadHeadMessage != null &&
@@ -281,7 +278,6 @@ export const ChannelPane = React.memo(function ChannelPane({
     },
     [onEdit, currentPubkey],
   );
-
   const handleEditLastOwnMainMessage = React.useCallback((): boolean => {
     const target = findLastOwnEditable(messages);
     if (!target || !onEdit) return false;
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 2e381a1f97..6f79daa606 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -19,6 +19,7 @@ import { useAttachmentEditing } from "@/features/messages/lib/useAttachmentEditi
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import {
   cancelBackgroundMediaUploads,
+  saveQueuedAttachmentsForDraft,
   takeQueuedAttachmentsForDraft,
   useBackgroundMediaUpload,
 } from "@/features/messages/lib/backgroundMediaUploadStore";
@@ -163,6 +164,8 @@ function MessageComposerImpl({
     restoreMentionRefs: mentions.restoreDraftMentionRefs,
     livePendingImeta: media.pendingImeta,
     setPendingImeta: media.setPendingImeta,
+    getQueuedAttachments: () => media.queuedAttachmentsRef.current,
+    saveQueuedAttachmentsForDraft,
     clearQueuedAttachments: media.clearQueuedAttachments,
     restoreQueuedAttachments: media.restoreQueuedAttachments,
     takeQueuedAttachmentsForDraft,
@@ -258,7 +261,6 @@ function MessageComposerImpl({
       channelLinks.updateChannelQuery(text, cursor);
       emojiAutocomplete.updateEmojiQuery(text, cursor);
       persistentMentionHydrationRef.current?.reconcile(text);
-
       if (text.trim().length > 0) {
         notifyTyping();
       }
@@ -631,7 +633,6 @@ function MessageComposerImpl({
   // runs, preventing re-fire on re-render or back-navigation.
   const onAutoSubmitCompleteRef = React.useRef(onAutoSubmitComplete);
   onAutoSubmitCompleteRef.current = onAutoSubmitComplete;
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally fires once on mount only
   React.useEffect(() => {
     if (
@@ -661,7 +662,6 @@ function MessageComposerImpl({
     },
     [submitMessage],
   );
-
   // ── Keyboard handling ───────────────────────────────────────────────
   // Tiptap handles formatting shortcuts (⌘B, ⌘I, etc.) natively.
   // Plain Enter → submit is now handled inside the Tiptap `submitOnEnter`
@@ -677,7 +677,6 @@ function MessageComposerImpl({
         }
         return;
       }
-
       const channelResult = channelLinks.handleChannelKeyDown(event);
       if (channelResult.handled) {
         if (channelResult.suggestion) {
@@ -685,7 +684,6 @@ function MessageComposerImpl({
         }
         return;
       }
-
       const { handled, suggestion } = mentions.handleMentionKeyDown(event);
       if (handled) {
         if (suggestion) {
@@ -693,7 +691,6 @@ function MessageComposerImpl({
         }
         return;
       }
-
       if (event.key === "Tab" && !event.shiftKey && linkEditor.isCardOpen) {
         event.preventDefault();
         if (!linkEditor.focusCardFirstControl()) {
diff --git a/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs b/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs
index f6bfff3841..61ce493ffd 100644
--- a/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs
+++ b/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs
@@ -241,6 +241,10 @@ import {
   loadDraftEntry,
   persistDraftEntry,
 } from "../lib/useDrafts.ts";
+import {
+  saveQueuedAttachmentsForDraft,
+  takeQueuedAttachmentsForDraft,
+} from "../lib/backgroundMediaUploadStore.ts";
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -579,3 +583,66 @@ test("draft_lifecycle_empty_target_clears_stale_mention_refs", async () => {
 
   await handle.unmount();
 });
+
+test("draft_lifecycle_preserves_local_files_across_a_b_a_switch", async () => {
+  setupStore("pubkey-switch-files");
+  const FILE_A = {
+    file: new File(["report"], "report.pdf", { type: "application/pdf" }),
+    id: 7,
+    spoilered: false,
+  };
+  let draftKey = "chan-a";
+  let editorContent = "";
+  let queuedAttachments = [];
+  const spoileredRef = { current: new Set() };
+
+  function HarnessComposer() {
+    useDraftPersistLifecycle({
+      effectiveDraftKey: draftKey,
+      channelId: draftKey,
+      loadDraft: loadDraftEntry,
+      persistDraft: persistDraftEntry,
+      getMentionRefs: () => [],
+      restoreMentionRefs: () => {},
+      livePendingImeta: [],
+      setPendingImeta: () => {},
+      getQueuedAttachments: () => queuedAttachments,
+      saveQueuedAttachmentsForDraft,
+      clearQueuedAttachments: () => {
+        queuedAttachments = [];
+      },
+      restoreQueuedAttachments: (attachments) => {
+        queuedAttachments = attachments;
+      },
+      takeQueuedAttachmentsForDraft,
+      setContent: (content) => {
+        editorContent = content;
+      },
+      clearContent: () => {
+        editorContent = "";
+      },
+      setSpoileredAttachmentUrls: () => {},
+      spoileredAttachmentUrlsRef: spoileredRef,
+      syncComposerContentFromEditor: () => editorContent,
+    });
+    return null;
+  }
+
+  saveQueuedAttachmentsForDraft("chan-a", [FILE_A]);
+  const handle = await mountStrictMode(HarnessComposer);
+  assert.equal(queuedAttachments[0]?.file.name, "report.pdf");
+
+  draftKey = "chan-b";
+  await handle.rerender();
+  assert.deepEqual(queuedAttachments, [], "B must not inherit A's local files");
+
+  draftKey = "chan-a";
+  await handle.rerender();
+  assert.equal(
+    queuedAttachments[0]?.file.name,
+    "report.pdf",
+    "A's attachment-only draft survives a full A → B → A switch",
+  );
+
+  await handle.unmount();
+});
diff --git a/desktop/src/features/messages/ui/submitMessageEdit.ts b/desktop/src/features/messages/ui/submitMessageEdit.ts
index e7fc584623..8edeea615e 100644
--- a/desktop/src/features/messages/ui/submitMessageEdit.ts
+++ b/desktop/src/features/messages/ui/submitMessageEdit.ts
@@ -18,7 +18,7 @@ type EditDraft = {
   spoileredAttachmentUrls: Set<string>;
 };
 
-type SubmitMessageEditOptions = EditDraft & {
+type SubmitMessageEditOptions = Omit<EditDraft, "mentionRefs"> & {
   clearComposer: () => void;
   customEmoji: ReadonlyArray<CustomEmoji>;
   extractMentionPubkeys: (content: string) => string[];
diff --git a/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts b/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
index a42fcdc887..14dae33adb 100644
--- a/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
+++ b/desktop/src/features/messages/ui/useDraftPersistSnapshot.ts
@@ -29,6 +29,13 @@ type UseDraftPersistLifecycleParams = {
   livePendingImeta: ImetaMedia[];
   /** Async setter for pendingImeta — called after the synchronous snapshot. */
   setPendingImeta: (imeta: ImetaMedia[]) => void;
+  /** Snapshot the local files owned by the outgoing draft key. */
+  getQueuedAttachments?: () => QueuedMediaAttachment[];
+  /** Retain local files in memory under their draft key. */
+  saveQueuedAttachmentsForDraft?: (
+    draftKey: string,
+    attachments: QueuedMediaAttachment[],
+  ) => void;
   /** Local files cannot be persisted, so clear them at a draft-key boundary. */
   clearQueuedAttachments?: () => void;
   /** Restore local files retained while a deferred upload was off-channel. */
@@ -87,6 +94,8 @@ export function useDraftPersistLifecycle({
   restoreMentionRefs,
   livePendingImeta,
   setPendingImeta,
+  getQueuedAttachments,
+  saveQueuedAttachmentsForDraft,
   clearQueuedAttachments,
   restoreQueuedAttachments,
   takeQueuedAttachmentsForDraft,
@@ -115,8 +124,8 @@ export function useDraftPersistLifecycle({
     // already reflects the incoming channel, which would corrupt the outgoing
     // draft's channelId metadata.
 
-    // Files cannot be serialized into the draft store. Dropping the in-memory
-    // queue here prevents it from being sent in the next channel or thread.
+    // Files cannot be serialized into localStorage. Replace the outgoing
+    // queue (retained by the cleanup below) with the incoming draft's queue.
     clearQueuedAttachments?.();
     if (effectiveDraftKey !== restoredQueuedAttachmentsDraftKeyRef.current) {
       restoredQueuedAttachmentsDraftKeyRef.current = effectiveDraftKey ?? null;
@@ -147,6 +156,10 @@ export function useDraftPersistLifecycle({
 
     return () => {
       if (effectiveDraftKey) {
+        const queuedAttachments = getQueuedAttachments?.() ?? [];
+        if (queuedAttachments.length > 0) {
+          saveQueuedAttachmentsForDraft?.(effectiveDraftKey, queuedAttachments);
+        }
         const content = syncComposerContentFromEditor();
         persistDraft(
           effectiveDraftKey,
diff --git a/desktop/src/features/messages/ui/useMentionSendFlow.ts b/desktop/src/features/messages/ui/useMentionSendFlow.ts
index 9e7a32a895..6ba9f69050 100644
--- a/desktop/src/features/messages/ui/useMentionSendFlow.ts
+++ b/desktop/src/features/messages/ui/useMentionSendFlow.ts
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { toast } from "sonner";
-
 import {
   type CreateChannelManagedAgentInput,
   useAttachManagedAgentToChannelMutation,
@@ -43,7 +42,6 @@ import {
   type SendMessageWithMentionFlowInput,
   uniqueNormalizedPubkeys,
 } from "./useMentionSendFlow.helpers";
-
 type UseMentionSendFlowOptions = {
   channelId: string | null;
   channelLinks: Pick<UseChannelLinksResult, "clearChannels">;

From 57779f112af3a2402fe66b9a604dc19a5c0cbc49 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Mon, 3 Aug 2026 21:08:34 -0600
Subject: [PATCH 21/21] fix(desktop): discard files with deleted drafts

Add an explicit draft-deletion path that removes retained local attachments
before clearing the persisted draft, preventing deleted files from resurfacing.

Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
---
 desktop/src/features/home/useHomeDrafts.ts       |  4 ++--
 .../messages/lib/backgroundMediaUploadStore.ts   |  5 +++++
 desktop/src/features/messages/lib/useDrafts.ts   |  6 ++++++
 .../ui/MessageComposerDraftImagePersist.test.mjs | 16 ++++++++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/desktop/src/features/home/useHomeDrafts.ts b/desktop/src/features/home/useHomeDrafts.ts
index 8d9accda61..4b4f4afa63 100644
--- a/desktop/src/features/home/useHomeDrafts.ts
+++ b/desktop/src/features/home/useHomeDrafts.ts
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { clearDraftEntry } from "@/features/messages/lib/useDrafts";
+import { deleteDraftEntry } from "@/features/messages/lib/useDrafts";
 import {
   useActiveDraftCount,
   useDraftViewItems,
@@ -62,7 +62,7 @@ export function useHomeDrafts({
 
   const deleteDraft = React.useCallback(
     (draftKey: string) => {
-      clearDraftEntry(draftKey);
+      deleteDraftEntry(draftKey);
       if (selectedKey === draftKey) {
         setSelectedKey(null);
       }
diff --git a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
index f17d9cbc5d..ace711985a 100644
--- a/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
+++ b/desktop/src/features/messages/lib/backgroundMediaUploadStore.ts
@@ -322,6 +322,11 @@ export function saveQueuedAttachmentsForDraft(
   queuedAttachmentsByDraftKey.set(draftKey, attachments);
 }
 
+/** Remove local files retained for a draft without restoring them. */
+export function discardQueuedAttachmentsForDraft(draftKey: string): void {
+  queuedAttachmentsByDraftKey.delete(draftKey);
+}
+
 /** Return and remove the local files retained for a recovered draft. */
 export function takeQueuedAttachmentsForDraft(
   draftKey: string,
diff --git a/desktop/src/features/messages/lib/useDrafts.ts b/desktop/src/features/messages/lib/useDrafts.ts
index 772c7bfbc1..2a78e88132 100644
--- a/desktop/src/features/messages/lib/useDrafts.ts
+++ b/desktop/src/features/messages/lib/useDrafts.ts
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { discardQueuedAttachmentsForDraft } from "@/features/messages/lib/backgroundMediaUploadStore";
 import type { ImetaMedia } from "@/features/messages/lib/imetaMediaMarkdown";
 import { setLocalStorageItemWithRecovery } from "@/shared/lib/localStorageQuota";
 
@@ -296,6 +297,11 @@ export function loadDraftEntry(draftKey: string): DraftState | undefined {
   return readStore().get(draftKey);
 }
 
+export function deleteDraftEntry(draftKey: string): void {
+  discardQueuedAttachmentsForDraft(draftKey);
+  clearDraftEntry(draftKey);
+}
+
 export function clearDraftEntry(draftKey: string): void {
   const map = readStore();
   if (map.has(draftKey)) {
diff --git a/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs b/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs
index 61ce493ffd..46b5d91d5b 100644
--- a/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs
+++ b/desktop/src/features/messages/ui/MessageComposerDraftImagePersist.test.mjs
@@ -237,6 +237,7 @@ import { useDraftPersistLifecycle } from "./useDraftPersistSnapshot.ts";
 // Real storage functions — the test uses them, not a replica.
 import {
   clearAllDrafts,
+  deleteDraftEntry,
   initDraftStore,
   loadDraftEntry,
   persistDraftEntry,
@@ -646,3 +647,18 @@ test("draft_lifecycle_preserves_local_files_across_a_b_a_switch", async () => {
 
   await handle.unmount();
 });
+
+test("discarding_a_draft_drops_its_retained_local_files", () => {
+  const retainedFile = {
+    file: new File(["private"], "private.pdf", {
+      type: "application/pdf",
+    }),
+    id: 8,
+    spoilered: false,
+  };
+
+  saveQueuedAttachmentsForDraft("chan-deleted", [retainedFile]);
+  deleteDraftEntry("chan-deleted");
+
+  assert.deepEqual(takeQueuedAttachmentsForDraft("chan-deleted"), []);
+});