feat(persistence): store images as disk-backed blobs and load workspaces lazily (#20)

* feat(persistence): store images as disk-backed blobs and load workspaces lazily

Project documents no longer embed images as base64 data URLs. Image bytes
now live as Blobs in a content-addressed IndexedDB asset store (SHA-256
ids), documents persist blob-asset: references, and the app renders
object URLs — so image data stays out of the JS heap and identical
images deduplicate across projects. Legacy documents migrate
transparently on load and persist references on the next save.

Startup no longer deserializes every project via getAll(): a cursor walk
builds the project list one document at a time and only the active
project is fully retained, so tab memory peaks at one project instead of
the sum of all of them.

Uploads store their file Blob directly (with a data URL fallback when
Blob storage is unavailable), AI attachments register blob assets while
keeping data URL provider payloads, and overlay reference images are
converted back to base64 on demand. Deleting a project sweeps blobs no
surviving project references.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix: address review findings on run guarding and cache retention

- Mark the AI generate run active before awaiting attachment preparation
  so a second click cannot start a parallel run, the close guard applies
  during preparation, cancellation is honored before the run starts, and
  preparation failures surface in the error view.
- Drop the data-URL-to-asset-id memo map; it pinned full base64 strings
  in the heap for the tab lifetime, contradicting the goal of this
  change. Re-hashing the rare inline data URL on save is cheaper.
- Guard openDatabase's failure path against a late error clearing a
  newer cached database promise after a retry.
- Document the deliberate session-lifetime asset retention (unsaved
  state and undo history) and the cross-tab sweep limitation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: realZachi

bun.lock

@@ -70,7 +70,16 @@ Values over roughly `52` are usually incorrect.
 
 ## Persistence
 
-`src/persistence.ts` stores project data and uploaded assets in IndexedDB. A small local-storage migration path exists for legacy projects.
+`src/persistence.ts` stores project documents in IndexedDB (database opening and store names live in `src/persistence-db.ts`). A small local-storage migration path exists for legacy projects.
+
+Image bytes are kept out of project documents and out of the JS heap:
+
+- `src/asset-store.ts` stores every image as a Blob in a content-addressed `assets` store (SHA-256 id), which Chrome keeps disk-backed. Identical images deduplicate across projects automatically.
+- Persisted documents reference images as `blob-asset:<id>`; the running app renders object URLs. `src/asset-sources.ts` owns the pure walk over the fields that can carry an image source (uploads, background images, image elements, device screenshots).
+- Loading a project resolves references to object URLs; documents saved before the asset store existed carry inline data URLs, which are converted to stored Blobs on load and persisted as references on the next save.
+- Starting the app reads project summaries with a cursor, so only the active project document is fully retained in memory.
+- Deleting a project sweeps stored Blobs that no surviving project references. The sweep deliberately keeps every asset seen in the current session: unsaved in-memory state and undo history can reference assets no persisted document mentions, so those Blobs stay until a later session's sweep. Object URLs are never revoked for the same reason — they pin disk-backed Blobs, not heap memory.
+- Sweeping scans and deletes in separate transactions. Concurrent editing from a second tab is not a supported model (the database open already rejects when another tab blocks an upgrade); a save racing a delete across tabs could at worst strand one `blob-asset:` reference, which renders as a missing image.
 
 Persistence is browser-local:
 

docs/ARCHITECTURE.md

@@ -92,6 +92,7 @@
     "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-react-hooks": "latest",
     "eslint-plugin-react-refresh": "latest",
+    "fake-indexeddb": "^6.2.5",
     "globals": "latest",
     "jsdom": "^29.1.1",
     "typescript": "5.9.3",

package.json

@@ -1,5 +1,6 @@
 import { generateImage, tool } from 'ai'
 import { z } from 'zod'
+import { fileToDataUrl } from '../utils'
 import { ASSET_CHROMA_KEY_HEX } from './chroma-key'
 import {
   OVERLAY_ASSET_BUDGET,
@@ -27,6 +28,14 @@ const dataUrlToBase64 = (dataUrl: string): string => {
   return dataUrl.slice(comma + 1)
 }
 
+// Upload sources are object URLs backed by stored Blobs (data URLs only as a
+// storage fallback), so provider payloads fetch the bytes back before encoding.
+const sourceToBase64 = async (src: string): Promise<string> => {
+  if (src.startsWith('data:')) return dataUrlToBase64(src)
+  const blob = await (await fetch(src)).blob()
+  return dataUrlToBase64(await fileToDataUrl(blob))
+}
+
 const sanitizeAssetName = (name: string): string => {
   const trimmed = name.trim().replace(/[^\w.\- ]+/g, '').slice(0, 64)
   return trimmed.length > 0 ? trimmed : 'overlay-asset'
@@ -69,15 +78,19 @@ const toAssetModelOutput = (output: OverlayAssetToolResult) => {
   }
 }
 
-const resolveReferenceImages = (
+const resolveReferenceImages = async (
   controller: ToolContext['controller'],
   referenceAssetIds: string[] | undefined,
-): { ok: true; images: string[] } | { ok: false; error: string } => {
+): Promise<{ ok: true; images: string[] } | { ok: false; error: string }> => {
   const images: string[] = []
   for (const assetId of referenceAssetIds ?? []) {
     const src = controller.getAssetSrc(assetId)
     if (!src) return notFound(assetNotFoundMessage(assetId))
-    images.push(dataUrlToBase64(src))
+    try {
+      images.push(await sourceToBase64(src))
+    } catch {
+      return notFound(assetNotFoundMessage(assetId))
+    }
   }
   return { ok: true, images }
 }
@@ -188,7 +201,7 @@ PROMPTING: describe ONLY the subject — one object, its material, style, colors
         }
       }
 
-      const references = resolveReferenceImages(controller, referenceAssetIds)
+      const references = await resolveReferenceImages(controller, referenceAssetIds)
       if (!references.ok) return references
 
       emit({ tool: 'create_overlay_asset' })

src/ai/overlay-asset-tools.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type Dispatch, type RefObject, type SetStateAction } from 'react'
+import { importDataUrlAsset } from '../asset-store'
 import { uid } from '../utils'
 import { createAiController } from './controller'
 import type { Slide, UploadAsset } from '../types'
@@ -127,21 +128,26 @@ export function useAiWorkflow({
     return () => window.clearTimeout(timer)
   }, [activity])
 
-  const prepareRun = useCallback((files: { name: string; dataUrl: string }[]) => {
+  const prepareRun = useCallback(async (files: { name: string; dataUrl: string }[]) => {
     checkpoint()
     clearSelection()
     preRunSlideIds.current = new Set(slidesRef.current.map((slide) => slide.id))
     const bySource = new Map(uploadsRef.current.map((asset) => [asset.src, asset]))
     const additions: UploadAsset[] = []
-    const prepared = files.map((file) => {
-      let asset = bySource.get(file.dataUrl)
+    const prepared: { assetId: string; name: string; dataUrl: string }[] = []
+    for (const file of files) {
+      // Uploads render from the stored Blob's object URL; the provider payload
+      // keeps the original data URL because AI requests need base64 content.
+      // Content-hashed storage makes re-attaching the same image dedupe here.
+      const src = await importDataUrlAsset(file.dataUrl)
+      let asset = bySource.get(src)
       if (!asset) {
-        asset = { id: uid('upload'), name: file.name, src: file.dataUrl }
+        asset = { id: uid('upload'), name: file.name, src }
         additions.push(asset)
         bySource.set(asset.src, asset)
       }
-      return { assetId: asset.id, name: asset.name, dataUrl: asset.src }
-    })
+      prepared.push({ assetId: asset.id, name: asset.name, dataUrl: file.dataUrl })
+    }
     if (additions.length > 0) {
       uploadsRef.current = [...additions, ...uploadsRef.current]
       setUploads(uploadsRef.current)

src/ai/use-ai-workflow.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { collectAssetSources, mapAssetSources } from './asset-sources'
+import type { Slide, UploadAsset } from './types'
+
+const makeSlide = (overrides: Partial<Slide> = {}): Slide => ({
+  id: 'slide-1',
+  name: 'Screen 1',
+  background: { type: 'solid', color1: '#000', color2: '#000', angle: 0 },
+  elements: [],
+  ...overrides,
+})
+
+const makeUpload = (src: string): UploadAsset => ({ id: 'upload-1', name: 'shot.png', src })
+
+const projectFixture = () => ({
+  uploads: [makeUpload('data:image/png;base64,AAA')],
+  slides: [
+    makeSlide({
+      background: { type: 'image', color1: '#000', color2: '#000', angle: 0, image: 'data:image/png;base64,BBB' },
+      elements: [
+        {
+          id: 'image-1', type: 'image' as const, x: 0, y: 0, width: 10, rotation: 0, opacity: 1,
+          src: 'data:image/png;base64,AAA', borderRadius: 0,
+        },
+        {
+          id: 'device-1', type: 'device' as const, x: 0, y: 0, width: 10, rotation: 0, opacity: 1,
+          deviceStyle: 'iphone-17-a' as const, screenTheme: 'coral' as const, tiltX: 0, tiltY: 0, shadow: 0,
+          screenshot: 'data:image/png;base64,CCC',
+        },
+        {
+          id: 'shape-1', type: 'shape' as const, x: 0, y: 0, width: 10, rotation: 0, opacity: 1,
+          shape: 'circle' as const, color: '#fff', strokeColor: '#000', strokeWidth: 0, shadow: 0,
+        },
+      ],
+    }),
+  ],
+})
+
+describe('collectAssetSources', () => {
+  it('collects uploads, background images, image elements, and device screenshots once each', () => {
+    expect(collectAssetSources(projectFixture())).toEqual(new Set([
+      'data:image/png;base64,AAA',
+      'data:image/png;base64,BBB',
+      'data:image/png;base64,CCC',
+    ]))
+  })
+
+  it('skips absent optional sources and empty projects', () => {
+    expect(collectAssetSources({ uploads: [], slides: [makeSlide()] })).toEqual(new Set())
+    expect(collectAssetSources({ uploads: [], slides: [] })).toEqual(new Set())
+  })
+})
+
+describe('mapAssetSources', () => {
+  it('rewrites every source field through the mapper', () => {
+    const mapped = mapAssetSources(projectFixture(), (src) => `mapped:${src.slice(-3)}`)
+    expect(mapped.uploads[0]?.src).toBe('mapped:AAA')
+    expect(mapped.slides[0]?.background.image).toBe('mapped:BBB')
+    expect(mapped.slides[0]?.elements[0]).toMatchObject({ src: 'mapped:AAA' })
+    expect(mapped.slides[0]?.elements[1]).toMatchObject({ screenshot: 'mapped:CCC' })
+  })
+
+  it('preserves untouched objects by identity so undo history keeps sharing structure', () => {
+    const project = projectFixture()
+    const identical = mapAssetSources(project, (src) => src)
+    expect(identical.slides[0]).toBe(project.slides[0])
+    expect(identical.uploads[0]).toBe(project.uploads[0])
+
+    const partial = mapAssetSources(project, (src) => src.endsWith('AAA') ? 'mapped:AAA' : src)
+    expect(partial.slides[0]).not.toBe(project.slides[0])
+    expect(partial.slides[0]?.background).toBe(project.slides[0]?.background)
+    expect(partial.slides[0]?.elements[1]).toBe(project.slides[0]?.elements[1])
+    expect(partial.slides[0]?.elements[2]).toBe(project.slides[0]?.elements[2])
+  })
+})

src/asset-sources.test.ts

@@ -0,0 +1,65 @@
+import type { CanvasElement, Slide, UploadAsset } from './types'
+
+/**
+ * Every place project data embeds an image source: upload assets, slide
+ * background images, image elements, and device screenshots. AI-authored
+ * `slide.html` is excluded on purpose — it references uploads through
+ * `asset:` upload ids and may only embed small self-authored SVG data URIs.
+ */
+export type ProjectAssetSources = {
+  slides: Slide[]
+  uploads: UploadAsset[]
+}
+
+export const collectAssetSources = ({ slides, uploads }: ProjectAssetSources): Set<string> => {
+  const sources = new Set<string>()
+  for (const upload of uploads) sources.add(upload.src)
+  for (const slide of slides) {
+    if (slide.background.image) sources.add(slide.background.image)
+    for (const element of slide.elements) {
+      if (element.type === 'image') sources.add(element.src)
+      else if (element.type === 'device' && element.screenshot) sources.add(element.screenshot)
+    }
+  }
+  return sources
+}
+
+const mapElementSources = (element: CanvasElement, map: (src: string) => string): CanvasElement => {
+  if (element.type === 'image') {
+    const src = map(element.src)
+    return src === element.src ? element : { ...element, src }
+  }
+  if (element.type === 'device' && element.screenshot) {
+    const screenshot = map(element.screenshot)
+    return screenshot === element.screenshot ? element : { ...element, screenshot }
+  }
+  return element
+}
+
+const mapBackgroundSources = (background: Slide['background'], map: (src: string) => string): Slide['background'] => {
+  if (background.image === undefined) return background
+  const image = map(background.image)
+  return image === background.image ? background : { ...background, image }
+}
+
+const mapSlideSources = (slide: Slide, map: (src: string) => string): Slide => {
+  const background = mapBackgroundSources(slide.background, map)
+  const elements = slide.elements.map((element) => mapElementSources(element, map))
+  const elementsChanged = elements.some((element, index) => element !== slide.elements[index])
+  if (background === slide.background && !elementsChanged) return slide
+  return {
+    ...slide,
+    background,
+    elements: elementsChanged ? elements : slide.elements,
+  }
+}
+
+/** Returns a structurally shared copy with every image source passed through `map`. */
+export const mapAssetSources = <T extends ProjectAssetSources>(project: T, map: (src: string) => string): T => {
+  const uploads = project.uploads.map((upload) => {
+    const src = map(upload.src)
+    return src === upload.src ? upload : { ...upload, src }
+  })
+  const slides = project.slides.map((slide) => mapSlideSources(slide, map))
+  return { ...project, uploads, slides }
+}