feat(web): safely attach HEIC photos as JPEG images

apps/web/package.json

@@ -34,6 +34,7 @@
     "class-variance-authority": "^0.7.1",
     "culori": "^4.0.2",
     "effect": "catalog:",
+    "heic-to": "^1.5.2",
     "jose": "catalog:",
     "jsonc-parser": "3.3.1",
     "jszip": "3.10.1",

apps/web/src/components/chat/ChatComposer.tsx

@@ -73,7 +73,11 @@ import {
   type ComposerTaskStep,
   type ComposerTasksProgress,
 } from "./ComposerTasksBadge";
-import { compressImageForStash, compressImageToByteLimit } from "../../lib/imageCompression";
+import {
+  compressImageForStash,
+  isHeicImageFile,
+  prepareImageForAttachment,
+} from "../../lib/imageCompression";
 import {
   releaseAttachmentUpload,
   retryAttachmentUpload,
@@ -2537,12 +2541,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     const acceptedFiles: File[] = [];
     let error: string | null = null;
     for (const file of files) {
-      if (!file.type.startsWith("image/")) {
+      const isHeicImage = isHeicImageFile(file);
+      if (!file.type.startsWith("image/") && !isHeicImage) {
         error = `Unsupported file type for '${file.name}'. Please attach image files only.`;
         continue;
       }
-      if (!isProviderSendTurnSupportedImageMimeType(file.type)) {
-        error = `'${file.name}' is not a supported image type. Attach GIF, JPEG, PNG, or WebP images.`;
+      if (!isHeicImage && !isProviderSendTurnSupportedImageMimeType(file.type)) {
+        error = `'${file.name}' is not a supported image type. Attach GIF, HEIC, HEIF, JPEG, PNG, or WebP images.`;
         continue;
       }
       if (reservedCount >= PROVIDER_SEND_TURN_MAX_ATTACHMENTS) {
@@ -2562,7 +2567,10 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       for (const file of acceptedFiles) {
         // Images over the wire cap are downscaled to fit rather than
         // refused; files already within it pass through byte-for-byte.
-        const compressed = await compressImageToByteLimit(file, PROVIDER_SEND_TURN_MAX_IMAGE_BYTES);
+        const compressed = await prepareImageForAttachment(
+          file,
+          PROVIDER_SEND_TURN_MAX_IMAGE_BYTES,
+        );
         if (!compressed.ok) {
           compressionError =
             compressed.reason === "unreadable"
@@ -2615,7 +2623,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const onComposerPaste = (event: React.ClipboardEvent<HTMLElement>) => {
     const files = Array.from(event.clipboardData.files);
     if (files.length === 0) return;
-    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
+    const imageFiles = files.filter(
+      (file) => file.type.startsWith("image/") || isHeicImageFile(file),
+    );
     if (imageFiles.length === 0) return;
     event.preventDefault();
     void addComposerImages(imageFiles);

apps/web/src/lib/imageCompression.test.ts

@@ -3,10 +3,20 @@ import { afterEach, describe, expect, it, vi } from "vite-plus/test";
 import {
   compressImageForStash,
   compressImageToByteLimit,
+  isHeicImageFile,
   MAX_COMPRESSIBLE_SOURCE_BYTES,
   MAX_STASH_IMAGE_DATA_URL_CHARS,
+  prepareImageForAttachment,
 } from "./imageCompression";
 
+const mocks = vi.hoisted(() => ({
+  heicTo: vi.fn(),
+}));
+
+vi.mock("heic-to/csp", () => ({
+  heicTo: mocks.heicTo,
+}));
+
 /**
  * jsdom has no real canvas/codec, so the re-encode path is exercised with
  * stubbed `createImageBitmap` + `OffscreenCanvas`. The encoder stub returns a
@@ -22,6 +32,45 @@ function makeFile(sizeBytes: number, type = "image/png"): File {
   return new File([new Uint8Array(sizeBytes).fill(7)], "shot.png", { type });
 }
 
+function makeHeicFile(options?: {
+  name?: string;
+  type?: string;
+  width?: number;
+  height?: number;
+  lastModified?: number;
+}): File {
+  const encoder = new TextEncoder();
+  const makeBox = (name: string, ...contents: Uint8Array[]) => {
+    const bytes = new Uint8Array(8 + contents.reduce((size, content) => size + content.length, 0));
+    new DataView(bytes.buffer).setUint32(0, bytes.length);
+    bytes.set(encoder.encode(name), 4);
+    let offset = 8;
+    for (const content of contents) {
+      bytes.set(content, offset);
+      offset += content.length;
+    }
+    return bytes;
+  };
+
+  const dimensions = new Uint8Array(12);
+  const view = new DataView(dimensions.buffer);
+  view.setUint32(4, options?.width ?? 4000);
+  view.setUint32(8, options?.height ?? 3000);
+  const properties = makeBox("iprp", makeBox("ipco", makeBox("ispe", dimensions)));
+
+  return new File(
+    [
+      makeBox("ftyp", encoder.encode("heic"), new Uint8Array(4)),
+      makeBox("meta", new Uint8Array(4), properties),
+    ],
+    options?.name ?? "photo.heic",
+    {
+      type: options?.type ?? "image/heic",
+      ...(options?.lastModified !== undefined ? { lastModified: options.lastModified } : {}),
+    },
+  );
+}
+
 /**
  * Installs a fake bitmap + canvas whose encoded size follows `sizeForQuality`.
  * `supportsWebp: false` makes `convertToBlob` hand back a differently-typed
@@ -63,6 +112,7 @@ function stubCanvasPipeline(
 }
 
 afterEach(() => {
+  mocks.heicTo.mockReset();
   vi.unstubAllGlobals();
   globalThis.createImageBitmap = originalCreateImageBitmap;
   globalThis.OffscreenCanvas = originalOffscreenCanvas;
@@ -251,3 +301,148 @@ describe("compressImageForStash", () => {
     expect(smallestRequested).toBeLessThan(800);
   });
 });
+
+describe("HEIC attachment preparation", () => {
+  it("recognizes HEIC and HEIF MIME types and case-insensitive file extensions", () => {
+    expect(isHeicImageFile({ name: "photo.bin", type: "image/heic" })).toBe(true);
+    expect(isHeicImageFile({ name: "photo.bin", type: "image/heif" })).toBe(true);
+    expect(isHeicImageFile({ name: "photo.heic", type: "image/heic-sequence" })).toBe(false);
+    expect(isHeicImageFile({ name: "photo.heif", type: "image/heif-sequence" })).toBe(false);
+    expect(isHeicImageFile({ name: "IMG_1234.HEIC", type: "" })).toBe(true);
+    expect(isHeicImageFile({ name: "photo.heif", type: "application/octet-stream" })).toBe(true);
+    expect(isHeicImageFile({ name: "photo.png", type: "image/png" })).toBe(false);
+    expect(isHeicImageFile({ name: "photo.heic", type: "image/png" })).toBe(false);
+    expect(isHeicImageFile({ name: "photo.heif", type: "image/jpeg" })).toBe(false);
+  });
+
+  it("converts a HEIC photo with a missing MIME type into a named JPEG", async () => {
+    const original = makeHeicFile({
+      name: "IMG_1234.HEIC",
+      type: "",
+      lastModified: 123,
+    });
+    mocks.heicTo.mockResolvedValueOnce(
+      new Blob([new Uint8Array([4, 5, 6, 7])], { type: "image/jpeg" }),
+    );
+
+    const result = await prepareImageForAttachment(original, 1024);
+
+    expect(mocks.heicTo).toHaveBeenCalledWith({
+      blob: original,
+      type: "image/jpeg",
+      quality: 0.92,
+    });
+    expect(result.ok && result.file.name).toBe("IMG_1234.jpg");
+    expect(result.ok && result.file.type).toBe("image/jpeg");
+    expect(result.ok && result.file.size).toBe(4);
+    expect(result.ok && result.file.lastModified).toBe(123);
+    expect(result.ok && result.recompressed).toBe(true);
+  });
+
+  it("keeps oversized converted photos in JPEG format while shrinking them", async () => {
+    const original = makeHeicFile({
+      name: "photo.heif",
+      type: "image/heif",
+    });
+    mocks.heicTo.mockResolvedValueOnce(
+      new Blob([new Uint8Array(2_000_000)], { type: "image/jpeg" }),
+    );
+    const { fillRect } = stubCanvasPipeline(() => 200_000);
+
+    const result = await prepareImageForAttachment(original, 1_000_000);
+
+    expect(result.ok && result.file.name).toBe("photo.jpg");
+    expect(result.ok && result.file.type).toBe("image/jpeg");
+    expect(result.ok && result.file.size).toBeLessThanOrEqual(1_000_000);
+    expect(fillRect).toHaveBeenCalled();
+  });
+
+  it("compresses JPEG intermediates above the source safety ceiling", async () => {
+    const original = makeHeicFile({
+      name: "large.heic",
+      type: "image/heic",
+    });
+    mocks.heicTo.mockResolvedValueOnce(
+      new Blob([new Uint8Array(MAX_COMPRESSIBLE_SOURCE_BYTES + 1)], {
+        type: "image/jpeg",
+      }),
+    );
+    const { close } = stubCanvasPipeline(() => 200_000);
+
+    const result = await prepareImageForAttachment(original, 1_000_000);
+
+    expect(result.ok && result.file.name).toBe("large.jpg");
+    expect(result.ok && result.file.type).toBe("image/jpeg");
+    expect(result.ok && result.file.size).toBeLessThanOrEqual(1_000_000);
+    expect(close).toHaveBeenCalled();
+  });
+
+  it.each([
+    { label: "24 MP", width: 5712, height: 4284 },
+    { label: "48 MP", width: 8064, height: 6048 },
+  ])("accepts $label HEIC photos", async ({ width, height }) => {
+    const original = makeHeicFile({ width, height });
+    mocks.heicTo.mockResolvedValueOnce(new Blob(["jpeg"], { type: "image/jpeg" }));
+
+    const result = await prepareImageForAttachment(original, 1024);
+
+    expect(result.ok && result.file.type).toBe("image/jpeg");
+    expect(mocks.heicTo).toHaveBeenCalledOnce();
+  });
+
+  it("rejects oversized HEIC dimensions before loading the decoder", async () => {
+    const original = makeHeicFile({ width: 16_000, height: 4001 });
+
+    expect(await prepareImageForAttachment(original, 1024)).toEqual({
+      ok: false,
+      reason: "too-large",
+    });
+    expect(mocks.heicTo).not.toHaveBeenCalled();
+  });
+
+  it("rejects invalid HEIC metadata before loading the decoder", async () => {
+    const original = new File([new Uint8Array([1, 2, 3])], "broken.heic", {
+      type: "image/heic",
+    });
+
+    expect(await prepareImageForAttachment(original, 1024)).toEqual({
+      ok: false,
+      reason: "unreadable",
+    });
+    expect(mocks.heicTo).not.toHaveBeenCalled();
+  });
+
+  it("reports unreadable when HEIC decoding fails", async () => {
+    const original = makeHeicFile({
+      name: "broken.heic",
+      type: "image/heic",
+    });
+    mocks.heicTo.mockRejectedValueOnce(new Error("Invalid HEIC image"));
+
+    expect(await prepareImageForAttachment(original, 1024)).toEqual({
+      ok: false,
+      reason: "unreadable",
+    });
+  });
+
+  it("rejects unsafe HEIC sources before loading the decoder", async () => {
+    const original = new File(["photo"], "large.heic", { type: "image/heic" });
+    Object.defineProperty(original, "size", { value: MAX_COMPRESSIBLE_SOURCE_BYTES + 1 });
+
+    expect(await prepareImageForAttachment(original, 1024)).toEqual({
+      ok: false,
+      reason: "too-large",
+    });
+    expect(mocks.heicTo).not.toHaveBeenCalled();
+  });
+
+  it("leaves supported images untouched without loading the HEIC decoder", async () => {
+    const original = makeFile(1024);
+
+    const result = await prepareImageForAttachment(original, 2048);
+
+    expect(result.ok && result.file).toBe(original);
+    expect(result.ok && result.recompressed).toBe(false);
+    expect(mocks.heicTo).not.toHaveBeenCalled();
+  });
+});