refactor: unify workspace tab management and add runtime metrics

packages/app/e2e/helpers/app.ts

@@ -158,7 +158,12 @@ export const gotoHome = async (page: Page) => {
   await page.goto('/');
   await ensureE2EStorageSeeded(page);
   await expect(page.getByText('New agent', { exact: true }).first()).toBeVisible();
-  await expect(page.getByRole('textbox', { name: 'Message agent...' })).toBeVisible();
+  const composer = page.getByRole('textbox', { name: 'Message agent...' });
+  if (!(await composer.first().isVisible().catch(() => false))) {
+    const newAgentButton = page.getByText('New agent', { exact: true }).first();
+    await newAgentButton.click();
+  }
+  await expect(composer.first()).toBeVisible({ timeout: 30000 });
 };
 
 export const openSettings = async (page: Page) => {
@@ -585,6 +590,16 @@ export const createAgentWithConfig = async (page: Page, config: AgentConfig) =>
   await createAgent(page, config.prompt);
 };
 
+export const createAgentInRepo = async (
+  page: Page,
+  config: Pick<AgentConfig, 'directory' | 'prompt'>
+) => {
+  await gotoHome(page);
+  await ensureHostSelected(page);
+  await setWorkingDirectory(page, config.directory);
+  await createAgent(page, config.prompt);
+};
+
 export const waitForPermissionPrompt = async (page: Page, timeout = 30000) => {
   const promptText = page.getByTestId('permission-request-question').first();
   await expect(promptText).toBeVisible({ timeout });

packages/app/e2e/helpers/workspace-tabs.ts

@@ -0,0 +1,52 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function getWorkspaceTabTestIds(page: Page): Promise<string[]> {
+  const tabs = page.locator('[data-testid^="workspace-tab-"]');
+  const count = await tabs.count();
+  const ids: string[] = [];
+  for (let index = 0; index < count; index += 1) {
+    const testId = await tabs.nth(index).getAttribute("data-testid");
+    if (testId && !ids.includes(testId)) {
+      ids.push(testId);
+    }
+  }
+  return ids;
+}
+
+export async function waitForWorkspaceTabsVisible(page: Page): Promise<void> {
+  await expect(page.getByTestId("workspace-tabs-row").first()).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(page.getByTestId("workspace-new-agent-tab").first()).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+export async function ensureWorkspaceAgentPaneVisible(page: Page): Promise<void> {
+  const toggle = page.getByTestId("workspace-explorer-toggle").first();
+  if (!(await toggle.isVisible().catch(() => false))) {
+    return;
+  }
+  const isExpanded = (await toggle.getAttribute("aria-expanded")) === "true";
+  if (isExpanded) {
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-expanded", "false", {
+      timeout: 10_000,
+    });
+  }
+}
+
+export async function sampleWorkspaceTabIds(
+  page: Page,
+  options: { durationMs?: number; intervalMs?: number } = {}
+): Promise<string[][]> {
+  const durationMs = options.durationMs ?? 2_500;
+  const intervalMs = options.intervalMs ?? 50;
+  const snapshots: string[][] = [];
+  const start = Date.now();
+  while (Date.now() - start <= durationMs) {
+    snapshots.push(await getWorkspaceTabTestIds(page));
+    await page.waitForTimeout(intervalMs);
+  }
+  return snapshots;
+}

packages/app/e2e/helpers/workspace-ui.ts

@@ -1,24 +1,74 @@
-import { expect, type Page } from "@playwright/test";
+import { expect, type Page } from '@playwright/test';
+import { buildHostWorkspaceRoute } from '@/utils/host-routes';
+import { gotoHome } from './app';
 
 export async function openNewAgentComposer(page: Page): Promise<void> {
-  await page.goto("/");
+  await gotoHome(page);
+}
 
-  const sidebarNewAgent = page.getByTestId("sidebar-new-agent").first();
-  if (await sidebarNewAgent.isVisible().catch(() => false)) {
-    await sidebarNewAgent.click();
-  } else {
-    await page.getByText("New agent", { exact: true }).first().click();
+export function workspaceLabelFromPath(value: string): string {
+  const normalized = value.replace(/\\/g, '/').replace(/\/+$/, '');
+  const parts = normalized.split('/').filter(Boolean);
+  return parts[parts.length - 1] ?? normalized;
+}
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function candidateWorkspaceIds(inputPath: string): string[] {
+  const trimmed = inputPath.replace(/\/+$/, '');
+  const candidates = new Set<string>([trimmed]);
+  if (trimmed.startsWith('/var/')) {
+    candidates.add(`/private${trimmed}`);
   }
+  if (trimmed.startsWith('/private/var/')) {
+    candidates.add(trimmed.replace(/^\/private/, ''));
+  }
+  return Array.from(candidates);
+}
 
-  await expect(page.getByRole("textbox", { name: "Message agent..." })).toBeVisible({
+function workspaceRowLocator(page: Page, serverId: string, workspacePath: string) {
+  const ids = candidateWorkspaceIds(workspacePath).map(
+    (id) => `[data-testid="sidebar-workspace-row-${serverId}:${id}"]`
+  );
+  return page.locator(ids.join(',')).first();
+}
+
+export async function switchWorkspaceViaSidebar(input: {
+  page: Page;
+  serverId: string;
+  targetWorkspacePath: string;
+}): Promise<void> {
+  const row = workspaceRowLocator(input.page, input.serverId, input.targetWorkspacePath);
+  await expect(row).toBeVisible({ timeout: 30_000 });
+  await row.click();
+
+  const targetWorkspaceRoute = buildHostWorkspaceRoute(input.serverId, input.targetWorkspacePath);
+  await expect(input.page).toHaveURL(new RegExp(escapeRegex(targetWorkspaceRoute)), {
+    timeout: 30_000,
+  });
+}
+
+export async function expectWorkspaceHeader(
+  page: Page,
+  input: { title: string; subtitle: string }
+): Promise<void> {
+  const titleLocator = page.getByTestId('workspace-header-title');
+  const subtitleLocator = page.getByTestId('workspace-header-subtitle');
+
+  await expect(titleLocator.first()).toHaveText(input.title, {
+    timeout: 30_000,
+  });
+  await expect(subtitleLocator.first()).toHaveText(input.subtitle, {
     timeout: 30_000,
   });
 }
 
 export async function seedWorkspaceActivity(page: Page, marker: string): Promise<void> {
-  const input = page.getByRole("textbox", { name: "Message agent..." });
+  const input = page.getByRole('textbox', { name: 'Message agent...' });
   await expect(input).toBeEditable({ timeout: 30_000 });
   await input.fill(marker);
-  await input.press("Enter");
+  await input.press('Enter');
   await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 });
 }