tweaking + hud

webui/src/components/DriveDockAction/index.jsx

@@ -121,16 +121,13 @@ export default function DriveDockAction({
   const dockKeyLabel = formatKeyLabel(keymap?.dockMacro?.[0]);
 
   const dockInstructions = {
-    summary: 'This enables precision manual docking assist in the web UI.',
+    summary: 'Use assist mode to manually line up with the dock.',
     steps: [
       'Line up the round front sensor on the rover with the sensor on the dock',
-      'Camera will tilt all the way down so you can see the front sensor',
-      'Drive speed will be limited for precise alignment',
+      'Use tiny forward/reverse turns until the sensors are centered',
+      'When contact is made, wait for docked + charging status',
     ],
   };
-  const dockButtonCaption = manualAssistActive
-    ? 'Manual docking assist is active: slow speed limit + camera down.'
-    : 'Click to enter manual docking assist.';
 
   const startDriveInstructions = {
     summary: 'You must enable driving mode before you can move the rover.',
@@ -138,7 +135,7 @@ export default function DriveDockAction({
   };
   const dockValue = docked ? 'Docked' : 'Undocked';
   const dockTone = docked ? 'good' : 'bad';
-  const chargeValue = charging ? 'Charging' : docked ? 'Charging in 5s' : '—';
+  const chargeValue = charging ? 'Charging' : docked ? 'Charging soon...' : '—';
   const chargeTone = charging ? 'good' : docked ? 'warn' : 'bad';
 
   const handleReturnToDrive = async () => {
@@ -200,7 +197,6 @@ export default function DriveDockAction({
   const ctaText = 'text-center';
   const ctaLayout = 'items-center justify-between';
   const compactLayout = 'items-center justify-center';
-  const ctaTextAndLayout = `${ctaText} ${ctaLayout}`;
   const ctaSize = isMobile ? 'text-sm font-semibold' : '';
   const emeraldCta =
     'border-emerald-300/70 bg-emerald-800 text-emerald-50 hover:bg-emerald-700 focus-visible:ring-emerald-300';
@@ -322,14 +318,11 @@ export default function DriveDockAction({
         </div>
         {!isMobile && expanded && (
           <>
-            <p className="text-sm text-indigo-50/90">{dockButtonCaption}</p>
+            <StepList steps={dockInstructions.steps} tone="indigo" />
             <div className="flex w-full flex-1 flex-col gap-0.5 self-stretch">
               <StatusRow label="Dock" value={dockValue} tone={dockTone} />
               <StatusRow label="Charge" value={chargeValue} tone={chargeTone} />
             </div>
-            <div className="text-xs text-indigo-100/80">
-              Align front sensor to dock sensor; use tiny movements.
-            </div>
           </>
         )}
       </button>

webui/src/components/DriverVideo/index.jsx

@@ -4,6 +4,7 @@ import { useControlSystem } from '../../controls/index.js';
 import { useDriverVideoModePolicy } from '../../hooks/useDriverVideoModePolicy.js';
 import TurnsOverlay from '../HudOverlays/TurnsOverlay/index.jsx';
 import HudOverlay from '../HudOverlays/HudOverlay/index.jsx';
+import ManualDockAssistOverlay from '../HudOverlays/ManualDockAssistOverlay/index.jsx';
 import RoverDescriptionOverlay from '../HudOverlays/RoverDescriptionOverlay/index.jsx';
 import OvercurrentOverlay from '../HudOverlays/OvercurrentOverlay/index.jsx';
 import LowBatteryOverlay from '../HudOverlays/LowBatteryOverlay/index.jsx';
@@ -50,6 +51,7 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
             mobileHud={mobileHud}
             labelScale={1}
           />
+          <ManualDockAssistOverlay mobileHud={mobileHud} />
           <HudChatInput compact={mobileHud} />
           <OvercurrentOverlay compact={mobileHud} />
           <LowBatteryOverlay compact={mobileHud} />

webui/src/components/HudOverlays/ManualDockAssistOverlay/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useControlSystem } from '../../../controls/index.js';
+
+function ManualDockAssistOverlay({ mobileHud = false }) {
+  const {
+    state: { manualDockAssist },
+  } = useControlSystem();
+  const active = Boolean(manualDockAssist?.active);
+  if (!active) return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-0">
+      <div
+        className={`absolute left-2 rounded-lg border border-amber-200/70 bg-amber-900/85 px-2 py-1 font-semibold tracking-wide text-amber-50 shadow-lg ${
+          mobileHud ? 'top-2 text-[0.65rem]' : 'top-2 text-xs'
+        }`}
+      >
+        DOCKING ASSIST ACTIVE
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(ManualDockAssistOverlay);