mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-25 17:45:53 +01:00
Remove screenshot artifacts from external object PR
This commit is contained in:
Dotta committed
1 parent
64ac16482b
commit
fea7d3e54b
30 files changed
-424
No files matched your search
@@ -1,225 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
// Captures the §9 evidence screenshots requested on PAP-2268 from the
|
||||
// storybook-static build. Stories cover the host-rendered surfaces (markdown
|
||||
// decoration, properties pill, related-work, sidebar rollup, list-row badge,
|
||||
// status matrix). Live data screenshots that require a seeded dev DB still
|
||||
// have to be captured against the running app — those are listed in the PAP-2277
|
||||
// completion comment.
|
||||
|
||||
import { createRequire } from "node:module";
|
||||
const localRequire = createRequire(import.meta.url);
|
||||
const { chromium } = localRequire("playwright");
|
||||
import http from "node:http";
|
||||
import { promises as fs } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repoRoot = path.resolve(__dirname, "..");
|
||||
const storybookRoot = path.join(repoRoot, "ui", "storybook-static");
|
||||
const outDir = path.join(repoRoot, "screenshots", "pap-2277");
|
||||
|
||||
const MIME = {
|
||||
".html": "text/html",
|
||||
".js": "application/javascript",
|
||||
".mjs": "application/javascript",
|
||||
".css": "text/css",
|
||||
".json": "application/json",
|
||||
".svg": "image/svg+xml",
|
||||
".png": "image/png",
|
||||
".jpg": "image/jpeg",
|
||||
".woff": "font/woff",
|
||||
".woff2": "font/woff2",
|
||||
".ico": "image/x-icon",
|
||||
".map": "application/json",
|
||||
};
|
||||
|
||||
function startStaticServer(rootDir) {
|
||||
return new Promise((resolve) => {
|
||||
const server = http.createServer(async (req, res) => {
|
||||
try {
|
||||
const urlPath = decodeURIComponent((req.url ?? "/").split("?")[0]);
|
||||
let filePath = path.join(rootDir, urlPath === "/" ? "index.html" : urlPath);
|
||||
let stat;
|
||||
try {
|
||||
stat = await fs.stat(filePath);
|
||||
} catch {
|
||||
stat = null;
|
||||
}
|
||||
if (stat?.isDirectory()) {
|
||||
filePath = path.join(filePath, "index.html");
|
||||
stat = await fs.stat(filePath).catch(() => null);
|
||||
}
|
||||
if (!stat) {
|
||||
res.statusCode = 404;
|
||||
res.end("not found");
|
||||
return;
|
||||
}
|
||||
const ext = path.extname(filePath).toLowerCase();
|
||||
res.setHeader("content-type", MIME[ext] ?? "application/octet-stream");
|
||||
res.setHeader("cache-control", "no-cache");
|
||||
const data = await fs.readFile(filePath);
|
||||
res.end(data);
|
||||
} catch (err) {
|
||||
res.statusCode = 500;
|
||||
res.end(err.message);
|
||||
}
|
||||
});
|
||||
server.listen(0, "127.0.0.1", () => {
|
||||
const address = server.address();
|
||||
const port = typeof address === "object" && address ? address.port : 0;
|
||||
resolve({ server, baseUrl: `http://127.0.0.1:${port}` });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const SHOTS = [
|
||||
{
|
||||
storyId: "foundations-external-objects--full-surface",
|
||||
label: "external-objects-full-surface-light-desktop",
|
||||
viewport: { width: 1440, height: 1024 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--full-surface",
|
||||
label: "external-objects-full-surface-dark-desktop",
|
||||
viewport: { width: 1440, height: 1024 },
|
||||
theme: "dark",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--full-surface",
|
||||
label: "external-objects-full-surface-light-mobile",
|
||||
viewport: { width: 414, height: 896 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "product-chat-comments--comment-threads",
|
||||
label: "comment-thread-external-light-desktop",
|
||||
viewport: { width: 1280, height: 1400 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "product-chat-comments--comment-threads",
|
||||
label: "comment-thread-external-dark-desktop",
|
||||
viewport: { width: 1280, height: 1400 },
|
||||
theme: "dark",
|
||||
},
|
||||
{
|
||||
storyId: "product-chat-comments--comment-threads",
|
||||
label: "comment-thread-external-light-mobile",
|
||||
viewport: { width: 414, height: 1100 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "product-chat-comments--issue-chat-with-timeline",
|
||||
label: "issue-chat-thread-external-light-desktop",
|
||||
viewport: { width: 1440, height: 1400 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "product-chat-comments--issue-chat-with-timeline",
|
||||
label: "issue-chat-thread-external-dark-desktop",
|
||||
viewport: { width: 1440, height: 1400 },
|
||||
theme: "dark",
|
||||
},
|
||||
{
|
||||
storyId: "product-chat-comments--issue-chat-with-timeline",
|
||||
label: "issue-chat-thread-external-light-mobile",
|
||||
viewport: { width: 414, height: 1100 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "chat-comments-issue-thread-interactions--request-confirmation-pending",
|
||||
label: "interaction-request-confirmation-light-desktop",
|
||||
viewport: { width: 1280, height: 900 },
|
||||
theme: "light",
|
||||
},
|
||||
// PAP-2279 §9 acceptance shots — integration surfaces missing from the prior set.
|
||||
{
|
||||
storyId: "foundations-external-objects--properties-row-desktop",
|
||||
label: "external-properties-row-desktop-1440",
|
||||
viewport: { width: 1440, height: 900 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--properties-row-mobile-sheet",
|
||||
label: "external-properties-row-mobile-390",
|
||||
viewport: { width: 390, height: 844 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--related-work-empty",
|
||||
label: "external-related-work-empty-1440",
|
||||
viewport: { width: 1440, height: 900 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--sidebar-mobile",
|
||||
label: "external-sidebar-mobile-390",
|
||||
viewport: { width: 390, height: 844 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--issue-list-row",
|
||||
label: "external-issue-list-row-1440",
|
||||
viewport: { width: 1440, height: 600 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--filter-popover-open",
|
||||
label: "external-filter-popover-open-1440",
|
||||
viewport: { width: 1440, height: 900 },
|
||||
theme: "light",
|
||||
},
|
||||
{
|
||||
storyId: "foundations-external-objects--integration-surfaces",
|
||||
label: "external-integration-surfaces-dark-1440",
|
||||
viewport: { width: 1440, height: 1600 },
|
||||
theme: "dark",
|
||||
},
|
||||
];
|
||||
|
||||
async function applyTheme(page, theme) {
|
||||
await page.evaluate((t) => {
|
||||
const root = document.documentElement;
|
||||
root.classList.toggle("dark", t === "dark");
|
||||
root.style.colorScheme = t;
|
||||
document.body?.style?.setProperty("background", t === "dark" ? "#0c0a09" : "#ffffff");
|
||||
}, theme);
|
||||
}
|
||||
|
||||
async function captureStory({ baseUrl, page, storyId, label, viewport, theme }) {
|
||||
await page.setViewportSize(viewport);
|
||||
const url = `${baseUrl}/iframe.html?id=${encodeURIComponent(storyId)}&viewMode=story&globals=theme:${theme}`;
|
||||
await page.goto(url, { waitUntil: "networkidle" });
|
||||
await applyTheme(page, theme);
|
||||
await page.waitForTimeout(800);
|
||||
const dest = path.join(outDir, `${label}.png`);
|
||||
await page.screenshot({ path: dest, fullPage: true });
|
||||
return dest;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
await fs.mkdir(outDir, { recursive: true });
|
||||
const { server, baseUrl } = await startStaticServer(storybookRoot);
|
||||
const browser = await chromium.launch();
|
||||
const ctx = await browser.newContext();
|
||||
const page = await ctx.newPage();
|
||||
const captured = [];
|
||||
try {
|
||||
for (const shot of SHOTS) {
|
||||
const dest = await captureStory({ baseUrl, page, ...shot });
|
||||
captured.push(path.relative(repoRoot, dest));
|
||||
console.log("captured", path.relative(repoRoot, dest));
|
||||
}
|
||||
} finally {
|
||||
await browser.close();
|
||||
server.close();
|
||||
}
|
||||
console.log(JSON.stringify({ captured }, null, 2));
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,199 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
// Captures the §9 acceptance screenshots for PAP-2279 from a logged-in
|
||||
// dev server (local_trusted mode auto-authenticates as local-board).
|
||||
// Seed: PAP-2232 has 3 external objects (failed/auth_required/succeeded);
|
||||
// PAP-2179 has one running object; PAP-2210 has none (related-work empty state).
|
||||
|
||||
import { createRequire } from "node:module";
|
||||
const localRequire = createRequire(import.meta.url);
|
||||
const { chromium } = localRequire("playwright");
|
||||
import { promises as fs } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repoRoot = path.resolve(__dirname, "..");
|
||||
const outDir = path.join(repoRoot, "screenshots", "pap-2279");
|
||||
|
||||
const baseUrl = process.env.PAP_DEV_URL ?? "http://127.0.0.1:3104";
|
||||
const DESKTOP = { width: 1440, height: 900 };
|
||||
const MOBILE = { width: 390, height: 844 };
|
||||
|
||||
async function shoot(page, dest) {
|
||||
await fs.mkdir(path.dirname(dest), { recursive: true });
|
||||
await page.screenshot({ path: dest, fullPage: false });
|
||||
console.log("captured", path.relative(repoRoot, dest));
|
||||
}
|
||||
|
||||
async function main() {
|
||||
await fs.mkdir(outDir, { recursive: true });
|
||||
const browser = await chromium.launch();
|
||||
|
||||
// ====== Desktop ======
|
||||
const desktop = await browser.newContext({ viewport: DESKTOP, deviceScaleFactor: 2 });
|
||||
const page = await desktop.newPage();
|
||||
|
||||
// ---- #03 Properties panel @ 1440x900 with 3 pills + tooltip ----
|
||||
await page.goto(`${baseUrl}/PAP/issues/PAP-2232`, { waitUntil: "networkidle" });
|
||||
await page.locator('text=External objects').first().waitFor({ state: "visible", timeout: 15000 });
|
||||
await page.waitForTimeout(800);
|
||||
// Hover the failed-status pill to open its Radix tooltip. We aim for the
|
||||
// pill in the properties rail; the test scope is the Properties aside.
|
||||
const propertiesRail = page.locator('aside, [data-slot="sidebar"], [class*="properties" i]').first();
|
||||
const railScope = (await propertiesRail.count()) > 0 ? propertiesRail : page;
|
||||
const firstPill = railScope.locator('a, button').filter({ hasText: /pull request|lead/i }).first();
|
||||
if ((await firstPill.count()) > 0) {
|
||||
try {
|
||||
await firstPill.scrollIntoViewIfNeeded();
|
||||
const box = await firstPill.boundingBox();
|
||||
if (box) {
|
||||
const cx = box.x + box.width / 2;
|
||||
const cy = box.y + box.height / 2;
|
||||
// Move from far away first, then to the pill center, to ensure pointermove fires
|
||||
await page.mouse.move(0, 0);
|
||||
await page.waitForTimeout(50);
|
||||
await page.mouse.move(cx, cy, { steps: 10 });
|
||||
}
|
||||
await firstPill.focus().catch(() => {});
|
||||
await page.waitForTimeout(1500);
|
||||
} catch (e) { console.warn("pill hover failed:", e.message); }
|
||||
} else {
|
||||
console.warn("no pill in properties rail found");
|
||||
}
|
||||
await shoot(page, path.join(outDir, "03-properties-desktop-3-pills-tooltip.png"));
|
||||
|
||||
// ---- #07 Related-work empty state @ 1440x900 (PAP-2210) ----
|
||||
await page.goto(`${baseUrl}/PAP/issues/PAP-2210`, { waitUntil: "networkidle" });
|
||||
await page.waitForTimeout(800);
|
||||
// Click the "Related work" tab
|
||||
const relatedTab = page.locator('[role="tab"]', { hasText: /Related work/i }).first();
|
||||
if ((await relatedTab.count()) > 0) {
|
||||
try { await relatedTab.click({ timeout: 5000 }); } catch (e) { console.warn("related tab click failed:", e.message); }
|
||||
await page.waitForTimeout(800);
|
||||
} else {
|
||||
console.warn("Related work tab not found");
|
||||
}
|
||||
// Scroll down so the empty External objects copy is in viewport
|
||||
const emptyCopy = page.locator('text=does not reference any external objects').first();
|
||||
if ((await emptyCopy.count()) > 0) {
|
||||
try { await emptyCopy.scrollIntoViewIfNeeded(); } catch {}
|
||||
}
|
||||
await page.waitForTimeout(400);
|
||||
await shoot(page, path.join(outDir, "07-related-work-empty-desktop.png"));
|
||||
|
||||
// ---- #10 Issue-list row @ 1440x900 (badge + non-badge) ----
|
||||
// Note: the Phase 6 plumbing ships the IssueRow `externalObjectSummary` prop
|
||||
// but no IssuesList caller fetches/forwards summaries today. So the live-app
|
||||
// list cannot render the badge yet — we still capture the list view as the
|
||||
// truthful current state and flag the wiring gap in the issue comment.
|
||||
await page.goto(`${baseUrl}/PAP/issues`, { waitUntil: "networkidle" });
|
||||
await page.waitForTimeout(1500);
|
||||
// Search for PAP-2232 so the seeded "with-badge" issue shows up at the top
|
||||
// alongside any other matches (control rows without badge).
|
||||
const search = page.locator('input[placeholder*="Search issues" i], input[type="search"]').first();
|
||||
if ((await search.count()) > 0) {
|
||||
try {
|
||||
await search.click();
|
||||
await search.fill("Follow up PR");
|
||||
await page.waitForTimeout(800);
|
||||
} catch {}
|
||||
} else {
|
||||
console.warn("Search input not found");
|
||||
}
|
||||
await page.evaluate(() => window.scrollTo(0, 0));
|
||||
await page.waitForTimeout(500);
|
||||
await shoot(page, path.join(outDir, "10-issue-list-rows-desktop.png"));
|
||||
|
||||
// ---- #11 Filter popover @ 1440x900, External object status section, "Failed" checked ----
|
||||
// Click the icon-only Filter button (title="Filter")
|
||||
const filterButton = page.locator('button[title="Filter"], button[title*="Filters" i]').first();
|
||||
if ((await filterButton.count()) > 0) {
|
||||
try {
|
||||
await filterButton.click({ timeout: 5000 });
|
||||
await page.waitForTimeout(600);
|
||||
} catch (e) { console.warn("filter click failed:", e.message); }
|
||||
} else {
|
||||
console.warn("Filter button not found");
|
||||
}
|
||||
// Scroll the popover so the "External object status" section is visible
|
||||
const externalSection = page.locator('text=External object status').first();
|
||||
if ((await externalSection.count()) > 0) {
|
||||
try { await externalSection.scrollIntoViewIfNeeded({ timeout: 3000 }); } catch {}
|
||||
// Click the Failed checkbox label
|
||||
const failedLabel = page.locator('label', { hasText: /^\s*Failed\s*$/ }).first();
|
||||
const failedFallback = page.locator('label:has-text("Failed")').first();
|
||||
const target = (await failedLabel.count()) > 0 ? failedLabel : failedFallback;
|
||||
if ((await target.count()) > 0) {
|
||||
try { await target.click({ timeout: 3000 }); } catch (e) { console.warn("failed-check click failed:", e.message); }
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
try { await externalSection.scrollIntoViewIfNeeded(); } catch {}
|
||||
} else {
|
||||
console.warn("External object status section not found in popover");
|
||||
}
|
||||
await page.waitForTimeout(400);
|
||||
await shoot(page, path.join(outDir, "11-filter-popover-desktop.png"));
|
||||
|
||||
await desktop.close();
|
||||
|
||||
// ====== Mobile ======
|
||||
const mobile = await browser.newContext({
|
||||
viewport: MOBILE,
|
||||
deviceScaleFactor: 3,
|
||||
isMobile: true,
|
||||
hasTouch: true,
|
||||
userAgent:
|
||||
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1",
|
||||
});
|
||||
const m = await mobile.newPage();
|
||||
|
||||
// ---- #04 Properties mobile sheet expanded ----
|
||||
await m.goto(`${baseUrl}/PAP/issues/PAP-2232`, { waitUntil: "networkidle" });
|
||||
await m.waitForTimeout(1200);
|
||||
// Click button[title="Properties"] (SlidersHorizontal icon in mobile toolbar)
|
||||
const propsTrigger = m.locator('button[title="Properties"]').first();
|
||||
if ((await propsTrigger.count()) > 0) {
|
||||
try { await propsTrigger.click({ timeout: 5000 }); } catch (e) { console.warn("props trigger click failed:", e.message); }
|
||||
await m.waitForTimeout(800);
|
||||
} else {
|
||||
console.warn("mobile Properties trigger not found");
|
||||
}
|
||||
// Scroll sheet so external objects row visible
|
||||
const extLabel = m.locator('text=External objects').first();
|
||||
if ((await extLabel.count()) > 0) {
|
||||
try { await extLabel.scrollIntoViewIfNeeded(); } catch {}
|
||||
}
|
||||
await m.waitForTimeout(400);
|
||||
await shoot(m, path.join(outDir, "04-properties-mobile.png"));
|
||||
|
||||
// ---- #09 Sidebar mobile drawer ----
|
||||
await m.goto(`${baseUrl}/PAP/issues`, { waitUntil: "networkidle" });
|
||||
await m.waitForTimeout(1000);
|
||||
// The hamburger to open the sidebar drawer is "Open Paperclip menu" in mobile
|
||||
// BUT the drawer that contains nav (with project list) is opened via the
|
||||
// dropdown trigger or a separate sidebar trigger; try both.
|
||||
const menuButton = m.locator('button[aria-label="Open Paperclip menu"]').first();
|
||||
const sidebarTrigger = m.locator('[data-slot="sidebar-trigger"], button[aria-label*="sidebar" i], button[aria-label*="navigation" i]').first();
|
||||
let opened = false;
|
||||
for (const cand of [sidebarTrigger, menuButton]) {
|
||||
if ((await cand.count()) > 0) {
|
||||
try {
|
||||
await cand.scrollIntoViewIfNeeded({ timeout: 1000 });
|
||||
await cand.click({ timeout: 3000, force: true });
|
||||
opened = true;
|
||||
break;
|
||||
} catch (e) { console.warn("drawer trigger click failed:", e.message); }
|
||||
}
|
||||
}
|
||||
if (!opened) console.warn("no drawer trigger clicked");
|
||||
await m.waitForTimeout(700);
|
||||
await shoot(m, path.join(outDir, "09-sidebar-mobile-drawer.png"));
|
||||
|
||||
await mobile.close();
|
||||
await browser.close();
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error("capture failed:", err);
|
||||
process.exit(1);
|
||||
});
|
||||
Reference in new issue
Block a user