@copilotkit/vue 2.0.0-rc.0 → 2.0.0-rc.10

package/src/v2/styles/CopilotKitStyles.ts

@@ -0,0 +1,95 @@
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject,
+  onActivated,
+  onDeactivated,
+  onUnmounted,
+  shallowRef,
+} from "vue";
+import type { AppContext, ShallowRef } from "vue";
+import { stylesheet } from "@copilotkit/core/styles";
+import { CopilotStyleOptionsKey } from "../providers/keys";
+import type { CopilotStyleOptions } from "../providers/keys";
+
+interface StylesInstance {
+  enabled: () => boolean;
+}
+
+// The mounted instances of each app, in setup order. Keyed by app, so on the
+// server each request's app has its own list.
+const instancesByApp = new WeakMap<
+  AppContext,
+  ShallowRef<readonly StylesInstance[]>
+>();
+
+/**
+ * Renders the CSS for CopilotKit's UI, so apps never import a stylesheet.
+ * `CopilotChat` (and so `CopilotPopup` and `CopilotSidebar`) renders it for
+ * you. Render it yourself only when you build a layout from the chat parts
+ * without `CopilotChat`.
+ *
+ * The `<style>` tag renders in place, so it is in the server HTML and the page
+ * is styled before it hydrates. Only the first instance in the app renders the
+ * tag, so a page with many chats has one copy. When that instance unmounts, the
+ * next one renders the tag in the same update. The server and the client set
+ * up instances in the same order, so hydration matches.
+ *
+ * Renders nothing when `CopilotKitProvider` has `:inject-styles="false"`.
+ */
+export const CopilotKitStyles = defineComponent({
+  name: "CopilotKitStyles",
+  setup() {
+    const options = inject(
+      CopilotStyleOptionsKey,
+      () => computed<CopilotStyleOptions>(() => ({ inject: true })),
+      true,
+    );
+    const appContext = getCurrentInstance()!.appContext;
+    let instances = instancesByApp.get(appContext);
+    if (!instances) {
+      instances = shallowRef([]);
+      instancesByApp.set(appContext, instances);
+    }
+    const list = instances;
+    const self: StylesInstance = { enabled: () => options.value.inject };
+
+    const add = () => {
+      if (!list.value.includes(self)) {
+        list.value = [...list.value, self];
+      }
+    };
+    const remove = () => {
+      list.value = list.value.filter((instance) => instance !== self);
+    };
+    add();
+    onUnmounted(remove);
+    // A deactivated <KeepAlive> child is out of the document, so it can't
+    // hold the tag.
+    onDeactivated(remove);
+    onActivated(add);
+
+    const rendersTag = computed(
+      () => list.value.find((instance) => instance.enabled()) === self,
+    );
+
+    return () => {
+      if (!rendersTag.value) {
+        return null;
+      }
+      const { nonce } = options.value;
+      return h("style", {
+        "data-copilotkit-styles": "",
+        nonce,
+        // Browsers hide a nonce from the DOM, so hydration would see a
+        // mismatch that isn't one.
+        "data-allow-mismatch": nonce ? "attribute" : undefined,
+        // innerHTML, not a text child: the server would escape `>` in a text
+        // child, and inside <style> that breaks the CSS.
+        innerHTML: stylesheet,
+      });
+    };
+  },
+});

package/src/v2/styles/__tests__/CopilotKitStyles.client.test.ts

@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  createApp,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+} from "vue";
+import type { Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { mount } from "@vue/test-utils";
+import type { VueWrapper } from "@vue/test-utils";
+import { stylesheet } from "@copilotkit/core/styles";
+import CopilotKitProvider from "../../providers/CopilotKitProvider.vue";
+import { StateCapturingAgent } from "../../__tests__/utils/agents";
+import CopilotChat from "../../components/chat/CopilotChat.vue";
+import CopilotKitV1 from "../../../components/copilot-provider/CopilotKit.vue";
+import { CopilotKitStyles } from "../CopilotKitStyles";
+
+const styleTags = () =>
+  document.querySelectorAll("style[data-copilotkit-styles]");
+
+let wrapper: VueWrapper | undefined;
+
+afterEach(() => {
+  wrapper?.unmount();
+  wrapper = undefined;
+  document.body.innerHTML = "";
+});
+
+function mountWithProvider(
+  children: () => unknown,
+  providerProps: Record<string, unknown> = {},
+  provider: Component = CopilotKitProvider as Component,
+) {
+  wrapper = mount(provider, {
+    attachTo: document.body,
+    props: {
+      agents__unsafe_dev_only: { default: new StateCapturingAgent() },
+      ...providerProps,
+    },
+    slots: { default: children },
+  });
+  return wrapper;
+}
+
+describe("CopilotKitStyles in the browser", () => {
+  it("is rendered by CopilotChat, so apps don't import a stylesheet", () => {
+    mountWithProvider(() => h(CopilotChat, { welcomeScreen: false }));
+
+    const tags = styleTags();
+    expect(tags).toHaveLength(1);
+    expect(tags[0]!.textContent).toBe(stylesheet);
+  });
+
+  it("keeps one copy for many chats, and keeps it while any chat is mounted", async () => {
+    const showFirst = ref(true);
+    const showSecond = ref(true);
+    mountWithProvider(() => [
+      showFirst.value ? h(CopilotChat, { welcomeScreen: false }) : null,
+      showSecond.value ? h(CopilotChat, { welcomeScreen: false }) : null,
+    ]);
+    expect(styleTags()).toHaveLength(1);
+
+    // The first chat owns the tag. Unmounting it hands the tag on.
+    showFirst.value = false;
+    await nextTick();
+    expect(styleTags()).toHaveLength(1);
+
+    showFirst.value = true;
+    await nextTick();
+    expect(styleTags()).toHaveLength(1);
+
+    showFirst.value = false;
+    showSecond.value = false;
+    await nextTick();
+    expect(styleTags()).toHaveLength(0);
+  });
+
+  it("adds the CSP nonce to the style tag", () => {
+    mountWithProvider(() => h(CopilotKitStyles), { nonce: "abc123" });
+
+    const tags = styleTags();
+    expect(tags).toHaveLength(1);
+    expect(tags[0]!.getAttribute("nonce")).toBe("abc123");
+  });
+
+  it("adds no style tag when the app loads styles.css itself", () => {
+    mountWithProvider(() => h(CopilotChat, { welcomeScreen: false }), {
+      injectStyles: false,
+    });
+
+    expect(styleTags()).toHaveLength(0);
+    expect(document.querySelectorAll("style")).toHaveLength(0);
+  });
+
+  it("injects through the v1 CopilotKit provider by default", () => {
+    mountWithProvider(() => h(CopilotKitStyles), {}, CopilotKitV1 as Component);
+
+    expect(styleTags()).toHaveLength(1);
+  });
+
+  it("injects without a provider", () => {
+    wrapper = mount(CopilotKitStyles, { attachTo: document.body });
+
+    expect(styleTags()).toHaveLength(1);
+  });
+
+  it("hydrates the server-rendered tag without a mismatch", async () => {
+    const Page = defineComponent({
+      render: () =>
+        h(
+          CopilotKitProvider as Component,
+          { agents__unsafe_dev_only: { default: new StateCapturingAgent() } },
+          { default: () => [h(CopilotKitStyles), h(CopilotKitStyles)] },
+        ),
+    });
+    const container = document.createElement("div");
+    container.innerHTML = await renderToString(createSSRApp(Page));
+    document.body.appendChild(container);
+    const serverTag = styleTags()[0];
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const app = createSSRApp(Page);
+    app.mount(container);
+    await nextTick();
+
+    const mismatches = [...warn.mock.calls, ...error.mock.calls].filter(
+      (args) => String(args[0]).includes("Hydration"),
+    );
+    expect(mismatches).toEqual([]);
+    expect(styleTags()).toHaveLength(1);
+    expect(styleTags()[0]).toBe(serverTag);
+    app.unmount();
+  });
+
+  it("gives separate apps on one page their own copy", () => {
+    const first = createApp({ render: () => h(CopilotKitStyles) });
+    const second = createApp({ render: () => h(CopilotKitStyles) });
+    first.mount(document.body.appendChild(document.createElement("div")));
+    second.mount(document.body.appendChild(document.createElement("div")));
+
+    expect(styleTags()).toHaveLength(2);
+    first.unmount();
+    second.unmount();
+  });
+});

package/src/v2/styles/__tests__/CopilotKitStyles.ssr.test.ts

@@ -0,0 +1,71 @@
+// @vitest-environment node
+import { describe, expect, it } from "vitest";
+import { createSSRApp, h } from "vue";
+import type { Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { stylesheet } from "@copilotkit/core/styles";
+import CopilotKitProvider from "../../providers/CopilotKitProvider.vue";
+import { StateCapturingAgent } from "../../__tests__/utils/agents";
+import { CopilotKitStyles } from "../CopilotKitStyles";
+
+function renderPage(
+  children: () => unknown[],
+  providerProps: Record<string, unknown> = {},
+): Promise<string> {
+  const app = createSSRApp({
+    render: () =>
+      h(
+        CopilotKitProvider as Component,
+        {
+          agents__unsafe_dev_only: { default: new StateCapturingAgent() },
+          ...providerProps,
+        },
+        {
+          default: children,
+        },
+      ),
+  });
+  return renderToString(app);
+}
+
+describe("CopilotKitStyles on the server", () => {
+  it("puts one copy of the stylesheet in the server HTML", async () => {
+    const html = await renderPage(() => [
+      h(CopilotKitStyles),
+      h(CopilotKitStyles),
+    ]);
+
+    const tags = html.match(/<style[^>]*>/g) ?? [];
+    expect(tags).toHaveLength(1);
+    expect(tags[0]).toContain("data-copilotkit-styles");
+    // Unescaped, so selectors such as `a > b` still work.
+    expect(html).toContain(`>${stylesheet}</style>`);
+    expect(stylesheet).toContain(".cpk-suggestion-pill)");
+  });
+
+  it("gives each server-rendered app its own copy", async () => {
+    const first = await renderPage(() => [h(CopilotKitStyles)]);
+    const second = await renderPage(() => [h(CopilotKitStyles)]);
+
+    expect(first).toContain("<style");
+    expect(second).toContain("<style");
+  });
+
+  it("adds the CSP nonce to the style tag when the app passes one", async () => {
+    const html = await renderPage(() => [h(CopilotKitStyles)], {
+      nonce: "abc123",
+    });
+    const tags = html.match(/<style[^>]*>/g) ?? [];
+
+    expect(tags).toHaveLength(1);
+    expect(tags[0]).toContain('nonce="abc123"');
+  });
+
+  it("adds no style tag when the app loads styles.css itself", async () => {
+    const html = await renderPage(() => [h(CopilotKitStyles)], {
+      injectStyles: false,
+    });
+
+    expect(html).not.toContain("<style");
+  });
+});

package/src/v2/types/__tests__/defineToolCallRenderer.test.ts

@@ -2,11 +2,30 @@ import { describe, it, expect } from "vitest";
 import { defineComponent, h } from "vue";
 import { z } from "zod";
 import { ToolCallStatus } from "@copilotkit/core";
+import type { VNode } from "vue";
 import { defineToolCallRenderer } from "../defineToolCallRenderer";
-import type { VueToolCallRenderer } from "../vue-tool-call-renderer";
+import type {
+  VueToolCallRenderer,
+  VueToolCallRendererRenderProps,
+} from "../vue-tool-call-renderer";
+
+/**
+ * Calls a renderer built from a render function. `render` is typed as a
+ * function or a component, and TypeScript cannot tell which one this test
+ * passed, so the narrowing cast lives here once.
+ */
+function callRender<T>(
+  renderer: VueToolCallRenderer<T>,
+  props: VueToolCallRendererRenderProps<T>,
+) {
+  const render = renderer.render as (
+    props: VueToolCallRendererRenderProps<T>,
+  ) => VNode;
+  return render(props);
+}
 
 describe("defineToolCallRenderer", () => {
-  it("defaults wildcard args to z.any and preserves runtime tool name", () => {
+  it("defaults wildcard args to a schema that accepts any value and preserves runtime tool name", () => {
     const wildcardRenderer = defineToolCallRenderer({
       name: "*",
       render: ({ name, args, status }) =>
@@ -18,19 +37,11 @@ describe("defineToolCallRenderer", () => {
     });
 
     expect(wildcardRenderer.name).toBe("*");
-    expect(wildcardRenderer.args.safeParse({ anything: true }).success).toBe(
-      true,
-    );
-
-    const rendered = (
-      wildcardRenderer.render as (props: {
-        name: string;
-        toolCallId: string;
-        args: Record<string, unknown>;
-        status: ToolCallStatus;
-        result: string | undefined;
-      }) => ReturnType<typeof h>
-    )({
+    expect(
+      wildcardRenderer.args["~standard"].validate({ anything: true }),
+    ).toEqual({ value: { anything: true } });
+
+    const rendered = callRender(wildcardRenderer, {
       name: "customTool",
       toolCallId: "tc-wildcard-1",
       args: { x: 1 },
@@ -53,15 +64,7 @@ describe("defineToolCallRenderer", () => {
         ),
     });
 
-    const rendered = (
-      wildcardRenderer.render as (props: {
-        name: string;
-        toolCallId: string;
-        args: Record<string, unknown>;
-        status: ToolCallStatus;
-        result: string | undefined;
-      }) => ReturnType<typeof h>
-    )({
+    const rendered = callRender(wildcardRenderer, {
       name: "customTool",
       toolCallId: "tc-123",
       args: {},
@@ -136,15 +139,7 @@ describe("defineToolCallRenderer", () => {
       },
     });
 
-    const rendered = (
-      typedRenderer.render as (props: {
-        name: string;
-        toolCallId: string;
-        args: { location: string; units?: "celsius" | "fahrenheit" };
-        status: ToolCallStatus;
-        result: string | undefined;
-      }) => ReturnType<typeof h>
-    )({
+    const rendered = callRender(typedRenderer, {
       name: "get_weather",
       toolCallId: "tc-weather-1",
       args: { location: "Paris", units: "celsius" },

package/src/v2/types/defineToolCallRenderer.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { ɵanySchema } from "@copilotkit/shared";
 import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
 import type { VueToolCallRenderer } from "./vue-tool-call-renderer";
 import type { VueToolCallRendererRenderFn } from "./vue-tool-call-renderer";
@@ -7,6 +7,7 @@ export function defineToolCallRenderer(def: {
   name: "*";
   render: VueToolCallRendererRenderFn<unknown>;
   agentId?: string;
+  group?: boolean;
 }): VueToolCallRenderer<unknown>;
 
 export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
@@ -14,6 +15,7 @@ export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
   args: S;
   render: VueToolCallRendererRenderFn<InferSchemaOutput<S>>;
   agentId?: string;
+  group?: boolean;
 }): VueToolCallRenderer<InferSchemaOutput<S>>;
 
 export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
@@ -21,12 +23,15 @@ export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
   args?: S;
   render: VueToolCallRendererRenderFn<unknown>;
   agentId?: string;
+  group?: boolean;
 }): VueToolCallRenderer<unknown> {
-  const argsSchema = def.name === "*" && !def.args ? z.any() : def.args;
+  // Only a "*" renderer may leave out `args`; it accepts any arguments.
+  const args = def.args ?? ɵanySchema;
   return {
     name: def.name,
-    args: argsSchema as StandardSchemaV1<any, unknown>,
-    render: def.render as VueToolCallRenderer<unknown>["render"],
+    args,
+    render: def.render,
     ...(def.agentId ? { agentId: def.agentId } : {}),
+    ...(def.group ? { group: true } : {}),
   };
 }

package/src/v2/types/human-in-the-loop.ts

@@ -1,37 +1,13 @@
-import type { FrontendTool, ToolCallStatus } from "@copilotkit/core";
+import type { FrontendTool, HumanInTheLoopRenderProps } from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
-export type VueHumanInTheLoopRenderProps<T> =
-  | {
-      name: string;
-      description: string;
-      toolCallId: string;
-      agentId?: string;
-      args: Partial<T>;
-      status: ToolCallStatus.InProgress;
-      result: undefined;
-      respond: undefined;
-    }
-  | {
-      name: string;
-      description: string;
-      toolCallId: string;
-      agentId?: string;
-      args: T;
-      status: ToolCallStatus.Executing;
-      result: undefined;
-      respond: (result: unknown) => Promise<void>;
-    }
-  | {
-      name: string;
-      description: string;
-      toolCallId: string;
-      agentId?: string;
-      args: T;
-      status: ToolCallStatus.Complete;
-      result: string;
-      respond: undefined;
-    };
+/**
+ * Props a Vue human-in-the-loop renderer receives. Same as core's
+ * `HumanInTheLoopRenderProps`.
+ *
+ * @typeParam T - The shape of the tool arguments.
+ */
+export type VueHumanInTheLoopRenderProps<T> = HumanInTheLoopRenderProps<T>;
 
 export type VueHumanInTheLoopRenderFn<T> =
   | ((props: VueHumanInTheLoopRenderProps<T>) => VNodeChild)

package/src/v2/types/interrupt.ts

@@ -1,31 +1,7 @@
-import type { Interrupt, RunAgentResult } from "@ag-ui/client";
-
-export interface InterruptEvent<TValue = unknown> {
-  name: string;
-  value: TValue;
-}
-
-export type InterruptResolveFn = (
-  payload?: unknown,
-  interruptId?: string,
-) => Promise<RunAgentResult | void>;
-export type InterruptCancelFn = (
-  interruptId?: string,
-) => Promise<RunAgentResult | void>;
-
-export interface InterruptHandlerProps<TValue = unknown> {
-  event: InterruptEvent<TValue>;
-  interrupt: Interrupt | null;
-  interrupts: Interrupt[];
-  resolve: InterruptResolveFn;
-  cancel: InterruptCancelFn;
-}
-
-export interface InterruptRenderProps<TValue = unknown, TResult = unknown> {
-  event: InterruptEvent<TValue>;
-  interrupt: Interrupt | null;
-  interrupts: Interrupt[];
-  result: TResult;
-  resolve: InterruptResolveFn;
-  cancel: InterruptCancelFn;
-}
+export type {
+  InterruptEvent,
+  InterruptResolveFn,
+  InterruptCancelFn,
+  InterruptHandlerProps,
+  InterruptRenderProps,
+} from "@copilotkit/core";

package/src/v2/types/vue-activity-message-renderer.ts

@@ -1,22 +1,31 @@
-import type { ActivityMessage } from "@ag-ui/core";
-import type { AbstractAgent } from "@ag-ui/client";
-import type { z } from "zod";
+import type {
+  ActivityMessageRenderProps,
+  ActivityMessageRendererDef,
+} from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
-export interface VueActivityMessageRendererProps<TActivityContent> {
-  activityType: string;
-  content: TActivityContent;
-  message: ActivityMessage;
-  agent: AbstractAgent | undefined;
-}
+/**
+ * Props a Vue activity message renderer receives. Same as core's
+ * `ActivityMessageRenderProps`.
+ *
+ * @typeParam TActivityContent - The shape of the activity content.
+ */
+export type VueActivityMessageRendererProps<TActivityContent> =
+  ActivityMessageRenderProps<TActivityContent>;
 
 export type VueActivityMessageRendererRenderFn<TActivityContent> =
   | ((props: VueActivityMessageRendererProps<TActivityContent>) => VNodeChild)
   | Component<VueActivityMessageRendererProps<TActivityContent>>;
 
-export interface VueActivityMessageRenderer<TActivityContent> {
-  activityType: string;
-  agentId?: string;
-  content: z.ZodSchema<TActivityContent>;
-  render: VueActivityMessageRendererRenderFn<TActivityContent>;
-}
+/**
+ * A Vue activity message renderer registration. `content` takes any
+ * Standard Schema (zod, valibot, arktype, and so on). The chat validates the
+ * activity content with it and passes the result to `render`.
+ *
+ * @typeParam TActivityContent - The shape of the activity content.
+ */
+export type VueActivityMessageRenderer<TActivityContent> =
+  ActivityMessageRendererDef<
+    TActivityContent,
+    VueActivityMessageRendererRenderFn<TActivityContent>
+  >;

package/src/v2/types/vue-custom-message-renderer.ts

@@ -1,24 +1,20 @@
-import type { Message } from "@ag-ui/core";
+import type {
+  CustomMessageRendererDef,
+  CustomMessageRendererPosition,
+  CustomMessageRenderProps,
+} from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
-export type VueCustomMessageRendererPosition = "before" | "after";
+/** Where a custom message renderer draws. Same as core's type. */
+export type VueCustomMessageRendererPosition = CustomMessageRendererPosition;
 
-export interface VueCustomMessageRendererProps {
-  message: Message;
-  position: VueCustomMessageRendererPosition;
-  runId: string;
-  messageIndex: number;
-  messageIndexInRun: number;
-  numberOfMessagesInRun: number;
-  agentId: string;
-  stateSnapshot: unknown;
-}
+/** Props a Vue custom message renderer receives. Same as core's type. */
+export type VueCustomMessageRendererProps = CustomMessageRenderProps;
 
 export type VueCustomMessageRendererRenderFn =
   | ((props: VueCustomMessageRendererProps) => VNodeChild)
   | Component<VueCustomMessageRendererProps>;
 
-export interface VueCustomMessageRenderer {
-  agentId?: string;
-  render: VueCustomMessageRendererRenderFn;
-}
+/** A Vue custom message renderer registration. */
+export type VueCustomMessageRenderer =
+  CustomMessageRendererDef<VueCustomMessageRendererRenderFn>;

package/src/v2/types/vue-tool-call-renderer.ts

@@ -1,32 +1,16 @@
-import type { ToolCallStatus } from "@copilotkit/core";
-import type { StandardSchemaV1 } from "@copilotkit/shared";
+import type {
+  ToolCallRenderProps,
+  ToolCallRendererDef,
+} from "@copilotkit/core";
 import type { Component, VNodeChild } from "vue";
 
 /**
- * Props passed to a Vue tool call render function.
+ * Props passed to a Vue tool call render function. Same as core's
+ * `ToolCallRenderProps`.
+ *
+ * @typeParam T - The shape of the tool arguments.
  */
-export type VueToolCallRendererRenderProps<T> =
-  | {
-      name: string;
-      toolCallId: string;
-      args: Partial<T>;
-      status: ToolCallStatus.InProgress;
-      result: undefined;
-    }
-  | {
-      name: string;
-      toolCallId: string;
-      args: T;
-      status: ToolCallStatus.Executing;
-      result: undefined;
-    }
-  | {
-      name: string;
-      toolCallId: string;
-      args: T;
-      status: ToolCallStatus.Complete;
-      result: string;
-    };
+export type VueToolCallRendererRenderProps<T> = ToolCallRenderProps<T>;
 
 /**
  * Vue component or render function for tool call rendering.
@@ -36,9 +20,17 @@ export type VueToolCallRendererRenderFn<T> =
   | ((props: VueToolCallRendererRenderProps<T>) => VNodeChild)
   | Component<VueToolCallRendererRenderProps<T>>;
 
-export interface VueToolCallRenderer<T = unknown> {
-  name: string;
-  args: StandardSchemaV1<any, T>;
-  agentId?: string;
-  render: VueToolCallRendererRenderFn<T>;
-}
+type VueToolCallRendererDef<T> = ToolCallRendererDef<
+  T,
+  VueToolCallRendererRenderFn<T>
+>;
+
+/**
+ * A Vue tool call renderer registration: core's `ToolCallRendererDef` with a
+ * Vue render function. `args` is required here. Use `defineToolCallRenderer`
+ * to build one; it fills in `args` for a `"*"` renderer that has no schema.
+ *
+ * @typeParam T - The shape of the tool arguments.
+ */
+export type VueToolCallRenderer<T = unknown> = VueToolCallRendererDef<T> &
+  Required<Pick<VueToolCallRendererDef<T>, "args">>;