feat(mobile): add live preview and markup - #5161
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
There was a problem hiding this comment.
Effect service review found one convention issue: the new PreviewLiveGateway service is wired by passing its resolved instance into layer factories instead of being acquired from the Effect environment. Everything else in the changed Effect code (module namespace imports, Context.Service with an inline interface, make/layer ordering, Schema.TaggedErrorClass failures with derived messages) matches the conventions.
Posted via Macroscope — Effect Service Conventions
There was a problem hiding this comment.
One finding: a real decode failure is dropped when translating to PreviewReviewSnapshotMalformedError. Everything else in the new Effect service code (the PreviewLiveGateway tag/make/makeLive/liveLayer module, the gateway HTTP route and middleware layers, and the review-snapshot compaction) now acquires its dependencies from the environment and follows the namespace-import and error-modeling conventions.
Posted via Macroscope — Effect Service Conventions
There was a problem hiding this comment.
Reviewed the Effect service surfaces in this PR (apps/server/src/preview/LiveGateway.ts, LiveGatewayHttp.ts, ReviewSnapshot.ts, ws.ts, server.ts, and the new mobile/client-runtime modules).
The service definition, dependency acquisition, and error modelling now look consistent with the conventions: PreviewLiveGateway is a single-file Context.Service with an inline interface, liveGatewayBootstrapRouteLayer / liveGatewayProxyLayer / websocketRpcRouteLayer acquire the tag from the environment, the canonical layer is provided once in server.ts, and PreviewReviewSnapshotMalformedError now preserves the decode cause alongside its structural fields.
Two remaining naming findings on the new gateway module are noted inline.
Posted via Macroscope — Effect Service Conventions
| return gateway; | ||
| }); | ||
|
|
||
| export const liveLayer = Layer.effect(PreviewLiveGateway, makeLive); |
There was a problem hiding this comment.
This module owns a single concrete implementation, so its canonical exports should be make and layer; makeLive/liveLayer is the only such pair under apps/server/src (every other service exports export const layer = Layer.effect(Tag, make)).
Suggest folding the SessionStore subscription into make and exporting export const layer = Layer.effect(PreviewLiveGateway, make), with LiveGateway.test.ts providing a test SessionStore layer. If you prefer to keep the unsupervised constructor as a test seam, renaming just liveLayer → layer (and its two call sites in server.ts / server.test.ts) also resolves this.
Posted via Macroscope — Effect Service Conventions
1 participant
What changed
Why
Mobile could see preview metadata but could not reliably browse, annotate, or refresh the active desktop preview. Loopback URLs were unreachable from iPad, remote paths lacked an authenticated bridge, and URL normalization changed Vite flag queries such as
?urlinto?url=, preventing the client entry from hydrating and registering JavaScript HMR modules.Impact
Users can review the active app from iPad, work across local network, Tailscale, or T3 Connect paths, annotate a frozen frame, and send both the rendered image and source-aware context to an agent. Browser state remains isolated per mobile WebView while preview tab metadata stays synchronized through the existing server model.
Validation
Implemented with GPT-5.6-Sol through the Codex harness.
Note
Add live preview gateway and image markup to mobile app
MobileLivePreviewWebView component with DOM capture, navigation controls, and aThreadPreviewRouteScreenthat renders inline or fullscreen depending on layout.LiveGateway,LiveGatewayHttp) that issues single-use bootstrap tokens and leases to securely proxy loopback desktop preview servers to mobile clients over HTTPS.previewReviewSnapshot(compact, bounded snapshot for review) andpreviewOpenLiveGateway(returns a short-lived bootstrap URL); both require the orchestration operate scope.ImageMarkupModallets users draw callouts on draft images; annotated attachments are flattened to PNG and stored with the original for re-editing; annotation prompts are appended to outgoing messages.PreviewManagerwith areviewsnapshot mode that omits accessibility trees and diagnostics, caps screenshot pixels to ~2M, and normalizes interactive elements.scopesandproof_key_thumbprintauth columns on databases that missed prior migrations.📊 Macroscope summarized a77ca3f. 78 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted
🗂️ Filtered Issues
No issues evaluated.