@cognivo/components 0.8.0

package/dist/components/ai-labeling-board/ai-labeling-board.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-labeling-board.js","sources":["../../../src/components/ai-labeling-board/ai-labeling-board.ts"],"sourcesContent":["/**\n * @element ai-labeling-board\n * Data labeling board with label palette, assignable items, and per-label stats.\n * Supports list mode (dropdown per row) and click mode (select label then click items).\n *\n * @example\n * ```html\n * <ai-labeling-board\n *   mode=\"list\"\n *   allowCustomLabels\n *   .items=${[{ id: '1', content: 'Sample text', label: 'positive' }]}\n *   .labels=${[{ id: 'positive', name: 'Positive', color: '#4ade80' }, { id: 'negative', name: 'Negative', color: '#f87171' }]}\n * ></ai-labeling-board>\n * ```\n *\n * @fires {CustomEvent<{itemId: string, labelId: string}>} ai-label-assign - Label assigned to item\n * @fires {CustomEvent<{itemId: string}>} ai-label-remove - Label removed from item\n * @fires {CustomEvent<{name: string, color: string}>} ai-label-create - New custom label created\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\ninterface LabelItem {\n  id: string;\n  content: string;\n  label?: string;\n  metadata?: string;\n}\n\ninterface LabelDef {\n  id: string;\n  name: string;\n  color: string;\n}\n\n@customElement('ai-labeling-board')\nexport class AiLabelingBoard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .header-count {\n      margin-left: auto;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Label palette (click mode) ── */\n    .palette {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .palette-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition: 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    .palette-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .palette-btn.active {\n      border-color: var(--_label-color, var(--cg-color-surface-base-text));\n      color: var(--_label-color, var(--cg-color-surface-base-text));\n    }\n    .palette-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .palette-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* ── Add custom label ── */\n    .add-label-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      transition: 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    .add-label-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Items list (inset) ── */\n    .items {\n      display: flex;\n      flex-direction: column;\n      margin: 0 var(--cg-spacing-12);\n      background: var(--cg-overlay-dark-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-125);\n      overflow: hidden;\n    }\n    .item-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      cursor: default;\n    }\n    .item-row:last-child {\n      border-bottom: none;\n    }\n    .item-row:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .item-row:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .item-row.clickable {\n      cursor: pointer;\n    }\n    .item-row.unlabeled {\n      opacity: 0.5;\n    }\n    .item-content {\n      flex: 1;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text));\n      line-height: var(--cg-line-height-normal);\n    }\n    .item-meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Label pill on item ── */\n    .item-label-pill {\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      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n    .item-label-pill.unlabeled {\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n    }\n    .item-label-pill:hover { opacity: 0.8; }\n    .item-label-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* ── Dropdown select (list mode) ── */\n    .label-select {\n      background: var(--cg-color-surface-cards-border);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-surface-base-text));\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n    .label-select:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Remove label button ── */\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      display: flex;\n      align-items: center;\n      border-radius: var(--cg-border-radius-full);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .remove-btn:hover {\n      color: var(--cg-color-status-error-text-default);\n    }\n    .remove-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .remove-btn svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    /* ── Stats bar ── */\n    .stats {\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-12);\n    }\n    .stat {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .stat-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .stat-count {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text));\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) items: LabelItem[] = [];\n  @property({ type: Array }) labels: LabelDef[] = [];\n  @property({ type: Boolean }) allowCustomLabels: boolean = false;\n  @property({ type: String }) mode: 'click' | 'list' = 'list';\n\n  @state() private _activeLabel: string = '';\n\n  private _getLabel(id?: string): LabelDef | undefined {\n    return this.labels.find(l => l.id === id);\n  }\n\n  private _assignLabel(itemId: string, labelId: string) {\n    this.dispatchEvent(new CustomEvent('ai-label-assign', {\n      bubbles: true, composed: true,\n      detail: { itemId, labelId },\n    }));\n  }\n\n  private _removeLabel(itemId: string, e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-label-remove', {\n      bubbles: true, composed: true,\n      detail: { itemId },\n    }));\n  }\n\n  private _cycleLabel(itemId: string) {\n    const item = this.items.find(i => i.id === itemId);\n    if (!item) return;\n    const currentIdx = this.labels.findIndex(l => l.id === item.label);\n    const nextIdx = (currentIdx + 1) % (this.labels.length + 1);\n    if (nextIdx === this.labels.length) {\n      // Cycle back to unlabeled\n      this.dispatchEvent(new CustomEvent('ai-label-remove', { bubbles: true, composed: true, detail: { itemId } }));\n    } else {\n      this._assignLabel(itemId, this.labels[nextIdx]!.id);\n    }\n  }\n\n  private _handleItemClick(item: LabelItem) {\n    if (this.mode !== 'click' || !this._activeLabel) return;\n    this._assignLabel(item.id, this._activeLabel);\n  }\n\n  private _handleSelectChange(itemId: string, e: Event) {\n    const value = (e.target as HTMLSelectElement).value;\n    if (value) {\n      this._assignLabel(itemId, value);\n    }\n  }\n\n  private _createLabel() {\n    const name = 'New Label';\n    const colors = ['#60a5fa', '#c084fc', '#fb923c', '#4ade80', '#f87171', '#fbbf24'];\n    const color = colors[this.labels.length % colors.length] ?? '#60a5fa';\n    this.dispatchEvent(new CustomEvent('ai-label-create', {\n      bubbles: true, composed: true,\n      detail: { name, color },\n    }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent, item: LabelItem) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._handleItemClick(item);\n    }\n  }\n\n  override render() {\n    const labeledCount = this.items.filter(i => i.label).length;\n    const totalCount = this.items.length;\n\n    // Stats: count per label\n    const stats = this.labels.map(l => ({\n      ...l,\n      count: this.items.filter(i => i.label === l.id).length,\n    }));\n    const unlabeledCount = this.items.filter(i => !i.label).length;\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Labeling</span>\n          <span class=\"header-count\">${labeledCount}/${totalCount} labeled</span>\n        </div>\n\n        ${this.mode === 'click' ? html`\n          <div class=\"palette\">\n            ${this.labels.map(l => html`\n              <button class=\"palette-btn ${this._activeLabel === l.id ? 'active' : ''}\"\n                style=\"--_label-color: ${l.color}\"\n                @click=${() => { this._activeLabel = this._activeLabel === l.id ? '' : l.id; }}>\n                <span class=\"palette-dot\" style=\"background: ${l.color}\"></span>\n                ${l.name}\n              </button>\n            `)}\n            ${this.allowCustomLabels ? html`\n              <button class=\"add-label-btn\" @click=${this._createLabel}>+ Add</button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"items\">\n          ${this.items.map(item => {\n            const label = this._getLabel(item.label);\n            const isUnlabeled = !item.label;\n            return html`\n              <div class=\"item-row ${this.mode === 'click' ? 'clickable' : ''} ${isUnlabeled ? 'unlabeled' : ''}\"\n                tabindex=${this.mode === 'click' ? '0' : '-1'}\n                role=${this.mode === 'click' ? 'button' : 'listitem'}\n                @click=${() => this._handleItemClick(item)}\n                @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, item)}>\n                <div class=\"item-content\">\n                  ${item.content}\n                  ${item.metadata ? html`<div class=\"item-meta\">${item.metadata}</div>` : nothing}\n                </div>\n\n                ${label ? html`\n                  <span class=\"item-label-pill\" role=\"button\" tabindex=\"0\"\n                    style=\"background: color-mix(in srgb, ${label.color} 12%, transparent); color: ${label.color}; cursor: pointer;\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._cycleLabel(item.id); }}\n                    @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this._cycleLabel(item.id); } }}>\n                    <span class=\"item-label-dot\" style=\"background: ${label.color}\"></span>\n                    ${label.name}\n                  </span>\n                ` : html`\n                  <span class=\"item-label-pill unlabeled\" role=\"button\" tabindex=\"0\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._cycleLabel(item.id); }}\n                    @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this._cycleLabel(item.id); } }}>\n                    Assign\n                  </span>\n                `}\n              </div>\n            `;\n          })}\n        </div>\n\n        <div class=\"stats\">\n          ${stats.map(s => html`\n            <div class=\"stat\">\n              <span class=\"stat-dot\" style=\"background: ${s.color}\"></span>\n              ${s.name}: <span class=\"stat-count\">${s.count}</span>\n            </div>\n          `)}\n          ${unlabeledCount > 0 ? html`\n            <div class=\"stat\">\n              <span class=\"stat-dot\" style=\"background: var(--cg-color-input-text-placeholder)\"></span>\n              Unlabeled: <span class=\"stat-count\">${unlabeledCount}</span>\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiLabelingBoard","LitElement","id","l","itemId","labelId","e","item","i","nextIdx","value","name","colors","color","labeledCount","totalCount","stats","unlabeledCount","html","nothing","label","isUnlabeled","s","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-memory-panel/ai-memory-panel.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export interface Memory {
+    id: string;
+    content: string;
+    type: 'fact' | 'preference' | 'instruction' | 'context';
+    timestamp: number;
+    relevance?: number;
+    pinned?: boolean;
+}
+export declare class AiMemoryPanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'default' | 'compact' | 'inline';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    shortTerm: Memory[];
+    longTerm: Memory[];
+    searchable: boolean;
+    private _activeTab;
+    private _search;
+    private _searchTimer?;
+    private get _activeMemories();
+    private _formatTime;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-memory-panel.d.ts.map

package/dist/components/ai-memory-panel/ai-memory-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-memory-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-memory-panel/ai-memory-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAiInB;IAE0B,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IACtD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,SAAS,EAAE,MAAM,EAAE,CAAM;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAM;IACtB,UAAU,UAAQ;IAEtC,OAAO,CAAC,UAAU,CAA6B;IAC/C,OAAO,CAAC,OAAO,CAAM;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAO,KAAK,eAAe,GAK1B;IAED,OAAO,CAAC,WAAW;IAQV,MAAM;CAwDhB"}

package/dist/components/ai-memory-panel/ai-memory-panel.js

@@ -0,0 +1,238 @@
+import { css as p, LitElement as v, nothing as u, html as c } from "lit";
+import { property as n, state as g, customElement as m } from "lit/decorators.js";
+import { h, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (e, r, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? y(r, i) : r, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (o = (s ? l(r, i, o) : l(o)) || o);
+  return s && o && f(r, i, o), o;
+};
+let t = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "default", this.rounded = "md", this.shortTerm = [], this.longTerm = [], this.searchable = !0, this._activeTab = "short", this._search = "";
+  }
+  get _activeMemories() {
+    const e = this._activeTab === "short" ? this.shortTerm : this.longTerm;
+    if (!this._search) return e;
+    const r = this._search.toLowerCase();
+    return e.filter((i) => i.content.toLowerCase().includes(r));
+  }
+  _formatTime(e) {
+    const r = Date.now() - e;
+    return r < 6e4 ? "just now" : r < 36e5 ? `${Math.floor(r / 6e4)}m ago` : r < 864e5 ? `${Math.floor(r / 36e5)}h ago` : new Date(e).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  }
+  render() {
+    const e = this._activeMemories;
+    return c`
+      <div class="panel" role="region" aria-label="Agent memory">
+        <div class="tabs">
+          <button class="tab ${this._activeTab === "short" ? "active" : ""}" @click=${() => {
+      this._activeTab = "short";
+    }}>
+            Short-term<span class="tab-count">${this.shortTerm.length}</span>
+          </button>
+          <button class="tab ${this._activeTab === "long" ? "active" : ""}" @click=${() => {
+      this._activeTab = "long";
+    }}>
+            Long-term<span class="tab-count">${this.longTerm.length}</span>
+          </button>
+        </div>
+
+        ${this.searchable && this.variant !== "compact" ? c`
+          <div class="search-row">
+            <input class="search-input" type="text" placeholder="Search..."
+              .value=${this._search}
+              @input=${(r) => {
+      this._search = r.target.value, this._searchTimer && clearTimeout(this._searchTimer), this._searchTimer = setTimeout(() => {
+        this.dispatchEvent(new CustomEvent("ai-memory-search", { bubbles: !0, composed: !0, detail: { query: this._search } }));
+      }, 250);
+    }} />
+          </div>
+        ` : u}
+
+        <div class="memories">
+          ${e.length === 0 ? c`
+            <div class="empty">${this._search ? "No matches" : "No memories yet"}</div>
+          ` : e.map((r) => c`
+            <div class="memory ${r.pinned ? "pinned" : ""}">
+              <div class="memory-row">
+                <span class="memory-type">${r.type}</span>
+                <span class="memory-meta">${this._formatTime(r.timestamp)}</span>
+              </div>
+              <div class="memory-content">${r.content}</div>
+              <div class="memory-actions">
+                <button class="mem-btn ${r.pinned ? "pinned-btn" : ""}"
+                  @click=${() => this.dispatchEvent(new CustomEvent("ai-memory-pin", { bubbles: !0, composed: !0, detail: { id: r.id, pinned: !r.pinned } }))}
+                  aria-label="${r.pinned ? "Unpin" : "Pin"}">
+                  <svg viewBox="0 0 24 24" fill="${r.pinned ? "currentColor" : "none"}" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 17v5m-4-9.26a2 2 0 01.88-1.66L12 9l3.12 2.08a2 2 0 01.88 1.66V15H8v-2.26zM9 9V4a1 1 0 011-1h4a1 1 0 011 1v5"/></svg>
+                </button>
+                <button class="mem-btn"
+                  @click=${() => this.dispatchEvent(new CustomEvent("ai-memory-delete", { bubbles: !0, composed: !0, detail: { id: r.id, type: this._activeTab } }))}
+                  aria-label="Delete">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+                </button>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [h, b, p`
+
+    /* ── Default variant — bordered panel ── */
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      overflow: hidden;
+    }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-border-radius-150); }
+
+    /* ── Inline variant — no container ── */
+    :host([variant="inline"]) .panel {
+      background: transparent;
+      border: none;
+      border-radius: 0;
+    }
+
+    /* ── Tabs ── */
+    .tabs {
+      display: flex;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .tab {
+      flex: 1; padding: var(--cg-spacing-16) var(--cg-spacing-20); text-align: center;
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      background: none; border: none;
+      border-bottom: var(--cg-border-width-100) solid transparent;
+      cursor: pointer; font-family: inherit;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .tab:hover { color: var(--cg-color-surface-base-text); }
+    .tab.active {
+      color: var(--cg-color-action-primary-background-default);
+      border-bottom-color: var(--cg-color-action-primary-background-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .tab-count {
+      font-size: var(--cg-font-size-xs);
+      margin-left: var(--cg-spacing-4);
+      opacity: 0.5;
+    }
+
+    /* ── Search ── */
+    .search-row { padding: var(--cg-spacing-16) var(--cg-spacing-20); }
+    .search-input {
+      width: 100%; box-sizing: border-box;
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      background: transparent; color: var(--cg-color-surface-base-text);
+      font: inherit; font-size: var(--cg-font-size-xs); outline: none;
+    }
+    .search-input:focus { border-color: var(--cg-color-input-border-focus); }
+    .search-input::placeholder { color: var(--cg-color-surface-container-outlined); }
+
+    /* ── Memory list ── */
+    .memories { max-height: 320px; overflow-y: auto; padding: var(--cg-spacing-12) 0; }
+
+    .memory {
+      display: flex; flex-direction: column; gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-50);
+      margin: 0 var(--cg-spacing-8);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      position: relative;
+    }
+    .memory:hover { background: var(--cg-overlay-dark-subtle); }
+    .memory.pinned { background: var(--cg-overlay-accent-subtle); }
+
+    .memory-row {
+      display: flex; align-items: center; gap: var(--cg-spacing-12);
+    }
+
+    .memory-type {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-action-primary-background-default);
+      font-weight: var(--cg-font-weight-medium);
+      flex-shrink: 0;
+    }
+
+    .memory-meta {
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);
+      margin-left: auto; flex-shrink: 0;
+    }
+
+    .memory-content {
+      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    /* ── Actions — show on hover ── */
+    .memory-actions {
+      position: absolute; top: var(--cg-spacing-8); right: var(--cg-spacing-16);
+      display: flex; gap: var(--cg-spacing-2);
+      opacity: 0; transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .memory:hover .memory-actions { opacity: 1; }
+
+    .mem-btn {
+      width: var(--cg-spacing-20); height: var(--cg-spacing-20);
+      background: transparent; border: none;
+      color: var(--cg-color-surface-container-outlined); cursor: pointer;
+      display: flex; align-items: center; justify-content: center; padding: 0;
+      border-radius: var(--cg-border-radius-50);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .mem-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+    .mem-btn:hover { color: var(--cg-color-surface-base-text); }
+    .mem-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); opacity: 1; }
+    .mem-btn.pinned-btn { color: var(--cg-color-action-primary-background-default); opacity: 1; }
+
+    .empty {
+      padding: var(--cg-spacing-24) var(--cg-spacing-20);
+      text-align: center; color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    /* ── Compact variant ── */
+    :host([variant="compact"]) .search-row { display: none; }
+    :host([variant="compact"]) .memory { padding: var(--cg-spacing-6) var(--cg-spacing-12); }
+    :host([variant="compact"]) .memory-content { font-size: var(--cg-font-size-xs); }
+    :host([variant="compact"]) .memory-type { display: none; }
+  `];
+a([
+  n({ reflect: !0 })
+], t.prototype, "variant", 2);
+a([
+  n({ reflect: !0 })
+], t.prototype, "rounded", 2);
+a([
+  n({ type: Array })
+], t.prototype, "shortTerm", 2);
+a([
+  n({ type: Array })
+], t.prototype, "longTerm", 2);
+a([
+  n({ type: Boolean })
+], t.prototype, "searchable", 2);
+a([
+  g()
+], t.prototype, "_activeTab", 2);
+a([
+  g()
+], t.prototype, "_search", 2);
+t = a([
+  m("ai-memory-panel")
+], t);
+export {
+  t as AiMemoryPanel
+};
+//# sourceMappingURL=ai-memory-panel.js.map

package/dist/components/ai-memory-panel/ai-memory-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-memory-panel.js","sources":["../../../src/components/ai-memory-panel/ai-memory-panel.ts"],"sourcesContent":["/**\n * @element ai-memory-panel\n * Agent memory viewer. Three variants: default (full panel), compact (sidebar), inline (no container).\n *\n * @fires {CustomEvent<{id: string, type: string}>} ai-memory-delete\n * @fires {CustomEvent<{id: string, pinned: boolean}>} ai-memory-pin\n * @fires {CustomEvent<{query: string}>} ai-memory-search\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface Memory {\n  id: string;\n  content: string;\n  type: 'fact' | 'preference' | 'instruction' | 'context';\n  timestamp: number;\n  relevance?: number;\n  pinned?: boolean;\n}\n\n@customElement('ai-memory-panel')\nexport class AiMemoryPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Default variant — bordered panel ── */\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n\n    /* ── Inline variant — no container ── */\n    :host([variant=\"inline\"]) .panel {\n      background: transparent;\n      border: none;\n      border-radius: 0;\n    }\n\n    /* ── Tabs ── */\n    .tabs {\n      display: flex;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .tab {\n      flex: 1; padding: var(--cg-spacing-16) var(--cg-spacing-20); text-align: center;\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      background: none; border: none;\n      border-bottom: var(--cg-border-width-100) solid transparent;\n      cursor: pointer; font-family: inherit;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .tab:hover { color: var(--cg-color-surface-base-text); }\n    .tab.active {\n      color: var(--cg-color-action-primary-background-default);\n      border-bottom-color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .tab-count {\n      font-size: var(--cg-font-size-xs);\n      margin-left: var(--cg-spacing-4);\n      opacity: 0.5;\n    }\n\n    /* ── Search ── */\n    .search-row { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .search-input {\n      width: 100%; box-sizing: border-box;\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      background: transparent; color: var(--cg-color-surface-base-text);\n      font: inherit; font-size: var(--cg-font-size-xs); outline: none;\n    }\n    .search-input:focus { border-color: var(--cg-color-input-border-focus); }\n    .search-input::placeholder { color: var(--cg-color-surface-container-outlined); }\n\n    /* ── Memory list ── */\n    .memories { max-height: 320px; overflow-y: auto; padding: var(--cg-spacing-12) 0; }\n\n    .memory {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-50);\n      margin: 0 var(--cg-spacing-8);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      position: relative;\n    }\n    .memory:hover { background: var(--cg-overlay-dark-subtle); }\n    .memory.pinned { background: var(--cg-overlay-accent-subtle); }\n\n    .memory-row {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n    }\n\n    .memory-type {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-medium);\n      flex-shrink: 0;\n    }\n\n    .memory-meta {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n      margin-left: auto; flex-shrink: 0;\n    }\n\n    .memory-content {\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Actions — show on hover ── */\n    .memory-actions {\n      position: absolute; top: var(--cg-spacing-8); right: var(--cg-spacing-16);\n      display: flex; gap: var(--cg-spacing-2);\n      opacity: 0; transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .memory:hover .memory-actions { opacity: 1; }\n\n    .mem-btn {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      background: transparent; border: none;\n      color: var(--cg-color-surface-container-outlined); cursor: pointer;\n      display: flex; align-items: center; justify-content: center; padding: 0;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mem-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .mem-btn:hover { color: var(--cg-color-surface-base-text); }\n    .mem-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); opacity: 1; }\n    .mem-btn.pinned-btn { color: var(--cg-color-action-primary-background-default); opacity: 1; }\n\n    .empty {\n      padding: var(--cg-spacing-24) var(--cg-spacing-20);\n      text-align: center; color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Compact variant ── */\n    :host([variant=\"compact\"]) .search-row { display: none; }\n    :host([variant=\"compact\"]) .memory { padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([variant=\"compact\"]) .memory-content { font-size: var(--cg-font-size-xs); }\n    :host([variant=\"compact\"]) .memory-type { display: none; }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'compact' | 'inline' = 'default';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) shortTerm: Memory[] = [];\n  @property({ type: Array }) longTerm: Memory[] = [];\n  @property({ type: Boolean }) searchable = true;\n\n  @state() private _activeTab: 'short' | 'long' = 'short';\n  @state() private _search = '';\n  private _searchTimer?: ReturnType<typeof setTimeout>;\n\n  private get _activeMemories(): Memory[] {\n    const list = this._activeTab === 'short' ? this.shortTerm : this.longTerm;\n    if (!this._search) return list;\n    const q = this._search.toLowerCase();\n    return list.filter(m => m.content.toLowerCase().includes(q));\n  }\n\n  private _formatTime(ts: number): string {\n    const diff = Date.now() - ts;\n    if (diff < 60000) return 'just now';\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n  }\n\n  override render() {\n    const memories = this._activeMemories;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Agent memory\">\n        <div class=\"tabs\">\n          <button class=\"tab ${this._activeTab === 'short' ? 'active' : ''}\" @click=${() => { this._activeTab = 'short'; }}>\n            Short-term<span class=\"tab-count\">${this.shortTerm.length}</span>\n          </button>\n          <button class=\"tab ${this._activeTab === 'long' ? 'active' : ''}\" @click=${() => { this._activeTab = 'long'; }}>\n            Long-term<span class=\"tab-count\">${this.longTerm.length}</span>\n          </button>\n        </div>\n\n        ${this.searchable && this.variant !== 'compact' ? html`\n          <div class=\"search-row\">\n            <input class=\"search-input\" type=\"text\" placeholder=\"Search...\"\n              .value=${this._search}\n              @input=${(e: Event) => {\n                this._search = (e.target as HTMLInputElement).value;\n                if (this._searchTimer) clearTimeout(this._searchTimer);\n                this._searchTimer = setTimeout(() => {\n                  this.dispatchEvent(new CustomEvent('ai-memory-search', { bubbles: true, composed: true, detail: { query: this._search } }));\n                }, 250);\n              }} />\n          </div>\n        ` : nothing}\n\n        <div class=\"memories\">\n          ${memories.length === 0 ? html`\n            <div class=\"empty\">${this._search ? 'No matches' : 'No memories yet'}</div>\n          ` : memories.map(m => html`\n            <div class=\"memory ${m.pinned ? 'pinned' : ''}\">\n              <div class=\"memory-row\">\n                <span class=\"memory-type\">${m.type}</span>\n                <span class=\"memory-meta\">${this._formatTime(m.timestamp)}</span>\n              </div>\n              <div class=\"memory-content\">${m.content}</div>\n              <div class=\"memory-actions\">\n                <button class=\"mem-btn ${m.pinned ? 'pinned-btn' : ''}\"\n                  @click=${() => this.dispatchEvent(new CustomEvent('ai-memory-pin', { bubbles: true, composed: true, detail: { id: m.id, pinned: !m.pinned } }))}\n                  aria-label=\"${m.pinned ? 'Unpin' : 'Pin'}\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"${m.pinned ? 'currentColor' : 'none'}\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 17v5m-4-9.26a2 2 0 01.88-1.66L12 9l3.12 2.08a2 2 0 01.88 1.66V15H8v-2.26zM9 9V4a1 1 0 011-1h4a1 1 0 011 1v5\"/></svg>\n                </button>\n                <button class=\"mem-btn\"\n                  @click=${() => this.dispatchEvent(new CustomEvent('ai-memory-delete', { bubbles: true, composed: true, detail: { id: m.id, type: this._activeTab } }))}\n                  aria-label=\"Delete\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\n                </button>\n              </div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiMemoryPanel","LitElement","list","q","m","ts","diff","memories","html","e","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-model-comparison/ai-model-comparison.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, nothing } from 'lit';
+export interface ComparisonModel {
+    name: string;
+    provider: string;
+    scores: Record<string, number>;
+    costTier: string;
+    contextWindow: number;
+}
+export declare class AiModelComparison extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    models: ComparisonModel[];
+    private _getMetrics;
+    private _bestScore;
+    private _scoreTier;
+    private _formatCtx;
+    private _select;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-model-comparison': AiModelComparison;
+    }
+}
+//# sourceMappingURL=ai-model-comparison.d.ts.map

package/dist/components/ai-model-comparison/ai-model-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-model-comparison.d.ts","sourceRoot":"","sources":["../../../src/components/ai-model-comparison/ai-model-comparison.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA2MnB;IAC0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,MAAM,EAAE,eAAe,EAAE,CAAM;IAE1D,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,OAAO;IAON,MAAM;CAwEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}