@assistant-ui/react-devtools 1.0.6 → 1.2.1

package/README.md

@@ -1,65 +1,29 @@
-# @assistant-ui/react-devtools
+# `@assistant-ui/react-devtools`
 
-React-first development tools for assistant-ui components. This package ships the reusable React helpers, runtime adapters, and UI necessary to embed the DevTools experience in any host application.
-
-## Features
-
-- **Component Library**: React components for debugging assistant-ui experiences
-- **Event Logging**: Track and inspect assistant-ui events and state changes
-- **Context Viewer**: View Assistant API context and state in real-time
-- **Embeddable Host**: Frame bridges that power custom hosts, including the Chrome extension
+React DevTools UI for `@assistant-ui/react`. Embed an event log, context viewer, and runtime inspector in any host application.
 
 ## Installation
 
-### As React Component Library
-
 ```bash
 npm install @assistant-ui/react-devtools
 ```
 
-### As Chrome Extension
-
-See `apps/devtools-extension` for the standalone Chrome extension source and build scripts (`pnpm --filter @assistant-ui/devtools-extension run build`).
-
 ## Usage
 
-### React Components
-
 ```tsx
-import { DevToolsUI, DevToolsModal } from '@assistant-ui/react-devtools';
-
-// Use the full DevTools UI
-<DevToolsUI />
+import { DevToolsModal, DevToolsFrame } from "@assistant-ui/react-devtools";
 
-// Or use as a modal overlay
-<DevToolsModal />
-```
-
-### Chrome Extension
-
-The Chrome extension now lives under `apps/devtools-extension` as a separate workspace app. It consumes this package at build time to reuse the shared runtime and UI.
-
-## Build Scripts
+// render as a modal overlay
+<DevToolsModal />;
 
-- `npm run build` - Build the React component library
-- `npm run build:lib` - Alias for `build`
-- `npm run dev` - Development build with watch mode
-
-## Package Structure
-
-```
-packages/react-devtools/
-├── src/                     # React component library source
-│   ├── DevToolsHooks.ts     # Core devtools functionality
-│   ├── DevToolsModal.tsx    # Modal wrapper component (iframe host)
-│   └── index.ts             # Main exports
-└── scripts/                 # Build scripts
+// or embed inline as a frame
+<DevToolsFrame />;
 ```
 
-## Development
+## Chrome extension
 
-The devtools package builds with `@assistant-ui/x-buildutils` to transpile the TypeScript sources that power the React helpers and adapters consumed across the workspace.
+A standalone Chrome extension consuming this package lives at [`apps/devtools-extension`](https://github.com/assistant-ui/assistant-ui/tree/main/apps/devtools-extension).
 
-## License
+## Documentation
 
-MIT
+Full reference at [assistant-ui.com/docs/devtools](https://www.assistant-ui.com/docs/devtools).

package/dist/DevToolsFrame.d.ts

@@ -1,8 +1,11 @@
-export interface DevToolsFrameProps {
-    frameUrl?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    title?: string;
+//#region src/DevToolsFrame.d.ts
+interface DevToolsFrameProps {
+  frameUrl?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
 }
-export declare const DevToolsFrame: React.FC<DevToolsFrameProps>;
+declare const DevToolsFrame: React.FC<DevToolsFrameProps>;
+//#endregion
+export { DevToolsFrame, DevToolsFrameProps };
 //# sourceMappingURL=DevToolsFrame.d.ts.map

package/dist/DevToolsFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsFrame.d.ts","sourceRoot":"","sources":["../src/DevToolsFrame.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyCtD,CAAC"}
+{"version":3,"file":"DevToolsFrame.d.ts","names":[],"sources":["../src/DevToolsFrame.tsx"],"mappings":";UAMiB,kBAAA;EACf,QAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAa;EAC3B,KAAA;AAAA;AAAA,cAGW,aAAA,EAAe,KAAA,CAAM,EAAE,CAAC,kBAAA"}

package/dist/DevToolsFrame.js

@@ -1,29 +1,38 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from "react";
 import { FrameHost } from "./FrameHost.js";
 import { DEFAULT_FRAME_URL } from "./constants.js";
-export const DevToolsFrame = ({ frameUrl = DEFAULT_FRAME_URL, className, style, title = "assistant-ui DevTools", }) => {
-    const iframeRef = useRef(null);
-    const frameHostRef = useRef(null);
-    const resolvedFrameUrl = useMemo(() => frameUrl, [frameUrl]);
-    const handleFrameLoad = useCallback(() => {
-        if (frameHostRef.current) {
-            frameHostRef.current.destroy();
-            frameHostRef.current = null;
-        }
-        if (iframeRef.current) {
-            frameHostRef.current = new FrameHost(iframeRef.current);
-        }
-    }, []);
-    useEffect(() => {
-        return () => {
-            if (frameHostRef.current) {
-                frameHostRef.current.destroy();
-                frameHostRef.current = null;
-            }
-        };
-    }, []);
-    return (_jsx("iframe", { ref: iframeRef, src: resolvedFrameUrl, onLoad: handleFrameLoad, className: className, style: style, title: title }));
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/DevToolsFrame.tsx
+const DevToolsFrame = ({ frameUrl = DEFAULT_FRAME_URL, className, style, title = "assistant-ui DevTools" }) => {
+	const iframeRef = useRef(null);
+	const frameHostRef = useRef(null);
+	const resolvedFrameUrl = useMemo(() => frameUrl, [frameUrl]);
+	const handleFrameLoad = useCallback(() => {
+		if (frameHostRef.current) {
+			frameHostRef.current.destroy();
+			frameHostRef.current = null;
+		}
+		if (iframeRef.current) frameHostRef.current = new FrameHost(iframeRef.current);
+	}, []);
+	useEffect(() => {
+		return () => {
+			if (frameHostRef.current) {
+				frameHostRef.current.destroy();
+				frameHostRef.current = null;
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("iframe", {
+		ref: iframeRef,
+		src: resolvedFrameUrl,
+		onLoad: handleFrameLoad,
+		className,
+		style,
+		title
+	});
 };
+//#endregion
+export { DevToolsFrame };
+
 //# sourceMappingURL=DevToolsFrame.js.map

package/dist/DevToolsFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsFrame.js","sourceRoot":"","sources":["../src/DevToolsFrame.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,uBAAoB;AACxC,OAAO,EAAE,iBAAiB,EAAE,uBAAoB;AAShD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,GAAG,uBAAuB,GAChC,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE7D,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC/B,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,CAAC;QAED,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,YAAY,CAAC,OAAO,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;gBACzB,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC/B,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iBACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,gBAAgB,EACrB,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"DevToolsFrame.js","names":[],"sources":["../src/DevToolsFrame.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { FrameHost } from \"./FrameHost\";\nimport { DEFAULT_FRAME_URL } from \"./constants\";\n\nexport interface DevToolsFrameProps {\n  frameUrl?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n}\n\nexport const DevToolsFrame: React.FC<DevToolsFrameProps> = ({\n  frameUrl = DEFAULT_FRAME_URL,\n  className,\n  style,\n  title = \"assistant-ui DevTools\",\n}) => {\n  const iframeRef = useRef<HTMLIFrameElement | null>(null);\n  const frameHostRef = useRef<FrameHost | null>(null);\n\n  const resolvedFrameUrl = useMemo(() => frameUrl, [frameUrl]);\n\n  const handleFrameLoad = useCallback(() => {\n    if (frameHostRef.current) {\n      frameHostRef.current.destroy();\n      frameHostRef.current = null;\n    }\n\n    if (iframeRef.current) {\n      frameHostRef.current = new FrameHost(iframeRef.current);\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (frameHostRef.current) {\n        frameHostRef.current.destroy();\n        frameHostRef.current = null;\n      }\n    };\n  }, []);\n\n  return (\n    <iframe\n      ref={iframeRef}\n      src={resolvedFrameUrl}\n      onLoad={handleFrameLoad}\n      className={className}\n      style={style}\n      title={title}\n    />\n  );\n};\n"],"mappings":";;;;;;AAaA,MAAa,iBAA+C,EAC1D,WAAW,mBACX,WACA,OACA,QAAQ,8BACJ;CACJ,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,eAAe,OAAyB,IAAI;CAElD,MAAM,mBAAmB,cAAc,UAAU,CAAC,QAAQ,CAAC;CAE3D,MAAM,kBAAkB,kBAAkB;EACxC,IAAI,aAAa,SAAS;GACxB,aAAa,QAAQ,QAAQ;GAC7B,aAAa,UAAU;EACzB;EAEA,IAAI,UAAU,SACZ,aAAa,UAAU,IAAI,UAAU,UAAU,OAAO;CAE1D,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS;IACxB,aAAa,QAAQ,QAAQ;IAC7B,aAAa,UAAU;GACzB;EACF;CACF,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,UAAD;EACE,KAAK;EACL,KAAK;EACL,QAAQ;EACG;EACJ;EACA;CACR,CAAA;AAEL"}

package/dist/DevToolsHost.d.ts

@@ -1,35 +1,37 @@
+//#region src/DevToolsHost.d.ts
 interface FrameToHostMessage {
-    type: "subscription" | "clearEvents";
-    data: {
-        apiList?: boolean;
-        apis?: number[];
-        apiId?: number;
-    };
+  type: "subscription" | "clearEvents";
+  data: {
+    apiList?: boolean;
+    apis?: number[];
+    apiId?: number;
+  };
 }
 interface HostToFrameMessage {
-    type: "update";
-    data: {
-        apiList?: Array<{
-            apiId: number;
-        }>;
-        apis?: Array<{
-            apiId: number;
-            state: any;
-            events: any[];
-            modelContext?: any;
-        }>;
-    };
+  type: "update";
+  data: {
+    apiList?: Array<{
+      apiId: number;
+    }>;
+    apis?: Array<{
+      apiId: number;
+      state: any;
+      events: any[];
+      modelContext?: any;
+    }>;
+  };
 }
-export declare class DevToolsHost {
-    private subscription;
-    private unsubscribe?;
-    private onSendMessage;
-    constructor(onSendMessage: (message: HostToFrameMessage) => void);
-    onReceiveMessage(message: FrameToHostMessage): void;
-    private handleSubscription;
-    private subscribeToDevTools;
-    private sendUpdate;
-    destroy(): void;
+declare class DevToolsHost {
+  private subscription;
+  private unsubscribe?;
+  private onSendMessage;
+  constructor(onSendMessage: (message: HostToFrameMessage) => void);
+  onReceiveMessage(message: FrameToHostMessage): void;
+  private handleSubscription;
+  private subscribeToDevTools;
+  private sendUpdate;
+  destroy(): void;
 }
-export {};
+//#endregion
+export { DevToolsHost };
 //# sourceMappingURL=DevToolsHost.d.ts.map

package/dist/DevToolsHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsHost.d.ts","sourceRoot":"","sources":["../src/DevToolsHost.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,cAAc,GAAG,aAAa,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,KAAK,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnC,IAAI,CAAC,EAAE,KAAK,CAAC;YACX,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,GAAG,CAAC;YACX,MAAM,EAAE,GAAG,EAAE,CAAC;YACd,YAAY,CAAC,EAAE,GAAG,CAAC;SACpB,CAAC,CAAC;KACJ,CAAC;CACH;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,YAAY,CAMlB;IACF,OAAO,CAAC,WAAW,CAAC,CAAa;IACjC,OAAO,CAAC,aAAa,CAAwC;gBAEjD,aAAa,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI;IAKhE,gBAAgB,CAAC,OAAO,EAAE,kBAAkB;IAc5C,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,UAAU;IA+DlB,OAAO;CAKR"}
+{"version":3,"file":"DevToolsHost.d.ts","names":[],"sources":["../src/DevToolsHost.ts"],"mappings":";UAMU,kBAAA;EACR,IAAA;EACA,IAAA;IACE,OAAA;IACA,IAAA;IACA,KAAA;EAAA;AAAA;AAAA,UAIM,kBAAA;EACR,IAAA;EACA,IAAA;IACE,OAAA,GAAU,KAAA;MAAQ,KAAA;IAAA;IAClB,IAAA,GAAO,KAAK;MACV,KAAA;MACA,KAAA;MACA,MAAA;MACA,YAAA;IAAA;EAAA;AAAA;AAAA,cAKO,YAAA;EAAA,QACH,YAAA;EAAA,QAOA,WAAA;EAAA,QACA,aAAA;cAEI,aAAA,GAAgB,OAAA,EAAS,kBAAA;EAKrC,gBAAA,CAAiB,OAAA,EAAS,kBAAkB;EAAA,QAcpC,kBAAA;EAAA,QAiBA,mBAAA;EAAA,QAMA,UAAA;EA+DR,OAAA,CAAA;AAAA"}

package/dist/DevToolsHost.js

@@ -1,101 +1,83 @@
+import { sanitizeForMessage, serializeModelContext } from "./utils/serialization.js";
 import { DevToolsHooks } from "@assistant-ui/react";
-import { sanitizeForMessage, serializeModelContext, } from "./utils/serialization.js";
-export class DevToolsHost {
-    subscription = {
-        apiList: false,
-        apis: new Set(),
-    };
-    unsubscribe;
-    onSendMessage;
-    constructor(onSendMessage) {
-        this.onSendMessage = onSendMessage;
-        this.subscribeToDevTools();
-    }
-    onReceiveMessage(message) {
-        switch (message.type) {
-            case "subscription":
-                this.handleSubscription(message.data);
-                break;
-            case "clearEvents":
-                if (typeof message.data.apiId === "number") {
-                    DevToolsHooks.clearEventLogs(message.data.apiId);
-                    // The subscription will automatically trigger an update
-                }
-                break;
-        }
-    }
-    handleSubscription(data) {
-        const prevApiList = this.subscription.apiList;
-        const prevApis = new Set(this.subscription.apis);
-        this.subscription.apiList = data.apiList || false;
-        this.subscription.apis = new Set(data.apis);
-        // Only send update if subscription actually changed
-        const apisChanged = prevApis.size !== this.subscription.apis.size ||
-            [...this.subscription.apis].some((id) => !prevApis.has(id));
-        if (prevApiList !== this.subscription.apiList || apisChanged) {
-            this.sendUpdate();
-        }
-    }
-    subscribeToDevTools() {
-        this.unsubscribe = DevToolsHooks.subscribe(() => {
-            this.sendUpdate();
-        });
-    }
-    sendUpdate() {
-        const update = {
-            type: "update",
-            data: {},
-        };
-        const allApis = DevToolsHooks.getApis();
-        for (const subscriptionApiId of this.subscription.apis) {
-            if (!allApis.has(subscriptionApiId)) {
-                this.subscription.apis.delete(subscriptionApiId);
-            }
-        }
-        if (this.subscription.apiList) {
-            update.data.apiList = [...allApis.keys()].map((apiId) => ({ apiId }));
-            if (this.subscription.apis.size === 0 && allApis.size > 0) {
-                this.subscription.apis = new Set([allApis.keys().next().value]);
-            }
-        }
-        if (this.subscription.apis.size > 0) {
-            update.data.apis = [];
-            for (const apiId of this.subscription.apis) {
-                const apiEntry = allApis.get(apiId);
-                if (apiEntry) {
-                    // Collect state from api scopes (only root source)
-                    const state = {};
-                    if (apiEntry.api) {
-                        for (const [name, scope] of Object.entries(apiEntry.api)) {
-                            if (typeof scope === "function" && "source" in scope) {
-                                // Only forward scopes with source === "root"
-                                if (scope.source === "root") {
-                                    const scopeValue = scope();
-                                    state[name] = scopeValue?.getState?.() ?? scopeValue;
-                                }
-                            }
-                        }
-                    }
-                    // Extract model context from thread runtime
-                    const modelContext = serializeModelContext(apiEntry.api?.thread?.().getModelContext());
-                    update.data.apis.push({
-                        apiId,
-                        state: sanitizeForMessage(state),
-                        events: sanitizeForMessage(apiEntry.logs),
-                        modelContext: modelContext,
-                    });
-                }
-            }
-        }
-        if (Object.keys(update.data).length === 0) {
-            return;
-        }
-        this.onSendMessage(update);
-    }
-    destroy() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
-    }
-}
+//#region src/DevToolsHost.ts
+var DevToolsHost = class {
+	subscription = {
+		apiList: false,
+		apis: /* @__PURE__ */ new Set()
+	};
+	unsubscribe;
+	onSendMessage;
+	constructor(onSendMessage) {
+		this.onSendMessage = onSendMessage;
+		this.subscribeToDevTools();
+	}
+	onReceiveMessage(message) {
+		switch (message.type) {
+			case "subscription":
+				this.handleSubscription(message.data);
+				break;
+			case "clearEvents":
+				if (typeof message.data.apiId === "number") DevToolsHooks.clearEventLogs(message.data.apiId);
+				break;
+		}
+	}
+	handleSubscription(data) {
+		const prevApiList = this.subscription.apiList;
+		const prevApis = new Set(this.subscription.apis);
+		this.subscription.apiList = data.apiList || false;
+		this.subscription.apis = new Set(data.apis);
+		const apisChanged = prevApis.size !== this.subscription.apis.size || [...this.subscription.apis].some((id) => !prevApis.has(id));
+		if (prevApiList !== this.subscription.apiList || apisChanged) this.sendUpdate();
+	}
+	subscribeToDevTools() {
+		this.unsubscribe = DevToolsHooks.subscribe(() => {
+			this.sendUpdate();
+		});
+	}
+	sendUpdate() {
+		const update = {
+			type: "update",
+			data: {}
+		};
+		const allApis = DevToolsHooks.getApis();
+		for (const subscriptionApiId of this.subscription.apis) if (!allApis.has(subscriptionApiId)) this.subscription.apis.delete(subscriptionApiId);
+		if (this.subscription.apiList) {
+			update.data.apiList = [...allApis.keys()].map((apiId) => ({ apiId }));
+			if (this.subscription.apis.size === 0 && allApis.size > 0) this.subscription.apis = new Set([allApis.keys().next().value]);
+		}
+		if (this.subscription.apis.size > 0) {
+			update.data.apis = [];
+			for (const apiId of this.subscription.apis) {
+				const apiEntry = allApis.get(apiId);
+				if (apiEntry) {
+					const state = {};
+					if (apiEntry.api) {
+						for (const [name, scope] of Object.entries(apiEntry.api)) if (typeof scope === "function" && "source" in scope) {
+							if (scope.source === "root") {
+								const scopeValue = scope();
+								state[name] = scopeValue?.getState?.() ?? scopeValue;
+							}
+						}
+					}
+					const modelContext = serializeModelContext(apiEntry.api?.thread?.().getModelContext());
+					update.data.apis.push({
+						apiId,
+						state: sanitizeForMessage(state),
+						events: sanitizeForMessage(apiEntry.logs),
+						modelContext
+					});
+				}
+			}
+		}
+		if (Object.keys(update.data).length === 0) return;
+		this.onSendMessage(update);
+	}
+	destroy() {
+		if (this.unsubscribe) this.unsubscribe();
+	}
+};
+//#endregion
+export { DevToolsHost };
+
 //# sourceMappingURL=DevToolsHost.js.map

package/dist/DevToolsHost.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsHost.js","sourceRoot":"","sources":["../src/DevToolsHost.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DevToolsHost.js","names":[],"sources":["../src/DevToolsHost.ts"],"sourcesContent":["import { DevToolsHooks } from \"@assistant-ui/react\";\nimport {\n  sanitizeForMessage,\n  serializeModelContext,\n} from \"./utils/serialization\";\n\ninterface FrameToHostMessage {\n  type: \"subscription\" | \"clearEvents\";\n  data: {\n    apiList?: boolean;\n    apis?: number[];\n    apiId?: number;\n  };\n}\n\ninterface HostToFrameMessage {\n  type: \"update\";\n  data: {\n    apiList?: Array<{ apiId: number }>;\n    apis?: Array<{\n      apiId: number;\n      state: any;\n      events: any[];\n      modelContext?: any;\n    }>;\n  };\n}\n\nexport class DevToolsHost {\n  private subscription: {\n    apiList: boolean;\n    apis: Set<number>;\n  } = {\n    apiList: false,\n    apis: new Set(),\n  };\n  private unsubscribe?: () => void;\n  private onSendMessage: (message: HostToFrameMessage) => void;\n\n  constructor(onSendMessage: (message: HostToFrameMessage) => void) {\n    this.onSendMessage = onSendMessage;\n    this.subscribeToDevTools();\n  }\n\n  onReceiveMessage(message: FrameToHostMessage) {\n    switch (message.type) {\n      case \"subscription\":\n        this.handleSubscription(message.data);\n        break;\n      case \"clearEvents\":\n        if (typeof message.data.apiId === \"number\") {\n          DevToolsHooks.clearEventLogs(message.data.apiId);\n          // The subscription will automatically trigger an update\n        }\n        break;\n    }\n  }\n\n  private handleSubscription(data: FrameToHostMessage[\"data\"]) {\n    const prevApiList = this.subscription.apiList;\n    const prevApis = new Set(this.subscription.apis);\n\n    this.subscription.apiList = data.apiList || false;\n    this.subscription.apis = new Set(data.apis);\n\n    // Only send update if subscription actually changed\n    const apisChanged =\n      prevApis.size !== this.subscription.apis.size ||\n      [...this.subscription.apis].some((id) => !prevApis.has(id));\n\n    if (prevApiList !== this.subscription.apiList || apisChanged) {\n      this.sendUpdate();\n    }\n  }\n\n  private subscribeToDevTools() {\n    this.unsubscribe = DevToolsHooks.subscribe(() => {\n      this.sendUpdate();\n    });\n  }\n\n  private sendUpdate() {\n    const update: HostToFrameMessage = {\n      type: \"update\",\n      data: {},\n    };\n\n    const allApis = DevToolsHooks.getApis();\n    for (const subscriptionApiId of this.subscription.apis) {\n      if (!allApis.has(subscriptionApiId)) {\n        this.subscription.apis.delete(subscriptionApiId);\n      }\n    }\n\n    if (this.subscription.apiList) {\n      update.data.apiList = [...allApis.keys()].map((apiId) => ({ apiId }));\n\n      if (this.subscription.apis.size === 0 && allApis.size > 0) {\n        this.subscription.apis = new Set([allApis.keys().next().value!]);\n      }\n    }\n\n    if (this.subscription.apis.size > 0) {\n      update.data.apis = [];\n\n      for (const apiId of this.subscription.apis) {\n        const apiEntry = allApis.get(apiId);\n        if (apiEntry) {\n          // Collect state from api scopes (only root source)\n          const state: Record<string, unknown> = {};\n          if (apiEntry.api) {\n            for (const [name, scope] of Object.entries(apiEntry.api)) {\n              if (typeof scope === \"function\" && \"source\" in scope) {\n                // Only forward scopes with source === \"root\"\n                if (scope.source === \"root\") {\n                  const scopeValue = scope();\n                  state[name] = scopeValue?.getState?.() ?? scopeValue;\n                }\n              }\n            }\n          }\n\n          // Extract model context from thread runtime\n          const modelContext = serializeModelContext(\n            apiEntry.api?.thread?.().getModelContext(),\n          );\n\n          update.data.apis.push({\n            apiId,\n            state: sanitizeForMessage(state),\n            events: sanitizeForMessage(apiEntry.logs) as unknown[],\n            modelContext: modelContext,\n          });\n        }\n      }\n    }\n\n    if (Object.keys(update.data).length === 0) {\n      return;\n    }\n\n    this.onSendMessage(update);\n  }\n\n  destroy() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n}\n"],"mappings":";;;AA4BA,IAAa,eAAb,MAA0B;CACxB,eAGI;EACF,SAAS;EACT,sBAAM,IAAI,IAAI;CAChB;CACA;CACA;CAEA,YAAY,eAAsD;EAChE,KAAK,gBAAgB;EACrB,KAAK,oBAAoB;CAC3B;CAEA,iBAAiB,SAA6B;EAC5C,QAAQ,QAAQ,MAAhB;GACE,KAAK;IACH,KAAK,mBAAmB,QAAQ,IAAI;IACpC;GACF,KAAK;IACH,IAAI,OAAO,QAAQ,KAAK,UAAU,UAChC,cAAc,eAAe,QAAQ,KAAK,KAAK;IAGjD;EACJ;CACF;CAEA,mBAA2B,MAAkC;EAC3D,MAAM,cAAc,KAAK,aAAa;EACtC,MAAM,WAAW,IAAI,IAAI,KAAK,aAAa,IAAI;EAE/C,KAAK,aAAa,UAAU,KAAK,WAAW;EAC5C,KAAK,aAAa,OAAO,IAAI,IAAI,KAAK,IAAI;EAG1C,MAAM,cACJ,SAAS,SAAS,KAAK,aAAa,KAAK,QACzC,CAAC,GAAG,KAAK,aAAa,IAAI,EAAE,MAAM,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC;EAE5D,IAAI,gBAAgB,KAAK,aAAa,WAAW,aAC/C,KAAK,WAAW;CAEpB;CAEA,sBAA8B;EAC5B,KAAK,cAAc,cAAc,gBAAgB;GAC/C,KAAK,WAAW;EAClB,CAAC;CACH;CAEA,aAAqB;EACnB,MAAM,SAA6B;GACjC,MAAM;GACN,MAAM,CAAC;EACT;EAEA,MAAM,UAAU,cAAc,QAAQ;EACtC,KAAK,MAAM,qBAAqB,KAAK,aAAa,MAChD,IAAI,CAAC,QAAQ,IAAI,iBAAiB,GAChC,KAAK,aAAa,KAAK,OAAO,iBAAiB;EAInD,IAAI,KAAK,aAAa,SAAS;GAC7B,OAAO,KAAK,UAAU,CAAC,GAAG,QAAQ,KAAK,CAAC,EAAE,KAAK,WAAW,EAAE,MAAM,EAAE;GAEpE,IAAI,KAAK,aAAa,KAAK,SAAS,KAAK,QAAQ,OAAO,GACtD,KAAK,aAAa,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAAK,EAAE,KAAM,CAAC;EAEnE;EAEA,IAAI,KAAK,aAAa,KAAK,OAAO,GAAG;GACnC,OAAO,KAAK,OAAO,CAAC;GAEpB,KAAK,MAAM,SAAS,KAAK,aAAa,MAAM;IAC1C,MAAM,WAAW,QAAQ,IAAI,KAAK;IAClC,IAAI,UAAU;KAEZ,MAAM,QAAiC,CAAC;KACxC,IAAI,SAAS;WACN,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,GAAG,GACrD,IAAI,OAAO,UAAU,cAAc,YAAY;WAEzC,MAAM,WAAW,QAAQ;QAC3B,MAAM,aAAa,MAAM;QACzB,MAAM,QAAQ,YAAY,WAAW,KAAK;OAC5C;;;KAMN,MAAM,eAAe,sBACnB,SAAS,KAAK,SAAS,EAAE,gBAAgB,CAC3C;KAEA,OAAO,KAAK,KAAK,KAAK;MACpB;MACA,OAAO,mBAAmB,KAAK;MAC/B,QAAQ,mBAAmB,SAAS,IAAI;MAC1B;KAChB,CAAC;IACH;GACF;EACF;EAEA,IAAI,OAAO,KAAK,OAAO,IAAI,EAAE,WAAW,GACtC;EAGF,KAAK,cAAc,MAAM;CAC3B;CAEA,UAAU;EACR,IAAI,KAAK,aACP,KAAK,YAAY;CAErB;AACF"}

package/dist/DevToolsModal.d.ts

@@ -1,2 +1,5 @@
-export declare const DevToolsModal: () => import("react/jsx-runtime").JSX.Element | null;
+//#region src/DevToolsModal.d.ts
+declare const DevToolsModal: () => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { DevToolsModal };
 //# sourceMappingURL=DevToolsModal.d.ts.map

package/dist/DevToolsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsModal.d.ts","sourceRoot":"","sources":["../src/DevToolsModal.tsx"],"names":[],"mappings":"AA6KA,eAAO,MAAM,aAAa,sDAWzB,CAAC"}
+{"version":3,"file":"DevToolsModal.d.ts","names":[],"sources":["../src/DevToolsModal.tsx"],"mappings":";cAmLa,aAAA,oCAAa,GAAA,CAAA,OAAA"}