🤖 Remove coupling with usePersistedState internals

Address PR feedback: instead of manually duplicating localStorage write
and event dispatch logic, use a new utility function updatePersistedState()
that encapsulates this behavior.

Changes:
- Add updatePersistedState() utility to usePersistedState.ts
- Enable listener in ThinkingProvider to pick up external changes
- Remove setThinkingLevel() call from ChatInput toast handler
- Rename event to cmux:thinkingLevelToast to clarify it's UI-only
- Use updatePersistedState() in App.tsx instead of manual duplication

This eliminates coupling between App.tsx and usePersistedState internals
while maintaining the same functionality.

Change-Id: Iee36b05db11d5e39740f31071fffb9a0e2cbb7e5
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/App.tsx

@@ -10,7 +10,7 @@ import NewWorkspaceModal from "./components/NewWorkspaceModal";
 import { AIView } from "./components/AIView";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { TipsCarousel } from "./components/TipsCarousel";
-import { usePersistedState } from "./hooks/usePersistedState";
+import { usePersistedState, updatePersistedState } from "./hooks/usePersistedState";
 import { matchesKeybind, KEYBINDS } from "./utils/ui/keybinds";
 import { useProjectManagement } from "./hooks/useProjectManagement";
 import { useWorkspaceManagement } from "./hooks/useWorkspaceManagement";
@@ -296,25 +296,17 @@ function AppInner() {
     }
 
     const normalized = THINKING_LEVELS.includes(level) ? level : "off";
-
-    if (typeof window !== "undefined" && window.localStorage) {
-      const key = `thinkingLevel:${workspaceId}`;
-      try {
-        window.localStorage.setItem(key, JSON.stringify(normalized));
-        window.dispatchEvent(
-          new CustomEvent(`storage-change:${key}`, {
-            detail: { key, newValue: normalized },
-          })
-        );
-      } catch (error) {
-        console.warn("Failed to persist thinking level", error);
-      }
-    }
-
+    const key = `thinkingLevel:${workspaceId}`;
+    
+    // Use the utility function which handles localStorage and event dispatch
+    // ThinkingProvider will pick this up via its listener
+    updatePersistedState(key, normalized);
+    
+    // Dispatch toast notification event for UI feedback
     if (typeof window !== "undefined") {
       window.dispatchEvent(
-        new CustomEvent("cmux:setThinkingLevel", {
-          detail: { workspaceId, level: normalized, source: "command-palette" },
+        new CustomEvent("cmux:thinkingLevelToast", {
+          detail: { workspaceId, level: normalized },
         })
       );
     }

src/components/ChatInput.tsx

@@ -444,7 +444,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     return () => window.removeEventListener("cmux:openModelSelector", handler as EventListener);
   }, []);
 
-  // Allow command palette to configure thinking effort
+  // Show toast when thinking level is changed via command palette
   useEffect(() => {
     const handler = (event: Event) => {
       const detail = (event as CustomEvent<{ workspaceId: string; level: ThinkingLevel }>).detail;
@@ -453,8 +453,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       }
 
       const level = detail.level;
-      setThinkingLevel(level);
-
       const levelDescriptions: Record<ThinkingLevel, string> = {
         off: "Off — fastest responses",
         low: "Low — adds light reasoning",
@@ -469,9 +467,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       });
     };
 
-    window.addEventListener("cmux:setThinkingLevel", handler as EventListener);
-    return () => window.removeEventListener("cmux:setThinkingLevel", handler as EventListener);
-  }, [workspaceId, setThinkingLevel, setToast]);
+    window.addEventListener("cmux:thinkingLevelToast", handler as EventListener);
+    return () => window.removeEventListener("cmux:thinkingLevelToast", handler as EventListener);
+  }, [workspaceId, setToast]);
 
   // Handle command selection
   const handleCommandSelect = useCallback(

src/contexts/ThinkingContext.tsx

@@ -18,7 +18,8 @@ interface ThinkingProviderProps {
 export const ThinkingProvider: React.FC<ThinkingProviderProps> = ({ workspaceId, children }) => {
   const [thinkingLevel, setThinkingLevel] = usePersistedState<ThinkingLevel>(
     `thinkingLevel:${workspaceId}`,
-    "off"
+    "off",
+    { listener: true } // Listen for changes from command palette and other sources
   );
 
   return (

src/hooks/usePersistedState.ts

@@ -3,6 +3,36 @@ import { useState, useCallback, useEffect } from "react";
 
 type SetValue<T> = T | ((prev: T) => T);
 
+/**
+ * Update a persisted state value from outside the hook.
+ * This is useful when you need to update state from a different component/context
+ * that doesn't have access to the setter (e.g., command palette updating workspace state).
+ *
+ * @param key - The same localStorage key used in usePersistedState
+ * @param value - The new value to set
+ */
+export function updatePersistedState<T>(key: string, value: T): void {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return;
+  }
+
+  try {
+    if (value === undefined || value === null) {
+      window.localStorage.removeItem(key);
+    } else {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    }
+
+    // Dispatch custom event for same-tab synchronization
+    const customEvent = new CustomEvent(`storage-change:${key}`, {
+      detail: { key, newValue: value },
+    });
+    window.dispatchEvent(customEvent);
+  } catch (error) {
+    console.warn(`Error writing to localStorage key "${key}":`, error);
+  }
+}
+
 interface UsePersistedStateOptions {
   /** Enable listening to storage changes from other components/tabs */
   listener?: boolean;