@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.21

package/src/v2/providers/__tests__/CopilotChatConfigurationProvider.test.ts

@@ -119,6 +119,23 @@ describe("CopilotChatConfigurationProvider", () => {
     expect(wrapper.find("[data-testid=placeholder]").text()).toBe("Inner");
   });
 
+  it("a nested non-explicit seed yields to the parent's thread, like React", () => {
+    const Display = makeDisplay();
+    const wrapper = mount(CopilotChatConfigurationProvider, {
+      props: { threadId: "outer-thread" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "inner-seed", hasExplicitThreadId: false },
+            { default: () => h(Display) },
+          ),
+      },
+    });
+
+    expect(wrapper.find("[data-testid=thread]").text()).toBe("outer-thread");
+  });
+
   it("creates and mutates modal state when isModalDefaultOpen is provided", async () => {
     const Toggle = defineComponent({
       setup() {
@@ -398,9 +415,12 @@ describe("CopilotChatConfiguration drawer-awareness", () => {
 });
 
 describe("CopilotChatConfiguration modal-setter presence contract", () => {
-  it("bare provider (no isModalDefaultOpen, no parent) exposes setModalOpen as undefined", () => {
+  it("bare provider (no isModalDefaultOpen, no parent) owns a modal that starts open, like React", async () => {
     const cfg = harness({ threadId: "thread-1" });
-    expect(cfg().setModalOpen).toBeUndefined();
+    expect(cfg().isModalOpen).toBe(true);
+    cfg().setModalOpen?.(false);
+    await nextTick();
+    expect(cfg().isModalOpen).toBe(false);
   });
 
   it("provider with isModalDefaultOpen exposes a working setModalOpen", async () => {

package/src/v2/providers/__tests__/CopilotKitProvider.a2ui.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { mount } from "@vue/test-utils";
-import { z } from "zod";
+import { z } from "zod-v3";
 import { Catalog } from "@a2ui/web_core/v0_9";
 import type { ComponentApi } from "@a2ui/web_core/v0_9";
 import CopilotKitProvider from "../CopilotKitProvider.vue";
@@ -125,4 +125,22 @@ describe("CopilotKitProvider a2ui catalog context", () => {
     expect(value).toContain("  - FlightCard:\n    {");
     expect(value).toContain('"airline"');
   });
+
+  it("registers the catalog's components with core for the Inspector", () => {
+    const { observedCore } = mountProvider({
+      a2ui: { catalog: makeCustomCatalog() },
+    });
+    expect(
+      observedCore.value?.catalogComponents.map((component) => component.name),
+    ).toEqual(["FlightCard"]);
+  });
+
+  it("stops advertising a component the Inspector disables", async () => {
+    const { observedCore } = mountProvider({
+      a2ui: { catalog: makeCustomCatalog() },
+    });
+    observedCore.value?.setCatalogComponentEnabled("FlightCard", false);
+    await nextTick();
+    expect(capabilitiesValue(observedCore.value)).not.toContain("FlightCard");
+  });
 });

package/src/v2/providers/__tests__/CopilotKitProvider.config.test.ts

@@ -0,0 +1,124 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createSSRApp } from "vue";
+import { mount } from "@vue/test-utils";
+import { renderToString } from "vue/server-renderer";
+import CopilotKitProvider from "../CopilotKitProvider.vue";
+
+const RUNTIME_URL = "https://runtime.example/api/copilotkit";
+const SHAPE_WARNING =
+  "renderToolCalls must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.";
+
+function stubInfoFetch() {
+  const fetchMock = vi.fn(async () => {
+    throw new Error("network failure");
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  return () =>
+    fetchMock.mock.calls.filter(([url]) => String(url).includes("/info"));
+}
+
+/** A tool call renderer shape: only `name` and `agentId` matter here. */
+function renderer(name: string) {
+  return { name, args: undefined, render: () => null };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+describe("CopilotKitProvider (Vue) runtime connection", () => {
+  it("does not fetch /info during server-side rendering", async () => {
+    const infoCalls = stubInfoFetch();
+    await renderToString(
+      createSSRApp(CopilotKitProvider, { runtimeUrl: RUNTIME_URL }),
+    );
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(infoCalls()).toHaveLength(0);
+  });
+
+  it("fetches /info once the provider mounts", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const infoCalls = stubInfoFetch();
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL },
+    });
+    await vi.waitFor(() => expect(infoCalls().length).toBeGreaterThan(0));
+    wrapper.unmount();
+  });
+});
+
+describe("CopilotKitProvider (Vue) errors", () => {
+  it("logs core errors when no onError is given", async () => {
+    stubInfoFetch();
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL },
+    });
+    await vi.waitFor(() =>
+      expect(error).toHaveBeenCalledWith(
+        "[CopilotKit] Error (runtime_info_fetch_failed):",
+        expect.any(Error),
+        expect.anything(),
+      ),
+    );
+    wrapper.unmount();
+  });
+
+  it("reports an invalid defaultThrottleMs once, from core", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL, defaultThrottleMs: -1 },
+    });
+    const providerCopies = error.mock.calls.filter(
+      ([message]) =>
+        typeof message === "string" &&
+        message.startsWith("CopilotKitProvider: defaultThrottleMs"),
+    );
+    const coreReports = error.mock.calls.filter(
+      ([message]) =>
+        typeof message === "string" &&
+        message.startsWith("CopilotKitCore.setDefaultThrottleMs"),
+    );
+    expect(providerCopies).toEqual([]);
+    expect(coreReports.length).toBeGreaterThan(0);
+    wrapper.unmount();
+  });
+});
+
+describe("CopilotKitProvider (Vue) renderToolCalls warning", () => {
+  it("warns when the renderToolCalls shape changes", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL, renderToolCalls: [renderer("a")] },
+    });
+    await wrapper.setProps({ renderToolCalls: [renderer("b")] });
+    expect(error).toHaveBeenCalledWith(SHAPE_WARNING);
+    wrapper.unmount();
+  });
+
+  it("does not warn for a new array with the same tools", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL, renderToolCalls: [renderer("a")] },
+    });
+    await wrapper.setProps({ renderToolCalls: [renderer("a")] });
+    expect(error).not.toHaveBeenCalledWith(SHAPE_WARNING);
+    wrapper.unmount();
+  });
+});
+
+describe("CopilotKitProvider (Vue) config diagnostics", () => {
+  it("warns about a missing runtime config once", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, { props: {} });
+    await wrapper.setProps({ properties: { tenant: "acme" } });
+    const missing = warn.mock.calls.filter(
+      ([message]) =>
+        message ===
+        "Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'",
+    );
+    expect(missing).toHaveLength(1);
+    wrapper.unmount();
+  });
+});

package/src/v2/providers/__tests__/CopilotKitProvider.headersAtSendTime.test.ts

@@ -7,12 +7,12 @@ import { mount } from "@vue/test-utils";
 import { defineComponent, h, nextTick } from "vue";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { HttpAgent } from "@ag-ui/client";
+import { ɵtranscribeAudio } from "@copilotkit/core";
 import type { CopilotKitHeadersSource } from "@copilotkit/core";
 import CopilotKitProvider from "../CopilotKitProvider.vue";
 import { useCopilotKit } from "../useCopilotKit";
 import { useAgent } from "../../hooks/use-agent";
 import { useThreads } from "../../hooks/use-threads";
-import { transcribeAudio } from "../../lib/transcription-client";
 import type { CopilotKitCoreVue } from "../../lib/vue-core";
 
 type Call = { url: string; auth: string | null; publicApiKey: string | null };
@@ -418,14 +418,14 @@ describe("CopilotKitProvider — headers builder evaluated at send time (#1937)"
     // Force an actual resolution while signed in, so the header source's
     // last snapshot is non-empty — otherwise a stale-merge bug has nothing
     // stale to leak, and the assertion below would pass vacuously.
-    await transcribeAudio(getCore(), new Blob(["a"], { type: "audio/webm" }));
+    await ɵtranscribeAudio(getCore(), new Blob(["a"], { type: "audio/webm" }));
     const firstCall = calls.find((c) => c.url.endsWith("/transcribe"));
     expect(firstCall?.auth).toBe("Bearer x");
 
     calls.length = 0;
     signedIn = false;
 
-    await transcribeAudio(getCore(), new Blob(["a"], { type: "audio/webm" }));
+    await ɵtranscribeAudio(getCore(), new Blob(["a"], { type: "audio/webm" }));
     const secondCall = calls.find((c) => c.url.endsWith("/transcribe"));
     expect(secondCall).toBeDefined();
     expect(secondCall!.auth).toBeNull();

package/src/v2/providers/__tests__/CopilotKitProvider.learning.test.ts

@@ -478,7 +478,9 @@ describe("CopilotKitProvider learning prop", () => {
         const app = renderApp(true);
 
         await app.unmount();
-        expect(stop).toHaveBeenCalledTimes(1);
+        // The learning watcher stops capture, then disposing the core stops
+        // it again. Stopping twice is safe; capture must end either way.
+        expect(stop).toHaveBeenCalled();
         expect(History.prototype.pushState).toBe(nativePushState);
       });
 

package/src/v2/providers/__tests__/CopilotKitProvider.sandboxFunctions.test.ts

@@ -79,7 +79,10 @@ describe("CopilotKitProvider sandbox functions", () => {
       },
     });
     const sandboxContext = findSandboxContext(observedCore.value!.context);
-    expect(sandboxContext).toBeDefined();
+    // The same model-visible call form React and Angular send.
+    expect(sandboxContext?.description).toBe(
+      "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
+    );
   });
 
   it("does not register agent context when sandbox functions are empty", () => {

package/src/v2/providers/__tests__/CopilotKitProvider.test.ts

@@ -5,11 +5,12 @@ import {
   createSSRApp,
   defineComponent,
   h,
+  inject,
   nextTick,
   ref,
   watchEffect,
 } from "vue";
-import type { VNode } from "vue";
+import type { ComputedRef, VNode } from "vue";
 import { renderToString } from "vue/server-renderer";
 import type {
   CopilotKitCoreSubscriber,
@@ -23,6 +24,7 @@ import { defineWebInspector } from "@copilotkit/web-inspector";
 import { z } from "zod";
 import CopilotKitProvider from "../CopilotKitProvider.vue";
 import { useCopilotKit } from "../useCopilotKit";
+import { InspectorKey } from "../keys";
 import type { VueFrontendTool } from "../../types";
 import type { VueHumanInTheLoop } from "../../types";
 import { mountWithProvider } from "../../__tests__/utils/mount";
@@ -810,6 +812,23 @@ describe("CopilotKitProvider", () => {
     });
   });
 
+  describe("Unmount", () => {
+    it("disposes the core it created, so subscribers stop hearing from it", () => {
+      const { getCore, wrapper } = mountWithProvider(() => h("div"));
+      const core = getCore();
+      const onPropertiesChanged = vi.fn();
+      core.subscribe({ onPropertiesChanged });
+
+      core.setProperties({ before: "unmount" });
+      expect(onPropertiesChanged).toHaveBeenCalledTimes(1);
+
+      wrapper.unmount();
+      core.setProperties({ after: "unmount" });
+
+      expect(onPropertiesChanged).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe("inspector visibility", () => {
     async function settleInspectorLoad(): Promise<void> {
       await vi.dynamicImportSettled();
@@ -821,7 +840,7 @@ describe("CopilotKitProvider", () => {
       vi.stubEnv("NODE_ENV", "development");
     });
 
-    it("renders by default on any development host and passes the provider core before connection", async () => {
+    it("renders by default on a loopback development host and passes the provider core before connection", async () => {
       let providerCore: CopilotKitCoreContextValue | null = null;
       const Probe = defineComponent({
         setup() {
@@ -855,12 +874,10 @@ describe("CopilotKitProvider", () => {
       view.unmount();
     });
 
-    it("does not render or load when explicitly disabled in development", async () => {
+    it("never renders or loads on a remote development host, even when explicitly enabled", async () => {
+      vi.stubGlobal("location", new URL("http://192.168.1.25:3000"));
       const view = render(CopilotKitProvider, {
-        props: {
-          runtimeUrl: "/api/copilotkit",
-          enableInspector: false,
-        },
+        props: { runtimeUrl: "/api/copilotkit", enableInspector: true },
         slots: { default: "child" },
       });
 
@@ -870,45 +887,55 @@ describe("CopilotKitProvider", () => {
       view.unmount();
     });
 
-    it("never renders or loads in production, even when explicitly enabled", async () => {
-      vi.stubEnv("NODE_ENV", "production");
-      const view = render(CopilotKitProvider, {
-        props: {
-          runtimeUrl: "/api/copilotkit",
-          enableInspector: true,
+    it("enables Inspector message actions only while the Inspector is shown", async () => {
+      let isInspectorEnabled: ComputedRef<boolean> | undefined;
+      const Probe = defineComponent({
+        setup() {
+          isInspectorEnabled = inject(InspectorKey)?.isInspectorEnabled;
+          return () => null;
         },
-        slots: { default: "child" },
+      });
+      const view = render(CopilotKitProvider, {
+        props: { runtimeUrl: "/api/copilotkit" },
+        slots: { default: Probe },
       });
 
-      await settleInspectorLoad();
-      expect(view.container.querySelector("cpk-web-inspector")).toBeNull();
-      expect(defineWebInspector).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(isInspectorEnabled?.value).toBe(true);
+      });
+      const inspector = view.container.querySelector("cpk-web-inspector")!;
+      inspector.dispatchEvent(
+        new CustomEvent("cpk-inspector-visibility-change", {
+          detail: { visible: false },
+        }),
+      );
+      await nextTick();
+      expect(isInspectorEnabled?.value).toBe(false);
+      expect(inspector.isConnected).toBe(true);
       view.unmount();
     });
 
-    it("does not let legacy showDevConsole disable the development Inspector", async () => {
+    it("does not render or load when explicitly disabled in development", async () => {
       const view = render(CopilotKitProvider, {
         props: {
           runtimeUrl: "/api/copilotkit",
-          showDevConsole: false,
+          enableInspector: false,
         },
         slots: { default: "child" },
       });
 
-      await waitFor(() => {
-        expect(
-          view.container.querySelector("cpk-web-inspector"),
-        ).not.toBeNull();
-      });
+      await settleInspectorLoad();
+      expect(view.container.querySelector("cpk-web-inspector")).toBeNull();
+      expect(defineWebInspector).not.toHaveBeenCalled();
       view.unmount();
     });
 
-    it("does not let legacy showDevConsole enable the production Inspector", async () => {
+    it("never renders or loads in production, even when explicitly enabled", async () => {
       vi.stubEnv("NODE_ENV", "production");
       const view = render(CopilotKitProvider, {
         props: {
           runtimeUrl: "/api/copilotkit",
-          showDevConsole: "auto",
+          enableInspector: true,
         },
         slots: { default: "child" },
       });

package/src/v2/providers/chat-configuration-store-key.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey } from "vue";
+import type { ɵChatConfigurationStore } from "@copilotkit/core";
+
+/**
+ * The nearest `CopilotChatConfigurationProvider`'s core store, so a nested
+ * provider can link its own store to it.
+ */
+export const ChatConfigurationStoreKey: InjectionKey<ɵChatConfigurationStore> =
+  Symbol("CopilotChatConfigurationStore");

package/src/v2/providers/markdown-renderer.ts

@@ -1,7 +1,11 @@
 import { inject } from "vue";
 import type { Component, InjectionKey } from "vue";
-import type { VueStreamingMarkdownNodeRenderers } from "@copilotkit/markdown-renderer/vue";
-import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown-renderer";
+import type {
+  VueStreamingMarkdownCitationClickHandler,
+  VueStreamingMarkdownLinkClickHandler,
+  VueStreamingMarkdownNodeRenderers,
+} from "@copilotkit/markdown/vue";
+import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown";
 
 /** Config for the built-in Vue default renderer (pass instead of a component). */
 export interface DefaultMarkdownRendererProps {
@@ -9,6 +13,8 @@ export interface DefaultMarkdownRendererProps {
   caret?: boolean;
   options?: Partial<StreamingMarkdownParserOptions>;
   class?: string;
+  onLinkClick?: VueStreamingMarkdownLinkClickHandler;
+  onCitationClick?: VueStreamingMarkdownCitationClickHandler;
 }
 
 export type MarkdownRendererValue = Component | DefaultMarkdownRendererProps;

package/src/v2/providers/types.ts

@@ -1,53 +1,7 @@
-export const CopilotChatDefaultLabels = {
-  chatInputPlaceholder: "Type a message...",
-  chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
-  chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
-  chatInputToolbarFinishTranscribeButtonLabel: "Finish",
-  chatInputToolbarAddButtonLabel: "Add photos or files",
-  chatInputToolbarToolsButtonLabel: "Tools",
-  chatInputToolbarSendButtonLabel: "Send message",
-  chatInputToolbarStopButtonLabel: "Stop",
-  assistantMessageToolbarCopyCodeLabel: "Copy",
-  assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
-  assistantMessageToolbarCopyMessageLabel: "Copy",
-  assistantMessageToolbarInspectorLabel: "View in Inspector",
-  assistantMessageToolbarInspectorDescription:
-    "Open this message in the Inspector",
-  assistantMessageToolbarInspectorLocalOnlyLabel: "Local only",
-  assistantMessageToolbarInspectorLocalOnlyDescription:
-    "Only visible on localhost or loopback hosts in development. Never shown in production.",
-  assistantMessageToolbarInspectorTitle: "CopilotKit Inspector",
-  assistantMessageToolbarInspectorHideLabel: "Hide this icon",
-  assistantMessageToolbarInspectorHideDescription: "Until you reload this page",
-  assistantMessageToolbarThumbsUpLabel: "Good response",
-  assistantMessageToolbarThumbsDownLabel: "Bad response",
-  assistantMessageFeedbackCommentPlaceholder: "Add a comment (optional)",
-  assistantMessageFeedbackCommentSubmitLabel: "Send comment",
-  assistantMessageToolbarReadAloudLabel: "Read aloud",
-  assistantMessageToolbarRegenerateLabel: "Regenerate",
-  userMessageToolbarCopyMessageLabel: "Copy",
-  userMessageToolbarEditMessageLabel: "Edit",
-  userMessageToolbarPreviousBranchLabel: "Previous branch",
-  userMessageToolbarNextBranchLabel: "Next branch",
-  chatDisclaimerText:
-    "AI can make mistakes. Please verify important information.",
-  chatToggleOpenLabel: "Open chat",
-  chatToggleCloseLabel: "Close chat",
-  chatScrollToBottomLabel: "Scroll to bottom",
-  modalHeaderTitle: "CopilotKit Chat",
-  welcomeMessageText: "How can I help you today?",
-  reasoningMessageThinkingLabel: "Thinking…",
-  chatInputSlashMenuLabel: "Slash commands",
-  chatInputSlashMenuEmptyText: "No commands found",
-  attachmentRemoveButtonLabel: "Remove attachment",
-  attachmentPlayVideoButtonLabel: "Play video",
-  attachmentPreviewCloseButtonLabel: "Close preview",
-  modalHeaderCloseButtonLabel: "Close",
-  modalHeaderThreadsButtonLabel: "Open threads",
-  sidebarLabel: "Copilot chat sidebar",
-} as const;
+import type { CopilotChatLabels } from "@copilotkit/core";
 
-export type CopilotChatLabels = typeof CopilotChatDefaultLabels;
+export { CopilotChatDefaultLabels } from "@copilotkit/core";
+export type { CopilotChatLabels } from "@copilotkit/core";
 
 export interface CopilotChatConfigurationValue {
   labels: CopilotChatLabels;

package/src/v2/providers/use-inspector-thread-override.ts

@@ -1,20 +1,12 @@
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import type { Ref } from "vue";
-import {
-  emitInspectorActiveThread,
-  emitInspectorViewThreadResult,
-  isInspectorThreadBridgeEnabled,
-  onInspectorStopViewing,
-  onInspectorViewThread,
-} from "@copilotkit/core";
-
-type InspectorOverride = {
-  requestId: string;
-  threadId: string;
-  agentId: string;
-  previousThreadId: string;
-};
+import { ɵInspectorThreadOverride } from "@copilotkit/core";
 
+/**
+ * Apply the Inspector's "view this thread" requests to a chat. Core's
+ * `ɵInspectorThreadOverride` owns the state machine; this composable binds it
+ * to the component's lifetime and Vue reactivity.
+ */
 export function useInspectorThreadOverride(args: {
   agentId: Ref<string>;
   baseThreadId: Ref<string>;
@@ -23,77 +15,27 @@ export function useInspectorThreadOverride(args: {
   inspectorRequestId: Ref<string | null>;
   failInspectorOverride: (requestId: string) => void;
 } {
-  const override = ref<InspectorOverride | null>(null);
-
-  const restoreOverride = (
-    current: InspectorOverride,
-    nextThreadId: string,
-  ) => {
-    override.value = null;
-    emitInspectorActiveThread({
-      requestId: current.requestId,
-      threadId: nextThreadId,
-      agentId: current.agentId,
-      source: "app",
-    });
-  };
-
-  const failInspectorOverride = (requestId: string) => {
-    const current = override.value;
-    if (!current || current.requestId !== requestId) return;
-    emitInspectorViewThreadResult({
-      requestId,
-      threadId: current.threadId,
-      agentId: current.agentId,
-      ok: false,
-      reason: "connect-failed",
-    });
-    restoreOverride(current, current.previousThreadId);
-  };
-
-  if (isInspectorThreadBridgeEnabled()) {
-    const offView = onInspectorViewThread((payload) => {
-      if (payload.agentId !== args.agentId.value) return false;
-      override.value = override.value
-        ? { ...override.value, ...payload }
-        : {
-            ...payload,
-            previousThreadId: args.baseThreadId.value,
-          };
-      emitInspectorViewThreadResult({ ...payload, ok: true });
-      emitInspectorActiveThread({ ...payload, source: "override" });
-      return true;
-    });
-
-    const offStop = onInspectorStopViewing((payload) => {
-      const current = override.value;
-      if (!current) return;
-      if (payload.requestId !== current.requestId) return;
-      if (payload.agentId !== current.agentId) return;
-      restoreOverride(current, current.previousThreadId);
-    });
-
-    onBeforeUnmount(() => {
-      offView();
-      offStop();
-    });
-  }
+  const controller = new ɵInspectorThreadOverride({
+    agentId: args.agentId.value,
+    baseThreadId: args.baseThreadId.value,
+  });
+  const override = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    override.value = controller.getSnapshot();
+  });
 
   watch([args.agentId, args.baseThreadId], ([agentId, baseThreadId]) => {
-    const current = override.value;
-    if (!current) return;
-    if (agentId !== current.agentId) {
-      restoreOverride(current, current.previousThreadId);
-      return;
-    }
-    if (baseThreadId === current.previousThreadId) return;
-    if (baseThreadId === current.threadId) return;
-    restoreOverride(current, baseThreadId);
+    controller.update({ agentId, baseThreadId });
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+    controller.dispose();
   });
 
   return {
     inspectorThreadId: computed(() => override.value?.threadId ?? null),
     inspectorRequestId: computed(() => override.value?.requestId ?? null),
-    failInspectorOverride,
+    failInspectorOverride: controller.fail,
   };
 }