From cc0087bbf1e6c74f85ea3584895fa728d23d3989 Mon Sep 17 00:00:00 2001
From: claude-ceo-assistant <claude-ceo-assistant@moleculesai.app>
Date: Mon, 25 May 2026 01:11:10 -0700
Subject: [PATCH] fix: render PDF previews in framed viewer

---
 .../src/components/tabs/chat/AttachmentPDF.tsx   | 16 +++++++---------
 .../tabs/chat/__tests__/AttachmentPDF.test.tsx   | 11 +++++++----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/canvas/src/components/tabs/chat/AttachmentPDF.tsx b/canvas/src/components/tabs/chat/AttachmentPDF.tsx
index 784aa4446..8b519549a 100644
--- a/canvas/src/components/tabs/chat/AttachmentPDF.tsx
+++ b/canvas/src/components/tabs/chat/AttachmentPDF.tsx
@@ -145,15 +145,13 @@ export function AttachmentPDF({ workspaceId, attachment, onDownload, tone }: Pro
         onClose={() => setOpen(false)}
         ariaLabel={`Preview of ${attachment.name}`}
       >
-        <embed
-          src={state.blobUrl}
-          type="application/pdf"
-          // The lightbox's content slot caps at 95vw / 90vh, so size
-          // 100% within that and let the user scroll inside the PDF
-          // viewer.
-          style={{ width: "95vw", height: "90vh" }}
-          aria-label={attachment.name}
-        />
+        <div className="h-[90vh] w-[95vw] overflow-hidden rounded-lg border border-white/20 bg-white shadow-2xl">
+          <iframe
+            src={`${state.blobUrl}#view=FitH`}
+            title={attachment.name}
+            className="h-full w-full bg-white"
+          />
+        </div>
       </AttachmentLightbox>
     </>
   );
diff --git a/canvas/src/components/tabs/chat/__tests__/AttachmentPDF.test.tsx b/canvas/src/components/tabs/chat/__tests__/AttachmentPDF.test.tsx
index fa28c9e9c..763acf896 100644
--- a/canvas/src/components/tabs/chat/__tests__/AttachmentPDF.test.tsx
+++ b/canvas/src/components/tabs/chat/__tests__/AttachmentPDF.test.tsx
@@ -13,7 +13,7 @@
  * Covers:
  *   - Renders loading skeleton with PdfGlyph + filename text
  *   - Renders preview button with PDF glyph, filename, and "PDF" label
- *   - Opens lightbox with <embed> on button click
+ *   - Opens lightbox with a framed <iframe> viewer on button click
  *   - Lightbox closes on Escape
  *   - tone=user applies blue/accent classes on button
  *   - tone=agent applies neutral border on button
@@ -136,7 +136,7 @@ describe("AttachmentPDF — ready", () => {
     expect(btn?.textContent).toContain("PDF");
   });
 
-  it("opens lightbox with <embed> on button click", async () => {
+  it("opens lightbox with a framed iframe viewer on button click", async () => {
     mockFetchOk("data");
     const att = makeAttachment("report.pdf");
     render(
@@ -158,8 +158,11 @@ describe("AttachmentPDF — ready", () => {
     });
     const dialog = document.querySelector('[role="dialog"]');
     expect(dialog?.getAttribute("aria-label")).toContain("report.pdf");
-    // Lightbox contains an <embed>
-    expect(dialog?.querySelector("embed")).toBeTruthy();
+    const frame = dialog?.querySelector("iframe") as HTMLIFrameElement | null;
+    expect(frame).toBeTruthy();
+    expect(frame?.getAttribute("title")).toBe("report.pdf");
+    expect(frame?.className).toContain("bg-white");
+    expect(dialog?.querySelector("embed")).toBeNull();
   });
 
   it("closes lightbox on Escape key", async () => {
-- 
2.52.0