@tylertech/forge-ai 0.15.2 → 0.15.3-dev.1

package/dist/core/canvas-controller.mjs

@@ -0,0 +1,221 @@
+import { ContextProvider } from "@lit/context";
+import { toolCanvasHostContext, resolveToolCanvasTitle, createToolCanvas } from "../ai-chatbot/tool-canvas.mjs";
+import { shouldShowToolRenderer } from "../ai-chatbot/utils.mjs";
+class CanvasController {
+  constructor(host, config) {
+    this.#autoOpenedToolCallIds = /* @__PURE__ */ new Set();
+    this.#isOpen = false;
+    this.#content = null;
+    this.handleOpenRequest = (evt) => {
+      evt.stopPropagation();
+      const toolCall = this.#findToolCall(evt.detail.toolCallId);
+      const toolDefinition = this.#config.getTools().get(evt.detail.toolName);
+      if (!toolCall || !toolDefinition) {
+        return;
+      }
+      evt.detail.handled = this.#openToolCall({ toolCall, toolDefinition, title: evt.detail.title });
+    };
+    this.handleCloseRequest = (evt) => {
+      evt.stopPropagation();
+      evt.detail.handled = this.#closeToolCall(evt.detail.toolCallId);
+    };
+    this.#host = host;
+    this.#config = config;
+    host.addController(this);
+    this.#provider = new ContextProvider(host, {
+      context: toolCanvasHostContext,
+      initialValue: { presentation: "inline-expandable" }
+    });
+  }
+  #host;
+  #config;
+  #provider;
+  #autoOpenedToolCallIds;
+  #isOpen;
+  #content;
+  hostConnected() {
+  }
+  get isOpen() {
+    return this.#isOpen;
+  }
+  get content() {
+    return this.#content;
+  }
+  open(options = {}) {
+    return this.#commitOpen({ id: options.id, title: options.title, node: options.content });
+  }
+  /** Closes the canvas. Returns false if it was not open or the close event was prevented. */
+  close() {
+    if (!this.#isOpen) {
+      return false;
+    }
+    const event = this.#config.dispatchHostEvent({ type: this.#config.closeEvent, cancelable: true });
+    if (event.defaultPrevented) {
+      return false;
+    }
+    this.#hide();
+    return true;
+  }
+  /** Closes without asking, for when the host can no longer show the canvas (e.g. it left its conversation view). */
+  forceClose() {
+    if (!this.#isOpen) {
+      return;
+    }
+    this.#hide();
+    this.#config.dispatchHostEvent({ type: this.#config.closeEvent });
+  }
+  /** Forgets the canvas entirely, for when the thread it belonged to is gone. */
+  reset() {
+    this.forceClose();
+    this.#content = null;
+    this.#autoOpenedToolCallIds.clear();
+    this.#host.requestUpdate();
+  }
+  /** Tool calls restored from history are marked as seen so loading a thread never auto-opens the canvas. */
+  markSeen(messages) {
+    for (const message of messages) {
+      for (const toolCall of message.toolCalls ?? []) {
+        this.#autoOpenedToolCallIds.add(toolCall.id);
+      }
+    }
+  }
+  /** The tool call object is replaced on every args or status update, so open content follows it by id. */
+  syncToolCall() {
+    const content = this.#content;
+    if (!this.#isOpen || !content?.toolCall || !content.toolDefinition) {
+      return;
+    }
+    const latest = this.#findToolCall(content.toolCall.id);
+    if (!latest || latest === content.toolCall) {
+      return;
+    }
+    const { toolDefinition } = content;
+    const renderer = toolDefinition.canvas?.renderer ?? toolDefinition.renderer;
+    let node = content.node;
+    if (renderer?.elementTag && node) {
+      node.toolCall = latest;
+    } else {
+      node = this.#createRenderer(latest, toolDefinition);
+    }
+    this.#content = {
+      ...content,
+      node,
+      toolCall: latest,
+      title: content.titleOverride ?? resolveToolCanvasTitle(latest, toolDefinition)
+    };
+  }
+  /** Opens tools configured with `canvas.open: 'auto'` once their renderer shows. Call after render, not during it. */
+  autoOpenPending() {
+    const tools = this.#config.getTools();
+    if (![...tools.values()].some((tool) => tool.canvas?.open === "auto")) {
+      return;
+    }
+    for (const toolCall of this.#config.getToolCalls()) {
+      const toolDefinition = tools.get(toolCall.name);
+      if (toolDefinition?.canvas?.open !== "auto" || this.#autoOpenedToolCallIds.has(toolCall.id) || !shouldShowToolRenderer(toolCall, toolDefinition)) {
+        continue;
+      }
+      this.#autoOpenedToolCallIds.add(toolCall.id);
+      this.#openToolCall({ toolCall, toolDefinition, reason: "auto" });
+    }
+  }
+  #findToolCall(id) {
+    return this.#config.getToolCalls().find((toolCall) => toolCall.id === id);
+  }
+  #commitOpen(content, reason = "request") {
+    if (this.#config.canOpen && !this.#config.canOpen()) {
+      return false;
+    }
+    const event = this.#config.dispatchHostEvent({
+      type: this.#config.openEvent,
+      detail: { id: content.id, title: content.title, toolCall: content.toolCall },
+      cancelable: true
+    });
+    if (event.defaultPrevented) {
+      return false;
+    }
+    this.#content = content;
+    if (!this.#isOpen) {
+      this.#isOpen = true;
+      this.#config.onOpen?.({ reason });
+    }
+    this.#syncProvider();
+    this.#host.requestUpdate();
+    return true;
+  }
+  // Content stays mounted while the host collapses, then is released so hidden iframes and timers stop.
+  #hide() {
+    this.#isOpen = false;
+    this.#config.onClose?.();
+    this.#syncProvider();
+    this.#host.requestUpdate();
+    void this.#releaseAfterCollapse();
+  }
+  async #releaseAfterCollapse() {
+    const content = this.#content;
+    await this.#host.updateComplete;
+    await this.#config.collapsed?.();
+    if (!this.#isOpen && this.#content === content) {
+      this.#content = null;
+      this.#host.requestUpdate();
+    }
+  }
+  #syncProvider() {
+    this.#provider.setValue({
+      presentation: "inline-expandable",
+      openToolCallId: this.#isOpen ? this.#content?.toolCall?.id : void 0
+    });
+  }
+  #closeToolCall(toolCallId) {
+    if (this.#content?.toolCall?.id !== toolCallId) {
+      return false;
+    }
+    return this.close();
+  }
+  #openToolCall({
+    toolCall,
+    toolDefinition,
+    title,
+    reason
+  }) {
+    if (this.#isOpen && this.#content?.toolCall?.id === toolCall.id) {
+      this.#config.onRefocus?.();
+      return true;
+    }
+    return this.#commitOpen(
+      {
+        id: toolCall.id,
+        title: title ?? resolveToolCanvasTitle(toolCall, toolDefinition),
+        node: this.#createRenderer(toolCall, toolDefinition),
+        toolCall,
+        toolDefinition,
+        titleOverride: title
+      },
+      reason
+    );
+  }
+  #createControls(toolCall, toolDefinition) {
+    return createToolCanvas({
+      available: true,
+      // This instance only exists to be shown in the canvas, and is created before the canvas finishes opening.
+      isOpen: () => true,
+      open: (options) => this.#openToolCall({ toolCall, toolDefinition, title: options?.title }),
+      close: () => this.#closeToolCall(toolCall.id)
+    });
+  }
+  #createRenderer(toolCall, toolDefinition) {
+    const renderer = toolDefinition.canvas?.renderer ?? toolDefinition.renderer;
+    const canvas = this.#createControls(toolCall, toolDefinition);
+    if (renderer?.elementTag) {
+      const element = document.createElement(renderer.elementTag);
+      element.toolCall = toolCall;
+      element.presentation = "canvas";
+      element.canvas = canvas;
+      return element;
+    }
+    return renderer?.render?.(toolCall, { presentation: "canvas", canvas });
+  }
+}
+export {
+  CanvasController
+};

package/dist/core/chatbot-core-controller.d.ts

@@ -1,6 +1,6 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { AgentAdapter } from '../ai-chatbot/agent-adapter.js';
-import { ChatMessage, ClientMessageInput, FileAttachment, FileUploadCallbacks, MessageItem, ThreadState, ToolCall, ToolDefinition } from '../ai-chatbot/types.js';
+import { ChatMessage, ClientMessageInput, FileAttachment, FileUploadCallbacks, MessageItem, ThreadState, ToolCall, AnyToolDefinition } from '../ai-chatbot/types.js';
 export interface ChatbotCoreCallbacks {
     onRequestUpdate: () => void;
     onScrollToBottom: () => void;
@@ -20,7 +20,7 @@ export declare class ChatbotCoreController implements ReactiveController {
     get isStreaming(): boolean;
     get isUploading(): boolean;
     get hasMessages(): boolean;
-    get tools(): Map<string, ToolDefinition>;
+    get tools(): Map<string, AnyToolDefinition>;
     get pendingAttachments(): FileAttachment[];
     get completedAttachments(): FileAttachment[];
     sendMessage(config: {
@@ -38,6 +38,8 @@ export declare class ChatbotCoreController implements ReactiveController {
     getMessages(): ChatMessage[];
     setMessages(messages: ChatMessage[]): void;
     updateMessageContent(id: string, content: string): void;
+    /** Tool call ids rendered at or after `index` in {@link messageItems}. */
+    getToolCallIdsFrom(index: number): string[];
     removeMessageItemsFrom(index: number): void;
     setResponseFeedback(responseId: string, feedback: {
         type: 'positive' | 'negative';

package/dist/core/chatbot-core-controller.mjs

@@ -2,6 +2,8 @@ import { SubscriptionManager } from "../ai-chatbot/event-emitter.mjs";
 import { FileUploadManager } from "../ai-chatbot/file-upload-manager.mjs";
 import { MessageStateController } from "../ai-chatbot/message-state-controller.mjs";
 import { generateId } from "../ai-chatbot/utils.mjs";
+const NO_UI_RESOURCE = { uiResource: void 0, uiResourceStatus: void 0 };
+const UNSETTLED_TOOL_CALL_STATUSES = ["pending", "parsing", "executing"];
 class ChatbotCoreController {
   #host;
   #callbacks;
@@ -10,6 +12,18 @@ class ChatbotCoreController {
   #adapterSubscriptions;
   #adapter;
   #executingToolHandlers = 0;
+  /** Tool calls announced by an `mcp-ui-resource` event; they only settle via a tool result. */
+  #mcpAppToolCallIds = /* @__PURE__ */ new Set();
+  /** Agent tool calls marked complete on their `tool-call` chunk, before any result arrived. */
+  #presumedCompleteToolCallIds = /* @__PURE__ */ new Set();
+  /** UI resource fields (resolve status or resolved resource) whose tool call is not in state yet. */
+  #pendingUiResources = /* @__PURE__ */ new Map();
+  /**
+   * Token of the latest in-flight UI resource resolve per tool call. Removed when that resolve
+   * settles, or when the thread is cleared/replaced; a resolve whose token is no longer current
+   * is dropped, so the latest announcement wins and stale threads never get stamped.
+   */
+  #uiResourceResolves = /* @__PURE__ */ new Map();
   constructor(host, config) {
     this.#host = host;
     this.#callbacks = config.callbacks;
@@ -83,6 +97,7 @@ class ChatbotCoreController {
       this.#adapter.onToolCallEnd(this.#handleToolCallEnd.bind(this)),
       this.#adapter.onToolCall(this.#handleToolCall.bind(this)),
       this.#adapter.onToolCallResult(this.#handleToolCallResult.bind(this)),
+      this.#adapter.onMcpUiResource(this.#handleMcpUiResource.bind(this)),
       this.#adapter.onStepStarted(this.#handleStepStarted.bind(this)),
       this.#adapter.onStepFinished(this.#handleStepFinished.bind(this)),
       this.#adapter.onRunFinished(this.#handleRunFinished.bind(this)),
@@ -115,10 +130,29 @@ class ChatbotCoreController {
   #handleRunFinished() {
     this.#tryCompleteResponse();
   }
+  /**
+   * A run ended (finished, aborted, or errored) without delivering a result for an
+   * MCP-app tool call: mark it cancelled so the widget receives `tool-cancelled`.
+   */
+  #cancelUnsettledMcpAppToolCalls() {
+    for (const id of this.#mcpAppToolCallIds) {
+      const toolCall = this.#messageStateController.getToolCall(id);
+      if (toolCall && UNSETTLED_TOOL_CALL_STATUSES.includes(toolCall.status)) {
+        this.#messageStateController.updateToolCallInResponse(id, { status: "cancelled" });
+      }
+    }
+    this.#mcpAppToolCallIds.clear();
+    this.#presumedCompleteToolCallIds.clear();
+  }
+  /**
+   * Finalizes once the run is truly over. An executing client-tool handler or a running
+   * adapter means a continuation follows, so widgets stay open for it to settle (§2).
+   */
   #tryCompleteResponse() {
     if (this.#executingToolHandlers > 0 || this.#adapter?.isRunning) {
       return;
     }
+    this.#cancelUnsettledMcpAppToolCalls();
     this.#messageStateController.tryFinalizeResponse();
     const messages = this.getMessages();
     const lastMessage = messages[messages.length - 1];
@@ -134,7 +168,8 @@ class ChatbotCoreController {
       args: {},
       argsBuffer: "",
       status: "parsing",
-      type: this.tools.has(event.name) ? "client" : "agent"
+      type: this.tools.has(event.name) ? "client" : "agent",
+      ...this.#takePendingUiResource(event.id)
     };
     this.#messageStateController.addToolCallToResponse(toolCall);
     const toolDef = this.tools.get(event.name);
@@ -195,7 +230,8 @@ class ChatbotCoreController {
         name: event.name,
         args: event.args,
         status: "executing",
-        type: this.tools.has(event.name) ? "client" : "agent"
+        type: this.tools.has(event.name) ? "client" : "agent",
+        ...this.#takePendingUiResource(event.id)
       };
       this.#messageStateController.addToolCallToResponse(toolCall);
     }
@@ -211,7 +247,8 @@ class ChatbotCoreController {
       } else {
         this.#sendToolResult(event.id, this.#createToolResponse(event.name));
       }
-    } else {
+    } else if (!this.#mcpAppToolCallIds.has(event.id)) {
+      this.#presumedCompleteToolCallIds.add(event.id);
       this.#messageStateController.updateToolCallInResponse(event.id, { status: "complete" });
     }
   }
@@ -249,6 +286,7 @@ class ChatbotCoreController {
     }
   }
   #handleError(event) {
+    this.#cancelUnsettledMcpAppToolCalls();
     const errorMessage = {
       id: generateId(),
       role: "assistant",
@@ -261,6 +299,7 @@ class ChatbotCoreController {
     this.#callbacks.onDispatchEvent("forge-ai-chatbot-error", { error: event.message });
   }
   #handleRunAborted() {
+    this.#cancelUnsettledMcpAppToolCalls();
     this.#messageStateController.tryFinalizeResponse();
     const id = this.#messageStateController.addClientMessage({ content: "Run cancelled" });
     const abortMessage = this.#messageStateController.getMessage(id);
@@ -272,8 +311,69 @@ class ChatbotCoreController {
     this.#callbacks.onRequestUpdate();
   }
   #handleToolCallResult(event) {
+    this.#presumedCompleteToolCallIds.delete(event.toolCallId);
     this.#messageStateController.completeToolCallInResponse(event.toolCallId, event.result, event);
   }
+  /**
+   * Marks the tool call as a loading MCP app, then resolves and stamps the UI resource.
+   * Works whether the event arrives before or after the tool call's chunks, mid-run, after
+   * the run ended, or after `setMessages` for tool calls restored from history. A resolve
+   * superseded by a newer announcement, or outliving its thread (cleared/replaced), is
+   * dropped; one that outlives its adapter falls back to a plain tool call.
+   */
+  async #handleMcpUiResource(event) {
+    const adapter = this.#adapter;
+    if (!adapter?.resolveMcpAppResource) {
+      return;
+    }
+    const { toolCallId, resourceUri } = event;
+    const token = Symbol(toolCallId);
+    this.#uiResourceResolves.set(toolCallId, token);
+    this.#mcpAppToolCallIds.add(toolCallId);
+    if (this.#presumedCompleteToolCallIds.delete(toolCallId)) {
+      this.#messageStateController.updateToolCallInResponse(toolCallId, {
+        status: "executing",
+        endTimestamp: void 0
+      });
+    }
+    this.#stampUiResource(toolCallId, { uiResourceStatus: "loading" });
+    const fields = await this.#resolveUiResource(adapter, { resourceUri, toolCallId });
+    if (this.#uiResourceResolves.get(toolCallId) !== token) {
+      return;
+    }
+    this.#uiResourceResolves.delete(toolCallId);
+    this.#stampUiResource(toolCallId, adapter === this.#adapter ? fields : NO_UI_RESOURCE);
+  }
+  /**
+   * A resolved resource replaces the status; `undefined` (MCP apps unavailable) clears both so
+   * the call renders as a plain tool call; a throw marks the widget as failed.
+   */
+  async #resolveUiResource(adapter, params) {
+    try {
+      const uiResource = await adapter.resolveMcpAppResource?.(params);
+      return uiResource ? { uiResource, uiResourceStatus: void 0 } : NO_UI_RESOURCE;
+    } catch (error) {
+      console.warn(`[forge-ai-mcp-app] Failed to resolve UI resource for tool call ${params.toolCallId}:`, error);
+      return { uiResource: void 0, uiResourceStatus: "error" };
+    }
+  }
+  #stampUiResource(toolCallId, fields) {
+    if (this.#messageStateController.getToolCall(toolCallId)) {
+      this.#messageStateController.updateToolCallInResponse(toolCallId, fields);
+    } else if (fields.uiResource || fields.uiResourceStatus) {
+      this.#pendingUiResources.set(toolCallId, fields);
+    } else {
+      this.#pendingUiResources.delete(toolCallId);
+    }
+  }
+  #takePendingUiResource(toolCallId) {
+    const fields = this.#pendingUiResources.get(toolCallId);
+    if (!fields) {
+      return {};
+    }
+    this.#pendingUiResources.delete(toolCallId);
+    return fields;
+  }
   async #sendToolResult(toolCallId, result) {
     const toolCall = this.#messageStateController.getToolCall(toolCallId);
     if (!toolCall || !this.#adapter) {
@@ -366,6 +466,10 @@ class ChatbotCoreController {
     return this.#messageStateController.getToolCall(id);
   }
   clearMessages() {
+    this.#mcpAppToolCallIds.clear();
+    this.#presumedCompleteToolCallIds.clear();
+    this.#pendingUiResources.clear();
+    this.#uiResourceResolves.clear();
     this.#messageStateController.clearMessages();
     this.#fileUploadManager.clear();
   }
@@ -373,13 +477,26 @@ class ChatbotCoreController {
     return this.#messageStateController.getMessages();
   }
   setMessages(messages) {
+    this.#mcpAppToolCallIds.clear();
+    this.#presumedCompleteToolCallIds.clear();
+    this.#pendingUiResources.clear();
+    this.#uiResourceResolves.clear();
     this.#messageStateController.setMessages(messages);
   }
   updateMessageContent(id, content) {
     this.#messageStateController.updateMessageContent(id, content);
   }
+  /** Tool call ids rendered at or after `index` in {@link messageItems}. */
+  getToolCallIdsFrom(index) {
+    return this.#messageStateController.getToolCallIdsFrom(index);
+  }
   removeMessageItemsFrom(index) {
-    this.#messageStateController.removeMessageItemsFrom(index);
+    for (const id of this.#messageStateController.removeMessageItemsFrom(index)) {
+      this.#mcpAppToolCallIds.delete(id);
+      this.#presumedCompleteToolCallIds.delete(id);
+      this.#pendingUiResources.delete(id);
+      this.#uiResourceResolves.delete(id);
+    }
   }
   setResponseFeedback(responseId, feedback) {
     this.#messageStateController.setResponseFeedback(responseId, feedback);

package/dist/core/index.d.ts

@@ -1,3 +1,4 @@
+export { CanvasController, type CanvasControllerConfig, type CanvasContent, type CanvasOpenEventData, type OpenCanvasOptions } from './canvas-controller.js';
 export { DragController, type DragControllerOptions } from './drag-controller.js';
-export { ResizeController, type ResizeControllerOptions } from './resize-controller.js';
+export { ResizeController, type ResizeControllerOptions, type ResizeGrowDirection } from './resize-controller.js';
 export { ChatbotCoreController, type ChatbotCoreCallbacks, type ChatbotCoreControllerConfig } from './chatbot-core-controller.js';

package/dist/core/index.mjs

@@ -1,7 +1,9 @@
+import { CanvasController } from "./canvas-controller.mjs";
 import { DragController } from "./drag-controller.mjs";
 import { ResizeController } from "./resize-controller.mjs";
 import { ChatbotCoreController } from "./chatbot-core-controller.mjs";
 export {
+  CanvasController,
   ChatbotCoreController,
   DragController,
   ResizeController

package/dist/core/resize-controller.d.ts

@@ -1,5 +1,6 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
+export type ResizeGrowDirection = 'left' | 'right';
 export interface ResizeControllerOptions {
     targetElementRef: Ref<HTMLElement>;
     resizeHandleRef: Ref<HTMLElement>;
@@ -7,6 +8,10 @@ export interface ResizeControllerOptions {
     maxWidth?: number;
     defaultWidth?: number;
     keyboardStep?: number;
+    /** Screen direction the handle moves to make the width larger. Defaults to `'left'`, for a panel docked to the right. */
+    growDirection?: () => ResizeGrowDirection;
+    /** Widest the target may be given its container. Defaults to the window width minus a small buffer. */
+    getAvailableWidth?: () => number;
     onResize?: (width: number) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;

package/dist/core/resize-controller.mjs

@@ -24,13 +24,14 @@ class ResizeController {
     };
     this.handleKeyDown = (event) => {
       const step = this.#options.keyboardStep;
+      const growSign = this.#options.growDirection() === "left" ? 1 : -1;
       let delta = 0;
       switch (event.key) {
         case "ArrowLeft":
-          delta = step;
+          delta = step * growSign;
           break;
         case "ArrowRight":
-          delta = -step;
+          delta = -step * growSign;
           break;
         default:
           return;
@@ -46,7 +47,7 @@ class ResizeController {
         return;
       }
       event.preventDefault();
-      const deltaX = this.#dragStartX - event.clientX;
+      const deltaX = this.#options.growDirection() === "left" ? this.#dragStartX - event.clientX : event.clientX - this.#dragStartX;
       const newWidth = this.#dragStartWidth + deltaX;
       this.#currentWidth = this.#constrainWidth(newWidth);
       this.#applyWidth();
@@ -72,6 +73,8 @@ class ResizeController {
       maxWidth: 800,
       defaultWidth: 420,
       keyboardStep: 20,
+      growDirection: () => "left",
+      getAvailableWidth: () => window.innerWidth - RESIZE_SCREEN_BUFFER,
       onResize: () => {
       },
       onResizeStart: () => {
@@ -118,8 +121,7 @@ class ResizeController {
     }
   }
   #constrainWidth(width) {
-    const availableWidth = window.innerWidth - RESIZE_SCREEN_BUFFER;
-    const effectiveMaxWidth = Math.min(this.#options.maxWidth, availableWidth);
+    const effectiveMaxWidth = Math.min(this.#options.maxWidth, this.#options.getAvailableWidth());
     return Math.max(this.#options.minWidth, Math.min(width, effectiveMaxWidth));
   }
   #applyWidth() {

package/dist/index.d.ts

@@ -5,8 +5,11 @@ export * from './ai-agent-info';
 export * from './ai-agent-selector';
 export * from './ai-tool-call-indicator';
 export * from './ai-artifact';
+export * from './ai-artifact-card';
+export * from './ai-artifact-card-group';
 export * from './ai-attachment';
 export * from './ai-button';
+export * from './ai-canvas';
 export * from './ai-chain-of-thought';
 export * from './ai-chat-header';
 export * from './ai-chat-interface';
@@ -40,6 +43,7 @@ export * from './ai-response-message';
 export * from './ai-sidebar';
 export * from './ai-sidebar-chat';
 export * from './ai-slash-command-menu';
+export * from './ai-steps';
 export * from './ai-suggestions';
 export * from './ai-thinking-indicator';
 export * from './ai-threads';

package/dist/index.mjs

@@ -5,8 +5,11 @@ import { AiAgentInfoComponent, AiAgentInfoComponentTagName } from "./ai-agent-in
 import { AiAgentSelectorComponent, AiAgentSelectorComponentTagName } from "./ai-agent-selector/ai-agent-selector.mjs";
 import { AiToolCallIndicatorComponent, AiToolCallIndicatorComponentTagName } from "./ai-tool-call-indicator/ai-tool-call-indicator.mjs";
 import { AiArtifactComponent, AiArtifactComponentTagName } from "./ai-artifact/ai-artifact.mjs";
+import { AiArtifactCardComponent, AiArtifactCardComponentTagName } from "./ai-artifact-card/ai-artifact-card.mjs";
+import { AiArtifactCardGroupComponent, AiArtifactCardGroupComponentTagName } from "./ai-artifact-card-group/ai-artifact-card-group.mjs";
 import { AiAttachmentComponent, AiAttachmentComponentTagName } from "./ai-attachment/ai-attachment.mjs";
 import { AiButtonComponent, AiButtonComponentTagName } from "./ai-button/ai-button.mjs";
+import { AiCanvasComponent, AiCanvasComponentTagName } from "./ai-canvas/ai-canvas.mjs";
 import { AiChainOfThoughtComponent, AiChainOfThoughtComponentTagName } from "./ai-chain-of-thought/ai-chain-of-thought.mjs";
 import { ThoughtBaseComponent, ThoughtBaseComponentTagName } from "./ai-chain-of-thought/thought-base/thought-base.mjs";
 import { ThoughtSearchResultComponent, ThoughtSearchResultComponentTagName } from "./ai-chain-of-thought/thought-search-result/thought-search-result.mjs";
@@ -23,6 +26,7 @@ import { HttpAgentWithCredentials } from "./ai-chatbot/http-agent-with-credentia
 import { EventEmitter, SubscriptionManager } from "./ai-chatbot/event-emitter.mjs";
 import { AgentRunner } from "./ai-chatbot/agent-runner.mjs";
 import { createToolRenderer } from "./ai-chatbot/create-tool-renderer.mjs";
+import { requestCanvasClose, requestCanvasOpen } from "./ai-chatbot/tool-canvas.mjs";
 import { MessageStateController } from "./ai-chatbot/message-state-controller.mjs";
 import { FileUploadManager } from "./ai-chatbot/file-upload-manager.mjs";
 import { MarkdownStreamController } from "./ai-chatbot/markdown-stream-controller.mjs";
@@ -61,6 +65,7 @@ import { AiResponseMessageComponent, AiResponseMessageComponentTagName } from ".
 import { AiSidebarComponent, AiSidebarComponentTagName } from "./ai-sidebar/ai-sidebar.mjs";
 import { AiSidebarChatComponent, AiSidebarChatComponentTagName } from "./ai-sidebar-chat/ai-sidebar-chat.mjs";
 import { AiSlashCommandMenuComponent, AiSlashCommandMenuComponentTagName } from "./ai-slash-command-menu/ai-slash-command-menu.mjs";
+import { AiStepsComponent, AiStepsComponentTagName } from "./ai-steps/ai-steps.mjs";
 import { AiSuggestionsComponent, AiSuggestionsComponentTagName } from "./ai-suggestions/ai-suggestions.mjs";
 import { AiThinkingIndicatorComponent, AiThinkingIndicatorComponentTagName } from "./ai-thinking-indicator/ai-thinking-indicator.mjs";
 import { AiThreadsComponent, AiThreadsComponentTagName } from "./ai-threads/ai-threads.mjs";
@@ -77,6 +82,10 @@ export {
   AiAgentInfoComponentTagName,
   AiAgentSelectorComponent,
   AiAgentSelectorComponentTagName,
+  AiArtifactCardComponent,
+  AiArtifactCardComponentTagName,
+  AiArtifactCardGroupComponent,
+  AiArtifactCardGroupComponentTagName,
   AiArtifactComponent,
   AiArtifactComponentTagName,
   AiAssistantResponseComponent,
@@ -85,6 +94,8 @@ export {
   AiAttachmentComponentTagName,
   AiButtonComponent,
   AiButtonComponentTagName,
+  AiCanvasComponent,
+  AiCanvasComponentTagName,
   AiChainOfThoughtComponent,
   AiChainOfThoughtComponentTagName,
   AiChatHeaderComponent,
@@ -152,6 +163,8 @@ export {
   AiSidebarComponentTagName,
   AiSlashCommandMenuComponent,
   AiSlashCommandMenuComponentTagName,
+  AiStepsComponent,
+  AiStepsComponentTagName,
   AiSuggestionsComponent,
   AiSuggestionsComponentTagName,
   AiThinkingIndicatorComponent,
@@ -194,6 +207,8 @@ export {
   generateId,
   renderInlineMarkdown,
   renderMarkdown,
+  requestCanvasClose,
+  requestCanvasOpen,
   toRequestMessages,
   toRequestToolCall
 };

package/dist/tools/ai-data-table/ai-data-table-definition.mjs

@@ -5,6 +5,7 @@ import "@ag-ui/client";
 import "uuid";
 import "../../utils/markdown.mjs";
 import { createToolRenderer } from "../../ai-chatbot/create-tool-renderer.mjs";
+import "../../ai-chatbot/tool-canvas.mjs";
 const displayDataTableTool = {
   name: "displayDataTable",
   displayName: "Display Data Table",