🤖 feat: add auto-compaction configuration UI

- Add configurable auto-compaction threshold (50-90%) per workspace
- Extract threshold constants to ui.ts (DRY)
- Create reusable useClampedNumberInput hook for numeric inputs
- Add settings to right sidebar with checkbox and percentage input
- Wire settings through to shouldAutoCompact check
- Use existing HelpIndicator pattern for tooltips

Author: ethanndickson

src/browser/components/AIView.tsx

@@ -35,6 +35,7 @@ import { QueuedMessage } from "./Messages/QueuedMessage";
 import { CompactionWarning } from "./CompactionWarning";
 import { shouldAutoCompact } from "@/browser/utils/compaction/autoCompactionCheck";
 import { use1MContext } from "@/browser/hooks/use1MContext";
+import { useAutoCompactionSettings } from "@/browser/hooks/useAutoCompactionSettings";
 
 interface AIViewProps {
   workspaceId: string;
@@ -80,6 +81,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
   const aggregator = useWorkspaceAggregator(workspaceId);
   const workspaceUsage = useWorkspaceUsage(workspaceId);
   const [use1M] = use1MContext();
+  const { enabled: autoCompactionEnabled, threshold: autoCompactionThreshold } =
+    useAutoCompactionSettings(workspaceId);
   const handledModelErrorsRef = useRef<Set<string>>(new Set());
 
   useEffect(() => {
@@ -320,9 +323,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
   // Get active stream message ID for token counting
   const activeStreamMessageId = aggregator.getActiveStreamMessageId();
 
-  const autoCompactionCheck = currentModel
-    ? shouldAutoCompact(workspaceUsage, currentModel, use1M)
-    : { shouldShowWarning: false, usagePercentage: 0, thresholdPercentage: 70 };
+  const autoCompactionCheck = shouldAutoCompact(
+    workspaceUsage,
+    currentModel,
+    use1M,
+    autoCompactionEnabled,
+    autoCompactionThreshold / 100
+  );
 
   // Show warning when: shouldShowWarning flag is true AND not currently compacting
   const shouldShowCompactionWarning = !isCompacting && autoCompactionCheck.shouldShowWarning;

src/browser/components/Context1MCheckbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { use1MContext } from "@/browser/hooks/use1MContext";
 import { supports1MContext } from "@/common/utils/ai/models";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { TooltipWrapper, Tooltip, HelpIndicator } from "./Tooltip";
 
 interface Context1MCheckboxProps {
   modelString: string;
@@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
         1M
       </label>
       <TooltipWrapper inline>
-        <span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>
+        <HelpIndicator>?</HelpIndicator>
         <Tooltip className="tooltip" align="center" width="auto">
           Enable 1M token context window (beta feature for Claude Sonnet 4/4.5)
         </Tooltip>

src/browser/components/RightSidebar/AutoCompactionSettings.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { useAutoCompactionSettings } from "@/browser/hooks/useAutoCompactionSettings";
+import { useClampedNumberInput } from "@/browser/hooks/useClampedNumberInput";
+import {
+  AUTO_COMPACTION_THRESHOLD_MIN,
+  AUTO_COMPACTION_THRESHOLD_MAX,
+} from "@/common/constants/ui";
+import { TooltipWrapper, Tooltip, HelpIndicator } from "../Tooltip";
+
+interface AutoCompactionSettingsProps {
+  workspaceId: string;
+}
+
+export const AutoCompactionSettings: React.FC<AutoCompactionSettingsProps> = ({ workspaceId }) => {
+  const { enabled, setEnabled, threshold, setThreshold } = useAutoCompactionSettings(workspaceId);
+  const { localValue, handleChange, handleBlur } = useClampedNumberInput(
+    threshold,
+    setThreshold,
+    AUTO_COMPACTION_THRESHOLD_MIN,
+    AUTO_COMPACTION_THRESHOLD_MAX
+  );
+
+  return (
+    <div data-testid="auto-compaction-settings" className="mb-6">
+      <div className="flex items-baseline justify-between">
+        {/* Left side: checkbox + label + tooltip */}
+        <div className="flex items-baseline gap-1">
+          <label className="text-foreground flex cursor-pointer items-baseline gap-1.5 font-medium select-none hover:text-white">
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={(e) => setEnabled(e.target.checked)}
+              className="cursor-pointer"
+            />
+            Auto-Compaction
+          </label>
+          <TooltipWrapper inline>
+            <HelpIndicator>?</HelpIndicator>
+            <Tooltip className="tooltip" align="center" width="auto">
+              Automatically compact conversation history when context usage reaches the threshold
+            </Tooltip>
+          </TooltipWrapper>
+        </div>
+
+        {/* Right side: input + % symbol */}
+        <div className="flex items-baseline gap-0.5">
+          <input
+            type="number"
+            min={AUTO_COMPACTION_THRESHOLD_MIN}
+            max={AUTO_COMPACTION_THRESHOLD_MAX}
+            step={5}
+            maxLength={2}
+            value={localValue}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            disabled={!enabled}
+            className="text-muted w-9 [appearance:textfield] border-none bg-transparent text-right text-xs outline-none disabled:cursor-not-allowed disabled:opacity-40 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            aria-label="Auto-compaction threshold percentage"
+          />
+          <span className="text-muted text-xs">%</span>
+        </div>
+      </div>
+    </div>
+  );
+};

src/browser/components/RightSidebar/CostsTab.tsx

@@ -8,6 +8,7 @@ import { use1MContext } from "@/browser/hooks/use1MContext";
 import { supports1MContext } from "@/common/utils/ai/models";
 import { TOKEN_COMPONENT_COLORS } from "@/common/utils/tokens/tokenMeterUtils";
 import { ConsumerBreakdown } from "./ConsumerBreakdown";
+import { AutoCompactionSettings } from "./AutoCompactionSettings";
 
 // Format token display - show k for thousands with 1 decimal
 const formatTokens = (tokens: number) =>
@@ -230,6 +231,8 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
         </div>
       )}
 
+      {hasUsageData && <AutoCompactionSettings workspaceId={workspaceId} />}
+
       {hasUsageData && (
         <div data-testid="cost-section" className="mb-6">
           <div className="flex flex-col gap-3">

src/browser/hooks/useAutoCompactionSettings.ts

@@ -0,0 +1,40 @@
+import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import {
+  getAutoCompactionEnabledKey,
+  getAutoCompactionThresholdKey,
+} from "@/common/constants/storage";
+import { DEFAULT_AUTO_COMPACTION_THRESHOLD_PERCENT } from "@/common/constants/ui";
+
+export interface AutoCompactionSettings {
+  /** Whether auto-compaction is enabled for this workspace */
+  enabled: boolean;
+  /** Update enabled state */
+  setEnabled: (value: boolean) => void;
+  /** Current threshold percentage (50-90) */
+  threshold: number;
+  /** Update threshold percentage (will be clamped to 50-90 range by UI) */
+  setThreshold: (value: number) => void;
+}
+
+/**
+ * Custom hook for auto-compaction settings per workspace.
+ * Persists both enabled state and threshold percentage to localStorage.
+ *
+ * @param workspaceId - Workspace identifier
+ * @returns Settings object with getters and setters
+ */
+export function useAutoCompactionSettings(workspaceId: string): AutoCompactionSettings {
+  const [enabled, setEnabled] = usePersistedState<boolean>(
+    getAutoCompactionEnabledKey(workspaceId),
+    true,
+    { listener: true }
+  );
+
+  const [threshold, setThreshold] = usePersistedState<number>(
+    getAutoCompactionThresholdKey(workspaceId),
+    DEFAULT_AUTO_COMPACTION_THRESHOLD_PERCENT,
+    { listener: true }
+  );
+
+  return { enabled, setEnabled, threshold, setThreshold };
+}

src/browser/hooks/useClampedNumberInput.ts

@@ -0,0 +1,56 @@
+import React from "react";
+
+/**
+ * Hook for number input with local state, validation, and clamping on blur.
+ * Prevents typing interruption while ensuring valid persisted values.
+ *
+ * @param persistedValue - Current value from persistence layer
+ * @param setPersisted - Function to update persisted value
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Object with localValue, handleChange, and handleBlur
+ */
+export function useClampedNumberInput(
+  persistedValue: number,
+  setPersisted: (value: number) => void,
+  min: number,
+  max: number
+) {
+  const [localValue, setLocalValue] = React.useState(persistedValue.toString());
+
+  // Sync local state when persisted value changes (e.g., from other tabs)
+  React.useEffect(() => {
+    setLocalValue(persistedValue.toString());
+  }, [persistedValue]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    // Allow empty or valid partial numbers (1-3 digits for typical use)
+    if (input === "" || /^\d{1,3}$/.test(input)) {
+      setLocalValue(input);
+    }
+  };
+
+  const handleBlur = () => {
+    const num = parseInt(localValue);
+
+    if (localValue === "" || isNaN(num)) {
+      // Invalid input - revert to persisted value
+      setLocalValue(persistedValue.toString());
+    } else if (num < min) {
+      // Below minimum - clamp to min
+      setPersisted(min);
+      setLocalValue(min.toString());
+    } else if (num > max) {
+      // Above maximum - clamp to max
+      setPersisted(max);
+      setLocalValue(max.toString());
+    } else {
+      // Valid - persist the value
+      setPersisted(num);
+      setLocalValue(num.toString());
+    }
+  };
+
+  return { localValue, handleChange, handleBlur };
+}

src/browser/utils/compaction/autoCompactionCheck.ts

@@ -18,45 +18,56 @@
 import type { WorkspaceUsageState } from "@/browser/stores/WorkspaceStore";
 import { getModelStats } from "@/common/utils/tokens/modelStats";
 import { supports1MContext } from "@/common/utils/ai/models";
+import { DEFAULT_AUTO_COMPACTION_THRESHOLD } from "@/common/constants/ui";
 
 export interface AutoCompactionCheckResult {
   shouldShowWarning: boolean;
   usagePercentage: number;
   thresholdPercentage: number;
+  enabled: boolean;
 }
 
-// Auto-compaction threshold (0.7 = 70%)
-// TODO: Make this configurable via settings
-const AUTO_COMPACTION_THRESHOLD = 0.7;
-
 // Show warning this many percentage points before threshold
 const WARNING_ADVANCE_PERCENT = 10;
 
 /**
  * Check if auto-compaction should trigger based on token usage
  *
  * @param usage - Current workspace usage state (from useWorkspaceUsage)
- * @param model - Current model string
+ * @param model - Current model string (optional - returns safe default if not provided)
  * @param use1M - Whether 1M context is enabled
+ * @param enabled - Whether auto-compaction is enabled for this workspace
  * @param threshold - Usage percentage threshold (0.0-1.0, default 0.7 = 70%)
  * @param warningAdvancePercent - Show warning this many percentage points before threshold (default 10)
  * @returns Check result with warning flag and usage percentage
  */
 export function shouldAutoCompact(
   usage: WorkspaceUsageState | undefined,
-  model: string,
+  model: string | null | undefined,
   use1M: boolean,
-  threshold: number = AUTO_COMPACTION_THRESHOLD,
+  enabled = true,
+  threshold: number = DEFAULT_AUTO_COMPACTION_THRESHOLD,
   warningAdvancePercent: number = WARNING_ADVANCE_PERCENT
 ): AutoCompactionCheckResult {
   const thresholdPercentage = threshold * 100;
 
+  // Short-circuit if auto-compaction is disabled
+  if (!enabled || !model) {
+    return {
+      shouldShowWarning: false,
+      usagePercentage: 0,
+      thresholdPercentage,
+      enabled: false,
+    };
+  }
+
   // No usage data yet - safe default (don't trigger on first message)
   if (!usage || usage.usageHistory.length === 0) {
     return {
       shouldShowWarning: false,
       usagePercentage: 0,
       thresholdPercentage,
+      enabled: true,
     };
   }
 
@@ -70,6 +81,7 @@ export function shouldAutoCompact(
       shouldShowWarning: false,
       usagePercentage: 0,
       thresholdPercentage,
+      enabled: true,
     };
   }
 
@@ -83,5 +95,6 @@ export function shouldAutoCompact(
     shouldShowWarning,
     usagePercentage,
     thresholdPercentage,
+    enabled: true,
   };
 }

src/common/constants/storage.ts

@@ -153,6 +153,22 @@ export function getReviewSearchStateKey(workspaceId: string): string {
   return `reviewSearchState:${workspaceId}`;
 }
 
+/**
+ * Get the localStorage key for auto-compaction enabled preference per workspace
+ * Format: "autoCompaction:enabled:{workspaceId}"
+ */
+export function getAutoCompactionEnabledKey(workspaceId: string): string {
+  return `autoCompaction:enabled:${workspaceId}`;
+}
+
+/**
+ * Get the localStorage key for auto-compaction threshold percentage per workspace
+ * Format: "autoCompaction:threshold:{workspaceId}"
+ */
+export function getAutoCompactionThresholdKey(workspaceId: string): string {
+  return `autoCompaction:threshold:${workspaceId}`;
+}
+
 /**
  * List of workspace-scoped key functions that should be copied on fork and deleted on removal
  */
@@ -166,6 +182,8 @@ const PERSISTENT_WORKSPACE_KEY_FUNCTIONS: Array<(workspaceId: string) => string>
   getReviewExpandStateKey,
   getFileTreeExpandStateKey,
   getReviewSearchStateKey,
+  getAutoCompactionEnabledKey,
+  getAutoCompactionThresholdKey,
 ];
 
 /**

src/common/constants/ui.ts

@@ -10,6 +10,23 @@
  */
 export const COMPACTED_EMOJI = "📦";
 
+/**
+ * Auto-compaction threshold bounds (percentage)
+ * Too low risks frequent interruptions; too high risks hitting context limits
+ */
+export const AUTO_COMPACTION_THRESHOLD_MIN = 50;
+export const AUTO_COMPACTION_THRESHOLD_MAX = 90;
+
+/**
+ * Default auto-compaction threshold percentage (50-90 range)
+ * Applied when creating new workspaces
+ */
+export const DEFAULT_AUTO_COMPACTION_THRESHOLD_PERCENT = 70;
+
+/**
+ * Default threshold as decimal for calculations (0.7 = 70%)
+ */
+export const DEFAULT_AUTO_COMPACTION_THRESHOLD = DEFAULT_AUTO_COMPACTION_THRESHOLD_PERCENT / 100;
 /**
  * Duration (ms) to show "copied" feedback after copying to clipboard
  */