Remove screenshot artifacts from external object PR

scripts/capture-pap-2277-screenshots.mjs

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

scripts/capture-pap-2279-screenshots.mjs

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