@adia-ai/web-components 0.0.1

package/components/agent-suggestions/agent-suggestions.js

@@ -0,0 +1,87 @@
+/**
+ * <agent-suggestions-ui> — Row of follow-up suggestion chips.
+ *
+ * The agent proposes 2-4 next-step prompts; user picks one. The host listens
+ * for `suggestion-select` and dispatches the associated prompt.
+ *
+ * JS API:
+ *   el.suggestions = [
+ *     { label: 'Add price comparison' },                    // label === prompt
+ *     { label: 'Add quantity stepper', prompt: 'add a stepper' },
+ *     { label: 'Variants picker',       prompt: 'add a variants picker', icon: 'tag' },
+ *   ];
+ *
+ *   el.addEventListener('suggestion-select', (e) => {
+ *     submit(e.detail.prompt);
+ *   });
+ *
+ * Attributes:
+ *   variant   — outline (default) | ghost | subtle
+ *   size      — sm (default) | md
+ *   disabled  — disable all chips
+ *
+ * Events:
+ *   suggestion-select — detail: { label, prompt, index }
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaAgentSuggestions extends AdiaElement {
+  static properties = {
+    variant:  { type: String,  default: 'outline', reflect: true },
+    size:     { type: String,  default: 'sm',      reflect: true },
+    disabled: { type: Boolean, default: false,     reflect: true },
+  };
+
+  static template = () => null;
+
+  #suggestions = [];
+
+  get suggestions() { return this.#suggestions; }
+  set suggestions(v) {
+    this.#suggestions = Array.isArray(v) ? v.slice() : [];
+    this.#render();
+  }
+
+  connected() {
+    this.#render();
+  }
+
+  disconnected() {
+    this.innerHTML = '';
+  }
+
+  #render() {
+    this.innerHTML = '';
+    for (let i = 0; i < this.#suggestions.length; i++) {
+      const s = this.#suggestions[i];
+      const label = typeof s === 'string' ? s : s.label || s.prompt || '';
+      const prompt = typeof s === 'string' ? s : s.prompt || s.label || '';
+      const icon = typeof s === 'object' ? s.icon : null;
+
+      const chip = document.createElement('button-ui');
+      chip.setAttribute('text', truncate(label, 42));
+      chip.setAttribute('variant', this.variant);
+      chip.setAttribute('size', this.size);
+      if (icon) chip.setAttribute('icon', icon);
+      if (this.disabled) chip.setAttribute('disabled', '');
+
+      chip.addEventListener('press', () => {
+        if (this.disabled) return;
+        this.dispatchEvent(new CustomEvent('suggestion-select', {
+          bubbles: true,
+          detail: { label, prompt, index: i },
+        }));
+      });
+      this.appendChild(chip);
+    }
+  }
+}
+
+function truncate(s, n) {
+  if (typeof s !== 'string') return '';
+  return s.length > n ? s.slice(0, n - 1) + '…' : s;
+}
+
+customElements.define('agent-suggestions-ui', AdiaAgentSuggestions);
+export { AdiaAgentSuggestions };

package/components/agent-suggestions/agent-suggestions.yaml

@@ -0,0 +1,59 @@
+# 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: AdiaAgentSuggestions
+tag: agent-suggestions-ui
+component: AgentSuggestions
+category: agent
+version: 1
+description: Row of follow-up suggestion chips.
+props:
+  disabled:
+    description: Disable all chips.
+    type: boolean
+    default: false
+    reflect: true
+  size:
+    description: sm | md
+    type: string
+    default: sm
+  variant:
+    description: outline | ghost | subtle
+    type: string
+    default: outline
+events:
+  suggestion-select:
+    description: "Fired on suggestion-select."
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic
+    description: Three follow-up chips
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "AgentSuggestions"
+        }
+      ]
+keywords:
+  - suggestions
+  - chips
+  - follow-up
+  - quick replies
+synonyms: {}
+related:
+  - agent-questions-ui
+  - agent-feedback-bar-ui

package/components/agent-trace/agent-trace.a2ui.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentTrace.json",
+  "title": "AgentTrace",
+  "description": "Collapsible metrics + training-feedback panel for an agent turn.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AgentTrace"
+    },
+    "label": {
+      "description": "Fallback summary label.",
+      "type": "string",
+      "default": ""
+    },
+    "open": {
+      "description": "Start expanded.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "trace-toggle": {
+        "description": "Fired on trace-toggle."
+      }
+    },
+    "examples": [
+      {
+        "description": "Trace with pills and a 3-col metric grid.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AgentTrace\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "trace",
+      "metrics",
+      "confidence",
+      "telemetry",
+      "training feedback"
+    ],
+    "name": "AdiaAgentTrace",
+    "related": [
+      "agent-reasoning-ui",
+      "agent-feedback-bar-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "agent-trace-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/agent-trace/agent-trace.css

@@ -0,0 +1,275 @@
+@scope (agent-trace-ui) {
+  :where(:scope) {
+    /* ── Typography ── */
+    --agent-trace-font:          var(--a-ui-sm);
+    --agent-trace-label-font:    var(--a-ui-sm);
+
+    /* ── Colors ── */
+    --agent-trace-fg:            var(--a-fg);
+    --agent-trace-fg-muted:      var(--a-fg-muted);
+    --agent-trace-fg-subtle:     var(--a-fg-subtle);
+    --agent-trace-sep:           var(--a-fg-subtle);
+    --agent-trace-border:        var(--a-border-subtle);
+
+    /* ── Layout ── */
+    --agent-trace-pill-gap:      var(--a-space-1);
+    --agent-trace-inline-gap:    var(--a-space-2);
+    --agent-trace-block-gap:     var(--a-space-3);
+    --agent-trace-padding-y:     var(--a-space-2);
+    /* Component-intrinsic measurement; no --a-space-* equivalent */
+    --agent-trace-dot-size:      6px;
+    --agent-trace-row-label-col: 80px;
+    /* Shared across every detail DL so values tabulate at the same x. */
+    --agent-trace-detail-label-col: 9rem;
+
+    /* ── Motion ── */
+    --agent-trace-chevron-dur:   var(--a-duration-fast);
+  }
+
+  :scope {
+    display: block;
+    font-size: var(--agent-trace-font);
+    color: var(--agent-trace-fg-muted);
+  }
+
+  [data-trace-root] {
+    padding-block: var(--agent-trace-padding-y);
+  }
+
+  [data-trace-root] > summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: var(--agent-trace-inline-gap);
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  [data-trace-root] > summary::-webkit-details-marker { display: none; }
+
+  [data-trace-status] {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--agent-trace-inline-gap);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-trace-pill] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--agent-trace-pill-gap);
+    white-space: nowrap;
+  }
+
+  [data-trace-dot] {
+    --a-icon-size: var(--agent-trace-dot-size);
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  [data-trace-sep] {
+    color: var(--agent-trace-sep);
+    margin-inline: 2px;
+  }
+
+  [data-trace-chevron] {
+    flex-shrink: 0;
+    transition: transform var(--agent-trace-chevron-dur);
+  }
+
+  [data-trace-root][open] [data-trace-chevron] {
+    transform: rotate(90deg);
+  }
+
+  [data-trace-body] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--agent-trace-block-gap);
+    margin-block-start: var(--agent-trace-block-gap);
+  }
+
+  /* Rows container — a stack; each row owns its own grid. This makes
+     expandable details elements play well, since <details> can't be a
+     grid item spanning multiple tracks cleanly. */
+  [data-trace-rows] {
+    --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-trace-rows][data-has-details] {
+    --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr auto;
+  }
+
+  /* Each row's summary lays out the columns. For non-expandable rows
+     (plain divs), the row itself is the grid. For expandable rows
+     (<details>), the summary is the grid; the body is a block below. */
+  [data-trace-headers],
+  div[data-trace-row],
+  details[data-trace-row] > summary {
+    display: grid;
+    grid-template-columns: var(--trace-row-cols);
+    column-gap: var(--agent-trace-block-gap);
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  details[data-trace-row] {
+    display: block;
+    min-width: 0;
+  }
+
+  /* Column headers — small caps with subtle underline */
+  [data-trace-headers] {
+    padding-block-end: var(--a-space-1);
+    border-block-end: 1px solid var(--agent-trace-border);
+    margin-block-end: var(--a-space-1);
+  }
+
+  [data-trace-header] {
+    font-size: calc(var(--agent-trace-font) * 0.85);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: var(--a-weight-medium);
+    color: var(--agent-trace-fg-subtle);
+  }
+
+  [data-trace-header]:nth-of-type(2) {
+    text-align: right;
+  }
+
+  /* Rows */
+  [data-trace-row] {
+    padding-block: var(--a-space-0-5);
+    border-radius: var(--a-radius-sm);
+  }
+
+  details[data-trace-row] > summary {
+    cursor: pointer;
+    list-style: none;
+    padding-block: var(--a-space-0-5);
+    border-radius: var(--a-radius-sm);
+    transition: background var(--a-duration-fast);
+  }
+
+  details[data-trace-row] > summary::-webkit-details-marker { display: none; }
+  details[data-trace-row] > summary::marker { content: ''; }
+
+  details[data-trace-row] > summary:hover {
+    background: var(--a-bg-subtle);
+  }
+
+  [data-trace-label] {
+    color: var(--agent-trace-fg-subtle);
+  }
+
+  [data-trace-value] {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--agent-trace-fg);
+  }
+
+  [data-trace-aux] {
+    color: var(--agent-trace-fg-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Chevron in the trailing column */
+  [data-trace-row-chevron] {
+    --a-icon-size: 0.875em;
+    justify-self: end;
+    align-self: center;
+    transition: transform var(--a-duration-fast) var(--agent-trace-chevron-dur, var(--a-duration-fast));
+    color: var(--agent-trace-fg-muted);
+  }
+
+  details[data-trace-row][open] > summary > [data-trace-row-chevron] {
+    transform: rotate(90deg);
+  }
+
+  [data-trace-row-chevron-spacer] {
+    width: 0.875em;
+    justify-self: end;
+  }
+
+  [data-trace-header-spacer] { justify-self: end; }
+
+  /* Details body — tree-style: line hangs under the first column, children
+     indent off it. Matches the chain-of-thought reasoning affordance. */
+  [data-trace-row-body] {
+    margin-block: var(--a-space-1) var(--a-space-2);
+    margin-inline-start: var(--a-space-2);
+    padding-inline-start: var(--agent-trace-block-gap);
+    border-inline-start: 1px solid var(--agent-trace-border);
+  }
+
+  [data-trace-dl] {
+    display: grid;
+    grid-template-columns: var(--agent-trace-detail-label-col) 1fr;
+    column-gap: var(--agent-trace-block-gap);
+    row-gap: var(--a-space-0-5);
+    margin: 0;
+    align-items: baseline;
+  }
+
+  [data-trace-dl] > dt {
+    color: var(--agent-trace-fg-subtle);
+    font-size: calc(var(--agent-trace-font) * 0.95);
+  }
+
+  [data-trace-dl] > dd {
+    margin: 0;
+    color: var(--agent-trace-fg);
+    font-variant-numeric: tabular-nums;
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+
+  [data-trace-feedback] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-1);
+    padding-block-start: var(--agent-trace-inline-gap);
+    border-block-start: 1px solid var(--agent-trace-border);
+  }
+
+  [data-trace-feedback-label] {
+    color: var(--agent-trace-fg-subtle);
+    font-size: calc(var(--agent-trace-label-font) * 0.85);
+    font-weight: var(--a-weight-medium);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding-block-end: var(--a-space-1);
+  }
+
+  /* Feedback lines — icon sits like a list bullet, sized to 1em so it
+     scales with the line's font-size. Grid gives a consistent indent
+     regardless of icon or text length. */
+  [data-trace-feedback] [data-trace-line] {
+    display: grid;
+    grid-template-columns: 1em 1fr;
+    column-gap: var(--agent-trace-inline-gap);
+    align-items: baseline;
+    line-height: 1.5;
+    font-size: var(--agent-trace-font);
+    color: var(--agent-trace-fg);
+  }
+
+  [data-trace-feedback] [data-trace-line] > icon-ui {
+    --a-icon-size: 1em;
+    align-self: center;
+    line-height: 0;
+  }
+
+  [data-trace-feedback] [data-trace-line] > span {
+    min-width: 0;
+    overflow-wrap: break-word;
+    color: var(--agent-trace-fg-muted);
+  }
+}