@adia-ai/web-components 0.0.1

package/components/agent-trace/agent-trace.js

@@ -0,0 +1,216 @@
+/**
+ * <agent-trace-ui> — Collapsible metrics + training-feedback panel.
+ *
+ * A trailing artifact for agent responses. Summary row shows a handful of
+ * pills (colored dot + label + value); body expands to a label/value/aux grid
+ * plus an optional training-feedback block of icon + line entries.
+ *
+ * JS API:
+ *   const trace = document.createElement('agent-trace-ui');
+ *
+ *   trace.pills = [
+ *     { label: 'match',  value: '90%', tone: 'success' },
+ *     { label: 'intent', value: '7%',  tone: 'danger'  },
+ *     { label: '94/100' },                                  // plain text pill
+ *   ];
+ *
+ *   trace.metrics = [
+ *     { label: 'Pattern',    value: '90%',    aux: 'product-card' },
+ *     { label: 'Intent',     value: '7%',     aux: 'pro' },
+ *     { label: 'Generation', value: '85%',    aux: '31 components' },
+ *     { label: 'Validation', value: '94/100' },
+ *   ];
+ *
+ *   trace.feedback = [
+ *     { icon: 'warning',      tone: 'warning', text: 'Low intent confidence' },
+ *     { icon: 'check-circle', tone: 'success', text: 'Healthy — candidate for promotion' },
+ *   ];
+ *
+ * Attributes:
+ *   open    — start expanded
+ *   label   — header text when no pills (default: "Trace")
+ *
+ * Events:
+ *   trace-toggle — summary opened/closed
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaAgentTrace extends AdiaElement {
+  static properties = {
+    open:  { type: Boolean, default: false, reflect: true },
+    label: { type: String,  default: '',    reflect: true },
+  };
+
+  static template = () => null;
+
+  #pills = [];
+  #metrics = [];
+  #feedback = [];
+  #rootEl = null;
+
+  get pills()    { return this.#pills; }
+  set pills(v)   { this.#pills    = Array.isArray(v) ? v.slice() : []; this.#render(); }
+
+  get metrics()  { return this.#metrics; }
+  set metrics(v) { this.#metrics  = Array.isArray(v) ? v.slice() : []; this.#render(); }
+
+  get feedback()    { return this.#feedback; }
+  set feedback(v)   { this.#feedback = Array.isArray(v) ? v.slice() : []; this.#render(); }
+
+  connected() {
+    this.#buildShell();
+  }
+
+  disconnected() {
+    this.#rootEl?.removeEventListener('toggle', this.#onToggle);
+    this.#rootEl = null;
+  }
+
+  #onToggle = () => {
+    this.open = this.#rootEl.hasAttribute('open');
+    this.dispatchEvent(new CustomEvent('trace-toggle', {
+      bubbles: true, detail: { open: this.open },
+    }));
+  };
+
+  #buildShell() {
+    this.innerHTML = '';
+    this.#rootEl = document.createElement('details');
+    this.#rootEl.setAttribute('data-trace-root', '');
+    if (this.open) this.#rootEl.setAttribute('open', '');
+    this.#rootEl.addEventListener('toggle', this.#onToggle);
+    this.appendChild(this.#rootEl);
+    this.#render();
+  }
+
+  #render() {
+    if (!this.#rootEl) return;
+
+    const pillsHTML = this.#pills.length
+      ? this.#pills.map(p => this.#renderPill(p)).join('<span data-trace-sep>·</span>')
+      : `<span>${escapeText(this.label || 'Trace')}</span>`;
+
+    const hasAux = this.#metrics.some(m => m.aux != null && String(m.aux).trim() !== '');
+    const hasAnyDetails = this.#metrics.some(m => this.#hasDetails(m));
+
+    const headerRow = this.#metrics.length ? `
+      <div data-trace-headers>
+        <span data-trace-header>Stage</span>
+        <span data-trace-header>Score</span>
+        <span data-trace-header>${hasAux ? 'Detail' : ''}</span>
+        ${hasAnyDetails ? '<span data-trace-header-spacer aria-hidden="true"></span>' : ''}
+      </div>
+    ` : '';
+
+    const rowsHTML = this.#metrics.map(m => this.#renderRow(m, hasAnyDetails)).join('');
+
+    const feedbackHTML = this.#feedback.length ? `
+      <div data-trace-feedback>
+        <div data-trace-feedback-label>Training feedback</div>
+        ${this.#feedback.map(f => `
+          <div data-trace-line>
+            <icon-ui name="${escapeAttr(f.icon || 'circle')}" color="${escapeAttr(f.tone || 'muted')}"></icon-ui>
+            <span>${escapeText(f.text || '')}</span>
+          </div>
+        `).join('')}
+      </div>
+    ` : '';
+
+    this.#rootEl.innerHTML = `
+      <summary>
+        <span data-trace-status>${pillsHTML}</span>
+        <icon-ui name="caret-right" color="muted" size="sm" data-trace-chevron></icon-ui>
+      </summary>
+      <div data-trace-body>
+        ${this.#metrics.length ? `<div data-trace-rows${hasAnyDetails ? ' data-has-details' : ''}>${headerRow}${rowsHTML}</div>` : ''}
+        ${feedbackHTML}
+      </div>
+    `;
+  }
+
+  #hasDetails(m) {
+    const d = m?.details;
+    if (Array.isArray(d)) return d.length > 0;
+    if (typeof d === 'string') return d.trim().length > 0;
+    return false;
+  }
+
+  #renderRow(m, hasAnyDetails) {
+    const label = escapeText(m.label || '');
+    const value = escapeText(m.value != null ? String(m.value) : '');
+    const aux   = escapeText(m.aux != null ? String(m.aux) : '');
+    const hasDetails = this.#hasDetails(m);
+
+    const summary = `
+      <span data-trace-label>${label}</span>
+      <span data-trace-value>${value}</span>
+      <span data-trace-aux>${aux}</span>
+      ${hasAnyDetails
+        ? (hasDetails
+            ? '<icon-ui name="caret-right" color="muted" data-trace-row-chevron></icon-ui>'
+            : '<span data-trace-row-chevron-spacer aria-hidden="true"></span>')
+        : ''}
+    `;
+
+    if (!hasDetails) {
+      return `<div data-trace-row>${summary}</div>`;
+    }
+
+    return `
+      <details data-trace-row>
+        <summary>${summary}</summary>
+        <div data-trace-row-body>${this.#renderDetails(m.details)}</div>
+      </details>
+    `;
+  }
+
+  #renderDetails(details) {
+    if (Array.isArray(details)) {
+      return `
+        <dl data-trace-dl>
+          ${details.map(d => `
+            <dt>${escapeText(d.label || '')}</dt>
+            <dd>${escapeText(d.value != null ? String(d.value) : '')}</dd>
+          `).join('')}
+        </dl>
+      `;
+    }
+    if (typeof details === 'string') {
+      // Trust the caller for HTML; render as-is. If you want escaping, pass an array.
+      return details;
+    }
+    return '';
+  }
+
+  #renderPill(p) {
+    const tone = p.tone || 'neutral';
+    const color = {
+      success: 'var(--a-success-strong)',
+      warning: 'var(--a-warning-strong)',
+      danger:  'var(--a-danger-strong)',
+      info:    'var(--a-accent-strong)',
+      neutral: 'var(--a-fg-muted)',
+    }[tone] || 'var(--a-fg-muted)';
+
+    const dot = p.dot === false ? '' :
+      `<icon-ui name="circle-fill" data-trace-dot style="color:${color}"></icon-ui>`;
+
+    const label = p.label != null ? String(p.label) : '';
+    const value = p.value != null ? String(p.value) : '';
+    const text = value ? `${value}${label ? ` ${label}` : ''}` : label;
+
+    return `<span data-trace-pill>${dot}<span>${escapeText(text)}</span></span>`;
+  }
+}
+
+function escapeText(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeAttr(s) {
+  return String(s).replace(/"/g, '&quot;');
+}
+
+customElements.define('agent-trace-ui', AdiaAgentTrace);
+export { AdiaAgentTrace };

package/components/agent-trace/agent-trace.yaml

@@ -0,0 +1,53 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaAgentTrace
+tag: agent-trace-ui
+component: AgentTrace
+category: agent
+version: 1
+description: Collapsible metrics + training-feedback panel for an agent turn.
+props:
+  label:
+    description: Fallback summary label.
+    type: string
+    default: ""
+  open:
+    description: Start expanded.
+    type: boolean
+    default: false
+    reflect: true
+events:
+  trace-toggle:
+    description: "Fired on trace-toggle."
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic
+    description: Trace with pills and a 3-col metric grid.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "AgentTrace"
+        }
+      ]
+keywords:
+  - trace
+  - metrics
+  - confidence
+  - telemetry
+  - training feedback
+synonyms: {}
+related:
+  - agent-reasoning-ui
+  - agent-feedback-bar-ui

package/components/alert/alert.a2ui.json

@@ -0,0 +1,211 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Alert.json",
+  "title": "Alert",
+  "description": "Inline alert banner with optional icon and close button.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "closable": {
+      "description": "Whether a close button is displayed",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Alert"
+    },
+    "icon": {
+      "description": "Icon identifier displayed before the message content",
+      "type": "string",
+      "default": ""
+    },
+    "text": {
+      "description": "Alert message text",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Semantic color variant. `error` kept as alias for `danger`.",
+      "type": "string",
+      "enum": [
+        "default",
+        "info",
+        "success",
+        "warning",
+        "error",
+        "danger",
+        "muted",
+        "neutral"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "close": {
+        "description": "Fired when the close button is clicked"
+      }
+    },
+    "examples": [
+      {
+        "description": "Single alert component with icon and dismiss action.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Alert\",\n    \"variant\": \"info\",\n    \"icon\": \"info-circle\",\n    \"title\": \"System Update\",\n    \"description\": \"A new version is available. Please refresh to get the latest features.\",\n    \"dismissible\": true\n  }\n]",
+        "name": "alert-banner"
+      },
+      {
+        "description": "Card with error alert and a retry button for error state display.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"alert\"\n    ]\n  },\n  {\n    \"id\": \"alert\",\n    \"component\": \"Alert\",\n    \"variant\": \"error\",\n    \"title\": \"Something went wrong\",\n    \"description\": \"We encountered an error while loading the data. Please try again.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"retry\"\n    ]\n  },\n  {\n    \"id\": \"retry\",\n    \"component\": \"Button\",\n    \"text\": \"Retry\",\n    \"icon\": \"refresh\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "error-state"
+      }
+    ],
+    "keywords": [
+      "alert",
+      "inbox",
+      "mailbox",
+      "message",
+      "snackbar",
+      "popup",
+      "modal",
+      "dialog",
+      "banner",
+      "warning",
+      "error",
+      "success",
+      "info",
+      "confirm",
+      "notification",
+      "announce"
+    ],
+    "name": "AdiaAlert",
+    "related": [
+      "button"
+    ],
+    "slots": {
+      "default": {
+        "description": "Rich content for the alert body"
+      },
+      "icon": {
+        "description": "Custom icon element"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "alert": [
+        "alert",
+        "banner",
+        "toast",
+        "notification"
+      ],
+      "announce": [
+        "alert",
+        "banner",
+        "cta"
+      ],
+      "banner": [
+        "alert",
+        "cta",
+        "hero",
+        "cookie"
+      ],
+      "confirm": [
+        "alert",
+        "cookie",
+        "consent"
+      ],
+      "dialog": [
+        "drawer",
+        "alert",
+        "popover",
+        "panel"
+      ],
+      "error": [
+        "alert",
+        "error",
+        "toast",
+        "empty"
+      ],
+      "inbox": [
+        "notification",
+        "alert",
+        "toast",
+        "message",
+        "email",
+        "mail",
+        "folder"
+      ],
+      "info": [
+        "alert",
+        "toast",
+        "notification",
+        "tooltip"
+      ],
+      "mailbox": [
+        "notification",
+        "alert",
+        "message"
+      ],
+      "message": [
+        "chat",
+        "notification",
+        "toast",
+        "alert"
+      ],
+      "modal": [
+        "drawer",
+        "alert",
+        "popover",
+        "panel"
+      ],
+      "notification": [
+        "notification",
+        "toast",
+        "alert",
+        "badge"
+      ],
+      "popup": [
+        "toast",
+        "notification",
+        "alert",
+        "popover",
+        "drawer"
+      ],
+      "snackbar": [
+        "toast",
+        "notification",
+        "alert"
+      ],
+      "success": [
+        "alert",
+        "toast",
+        "notification"
+      ],
+      "warning": [
+        "alert",
+        "error",
+        "toast"
+      ]
+    },
+    "tag": "alert-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/alert/alert.css

@@ -0,0 +1,88 @@
+@scope (alert-ui) {
+  :where(:scope) {
+    /* ── Colors ── */
+    --alert-bg:       var(--a-bg-muted);
+    --alert-fg:       var(--a-fg);
+    --alert-border:   var(--a-border-subtle);
+    --alert-icon-fg:  var(--a-fg-muted);
+    --alert-close-fg:       var(--a-fg-muted);
+    --alert-close-fg-hover: var(--a-fg);
+
+    /* ── Layout ── */
+    --alert-radius:   var(--a-radius-md);
+    --alert-px:       var(--a-space-3);
+    --alert-py:       var(--a-space-2);
+    --alert-gap:      var(--a-space-2);
+
+    /* ── Typography ── */
+    --alert-font:     var(--a-ui-size);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--alert-gap);
+    padding: var(--alert-py) var(--alert-px);
+    border: 1px solid var(--alert-border);
+    border-radius: var(--alert-radius);
+    font-size: var(--alert-font);
+    color: var(--alert-fg);
+    background: var(--alert-bg);
+  }
+
+  /* ── Variants ── */
+  :scope[variant="info"] {
+    --alert-bg:      var(--a-info-muted);
+    --alert-fg:      var(--a-info-text);
+    --alert-border:  var(--a-info-border-subtle);
+    --alert-icon-fg: var(--a-info);
+  }
+
+  :scope[variant="success"] {
+    --alert-bg:      var(--a-success-muted);
+    --alert-fg:      var(--a-success-text);
+    --alert-border:  var(--a-success-border-subtle);
+    --alert-icon-fg: var(--a-success);
+  }
+
+  :scope[variant="warning"] {
+    --alert-bg:      var(--a-warning-muted);
+    --alert-fg:      var(--a-warning-text);
+    --alert-border:  var(--a-warning-border-subtle);
+    --alert-icon-fg: var(--a-warning);
+  }
+
+  :scope[variant="danger"] {
+    --alert-bg:      var(--a-danger-muted);
+    --alert-fg:      var(--a-danger-text);
+    --alert-border:  var(--a-danger-border-subtle);
+    --alert-icon-fg: var(--a-danger);
+  }
+
+  /* ── Slots ── */
+  :scope [slot="leading"] {
+    flex-shrink: 0;
+    color: var(--alert-icon-fg);
+  }
+
+  :scope [slot="content"] {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :scope [slot="close"] {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--alert-close-fg);
+    padding: 0;
+    line-height: 1;
+    font-size: 1rem;
+  }
+
+  :scope [slot="close"]:hover {
+    color: var(--alert-close-fg-hover);
+  }
+}

package/components/alert/alert.js

@@ -0,0 +1,96 @@
+/**
+ * <alert-ui text="Something happened" variant="info" icon="info-circle"></alert-ui>
+ * <alert-ui text="Deleted." variant="danger" closable></alert-ui>
+ *
+ * Inline alert banner with optional icon and close button.
+ *
+ * Variants: default, info, success, warning, danger
+ * Slots: leading (icon), content (text), close (dismiss button)
+ *
+ * Events:
+ *   close — fired when the user dismisses the alert
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaAlert extends AdiaElement {
+  static properties = {
+    text:     { type: String,  default: '', reflect: true },
+    variant:  { type: String,  default: 'default', reflect: true },
+    closable: { type: Boolean, default: false, reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+  };
+
+  static parts = {
+    leading: '<icon-ui slot="leading"></icon-ui>',
+    content: '<span slot="content"></span>',
+    close:   '<button slot="close" type="button" aria-label="Close">\u00d7</button>',
+  };
+
+  static template = () => null;
+
+  #onClick = (e) => {
+    if (e.target.closest('[slot="close"]')) this.#close();
+  };
+
+  #onKeydown = (e) => {
+    if (e.target.closest('[slot="close"]') && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      this.#close();
+    }
+  };
+
+  connected() {
+    this.#updateRole();
+
+    // Stamp default DOM if nothing was provided
+    if (this.icon) this.ensure('leading');
+    this.ensure('content');
+    if (this.closable) this.ensure('close');
+
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKeydown);
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKeydown);
+  }
+
+  render() {
+    // Icon
+    if (this.icon) {
+      const leading = this.ensure('leading');
+      if (leading) leading.setAttribute('name', this.icon);
+    } else {
+      this.drop('leading');
+    }
+
+    // Text
+    const content = this.ensure('content');
+    if (content) content.textContent = this.text;
+
+    // Close button
+    if (this.closable) {
+      this.ensure('close');
+    } else {
+      this.drop('close');
+    }
+
+    // Role
+    this.#updateRole();
+  }
+
+  #updateRole() {
+    const role = (this.variant === 'danger' || this.variant === 'warning') ? 'alert' : 'status';
+    this.setAttribute('role', role);
+  }
+
+  #close() {
+    this.dispatchEvent(new Event('close', { bubbles: true }));
+    this.remove();
+  }
+}
+customElements.define('alert-ui', AdiaAlert);
+
+export { AdiaAlert };