@cognivo/components 0.8.0

package/dist/components/ai-debug-console/ai-debug-console.js

@@ -0,0 +1,517 @@
+import { css as p, LitElement as h, nothing as c, html as i } from "lit";
+import { property as l, state as u, query as v, customElement as f } from "lit/decorators.js";
+import { h as b, r as m, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-button/cg-button.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, e, t, a) => {
+  for (var s = a > 1 ? void 0 : a ? w(e, t) : e, d = r.length - 1, g; d >= 0; d--)
+    (g = r[d]) && (s = (a ? g(e, t, s) : g(s)) || s);
+  return a && s && x(e, t, s), s;
+};
+const k = [
+  { id: "all", label: "All" },
+  { id: "request", label: "Requests" },
+  { id: "response", label: "Responses" },
+  { id: "tool", label: "Tools" },
+  { id: "error", label: "Errors" },
+  { id: "info", label: "Info" }
+];
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.entries = [], this.open = !1, this.maxEntries = 100, this.streaming = !1, this._expanded = /* @__PURE__ */ new Set(), this._filter = "all", this._query = "", this._wasAtBottom = !0;
+  }
+  updated(r) {
+    r.has("entries") && this.open && this._wasAtBottom && this._panelEl && this.updateComplete.then(() => {
+      this._panelEl && (this._panelEl.scrollTop = this._panelEl.scrollHeight);
+    });
+  }
+  /** Window onto entries — capped to maxEntries, then filtered + searched. */
+  get _visibleEntries() {
+    const r = this.entries.slice(-this.maxEntries), e = this._query.trim().toLowerCase();
+    return r.map((t, a) => ({ entry: t, index: a })).filter(({ entry: t }) => this._filter === "all" || t.type === this._filter).filter(({ entry: t }) => !e || t.content.toLowerCase().includes(e));
+  }
+  _countByType(r) {
+    return r === "all" ? Math.min(this.entries.length, this.maxEntries) : this.entries.slice(-this.maxEntries).filter((e) => e.type === r).length;
+  }
+  // ─── Handlers ───────────────────────────────────────────────────────────
+  _onToggle() {
+    this.open = !this.open, this.dispatchEvent(new CustomEvent("ai-debug-toggle", {
+      bubbles: !0,
+      composed: !0,
+      detail: { open: this.open }
+    }));
+  }
+  _onClear() {
+    this.dispatchEvent(new CustomEvent("ai-debug-clear", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _toggleEntry(r, e) {
+    const t = new Set(this._expanded);
+    t.has(r) ? t.delete(r) : t.add(r), this._expanded = t, this.dispatchEvent(new CustomEvent("ai-debug-entry-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { index: r, entry: e }
+    }));
+  }
+  _onPanelScroll(r) {
+    const e = r.target;
+    this._wasAtBottom = e.scrollHeight - e.scrollTop - e.clientHeight < 8;
+  }
+  _onSearch(r) {
+    this._query = r.target.value;
+  }
+  _formatContent(r) {
+    try {
+      return JSON.stringify(JSON.parse(r), null, 2);
+    } catch {
+      return r;
+    }
+  }
+  render() {
+    const r = this._visibleEntries;
+    return i`
+      <button
+        class="toggle-bar"
+        type="button"
+        @click=${this._onToggle}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-label="Debug console"
+      >
+        <svg class="chevron ${this.open ? "open" : ""}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m9 18 6-6-6-6"/>
+        </svg>
+        <span class="title-text">Debug Console</span>
+        ${this.streaming ? i`<span class="live-dot" aria-hidden="true" title="Streaming"></span>` : c}
+        ${this.entries.length ? i`<span class="badge">${this.entries.length}</span>` : c}
+      </button>
+
+      <div class="panel-wrap" aria-hidden=${this.open ? "false" : "true"}>
+        <div class="panel-inner">
+        <div class="toolbar">
+          ${k.map((e) => {
+      const t = this._countByType(e.id), a = this._filter === e.id;
+      return i`
+              <button
+                class="filter-chip ${a ? "active" : ""}"
+                type="button"
+                @click=${() => {
+        this._filter = e.id;
+      }}
+                aria-pressed=${a ? "true" : "false"}
+              >
+                <span>${e.label}</span>
+                <span class="filter-count">${t}</span>
+              </button>
+            `;
+    })}
+          <label class="search" aria-label="Search entries">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="11" cy="11" r="7"/>
+              <path d="m20 20-3.5-3.5"/>
+            </svg>
+            <input
+              type="search"
+              .value=${this._query}
+              placeholder="Search entries…"
+              @input=${this._onSearch}
+            />
+          </label>
+          ${this.entries.length ? i`
+            <cg-button
+              variant="tertiary"
+              size="sm"
+              @click=${this._onClear}
+              aria-label="Clear all entries"
+            >Clear</cg-button>
+          ` : c}
+        </div>
+
+        <div
+          class="panel"
+          role="log"
+          aria-live="polite"
+          aria-label="Debug entries"
+          @scroll=${this._onPanelScroll}
+        >
+          ${r.length === 0 ? i`
+            <div class="empty">${this._query || this._filter !== "all" ? "No entries match the current filter." : "No debug entries yet."}</div>
+          ` : i`
+            <div class="entry-list">
+              ${r.map(({ entry: e, index: t }) => {
+      const a = this._expanded.has(t);
+      return i`
+                  <div class="entry ${a ? "open" : ""}">
+                    <button
+                      class="entry-header"
+                      type="button"
+                      @click=${() => this._toggleEntry(t, e)}
+                      aria-expanded=${a ? "true" : "false"}
+                    >
+                      <svg class="entry-arrow ${a ? "open" : ""}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="m9 18 6-6-6-6"/>
+                      </svg>
+                      <span class="type-dot type-${e.type}" aria-hidden="true"></span>
+                      <span class="type-label label-${e.type}">${e.type}</span>
+                      <span class="entry-ts">${e.timestamp}</span>
+                      <span class="entry-preview">${e.content.substring(0, 80)}</span>
+                      ${e.duration != null ? i`<span class="entry-duration">${e.duration} ms</span>` : c}
+                    </button>
+                    <div class="entry-content-wrap" aria-hidden=${a ? "false" : "true"}>
+                      <div class="entry-content-inner">
+                        <div class="entry-content">${this._formatContent(e.content)}</div>
+                      </div>
+                    </div>
+                  </div>
+                `;
+    })}
+            </div>
+          `}
+        </div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [b, m, y, p`
+    :host {
+      display: block;
+      /* surface-cards-background is one tone above the page; -code-background
+         resolves to the page color in dark mode so the console blended in. */
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-elevation-1);
+      overflow: hidden;
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    /* ── Toggle bar ── */
+    .toggle-bar {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      color: inherit;
+      width: 100%;
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      text-align: left;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .toggle-bar:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .toggle-bar:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .toggle-bar:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .chevron {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-input-text-placeholder);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
+    }
+    .chevron.open { transform: rotate(90deg); }
+
+    .title-text { flex: 1; }
+
+    /* Live pulsing dot when streaming. */
+    .live-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-status-success-text-default);
+      animation: cg-debug-live-pulse 1.4s var(--cg-transition-easing-ease-in-out) infinite;
+    }
+    @keyframes cg-debug-live-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%      { opacity: 0.4; transform: scale(0.7); }
+    }
+
+    /* Neutral count badge — was brand-tinted before. */
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      padding: 0 var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-emphasis);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Toolbar (filters + search) ── */
+    .toolbar {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      align-items: center;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      background: var(--cg-overlay-dark-subtle);
+      flex-wrap: wrap;
+    }
+
+    .filter-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-4) 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);
+      cursor: pointer;
+      font-family: inherit;
+      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);
+    }
+    .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); }
+
+    .search {
+      flex: 1;
+      min-width: var(--cg-spacing-128);
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-input-background-default);
+    }
+    .search:focus-within {
+      border-color: var(--cg-color-input-border-focus);
+    }
+    .search svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+    }
+    .search input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-default);
+      min-width: 0;
+    }
+    .search input::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    /* ── Panel — accordion via grid-template-rows.
+       Animating 0fr → 1fr is the modern technique for height-auto
+       transitions, smoother than max-height tricks because it interpolates
+       through the actual content height. */
+    .panel-wrap {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    :host([open]) .panel-wrap { grid-template-rows: 1fr; }
+    .panel-inner { overflow: hidden; }
+
+    .panel {
+      max-height: 400px;
+      overflow-y: auto;
+      scrollbar-width: thin;
+      scrollbar-color: var(--cg-color-surface-cards-border-strong) transparent;
+    }
+
+    .entry-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .entry { border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider); }
+    .entry:last-child { border-bottom: none; }
+
+    .entry-header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      color: inherit;
+      width: 100%;
+      font-family: inherit;
+      font-size: var(--cg-font-size-xs);
+      text-align: left;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .entry-header:hover { background: var(--cg-overlay-dark-subtle); }
+    .entry-header:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .entry-header:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .type-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+    /* CRITICAL: tokens use the -default suffix. The previous rules used
+       --cg-color-status-info-text (no -default) which doesn't exist —
+       so all dots and labels were rendering with NO color. */
+    .type-request,  .label-request  { background: var(--cg-color-status-info-text-default); }
+    .type-response, .label-response { background: var(--cg-color-status-success-text-default); }
+    .type-error,    .label-error    { background: var(--cg-color-status-error-text-default); }
+    .type-tool,     .label-tool     { background: var(--cg-color-status-warning-text-default); }
+    .type-info,     .label-info     { background: var(--cg-color-input-text-placeholder); }
+
+    /* Reset bg for the label spans (only the dots use bg). */
+    .label-request, .label-response, .label-error, .label-tool, .label-info {
+      background: transparent;
+    }
+    .label-request  { color: var(--cg-color-status-info-text-default); }
+    .label-response { color: var(--cg-color-status-success-text-default); }
+    .label-error    { color: var(--cg-color-status-error-text-default); }
+    .label-tool     { color: var(--cg-color-status-warning-text-default); }
+    .label-info     { color: var(--cg-color-input-text-placeholder); }
+
+    .type-label {
+      font-weight: var(--cg-font-weight-bold);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      min-width: var(--cg-spacing-56);
+    }
+
+    .entry-ts {
+      color: var(--cg-color-input-text-placeholder);
+      font-variant-numeric: tabular-nums;
+      flex-shrink: 0;
+    }
+
+    .entry-preview {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--cg-color-input-text-placeholder);
+      font-family: var(--cg-font-family-mono);
+    }
+
+    .entry-duration {
+      color: var(--cg-color-input-text-placeholder);
+      font-variant-numeric: tabular-nums;
+      flex-shrink: 0;
+    }
+
+    /* Per-entry accordion — same grid-rows trick. */
+    .entry-content-wrap {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .entry.open .entry-content-wrap { grid-template-rows: 1fr; }
+    .entry-content-inner { overflow: hidden; }
+
+    .entry-content {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-32);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      line-height: var(--cg-line-height-relaxed);
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: var(--cg-color-code-text);
+      background: var(--cg-color-code-background);
+      max-height: 240px;
+      overflow-y: auto;
+    }
+
+    /* Expand-arrow spins on entry expand. */
+    .entry-arrow {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
+    }
+    .entry-arrow.open { transform: rotate(90deg); }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) { border-radius: 0; }
+    :host([rounded="sm"])   { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"])   { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"])   { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) { border-radius: var(--cg-border-radius-full); }
+  `];
+n([
+  l({ reflect: !0 })
+], o.prototype, "rounded", 2);
+n([
+  l({ type: Array })
+], o.prototype, "entries", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+n([
+  l({ type: Number, attribute: "max-entries" })
+], o.prototype, "maxEntries", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "streaming", 2);
+n([
+  u()
+], o.prototype, "_expanded", 2);
+n([
+  u()
+], o.prototype, "_filter", 2);
+n([
+  u()
+], o.prototype, "_query", 2);
+n([
+  v(".panel")
+], o.prototype, "_panelEl", 2);
+o = n([
+  f("ai-debug-console")
+], o);
+export {
+  o as AiDebugConsole
+};
+//# sourceMappingURL=ai-debug-console.js.map

package/dist/components/ai-debug-console/ai-debug-console.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-debug-console.js","sources":["../../../src/components/ai-debug-console/ai-debug-console.ts"],"sourcesContent":["/**\n * @element ai-debug-console\n * Streaming-friendly LLM debug panel — collapsible toggle bar, filter chips\n * by entry type, search input, auto-scroll on new entries, live indicator\n * pulse, expandable JSON content per row, and dogfooded Clear via\n * <cg-button>. Modeled on Langfuse / Helicone / LangSmith trace viewers.\n *\n * @example\n * ```html\n * <ai-debug-console\n *   .entries=${[\n *     { type: 'request',  timestamp: '12:34:05', content: '{\"model\":\"gpt-4o\"}', duration: 240 },\n *     { type: 'response', timestamp: '12:34:08', content: '{\"choices\":[…]}',     duration: 520 },\n *     { type: 'tool',     timestamp: '12:34:09', content: 'search(\"invoice 2026\")', duration: 80 },\n *   ]}\n *   open\n *   streaming\n *   max-entries=\"200\"\n * ></ai-debug-console>\n * ```\n *\n * @fires {CustomEvent<{open: boolean}>} ai-debug-toggle - Panel toggled\n * @fires {CustomEvent} ai-debug-clear - Clear clicked\n * @fires {CustomEvent<{index: number, entry: DebugEntry}>} ai-debug-entry-click - Entry expanded\n *\n * @cssprop [--cg-color-code-background] - Console background\n * @cssprop [--cg-color-code-text] - Body text color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-button/cg-button.js';\n\nexport type DebugEntryType = 'request' | 'response' | 'error' | 'info' | 'tool';\n\nexport interface DebugEntry {\n  type: DebugEntryType;\n  timestamp: string;\n  content: string;\n  duration?: number;\n}\n\nconst FILTERS: Array<{ id: 'all' | DebugEntryType; label: string }> = [\n  { id: 'all',      label: 'All' },\n  { id: 'request',  label: 'Requests' },\n  { id: 'response', label: 'Responses' },\n  { id: 'tool',     label: 'Tools' },\n  { id: 'error',    label: 'Errors' },\n  { id: 'info',     label: 'Info' },\n];\n\n@customElement('ai-debug-console')\nexport class AiDebugConsole extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      /* surface-cards-background is one tone above the page; -code-background\n         resolves to the page color in dark mode so the console blended in. */\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-elevation-1);\n      overflow: hidden;\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    /* ── Toggle bar ── */\n    .toggle-bar {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      cursor: pointer;\n      background: transparent;\n      border: none;\n      color: inherit;\n      width: 100%;\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      text-align: left;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle-bar:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .toggle-bar:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .toggle-bar:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-input-text-placeholder);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n    .chevron.open { transform: rotate(90deg); }\n\n    .title-text { flex: 1; }\n\n    /* Live pulsing dot when streaming. */\n    .live-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-status-success-text-default);\n      animation: cg-debug-live-pulse 1.4s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    @keyframes cg-debug-live-pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50%      { opacity: 0.4; transform: scale(0.7); }\n    }\n\n    /* Neutral count badge — was brand-tinted before. */\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      padding: 0 var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-emphasis);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Toolbar (filters + search) ── */\n    .toolbar {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      align-items: center;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      background: var(--cg-overlay-dark-subtle);\n      flex-wrap: wrap;\n    }\n\n    .filter-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4) 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      cursor: pointer;\n      font-family: inherit;\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    .search {\n      flex: 1;\n      min-width: var(--cg-spacing-128);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-input-background-default);\n    }\n    .search:focus-within {\n      border-color: var(--cg-color-input-border-focus);\n    }\n    .search svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n    }\n    .search input {\n      flex: 1;\n      background: transparent;\n      border: none;\n      outline: none;\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-default);\n      min-width: 0;\n    }\n    .search input::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Panel — accordion via grid-template-rows.\n       Animating 0fr → 1fr is the modern technique for height-auto\n       transitions, smoother than max-height tricks because it interpolates\n       through the actual content height. */\n    .panel-wrap {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    :host([open]) .panel-wrap { grid-template-rows: 1fr; }\n    .panel-inner { overflow: hidden; }\n\n    .panel {\n      max-height: 400px;\n      overflow-y: auto;\n      scrollbar-width: thin;\n      scrollbar-color: var(--cg-color-surface-cards-border-strong) transparent;\n    }\n\n    .entry-list {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .entry { border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider); }\n    .entry:last-child { border-bottom: none; }\n\n    .entry-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      cursor: pointer;\n      background: transparent;\n      border: none;\n      color: inherit;\n      width: 100%;\n      font-family: inherit;\n      font-size: var(--cg-font-size-xs);\n      text-align: left;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .entry-header:hover { background: var(--cg-overlay-dark-subtle); }\n    .entry-header:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .entry-header:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .type-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    /* CRITICAL: tokens use the -default suffix. The previous rules used\n       --cg-color-status-info-text (no -default) which doesn't exist —\n       so all dots and labels were rendering with NO color. */\n    .type-request,  .label-request  { background: var(--cg-color-status-info-text-default); }\n    .type-response, .label-response { background: var(--cg-color-status-success-text-default); }\n    .type-error,    .label-error    { background: var(--cg-color-status-error-text-default); }\n    .type-tool,     .label-tool     { background: var(--cg-color-status-warning-text-default); }\n    .type-info,     .label-info     { background: var(--cg-color-input-text-placeholder); }\n\n    /* Reset bg for the label spans (only the dots use bg). */\n    .label-request, .label-response, .label-error, .label-tool, .label-info {\n      background: transparent;\n    }\n    .label-request  { color: var(--cg-color-status-info-text-default); }\n    .label-response { color: var(--cg-color-status-success-text-default); }\n    .label-error    { color: var(--cg-color-status-error-text-default); }\n    .label-tool     { color: var(--cg-color-status-warning-text-default); }\n    .label-info     { color: var(--cg-color-input-text-placeholder); }\n\n    .type-label {\n      font-weight: var(--cg-font-weight-bold);\n      font-size: 10px;\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      min-width: var(--cg-spacing-56);\n    }\n\n    .entry-ts {\n      color: var(--cg-color-input-text-placeholder);\n      font-variant-numeric: tabular-nums;\n      flex-shrink: 0;\n    }\n\n    .entry-preview {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: var(--cg-color-input-text-placeholder);\n      font-family: var(--cg-font-family-mono);\n    }\n\n    .entry-duration {\n      color: var(--cg-color-input-text-placeholder);\n      font-variant-numeric: tabular-nums;\n      flex-shrink: 0;\n    }\n\n    /* Per-entry accordion — same grid-rows trick. */\n    .entry-content-wrap {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    .entry.open .entry-content-wrap { grid-template-rows: 1fr; }\n    .entry-content-inner { overflow: hidden; }\n\n    .entry-content {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-32);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      word-break: break-word;\n      color: var(--cg-color-code-text);\n      background: var(--cg-color-code-background);\n      max-height: 240px;\n      overflow-y: auto;\n    }\n\n    /* Expand-arrow spins on entry expand. */\n    .entry-arrow {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n    .entry-arrow.open { transform: rotate(90deg); }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) { border-radius: 0; }\n    :host([rounded=\"sm\"])   { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"])   { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"])   { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) entries: DebugEntry[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Number, attribute: 'max-entries' }) maxEntries = 100;\n  /** Pulsing live dot in the header — set to true while a stream is active. */\n  @property({ type: Boolean, reflect: true }) streaming = false;\n\n  @state() private _expanded = new Set<number>();\n  @state() private _filter: 'all' | DebugEntryType = 'all';\n  @state() private _query = '';\n\n  @query('.panel') private _panelEl?: HTMLElement;\n\n  private _wasAtBottom = true;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('entries') && this.open && this._wasAtBottom && this._panelEl) {\n      this.updateComplete.then(() => {\n        if (this._panelEl) this._panelEl.scrollTop = this._panelEl.scrollHeight;\n      });\n    }\n  }\n\n  /** Window onto entries — capped to maxEntries, then filtered + searched. */\n  private get _visibleEntries(): Array<{ entry: DebugEntry; index: number }> {\n    const tail = this.entries.slice(-this.maxEntries);\n    const q = this._query.trim().toLowerCase();\n    return tail\n      .map((entry, index) => ({ entry, index }))\n      .filter(({ entry }) => this._filter === 'all' || entry.type === this._filter)\n      .filter(({ entry }) => !q || entry.content.toLowerCase().includes(q));\n  }\n\n  private _countByType(type: 'all' | DebugEntryType): number {\n    if (type === 'all') return Math.min(this.entries.length, this.maxEntries);\n    return this.entries.slice(-this.maxEntries).filter(e => e.type === type).length;\n  }\n\n  // ─── Handlers ───────────────────────────────────────────────────────────\n\n  private _onToggle(): void {\n    this.open = !this.open;\n    this.dispatchEvent(new CustomEvent('ai-debug-toggle', {\n      bubbles: true, composed: true,\n      detail: { open: this.open },\n    }));\n  }\n\n  private _onClear(): void {\n    this.dispatchEvent(new CustomEvent('ai-debug-clear', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _toggleEntry(index: number, entry: DebugEntry): void {\n    const next = new Set(this._expanded);\n    if (next.has(index)) next.delete(index); else next.add(index);\n    this._expanded = next;\n    this.dispatchEvent(new CustomEvent('ai-debug-entry-click', {\n      bubbles: true, composed: true,\n      detail: { index, entry },\n    }));\n  }\n\n  private _onPanelScroll(e: Event): void {\n    const el = e.target as HTMLElement;\n    // Treat \"near bottom\" (within 8px) as bottom for sticky-tail behavior.\n    this._wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 8;\n  }\n\n  private _onSearch(e: Event): void {\n    this._query = (e.target as HTMLInputElement).value;\n  }\n\n  private _formatContent(content: string): string {\n    try {\n      return JSON.stringify(JSON.parse(content), null, 2);\n    } catch {\n      return content;\n    }\n  }\n\n  override render() {\n    const visible = this._visibleEntries;\n\n    return html`\n      <button\n        class=\"toggle-bar\"\n        type=\"button\"\n        @click=${this._onToggle}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-label=\"Debug console\"\n      >\n        <svg class=\"chevron ${this.open ? 'open' : ''}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"m9 18 6-6-6-6\"/>\n        </svg>\n        <span class=\"title-text\">Debug Console</span>\n        ${this.streaming ? html`<span class=\"live-dot\" aria-hidden=\"true\" title=\"Streaming\"></span>` : nothing}\n        ${this.entries.length ? html`<span class=\"badge\">${this.entries.length}</span>` : nothing}\n      </button>\n\n      <div class=\"panel-wrap\" aria-hidden=${this.open ? 'false' : 'true'}>\n        <div class=\"panel-inner\">\n        <div class=\"toolbar\">\n          ${FILTERS.map(f => {\n            const count = this._countByType(f.id);\n            const active = this._filter === f.id;\n            return html`\n              <button\n                class=\"filter-chip ${active ? 'active' : ''}\"\n                type=\"button\"\n                @click=${() => { this._filter = f.id; }}\n                aria-pressed=${active ? 'true' : 'false'}\n              >\n                <span>${f.label}</span>\n                <span class=\"filter-count\">${count}</span>\n              </button>\n            `;\n          })}\n          <label class=\"search\" aria-label=\"Search entries\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\"/>\n              <path d=\"m20 20-3.5-3.5\"/>\n            </svg>\n            <input\n              type=\"search\"\n              .value=${this._query}\n              placeholder=\"Search entries…\"\n              @input=${this._onSearch}\n            />\n          </label>\n          ${this.entries.length ? html`\n            <cg-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              @click=${this._onClear}\n              aria-label=\"Clear all entries\"\n            >Clear</cg-button>\n          ` : nothing}\n        </div>\n\n        <div\n          class=\"panel\"\n          role=\"log\"\n          aria-live=\"polite\"\n          aria-label=\"Debug entries\"\n          @scroll=${this._onPanelScroll}\n        >\n          ${visible.length === 0 ? html`\n            <div class=\"empty\">${this._query || this._filter !== 'all' ? 'No entries match the current filter.' : 'No debug entries yet.'}</div>\n          ` : html`\n            <div class=\"entry-list\">\n              ${visible.map(({ entry, index }) => {\n                const expanded = this._expanded.has(index);\n                return html`\n                  <div class=\"entry ${expanded ? 'open' : ''}\">\n                    <button\n                      class=\"entry-header\"\n                      type=\"button\"\n                      @click=${() => this._toggleEntry(index, entry)}\n                      aria-expanded=${expanded ? 'true' : 'false'}\n                    >\n                      <svg class=\"entry-arrow ${expanded ? 'open' : ''}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"m9 18 6-6-6-6\"/>\n                      </svg>\n                      <span class=\"type-dot type-${entry.type}\" aria-hidden=\"true\"></span>\n                      <span class=\"type-label label-${entry.type}\">${entry.type}</span>\n                      <span class=\"entry-ts\">${entry.timestamp}</span>\n                      <span class=\"entry-preview\">${entry.content.substring(0, 80)}</span>\n                      ${entry.duration != null\n                        ? html`<span class=\"entry-duration\">${entry.duration} ms</span>`\n                        : nothing}\n                    </button>\n                    <div class=\"entry-content-wrap\" aria-hidden=${expanded ? 'false' : 'true'}>\n                      <div class=\"entry-content-inner\">\n                        <div class=\"entry-content\">${this._formatContent(entry.content)}</div>\n                      </div>\n                    </div>\n                  </div>\n                `;\n              })}\n            </div>\n          `}\n        </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-debug-console': AiDebugConsole;\n  }\n}\n"],"names":["FILTERS","AiDebugConsole","LitElement","changed","tail","q","entry","index","type","next","e","el","content","visible","html","nothing","f","count","active","expanded","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/components/ai-detection-canvas/ai-detection-canvas.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export interface Detection {
+    id: string;
+    label: string;
+    confidence: number;
+    bbox: [number, number, number, number];
+    color?: string;
+}
+export declare class AiDetectionCanvas extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    src: string;
+    detections: Detection[];
+    showLabels: boolean;
+    showConfidence: boolean;
+    selectedId: string;
+    interactive: boolean;
+    private _hoveredId;
+    private _imgNatW;
+    private _imgNatH;
+    private _onImgLoad;
+    private _selectDetection;
+    private _getDefaultColor;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-detection-canvas.d.ts.map

package/dist/components/ai-detection-canvas/ai-detection-canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-detection-canvas.d.ts","sourceRoot":"","sources":["../../../src/components/ai-detection-canvas/ai-detection-canvas.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA0HnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,GAAG,SAAM;IACM,UAAU,EAAE,SAAS,EAAE,CAAM;IAC3B,UAAU,UAAQ;IAClB,cAAc,UAAQ;IACvC,UAAU,SAAM;IACC,WAAW,UAAQ;IAEvC,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAK;IAE9B,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,gBAAgB;IAWf,MAAM;CA+ChB"}