feat: prebuilt device chrome for MCP-rendered screens#43
Merged
trmquang93 merged 2 commits intomainfrom Apr 27, 2026
Merged
Conversation
Composite iOS / Android device chrome (status bar, dynamic island, home
indicator, gesture pill) onto every Satori-rendered screen so MCP-driven
flows look like the device they target without the agent authoring chrome
HTML by hand. Two new tools (compose_chrome, get_chrome_info) let agents
chrome retroactively and query safe-area before laying out HTML. Persists
a {preset, chrome, chromeStyle, safeArea} block on every screen and bumps
the file format v14 -> v15 with a one-line backfill.
Reduces device presets from 7 SKU-named variants to 2 generics (iphone,
android) — agents now think in terms of "what device" not "which model",
and chrome geometry keys off these two canonical viewports.
Adds 79 tests (chrome subsystem + renderer integration + tool wiring +
v15 migration). Repo total: 780/780 passing, lint clean, no new build
warnings, no new runtime dependencies.
The chrome integration tests added in 8194dd4 import the SatoriRenderer, which dynamically imports `satori`, `satori-html`, and `@resvg/resvg-js`. These live in mcp-server/package.json, not the root, so a root-only `npm ci` left them unresolved on CI and the two new test suites failed to load with ERR_MODULE_NOT_FOUND. Add a dedicated `npm ci` step against mcp-server/ so Node's bare-import resolution finds the deps when running the integration tests.
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
1 participant
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.
Summary
Composite iOS / Android device chrome (status bar, dynamic island, home indicator, gesture pill) onto every Satori-rendered screen so MCP-driven flows look like the device they target without the agent authoring chrome HTML by hand.
compose_chrome(chrome retroactively) andget_chrome_info(query safe-area before laying out HTML).{ preset, chrome, chromeStyle, safeArea }block on every screen.importFlow.js.iphone,android) — agents now think in terms of "what device" rather than "which model"; chrome geometry keys off these two canonical viewports.Closes backlog item 2.8 — Prebuilt Device Chrome Components.
Test plan
npm test— 780/780 passingnpm run lint— cleannpm run build— succeeds, no new warningsmainsrc/constants.js/useScreenManager.js/vite.config.jschanges without dep mirror (verified nopackage.jsonchanges)