🤖 fix: make context usage tooltip slider interactive

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>

src/browser/components/RightSidebar/ContextUsageBar.tsx

@@ -1,26 +1,19 @@
 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;
 }
 
 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 && (

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>
-  );
-};