@adia-ai/web-components 0.0.1

package/components/agent-questions/agent-questions.js

@@ -0,0 +1,189 @@
+/**
+ * <agent-questions-ui> — Multi-choice clarifying-question cards.
+ *
+ * The agent asks a structured question and offers 2-6 options as stacked cards
+ * (claude.ai style). Supports single- or multi-select. On submit, host receives
+ * the picked option ids.
+ *
+ * JS API:
+ *   el.question = 'Which direction fits best?';
+ *   el.helper   = 'Pick one — we can revisit later.';
+ *   el.options  = [
+ *     { id: 'lean',      label: 'Lean & minimal',   description: 'Whitespace-heavy, neutral palette.', icon: 'square' },
+ *     { id: 'expressive',label: 'Expressive',       description: 'Bold type, vivid accents.',         icon: 'sparkle' },
+ *     { id: 'utilitarian',label: 'Utilitarian',     description: 'Dense, information-first.',          icon: 'gear' },
+ *   ];
+ *
+ *   el.addEventListener('questions-answer', (e) => {
+ *     // detail: { selected: string[], option: optionObject | null }
+ *   });
+ *
+ * Attributes:
+ *   multi      — allow multiple selections (default: false)
+ *   submit-label — label for the submit button (shown only when multi)
+ *
+ * Events:
+ *   questions-answer — detail: { selected: string[], option: chosen | null }
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaAgentQuestions extends AdiaElement {
+  static properties = {
+    multi:          { type: Boolean, default: false, reflect: true },
+    question:       { type: String,  default: '',    reflect: true },
+    helper:         { type: String,  default: '',    reflect: true },
+    'submit-label': { type: String,  default: 'Continue', attribute: 'submit-label' },
+  };
+
+  static template = () => null;
+
+  #options = [];
+  #selected = new Set();
+  #answered = false;
+  #questionEl = null;
+  #helperEl = null;
+  #optionsEl = null;
+  #submitEl = null;
+
+  get options() { return this.#options; }
+  set options(v) {
+    this.#options = Array.isArray(v) ? v.slice() : [];
+    this.#selected.clear();
+    this.#answered = false;
+    this.#render();
+  }
+
+  connected() {
+    this.#build();
+  }
+
+  disconnected() {
+    this.#submitEl?.removeEventListener('press', this.#onSubmit);
+    this.#questionEl = this.#helperEl = this.#optionsEl = this.#submitEl = null;
+  }
+
+  render() {
+    // Keep question/helper text in sync with attribute changes
+    if (this.#questionEl) {
+      this.#questionEl.textContent = this.question || '';
+      this.#questionEl.hidden = !this.question;
+    }
+    if (this.#helperEl) {
+      this.#helperEl.textContent = this.helper || '';
+      this.#helperEl.hidden = !this.helper;
+    }
+    if (this.#submitEl) {
+      this.#submitEl.setAttribute('text', this['submit-label'] || 'Continue');
+      this.#submitEl.hidden = !this.multi;
+    }
+  }
+
+  #build() {
+    this.innerHTML = '';
+
+    this.#questionEl = document.createElement('div');
+    this.#questionEl.setAttribute('data-questions-q', '');
+    if (this.question) this.#questionEl.textContent = this.question;
+    else this.#questionEl.hidden = true;
+
+    this.#helperEl = document.createElement('div');
+    this.#helperEl.setAttribute('data-questions-helper', '');
+    if (this.helper) this.#helperEl.textContent = this.helper;
+    else this.#helperEl.hidden = true;
+
+    this.#optionsEl = document.createElement('div');
+    this.#optionsEl.setAttribute('data-questions-options', '');
+
+    this.#submitEl = document.createElement('button-ui');
+    this.#submitEl.setAttribute('text', this['submit-label'] || 'Continue');
+    this.#submitEl.setAttribute('variant', 'primary');
+    this.#submitEl.setAttribute('size', 'sm');
+    this.#submitEl.setAttribute('disabled', '');
+    if (!this.multi) this.#submitEl.hidden = true;
+    this.#submitEl.addEventListener('press', this.#onSubmit);
+
+    this.append(this.#questionEl, this.#helperEl, this.#optionsEl, this.#submitEl);
+    this.#render();
+  }
+
+  #render() {
+    if (!this.#optionsEl) return;
+    this.#optionsEl.innerHTML = '';
+
+    for (const opt of this.#options) {
+      const card = document.createElement('button');
+      card.type = 'button';
+      card.setAttribute('data-questions-option', '');
+      card.setAttribute('role', this.multi ? 'checkbox' : 'radio');
+      card.setAttribute('aria-checked', this.#selected.has(opt.id) ? 'true' : 'false');
+      if (this.#selected.has(opt.id)) card.setAttribute('data-selected', '');
+      if (this.#answered) card.setAttribute('disabled', '');
+
+      const iconHTML = opt.icon
+        ? `<icon-ui name="${escapeAttr(opt.icon)}" color="muted" data-questions-option-icon></icon-ui>`
+        : '';
+      const checkHTML = `
+        <span data-questions-option-check aria-hidden="true">
+          <icon-ui name="check" size="sm" color="accent"></icon-ui>
+        </span>`;
+
+      card.innerHTML = `
+        ${iconHTML}
+        <span data-questions-option-body>
+          <span data-questions-option-label>${escapeText(opt.label || '')}</span>
+          ${opt.description ? `<span data-questions-option-desc>${escapeText(opt.description)}</span>` : ''}
+        </span>
+        ${checkHTML}
+      `;
+
+      card.addEventListener('click', () => this.#pick(opt));
+      this.#optionsEl.appendChild(card);
+    }
+
+    if (this.#submitEl) {
+      this.#submitEl.disabled = this.#answered || this.#selected.size === 0;
+    }
+  }
+
+  #pick(opt) {
+    if (this.#answered) return;
+    if (this.multi) {
+      if (this.#selected.has(opt.id)) this.#selected.delete(opt.id);
+      else this.#selected.add(opt.id);
+      this.#render();
+    } else {
+      this.#selected.clear();
+      this.#selected.add(opt.id);
+      this.#answered = true;
+      this.#render();
+      this.dispatchEvent(new CustomEvent('questions-answer', {
+        bubbles: true,
+        detail: { selected: [opt.id], option: opt },
+      }));
+    }
+  }
+
+  #onSubmit = () => {
+    if (this.#answered || this.#selected.size === 0) return;
+    this.#answered = true;
+    this.#render();
+    const ids = [...this.#selected];
+    const first = this.#options.find(o => o.id === ids[0]) || null;
+    this.dispatchEvent(new CustomEvent('questions-answer', {
+      bubbles: true,
+      detail: { selected: ids, option: first },
+    }));
+  };
+}
+
+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-questions-ui', AdiaAgentQuestions);
+export { AdiaAgentQuestions };

package/components/agent-questions/agent-questions.yaml

@@ -0,0 +1,63 @@
+# 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: AdiaAgentQuestions
+tag: agent-questions-ui
+component: AgentQuestions
+category: agent
+version: 1
+description: Multi-choice clarifying-question cards.
+props:
+  helper:
+    description: Helper text.
+    type: string
+    default: ""
+  multi:
+    description: Allow multi-select.
+    type: boolean
+    default: false
+  question:
+    description: Headline question.
+    type: string
+    default: ""
+  submitLabel:
+    description: Submit button label (multi mode).
+    type: string
+    default: Continue
+    attribute: submit-label
+events:
+  questions-answer:
+    description: "Fired on questions-answer."
+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: Three-option clarifying question
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "AgentQuestions",
+          "question": "Which direction fits best?"
+        }
+      ]
+keywords:
+  - questions
+  - choices
+  - options
+  - multiple choice
+  - elicit
+  - clarify
+synonyms: {}
+related:
+  - agent-suggestions-ui
+  - agent-reasoning-ui

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

@@ -0,0 +1,100 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentReasoning.json",
+  "title": "AgentReasoning",
+  "description": "Agent inner monologue + pipeline viewer with steps, thoughts, plans, and iterations.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "autocollapse": {
+      "description": "Auto-collapse after finish().",
+      "type": "boolean",
+      "default": true
+    },
+    "collapsed": {
+      "description": "Start collapsed.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "AgentReasoning"
+    },
+    "heading": {
+      "description": "Fallback summary label.",
+      "type": "string",
+      "default": ""
+    },
+    "mode": {
+      "description": "compact | expanded",
+      "type": "string",
+      "default": "compact"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "reasoning-finish": {
+        "description": "Fired on reasoning-finish."
+      },
+      "reasoning-step-toggle": {
+        "description": "Fired on reasoning-step-toggle."
+      },
+      "reasoning-toggle": {
+        "description": "Fired on reasoning-toggle."
+      }
+    },
+    "examples": [
+      {
+        "description": "Agent reasoning with a plan and three steps.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AgentReasoning\",\n    \"heading\": \"Analyzing request\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "reasoning",
+      "thinking",
+      "agent",
+      "chain of thought",
+      "cot",
+      "monologue",
+      "plan",
+      "iteration"
+    ],
+    "name": "AdiaAgentReasoning",
+    "related": [
+      "agent-trace-ui",
+      "pipeline-status-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "chain-of-thought-n": "agent-reasoning-ui",
+      "cot-n": "agent-reasoning-ui"
+    },
+    "tag": "agent-reasoning-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/agent-reasoning/agent-reasoning.css

@@ -0,0 +1,273 @@
+@scope (agent-reasoning-ui) {
+  :where(:scope) {
+    /* Grid — same columns as timeline-ui so they align via subgrid */
+    --agent-reasoning-marker-w:        1rem;
+    --agent-reasoning-gap-col:         var(--a-space-2);
+    --agent-reasoning-gap-row:         var(--a-space-2);
+
+    /* Typography */
+    --agent-reasoning-font:            var(--a-ui-sm);
+    --agent-reasoning-weight-heading:  var(--a-weight-medium);
+
+    /* Colors */
+    --agent-reasoning-fg:              var(--a-fg);
+    --agent-reasoning-fg-muted:        var(--a-fg-muted);
+    --agent-reasoning-fg-subtle:       var(--a-fg-subtle);
+    --agent-reasoning-border:          var(--a-border-subtle);
+    --agent-reasoning-spinner-track:   var(--a-border-subtle);
+    --agent-reasoning-spinner-head:    var(--a-accent-bg);
+    --agent-reasoning-iter-bg:         var(--a-bg-subtle);
+    --agent-reasoning-iter-bg-active:  var(--a-bg-muted);
+    --agent-reasoning-iter-border:     var(--a-border-subtle);
+
+    /* Sizes */
+    --agent-reasoning-marker-size:     var(--a-icon-size);
+    --agent-reasoning-radius:          var(--a-radius);
+    --agent-reasoning-iter-padding:    var(--a-space-3);
+
+    /* Motion */
+    --agent-reasoning-duration:        var(--a-duration-fast);
+    --agent-reasoning-easing:          var(--a-easing-out);
+    --agent-reasoning-spin-duration:   0.8s;
+  }
+
+  :scope {
+    display: grid;
+    grid-template-columns:
+      [marker] var(--agent-reasoning-marker-w)
+      [content] 1fr
+      [aside] auto;
+    column-gap: var(--agent-reasoning-gap-col);
+    row-gap: var(--agent-reasoning-gap-row);
+    min-width: 0;
+    font-size: var(--agent-reasoning-font);
+    color: var(--agent-reasoning-fg);
+  }
+
+  /* ═══════ Summary row ═══════ */
+
+  [data-reasoning-summary] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    padding-bottom: var(--a-space-1);
+    color: var(--agent-reasoning-fg-muted);
+  }
+
+  [data-reasoning-summary] > [data-reasoning-check],
+  [data-reasoning-summary] > [data-reasoning-spinner] {
+    grid-column: marker;
+    grid-row: 1;
+    justify-self: center;
+    align-self: center;
+    flex-shrink: 0;
+  }
+
+  [data-reasoning-spinner] {
+    width: var(--agent-reasoning-marker-size);
+    height: var(--agent-reasoning-marker-size);
+    border: 1.5px solid var(--agent-reasoning-spinner-track);
+    border-top-color: var(--agent-reasoning-spinner-head);
+    border-radius: 50%;
+    animation: _ar-spin var(--agent-reasoning-spin-duration) linear infinite;
+    box-sizing: border-box;
+  }
+
+  [data-reasoning-spinner][data-small] {
+    width: calc(var(--agent-reasoning-marker-size) * 0.75);
+    height: calc(var(--agent-reasoning-marker-size) * 0.75);
+  }
+
+  [data-reasoning-check] {
+    --a-icon-size: var(--agent-reasoning-marker-size);
+  }
+
+  [data-reasoning-summary] > [data-reasoning-label] {
+    grid-column: content;
+    grid-row: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  [data-reasoning-summary] > [data-reasoning-meta] {
+    grid-column: aside;
+    grid-row: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--agent-reasoning-gap-col);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ═══════ Body ═══════ */
+
+  [data-reasoning-body] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    row-gap: var(--agent-reasoning-gap-row);
+  }
+
+  [data-reasoning-body][hidden] { display: none; }
+
+  /* All direct children of body span the grid */
+  [data-reasoning-body] > * {
+    grid-column: 1 / -1;
+  }
+
+  /* ═══════ Thought — horizontal dash in marker column, text in content ═══════ */
+
+  [data-reasoning-thought] {
+    display: grid;
+    grid-template-columns: subgrid;
+    align-items: center;
+    line-height: 1.5;
+    color: var(--agent-reasoning-fg);
+    animation: _ar-fade var(--agent-reasoning-duration) var(--agent-reasoning-easing);
+  }
+
+  [data-reasoning-thought]::before {
+    content: '';
+    grid-column: marker;
+    height: 1px;
+    background: var(--agent-reasoning-border);
+    align-self: center;
+    width: 100%;
+  }
+
+  [data-reasoning-thought] > [data-reasoning-thought-text] {
+    grid-column: content / -1;
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+
+  /* ═══════ Plan — card in content+aside, marker empty ═══════ */
+
+  [data-reasoning-plan] {
+    grid-column: content / -1 !important;
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-1);
+    padding: var(--a-space-2) var(--a-space-3);
+    border: 1px solid var(--agent-reasoning-border);
+    border-radius: var(--agent-reasoning-radius);
+    background: var(--agent-reasoning-iter-bg);
+  }
+
+  [data-reasoning-plan-label] {
+    font-size: var(--agent-reasoning-font);
+    color: var(--agent-reasoning-fg-subtle);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: var(--agent-reasoning-weight-heading);
+  }
+
+  [data-reasoning-plan-list] {
+    margin: 0;
+    padding-inline-start: var(--a-space-5);
+    font-size: var(--agent-reasoning-font);
+    color: var(--agent-reasoning-fg);
+  }
+
+  [data-reasoning-plan-list] > li {
+    padding-block: 1px;
+  }
+
+  /* ═══════ Iteration — card with its own grid ═══════ */
+
+  [data-reasoning-iteration] {
+    display: grid;
+    grid-template-columns:
+      [marker] var(--agent-reasoning-marker-w)
+      [content] 1fr
+      [aside] auto;
+    column-gap: var(--agent-reasoning-gap-col);
+    row-gap: var(--a-space-2);
+    padding: var(--agent-reasoning-iter-padding);
+    border: 1px solid var(--agent-reasoning-iter-border);
+    border-radius: var(--agent-reasoning-radius);
+    background: var(--agent-reasoning-iter-bg);
+  }
+
+  [data-reasoning-iteration][data-active] {
+    background: var(--agent-reasoning-iter-bg-active);
+  }
+
+  [data-reasoning-iter-header] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+    color: var(--agent-reasoning-fg-muted);
+  }
+
+  [data-reasoning-iter-header] > [data-reasoning-spinner],
+  [data-reasoning-iter-header] > icon-ui {
+    grid-column: marker;
+    justify-self: center;
+    align-self: center;
+  }
+
+  [data-reasoning-iter-n] {
+    grid-column: content;
+    font-variant-numeric: tabular-nums;
+    color: var(--agent-reasoning-fg-subtle);
+    font-weight: var(--agent-reasoning-weight-heading);
+    white-space: nowrap;
+  }
+
+  [data-reasoning-iter-label] {
+    grid-column: content;
+    justify-self: start;
+    margin-inline-start: var(--a-space-2);
+    color: var(--agent-reasoning-fg);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  /* Compact: pack iter-n + label into a single row cell */
+  [data-reasoning-iter-header] {
+    display: flex;
+    align-items: center;
+    gap: var(--a-space-2);
+    grid-column: 1 / -1;
+  }
+
+  [data-reasoning-iter-header] > [data-reasoning-iter-n] {
+    grid-column: auto;
+  }
+  [data-reasoning-iter-header] > [data-reasoning-iter-label] {
+    grid-column: auto;
+    margin-inline-start: 0;
+    flex: 1;
+  }
+
+  [data-reasoning-iter-summary] {
+    color: var(--agent-reasoning-fg-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    font-size: var(--agent-reasoning-font);
+  }
+
+  /* ═══════ Animations ═══════ */
+
+  @keyframes _ar-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes _ar-fade {
+    from { opacity: 0; transform: translateY(-2px); }
+    to   { opacity: 1; transform: none; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-reasoning-spinner] { animation: none; }
+  }
+}