description popup goes away when you move now

webui/src/components/DriverVideoPanel/index.jsx

@@ -200,6 +200,7 @@ export default function DriverVideoPanel({ layoutFormat = 'desktop' }) {
           notTurnCountdownText={notTurnCountdownText}
           showPreviewReason={shouldUsePreview}
           notTurnFlashAt={notTurnFlashAt}
+          controlIntentAt={lastControlIntentAt}
         />
       ) : (
         <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]">

webui/src/components/VideoTile/RoverDescriptionOverlay.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-const LARGE_VISIBLE_MS = 6000;
+const DISMISS_AFTER_INPUT_MS = 5000;
 const LARGE_FADE_MS = 700;
 
 export default function RoverDescriptionOverlay({
@@ -8,25 +8,52 @@ export default function RoverDescriptionOverlay({
   variant = 'default',
   mobileHud = false,
   displayKey = '',
+  controlIntentAt = 0,
 }) {
   const [largeVisible, setLargeVisible] = useState(false);
   const [largeFading, setLargeFading] = useState(false);
+  const baselineIntentRef = useRef(0);
+  const fadeTimerRef = useRef(null);
+  const hideTimerRef = useRef(null);
+
+  useEffect(
+    () => () => {
+      clearTimeout(fadeTimerRef.current);
+      clearTimeout(hideTimerRef.current);
+    },
+    [],
+  );
 
   useEffect(() => {
     if (variant !== 'default' || !description) {
       setLargeVisible(false);
       setLargeFading(false);
+      clearTimeout(fadeTimerRef.current);
+      clearTimeout(hideTimerRef.current);
       return undefined;
     }
+    clearTimeout(fadeTimerRef.current);
+    clearTimeout(hideTimerRef.current);
     setLargeVisible(true);
     setLargeFading(false);
-    const fadeTimer = setTimeout(() => setLargeFading(true), LARGE_VISIBLE_MS);
-    const hideTimer = setTimeout(() => setLargeVisible(false), LARGE_VISIBLE_MS + LARGE_FADE_MS);
-    return () => {
-      clearTimeout(fadeTimer);
-      clearTimeout(hideTimer);
-    };
-  }, [description, displayKey, variant]);
+    baselineIntentRef.current = Number(controlIntentAt) || 0;
+    return undefined;
+  }, [controlIntentAt, description, displayKey, variant]);
+
+  useEffect(() => {
+    if (variant !== 'default' || !description || !largeVisible || largeFading) return;
+    const nextIntent = Number(controlIntentAt) || 0;
+    if (nextIntent <= baselineIntentRef.current) return;
+    if (fadeTimerRef.current || hideTimerRef.current) return;
+    fadeTimerRef.current = setTimeout(() => {
+      setLargeFading(true);
+      fadeTimerRef.current = null;
+    }, DISMISS_AFTER_INPUT_MS);
+    hideTimerRef.current = setTimeout(() => {
+      setLargeVisible(false);
+      hideTimerRef.current = null;
+    }, DISMISS_AFTER_INPUT_MS + LARGE_FADE_MS);
+  }, [controlIntentAt, description, largeFading, largeVisible, variant]);
 
   if (!description) return null;
 
@@ -43,14 +70,16 @@ export default function RoverDescriptionOverlay({
   if (variant !== 'default' || !largeVisible) return null;
 
   return (
-    <div className="pointer-events-none absolute inset-x-0 top-2 z-50 flex justify-center">
+    <div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center">
       <div
-        className={`surface max-w-[94%] border border-slate-500/85 px-2 py-1 text-center font-semibold text-slate-100 shadow-2xl transition-opacity duration-700 ${
+        className={`surface max-w-[94%] border border-slate-400/70 bg-neutral-900/45 px-2 py-1 text-center font-semibold text-slate-100 shadow-xl transition-opacity duration-700 ${
           largeFading ? 'opacity-0' : 'opacity-100'
         } ${mobileHud ? 'text-[1rem] leading-tight' : 'text-[1.5rem] leading-tight'}`}
       >
-        <p>Just so you know, this rover</p>
-        {description}
+        <p>{description}</p>
+        <p className={`${mobileHud ? 'text-[0.58rem]' : 'text-[0.72rem]'} mt-0.5 font-normal text-slate-300`}>
+          This fades 5 seconds after your first control input.
+        </p>
       </div>
     </div>
   );

webui/src/components/VideoTile/index.jsx

@@ -53,6 +53,7 @@ export default function VideoTile({
   notTurnCountdownText = null,
   showPreviewReason = false,
   notTurnFlashAt = 0,
+  controlIntentAt = 0,
 }) {
   const discordUrl = useSessionSelector((state) => {
     const socials = state.session?.socials || [];
@@ -640,6 +641,7 @@ export default function VideoTile({
             variant={hudVariant}
             mobileHud={mobileHud}
             displayKey={descriptionDisplayKey}
+            controlIntentAt={controlIntentAt}
           />
         ) : null}
         {!noHud ? (