refactor(app/e2e): eliminate raw locators from all offending spec bodies (cluster #13) (#727)

Rewrites 7 spec files to use DSL helpers throughout — zero raw
page.locator/getByText/getByTestId in test() bodies. Adds 30+ new
helper primitives across 7 existing helper modules.

packages/app/e2e/helpers/composer.ts

@@ -4,6 +4,17 @@ function composerInput(page: Page) {
   return page.getByRole("textbox", { name: "Message agent..." }).first();
 }
 
+export function composerLocator(page: Page) {
+  return composerInput(page);
+}
+
+export async function expectComposerVisible(
+  page: Page,
+  options?: { timeout?: number },
+): Promise<void> {
+  await expect(composerInput(page)).toBeVisible({ timeout: options?.timeout ?? 15_000 });
+}
+
 export async function submitMessage(page: Page, text: string): Promise<void> {
   const input = composerInput(page);
   await expect(input).toBeEditable({ timeout: 30_000 });

packages/app/e2e/helpers/launcher.ts

@@ -174,6 +174,19 @@ export async function sampleTabsDuringTransition(
   return snapshots;
 }
 
+export function terminalSurfaceLocator(page: Page) {
+  return page.locator('[data-testid="terminal-surface"]').first();
+}
+
+export async function expectAgentTabActive(page: Page, agentId: string): Promise<void> {
+  const tabTestId = `workspace-tab-agent_${agentId}`;
+  await expect(page.getByTestId(tabTestId).filter({ visible: true })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+  await expect(getActiveTabTestId(page)).resolves.toBe(tabTestId);
+}
+
 // ─── Workspace setup ───────────────────────────────────────────────────────
 
 /** Create a temp git repo and return its path with a cleanup function. */

packages/app/e2e/helpers/settings.ts

@@ -165,3 +165,74 @@ export async function expectAboutContent(page: Page): Promise<void> {
 export async function expectGeneralContent(page: Page): Promise<void> {
   await expect(page.getByText("Theme", { exact: true }).first()).toBeVisible();
 }
+
+export async function expectHostLabelDisplayed(page: Page): Promise<void> {
+  await expect(page.getByTestId("host-page-label-edit-button")).toBeVisible();
+  await expect(page.getByTestId("host-page-label-input")).toHaveCount(0);
+}
+
+export async function clickEditHostLabel(page: Page): Promise<void> {
+  await page.getByTestId("host-page-label-edit-button").click();
+}
+
+export async function expectHostLabelEditMode(page: Page, expectedLabel: string): Promise<void> {
+  await expect(page.getByTestId("host-page-label-input")).toBeVisible();
+  await expect(page.getByTestId("host-page-label-input")).toHaveValue(expectedLabel);
+  await expect(page.getByTestId("host-page-label-save")).toBeVisible();
+}
+
+export async function expectHostConnectionsCard(page: Page, port: string): Promise<void> {
+  const card = page.getByTestId("host-page-connections-card");
+  await expect(card).toBeVisible();
+  await expect(page.getByText("Connections", { exact: true })).toBeVisible();
+  await expect(
+    card.getByText(new RegExp(`TCP \\((localhost|127\\.0\\.0\\.1):${port}\\)`)),
+  ).toBeVisible();
+}
+
+export async function expectHostInjectMcpCard(page: Page): Promise<void> {
+  const card = page.getByTestId("host-page-inject-mcp-card");
+  await expect(card).toBeVisible();
+  await expect(card.getByRole("switch", { name: "Inject Paseo tools" })).toBeVisible();
+}
+
+export async function expectHostActionCards(page: Page): Promise<void> {
+  await expect(page.getByTestId("host-page-restart-card")).toBeVisible();
+  await expect(page.getByTestId("host-page-restart-button")).toBeVisible();
+  await expect(page.getByTestId("host-page-providers-card")).toBeVisible();
+  await expect(page.getByTestId("host-page-remove-host-card")).toBeVisible();
+  await expect(page.getByTestId("host-page-remove-host-button")).toBeVisible();
+}
+
+export async function expectHostNoLocalOnlyRows(page: Page): Promise<void> {
+  await expect(page.getByTestId("host-page-pair-device-row")).toHaveCount(0);
+  await expect(page.getByTestId("host-page-daemon-lifecycle-card")).toHaveCount(0);
+}
+
+export async function expectRetiredSidebarSectionsAbsent(page: Page): Promise<void> {
+  const sidebar = page.getByTestId("settings-sidebar");
+  await expect(sidebar).toBeVisible();
+  await expect(sidebar.getByRole("button", { name: "Hosts", exact: true })).toHaveCount(0);
+  await expect(sidebar.getByRole("button", { name: "Providers", exact: true })).toHaveCount(0);
+  await expect(sidebar.getByRole("button", { name: "Pair device", exact: true })).toHaveCount(0);
+  await expect(sidebar.getByRole("button", { name: "Daemon", exact: true })).toHaveCount(0);
+  await expect(sidebar.getByRole("button", { name: "General", exact: true })).toBeVisible();
+  await expect(sidebar.getByRole("button", { name: "Diagnostics", exact: true })).toBeVisible();
+  await expect(sidebar.getByRole("button", { name: "About", exact: true })).toBeVisible();
+}
+
+export async function expectHostPageVisible(page: Page, serverId: string): Promise<void> {
+  await expect(page.getByTestId(`settings-host-page-${serverId}`)).toBeVisible();
+}
+
+export async function expectLocalHostEntryFirst(page: Page, serverId: string): Promise<void> {
+  const sidebar = page.getByTestId("settings-sidebar");
+  await expect(sidebar).toBeVisible({ timeout: 15_000 });
+  await expect(sidebar.locator('[data-testid^="settings-host-entry-"]').first()).toHaveAttribute(
+    "data-testid",
+    `settings-host-entry-${serverId}`,
+  );
+  const localHostEntry = page.getByTestId(`settings-host-entry-${serverId}`);
+  await expect(localHostEntry.getByTestId("settings-host-local-marker")).toBeVisible();
+  await expect(localHostEntry.getByText("Local", { exact: true })).toBeVisible();
+}

packages/app/e2e/helpers/terminal-perf.ts

@@ -1,4 +1,4 @@
-import type { Page } from "@playwright/test";
+import { expect, type Page } from "@playwright/test";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { randomUUID } from "node:crypto";
@@ -263,6 +263,34 @@ export async function measureKeystrokeLatency(page: Page, char: string): Promise
   );
 }
 
+export async function expectTerminalSurfaceVisible(
+  page: Page,
+  options?: { timeout?: number },
+): Promise<void> {
+  await expect(page.locator('[data-testid="terminal-surface"]').first()).toBeVisible({
+    timeout: options?.timeout ?? 20_000,
+  });
+}
+
+export async function focusTerminalSurface(page: Page): Promise<void> {
+  await expectTerminalSurfaceVisible(page);
+  await page.locator('[data-testid="terminal-surface"]').first().click();
+}
+
+export async function typeInTerminal(page: Page, text: string): Promise<void> {
+  await page
+    .locator('[data-testid="terminal-surface"]')
+    .first()
+    .pressSequentially(text, { delay: 0 });
+}
+
+export async function waitForTerminalAttached(page: Page): Promise<void> {
+  await page
+    .locator('[data-testid="terminal-attach-loading"]')
+    .waitFor({ state: "hidden", timeout: 10_000 })
+    .catch(() => undefined);
+}
+
 export function computePercentile(samples: number[], p: number): number {
   const sorted = [...samples].sort((a, b) => a - b);
   const index = Math.ceil((p / 100) * sorted.length) - 1;

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

@@ -6,6 +6,7 @@ import { expect, type Page } from "@playwright/test";
 import { parseHostWorkspaceRouteFromPathname } from "../../src/utils/host-routes";
 import { gotoAppShell } from "./app";
 import { createNodeWebSocketFactory, type NodeWebSocketFactory } from "./node-ws-factory";
+import { switchWorkspaceViaSidebar } from "./workspace-ui";
 import type { SessionOutboundMessage } from "@server/shared/messages";
 
 interface WorkspaceSetupDaemonClient {
@@ -315,6 +316,30 @@ export async function fetchWorkspaceById(
   return workspace;
 }
 
+export async function navigateToWorkspaceViaSidebar(
+  page: Page,
+  workspaceId: string,
+): Promise<void> {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: workspaceId });
+}
+
+export async function openWorkspaceScriptsMenu(page: Page): Promise<void> {
+  await page.getByTestId("workspace-scripts-button").click();
+  await expect(page.getByTestId("workspace-scripts-menu")).toBeVisible({ timeout: 10_000 });
+}
+
+export async function startWorkspaceScriptFromMenu(page: Page, scriptName: string): Promise<void> {
+  await page.getByTestId(`workspace-scripts-start-${scriptName}`).click();
+}
+
+export async function closeWorkspaceScriptsMenu(page: Page): Promise<void> {
+  await page.getByTestId("workspace-scripts-menu-backdrop").click();
+}
+
 export async function waitForWorkspaceSetupProgress(
   client: WorkspaceSetupDaemonClient,
   predicate: (payload: WorkspaceSetupProgressPayload) => boolean,

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

@@ -70,6 +70,29 @@ export async function ensureWorkspaceAgentPaneVisible(page: Page): Promise<void>
   }
 }
 
+export async function expectWorkspaceTabsAbsent(page: Page): Promise<void> {
+  await expect(page.getByTestId("workspace-tabs-row")).toHaveCount(0);
+}
+
+export async function expectNoTerminalTabs(page: Page): Promise<void> {
+  await expect(page.locator('[data-testid^="workspace-tab-terminal_"]')).toHaveCount(0);
+}
+
+export async function clickFirstTerminalTab(
+  page: Page,
+  options?: { timeout?: number },
+): Promise<void> {
+  const tab = page.locator('[data-testid^="workspace-tab-terminal_"]').first();
+  await expect(tab).toBeVisible({ timeout: options?.timeout ?? 30_000 });
+  await tab.click();
+}
+
+export async function expectFirstTerminalTabContains(page: Page, text: string): Promise<void> {
+  await expect(page.locator('[data-testid^="workspace-tab-terminal_"]').first()).toContainText(
+    text,
+  );
+}
+
 export async function sampleWorkspaceTabIds(
   page: Page,
   options: { durationMs?: number; intervalMs?: number } = {},

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

@@ -114,6 +114,49 @@ export async function expectWorkspaceHeader(
   });
 }
 
+export async function expectReconnectingToastVisible(
+  page: Page,
+  options?: { timeout?: number },
+): Promise<void> {
+  await expect(page.getByTestId("agent-reconnecting-toast")).toBeVisible({
+    timeout: options?.timeout ?? 30_000,
+  });
+}
+
+export async function expectReconnectingToastGone(
+  page: Page,
+  options?: { timeout?: number },
+): Promise<void> {
+  await expect(page.getByTestId("agent-reconnecting-toast")).toHaveCount(0, {
+    timeout: options?.timeout ?? 30_000,
+  });
+}
+
+export async function expectHostConnectingOrOffline(
+  page: Page,
+  options?: { timeout?: number },
+): Promise<void> {
+  await expect(
+    page.getByText(/^Connecting$|localhost is offline|Cannot reach localhost/i),
+  ).toBeVisible({ timeout: options?.timeout ?? 30_000 });
+}
+
+export async function expectMenuButtonVisible(page: Page): Promise<void> {
+  await expect(page.getByTestId("menu-button")).toBeVisible();
+}
+
+export async function expectWorkspaceHeaderAbsent(page: Page): Promise<void> {
+  await expect(page.getByTestId("workspace-header-title")).toHaveCount(0);
+}
+
+export function workspaceDeckEntryLocator(page: Page, serverId: string, workspaceId: string) {
+  return page.getByTestId(`workspace-deck-entry-${serverId}:${workspaceId}`);
+}
+
+export async function expectWorkspaceDeckEntryCount(page: Page, count: number): Promise<void> {
+  await expect(page.locator('[data-testid^="workspace-deck-entry-"]')).toHaveCount(count);
+}
+
 export async function seedWorkspaceActivity(page: Page, marker: string): Promise<void> {
   const input = page.getByRole("textbox", { name: "Message agent..." });
   await expect(input).toBeEditable({ timeout: 30_000 });