peachsim 0.1.939 → 0.1.1399

package/cli/maestro-compare.ts

@@ -0,0 +1,670 @@
+// maestro compare: the same maestro flows run on the partner's own iOS
+// simulator under real maestro and on peach, paired screen by screen. this
+// file holds the pieces with no device: flow instrumentation, step timing
+// from both commands.json shapes, the three-panel pixel diff, and the html
+// report. commands/maestro-compare.ts runs the two sides.
+
+import * as path from 'path'
+import pixelmatch from 'pixelmatch'
+import { PNG } from 'pngjs'
+import yaml from 'yaml'
+
+// injected captures live under this screenshot path on both sides, so they
+// pair by name and never collide with the flow's own takeScreenshot names.
+export const COMPARE_SHOT_DIR = 'peach-compare'
+
+// steps that leave the screen as it was, or leave no app on screen: every
+// other top-level step is followed by a capture. maestro's ios launchApp
+// returns while the launch zoom still shows the home screen, so its capture
+// would compare springboard to the app; the next step's capture is the first
+// app frame.
+const NO_CAPTURE_STEPS = new Set([
+  'launchApp',
+  'takeScreenshot',
+  'runScript',
+  'evalScript',
+  'setClipboard',
+  'assertTrue',
+  'startRecording',
+  'stopRecording',
+  'addMedia',
+  'setLocation',
+  'travel',
+  'stopApp',
+  'killApp',
+  'clearState',
+  'clearKeychain',
+  'setAirplaneMode',
+  'toggleAirplaneMode',
+])
+
+export interface CompareCapture {
+  // screenshot name both sides write (no extension)
+  name: string
+  // 1-based index of the flow's own top-level step the capture follows
+  step: number
+  label: string
+}
+
+function stepKey(step: unknown): string | null {
+  if (typeof step === 'string') return step
+  if (step && typeof step === 'object' && !Array.isArray(step)) {
+    return Object.keys(step)[0] ?? null
+  }
+  return null
+}
+
+function stepTarget(step: unknown): string {
+  if (!step || typeof step !== 'object' || Array.isArray(step)) return ''
+  const value = (step as Record<string, unknown>)[stepKey(step) ?? '']
+  if (typeof value === 'string' || typeof value === 'number') return String(value)
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const v = value as Record<string, unknown>
+    for (const key of [
+      'text',
+      'id',
+      'label',
+      'file',
+      'link',
+      'url',
+      'direction',
+      'point',
+    ]) {
+      if (typeof v[key] === 'string' || typeof v[key] === 'number') return String(v[key])
+    }
+    if (v.visible) return stepTarget({ visible: v.visible })
+  }
+  return ''
+}
+
+export function stepLabel(step: unknown): string {
+  const key = stepKey(step) ?? 'step'
+  const target = stepTarget(step)
+  return target ? `${key} ${target}` : key
+}
+
+function slugify(value: string): string {
+  return (
+    value
+      .replace(/[^A-Za-z0-9._-]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .slice(0, 48) || 'step'
+  )
+}
+
+// relative subflow, script and media paths resolve against the flow file. the
+// instrumented copy lives elsewhere, so they become absolute paths to the
+// originals (both maestro and peach resolve an absolute path as is).
+function absolutizeRefs(steps: unknown, flowDir: string): unknown {
+  if (!Array.isArray(steps)) return steps
+  const abs = (p: unknown) =>
+    typeof p === 'string' && !path.isAbsolute(p) && !p.includes('${')
+      ? path.resolve(flowDir, p)
+      : p
+  return steps.map((step) => {
+    if (!step || typeof step !== 'object' || Array.isArray(step)) return step
+    const out: Record<string, unknown> = { ...(step as Record<string, unknown>) }
+    for (const key of ['runFlow', 'runScript', 'retry', 'repeat']) {
+      const value = out[key]
+      if (key !== 'repeat' && key !== 'retry' && typeof value === 'string') {
+        out[key] = abs(value)
+      } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+        const v = { ...(value as Record<string, unknown>) }
+        if ('file' in v) v.file = abs(v.file)
+        if (Array.isArray(v.commands)) v.commands = absolutizeRefs(v.commands, flowDir)
+        out[key] = v
+      }
+    }
+    if (Array.isArray(out.addMedia)) out.addMedia = out.addMedia.map(abs)
+    return out
+  })
+}
+
+// insert one capture after every screen-changing top-level step. subflows run
+// as one step and are captured once, after they return.
+export function instrumentFlowSource(
+  source: string,
+  flowDir: string,
+): { source: string; captures: CompareCapture[] } {
+  const docs = yaml.parseAllDocuments(source).map((doc) => {
+    if (doc.errors.length > 0) throw new Error(doc.errors[0]!.message)
+    return doc.toJS() as unknown
+  })
+  let header: Record<string, unknown> | null = null
+  let commands: unknown[] | null = null
+  if (docs.length >= 2) {
+    header = (docs[0] as Record<string, unknown>) ?? {}
+    commands = Array.isArray(docs[1]) ? docs[1] : []
+  } else if (Array.isArray(docs[0])) {
+    commands = docs[0]
+  } else {
+    throw new Error('flow has no command list after its header')
+  }
+  if (header) {
+    header = { ...header }
+    for (const hook of ['onFlowStart', 'onFlowComplete']) {
+      if (Array.isArray(header[hook]))
+        header[hook] = absolutizeRefs(header[hook], flowDir)
+    }
+  }
+  const captures: CompareCapture[] = []
+  const out: unknown[] = []
+  for (const [index, step] of (
+    absolutizeRefs(commands, flowDir) as unknown[]
+  ).entries()) {
+    out.push(step)
+    const key = stepKey(step)
+    if (!key || NO_CAPTURE_STEPS.has(key)) continue
+    const label = stepLabel(step)
+    const name = `${COMPARE_SHOT_DIR}/${String(captures.length + 1).padStart(3, '0')}-${slugify(label)}`
+    captures.push({ name, step: index + 1, label })
+    out.push({ takeScreenshot: name })
+  }
+  const body = yaml.stringify(out, { lineWidth: 0 })
+  return {
+    source: header ? `${yaml.stringify(header, { lineWidth: 0 })}---\n${body}` : body,
+    captures,
+  }
+}
+
+export interface CompareStep {
+  label: string
+  status: 'passed' | 'failed' | 'skipped'
+  durationMs: number
+  error?: string
+}
+
+const NATIVE_COMMAND_NAMES: Record<string, string> = {
+  tapOnElement: 'tapOn',
+  tapOnPointV2: 'tapOn',
+  backPress: 'back',
+  inputText: 'inputText',
+  inputRandomText: 'inputRandomText',
+  eraseText: 'eraseText',
+  scrollUntilVisible: 'scrollUntilVisible',
+}
+
+function nativeSelectorText(value: unknown): string {
+  if (!value || typeof value !== 'object') return ''
+  const v = value as Record<string, unknown>
+  const selector = (v.selector ?? v.element ?? v.condition) as
+    | Record<string, unknown>
+    | undefined
+  const pick = (o: Record<string, unknown> | undefined): string => {
+    if (!o) return ''
+    for (const key of ['textRegex', 'idRegex', 'text', 'id']) {
+      if (typeof o[key] === 'string') return o[key] as string
+    }
+    for (const key of ['visible', 'notVisible']) {
+      const inner = pick(o[key] as Record<string, unknown> | undefined)
+      if (inner) return inner
+    }
+    return ''
+  }
+  return (
+    pick(selector) ||
+    ['text', 'path', 'appId', 'link', 'sourceDescription', 'direction']
+      .map((key) => (typeof v[key] === 'string' ? (v[key] as string) : ''))
+      .find(Boolean) ||
+    ''
+  )
+}
+
+export function describeNativeCommand(command: unknown): string {
+  if (!command || typeof command !== 'object') return 'step'
+  const key = Object.keys(command)[0] ?? 'step'
+  const base = key.replace(/Command$/, '')
+  const value = (command as Record<string, unknown>)[key] as
+    | Record<string, any>
+    | undefined
+  const name =
+    base === 'assertCondition'
+      ? value?.condition?.notVisible
+        ? 'assertNotVisible'
+        : 'assertVisible'
+      : (NATIVE_COMMAND_NAMES[base] ?? base)
+  const target = nativeSelectorText(value)
+  return target ? `${name} ${target}` : name
+}
+
+const NATIVE_BOOKKEEPING = new Set([
+  'applyConfigurationCommand',
+  'defineVariablesCommand',
+])
+
+function isInjectedShot(label: string): boolean {
+  return label.includes(`${COMPARE_SHOT_DIR}/`)
+}
+
+// real maestro's per-flow commands.json: top-level commands only, without its
+// config bookkeeping and without the injected captures that passed (a failed
+// capture is a real failure of the run and stays).
+export function nativeStepsFromCommandsJson(json: unknown): CompareStep[] {
+  if (!Array.isArray(json)) return []
+  const steps: CompareStep[] = []
+  for (const entry of json as Array<Record<string, any>>) {
+    const command = entry?.command
+    const metadata = entry?.metadata ?? {}
+    if (!command || typeof command !== 'object') continue
+    const key = Object.keys(command)[0] ?? ''
+    if (NATIVE_BOOKKEEPING.has(key)) continue
+    if (typeof metadata.depth === 'number' && metadata.depth > 0) continue
+    const raw = String(metadata.status ?? '')
+    const status = raw === 'FAILED' ? 'failed' : raw === 'SKIPPED' ? 'skipped' : 'passed'
+    const injected =
+      key === 'takeScreenshotCommand' && isInjectedShot(String(command[key]?.path ?? ''))
+    if (injected && status !== 'failed') continue
+    const label = describeNativeCommand(metadata.evaluatedCommand ?? command)
+    const error =
+      metadata.error?.message ??
+      (typeof metadata.error === 'string' ? metadata.error : undefined)
+    steps.push({
+      label,
+      status,
+      durationMs: typeof metadata.duration === 'number' ? metadata.duration : 0,
+      ...(error ? { error: String(error) } : {}),
+    })
+  }
+  return steps
+}
+
+// peach's commands.json (maestro-report.ts buildFlowCommandsJson)
+export function peachStepsFromCommandsJson(json: unknown): CompareStep[] {
+  if (!Array.isArray(json)) return []
+  return (json as Array<Record<string, any>>)
+    .filter(
+      (entry) =>
+        entry?.status === 'failure' || !isInjectedShot(String(entry?.command ?? '')),
+    )
+    .map((entry) => ({
+      label: String(entry.command ?? 'step'),
+      status:
+        entry.status === 'failure'
+          ? 'failed'
+          : entry.status === 'skipped'
+            ? 'skipped'
+            : 'passed',
+      durationMs: typeof entry.durationMs === 'number' ? entry.durationMs : 0,
+      ...(entry.error ? { error: String(entry.error) } : {}),
+    }))
+}
+
+export interface ScreenDiff {
+  width: number
+  height: number
+  diffPixels: number
+  diffPercent: number
+  // peach's capture was resampled to the iOS capture's size
+  resized: boolean
+  // the two captures have different aspect ratios (different devices)
+  aspectMismatch: boolean
+  // rows at the top left out of the score: the status bar, which shows the
+  // system clock and the dynamic island rather than the app
+  maskedTopPx: number
+}
+
+function resample(src: PNG, width: number, height: number): PNG {
+  const out = new PNG({ width, height })
+  const sx = src.width / width
+  const sy = src.height / height
+  for (let y = 0; y < height; y++) {
+    const fy = Math.min(src.height - 1, (y + 0.5) * sy - 0.5)
+    const y0 = Math.max(0, Math.floor(fy))
+    const y1 = Math.min(src.height - 1, y0 + 1)
+    const wy = Math.max(0, fy - y0)
+    for (let x = 0; x < width; x++) {
+      const fx = Math.min(src.width - 1, (x + 0.5) * sx - 0.5)
+      const x0 = Math.max(0, Math.floor(fx))
+      const x1 = Math.min(src.width - 1, x0 + 1)
+      const wx = Math.max(0, fx - x0)
+      const o = (y * width + x) * 4
+      for (let c = 0; c < 4; c++) {
+        const a = src.data[(y0 * src.width + x0) * 4 + c]!
+        const b = src.data[(y0 * src.width + x1) * 4 + c]!
+        const d = src.data[(y1 * src.width + x0) * 4 + c]!
+        const e = src.data[(y1 * src.width + x1) * 4 + c]!
+        out.data[o + c] = Math.round(
+          (a * (1 - wx) + b * wx) * (1 - wy) + (d * (1 - wx) + e * wx) * wy,
+        )
+      }
+    }
+  }
+  return out
+}
+
+// integer box downscale into dst at (left, 0). diff panels keep any red diff
+// pixel in a block, so a one-pixel difference survives the shrink.
+function drawDownscaled(
+  dst: PNG,
+  src: PNG,
+  factor: number,
+  left: number,
+  keepRed: boolean,
+) {
+  const w = Math.floor(src.width / factor)
+  const h = Math.floor(src.height / factor)
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      let r = 0
+      let g = 0
+      let b = 0
+      let red = false
+      for (let dy = 0; dy < factor; dy++) {
+        for (let dx = 0; dx < factor; dx++) {
+          const i = ((y * factor + dy) * src.width + x * factor + dx) * 4
+          const pr = src.data[i]!
+          const pg = src.data[i + 1]!
+          const pb = src.data[i + 2]!
+          if (keepRed && pr === 255 && pg === 0 && pb === 0) red = true
+          r += pr
+          g += pg
+          b += pb
+        }
+      }
+      const n = factor * factor
+      const o = (y * dst.width + left + x) * 4
+      dst.data[o] = red ? 255 : Math.round(r / n)
+      dst.data[o + 1] = red ? 0 : Math.round(g / n)
+      dst.data[o + 2] = red ? 0 : Math.round(b / n)
+      dst.data[o + 3] = 255
+    }
+  }
+}
+
+export const TRIPTYCH_GAP = 24
+
+// pixel diff at the iOS capture's full resolution, then one image holding the
+// iOS capture, peach's capture and the diff side by side.
+export function compareScreens(
+  nativePng: Buffer,
+  peachPng: Buffer,
+  opts: { maskTopPx?: number } = {},
+): { diff: ScreenDiff; triptych: Buffer } {
+  const native = PNG.sync.read(nativePng)
+  let peach: PNG = PNG.sync.read(peachPng)
+  const { width, height } = native
+  const aspectMismatch = Math.abs(peach.width / peach.height - width / height) > 0.01
+  const resized = peach.width !== width || peach.height !== height
+  if (resized) peach = resample(peach, width, height)
+  const maskedTopPx = Math.min(height, Math.max(0, Math.round(opts.maskTopPx ?? 0)))
+  const scored = height - maskedTopPx
+  const offset = maskedTopPx * width * 4
+  const diffImage = new PNG({ width, height })
+  // the masked band reads as plain light gray in the diff panel
+  diffImage.data.fill(235, 0, offset)
+  for (let i = 3; i < offset; i += 4) diffImage.data[i] = 255
+  const diffPixels =
+    scored > 0
+      ? pixelmatch(
+          native.data.subarray(offset),
+          peach.data.subarray(offset),
+          diffImage.data.subarray(offset),
+          width,
+          scored,
+          { threshold: 0.1 },
+        )
+      : 0
+  const factor = width >= 1000 ? 2 : 1
+  const panelWidth = Math.floor(width / factor)
+  const panelHeight = Math.floor(height / factor)
+  const out = new PNG({ width: panelWidth * 3 + TRIPTYCH_GAP * 2, height: panelHeight })
+  out.data.fill(255)
+  drawDownscaled(out, native, factor, 0, false)
+  drawDownscaled(out, peach, factor, panelWidth + TRIPTYCH_GAP, false)
+  drawDownscaled(out, diffImage, factor, (panelWidth + TRIPTYCH_GAP) * 2, true)
+  return {
+    diff: {
+      width,
+      height,
+      diffPixels,
+      diffPercent: scored > 0 ? (diffPixels / (width * scored)) * 100 : 0,
+      resized,
+      aspectMismatch,
+      maskedTopPx,
+    },
+    triptych: PNG.sync.write(out),
+  }
+}
+
+export interface CompareSide {
+  status: 'passed' | 'failed' | 'not run'
+  durationMs: number
+  steps: CompareStep[]
+  errors: string[]
+}
+
+export interface CompareScreen {
+  name: string
+  step: number
+  label: string
+  // report-relative path of the three-panel image
+  image?: string
+  // report-relative path of a capture only one side produced
+  nativeOnly?: string
+  peachOnly?: string
+  diff?: ScreenDiff
+}
+
+export interface CompareFlow {
+  name: string
+  file: string
+  native: CompareSide
+  peach: CompareSide
+  screens: CompareScreen[]
+}
+
+export interface CompareReport {
+  createdAt: string
+  device: string
+  thresholdPercent: number
+  flows: CompareFlow[]
+}
+
+export function screensOverThreshold(report: CompareReport) {
+  return report.flows.flatMap((flow) =>
+    flow.screens
+      .filter((s) => s.diff && s.diff.diffPercent > report.thresholdPercent)
+      .map((screen) => ({ flow, screen })),
+  )
+}
+
+// a compare passes when both sides pass every flow, every capture pairs, and
+// no screen differs by more than the threshold.
+export function comparePassed(report: CompareReport): boolean {
+  return (
+    report.flows.length > 0 &&
+    report.flows.every(
+      (flow) =>
+        flow.native.status === 'passed' &&
+        flow.peach.status === 'passed' &&
+        flow.screens.every((s) => s.diff),
+    ) &&
+    screensOverThreshold(report).length === 0
+  )
+}
+
+function esc(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function seconds(ms: number): string {
+  return `${(ms / 1000).toFixed(ms < 10_000 ? 2 : 1)}s`
+}
+
+function percent(value: number): string {
+  return value === 0 ? '0%' : value < 0.01 ? '<0.01%' : `${value.toFixed(2)}%`
+}
+
+function statusPill(side: CompareSide): string {
+  const cls = side.status === 'passed' ? 'ok' : 'bad'
+  return `<span class="pill ${cls}">${esc(side.status)}</span>`
+}
+
+function deltaCell(native: number, peach: number): string {
+  if (!native && !peach) return '<td class="num"></td>'
+  const delta = peach - native
+  const cls = delta > 250 ? 'slower' : delta < -250 ? 'faster' : ''
+  return `<td class="num ${cls}">${delta >= 0 ? '+' : '−'}${seconds(Math.abs(delta))}</td>`
+}
+
+function timingTable(flow: CompareFlow): string {
+  const rows: string[] = []
+  const count = Math.max(flow.native.steps.length, flow.peach.steps.length)
+  for (let i = 0; i < count; i++) {
+    const n = flow.native.steps[i]
+    const p = flow.peach.steps[i]
+    const failed = n?.status === 'failed' || p?.status === 'failed'
+    rows.push(
+      `<tr${failed ? ' class="failed"' : ''}><td class="num">${i + 1}</td><td>${esc(p?.label ?? n?.label ?? '')}</td>` +
+        `<td class="num">${n ? seconds(n.durationMs) : '–'}</td><td class="num">${p ? seconds(p.durationMs) : '–'}</td>` +
+        `${n && p ? deltaCell(n.durationMs, p.durationMs) : '<td></td>'}</tr>`,
+    )
+  }
+  return `<table class="timing"><thead><tr><th>#</th><th>step</th><th>iOS</th><th>Peach</th><th>Peach vs iOS</th></tr></thead><tbody>${rows.join('')}</tbody>
+<tfoot><tr><td></td><td>flow total</td><td class="num">${seconds(flow.native.durationMs)}</td><td class="num">${seconds(flow.peach.durationMs)}</td>${deltaCell(flow.native.durationMs, flow.peach.durationMs)}</tr></tfoot></table>`
+}
+
+function errorList(flow: CompareFlow): string {
+  const items = [
+    ...flow.native.errors.map((e) => ({ side: 'iOS', text: e })),
+    ...flow.peach.errors.map((e) => ({ side: 'Peach', text: e })),
+  ]
+  if (items.length === 0) return '<p class="quiet">No errors on either side.</p>'
+  return `<ul class="errors">${items
+    .map((e) => `<li><span class="side">${e.side}</span><pre>${esc(e.text)}</pre></li>`)
+    .join('')}</ul>`
+}
+
+function screenCard(screen: CompareScreen, threshold: number, flowIndex: number): string {
+  const id = `f${flowIndex}-${screen.name.split('/').pop()}`
+  const over = screen.diff ? screen.diff.diffPercent > threshold : true
+  const badge = screen.diff
+    ? `<span class="pill ${over ? 'bad' : 'ok'}">${percent(screen.diff.diffPercent)} differ</span>`
+    : `<span class="pill bad">${screen.nativeOnly ? 'missing on Peach' : screen.peachOnly ? 'missing on iOS' : 'missing on both'}</span>`
+  const notes = [
+    screen.diff?.aspectMismatch
+      ? 'different aspect ratio: the two runs used different devices'
+      : '',
+    screen.diff?.resized && !screen.diff.aspectMismatch
+      ? 'Peach capture resampled to the iOS size'
+      : '',
+    screen.diff?.maskedTopPx ? 'status bar left out of the score' : '',
+  ].filter(Boolean)
+  let body = ''
+  if (screen.image) {
+    body = `<div class="cols"><span>iOS simulator</span><span>Peach</span><span>pixel diff</span></div>
+<a href="${esc(screen.image)}" target="_blank"><img loading="lazy" src="${esc(screen.image)}" alt="${esc(screen.label)}"></a>`
+  } else {
+    const only = screen.nativeOnly ?? screen.peachOnly
+    body = only
+      ? `<div class="cols one"><span>${screen.nativeOnly ? 'iOS simulator' : 'Peach'} only</span></div><a href="${esc(only)}" target="_blank"><img class="single" loading="lazy" src="${esc(only)}" alt="${esc(screen.label)}"></a>`
+      : '<p class="quiet">Neither side reached this step.</p>'
+  }
+  return `<figure class="screen${over ? ' over' : ''}" id="${esc(id)}"><figcaption><span class="step">after step ${screen.step}</span> ${esc(screen.label)} ${badge}${notes.map((n) => `<span class="note">${esc(n)}</span>`).join('')}</figcaption>${body}</figure>`
+}
+
+export function buildCompareHtml(report: CompareReport): string {
+  const screens = report.flows.flatMap((f) => f.screens)
+  const compared = screens.filter((s) => s.diff)
+  const over = screensOverThreshold(report).sort(
+    (a, b) => b.screen.diff!.diffPercent - a.screen.diff!.diffPercent,
+  )
+  const nativePassed = report.flows.filter((f) => f.native.status === 'passed').length
+  const peachPassed = report.flows.filter((f) => f.peach.status === 'passed').length
+  const nativeMs = report.flows.reduce((sum, f) => sum + f.native.durationMs, 0)
+  const peachMs = report.flows.reduce((sum, f) => sum + f.peach.durationMs, 0)
+  const peachErrors = report.flows.reduce((sum, f) => sum + f.peach.errors.length, 0)
+  const nativeErrors = report.flows.reduce((sum, f) => sum + f.native.errors.length, 0)
+  const verdict = comparePassed(report)
+  const flowIndex = new Map(report.flows.map((f, i) => [f, i]))
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Maestro compare</title>
+<style>
+:root { --bg: #fafaf9; --card: #fff; --ink: #1c1917; --quiet: #78716c; --line: #e7e5e4; --ok: #15803d; --ok-bg: #dcfce7; --bad: #b91c1c; --bad-bg: #fee2e2; --slower: #b45309; --faster: #15803d; }
+@media (prefers-color-scheme: dark) { :root { --bg: #0c0a09; --card: #1c1917; --ink: #f5f5f4; --quiet: #a8a29e; --line: #292524; --ok: #4ade80; --ok-bg: #14532d; --bad: #fca5a5; --bad-bg: #7f1d1d; --slower: #fbbf24; --faster: #4ade80; } }
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }
+main { max-width: 1280px; margin: 0 auto; padding: 32px 16px 64px; }
+h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -0.02em; }
+h2 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
+h3 { font-size: 15px; margin: 24px 0 8px; color: var(--quiet); font-weight: 600; }
+.sub { color: var(--quiet); margin: 0 0 24px; }
+.verdict { display: inline-block; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin-bottom: 16px; }
+.verdict.ok { background: var(--ok-bg); color: var(--ok); } .verdict.bad { background: var(--bad-bg); color: var(--bad); }
+.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 32px; }
+.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
+.stat b { display: block; font-size: 22px; letter-spacing: -0.02em; } .stat span { color: var(--quiet); font-size: 13px; }
+.worst { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px; margin-bottom: 32px; }
+.worst li { margin: 6px 0; } .worst a { color: inherit; }
+section.flow { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 24px; }
+.flowhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
+.flowhead code { color: var(--quiet); font-size: 13px; }
+.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
+.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.bad { background: var(--bad-bg); color: var(--bad); }
+.errors { list-style: none; padding: 0; margin: 0; } .errors li { display: flex; gap: 10px; margin: 6px 0; }
+.errors .side { flex: none; width: 48px; font-size: 12px; font-weight: 600; color: var(--bad); padding-top: 3px; }
+.errors pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.quiet { color: var(--quiet); margin: 0; }
+details summary { cursor: pointer; color: var(--quiet); font-weight: 600; margin: 24px 0 8px; }
+table.timing { width: 100%; border-collapse: collapse; font-size: 13px; }
+.timing th, .timing td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }
+.timing .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.timing tr.failed td { color: var(--bad); } .timing tfoot td { font-weight: 600; border-bottom: none; }
+.slower { color: var(--slower); } .faster { color: var(--faster); }
+.screens { display: grid; gap: 20px; }
+figure.screen { margin: 0; border-top: 1px solid var(--line); padding-top: 16px; }
+figcaption { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; font-weight: 600; }
+figcaption .step { color: var(--quiet); font-weight: 500; } figcaption .note { color: var(--quiet); font-weight: 400; font-size: 13px; }
+.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.33%; color: var(--quiet); font-size: 12px; text-align: center; margin-bottom: 4px; }
+.cols.one { grid-template-columns: 1fr; text-align: left; }
+figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
+figure img.single { width: 33%; }
+</style>
+</head>
+<body>
+<main>
+<h1>Maestro compare</h1>
+<p class="sub">${esc(new Date(report.createdAt).toUTCString())} · ${esc(report.device)} · screens over ${report.thresholdPercent}% are flagged</p>
+<div class="verdict ${verdict ? 'ok' : 'bad'}">${verdict ? 'Peach matches iOS on every screen' : 'Peach differs from iOS: see below'}</div>
+<div class="stats">
+<div class="stat"><b>${nativePassed}/${report.flows.length} · ${peachPassed}/${report.flows.length}</b><span>flows passed on iOS · on Peach</span></div>
+<div class="stat"><b>${compared.length}/${screens.length}</b><span>screens compared</span></div>
+<div class="stat"><b>${over.length}</b><span>screens over ${report.thresholdPercent}%</span></div>
+<div class="stat"><b>${seconds(nativeMs)} · ${seconds(peachMs)}</b><span>run time on iOS · on Peach</span></div>
+<div class="stat"><b>${nativeErrors} · ${peachErrors}</b><span>errors on iOS · on Peach</span></div>
+</div>
+${
+  over.length
+    ? `<h3>Screens that differ most</h3><ol class="worst">${over
+        .map(
+          ({ flow, screen }) =>
+            `<li><a href="#f${flowIndex.get(flow)}-${esc(screen.name.split('/').pop()!)}">${esc(flow.name)}: ${esc(screen.label)}</a> · ${percent(screen.diff!.diffPercent)}</li>`,
+        )
+        .join('')}</ol>`
+    : ''
+}
+${report.flows
+  .map(
+    (flow, i) => `<section class="flow">
+<div class="flowhead"><h2>${esc(flow.name)}</h2><span>iOS ${statusPill(flow.native)}</span><span>Peach ${statusPill(flow.peach)}</span><code>${esc(flow.file)}</code></div>
+<h3>Errors</h3>
+${errorList(flow)}
+<details><summary>Step timing</summary>${timingTable(flow)}</details>
+<h3>Screens</h3>
+<div class="screens">${flow.screens.map((s) => screenCard(s, report.thresholdPercent, i)).join('')}</div>
+</section>`,
+  )
+  .join('\n')}
+</main>
+</body>
+</html>
+`
+}