feat(angular): upgrade Angular renderer to v0.9 dynamic architecture

- Major Architecture Upgrade: Transitioned from static components per element (v0.8) to a fully dynamic component hosting paradigm (v0.9) with dynamic allocation and decoupled bindings (`ComponentHostComponent`).
- V0.8 Isolation: Extracted and locked existing legacy configurations into `/src/lib/v0_8/` workspaces backing backwards compatibility layout managers securely.
- Unified Inspector Client Dashboard: Set up a custom workspace host system dashboard (`/demo-app`) serving standalone layout widgets pipelines containing hot-reactive aggregates views.
- schemas and execution aligning updates: Fixed `BASIC_FUNCTIONS` aligning schemas and validation designs layout.
- License compliance instructions: Fixed `.github/workflows/check_license.yml` to help describe local license remediation diagnostics correctly rather than just failing triggers.

Author: gspencergoog

.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,8 @@
+
+## 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,118 @@
-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 using a dynamic mapping:
+
+```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() {
+    super();
+
+    const customApi = {
+      name: 'CustomComponent',
+      schema: { ... }, // Zod schema spec
+      component: CustomComponent,
+    };
+
+    const components = Array.from(this.components.values());
+    components.push(customApi);
+
+    // Merge custom registrations
+    (this as any).components = new Map(components.map((c) => [c.name, c]));
+  }
+}
+```
+
+### 2. Provide Renderer Infrastructure
+
+In your dashboard component or module providers tier, initialize the `A2uiRendererService` and declare the backing `AngularCatalog`:
+
+```typescript
+import { Component, inject, OnInit } from '@angular/core';
+import { A2uiRendererService } from '@a2ui/angular/lib/v0_9/core/a2ui-renderer.service';
+import { AngularCatalog } from '@a2ui/angular/lib/v0_9/catalog/types';
+import { MyCatalog } from './my-catalog';
+
+@Component({
+  selector: 'app-dashboard',
+  providers: [
+    A2uiRendererService,
+    { provide: AngularCatalog, useClass: MyCatalog },
+  ]
+})
+```
+
+### 3. Initialize Layout and Render
+
+Prepare the service on load and supply the generic host targeting the source surface:
+
+```typescript
+export class DashboardComponent implements OnInit {
+  private rendererService = inject(A2uiRendererService);
+  surfaceId = 'dashboard-surface';
+
+  ngOnInit() {
+    this.rendererService.initialize();
+  }
+
+  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/public/favicon.ico

@@ -0,0 +1,92 @@
+/**
+ * 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 '../../../src/lib/v0_9/core/a2ui-renderer.service';
+
+/**
+ * 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: any[] = [];
+
+  constructor(private rendererService: A2uiRendererService) {}
+
+  /**
+   * 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: any) {
+    console.log('[AgentStub] handleAction action:', action);
+    this.actionsLog.push({ timestamp: new Date(), action });
+
+    // Simulate server processing delay
+    setTimeout(() => {
+      if (action.event?.name === 'update_property') {
+        const { path, value, surfaceId } = action.event.context;
+        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 (action.event?.name === 'submit_form') {
+        const formData = action.event.context;
+        const name = 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, ${name}! Your form has been processed.`,
+              },
+            },
+          ]);
+      }
+    }, 50); // Shorter delay for property updates
+  }
+
+  /**
+   * Initializes a demo session with an initial set of messages.
+   */
+  initializeDemo(initialMessages: any[]) {
+    this.rendererService.initialize((action) => this.handleAction(action));
+    this.rendererService.processMessages(initialMessages);
+  }
+}

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

renderers/angular/demo-app/src/app/app.config.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+
+    fixture.detectChanges(); // Trigger ngOnInit
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.canvas-frame')).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h3')?.textContent).toContain('A2UI Examples');
+  });
+});