@cognivo/components 0.8.0

package/dist/components/ai-agent-card/ai-agent-card.js

@@ -0,0 +1,267 @@
+import { css as h, LitElement as p, nothing as c, html as e } from "lit";
+import { property as d, customElement as f } from "lit/decorators.js";
+import { h as u, r as v, f as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (a, s, g, l) => {
+  for (var r = l > 1 ? void 0 : l ? y(s, g) : s, o = a.length - 1, n; o >= 0; o--)
+    (n = a[o]) && (r = (l ? n(s, g, r) : n(r)) || r);
+  return l && r && m(s, g, r), r;
+};
+const w = {
+  idle: "neutral",
+  thinking: "accent",
+  acting: "info",
+  done: "success",
+  error: "danger"
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.name = "Agent", this.role = "", this.status = "idle", this.task = "", this.handoffChain = [], this.capabilities = [];
+  }
+  _handlePause(a) {
+    a.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-agent-pause", { bubbles: !0, composed: !0, detail: { name: this.name } }));
+  }
+  _handleCancel(a) {
+    a.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-agent-cancel", { bubbles: !0, composed: !0, detail: { name: this.name } }));
+  }
+  _currentStepIndex() {
+    return this.handoffChain.length > 0 ? this.handoffChain.length - 1 : -1;
+  }
+  render() {
+    const a = this.status === "thinking" || this.status === "acting", s = this._currentStepIndex(), g = w[this.status], l = a, r = [
+      "card",
+      a ? "active" : "",
+      this.status === "error" ? "error-state" : "",
+      this.status === "done" ? "done-state" : ""
+    ].filter(Boolean).join(" ");
+    return e`
+      <div class="${r}" role="article"
+        aria-label="${this.name} agent — ${this.status}${this.task ? `: ${this.task}` : ""}">
+
+        ${a ? e`
+          <div class="actions">
+            <cg-button variant="tertiary" size="sm" rounded="full" label="Pause agent" @click=${this._handlePause}>
+              <cg-icon name="pause" size="xs"></cg-icon>
+            </cg-button>
+            <cg-button variant="tertiary" size="sm" rounded="full" label="Cancel agent" @click=${this._handleCancel}>
+              <cg-icon name="close" size="xs"></cg-icon>
+            </cg-button>
+          </div>
+        ` : c}
+
+        <div class="header">
+          <div class="identity">
+            <div class="name">${this.name}</div>
+            ${this.role ? e`<div class="role">${this.role}</div>` : c}
+          </div>
+          <div class="header-badge">
+            <cg-badge variant=${g} label=${this.status} size="sm" rounded="full" ?dot=${l}></cg-badge>
+          </div>
+        </div>
+
+        ${this.task || this.handoffChain.length > 0 || this.capabilities.length > 0 ? e`
+          <div class="body">
+            ${this.task ? e`<div class="task">${this.task}</div>` : c}
+
+            ${this.handoffChain.length > 0 ? e`
+              <div class="handoff" aria-label="Handoff: ${this.handoffChain.join(" → ")}">
+                ${this.handoffChain.map((o, n) => e`
+                  ${n > 0 ? e`<span class="handoff-arrow" aria-hidden="true">→</span>` : c}
+                  <span class="handoff-step ${n === s ? "current" : n < s ? "past" : ""}">${o}</span>
+                `)}
+              </div>
+            ` : c}
+
+            ${this.capabilities.length > 0 ? e`
+              <div class="caps" aria-label="Capabilities: ${this.capabilities.join(", ")}">
+                ${this.capabilities.map((o) => e`
+                  <cg-chip label=${o} variant="default" size="sm"></cg-chip>
+                `)}
+              </div>
+            ` : c}
+          </div>
+        ` : c}
+      </div>
+    `;
+  }
+};
+t.styles = [u, v, b, h`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+
+    /* ── Card ── */
+    .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);
+      padding: var(--cg-spacing-20);
+      position: relative;
+      overflow: hidden;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .card:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+    }
+
+    /* Left accent per state */
+    .card.active {
+      border-left: var(--cg-border-width-300) solid var(--cg-color-action-primary-background-default);
+    }
+    .card.error-state {
+      border-left: var(--cg-border-width-300) solid var(--cg-color-status-error-text-default);
+    }
+    .card.done-state {
+      border-left: var(--cg-border-width-300) solid var(--cg-color-status-success-text-default);
+    }
+
+    /* Shimmer on active */
+    @keyframes shimmerSlide {
+      from { transform: translateX(-100%); }
+      to { transform: translateX(200%); }
+    }
+    .card.active::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: var(--cg-spacing-2);
+      background: linear-gradient(90deg, transparent, var(--cg-color-action-primary-background-default), transparent);
+      animation: shimmerSlide 2s var(--cg-transition-easing-default) infinite;
+    }
+    .card.error-state::before {
+      background: linear-gradient(90deg, transparent, var(--cg-color-status-error-text-default), transparent);
+    }
+
+    /* ── Header: name + role | badge ── */
+    .header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .identity { flex: 1; min-width: 0; }
+    .name {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-tight);
+    }
+    .role {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      margin-top: var(--cg-spacing-4);
+    }
+
+    .header-badge { flex-shrink: 0; }
+
+    /* ── Actions ── */
+    .actions {
+      display: flex;
+      gap: var(--cg-spacing-4);
+      position: absolute;
+      top: var(--cg-spacing-12);
+      right: var(--cg-spacing-12);
+    }
+
+    /* ── Body ── */
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+
+    .task {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-relaxed);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    /* ── Handoff chain ── */
+    .handoff {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      flex-wrap: wrap;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .handoff-step {
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-container-background);
+      white-space: nowrap;
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .handoff-step.current {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-bold);
+    }
+    .handoff-step.past {
+      opacity: 0.6;
+    }
+    .handoff-arrow {
+      color: var(--cg-color-surface-cards-border);
+      flex-shrink: 0;
+      display: flex;
+    }
+
+    /* ── Capabilities ── */
+    .caps {
+      display: flex;
+      gap: var(--cg-spacing-6);
+      flex-wrap: wrap;
+    }
+
+    /* ── Reduced motion ── */
+    @media (prefers-reduced-motion: reduce) {
+      .card.active::before { animation: none; display: none; }
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .card { border-radius: 0; }
+    :host([rounded="sm"]) .card { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .card { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .card { border-radius: var(--cg-border-radius-200); }
+    :host([rounded="full"]) .card { border-radius: var(--cg-border-radius-full); }
+  `];
+i([
+  d({ reflect: !0 })
+], t.prototype, "rounded", 2);
+i([
+  d({ type: String })
+], t.prototype, "name", 2);
+i([
+  d({ type: String })
+], t.prototype, "role", 2);
+i([
+  d({ type: String })
+], t.prototype, "status", 2);
+i([
+  d({ type: String })
+], t.prototype, "task", 2);
+i([
+  d({ type: Array })
+], t.prototype, "handoffChain", 2);
+i([
+  d({ type: Array })
+], t.prototype, "capabilities", 2);
+t = i([
+  f("ai-agent-card")
+], t);
+export {
+  t as AiAgentCard
+};
+//# sourceMappingURL=ai-agent-card.js.map

package/dist/components/ai-agent-card/ai-agent-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-agent-card.js","sources":["../../../src/components/ai-agent-card/ai-agent-card.ts"],"sourcesContent":["/**\n * @element ai-agent-card\n * Status card for multi-agent orchestration — shows agent name, role, live status badge,\n * current task, handoff chain, capability chips, and pause/cancel controls.\n *\n * Uses cg-badge for status, cg-chip for capabilities, cg-button for actions.\n *\n * @example\n * ```html\n * <ai-agent-card\n *   name=\"Researcher\"\n *   role=\"Data Analyst\"\n *   status=\"thinking\"\n *   task=\"Querying vector store for Q4 revenue data...\"\n *   .capabilities=${['search','summarize','code']}\n *   .handoffChain=${['Planner','Researcher','Coder']}\n * ></ai-agent-card>\n * ```\n *\n * @fires {CustomEvent<{name}>} ai-agent-pause - Pause button clicked\n * @fires {CustomEvent<{name}>} ai-agent-cancel - Cancel button 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\ntype AgentStatus = 'idle' | 'thinking' | 'acting' | 'done' | 'error';\n\nconst STATUS_BADGE_MAP: Record<AgentStatus, string> = {\n  idle: 'neutral',\n  thinking: 'accent',\n  acting: 'info',\n  done: 'success',\n  error: 'danger',\n};\n\n@customElement('ai-agent-card')\nexport class AiAgentCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n\n    /* ── Card ── */\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      padding: var(--cg-spacing-20);\n      position: relative;\n      overflow: hidden;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n    }\n\n    /* Left accent per state */\n    .card.active {\n      border-left: var(--cg-border-width-300) solid var(--cg-color-action-primary-background-default);\n    }\n    .card.error-state {\n      border-left: var(--cg-border-width-300) solid var(--cg-color-status-error-text-default);\n    }\n    .card.done-state {\n      border-left: var(--cg-border-width-300) solid var(--cg-color-status-success-text-default);\n    }\n\n    /* Shimmer on active */\n    @keyframes shimmerSlide {\n      from { transform: translateX(-100%); }\n      to { transform: translateX(200%); }\n    }\n    .card.active::before {\n      content: '';\n      position: absolute;\n      top: 0; left: 0; right: 0;\n      height: var(--cg-spacing-2);\n      background: linear-gradient(90deg, transparent, var(--cg-color-action-primary-background-default), transparent);\n      animation: shimmerSlide 2s var(--cg-transition-easing-default) infinite;\n    }\n    .card.error-state::before {\n      background: linear-gradient(90deg, transparent, var(--cg-color-status-error-text-default), transparent);\n    }\n\n    /* ── Header: name + role | badge ── */\n    .header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .identity { flex: 1; min-width: 0; }\n    .name {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-tight);\n    }\n    .role {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      margin-top: var(--cg-spacing-4);\n    }\n\n    .header-badge { flex-shrink: 0; }\n\n    /* ── Actions ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      position: absolute;\n      top: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\n    }\n\n    /* ── Body ── */\n    .body {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    .task {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    /* ── Handoff chain ── */\n    .handoff {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      flex-wrap: wrap;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .handoff-step {\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-container-background);\n      white-space: nowrap;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .handoff-step.current {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-bold);\n    }\n    .handoff-step.past {\n      opacity: 0.6;\n    }\n    .handoff-arrow {\n      color: var(--cg-color-surface-cards-border);\n      flex-shrink: 0;\n      display: flex;\n    }\n\n    /* ── Capabilities ── */\n    .caps {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      flex-wrap: wrap;\n    }\n\n    /* ── Reduced motion ── */\n    @media (prefers-reduced-motion: reduce) {\n      .card.active::before { animation: none; display: none; }\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .card { border-radius: 0; }\n    :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .card { border-radius: var(--cg-border-radius-200); }\n    :host([rounded=\"full\"]) .card { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) name: string = 'Agent';\n  @property({ type: String }) override role: string = '';\n  @property({ type: String }) status: AgentStatus = 'idle';\n  @property({ type: String }) task: string = '';\n  @property({ type: Array }) handoffChain: string[] = [];\n  @property({ type: Array }) capabilities: string[] = [];\n\n  private _handlePause(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-agent-pause', { bubbles: true, composed: true, detail: { name: this.name } }));\n  }\n\n  private _handleCancel(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-agent-cancel', { bubbles: true, composed: true, detail: { name: this.name } }));\n  }\n\n  private _currentStepIndex(): number {\n    return this.handoffChain.length > 0 ? this.handoffChain.length - 1 : -1;\n  }\n\n  override render() {\n    const isActive = this.status === 'thinking' || this.status === 'acting';\n    const currentIdx = this._currentStepIndex();\n    const badgeVariant = STATUS_BADGE_MAP[this.status];\n    const showDot = isActive;\n\n    const cardClasses = [\n      'card',\n      isActive ? 'active' : '',\n      this.status === 'error' ? 'error-state' : '',\n      this.status === 'done' ? 'done-state' : '',\n    ].filter(Boolean).join(' ');\n\n    return html`\n      <div class=\"${cardClasses}\" role=\"article\"\n        aria-label=\"${this.name} agent — ${this.status}${this.task ? `: ${this.task}` : ''}\">\n\n        ${isActive ? html`\n          <div class=\"actions\">\n            <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Pause agent\" @click=${this._handlePause}>\n              <cg-icon name=\"pause\" size=\"xs\"></cg-icon>\n            </cg-button>\n            <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Cancel agent\" @click=${this._handleCancel}>\n              <cg-icon name=\"close\" size=\"xs\"></cg-icon>\n            </cg-button>\n          </div>\n        ` : nothing}\n\n        <div class=\"header\">\n          <div class=\"identity\">\n            <div class=\"name\">${this.name}</div>\n            ${this.role ? html`<div class=\"role\">${this.role}</div>` : nothing}\n          </div>\n          <div class=\"header-badge\">\n            <cg-badge variant=${badgeVariant} label=${this.status} size=\"sm\" rounded=\"full\" ?dot=${showDot}></cg-badge>\n          </div>\n        </div>\n\n        ${this.task || this.handoffChain.length > 0 || this.capabilities.length > 0 ? html`\n          <div class=\"body\">\n            ${this.task ? html`<div class=\"task\">${this.task}</div>` : nothing}\n\n            ${this.handoffChain.length > 0 ? html`\n              <div class=\"handoff\" aria-label=\"Handoff: ${this.handoffChain.join(' → ')}\">\n                ${this.handoffChain.map((step, i) => html`\n                  ${i > 0 ? html`<span class=\"handoff-arrow\" aria-hidden=\"true\">→</span>` : nothing}\n                  <span class=\"handoff-step ${i === currentIdx ? 'current' : i < currentIdx ? 'past' : ''}\">${step}</span>\n                `)}\n              </div>\n            ` : nothing}\n\n            ${this.capabilities.length > 0 ? html`\n              <div class=\"caps\" aria-label=\"Capabilities: ${this.capabilities.join(', ')}\">\n                ${this.capabilities.map(c => html`\n                  <cg-chip label=${c} variant=\"default\" size=\"sm\"></cg-chip>\n                `)}\n              </div>\n            ` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["STATUS_BADGE_MAP","AiAgentCard","LitElement","e","isActive","currentIdx","badgeVariant","showDot","cardClasses","html","nothing","step","i","c","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+import { LitElement, nothing } from 'lit';
+/** Optional classification used to pick the completed-step icon. */
+export type StepKind = 'llm' | 'tool' | 'retrieval' | 'decision';
+/** Step definition for ai-agent-steps. */
+export interface AgentStep {
+    label: string;
+    status: 'pending' | 'loading' | 'complete' | 'error';
+    detail?: string;
+    /** Optional duration in ms — rendered right-aligned for completed steps. */
+    duration?: number;
+    /** Optional step kind — drives the icon for completed steps. */
+    kind?: StepKind;
+}
+/**
+ * <ai-agent-steps> — Live agent task feed. Status icons (pending / running /
+ * complete / error), shimmering label on the active step, connecting thread
+ * line under the icons, optional per-step duration and kind (LLM call / tool
+ * call / retrieval / decision). Modeled on LangGraph / Langfuse trace
+ * viewers and the Cursor / Claude Code agent step lists.
+ *
+ * @example
+ * ```html
+ * <ai-agent-steps
+ *   .steps=${[
+ *     { label: 'Search the web',     status: 'complete', duration: 1240, kind: 'tool' },
+ *     { label: 'Read 3 results',     status: 'complete', duration: 880,  kind: 'retrieval' },
+ *     { label: 'Analyse content',    status: 'loading' },
+ *     { label: 'Generate summary',   status: 'pending',  kind: 'llm' },
+ *   ]}
+ * ></ai-agent-steps>
+ * ```
+ *
+ * @fires {CustomEvent<{index: number, step: AgentStep}>} ai-step-click - Completed/errored step activated
+ */
+export declare class AiAgentSteps extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Steps array — each with label, status, optional detail / duration / kind. */
+    steps: AgentStep[];
+    /** Wrap in a card container. */
+    contained: boolean;
+    private _isInteractive;
+    private _formatDuration;
+    private _handleStepClick;
+    private _renderStatusIcon;
+    private _renderKindIcon;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-agent-steps': AiAgentSteps;
+    }
+}
+//# sourceMappingURL=ai-agent-steps.d.ts.map

package/dist/components/ai-agent-steps/ai-agent-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-agent-steps.d.ts","sourceRoot":"","sources":["../../../src/components/ai-agent-steps/ai-agent-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAO,MAAM,KAAK,CAAC;AAI1D,oEAAoE;AACpE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAuMnB;IAEH,gFAAgF;IACrD,KAAK,EAAE,SAAS,EAAE,CAAM;IAEnD,gCAAgC;IACY,SAAS,UAAS;IAI9D,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,eAAe;IAoBd,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

package/dist/components/ai-agent-steps/ai-agent-steps.js

@@ -0,0 +1,297 @@
+import { css as u, LitElement as v, html as n, svg as i, nothing as c } from "lit";
+import { property as p, customElement as h } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? k(e, o) : e, l = t.length - 1, g; l >= 0; l--)
+    (g = t[l]) && (r = (a ? g(e, o, r) : g(r)) || r);
+  return a && r && m(e, o, r), r;
+};
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.steps = [], this.contained = !1;
+  }
+  // ─── Helpers ────────────────────────────────────────────────────────────
+  _isInteractive(t) {
+    return t.status === "complete" || t.status === "error";
+  }
+  _formatDuration(t) {
+    return t < 1e3 ? `${Math.round(t)} ms` : t < 6e4 ? `${(t / 1e3).toFixed(1)} s` : `${Math.floor(t / 6e4)}m ${Math.round(t % 6e4 / 1e3)}s`;
+  }
+  _handleStepClick(t) {
+    const e = this.steps[t];
+    !e || !this._isInteractive(e) || this.dispatchEvent(new CustomEvent("ai-step-click", {
+      detail: { index: t, step: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  // ─── Status / kind icons ────────────────────────────────────────────────
+  _renderStatusIcon(t) {
+    return t.status === "loading" ? n`<div class="spinner"></div>` : t.status === "pending" ? i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="8"/></svg>` : t.status === "error" ? i`<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>` : this._renderKindIcon(t.kind);
+  }
+  _renderKindIcon(t) {
+    switch (t) {
+      case "tool":
+        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a4 4 0 1 1 5 5l-9 9-5 1 1-5z"/></svg>`;
+      case "retrieval":
+        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="13" height="14" rx="2"/><path d="M3 8v11a2 2 0 0 0 2 2h11"/></svg>`;
+      case "decision":
+        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="3" r="2"/><circle cx="6" cy="21" r="2"/><circle cx="18" cy="6" r="2"/><path d="M6 5v14M6 12c6 0 6-6 12-6"/></svg>`;
+      case "llm":
+        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"/></svg>`;
+      default:
+        return i`<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>`;
+    }
+  }
+  render() {
+    return this.steps.length === 0 ? c : n`
+      <div class="steps" role="list" aria-label="Agent steps">
+        ${this.steps.map((t, e) => {
+      const o = this._isInteractive(t), a = `step ${t.status} ${o ? "is-interactive" : ""}`, r = n`
+            <span class="status-icon ${t.status}" aria-hidden="true">
+              ${this._renderStatusIcon(t)}
+            </span>
+            <div class="step-body">
+              <div class="step-label-row">
+                <span class="step-label">${t.label}</span>
+                ${t.duration != null && t.status !== "pending" ? n`
+                  <span class="step-duration">${this._formatDuration(t.duration)}</span>
+                ` : c}
+              </div>
+              ${t.detail ? n`<span class="step-detail">${t.detail}</span>` : c}
+            </div>
+          `;
+      return o ? n`
+              <button
+                class=${a}
+                type="button"
+                role="listitem"
+                style="--step-index: ${e}"
+                @click=${() => this._handleStepClick(e)}
+              >${r}</button>
+            ` : n`
+            <div
+              class=${a}
+              role="listitem"
+              aria-current=${t.status === "loading" ? "step" : c}
+              style="--step-index: ${e}"
+            >${r}</div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+s.styles = [f, b, u`
+    :host { display: block; }
+
+    .steps {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+    }
+
+    /* ── Step row (interactive when clickable) ── */
+    .step {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      background: transparent;
+      border: none;
+      width: 100%;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+      animation-delay: calc(var(--step-index, 0) * 60ms);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* Interactive: only complete + error steps are clickable. */
+    .step.is-interactive { cursor: pointer; }
+    .step.is-interactive:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .step.is-interactive:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    button.step { display: flex; }
+
+    @keyframes stepIn {
+      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-8))); }
+      to   { opacity: 1; transform: translateX(0); }
+    }
+
+    /* ── Status icon ── */
+    .status-icon {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: var(--cg-spacing-1);
+    }
+
+    .status-icon.pending {
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .status-icon.pending svg {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      opacity: 0.4;
+    }
+
+    .status-icon.loading {
+      color: var(--cg-color-action-primary-background-default);
+    }
+    .status-icon.loading .spinner {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: spin 0.8s linear infinite;
+    }
+
+    .status-icon.complete { color: var(--cg-color-status-success-text-default); }
+    .status-icon.complete svg {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+    }
+    @keyframes checkPop {
+      from { transform: scale(0); }
+      50%  { transform: scale(1.2); }
+      to   { transform: scale(1); }
+    }
+
+    .status-icon.error { color: var(--cg-color-status-error-text-default); }
+    .status-icon.error svg {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+    }
+
+    /* ── Step text ── */
+    .step-body {
+      flex: 1;
+      min-width: 0;
+      padding-top: var(--cg-spacing-2);
+    }
+
+    .step-label-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--cg-spacing-8);
+    }
+
+    .step-label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: var(--cg-line-height-snug);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .step-duration {
+      flex-shrink: 0;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* Status-based label colors */
+    .step.pending .step-label  {
+      color: var(--cg-color-surface-container-outlined);
+      opacity: 0.5;
+    }
+    .step.loading .step-label  { color: var(--cg-color-surface-base-text); }
+    .step.complete .step-label { color: var(--cg-color-surface-container-outlined); }
+    .step.error .step-label    { color: var(--cg-color-status-error-text-default); }
+
+    .step-detail {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* Loading step shimmer — accent-text for the highlight is the
+       semantic match (the text is being highlighted, not given a
+       background). */
+    .step.loading .step-label {
+      background: linear-gradient(
+        110deg,
+        var(--cg-color-surface-base-text) 35%,
+        var(--cg-color-accent-text) 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%; }
+    }
+
+    /* ── Connecting line between steps ──
+       Centered under the icon column. Icon left edge sits at
+       padding-left (spacing-16); icon width is spacing-20, so its
+       horizontal center is padding-left + (icon-width / 2) =
+       spacing-16 + spacing-20 / 2. (spacing-10 does NOT exist in the
+       scale — building the half-icon math via calc with real tokens.)
+       Top: padding-top (12) + icon margin-top (1) + icon-height (20)
+       + 2 px gap before the line begins. */
+    .step:not(:last-child) { position: relative; }
+    .step:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      left: calc(var(--cg-spacing-16) + var(--cg-spacing-20) / 2);
+      top: calc(var(--cg-spacing-12) + var(--cg-spacing-1) + var(--cg-spacing-20) + var(--cg-spacing-2));
+      bottom: calc(-1 * var(--cg-spacing-2));
+      width: var(--cg-border-width-50);
+      background: var(--cg-color-surface-cards-divider);
+      transform: translateX(calc(-1 * var(--cg-border-width-50) / 2));
+    }
+    .step.complete:not(:last-child)::after {
+      background: var(--cg-color-status-success-text-default);
+      opacity: 0.3;
+    }
+
+    /* ── Contained variant ── */
+    :host([contained]) {
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      background: var(--cg-color-surface-cards-background);
+      padding: var(--cg-spacing-16);
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    @media (prefers-reduced-motion: reduce) {
+      .step { animation: none; }
+      .status-icon.loading .spinner { animation: none; }
+      .status-icon.complete svg { animation: none; }
+      .step.loading .step-label {
+        animation: none;
+        -webkit-text-fill-color: currentColor;
+      }
+    }
+  `];
+d([
+  p({ type: Array })
+], s.prototype, "steps", 2);
+d([
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "contained", 2);
+s = d([
+  h("ai-agent-steps")
+], s);
+export {
+  s as AiAgentSteps
+};
+//# sourceMappingURL=ai-agent-steps.js.map