refactor and feat: implement WebAppFrameSrcdoc component and consolidate iframe communication into WebAppFrameBridgeService

[sugoi-yuzuru]

Description

Overview

This pull request introduces the WebAppFrameSrcdoc component to enable rendering interactive sandboxed web frames from inline HTML strings (srcdoc), alongside the existing URL-based WebAppFrameUrl component.

To prevent code duplication across URL-based and inline HTML frame components, this change extracts shared iframe communication, schema validation, lifecycle management, and two-way data synchronization into an Angular service named WebAppFrameBridgeService. It also consolidates common Zod property schemas into WebAppFrameBasePropsSchema.

The Pong sample application is updated to demonstrate and verify srcdoc-based inline web frames.

New components and catalog additions

• Added WebAppFrameSrcdoc as a standalone Angular component that binds an inline HTML payload to a sandboxed iframe via the srcdoc attribute.
• Registered WebAppFrameSrcdoc in the Angular A2UI component catalog in catalog.ts and added it to the sample app template in app.html.
• Updated the Python agent proxy in tools.py and agent.py to support generating and handling srcdoc web frame tool calls.
• Added the schema definition for WebAppFrameSrcdoc to mcp_app_catalog.json.
• Updated specification documentation in web-frame-component_spec.md.

Shared iframe bridge service and schema consolidation

• Implemented WebAppFrameBridgeService (@Injectable()) to centralize postMessage event handling, Ajv-based JSON schema validation for allowed actions and functions, ResizeObserver container dimension tracking, and two-way data model synchronization.
• Refactored WebAppFrameUrl and WebAppFrameSrcdoc to delegate iframe initialization and messaging to WebAppFrameBridgeService. This removes 824 lines of duplicated logic while adding 528 lines across the service and component implementations.
• Extracted common component properties (config, data, allowedEvents, allowedFunctions, mutableData, disableSchemaValidation) into WebAppFrameBasePropsSchema in web-frame-messages.ts. Both webAppFrameUrlPropertiesSchema and webAppFrameSrcdocPropertiesSchema extend this base schema.
• Updated iframe sandbox proxy initialization in sandbox.ts.

Pong sample application integration

• Updated pong_server.py to return an inline HTML string via WebAppFrameSrcdoc instead of a remote URL.
• Updated pong_web_frame_bridge.js to support srcdoc-rendered iframe message handshakes and data updates.
• Updated documentation and run instructions in README.md.

Changed files

File	Description
web-app-frame-bridge.service.ts	New service centralizing iframe messaging, schema validation, resize observers, and data model synchronization.
web-app-frame-srcdoc.ts	New Angular component rendering inline HTML via the iframe srcdoc attribute.
web-app-frame-url.ts	Refactored to delegate iframe communication and state synchronization to WebAppFrameBridgeService.
web-frame-messages.ts	Added WebAppFrameBasePropsSchema to share common property validation between frame components.
catalog.ts	Registered WebAppFrameSrcdoc in the Angular client catalog.
app.html	Added WebAppFrameSrcdoc to the sample application layout.
sandbox.ts	Updated sandbox proxy initialization for inner iframe containers.
mcp_app_catalog.json	Added WebAppFrameSrcdoc schema to the 0.9 MCP app catalog.
agent.py	Updated agent prompt and logic to handle srcdoc frame rendering.
tools.py	Added tool support for generating WebAppFrameSrcdoc UI payloads.
pong_server.py	Configured Pong server to emit WebAppFrameSrcdoc components.
pong_web_frame_bridge.js	Updated bridge script to support inline srcdoc frames.
README.md	Updated Pong demo documentation.
web-frame-component_spec.md	Updated web frame component specification notes.
package.json	Package dependencies update for Angular client.

Verification

• Confirmed that WebAppFrameUrl and WebAppFrameSrcdoc compile cleanly with no TypeScript or lint errors.
• Verified that message handshakes (a2ui_app_frame_ready, a2ui_app_frame_init), schema validation, action dispatching, and two-way data model updates work across both URL and srcdoc iframe components.
• Tested the Pong sample application with srcdoc-based rendering.
• Demo

Pre-launch Checklist

One time:

• I signed the CLA.
• I read the Contributors Guide.
• I read the Style Guide.
• I have built and run at least one sample.

For this PR:

• I have updated the relevant CHANGELOG.md file.
• I updated/added relevant documentation.
• My code changes (if any) have tests.
• If my branch is on a fork, I have verified that scripts/e2e_test.sh passes.

If you need help, consider asking for advice on the discussion board.

[gemini-code-assist]

Code Review

This pull request introduces the WebAppFrameSrcdoc component to support rendering sandboxed, model-generated HTML/JS layouts via srcdoc in Angular, alongside the existing WebAppFrameUrl component. To avoid code duplication, the shared iframe bridging logic has been refactored into a new WebAppFrameBridgeService. Feedback on these changes highlights several performance and resource management improvements: compiling Ajv schemas on every message or action is inefficient and should be optimized using a validator cache; synchronous network I/O in the agent's asynchronous tool function blocks the event loop and should be run in an executor; and the MessageChannel port (appPort) needs to be properly closed upon service destruction to prevent resource leaks.

[dmandar]

Please diff with the iframe sample I had for contact finder in case we have any gaps. We can replace that iframe component with the security approved one then.

[sugoi-yuzuru]

I can check once the old iframe sample is revived.
I assume it is using v0.8. Would be best if we can also add some of the feature updates to leverage the v0.9 features.

[jacobsimionato]

Looks great! Please loop @josemontesp into future work in this area, because he will be responsible for ensuring the necessary MCP app / iframe components get released as part of our open source offerings!