perf(app): load draft image bytes on demand (#49703)

packages/app/src/composer/editor/editor.tsx

@@ -1,9 +1,10 @@
-import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show, type JSX } from "solid-js"
+import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FileIcon } from "@opencode/ui/file-icon"
 import { Icon } from "@opencode/ui/icon"
 import { IconButton } from "@opencode/ui/icon-button"
 import { createAnimatedPresence } from "@/runtime/animated-presence"
+import { resolveBlobUrl } from "@/runtime/persistence/drafts"
 import { ProviderIcon } from "@opencode/ui/provider-icon"
 import { useI18n } from "@opencode/ui/context/i18n"
 import { Button } from "@opencode/ui/button"
@@ -545,17 +546,21 @@ export function ComposerAttachments(props: {
                       </AttachmentCard>
                     }
                   >
-                    {(image) => (
-                      <>
-                    <img
-                      src={image().blob.url}
-                      alt={attachment.filename}
-                      class="w-[58px] h-[46px] rounded-[6px] object-cover"
-                      onClick={() => props.onAttachmentClick?.(attachment)}
-                    />
-                    <div class="absolute inset-0 rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-base)] pointer-events-none" />
-                      </>
-                    )}
+                    {(image) => {
+                      // Restored drafts and history carry image ids only; bytes load when shown.
+                      const [url] = createResource(() => image().blob, resolveBlobUrl)
+                      return (
+                        <>
+                          <img
+                            src={url() ?? ""}
+                            alt={attachment.filename}
+                            class="w-[58px] h-[46px] rounded-[6px] object-cover"
+                            onClick={() => props.onAttachmentClick?.(attachment)}
+                          />
+                          <div class="absolute inset-0 rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-base)] pointer-events-none" />
+                        </>
+                      )
+                    }}
                   </Show>
                 </Tooltip>
                 <button

packages/app/src/composer/model.ts

@@ -11,6 +11,7 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { useLayout } from "@/shell/state/layout"
 import { usePlatform } from "@/runtime/platform/platform"
 import { useWorkspaceLocation } from "@/workspaces/location"
+import { resolveBlobUrl } from "@/runtime/persistence/drafts"
 import { useData, useServer } from "@/runtime/server/current"
 import { createSessionTabs } from "@/session/helpers"
 import { showToast } from "@/shell/notifications/toast"
@@ -322,7 +323,9 @@ export function createComposerModel(adapter: ComposerAdapter, options?: { queue?
     },
     openAttachment: (attachment) => {
       if (attachment.type !== "image") return
-      dialog.show(() => createComponent(ImagePreview, { src: attachment.blob.url, alt: attachment.filename }))
+      void resolveBlobUrl(attachment.blob).then((src) => {
+        if (src) dialog.show(() => createComponent(ImagePreview, { src, alt: attachment.filename }))
+      })
     },
     openContext(key) {
       const item = controller.contextItem(key)

packages/app/src/composer/schema.test.ts

@@ -136,7 +136,7 @@ describe("composer persistence schemas", () => {
     ).toEqual(value)
   })
 
-  test("migrates inline images but never encodes dataUrl or unresolved references", () => {
+  test("migrates inline images, keeps store references without a URL, and never encodes dataUrl", () => {
     const value = Schema.decodeUnknownSync(
       Persistence.withInitial(ComposerStore, { prompt: DEFAULT_PROMPT, context: { items: [] } }),
     )({
@@ -149,12 +149,16 @@ describe("composer persistence schemas", () => {
         { ...image, blob: { id: "missing" }, dataUrl: "data:image/png;base64,YQ==" },
       ],
     })
-    expect(value.prompt).toHaveLength(3)
+    expect(value.prompt).toHaveLength(6)
     expect(value.prompt[0]).toEqual({
       ...image,
       sourcePath: "/image.png",
       blob: { id: "data:image/png;base64,YQ==", url: "data:image/png;base64,YQ==" },
     })
+    // Bytes still in the draft store resolve on use; a non-blob URL is discarded in favour of the id.
+    expect(value.prompt[3]).toEqual({ ...image, blob: { id: "missing", url: "" } })
+    expect(value.prompt[4]).toEqual({ ...image, blob: { id: "bad", url: "" } })
+    expect(value.prompt[5]).toEqual({ ...image, blob: { id: "missing", url: "" } })
     const encoded = Schema.encodeSync(ComposerStore)(value)
     expect(JSON.stringify(encoded)).not.toContain("dataUrl")
     expect(

packages/app/src/composer/schema.ts

@@ -61,11 +61,12 @@ const ImageFields = {
 }
 const Image = Persistence.struct({
   ...ImageFields,
-  blob: Schema.Struct({ id: Schema.NonEmptyString, url: Schema.String.check(Schema.isPattern(/^(blob:|data:)/)) }),
+  // An empty URL is an image whose bytes are still in the draft store; see `resolveBlobUrl`.
+  blob: Schema.Struct({ id: Schema.NonEmptyString, url: Schema.String.check(Schema.isPattern(/^(blob:|data:|$)/)) }),
 })
 
-// Draft storage hydrates content-addressed blobs before this codec runs. Legacy
-// inline data remains usable, but unresolved references are not renderable.
+// Draft storage keeps content-addressed blobs in the store until an image is shown or sent; a
+// reference without a URL resolves through `resolveBlobUrl`. Legacy inline data remains usable.
 export const ImageAttachmentPart = Schema.Struct({
   ...ImageFields,
   blob: Persistence.optional(

packages/app/src/composer/state.test.ts

@@ -88,6 +88,15 @@ describe("prompt state initialization", () => {
           start: 5,
           end: 12,
         },
+        // A reference without a usable URL keeps its id; the bytes resolve from the draft store on use.
+        {
+          type: "image",
+          id: "missing-blob",
+          filename: "missing.png",
+          mime: "image/png",
+          blob: { id: "content-hash-without-a-url", url: "" },
+        },
+        { type: "image", id: "invalid-url", filename: "invalid.png", mime: "image/png", blob: { id: "hash", url: "" } },
         {
           type: "image",
           id: "legacy",

packages/app/src/composer/submit.ts

@@ -8,7 +8,7 @@ import type { ComposerAdapter, ComposerDelivery, ComposerSelection, ComposerSess
 import { createComposerSubmission } from "./submission-state"
 import { buildPromptRequest } from "./request"
 import { setCursorPosition } from "./editor/dom"
-import { blobDataUrl } from "@/runtime/persistence/drafts"
+import { blobDataUrl, resolveBlobUrl } from "@/runtime/persistence/drafts"
 import { isAttachment } from "./prompt-parts"
 import type { ModelSelection } from "@/providers/models/selection"
 
@@ -59,12 +59,22 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
         selection: item.selection ? { ...item.selection } : undefined,
       })),
     })
-    const value = readSubmission(input, submission.prompt, submission.context, options?.alternate ?? false)
-    if (!value) {
+    const read = readSubmission(input, submission.prompt, submission.context, options?.alternate ?? false)
+    if (!read) {
       if (input.adapter.working() && input.adapter.kind === "active-session") void input.adapter.interrupt()
       return
     }
     if (submitting.has(input.adapter.state)) return
+    // Images restored from a draft or history carry ids only; the optimistic message shows their URLs.
+    const value = {
+      ...read,
+      images: await Promise.all(
+        read.images.map(async (image) => ({
+          ...image,
+          blob: { ...image.blob, url: (await resolveBlobUrl(image.blob)) ?? image.blob.url },
+        })),
+      ),
+    }
     submitting.add(input.adapter.state)
     const comments = input.comments.capture()
     // Capture command intent before starting a session in a worktree whose catalog has not loaded.

packages/app/src/runtime/persistence/drafts.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { createDraftStore, draftTextChunk, draftTextThreshold } from "./drafts"
+import { createDraftStore, draftTextChunk, draftTextThreshold, resolveBlobUrl } from "./drafts"
 
 function memoryDriver() {
   const documents = new Map<string, string>()
@@ -287,15 +287,34 @@ describe("draft store image retention", () => {
     expect(await released(store, 5, shared.url)).toBe(true)
   })
 
-  test("loading a document pins the images it references", async () => {
+  test("loading a document pins the images it references without fetching their bytes", async () => {
     const { memory, store } = fresh()
+    const reads: string[] = []
+    const getBlob = memory.driver.getBlob
+    memory.driver.getBlob = (id) => {
+      reads.push(id)
+      return getBlob(id)
+    }
     const id = await memory.driver.putBlob(image(6))
     memory.documents.set("loaded", JSON.stringify({ prompt: [{ type: "image", blob: { id } }] }))
-    const url = JSON.parse((await store.getItem("loaded"))!).prompt[0].blob.url
+    const loaded = JSON.parse((await store.getItem("loaded"))!).prompt[0].blob
+    expect(loaded).toEqual({ id })
+    expect(reads).toEqual([])
+    // The first consumer that shows or sends the image loads it; the pin from the load keeps it.
+    const url = (await resolveBlobUrl(loaded))!
+    expect(url.startsWith("blob:")).toBe(true)
+    expect(reads).toEqual([id])
+    expect(await resolveBlobUrl(loaded)).toBe(url)
+    expect(reads).toEqual([id])
     await tick()
     expect(await released(store, 6, url)).toBe(false)
     await store.removeItem("loaded")
     await tick()
     expect(await released(store, 6, url)).toBe(true)
   })
+
+  test("a reference to bytes the store no longer holds resolves to nothing", async () => {
+    fresh()
+    expect(await resolveBlobUrl({ id: "gone" })).toBeUndefined()
+  })
 })

packages/app/src/runtime/persistence/drafts.ts

@@ -42,6 +42,18 @@ const refs = new Map<string, Set<string>>()
 // Image ids that were restored under a different id (a store without WebCrypto assigns fresh
 // ones); live references still carry the original.
 const aliases = new Map<string, string>()
+// Fetches image bytes from the store created last. Documents load without their bytes; a consumer
+// that renders or sends an image resolves its URL through here, so a history full of large
+// attachments costs nothing at startup.
+let loader: ((id: string) => Promise<string | undefined>) | undefined
+
+/** The object URL for an image reference, loading its bytes from the draft store on first use. */
+export function resolveBlobUrl(blob: { id: string; url?: string }) {
+  if (blob.url) return Promise.resolve(blob.url)
+  const existing = retained.get(aliases.get(blob.id) ?? blob.id)
+  if (existing) return Promise.resolve(existing.url)
+  return loader?.(blob.id) ?? Promise.resolve(undefined)
+}
 
 function blobUrl(id: string, blob: Blob, grace?: number) {
   const existing = retained.get(id)
@@ -120,7 +132,7 @@ export function createDraftStore(driver: Driver, options: { grace?: number } = {
   const loading = new Map<string, Promise<string | undefined>>()
   const loadBlobUrl = (id: string) => {
     const existing = retained.get(id)
-    if (existing) return existing.url
+    if (existing) return Promise.resolve(existing.url)
     const pending = loading.get(id)
     if (pending) return pending
     const next = driver
@@ -130,6 +142,7 @@ export function createDraftStore(driver: Driver, options: { grace?: number } = {
     loading.set(id, next)
     return next
   }
+  loader = loadBlobUrl
   const putBlob = async (blob: Blob) => {
     const id = await driver.putBlob(blob)
     return { id, url: blobUrl(id, blob, grace) }
@@ -221,9 +234,11 @@ export function createDraftStore(driver: Driver, options: { grace?: number } = {
       if (ref.kind === "text" && Array.isArray(ref.ids)) {
         return (await Promise.all(ref.ids.map((id) => loadChunk(String(id))))).join("")
       }
+      // Bytes stay in the store until something renders or sends the image (see resolveBlobUrl);
+      // only an image already pinned in this page gets its URL back immediately.
       if (typeof ref.id === "string") {
-        const url = await loadBlobUrl(ref.id)
-        if (url) return { ...item, blob: { id: ref.id, url } }
+        const url = retained.get(aliases.get(ref.id) ?? ref.id)?.url
+        return { ...item, blob: url ? { id: ref.id, url } : { id: ref.id } }
       }
     }
     return Object.fromEntries(
@@ -423,7 +438,9 @@ function referenced(json: string) {
 
 export async function blobDataUrl(blob: BlobReference, mime: string) {
   const kept = retained.get(aliases.get(blob.id) ?? blob.id)
-  const data = kept ? kept.blob : await fetch(blob.url).then((response) => response.blob())
+  const url = kept ? undefined : await resolveBlobUrl(blob)
+  if (!kept && !url) throw new Error(`Attachment ${blob.id} has no stored bytes`)
+  const data = kept ? kept.blob : await fetch(url!).then((response) => response.blob())
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader()
     reader.addEventListener("error", () => reject(reader.error))

packages/app/test-browser/draft-history-cache.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test"
 import { resolveObjectURL } from "node:buffer"
-import { createDraftStore } from "@/runtime/persistence/drafts"
+import { createDraftStore, resolveBlobUrl } from "@/runtime/persistence/drafts"
 
 function fixture(id: string, getBlob: () => Promise<Blob | null>) {
   const documents = new Map([
@@ -20,7 +20,19 @@ function fixture(id: string, getBlob: () => Promise<Blob | null>) {
   return { store, documents }
 }
 
-test("deduplicates concurrent history and draft reads without invalidating either live reference", async () => {
+test("loading history and a draft reads no image bytes", async () => {
+  let reads = 0
+  const { store } = fixture("history-cache-lazy", async () => {
+    reads++
+    return new Blob(["shared screenshot"])
+  })
+  const [history, draft] = await Promise.all([store.getItem("history"), store.getItem("draft")])
+  expect(JSON.parse(history!).entries[0].prompt[0].blob).toEqual({ id: "history-cache-lazy" })
+  expect(JSON.parse(draft!).prompt[0].blob).toEqual({ id: "history-cache-lazy" })
+  expect(reads).toBe(0)
+})
+
+test("deduplicates concurrent resolves without invalidating either live reference", async () => {
   const pending = Promise.withResolvers<Blob | null>()
   const started = Promise.withResolvers<void>()
   let reads = 0
@@ -29,55 +41,33 @@ test("deduplicates concurrent history and draft reads without invalidating eithe
     started.resolve()
     return pending.promise
   })
-  const history = store.getItem("history")
-  const draft = store.getItem("draft")
+  await store.getItem("history")
+  const first = resolveBlobUrl({ id: "history-cache-concurrent" })
+  const second = resolveBlobUrl({ id: "history-cache-concurrent" })
   await started.promise
   pending.resolve(new Blob(["shared screenshot"]))
-  const [saved, active] = await Promise.all([history, draft])
-  const reference = JSON.parse(saved!).entries[0].prompt[0].blob
-  expect(JSON.parse(active!).prompt[0].blob).toEqual(reference)
+  const [a, b] = await Promise.all([first, second])
+  expect(a).toBe(b!)
   expect(reads).toBe(1)
   await store.removeItem("history")
-  expect(await resolveObjectURL(reference.url)?.text()).toBe("shared screenshot")
-  expect(JSON.parse((await store.getItem("draft"))!).prompt[0].blob).toEqual(reference)
+  expect(await resolveObjectURL(a!)?.text()).toBe("shared screenshot")
+  expect(await resolveBlobUrl({ id: "history-cache-concurrent" })).toBe(a!)
   expect(reads).toBe(1)
 })
 
-test("hydrates repeated references once within one history document", async () => {
-  let reads = 0
-  const { store, documents } = fixture("history-cache-repeated", async () => {
-    reads++
-    return new Blob(["repeated screenshot"])
-  })
-  documents.set(
-    "history",
-    JSON.stringify({
-      entries: Array.from({ length: 100 }, () => ({
-        prompt: [{ type: "image", blob: { id: "history-cache-repeated" } }],
-      })),
-    }),
-  )
-  const value = JSON.parse((await store.getItem("history"))!)
-  expect(value.entries).toHaveLength(100)
-  expect(
-    new Set(value.entries.map((entry: { prompt: { blob: { url: string } }[] }) => entry.prompt[0].blob.url)).size,
-  ).toBe(1)
-  expect(reads).toBe(1)
-})
-
-test("reuses a live URL on remount but reads the latest document", async () => {
+test("a document re-read while its image is live gets the URL back without a read", async () => {
   let reads = 0
   const { store, documents } = fixture("history-cache-remount", async () => {
     reads++
     return new Blob(["saved screenshot"])
   })
-  const first = JSON.parse((await store.getItem("history"))!)
+  const url = await resolveBlobUrl({ id: "history-cache-remount" })
   const changed = JSON.parse(documents.get("history")!)
   changed.entries[0].prompt.unshift({ type: "text", content: "new admission" })
   documents.set("history", JSON.stringify(changed))
   const second = JSON.parse((await store.getItem("history"))!)
   expect(second.entries[0].prompt[0].content).toBe("new admission")
-  expect(second.entries[0].prompt[1].blob).toEqual(first.entries[0].prompt[0].blob)
+  expect(second.entries[0].prompt[1].blob).toEqual({ id: "history-cache-remount", url })
   expect(reads).toBe(1)
 })
 
@@ -89,33 +79,34 @@ test("reuses a just-stored attachment without a round trip", async () => {
   })
   const reference = await store.putBlob(new Blob(["pending admission"]))
   expect(JSON.parse((await store.getItem("draft"))!).prompt[0].blob).toEqual(reference)
+  expect(await resolveBlobUrl({ id: reference.id })).toBe(reference.url)
   expect(reads).toBe(0)
   expect(await resolveObjectURL(reference.url)?.text()).toBe("pending admission")
 })
 
 test("does not retain a missing blob result", async () => {
   let reads = 0
-  const { store } = fixture("history-cache-missing", async () => (++reads === 1 ? null : new Blob(["arrived"])))
-  expect(JSON.parse((await store.getItem("draft"))!).prompt[0].blob.url).toBeUndefined()
-  expect(JSON.parse((await store.getItem("draft"))!).prompt[0].blob.url).toStartWith("blob:")
+  fixture("history-cache-missing", async () => (++reads === 1 ? null : new Blob(["arrived"])))
+  expect(await resolveBlobUrl({ id: "history-cache-missing" })).toBeUndefined()
+  expect(await resolveBlobUrl({ id: "history-cache-missing" })).toStartWith("blob:")
   expect(reads).toBe(2)
 })
 
 test("retries after a failed blob read", async () => {
   let reads = 0
-  const { store } = fixture("history-cache-failure", async () => {
+  fixture("history-cache-failure", async () => {
     if (++reads === 1) throw new Error("temporary storage failure")
     return new Blob(["recovered"])
   })
-  await expect(store.getItem("history")).rejects.toThrow("temporary storage failure")
-  expect(JSON.parse((await store.getItem("history"))!).entries[0].prompt[0].blob.url).toStartWith("blob:")
+  await expect(resolveBlobUrl({ id: "history-cache-failure" })).rejects.toThrow("temporary storage failure")
+  expect(await resolveBlobUrl({ id: "history-cache-failure" })).toStartWith("blob:")
   expect(reads).toBe(2)
 })
 
 test("keeps different blob IDs independent", async () => {
   const reads: string[] = []
-  const store = createDraftStore({
-    get: async () => JSON.stringify(["history-cache-first", "history-cache-second"].map((id) => ({ blob: { id } }))),
+  createDraftStore({
+    get: async () => null,
     set: async () => [],
     remove: async () => {},
     putBlob: async () => "unused",
@@ -124,10 +115,8 @@ test("keeps different blob IDs independent", async () => {
       return new Blob([id])
     },
   })
-  const value = JSON.parse((await store.getItem("history"))!)
-  expect(value[0].blob.url).not.toBe(value[1].blob.url)
-  expect(
-    await Promise.all(value.map((item: { blob: { url: string } }) => resolveObjectURL(item.blob.url)?.text())),
-  ).toEqual(reads)
+  const urls = await Promise.all(["history-cache-first", "history-cache-second"].map((id) => resolveBlobUrl({ id })))
+  expect(urls[0]).not.toBe(urls[1])
+  expect(await Promise.all(urls.map((url) => resolveObjectURL(url!)?.text()))).toEqual(reads)
   expect(reads).toEqual(["history-cache-first", "history-cache-second"])
 })

packages/app/test-browser/prompt-persistence.test.ts

@@ -5,7 +5,7 @@ import { Schema } from "effect"
 import type { Platform } from "@/runtime/platform/platform"
 import { createComposerReady, createComposerState } from "@/composer/state"
 import { ServerScope } from "@/runtime/server/scope"
-import { createDraftStore } from "@/runtime/persistence/drafts"
+import { createDraftStore, resolveBlobUrl } from "@/runtime/persistence/drafts"
 import { flushPersisted } from "@/runtime/persistence/persist"
 import { Persist, persisted } from "@/runtime/persistence/storage"
 
@@ -103,15 +103,11 @@ describe("prompt persistence", () => {
       }),
     }))
     await root.session.ready.promise
+    // Bytes stay in the store until the image is shown or sent.
     expect(root.session.current()).toEqual([
-      {
-        type: "image",
-        id: "image",
-        filename: "image.png",
-        mime: "image/png",
-        blob: { id: "composer-image", url: expect.stringMatching(/^blob:/) },
-      },
+      { type: "image", id: "image", filename: "image.png", mime: "image/png", blob: { id: "composer-image", url: "" } },
     ])
+    expect(await resolveBlobUrl(root.session.current()[0]!.blob)).toStartWith("blob:")
     root.session.set([{ type: "text", content: "hello", start: 0, end: 5 }, ...root.session.current()])
     flushPersisted()
     await Bun.sleep(0)
@@ -237,7 +233,7 @@ describe("prompt persistence", () => {
   })
 })
 
-test("moves image data URLs into blobs and hydrates object URLs", async () => {
+test("moves image data URLs into blobs and resolves object URLs on demand", async () => {
   const documents = new Map<string, string>()
   const blobs = new Map<string, Blob>()
   const store = createDraftStore({
@@ -258,8 +254,8 @@ test("moves image data URLs into blobs and hydrates object URLs", async () => {
   await store.setItem("prompt", JSON.stringify({ prompt: [{ type: "image", dataUrl: "data:image/png;base64,YQ==" }] }))
   expect(documents.get("prompt")).not.toContain("dataUrl")
   const value = JSON.parse((await store.getItem("prompt"))!)
-  expect(value.prompt[0].blob.id).toBe("1")
-  expect(value.prompt[0].blob.url).toStartWith("blob:")
+  expect(value.prompt[0].blob).toEqual({ id: "1" })
+  expect(await resolveBlobUrl(value.prompt[0].blob)).toStartWith("blob:")
 })
 
 test("does not let delayed blob migration overwrite a newer draft", async () => {