Add context menu to chat tabs with bulk close actions (#2705)

AGENTS.md

@@ -92,6 +92,7 @@ This is the only supported way to type-check the project. It uses the correct co
 - Favor descriptive module/function names that mirror IPC channel semantics.
 - Keep Electron security practices in mind (no `remote`, validate/lock by `appId` when mutating shared resources).
 - Add tests in the same folder tree when touching renderer components.
+- **Always use Base UI (`@base-ui/react`) for UI primitives, never Radix UI.** This includes menus, tooltips, accordions, context menus, and other headless UI components. See [rules/base-ui-components.md](rules/base-ui-components.md) for component-specific guidance.
 
 Use these guidelines whenever you work within this repository.
 

e2e-tests/chat_tabs.spec.ts

@@ -96,3 +96,115 @@ test("closing a tab removes it and selects adjacent tab", async ({ po }) => {
     expect(newCount).toBe(initialCount - 1);
   }).toPass({ timeout: Timeout.MEDIUM });
 });
+
+test("right-click context menu: Close other tabs", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.importApp("minimal");
+
+  // Chat 1
+  await po.sendPrompt("[dump] Chat one context menu");
+  await po.chatActions.waitForChatCompletion();
+
+  // Chat 2
+  await po.chatActions.clickNewChat();
+  await po.sendPrompt("[dump] Chat two context menu");
+  await po.chatActions.waitForChatCompletion();
+
+  // Chat 3
+  await po.chatActions.clickNewChat();
+  await po.sendPrompt("[dump] Chat three context menu");
+  await po.chatActions.waitForChatCompletion();
+
+  // Wait for 3 tabs to appear
+  const closeButtons = po.page.getByLabel(/^Close tab:/);
+  await expect(async () => {
+    const count = await closeButtons.count();
+    expect(count).toBe(3);
+  }).toPass({ timeout: Timeout.MEDIUM });
+
+  // Right-click on the second tab to open context menu
+  const tabs = po.page.locator("div[draggable]");
+  await tabs.nth(1).click({ button: "right" });
+
+  // Click "Close other tabs" from context menu
+  await po.page.getByText("Close other tabs").click();
+
+  // After closing other tabs, only 1 tab should remain
+  await expect(async () => {
+    const newCount = await closeButtons.count();
+    expect(newCount).toBe(1);
+  }).toPass({ timeout: Timeout.MEDIUM });
+});
+
+test("right-click context menu: Close tabs to the right", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.importApp("minimal");
+
+  // Chat 1
+  await po.sendPrompt("[dump] Left tab one");
+  await po.chatActions.waitForChatCompletion();
+
+  // Chat 2
+  await po.chatActions.clickNewChat();
+  await po.sendPrompt("[dump] Left tab two");
+  await po.chatActions.waitForChatCompletion();
+
+  // Chat 3
+  await po.chatActions.clickNewChat();
+  await po.sendPrompt("[dump] Right tab one");
+  await po.chatActions.waitForChatCompletion();
+
+  // Chat 4
+  await po.chatActions.clickNewChat();
+  await po.sendPrompt("[dump] Right tab two");
+  await po.chatActions.waitForChatCompletion();
+
+  // Wait for 4 tabs to appear
+  const closeButtons = po.page.getByLabel(/^Close tab:/);
+  await expect(async () => {
+    const count = await closeButtons.count();
+    expect(count).toBe(4);
+  }).toPass({ timeout: Timeout.MEDIUM });
+
+  // Right-click on the second tab (index 1) to open context menu
+  const tabs = po.page.locator("div[draggable]");
+  await tabs.nth(1).click({ button: "right" });
+
+  // Click "Close tabs to the right" from context menu
+  await po.page.getByText("Close tabs to the right").click();
+
+  // After closing tabs to the right, only 2 tabs should remain (first and second)
+  await expect(async () => {
+    const newCount = await closeButtons.count();
+    expect(newCount).toBe(2);
+  }).toPass({ timeout: Timeout.MEDIUM });
+});
+
+test("only shows tabs for chats opened in current session", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.importApp("minimal");
+
+  // Initially no tabs should be visible (no chats opened yet in this session)
+  const closeButtons = po.page.getByLabel(/^Close tab:/);
+
+  // Create first chat
+  await po.sendPrompt("[dump] Session chat one");
+  await po.chatActions.waitForChatCompletion();
+
+  // Now exactly 1 tab should be visible
+  await expect(async () => {
+    const count = await closeButtons.count();
+    expect(count).toBe(1);
+  }).toPass({ timeout: Timeout.MEDIUM });
+
+  // Create second chat
+  await po.chatActions.clickNewChat();
+  await po.sendPrompt("[dump] Session chat two");
+  await po.chatActions.waitForChatCompletion();
+
+  // Now exactly 2 tabs should be visible
+  await expect(async () => {
+    const count = await closeButtons.count();
+    expect(count).toBe(2);
+  }).toPass({ timeout: Timeout.MEDIUM });
+});

package-lock.json

@@ -20,7 +20,7 @@
         "@ai-sdk/provider-utils": "^4.0.13",
         "@ai-sdk/xai": "^3.0.46",
         "@babel/parser": "^7.28.5",
-        "@base-ui/react": "^1.1.0",
+        "@base-ui/react": "^1.2.0",
         "@biomejs/biome": "^1.9.4",
         "@dyad-sh/supabase-management-js": "v1.0.1",
         "@flakiness/playwright": "^1.0.0",
@@ -662,9 +662,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
-      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -716,16 +716,15 @@
       }
     },
     "node_modules/@base-ui/react": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.1.0.tgz",
-      "integrity": "sha512-ikcJRNj1mOiF2HZ5jQHrXoVoHcNHdBU5ejJljcBl+VTLoYXR6FidjTN86GjO6hyshi6TZFuNvv0dEOgaOFv6Lw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.2.0.tgz",
+      "integrity": "sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@base-ui/utils": "0.2.4",
+        "@babel/runtime": "^7.28.6",
+        "@base-ui/utils": "0.2.5",
         "@floating-ui/react-dom": "^2.1.6",
         "@floating-ui/utils": "^0.2.10",
-        "reselect": "^5.1.1",
         "tabbable": "^6.4.0",
         "use-sync-external-store": "^1.6.0"
       },
@@ -748,12 +747,12 @@
       }
     },
     "node_modules/@base-ui/utils": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.4.tgz",
-      "integrity": "sha512-smZwpMhjO29v+jrZusBSc5T+IJ3vBb9cjIiBjtKcvWmRj9Z4DWGVR3efr1eHR56/bqY5a4qyY9ElkOY5ljo3ng==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.5.tgz",
+      "integrity": "sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.4",
+        "@babel/runtime": "^7.28.6",
         "@floating-ui/utils": "^0.2.10",
         "reselect": "^5.1.1",
         "use-sync-external-store": "^1.6.0"

package.json

@@ -58,7 +58,7 @@
     "@ai-sdk/provider-utils": "^4.0.13",
     "@ai-sdk/xai": "^3.0.46",
     "@babel/parser": "^7.28.5",
-    "@base-ui/react": "^1.1.0",
+    "@base-ui/react": "^1.2.0",
     "@biomejs/biome": "^1.9.4",
     "@dyad-sh/supabase-management-js": "v1.0.1",
     "@flakiness/playwright": "^1.0.0",

rules/base-ui-components.md

 # Base UI Component Patterns
 
+## Always Use Base UI, Never Radix UI
+
+This project uses **Base UI** (`@base-ui/react`) for all headless UI primitives. **Do not use Radix UI** (`@radix-ui/*`) for any new components. This ensures:
+
+- Consistent animation/transition behavior across all menus and popups
+- Uniform keyboard navigation and focus management patterns
+- Consistent ARIA attribute usage for accessibility
+- A single set of APIs to learn and maintain
+
+If you need a component not yet wrapped in `src/components/ui/`, build it using Base UI primitives following the existing patterns in that directory.
+
+### Context Menu
+
+The `ContextMenu` in `src/components/ui/context-menu.tsx` uses Base UI's native `ContextMenu` primitive (`@base-ui/react/context-menu`), which handles right-click and long-press detection automatically. Key differences from Radix's API:
+
+- Use `onClick` instead of `onSelect` on `ContextMenuItem`
+- `ContextMenuTrigger` renders a `<div>` wrapper — no `asChild` needed (use the `render` prop if you need to change the element type)
+- Menu positioning at the cursor is handled natively by Base UI
+
+```tsx
+// Correct usage
+<ContextMenu>
+  <ContextMenuTrigger>
+    <div>Right-click me</div>
+  </ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem onClick={() => doSomething()}>Action</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
+
 ## TooltipTrigger render prop
 
 `TooltipTrigger` from `@base-ui/react/tooltip` (wrapped in `src/components/ui/tooltip.tsx`) renders a `<button>` by default. Wrapping another button-like element (`<button>`, `<Button>`, `<DropdownMenuTrigger>`, `<PopoverTrigger>`, `<MiniSelectTrigger>`, `<ToggleGroupItem>`) inside it creates invalid nested `<button>` HTML. Use the `render` prop instead:

src/__tests__/chat_tabs.test.ts

@@ -6,6 +6,9 @@ import {
   pushRecentViewedChatIdAtom,
   removeRecentViewedChatIdAtom,
   pruneClosedChatIdsAtom,
+  sessionOpenedChatIdsAtom,
+  addSessionOpenedChatIdAtom,
+  closeMultipleTabsAtom,
 } from "@/atoms/chatAtoms";
 import {
   applySelectionToOrderedChatIds,
@@ -27,15 +30,42 @@ function chat(id: number): ChatSummary {
 }
 
 describe("ChatTabs helpers", () => {
-  it("keeps MRU order and appends chats that were never viewed", () => {
+  it("keeps MRU order and appends chats that were never viewed (session filter)", () => {
     const chats = [chat(1), chat(2), chat(3), chat(4)];
-    const orderedIds = getOrderedRecentChatIds([4, 2], chats);
+    // All chats are in the session
+    const sessionIds = new Set([1, 2, 3, 4]);
+    const orderedIds = getOrderedRecentChatIds(
+      [4, 2],
+      chats,
+      new Set(),
+      sessionIds,
+    );
     expect(orderedIds).toEqual([4, 2, 1, 3]);
   });
 
+  it("only shows chats opened in current session", () => {
+    const chats = [chat(1), chat(2), chat(3), chat(4)];
+    // Only chats 1 and 3 are opened in the current session
+    const sessionIds = new Set([1, 3]);
+    const orderedIds = getOrderedRecentChatIds(
+      [4, 2, 3, 1],
+      chats,
+      new Set(),
+      sessionIds,
+    );
+    // Should only include chats 3 and 1 (in MRU order)
+    expect(orderedIds).toEqual([3, 1]);
+  });
+
   it("skips stale chat ids that no longer exist", () => {
     const chats = [chat(1), chat(3)];
-    const orderedIds = getOrderedRecentChatIds([3, 999, 1], chats);
+    const sessionIds = new Set([1, 3, 999]);
+    const orderedIds = getOrderedRecentChatIds(
+      [3, 999, 1],
+      chats,
+      new Set(),
+      sessionIds,
+    );
     expect(orderedIds).toEqual([3, 1]);
   });
 
@@ -130,3 +160,40 @@ describe("recent viewed chat atoms", () => {
     expect(pruned.has(99)).toBe(false);
   });
 });
+
+describe("session opened chat atoms", () => {
+  it("adds chat to session when opened", () => {
+    const store = createStore();
+    store.set(addSessionOpenedChatIdAtom, 1);
+    store.set(addSessionOpenedChatIdAtom, 2);
+    const sessionIds = store.get(sessionOpenedChatIdsAtom);
+    expect(sessionIds.has(1)).toBe(true);
+    expect(sessionIds.has(2)).toBe(true);
+  });
+
+  it("does not duplicate chat IDs in session", () => {
+    const store = createStore();
+    store.set(addSessionOpenedChatIdAtom, 1);
+    store.set(addSessionOpenedChatIdAtom, 1);
+    const sessionIds = store.get(sessionOpenedChatIdsAtom);
+    expect(sessionIds.size).toBe(1);
+  });
+});
+
+describe("close multiple tabs", () => {
+  it("closes multiple tabs at once", () => {
+    const store = createStore();
+    store.set(recentViewedChatIdsAtom, [1, 2, 3, 4, 5]);
+    store.set(closeMultipleTabsAtom, [2, 4]);
+    expect(store.get(recentViewedChatIdsAtom)).toEqual([1, 3, 5]);
+    expect(store.get(closedChatIdsAtom).has(2)).toBe(true);
+    expect(store.get(closedChatIdsAtom).has(4)).toBe(true);
+  });
+
+  it("handles empty array gracefully", () => {
+    const store = createStore();
+    store.set(recentViewedChatIdsAtom, [1, 2, 3]);
+    store.set(closeMultipleTabsAtom, []);
+    expect(store.get(recentViewedChatIdsAtom)).toEqual([1, 2, 3]);
+  });
+});

src/atoms/chatAtoms.ts

@@ -19,6 +19,8 @@ export const recentStreamChatIdsAtom = atom<Set<number>>(new Set<number>());
 export const recentViewedChatIdsAtom = atom<number[]>([]);
 // Track explicitly closed tabs - these should not reappear in the tab bar
 export const closedChatIdsAtom = atom<Set<number>>(new Set<number>());
+// Track chats opened in the current session - tabs are only shown for these
+export const sessionOpenedChatIdsAtom = atom<Set<number>>(new Set<number>());
 const MAX_RECENT_VIEWED_CHAT_IDS = 100;
 
 // Helper to remove a chat ID from the closed set (used when a closed tab is re-opened)
@@ -43,21 +45,34 @@ export const setRecentViewedChatIdsAtom = atom(
     }
   },
 );
+// Helper to add a chat ID to the session-opened set
+function addToSessionSet(get: Getter, set: Setter, chatId: number): void {
+  const sessionIds = get(sessionOpenedChatIdsAtom);
+  if (!sessionIds.has(chatId)) {
+    const newSessionIds = new Set(sessionIds);
+    newSessionIds.add(chatId);
+    set(sessionOpenedChatIdsAtom, newSessionIds);
+  }
+}
 // Add a chat ID to the recent list only if it's not already present.
 // Unlike pushRecentViewedChatIdAtom, this does NOT move existing IDs to the front,
 // preserving the current tab order for chats already tracked.
+// Also adds to session tracking so the tab appears in the tab bar.
 export const ensureRecentViewedChatIdAtom = atom(
   null,
   (get, set, chatId: number) => {
     const currentIds = get(recentViewedChatIdsAtom);
-    if (currentIds.includes(chatId)) return;
-    const nextIds = [chatId, ...currentIds];
-    if (nextIds.length > MAX_RECENT_VIEWED_CHAT_IDS) {
-      nextIds.length = MAX_RECENT_VIEWED_CHAT_IDS;
+    if (!currentIds.includes(chatId)) {
+      const nextIds = [chatId, ...currentIds];
+      if (nextIds.length > MAX_RECENT_VIEWED_CHAT_IDS) {
+        nextIds.length = MAX_RECENT_VIEWED_CHAT_IDS;
+      }
+      set(recentViewedChatIdsAtom, nextIds);
     }
-    set(recentViewedChatIdsAtom, nextIds);
     // Remove from closed set when explicitly selected
     removeFromClosedSet(get, set, chatId);
+    // Track in session so the tab appears
+    addToSessionSet(get, set, chatId);
   },
 );
 export const pushRecentViewedChatIdAtom = atom(
@@ -71,6 +86,8 @@ export const pushRecentViewedChatIdAtom = atom(
     set(recentViewedChatIdsAtom, nextIds);
     // Remove from closed set when explicitly selected
     removeFromClosedSet(get, set, chatId);
+    // Track in session so the tab appears (fixes re-open after bulk close)
+    addToSessionSet(get, set, chatId);
   },
 );
 export const removeRecentViewedChatIdAtom = atom(
@@ -85,6 +102,8 @@ export const removeRecentViewedChatIdAtom = atom(
     const newClosedIds = new Set(closedIds);
     newClosedIds.add(chatId);
     set(closedChatIdsAtom, newClosedIds);
+    // Also remove from session tracking (consistent with closeMultipleTabsAtom)
+    removeFromSessionSet(get, set, [chatId]);
   },
 );
 // Prune closed chat IDs that no longer exist in the chats list
@@ -106,6 +125,56 @@ export const pruneClosedChatIdsAtom = atom(
     }
   },
 );
+// Add a chat ID to the session-opened set (delegates to helper)
+export const addSessionOpenedChatIdAtom = atom(
+  null,
+  (get, set, chatId: number) => addToSessionSet(get, set, chatId),
+);
+// Helper to remove chat IDs from the session-opened set
+function removeFromSessionSet(
+  get: Getter,
+  set: Setter,
+  chatIds: number[],
+): void {
+  const sessionIds = get(sessionOpenedChatIdsAtom);
+  let changed = false;
+  const newSessionIds = new Set(sessionIds);
+  for (const id of chatIds) {
+    if (newSessionIds.has(id)) {
+      newSessionIds.delete(id);
+      changed = true;
+    }
+  }
+  if (changed) {
+    set(sessionOpenedChatIdsAtom, newSessionIds);
+  }
+}
+// Close multiple tabs at once (for "Close other tabs" / "Close tabs to the right")
+export const closeMultipleTabsAtom = atom(
+  null,
+  (get, set, chatIdsToClose: number[]) => {
+    if (chatIdsToClose.length === 0) return;
+
+    // Remove from recent viewed
+    const currentIds = get(recentViewedChatIdsAtom);
+    const closeSet = new Set(chatIdsToClose);
+    set(
+      recentViewedChatIdsAtom,
+      currentIds.filter((id) => !closeSet.has(id)),
+    );
+
+    // Add to closed set
+    const closedIds = get(closedChatIdsAtom);
+    const newClosedIds = new Set(closedIds);
+    for (const id of chatIdsToClose) {
+      newClosedIds.add(id);
+    }
+    set(closedChatIdsAtom, newClosedIds);
+
+    // Remove from session tracking to prevent unbounded growth
+    removeFromSessionSet(get, set, chatIdsToClose);
+  },
+);
 // Remove a chat ID from all tracking (used when chat is deleted)
 export const removeChatIdFromAllTrackingAtom = atom(
   null,
@@ -115,6 +184,8 @@ export const removeChatIdFromAllTrackingAtom = atom(
       get(recentViewedChatIdsAtom).filter((id) => id !== chatId),
     );
     removeFromClosedSet(get, set, chatId);
+    // Also remove from session tracking
+    removeFromSessionSet(get, set, [chatId]);
   },
 );
 

src/components/chat/ChatTabs.tsx

@@ -16,6 +16,8 @@ import {
   pushRecentViewedChatIdAtom,
   closedChatIdsAtom,
   pruneClosedChatIdsAtom,
+  sessionOpenedChatIdsAtom,
+  closeMultipleTabsAtom,
 } from "@/atoms/chatAtoms";
 import { cn } from "@/lib/utils";
 import {
@@ -24,6 +26,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -37,10 +46,21 @@ const OVERFLOW_TRIGGER_WIDTH_PX = 36;
 const DEFAULT_UNMEASURED_VISIBLE_TABS = 3;
 const MAX_OVERFLOW_MENU_ITEMS = 8;
 
+/**
+ * Returns an ordered list of chat IDs to display as tabs.
+ *
+ * @param recentViewedChatIds - IDs in the order they were recently viewed
+ * @param chats - All available chats
+ * @param closedChatIds - IDs of explicitly closed tabs
+ * @param sessionOpenedChatIds - IDs of chats opened in the current session.
+ *   If empty, no tabs will be shown (session-scoped behavior). This is intentional:
+ *   tabs only appear for chats explicitly opened during the current app session.
+ */
 export function getOrderedRecentChatIds(
   recentViewedChatIds: number[],
   chats: ChatSummary[],
   closedChatIds: Set<number> = new Set(),
+  sessionOpenedChatIds: Set<number> = new Set(),
 ): number[] {
   if (chats.length === 0) return [];
 
@@ -48,18 +68,23 @@ export function getOrderedRecentChatIds(
   const ordered: number[] = [];
   const seen = new Set<number>();
 
+  // Helper to check if a chat ID should be shown as a tab
+  const canShow = (id: number) =>
+    !seen.has(id) && !closedChatIds.has(id) && sessionOpenedChatIds.has(id);
+
   for (const chatId of recentViewedChatIds) {
-    if (!chatIds.has(chatId) || seen.has(chatId) || closedChatIds.has(chatId))
-      continue;
-    ordered.push(chatId);
-    seen.add(chatId);
+    if (chatIds.has(chatId) && canShow(chatId)) {
+      ordered.push(chatId);
+      seen.add(chatId);
+    }
   }
 
-  // Only add chats that haven't been explicitly closed
+  // Add remaining chats that were opened in this session but not in recentViewedChatIds
   for (const chat of chats) {
-    if (seen.has(chat.id) || closedChatIds.has(chat.id)) continue;
-    ordered.push(chat.id);
-    seen.add(chat.id);
+    if (canShow(chat.id)) {
+      ordered.push(chat.id);
+      seen.add(chat.id);
+    }
   }
 
   return ordered;
@@ -170,10 +195,12 @@ export function ChatTabs({ selectedChatId }: ChatTabsProps) {
   const isStreamingById = useAtomValue(isStreamingByIdAtom);
   const recentViewedChatIds = useAtomValue(recentViewedChatIdsAtom);
   const closedChatIds = useAtomValue(closedChatIdsAtom);
+  const sessionOpenedChatIds = useAtomValue(sessionOpenedChatIdsAtom);
   const setRecentViewedChatIds = useSetAtom(setRecentViewedChatIdsAtom);
   const removeRecentViewedChatId = useSetAtom(removeRecentViewedChatIdAtom);
   const pushRecentViewedChatId = useSetAtom(pushRecentViewedChatIdAtom);
   const pruneClosedChatIds = useSetAtom(pruneClosedChatIdsAtom);
+  const closeMultipleTabs = useSetAtom(closeMultipleTabsAtom);
   const setSelectedChatId = useSetAtom(selectedChatIdAtom);
   const { selectChat } = useSelectChat();
   const navigate = useNavigate();
@@ -202,8 +229,14 @@ export function ChatTabs({ selectedChatId }: ChatTabsProps) {
   );
 
   const orderedChatIds = useMemo(
-    () => getOrderedRecentChatIds(recentViewedChatIds, chats, closedChatIds),
-    [recentViewedChatIds, chats, closedChatIds],
+    () =>
+      getOrderedRecentChatIds(
+        recentViewedChatIds,
+        chats,
+        closedChatIds,
+        sessionOpenedChatIds,
+      ),
+    [recentViewedChatIds, chats, closedChatIds, sessionOpenedChatIds],
   );
 
   const orderedChats = useMemo(
@@ -390,6 +423,64 @@ export function ChatTabs({ selectedChatId }: ChatTabsProps) {
     });
   };
 
+  // Helper to close multiple tabs and optionally switch to a fallback
+  const closeTabsAndClearNotifications = useCallback(
+    (idsToClose: number[], fallbackChatId?: number) => {
+      if (idsToClose.length === 0) return;
+
+      for (const id of idsToClose) {
+        clearNotification(id);
+      }
+
+      closeMultipleTabs(idsToClose);
+
+      // Switch to fallback if:
+      // - fallback is provided AND
+      // - (selected chat is being closed OR selected chat differs from requested fallback)
+      if (
+        fallbackChatId !== undefined &&
+        (idsToClose.includes(selectedChatId ?? -1) ||
+          selectedChatId !== fallbackChatId)
+      ) {
+        const fallbackTab = chatsById.get(fallbackChatId);
+        if (fallbackTab) {
+          selectChat({
+            chatId: fallbackTab.id,
+            appId: fallbackTab.appId,
+            preserveTabOrder: true,
+          });
+        }
+      }
+    },
+    [
+      clearNotification,
+      closeMultipleTabs,
+      selectedChatId,
+      chatsById,
+      selectChat,
+    ],
+  );
+
+  const handleCloseOtherTabs = (keepChatId: number) => {
+    const idsToClose = orderedChatIds.filter((id) => id !== keepChatId);
+    // Always switch to the kept tab if we're not already on it
+    const fallback = selectedChatId !== keepChatId ? keepChatId : undefined;
+    closeTabsAndClearNotifications(idsToClose, fallback);
+  };
+
+  const handleCloseTabsToRight = (chatId: number) => {
+    const chatIndex = orderedChatIds.indexOf(chatId);
+    if (chatIndex === -1) return;
+
+    const idsToClose = orderedChatIds.slice(chatIndex + 1);
+    // Only switch to this chat if the selected one is being closed
+    const fallback =
+      selectedChatId !== null && idsToClose.includes(selectedChatId)
+        ? chatId
+        : undefined;
+    closeTabsAndClearNotifications(idsToClose, fallback);
+  };
+
   if (orderedChats.length === 0) return null;
 
   return (
@@ -408,136 +499,165 @@ export function ChatTabs({ selectedChatId }: ChatTabsProps) {
             const inProgress = isStreamingById.get(chat.id) === true;
             const hasNotification = !inProgress && notifiedChatIds.has(chat.id);
 
+            const tabIndex = orderedChatIds.indexOf(chat.id);
+            const hasTabsToRight =
+              tabIndex !== -1 && tabIndex < orderedChatIds.length - 1;
+            const hasOtherTabs = orderedChatIds.length > 1;
+
             return (
-              <Tooltip key={chat.id}>
-                <TooltipTrigger
-                  render={
-                    <div
-                      draggable
-                      onAuxClick={(event) => {
-                        // Middle-click (button 1) to close tab
-                        if (event.button === 1) {
-                          event.preventDefault();
-                          handleCloseTab(chat.id);
-                        }
-                      }}
-                      onDragStart={(event) => {
-                        event.dataTransfer.effectAllowed = "move";
-                        event.dataTransfer.setData(
-                          "text/plain",
-                          String(chat.id),
-                        );
-                        setDraggingChatId(chat.id);
-                      }}
-                      onDragEnd={() => setDraggingChatId(null)}
-                      onDragOver={(event) => {
-                        if (
-                          draggingChatId === null ||
-                          draggingChatId === chat.id
-                        ) {
-                          return;
-                        }
-                        event.preventDefault();
-                      }}
-                      onDrop={(event) => {
-                        event.preventDefault();
-                        if (
-                          draggingChatId === null ||
-                          draggingChatId === chat.id
-                        ) {
-                          return;
-                        }
-
-                        const nextIds = reorderVisibleChatIds(
-                          orderedChatIds,
-                          visibleTabs.length,
-                          draggingChatId,
-                          chat.id,
-                        );
-                        if (!isSameIdOrder(orderedChatIds, nextIds)) {
-                          setRecentViewedChatIds(nextIds);
-                        }
-                        setDraggingChatId(null);
-                      }}
-                      className={cn(
-                        "group relative flex h-10 min-w-[160px] max-w-52 items-center gap-1 rounded-md px-2.5 transition-all active:scale-[0.97]",
-                        isActive
-                          ? "bg-background text-foreground shadow-sm"
-                          : "bg-muted/50 text-muted-foreground hover:bg-muted",
-                        isDragging && "opacity-60",
-                        // Chrome-style divider on right edge
-                        !isActive &&
-                          !isNextActive &&
-                          index < visibleTabs.length - 1 &&
-                          "after:absolute after:right-0 after:top-1/4 after:h-1/2 after:w-px after:bg-border",
-                      )}
-                    />
-                  }
-                >
-                  {inProgress && (
-                    <span
-                      className="flex items-center text-purple-600"
-                      aria-label={t("chatInProgress")}
-                      title={t("chatInProgress")}
+              <ContextMenu key={chat.id}>
+                <ContextMenuTrigger>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <div
+                          draggable
+                          onAuxClick={(event) => {
+                            // Middle-click (button 1) to close tab
+                            if (event.button === 1) {
+                              event.preventDefault();
+                              handleCloseTab(chat.id);
+                            }
+                          }}
+                          onDragStart={(event) => {
+                            event.dataTransfer.effectAllowed = "move";
+                            event.dataTransfer.setData(
+                              "text/plain",
+                              String(chat.id),
+                            );
+                            setDraggingChatId(chat.id);
+                          }}
+                          onDragEnd={() => setDraggingChatId(null)}
+                          onDragOver={(event) => {
+                            if (
+                              draggingChatId === null ||
+                              draggingChatId === chat.id
+                            ) {
+                              return;
+                            }
+                            event.preventDefault();
+                          }}
+                          onDrop={(event) => {
+                            event.preventDefault();
+                            if (
+                              draggingChatId === null ||
+                              draggingChatId === chat.id
+                            ) {
+                              return;
+                            }
+
+                            const nextIds = reorderVisibleChatIds(
+                              orderedChatIds,
+                              visibleTabs.length,
+                              draggingChatId,
+                              chat.id,
+                            );
+                            if (!isSameIdOrder(orderedChatIds, nextIds)) {
+                              setRecentViewedChatIds(nextIds);
+                            }
+                            setDraggingChatId(null);
+                          }}
+                          className={cn(
+                            "group relative flex h-10 min-w-[160px] max-w-52 items-center gap-1 rounded-md px-2.5 transition-all active:scale-[0.97]",
+                            isActive
+                              ? "bg-background text-foreground shadow-sm"
+                              : "bg-muted/50 text-muted-foreground hover:bg-muted",
+                            isDragging && "opacity-60",
+                            // Chrome-style divider on right edge
+                            !isActive &&
+                              !isNextActive &&
+                              index < visibleTabs.length - 1 &&
+                              "after:absolute after:right-0 after:top-1/4 after:h-1/2 after:w-px after:bg-border",
+                          )}
+                        />
+                      }
                     >
-                      <Loader2 size={12} className="animate-spin" />
-                    </span>
-                  )}
-                  {hasNotification && (
-                    <span
-                      className="flex items-center"
-                      aria-label={t("newActivity")}
-                      title={t("newActivity")}
+                      {inProgress && (
+                        <span
+                          className="flex items-center text-purple-600"
+                          aria-label={t("chatInProgress")}
+                          title={t("chatInProgress")}
+                        >
+                          <Loader2 size={12} className="animate-spin" />
+                        </span>
+                      )}
+                      {hasNotification && (
+                        <span
+                          className="flex items-center"
+                          aria-label={t("newActivity")}
+                          title={t("newActivity")}
+                        >
+                          <span className="h-2 w-2 rounded-full bg-blue-500" />
+                        </span>
+                      )}
+                      <button
+                        type="button"
+                        onClick={() => handleTabClick(chat)}
+                        className="min-w-0 flex-1 text-left rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                        aria-current={isActive ? "page" : undefined}
+                      >
+                        <div className="min-w-0">
+                          <div className="truncate text-xs leading-3.5 font-bold">
+                            {appName}
+                          </div>
+                          <div className="truncate text-xs leading-4">
+                            {title}
+                          </div>
+                        </div>
+                      </button>
+                      <button
+                        type="button"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          handleCloseTab(chat.id);
+                        }}
+                        className={cn(
+                          "flex h-6 w-6 items-center justify-center rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                          isActive
+                            ? "opacity-80 hover:bg-muted"
+                            : "opacity-0 group-hover:opacity-80 hover:bg-background/50 focus-visible:opacity-80",
+                        )}
+                        aria-label={t("closeChatTab", { title })}
+                      >
+                        <X size={12} />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      side="bottom"
+                      align="start"
+                      sideOffset={6}
+                      className="max-w-80 !rounded-lg !border !border-border !bg-popover !px-3.5 !py-2.5 !text-popover-foreground !shadow-lg [&>:last-child]:!hidden"
                     >
-                      <span className="h-2 w-2 rounded-full bg-blue-500" />
-                    </span>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => handleTabClick(chat)}
-                    className="min-w-0 flex-1 text-left rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                    aria-current={isActive ? "page" : undefined}
-                  >
-                    <div className="min-w-0">
-                      <div className="truncate text-xs leading-3.5 font-bold">
-                        {appName}
+                      <div className="min-w-0">
+                        <div className="truncate text-[11px] leading-4 font-semibold">
+                          {appName}
+                        </div>
+                        <div className="mt-0.5 text-[11px] leading-4 break-words opacity-70">
+                          {titleExcerpt}
+                        </div>
                       </div>
-                      <div className="truncate text-xs leading-4">{title}</div>
-                    </div>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleCloseTab(chat.id);
-                    }}
-                    className={cn(
-                      "flex h-6 w-6 items-center justify-center rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                      isActive
-                        ? "opacity-80 hover:bg-muted"
-                        : "opacity-0 group-hover:opacity-80 hover:bg-background/50 focus-visible:opacity-80",
-                    )}
-                    aria-label={t("closeChatTab", { title })}
+                    </TooltipContent>
+                  </Tooltip>
+                </ContextMenuTrigger>
+                <ContextMenuContent>
+                  <ContextMenuItem onClick={() => handleCloseTab(chat.id)}>
+                    {t("closeTab")}
+                  </ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem
+                    onClick={() => handleCloseOtherTabs(chat.id)}
+                    disabled={!hasOtherTabs}
                   >
-                    <X size={12} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent
-                  side="bottom"
-                  align="start"
-                  sideOffset={6}
-                  className="max-w-80 !rounded-lg !border !border-border !bg-popover !px-3.5 !py-2.5 !text-popover-foreground !shadow-lg [&>:last-child]:!hidden"
-                >
-                  <div className="min-w-0">
-                    <div className="truncate text-[11px] leading-4 font-semibold">
-                      {appName}
-                    </div>
-                    <div className="mt-0.5 text-[11px] leading-4 break-words opacity-70">
-                      {titleExcerpt}
-                    </div>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
+                    {t("closeOtherTabs")}
+                  </ContextMenuItem>
+                  <ContextMenuItem
+                    onClick={() => handleCloseTabsToRight(chat.id)}
+                    disabled={!hasTabsToRight}
+                  >
+                    {t("closeTabsToRight")}
+                  </ContextMenuItem>
+                </ContextMenuContent>
+              </ContextMenu>
             );
           })}
         </div>

src/components/chat/QuestionnaireInput.tsx

@@ -243,7 +243,7 @@ export function QuestionnaireInput() {
                   currentQuestion.options && (
                     <RadioGroup
                       value={(responses[currentQuestion.id] as string) || ""}
-                      onValueChange={(value: string) => {
+                      onValueChange={(value) => {
                         setResponses((prev) => ({
                           ...prev,
                           [currentQuestion.id]: value,

src/components/ui/context-menu.tsx

+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Context menu using Base UI ContextMenu primitives.
+ * Opens on right-click or long press natively.
+ */
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={className}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+interface ContextMenuContentProps extends ContextMenuPrimitive.Popup.Props {
+  sideOffset?: number;
+}
+
+function ContextMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ContextMenuContentProps) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        side="bottom"
+        align="start"
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+            className,
+          )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-1 rounded-sm px-2 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<"div"> & {
+  inset?: boolean;
+}) {
+  return (
+    <div
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      openOnHover={false}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-sub-content"
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+            className,
+          )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

src/components/ui/radio-group.tsx

@@ -9,7 +9,10 @@ import { cn } from "@/lib/utils";
 
 const RadioGroup = React.forwardRef<
   HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof BaseRadioGroup> & {
+  Omit<
+    React.ComponentPropsWithoutRef<typeof BaseRadioGroup>,
+    "onValueChange"
+  > & {
     onValueChange?: (value: string) => void;
   }
 >(({ className, onValueChange, ...props }, ref) => {

src/hooks/useSelectChat.ts

@@ -2,6 +2,7 @@ import { useSetAtom } from "jotai";
 import {
   selectedChatIdAtom,
   pushRecentViewedChatIdAtom,
+  addSessionOpenedChatIdAtom,
 } from "@/atoms/chatAtoms";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useNavigate } from "@tanstack/react-router";
@@ -10,6 +11,7 @@ export function useSelectChat() {
   const setSelectedChatId = useSetAtom(selectedChatIdAtom);
   const setSelectedAppId = useSetAtom(selectedAppIdAtom);
   const pushRecentViewedChatId = useSetAtom(pushRecentViewedChatIdAtom);
+  const addSessionOpenedChatId = useSetAtom(addSessionOpenedChatIdAtom);
   const navigate = useNavigate();
 
   return {
@@ -24,6 +26,8 @@ export function useSelectChat() {
     }) => {
       setSelectedChatId(chatId);
       setSelectedAppId(appId);
+      // Track this chat as opened in the current session
+      addSessionOpenedChatId(chatId);
       if (!preserveTabOrder) {
         pushRecentViewedChatId(chatId);
       }

src/i18n/locales/en/chat.json

@@ -3,6 +3,9 @@
   "recentChats": "Recent Chats",
   "searchChats": "Search chats",
   "closeChatTab": "Close tab: {{title}}",
+  "closeTab": "Close",
+  "closeOtherTabs": "Close other tabs",
+  "closeTabsToRight": "Close tabs to the right",
   "chatInProgress": "Chat in progress",
   "newActivity": "New activity",
   "openOverflowTabs": "Open more tabs ({{count}})",

src/i18n/locales/pt-BR/chat.json

@@ -3,6 +3,9 @@
   "recentChats": "Chats Recentes",
   "searchChats": "Pesquisar chats",
   "closeChatTab": "Fechar aba: {{title}}",
+  "closeTab": "Fechar",
+  "closeOtherTabs": "Fechar outras abas",
+  "closeTabsToRight": "Fechar abas à direita",
   "chatInProgress": "Chat em andamento",
   "newActivity": "Nova atividade",
   "openOverflowTabs": "Abrir mais abas ({{count}})",

src/i18n/locales/zh-CN/chat.json

@@ -3,6 +3,9 @@
   "recentChats": "最近的聊天",
   "searchChats": "搜索聊天",
   "closeChatTab": "关闭标签页：{{title}}",
+  "closeTab": "关闭",
+  "closeOtherTabs": "关闭其他标签页",
+  "closeTabsToRight": "关闭右侧标签页",
   "chatInProgress": "聊天进行中",
   "newActivity": "新活动",
   "openOverflowTabs": "打开更多标签页（{{count}}）",