i give up lol

dist/dummy2.yml

@@ -1,6 +1,6 @@
 #configuration for roverd
 name: dummy2
-serverUrl: ws://127.0.0.1:8080/rover
+serverUrl: ws://192.168.0.84:8080/rover
 serial:
   device: /dev/ttyS0
   baud: 115200
@@ -18,5 +18,3 @@ media:
   service: mediamtx.service
   healthUrl: http://127.0.0.1:9997/v3/paths/list
   healthInterval: 30s
-nightVision:
-  enabled: false

dist/dummy3.yml

@@ -1,22 +0,0 @@
-#configuration for roverd
-name: dummy3
-serverUrl: ws://127.0.0.1:8080/rover
-serial:
-  device: /dev/ttyS0
-  baud: 115200
-brc:
-  gpioPin: 25
-  pulseEvery: 1m
-  pulseWidth: 1s
-battery:
-  full: 2068
-  warn: 1700
-  urgent: 1650
-maxWheelSpeed: 350
-media:
-  manage: false
-  service: mediamtx.service
-  healthUrl: http://127.0.0.1:9997/v3/paths/list
-  healthInterval: 30s
-nightVision:
-  enabled: false

pi/bin/video-publisher.sh

@@ -1,7 +1,6 @@
 #!/usr/bin/env bash
 set -euo pipefail
-
+# Disable history expansion so PUBLISH_URL values with "!" are safe when sourcing env files.
-# Keep history expansion off so values containing "!" are safe.
 set +H
 
 ENV_FILE="${VIDEO_ENV_FILE:-/var/lib/roverd/video.env}"
@@ -11,76 +10,17 @@ if [[ ! -f "$ENV_FILE" ]]; then
 	exit 1
 fi
 
-# Load KEY=VALUE pairs from ENV_FILE WITHOUT evaluating shell metacharacters.
+# shellcheck disable=SC1090
-# This makes URLs containing characters like '&' and '#!' safe without requiring quoting.
+source "$ENV_FILE"
-load_env_file() {
-  local content=""
-
-  if [[ -r "$ENV_FILE" ]]; then
-    content="$(cat "$ENV_FILE")"
-  elif command -v sudo >/dev/null 2>&1; then
-    # Try to read via sudo without prompting (useful when the service runs as an unprivileged user)
-    content="$(sudo -n cat "$ENV_FILE" 2>/dev/null || true)"
-  fi
-
-  if [[ -z "$content" ]]; then
-    echo "Cannot read ${ENV_FILE} (permission denied). Run as a user that can read it, or allow sudo -n for cat." >&2
-    exit 1
-  fi
-
-  local line key val
-  while IFS= read -r line || [[ -n "$line" ]]; do
-    # Skip blank lines and full-line comments.
-    [[ "$line" =~ ^[[:space:]]*$ ]] && continue
-    [[ "$line" =~ ^[[:space:]]*# ]] && continue
-
-    # Support optional leading 'export '
-    if [[ "$line" =~ ^[[:space:]]*export[[:space:]]+([A-Za-z_][A-Za-z0-9_]*)=(.*)$ ]]; then
-      key="${BASH_REMATCH[1]}"
-      val="${BASH_REMATCH[2]}"
-    elif [[ "$line" =~ ^[[:space:]]*([A-Za-z_][A-Za-z0-9_]*)=(.*)$ ]]; then
-      key="${BASH_REMATCH[1]}"
-      val="${BASH_REMATCH[2]}"
-    else
-      # Ignore anything that isn't a simple assignment.
-      continue
-    fi
-
-    # Trim leading/trailing whitespace in value.
-    val="${val#${val%%[![:space:]]*}}"
-    val="${val%${val##*[![:space:]]}}"
-
-    # If value is wrapped in matching single or double quotes, unwrap.
-    if [[ "$val" =~ ^\".*\"$ ]]; then
-      val="${val:1:${#val}-2}"
-    elif [[ "$val" =~ ^\'.*\'$ ]]; then
-      val="${val:1:${#val}-2}"
-    fi
-
-    # Assign without evaluation.
-    printf -v "$key" '%s' "$val"
-    export "$key"
-  done <<< "$content"
-}
-
-load_env_file
 : "${PUBLISH_URL:?PUBLISH_URL not set in ${ENV_FILE}}"
 
-# Defaults tuned for OV5647: use 4:3 output and force the common 2x2 binned full-FOV mode.
+VIDEO_WIDTH="${VIDEO_WIDTH:-1920}"
-VIDEO_WIDTH="640"
+VIDEO_HEIGHT="${VIDEO_HEIGHT:-1080}"
-VIDEO_HEIGHT="480"
+VIDEO_FPS="${VIDEO_FPS:-30}"
-VIDEO_FPS="30"
 VIDEO_BITRATE="${VIDEO_BITRATE:-3000000}"
-VIDEO_SENSOR_MODE="${VIDEO_SENSOR_MODE:-1296:972}"
-
 # Flip the camera 180deg (supported by rpicam-vid/libcamera-vid)
 FLIP_ARGS=(--rotation 180)
 
-MODE_ARGS=()
-if [[ -n "${VIDEO_SENSOR_MODE}" ]]; then
-  MODE_ARGS=(--mode "${VIDEO_SENSOR_MODE}")
-fi
-
 if [[ -n "${LIBCAMERA_BIN:-}" ]]; then
 	LIBCAMERA_BIN_PATH="$LIBCAMERA_BIN"
 elif command -v rpicam-vid >/dev/null 2>&1; then
@@ -105,7 +45,6 @@ run_pipeline() {
 	"${LIBCAMERA_BIN_PATH}" \
 		--inline \
 		--timeout 0 \
-    "${MODE_ARGS[@]}" \
 		--width "${VIDEO_WIDTH}" \
 		--height "${VIDEO_HEIGHT}" \
 		"${FLIP_ARGS[@]}" \

pi/install_roverd.sh

@@ -215,6 +215,9 @@ cat > /var/lib/roverd/video.env <<'ENV'
 # Managed by roverd; placeholder values will be overwritten at runtime.
 PUBLISH_URL=srt://192.168.0.86:9000?streamid=#!::r=CHANGE_ME,m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316
 AUDIO_PUBLISH_URL=srt://192.168.0.86:9000?streamid=#!::r=CHANGE_ME-audio,m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316
+VIDEO_WIDTH=1280
+VIDEO_HEIGHT=720
+VIDEO_FPS=30
 VIDEO_BITRATE=2000000
 AUDIO_ENABLE=0
 AUDIO_DEVICE=hw:0,0

pi/roverd/config.go

@@ -136,6 +136,9 @@ func LoadConfig(path string) (*Config, error) {
 		Media: MediaConfig{
 			PublishPort:    9000,
 			HealthInterval: Duration{Duration: 30 * time.Second},
+			VideoWidth:     1280,
+			VideoHeight:    720,
+			VideoFPS:       30,
 			VideoBitrate:   2000000,
 		},
 		CameraServo: CameraServoConfig{
@@ -194,6 +197,15 @@ func LoadConfig(path string) (*Config, error) {
 	if cfg.Media.Manage && cfg.Media.HealthInterval.Duration <= 0 {
 		cfg.Media.HealthInterval = Duration{Duration: 30 * time.Second}
 	}
+	if cfg.Media.VideoWidth <= 0 {
+		cfg.Media.VideoWidth = 1280
+	}
+	if cfg.Media.VideoHeight <= 0 {
+		cfg.Media.VideoHeight = 720
+	}
+	if cfg.Media.VideoFPS <= 0 {
+		cfg.Media.VideoFPS = 30
+	}
 	if cfg.Media.VideoBitrate <= 0 {
 		cfg.Media.VideoBitrate = 3000000
 	}

pi/roverd/media_env.go

@@ -16,7 +16,7 @@ func UpdatePublisherEnv(media MediaConfig, audio AudioConfig) error {
 	if media.AudioPublishURL == "" && audio.CaptureEnabled {
 		return fmt.Errorf("audio publishUrl missing")
 	}
-	if media.VideoWidth < 0 || media.VideoHeight < 0 || media.VideoFPS < 0 || media.VideoBitrate <= 0 {
+	if media.VideoWidth <= 0 || media.VideoHeight <= 0 || media.VideoFPS <= 0 || media.VideoBitrate <= 0 {
 		return fmt.Errorf("invalid media dimensions/bitrate")
 	}
 	if err := os.MkdirAll(filepath.Dir(publisherEnvPath), 0o755); err != nil {
@@ -27,15 +27,9 @@ func UpdatePublisherEnv(media MediaConfig, audio AudioConfig) error {
 	if audio.CaptureEnabled && media.AudioPublishURL != "" {
 		fmt.Fprintf(&buf, "AUDIO_PUBLISH_URL=%s\n", media.AudioPublishURL)
 	}
-	if media.VideoWidth > 0 {
 	fmt.Fprintf(&buf, "VIDEO_WIDTH=%d\n", media.VideoWidth)
-	}
-	if media.VideoHeight > 0 {
 	fmt.Fprintf(&buf, "VIDEO_HEIGHT=%d\n", media.VideoHeight)
-	}
-	if media.VideoFPS > 0 {
 	fmt.Fprintf(&buf, "VIDEO_FPS=%d\n", media.VideoFPS)
-	}
 	fmt.Fprintf(&buf, "VIDEO_BITRATE=%d\n", media.VideoBitrate)
 	audioDevice := audio.CaptureDevice
 	if audioDevice == "" || audioDevice == "rovermic" {

pi/roverd/roverd.sample.yaml

@@ -17,6 +17,9 @@ maxWheelSpeed: 350
 media:
   publishUrl: srt://192.168.0.86:9000?streamid=#!::r=roomba-alpha,m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316
   publishPort: 9000
+  videoWidth: 1280
+  videoHeight: 720
+  videoFps: 30
   videoBitrate: 2000000
   manage: true
   service: video-publisher.service

server/config.example.yaml

@@ -13,6 +13,15 @@ media:
   #   http://<base>/<roverId>/whep
   # Example: http://192.168.0.86:8889/video
   whepBaseUrl: "http://192.168.0.86:8889/video"
+  preview:
+    enabled: false
+    codec: "av1"
+    transport: "rtsp"
+    fps: 10
+    width: 640
+    roomBitrateKbps: 200
+    roverBitrateKbps: 350
+    gopSeconds: 2
 
 homeAssistant:
   url: "http://homeassistant.local:8123"

server/index.js

@@ -30,5 +30,6 @@ require('./src/services/sessionService');
 require('./src/services/batteryManager');
 require('./src/services/replaySocketService');
 require('./src/services/replaySegmentManager');
+require('./src/services/media/previewTranscoderService');
 require('./src/services/discordBotService');
 require('./src/services/httpServer');

server/mediamtx/mediamtx.yml

@@ -8,7 +8,7 @@ metricsAddress: 0.0.0.0:9998
 pprof: no
 pprofAddress: 127.0.0.1:9999
 
-rtsp: no
+rtsp: yes
 rtmp: no
 hls: no
 

server/public/index.html

@@ -11,8 +11,8 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
     <title>Multi Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-BxYZsNCL.js"></script>
+    <script type="module" crossorigin src="/assets/index-B7raLs13.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BjSf29Wv.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Fk2eqSbH.css">
   </head>
   <body>
     <div id="root"></div>

server/src/services/chatService.js

@@ -158,7 +158,7 @@ function maybeSpeak(socket, message, ttsOptions) {
   const audio = record?.meta?.audio || {};
   const ttsEnabled = Boolean(audio.ttsEnabled);
   if (!ttsEnabled) return;
-  if (!roverManager.canDrive(message.roverId, socket)) return;
+  // if (!roverManager.canDrive(message.roverId, socket)) return;
   try {
     issueCommand(message.roverId, {
       type: 'tts',

server/src/services/media/previewTranscoderService.js

@@ -0,0 +1,255 @@
+const { spawn } = require('child_process');
+const EventEmitter = require('events');
+const logger = require('../../globals/logger').child('previewTranscoder');
+const { loadConfig } = require('../../helpers/configLoader');
+const roverManager = require('../roverManager');
+const { getRoomCameras, roomCameraEvents } = require('../roomCameraService');
+
+const events = new EventEmitter();
+const config = loadConfig();
+const mediaConfig = config.media || {};
+const previewConfig = mediaConfig.preview || {};
+
+const ENABLED = Boolean(previewConfig.enabled);
+const PREVIEW_CODEC = String(previewConfig.codec || 'av1').toLowerCase();
+const PREVIEW_TRANSPORT = String(previewConfig.transport || 'rtsp').toLowerCase();
+const PREVIEW_FPS = Number(previewConfig.fps || 10);
+const PREVIEW_WIDTH = Number(previewConfig.width || 640);
+const ROOM_BITRATE_KBPS = Number(previewConfig.roomBitrateKbps || 200);
+const ROVER_BITRATE_KBPS = Number(previewConfig.roverBitrateKbps || 350);
+const PRESET = Number.isFinite(previewConfig.preset) ? String(previewConfig.preset) : '8';
+const GOP_SECONDS = Number(previewConfig.gopSeconds || 2);
+const FFMPEG_BIN = previewConfig.ffmpegBin || process.env.FFMPEG_BIN || 'ffmpeg';
+
+const recorders = new Map(); // key -> { proc, source }
+let syncTimer = null;
+
+function encodeStreamId(streamId) {
+  return encodeURIComponent(streamId).replace(/%2F/g, '/');
+}
+
+function buildSrtReadUrl(streamId) {
+  return `srt://127.0.0.1:9000?streamid=read:${encodeStreamId(streamId)}`;
+}
+
+function buildSrtPublishUrl(streamId) {
+  const encoded = encodeStreamId(streamId);
+  return `srt://127.0.0.1:9000?streamid=#!::r=${encoded},m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316`;
+}
+
+function buildRtspPublishUrl(streamId) {
+  return `rtsp://127.0.0.1:8554/${streamId}`;
+}
+
+function sanitizeCodec(codec) {
+  return String(codec || '').toLowerCase().replace(/[^a-z0-9]/g, '') || 'av1';
+}
+
+function buildPreviewId(id, codec) {
+  return `${id}-preview-${sanitizeCodec(codec)}`;
+}
+
+function getRoomCameraStream(camera) {
+  if (camera.streamUrl) return camera.streamUrl;
+  const url = String(camera.url || '');
+  if (url.includes('.mjpg') || url.includes('mjpeg') || url.includes('stream')) {
+    return url;
+  }
+  return null;
+}
+
+function listSources() {
+  const rooms = getRoomCameras()
+    .map((camera) => {
+      const streamUrl = getRoomCameraStream(camera);
+      if (!streamUrl) return null;
+      const id = String(camera.id);
+      return {
+        type: 'room',
+        id,
+        label: camera.name || id,
+        inputUrl: streamUrl,
+        outputId: `room/${buildPreviewId(id, PREVIEW_CODEC)}`,
+        bitrateKbps: ROOM_BITRATE_KBPS,
+      };
+    })
+    .filter(Boolean);
+  const rovers = roverManager.getRoster().map((rover) => {
+    const id = String(rover.id);
+    return {
+      type: 'rover',
+      id,
+      label: rover.name || id,
+      inputUrl: buildSrtReadUrl(id),
+      outputId: buildPreviewId(id, PREVIEW_CODEC),
+      bitrateKbps: ROVER_BITRATE_KBPS,
+    };
+  });
+  return [...rooms, ...rovers];
+}
+
+function buildKey(source) {
+  return `${source.type}:${source.id}:${source.outputId}`;
+}
+
+function buildArgs(source) {
+  const gop = Math.max(1, Math.round(GOP_SECONDS * PREVIEW_FPS));
+  const maxrate = Math.floor(source.bitrateKbps * 1.1);
+  const bufsize = Math.max(1, source.bitrateKbps * 2);
+  const codec = PREVIEW_CODEC === 'av1' ? 'libsvtav1' : 'libx264';
+  const extraCodecArgs =
+    codec === 'libx264'
+      ? ['-tune', 'zerolatency', '-profile:v', 'baseline', '-sc_threshold', '0']
+      : [];
+  const outputUrl =
+    PREVIEW_TRANSPORT === 'rtsp' ? buildRtspPublishUrl(source.outputId) : buildSrtPublishUrl(source.outputId);
+  const outputArgs =
+    PREVIEW_TRANSPORT === 'rtsp'
+      ? ['-f', 'rtsp', '-rtsp_transport', 'tcp']
+      : ['-f', 'mpegts'];
+  return {
+    outputUrl,
+    args: [
+      '-hide_banner',
+      '-loglevel',
+      'info',
+    '-fflags',
+    'nobuffer',
+    '-flags',
+    'low_delay',
+    '-i',
+    source.inputUrl,
+    '-an',
+    '-vf',
+    `fps=${PREVIEW_FPS},scale=${PREVIEW_WIDTH}:-1`,
+    '-c:v',
+    codec,
+    '-preset',
+    PRESET,
+    ...extraCodecArgs,
+    '-g',
+    String(gop),
+    '-keyint_min',
+    String(gop),
+    '-b:v',
+    `${source.bitrateKbps}k`,
+    '-maxrate',
+    `${maxrate}k`,
+    '-bufsize',
+    `${bufsize}k`,
+    '-pix_fmt',
+    'yuv420p',
+      ...outputArgs,
+      outputUrl,
+    ],
+  };
+}
+
+function spawnRecorder(source) {
+  const key = buildKey(source);
+  if (recorders.has(key)) return;
+  const { args, outputUrl } = buildArgs(source);
+  logger.info('Preview transcoder starting', {
+    key,
+    transport: PREVIEW_TRANSPORT,
+    codec: PREVIEW_CODEC,
+    inputUrl: source.inputUrl,
+    outputUrl,
+  });
+  const proc = spawn(FFMPEG_BIN, args, { stdio: ['ignore', 'ignore', 'pipe'] });
+  const stderrChunks = [];
+  let stderrSize = 0;
+  proc.stderr.on('data', (chunk) => {
+    if (!chunk || stderrSize > 8192) return;
+    stderrChunks.push(chunk);
+    stderrSize += chunk.length;
+  });
+  recorders.set(key, { proc, source });
+  proc.on('exit', (code, signal) => {
+    recorders.delete(key);
+    const stderrBuffer = stderrChunks.length ? Buffer.concat(stderrChunks) : null;
+    if (stderrBuffer && stderrBuffer.length) {
+      const preview = stderrBuffer.toString('utf8', 0, 600).trim();
+      logger.warn('Preview transcoder stderr', {
+        key,
+        stderrBytes: stderrBuffer.length,
+        stderrPreview: preview || '<non-utf8>',
+      });
+    } else {
+      logger.warn('Preview transcoder stderr', { key, stderrBytes: 0 });
+    }
+    if (!ENABLED) return;
+    const delay = 2000;
+    logger.warn('Preview transcoder exited; restarting', { key, code, signal });
+    setTimeout(() => {
+      if (!recorders.has(key) && ENABLED) {
+        spawnRecorder(source);
+      }
+    }, delay);
+  });
+  events.emit('spawn', { key, source });
+}
+
+function stopRecorder(key) {
+  const entry = recorders.get(key);
+  if (!entry) return;
+  entry.proc.kill('SIGTERM');
+  recorders.delete(key);
+  events.emit('stop', { key, source: entry.source });
+}
+
+function syncRecorders() {
+  const sources = listSources();
+  const desiredKeys = new Set();
+  sources.forEach((source) => {
+    const key = buildKey(source);
+    desiredKeys.add(key);
+    if (!recorders.has(key)) {
+      spawnRecorder(source);
+    }
+  });
+  Array.from(recorders.keys()).forEach((key) => {
+    if (!desiredKeys.has(key)) {
+      stopRecorder(key);
+    }
+  });
+  logger.info('Preview transcoders synced', { total: desiredKeys.size });
+}
+
+function start() {
+  if (!ENABLED) {
+    logger.info('Preview transcoders disabled');
+    return;
+  }
+  syncRecorders();
+  if (!syncTimer) {
+    syncTimer = setInterval(syncRecorders, 10000);
+  }
+}
+
+function stop() {
+  if (syncTimer) {
+    clearInterval(syncTimer);
+    syncTimer = null;
+  }
+  Array.from(recorders.keys()).forEach((key) => stopRecorder(key));
+}
+
+roverManager.managerEvents.on('rover', () => {
+  if (ENABLED) {
+    syncRecorders();
+  }
+});
+roomCameraEvents.on('update', () => {
+  if (ENABLED) {
+    syncRecorders();
+  }
+});
+
+start();
+
+module.exports = {
+  previewEvents: events,
+  syncPreviewTranscoders: syncRecorders,
+  stopPreviewTranscoders: stop,
+};

server/src/services/roverManager.js

@@ -476,13 +476,7 @@ function isDriver(roverId, socket) {
 }
 
 function canDrive(roverId, socket) {
-  if (isAdmin(socket)) {
+  return turnService.canDrive(roverId, socket) || isAdmin(socket);
-    return true;
-  }
-  if (!socket || !isDriver(roverId, socket)) {
-    return false;
-  }
-  return turnService.canDrive(roverId, socket);
 }
 
 function getRoversForSocket(socketId) {
@@ -577,9 +571,6 @@ io.on('connection', (socket) => {
       if (socket.data?.role === 'spectator') {
         throw new Error('Spectators cannot drive');
       }
-      if ((getMode() === MODES.ADMIN || getMode() === MODES.LOCKDOWN) && !isAdmin(socket)) {
-        throw new Error('Admins only');
-      }
       const targetId = roverId || Array.from(rovers.keys())[0];
       if (!targetId) {
         throw new Error('No rovers available');
@@ -591,9 +582,8 @@ io.on('connection', (socket) => {
           throw new Error(message || 'Switch denied');
         }
       }
-      const forceAllowed = Boolean(force) && isAdmin(socket);
+      logger.info('Request control', socket.id, targetId, { force });
-      logger.info('Request control', socket.id, targetId, { force: forceAllowed });
+      requestControl(targetId, socket, { force: Boolean(force), allowUser: true });
-      requestControl(targetId, socket, { force: forceAllowed, allowUser: true });
       previousJoined.forEach((rid) => {
         if (rid !== targetId) {
           releaseControl(rid, socket);

server/src/services/videoAuthService.js

@@ -46,7 +46,11 @@ function extractStreamInfo(path) {
   const remaining = segments.slice(start, end);
   if (remaining.length === 1) {
     const rawId = remaining[0] || '';
-    const baseId = rawId.endsWith('-audio') ? rawId.slice(0, -6) : rawId;
+    let baseId = rawId.endsWith('-audio') ? rawId.slice(0, -6) : rawId;
+    const previewMatch = baseId.match(/^(.*)-preview-[a-z0-9]+$/);
+    if (previewMatch) {
+      baseId = previewMatch[1];
+    }
     return { type: 'rover', id: rawId, baseId };
   }
   if (remaining.length === 2 && remaining[0] === 'room') {

server/src/services/videoSocketService.js

@@ -4,6 +4,7 @@ const { getMode, MODES } = require('./modeManager');
 const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
 const videoSessions = require('./videoSessions');
 const roverManager = require('./roverManager');
+const { getRoomCamera } = require('./roomCameraService');
 const { loadConfig } = require('../helpers/configLoader');
 
 const config = loadConfig();
@@ -36,6 +37,17 @@ function buildWhepUrlForSource(source) {
   return `${cleanBase}/${segments.join('/')}/whep`;
 }
 
+function sanitizeCodec(codec) {
+  return String(codec || '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, '');
+}
+
+function buildPreviewId(id, codec) {
+  const cleanCodec = sanitizeCodec(codec) || 'av1';
+  return `${id}-preview-${cleanCodec}`;
+}
+
 function passesMode(socket) {
   const mode = getMode();
   if (mode === MODES.LOCKDOWN) {
@@ -65,14 +77,21 @@ function canViewRoomCamera(socket) {
 
 function normalizeRequest(payload = {}) {
   if (!payload) return null;
+  const preview = Boolean(payload.preview || payload.mode === 'preview');
+  const codec = payload.codec ? String(payload.codec) : null;
   if (payload.type && payload.id) {
-    return { type: payload.type, id: String(payload.id) };
+    return {
+      type: payload.type,
+      id: String(payload.id),
+      preview,
+      codec,
+    };
   }
   if (payload.roverId) {
-    return { type: 'rover', id: String(payload.roverId) };
+    return { type: 'rover', id: String(payload.roverId), preview, codec };
   }
   if (payload.roomCameraId) {
-    return { type: 'room', id: String(payload.roomCameraId) };
+    return { type: 'room', id: String(payload.roomCameraId), preview, codec };
   }
   return null;
 }
@@ -93,16 +112,30 @@ io.on('connection', (socket) => {
           throw new Error('Not authorized for video');
         }
       } else if (target.type === 'room') {
+        if (!target.preview) {
           throw new Error('Room cameras now use the snapshot feed');
+        }
+        if (!getRoomCamera(target.id)) {
+          throw new Error('Room camera not found');
+        }
       } else {
         throw new Error('Unsupported video source');
       }
-      const url = buildWhepUrlForSource(target);
+      const requestId = target.preview ? buildPreviewId(target.id, target.codec) : target.id;
+      const requestTarget = { ...target, id: requestId };
+      const url = buildWhepUrlForSource(requestTarget);
       if (!url) {
         throw new Error('Server video base URL missing');
       }
-      const sessionId = videoSessions.createSession(socket, target);
+      const sessionId = videoSessions.createSession(socket, requestTarget);
-      cb({ url, token: sessionId, type: target.type, id: target.id });
+      cb({
+        url,
+        token: sessionId,
+        type: requestTarget.type,
+        id: requestTarget.id,
+        preview: Boolean(target.preview),
+        codec: target.codec || null,
+      });
     } catch (err) {
       logger.warn('video request failed: %s', err.message);
       cb({ error: err.message });

webui/src/App.jsx

@@ -61,9 +61,16 @@ function useLayoutMode() {
 function DesktopLayout({ layout, onOpenHelpOverlay }) {
   return (
     <div className="flex h-full gap-0.5 overflow-hidden">
-      <div className="flex min-w-0 flex-[1.22] flex-col gap-0.5 overflow-y-auto pr-0.5">
+      <div className="flex min-w-0 flex-[1.8] flex-col gap-0.5 overflow-y-auto pr-0.5">
         <DriverVideoPanel />
-        <TelemetryPanel />
+        <div className="grid h-52 grid-cols-2 gap-0.5">
+          <div className="h-full min-h-0">
+            <UserListPanel fillHeight />
+          </div>
+          <div className="h-full min-h-0">
+            <ChatPanel fillHeight />
+          </div>
+        </div>
         <LogPanel />
       </div>
       <div className="flex min-w-0 flex-1 flex-col gap-0.5 overflow-y-auto">

webui/src/components/AlertFeed.jsx

@@ -11,7 +11,7 @@ function buildKey(alert) {
   return `${alert.title || 'alert'}-${alert.message}`;
 }
 
-export default function AlertFeed({ scale = 1 }) {
+export default function AlertFeed() {
   const { alerts } = useSession();
   const [now, setNow] = useState(() => Date.now());
   const latest = useMemo(() => alerts.slice(-3).map((alert) => ({ alert, key: buildKey(alert) })), [alerts]);
@@ -31,20 +31,8 @@ export default function AlertFeed({ scale = 1 }) {
 
   if (!visible.length) return null;
 
-  const containerStyle =
-    scale === 1
-      ? undefined
-      : {
-          transform: `translateX(-50%) scale(${scale})`,
-          transformOrigin: 'top center',
-        };
-  const containerClass =
-    scale === 1
-      ? 'pointer-events-none fixed top-0.5 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-0.5'
-      : 'pointer-events-none fixed top-0.5 left-1/2 z-50 flex flex-col gap-0.5';
-
   return (
-    <div className={containerClass} style={containerStyle}>
+    <div className="pointer-events-none fixed top-0.5 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-0.5">
       {visible.map((toast) => (
         <AlertToast key={toast.key} alert={toast.alert} />
       ))}

webui/src/components/ChatMessageRow.jsx

@@ -88,7 +88,7 @@ export default function ChatMessageRow({ message }) {
         {displayName(message)}
       </span>
       {message.roverId && (
-        <span className="rounded bg-slate-800 px-1 text-[0.7rem]">{message.roverId}</span>
+        <span className="rounded bg-slate-800 px-1 text-[0.7rem]">rover {message.roverId}</span>
       )}
       <span className="text-slate-100 break-words leading-tight whitespace-pre-wrap">{message.text}</span>
       <span className="absolute bottom-0.5 right-1 text-[0.65rem] text-slate-400/60">

webui/src/components/ControlSummary.jsx

@@ -5,6 +5,7 @@ import { useControlSystem } from '../controls/index.js';
 import { formatKeyLabel } from '../controls/keymapUtils.js';
 import TopDownMap from './TopDownMap.jsx';
 import RoverRoster from './RoverRoster.jsx';
+import ReplaySourcesPanel from './ReplaySourcesPanel.jsx';
 import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
 
 export function RoverRosterPanel({ title = 'Rovers' }) {
@@ -45,7 +46,7 @@ export function RoverRosterPanel({ title = 'Rovers' }) {
   );
 }
 
-export default function ControlSummary() {
+export default function ControlSummary({ showRoster = true }) {
   const {
     state: { roverId, keymap },
   } = useControlSystem();
@@ -56,7 +57,7 @@ export default function ControlSummary() {
 
   return (
     <section className="panel-section">
-      <div className="grid items-stretch gap-1 md:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] md:min-h-[18rem]">
+      <div className="grid items-stretch gap-1 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] md:min-h-[22rem]">
         <div className="flex h-full w-full items-stretch justify-center">
           <div className="aspect-square h-full w-full">
             <TopDownMap sensors={sensors} />
@@ -69,11 +70,19 @@ export default function ControlSummary() {
           {!hideInlineControls ? <InlineCameraTilt keymap={keymap} /> : null}
         </div>
       </div>
+      {showRoster ? (
+        <div className="grid gap-0.5 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
+          <div>
+            <ReplaySourcesPanel />
+          </div>
+          <RoverRosterPanel />
+        </div>
+      ) : null}
     </section>
   );
 }
 
-export function InlineCameraTilt({ keymap }) {
+function InlineCameraTilt({ keymap }) {
   const {
     state: { roverId, camera },
     actions: { setServoAngle },

webui/src/components/DiscordInviteButton.jsx

@@ -1,7 +1,7 @@
 import { useSession } from "../context/SessionContext";
 import { FaDiscord } from "react-icons/fa";
 
-export default function DiscordInviteButton({ text = "Join our Discord!", className = "" }) {
+export default function DiscordInviteButton({text = "Join our Discord!"}) {
   const { session } = useSession();
   const discordInvite = session?.discord?.invite || null;
 
@@ -12,7 +12,7 @@ export default function DiscordInviteButton({ text = "Join our Discord!", classN
       href={discordInvite}
       target="_blank"
       rel="noopener noreferrer"
-      className={`inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white rainbow-animate-bg transition justify-center ${className}`}
+      className="inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white rainbow-animate-bg transition justify-center"
     // animated rainbow backgound
     // className="inline-flex items-center px-3 py-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition"
     >

webui/src/components/DriverVideoPanel.jsx

@@ -5,6 +5,7 @@ import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useControlSystem } from '../controls/index.js';
 import VideoTile from './VideoTile.jsx';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 
 export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
   const { session } = useSession();
@@ -69,6 +70,20 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
   const sources = useVideoRequests(entries);
   const info = roverId && shouldShowVideo ? sources[roverId] : null;
   const audioInfo = roverId && hasAudio ? sources[`${roverId}-audio`] : null;
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = roverId
+    ? [
+        {
+          type: 'rover',
+          id: roverId,
+          key: `rover:${roverId}:preview:av1`,
+          preview: true,
+          codec: 'av1',
+        },
+      ]
+    : [];
+  const previewSources = useVideoRequests(previewEntries, { enabled: Boolean(roverId) && av1Supported });
+  const previewSession = roverId ? previewSources[`rover:${roverId}:preview:av1`] || null : null;
   const snapshotFeeds = useRoverSnapshots(roverId ? [roverId] : [], {
     enabled: Boolean(roverId),
     version: session?.mode,
@@ -114,8 +129,8 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
     <section className="panel">
       {roverId ? (
         <VideoTile
-          sessionInfo={info}
+          sessionInfo={shouldShowVideo ? info : previewSession?.url ? previewSession : null}
-          videoMode={shouldShowVideo ? 'whep' : 'snapshot'}
+          videoMode={shouldShowVideo ? 'whep' : previewSession?.url ? 'whep' : 'snapshot'}
           snapshotFeed={snapshotFeed}
           audioSessionInfo={audioInfo}
           label={roverLabel}
@@ -123,7 +138,13 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
           batteryConfig={batteryConfig}
           layoutFormat={layoutFormat}
           songNote={song?.note}
-          qualityNotice={!shouldShowVideo ? 'Preview feed (low FPS) until your turn.' : null}
+          qualityNotice={
+            !shouldShowVideo
+              ? previewSession?.url
+                ? 'Preview feed (AV1) until your turn.'
+                : 'Preview feed (snapshots) until your turn.'
+              : null
+          }
           showTurnCue={turnCueVisible}
           turnTimerText={turnTimerText}
           turnSeconds={turnSeconds}
@@ -131,7 +152,7 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
           idleSkipSeconds={idleSkipSeconds}
         />
       ) : (
-        <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]">
+        <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-video">
           <p>You are not assigned to a rover.</p>
           {/* colored button to visit the spectator page */}
           <p className="mt-2">

webui/src/components/HomeAssistantControls.jsx

@@ -34,7 +34,7 @@ function EntityRow({ entity, connected, onToggle }) {
       type="button"
       onClick={() => onToggle(entity.id)}
       disabled={disableToggle}
-      className={`flex min-w-[10rem] flex-1 items-center justify-between gap-1 rounded px-1 py-0.5 text-left transition-colors ${toneStyles} disabled:opacity-60 disabled:hover:bg-inherit`}
+      className={`flex min-w-[12rem] flex-1 items-center justify-between gap-1 rounded px-1 py-0.5 text-left transition-colors ${toneStyles} disabled:opacity-60 disabled:hover:bg-inherit`}
     >
       <div className="min-w-0">
         <div className="flex items-center gap-1 text-sm">

webui/src/components/KoFiButton.jsx

@@ -1,7 +1,7 @@
 import { useSession } from "../context/SessionContext";
 import { FaCoffee } from "react-icons/fa";
 
-export default function KoFiButton({ text = "Support me on Ko-fi!", className = "" }) {
+export default function KoFiButton({ text = "Support me on Ko-fi!" }) {
   const { session } = useSession();
   const kofiLink = session?.kofi?.link || null;
 
@@ -12,7 +12,7 @@ export default function KoFiButton({ text = "Support me on Ko-fi!", className =
       href={kofiLink}
       target="_blank"
       rel="noopener noreferrer"
-      className={`inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white kofi-animate-bg transition justify-center ${className}`}
+      className="inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white kofi-animate-bg transition justify-center"
     >
       <FaCoffee className="mr-1" />
       {text}

webui/src/components/NicknameForm.jsx

@@ -31,20 +31,16 @@ export default function NicknameForm({ compact = false }) {
   }
 
   return (
-    <form className="grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-0.5" onSubmit={handleSave}>
+    <form className="flex w-full gap-0.5" onSubmit={handleSave}>
       <input
-        className="field-input flex-1 min-w-0"
+        className="field-input flex-1"
         value={nicknameInput}
         onChange={(e) => setNicknameInput(e.target.value)}
         maxLength={32}
         placeholder="Enter a nickname"
         disabled={!canSetNickname}
       />
-      <button
+      <button type="submit" disabled={!canSetNickname || saving} className="button-dark disabled:opacity-50">
-        type="submit"
-        disabled={!canSetNickname || saving}
-        className="button-dark shrink-0 whitespace-nowrap disabled:opacity-50"
-      >
         {saving ? 'Saving…' : compact ? 'Set' : 'Save'}
       </button>
     </form>

webui/src/components/ReplaySourcesPanel.jsx

@@ -16,7 +16,7 @@ function normalizeSources(list = []) {
     .filter(Boolean);
 }
 
-export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHeight = false }) {
+export default function ReplaySourcesPanel({ panelId = 'replay-sources' }) {
   const { session, triggerReplay } = useSession();
   const sources = normalizeSources(session?.replaySources || []);
   const { value: settings, save: saveSettings } = useSettingsNamespace('replaySources', {});
@@ -100,16 +100,13 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
     }
   };
 
-  const containerClass = fillHeight ? 'h-full flex flex-col' : '';
-  const listWrapClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : '';
-
   return (
-    <section className={`panel-section p-0.75 text-sm ${containerClass}`}>
+    <section className="panel-section p-0.75 text-sm">
       <header className="panel-muted flex items-center justify-between text-xs">
         <span>Replay Sources</span>
         <span>{sources.length}</span>
       </header>
-      <div className={`grid gap-0.5 md:grid-cols-2 ${listWrapClass}`}>
+      <div className="grid gap-0.5 md:grid-cols-2">
         <GroupList title="Rovers" items={grouped.rovers} selected={selected} onToggle={toggleKey} />
         <GroupList title="Room Cams" items={grouped.rooms} selected={selected} onToggle={toggleKey} />
       </div>

webui/src/components/RightPaneTabs.jsx

@@ -1,47 +1,10 @@
-import { InlineCameraTilt, RoverRosterPanel } from './ControlSummary.jsx';
+import TelemetryPanel from './TelemetryPanel.jsx';
+import ControlSummary from './ControlSummary.jsx';
 import RoomCameraPanel from './RoomCameraPanel.jsx';
 import HomeAssistantControls from './HomeAssistantControls.jsx';
 import SettingsPanel from './SettingsPanel.jsx';
 import HelpPanel from './HelpPanel.jsx';
-import ChatPanel from './ChatPanel.jsx';
-import UserListPanel, { LinkButtonsPanel, NicknameEntryPanel } from './UserListPanel.jsx';
-import ReplaySourcesPanel from './ReplaySourcesPanel.jsx';
 import Tabs, { Tab, TabList, TabPanel, TabPanels } from './Tabs.jsx';
-import TopDownMap from './TopDownMap.jsx';
-import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
-import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
-import { useControlSystem } from '../controls/index.js';
-
-function TopDownMapPanel() {
-  const {
-    state: { roverId },
-  } = useControlSystem();
-  const frame = useTelemetryFrame(roverId);
-  const sensors = frame?.sensors || {};
-
-  return (
-    <section className="panel-section">
-      <div className="aspect-square w-full">
-        <TopDownMap sensors={sensors} />
-      </div>
-    </section>
-  );
-}
-
-function DriveDockPanel() {
-  const {
-    state: { roverId, keymap },
-  } = useControlSystem();
-  const driveDockState = useDriveDockState(roverId);
-  const hideInlineControls = driveDockState.docked && !driveDockState.driving;
-
-  return (
-    <section className="panel-section flex h-full flex-col gap-0.5">
-      <DriveDockAction layout="desktop" expand driveDockState={driveDockState} />
-      {!hideInlineControls ? <InlineCameraTilt keymap={keymap} /> : null}
-    </section>
-  );
-}
 
 export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
   return (
@@ -55,24 +18,10 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
         <TabPanels>
           <TabPanel id="telemetry">
             <div className="space-y-0.5">
-              <div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.35fr)_minmax(0,0.95fr)]">
+              <ControlSummary />
-                <TopDownMapPanel />
-                <DriveDockPanel />
-              </div>
-              <div className="grid gap-0.5 grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)_minmax(0,0.75fr)]">
-                <RoverRosterPanel />
-                <ReplaySourcesPanel panelId="replay-sources-desktop" fillHeight />
-                <LinkButtonsPanel />
-              </div>
-              <div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.3fr)_minmax(0,0.7fr)] h-[14rem]">
-                <ChatPanel fillHeight />
-                <div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)]">
-                  <NicknameEntryPanel compact />
-                  <UserListPanel compact hideNicknameForm fillHeight />
-                </div>
-              </div>
               <HomeAssistantControls />
               <RoomCameraPanel defaultOrientation="horizontal" panelId="rightpane-telemetry" />
+              <TelemetryPanel />
             </div>
           </TabPanel>
           <TabPanel id="help">

webui/src/components/RoomCameraFeed.jsx

@@ -1,7 +1,74 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { WhepPlayer } from '../lib/whepPlayer.js';
 
-export default function RoomCameraFeed({ feed, label }) {
+function RoomCameraVideo({ sessionInfo, label, onStatus }) {
+  const videoRef = useRef(null);
+  const [status, setStatus] = useState('idle');
+  const [detail, setDetail] = useState(null);
+
+  useEffect(() => {
+    if (!sessionInfo?.url || !videoRef.current) return undefined;
+    let active = true;
+    let player;
+
+    const handleStatus = (nextStatus, info) => {
+      if (!active) return;
+      setStatus(nextStatus);
+      setDetail(info || null);
+      if (typeof onStatus === 'function') {
+        onStatus(nextStatus);
+      }
+    };
+
+    player = new WhepPlayer({
+      url: sessionInfo.url,
+      token: sessionInfo.token,
+      video: videoRef.current,
+      onStatus: handleStatus,
+    });
+
+    player.start().catch((err) => {
+      if (!active) return;
+      setStatus('error');
+      setDetail(err.message);
+      if (typeof onStatus === 'function') {
+        onStatus('error');
+      }
+    });
+
+    return () => {
+      active = false;
+      player?.stop();
+    };
+  }, [sessionInfo?.url, sessionInfo?.token, onStatus]);
+
+  return (
+    <div className="relative h-full w-full">
+      <video
+        ref={videoRef}
+        className="h-full w-full object-cover"
+        muted
+        playsInline
+        autoPlay
+        controls={false}
+        aria-label={label}
+      />
+      {status !== 'playing' && (
+        <div className="absolute inset-0 flex items-center justify-center text-sm text-slate-300">
+          {detail ? `Video error: ${detail}` : 'Connecting video…'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function RoomCameraFeed({ feed, label, videoSession = null, preferVideo = false }) {
   const [blink, setBlink] = useState(false);
+  const [videoFailed, setVideoFailed] = useState(false);
+
+  useEffect(() => {
+    setVideoFailed(false);
+  }, [videoSession?.url, videoSession?.token]);
 
   useEffect(() => {
     if (!feed) return;
@@ -15,12 +82,27 @@ export default function RoomCameraFeed({ feed, label }) {
     return feed.status || 'Connecting…';
   }, [feed]);
 
+  const showVideo = Boolean(preferVideo && videoSession?.url && !videoFailed);
+  const showSnapshot = Boolean(!showVideo && feed?.objectUrl);
+
   return (
     <div className="relative w-full overflow-hidden rounded bg-black" style={{ aspectRatio: '4 / 3' }}>
-      {feed?.objectUrl ? (
+      {showVideo ? (
+        <RoomCameraVideo
+          sessionInfo={videoSession}
+          label={label}
+          onStatus={(nextStatus) => {
+            if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
+              setVideoFailed(true);
+            }
+          }}
+        />
+      ) : showSnapshot ? (
         <img src={feed.objectUrl} alt={label} className="h-full w-full object-cover" />
       ) : (
-        <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">Waiting for frame…</div>
+        <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">
+          {preferVideo ? 'Waiting for video…' : 'Waiting for frame…'}
+        </div>
       )}
       <div className="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white">
         {label}

webui/src/components/RoomCameraPanel.jsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useSettingsNamespace } from '../settings/index.js';
 import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
+import { useVideoRequests } from '../hooks/useVideoRequests.js';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 import RoomCameraFeed from './RoomCameraFeed.jsx';
 
 function EmptyState() {
@@ -32,6 +34,15 @@ export default function RoomCameraPanel({
   const { session } = useSession();
   const cameras = session?.roomCameras || [];
   const feedMap = useRoomCameraSnapshots(cameras.map((camera) => ({ id: camera.id })));
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = cameras.map((camera) => ({
+    type: 'room',
+    id: camera.id,
+    key: `room:${camera.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const previewSources = useVideoRequests(previewEntries, { enabled: av1Supported });
   const { value: orientationSettings, save: saveOrientationSettings } = useSettingsNamespace('roomCameraPanels', {});
   const [orientation, setOrientation] = useState(() =>
     normalizeOrientation(
@@ -96,13 +107,19 @@ export default function RoomCameraPanel({
       <div className={containerClass}>
         {cameras.map((camera) => {
           const feed = feedMap[camera.id] || null;
+          const previewSession = previewSources[`room:${camera.id}:preview:av1`] || null;
           return (
             <article key={camera.id} className="w-full space-y-0.5 rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40">
               {/* <header className="space-y-0.5">
                 <p className="text-lg font-semibold text-white">{camera.name || camera.id}</p>
                 {camera.description && <p className="text-xs text-slate-500">{camera.description}</p>}
               </header> */}
-              <RoomCameraFeed feed={feed} label={camera.name || camera.id} />
+              <RoomCameraFeed
+                feed={feed}
+                label={camera.name || camera.id}
+                videoSession={previewSession}
+                preferVideo={Boolean(previewSession?.url)}
+              />
             </article>
           );
         })}

webui/src/components/SessionSnapshot.jsx

@@ -5,11 +5,9 @@ export default function SessionSnapshot() {
   const { session } = useSession();
   const payload = useMemo(() => JSON.stringify(session ?? {}, null, 2), [session]);
   return (
-    <div className="panel-section flex min-h-0 flex-col gap-0.5 text-xs">
+    <div className="panel-section space-y-0.5 text-xs">
       <p className="text-sm text-slate-400">Session snapshot</p>
-      <pre className="surface min-h-0 flex-1 overflow-y-auto font-mono text-[0.7rem] text-lime-300">
+      <pre className="surface h-64 overflow-y-auto font-mono text-[0.7rem] text-lime-300">{payload}</pre>
-        {payload}
-      </pre>
     </div>
   );
 }

webui/src/components/UserListPanel.jsx

@@ -6,27 +6,6 @@ import NicknameForm from './NicknameForm.jsx';
 import DiscordInviteButton from './DiscordInviteButton.jsx';
 import KoFiButton from './KoFiButton.jsx';
 
-export function NicknameEntryPanel({ compact = false }) {
-  return (
-    <section className="panel-section flex h-full min-h-0 flex-col gap-0.5 text-base">
-      <div className="surface flex w-full items-center">
-        <NicknameForm compact={compact} />
-      </div>
-    </section>
-  );
-}
-
-export function LinkButtonsPanel() {
-  return (
-    <section className="panel-section flex h-full min-h-0 flex-col gap-0.5 text-base">
-      <div className="grid flex-1 min-h-0 gap-0.5 grid-rows-2">
-        <DiscordInviteButton className="h-full" />
-        <KoFiButton className="h-full" />
-      </div>
-    </section>
-  );
-}
-
 function roleColors(role) {
   switch (role) {
     case 'admin':
@@ -49,14 +28,7 @@ function formatLabel(user, selfId) {
   return base;
 }
 
-export default function UserListPanel({
+export default function UserListPanel({ hideNicknameForm = false, hideHeader = false, className = '', fillHeight = false }) {
-  hideNicknameForm = false,
-  hideHeader = false,
-  className = '',
-  fillHeight = false,
-  compact = false,
-  showBothTurnsAndUsers = false,
-}) {
   const { session, setNickname } = useSession();
   const { value } = useSettingsNamespace('profile', { nickname: '' });
   const lastSyncedSocketRef = useRef(null);
@@ -67,12 +39,6 @@ export default function UserListPanel({
   const isTurnsMode = session?.mode === 'turns';
   const turnQueues = session?.turnQueues || {};
   const roster = session?.roster || [];
-  const [turnView, setTurnView] = useState('queues');
-
-  useEffect(() => {
-    if (!isTurnsMode) return;
-    setTurnView('queues');
-  }, [isTurnsMode]);
 
   useEffect(() => {
     if (!canSetNickname) return;
@@ -127,23 +93,9 @@ export default function UserListPanel({
     return Math.ceil(ms / 1000);
   }, []);
 
-  const baseListClass = fillHeight
+  const baseListClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto';
-    ? 'flex-1 min-h-0 overflow-y-auto'
+  const turnsListClass = isTurnsMode && fillHeight ? 'max-h-40 overflow-y-auto' : baseListClass;
-    : compact
+  const usersListClass = isTurnsMode && fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : baseListClass;
-      ? 'h-28 overflow-y-auto'
-      : 'h-48 overflow-y-auto';
-  const turnsListClass =
-    isTurnsMode && fillHeight
-      ? 'max-h-40 overflow-y-auto'
-      : isTurnsMode && compact
-        ? 'max-h-32 overflow-y-auto'
-        : baseListClass;
-  const usersListClass =
-    isTurnsMode && fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : baseListClass;
-  const showToggle = isTurnsMode && !showBothTurnsAndUsers;
-  const showQueuesSection = isTurnsMode && (showBothTurnsAndUsers || turnView === 'queues');
-  const showUsersSection = !isTurnsMode || (showToggle && turnView === 'users');
-  const showUsersSecondary = isTurnsMode && showBothTurnsAndUsers;
 
   const renderUserList = () =>
     sorted.length === 0 ? (
@@ -155,7 +107,7 @@ export default function UserListPanel({
         return (
           <div
             key={user.socketId}
-            className={`surface-muted flex items-center gap-1 ${compact ? 'py-0.25 text-[0.8rem]' : 'text-sm'}`}
+            className="surface-muted flex items-center gap-1 text-sm"
           >
             <p className={`font-semibold ${roleColors(user.role)}`}>{formatLabel(user, selfId)}</p>
             {user.roverId ? (
@@ -179,13 +131,13 @@ export default function UserListPanel({
     >
       {!hideNicknameForm && (
         <div className="space-y-0.5">
-          <div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
+          <div className="flex items-stretch gap-0.5">
-            <div className="min-w-0">
+            <div className="flex w-1/2 min-w-0">
               <div className="surface flex w-full items-center">
-                <NicknameForm compact={compact} />
+                <NicknameForm />
               </div>
             </div>
-            <div className="grid gap-0.5 sm:grid-cols-2 md:grid-cols-1">
+            <div className="flex w-1/2 flex-col gap-0.5">
               <DiscordInviteButton />
               <KoFiButton />
             </div>
@@ -196,42 +148,16 @@ export default function UserListPanel({
 
       <div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
         {!hideHeader && (
-          <div className={`flex items-center justify-between text-sm text-slate-400 ${compact ? 'text-xs' : ''}`}>
+          <div className="flex items-center justify-between text-sm text-slate-400">
-            <div className="flex items-center gap-0.5">
+            <span>{isTurnsMode ? 'Turn queues' : 'Users'}</span>
-              <span>
-                {isTurnsMode
-                  ? showQueuesSection
-                    ? 'Turn queues'
-                    : 'Users'
-                  : 'Users'}
-              </span>
             <span className="text-xs text-slate-500">
-                {showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length}
+              {isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length}
             </span>
           </div>
-            {showToggle ? (
-              <div className="inline-flex overflow-hidden rounded border border-slate-700 text-[0.7rem]">
-                <button
-                  type="button"
-                  className={`px-1 py-0.5 ${turnView === 'queues' ? 'bg-slate-600 text-white' : 'bg-transparent text-slate-400 hover:text-white'}`}
-                  onClick={() => setTurnView('queues')}
-                >
-                  Queues
-                </button>
-                <button
-                  type="button"
-                  className={`px-1 py-0.5 ${turnView === 'users' ? 'bg-slate-600 text-white' : 'bg-transparent text-slate-400 hover:text-white'}`}
-                  onClick={() => setTurnView('users')}
-                >
-                  Users
-                </button>
-              </div>
-            ) : null}
-          </div>
         )}
-        {showQueuesSection ? (
+        <div className={`surface space-y-0.25 ${isTurnsMode ? turnsListClass : baseListClass}`}>
-          <div className={`surface space-y-0.25 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
+          {isTurnsMode ? (
-            {Object.keys(turnQueues || {}).length === 0 ? (
+            Object.keys(turnQueues || {}).length === 0 ? (
               <p className="text-sm text-slate-500">No turn queues yet.</p>
             ) : (
               Object.entries(turnQueues).map(([roverId, info]) => {
@@ -247,7 +173,7 @@ export default function UserListPanel({
                       : queue[0]
                     : null;
                 return (
-                  <div key={roverId} className={`surface-muted flex flex-col gap-0.25 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
+                  <div key={roverId} className="surface-muted flex flex-col gap-0.25 text-sm">
                     <div className="flex items-center gap-1">
                       <p className="font-semibold text-slate-200">{rosterName(roverId)}</p>
                       {remaining != null && (
@@ -275,7 +201,7 @@ export default function UserListPanel({
                           return (
                             <span
                               key={`${roverId}-${socketId}-${idx}`}
-                              className={`flex items-center gap-0.5 rounded px-1 ${compact ? 'text-[0.7rem]' : 'text-[0.8rem]'} ${highlightClass}`}
+                              className={`flex items-center gap-0.5 rounded px-1 text-[0.8rem] ${highlightClass}`}
                             >
                               <span className={`${roleColors(user.role)} font-semibold`}>
                                 {formatLabel(user, selfId)}
@@ -292,23 +218,21 @@ export default function UserListPanel({
                   </div>
                 );
               })
+            )
+          ) : (
+            renderUserList()
           )}
         </div>
-        ) : null}
 
-        {showUsersSection ? (
+        {isTurnsMode ? (
-          <div className={`surface space-y-0.25 ${usersListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
-            {renderUserList()}
-          </div>
-        ) : null}
-
-        {showUsersSecondary ? (
           <div className={`space-y-0.25 ${fillHeight ? 'flex min-h-0 flex-1 flex-col' : ''}`}>
             <div className="flex items-center justify-between text-xs text-slate-400">
               <span>Users</span>
               <span className="text-[0.7rem] text-slate-500">{sorted.length}</span>
             </div>
-            <div className={`surface space-y-0.25 ${usersListClass}`}>{renderUserList()}</div>
+            <div className={`surface space-y-0.25 ${usersListClass}`}>
+              {renderUserList()}
+            </div>
           </div>
         ) : null}
       </div>

webui/src/components/VideoTile.jsx

@@ -5,7 +5,6 @@ import { useHudMapSetting } from '../hooks/useHudMapSetting.js';
 import { useChat } from '../context/ChatContext.jsx';
 import { useSession } from '../context/SessionContext.jsx';
 import { useSettingsNamespace } from '../settings/index.js';
-import DiscordInviteButton from './DiscordInviteButton.jsx';
 
 const RESTART_DELAY_MS = 2000;
 const UNMUTE_RETRY_MS = 3000;
@@ -52,7 +51,6 @@ export default function VideoTile({
   driverLabel = null,
   hudForceMap = false,
   hudMapPosition = 'top-right',
-  hudLabelScale = 1,
   fitParent = false,
   showTurnCue = false,
   turnTimerText = null,
@@ -368,7 +366,7 @@ export default function VideoTile({
   return (
     <div className={`flex flex-col gap-0.5 ${fitParent ? 'h-full' : ''}`}>
       <div
-        className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-[4/3]'}`}
+        className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-video'}`}
       >
         {usingSnapshot ? (
           snapshotFeed?.objectUrl ? (
@@ -417,7 +415,6 @@ export default function VideoTile({
           mobileHud={mobileHud}
           mapPosition={hudMapPosition}
           turnTimerText={turnTimerText}
-          labelScale={hudLabelScale}
         />
         <HudChatInput compact={mobileHud} />
         <OvercurrentOverlay motors={overcurrentMotors} compact={mobileHud} />
@@ -432,10 +429,7 @@ export default function VideoTile({
                 mobileHud ? 'px-2 py-1 text-[0.6rem]' : 'px-3 py-1.5 text-sm'
               }`}
             >
-              <div className="text-center">{qualityNotice}</div>
+              {qualityNotice}
-              <div className="pointer-events-auto mt-1">
-                <DiscordInviteButton text={'Join our Discord server while you wait!'} />
-              </div>
             </div>
           </div>
         ) : null}
@@ -550,7 +544,6 @@ function HudOverlay({
   mobileHud = false,
   mapPosition = 'top-right',
   turnTimerText = null,
-  labelScale = 1,
 }) {
   const bumps = sensors?.bumpsAndWheelDrops || {};
   const [now, setNow] = useState(() => Date.now());
@@ -572,10 +565,6 @@ function HudOverlay({
   const timerPadClass = isMobile ? 'px-0.5 py-0.25' : 'px-1 py-0.5';
   const telemetryPosClass = isMobile ? 'left-0.5 top-1/2' : 'left-1 top-1/2';
   const labelPosClass = isMobile ? 'bottom-0.5' : 'bottom-0.5';
-  const labelWrapperStyle = {
-    transform: `translateX(-50%) scale(${labelScale})`,
-    transformOrigin: 'center bottom',
-  };
   const mapSize = '240px';
   const mapScale = portraitMobile ? 0.36 : isMobile ? 0.45 : 0.7;
   const mapOpacity = isMobile ? 0.85 : 0.7;
@@ -637,15 +626,13 @@ function HudOverlay({
           ) : null}
         </div>
 
-        <div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
         <div
-            className={`flex items-center gap-1 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
+          className={`absolute ${labelPosClass} left-1/2 flex -translate-x-1/2 items-center gap-1 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
         >
           <span className="font-semibold text-white">{label || 'Unnamed Rover'}</span>
           {driverLabel ? <span className="text-slate-300">• {driverLabel}</span> : null}
         </div>
       </div>
-      </div>
     );
   }
 
@@ -664,12 +651,12 @@ function HudOverlay({
           {turnTimerText}
         </div>
       ) : null}
-      <div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
+      <div
-        <div className={`flex gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}>
+        className={`absolute ${labelPosClass} left-1/2 flex -translate-x-1/2 gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
+      >
         <span>Rover: "{label || 'Unnamed Rover'}"</span>
         {/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
       </div>
-      </div>
 
       {showTopDown && variant !== 'spectator' ? (
         <div
@@ -839,7 +826,7 @@ function HudChatInput({ compact = false }) {
           }
         }}
         ref={(el) => registerInputRef(el, { target: 'hud' })}
-        placeholder={canChat ? 'Chat (TTS)' : 'Spectator'}
+        placeholder={canChat ? 'Chat…' : 'Spectator'}
         disabled={!canChat}
       />
       <button
@@ -847,7 +834,7 @@ function HudChatInput({ compact = false }) {
         disabled={!canChat || sending}
         className={buttonClass}
       >
-        Speak
+        Send
       </button>
     </form>
   );

webui/src/hooks/useVideoRequests.js

@@ -11,23 +11,42 @@ function normalizeEntry(entry) {
   if (typeof entry === 'object') {
     if (entry.type && entry.id) {
       const id = String(entry.id);
+      const preview = Boolean(entry.preview);
+      const codec = entry.codec ? String(entry.codec) : null;
       let key = entry.key;
       if (!key) {
         key = entry.type === 'room' ? `room:${id}` : id;
+        if (preview) {
+          key = `${key}:preview${codec ? `:${codec}` : ''}`;
+        }
       }
       return {
         type: entry.type,
         id,
         key,
+        preview,
+        codec,
       };
     }
     if (entry.roverId) {
       const id = String(entry.roverId);
-      return { type: 'rover', id, key: entry.key || id };
+      return {
+        type: 'rover',
+        id,
+        key: entry.key || id,
+        preview: Boolean(entry.preview),
+        codec: entry.codec ? String(entry.codec) : null,
+      };
     }
     if (entry.roomCameraId) {
       const id = String(entry.roomCameraId);
-      return { type: 'room', id, key: entry.key || `room:${id}` };
+      return {
+        type: 'room',
+        id,
+        key: entry.key || `room:${id}`,
+        preview: Boolean(entry.preview),
+        codec: entry.codec ? String(entry.codec) : null,
+      };
     }
   }
   return null;
@@ -86,6 +105,12 @@ export function useVideoRequests(sourceList = [], options = {}) {
 
     function requestEntry(entry) {
       const payload = entry.type === 'room' ? { roomCameraId: entry.id } : { roverId: entry.id };
+      if (entry.preview) {
+        payload.preview = true;
+        if (entry.codec) {
+          payload.codec = entry.codec;
+        }
+      }
       socket.emit('video:request', payload, (resp = {}) => {
         if (cancelled) return;
         setSources((prev) => ({ ...prev, [entry.key]: resp }));

webui/src/lib/mediaSupport.js

@@ -0,0 +1,28 @@
+let cachedAv1Support = null;
+
+function hasAv1CodecCapability() {
+  if (typeof RTCRtpReceiver !== 'undefined' && RTCRtpReceiver.getCapabilities) {
+    const caps = RTCRtpReceiver.getCapabilities('video');
+    const codecs = caps?.codecs || [];
+    return codecs.some((codec) => {
+      const mime = (codec?.mimeType || '').toLowerCase();
+      return mime === 'video/av1' || mime === 'video/av01' || mime === 'video/av1x';
+    });
+  }
+  if (typeof document !== 'undefined') {
+    const video = document.createElement('video');
+    if (typeof video.canPlayType === 'function') {
+      const result = video.canPlayType('video/mp4; codecs="av01.0.05M.08"');
+      return result === 'probably' || result === 'maybe';
+    }
+  }
+  return false;
+}
+
+export function supportsAv1WebRtc() {
+  if (cachedAv1Support != null) {
+    return cachedAv1Support;
+  }
+  cachedAv1Support = hasAv1CodecCapability();
+  return cachedAv1Support;
+}

webui/src/mini/MiniSummaryApp.jsx

@@ -5,13 +5,15 @@ import { useTelemetryFrames } from '../context/TelemetryContext.jsx';
 import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
+import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
 import VideoTile from '../components/VideoTile.jsx';
 import ChatPanel from '../components/ChatPanel.jsx';
 import AlertFeed from '../components/AlertFeed.jsx';
 import useDefaultNickname from '../hooks/useDefaultNickname.js';
+import RoomCameraFeed from '../components/RoomCameraFeed.jsx';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 
 const ROTATE_MS = 20000;
-const HARD_REFRESH_MS = 3 * 60 * 60 * 1000;
 
 function formatDriverLabel({ roverId, session }) {
   const activeDriverId = session?.activeDrivers?.[roverId] || null;
@@ -29,42 +31,64 @@ function MiniSummaryContent() {
   const inLockdown = session?.mode === 'lockdown';
   const frames = useTelemetryFrames();
   const roster = session?.roster ?? [];
+  const roomCameras = session?.roomCameras || [];
+  const feeds = useRoomCameraSnapshots(roomCameras.map((camera) => ({ id: camera.id })), {
+    enabled: !inLockdown,
+    version: session?.mode,
+  });
   const [index, setIndex] = useState(0);
-  const activeDrivers = session?.activeDrivers || {};
-  const driverRoster = useMemo(
-    () => roster.filter((rover) => activeDrivers[rover.id]),
-    [roster, activeDrivers],
-  );
 
   const snapshotFeeds = useRoverSnapshots(
-    driverRoster.map((rover) => rover.id),
+    roster.map((rover) => rover.id),
     { enabled: !inLockdown, version: session?.mode },
   );
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = roster.map((rover) => ({
+    type: 'rover',
+    id: rover.id,
+    key: `rover:${rover.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const roomPreviewEntries = roomCameras.map((camera) => ({
+    type: 'room',
+    id: camera.id,
+    key: `room:${camera.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const previewSources = useVideoRequests(previewEntries, { enabled: !inLockdown && av1Supported });
+  const roomPreviewSources = useVideoRequests(roomPreviewEntries, { enabled: !inLockdown && av1Supported });
   const audioEntries = useMemo(
     () =>
-      driverRoster.flatMap((rover) => {
+      roster.flatMap((rover) => {
         if (!rover?.id || !rover.media?.audioPublishUrl) return [];
         const id = String(rover.id);
         return [{ type: 'rover', id: `${id}-audio`, key: `${id}-audio` }];
       }),
-    [driverRoster],
+    [roster],
   );
   const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });
 
   const roverPool = useMemo(() => {
-    if (!driverRoster.length) return [];
+    if (!roster.length) return [];
-    const withSnapshot = driverRoster.filter((rover) => snapshotFeeds[rover.id]?.objectUrl);
+    const withSnapshot = roster.filter((rover) => snapshotFeeds[rover.id]?.objectUrl);
-    return withSnapshot.length ? withSnapshot : driverRoster;
+    return withSnapshot.length ? withSnapshot : roster;
-  }, [driverRoster, snapshotFeeds]);
+  }, [roster, snapshotFeeds]);
 
   const rotationPool = useMemo(() => {
-    return roverPool.map((rover) => ({ type: 'rover', rover }));
+    const items = [];
-  }, [roverPool]);
+    roverPool.forEach((rover) => items.push({ type: 'rover', rover }));
+    roomCameras.forEach((camera) => items.push({ type: 'room', camera }));
+    return items;
+  }, [roverPool, roomCameras]);
 
   const rotationKey = useMemo(
     () =>
       rotationPool
-        .map((entry) => `r:${entry.rover.id}`)
+        .map((entry) =>
+          entry.type === 'rover' ? `r:${entry.rover.id}` : `room:${entry.camera.id}`,
+        )
         .join('|'),
     [rotationPool],
   );
@@ -83,11 +107,21 @@ function MiniSummaryContent() {
 
   const activeEntry = rotationPool.length ? rotationPool[index % rotationPool.length] : null;
   const activeRover = activeEntry?.type === 'rover' ? activeEntry.rover : null;
+  const activeCamera = activeEntry?.type === 'room' ? activeEntry.camera : null;
 
   const activeSnapshot = activeRover ? snapshotFeeds[activeRover.id] || null : null;
+  const activePreview =
+    activeRover && previewSources[`rover:${activeRover.id}:preview:av1`]
+      ? previewSources[`rover:${activeRover.id}:preview:av1`]
+      : null;
   const activeAudio = activeRover ? audioSources[`${activeRover.id}-audio`] || null : null;
   const activeFrame = activeRover ? frames[activeRover.id] || null : null;
   const driverLabel = activeRover ? formatDriverLabel({ roverId: activeRover.id, session }) : null;
+  const activeFeed = activeCamera ? feeds[activeCamera.id] || null : null;
+  const activeRoomPreview =
+    activeCamera && roomPreviewSources[`room:${activeCamera.id}:preview:av1`]
+      ? roomPreviewSources[`room:${activeCamera.id}:preview:av1`]
+      : null;
 
   if (inLockdown) {
     return (
@@ -111,8 +145,8 @@ function MiniSummaryContent() {
         ) : activeRover ? (
           <FitViewportFrame>
             <VideoTile
-              sessionInfo={null}
+              sessionInfo={activePreview?.url ? activePreview : null}
-              videoMode="snapshot"
+              videoMode={activePreview?.url ? 'whep' : 'snapshot'}
               snapshotFeed={activeSnapshot}
               audioSessionInfo={activeAudio}
               label={activeRover.name || activeRover.id}
@@ -121,15 +155,23 @@ function MiniSummaryContent() {
               layoutFormat="mobile"
               hudVariant="spectator"
               driverLabel={driverLabel}
-              hudLabelScale={5}
               hudForceMap
               hudMapPosition="bottom-left"
               fitParent
             />
           </FitViewportFrame>
+        ) : activeCamera ? (
+          <FitViewportFrame>
+            <RoomCameraFrame
+              camera={activeCamera}
+              feed={activeFeed}
+              videoSession={activeRoomPreview}
+              preferVideo={Boolean(activeRoomPreview?.url)}
+            />
+          </FitViewportFrame>
         ) : (
           <div className="flex h-full w-full items-center justify-center text-sm text-slate-500">
-            {driverRoster.length ? 'No sources available.' : 'No active drivers.'}
+            No sources available.
           </div>
         )}
       </section>
@@ -138,26 +180,29 @@ function MiniSummaryContent() {
 }
 
 export default function MiniSummaryApp() {
-  useEffect(() => {
-    if (typeof window === 'undefined') return undefined;
-    const timer = setTimeout(() => {
-      const url = new URL(window.location.href);
-      url.searchParams.set('refresh', Date.now().toString());
-      window.location.replace(url.toString());
-    }, HARD_REFRESH_MS);
-    return () => clearTimeout(timer);
-  }, []);
-
   return (
     <SettingsProvider>
       <>
         <MiniSummaryContent />
-        <AlertFeed scale={3} />
+        <AlertFeed />
       </>
     </SettingsProvider>
   );
 }
 
+function RoomCameraFrame({ camera, feed, videoSession, preferVideo }) {
+  return (
+    <div className="relative h-full w-full bg-zinc-950">
+      <RoomCameraFeed
+        feed={feed}
+        label={camera.name || camera.id}
+        videoSession={videoSession}
+        preferVideo={preferVideo}
+      />
+    </div>
+  );
+}
+
 function ChatOverlay() {
   return (
     <div
@@ -180,11 +225,11 @@ function FitViewportFrame({ children }) {
       <div
         className="relative flex items-center justify-center overflow-hidden bg-black"
         style={{
-          width: 'min(100%, calc(100vh * 4 / 3))',
+          width: 'min(100%, calc(100vh * 16 / 9))',
-          height: 'min(100%, calc(100vw * 3 / 4))',
+          height: 'min(100%, calc(100vw * 9 / 16))',
           maxWidth: '100%',
           maxHeight: '100%',
-          aspectRatio: '4 / 3',
+          aspectRatio: '16 / 9',
         }}
       >
         <div className="flex h-full w-full items-center justify-center overflow-hidden">{children}</div>

webui/src/spectate/SpectatorApp.jsx

@@ -13,6 +13,7 @@ import RoverRoster from '../components/RoverRoster.jsx';
 import AlertFeed from '../components/AlertFeed.jsx';
 import useDefaultNickname from '../hooks/useDefaultNickname.js';
 import CommunityGoalBanner from '../components/CommunityGoalBanner.jsx';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 
 function formatDriverLabel({ roverId, session }) {
   const activeDriverId = session?.activeDrivers?.[roverId] || null;
@@ -25,14 +26,15 @@ function formatDriverLabel({ roverId, session }) {
   return driverText;
 }
 
-function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session }) {
+function RoverSpectatorCard({ rover, frame, snapshotFeed, previewSession, audioInfo, session }) {
   const driverLabel = formatDriverLabel({ roverId: rover.id, session });
+  const hasPreview = Boolean(previewSession?.url);
   return (
     <article className="min-h-[16rem] rounded bg-zinc-900 p-0.5 sm:min-h-[18rem]">
       <div className="min-h-0 overflow-hidden rounded bg-black/20">
         <VideoTile
-          sessionInfo={null}
+          sessionInfo={hasPreview ? previewSession : null}
-          videoMode="snapshot"
+          videoMode={hasPreview ? 'whep' : 'snapshot'}
           snapshotFeed={snapshotFeed}
           audioSessionInfo={audioInfo}
           label={rover.name}
@@ -48,7 +50,7 @@ function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session })
   );
 }
 
-function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
+function RoverRow({ roster, frames, snapshotFeeds, previewSources, audioSources, session }) {
   if (roster.length === 0) {
     return <p className="col-span-full text-slate-400">No rovers registered.</p>;
   }
@@ -60,6 +62,7 @@ function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
           rover={rover}
           frame={frames[rover.id]}
           snapshotFeed={snapshotFeeds[rover.id]}
+          previewSession={previewSources[`rover:${rover.id}:preview:av1`] || null}
           audioInfo={audioSources[`${rover.id}-audio`]}
           session={session}
           showHudMap
@@ -104,6 +107,15 @@ function SpectatorContent() {
     roster.map((rover) => rover.id),
     { enabled: !inLockdown, version: session?.mode },
   );
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = roster.map((rover) => ({
+    type: 'rover',
+    id: rover.id,
+    key: `rover:${rover.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const previewSources = useVideoRequests(previewEntries, { enabled: !inLockdown && av1Supported, version: session?.mode });
   const audioEntries = roster.flatMap((rover) =>
     rover.media?.audioPublishUrl
       ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
@@ -130,6 +142,7 @@ function SpectatorContent() {
             roster={roster}
             frames={frames}
             snapshotFeeds={snapshotFeeds}
+            previewSources={previewSources}
             audioSources={audioSources}
             session={session}
           />
@@ -141,7 +154,7 @@ function SpectatorContent() {
             <RoverRoster roster={roster} title="Rovers" emptyText="No rovers registered." />
           </div>
           <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
-            <UserListPanel hideNicknameForm hideHeader fillHeight className="h-full" showBothTurnsAndUsers />
+            <UserListPanel hideNicknameForm hideHeader fillHeight className="h-full" />
           </div>
           <div className="min-h-0 min-w-0 flex-[1.1] overflow-hidden">
             <ChatPanel hideInput hideSpectatorNotice fillHeight />