🤖 refactor: unify ThresholdSlider for horizontal and vertical orientations

ammar-agent · mux · ammar-agent · commit 4d31e9e43345 · 2025-12-01T12:46:05.000-06:00
- ThresholdSlider component now supports both orientations
- Removed 50% minimum threshold - allow 0-90% (100% = disabled)
- Added VerticalThresholdSlider to VerticalTokenMeter
- Both sliders share the same per-model threshold state
- Use native title tooltips for hover feedback

Co-authored-by: mux &lt;mux@coder.com&gt;
diff --git a/src/browser/components/RightSidebar/ThresholdSlider.tsx b/src/browser/components/RightSidebar/ThresholdSlider.tsx
@@ -11,13 +11,14 @@ export interface AutoCompactionConfig {
   setThreshold: (threshold: number) => void;
 }
 
-interface HorizontalThresholdSliderProps {
+interface ThresholdSliderProps {
   config: AutoCompactionConfig;
+  orientation: "horizontal" | "vertical";
 }
 
 // ----- Constants -----
 
-/** Threshold at which we consider auto-compaction disabled (dragged all the way right) */
+/** Threshold at which we consider auto-compaction disabled (dragged all the way to end) */
 const DISABLE_THRESHOLD = 100;
 
 /** Size of the triangle markers in pixels */
@@ -26,27 +27,65 @@ const TRIANGLE_SIZE = 4;
 // ----- Subcomponents -----
 
 /** CSS triangle pointing in specified direction */
-const Triangle: React.FC<{ direction: "up" | "down"; color: string }> = ({ direction, color }) => (
-  <div
-    style={{
-      width: 0,
-      height: 0,
-      borderLeft: `${TRIANGLE_SIZE}px solid transparent`,
-      borderRight: `${TRIANGLE_SIZE}px solid transparent`,
-      ...(direction === "down"
-        ? { borderTop: `${TRIANGLE_SIZE}px solid ${color}` }
-        : { borderBottom: `${TRIANGLE_SIZE}px solid ${color}` }),
-    }}
-  />
-);
+const Triangle: React.FC<{ direction: "up" | "down" | "left" | "right"; color: string }> = ({
+  direction,
+  color,
+}) => {
+  const styles: React.CSSProperties = { width: 0, height: 0 };
+
+  if (direction === "up" || direction === "down") {
+    styles.borderLeft = `${TRIANGLE_SIZE}px solid transparent`;
+    styles.borderRight = `${TRIANGLE_SIZE}px solid transparent`;
+    if (direction === "down") {
+      styles.borderTop = `${TRIANGLE_SIZE}px solid ${color}`;
+    } else {
+      styles.borderBottom = `${TRIANGLE_SIZE}px solid ${color}`;
+    }
+  } else {
+    styles.borderTop = `${TRIANGLE_SIZE}px solid transparent`;
+    styles.borderBottom = `${TRIANGLE_SIZE}px solid transparent`;
+    if (direction === "right") {
+      styles.borderLeft = `${TRIANGLE_SIZE}px solid ${color}`;
+    } else {
+      styles.borderRight = `${TRIANGLE_SIZE}px solid ${color}`;
+    }
+  }
+
+  return <div style={styles} />;
+};
+
+// ----- Shared utilities -----
 
-// ----- Main component: HorizontalThresholdSlider -----
+/** Clamp and snap percentage to valid threshold values */
+const snapPercent = (raw: number): number => {
+  const clamped = Math.max(AUTO_COMPACTION_THRESHOLD_MIN, Math.min(100, raw));
+  return Math.round(clamped / 5) * 5;
+};
+
+/** Apply threshold, handling the disable case */
+const applyThreshold = (pct: number, setThreshold: (v: number) => void): void => {
+  setThreshold(pct >= DISABLE_THRESHOLD ? 100 : Math.min(pct, AUTO_COMPACTION_THRESHOLD_MAX));
+};
+
+/** Get tooltip text based on threshold */
+const getTooltip = (threshold: number, orientation: "horizontal" | "vertical"): string => {
+  const isEnabled = threshold < DISABLE_THRESHOLD;
+  const direction = orientation === "horizontal" ? "left" : "up";
+  return isEnabled
+    ? `Auto-compact at ${threshold}% · Drag to adjust (per-model)`
+    : `Auto-compact disabled · Drag ${direction} to enable (per-model)`;
+};
+
+// ----- Main component: ThresholdSlider -----
 
 /**
- * A draggable threshold indicator for horizontal progress bars.
+ * A draggable threshold indicator for progress bars (horizontal or vertical).
  *
- * Renders as a vertical line with triangle handles at the threshold position.
- * Drag left/right to adjust threshold. Drag to 100% to disable.
+ * - Horizontal: Renders as a vertical line with up/down triangle handles.
+ *   Drag left/right to adjust threshold. Drag to 100% (right) to disable.
+ *
+ * - Vertical: Renders as a horizontal line with left/right triangle handles.
+ *   Drag up/down to adjust threshold. Drag to 100% (bottom) to disable.
  *
  * USAGE: Place as a sibling AFTER the progress bar, both inside a relative container.
  *
@@ -57,30 +96,30 @@ const Triangle: React.FC<{ direction: "up" | "down"; color: string }> = ({ direc
  * how Tailwind's JIT compiler or class application interacts with dynamically
  * rendered components in this context. Inline styles work reliably.
  */
-export const HorizontalThresholdSlider: React.FC<HorizontalThresholdSliderProps> = ({ config }) => {
+export const ThresholdSlider: React.FC<ThresholdSliderProps> = ({ config, orientation }) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const isHorizontal = orientation === "horizontal";
 
   const handleMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
 
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
 
-    const calcPercent = (clientX: number) => {
-      const raw = ((clientX - rect.left) / rect.width) * 100;
-      const clamped = Math.max(AUTO_COMPACTION_THRESHOLD_MIN, Math.min(100, raw));
-      return Math.round(clamped / 5) * 5;
+    const calcPercent = (clientX: number, clientY: number) => {
+      if (isHorizontal) {
+        return snapPercent(((clientX - rect.left) / rect.width) * 100);
+      } else {
+        // Vertical: top = low %, bottom = high %
+        return snapPercent(((clientY - rect.top) / rect.height) * 100);
+      }
     };
 
-    const applyThreshold = (pct: number) => {
-      config.setThreshold(
-        pct >= DISABLE_THRESHOLD ? 100 : Math.min(pct, AUTO_COMPACTION_THRESHOLD_MAX)
-      );
-    };
+    const apply = (pct: number) => applyThreshold(pct, config.setThreshold);
 
-    applyThreshold(calcPercent(e.clientX));
+    apply(calcPercent(e.clientX, e.clientY));
 
-    const onMove = (ev: MouseEvent) => applyThreshold(calcPercent(ev.clientX));
+    const onMove = (ev: MouseEvent) => apply(calcPercent(ev.clientX, ev.clientY));
     const onUp = () => {
       document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", onUp);
@@ -91,42 +130,64 @@ export const HorizontalThresholdSlider: React.FC<HorizontalThresholdSliderProps>
 
   const isEnabled = config.threshold < DISABLE_THRESHOLD;
   const color = isEnabled ? "var(--color-plan-mode)" : "var(--color-muted)";
-  const title = isEnabled
-    ? `Auto-compact at ${config.threshold}% · Drag to adjust (per-model)`
-    : "Auto-compact disabled · Drag left to enable (per-model)";
+  const title = getTooltip(config.threshold, orientation);
+
+  // Container styles
+  const containerStyle: React.CSSProperties = {
+    position: "absolute",
+    cursor: isHorizontal ? "ew-resize" : "ns-resize",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 50,
+  };
 
-  return (
-    <div
-      ref={containerRef}
-      style={{
-        position: "absolute",
-        cursor: "ew-resize",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 50,
-      }}
-      onMouseDown={handleMouseDown}
-      title={title}
-    >
-      {/* Indicator: top triangle + line + bottom triangle, centered on threshold */}
-      <div
-        style={{
-          position: "absolute",
+  // Indicator positioning - use transform for centering on both axes
+  const indicatorStyle: React.CSSProperties = {
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    ...(isHorizontal
+      ? {
           left: `${config.threshold}%`,
-          top: `calc(50% - ${TRIANGLE_SIZE + 3}px)`,
-          transform: "translateX(-50%)",
-          pointerEvents: "none",
-          display: "flex",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
           flexDirection: "column",
-          alignItems: "center",
-        }}
-      >
-        <Triangle direction="down" color={color} />
-        <div style={{ width: 1, height: 6, background: color }} />
-        <Triangle direction="up" color={color} />
+        }
+      : {
+          top: `${config.threshold}%`,
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          flexDirection: "row",
+        }),
+  };
+
+  // Line between triangles
+  const lineStyle: React.CSSProperties = isHorizontal
+    ? { width: 1, height: 6, background: color }
+    : { width: 6, height: 1, background: color };
+
+  return (
+    <div ref={containerRef} style={containerStyle} onMouseDown={handleMouseDown} title={title}>
+      <div style={indicatorStyle}>
+        <Triangle direction={isHorizontal ? "down" : "right"} color={color} />
+        <div style={lineStyle} />
+        <Triangle direction={isHorizontal ? "up" : "left"} color={color} />
       </div>
     </div>
   );
 };
+
+// ----- Convenience exports -----
+
+/** Horizontal threshold slider (alias for backwards compatibility) */
+export const HorizontalThresholdSlider: React.FC<{ config: AutoCompactionConfig }> = ({
+  config,
+}) => <ThresholdSlider config={config} orientation="horizontal" />;
+
+/** Vertical threshold slider */
+export const VerticalThresholdSlider: React.FC<{ config: AutoCompactionConfig }> = ({ config }) => (
+  <ThresholdSlider config={config} orientation="vertical" />
+);
diff --git a/src/browser/components/RightSidebar/VerticalTokenMeter.tsx b/src/browser/components/RightSidebar/VerticalTokenMeter.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { TokenMeter } from "./TokenMeter";
-import type { AutoCompactionConfig } from "./ThresholdSlider";
+import { VerticalThresholdSlider, type AutoCompactionConfig } from "./ThresholdSlider";
 import {
   type TokenMeterData,
   formatTokens,
@@ -10,11 +10,14 @@ import {
 
 interface VerticalTokenMeterProps {
   data: TokenMeterData;
-  /** Auto-compaction settings - reserved for future vertical slider */
+  /** Auto-compaction settings for threshold slider */
   autoCompaction?: AutoCompactionConfig;
 }
 
-const VerticalTokenMeterComponent: React.FC<VerticalTokenMeterProps> = ({ data }) => {
+const VerticalTokenMeterComponent: React.FC<VerticalTokenMeterProps> = ({
+  data,
+  autoCompaction,
+}) => {
   if (data.segments.length === 0) return null;
 
   // Scale the bar based on context window usage (0-100%)
@@ -35,14 +38,15 @@ const VerticalTokenMeterComponent: React.FC<VerticalTokenMeterProps> = ({ data }
         </div>
       )}
 
-      {/* Bar container - flex to scale bar proportionally to usage */}
-      <div className="flex min-h-0 w-full flex-1 flex-col items-center">
+      {/* Bar container - relative for slider positioning, flex for proportional scaling */}
+      <div className="relative flex min-h-0 w-full flex-1 flex-col items-center">
         {/* Used portion - grows based on usage percentage */}
         <div
-          className="flex min-h-[20px] w-full flex-col items-center px-[6px]"
+          className="flex min-h-[20px] w-full flex-col items-center"
           style={{ flex: usagePercentage }}
         >
-          <div className="flex flex-1 flex-col">
+          {/* [&>*] selector makes TooltipWrapper fill available space */}
+          <div className="flex w-full flex-1 flex-col items-center [&>*]:flex [&>*]:flex-1 [&>*]:flex-col">
             <TooltipWrapper>
               <TokenMeter
                 segments={data.segments}
@@ -84,6 +88,9 @@ const VerticalTokenMeterComponent: React.FC<VerticalTokenMeterProps> = ({ data }
         </div>
         {/* Empty portion - takes remaining space */}
         <div className="w-full" style={{ flex: Math.max(0, 100 - usagePercentage) }} />
+
+        {/* Threshold slider overlay - only when autoCompaction config provided and maxTokens known */}
+        {autoCompaction && data.maxTokens && <VerticalThresholdSlider config={autoCompaction} />}
       </div>
     </div>
   );
diff --git a/src/common/constants/ui.ts b/src/common/constants/ui.ts
@@ -12,9 +12,10 @@ export const COMPACTED_EMOJI = "📦";
 
 /**
  * Auto-compaction threshold bounds (percentage)
- * Too low risks frequent interruptions; too high risks hitting context limits
+ * MIN: Allow any value - user can choose aggressive compaction if desired
+ * MAX: Cap at 90% to leave buffer before hitting context limit
  */
-export const AUTO_COMPACTION_THRESHOLD_MIN = 50;
+export const AUTO_COMPACTION_THRESHOLD_MIN = 0;
 export const AUTO_COMPACTION_THRESHOLD_MAX = 90;
 
 /**
