🤖 feat: add auto-compaction threshold indicator to context bar (#1206)

Shows a small vertical tick mark on the context usage bar at the
auto-compaction threshold position. Hidden when disabled.

---
_Generated with `mux` • Model: `mux-gateway:anthropic/claude-opus-4-5` •
Thinking: `high`_

Author: ibetitsmike

src/browser/components/ContextUsageIndicatorButton.tsx

@@ -6,6 +6,18 @@ import { TokenMeter } from "./RightSidebar/TokenMeter";
 import type { AutoCompactionConfig } from "./RightSidebar/ThresholdSlider";
 import { formatTokens, type TokenMeterData } from "@/common/utils/tokens/tokenMeterUtils";
 
+/** Compact threshold tick mark for the button view */
+const CompactThresholdIndicator: React.FC<{ threshold: number }> = ({ threshold }) => {
+  if (threshold >= 100) return null;
+
+  return (
+    <div
+      className="bg-plan-mode pointer-events-none absolute top-0 z-50 h-full w-px"
+      style={{ left: `${threshold}%` }}
+    />
+  );
+};
+
 interface ContextUsageIndicatorButtonProps {
   data: TokenMeterData;
   autoCompaction?: AutoCompactionConfig;
@@ -19,6 +31,8 @@ export const ContextUsageIndicatorButton: React.FC<ContextUsageIndicatorButtonPr
 
   if (data.totalTokens === 0) return null;
 
+  const isAutoCompactionEnabled = autoCompaction && autoCompaction.threshold < 100;
+
   const ariaLabel = data.maxTokens
     ? `Context usage: ${formatTokens(data.totalTokens)} / ${formatTokens(data.maxTokens)} (${data.totalPercentage.toFixed(
         1
@@ -32,15 +46,20 @@ export const ContextUsageIndicatorButton: React.FC<ContextUsageIndicatorButtonPr
           <PopoverTrigger asChild>
             <button
               aria-label={ariaLabel}
-              className="hover:bg-sidebar-hover flex h-6 w-20 cursor-pointer items-center rounded px-1"
+              className="hover:bg-sidebar-hover flex h-6 cursor-pointer items-center rounded px-1"
               type="button"
             >
-              <TokenMeter
-                segments={data.segments}
-                orientation="horizontal"
-                className="h-2"
-                trackClassName="bg-dark"
-              />
+              <div className="relative h-2 w-20">
+                <TokenMeter
+                  segments={data.segments}
+                  orientation="horizontal"
+                  className="h-2"
+                  trackClassName="bg-dark"
+                />
+                {isAutoCompactionEnabled && (
+                  <CompactThresholdIndicator threshold={autoCompaction.threshold} />
+                )}
+              </div>
             </button>
           </PopoverTrigger>
         </TooltipTrigger>