A2UI Document Rendering
A2UI documents are structured JSON payloads that define a set of UI components (text, tables, forms, charts) to be rendered within the Web Console apps/web/src/a2ui/renderer.tsx#33-59.Component Architecture
TheA2uiRenderer iterates through a list of components defined in an A2uiDocument apps/web/src/a2ui/renderer.tsx#40-49. Each component is rendered by the ComponentBody function, which maps component types to specific React implementations:
| Component Type | Implementation | Description |
|---|---|---|
text | p.a2ui-text | Renders plain text with semantic tones (e.g., info, warning) apps/web/src/a2ui/renderer.tsx#68-71. |
markdown | SanitizedMarkdown | Renders GitHub-flavored markdown with XSS protection apps/web/src/a2ui/renderer.tsx#72-73. |
table | A2uiTable | A data grid with column headers and row-based data apps/web/src/a2ui/renderer.tsx#88-89. |
form | A2uiForm | Interactive inputs (text, number, select, checkbox) that trigger onFormSubmit apps/web/src/a2ui/renderer.tsx#90-91. |
chart | A2uiBarChart | Visual data representation apps/web/src/a2ui/renderer.tsx#92-93. |
Form Handling and Data Flow
TheA2uiForm component manages local state for its fields using the values state hook apps/web/src/a2ui/renderer.tsx#135-139. When a user submits the form, it packages the current state into an A2uiFormSubmitEvent and passes it to the parent handler apps/web/src/a2ui/renderer.tsx#148-154.
Sources: apps/web/src/a2ui/renderer.tsx#33-240
Canvas System and State Patching
The Canvas system allows agents to maintain a long-lived state that can be incrementally updated using JSON patches. This is primarily managed via thepatch.ts utility and the CanvasService gRPC interface.
JSON Patch Application (patch.ts)
Palyra implements a custom JSON patch engine to ensure security and performance during state updates. The applyPatchDocument function takes a base state and applies a series of operations (add, replace, remove) apps/web/src/a2ui/patch.ts#47-89.
Key Security Features:
- Prototype Pollution Protection: The engine explicitly forbids pointer tokens like
__proto__,prototype, andconstructorto prevent malicious state manipulation apps/web/src/a2ui/patch.ts#16-16, apps/web/src/a2ui/tests/patch.security.test.tsx#9-30. - Budget Enforcement: Patches are restricted by
maxOpsPerPatch,maxPathLength, andmaxApplyMsPerTickto prevent Denial of Service (DoS) attacks via complex or infinite patch loops apps/web/src/a2ui/patch.ts#59-84.
Data Flow: Natural Language to State Patch
The following diagram illustrates how an agent’s intent is transformed into a state update on the user’s canvas. Canvas State Update Pipeline Sources: apps/web/src/a2ui/patch.ts#47-89, crates/palyra-daemon/src/transport/http/router.rs#134-180, apps/web/src/a2ui/tests/patch.security.test.tsx#9-30Security and Sandboxing
Security is enforced through multiple layers, including Content Security Policy (CSP) and iframe sandboxing for rendered content.Content Security Policy (CSP)
The Web Console enforces a strict CSP to mitigate XSS and data exfiltration. The policy is defined inindex.html and verified by automated tests apps/web/index.html#9-11, apps/web/src/securityPolicy.test.ts#11-20.
script-src 'self': Disallows inline scripts and external domains apps/web/src/securityPolicy.test.ts#15-15.frame-ancestors 'none': Prevents the console from being embedded in malicious iframes apps/web/src/securityPolicy.test.ts#18-18.object-src 'none': Disables plugins like Flash apps/web/src/securityPolicy.test.ts#17-17.
Canvas Runtime Security
Canvas HTTP endpoints are protected by rate limiting and token validation. Thecanvas_rate_limit_middleware ensures that canvas updates do not overwhelm the daemon crates/palyra-daemon/src/transport/http/handlers/console/diagnostics.rs#80-81.
Canvas Security Architecture
Sources: apps/web/index.html#9-11, apps/web/src/securityPolicy.test.ts#11-28, crates/palyra-daemon/src/transport/http/router.rs#175-180, crates/palyra-daemon/src/transport/http/handlers/console/diagnostics.rs#80-81
HTTP Runtime and Diagnostics
The Canvas system is exposed via the/canvas/v1/* route prefix in the Axum router crates/palyra-daemon/src/transport/http/router.rs#175-180.
Key Endpoints
GET /canvas/v1/{canvas_id}/state: Retrieves the current synchronized state of a canvas.POST /canvas/v1/{canvas_id}/patch: Applies aPatchDocumentto the canvas state.
Diagnostics and Monitoring
The system health can be monitored via theconsole_diagnostics_handler, which provides snapshots of:
- Rate Limits:
canvas_api_max_requests_per_windowand current usage crates/palyra-daemon/src/transport/http/handlers/console/diagnostics.rs#80-81. - Memory Usage: Retention policies and vacuum schedules for canvas-related journal events crates/palyra-daemon/src/transport/http/handlers/console/diagnostics.rs#100-116.