Cache bounded Discord avatars and coalesce downloads

src/sharing/avatar-cache.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from 'bun:test';
+import { createCanvas } from '@napi-rs/canvas';
+import { createAvatarCache } from './avatar-cache';
+
+test('avatars share in-flight downloads and invalidate by URL or expiry', async () => {
+  const png = await createCanvas(16, 16).encode('png');
+  let calls = 0, timestamp = 0;
+  const request = Object.assign(async () => { calls++; return new Response(new Uint8Array(png)); }, { preconnect: fetch.preconnect });
+  const avatar = createAvatarCache({ request, now: () => timestamp, successTtlMs: 100 });
+  const [one, two] = await Promise.all([avatar('avatar/hash1'), avatar('avatar/hash1')]);
+  expect(one).not.toBeNull(); expect(one).toBe(two); expect(calls).toBe(1);
+  expect(await avatar('avatar/hash1')).toBe(one); expect(calls).toBe(1);
+  await avatar('avatar/hash2'); expect(calls).toBe(2);
+  timestamp = 100; await avatar('avatar/hash1'); expect(calls).toBe(3);
+});
+
+test('avatar cache evicts least recently used images and retries negative entries after their TTL', async () => {
+  const png = await createCanvas(16, 16).encode('png');
+  let calls = 0, timestamp = 0, fail = false;
+  const request = Object.assign(async () => { calls++; return fail ? new Response(null, { status: 503 }) : new Response(new Uint8Array(png)); }, { preconnect: fetch.preconnect });
+  const avatar = createAvatarCache({ request, now: () => timestamp, maxEntries: 2, failureTtlMs: 10 });
+  await avatar('a'); await avatar('b'); await avatar('a'); await avatar('c');
+  expect(calls).toBe(3); await avatar('b'); expect(calls).toBe(4);
+  fail = true;
+  expect(await avatar('bad')).toBeNull(); expect(await avatar('bad')).toBeNull(); expect(calls).toBe(5);
+  timestamp = 10; fail = false;
+  expect(await avatar('bad')).not.toBeNull(); expect(calls).toBe(6);
+});
+
+test('avatar downloads have a concurrency bound and oversized decoded images use the fallback', async () => {
+  let release!: (response: Response) => void, calls = 0;
+  const request = Object.assign(async () => { calls++; return new Promise<Response>(resolve => { release = resolve; }); }, { preconnect: fetch.preconnect });
+  const avatar = createAvatarCache({ request, maxPending: 1 });
+  const first = avatar('one'), duplicate = avatar('one');
+  expect(await avatar('two')).toBeNull(); expect(calls).toBe(1);
+  release(new Response(new Uint8Array(await createCanvas(257, 1).encode('png'))));
+  expect(await first).toBeNull(); expect(await duplicate).toBeNull();
+});

src/sharing/avatar-cache.ts

@@ -0,0 +1,61 @@
+import { loadImage } from '@napi-rs/canvas';
+
+async function boundedBytes(response: Response) {
+  const reader = response.body?.getReader();
+  if (!reader) return null;
+  const chunks: Uint8Array[] = []; let size = 0;
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) return Buffer.concat(chunks);
+      size += value.byteLength;
+      if (size > 1024 * 1024) { await reader.cancel(); return null; }
+      chunks.push(value);
+    }
+  } finally { reader.releaseLock(); }
+}
+
+type Avatar = Awaited<ReturnType<typeof loadImage>>;
+type Options = {
+  request?: typeof fetch;
+  now?: () => number;
+  maxEntries?: number;
+  maxPending?: number;
+  successTtlMs?: number;
+  failureTtlMs?: number;
+};
+/** Hash-based Discord URLs invalidate naturally; bound both cached images and downloads. */
+export function createAvatarCache({ request = ((url, init) => fetch(url, init)) as typeof fetch, now = Date.now, maxEntries = 128, maxPending = 4, successTtlMs = 3600000, failureTtlMs = 30000 }: Options = {}) {
+  const cache = new Map<string, { image: Avatar | null; expires: number }>();
+  const pending = new Map<string, Promise<Avatar | null>>();
+  return async (url: string): Promise<Avatar | null> => {
+    const cached = cache.get(url);
+    if (cached && cached.expires > now()) {
+      cache.delete(url); cache.set(url, cached);
+      return cached.image;
+    }
+    cache.delete(url);
+    const existing = pending.get(url);
+    if (existing) return existing;
+    if (pending.size >= maxPending) return null;
+    const job = (async () => {
+      let image: Avatar | null = null;
+      try {
+        const response = await request(url, { redirect: 'error', signal: AbortSignal.timeout(3000) });
+        if (response.ok) {
+          const bytes = await boundedBytes(response);
+          if (bytes) {
+            const decoded = await loadImage(Buffer.from(bytes));
+            if (decoded.width <= 256 && decoded.height <= 256) image = decoded;
+          }
+        }
+      } catch { /* A brief negative cache keeps an unavailable CDN out of the hot path. */ }
+      cache.set(url, { image, expires: now() + (image ? successTtlMs : failureTtlMs) });
+      while (cache.size > maxEntries) cache.delete(cache.keys().next().value!);
+      return image;
+    })().finally(() => { pending.delete(url); });
+    pending.set(url, job);
+    return job;
+  };
+}
+export const cachedAvatar = createAvatarCache();

src/sharing/live-card-image.ts

@@ -1,4 +1,5 @@
-import { createCanvas, GlobalFonts, loadImage } from "@napi-rs/canvas";
+import { cachedAvatar } from './avatar-cache';
+import { createCanvas, GlobalFonts } from "@napi-rs/canvas";
 import { existsSync } from "node:fs";
 import { eq } from "drizzle-orm";
 import type { AppDatabase } from "../auth";
@@ -52,13 +53,7 @@ export async function renderLiveCard(data: LiveImageData, theme: Theme) {
   const canvas = createCanvas(layout.width, layout.height);
   const ctx = canvas.getContext('2d');
   const colors = themePalette[theme];
-  let avatar: Awaited<ReturnType<typeof loadImage>> | null = null;
+  const avatar = data.avatarUrl ? await cachedAvatar(data.avatarUrl) : null;
-  if (data.avatarUrl) {
-    try {
-      const response = await fetch(data.avatarUrl, { redirect: 'error', signal: AbortSignal.timeout(3000) });
-      if (response.ok) avatar = await loadImage(Buffer.from(await response.arrayBuffer()));
-    } catch { /* Match the snapshot card's neutral avatar fallback. */ }
-  }
   const rect = (x: number, y: number, w: number, h: number, color: string, radius = 0) => {
     ctx.fillStyle = color; ctx.beginPath(); ctx.roundRect(x, y, Math.max(0, w), Math.max(0, h), radius); ctx.fill();
   };