From 92ef211ac9d885606f345d86605c2b9c4b0e1682 Mon Sep 17 00:00:00 2001
From: Thomas Kosiewski <tk@coder.com>
Date: Fri, 19 Dec 2025 12:33:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20refactor:=20simplify=20stats=20t?=
 =?UTF-8?q?ab=20experiment=20to=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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)

Change-Id: I3dfad1c229690a4806cdbcf2ebb2d758f205c14f
Signed-off-by: Thomas Kosiewski <tk@coder.com>
---
 .../Settings/sections/ExperimentsSection.tsx  | 42 ++++++++-----------
 src/browser/contexts/FeatureFlagsContext.tsx  | 27 +++++-------
 2 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/browser/components/Settings/sections/ExperimentsSection.tsx b/src/browser/components/Settings/sections/ExperimentsSection.tsx
index 54905783b..cc761a1a9 100644
--- a/src/browser/components/Settings/sections/ExperimentsSection.tsx
+++ b/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}
diff --git a/src/browser/contexts/FeatureFlagsContext.tsx b/src/browser/contexts/FeatureFlagsContext.tsx
index 2e9e72100..ee0b7511f 100644
--- a/src/browser/contexts/FeatureFlagsContext.tsx
+++ b/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,7 +48,7 @@ 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;
@@ -61,21 +56,21 @@ export function FeatureFlagsProvider(props: { children: ReactNode }) {
 
   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>