clawmates/frontend/tests/e2e/p4-slack.spec.ts

import { createHmac } from "node:crypto";

import { expect, test, type Page } from "@playwright/test";

// P4 exit criterion (spec §17): connect an app, and Slack outbound is
// provably blocked without approval — then executed BY the secret broker
// exactly once after approval (asserted against the e2e Slack sink).

const OWNER_EMAIL = "[email protected]";
const OWNER_PASSWORD = "e2e-password";

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();
}

test("connect Slack, then an outbound post is gated and broker-executed", async ({
  page,
  request,
}) => {
  await signIn(page);
  await page.getByRole("link", { name: /Scout/ }).click();
  await expect(page).toHaveURL(/\/claws\/.+\/chat\//);

  // Connect Slack through the panel: the token goes to the broker.
  await page.getByRole("button", { name: "Computer" }).click();
  const panel = page.getByRole("complementary", { name: "Computer" });
  await panel.getByRole("button", { name: "Slack" }).click();
  await panel.getByRole("button", { name: "Connect Slack" }).first().click();
  await panel.getByLabel(/Bot token/).fill("xoxb-e2e-token");
  await panel.getByLabel(/Signing secret/).fill("e2e-signing-secret");
  await panel.getByRole("button", { name: "Connect Slack" }).click();
  await expect(panel.getByText("Slack is connected")).toBeVisible();
  await page.getByRole("button", { name: "Close computer" }).click();

  // Ask for a post: blocked behind the approval card.
  const box = page.getByLabel("Message Scout");
  await box.fill("share the numbers [[scenario:slack-post]]");
  await box.press("Enter");
  const card = page.getByRole("region", { name: "Review and approve" });
  await expect(card).toBeVisible();
  await expect(card.getByText(/wants to:/)).toContainText("Post to Slack #general");

  // Provably blocked: the sink saw nothing.
  const before = await request.get("http://127.0.0.1:8080/__slack/posts");
  expect(await before.json()).toHaveLength(0);

  // Approve → the broker posts exactly once.
  await card.getByRole("button", { name: "Approve" }).click();
  await expect(page.getByText(/Posted to #general/)).toBeVisible();

  const after = await request.get("http://127.0.0.1:8080/__slack/posts");
  const posts = (await after.json()) as { channel: string; text: string }[];
  expect(posts).toHaveLength(1);
  expect(posts[0].channel).toBe("#general");
  expect(posts[0].text).toBe("Q2 revenue is up 14%.");

  // The audit trail shows the decision.
  await page.getByRole("link", { name: "Approvals" }).click();
  await expect(page.getByText(/All clear/)).toBeVisible();

  // INBOUND: a signed @mention drives a run whose reply is gated too.
  const mention = JSON.stringify({
    type: "event_callback",
    event: { type: "app_mention", text: "reply please [[scenario:mention]]" },
  });
  const timestamp = "1234567890";
  const signature =
    "v0=" +
    createHmac("sha256", "e2e-signing-secret")
      .update(`v0:${timestamp}:${mention}`)
      .digest("hex");
  const inbound = await request.post("http://127.0.0.1:8080/api/slack/events", {
    headers: {
      "x-slack-request-timestamp": timestamp,
      "x-slack-signature": signature,
      "content-type": "application/json",
    },
    data: mention,
  });
  expect(inbound.status()).toBe(200);

  // The reply lands in the approval queue (asynchronously — the mention
  // spawns the run); poll the page until the card shows up.
  const inboundCard = page.getByRole("region", { name: "Review and approve" });
  await expect(async () => {
    await page.reload();
    await expect(inboundCard).toBeVisible({ timeout: 1000 });
  }).toPass({ timeout: 15000 });
  await expect(inboundCard).toContainText("Post to Slack #general");
  await inboundCard.getByRole("button", { name: "Approve" }).click();
  await expect(page.getByText(/All clear/)).toBeVisible();
  await expect
    .poll(async () => {
      const res = await request.get("http://127.0.0.1:8080/__slack/posts");
      return ((await res.json()) as { text: string }[]).map((p) => p.text);
    })
    .toContain("On it!");
});