spectatro

webui/src/spectate/SpectatorApp/components/LogsRow.jsx

@@ -0,0 +1,10 @@
+// Log panel wrapper row for spectator layout.
+import LogPanel from '../../../components/LogPanel.jsx';
+
+export default function LogsRow({ className = '' }) {
+  return (
+    <div className={`panel ${className}`}>
+      <LogPanel />
+    </div>
+  );
+}

webui/src/spectate/SpectatorApp/components/RoverRow.jsx

@@ -0,0 +1,26 @@
+// Rover grid row for spectator view.
+import RoverSpectatorCard from './RoverSpectatorCard.jsx';
+
+export default function RoverRow({ roster, frames, videoSources, snapshotFeeds, audioSources, session, canSpectateVideo }) {
+  if (roster.length === 0) {
+    return <p className="col-span-full text-slate-400">No rovers registered.</p>;
+  }
+  return (
+    <section className="grid grid-cols-1 gap-0.5 md:grid-cols-2">
+      {roster.map((rover) => (
+        <RoverSpectatorCard
+          key={rover.id}
+          rover={rover}
+          frame={frames[rover.id]}
+          sessionInfo={canSpectateVideo ? videoSources[rover.id] || null : null}
+          videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
+          snapshotFeed={canSpectateVideo ? null : snapshotFeeds[rover.id]}
+          audioInfo={audioSources[`${rover.id}-audio`]}
+          session={session}
+          showHudMap
+          hudMapPosition="bottom-left"
+        />
+      ))}
+    </section>
+  );
+}

webui/src/spectate/SpectatorApp/components/RoverSpectatorCard.jsx

@@ -0,0 +1,27 @@
+// Single rover spectator card containing live/snapshot tile and HUD.
+import VideoTile from '../../../components/VideoTile.jsx';
+import { formatDriverLabel } from '../utils.js';
+
+export default function RoverSpectatorCard({ rover, frame, sessionInfo, videoMode, snapshotFeed, audioInfo, session }) {
+  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
+  return (
+    <article className="min-h-[16rem] rounded bg-zinc-900 p-0 sm:min-h-[18rem]">
+      <div className="min-h-0 overflow-hidden rounded bg-black/20">
+        <VideoTile
+          sessionInfo={sessionInfo}
+          videoMode={videoMode}
+          snapshotFeed={snapshotFeed}
+          audioSessionInfo={audioInfo}
+          label={rover.name}
+          roverColor={rover.color || null}
+          telemetryFrame={frame}
+          batteryConfig={rover.battery}
+          hudVariant="spectator"
+          driverLabel={driverLabel}
+          hudForceMap
+          hudMapPosition="top-center"
+        />
+      </div>
+    </article>
+  );
+}

webui/src/spectate/SpectatorApp/components/SecondaryRow.jsx

@@ -0,0 +1,17 @@
+// Secondary panel row showing room cameras.
+import RoomCameraPanel from '../../../components/RoomCameraPanel.jsx';
+
+export default function SecondaryRow() {
+  return (
+    <section className="min-h-0">
+      <div className="surface min-h-[14rem] overflow-hidden">
+        <RoomCameraPanel
+          defaultOrientation="horizontal"
+          hideLayoutToggle
+          hideHeader
+          panelId="spectator-secondary"
+        />
+      </div>
+    </section>
+  );
+}