Real App Snapshots for Ditto Landing Renderings

Date: 2026-05-14

Summary

Ditto's landing-page product renderings were updated so they no longer rely on hand-built mock UI components. The snapshot pipeline now renders the real Ditto app in simulator mode, drives it into representative product states, captures browser pixels, and packages those captures as static HTML files for the landing site.

Why This Changed

The previous renderings looked close to the production app, but they were implemented as separate mock components. That meant small visual details could drift from the real app: spacing, controls, message chrome, sidebars, mobile layout, live mode, and dark-mode behavior.

The goal was to make the app itself the visual source of truth.

What Changed

• The fake snapshot component set was removed from the simulator snapshot path.
• The snapshot generator now starts the real Vite simulator app with Playwright.
• Snapshot URLs use query parameters such as snapshot=chat and snapshotTheme=dark to drive the app into deterministic states.
• The real app provider tree now includes a simulator-only snapshot controller that can open chat, files, live mode, mobile chat, mobile files, and tablet agent states.
• Live mode gets a simulator fixture so it can render the real live-mode UI without a websocket session.
• Simulator captures disable dev-only overlays such as Solid Grab and TanStack Query Devtools.
• Landing-astro receives refreshed static snapshot HTML files generated from those real app captures.

Quality Fixes From The Polish Audit

• Removed visible dev badges from captures.
• Fixed the tablet snapshot so it opens the centered agent home state instead of a cropped mid-scroll chat state.
• Verified mobile chat, mobile files, desktop chat, files, live mode, and dark-mode renderings in browser.
• Verified the hosted Firebase preview in both light and dark modes.

Validation

Ditto app checks passed:

• bun check
• bun typecheck
• bun run build:simulator

Landing site checks passed:

• bun run format:check
• bun lint
• bun run build
• bun run depcheck

GitHub PR checks passed for both PRs:

• ditto-app PR #1252
• landing-astro PR #300

Result

The landing product showcase now uses renderings generated from real Ditto app code, reducing visual drift and making the simulator snapshot workflow the reusable source of truth for future product screenshots.