@adia-ai/web-components 0.0.1

package/components/agent-reasoning/agent-reasoning.js

@@ -0,0 +1,469 @@
+/**
+ * <agent-reasoning-ui> — Agent inner monologue + pipeline viewer.
+ *
+ * Unified chain-of-thought surface. Composes <timeline-ui size="sm"> for step
+ * rendering and adds plan / thought / iteration interstitials. Auto-collapses
+ * after finish.
+ *
+ *   - STEPS     → timeline-ui size="sm" rows (completed / active+spinner / error)
+ *   - THOUGHTS  → free-form monologue paragraphs
+ *   - PLAN      → ordered up-front list in a subtle panel
+ *   - ITERATION → attempt N blocks, each with its own sub-timeline
+ *
+ * JS API:
+ *   const r = document.createElement('agent-reasoning-ui');
+ *
+ *   r.setPlan(['Read intent', 'Search patterns', 'Synthesize output']);
+ *   r.addThought('The request matches the "product card" pattern.');
+ *
+ *   r.addStep({ id: 'search', label: 'search: Finding patterns…' });
+ *   r.updateStep('search', { outcomes: ['3 candidates ranked'] });
+ *   r.completeStep('search', 1200);
+ *
+ *   r.startIteration(1, 'First attempt');
+ *   r.addStep({ id: 'gen', label: 'generate' });
+ *   r.completeStep('gen', 3000);
+ *   r.endIteration(1, { status: 'error', summary: 'validation 62/100' });
+ *
+ *   r.startIteration(2, 'Retry with hint');
+ *   r.addStep({ id: 'gen2', label: 'generate (retry)' });
+ *   r.completeStep('gen2', 2500);
+ *   r.endIteration(2, { status: 'done', summary: 'validation 94/100' });
+ *
+ *   r.finish('2 iterations · 94/100 · 7s');
+ *
+ * Attributes:
+ *   collapsed     — start collapsed
+ *   autocollapse  — collapse 1.2s after finish (default: true)
+ *   heading       — fallback summary label while active
+ *   status        — 'idle' | 'active' | 'done' | 'error' (default: 'active')
+ *                   Drives the status icon: spinner / check-circle / warning-circle
+ *
+ * Events:
+ *   reasoning-toggle       — summary expanded/collapsed (detail: { collapsed })
+ *   reasoning-step-toggle  — a step's outcomes were toggled (detail: { stepId })
+ *   reasoning-finish       — .finish() was called (detail: { summary, status })
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+// Status lifecycle for the reasoning surface as a whole.
+//   active  — still thinking (default; renders the spinner)
+//   done    — finished successfully (renders check-circle)
+//   error   — finished with failure (renders warning)
+//   idle    — not started (renders muted dot)
+const REASONING_STATUSES = new Set(['idle', 'active', 'done', 'error']);
+
+class AdiaAgentReasoning extends AdiaElement {
+  static properties = {
+    collapsed:    { type: Boolean, default: false,    reflect: true },
+    autocollapse: { type: Boolean, default: true,     reflect: true },
+    heading:      { type: String,  default: '',       reflect: true },
+    status:       { type: String,  default: 'active', reflect: true },
+  };
+
+  static template = () => null;
+
+  // Flat entries list; each is one of:
+  //   { kind: 'step',       id, label, status, duration, outcomes, children }
+  //   { kind: 'thought',    id, text }
+  //   { kind: 'plan',       id, items: string[] }
+  //   { kind: 'iteration',  id, n, label, status, summary, steps: step[] }
+  #entries = [];
+  #iterationStack = [];
+  #startTime = Date.now();
+  #timerInterval = null;
+  #finishTimer = null;
+  #summaryEl = null;
+  #bodyEl = null;
+
+  get entries() { return this.#entries; }
+
+  connected() {
+    this.#startTime = Date.now();
+    this.#timerInterval = setInterval(() => this.#tickTimers(), 1000);
+    this.#buildShell();
+  }
+
+  disconnected() {
+    if (this.#timerInterval != null) {
+      clearInterval(this.#timerInterval);
+      this.#timerInterval = null;
+    }
+    if (this.#finishTimer != null) {
+      clearTimeout(this.#finishTimer);
+      this.#finishTimer = null;
+    }
+    this.#summaryEl?.removeEventListener('click', this.#onSummaryClick);
+    this.#summaryEl = null;
+    this.#bodyEl = null;
+  }
+
+  // ── Public API ──
+
+  addStep(step) {
+    const entry = {
+      kind: 'step',
+      status: 'active',
+      duration: null,
+      outcomes: [],
+      children: [],
+      ...step,
+    };
+    this.#appendToCurrentScope(entry);
+    this.#render();
+    return entry;
+  }
+
+  updateStep(id, updates) {
+    const step = this.#findStep(id);
+    if (!step) return;
+    Object.assign(step, updates);
+    this.#render();
+  }
+
+  completeStep(id, duration) {
+    const step = this.#findStep(id);
+    if (!step) return;
+    step.status = 'done';
+    if (duration != null) step.duration = duration;
+    this.#render();
+  }
+
+  failStep(id, error) {
+    const step = this.#findStep(id);
+    if (!step) return;
+    step.status = 'error';
+    if (error) step.outcomes = [...(step.outcomes || []), String(error)];
+    this.#render();
+  }
+
+  addThought(text, id = `thought-${this.#entries.length}`) {
+    this.#appendToCurrentScope({ kind: 'thought', id, text });
+    this.#render();
+  }
+
+  setPlan(items, id = 'plan') {
+    const existing = this.#entries.find(e => e.kind === 'plan' && e.id === id);
+    if (existing) existing.items = items.slice();
+    else this.#entries.push({ kind: 'plan', id, items: items.slice() });
+    this.#render();
+  }
+
+  startIteration(n, label = `Attempt ${n}`, id = `iter-${n}`) {
+    const iter = {
+      kind: 'iteration',
+      id, n, label,
+      status: 'active',
+      summary: '',
+      steps: [],
+    };
+    this.#entries.push(iter);
+    this.#iterationStack.push(id);
+    this.#render();
+    return iter;
+  }
+
+  endIteration(n, { status = 'done', summary = '' } = {}) {
+    const id = `iter-${n}`;
+    const iter = this.#entries.find(e => e.kind === 'iteration' && e.id === id);
+    if (!iter) return;
+    iter.status = status;
+    iter.summary = summary;
+    const idx = this.#iterationStack.lastIndexOf(id);
+    if (idx >= 0) this.#iterationStack.splice(idx, 1);
+    this.#render();
+  }
+
+  finish(summaryLabel, { status = 'done' } = {}) {
+    const resolved = REASONING_STATUSES.has(status) ? status : 'done';
+    const isError = resolved === 'error';
+    for (const entry of this.#entries) {
+      if (entry.kind === 'step' && entry.status === 'active') {
+        entry.status = isError ? 'error' : 'done';
+      }
+      if (entry.kind === 'iteration') {
+        if (entry.status === 'active') entry.status = isError ? 'error' : 'done';
+        for (const s of entry.steps || []) {
+          if (s.status === 'active') s.status = isError ? 'error' : 'done';
+        }
+      }
+    }
+    if (this.#timerInterval != null) {
+      clearInterval(this.#timerInterval);
+      this.#timerInterval = null;
+    }
+    this.status = resolved;
+    if (summaryLabel) this.dataset.summary = summaryLabel;
+    this.#render();
+    this.dispatchEvent(new CustomEvent('reasoning-finish', {
+      bubbles: true,
+      detail: { summary: summaryLabel || '', status: resolved },
+    }));
+
+    if (this.#finishTimer != null) clearTimeout(this.#finishTimer);
+    if (this.autocollapse && !isError) {
+      this.#finishTimer = setTimeout(() => {
+        this.#finishTimer = null;
+        this.collapsed = true;
+        this.#render();
+      }, 1200);
+    }
+  }
+
+  fail(summaryLabel) {
+    this.finish(summaryLabel, { status: 'error' });
+  }
+
+  // ── Private ──
+
+  #appendToCurrentScope(entry) {
+    if (this.#iterationStack.length > 0) {
+      const topId = this.#iterationStack[this.#iterationStack.length - 1];
+      const iter = this.#entries.find(e => e.kind === 'iteration' && e.id === topId);
+      if (iter) {
+        if (entry.kind === 'step') iter.steps.push(entry);
+        else this.#entries.push(entry);
+        return;
+      }
+    }
+    this.#entries.push(entry);
+  }
+
+  #findStep(id) {
+    for (const e of this.#entries) {
+      if (e.kind === 'step' && e.id === id) return e;
+      if (e.kind === 'iteration') {
+        for (const s of e.steps || []) if (s.id === id) return s;
+      }
+    }
+    return null;
+  }
+
+  #onSummaryClick = () => {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('reasoning-toggle', {
+      bubbles: true,
+      detail: { collapsed: this.collapsed },
+    }));
+    this.#render();
+  };
+
+  #buildShell() {
+    this.innerHTML = '';
+
+    this.#summaryEl = document.createElement('div');
+    this.#summaryEl.setAttribute('data-reasoning-summary', '');
+    this.#summaryEl.addEventListener('click', this.#onSummaryClick);
+    this.appendChild(this.#summaryEl);
+
+    this.#bodyEl = document.createElement('div');
+    this.#bodyEl.setAttribute('data-reasoning-body', '');
+    this.appendChild(this.#bodyEl);
+
+    this.#render();
+  }
+
+  #activeLabel() {
+    for (let i = this.#entries.length - 1; i >= 0; i--) {
+      const e = this.#entries[i];
+      if (e.kind === 'step' && e.status === 'active') return e.label;
+      if (e.kind === 'iteration') {
+        for (let j = (e.steps || []).length - 1; j >= 0; j--) {
+          const s = e.steps[j];
+          if (s.status === 'active') return s.label;
+        }
+      }
+      if (e.kind === 'thought') return e.text;
+    }
+    const lastStep = this.#entries.findLast?.(e => e.kind === 'step');
+    return lastStep?.label || this.heading || 'Thinking…';
+  }
+
+  #renderStatusIcon(status) {
+    switch (status) {
+      case 'done':
+        return '<icon-ui name="check-circle" color="success" data-reasoning-check></icon-ui>';
+      case 'error':
+        return '<icon-ui name="warning-circle" color="danger" data-reasoning-check data-error></icon-ui>';
+      case 'idle':
+        return '<icon-ui name="circle" color="muted" data-reasoning-check data-idle></icon-ui>';
+      case 'active':
+      default:
+        return '<span data-reasoning-spinner></span>';
+    }
+  }
+
+  #countSteps() {
+    let total = 0, done = 0;
+    const tally = (s) => { total++; if (s.status === 'done') done++; };
+    for (const e of this.#entries) {
+      if (e.kind === 'step') tally(e);
+      if (e.kind === 'iteration') for (const s of e.steps || []) tally(s);
+    }
+    return { total, done };
+  }
+
+  #render() {
+    if (!this.#summaryEl) return;
+
+    const status = REASONING_STATUSES.has(this.status) ? this.status : 'active';
+    const isFinal = status === 'done' || status === 'error';
+    const { total, done } = this.#countSteps();
+    const elapsed = Math.round((Date.now() - this.#startTime) / 1000);
+    const label = isFinal && this.dataset.summary ? this.dataset.summary : this.#activeLabel();
+
+    this.#summaryEl.innerHTML = `
+      ${this.#renderStatusIcon(status)}
+      <span data-reasoning-label>${escapeText(label)}</span>
+      <span data-reasoning-meta>
+        ${total ? `<span data-reasoning-counter>${done}/${total}</span>` : ''}
+        <span data-reasoning-time>${elapsed}s</span>
+        <icon-ui name="${this.collapsed ? 'caret-right' : 'caret-up'}" color="muted" data-reasoning-chevron></icon-ui>
+      </span>
+    `;
+
+    this.#bodyEl.hidden = this.collapsed;
+    if (this.collapsed) return;
+
+    // Body rendering: we group contiguous steps into timeline-ui blocks and
+    // render plan/thought/iteration as sibling nodes between them. Keeping
+    // steps contiguous preserves timeline-ui's connector line.
+    this.#bodyEl.innerHTML = '';
+    let currentTimeline = null;
+    for (const entry of this.#entries) {
+      if (entry.kind === 'step') {
+        if (!currentTimeline) {
+          currentTimeline = this.#makeTimeline();
+          this.#bodyEl.appendChild(currentTimeline);
+        }
+        currentTimeline.appendChild(this.#makeStepItem(entry));
+      } else {
+        currentTimeline = null;
+        this.#bodyEl.appendChild(this.#renderNonStep(entry));
+      }
+    }
+  }
+
+  #makeTimeline() {
+    const tl = document.createElement('timeline-ui');
+    tl.setAttribute('size', 'sm');
+    return tl;
+  }
+
+  #makeStepItem(step) {
+    const item = document.createElement('timeline-item-ui');
+    item.setAttribute('text', step.label || '');
+    if (step.status === 'done')   item.setAttribute('completed', '');
+    if (step.status === 'error')  item.setAttribute('error', '');
+    if (step.status === 'active') { item.setAttribute('active', ''); item.setAttribute('spinner', ''); }
+
+    const duration = step.durationLabel
+      || (step.duration != null ? formatDuration(step.duration) : '');
+    if (duration) item.setAttribute('duration', duration);
+
+    if (step.outcomes?.length) item.outcomes = step.outcomes;
+
+    item.addEventListener('timeline-toggle', () => {
+      this.dispatchEvent(new CustomEvent('reasoning-step-toggle', {
+        bubbles: true, detail: { stepId: step.id },
+      }));
+    });
+    return item;
+  }
+
+  #renderNonStep(entry) {
+    switch (entry.kind) {
+      case 'thought':   return this.#renderThought(entry);
+      case 'plan':      return this.#renderPlan(entry);
+      case 'iteration': return this.#renderIteration(entry);
+      default:          return document.createTextNode('');
+    }
+  }
+
+  #renderThought(entry) {
+    const el = document.createElement('div');
+    el.setAttribute('data-reasoning-thought', '');
+    const text = document.createElement('span');
+    text.setAttribute('data-reasoning-thought-text', '');
+    text.textContent = entry.text || '';
+    el.appendChild(text);
+    return el;
+  }
+
+  #renderPlan(entry) {
+    const el = document.createElement('div');
+    el.setAttribute('data-reasoning-plan', '');
+    const label = document.createElement('div');
+    label.setAttribute('data-reasoning-plan-label', '');
+    label.textContent = 'Plan';
+    el.appendChild(label);
+    const list = document.createElement('ol');
+    list.setAttribute('data-reasoning-plan-list', '');
+    for (const item of (entry.items || [])) {
+      const li = document.createElement('li');
+      li.textContent = item;
+      list.appendChild(li);
+    }
+    el.appendChild(list);
+    return el;
+  }
+
+  #renderIteration(entry) {
+    const el = document.createElement('div');
+    el.setAttribute('data-reasoning-iteration', '');
+    if (entry.status === 'active') el.setAttribute('data-active', '');
+    if (entry.status === 'done')   el.setAttribute('data-done', '');
+    if (entry.status === 'error')  el.setAttribute('data-error', '');
+
+    const header = document.createElement('div');
+    header.setAttribute('data-reasoning-iter-header', '');
+    const statusIcon = entry.status === 'done'
+      ? '<icon-ui name="check-circle" color="success" size="sm"></icon-ui>'
+      : entry.status === 'error'
+        ? '<icon-ui name="warning" color="danger" size="sm"></icon-ui>'
+        : '<span data-reasoning-spinner data-small></span>';
+    header.innerHTML = `
+      ${statusIcon}
+      <span data-reasoning-iter-n>#${entry.n}</span>
+      <span data-reasoning-iter-label>${escapeText(entry.label || '')}</span>
+      ${entry.summary ? `<span data-reasoning-iter-summary>${escapeText(entry.summary)}</span>` : ''}
+    `;
+    el.appendChild(header);
+
+    if (entry.steps?.length) {
+      const tl = this.#makeTimeline();
+      for (const s of entry.steps) tl.appendChild(this.#makeStepItem(s));
+      el.appendChild(tl);
+    }
+    return el;
+  }
+
+  #tickTimers() {
+    if (this.status === 'done' || this.status === 'error') return;
+    const elapsed = Math.round((Date.now() - this.#startTime) / 1000);
+    const timeEl = this.#summaryEl?.querySelector('[data-reasoning-time]');
+    if (timeEl) timeEl.textContent = elapsed + 's';
+
+    // Live-update active step durations inside nested timeline-item-ui
+    const elapsedLabel = elapsed + 's';
+    for (const item of this.querySelectorAll('timeline-item-ui[active]:not([completed])')) {
+      // Only mirror the ticking label; do not stomp a durationLabel author set
+      if (!item.dataset._frozenDuration) {
+        item.setAttribute('duration', elapsedLabel);
+      }
+    }
+  }
+}
+
+function escapeText(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function formatDuration(ms) {
+  if (ms < 1000) return ms + 'ms';
+  return Math.round(ms / 1000) + 's';
+}
+
+customElements.define('agent-reasoning-ui', AdiaAgentReasoning);
+export { AdiaAgentReasoning };

package/components/agent-reasoning/agent-reasoning.yaml

@@ -0,0 +1,70 @@
+# 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: AdiaAgentReasoning
+tag: agent-reasoning-ui
+component: AgentReasoning
+category: agent
+version: 1
+description: Agent inner monologue + pipeline viewer with steps, thoughts, plans, and iterations.
+props:
+  autocollapse:
+    description: Auto-collapse after finish().
+    type: boolean
+    default: true
+  collapsed:
+    description: Start collapsed.
+    type: boolean
+    default: false
+  heading:
+    description: Fallback summary label.
+    type: string
+    default: ""
+  mode:
+    description: compact | expanded
+    type: string
+    default: compact
+events:
+  reasoning-finish:
+    description: "Fired on reasoning-finish."
+  reasoning-step-toggle:
+    description: "Fired on reasoning-step-toggle."
+  reasoning-toggle:
+    description: "Fired on reasoning-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: Agent reasoning with a plan and three steps.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "AgentReasoning",
+          "heading": "Analyzing request"
+        }
+      ]
+keywords:
+  - reasoning
+  - thinking
+  - agent
+  - chain of thought
+  - cot
+  - monologue
+  - plan
+  - iteration
+synonyms:
+  chain-of-thought-n: agent-reasoning-ui
+  cot-n: agent-reasoning-ui
+related:
+  - agent-trace-ui
+  - pipeline-status-ui

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

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentSuggestions.json",
+  "title": "AgentSuggestions",
+  "description": "Row of follow-up suggestion chips.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AgentSuggestions"
+    },
+    "disabled": {
+      "description": "Disable all chips.",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "sm | md",
+      "type": "string",
+      "default": "sm"
+    },
+    "variant": {
+      "description": "outline | ghost | subtle",
+      "type": "string",
+      "default": "outline"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "suggestion-select": {
+        "description": "Fired on suggestion-select."
+      }
+    },
+    "examples": [
+      {
+        "description": "Three follow-up chips",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"AgentSuggestions\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "suggestions",
+      "chips",
+      "follow-up",
+      "quick replies"
+    ],
+    "name": "AdiaAgentSuggestions",
+    "related": [
+      "agent-questions-ui",
+      "agent-feedback-bar-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "agent-suggestions-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/agent-suggestions/agent-suggestions.css

@@ -0,0 +1,18 @@
+@scope (agent-suggestions-ui) {
+  :where(:scope) {
+    --agent-suggestions-gap:     var(--a-space-2);
+    --agent-suggestions-padding: var(--a-space-2);
+  }
+
+  :scope {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--agent-suggestions-gap);
+    padding-block: var(--agent-suggestions-padding);
+  }
+
+  :scope[disabled] {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}