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

package/dist/ai-message-thread/ai-message-thread.mjs

@@ -4,6 +4,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 import { keyed } from "lit/directives/keyed.js";
 import { MarkdownStreamController } from "../ai-chatbot/markdown-stream-controller.mjs";
+import { rendersAsMcpAppWidget } from "../ai-chatbot/utils.mjs";
 import "../ai-assistant-response/ai-assistant-response.mjs";
 import "../ai-client-message/ai-client-message.mjs";
 import "../ai-empty-state/ai-empty-state.mjs";
@@ -196,7 +197,7 @@ handleUserEdit_fn = function(messageId, content) {
   });
 };
 renderToolCall_fn = function(toolCall) {
-  if (toolCall.uiResource) {
+  if (rendersAsMcpAppWidget(toolCall)) {
     return keyed(toolCall.id, html`<forge-ai-mcp-app .toolCall=${toolCall}></forge-ai-mcp-app>`);
   }
   const toolDefinition = this.tools?.get(toolCall.name);
@@ -257,7 +258,7 @@ messages_get = function() {
       return true;
     }
     if (item.type === "toolCall") {
-      if (item.data.uiResource) {
+      if (rendersAsMcpAppWidget(item.data)) {
         return true;
       }
       const toolDef = this.tools?.get(item.data.name);

package/dist/ai-tool-call-indicator/ai-tool-call-indicator.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, nothing, PropertyValues, TemplateResult, CSSResult } from 'lit';
-import { ToolCall, ToolDefinition } from '../ai-chatbot/types.js';
+import { ToolCall, AnyToolDefinition } from '../ai-chatbot/types.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-tool-call-indicator': AiToolCallIndicatorComponent;
@@ -20,7 +20,7 @@ export declare class AiToolCallIndicatorComponent extends LitElement {
     #private;
     static styles: CSSResult;
     toolCalls: ToolCall[];
-    tools?: Map<string, ToolDefinition>;
+    tools?: Map<string, AnyToolDefinition>;
     debugMode: boolean;
     private _expanded;
     private _expandedRows;

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

@@ -0,0 +1,81 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { AnyToolDefinition, ChatMessage, ToolCall } from '../ai-chatbot/types.js';
+import { ForgeAiCanvasCloseRequestEventData, ForgeAiCanvasOpenRequestEventData } from '../ai-chatbot/tool-canvas.js';
+export interface OpenCanvasOptions {
+    /** Identifies the artifact; tool-driven opens use the tool call id. */
+    id?: string;
+    /** Overrides `canvasTitle` while this content is shown. */
+    title?: string;
+    /** Content mounted in the canvas body. Omit to show the `canvas` slot instead. */
+    content?: Node;
+}
+export interface CanvasOpenEventData {
+    id?: string;
+    title?: string;
+    /** Present when the canvas was opened for a tool call. */
+    toolCall?: ToolCall;
+}
+/** `auto`: opened by `canvas.open: 'auto'` rather than a user or API request. */
+export type CanvasOpenReason = 'auto' | 'request';
+export interface CanvasContent {
+    id?: string;
+    title?: string;
+    node?: Node;
+    toolCall?: ToolCall;
+    /** Set for tool-driven content so it can follow the tool call as it updates. */
+    toolDefinition?: AnyToolDefinition;
+    /** Title supplied with the open request; otherwise the title is re-derived from the tool call. */
+    titleOverride?: string;
+}
+export interface CanvasControllerConfig {
+    /** Cancelable event dispatched on the host before the canvas opens or swaps content. */
+    openEvent: string;
+    /** Event dispatched on the host when the canvas closes; cancelable except when the host forces it. */
+    closeEvent: string;
+    dispatchHostEvent: (config: {
+        type: string;
+        detail?: unknown;
+        cancelable?: boolean;
+    }) => CustomEvent;
+    getToolCalls: () => ToolCall[];
+    getTools: () => Map<string, AnyToolDefinition>;
+    /** Whether the host can show the canvas right now. Defaults to always. */
+    canOpen?: () => boolean;
+    /** Called once the canvas has gone from closed to open, not when its content is swapped. */
+    onOpen?: (config: {
+        reason: CanvasOpenReason;
+    }) => void;
+    /** Called after the canvas is hidden for any reason. */
+    onClose?: () => void;
+    /** Called when the requested tool call is already showing, so the host can draw attention to it. */
+    onRefocus?: () => void;
+    /** Resolves once the host's collapse presentation has finished; hidden content is released after it. */
+    collapsed?: () => Promise<void>;
+}
+/**
+ * Owns the artifact canvas state shared by every chatbot form factor: what is shown, the cancelable
+ * open/close events, tool call tracking, auto-open, and the `canvas` controls injected into renderers.
+ * The host decides how that state is presented (a side panel, a modal, ...).
+ */
+export declare class CanvasController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost & HTMLElement, config: CanvasControllerConfig);
+    hostConnected(): void;
+    get isOpen(): boolean;
+    get content(): CanvasContent | null;
+    open(options?: OpenCanvasOptions): boolean;
+    /** Closes the canvas. Returns false if it was not open or the close event was prevented. */
+    close(): boolean;
+    /** Closes without asking, for when the host can no longer show the canvas (e.g. it left its conversation view). */
+    forceClose(): void;
+    /** Forgets the canvas entirely, for when the thread it belonged to is gone. */
+    reset(): void;
+    /** Tool calls restored from history are marked as seen so loading a thread never auto-opens the canvas. */
+    markSeen(messages: ChatMessage[]): void;
+    readonly handleOpenRequest: (evt: CustomEvent<ForgeAiCanvasOpenRequestEventData>) => void;
+    readonly handleCloseRequest: (evt: CustomEvent<ForgeAiCanvasCloseRequestEventData>) => void;
+    /** The tool call object is replaced on every args or status update, so open content follows it by id. */
+    syncToolCall(): void;
+    /** Opens tools configured with `canvas.open: 'auto'` once their renderer shows. Call after render, not during it. */
+    autoOpenPending(): void;
+}

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: {

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

@@ -2,6 +2,7 @@ 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;
@@ -15,10 +16,14 @@ class ChatbotCoreController {
   #mcpAppToolCallIds = /* @__PURE__ */ new Set();
   /** Agent tool calls marked complete on their `tool-call` chunk, before any result arrived. */
   #presumedCompleteToolCallIds = /* @__PURE__ */ new Set();
-  /** Resolved UI resources whose tool call is not in state yet. */
+  /** UI resource fields (resolve status or resolved resource) whose tool call is not in state yet. */
   #pendingUiResources = /* @__PURE__ */ new Map();
-  /** Bumped whenever the thread is cleared or replaced, so in-flight UI resource resolves from before are dropped. */
-  #threadGeneration = 0;
+  /**
+   * 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;
@@ -310,10 +315,11 @@ class ChatbotCoreController {
     this.#messageStateController.completeToolCallInResponse(event.toolCallId, event.result, event);
   }
   /**
-   * 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 that outlives the thread it started in
-   * (cleared/replaced, or the adapter swapped) is dropped.
+   * 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;
@@ -321,7 +327,8 @@ class ChatbotCoreController {
       return;
     }
     const { toolCallId, resourceUri } = event;
-    const generation = this.#threadGeneration;
+    const token = Symbol(toolCallId);
+    this.#uiResourceResolves.set(toolCallId, token);
     this.#mcpAppToolCallIds.add(toolCallId);
     if (this.#presumedCompleteToolCallIds.delete(toolCallId)) {
       this.#messageStateController.updateToolCallInResponse(toolCallId, {
@@ -329,29 +336,43 @@ class ChatbotCoreController {
         endTimestamp: void 0
       });
     }
-    let uiResource;
-    try {
-      uiResource = await adapter.resolveMcpAppResource({ resourceUri, toolCallId });
-    } catch (error) {
-      console.warn(`[forge-ai-mcp-app] Failed to resolve UI resource for tool call ${toolCallId}:`, error);
+    this.#stampUiResource(toolCallId, { uiResourceStatus: "loading" });
+    const fields = await this.#resolveUiResource(adapter, { resourceUri, toolCallId });
+    if (this.#uiResourceResolves.get(toolCallId) !== token) {
       return;
     }
-    if (!uiResource || adapter !== this.#adapter || generation !== this.#threadGeneration) {
-      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, { uiResource });
+      this.#messageStateController.updateToolCallInResponse(toolCallId, fields);
+    } else if (fields.uiResource || fields.uiResourceStatus) {
+      this.#pendingUiResources.set(toolCallId, fields);
     } else {
-      this.#pendingUiResources.set(toolCallId, uiResource);
+      this.#pendingUiResources.delete(toolCallId);
     }
   }
   #takePendingUiResource(toolCallId) {
-    const uiResource = this.#pendingUiResources.get(toolCallId);
-    if (!uiResource) {
+    const fields = this.#pendingUiResources.get(toolCallId);
+    if (!fields) {
       return {};
     }
     this.#pendingUiResources.delete(toolCallId);
-    return { uiResource };
+    return fields;
   }
   async #sendToolResult(toolCallId, result) {
     const toolCall = this.#messageStateController.getToolCall(toolCallId);
@@ -445,10 +466,10 @@ class ChatbotCoreController {
     return this.#messageStateController.getToolCall(id);
   }
   clearMessages() {
-    this.#threadGeneration++;
     this.#mcpAppToolCallIds.clear();
     this.#presumedCompleteToolCallIds.clear();
     this.#pendingUiResources.clear();
+    this.#uiResourceResolves.clear();
     this.#messageStateController.clearMessages();
     this.#fileUploadManager.clear();
   }
@@ -456,10 +477,10 @@ class ChatbotCoreController {
     return this.#messageStateController.getMessages();
   }
   setMessages(messages) {
-    this.#threadGeneration++;
     this.#mcpAppToolCallIds.clear();
     this.#presumedCompleteToolCallIds.clear();
     this.#pendingUiResources.clear();
+    this.#uiResourceResolves.clear();
     this.#messageStateController.setMessages(messages);
   }
   updateMessageContent(id, content) {
@@ -474,6 +495,7 @@ class ChatbotCoreController {
       this.#mcpAppToolCallIds.delete(id);
       this.#presumedCompleteToolCallIds.delete(id);
       this.#pendingUiResources.delete(id);
+      this.#uiResourceResolves.delete(id);
     }
   }
   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

@@ -9,6 +9,7 @@ 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';

package/dist/index.mjs

@@ -9,6 +9,7 @@ import { AiArtifactCardComponent, AiArtifactCardComponentTagName } from "./ai-ar
 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";
@@ -25,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";
@@ -92,6 +94,8 @@ export {
   AiAttachmentComponentTagName,
   AiButtonComponent,
   AiButtonComponentTagName,
+  AiCanvasComponent,
+  AiCanvasComponentTagName,
   AiChainOfThoughtComponent,
   AiChainOfThoughtComponentTagName,
   AiChatHeaderComponent,
@@ -203,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",

package/dist/tools/ai-mcp-app/ai-mcp-app.d.ts

@@ -28,7 +28,8 @@ declare global {
  * Renders an MCP-app UI resource stamped onto a {@link ToolCall} as a sandboxed,
  * cross-origin widget. The iframe + bridge are mounted once and survive every `toolCall`
  * delta (Lit reuses this node at its keyed position), so args stream live without
- * remounting.
+ * remounting. While `uiResourceStatus` is `loading` it renders a skeleton placeholder in the
+ * same position, and connects once `uiResource` is stamped onto the same element.
  *
  * The cross-origin sandbox is mandatory: when no `sandboxUrl` is available the element
  * renders an error artifact rather than an insecure same-origin iframe.