PaperClipAI/tests/e2e/planning-mode-visual-verification.spec.ts

import { expect, test } from "@playwright/test";
import { mockOnboardingLocalAiConnection } from "./helpers/onboarding-ai-connection";
import {
  expectLandsOnFirstTaskWithoutDashboardBounce,
  instrumentNavLog,
} from "./helpers/onboarding-landing";

/** The name the CEO role fills in — see AGENT_ROLE_LABELS. */
const AGENT_NAME = "CEO";
const TASK_TITLE = "Paperclip onboarding";

/**
 * The first task opens with the chief of staff's opening card sitting where
 * the composer is. Cancel hands the plain composer back (the card stays
 * pending), and the composer is where the mode chip lives.
 *
 * The card arrives with the interactions fetch, after the composer's first
 * paint, so a bare `count()` right after navigation sees no card and skips
 * the click; the card then lands on top of the composer and hides the mode
 * chip. Wait for the card (or, if it is already dismissed, the pending
 * strip it leaves behind) before deciding, and only return once the plain
 * composer is back.
 */
async function dismissOpeningCard(page: import("@playwright/test").Page) {
  const takeover = page.getByTestId("task-chat-composer-takeover");
  const pendingStrip = page.getByTestId("task-chat-pending-input-indicator");
  await expect(takeover.or(pendingStrip).first()).toBeVisible({ timeout: 30_000 });
  const cancel = takeover.getByRole("button", { name: "Cancel", exact: true });
  if (await cancel.count()) await cancel.first().click();
  await expect(page.getByTestId("task-chat-composer-mode")).toBeVisible({ timeout: 30_000 });
}

test("captures planning mode UI for desktop and mobile", async ({ page }) => {
  const timestamp = Date.now();
  const companyName = `PAP-3413-${timestamp}`;
  const screenshotDir = "test-results/planning-mode";

  await instrumentNavLog(page);
  await mockOnboardingLocalAiConnection(page);

  await page.route("**/test-environment", (route) =>
    route.fulfill({
      contentType: "application/json",
      body: JSON.stringify({ status: "pass", checks: [] }),
    }),
  );

  await page.route("**/agent-hires", async (route) => {
    const req = route.request();
    const body = JSON.parse(req.postData() || "{}");
    const auth = req.headers().authorization;
    const real = await fetch(new URL(req.url()).toString(), {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        ...(auth ? { Authorization: auth } : {}),
      },
      body: JSON.stringify({
        name: body.name,
        role: body.role,
        adapterType: "http",
        adapterConfig: { url: "http://127.0.0.1:1/dead" },
        runtimeConfig: { heartbeat: { enabled: false } },
      }),
    });
    await route.fulfill({
      status: real.status,
      contentType: "application/json",
      body: await real.text(),
    });
  });

  await page.goto("/onboarding");
  const startBtn = page.getByRole("button", { name: /Start Onboarding|New Organization|Add Agent/ });
  if (await startBtn.count()) await startBtn.first().click();

  const createCard = page.getByRole("button", { name: /Build a new organization/ });
  if (await createCard.count()) await createCard.first().click();

  await expect(page.getByRole("heading", { name: "What is the name of your organization?" })).toBeVisible({ timeout: 15_000 });

  await page.locator('input[placeholder="e.g. Northwind Labs"]').fill(companyName);
  await page.getByRole("button", { name: /^Continue/ }).click();

  // Naming the company creates it and goes straight to the agent step.

  // The agent step asks for a name and nothing else; the name is what gates
  // "Next", and the hire is filed under the neutral `general` role.
  await page.waitForSelector("#onboarding-agent-name", { timeout: 30_000 });
  await page.locator("#onboarding-agent-name").fill(AGENT_NAME);

  await page.getByRole("button", { name: /^Next$/ }).click();

  // The connect step arrives with no source selected — the tile row is a
  // question, not a confirmation — so its CTA stays disabled until one is
  // pressed. It reads "Connect", not "Next": the button starts the sign-in
  // where there is one to start. The test simulates successful local account
  // connection, then exercises the real first-task creation flow.
  //
  // Waited on for enabled rather than visible: it is already on screen, and
  // clicking a disabled button raises nothing and does nothing.
  const source = page.getByRole("radio").first();
  await source.waitFor({ timeout: 30_000 });
  await source.click();
  const connectNext = page.getByRole("button", { name: /^Connect$/ });
  await expect(connectNext).toBeEnabled({ timeout: 30_000 });
  await connectNext.click();

  // The review step names the agent rather than the step.
  await expect(
    page.getByRole("heading", { name: "Let's get started..." }),
  ).toBeVisible({ timeout: 30_000 });
  await page.getByRole("button", { name: /Get started/ }).click();
  // The wizard now drops the user straight onto the first task's detail page,
  // and must not bounce through the dashboard (PAP-404).
  await expectLandsOnFirstTaskWithoutDashboardBounce(page);

  const baseOrigin = new URL(page.url()).origin;
  const companyRes = await page.request.get(`${baseOrigin}/api/companies`);
  expect(companyRes.ok()).toBe(true);
  const companies = await companyRes.json();
  const company = companies.find((c: { name: string }) => c.name === companyName);
  expect(company).toBeTruthy();
  const issueRes = await page.request.get(`${baseOrigin}/api/companies/${company.id}/issues`);
  expect(issueRes.ok()).toBe(true);
  const issues = await issueRes.json();
  const planningSeedIssue = issues.find(
    (candidate: { id: string; identifier?: string; title: string }) =>
      candidate.title === TASK_TITLE,
  );
  expect(planningSeedIssue).toBeTruthy();

  const issue = planningSeedIssue;
  const issueIdentifier = issue.identifier ?? issue.id;
  const issuePath = `/${company.issuePrefix ?? company.id}/issues/${issueIdentifier}`;
  const companyPrefix = company.issuePrefix ?? company.id;
  const issueLinkSelector = `a[href$="/issues/${issueIdentifier}"]`;

  const setMode = async (mode: "standard" | "planning") => {
    const patchRes = await page.request.patch(`${baseOrigin}/api/issues/${issue.id}`, {
      data: { workMode: mode },
    });
    expect(patchRes.ok()).toBe(true);
    await expect
      .poll(async () => {
        const currentRes = await page.request.get(`${baseOrigin}/api/issues/${issue.id}`);
        expect(currentRes.ok()).toBe(true);
        const current = await currentRes.json();
        return current.workMode;
      }, { timeout: 10_000 })
      .toBe(mode);
  };

  await setMode("planning");

  await page.goto(issuePath);
  await dismissOpeningCard(page);
  await expect(page.getByText("Plan mode").first()).toBeVisible();
  const desktopPlanningToggle = page.getByTestId("task-chat-composer-mode");
  await expect(desktopPlanningToggle).toBeVisible();
  await expect(desktopPlanningToggle).toHaveAttribute("data-pending-work-mode", "planning");

  await page.screenshot({
    path: `${screenshotDir}/desktop-planning-detail-${timestamp}.png`,
    fullPage: true,
  });

  await page.goto(`/${companyPrefix}/issues`);
  await expect(page.locator(issueLinkSelector)).toBeVisible();
  await expect(page.locator(issueLinkSelector)).not.toContainText("Plan mode");
  await page.screenshot({
    path: `${screenshotDir}/desktop-planning-row-${timestamp}.png`,
    fullPage: true,
  });

  await page.goto(issuePath);
  await dismissOpeningCard(page);
  await page.getByTestId("task-chat-composer-mode").click();
  await expect(page.getByTestId("task-chat-composer-mode")).toHaveCount(0);
  await expect(page.getByTestId("task-chat-composer-add")).toBeVisible();
  await page.screenshot({
    path: `${screenshotDir}/desktop-standard-toggle-${timestamp}.png`,
    fullPage: true,
  });

  await setMode("planning");
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto(issuePath);
  await dismissOpeningCard(page);
  await expect(page.getByText("Plan mode").first()).toBeVisible();
  const mobilePlanningToggle = page.getByTestId("task-chat-composer-mode");
  await expect(mobilePlanningToggle).toBeVisible();
  await expect(mobilePlanningToggle).toHaveAttribute("data-pending-work-mode", "planning");
  await page.screenshot({
    path: `${screenshotDir}/mobile-planning-detail-${timestamp}.png`,
    fullPage: true,
  });

  await page.goto(`/${companyPrefix}/issues`);
  await expect(page.locator(issueLinkSelector)).toBeVisible();
  await expect(page.locator(issueLinkSelector)).not.toContainText("Plan mode");
  await page.screenshot({
    path: `${screenshotDir}/mobile-planning-row-${timestamp}.png`,
    fullPage: true,
  });
});