render decrypted images

2 files changed, 225 insertions, 0 deletions

diff --git a/test/e2e/blossom-image.spec.ts b/test/e2e/blossom-image.spec.ts
new file mode 100644
index 00000000..f9c8a094
--- /dev/null
+++ b/test/e2e/blossom-image.spec.ts
@@ -0,0 +1,144 @@
+import { test, expect } from "@playwright/test";
+
+// 1x1 red JPEG as base64
+const TINY_JPEG_B64 =
+  "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkS" +
+  "Ew8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJ" +
+  "CQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy" +
+  "MjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACf/" +
+  "EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AKwA//9k=";
+
+test.describe("Blossom image rendering", () => {
+  test("Chrome renders <img src> with application/octet-stream", async ({ page }) => {
+    await page.route("**/mock-blossom/**", async (route) => {
+      const jpegBytes = Buffer.from(TINY_JPEG_B64, "base64");
+      await route.fulfill({
+        status: 200,
+        contentType: "application/octet-stream",
+        body: jpegBytes,
+      });
+    });
+
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    const result = await page.evaluate(async () => {
+      const img = document.createElement("img");
+      img.src = "/mock-blossom/test.jpg";
+      document.body.prepend(img);
+
+      await new Promise<void>((resolve) => {
+        img.onload = () => resolve();
+        img.onerror = () => resolve();
+        setTimeout(resolve, 3000);
+      });
+
+      return {
+        naturalWidth: img.naturalWidth,
+        naturalHeight: img.naturalHeight,
+      };
+    });
+
+    console.log("Direct <img src> with octet-stream:", result);
+    expect(result.naturalWidth, "Image should render despite octet-stream content-type").toBeGreaterThan(0);
+  });
+
+  test("ChatMessage component renders imeta images", async ({ page }) => {
+    // Mock blossom-like endpoint
+    await page.route("**/mock-blossom/**", async (route) => {
+      const jpegBytes = Buffer.from(TINY_JPEG_B64, "base64");
+      await route.fulfill({
+        status: 200,
+        contentType: "application/octet-stream",
+        body: jpegBytes,
+      });
+    });
+
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    // Inject a ChatMessage-like rendering with imeta tags
+    const result = await page.evaluate(async () => {
+      const container = document.createElement("div");
+      container.id = "test-chat";
+      document.body.prepend(container);
+
+      // Simulate the imeta extraction logic from ChatMessage.svelte
+      const tags = [
+        ["imeta", "url /mock-blossom/chat-image", "m image/jpeg", "x abc123"],
+      ];
+
+      const imetaImages = tags
+        .filter((t) => t[0] === "imeta" && t.some((v) => v.startsWith("m image/")))
+        .map((t) => ({
+          url: t.find((v) => v.startsWith("url "))?.slice(4) || "",
+          mime: t.find((v) => v.startsWith("m "))?.slice(2) || "image/jpeg",
+        }))
+        .filter((m) => m.url);
+
+      // Render like the template does
+      for (const img of imetaImages) {
+        const a = document.createElement("a");
+        a.href = img.url;
+        a.target = "_blank";
+        const imgEl = document.createElement("img");
+        imgEl.src = img.url;
+        imgEl.alt = "";
+        imgEl.style.maxWidth = "100%";
+        imgEl.style.borderRadius = "8px";
+        a.appendChild(imgEl);
+        container.appendChild(a);
+      }
+
+      // Wait for images to load
+      await new Promise((r) => setTimeout(r, 2000));
+
+      const imgs = container.querySelectorAll("img");
+      const results: any[] = [];
+      for (const img of imgs) {
+        results.push({
+          naturalWidth: (img as HTMLImageElement).naturalWidth,
+          naturalHeight: (img as HTMLImageElement).naturalHeight,
+          src: (img as HTMLImageElement).src.substring(0, 60),
+        });
+      }
+      return { imageCount: imetaImages.length, rendered: results };
+    });
+
+    console.log("ChatMessage rendering:", JSON.stringify(result, null, 2));
+    expect(result.imageCount).toBe(1);
+    expect(result.rendered[0].naturalWidth).toBeGreaterThan(0);
+  });
+
+  test("imeta URL is suppressed from link rendering", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForLoadState("domcontentloaded");
+
+    // Simulate the duplicate-suppression logic
+    const result = await page.evaluate(() => {
+      const tags = [
+        ["imeta", "url https://blossom.example.com/abc123", "m image/jpeg"],
+      ];
+      const content = "https://blossom.example.com/abc123";
+
+      // Extract imeta URLs
+      const imetaImages = tags
+        .filter((t) => t[0] === "imeta" && t.some((v) => v.startsWith("m image/")))
+        .map((t) => ({
+          url: t.find((v) => v.startsWith("url "))?.slice(4) || "",
+        }))
+        .filter((m) => m.url);
+      const imetaUrls = new Set(imetaImages.map((i) => i.url));
+
+      // Check if the content URL would be suppressed
+      return {
+        contentUrl: content,
+        imetaUrls: [...imetaUrls],
+        wouldSuppress: imetaUrls.has("https://blossom.example.com/abc123"),
+      };
+    });
+
+    console.log("Duplicate suppression:", result);
+    expect(result.wouldSuppress).toBe(true);
+  });
+});
diff --git a/test/e2e/blossom-real.spec.ts b/test/e2e/blossom-real.spec.ts
new file mode 100644
index 00000000..a2feff82
--- /dev/null
+++ b/test/e2e/blossom-real.spec.ts
@@ -0,0 +1,81 @@
+import { test, expect } from "@playwright/test";
+
+const BLOSSOM_URL =
+  "https://blossom.primal.net/7a2fd4e46f5054fa102c4db68f58c57e630c4f7fdfa06fa08a4b81b21741c541";
+
+test("diagnose blossom image loading", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForLoadState("domcontentloaded");
+
+  const result = await page.evaluate(async (url) => {
+    const diag: any = {};
+
+    // Step 1: Fetch
+    try {
+      const r = await fetch(url);
+      diag.fetchOk = r.ok;
+      diag.fetchStatus = r.status;
+      diag.fetchContentType = r.headers.get("content-type");
+      diag.fetchUrl = r.url; // final URL after redirects
+
+      const blob = await r.blob();
+      diag.blobSize = blob.size;
+      diag.blobType = blob.type;
+
+      // Check first bytes (JPEG magic: FF D8 FF)
+      const arr = new Uint8Array(await blob.slice(0, 4).arrayBuffer());
+      diag.magic = Array.from(arr).map((b) => b.toString(16).padStart(2, "0")).join(" ");
+      diag.isJpeg = arr[0] === 0xff && arr[1] === 0xd8 && arr[2] === 0xff;
+
+      // Step 2: Re-type blob
+      const retyped = new Blob([blob], { type: "image/jpeg" });
+      diag.retypedSize = retyped.size;
+      diag.retypedType = retyped.type;
+
+      const blobUrl = URL.createObjectURL(retyped);
+      diag.blobUrl = blobUrl;
+
+      // Step 3: Try to load as img
+      const img = document.createElement("img");
+      img.src = blobUrl;
+      document.body.prepend(img);
+
+      const imgResult = await new Promise<string>((resolve) => {
+        img.onload = () => resolve("loaded");
+        img.onerror = () => resolve("error");
+        setTimeout(() => resolve("timeout"), 10000);
+      });
+
+      diag.imgResult = imgResult;
+      diag.naturalWidth = img.naturalWidth;
+      diag.naturalHeight = img.naturalHeight;
+
+      // Step 4: Also try data URL
+      const reader = new FileReader();
+      const dataUrl = await new Promise<string>((resolve) => {
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsDataURL(retyped);
+      });
+      diag.dataUrlPrefix = dataUrl.substring(0, 40);
+
+      const img2 = document.createElement("img");
+      img2.src = dataUrl;
+      document.body.prepend(img2);
+
+      const img2Result = await new Promise<string>((resolve) => {
+        img2.onload = () => resolve("loaded");
+        img2.onerror = () => resolve("error");
+        setTimeout(() => resolve("timeout"), 10000);
+      });
+      diag.dataUrlResult = img2Result;
+      diag.dataUrlWidth = img2.naturalWidth;
+    } catch (e: any) {
+      diag.error = e.message;
+    }
+
+    return diag;
+  }, BLOSSOM_URL);
+
+  console.log("Blossom diagnosis:", JSON.stringify(result, null, 2));
+  // Just log, don't assert
+});