feat: rewrite Rozenite plugin to use HTTP API and add playground integration

The CDP binding approach (Runtime.addBinding + Runtime.bindingCalled) does not
work in Hermes/Fusebox New Architecture — binding events are routed to the
DevTools frontend only, not to debugging sessions. Switch to @rozenite/metro's
HTTP agent API (/rozenite/agent/*) which is designed for this use case.

Remove bootstrap.ts and tool-registry.ts; the HTTP session owns tool state.
CDP session disconnects no longer tear down the Rozenite session since the
HTTP session is independent of the CDP transport.

Add playground integration: metro.config.js wraps Expo config with withRozenite,
use-rozenite-bridge.ts registers three test tools (echo, getTimestamp,
getPlaygroundInfo), and index.tsx renders a Rozenite status section when the
Fusebox dispatcher global is present.

Author: burczu

packages/agent-cdp/src/__tests__/rozenite-plugin.test.ts

@@ -1,5 +1,3 @@
-import crypto from "node:crypto";
-
 import type { TargetDescriptor } from "@agent-cdp/protocol";
 
 import type {
@@ -8,31 +6,24 @@ import type {
   AgentPluginDetachContext,
   AgentPluginState,
   AgentPluginTargetContext,
-  AgentPluginTargetSession,
 } from "../../plugin.js";
-import { bootstrapRozenite } from "./bootstrap.js";
 import {
-  DOMAIN_NAME,
-  RUNTIME_GLOBAL,
-  type AgentToAppMessage,
-  type AppToAgentMessage,
-  type BindingPayload,
+  ROZENITE_AGENT_BASE,
+  type RozeniteApiResponse,
+  type RozeniteApiTool,
+  type RozeniteSessionInfo,
 } from "./protocol.js";
-import { RozeniteToolRegistry } from "./tool-registry.js";
 
 export class RozenitePlugin implements AgentPlugin {
   readonly id = "rozenite";
   readonly displayName = "Rozenite";
-  readonly description = "Rozenite React Native devtools bridge";
+  readonly description = "Rozenite React Native agent bridge";
   readonly commands: readonly AgentPluginCommand[];
 
   private state: AgentPluginState = { kind: "idle" };
-  private readonly registry = new RozeniteToolRegistry();
+  private sessionId: string | null = null;
+  private metroBaseUrl: string | null = null;
   private abortController: AbortController | null = null;
-  private readonly pendingCalls = new Map<string, {
-    resolve: (value: unknown) => void;
-    reject: (reason: Error) => void;
-  }>();
 
   constructor() {
     this.commands = this.buildCommands();
@@ -47,90 +38,73 @@ export class RozenitePlugin implements AgentPlugin {
   }
 
   async onTargetSelected(ctx: AgentPluginTargetContext): Promise<void> {
-    this.state = { kind: "waiting-for-runtime", reason: `Waiting for ${RUNTIME_GLOBAL}` };
-    this.registry.clear();
+    this.state = { kind: "waiting-for-runtime", reason: "Connecting to Rozenite HTTP agent..." };
+    this.sessionId = null;
+    this.metroBaseUrl = null;
     this.abortController = new AbortController();
-    ctx.session.onDisconnected(() => this.handleDisconnect());
-    void this.runBootstrap(ctx.session);
+    void this.connect(ctx.session.target);
   }
 
   async onTargetReconnected(ctx: AgentPluginTargetContext): Promise<void> {
     return this.onTargetSelected(ctx);
   }
 
   async onTargetCleared(_ctx: AgentPluginDetachContext): Promise<void> {
-    this.teardown(new Error("Target cleared"));
+    await this.teardown();
     this.state = { kind: "idle" };
   }
 
-  private handleDisconnect(): void {
-    this.teardown(new Error("Target disconnected"));
-    this.state = { kind: "idle" };
-  }
-
-  private teardown(error: Error): void {
-    this.abortController?.abort();
+  private async teardown(): Promise<void> {
+    const ctrl = this.abortController;
     this.abortController = null;
-    this.registry.clear();
-    for (const pending of this.pendingCalls.values()) {
-      pending.reject(error);
+    ctrl?.abort();
+
+    const { sessionId, metroBaseUrl } = this;
+    this.sessionId = null;
+    this.metroBaseUrl = null;
+
+    if (sessionId && metroBaseUrl) {
+      void fetch(`${metroBaseUrl}${ROZENITE_AGENT_BASE}/sessions/${sessionId}`, {
+        method: "DELETE",
+      }).catch(() => {});
     }
-    this.pendingCalls.clear();
   }
 
-  private async runBootstrap(session: AgentPluginTargetSession): Promise<void> {
+  private async connect(target: TargetDescriptor): Promise<void> {
+    const metroBaseUrl = target.sourceUrl;
+    const deviceId = target.reactNative?.logicalDeviceId;
+    const signal = this.abortController?.signal;
+
     try {
-      const { bindingName } = await bootstrapRozenite(session, this.abortController!.signal);
-
-      session.onEvent((event) => {
-        if (event.method !== "Runtime.bindingCalled") return;
-        const params = event.params as { name?: string; payload?: string };
-        if (params.name !== bindingName) return;
-        try {
-          const envelope = JSON.parse(params.payload ?? "") as BindingPayload;
-          if (envelope.domain !== DOMAIN_NAME) return;
-          this.handleMessage(envelope.message as AppToAgentMessage);
-        } catch {}
+      const body: Record<string, string> = {};
+      if (deviceId) body.deviceId = deviceId;
+
+      const response = await fetch(`${metroBaseUrl}${ROZENITE_AGENT_BASE}/sessions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+        signal,
       });
 
-      await this.sendToApp(session, { type: "agent-session-ready" });
-      this.state = { kind: "ready" };
-    } catch (err) {
-      if ((err as Error).message !== "aborted") {
-        this.state = { kind: "error", reason: (err as Error).message };
+      const json = (await response.json()) as RozeniteApiResponse<{ session: RozeniteSessionInfo }>;
+
+      if (signal?.aborted) return;
+
+      if (!json.ok) {
+        throw new Error(json.error?.message ?? "Failed to create Rozenite session");
       }
-    }
-  }
 
-  private handleMessage(msg: AppToAgentMessage): void {
-    switch (msg.type) {
-      case "register-tool":
-        this.registry.register("app", msg.tools);
-        break;
-      case "unregister-tool":
-        this.registry.unregister(msg.toolNames);
-        break;
-      case "tool-result": {
-        const pending = this.pendingCalls.get(msg.callId);
-        if (!pending) return;
-        this.pendingCalls.delete(msg.callId);
-        if (msg.success) {
-          pending.resolve({ success: true, result: msg.result });
-        } else {
-          pending.resolve({ success: false, error: msg.error });
-        }
-        break;
+      this.metroBaseUrl = metroBaseUrl;
+      this.sessionId = json.result!.session.id;
+      this.state = { kind: "ready" };
+    } catch (err) {
+      const error = err as Error;
+      if (error.name !== "AbortError" && !signal?.aborted) {
+        this.state = { kind: "error", reason: error.message };
       }
     }
   }
 
-  private async sendToApp(session: AgentPluginTargetSession, message: AgentToAppMessage): Promise<void> {
-    const payload = JSON.stringify(JSON.stringify(message));
-    await session.send("Runtime.evaluate", {
-      expression: `${RUNTIME_GLOBAL}.sendMessage('${DOMAIN_NAME}', ${payload})`,
-    });
-  }
-
   private buildCommands(): AgentPluginCommand[] {
     return [
       {
@@ -139,10 +113,20 @@ export class RozenitePlugin implements AgentPlugin {
         alwaysExecutable: true,
         execute: async (ctx) => {
           const state = ctx.getState();
+          let toolCount = 0;
+          if (state.kind === "ready" && this.sessionId && this.metroBaseUrl) {
+            try {
+              const resp = await fetch(
+                `${this.metroBaseUrl}${ROZENITE_AGENT_BASE}/sessions/${this.sessionId}`
+              );
+              const json = (await resp.json()) as RozeniteApiResponse<{ session: RozeniteSessionInfo }>;
+              if (json.ok && json.result) toolCount = json.result.session.toolCount;
+            } catch {}
+          }
           return {
             state: state.kind,
             ...(state.kind === "error" ? { error: state.reason } : {}),
-            toolCount: this.registry.size,
+            toolCount,
             target: ctx.session?.target ?? null,
           };
         },
@@ -151,51 +135,47 @@ export class RozenitePlugin implements AgentPlugin {
         name: "tools",
         summary: "List registered Rozenite tools",
         execute: async () => {
-          return this.registry.list().map((t) => ({
-            name: t.qualifiedName,
-            description: t.description,
-          }));
+          const { sessionId, metroBaseUrl } = this;
+          if (!sessionId || !metroBaseUrl) throw new Error("No active Rozenite session");
+          const resp = await fetch(`${metroBaseUrl}${ROZENITE_AGENT_BASE}/sessions/${sessionId}/tools`);
+          const json = (await resp.json()) as RozeniteApiResponse<{ tools: RozeniteApiTool[] }>;
+          if (!json.ok) throw new Error(json.error?.message ?? "Failed to list tools");
+          return (json.result?.tools ?? []).map((t) => ({ name: t.name, description: t.description }));
         },
       },
       {
         name: "tool-schema",
         summary: "Show input schema for a Rozenite tool",
         execute: async (_ctx, input) => {
           const { name } = input as { name: string };
-          const tool = this.registry.get(name);
+          const { sessionId, metroBaseUrl } = this;
+          if (!sessionId || !metroBaseUrl) throw new Error("No active Rozenite session");
+          const resp = await fetch(`${metroBaseUrl}${ROZENITE_AGENT_BASE}/sessions/${sessionId}/tools`);
+          const json = (await resp.json()) as RozeniteApiResponse<{ tools: RozeniteApiTool[] }>;
+          if (!json.ok) throw new Error(json.error?.message ?? "Failed to fetch tools");
+          const tool = (json.result?.tools ?? []).find((t) => t.name === name);
           if (!tool) throw new Error(`Tool '${name}' not found`);
           return tool.inputSchema;
         },
       },
       {
         name: "call",
         summary: "Call a Rozenite tool",
-        execute: async (ctx, input) => {
+        execute: async (_ctx, input) => {
           const { name, arguments: args } = input as { name: string; arguments?: unknown };
-          const tool = this.registry.get(name);
-          if (!tool) throw new Error(`Tool '${name}' not found`);
-
-          const callId = crypto.randomUUID();
-          return new Promise<unknown>((resolve, reject) => {
-            this.pendingCalls.set(callId, { resolve, reject });
-
-            void this.sendToApp(ctx.session!, {
-              type: "tool-call",
-              callId,
-              toolName: name,
-              arguments: args ?? null,
-            }).catch((err: unknown) => {
-              this.pendingCalls.delete(callId);
-              reject(err instanceof Error ? err : new Error(String(err)));
-            });
-
-            setTimeout(() => {
-              if (this.pendingCalls.has(callId)) {
-                this.pendingCalls.delete(callId);
-                reject(new Error(`Tool call '${name}' timed out after 60s`));
-              }
-            }, 60_000);
-          });
+          const { sessionId, metroBaseUrl } = this;
+          if (!sessionId || !metroBaseUrl) throw new Error("No active Rozenite session");
+          const resp = await fetch(
+            `${metroBaseUrl}${ROZENITE_AGENT_BASE}/sessions/${sessionId}/call-tool`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ toolName: name, args: args ?? null }),
+            }
+          );
+          const json = (await resp.json()) as RozeniteApiResponse<{ result: unknown }>;
+          if (!json.ok) throw new Error(json.error?.message ?? "Tool call failed");
+          return json.result?.result;
         },
       },
     ];

packages/agent-cdp/src/plugins/rozenite/bootstrap.ts

@@ -1,25 +1,25 @@
-export const RUNTIME_GLOBAL = "__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__";
-export const DOMAIN_NAME = "rozenite";
-export const POLL_INTERVAL_MS = 500;
-export const POLL_TIMEOUT_MS = 30_000;
+export const ROZENITE_AGENT_BASE = "/rozenite/agent";
 
-export interface AgentTool {
+export interface RozeniteApiTool {
   name: string;
   description: string;
   inputSchema: object;
 }
 
-export type AppToAgentMessage =
-  | { type: "register-tool"; tools: AgentTool[] }
-  | { type: "unregister-tool"; toolNames: string[] }
-  | { type: "tool-result"; callId: string; success: true; result: unknown }
-  | { type: "tool-result"; callId: string; success: false; error: string };
-
-export type AgentToAppMessage =
-  | { type: "agent-session-ready" }
-  | { type: "tool-call"; callId: string; toolName: string; arguments: unknown };
+export interface RozeniteSessionInfo {
+  id: string;
+  deviceId: string;
+  deviceName: string;
+  status: string;
+  toolCount: number;
+  createdAt: number;
+  lastActivityAt: number;
+  connectedAt?: number;
+  lastError?: string;
+}
 
-export interface BindingPayload {
-  domain: string;
-  message: unknown;
+export interface RozeniteApiResponse<T> {
+  ok: boolean;
+  result?: T;
+  error?: { message: string };
 }