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

This commit is contained in:
Luke Parker 2026-08-03 19:49:08 +10:00 committed by GitHub
commit 6ff0adef22
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 503 additions and 82 deletions

View file

@ -344,7 +344,7 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
if (item?.commentID) comments.remove(item.path, item.commentID)
},
openAttachment: (attachment) =>
dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />),
dialog.show(() => <ImagePreview src={attachment.blob.url} alt={attachment.filename} />),
openContext(key) {
const item = controller.contextItem(key)
if (item) openComment(item, props, sync, layout, files, comments)
@ -377,6 +377,7 @@ export function usePromptInputV2Controller(props: PromptInputV2ControllerProps):
}),
readClipboardImage: platform.readClipboardImage,
getPathForFile: platform.getPathForFile,
store: platform.draftStore?.putBlob,
},
view: {
placeholder: designPlaceholder,

View file

@ -1489,7 +1489,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
<PromptImageAttachments
attachments={imageAttachments()}
onOpen={(attachment) =>
dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />)
dialog.show(() => <ImagePreview src={attachment.blob.url} alt={attachment.filename} />)
}
onRemove={removeAttachment}
removeLabel={language.t("prompt.attachment.remove")}

View file

@ -3,28 +3,13 @@ import { makeEventListener } from "@solid-primitives/event-listener"
import { showToast } from "@/utils/toast"
import { type ContentPart, type ImageAttachmentPart, type usePrompt } from "@/context/prompt"
import { useLanguage } from "@/context/language"
import { usePlatform } from "@/context/platform"
import { uuid } from "@/utils/uuid"
import { getCursorPosition } from "./editor-dom"
import { createBlobReference, type DraftStore } from "@/utils/draft-store"
import { attachmentMime } from "./files"
import { normalizePaste, pasteMode } from "./paste"
function dataUrl(file: File, mime: string) {
return new Promise<string>((resolve) => {
const reader = new FileReader()
reader.addEventListener("error", () => resolve(""))
reader.addEventListener("load", () => {
const value = typeof reader.result === "string" ? reader.result : ""
const idx = value.indexOf(",")
if (idx === -1) {
resolve(value)
return
}
resolve(`data:${mime};base64,${value.slice(idx + 1)}`)
})
reader.readAsDataURL(file)
})
}
type PromptTarget = Pick<ReturnType<ReturnType<typeof usePrompt>["capture"]>, "current" | "cursor" | "set">
type AttachmentTarget = { prompt: PromptTarget; cursor: number | undefined }
@ -36,6 +21,7 @@ type PromptAttachmentsCoreInput = {
warn?: () => void
readClipboardImage?: () => Promise<File | null>
getPathForFile?: (file: File) => string
draftStore?: DraftStore
}
export type PromptAttachmentsInput = {
@ -65,16 +51,13 @@ export function createPromptAttachmentsCore(input: PromptAttachmentsCoreInput) {
return false
}
const url = await dataUrl(file, mime)
if (!url) return false
const attachment: ImageAttachmentPart = {
type: "image",
id: uuid(),
filename: file.name,
sourcePath: input.getPathForFile?.(file) || undefined,
mime,
dataUrl: url,
blob: input.draftStore ? await input.draftStore.putBlob(file) : await createBlobReference(file),
}
target.prompt.set([...target.prompt.current(), attachment], target.cursor)
return true
@ -166,8 +149,10 @@ export function createPromptAttachmentsCore(input: PromptAttachmentsCoreInput) {
export function createPromptAttachments(input: PromptAttachmentsInput) {
const language = useLanguage()
const platform = usePlatform()
const attachments = createPromptAttachmentsCore({
...input,
draftStore: platform.draftStore,
capture: input.prompt.capture,
warn: () => {
showToast({

View file

@ -22,7 +22,7 @@ type ContextFile = {
type BuildRequestPartsInput = {
prompt: Prompt
context: ContextFile[]
images: ImageAttachmentPart[]
images: (Omit<ImageAttachmentPart, "blob"> & { dataUrl: string })[]
text: string
messageID: string
sessionID: string

View file

@ -1,7 +1,13 @@
import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
import type { Prompt } from "@/context/prompt"
import { Persist, persisted } from "@/utils/persist"
import { prependHistoryEntry, type PromptHistoryComment, type PromptHistoryStoredEntry } from "./history"
import {
clonePromptHistoryComments,
clonePromptParts,
prependHistoryEntry,
type PromptHistoryComment,
type PromptHistoryStoredEntry,
} from "./history"
export type PromptInputHistory = {
entries: (mode: "normal" | "shell") => PromptHistoryStoredEntry[]
@ -35,13 +41,23 @@ export function createPromptInputHistory(): PromptInputHistory {
}
export function createPersistedPromptInputHistory() {
const [normal, setNormal] = persisted(
Persist.global("prompt-history", ["prompt-history.v1"]),
const [normal, setNormal, normalInit] = persisted(
Persist.prompt(Persist.global("prompt-history", ["prompt-history.v1"])),
createStore<PromptHistoryState>({ entries: [] }),
)
const [shell, setShell] = persisted(
Persist.global("prompt-history-shell", ["prompt-history-shell.v1"]),
const [shell, setShell, shellInit] = persisted(
Persist.prompt(Persist.global("prompt-history-shell", ["prompt-history-shell.v1"])),
createStore<PromptHistoryState>({ entries: [] }),
)
return createPromptInputHistoryStore(normal, setNormal, shell, setShell)
const history = createPromptInputHistoryStore(normal, setNormal, shell, setShell)
return {
...history,
add(prompt: Prompt, mode: "normal" | "shell", comments: PromptHistoryComment[]) {
const ready = mode === "shell" ? shellInit : normalInit
if (!(ready instanceof Promise)) return history.add(prompt, mode, comments)
const saved = clonePromptParts(prompt)
const metadata = clonePromptHistoryComments(comments)
void ready.then(() => history.add(saved, mode, metadata))
},
}
}

View file

@ -112,7 +112,7 @@ describe("prompt-input history", () => {
end: 12,
selection: { startLine: 1, startChar: 1, endLine: 2, endChar: 1 },
},
{ type: "image", id: "1", filename: "img.png", mime: "image/png", dataUrl: "data:image/png;base64,abc" },
{ type: "image", id: "1", filename: "img.png", mime: "image/png", blob: { id: "blob", url: "blob:test" } },
]
const copy = clonePromptParts(original)
expect(copy).not.toBe(original)

View file

@ -100,7 +100,7 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
}
>
<img
src={attachment.dataUrl}
src={attachment.blob.url}
alt={attachment.filename}
class={props.newLayoutDesigns ? imageClassV2 : imageClass}
onClick={() => props.onOpen(attachment)}

View file

@ -22,6 +22,7 @@ import { ScopedKey } from "@/utils/server-scope"
import { createPromptSubmissionState } from "./submission-state"
import { normalizeSessionInfo } from "@/utils/session"
import { Event } from "@opencode-ai/schema/event"
import { blobDataUrl } from "@/utils/draft-store"
type PendingPrompt = {
abort: AbortController
@ -95,10 +96,12 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
providerID: input.draft.model.providerID,
variant: input.draft.variant,
},
files: images.map((attachment) => ({
uri: attachment.dataUrl,
name: attachment.filename,
})),
files: await Promise.all(
images.map(async (attachment) => ({
uri: await blobDataUrl(attachment.blob, attachment.mime),
name: attachment.filename,
})),
),
})
return true
} catch (err) {
@ -108,10 +111,16 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
}
const messageID = input.messageID ?? Identifier.ascending("message")
const encodedImages = await Promise.all(
images.map(async (attachment) => ({
...attachment,
dataUrl: await blobDataUrl(attachment.blob, attachment.mime),
})),
)
const { requestParts, optimisticParts } = buildRequestParts({
prompt: input.draft.prompt,
context: input.draft.context,
images,
images: encodedImages,
text,
sessionID: input.draft.sessionID,
messageID,
@ -516,10 +525,12 @@ export function createPromptSubmit(input: PromptSubmitInput) {
arguments: args.join(" "),
agent,
model: { id: model.modelID, providerID: model.providerID, variant },
files: images.map((attachment) => ({
uri: attachment.dataUrl,
name: attachment.filename,
})),
files: await Promise.all(
images.map(async (attachment) => ({
uri: await blobDataUrl(attachment.blob, attachment.mime),
name: attachment.filename,
})),
),
})
.catch((err) => {
serverSync().session.set("session_status", session.id, { type: "idle" })

View file

@ -5,6 +5,7 @@ import type { DesktopMenuAction } from "../desktop-menu"
import { ServerConnection } from "./server"
import type { WslServersPlatform } from "../wsl/types"
import type { UpdaterPlatform } from "../updater"
import type { DraftStore } from "@/utils/draft-store"
type PickerPaths = string | string[] | null
type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
@ -64,6 +65,9 @@ type PlatformBase = {
/** Storage mechanism, defaults to localStorage */
storage?: (name?: string) => SyncStorage | AsyncStorage
/** Prompt drafts, history, and their blobs. */
draftStore?: DraftStore
/** Stable platform window identity for window-scoped persistence */
windowID?: string

View file

@ -5,6 +5,7 @@ import { createStore, type SetStoreFunction } from "solid-js/store"
import type { FileSelection } from "@/context/file"
import { Persist, persisted } from "@/utils/persist"
import type { ServerScope } from "@/utils/server-scope"
import type { BlobReference } from "@/utils/draft-store"
interface PartBase {
content: string
@ -37,7 +38,7 @@ export interface ImageAttachmentPart {
filename: string
sourcePath?: string
mime: string
dataUrl: string
blob: BlobReference
}
export type ContentPart = TextPart | FileAttachmentPart | AgentPart | ImageAttachmentPart
@ -168,9 +169,9 @@ function createPromptActions(setStore: SetStoreFunction<PromptStore>) {
}
function promptTarget(serverScope: ServerScope, scope: PromptScope) {
if ("draftID" in scope) return Persist.draft(scope.draftID, "prompt")
if ("draftID" in scope) return Persist.prompt(Persist.draft(scope.draftID, "prompt"))
const legacy = `${scope.dir}/prompt${scope.id ? "/" + scope.id : ""}.v2`
return Persist.serverScoped(serverScope, scope.dir, scope.id, "prompt", [legacy])
return Persist.prompt(Persist.serverScoped(serverScope, scope.dir, scope.id, "prompt", [legacy]))
}
function promptStore(initial?: InitialPrompt): PromptStore {
@ -245,7 +246,7 @@ export function createPromptSession(serverScope: ServerScope, scope: PromptScope
}
export function createDraftPromptSession(draftID: string, initial?: InitialPrompt) {
return createPersistedPrompt(Persist.draft(draftID, "prompt"), initial)
return createPersistedPrompt(Persist.prompt(Persist.draft(draftID, "prompt")), initial)
}
export type PromptSession = ReturnType<typeof createPromptSession>

View file

@ -101,7 +101,10 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
}
const removeDraftPersisted = (draftID: string) => {
for (const key of draftPersistedKeys()) removePersisted(Persist.draft(draftID, key), platform)
for (const key of draftPersistedKeys()) {
const target = Persist.draft(draftID, key)
removePersisted(key === "prompt" ? Persist.prompt(target) : target, platform)
}
}
const removeInfo = (key: string) => {

View file

@ -4,6 +4,7 @@ import * as Sentry from "@sentry/solid"
import { render } from "solid-js/web"
import { AppBaseProviders, AppInterface } from "@/app"
import { type Platform, PlatformProvider } from "@/context/platform"
import { createBrowserDraftStore } from "@/utils/draft-store"
import { dict as en } from "@/i18n/en"
import { dict as zh } from "@/i18n/zh"
import { authFromToken } from "@/utils/server"
@ -116,6 +117,7 @@ const clearAuthToken = () => {
const platform: Platform = {
platform: "web",
draftStore: createBrowserDraftStore(),
version: pkg.version,
openExternal,
restart,

View file

@ -27,3 +27,4 @@ export {
type WslServersState,
} from "./wsl/types"
export { ServerConnection } from "./context/server"
export { createDraftStore, type DraftStore } from "./utils/draft-store"

View file

@ -0,0 +1,171 @@
import type { AsyncStorage } from "@solid-primitives/storage"
export type BlobReference = { id: string; url: string }
type Driver = {
get(key: string): Promise<string | null>
set(key: string, value: string): Promise<void>
remove(key: string): Promise<void>
putBlob(blob: Blob): Promise<string>
getBlob(id: string): Promise<Blob | null>
}
export type DraftStore = AsyncStorage & { putBlob(blob: Blob): Promise<BlobReference> }
const urls = new Map<string, string>()
function blobUrl(id: string, blob: Blob) {
const existing = urls.get(id)
if (existing) return existing
const url = URL.createObjectURL(blob)
urls.set(id, url)
return url
}
async function blobID(blob: Blob) {
const id = Array.from(new Uint8Array(await crypto.subtle.digest("SHA-256", await blob.arrayBuffer())))
.map((byte) => byte.toString(16).padStart(2, "0"))
.join("")
return id
}
export async function createBlobReference(blob: Blob): Promise<BlobReference> {
const id = await blobID(blob)
return { id, url: blobUrl(id, blob) }
}
export function createDraftStore(driver: Driver): DraftStore {
const versions = new Map<string, number>()
const putBlob = async (blob: Blob) => {
const id = await driver.putBlob(blob)
return { id, url: blobUrl(id, blob) }
}
const encode = async (value: unknown): Promise<unknown> => {
if (Array.isArray(value)) return Promise.all(value.map(encode))
if (!value || typeof value !== "object") return value
const item = value as Record<string, unknown>
if (item.type === "image" && typeof item.dataUrl === "string") {
const blob = await fetch(item.dataUrl).then((response) => response.blob())
const { dataUrl: _, ...rest } = item
return { ...rest, blob: { id: await driver.putBlob(blob) } }
}
if ("blob" in item && item.blob && typeof item.blob === "object") {
const blob = item.blob as Record<string, unknown>
if (typeof blob.id === "string" && blob.id.startsWith("data:")) {
const data = await fetch(blob.id).then((response) => response.blob())
return { ...item, blob: { id: await driver.putBlob(data) } }
}
return { ...item, blob: { id: blob.id } }
}
return Object.fromEntries(
await Promise.all(Object.entries(item).map(async ([key, entry]) => [key, await encode(entry)])),
)
}
const decode = async (value: unknown): Promise<unknown> => {
if (Array.isArray(value)) return Promise.all(value.map(decode))
if (!value || typeof value !== "object") return value
const item = value as Record<string, unknown>
if (item.blob && typeof item.blob === "object") {
const ref = item.blob as Record<string, unknown>
if (typeof ref.id === "string") {
const blob = await driver.getBlob(ref.id)
if (blob) return { ...item, blob: { id: ref.id, url: blobUrl(ref.id, blob) } }
}
}
return Object.fromEntries(
await Promise.all(Object.entries(item).map(async ([key, entry]) => [key, await decode(entry)])),
)
}
return {
getItem: async (key) => {
const value = await driver.get(key)
return value === null ? null : JSON.stringify(await decode(JSON.parse(value)))
},
setItem: async (key, value) => {
const version = (versions.get(key) ?? 0) + 1
versions.set(key, version)
const encoded = JSON.stringify(await encode(JSON.parse(value)))
if (versions.get(key) === version) await driver.set(key, encoded)
},
removeItem: async (key) => {
versions.set(key, (versions.get(key) ?? 0) + 1)
await driver.remove(key)
},
putBlob,
}
}
export function createBrowserDraftStore(): DraftStore {
const request = indexedDB.open("opencode-drafts", 1)
request.addEventListener("upgradeneeded", () => {
request.result.createObjectStore("documents")
request.result.createObjectStore("blobs")
})
const db = new Promise<IDBDatabase>((resolve, reject) => {
request.addEventListener("success", () => {
const database = request.result
const transaction = database.transaction(["documents", "blobs"], "readwrite")
const documents = transaction.objectStore("documents").getAll()
documents.addEventListener("success", () => {
const used = new Set<string>()
JSON.parse(`[${documents.result.join(",")}]`, (_key, item) => {
if (item?.blob && typeof item.blob.id === "string") used.add(item.blob.id)
return item
})
const blobs = transaction.objectStore("blobs").openKeyCursor()
blobs.addEventListener("success", () => {
const cursor = blobs.result
if (!cursor) return
if (!used.has(String(cursor.key))) cursor.delete()
cursor.continue()
})
})
transaction.addEventListener("complete", () => resolve(database))
transaction.addEventListener("abort", () => resolve(database))
})
request.addEventListener("error", () => reject(request.error))
})
const get = async (store: string, key: string) => {
const result = (await db).transaction(store).objectStore(store).get(key)
return new Promise<unknown>((resolve, reject) => {
result.addEventListener("success", () => resolve(result.result))
result.addEventListener("error", () => reject(result.error))
})
}
const write = async (store: string, key: string, value?: unknown) => {
const transaction = (await db).transaction(store, "readwrite")
if (value === undefined) transaction.objectStore(store).delete(key)
else transaction.objectStore(store).put(value, key)
return new Promise<void>((resolve, reject) => {
transaction.addEventListener("complete", () => resolve())
transaction.addEventListener("error", () => reject(transaction.error))
})
}
return createDraftStore({
get: async (key) => ((await get("documents", key)) as string | undefined) ?? null,
set: (key, value) => write("documents", key, value),
remove: (key) => write("documents", key),
putBlob: async (blob) => {
const id = await blobID(blob)
await write("blobs", id, blob)
return id
},
getBlob: async (id) => ((await get("blobs", id)) as Blob | undefined) ?? null,
})
}
export async function blobDataUrl(blob: BlobReference, mime: string) {
const data = await fetch(blob.url).then((response) => response.blob())
return new Promise<string>((resolve, reject) => {
const reader = new FileReader()
reader.addEventListener("error", () => reject(reader.error))
reader.addEventListener("load", () => {
const value = typeof reader.result === "string" ? reader.result : ""
resolve(`data:${mime};base64,${value.slice(value.indexOf(",") + 1)}`)
})
reader.readAsDataURL(data)
})
}
export function createLegacyBlobReference(dataUrl: string): BlobReference {
return { id: dataUrl, url: dataUrl }
}

View file

@ -15,6 +15,7 @@ type PersistedWithReady<T> = [
]
type PersistTarget = {
draft?: boolean
storage?: string
scope?: "window"
legacyStorageNames?: string[]
@ -295,6 +296,14 @@ async function removeAsync(storage: AsyncStorage, key: string) {
} catch {}
}
function toAsyncStorage(storage: SyncStorage | AsyncStorage): AsyncStorage {
return {
getItem: async (key) => storage.getItem(key),
setItem: async (key, value) => storage.setItem(key, value),
removeItem: async (key) => storage.removeItem(key),
}
}
async function migrateLegacyAsync(input: {
current: AsyncStorage
legacyStore?: AsyncStorage
@ -513,6 +522,9 @@ export const Persist = {
if (session) return Persist.serverSession(scope, dir, session, key, legacy)
return Persist.serverWorkspace(scope, dir, key, legacy)
},
prompt(target: PersistTarget): PersistTarget {
return { ...target, draft: true }
},
}
function resolveTarget(target: PersistTarget, platform: Platform): PersistTarget {
@ -526,9 +538,12 @@ function resolveTarget(target: PersistTarget, platform: Platform): PersistTarget
}
export function removePersisted(
target: { storage?: string; legacyStorageNames?: string[]; key: string },
target: { draft?: boolean; storage?: string; legacyStorageNames?: string[]; key: string },
platform?: Platform,
) {
if (target.draft && platform?.draftStore) {
void platform.draftStore.removeItem(`${target.storage ?? "default"}:${target.key}`)
}
const isDesktop = platform?.platform === "desktop" && !!platform.storage
if (isDesktop) {
@ -561,8 +576,17 @@ export function persisted<T>(
const legacy = config.legacy ?? []
const isDesktop = platform.platform === "desktop" && !!platform.storage
const draft = config.draft ? platform.draftStore : undefined
const currentStorage = (() => {
if (draft) {
const prefix = `${config.storage ?? "default"}:`
return {
getItem: (key: string) => draft.getItem(prefix + key),
setItem: (key: string, value: string) => draft.setItem(prefix + key, value),
removeItem: (key: string) => draft.removeItem(prefix + key),
} satisfies AsyncStorage
}
if (isDesktop) return platform.storage?.(config.storage)
if (!config.storage) return localStorageDirect()
return localStorageWithPrefix(config.storage)
@ -577,7 +601,7 @@ export function persisted<T>(
const legacyStorageNames = config.legacyStorageNames ?? []
const storage = (() => {
if (!isDesktop) {
if (!isDesktop && !draft) {
const current = currentStorage as SyncStorage
const legacyStore = legacyStorage as SyncStorage
const legacyStores = legacyStorageNames.map(localStorageWithPrefix)
@ -609,15 +633,26 @@ export function persisted<T>(
const current = currentStorage as AsyncStorage
const legacyStore = legacyStorage as AsyncStorage | undefined
const legacyStores = legacyStorageNames
.map((name) => platform.storage?.(name) as AsyncStorage | undefined)
const oldCurrent = draft
? isDesktop
? platform.storage?.(config.storage)
: config.storage
? localStorageWithPrefix(config.storage)
: localStorageDirect()
: undefined
const legacyStores = [
oldCurrent,
...legacyStorageNames.map((name) => (isDesktop ? platform.storage?.(name) : localStorageWithPrefix(name))),
]
.filter((x) => !!x)
.map(toAsyncStorage)
let draftLatest: string | undefined
const api: AsyncStorage = {
getItem: async (key) => {
const value = await readCurrentAsync({ storage: current, key, defaults, migrate: config.migrate })
if (value !== undefined) return value
return migrateLegacyAsync({
const migrated = await migrateLegacyAsync({
current,
legacyStore,
stores: legacyStores,
@ -626,8 +661,15 @@ export function persisted<T>(
defaults,
migrate: config.migrate,
})
if (draftLatest === undefined) {
if (draft && migrated !== null) return (await current.getItem(key)) ?? migrated
return migrated
}
await current.setItem(key, draftLatest)
return draftLatest
},
setItem: async (key, value) => {
if (draft) draftLatest = value
await current.setItem(key, value)
},
removeItem: async (key) => {

View file

@ -37,8 +37,18 @@ describe("extractPromptFromParts", () => {
expect(result).toHaveLength(3)
expect(result[0]).toMatchObject({ type: "text", content: "check these" })
expect(result.slice(1)).toMatchObject([
{ type: "image", filename: "a.png", mime: "image/png", dataUrl: "data:image/png;base64,AAA" },
{ type: "image", filename: "b.pdf", mime: "application/pdf", dataUrl: "data:application/pdf;base64,BBB" },
{
type: "image",
filename: "a.png",
mime: "image/png",
blob: expect.objectContaining({ id: expect.any(String) }),
},
{
type: "image",
filename: "b.pdf",
mime: "application/pdf",
blob: expect.objectContaining({ id: expect.any(String) }),
},
])
})
})

View file

@ -1,5 +1,6 @@
import type { AgentPart as MessageAgentPart, FilePart, Part, TextPart } from "@opencode-ai/sdk/v2"
import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
import { createLegacyBlobReference } from "@/utils/draft-store"
type Inline =
| {
@ -107,7 +108,7 @@ export function extractPromptFromParts(parts: Part[], opts?: { directory?: strin
id: filePart.id,
filename: filePart.filename ?? attachmentName,
mime: filePart.mime,
dataUrl: filePart.url,
blob: createLegacyBlobReference(filePart.url),
})
}
}