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/Cameras.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { api } from '../api.js'
 import { usePolled } from '../hooks.js'
 import Shot from './Shot.jsx'
+import CameraLive from './CameraLive.jsx'
 import { ago, Loading, Problem } from './Sites.jsx'
 import CameraSetup from './CameraSetup.jsx'
 
@@ -39,6 +40,10 @@ export default function Cameras({ user }) {
     usePolled(() => api.cameras(), 20000, [])
   const { data: sites } = usePolled(() => api.sites(), 0, [])
   const [editing, setEditing] = useState(null)
+  // Only one camera streams at a time, on purpose. Every open view makes a
+  // shop PC upload, so a grid that went live all at once would put an estate's
+  // worth of cameras on the wire because somebody opened a page.
+  const [watching, setWatching] = useState(null)
 
   const canEdit = ['admin', 'owner', 'manager'].includes(user.role)
   const list = cams || []
@@ -76,7 +81,8 @@ export default function Cameras({ user }) {
           <div className="grid cams">
             {list.map(c => (
               <CameraCard key={c.id} cam={c} canEdit={canEdit}
-                          onEdit={() => setEditing(c)} />
+                          onEdit={() => setEditing(c)}
+                          onWatch={() => setWatching(c)} />
             ))}
           </div>
         )
@@ -90,11 +96,15 @@ export default function Cameras({ user }) {
           onSaved={(_, opts) => { if (!opts?.keepOpen) setEditing(null); reload() }}
         />
       )}
+
+      {watching && (
+        <CameraLive camera={watching} onClose={() => setWatching(null)} />
+      )}
     </>
   )
 }
 
-function CameraCard({ cam, canEdit, onEdit }) {
+function CameraCard({ cam, canEdit, onEdit, onWatch }) {
   // Three states, not two. A camera nobody has tried yet is not a camera that
   // is down, and telling an operator to check the cabling on a camera the shop
   // PC has not even seen sends them to the wrong building.
@@ -136,6 +146,18 @@ function CameraCard({ cam, canEdit, onEdit }) {
         {cam.snapshot_at && (
           <span className="shot-age">{ago(cam.snapshot_at)}</span>
         )}
+
+        {/* Always offered, including when this card says the camera is down.
+            `connected` is head office's LAST REPORT and can be two minutes
+            stale, so gating on it hid the button during every reconnect - and
+            "is that camera really down?" is precisely the moment somebody wants
+            to look. A hidden control says "you cannot" when the honest answer
+            is "here is why", which the live view itself can give.
+            stopPropagation because the card itself opens Edit. */}
+        <button className="watch" title="Watch this camera now"
+                onClick={e => { e.stopPropagation(); onWatch() }}>
+          <i aria-hidden="true" />Live
+        </button>
       </div>
 
       {/* Connected and verified are different claims, and the gap between them