Feat/renderer vue#59
Merged
Merged
Conversation
Frontend-only Vite + Vue 3 app that parses one MDMA document and renders it with @mobile-reality/mdma-renderer-vue: a form (with a sensitive field and a data-source select), a masked-column table, a callout, an approval gate, and a submit button, plus a live audit-log panel and a light/dark theme toggle.
Streams a model through OpenRouter (key from VITE_OPENROUTER_API_KEY) prompted with the MDMA author prompt; each assistant reply is re-parsed per chunk into its own DocumentStore and rendered with @mobile-reality/mdma-renderer-vue, so embedded components appear live as the response streams. Frontend-only, no backend or AG-UI — the Vue counterpart of the React demo's agent chat.
…dma-vue Renderer demos live under examples/renderers/ rather than alongside the protocol integrations; adds the examples/renderers/* workspace glob.
Mutating a turn in place left its keyed <ChatMessage> with an unchanged prop reference, so Vue skipped the patch and the bubble stayed on the placeholder while content streamed in. Replace the turn object per update, and markRaw the store/AST so Vue never proxies them.
The flex body now sets min-height:0 so the message thread scrolls internally instead of the window. Adds a right-hand action-log panel that merges every turn's store audit entries (newest first), and the model already reads from VITE_MDMA_MODEL.
…eme the scrollbar - Action-log entries now show the payload detail (field = value, → action id, approver), with sensitive values shown as ••• since the store hashes them. - Assistant bubbles take the full column width so rendered forms aren't cramped; user bubbles stay compact. Thread widened to 860px. - color-scheme is bound to the app theme, so scrollbars and form controls follow it instead of the OS (no dark scrollbar under the light UI).
…Vue chat
- ChartRenderer overrides the built-in chart with a real inline-SVG chart
(bar/line/area/pie) via customizations.components.chart.
- Graph3D is a host-registered custom component (type: custom, name: graph-3d):
an interactive three.js bar chart whose bar clicks dispatch into the store and
fire actions.onSelect. Registered via customVariants and advertised to the
model through buildSystemPrompt({ customComponents }).
- three.js is code-split and loaded on demand, only when a graph-3d renders.
… chat The 3D scene only initialised once, on mount — but an async custom component mounted during a streamed re-parse can come up before its data (or layout width) is ready, leaving an empty black canvas. Now the scene rebuilds whenever the props change, initialisation is deferred a frame for layout, a placeholder shows until the scene is ready, and the CSV parser tolerates escaped/;-separated rows. Match three.js to the demo (0.185).
New Renderers → Vue docs page (install, usage, differences from the React renderer, theming, customizations, link to the example app), registered in the docs nav, plus a Vue note in the Theming page.
highlight.js had no mapping for lang="vue", so those blocks rendered as plaintext. Map vue/html to the XML grammar and register javascript so a Vue SFC's markup and <script> block are both colored.
Rewrite the Vue docs to describe what the renderer does rather than framing it as a sibling of the React renderer. Same structure; the 'differences from React' section becomes a self-contained 'State & reactivity' section.
Local agent run artifacts (plans, handoffs, notes) shouldn't be merged.
memorte03
approved these changes
Jul 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Adds
@mobile-reality/mdma-renderer-vue(v0.1.0), a Vue 3 renderer for MDMA documents, plusits docs and a runnable example. It turns a parsed MDMA document into interactive Vue components —
all 10 component types plus inline Markdown — with full state, bindings, actions, policy, audit,
and PII redaction, consuming the headless
spec+runtimestack unchanged. The view layer isnew; the store logic is shared and framework-agnostic.
Highlights:
packages/renderer-vue—MdmaDocument,MdmaBlock, the theme module,provide/injectcontexts (store, element overrides, custom variants), store composables thatreturn
ComputedRefs, the renderer registry, and built-in renderers for every component type.Ships
styles.css(--mdma-*variables). Authored asdefineComponent+h()in plain.ts(no
.vueSFCs), so it builds withtscand needs no bundler. 19 test files / 121 tests.examples/renderers/mdma-vue— a frontend-only OpenRouter agent chat that rendersstreamed MDMA replies with the Vue renderer (streamed re-parse via
updateAst, per-turn store,aggregated action log, a 2D-chart override, and a three.js
graph-3dcustom component). Private,not published.
mentions across the repo README /
docs/. Fixeslang="vue"syntax highlighting in the demo.Closes #
Type of Change
Packages Affected
@mobile-reality/mdma-renderer-vue@mobile-reality/mdma-spec@mobile-reality/mdma-parser@mobile-reality/mdma-runtime@mobile-reality/mdma-attachables-core@mobile-reality/mdma-renderer-react@mobile-reality/mdma-prompt-packChecklist
pnpm formatandpnpm lintpass).renderer-vue)pnpm test).pnpm typecheck). (24 tasks green)pnpm changeset) if this change affects published packages.(
.changeset/vue-renderer.md, minor)(N/A — no schema changes; the Vue renderer consumes
specunchanged.)sensitive: truewhere appropriate.(N/A — no spec/schema changes; the renderer honors existing
sensitiveflags and redaction.)How to Test
pnpm install && pnpm buildpnpm --filter @mobile-reality/mdma-renderer-vue test(121 tests),... typecheck,... lint— all green.tests/public-api.test.tsasserts every value export ofrenderer-reactexists inrenderer-vue.pnpm --filter @mobile-reality/mdma-demo dev→ Docs → Renderers → Vue (and the Vuenote on the Theming page); confirm the
vuecode blocks are syntax-highlighted.examples/renderers/mdma-vue, copy.env.exampleto.env, setVITE_OPENROUTER_API_KEY, thenpnpm --filter mdma-example-vue dev. Ask "collectmy shipping details", "chart our quarterly revenue", "show sales by region and quarter as a 3D
graph"; components render live as the reply streams, and interactions appear in the action log.