🤖 fix: threshold slider no longer blocks token meter tooltip

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`_

Author: ammar-agent

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} />

src/browser/hooks/useAutoScroll.ts

@@ -38,10 +38,18 @@ export function useAutoScroll() {
   }, []); // No deps - ref ensures we always check current value
 
   const jumpToBottom = useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.scrollTop = contentRef.current.scrollHeight;
-      setAutoScroll(true);
-    }
+    if (!contentRef.current) return;
+
+    // Double RAF: First frame for DOM updates (async highlighting, image loads),
+    // second frame to scroll after layout is complete
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (contentRef.current) {
+          contentRef.current.scrollTop = contentRef.current.scrollHeight;
+        }
+      });
+    });
+    setAutoScroll(true);
   }, []);
 
   const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {

src/cli/index.ts

@@ -42,7 +42,10 @@ if (subcommand === "run") {
   process.argv.splice(2, 1);
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   require("./api");
-} else if (subcommand === "desktop" || (isElectron && (subcommand === undefined || isElectronLaunchArg))) {
+} else if (
+  subcommand === "desktop" ||
+  (isElectron && (subcommand === undefined || isElectronLaunchArg))
+) {
   // Explicit `mux desktop`, or Electron runtime with no subcommand / Electron launch args
   launchDesktop();
 } else {