evOo-local/apps/web/e2e/adaptive-workspace.spec.ts

import { expect, test } from "@playwright/test";
import { activeBotId, captureScreenshot, completeOnboarding, rpc, signup } from "./helpers";

const SCREEN_URL = "https://screen.example/embed.html";

test("the bot's screen opens beside the chat while it works and steps back after", async ({
  page,
}, testInfo) => {
  await signup(page, `workspace-screen-${Date.now()}@rakazo.test`, "password12", "Screen Pane");
  await completeOnboarding(page);
  const botId = activeBotId(page);
  await rpc(page, "computer/boot", { botId });
  await page.route("https://screen.example/**", (route) =>
    route.fulfill({
      contentType: "text/html",
      body: `<!doctype html><title>Desktop</title><body style="margin:0;background:#1d1d20;display:grid;place-items:center;height:100vh">
        <input style="width:40%;padding:8px;font:16px system-ui" placeholder="Search">`,
    }),
  );
  await page.route("**/rpc/computer/screenUrl", (route) =>
    route.fulfill({
      contentType: "application/json",
      body: JSON.stringify({ json: { url: SCREEN_URL } }),
    }),
  );

  const sidePanel = page.getByTestId("side-panel");
  await expect(sidePanel).toHaveAttribute("data-panel", "closed");

  await rpc(page, "threads/send", { botId, text: "use your screen and type workspace-demo" });

  await expect(sidePanel).toHaveAttribute("data-panel", "computer");
  await expect(sidePanel).toHaveAttribute("data-auto", "");
  await expect(page.getByTestId("computer-preview").locator("iframe")).toHaveAttribute(
    "src",
    SCREEN_URL,
  );
  // The live screen gets more room than a settings panel. The panel widens
  // over a CSS transition, so measure once it has settled.
  await expect.poll(async () => (await sidePanel.boundingBox())?.width ?? 0).toBeGreaterThan(400);
  await captureScreenshot(page, testInfo, "workspace-screen-beside-chat");

  // Once the work is done the conversation gets its full width back.
  await expect(sidePanel).toHaveAttribute("data-panel", "closed", { timeout: 20_000 });
});

test("a report the bot presents opens beside the conversation", async ({ page }, testInfo) => {
  await signup(page, `workspace-report-${Date.now()}@rakazo.test`, "password12", "Report Pane");
  await completeOnboarding(page);

  const composer = page.getByPlaceholder(/Message/);
  await composer.fill("present the report");
  await page.keyboard.press("Enter");

  const pane = page.getByTestId("artifact-pane");
  await expect(pane).toBeVisible({ timeout: 30_000 });
  await expect(pane.getByRole("heading", { name: "report.md" })).toBeVisible();
  await expect(pane.getByRole("heading", { name: "Report", exact: true })).toBeVisible();
  await expect(pane.getByRole("cell", { name: "Research" })).toBeVisible();
  await expect(composer).toBeVisible();
  await captureScreenshot(page, testInfo, "workspace-report-beside-chat");

  const downloadPromise = page.waitForEvent("download");
  await pane.getByRole("button", { name: "Download report.md" }).click();
  expect((await downloadPromise).suggestedFilename()).toBe("report.md");

  await pane.getByRole("button", { name: "Close panel" }).click();
  await expect(pane).toHaveCount(0);

  // The file card in the chat opens the same pane again.
  await page.getByRole("button", { name: "Preview report.md" }).click();
  await expect(pane.getByRole("heading", { name: "Report", exact: true })).toBeVisible();
});

test("a question that scrolled away is one click back", async ({ page }, testInfo) => {
  await page.setViewportSize({ width: 1280, height: 520 });
  await signup(page, `workspace-ask-${Date.now()}@rakazo.test`, "password12", "Ask Jump");
  await completeOnboarding(page);

  const composer = page.getByPlaceholder(/Message/);
  // Earlier work gives the thread enough history to scroll back through.
  for (const task of ["sort the inbox", "draft the agenda", "book the room"]) {
    await composer.fill(task);
    await page.keyboard.press("Enter");
    await expect(page.getByText(`done. i handled: ${task}`, { exact: true })).toBeVisible({
      timeout: 30_000,
    });
  }
  await composer.fill("ask me which city to use");
  await page.keyboard.press("Enter");
  const sendIt = page.getByRole("button", { name: "Send it" });
  await expect(sendIt).toBeVisible({ timeout: 30_000 });

  const jump = page.getByTestId("needs-you-jump");
  await expect(jump).toHaveCount(0);
  await page.getByTestId("transcript").hover();
  await page.mouse.wheel(0, -20_000);
  await expect(jump).toBeVisible();
  await captureScreenshot(page, testInfo, "workspace-needs-you-jump");

  await jump.click();
  await expect(sendIt).toBeInViewport();
  await expect(sendIt).toBeFocused();
  await expect(jump).toHaveCount(0);
});