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:
DottaandPaperclip committed 2026-06-05 03:20:50 +00:00
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/`);