feat(testing-view): add mode switcher toggle in dev mode

frontend/frontend-kit/ui/src/icons/accessibility.ts

@@ -1 +1 @@
-export { SunMoon } from "lucide-react";
+export { Eye, EyeOff, SunMoon } from "lucide-react";

frontend/testing-view/src/components/devTools/ModeSwitcher.tsx

@@ -14,12 +14,17 @@ export const ModeSwitcher = () => {
   const modeOverride = useStore((s) => s.modeOverride);
   const setModeOverride = useStore((s) => s.setModeOverride);
   const currentMode = useStore((s) => s.appMode);
+  const isDevToolsVisible = useStore((s) => s.isDevToolsVisible);
 
   // Only show in development
-  if (!import.meta.env.DEV && !import.meta.env.VITE_FORCE_DEV) return null;
+  if (
+    (!import.meta.env.DEV && !import.meta.env.VITE_FORCE_DEV) ||
+    !isDevToolsVisible
+  )
+    return null;
 
   return (
-    <div className="bg-background text-foreground fixed bottom-10 right-1/2 z-50 flex translate-x-1/2 flex-col gap-2 rounded-lg border p-3 shadow-lg">
+    <div className="bg-background text-foreground fixed right-1/2 bottom-10 z-50 flex translate-x-1/2 flex-col gap-2 rounded-lg border p-3 shadow-lg">
       <div className="text-muted-foreground text-xs font-semibold">
         Dev Mode Switcher
       </div>

frontend/testing-view/src/components/leftSidebar/AppSidebar.tsx

@@ -8,6 +8,7 @@ import {
 import { PAGES_ARRAY } from "../../constants/pages";
 import ColorSchemeToggle from "./ColorSchemeToggle";
 import ConnectionStatusGroup from "./ConnectionStatusGroup";
+import DevToolsItem from "./DevToolsItem";
 import Logo from "./Logo";
 import NavigationGroup from "./NavigationGroup";
 import SettingsItem from "./SettingsItem";
@@ -27,8 +28,14 @@ const AppSidebar = ({ backendConnected, ...props }: AppSidebarProps) => {
         <NavigationGroup items={PAGES_ARRAY} />
       </SidebarContent>
       <SidebarFooter>
+        {/* Only visible in dev mode */}
+        <DevToolsItem />
+
+        <div className="my-2" />
+
         <ConnectionStatusGroup backendConnected={backendConnected} />
         <div className="my-2" />
+
         <ColorSchemeToggle />
         <ThemeToggleItem />
         <SettingsItem />

frontend/testing-view/src/components/leftSidebar/DevToolsItem.tsx

@@ -0,0 +1,35 @@
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenuButton,
+} from "@workspace/ui";
+import { Eye, EyeOff } from "@workspace/ui/icons";
+import { useStore } from "../../store/store";
+
+const DevToolsItem = () => {
+  const toggleDevToolsVisible = useStore((s) => s.toggleDevToolsVisible);
+  const isVisible = useStore((s) => s.isDevToolsVisible);
+
+  const isDev = import.meta.env.DEV || import.meta.env.VITE_FORCE_DEV;
+
+  if (!isDev) return null;
+
+  return (
+    <SidebarGroup className="p-0">
+      <SidebarGroupLabel>Dev mode</SidebarGroupLabel>
+      <SidebarMenuButton
+        tooltip="Toggle mode switcher"
+        onClick={() => toggleDevToolsVisible()}
+      >
+        {isVisible ? (
+          <Eye className="h-4 w-4" />
+        ) : (
+          <EyeOff className="h-4 w-4" />
+        )}
+        <span>Toggle mode switcher</span>
+      </SidebarMenuButton>
+    </SidebarGroup>
+  );
+};
+
+export default DevToolsItem;

frontend/testing-view/src/store/slices/appSlice.ts

@@ -45,6 +45,10 @@ export interface AppSlice {
   setConfig: (config: ConfigData | null) => void;
   isLoadingConfig: boolean;
   setIsLoadingConfig: (loading: boolean) => void;
+
+  // Dev mode
+  isDevToolsVisible: boolean;
+  toggleDevToolsVisible: () => void;
 }
 
 export const createAppSlice: StateCreator<Store, [], [], AppSlice> = (set) => ({
@@ -96,4 +100,9 @@ export const createAppSlice: StateCreator<Store, [], [], AppSlice> = (set) => ({
   setConfig: (config: ConfigData | null) => set({ config }),
   isLoadingConfig: false,
   setIsLoadingConfig: (loading: boolean) => set({ isLoadingConfig: loading }),
+
+  // Dev mode
+  isDevToolsVisible: false,
+  toggleDevToolsVisible: () =>
+    set((state) => ({ isDevToolsVisible: !state.isDevToolsVisible })),
 });