🤖 tests: stabilize Storybook left sidebar state (#2937)

## Summary
Stabilize Storybook app stories that were flaking because the left
sidebar could inherit the previous story's persisted open/closed state.

## Background
Stories such as "All Reviews Checked" could render with the wrong
left-sidebar visibility when Storybook reused localStorage and an
existing AppLoader instance across captures. That made visual snapshots
depend on whichever story ran before them.

## Implementation
- reset `LEFT_SIDEBAR_COLLAPSED_KEY` before each Storybook render using
the same mobile/desktop default that the app uses
- key `AppWithMocks` by story id plus a viewport bucket so crossing the
mobile breakpoint forces a fresh `AppLoader` mount
- keep per-story overrides intact so stories that intentionally open or
collapse the left sidebar still control their own state

## Validation
- `make static-check`
- `make storybook-build`

## Risks
Low risk. The change is isolated to Storybook wiring and only affects
how persisted sidebar state is seeded for stories.

---

_Generated with `mux` • Model: `openai:gpt-5.4` • Thinking: `xhigh` •
Cost: `$2.50`_

<!-- mux-attribution: model=openai:gpt-5.4 thinking=xhigh costs=2.50 -->

Author: ammar-agent

.storybook/preview.tsx

@@ -4,6 +4,7 @@ import "../src/browser/styles/globals.css";
 import {
   TUTORIAL_STATE_KEY,
   RIGHT_SIDEBAR_COLLAPSED_KEY,
+  LEFT_SIDEBAR_COLLAPSED_KEY,
   EXPANDED_PROJECTS_KEY,
   WORKSPACE_DRAFTS_BY_PROJECT_KEY,
   type TutorialState,
@@ -68,6 +69,14 @@ function collapseRightSidebar() {
     localStorage.setItem(RIGHT_SIDEBAR_COLLAPSED_KEY, JSON.stringify(true));
   }
 }
+// Reset the left sidebar to the app's viewport default before each story render.
+// This prevents stories from inheriting whichever open/closed state a previous
+// story left behind, while still allowing individual stories to override it.
+function resetLeftSidebar() {
+  if (typeof localStorage !== "undefined") {
+    localStorage.setItem(LEFT_SIDEBAR_COLLAPSED_KEY, JSON.stringify(window.innerWidth <= 768));
+  }
+}
 // Collapse projects by default to ensure deterministic snapshots.
 // Some stories explicitly expand projects via expandProjects() in their setup.
 function collapseProjects() {
@@ -128,6 +137,10 @@ const preview: Preview = {
         disableTutorials();
       }
 
+      // Reset the left sidebar to the app's viewport-dependent default.
+      // Stories that need a specific open/closed state can override it in setup.
+      resetLeftSidebar();
+
       // Collapse right sidebar by default for deterministic snapshots
       // Stories can expand via expandRightSidebar() in setup after this runs
       collapseRightSidebar();

src/browser/stories/meta.tsx

@@ -76,31 +76,34 @@ function resetStorybookPersistedStateForStory(): void {
     localStorage.setItem(UI_THEME_KEY, JSON.stringify("dark"));
   }
 }
-function getStorybookStoryId(): string | null {
+function getStorybookRenderKey(): string | null {
   if (typeof window === "undefined") {
     return null;
   }
 
   const params = new URLSearchParams(window.location.search);
-  return params.get("id") ?? params.get("path");
+  const storyId = params.get("id") ?? params.get("path");
+  const viewportBucket = window.innerWidth <= 768 ? "narrow" : "wide";
+  return storyId ? `${storyId}:${viewportBucket}` : viewportBucket;
 }
 
 export const AppWithMocks: FC<AppWithMocksProps> = ({ setup }) => {
-  const lastStoryIdRef = useRef<string | null>(null);
+  const lastRenderKeyRef = useRef<string | null>(null);
   const clientRef = useRef<APIClient | null>(null);
 
-  const storyId = getStorybookStoryId();
-  const shouldReset = clientRef.current === null || lastStoryIdRef.current !== storyId;
+  const renderKey = getStorybookRenderKey();
+  const shouldReset = clientRef.current === null || lastRenderKeyRef.current !== renderKey;
   if (shouldReset) {
     resetStorybookPersistedStateForStory();
-    lastStoryIdRef.current = storyId;
+    lastRenderKeyRef.current = renderKey;
     clientRef.current = null;
   }
 
   clientRef.current ??= setup();
 
-  // Key by storyId to force full remount between stories.
-  // Without this, RouterProvider keeps its initial route and APIProvider
-  // doesn't re-initialize, causing flaky "loading page vs left screen" states.
-  return <AppLoader key={storyId} client={clientRef.current} />;
+  // Key by story + viewport bucket so Storybook fully remounts when switching
+  // stories or crossing the mobile breakpoint that changes the left sidebar default.
+  // Without this, RouterProvider keeps its initial route and APIProvider doesn't
+  // re-initialize, causing flaky "loading page vs left screen" states.
+  return <AppLoader key={renderKey} client={clientRef.current} />;
 };