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

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.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/chatbot-core-controller.d.ts

@@ -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,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 UNSETTLED_TOOL_CALL_STATUSES = ["pending", "parsing", "executing"];
 class ChatbotCoreController {
   #host;
   #callbacks;
@@ -10,6 +11,14 @@ 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();
+  /** Resolved UI resources 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;
   constructor(host, config) {
     this.#host = host;
     this.#callbacks = config.callbacks;
@@ -83,6 +92,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 +125,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 +163,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 +225,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 +242,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 +281,7 @@ class ChatbotCoreController {
     }
   }
   #handleError(event) {
+    this.#cancelUnsettledMcpAppToolCalls();
     const errorMessage = {
       id: generateId(),
       role: "assistant",
@@ -261,6 +294,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 +306,53 @@ class ChatbotCoreController {
     this.#callbacks.onRequestUpdate();
   }
   #handleToolCallResult(event) {
+    this.#presumedCompleteToolCallIds.delete(event.toolCallId);
     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.
+   */
+  async #handleMcpUiResource(event) {
+    const adapter = this.#adapter;
+    if (!adapter?.resolveMcpAppResource) {
+      return;
+    }
+    const { toolCallId, resourceUri } = event;
+    const generation = this.#threadGeneration;
+    this.#mcpAppToolCallIds.add(toolCallId);
+    if (this.#presumedCompleteToolCallIds.delete(toolCallId)) {
+      this.#messageStateController.updateToolCallInResponse(toolCallId, {
+        status: "executing",
+        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);
+      return;
+    }
+    if (!uiResource || adapter !== this.#adapter || generation !== this.#threadGeneration) {
+      return;
+    }
+    if (this.#messageStateController.getToolCall(toolCallId)) {
+      this.#messageStateController.updateToolCallInResponse(toolCallId, { uiResource });
+    } else {
+      this.#pendingUiResources.set(toolCallId, uiResource);
+    }
+  }
+  #takePendingUiResource(toolCallId) {
+    const uiResource = this.#pendingUiResources.get(toolCallId);
+    if (!uiResource) {
+      return {};
+    }
+    this.#pendingUiResources.delete(toolCallId);
+    return { uiResource };
+  }
   async #sendToolResult(toolCallId, result) {
     const toolCall = this.#messageStateController.getToolCall(toolCallId);
     if (!toolCall || !this.#adapter) {
@@ -366,6 +445,10 @@ class ChatbotCoreController {
     return this.#messageStateController.getToolCall(id);
   }
   clearMessages() {
+    this.#threadGeneration++;
+    this.#mcpAppToolCallIds.clear();
+    this.#presumedCompleteToolCallIds.clear();
+    this.#pendingUiResources.clear();
     this.#messageStateController.clearMessages();
     this.#fileUploadManager.clear();
   }
@@ -373,13 +456,25 @@ class ChatbotCoreController {
     return this.#messageStateController.getMessages();
   }
   setMessages(messages) {
+    this.#threadGeneration++;
+    this.#mcpAppToolCallIds.clear();
+    this.#presumedCompleteToolCallIds.clear();
+    this.#pendingUiResources.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);
+    }
   }
   setResponseFeedback(responseId, feedback) {
     this.#messageStateController.setResponseFeedback(responseId, feedback);

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

@@ -10,6 +10,7 @@ export interface ResizeControllerOptions {
     onResize?: (width: number) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;
+    onCommit?: (width: number) => void;
 }
 export declare class ResizeController implements ReactiveController {
     #private;

package/dist/core/resize-controller.mjs

@@ -36,9 +36,10 @@ class ResizeController {
           return;
       }
       event.preventDefault();
-      const newWidth = this.#currentWidth + delta;
-      this.#currentWidth = this.#constrainWidth(newWidth);
+      const previousWidth = this.#currentWidth;
+      this.#currentWidth = this.#constrainWidth(previousWidth + delta);
       this.#applyWidth();
+      this.#commitIfChanged(previousWidth);
     };
     this.#handlePointerMove = (event) => {
       if (!this.#isResizing) {
@@ -62,6 +63,7 @@ class ResizeController {
       this.#isResizing = false;
       this.#host.requestUpdate();
       this.#options.onResizeEnd();
+      this.#commitIfChanged(this.#dragStartWidth);
       this.#removeResizeListeners();
     };
     this.#host = host;
@@ -76,6 +78,8 @@ class ResizeController {
       },
       onResizeEnd: () => {
       },
+      onCommit: () => {
+      },
       ...options
     };
     this.#currentWidth = this.#options.defaultWidth;
@@ -108,6 +112,11 @@ class ResizeController {
   }
   #handlePointerMove;
   #handlePointerUp;
+  #commitIfChanged(previousWidth) {
+    if (this.#currentWidth !== previousWidth) {
+      this.#options.onCommit(this.#currentWidth);
+    }
+  }
   #constrainWidth(width) {
     const availableWidth = window.innerWidth - RESIZE_SCREEN_BUFFER;
     const effectiveMaxWidth = Math.min(this.#options.maxWidth, availableWidth);

package/dist/index.d.ts

@@ -5,6 +5,8 @@ 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-chain-of-thought';
@@ -40,6 +42,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,6 +5,8 @@ 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 { AiChainOfThoughtComponent, AiChainOfThoughtComponentTagName } from "./ai-chain-of-thought/ai-chain-of-thought.mjs";
@@ -61,6 +63,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 +80,10 @@ export {
   AiAgentInfoComponentTagName,
   AiAgentSelectorComponent,
   AiAgentSelectorComponentTagName,
+  AiArtifactCardComponent,
+  AiArtifactCardComponentTagName,
+  AiArtifactCardGroupComponent,
+  AiArtifactCardGroupComponentTagName,
   AiArtifactComponent,
   AiArtifactComponentTagName,
   AiAssistantResponseComponent,
@@ -152,6 +159,8 @@ export {
   AiSidebarComponentTagName,
   AiSlashCommandMenuComponent,
   AiSlashCommandMenuComponentTagName,
+  AiStepsComponent,
+  AiStepsComponentTagName,
   AiSuggestionsComponent,
   AiSuggestionsComponentTagName,
   AiThinkingIndicatorComponent,