fix uppercase image extensions and improve binary file UI

Author: alexyaroshuk

packages/app/src/pages/session.tsx

@@ -2798,8 +2798,13 @@ export default function Page() {
                                 <Match when={state()?.loaded && isBinary()}>
                                   <div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
                                     <Mark class="w-14 opacity-10" />
-                                    <div class="text-14-regular text-text-weak max-w-56">
-                                      {language.t("session.files.binaryContent")}
+                                    <div class="flex flex-col gap-2 max-w-md">
+                                      <div class="text-14-semibold text-text-strong truncate">
+                                        {path()?.split("/").pop()}
+                                      </div>
+                                      <div class="text-14-regular text-text-weak">
+                                        {language.t("session.files.binaryContent")}
+                                      </div>
                                     </div>
                                   </div>
                                 </Match>

packages/opencode/src/file/index.ts

@@ -73,6 +73,174 @@ export namespace File {
     })
   export type Content = z.infer<typeof Content>
 
+  const binaryExtensions = new Set([
+    "exe",
+    "dll",
+    "pdb",
+    "bin",
+    "so",
+    "dylib",
+    "o",
+    "a",
+    "lib",
+    "wav",
+    "mp3",
+    "ogg",
+    "oga",
+    "ogv",
+    "ogx",
+    "flac",
+    "aac",
+    "wma",
+    "m4a",
+    "weba",
+    "mp4",
+    "avi",
+    "mov",
+    "wmv",
+    "flv",
+    "webm",
+    "mkv",
+    "zip",
+    "tar",
+    "gz",
+    "gzip",
+    "bz",
+    "bz2",
+    "bzip",
+    "bzip2",
+    "7z",
+    "rar",
+    "xz",
+    "lz",
+    "z",
+    "pdf",
+    "doc",
+    "docx",
+    "ppt",
+    "pptx",
+    "xls",
+    "xlsx",
+    "dmg",
+    "iso",
+    "img",
+    "vmdk",
+    "ttf",
+    "otf",
+    "woff",
+    "woff2",
+    "eot",
+    "sqlite",
+    "db",
+    "mdb",
+    "apk",
+    "ipa",
+    "aab",
+    "xapk",
+    "app",
+    "pkg",
+    "deb",
+    "rpm",
+    "snap",
+    "flatpak",
+    "appimage",
+    "msi",
+    "msp",
+    "jar",
+    "war",
+    "ear",
+    "class",
+    "kotlin_module",
+    "dex",
+    "vdex",
+    "odex",
+    "oat",
+    "art",
+    "wasm",
+    "wat",
+    "bc",
+    "ll",
+    "s",
+    "ko",
+    "sys",
+    "drv",
+    "efi",
+    "rom",
+    "com",
+    "bat",
+    "cmd",
+    "ps1",
+    "sh",
+    "bash",
+    "zsh",
+    "fish",
+  ])
+
+  const imageExtensions = new Set([
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "bmp",
+    "webp",
+    "ico",
+    "tif",
+    "tiff",
+    "svg",
+    "svgz",
+    "avif",
+    "apng",
+    "jxl",
+    "heic",
+    "heif",
+    "raw",
+    "cr2",
+    "nef",
+    "arw",
+    "dng",
+    "orf",
+    "raf",
+    "pef",
+    "x3f",
+  ])
+
+  function isImageByExtension(filepath: string): boolean {
+    const ext = path.extname(filepath).toLowerCase().slice(1)
+    return imageExtensions.has(ext)
+  }
+
+  function getImageMimeType(filepath: string): string {
+    const ext = path.extname(filepath).toLowerCase().slice(1)
+    const mimeTypes: Record<string, string> = {
+      png: "image/png",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      gif: "image/gif",
+      bmp: "image/bmp",
+      webp: "image/webp",
+      ico: "image/x-icon",
+      tif: "image/tiff",
+      tiff: "image/tiff",
+      svg: "image/svg+xml",
+      svgz: "image/svg+xml",
+      avif: "image/avif",
+      apng: "image/apng",
+      jxl: "image/jxl",
+      heic: "image/heic",
+      heif: "image/heif",
+    }
+    return mimeTypes[ext] || "image/" + ext
+  }
+
+  function isBinaryByExtension(filepath: string): boolean {
+    const ext = path.extname(filepath).toLowerCase().slice(1)
+    return binaryExtensions.has(ext)
+  }
+
+  function isImage(mimeType: string): boolean {
+    return mimeType.startsWith("image/")
+  }
+
   async function shouldEncode(file: BunFile): Promise<boolean> {
     const type = file.type?.toLowerCase()
     log.info("shouldEncode", { type })
@@ -83,37 +251,13 @@ export namespace File {
 
     const parts = type.split("/", 2)
     const top = parts[0]
-    const rest = parts[1] ?? ""
-    const sub = rest.split(";", 1)[0]
 
     const tops = ["image", "audio", "video", "font", "model", "multipart"]
     if (tops.includes(top)) return true
 
-    const bins = [
-      "zip",
-      "gzip",
-      "bzip",
-      "compressed",
-      "binary",
-      "pdf",
-      "msword",
-      "powerpoint",
-      "excel",
-      "ogg",
-      "exe",
-      "dmg",
-      "iso",
-      "rar",
-    ]
-    if (bins.some((mark) => sub.includes(mark))) return true
-
     return false
   }
 
-  function isImage(mimeType: string): boolean {
-    return mimeType.startsWith("image/")
-  }
-
   export const Event = {
     Edited: BusEvent.define(
       "file.edited",
@@ -280,64 +424,6 @@ export namespace File {
     }))
   }
 
-  const binaryExtensions = new Set([
-    "exe",
-    "dll",
-    "pdb",
-    "bin",
-    "so",
-    "dylib",
-    "o",
-    "a",
-    "lib",
-    "wav",
-    "mp3",
-    "ogg",
-    "flac",
-    "aac",
-    "wma",
-    "m4a",
-    "mp4",
-    "avi",
-    "mov",
-    "wmv",
-    "flv",
-    "webm",
-    "mkv",
-    "zip",
-    "tar",
-    "gz",
-    "bz2",
-    "7z",
-    "rar",
-    "xz",
-    "lz",
-    "pdf",
-    "doc",
-    "docx",
-    "ppt",
-    "pptx",
-    "xls",
-    "xlsx",
-    "dmg",
-    "iso",
-    "img",
-    "vmdk",
-    "ttf",
-    "otf",
-    "woff",
-    "woff2",
-    "eot",
-    "sqlite",
-    "db",
-    "mdb",
-  ])
-
-  function isBinaryByExtension(filepath: string): boolean {
-    const ext = path.extname(filepath).toLowerCase().slice(1)
-    return binaryExtensions.has(ext)
-  }
-
   export async function read(file: string): Promise<Content> {
     using _ = log.time("read", { file })
     const project = Instance.project
@@ -350,6 +436,17 @@ export namespace File {
     }
 
     // Fast path: check extension before any filesystem operations
+    if (isImageByExtension(file)) {
+      const bunFile = Bun.file(full)
+      if (await bunFile.exists()) {
+        const buffer = await bunFile.arrayBuffer().catch(() => new ArrayBuffer(0))
+        const content = Buffer.from(buffer).toString("base64")
+        const mimeType = getImageMimeType(file)
+        return { type: "text", content, mimeType, encoding: "base64" }
+      }
+      return { type: "text", content: "" }
+    }
+
     if (isBinaryByExtension(file)) {
       return { type: "binary", content: "" }
     }

packages/sdk/js/src/gen/types.gen.ts

@@ -1554,7 +1554,7 @@ export type FileNode = {
 }
 
 export type FileContent = {
-  type: "text"
+  type: "text" | "binary"
   content: string
   diff?: string
   patch?: {

packages/sdk/js/src/v2/gen/types.gen.ts

@@ -2062,7 +2062,7 @@ export type FileNode = {
 }
 
 export type FileContent = {
-  type: "text"
+  type: "text" | "binary"
   content: string
   diff?: string
   patch?: {