diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index 1f91913cb..199e2e0e1 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -23,6 +23,7 @@ import {
   type AtQueryMatch, type FileIndexEntry,
 } from "@/lib/file-fuzzy";
 import { FolderIcon, getFileIcon } from "./FileIcons";
+import { ImagePreview } from "./ImagePreview";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { useI18n } from "@/hooks/useI18n";
 import { useChatAppearance } from "@/hooks/useChatAppearance";
@@ -1620,13 +1621,16 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput({
           <div style={{ display: "flex", gap: 6, marginBottom: 6, flexWrap: "wrap" }}>
             {attachedImages.map((img, i) => (
               <div key={i} style={{ position: "relative", flexShrink: 0 }}>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={img.previewUrl}
-                  alt=""
-                  style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 6, border: "1px solid var(--border)", display: "block" }}
-                />
+                <ImagePreview key={img.previewUrl} src={img.previewUrl}>
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={img.previewUrl}
+                    alt=""
+                    style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 6, border: "1px solid var(--border)", display: "block" }}
+                  />
+                </ImagePreview>
                 <button
+                  type="button"
                   onClick={() => removeImage(i)}
                   style={{
                     position: "absolute", top: -4, right: -4,
diff --git a/components/ImagePreview.test.mjs b/components/ImagePreview.test.mjs
index 4c927f658..f62e62c03 100644
--- a/components/ImagePreview.test.mjs
+++ b/components/ImagePreview.test.mjs
@@ -5,6 +5,15 @@ import test from "node:test";
 const source = await readFile(new URL("./ImagePreview.tsx", import.meta.url), "utf8");
 const cssSource = await readFile(new URL("../app/globals.css", import.meta.url), "utf8");
 
+test("composer attachments open in the shared preview with a separate remove button", async () => {
+  const inputSource = await readFile(new URL("./ChatInput.tsx", import.meta.url), "utf8");
+  assert.match(inputSource, /import \{ ImagePreview \} from "\.\/ImagePreview"/);
+  assert.match(
+    inputSource,
+    /<ImagePreview key=\{img\.previewUrl\} src=\{img\.previewUrl\}>[\s\S]*?<img[\s\S]*?src=\{img\.previewUrl\}[\s\S]*?<\/ImagePreview>\s*<button\s*type="button"\s*onClick=\{\(\) => removeImage\(i\)\}/,
+  );
+});
+
 test("uses a native modal dialog and restores focus to its trigger", () => {
   assert.match(source, /useRef<HTMLDialogElement>\(null\)/);
   assert.match(source, /dialog\.showModal\(\)/);