refactor: Centralize image and binary extension utilities (#2363)

## Problem

Image extension sets and MIME mappings were duplicated across 9+ files, causing inconsistent behavior across paste, drag/drop, attachments, thumbnails and Claude API conversion.

<!-- Who is this for and what problem does it solve? -->

<!-- Closes #ISSUE_ID -->

## Changes

1. Add `@posthog/shared/image` as canonical source: `IMAGE_MIME_TYPES`, `ALLOWED_IMAGE_MIME_TYPES`, `CLAUDE_IMAGE_EXTENSIONS`, `ClaudeImageMimeType`, plus `isImageFile` / `isRasterImageFile` / `isClaudeImageFile` /  
`isGifFile` / `getImageMimeType` / `parseImageDataUrl`
2. Add `@posthog/shared/binary` with `BINARY_EXTENSIONS` and `isBinaryFile`, image portion derived from the canonical image set
3. Delete `apps/code/src/shared/constants/image.ts` and `apps/code/src/shared/utils/imageDataUrl.ts`; migrate 7 importers to `@posthog/shared`
4. Wire `@posthog/shared` into mobile (package.json dep + Metro alias to TS source)
5. Replace local `COMMON_IMAGE_EXTENSIONS` and `ImageMimeType` union in the Claude ACP adapter with shared exports
6. Switch `CodeEditorPanel` to `isRasterImageFile` so SVGs keep opening in CodeMirror (broad `isImageFile` now includes svg/heic)

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

Manually

<!-- Describe what you tested -- manual steps, automated tests, or both. -->

<!-- If you're an agent, only list tests you actually ran. -->

## Publish to changelog?

no

<!-- For features only -->

<!-- If publishing, you must provide changelog details in the #changelog Slack channel. You will receive a follow-up PR comment or notification. -->

<!-- If not, write "no" or "do not publish to changelog" to explicitly opt-out of posting to #changelog. Removing this entire section will not prevent posting. -->

Author: charlesvien

apps/code/src/main/trpc/routers/os.ts

@@ -5,7 +5,11 @@ import type { IAppMeta } from "@posthog/platform/app-meta";
 import type { DialogSeverity, IDialog } from "@posthog/platform/dialog";
 import type { IImageProcessor } from "@posthog/platform/image-processor";
 import type { IUrlLauncher } from "@posthog/platform/url-launcher";
-import { IMAGE_MIME_TYPES } from "@shared/constants/image";
+import {
+  ALLOWED_IMAGE_MIME_TYPES,
+  IMAGE_MIME_TYPES,
+  isRasterImageFile,
+} from "@posthog/shared";
 import { z } from "zod";
 import { container } from "../../di/container";
 import { MAIN_TOKENS } from "../../di/tokens";
@@ -293,7 +297,8 @@ export const osRouter = router({
         if (stat.size > input.maxSizeBytes) return null;
 
         const ext = path.extname(input.filePath).toLowerCase().slice(1);
-        const mime = IMAGE_MIME_TYPES[ext] ?? "application/octet-stream";
+        const mime = IMAGE_MIME_TYPES[ext];
+        if (!mime || !ALLOWED_IMAGE_MIME_TYPES.has(mime)) return null;
 
         const buffer = await fsPromises.readFile(input.filePath);
         return `data:${mime};base64,${buffer.toString("base64")}`;
@@ -354,7 +359,7 @@ export const osRouter = router({
     .input(z.object({ filePath: z.string().min(1) }))
     .mutation(async ({ input }) => {
       const ext = path.extname(input.filePath).toLowerCase().slice(1);
-      if (!IMAGE_MIME_TYPES[ext]) {
+      if (!isRasterImageFile(input.filePath)) {
         throw new Error(`Unsupported image type: .${ext}`);
       }
 

apps/code/src/renderer/components/ui/SafeImagePreview.tsx

@@ -1,9 +1,9 @@
-import { Flex, Text } from "@radix-ui/themes";
 import {
   buildImageDataUrl,
   isAllowedImageMimeType,
   MAX_IMAGE_BASE64_LENGTH,
-} from "@shared/utils/imageDataUrl";
+} from "@posthog/shared";
+import { Flex, Text } from "@radix-ui/themes";
 import { useState } from "react";
 
 interface SafeImagePreviewProps {
@@ -12,6 +12,7 @@ interface SafeImagePreviewProps {
   mimeType: string;
   alt?: string;
   className?: string;
+  style?: React.CSSProperties;
   /** Rendered when the image fails to decode or has a disallowed mime type. */
   fallback?: React.ReactNode;
 }
@@ -33,6 +34,7 @@ export function SafeImagePreview({
   mimeType,
   alt,
   className,
+  style,
   fallback,
 }: SafeImagePreviewProps) {
   const [hasError, setHasError] = useState(false);
@@ -57,6 +59,7 @@ export function SafeImagePreview({
       src={buildImageDataUrl(mimeType, base64)}
       alt={alt ?? "image preview"}
       className={className ?? "max-h-full max-w-full object-contain"}
+      style={style}
       onError={() => setHasError(true)}
     />
   );

apps/code/src/renderer/features/code-editor/components/CodeEditorPanel.tsx

@@ -12,11 +12,14 @@ import { useFileTreeStore } from "@features/right-sidebar/stores/fileTreeStore";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 import { useIsWorkspaceCloudRun } from "@features/workspace/hooks/useWorkspace";
 import { Check, Copy } from "@phosphor-icons/react";
+import {
+  getImageMimeType,
+  isRasterImageFile,
+  parseImageDataUrl,
+} from "@posthog/shared";
 import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
 import { trpcClient, useTRPC } from "@renderer/trpc/client";
-import { getImageMimeType, isImageFile } from "@shared/constants/image";
 import type { Task } from "@shared/types";
-import { parseImageDataUrl } from "@shared/utils/imageDataUrl";
 
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
@@ -73,7 +76,7 @@ export function CodeEditorPanel({
   const repoPath = useCwd(taskId);
   const isInsideRepo = !!repoPath && absolutePath.startsWith(repoPath);
   const filePath = getRelativePath(absolutePath, repoPath);
-  const isImage = isImageFile(absolutePath);
+  const isImage = isRasterImageFile(absolutePath);
   const isMarkdown = isMarkdownFile(absolutePath);
   const openFileInSplit = usePanelLayoutStore((s) => s.openFileInSplit);
   const expandToFile = useFileTreeStore((s) => s.expandToFile);

apps/code/src/renderer/features/editor/utils/cloud-prompt.test.ts

@@ -7,26 +7,6 @@ const mockFs = vi.hoisted(() => ({
   readFileAsBase64: { query: vi.fn() },
 }));
 
-vi.mock("@shared/constants/image", async () => {
-  const actual = await vi.importActual<
-    typeof import("@shared/constants/image")
-  >("@shared/constants/image");
-  return {
-    ...actual,
-    getImageMimeType: (name: string) => {
-      const ext = name.split(".").pop()?.toLowerCase();
-      const map: Record<string, string> = {
-        png: "image/png",
-        jpg: "image/jpeg",
-        jpeg: "image/jpeg",
-        gif: "image/gif",
-        webp: "image/webp",
-      };
-      return map[ext ?? ""] ?? "image/png";
-    },
-  };
-});
-
 vi.mock("@renderer/trpc/client", () => ({
   trpcClient: {
     fs: mockFs,
@@ -172,6 +152,26 @@ describe("cloud-prompt", () => {
     ).rejects.toThrow(/Unsupported image/);
   });
 
+  it("treats SVG attachments as text resource links", async () => {
+    const blocks = await buildCloudPromptBlocks(
+      'see <file path="/tmp/icon.svg" />',
+    );
+    expect(blocks[1]).toMatchObject({
+      type: "resource_link",
+      name: "icon.svg",
+    });
+    expect(mockFs.readFileAsBase64.query).not.toHaveBeenCalled();
+  });
+
+  it("rejects HEIC and HEIF as unsupported attachments (not images)", async () => {
+    await expect(
+      buildCloudPromptBlocks('see <file path="/tmp/photo.heic" />'),
+    ).rejects.toThrow(/Unsupported attachment/);
+    await expect(
+      buildCloudPromptBlocks('see <file path="/tmp/photo.heif" />'),
+    ).rejects.toThrow(/Unsupported attachment/);
+  });
+
   it("does not rely on readAbsoluteFile for txt attachments", async () => {
     const blocks = await buildCloudPromptBlocks(
       'read <file path="/tmp/maybe-missing-on-disk.txt" />',

apps/code/src/renderer/features/editor/utils/cloud-prompt.ts

@@ -1,7 +1,12 @@
 import type { ContentBlock } from "@agentclientprotocol/sdk";
-import { CLOUD_PROMPT_PREFIX, serializeCloudPrompt } from "@posthog/shared";
+import {
+  CLOUD_PROMPT_PREFIX,
+  getImageMimeType,
+  isClaudeImageFile,
+  isRasterImageFile,
+  serializeCloudPrompt,
+} from "@posthog/shared";
 import { trpcClient } from "@renderer/trpc/client";
-import { getImageMimeType, isImageFile } from "@shared/constants/image";
 import {
   getFileExtension,
   getFileName,
@@ -61,8 +66,6 @@ const TEXT_FILENAMES = new Set([
   "README",
   "README.md",
 ]);
-const CLOUD_IMAGE_EXTENSIONS = new Set(["png", "jpg", "jpeg", "gif", "webp"]);
-
 const MAX_EMBEDDED_IMAGE_BYTES = 5 * 1024 * 1024;
 
 function isTextAttachment(filePath: string): boolean {
@@ -71,10 +74,6 @@ function isTextAttachment(filePath: string): boolean {
   return TEXT_FILENAMES.has(fileName) || TEXT_EXTENSIONS.has(ext);
 }
 
-export function isSupportedCloudImageAttachment(filePath: string): boolean {
-  return CLOUD_IMAGE_EXTENSIONS.has(getFileExtension(filePath));
-}
-
 export function isSupportedCloudTextAttachment(filePath: string): boolean {
   return isTextAttachment(filePath);
 }
@@ -163,7 +162,7 @@ async function buildAttachmentBlock(filePath: string): Promise<ContentBlock> {
   const fileName = getFileName(filePath);
   const uri = pathToFileUri(filePath);
 
-  if (isSupportedCloudImageAttachment(fileName)) {
+  if (isClaudeImageFile(fileName)) {
     const base64 = await trpcClient.fs.readFileAsBase64.query({ filePath });
     if (!base64) {
       throw new Error(`Unable to read attached image ${fileName}`);
@@ -183,7 +182,7 @@ async function buildAttachmentBlock(filePath: string): Promise<ContentBlock> {
     };
   }
 
-  if (isImageFile(fileName)) {
+  if (isRasterImageFile(fileName)) {
     throw new Error(
       `Cloud image attachments currently support PNG, JPG, GIF, and WebP. Unsupported image: ${fileName}`,
     );

apps/code/src/renderer/features/message-editor/components/AttachmentMenu.tsx

@@ -12,9 +12,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@posthog/quill";
+import { isRasterImageFile } from "@posthog/shared";
 import { trpcClient, useTRPC } from "@renderer/trpc/client";
 import { toast } from "@renderer/utils/toast";
-import { isImageFile } from "@shared/constants/image";
 import { useQuery } from "@tanstack/react-query";
 import { useRef, useState } from "react";
 import {
@@ -123,7 +123,7 @@ export function AttachmentMenu({
     try {
       const results = await trpcClient.os.selectAttachments.query({ mode });
       for (const { path: filePath, kind } of results) {
-        if (kind === "file" && isImageFile(filePath)) {
+        if (kind === "file" && isRasterImageFile(filePath)) {
           try {
             const attachment = await persistImageFilePath(filePath);
             onAddAttachment(attachment);

apps/code/src/renderer/features/message-editor/components/AttachmentsBar.tsx

@@ -1,7 +1,7 @@
 import { File, X } from "@phosphor-icons/react";
+import { isGifFile, isRasterImageFile } from "@posthog/shared";
 import { Dialog, Flex, IconButton, Text } from "@radix-ui/themes";
 import { useTRPC } from "@renderer/trpc/client";
-import { isGifFile, isImageFile } from "@shared/constants/image";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
 import type { FileAttachment } from "../utils/content";
@@ -151,7 +151,7 @@ export function AttachmentsBar({ attachments, onRemove }: AttachmentsBarProps) {
   return (
     <Flex gap="1" align="center" className="flex-wrap pb-1.5">
       {attachments.map((att) =>
-        isImageFile(att.label) ? (
+        isRasterImageFile(att.label) ? (
           <ImageThumbnail
             key={att.id}
             attachment={att}

apps/code/src/renderer/features/message-editor/utils/persistFile.test.ts

@@ -25,10 +25,9 @@ vi.mock("@renderer/trpc/client", () => ({
   },
 }));
 
-vi.mock("@shared/constants/image", async () => {
-  const actual = await vi.importActual<
-    typeof import("@shared/constants/image")
-  >("@shared/constants/image");
+vi.mock("@posthog/shared", async () => {
+  const actual =
+    await vi.importActual<typeof import("@posthog/shared")>("@posthog/shared");
   return { ...actual, getImageMimeType: () => "image/png" };
 });
 

apps/code/src/renderer/features/message-editor/utils/persistFile.ts

@@ -1,6 +1,6 @@
+import { getImageMimeType, isRasterImageFile } from "@posthog/shared";
 import { trpcClient } from "@renderer/trpc/client";
 import { toast } from "@renderer/utils/toast";
-import { getImageMimeType, isImageFile } from "@shared/constants/image";
 import { getFilePath } from "@utils/getFilePath";
 import type { FileAttachment } from "./content";
 
@@ -74,7 +74,7 @@ export async function resolveDroppedFile(
   const filePath = getFilePath(file);
   if (!filePath) return null;
 
-  if (isImageFile(file.name)) {
+  if (isRasterImageFile(file.name)) {
     try {
       return await persistImageFilePath(filePath);
     } catch {

apps/code/src/renderer/features/sessions/components/session-update/CodePreview.tsx

@@ -1,8 +1,8 @@
 import { EditorView } from "@codemirror/view";
 import { SafeImagePreview } from "@components/ui/SafeImagePreview";
 import { MultiFileDiff } from "@pierre/diffs/react";
+import { parseImageDataUrl } from "@posthog/shared";
 import { Code } from "@radix-ui/themes";
-import { parseImageDataUrl } from "@shared/utils/imageDataUrl";
 import { useThemeStore } from "@stores/themeStore";
 import { compactHomePath } from "@utils/path";
 import { useEffect, useMemo, useRef } from "react";