Refactor all client samples to use @a2a-js/sdk for agent communication

[jacobsimionato]

Currently, several client samples (Angular and Lit) implement manual fetch calls and custom SSE parsing to communicate with agents via a proxy. This introduces significant boilerplate and maintenance overhead. We should refactor these samples to use the @a2a-js/sdk A2AClient directly in the browser, matching the standard pattern used in the Lit Shell sample.

Benefits:

• Eliminates Manual SSE Logic: Removes the need for ReadableStream, TextDecoder, and manual line parsing in every client.
• Typed Responses: Standardizes response handling using SDK types (Message, Task, Artifact) instead of manual filtering of parts.
• Simplified Middlewares: backend middlewares can transition from protocol converters to simple transparent proxies.
• Robust Metadata: Centralizes the management of a2uiClientCapabilities and inlineCatalogs using the SDK's message metadata structure.

Scope:

• Angular Samples: contact, restaurant, rizzcharts, mcp_calculator.
• Lit Samples: contact, component_gallery.

[jacobsimionato]

Coding agent prompt:

This task involves refactoring the communication layer of multiple sample applications to use the @a2a-js/sdk library instead of manual fetch calls and SSE parsing.

1. Implementation Strategy

For each target sample, follow these steps:

A. Client-Side Refactor

1. Initialize A2AClient: Replace manual fetch logic with an A2AClient instance.
   • Use A2AClient.fromCardUrl(...).
   • The cardUrl should point to a local proxy path (e.g., /a2a-proxy/.well-known/agent-card.json) to avoid CORS issues if not handled by the agent.
   • Provide a custom fetchImpl that adds the mandatory A2UI header: X-A2A-Extensions: https://a2ui.org/a2a-extension/a2ui/v0.8.
2. Standardize Request Metadata:
   • Always include a2uiClientCapabilities in the metadata of the message being sent.
   • For samples that support custom components (like Lit Contact), include the inlineCatalogs in the metadata.
3. Handle Responses:
   • Use client.sendMessage (unary) or client.sendMessageStream (streaming).
   • Use a helper function to extract A2UI messages from the A2A response parts by filtering for mimeType: application/json+a2ui.
   • Pass the extracted data objects directly to the MessageProcessor.
4. Cleanup: Delete manual SSE parsing code, TextDecoder usage, and custom part unwrapping loops.

B. Middleware/Proxy Refactor

1. Simplify Middleware:
   • Refactor the Vite middlewares (in Lit samples) or the Express routes (in Angular samples) to be simple transparent proxies.
   • They should no longer wrap text into A2A messages or unwrap A2A responses into flat arrays of parts.
   • In Vite, prefer using the standard server.proxy configuration in vite.config.ts if possible, replacing the custom middleware/a2a.ts handlers.

2. Reference Examples

• Standard SDK Usage: See @samples/client/lit/shell/client.ts.
• A2UI Metadata Pattern: See the existing logic in @samples/client/lit/shell/middleware/a2a.ts for what needs to move to the client-side metadata.

3. Target Files

• Angular Contact: @samples/client/angular/projects/contact/src/app/client.ts & @samples/client/angular/projects/contact/src/server.ts
• Angular Restaurant: @samples/client/angular/projects/restaurant/src/app/client.ts & @samples/client/angular/projects/restaurant/src/server.ts
• Angular RizzCharts: @samples/client/angular/projects/rizzcharts/src/services/a2a_service.ts & @samples/client/angular/projects/rizzcharts/src/server.ts
• Lit Contact: @samples/client/lit/contact/client.ts & @samples/client/lit/contact/middleware/a2a.ts
• Lit Component Gallery: @samples/client/lit/component_gallery/client.ts & @samples/client/lit/component_gallery/middleware/a2a.ts

4. Dependencies

Ensure @a2a-js/sdk is added to the dependencies of the respective project's package.json.

5. Verification

• Verify that each sample can still successfully send a text query and render the returned A2UI components.
• For streaming-enabled samples (like Angular Contact), ensure the UI updates incrementally as parts arrive.

[jacobsimionato]

@nan-yu you don't necessarily have to do this, but I think it'd be good for us to do after your refactors!