@assistant-ui/react-devtools 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# @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
+
+## 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 />
+
+// 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
+
+- `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
+```
+
+## Development
+
+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.
+
+## License
+
+MIT

package/dist/DevToolsFrame.d.ts

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

package/dist/DevToolsFrame.d.ts.map

@@ -0,0 +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"}

package/dist/DevToolsFrame.js

@@ -0,0 +1,49 @@
+"use client";
+
+// src/DevToolsFrame.tsx
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { FrameHost } from "./FrameHost.js";
+import { DEFAULT_FRAME_URL } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+var 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
+    }
+  );
+};
+export {
+  DevToolsFrame
+};
+//# sourceMappingURL=DevToolsFrame.js.map

package/dist/DevToolsFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"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":";;;AAEA,SAAS,aAAa,WAAW,SAAS,cAAc;AACxD,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAyC9B;AAhCG,IAAM,gBAA8C,CAAC;AAAA,EAC1D,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,YAAY,OAAiC,IAAI;AACvD,QAAM,eAAe,OAAyB,IAAI;AAElD,QAAM,mBAAmB,QAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAE3D,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,aAAa,SAAS;AACxB,mBAAa,QAAQ,QAAQ;AAC7B,mBAAa,UAAU;AAAA,IACzB;AAEA,QAAI,UAAU,SAAS;AACrB,mBAAa,UAAU,IAAI,UAAU,UAAU,OAAO;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,QAAQ,QAAQ;AAC7B,qBAAa,UAAU;AAAA,MACzB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/DevToolsHost.d.ts

@@ -0,0 +1,35 @@
+interface FrameToHostMessage {
+    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;
+        }>;
+    };
+}
+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;
+}
+export {};
+//# sourceMappingURL=DevToolsHost.d.ts.map

package/dist/DevToolsHost.d.ts.map

@@ -0,0 +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"}

package/dist/DevToolsHost.js

@@ -0,0 +1,104 @@
+// src/DevToolsHost.ts
+import { DevToolsHooks } from "@assistant-ui/react";
+import {
+  sanitizeForMessage,
+  serializeModelContext
+} from "./utils/serialization.js";
+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 = /* @__PURE__ */ 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();
+    }
+  }
+};
+export {
+  DevToolsHost
+};
+//# sourceMappingURL=DevToolsHost.js.map

package/dist/DevToolsHost.js.map

@@ -0,0 +1 @@
+{"version":3,"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":"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","names":[]}

package/dist/DevToolsModal.d.ts

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

package/dist/DevToolsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsModal.d.ts","sourceRoot":"","sources":["../src/DevToolsModal.tsx"],"names":[],"mappings":"AAsKA,eAAO,MAAM,aAAa,sDAWzB,CAAC"}

package/dist/DevToolsModal.js

@@ -0,0 +1,170 @@
+"use client";
+
+// src/DevToolsModal.tsx
+import { useEffect, useMemo, useState } from "react";
+import { DevToolsFrame } from "./DevToolsFrame.js";
+import { getStyles, ANIMATION_STYLES } from "./styles/DevToolsModal.styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var isDarkMode = () => {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
+};
+var DevToolsModalImpl = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [buttonHover, setButtonHover] = useState(false);
+  const [closeHover, setCloseHover] = useState(false);
+  const styles = useMemo(() => getStyles(darkMode), [darkMode]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "devtools-modal-animations";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = ANIMATION_STYLES;
+      document.head.appendChild(style);
+    }
+    return () => {
+      const style = document.getElementById(styleId);
+      if (style && !document.querySelector("[data-devtools-modal]")) {
+        style.remove();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof MutationObserver === "undefined") return;
+    const checkDarkMode = () => setDarkMode(isDarkMode());
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    if (document.body !== document.documentElement) {
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
+    }
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: styles.floatingContainer, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        onMouseEnter: () => setButtonHover(true),
+        onMouseLeave: () => setButtonHover(false),
+        style: {
+          ...styles.floatingButton,
+          ...buttonHover ? styles.floatingButtonHover : {}
+        },
+        "aria-label": "Open assistant-ui DevTools",
+        title: "Open assistant-ui DevTools",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            style: { width: "20px", height: "20px" },
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
+                stroke: "currentColor",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none"
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: styles.backdrop, onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { style: styles.modal, "data-devtools-modal": true, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsOpen(false),
+            onMouseEnter: () => setCloseHover(true),
+            onMouseLeave: () => setCloseHover(false),
+            style: {
+              ...styles.dismissButton,
+              ...closeHover ? styles.dismissButtonHover : {}
+            },
+            "aria-label": "Close DevTools",
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M18 6L6 18",
+                      stroke: "currentColor",
+                      strokeWidth: "1.6",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M6 6L18 18",
+                      stroke: "currentColor",
+                      strokeWidth: "1.6",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: styles.modalContent, children: /* @__PURE__ */ jsx(
+          DevToolsFrame,
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              border: "none",
+              borderRadius: "12px",
+              backgroundColor: "transparent"
+            }
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+var DevToolsModal = () => {
+  if (typeof process !== "undefined" && process.env?.["NODE_ENV"] === "production") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DevToolsModalImpl, {});
+};
+export {
+  DevToolsModal
+};
+//# sourceMappingURL=DevToolsModal.js.map

package/dist/DevToolsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DevToolsModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { DevToolsFrame } from \"./DevToolsFrame\";\nimport { getStyles, ANIMATION_STYLES } from \"./styles/DevToolsModal.styles\";\n\nconst isDarkMode = (): boolean => {\n  if (typeof document === \"undefined\") return false;\n  return (\n    document.documentElement.classList.contains(\"dark\") ||\n    document.body.classList.contains(\"dark\")\n  );\n};\n\nconst DevToolsModalImpl = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [darkMode, setDarkMode] = useState(false);\n  const [buttonHover, setButtonHover] = useState(false);\n  const [closeHover, setCloseHover] = useState(false);\n\n  const styles = useMemo(() => getStyles(darkMode), [darkMode]);\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n\n    const styleId = \"devtools-modal-animations\";\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement(\"style\");\n      style.id = styleId;\n      style.textContent = ANIMATION_STYLES;\n      document.head.appendChild(style);\n    }\n\n    return () => {\n      const style = document.getElementById(styleId);\n      if (style && !document.querySelector(\"[data-devtools-modal]\")) {\n        style.remove();\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (typeof MutationObserver === \"undefined\") return;\n\n    const checkDarkMode = () => setDarkMode(isDarkMode());\n    const observer = new MutationObserver(checkDarkMode);\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n    if (document.body !== document.documentElement) {\n      observer.observe(document.body, {\n        attributes: true,\n        attributeFilter: [\"class\"],\n      });\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen]);\n\n  return (\n    <>\n      <div style={styles.floatingContainer}>\n        <button\n          onClick={() => setIsOpen(true)}\n          onMouseEnter={() => setButtonHover(true)}\n          onMouseLeave={() => setButtonHover(false)}\n          style={{\n            ...styles.floatingButton,\n            ...(buttonHover ? styles.floatingButtonHover : {}),\n          }}\n          aria-label=\"Open assistant-ui DevTools\"\n          title=\"Open assistant-ui DevTools\"\n        >\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style={{ width: \"20px\", height: \"20px\" }}\n          >\n            <path\n              d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.8\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              fill=\"none\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      {isOpen && (\n        <>\n          <div style={styles.backdrop} onClick={() => setIsOpen(false)} />\n\n          <div style={styles.modal} data-devtools-modal>\n            <button\n              onClick={() => setIsOpen(false)}\n              onMouseEnter={() => setCloseHover(true)}\n              onMouseLeave={() => setCloseHover(false)}\n              style={{\n                ...styles.dismissButton,\n                ...(closeHover ? styles.dismissButtonHover : {}),\n              }}\n              aria-label=\"Close DevTools\"\n            >\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M18 6L6 18\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.6\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n                <path\n                  d=\"M6 6L18 18\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.6\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n\n            <div style={styles.modalContent}>\n              <DevToolsFrame\n                style={{\n                  width: \"100%\",\n                  height: \"100%\",\n                  border: \"none\",\n                  borderRadius: \"12px\",\n                  backgroundColor: \"transparent\",\n                }}\n              />\n            </div>\n          </div>\n        </>\n      )}\n    </>\n  );\n};\n\n// Export a component that only renders in development\nexport const DevToolsModal = () => {\n  // Check if we're in production - most bundlers will replace process.env.NODE_ENV\n  // This allows the entire component to be eliminated via dead code elimination\n  if (\n    typeof process !== \"undefined\" &&\n    process.env?.[\"NODE_ENV\"] === \"production\"\n  ) {\n    return null;\n  }\n\n  return <DevToolsModalImpl />;\n};\n"],"mappings":"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","names":[]}

package/dist/ExtensionHost.d.ts

@@ -0,0 +1,7 @@
+export declare class ExtensionHost {
+    private devToolsHost;
+    private messageListener;
+    constructor();
+    destroy(): void;
+}
+//# sourceMappingURL=ExtensionHost.d.ts.map

package/dist/ExtensionHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionHost.d.ts","sourceRoot":"","sources":["../src/ExtensionHost.ts"],"names":[],"mappings":"AAEA,qBAAa,aAAa;IACxB,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,eAAe,CAAgC;;IAgDvD,OAAO;CAIR"}

package/dist/ExtensionHost.js

@@ -0,0 +1,50 @@
+// src/ExtensionHost.ts
+import { DevToolsHost } from "./DevToolsHost.js";
+var ExtensionHost = class {
+  devToolsHost;
+  messageListener;
+  constructor() {
+    this.devToolsHost = new DevToolsHost((message) => {
+      console.log("[ExtensionHost] Sending message to iframe:", message);
+      window.postMessage(
+        {
+          source: "assistant-ui-devtools-page",
+          payload: message
+        },
+        "*"
+      );
+    });
+    this.messageListener = (event) => {
+      if (event.source !== window) return;
+      if (event.data.source === "assistant-ui-devtools-iframe") {
+        console.log("[ExtensionHost] Received message from iframe:", {
+          source: event.data.source,
+          payload: event.data.payload,
+          fullData: event.data
+        });
+        this.devToolsHost.onReceiveMessage(event.data.payload);
+      }
+    };
+    window.addEventListener("message", this.messageListener);
+    setTimeout(() => {
+      console.log("[ExtensionHost] Announcing connection to iframe");
+      window.postMessage(
+        {
+          source: "assistant-ui-devtools-page",
+          payload: {
+            type: "host-connected"
+          }
+        },
+        "*"
+      );
+    }, 100);
+  }
+  destroy() {
+    window.removeEventListener("message", this.messageListener);
+    this.devToolsHost.destroy();
+  }
+};
+export {
+  ExtensionHost
+};
+//# sourceMappingURL=ExtensionHost.js.map

package/dist/ExtensionHost.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ExtensionHost.ts"],"sourcesContent":["import { DevToolsHost } from \"./DevToolsHost\";\n\nexport class ExtensionHost {\n  private devToolsHost: DevToolsHost;\n  private messageListener: (event: MessageEvent) => void;\n\n  constructor() {\n    // Create DevToolsHost with callback to send messages through extension\n    this.devToolsHost = new DevToolsHost((message) => {\n      console.log(\"[ExtensionHost] Sending message to iframe:\", message);\n      window.postMessage(\n        {\n          source: \"assistant-ui-devtools-page\",\n          payload: message,\n        },\n        \"*\",\n      );\n    });\n\n    // Setup listener to forward messages from extension to DevToolsHost\n    this.messageListener = (event: MessageEvent) => {\n      if (event.source !== window) return;\n\n      // Log ALL messages to see what's coming through\n      if (event.data.source === \"assistant-ui-devtools-iframe\") {\n        console.log(\"[ExtensionHost] Received message from iframe:\", {\n          source: event.data.source,\n          payload: event.data.payload,\n          fullData: event.data,\n        });\n        this.devToolsHost.onReceiveMessage(event.data.payload);\n      }\n    };\n\n    window.addEventListener(\"message\", this.messageListener);\n\n    // Announce that a new host has connected\n    // This tells the iframe to re-send its subscription\n    setTimeout(() => {\n      console.log(\"[ExtensionHost] Announcing connection to iframe\");\n      window.postMessage(\n        {\n          source: \"assistant-ui-devtools-page\",\n          payload: {\n            type: \"host-connected\",\n          },\n        },\n        \"*\",\n      );\n    }, 100);\n  }\n\n  destroy() {\n    window.removeEventListener(\"message\", this.messageListener);\n    this.devToolsHost.destroy();\n  }\n}\n"],"mappings":";AAAA,SAAS,oBAAoB;AAEtB,IAAM,gBAAN,MAAoB;AAAA,EACjB;AAAA,EACA;AAAA,EAER,cAAc;AAEZ,SAAK,eAAe,IAAI,aAAa,CAAC,YAAY;AAChD,cAAQ,IAAI,8CAA8C,OAAO;AACjE,aAAO;AAAA,QACL;AAAA,UACE,QAAQ;AAAA,UACR,SAAS;AAAA,QACX;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAGD,SAAK,kBAAkB,CAAC,UAAwB;AAC9C,UAAI,MAAM,WAAW,OAAQ;AAG7B,UAAI,MAAM,KAAK,WAAW,gCAAgC;AACxD,gBAAQ,IAAI,iDAAiD;AAAA,UAC3D,QAAQ,MAAM,KAAK;AAAA,UACnB,SAAS,MAAM,KAAK;AAAA,UACpB,UAAU,MAAM;AAAA,QAClB,CAAC;AACD,aAAK,aAAa,iBAAiB,MAAM,KAAK,OAAO;AAAA,MACvD;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,KAAK,eAAe;AAIvD,eAAW,MAAM;AACf,cAAQ,IAAI,iDAAiD;AAC7D,aAAO;AAAA,QACL;AAAA,UACE,QAAQ;AAAA,UACR,SAAS;AAAA,YACP,MAAM;AAAA,UACR;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAAA,EAEA,UAAU;AACR,WAAO,oBAAoB,WAAW,KAAK,eAAe;AAC1D,SAAK,aAAa,QAAQ;AAAA,EAC5B;AACF;","names":[]}

package/dist/FrameClient.d.ts

@@ -0,0 +1,35 @@
+interface ApiData {
+    apiId: number;
+    state: any;
+    events: any[];
+    context?: any;
+}
+type UpdateListener = (data: {
+    apiList?: Array<{
+        apiId: number;
+    }>;
+    apis?: ApiData[];
+}) => void;
+export declare class FrameClient {
+    private listeners;
+    private connectionListeners;
+    private lastUpdate;
+    constructor();
+    private setupMessageListener;
+    onHostConnected(listener: () => void): () => void;
+    subscribe(listener: UpdateListener): () => void;
+    setSubscription(options: {
+        apiList?: boolean;
+        apis?: number[];
+    }): void;
+    clearEvents(apiId: number): void;
+    private notifyListeners;
+    getLastUpdate(): {
+        apiList?: Array<{
+            apiId: number;
+        }>;
+        apis?: ApiData[];
+    };
+}
+export {};
+//# sourceMappingURL=FrameClient.d.ts.map

package/dist/FrameClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameClient.d.ts","sourceRoot":"","sources":["../src/FrameClient.ts"],"names":[],"mappings":"AAAA,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAcD,KAAK,cAAc,GAAG,CAAC,IAAI,EAAE;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;CAClB,KAAK,IAAI,CAAC;AAEX,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,mBAAmB,CAAyB;IACpD,OAAO,CAAC,UAAU,CAGX;;IAMP,OAAO,CAAC,oBAAoB;IAc5B,eAAe,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAOjD,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,IAAI;IAa/C,eAAe,CAAC,OAAO,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE;IAU/D,WAAW,CAAC,KAAK,EAAE,MAAM;IAUzB,OAAO,CAAC,eAAe;IAIvB,aAAa;kBAlED,KAAK,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC;eAC3B,OAAO,EAAE;;CAoEnB"}