From fd80bdb0d40c7d7192847b23736c700c4176e624 Mon Sep 17 00:00:00 2001
From: Ethan Dickson <ethan@coder.com>
Date: Thu, 18 Dec 2025 15:32:30 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20make=20context=20usage=20?=
 =?UTF-8?q?tooltip=20slider=20interactive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both hover (tooltip) and click (popover) now show the same interactive
auto-compaction threshold slider with identical styling.

- Tooltip passes full autoCompaction config instead of read-only threshold
- Popover styled to match tooltip (bg, border, shadow, text size)
- Removed dead code: HorizontalThresholdIndicator and autoCompactionThreshold prop
---
 .../ContextUsageIndicatorButton.tsx           |  8 ++-
 .../RightSidebar/ContextUsageBar.tsx          | 16 +-----
 .../RightSidebar/ThresholdSlider.tsx          | 53 -------------------
 3 files changed, 7 insertions(+), 70 deletions(-)

diff --git a/src/browser/components/ContextUsageIndicatorButton.tsx b/src/browser/components/ContextUsageIndicatorButton.tsx
index 4c2187eee1..cb8b40b058 100644
--- a/src/browser/components/ContextUsageIndicatorButton.tsx
+++ b/src/browser/components/ContextUsageIndicatorButton.tsx
@@ -64,11 +64,15 @@ export const ContextUsageIndicatorButton: React.FC<ContextUsageIndicatorButtonPr
           </PopoverTrigger>
         </TooltipTrigger>
         <TooltipContent side="bottom" align="end" className="w-80">
-          <ContextUsageBar data={data} autoCompactionThreshold={autoCompaction?.threshold} />
+          <ContextUsageBar data={data} autoCompaction={autoCompaction} />
         </TooltipContent>
       </Tooltip>
 
-      <PopoverContent side="bottom" align="end" className="w-80 overflow-visible p-3">
+      <PopoverContent
+        side="bottom"
+        align="end"
+        className="bg-modal-bg border-separator-light w-80 overflow-visible rounded px-[10px] py-[6px] text-[11px] font-normal shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
+      >
         <ContextUsageBar data={data} autoCompaction={autoCompaction} />
       </PopoverContent>
     </Popover>
diff --git a/src/browser/components/RightSidebar/ContextUsageBar.tsx b/src/browser/components/RightSidebar/ContextUsageBar.tsx
index dbc68e4acb..63c987dbf0 100644
--- a/src/browser/components/RightSidebar/ContextUsageBar.tsx
+++ b/src/browser/components/RightSidebar/ContextUsageBar.tsx
@@ -1,18 +1,12 @@
 import React from "react";
 import { TokenMeter } from "./TokenMeter";
-import {
-  HorizontalThresholdSlider,
-  HorizontalThresholdIndicator,
-  type AutoCompactionConfig,
-} from "./ThresholdSlider";
+import { HorizontalThresholdSlider, type AutoCompactionConfig } from "./ThresholdSlider";
 import { formatTokens, type TokenMeterData } from "@/common/utils/tokens/tokenMeterUtils";
 
 interface ContextUsageBarProps {
   data: TokenMeterData;
   /** Auto-compaction settings for threshold slider */
   autoCompaction?: AutoCompactionConfig;
-  /** Show text-only indicator for auto-compaction threshold (for tooltips) */
-  autoCompactionThreshold?: number;
   showTitle?: boolean;
   testId?: string;
 }
@@ -20,7 +14,6 @@ interface ContextUsageBarProps {
 const ContextUsageBarComponent: React.FC<ContextUsageBarProps> = ({
   data,
   autoCompaction,
-  autoCompactionThreshold,
   showTitle = true,
   testId,
 }) => {
@@ -32,10 +25,6 @@ const ContextUsageBarComponent: React.FC<ContextUsageBarProps> = ({
 
   const showWarning = !data.maxTokens;
 
-  // Show read-only indicator when threshold provided but no interactive config
-  const showReadOnlyIndicator =
-    autoCompactionThreshold !== undefined && !autoCompaction && data.maxTokens;
-
   return (
     <div data-testid={testId} className="relative flex flex-col gap-1">
       <div className="flex items-baseline justify-between">
@@ -54,9 +43,6 @@ const ContextUsageBarComponent: React.FC<ContextUsageBarProps> = ({
       <div className="relative w-full py-2">
         <TokenMeter segments={data.segments} orientation="horizontal" />
         {autoCompaction && data.maxTokens && <HorizontalThresholdSlider config={autoCompaction} />}
-        {showReadOnlyIndicator && (
-          <HorizontalThresholdIndicator threshold={autoCompactionThreshold} />
-        )}
       </div>
 
       {showWarning && (
diff --git a/src/browser/components/RightSidebar/ThresholdSlider.tsx b/src/browser/components/RightSidebar/ThresholdSlider.tsx
index 8f864e4d16..1434c134ad 100644
--- a/src/browser/components/RightSidebar/ThresholdSlider.tsx
+++ b/src/browser/components/RightSidebar/ThresholdSlider.tsx
@@ -279,56 +279,3 @@ export const HorizontalThresholdSlider: React.FC<{ config: AutoCompactionConfig
 export const VerticalThresholdSlider: React.FC<{ config: AutoCompactionConfig }> = ({ config }) => (
   <ThresholdSlider config={config} orientation="vertical" />
 );
-
-// ----- Read-only indicator (for tooltips) -----
-
-interface ThresholdIndicatorProps {
-  /** Threshold percentage (0-100). 100 means disabled. */
-  threshold: number;
-}
-
-/**
- * A read-only visual indicator showing the auto-compaction threshold position.
- * Shows the same notch markers as the interactive slider, but without drag functionality.
- * Designed for use in tooltips where interaction isn't possible.
- */
-export const HorizontalThresholdIndicator: React.FC<ThresholdIndicatorProps> = ({ threshold }) => {
-  const isEnabled = threshold < DISABLE_THRESHOLD;
-  const color = isEnabled ? "var(--color-plan-mode)" : "var(--color-muted)";
-
-  // Container covers the full bar area
-  const containerStyle: React.CSSProperties = {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 50,
-    pointerEvents: "none",
-  };
-
-  // Indicator positioning
-  const indicatorStyle: React.CSSProperties = {
-    position: "absolute",
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    left: `${threshold}%`,
-    top: "50%",
-    transform: "translate(-50%, -50%)",
-    flexDirection: "column",
-  };
-
-  // Line between triangles
-  const lineStyle: React.CSSProperties = { width: 1, height: 6, background: color };
-
-  return (
-    <div style={containerStyle}>
-      <div style={indicatorStyle}>
-        <Triangle direction="down" color={color} />
-        <div style={lineStyle} />
-        <Triangle direction="up" color={color} />
-      </div>
-    </div>
-  );
-};