fix(local-ui): center single-camera tile, retry HLS, show real node id

Three small UI papercuts from the v0.1.47 fresh install:

* Dashboard header showed "NODE · UNKNOWN" because Dashboard::new ran
  before the local_node_id KV row was generated. Lift the get-or-create
  above Dashboard::new so the SPA receives the stable id from the first
  paint; reuse it in the Local-mode branch instead of regenerating.
* Single-camera grid pinned the tile to the left edge — auto-fill keeps
  empty tracks. Switch to auto-fit + max column width + justify-content:
  center so one camera centers and multi-camera rows still fill.
* Live <video> stayed black because the manifest 404s for ~1s after
  FFmpeg starts, and manifestLoadingMaxRetry: 1 gave up immediately.
  Bump retries to 6 with a 1s base delay, surface fatal HLS errors as
  a "Stream unavailable" overlay with a Retry button instead of leaving
  the tile silently black.

Author: Sbussiso

Cargo.lock

@@ -5,7 +5,7 @@
 # should reflect that. Going from `opensentry-cloudnode` to
 # `sourcebox-sentry-cloudnode` keeps the binary name explicit + branded.
 name = "sourcebox-sentry-cloudnode"
-version = "0.1.47"
+version = "0.1.48"
 edition = "2021"
 authors = ["SourceBox LLC"]
 description = "SourceBox Sentry CloudNode — turns a USB webcam into a cloud-connected security camera."

Cargo.toml

@@ -146,11 +146,39 @@ impl Node {
         stop_flag: Arc<AtomicBool>,
         render_tui: bool,
     ) -> Result<()> {
-        // ── Create dashboard ────────────────────────────────────────────────
-        let node_id = self.config.node.node_id
-            .clone()
-            .unwrap_or_else(|| "unknown".to_string());
-        let dash = Dashboard::new(&node_id, &self.config.cloud.api_url);
+        // ── Resolve node_id before creating the dashboard ───────────────────
+        // The dashboard caches the id in its state and renders it in the
+        // status bar / web UI header.  We resolve it up-front so the SPA
+        // never shows "UNKNOWN":
+        //   - Connected mode: id comes from a prior registration, persisted
+        //     in `config.node.node_id`.  First boot of a Connected install
+        //     still shows "unknown" briefly (a few seconds, until
+        //     register_with_cloud returns), which is acceptable for a flow
+        //     that's already gating on a network round-trip.
+        //   - Local mode: get-or-create a stable 8-char UUID in the SQLite
+        //     `local_node_id` KV row.  Generated on first Local boot and
+        //     persisted, so per-camera IDs (and the dashboard header) stay
+        //     consistent across restarts.
+        let initial_node_id = if self.config.mode.is_local() {
+            match self.db.get_config("local_node_id")? {
+                Some(id) => id,
+                None => {
+                    let id: String = uuid::Uuid::new_v4()
+                        .simple()
+                        .to_string()
+                        .chars()
+                        .take(8)
+                        .collect();
+                    self.db.set_config("local_node_id", &id)?;
+                    id
+                }
+            }
+        } else {
+            self.config.node.node_id
+                .clone()
+                .unwrap_or_else(|| "unknown".to_string())
+        };
+        let dash = Dashboard::new(&initial_node_id, &self.config.cloud.api_url);
         dash.set_settings(self.build_settings_info());
         dash.set_db(self.db.clone(), self.hls_output_dir.clone());
         // Pass the API client so `/wipe confirm` can ask the backend
@@ -191,33 +219,14 @@ impl Node {
         // the per-camera fallback below generates IDs from
         // `<local_node_id>_<sanitized_device_path>`.
         let (node_id, camera_mapping) = if self.config.mode.is_local() {
-            // Get-or-create the persistent local node id.  8 hex chars
-            // matches the format Command Center registration returns,
-            // so all the downstream string formatting (status bar
-            // truncation to 8 chars, camera-id namespacing) keeps
-            // working without special-casing.
-            let local_id = match self.db.get_config("local_node_id")? {
-                Some(id) => id,
-                None => {
-                    let id: String = uuid::Uuid::new_v4()
-                        .simple()
-                        .to_string()
-                        .chars()
-                        .take(8)
-                        .collect();
-                    self.db.set_config("local_node_id", &id)?;
-                    dash.log_info(format!(
-                        "Generated local node id: {}",
-                        id.cyan().bold()
-                    ));
-                    id
-                }
-            };
+            // `initial_node_id` was already resolved (and persisted) above
+            // before Dashboard::new so the web UI header doesn't show
+            // "UNKNOWN".  Just reuse it here.
             dash.log_info(format!(
                 "Local mode — skipping Command Center registration (node {})",
-                local_id.cyan().bold()
+                initial_node_id.cyan().bold()
             ));
-            (local_id, HashMap::<String, String>::new())
+            (initial_node_id.clone(), HashMap::<String, String>::new())
         } else {
             dash.log_info("Registering with cloud…");
             let registration = self.register_with_cloud(&detected_cameras, &dash).await?;

src/node/runner.rs

@@ -2,7 +2,7 @@
 // Used by the live camera grid (live HLS) and the recording-playback
 // modal (VOD HLS) — same component, different src URLs.
 
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import Hls from "hls.js"
 
 interface HlsPlayerProps {
@@ -21,14 +21,27 @@ export default function HlsPlayer({
   controls = false,
 }: HlsPlayerProps) {
   const videoRef = useRef<HTMLVideoElement>(null)
+  // `nonce` increments on retry-click and is appended as a cache buster
+  // so HLS.js (and any intermediate proxy) refetches the manifest from
+  // scratch instead of replaying the failed cached response.
+  const [nonce, setNonce] = useState(0)
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     const video = videoRef.current
     if (!video) return
 
+    setError(null)
+
+    // Append the retry nonce so a "Retry" click after a failure forces
+    // a fresh manifest load.  Order: existing query params first.
+    const url = nonce > 0
+      ? `${src}${src.includes("?") ? "&" : "?"}_t=${nonce}`
+      : src
+
     // Native HLS (Safari + iOS) — feed the URL directly.
     if (video.canPlayType("application/vnd.apple.mpegurl")) {
-      video.src = src
+      video.src = url
       if (autoPlay) {
         void video.play().catch(() => {
           // Autoplay can be blocked; the controls (or user interaction)
@@ -44,33 +57,77 @@ export default function HlsPlayer({
     // hls.js path (Chrome / Firefox / Edge).
     if (Hls.isSupported()) {
       const hls = new Hls({
-        // Live tuning — fail fast on stalls so the operator sees a
-        // black tile instead of a spinning forever.  For VOD playback
-        // these knobs don't fire.
+        // Live tuning.  These defaults are tolerant of the first ~3 s
+        // after a camera starts when FFmpeg hasn't written the first
+        // segment yet — we want to wait it out, not surface a black
+        // tile.  `manifestLoadingMaxRetry: 6` ≈ 6 retries with hls.js's
+        // default exponential backoff (~64 s ceiling) before giving up.
         liveSyncDurationCount: 3,
-        manifestLoadingTimeOut: 8_000,
-        manifestLoadingMaxRetry: 1,
+        manifestLoadingTimeOut: 10_000,
+        manifestLoadingMaxRetry: 6,
+        manifestLoadingRetryDelay: 1_000,
+        levelLoadingMaxRetry: 6,
+        levelLoadingRetryDelay: 1_000,
       })
-      hls.loadSource(src)
+      hls.loadSource(url)
       hls.attachMedia(video)
       hls.on(Hls.Events.MEDIA_ATTACHED, () => {
         if (autoPlay) {
           void video.play().catch(() => undefined)
         }
       })
+      hls.on(Hls.Events.ERROR, (_evt, data) => {
+        // Only surface fatal errors — non-fatal recovers automatically.
+        if (!data.fatal) return
+        // Map the HLS.js error type to a short human-readable string.
+        const detail = data.details ?? data.type ?? "playback error"
+        setError(`${detail}`)
+        hls.destroy()
+      })
       return () => {
         hls.destroy()
       }
     }
 
     // Final fallback: just set the src and hope the browser figures
     // it out.  Nothing else to wire up.
-    video.src = src
+    video.src = url
     return () => {
       video.removeAttribute("src")
       video.load()
     }
-  }, [src, autoPlay])
+  }, [src, autoPlay, nonce])
+
+  if (error) {
+    return (
+      <div className={className} style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.75rem",
+        background: "var(--bg-secondary)",
+        color: "var(--text-secondary)",
+        fontSize: "0.85rem",
+        padding: "1rem",
+        textAlign: "center",
+      }}>
+        <div style={{ color: "var(--accent-red)", fontWeight: 600 }}>
+          Stream unavailable
+        </div>
+        <div style={{ color: "var(--text-muted)", fontSize: "0.75rem" }}>
+          {error}
+        </div>
+        <button
+          type="button"
+          className="btn"
+          onClick={() => setNonce(n => n + 1)}
+        >
+          Retry
+        </button>
+      </div>
+    )
+  }
 
   return (
     <video

web/src/components/HlsPlayer.tsx

@@ -154,9 +154,14 @@ button {
 }
 
 /* ── Camera grid ─────────────────────────────────────────────── */
+/* `auto-fit` (not auto-fill) collapses empty tracks so a single tile
+   doesn't pin to the left edge — combined with `justify-content: center`
+   and a max width per column, a one-camera install centers neatly while
+   multi-camera installs still flow naturally across the row. */
 .cameras-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(360px, 480px));
+  justify-content: center;
   gap: 1rem;
 }