[bjacobso]

Replaces the homepage hero's static decision receipt with an animated walkthrough of the client. Stacked on #87; it retargets to main when #87 merges.

What it shows

The hero autoplays five steps, about 5 s each. Each step shows real code and its result:

1. Model: EntityType.make("Worker", { name, site }) → release workers-v1 published to live.
2. Hire: db.command(...) with tx.create → two facts appear, from tx 2 by user:dana.
3. Move: tx.replace(..., { site: "pier" }, JUN_1) → harbor's open-ended fact is retracted and replaced by harbor Mar 2 – Jun 1 plus pier from Jun 1. Nothing is overwritten.
4. Correct: tx.correct(..., { name: "Maria Rivera" }) → "Maria" is struck through with the transaction that retracted it. It stays in history.
5. Ask: asOf at tx 2 / March 2 gives "Maria · harbor", and June 1 gives "Maria Rivera · pier". why names each value's transaction, actor and release.

It can't drift from the API

• The code in each step is cut from the checked program docs/snippets/home/hero.ts, formatted at 64 columns to fit the window.
• Every value comes from its saved output, docs/snippets/home/output/hero.json.
• pnpm docs:outputs --check, part of docs:check, now runs the hero program too. The new scripts/docs-outputs.mjs runs both homepage programs.

Behaviour

• Pauses on hover or keyboard focus and while the tab is hidden. The step buttons jump anywhere, and there is a play/pause control.
• With prefers-reduced-motion, there is no autoplay or animation. It shows the final step. Server-rendered HTML shows the final step too.
• Mobile: the steps stack, code scrolls sideways inside the pane, and the page never scrolls horizontally at 390 px.

Tests

• e2e: a new test steps through the replay and checks the facts, retractions and why text. Another checks the static reduced-motion rendering. Screenshots render with reduced motion so they're deterministic, and the baselines were regenerated in the Linux Playwright image.
• 14/14 e2e pass in that image, and docs:check, docs:build, format, lint and typecheck pass.

Found along the way (not fixed here)

The homepage's production "lean" page chunk is invalid JavaScript on main today, and the live site logs SyntaxError: Unexpected token '}'. VitePress 2.0.0-alpha.18 marks static HTML with a greedy one-line regex. Vite 8 has already minified the page onto one line, so the regex swallows the component between two static blocks. VitePress recovers by loading the full chunk, so the page still works; only the error is logged. The e2e suite runs on the dev server, so it can't catch this. It's worth its own fix: a VitePress upgrade or patch, plus a build check that runs node --check on every chunk in dist/assets.

Preview: posted by the docs preview workflow on this PR.

🤖 Generated with Claude Code

[github-actions]

Documentation preview: https://triplex-docs-pr-88.bjacobso.workers.dev

Commit: c96bf64

[bjacobso]

CI note: postgres-integration failed once on this PR and passed on rerun. This PR changes only docs and e2e files, so the failure is unrelated to it, but it looks like a real intermittent race and needs its own fix.

• Failing test: isolates concurrent organization databases across pooled connections
• Error: permission denied to create "pg_catalog.triplex_schema_migrations"
• Likely cause:
  • Each organization pool connects with search_path=<org schema>,pg_catalog.
  • When a statement runs and that schema isn't visible yet, Postgres creates unqualified objects in the first schema that exists, here pg_catalog.
  • So a migration ran before the organization's CREATE SCHEMA commit was visible, or on a different pool than the one that created it.
• Next step: a separate fix with a stress test that creates many organizations concurrently.

It passed in every local run and on #87's CI.

🤖 Generated with Claude Code