refactor: cleaner ThresholdSlider with proper types and hooks

- Extract AutoCompactionConfig type and export it
- Create useDraggableThreshold hook for drag logic
- Extract Triangle and ThresholdIndicator sub-components
- Simplify VerticalTokenMeter structure
- Add proper TooltipWrapper for tooltips
- Document container requirements in JSDoc

Author: ammar-agent

src/browser/components/RightSidebar/CostsTab.tsx

@@ -235,10 +235,12 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                         {/* Threshold slider overlay - inside bar for proper positioning */}
                         {maxTokens && (
                           <ThresholdSlider
-                            threshold={autoCompactThreshold}
-                            enabled={autoCompactEnabled}
-                            onThresholdChange={setAutoCompactThreshold}
-                            onEnabledChange={setAutoCompactEnabled}
+                            config={{
+                              enabled: autoCompactEnabled,
+                              threshold: autoCompactThreshold,
+                              setEnabled: setAutoCompactEnabled,
+                              setThreshold: setAutoCompactThreshold,
+                            }}
                             orientation="horizontal"
                           />
                         )}