feat(library): mint a server frame's tile once and keep it, always show the whole branch under the open node, and draw the year tick as a grey rule

docker/frontend/scripts/immich-check.mjs

@@ -83,6 +83,13 @@ const PNG = Buffer.from(
 // the key live on the backend, and the page only ever calls its own origin.
 let direct = 0;
 let thumbs = 0;
+// What was asked of the server, a frame at a time: a tile is fetched once and kept
+// (`useThumbUrls` mints it and the store holds it), so a frame this map counts
+// twice is a frame the wall went back to Immich for.
+const thumbIds = new Map();
+// The mint itself: the fetch `tileFrom` makes for a server's frame, as against the
+// picture the wall paints straight off the address while the mint is on its way.
+const mints = new Map();
 
 const app = spawn('npx', ['vite', 'preview', '--port', String(APP_PORT), '--strictPort', '--host', '127.0.0.1'], {
   cwd: FRONTEND,
@@ -236,7 +243,11 @@ await context.route('**/api/**', (route) => {
     const box = host(url.searchParams.get('server') ?? '');
     if (!box) return send(502, { ok: false, error: 'unreachable' });
     if (path.endsWith('original') && !box.canDownload) return send(403, { ok: false, error: 'auth' });
-    if (path.endsWith('thumb')) thumbs++;
+    if (path.endsWith('thumb')) {
+      thumbs++;
+      thumbIds.set(id, (thumbIds.get(id) ?? 0) + 1);
+      if (req.resourceType() === 'fetch') mints.set(id, (mints.get(id) ?? 0) + 1);
+    }
     return route.fulfill({ status: 200, contentType: 'image/png', body: PNG });
   }
 
@@ -350,6 +361,46 @@ step(
 );
 step('and its frames were tiled off the backend, not off Immich', thumbs > 0, `${thumbs} tiles`);
 
+// --- the wall of a server's frames, and the tiles it keeps -------------------
+// A server's frames are read up and down the roll and the reader jumps the ruler
+// to a year and back, so the frames of one visit are the frames of the next. What
+// a wall drawn again must not do is go to Immich for a picture this machine
+// already drew: a tile is minted once off the backend (`useThumbUrls`), the store
+// keeps it, and the visit after reads it back out of the store — a wall that asks
+// again is a wall that stands grey on every jump until the server answers.
+await page.click('[data-key="lib-node-Immich"]');
+await page.click('[data-key="lib-view-grid"]');
+const tiles = () => page.$$eval('.lib-tile', (els) => els.length);
+const stored = () =>
+  page.$$eval('.lib-tile img', (els) => els.filter((e) => (e.getAttribute('src') ?? '').startsWith('blob:')).length);
+await page.waitForSelector('.lib-tile', { timeout: 30_000 });
+await page.waitForFunction(() => document.querySelector('.lib-tile img[src^="blob:"]') !== null, null, { timeout: 30_000 }).catch(() => {});
+const firstLook = new Map(mints);
+step(
+  'the wall draws a server’s frames, and their tiles are minted off the backend',
+  firstLook.size > 0 && (await stored()) > 0,
+  `${firstLook.size} frames minted, ${await stored()} of ${await tiles()} tiles kept`
+);
+
+// The visit after — the page again, on the same wall. Every tile the visit before
+// drew is in this machine's store by now, so every tile is drawn out of it and the
+// backend is not asked for one of them a second time.
+await page.reload();
+await page.waitForFunction(
+  () => {
+    const imgs = [...document.querySelectorAll('.lib-tile img')];
+    return imgs.length > 0 && imgs.every((i) => (i.getAttribute('src') ?? '').startsWith('blob:'));
+  },
+  null,
+  { timeout: 30_000 }
+).catch(() => {});
+const again = [...mints].filter(([id, n]) => n > (firstLook.get(id) ?? 0));
+step(
+  'and a frame drawn once is drawn out of this machine, not minted off Immich again',
+  (await tiles()) > 0 && (await stored()) === (await tiles()) && again.length === 0,
+  `${await stored()} of ${await tiles()} tiles out of the store, ${again.length} minted twice${again.length ? `: ${again.slice(0, 3).map(([id, n]) => id.slice(0, 8) + 'x' + n).join(' ')}` : ''}`
+);
+
 // --- an album unticked -------------------------------------------------------
 await editDialog('Immich');
 await page.uncheck('[data-key="immich-album-' + A2 + '"]');