From 8e15a4813855c9fcc49b35c5761a24e09e8d7b6a Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Tue, 18 Aug 2026 23:19:20 +0000
Subject: [PATCH 1/8] FEAT: Add self-contained HTML conversation export to the
 GUI

The Markdown and JSON exports carry only attachment names, so a conversation
whose answer is an image exports as an empty block and the evidence is lost.
Operators were screenshotting the screen instead.

Adds a third Export format that writes a single HTML transcript with the media
embedded as data URIs, so the file opens offline and prints to PDF as-is.
Attachments the browser cannot read are named rather than embedded, and their
source URLs are deliberately left out so no signed storage link is written into
a shared file.

No new dependencies, and no backend or CSP changes.
---
 doc/gui/0_gui.md                              |   5 +-
 frontend/e2e/chat.spec.ts                     |  53 ++++
 .../src/components/Chat/ChatWindow.test.tsx   |  17 ++
 frontend/src/components/Chat/ChatWindow.tsx   |  21 +-
 frontend/src/utils/conversationExport.test.ts | 284 +++++++++++++++++-
 frontend/src/utils/conversationExport.ts      | 241 ++++++++++++++-
 frontend/src/utils/messageMapper.ts           |   4 +-
 7 files changed, 608 insertions(+), 17 deletions(-)

diff --git a/doc/gui/0_gui.md b/doc/gui/0_gui.md
index 60d96adc2f..856adfb10b 100644
--- a/doc/gui/0_gui.md
+++ b/doc/gui/0_gui.md
@@ -74,12 +74,13 @@ Click the panel toggle in the ribbon to open the conversations sidebar. This pan
 
 #### Exporting a Conversation
 
-Click the **Export** button in the ribbon to download the conversation that is currently displayed. Two formats are offered from the button's menu:
+Click the **Export** button in the ribbon to download the conversation that is currently displayed. Three formats are offered from the button's menu:
 
 - **Markdown (`.md`):** A human-readable transcript with each message labeled by role. Best for reading, sharing, or pasting into reports.
 - **JSON (`.json`):** A structured record of the conversation for tooling and further processing.
+- **HTML (`.html`):** A single self-contained page with the images, audio, and video embedded in the file itself. Best for sharing a conversation as evidence, and for printing — open it and use your browser's **Print → Save as PDF**.
 
-The export runs entirely in your browser and captures exactly what is shown in the chat, including the system prompt shown in the banner — no data is sent to the server. Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
+Markdown and JSON are built entirely in your browser with no network requests. The HTML export additionally re-reads each attachment from the backend — a read-only request for media that is already shown on screen — so it can embed it in the file; no conversation content is uploaded. Attachments the browser cannot read, such as media held in Azure Blob storage or files larger than 10 MB, are listed by name instead of embedded, and their source links are deliberately left out of the file. All formats capture exactly what is shown in the chat, including the system prompt shown in the banner. Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
 
 > **Note:** Exported files can contain adversarial prompts, model responses, and other sensitive material. Store and share them responsibly.
 
diff --git a/frontend/e2e/chat.spec.ts b/frontend/e2e/chat.spec.ts
index 87879faeb4..ec4358f471 100644
--- a/frontend/e2e/chat.spec.ts
+++ b/frontend/e2e/chat.spec.ts
@@ -956,4 +956,57 @@ test.describe("Conversation export", () => {
     expect(content).toContain("Export me please");
     expect(content).toContain("Mock response for: Export me please");
   });
+
+  test("downloads the displayed conversation as a self-contained HTML transcript", async ({ page }) => {
+    const { filename, content } = await triggerExport(page, "export-html-item");
+
+    expect(filename).toMatch(/^copyrit-conversation-e2e-conv-001-.*\.html$/);
+    expect(content).toContain("<h1>CoPyRIT conversation export</h1>");
+    expect(content).toContain("Export me please");
+    expect(content).toContain("Mock response for: Export me please");
+    // Print rules travel with the file so it can be saved as PDF as-is.
+    expect(content).toContain("@media print");
+  });
+});
+
+test.describe("Conversation export with media", () => {
+  const setupImageMock = buildModalityMock(
+    [
+      {
+        id: "img-export-1",
+        original_value_data_type: "text",
+        converted_value_data_type: "image_path",
+        original_value: "generated image",
+        converted_value: WIDE_IMAGE_DATA_URI,
+        converted_value_mime_type: "image/svg+xml",
+        scores: [],
+        response_error: "none",
+      },
+    ],
+    "e2e-export-media-conv",
+  );
+
+  test("embeds the image in the HTML export so the file stands alone", async ({ page }) => {
+    await setupImageMock(page);
+    await page.goto("/");
+    await activateMockTarget(page);
+
+    await page.getByRole("textbox").fill("Generate an image");
+    await page.getByRole("button", { name: /send/i }).click();
+    await expect(page.locator('img:not([alt="Co-PyRIT Logo"])')).toBeVisible({ timeout: 10000 });
+
+    const exportButton = page.getByTestId("export-conversation-btn");
+    await expect(exportButton).toBeEnabled();
+    const downloadPromise = page.waitForEvent("download");
+    await exportButton.click();
+    await page.getByTestId("export-html-item").click();
+
+    const download = await downloadPromise;
+    const filePath = await download.path();
+    expect(filePath).not.toBeNull();
+    const content = readFileSync(filePath, "utf-8");
+
+    expect(download.suggestedFilename()).toMatch(/\.html$/);
+    expect(content).toContain("<img src=\"data:image/svg+xml");
+  });
 });
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index ad3da9d594..c70b09c505 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -3507,6 +3507,23 @@ describe("ChatWindow Integration", () => {
       expect(mockedAttacksApi.getMessages.mock.calls.length).toBe(callsBefore);
     });
 
+    it("exports the displayed conversation as a self-contained HTML transcript", async () => {
+      const user = userEvent.setup();
+      await renderWithLoadedConversation();
+      const callsBefore = mockedAttacksApi.getMessages.mock.calls.length;
+      const { getDownloadAnchor } = spyOnDownloadAnchor();
+
+      await user.click(screen.getByRole("button", { name: /export conversation/i }));
+      await user.click(screen.getByRole("menuitem", { name: /export as html/i }));
+
+      await waitFor(() => expect(URL.createObjectURL as jest.Mock).toHaveBeenCalled());
+      const blob = (URL.createObjectURL as jest.Mock).mock.calls[0][0] as Blob;
+      expect(blob.type).toBe("text/html;charset=utf-8");
+      expect(getDownloadAnchor().download).toMatch(/^copyrit-conversation-conv-1-.*\.html$/);
+      // WYSIWYG: export serializes in-state messages and makes no extra API call.
+      expect(mockedAttacksApi.getMessages.mock.calls.length).toBe(callsBefore);
+    });
+
     it("exports the displayed conversation id when it differs from the attack's main conversation", async () => {
       const user = userEvent.setup();
       // Viewing a branch: activeConversationId (displayed) differs from the
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 1bcd7cf34d..0beb6645ea 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -9,6 +9,7 @@ import {
   MenuPopover,
   MenuTrigger,
   mergeClasses,
+  Spinner,
   Switch,
   Text,
   Tooltip,
@@ -126,6 +127,7 @@ export default function ChatWindow({
   const [loadedConversationId, setLoadedConversationId] = useState<string | null>(null)
   const isSending = activeConversationId ? sendingConversations.has(activeConversationId) : Boolean(sendingConversations.size)
   const [isPanelOpen, setIsPanelOpen] = useState(false)
+  const [isExporting, setIsExporting] = useState(false)
   const [isNarrowScreen, setIsNarrowScreen] = useState(matchesNarrowScreen)
   const [isConverterPanelOpen, setIsConverterPanelOpen] = useState(false)
   // Conversation-wide preference for rendering message text as Markdown.
@@ -715,8 +717,18 @@ export default function ChatWindow({
     !isLoadingMessages &&
     !awaitingConversationLoad
 
-  const handleExport = (format: ExportFormat) => {
-    exportConversation({ messages, conversationId: activeConversationId ?? conversationId, format })
+  const handleExport = async (format: ExportFormat) => {
+    if (isExporting) {
+      return
+    }
+    setIsExporting(true)
+    try {
+      await exportConversation({ messages, conversationId: activeConversationId ?? conversationId, format })
+    } catch (err) {
+      console.error('Failed to export conversation:', err)
+    } finally {
+      setIsExporting(false)
+    }
   }
 
   return (
@@ -762,7 +774,7 @@ export default function ChatWindow({
                   <Button
                     appearance="subtle"
                     className={styles.ribbonAction}
-                    icon={<ArrowDownloadRegular />}
+                    icon={isExporting ? <Spinner size="tiny" /> : <ArrowDownloadRegular />}
                     disabled={!canExportConversation}
                     aria-label="Export conversation"
                     data-testid="export-conversation-btn"
@@ -777,6 +789,9 @@ export default function ChatWindow({
                   <MenuItem onClick={() => handleExport('json')} data-testid="export-json-item">
                     Export as JSON (.json)
                   </MenuItem>
+                  <MenuItem onClick={() => handleExport('html')} data-testid="export-html-item">
+                    Export as HTML (.html)
+                  </MenuItem>
                 </MenuList>
               </MenuPopover>
             </Menu>
diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index aae2eaf3f1..e31715db9b 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -2,11 +2,12 @@ import {
   exportConversation,
   conversationToMarkdown,
   conversationToJson,
+  conversationToHtml,
   buildExportFilename,
   downloadTextFile,
   EXPORT_MIME_TYPES,
 } from "./conversationExport";
-import type { Message } from "../types";
+import type { Message, MessageAttachment } from "../types";
 
 const FIXED_NOW = new Date("2026-07-22T02:34:01.059Z");
 
@@ -19,6 +20,25 @@ function message(overrides: Partial<Message> = {}): Message {
   };
 }
 
+function attachment(overrides: Partial<MessageAttachment> = {}): MessageAttachment {
+  return {
+    type: "image",
+    name: "result.png",
+    url: "/api/media?path=/home/op/dbdata/result.png",
+    mimeType: "image/png",
+    ...overrides,
+  };
+}
+
+function mockFetchOnce(body: string, { ok = true, type = "image/png" } = {}): jest.Mock {
+  const fetchMock = jest.fn().mockResolvedValue({
+    ok,
+    blob: () => Promise.resolve(new Blob([body], { type })),
+  });
+  global.fetch = fetchMock as unknown as typeof fetch;
+  return fetchMock;
+}
+
 function blobToText(blob: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -424,6 +444,249 @@ describe("conversationExport", () => {
     });
   });
 
+  describe("conversationToHtml", () => {
+    it("renders a header with the conversation id, exported time, and message count", async () => {
+      const html = await conversationToHtml([message()], "conv-1", FIXED_NOW);
+      expect(html).toContain("<h1>CoPyRIT conversation export</h1>");
+      expect(html).toContain("Conversation: conv-1");
+      expect(html).toContain("Exported: 2026-07-22T02:34:01.059Z");
+      expect(html).toContain("Messages: 1");
+    });
+
+    it("includes print styles so the file can be saved as PDF as-is", async () => {
+      const html = await conversationToHtml([message()], "conv-1", FIXED_NOW);
+      expect(html).toContain("@media print");
+      expect(html).toContain("page-break-inside: avoid");
+    });
+
+    it("includes the system message that the chat view hides", async () => {
+      const html = await conversationToHtml(
+        [message({ role: "system", content: "You are a helpful assistant." })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("System");
+      expect(html).toContain("You are a helpful assistant.");
+    });
+
+    it("drops loading placeholders", async () => {
+      const html = await conversationToHtml(
+        [message({ content: "kept" }), message({ content: "pending", isLoading: true })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("kept");
+      expect(html).not.toContain("pending");
+      expect(html).toContain("Messages: 1");
+    });
+
+    it("escapes markup so model output cannot execute when the file is opened", async () => {
+      const html = await conversationToHtml(
+        [message({ content: "<script>alert(1)</script> & \"quoted\"" })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+      expect(html).not.toContain("<script>alert(1)</script>");
+    });
+
+    it("escapes a hostile mime type instead of letting it break out of the src attribute", async () => {
+      const html = await conversationToHtml(
+        [
+          message({
+            content: "",
+            attachments: [attachment({ url: 'data:image/png;base64,AAAA', mimeType: 'image/png" onerror="alert(1)' })],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).not.toContain('onerror="alert(1)"');
+      expect(html).toContain("&quot;");
+    });
+
+    it("omits the text block for a media-only message rather than rendering an empty one", async () => {
+      const html = await conversationToHtml(
+        [message({ content: "", attachments: [attachment({ url: "data:image/png;base64,AAAA" })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).not.toContain("<pre></pre>");
+      expect(html).toContain("<img src=\"data:image/png;base64,AAAA\"");
+    });
+
+    it("reuses a data URI without fetching it", async () => {
+      const fetchMock = mockFetchOnce("bytes");
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url: "data:image/png;base64,AAAA" })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(html).toContain("data:image/png;base64,AAAA");
+    });
+
+    it("reads a pending upload from its local file without fetching", async () => {
+      const fetchMock = mockFetchOnce("bytes");
+      const file = new File(["hello"], "pending.png", { type: "image/png" });
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url: "blob:http://localhost/abc", file })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(html).toContain("data:image/png;base64,aGVsbG8=");
+    });
+
+    it("embeds same-origin media fetched from the media endpoint", async () => {
+      const fetchMock = mockFetchOnce("hello");
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).toHaveBeenCalledWith("/api/media?path=/home/op/dbdata/result.png");
+      expect(html).toContain("data:image/png;base64,aGVsbG8=");
+    });
+
+    it("names but does not embed blob-hosted media, and never writes its signed url", async () => {
+      const fetchMock = mockFetchOnce("hello");
+      const url = "https://acct.blob.core.windows.net/c/result.png?sv=2024&sig=SECRETSIG";
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(html).not.toContain("SECRETSIG");
+      expect(html).not.toContain("blob.core.windows.net");
+      expect(html).toContain("[Image: result.png (image/png)]");
+    });
+
+    it("names but does not embed a blob url with no local file", async () => {
+      const fetchMock = mockFetchOnce("hello");
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url: "blob:http://localhost/abc" })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(html).toContain("[Image: result.png (image/png)]");
+    });
+
+    it("falls back to a placeholder when the media endpoint refuses the file", async () => {
+      mockFetchOnce(JSON.stringify({ detail: "Access denied" }), { ok: false, type: "application/json" });
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).not.toContain("Access denied");
+      expect(html).not.toContain("/api/media");
+    });
+
+    it("falls back to a placeholder when the fetch throws", async () => {
+      global.fetch = jest.fn().mockRejectedValue(new Error("network down")) as unknown as typeof fetch;
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png)]");
+    });
+
+    it("names but does not embed an attachment over the inline size cap", async () => {
+      mockFetchOnce("x".repeat(10 * 1024 * 1024 + 1));
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).not.toContain("base64");
+    });
+
+    it("names but does not embed a zero-byte attachment", async () => {
+      mockFetchOnce("");
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png)]");
+    });
+
+    it("falls back to a generic mime type when the attachment has none", async () => {
+      mockFetchOnce("hello", { type: "" });
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ mimeType: "" })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("data:application/octet-stream;base64,aGVsbG8=");
+    });
+
+    it("renders players for audio and video and a download link for files", async () => {
+      const html = await conversationToHtml(
+        [
+          message({
+            content: "",
+            attachments: [
+              attachment({ type: "audio", name: "a.mp3", mimeType: "audio/mpeg", url: "data:audio/mpeg;base64,AAAA" }),
+              attachment({ type: "video", name: "v.mp4", mimeType: "video/mp4", url: "data:video/mp4;base64,AAAA" }),
+              attachment({ type: "file", name: "f.txt", mimeType: "text/plain", url: "data:text/plain;base64,AAAA" }),
+            ],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("<audio controls");
+      expect(html).toContain("<video controls");
+      expect(html).toContain('download="f.txt"');
+    });
+
+    it("renders original content, original attachments, reasoning, and errors like Markdown does", async () => {
+      const html = await conversationToHtml(
+        [
+          message({
+            content: "converted",
+            originalContent: "original",
+            originalAttachments: [attachment({ name: "before.png", url: "data:image/png;base64,AAAA" })],
+            reasoningSummaries: ["step one", "step two"],
+            error: { type: "rate_limit", description: "slow down" },
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("Original (before conversion):");
+      expect(html).toContain("original");
+      expect(html).toContain("Original attachments (before conversion):");
+      expect(html).toContain("step one");
+      expect(html).toContain("Reasoning:");
+      expect(html).toContain("Error (rate_limit): slow down");
+    });
+
+    it("preserves non-ASCII content", async () => {
+      const html = await conversationToHtml(
+        [message({ content: "emoji 🎉 عربى 中文" })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain('<meta charset="utf-8" />');
+      expect(html).toContain("emoji 🎉 عربى 中文");
+    });
+
+    it("renders an empty conversation without messages", async () => {
+      const html = await conversationToHtml([], null, FIXED_NOW);
+      expect(html).toContain("Conversation: (unsaved)");
+      expect(html).toContain("Messages: 0");
+      expect(html).not.toContain("<article");
+    });
+  });
+
   describe("exportConversation", () => {
     it("exports Markdown with the markdown mime type and rendered transcript", async () => {
       const { getAnchor } = installAnchorSpy();
@@ -459,5 +722,24 @@ describe("conversationExport", () => {
       expect(JSON.parse(await blobToText(blob)).exported_at).toBe(FIXED_NOW.toISOString());
       expect(getAnchor().download).toContain("2026-07-22T02-34-01-059");
     });
+
+    // Markdown and JSON must not await, so they keep downloading in the same
+    // tick. Adding an await on those branches would silently break callers
+    // that do not expect a pending promise.
+    it("still downloads Markdown synchronously", () => {
+      installAnchorSpy();
+      void exportConversation({ messages: [message({ content: "hi" })], conversationId: "conv-1", format: "markdown", now: FIXED_NOW });
+      expect(URL.createObjectURL as jest.Mock).toHaveBeenCalledTimes(1);
+    });
+
+    it("exports HTML with the html mime type and an embedded transcript", async () => {
+      const { getAnchor } = installAnchorSpy();
+      await exportConversation({ messages: [message({ content: "hi" })], conversationId: "conv-1", format: "html", now: FIXED_NOW });
+
+      const blob = (URL.createObjectURL as jest.Mock).mock.calls[0][0] as Blob;
+      expect(blob.type).toBe(EXPORT_MIME_TYPES.html);
+      expect(getAnchor().download).toMatch(/^copyrit-conversation-conv-1-.*\.html$/);
+      expect(await blobToText(blob)).toContain("<h1>CoPyRIT conversation export</h1>");
+    });
   });
 });
diff --git a/frontend/src/utils/conversationExport.ts b/frontend/src/utils/conversationExport.ts
index 9310b155cf..8a6e281846 100644
--- a/frontend/src/utils/conversationExport.ts
+++ b/frontend/src/utils/conversationExport.ts
@@ -1,15 +1,18 @@
-import type { Message, MessageAttachment } from '../types'
+import type { Message, MessageAttachment, MessageError } from '../types'
+import { fileToBase64 } from './messageMapper'
 
-export type ExportFormat = 'markdown' | 'json'
+export type ExportFormat = 'markdown' | 'json' | 'html'
 
 const FILE_EXTENSIONS: Record<ExportFormat, string> = {
   markdown: 'md',
   json: 'json',
+  html: 'html',
 }
 
 export const EXPORT_MIME_TYPES: Record<ExportFormat, string> = {
   markdown: 'text/markdown;charset=utf-8',
   json: 'application/json;charset=utf-8',
+  html: 'text/html;charset=utf-8',
 }
 
 const ROLE_LABELS: Record<Message['role'], string> = {
@@ -19,12 +22,52 @@ const ROLE_LABELS: Record<Message['role'], string> = {
   system: 'System',
 }
 
+/** Friendly label per attachment type, matching the API's media preview wording. */
+const MEDIA_LABELS: Record<MessageAttachment['type'], string> = {
+  image: 'Image',
+  audio: 'Audio',
+  video: 'Video',
+  file: 'File',
+}
+
+/**
+ * Largest attachment inlined into an HTML export. Base64 inflates bytes by a
+ * third, so anything above this is listed by name instead of embedded to keep
+ * the file openable.
+ */
+const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
+
+const HTML_STYLESHEET = `
+body { font-family: 'Segoe UI', system-ui, sans-serif; color: #201f1e; margin: 2rem auto; max-width: 50rem; }
+h1 { font-size: 1.5rem; }
+.meta { color: #605e5c; font-size: 0.85rem; }
+.message { border: 1px solid #d2d0ce; border-radius: 6px; margin: 1rem 0; padding: 0.75rem 1rem; }
+.role { font-weight: 600; }
+.timestamp { color: #605e5c; font-size: 0.85rem; margin-left: 0.5rem; }
+.label { font-weight: 600; margin-bottom: 0.25rem; }
+.placeholder { color: #605e5c; font-style: italic; }
+.error { color: #a4262c; }
+pre { background: #f3f2f1; border-radius: 4px; padding: 0.5rem; white-space: pre-wrap; word-break: break-word; }
+figure { margin: 0.5rem 0; }
+figcaption { color: #605e5c; font-size: 0.85rem; }
+img, video { height: auto; max-width: 100%; }
+@media print {
+  body { margin: 0; max-width: none; }
+  .message { border-color: #8a8886; break-inside: avoid; page-break-inside: avoid; }
+  @page { margin: 1.5cm; }
+}
+`
+
 /**
  * Serialize, name, and download the currently viewed conversation in one call.
- * Markdown and JSON share a single timestamp so the filename and the document
- * body agree.
+ * All formats share a single timestamp so the filename and the document body
+ * agree.
+ *
+ * Only the HTML branch awaits: it reads attachment bytes back so it can embed
+ * them. Markdown and JSON must stay free of `await` so they still download
+ * synchronously.
  */
-export function exportConversation({
+export async function exportConversation({
   messages,
   conversationId,
   format,
@@ -34,11 +77,13 @@ export function exportConversation({
   conversationId: string | null
   format: ExportFormat
   now?: Date
-}): void {
+}): Promise<void> {
   const content =
-    format === 'markdown'
-      ? conversationToMarkdown(messages, conversationId, now)
-      : conversationToJson(messages, conversationId, now)
+    format === 'html'
+      ? await conversationToHtml(messages, conversationId, now)
+      : format === 'markdown'
+        ? conversationToMarkdown(messages, conversationId, now)
+        : conversationToJson(messages, conversationId, now)
   downloadTextFile(content, buildExportFilename(conversationId, format, now), EXPORT_MIME_TYPES[format])
 }
 
@@ -103,6 +148,42 @@ export function conversationToJson(
   return JSON.stringify(envelope, null, 2)
 }
 
+/**
+ * Render the conversation as a self-contained HTML transcript. Media the
+ * browser can read is embedded as a `data:` URI so the file stays readable
+ * offline; anything else is named but not embedded, and its source URL is
+ * never written to the document. The stylesheet carries print rules so the
+ * saved file can be printed or saved as PDF as-is.
+ */
+export async function conversationToHtml(
+  messages: Message[],
+  conversationId: string | null,
+  exportedAt: Date = new Date(),
+): Promise<string> {
+  const exported = withoutLoadingPlaceholders(messages)
+  const media = await resolveMedia(exported)
+  const summary = [
+    `Conversation: ${escapeHtml(conversationId ?? '(unsaved)')}`,
+    `Exported: ${escapeHtml(exportedAt.toISOString())}`,
+    `Messages: ${exported.length}`,
+  ].join('<br />')
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>CoPyRIT conversation export</title>
+<style>${HTML_STYLESHEET}</style>
+</head>
+<body>
+<h1>CoPyRIT conversation export</h1>
+<p class="meta">${summary}</p>
+${exported.map((message) => renderMessage(message, media)).join('\n')}
+</body>
+</html>
+`
+}
+
 /**
  * Build a filesystem-safe filename for an exported conversation, e.g.
  * `copyrit-conversation-<id>-<timestamp>.md`. Falls back to a name without the
@@ -207,3 +288,145 @@ function longestBacktickRun(content: string): number {
   }
   return longest
 }
+
+type ResolvedMedia = Map<MessageAttachment, string | null>
+
+/**
+ * Read every attachment in the conversation, mapping each to a `data:` URI or
+ * to `null` when its bytes cannot be read. Resolution is the only step that
+ * touches the network; rendering stays a pure function of the result.
+ */
+async function resolveMedia(messages: Message[]): Promise<ResolvedMedia> {
+  const attachments = messages.flatMap((message) => [
+    ...(message.attachments ?? []),
+    ...(message.originalAttachments ?? []),
+  ])
+  const resolved = await Promise.all(
+    attachments.map(async (attachment) => [attachment, await attachmentToDataUri(attachment)] as const),
+  )
+  return new Map(resolved)
+}
+
+/**
+ * Resolve one attachment to an embeddable `data:` URI, or `null` when the
+ * bytes are unavailable. Already-inline values are reused as-is, pending
+ * uploads are read from their local `File`, and everything else is fetched
+ * only when it is same-origin — a cross-origin or `blob:` URL is blocked by
+ * the app's own content security policy, so requesting it would only produce a
+ * console error.
+ */
+async function attachmentToDataUri(attachment: MessageAttachment): Promise<string | null> {
+  try {
+    if (attachment.url.startsWith('data:')) {
+      return attachment.url
+    }
+    if (attachment.file) {
+      return await blobToDataUri(attachment.file, attachment.mimeType)
+    }
+    if (!isSameOriginHttpUrl(attachment.url)) {
+      return null
+    }
+    const response = await fetch(attachment.url)
+    if (!response.ok) {
+      return null
+    }
+    return await blobToDataUri(await response.blob(), attachment.mimeType)
+  } catch {
+    return null
+  }
+}
+
+/** Encode a blob as a `data:` URI, skipping empty and oversized payloads. */
+async function blobToDataUri(blob: Blob, mimeType: string): Promise<string | null> {
+  if (blob.size === 0 || blob.size > MAX_INLINE_ATTACHMENT_BYTES) {
+    return null
+  }
+  const base64 = await fileToBase64(blob)
+  if (!base64) {
+    return null
+  }
+  return `data:${mimeType || blob.type || 'application/octet-stream'};base64,${base64}`
+}
+
+function isSameOriginHttpUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url, window.location.origin)
+    return (parsed.protocol === 'http:' || parsed.protocol === 'https:') && parsed.origin === window.location.origin
+  } catch {
+    return false
+  }
+}
+
+function renderMessage(message: Message, media: ResolvedMedia): string {
+  const parts = [
+    `<header><span class="role">${escapeHtml(ROLE_LABELS[message.role])}</span>` +
+      `<span class="timestamp">${escapeHtml(message.timestamp)}</span></header>`,
+  ]
+  // A media-only message has no text; an empty block would read as if the
+  // model answered with nothing.
+  if (message.content.trim() !== '') {
+    parts.push(`<pre>${escapeHtml(message.content)}</pre>`)
+  }
+  if (message.originalContent != null && message.originalContent !== message.content) {
+    parts.push(labelled('Original (before conversion):', `<pre>${escapeHtml(message.originalContent)}</pre>`))
+  }
+  parts.push(renderAttachments('Original attachments (before conversion):', message.originalAttachments, media))
+  if (message.reasoningSummaries && message.reasoningSummaries.length > 0) {
+    parts.push(labelled('Reasoning:', `<pre>${escapeHtml(message.reasoningSummaries.join('\n\n'))}</pre>`))
+  }
+  if (message.error) {
+    parts.push(renderError(message.error))
+  }
+  parts.push(renderAttachments('Attachments:', message.attachments, media))
+  return `<article class="message">\n${parts.filter(Boolean).join('\n')}\n</article>`
+}
+
+function renderError(error: MessageError): string {
+  const description = error.description ? `: ${escapeHtml(error.description)}` : ''
+  return `<p class="error">Error (${escapeHtml(error.type)})${description}</p>`
+}
+
+function renderAttachments(
+  heading: string,
+  attachments: MessageAttachment[] | undefined,
+  media: ResolvedMedia,
+): string {
+  if (!attachments || attachments.length === 0) {
+    return ''
+  }
+  const rendered = attachments.map((attachment) => renderAttachment(attachment, media.get(attachment) ?? null))
+  return labelled(heading, rendered.join('\n'))
+}
+
+function renderAttachment(attachment: MessageAttachment, dataUri: string | null): string {
+  const caption = escapeHtml(`${attachment.name} (${attachment.mimeType})`)
+  if (!dataUri) {
+    return `<p class="placeholder">[${MEDIA_LABELS[attachment.type]}: ${caption}]</p>`
+  }
+  // The MIME type is echoed into the data URI, so escape it like any other
+  // untrusted value before it lands in an attribute.
+  const source = escapeHtml(dataUri)
+  const name = escapeHtml(attachment.name)
+  const body =
+    attachment.type === 'image'
+      ? `<img src="${source}" alt="${name}" />`
+      : attachment.type === 'audio'
+        ? `<audio controls src="${source}"></audio>`
+        : attachment.type === 'video'
+          ? `<video controls src="${source}"></video>`
+          : `<a href="${source}" download="${name}">${caption}</a>`
+  return `<figure>${body}<figcaption>${caption}</figcaption></figure>`
+}
+
+function labelled(heading: string, body: string): string {
+  return `<p class="label">${escapeHtml(heading)}</p>\n${body}`
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
diff --git a/frontend/src/utils/messageMapper.ts b/frontend/src/utils/messageMapper.ts
index 1868ca4ad0..93b88591a2 100644
--- a/frontend/src/utils/messageMapper.ts
+++ b/frontend/src/utils/messageMapper.ts
@@ -8,9 +8,9 @@ import type {
 } from '../types'
 
 /**
- * Read a File and return its contents as a base64-encoded string (no data URI prefix).
+ * Read a File or Blob and return its contents as a base64-encoded string (no data URI prefix).
  */
-export function fileToBase64(file: File): Promise<string> {
+export function fileToBase64(file: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.onload = () => {

From b3a355360891ec570ff7251f7ca04430b117ca44 Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Wed, 19 Aug 2026 00:23:28 +0000
Subject: [PATCH 2/8] FIX: Tighten media embedding in the HTML conversation
 export

Review found four ways the exported file could hold something other than the
media it claims:

- Any same-origin URL was fetched, but the single-page app answers unmatched
  paths with its own index.html, so that HTML could be embedded as if it were
  the image. Only the media endpoint is read now.
- Already-inline data URIs skipped the size limit the docs promise, so an
  oversized attachment was still embedded.
- File attachments became clickable data links, which put active content one
  click away in a file meant to be shared. Only images, audio, and video are
  embedded; everything else is named.
- The export guard read React state, so two quick clicks could both start.

Also closes the test holes behind these: the escape guarding the media source
attribute, the export gate, and the progress indicator all had passing tests
that survived deleting the code they covered.
---
 doc/gui/0_gui.md                              |   2 +-
 .../src/components/Chat/ChatWindow.test.tsx   |  60 +++++++++-
 frontend/src/components/Chat/ChatWindow.tsx   |   7 +-
 frontend/src/utils/conversationExport.test.ts | 105 +++++++++++++++++-
 frontend/src/utils/conversationExport.ts      |  53 +++++++--
 5 files changed, 210 insertions(+), 17 deletions(-)

diff --git a/doc/gui/0_gui.md b/doc/gui/0_gui.md
index 856adfb10b..b32e64ca0b 100644
--- a/doc/gui/0_gui.md
+++ b/doc/gui/0_gui.md
@@ -80,7 +80,7 @@ Click the **Export** button in the ribbon to download the conversation that is c
 - **JSON (`.json`):** A structured record of the conversation for tooling and further processing.
 - **HTML (`.html`):** A single self-contained page with the images, audio, and video embedded in the file itself. Best for sharing a conversation as evidence, and for printing — open it and use your browser's **Print → Save as PDF**.
 
-Markdown and JSON are built entirely in your browser with no network requests. The HTML export additionally re-reads each attachment from the backend — a read-only request for media that is already shown on screen — so it can embed it in the file; no conversation content is uploaded. Attachments the browser cannot read, such as media held in Azure Blob storage or files larger than 10 MB, are listed by name instead of embedded, and their source links are deliberately left out of the file. All formats capture exactly what is shown in the chat, including the system prompt shown in the banner. Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
+Markdown and JSON are built entirely in your browser with no network requests. The HTML export additionally re-reads the attachments it can reach on the same origin — a read-only request for media that is already shown on screen — so it can embed them in the file; no conversation content is uploaded. Attachments it cannot read or embed, such as media held in Azure Blob storage, anything larger than 10 MB, and non-media files, are listed by name instead, and their source links are deliberately left out of the file. All formats capture exactly what is shown in the chat, including the system prompt shown in the banner. Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
 
 > **Note:** Exported files can contain adversarial prompts, model responses, and other sensitive material. Store and share them responsibly.
 
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index c70b09c505..aa5db298ea 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import ChatWindow from "./ChatWindow";
@@ -49,6 +49,7 @@ jest.mock("../../services/api", () => ({
 jest.mock("../../utils/messageMapper", () => ({
   buildMessagePieces: jest.fn(),
   backendMessagesToFrontend: jest.fn(),
+  fileToBase64: jest.fn(),
 }));
 
 const mockedAttacksApi = attacksApi as jest.Mocked<typeof attacksApi>;
@@ -3524,6 +3525,63 @@ describe("ChatWindow Integration", () => {
       expect(mockedAttacksApi.getMessages.mock.calls.length).toBe(callsBefore);
     });
 
+    it("shows progress and ignores a second request while an export is in flight", async () => {
+      const user = userEvent.setup();
+      const messagesWithMedia: Message[] = [
+        ...mockMessages,
+        {
+          role: "assistant",
+          content: "",
+          timestamp: new Date().toISOString(),
+          attachments: [
+            {
+              type: "image",
+              name: "r.png",
+              url: "blob:http://localhost/pending",
+              mimeType: "image/png",
+              file: new File(["x"], "r.png", { type: "image/png" }),
+            },
+          ],
+        },
+      ];
+      mockedAttacksApi.getMessages.mockResolvedValue({ messages: [] });
+      mockedMapper.backendMessagesToFrontend.mockReturnValue(messagesWithMedia);
+      // Hold the media read open so the export stays in flight across clicks.
+      let releaseMedia: (value: string) => void = () => {};
+      mockedMapper.fileToBase64.mockImplementation(
+        () => new Promise<string>((resolve) => { releaseMedia = resolve; })
+      );
+      render(
+        <TestWrapper>
+          <ChatWindow
+            {...defaultProps}
+            attackResultId="ar-1"
+            conversationId="conv-1"
+            activeConversationId="conv-1"
+          />
+        </TestWrapper>
+      );
+      await waitFor(() =>
+        expect(screen.getByRole("button", { name: /export conversation/i })).toBeEnabled()
+      );
+      const { clickSpy } = spyOnDownloadAnchor();
+
+      await user.click(screen.getByRole("button", { name: /export conversation/i }));
+      await user.click(screen.getByTestId("export-html-item"));
+      const exportButton = screen.getByRole("button", { name: /export conversation/i });
+      await waitFor(() => expect(within(exportButton).getByRole("progressbar")).toBeInTheDocument());
+
+      await user.click(screen.getByRole("button", { name: /export conversation/i }));
+      await user.click(screen.getByTestId("export-html-item"));
+
+      // The guard, not the menu, is what stops the second export starting.
+      expect(mockedMapper.fileToBase64).toHaveBeenCalledTimes(1);
+
+      releaseMedia("eA==");
+      await waitFor(() => expect(clickSpy).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(within(exportButton).queryByRole("progressbar")).not.toBeInTheDocument());
+    });
+
     it("exports the displayed conversation id when it differs from the attack's main conversation", async () => {
       const user = userEvent.setup();
       // Viewing a branch: activeConversationId (displayed) differs from the
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 0beb6645ea..358d57b474 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -128,6 +128,7 @@ export default function ChatWindow({
   const isSending = activeConversationId ? sendingConversations.has(activeConversationId) : Boolean(sendingConversations.size)
   const [isPanelOpen, setIsPanelOpen] = useState(false)
   const [isExporting, setIsExporting] = useState(false)
+  const isExportingRef = useRef(false)
   const [isNarrowScreen, setIsNarrowScreen] = useState(matchesNarrowScreen)
   const [isConverterPanelOpen, setIsConverterPanelOpen] = useState(false)
   // Conversation-wide preference for rendering message text as Markdown.
@@ -718,15 +719,19 @@ export default function ChatWindow({
     !awaitingConversationLoad
 
   const handleExport = async (format: ExportFormat) => {
-    if (isExporting) {
+    // A ref, not the state flag: two clicks in the same tick would both read
+    // the pre-render value and start duplicate exports.
+    if (isExportingRef.current) {
       return
     }
+    isExportingRef.current = true
     setIsExporting(true)
     try {
       await exportConversation({ messages, conversationId: activeConversationId ?? conversationId, format })
     } catch (err) {
       console.error('Failed to export conversation:', err)
     } finally {
+      isExportingRef.current = false
       setIsExporting(false)
     }
   }
diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index e31715db9b..45aeb54a60 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -490,6 +490,41 @@ describe("conversationExport", () => {
       expect(html).not.toContain("<script>alert(1)</script>");
     });
 
+    it("escapes a hostile url so it cannot break out of the src attribute", async () => {
+      const html = await conversationToHtml(
+        [
+          message({
+            content: "",
+            attachments: [attachment({ url: 'data:image/png;base64,AAAA" onerror="alert(1)' })],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      const img = new DOMParser().parseFromString(html, "text/html").querySelector("img");
+      expect(img).not.toBeNull();
+      expect(img?.getAttribute("onerror")).toBeNull();
+      expect(img?.getAttributeNames().sort()).toEqual(["alt", "src"]);
+    });
+
+    it("escapes a hostile filename so it cannot break out of the alt attribute", async () => {
+      const html = await conversationToHtml(
+        [
+          message({
+            content: "",
+            attachments: [
+              attachment({ url: "data:image/png;base64,AAAA", name: 'x" onerror="alert(1)' }),
+            ],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      const img = new DOMParser().parseFromString(html, "text/html").querySelector("img");
+      expect(img?.getAttribute("onerror")).toBeNull();
+      expect(img?.getAttribute("alt")).toBe('x" onerror="alert(1)');
+    });
+
     it("escapes a hostile mime type instead of letting it break out of the src attribute", async () => {
       const html = await conversationToHtml(
         [
@@ -607,6 +642,72 @@ describe("conversationExport", () => {
       expect(html).not.toContain("base64");
     });
 
+    it("names but does not embed an inline data uri over the size cap", async () => {
+      const oversized = `data:image/png;base64,${"A".repeat(14 * 1024 * 1024)}`;
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url: oversized })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).not.toContain("base64,AAAA");
+      expect(html.length).toBeLessThan(10000);
+    });
+
+    it("names but does not embed an empty inline data uri", async () => {
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url: "data:image/png;base64," })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).not.toContain("<img");
+    });
+
+    it("does not fetch a same-origin url outside the media endpoint", async () => {
+      // Any other same-origin path is answered by the single-page app, whose
+      // HTML would otherwise be embedded as if it were the image.
+      const fetchMock = mockFetchOnce("<!doctype html><html>app shell</html>", { type: "text/html" });
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url: "/attacks/conv-1" })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).not.toContain("app shell");
+    });
+
+    it("prefers the attachment mime type over the one the server reports", async () => {
+      mockFetchOnce("hello", { type: "text/plain" });
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ mimeType: "image/png" })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("data:image/png;base64,aGVsbG8=");
+    });
+
+    it("names file attachments rather than embedding them as links", async () => {
+      const fetchMock = mockFetchOnce("hello");
+      const html = await conversationToHtml(
+        [
+          message({
+            content: "",
+            attachments: [
+              attachment({ type: "file", name: "evil.html", mimeType: "text/html", url: "data:text/html;base64,AAAA" }),
+            ],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(html).toContain("[File: evil.html (text/html)]");
+      expect(html).not.toContain("<a ");
+      expect(html).not.toContain("data:text/html");
+    });
+
     it("names but does not embed a zero-byte attachment", async () => {
       mockFetchOnce("");
       const html = await conversationToHtml(
@@ -627,7 +728,7 @@ describe("conversationExport", () => {
       expect(html).toContain("data:application/octet-stream;base64,aGVsbG8=");
     });
 
-    it("renders players for audio and video and a download link for files", async () => {
+    it("renders players for audio and video and names other files", async () => {
       const html = await conversationToHtml(
         [
           message({
@@ -644,7 +745,7 @@ describe("conversationExport", () => {
       );
       expect(html).toContain("<audio controls");
       expect(html).toContain("<video controls");
-      expect(html).toContain('download="f.txt"');
+      expect(html).toContain("[File: f.txt (text/plain)]");
     });
 
     it("renders original content, original attachments, reasoning, and errors like Markdown does", async () => {
diff --git a/frontend/src/utils/conversationExport.ts b/frontend/src/utils/conversationExport.ts
index 8a6e281846..f0dddb9f4f 100644
--- a/frontend/src/utils/conversationExport.ts
+++ b/frontend/src/utils/conversationExport.ts
@@ -37,6 +37,13 @@ const MEDIA_LABELS: Record<MessageAttachment['type'], string> = {
  */
 const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
 
+/**
+ * The only path the export reads attachment bytes from. Any other same-origin
+ * path is answered by the single-page app, whose HTML would otherwise be
+ * embedded as if it were the media.
+ */
+const MEDIA_ENDPOINT_PATH = '/api/media'
+
 const HTML_STYLESHEET = `
 body { font-family: 'Segoe UI', system-ui, sans-serif; color: #201f1e; margin: 2rem auto; max-width: 50rem; }
 h1 { font-size: 1.5rem; }
@@ -311,19 +318,24 @@ async function resolveMedia(messages: Message[]): Promise<ResolvedMedia> {
  * Resolve one attachment to an embeddable `data:` URI, or `null` when the
  * bytes are unavailable. Already-inline values are reused as-is, pending
  * uploads are read from their local `File`, and everything else is fetched
- * only when it is same-origin — a cross-origin or `blob:` URL is blocked by
- * the app's own content security policy, so requesting it would only produce a
- * console error.
+ * only from the media endpoint — a cross-origin or `blob:` URL is blocked by
+ * the app's own content security policy, and any other same-origin path is
+ * answered by the single-page app rather than by media bytes.
  */
 async function attachmentToDataUri(attachment: MessageAttachment): Promise<string | null> {
+  // Only inert media is embedded. A file attachment can hold active content,
+  // and this artifact is meant to be shared, so files are named instead.
+  if (attachment.type === 'file') {
+    return null
+  }
   try {
     if (attachment.url.startsWith('data:')) {
-      return attachment.url
+      return withinInlineCap(attachment.url) ? attachment.url : null
     }
     if (attachment.file) {
       return await blobToDataUri(attachment.file, attachment.mimeType)
     }
-    if (!isSameOriginHttpUrl(attachment.url)) {
+    if (!isMediaEndpointUrl(attachment.url)) {
       return null
     }
     const response = await fetch(attachment.url)
@@ -336,6 +348,22 @@ async function attachmentToDataUri(attachment: MessageAttachment): Promise<strin
   }
 }
 
+/**
+ * Report whether an already-inline `data:` URI is small enough to embed. Only
+ * base64 payloads carry a measurable size; anything else is short by nature.
+ */
+function withinInlineCap(dataUri: string): boolean {
+  const marker = ';base64,'
+  const start = dataUri.indexOf(marker)
+  if (start === -1) {
+    return true
+  }
+  const payload = dataUri.slice(start + marker.length)
+  const padding = payload.endsWith('==') ? 2 : payload.endsWith('=') ? 1 : 0
+  const bytes = Math.floor((payload.length * 3) / 4) - padding
+  return bytes > 0 && bytes <= MAX_INLINE_ATTACHMENT_BYTES
+}
+
 /** Encode a blob as a `data:` URI, skipping empty and oversized payloads. */
 async function blobToDataUri(blob: Blob, mimeType: string): Promise<string | null> {
   if (blob.size === 0 || blob.size > MAX_INLINE_ATTACHMENT_BYTES) {
@@ -348,10 +376,14 @@ async function blobToDataUri(blob: Blob, mimeType: string): Promise<string | nul
   return `data:${mimeType || blob.type || 'application/octet-stream'};base64,${base64}`
 }
 
-function isSameOriginHttpUrl(url: string): boolean {
+function isMediaEndpointUrl(url: string): boolean {
   try {
     const parsed = new URL(url, window.location.origin)
-    return (parsed.protocol === 'http:' || parsed.protocol === 'https:') && parsed.origin === window.location.origin
+    return (
+      (parsed.protocol === 'http:' || parsed.protocol === 'https:') &&
+      parsed.origin === window.location.origin &&
+      parsed.pathname === MEDIA_ENDPOINT_PATH
+    )
   } catch {
     return false
   }
@@ -406,15 +438,12 @@ function renderAttachment(attachment: MessageAttachment, dataUri: string | null)
   // The MIME type is echoed into the data URI, so escape it like any other
   // untrusted value before it lands in an attribute.
   const source = escapeHtml(dataUri)
-  const name = escapeHtml(attachment.name)
   const body =
     attachment.type === 'image'
-      ? `<img src="${source}" alt="${name}" />`
+      ? `<img src="${source}" alt="${escapeHtml(attachment.name)}" />`
       : attachment.type === 'audio'
         ? `<audio controls src="${source}"></audio>`
-        : attachment.type === 'video'
-          ? `<video controls src="${source}"></video>`
-          : `<a href="${source}" download="${name}">${caption}</a>`
+        : `<video controls src="${source}"></video>`
   return `<figure>${body}<figcaption>${caption}</figcaption></figure>`
 }
 

From a3effeafc1719588054044d049dc011b209eadd7 Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Wed, 19 Aug 2026 20:04:46 +0000
Subject: [PATCH 3/8] FIX: Say what the export left out, and keep links out of
 it

The HTML export could hand over a file full of named placeholders without
ever saying that anything was missing, so the page now states how many
attachments it embedded and why the rest were left out, and each
placeholder gives its own reason.

Reading the media is now sequential and shares repeated sources, a whole
document has a size budget on top of the per-attachment cap, and an
oversized response is abandoned on its declared length instead of being
downloaded and thrown away. The cap now measures every form a data URI
can take, so a percent-encoded payload can no longer slip past it.

The JSON export no longer writes attachment source URLs, which were
either a signed storage link or an absolute path on the operator's
machine.
---
 doc/gui/0_gui.md                              |   8 +-
 frontend/e2e/chat.spec.ts                     |  55 +++++
 .../src/components/Chat/ChatWindow.test.tsx   |   5 +-
 frontend/src/components/Chat/ChatWindow.tsx   |  10 +-
 frontend/src/utils/conversationExport.test.ts | 211 +++++++++++++++++-
 frontend/src/utils/conversationExport.ts      | 199 +++++++++++++----
 6 files changed, 427 insertions(+), 61 deletions(-)

diff --git a/doc/gui/0_gui.md b/doc/gui/0_gui.md
index b32e64ca0b..6c1d2f70ae 100644
--- a/doc/gui/0_gui.md
+++ b/doc/gui/0_gui.md
@@ -78,9 +78,13 @@ Click the **Export** button in the ribbon to download the conversation that is c
 
 - **Markdown (`.md`):** A human-readable transcript with each message labeled by role. Best for reading, sharing, or pasting into reports.
 - **JSON (`.json`):** A structured record of the conversation for tooling and further processing.
-- **HTML (`.html`):** A single self-contained page with the images, audio, and video embedded in the file itself. Best for sharing a conversation as evidence, and for printing — open it and use your browser's **Print → Save as PDF**.
+- **HTML (`.html`):** A single self-contained page with the images, audio, and video inside the file itself. Best for sharing a conversation as evidence, and for printing — open it and use your browser's **Print → Save as PDF**.
 
-Markdown and JSON are built entirely in your browser with no network requests. The HTML export additionally re-reads the attachments it can reach on the same origin — a read-only request for media that is already shown on screen — so it can embed them in the file; no conversation content is uploaded. Attachments it cannot read or embed, such as media held in Azure Blob storage, anything larger than 10 MB, and non-media files, are listed by name instead, and their source links are deliberately left out of the file. All formats capture exactly what is shown in the chat, including the system prompt shown in the banner. Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
+Every format includes the whole conversation as shown in the chat, including the system prompt shown in the banner.
+
+Markdown and JSON record the names of attachments but not the media itself, so pictures and audio do not travel with those files. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, very large attachments are skipped to keep the file openable, and non-media files are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
+
+Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
 
 > **Note:** Exported files can contain adversarial prompts, model responses, and other sensitive material. Store and share them responsibly.
 
diff --git a/frontend/e2e/chat.spec.ts b/frontend/e2e/chat.spec.ts
index ec4358f471..107927320e 100644
--- a/frontend/e2e/chat.spec.ts
+++ b/frontend/e2e/chat.spec.ts
@@ -1009,4 +1009,59 @@ test.describe("Conversation export with media", () => {
     expect(download.suggestedFilename()).toMatch(/\.html$/);
     expect(content).toContain("<img src=\"data:image/svg+xml");
   });
+
+  test("embeds media it has to fetch back from the media endpoint", async ({ page }) => {
+    // A 1x1 PNG, served by a stubbed /api/media route so the export exercises
+    // the fetch → blob → base64 path rather than an already-inline data URI.
+    const pngBase64 =
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGIAAgAABQABDQotsgAAAABJRU5ErkJggg==";
+    const mediaPath = "/api/media?path=/dbdata/prompt-memory-entries/images/e2e.png";
+
+    await buildModalityMock(
+      [
+        {
+          id: "img-fetch-1",
+          original_value_data_type: "text",
+          converted_value_data_type: "image_path",
+          original_value: "generated image",
+          converted_value: mediaPath,
+          converted_value_url: mediaPath,
+          converted_value_mime_type: "image/png",
+          scores: [],
+          response_error: "none",
+        },
+      ],
+      "e2e-export-fetch-conv",
+    )(page);
+    await page.route("**/api/media**", async (route) => {
+      await route.fulfill({
+        status: 200,
+        headers: { "content-type": "image/png" },
+        body: Buffer.from(pngBase64, "base64"),
+      });
+    });
+
+    await page.goto("/");
+    await activateMockTarget(page);
+
+    await page.getByRole("textbox").fill("Generate an image");
+    await page.getByRole("button", { name: /send/i }).click();
+    await expect(page.locator('img:not([alt="Co-PyRIT Logo"])')).toBeVisible({ timeout: 10000 });
+
+    const exportButton = page.getByTestId("export-conversation-btn");
+    await expect(exportButton).toBeEnabled();
+    const downloadPromise = page.waitForEvent("download");
+    await exportButton.click();
+    await page.getByTestId("export-html-item").click();
+
+    const download = await downloadPromise;
+    const filePath = await download.path();
+    expect(filePath).not.toBeNull();
+    const content = readFileSync(filePath, "utf-8");
+
+    expect(content).toContain(`data:image/png;base64,${pngBase64}`);
+    expect(content).toContain("Attachments: 1 of 1 embedded");
+    // The path the bytes came from must not travel with the file.
+    expect(content).not.toContain("/api/media");
+  });
 });
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index aa5db298ea..d6cd0ab1ec 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -3574,7 +3574,10 @@ describe("ChatWindow Integration", () => {
       await user.click(screen.getByRole("button", { name: /export conversation/i }));
       await user.click(screen.getByTestId("export-html-item"));
 
-      // The guard, not the menu, is what stops the second export starting.
+      // The menu shows the export is already running, and the guard stops a
+      // second one from starting even if the click lands anyway.
+      expect(screen.getByTestId("export-html-item")).toHaveAttribute("aria-disabled", "true");
+      expect(screen.getByTestId("export-markdown-item")).toHaveAttribute("aria-disabled", "true");
       expect(mockedMapper.fileToBase64).toHaveBeenCalledTimes(1);
 
       releaseMedia("eA==");
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 358d57b474..65bd48a224 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -788,13 +788,17 @@ export default function ChatWindow({
               </MenuTrigger>
               <MenuPopover>
                 <MenuList>
-                  <MenuItem onClick={() => handleExport('markdown')} data-testid="export-markdown-item">
+                  <MenuItem
+                    onClick={() => handleExport('markdown')}
+                    disabled={isExporting}
+                    data-testid="export-markdown-item"
+                  >
                     Export as Markdown (.md)
                   </MenuItem>
-                  <MenuItem onClick={() => handleExport('json')} data-testid="export-json-item">
+                  <MenuItem onClick={() => handleExport('json')} disabled={isExporting} data-testid="export-json-item">
                     Export as JSON (.json)
                   </MenuItem>
-                  <MenuItem onClick={() => handleExport('html')} data-testid="export-html-item">
+                  <MenuItem onClick={() => handleExport('html')} disabled={isExporting} data-testid="export-html-item">
                     Export as HTML (.html)
                   </MenuItem>
                 </MenuList>
diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index 45aeb54a60..d9dc67f955 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -315,6 +315,67 @@ describe("conversationExport", () => {
       expect(attachment.pieceId).toBe("piece-9");
     });
 
+    it("drops the signed storage url so a shared file carries no credentials", () => {
+      const json = conversationToJson(
+        [
+          message({
+            attachments: [
+              {
+                type: "image",
+                name: "result.png",
+                url: "https://acct.blob.core.windows.net/c/result.png?sv=2024&sig=SECRETSIG",
+                mimeType: "image/png",
+              },
+            ],
+          }),
+        ],
+        "conv-1"
+      );
+      expect(json).not.toContain("SECRETSIG");
+      expect(json).not.toContain("blob.core.windows.net");
+      expect(JSON.parse(json).messages[0].attachments[0].url).toBe("");
+      expect(JSON.parse(json).messages[0].attachments[0].name).toBe("result.png");
+    });
+
+    it("drops the local media path so a shared file does not expose the operator's disk", () => {
+      const json = conversationToJson(
+        [
+          message({
+            attachments: [
+              {
+                type: "image",
+                name: "result.png",
+                url: "/api/media?path=/home/op/dbdata/prompt-memory-entries/images/1.png",
+                mimeType: "image/png",
+              },
+            ],
+          }),
+        ],
+        "conv-1"
+      );
+      expect(json).not.toContain("/home/op/dbdata");
+      expect(json).not.toContain("/api/media");
+    });
+
+    it("keeps an inline data uri, which is the payload rather than a pointer to it", () => {
+      const json = conversationToJson(
+        [
+          message({
+            attachments: [
+              {
+                type: "image",
+                name: "result.png",
+                url: "data:image/png;base64,AAAA",
+                mimeType: "image/png",
+              },
+            ],
+          }),
+        ],
+        "conv-1"
+      );
+      expect(JSON.parse(json).messages[0].attachments[0].url).toBe("data:image/png;base64,AAAA");
+    });
+
     it("keeps a serializable metadata field named 'file' (only the attachment File handle is stripped)", () => {
       const file = new File(["x"], "local.png", { type: "image/png" });
       const json = conversationToJson(
@@ -595,7 +656,7 @@ describe("conversationExport", () => {
       expect(fetchMock).not.toHaveBeenCalled();
       expect(html).not.toContain("SECRETSIG");
       expect(html).not.toContain("blob.core.windows.net");
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
     });
 
     it("names but does not embed a blob url with no local file", async () => {
@@ -606,7 +667,7 @@ describe("conversationExport", () => {
         FIXED_NOW,
       );
       expect(fetchMock).not.toHaveBeenCalled();
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
     });
 
     it("falls back to a placeholder when the media endpoint refuses the file", async () => {
@@ -616,7 +677,7 @@ describe("conversationExport", () => {
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
       expect(html).not.toContain("Access denied");
       expect(html).not.toContain("/api/media");
     });
@@ -628,7 +689,7 @@ describe("conversationExport", () => {
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
     });
 
     it("names but does not embed an attachment over the inline size cap", async () => {
@@ -638,7 +699,7 @@ describe("conversationExport", () => {
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — too large to embed]");
       expect(html).not.toContain("base64");
     });
 
@@ -649,7 +710,7 @@ describe("conversationExport", () => {
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — too large to embed]");
       expect(html).not.toContain("base64,AAAA");
       expect(html.length).toBeLessThan(10000);
     });
@@ -660,7 +721,7 @@ describe("conversationExport", () => {
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
       expect(html).not.toContain("<img");
     });
 
@@ -674,7 +735,7 @@ describe("conversationExport", () => {
         FIXED_NOW,
       );
       expect(fetchMock).not.toHaveBeenCalled();
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
       expect(html).not.toContain("app shell");
     });
 
@@ -703,7 +764,7 @@ describe("conversationExport", () => {
         FIXED_NOW,
       );
       expect(fetchMock).not.toHaveBeenCalled();
-      expect(html).toContain("[File: evil.html (text/html)]");
+      expect(html).toContain("[File: evil.html (text/html) — not a media file]");
       expect(html).not.toContain("<a ");
       expect(html).not.toContain("data:text/html");
     });
@@ -715,7 +776,7 @@ describe("conversationExport", () => {
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png)]");
+      expect(html).toContain("[Image: result.png (image/png) — could not be read]");
     });
 
     it("falls back to a generic mime type when the attachment has none", async () => {
@@ -745,7 +806,7 @@ describe("conversationExport", () => {
       );
       expect(html).toContain("<audio controls");
       expect(html).toContain("<video controls");
-      expect(html).toContain("[File: f.txt (text/plain)]");
+      expect(html).toContain("[File: f.txt (text/plain) — not a media file]");
     });
 
     it("renders original content, original attachments, reasoning, and errors like Markdown does", async () => {
@@ -786,6 +847,134 @@ describe("conversationExport", () => {
       expect(html).toContain("Messages: 0");
       expect(html).not.toContain("<article");
     });
+
+    it("reports that every attachment made it into the file", async () => {
+      mockFetchOnce("hello");
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("Attachments: 1 of 1 embedded");
+      expect(html).not.toContain("not embedded (");
+    });
+
+    it("says how many attachments were left out and why", async () => {
+      mockFetchOnce("hello");
+      const html = await conversationToHtml(
+        [
+          message({
+            attachments: [
+              attachment({ name: "a.png", url: "https://acct.blob.core.windows.net/c/a.png?sig=S" }),
+              attachment({ name: "b.png", url: `data:image/png;base64,${"A".repeat(16 * 1024 * 1024)}` }),
+              attachment({ type: "file", name: "c.txt", mimeType: "text/plain" }),
+            ],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("Attachments: 0 of 3 embedded");
+      expect(html).toContain(
+        "3 not embedded (1 could not be read; 1 too large to embed; 1 not a media file)",
+      );
+    });
+
+    it("says there are no attachments when the conversation has none", async () => {
+      const html = await conversationToHtml([message()], "conv-1", FIXED_NOW);
+      expect(html).toContain("Attachments: none");
+    });
+
+    it("measures a percent-encoded data uri instead of assuming it is small", async () => {
+      const url = `data:image/svg+xml,${"%20".repeat(4 * 1024 * 1024)}`;
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png) — too large to embed]");
+      expect(html).not.toContain("data:image/svg+xml");
+    });
+
+    it("measures an uppercase base64 marker like a lowercase one", async () => {
+      const url = `data:image/png;BASE64,${"A".repeat(16 * 1024 * 1024)}`;
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: result.png (image/png) — too large to embed]");
+    });
+
+    it("stops embedding once the whole document has used its budget", async () => {
+      // Each attachment clears the per-attachment cap; together they do not.
+      const payload = `data:image/png;base64,${"A".repeat(8 * 1024 * 1024)}`;
+      const attachments = Array.from({ length: 12 }, (_, index) =>
+        attachment({ name: `img-${index}.png`, url: payload.replace("AAAA", `AAA${index}`) }),
+      );
+      const html = await conversationToHtml(
+        [message({ attachments })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      const embedded = (html.match(/<img /g) ?? []).length;
+      expect(embedded).toBeGreaterThan(0);
+      expect(embedded).toBeLessThan(attachments.length);
+      expect(html).toContain("too large to embed");
+    });
+
+    it("reads a repeated attachment once and embeds it in both places", async () => {
+      const fetchMock = mockFetchOnce("hello");
+      const html = await conversationToHtml(
+        [
+          message({ attachments: [attachment()] }),
+          message({ attachments: [attachment()] }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect((html.match(/data:image\/png;base64,aGVsbG8=/g) ?? []).length).toBe(2);
+      expect(html).toContain("Attachments: 2 of 2 embedded");
+    });
+
+    it("does not read the body of a response that declares it is too large", async () => {
+      const blob = jest.fn();
+      global.fetch = jest.fn().mockResolvedValue({
+        ok: true,
+        headers: { get: () => String(11 * 1024 * 1024) },
+        blob,
+      }) as unknown as typeof fetch;
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment()] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(blob).not.toHaveBeenCalled();
+      expect(html).toContain("[Image: result.png (image/png) — too large to embed]");
+    });
+
+    it("gives audio and video players an accessible name", async () => {
+      const html = await conversationToHtml(
+        [
+          message({
+            attachments: [
+              attachment({ type: "audio", name: "clip.wav", mimeType: "audio/wav", url: "data:audio/wav;base64,AAAA" }),
+              attachment({ type: "video", name: "clip.mp4", mimeType: "video/mp4", url: "data:video/mp4;base64,AAAA" }),
+            ],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain('aria-label="clip.wav"');
+      expect(html).toContain('aria-label="clip.mp4"');
+    });
+
+    it("scales to the width of the screen it is opened on", async () => {
+      const html = await conversationToHtml([message()], "conv-1", FIXED_NOW);
+      expect(html).toContain('<meta name="viewport" content="width=device-width, initial-scale=1" />');
+    });
   });
 
   describe("exportConversation", () => {
diff --git a/frontend/src/utils/conversationExport.ts b/frontend/src/utils/conversationExport.ts
index f0dddb9f4f..f5c14db487 100644
--- a/frontend/src/utils/conversationExport.ts
+++ b/frontend/src/utils/conversationExport.ts
@@ -30,12 +30,29 @@ const MEDIA_LABELS: Record<MessageAttachment['type'], string> = {
   file: 'File',
 }
 
+/** How each omission reads to whoever opens the file. */
+const OMISSION_REASONS: Record<OmissionReason, string> = {
+  unreadable: 'could not be read',
+  'too-large': 'too large to embed',
+  'not-embeddable': 'not a media file',
+}
+
+/** Fixed order so the summary reads the same way for the same conversation. */
+const OMISSION_ORDER: OmissionReason[] = ['unreadable', 'too-large', 'not-embeddable']
+
 /**
  * Largest attachment inlined into an HTML export. Base64 inflates bytes by a
  * third, so anything above this is listed by name instead of embedded to keep
  * the file openable.
  */
-const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
+export const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
+
+/**
+ * Largest total payload inlined into one HTML export. Without it, many
+ * attachments that each clear the per-attachment cap still add up to a file
+ * too big to open or mail; once the budget is spent the rest are named.
+ */
+export const MAX_TOTAL_INLINE_BYTES = 50 * 1024 * 1024
 
 /**
  * The only path the export reads attachment bytes from. Any other same-origin
@@ -53,6 +70,7 @@ h1 { font-size: 1.5rem; }
 .timestamp { color: #605e5c; font-size: 0.85rem; margin-left: 0.5rem; }
 .label { font-weight: 600; margin-bottom: 0.25rem; }
 .placeholder { color: #605e5c; font-style: italic; }
+.omissions { color: #605e5c; }
 .error { color: #a4262c; }
 pre { background: #f3f2f1; border-radius: 4px; padding: 0.5rem; white-space: pre-wrap; word-break: break-word; }
 figure { margin: 0.5rem 0; }
@@ -173,12 +191,14 @@ export async function conversationToHtml(
     `Conversation: ${escapeHtml(conversationId ?? '(unsaved)')}`,
     `Exported: ${escapeHtml(exportedAt.toISOString())}`,
     `Messages: ${exported.length}`,
+    attachmentSummary(media),
   ].join('<br />')
 
   return `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CoPyRIT conversation export</title>
 <style>${HTML_STYLESHEET}</style>
 </head>
@@ -191,6 +211,33 @@ ${exported.map((message) => renderMessage(message, media)).join('\n')}
 `
 }
 
+/**
+ * State, in the document itself, how much of the conversation made it in. An
+ * incomplete export must never look complete to whoever it is handed to, so
+ * every attachment left out is counted and explained here as well as in place.
+ */
+function attachmentSummary(media: ResolvedMedia): string {
+  const outcomes = [...media.values()]
+  if (outcomes.length === 0) {
+    return 'Attachments: none'
+  }
+  const embedded = outcomes.filter((outcome) => outcome.dataUri !== null).length
+  const omitted = outcomes.length - embedded
+  if (omitted === 0) {
+    return `Attachments: ${embedded} of ${outcomes.length} embedded`
+  }
+  const reasons = OMISSION_ORDER.filter((reason) =>
+    outcomes.some((outcome) => outcome.dataUri === null && outcome.reason === reason),
+  ).map((reason) => {
+    const count = outcomes.filter((outcome) => outcome.dataUri === null && outcome.reason === reason).length
+    return `${count} ${OMISSION_REASONS[reason]}`
+  })
+  return (
+    `Attachments: ${embedded} of ${outcomes.length} embedded` +
+    `<br /><span class="omissions">${omitted} not embedded (${reasons.join('; ')})</span>`
+  )
+}
+
 /**
  * Build a filesystem-safe filename for an exported conversation, e.g.
  * `copyrit-conversation-<id>-<timestamp>.md`. Falls back to a name without the
@@ -250,9 +297,19 @@ function messageForExport(message: Message): Message {
   return next
 }
 
+/**
+ * Strip an attachment down to what is safe to write into a shared file: the
+ * `File` handle can't be serialized, and the source URL is a short-lived signed
+ * storage link or an absolute path on the operator's machine, so neither
+ * belongs in a document that gets mailed around. Inline `data:` values stay —
+ * there the URL is the payload, not a pointer to it.
+ */
 function attachmentWithoutFile(attachment: MessageAttachment): MessageAttachment {
   const next = { ...attachment }
   delete next.file
+  if (!next.url.startsWith('data:')) {
+    next.url = ''
+  }
   return next
 }
 
@@ -296,84 +353,133 @@ function longestBacktickRun(content: string): number {
   return longest
 }
 
-type ResolvedMedia = Map<MessageAttachment, string | null>
+/** Why an attachment is named in the document instead of embedded in it. */
+type OmissionReason = 'unreadable' | 'too-large' | 'not-embeddable'
+
+type ResolvedAttachment = { dataUri: string } | { dataUri: null; reason: OmissionReason }
+
+type ResolvedMedia = Map<MessageAttachment, ResolvedAttachment>
 
 /**
  * Read every attachment in the conversation, mapping each to a `data:` URI or
- * to `null` when its bytes cannot be read. Resolution is the only step that
+ * to the reason its bytes were left out. Resolution is the only step that
  * touches the network; rendering stays a pure function of the result.
+ *
+ * Attachments are read one at a time so a long conversation cannot open a
+ * fetch per attachment at once, and identical sources are read once and shared
+ * so the same bytes are never embedded twice.
  */
 async function resolveMedia(messages: Message[]): Promise<ResolvedMedia> {
   const attachments = messages.flatMap((message) => [
     ...(message.attachments ?? []),
     ...(message.originalAttachments ?? []),
   ])
-  const resolved = await Promise.all(
-    attachments.map(async (attachment) => [attachment, await attachmentToDataUri(attachment)] as const),
-  )
-  return new Map(resolved)
+  const resolved: ResolvedMedia = new Map()
+  const seen = new Map<string, ResolvedAttachment>()
+  let remainingBytes = MAX_TOTAL_INLINE_BYTES
+
+  for (const attachment of attachments) {
+    const key = `${attachment.type}\u0000${attachment.mimeType}\u0000${attachment.url}`
+    // A pending upload carries its own bytes, so it can't be keyed by URL.
+    const shared = attachment.file ? undefined : seen.get(key)
+    if (shared) {
+      resolved.set(attachment, shared)
+      continue
+    }
+    const outcome = await resolveAttachment(attachment, remainingBytes)
+    if (outcome.dataUri) {
+      remainingBytes -= base64ByteLength(outcome.dataUri)
+    }
+    resolved.set(attachment, outcome)
+    if (!attachment.file) {
+      seen.set(key, outcome)
+    }
+  }
+  return resolved
 }
 
 /**
- * Resolve one attachment to an embeddable `data:` URI, or `null` when the
- * bytes are unavailable. Already-inline values are reused as-is, pending
- * uploads are read from their local `File`, and everything else is fetched
- * only from the media endpoint — a cross-origin or `blob:` URL is blocked by
- * the app's own content security policy, and any other same-origin path is
- * answered by the single-page app rather than by media bytes.
+ * Resolve one attachment to an embeddable `data:` URI, or report why it could
+ * not be embedded. Already-inline values are reused as-is, pending uploads are
+ * read from their local `File`, and everything else is fetched only from the
+ * media endpoint — a cross-origin or `blob:` URL is blocked by the app's own
+ * content security policy, and any other same-origin path is answered by the
+ * single-page app rather than by media bytes.
  */
-async function attachmentToDataUri(attachment: MessageAttachment): Promise<string | null> {
+async function resolveAttachment(
+  attachment: MessageAttachment,
+  remainingBytes: number,
+): Promise<ResolvedAttachment> {
   // Only inert media is embedded. A file attachment can hold active content,
   // and this artifact is meant to be shared, so files are named instead.
   if (attachment.type === 'file') {
-    return null
+    return { dataUri: null, reason: 'not-embeddable' }
   }
   try {
     if (attachment.url.startsWith('data:')) {
-      return withinInlineCap(attachment.url) ? attachment.url : null
+      const inlineBytes = base64ByteLength(attachment.url)
+      return inlineBytes > 0 && withinBudget(inlineBytes, remainingBytes)
+        ? { dataUri: attachment.url }
+        : { dataUri: null, reason: inlineBytes > 0 ? 'too-large' : 'unreadable' }
     }
     if (attachment.file) {
-      return await blobToDataUri(attachment.file, attachment.mimeType)
+      return await blobToDataUri(attachment.file, attachment.mimeType, remainingBytes)
     }
     if (!isMediaEndpointUrl(attachment.url)) {
-      return null
+      return { dataUri: null, reason: 'unreadable' }
     }
     const response = await fetch(attachment.url)
     if (!response.ok) {
-      return null
+      return { dataUri: null, reason: 'unreadable' }
     }
-    return await blobToDataUri(await response.blob(), attachment.mimeType)
+    // Check the advertised length before reading the body, so an oversized
+    // response is abandoned instead of downloaded only to be discarded.
+    const declaredBytes = Number(response.headers?.get('content-length'))
+    if (Number.isFinite(declaredBytes) && declaredBytes > 0 && !withinBudget(declaredBytes, remainingBytes)) {
+      return { dataUri: null, reason: 'too-large' }
+    }
+    return await blobToDataUri(await response.blob(), attachment.mimeType, remainingBytes)
   } catch {
-    return null
+    return { dataUri: null, reason: 'unreadable' }
   }
 }
 
+/** Report whether a payload fits both the per-attachment cap and what is left of the budget. */
+function withinBudget(bytes: number, remainingBytes: number): boolean {
+  return bytes <= MAX_INLINE_ATTACHMENT_BYTES && bytes <= remainingBytes
+}
+
 /**
- * Report whether an already-inline `data:` URI is small enough to embed. Only
- * base64 payloads carry a measurable size; anything else is short by nature.
+ * Decoded size of a `data:` URI payload. Percent-encoded payloads are measured
+ * from their encoded text rather than assumed small, so the cap holds for every
+ * form a `data:` URI can take.
  */
-function withinInlineCap(dataUri: string): boolean {
-  const marker = ';base64,'
-  const start = dataUri.indexOf(marker)
-  if (start === -1) {
-    return true
+function base64ByteLength(dataUri: string): number {
+  const comma = dataUri.indexOf(',')
+  if (comma === -1) {
+    return 0
+  }
+  const payload = dataUri.slice(comma + 1)
+  if (!/;base64$/i.test(dataUri.slice(0, comma))) {
+    return payload.length
   }
-  const payload = dataUri.slice(start + marker.length)
   const padding = payload.endsWith('==') ? 2 : payload.endsWith('=') ? 1 : 0
-  const bytes = Math.floor((payload.length * 3) / 4) - padding
-  return bytes > 0 && bytes <= MAX_INLINE_ATTACHMENT_BYTES
+  return Math.max(0, Math.floor((payload.length * 3) / 4) - padding)
 }
 
 /** Encode a blob as a `data:` URI, skipping empty and oversized payloads. */
-async function blobToDataUri(blob: Blob, mimeType: string): Promise<string | null> {
-  if (blob.size === 0 || blob.size > MAX_INLINE_ATTACHMENT_BYTES) {
-    return null
+async function blobToDataUri(blob: Blob, mimeType: string, remainingBytes: number): Promise<ResolvedAttachment> {
+  if (blob.size === 0) {
+    return { dataUri: null, reason: 'unreadable' }
+  }
+  if (!withinBudget(blob.size, remainingBytes)) {
+    return { dataUri: null, reason: 'too-large' }
   }
   const base64 = await fileToBase64(blob)
   if (!base64) {
-    return null
+    return { dataUri: null, reason: 'unreadable' }
   }
-  return `data:${mimeType || blob.type || 'application/octet-stream'};base64,${base64}`
+  return { dataUri: `data:${mimeType || blob.type || 'application/octet-stream'};base64,${base64}` }
 }
 
 function isMediaEndpointUrl(url: string): boolean {
@@ -426,24 +532,29 @@ function renderAttachments(
   if (!attachments || attachments.length === 0) {
     return ''
   }
-  const rendered = attachments.map((attachment) => renderAttachment(attachment, media.get(attachment) ?? null))
+  const rendered = attachments.map((attachment) =>
+    renderAttachment(attachment, media.get(attachment) ?? { dataUri: null, reason: 'unreadable' }),
+  )
   return labelled(heading, rendered.join('\n'))
 }
 
-function renderAttachment(attachment: MessageAttachment, dataUri: string | null): string {
+function renderAttachment(attachment: MessageAttachment, resolved: ResolvedAttachment): string {
   const caption = escapeHtml(`${attachment.name} (${attachment.mimeType})`)
-  if (!dataUri) {
-    return `<p class="placeholder">[${MEDIA_LABELS[attachment.type]}: ${caption}]</p>`
+  if (resolved.dataUri === null) {
+    // Say why the bytes are missing, so nobody mistakes an omission for a
+    // message that simply had nothing in it.
+    return `<p class="placeholder">[${MEDIA_LABELS[attachment.type]}: ${caption} — ${OMISSION_REASONS[resolved.reason]}]</p>`
   }
   // The MIME type is echoed into the data URI, so escape it like any other
   // untrusted value before it lands in an attribute.
-  const source = escapeHtml(dataUri)
+  const source = escapeHtml(resolved.dataUri)
+  const label = escapeHtml(attachment.name)
   const body =
     attachment.type === 'image'
-      ? `<img src="${source}" alt="${escapeHtml(attachment.name)}" />`
+      ? `<img src="${source}" alt="${label}" />`
       : attachment.type === 'audio'
-        ? `<audio controls src="${source}"></audio>`
-        : `<video controls src="${source}"></video>`
+        ? `<audio controls src="${source}" aria-label="${label}"></audio>`
+        : `<video controls src="${source}" aria-label="${label}"></video>`
   return `<figure>${body}<figcaption>${caption}</figcaption></figure>`
 }
 

From 20670e7cb6f6f8f9498094ddde648a06adeda549 Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Wed, 19 Aug 2026 20:47:28 +0000
Subject: [PATCH 4/8] FIX: Make the export budget bound the file it actually
 writes

The document budget charged the decoded size of each attachment while the
page carries the encoded, escaped text, and a repeated attachment was
charged once no matter how many times it was written. Both let the file
grow well past the limit; a measured case produced 80 MB against a 50 MB
budget. Media is now resolved per place in the document rather than per
object, and each place pays for the text it adds.

An attachment that no longer fits now says there is no room left in the
file rather than claiming to be too large on its own, so each reason is
the true one. The summary counts places too, so it can no longer
disagree with the page it describes.

The uppercase data URI test was sized so it passed either way; it now
fails if the marker stops being matched case-insensitively.
---
 doc/gui/0_gui.md                              |   2 +-
 frontend/src/utils/conversationExport.test.ts |  91 +++++++-
 frontend/src/utils/conversationExport.ts      | 208 +++++++++++-------
 3 files changed, 216 insertions(+), 85 deletions(-)

diff --git a/doc/gui/0_gui.md b/doc/gui/0_gui.md
index 6c1d2f70ae..9e8fc38d74 100644
--- a/doc/gui/0_gui.md
+++ b/doc/gui/0_gui.md
@@ -82,7 +82,7 @@ Click the **Export** button in the ribbon to download the conversation that is c
 
 Every format includes the whole conversation as shown in the chat, including the system prompt shown in the banner.
 
-Markdown and JSON record the names of attachments but not the media itself, so pictures and audio do not travel with those files. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, very large attachments are skipped to keep the file openable, and non-media files are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
+Markdown records the names of attachments but never the media itself. JSON keeps media that is already inline, drops the source link for everything else, and so cannot be relied on to carry pictures either. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, very large attachments are skipped to keep the file openable, and non-media files are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
 
 Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
 
diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index d9dc67f955..2725971450 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -6,6 +6,7 @@ import {
   buildExportFilename,
   downloadTextFile,
   EXPORT_MIME_TYPES,
+  MAX_TOTAL_INLINE_CHARACTERS,
 } from "./conversationExport";
 import type { Message, MessageAttachment } from "../types";
 
@@ -357,6 +358,22 @@ describe("conversationExport", () => {
       expect(json).not.toContain("/api/media");
     });
 
+    it("leaves the live conversation untouched while stripping the exported copy", () => {
+      const attachments: MessageAttachment[] = [
+        {
+          type: "image",
+          name: "result.png",
+          url: "/api/media?path=/home/op/dbdata/result.png",
+          mimeType: "image/png",
+        },
+      ];
+      const messages = [message({ attachments })];
+      conversationToJson(messages, "conv-1");
+      // The chat still needs the url to render the image on screen.
+      expect(attachments[0].url).toBe("/api/media?path=/home/op/dbdata/result.png");
+      expect(messages[0].attachments).toBe(attachments);
+    });
+
     it("keeps an inline data uri, which is the payload rather than a pointer to it", () => {
       const json = conversationToJson(
         [
@@ -897,13 +914,79 @@ describe("conversationExport", () => {
     });
 
     it("measures an uppercase base64 marker like a lowercase one", async () => {
-      const url = `data:image/png;BASE64,${"A".repeat(16 * 1024 * 1024)}`;
+      // Sized so the two readings disagree: decoded it is 9MB and embeds, but
+      // read as raw text it would be 12MB and would be dropped.
+      const url = `data:image/png;BASE64,${"A".repeat(12_000_000)}`;
       const html = await conversationToHtml(
         [message({ attachments: [attachment({ url })] })],
         "conv-1",
         FIXED_NOW,
       );
-      expect(html).toContain("[Image: result.png (image/png) — too large to embed]");
+      expect(html).toContain('<img src="data:image/png;BASE64,');
+      expect(html).not.toContain("too large to embed");
+    });
+
+    it("counts the data uri prefix, so a huge mime type cannot slip past the budget", async () => {
+      // The mime type is untrusted metadata and is written into the document
+      // ahead of the payload, so it has to be paid for like the payload is.
+      const hugeMime = `image/${"x".repeat(60 * 1024 * 1024)}`;
+      const url = `data:${hugeMime};base64,AAAA`;
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ url, mimeType: hugeMime })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("no room left in this file");
+      expect(html).not.toContain("base64,AAAA");
+    });
+
+    it("counts every place an attachment appears, even the same one twice", async () => {
+      // The summary has to match what the reader sees, not how many distinct
+      // objects produced it.
+      const shared = attachment({ url: "data:image/png;base64,AAAA" });
+      const html = await conversationToHtml(
+        [message({ attachments: [shared, shared] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect((html.match(/<img /g) ?? []).length).toBe(2);
+      expect(html).toContain("Attachments: 2 of 2 embedded");
+    });
+
+    it("keeps the summary honest when one object is used more times than the budget allows", async () => {
+      // Rendering reads each place in the document, not each distinct object,
+      // so the count and the page cannot drift apart.
+      const shared = attachment({ url: `data:image/png;base64,${"A".repeat(8 * 1024 * 1024)}` });
+      const messages = Array.from({ length: 7 }, () => message({ attachments: [shared] }));
+      const html = await conversationToHtml(messages, "conv-1", FIXED_NOW);
+      const embedded = (html.match(/<img /g) ?? []).length;
+      expect(embedded).toBeLessThan(messages.length);
+      expect(html).toContain(`Attachments: ${embedded} of ${messages.length} embedded`);
+      expect(html.length).toBeLessThanOrEqual(MAX_TOTAL_INLINE_CHARACTERS);
+    });
+
+    it("charges escaped media text, so escaping cannot push the file past the budget", async () => {
+      // A valid non-base64 data uri full of ampersands grows when escaped.
+      const svg = `data:image/svg+xml,${"%3C!--&&--%3E".repeat(120000)}`;
+      const messages = Array.from({ length: 6 }, (_, index) =>
+        message({ attachments: [attachment({ name: `s${index}.svg`, mimeType: "image/svg+xml", url: `${svg}${index}` })] }),
+      );
+      const html = await conversationToHtml(messages, "conv-1", FIXED_NOW);
+      expect(html.length).toBeLessThanOrEqual(MAX_TOTAL_INLINE_CHARACTERS);
+    });
+
+    it("counts a repeated attachment against the budget every time it appears", async () => {
+      // Reading it once saves the fetch, not the space: each copy is written
+      // into the document, so each copy has to be paid for.
+      const payload = `data:image/png;base64,${"A".repeat(8 * 1024 * 1024)}`;
+      const messages = Array.from({ length: 10 }, () =>
+        message({ attachments: [attachment({ name: "same.png", url: payload })] }),
+      );
+      const html = await conversationToHtml(messages, "conv-1", FIXED_NOW);
+      const embedded = (html.match(/<img /g) ?? []).length;
+      expect(embedded).toBeLessThan(messages.length);
+      expect(html.length).toBeLessThanOrEqual(MAX_TOTAL_INLINE_CHARACTERS);
+      expect(html).toContain("no room left in this file");
     });
 
     it("stops embedding once the whole document has used its budget", async () => {
@@ -920,7 +1003,9 @@ describe("conversationExport", () => {
       const embedded = (html.match(/<img /g) ?? []).length;
       expect(embedded).toBeGreaterThan(0);
       expect(embedded).toBeLessThan(attachments.length);
-      expect(html).toContain("too large to embed");
+      expect(html).toContain("no room left in this file");
+      // The budget bounds the document, so what it holds must stay under it.
+      expect(embedded * payload.length).toBeLessThanOrEqual(MAX_TOTAL_INLINE_CHARACTERS);
     });
 
     it("reads a repeated attachment once and embeds it in both places", async () => {
diff --git a/frontend/src/utils/conversationExport.ts b/frontend/src/utils/conversationExport.ts
index f5c14db487..fb9fc31726 100644
--- a/frontend/src/utils/conversationExport.ts
+++ b/frontend/src/utils/conversationExport.ts
@@ -34,25 +34,28 @@ const MEDIA_LABELS: Record<MessageAttachment['type'], string> = {
 const OMISSION_REASONS: Record<OmissionReason, string> = {
   unreadable: 'could not be read',
   'too-large': 'too large to embed',
+  'no-room': 'no room left in this file',
   'not-embeddable': 'not a media file',
 }
 
 /** Fixed order so the summary reads the same way for the same conversation. */
-const OMISSION_ORDER: OmissionReason[] = ['unreadable', 'too-large', 'not-embeddable']
+const OMISSION_ORDER: OmissionReason[] = ['unreadable', 'too-large', 'no-room', 'not-embeddable']
 
 /**
- * Largest attachment inlined into an HTML export. Base64 inflates bytes by a
- * third, so anything above this is listed by name instead of embedded to keep
- * the file openable.
+ * Largest attachment inlined into an HTML export, measured in real bytes.
+ * Base64 inflates bytes by a third, so anything above this is listed by name
+ * instead of embedded to keep the file openable.
  */
-export const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
+const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
 
 /**
- * Largest total payload inlined into one HTML export. Without it, many
- * attachments that each clear the per-attachment cap still add up to a file
- * too big to open or mail; once the budget is spent the rest are named.
+ * Largest total media text one HTML export may carry, counted in the characters
+ * actually written for it. Without it, many attachments that each clear the
+ * per-attachment cap still add up to a file too big to open or mail; once the
+ * budget is spent the rest are named. Surrounding markup is not counted, so
+ * this bounds the file closely rather than exactly.
  */
-export const MAX_TOTAL_INLINE_BYTES = 50 * 1024 * 1024
+export const MAX_TOTAL_INLINE_CHARACTERS = 50 * 1024 * 1024
 
 /**
  * The only path the export reads attachment bytes from. Any other same-origin
@@ -154,11 +157,12 @@ export function conversationToMarkdown(
 }
 
 /**
- * Serialize the in-state conversation to pretty-printed JSON, exporting exactly
- * what the GUI holds (WYSIWYG). The envelope records the conversation id, the
- * export timestamp, and the messages. Loading placeholders are dropped and the
- * non-serializable `File` handle is removed from each attachment; every other
- * field (including attachment metadata) is preserved as-is.
+ * Serialize the in-state conversation to pretty-printed JSON. The envelope
+ * records the conversation id, the export timestamp, and the messages. Loading
+ * placeholders are dropped, and each attachment loses its non-serializable
+ * `File` handle and its source URL — that URL is a signed storage link or a
+ * path on this machine, neither of which belongs in a shared file. Everything
+ * else, including the rest of the attachment metadata, is preserved as-is.
  */
 export function conversationToJson(
   messages: Message[],
@@ -205,7 +209,7 @@ export async function conversationToHtml(
 <body>
 <h1>CoPyRIT conversation export</h1>
 <p class="meta">${summary}</p>
-${exported.map((message) => renderMessage(message, media)).join('\n')}
+${exported.map((message, index) => renderMessage(message, media.perMessage[index])).join('\n')}
 </body>
 </html>
 `
@@ -217,19 +221,19 @@ ${exported.map((message) => renderMessage(message, media)).join('\n')}
  * every attachment left out is counted and explained here as well as in place.
  */
 function attachmentSummary(media: ResolvedMedia): string {
-  const outcomes = [...media.values()]
+  const outcomes = media.occurrences
   if (outcomes.length === 0) {
     return 'Attachments: none'
   }
-  const embedded = outcomes.filter((outcome) => outcome.dataUri !== null).length
+  const embedded = outcomes.filter((outcome) => outcome.source !== null).length
   const omitted = outcomes.length - embedded
   if (omitted === 0) {
     return `Attachments: ${embedded} of ${outcomes.length} embedded`
   }
   const reasons = OMISSION_ORDER.filter((reason) =>
-    outcomes.some((outcome) => outcome.dataUri === null && outcome.reason === reason),
+    outcomes.some((outcome) => outcome.source === null && outcome.reason === reason),
   ).map((reason) => {
-    const count = outcomes.filter((outcome) => outcome.dataUri === null && outcome.reason === reason).length
+    const count = outcomes.filter((outcome) => outcome.source === null && outcome.reason === reason).length
     return `${count} ${OMISSION_REASONS[reason]}`
   })
   return (
@@ -354,48 +358,70 @@ function longestBacktickRun(content: string): number {
 }
 
 /** Why an attachment is named in the document instead of embedded in it. */
-type OmissionReason = 'unreadable' | 'too-large' | 'not-embeddable'
+type OmissionReason = 'unreadable' | 'too-large' | 'no-room' | 'not-embeddable'
 
-type ResolvedAttachment = { dataUri: string } | { dataUri: null; reason: OmissionReason }
+/** `source` is the escaped text written into the document, which is what it costs. */
+type ResolvedAttachment = { source: string } | { source: null; reason: OmissionReason }
 
-type ResolvedMedia = Map<MessageAttachment, ResolvedAttachment>
+/**
+ * One resolved outcome per attachment slot, held in the same shape as the
+ * messages so rendering reads each occurrence by position. Position, not object
+ * identity, is what the document is built from: the same attachment object can
+ * appear in two places and each place is written, counted, and paid for.
+ */
+type ResolvedMedia = {
+  perMessage: { attachments: ResolvedAttachment[]; originalAttachments: ResolvedAttachment[] }[]
+  occurrences: ResolvedAttachment[]
+}
 
 /**
- * Read every attachment in the conversation, mapping each to a `data:` URI or
- * to the reason its bytes were left out. Resolution is the only step that
- * touches the network; rendering stays a pure function of the result.
+ * Read every attachment in the conversation, resolving each to the text that
+ * will be written for it or to the reason its bytes were left out. Resolution
+ * is the only step that touches the network; rendering stays a pure function of
+ * the result.
  *
  * Attachments are read one at a time so a long conversation cannot open a
- * fetch per attachment at once, and identical sources are read once and shared
- * so the same bytes are never embedded twice.
+ * fetch per attachment at once, and identical sources are read once and
+ * shared, so repeating one costs a write but not a second fetch.
  */
 async function resolveMedia(messages: Message[]): Promise<ResolvedMedia> {
-  const attachments = messages.flatMap((message) => [
-    ...(message.attachments ?? []),
-    ...(message.originalAttachments ?? []),
-  ])
-  const resolved: ResolvedMedia = new Map()
+  const perMessage: ResolvedMedia['perMessage'] = []
+  const occurrences: ResolvedAttachment[] = []
   const seen = new Map<string, ResolvedAttachment>()
-  let remainingBytes = MAX_TOTAL_INLINE_BYTES
-
-  for (const attachment of attachments) {
-    const key = `${attachment.type}\u0000${attachment.mimeType}\u0000${attachment.url}`
-    // A pending upload carries its own bytes, so it can't be keyed by URL.
-    const shared = attachment.file ? undefined : seen.get(key)
-    if (shared) {
-      resolved.set(attachment, shared)
-      continue
-    }
-    const outcome = await resolveAttachment(attachment, remainingBytes)
-    if (outcome.dataUri) {
-      remainingBytes -= base64ByteLength(outcome.dataUri)
-    }
-    resolved.set(attachment, outcome)
-    if (!attachment.file) {
-      seen.set(key, outcome)
+  let remaining = MAX_TOTAL_INLINE_CHARACTERS
+
+  const resolveList = async (list: MessageAttachment[] | undefined): Promise<ResolvedAttachment[]> => {
+    const results: ResolvedAttachment[] = []
+    for (const attachment of list ?? []) {
+      const key = `${attachment.type}\u0000${attachment.mimeType}\u0000${attachment.url}`
+      // A pending upload carries its own bytes, so it can't be keyed by URL.
+      const shared = attachment.file ? undefined : seen.get(key)
+      // Every occurrence is written into the document, so every occurrence is
+      // billed — reading it once saves the fetch, not the space.
+      const outcome = shared ?? (await resolveAttachment(attachment, remaining))
+      const charged: ResolvedAttachment =
+        outcome.source !== null && outcome.source.length > remaining
+          ? { source: null, reason: 'no-room' }
+          : outcome
+      if (charged.source !== null) {
+        remaining -= charged.source.length
+      }
+      results.push(charged)
+      occurrences.push(charged)
+      if (!attachment.file && !shared) {
+        seen.set(key, outcome)
+      }
     }
+    return results
   }
-  return resolved
+
+  for (const message of messages) {
+    perMessage.push({
+      attachments: await resolveList(message.attachments),
+      originalAttachments: await resolveList(message.originalAttachments),
+    })
+  }
+  return { perMessage, occurrences }
 }
 
 /**
@@ -408,45 +434,64 @@ async function resolveMedia(messages: Message[]): Promise<ResolvedMedia> {
  */
 async function resolveAttachment(
   attachment: MessageAttachment,
-  remainingBytes: number,
+  remaining: number,
 ): Promise<ResolvedAttachment> {
   // Only inert media is embedded. A file attachment can hold active content,
   // and this artifact is meant to be shared, so files are named instead.
   if (attachment.type === 'file') {
-    return { dataUri: null, reason: 'not-embeddable' }
+    return { source: null, reason: 'not-embeddable' }
   }
   try {
     if (attachment.url.startsWith('data:')) {
       const inlineBytes = base64ByteLength(attachment.url)
-      return inlineBytes > 0 && withinBudget(inlineBytes, remainingBytes)
-        ? { dataUri: attachment.url }
-        : { dataUri: null, reason: inlineBytes > 0 ? 'too-large' : 'unreadable' }
+      if (inlineBytes === 0) {
+        return { source: null, reason: 'unreadable' }
+      }
+      // An inline value is written escaped, so the escaped text is its cost.
+      const source = escapeHtml(attachment.url)
+      const refusal = budgetRefusal(inlineBytes, source.length, remaining)
+      return refusal ? { source: null, reason: refusal } : { source }
     }
     if (attachment.file) {
-      return await blobToDataUri(attachment.file, attachment.mimeType, remainingBytes)
+      return await blobToDataUri(attachment.file, attachment.mimeType, remaining)
     }
     if (!isMediaEndpointUrl(attachment.url)) {
-      return { dataUri: null, reason: 'unreadable' }
+      return { source: null, reason: 'unreadable' }
     }
     const response = await fetch(attachment.url)
     if (!response.ok) {
-      return { dataUri: null, reason: 'unreadable' }
+      return { source: null, reason: 'unreadable' }
     }
     // Check the advertised length before reading the body, so an oversized
     // response is abandoned instead of downloaded only to be discarded.
     const declaredBytes = Number(response.headers?.get('content-length'))
-    if (Number.isFinite(declaredBytes) && declaredBytes > 0 && !withinBudget(declaredBytes, remainingBytes)) {
-      return { dataUri: null, reason: 'too-large' }
+    const declaredRefusal = Number.isFinite(declaredBytes)
+      ? budgetRefusal(declaredBytes, dataUriLength(attachment.mimeType, declaredBytes), remaining)
+      : null
+    if (declaredBytes > 0 && declaredRefusal) {
+      return { source: null, reason: declaredRefusal }
     }
-    return await blobToDataUri(await response.blob(), attachment.mimeType, remainingBytes)
+    return await blobToDataUri(await response.blob(), attachment.mimeType, remaining)
   } catch {
-    return { dataUri: null, reason: 'unreadable' }
+    return { source: null, reason: 'unreadable' }
   }
 }
 
-/** Report whether a payload fits both the per-attachment cap and what is left of the budget. */
-function withinBudget(bytes: number, remainingBytes: number): boolean {
-  return bytes <= MAX_INLINE_ATTACHMENT_BYTES && bytes <= remainingBytes
+/**
+ * Report why a payload cannot be embedded, or `null` when it can. One limit is
+ * the size of the attachment itself; the other is the room left in the
+ * document. They are told apart so the reader is given the true reason.
+ */
+function budgetRefusal(bytes: number, writtenLength: number, remaining: number): OmissionReason | null {
+  if (bytes > MAX_INLINE_ATTACHMENT_BYTES) {
+    return 'too-large'
+  }
+  return writtenLength > remaining ? 'no-room' : null
+}
+
+/** Characters a `data:` URI occupies once `bytes` are base64-encoded behind its prefix. */
+function dataUriLength(mimeType: string, bytes: number): number {
+  return `data:${mimeType || 'application/octet-stream'};base64,`.length + Math.ceil(bytes / 3) * 4
 }
 
 /**
@@ -468,18 +513,19 @@ function base64ByteLength(dataUri: string): number {
 }
 
 /** Encode a blob as a `data:` URI, skipping empty and oversized payloads. */
-async function blobToDataUri(blob: Blob, mimeType: string, remainingBytes: number): Promise<ResolvedAttachment> {
+async function blobToDataUri(blob: Blob, mimeType: string, remaining: number): Promise<ResolvedAttachment> {
   if (blob.size === 0) {
-    return { dataUri: null, reason: 'unreadable' }
+    return { source: null, reason: 'unreadable' }
   }
-  if (!withinBudget(blob.size, remainingBytes)) {
-    return { dataUri: null, reason: 'too-large' }
+  const refusal = budgetRefusal(blob.size, dataUriLength(mimeType || blob.type, blob.size), remaining)
+  if (refusal) {
+    return { source: null, reason: refusal }
   }
   const base64 = await fileToBase64(blob)
   if (!base64) {
-    return { dataUri: null, reason: 'unreadable' }
+    return { source: null, reason: 'unreadable' }
   }
-  return { dataUri: `data:${mimeType || blob.type || 'application/octet-stream'};base64,${base64}` }
+  return { source: escapeHtml(`data:${mimeType || blob.type || 'application/octet-stream'};base64,${base64}`) }
 }
 
 function isMediaEndpointUrl(url: string): boolean {
@@ -495,7 +541,7 @@ function isMediaEndpointUrl(url: string): boolean {
   }
 }
 
-function renderMessage(message: Message, media: ResolvedMedia): string {
+function renderMessage(message: Message, resolved: ResolvedMedia['perMessage'][number]): string {
   const parts = [
     `<header><span class="role">${escapeHtml(ROLE_LABELS[message.role])}</span>` +
       `<span class="timestamp">${escapeHtml(message.timestamp)}</span></header>`,
@@ -508,14 +554,16 @@ function renderMessage(message: Message, media: ResolvedMedia): string {
   if (message.originalContent != null && message.originalContent !== message.content) {
     parts.push(labelled('Original (before conversion):', `<pre>${escapeHtml(message.originalContent)}</pre>`))
   }
-  parts.push(renderAttachments('Original attachments (before conversion):', message.originalAttachments, media))
+  parts.push(
+    renderAttachments('Original attachments (before conversion):', message.originalAttachments, resolved.originalAttachments),
+  )
   if (message.reasoningSummaries && message.reasoningSummaries.length > 0) {
     parts.push(labelled('Reasoning:', `<pre>${escapeHtml(message.reasoningSummaries.join('\n\n'))}</pre>`))
   }
   if (message.error) {
     parts.push(renderError(message.error))
   }
-  parts.push(renderAttachments('Attachments:', message.attachments, media))
+  parts.push(renderAttachments('Attachments:', message.attachments, resolved.attachments))
   return `<article class="message">\n${parts.filter(Boolean).join('\n')}\n</article>`
 }
 
@@ -527,27 +575,25 @@ function renderError(error: MessageError): string {
 function renderAttachments(
   heading: string,
   attachments: MessageAttachment[] | undefined,
-  media: ResolvedMedia,
+  resolved: ResolvedAttachment[],
 ): string {
   if (!attachments || attachments.length === 0) {
     return ''
   }
-  const rendered = attachments.map((attachment) =>
-    renderAttachment(attachment, media.get(attachment) ?? { dataUri: null, reason: 'unreadable' }),
+  const rendered = attachments.map((attachment, index) =>
+    renderAttachment(attachment, resolved[index] ?? { source: null, reason: 'unreadable' }),
   )
   return labelled(heading, rendered.join('\n'))
 }
 
 function renderAttachment(attachment: MessageAttachment, resolved: ResolvedAttachment): string {
   const caption = escapeHtml(`${attachment.name} (${attachment.mimeType})`)
-  if (resolved.dataUri === null) {
+  if (resolved.source === null) {
     // Say why the bytes are missing, so nobody mistakes an omission for a
     // message that simply had nothing in it.
     return `<p class="placeholder">[${MEDIA_LABELS[attachment.type]}: ${caption} — ${OMISSION_REASONS[resolved.reason]}]</p>`
   }
-  // The MIME type is echoed into the data URI, so escape it like any other
-  // untrusted value before it lands in an attribute.
-  const source = escapeHtml(resolved.dataUri)
+  const source = resolved.source
   const label = escapeHtml(attachment.name)
   const body =
     attachment.type === 'image'

From 8f334155b63ee0c74f0512ac2d89311efcda62dc Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Wed, 19 Aug 2026 21:10:28 +0000
Subject: [PATCH 5/8] TEST: Make the escaped media budget test prove the
 accounting

The test held six data URIs that were far under the limit either way, so
it passed whether the budget counted the text written or the text before
escaping. It now sizes them so the two readings disagree: as raw text
they all fit, but escaped they do not, and it asserts that some are left
out for want of room.
---
 frontend/src/utils/conversationExport.test.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index 2725971450..91d4a53f08 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -966,12 +966,18 @@ describe("conversationExport", () => {
     });
 
     it("charges escaped media text, so escaping cannot push the file past the budget", async () => {
-      // A valid non-base64 data uri full of ampersands grows when escaped.
-      const svg = `data:image/svg+xml,${"%3C!--&&--%3E".repeat(120000)}`;
+      // Sized so the two accountings disagree: as raw text all six fit inside
+      // the budget, but each ampersand becomes five characters once escaped,
+      // so only the first one can actually be afforded.
+      const svg = `data:image/svg+xml,${"&".repeat(8_000_000)}`;
       const messages = Array.from({ length: 6 }, (_, index) =>
         message({ attachments: [attachment({ name: `s${index}.svg`, mimeType: "image/svg+xml", url: `${svg}${index}` })] }),
       );
+      expect(messages.length * svg.length).toBeLessThan(MAX_TOTAL_INLINE_CHARACTERS);
+
       const html = await conversationToHtml(messages, "conv-1", FIXED_NOW);
+      expect((html.match(/<img /g) ?? []).length).toBeLessThan(messages.length);
+      expect(html).toContain("no room left in this file");
       expect(html.length).toBeLessThanOrEqual(MAX_TOTAL_INLINE_CHARACTERS);
     });
 

From 8ba78db0587b89733ef01a3a748de909d9e1a87b Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Wed, 19 Aug 2026 21:16:34 +0000
Subject: [PATCH 6/8] TEST: Pin the escape on media the export fetched

The refactor moved escaping from the one place that rendered a source to
the two places that build one, and only the inline one was covered. The
fetched path is the only one that puts a mime type into the src
attribute, so a hostile mime type there could break out of it. Deleting
that escape now fails a test.
---
 frontend/src/utils/conversationExport.test.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index 91d4a53f08..b3c00e7eab 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -618,6 +618,21 @@ describe("conversationExport", () => {
       expect(html).toContain("&quot;");
     });
 
+    it("escapes a hostile mime type on media it fetched, which is the only path that writes one", async () => {
+      // The fetched path builds the data uri itself, so the mime type reaches
+      // the src attribute here and nowhere else.
+      mockFetchOnce("hi");
+      const html = await conversationToHtml(
+        [message({ attachments: [attachment({ mimeType: 'image/png" onerror="alert(1)' })] })],
+        "conv-1",
+        FIXED_NOW,
+      );
+      const src = html.match(/<img src="([^"]*)"/)?.[1] ?? "";
+      expect(src).toContain("&quot;");
+      expect(src).not.toContain('" onerror=');
+      expect(html).not.toContain('onerror="alert(1)"');
+    });
+
     it("omits the text block for a media-only message rather than rendering an empty one", async () => {
       const html = await conversationToHtml(
         [message({ content: "", attachments: [attachment({ url: "data:image/png;base64,AAAA" })] })],

From 821b92590a9befbe08e763edc9fc74858beeb2b5 Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Wed, 19 Aug 2026 21:23:52 +0000
Subject: [PATCH 7/8] TEST: Pin that media stays with its own message

Resolution and rendering both walk the settled messages, so dropping a
loading placeholder has to shift both or neither. Nothing held that in
place, and getting it wrong would print a count that disagreed with the
page beneath it. The guide also now describes the case where the page
has taken as much media as it can hold.
---
 doc/gui/0_gui.md                              |  2 +-
 frontend/src/utils/conversationExport.test.ts | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/doc/gui/0_gui.md b/doc/gui/0_gui.md
index 9e8fc38d74..0723358e28 100644
--- a/doc/gui/0_gui.md
+++ b/doc/gui/0_gui.md
@@ -82,7 +82,7 @@ Click the **Export** button in the ribbon to download the conversation that is c
 
 Every format includes the whole conversation as shown in the chat, including the system prompt shown in the banner.
 
-Markdown records the names of attachments but never the media itself. JSON keeps media that is already inline, drops the source link for everything else, and so cannot be relied on to carry pictures either. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, very large attachments are skipped to keep the file openable, and non-media files are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
+Markdown records the names of attachments but never the media itself. JSON keeps media that is already inline, drops the source link for everything else, and so cannot be relied on to carry pictures either. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, an attachment that is too large on its own is skipped, and once the page has taken as much media as it can hold the rest are marked as having no room left. Files that are not images, audio, or video are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
 
 Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
 
diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index b3c00e7eab..aa326dc1fb 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -873,6 +873,27 @@ describe("conversationExport", () => {
       expect(html).toContain("emoji 🎉 عربى 中文");
     });
 
+    it("keeps media aligned with its message when a loading placeholder is dropped", async () => {
+      // Resolution and rendering both run over the settled messages, so an
+      // attachment after a dropped placeholder must still land in its own
+      // message rather than shifting onto another one.
+      const html = await conversationToHtml(
+        [
+          message({ content: "first" }),
+          message({ content: "typing", isLoading: true }),
+          message({
+            content: "third",
+            attachments: [attachment({ url: "data:image/png;base64,AAAA" })],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain('<img src="data:image/png;base64,AAAA"');
+      expect(html).toContain("Attachments: 1 of 1 embedded");
+      expect(html).not.toContain("could not be read");
+    });
+
     it("renders an empty conversation without messages", async () => {
       const html = await conversationToHtml([], null, FIXED_NOW);
       expect(html).toContain("Conversation: (unsaved)");

From dd98d07c46a9f9b717004640f493fbf9e2c44dc3 Mon Sep 17 00:00:00 2001
From: varunj-msft <vjoginpalli@microsoft.com>
Date: Thu, 20 Aug 2026 20:55:15 +0000
Subject: [PATCH 8/8] DOC: Say what the size limit is for and what it does not
 stop

The guide said the rest of the attachments are marked as having no room
left once the page is full, which is not what happens: an attachment
that does not fit is named and the page keeps filling, so a smaller one
later still lands and its omission can sit above media that made it in.

The total limit now says why it is 50 MiB and admits it is not a promise
the file will fit an email, and the order the budget is spent in is
written down: conversation order, and the converted attachment before
the original it came from, so the result being shared wins the space.
Both are pinned by tests.
---
 doc/gui/0_gui.md                              |  2 +-
 frontend/src/utils/conversationExport.test.ts | 47 +++++++++++++++++++
 frontend/src/utils/conversationExport.ts      | 20 ++++++--
 3 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/doc/gui/0_gui.md b/doc/gui/0_gui.md
index 0723358e28..81a24d1039 100644
--- a/doc/gui/0_gui.md
+++ b/doc/gui/0_gui.md
@@ -82,7 +82,7 @@ Click the **Export** button in the ribbon to download the conversation that is c
 
 Every format includes the whole conversation as shown in the chat, including the system prompt shown in the banner.
 
-Markdown records the names of attachments but never the media itself. JSON keeps media that is already inline, drops the source link for everything else, and so cannot be relied on to carry pictures either. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, an attachment that is too large on its own is skipped, and once the page has taken as much media as it can hold the rest are marked as having no room left. Files that are not images, audio, or video are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
+Markdown records the names of attachments but never the media itself. JSON keeps media that is already inline, drops the source link for everything else, and so cannot be relied on to carry pictures either. HTML is the format to pick when the media matters. It puts each attachment it can read into the page, and lists the rest by name with the reason it was left out — media stored in Azure Blob storage cannot be read by the browser, an attachment that is too large on its own is skipped, and one that no longer fits in the page is marked as having no room left. The page keeps filling after that, so an attachment later in the conversation that still fits can make it in. Files that are not images, audio, or video are never embedded. The count of what was and was not included is printed at the top of the exported page, so an incomplete export is never mistaken for a complete one. Source links are deliberately left out of every export.
 
 Export stays available for read-only historical conversations, and is disabled while a conversation is empty, still loading, or sending. The button is disabled until there is at least one user or model message to export.
 
diff --git a/frontend/src/utils/conversationExport.test.ts b/frontend/src/utils/conversationExport.test.ts
index aa326dc1fb..ba459318c4 100644
--- a/frontend/src/utils/conversationExport.test.ts
+++ b/frontend/src/utils/conversationExport.test.ts
@@ -1031,6 +1031,53 @@ describe("conversationExport", () => {
       expect(html).toContain("no room left in this file");
     });
 
+    it("spends the budget on the converted attachment before the original it came from", async () => {
+      // Three fit, so the pair in the last message decides the point: the
+      // converted result the operator is sharing is charged before the original
+      // it came from, and the original is the one left without room.
+      const payload = `data:image/png;base64,${"A".repeat(Math.floor((10 * 1024 * 1024 * 4) / 3) - 64)}`;
+      const html = await conversationToHtml(
+        [
+          message({ attachments: [attachment({ name: "earlier.png", url: `${payload}1` })] }),
+          message({ attachments: [attachment({ name: "also-earlier.png", url: `${payload}2` })] }),
+          message({
+            content: "converted",
+            originalContent: "original",
+            originalAttachments: [attachment({ name: "before.png", url: `${payload}3` })],
+            attachments: [attachment({ name: "after.png", url: `${payload}4` })],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: before.png (image/png) — no room left in this file]");
+      expect(html).not.toContain("[Image: after.png");
+    });
+
+    it("keeps filling after an attachment does not fit, so a smaller one later still lands", async () => {
+      // The walk does not stop at the first refusal. The docs and the constant
+      // both say so, and a reader sees the omission above embedded media.
+      const big = `data:image/png;base64,${"A".repeat(Math.floor((10 * 1024 * 1024 * 4) / 3) - 64)}`;
+      const html = await conversationToHtml(
+        [
+          message({
+            attachments: [
+              attachment({ name: "one.png", url: `${big}1` }),
+              attachment({ name: "two.png", url: `${big}2` }),
+              attachment({ name: "three.png", url: `${big}3` }),
+              attachment({ name: "does-not-fit.png", url: `${big}4` }),
+              attachment({ name: "still-fits.png", url: "data:image/png;base64,AAAA" }),
+            ],
+          }),
+        ],
+        "conv-1",
+        FIXED_NOW,
+      );
+      expect(html).toContain("[Image: does-not-fit.png (image/png) — no room left in this file]");
+      expect(html.indexOf("does-not-fit.png")).toBeLessThan(html.lastIndexOf("<img "));
+      expect(html).toContain("Attachments: 4 of 5 embedded");
+    });
+
     it("stops embedding once the whole document has used its budget", async () => {
       // Each attachment clears the per-attachment cap; together they do not.
       const payload = `data:image/png;base64,${"A".repeat(8 * 1024 * 1024)}`;
diff --git a/frontend/src/utils/conversationExport.ts b/frontend/src/utils/conversationExport.ts
index fb9fc31726..fbcb6154d9 100644
--- a/frontend/src/utils/conversationExport.ts
+++ b/frontend/src/utils/conversationExport.ts
@@ -50,10 +50,16 @@ const MAX_INLINE_ATTACHMENT_BYTES = 10 * 1024 * 1024
 
 /**
  * Largest total media text one HTML export may carry, counted in the characters
- * actually written for it. Without it, many attachments that each clear the
- * per-attachment cap still add up to a file too big to open or mail; once the
- * budget is spent the rest are named. Surrounding markup is not counted, so
- * this bounds the file closely rather than exactly.
+ * actually written for it. This is a ceiling against runaway growth rather than
+ * a size to aim for: because base64 costs a third on top, 50 MiB of text holds
+ * roughly 37 MiB of real media. An ordinary conversation uses a fraction of
+ * that, one carrying a dozen full-size images can approach it, and a file at
+ * the ceiling still opens in a few seconds. It is not a promise the file will
+ * fit an email. Surrounding markup is not counted, so this bounds the file
+ * closely rather than exactly.
+ *
+ * Reaching it does not stop the walk: a later attachment that still fits is
+ * embedded, so an omission can sit above media that made it in.
  */
 export const MAX_TOTAL_INLINE_CHARACTERS = 50 * 1024 * 1024
 
@@ -383,6 +389,12 @@ type ResolvedMedia = {
  * Attachments are read one at a time so a long conversation cannot open a
  * fetch per attachment at once, and identical sources are read once and
  * shared, so repeating one costs a write but not a second fetch.
+ *
+ * The budget is spent first come, first served in conversation order, and
+ * within a message on the converted attachment before the original it was
+ * converted from, so the result the operator is sharing wins the space when it
+ * is tight. Choosing by size would fit a few more attachments but would leave a
+ * reader no way to tell why one of them made it and the next did not.
  */
 async function resolveMedia(messages: Message[]): Promise<ResolvedMedia> {
   const perMessage: ResolvedMedia['perMessage'] = []