@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ColorBindingChecksScreen.tsx

@@ -0,0 +1,568 @@
+// U5 color-binding device checks (REQ-API-025/-026, REQ-DRIVER-029): the PUBLIC value-hook surface
+// proven on device exactly as a consumer writes it (the pinned catalog Drag-external-handlers
+// shape) — useMotionValue, a useTransform color ramp bound to backgroundColor via style, and a
+// useMotionTemplate translate3d string bound to style.transform. Three claims, self-driven:
+//
+//   1. ATTACH-PUBLISH — x carries 150 BEFORE mount: the first frame already shows the mid-ramp
+//      color and the follower translated 150px (no entrance, no animation).
+//   2. set() SWEEP — a timer DIRECTLY set()s x in discrete 25px steps (never animate() a bound
+//      value — that refusal is intentional, REQ-DRIVER-029). The subject's color must follow the
+//      ramp through the binding and the follower must mirror position through the template
+//      binding. The sweep is ALSO the discriminator that the BINDING (not an animation) delivered
+//      the values: every step is a direct set(), and any animation-driven traffic on a bound
+//      value would fire the lane's loud refusal, failing the row.
+//   3. INVALID set() REFUSAL — Release runs production severity (the proof posture): set()ing an
+//      unparseable color string is REPORTED through the error channel and REFUSED, keeping the
+//      last good color; a later valid set() publishes again.
+//
+// Readback honesty: the follower's committed position is read back from the HOST
+// (measureInWindow against an untransformed marker — the value the host actually received). A
+// bound color has no programmatic host readback on this surface, so the color rows assert the
+// stamped values the binding lane ACCEPTED (the derived-value change events) plus the absence of
+// refusal reports, and the rendered pixels in the capture carry the host-received color evidence.
+// Refusal reports are observed by tapping console.error — the severity law's production error
+// channel (consoleReporter) — verification-side instrumentation, never product code. A
+// screenshot is the assertion; try/catch is evidence capture, never suppression.
+
+import { useEffect, useRef, useState, type ComponentRef } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import {
+  useMotionTemplate,
+  useMotionValue,
+  useMotionValueEvent,
+  useTransform,
+} from '../../native/motion/valueHooks'
+
+// The ramp the charter pins: x=0 → '#f00', x=150 → mid '#ff0'→'#0f0' (rgb ≈ 180,255,0 — the pin
+// mixes in linear-light space, NOT naive linear, so mid-segment red is 180 not 128), x=300 →
+// '#00f'. The sweep rides 25px steps so every stop AND both mid-segment points are hit.
+const INPUT_RANGE = [0, 100, 200, 300] as const
+const OUTPUT_RANGE = ['#f00', '#ff0', '#0f0', '#00f'] as const
+const STOPS: readonly (readonly [number, number, number])[] = [
+  [255, 0, 0],
+  [255, 255, 0],
+  [0, 255, 0],
+  [0, 0, 255],
+]
+
+const SWEEP_UP: readonly number[] = [175, 200, 225, 250, 275, 300]
+const SWEEP_DOWN: readonly number[] = [275, 250, 225, 200, 175, 150, 125, 100, 75, 50, 25, 0]
+const SWEEP_VALUES: readonly number[] = [...SWEEP_UP, ...SWEEP_DOWN]
+const STEP_MS = 150
+
+const PROBE_INITIAL = '#22cc88'
+const PROBE_RECOVERY = '#3366ff'
+const PROBE_INVALID = 'not-a-color'
+
+const ROW_ATTACH = 'attach-publish: first frame carries the pre-mount x=150'
+const ROW_SWEEP_COLOR = 'set() sweep: subject color follows the ramp THROUGH THE BINDING'
+const ROW_SWEEP_TEMPLATE = 'set() sweep: follower mirrors position through the template binding'
+const ROW_INVALID = 'invalid set() reported + refused (production posture)'
+const ROW_RECOVERY = 'binding lane survives the refusal (recovery set publishes)'
+const ROW_ORDER = [
+  ROW_ATTACH,
+  ROW_SWEEP_COLOR,
+  ROW_SWEEP_TEMPLATE,
+  ROW_INVALID,
+  ROW_RECOVERY,
+] as const
+
+// Timeline (ms). Dwells make every staged state capturable: the boot frame holds x=150 mid-ramp,
+// the 300-dwell holds blue + follower at 300, the invalid-dwell holds the probe's last good color.
+const T_ATTACH = 900
+const T_SWEEP_UP = 1100
+const T_MEASURE_300 = 2500
+const T_SWEEP_DOWN = 2900
+const T_SWEEP_FINALIZE = 5100
+const T_INVALID = 5600
+const T_INVALID_FINALIZE = 6300
+const T_RECOVER = 6500
+const T_DONE = 7100
+
+/**
+ * The ramp expectation, per channel. NOT naive linear: the pin mixes colors in LINEAR-LIGHT space
+ * — mixLinearColor(from, to, progress) = sqrt(from² + (to² − from²)·progress) (motion-dom
+ * utils/mix/color.mjs:12-17), dispatched by getMixer for color outputs. Core's mixColor matches;
+ * the same model drives the web leg's rampChannels.
+ */
+function mixLinearChannel(from: number, to: number, progress: number): number {
+  const fromExpo = from * from
+  const expo = progress * (to * to - fromExpo) + fromExpo
+  return expo < 0 ? 0 : Math.sqrt(expo)
+}
+
+function expectedRamp(x: number): readonly [number, number, number] {
+  const clamped = Math.min(INPUT_RANGE[3], Math.max(INPUT_RANGE[0], x))
+  let segment = 0
+  while (segment < 2 && clamped >= INPUT_RANGE[segment + 1]!) segment++
+  const from = INPUT_RANGE[segment]!
+  const to = INPUT_RANGE[segment + 1]!
+  const progress = to === from ? 1 : (clamped - from) / (to - from)
+  const a = STOPS[segment]!
+  const b = STOPS[segment + 1]!
+  return [
+    mixLinearChannel(a[0], b[0], progress),
+    mixLinearChannel(a[1], b[1], progress),
+    mixLinearChannel(a[2], b[2], progress),
+  ]
+}
+
+function parseRgba(raw: string): { r: number; g: number; b: number; a: number } | null {
+  const match =
+    /^rgba\(\s*(\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)\s*\)$/.exec(
+      raw.trim(),
+    )
+  if (match === null) return null
+  return {
+    r: Number(match[1]),
+    g: Number(match[2]),
+    b: Number(match[3]),
+    a: Number(match[4]),
+  }
+}
+
+// Channels mix in linear-light then round (Math.round(180.3…) = 180 at x=150) — a ±1 window is
+// exactness, not leniency. Alpha must be exactly 1.
+function channelsClose(
+  parsed: { r: number; g: number; b: number; a: number },
+  expected: readonly [number, number, number],
+): boolean {
+  return (
+    Math.abs(parsed.r - expected[0]) <= 1 &&
+    Math.abs(parsed.g - expected[1]) <= 1 &&
+    Math.abs(parsed.b - expected[2]) <= 1 &&
+    parsed.a === 1
+  )
+}
+
+function formatRgb(expected: readonly [number, number, number]): string {
+  return `rgb(${expected.map((c) => c.toFixed(0)).join(', ')})`
+}
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+export function ColorBindingChecksScreen() {
+  const severity = ambientNativeSeverity()
+  // The public value hooks, exactly the catalog shape: x carries 150 BEFORE mount.
+  const x = useMotionValue(150)
+  const y = useMotionValue(0)
+  const color = useTransform(x, INPUT_RANGE, OUTPUT_RANGE)
+  const template = useMotionTemplate`translate3d(${x}px, ${y}px, 0)`
+  const probe = useMotionValue(PROBE_INITIAL)
+
+  const followerRef = useRef<ComponentRef<typeof MotionView> | null>(null)
+  const markerRef = useRef<ComponentRef<typeof View> | null>(null)
+
+  // First-frame stamps: the derived values computed at creation, read during the FIRST render —
+  // what the binding's attach publishes before any frame runs.
+  const firstFrameRef = useRef<{ color: string; template: string } | null>(null)
+  if (firstFrameRef.current === null) {
+    firstFrameRef.current = { color: color.get(), template: template.get() }
+  }
+
+  const colorStampsRef = useRef<{ x: number; color: string }[]>([])
+  const templateStampsRef = useRef<string[]>([])
+  const setCountRef = useRef(0)
+  const sawAnimatingRef = useRef(false)
+  const reportsRef = useRef<string[]>([])
+  const measured150Ref = useRef<number | null>(null)
+  const measured300Ref = useRef<number | null>(null)
+  const invalidThrewRef = useRef<string | null>(null)
+  const recoveryThrewRef = useRef<string | null>(null)
+
+  const [stage, setStage] = useState('boot: first frame at x=150 (pre-mount value)')
+  const [liveColor, setLiveColor] = useState<string>(() => color.get())
+  const [liveDelta, setLiveDelta] = useState('—')
+  const [probeNow, setProbeNow] = useState(PROBE_INITIAL)
+  const [rows, setRows] = useState<Partial<Record<(typeof ROW_ORDER)[number], RowResult>>>({})
+
+  useMotionValueEvent(color, 'change', (latest: string) => {
+    colorStampsRef.current.push({ x: x.get(), color: latest })
+    setLiveColor(latest)
+  })
+  useMotionValueEvent(template, 'change', (latest: string) => {
+    templateStampsRef.current.push(latest)
+  })
+
+  const finalize = (id: (typeof ROW_ORDER)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  useEffect(() => {
+    // The production error channel tap: refusal reports ride consoleReporter (console.error) —
+    // recording them is the screen's only window into a production refusal, which by law never
+    // throws. 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 && message.includes('style-bound MotionValue')) {
+          reportsRef.current.push(message)
+        }
+      }
+      originalError(...args)
+    }
+
+    const measureFollowerDelta = (done: (delta: number | null) => void): void => {
+      const follower = followerRef.current
+      const marker = markerRef.current
+      if (follower === null || marker === null) {
+        done(null)
+        return
+      }
+      follower.measureInWindow((followerX, _fy, width) => {
+        marker.measureInWindow((markerX) => {
+          done(width > 0 ? followerX - markerX : null)
+        })
+      })
+    }
+    const animationRefusals = (): number =>
+      reportsRef.current.filter((m) => m.includes('driven by a JS-side animation')).length
+    const invalidRefusals = (): readonly string[] =>
+      reportsRef.current.filter((m) => m.includes("color key 'backgroundColor'"))
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    // 1. ATTACH-PUBLISH — verify the first-frame stamps and the host-measured follower position.
+    at(T_ATTACH, () => {
+      measureFollowerDelta((delta) => {
+        measured150Ref.current = delta
+        setLiveDelta(delta === null ? 'n/a' : delta.toFixed(1))
+        const first = firstFrameRef.current!
+        const parsed = parseRgba(first.color)
+        const colorOk = parsed !== null && channelsClose(parsed, expectedRamp(150))
+        const templateOk = first.template === 'translate3d(150px, 0px, 0)'
+        const measureOk = delta !== null && Math.abs(delta - 150) <= 2
+        finalize(
+          ROW_ATTACH,
+          colorOk && templateOk && measureOk,
+          `first frame ${first.color} + ${first.template}; host-measured followerΔ ` +
+            `${delta === null ? 'unavailable' : delta.toFixed(1)} (want 150±2)`,
+        )
+        setStage('attach published — sweep starts')
+      })
+    })
+
+    // 2. set() SWEEP — direct set()s only. Clearing the stamp logs at the first step scopes the
+    //    assertions to the sweep itself.
+    SWEEP_UP.forEach((value, index) => {
+      at(T_SWEEP_UP + index * STEP_MS, () => {
+        if (index === 0) {
+          colorStampsRef.current = []
+          templateStampsRef.current = []
+          setStage('sweep up: direct set() +25 → x=300')
+        }
+        setCountRef.current += 1
+        if (x.isAnimating()) sawAnimatingRef.current = true
+        x.set(value)
+      })
+    })
+    at(T_MEASURE_300, () => {
+      measureFollowerDelta((delta) => {
+        measured300Ref.current = delta
+        setLiveDelta(delta === null ? 'n/a' : delta.toFixed(1))
+        setStage('dwell at x=300 (blue end of the ramp)')
+      })
+    })
+    SWEEP_DOWN.forEach((value, index) => {
+      at(T_SWEEP_DOWN + index * STEP_MS, () => {
+        if (index === 0) setStage('sweep down: direct set() −25 → x=0')
+        setCountRef.current += 1
+        if (x.isAnimating()) sawAnimatingRef.current = true
+        x.set(value)
+      })
+    })
+    at(T_SWEEP_FINALIZE, () => {
+      measureFollowerDelta((delta0) => {
+        setLiveDelta(delta0 === null ? 'n/a' : delta0.toFixed(1))
+        // —— color row ——
+        const stamps = colorStampsRef.current
+        let colorBad: string | null = null
+        if (stamps.length !== SWEEP_VALUES.length) {
+          colorBad = `${stamps.length} color stamps for ${SWEEP_VALUES.length} direct set()s`
+        } else {
+          for (let i = 0; i < stamps.length; i++) {
+            const stamp = stamps[i]!
+            if (stamp.x !== SWEEP_VALUES[i]) {
+              colorBad = `stamp ${i} at x=${stamp.x}, want ${SWEEP_VALUES[i]}`
+              break
+            }
+            const parsed = parseRgba(stamp.color)
+            if (parsed === null || !channelsClose(parsed, expectedRamp(stamp.x))) {
+              colorBad = `stamp ${i} x=${stamp.x}: ${stamp.color}, want ≈${formatRgb(expectedRamp(stamp.x))}`
+              break
+            }
+          }
+        }
+        if (colorBad === null && sawAnimatingRef.current) {
+          colorBad = 'x animated during the sweep — every step must be a DIRECT set()'
+        }
+        if (colorBad === null && animationRefusals() > 0) {
+          colorBad = `${animationRefusals()} animation-refusal report(s) fired — the lane saw animated traffic`
+        }
+        const mid = stamps.find((stamp) => stamp.x === 150)
+        finalize(
+          ROW_SWEEP_COLOR,
+          colorBad === null,
+          colorBad ??
+            `${SWEEP_VALUES.length} direct set() steps, every stamped color on-ramp ` +
+              `(x=150 → ${mid?.color ?? '?'}), zero animation refusals`,
+        )
+        // —— template row ——
+        const templates = templateStampsRef.current
+        let templateBad: string | null = null
+        if (templates.length !== SWEEP_VALUES.length) {
+          templateBad = `${templates.length} template stamps for ${SWEEP_VALUES.length} direct set()s`
+        } else {
+          for (let i = 0; i < templates.length; i++) {
+            const want = `translate3d(${SWEEP_VALUES[i]}px, 0px, 0)`
+            if (templates[i] !== want) {
+              templateBad = `stamp ${i}: ${templates[i]}, want ${want}`
+              break
+            }
+          }
+        }
+        const at300 = measured300Ref.current
+        if (templateBad === null && (at300 === null || Math.abs(at300 - 300) > 2)) {
+          templateBad = `host-measured followerΔ at x=300: ${at300 === null ? 'unavailable' : at300.toFixed(1)}`
+        }
+        if (templateBad === null && (delta0 === null || Math.abs(delta0) > 2)) {
+          templateBad = `host-measured followerΔ at x=0: ${delta0 === null ? 'unavailable' : delta0.toFixed(1)}`
+        }
+        finalize(
+          ROW_SWEEP_TEMPLATE,
+          templateBad === null,
+          templateBad ??
+            `every set() re-emitted translate3d(xpx, 0px, 0); host-measured Δ ${at300?.toFixed(1) ?? '?'} ` +
+              `at x=300, ${delta0?.toFixed(1) ?? '?'} back at x=0`,
+        )
+        setStage('sweep complete — invalid set() next')
+      })
+    })
+
+    // 3. INVALID set() — production reports + refuses; development throws (the severity law).
+    at(T_INVALID, () => {
+      setStage(`invalid set(): ${PROBE_INVALID} (${severity} severity)`)
+      try {
+        probe.set(PROBE_INVALID)
+        setProbeNow(PROBE_INVALID)
+      } catch (thrown) {
+        invalidThrewRef.current = thrown instanceof Error ? thrown.message : String(thrown)
+      }
+    })
+    at(T_INVALID_FINALIZE, () => {
+      const refusals = invalidRefusals()
+      const threw = invalidThrewRef.current
+      if (severity === 'production') {
+        const pass = refusals.length === 1 && threw === null
+        finalize(
+          ROW_INVALID,
+          pass,
+          pass
+            ? `reported + refused: "${refusals[0]!.slice(0, 90)}…" — the host keeps the last good ` +
+                `color (probe box holds ${PROBE_INITIAL} on screen)`
+            : `want exactly 1 refusal report + no throw; got ${refusals.length} report(s), ` +
+                `threw=${threw === null ? 'no' : threw.slice(0, 60)}`,
+        )
+      } else {
+        const pass = threw !== null && threw.includes("color key 'backgroundColor'")
+        finalize(
+          ROW_INVALID,
+          pass,
+          pass
+            ? `development severity threw loud: "${threw.slice(0, 90)}…"`
+            : `development severity must throw naming the key; threw=${threw === null ? 'nothing' : threw.slice(0, 60)}`,
+        )
+      }
+    })
+    at(T_RECOVER, () => {
+      setStage('recovery set(): valid color publishes again')
+      try {
+        probe.set(PROBE_RECOVERY)
+        setProbeNow(PROBE_RECOVERY)
+      } catch (thrown) {
+        recoveryThrewRef.current = thrown instanceof Error ? thrown.message : String(thrown)
+      }
+    })
+    at(T_DONE, () => {
+      const refusals = invalidRefusals()
+      const threw = recoveryThrewRef.current
+      const pass = refusals.length === 1 && threw === null && probe.get() === PROBE_RECOVERY
+      finalize(
+        ROW_RECOVERY,
+        pass,
+        pass
+          ? `no new report; probe now ${probe.get()} (probe box turned blue — the lane never ` +
+              'wedged on the refused write)'
+          : `reports=${refusals.length} (want still 1), threw=${threw === null ? 'no' : threw.slice(0, 60)}, ` +
+              `probe=${probe.get()}`,
+      )
+      setStage('done')
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      console.error = originalError
+    }
+    // All captured values are stable hook identities or refs; the timeline runs once per mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const done = ROW_ORDER.every((id) => rows[id] !== undefined)
+  const failing = ROW_ORDER.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}>U5 color binding checks</Text>
+      <Text style={styles.subtitle}>
+        useTransform color ramp + useMotionTemplate transform, style-bound ({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 ${ROW_ORDER.length} rows`
+          : `${Object.keys(rows).length}/${ROW_ORDER.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}>
+        stage: {stage} · x={x.get()} · color: {liveColor} · followerΔ: {liveDelta} · probe:{' '}
+        {probeNow}
+      </Text>
+
+      {/* The subjects. The screenshot carries the host-received color evidence; the follower's
+          committed position is additionally read back from the host against the marker. The
+          track gets its OWN full-width row — beside the 64px subject it would shrink below the
+          300px travel and push the follower off-screen at the x=300 dwell. */}
+      <View style={styles.stageRow}>
+        <MotionView
+          style={[styles.subject, { backgroundColor: color }]}
+          accessibilityLabel="u5-color-subject"
+        />
+        <MotionView
+          style={[styles.probe, { backgroundColor: probe }]}
+          accessibilityLabel="u5-invalid-probe"
+        />
+      </View>
+      <View style={styles.track} accessibilityLabel="u5-follower-track">
+        <View ref={markerRef} style={styles.marker} accessibilityLabel="u5-follower-marker" />
+        <MotionView
+          ref={followerRef}
+          style={[styles.follower, { transform: template }]}
+          accessibilityLabel="u5-follower"
+        />
+      </View>
+
+      {ROW_ORDER.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={3}>
+                {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' },
+  subject: { width: 64, height: 64, borderRadius: 12 },
+  track: {
+    width: 336,
+    maxWidth: '100%',
+    height: 48,
+    marginTop: 14,
+    backgroundColor: '#14141d',
+    borderRadius: 8,
+    justifyContent: 'center',
+  },
+  marker: {
+    position: 'absolute',
+    left: 0,
+    top: 6,
+    width: 36,
+    height: 36,
+    borderWidth: 1,
+    borderColor: '#33333f',
+    borderRadius: 8,
+  },
+  follower: {
+    position: 'absolute',
+    left: 0,
+    top: 6,
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: '#8a8aa0',
+  },
+  probe: { width: 64, height: 24, borderRadius: 6, marginLeft: 16 },
+  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 },
+})