Skip to content

fix: show mockup wireframes in the Wiki view - #84

Merged
tomasz-zajac-oss merged 1 commit into
mainfrom
fix/mockup-wiki-wireframe
Sep 23, 2026
Merged

tomasz-zajac-oss merged 1 commit into
mainfrom
fix/mockup-wiki-wireframe

Conversation

@tomasz-zajac-oss

@tomasz-zajac-oss tomasz-zajac-oss commented Sep 23, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

AI-generated mockup wireframes from #83 did not show up in the Wiki view. The Wiki element page renders only metamodel properties, and wireframe is intentionally not a PropertyDef, so the page had nothing to render it from.

  • The Wireframe section is moved out of the properties panel into a shared MockupWireframe component (components/MockupWireframe.tsx). The section contains the preview and the Generate / Regenerate, Remove and Open design buttons.
  • A mockup's Wiki page now shows this section at the top of the page body, using the Wiki heading style. The preview is capped at 640px wide.
  • Mockup cards on the Wiki overview show a wireframe thumbnail.
  • The CSS classes are renamed from props-mockup-* to mockup-wf-*, because the section is no longer used only in the properties panel.

The wireframe is still rendered only through an <img> data URI. Nothing changes in how the SVG is stored or sanitized.

Type of change

  • Bug fix

Checklist

  • npm test passes (388/388)
  • npm run typecheck passes with no errors
  • New or changed behaviour is covered by tests. This change is UI only and has no new unit tests; it was checked manually (see below).

Test plan

  • Manual check with npm run dev:web and headless Chromium. Created a mockup with a wireframe and an illustrates link to a requirement. The wireframe appears:

    • on the mockup's Wiki page
    • as a thumbnail on the Wiki overview card
    • in the properties panel
    • on the canvas node

    No console errors.

  • Generate / Regenerate from the Wiki page with a real AI provider is not tested. AI was disabled in the test browser, so the button was hidden, as expected.

🤖 Generated with Claude Code

The Wiki element page only renders metamodel properties, and `wireframe`
is deliberately not a PropertyDef, so generated wireframes never appeared
there. Extract the properties-panel Wireframe section into a shared
MockupWireframe component and render it at the top of a mockup's Wiki
page (preview, Generate / Regenerate, Remove, Open design). Overview cards
for mockups also get a thumbnail.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@tomasz-zajac-oss
tomasz-zajac-oss merged commit 3e6c1fe into main Sep 23, 2026
2 checks passed
@tomasz-zajac-oss
tomasz-zajac-oss deleted the fix/mockup-wiki-wireframe branch September 23, 2026 16:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant