🤖 fix: rebind thinking state on model changes

- Key ThinkingProviderInner by per-model thinking key to avoid one-render
  stale thinking state during model switches (e.g. cycle model)
- Add regression test for switching models restoring per-model thinking

---
_Generated with  • Model:  • Thinking: _

Author: ammar-agent

src/browser/contexts/ThinkingContext.test.tsx

@@ -0,0 +1,91 @@
+import { GlobalWindow } from "happy-dom";
+
+// Setup basic DOM environment for testing-library
+const dom = new GlobalWindow();
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
+(global as any).window = dom.window;
+(global as any).document = dom.window.document;
+
+// Ensure globals exist for instanceof checks inside usePersistedState
+(globalThis as any).StorageEvent = dom.window.StorageEvent;
+(globalThis as any).CustomEvent = dom.window.CustomEvent;
+
+// happy-dom's requestAnimationFrame behavior can vary; ensure it's present so
+// usePersistedState listener updates (which batch via RAF) are flushed.
+if (!globalThis.requestAnimationFrame) {
+  globalThis.requestAnimationFrame = (cb: FrameRequestCallback) =>
+    setTimeout(() => cb(Date.now()), 0) as unknown as number;
+}
+if (!globalThis.cancelAnimationFrame) {
+  globalThis.cancelAnimationFrame = (id: number) => {
+    clearTimeout(id as unknown as NodeJS.Timeout);
+  };
+}
+(global as any).console = console;
+/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import React from "react";
+import { ThinkingProvider } from "./ThinkingContext";
+import { useThinkingLevel } from "@/browser/hooks/useThinkingLevel";
+import { getModelKey, getThinkingLevelByModelKey } from "@/common/constants/storage";
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+
+interface TestProps {
+  workspaceId: string;
+}
+
+const TestComponent: React.FC<TestProps> = (props) => {
+  const [thinkingLevel] = useThinkingLevel();
+  return (
+    <div data-testid="thinking">
+      {thinkingLevel}:{props.workspaceId}
+    </div>
+  );
+};
+
+describe("ThinkingContext", () => {
+  // Make getDefaultModel deterministic.
+  // (getDefaultModel reads from the global "model-default" localStorage key.)
+  beforeEach(() => {
+    window.localStorage.setItem("model-default", JSON.stringify("openai:default"));
+  });
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("switching models restores the per-model thinking level", async () => {
+    const workspaceId = "ws-1";
+
+    // Model A
+    updatePersistedState(getModelKey(workspaceId), "openai:gpt-5.2");
+    updatePersistedState(getThinkingLevelByModelKey("openai:gpt-5.2"), "high");
+
+    // Model B
+    updatePersistedState(getThinkingLevelByModelKey("anthropic:claude-3.5"), "low");
+
+    const view = render(
+      <ThinkingProvider workspaceId={workspaceId}>
+        <TestComponent workspaceId={workspaceId} />
+      </ThinkingProvider>
+    );
+
+    await waitFor(() => {
+      expect(view.getByTestId("thinking").textContent).toBe("high:ws-1");
+    });
+
+    // Change model -> should restore that model's stored thinking level
+    act(() => {
+      updatePersistedState(getModelKey(workspaceId), "anthropic:claude-3.5");
+    });
+
+    await waitFor(() => {
+      expect(view.getByTestId("thinking").textContent).toBe("low:ws-1");
+    });
+  });
+});

src/browser/contexts/ThinkingContext.tsx

@@ -13,6 +13,24 @@ interface ThinkingContextType {
 
 const ThinkingContext = createContext<ThinkingContextType | undefined>(undefined);
 
+interface ThinkingProviderInnerProps {
+  thinkingKey: string;
+  children: ReactNode;
+}
+
+const ThinkingProviderInner: React.FC<ThinkingProviderInnerProps> = (props) => {
+  const [thinkingLevel, setThinkingLevel] = usePersistedState<ThinkingLevel>(
+    props.thinkingKey,
+    "off",
+    { listener: true }
+  );
+
+  return (
+    <ThinkingContext.Provider value={{ thinkingLevel, setThinkingLevel }}>
+      {props.children}
+    </ThinkingContext.Provider>
+  );
+};
 interface ThinkingProviderProps {
   workspaceId?: string; // For existing workspaces
   projectPath?: string; // For workspace creation (uses project-scoped model key)
@@ -38,27 +56,24 @@ export const ThinkingProvider: React.FC<ThinkingProviderProps> = ({
   const defaultModel = getDefaultModel();
   const modelKey = useModelKey(workspaceId, projectPath);
 
-  // Subscribe to model changes so we update thinking level when model changes
+  // Subscribe to model changes so we update thinking level when model changes.
+  // This uses a fallback key to satisfy hooks rules; it should be unused in practice
+  // because ThinkingProvider is expected to have either workspaceId or projectPath.
   const [rawModel] = usePersistedState<string>(modelKey ?? "model:__unused__", defaultModel, {
     listener: true,
   });
 
-  // Derive the thinking level key from the current model
   const thinkingKey = useMemo(() => {
     const model = migrateGatewayModel(rawModel || defaultModel);
     return getThinkingLevelByModelKey(model);
   }, [rawModel, defaultModel]);
 
-  const [thinkingLevel, setThinkingLevel] = usePersistedState<ThinkingLevel>(
-    thinkingKey,
-    "off",
-    { listener: true } // Listen for changes from command palette and other sources
-  );
-
+  // Key the inner provider by thinkingKey so switching models re-mounts and
+  // synchronously reads the new key's value (avoids one-render stale state).
   return (
-    <ThinkingContext.Provider value={{ thinkingLevel, setThinkingLevel }}>
+    <ThinkingProviderInner key={thinkingKey} thinkingKey={thinkingKey}>
       {children}
-    </ThinkingContext.Provider>
+    </ThinkingProviderInner>
   );
 };