Camera pictures without an object-storage bucket

Head office shows a camera's latest frame rather than live video, for a
reason that has not changed: the engine serves MJPEG on 127.0.0.1 on a PC
behind a shop's router with no inbound route, and relaying it needs
WebRTC/TURN. Pointing a browser straight at the shop PC is not the escape
either - the engine's API is Basic-authenticated with a credential it
generates locally and never sends anywhere, and shipping that to the
cloud so a web page could use it would put the key to the biometric API
and the live face feed in the server's database.

But that picture only worked if you had an S3 bucket. Without one,
attachSnapshots reported "This system is not storing images" for every
camera forever - on the two screens whose whole job is to show the
camera. Making them picture-led turned a missing feature into a wall of
empty tiles, on every local install and any self-hosted customer who does
not want a bucket.

migrations/009 adds camera_snapshots and the agent falls back to
PUT /api/agent/cameras/{camera}/snapshot when the presigned route answers
images_disabled - chosen by sentinel, never by matching the message, since
it picks between two routes. One row per camera is what makes this safe in
the database when face images are not: the key IS the camera, so storage
is (cameras x ~100 KB) and does not grow with footfall.

The read is session-authenticated rather than a signed link, which an
<img> cannot use - hence Shot.jsx and useAuthedImage, keyed on the URL
string rather than the snapshot object so a poll does not re-fetch 90 KB
per camera every few seconds, and revoking the object URL on cleanup.

Verified against the real office camera with no bucket configured: 90,587
bytes stored in Postgres, served as image/jpeg to a signed-in user, 401
without a session, rendered on both the Cameras and Shops cards.

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

web/src/api.js

@@ -91,6 +91,37 @@ async function send(method, path, body, retry = true) {
     parsed?.message || `Something went wrong (${res.status}).`)
 }
 
+// fetchImage loads a picture this server holds itself, with the session's
+// bearer token, and returns an object URL an <img> can use.
+//
+// It exists because an <img src> cannot carry an Authorization header. The
+// object-storage path returns a presigned absolute URL that needs no auth,
+// which is why it worked with a plain src; a picture served from our own
+// database has no such link, and minting an unauthenticated one so that <img>
+// could use it would add a way to reach a photograph of somebody's shop floor
+// without a session - the opposite of what this path is for.
+//
+// The caller MUST revoke the returned URL when it is finished with it, or the
+// browser keeps every blob it has ever loaded for the life of the page.
+async function fetchImage(path, retry = true) {
+  const { access } = tokens()
+  const res = await fetch(path, {
+    headers: access ? { Authorization: 'Bearer ' + access } : {},
+  })
+  if (res.ok) return URL.createObjectURL(await res.blob())
+
+  let parsed = null
+  try { parsed = await res.json() } catch { /* an image endpoint may not answer json */ }
+  const code = parsed?.error || ''
+  if (code === 'token_expired' && retry) {
+    await refresh()
+    return fetchImage(path, false)
+  }
+  if (res.status === 401) clearTokens()
+  throw new ApiError(res.status, code,
+    parsed?.message || `That picture could not be loaded (${res.status}).`)
+}
+
 const qs = (params) => {
   const p = new URLSearchParams()
   for (const [k, v] of Object.entries(params || {})) {
@@ -138,6 +169,9 @@ export const api = {
   conversion: (params) => send('GET', '/api/reports/conversion' + qs(params)),
 
   cameras: () => send('GET', '/api/cameras'),
+  // A camera picture this server holds itself. Returns an object URL the
+  // caller must revoke; see fetchImage.
+  cameraSnapshot: (url) => fetchImage(url),
   createCamera: (siteID, cam) =>
     send('POST', `/api/sites/${encodeURIComponent(siteID)}/cameras`, cam),
   updateCamera: (id, cam) => send('PATCH', `/api/cameras/${encodeURIComponent(id)}`, cam),