gahwah

webui/src/components/CameraServoPanel.jsx

@@ -24,7 +24,7 @@ export default function CameraServoPanel() {
   const hornAvailable = Boolean(roverId && pipeline?.horn);
   const nightVisionKey = formatKeyLabel(keymap?.nightVisionToggle?.[0]);
   const hornKey = formatKeyLabel(keymap?.hornHonk?.[0]);
-  const hornCooldownActive = (horn?.cooldownUntil ?? 0) > Date.now();
+  const hornBlocked = horn?.overheated;
   const min = typeof config?.minAngle === 'number' ? config.minAngle : -30;
   const max = typeof config?.maxAngle === 'number' ? config.maxAngle : 30;
   const value =
@@ -107,11 +107,12 @@ export default function CameraServoPanel() {
       )}
       {hornAvailable && (
         <HornControl
-          disabled={!roverId || hornCooldownActive}
+          disabled={!roverId || hornBlocked}
           onStart={startHorn}
           onStop={stopHorn}
           keyLabel={hornKey}
           active={horn?.active}
+          heat={horn?.heat}
         />
       )}
       {enabled && (

webui/src/components/ControlSummary.jsx

@@ -85,7 +85,7 @@ export function InlineCameraTilt({ keymap }) {
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
   const nightVisionState = pipeline?.nightVisionState;
   const hornAvailable = Boolean(roverId && pipeline?.horn);
-  const hornCooldownActive = (horn?.cooldownUntil ?? 0) > Date.now();
+  const hornBlocked = horn?.overheated;
   const min = typeof config?.minAngle === 'number' ? config.minAngle : -30;
   const max = typeof config?.maxAngle === 'number' ? config.maxAngle : 30;
   const value =
@@ -134,11 +134,12 @@ export function InlineCameraTilt({ keymap }) {
       )}
       {hornAvailable && (
         <HornControl
-          disabled={!roverId || hornCooldownActive}
+          disabled={!roverId || hornBlocked}
           onStart={startHorn}
           onStop={stopHorn}
           keyLabel={hornLabel}
           active={horn?.active}
+          heat={horn?.heat}
         />
       )}
       {enabled && (

webui/src/components/HornControl.jsx

@@ -15,6 +15,7 @@ export default function HornControl({
   onStop,
   keyLabel,
   active,
+  heat = 0,
   className = '',
 }) {
   const [pressed, setPressed] = useState(false);
@@ -36,9 +37,10 @@ export default function HornControl({
   }, [hornSettings?.freqs, hornSettings?.waveform]);
 
   const isActive = Boolean(active);
+  const clampedHeat = Math.max(0, Math.min(1, Number(heat) || 0));
   const buttonClasses = useMemo(() => {
     const base =
-      'group flex w-full flex-col gap-0.5 rounded-xl border-2 px-1 py-1.5 text-xs font-semibold';
+      'group relative flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-1 py-1.5 text-xs font-semibold';
     const active = 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50';
     const inactive = 'border-cyan-300/70 bg-cyan-900 text-cyan-50 hover:bg-cyan-800';
     return [base, isActive ? active : inactive, 'disabled:opacity-50', className]
@@ -61,6 +63,12 @@ export default function HornControl({
     }
   };
 
+  useEffect(() => {
+    if (!isActive && pressed) {
+      setPressed(false);
+    }
+  }, [isActive, pressed]);
+
   const formattedWaveform = waveform === 'sine' ? 'sine' : 'saw';
 
   const updateWaveform = useCallback(
@@ -111,7 +119,23 @@ export default function HornControl({
       onBlur={stop}
       className={buttonClasses}
     >
-      <div className="flex items-center justify-between gap-0.5">
+      <div
+        className="pointer-events-none absolute inset-0 opacity-70"
+        style={{
+          background: `linear-gradient(90deg, rgba(14,116,144,0.7) ${clampedHeat * 100}%, rgba(0,0,0,0) ${
+            clampedHeat * 100
+          }%)`,
+        }}
+      />
+      <div
+        className={`pointer-events-none absolute inset-0 transition-opacity ${
+          isActive ? 'opacity-40' : 'opacity-0'
+        }`}
+        style={{
+          background: 'linear-gradient(90deg, rgba(217,70,239,0.75), rgba(244,114,182,0.35))',
+        }}
+      />
+      <div className="relative z-10 flex items-center justify-between gap-0.5">
         <span className="flex items-center gap-0.5 text-sm font-semibold">
           <span>Horn</span>
           {keyLabel ? (
@@ -128,7 +152,7 @@ export default function HornControl({
           {isActive ? 'Honk' : 'Hold'}
         </span>
       </div>
-      <div className="grid grid-cols-[minmax(0,1.2fr)_repeat(4,minmax(0,1fr))] items-center gap-0.5 text-[0.65rem]">
+      <div className="relative z-10 grid grid-cols-[minmax(0,1.2fr)_repeat(4,minmax(0,1fr))] items-center gap-0.5 text-[0.65rem]">
         <label className="flex items-center gap-0.5 text-slate-200">
           <span className="text-slate-300">Wave</span>
           <select

webui/src/components/MobileControls.jsx

@@ -146,7 +146,7 @@ function MobileJoystickPanel({ layout }) {
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
   const nightVisionState = pipeline?.nightVisionState;
   const hornAvailable = Boolean(roverId && pipeline?.horn);
-  const hornCooldownActive = (horn?.cooldownUntil ?? 0) > Date.now();
+  const hornBlocked = horn?.overheated;
   const cameraMin = typeof cameraConfig?.minAngle === 'number' ? cameraConfig.minAngle : -45;
   const cameraMax = typeof cameraConfig?.maxAngle === 'number' ? cameraConfig.maxAngle : 45;
   const cameraValue =
@@ -228,10 +228,11 @@ function MobileJoystickPanel({ layout }) {
           )}
           {hornAvailable && (
             <HornControl
-              disabled={disabled || hornCooldownActive}
+              disabled={disabled || hornBlocked}
               onStart={startHorn}
               onStop={stopHorn}
               active={horn?.active}
+              heat={horn?.heat}
             />
           )}
           {cameraEnabled && (