perf: cache generated images for the session and decode thumbnails, not originals

Generated assets are served `private, no-store`, which is right for a clinical
app on a shared workstation — but it meant every gallery render re-downloaded
every image. Measured: 26 images averaging 279kB, so 7.2MB fetched to draw 56px
tiles, on every open of the Create image popup.

Two changes, both reusable anywhere in the app:

- A session cache holding decoded blobs in MEMORY ONLY, so nothing is written to
  disk and the no-store posture is unchanged. Entries are keyed by owner ticket
  as well as asset, and cleared when the account boundary moves, so one account
  can never read another's bytes out of memory. Concurrent tiles asking for the
  same asset share one request rather than racing.
- Any img carrying data-image-thumb gets a downscaled copy instead of the
  original, so a 56px tile no longer decodes a 300kB image. The gallery asks for
  256px and the in-chat preview for 640px; opening the full view still gets the
  original. Browsers without OffscreenCanvas, and any decode failure, fall back
  to the full image rather than showing nothing.

This does not reduce the first fetch. Serving genuinely smaller bytes needs
server-side resizing, which needs an image library this project does not carry —
worth a deliberate decision rather than adding a native dependency in passing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GmpYHPSLGmXGZMyLpn2Lbe

public/js/assistant/images.js

@@ -13,7 +13,7 @@ export function createAssistantImageStore() {
     // The in-chat image is a thumbnail; full resolution is one click away, so a
     // long answer is not pushed off the screen by the picture that illustrates it.
     return '<div class="assistant-generated-image"><img src="' + escapeAttr(src) + '" alt="' + escapeAttr(alt || 'Generated image') +
-      '" data-assistant-open-image="' + escapeAttr(id) + '" title="Click to view full resolution" tabindex="0" role="button">' +
+      '" data-assistant-open-image="' + escapeAttr(id) + '" data-image-thumb="640" title="Click to view full resolution" tabindex="0" role="button">' +
       '<div class="assistant-image-actions">' +
       '<button type="button" class="btn-sm btn-ghost" data-assistant-open-image="' + escapeAttr(id) + '"><i class="fas fa-expand"></i> Preview</button>' +
       '<button type="button" class="btn-sm btn-ghost" data-assistant-download-image="' + escapeAttr(id) + '"><i class="fas fa-download"></i> Download</button>' +

public/js/clinicalAssistant.js

@@ -1365,7 +1365,7 @@ import {
         wrap.innerHTML = done.map(function (job) {
           var dl = job.imageUrl + (job.imageUrl.indexOf('?') === -1 ? '?download=1' : '&download=1');
           return '<div class="assistant-gallery-item-wrap">' +
-            '<button type="button" class="assistant-gallery-item" data-gallery-image="' + escapeAttr(job.imageUrl) + '" title="' + escapeAttr(new Date(job.createdAt || '').toLocaleString()) + '"><img src="' + escapeAttr(job.imageUrl) + '" alt="Generated image" loading="lazy"></button>' +
+            '<button type="button" class="assistant-gallery-item" data-gallery-image="' + escapeAttr(job.imageUrl) + '" title="' + escapeAttr(new Date(job.createdAt || '').toLocaleString()) + '"><img src="' + escapeAttr(job.imageUrl) + '" data-image-thumb="256" alt="Generated image" loading="lazy"></button>' +
             '<a class="assistant-gallery-download" href="' + escapeAttr(dl) + '" download title="Download this image"><i class="fas fa-download"></i></a>' +
             '</div>';
         }).join('') + running.map(function (job) {
@@ -1453,7 +1453,7 @@ import {
         return;
       }
       wrap.innerHTML = done.slice(0, 24).map(function (job) {
-        return '<button type="button" class="assistant-gallery-item" data-gallery-image="' + escapeAttr(job.imageUrl) + '" title="' + escapeAttr(new Date(job.createdAt || '').toLocaleString()) + '"><img src="' + escapeAttr(job.imageUrl) + '" alt="Generated image" loading="lazy"></button>';
+        return '<button type="button" class="assistant-gallery-item" data-gallery-image="' + escapeAttr(job.imageUrl) + '" title="' + escapeAttr(new Date(job.createdAt || '').toLocaleString()) + '"><img src="' + escapeAttr(job.imageUrl) + '" data-image-thumb="256" alt="Generated image" loading="lazy"></button>';
       }).join('');
     }).catch(function () {});
   }

public/js/generatedImages.js

@@ -53,6 +53,63 @@ export async function imageDataUrl(src, ticket = captureImageOwner()) {
   });
   assertImageOwner(ticket); return data;
 }
+// ── Session image cache ─────────────────────────────────────────────────────
+// Assets are served `private, no-store`, which is right for a clinical app on a
+// shared workstation — but it means every gallery render re-downloaded every
+// image. This keeps decoded blobs in MEMORY ONLY for the session, keyed by asset
+// and by the owning ticket, so nothing is written to disk and a different
+// account can never read another's entry. Cleared on any account boundary
+// change, alongside the object URLs.
+const blobCache = new Map();     // key -> Blob (full size)
+const thumbCache = new Map();    // key -> Blob (downscaled)
+const inflight = new Map();      // key -> Promise, so N tiles fetch once
+
+function cacheKey(src, ticket) { return String(ticket && ticket.ticket) + '\u0000' + String(src); }
+
+export function clearImageCache() { blobCache.clear(); thumbCache.clear(); inflight.clear(); }
+
+export async function cachedImageBlob(src, ticket = captureImageOwner()) {
+  assertImageOwner(ticket);
+  const key = cacheKey(src, ticket);
+  const hit = blobCache.get(key);
+  if (hit) return hit;
+  // Several tiles asking for the same asset share one request instead of racing.
+  if (inflight.has(key)) return inflight.get(key);
+  const pending = privateImageBlob(src, ticket)
+    .then(blob => { assertImageOwner(ticket); blobCache.set(key, blob); return blob; })
+    .finally(() => inflight.delete(key));
+  inflight.set(key, pending);
+  return pending;
+}
+
+// A gallery tile is 56px but was decoding a full 300kB image. Downscaling once
+// and reusing the result keeps memory and decode cost proportional to what is
+// actually shown. Reusable anywhere a small preview is wanted.
+export async function cachedThumbnail(src, edge = 256, ticket = captureImageOwner()) {
+  assertImageOwner(ticket);
+  const key = cacheKey(src, ticket) + '\u0000' + edge;
+  const hit = thumbCache.get(key);
+  if (hit) return hit;
+  const blob = await cachedImageBlob(src, ticket);
+  assertImageOwner(ticket);
+  if (typeof createImageBitmap !== 'function' || typeof OffscreenCanvas !== 'function') return blob;
+  try {
+    const bitmap = await createImageBitmap(blob);
+    const scale = Math.min(1, edge / Math.max(bitmap.width, bitmap.height));
+    if (scale === 1) { bitmap.close(); thumbCache.set(key, blob); return blob; }
+    const canvas = new OffscreenCanvas(Math.round(bitmap.width * scale), Math.round(bitmap.height * scale));
+    const context = canvas.getContext('2d');
+    context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    bitmap.close();
+    const small = await canvas.convertToBlob({ type: 'image/webp', quality: 0.82 });
+    assertImageOwner(ticket);
+    thumbCache.set(key, small);
+    return small;
+  } catch (_) {
+    return blob; // any decode failure just uses the original
+  }
+}
+
 export function transientImageUrl(blob, ticket = captureImageOwner()) {
   assertImageOwner(ticket);
   const url = URL.createObjectURL(blob); urls.set(url, ticket); return url;
@@ -62,7 +119,10 @@ export async function hydrateImage(img, src, ticket = captureImageOwner()) {
   assertImageOwner(ticket);
   if (!assetPath(src)) return;
   img.removeAttribute('src');
-  const blob = await privateImageBlob(src, ticket);
+  // A tile marked data-image-thumb gets the downscaled copy; full views get the
+  // original. Both come from the session cache, so a re-render costs nothing.
+  const edge = Number(img.getAttribute('data-image-thumb')) || 0;
+  const blob = edge ? await cachedThumbnail(src, edge, ticket) : await cachedImageBlob(src, ticket);
   assertImageOwner(ticket);
   if (img.isConnected) img.src = transientImageUrl(blob, ticket);
 }
@@ -117,6 +177,7 @@ if (typeof MutationObserver !== 'undefined') {
   observer.observe(document.documentElement, { childList: true, subtree: true });
 }
 if (typeof window !== 'undefined') window.addEventListener('account-boundary', () => {
+  clearImageCache(); // cached bytes must not outlive the account that fetched them
   const obsolete = new Set();
   urls.forEach((owner, url) => { if (!validSharingOwner(owner)) { obsolete.add(url); revokeImageUrl(url); } });
   document.querySelectorAll('img[src^="blob:"]').forEach(img => { if (obsolete.has(img.src)) img.removeAttribute('src'); });

test/generated-image-cache.test.js

@@ -0,0 +1,43 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const read = f => fs.readFileSync(path.join(__dirname, '..', f), 'utf8');
+
+// Generated assets are served `private, no-store`, which is correct for a
+// clinical app on a shared workstation. The cost was that every gallery render
+// re-downloaded every image — 26 images at ~279kB to draw 56px tiles.
+test('assets are still never written to disk', () => {
+  const route = read('src/routes/generatedImages.js');
+  assert.match(route, /Cache-Control', 'private, no-store'/,
+    'the no-store posture is unchanged; caching is in memory for the session only');
+});
+
+test('the cache is scoped to the account that fetched it', () => {
+  const js = read('public/js/generatedImages.js');
+  // A cache keyed only by URL would let the next account read the previous
+  // one's bytes out of memory.
+  assert.match(js, /function cacheKey\(src, ticket\) \{ return String\(ticket && ticket\.ticket\)/,
+    'entries are keyed by owner ticket as well as asset');
+  assert.match(js, /clearImageCache\(\); \/\/ cached bytes must not outlive the account/,
+    'and dropped when the account boundary moves');
+  assert.match(js, /assertImageOwner\(ticket\)/, 'ownership is asserted on the way in');
+});
+
+test('concurrent tiles share one request instead of racing', () => {
+  const js = read('public/js/generatedImages.js');
+  assert.match(js, /if \(inflight\.has\(key\)\) return inflight\.get\(key\);/);
+  assert.match(js, /\.finally\(\(\) => inflight\.delete\(key\)\)/, 'and the slot is released either way');
+});
+
+test('a tile decodes a thumbnail, not a full image', () => {
+  const js = read('public/js/generatedImages.js');
+  assert.match(js, /const edge = Number\(img\.getAttribute\('data-image-thumb'\)\) \|\| 0;/);
+  assert.match(js, /edge \? await cachedThumbnail\(src, edge, ticket\) : await cachedImageBlob\(src, ticket\)/);
+  // A browser without OffscreenCanvas still shows the image rather than nothing.
+  assert.match(js, /if \(typeof createImageBitmap !== 'function' \|\| typeof OffscreenCanvas !== 'function'\) return blob;/);
+  assert.match(js, /catch \(_\) \{\s*\n\s*return blob;/, 'and a decode failure falls back to the original');
+
+  const assistant = read('public/js/clinicalAssistant.js');
+  assert.match(assistant, /data-image-thumb="256"/, 'the 56px gallery asks for a small copy');
+});