From 07deaa9d903e120d9717062e81486d5ec009537e Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Wed, 3 Dec 2025 13:21:55 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20threshold=20slider=20no?=
 =?UTF-8?q?=20longer=20blocks=20token=20meter=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The threshold slider was covering the entire bar container, intercepting
all mouse events and preventing the token meter tooltip from showing.

Fix: Use pointer-events: none on the container and only capture events
in a small drag zone around the indicator. This allows the tooltip to
show when hovering elsewhere on the bar.

---

_Generated with `mux`_
---
 .../RightSidebar/ThresholdSlider.tsx          | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/browser/components/RightSidebar/ThresholdSlider.tsx b/src/browser/components/RightSidebar/ThresholdSlider.tsx
index e028946bf4..ed466bde7a 100644
--- a/src/browser/components/RightSidebar/ThresholdSlider.tsx
+++ b/src/browser/components/RightSidebar/ThresholdSlider.tsx
@@ -174,15 +174,38 @@ export const ThresholdSlider: React.FC<ThresholdSliderProps> = ({ config, orient
   const color = isEnabled ? "var(--color-plan-mode)" : "var(--color-muted)";
   const tooltipText = getTooltipText(config.threshold, orientation);
 
-  // Container styles
+  // Container styles - covers the full bar area for drag handling
+  // Uses pointer-events: none by default, only the indicator handle has pointer-events: auto
+  // This allows the token meter tooltip to work when hovering elsewhere on the bar
   const containerStyle: React.CSSProperties = {
     position: "absolute",
-    cursor: isHorizontal ? "ew-resize" : "ns-resize",
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
     zIndex: 50,
+    pointerEvents: "none", // Let events pass through to tooltip beneath
+  };
+
+  // Drag handle around the indicator - this captures mouse events
+  const DRAG_ZONE_SIZE = 16; // pixels on each side of the indicator
+  const handleStyle: React.CSSProperties = {
+    position: "absolute",
+    cursor: isHorizontal ? "ew-resize" : "ns-resize",
+    pointerEvents: "auto", // Only this element captures events
+    ...(isHorizontal
+      ? {
+          left: `calc(${config.threshold}% - ${DRAG_ZONE_SIZE}px)`,
+          width: DRAG_ZONE_SIZE * 2,
+          top: 0,
+          bottom: 0,
+        }
+      : {
+          top: `calc(${config.threshold}% - ${DRAG_ZONE_SIZE}px)`,
+          height: DRAG_ZONE_SIZE * 2,
+          left: 0,
+          right: 0,
+        }),
   };
 
   // Indicator positioning - use transform for centering on both axes
@@ -215,15 +238,17 @@ export const ThresholdSlider: React.FC<ThresholdSliderProps> = ({ config, orient
   const containerRect = containerRef.current?.getBoundingClientRect();
 
   return (
-    <div
-      ref={containerRef}
-      style={containerStyle}
-      onMouseDown={handleMouseDown}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      // Horizontal uses native title (simpler, no clipping issues with wide tooltips)
-      title={isHorizontal ? tooltipText : undefined}
-    >
+    <div ref={containerRef} style={containerStyle}>
+      {/* Drag handle - captures mouse events in a small zone around the indicator */}
+      <div
+        style={handleStyle}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        // Horizontal uses native title (simpler, no clipping issues with wide tooltips)
+        title={isHorizontal ? tooltipText : undefined}
+      />
+
       {/* Visual indicator - pointer events disabled */}
       <div style={indicatorStyle}>
         <Triangle direction={isHorizontal ? "down" : "right"} color={color} />