@assistant-ui/react-devtools 1.2.14 → 1.2.16

package/dist/data/useDevToolsClient.js

@@ -42,7 +42,12 @@ const useDevToolsClient = (selectedApiId, t0) => {
 	let t4;
 	if ($[7] !== client) {
 		t4 = (apiId_0, threadId) => {
-			if (client.switchToThread) return client.switchToThread(apiId_0, threadId);
+			if (!client.switchToThread) return;
+			try {
+				return Promise.resolve(client.switchToThread(apiId_0, threadId)).catch(_temp);
+			} catch {
+				return;
+			}
 		};
 		$[7] = client;
 		$[8] = t4;
@@ -64,6 +69,7 @@ const useDevToolsClient = (selectedApiId, t0) => {
 	} else t5 = $[13];
 	return t5;
 };
+function _temp() {}
 //#endregion
 export { useDevToolsClient };
 

package/dist/data/useDevToolsClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevToolsClient.js","names":["useCallback","useMemo","useSyncExternalStore","inProcessClient","EMPTY_SNAPSHOT","ApiInfo","DevToolsClient","DevToolsClientResult","apiIds","selected","clearEvents","apiId","switchToThread","threadId","Promise","useDevToolsClient","selectedApiId","t0","$","_c","client","undefined","t1","subscribe","listener","getSnapshot","getServerSnapshot","store","snapshot","t2","byId","get","t3","t4","apiId_0","t5"],"sources":["../../src/data/useDevToolsClient.ts"],"sourcesContent":["import { useCallback, useMemo, useSyncExternalStore } from \"react\";\nimport { inProcessClient } from \"./createInProcessClient\";\nimport { EMPTY_SNAPSHOT, type ApiInfo, type DevToolsClient } from \"./types\";\n\nexport interface DevToolsClientResult {\n  apiIds: number[];\n  selected: ApiInfo | undefined;\n  clearEvents: (apiId: number) => void;\n  switchToThread: (apiId: number, threadId: string) => void | Promise<void>;\n}\n\n/**\n * Reads a DevToolsClient snapshot and resolves the selected instance. The panel\n * depends only on this, so swapping the client swaps the data source without\n * touching the UI. Pass a stable client reference (the default in-process client\n * is a module singleton; memoize custom clients).\n */\nexport const useDevToolsClient = (\n  selectedApiId: number | null,\n  client: DevToolsClient = inProcessClient,\n): DevToolsClientResult => {\n  // Bind the client methods so class-based or relay clients that rely on `this`\n  // work, and keep the references stable so useSyncExternalStore does not\n  // resubscribe on every render.\n  const store = useMemo(\n    () => ({\n      subscribe: (listener: () => void) => client.subscribe(listener),\n      getSnapshot: () => client.getSnapshot(),\n      getServerSnapshot: () =>\n        client.getServerSnapshot ? client.getServerSnapshot() : EMPTY_SNAPSHOT,\n    }),\n    [client],\n  );\n\n  const snapshot = useSyncExternalStore(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n\n  const selected =\n    selectedApiId !== null ? snapshot.byId.get(selectedApiId) : undefined;\n\n  const clearEvents = useCallback(\n    (apiId: number) => client.clearEvents(apiId),\n    [client],\n  );\n\n  const switchToThread = useCallback(\n    (apiId: number, threadId: string) => {\n      if (client.switchToThread) {\n        return client.switchToThread(apiId, threadId);\n      }\n    },\n    [client],\n  );\n\n  return { apiIds: snapshot.apiIds, selected, clearEvents, switchToThread };\n};\n"],"mappings":";;;;;;;;;;;AAiBA,MAAae,qBAAoBC,eAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAE/B,MAAAC,SAAAH,OAAAI,KAAAA,IAAAlB,kBAAAc;CAAwC,IAAAK;CAAA,IAAAJ,EAAA,OAAAE,QAAA;EAM/BE,KAAA;GAAAC,YACMC,aAA0BJ,OAAMG,UAAWC,QAAQ;GAACC,mBAC5CL,OAAMK,YAAa;GAACC,yBAErCN,OAAMM,oBAAqBN,OAAMM,kBAAoC,IAArEtB;EACJ;EAACc,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CANH,MAAAS,QACSL;CAST,MAAAM,WAAiB1B,qBACfyB,MAAKJ,WACLI,MAAKF,aACLE,MAAKD,iBACP;CAAE,IAAAG;CAAA,IAAAX,EAAA,OAAAF,iBAAAE,EAAA,OAAAU,SAAAE,MAAA;EAGAD,KAAAb,kBAAkB,OAAOY,SAAQE,KAAKC,IAAKf,aAAyB,IAApEK,KAAAA;EAAqEH,EAAA,KAAAF;EAAAE,EAAA,KAAAU,SAAAE;EAAAZ,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CADvE,MAAAT,WACEoB;CAAsE,IAAAG;CAAA,IAAAd,EAAA,OAAAE,QAAA;EAGtEY,MAAArB,UAAmBS,OAAMV,YAAaC,KAAK;EAACO,EAAA,KAAAE;EAAAF,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAD9C,MAAAR,cAAoBsB;CAGlB,IAAAC;CAAA,IAAAf,EAAA,OAAAE,QAAA;EAGAa,MAAAC,SAAArB,aAAA;GACE,IAAIO,OAAMR,gBAAe,OAChBQ,OAAMR,eAAgBD,SAAOE,QAAQ;EAC7C;EACFK,EAAA,KAAAE;EAAAF,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CALH,MAAAN,iBAAuBqB;CAOrB,IAAAE;CAAA,IAAAjB,EAAA,OAAAR,eAAAQ,EAAA,QAAAT,YAAAS,EAAA,QAAAU,SAAApB,UAAAU,EAAA,QAAAN,gBAAA;EAEKuB,KAAA;GAAA3B,QAAUoB,SAAQpB;GAAOC;GAAAC;GAAAE;EAAwC;EAACM,EAAA,KAAAR;EAAAQ,EAAA,MAAAT;EAAAS,EAAA,MAAAU,SAAApB;EAAAU,EAAA,MAAAN;EAAAM,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAAlEiB;AAAkE"}
+{"version":3,"file":"useDevToolsClient.js","names":["useCallback","useMemo","useSyncExternalStore","inProcessClient","EMPTY_SNAPSHOT","ApiInfo","DevToolsClient","DevToolsClientResult","apiIds","selected","clearEvents","apiId","switchToThread","threadId","Promise","useDevToolsClient","selectedApiId","t0","$","_c","client","undefined","t1","subscribe","listener","getSnapshot","getServerSnapshot","store","snapshot","t2","byId","get","t3","t4","apiId_0","resolve","catch","_temp","t5"],"sources":["../../src/data/useDevToolsClient.ts"],"sourcesContent":["import { useCallback, useMemo, useSyncExternalStore } from \"react\";\nimport { inProcessClient } from \"./createInProcessClient\";\nimport { EMPTY_SNAPSHOT, type ApiInfo, type DevToolsClient } from \"./types\";\n\nexport interface DevToolsClientResult {\n  apiIds: number[];\n  selected: ApiInfo | undefined;\n  clearEvents: (apiId: number) => void;\n  switchToThread: (apiId: number, threadId: string) => void | Promise<void>;\n}\n\n/**\n * Reads a DevToolsClient snapshot and resolves the selected instance. The panel\n * depends only on this, so swapping the client swaps the data source without\n * touching the UI. Pass a stable client reference (the default in-process client\n * is a module singleton; memoize custom clients).\n */\nexport const useDevToolsClient = (\n  selectedApiId: number | null,\n  client: DevToolsClient = inProcessClient,\n): DevToolsClientResult => {\n  // Bind the client methods so class-based or relay clients that rely on `this`\n  // work, and keep the references stable so useSyncExternalStore does not\n  // resubscribe on every render.\n  const store = useMemo(\n    () => ({\n      subscribe: (listener: () => void) => client.subscribe(listener),\n      getSnapshot: () => client.getSnapshot(),\n      getServerSnapshot: () =>\n        client.getServerSnapshot ? client.getServerSnapshot() : EMPTY_SNAPSHOT,\n    }),\n    [client],\n  );\n\n  const snapshot = useSyncExternalStore(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n\n  const selected =\n    selectedApiId !== null ? snapshot.byId.get(selectedApiId) : undefined;\n\n  const clearEvents = useCallback(\n    (apiId: number) => client.clearEvents(apiId),\n    [client],\n  );\n\n  const switchToThread = useCallback(\n    (apiId: number, threadId: string) => {\n      if (!client.switchToThread) return;\n      try {\n        return Promise.resolve(client.switchToThread(apiId, threadId)).catch(\n          () => {},\n        );\n      } catch {\n        return;\n      }\n    },\n    [client],\n  );\n\n  return { apiIds: snapshot.apiIds, selected, clearEvents, switchToThread };\n};\n"],"mappings":";;;;;;;;;;;AAiBA,MAAae,qBAAoBC,eAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAE/B,MAAAC,SAAAH,OAAAI,KAAAA,IAAAlB,kBAAAc;CAAwC,IAAAK;CAAA,IAAAJ,EAAA,OAAAE,QAAA;EAM/BE,KAAA;GAAAC,YACMC,aAA0BJ,OAAMG,UAAWC,QAAQ;GAACC,mBAC5CL,OAAMK,YAAa;GAACC,yBAErCN,OAAMM,oBAAqBN,OAAMM,kBAAoC,IAArEtB;EACJ;EAACc,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CANH,MAAAS,QACSL;CAST,MAAAM,WAAiB1B,qBACfyB,MAAKJ,WACLI,MAAKF,aACLE,MAAKD,iBACP;CAAE,IAAAG;CAAA,IAAAX,EAAA,OAAAF,iBAAAE,EAAA,OAAAU,SAAAE,MAAA;EAGAD,KAAAb,kBAAkB,OAAOY,SAAQE,KAAKC,IAAKf,aAAyB,IAApEK,KAAAA;EAAqEH,EAAA,KAAAF;EAAAE,EAAA,KAAAU,SAAAE;EAAAZ,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CADvE,MAAAT,WACEoB;CAAsE,IAAAG;CAAA,IAAAd,EAAA,OAAAE,QAAA;EAGtEY,MAAArB,UAAmBS,OAAMV,YAAaC,KAAK;EAACO,EAAA,KAAAE;EAAAF,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAD9C,MAAAR,cAAoBsB;CAGlB,IAAAC;CAAA,IAAAf,EAAA,OAAAE,QAAA;EAGAa,MAAAC,SAAArB,aAAA;GACE,IAAI,CAACO,OAAMR,gBAAe;GAC1B,IAAA;IAAA,OACSE,QAAOqB,QAASf,OAAMR,eAAgBD,SAAOE,QAAQ,CAAC,CAAC,CAAAuB,MAC5DC,KACF;GAAC,QAAA;IAAA;GAAA;EAGF;EACFnB,EAAA,KAAAE;EAAAF,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAVH,MAAAN,iBAAuBqB;CAYrB,IAAAK;CAAA,IAAApB,EAAA,OAAAR,eAAAQ,EAAA,QAAAT,YAAAS,EAAA,QAAAU,SAAApB,UAAAU,EAAA,QAAAN,gBAAA;EAEK0B,KAAA;GAAA9B,QAAUoB,SAAQpB;GAAOC;GAAAC;GAAAE;EAAwC;EAACM,EAAA,KAAAR;EAAAQ,EAAA,MAAAT;EAAAS,EAAA,MAAAU,SAAApB;EAAAU,EAAA,MAAAN;EAAAM,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,OAAlEoB;AAAkE;AA7C1C,SAAAD,QAAA,CAAA"}

package/dist/views/ui/ControlButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlButton.js","names":["clsx","ButtonHTMLAttributes","ControlButton","t0","$","_c","className","props","t1","t2"],"sources":["../../../src/views/ui/ControlButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nexport const ControlButton = ({\n  className,\n  ...props\n}: ButtonHTMLAttributes<HTMLButtonElement>) => (\n  <button\n    className={clsx(\n      \"text-muted-foreground hover:bg-accent hover:text-foreground border-border inline-flex h-8 items-center rounded-md border px-3 text-[13px] font-medium transition-colors\",\n      className,\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;AAGA,MAAaE,iBAAgBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAC,CAAA,CAAAG,cAAAC,SAAAJ;EAGYC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,YAAAF,EAAA;EAAAG,QAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,WAAA;EAE3BE,KAAAR,KACT,2KACAM,SACF;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,SAAAH,EAAA,OAAAI,IAAA;EAJHC,KAAA,oBAAA,UAAA;GACa,WAAAD;GAGV,GACGD;EAAK,CAAA;EACTH,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OANFK;AAME"}
+{"version":3,"file":"ControlButton.js","names":["clsx","ButtonHTMLAttributes","ControlButton","t0","$","_c","className","props","t1","t2"],"sources":["../../../src/views/ui/ControlButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ButtonHTMLAttributes } from \"react\";\n\nexport const ControlButton = ({\n  className,\n  ...props\n}: ButtonHTMLAttributes<HTMLButtonElement>) => (\n  <button\n    className={clsx(\n      \"text-muted-foreground hover:bg-accent hover:text-foreground border-border inline-flex h-8 items-center rounded-md border px-3 text-[13px] font-medium transition-colors\",\n      className,\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;AAGA,MAAaE,iBAAgBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAC,CAAA,CAAAG,WAAA,GAAAC,SAAAJ;EAGYC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,YAAAF,EAAA;EAAAG,QAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,WAAA;EAE3BE,KAAAR,KACT,2KACAM,SACF;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,SAAAH,EAAA,OAAAI,IAAA;EAJHC,KAAA,oBAAA,UAAA;GACa,WAAAD;GAGV,GACGD;EAAK,CAAA;EACTH,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OANFK;AAME"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-devtools",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "React development tools for assistant-ui components",
   "keywords": [
     "assistant-ui",
@@ -47,17 +47,17 @@
     }
   },
   "devDependencies": {
+    "@assistant-ui/react": "0.15.17",
+    "@assistant-ui/tap": "0.9.15",
+    "@assistant-ui/x-buildutils": "0.0.24",
     "@tailwindcss/cli": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "^4.3.3",
-    "vitest": "^4.1.10",
-    "@assistant-ui/react": "0.15.15",
-    "@assistant-ui/tap": "0.9.13",
-    "@assistant-ui/x-buildutils": "0.0.23"
+    "vitest": "^4.1.11"
   },
   "publishConfig": {
     "access": "public",

package/src/data/useDevToolsClient.test.ts

@@ -0,0 +1,97 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { EMPTY_SNAPSHOT, type DevToolsClient } from "./types";
+import {
+  useDevToolsClient,
+  type DevToolsClientResult,
+} from "./useDevToolsClient";
+
+const fixtureClient = (
+  switchToThread?: DevToolsClient["switchToThread"],
+): DevToolsClient => {
+  const client: DevToolsClient = {
+    subscribe: () => () => {},
+    getSnapshot: () => EMPTY_SNAPSHOT,
+    clearEvents: () => {},
+  };
+  if (switchToThread) client.switchToThread = switchToThread;
+  return client;
+};
+
+const hookResult = (client: DevToolsClient): DevToolsClientResult => {
+  let result: DevToolsClientResult | undefined;
+  const Probe = () => {
+    result = useDevToolsClient(1, client);
+    return null;
+  };
+  renderToStaticMarkup(createElement(Probe));
+  if (result === undefined) {
+    throw new Error("expected useDevToolsClient to render");
+  }
+  return result;
+};
+
+const captureUnhandledRejections = async (run: () => void) => {
+  const rejections: unknown[] = [];
+  const onUnhandledRejection = (reason: unknown) => {
+    rejections.push(reason);
+  };
+  const priorListeners = process.listeners("unhandledRejection");
+  process.removeAllListeners("unhandledRejection");
+  process.on("unhandledRejection", onUnhandledRejection);
+  try {
+    run();
+    // Node emits unhandledRejection on a later event-loop turn; fake timers cannot drive that.
+    const { promise, resolve } = Promise.withResolvers<void>();
+    setImmediate(resolve);
+    await promise;
+  } finally {
+    process.removeListener("unhandledRejection", onUnhandledRejection);
+    for (const listener of priorListeners) {
+      process.on("unhandledRejection", listener);
+    }
+  }
+  return rejections;
+};
+
+describe("useDevToolsClient switchToThread", () => {
+  it("forwards a successful switch", async () => {
+    const switchToThread = vi.fn(async () => {});
+    const run = hookResult(fixtureClient(switchToThread)).switchToThread;
+
+    await expect(run(1, "thread-1")).resolves.toBeUndefined();
+    expect(switchToThread).toHaveBeenCalledWith(1, "thread-1");
+  });
+
+  it("contains a synchronous client throw", () => {
+    const run = hookResult(
+      fixtureClient(() => {
+        throw new Error("failed");
+      }),
+    ).switchToThread;
+
+    expect(() => run(1, "thread-1")).not.toThrow();
+  });
+
+  it("does not leak a rejected switch as an unhandled rejection", async () => {
+    const error = new Error("failed");
+    const run = hookResult(
+      fixtureClient(() => Promise.reject(error)),
+    ).switchToThread;
+
+    const rejections = await captureUnhandledRejections(() => {
+      void run(1, "thread-1");
+    });
+
+    expect(rejections).toEqual([]);
+  });
+
+  it("lets an ignored rejected switch settle", async () => {
+    const run = hookResult(
+      fixtureClient(() => Promise.reject(new Error("failed"))),
+    ).switchToThread;
+
+    await expect(run(1, "thread-1")).resolves.toBeUndefined();
+  });
+});

package/src/data/useDevToolsClient.ts

@@ -48,8 +48,13 @@ export const useDevToolsClient = (
 
   const switchToThread = useCallback(
     (apiId: number, threadId: string) => {
-      if (client.switchToThread) {
-        return client.switchToThread(apiId, threadId);
+      if (!client.switchToThread) return;
+      try {
+        return Promise.resolve(client.switchToThread(apiId, threadId)).catch(
+          () => {},
+        );
+      } catch {
+        return;
       }
     },
     [client],