feat(hub): full per-actor screen flows in every blueprint

[tomasz-zajac-oss]

Summary

#86 added three separate screens to each blueprint. This PR replaces them with one screen flow per actor. Each flow is a group node named " journey" that holds its mockups in step order. In total the blueprints now have 79 screens in 19 flows, up from 21 screens.

Blueprint	Flows (screens)
E-commerce (14)	Shopper: Home → Search → Product → Cart → Address → Shipping → Payment (→ Payment Declined → retry) → Confirmation → Tracking Operations: Catalogue ⇄ Product Editor; Orders ⇄ Order Detail
Fintech (12)	Customer: Accounts → Statement → Transaction → Dispute → Dispute Status Finance Ops: Exceptions → Exception Detail → Compensating Entry → Four-Eyes Approval → Journal Entry Compliance: Audit Trail → Regulatory Reports
Marketplace (13)	Buyer: Search → Listing → Checkout → Order → Open Dispute → Dispute Status Seller: Dashboard → New Listing → My Listings; Dashboard → Payouts Trust & Safety: Review Queue → Seller Investigation → Dispute Case
Real-time collaboration (9)	Collaborator: Documents → Editor → Back Online, and Editor → History → Restore Workspace admin: Share → Members → Remove Member → Access Removed
SaaS B2B (12)	Onboarding: Sign Up → Provisioning → Invite Team Tenant user: Dashboard → Project; Dashboard → Read-Only Tenant admin: Billing → Update Payment; Billing → SSO → Users Platform ops: Tenants → Tenant Detail
Analytics (9)	Analyst: Dashboards → Sales Dashboard → Explore / Dataset → Request Access Data engineer: Pipelines → Quality Runs → Quarantine; Pipelines → Freshness
AI assistant (10)	Customer: Chat Start → Grounded Answer → Handoff → Agent Joined Human agent: Queue → Case Review → Resolved → Audit Trail Assistant ops: Knowledge Sources ⇄ Quality & Drift

• Links between screens. Screens are connected with navigates-to, and each relation is labelled with the user action that triggers it. There are 79 such relations:

  • forward steps
  • branches, e.g. Payment → Confirmation or Payment Declined
  • return edges that close loops, e.g. Update Payment → Dashboard (write access restored), Exception Detail → Exceptions, Case Resolved → Queue

  Only natural end states (e.g. Order Tracking, Dispute Status) have no outgoing link.

• Existing screens. The 21 screens from feat(hub): UI mockups with low-fi wireframes in every blueprint #86 keep their ids and are now steps in these flows.

• New screens have the same metadata as the existing ones:

  • illustrates links to the blueprint's requirements where a screen shows one
  • a presented-by relation
  • descriptions that use the blueprint's template params

• Wireframes. All new wireframes are hand-authored in the same low-fi style as the existing ones and are already sanitised.

• Layout. Flow groups are stacked below the ADRs, with five screens per row.

Type of change

• New feature
• Tests

Checklist

• npm test passes (398/398)
• npm run typecheck passes with no errors
• New or changed behaviour is covered by tests. The blueprint mockup test in tests/hubCatalogue.test.ts now also checks that every blueprint:
  • has at least 8 mockups
  • places every mockup inside a flow group
  • links every mockup into its flow with navigates-to

Test plan

• Rendered all 79 wireframes and reviewed them. Fixed two inconsistencies found there: cart and checkout totals that did not match, and settings menu labels that differed between SaaS screens.
• Checked the flow structure with a script. Each of the 19 flows is one connected path, and no screen is isolated.
• Checked in npm run dev:web with headless Chromium:
  • Hub, E-commerce blueprint: the canvas shows 2 flow groups with 14 screens. The Wiki nests the screens under their flow and shows the flow in the breadcrumb.
  • Studio import: the import brings in both flow groups, all 14 mockups with wireframes, and their relations.
  • No console errors.
• The 14 return edges were verified in the data only. I did not look at them separately on the canvas; they are the same navigates-to relations as the rest.

Known limitations

• The Wiki lists screens inside a flow alphabetically, not in step order. Step order is visible on the canvas and in the navigates-to relations.
• With 9–14 screens per blueprint the canvas is dense: illustrates and presented-by lines run a long way up to the requirements and containers.

🤖 Generated with Claude Code