guh

webui/src/App.jsx

@@ -10,28 +10,11 @@ import MobileControls, { MobileJoystick, AuxMotorControls } from './components/M
 import { DriveControlProvider } from './context/DriveControlContext.jsx';
 import { useVideoRequests } from './hooks/useVideoRequests.js';
 
-function StatusBadge({ connected, role, mode }) {
-  const color = connected ? 'bg-emerald-500/20 text-emerald-300' : 'bg-red-500/20 text-red-200';
-  return (
-    <div className="flex flex-wrap items-center gap-1 text-[0.65rem] uppercase tracking-[0.2em]">
-      <span className={`rounded-full px-2 py-0.5 font-medium ${color}`}>
-        {connected ? 'Connected' : 'Disconnected'}
-      </span>
-      <span className="rounded-full bg-slate-800/80 px-2 py-0.5 text-slate-200">
-        Role {role || 'unknown'}
-      </span>
-      <span className="rounded-full bg-slate-800/80 px-2 py-0.5 text-slate-200">
-        Mode {mode || '--'}
-      </span>
-    </div>
-  );
-}
-
 function RoomCameraPanel() {
   return (
-    <div className="min-h-[8rem] rounded-lg border border-slate-800 bg-slate-900/70 p-2 text-[0.75rem] text-slate-400">
-      <p className="text-center text-xs uppercase tracking-[0.3em] text-slate-500">Room camera</p>
-      <p className="mt-2 text-center text-sm text-slate-300">Feed placeholder. Wire upcoming room cam here.</p>
+    <div className="min-h-[8rem] rounded-sm bg-[#1b1b1b] p-1 text-sm text-slate-200">
+      <p className="text-center text-xs text-slate-400">Room camera</p>
+      <p className="mt-1 text-center text-sm text-slate-200">Feed placeholder. Wire upcoming room cam here.</p>
     </div>
   );
 }
@@ -69,14 +52,12 @@ function useLayoutMode() {
 function LogPanel() {
   const { logs } = useSession();
   return (
-    <div className="rounded-2xl border border-slate-800 bg-slate-900/70 p-4">
-      <header className="mb-3 flex items-center justify-between">
-        <h2 className="text-lg font-semibold text-white">Server logs</h2>
-        <span className="text-xs uppercase tracking-[0.2em] text-slate-500">
-          {logs.length} entries
-        </span>
-      </header>
-      <div className="h-64 overflow-y-auto rounded-xl bg-slate-950/40 p-3 text-xs font-mono text-slate-300">
+    <div className="rounded-sm bg-[#1b1b1b] p-1 text-xs text-slate-200">
+      <div className="flex items-center justify-between text-[0.7rem] text-slate-400">
+        <span>Server logs</span>
+        <span>{logs.length}</span>
+      </div>
+      <div className="mt-1 h-48 overflow-y-auto rounded-sm bg-black/40 p-1 font-mono text-[0.65rem] text-slate-300">
         {logs.length === 0 ? (
           <p>No logs yet.</p>
         ) : (
@@ -84,10 +65,10 @@ function LogPanel() {
             .slice()
             .reverse()
             .map((entry) => (
-              <div key={entry.id} className="mb-2">
+              <div key={entry.id} className="mb-1">
                 <span className="text-slate-500">{entry.timestamp}</span>{' '}
-                <span className="text-cyan-300">[{entry.level}]</span>{' '}
-                {entry.label && <span className="text-pink-300">[{entry.label}]</span>}{' '}
+                <span className="text-slate-300">[{entry.level}]</span>{' '}
+                {entry.label && <span className="text-slate-400">[{entry.label}]</span>}{' '}
                 <span>{entry.message}</span>
               </div>
             ))
@@ -97,113 +78,6 @@ function LogPanel() {
   );
 }
 
-function RosterPanel() {
-  const { session, requestControl } = useSession();
-  const roster = session?.roster ?? [];
-  const isAdmin = session?.role === 'admin' || session?.role === 'lockdown';
-  const [pending, setPending] = useState({});
-
-  async function handleRequest(roverId) {
-    setPending((prev) => ({ ...prev, [roverId]: true }));
-    try {
-      await requestControl(roverId);
-    } catch (err) {
-      alert(err.message);
-    } finally {
-      setPending((prev) => ({ ...prev, [roverId]: false }));
-    }
-  }
-
-  return (
-    <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <h2 className="text-lg font-semibold text-white">Rovers</h2>
-      <div className="mt-4 space-y-3">
-        {roster.length === 0 && <p className="text-slate-400">No rovers registered.</p>}
-        {roster.map((rover) => (
-          <div
-            key={rover.id}
-            className="flex flex-wrap items-center justify-between gap-3 rounded-xl bg-slate-950/40 px-4 py-3"
-          >
-            <div>
-              <p className="text-white">{rover.name}</p>
-              <p className="text-xs text-slate-400">Locked: {rover.locked ? 'yes' : 'no'}</p>
-            </div>
-            {isAdmin ? (
-              <button
-                type="button"
-                onClick={() => handleRequest(rover.id)}
-                disabled={pending[rover.id]}
-                className="rounded-full bg-blue-600 px-4 py-1 text-sm font-semibold text-white disabled:opacity-50"
-              >
-                {pending[rover.id] ? 'Requesting…' : 'Request control'}
-              </button>
-            ) : (
-              <span className="text-xs text-slate-500">Auto-assigned</span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function AssignmentCard() {
-  const { session, releaseControl } = useSession();
-  const assignment = session?.assignment;
-  const roverId = assignment?.roverId;
-
-  const [busy, setBusy] = useState(false);
-
-  async function handleRelease() {
-    if (!roverId) return;
-    setBusy(true);
-    try {
-      await releaseControl(roverId);
-    } catch (err) {
-      alert(err.message);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <h2 className="text-lg font-semibold text-white">Assignment</h2>
-      {roverId ? (
-        <div className="mt-4 space-y-3">
-          <p className="text-slate-300">Currently driving rover {roverId}</p>
-          <button
-            type="button"
-            onClick={handleRelease}
-            disabled={busy}
-            className="rounded-full bg-red-600 px-4 py-1 text-sm font-semibold text-white disabled:opacity-50"
-          >
-            {busy ? 'Releasing…' : 'Release control'}
-          </button>
-        </div>
-      ) : (
-        <div className="mt-4 text-slate-400">
-          <p>Status: {assignment?.status ?? 'not assigned'}</p>
-          {assignment?.queuePosition && (
-            <p>Queue position: {assignment.queuePosition}</p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function SessionInspector() {
-  const { session } = useSession();
-  const formatted = useMemo(() => JSON.stringify(session ?? {}, null, 2), [session]);
-  return (
-    <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <h2 className="text-lg font-semibold text-white">Session snapshot</h2>
-      <pre className="mt-4 max-h-64 overflow-y-auto text-sm text-teal-200">{formatted}</pre>
-    </div>
-  );
-}
-
 function DriverVideoPanel() {
   const { session } = useSession();
   const roverId = session?.assignment?.roverId;
@@ -217,25 +91,19 @@ function DriverVideoPanel() {
   }, [session?.roster, roverId]);
 
   return (
-    <section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <header className="mb-4 flex items-center justify-between">
-        <div>
-          <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Video Feed</p>
-          <h2 className="text-2xl font-semibold text-white">
-            {roverId ? `Rover ${roverId}` : 'No rover assigned'}
-          </h2>
-        </div>
-      </header>
+    <section className="rounded-sm bg-[#1b1b1b] p-1">
       {roverId ? (
-        <VideoTile
-          sessionInfo={info}
-          label={roverId}
-          muted={false}
-          telemetryFrame={frame}
-          batteryConfig={batteryConfig}
-        />
+        <div className="min-h-[55vh]">
+          <VideoTile
+            sessionInfo={info}
+            label={roverId}
+            muted={false}
+            telemetryFrame={frame}
+            batteryConfig={batteryConfig}
+          />
+        </div>
       ) : (
-        <p className="text-sm text-slate-400">Assignment required to initialize video.</p>
+        <p className="text-sm text-slate-400">Assign a rover to view the video feed.</p>
       )}
     </section>
   );
@@ -262,17 +130,17 @@ function AuthPanel() {
   }
 
   return (
-    <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
-      <h2 className="text-lg font-semibold text-white">Authentication</h2>
-      <form className="mt-4 flex flex-col gap-3" onSubmit={handleLogin}>
+    <div className="rounded-sm bg-[#1b1b1b] p-1 text-sm text-slate-200">
+      <p className="text-xs text-slate-400">Admin login</p>
+      <form className="mt-1 flex flex-col gap-1" onSubmit={handleLogin}>
         <input
-          className="rounded-lg border border-slate-800 bg-slate-950/60 px-3 py-2 text-white"
+          className="rounded-sm bg-black/50 px-1 py-1 text-slate-100"
           placeholder="Username"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
         />
         <input
-          className="rounded-lg border border-slate-800 bg-slate-950/60 px-3 py-2 text-white"
+          className="rounded-sm bg-black/50 px-1 py-1 text-slate-100"
           placeholder="Password"
           type="password"
           value={password}
@@ -281,25 +149,25 @@ function AuthPanel() {
         <button
           type="submit"
           disabled={loading}
-          className="rounded-lg bg-emerald-600 py-2 font-semibold text-white disabled:opacity-50"
+          className="rounded-sm bg-slate-200 px-1 py-1 text-xs font-semibold text-black disabled:opacity-50"
         >
-          {loading ? 'Logging in…' : 'Login as admin'}
+          {loading ? 'Logging in…' : 'Login'}
         </button>
       </form>
-      <div className="mt-4 flex gap-3">
+      <div className="mt-1 flex gap-1 text-xs">
         <button
           type="button"
           onClick={() => setRole('user')}
-          className="rounded-lg border border-slate-700 px-3 py-1 text-sm text-slate-200"
+          className="flex-1 rounded-sm bg-black/40 px-1 py-1 text-slate-200"
         >
-          Driver mode
+          Driver
         </button>
         <button
           type="button"
           onClick={() => setRole('spectator')}
-          className="rounded-lg border border-slate-700 px-3 py-1 text-sm text-slate-200"
+          className="flex-1 rounded-sm bg-black/40 px-1 py-1 text-slate-200"
         >
-          Spectator mode
+          Spectator
         </button>
       </div>
     </div>
@@ -308,24 +176,19 @@ function AuthPanel() {
 
 function DesktopLayout() {
   return (
-    <div className="flex flex-col gap-2">
-      <section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)_minmax(0,1fr)] gap-2">
+    <div className="flex flex-col gap-1">
+      <section className="grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.6fr)_minmax(0,0.9fr)] gap-1">
         <TelemetryPanel />
         <DriverVideoPanel />
         <DrivePanel />
       </section>
-      <section className="grid grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_minmax(0,1fr)] gap-2">
-        <div className="flex flex-col gap-2">
+      <section className="grid grid-cols-[repeat(3,minmax(0,1fr))] gap-1">
+        <div className="flex flex-col gap-1">
           <AuthPanel />
           <AdminPanel />
-          <RosterPanel />
         </div>
         <RoomCameraPanel />
-        <div className="flex flex-col gap-2">
-          <AssignmentCard />
-          <LogPanel />
-          <SessionInspector />
-        </div>
+        <LogPanel />
       </section>
     </div>
   );
@@ -333,47 +196,41 @@ function DesktopLayout() {
 
 function MobilePortraitLayout() {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-1">
       <DriverVideoPanel />
       <MobileControls />
       <DrivePanel />
       <TelemetryPanel />
-      <RosterPanel />
-      <AssignmentCard />
       <AuthPanel />
       <AdminPanel />
       <RoomCameraPanel />
       <LogPanel />
-      <SessionInspector />
     </div>
   );
 }
 
 function MobileLandscapeLayout() {
   return (
-    <div className="flex flex-col gap-2">
-      <section className="grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.2fr)_minmax(0,0.9fr)] gap-2">
-        <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-1">
+      <section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)_minmax(0,1fr)] gap-1">
+        <div className="flex flex-col gap-1">
           <DrivePanel />
           <AuxMotorControls />
         </div>
         <DriverVideoPanel />
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1">
           <MobileJoystick />
           <TelemetryPanel />
         </div>
       </section>
-      <section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2">
-        <div className="flex flex-col gap-2">
-          <RosterPanel />
-          <AssignmentCard />
+      <section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-1">
+        <div className="flex flex-col gap-1">
           <AuthPanel />
           <AdminPanel />
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1">
           <RoomCameraPanel />
           <LogPanel />
-          <SessionInspector />
         </div>
       </section>
     </div>
@@ -381,21 +238,15 @@ function MobileLandscapeLayout() {
 }
 
 function App() {
-  const { connected, session } = useSession();
   const layout = useLayoutMode();
   const renderedLayout = layout === 'desktop' ? <DesktopLayout /> : layout === 'mobile-landscape' ? <MobileLandscapeLayout /> : <MobilePortraitLayout />;
 
   return (
     <div className="min-h-screen bg-black text-slate-50">
-      <main className="mx-auto flex w-full max-w-screen-2xl flex-col gap-2 px-1 py-1">
-        <DriveControlProvider>
-          <div className="flex justify-end">
-            <StatusBadge connected={connected} role={session?.role} mode={session?.mode} />
-          </div>
-          {renderedLayout}
-          <AlertFeed />
-        </DriveControlProvider>
-      </main>
+      <DriveControlProvider>
+        <main className="flex w-full flex-col gap-1 px-1 py-1">{renderedLayout}</main>
+        <AlertFeed />
+      </DriveControlProvider>
     </div>
   );
 }