Angular v0.9 Renderer

.github/workflows/check_license.yml

@@ -38,7 +38,12 @@ jobs:
 
       - name: Check license headers
         run: |
-          addlicense -check \
+          if ! addlicense -check \
             -l apache \
             -c "Google LLC" \
-            .
+            .; then
+            echo "License check failed. To fix this, install addlicense and run it:"
+            echo "  go install github.com/google/addlicense@latest"
+            echo "  addlicense -l apache -c \"Google LLC\" ."
+            exit 1
+          fi

.gitignore

@@ -22,5 +22,5 @@ coverage/
 a2a_agents/python/a2ui_agent/src/a2ui/assets/**/*.json
 ## new agent SDK path
 agent_sdks/python/src/a2ui/assets/**/*.json
-## Generated JS file from the strictly-typed `sandbox.ts`. 
+## Generated JS file from the strictly-typed `sandbox.ts`.
 samples/client/angular/projects/orchestrator/public/sandbox_iframe/sandbox.js

docs/guides/client-setup.md

@@ -54,18 +54,44 @@ TODO: Add verified setup example.
 > coming days.
 
 ```bash
-npm install @a2ui/angular @a2ui/web-lib
+npm install @a2ui/angular @a2ui/web_core
 ```
 
 The Angular renderer provides:
 
-- **`provideA2UI()` function**: Configures A2UI in your app config
-- **`Surface` component**: Renders A2UI surfaces
-- **`MessageProcessor` service**: Handles incoming A2UI messages
-
-TODO: Add verified setup example.
+- **`A2uiRendererService`**: A service that manages the A2UI message processor and reactive model.
+- **`a2ui-v09-component-host` component**: A dynamic component host that renders A2UI components from a surface.
+- **`A2UI_RENDERER_CONFIG` token**: Used to configure the renderer with catalogs and action handlers.
+
+### Setup Example (v0.9)
+
+A2UI uses versioned imports for its protocol-specific implementations. For v0.9, configure your application providers as follows:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { 
+  A2UI_RENDERER_CONFIG, 
+  A2uiRendererService, 
+  minimalCatalog 
+} from '@a2ui/angular/v0_9';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: A2UI_RENDERER_CONFIG,
+      useValue: {
+        catalogs: [minimalCatalog],
+        actionHandler: (action) => {
+          console.log('Action dispatched:', action);
+        }
+      }
+    },
+    A2uiRendererService
+  ]
+};
+```
 
-**See working example:** [Angular restaurant sample](https://github.com/google/a2ui/tree/main/samples/client/angular/projects/restaurant)
+**See working example:** [Angular v0.9 Explorer](https://github.com/google/a2ui/tree/main/renderers/angular/a2ui_explorer)
 
 ## React
 

docs/roadmap.md

@@ -9,7 +9,7 @@ This roadmap outlines the current state and future plans for the A2UI project. T
 | Version | Status | Notes |
 |---------|--------|-------|
 | **v0.8** | ✅ Stable | Initial public release |
-| **v0.9** | 🚧 In Progress | Draft specification improvements |
+| **v0.9** | 🚧 Draft | Prompt-First specification improvements |
 
 Key features:
 
@@ -225,6 +225,6 @@ Want to contribute to the roadmap?
 
 ---
 
-**Last Updated:** December 2025
+**Last Updated:** March 2026
 
 Have questions about the roadmap? [Start a discussion on GitHub](https://github.com/google/A2UI/discussions).

renderers/angular/.npmignore

@@ -0,0 +1 @@
+a2ui_explorer/

renderers/angular/README.md

@@ -1,9 +1,84 @@
-Angular implementation of A2UI.
+# A2UI Angular Renderer
 
-Important: The sample code provided is for demonstration purposes and illustrates the mechanics of A2UI and the Agent-to-Agent (A2A) protocol. When building production applications, it is critical to treat any agent operating outside of your direct control as a potentially untrusted entity.
+The Angular implementation of the A2UI framework, providing seamless integration of agent-generated UI into Angular applications.
+
+## Getting Started
+
+### Installation
+
+```bash
+npm install @a2ui/angular @a2ui/web_core
+```
+
+### Protocol Versioning
+
+A2UI supports multiple protocol versions. To use a specific version, use the versioned import path:
+
+```typescript
+// Use the v0.9 implementation
+import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '@a2ui/angular/v0_9';
+import { minimalCatalog } from '@a2ui/angular/v0_9';
+```
+
+## Basic Setup
+
+Configure the renderer in your `app.config.ts` using the `A2UI_RENDERER_CONFIG` injection token:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { A2UI_RENDERER_CONFIG, A2uiRendererService, minimalCatalog } from '@a2ui/angular/v0_9';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: A2UI_RENDERER_CONFIG,
+      useValue: {
+        catalogs: [minimalCatalog],
+        actionHandler: (action) => {
+          console.log('Action received:', action);
+        }
+      }
+    },
+    A2uiRendererService
+  ]
+};
+```
+
+## Rendering Surfaces
+
+Use the `a2ui-v09-component-host` component to render individual A2UI components within your application:
+
+```typescript
+import { Component } from '@angular/core';
+import { ComponentHostComponent } from '@a2ui/angular/v0_9';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ComponentHostComponent],
+  template: `
+    <a2ui-v09-component-host
+      surfaceId="my-surface-id"
+      componentId="my-component-id"
+    />
+  `
+})
+export class AppComponent {}
+```
+
+## Core Concepts
+
+- **A2uiRendererService**: The central service that manages the connection to the A2UI Message Processor and tracks surface state.
+- **ComponentHostComponent**: A wrapper component that dynamically renders A2UI components based on the current surface model.
+- **Catalogs**: Collections of Angular components mapped to A2UI component types.
+
+## Security
+
+> [!IMPORTANT]
+> The sample code provided is for demonstration purposes and illustrates the mechanics of A2UI and the Agent-to-Agent (A2A) protocol. When building production applications, it is critical to treat any agent operating outside of your direct control as a potentially untrusted entity.
 
 All operational data received from an external agent—including its AgentCard, messages, artifacts, and task statuses—should be handled as untrusted input. For example, a malicious agent could provide crafted data in its fields (e.g., name, skills.description) that, if used without sanitization to construct prompts for a Large Language Model (LLM), could expose your application to prompt injection attacks.
 
 Similarly, any UI definition or data stream received must be treated as untrusted. Malicious agents could attempt to spoof legitimate interfaces to deceive users (phishing), inject malicious scripts via property values (XSS), or generate excessive layout complexity to degrade client performance (DoS). If your application supports optional embedded content (such as iframes or web views), additional care must be taken to prevent exposure to malicious external sites.
 
-Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.
+**Developer Responsibility**: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.

renderers/angular/a2ui_explorer/src/app/action-dispatcher.service.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SurfaceGroupAction } from '@a2ui/web_core/v0_9';
+
+@Injectable({ providedIn: 'root' })
+export class ActionDispatcher {
+  private action$ = new Subject<SurfaceGroupAction>();
+  actions = this.action$.asObservable();
+
+  dispatch(action: SurfaceGroupAction) {
+    this.action$.next(action);
+  }
+}

renderers/angular/a2ui_explorer/src/app/agent-stub.service.ts

@@ -0,0 +1,126 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { A2uiRendererService } from '@a2ui/angular/v0_9';
+import { SurfaceGroupAction, A2uiMessage } from '@a2ui/web_core/v0_9';
+import { ActionDispatcher } from './action-dispatcher.service';
+
+/**
+ * Context for the 'update_property' event.
+ */
+interface UpdatePropertyContext {
+  path: string;
+  value: any;
+  surfaceId?: string;
+}
+
+/**
+ * Context for the 'submit_form' event.
+ */
+interface SubmitFormContext {
+  [key: string]: any;
+  name?: string;
+}
+
+/**
+ * A stub service that simulates an A2UI agent.
+ * It listens for actions and responds with data model updates or new surfaces.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class AgentStubService {
+  /** Log of actions received from the surface. */
+  actionsLog: Array<{ timestamp: Date; action: SurfaceGroupAction }> = [];
+
+  constructor(
+    private rendererService: A2uiRendererService,
+     private dispatcher: ActionDispatcher,
+  ) {
+    // Subscribe to actions dispatched by the renderer
+    this.dispatcher.actions.subscribe((action) => this.handleAction(action));
+  }
+
+  /**
+   * Pushes actions triggered from the rendered Canvas frame through simulation.
+   * - Logs actions into inspector event frame aggregates.
+   * - Emulates generic server-side evaluation triggers delaying deferred updates.
+   * - Dispatch subsequent node-tree node triggers back over `A2uiRendererService`.
+   */
+  handleAction(action: SurfaceGroupAction) {
+    console.log('[AgentStub] handleAction action:', action);
+    this.actionsLog.push({ timestamp: new Date(), action });
+
+    // Simulate server processing delay
+    setTimeout(() => {
+      if ('event' in action) {
+        const { name, context } = action.event;
+        if (name === 'update_property' && context) {
+          const { path, value, surfaceId } = context as unknown as UpdatePropertyContext;
+          console.log(
+            '[AgentStub] update_property path:',
+            path,
+            'value:',
+            value,
+            'surfaceId:',
+            surfaceId,
+          );
+          this.rendererService.processMessages([
+            {
+              version: 'v0.9',
+              updateDataModel: {
+                surfaceId: surfaceId || action.surfaceId,
+                path: path,
+                value: value,
+              },
+            },
+          ]);
+        } else if (name === 'submit_form' && context) {
+          const formData = context as unknown as SubmitFormContext;
+          const nameValue = formData.name || 'Anonymous';
+
+          // Respond with an update to the data model in v0.9 layout
+          this.rendererService.processMessages([
+            {
+              version: 'v0.9',
+              updateDataModel: {
+                surfaceId: action.surfaceId,
+                path: '/form/submitted',
+                value: true,
+              },
+            },
+            {
+              version: 'v0.9',
+              updateDataModel: {
+                surfaceId: action.surfaceId,
+                path: '/form/responseMessage',
+                value: `Hello, ${nameValue}! Your form has been processed.`,
+              },
+            },
+          ]);
+        }
+      }
+    }, 50); // Shorter delay for property updates
+  }
+
+  /**
+   * Initializes a demo session with an initial set of messages.
+   */
+  initializeDemo(initialMessages: A2uiMessage[]) {
+    this.rendererService.processMessages(initialMessages);
+  }
+}

renderers/angular/a2ui_explorer/src/app/app.config.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideBrowserGlobalErrorListeners()],
+};