From f32d8fda71e665ff463dafe6db3826d0420cc79b Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Date: Fri, 3 Jul 2026 00:39:08 -0700
Subject: [PATCH 1/5] feat(composer): split text and media spoiler controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the text spoiler toggle into the expanded formatting toolbar and
make it text-only — it no longer mirrors onto pending media
attachments. Media spoilers are now toggled per image/video via a new
control in the attachment lightbox's top-right cluster, next to the
close button and backed by the existing per-URL spoilered set.

The lightbox toggle is placed left of where the upcoming image
edit/draw control (PR #1488) will sit, with a note to hide it while
edit mode is active once that feature lands.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../messages/ui/ComposerAttachments.tsx       | 61 +++++++++++++++-
 .../messages/ui/FormattingToolbar.tsx         | 36 ++++++----
 .../features/messages/ui/MessageComposer.tsx  | 49 ++++---------
 .../messages/ui/MessageComposerToolbar.tsx    | 70 +------------------
 desktop/src/shared/ui/SimpleImageLightbox.tsx | 41 ++++++-----
 desktop/tests/e2e/spoiler.spec.ts             | 28 ++++++--
 6 files changed, 142 insertions(+), 143 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index e40ede5730..261960cb76 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -11,6 +11,7 @@ import {
 import { cn } from "@/shared/lib/cn";
 import { SimpleImageLightbox } from "@/shared/ui/SimpleImageLightbox";
 import { Progress } from "@/shared/ui/progress";
+import { Toggle } from "@/shared/ui/toggle";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 
 /** Dashed-border overlay shown when a file is dragged over the composer form. */
@@ -36,9 +37,13 @@ type ComposerAttachmentsProps = {
   uploadingCount?: number;
   uploadingPreviews?: UploadingAttachmentPreview[];
   onRemove: (url: string) => void;
+  onToggleSpoiler?: (url: string) => void;
   spoileredUrls?: ReadonlySet<string>;
 };
 
+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";
+
 const COMPOSER_MEDIA_HEIGHT_PX = 55;
 const COMPOSER_MEDIA_WIDTH_PX = 55;
 
@@ -61,6 +66,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
   uploadingPreviews = [],
   onCancelUpload,
   onRemove,
+  onToggleSpoiler,
   spoileredUrls,
 }: ComposerAttachmentsProps) {
   if (attachments.length === 0 && !isUploading) return null;
@@ -151,6 +157,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
                   isSpoilered={isSpoilered}
                   isVideo={isVideo}
                   mediaStyle={mediaStyle}
+                  onToggleSpoiler={onToggleSpoiler}
                   thumbUrl={thumbUrl}
                   url={attachment.url}
                   videoPosterUrl={videoPosterUrl ?? null}
@@ -239,6 +246,7 @@ function AttachmentMediaLightbox({
   isSpoilered,
   isVideo,
   mediaStyle,
+  onToggleSpoiler,
   thumbUrl,
   url,
   videoPosterUrl,
@@ -248,6 +256,7 @@ function AttachmentMediaLightbox({
   isSpoilered: boolean;
   isVideo: boolean;
   mediaStyle: React.CSSProperties;
+  onToggleSpoiler?: (url: string) => void;
   thumbUrl: string;
   url: string;
   videoPosterUrl: string | null;
@@ -299,15 +308,63 @@ function AttachmentMediaLightbox({
         onOpenChange={setLightboxOpen}
         open={lightboxOpen}
         src={previewSrc}
+        actions={
+          // Hide this alongside image-edit mode once the annotation flow lands.
+          onToggleSpoiler ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Toggle
+                  aria-label={
+                    isSpoilered ? "Remove spoiler" : "Mark as spoiler"
+                  }
+                  className={cn(LIGHTBOX_BUTTON_CLASS, "h-auto min-w-0")}
+                  data-testid="composer-attachment-spoiler"
+                  onPressedChange={() => onToggleSpoiler(url)}
+                  pressed={isSpoilered}
+                >
+                  <HatGlasses className="h-4 w-4" />
+                </Toggle>
+              </TooltipTrigger>
+              <TooltipContent>
+                {isSpoilered ? "Remove spoiler" : "Mark as spoiler"}
+              </TooltipContent>
+            </Tooltip>
+          ) : null
+        }
       >
         {isVideo ? (
           // biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available
           <video
-            className="relative max-h-[90vh] max-w-[90vw] rounded-lg"
+            className={cn(
+              "relative max-h-[90vh] max-w-[90vw] rounded-lg",
+              isSpoilered && "blur-2xl brightness-75",
+            )}
             controls
             src={previewSrc}
           />
-        ) : undefined}
+        ) : (
+          <img
+            alt={alt}
+            className={cn(
+              "relative max-h-[90vh] max-w-[90vw] rounded-lg object-contain",
+              isSpoilered && "blur-2xl brightness-75",
+            )}
+            src={previewSrc}
+          />
+        )}
+        {isSpoilered ? (
+          /*
+           * Expanded-media counterpart of the thumbnail spoiler treatment: the
+           * media itself is blurred above, and this layer centers the spoiler
+           * glyph. pointer-events-none keeps controls and backdrop-close clickable.
+           */
+          <div
+            className="pointer-events-none absolute inset-0 flex items-center justify-center text-foreground/70"
+            data-lightbox-media-spoiler=""
+          >
+            <HatGlasses className="h-10 w-10" />
+          </div>
+        ) : null}
       </SimpleImageLightbox>
     </div>
   );
diff --git a/desktop/src/features/messages/ui/FormattingToolbar.tsx b/desktop/src/features/messages/ui/FormattingToolbar.tsx
index 63d41145e6..49eba3fa01 100644
--- a/desktop/src/features/messages/ui/FormattingToolbar.tsx
+++ b/desktop/src/features/messages/ui/FormattingToolbar.tsx
@@ -3,6 +3,7 @@ import type { Editor } from "@tiptap/react";
 import {
   Bold,
   Code,
+  HatGlasses,
   Italic,
   Link,
   List,
@@ -28,11 +29,6 @@ type FormattingToolbarProps = {
   onLinkButton?: () => void;
 };
 
-export type SpoilerToggleState = {
-  emptySelection: boolean;
-  nextSpoilered?: boolean;
-};
-
 type ActiveStates = {
   bold: boolean;
   italic: boolean;
@@ -43,6 +39,7 @@ type ActiveStates = {
   bulletList: boolean;
   orderedList: boolean;
   blockquote: boolean;
+  spoiler: boolean;
 };
 
 function getActiveStates(editor: Editor): ActiveStates {
@@ -56,6 +53,7 @@ function getActiveStates(editor: Editor): ActiveStates {
     bulletList: editor.isActive("bulletList"),
     orderedList: editor.isActive("orderedList"),
     blockquote: editor.isActive("blockquote"),
+    spoiler: isSpoilerFormattingActive(editor),
   };
 }
 
@@ -77,12 +75,17 @@ function documentRangeForEmptySelection(editor: Editor): {
   return from < to ? { from, to } : null;
 }
 
-export function toggleSpoilerFormatting(editor: Editor): SpoilerToggleState {
-  const emptySelection = editor.state.selection.empty;
+/**
+ * Toggles the text spoiler mark. With a selection, toggles the mark on the
+ * selected range; with an empty selection, applies/removes spoiler across the
+ * whole document. Text-only — media spoilers are toggled per-attachment in
+ * the attachment lightbox.
+ */
+export function toggleSpoilerFormatting(editor: Editor): void {
   const range = documentRangeForEmptySelection(editor);
   if (!range) {
     editor.chain().focus().toggleMark(SPOILER_MARK_NAME).run();
-    return { emptySelection };
+    return;
   }
 
   const cursorPosition = editor.state.selection.from;
@@ -94,16 +97,14 @@ export function toggleSpoilerFormatting(editor: Editor): SpoilerToggleState {
   );
   if (rangeSpoilerState === "no-markable-content") {
     chain.setTextSelection(cursorPosition).run();
-    return { emptySelection };
+    return;
   }
 
-  const nextSpoilered = rangeSpoilerState !== "fully-spoiled";
-  if (nextSpoilered) {
+  if (rangeSpoilerState !== "fully-spoiled") {
     chain.setMark(SPOILER_MARK_NAME).setTextSelection(cursorPosition).run();
   } else {
     chain.unsetMark(SPOILER_MARK_NAME).setTextSelection(cursorPosition).run();
   }
-  return { emptySelection, nextSpoilered };
 }
 
 /**
@@ -202,6 +203,11 @@ export const FormattingToolbar = React.memo(function FormattingToolbar({
     editor?.chain().focus().toggleBlockquote().run();
   }, [editor]);
 
+  const toggleSpoiler = React.useCallback(() => {
+    if (!editor) return;
+    toggleSpoilerFormatting(editor);
+  }, [editor]);
+
   if (!editor || !activeStates) return null;
 
   const items = [
@@ -264,6 +270,12 @@ export const FormattingToolbar = React.memo(function FormattingToolbar({
       action: toggleBlockquote,
       active: activeStates.blockquote,
     },
+    {
+      icon: HatGlasses,
+      label: "Spoiler",
+      action: toggleSpoiler,
+      active: activeStates.spoiler,
+    },
   ] as const;
 
   return (
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index f30d039ff2..54636c6139 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -805,41 +805,17 @@ function MessageComposerImpl({
     [media.removeAttachment],
   );
 
-  const handleComposerSpoilerToggle = React.useCallback(
-    ({
-      emptySelection,
-      nextSpoilered,
-    }: {
-      emptySelection: boolean;
-      nextSpoilered?: boolean;
-    }) => {
-      if (!emptySelection) return;
-
-      const mediaUrls = media.pendingImetaRef.current
-        .filter(
-          (attachment) =>
-            attachment.type.startsWith("image/") ||
-            attachment.type.startsWith("video/"),
-        )
-        .map((attachment) => attachment.url);
-      if (mediaUrls.length === 0) return;
-
-      setSpoileredAttachmentUrls((current) => {
-        const shouldSpoiler =
-          nextSpoilered ?? mediaUrls.some((url) => !current.has(url));
-        const next = new Set(current);
-        for (const url of mediaUrls) {
-          if (shouldSpoiler) {
-            next.add(url);
-          } else {
-            next.delete(url);
-          }
-        }
-        return next;
-      });
-    },
-    [media.pendingImetaRef],
-  );
+  const handleToggleAttachmentSpoiler = React.useCallback((url: string) => {
+    setSpoileredAttachmentUrls((current) => {
+      const next = new Set(current);
+      if (next.has(url)) {
+        next.delete(url);
+      } else {
+        next.add(url);
+      }
+      return next;
+    });
+  }, []);
 
   return (
     <>
@@ -925,6 +901,7 @@ function MessageComposerImpl({
                   uploadingCount={media.uploadingCount}
                   uploadingPreviews={media.uploadingPreviews}
                   onRemove={handleRemoveAttachment}
+                  onToggleSpoiler={handleToggleAttachmentSpoiler}
                   spoileredUrls={spoileredAttachmentUrls}
                 />
               </div>
@@ -956,9 +933,7 @@ function MessageComposerImpl({
               onLinkButton={linkEditor.openFromToolbar}
               onOpenMentionPicker={openMentionPicker}
               onPaperclip={handlePaperclipClick}
-              onSpoilerToggle={handleComposerSpoilerToggle}
               sendDisabled={sendDisabled}
-              spoilerActive={spoileredAttachmentUrls.size > 0}
             />
           </form>
         </div>
diff --git a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
index 6da440c11a..7804e8fe98 100644
--- a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
+++ b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
@@ -1,25 +1,12 @@
 import * as React from "react";
 import type { Editor } from "@tiptap/react";
 import { AnimatePresence, motion } from "motion/react";
-import {
-  ALargeSmall,
-  ArrowUp,
-  AtSign,
-  HatGlasses,
-  Paperclip,
-  X,
-} from "lucide-react";
+import { ALargeSmall, ArrowUp, AtSign, Paperclip, X } from "lucide-react";
 
 import { Button } from "@/shared/ui/button";
-import { cn } from "@/shared/lib/cn";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import { ComposerEmojiPicker } from "./ComposerEmojiPicker";
-import {
-  FormattingToolbar,
-  isSpoilerFormattingActive,
-  type SpoilerToggleState,
-  toggleSpoilerFormatting,
-} from "./FormattingToolbar";
+import { FormattingToolbar } from "./FormattingToolbar";
 import { SelectionFormattingTray } from "./SelectionFormattingTray";
 
 /** Spring for enter/exit of button groups — all fire simultaneously. */
@@ -46,9 +33,7 @@ export const MessageComposerToolbar = React.memo(
     onLinkButton,
     onOpenMentionPicker,
     onPaperclip,
-    onSpoilerToggle,
     sendDisabled,
-    spoilerActive,
   }: {
     composerDisabled: boolean;
     editor: Editor | null;
@@ -65,38 +50,8 @@ export const MessageComposerToolbar = React.memo(
     onLinkButton: () => void;
     onOpenMentionPicker: () => void;
     onPaperclip: () => void;
-    onSpoilerToggle?: (state: SpoilerToggleState) => void;
     sendDisabled: boolean;
-    spoilerActive?: boolean;
   }) {
-    const [spoilerFormattingActive, setSpoilerFormattingActive] =
-      React.useState(() =>
-        editor ? isSpoilerFormattingActive(editor) : false,
-      );
-
-    React.useEffect(() => {
-      if (!editor) {
-        setSpoilerFormattingActive(false);
-        return;
-      }
-
-      const update = () => {
-        setSpoilerFormattingActive(isSpoilerFormattingActive(editor));
-      };
-      update();
-      editor.on("transaction", update);
-      return () => {
-        editor.off("transaction", update);
-      };
-    }, [editor]);
-
-    const isSpoilerActive = spoilerFormattingActive || Boolean(spoilerActive);
-
-    const handleSpoilerClick = React.useCallback(() => {
-      if (!editor) return;
-      onSpoilerToggle?.(toggleSpoilerFormatting(editor));
-    }, [editor, onSpoilerToggle]);
-
     return (
       <div className="mt-2 flex flex-wrap items-center justify-between gap-3">
         <SelectionFormattingTray
@@ -244,27 +199,6 @@ export const MessageComposerToolbar = React.memo(
                   onTriggerMouseDown={onCaptureSelection}
                   open={isEmojiPickerOpen}
                 />
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      aria-label="Spoiler"
-                      aria-pressed={isSpoilerActive}
-                      className={cn(
-                        isSpoilerActive &&
-                          "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
-                      )}
-                      disabled={composerDisabled || !editor || isUploading}
-                      onClick={handleSpoilerClick}
-                      onMouseDown={onCaptureSelection}
-                      size="icon"
-                      type="button"
-                      variant={isSpoilerActive ? "default" : "ghost"}
-                    >
-                      <HatGlasses />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Spoiler</TooltipContent>
-                </Tooltip>
                 <motion.div
                   initial={{ x: -8, opacity: 0 }}
                   animate={{ x: 0, opacity: 1 }}
diff --git a/desktop/src/shared/ui/SimpleImageLightbox.tsx b/desktop/src/shared/ui/SimpleImageLightbox.tsx
index ca8be5b05d..aa1b0741d8 100644
--- a/desktop/src/shared/ui/SimpleImageLightbox.tsx
+++ b/desktop/src/shared/ui/SimpleImageLightbox.tsx
@@ -5,12 +5,14 @@ import { cn } from "@/shared/lib/cn";
 import { MODAL_BACKDROP_BLUR_CLASS } from "@/shared/ui/modalBackdrop";
 
 export function SimpleImageLightbox({
+  actions,
   alt,
   children,
   onOpenChange,
   open,
   src,
 }: {
+  actions?: React.ReactNode;
   alt: string;
   children?: React.ReactNode;
   onOpenChange: (open: boolean) => void;
@@ -49,24 +51,27 @@ export function SimpleImageLightbox({
               src={src}
             />
           )}
-          <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">
-            <svg
-              aria-hidden="true"
-              fill="none"
-              height="20"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M18 6L6 18M6 6l12 12"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-              />
-            </svg>
-          </DialogPrimitive.Close>
+          <div className="absolute right-4 top-4 flex items-center gap-2">
+            {actions}
+            <DialogPrimitive.Close className="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">
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18 6L6 18M6 6l12 12"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                />
+              </svg>
+            </DialogPrimitive.Close>
+          </div>
         </DialogPrimitive.Content>
       </DialogPrimitive.Portal>
     </DialogPrimitive.Root>
diff --git a/desktop/tests/e2e/spoiler.spec.ts b/desktop/tests/e2e/spoiler.spec.ts
index 11a336f3e1..b7b6726980 100644
--- a/desktop/tests/e2e/spoiler.spec.ts
+++ b/desktop/tests/e2e/spoiler.spec.ts
@@ -71,6 +71,7 @@ test("no-selection spoiler applies to every composer paragraph", async ({
   await page.keyboard.press("ControlOrMeta+V");
   await expect(input.locator("p")).toHaveCount(paragraphs.length);
 
+  await page.getByRole("button", { name: "Toggle formatting" }).click();
   await page.getByRole("button", { name: "Spoiler", exact: true }).click();
 
   await expect
@@ -100,7 +101,10 @@ test("image attachments can be marked and sent as hidden spoilers", async ({
   const composer = page.getByTestId("message-composer");
   await expect(composer.getByAltText("Attachment cccc")).toBeVisible();
 
-  await page.getByRole("button", { name: "Spoiler", exact: true }).click();
+  // Media spoilers are toggled per-attachment from the lightbox.
+  await composer.getByAltText("Attachment cccc").click();
+  await page.getByTestId("composer-attachment-spoiler").click();
+  await page.keyboard.press("Escape");
   await expect(composer.locator("[data-composer-media-spoiler]")).toBeVisible();
 
   await page.getByTestId("send-message").click();
@@ -119,7 +123,7 @@ test("image attachments can be marked and sent as hidden spoilers", async ({
   await expect(page.getByRole("dialog", { name: "image" })).toHaveCount(0);
 });
 
-test("spoiler button is disabled while attachment upload is pending", async ({
+test("text spoiler stays usable while attachment upload is pending", async ({
   page,
 }) => {
   await installSpoilerBridge(page, { uploadDelayMs: 1_000 });
@@ -127,19 +131,31 @@ test("spoiler button is disabled while attachment upload is pending", async ({
   await page.getByTestId("channel-general").click();
   await expect(page.getByTestId("chat-title")).toHaveText("general");
 
+  const input = page.getByTestId("message-input");
+  await input.click();
+  await page.keyboard.type("pending secret");
+
+  // Kick off the (delayed) upload first — the attach button lives in the
+  // passive toolbar, which is replaced while formatting is expanded.
+  await page.getByRole("button", { name: "Attach image" }).click();
+
+  await page.getByRole("button", { name: "Toggle formatting" }).click();
   const spoilerButton = page.getByRole("button", {
     name: "Spoiler",
     exact: true,
   });
-  await expect(spoilerButton).toBeEnabled();
 
-  await page.getByRole("button", { name: "Attach image" }).click();
+  // Text spoilers are independent of media uploads, so the button stays
+  // enabled and works while the upload is still in flight.
+  await expect(spoilerButton).toBeEnabled();
+  await spoilerButton.click();
+  await expect(input.locator(".buzz-spoiler[data-spoiler]")).toContainText(
+    "pending secret",
+  );
 
-  await expect(spoilerButton).toBeDisabled({ timeout: 500 });
   await expect(
     page.getByTestId("message-composer").getByAltText("Attachment cccc"),
   ).toBeVisible();
-  await expect(spoilerButton).toBeEnabled();
 });
 
 test("hidden spoiler links reveal without opening on the first click", async ({

From 522113ed84b179c94b901cc21e154ec6c1011b39 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Fri, 3 Jul 2026 20:54:03 -0700
Subject: [PATCH 2/5] feat(uploads) add image annotation tools to composer
 uploads (#1488)

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/playwright.config.ts                  |   1 +
 .../src-tauri/src/commands/media_download.rs  |  19 +
 desktop/src-tauri/src/lib.rs                  |   1 +
 .../forum/ui/ForumComposerMediaStatus.tsx     |  15 +
 .../messages/lib/useAttachmentEditing.ts      |  53 ++
 .../features/messages/lib/useMediaUpload.ts   | 118 +++++
 .../messages/ui/ComposerAttachments.tsx       | 499 ++++++++++++------
 .../messages/ui/ComposerImageEditor.tsx       | 465 ++++++++++++++++
 .../features/messages/ui/MessageComposer.tsx  |  11 +
 desktop/src/shared/api/tauriMedia.ts          |  16 +
 desktop/src/testing/e2eBridge.ts              |   7 +
 desktop/tests/e2e/composer-image-draw.spec.ts | 189 +++++++
 12 files changed, 1218 insertions(+), 176 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/src/shared/api/tauriMedia.ts
 create mode 100644 desktop/tests/e2e/composer-image-draw.spec.ts

diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 3b5f35d990..1c21176f0c 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/commands/media_download.rs b/desktop/src-tauri/src/commands/media_download.rs
index c9ce4494ea..760a133c22 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 93424cd0ff..039e9d4eea 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -513,6 +513,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/features/forum/ui/ForumComposerMediaStatus.tsx b/desktop/src/features/forum/ui/ForumComposerMediaStatus.tsx
index abdf0f38e1..3a245bdfce 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 0000000000..084ef39c4c
--- /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 994e0fa0ce..06be653e6a 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 261960cb76..4631e82dfb 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { AnimatePresence, LayoutGroup, motion } from "motion/react";
-import { FileText, HatGlasses, Play, X } from "lucide-react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { FileText, HatGlasses, Pencil, Play, X } from "lucide-react";
 
 import type { BlobDescriptor } from "@/shared/api/tauri";
 import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
@@ -9,10 +10,12 @@ import {
   type UploadingAttachmentPreview,
 } from "@/features/messages/lib/useMediaUpload";
 import { cn } from "@/shared/lib/cn";
-import { SimpleImageLightbox } from "@/shared/ui/SimpleImageLightbox";
+import { Button } from "@/shared/ui/button";
+import { MODAL_BACKDROP_BLUR_CLASS } from "@/shared/ui/modalBackdrop";
 import { Progress } from "@/shared/ui/progress";
 import { Toggle } from "@/shared/ui/toggle";
 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 +39,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>;
   onToggleSpoiler?: (url: string) => void;
   spoileredUrls?: ReadonlySet<string>;
 };
@@ -54,6 +63,300 @@ function composerMediaStyle(): React.CSSProperties {
   };
 }
 
+type MediaAttachmentItemProps = {
+  attachment: BlobDescriptor;
+  isSpoilered: boolean;
+  onEditSave?: (url: string, bytes: Uint8Array) => Promise<void>;
+  onRemove: (url: string) => void;
+  onRevert?: (url: string) => void;
+  onToggleSpoiler?: (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. 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.
+ */
+const MediaAttachmentItem = React.forwardRef<
+  HTMLDivElement,
+  MediaAttachmentItemProps
+>(function MediaAttachmentItem(
+  {
+    attachment,
+    isSpoilered,
+    onEditSave,
+    onRemove,
+    onRevert,
+    onToggleSpoiler,
+    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);
+      // 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],
+  );
+
+  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)}
+                  sourceUrl={attachment.url}
+                  sourceType={attachment.type}
+                  onCancel={handleEditorCancel}
+                  onSave={handleEditorSave}
+                />
+              ) : isVideo ? (
+                // biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available
+                <video
+                  src={rewriteRelayUrl(attachment.url)}
+                  controls
+                  className={cn(
+                    "relative max-h-[90vh] max-w-[90vw] rounded-lg",
+                    isSpoilered && "blur-2xl brightness-75",
+                  )}
+                />
+              ) : (
+                <img
+                  alt={`Attachment ${hash}`}
+                  className={cn(
+                    "relative max-h-[90vh] max-w-[90vw] rounded-lg object-contain",
+                    isSpoilered && "blur-2xl brightness-75",
+                  )}
+                  src={rewriteRelayUrl(attachment.url)}
+                />
+              )}
+              {mode === "view" && isSpoilered ? (
+                /*
+                 * Expanded-media counterpart of the thumbnail spoiler treatment:
+                 * the media itself is blurred above, and this layer centers the
+                 * spoiler glyph. pointer-events-none keeps controls and
+                 * backdrop-close clickable.
+                 */
+                <div
+                  className="pointer-events-none absolute inset-0 flex items-center justify-center text-foreground/70"
+                  data-lightbox-media-spoiler=""
+                >
+                  <HatGlasses className="h-10 w-10" />
+                </div>
+              ) : null}
+              {mode === "view" ? (
+                <div className="absolute right-4 top-4 flex items-center gap-2">
+                  {canRevert ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          data-testid="composer-attachment-revert"
+                          onClick={handleRevert}
+                          size="sm"
+                          type="button"
+                        >
+                          Revert
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Revert to original</TooltipContent>
+                    </Tooltip>
+                  ) : null}
+                  {onToggleSpoiler ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Toggle
+                          aria-label={
+                            isSpoilered ? "Remove spoiler" : "Mark as spoiler"
+                          }
+                          className={cn(
+                            LIGHTBOX_BUTTON_CLASS,
+                            "h-auto min-w-0",
+                          )}
+                          data-testid="composer-attachment-spoiler"
+                          onPressedChange={() =>
+                            onToggleSpoiler(attachment.url)
+                          }
+                          pressed={isSpoilered}
+                        >
+                          <HatGlasses className="h-4 w-4" />
+                        </Toggle>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {isSpoilered ? "Remove spoiler" : "Mark as spoiler"}
+                      </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
@@ -65,7 +368,10 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
   uploadingCount = 0,
   uploadingPreviews = [],
   onCancelUpload,
+  onEditSave,
   onRemove,
+  onRevert,
+  originalUrlByUrl,
   onToggleSpoiler,
   spoileredUrls,
 }: ComposerAttachmentsProps) {
@@ -91,16 +397,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).
@@ -119,7 +415,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}
@@ -141,40 +437,21 @@ 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"
-              >
-                <AttachmentMediaLightbox
-                  alt={`Attachment ${hash} preview`}
-                  hash={hash}
-                  isSpoilered={isSpoilered}
-                  isVideo={isVideo}
-                  mediaStyle={mediaStyle}
-                  onToggleSpoiler={onToggleSpoiler}
-                  thumbUrl={thumbUrl}
-                  url={attachment.url}
-                  videoPosterUrl={videoPosterUrl ?? null}
-                />
-                <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>
-              </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}
+                onToggleSpoiler={onToggleSpoiler}
+                originalUrl={originalUrl}
+              />
             );
           })}
           {isUploading &&
@@ -239,133 +516,3 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
     </LayoutGroup>
   );
 });
-
-function AttachmentMediaLightbox({
-  alt,
-  hash,
-  isSpoilered,
-  isVideo,
-  mediaStyle,
-  onToggleSpoiler,
-  thumbUrl,
-  url,
-  videoPosterUrl,
-}: {
-  alt: string;
-  hash: string;
-  isSpoilered: boolean;
-  isVideo: boolean;
-  mediaStyle: React.CSSProperties;
-  onToggleSpoiler?: (url: string) => void;
-  thumbUrl: string;
-  url: string;
-  videoPosterUrl: string | null;
-}) {
-  const [lightboxOpen, setLightboxOpen] = React.useState(false);
-  const previewSrc = rewriteRelayUrl(url);
-
-  return (
-    <div className="relative h-[55px] max-w-[55px]" style={mediaStyle}>
-      <button
-        className="h-full w-full cursor-pointer overflow-hidden rounded-2xl border border-border/70"
-        onClick={() => setLightboxOpen(true)}
-        type="button"
-      >
-        {isVideo ? (
-          <div className="relative flex h-full w-full items-center justify-center bg-muted text-white">
-            {videoPosterUrl ? (
-              <img
-                alt={`Video attachment ${hash}`}
-                className="h-full w-full object-cover"
-                src={videoPosterUrl}
-              />
-            ) : (
-              <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
-            alt={`Attachment ${hash}`}
-            className="h-full w-full object-cover"
-            src={thumbUrl}
-          />
-        )}
-        {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}
-      </button>
-      <SimpleImageLightbox
-        alt={alt}
-        onOpenChange={setLightboxOpen}
-        open={lightboxOpen}
-        src={previewSrc}
-        actions={
-          // Hide this alongside image-edit mode once the annotation flow lands.
-          onToggleSpoiler ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Toggle
-                  aria-label={
-                    isSpoilered ? "Remove spoiler" : "Mark as spoiler"
-                  }
-                  className={cn(LIGHTBOX_BUTTON_CLASS, "h-auto min-w-0")}
-                  data-testid="composer-attachment-spoiler"
-                  onPressedChange={() => onToggleSpoiler(url)}
-                  pressed={isSpoilered}
-                >
-                  <HatGlasses className="h-4 w-4" />
-                </Toggle>
-              </TooltipTrigger>
-              <TooltipContent>
-                {isSpoilered ? "Remove spoiler" : "Mark as spoiler"}
-              </TooltipContent>
-            </Tooltip>
-          ) : null
-        }
-      >
-        {isVideo ? (
-          // biome-ignore lint/a11y/useMediaCaption: user-uploaded video, no captions available
-          <video
-            className={cn(
-              "relative max-h-[90vh] max-w-[90vw] rounded-lg",
-              isSpoilered && "blur-2xl brightness-75",
-            )}
-            controls
-            src={previewSrc}
-          />
-        ) : (
-          <img
-            alt={alt}
-            className={cn(
-              "relative max-h-[90vh] max-w-[90vw] rounded-lg object-contain",
-              isSpoilered && "blur-2xl brightness-75",
-            )}
-            src={previewSrc}
-          />
-        )}
-        {isSpoilered ? (
-          /*
-           * Expanded-media counterpart of the thumbnail spoiler treatment: the
-           * media itself is blurred above, and this layer centers the spoiler
-           * glyph. pointer-events-none keeps controls and backdrop-close clickable.
-           */
-          <div
-            className="pointer-events-none absolute inset-0 flex items-center justify-center text-foreground/70"
-            data-lightbox-media-spoiler=""
-          >
-            <HatGlasses className="h-10 w-10" />
-          </div>
-        ) : null}
-      </SimpleImageLightbox>
-    </div>
-  );
-}
diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
new file mode 100644
index 0000000000..a9bfb3bfd1
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -0,0 +1,465 @@
+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";
+
+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;
+
+/** 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;
+  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.
+ *
+ * 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(
+  sourceUrl: string,
+  sourceType: string,
+  strokes: EditorStroke[],
+): Promise<Uint8Array> {
+  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, 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>;
+};
+
+/**
+ * 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,
+  sourceUrl,
+  sourceType,
+  onCancel,
+  onSave,
+}: ComposerImageEditorProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const activeStrokeRef = React.useRef<EditorStroke | null>(null);
+  // 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,
+  );
+  const [activeWidthCss, setActiveWidthCss] = React.useState<number>(
+    PEN_WIDTH_DEFAULT_CSS,
+  );
+  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(() => {
+    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 isModZ =
+        (event.metaKey || event.ctrlKey) &&
+        !event.altKey &&
+        event.key.toLowerCase() === "z";
+      if (!isModZ) return;
+      event.preventDefault();
+      if (event.shiftKey) {
+        redo();
+      } else {
+        undo();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [redo, 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;
+    // A new stroke invalidates the redo stack, matching editor conventions.
+    setHistory((prev) => ({ strokes: [...prev.strokes, stroke], undone: [] }));
+  }, []);
+
+  const handleSave = React.useCallback(async () => {
+    if (saving || strokes.length === 0) return;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      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, sourceType, sourceUrl, strokes]);
+
+  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="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-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>
+
+      <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="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>
+
+          <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="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
+          className="text-white hover:bg-white/10 hover:text-white"
+          disabled={saving}
+          onClick={onCancel}
+          size="sm"
+          type="button"
+          variant="ghost"
+        >
+          Cancel
+        </Button>
+        <Button
+          data-testid="composer-image-editor-save"
+          disabled={saving || !hasStrokes}
+          onClick={() => void handleSave()}
+          size="sm"
+          type="button"
+        >
+          {saving ? <Loader2 className="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 54636c6139..14f64714d9 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 handleToggleAttachmentSpoiler = React.useCallback((url: string) => {
     setSpoileredAttachmentUrls((current) => {
       const next = new Set(current);
@@ -900,7 +908,10 @@ function MessageComposerImpl({
                   onCancelUpload={media.cancelUpload}
                   uploadingCount={media.uploadingCount}
                   uploadingPreviews={media.uploadingPreviews}
+                  onEditSave={handleAttachmentEditSave}
                   onRemove={handleRemoveAttachment}
+                  onRevert={handleAttachmentRevert}
+                  originalUrlByUrl={media.originalUrlByUrl}
                   onToggleSpoiler={handleToggleAttachmentSpoiler}
                   spoileredUrls={spoileredAttachmentUrls}
                 />
diff --git a/desktop/src/shared/api/tauriMedia.ts b/desktop/src/shared/api/tauriMedia.ts
new file mode 100644
index 0000000000..caee5106a9
--- /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 05b2ef8828..0f7608e754 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -8309,6 +8309,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
new file mode 100644
index 0000000000..ea0ce16c88
--- /dev/null
+++ b/desktop/tests/e2e/composer-image-draw.spec.ts
@@ -0,0 +1,189 @@
+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. 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) => {
+    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();
+
+  // 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(
+    () =>
+      (
+        window as Window & { __BUZZ_E2E_COMMANDS__?: string[] }
+      ).__BUZZ_E2E_COMMANDS__?.filter(
+        (command) => command === "upload_media_bytes",
+      ).length ?? 0,
+  );
+  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();
+  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 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();
+  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();
+
+  // 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();
+  await expect(composer.locator("[data-composer-media-spoiler]")).toBeVisible();
+});

From 8d395d3cdf4390a9b26cca50abbb5976835fc46f Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Fri, 3 Jul 2026 20:59:42 -0700
Subject: [PATCH 3/5] fix(composer): make composer tooltips click-through and
 non-persistent (#1272)

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
---
 desktop/playwright.config.ts                  |  1 +
 .../messages/ui/ComposerAttachments.tsx       | 12 +--
 .../messages/ui/ComposerEmojiPicker.tsx       |  2 +-
 .../messages/ui/ComposerImageEditor.tsx       |  4 +-
 .../messages/ui/FormattingToolbar.tsx         |  2 +-
 .../messages/ui/MessageComposerToolbar.tsx    | 18 ++--
 .../e2e/composer-tooltip-dismiss.spec.ts      | 82 +++++++++++++++++++
 7 files changed, 106 insertions(+), 15 deletions(-)
 create mode 100644 desktop/tests/e2e/composer-tooltip-dismiss.spec.ts

diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 1c21176f0c..98e63a8d4c 100644
--- a/desktop/playwright.config.ts
+++ b/desktop/playwright.config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
         "**/composer-image-draw.spec.ts",
         "**/video-attachment.spec.ts",
         "**/spoiler.spec.ts",
+        "**/composer-tooltip-dismiss.spec.ts",
         "**/mentions.spec.ts",
         "**/relay-reconnect.spec.ts",
         "**/relay-reconnect-affordance.spec.ts",
diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index 4631e82dfb..ded7ca9d21 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -276,7 +276,7 @@ const MediaAttachmentItem = React.forwardRef<
               {mode === "view" ? (
                 <div className="absolute right-4 top-4 flex items-center gap-2">
                   {canRevert ? (
-                    <Tooltip>
+                    <Tooltip disableHoverableContent>
                       <TooltipTrigger asChild>
                         <Button
                           data-testid="composer-attachment-revert"
@@ -291,7 +291,7 @@ const MediaAttachmentItem = React.forwardRef<
                     </Tooltip>
                   ) : null}
                   {onToggleSpoiler ? (
-                    <Tooltip>
+                    <Tooltip disableHoverableContent>
                       <TooltipTrigger asChild>
                         <Toggle
                           aria-label={
@@ -316,7 +316,7 @@ const MediaAttachmentItem = React.forwardRef<
                     </Tooltip>
                   ) : null}
                   {canEdit ? (
-                    <Tooltip>
+                    <Tooltip disableHoverableContent>
                       <TooltipTrigger asChild>
                         <button
                           type="button"
@@ -340,7 +340,7 @@ const MediaAttachmentItem = React.forwardRef<
             </DialogPrimitive.Content>
           </DialogPrimitive.Portal>
         </DialogPrimitive.Root>
-        <Tooltip>
+        <Tooltip disableHoverableContent>
           <TooltipTrigger asChild>
             <button
               type="button"
@@ -421,7 +421,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
                       {label}
                     </span>
                   </div>
-                  <Tooltip>
+                  <Tooltip disableHoverableContent>
                     <TooltipTrigger asChild>
                       <button
                         type="button"
@@ -494,7 +494,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
                     </div>
                   </div>
                   {onCancelUpload && preview.id >= 0 ? (
-                    <Tooltip>
+                    <Tooltip disableHoverableContent>
                       <TooltipTrigger asChild>
                         <button
                           type="button"
diff --git a/desktop/src/features/messages/ui/ComposerEmojiPicker.tsx b/desktop/src/features/messages/ui/ComposerEmojiPicker.tsx
index a5a87eda05..da23c396e8 100644
--- a/desktop/src/features/messages/ui/ComposerEmojiPicker.tsx
+++ b/desktop/src/features/messages/ui/ComposerEmojiPicker.tsx
@@ -27,7 +27,7 @@ export const ComposerEmojiPicker = React.memo(function ComposerEmojiPicker({
 }: ComposerEmojiPickerProps) {
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
-      <Tooltip>
+      <Tooltip disableHoverableContent>
         <TooltipTrigger asChild>
           <PopoverTrigger asChild>
             <Button
diff --git a/desktop/src/features/messages/ui/ComposerImageEditor.tsx b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
index a9bfb3bfd1..918eaf1080 100644
--- a/desktop/src/features/messages/ui/ComposerImageEditor.tsx
+++ b/desktop/src/features/messages/ui/ComposerImageEditor.tsx
@@ -403,7 +403,7 @@ export function ComposerImageEditor({
             ))}
           </div>
 
-          <Tooltip>
+          <Tooltip disableHoverableContent>
             <TooltipTrigger asChild>
               <button
                 aria-label="Undo last stroke"
@@ -417,7 +417,7 @@ export function ComposerImageEditor({
             </TooltipTrigger>
             <TooltipContent>Undo (⌘Z)</TooltipContent>
           </Tooltip>
-          <Tooltip>
+          <Tooltip disableHoverableContent>
             <TooltipTrigger asChild>
               <button
                 aria-label="Redo stroke"
diff --git a/desktop/src/features/messages/ui/FormattingToolbar.tsx b/desktop/src/features/messages/ui/FormattingToolbar.tsx
index 49eba3fa01..a605b3dcd9 100644
--- a/desktop/src/features/messages/ui/FormattingToolbar.tsx
+++ b/desktop/src/features/messages/ui/FormattingToolbar.tsx
@@ -281,7 +281,7 @@ export const FormattingToolbar = React.memo(function FormattingToolbar({
   return (
     <div className="flex items-center gap-0.5">
       {items.map((item) => (
-        <Tooltip key={item.label}>
+        <Tooltip key={item.label} disableHoverableContent>
           <TooltipTrigger asChild>
             <button
               type="button"
diff --git a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
index 7804e8fe98..f3fa39ca71 100644
--- a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
+++ b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
@@ -88,7 +88,7 @@ export const MessageComposerToolbar = React.memo(
                   exit={{ x: 8, opacity: 0 }}
                   transition={presenceSpring}
                 >
-                  <Tooltip>
+                  <Tooltip disableHoverableContent>
                     <TooltipTrigger asChild>
                       <Button
                         aria-label="Toggle formatting"
@@ -113,7 +113,7 @@ export const MessageComposerToolbar = React.memo(
                   exit={{ opacity: 0, scale: 0.95 }}
                   transition={{ ...presenceSpring, delay: 0.15 }}
                 >
-                  <Tooltip>
+                  <Tooltip disableHoverableContent>
                     <TooltipTrigger asChild>
                       <Button
                         aria-label="Close formatting"
@@ -158,7 +158,15 @@ export const MessageComposerToolbar = React.memo(
                 exit={{ opacity: 0, x: -12 }}
                 transition={presenceSpring}
               >
-                <Tooltip>
+                {/*
+                 * Composer tooltips float over the message textarea, so they
+                 * set disableHoverableContent: without it, Radix keeps the
+                 * tooltip open when the cursor slides off the trigger onto
+                 * the popup, leaving it camped over the editor. With it, the
+                 * tooltip dismisses the instant the pointer leaves the
+                 * trigger.
+                 */}
+                <Tooltip disableHoverableContent>
                   <TooltipTrigger asChild>
                     <Button
                       aria-label="Mention someone"
@@ -175,7 +183,7 @@ export const MessageComposerToolbar = React.memo(
                   </TooltipTrigger>
                   <TooltipContent>Mention someone</TooltipContent>
                 </Tooltip>
-                <Tooltip>
+                <Tooltip disableHoverableContent>
                   <TooltipTrigger asChild>
                     <Button
                       aria-label="Attach image"
@@ -205,7 +213,7 @@ export const MessageComposerToolbar = React.memo(
                   exit={{ x: -8, opacity: 0 }}
                   transition={presenceSpring}
                 >
-                  <Tooltip>
+                  <Tooltip disableHoverableContent>
                     <TooltipTrigger asChild>
                       <Button
                         aria-label="Toggle formatting"
diff --git a/desktop/tests/e2e/composer-tooltip-dismiss.spec.ts b/desktop/tests/e2e/composer-tooltip-dismiss.spec.ts
new file mode 100644
index 0000000000..9b0bb051fc
--- /dev/null
+++ b/desktop/tests/e2e/composer-tooltip-dismiss.spec.ts
@@ -0,0 +1,82 @@
+import { expect, test } from "@playwright/test";
+import { installMockBridge } from "../helpers/bridge";
+
+/**
+ * Composer tooltips set disableHoverableContent, so they must dismiss the
+ * instant the cursor leaves the trigger — including when it slides onto the
+ * tooltip popup itself (Radix's default hoverable-content behavior would
+ * keep it open, camping it over the message editor).
+ */
+
+test.beforeEach(async ({ page }) => {
+  await installMockBridge(page);
+});
+
+/** Hover the trigger, then slide the cursor onto the tooltip popup and
+ * assert the tooltip dismisses instead of persisting. */
+async function expectTooltipDismissesOnLeave(
+  page: import("@playwright/test").Page,
+  trigger: import("@playwright/test").Locator,
+  tooltipName: string,
+) {
+  await trigger.hover();
+
+  const tip = page.getByRole("tooltip", { name: tooltipName });
+  await expect(tip).toBeVisible();
+
+  // Slide off the trigger onto the tooltip popup.
+  const box = await tip.boundingBox();
+  if (!box) throw new Error("no tooltip box");
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, {
+    steps: 5,
+  });
+
+  await expect(tip).toBeHidden();
+}
+
+test("composer toolbar tooltip dismisses when cursor leaves the trigger", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+
+  await expectTooltipDismissesOnLeave(
+    page,
+    page.getByTestId("message-insert-mention"),
+    "Mention someone",
+  );
+});
+
+test("formatting sub-toolbar tooltip dismisses when cursor leaves the trigger", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+
+  // Open the formatting sub-toolbar (Bold / Italic / lists / Quote …).
+  await page.getByRole("button", { name: "Toggle formatting" }).first().click();
+
+  const bold = page.getByRole("button", { name: "Bold" });
+  await expect(bold).toBeVisible();
+
+  // Tooltip text is "<label> (<shortcut>)" for items that carry a shortcut.
+  await expectTooltipDismissesOnLeave(page, bold, "Bold (⌘B)");
+});
+
+test("emoji picker tooltip dismisses when cursor leaves the trigger", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+
+  // The emoji button wraps its tooltip around a nested PopoverTrigger, so
+  // cover it separately from the plain toolbar buttons.
+  await expectTooltipDismissesOnLeave(
+    page,
+    page.getByTestId("composer-emoji-button"),
+    "Insert emoji",
+  );
+});

From af9da52daca27c7b7d0ebf0cae12d9315027cc64 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Date: Mon, 6 Jul 2026 14:23:01 -0700
Subject: [PATCH 4/5] chore(composer): drop unused lightbox actions prop, trim
 rationale comments

Revert SimpleImageLightbox to main: the collapsed stack's composer
lightbox owns its own controls, so the optional actions slot had no
remaining consumer. Also trim the tooltip-dismissal and save-close
rationale comments to house-style one-liners; the full reasoning lives
in the PR body.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../messages/ui/ComposerAttachments.tsx       | 12 ++----
 .../messages/ui/MessageComposerToolbar.tsx    |  9 +---
 desktop/src/shared/ui/SimpleImageLightbox.tsx | 41 ++++++++-----------
 3 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index ded7ca9d21..e5f77185ff 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -77,11 +77,9 @@ 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. 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).
+ * once annotated, an in-place revert to the original. Save closes the
+ * dialog; 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.
@@ -139,9 +137,7 @@ 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.
+      // Close on save so rapid save/redraw cycles don't orphan a blob per iteration.
       setMode("view");
       setOpen(false);
     },
diff --git a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
index f3fa39ca71..1c8087e992 100644
--- a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
+++ b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
@@ -158,14 +158,7 @@ export const MessageComposerToolbar = React.memo(
                 exit={{ opacity: 0, x: -12 }}
                 transition={presenceSpring}
               >
-                {/*
-                 * Composer tooltips float over the message textarea, so they
-                 * set disableHoverableContent: without it, Radix keeps the
-                 * tooltip open when the cursor slides off the trigger onto
-                 * the popup, leaving it camped over the editor. With it, the
-                 * tooltip dismisses the instant the pointer leaves the
-                 * trigger.
-                 */}
+                {/* disableHoverableContent keeps tooltips from lingering over the editor. */}
                 <Tooltip disableHoverableContent>
                   <TooltipTrigger asChild>
                     <Button
diff --git a/desktop/src/shared/ui/SimpleImageLightbox.tsx b/desktop/src/shared/ui/SimpleImageLightbox.tsx
index aa1b0741d8..ca8be5b05d 100644
--- a/desktop/src/shared/ui/SimpleImageLightbox.tsx
+++ b/desktop/src/shared/ui/SimpleImageLightbox.tsx
@@ -5,14 +5,12 @@ import { cn } from "@/shared/lib/cn";
 import { MODAL_BACKDROP_BLUR_CLASS } from "@/shared/ui/modalBackdrop";
 
 export function SimpleImageLightbox({
-  actions,
   alt,
   children,
   onOpenChange,
   open,
   src,
 }: {
-  actions?: React.ReactNode;
   alt: string;
   children?: React.ReactNode;
   onOpenChange: (open: boolean) => void;
@@ -51,27 +49,24 @@ export function SimpleImageLightbox({
               src={src}
             />
           )}
-          <div className="absolute right-4 top-4 flex items-center gap-2">
-            {actions}
-            <DialogPrimitive.Close className="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">
-              <svg
-                aria-hidden="true"
-                fill="none"
-                height="20"
-                viewBox="0 0 24 24"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M18 6L6 18M6 6l12 12"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                />
-              </svg>
-            </DialogPrimitive.Close>
-          </div>
+          <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">
+            <svg
+              aria-hidden="true"
+              fill="none"
+              height="20"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M18 6L6 18M6 6l12 12"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+              />
+            </svg>
+          </DialogPrimitive.Close>
         </DialogPrimitive.Content>
       </DialogPrimitive.Portal>
     </DialogPrimitive.Root>

From a96df89c5e213f86964da28756f4d58b18e3ffa1 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Date: Mon, 6 Jul 2026 15:23:16 -0700
Subject: [PATCH 5/5] fix(composer): read lightbox mode via ref in Escape
 handler

Radix react-dismissable-layer >=1.1.14 (renovate bump #1524 on main)
registers a stable Escape listener, so onEscapeKeyDown captured a stale
mode closure: Escape in canvas-edit mode closed the lightbox instead of
returning to view mode. Read the current mode from a ref so the handler
always sees the live value.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../messages/ui/ComposerAttachments.tsx       | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/desktop/src/features/messages/ui/ComposerAttachments.tsx b/desktop/src/features/messages/ui/ComposerAttachments.tsx
index e5f77185ff..7e1fc2c8f5 100644
--- a/desktop/src/features/messages/ui/ComposerAttachments.tsx
+++ b/desktop/src/features/messages/ui/ComposerAttachments.tsx
@@ -122,16 +122,17 @@ const MediaAttachmentItem = React.forwardRef<
     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],
-  );
+  // Read `mode` via a ref: Radix's dismissable layer (>=1.1.14) registers a
+  // stable Escape listener, so the handler would otherwise see a stale mode.
+  const modeRef = React.useRef(mode);
+  modeRef.current = mode;
+  const handleEscapeKeyDown = React.useCallback((event: KeyboardEvent) => {
+    if (modeRef.current === "edit") {
+      // Escape leaves canvas mode but keeps the lightbox open.
+      event.preventDefault();
+      setMode("view");
+    }
+  }, []);
 
   const handleEditorSave = React.useCallback(
     async (bytes: Uint8Array) => {