🤖 fix: hide storybook toggle when Chromatic detects UI tests

Author: ammar-agent

.storybook/preview.tsx

@@ -2,15 +2,20 @@ import React from "react";
 import type { Preview } from "@storybook/react-vite";
 import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
 import { getStorageChangeEvent } from "@/common/constants/events";
+import isChromatic from "chromatic/isChromatic";
 import { UI_THEME_KEY } from "@/common/constants/storage";
+import "../src/browser/styles/globals.css";
 
 // Utility: detect e2e/test contexts where UI should be hidden (Chromatic, SB test-runner)
 const isE2ETestEnv = () => {
-  if (typeof window !== "undefined" && (window as any).CHROMATIC) return true;
-  if (typeof navigator !== "undefined" && /StorybookTestRunner/i.test(navigator.userAgent)) return true;
+  if (typeof window !== "undefined" && isChromatic()) {
+    return true;
+  }
+  if (typeof navigator !== "undefined" && /StorybookTestRunner/i.test(navigator.userAgent)) {
+    return true;
+  }
   return false;
 };
-import "../src/browser/styles/globals.css";
 
 const applyStorybookTheme = (mode: ThemeMode) => {
   if (typeof window === "undefined") {

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "@coder/cmux",
@@ -79,6 +78,7 @@
         "@vitejs/plugin-react": "^4.0.0",
         "autoprefixer": "^10.4.21",
         "babel-plugin-react-compiler": "^1.0.0",
+        "chromatic": "^13.3.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
@@ -1297,6 +1297,8 @@
 
     "chownr": ["chownr@2.0.0", "", {}, "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="],
 
+    "chromatic": ["chromatic@13.3.4", "", { "peerDependencies": { "@chromatic-com/cypress": "^0.*.* || ^1.0.0", "@chromatic-com/playwright": "^0.*.* || ^1.0.0" }, "optionalPeers": ["@chromatic-com/cypress", "@chromatic-com/playwright"], "bin": { "chroma": "dist/bin.js", "chromatic": "dist/bin.js", "chromatic-cli": "dist/bin.js" } }, "sha512-TR5rvyH0ESXobBB3bV8jc87AEAFQC7/n+Eb4XWhJz6hW3YNxIQPVjcbgLv+a4oKHEl1dUBueWSoIQsOVGTd+RQ=="],
+
     "chromium-pickle-js": ["chromium-pickle-js@0.2.0", "", {}, "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw=="],
 
     "ci-info": ["ci-info@3.9.0", "", {}, "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ=="],

package.json

@@ -119,6 +119,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "^1.0.0",
+    "chromatic": "^13.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",