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

import { expect, type Page } from "@playwright/test";
import { buildHostWorkspaceRoute } from "@/utils/host-routes";
import { gotoHome } from "./app";
import { expectAppRoute } from "./route-assertions";

export async function openNewAgentComposer(page: Page): Promise<void> {
  await gotoHome(page);
}

/**
 * Wait for the sidebar to show at least one project row. Use this after a spec
 * seeds a workspace/project; zero-project flows need their own assertion.
 */
export async function waitForSidebarHydration(page: Page, timeout = 60_000): Promise<void> {
  await page
    .locator('[data-testid^="sidebar-project-row-"]')
    .first()
    .waitFor({ state: "visible", timeout });
}

export async function waitForNoProjectsInSidebar(page: Page, timeout = 60_000): Promise<void> {
  await page.getByTestId("sidebar-project-empty-state").waitFor({ state: "visible", timeout });
}

function workspaceRowLocator(page: Page, serverId: string, workspaceId: string) {
  return page.getByTestId(`sidebar-workspace-row-${serverId}:${workspaceId}`).first();
}

export async function expectSidebarWorkspaceSelected(input: {
  page: Page;
  serverId: string;
  workspaceId: string;
  selected?: boolean;
}): Promise<void> {
  const row = workspaceRowLocator(input.page, input.serverId, input.workspaceId);
  await expect(row).toBeVisible({ timeout: 30_000 });
  const expected = input.selected === false ? "false" : "true";

  const hasDataSelected = await row.getAttribute("data-selected");
  if (hasDataSelected !== null) {
    await expect(row).toHaveAttribute("data-selected", expected, {
      timeout: 30_000,
    });
    return;
  }

  await expect(row).toHaveAttribute("aria-selected", expected, {
    timeout: 30_000,
  });
}

export async function switchWorkspaceViaSidebar(input: {
  page: Page;
  serverId: string;
  workspaceId: string;
}): Promise<void> {
  const row = workspaceRowLocator(input.page, input.serverId, input.workspaceId);
  await expect(row).toBeVisible({ timeout: 30_000 });
  await row.click();

  const targetWorkspaceRoute = buildHostWorkspaceRoute(input.serverId, input.workspaceId);
  await expectAppRoute(input.page, targetWorkspaceRoute, { timeout: 30_000 });
}

/**
 * Wait for a workspace's sidebar row to appear, confirming the workspace
 * descriptor has been hydrated into the session store.
 */
export async function waitForWorkspaceInSidebar(
  page: Page,
  input: { serverId: string; workspaceId: string },
): Promise<void> {
  await workspaceRowLocator(page, input.serverId, input.workspaceId).waitFor({
    state: "visible",
    timeout: 60_000,
  });
}

export async function expectWorkspaceHeader(
  page: Page,
  input: { title: string; subtitle: string },
): Promise<void> {
  const titleLocator = page.getByTestId("workspace-header-title").filter({ visible: true });
  const subtitleLocator = page.getByTestId("workspace-header-subtitle").filter({ visible: true });

  await expect(titleLocator.first()).toHaveText(input.title, {
    timeout: 30_000,
  });
  await expect(subtitleLocator.first()).toHaveText(input.subtitle, {
    timeout: 30_000,
  });
}

export async function setTabVisibility(
  page: Page,
  visibility: DocumentVisibilityState,
): Promise<void> {
  await page.evaluate((state) => {
    Object.defineProperty(document, "visibilityState", { configurable: true, get: () => state });
    Object.defineProperty(document, "hidden", {
      configurable: true,
      get: () => state === "hidden",
    });
    document.dispatchEvent(new Event("visibilitychange"));
  }, visibility);
}

export async function expectReconnectingToastVisible(
  page: Page,
  options?: { timeout?: number },
): Promise<void> {
  const toast = page.getByRole("alert").filter({ hasText: "Reconnecting to host" });
  await expect(toast).toBeVisible({
    timeout: options?.timeout ?? 30_000,
  });
  await expect(toast).toHaveText("Reconnecting to host");
}

export async function expectReconnectingToastGone(
  page: Page,
  options?: { timeout?: number },
): Promise<void> {
  await expect(page.getByRole("alert").filter({ hasText: "Reconnecting to host" })).toHaveCount(0, {
    timeout: options?.timeout ?? 30_000,
  });
}

declare global {
  interface Window {
    __shownPanelToasts?: string[];
  }
}

export interface PanelToastLog {
  /** Test ids of every toast that entered the DOM since recording started, in order. */
  shown(): Promise<string[]>;
  expectNeverShown(testId: string): Promise<void>;
}

/**
 * Record every toast that enters the DOM from the next navigation onward. A toast can appear
 * and disappear within a few frames, so a settled `toHaveCount(0)` cannot prove one never showed.
 */
export async function recordPanelToasts(page: Page): Promise<PanelToastLog> {
  await page.addInitScript(() => {
    const shown: string[] = [];
    window.__shownPanelToasts = shown;
    const record = (node: Element) => {
      if (node.getAttribute("role") !== "alert") return;
      shown.push(node.getAttribute("data-testid") ?? "");
    };
    new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (const node of mutation.addedNodes) {
          if (!(node instanceof Element)) continue;
          record(node);
          for (const descendant of node.querySelectorAll('[role="alert"]')) record(descendant);
        }
      }
    }).observe(document, { childList: true, subtree: true });
  });

  const shown = () => page.evaluate(() => window.__shownPanelToasts ?? []);
  return {
    shown,
    async expectNeverShown(testId: string): Promise<void> {
      expect(await shown()).not.toContain(testId);
    },
  };
}

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 });
  await input.fill(marker);
  await input.press("Enter");
  await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 });
}