feat(preview): implement the host-side live-preview surface - #94
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
…etention Preview could embed a build but not resize it, reload it on demand, or keep the last diagnostic visible when a later poll reported nothing. Add host-side desktop and mobile widths, a manual reload that remounts the frame and re-reads runtime state, and sticky diagnostics that a successful build clears. The sandboxed frame gains no new capability. Closes #58. Co-Authored-By: Claude <noreply@anthropic.com>
7shep
force-pushed
the
agent/issue-58-preview-protocol
branch
from
July 31, 2026 18:41
9b5d218 to
a63f798
Compare
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
Closes the remaining gaps in Preview's live-preview surface: viewport controls, manual reload, and diagnostics that survive a refresh.
role="group"labelled Preview width with Desktop and Mobile buttons carryingaria-pressed. Mobile constrains the frame to 390px; Desktop releases it. Keyboard-operable, state readable without colour.Reload previewremounts the frame by key and immediately re-reads runtime state rather than waiting for the next poll. A broken state gets the same affordance asRetry now, next to the existing route back to Studio.prefers-reduced-motionblock instyles.css; no change needed.button:focus-visiblenow gets the same visible outline as links and the frame.On the message protocol
The issue asks for a typed
postMessageprotocol with trusted-origin validation. That is deliberately not what this PR builds, andapps/preview/README.mdnow says so where a future contributor will look.postMessagebridge as an iframe-escape threat and excludes it from the MVP. The frame stayssandbox="allow-scripts"with no same-origin, navigation, popup, download, or form capability, and receives no message it could act on.@universal/runtime-contractsfrom the trusted runtime.RuntimePreviewClientvalidates every response before any state change, rejects a descriptor whose project/build/revision does not match the runtime's own record as stale, and rejects a non-loopback preview origin. Those paths are covered inpreview-client.test.ts.Reversing that boundary should be an ADR amendment, not a component change. Happy to open one if you'd rather have the channel.
Validation
pnpm --filter @universal/preview test— 20 passing, including the new viewport, reload, retention, and in-place-retry coveragepnpm --filter @universal/preview typecheck,lint(clean),buildpnpm format:checkNot run: a rendered pass against a live runtime. The new controls only appear in the ready state, which needs a generated build; they are covered by component tests instead. Worth a rendered check before merge if you have a runtime handy.
Stacking
Based on
agent/issue-53-preview-tests(#91), which adds the Vitest setup these tests need. Merge that first; this diff is only the app change plus its tests and README section.Closes #58.
🤖 Generated with Claude Code