Implement v0.9 Angular 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

@@ -15,6 +15,7 @@ site/
 
 # Python virtual environment
 .venv/
+coverage/
 
 # Generated spec assets in the agent SDK
 ## old agent SDK path

renderers/angular/.npmrc

@@ -1,2 +1 @@
 @a2ui:registry=https://us-npm.pkg.dev/oss-exit-gate-prod/a2ui--npm/
-//us-npm.pkg.dev/oss-exit-gate-prod/a2ui--npm/:always-auth=true

renderers/angular/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.9
+
+- Implement renderer for v0.9 of A2UI.
+
 ## 0.8.5
 
 - Handle `TextField.type` renamed to `TextField.textFieldType`.

renderers/angular/README.md

@@ -1,9 +1,122 @@
-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 `@a2ui/angular` package provides the Angular implementation for rendering A2UI surfaces, bridging the Agent-to-Agent (A2A) protocol to Angular-friendly components.
+
+## Architecture & Versions
+
+The package contains evolving architectures to support different A2UI specification versions:
+
+- **`v0_8`**: Initial approach utilizing dedicated, static Angular components for each element type (e.g., `<a2ui-button>`).
+- **`v0_9`**: Dynamic approach centering around a single generic host component (`ComponentHostComponent`) coupled with extensible `Catalog` registries. **This is the recommended architecture for modern integrations.**
+
+---
+
+## Getting Started (`v0_9`)
+
+The `v0_9` model decouples rendering mechanics from static templates by binding model state dynamically through dynamic component allocation.
+
+### 1. Register Components in a Catalog
+
+Extend `AngularCatalog` or use preset catalogs like `MinimalCatalog`. Define your custom elements by passing them to the base constructor:
+
+```typescript
+import { Injectable } from '@angular/core';
+import { MinimalCatalog } from '@a2ui/angular/lib/v0_9/catalog/minimal/minimal-catalog';
+import { CustomComponent } from './custom-component';
+
+@Injectable({ providedIn: 'root' })
+export class MyCatalog extends MinimalCatalog {
+  constructor() {
+    const customComponents = [
+      {
+        name: 'CustomComponent',
+        schema: { ... }, // Zod schema spec
+        component: CustomComponent,
+      },
+    ];
+
+    super('my-catalog', customComponents, []);
+  }
+}
+```
+
+### 2. Provide Renderer Infrastructure
+
+In your dashboard component or module providers tier, provide the `A2uiRendererService`:
+
+```typescript
+import { Component } from '@angular/core';
+import { A2uiRendererService } from '@a2ui/angular/lib/v0_9/core/a2ui-renderer.service';
+import { MyCatalog } from './my-catalog';
+
+@Component({
+  selector: 'app-dashboard',
+  providers: [
+    A2uiRendererService,
+    // MyCatalog is providedIn: 'root', otherwise provide it here
+  ]
+})
+```
+
+### 3. Initialize Layout and Render
+
+Prepare the service on load by providing a `RendererConfiguration`. This defines the catalogs to use and an optional global action handler:
+
+```typescript
+export class DashboardComponent implements OnInit {
+  private rendererService = inject(A2uiRendererService);
+  private myCatalog = inject(MyCatalog);
+  surfaceId = 'dashboard-surface';
+
+  ngOnInit() {
+    this.rendererService.initialize({
+      catalogs: [this.myCatalog],
+      actionHandler: (action) => {
+        console.log('Global action handler received:', action);
+      },
+    });
+  }
+
+  onMessagesReceived(messages: any[]) {
+    this.rendererService.processMessages(messages);
+  }
+}
+```
+
+Place the `<a2ui-v09-component-host>` component in your template pointing to the desired layout node:
+
+```html
+<a2ui-v09-component-host [surfaceId]="surfaceId" componentId="root"> </a2ui-v09-component-host>
+```
+
+---
+
+## Building and Development
+
+### Building the Package
+
+Distributes the library bundle utilizing `ng-packagr` outputting to `./dist`:
+
+```bash
+npm run build
+```
+
+### Running the Demo
+
+Starts a dev environment rendering local samples containing live inspectors reviewing data pipelines:
+
+```bash
+npm run demo
+```
+
+---
+
+## Legal Notice
+
+**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/angular.json

@@ -27,6 +27,67 @@
           }
         }
       }
+    },
+    "demo-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "demo-app",
+      "sourceRoot": "demo-app/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "demo-app/src/main.ts",
+            "tsConfig": "demo-app/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "demo-app/public"
+              }
+            ],
+            "styles": ["demo-app/src/styles.css"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo-app:build:production"
+            },
+            "development": {
+              "buildTarget": "demo-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
     }
   },
   "cli": {

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

@@ -0,0 +1,127 @@
+/**
+ * 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 '../../../v0_9/core/a2ui-renderer.service';
+import { AngularCatalog } from '../../../v0_9/catalog/types';
+import { SurfaceGroupAction, A2uiMessage } from '@a2ui/web_core/v0_9';
+
+/**
+ * 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 catalog: AngularCatalog,
+  ) {}
+
+  /**
+   * 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.initialize({
+      catalogs: [this.catalog],
+      actionHandler: (action) => this.handleAction(action),
+    });
+    this.rendererService.processMessages(initialMessages);
+  }
+}

renderers/angular/demo-app/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()],
+};