Who is delegating writing code to agents?

Who is delegating testing changes to agents?

Giving agents
hands and eyes
in React Native

Callstack / Szymon Chmal

Szymon Chmal speaking on stage
ABOUT / SPEAKER

Szymon Chmal

Incubator Lead at Callstack

GITHUBV3RON X / TWITTER@ChmalSzymon LINKEDINszymon-chmal

OPEN SOURCE

01 / THE GAP

The agent loses the app
as soon as it starts

01Change
→
02Build
→
03Run
→
04Test
→
05Debug
→
06Verify
AGENT DEVELOPER

Agents can change, build, and run. A developer still carries testing, debugging, and verification.

02 / THE ACCELERATION

Code generation
skyrocketed

An illustrative logarithmic chart showing code generation capacity accelerating sharply over time.
Code generation growth On a logarithmic vertical scale marked one, ten, one hundred, and one thousand times, a single purple line rises from the baseline toward one thousand times. CODE GENERATION
03 / THE BOTTLENECK

Verification
stays flat

An illustrative logarithmic comparison showing verification rising slowly while code generation accelerates far above it.
Code generation and verification growth On a logarithmic vertical scale marked one, ten, one hundred, and one thousand times, the muted purple code generation curve reaches the top while a green verification line remains close to one times. CODE GENERATION VERIFICATION THE GAP
04 / THE BLIND SPOTS

Why are agents
stuck guessing?

01 RUNTIME

No insight into what’s happening under the hood

02 DEVICE

No easy way to interact with simulators or physical devices

05 / THE FIRST WINDOW

Rozenite opened
the first window

Agents gained structured access to the state inside a running React Native app.

rozenite.dev ↗
REACT NATIVE DEVTOOLS
Rozenite React Navigation panel showing navigation timeline, action details, and navigation state
06 / AGENT ACCESS

Agents reach Rozenite
through the shell

One session connects the agent to the running app. Plugin domains expose navigation and storage as tools.

AGENT / ROZENITE SESSION
$npx rozenite agent session create
CONNECTED session rz_7f2a · iPhone 16 Pro
# Where is the user?
$npx rozenite agent at-rozenite__react-navigation-plugin call \
  --tool get-focused-route --args '{}' --session rz_7f2a
{ "focusedRoute": { "name": "Payment" }, "routePath": ["Checkout", "Payment"] }
# What persisted state is available?
$npx rozenite agent at-rozenite__mmkv-plugin call \
  --tool list-storages --args '{}' --session rz_7f2a
{ "storages": [{ "id": "default", "entryCount": 12 }] }
$npx rozenite agent at-rozenite__mmkv-plugin call \
  --tool list-entries --args '{"storageId":"default"}' --session rz_7f2a
{ "keys": ["premium_offer", "checkout_step"] }
$npx rozenite agent at-rozenite__mmkv-plugin call \
  --tool read-entry --args '{"storageId":"default","key":"premium_offer"}' --session rz_7f2a
{ "entry": { "key": "premium_offer", "type": "boolean", "value": false } }
07 / BUSINESS MEANING

Rozenite can expose the
meaning behind the state

TECHNICAL SIGNALS
route/checkout/payment
storagepremium_offer: false
network200 OK
APP-DEFINED TOOL explain-premium-offer 
{
  "visible": false,
  "eligible": false,
  "reason": "already_subscribed"
}
AGENT REASONING

Understand the rule.

Form a hypothesis.

Change the conditions.

The debugging surface can include the business rules that define what should happen.

08 / REACT RENDERING

Agents can reason about
React rendering

Rozenite

React insight alongside app state, network activity, and custom tools.

agent-react-devtools

Direct, CLI-first access to the React DevTools protocol.

component tree props + state hooks render profiling
Checkout1 render PremiumOffer4 renders Price1 render

Runtime evidence connects component behavior to the data and renders that produced it.

09 / THE MISSING VIEW

React evidence still does not prove
what appeared on screen

✓ business rule correct
✓ props and state correct
✓ component rendered
× interface obscured
10 / THE DEVICE LAYER

agent-device brings
the device into the loop

Agents can see, understand, and operate what is actually running on simulators or physical devices.

agent-device.dev ↗
TERMINAL
$ agent-device snapshot -i
$ agent-device tap @e3
11 / EYES

Agents read both
structure and pixels

SEMANTIC VIEW
@e1 [heading] "Checkout"
@e2 [text] "Annual plan · $99"
@e3 [button] "Continue"
@e4 [text] "Total today · $99.00"
VISUAL VIEW
12 / HANDS

The agent continues
the flow on its own

01 snapshot -i 02 tap @e3 03 fill @e7 "hello@callstack.com" 04 swipe up 05 snapshot -i
13 / REMOTE DEVICES

Cloud agents do not
come with iPhones

CLOUD / LINUX Lightweight sandboxes
REMOTE / MACOS Simulators + devices
14 / DEVICE LEASES

Lease the device
when the agent needs it

AGENT A AGENT B AGENT C
PROXY Mac
iPhone 17 Pro Pixel 10 Pro iPad Pro M5
MACagent-device proxy --port 4310
AGENT agent-device connect proxy
--daemon-base-url https://example.trycloudflare.com/agent-device
--daemon-auth-token $TOKEN
LEASEagent-device open Maps --platform ios --device "iPhone 17 Pro"
RELEASEagent-device close
DONEagent-device disconnect
15 / PROXY SHOWCASE

The agent works
through the proxy

Interaction and visual evidence flow through the agent-device proxy.

CLOUD AGENT→PROXY→DEVICE
16 / THE EVIDENCE STACK

One agent can combine
every layer of evidence

01

Business meaning

Rozenite exposes app-defined rules, decisions, and safe controls.

02

React rendering

Rozenite and agent-react-devtools expose component behavior.

03

JavaScript runtime

CDP provides logs, execution context, and runtime diagnostics.

04

Device + pixels

agent-device adds the rendered interface, interaction, and proof.

17 / ONE BUG, END TO END
BUG #247

"The premium offer disappears after restart."

  1. 01Reproduce the flow
  2. 02Inspect persisted state
  3. 03Check the network response
  4. 04Inspect the React component
  5. 05Change the condition
  6. 06Repeat and capture evidence
18 / PROOF

Evidence instead
of confidence

AGENT RESPONSE

"The fix should work."

VERIFICATION RECEIPT#247
Reproduce reported flow ✓ PASS
Capture before state ✓ PASS
Verify network response ✓ PASS
Replay on iOS ✓ PASS
Replay on Android ✓ PASS
19 / REPLAY

One exploration becomes
a repeatable check

01ExploreTemporary refs
→
02StabilizeDurable selectors
→
03Replay.ad script
→
04VerifyLocal + CI
agent-device.dev ↗
20 / THE CLOSED LOOP

The agent can work
through the running app

01Change
→
02Build
→
03Run
→
04Observe
→
05Interact
→
06Debug
→
07Verify
AGENT

The agent carries the feedback loop. A developer sets direction and decides what ships.

What’s left for us, developers?

21 / THE BIGGER PICTURE

Developers own
the bigger picture

01

Turn product intent into clear, unambiguous requirements.

02

Keep the architecture aligned with those requirements.

03

Make the system maintainable and extensible as it evolves.

04

Judge the evidence, risk, and readiness to ship.

The agent operates the loop. The developer keeps the whole system coherent.

22 / START HERE

Give your agent the
full feedback loop.

01 / APP STATE

Rozenite

Expose insights into what’s happening under the hood.

rozenite.dev ↗
QR code for the Rozenite GitHub repository
← → NAVIGATE · F FULLSCREEN · O OVERVIEW