From daad7533ef057d73ff54397c1311f6ff3a2fa163 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 20:38:15 -0700
Subject: [PATCH 1/8] feat(desktop): draw on uploaded images in the composer
 lightbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a freehand annotation mode to composer image attachments: a pencil
button in the attachment lightbox enters canvas mode, saving composites
the strokes into a PNG at natural resolution and re-uploads it as an
in-place replacement, and a revert button restores the pre-edit
original — both without closing the dialog.

- ComposerImageEditor.tsx (new): canvas overlay editor with 6 pen
  colors, 3 stroke widths, undo (button + Cmd+Z), clear, cancel, and
  save. Strokes are stored in natural-image coordinates so the
  on-screen preview matches the exported PNG exactly; export loads the
  image with crossOrigin="anonymous" plus a ?cors=1 cache-buster so
  year-long immutable cache entries from before the CORS fix can't
  poison the CORS check
- useMediaUpload.ts: add uploadEditedAttachment (uploads annotated
  bytes, swaps the descriptor into the same slot, disables send while
  in flight), revertAttachment, and an originalsByUrl map that
  remembers pre-edit originals; chained edits keep the earliest
  original and entries prune automatically when attachments leave the
  composer
- ComposerAttachments.tsx: extract MediaAttachmentItem with
  view/edit modes, pencil + revert + close toolbar in the lightbox,
  and Escape-in-edit-mode exiting canvas mode instead of closing the
  dialog; items are keyed by original URL so the URL swap on
  save/revert doesn't remount (and close) the open dialog
- media_proxy.rs: send Access-Control-Allow-Origin: * on proxied media
  responses — WKWebView omits the Origin header on CORS-mode image
  GETs while still enforcing the response header, so echoing the
  request origin can never work; the origin gate still 403s foreign
  origins first, and now also allows loopback dev origins
  (http://localhost:<port>) since tauri dev serves the webview from a
  per-worktree localhost port, with unit tests for the gate
- useAttachmentEditing.ts (new) + MessageComposer.tsx: wire save/revert
  and migrate spoiler marking to the replacement URL so an edited
  spoilered image stays spoilered; ForumComposerMediaStatus.tsx wires
  the same for forum composers
- composer-image-draw.spec.ts (new, registered in the smoke project):
  covers draw → save → in-place replace, Escape behavior, revert
  without dialog close, and spoiler survival across an edit

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/playwright.config.ts                  |   1 +
 desktop/src-tauri/src/media_proxy.rs          |  69 +++-
 .../forum/ui/ForumComposerMediaStatus.tsx     |  15 +
 .../messages/lib/useAttachmentEditing.ts      |  53 +++
 .../features/messages/lib/useMediaUpload.ts   | 118 ++++++
 .../messages/ui/ComposerAttachments.tsx       | 380 +++++++++++------
 .../messages/ui/ComposerImageEditor.tsx       | 383 ++++++++++++++++++
 .../features/messages/ui/MessageComposer.tsx  |  11 +
 desktop/tests/e2e/composer-image-draw.spec.ts | 179 ++++++++
 9 files changed, 1088 insertions(+), 121 deletions(-)
 create mode 100644 desktop/src/features/messages/lib/useAttachmentEditing.ts
 create mode 100644 desktop/src/features/messages/ui/ComposerImageEditor.tsx
 create mode 100644 desktop/tests/e2e/composer-image-draw.spec.ts

diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 3b5f35d99..1c21176f0 100644
--- a/desktop/playwright.config.ts
+++ b/desktop/playwright.config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
         "**/observer-feed-screenshots.spec.ts",
         "**/file-attachment.spec.ts",
         "**/image-attachment-gallery.spec.ts",
+        "**/composer-image-draw.spec.ts",
         "**/video-attachment.spec.ts",
         "**/spoiler.spec.ts",
         "**/mentions.spec.ts",
diff --git a/desktop/src-tauri/src/media_proxy.rs b/desktop/src-tauri/src/media_proxy.rs
index 10a02d947..e25fc9a19 100644
--- a/desktop/src-tauri/src/media_proxy.rs
+++ b/desktop/src-tauri/src/media_proxy.rs
@@ -25,6 +25,26 @@ struct ProxyState {
     app_handle: tauri::AppHandle,
 }
 
+/// True when `origin` belongs to the Tauri webview itself: the custom-scheme
+/// origins of packaged builds, or a loopback origin used by `tauri dev`
+/// (`devUrl` is `http://localhost:<per-worktree-port>`). Loopback origins
+/// imply code already running on this machine, which could reach the proxy
+/// directly anyway — allowing them adds no new exposure, while remote
+/// websites keep getting 403.
+fn is_webview_origin(origin: &str) -> bool {
+    if origin == "tauri://localhost" || origin == "http://tauri.localhost" {
+        return true;
+    }
+    let Some(rest) = origin
+        .strip_prefix("http://")
+        .or_else(|| origin.strip_prefix("https://"))
+    else {
+        return false;
+    };
+    let host = rest.split(':').next().unwrap_or(rest);
+    host == "localhost" || host == "127.0.0.1"
+}
+
 async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) -> Response {
     // Allow requests with no Origin (e.g. <video> element fetches) or from
     // the Tauri webview origin. Blocks cross-origin JS fetches from other
@@ -34,7 +54,7 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
         .get("origin")
         .and_then(|v| v.to_str().ok())
         .unwrap_or("");
-    if !origin.is_empty() && origin != "tauri://localhost" && origin != "http://tauri.localhost" {
+    if !origin.is_empty() && !is_webview_origin(origin) {
         return (StatusCode::FORBIDDEN, "forbidden: invalid origin").into_response();
     }
 
@@ -95,6 +115,19 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
         }
     }
 
+    // CORS approval for `crossOrigin="anonymous"` media loads (the composer
+    // image editor needs them to keep the canvas un-tainted for `toBlob()`).
+    //
+    // This must be unconditional, not an echo of the request Origin: WKWebView
+    // omits the `Origin` header on CORS-mode image GETs (observed with the dev
+    // webview at `http://localhost:<port>`) while still enforcing this header
+    // on the response — so there is nothing to echo. `*` is valid because
+    // these loads are credential-less, and it grants nothing to foreign pages:
+    // any standards-following browser attaches `Origin` to cross-origin
+    // JS-readable requests, which the gate above rejects with 403 before this
+    // header matters.
+    headers.insert("access-control-allow-origin", HeaderValue::from_static("*"));
+
     // OOM guard for non-range full GETs (same 20 MB cap as the protocol handler).
     if !has_range {
         if let Some(cl) = headers.get("content-length") {
@@ -251,9 +284,13 @@ pub async fn handle_buzz_media(
 
             match resp.bytes().await {
                 Ok(bytes) => {
+                    // CORS approval for `crossOrigin="anonymous"` image loads
+                    // (composer canvas annotation). This custom scheme is only
+                    // reachable from our own webview, so "*" is safe.
                     let mut builder = http::Response::builder()
                         .status(status)
-                        .header("content-type", &content_type);
+                        .header("content-type", &content_type)
+                        .header("access-control-allow-origin", "*");
                     if let Some(ref cr) = content_range {
                         builder = builder.header("content-range", cr);
                     }
@@ -295,3 +332,31 @@ fn error_response(status: u16, msg: &str) -> http::Response<Vec<u8>> {
                 .unwrap()
         })
 }
+
+#[cfg(test)]
+mod tests {
+    use super::is_webview_origin;
+
+    #[test]
+    fn allows_packaged_webview_origins() {
+        assert!(is_webview_origin("tauri://localhost"));
+        assert!(is_webview_origin("http://tauri.localhost"));
+    }
+
+    #[test]
+    fn allows_loopback_dev_origins_on_any_port() {
+        assert!(is_webview_origin("http://localhost:1420"));
+        assert!(is_webview_origin("http://localhost:47177"));
+        assert!(is_webview_origin("http://127.0.0.1:4173"));
+        assert!(is_webview_origin("http://localhost"));
+    }
+
+    #[test]
+    fn rejects_remote_and_lookalike_origins() {
+        assert!(!is_webview_origin("https://evil.example.com"));
+        assert!(!is_webview_origin("http://localhost.evil.com"));
+        assert!(!is_webview_origin("http://127.0.0.1.evil.com"));
+        assert!(!is_webview_origin("file://localhost"));
+        assert!(!is_webview_origin("null"));
+    }
+}
diff --git a/desktop/src/features/forum/ui/ForumComposerMediaStatus.tsx b/desktop/src/features/forum/ui/ForumComposerMediaStatus.tsx
index abdf0f38e..3a245bdfc 100644
--- a/desktop/src/features/forum/ui/ForumComposerMediaStatus.tsx
+++ b/desktop/src/features/forum/ui/ForumComposerMediaStatus.tsx
@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import type { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import { ComposerAttachments } from "@/features/messages/ui/ComposerAttachments";
 
@@ -5,9 +7,12 @@ type ComposerMedia = Pick<
   ReturnType<typeof useMediaUpload>,
   | "isUploading"
   | "cancelUpload"
+  | "originalUrlByUrl"
   | "pendingImeta"
   | "removeAttachment"
+  | "revertAttachment"
   | "setUploadState"
+  | "uploadEditedAttachment"
   | "uploadState"
   | "uploadingCount"
   | "uploadingPreviews"
@@ -20,6 +25,13 @@ type ForumComposerMediaStatusProps = {
 export function ForumComposerMediaStatus({
   media,
 }: ForumComposerMediaStatusProps) {
+  const handleEditSave = React.useCallback(
+    async (url: string, bytes: Uint8Array) => {
+      await media.uploadEditedAttachment(url, bytes);
+    },
+    [media.uploadEditedAttachment],
+  );
+
   return (
     <>
       {media.uploadState.status === "error" ? (
@@ -41,7 +53,10 @@ export function ForumComposerMediaStatus({
             attachments={media.pendingImeta}
             isUploading={media.isUploading}
             onCancelUpload={media.cancelUpload}
+            onEditSave={handleEditSave}
             onRemove={media.removeAttachment}
+            onRevert={media.revertAttachment}
+            originalUrlByUrl={media.originalUrlByUrl}
             uploadingCount={media.uploadingCount}
             uploadingPreviews={media.uploadingPreviews}
           />
diff --git a/desktop/src/features/messages/lib/useAttachmentEditing.ts b/desktop/src/features/messages/lib/useAttachmentEditing.ts
new file mode 100644
index 000000000..084ef39c4
--- /dev/null
+++ b/desktop/src/features/messages/lib/useAttachmentEditing.ts
@@ -0,0 +1,53 @@
+import * as React from "react";
+
+import type { MediaUploadController } from "./useMediaUpload";
+
+type UseAttachmentEditingArgs = {
+  revertAttachment: MediaUploadController["revertAttachment"];
+  /** Spoiler-set updater; membership follows the attachment across URL swaps. */
+  setSpoileredAttachmentUrls: React.Dispatch<React.SetStateAction<Set<string>>>;
+  uploadEditedAttachment: MediaUploadController["uploadEditedAttachment"];
+};
+
+/**
+ * Composer-side glue for the attachment drawing editor: uploads annotated
+ * bytes as a replacement / reverts to the pre-edit original, migrating
+ * spoiler membership from the replaced URL to its replacement so an edited
+ * spoilered image stays spoilered.
+ */
+export function useAttachmentEditing({
+  revertAttachment,
+  setSpoileredAttachmentUrls,
+  uploadEditedAttachment,
+}: UseAttachmentEditingArgs) {
+  const migrateSpoileredUrl = React.useCallback(
+    (fromUrl: string, toUrl: string) => {
+      setSpoileredAttachmentUrls((current) => {
+        if (!current.has(fromUrl)) return current;
+        const next = new Set(current);
+        next.delete(fromUrl);
+        next.add(toUrl);
+        return next;
+      });
+    },
+    [setSpoileredAttachmentUrls],
+  );
+
+  const handleAttachmentEditSave = React.useCallback(
+    async (url: string, bytes: Uint8Array) => {
+      const descriptor = await uploadEditedAttachment(url, bytes);
+      if (descriptor) migrateSpoileredUrl(url, descriptor.url);
+    },
+    [migrateSpoileredUrl, uploadEditedAttachment],
+  );
+
+  const handleAttachmentRevert = React.useCallback(
+    (url: string) => {
+      const original = revertAttachment(url);
+      if (original) migrateSpoileredUrl(url, original.url);
+    },
+    [migrateSpoileredUrl, revertAttachment],
+  );
+
+  return { handleAttachmentEditSave, handleAttachmentRevert };
+}
diff --git a/desktop/src/features/messages/lib/useMediaUpload.ts b/desktop/src/features/messages/lib/useMediaUpload.ts
index 994e0fa0c..06be653e6 100644
--- a/desktop/src/features/messages/lib/useMediaUpload.ts
+++ b/desktop/src/features/messages/lib/useMediaUpload.ts
@@ -205,6 +205,44 @@ export function useMediaUpload() {
   const pendingImetaRef = React.useRef(pendingImeta);
   pendingImetaRef.current = pendingImeta;
 
+  /**
+   * Pre-edit originals of annotated attachments, keyed by the annotated
+   * attachment's URL. Powers "revert to original" in the composer lightbox.
+   * In-memory only — cleared implicitly when the attachment leaves the
+   * composer (send, remove, draft switch).
+   */
+  const [originalsByUrl, setOriginalsByUrl] = React.useState<
+    Map<string, BlobDescriptor>
+  >(() => new Map());
+  const originalsByUrlRef = React.useRef(originalsByUrl);
+  originalsByUrlRef.current = originalsByUrl;
+
+  /** Annotated URL → original URL (derived; handy for stable list keys). */
+  const originalUrlByUrl = React.useMemo(() => {
+    const map = new Map<string, string>();
+    for (const [url, original] of originalsByUrl) map.set(url, original.url);
+    return map;
+  }, [originalsByUrl]);
+
+  // Prune originals whose annotated attachment is no longer pending —
+  // covers remove, cancel, send-clear, and draft restore in one place.
+  React.useEffect(() => {
+    setOriginalsByUrl((prev) => {
+      if (prev.size === 0) return prev;
+      const liveUrls = new Set(pendingImeta.map((d) => d.url));
+      let changed = false;
+      const next = new Map<string, BlobDescriptor>();
+      for (const [url, original] of prev) {
+        if (liveUrls.has(url)) {
+          next.set(url, original);
+        } else {
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [pendingImeta]);
+
   /** Monotonic slot counter — ensures each batch gets unique indices even
    *  before React flushes the state update. */
   const nextSlotRef = React.useRef(0);
@@ -511,6 +549,80 @@ export function useMediaUpload() {
     [isUploadCanceled, onUploaded, onUploadError, reserveUploadingPreview],
   );
 
+  /**
+   * Upload an annotated replacement for an existing image attachment and
+   * swap it into the same slot (attachment order is preserved). The pre-edit
+   * descriptor is remembered in `originalsByUrl` so the edit can be reverted;
+   * chained edits keep the earliest original as the single revert point.
+   *
+   * Returns the new descriptor, or null if `oldUrl` is no longer pending.
+   * Rejects on upload failure (after surfacing the standard error banner) so
+   * callers can keep their editing UI open.
+   */
+  const uploadEditedAttachment = React.useCallback(
+    async (
+      oldUrl: string,
+      bytes: Uint8Array,
+    ): Promise<BlobDescriptor | null> => {
+      const oldDescriptor = pendingImetaRef.current.find(
+        (d) => d.url === oldUrl,
+      );
+      if (!oldDescriptor) return null;
+
+      // The annotated output is always PNG — swap the extension accordingly.
+      const stem = (oldDescriptor.filename ?? "image").replace(/\.[^.]+$/, "");
+      const filename = `${stem}.png`;
+
+      const previewId = reserveUploadingPreview();
+      setUploadingCount((c) => c + 1);
+      try {
+        const descriptor = await uploadMediaBytes(
+          [...bytes],
+          filename,
+          uploadProgressId(previewId),
+        );
+        if (isUploadCanceled(previewId)) return null;
+        finishUpload(previewId);
+        setImetaSlots((prev) =>
+          prev.map((d) => (d?.url === oldUrl ? descriptor : d)),
+        );
+        setOriginalsByUrl((prev) => {
+          const next = new Map(prev);
+          // Re-editing an annotated image keeps the earliest original.
+          const original = prev.get(oldUrl) ?? oldDescriptor;
+          next.delete(oldUrl);
+          next.set(descriptor.url, original);
+          return next;
+        });
+        return descriptor;
+      } catch (err) {
+        onUploadError(err, previewId);
+        throw err;
+      }
+    },
+    [finishUpload, isUploadCanceled, onUploadError, reserveUploadingPreview],
+  );
+
+  /**
+   * Swap an annotated attachment back to its pre-edit original (same slot)
+   * and forget the stored original. Returns the restored descriptor, or null
+   * if the URL has no recorded original.
+   */
+  const revertAttachment = React.useCallback(
+    (url: string): BlobDescriptor | null => {
+      const original = originalsByUrlRef.current.get(url);
+      if (!original) return null;
+      setImetaSlots((prev) => prev.map((d) => (d?.url === url ? original : d)));
+      setOriginalsByUrl((prev) => {
+        const next = new Map(prev);
+        next.delete(url);
+        return next;
+      });
+      return original;
+    },
+    [],
+  );
+
   const removeAttachment = React.useCallback((url: string) => {
     setImetaSlots((prev) => prev.map((d) => (d?.url === url ? null : d)));
   }, []);
@@ -541,11 +653,14 @@ export function useMediaUpload() {
       handlePaste,
       isDragOver,
       isUploading,
+      originalUrlByUrl,
       pendingImeta,
       pendingImetaRef,
       removeAttachment,
+      revertAttachment,
       setPendingImeta,
       setUploadState,
+      uploadEditedAttachment,
       uploadFile,
       uploadingCount,
       uploadingPreviews,
@@ -561,9 +676,12 @@ export function useMediaUpload() {
       handlePaste,
       isDragOver,
       isUploading,
+      originalUrlByUrl,
       pendingImeta,
       removeAttachment,
+      revertAttachment,
       setPendingImeta,
+      uploadEditedAttachment,
       uploadFile,
       uploadingCount,
       uploadingPreviews,
diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index 2ab4ec3c8..d4e6f7fdc 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AnimatePresence, LayoutGroup, motion } from "motion/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { FileText, HatGlasses, Play, X } from "lucide-react";
+import { FileText, HatGlasses, Pencil, Play, Undo2, X } from "lucide-react";
 
 import type { BlobDescriptor } from "@/shared/api/tauri";
 import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
@@ -13,6 +13,7 @@ import { cn } from "@/shared/lib/cn";
 import { MODAL_BACKDROP_BLUR_CLASS } from "@/shared/ui/modalBackdrop";
 import { Progress } from "@/shared/ui/progress";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { ComposerImageEditor } from "./ComposerImageEditor";
 
 /** Dashed-border overlay shown when a file is dragged over the composer form. */
 export function DropZoneOverlay({ className }: { className?: string }) {
@@ -36,7 +37,13 @@ type ComposerAttachmentsProps = {
   onCancelUpload?: (previewId: number) => void;
   uploadingCount?: number;
   uploadingPreviews?: UploadingAttachmentPreview[];
+  /** Upload annotated bytes as a replacement for the attachment at `url`. */
+  onEditSave?: (url: string, bytes: Uint8Array) => Promise<void>;
   onRemove: (url: string) => void;
+  /** Restore the pre-edit original for an annotated attachment. */
+  onRevert?: (url: string) => void;
+  /** Annotated attachment URL → original (pre-edit) URL. */
+  originalUrlByUrl?: ReadonlyMap<string, string>;
   spoileredUrls?: ReadonlySet<string>;
 };
 
@@ -50,6 +57,242 @@ function composerMediaStyle(): React.CSSProperties {
   };
 }
 
+const LIGHTBOX_BUTTON_CLASS =
+  "rounded-full bg-black/50 p-2 text-white/80 transition-colors hover:bg-black/70 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-white/30";
+
+type MediaAttachmentItemProps = {
+  attachment: BlobDescriptor;
+  isSpoilered: boolean;
+  onEditSave?: (url: string, bytes: Uint8Array) => Promise<void>;
+  onRemove: (url: string) => void;
+  onRevert?: (url: string) => void;
+  /** Set when this attachment is an annotated replacement of an original. */
+  originalUrl?: string;
+};
+
+/**
+ * A single image/video attachment thumbnail with its lightbox dialog.
+ * Images support an in-lightbox canvas edit mode (freehand drawing) and,
+ * once annotated, an in-place revert to the original — both keep the
+ * dialog open (the parent keys this item by its original URL so the swap
+ * doesn't remount it).
+ *
+ * Forwards its ref to the root motion.div — required by the parent
+ * `AnimatePresence mode="popLayout"`, which measures exiting children.
+ */
+const MediaAttachmentItem = React.forwardRef<
+  HTMLDivElement,
+  MediaAttachmentItemProps
+>(function MediaAttachmentItem(
+  { attachment, isSpoilered, onEditSave, onRemove, onRevert, originalUrl },
+  ref,
+) {
+  const [open, setOpen] = React.useState(false);
+  const [mode, setMode] = React.useState<"view" | "edit">("view");
+
+  const hash = shortHash(attachment.sha256);
+  const isVideo = attachment.type.startsWith("video/");
+  const thumbUrl = attachment.thumb
+    ? rewriteRelayUrl(attachment.thumb)
+    : rewriteRelayUrl(attachment.url);
+  const videoPosterUrl = attachment.image
+    ? rewriteRelayUrl(attachment.image)
+    : attachment.thumb
+      ? rewriteRelayUrl(attachment.thumb)
+      : undefined;
+
+  const canEdit = !isVideo && onEditSave !== undefined;
+  const canRevert =
+    !isVideo && onRevert !== undefined && originalUrl !== undefined;
+
+  const handleOpenChange = React.useCallback((next: boolean) => {
+    setOpen(next);
+    if (!next) setMode("view");
+  }, []);
+
+  const handleEscapeKeyDown = React.useCallback(
+    (event: KeyboardEvent) => {
+      if (mode === "edit") {
+        // Escape leaves canvas mode but keeps the lightbox open.
+        event.preventDefault();
+        setMode("view");
+      }
+    },
+    [mode],
+  );
+
+  const handleEditorSave = React.useCallback(
+    async (bytes: Uint8Array) => {
+      if (!onEditSave) return;
+      await onEditSave(attachment.url, bytes);
+      setMode("view");
+    },
+    [attachment.url, onEditSave],
+  );
+
+  const handleEditorCancel = React.useCallback(() => setMode("view"), []);
+
+  const handleRevert = React.useCallback(() => {
+    onRevert?.(attachment.url);
+  }, [attachment.url, onRevert]);
+
+  return (
+    <motion.div
+      ref={ref}
+      layout
+      initial={false}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.8 }}
+      transition={{ type: "spring", stiffness: 500, damping: 30 }}
+      className="group relative"
+    >
+      <div
+        className="relative h-[55px] max-w-[55px]"
+        style={composerMediaStyle()}
+      >
+        <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange}>
+          <DialogPrimitive.Trigger asChild>
+            <div className="h-full w-full cursor-pointer overflow-hidden rounded-2xl border border-border/70">
+              {isVideo ? (
+                <div className="relative flex h-full w-full items-center justify-center bg-muted text-white">
+                  {videoPosterUrl ? (
+                    <img
+                      src={videoPosterUrl}
+                      alt={`Video attachment ${hash}`}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="h-full w-full bg-muted/80" />
+                  )}
+                  <div className="absolute inset-0 bg-black/15" />
+                  <div className="absolute flex h-5 w-5 items-center justify-center rounded-full bg-black/55 backdrop-blur-sm">
+                    <Play className="h-4 w-4 fill-white text-white" />
+                  </div>
+                </div>
+              ) : (
+                <img
+                  src={thumbUrl}
+                  alt={`Attachment ${hash}`}
+                  className="h-full w-full object-cover"
+                />
+              )}
+              {isSpoilered ? (
+                <div
+                  className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-background/55 text-foreground/70 backdrop-blur-[1px]"
+                  data-composer-media-spoiler=""
+                >
+                  <HatGlasses className="h-4 w-4" />
+                </div>
+              ) : null}
+            </div>
+          </DialogPrimitive.Trigger>
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Overlay
+              className={cn(
+                "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                MODAL_BACKDROP_BLUR_CLASS,
+              )}
+            />
+            <DialogPrimitive.Content
+              className="fixed inset-0 z-50 flex items-center justify-center p-8"
+              onPointerDownOutside={(e) => e.preventDefault()}
+              onInteractOutside={(e) => e.preventDefault()}
+              onEscapeKeyDown={handleEscapeKeyDown}
+            >
+              <DialogPrimitive.Title className="sr-only">
+                Attachment {hash} preview
+              </DialogPrimitive.Title>
+              <DialogPrimitive.Description className="sr-only">
+                Full-size attachment preview. Press Escape or click outside to
+                close.
+              </DialogPrimitive.Description>
+              {mode === "view" ? (
+                <DialogPrimitive.Close
+                  className="absolute inset-0 cursor-default"
+                  aria-label="Close lightbox"
+                />
+              ) : null}
+              {mode === "edit" && !isVideo ? (
+                <ComposerImageEditor
+                  alt={`Attachment ${hash}`}
+                  src={rewriteRelayUrl(attachment.url)}
+                  onCancel={handleEditorCancel}
+                  onSave={handleEditorSave}
+                />
+              ) : isVideo ? (
+                // biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available
+                <video
+                  src={rewriteRelayUrl(attachment.url)}
+                  controls
+                  className="relative max-h-[90vh] max-w-[90vw] rounded-lg"
+                />
+              ) : (
+                <img
+                  alt={`Attachment ${hash}`}
+                  className="relative max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+                  src={rewriteRelayUrl(attachment.url)}
+                />
+              )}
+              {mode === "view" ? (
+                <div className="absolute right-4 top-4 flex items-center gap-2">
+                  {canRevert ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className={LIGHTBOX_BUTTON_CLASS}
+                          data-testid="composer-attachment-revert"
+                          onClick={handleRevert}
+                        >
+                          <Undo2 className="h-4 w-4" />
+                          <span className="sr-only">Revert to original</span>
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Revert to original</TooltipContent>
+                    </Tooltip>
+                  ) : null}
+                  {canEdit ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className={LIGHTBOX_BUTTON_CLASS}
+                          data-testid="composer-attachment-edit"
+                          onClick={() => setMode("edit")}
+                        >
+                          <Pencil className="h-4 w-4" />
+                          <span className="sr-only">Draw on image</span>
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Draw on image</TooltipContent>
+                    </Tooltip>
+                  ) : null}
+                  <DialogPrimitive.Close className={LIGHTBOX_BUTTON_CLASS}>
+                    <X className="h-4 w-4" />
+                    <span className="sr-only">Close</span>
+                  </DialogPrimitive.Close>
+                </div>
+              ) : null}
+            </DialogPrimitive.Content>
+          </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => onRemove(attachment.url)}
+              className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-foreground text-background group-hover:flex"
+            >
+              <X className="h-2.5 w-2.5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Remove attachment</TooltipContent>
+        </Tooltip>
+      </div>
+    </motion.div>
+  );
+});
+
 /**
  * Thumbnail previews for uploaded attachments in the composer.
  * Each attachment shows as a small image with a remove button and
@@ -61,7 +304,10 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
   uploadingCount = 0,
   uploadingPreviews = [],
   onCancelUpload,
+  onEditSave,
   onRemove,
+  onRevert,
+  originalUrlByUrl,
   spoileredUrls,
 }: ComposerAttachmentsProps) {
   if (attachments.length === 0 && !isUploading) return null;
@@ -86,16 +332,6 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
             const isVideo = attachment.type.startsWith("video/");
             const isImage = attachment.type.startsWith("image/");
             const isFile = !isVideo && !isImage;
-            const isSpoilered = spoileredUrls?.has(attachment.url) ?? false;
-            const thumbUrl = attachment.thumb
-              ? rewriteRelayUrl(attachment.thumb)
-              : rewriteRelayUrl(attachment.url);
-            const videoPosterUrl = attachment.image
-              ? rewriteRelayUrl(attachment.image)
-              : attachment.thumb
-                ? rewriteRelayUrl(attachment.thumb)
-                : undefined;
-            const mediaStyle = composerMediaStyle();
 
             // Generic file: compact chip with a file icon + filename, plus the
             // same remove button. No lightbox (nothing to preview).
@@ -114,7 +350,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
                   transition={{ type: "spring", stiffness: 500, damping: 30 }}
                   className="group relative"
                 >
-                  <div className="flex h-5 max-w-[10rem] items-center gap-1 rounded border border-border/70 bg-muted px-1.5">
+                  <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">
                       {label}
@@ -136,114 +372,20 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
               );
             }
 
+            const originalUrl = originalUrlByUrl?.get(attachment.url);
             return (
-              <motion.div
-                key={attachment.url}
-                layout
-                initial={false}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.8 }}
-                transition={{ type: "spring", stiffness: 500, damping: 30 }}
-                className="group relative"
-              >
-                <div
-                  className="relative h-[55px] max-w-[55px]"
-                  style={mediaStyle}
-                >
-                  <DialogPrimitive.Root>
-                    <DialogPrimitive.Trigger asChild>
-                      <div className="h-full w-full cursor-pointer overflow-hidden rounded-2xl border border-border/70">
-                        {isVideo ? (
-                          <div className="relative flex h-full w-full items-center justify-center bg-muted text-white">
-                            {videoPosterUrl ? (
-                              <img
-                                src={videoPosterUrl}
-                                alt={`Video attachment ${hash}`}
-                                className="h-full w-full object-cover"
-                              />
-                            ) : (
-                              <div className="h-full w-full bg-muted/80" />
-                            )}
-                            <div className="absolute inset-0 bg-black/15" />
-                            <div className="absolute flex h-5 w-5 items-center justify-center rounded-full bg-black/55 backdrop-blur-sm">
-                              <Play className="h-4 w-4 fill-white text-white" />
-                            </div>
-                          </div>
-                        ) : (
-                          <img
-                            src={thumbUrl}
-                            alt={`Attachment ${hash}`}
-                            className="h-full w-full object-cover"
-                          />
-                        )}
-                        {isSpoilered ? (
-                          <div
-                            className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-background/55 text-foreground/70 backdrop-blur-[1px]"
-                            data-composer-media-spoiler=""
-                          >
-                            <HatGlasses className="h-4 w-4" />
-                          </div>
-                        ) : null}
-                      </div>
-                    </DialogPrimitive.Trigger>
-                    <DialogPrimitive.Portal>
-                      <DialogPrimitive.Overlay
-                        className={cn(
-                          "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-                          MODAL_BACKDROP_BLUR_CLASS,
-                        )}
-                      />
-                      <DialogPrimitive.Content
-                        className="fixed inset-0 z-50 flex items-center justify-center p-8"
-                        onPointerDownOutside={(e) => e.preventDefault()}
-                        onInteractOutside={(e) => e.preventDefault()}
-                      >
-                        <DialogPrimitive.Title className="sr-only">
-                          Attachment {hash} preview
-                        </DialogPrimitive.Title>
-                        <DialogPrimitive.Description className="sr-only">
-                          Full-size attachment preview. Press Escape or click
-                          outside to close.
-                        </DialogPrimitive.Description>
-                        <DialogPrimitive.Close
-                          className="absolute inset-0 cursor-default"
-                          aria-label="Close lightbox"
-                        />
-                        {isVideo ? (
-                          // biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available
-                          <video
-                            src={rewriteRelayUrl(attachment.url)}
-                            controls
-                            className="relative max-h-[90vh] max-w-[90vw] rounded-lg"
-                          />
-                        ) : (
-                          <img
-                            alt={`Attachment ${hash}`}
-                            className="relative max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
-                            src={rewriteRelayUrl(attachment.url)}
-                          />
-                        )}
-                        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white/80 transition-colors hover:bg-black/70 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-white/30">
-                          <X className="h-4 w-4" />
-                          <span className="sr-only">Close</span>
-                        </DialogPrimitive.Close>
-                      </DialogPrimitive.Content>
-                    </DialogPrimitive.Portal>
-                  </DialogPrimitive.Root>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        onClick={() => onRemove(attachment.url)}
-                        className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-foreground text-background group-hover:flex"
-                      >
-                        <X className="h-2.5 w-2.5" />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent>Remove attachment</TooltipContent>
-                  </Tooltip>
-                </div>
-              </motion.div>
+              <MediaAttachmentItem
+                attachment={attachment}
+                isSpoilered={spoileredUrls?.has(attachment.url) ?? false}
+                // Annotated attachments keep their original URL as the key so
+                // the in-place edit/revert URL swap doesn't remount the item
+                // (which would close its open lightbox dialog).
+                key={originalUrl ?? attachment.url}
+                onEditSave={onEditSave}
+                onRemove={onRemove}
+                onRevert={onRevert}
+                originalUrl={originalUrl}
+              />
             );
           })}
           {isUploading &&
diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
new file mode 100644
index 000000000..0f173cd80
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -0,0 +1,383 @@
+import * as React from "react";
+import { Loader2, Trash2, Undo2 } from "lucide-react";
+
+import { cn } from "@/shared/lib/cn";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+
+type EditorPoint = { x: number; y: number };
+
+/** A committed pen stroke, in natural-image pixel coordinates. */
+type EditorStroke = {
+  color: string;
+  points: EditorPoint[];
+  /** Line width in natural-image pixels (already scaled from CSS px). */
+  width: number;
+};
+
+const PEN_COLORS = [
+  { label: "Red", value: "#ef4444" },
+  { label: "Yellow", value: "#f59e0b" },
+  { label: "Green", value: "#22c55e" },
+  { label: "Blue", value: "#3b82f6" },
+  { label: "White", value: "#ffffff" },
+  { label: "Black", value: "#111111" },
+] as const;
+
+const PEN_WIDTHS = [
+  { cssPx: 3, dotClass: "h-1 w-1", label: "Thin" },
+  { cssPx: 6, dotClass: "h-2 w-2", label: "Medium" },
+  { cssPx: 12, dotClass: "h-3 w-3", label: "Thick" },
+] as const;
+
+function drawStroke(ctx: CanvasRenderingContext2D, stroke: EditorStroke) {
+  const [first, ...rest] = stroke.points;
+  if (!first) return;
+  ctx.strokeStyle = stroke.color;
+  ctx.fillStyle = stroke.color;
+  ctx.lineWidth = stroke.width;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  if (rest.length === 0) {
+    // Single click — leave a dot instead of an invisible zero-length line.
+    ctx.beginPath();
+    ctx.arc(first.x, first.y, stroke.width / 2, 0, Math.PI * 2);
+    ctx.fill();
+    return;
+  }
+  ctx.beginPath();
+  ctx.moveTo(first.x, first.y);
+  for (const point of rest) ctx.lineTo(point.x, point.y);
+  ctx.stroke();
+}
+
+function drawSegment(
+  ctx: CanvasRenderingContext2D,
+  from: EditorPoint,
+  to: EditorPoint,
+  stroke: EditorStroke,
+) {
+  ctx.strokeStyle = stroke.color;
+  ctx.lineWidth = stroke.width;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+  ctx.moveTo(from.x, from.y);
+  ctx.lineTo(to.x, to.y);
+  ctx.stroke();
+}
+
+/**
+ * Composite the source image and strokes into a PNG at natural resolution.
+ * Requires the media proxy to grant CORS (`crossOrigin="anonymous"`), else
+ * the canvas is tainted and `toBlob` throws.
+ */
+async function renderAnnotatedPng(
+  src: string,
+  strokes: EditorStroke[],
+): Promise<Uint8Array> {
+  const image = new Image();
+  image.crossOrigin = "anonymous";
+  // Distinct cache key from the display <img> loads: relay media is cached
+  // as `immutable` for a year, and WKWebView may hold pre-CORS-fix entries
+  // (no access-control-allow-origin header) that would fail the CORS check
+  // without ever refetching. The extra param guarantees this CORS-mode load
+  // gets a response that carries the header; the relay ignores the query.
+  image.src = `${src}${src.includes("?") ? "&" : "?"}cors=1`;
+  await image.decode();
+
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context unavailable");
+  ctx.drawImage(image, 0, 0);
+  for (const stroke of strokes) drawStroke(ctx, stroke);
+
+  const blob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(resolve, "image/png");
+  });
+  if (!blob) throw new Error("PNG encoding failed");
+  return new Uint8Array(await blob.arrayBuffer());
+}
+
+type ComposerImageEditorProps = {
+  alt: string;
+  /** Resolved (proxy-rewritten) image URL. */
+  src: string;
+  onCancel: () => void;
+  /** Upload the annotated PNG; rejection keeps the editor open. */
+  onSave: (bytes: Uint8Array) => Promise<void>;
+};
+
+/**
+ * Freehand drawing mode for a composer image attachment: the image at
+ * lightbox size with a canvas overlay, plus a pen toolbar (color, stroke
+ * width, undo, clear, cancel, save). Strokes are stored in natural-image
+ * coordinates so the exported PNG matches what's on screen.
+ */
+export function ComposerImageEditor({
+  alt,
+  src,
+  onCancel,
+  onSave,
+}: ComposerImageEditorProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const activeStrokeRef = React.useRef<EditorStroke | null>(null);
+  const [strokes, setStrokes] = React.useState<EditorStroke[]>([]);
+  const [activeColor, setActiveColor] = React.useState<string>(
+    PEN_COLORS[0].value,
+  );
+  const [activeWidthCss, setActiveWidthCss] = React.useState<number>(
+    PEN_WIDTHS[1].cssPx,
+  );
+  const [naturalSize, setNaturalSize] = React.useState<{
+    height: number;
+    width: number;
+  } | null>(null);
+  const [saving, setSaving] = React.useState(false);
+  const [saveError, setSaveError] = React.useState<string | null>(null);
+
+  const handleImageLoad = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      const { naturalHeight, naturalWidth } = event.currentTarget;
+      if (naturalWidth > 0 && naturalHeight > 0) {
+        setNaturalSize({ height: naturalHeight, width: naturalWidth });
+      }
+    },
+    [],
+  );
+
+  // Redraw committed strokes whenever they change (undo/clear/commit).
+  // Live segments are drawn imperatively during pointermove for latency.
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const stroke of strokes) drawStroke(ctx, stroke);
+  }, [strokes]);
+
+  const undo = React.useCallback(() => {
+    setStrokes((prev) => (prev.length > 0 ? prev.slice(0, -1) : prev));
+  }, []);
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      const isUndo =
+        (event.metaKey || event.ctrlKey) &&
+        !event.shiftKey &&
+        !event.altKey &&
+        event.key.toLowerCase() === "z";
+      if (!isUndo) return;
+      event.preventDefault();
+      undo();
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [undo]);
+
+  const toNaturalPoint = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>): EditorPoint | null => {
+      const canvas = canvasRef.current;
+      if (!canvas) return null;
+      const rect = canvas.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return null;
+      return {
+        x: ((event.clientX - rect.left) / rect.width) * canvas.width,
+        y: ((event.clientY - rect.top) / rect.height) * canvas.height,
+      };
+    },
+    [],
+  );
+
+  const handlePointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      if (event.button !== 0 || saving) return;
+      const canvas = canvasRef.current;
+      const point = toNaturalPoint(event);
+      if (!canvas || !point) return;
+      canvas.setPointerCapture(event.pointerId);
+      const rect = canvas.getBoundingClientRect();
+      const stroke: EditorStroke = {
+        color: activeColor,
+        points: [point],
+        // Scale the chosen CSS width into natural pixels so the on-screen
+        // preview matches the exported PNG exactly.
+        width: Math.max(1, activeWidthCss * (canvas.width / rect.width)),
+      };
+      activeStrokeRef.current = stroke;
+      const ctx = canvas.getContext("2d");
+      if (ctx) drawStroke(ctx, stroke);
+    },
+    [activeColor, activeWidthCss, saving, toNaturalPoint],
+  );
+
+  const handlePointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      const stroke = activeStrokeRef.current;
+      const canvas = canvasRef.current;
+      if (!stroke || !canvas) return;
+      const point = toNaturalPoint(event);
+      if (!point) return;
+      const previous = stroke.points[stroke.points.length - 1];
+      stroke.points.push(point);
+      const ctx = canvas.getContext("2d");
+      if (ctx && previous) drawSegment(ctx, previous, point, stroke);
+    },
+    [toNaturalPoint],
+  );
+
+  const commitActiveStroke = React.useCallback(() => {
+    const stroke = activeStrokeRef.current;
+    if (!stroke) return;
+    activeStrokeRef.current = null;
+    setStrokes((prev) => [...prev, stroke]);
+  }, []);
+
+  const handleSave = React.useCallback(async () => {
+    if (saving || strokes.length === 0) return;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      const bytes = await renderAnnotatedPng(src, strokes);
+      await onSave(bytes);
+      // On success the parent leaves edit mode and unmounts this component.
+    } catch {
+      setSaveError("Could not save the drawing. Please try again.");
+      setSaving(false);
+    }
+  }, [onSave, saving, src, strokes]);
+
+  const hasStrokes = strokes.length > 0;
+
+  return (
+    <div className="relative z-10 flex max-h-full max-w-full flex-col items-center gap-3">
+      <div className="relative">
+        <img
+          alt={alt}
+          className="max-h-[75vh] max-w-[85vw] select-none rounded-lg object-contain"
+          draggable={false}
+          onLoad={handleImageLoad}
+          src={src}
+        />
+        {naturalSize ? (
+          <canvas
+            aria-label="Drawing canvas"
+            className="absolute inset-0 h-full w-full cursor-crosshair touch-none rounded-lg"
+            data-testid="composer-image-editor-canvas"
+            height={naturalSize.height}
+            onPointerCancel={commitActiveStroke}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={commitActiveStroke}
+            ref={canvasRef}
+            width={naturalSize.width}
+          />
+        ) : null}
+      </div>
+
+      <div
+        className="flex flex-wrap items-center justify-center gap-3 rounded-full bg-black/60 px-4 py-2 backdrop-blur-sm"
+        data-testid="composer-image-editor-toolbar"
+      >
+        <div className="flex items-center gap-1.5">
+          {PEN_COLORS.map((color) => (
+            <button
+              aria-label={`${color.label} pen`}
+              aria-pressed={activeColor === color.value}
+              className={cn(
+                "h-5 w-5 rounded-full border border-white/30 transition-transform",
+                activeColor === color.value
+                  ? "scale-110 ring-2 ring-white"
+                  : "hover:scale-105",
+              )}
+              key={color.value}
+              onClick={() => setActiveColor(color.value)}
+              style={{ backgroundColor: color.value }}
+              type="button"
+            />
+          ))}
+        </div>
+
+        <div className="h-5 w-px bg-white/20" />
+
+        <div className="flex items-center gap-1">
+          {PEN_WIDTHS.map((width) => (
+            <button
+              aria-label={`${width.label} stroke`}
+              aria-pressed={activeWidthCss === width.cssPx}
+              className={cn(
+                "flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors",
+                activeWidthCss === width.cssPx
+                  ? "bg-white/25"
+                  : "hover:bg-white/10",
+              )}
+              key={width.label}
+              onClick={() => setActiveWidthCss(width.cssPx)}
+              type="button"
+            >
+              <span className={cn("rounded-full bg-current", width.dotClass)} />
+            </button>
+          ))}
+        </div>
+
+        <div className="h-5 w-px bg-white/20" />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              aria-label="Undo last stroke"
+              className="flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-transparent"
+              disabled={!hasStrokes}
+              onClick={undo}
+              type="button"
+            >
+              <Undo2 className="h-4 w-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Undo (⌘Z)</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              aria-label="Clear all strokes"
+              className="flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-transparent"
+              disabled={!hasStrokes}
+              onClick={() => setStrokes([])}
+              type="button"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Clear drawing</TooltipContent>
+        </Tooltip>
+
+        <div className="h-5 w-px bg-white/20" />
+
+        <button
+          className="rounded-full px-3 py-1 text-sm text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+          onClick={onCancel}
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          className="flex items-center gap-1.5 rounded-full bg-white px-3 py-1 text-sm font-medium text-black transition-opacity hover:opacity-90 disabled:opacity-50"
+          data-testid="composer-image-editor-save"
+          disabled={saving || !hasStrokes}
+          onClick={() => void handleSave()}
+          type="button"
+        >
+          {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
+          Save
+        </button>
+      </div>
+
+      {saveError ? (
+        <p className="text-xs text-red-300" role="alert">
+          {saveError}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index f30d039ff..fd19f0513 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -17,6 +17,7 @@ import {
   stripImetaMediaLines,
 } from "@/features/messages/lib/imetaMediaMarkdown";
 
+import { useAttachmentEditing } from "@/features/messages/lib/useAttachmentEditing";
 import {
   type MediaUploadController,
   useMediaUpload,
@@ -805,6 +806,13 @@ function MessageComposerImpl({
     [media.removeAttachment],
   );
 
+  const { handleAttachmentEditSave, handleAttachmentRevert } =
+    useAttachmentEditing({
+      revertAttachment: media.revertAttachment,
+      setSpoileredAttachmentUrls,
+      uploadEditedAttachment: media.uploadEditedAttachment,
+    });
+
   const handleComposerSpoilerToggle = React.useCallback(
     ({
       emptySelection,
@@ -924,7 +932,10 @@ function MessageComposerImpl({
                   onCancelUpload={media.cancelUpload}
                   uploadingCount={media.uploadingCount}
                   uploadingPreviews={media.uploadingPreviews}
+                  onEditSave={handleAttachmentEditSave}
                   onRemove={handleRemoveAttachment}
+                  onRevert={handleAttachmentRevert}
+                  originalUrlByUrl={media.originalUrlByUrl}
                   spoileredUrls={spoileredAttachmentUrls}
                 />
               </div>
diff --git a/desktop/tests/e2e/composer-image-draw.spec.ts b/desktop/tests/e2e/composer-image-draw.spec.ts
new file mode 100644
index 000000000..f3d7f3e1c
--- /dev/null
+++ b/desktop/tests/e2e/composer-image-draw.spec.ts
@@ -0,0 +1,179 @@
+import { expect, type Page, test } from "@playwright/test";
+
+import { installMockBridge } from "../helpers/bridge";
+
+const ORIGINAL_SHA = "a".repeat(64);
+const EDITED_SHA = "b".repeat(64);
+const ORIGINAL_URL = "https://example.com/e2e/draw-original.svg";
+const EDITED_URL = "https://example.com/e2e/draw-edited.svg";
+
+const ORIGINAL_DESCRIPTOR = {
+  url: ORIGINAL_URL,
+  sha256: ORIGINAL_SHA,
+  size: 1234,
+  type: "image/svg+xml",
+  uploaded: Math.floor(Date.now() / 1000),
+  dim: "320x200",
+  filename: "draw-original.svg",
+};
+
+const EDITED_DESCRIPTOR = {
+  url: EDITED_URL,
+  sha256: EDITED_SHA,
+  size: 2345,
+  type: "image/png",
+  uploaded: Math.floor(Date.now() / 1000),
+  dim: "320x200",
+  filename: "draw-original.png",
+};
+
+/**
+ * Serve deterministic same-size SVGs for both attachment URLs. The CORS
+ * header matters: the editor re-loads the image with
+ * `crossOrigin="anonymous"` to export an un-tainted canvas. The trailing
+ * `*` also matches the editor's `?cors=1` cache-busting load.
+ */
+async function installImageRoutes(page: Page) {
+  await page.route("https://example.com/e2e/draw-*.svg*", (route) => {
+    const fill = route.request().url().includes("edited")
+      ? "#b3574a"
+      : "#4aa3df";
+    route.fulfill({
+      body: `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200"><rect width="100%" height="100%" fill="${fill}"/></svg>`,
+      contentType: "image/svg+xml",
+      headers: { "access-control-allow-origin": "*" },
+    });
+  });
+}
+
+async function drawStrokeOnCanvas(page: Page) {
+  const canvas = page.getByTestId("composer-image-editor-canvas");
+  await expect(canvas).toBeVisible();
+  const box = await canvas.boundingBox();
+  if (!box) throw new Error("Expected drawing canvas to have a layout box");
+  const centerY = box.y + box.height / 2;
+  await page.mouse.move(box.x + box.width * 0.25, centerY);
+  await page.mouse.down();
+  await page.mouse.move(box.x + box.width * 0.75, centerY, { steps: 8 });
+  await page.mouse.up();
+}
+
+test.beforeEach(async ({ page }) => {
+  await installImageRoutes(page);
+  await installMockBridge(page, {
+    uploadDescriptors: [ORIGINAL_DESCRIPTOR],
+  });
+});
+
+test("draw on an uploaded image, save replaces it, revert restores in place", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+
+  // Attach the original image via the mocked paperclip flow.
+  await page.getByRole("button", { name: "Attach image" }).click();
+  const composer = page.getByTestId("message-composer");
+  await expect(composer.getByAltText("Attachment aaaa")).toBeVisible();
+
+  // Open the composer lightbox.
+  await composer.getByAltText("Attachment aaaa").click();
+  const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible();
+  await expect(dialog.locator(`img[src="${ORIGINAL_URL}"]`)).toBeVisible();
+
+  // No revert affordance before any edit.
+  await expect(page.getByTestId("composer-attachment-revert")).toHaveCount(0);
+
+  // Enter canvas mode; Escape leaves canvas mode but keeps the dialog open.
+  await page.getByTestId("composer-attachment-edit").click();
+  await expect(page.getByTestId("composer-image-editor-canvas")).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("composer-image-editor-canvas")).toHaveCount(0);
+  await expect(dialog).toBeVisible();
+
+  // Re-enter canvas mode and draw a stroke.
+  await page.getByTestId("composer-attachment-edit").click();
+  const saveButton = page.getByTestId("composer-image-editor-save");
+  await expect(saveButton).toBeDisabled();
+  await drawStrokeOnCanvas(page);
+  await expect(saveButton).toBeEnabled();
+
+  // The next mocked upload returns the annotated descriptor.
+  await page.evaluate((edited) => {
+    window.__BUZZ_E2E__ = {
+      ...window.__BUZZ_E2E__,
+      mock: {
+        ...window.__BUZZ_E2E__?.mock,
+        uploadDescriptors: [edited],
+      },
+    };
+  }, EDITED_DESCRIPTOR);
+
+  await saveButton.click();
+
+  // Dialog stays open, now showing the annotated image in view mode.
+  await expect(dialog.locator(`img[src="${EDITED_URL}"]`)).toBeVisible();
+  await expect(page.getByTestId("composer-image-editor-canvas")).toHaveCount(0);
+
+  // The annotated PNG went through the real upload command.
+  const uploadCommandCount = await page.evaluate(
+    () =>
+      (
+        window as Window & { __BUZZ_E2E_COMMANDS__?: string[] }
+      ).__BUZZ_E2E_COMMANDS__?.filter(
+        (command) => command === "upload_media_bytes",
+      ).length ?? 0,
+  );
+  expect(uploadCommandCount).toBe(1);
+
+  // Revert swaps back to the original without closing the dialog.
+  await page.getByTestId("composer-attachment-revert").click();
+  await expect(dialog).toBeVisible();
+  await expect(dialog.locator(`img[src="${ORIGINAL_URL}"]`)).toBeVisible();
+  await expect(page.getByTestId("composer-attachment-revert")).toHaveCount(0);
+
+  // Closing the dialog shows the (restored) original thumbnail.
+  await page.keyboard.press("Escape");
+  await expect(dialog).toHaveCount(0);
+  await expect(composer.getByAltText("Attachment aaaa")).toBeVisible();
+});
+
+test("spoiler marking survives drawing on the attachment", async ({ page }) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+
+  await page.getByRole("button", { name: "Attach image" }).click();
+  const composer = page.getByTestId("message-composer");
+  await expect(composer.getByAltText("Attachment aaaa")).toBeVisible();
+
+  // Spoiler the attachment, then draw on it.
+  await page.getByRole("button", { name: "Spoiler", exact: true }).click();
+  await expect(composer.locator("[data-composer-media-spoiler]")).toBeVisible();
+
+  await composer.getByAltText("Attachment aaaa").click();
+  await page.getByTestId("composer-attachment-edit").click();
+  await drawStrokeOnCanvas(page);
+
+  await page.evaluate((edited) => {
+    window.__BUZZ_E2E__ = {
+      ...window.__BUZZ_E2E__,
+      mock: {
+        ...window.__BUZZ_E2E__?.mock,
+        uploadDescriptors: [edited],
+      },
+    };
+  }, EDITED_DESCRIPTOR);
+  await page.getByTestId("composer-image-editor-save").click();
+
+  const dialog = page.getByRole("dialog");
+  await expect(dialog.locator(`img[src="${EDITED_URL}"]`)).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(dialog).toHaveCount(0);
+
+  // The annotated replacement is still marked as a spoiler.
+  await expect(composer.getByAltText("Attachment bbbb")).toBeVisible();
+  await expect(composer.locator("[data-composer-media-spoiler]")).toBeVisible();
+});

From 2b91af8196c9d67868a7df2ccb5266da400114c9 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 21:01:20 -0700
Subject: [PATCH 2/8] refactor(desktop): redesign image editor toolbar as
 top-right overlay bar

- Move Cancel/Save CTAs from the floating pen toolbar to a fixed bar in
  the top-right corner of the lightbox overlay, using the shared
  Button component (ghost variant for Cancel, default for Save)
- Move the drawing controls (width slider, color swatches, undo) into
  the same top bar, sliding in leftward from the CTAs via
  animate-in/slide-in-from-right on mount
- Strip the pill styling from the toolbar (background, padding, blur,
  separators) so controls sit directly on the overlay
- Replace the three Thin/Medium/Thick preset buttons with a compact
  range slider: 4-12px in 2px steps (five whole-pixel stops, default
  6px), slim custom track and thumb via ::-webkit-slider-thumb
- Color swatches now double as stroke-width previews: each fixed 20px
  button renders its color as an inner dot sized to the current width,
  animating as the slider moves; selection ring stays fixed-size
- Ring outline only on the black swatch (for contrast on the dark
  overlay), drawn outside the dot so it never overlaps the color
- Remove the clear-all (trashcan) control - Cancel covers discarding -
  and the hover scale effect on swatches

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../messages/ui/ComposerImageEditor.tsx       | 161 ++++++++----------
 1 file changed, 73 insertions(+), 88 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
index 0f173cd80..7a2be3e49 100644
--- a/desktop/src/features/messages/ui/ComposerImageEditor.tsx
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
-import { Loader2, Trash2, Undo2 } from "lucide-react";
+import { Loader2, Undo2 } from "lucide-react";
 
 import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 
 type EditorPoint = { x: number; y: number };
@@ -23,11 +24,11 @@ const PEN_COLORS = [
   { label: "Black", value: "#111111" },
 ] as const;
 
-const PEN_WIDTHS = [
-  { cssPx: 3, dotClass: "h-1 w-1", label: "Thin" },
-  { cssPx: 6, dotClass: "h-2 w-2", label: "Medium" },
-  { cssPx: 12, dotClass: "h-3 w-3", label: "Thick" },
-] as const;
+/** Pen stroke width range, in CSS pixels: five whole-pixel slider stops. */
+const PEN_WIDTH_MIN_CSS = 4;
+const PEN_WIDTH_MAX_CSS = 12;
+const PEN_WIDTH_STEP_CSS = 2;
+const PEN_WIDTH_DEFAULT_CSS = 6;
 
 function drawStroke(ctx: CanvasRenderingContext2D, stroke: EditorStroke) {
   const [first, ...rest] = stroke.points;
@@ -128,7 +129,7 @@ export function ComposerImageEditor({
     PEN_COLORS[0].value,
   );
   const [activeWidthCss, setActiveWidthCss] = React.useState<number>(
-    PEN_WIDTHS[1].cssPx,
+    PEN_WIDTH_DEFAULT_CSS,
   );
   const [naturalSize, setNaturalSize] = React.useState<{
     height: number;
@@ -276,101 +277,85 @@ export function ComposerImageEditor({
         ) : null}
       </div>
 
-      <div
-        className="flex flex-wrap items-center justify-center gap-3 rounded-full bg-black/60 px-4 py-2 backdrop-blur-sm"
-        data-testid="composer-image-editor-toolbar"
-      >
-        <div className="flex items-center gap-1.5">
-          {PEN_COLORS.map((color) => (
-            <button
-              aria-label={`${color.label} pen`}
-              aria-pressed={activeColor === color.value}
-              className={cn(
-                "h-5 w-5 rounded-full border border-white/30 transition-transform",
-                activeColor === color.value
-                  ? "scale-110 ring-2 ring-white"
-                  : "hover:scale-105",
-              )}
-              key={color.value}
-              onClick={() => setActiveColor(color.value)}
-              style={{ backgroundColor: color.value }}
-              type="button"
-            />
-          ))}
-        </div>
+      <div className="fixed right-4 top-4 z-20 flex items-center gap-3">
+        <div
+          className="flex items-center gap-3 animate-in fade-in slide-in-from-right-12 duration-300"
+          data-testid="composer-image-editor-toolbar"
+        >
+          <input
+            aria-label="Stroke width"
+            className="h-1 w-12 cursor-pointer appearance-none rounded-full bg-white/25 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white"
+            max={PEN_WIDTH_MAX_CSS}
+            min={PEN_WIDTH_MIN_CSS}
+            onChange={(event) => setActiveWidthCss(Number(event.target.value))}
+            step={PEN_WIDTH_STEP_CSS}
+            type="range"
+            value={activeWidthCss}
+          />
 
-        <div className="h-5 w-px bg-white/20" />
+          <div className="flex items-center gap-1.5">
+            {PEN_COLORS.map((color) => (
+              <button
+                aria-label={`${color.label} pen`}
+                aria-pressed={activeColor === color.value}
+                className={cn(
+                  "flex h-5 w-5 items-center justify-center rounded-full transition-transform",
+                  activeColor === color.value && "scale-110 ring-2 ring-white",
+                )}
+                key={color.value}
+                onClick={() => setActiveColor(color.value)}
+                type="button"
+              >
+                <span
+                  className={cn(
+                    "rounded-full transition-[height,width]",
+                    color.label === "Black" && "ring-1 ring-white/30",
+                  )}
+                  style={{
+                    backgroundColor: color.value,
+                    height: `${activeWidthCss}px`,
+                    width: `${activeWidthCss}px`,
+                  }}
+                />
+              </button>
+            ))}
+          </div>
 
-        <div className="flex items-center gap-1">
-          {PEN_WIDTHS.map((width) => (
-            <button
-              aria-label={`${width.label} stroke`}
-              aria-pressed={activeWidthCss === width.cssPx}
-              className={cn(
-                "flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors",
-                activeWidthCss === width.cssPx
-                  ? "bg-white/25"
-                  : "hover:bg-white/10",
-              )}
-              key={width.label}
-              onClick={() => setActiveWidthCss(width.cssPx)}
-              type="button"
-            >
-              <span className={cn("rounded-full bg-current", width.dotClass)} />
-            </button>
-          ))}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                aria-label="Undo last stroke"
+                className="flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-transparent"
+                disabled={!hasStrokes}
+                onClick={undo}
+                type="button"
+              >
+                <Undo2 className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Undo (⌘Z)</TooltipContent>
+          </Tooltip>
         </div>
 
-        <div className="h-5 w-px bg-white/20" />
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              aria-label="Undo last stroke"
-              className="flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-transparent"
-              disabled={!hasStrokes}
-              onClick={undo}
-              type="button"
-            >
-              <Undo2 className="h-4 w-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>Undo (⌘Z)</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              aria-label="Clear all strokes"
-              className="flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-transparent"
-              disabled={!hasStrokes}
-              onClick={() => setStrokes([])}
-              type="button"
-            >
-              <Trash2 className="h-4 w-4" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>Clear drawing</TooltipContent>
-        </Tooltip>
-
-        <div className="h-5 w-px bg-white/20" />
-
-        <button
-          className="rounded-full px-3 py-1 text-sm text-white/80 transition-colors hover:bg-white/10 hover:text-white"
+        <Button
+          className="text-white hover:bg-white/10 hover:text-white"
           onClick={onCancel}
+          size="sm"
           type="button"
+          variant="ghost"
         >
           Cancel
-        </button>
-        <button
-          className="flex items-center gap-1.5 rounded-full bg-white px-3 py-1 text-sm font-medium text-black transition-opacity hover:opacity-90 disabled:opacity-50"
+        </Button>
+        <Button
           data-testid="composer-image-editor-save"
           disabled={saving || !hasStrokes}
           onClick={() => void handleSave()}
+          size="sm"
           type="button"
         >
-          {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
+          {saving ? <Loader2 className="animate-spin" /> : null}
           Save
-        </button>
+        </Button>
       </div>
 
       {saveError ? (

From d6d31e91e7eefe551209350c97ac2906697d7d93 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 21:56:08 -0700
Subject: [PATCH 3/8] feat(desktop): image editor redo, brush-preview cursor,
 unselectable image

- Add redo: stroke history is now a single {strokes, undone} state
  object so undo/redo move strokes between stacks atomically
  (StrictMode-safe); new strokes clear the redo stack per editor
  convention. Redo button (Redo2 icon) next to Undo, plus Shift+Cmd+Z
  handling in the existing Cmd+Z keyboard listener
- Replace the crosshair cursor with a dynamic brush preview: the
  native cursor is hidden over the canvas (cursor-none) and a
  pointer-following DOM dot renders the active color at the exact
  on-screen stroke width, with a faint white ring for visibility on
  light image areas. Positioned imperatively via ref during
  pointermove (no per-move re-renders); fades out on pointer leave.
  A DOM element sized in CSS pixels is guaranteed accurate, unlike a
  cursor: url(...) image
- Make the lightbox image fully unselectable: pointer-events-none on
  the <img> alongside the existing select-none and draggable={false}

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../messages/ui/ComposerImageEditor.tsx       | 125 +++++++++++++++---
 1 file changed, 103 insertions(+), 22 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
index 7a2be3e49..09cc316a1 100644
--- a/desktop/src/features/messages/ui/ComposerImageEditor.tsx
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Loader2, Undo2 } from "lucide-react";
+import { Loader2, Redo2, Undo2 } from "lucide-react";
 
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
@@ -124,7 +124,13 @@ export function ComposerImageEditor({
 }: ComposerImageEditorProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const activeStrokeRef = React.useRef<EditorStroke | null>(null);
-  const [strokes, setStrokes] = React.useState<EditorStroke[]>([]);
+  // Committed strokes plus the undone strokes available for redo. Kept in
+  // one state object so undo/redo move strokes between stacks atomically.
+  const [history, setHistory] = React.useState<{
+    strokes: EditorStroke[];
+    undone: EditorStroke[];
+  }>({ strokes: [], undone: [] });
+  const strokes = history.strokes;
   const [activeColor, setActiveColor] = React.useState<string>(
     PEN_COLORS[0].value,
   );
@@ -159,23 +165,44 @@ export function ComposerImageEditor({
   }, [strokes]);
 
   const undo = React.useCallback(() => {
-    setStrokes((prev) => (prev.length > 0 ? prev.slice(0, -1) : prev));
+    setHistory((prev) => {
+      const last = prev.strokes[prev.strokes.length - 1];
+      if (!last) return prev;
+      return {
+        strokes: prev.strokes.slice(0, -1),
+        undone: [...prev.undone, last],
+      };
+    });
+  }, []);
+
+  const redo = React.useCallback(() => {
+    setHistory((prev) => {
+      const last = prev.undone[prev.undone.length - 1];
+      if (!last) return prev;
+      return {
+        strokes: [...prev.strokes, last],
+        undone: prev.undone.slice(0, -1),
+      };
+    });
   }, []);
 
   React.useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
-      const isUndo =
+      const isModZ =
         (event.metaKey || event.ctrlKey) &&
-        !event.shiftKey &&
         !event.altKey &&
         event.key.toLowerCase() === "z";
-      if (!isUndo) return;
+      if (!isModZ) return;
       event.preventDefault();
-      undo();
+      if (event.shiftKey) {
+        redo();
+      } else {
+        undo();
+      }
     }
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [undo]);
+  }, [redo, undo]);
 
   const toNaturalPoint = React.useCallback(
     (event: React.PointerEvent<HTMLCanvasElement>): EditorPoint | null => {
@@ -232,7 +259,8 @@ export function ComposerImageEditor({
     const stroke = activeStrokeRef.current;
     if (!stroke) return;
     activeStrokeRef.current = null;
-    setStrokes((prev) => [...prev, stroke]);
+    // A new stroke invalidates the redo stack, matching editor conventions.
+    setHistory((prev) => ({ strokes: [...prev.strokes, stroke], undone: [] }));
   }, []);
 
   const handleSave = React.useCallback(async () => {
@@ -251,29 +279,68 @@ export function ComposerImageEditor({
 
   const hasStrokes = strokes.length > 0;
 
+  // The native cursor is hidden over the canvas; this DOM dot follows the
+  // pointer instead. Unlike a `cursor: url(...)` image, an element sized in
+  // CSS pixels is guaranteed to match the on-screen stroke width exactly.
+  // Positioned imperatively during pointermove to avoid re-rendering.
+  const brushPreviewRef = React.useRef<HTMLDivElement>(null);
+
+  const moveBrushPreview = React.useCallback(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      const preview = brushPreviewRef.current;
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!preview || !rect) return;
+      preview.style.opacity = "1";
+      preview.style.transform = `translate(${event.clientX - rect.left}px, ${event.clientY - rect.top}px) translate(-50%, -50%)`;
+    },
+    [],
+  );
+
+  const hideBrushPreview = React.useCallback(() => {
+    const preview = brushPreviewRef.current;
+    if (preview) preview.style.opacity = "0";
+  }, []);
+
   return (
     <div className="relative z-10 flex max-h-full max-w-full flex-col items-center gap-3">
       <div className="relative">
         <img
           alt={alt}
-          className="max-h-[75vh] max-w-[85vw] select-none rounded-lg object-contain"
+          className="pointer-events-none max-h-[75vh] max-w-[85vw] select-none rounded-lg object-contain"
           draggable={false}
           onLoad={handleImageLoad}
           src={src}
         />
         {naturalSize ? (
-          <canvas
-            aria-label="Drawing canvas"
-            className="absolute inset-0 h-full w-full cursor-crosshair touch-none rounded-lg"
-            data-testid="composer-image-editor-canvas"
-            height={naturalSize.height}
-            onPointerCancel={commitActiveStroke}
-            onPointerDown={handlePointerDown}
-            onPointerMove={handlePointerMove}
-            onPointerUp={commitActiveStroke}
-            ref={canvasRef}
-            width={naturalSize.width}
-          />
+          <>
+            <canvas
+              aria-label="Drawing canvas"
+              className="absolute inset-0 h-full w-full cursor-none touch-none rounded-lg"
+              data-testid="composer-image-editor-canvas"
+              height={naturalSize.height}
+              onPointerCancel={commitActiveStroke}
+              onPointerDown={handlePointerDown}
+              onPointerEnter={moveBrushPreview}
+              onPointerLeave={hideBrushPreview}
+              onPointerMove={(event) => {
+                handlePointerMove(event);
+                moveBrushPreview(event);
+              }}
+              onPointerUp={commitActiveStroke}
+              ref={canvasRef}
+              width={naturalSize.width}
+            />
+            <div
+              aria-hidden
+              className="pointer-events-none absolute left-0 top-0 rounded-full opacity-0 ring-1 ring-white/60"
+              ref={brushPreviewRef}
+              style={{
+                backgroundColor: activeColor,
+                height: `${activeWidthCss}px`,
+                width: `${activeWidthCss}px`,
+              }}
+            />
+          </>
         ) : null}
       </div>
 
@@ -335,6 +402,20 @@ export function ComposerImageEditor({
             </TooltipTrigger>
             <TooltipContent>Undo (⌘Z)</TooltipContent>
           </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                aria-label="Redo stroke"
+                className="flex h-7 w-7 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-transparent"
+                disabled={history.undone.length === 0}
+                onClick={redo}
+                type="button"
+              >
+                <Redo2 className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Redo (⇧⌘Z)</TooltipContent>
+          </Tooltip>
         </div>
 
         <Button

From eded4738e0eae478919e685d7e774ec3dcbb9169 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 22:06:00 -0700
Subject: [PATCH 4/8] feat(desktop): labeled Revert button in lightbox, lock
 Cancel during save

- ComposerAttachments: replace the undo-arrow icon button in the
  attachment lightbox view mode with the shared Button (default
  variant) labeled "Revert"; keeps the composer-attachment-revert
  test id and the "Revert to original" tooltip, drops the unused
  Undo2 import
- ComposerImageEditor: disable the Cancel CTA while a save is in
  flight so the editor cannot be dismissed mid-upload

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/messages/ui/ComposerAttachments.tsx   | 14 +++++++-------
 .../features/messages/ui/ComposerImageEditor.tsx   |  1 +
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index d4e6f7fdc..755e6af8f 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AnimatePresence, LayoutGroup, motion } from "motion/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { FileText, HatGlasses, Pencil, Play, Undo2, X } from "lucide-react";
+import { FileText, HatGlasses, Pencil, Play, X } from "lucide-react";
 
 import type { BlobDescriptor } from "@/shared/api/tauri";
 import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
@@ -10,6 +10,7 @@ import {
   type UploadingAttachmentPreview,
 } from "@/features/messages/lib/useMediaUpload";
 import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
 import { MODAL_BACKDROP_BLUR_CLASS } from "@/shared/ui/modalBackdrop";
 import { Progress } from "@/shared/ui/progress";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
@@ -238,15 +239,14 @@ const MediaAttachmentItem = React.forwardRef<
                   {canRevert ? (
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <button
-                          type="button"
-                          className={LIGHTBOX_BUTTON_CLASS}
+                        <Button
                           data-testid="composer-attachment-revert"
                           onClick={handleRevert}
+                          size="sm"
+                          type="button"
                         >
-                          <Undo2 className="h-4 w-4" />
-                          <span className="sr-only">Revert to original</span>
-                        </button>
+                          Revert
+                        </Button>
                       </TooltipTrigger>
                       <TooltipContent>Revert to original</TooltipContent>
                     </Tooltip>
diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
index 09cc316a1..f8d31a3b5 100644
--- a/desktop/src/features/messages/ui/ComposerImageEditor.tsx
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -420,6 +420,7 @@ export function ComposerImageEditor({
 
         <Button
           className="text-white hover:bg-white/10 hover:text-white"
+          disabled={saving}
           onClick={onCancel}
           size="sm"
           type="button"

From 28fd94c904ebbbf4d90307342dbb53af1e228411 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 22:23:39 -0700
Subject: [PATCH 5/8] fix(desktop): restrict media proxy origin gate to exact
 webview origins
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The loopback media proxy's origin check accepted any http(s)
localhost/127.0.0.1 origin on any port, and the proxy is spawned
unconditionally (lib.rs) — so in packaged builds, any local web page
that discovered the proxy port could make JS-readable, CORS-approved
requests to relay media. The widening was never needed: the composer
canvas crossOrigin="anonymous" reload and <img> loads use the no-Origin
path, which the unconditional ACAO:* already covers.

- desktop/src-tauri/src/media_proxy.rs:
  - is_webview_origin now accepts only the packaged custom-scheme
    origins (tauri://localhost, http://tauri.localhost), plus the one
    exact dev origin gated behind cfg!(debug_assertions)
  - The dev origin is derived from the merged Tauri config's
    build.devUrl at proxy spawn (stored in ProxyState), so per-worktree
    dev ports from scripts/instance-env.sh keep working — no hardcoded
    localhost:1420
  - ACAO:* stays unconditional (required for no-Origin CORS image
    loads; foreign pages are rejected by the origin gate first)
  - Tests updated: exact-dev-origin-only in debug builds, dev origin
    rejected in release builds, remote/lookalike origins still rejected

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src-tauri/src/media_proxy.rs | 77 ++++++++++++++++++----------
 1 file changed, 50 insertions(+), 27 deletions(-)

diff --git a/desktop/src-tauri/src/media_proxy.rs b/desktop/src-tauri/src/media_proxy.rs
index e25fc9a19..7567b5802 100644
--- a/desktop/src-tauri/src/media_proxy.rs
+++ b/desktop/src-tauri/src/media_proxy.rs
@@ -23,26 +23,26 @@ const MAX_PROXY_RESPONSE: u64 = 20 * 1024 * 1024;
 struct ProxyState {
     client: reqwest::Client,
     app_handle: tauri::AppHandle,
+    /// Exact `tauri dev` webview origin (from `build.devUrl`), accepted in
+    /// debug builds only. `None` in packaged builds.
+    dev_origin: Option<String>,
 }
 
 /// True when `origin` belongs to the Tauri webview itself: the custom-scheme
-/// origins of packaged builds, or a loopback origin used by `tauri dev`
-/// (`devUrl` is `http://localhost:<per-worktree-port>`). Loopback origins
-/// imply code already running on this machine, which could reach the proxy
-/// directly anyway — allowing them adds no new exposure, while remote
-/// websites keep getting 403.
-fn is_webview_origin(origin: &str) -> bool {
+/// origins of packaged builds, plus — in debug builds only — the exact
+/// `tauri dev` origin (`build.devUrl` from the merged Tauri config, e.g.
+/// `http://localhost:<per-worktree-port>`). Packaged builds accept only the
+/// custom-scheme origins: a blanket "any loopback origin" rule would let any
+/// local web page that discovers the proxy port make JS-readable requests to
+/// relay media.
+fn is_webview_origin(origin: &str, dev_origin: Option<&str>) -> bool {
     if origin == "tauri://localhost" || origin == "http://tauri.localhost" {
         return true;
     }
-    let Some(rest) = origin
-        .strip_prefix("http://")
-        .or_else(|| origin.strip_prefix("https://"))
-    else {
-        return false;
-    };
-    let host = rest.split(':').next().unwrap_or(rest);
-    host == "localhost" || host == "127.0.0.1"
+    if cfg!(debug_assertions) {
+        return dev_origin.is_some_and(|dev| origin == dev);
+    }
+    false
 }
 
 async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) -> Response {
@@ -54,7 +54,7 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
         .get("origin")
         .and_then(|v| v.to_str().ok())
         .unwrap_or("");
-    if !origin.is_empty() && !is_webview_origin(origin) {
+    if !origin.is_empty() && !is_webview_origin(origin, state.dev_origin.as_deref()) {
         return (StatusCode::FORBIDDEN, "forbidden: invalid origin").into_response();
     }
 
@@ -154,9 +154,19 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
 /// Tauri protocol handler's requirement to buffer the entire response into
 /// `Vec<u8>`. Returns the OS-assigned port.
 pub async fn spawn_media_proxy(http_client: reqwest::Client, app_handle: tauri::AppHandle) -> u16 {
+    // Origin form of `build.devUrl` (e.g. "http://localhost:1420"), only
+    // consulted by `is_webview_origin` in debug builds.
+    let dev_origin = app_handle
+        .config()
+        .build
+        .dev_url
+        .as_ref()
+        .map(|url| url.origin().ascii_serialization());
+
     let proxy_state = ProxyState {
         client: http_client,
         app_handle,
+        dev_origin,
     };
 
     let app = Router::new()
@@ -339,24 +349,37 @@ mod tests {
 
     #[test]
     fn allows_packaged_webview_origins() {
-        assert!(is_webview_origin("tauri://localhost"));
-        assert!(is_webview_origin("http://tauri.localhost"));
+        assert!(is_webview_origin("tauri://localhost", None));
+        assert!(is_webview_origin("http://tauri.localhost", None));
+    }
+
+    #[test]
+    #[cfg(debug_assertions)]
+    fn allows_only_the_exact_dev_origin_in_debug_builds() {
+        let dev = Some("http://localhost:1420");
+        assert!(is_webview_origin("http://localhost:1420", dev));
+        // Other loopback origins are not the webview.
+        assert!(!is_webview_origin("http://localhost:47177", dev));
+        assert!(!is_webview_origin("http://127.0.0.1:1420", dev));
+        assert!(!is_webview_origin("http://localhost", dev));
+        assert!(!is_webview_origin("http://localhost:1420", None));
     }
 
     #[test]
-    fn allows_loopback_dev_origins_on_any_port() {
-        assert!(is_webview_origin("http://localhost:1420"));
-        assert!(is_webview_origin("http://localhost:47177"));
-        assert!(is_webview_origin("http://127.0.0.1:4173"));
-        assert!(is_webview_origin("http://localhost"));
+    #[cfg(not(debug_assertions))]
+    fn rejects_dev_origin_in_release_builds() {
+        let dev = Some("http://localhost:1420");
+        assert!(!is_webview_origin("http://localhost:1420", dev));
+        assert!(!is_webview_origin("http://127.0.0.1:4173", dev));
     }
 
     #[test]
     fn rejects_remote_and_lookalike_origins() {
-        assert!(!is_webview_origin("https://evil.example.com"));
-        assert!(!is_webview_origin("http://localhost.evil.com"));
-        assert!(!is_webview_origin("http://127.0.0.1.evil.com"));
-        assert!(!is_webview_origin("file://localhost"));
-        assert!(!is_webview_origin("null"));
+        let dev = Some("http://localhost:1420");
+        assert!(!is_webview_origin("https://evil.example.com", dev));
+        assert!(!is_webview_origin("http://localhost.evil.com", dev));
+        assert!(!is_webview_origin("http://127.0.0.1.evil.com", dev));
+        assert!(!is_webview_origin("file://localhost", dev));
+        assert!(!is_webview_origin("null", dev));
     }
 }

From dac350b2337c25600a0399d856037a3ec865c399 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 22:26:07 -0700
Subject: [PATCH 6/8] feat(desktop): close lightbox on drawing save to
 discourage orphan-blob churn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ComposerAttachments.tsx: handleEditorSave now closes the lightbox dialog
  after a successful annotated-image upload instead of returning to view
  mode. Each save uploads a fresh blob to the relay while revert/re-edit
  only drops the client reference, so keeping the modal open made rapid
  save/redraw cycles (and their orphaned blobs) frictionless — closing it
  adds deliberate friction per reviewer feedback
- ComposerAttachments.tsx: update MediaAttachmentItem doc comment — save
  now closes the dialog while revert still keeps it open (parent keys the
  item by original URL so the URL swap doesn't remount it)
- ComposerImageEditor.tsx: update handleSave comment to reflect that the
  parent closes the lightbox on success
- composer-image-draw.spec.ts: main test now asserts the dialog closes on
  save and the annotated thumbnail appears in the composer, then reopens
  the lightbox to exercise the revert flow (revert behavior unchanged);
  spoiler test drops the now-unneeded Escape press after save

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../messages/ui/ComposerAttachments.tsx        | 12 +++++++++---
 .../messages/ui/ComposerImageEditor.tsx        |  2 +-
 desktop/tests/e2e/composer-image-draw.spec.ts  | 18 +++++++++++-------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index 755e6af8f..a3df0a349 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -74,9 +74,11 @@ type MediaAttachmentItemProps = {
 /**
  * A single image/video attachment thumbnail with its lightbox dialog.
  * Images support an in-lightbox canvas edit mode (freehand drawing) and,
- * once annotated, an in-place revert to the original — both keep the
- * dialog open (the parent keys this item by its original URL so the swap
- * doesn't remount it).
+ * once annotated, an in-place revert to the original. Saving a drawing
+ * closes the dialog (each save uploads a new blob, so the close adds
+ * friction against rapid re-edit cycles); revert keeps it open (the
+ * parent keys this item by its original URL so the swap doesn't remount
+ * it).
  *
  * Forwards its ref to the root motion.div — required by the parent
  * `AnimatePresence mode="popLayout"`, which measures exiting children.
@@ -126,7 +128,11 @@ const MediaAttachmentItem = React.forwardRef<
     async (bytes: Uint8Array) => {
       if (!onEditSave) return;
       await onEditSave(attachment.url, bytes);
+      // Close the lightbox on save. Each save uploads a fresh blob, so the
+      // added friction of reopening discourages rapid save/redraw cycles
+      // that would otherwise orphan a blob per iteration.
       setMode("view");
+      setOpen(false);
     },
     [attachment.url, onEditSave],
   );
diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
index f8d31a3b5..26f414a42 100644
--- a/desktop/src/features/messages/ui/ComposerImageEditor.tsx
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -270,7 +270,7 @@ export function ComposerImageEditor({
     try {
       const bytes = await renderAnnotatedPng(src, strokes);
       await onSave(bytes);
-      // On success the parent leaves edit mode and unmounts this component.
+      // On success the parent closes the lightbox and unmounts this component.
     } catch {
       setSaveError("Could not save the drawing. Please try again.");
       setSaving(false);
diff --git a/desktop/tests/e2e/composer-image-draw.spec.ts b/desktop/tests/e2e/composer-image-draw.spec.ts
index f3d7f3e1c..6bafea11f 100644
--- a/desktop/tests/e2e/composer-image-draw.spec.ts
+++ b/desktop/tests/e2e/composer-image-draw.spec.ts
@@ -113,9 +113,10 @@ test("draw on an uploaded image, save replaces it, revert restores in place", as
 
   await saveButton.click();
 
-  // Dialog stays open, now showing the annotated image in view mode.
-  await expect(dialog.locator(`img[src="${EDITED_URL}"]`)).toBeVisible();
-  await expect(page.getByTestId("composer-image-editor-canvas")).toHaveCount(0);
+  // Saving closes the lightbox; the composer thumbnail now shows the
+  // annotated image.
+  await expect(dialog).toHaveCount(0);
+  await expect(composer.getByAltText("Attachment bbbb")).toBeVisible();
 
   // The annotated PNG went through the real upload command.
   const uploadCommandCount = await page.evaluate(
@@ -128,6 +129,11 @@ test("draw on an uploaded image, save replaces it, revert restores in place", as
   );
   expect(uploadCommandCount).toBe(1);
 
+  // Reopen the lightbox on the annotated attachment to revert.
+  await composer.getByAltText("Attachment bbbb").click();
+  await expect(dialog).toBeVisible();
+  await expect(dialog.locator(`img[src="${EDITED_URL}"]`)).toBeVisible();
+
   // Revert swaps back to the original without closing the dialog.
   await page.getByTestId("composer-attachment-revert").click();
   await expect(dialog).toBeVisible();
@@ -168,10 +174,8 @@ test("spoiler marking survives drawing on the attachment", async ({ page }) => {
   }, EDITED_DESCRIPTOR);
   await page.getByTestId("composer-image-editor-save").click();
 
-  const dialog = page.getByRole("dialog");
-  await expect(dialog.locator(`img[src="${EDITED_URL}"]`)).toBeVisible();
-  await page.keyboard.press("Escape");
-  await expect(dialog).toHaveCount(0);
+  // Saving closes the lightbox.
+  await expect(page.getByRole("dialog")).toHaveCount(0);
 
   // The annotated replacement is still marked as a spoiler.
   await expect(composer.getByAltText("Attachment bbbb")).toBeVisible();

From a8334149a67e9fb01d37b0a46e50da3cc75e8cd1 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 2 Jul 2026 23:09:13 -0700
Subject: [PATCH 7/8] refactor(desktop): editor export via IPC bytes, revert
 all media-proxy changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the image editor's CORS-based canvas export with a Tauri IPC
byte fetch + same-origin blob: URL, eliminating the need for any media
proxy CORS headers or origin-gate changes. media_proxy.rs is restored
byte-for-byte to its pre-branch state (228122fd), removing the CORS
surface the security review flagged entirely instead of narrowing it.

- desktop/src-tauri/src/media_proxy.rs: full revert — no ACAO headers,
  no is_webview_origin, original strict origin gate restored
- desktop/src-tauri/src/commands/media_download.rs: new
  fetch_media_bytes command reusing the existing download plumbing —
  validate_download_url SSRF check (relay origin + /media/ path only),
  50 MiB cap via fetch_blob_bytes, detect_and_validate_mime content
  policy; registered in lib.rs
- ComposerImageEditor.tsx: renderAnnotatedPng fetches original bytes
  over IPC, wraps them in a typed Blob, and decodes from a blob: URL
  (revoked in finally) — blob URLs are same-origin so the canvas stays
  un-tainted without crossOrigin="anonymous" or the ?cors=1
  cache-buster; takes new sourceUrl/sourceType props since the Rust
  command validates the raw relay URL, not the proxy-rewritten one
- ComposerAttachments.tsx: pass attachment.url and attachment.type to
  the editor alongside the proxy-rewritten display src
- tauriMedia.ts (new): fetchMediaBytes wrapper returning
  Uint8Array<ArrayBuffer> — its own module because tauri.ts is at the
  check-file-sizes.mjs line ceiling
- e2eBridge.ts: mock fetch_media_bytes with an in-page fetch (specs
  serve the URL via page.route)
- composer-image-draw.spec.ts: route comment updated — the ACAO header
  on the mock route now exists only for the bridge's in-page fetch,
  not the production path

Trade-offs: the export load skips WKWebView's HTTP cache (one extra
relay round-trip per save), and the avatar snapshot fetch in
selfProfileStorage.ts returns to its pre-branch silent-null fallback.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src-tauri/src/commands/media_download.rs  | 19 ++++
 desktop/src-tauri/src/lib.rs                  |  1 +
 desktop/src-tauri/src/media_proxy.rs          | 92 +------------------
 .../messages/ui/ComposerAttachments.tsx       |  2 +
 .../messages/ui/ComposerImageEditor.tsx       | 73 +++++++++------
 desktop/src/shared/api/tauriMedia.ts          | 16 ++++
 desktop/src/testing/e2eBridge.ts              |  7 ++
 desktop/tests/e2e/composer-image-draw.spec.ts | 10 +-
 8 files changed, 97 insertions(+), 123 deletions(-)
 create mode 100644 desktop/src/shared/api/tauriMedia.ts

diff --git a/desktop/src-tauri/src/commands/media_download.rs b/desktop/src-tauri/src/commands/media_download.rs
index c9ce4494e..760a133c2 100644
--- a/desktop/src-tauri/src/commands/media_download.rs
+++ b/desktop/src-tauri/src/commands/media_download.rs
@@ -129,6 +129,25 @@ pub async fn download_file(
     save_bytes_with_dialog(&app, &filename, "All Files", &extensions, &bytes).await
 }
 
+/// Fetch relay media bytes for the composer image editor.
+///
+/// The editor composites the image onto a canvas and needs pixel access.
+/// Handing the webview raw bytes over IPC (which it wraps in a same-origin
+/// `blob:` URL) keeps the canvas un-tainted without involving CORS — and
+/// therefore without any media-proxy header or origin-gate changes.
+///
+/// Same SSRF validation, size cap, and content policy as the download
+/// commands above.
+#[tauri::command]
+pub async fn fetch_media_bytes(url: String, state: State<'_, AppState>) -> Result<Vec<u8>, String> {
+    let relay_base = relay_api_base_url_with_override(&state);
+    validate_download_url(&url, &relay_base)?;
+
+    let bytes = fetch_blob_bytes(&url, &state).await?;
+    detect_and_validate_mime(&bytes)?;
+    Ok(bytes)
+}
+
 /// Fetch blob bytes from a (pre-validated) relay media URL through the app's
 /// HTTP client, enforcing the download size cap. The caller is responsible for
 /// validating the URL origin and for any content-type checks on the result.
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index 18c987c48..0f91a2826 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -505,6 +505,7 @@ pub fn run() {
             upload_media_bytes,
             download_image,
             download_file,
+            fetch_media_bytes,
             list_relay_members,
             get_my_relay_membership,
             add_relay_member,
diff --git a/desktop/src-tauri/src/media_proxy.rs b/desktop/src-tauri/src/media_proxy.rs
index 7567b5802..10a02d947 100644
--- a/desktop/src-tauri/src/media_proxy.rs
+++ b/desktop/src-tauri/src/media_proxy.rs
@@ -23,26 +23,6 @@ const MAX_PROXY_RESPONSE: u64 = 20 * 1024 * 1024;
 struct ProxyState {
     client: reqwest::Client,
     app_handle: tauri::AppHandle,
-    /// Exact `tauri dev` webview origin (from `build.devUrl`), accepted in
-    /// debug builds only. `None` in packaged builds.
-    dev_origin: Option<String>,
-}
-
-/// True when `origin` belongs to the Tauri webview itself: the custom-scheme
-/// origins of packaged builds, plus — in debug builds only — the exact
-/// `tauri dev` origin (`build.devUrl` from the merged Tauri config, e.g.
-/// `http://localhost:<per-worktree-port>`). Packaged builds accept only the
-/// custom-scheme origins: a blanket "any loopback origin" rule would let any
-/// local web page that discovers the proxy port make JS-readable requests to
-/// relay media.
-fn is_webview_origin(origin: &str, dev_origin: Option<&str>) -> bool {
-    if origin == "tauri://localhost" || origin == "http://tauri.localhost" {
-        return true;
-    }
-    if cfg!(debug_assertions) {
-        return dev_origin.is_some_and(|dev| origin == dev);
-    }
-    false
 }
 
 async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) -> Response {
@@ -54,7 +34,7 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
         .get("origin")
         .and_then(|v| v.to_str().ok())
         .unwrap_or("");
-    if !origin.is_empty() && !is_webview_origin(origin, state.dev_origin.as_deref()) {
+    if !origin.is_empty() && origin != "tauri://localhost" && origin != "http://tauri.localhost" {
         return (StatusCode::FORBIDDEN, "forbidden: invalid origin").into_response();
     }
 
@@ -115,19 +95,6 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
         }
     }
 
-    // CORS approval for `crossOrigin="anonymous"` media loads (the composer
-    // image editor needs them to keep the canvas un-tainted for `toBlob()`).
-    //
-    // This must be unconditional, not an echo of the request Origin: WKWebView
-    // omits the `Origin` header on CORS-mode image GETs (observed with the dev
-    // webview at `http://localhost:<port>`) while still enforcing this header
-    // on the response — so there is nothing to echo. `*` is valid because
-    // these loads are credential-less, and it grants nothing to foreign pages:
-    // any standards-following browser attaches `Origin` to cross-origin
-    // JS-readable requests, which the gate above rejects with 403 before this
-    // header matters.
-    headers.insert("access-control-allow-origin", HeaderValue::from_static("*"));
-
     // OOM guard for non-range full GETs (same 20 MB cap as the protocol handler).
     if !has_range {
         if let Some(cl) = headers.get("content-length") {
@@ -154,19 +121,9 @@ async fn proxy_handler(AxumState(state): AxumState<ProxyState>, req: Request) ->
 /// Tauri protocol handler's requirement to buffer the entire response into
 /// `Vec<u8>`. Returns the OS-assigned port.
 pub async fn spawn_media_proxy(http_client: reqwest::Client, app_handle: tauri::AppHandle) -> u16 {
-    // Origin form of `build.devUrl` (e.g. "http://localhost:1420"), only
-    // consulted by `is_webview_origin` in debug builds.
-    let dev_origin = app_handle
-        .config()
-        .build
-        .dev_url
-        .as_ref()
-        .map(|url| url.origin().ascii_serialization());
-
     let proxy_state = ProxyState {
         client: http_client,
         app_handle,
-        dev_origin,
     };
 
     let app = Router::new()
@@ -294,13 +251,9 @@ pub async fn handle_buzz_media(
 
             match resp.bytes().await {
                 Ok(bytes) => {
-                    // CORS approval for `crossOrigin="anonymous"` image loads
-                    // (composer canvas annotation). This custom scheme is only
-                    // reachable from our own webview, so "*" is safe.
                     let mut builder = http::Response::builder()
                         .status(status)
-                        .header("content-type", &content_type)
-                        .header("access-control-allow-origin", "*");
+                        .header("content-type", &content_type);
                     if let Some(ref cr) = content_range {
                         builder = builder.header("content-range", cr);
                     }
@@ -342,44 +295,3 @@ fn error_response(status: u16, msg: &str) -> http::Response<Vec<u8>> {
                 .unwrap()
         })
 }
-
-#[cfg(test)]
-mod tests {
-    use super::is_webview_origin;
-
-    #[test]
-    fn allows_packaged_webview_origins() {
-        assert!(is_webview_origin("tauri://localhost", None));
-        assert!(is_webview_origin("http://tauri.localhost", None));
-    }
-
-    #[test]
-    #[cfg(debug_assertions)]
-    fn allows_only_the_exact_dev_origin_in_debug_builds() {
-        let dev = Some("http://localhost:1420");
-        assert!(is_webview_origin("http://localhost:1420", dev));
-        // Other loopback origins are not the webview.
-        assert!(!is_webview_origin("http://localhost:47177", dev));
-        assert!(!is_webview_origin("http://127.0.0.1:1420", dev));
-        assert!(!is_webview_origin("http://localhost", dev));
-        assert!(!is_webview_origin("http://localhost:1420", None));
-    }
-
-    #[test]
-    #[cfg(not(debug_assertions))]
-    fn rejects_dev_origin_in_release_builds() {
-        let dev = Some("http://localhost:1420");
-        assert!(!is_webview_origin("http://localhost:1420", dev));
-        assert!(!is_webview_origin("http://127.0.0.1:4173", dev));
-    }
-
-    #[test]
-    fn rejects_remote_and_lookalike_origins() {
-        let dev = Some("http://localhost:1420");
-        assert!(!is_webview_origin("https://evil.example.com", dev));
-        assert!(!is_webview_origin("http://localhost.evil.com", dev));
-        assert!(!is_webview_origin("http://127.0.0.1.evil.com", dev));
-        assert!(!is_webview_origin("file://localhost", dev));
-        assert!(!is_webview_origin("null", dev));
-    }
-}
diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index a3df0a349..549677710 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -223,6 +223,8 @@ const MediaAttachmentItem = React.forwardRef<
                 <ComposerImageEditor
                   alt={`Attachment ${hash}`}
                   src={rewriteRelayUrl(attachment.url)}
+                  sourceUrl={attachment.url}
+                  sourceType={attachment.type}
                   onCancel={handleEditorCancel}
                   onSave={handleEditorSave}
                 />
diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
index 26f414a42..a9bfb3bfd 100644
--- a/desktop/src/features/messages/ui/ComposerImageEditor.tsx
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Loader2, Redo2, Undo2 } from "lucide-react";
 
+import { fetchMediaBytes } from "@/shared/api/tauriMedia";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
@@ -69,42 +70,54 @@ function drawSegment(
 
 /**
  * Composite the source image and strokes into a PNG at natural resolution.
- * Requires the media proxy to grant CORS (`crossOrigin="anonymous"`), else
- * the canvas is tainted and `toBlob` throws.
+ *
+ * The source bytes are fetched over Tauri IPC and wrapped in a `blob:` URL.
+ * Blob URLs are same-origin, so the canvas stays un-tainted and `toBlob`
+ * works without any CORS involvement (the media proxy sends no CORS
+ * headers, and cross-origin `crossOrigin="anonymous"` loads would need
+ * them).
  */
 async function renderAnnotatedPng(
-  src: string,
+  sourceUrl: string,
+  sourceType: string,
   strokes: EditorStroke[],
 ): Promise<Uint8Array> {
-  const image = new Image();
-  image.crossOrigin = "anonymous";
-  // Distinct cache key from the display <img> loads: relay media is cached
-  // as `immutable` for a year, and WKWebView may hold pre-CORS-fix entries
-  // (no access-control-allow-origin header) that would fail the CORS check
-  // without ever refetching. The extra param guarantees this CORS-mode load
-  // gets a response that carries the header; the relay ignores the query.
-  image.src = `${src}${src.includes("?") ? "&" : "?"}cors=1`;
-  await image.decode();
-
-  const canvas = document.createElement("canvas");
-  canvas.width = image.naturalWidth;
-  canvas.height = image.naturalHeight;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Canvas 2D context unavailable");
-  ctx.drawImage(image, 0, 0);
-  for (const stroke of strokes) drawStroke(ctx, stroke);
-
-  const blob = await new Promise<Blob | null>((resolve) => {
-    canvas.toBlob(resolve, "image/png");
-  });
-  if (!blob) throw new Error("PNG encoding failed");
-  return new Uint8Array(await blob.arrayBuffer());
+  const bytes = await fetchMediaBytes(sourceUrl);
+  // The explicit type matters: blob: image decoding is not content-sniffed
+  // for all formats, so an untyped blob may fail to decode.
+  const sourceBlob = new Blob([bytes], { type: sourceType });
+  const blobUrl = URL.createObjectURL(sourceBlob);
+  try {
+    const image = new Image();
+    image.src = blobUrl;
+    await image.decode();
+
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+    ctx.drawImage(image, 0, 0);
+    for (const stroke of strokes) drawStroke(ctx, stroke);
+
+    const blob = await new Promise<Blob | null>((resolve) => {
+      canvas.toBlob(resolve, "image/png");
+    });
+    if (!blob) throw new Error("PNG encoding failed");
+    return new Uint8Array(await blob.arrayBuffer());
+  } finally {
+    URL.revokeObjectURL(blobUrl);
+  }
 }
 
 type ComposerImageEditorProps = {
   alt: string;
-  /** Resolved (proxy-rewritten) image URL. */
+  /** Resolved (proxy-rewritten) image URL, for display. */
   src: string;
+  /** Original relay media URL — export fetches its bytes over IPC. */
+  sourceUrl: string;
+  /** MIME type of the source image (from the blob descriptor). */
+  sourceType: string;
   onCancel: () => void;
   /** Upload the annotated PNG; rejection keeps the editor open. */
   onSave: (bytes: Uint8Array) => Promise<void>;
@@ -119,6 +132,8 @@ type ComposerImageEditorProps = {
 export function ComposerImageEditor({
   alt,
   src,
+  sourceUrl,
+  sourceType,
   onCancel,
   onSave,
 }: ComposerImageEditorProps) {
@@ -268,14 +283,14 @@ export function ComposerImageEditor({
     setSaving(true);
     setSaveError(null);
     try {
-      const bytes = await renderAnnotatedPng(src, strokes);
+      const bytes = await renderAnnotatedPng(sourceUrl, sourceType, strokes);
       await onSave(bytes);
       // On success the parent closes the lightbox and unmounts this component.
     } catch {
       setSaveError("Could not save the drawing. Please try again.");
       setSaving(false);
     }
-  }, [onSave, saving, src, strokes]);
+  }, [onSave, saving, sourceType, sourceUrl, strokes]);
 
   const hasStrokes = strokes.length > 0;
 
diff --git a/desktop/src/shared/api/tauriMedia.ts b/desktop/src/shared/api/tauriMedia.ts
new file mode 100644
index 000000000..caee5106a
--- /dev/null
+++ b/desktop/src/shared/api/tauriMedia.ts
@@ -0,0 +1,16 @@
+import { invokeTauri } from "./tauri";
+
+/**
+ * Fetch relay media bytes over IPC (Rust reqwest, WARP-tunneled).
+ *
+ * Used by the composer image editor: wrapping the bytes in a same-origin
+ * `blob:` URL gives the canvas pixel access without CORS, so the media
+ * proxy needs no special headers. The Rust side enforces the same URL
+ * validation and size cap as the download commands.
+ */
+export async function fetchMediaBytes(
+  url: string,
+): Promise<Uint8Array<ArrayBuffer>> {
+  const bytes = await invokeTauri<number[]>("fetch_media_bytes", { url });
+  return new Uint8Array(bytes);
+}
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 3d248014c..11989c2fc 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -7998,6 +7998,13 @@ export function maybeInstallE2eTauriMocks() {
         return await resolveMockUploadDescriptors(activeConfig);
       case "upload_media_bytes":
         return (await resolveMockUploadDescriptors(activeConfig))[0];
+      case "fetch_media_bytes": {
+        // The real command fetches relay media through Rust reqwest. In E2E
+        // the browser fetch suffices — specs serve the URL via page.route.
+        const response = await fetch((payload as { url: string }).url);
+        if (!response.ok) throw new Error(`fetch failed: ${response.status}`);
+        return Array.from(new Uint8Array(await response.arrayBuffer()));
+      }
       case "download_image":
       case "download_file":
         // The save dialog can't run headlessly; report a successful save so the
diff --git a/desktop/tests/e2e/composer-image-draw.spec.ts b/desktop/tests/e2e/composer-image-draw.spec.ts
index 6bafea11f..1d573bcf7 100644
--- a/desktop/tests/e2e/composer-image-draw.spec.ts
+++ b/desktop/tests/e2e/composer-image-draw.spec.ts
@@ -28,10 +28,12 @@ const EDITED_DESCRIPTOR = {
 };
 
 /**
- * Serve deterministic same-size SVGs for both attachment URLs. The CORS
- * header matters: the editor re-loads the image with
- * `crossOrigin="anonymous"` to export an un-tainted canvas. The trailing
- * `*` also matches the editor's `?cors=1` cache-busting load.
+ * Serve deterministic same-size SVGs for both attachment URLs. These back
+ * the display <img> loads and the mock bridge's `fetch_media_bytes`
+ * handler (the editor exports via IPC bytes + blob: URL, so no CORS
+ * headers are needed). The CORS header is required only because the mock
+ * bridge's in-page `fetch()` of this cross-origin URL is CORS-mode —
+ * production fetches the bytes in Rust instead.
  */
 async function installImageRoutes(page: Page) {
   await page.route("https://example.com/e2e/draw-*.svg*", (route) => {

From 5925b66d0e74d9b35be94635c5de4c18e1833807 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Date: Fri, 3 Jul 2026 20:53:12 -0700
Subject: [PATCH 8/8] test(e2e): spoiler attachments per-attachment in the
 draw-survival spec

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/tests/e2e/composer-image-draw.spec.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/desktop/tests/e2e/composer-image-draw.spec.ts b/desktop/tests/e2e/composer-image-draw.spec.ts
index 1d573bcf7..ea0ce16c8 100644
--- a/desktop/tests/e2e/composer-image-draw.spec.ts
+++ b/desktop/tests/e2e/composer-image-draw.spec.ts
@@ -157,8 +157,12 @@ test("spoiler marking survives drawing on the attachment", async ({ page }) => {
   const composer = page.getByTestId("message-composer");
   await expect(composer.getByAltText("Attachment aaaa")).toBeVisible();
 
-  // Spoiler the attachment, then draw on it.
-  await page.getByRole("button", { name: "Spoiler", exact: true }).click();
+  // Spoiler the attachment from its lightbox (media spoilers are
+  // per-attachment; the text spoiler control no longer affects media),
+  // then draw on it.
+  await composer.getByAltText("Attachment aaaa").click();
+  await page.getByTestId("composer-attachment-spoiler").click();
+  await page.keyboard.press("Escape");
   await expect(composer.locator("[data-composer-media-spoiler]")).toBeVisible();
 
   await composer.getByAltText("Attachment aaaa").click();