@cognivo/components 0.8.0

package/dist/components/ai-token-tracker/ai-token-tracker.js

@@ -0,0 +1,235 @@
+import { css as u, LitElement as p, html as i, nothing as g } from "lit";
+import { property as r, customElement as v } from "lit/decorators.js";
+import { h as b, r as f, f as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (s, o, n, c) => {
+  for (var a = c > 1 ? void 0 : c ? y(o, n) : o, l = s.length - 1, d; l >= 0; l--)
+    (d = s[l]) && (a = (c ? d(o, n, a) : d(a)) || a);
+  return c && a && m(o, n, a), a;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.inputTokens = 0, this.outputTokens = 0, this.cost = 0, this.latency = 0, this.model = "", this.budget = 0, this.mode = "compact";
+  }
+  get _totalTokens() {
+    return this.inputTokens + this.outputTokens;
+  }
+  get _costStr() {
+    return this.cost > 0 ? `$${this.cost.toFixed(4)}` : "$0";
+  }
+  get _latencyStr() {
+    return this.latency < 1e3 ? `${this.latency}ms` : `${(this.latency / 1e3).toFixed(1)}s`;
+  }
+  get _latencyClass() {
+    return this.latency < 1e3 ? "fast" : this.latency < 3e3 ? "medium" : "slow";
+  }
+  get _budgetPct() {
+    return this.budget <= 0 ? 0 : Math.min(this.cost / this.budget * 100, 100);
+  }
+  get _budgetClass() {
+    const s = this._budgetPct;
+    return s < 60 ? "ok" : s < 85 ? "warning" : "danger";
+  }
+  _handleClick() {
+    this.dispatchEvent(new CustomEvent("ai-token-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { inputTokens: this.inputTokens, outputTokens: this.outputTokens, cost: this.cost, latency: this.latency, model: this.model }
+    }));
+  }
+  render() {
+    return this.mode === "compact" ? i`
+        <div class="compact" role="status" aria-live="polite" aria-label="Token usage: ${this._totalTokens} tokens, ${this._costStr}, ${this._latencyStr}"
+          @click=${this._handleClick}>
+          <span class="tokens">${this._totalTokens.toLocaleString()}</span> tokens
+          <span class="sep">·</span>
+          <span class="cost-val">${this._costStr}</span>
+          <span class="sep">·</span>
+          <span class="latency-val">${this._latencyStr}</span>
+        </div>
+      ` : i`
+      <div class="detailed" role="status" aria-live="polite" aria-label="Token usage details">
+        <div class="detail-header">
+          <span class="detail-title">Usage</span>
+          ${this.model ? i`<span class="model-badge">${this.model}</span>` : g}
+        </div>
+
+        <div class="metrics">
+          <div class="metric">
+            <span class="metric-label">Input</span>
+            <span class="metric-value">${this.inputTokens.toLocaleString()}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Output</span>
+            <span class="metric-value">${this.outputTokens.toLocaleString()}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Cost</span>
+            <span class="metric-value green">${this._costStr}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Latency</span>
+            <span class="metric-value">${this._latencyStr}</span>
+          </div>
+        </div>
+
+        ${this.budget > 0 ? i`
+          <div class="budget">
+            <div class="budget-header">
+              <span class="budget-label">Budget</span>
+              <span class="budget-value">${this._costStr} / $${this.budget.toFixed(2)}</span>
+            </div>
+            <div class="budget-bar">
+              <div class="budget-fill ${this._budgetClass}" style="width: ${this._budgetPct}%"></div>
+            </div>
+          </div>
+        ` : g}
+      </div>
+    `;
+  }
+};
+t.styles = [b, f, h, u`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* Compact mode */
+    .compact {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .compact:hover { border-color: var(--cg-color-input-border-hover); }
+    .compact:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .compact .sep { color: var(--cg-color-surface-cards-border); }
+    .compact .tokens { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-bold); }
+    .compact .cost-val { color: var(--cg-color-status-success-text-default); }
+    .compact .latency-val { color: var(--cg-color-input-text-placeholder); }
+
+    /* Detailed mode */
+    .detailed {
+      padding: var(--cg-spacing-20);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      min-width: 320px;
+    }
+
+    .detail-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .detail-title {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .model-badge {
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    .metrics {
+      display: flex;
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .metric {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+      padding: 0 var(--cg-spacing-16);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .metric:first-child { padding-left: 0; }
+    .metric:last-child { border-right: none; padding-right: 0; }
+    .metric-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .metric-value {
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-semibold);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-base-text);
+      letter-spacing: var(--cg-letter-spacing-tight);
+    }
+    .metric-value.green { color: var(--cg-color-status-success-text-default); }
+
+    /* Budget */
+    .budget {
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .budget-header {
+      display: flex;
+      justify-content: space-between;
+      font-size: var(--cg-font-size-xs);
+      margin-bottom: var(--cg-spacing-6);
+    }
+    .budget-label { color: var(--cg-color-input-text-placeholder); }
+    .budget-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-semibold); }
+    .budget-bar {
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-spacing-4);
+      background: var(--cg-color-surface-container-background);
+      overflow: hidden;
+    }
+    .budget-fill {
+      height: 100%;
+      border-radius: var(--cg-spacing-4);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .budget-fill.ok { background: var(--cg-color-status-success-text-default); }
+    .budget-fill.warning { background: var(--cg-color-status-warning-text-default); }
+    .budget-fill.danger { background: var(--cg-color-status-error-text-default); }
+
+    :focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+  `];
+e([
+  r({ type: Number })
+], t.prototype, "inputTokens", 2);
+e([
+  r({ type: Number })
+], t.prototype, "outputTokens", 2);
+e([
+  r({ type: Number })
+], t.prototype, "cost", 2);
+e([
+  r({ type: Number })
+], t.prototype, "latency", 2);
+e([
+  r({ type: String })
+], t.prototype, "model", 2);
+e([
+  r({ type: Number })
+], t.prototype, "budget", 2);
+e([
+  r({ type: String })
+], t.prototype, "mode", 2);
+t = e([
+  v("ai-token-tracker")
+], t);
+export {
+  t as AiTokenTracker
+};
+//# sourceMappingURL=ai-token-tracker.js.map

package/dist/components/ai-token-tracker/ai-token-tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-token-tracker.js","sources":["../../../src/components/ai-token-tracker/ai-token-tracker.ts"],"sourcesContent":["/**\n * @element ai-token-tracker\n * LLM token usage and cost display with compact (inline badge) and\n * detailed (card with metrics grid) modes. Shows input/output tokens,\n * cost, latency bar, model badge, and optional budget progress bar.\n *\n * @example\n * ```html\n * <ai-token-tracker mode=\"compact\" inputTokens=\"1200\" outputTokens=\"340\" cost=\"0.0042\" latency=\"890\"></ai-token-tracker>\n * <ai-token-tracker mode=\"detailed\" inputTokens=\"1200\" outputTokens=\"340\" cost=\"0.0042\"\n *   latency=\"890\" model=\"gpt-4\" budget=\"1.00\"></ai-token-tracker>\n * ```\n *\n * @prop {number} inputTokens - Input token count\n * @prop {number} outputTokens - Output token count\n * @prop {number} cost - Cost in dollars\n * @prop {number} latency - Response latency in ms\n * @prop {string} model - Model name for the badge\n * @prop {number} budget - Max cost budget (shows progress bar when > 0)\n * @prop {'compact'|'detailed'} mode - Display mode (default 'compact')\n *\n * @fires {CustomEvent} ai-token-click - When the compact badge is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-token-tracker')\nexport class AiTokenTracker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* Compact mode */\n    .compact {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .compact:hover { border-color: var(--cg-color-input-border-hover); }\n    .compact:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .compact .sep { color: var(--cg-color-surface-cards-border); }\n    .compact .tokens { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-bold); }\n    .compact .cost-val { color: var(--cg-color-status-success-text-default); }\n    .compact .latency-val { color: var(--cg-color-input-text-placeholder); }\n\n    /* Detailed mode */\n    .detailed {\n      padding: var(--cg-spacing-20);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      min-width: 320px;\n    }\n\n    .detail-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .detail-title {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .model-badge {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    .metrics {\n      display: flex;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .metric {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      padding: 0 var(--cg-spacing-16);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .metric:first-child { padding-left: 0; }\n    .metric:last-child { border-right: none; padding-right: 0; }\n    .metric-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .metric-value {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n    .metric-value.green { color: var(--cg-color-status-success-text-default); }\n\n    /* Budget */\n    .budget {\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .budget-header {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--cg-font-size-xs);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .budget-label { color: var(--cg-color-input-text-placeholder); }\n    .budget-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-semibold); }\n    .budget-bar {\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-background);\n      overflow: hidden;\n    }\n    .budget-fill {\n      height: 100%;\n      border-radius: var(--cg-spacing-4);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .budget-fill.ok { background: var(--cg-color-status-success-text-default); }\n    .budget-fill.warning { background: var(--cg-color-status-warning-text-default); }\n    .budget-fill.danger { background: var(--cg-color-status-error-text-default); }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n\n  @property({ type: Number }) inputTokens: number = 0;\n  @property({ type: Number }) outputTokens: number = 0;\n  @property({ type: Number }) cost: number = 0;\n  @property({ type: Number }) latency: number = 0; // ms\n  @property({ type: String }) model: string = '';\n  @property({ type: Number }) budget: number = 0; // max cost\n  @property({ type: String }) mode: 'compact' | 'detailed' = 'compact';\n\n  private get _totalTokens() { return this.inputTokens + this.outputTokens; }\n  private get _costStr() { return this.cost > 0 ? `$${this.cost.toFixed(4)}` : '$0'; }\n  private get _latencyStr() {\n    if (this.latency < 1000) return `${this.latency}ms`;\n    return `${(this.latency / 1000).toFixed(1)}s`;\n  }\n  private get _latencyClass() {\n    if (this.latency < 1000) return 'fast';\n    if (this.latency < 3000) return 'medium';\n    return 'slow';\n  }\n  private get _budgetPct() {\n    if (this.budget <= 0) return 0;\n    return Math.min((this.cost / this.budget) * 100, 100);\n  }\n  private get _budgetClass() {\n    const pct = this._budgetPct;\n    if (pct < 60) return 'ok';\n    if (pct < 85) return 'warning';\n    return 'danger';\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('ai-token-click', {\n      bubbles: true, composed: true,\n      detail: { inputTokens: this.inputTokens, outputTokens: this.outputTokens, cost: this.cost, latency: this.latency, model: this.model },\n    }));\n  }\n\n  override render() {\n    if (this.mode === 'compact') {\n      return html`\n        <div class=\"compact\" role=\"status\" aria-live=\"polite\" aria-label=\"Token usage: ${this._totalTokens} tokens, ${this._costStr}, ${this._latencyStr}\"\n          @click=${this._handleClick}>\n          <span class=\"tokens\">${this._totalTokens.toLocaleString()}</span> tokens\n          <span class=\"sep\">·</span>\n          <span class=\"cost-val\">${this._costStr}</span>\n          <span class=\"sep\">·</span>\n          <span class=\"latency-val\">${this._latencyStr}</span>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"detailed\" role=\"status\" aria-live=\"polite\" aria-label=\"Token usage details\">\n        <div class=\"detail-header\">\n          <span class=\"detail-title\">Usage</span>\n          ${this.model ? html`<span class=\"model-badge\">${this.model}</span>` : nothing}\n        </div>\n\n        <div class=\"metrics\">\n          <div class=\"metric\">\n            <span class=\"metric-label\">Input</span>\n            <span class=\"metric-value\">${this.inputTokens.toLocaleString()}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Output</span>\n            <span class=\"metric-value\">${this.outputTokens.toLocaleString()}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Cost</span>\n            <span class=\"metric-value green\">${this._costStr}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Latency</span>\n            <span class=\"metric-value\">${this._latencyStr}</span>\n          </div>\n        </div>\n\n        ${this.budget > 0 ? html`\n          <div class=\"budget\">\n            <div class=\"budget-header\">\n              <span class=\"budget-label\">Budget</span>\n              <span class=\"budget-value\">${this._costStr} / $${this.budget.toFixed(2)}</span>\n            </div>\n            <div class=\"budget-bar\">\n              <div class=\"budget-fill ${this._budgetClass}\" style=\"width: ${this._budgetPct}%\"></div>\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiTokenTracker","LitElement","pct","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-tool-card-resolver/ai-tool-card-resolver.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class AiToolCardResolver extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Tool call name, e.g. "invoice" or "search_results" */
+    toolName: string;
+    /** The tool's output data (passed as property to resolved component) */
+    toolData: unknown;
+    /** Registry mapping tool names to component tag names */
+    registry: Record<string, string>;
+    /** Show loading skeleton */
+    loading: boolean;
+    private _error;
+    /** Cached resolved element keyed by toolName + tag */
+    private _cachedEl;
+    private _cachedKey;
+    private _dispatch;
+    private _abortController?;
+    disconnectedCallback(): void;
+    private _resolveComponent;
+    private _renderLoading;
+    private _renderFallback;
+    private _renderError;
+    render(): import('lit').TemplateResult<1>;
+    private _renderResolved;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-tool-card-resolver': AiToolCardResolver;
+    }
+}
+//# sourceMappingURL=ai-tool-card-resolver.d.ts.map

package/dist/components/ai-tool-card-resolver/ai-tool-card-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-tool-card-resolver.d.ts","sourceRoot":"","sources":["../../../src/components/ai-tool-card-resolver/ai-tool-card-resolver.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAwGnB;IAEH,yDAAyD;IAC7B,QAAQ,SAAM;IAE1C,wEAAwE;IACxC,QAAQ,EAAE,OAAO,CAAQ;IAEzD,yDAAyD;IACzB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAEtE,4BAA4B;IACC,OAAO,UAAS;IAEpC,OAAO,CAAC,MAAM,CAAM;IAE7B,sDAAsD;IACtD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAM;IAExB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,gBAAgB,CAAC,CAAkB;IAElC,oBAAoB;IAK7B,OAAO,CAAC,iBAAiB;IAyCzB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,YAAY;IASX,MAAM;IAef,OAAO,CAAC,eAAe;CAWxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}

package/dist/components/ai-tool-card-resolver/ai-tool-card-resolver.js

@@ -0,0 +1,225 @@
+import { css as h, LitElement as g, html as l } from "lit";
+import { property as n, state as v, customElement as u } from "lit/decorators.js";
+import { h as f, r as p, b, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (r, e, a, o) => {
+  for (var i = o > 1 ? void 0 : o ? k(e, a) : e, c = r.length - 1, d; c >= 0; c--)
+    (d = r[c]) && (i = (o ? d(e, a, i) : d(i)) || i);
+  return o && i && _(e, a, i), i;
+};
+let t = class extends g {
+  constructor() {
+    super(...arguments), this.toolName = "", this.toolData = null, this.registry = {}, this.loading = !1, this._error = "", this._cachedEl = null, this._cachedKey = "";
+  }
+  _dispatch(r, e) {
+    this.dispatchEvent(new CustomEvent(r, {
+      bubbles: !0,
+      composed: !0,
+      detail: e
+    }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._abortController?.abort();
+  }
+  _resolveComponent() {
+    const r = this.registry[this.toolName];
+    if (!r) return null;
+    const e = `${this.toolName}::${r}`;
+    if (this._cachedEl && this._cachedKey === e)
+      return this._cachedEl.data = this.toolData, this._cachedEl.toolData = this.toolData, this._cachedEl;
+    this._abortController?.abort(), this._abortController = new AbortController();
+    try {
+      const a = document.createElement(r);
+      return a.data = this.toolData, a.toolData = this.toolData, a.addEventListener("ai-tool-card-action", ((o) => {
+        this._dispatch("ai-tool-card-action", {
+          toolName: this.toolName,
+          action: o.detail?.action,
+          data: o.detail?.data
+        });
+      }), { signal: this._abortController.signal }), this._cachedEl = a, this._cachedKey = e, a;
+    } catch (a) {
+      return this._error = a instanceof Error ? a.message : "Component failed to render", this._dispatch("ai-tool-card-error", {
+        toolName: this.toolName,
+        error: this._error
+      }), null;
+    }
+  }
+  _renderLoading() {
+    return l`
+      <div class="skeleton" role="status" aria-label="Loading tool card">
+        <div class="skeleton-line"></div>
+        <div class="skeleton-line"></div>
+        <div class="skeleton-line"></div>
+      </div>
+    `;
+  }
+  _renderFallback() {
+    let r = "";
+    try {
+      r = JSON.stringify(this.toolData, null, 2);
+    } catch {
+      r = String(this.toolData);
+    }
+    return l`
+      <div class="fallback">
+        <div class="fallback-header">
+          <span class="fallback-icon" aria-hidden="true">&#9881;</span>
+          <span class="fallback-title">${this.toolName || "Tool Result"}</span>
+        </div>
+        <div class="fallback-json" role="log">${r}</div>
+      </div>
+    `;
+  }
+  _renderError() {
+    return l`
+      <div class="error" role="alert">
+        <span class="error-icon" aria-hidden="true">&#9888;</span>
+        <span class="error-text">Error resolving "${this.toolName}": ${this._error}</span>
+      </div>
+    `;
+  }
+  render() {
+    return l`
+      <div
+        class="card"
+        role="region"
+        aria-label="Tool card: ${this.toolName || "unknown"}"
+        tabindex="0"
+      >
+        ${this.loading ? this._renderLoading() : this._error ? this._renderError() : this._renderResolved()}
+      </div>
+    `;
+  }
+  _renderResolved() {
+    if (!this.toolName) return this._renderFallback();
+    if (!this.registry[this.toolName]) return this._renderFallback();
+    const e = this._resolveComponent();
+    return e ? l`<div class="resolved">${e}</div>` : this._error ? this._renderError() : this._renderFallback();
+  }
+};
+t.styles = [f, p, b, m, h`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .card {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      overflow: hidden;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .card:hover {
+      border-color: var(--cg-color-input-border-hover);
+    }
+
+    /* ── Loading skeleton ── */
+    .skeleton {
+      padding: var(--cg-spacing-16);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+    .skeleton-line {
+      height: var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      background: linear-gradient(
+        90deg,
+        var(--cg-color-surface-container-background) 25%,
+        var(--cg-color-surface-cards-border) 50%,
+        var(--cg-color-surface-container-background) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skeleton-line:nth-child(1) { width: 60%; }
+    .skeleton-line:nth-child(2) { width: 90%; }
+    .skeleton-line:nth-child(3) { width: 75%; }
+
+    /* ── Fallback (raw JSON) ── */
+    .fallback {
+      padding: var(--cg-spacing-16);
+    }
+    .fallback-header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .fallback-icon {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+    }
+    .fallback-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .fallback-json {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      line-height: 1.5;
+      color: var(--cg-color-input-text-placeholder);
+      background: var(--cg-color-surface-base-background);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-12);
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: var(300px);
+      overflow-y: auto;
+    }
+
+    /* ── Error state ── */
+    .error {
+      padding: var(--cg-spacing-16);
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .error-icon {
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-base);
+      flex-shrink: 0;
+    }
+    .error-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    /* ── Resolved component host ── */
+    .resolved {
+      padding: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host { animation: none; }
+      .skeleton-line { animation: none; }
+    }
+
+    :focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+  `];
+s([
+  n({ type: String })
+], t.prototype, "toolName", 2);
+s([
+  n({ attribute: !1 })
+], t.prototype, "toolData", 2);
+s([
+  n({ attribute: !1 })
+], t.prototype, "registry", 2);
+s([
+  n({ type: Boolean })
+], t.prototype, "loading", 2);
+s([
+  v()
+], t.prototype, "_error", 2);
+t = s([
+  u("ai-tool-card-resolver")
+], t);
+export {
+  t as AiToolCardResolver
+};
+//# sourceMappingURL=ai-tool-card-resolver.js.map

package/dist/components/ai-tool-card-resolver/ai-tool-card-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-tool-card-resolver.js","sources":["../../../src/components/ai-tool-card-resolver/ai-tool-card-resolver.ts"],"sourcesContent":["/**\n * @element ai-tool-card-resolver\n * Dynamic card renderer that maps tool call names to registered web\n * components via a registry. Shows a loading skeleton while resolving,\n * falls back to raw JSON display if no match, and includes an error\n * boundary if the resolved component throws.\n *\n * @example\n * ```html\n * <ai-tool-card-resolver\n *   toolName=\"invoice\"\n *   .toolData=${{ id: 'INV-001', total: 250 }}\n *   .registry=${{ invoice: 'app-invoice-card', chart: 'app-chart-card' }}\n * ></ai-tool-card-resolver>\n * ```\n *\n * @prop {string} toolName - Tool call name to resolve (e.g. 'invoice')\n * @prop {unknown} toolData - Data passed to the resolved component\n * @prop {Record<string, string>} registry - Map of tool names to component tag names\n * @prop {boolean} loading - Force loading skeleton display\n *\n * @fires {CustomEvent<{toolName: string, action: string}>} ai-tool-card-action - Proxied from resolved component\n * @fires {CustomEvent<{toolName: string, error: string}>} ai-tool-card-error - When resolution fails\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-tool-card-resolver')\nexport class AiToolCardResolver extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .card {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-200);\n      overflow: hidden;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    /* ── Loading skeleton ── */\n    .skeleton {\n      padding: var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n    .skeleton-line {\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: linear-gradient(\n        90deg,\n        var(--cg-color-surface-container-background) 25%,\n        var(--cg-color-surface-cards-border) 50%,\n        var(--cg-color-surface-container-background) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skeleton-line:nth-child(1) { width: 60%; }\n    .skeleton-line:nth-child(2) { width: 90%; }\n    .skeleton-line:nth-child(3) { width: 75%; }\n\n    /* ── Fallback (raw JSON) ── */\n    .fallback {\n      padding: var(--cg-spacing-16);\n    }\n    .fallback-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .fallback-icon {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n    .fallback-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .fallback-json {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      line-height: 1.5;\n      color: var(--cg-color-input-text-placeholder);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-12);\n      overflow-x: auto;\n      white-space: pre-wrap;\n      word-break: break-all;\n      max-height: var(300px);\n      overflow-y: auto;\n    }\n\n    /* ── Error state ── */\n    .error {\n      padding: var(--cg-spacing-16);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .error-icon {\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-base);\n      flex-shrink: 0;\n    }\n    .error-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Resolved component host ── */\n    .resolved {\n      padding: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .skeleton-line { animation: none; }\n    }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n\n  /** Tool call name, e.g. \"invoice\" or \"search_results\" */\n  @property({ type: String }) toolName = '';\n\n  /** The tool's output data (passed as property to resolved component) */\n  @property({ attribute: false }) toolData: unknown = null;\n\n  /** Registry mapping tool names to component tag names */\n  @property({ attribute: false }) registry: Record<string, string> = {};\n\n  /** Show loading skeleton */\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _error = '';\n\n  /** Cached resolved element keyed by toolName + tag */\n  private _cachedEl: HTMLElement | null = null;\n  private _cachedKey = '';\n\n  private _dispatch(name: string, detail: unknown) {\n    this.dispatchEvent(new CustomEvent(name, {\n      bubbles: true, composed: true, detail,\n    }));\n  }\n\n  private _abortController?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._abortController?.abort();\n  }\n\n  private _resolveComponent(): HTMLElement | null {\n    const tag = this.registry[this.toolName];\n    if (!tag) return null;\n\n    const cacheKey = `${this.toolName}::${tag}`;\n\n    // Return cached element if key matches, just update data\n    if (this._cachedEl && this._cachedKey === cacheKey) {\n      (this._cachedEl as unknown as Record<string, unknown>)['data'] = this.toolData;\n      (this._cachedEl as unknown as Record<string, unknown>)['toolData'] = this.toolData;\n      return this._cachedEl;\n    }\n\n    // Clean up previous listeners\n    this._abortController?.abort();\n    this._abortController = new AbortController();\n\n    try {\n      const el = document.createElement(tag);\n      (el as unknown as Record<string, unknown>)['data'] = this.toolData;\n      (el as unknown as Record<string, unknown>)['toolData'] = this.toolData;\n      el.addEventListener('ai-tool-card-action', ((e: CustomEvent) => {\n        this._dispatch('ai-tool-card-action', {\n          toolName: this.toolName, action: e.detail?.action, data: e.detail?.data,\n        });\n      }) as EventListener, { signal: this._abortController.signal });\n\n      // Cache the element\n      this._cachedEl = el;\n      this._cachedKey = cacheKey;\n\n      return el;\n    } catch (err) {\n      this._error = err instanceof Error ? err.message : 'Component failed to render';\n      this._dispatch('ai-tool-card-error', {\n        toolName: this.toolName, error: this._error,\n      });\n      return null;\n    }\n  }\n\n  private _renderLoading() {\n    return html`\n      <div class=\"skeleton\" role=\"status\" aria-label=\"Loading tool card\">\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n      </div>\n    `;\n  }\n\n  private _renderFallback() {\n    let jsonStr = '';\n    try {\n      jsonStr = JSON.stringify(this.toolData, null, 2);\n    } catch {\n      jsonStr = String(this.toolData);\n    }\n    return html`\n      <div class=\"fallback\">\n        <div class=\"fallback-header\">\n          <span class=\"fallback-icon\" aria-hidden=\"true\">&#9881;</span>\n          <span class=\"fallback-title\">${this.toolName || 'Tool Result'}</span>\n        </div>\n        <div class=\"fallback-json\" role=\"log\">${jsonStr}</div>\n      </div>\n    `;\n  }\n\n  private _renderError() {\n    return html`\n      <div class=\"error\" role=\"alert\">\n        <span class=\"error-icon\" aria-hidden=\"true\">&#9888;</span>\n        <span class=\"error-text\">Error resolving \"${this.toolName}\": ${this._error}</span>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"card\"\n        role=\"region\"\n        aria-label=\"Tool card: ${this.toolName || 'unknown'}\"\n        tabindex=\"0\"\n      >\n        ${this.loading ? this._renderLoading()\n          : this._error ? this._renderError()\n          : this._renderResolved()}\n      </div>\n    `;\n  }\n\n  private _renderResolved() {\n    if (!this.toolName) return this._renderFallback();\n\n    const tag = this.registry[this.toolName];\n    if (!tag) return this._renderFallback();\n\n    const el = this._resolveComponent();\n    if (!el) return this._error ? this._renderError() : this._renderFallback();\n\n    return html`<div class=\"resolved\">${el}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-tool-card-resolver': AiToolCardResolver;\n  }\n}\n"],"names":["AiToolCardResolver","LitElement","name","detail","tag","cacheKey","el","e","err","html","jsonStr","hostBlock","reducedMotion","shimmerKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { LitElement, nothing } from 'lit';
+interface ToolCall {
+    name: string;
+    status: 'loading' | 'complete' | 'error';
+    result?: string;
+}
+export declare class AiToolIndicator extends LitElement {
+    static styles: import('lit').CSSResult[];
+    tools: ToolCall[];
+    compact: boolean;
+    private _expandedIndex;
+    private _humanize;
+    private _handleClick;
+    private _renderStatusIcon;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+export {};
+//# sourceMappingURL=ai-tool-indicator.d.ts.map

package/dist/components/ai-tool-indicator/ai-tool-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-tool-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/ai-tool-indicator/ai-tool-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA+GnB;IAEwB,KAAK,EAAE,QAAQ,EAAE,CAAM;IACN,OAAO,UAAS;IAE5D,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAO,CAAC,SAAS;IAmBjB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAMhB,MAAM;CAqBhB"}