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

package/dist/ai-message-thread/ai-message-thread.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
-import { MessageItem, ToolDefinition } from '../ai-chatbot/types.js';
+import { MessageItem, AnyToolDefinition } from '../ai-chatbot/types.js';
 import { FeatureToggle } from '../ai-chatbot/ai-chatbot.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -55,12 +55,13 @@ export declare class AiMessageThreadComponent extends LitElement {
     #private;
     static styles: CSSResult;
     messageItems: MessageItem[];
-    tools?: Map<string, ToolDefinition>;
+    tools?: Map<string, AnyToolDefinition>;
     enableReactions: boolean;
     showThinking: boolean;
     debugMode: boolean;
     autoScroll: FeatureToggle;
     private _messageThreadContainer;
+    private _messageThreadContent;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;

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

@@ -2,7 +2,9 @@ import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators.js";
 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";
@@ -12,6 +14,7 @@ import "../ai-thinking-indicator/ai-thinking-indicator.mjs";
 import "../ai-user-message/ai-user-message.mjs";
 import "../ai-chatbot/ai-chatbot-tool-call.mjs";
 import "../core/tooltip/tooltip.mjs";
+import "../tools/ai-mcp-app/ai-mcp-app.mjs";
 import styles from "./ai-message-thread.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +34,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, scheduleScroll_fn, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, activeResponse_get, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
+var _markdownController, _canAutoScroll, _lastScrollTop, _resizeObserver, _contentResizeObserver, _AiMessageThreadComponent_instances, observe_fn, handleContentResize_fn, scheduleScroll_fn, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, activeResponse_get, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
 const AiMessageThreadComponentTagName = "forge-ai-message-thread";
 const SCROLL_THRESHOLD = 100;
 let AiMessageThreadComponent = class extends LitElement {
@@ -45,7 +48,9 @@ let AiMessageThreadComponent = class extends LitElement {
     this.autoScroll = "on";
     __privateAdd(this, _markdownController);
     __privateAdd(this, _canAutoScroll, true);
+    __privateAdd(this, _lastScrollTop, 0);
     __privateAdd(this, _resizeObserver);
+    __privateAdd(this, _contentResizeObserver);
     __privateAdd(this, _handleScroll, () => {
       __privateMethod(this, _AiMessageThreadComponent_instances, checkScrollState_fn).call(this);
     });
@@ -57,13 +62,18 @@ let AiMessageThreadComponent = class extends LitElement {
     super.connectedCallback();
     __privateSet(this, _markdownController, new MarkdownStreamController(this));
     __privateSet(this, _resizeObserver, new ResizeObserver(() => __privateMethod(this, _AiMessageThreadComponent_instances, checkScrollState_fn).call(this)));
+    __privateSet(this, _contentResizeObserver, new ResizeObserver(() => __privateMethod(this, _AiMessageThreadComponent_instances, handleContentResize_fn).call(this)));
+    if (this.hasUpdated) {
+      __privateMethod(this, _AiMessageThreadComponent_instances, observe_fn).call(this);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver)?.disconnect();
+    __privateGet(this, _contentResizeObserver)?.disconnect();
   }
   firstUpdated() {
-    __privateGet(this, _resizeObserver)?.observe(this._messageThreadContainer);
+    __privateMethod(this, _AiMessageThreadComponent_instances, observe_fn).call(this);
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -95,8 +105,19 @@ let AiMessageThreadComponent = class extends LitElement {
 };
 _markdownController = /* @__PURE__ */ new WeakMap();
 _canAutoScroll = /* @__PURE__ */ new WeakMap();
+_lastScrollTop = /* @__PURE__ */ new WeakMap();
 _resizeObserver = /* @__PURE__ */ new WeakMap();
+_contentResizeObserver = /* @__PURE__ */ new WeakMap();
 _AiMessageThreadComponent_instances = /* @__PURE__ */ new WeakSet();
+observe_fn = function() {
+  __privateGet(this, _resizeObserver)?.observe(this._messageThreadContainer);
+  __privateGet(this, _contentResizeObserver)?.observe(this._messageThreadContent);
+};
+handleContentResize_fn = function() {
+  if (this.autoScroll === "on") {
+    this.scrollToBottom({ behavior: "instant" });
+  }
+};
 scheduleScroll_fn = async function() {
   await this.updateComplete;
   await new Promise(requestAnimationFrame);
@@ -108,7 +129,10 @@ checkScrollState_fn = function() {
     return;
   }
   const { scrollTop, scrollHeight, clientHeight } = container;
-  const canAutoScroll = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD;
+  const isNearBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD;
+  const scrolledUp = scrollTop < __privateGet(this, _lastScrollTop);
+  __privateSet(this, _lastScrollTop, scrollTop);
+  const canAutoScroll = isNearBottom || __privateGet(this, _canAutoScroll) && !scrolledUp;
   if (canAutoScroll !== __privateGet(this, _canAutoScroll)) {
     __privateSet(this, _canAutoScroll, canAutoScroll);
     this.requestUpdate();
@@ -173,6 +197,9 @@ handleUserEdit_fn = function(messageId, content) {
   });
 };
 renderToolCall_fn = function(toolCall) {
+  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);
   return html`<forge-ai-chatbot-tool-call
       .toolCall=${toolCall}
@@ -231,6 +258,9 @@ messages_get = function() {
       return true;
     }
     if (item.type === "toolCall") {
+      if (rendersAsMcpAppWidget(item.data)) {
+        return true;
+      }
       const toolDef = this.tools?.get(item.data.name);
       return !!toolDef?.renderer;
     }
@@ -318,6 +348,9 @@ __decorateClass([
 __decorateClass([
   query(".message-thread")
 ], AiMessageThreadComponent.prototype, "_messageThreadContainer", 2);
+__decorateClass([
+  query(".message-thread-content")
+], AiMessageThreadComponent.prototype, "_messageThreadContent", 2);
 AiMessageThreadComponent = __decorateClass([
   customElement(AiMessageThreadComponentTagName)
 ], AiMessageThreadComponent);

package/dist/ai-steps/ai-steps.d.ts

@@ -0,0 +1,67 @@
+import { LitElement, PropertyValues, nothing, TemplateResult, CSSResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-steps': AiStepsComponent;
+    }
+}
+export declare const AiStepsComponentTagName: keyof HTMLElementTagNameMap;
+/** Lifecycle state of an individual step. */
+export type AiStepStatus = 'pending' | 'running' | 'complete';
+/**
+ * A single step in the timeline. Every field is supplied by the agent — the component derives no
+ * labels of its own and makes no assumption about how the agent names its work.
+ */
+export interface AiStep {
+    /**
+     * Agent-provided label for the step, e.g. `'Filtered by \`crime_category\`'`. Rendered as inline
+     * markdown, so the agent decides which part of its own label to emphasize. Literal `*`, `_` and
+     * `` ` `` characters need escaping.
+     */
+    label: string;
+    /**
+     * Optional agent-provided elaboration, rendered as a detail card beneath the label. Also rendered
+     * as inline markdown.
+     */
+    detail?: string;
+    /** Lifecycle state of this step. Defaults to `'complete'` when omitted. */
+    status?: AiStepStatus;
+}
+/**
+ * @tag forge-ai-steps
+ *
+ * @summary Expandable timeline summarizing the steps an agent took while producing a response.
+ *
+ * @description
+ * Collapsed, it shows a step count and a summary of the first couple of step labels. When expanded,
+ * it lists each step as a row in a vertical timeline along with its status. Steps carrying a
+ * `detail` render as detail cards; steps without one render as a simple labeled row.
+ *
+ * Labels and details are rendered as sanitized inline markdown, so the agent controls its own
+ * emphasis — bold, italic, strikethrough, `code` and links — rather than the component or the
+ * consumer prescribing which part of a step matters.
+ *
+ * This is a presentational primitive: it renders whatever `steps` it is given and knows nothing
+ * about tool calls or tool definitions. `forge-ai-tool-steps` is the tool renderer that maps an
+ * agent's `displaySteps` tool call onto these properties.
+ *
+ * While `running` is `true` the timeline stays expanded and the summary row is hidden. When
+ * `running` flips back to `false` the timeline auto-collapses, leaving the summary row as the way
+ * back in. An element that mounts with `running` already `false` renders expanded, so static usage
+ * (a finished run, or a Storybook story) is readable without interaction.
+ *
+ * @property {AiStep[]} steps - The steps to render as timeline rows
+ * @property {boolean} running - Whether the run producing these steps is still in progress
+ */
+export declare class AiStepsComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    steps: AiStep[];
+    /**
+     * Whether the run producing these steps is still in progress. While `true` the timeline is held
+     * open and the summary row is hidden; the transition back to `false` collapses the timeline.
+     */
+    running: boolean;
+    private _expanded;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult | typeof nothing;
+}

package/dist/ai-steps/ai-steps.mjs

@@ -0,0 +1,163 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { join } from "lit/directives/join.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { renderInlineMarkdown } from "../utils/markdown.mjs";
+import styles from "./ai-steps.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _chevronIcon, _rowMarker, _AiStepsComponent_instances, renderInline_fn, summaryLabel_get, toggle_fn, renderNoDetailStep_fn, renderStep_fn, isExpanded_get, steps_get, stepsSummary_get, stepsCountLabel_get;
+const AiStepsComponentTagName = "forge-ai-steps";
+const MAX_DETAIL_LENGTH = 2e3;
+let AiStepsComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiStepsComponent_instances);
+    this.steps = [];
+    this.running = false;
+    this._expanded = true;
+    __privateAdd(this, _chevronIcon, html`
+    <svg
+      class="chevron"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      height="20"
+      width="20"
+      fill="currentColor"
+      aria-hidden="true">
+      <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+    </svg>
+  `);
+    __privateAdd(this, _rowMarker, html`<span class="row-marker"></span>`);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("running") && !this.running && changedProperties.get("running") === true) {
+      this._expanded = false;
+    }
+  }
+  render() {
+    if (this.steps.length === 0) {
+      return nothing;
+    }
+    return html`
+      <div class="steps">
+        <div class="steps-count">${__privateGet(this, _AiStepsComponent_instances, stepsCountLabel_get)}</div>
+        ${__privateGet(this, _AiStepsComponent_instances, stepsSummary_get)} ${__privateGet(this, _AiStepsComponent_instances, steps_get)}
+      </div>
+    `;
+  }
+};
+_chevronIcon = /* @__PURE__ */ new WeakMap();
+_rowMarker = /* @__PURE__ */ new WeakMap();
+_AiStepsComponent_instances = /* @__PURE__ */ new WeakSet();
+renderInline_fn = function(value) {
+  return html`${unsafeHTML(renderInlineMarkdown(value))}`;
+};
+summaryLabel_get = function() {
+  const stepLabels = this.steps.map((step) => html`<span>${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, step.label)}</span>`);
+  const visibleLabels = stepLabels.slice(0, 2);
+  const remaining = stepLabels.length - visibleLabels.length;
+  return remaining > 0 ? html`${join(visibleLabels, html`, `)} +${remaining} more` : html`${join(visibleLabels, html`, `)}`;
+};
+toggle_fn = function() {
+  this._expanded = !this._expanded;
+};
+renderNoDetailStep_fn = function(step) {
+  return html`
+      <div class="timeline-row" data-status=${step.status ?? "complete"}>
+        <div class="row-header">
+          ${__privateGet(this, _rowMarker)}
+          <span class="row-label">
+            <span class="row-name">${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, step.label)}</span>
+          </span>
+        </div>
+      </div>
+    `;
+};
+renderStep_fn = function(step) {
+  const detail = step.detail;
+  if (!detail) {
+    return __privateMethod(this, _AiStepsComponent_instances, renderNoDetailStep_fn).call(this, step);
+  }
+  const truncated = detail.length > MAX_DETAIL_LENGTH ? `${detail.slice(0, MAX_DETAIL_LENGTH)}… (truncated)` : detail;
+  return html`
+      <div class="timeline-row" data-status=${step.status ?? "complete"}>
+        <div class="row-header">
+          ${__privateGet(this, _rowMarker)}
+          <div class="step-card">
+            <span class="step-card-title">${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, step.label)}</span>
+            <div class="step-card-body">
+              <div class="step-card-result">${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, truncated)}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+};
+isExpanded_get = function() {
+  return this.running || this._expanded;
+};
+steps_get = function() {
+  return html`
+      <div
+        id="timeline-content"
+        class="timeline ${__privateGet(this, _AiStepsComponent_instances, isExpanded_get) ? "expanded" : ""}"
+        aria-hidden=${__privateGet(this, _AiStepsComponent_instances, isExpanded_get) ? "false" : "true"}>
+        <div class="timeline-content">${this.steps.map((step) => __privateMethod(this, _AiStepsComponent_instances, renderStep_fn).call(this, step))}</div>
+      </div>
+    `;
+};
+stepsSummary_get = function() {
+  return when(
+    !this.running,
+    () => html`
+        <button
+          class="summary"
+          type="button"
+          aria-expanded=${this._expanded}
+          aria-controls="timeline-content"
+          @click=${__privateMethod(this, _AiStepsComponent_instances, toggle_fn)}>
+          ${__privateGet(this, _chevronIcon)}
+          <span class="status-text">${__privateGet(this, _AiStepsComponent_instances, summaryLabel_get)}</span>
+          <span class="focus-indicator"></span>
+        </button>
+      `
+  );
+};
+stepsCountLabel_get = function() {
+  const count = this.steps.length;
+  return `${count} step${count === 1 ? "" : "s"}`;
+};
+AiStepsComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ attribute: false })
+], AiStepsComponent.prototype, "steps", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], AiStepsComponent.prototype, "running", 2);
+__decorateClass([
+  state()
+], AiStepsComponent.prototype, "_expanded", 2);
+AiStepsComponent = __decorateClass([
+  customElement(AiStepsComponentTagName)
+], AiStepsComponent);
+export {
+  AiStepsComponent,
+  AiStepsComponentTagName
+};

package/dist/ai-steps/ai-steps.scss.mjs

@@ -0,0 +1,4 @@
+const styles = '/* prettier-ignore */\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-small, 12px);\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-xsmall, 8px);\n  padding-block: var(--forge-spacing-xxsmall, 4px);\n  padding-inline: var(--forge-spacing-xsmall, 8px);\n  border: none;\n  background-color: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  cursor: pointer;\n  text-align: start;\n  position: relative;\n  outline: none;\n  --_state-layer-display: var(--forge-state-layer-display, flex);\n  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n.summary::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n.summary:hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n.summary:active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.status-text {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}\n\n.chevron {\n  flex-shrink: 0;\n  transform: rotate(-90deg);\n  transition: transform var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.summary[aria-expanded=true] .chevron {\n  transform: rotate(0deg);\n}\n\n.focus-indicator {\n  position: absolute;\n  display: none;\n}\n\n:host .summary:focus .focus-indicator {\n  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));\n  border: var(--_focus-indicator-width) solid currentColor;\n  inset: var(--_focus-indicator-inward-offset);\n}\n:host .summary:focus .focus-indicator::before {\n  content: "";\n}\n:host .summary:focus .focus-indicator {\n  display: block;\n  --forge-focus-indicator-shape: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xsmall, 8px);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  font-size: var(--forge-ai-markdown-font-size, 0.875rem);\n  line-height: var(--forge-ai-markdown-line-height, 1.5rem);\n  color: var(--forge-theme-on-surface, #000000);\n  overflow-wrap: break-word;\n}\n.steps h1,\n.steps h2,\n.steps h3,\n.steps h4,\n.steps h5,\n.steps h6 {\n  margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\n.steps strong {\n  font-weight: 500;\n}\n.steps a {\n  color: var(--forge-theme-primary, #3f51b5);\n}\n.steps hr {\n  border: none;\n  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n.steps code {\n  color: var(--forge-theme-on-surface-container-low, #000000);\n  background-color: var(--forge-theme-surface-container-low, #ebebeb);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n  font-size: 0.75em;\n}\n.steps pre {\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  margin: 0;\n  max-width: 100%;\n  overflow-x: auto;\n}\n.steps pre:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: 2px;\n}\n.steps pre code {\n  display: block;\n  padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n  color: var(--forge-theme-on-surface-container-minimum, #000000);\n  background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  white-space: pre;\n}\n.steps [data-scroll-region=table] {\n  max-width: 100%;\n  overflow-x: auto;\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  margin-block: var(--forge-spacing-medium, 16px);\n}\n.steps [data-scroll-region=table]:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: 2px;\n}\n.steps [data-scroll-region=table] table {\n  margin-block: 0;\n}\n.steps table {\n  width: 100%;\n  border-spacing: 0;\n  background-color: var(--forge-theme-surface, #ffffff);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  overflow: hidden;\n  margin-block: var(--forge-spacing-medium, 16px);\n}\n.steps table thead {\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  font-weight: bold;\n  text-align: left;\n  font-size: calc(var(--forge-typography-font-size, 1rem) * 0.75);\n  box-sizing: border-box;\n}\n.steps table tr {\n  height: 36px;\n  height: 32px;\n}\n.steps table tr:nth-child(even) {\n  background-color: var(--forge-theme-surface-dim, #fafafa);\n}\n.steps table tr:last-child td {\n  border-bottom: none;\n}\n.steps table th,\n.steps table td {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  font-weight: var(--forge-typography-label1-font-weight, 400);\n  line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-label1-text-transform, inherit);\n  text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n  padding-block: var(--forge-spacing-xsmall, 8px);\n  padding-inline-start: var(--forge-spacing-xsmall, 8px);\n  padding-inline-end: var(--forge-spacing-medium, 16px);\n  border-bottom-width: 1px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--forge-theme-outline, #e0e0e0);\n}\n.steps table th {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));\n  font-weight: var(--forge-typography-label2-font-weight, 400);\n  line-height: var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label2-letter-spacing, 0.0096153846em);\n  text-transform: var(--forge-typography-label2-text-transform, inherit);\n  text-decoration: var(--forge-typography-label2-text-decoration, inherit);\n  font-weight: 600;\n}\n.steps > p:has(+ ol),\n.steps > p:has(+ ul) {\n  margin-block-end: var(--forge-spacing-small, 12px);\n}\n.steps > ul {\n  list-style-type: disc;\n  padding-inline-start: 1.6875rem;\n}\n.steps > ol {\n  padding-inline-start: 1.75rem;\n}\n.steps > ol,\n.steps > ul {\n  margin: var(--forge-spacing-xsmall, 8px) 0;\n  margin-block-end: var(--forge-spacing-medium, 16px);\n}\n.steps > :first-child {\n  margin-block-start: 0;\n}\n.steps > p {\n  margin-block-end: var(--forge-spacing-medium, 16px);\n  overflow-wrap: anywhere;\n}\n.steps > p:first-child {\n  margin-block-start: 0;\n}\n.steps > p:last-child {\n  margin-block-end: 0;\n}\n.steps-count {\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.timeline {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n.timeline.expanded {\n  grid-template-rows: 1fr;\n}\n\n.timeline-content {\n  overflow: hidden;\n  min-height: 0;\n  padding-inline-start: var(--forge-spacing-small, 12px);\n}\n\n.timeline-row {\n  position: relative;\n  padding-inline-start: var(--forge-spacing-large, 24px);\n  padding-block-end: var(--forge-spacing-medium, 16px);\n}\n.timeline-row::before {\n  content: "";\n  position: absolute;\n  inset-block-start: calc((var(--forge-spacing-medium-large, 20px) - var(--forge-spacing-xsmall, 8px)) / 2);\n  inset-block-end: calc(-1 * var(--forge-spacing-xsmall, 8px));\n  inset-inline-start: calc((var(--forge-spacing-medium-large, 20px) - 1px) / 2);\n  width: 1px;\n  background-color: var(--forge-theme-outline, #e0e0e0);\n}\n.timeline-row:last-child::before {\n  display: none;\n}\n\n.row-header {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--forge-spacing-small, 12px);\n  width: 100%;\n  min-height: var(--forge-spacing-medium-large, 20px);\n  margin-inline-start: calc(-1 * var(--forge-spacing-large, 24px));\n}\n\n.row-marker {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--forge-spacing-medium-large, 20px);\n  height: var(--forge-spacing-medium-large, 20px);\n  border-radius: calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1));\n}\n.row-marker::before {\n  content: "";\n  flex-shrink: 0;\n  width: var(--forge-spacing-xsmall, 8px);\n  height: var(--forge-spacing-xsmall, 8px);\n  border-radius: calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1));\n  background-color: currentColor;\n  position: relative;\n  z-index: 1;\n}\n\n.row-label {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: var(--forge-spacing-xxxsmall, 2px);\n}\n\n.row-name {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-xsmall, 8px);\n  line-height: normal;\n  font-weight: 500;\n  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n\n.step-card {\n  width: 100%;\n}\n.step-card-title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  font-weight: 700;\n}\n.step-card-result {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}\n\n.row-name strong,\n.step-card-title strong {\n  font-weight: 700;\n}';
+export {
+  styles as default
+};

package/dist/ai-steps/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-steps';

package/dist/ai-steps/index.mjs

@@ -0,0 +1,5 @@
+import { AiStepsComponent, AiStepsComponentTagName } from "./ai-steps.mjs";
+export {
+  AiStepsComponent,
+  AiStepsComponentTagName
+};

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/ai-tool-call-indicator/ai-tool-call-indicator.mjs

@@ -218,7 +218,7 @@ highlightJson_fn = function(value) {
   return html`${unsafeHTML(highlighted)}`;
 };
 statusMarker_fn = function(toolCall) {
-  if (toolCall.status === "error") {
+  if (toolCall.status === "error" || toolCall.status === "cancelled") {
     return html`<span class="row-marker row-marker--error">${__privateGet(this, _errorIcon)}</span>`;
   }
   if (isToolCallSettled(toolCall, this.tools?.get(toolCall.name))) {

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;
+}