@adia-ai/web-modules 0.0.4

package/runtime/a2ui-root/a2ui-root.js

@@ -0,0 +1,191 @@
+/**
+ * <a2ui-root> — A2UI protocol surface.
+ * Connects to a stream source and renders A2UI messages as AdiaUI components.
+ *
+ * <a2ui-root src="/api/agent" transport="sse"></a2ui-root>
+ * <a2ui-root src="ws://localhost:8080" transport="ws"></a2ui-root>
+ *
+ * Static / author-driven mode — set the `doc` property (array of A2UI messages)
+ * and the renderer resets + replays them. Editors and previews can drive the
+ * surface without opening a transport. Setting `doc` to a new array re-renders
+ * from scratch (reset() + processAll()).
+ *
+ *   const root = document.querySelector('a2ui-root');
+ *   root.doc = [
+ *     { type: 'createSurface', surfaceId: 'root', root: 'c-1' },
+ *     { type: 'updateComponents', components: [{ id: 'c-1', component: 'Heading', text: 'Hi' }] },
+ *   ];
+ *
+ * Events:
+ *   a2ui-connected — stream connected
+ *   a2ui-message   — each message received (detail: { message })
+ *   a2ui-error     — stream error (detail: { error })
+ *   a2ui-closed    — stream ended
+ *   a2ui-action    — user interaction (detail: { name, sourceComponentId, context })
+ *   doc-replaced   — fired after a full doc reset + replay (author-driven mode)
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+import {
+  A2UIRenderer,
+  registry,
+  sseStream,
+  wsStream,
+  jsonlStream,
+  mcpStream,
+} from '@adia-ai/a2ui-utils';
+
+class A2UIRoot extends UIElement {
+  static properties = {
+    src:       { type: String,  default: '',    reflect: true },
+    transport: { type: String,  default: 'sse', reflect: true },
+    loading:   { type: Boolean, default: false, reflect: true },
+    active:    { type: Boolean, default: false, reflect: true },
+    batch:     { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #renderer = null;
+  #abortCtrl = null;
+  #doc = null;
+  #bound = false;
+
+  #onClick = (e) => {
+    const actionEl = e.target.closest('[data-action]');
+    if (!actionEl) return;
+    this.dispatchEvent(new CustomEvent('a2ui-action', {
+      bubbles: true,
+      detail: {
+        name: actionEl.getAttribute('data-action'),
+        sourceComponentId: actionEl.getAttribute('data-a2ui-id') || '',
+        timestamp: Date.now(),
+        context: {},
+      },
+    }));
+  };
+
+  connected() {
+    this.#renderer = new A2UIRenderer(this, registry, { batch: this.batch });
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+    }
+  }
+
+  render() {
+    if (this.src && !this.active) this.#connect();
+  }
+
+  async #connect() {
+    this.#abortCtrl?.abort();
+    this.#abortCtrl = new AbortController();
+    const signal = this.#abortCtrl.signal;
+
+    this.loading = true;
+    this.active = false;
+
+    let stream;
+    try {
+      switch (this.transport) {
+        case 'sse':
+          stream = sseStream(this.src, { signal, catalog: registry });
+          break;
+        case 'ws':
+        case 'websocket':
+          stream = wsStream(this.src, { signal, catalog: registry });
+          break;
+        case 'jsonl':
+          stream = jsonlStream(this.src, { signal, catalog: registry });
+          break;
+        case 'mcp':
+          stream = mcpStream(this.src, {
+            signal,
+            catalog: registry,
+            onAction: (name, params) => {
+              this.dispatchEvent(new CustomEvent('a2ui-action', {
+                bubbles: true,
+                detail: { name, params, timestamp: Date.now() },
+              }));
+              return Promise.resolve({ status: 'dispatched' });
+            },
+          });
+          break;
+        default:
+          console.warn(`a2ui-root: unknown transport "${this.transport}"`);
+          return;
+      }
+
+      this.active = true;
+      this.loading = false;
+      this.dispatchEvent(new Event('a2ui-connected', { bubbles: true }));
+
+      for await (const message of stream) {
+        if (signal.aborted) break;
+        this.#renderer.process(message);
+        this.dispatchEvent(new CustomEvent('a2ui-message', {
+          bubbles: true,
+          detail: { message },
+        }));
+      }
+    } catch (err) {
+      if (!signal.aborted) {
+        this.dispatchEvent(new CustomEvent('a2ui-error', {
+          bubbles: true,
+          detail: { error: err },
+        }));
+      }
+    }
+
+    this.active = false;
+    this.loading = false;
+    this.dispatchEvent(new Event('a2ui-closed', { bubbles: true }));
+  }
+
+  process(message) {
+    if (!this.#renderer) {
+      this.#renderer = new A2UIRenderer(this, registry);
+    }
+    this.#renderer.process(message);
+  }
+
+  processAll(messages) {
+    for (const msg of messages) this.process(msg);
+  }
+
+  get doc() { return this.#doc; }
+  set doc(messages) {
+    this.#doc = Array.isArray(messages) ? messages : [];
+    if (!this.#renderer) {
+      this.#renderer = new A2UIRenderer(this, registry);
+    }
+    this.#renderer.reset();
+    for (const msg of this.#doc) this.#renderer.process(msg);
+    this.dispatchEvent(new CustomEvent('doc-replaced', {
+      bubbles: true,
+      detail: { count: this.#doc.length },
+    }));
+  }
+
+  reset() {
+    this.#renderer?.reset();
+  }
+
+  disconnect() {
+    this.#abortCtrl?.abort();
+    this.active = false;
+  }
+
+  disconnected() {
+    this.#abortCtrl?.abort();
+    this.removeEventListener('click', this.#onClick);
+    this.#bound = false;
+    this.active = false;
+  }
+
+  get renderer() { return this.#renderer; }
+}
+customElements.define('a2ui-root', A2UIRoot);
+
+export { A2UIRoot };

package/runtime/a2ui-root/a2ui-root.yaml

@@ -0,0 +1,87 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: A2UIRoot
+tag: a2ui-root
+component: A2UIRoot
+category: container
+version: 1
+description: A2UI protocol surface. Connects to a stream source (SSE, WebSocket, JSONL, MCP) and renders A2UI messages as AdiaUI components via the `@adia-ai/a2ui-utils` renderer.
+props:
+  src:
+    description: Stream source URL (endpoint for SSE/WebSocket, file path for JSONL, tool-call target for MCP).
+    type: string
+    default: ""
+  transport:
+    description: Stream transport to use.
+    type: string
+    default: sse
+    enum:
+      - sse
+      - ws
+      - websocket
+      - jsonl
+      - mcp
+  loading:
+    description: True while the stream is connecting.
+    type: boolean
+    default: false
+    reflect: true
+  active:
+    description: True while the stream is connected and receiving messages.
+    type: boolean
+    default: false
+    reflect: true
+  batch:
+    description: Batch renderer updates via requestAnimationFrame for large fan-in.
+    type: boolean
+    default: false
+  doc:
+    description: >-
+      Author-driven mode — set to an array of A2UI messages and the renderer
+      resets + replays them. No network/transport involvement. Setting to a
+      new array triggers a full re-render. Use this for editors, previews,
+      tests, and any static-doc authoring loop. When both `src` and `doc` are
+      set, `doc` wins (the stream is not opened). Pass as a JS property; not
+      reflected to an attribute.
+    type: array
+events:
+  a2ui-connected:
+    description: Fired when the stream is established.
+  a2ui-message:
+    description: "Fired for each A2UI message received. detail: { message }"
+  a2ui-action:
+    description: "Fired when a child element with [data-action] is clicked. detail: { name, sourceComponentId, context }"
+  a2ui-error:
+    description: "Fired when the stream errors. detail: { error }"
+  a2ui-closed:
+    description: Fired when the stream ends.
+  doc-replaced:
+    description: "Fired after a full doc reset + replay in author-driven mode. detail: { count }"
+slots:
+  default:
+    description: The rendered surface. Children are stamped by the A2UI renderer.
+states:
+  - name: idle
+    description: Default, ready to connect.
+  - name: loading
+    description: Stream is connecting.
+  - name: active
+    description: Stream is connected and receiving messages.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+keywords:
+  - a2ui
+  - protocol
+  - renderer
+  - stream
+  - surface
+  - sse
+  - websocket
+  - jsonl
+  - mcp
+related:
+  - canvas
+  - inspector

package/runtime/gen-root/gen-root.a2ui.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/GenRoot.json",
+  "title": "GenRoot",
+  "description": "Composition shell for chat + canvas generative UI. Manages layout modes\n(chat-only / split / canvas-only) and delegates a unified API across\nchild chat-ui, canvas-ui, and inspector-ui elements.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "GenRoot"
+    },
+    "inspector": {
+      "description": "Show the inspector pane (for debugging generated A2UI).",
+      "type": "boolean",
+      "default": false
+    },
+    "mode": {
+      "description": "Layout mode — chat-only, 50/50 split, or canvas-only.",
+      "type": "string",
+      "enum": [
+        "chat",
+        "split",
+        "canvas"
+      ],
+      "default": "chat"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "gen-ui",
+      "generative-ui",
+      "chat-canvas",
+      "agent-shell"
+    ],
+    "name": "GenRoot",
+    "related": [
+      "AppShell",
+      "Chat"
+    ],
+    "slots": {
+      "default": {
+        "description": "Author supplies chat-ui, canvas-ui, and optional inspector-ui children."
+      }
+    },
+    "states": [
+      {
+        "description": "Default mode=chat.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "gen-root",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/runtime/gen-root/gen-root.css

@@ -0,0 +1,83 @@
+@scope (gen-root) {
+
+  /* ═══════════════════════════════════════════════════════
+     SHELL HOST — full bleed, no card chrome
+     ═══════════════════════════════════════════════════════ */
+
+  :scope {
+    box-sizing:          border-box;
+    display:             grid;
+    height:              100%;
+    min-height:          0;
+    background:          var(--chat-bg, var(--a-canvas-0));
+    font-family:         var(--a-font-family);
+    overflow:            hidden;
+
+    /* Default: chat mode — single column */
+    grid-template-columns: 1fr;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     MODE: CHAT (initial screen — thread only, full width)
+     ═══════════════════════════════════════════════════════ */
+
+  :scope[mode="chat"] {
+    grid-template-columns: 1fr;
+  }
+
+  :scope[mode="chat"] > canvas-ui {
+    display:             none;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     MODE: SPLIT (dialog left + canvas right)
+     ═══════════════════════════════════════════════════════ */
+
+  :scope[mode="split"] {
+    grid-template-columns: minmax(320px, 1fr) 1.5fr;
+  }
+
+  :scope[mode="split"] > chat-ui {
+    border-right:        var(--a-border-thin) solid var(--a-canvas-border-subtle);
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     MODE: CANVAS (canvas only)
+     ═══════════════════════════════════════════════════════ */
+
+  :scope[mode="canvas"] {
+    grid-template-columns: 1fr;
+  }
+
+  :scope[mode="canvas"] > chat-ui {
+    display:             none;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     INSPECTOR
+     ═══════════════════════════════════════════════════════ */
+
+  :scope > inspector-ui {
+    display:             none;
+  }
+
+  :scope[inspector] > inspector-ui {
+    display:             flex;
+    border-left:         var(--a-border-thin) solid var(--a-canvas-border-subtle);
+  }
+
+  :scope[mode="split"][inspector] {
+    grid-template-columns: minmax(320px, 1fr) 1.5fr 1fr;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     CHILDREN — fill grid cells
+     ═══════════════════════════════════════════════════════ */
+
+  :scope > chat-ui,
+  :scope > canvas-ui,
+  :scope > inspector-ui {
+    min-height:          0;
+    min-width:           0;
+  }
+}

package/runtime/gen-root/gen-root.js

@@ -0,0 +1,136 @@
+import { UIElement } from '../../../web-components/core/element.js';
+import '../../../web-components/components/chat-thread/chat-thread.js';
+import '../../../web-components/components/canvas/canvas.js';
+import '../../../web-components/components/inspector/inspector.js';
+
+/**
+ * <gen-root> — Composition shell for chat + canvas generative UI.
+ *
+ * Modes:
+ *   chat   — thread only, full width
+ *   split  — thread left + canvas right (50/50)
+ *   canvas — canvas only, thread hidden
+ *
+ * Consumer-owns-LLM: forwards all events from children, never calls fetch.
+ *
+ * Events (forwarded):
+ *   submit               — from thread (chat input)
+ *   suggestion-select    — from thread
+ *   canvas-interaction   — from canvas
+ */
+export class GenRoot extends UIElement {
+  static properties = {
+    mode: { type: String, default: 'chat', reflect: true },
+    inspector: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+  #threadEl = null;
+  #canvasEl = null;
+  #inspectorEl = null;
+
+  connected() {
+    // Forward events from children — they bubble, so just re-dispatch isn't needed.
+    // Events already bubble from thread/canvas through this host.
+  }
+
+  render() {
+    if (this.#bound) return;
+    this.#bound = true;
+
+    this.#threadEl = document.createElement('chat-thread-ui');
+    this.#canvasEl = document.createElement('canvas-ui');
+
+    this.appendChild(this.#threadEl);
+    this.appendChild(this.#canvasEl);
+
+    if (this.inspector) {
+      this.#inspectorEl = document.createElement('inspector-ui');
+      this.appendChild(this.#inspectorEl);
+    }
+  }
+
+  // ── Public API ──
+
+  /**
+   * Append a chat message. Delegates to thread.
+   * @param {{ role: string, content: string, avatar?: string }} msg
+   */
+  appendMessage(msg) {
+    this.#threadEl?.appendMessage(msg);
+  }
+
+  /**
+   * Append chain-of-thought. Delegates to thread.
+   * @param {{ text: string }} msg
+   */
+  appendCoT(msg) {
+    this.#threadEl?.appendCoT(msg);
+  }
+
+  /**
+   * Push an artifact to the canvas. Auto-switches to split mode if in chat mode.
+   * @param {object[]} messages — A2UI messages
+   */
+  pushArtifact(messages) {
+    if (this.mode === 'chat') {
+      this.mode = 'split';
+    }
+    this.#canvasEl?.processAll(messages);
+  }
+
+  /**
+   * Set suggestion buttons. Delegates to thread.
+   * @param {{ label: string, prompt: string }[]} items
+   */
+  setSuggestions(items) {
+    this.#threadEl?.setSuggestions(items);
+  }
+
+  /** Append a result message with action buttons. Delegates to thread. */
+  appendResultMessage(opts) { this.#threadEl?.appendResultMessage(opts); }
+
+  /** Show save-pattern bar. Delegates to thread. */
+  showSavePatternBar(opts) { this.#threadEl?.showSavePatternBar(opts); }
+
+  /** Show feedback widget. Delegates to thread. */
+  showFeedbackWidget(opts) { this.#threadEl?.showFeedbackWidget(opts); }
+
+  /** Show typing indicator. Delegates to thread. */
+  showTyping() { this.#threadEl?.showTyping(); }
+
+  /** Hide typing indicator. Delegates to thread. */
+  hideTyping() { this.#threadEl?.hideTyping(); }
+
+  /** Append an error message. Delegates to thread. */
+  appendError(content) { this.#threadEl?.appendError(content); }
+
+  /** Start a pipeline status indicator. Delegates to thread. */
+  startPipelineStatus() { return this.#threadEl?.startPipelineStatus(); }
+
+  /** Update the active pipeline status. Delegates to thread. */
+  updatePipelineStatus(opts) { this.#threadEl?.updatePipelineStatus(opts); }
+
+  /** Mark the active pipeline status as complete. Delegates to thread. */
+  completePipelineStatus() { this.#threadEl?.completePipelineStatus(); }
+
+  /** Reset both thread and canvas. */
+  reset() {
+    this.#threadEl?.clear();
+    this.#canvasEl?.reset();
+    this.mode = 'chat';
+  }
+
+  /** Access the thread element. */
+  get thread() { return this.#threadEl; }
+
+  /** Access the canvas element. */
+  get canvas() { return this.#canvasEl; }
+
+  /** Access the inspector element (null if inspector not enabled). */
+  get inspect() { return this.#inspectorEl; }
+}
+
+customElements.define('gen-root', GenRoot);

package/runtime/gen-root/gen-root.yaml

@@ -0,0 +1,43 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: GenRoot
+tag: gen-root
+component: GenRoot
+category: layout
+version: 1
+description: |
+  Composition shell for chat + canvas generative UI. Manages layout modes
+  (chat-only / split / canvas-only) and delegates a unified API across
+  child chat-ui, canvas-ui, and inspector-ui elements.
+
+props:
+  mode:
+    type: string
+    default: chat
+    enum: [chat, split, canvas]
+    reflect: true
+    description: Layout mode — chat-only, 50/50 split, or canvas-only.
+
+  inspector:
+    type: boolean
+    default: false
+    reflect: true
+    description: Show the inspector pane (for debugging generated A2UI).
+
+events: {}
+
+slots:
+  default:
+    description: Author supplies chat-ui, canvas-ui, and optional inspector-ui children.
+
+states:
+  - name: idle
+    description: Default mode=chat.
+
+traits: []
+
+a2ui:
+  rules:
+    - gen-root is an integration shell. Prefer admin-shell for admin UIs; use gen-root only for chat+canvas tooling.
+
+keywords: [gen-ui, generative-ui, chat-canvas, agent-shell]
+related: [AppShell, Chat]

package/runtime/index.js

@@ -0,0 +1,2 @@
+export { GenRoot }  from './gen-root/gen-root.js';
+export { A2UIRoot } from './a2ui-root/a2ui-root.js';