[brentvatne]

Stacked on #78.

compare:flows --report DIR writes a report that opens on a new Flows view in the Viewer. Host it with report:upload DIR.

Preview: a euxy two-build review: https://brents-expo-explore--q4b86f38r7.expo.app/p/ampb2i7u7x6y7jdhvzqiztf75cihau3s. The demo runs were made before steps were recorded, so the steps in this preview were added by hand.

What the view shows

• The list: each flow with what happened to it ("Stopped · 2 not reached", "3 changed").
  • Changed / All filter the list. Changed keeps every flow with a change and every run that stopped.
  • The open flow lists its checkpoints.
• The flow: a filmstrip of its checkpoints, opening at its first problem. It is the same filmstrip as Screens, so swiping, wheel, clicking a neighbour and the status outlines all work as there.
• Above the frame in the middle:
  • the steps that led to it, with the step the run failed at;
  • its name and status;
  • when every changed area is about one line of text tall, the text that changed (“Output latency”, was “Latency offset”); otherwise the reason the run stopped, if it did.
• The flow bar: the flow's name and Before | After (X), which flips every picture in place.
• Keys: ← and → step through the checkpoints, J and K through the changed areas. Flows itself is P or ⌃4.
• Nothing is saved: the filter, the open flow and the checkpoint shown last only as long as the page is open.

Changes

• Runs record steps: a flows run records each flow's steps (actions, described steps, checkpoints) and the step it failed at (ExplorationFlow.steps, failedStep).
• The report: review/flow-review.ts builds flowReview, a report field the Viewer reads (contract in contracts/flow-comparison.ts).
  • It is written into the after run's report, with both builds' checkpoint screenshots.
  • Each side's screen text comes from the run's accessibility artifacts (labels and values).
  • It refuses to write into either run's own folder.
• Viewer:
  • views/flows.tsx and utils/flows-model.ts;
  • the Screens filmstrip moved to components/shared/filmstrip.tsx, and Screens wraps it;
  • toolbar, phone tab bar, commands and shortcuts dialog list Flows only in a report that has a review;
  • a /flows link without one opens the Map.

Tests

• New: flows-model (filter, marks, status lines, steps before a checkpoint, text changes, the one-line text change).
• Updated:
  • the review report (assets, before screenshots, text, refusing a run's folder);
  • step recording;
  • navigation and toolbar order.
• Results:
  • npm test passes (1752 tests);
  • tsc is clean;
  • lint shows only the 6 existing Viewer warnings;
  • the 5 Screens filmstrip e2e tests pass on the shared filmstrip.
• By hand: desktop light and dark, and phone, with no console errors.

🤖 Generated with Claude Code

[github-actions]

Viewer preview of b48a228 · reports from brentvatne/euxy#163

Report	Changes	Open
Android · sdk_gphone64_x86_64 15.0	5	Map · Screens · Compare
iPhone 17 · iPhone 17 26.5 · light + dark	11	Map · Screens · Compare
iPhone Duo (closed) · iPhone Duo 27.1 · light + dark	34	Map · Screens · Compare
iPhone Duo (open) · iPhone Duo 27.1 · light + dark	34	Map · Screens · Compare

Going live: this link can take up to 5 minutes to show b48a228; until then it shows the previous push, or nothing on a new pull request. This push's deployment is live now.

The link stays the same on every push. Deploy run