@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ConformanceScreen.tsx

@@ -0,0 +1,573 @@
+// M2.1 + M2.2 on-device conformance (specs/M2.1-BUILD-PACKET.md / specs/M2.2-BUILD-PACKET.md,
+// Milestone 4 of each). Precisely scoped: the scenario suites construct their OWN in-suite engines
+// (reference driver / nativeAdapter / fake engine) and are not engine-parameterized — running them
+// here is a SUITE-PORTABILITY claim (core + conformance execute unchanged on the device runtime),
+// NOT a Motion.View/worklet-driver rewiring; those are verified by their behavioral checks. The
+// M2.2 suites (SPRING / VALUE-TYPES / COMPONENT — counts rendered from the arrays) show per-suite
+// verdict COUNTS with only non-pass rows expanded, so one screenshot carries the whole table. When
+// the motion-dom oracle loads (it does on Hermes — pinned motion-dom@12.42.2, manual timing), the
+// spring/value-type runs are the REAL cross-engine comparisons from the vitest harness.
+//
+// The per-module conformance subpath imports are deliberate: the package INDEX eagerly re-exports
+// the motion-dom adapter, so importing it here would load the oracle at bundle-import time and
+// turn a Hermes incompatibility into a startup crash instead of the on-screen evidence the lazy
+// probe below produces. Every top-level import therefore names its module and motion-dom is only
+// touched inside `tryMotionDomAdapter`.
+
+import { useEffect, useRef, useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { createReferenceDriver, type ElementHandle } from '@unrulysystems/native-motion-core'
+import { nativeAdapter } from '@unrulysystems/native-motion-conformance/adapters/native'
+import type { EngineAdapter } from '@unrulysystems/native-motion-conformance/adapter'
+import {
+  compareEngines,
+  compareValueTypeSeries,
+} from '@unrulysystems/native-motion-conformance/comparator'
+import { SPRING_BAND } from '@unrulysystems/native-motion-conformance/config'
+import {
+  runSpringScenario,
+  runValueTypeScenario,
+  type ScenarioResult,
+} from '@unrulysystems/native-motion-conformance/runner'
+import {
+  COMPONENT_SCENARIOS,
+  runComponentScenario,
+} from '@unrulysystems/native-motion-conformance/scenarios/component'
+import {
+  DRIVER_SCENARIOS,
+  runDriverScenario,
+} from '@unrulysystems/native-motion-conformance/scenarios/driver'
+import {
+  GESTURE_SCENARIOS,
+  runGestureScenario,
+} from '@unrulysystems/native-motion-conformance/scenarios/gesture'
+import {
+  LAYOUT_SCENARIOS,
+  runLayoutScenario,
+} from '@unrulysystems/native-motion-conformance/scenarios/layout'
+import {
+  PRESENCE_SCENARIOS,
+  runPresenceScenario,
+} from '@unrulysystems/native-motion-conformance/scenarios/presence'
+import { SPRING_SCENARIOS } from '@unrulysystems/native-motion-conformance/scenarios/spring'
+import { VALUE_TYPE_SCENARIOS } from '@unrulysystems/native-motion-conformance/scenarios/value-types'
+import { createWorkletDriver, useWorkletDriver } from '../../native/driver/workletDriver'
+import { conformanceBannerVerdict } from './conformanceBanner'
+
+const SPRING = { type: 'spring', stiffness: 100, damping: 10 } as const
+const DT_MS = 16.67
+const STEPS = 120
+
+interface Row {
+  readonly id: string
+  readonly pass: boolean
+  readonly detail: string
+}
+
+// Manual drivers created by the parity checks, disposed together after the rows are computed —
+// an undisposed driver strands its UI-runtime record (quiesce-before-unmount, review round 4
+// major 5). The checks early-return mid-flow, so the ledger frees them centrally.
+const liveCheckDrivers: ReturnType<typeof createWorkletDriver>[] = []
+
+function checkDriver(): ReturnType<typeof createWorkletDriver> {
+  const binding = createWorkletDriver({ manualStepping: true })
+  liveCheckDrivers.push(binding)
+  return binding
+}
+
+function disposeCheckDrivers(): void {
+  for (const binding of liveCheckDrivers) binding.dispose()
+  liveCheckDrivers.length = 0
+}
+
+// Section 1: the five engine-agnostic DRIVER scenarios, verbatim (reference driver on device Hermes).
+function runSuitePortability(): Row[] {
+  return DRIVER_SCENARIOS.map((scenario) => {
+    const result = runDriverScenario(scenario)
+    return {
+      id: result.id,
+      pass: result.verdict === 'pass',
+      detail: result.detail ?? result.verdict,
+    }
+  })
+}
+
+// Section 2a: the worklet driver and the reference driver run the IDENTICAL command script over the
+// identical manual grid; committed values must agree exactly at every step (the same bit-identical
+// claim the parity probe proved for the raw step, now through the full Driver surface).
+function checkDriverParity(): Row {
+  const worklet = checkDriver()
+  const reference = createReferenceDriver()
+  const wh = worklet.driver.register({ x: 0 })
+  const rh = reference.register({ x: 0 })
+  const command = {
+    kind: 'start',
+    targets: { x: { to: 220, from: 0 } },
+    transition: SPRING,
+  } as const
+  worklet.driver.command(wh, command)
+  reference.command(rh, command)
+  for (let i = 0; i < STEPS; i++) {
+    worklet.driver.step(DT_MS)
+    reference.step(DT_MS)
+    const w = worklet.driver.committed(wh)['x']
+    const r = reference.committed(rh)['x']
+    if (w !== r) {
+      return {
+        id: 'worklet-vs-reference parity',
+        pass: false,
+        detail: `diverged at step ${i}: worklet=${String(w)} reference=${String(r)}`,
+      }
+    }
+  }
+  const settledWorklet = worklet.driver.isActive(wh)
+  const settledReference = reference.isActive(rh)
+  if (settledWorklet !== settledReference) {
+    return {
+      id: 'worklet-vs-reference parity',
+      pass: false,
+      detail: `quiesce mismatch: worklet active=${String(settledWorklet)} reference active=${String(settledReference)}`,
+    }
+  }
+  return {
+    id: 'worklet-vs-reference parity',
+    pass: true,
+    detail: `${STEPS} steps exact through the full Driver surface; both quiesced`,
+  }
+}
+
+// Section 2b: retarget continuity — the retargeted trajectory seeds from the LIVE value (C0), and the
+// redirected spring settles exactly at its new target.
+function checkRetargetContinuity(): Row {
+  const worklet = checkDriver()
+  const handle = worklet.driver.register({ x: 0 })
+  worklet.driver.command(handle, {
+    kind: 'start',
+    targets: { x: { to: 220, from: 0 } },
+    transition: SPRING,
+  })
+  for (let i = 0; i < 30; i++) worklet.driver.step(DT_MS)
+  const before = worklet.driver.committed(handle)['x']!
+  worklet.driver.command(handle, { kind: 'retarget', targets: { x: 0 }, transition: SPRING })
+  const seeded = worklet.driver.committed(handle)['x']!
+  if (seeded !== before) {
+    return {
+      id: 'retarget C0 continuity',
+      pass: false,
+      detail: `seed jumped: before=${before} after-retarget=${seeded}`,
+    }
+  }
+  for (let i = 0; i < 600; i++) worklet.driver.step(DT_MS)
+  const settled = worklet.driver.committed(handle)['x']!
+  if (settled !== 0 || worklet.driver.isActive(handle)) {
+    return {
+      id: 'retarget C0 continuity',
+      pass: false,
+      detail: `did not settle at retarget target: x=${settled} active=${String(worklet.driver.isActive(handle))}`,
+    }
+  }
+  return {
+    id: 'retarget C0 continuity',
+    pass: true,
+    detail: `seeded from live value ${before.toFixed(3)}, settled exactly at 0, quiesced`,
+  }
+}
+
+// Section 2c (async): live settle-cancel — the real frame loop (the hook-owned useFrameCallback,
+// REQ-DRIVER-011) drives a spring and must fire the settle edge exactly once, after which the element
+// is inactive and committed exactly at target.
+function useSettleCancelCheck(): Row | null {
+  const [row, setRow] = useState<Row | null>(null)
+  const handleRef = useRef<ElementHandle | null>(null)
+  const binding = useWorkletDriver({
+    onAllSettled: () => {
+      const handle = handleRef.current
+      if (handle === null) return
+      const committed = binding.driver.committed(handle)['x']
+      const active = binding.driver.isActive(handle)
+      setRow({
+        id: 'live settle-cancel',
+        pass: committed === 220 && !active,
+        detail: `settle edge fired; committed=${String(committed)} active=${String(active)} (loop stopped)`,
+      })
+    },
+  })
+  useEffect(() => {
+    const handle = binding.driver.register({ x: 0 })
+    handleRef.current = handle
+    binding.driver.command(handle, {
+      kind: 'start',
+      targets: { x: { to: 220, from: 0 } },
+      transition: SPRING,
+    })
+  }, [binding])
+  return row
+}
+
+// A whole scenario suite reduced to verdict counts + expanded non-pass rows, so 54 scenarios fit one
+// screenshot without hiding any deviation ("no silent caps": every non-pass id is listed).
+interface SuiteSummary {
+  readonly name: string
+  readonly pass: number
+  readonly fail: number
+  readonly unassertable: number
+  readonly nonPass: readonly ScenarioResult[]
+}
+
+function summarize(name: string, results: readonly ScenarioResult[]): SuiteSummary {
+  return {
+    name,
+    pass: results.filter((r) => r.verdict === 'pass').length,
+    fail: results.filter((r) => r.verdict === 'fail').length,
+    unassertable: results.filter((r) => r.verdict === 'unassertable').length,
+    nonPass: results.filter((r) => r.verdict !== 'pass'),
+  }
+}
+
+// The pinned motion-dom oracle (motion-dom@12.42.2, manual timing, no DOM needed on these paths) —
+// attempted at runtime via a lazy require so a Hermes incompatibility surfaces as ON-SCREEN evidence
+// (single-engine verdicts, reason recorded) instead of a startup crash. If it loads, the device runs
+// the REAL cross-engine comparison the vitest suites run.
+function tryMotionDomAdapter(): { adapter: EngineAdapter } | { error: string } {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('@unrulysystems/native-motion-conformance/adapters/motion-dom') as {
+      motionDomAdapter: () => EngineAdapter
+    }
+    return { adapter: mod.motionDomAdapter() }
+  } catch (e) {
+    return { error: e instanceof Error ? `${e.name}: ${e.message}` : String(e) }
+  }
+}
+
+// Run one scenario body safely: a thrown scenario becomes a FAIL result carrying the message —
+// render must never die to a probe (the unit-mismatch scenarios throw BY CONTRACT elsewhere).
+function safely(id: string, run: () => ScenarioResult): ScenarioResult {
+  try {
+    return run()
+  } catch (e) {
+    return {
+      id,
+      engine: 'device',
+      verdict: 'fail',
+      readings: [],
+      detail: `threw: ${e instanceof Error ? e.message : String(e)}`,
+    }
+  }
+}
+
+// Mirror the vitest harness contracts exactly (spring/value-types conformance tests): clean spring
+// scenarios compare native vs the oracle within SPRING_BAND; decision-D-pending ones are excluded as
+// unassertable (the §7 decision is the human's); value-type 'throw' scenarios PASS when native
+// throws (and the oracle does not); 'snap' scenarios PASS when the engines genuinely diverge and
+// native truly mixes. Component scenarios are self-contained.
+//
+// FAIL-CLOSED on the oracle (review cycle 1, major 2): these suites CLAIM cross-engine comparison,
+// so a missing oracle cannot silently degrade to native-only PASS verdicts — every oracle-dependent
+// scenario becomes `unassertable` with the load error, and the screen's banner FAILS (an unavailable
+// independent verifier is a blocked gate, not a pass).
+function runM22Suites(): { suites: SuiteSummary[]; oracleError: string | null } {
+  const motion = tryMotionDomAdapter()
+  const oracle = 'adapter' in motion ? motion.adapter : null
+  const oracleError = oracle === null ? (motion as { error: string }).error : null
+
+  const oracleMissing = (id: string): ScenarioResult => ({
+    id,
+    engine: 'device',
+    verdict: 'unassertable',
+    readings: [],
+    detail: `cross-engine leg NOT run — motion-dom oracle unavailable: ${oracleError ?? 'unknown'}`,
+  })
+
+  const springClean = SPRING_SCENARIOS.filter((s) => !s.pendingDecisionD)
+  const springPending = SPRING_SCENARIOS.filter((s) => s.pendingDecisionD)
+  const springResults: ScenarioResult[] = [
+    ...springClean.map((sc) =>
+      safely(sc.id, () => {
+        if (oracle === null) return oracleMissing(sc.id)
+        const a = runSpringScenario(sc, nativeAdapter(), SPRING_BAND)
+        if (a.verdict !== 'pass') return a
+        const b = runSpringScenario(sc, oracle, SPRING_BAND)
+        if (b.verdict !== 'pass') return { ...b, detail: `oracle leg: ${b.detail ?? b.verdict}` }
+        const cmp = compareEngines(a, b, SPRING_BAND)
+        return cmp.agree
+          ? a
+          : {
+              ...a,
+              verdict: 'fail' as const,
+              detail: `cross-engine diverged: ${JSON.stringify(cmp.mismatches[0])}`,
+            }
+      }),
+    ),
+    ...springPending.map((sc) => ({
+      id: sc.id,
+      engine: 'device',
+      verdict: 'unassertable' as const,
+      readings: [],
+      detail:
+        'pending decision D (§7, human) — excluded from the clean set, mirroring the vitest harness',
+    })),
+  ]
+
+  const vtClean = VALUE_TYPE_SCENARIOS.filter((s) => s.divergence === undefined)
+  const vtThrowing = VALUE_TYPE_SCENARIOS.filter((s) => s.divergence === 'throw')
+  const vtSnapping = VALUE_TYPE_SCENARIOS.filter((s) => s.divergence === 'snap')
+  const native = nativeAdapter()
+  const vtResults: ScenarioResult[] = [
+    ...vtClean.map((sc) =>
+      safely(sc.id, () => {
+        if (oracle === null) return oracleMissing(sc.id)
+        const a = runValueTypeScenario(sc, nativeAdapter())
+        if (a.verdict !== 'pass') return a
+        const b = runValueTypeScenario(sc, oracle)
+        const cmp = compareValueTypeSeries(a, b)
+        return cmp.agree
+          ? a
+          : {
+              ...a,
+              verdict: 'fail' as const,
+              detail: `vs oracle: ${JSON.stringify(cmp.mismatches[0])}`,
+            }
+      }),
+    ),
+    ...vtThrowing.map((sc) =>
+      safely(sc.id, () => {
+        if (oracle === null) return oracleMissing(sc.id)
+        let nativeThrew = false
+        try {
+          native.mixValueType?.(sc.from, sc.to, 0.5)
+        } catch {
+          nativeThrew = true
+        }
+        let oracleThrew = false
+        try {
+          oracle.mixValueType?.(sc.from, sc.to, 0.5)
+        } catch {
+          oracleThrew = true
+        }
+        const pass = nativeThrew && !oracleThrew
+        return {
+          id: sc.id,
+          engine: 'device',
+          verdict: pass ? ('pass' as const) : ('fail' as const),
+          readings: [],
+          detail: pass
+            ? 'native threw loud; oracle snapped (divergence: throw)'
+            : `nativeThrew=${String(nativeThrew)} oracleThrew=${String(oracleThrew)}`,
+        }
+      }),
+    ),
+    ...vtSnapping.map((sc) =>
+      safely(sc.id, () => {
+        if (oracle === null) return oracleMissing(sc.id)
+        const mid = native.mixValueType?.(sc.from, sc.to, 0.5)
+        const nativeMixed = mid !== sc.from && mid !== sc.to
+        const a = runValueTypeScenario(sc, nativeAdapter())
+        const b = runValueTypeScenario(sc, oracle)
+        const cmp = compareValueTypeSeries(a, b)
+        const pass = !cmp.agree && cmp.mismatches.length > 0 && nativeMixed
+        return {
+          id: sc.id,
+          engine: 'device',
+          verdict: pass ? ('pass' as const) : ('fail' as const),
+          readings: [],
+          detail: pass
+            ? 'engines diverge as documented; native genuinely mixes named colors'
+            : `agree=${String(cmp.agree)} nativeMixed=${String(nativeMixed)}`,
+        }
+      }),
+    ),
+  ]
+
+  const suites = [
+    summarize(
+      `SPRING_SCENARIOS (${SPRING_SCENARIOS.length}) — native vs motion-dom oracle`,
+      springResults,
+    ),
+    summarize(
+      `VALUE_TYPE_SCENARIOS (${VALUE_TYPE_SCENARIOS.length}) — harness contracts`,
+      vtResults,
+    ),
+    summarize(
+      `COMPONENT_SCENARIOS (${COMPONENT_SCENARIOS.length}) — fake engine`,
+      COMPONENT_SCENARIOS.map((s) => safely(s.id, () => runComponentScenario(s))),
+    ),
+    summarize(
+      `PRESENCE_SCENARIOS (${PRESENCE_SCENARIOS.length}) — fake engine (M2.3)`,
+      PRESENCE_SCENARIOS.map((s) => safely(s.id, () => runPresenceScenario(s))),
+    ),
+    summarize(
+      `GESTURE_SCENARIOS (${GESTURE_SCENARIOS.length}) — fake engine (M2.4)`,
+      GESTURE_SCENARIOS.map((s) => safely(s.id, () => runGestureScenario(s))),
+    ),
+    summarize(
+      `LAYOUT_SCENARIOS (${LAYOUT_SCENARIOS.length}) — fake engine (M2.5)`,
+      LAYOUT_SCENARIOS.map((s) => safely(s.id, () => runLayoutScenario(s))),
+    ),
+  ]
+  return { suites, oracleError }
+}
+
+export function ConformanceScreen() {
+  const [suiteRows] = useState<Row[]>(() => runSuitePortability())
+  const [checkRows] = useState<Row[]>(() => {
+    const rows = [checkDriverParity(), checkRetargetContinuity()]
+    disposeCheckDrivers() // the parity rigs are read out — free their UI-runtime records
+    return rows
+  })
+  const [m22Run] = useState<{ suites: SuiteSummary[]; oracleError: string | null }>(() =>
+    runM22Suites(),
+  )
+  const m22Suites = m22Run.suites
+  const settleRow = useSettleCancelCheck()
+
+  const allRows = [...suiteRows, ...checkRows, ...(settleRow === null ? [] : [settleRow])]
+  const expected = suiteRows.length + checkRows.length + 1
+  const allDone = allRows.length === expected
+  // Fail-closed: a missing cross-engine oracle FAILS the banner — the suites' claim is cross-engine
+  // comparison, and an unavailable independent verifier is a blocked gate, never a pass.
+  const suitesClean = m22Suites.every((suite) => suite.fail === 0) && m22Run.oracleError === null
+  // REQ-CONFORM-011 (M2 r4 major 6d4e1f7a92c3, r5 major 6e730d4c1a82): unassertable NEVER
+  // counts toward a pass. `routed > 0 → FAIL` is UNCONDITIONAL — it holds even for a routed row
+  // whose parity is owned at another altitude (CMP-R7-cross-engine-parity is discharged by the
+  // web e2e + device proofs, yet that parity does not execute in THIS suite, so it stays routed
+  // and still fails the banner). The routed count renders beside the verdict so it names its cause.
+  const routedTotal = m22Suites.reduce((total, suite) => total + suite.unassertable, 0)
+  const verdict = conformanceBannerVerdict({
+    allDone,
+    rowsPass: allRows.every((row) => row.pass),
+    suitesClean,
+    routed: routedTotal,
+  })
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>M2 on-device conformance</Text>
+      <Text style={styles.subtitle}>
+        suite portability (in-suite engines, device Hermes) + worklet-driver behavioral checks
+      </Text>
+      <View
+        style={[
+          styles.banner,
+          verdict === 'PASS' ? styles.pass : verdict === 'FAIL' ? styles.fail : styles.pending,
+        ]}
+      >
+        <Text style={styles.bannerText}>
+          {verdict === 'FAIL' && routedTotal > 0 ? `FAIL · ${routedTotal} ROUTED` : verdict}
+        </Text>
+      </View>
+      {m22Run.oracleError !== null ? (
+        <RowLine
+          row={{
+            id: 'motion-dom oracle FAILED TO LOAD (cross-engine legs not run)',
+            pass: false,
+            detail: m22Run.oracleError,
+          }}
+        />
+      ) : null}
+      <Text style={styles.section}>suite verdict counts (non-pass expanded)</Text>
+      {m22Suites.map((suite) => (
+        <View key={suite.name}>
+          <View style={styles.row}>
+            <Text
+              style={[
+                styles.verdict,
+                suite.fail > 0 ? styles.bad : suite.unassertable > 0 ? styles.dim : styles.ok,
+              ]}
+            >
+              {suite.fail > 0 ? 'FAIL' : suite.unassertable > 0 ? 'ROUTED' : 'PASS'}
+            </Text>
+            <View style={styles.rowBody}>
+              <Text style={styles.rowId}>{suite.name}</Text>
+              <Text style={styles.rowDetail}>
+                {suite.pass} pass · {suite.fail} fail · {suite.unassertable} unassertable
+              </Text>
+            </View>
+          </View>
+          {suite.nonPass.map((result) =>
+            result.verdict === 'unassertable' ? (
+              // A routed obligation renders DISTINCT — never a green PASS row
+              // (REQ-CONFORM-011: unassertable is not a pass).
+              <View key={result.id} style={styles.row}>
+                <Text style={[styles.verdict, styles.dim]}>ROUTED</Text>
+                <View style={styles.rowBody}>
+                  <Text style={styles.rowId}>{`${result.id} [unassertable]`}</Text>
+                  <Text style={styles.rowDetail} numberOfLines={3}>
+                    {result.detail ?? result.verdict}
+                  </Text>
+                </View>
+              </View>
+            ) : (
+              <RowLine
+                key={result.id}
+                row={{
+                  id: `${result.id} [${result.verdict}]`,
+                  pass: false,
+                  detail: result.detail ?? result.verdict,
+                }}
+              />
+            ),
+          )}
+        </View>
+      ))}
+      <Text style={styles.section}>DRIVER_SCENARIOS — as-is, reference driver (M2.1)</Text>
+      {suiteRows.map((row) => (
+        <RowLine key={row.id} row={row} />
+      ))}
+      <Text style={styles.section}>worklet driver — behavioral checks (M2.1)</Text>
+      {checkRows.map((row) => (
+        <RowLine key={row.id} row={row} />
+      ))}
+      <RowLine
+        row={
+          settleRow ?? { id: 'live settle-cancel', pass: false, detail: 'waiting for settle edge…' }
+        }
+        pending={settleRow === null}
+      />
+    </ScrollView>
+  )
+}
+
+function RowLine({ row, pending = false }: { readonly row: Row; readonly pending?: boolean }) {
+  return (
+    <View style={styles.row}>
+      <Text style={[styles.verdict, pending ? styles.dim : row.pass ? styles.ok : styles.bad]}>
+        {pending ? '…' : row.pass ? 'PASS' : 'FAIL'}
+      </Text>
+      <View style={styles.rowBody}>
+        <Text style={styles.rowId}>{row.id}</Text>
+        <Text style={styles.rowDetail} numberOfLines={3}>
+          {row.detail}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 20 },
+  title: { color: '#fff', fontSize: 22, fontWeight: '700', textAlign: 'center' },
+  subtitle: { color: '#8a8aa0', fontSize: 12, marginTop: 6, textAlign: 'center' },
+  banner: {
+    alignSelf: 'center',
+    paddingHorizontal: 36,
+    paddingVertical: 10,
+    borderRadius: 10,
+    marginTop: 18,
+    marginBottom: 10,
+  },
+  pass: { backgroundColor: '#1d7a3e' },
+  fail: { backgroundColor: '#a32633' },
+  pending: { backgroundColor: '#6b6b28' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  section: { color: '#8a8aa0', fontSize: 13, fontWeight: '700', marginTop: 18, marginBottom: 6 },
+  row: { flexDirection: 'row', marginTop: 8 },
+  verdict: { width: 52, fontSize: 12, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  dim: { color: '#8a8aa0' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 13, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 11, marginTop: 2 },
+})