fix: conversation tab state sync across browser tabs (#11680)

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>

frontend/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx

@@ -19,8 +19,10 @@ import {
 } from "#/state/conversation-store";
 import { ConversationTabsContextMenu } from "./conversation-tabs-context-menu";
 import { USE_PLANNING_AGENT } from "#/utils/feature-flags";
+import { useConversationId } from "#/hooks/use-conversation-id";
 
 export function ConversationTabs() {
+  const { conversationId } = useConversationId();
   const {
     selectedTab,
     isRightPanelShown,
@@ -30,18 +32,21 @@ export function ConversationTabs() {
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  // Persist selectedTab and isRightPanelShown in localStorage
+  // Persist selectedTab and isRightPanelShown in localStorage per conversation
   const [persistedSelectedTab, setPersistedSelectedTab] =
     useLocalStorage<ConversationTab | null>(
-      "conversation-selected-tab",
+      `conversation-selected-tab-${conversationId}`,
       "editor",
     );
 
   const [persistedIsRightPanelShown, setPersistedIsRightPanelShown] =
-    useLocalStorage<boolean>("conversation-right-panel-shown", true);
+    useLocalStorage<boolean>(
+      `conversation-right-panel-shown-${conversationId}`,
+      true,
+    );
 
   const [persistedUnpinnedTabs] = useLocalStorage<string[]>(
-    "conversation-unpinned-tabs",
+    `conversation-unpinned-tabs-${conversationId}`,
     [],
   );
 

frontend/src/state/conversation-store.ts

@@ -61,10 +61,48 @@ interface ConversationActions {
 
 type ConversationStore = ConversationState & ConversationActions;
 
-// Helper function to get initial right panel state from localStorage
+const getConversationIdFromLocation = (): string | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const match = window.location.pathname.match(/\/conversations\/([^/]+)/);
+  return match ? match[1] : null;
+};
+
+const parseStoredBoolean = (value: string | null): boolean | null => {
+  if (value === null) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
+
 const getInitialRightPanelState = (): boolean => {
-  const stored = localStorage.getItem("conversation-right-panel-shown");
-  return stored !== null ? JSON.parse(stored) : true;
+  if (typeof window === "undefined") {
+    return true;
+  }
+
+  const conversationId = getConversationIdFromLocation();
+  const keysToCheck = conversationId
+    ? [`conversation-right-panel-shown-${conversationId}`]
+    : [];
+
+  // Fallback to legacy global key for users who haven't switched tabs yet
+  keysToCheck.push("conversation-right-panel-shown");
+
+  for (const key of keysToCheck) {
+    const parsed = parseStoredBoolean(localStorage.getItem(key));
+    if (parsed !== null) {
+      return parsed;
+    }
+  }
+
+  return true;
 };
 
 export const useConversationStore = create<ConversationStore>()(