mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-25 09:41:04 +01:00
PAP-10242 Phase G: address UX review (apply progress, adapters, responsive, fixtures)
Resolve the Phase F UX review must-fix items on the Team Catalog UI: - Honest apply progress (#1): the install API is a single non-streaming POST, so replace the six perpetual spinners with one truthful in-flight row and a result-driven checklist (agents/projects/skills + warnings) on success. - Adapter selection (#2): Step 4 now lists each imported agent with an adapter picker (AGENT_ADAPTER_TYPES), wired to install `adapterOverrides`. Preview vs install option builders are split because the preview schema rejects it. - Secrets honesty (#3): env inputs stay read-only (install schema does not accept secretValues) but now carry a required pill and an explicit amber note pointing at the Phase E follow-up; tracked in PAP-10253. - Responsive collapse (#4): list is full-width < lg and collapses to a single detail column with "Back to catalog"; install renders as a full-height Sheet < 768px. Added a useMediaQuery hook; auto-select is desktop-only. - Storybook fixture (#5): ui/storybook/stories/team-catalog.stories.tsx renders browse/detail and every install step (incl. blocked) with fixtures, exported the presentational components, and captured 1440x900 + 390x844 + dark screenshots into screenshots/PAP-10242/ (also attached to the issue). - Added step-indicator dots to the wizard header. Follow-ups filed as children: PAP-10253 (secrets API), PAP-10254 (onboarding seam), PAP-10255 (design-guide showcase), PAP-10256 (installed-group badge). Verified: tsc -b, build-storybook, and vitest (3/3) all pass. Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
1 parent
5f59f05129
commit
005849811e
17 files changed
+752
-118
No files matched your search
@@ -0,0 +1,58 @@
|
||||
#!/usr/bin/env node
|
||||
import path from "node:path";
|
||||
import fs from "node:fs/promises";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const repoRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
||||
const playwrightPkgRoot = path.join(repoRoot, "node_modules/.pnpm/playwright@1.58.2/node_modules/playwright");
|
||||
const { chromium } = await import(path.join(playwrightPkgRoot, "index.mjs"));
|
||||
|
||||
const BASE = process.env.SB_BASE ?? "http://127.0.0.1:6099";
|
||||
const outDir = path.join(repoRoot, "screenshots/PAP-10242");
|
||||
await fs.mkdir(outDir, { recursive: true });
|
||||
|
||||
const PREFIX = "surfaces-team-catalog";
|
||||
const desktop = [
|
||||
["browse-list", "01-browse"],
|
||||
["detail-pane", "02-detail"],
|
||||
["install-target-manager", "03-install-target-manager"],
|
||||
["install-source-policy", "04-install-source-policy"],
|
||||
["install-skill-plan", "05-install-skill-plan"],
|
||||
["install-preview", "06-install-preview"],
|
||||
["install-preview-blocked", "07-install-blocked"],
|
||||
["install-apply-progress", "08-apply-progress"],
|
||||
["install-success", "09-success"],
|
||||
];
|
||||
const mobile = [
|
||||
["detail-pane", "mobile-detail"],
|
||||
["install-preview", "mobile-install-preview"],
|
||||
];
|
||||
|
||||
const browser = await chromium.launch({
|
||||
executablePath: "/srv/paperclip/home/.cache/ms-playwright/chromium-1223/chrome-linux/chrome",
|
||||
args: ["--no-sandbox"],
|
||||
});
|
||||
const captured = [];
|
||||
try {
|
||||
async function capture(viewport, theme, jobs, suffix) {
|
||||
const context = await browser.newContext({ viewport });
|
||||
const page = await context.newPage();
|
||||
for (const [storyId, slug] of jobs) {
|
||||
const url = `${BASE}/iframe.html?id=${PREFIX}--${storyId}&viewMode=story&globals=theme:${theme}`;
|
||||
await page.goto(url, { waitUntil: "networkidle" }).catch(() => {});
|
||||
await page.waitForTimeout(900);
|
||||
const target = path.join(outDir, `${slug}-${theme}${suffix}.png`);
|
||||
await page.screenshot({ path: target, fullPage: true });
|
||||
captured.push(path.basename(target));
|
||||
console.log("captured", path.basename(target));
|
||||
}
|
||||
await context.close();
|
||||
}
|
||||
|
||||
await capture({ width: 1440, height: 900 }, "light", desktop, "");
|
||||
await capture({ width: 1440, height: 900 }, "dark", [["detail-pane", "02-detail"], ["install-preview", "06-install-preview"]], "");
|
||||
await capture({ width: 390, height: 844 }, "light", mobile, "");
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
console.log(`\n${captured.length} screenshots written to screenshots/PAP-10242/`);
|
||||
Reference in new issue
Block a user