Live view at head office, relayed through the agent's outbound connection

I got this wrong first time. "Head office cannot show live video cheaply"
conflated TRUE VIDEO with SEEING THE CAMERA NOW, and only the first needs
WebRTC and a TURN server.

The shop PC is behind a router with no inbound route, so head office
cannot pull the engine's MJPEG. It can answer the agent's outbound
requests, which is the shape of everything else here: the server holds a
poll open, the agent asks "is anyone watching?", and pushes JPEGs up for
exactly as long as somebody is.

Measured on the office camera: 98 KB full frame, 20.8 KB re-encoded at
640/q60, so one watcher costs ~83 KB/s. 47 frames arrived in 12 seconds -
4 fps, as configured. The UI says "about 4 frames a second" rather than
letting anyone conclude the camera stutters.

Nothing is uploaded when nobody is looking, which is the whole cost
argument: Publish returns false once the last viewer goes, interest lapses
on a timer each viewer refreshes as it reads (so a closed tab stops the
upload within seconds), one push is capped at five minutes, and the UI
streams one camera at a time.

LiveHub is deliberately the opposite of the arrivals Hub. There a doorbell
pushes nothing because nothing may be lost; here a dropped frame is the
correct outcome, so each viewer has a one-slot buffer that is overwritten -
the only frame worth having is the newest, and a queue would show an
ever-growing delay behind the shop instead of dropping back to live.

Ownership is proved once, before anything streams: the relay is keyed on a
camera id, a hub does not know whose camera it holds, and a camera id is
not a secret. Verified: another tenant gets 404, no session gets 401, and
an agent cannot push into another site's camera.

Also fixes a bug I introduced with it - the Live button was gated on
`connected`, which is head office's last report and up to two minutes
stale, so it hid itself during every reconnect. "Is that camera really
down?" is exactly when somebody wants to look, and a hidden control says
"you cannot" where the honest answer is "here is why".

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

web/src/views/CameraLive.jsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from 'react'
+import { streamCameraLive } from '../api.js'
+
+// The live view of one camera.
+//
+// It is a few frames a second, not video, and the label says so rather than
+// letting somebody conclude the camera is stuttering. That is the honest limit
+// of relaying through the agent's outbound connection; true 25 fps would need
+// WebRTC and a TURN server, which is a different piece of infrastructure.
+//
+// **Nothing is uploaded from the shop until this component is mounted**, and it
+// stops within seconds of it going away. That is the whole reason a live view
+// is affordable at all, and why this is a deliberate action rather than
+// something every camera card does on its own.
+export default function CameraLive({ camera, onClose }) {
+  const img = useRef(null)
+  const [state, setState] = useState('waiting')
+  // Nothing has arrived after a sensible wait. Its own state, because "the
+  // shop PC has not answered" is a different thing to tell somebody than
+  // "connecting", and leaving a spinner up forever tells them nothing at all.
+  const [stalled, setStalled] = useState(false)
+
+  useEffect(() => {
+    const ctrl = new AbortController()
+    const stop = streamCameraLive({
+      cameraId: camera.id, img,
+      onState: s => { setState(s); if (s === 'live') setStalled(false) },
+      signal: ctrl.signal,
+    })
+    // Generous: the server holds the agent's poll, the agent then has to reach
+    // the camera, and a cold start is a couple of seconds even when everything
+    // works.
+    const t = setTimeout(() => setStalled(true), 12000)
+    return () => { stop(); ctrl.abort(); clearTimeout(t) }
+  }, [camera.id])
+
+  // What to say when nothing arrives. The two causes need different actions -
+  // one is the camera, the other is the PC - so they must not share a message.
+  const stalledNote = camera.connected === false
+    ? 'This camera was not connecting when the shop PC last reported. Check it is powered on and reachable on the shop’s network.'
+    : camera.connected == null
+      ? 'The shop PC has not reported on this camera yet. It may still be starting up.'
+      : 'The shop PC is not sending frames. It may be offline, or its Behavision app may not be running.'
+
+  const note = stalled && state !== 'live'
+    ? stalledNote
+    : {
+        waiting: 'Asking the shop PC…',
+        live: 'Live · about 4 frames a second',
+        reconnecting: 'Reconnecting…',
+      }[state]
+
+  return (
+    <div className="overlay" onClick={onClose}>
+      <aside className="drawer live" onClick={e => e.stopPropagation()}>
+        <header className="drawer-head">
+          <div>
+            <h2>{camera.label}</h2>
+            <p className="sub">{camera.site}</p>
+          </div>
+          <button className="ghost" onClick={onClose}>Close</button>
+        </header>
+        <div className="drawer-body">
+          <div className="liveshot">
+            {/* Seeded with the stored snapshot so the first second shows the
+                camera rather than a black rectangle. It is the same view, a
+                minute old, which is a far better place to start from than
+                nothing. */}
+            <img ref={img} alt={`Live view from ${camera.label}`} />
+            {state !== 'live' && (
+              <div className="livewait">
+                <span>{stalled ? 'No picture yet' : note}</span>
+              </div>
+            )}
+          </div>
+          <p className="hint" style={{ marginTop: 10 }}>
+            {state === 'live'
+              ? 'Live · about 4 frames a second. The shop only uploads while this is open.'
+              : note}
+          </p>
+        </div>
+      </aside>
+    </div>
+  )
+}