feat(web): add compatibility matrix heatmap view

[Nether403]

Summary

Phase 4 gap #2. The Compatibility page was a single pairwise analyzer; this PR adds a Matrix tab that renders a category-by-category heatmap so users can survey how every tool in one category pairs with every tool in another.

Design

• Two view modes on /compatibility: Pairwise (existing, unchanged) and Matrix (new)
• The matrix fetches the full catalog once via a new useCatalog TanStack Query hook and evaluates every row × column pair client-side with the bundled packages/rules-engine — no new API route, no N² round-trips
• Users pick row and column categories (defaults to frontend × hosting). Each cell shows the harmony score in a 5-bucket color scale (emerald / lime / amber / orange / red) plus side badges for hard conflicts (red dot) and synergies (green dot)
• Horizontal scroll with a sticky row header for readability when a category has 10+ tools (ai-model, backend-framework)
• Deprecated tools are filtered out

Why not a 97×97 grid

9409 cells is more data than a human can scan. The roadmap asks for a heatmap; the category-pair matrix conveys the same "which tools click together" story with much better ergonomics and no perf concerns. A full grid stays open as a follow-up if users actually want it.

Evidence

Full E2E suite output:

5 passed (1.7m)
 ok searches the tool catalog (2.8s)
 ok analyzes pairwise compatibility (3.5s)
 ok shows a compatibility matrix across two categories (3.8s)
 ok shows a basic migration path (1.1s)
 ok generates an idea-to-stack blueprint (35.0s)

Screenshot saved to test-results/compat-matrix.png.

Quality gate (local)

• pnpm -r type-check — 0 errors
• pnpm -r lint — 0 errors
• pnpm -r build — web + api + packages
• pnpm -r test — 60 unit/API tests pass
• pnpm test:e2e — 5/5 passed

Notes

• Bumped the blueprint E2E timeout to 120s / 60s for the visibility check to match PR feat(web): convert Blueprint Builder to 4-step wizard #2 (parallel AI fan-out can exceed the config's 30s per-test default). Once PR feat(web): convert Blueprint Builder to 4-step wizard #2 merges this change will collapse into the wizard version automatically.
• Depends conceptually on main. Does not depend on PR feat(web): convert Blueprint Builder to 4-step wizard #2, but will need a trivial merge when the two land in sequence.

Next

Phase 4 gap #3 (TanStack Query sweep of remaining direct fetches) will ship as the third PR in this series.

---

---

Summary by cubic

Adds a Matrix heatmap to the Compatibility page so you can compare all tools in one category against another at a glance. The Pairwise analyzer stays the same and scores are computed client-side without extra API calls.

• New Features

  • New Matrix tab on /compatibility alongside Pairwise, with a simple mode toggle.
  • Pick row and column categories (defaults to frontend × hosting). Cells show harmony scores with a 5‑color scale and conflict/synergy dots; deprecated tools are hidden. Sticky row headers and horizontal scroll aid wide sets.
  • Loads the full catalog once via useCatalog (10‑min cache) and scores all pairs locally with the rules engine. No new API route or N² requests.

• Refactors

  • Split the page into ModeTabs, PairwiseAnalyzer (unchanged), and MatrixAnalyzer + CompatibilityHeatmap.
  • Added E2E coverage for the Matrix flow and increased the blueprint test timeout for stability.

^{Written for commit 0eb540e. Summary will update on new commits.}

[cubic-dev-ai]

No issues found across 4 files

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.