PaperClipAI/tests/e2e/text-attachment-tabs.spec.ts

import { randomUUID } from "node:crypto";
import fs from "node:fs/promises";
import { expect, test, type APIRequestContext } from "@playwright/test";
import { downloadTaskTextArtifact } from "../runner-e2e/task-text-artifact-download.js";
import { expectTaskPanelTab, selectTaskPanelTab } from "./helpers/task-panel-tabs";

async function json(response: Awaited<ReturnType<APIRequestContext["get"]>>) {
  expect(response.ok(), `${response.status()}: ${await response.text()}`).toBe(true);
  return response.json();
}

for (const mobile of [false, true]) {
  test(`opens uploaded text in task tabs and downloads the original (mobile=${mobile})`, async ({ page, request }, testInfo) => {
    await page.setViewportSize(mobile ? { width: 390, height: 844 } : { width: 1440, height: 1000 });
    const company = await json(await request.post("/api/companies", { data: { name: `Text files ${randomUUID()}` } }));
    const issue = await json(await request.post(`/api/companies/${company.id}/issues`, {
      data: { title: "Review uploaded text files", status: "backlog" },
    }));
    const files = [
      { name: "AGENTS.md", mimeType: "text/markdown", buffer: Buffer.from("# File charter\n\nKeep **original** bytes.\n") },
      { name: "notes.txt", mimeType: "text/plain", buffer: Buffer.from("Plain text <script>never execute</script>\n") },
    ];
    const attachments = [];
    for (const file of files) attachments.push(await json(await request.post(`/api/companies/${company.id}/issues/${issue.id}/attachments`, { multipart: { file } })));
    await json(await request.post(`/api/issues/${issue.id}/comments`, {
      data: { body: "Review the attached files.", attachmentIds: attachments.map((attachment) => attachment.id) },
    }));
    for (const [index, attachment] of attachments.entries()) {
      await json(await request.post(`/api/issues/${issue.id}/work-products`, {
        data: {
          type: "artifact", provider: "paperclip", title: `Delivered ${files[index]!.name}`, status: "ready_for_review",
          metadata: {
            attachmentId: attachment.id, contentType: attachment.contentType, byteSize: attachment.byteSize,
            originalFilename: files[index]!.name, contentPath: attachment.contentPath,
            openPath: attachment.contentPath, downloadPath: `${attachment.contentPath}?download=1`,
          },
        },
      }));
    }
    await page.goto(`/${company.issuePrefix}/issues/${issue.identifier}`);
    const threadFiles = page.getByTestId("task-chat-bubble-artifacts-v1");
    await threadFiles.getByRole("link", { name: "Open AGENTS.md", exact: true }).click();
    const panel = mobile ? page.getByTestId("mobile-task-side-panel") : page.locator("aside").filter({ has: page.getByRole("tab", { name: "AGENTS.md", exact: true }) });
    await expectTaskPanelTab(panel, mobile, "AGENTS.md");
    await expect(panel.getByRole("heading", { name: "File charter", exact: true, level: 1 })).toBeVisible();
    const raw = panel.getByRole("button", { name: "Raw", exact: true });
    await raw.click();
    await expect(raw).toHaveAttribute("aria-pressed", "true");
    await expect(panel.getByLabel("AGENTS.md raw text")).toContainText("# File charter");
    await panel.getByRole("button", { name: "Rendered", exact: true }).click();
    await expect(panel.getByRole("heading", { name: "File charter", exact: true, level: 1 })).toBeVisible();
    await page.screenshot({ path: testInfo.outputPath("markdown-rendered.png"), fullPage: true });
    const markdownDownload = page.waitForEvent("download");
    await panel.getByRole("link", { name: "Download AGENTS.md", exact: true }).click();
    expect(await fs.readFile((await (await markdownDownload).path())!)).toEqual(files[0]!.buffer);
    if (mobile) await panel.getByRole("button", { name: "Close side panel", exact: true }).click();
    await threadFiles.getByRole("link", { name: "Open notes.txt", exact: true }).click();
    await expectTaskPanelTab(panel, mobile, "notes.txt");
    await expect(panel.getByLabel("notes.txt raw text")).toContainText("<script>never execute</script>");
    await expect(panel.getByRole("group", { name: "Markdown view", exact: true })).toHaveCount(0);
    const textDownload = page.waitForEvent("download");
    await panel.getByRole("link", { name: "Download notes.txt", exact: true }).click();
    expect(await fs.readFile((await (await textDownload).path())!)).toEqual(files[1]!.buffer);
    await page.screenshot({ path: testInfo.outputPath("plain-text-download.png"), fullPage: true });
    await selectTaskPanelTab(page, panel, mobile, "AGENTS.md");
    await expect(panel.getByRole("heading", { name: "File charter", exact: true, level: 1 })).toBeVisible();
    if (mobile) {
      await panel.getByRole("button", { name: /^Switch tabs, \d+ open$/ }).click();
      const overview = page.getByRole("dialog", { name: "Open tabs", exact: true });
      await expect(overview.getByRole("button", { name: "AGENTS.md", exact: true })).toHaveCount(1);
      await overview.getByRole("button", { name: "AGENTS.md", exact: true }).click();
    } else {
      await expect(panel.getByRole("tab", { name: "AGENTS.md", exact: true })).toHaveCount(1);
    }
    await panel.getByRole("button", { name: "Open a new tab", exact: true }).click();
    await page.getByRole("option", { name: /^Artifacts(?: Already open)?$/ }).click();
    const artifactRows = panel.getByTestId("artifacts-v1-list").getByRole("listitem");
    const markdownRow = artifactRows.filter({ has: page.getByRole("button", { name: "Open in tab: Delivered AGENTS.md", exact: true }) });
    const review = markdownRow.getByRole("button", { name: "Open AGENTS.md", exact: true });
    await review.click();
    await expect(review).toHaveAttribute("aria-expanded", "true");
    await expect(panel.getByRole("heading", { name: "File charter", exact: true, level: 1 })).toBeVisible();
    await expect(panel.getByRole("link", { name: "Download Delivered AGENTS.md", exact: true })).toBeVisible();
    const cardDownload = page.waitForEvent("download");
    const textRow = artifactRows.filter({ hasText: "For review" }).filter({ has: page.getByRole("link", { name: "Open notes.txt", exact: true }) });
    await textRow.getByRole("link", { name: "Download notes.txt", exact: true }).click();
    expect(await fs.readFile((await (await cardDownload).path())!)).toEqual(files[1]!.buffer);
    await expectTaskPanelTab(panel, mobile, "Artifacts");
    await textRow.getByRole("link", { name: "Open notes.txt", exact: true }).click();
    await expectTaskPanelTab(panel, mobile, "notes.txt");
    await selectTaskPanelTab(page, panel, mobile, "Artifacts");
    await panel.getByRole("button", { name: "Open in tab: Delivered AGENTS.md", exact: true }).click();
    await expectTaskPanelTab(panel, mobile, "AGENTS.md");
  });
}


test("downloads a delivered JSON chip through its visible file tab with exact attachment binding", async ({ page, request }) => {
  const company = await json(await request.post("/api/companies", { data: { name: `JSON delivery ${randomUUID()}` } }));
  const issue = await json(await request.post(`/api/companies/${company.id}/issues`, {
    data: { title: "Read the delivered result", status: "backlog" },
  }));
  const original = Buffer.from('{"reference":"original","label":"latest"}\n');
  const attachment = await json(await request.post(`/api/companies/${company.id}/issues/${issue.id}/attachments`, {
    multipart: { file: { name: "result.json", mimeType: "application/json", buffer: original } },
  }));
  await json(await request.post(`/api/issues/${issue.id}/comments`, {
    data: { body: `[result.json](${attachment.contentPath})` },
  }));
  await page.goto(`/${company.issuePrefix}/issues/${issue.identifier}`);
  const downloaded = await downloadTaskTextArtifact(page, attachment.id, "result.json");
  expect(await fs.readFile(downloaded)).toEqual(original);
});