fix: keep workspace tabs stable when switching

Author: pallyoung

apps/web/src/features/command-palette/actions.ts

@@ -107,15 +107,15 @@ export const buildCommandPaletteActions = ({
   {
     id: "switch-prev-workspace",
     label: locale === "zh" ? "切换到上一个工作区" : "Switch To Previous Workspace",
-    description: locale === "zh" ? "按时间序列回到上一个工作区" : "Jump to the previous workspace in the stack",
+    description: locale === "zh" ? "按当前标签顺序回到上一个工作区" : "Jump to the previous workspace tab",
     shortcut: "⌘/Ctrl ⇧ [",
     keywords: "workspace previous back",
     run: () => onCycleWorkspace(-1),
   },
   {
     id: "switch-next-workspace",
     label: locale === "zh" ? "切换到下一个工作区" : "Switch To Next Workspace",
-    description: locale === "zh" ? "按时间序列前往下一个工作区" : "Jump to the next workspace in the stack",
+    description: locale === "zh" ? "按当前标签顺序前往下一个工作区" : "Jump to the next workspace tab",
     shortcut: "⌘/Ctrl ⇧ ]",
     keywords: "workspace next forward",
     run: () => onCycleWorkspace(1),

apps/web/src/features/workspace/WorkspaceScreen.tsx

@@ -1959,34 +1959,24 @@ export default function WorkspaceScreen({ locale, appSettings, onOpenSettings }:
     ["--right-split" as string]: `${state.layout.rightSplit}%`
   };
 
-  const workspaceTabs = [...state.tabs]
-    .sort((left, right) => {
+  const workspaceTabs = state.tabs.map((tab) => {
+    const sessions = [...tab.sessions].sort((left, right) => {
       if (sessionSort === "name") {
-        return (displayPathName(left.project?.path) || displayWorkspaceTitle(left.title))
-          .localeCompare(displayPathName(right.project?.path) || displayWorkspaceTitle(right.title), locale === "zh" ? "zh-CN" : "en");
+        return displaySessionTitle(left.title).localeCompare(displaySessionTitle(right.title), locale === "zh" ? "zh-CN" : "en");
       }
-      const leftTime = Math.max(...left.sessions.map((session) => session.lastActiveAt));
-      const rightTime = Math.max(...right.sessions.map((session) => session.lastActiveAt));
-      return rightTime - leftTime;
-    })
-    .map((tab) => {
-      const sessions = [...tab.sessions].sort((left, right) => {
-        if (sessionSort === "name") {
-          return displaySessionTitle(left.title).localeCompare(displaySessionTitle(right.title), locale === "zh" ? "zh-CN" : "en");
-        }
-        return right.lastActiveAt - left.lastActiveAt;
-      });
-      const hasRunning = sessions.some((session) => ["running", "waiting", "background"].includes(session.status));
-      const unread = sessions.reduce((sum, session) => sum + session.unread, 0);
-      return {
-        id: tab.id,
-        label: displayPathName(tab.project?.path) || displayWorkspaceTitle(tab.title),
-        active: tab.id === state.activeTabId,
-        hasRunning,
-        unread,
-        sessions
-      };
+      return right.lastActiveAt - left.lastActiveAt;
     });
+    const hasRunning = sessions.some((session) => ["running", "waiting", "background"].includes(session.status));
+    const unread = sessions.reduce((sum, session) => sum + session.unread, 0);
+    return {
+      id: tab.id,
+      label: displayPathName(tab.project?.path) || displayWorkspaceTitle(tab.title),
+      active: tab.id === state.activeTabId,
+      hasRunning,
+      unread,
+      sessions
+    };
+  });
   const commandPaletteActions = buildCommandPaletteActions({
     locale,
     t,

apps/web/src/features/workspace/workspace-tabs.ts

@@ -8,17 +8,11 @@ export const buildWorkspaceTabItems = (
   tabs: Tab[],
   activeTabId: string,
   locale: Locale,
-  sort: "time" | "name" = "time"
-): WorkspaceTabItem[] => [...tabs]
-  .sort((left, right) => {
-    if (sort === "name") {
-      return (displayPathName(left.project?.path) || localizeWorkspaceTitle(left.title, locale))
-        .localeCompare(displayPathName(right.project?.path) || localizeWorkspaceTitle(right.title, locale), locale === "zh" ? "zh-CN" : "en");
-    }
-    const leftTime = Math.max(...left.sessions.map((session) => session.lastActiveAt));
-    const rightTime = Math.max(...right.sessions.map((session) => session.lastActiveAt));
-    return rightTime - leftTime;
-  })
+  sort: "default" | "name" = "default"
+): WorkspaceTabItem[] => (sort === "name"
+  ? [...tabs].sort((left, right) => (displayPathName(left.project?.path) || localizeWorkspaceTitle(left.title, locale))
+    .localeCompare(displayPathName(right.project?.path) || localizeWorkspaceTitle(right.title, locale), locale === "zh" ? "zh-CN" : "en"))
+  : tabs)
   .map((tab) => ({
     id: tab.id,
     label: displayPathName(tab.project?.path) || localizeWorkspaceTitle(tab.title, locale),

tests/e2e/e2e.spec.ts

@@ -1,10 +1,16 @@
 import os from 'node:os';
 import path from 'node:path';
+import fs from 'node:fs/promises';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 
 const HOME_DIR = os.homedir();
 const HOME_LABEL = path.basename(HOME_DIR) || HOME_DIR;
+const TAB_STABILITY_DIRS = [
+  path.join(HOME_DIR, 'coder-studio-e2e-tab-a'),
+  path.join(HOME_DIR, 'coder-studio-e2e-tab-b'),
+];
+const TAB_STABILITY_LABELS = TAB_STABILITY_DIRS.map((dir) => path.basename(dir));
 
 const openLaunchOverlay = async (page: Page) => {
   await page.goto('/');
@@ -34,6 +40,29 @@ const launchLocalWorkspace = async (page: Page) => {
   await expect(page.getByTestId('workspace-topbar')).toBeVisible();
 };
 
+const invokeRpc = async <T>(page: Page, command: string, payload: Record<string, unknown> = {}) => {
+  const response = await page.request.post(`/api/rpc/${command}`, { data: payload });
+  expect(response.ok()).toBeTruthy();
+  const body = await response.json();
+  expect(body.ok).not.toBe(false);
+  return body.data as T;
+};
+
+const launchWorkspaceByPath = async (page: Page, workspacePath: string) => {
+  await invokeRpc(page, 'launch_workspace', {
+    source: {
+      kind: 'local',
+      pathOrUrl: workspacePath,
+      target: { type: 'native' },
+    },
+  });
+};
+
+const readWorkspaceTabLabels = async (page: Page) =>
+  page.locator('.workspace-top-tab .session-top-label').evaluateAll((nodes) =>
+    nodes.map((node) => node.textContent?.trim() ?? '').filter(Boolean)
+  );
+
 test.beforeEach(async ({ page }) => {
   await page.addInitScript(() => {
     if (!window.sessionStorage.getItem('coder-studio.test-init')) {
@@ -45,6 +74,14 @@ test.beforeEach(async ({ page }) => {
   });
 });
 
+test.beforeAll(async () => {
+  await Promise.all(TAB_STABILITY_DIRS.map((dir) => fs.mkdir(dir, { recursive: true })));
+});
+
+test.afterAll(async () => {
+  await Promise.all(TAB_STABILITY_DIRS.map((dir) => fs.rm(dir, { recursive: true, force: true })));
+});
+
 test('local workspace flow opens the workspace shell', async ({ page }) => {
   await launchLocalWorkspace(page);
   await expect(page.getByTestId('workspace-topbar')).toContainText(HOME_LABEL);
@@ -95,3 +132,24 @@ test('restores the last workspace after reload', async ({ page }) => {
   await expect(page.getByTestId('overlay')).toHaveCount(0);
   await expect(page.getByTestId('workspace-topbar')).toContainText(HOME_LABEL);
 });
+
+test('workspace tabs keep a stable order when switching between workspaces', async ({ page }) => {
+  await launchWorkspaceByPath(page, TAB_STABILITY_DIRS[0]);
+  await launchWorkspaceByPath(page, TAB_STABILITY_DIRS[1]);
+  await page.goto('/');
+  await expect(page.getByTestId('workspace-topbar')).toBeVisible();
+
+  const initialOrder = await readWorkspaceTabLabels(page);
+  const initialFirstIndex = initialOrder.indexOf(TAB_STABILITY_LABELS[0]);
+  const initialSecondIndex = initialOrder.indexOf(TAB_STABILITY_LABELS[1]);
+  expect(initialFirstIndex).toBeGreaterThanOrEqual(0);
+  expect(initialSecondIndex).toBeGreaterThan(initialFirstIndex);
+
+  await page.locator('.workspace-top-tab').filter({ hasText: TAB_STABILITY_LABELS[0] }).click();
+  await expect(page.locator('.workspace-top-tab.active .session-top-label')).toHaveText(TAB_STABILITY_LABELS[0]);
+  await expect.poll(() => readWorkspaceTabLabels(page)).toEqual(initialOrder);
+
+  await page.locator('.workspace-top-tab').filter({ hasText: TAB_STABILITY_LABELS[1] }).click();
+  await expect(page.locator('.workspace-top-tab.active .session-top-label')).toHaveText(TAB_STABILITY_LABELS[1]);
+  await expect.poll(() => readWorkspaceTabLabels(page)).toEqual(initialOrder);
+});