perf(app): fix composer lag via buffered blob draft storage (#40207)

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

@@ -2,6 +2,7 @@ import { beforeAll, describe, expect, mock, test } from "bun:test"
 import type { AsyncStorage } from "@solid-primitives/storage"
 import { createEffect, createRoot } from "solid-js"
 import { ServerScope } from "@/utils/server-scope"
+import { createDraftStore } from "@/utils/draft-store"
 
 let Prompt: typeof import("@/context/prompt")
 let read: ((value: string | null) => void) | undefined
@@ -30,7 +31,7 @@ beforeAll(async () => {
     }),
   }))
   mock.module("@/context/platform", () => ({
-    usePlatform: () => ({ platform: "desktop", storage: () => storage }),
+    usePlatform: () => ({ platform: "desktop", storage: () => storage, draftStore: storage }),
   }))
 
   Prompt = await import("@/context/prompt")
@@ -69,3 +70,50 @@ describe("prompt persistence", () => {
     })
   })
 })
+
+test("moves legacy image data URLs into blobs and hydrates object URLs", async () => {
+  const documents = new Map<string, string>()
+  const blobs = new Map<string, Blob>()
+  const store = createDraftStore({
+    get: async (key) => documents.get(key) ?? null,
+    set: async (key, value) => void documents.set(key, value),
+    remove: async (key) => void documents.delete(key),
+    putBlob: async (blob) => {
+      const id = String(blob.size)
+      blobs.set(id, blob)
+      return id
+    },
+    getBlob: async (id) => blobs.get(id) ?? null,
+  })
+
+  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:")
+})
+
+test("does not let delayed blob migration overwrite a newer draft", async () => {
+  const documents = new Map<string, string>()
+  const migration = Promise.withResolvers<void>()
+  const store = createDraftStore({
+    get: async () => null,
+    set: async (key, value) => void documents.set(key, value),
+    remove: async () => undefined,
+    putBlob: async () => {
+      await migration.promise
+      return "blob"
+    },
+    getBlob: async () => null,
+  })
+  const older = store.setItem(
+    "prompt",
+    JSON.stringify({ prompt: [{ type: "image", dataUrl: "data:image/png;base64,YQ==" }] }),
+  )
+  await Bun.sleep(0)
+  await store.setItem("prompt", JSON.stringify({ prompt: [{ type: "text", content: "latest" }] }))
+  migration.resolve()
+  await older
+
+  expect(documents.get("prompt")).toContain("latest")
+})