@cognivo/components 0.8.0

package/dist/components/ai-timeline/ai-timeline.js

@@ -0,0 +1,378 @@
+import { css as p, LitElement as u, html as r, nothing as o } from "lit";
+import { property as g, customElement as v } from "lit/decorators.js";
+import { h as f, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (t, a, i, e) => {
+  for (var n = e > 1 ? void 0 : e ? b(a, i) : a, s = t.length - 1, l; s >= 0; s--)
+    (l = t[s]) && (n = (e ? l(a, i, n) : l(n)) || n);
+  return e && n && m(a, i, n), n;
+};
+let c = class extends u {
+  constructor() {
+    super(...arguments), this.steps = [], this.compact = !1, this._expandedIndex = -1;
+  }
+  _getIcon(t) {
+    return t === "complete" ? r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>` : t === "error" ? r`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>` : t === "active" ? r`<svg viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="currentColor"/></svg>` : r`<svg viewBox="0 0 8 8"><circle cx="4" cy="4" r="2.5" fill="none" stroke="currentColor" stroke-width="1"/></svg>`;
+  }
+  _formatDuration(t) {
+    return t ? t < 1e3 ? `${t}ms` : `${(t / 1e3).toFixed(1)}s` : "";
+  }
+  _formatTokens(t) {
+    return t >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : String(t);
+  }
+  _handleStepClick(t) {
+    this._expandedIndex = this._expandedIndex === t ? -1 : t, this.requestUpdate(), this.dispatchEvent(new CustomEvent("ai-timeline-step-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { index: t, step: this.steps[t] }
+    }));
+  }
+  _getMaxDuration() {
+    return Math.max(...this.steps.map((t) => t.duration || 0), 1);
+  }
+  _renderStep(t, a) {
+    return r`
+      <div class="line-col">
+        <div class="dot ${t.status}" aria-hidden="true">${this._getIcon(t.status)}</div>
+        ${a ? o : r`<div class="line"></div>`}
+      </div>
+    `;
+  }
+  render() {
+    if (this.steps.length === 0) return o;
+    const t = this._getMaxDuration();
+    return r`
+      <div class="timeline" role="list" aria-label="Execution timeline">
+        ${this.steps.map((a, i) => r`
+          <div class="step ${a.status}" role="listitem" style="--step-index: ${i}"
+            aria-current="${a.status === "active" ? "step" : o}"
+            tabindex="0"
+            @click=${() => this._handleStepClick(i)}
+            @keydown=${(e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleStepClick(i));
+    }}>
+
+            ${this._renderStep(a, i === this.steps.length - 1)}
+
+            <div class="content">
+              <div class="step-header">
+                <span class="step-label">${a.label}</span>
+                ${a.duration ? r`<span class="step-duration">${this._formatDuration(a.duration)}</span>` : o}
+              </div>
+
+              ${a.duration || a.status === "active" ? r`
+                <div class="duration-bar">
+                  <div class="duration-fill" style="width: ${a.status === "active" ? "100" : Math.round((a.duration || 0) / t * 100)}%"></div>
+                </div>
+              ` : o}
+
+              ${a.tokens ? r`
+                <div class="meta">
+                  ${a.tokens.input ? r`<span class="meta-item"><span class="meta-label">in</span> ${this._formatTokens(a.tokens.input)}</span>` : o}
+                  ${a.tokens.output ? r`<span class="meta-item"><span class="meta-label">out</span> ${this._formatTokens(a.tokens.output)}</span>` : o}
+                </div>
+              ` : o}
+
+              ${a.tools && a.tools.length > 0 ? r`
+                <div class="tools">
+                  ${a.tools.map((e) => r`<span class="tool-tag">${e}</span>`)}
+                </div>
+              ` : o}
+
+              ${this._expandedIndex === i && a.detail ? r`
+                <div class="detail">${a.detail}</div>
+              ` : o}
+
+              ${a.children && a.children.length > 0 ? r`
+                <div class="children">
+                  ${a.children.map((e, n) => r`
+                    <div class="step ${e.status}">
+                      ${this._renderStep(e, n === a.children.length - 1)}
+                      <div class="content">
+                        <div class="step-header">
+                          <span class="step-label">${e.label}</span>
+                          ${e.duration ? r`<span class="step-duration">${this._formatDuration(e.duration)}</span>` : o}
+                        </div>
+                      </div>
+                    </div>
+                  `)}
+                </div>
+              ` : o}
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+};
+c.styles = [f, h, p`
+    .timeline {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Step row ── */
+    .step {
+      display: flex;
+      gap: var(--cg-spacing-16);
+      padding: var(--cg-spacing-16);
+      position: relative;
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-100);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+      animation-delay: calc(var(--step-index, 0) * 50ms);
+    }
+    .step:hover { background: var(--cg-overlay-dark-subtle); }
+
+    @keyframes stepIn {
+      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-6))); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+
+    /* ── Connecting line ── */
+    .line-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-shrink: 0;
+      width: var(--cg-spacing-24);
+    }
+
+    .dot {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border-radius: var(--cg-border-radius-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .dot svg {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+
+    .line {
+      flex: 1;
+      width: var(--cg-border-width-50);
+      background: var(--cg-color-surface-base-divider);
+      min-height: var(--cg-spacing-8);
+    }
+    .step:last-child .line { display: none; }
+    .step.complete .line {
+      background: var(--cg-color-status-success-text-default);
+      opacity: 0.25;
+    }
+
+    /* ── Dot states ── */
+    .dot.pending {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .dot.active {
+      background: var(--cg-overlay-accent-strong);
+      border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-background-default);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      animation: ringPulse 2s ease-in-out infinite;
+    }
+    .dot.complete {
+      background: var(--cg-color-status-success-background-default);
+      border: var(--cg-border-width-100) solid var(--cg-color-status-success-text-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .dot.complete svg {
+      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+    }
+    .dot.error {
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-100) solid var(--cg-color-status-error-text-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    @keyframes ringPulse {
+      0%, 100% { box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+      50% { box-shadow: 0 0 0 6px transparent; }
+    }
+    @keyframes checkPop {
+      from { transform: scale(0); }
+      50% { transform: scale(1.2); }
+      to { transform: scale(1); }
+    }
+
+    /* ── Content ── */
+    .content {
+      flex: 1;
+      min-width: 0;
+      padding-top: var(--cg-spacing-2);
+      padding-bottom: var(--cg-spacing-12);
+    }
+
+    .step-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+    }
+    .step-label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+    .step.pending .step-label {
+      color: var(--cg-color-surface-container-outlined);
+      opacity: 0.5;
+    }
+    .step.complete .step-label {
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .step.error .step-label {
+      color: var(--cg-color-status-error-text-default);
+    }
+    .step.active .step-label {
+      background: linear-gradient(110deg, var(--cg-color-surface-base-text) 35%, var(--cg-color-action-primary-background-default) 50%, var(--cg-color-surface-base-text) 65%);
+      background-size: 300% 100%;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;
+    }
+    @keyframes textSweep {
+      0% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+
+    .step-duration {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      font-family: var(--cg-font-family-mono);
+      white-space: nowrap;
+    }
+
+    /* ── Duration bar ── */
+    .duration-bar {
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-border);
+      margin-top: var(--cg-spacing-8);
+      overflow: hidden;
+    }
+    .duration-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .step.complete .duration-fill { background: var(--cg-color-status-success-text-default); opacity: 0.6; }
+    .step.active .duration-fill { background: var(--cg-color-action-primary-background-default); animation: indeterminate 1.5s linear infinite; }
+    .step.error .duration-fill { background: var(--cg-color-status-error-text-default); opacity: 0.6; }
+
+    @keyframes indeterminate {
+      0% { transform: translateX(-100%); width: 40%; }
+      50% { transform: translateX(100%); width: 40%; }
+      100% { transform: translateX(300%); width: 40%; }
+    }
+
+    /* ── Token metadata ── */
+    .meta {
+      display: flex;
+      gap: var(--cg-spacing-16);
+      margin-top: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .meta-item {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+    .meta-label { opacity: 0.6; }
+
+    /* ── Tool tags ── */
+    .tools {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-8);
+      flex-wrap: wrap;
+    }
+    .tool-tag {
+      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-color-surface-cards-background);
+      color: var(--cg-color-surface-container-outlined);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-family: var(--cg-font-family-mono);
+    }
+
+    /* ── Detail panel ── */
+    .detail {
+      margin-top: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-relaxed);
+      white-space: pre-wrap;
+      max-height: var(--cg-spacing-96);
+      overflow-y: auto;
+    }
+
+    /* ── Nested children ── */
+    .children {
+      margin-top: var(--cg-spacing-8);
+    }
+    .children .step {
+      padding: var(--cg-spacing-4) var(--cg-spacing-4);
+      animation: none;
+    }
+    .children .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }
+    .children .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }
+    .children .line { min-height: var(--cg-spacing-4); }
+    .children .step-label { font-size: var(--cg-font-size-xs); }
+    .children .line-col { width: var(--cg-spacing-16); }
+    .children .content { padding-bottom: var(--cg-spacing-2); }
+
+    /* ── Compact ── */
+    :host([compact]) .step { padding: var(--cg-spacing-4) var(--cg-spacing-6); }
+    :host([compact]) .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }
+    :host([compact]) .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }
+    :host([compact]) .line-col { width: var(--cg-spacing-16); }
+    :host([compact]) .step-label { font-size: var(--cg-font-size-xs); }
+    :host([compact]) .detail,
+    :host([compact]) .tools,
+    :host([compact]) .meta,
+    :host([compact]) .children,
+    :host([compact]) .duration-bar { display: none; }
+
+    .step:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .step { animation: none; }
+      .dot.active { animation: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+      .dot.complete svg { animation: none; }
+      .step.active .duration-fill { animation: none; width: 50%; }
+      .step.active .step-label { animation: none; -webkit-text-fill-color: currentColor; }
+    }
+  `];
+d([
+  g({ type: Array })
+], c.prototype, "steps", 2);
+d([
+  g({ type: Boolean, reflect: !0 })
+], c.prototype, "compact", 2);
+c = d([
+  v("ai-timeline")
+], c);
+export {
+  c as AiTimeline
+};
+//# sourceMappingURL=ai-timeline.js.map

package/dist/components/ai-timeline/ai-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-timeline.js","sources":["../../../src/components/ai-timeline/ai-timeline.ts"],"sourcesContent":["/**\n * @element ai-timeline\n * Vertical execution timeline for AI agents. Shows steps with status indicators,\n * duration bars, tool tags, token metadata, nested sub-steps, and expandable details.\n *\n * @fires {CustomEvent<{index: number, step: TimelineStep}>} ai-timeline-step-click - When a step is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface TimelineStep {\n  label: string;\n  status: 'pending' | 'active' | 'complete' | 'error';\n  type?: 'llm' | 'tool' | 'retrieval' | 'human' | 'default';\n  detail?: string;\n  duration?: number;\n  tools?: string[];\n  tokens?: { input?: number; output?: number };\n  children?: TimelineStep[];\n}\n\n@customElement('ai-timeline')\nexport class AiTimeline extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .timeline {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* ── Step row ── */\n    .step {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-16);\n      position: relative;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--step-index, 0) * 50ms);\n    }\n    .step:hover { background: var(--cg-overlay-dark-subtle); }\n\n    @keyframes stepIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-6))); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    /* ── Connecting line ── */\n    .line-col {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-shrink: 0;\n      width: var(--cg-spacing-24);\n    }\n\n    .dot {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .dot svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    .line {\n      flex: 1;\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n      min-height: var(--cg-spacing-8);\n    }\n    .step:last-child .line { display: none; }\n    .step.complete .line {\n      background: var(--cg-color-status-success-text-default);\n      opacity: 0.25;\n    }\n\n    /* ── Dot states ── */\n    .dot.pending {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .dot.active {\n      background: var(--cg-overlay-accent-strong);\n      border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      animation: ringPulse 2s ease-in-out infinite;\n    }\n    .dot.complete {\n      background: var(--cg-color-status-success-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-success-text-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .dot.complete svg {\n      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n    .dot.error {\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    @keyframes ringPulse {\n      0%, 100% { box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n      50% { box-shadow: 0 0 0 6px transparent; }\n    }\n    @keyframes checkPop {\n      from { transform: scale(0); }\n      50% { transform: scale(1.2); }\n      to { transform: scale(1); }\n    }\n\n    /* ── Content ── */\n    .content {\n      flex: 1;\n      min-width: 0;\n      padding-top: var(--cg-spacing-2);\n      padding-bottom: var(--cg-spacing-12);\n    }\n\n    .step-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n    }\n    .step-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .step.pending .step-label {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .step.complete .step-label {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .step.error .step-label {\n      color: var(--cg-color-status-error-text-default);\n    }\n    .step.active .step-label {\n      background: linear-gradient(110deg, var(--cg-color-surface-base-text) 35%, var(--cg-color-action-primary-background-default) 50%, var(--cg-color-surface-base-text) 65%);\n      background-size: 300% 100%;\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .step-duration {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-family: var(--cg-font-family-mono);\n      white-space: nowrap;\n    }\n\n    /* ── Duration bar ── */\n    .duration-bar {\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border);\n      margin-top: var(--cg-spacing-8);\n      overflow: hidden;\n    }\n    .duration-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .step.complete .duration-fill { background: var(--cg-color-status-success-text-default); opacity: 0.6; }\n    .step.active .duration-fill { background: var(--cg-color-action-primary-background-default); animation: indeterminate 1.5s linear infinite; }\n    .step.error .duration-fill { background: var(--cg-color-status-error-text-default); opacity: 0.6; }\n\n    @keyframes indeterminate {\n      0% { transform: translateX(-100%); width: 40%; }\n      50% { transform: translateX(100%); width: 40%; }\n      100% { transform: translateX(300%); width: 40%; }\n    }\n\n    /* ── Token metadata ── */\n    .meta {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-top: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .meta-item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n    .meta-label { opacity: 0.6; }\n\n    /* ── Tool tags ── */\n    .tools {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n    .tool-tag {\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-color-surface-cards-background);\n      color: var(--cg-color-surface-container-outlined);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-family: var(--cg-font-family-mono);\n    }\n\n    /* ── Detail panel ── */\n    .detail {\n      margin-top: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      max-height: var(--cg-spacing-96);\n      overflow-y: auto;\n    }\n\n    /* ── Nested children ── */\n    .children {\n      margin-top: var(--cg-spacing-8);\n    }\n    .children .step {\n      padding: var(--cg-spacing-4) var(--cg-spacing-4);\n      animation: none;\n    }\n    .children .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    .children .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n    .children .line { min-height: var(--cg-spacing-4); }\n    .children .step-label { font-size: var(--cg-font-size-xs); }\n    .children .line-col { width: var(--cg-spacing-16); }\n    .children .content { padding-bottom: var(--cg-spacing-2); }\n\n    /* ── Compact ── */\n    :host([compact]) .step { padding: var(--cg-spacing-4) var(--cg-spacing-6); }\n    :host([compact]) .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    :host([compact]) .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n    :host([compact]) .line-col { width: var(--cg-spacing-16); }\n    :host([compact]) .step-label { font-size: var(--cg-font-size-xs); }\n    :host([compact]) .detail,\n    :host([compact]) .tools,\n    :host([compact]) .meta,\n    :host([compact]) .children,\n    :host([compact]) .duration-bar { display: none; }\n\n    .step:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .step { animation: none; }\n      .dot.active { animation: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n      .dot.complete svg { animation: none; }\n      .step.active .duration-fill { animation: none; width: 50%; }\n      .step.active .step-label { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  @property({ type: Array }) steps: TimelineStep[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _expandedIndex = -1;\n\n  private _getIcon(status: string) {\n    if (status === 'complete') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n    if (status === 'error') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n    if (status === 'active') return html`<svg viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"currentColor\"/></svg>`;\n    return html`<svg viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"/></svg>`;\n  }\n\n  private _formatDuration(ms?: number): string {\n    if (!ms) return '';\n    if (ms < 1000) return `${ms}ms`;\n    return `${(ms / 1000).toFixed(1)}s`;\n  }\n\n  private _formatTokens(n: number): string {\n    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n    return String(n);\n  }\n\n  private _handleStepClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('ai-timeline-step-click', {\n      bubbles: true, composed: true,\n      detail: { index, step: this.steps[index] },\n    }));\n  }\n\n  private _getMaxDuration(): number {\n    return Math.max(...this.steps.map(s => s.duration || 0), 1);\n  }\n\n  private _renderStep(step: TimelineStep, isLast: boolean) {\n    return html`\n      <div class=\"line-col\">\n        <div class=\"dot ${step.status}\" aria-hidden=\"true\">${this._getIcon(step.status)}</div>\n        ${!isLast ? html`<div class=\"line\"></div>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this.steps.length === 0) return nothing;\n    const maxDuration = this._getMaxDuration();\n\n    return html`\n      <div class=\"timeline\" role=\"list\" aria-label=\"Execution timeline\">\n        ${this.steps.map((step, i) => html`\n          <div class=\"step ${step.status}\" role=\"listitem\" style=\"--step-index: ${i}\"\n            aria-current=\"${step.status === 'active' ? 'step' : nothing}\"\n            tabindex=\"0\"\n            @click=${() => this._handleStepClick(i)}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleStepClick(i); } }}>\n\n            ${this._renderStep(step, i === this.steps.length - 1)}\n\n            <div class=\"content\">\n              <div class=\"step-header\">\n                <span class=\"step-label\">${step.label}</span>\n                ${step.duration ? html`<span class=\"step-duration\">${this._formatDuration(step.duration)}</span>` : nothing}\n              </div>\n\n              ${step.duration || step.status === 'active' ? html`\n                <div class=\"duration-bar\">\n                  <div class=\"duration-fill\" style=\"width: ${step.status === 'active' ? '100' : Math.round((step.duration || 0) / maxDuration * 100)}%\"></div>\n                </div>\n              ` : nothing}\n\n              ${step.tokens ? html`\n                <div class=\"meta\">\n                  ${step.tokens.input ? html`<span class=\"meta-item\"><span class=\"meta-label\">in</span> ${this._formatTokens(step.tokens.input)}</span>` : nothing}\n                  ${step.tokens.output ? html`<span class=\"meta-item\"><span class=\"meta-label\">out</span> ${this._formatTokens(step.tokens.output)}</span>` : nothing}\n                </div>\n              ` : nothing}\n\n              ${step.tools && step.tools.length > 0 ? html`\n                <div class=\"tools\">\n                  ${step.tools.map(t => html`<span class=\"tool-tag\">${t}</span>`)}\n                </div>\n              ` : nothing}\n\n              ${this._expandedIndex === i && step.detail ? html`\n                <div class=\"detail\">${step.detail}</div>\n              ` : nothing}\n\n              ${step.children && step.children.length > 0 ? html`\n                <div class=\"children\">\n                  ${step.children.map((child, ci) => html`\n                    <div class=\"step ${child.status}\">\n                      ${this._renderStep(child, ci === step.children!.length - 1)}\n                      <div class=\"content\">\n                        <div class=\"step-header\">\n                          <span class=\"step-label\">${child.label}</span>\n                          ${child.duration ? html`<span class=\"step-duration\">${this._formatDuration(child.duration)}</span>` : nothing}\n                        </div>\n                      </div>\n                    </div>\n                  `)}\n                </div>\n              ` : nothing}\n            </div>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiTimeline","LitElement","status","html","ms","n","index","s","step","isLast","nothing","maxDuration","t","child","ci","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-toast/ai-toast.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+interface ToastOptions {
+    type?: 'info' | 'success' | 'warning' | 'error' | 'ai';
+    title?: string;
+    duration?: number;
+}
+type AiPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export declare class AiToast extends LitElement {
+    static styles: import('lit').CSSResult;
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    position: AiPosition;
+    maxQueue: number;
+    private _toaster;
+    /** Show a toast notification. Returns the toast ID. */
+    show(message: string, options?: ToastOptions | string, duration?: number): string;
+    dismiss(id: string): void;
+    clear(): void;
+    private _onInnerDismiss;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-toast': AiToast;
+    }
+}
+export {};
+//# sourceMappingURL=ai-toast.d.ts.map

package/dist/components/ai-toast/ai-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-toast.d.ts","sourceRoot":"","sources":["../../../src/components/ai-toast/ai-toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAS5C,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAE5E,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAEpB;IAE2B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9B,QAAQ,EAAE,UAAU,CAAe;IAClD,QAAQ,EAAE,MAAM,CAAK;IAE5B,OAAO,CAAC,QAAQ,CAAa;IAElD,uDAAuD;IACvD,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;IA0BjF,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIzB,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,eAAe,CAOrB;IAEO,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/ai-toast/ai-toast.js

@@ -0,0 +1,68 @@
+import { css as c, LitElement as m, html as l } from "lit";
+import { property as u, query as d, customElement as f } from "lit/decorators.js";
+import { CgToaster as h } from "../cg-toaster/cg-toaster.js";
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (s, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? g(e, n) : e, p = s.length - 1, o; p >= 0; p--)
+    (o = s[p]) && (r = (t ? o(e, n, r) : o(r)) || r);
+  return t && r && y(e, n, r), r;
+};
+customElements.get("cg-toaster") || customElements.define("cg-toaster", h);
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.position = "top-right", this.maxQueue = 6, this._onInnerDismiss = (s) => {
+      const e = s;
+      this.dispatchEvent(new CustomEvent("ai-toast-dismiss", {
+        bubbles: !0,
+        composed: !0,
+        detail: { id: e.detail.id, reason: "auto" }
+      }));
+    };
+  }
+  /** Show a toast notification. Returns the toast ID. */
+  show(s, e, n) {
+    let t = {};
+    typeof e == "string" ? (t = { type: e }, n !== void 0 && (t.duration = n)) : e && (t = e);
+    const r = t.type ?? "ai", o = {
+      title: t.title || s,
+      variant: r
+    };
+    return t.title && (o.description = s), t.duration !== void 0 && (o.duration = t.duration), this._toaster.show(o);
+  }
+  dismiss(s) {
+    this._toaster?.dismiss(s);
+  }
+  clear() {
+    this._toaster?.clear();
+  }
+  render() {
+    return l`
+      <cg-toaster
+        .position=${this.position}
+        .max=${this.maxQueue}
+        @cg-toaster-dismiss=${this._onInnerDismiss}
+      ></cg-toaster>
+    `;
+  }
+};
+i.styles = c`
+    :host { display: contents; }
+  `;
+a([
+  u({ reflect: !0 })
+], i.prototype, "rounded", 2);
+a([
+  u({ type: String, reflect: !0 })
+], i.prototype, "position", 2);
+a([
+  u({ type: Number })
+], i.prototype, "maxQueue", 2);
+a([
+  d("cg-toaster")
+], i.prototype, "_toaster", 2);
+i = a([
+  f("ai-toast")
+], i);
+export {
+  i as AiToast
+};
+//# sourceMappingURL=ai-toast.js.map

package/dist/components/ai-toast/ai-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-toast.js","sources":["../../../src/components/ai-toast/ai-toast.ts"],"sourcesContent":["/**\n * @element ai-toast\n * AI-flavored toast notification stack. Thin wrapper around `cg-toaster`\n * defaulting to the `ai` variant (brand-accented left border + sparkle icon).\n *\n * @example\n * ```html\n * <ai-toast position=\"top-right\"></ai-toast>\n * <script>\n *   const toast = document.querySelector('ai-toast');\n *   toast.show('Model updated successfully', { type: 'success' });\n *   toast.show('Rate limit exceeded', { type: 'error', title: 'API Error' });\n *   toast.show('Thinking...', { type: 'ai', duration: 0 }); // persistent\n * </script>\n * ```\n *\n * @method show(message, options?) - Show a toast, returns its ID\n * @method dismiss(id) - Dismiss a specific toast\n * @method clear() - Remove all toasts\n *\n * @fires {CustomEvent<{id, reason}>} ai-toast-dismiss - When a toast is dismissed\n */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CgToaster, type ToastVariant } from '../cg-toaster/cg-toaster.js';\n\n// Ensure foundation element is registered.\nif (!customElements.get('cg-toaster')) {\n  customElements.define('cg-toaster', CgToaster);\n}\n\ninterface ToastOptions {\n  type?: 'info' | 'success' | 'warning' | 'error' | 'ai';\n  title?: string;\n  duration?: number;\n}\n\n// ai-toast's cg-toaster position enum (subset kept for BC).\ntype AiPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n@customElement('ai-toast')\nexport class AiToast extends LitElement {\n  static override styles = css`\n    :host { display: contents; }\n  `;\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: String, reflect: true }) position: AiPosition = 'top-right';\n  @property({ type: Number }) maxQueue: number = 6;\n\n  @query('cg-toaster') private _toaster!: CgToaster;\n\n  /** Show a toast notification. Returns the toast ID. */\n  show(message: string, options?: ToastOptions | string, duration?: number): string {\n    let opts: ToastOptions = {};\n    if (typeof options === 'string') {\n      opts = { type: options as NonNullable<ToastOptions['type']> };\n      if (duration !== undefined) opts.duration = duration;\n    } else if (options) {\n      opts = options;\n    }\n\n    // Default to 'ai' variant — this is ai-toast's differentiator.\n    const type = (opts.type ?? 'ai') as ToastVariant;\n    // Translate ai-toast options → cg-toaster ToastOptions.\n    // `message` becomes the title when no explicit title is given (preserves\n    // existing behavior where the message is always visible); otherwise\n    // message goes to `description`.\n    const title = opts.title || message;\n    const cgOpts: { title: string; variant: ToastVariant; description?: string; duration?: number } = {\n      title,\n      variant: type,\n    };\n    if (opts.title) cgOpts.description = message;\n    if (opts.duration !== undefined) cgOpts.duration = opts.duration;\n\n    return this._toaster.show(cgOpts);\n  }\n\n  dismiss(id: string): void {\n    this._toaster?.dismiss(id);\n  }\n\n  clear(): void {\n    this._toaster?.clear();\n  }\n\n  private _onInnerDismiss = (e: Event) => {\n    const ce = e as CustomEvent<{ id: string }>;\n    this.dispatchEvent(new CustomEvent('ai-toast-dismiss', {\n      bubbles: true,\n      composed: true,\n      detail: { id: ce.detail.id, reason: 'auto' },\n    }));\n  };\n\n  override render() {\n    return html`\n      <cg-toaster\n        .position=${this.position}\n        .max=${this.maxQueue}\n        @cg-toaster-dismiss=${this._onInnerDismiss}\n      ></cg-toaster>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-toast': AiToast;\n  }\n}\n"],"names":["CgToaster","AiToast","LitElement","e","ce","message","options","duration","opts","type","cgOpts","id","html","css","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;AA2BK,eAAe,IAAI,YAAY,KAClC,eAAe,OAAO,cAAcA,CAAS;AAaxC,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKwB,KAAA,UAAuC,MACzB,KAAA,WAAuB,aACtC,KAAA,WAAmB,GAuC/C,KAAQ,kBAAkB,CAACC,MAAa;AACtC,YAAMC,IAAKD;AACX,WAAK,cAAc,IAAI,YAAY,oBAAoB;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,IAAIC,EAAG,OAAO,IAAI,QAAQ,OAAA;AAAA,MAAO,CAC5C,CAAC;AAAA,IACJ;AAAA,EAAA;AAAA;AAAA,EAzCA,KAAKC,GAAiBC,GAAiCC,GAA2B;AAChF,QAAIC,IAAqB,CAAA;AACzB,IAAI,OAAOF,KAAY,YACrBE,IAAO,EAAE,MAAMF,EAAA,GACXC,MAAa,WAAWC,EAAK,WAAWD,MACnCD,MACTE,IAAOF;AAIT,UAAMG,IAAQD,EAAK,QAAQ,MAMrBE,IAA4F;AAAA,MAChG,OAFYF,EAAK,SAASH;AAAA,MAG1B,SAASI;AAAA,IAAA;AAEX,WAAID,EAAK,UAAOE,EAAO,cAAcL,IACjCG,EAAK,aAAa,WAAWE,EAAO,WAAWF,EAAK,WAEjD,KAAK,SAAS,KAAKE,CAAM;AAAA,EAClC;AAAA,EAEA,QAAQC,GAAkB;AACxB,SAAK,UAAU,QAAQA,CAAE;AAAA,EAC3B;AAAA,EAEA,QAAc;AACZ,SAAK,UAAU,MAAA;AAAA,EACjB;AAAA,EAWS,SAAS;AAChB,WAAOC;AAAA;AAAA,oBAES,KAAK,QAAQ;AAAA,eAClB,KAAK,QAAQ;AAAA,8BACE,KAAK,eAAe;AAAA;AAAA;AAAA,EAGhD;AACF;AAhEaX,EACK,SAASY;AAAA;AAAA;AAIIC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GALhBd,EAKkB,WAAA,WAAA,CAAA;AACca,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9Bd,EAMgC,WAAA,YAAA,CAAA;AACfa,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfd,EAOiB,WAAA,YAAA,CAAA;AAECa,EAAA;AAAA,EAA5BE,EAAM,YAAY;AAAA,GATRf,EASkB,WAAA,YAAA,CAAA;AATlBA,IAANa,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZhB,CAAA;"}

package/dist/components/ai-token-tracker/ai-token-tracker.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export declare class AiTokenTracker extends LitElement {
+    static styles: import('lit').CSSResult[];
+    inputTokens: number;
+    outputTokens: number;
+    cost: number;
+    latency: number;
+    model: string;
+    budget: number;
+    mode: 'compact' | 'detailed';
+    private get _totalTokens();
+    private get _costStr();
+    private get _latencyStr();
+    private get _latencyClass();
+    private get _budgetPct();
+    private get _budgetClass();
+    private _handleClick;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-token-tracker.d.ts.map

package/dist/components/ai-token-tracker/ai-token-tracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-token-tracker.d.ts","sourceRoot":"","sources":["../../../src/components/ai-token-tracker/ai-token-tracker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAqHnB;IAEyB,WAAW,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,MAAM,CAAK;IACzB,IAAI,EAAE,MAAM,CAAK;IACjB,OAAO,EAAE,MAAM,CAAK;IACpB,KAAK,EAAE,MAAM,CAAM;IACnB,MAAM,EAAE,MAAM,CAAK;IACnB,IAAI,EAAE,SAAS,GAAG,UAAU,CAAa;IAErE,OAAO,KAAK,YAAY,GAAmD;IAC3E,OAAO,KAAK,QAAQ,GAAgE;IACpF,OAAO,KAAK,WAAW,GAGtB;IACD,OAAO,KAAK,aAAa,GAIxB;IACD,OAAO,KAAK,UAAU,GAGrB;IACD,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,YAAY;IAOX,MAAM;CAsDhB"}