conn status in admin panel

webui/src/components/AdminPanel.jsx

@@ -1,6 +1,7 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useCommandPipeline } from '../controls/commandPipeline.js';
 import { useSession } from '../context/SessionContext.jsx';
+import { useSocket } from '../context/SocketContext.jsx';
 import RoverRoster from './RoverRoster.jsx';
 
 const MODES = [
@@ -14,10 +15,12 @@ const IR_SHOT_CODE = 200;
 
 export default function AdminPanel() {
   const { session, lockRover, setMode, requestControl } = useSession();
+  const socket = useSocket();
   const pipeline = useCommandPipeline();
   const roster = useMemo(() => session?.roster ?? [], [session?.roster]);
   const [lockStates, setLockStates] = useState({});
   const health = session?.health || null;
+  const [transport, setTransport] = useState(null);
 
   const isAdmin =
     session?.role === 'admin' ||
@@ -71,18 +74,38 @@ export default function AdminPanel() {
     return map;
   }, [roster, lockStates]);
 
+  useEffect(() => {
+    if (!socket) return undefined;
+    const updateTransport = () => {
+      const name = socket.io?.engine?.transport?.name || null;
+      setTransport(name);
+    };
+    updateTransport();
+    socket.on('connect', updateTransport);
+    socket.on('disconnect', () => setTransport(null));
+    socket.io?.engine?.on('upgrade', updateTransport);
+    return () => {
+      socket.off('connect', updateTransport);
+      socket.off('disconnect');
+      socket.io?.engine?.off('upgrade', updateTransport);
+    };
+  }, [socket]);
+
   return (
     <section className="panel-section space-y-0.5 text-base">
       {isAdmin ? (
         <div className="flex items-center justify-between gap-0.5 text-sm">
           <span>Admin controls</span>
-          <select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
-            {MODES.map((mode) => (
-              <option key={mode.key} value={mode.key}>
-                {mode.label}
-              </option>
-            ))}
-          </select>
+          <div className="flex items-center gap-0.5">
+            <span className="panel-muted text-xs">{transport ? `Conn: ${transport}` : 'Conn: —'}</span>
+            <select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
+              {MODES.map((mode) => (
+                <option key={mode.key} value={mode.key}>
+                  {mode.label}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
       ) : (
         <div className="flex items-center justify-between gap-0.5 text-sm">