🤖 refactor: simplify stats tab experiment to toggle (#1224)

Convert the Stats Tab experiment setting from a 3-option dropdown to a
simple on/off toggle, matching the UX pattern used for other
experiments.

**Changes:**
- Replace dropdown with Switch component in ExperimentsSection
- Simplify FeatureFlagsContext API: `setStatsTabOverride` →
`setStatsTabEnabled`
- Remove PostHog implementation details from user-facing description
- Backend schema unchanged (preserves flexibility)

---

<details>
<summary>📋 Implementation Plan</summary>

# Plan: Simplify Stats Tab Experiment Toggle

## Goal
Convert the Stats Tab experiment from a 3-option dropdown (`Default
(experiment)`, `Always on`, `Always off`) to a simple on/off toggle,
matching the pattern used for other experiments like Post-Compaction
Context.

## Current State
- **UI**: `ExperimentsSection.tsx` renders `StatsTabOverrideRow` with a
`<select>` dropdown containing 3 options
- **Frontend context**: `FeatureFlagsContext.tsx` exposes
`StatsTabState` with `variant`, `override`, and `enabled` fields
- **Backend service**: `featureFlagService.ts` fetches PostHog variant
and applies 3-way override logic
- **Storage**: Backend stores override in `~/.mux/config.json` under
`featureFlagOverrides[stats_tab_v1]`
- **Schema**: `api.ts` defines `StatsTabOverrideSchema =
z.enum(["default", "on", "off"])`

## Proposed Changes

### 1. Frontend: Replace dropdown with toggle (~-30 LoC)

**File:
`src/browser/components/Settings/sections/ExperimentsSection.tsx`**
- Replace `StatsTabOverrideRow` with a simpler row using `<Switch>`:
  - Label: "Stats tab" 
- Description: "Show timing statistics in the right sidebar" (no PostHog
mention)
  - Toggle reflects `statsTabState.enabled`
  - Toggle calls `setStatsTabOverride("on" | "off")` based on new state

### 2. Context: Simplify `setStatsTabOverride` signature (~-5 LoC)

**File: `src/browser/contexts/FeatureFlagsContext.tsx`**
- `setStatsTabOverride(override: StatsTabOverride)` →
`setStatsTabEnabled(enabled: boolean)`
- Internally convert boolean to `"on" | "off"` when calling backend
- No more "default" option exposed to UI

### 3. Backend & Schema: Unchanged

The backend already stores `"on" | "off" | "default"` and computes
`enabled` based on PostHog variant + override. We keep this to allow
future flexibility, but the UI will only ever set `"on"` or `"off"`
(never `"default"`).

<details>
<summary>Alternative: Migrate to experiments system</summary>

We could move Stats Tab to the existing `EXPERIMENTS` +
`ExperimentsContext` pattern (localStorage-based), but:
- That would lose PostHog A/B tracking capability
- Would require data migration from `config.json` to localStorage
- The current feature flag service is already correct; simplifying the
UI is sufficient

This alternative is **not recommended** for this change.
</details>

## Net LoC Estimate
~-25 lines (remove dropdown complexity, add simpler toggle, simplify
context API)

## Files Modified
1. `src/browser/components/Settings/sections/ExperimentsSection.tsx`
2. `src/browser/contexts/FeatureFlagsContext.tsx`

## Testing
- Manual: Open Settings → Experiments → verify toggle works
- Existing typecheck and lint will catch regressions

</details>

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

Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/components/Settings/sections/ExperimentsSection.tsx

@@ -6,7 +6,7 @@ import {
   type ExperimentId,
 } from "@/common/constants/experiments";
 import { Switch } from "@/browser/components/ui/switch";
-import { useFeatureFlags, type StatsTabOverride } from "@/browser/contexts/FeatureFlagsContext";
+import { useFeatureFlags } from "@/browser/contexts/FeatureFlagsContext";
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { useTelemetry } from "@/browser/hooks/useTelemetry";
 
@@ -48,35 +48,29 @@ function ExperimentRow(props: ExperimentRowProps) {
   );
 }
 
-function StatsTabOverrideRow() {
-  const { statsTabState, setStatsTabOverride } = useFeatureFlags();
+function StatsTabRow() {
+  const { statsTabState, setStatsTabEnabled } = useFeatureFlags();
 
-  const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const value = e.target.value as StatsTabOverride;
-    setStatsTabOverride(value).catch(() => {
-      // ignore
-    });
-  };
+  const handleToggle = useCallback(
+    (enabled: boolean) => {
+      setStatsTabEnabled(enabled).catch(() => {
+        // ignore
+      });
+    },
+    [setStatsTabEnabled]
+  );
 
   return (
     <div className="flex items-center justify-between py-3">
       <div className="flex-1 pr-4">
         <div className="text-foreground text-sm font-medium">Stats tab</div>
-        <div className="text-muted mt-0.5 text-xs">
-          PostHog experiment-gated timing stats sidebar. Experiment variant:{" "}
-          {statsTabState?.variant ?? "—"}.
-        </div>
+        <div className="text-muted mt-0.5 text-xs">Show timing statistics in the right sidebar</div>
       </div>
-      <select
-        className="bg-background text-foreground border-border-light rounded-md border px-2 py-1 text-xs"
-        value={statsTabState?.override ?? "default"}
-        onChange={onChange}
-        aria-label="Stats tab override"
-      >
-        <option value="default">Default (experiment)</option>
-        <option value="on">Always on</option>
-        <option value="off">Always off</option>
-      </select>
+      <Switch
+        checked={statsTabState?.enabled ?? false}
+        onCheckedChange={handleToggle}
+        aria-label="Toggle Stats tab"
+      />
     </div>
   );
 }
@@ -105,7 +99,7 @@ export function ExperimentsSection() {
         Experimental features that are still in development. Enable at your own risk.
       </p>
       <div className="divide-border-light divide-y">
-        <StatsTabOverrideRow />
+        <StatsTabRow />
         {experiments.map((exp) => (
           <ExperimentRow
             key={exp.id}

src/browser/contexts/FeatureFlagsContext.tsx

@@ -26,19 +26,14 @@ function isStorybook(): boolean {
   return false;
 }
 
-export type StatsTabVariant = "control" | "stats";
-export type StatsTabOverride = "default" | "on" | "off";
-
 export interface StatsTabState {
   enabled: boolean;
-  variant: StatsTabVariant;
-  override: StatsTabOverride;
 }
 
 interface FeatureFlagsContextValue {
   statsTabState: StatsTabState | null;
   refreshStatsTabState: () => Promise<void>;
-  setStatsTabOverride: (override: StatsTabOverride) => Promise<void>;
+  setStatsTabEnabled: (enabled: boolean) => Promise<void>;
 }
 
 const FeatureFlagsContext = createContext<FeatureFlagsContextValue | null>(null);
@@ -53,29 +48,29 @@ export function FeatureFlagsProvider(props: { children: ReactNode }) {
   const { api } = useAPI();
   const [statsTabState, setStatsTabState] = useState<StatsTabState | null>(() => {
     if (isStorybook()) {
-      return { enabled: true, variant: "stats", override: "default" };
+      return { enabled: true };
     }
 
     return null;
   });
 
   const refreshStatsTabState = async (): Promise<void> => {
     if (!api) {
-      setStatsTabState({ enabled: false, variant: "control", override: "default" });
+      setStatsTabState({ enabled: false });
       return;
     }
 
     const state = await api.features.getStatsTabState();
-    setStatsTabState(state);
+    setStatsTabState({ enabled: state.enabled });
   };
 
-  const setStatsTabOverride = async (override: StatsTabOverride): Promise<void> => {
+  const setStatsTabEnabled = async (enabled: boolean): Promise<void> => {
     if (!api) {
       throw new Error("ORPC client not initialized");
     }
 
-    const state = await api.features.setStatsTabOverride({ override });
-    setStatsTabState(state);
+    const state = await api.features.setStatsTabOverride({ override: enabled ? "on" : "off" });
+    setStatsTabState({ enabled: state.enabled });
   };
 
   useEffect(() => {
@@ -86,22 +81,22 @@ export function FeatureFlagsProvider(props: { children: ReactNode }) {
     (async () => {
       try {
         if (!api) {
-          setStatsTabState({ enabled: false, variant: "control", override: "default" });
+          setStatsTabState({ enabled: false });
           return;
         }
 
         const state = await api.features.getStatsTabState();
-        setStatsTabState(state);
+        setStatsTabState({ enabled: state.enabled });
       } catch {
         // Treat as disabled if we can't fetch.
-        setStatsTabState({ enabled: false, variant: "control", override: "default" });
+        setStatsTabState({ enabled: false });
       }
     })();
   }, [api]);
 
   return (
     <FeatureFlagsContext.Provider
-      value={{ statsTabState, refreshStatsTabState, setStatsTabOverride }}
+      value={{ statsTabState, refreshStatsTabState, setStatsTabEnabled }}
     >
       {props.children}
     </FeatureFlagsContext.Provider>