@barefootjs/jsx 0.10.1 → 0.12.0

package/src/__tests__/profiler-batch-advisor.test.ts

@@ -0,0 +1,198 @@
+/**
+ * Batch advisor analysis (#1690, §4.2.3).
+ *
+ * Per turn, measures effect `totalRuns` vs `distinctSubscribers`; the gap is
+ * what a `batch()` wrap would collapse. Measured half — every candidate is
+ * `safety: 'unverified'` until the static oracle lands.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeBatchAdvisor, formatBatchAdvisor, buildIdIndex, assessBatchSafety } from '../profiler'
+import { buildComponentAnalysis } from '../debug'
+import type { ProfilerEvent } from '@barefootjs/shared'
+
+const SAFETY_SRC = `
+  'use client'
+  import { createSignal, createMemo } from '@barefootjs/client'
+  export function C() {
+    const [a, setA] = createSignal(0)
+    const [b, setB] = createSignal(0)
+    const sum = createMemo(() => a() + b())
+    return <div></div>
+  }
+`
+const safetyGraph = buildComponentAnalysis(SAFETY_SRC, 'C.tsx').graph
+
+describe('assessBatchSafety (post-write-derived-read oracle, §4.2.3)', () => {
+  const base = { hasIndirectSetters: false, graph: safetyGraph }
+
+  test('writes only, no derived read → safe', () => {
+    expect(assessBatchSafety({ ...base, handler: '() => { setA(1); setB(2) }', setterNames: ['setA', 'setB'], writtenSignals: ['a', 'b'] })).toBe('safe')
+  })
+  test('reads a downstream memo after a write → unsafe', () => {
+    expect(assessBatchSafety({ ...base, handler: '() => { setA(1); console.log(sum()) }', setterNames: ['setA'], writtenSignals: ['a'] })).toBe('unsafe')
+  })
+  test('reads the memo before the write → safe', () => {
+    expect(assessBatchSafety({ ...base, handler: '() => { const x = sum(); setA(x) }', setterNames: ['setA'], writtenSignals: ['a'] })).toBe('safe')
+  })
+  test('indirect setters (via a helper) → unverified', () => {
+    expect(assessBatchSafety({ ...base, handler: '() => doStuff()', hasIndirectSetters: true, setterNames: ['setA'], writtenSignals: ['a'] })).toBe('unverified')
+  })
+  test('an unknown call after a write → unverified (could read a memo)', () => {
+    expect(assessBatchSafety({ ...base, handler: '() => { setA(1); maybeReads() }', setterNames: ['setA'], writtenSignals: ['a'] })).toBe('unverified')
+  })
+})
+
+let seq = 0
+// `turn`/`turnSeq` are both always present on a real SR2 event (`number | null`).
+// Default them here so fixtures match the wire contract; per-turn helpers below
+// stamp a concrete `turn`, and grouping falls back to `turn` when `turnSeq` is
+// null, so distinct turn ids stay distinct.
+const ev = (type: ProfilerEvent['type'], f: Partial<ProfilerEvent> = {}): ProfilerEvent =>
+  ({ type, seq: seq++, turn: null, turnSeq: null, ...f })
+
+// A signal write the handler makes directly (depth 0). The recording sink only
+// stamps the turn while one is open, so `turn` is always set for these.
+const set = (signal: string, turn: string): ProfilerEvent => ev('signalSet', { signal, turn })
+
+// One effect run, modeled the way the real sink records it: an `effectEnter`
+// bracketed by its `effectExit`. Pairing them is what returns the effect-stack
+// depth to 0 between runs, so a later `set()` in the same turn is still seen as
+// a direct (depth-0) handler write. `nested` events (e.g. a memo writing its
+// private signal) are emitted *between* the enter/exit, i.e. at depth > 0.
+const run = (
+  subscriber: string,
+  turn: string,
+  nested: ProfilerEvent[] = [],
+): ProfilerEvent[] => [
+  ev('effectEnter', { subscriber, turn }),
+  ...nested,
+  ev('effectExit', { subscriber, turn, dur: 0 }),
+]
+
+describe('analyzeBatchAdvisor', () => {
+  test('savings = totalRuns - distinctSubscribers for a multi-write turn', () => {
+    seq = 0
+    // Turn t1: write a, its cascade re-runs e1+e2, then (depth back to 0) write
+    // b re-runs e1+e2 again → 4 runs, 2 distinct, 2 handler writes.
+    const events: ProfilerEvent[] = [
+      set('C#signal:a', 't1'),
+      ...run('C#effect:e1', 't1'),
+      ...run('C#effect:e2', 't1'),
+      set('C#signal:b', 't1'),
+      ...run('C#effect:e1', 't1'),
+      ...run('C#effect:e2', 't1'),
+    ]
+    const r = analyzeBatchAdvisor(events)
+    expect(r.candidates).toHaveLength(1)
+    expect(r.candidates[0]).toMatchObject({
+      turn: 't1', totalRuns: 4, distinctSubscribers: 2, writes: 2, savings: 2, safety: 'unverified',
+    })
+  })
+
+  test('a single-write turn is never a candidate, however wide it fans out', () => {
+    seq = 0
+    // One `set()` recomputes a memo (which writes its own private signal — a
+    // nested, depth-1 set that must NOT count as a handler write) and then
+    // repaints a 4-cell loop: one binding id, four runs. `batch()` would
+    // collapse nothing (one handler write), so this is not a candidate — the
+    // pre-#1690 model wrongly read it as "saves 4".
+    const events: ProfilerEvent[] = [
+      set('Grid#signal:selected', 't1'),
+      ...run('Grid#memo:rows', 't1', [set('Grid#memo:rows', 't1')]),
+      ...run('Grid#binding:s9', 't1'),
+      ...run('Grid#binding:s9', 't1'),
+      ...run('Grid#binding:s9', 't1'),
+      ...run('Grid#binding:s9', 't1'),
+    ]
+    expect(analyzeBatchAdvisor(events).candidates).toHaveLength(0)
+  })
+
+  test('a turn where every effect runs once is not a candidate', () => {
+    seq = 0
+    const events: ProfilerEvent[] = [
+      set('C#signal:a', 't1'),
+      ...run('C#effect:e1', 't1'),
+      set('C#signal:b', 't1'),
+      ...run('C#effect:e2', 't1'),
+    ]
+    expect(analyzeBatchAdvisor(events).candidates).toHaveLength(0)
+  })
+
+  test('runs outside any turn are ignored', () => {
+    seq = 0
+    const events: ProfilerEvent[] = [
+      ev('signalSet', { signal: 'C#signal:a' }), // turn null
+      ev('signalSet', { signal: 'C#signal:b' }),
+      ev('effectEnter', { subscriber: 'C#effect:e1' }), // turn null
+      ev('effectExit', { subscriber: 'C#effect:e1' }),
+      ev('effectEnter', { subscriber: 'C#effect:e1' }),
+      ev('effectExit', { subscriber: 'C#effect:e1' }),
+    ]
+    expect(analyzeBatchAdvisor(events).candidates).toHaveLength(0)
+  })
+
+  test('ranks turns by savings descending', () => {
+    seq = 0
+    const events: ProfilerEvent[] = [
+      // t1 saves 1 (two writes, e1 runs once per write)
+      set('C#signal:a', 't1'),
+      ...run('C#effect:e1', 't1'),
+      set('C#signal:b', 't1'),
+      ...run('C#effect:e1', 't1'),
+      // t2 saves 3 (two writes, e1 runs four times)
+      set('C#signal:a', 't2'),
+      ...run('C#effect:e1', 't2'),
+      ...run('C#effect:e1', 't2'),
+      set('C#signal:b', 't2'),
+      ...run('C#effect:e1', 't2'),
+      ...run('C#effect:e1', 't2'),
+    ]
+    const r = analyzeBatchAdvisor(events)
+    expect(r.candidates.map(c => c.turn)).toEqual(['t2', 't1'])
+    expect(r.candidates[0].savings).toBe(3)
+  })
+
+  test('resolves the handler turn id to source loc when given an id index', () => {
+    seq = 0
+    const src = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Form() {
+        const [a, setA] = createSignal(0)
+        const [b, setB] = createSignal(0)
+        return <button onClick={() => { setA(1); setB(2) }}>{a() + b()}</button>
+      }
+    `
+    const { graph } = buildComponentAnalysis(src, 'Form.tsx')
+    const index = buildIdIndex(graph)
+    // Find the handler turn id the compiler/runtime would emit for the button.
+    const turn = [...index.keys()].find(k => k.startsWith('Form#handler:'))!
+    expect(turn).toBeDefined()
+    const events: ProfilerEvent[] = [
+      set('Form#signal:a', turn),
+      ...run('Form#binding:s0', turn),
+      set('Form#signal:b', turn),
+      ...run('Form#binding:s0', turn),
+    ]
+    const c = analyzeBatchAdvisor(events, index).candidates[0]
+    expect(c.loc?.file).toBe('Form.tsx')
+    expect(c.loc?.line).toBeGreaterThan(0)
+    expect(formatBatchAdvisor(analyzeBatchAdvisor(events, index))).toMatch(/\(Form\.tsx:\d+\)/)
+  })
+
+  test('formats candidates and never claims safety in the measured half', () => {
+    seq = 0
+    const turn = 'Checkout#handler:s0:submit'
+    const events: ProfilerEvent[] = [
+      set('Checkout#signal:a', turn),
+      ...run('C#effect:e1', turn),
+      set('Checkout#signal:b', turn),
+      ...run('C#effect:e1', turn),
+    ]
+    const out = formatBatchAdvisor(analyzeBatchAdvisor(events))
+    expect(out).toContain('batch candidate 2→1')
+    expect(out).toContain('safety unverified')
+    expect(out).not.toContain(', safe)')
+  })
+})

package/src/__tests__/profiler-coverage-conformance.test.ts

@@ -0,0 +1,360 @@
+/**
+ * Profiler coverage conformance (#1690, SR4).
+ *
+ * This is the drift guard for the profiler's id instrumentation. The compiler
+ * attributes reactive re-runs to source by emitting `<Component>#binding:<slot>`
+ * / `#handler:<slot>:<event>` / `#signal:<name>` / `#memo:<name>` /
+ * `#effect:<line>` ids, and `buildIdIndex` resolves them back to a source line.
+ * Because a binding/loop id is an *optional* trailing argument (required for
+ * SR8 — byte-identical output when profiling is off), forgetting to thread it
+ * into a NEW emit path is not a type error; the effect would silently re-run as
+ * a bare runtime id and never show attributed in `bf debug profile`.
+ *
+ * `computeGaps()` computes the bidirectional invariant for one component:
+ *
+ *   (a) coverage   — every reactive entity the analyzer reports (DOM bindings,
+ *       event handlers, signals, memos) is emitted with a matching id. A new
+ *       emit path that forgets its id surfaces here as `missing`.
+ *   (b) resolution — every `<Comp>#…` id emitted in the client JS resolves via
+ *       `buildIdIndex`. A dropped/renamed analyzer entity, or an id built from a
+ *       non-slot (`#binding:?`), surfaces here as `unresolved`.
+ *
+ * The MATRIX exercises every reactive emit path. If you add a new emit shape,
+ * add a representative component to it and thread `profileComponentName` until
+ * `computeGaps()` is empty — that is the contract. The `guard self-test` block
+ * proves `computeGaps()` actually detects a dropped id and a bogus id, so the
+ * detector itself cannot rot silently.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { buildIdIndex } from '../profiler'
+import { buildComponentAnalysis } from '../debug'
+
+const adapter = new TestAdapter()
+
+// Compilation/analysis are pure for a given (source, name) — memoize so the
+// 13-component matrix (each touched by several assertions) compiles each shape
+// at most twice (on/off) instead of dozens of times. Keeps the suite snappy.
+const jsCache = new Map<string, string>()
+function clientJs(source: string, name: string, profile: boolean): string {
+  const key = `${name}:${profile}`
+  let js = jsCache.get(key)
+  if (js === undefined) {
+    js = compileJSX(source, `${name}.tsx`, { adapter, profile })
+      .files.find(f => f.type === 'clientJs')!.content
+    jsCache.set(key, js)
+  }
+  return js
+}
+
+const graphCache = new Map<string, ReturnType<typeof buildComponentAnalysis>['graph']>()
+function analyze(source: string, name: string): ReturnType<typeof buildComponentAnalysis>['graph'] {
+  let g = graphCache.get(name)
+  if (g === undefined) {
+    g = buildComponentAnalysis(source, `${name}.tsx`).graph
+    graphCache.set(name, g)
+  }
+  return g
+}
+
+/** All `<Comp>#…` profiler ids present in a profile-mode build. */
+function emittedIds(name: string, on: string): string[] {
+  const re = new RegExp(`"(${name}#(?:signal|memo|effect|binding|handler):[^"]+)"`, 'g')
+  return [...new Set([...on.matchAll(re)].map(m => m[1]))]
+}
+
+interface Gaps {
+  /** Analyzer entities with no emitted id (a forgotten emit-side thread). */
+  missing: string[]
+  /** Emitted ids that `buildIdIndex` cannot resolve (a dangling id). */
+  unresolved: string[]
+}
+
+/**
+ * The bidirectional coverage check, as a pure function over a component's
+ * profile-mode client JS and its analysis graph. Shared by the matrix tests and
+ * the guard self-test (which feeds it deliberately-broken input).
+ */
+function computeGaps(name: string, on: string, graph: ReturnType<typeof buildComponentAnalysis>['graph']): Gaps {
+  const index = buildIdIndex(graph)
+  const missing: string[] = []
+  for (const b of graph.domBindings) {
+    if (b.slotId === '?') continue // slot-less → not emittable, analyzer emits none either
+    if (b.type === 'event') {
+      if (!on.includes(`${name}#handler:${b.slotId}:`)) missing.push(`handler ${b.slotId}`)
+    } else if (!on.includes(`"${name}#binding:${b.slotId}"`)) {
+      missing.push(`${b.type} ${b.slotId}`)
+    }
+  }
+  for (const s of graph.signals) {
+    if (!on.includes(`"${name}#signal:${s.name}"`)) missing.push(`signal ${s.name}`)
+  }
+  for (const m of graph.memos) {
+    if (!on.includes(`"${name}#memo:${m.name}"`)) missing.push(`memo ${m.name}`)
+  }
+  const unresolved = emittedIds(name, on).filter(id => !index.has(id))
+  return { missing, unresolved }
+}
+
+function gapsFor(name: string, source: string): Gaps {
+  return computeGaps(name, clientJs(source, name, true), analyze(source, name))
+}
+
+/** One representative component per distinct reactive emit path. */
+const MATRIX: ReadonlyArray<{ name: string; desc: string; source: string }> = [
+  {
+    name: 'TopLevel',
+    desc: 'top-level text + attribute + handler',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function TopLevel() {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(n() + 1)} class={n() > 0 ? 'on' : 'off'}>{n()}</button>
+      }`,
+  },
+  {
+    name: 'PropAttr',
+    desc: 'prop-driven attribute bindings (with and without a co-located handler)',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function PropAttr(props: { id?: string; disabled?: boolean; className?: string }) {
+        const [n, setN] = createSignal(0)
+        return (
+          <div id={props.id} class={\`base \${props.className ?? ''}\`}>
+            <button onClick={() => setN(n() + 1)} class={\`btn \${props.className ?? ''}\`}>{n()}</button>
+          </div>
+        )
+      }`,
+  },
+  {
+    name: 'SignalMemoEffect',
+    desc: 'signal + memo + user effect + keyboard handler',
+    source: `
+      'use client'
+      import { createSignal, createMemo, createEffect } from '@barefootjs/client'
+      export function SignalMemoEffect() {
+        const [n, setN] = createSignal(0)
+        const dbl = createMemo(() => n() * 2)
+        createEffect(() => { console.log(dbl()) })
+        return <button onClick={() => setN(n() + 1)} onKeyDown={() => setN(0)}>{dbl()}</button>
+      }`,
+  },
+  {
+    name: 'CondBranch',
+    desc: 'conditional + branch attribute/text',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function CondBranch() {
+        const [o, setO] = createSignal(false)
+        return (
+          <div>
+            <button onClick={() => setO(!o())}>t</button>
+            {o() && <p class={o() ? 'a' : 'b'}>{o() ? 'yes' : 'no'}</p>}
+          </div>
+        )
+      }`,
+  },
+  {
+    name: 'NestedConditional',
+    desc: 'a conditional nested inside another conditional branch',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function NestedConditional() {
+        const [a, setA] = createSignal(true)
+        const [b] = createSignal(true)
+        return (
+          <div>
+            <button onClick={() => setA(!a())}>x</button>
+            {a() && <div>{b() ? <span>{a() ? 'y' : 'n'}</span> : <em>e</em>}</div>}
+          </div>
+        )
+      }`,
+  },
+  {
+    name: 'LoopChild',
+    desc: 'loop child text + attribute',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function LoopChild() {
+        const [items] = createSignal([{ id: 1, t: 'a', n: 0 }])
+        return <ul>{items().map(it => <li key={it.id} class={it.n > 0 ? 'h' : 'c'}>{it.t}</li>)}</ul>
+      }`,
+  },
+  {
+    name: 'LoopMultiAttr',
+    desc: 'loop child with two reactive attributes on one element',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function LoopMultiAttr() {
+        const [items] = createSignal([{ id: 1, n: 0, t: 'a' }])
+        return <ul>{items().map(it => <li key={it.id} class={it.n > 0 ? 'h' : 'c'} data-t={it.t}>{it.t}</li>)}</ul>
+      }`,
+  },
+  {
+    name: 'Nested',
+    desc: 'loop → conditional+branch-text → inner loop → text',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Nested() {
+        const [rows] = createSignal([{ id: 1, on: true, label: 'a', tags: ['x'] }])
+        return (
+          <ul>
+            {rows().map(r => (
+              <li key={r.id}>
+                {r.on ? <span>{r.label}</span> : <em>off</em>}
+                <ul>{r.tags.map(t => <li key={t}>{t}</li>)}</ul>
+              </li>
+            ))}
+          </ul>
+        )
+      }`,
+  },
+  {
+    name: 'InnerLoopAttr',
+    desc: 'inner (nested) loop child with a reactive attribute',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function InnerLoopAttr() {
+        const [rows] = createSignal([{ id: 1, tags: [{ k: 'x', on: true }] }])
+        return (
+          <ul>
+            {rows().map(r => (
+              <li key={r.id}>
+                <ul>{r.tags.map(t => <li key={t.k} class={t.on ? 'a' : 'b'}>{t.k}</li>)}</ul>
+              </li>
+            ))}
+          </ul>
+        )
+      }`,
+  },
+  {
+    name: 'BranchLoop',
+    desc: 'loop inside a conditional branch',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function BranchLoop() {
+        const [open] = createSignal(true)
+        const [items] = createSignal([{ id: 1, t: 'a' }])
+        return <div>{open() && <ul>{items().map(it => <li key={it.id}>{it.t}</li>)}</ul>}</div>
+      }`,
+  },
+  {
+    name: 'AnchoredLoop',
+    desc: 'whole-item conditional loop (mapArrayAnchored)',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function AnchoredLoop() {
+        const [items] = createSignal([{ id: 1, on: true, t: 'a' }])
+        return <ul>{items().map(it => (it.on ? <li key={it.id}>{it.t}</li> : null))}</ul>
+      }`,
+  },
+  {
+    name: 'StaticLoop',
+    desc: 'static-array loop with signal-driven child text',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function StaticLoop() {
+        const [n] = createSignal(0)
+        const tabs = [{ id: 1 }, { id: 2 }]
+        return <ul>{tabs.map(tab => <li key={tab.id}>{n()}</li>)}</ul>
+      }`,
+  },
+  {
+    name: 'ComponentLoop',
+    desc: 'loop whose body is a child component',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      import { Row } from './Row'
+      export function ComponentLoop() {
+        const [items] = createSignal([{ id: 1, label: 'a' }])
+        return <div>{items().map(it => <Row key={it.id} label={it.label} />)}</div>
+      }`,
+  },
+  {
+    name: 'CompositeLoop',
+    desc: 'loop body mixing a DOM binding and a child component',
+    source: `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      import { Row } from './Row'
+      export function CompositeLoop() {
+        const [items] = createSignal([{ id: 1, t: 'a' }])
+        return <ul>{items().map(it => <li key={it.id}><span>{it.t}</span><Row label={it.t} /></li>)}</ul>
+      }`,
+  },
+]
+
+describe('profiler coverage conformance (#1690 SR4)', () => {
+  for (const { name, desc, source } of MATRIX) {
+    describe(`${name} — ${desc}`, () => {
+      test('(a)+(b) every reactive entity is emitted and every emitted id resolves', () => {
+        const { missing, unresolved } = gapsFor(name, source)
+        expect(missing, `un-instrumented entities in ${name}`).toEqual([])
+        expect(unresolved, `unresolved emitted ids in ${name}`).toEqual([])
+      })
+
+      test('profile mode actually emitted ids (sanity)', () => {
+        const on = clientJs(source, name, true)
+        expect(emittedIds(name, on).length, `${name} emitted no profiler ids`).toBeGreaterThan(0)
+      })
+
+      test('profile off: no profiler ids (SR8)', () => {
+        const off = clientJs(source, name, false)
+        expect(off).not.toContain('#binding:')
+        expect(off).not.toContain('#handler:')
+        expect(off).not.toContain('#signal:')
+        expect(off).not.toContain('#memo:')
+      })
+    })
+  }
+
+  // The detector must itself be proven to fail on broken input — otherwise a
+  // bug in `computeGaps` would make the whole matrix a no-op that passes on
+  // anything. We feed it a real build with one tampering and assert the gap is
+  // reported, for each of the two failure modes.
+  describe('guard self-test — computeGaps detects tampering', () => {
+    const name = 'Nested'
+    const source = MATRIX.find(m => m.name === name)!.source
+
+    test('clean build reports no gaps', () => {
+      const { missing, unresolved } = gapsFor(name, source)
+      expect(missing).toEqual([])
+      expect(unresolved).toEqual([])
+    })
+
+    test('a DROPPED binding id is reported as missing (a)', () => {
+      const on = clientJs(source, name, true)
+      const id = emittedIds(name, on).find(i => i.includes('#binding:'))!
+      // Strip every emission of that one id (the trailing `, "<id>"` argument).
+      const tampered = on.replaceAll(`, ${JSON.stringify(id)}`, '')
+      const { missing, unresolved } = computeGaps(name, tampered, analyze(source, name))
+      const slot = id.split('#binding:')[1]
+      expect(missing.some(m => m.endsWith(slot))).toBe(true)
+      // Dropping an id doesn't create dangling ids.
+      expect(unresolved).toEqual([])
+    })
+
+    test('a BOGUS (unresolvable) id is reported as unresolved (b)', () => {
+      const on = clientJs(source, name, true)
+      // Inject an id whose slot has no domBinding (mirrors a future emit path
+      // that builds an id from a non-slot, e.g. the `#binding:?` regression).
+      const tampered = `${on}\nconst __probe = "Nested#binding:s999"\n`
+      const { unresolved } = computeGaps(name, tampered, analyze(source, name))
+      expect(unresolved).toContain('Nested#binding:s999')
+    })
+  })
+})

package/src/__tests__/profiler-e2e.test.ts

@@ -0,0 +1,104 @@
+/**
+ * End-to-end profiling on the real substrate (#1690).
+ *
+ * Unlike the per-analysis unit tests (which feed synthetic event streams),
+ * this drives the **actual** instrumented runtime — `reactive.ts` (SR1),
+ * `createRecordingSink` (SR2) — over a reactive graph that mirrors the
+ * compiler's profile-mode output 1:1, using the exact ids it emits
+ * (`Cart#signal:qty`, `Cart#memo:total`, `Cart#effect:<line>`,
+ * `Cart#handler:s1:click`). It then joins to the real IR graph (SR4) and runs
+ * the v1 analyses, asserting the end-to-end story holds:
+ *
+ *   an unbatched 3-write click re-runs `total` 5×/turn; a `batch()` would
+ *   collapse 14 effect runs to 5.
+ *
+ * This is the executable proof of the pipeline until the `--scenario` run
+ * driver lands; it also pins the mount-vs-interaction metric split surfaced by
+ * running it.
+ */
+
+import { describe, test, expect, afterEach } from 'bun:test'
+import {
+  createSignal, createMemo, createEffect, createRoot,
+  beginTurn, endTurn, setProfilerSink,
+} from '../../../client/src/reactive'
+import { createRecordingSink } from '../../../client/src/profiler-events'
+import { buildIdIndex, analyzeHotSubscribers, analyzeBatchAdvisor } from '../profiler'
+import { buildComponentAnalysis } from '../debug'
+
+const CART = `
+  'use client'
+  import { createSignal, createMemo, createEffect } from '@barefootjs/client'
+  export function Cart() {
+    const [qty, setQty] = createSignal(1)
+    const [price, setPrice] = createSignal(100)
+    const [coupon, setCoupon] = createSignal(0)
+    const subtotal = createMemo(() => qty() * price())
+    const tax = createMemo(() => subtotal() * 0.1)
+    const total = createMemo(() => subtotal() + tax() - coupon())
+    createEffect(() => { console.log('total', total()) })
+    createEffect(() => { console.log('subtotal', subtotal()) })
+    return <button onClick={() => { setQty(qty() + 1); setPrice(price() + 10); setCoupon(5) }}>{total()}</button>
+  }
+`
+
+afterEach(() => setProfilerSink(null))
+
+/** Run the mirrored Cart graph under the recording sink and return the log. */
+function profileCartClick() {
+  const rec = createRecordingSink()
+  setProfilerSink(rec.sink)
+  createRoot(() => {
+    const [qty, setQty] = createSignal(1, 'Cart#signal:qty')
+    const [price, setPrice] = createSignal(100, 'Cart#signal:price')
+    const [coupon, setCoupon] = createSignal(0, 'Cart#signal:coupon')
+    const subtotal = createMemo(() => qty() * price(), 'Cart#memo:subtotal')
+    const tax = createMemo(() => subtotal() * 0.1, 'Cart#memo:tax')
+    const total = createMemo(() => subtotal() + tax() - coupon(), 'Cart#memo:total')
+    createEffect(() => { void total() }, 'Cart#effect:11')
+    createEffect(() => { void subtotal() }, 'Cart#effect:12')
+    // The compiled handler wrapper: beginTurn → handler body → endTurn.
+    beginTurn('Cart#handler:s1:click')
+    try { setQty(qty() + 1); setPrice(price() + 10); setCoupon(5) } finally { endTurn() }
+  })
+  setProfilerSink(null)
+  return rec.events
+}
+
+describe('profiler end-to-end (real substrate)', () => {
+  test('hot subscribers ranks `total` worst and source-maps it, mount excluded', () => {
+    const { graph } = buildComponentAnalysis(CART, 'Cart.tsx')
+    const index = buildIdIndex(graph)
+    const events = profileCartClick()
+
+    const hot = analyzeHotSubscribers(events, index)
+    const total = hot.subscribers.find(s => s.name === 'total')!
+    expect(total).toBeDefined()
+    expect(total.kind).toBe('memo')
+    expect(total.loc!.file).toBe('Cart.tsx')
+    // The unbatched 3-write turn re-runs `total` 5× — and mount (1 run) is
+    // excluded, so the per-turn figure is 5.0, not the diluted 3.0.
+    expect(total.mountRuns).toBe(1)
+    expect(total.turns).toBe(1)
+    expect(total.runsPerTurn).toBe(5)
+    expect(total.hot).toBe(true)
+
+    // Every hot subscriber resolved to a real source line.
+    for (const s of hot.subscribers) {
+      if (s.subscriber.startsWith('Cart#')) expect(s.loc).toBeDefined()
+    }
+  })
+
+  test('batch advisor reports the multi-write turn as a real saving', () => {
+    const events = profileCartClick()
+    const batch = analyzeBatchAdvisor(events)
+    const cand = batch.candidates.find(c => c.turn === 'Cart#handler:s1:click')!
+    expect(cand).toBeDefined()
+    // 3 unbatched writes cascade the memo chain: 14 effect runs, 5 distinct.
+    expect(cand.writes).toBe(3)
+    expect(cand.totalRuns).toBe(14)
+    expect(cand.distinctSubscribers).toBe(5)
+    expect(cand.savings).toBe(9)
+    expect(cand.safety).toBe('unverified')
+  })
+})