@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/RestThresholdChecksScreen.tsx

@@ -0,0 +1,634 @@
+// U7c rest-threshold device checks (the U7c packet's floor 3): authored restDelta/restSpeed
+// reaching the spring solver's settle condition, exercised as VISIBLY different settle points
+// under authored thresholds. The card mirrors the W2 web oracle
+// (packages/native-motion-web/e2e/u7c-rest-thresholds.e2e.ts) and the pinned catalog
+// useSpring.tsx element form: ONE trigger flies four boxes 0 → 100 on the catalog's
+// stiffness-300 / damping-28 spring — loose (restDelta 80, restSpeed 2000), default (no
+// thresholds), zero (0/0 — the pin's ||= quirk reads explicit 0 as ABSENT, motion-dom
+// spring.ts:275-280), tight (0.00001/0.00001 — the catalog values verbatim) — plus a fifth box
+// on an ordinary 600ms tween carrying the tight thresholds (the pin IGNORES them outside the
+// spring generator — only generators/spring.ts and inertia.ts read them). Four rows:
+//
+//   1. SETTLE ORDERING — the loose box's activity stops measurably EARLIEST, the tight box's
+//      measurably LATEST, and the zero box matches the default box within a couple frames (the
+//      ||= quirk: explicit 0 rides the pin's default selection). Measured via each box's LAST
+//      onUpdate timestamp — the committed-values marshal is the only readback, never a JS-side
+//      mirror, and never a fixed frame chain (the 7b lesson): every box's settle is awaited by
+//      a fail-closed quiescence poll (quiet for 250ms AND at the target, else a loud deadline),
+//      so a box that never animates or never settles fails LOUD with its latest value named.
+//      Counterfactual (the W2 web leg's, observed): thresholds dropped or refused anywhere in
+//      the forwarding chain collapse every box onto the pin's 2 / 0.5 defaults and all four
+//      settle on the same frame — both margins read ~0 and fail.
+//   2. EXACT SNAP — the loose box's AND settle fires mid-flight (restDelta 80 admits
+//      |target − current| ≤ 80; restSpeed 2000 never binds — peak |v| ≈ 730px/s), so its last
+//      pre-settle onUpdate sample sits FAR from 100 while the committed post-settle value is
+//      EXACTLY 100 (the pin's `state.done ? target : current` snap, spring.ts:416-423 — never
+//      the in-flight current). An engine that settles on thresholds but commits `current`
+//      leaves the box at ~24 and fails the exact read; dropped thresholds settle the loose box
+//      at the default ~517ms, where the pre-settle sample reads ~99.5 and fails the
+//      far-off-target bound.
+//   3. TWEEN IGNORES THEM (the pin's parity) — { type: 'tween', duration: 0.6, restDelta:
+//      0.00001, restSpeed: 0.00001 } flies the ORDINARY 600ms tween: the thresholds don't
+//      refuse (no validation report, the flight runs), don't truncate (mid-flight samples
+//      strictly between 0 and 100 exist; a threshold-driven early snap settles ~50ms and fails
+//      the class band), and don't mis-settle (the flight completes in its 600ms class, not the
+//      tight spring's ~1233ms).
+//   4. CLEAN RUN — zero refusal reports through the console tap (the U5 pattern: console.error
+//      is the severity law's production error channel) across the whole timeline.
+//
+// Readback honesty: every x sample rides the element's own onUpdate (the driver's per-frame
+// committed-values marshal) with a JS-receipt timestamp; ORDERING across boxes is the claim
+// (every box rides the same marshal path, so delivery lag is shared), and each landing latency
+// is disclosed as evidence, never gated to a fixed offset. A screenshot is the assertion; the
+// console tap is evidence capture, never suppression.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+
+const ROW_ORDER = 'settle ordering: loose earliest, tight latest, zero ≈ default (the ||= quirk)'
+const ROW_SNAP = 'exact snap: the loose settle fires mid-flight yet commits exactly 100'
+const ROW_TWEEN = 'tween ignores them: the 600ms tween flies its full class with 1e-5 authored'
+const ROW_CLEAN = 'clean run: zero refusal reports through the console tap'
+const ROWS = [ROW_ORDER, ROW_SNAP, ROW_TWEEN, ROW_CLEAN] as const
+
+// Every subject flies 0 → 100; the 100px delta keeps every spring in the pin's DEFAULT
+// threshold lane (|target − origin| < 5 is the granular lane — the same code path, pinned
+// natively at unit level by W1).
+const TARGET = 100
+// The catalog's spring constants (useSpring.tsx:10-15).
+const SPRING = { type: 'spring', stiffness: 300, damping: 28 } as const
+
+// Committed-x equality margin (device px) for "reached the target"; the EXACT-snap row owns
+// exactness and reads === 100.
+const EPS = 0.5
+// Row 3's flight margin: a mid-flight sample must clear 2px off both endpoints to count.
+const FLIGHT_MARGIN = 2
+
+// Row 1 margins (ms), mirroring the W2 web leg: the stepped pinned generator at 60fps settles
+// loose ~50ms, default/zero ~517ms (the identical frame), tight ~1233ms — observed gaps ≈ 467
+// and ≈ 717ms, so both bounds carry >2x margin; the zero-vs-default band absorbs a couple
+// frames of marshal spread (web observed the IDENTICAL frame).
+const LOOSE_EARLY_MARGIN_MS = 200
+const TIGHT_LATE_MARGIN_MS = 400
+const ZERO_DEFAULT_BAND_MS = 50
+// Row 2's far-off-target bound for the loose box's last pre-settle sample (observed ~24px into
+// the flight on the web leg; >2x margin).
+const LOOSE_PRE_SETTLE_BOUND = 50
+// Row 3's tween-class band (ms post-trigger): 600ms nominal plus startup/delivery slack;
+// below the floor a threshold-driven truncation settled early, above the ceiling the flight
+// rode something other than the 600ms tween (the tight spring's class is ~1233ms + delivery).
+const TWEEN_CLASS_FLOOR_MS = 350
+const TWEEN_CLASS_CEILING_MS = 1500
+
+// Fail-closed observation: a box is SETTLED when its onUpdate marshal has been quiet for
+// QUIET_MS AND its latest committed value reads the target — a box that never animates, stalls
+// mid-flight, or oscillates forever (the literal-0 counterfactual: |v| ≤ 0 AND
+// |target − current| ≤ 0 is unsatisfiable) hits the deadline and fails LOUD.
+const QUIET_MS = 250
+const SPRING_SETTLE_DEADLINE_MS = 6000
+const TWEEN_SETTLE_DEADLINE_MS = 4000
+
+// Timeline (ms). The boot dwell (0–2400) holds every subject at its origin for the first
+// capture; the trigger fires at 2400; rows 1–3 SELF-FINALIZE as their quiescence polls resolve
+// (loose ~+50ms, default/zero ~+517ms, the tween ~+600ms, tight ~+1233ms, each plus the
+// device-dependent marshal delivery — disclosed, never gated); the clean-run verdict lands at
+// 8000 and the final dwell holds the tally from ~8200 on.
+const T_START = 2400
+const T_CLEAN = 8000
+const T_DONE = 8200
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface XSample {
+  readonly at: number
+  readonly value: number
+}
+
+interface SubjectTrace {
+  latest: number
+  // Mount-relative stamp of the most recent onUpdate marshal (-1 = none yet).
+  lastSampleAt: number
+  readonly samples: XSample[]
+}
+
+// A quiescence poll's resolution: the mount-relative stamp of the box's LAST onUpdate sample
+// (the settle point) and the poll's own resolution time — or null when the deadline passed
+// first (never-animates / never-settles both land here and fail loud).
+interface SettleLanding {
+  readonly settleAt: number
+  readonly resolvedAt: number
+}
+
+type SpringKey = 'loose' | 'default' | 'zero' | 'tight'
+type SubjectKey = SpringKey | 'tween'
+
+const freshTrace = (): SubjectTrace => ({ latest: 0, lastSampleAt: -1, samples: [] })
+
+function freshTraces(): Record<SubjectKey, SubjectTrace> {
+  return {
+    loose: freshTrace(),
+    default: freshTrace(),
+    zero: freshTrace(),
+    tight: freshTrace(),
+    tween: freshTrace(),
+  }
+}
+
+function readX(latest: Readonly<Record<string, string | number>>): number | null {
+  const raw = latest['x']
+  const value = typeof raw === 'number' ? raw : typeof raw === 'string' ? Number(raw) : NaN
+  return Number.isFinite(value) ? value : null
+}
+
+// The rows 1–3 observation primitive (the 7b lesson: landing polls, never fixed frame
+// chains): poll per rAF until the trace has been QUIET for QUIET_MS with the latest committed
+// value at the target, or the fail-closed deadline passes. The settle point is the last
+// sample's own receipt stamp — measured EVIDENCE, with the deadline the only time gate. Fires
+// `onResolve` exactly once.
+function pollSettle(
+  trace: SubjectTrace,
+  startStamp: number,
+  deadlineAt: number,
+  now: () => number,
+  trackRaf: (id: ReturnType<typeof requestAnimationFrame>) => void,
+  onResolve: (landing: SettleLanding | null) => void,
+): void {
+  const step = (): void => {
+    const t = now()
+    const flown = trace.lastSampleAt >= startStamp
+    const quiet = flown && t - trace.lastSampleAt >= QUIET_MS
+    const atTarget = Math.abs(trace.latest - TARGET) <= EPS
+    if (quiet && atTarget) {
+      onResolve({ settleAt: trace.lastSampleAt, resolvedAt: t })
+      return
+    }
+    if (t >= deadlineAt) {
+      onResolve(null)
+      return
+    }
+    trackRaf(requestAnimationFrame(step))
+  }
+  trackRaf(requestAnimationFrame(step))
+}
+
+export function RestThresholdChecksScreen() {
+  const severity = ambientNativeSeverity()
+
+  const [on, setOn] = useState(false)
+  const [stage, setStage] = useState('boot: five boxes at their origins (initial={false})')
+  const [live, setLive] = useState<Partial<Record<SubjectKey, string>>>({})
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+
+  const mountStampRef = useRef(Date.now())
+  const tracesRef = useRef<Record<SubjectKey, SubjectTrace> | null>(null)
+  if (tracesRef.current === null) tracesRef.current = freshTraces()
+
+  // Row evidence: the trigger stamp and each box's poll resolution (undefined = the poll is
+  // still running; null = the deadline passed first).
+  const startStampRef = useRef(0)
+  const landingsRef = useRef<Partial<Record<SubjectKey, SettleLanding | null>>>({})
+
+  const rafsRef = useRef<ReturnType<typeof requestAnimationFrame>[]>([])
+  const reportsRef = useRef<string[]>([])
+
+  const trackRaf = (id: ReturnType<typeof requestAnimationFrame>): void => {
+    rafsRef.current.push(id)
+  }
+
+  const record = useCallback((key: SubjectKey, value: number): void => {
+    const trace = tracesRef.current![key]
+    const at = Date.now() - mountStampRef.current
+    trace.latest = value
+    trace.lastSampleAt = at
+    trace.samples.push({ at, value })
+    setLive((previous) => ({ ...previous, [key]: value.toFixed(1) }))
+  }, [])
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  useEffect(() => {
+    const mountStamp = mountStampRef.current
+    const now = (): number => Date.now() - mountStamp
+    const traces = tracesRef.current!
+
+    // The production error channel tap (the U5 pattern): refusal reports ride consoleReporter →
+    // console.error. Installed for this screen's lifetime only; everything passes through.
+    const originalError = console.error
+    console.error = (...args: unknown[]) => {
+      for (const arg of args) {
+        const message = arg instanceof Error ? arg.message : typeof arg === 'string' ? arg : null
+        if (message !== null && /motion/i.test(message)) reportsRef.current.push(message)
+      }
+      originalError(...args)
+    }
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    // 1. SETTLE ORDERING — finalizes once ALL FOUR spring polls resolved. A null landing is
+    //    the loud never-animates / never-settles class and names the box.
+    const maybeFinalizeOrdering = (): void => {
+      const landings = landingsRef.current
+      const keys: readonly SpringKey[] = ['loose', 'default', 'zero', 'tight']
+      if (!keys.every((key) => landings[key] !== undefined)) return
+      const start = startStampRef.current
+      const missing = keys.find((key) => landings[key] === null)
+      if (missing !== undefined) {
+        const trace = traces[missing]
+        finalize(
+          ROW_ORDER,
+          false,
+          `the ${missing} box never settled within the ${SPRING_SETTLE_DEADLINE_MS}ms deadline ` +
+            `(latest ${trace.latest.toFixed(1)}, ${trace.samples.length} onUpdate samples) — ` +
+            (trace.samples.length === 0
+              ? 'it never animated'
+              : 'it never reached a quiet settle at the target — the never-settles class (on ' +
+                'the zero box, a literal-0 honoring makes the AND settle unsatisfiable: the ' +
+                '||= quirk is not in effect)'),
+        )
+        setStage('ordering row finalized (FAIL) — the tween and clean-run rows remain')
+        return
+      }
+      const ms = (key: SpringKey): number => landings[key]!.settleAt - start
+      const loose = ms('loose')
+      const dflt = ms('default')
+      const zero = ms('zero')
+      const tight = ms('tight')
+      const earlyGap = dflt - loose
+      const lateGap = tight - dflt
+      const zeroGap = Math.abs(zero - dflt)
+      const stamps = `loose +${loose.toFixed(0)}ms, default +${dflt.toFixed(0)}ms, zero +${zero.toFixed(0)}ms, tight +${tight.toFixed(0)}ms`
+      let bad: string | null = null
+      if (earlyGap <= LOOSE_EARLY_MARGIN_MS) {
+        bad =
+          `the loose thresholds did not settle early: default − loose = ${earlyGap.toFixed(0)}ms ` +
+          `(want > ${LOOSE_EARLY_MARGIN_MS}ms; ${stamps}) — the authored restDelta/restSpeed ` +
+          'did not reach the solver (dropped or refused thresholds collapse every box onto the ' +
+          "pin's 2 / 0.5 defaults and this gap reads ~0)"
+      } else if (lateGap <= TIGHT_LATE_MARGIN_MS) {
+        bad =
+          `the tight thresholds did not settle late: tight − default = ${lateGap.toFixed(0)}ms ` +
+          `(want > ${TIGHT_LATE_MARGIN_MS}ms; ${stamps}) — the authored restDelta/restSpeed did ` +
+          'not reach the solver'
+      } else if (zeroGap > ZERO_DEFAULT_BAND_MS) {
+        bad =
+          `explicit 0 did not read as absent: |zero − default| = ${zeroGap.toFixed(0)}ms ` +
+          `(want ≤ ${ZERO_DEFAULT_BAND_MS}ms, a couple frames; ${stamps}) — the pin's ||= quirk ` +
+          '(spring.ts:275-280) is not in effect'
+      }
+      finalize(
+        ROW_ORDER,
+        bad === null,
+        bad ??
+          `last-onUpdate settle stamps (post-trigger): ${stamps} — default − loose = ` +
+            `${earlyGap.toFixed(0)}ms (> ${LOOSE_EARLY_MARGIN_MS}: the loose thresholds reached ` +
+            `the solver), tight − default = ${lateGap.toFixed(0)}ms (> ${TIGHT_LATE_MARGIN_MS}: ` +
+            `the tight thresholds reached it), |zero − default| = ${zeroGap.toFixed(0)}ms (≤ ` +
+            `${ZERO_DEFAULT_BAND_MS}, a couple frames: explicit 0 rides the default selection — ` +
+            'the ||= quirk verbatim)',
+      )
+      setStage('ordering row finalized — the tween and clean-run rows remain')
+    }
+
+    // 2. EXACT SNAP — finalizes when the loose box's poll resolves. The last pre-settle sample
+    //    must sit far off the target (the AND settle fired mid-flight) and the committed
+    //    post-settle value must be EXACTLY 100 (the snap-at-done, not the in-flight current).
+    const finalizeSnap = (landing: SettleLanding | null): void => {
+      const start = startStampRef.current
+      const post = traces.loose.samples.filter((s) => s.at >= start)
+      const snapIndex = post.findIndex((s) => s.value === TARGET)
+      let bad: string | null = null
+      if (landing === null) {
+        bad =
+          `the loose box never settled within the ${SPRING_SETTLE_DEADLINE_MS}ms deadline ` +
+          `(latest ${traces.loose.latest.toFixed(1)}) — the snap cannot be witnessed`
+      } else if (snapIndex === -1) {
+        bad =
+          `no post-trigger onUpdate sample reads exactly ${TARGET} (latest ` +
+          `${traces.loose.latest.toFixed(1)}) — the settle committed the current value, not the ` +
+          'target (the pin commits `state.done ? target : current`)'
+      } else if (snapIndex === 0) {
+        bad =
+          `the loose box's FIRST post-trigger sample already reads ${TARGET} — the mid-flight ` +
+          'settle was never witnessed (a teleport, not a spring flight)'
+      } else {
+        const preSettle = post[snapIndex - 1]!
+        if (preSettle.value >= LOOSE_PRE_SETTLE_BOUND) {
+          bad =
+            `the loose box's last pre-settle sample reads ${preSettle.value.toFixed(1)} at ` +
+            `+${(preSettle.at - start).toFixed(0)}ms (want < ${LOOSE_PRE_SETTLE_BOUND}) — the ` +
+            'loose AND settle did not fire mid-flight (dropped thresholds settle it at the ' +
+            'default ~517ms, where the pre-settle sample reads ~99.5)'
+        } else if (traces.loose.latest !== TARGET) {
+          bad =
+            `the loose box's committed post-settle value reads ${traces.loose.latest}, not ` +
+            `exactly ${TARGET} — no exact snap at rest`
+        }
+      }
+      finalize(
+        ROW_SNAP,
+        bad === null,
+        bad ??
+          `the loose AND settle fired mid-flight: the last pre-settle onUpdate reads ` +
+            `${post[snapIndex - 1]!.value.toFixed(1)} at +${(post[snapIndex - 1]!.at - start).toFixed(0)}ms ` +
+            `(< ${LOOSE_PRE_SETTLE_BOUND}; restDelta 80 admits |target − current| ≤ 80, ` +
+            'restSpeed 2000 never binds), and the committed post-settle value is EXACTLY ' +
+            `${TARGET} — the pin's snap-at-done (\`state.done ? target : current\`), a ~` +
+            `${(TARGET - post[snapIndex - 1]!.value).toFixed(0)}px commit jump that only the ` +
+            `snap produces; settle stamp +${(landing!.settleAt - start).toFixed(0)}ms`,
+      )
+      setStage('snap row finalized')
+    }
+
+    // 3. TWEEN IGNORES THEM — finalizes when the tween box's poll resolves: the authored tight
+    //    thresholds neither refused (the flight ran, no report — row 4 owns the tap), nor
+    //    truncated (mid-flight samples strictly between, the settle lands in the 600ms class),
+    //    nor mis-settled it.
+    const finalizeTween = (landing: SettleLanding | null): void => {
+      const start = startStampRef.current
+      const post = traces.tween.samples.filter((s) => s.at >= start)
+      const interior = post.filter(
+        (s) => s.value > 0 + FLIGHT_MARGIN && s.value < TARGET - FLIGHT_MARGIN,
+      )
+      let bad: string | null = null
+      if (landing === null) {
+        bad =
+          `the tween box never settled within the ${TWEEN_SETTLE_DEADLINE_MS}ms deadline ` +
+          `(latest ${traces.tween.latest.toFixed(1)}, ${post.length} samples) — the authored ` +
+          'thresholds refused or mis-settled the tween (the pin ignores them outside the ' +
+          'spring generator)'
+      } else if (interior.length === 0) {
+        bad =
+          `ZERO mid-flight samples strictly between 0 and ${TARGET} — the tween did not fly ` +
+          `its 600ms class (latest ${traces.tween.latest.toFixed(1)})`
+      } else {
+        const latency = landing.settleAt - start
+        if (latency < TWEEN_CLASS_FLOOR_MS || latency > TWEEN_CLASS_CEILING_MS) {
+          bad =
+            `the tween settled at +${latency.toFixed(0)}ms, outside its 600ms class band ` +
+            `(${TWEEN_CLASS_FLOOR_MS}–${TWEEN_CLASS_CEILING_MS}ms) — the authored thresholds ` +
+            'truncated or re-classed the flight'
+        } else if (Math.abs(traces.tween.latest - TARGET) > EPS) {
+          bad = `the tween committed ${traces.tween.latest.toFixed(1)}, want ${TARGET}`
+        }
+      }
+      finalize(
+        ROW_TWEEN,
+        bad === null,
+        bad ??
+          `the 600ms tween flew its full class with restDelta/restSpeed 1e-5 authored: ` +
+            `${interior.length} mid-flight samples strictly between 0 and ${TARGET} ` +
+            `(${interior[0]!.value.toFixed(1)} → ${interior[interior.length - 1]!.value.toFixed(1)}), ` +
+            `settled at +${(landing!.settleAt - start).toFixed(0)}ms post-trigger (the ` +
+            `${TWEEN_CLASS_FLOOR_MS}–${TWEEN_CLASS_CEILING_MS}ms band, 600ms nominal + ` +
+            `delivery), final ${traces.tween.latest.toFixed(1)} — the thresholds neither ` +
+            'refused, nor truncated, nor mis-settled the tween (the pin parity: only the ' +
+            'spring and inertia generators read them)',
+      )
+      setStage('tween row finalized')
+    }
+
+    // THE TRIGGER — one state flip flies all five boxes 0 → 100; each box's settle is awaited
+    // by its own fail-closed quiescence poll (never a fixed frame chain).
+    at(T_START, () => {
+      startStampRef.current = now()
+      const start = startStampRef.current
+      setOn(true)
+      setStage(
+        `trigger fired: 0 → ${TARGET} on the catalog 300/28 spring (loose / default / zero / ` +
+          'tight) + the threshold-carrying 600ms tween',
+      )
+      const springKeys: readonly SpringKey[] = ['loose', 'default', 'zero', 'tight']
+      for (const key of springKeys) {
+        pollSettle(
+          traces[key],
+          start,
+          start + SPRING_SETTLE_DEADLINE_MS,
+          now,
+          trackRaf,
+          (landing) => {
+            landingsRef.current[key] = landing
+            if (key === 'loose') finalizeSnap(landing)
+            maybeFinalizeOrdering()
+          },
+        )
+      }
+      pollSettle(
+        traces.tween,
+        start,
+        start + TWEEN_SETTLE_DEADLINE_MS,
+        now,
+        trackRaf,
+        (landing) => {
+          landingsRef.current.tween = landing
+          finalizeTween(landing)
+        },
+      )
+    })
+
+    // 4. CLEAN RUN — the console tap saw zero refusal reports across the whole timeline.
+    at(T_CLEAN, () => {
+      const reports = reportsRef.current
+      finalize(
+        ROW_CLEAN,
+        reports.length === 0,
+        reports.length === 0
+          ? `0 refusal reports through the console tap across ${now().toFixed(0)}ms of ` +
+              'the trigger, all four spring settles, and the threshold-carrying tween'
+          : `${reports.length} report(s): ${reports
+              .map((message) => `"${message.slice(0, 80)}…"`)
+              .join(' | ')}`,
+      )
+    })
+    at(T_DONE, () => setStage('done'))
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      for (const raf of rafsRef.current) cancelAnimationFrame(raf)
+      console.error = originalError
+    }
+    // All captured values are refs or stable setters; the timeline runs once per mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const done = ROWS.every((id) => rows[id] !== undefined)
+  const failing = ROWS.filter((id) => rows[id] !== undefined && !rows[id]!.pass)
+  const verdict = !done ? 'RUNNING' : failing.length === 0 ? 'PASS' : 'FAIL'
+  const passed = Object.keys(rows).length - failing.length
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>U7c rest-threshold checks</Text>
+      <Text style={styles.subtitle}>
+        authored restDelta/restSpeed order the spring settle — the catalog useSpring.tsx element
+        form ({severity} severity)
+      </Text>
+      <View
+        style={[
+          styles.banner,
+          verdict === 'PASS' ? styles.pass : verdict === 'FAIL' ? styles.fail : styles.running,
+        ]}
+      >
+        <Text style={styles.bannerText}>{verdict}</Text>
+      </View>
+      <Text style={styles.tally}>
+        {done
+          ? `${passed} PASS / ${failing.length} FAIL of ${ROWS.length} rows`
+          : `${Object.keys(rows).length}/${ROWS.length} rows complete — RUNNING`}
+      </Text>
+      <Text style={styles.tallyDetail}>
+        {done
+          ? failing.length === 0
+            ? 'no failing rows'
+            : `FAILING: ${failing.join('  |  ')}`
+          : `stage: ${stage}`}
+      </Text>
+      <Text style={styles.status}>
+        u7c stage: {stage} · loose={live.loose ?? '0.0'} default={live.default ?? '0.0'} zero=
+        {live.zero ?? '0.0'} tight={live.tight ?? '0.0'} tween={live.tween ?? '0.0'}
+      </Text>
+
+      {/* The subjects: five boxes on one trigger, 0 → 100. The four spring boxes share the
+          catalog's 300/28 spring and differ ONLY in the authored thresholds (loose 80/2000,
+          default none, zero 0/0, tight 1e-5/1e-5 — the catalog values verbatim); the fifth
+          flies an ordinary 600ms tween carrying the tight thresholds (the pin ignores them
+          outside the spring generator). onUpdate on each is the committed-values readback. */}
+      <View style={styles.stageRow}>
+        <MotionView
+          initial={false}
+          animate={{ x: on ? TARGET : 0 }}
+          transition={{ ...SPRING, restDelta: 80, restSpeed: 2000 }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('loose', value)
+          }}
+          style={styles.looseBox}
+          accessibilityLabel="u7c-loose-subject"
+        />
+        <MotionView
+          initial={false}
+          animate={{ x: on ? TARGET : 0 }}
+          transition={SPRING}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('default', value)
+          }}
+          style={styles.defaultBox}
+          accessibilityLabel="u7c-default-subject"
+        />
+        <MotionView
+          initial={false}
+          animate={{ x: on ? TARGET : 0 }}
+          transition={{ ...SPRING, restDelta: 0, restSpeed: 0 }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('zero', value)
+          }}
+          style={styles.zeroBox}
+          accessibilityLabel="u7c-zero-subject"
+        />
+        <MotionView
+          initial={false}
+          animate={{ x: on ? TARGET : 0 }}
+          transition={{ ...SPRING, restDelta: 0.00001, restSpeed: 0.00001 }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('tight', value)
+          }}
+          style={styles.tightBox}
+          accessibilityLabel="u7c-tight-subject"
+        />
+        <MotionView
+          initial={false}
+          animate={{ x: on ? TARGET : 0 }}
+          transition={{ type: 'tween', duration: 0.6, restDelta: 0.00001, restSpeed: 0.00001 }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('tween', value)
+          }}
+          style={styles.tweenBox}
+          accessibilityLabel="u7c-tween-subject"
+        />
+      </View>
+
+      {ROWS.map((id) => {
+        const row = rows[id]
+        return (
+          <View key={id} style={styles.row}>
+            <Text
+              style={[
+                styles.verdict,
+                row === undefined ? styles.pending : row.pass ? styles.ok : styles.bad,
+              ]}
+            >
+              {row === undefined ? '…' : row.pass ? 'PASS' : 'FAIL'}
+            </Text>
+            <View style={styles.rowBody}>
+              <Text style={styles.rowId}>{id}</Text>
+              <Text style={styles.rowDetail} numberOfLines={4}>
+                {row === undefined ? 'pending' : row.detail}
+              </Text>
+            </View>
+          </View>
+        )
+      })}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 8 },
+  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' },
+  running: { backgroundColor: '#7a641d' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  tally: { color: '#e6e6f0', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+  tallyDetail: { color: '#f87171', fontSize: 11, marginTop: 3, textAlign: 'center' },
+  status: {
+    color: '#c9c9d8',
+    fontSize: 11,
+    marginTop: 8,
+    textAlign: 'center',
+    fontFamily: 'Menlo',
+  },
+  stageRow: {
+    flexDirection: 'row',
+    marginTop: 18,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+  },
+  // The web oracle's palette (e2e/fixtures/examples.tsx U7c card).
+  looseBox: { width: 56, height: 56, backgroundColor: '#0ea5e9', borderRadius: 10 },
+  defaultBox: { width: 56, height: 56, backgroundColor: '#64748b', borderRadius: 10 },
+  zeroBox: { width: 56, height: 56, backgroundColor: '#f59e0b', borderRadius: 10 },
+  tightBox: { width: 56, height: 56, backgroundColor: '#7c3aed', borderRadius: 10 },
+  tweenBox: { width: 56, height: 56, backgroundColor: '#22c55e', borderRadius: 10 },
+  row: { flexDirection: 'row', marginTop: 10 },
+  verdict: { width: 52, fontSize: 12, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  pending: { color: '#8a8aa0' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 13, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 11, marginTop: 2 },
+})