feat: add Mockup node type with AI-generated low-fi wireframes

[tomasz-zajac-oss]

Summary

This adds a mockup node type to the C4 + DDD + Governance preset. The model can already describe how the system is built (C4) and what it must do (requirements, scenarios). A mockup adds a view of what the user sees. A mockup can be:

• a link to an external design (Figma, Penpot, …), or
• a low-fidelity SVG wireframe that AI generates from the requirements and scenarios the screen illustrates.

Metamodel changes (types/metamodel/presets/governance.ts)

• New mockup node type with three fields: description, screen (screen name or route) and link (design link). It has its own Table View tab. There is deliberately no status field.
• New relation illustrates: mockup → requirement / scenario.
• New relation presented-by: mockup → webapp / container / component / system.
• New relation navigates-to: mockup → mockup, for screen flow.
• Existing documents on the built-in preset get the new type automatically on load, because built-in presets are rebuilt at startup.

Wireframe generation (ai/mockupWireframe.ts)

• One adapter call with no tools, the same pattern as forgeClarify. It uses the user's configured generation model.
• The prompt is built from the model around the mockup:
  • its description and route
  • the EARS requirements and Gherkin scenarios it illustrates
  • the container that presents it
  • the screens it navigates to
• The SVG is extracted from the response and sanitized:
  • <script>, <foreignObject>, on* handlers and non-fragment hrefs are stripped
  • output over 20 KB is rejected
• The wireframe is only ever displayed through an <img> data URI. That context never runs scripts or loads external resources.

UI changes

• New MockupNode on the canvas. It shows the wireframe thumbnail if there is one, otherwise the design link or a placeholder.
• New Wireframe section in the properties panel, with a preview and these buttons:
  • Generate / Regenerate, which can be cancelled
  • Remove
  • Open design, which opens only http/https links
• New "UX" group in the palette. In the Wiki view, mockups are listed with the governance items.

Storage trade-off
The wireframe is stored on the node as a wireframe string. In md-folder documents it is written into the frontmatter as a multi-line block scalar; a test covers the round-trip. This needs no persistence changes. The downside is that wireframes load eagerly with the rest of the frontmatter. Now that lazy node bodies (#82) have landed, a follow-up could move them to a lazily loaded sidecar file.

Type of change

• New feature
• Tests

Test plan

• npm run typecheck passes
• npm test passes: 384/384 tests in 37 files, including the new tests/mockupWireframe.test.ts, which covers:
  • the metamodel types and relation inference
  • prompt construction from the linked model context
  • SVG extraction and sanitizing
  • the oversize cap
  • the md-folder round-trip of a multi-line wireframe
• Manual check in the app, not done yet:
  • create a mockup and link it with Illustrates to a requirement and a scenario
  • generate a wireframe with a real provider
  • check the canvas thumbnail and the properties preview
  • check Open design and Remove
  • save and reopen as md-folder and as JSON

🤖 Generated with Claude Code