fix(web): persist explicit workspace target switches

Author: pallyoung

packages/web/src/features/command-palette/components/command-palette.test.tsx

@@ -1,8 +1,9 @@
 import type { Workspace } from "@coder-studio/core";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { commandPaletteOpenAtom, localeAtom } from "../../../atoms/app-ui";
+import { wsClientAtom } from "../../../atoms/connection";
 import {
   activeWorkspaceIdAtom,
   workspaceOrderAtom,
@@ -89,6 +90,39 @@ describe("CommandPalette", () => {
     expect(routerMocks.navigate).toHaveBeenCalledWith("/workspace");
   });
 
+  it("persists the global last-viewed target when switching workspaces", async () => {
+    const sendCommand = vi.fn().mockResolvedValue({
+      workspaceId: "ws-2",
+      updatedAt: 10,
+    });
+    const store = createStore();
+    store.set(localeAtom, "en");
+    store.set(commandPaletteOpenAtom, true);
+    store.set(wsClientAtom, { sendCommand } as never);
+    store.set(workspacesAtom, {
+      "ws-1": createWorkspace("ws-1", "/tmp/one"),
+      "ws-2": createWorkspace("ws-2", "/tmp/two"),
+    });
+    store.set(workspaceOrderAtom, ["ws-2", "ws-1"]);
+    store.set(workspacesLoadStateAtom, "ready");
+
+    render(
+      <Provider store={store}>
+        <CommandPalette />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByText("Workspace: two"));
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenCalledWith(
+        "workspace.lastViewedTarget.set",
+        { workspaceId: "ws-2", sessionId: undefined },
+        undefined
+      );
+    });
+  });
+
   it("renders inside shared Sheet on mobile and still filters commands", () => {
     viewportMocks.viewport = "mobile";
 

packages/web/src/features/command-palette/components/command-palette.tsx

@@ -18,6 +18,7 @@ import { EmptyState, Sheet, ThemedIcon } from "../../../components/ui";
 import { useViewport } from "../../../hooks/use-viewport";
 import { useTranslation } from "../../../lib/i18n";
 import { formatWorkspaceLabel } from "../../notifications/format";
+import { useSelectWorkspaceTarget } from "../../workspace/actions/use-select-workspace-target";
 import {
   bottomPanelHeightAtom,
   focusModeAtom,
@@ -70,6 +71,7 @@ export function CommandPalette() {
   const [bottomPanelHeight, setBottomPanelHeight] = useAtom(bottomPanelHeightAtom);
   const activeWorkspaceId = useAtomValue(resolvedActiveWorkspaceIdAtom);
   const setActiveWorkspaceId = useSetAtom(activeWorkspaceIdAtom);
+  const selectWorkspaceTarget = useSelectWorkspaceTarget();
   const workspaces = useAtomValue(orderedWorkspacesAtom);
 
   const [searchQuery, setSearchQuery] = useState("");
@@ -90,6 +92,7 @@ export function CommandPalette() {
     setBottomPanelHeight,
     activeWorkspaceId,
     setActiveWorkspaceId,
+    selectWorkspaceTarget,
     workspaces,
     locationPathname: location.pathname,
     navigate,
@@ -286,6 +289,7 @@ function buildCommands(context: {
   setBottomPanelHeight: (v: number) => void;
   activeWorkspaceId: string | null;
   setActiveWorkspaceId: (v: string | null) => void;
+  selectWorkspaceTarget: (workspaceId: string) => Promise<unknown>;
   workspaces: Workspace[];
   locationPathname: string;
   navigate: (path: string) => void;
@@ -304,6 +308,7 @@ function buildCommands(context: {
     setBottomPanelHeight,
     activeWorkspaceId,
     setActiveWorkspaceId,
+    selectWorkspaceTarget,
     workspaces,
     locationPathname,
     navigate,
@@ -405,7 +410,7 @@ function buildCommands(context: {
       label: `${t("workspace.title")}: ${workspaceLabel}`,
       description: ws.path || ws.id,
       action: () => {
-        setActiveWorkspaceId(ws.id);
+        void selectWorkspaceTarget(ws.id);
         if (locationPathname !== "/workspace") {
           navigate("/workspace");
         }

packages/web/src/features/topbar/components/tab.test.tsx

@@ -10,6 +10,7 @@ import {
   workspacesAtom,
 } from "../../../atoms/workspaces";
 import { TabList, Tabs } from "../../../components/ui";
+import { CommandResultError } from "../../../ws/client";
 import { WorkspaceTab } from "./tab";
 
 const routerMocks = vi.hoisted(() => ({
@@ -154,6 +155,60 @@ describe("WorkspaceTab", () => {
     );
   });
 
+  it("retries persistence for the same workspace after a failed write", async () => {
+    const workspace = createWorkspace("ws-2", "/tmp/two");
+    const sendCommand = vi
+      .fn()
+      .mockRejectedValueOnce(
+        new CommandResultError({
+          code: "write_failed",
+          message: "failed",
+        })
+      )
+      .mockResolvedValueOnce({
+        workspaceId: "ws-2",
+        updatedAt: 11,
+      });
+    const store = createStore();
+
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, { sendCommand } as never);
+
+    const { rerender } = renderWorkspaceTab(store, workspace, { value: "ws-1" });
+
+    fireEvent.click(screen.getByRole("tab", { name: /two/i }));
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenNthCalledWith(
+        1,
+        "workspace.lastViewedTarget.set",
+        { workspaceId: "ws-2", sessionId: undefined },
+        undefined
+      );
+    });
+
+    rerender(
+      <Provider store={store}>
+        <Tabs aria-label="Workspaces" onValueChange={vi.fn()} value="ws-1">
+          <TabList className="topbar-tablist">
+            <WorkspaceTab workspace={workspace} isActive={false} />
+          </TabList>
+        </Tabs>
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: /two/i }));
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenNthCalledWith(
+        2,
+        "workspace.lastViewedTarget.set",
+        { workspaceId: "ws-2", sessionId: undefined },
+        undefined
+      );
+    });
+  });
+
   it("closes the active workspace without route navigation and falls back to the next ordered workspace", async () => {
     const firstWorkspace = createWorkspace("ws-1", "/tmp/one");
     const secondWorkspace = createWorkspace("ws-2", "/tmp/two");

packages/web/src/features/topbar/components/tab.tsx

@@ -6,14 +6,12 @@
  */
 
 import type { Workspace } from "@coder-studio/core";
-import { useSetAtom } from "jotai";
 import { X } from "lucide-react";
 import type { FC } from "react";
-import { activeWorkspaceIdAtom } from "../../../atoms/workspaces";
 import { Badge, IconButton, Tab, Tooltip } from "../../../components/ui";
 import { useTranslation } from "../../../lib/i18n";
 import { formatWorkspaceLabel } from "../../notifications/format";
-import { usePersistWorkspaceLastViewedTarget } from "../../workspace/actions/use-persist-workspace-last-viewed-target";
+import { useSelectWorkspaceTarget } from "../../workspace/actions/use-select-workspace-target";
 import { useWorkspaceCloseAction } from "../../workspace/actions/use-workspace-close-action";
 
 interface WorkspaceTabProps {
@@ -32,18 +30,16 @@ interface WorkspaceTabProps {
  */
 export const WorkspaceTab: FC<WorkspaceTabProps> = ({ workspace, isActive }) => {
   const t = useTranslation();
-  const setActiveWorkspace = useSetAtom(activeWorkspaceIdAtom);
   const closeWorkspace = useWorkspaceCloseAction();
-  const persistLastViewedTarget = usePersistWorkspaceLastViewedTarget();
+  const selectWorkspaceTarget = useSelectWorkspaceTarget();
   const displayName = formatWorkspaceLabel(workspace) || workspace.id;
 
   const handleClick = () => {
     if (isActive) {
       return;
     }
 
-    setActiveWorkspace(workspace.id);
-    void persistLastViewedTarget({ workspaceId: workspace.id });
+    void selectWorkspaceTarget(workspace.id);
   };
 
   const handleClose = async (e: React.MouseEvent) => {

packages/web/src/features/topbar/index.test.tsx

@@ -1,9 +1,11 @@
 import type { Workspace } from "@coder-studio/core";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { localeAtom } from "../../atoms/app-ui";
+import { wsClientAtom } from "../../atoms/connection";
 import {
+  activeWorkspaceIdAtom,
   workspaceOrderAtom,
   workspacesAtom,
   workspacesLoadStateAtom,
@@ -39,14 +41,6 @@ vi.mock("../workspace/views/shared/workspace-launch-modal", () => ({
   WorkspaceLaunchModal: () => null,
 }));
 
-vi.mock("./components/tab", () => ({
-  WorkspaceTab: ({ workspace, isActive }: { workspace: Workspace; isActive: boolean }) => (
-    <div data-testid="workspace-tab" data-active={String(isActive)}>
-      {workspace.id}
-    </div>
-  ),
-}));
-
 function createWorkspace(id: string, path: string): Workspace {
   return {
     id,
@@ -84,14 +78,50 @@ describe("TopBar", () => {
       </Provider>
     );
 
-    const tabs = screen.getAllByTestId("workspace-tab");
+    const tabs = screen.getAllByRole("tab");
 
-    expect(tabs.map((tab) => tab.textContent)).toEqual(["ws-b", "ws-a"]);
-    expect(tabs[0]?.getAttribute("data-active")).toBe("true");
-    expect(tabs[1]?.getAttribute("data-active")).toBe("false");
+    expect(tabs.map((tab) => tab.textContent)).toEqual(["b", "a"]);
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "false");
     expect(screen.getByRole("tablist", { name: "Workspace tabs" })).toBeInTheDocument();
   });
 
+  it("persists the global last-viewed target when keyboard navigation changes workspace tabs", async () => {
+    const store = createStore();
+    const sendCommand = vi.fn().mockResolvedValue({
+      workspaceId: "ws-b",
+      updatedAt: 10,
+    });
+
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, { sendCommand } as never);
+    store.set(workspacesAtom, {
+      "ws-a": createWorkspace("ws-a", "/tmp/a"),
+      "ws-b": createWorkspace("ws-b", "/tmp/b"),
+    });
+    store.set(workspaceOrderAtom, ["ws-a", "ws-b"]);
+    store.set(workspacesLoadStateAtom, "ready");
+    store.set(activeWorkspaceIdAtom, "ws-a");
+
+    render(
+      <Provider store={store}>
+        <TopBar />
+      </Provider>
+    );
+
+    const activeTab = screen.getByRole("tab", { name: "a" });
+    activeTab.focus();
+    fireEvent.keyDown(activeTab, { key: "ArrowRight" });
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenCalledWith(
+        "workspace.lastViewedTarget.set",
+        { workspaceId: "ws-b", sessionId: undefined },
+        undefined
+      );
+    });
+  });
+
   it("uses translated labels when locale is set to en", () => {
     const store = createStore();
     store.set(localeAtom, "en");

packages/web/src/features/topbar/index.tsx

@@ -4,18 +4,15 @@
  * Main navigation bar with workspace tabs, quick actions, and settings.
  */
 
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import type { FC } from "react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { commandPaletteOpenAtom } from "../../atoms/app-ui";
-import {
-  activeWorkspaceIdAtom,
-  orderedWorkspacesAtom,
-  resolvedActiveWorkspaceIdAtom,
-} from "../../atoms/workspaces";
+import { orderedWorkspacesAtom, resolvedActiveWorkspaceIdAtom } from "../../atoms/workspaces";
 import { EmptyState, IconButton, TabList, Tabs, ThemedIcon, Tooltip } from "../../components/ui";
 import { useTranslation } from "../../lib/i18n";
+import { useSelectWorkspaceTarget } from "../workspace/actions/use-select-workspace-target";
 import type { WorkspaceFullscreenController } from "../workspace/actions/use-workspace-fullscreen";
 import { sidebarCollapsedAtom, terminalPanelVisibleAtom } from "../workspace/atoms";
 import { WorkspaceFullscreenButton } from "../workspace/components/workspace-fullscreen-button";
@@ -54,7 +51,7 @@ export const TopBar: FC<TopBarProps> = ({ fullscreenController }) => {
   const workspaceList = useAtomValue(orderedWorkspacesAtom);
   const activeWorkspaceId = useAtomValue(resolvedActiveWorkspaceIdAtom);
   const selectedWorkspaceId = activeWorkspaceId ?? workspaceList[0]?.id ?? "";
-  const setActiveWorkspace = useSetAtom(activeWorkspaceIdAtom);
+  const selectWorkspaceTarget = useSelectWorkspaceTarget();
   const [commandPaletteOpen, setCommandPaletteOpen] = useAtom(commandPaletteOpenAtom);
   const [terminalPanelVisible, setTerminalPanelVisible] = useAtom(terminalPanelVisibleAtom);
   const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
@@ -77,7 +74,9 @@ export const TopBar: FC<TopBarProps> = ({ fullscreenController }) => {
           <Tabs
             aria-label={t("workspace.tabs")}
             className="topbar-tabs-nav"
-            onValueChange={setActiveWorkspace}
+            onValueChange={(workspaceId) => {
+              void selectWorkspaceTarget(workspaceId);
+            }}
             value={selectedWorkspaceId}
           >
             <TabList className="topbar-tablist">

packages/web/src/features/workspace/actions/use-persist-workspace-last-viewed-target.test.tsx

@@ -0,0 +1,63 @@
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { lastViewedTargetAtom } from "../../../atoms/app-ui";
+import { wsClientAtom } from "../../../atoms/connection";
+import { CommandResultError } from "../../../ws/client";
+import { usePersistWorkspaceLastViewedTarget } from "./use-persist-workspace-last-viewed-target";
+
+function wrapperFor(store: ReturnType<typeof createStore>) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <Provider store={store}>{children}</Provider>;
+  };
+}
+
+describe("usePersistWorkspaceLastViewedTarget", () => {
+  it("does not suppress a retry for the same target after a failed write", async () => {
+    const store = createStore();
+    const sendCommand = vi
+      .fn()
+      .mockRejectedValueOnce(
+        new CommandResultError({
+          code: "write_failed",
+          message: "failed",
+        })
+      )
+      .mockResolvedValueOnce({
+        workspaceId: "ws-2",
+        updatedAt: 11,
+      });
+
+    store.set(wsClientAtom, {
+      sendCommand,
+      subscribe: vi.fn(() => () => {}),
+    } as never);
+    store.set(lastViewedTargetAtom, null);
+
+    const { result } = renderHook(() => usePersistWorkspaceLastViewedTarget(), {
+      wrapper: wrapperFor(store),
+    });
+
+    await act(async () => {
+      await result.current({ workspaceId: "ws-2" });
+    });
+
+    await act(async () => {
+      await result.current({ workspaceId: "ws-2" });
+    });
+
+    expect(sendCommand).toHaveBeenNthCalledWith(
+      1,
+      "workspace.lastViewedTarget.set",
+      { workspaceId: "ws-2", sessionId: undefined },
+      undefined
+    );
+    expect(sendCommand).toHaveBeenNthCalledWith(
+      2,
+      "workspace.lastViewedTarget.set",
+      { workspaceId: "ws-2", sessionId: undefined },
+      undefined
+    );
+  });
+});