guh wh

webui/src/components/MobileControls.jsx

@@ -131,10 +131,20 @@ function FloatingJoystick({ disabled, layout, onMove, onStop }) {
 
 function MobileJoystickPanel({ layout }) {
   const {
-    state: { roverId },
-    actions: { setDriveVector, registerInputState, stopAllMotion },
+    state: { roverId, camera },
+    actions: { setDriveVector, registerInputState, stopAllMotion, setServoAngle },
   } = useControlSystem();
   const disabled = !roverId;
+  const cameraConfig = camera?.config;
+  const cameraEnabled = Boolean(roverId && camera?.enabled && cameraConfig);
+  const cameraMin = typeof cameraConfig?.minAngle === 'number' ? cameraConfig.minAngle : -45;
+  const cameraMax = typeof cameraConfig?.maxAngle === 'number' ? cameraConfig.maxAngle : 45;
+  const cameraValue =
+    typeof camera?.angle === 'number'
+      ? camera.angle
+      : typeof cameraConfig?.homeAngle === 'number'
+        ? cameraConfig.homeAngle
+        : (cameraMin + cameraMax) / 2;
 
   const handleMove = useCallback(
     (vector = {}) => {
@@ -157,6 +167,13 @@ function MobileJoystickPanel({ layout }) {
     registerInputState(SOURCE, { vector: zero, lastEvent: 'stop' });
   }, [disabled, registerInputState, setDriveVector]);
 
+  const handleCameraSlider = (event) => {
+    if (!cameraEnabled) return;
+    const next = Number(event.target.value);
+    if (Number.isNaN(next)) return;
+    setServoAngle(next);
+  };
+
   return (
     <div className="flex flex-col gap-1 text-slate-100">
       <DriveModeToggle size="compact" />
@@ -169,6 +186,23 @@ function MobileJoystickPanel({ layout }) {
       >
         Panic Stop
       </button>
+      {cameraEnabled && (
+        <div className="rounded-lg bg-slate-900/70 p-2 text-xs">
+          <div className="flex items-center justify-between text-[0.7rem] uppercase tracking-wide text-slate-400">
+            <span>Camera Tilt</span>
+            <span className="font-mono text-slate-200">{cameraValue.toFixed(1)}°</span>
+          </div>
+          <input
+            type="range"
+            min={cameraMin}
+            max={cameraMax}
+            step={0.5}
+            value={cameraValue}
+            onChange={handleCameraSlider}
+            className="mt-1 w-full accent-cyan-400"
+          />
+        </div>
+      )}
     </div>
   );
 }

webui/src/components/controls/DriveModeToggle.jsx

@@ -1,13 +1,19 @@
 import { useState } from 'react';
 import { useControlSystem } from '../../controls/index.js';
+import { useTelemetryFrame } from '../../context/TelemetryContext.jsx';
 
 export default function DriveModeToggle({ size = 'default' }) {
   const {
-    state: { roverId, mode },
+    state: { roverId },
     actions,
   } = useControlSystem();
   const [pending, setPending] = useState(null);
   const disabled = !roverId || pending !== null;
+  const frame = useTelemetryFrame(roverId);
+  const oiLabel = frame?.sensors?.oiMode?.label || 'Unknown';
+  const oiNormalized = oiLabel.toLowerCase();
+  const driveReady = oiNormalized === 'full';
+  const currentLabel = driveReady ? 'Drive Ready' : `OI Mode: ${oiLabel}`;
 
   const handleDrive = async () => {
     if (!roverId) return;
@@ -35,12 +41,13 @@ export default function DriveModeToggle({ size = 'default' }) {
     size === 'compact'
       ? 'text-xs px-1 py-0.5'
       : 'text-sm px-1.5 py-0.5';
-  const currentLabel = mode === 'dock' ? 'Dock mode' : 'Drive mode';
 
   return (
     <div className="rounded-sm bg-black/30 p-1 text-slate-100">
       <div className="flex items-center justify-between">
-        <span className={`rounded-full bg-slate-800 ${pillClass}`}>{currentLabel}</span>
+        <span className={`rounded-full ${driveReady ? 'bg-emerald-700' : 'bg-indigo-700'} ${pillClass}`}>
+          {currentLabel}
+        </span>
         <span className="text-[0.65rem] text-slate-400">Rover {roverId ?? '—'}</span>
       </div>
       <div className="mt-1 grid grid-cols-2 gap-1 text-xs">