@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-test-runner/ai-test-runner.js

@@ -1,56 +1,30 @@
-import { css as x, LitElement as y, svg as p, html as s, nothing as i } from "lit";
-import { property as m, state as b, customElement as w } from "lit/decorators.js";
-import { h as _, r as $, f as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as p, LitElement as v, svg as g, html as e, nothing as i } from "lit";
+import { property as u, state as h, customElement as f } from "lit/decorators.js";
+import { h as m, r as x, c as b, f as w } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-card/cg-card.js";
 import "../cg-text/cg-text.js";
 import "../cg-button/cg-button.js";
-import "../cg-spinner/cg-spinner.js";
-var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (t, a, r, o) => {
-  for (var n = o > 1 ? void 0 : o ? z(a, r) : a, l = t.length - 1, g; l >= 0; l--)
-    (g = t[l]) && (n = (o ? g(a, r, n) : g(n)) || n);
-  return o && n && C(a, r, n), n;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (t, a, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? _(a, o) : a, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (r = (s ? d(a, o, r) : d(r)) || r);
+  return s && r && y(a, o, r), r;
 };
-let c = class extends y {
+let n = class extends v {
   constructor() {
-    super(...arguments), this.tests = [], this.title = "Test Results", this._expanded = /* @__PURE__ */ new Set(), this._filter = "all";
-  }
-  // ─── Derived counts ─────────────────────────────────────────────────────
-  _countByStatus(t) {
-    return this.tests.filter((a) => a.status === t).length;
+    super(...arguments), this.tests = [], this.title = "Test Results", this._expanded = /* @__PURE__ */ new Set();
   }
   get _passCount() {
-    return this._countByStatus("pass");
+    return this.tests.filter((t) => t.status === "pass").length;
   }
   get _failCount() {
-    return this._countByStatus("fail");
+    return this.tests.filter((t) => t.status === "fail").length;
   }
   get _runningCount() {
-    return this._countByStatus("running");
+    return this.tests.filter((t) => t.status === "running").length;
   }
   get _pendingCount() {
-    return this._countByStatus("pending");
-  }
-  /** Sum of test.duration (skipping undefined). */
-  get _totalDuration() {
-    return this.tests.reduce((t, a) => t + (a.duration ?? 0), 0);
-  }
-  /** Average of defined `score` values; null if no scores present. */
-  get _avgScore() {
-    const t = this.tests.filter((r) => typeof r.score == "number");
-    if (!t.length) return null;
-    const a = t.reduce((r, o) => r + (o.score ?? 0), 0);
-    return Math.round(a / t.length);
-  }
-  _formatDuration(t) {
-    if (t < 1e3) return `${Math.round(t)} ms`;
-    if (t < 6e4) return `${(t / 1e3).toFixed(1)} s`;
-    const a = Math.floor(t / 6e4), r = Math.round(t % 6e4 / 1e3);
-    return `${a}m ${r}s`;
+    return this.tests.filter((t) => t.status === "pending").length;
   }
-  get _visibleTests() {
-    return this.tests.map((t, a) => ({ test: t, index: a })).filter(({ test: t }) => this._filter === "all" || t.status === this._filter);
-  }
-  // ─── Handlers ───────────────────────────────────────────────────────────
   _toggle(t) {
     const a = new Set(this._expanded);
     a.has(t) ? a.delete(t) : a.add(t), this._expanded = a, this.dispatchEvent(new CustomEvent("ai-test-click", {
@@ -66,24 +40,17 @@ let c = class extends y {
       detail: { tests: this.tests.map((t) => t.name) }
     }));
   }
-  // ─── Renderers ──────────────────────────────────────────────────────────
   _statusIcon(t) {
-    return t === "pass" ? s`<span class="status-icon pass" aria-label="Passed">${p`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`}</span>` : t === "fail" ? s`<span class="status-icon fail" aria-label="Failed">${p`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`}</span>` : t === "running" ? s`<span class="status-icon running" aria-label="Running"><cg-spinner size="sm"></cg-spinner></span>` : s`<span class="status-icon pending" aria-label="Pending">${p`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>`}</span>`;
+    return t === "pass" ? e`<span class="status-icon pass" aria-label="Passed">${g`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`}</span>` : t === "fail" ? e`<span class="status-icon fail" aria-label="Failed">${g`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`}</span>` : t === "running" ? e`<span class="spinner" role="status" aria-label="Running"></span>` : e`<span class="status-icon pending" aria-label="Pending">${g`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>`}</span>`;
   }
   render() {
-    const t = this.tests.length || 1, a = this._passCount / t * 100, r = this._failCount / t * 100, o = this._totalDuration, n = this._avgScore, l = this._visibleTests, v = [
-      { id: "all", label: "All", count: this.tests.length },
-      { id: "pass", label: "Passed", count: this._passCount },
-      { id: "fail", label: "Failed", count: this._failCount },
-      { id: "running", label: "Running", count: this._runningCount },
-      { id: "pending", label: "Pending", count: this._pendingCount }
-    ].filter((e) => e.id === "all" || e.count > 0);
-    return s`
-      <cg-card variant="elevated" padding="md" rounded="lg">
+    const t = this.tests.length || 1, a = this._passCount / t * 100, o = this._failCount / t * 100;
+    return e`
+      <cg-card variant="outlined" padding="md" rounded="lg">
         <div slot="header" class="header-row">
           <cg-text as="h3" size="sm" weight="semibold">${this.title}</cg-text>
           <cg-button variant="primary" size="sm" @click=${this._runAll} aria-label="Run all tests">
-            Run all
+            Run All
           </cg-button>
         </div>
 
@@ -96,111 +63,72 @@ let c = class extends y {
             <span class="dot dot-fail" aria-hidden="true"></span>
             <cg-text size="xs" color="muted">${this._failCount} failed</cg-text>
           </span>
-          ${this._runningCount ? s`
+          ${this._runningCount ? e`
             <span class="summary-item">
               <span class="dot dot-running" aria-hidden="true"></span>
               <cg-text size="xs" color="muted">${this._runningCount} running</cg-text>
             </span>
           ` : i}
-          ${this._pendingCount ? s`
+          ${this._pendingCount ? e`
             <span class="summary-item">
               <span class="dot dot-pending" aria-hidden="true"></span>
               <cg-text size="xs" color="muted">${this._pendingCount} pending</cg-text>
             </span>
           ` : i}
-          <span class="summary-spacer"></span>
-          ${n != null ? s`
-            <span class="summary-item">
-              <cg-text size="xs" color="muted">Avg score:</cg-text>
-              <cg-text size="xs" weight="semibold">${n}%</cg-text>
-            </span>
-          ` : i}
-          ${o > 0 ? s`
-            <span class="summary-item">
-              <cg-text size="xs" color="muted">${this._formatDuration(o)}</cg-text>
-            </span>
-          ` : i}
         </div>
 
         <div class="progress-bar" aria-hidden="true">
           <div class="progress-pass" style="width:${a}%"></div>
-          <div class="progress-fail" style="width:${r}%"></div>
+          <div class="progress-fail" style="width:${o}%"></div>
         </div>
 
-        ${this.tests.length > 1 && v.length > 1 ? s`
-          <div class="filter-chips">
-            ${v.map((e) => s`
+        <div class="test-list" role="list" aria-label="Tests">
+          ${this.tests.map((s, r) => e`
+            <div class="test-item" role="listitem">
               <button
-                class="filter-chip ${this._filter === e.id ? "active" : ""}"
-                type="button"
-                @click=${() => {
-      this._filter = e.id;
-    }}
-                aria-pressed=${this._filter === e.id ? "true" : "false"}
+                class="test-header"
+                @click=${() => this._toggle(r)}
+                aria-expanded=${this._expanded.has(r)}
               >
-                <span>${e.label}</span>
-                <span class="filter-count">${e.count}</span>
+                ${this._statusIcon(s.status)}
+                <cg-text class="test-name" size="sm">${s.name}</cg-text>
+                <div class="test-meta">
+                  ${s.score != null ? e`<cg-text size="xs" weight="semibold">${s.score}%</cg-text>` : i}
+                  ${s.duration != null ? e`<cg-text size="xs" color="muted">${s.duration}ms</cg-text>` : i}
+                </div>
               </button>
-            `)}
-          </div>
-        ` : i}
-
-        <div class="test-list" role="list" aria-label="Tests">
-          ${l.length === 0 ? s`
-            <div class="empty">No tests match the current filter.</div>
-          ` : l.map(({ test: e, index: h }) => {
-      const u = !!(e.expected || e.actual), f = this._expanded.has(h);
-      return s`
-              <div class="test-item ${e.status === "running" ? "running-row" : ""}" role="listitem">
-                <button
-                  class="test-header ${u ? "expandable" : ""}"
-                  type="button"
-                  @click=${() => {
-        u && this._toggle(h);
-      }}
-                  aria-expanded=${u ? f ? "true" : "false" : i}
-                >
-                  ${this._statusIcon(e.status)}
-                  <cg-text class="test-name" size="sm">${e.name}</cg-text>
-                  <div class="test-meta">
-                    ${e.score != null ? s`<cg-text size="xs" weight="semibold">${e.score}%</cg-text>` : i}
-                    ${e.duration != null ? s`<cg-text size="xs" color="muted">${this._formatDuration(e.duration)}</cg-text>` : i}
-                  </div>
-                </button>
-                ${f && u ? s`
-                  <div class="test-details">
-                    ${e.expected ? s`
-                      <div class="detail-row">
-                        <cg-text class="detail-label" size="xs" color="muted">Expected</cg-text>
-                        <span class="detail-value detail-expected">${e.expected}</span>
-                      </div>
-                    ` : i}
-                    ${e.actual ? s`
-                      <div class="detail-row">
-                        <cg-text class="detail-label" size="xs" color="muted">Actual</cg-text>
-                        <span class="detail-value detail-actual">${e.actual}</span>
-                      </div>
-                    ` : i}
-                  </div>
-                ` : i}
-              </div>
-            `;
-    })}
+              ${this._expanded.has(r) && (s.expected || s.actual) ? e`
+                <div class="test-details">
+                  ${s.expected ? e`
+                    <div class="detail-row">
+                      <cg-text class="detail-label" size="xs" color="muted">Expected:</cg-text>
+                      <cg-text size="xs" class="detail-expected">${s.expected}</cg-text>
+                    </div>
+                  ` : i}
+                  ${s.actual ? e`
+                    <div class="detail-row">
+                      <cg-text class="detail-label" size="xs" color="muted">Actual:</cg-text>
+                      <cg-text size="xs" class="detail-actual">${s.actual}</cg-text>
+                    </div>
+                  ` : i}
+                </div>
+              ` : i}
+            </div>
+          `)}
         </div>
       </cg-card>
     `;
   }
 };
-c.styles = [_, $, k, x`
+n.styles = [m, x, b, w, p`
     :host {
       display: block;
-      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     :host([hidden]) { display: none; }
 
     cg-card { display: block; }
 
-    /* ── Header row ── */
     .header-row {
       display: flex;
       align-items: center;
@@ -209,20 +137,15 @@ c.styles = [_, $, k, x`
       width: 100%;
     }
 
-    /* ── Summary bar ── */
     .summary-bar {
       display: flex;
-      flex-wrap: wrap;
       gap: var(--cg-spacing-16);
       margin-bottom: var(--cg-spacing-8);
-      align-items: center;
     }
-    .summary-spacer { flex: 1; }
     .summary-item {
       display: inline-flex;
       align-items: center;
       gap: var(--cg-spacing-6);
-      font-variant-numeric: tabular-nums;
     }
     .dot {
       width: var(--cg-spacing-8);
@@ -234,12 +157,10 @@ c.styles = [_, $, k, x`
     .dot-running { background: var(--cg-color-status-warning-text-default); }
     .dot-pending { background: var(--cg-color-surface-container-outlined); }
 
-    /* Combined pass/fail progress bar — track uses divider semantic, not a
-       border-color token. */
     .progress-bar {
-      height: var(--cg-spacing-6);
+      height: var(--cg-spacing-4);
       border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-surface-cards-divider);
+      background: var(--cg-color-surface-cards-border);
       margin-bottom: var(--cg-spacing-12);
       overflow: hidden;
       display: flex;
@@ -247,72 +168,27 @@ c.styles = [_, $, k, x`
     .progress-pass {
       background: var(--cg-color-status-success-text-default);
       height: 100%;
-      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
     .progress-fail {
       background: var(--cg-color-status-error-text-default);
       height: 100%;
-      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);
-    }
-
-    /* ── Filter chips ── */
-    .filter-chips {
-      display: flex;
-      gap: var(--cg-spacing-6);
-      flex-wrap: wrap;
-      margin-bottom: var(--cg-spacing-12);
-    }
-    .filter-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--cg-spacing-4);
-      padding: var(--cg-spacing-2) var(--cg-spacing-8);
-      border-radius: var(--cg-border-radius-full);
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      background: transparent;
-      color: var(--cg-color-input-text-placeholder);
-      font-size: var(--cg-font-size-xs);
-      font-weight: var(--cg-font-weight-medium);
-      font-family: inherit;
-      cursor: pointer;
-      transition:
-        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
-    }
-    .filter-chip:hover {
-      border-color: var(--cg-color-surface-cards-border-strong);
-      color: var(--cg-color-surface-base-text);
-    }
-    .filter-chip:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
-    .filter-chip.active {
-      background: var(--cg-color-surface-cards-emphasis);
-      border-color: var(--cg-color-surface-cards-border-strong);
-      color: var(--cg-color-surface-base-text);
-    }
-    .filter-count {
-      font-variant-numeric: tabular-nums;
-      color: var(--cg-color-input-text-placeholder);
-    }
-    .filter-chip.active .filter-count { color: var(--cg-color-surface-base-text); }
 
-    /* ── Test list ──
-       Items render as a single grouped table inside the card, divided
-       by hairlines. Per-item border-radius is omitted so every row's
-       hover/focus bg fills consistently corner-to-corner — the previous
-       version rounded only the first row, which made the first hover
-       look different from the rest. The parent <cg-card> handles the
-       outer rounding. */
     .test-list {
       display: flex;
       flex-direction: column;
+      gap: 0;
     }
 
+    .test-item {
+      border-radius: var(--cg-border-radius-100);
+      overflow: hidden;
+    }
     .test-item + .test-item {
-      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: 0;
     }
 
     .test-header {
@@ -320,6 +196,7 @@ c.styles = [_, $, k, x`
       align-items: center;
       gap: var(--cg-spacing-12);
       padding: var(--cg-spacing-12);
+      cursor: pointer;
       background: transparent;
       border: none;
       color: inherit;
@@ -327,16 +204,14 @@ c.styles = [_, $, k, x`
       font-family: inherit;
       text-align: left;
       min-height: var(--cg-spacing-48);
-      cursor: default;
-      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    /* Only rows that have details to reveal get the clickable affordance.
-       Running/pending tests have nothing to expand, so they shouldn't
-       suggest interaction. */
-    .test-header.expandable { cursor: pointer; }
-    .test-header.expandable:hover {
-      background: var(--cg-color-action-tertiary-background-hover);
+    .test-header:hover {
+      background: var(--cg-color-action-secondary-background-hover);
     }
+    .test-header:active { transform: scale(var(--cg-interaction-press-scale)); }
     .test-header:focus-visible {
       outline: none;
       box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
@@ -347,23 +222,14 @@ c.styles = [_, $, k, x`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: var(--cg-icon-size-150);
-      height: var(--cg-icon-size-150);
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
     }
     .status-icon svg { width: 100%; height: 100%; }
     .status-icon.pass    { color: var(--cg-color-status-success-text-default); }
     .status-icon.fail    { color: var(--cg-color-status-error-text-default); }
     .status-icon.pending { color: var(--cg-color-surface-container-outlined); }
 
-    /* Subtle pulse on the running spinner host so the row visibly "breathes". */
-    .running-row .status-icon {
-      animation: cg-test-pulse 1.6s var(--cg-transition-easing-ease-in-out) infinite;
-    }
-    @keyframes cg-test-pulse {
-      0%, 100% { opacity: 1; }
-      50%      { opacity: 0.55; }
-    }
-
     .test-name {
       flex: 1;
       min-width: 0;
@@ -380,69 +246,46 @@ c.styles = [_, $, k, x`
       font-variant-numeric: tabular-nums;
     }
 
-    /* ── Expanded details ── */
     .test-details {
-      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-16) var(--cg-spacing-32);
-      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-32);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       font-family: var(--cg-font-family-mono);
       background: var(--cg-color-code-background);
-      animation: cg-test-detail-expand var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
-    }
-    @keyframes cg-test-detail-expand {
-      from { opacity: 0; transform: translateY(-4px); }
-      to   { opacity: 1; transform: translateY(0); }
     }
     .detail-row {
       display: flex;
-      gap: var(--cg-spacing-12);
-      padding: var(--cg-spacing-4) 0;
-      align-items: flex-start;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-4);
     }
     .detail-label {
       min-width: var(--cg-spacing-64);
-      flex-shrink: 0;
-      text-transform: uppercase;
-      letter-spacing: var(--cg-letter-spacing-wide);
-    }
-    .detail-value {
-      flex: 1;
-      word-break: break-word;
-      white-space: pre-wrap;
-    }
-    .detail-expected {
-      color: var(--cg-color-status-success-text-default);
-      border-left: var(--cg-spacing-2) solid var(--cg-color-status-success-text-default);
-      padding-left: var(--cg-spacing-8);
-    }
-    .detail-actual {
-      color: var(--cg-color-status-error-text-default);
-      border-left: var(--cg-spacing-2) solid var(--cg-color-status-error-text-default);
-      padding-left: var(--cg-spacing-8);
     }
+    .detail-expected { color: var(--cg-color-status-success-text-default); }
+    .detail-actual   { color: var(--cg-color-status-error-text-default); }
 
-    .empty {
-      padding: var(--cg-spacing-32);
-      text-align: center;
-      color: var(--cg-color-input-text-placeholder);
-      font-size: var(--cg-font-size-xs);
+    .spinner {
+      display: inline-block;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-color-status-warning-text-default);
+      border-top-color: transparent;
+      border-radius: var(--cg-border-radius-full);
+      animation: spin var(--cg-transition-duration-slow) linear infinite;
     }
   `];
-d([
-  m({ type: Array })
-], c.prototype, "tests", 2);
-d([
-  m({ type: String })
-], c.prototype, "title", 2);
-d([
-  b()
-], c.prototype, "_expanded", 2);
-d([
-  b()
-], c.prototype, "_filter", 2);
-c = d([
-  w("ai-test-runner")
-], c);
+c([
+  u({ type: Array })
+], n.prototype, "tests", 2);
+c([
+  u({ type: String })
+], n.prototype, "title", 2);
+c([
+  h()
+], n.prototype, "_expanded", 2);
+n = c([
+  f("ai-test-runner")
+], n);
 export {
-  c as AiTestRunner
+  n as AiTestRunner
 };
 //# sourceMappingURL=ai-test-runner.js.map

package/dist/components/ai-test-runner/ai-test-runner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-test-runner.js","sources":["../../../src/components/ai-test-runner/ai-test-runner.ts"],"sourcesContent":["/**\n * @element ai-test-runner\n * AI evaluation test results panel built from design-system primitives\n * (cg-card, cg-text, cg-button, cg-spinner). Status icons (pass / fail /\n * running / pending), per-test duration + score, summary bar with combined\n * pass/fail progress, total duration + avg score, status filter chips, and\n * a \"Run All\" CTA. Modeled on the Vitest / Playwright UI mode.\n *\n * @example\n * ```html\n * <ai-test-runner title=\"Eval Suite\" .tests=${[\n *   { name: 'Summarization accuracy', status: 'pass', duration: 340, score: 92 },\n *   { name: 'Hallucination check', status: 'fail', duration: 210,\n *     expected: 'No hallucinations', actual: 'Found 2 claims' }\n * ]}></ai-test-runner>\n * ```\n *\n * @prop {TestEntry[]} tests - Test entries\n * @prop {string} title - Panel header title (default 'Test Results')\n *\n * @fires {CustomEvent<{tests: string[]}>} ai-test-run - \"Run All\" clicked\n * @fires {CustomEvent<{index: number, test: TestEntry}>} ai-test-click - Test row toggled\n */\nimport { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-spinner/cg-spinner.js';\n\nexport interface TestEntry {\n  name: string;\n  status: 'pass' | 'fail' | 'running' | 'pending';\n  duration?: number;\n  expected?: string;\n  actual?: string;\n  score?: number;\n}\n\ntype FilterId = 'all' | 'pass' | 'fail' | 'running' | 'pending';\n\n@customElement('ai-test-runner')\nexport class AiTestRunner extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    cg-card { display: block; }\n\n    /* ── Header row ── */\n    .header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n\n    /* ── Summary bar ── */\n    .summary-bar {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-8);\n      align-items: center;\n    }\n    .summary-spacer { flex: 1; }\n    .summary-item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      font-variant-numeric: tabular-nums;\n    }\n    .dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .dot-pass    { background: var(--cg-color-status-success-text-default); }\n    .dot-fail    { background: var(--cg-color-status-error-text-default); }\n    .dot-running { background: var(--cg-color-status-warning-text-default); }\n    .dot-pending { background: var(--cg-color-surface-container-outlined); }\n\n    /* Combined pass/fail progress bar — track uses divider semantic, not a\n       border-color token. */\n    .progress-bar {\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-divider);\n      margin-bottom: var(--cg-spacing-12);\n      overflow: hidden;\n      display: flex;\n    }\n    .progress-pass {\n      background: var(--cg-color-status-success-text-default);\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n    .progress-fail {\n      background: var(--cg-color-status-error-text-default);\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    /* ── Filter chips ── */\n    .filter-chips {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      flex-wrap: wrap;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .filter-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      font-family: inherit;\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .filter-chip:hover {\n      border-color: var(--cg-color-surface-cards-border-strong);\n      color: var(--cg-color-surface-base-text);\n    }\n    .filter-chip:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .filter-chip.active {\n      background: var(--cg-color-surface-cards-emphasis);\n      border-color: var(--cg-color-surface-cards-border-strong);\n      color: var(--cg-color-surface-base-text);\n    }\n    .filter-count {\n      font-variant-numeric: tabular-nums;\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .filter-chip.active .filter-count { color: var(--cg-color-surface-base-text); }\n\n    /* ── Test list ──\n       Items render as a single grouped table inside the card, divided\n       by hairlines. Per-item border-radius is omitted so every row's\n       hover/focus bg fills consistently corner-to-corner — the previous\n       version rounded only the first row, which made the first hover\n       look different from the rest. The parent <cg-card> handles the\n       outer rounding. */\n    .test-list {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .test-item + .test-item {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    .test-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      color: inherit;\n      width: 100%;\n      font-family: inherit;\n      text-align: left;\n      min-height: var(--cg-spacing-48);\n      cursor: default;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Only rows that have details to reveal get the clickable affordance.\n       Running/pending tests have nothing to expand, so they shouldn't\n       suggest interaction. */\n    .test-header.expandable { cursor: pointer; }\n    .test-header.expandable:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .test-header:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .status-icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-icon-size-150);\n      height: var(--cg-icon-size-150);\n    }\n    .status-icon svg { width: 100%; height: 100%; }\n    .status-icon.pass    { color: var(--cg-color-status-success-text-default); }\n    .status-icon.fail    { color: var(--cg-color-status-error-text-default); }\n    .status-icon.pending { color: var(--cg-color-surface-container-outlined); }\n\n    /* Subtle pulse on the running spinner host so the row visibly \"breathes\". */\n    .running-row .status-icon {\n      animation: cg-test-pulse 1.6s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    @keyframes cg-test-pulse {\n      0%, 100% { opacity: 1; }\n      50%      { opacity: 0.55; }\n    }\n\n    .test-name {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .test-meta {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Expanded details ── */\n    .test-details {\n      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-16) var(--cg-spacing-32);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      font-family: var(--cg-font-family-mono);\n      background: var(--cg-color-code-background);\n      animation: cg-test-detail-expand var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    @keyframes cg-test-detail-expand {\n      from { opacity: 0; transform: translateY(-4px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n    .detail-row {\n      display: flex;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-4) 0;\n      align-items: flex-start;\n    }\n    .detail-label {\n      min-width: var(--cg-spacing-64);\n      flex-shrink: 0;\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .detail-value {\n      flex: 1;\n      word-break: break-word;\n      white-space: pre-wrap;\n    }\n    .detail-expected {\n      color: var(--cg-color-status-success-text-default);\n      border-left: var(--cg-spacing-2) solid var(--cg-color-status-success-text-default);\n      padding-left: var(--cg-spacing-8);\n    }\n    .detail-actual {\n      color: var(--cg-color-status-error-text-default);\n      border-left: var(--cg-spacing-2) solid var(--cg-color-status-error-text-default);\n      padding-left: var(--cg-spacing-8);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-32);\n      text-align: center;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n    }\n  `];\n\n  @property({ type: Array }) tests: TestEntry[] = [];\n  @property({ type: String }) override title = 'Test Results';\n\n  @state() private _expanded = new Set<number>();\n  @state() private _filter: FilterId = 'all';\n\n  // ─── Derived counts ─────────────────────────────────────────────────────\n\n  private _countByStatus(status: TestEntry['status']): number {\n    return this.tests.filter(t => t.status === status).length;\n  }\n  private get _passCount() { return this._countByStatus('pass'); }\n  private get _failCount() { return this._countByStatus('fail'); }\n  private get _runningCount() { return this._countByStatus('running'); }\n  private get _pendingCount() { return this._countByStatus('pending'); }\n\n  /** Sum of test.duration (skipping undefined). */\n  private get _totalDuration(): number {\n    return this.tests.reduce((acc, t) => acc + (t.duration ?? 0), 0);\n  }\n\n  /** Average of defined `score` values; null if no scores present. */\n  private get _avgScore(): number | null {\n    const scored = this.tests.filter(t => typeof t.score === 'number');\n    if (!scored.length) return null;\n    const sum = scored.reduce((acc, t) => acc + (t.score ?? 0), 0);\n    return Math.round(sum / scored.length);\n  }\n\n  private _formatDuration(ms: number): string {\n    if (ms < 1000) return `${Math.round(ms)} ms`;\n    if (ms < 60_000) return `${(ms / 1000).toFixed(1)} s`;\n    const m = Math.floor(ms / 60_000);\n    const s = Math.round((ms % 60_000) / 1000);\n    return `${m}m ${s}s`;\n  }\n\n  private get _visibleTests(): Array<{ test: TestEntry; index: number }> {\n    return this.tests\n      .map((test, index) => ({ test, index }))\n      .filter(({ test }) => this._filter === 'all' || test.status === this._filter);\n  }\n\n  // ─── Handlers ───────────────────────────────────────────────────────────\n\n  private _toggle(idx: number): void {\n    const next = new Set(this._expanded);\n    if (next.has(idx)) next.delete(idx); else next.add(idx);\n    this._expanded = next;\n    this.dispatchEvent(new CustomEvent('ai-test-click', {\n      bubbles: true, composed: true,\n      detail: { index: idx, test: this.tests[idx] },\n    }));\n  }\n\n  private _runAll(): void {\n    this.dispatchEvent(new CustomEvent('ai-test-run', {\n      bubbles: true, composed: true,\n      detail: { tests: this.tests.map(t => t.name) },\n    }));\n  }\n\n  // ─── Renderers ──────────────────────────────────────────────────────────\n\n  private _statusIcon(status: TestEntry['status']) {\n    if (status === 'pass') {\n      return html`<span class=\"status-icon pass\" aria-label=\"Passed\">${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>`}</span>`;\n    }\n    if (status === 'fail') {\n      return html`<span class=\"status-icon fail\" aria-label=\"Failed\">${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`}</span>`;\n    }\n    if (status === 'running') {\n      return html`<span class=\"status-icon running\" aria-label=\"Running\"><cg-spinner size=\"sm\"></cg-spinner></span>`;\n    }\n    return html`<span class=\"status-icon pending\" aria-label=\"Pending\">${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>`}</span>`;\n  }\n\n  override render() {\n    const total = this.tests.length || 1;\n    const passP = (this._passCount / total) * 100;\n    const failP = (this._failCount / total) * 100;\n    const totalDur = this._totalDuration;\n    const avgScore = this._avgScore;\n    const visible = this._visibleTests;\n\n    const allFilters: Array<{ id: FilterId; label: string; count: number }> = [\n      { id: 'all',     label: 'All',     count: this.tests.length },\n      { id: 'pass',    label: 'Passed',  count: this._passCount },\n      { id: 'fail',    label: 'Failed',  count: this._failCount },\n      { id: 'running', label: 'Running', count: this._runningCount },\n      { id: 'pending', label: 'Pending', count: this._pendingCount },\n    ];\n    const FILTERS = allFilters.filter(f => f.id === 'all' || f.count > 0);\n\n    return html`\n      <cg-card variant=\"elevated\" padding=\"md\" rounded=\"lg\">\n        <div slot=\"header\" class=\"header-row\">\n          <cg-text as=\"h3\" size=\"sm\" weight=\"semibold\">${this.title}</cg-text>\n          <cg-button variant=\"primary\" size=\"sm\" @click=${this._runAll} aria-label=\"Run all tests\">\n            Run all\n          </cg-button>\n        </div>\n\n        <div class=\"summary-bar\" role=\"status\" aria-label=\"Test summary\">\n          <span class=\"summary-item\">\n            <span class=\"dot dot-pass\" aria-hidden=\"true\"></span>\n            <cg-text size=\"xs\" color=\"muted\">${this._passCount} passed</cg-text>\n          </span>\n          <span class=\"summary-item\">\n            <span class=\"dot dot-fail\" aria-hidden=\"true\"></span>\n            <cg-text size=\"xs\" color=\"muted\">${this._failCount} failed</cg-text>\n          </span>\n          ${this._runningCount ? html`\n            <span class=\"summary-item\">\n              <span class=\"dot dot-running\" aria-hidden=\"true\"></span>\n              <cg-text size=\"xs\" color=\"muted\">${this._runningCount} running</cg-text>\n            </span>\n          ` : nothing}\n          ${this._pendingCount ? html`\n            <span class=\"summary-item\">\n              <span class=\"dot dot-pending\" aria-hidden=\"true\"></span>\n              <cg-text size=\"xs\" color=\"muted\">${this._pendingCount} pending</cg-text>\n            </span>\n          ` : nothing}\n          <span class=\"summary-spacer\"></span>\n          ${avgScore != null ? html`\n            <span class=\"summary-item\">\n              <cg-text size=\"xs\" color=\"muted\">Avg score:</cg-text>\n              <cg-text size=\"xs\" weight=\"semibold\">${avgScore}%</cg-text>\n            </span>\n          ` : nothing}\n          ${totalDur > 0 ? html`\n            <span class=\"summary-item\">\n              <cg-text size=\"xs\" color=\"muted\">${this._formatDuration(totalDur)}</cg-text>\n            </span>\n          ` : nothing}\n        </div>\n\n        <div class=\"progress-bar\" aria-hidden=\"true\">\n          <div class=\"progress-pass\" style=\"width:${passP}%\"></div>\n          <div class=\"progress-fail\" style=\"width:${failP}%\"></div>\n        </div>\n\n        ${this.tests.length > 1 && FILTERS.length > 1 ? html`\n          <div class=\"filter-chips\">\n            ${FILTERS.map(f => html`\n              <button\n                class=\"filter-chip ${this._filter === f.id ? 'active' : ''}\"\n                type=\"button\"\n                @click=${() => { this._filter = f.id; }}\n                aria-pressed=${this._filter === f.id ? 'true' : 'false'}\n              >\n                <span>${f.label}</span>\n                <span class=\"filter-count\">${f.count}</span>\n              </button>\n            `)}\n          </div>\n        ` : nothing}\n\n        <div class=\"test-list\" role=\"list\" aria-label=\"Tests\">\n          ${visible.length === 0 ? html`\n            <div class=\"empty\">No tests match the current filter.</div>\n          ` : visible.map(({ test, index }) => {\n            const expandable = !!(test.expected || test.actual);\n            const expanded = this._expanded.has(index);\n            return html`\n              <div class=\"test-item ${test.status === 'running' ? 'running-row' : ''}\" role=\"listitem\">\n                <button\n                  class=\"test-header ${expandable ? 'expandable' : ''}\"\n                  type=\"button\"\n                  @click=${() => { if (expandable) this._toggle(index); }}\n                  aria-expanded=${expandable ? (expanded ? 'true' : 'false') : nothing}\n                >\n                  ${this._statusIcon(test.status)}\n                  <cg-text class=\"test-name\" size=\"sm\">${test.name}</cg-text>\n                  <div class=\"test-meta\">\n                    ${test.score != null ? html`<cg-text size=\"xs\" weight=\"semibold\">${test.score}%</cg-text>` : nothing}\n                    ${test.duration != null ? html`<cg-text size=\"xs\" color=\"muted\">${this._formatDuration(test.duration)}</cg-text>` : nothing}\n                  </div>\n                </button>\n                ${expanded && expandable ? html`\n                  <div class=\"test-details\">\n                    ${test.expected ? html`\n                      <div class=\"detail-row\">\n                        <cg-text class=\"detail-label\" size=\"xs\" color=\"muted\">Expected</cg-text>\n                        <span class=\"detail-value detail-expected\">${test.expected}</span>\n                      </div>\n                    ` : nothing}\n                    ${test.actual ? html`\n                      <div class=\"detail-row\">\n                        <cg-text class=\"detail-label\" size=\"xs\" color=\"muted\">Actual</cg-text>\n                        <span class=\"detail-value detail-actual\">${test.actual}</span>\n                      </div>\n                    ` : nothing}\n                  </div>\n                ` : nothing}\n              </div>\n            `;\n          })}\n        </div>\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-test-runner': AiTestRunner;\n  }\n}\n"],"names":["AiTestRunner","LitElement","status","t","acc","scored","sum","ms","m","s","test","index","idx","next","html","svg","total","passP","failP","totalDur","avgScore","visible","FILTERS","f","nothing","expandable","expanded","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-test-runner.js","sources":["../../../src/components/ai-test-runner/ai-test-runner.ts"],"sourcesContent":["/**\n * @element ai-test-runner\n * AI evaluation test results panel built from design-system primitives\n * (cg-card, cg-text, cg-button). Pass/fail/running/pending status icons,\n * duration, optional scores, expandable expected/actual details, summary bar,\n * combined pass/fail progress bar, and a \"Run All\" CTA.\n *\n * @example\n * ```html\n * <ai-test-runner title=\"Eval Suite\" .tests=${[\n *   { name: 'Summarization accuracy', status: 'pass', duration: 340, score: 92 },\n *   { name: 'Hallucination check', status: 'fail', duration: 210,\n *     expected: 'No hallucinations', actual: 'Found 2 claims' }\n * ]}></ai-test-runner>\n * ```\n *\n * @prop {TestEntry[]} tests - Test entries\n * @prop {string} title - Panel header title (default 'Test Results')\n *\n * @fires {CustomEvent<{tests: string[]}>} ai-test-run - \"Run All\" clicked\n * @fires {CustomEvent<{index: number, test: TestEntry}>} ai-test-click - Test row toggled\n */\nimport { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, spinKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\n\nexport interface TestEntry {\n  name: string;\n  status: 'pass' | 'fail' | 'running' | 'pending';\n  duration?: number;\n  expected?: string;\n  actual?: string;\n  score?: number;\n}\n\n@customElement('ai-test-runner')\nexport class AiTestRunner extends LitElement {\n  static override styles = [hostBlock, reducedMotion, spinKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    cg-card { display: block; }\n\n    .header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n\n    .summary-bar {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .summary-item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n    .dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .dot-pass    { background: var(--cg-color-status-success-text-default); }\n    .dot-fail    { background: var(--cg-color-status-error-text-default); }\n    .dot-running { background: var(--cg-color-status-warning-text-default); }\n    .dot-pending { background: var(--cg-color-surface-container-outlined); }\n\n    .progress-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-bottom: var(--cg-spacing-12);\n      overflow: hidden;\n      display: flex;\n    }\n    .progress-pass {\n      background: var(--cg-color-status-success-text-default);\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .progress-fail {\n      background: var(--cg-color-status-error-text-default);\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .test-list {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    }\n\n    .test-item {\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n    .test-item + .test-item {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: 0;\n    }\n\n    .test-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12);\n      cursor: pointer;\n      background: transparent;\n      border: none;\n      color: inherit;\n      width: 100%;\n      font-family: inherit;\n      text-align: left;\n      min-height: var(--cg-spacing-48);\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .test-header:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .test-header:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .test-header:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .status-icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n    }\n    .status-icon svg { width: 100%; height: 100%; }\n    .status-icon.pass    { color: var(--cg-color-status-success-text-default); }\n    .status-icon.fail    { color: var(--cg-color-status-error-text-default); }\n    .status-icon.pending { color: var(--cg-color-surface-container-outlined); }\n\n    .test-name {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .test-meta {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .test-details {\n      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-32);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-family: var(--cg-font-family-mono);\n      background: var(--cg-color-code-background);\n    }\n    .detail-row {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-4);\n    }\n    .detail-label {\n      min-width: var(--cg-spacing-64);\n    }\n    .detail-expected { color: var(--cg-color-status-success-text-default); }\n    .detail-actual   { color: var(--cg-color-status-error-text-default); }\n\n    .spinner {\n      display: inline-block;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-warning-text-default);\n      border-top-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n  `];\n\n  @property({ type: Array }) tests: TestEntry[] = [];\n  @property({ type: String }) override title = 'Test Results';\n\n  @state() private _expanded = new Set<number>();\n\n  private get _passCount() { return this.tests.filter(t => t.status === 'pass').length; }\n  private get _failCount() { return this.tests.filter(t => t.status === 'fail').length; }\n  private get _runningCount() { return this.tests.filter(t => t.status === 'running').length; }\n  private get _pendingCount() { return this.tests.filter(t => t.status === 'pending').length; }\n\n  private _toggle(idx: number): void {\n    const next = new Set(this._expanded);\n    if (next.has(idx)) next.delete(idx); else next.add(idx);\n    this._expanded = next;\n    this.dispatchEvent(new CustomEvent('ai-test-click', {\n      bubbles: true, composed: true,\n      detail: { index: idx, test: this.tests[idx] },\n    }));\n  }\n\n  private _runAll(): void {\n    this.dispatchEvent(new CustomEvent('ai-test-run', {\n      bubbles: true, composed: true,\n      detail: { tests: this.tests.map(t => t.name) },\n    }));\n  }\n\n  private _statusIcon(status: TestEntry['status']) {\n    if (status === 'pass') {\n      return html`<span class=\"status-icon pass\" aria-label=\"Passed\">${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>`}</span>`;\n    }\n    if (status === 'fail') {\n      return html`<span class=\"status-icon fail\" aria-label=\"Failed\">${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`}</span>`;\n    }\n    if (status === 'running') {\n      return html`<span class=\"spinner\" role=\"status\" aria-label=\"Running\"></span>`;\n    }\n    return html`<span class=\"status-icon pending\" aria-label=\"Pending\">${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>`}</span>`;\n  }\n\n  override render() {\n    const total = this.tests.length || 1;\n    const passP = (this._passCount / total) * 100;\n    const failP = (this._failCount / total) * 100;\n\n    return html`\n      <cg-card variant=\"outlined\" padding=\"md\" rounded=\"lg\">\n        <div slot=\"header\" class=\"header-row\">\n          <cg-text as=\"h3\" size=\"sm\" weight=\"semibold\">${this.title}</cg-text>\n          <cg-button variant=\"primary\" size=\"sm\" @click=${this._runAll} aria-label=\"Run all tests\">\n            Run All\n          </cg-button>\n        </div>\n\n        <div class=\"summary-bar\" role=\"status\" aria-label=\"Test summary\">\n          <span class=\"summary-item\">\n            <span class=\"dot dot-pass\" aria-hidden=\"true\"></span>\n            <cg-text size=\"xs\" color=\"muted\">${this._passCount} passed</cg-text>\n          </span>\n          <span class=\"summary-item\">\n            <span class=\"dot dot-fail\" aria-hidden=\"true\"></span>\n            <cg-text size=\"xs\" color=\"muted\">${this._failCount} failed</cg-text>\n          </span>\n          ${this._runningCount ? html`\n            <span class=\"summary-item\">\n              <span class=\"dot dot-running\" aria-hidden=\"true\"></span>\n              <cg-text size=\"xs\" color=\"muted\">${this._runningCount} running</cg-text>\n            </span>\n          ` : nothing}\n          ${this._pendingCount ? html`\n            <span class=\"summary-item\">\n              <span class=\"dot dot-pending\" aria-hidden=\"true\"></span>\n              <cg-text size=\"xs\" color=\"muted\">${this._pendingCount} pending</cg-text>\n            </span>\n          ` : nothing}\n        </div>\n\n        <div class=\"progress-bar\" aria-hidden=\"true\">\n          <div class=\"progress-pass\" style=\"width:${passP}%\"></div>\n          <div class=\"progress-fail\" style=\"width:${failP}%\"></div>\n        </div>\n\n        <div class=\"test-list\" role=\"list\" aria-label=\"Tests\">\n          ${this.tests.map((t, i) => html`\n            <div class=\"test-item\" role=\"listitem\">\n              <button\n                class=\"test-header\"\n                @click=${() => this._toggle(i)}\n                aria-expanded=${this._expanded.has(i)}\n              >\n                ${this._statusIcon(t.status)}\n                <cg-text class=\"test-name\" size=\"sm\">${t.name}</cg-text>\n                <div class=\"test-meta\">\n                  ${t.score != null ? html`<cg-text size=\"xs\" weight=\"semibold\">${t.score}%</cg-text>` : nothing}\n                  ${t.duration != null ? html`<cg-text size=\"xs\" color=\"muted\">${t.duration}ms</cg-text>` : nothing}\n                </div>\n              </button>\n              ${this._expanded.has(i) && (t.expected || t.actual) ? html`\n                <div class=\"test-details\">\n                  ${t.expected ? html`\n                    <div class=\"detail-row\">\n                      <cg-text class=\"detail-label\" size=\"xs\" color=\"muted\">Expected:</cg-text>\n                      <cg-text size=\"xs\" class=\"detail-expected\">${t.expected}</cg-text>\n                    </div>\n                  ` : nothing}\n                  ${t.actual ? html`\n                    <div class=\"detail-row\">\n                      <cg-text class=\"detail-label\" size=\"xs\" color=\"muted\">Actual:</cg-text>\n                      <cg-text size=\"xs\" class=\"detail-actual\">${t.actual}</cg-text>\n                    </div>\n                  ` : nothing}\n                </div>\n              ` : nothing}\n            </div>\n          `)}\n        </div>\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-test-runner': AiTestRunner;\n  }\n}\n"],"names":["AiTestRunner","LitElement","idx","next","status","html","svg","total","passP","failP","nothing","t","i","hostBlock","reducedMotion","spinKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;;AAuCO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GA2JsB,KAAA,QAAqB,CAAA,GACpB,KAAS,QAAQ,gBAEpC,KAAQ,gCAAgB,IAAA;AAAA,EAAY;AAAA,EAE7C,IAAY,aAAa;AAAE,WAAO,KAAK,MAAM,OAAO,OAAK,EAAE,WAAW,MAAM,EAAE;AAAA,EAAQ;AAAA,EACtF,IAAY,aAAa;AAAE,WAAO,KAAK,MAAM,OAAO,OAAK,EAAE,WAAW,MAAM,EAAE;AAAA,EAAQ;AAAA,EACtF,IAAY,gBAAgB;AAAE,WAAO,KAAK,MAAM,OAAO,OAAK,EAAE,WAAW,SAAS,EAAE;AAAA,EAAQ;AAAA,EAC5F,IAAY,gBAAgB;AAAE,WAAO,KAAK,MAAM,OAAO,OAAK,EAAE,WAAW,SAAS,EAAE;AAAA,EAAQ;AAAA,EAEpF,QAAQC,GAAmB;AACjC,UAAMC,IAAO,IAAI,IAAI,KAAK,SAAS;AACnC,IAAIA,EAAK,IAAID,CAAG,IAAGC,EAAK,OAAOD,CAAG,IAAQC,EAAK,IAAID,CAAG,GACtD,KAAK,YAAYC,GACjB,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,OAAOD,GAAK,MAAM,KAAK,MAAMA,CAAG,EAAA;AAAA,IAAE,CAC7C,CAAC;AAAA,EACJ;AAAA,EAEQ,UAAgB;AACtB,SAAK,cAAc,IAAI,YAAY,eAAe;AAAA,MAChD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,OAAO,KAAK,MAAM,IAAI,CAAA,MAAK,EAAE,IAAI,EAAA;AAAA,IAAE,CAC9C,CAAC;AAAA,EACJ;AAAA,EAEQ,YAAYE,GAA6B;AAC/C,WAAIA,MAAW,SACNC,uDAA0DC,uKAAyK,YAExOF,MAAW,SACNC,uDAA0DC,4IAA8I,YAE7MF,MAAW,YACNC,sEAEFA,2DAA8DC,oHAAsH;AAAA,EAC7L;AAAA,EAES,SAAS;AAChB,UAAMC,IAAQ,KAAK,MAAM,UAAU,GAC7BC,IAAS,KAAK,aAAaD,IAAS,KACpCE,IAAS,KAAK,aAAaF,IAAS;AAE1C,WAAOF;AAAA;AAAA;AAAA,yDAG8C,KAAK,KAAK;AAAA,0DACT,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+CAQvB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,+CAIf,KAAK,UAAU;AAAA;AAAA,YAElD,KAAK,gBAAgBA;AAAA;AAAA;AAAA,iDAGgB,KAAK,aAAa;AAAA;AAAA,cAErDK,CAAO;AAAA,YACT,KAAK,gBAAgBL;AAAA;AAAA;AAAA,iDAGgB,KAAK,aAAa;AAAA;AAAA,cAErDK,CAAO;AAAA;AAAA;AAAA;AAAA,oDAI+BF,CAAK;AAAA,oDACLC,CAAK;AAAA;AAAA;AAAA;AAAA,YAI7C,KAAK,MAAM,IAAI,CAACE,GAAGC,MAAMP;AAAA;AAAA;AAAA;AAAA,yBAIZ,MAAM,KAAK,QAAQO,CAAC,CAAC;AAAA,gCACd,KAAK,UAAU,IAAIA,CAAC,CAAC;AAAA;AAAA,kBAEnC,KAAK,YAAYD,EAAE,MAAM,CAAC;AAAA,uDACWA,EAAE,IAAI;AAAA;AAAA,oBAEzCA,EAAE,SAAS,OAAON,yCAA4CM,EAAE,KAAK,gBAAgBD,CAAO;AAAA,oBAC5FC,EAAE,YAAY,OAAON,qCAAwCM,EAAE,QAAQ,iBAAiBD,CAAO;AAAA;AAAA;AAAA,gBAGnG,KAAK,UAAU,IAAIE,CAAC,MAAMD,EAAE,YAAYA,EAAE,UAAUN;AAAA;AAAA,oBAEhDM,EAAE,WAAWN;AAAA;AAAA;AAAA,mEAGkCM,EAAE,QAAQ;AAAA;AAAA,sBAEvDD,CAAO;AAAA,oBACTC,EAAE,SAASN;AAAA;AAAA;AAAA,iEAGkCM,EAAE,MAAM;AAAA;AAAA,sBAEnDD,CAAO;AAAA;AAAA,kBAEXA,CAAO;AAAA;AAAA,WAEd,CAAC;AAAA;AAAA;AAAA;AAAA,EAIV;AACF;AAlRaV,EACK,SAAS,CAACa,GAAWC,GAAeC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwJxF;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3JdnB,EA2JgB,WAAA,SAAA,CAAA;AACUkB,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5JfnB,EA4J0B,WAAA,SAAA,CAAA;AAEpBkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9JIpB,EA8JM,WAAA,aAAA,CAAA;AA9JNA,IAANkB,EAAA;AAAA,EADNG,EAAc,gBAAgB;AAAA,GAClBrB,CAAA;"}

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

@@ -1,6 +1,6 @@
 import { css as h, LitElement as u, html as t, nothing as s } from "lit";
 import { property as i, state as p, customElement as v } from "lit/decorators.js";
-import { h as m, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as m, r as f } from "../../chunks/premium.css-DHekUEUt.js";
 var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, o, c, l) => {
   for (var n = l > 1 ? void 0 : l ? y(o, c) : o, g = e.length - 1, d; g >= 0; g--)
     (d = e[g]) && (n = (l ? d(o, c, n) : d(n)) || n);