feat(frontend): topology compare/Pareto UI

Add a Compare tab to /topologies: pick a task + roles + topology kinds, build a graph per kind, run POST /api/topologies/compare, and render a leaderboard table + a quality/cost Pareto scatter (SVG, no deps). Wrap Build + Compare in a tabbed TopologyWorkbench. e2e p8 extended to run a comparison end-to-end (build×N → compare → leaderboard + Pareto). Full suite 39 green; build + TS clean. Co-Authored-By: Claude Opus 4.8 <[email protected]>
2026-06-16 03:54:54 -07:00
parent 7648487a59
commit 654ec0f511
4 changed files with 254 additions and 2 deletions
@@ -31,3 +31,15 @@ test("browse the topology catalog and build a graph", async ({ page }) => {
  await page.getByRole("button", { name: "Build" }).click();
  await expect(page.locator("svg[aria-label*='topology']")).toBeVisible();
 });
+
+test("compare topologies shows a leaderboard and Pareto chart", async ({ page }) => {
+  await signIn(page);
+  await page.getByRole("link", { name: "Topologies" }).click();
+  await page.getByRole("tab", { name: /compare/i }).click();
+
+  await page.getByRole("button", { name: "Run comparison" }).click();
+
+  // Leaderboard table + Pareto chart render from the comparison result.
+  await expect(page.getByRole("cell", { name: /pipeline/i })).toBeVisible();
+  await expect(page.locator("svg[aria-label*='pareto']")).toBeVisible();
+});