layoit

webui/src/components/AdminPanel.jsx

@@ -10,7 +10,7 @@ const MODES = [
 
 export default function AdminPanel() {
   const { session, lockRover, setMode, requestControl } = useSession();
-  const roster = session?.roster ?? [];
+  const roster = useMemo(() => session?.roster ?? [], [session?.roster]);
   const [lockStates, setLockStates] = useState({});
 
   const isAdmin =

webui/src/components/AlertFeed.jsx

@@ -1,30 +1,54 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 
-function AlertCard({ alert }) {
-  const color =
-    alert.color === 'error'
-      ? 'bg-red-500/10 border-red-500/40 text-red-100'
-      : alert.color === 'warn'
-      ? 'bg-amber-500/10 border-amber-500/40 text-amber-100'
-      : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-100';
+const LIFETIME_MS = 5000;
 
-  return (
-    <div className={`rounded-2xl border px-4 py-3 text-sm ${color}`}>
-      <p className="text-xs uppercase tracking-[0.3em] opacity-60">{alert.title || 'Alert'}</p>
-      <p className="mt-1 text-base font-semibold">{alert.message}</p>
-    </div>
-  );
+function buildKey(alert) {
+  if (alert.id) return alert.id;
+  if (alert.timestamp) return `${alert.timestamp}-${alert.message}`;
+  return `${alert.title || 'alert'}-${alert.message}`;
 }
 
 export default function AlertFeed() {
   const { alerts } = useSession();
-  const recent = useMemo(() => alerts.slice(-5).reverse(), [alerts]);
-  if (recent.length === 0) return null;
+  const [now, setNow] = useState(() => Date.now());
+  const latest = useMemo(() => alerts.slice(-5).map((alert) => ({ alert, key: buildKey(alert) })), [alerts]);
+
+  useEffect(() => {
+    if (!latest.length) return undefined;
+    const interval = setInterval(() => setNow(Date.now()), 200);
+    return () => clearInterval(interval);
+  }, [latest.length]);
+
+  const visible = latest
+    .map((item) => ({
+      ...item,
+      age: now - (item.alert.receivedAt ?? item.alert.timestamp ?? 0),
+    }))
+    .filter((item) => item.age <= LIFETIME_MS);
+
+  if (!visible.length) return null;
+
   return (
-    <section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <h2 className="text-lg font-semibold text-white">Recent Alerts</h2>
-      <div className="mt-4 space-y-3">{recent.map((alert) => <AlertCard key={alert.id || alert.message} alert={alert} />)}</div>
-    </section>
+    <div className="pointer-events-none fixed top-2 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-2">
+      {visible.map((toast) => (
+        <AlertToast key={toast.key} alert={toast.alert} />
+      ))}
+    </div>
+  );
+}
+
+function AlertToast({ alert }) {
+  const colorClasses =
+    alert.color === 'error'
+      ? 'border-red-500/50 bg-red-500/20 text-red-100'
+      : alert.color === 'warn'
+      ? 'border-amber-500/50 bg-amber-500/20 text-amber-100'
+      : 'border-emerald-500/40 bg-emerald-500/10 text-emerald-100';
+  return (
+    <div className={`pointer-events-auto rounded-md border px-3 py-2 text-[0.75rem] shadow-lg shadow-black/60 ${colorClasses}`}>
+      <p className="text-[0.6rem] uppercase tracking-[0.4em] opacity-70">{alert.title || 'Alert'}</p>
+      <p className="text-sm font-semibold">{alert.message}</p>
+    </div>
   );
 }

webui/src/components/DrivePanel.jsx

@@ -1,79 +1,120 @@
-import { useDriveControls } from '../hooks/useDriveControls.js';
+import { useDriveControl } from '../context/DriveControlContext.jsx';
+import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
 
-const oiButtons = [
-  { key: 'start', label: 'Start OI' },
+const manualOiButtons = [
   { key: 'safe', label: 'Safe' },
-  { key: 'full', label: 'Full' },
   { key: 'passive', label: 'Passive' },
-  { key: 'dock', label: 'Dock' },
+  { key: 'full', label: 'Full' },
 ];
 
-function SpeedMeter({ left, right }) {
+export default function DrivePanel() {
+  const { roverId, speeds, stopMotors, sendOiCommand, runStartDockFull, seekDock } = useDriveControl();
+  const frame = useTelemetryFrame(roverId);
+  const sensors = frame?.sensors || {};
+  const drivingMode = (sensors.oiMode?.label || '').toLowerCase() === 'full';
+  const docked = Boolean(sensors.chargingSources?.homeBase);
+  const charging = Boolean(
+    sensors.chargingState?.label && sensors.chargingState.label.toLowerCase() !== 'not charging',
+  );
+  const updated = frame?.receivedAt ? new Date(frame.receivedAt).toLocaleTimeString() : null;
+
   return (
-    <div className="grid grid-cols-2 gap-4 rounded-2xl border border-slate-800/60 bg-slate-950/40 p-4 text-sm">
+    <section className="rounded-lg border border-slate-900 bg-slate-950/70 p-2 text-[0.8rem] text-slate-100">
+      <div className="flex items-center justify-between text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">
+        <span>Drive Control</span>
+        <span>{roverId ? `Rover ${roverId}` : 'unassigned'}</span>
+      </div>
+      <div className="mt-2 space-y-2">
+        <div>
+          <button
+            type="button"
+            onClick={runStartDockFull}
+            disabled={!roverId}
+            className="w-full rounded border border-emerald-500/40 bg-emerald-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-emerald-200 disabled:opacity-40"
+          >
+            Enable Driving Mode
+          </button>
+          <p className="mt-1 text-[0.65rem] text-slate-400">Runs Start → Dock → Full commands to ready the rover.</p>
+          <div className="mt-1 flex flex-wrap items-center gap-1 text-[0.6rem]">
+            <StatusPill label="Driving mode" active={drivingMode} />
+            {updated && <span className="text-slate-500">Updated {updated}</span>}
+          </div>
+        </div>
+        <div>
+          <button
+            type="button"
+            onClick={seekDock}
+            disabled={!roverId}
+            className="w-full rounded border border-cyan-500/40 bg-cyan-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-cyan-200 disabled:opacity-40"
+          >
+            Seek Dock
+          </button>
+          <p className="mt-1 text-[0.65rem] text-slate-400">
+            Point the rover straight at the dock, about one foot away, before triggering.
+          </p>
+          <div className="mt-1 flex flex-wrap gap-1">
+            <StatusPill label={docked ? 'Docked' : 'Not docked'} active={docked} />
+            <StatusPill label={charging ? 'Charging' : 'Not charging'} active={charging} />
+          </div>
+        </div>
+        <SpeedRow left={speeds.left} right={speeds.right} />
+        <div>
+          <p className="text-[0.6rem] uppercase tracking-[0.3em] text-slate-500">Manual OI</p>
+          <div className="mt-1 flex flex-wrap gap-1">
+            {manualOiButtons.map((btn) => (
+              <button
+                key={btn.key}
+                type="button"
+                onClick={() => sendOiCommand(btn.key)}
+                disabled={!roverId}
+                className="rounded border border-slate-800 px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.2em] text-slate-200 disabled:opacity-30"
+              >
+                {btn.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-1">
+          <button
+            type="button"
+            onClick={stopMotors}
+            disabled={!roverId}
+            className="flex-1 rounded border border-red-500/50 bg-red-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-red-200 disabled:opacity-40"
+          >
+            Stop Motors
+          </button>
+        </div>
+      </div>
+      <p className="mt-2 text-[0.6rem] text-slate-500">Sensor streaming auto-starts after each OI change.</p>
+    </section>
+  );
+}
+
+function SpeedRow({ left, right }) {
+  return (
+    <div className="grid grid-cols-2 gap-1 rounded border border-slate-900 bg-black/50 p-1 text-[0.7rem]">
       <div>
-        <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Left</p>
-        <p className="text-2xl font-semibold text-white">{left}</p>
+        <p className="text-[0.55rem] uppercase tracking-[0.3em] text-slate-500">Left</p>
+        <p className="font-semibold text-slate-100">{left}</p>
       </div>
       <div>
-        <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Right</p>
-        <p className="text-2xl font-semibold text-white">{right}</p>
+        <p className="text-[0.55rem] uppercase tracking-[0.3em] text-slate-500">Right</p>
+        <p className="font-semibold text-slate-100">{right}</p>
       </div>
     </div>
   );
 }
 
-export default function DrivePanel() {
-  const { roverId, speeds, stopMotors, sendOiCommand } = useDriveControls();
-
+function StatusPill({ label, active }) {
   return (
-    <section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <header className="mb-4 flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Drive Controls</p>
-          <h2 className="text-2xl font-semibold text-white">
-            {roverId ? `Driving rover ${roverId}` : 'No rover assigned'}
-          </h2>
-        </div>
-        <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
-          <span>W/A/S/D: move</span>
-          <span>Shift: boost</span>
-        </div>
-      </header>
-
-      <SpeedMeter left={speeds.left} right={speeds.right} />
-
-      <div className="mt-4 flex flex-wrap gap-3">
-        <button
-          type="button"
-          onClick={stopMotors}
-          className="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          disabled={!roverId}
-        >
-          Stop Motors
-        </button>
-      </div>
-
-      <div className="mt-6 space-y-2">
-        <p className="text-xs uppercase tracking-[0.3em] text-slate-500">OI Modes</p>
-        <div className="flex flex-wrap gap-2">
-          {oiButtons.map((btn) => (
-            <button
-              key={btn.key}
-              type="button"
-              onClick={() => sendOiCommand(btn.key)}
-              disabled={!roverId}
-              className="rounded-lg border border-slate-700 px-3 py-1 text-sm font-semibold text-slate-200 disabled:opacity-50"
-            >
-              {btn.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <p className="mt-4 text-xs text-slate-500">
-        Sensor streaming starts automatically after each OI change. Keep this tab focused while driving.
-      </p>
-    </section>
+    <span
+      className={`rounded-full border px-2 py-0.5 text-[0.55rem] uppercase tracking-[0.3em] ${
+        active
+          ? 'border-emerald-400 bg-emerald-500/10 text-emerald-200'
+          : 'border-slate-700 bg-slate-900 text-slate-500'
+      }`}
+    >
+      {label}
+    </span>
   );
 }

webui/src/components/MobileControls.jsx

@@ -0,0 +1,128 @@
+import { useCallback } from 'react';
+import { Joystick } from 'react-joystick-component';
+import { useDriveControl } from '../context/DriveControlContext.jsx';
+
+function clampUnit(value = 0) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return 0;
+  return Math.max(-1, Math.min(1, value));
+}
+
+function MobileJoystick() {
+  const { roverId, driveWithVector, stopMotors } = useDriveControl();
+  const disabled = !roverId;
+
+  const handleMove = useCallback(
+    (event = {}) => {
+      if (disabled) return;
+      const x = clampUnit(event.x ?? 0);
+      const y = clampUnit(event.y ?? 0);
+      driveWithVector({ x, y });
+    },
+    [disabled, driveWithVector],
+  );
+
+  const handleStop = useCallback(() => {
+    if (disabled) return;
+    driveWithVector({ x: 0, y: 0 });
+  }, [disabled, driveWithVector]);
+
+  return (
+    <section className="rounded-lg border border-slate-900 bg-slate-950/70 p-2 text-[0.8rem] text-slate-100">
+      <div className="text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">Joystick</div>
+      <div className="mt-2 flex items-center justify-center">
+        <Joystick
+          size={120}
+          baseColor="#0f172a"
+          stickColor="#38bdf8"
+          throttle={75}
+          move={handleMove}
+          stop={handleStop}
+          disabled={disabled}
+        />
+      </div>
+      <p className="mt-2 text-[0.65rem] text-slate-400">
+        Drag to drive. Release to stop sending drive commands.
+      </p>
+      <button
+        type="button"
+        onClick={stopMotors}
+        disabled={disabled}
+        className="mt-2 w-full rounded border border-slate-800 bg-black/40 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-200 disabled:opacity-40"
+      >
+        Panic Stop
+      </button>
+    </section>
+  );
+}
+
+function AuxMotorControls() {
+  const { roverId, setAuxMotors } = useDriveControl();
+  const disabled = !roverId;
+
+  const runAllForward = () => {
+    if (disabled) return;
+    setAuxMotors({ main: 127, side: 127, vacuum: 127 });
+  };
+
+  const stopAll = () => {
+    if (disabled) return;
+    setAuxMotors({ main: 0, side: 0, vacuum: 0 });
+  };
+
+  const auxButtons = [
+    { label: 'Main +', values: { main: 127 } },
+    { label: 'Main -', values: { main: -127 } },
+    { label: 'Side +', values: { side: 127 } },
+    { label: 'Side -', values: { side: -127 } },
+    { label: 'Vacuum Max', values: { vacuum: 127 } },
+    { label: 'Vacuum Off', values: { vacuum: 0 } },
+  ];
+
+  return (
+    <section className="rounded-lg border border-slate-900 bg-slate-950/70 p-2 text-[0.8rem] text-slate-100">
+      <div className="text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">Aux Motors</div>
+      <div className="mt-2 flex flex-wrap gap-1">
+        <button
+          type="button"
+          onClick={runAllForward}
+          disabled={disabled}
+          className="flex-1 rounded border border-emerald-500/40 bg-emerald-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-emerald-200 disabled:opacity-40"
+        >
+          All forward
+        </button>
+        <button
+          type="button"
+          onClick={stopAll}
+          disabled={disabled}
+          className="flex-1 rounded border border-slate-800 bg-black/40 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-slate-200 disabled:opacity-40"
+        >
+          Stop all
+        </button>
+      </div>
+      <div className="mt-2 grid grid-cols-2 gap-1 text-[0.7rem]">
+        {auxButtons.map((btn) => (
+          <button
+            key={btn.label}
+            type="button"
+            onClick={() => !disabled && setAuxMotors(btn.values)}
+            disabled={disabled}
+            className="rounded border border-slate-800 bg-black/30 py-1 uppercase tracking-[0.2em] text-slate-200 disabled:opacity-30"
+          >
+            {btn.label}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default function MobileControlsStack() {
+  return (
+    <div className="flex flex-col gap-2">
+      <MobileJoystick />
+      <AuxMotorControls />
+    </div>
+  );
+}
+
+export { MobileJoystick, AuxMotorControls };

webui/src/components/TelemetryPanel.jsx

@@ -1,56 +1,56 @@
-import { useMemo } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
 
-function formatEntries(sensors = {}) {
-  return Object.entries(sensors).map(([key, value]) => ({
-    key,
-    value: typeof value === 'object' ? JSON.stringify(value) : value,
-  }));
+function formatMetric(value, fallback = '--') {
+  if (value == null || value === '') return fallback;
+  return value;
 }
 
 export default function TelemetryPanel() {
   const { session } = useSession();
   const roverId = session?.assignment?.roverId;
   const frame = useTelemetryFrame(roverId);
-
-  const entries = useMemo(() => formatEntries(frame?.sensors), [frame?.sensors]);
+  const sensors = frame?.sensors || {};
+  const voltage = sensors.voltageMv != null ? (sensors.voltageMv / 1000).toFixed(2) : null;
+  const current = sensors.currentMa != null ? (sensors.currentMa / 1000).toFixed(2) : null;
+  const charge = sensors.batteryChargeMah;
+  const capacity = sensors.batteryCapacityMah;
+  const updated = frame?.receivedAt ? new Date(frame.receivedAt).toLocaleTimeString() : null;
+  const rawSnippet = frame?.raw ? (frame.raw.length > 80 ? `${frame.raw.slice(0, 80)}…` : frame.raw) : null;
 
   return (
-    <section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <header className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Telemetry</p>
-          <h2 className="text-2xl font-semibold text-white">
-            {roverId ? `Rover ${roverId}` : 'No rover assigned'}
-          </h2>
-        </div>
-        <p className="text-sm text-slate-400">
-          {frame?.receivedAt ? `Updated ${new Date(frame.receivedAt).toLocaleTimeString()}` : 'Waiting…'}
-        </p>
-      </header>
-      {entries.length === 0 ? (
-        <p className="mt-4 text-sm text-slate-400">
-          {roverId ? 'No sensor frames yet.' : 'Assignment required to view sensors.'}
-        </p>
+    <section className="rounded-lg border border-slate-900 bg-slate-950/70 p-2 text-[0.8rem] text-slate-200">
+      <div className="flex items-center justify-between text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">
+        <span>Telemetry</span>
+        <span>{updated ? `Updated ${updated}` : 'waiting'}</span>
+      </div>
+      {!roverId ? (
+        <p className="mt-2 text-[0.75rem] text-slate-400">Assignment required to view sensors.</p>
+      ) : !frame ? (
+        <p className="mt-2 text-[0.75rem] text-slate-400">No sensor frames yet.</p>
       ) : (
-        <dl className="mt-4 grid gap-3 text-sm text-slate-100">
-          {entries.map(({ key, value }) => (
-            <div key={key} className="flex justify-between gap-6">
-              <dt className="text-slate-500">{key}</dt>
-              <dd className="text-right font-semibold text-white">{value}</dd>
-            </div>
-          ))}
-        </dl>
-      )}
-      {frame?.raw && (
-        <div className="mt-6">
-          <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Raw frame</p>
-          <pre className="mt-2 max-h-32 overflow-y-auto rounded-xl bg-slate-950/60 p-3 text-xs text-lime-300">
-            {frame.raw}
-          </pre>
+        <div className="mt-2 space-y-2">
+          <Metric label="Charge" value={formatMetric(charge != null && capacity != null ? `${charge}/${capacity} mAh` : null)} />
+          <Metric label="Charging" value={formatMetric(sensors.chargingState?.label)} />
+          <Metric label="OI Mode" value={formatMetric(sensors.oiMode?.label)} />
+          <Metric label="Voltage" value={formatMetric(voltage ? `${voltage} V` : null)} />
+          <Metric label="Current" value={formatMetric(current ? `${current} A` : null)} />
         </div>
       )}
+      {rawSnippet && (
+        <pre className="mt-2 overflow-hidden rounded border border-slate-800 bg-black/60 p-1 text-[0.6rem] text-lime-300">
+          {rawSnippet}
+        </pre>
+      )}
     </section>
   );
 }
+
+function Metric({ label, value }) {
+  return (
+    <div className="flex items-center justify-between text-[0.75rem]">
+      <span className="text-slate-500">{label}</span>
+      <span className="font-semibold text-slate-200">{value}</span>
+    </div>
+  );
+}

webui/src/components/VideoTile.jsx

@@ -4,7 +4,7 @@ import { WhepPlayer } from '../lib/whepPlayer.js';
 const RESTART_DELAY_MS = 2000;
 const UNMUTE_RETRY_MS = 3000;
 
-export default function VideoTile({ sessionInfo, label, forceMute = false }) {
+export default function VideoTile({ sessionInfo, label, forceMute = false, telemetryFrame, batteryConfig }) {
   const videoRef = useRef(null);
   const restartTimer = useRef(null);
   const unmuteTimer = useRef(null);
@@ -12,6 +12,13 @@ export default function VideoTile({ sessionInfo, label, forceMute = false }) {
   const [detail, setDetail] = useState(null);
   const [restartToken, setRestartToken] = useState(0);
   const [muted, setMuted] = useState(true);
+  const sensors = telemetryFrame?.sensors;
+  const batteryCharge = sensors?.batteryChargeMah ?? null;
+  const batteryCapacity = sensors?.batteryCapacityMah ?? null;
+  const wheelOvercurrents = sensors?.wheelOvercurrents || null;
+  const overcurrentActive = Boolean(
+    wheelOvercurrents && Object.values(wheelOvercurrents).some((value) => Boolean(value)),
+  );
 
   const scheduleRestart = useCallback(() => {
     clearTimeout(restartTimer.current);
@@ -22,19 +29,31 @@ export default function VideoTile({ sessionInfo, label, forceMute = false }) {
     (delay = 0) => {
       if (forceMute) return;
       clearTimeout(unmuteTimer.current);
-      unmuteTimer.current = setTimeout(async () => {
+
+      const scheduleRetry = () => {
+        clearTimeout(unmuteTimer.current);
+        unmuteTimer.current = setTimeout(() => {
+          if (!forceMute) {
+            tryPlay();
+          }
+        }, UNMUTE_RETRY_MS);
+      };
+
+      const tryPlay = async () => {
         const video = videoRef.current;
         if (!video) return;
         try {
           video.muted = false;
           await video.play();
           setMuted(false);
-        } catch (err) {
+        } catch {
           video.muted = true;
           setMuted(true);
-          attemptUnmute(UNMUTE_RETRY_MS);
+          scheduleRetry();
         }
-      }, delay);
+      };
+
+      unmuteTimer.current = setTimeout(tryPlay, delay);
     },
     [forceMute],
   );
@@ -55,13 +74,11 @@ export default function VideoTile({ sessionInfo, label, forceMute = false }) {
 
   useEffect(() => {
     if (!sessionInfo?.url || !videoRef.current) {
-      setStatus('waiting');
-      setDetail(null);
       return undefined;
     }
     let active = true;
     let player;
-    setMuted(true);
+    const resetMuteId = setTimeout(() => setMuted(true), 0);
     const handleStatus = (nextStatus, info) => {
       if (!active) return;
       setStatus(nextStatus);
@@ -87,6 +104,7 @@ export default function VideoTile({ sessionInfo, label, forceMute = false }) {
 
     return () => {
       active = false;
+      clearTimeout(resetMuteId);
       player?.stop();
     };
   }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart]);
@@ -97,16 +115,17 @@ export default function VideoTile({ sessionInfo, label, forceMute = false }) {
     }
   }, [status, sessionInfo?.url, scheduleRestart]);
 
-  const renderedStatus =
-    status === 'error'
-      ? `Error: ${detail || 'unknown'}`
-      : detail
-      ? `${status} (${detail})`
-      : status;
+  const renderedStatus = !sessionInfo?.url
+    ? 'waiting'
+    : status === 'error'
+    ? `Error: ${detail || 'unknown'}`
+    : detail
+    ? `${status} (${detail})`
+    : status;
 
   return (
-    <div className="space-y-2">
-      <div className="w-full overflow-hidden rounded-2xl border border-slate-800 bg-black">
+    <div className="space-y-1">
+      <div className="relative w-full overflow-hidden rounded-lg border border-slate-900 bg-black">
         <video
           ref={videoRef}
           muted={forceMute || muted}
@@ -115,10 +134,121 @@ export default function VideoTile({ sessionInfo, label, forceMute = false }) {
           controls={false}
           className="h-full w-full object-contain"
         />
+        <HudOverlay frame={telemetryFrame} />
+        <OvercurrentOverlay active={overcurrentActive} />
       </div>
-      <div className="text-xs text-slate-400">
-        <span className="font-semibold text-slate-200">{label}</span>{' '}
-        <span>{renderedStatus}</span>
+      <BatteryBar
+        charge={batteryCharge}
+        capacity={batteryCapacity}
+        config={batteryConfig}
+      />
+      <div className="text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">
+        <span className="text-slate-200">{label}</span> · {renderedStatus}
+      </div>
+    </div>
+  );
+}
+
+function BatteryBar({ charge, capacity, config }) {
+  if (charge == null || !config?.full || config.warn == null) {
+    return null;
+  }
+  const span = config.full - config.warn;
+  if (span <= 0) return null;
+  const normalized = (charge - config.warn) / span;
+  const percent = Math.min(1, Math.max(0, normalized));
+  const percentDisplay = Math.round(percent * 100);
+  const depleted = normalized <= 0;
+  const urgent = config.urgent != null && charge <= config.urgent;
+  const barClass = depleted
+    ? 'bg-red-500 animate-pulse'
+    : urgent
+    ? 'bg-amber-400'
+    : 'bg-emerald-500';
+  const capText = capacity ? `${charge}/${capacity}` : `${charge}`;
+  return (
+    <div className="rounded border border-slate-900 bg-slate-950/80 p-1">
+      <div className="flex items-center justify-between text-[0.65rem] text-slate-300">
+        <span>Battery</span>
+        <span>{capText} mAh</span>
+      </div>
+      <div className="mt-1 h-2 w-full rounded-full bg-slate-800">
+        <div
+          className={`h-full rounded-full transition-[width] ${barClass}`}
+          style={{ width: `${percentDisplay}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function HudOverlay({ frame }) {
+  const sensors = frame?.sensors;
+  const bumps = sensors?.bumpsAndWheelDrops || {};
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), 150);
+    return () => clearInterval(interval);
+  }, []);
+
+  const pulse = frame?.receivedAt ? now - frame.receivedAt < 200 : false;
+
+  const bumperBadges = [
+    { label: 'B-L', active: bumps.bumpLeft },
+    { label: 'B-R', active: bumps.bumpRight },
+  ];
+  const wheelBadges = [
+    { label: 'DROP L', active: bumps.wheelDropLeft },
+    { label: 'DROP R', active: bumps.wheelDropRight },
+  ];
+
+  return (
+    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between p-2 text-[0.6rem] uppercase tracking-[0.3em] text-slate-200">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <span
+            className={`h-2 w-2 rounded-full ${
+              pulse ? 'bg-emerald-300 shadow-[0_0_6px_rgba(16,185,129,0.9)]' : 'bg-slate-700'
+            }`}
+          ></span>
+          <span className="text-slate-400">SENSORS</span>
+        </div>
+        <div className="flex gap-1">
+          {bumperBadges.map((badge) => (
+            <HudBadge key={badge.label} label={badge.label} active={badge.active} />
+          ))}
+        </div>
+      </div>
+      <div className="flex justify-end gap-1">
+        {wheelBadges.map((badge) => (
+          <HudBadge key={badge.label} label={badge.label} active={badge.active} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function HudBadge({ label, active }) {
+  return (
+    <span
+      className={`rounded-sm border px-1 py-0.5 text-[0.55rem] ${
+        active
+          ? 'border-emerald-400 bg-emerald-500/10 text-emerald-200'
+          : 'border-slate-700 bg-black/40 text-slate-500'
+      }`}
+    >
+      {label}
+    </span>
+  );
+}
+
+function OvercurrentOverlay({ active }) {
+  if (!active) return null;
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-red-900/60">
+      <div className="text-center text-lg font-black uppercase tracking-[0.6em] text-red-100 animate-pulse">
+        Overcurrent
       </div>
     </div>
   );