feat(hub): UI mockups with low-fi wireframes in every blueprint

[tomasz-zajac-oss]

Summary

Each of the seven Hub blueprints now has three mockup nodes, one per key user-facing screen. Every mockup includes a hand-drawn low-fi SVG wireframe. The wireframes follow the same style as ai/mockupWireframe.ts: grayscale with one accent colour.

Blueprint	Screens
E-commerce	Product Page → Checkout → Order Confirmation
Fintech ledger	Account Statement → Dispute; Reconciliation Exceptions
Marketplace	New Listing; Listing Review Queue; Order & Buyer Protection
Real-time collaboration	Document Editor → Share & Access / Version History
SaaS B2B	Sign Up → Workspace Dashboard → Billing & Usage
Analytical data platform	Sales Dashboard → Dataset & Lineage → Data Quality Runs
AI assistant	Support Chat; Escalation Queue → Case Review

• illustrates points to the requirements already in each blueprint. Two examples:
  • Checkout shows card fields hosted by the payment provider, which illustrates No Card Data at Rest.
  • Case Review shows per-field extraction confidence below the review threshold.
• presented-by points to the webapp or container that renders the screen.
• navigates-to links screens that belong to the same user flow.
• Descriptions use the blueprint's template params (e.g. {{CHECKOUT_P95_MS}}), so they are substituted on import.
• Layout. The mockups sit in a new row below the ADRs. Existing blueprint content is unchanged: the diff only adds lines.

Hub. The Hub viewer (canvas, wiki, table) needed no changes. The blueprint import picker labelled groups from a hard-coded map, so mockups and people appeared as raw type ids. Types missing from that map now use the plural label from the Hub theme.

Type of change

• New feature
• Bug fix (raw type ids shown in the blueprint import picker)
• Tests

Checklist

• npm test passes (398/398)
• npm run typecheck passes with no errors
• New or changed behaviour is covered by tests. A new test in tests/hubCatalogue.test.ts checks every blueprint for:
  • mockups exist, and each has a presented-by relation
  • mockup relations are allowed by the governance metamodel
  • both ends of every relation exist
  • stored wireframes are already sanitised (sanitizeWireframeSvg returns them unchanged)

Test plan

• Rendered all 21 wireframes on one page and reviewed them. Fixed one text line that overflowed the frame.
• Checked in npm run dev:web with headless Chromium:
  • Hub, E-commerce blueprint: 3 mockup nodes with thumbnails on the canvas, the full wireframe on the Wiki page, and a Mockup tab in the table view.
  • Studio, import via ?hub=bp-ecommerce-platform: the picker shows "Mockups (3)" and "People (2)". The import adds 3 mockups with their wireframes and all 9 of their relations.
  • No console errors.

🤖 Generated with Claude Code