Files
clawmates/frontend/tests/e2e/p2-approval.spec.ts
T
Omar SobhandClaude Fable 5 7393b6538b Chat welcome + active conversation: composer controls, layout, header
Measured welcome-screen + active-conversation feedback:

Composer redesigned with two variants (no Send button — Enter to send,
Shift+Enter for newline; attach + screenshot icon affordances on the
left). 'welcome' = short single-row 672px-capped pill, icons inline;
'active' = taller two-row card (textarea on top, 36px icon-button row
below), placeholder switches to 'Type your message…'. A cream Stop pill
appears while the agent is generating, wired to a real useChat.stop()
that aborts the SSE and finalizes the partial reply (new 'stopped'
reducer action).

Empty state un-pinned: the composer is now part of the centered welcome
stack (avatar → heading → subtitle → composer → chips) instead of being
pinned to the viewport bottom. Subtitle dropped to 12px. Hero avatar
kept at 126px but with a proportional 40px squircle radius (a flat 17px
read as square at that size).

Chat header sized up to match: 58px avatar (new Avatar 'header' size),
name 18px/600 neutral-200, role 14px. The neutral-500 role/subtitle tone
nudged to #7d7d7d to clear AA contrast on #0a0a0a.

84 unit + 31 functional E2E green; verified both states live.

Co-Authored-By: Claude Fable 5 <[email protected]>
2026-06-11 04:27:27 -05:00

108 lines
4.3 KiB
TypeScript

import { expect, test, type Page } from "@playwright/test";
// P2 BLOCKING exit criterion (spec §15/§17): a sensitive call is
// intercepted → previewed → queued → blocks → executes ONLY on approval →
// is audited. Runs against the real backend with the scripted provider.
const OWNER_EMAIL = "[email protected]";
const OWNER_PASSWORD = "e2e-password";
const GATED_PROMPT = "email the CEO [[scenario:gated-email]]";
async function signIn(page: Page) {
await page.goto("/login");
await page.getByLabel("Email").fill(OWNER_EMAIL);
await page.getByLabel("Password").fill(OWNER_PASSWORD);
await page.getByRole("button", { name: "Sign in" }).click();
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
}
async function openFreshScoutSession(page: Page) {
await page.getByRole("link", { name: /Scout/ }).click();
await expect(page).toHaveURL(/\/claws\/.+\/chat\//);
// Wait for the navigation to the NEW session: the previous (possibly
// empty) session shows the same welcome heading, so the URL is the only
// reliable signal that the fresh session is mounted.
const before = page.url();
await page.getByRole("button", { name: "New" }).click();
await page.waitForURL((url) => url.toString() !== before);
await expect(
page.getByRole("heading", { name: /Hi, I'm Scout/ }),
).toBeVisible();
}
async function triggerGatedEmail(page: Page) {
const box = page.getByLabel("Message Scout");
await box.fill(GATED_PROMPT);
await box.press("Enter");
// Intercepted + previewed: the approval card shows the EXACT payload.
const card = page.getByRole("region", { name: "Review and approve" });
await expect(card).toBeVisible();
await expect(card.getByText(/wants to:/)).toContainText(
"Send email to [email protected]",
);
await expect(card).toContainText("Revenue is up 14% quarter over quarter.");
return card;
}
test("gated email blocks, previews, and executes only after approval", async ({
page,
}) => {
await signIn(page);
await openFreshScoutSession(page);
const card = await triggerGatedEmail(page);
await card.getByRole("button", { name: "Approve" }).click();
// The continuation streams the approved execution.
await expect(page.getByText(/The email step is finished/)).toBeVisible();
const trace = page.getByRole("button", { name: /1 step/ });
await trace.click();
await expect(page.getByText(/✓ email\.send/)).toBeVisible();
await expect(page.getByText(/"queued": ?true/)).toBeVisible();
// The transcript and trace replay identically after reload (journal).
await page.reload();
await expect(page.getByText(/The email step is finished/)).toBeVisible();
await page.getByRole("button", { name: /1 step/ }).click();
await expect(page.getByText(/✓ email\.send/)).toBeVisible();
});
test("rejection executes nothing and the agent continues in-band", async ({
page,
}) => {
await signIn(page);
await openFreshScoutSession(page);
const card = await triggerGatedEmail(page);
await card.getByRole("button", { name: "Reject" }).click();
// The run completes; the step trace records the refusal, not an execution.
await expect(page.getByText(/The email step is finished/)).toBeVisible();
await page.getByRole("button", { name: /1 step/ }).click();
await expect(page.getByText(/✗ email\.send/)).toBeVisible();
await expect(page.getByText(/rejected/)).toBeVisible();
});
test("the approvals queue lists pending actions and decides them", async ({
page,
}) => {
await signIn(page);
await openFreshScoutSession(page);
await triggerGatedEmail(page);
// Queued: the global approvals page shows the same exact preview.
// Earlier sessions may have left pending approvals; decide them all.
await page.getByRole("link", { name: "Approvals" }).click();
await expect(page.getByText(/awaits? your review/)).toBeVisible();
const cards = page.getByRole("region", { name: "Review and approve" });
await expect(cards.first()).toContainText("Send email to [email protected]");
const total = await cards.count();
for (let remaining = total; remaining > 0; remaining--) {
await cards.first().getByRole("button", { name: "Approve" }).click();
// Wait for the refresh to apply before touching the next card.
await expect(cards).toHaveCount(remaining - 1);
}
await expect(page.getByText(/All clear/)).toBeVisible();
});