fix(chat): synthesize human-readable label for A2UI action user bubbles

[blove]

Summary

Today, when a user interacts with a rendered A2UI surface (clicks Submit on a form, Select on a flight, Modify search, etc.), the protocol's A2uiActionMessage flows through agent.submit() as a HumanMessage whose content is the JSON-serialized protocol payload. The chat-message-list renders that JSON as a user bubble — the end-user sees a ~300-char dump like:

`{"version":"v1","action":{"name":"bookingSubmit","surfaceId":"booking","sourceComponentId":"submit","timestamp":"...","context":{"formId":{"literalString":"booking"},"origin":{"literalString":""}...}}}`

…as if they typed the protocol themselves.

Research basis

Per the A2UI v0.9 spec, action messages flow on the client → agent return channel and are framed as typed events resembling tool call results — NOT user utterances. Google Cloud's "A2UI in Practice" article and the Stream Chat reference integration both warn against modeling actions as chat-history user turns. No reference client surfaces the raw payload as a bubble; Stream Chat synthesizes a human-readable string and tucks the JSON into extraData; CopilotKit transforms into a natural-language query string. The protocol spec itself is silent on UI presentation.

Fix

New helper a2uiActionLabel(content) in libs/chat/src/lib/a2ui/action-label.ts:

• Detects v1 A2UI action messages by parsing the JSON content
• Returns a short human-readable label for known action names:
  • bookingSubmit → 'Search flights'
  • flightSelect → 'Selected flight UA123' (or 'Selected flight' if no flightId)
  • modifySearch → 'Modify search'
• Falls back to camelCase humanization for unknown action names (e.g. addToCart → 'Add to cart')
• Returns null for any non-action content (regular prose, markdown, malformed JSON) so typed prompts pass through unchanged

The chat composition's human-message template now routes through a new humanContent(message) method that prefers the synthesized label and falls back to the raw content. No backend or message-stream change — the action still flows through state and reaches the agent; only the visible bubble is rewritten.

Files

• libs/chat/src/lib/a2ui/action-label.ts — new helper with full inline citation of the research sources
• libs/chat/src/lib/compositions/chat/chat.component.ts — wire the helper into the human-message template via humanContent()

Test plan

• 11/11 unit cases pass: known actions (bookingSubmit/flightSelect/modifySearch), unknown action humanization, malformed JSON, plain prose, empty string, wrong version (v2), non-action object
• npx nx run chat:build — green
• npx nx run chat:test — green
• npx nx run cockpit-chat-a2ui-angular:build — green
• Chrome MCP smoke against local c-a2ui (5511 + 4511): clicking 'Search flights' on the booking form now produces a 'Search flights' user bubble instead of the JSON dump
• CI

Out of scope (worth a follow-up)

• The synthesized label could optionally be styled differently (smaller / dimmer) to visually distinguish from typed user messages, similar to Stream Chat's pattern. This PR uses the standard user-bubble style for now.
• More action-name → label mappings can be added in KNOWN_LABELS over time as new surfaces are introduced.
• Attaching the action visually to the originating surface (Option C in the research) would be the most semantically faithful long-term fix — but requires persistent surfaces and a larger surface-store rework.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
threadplane	Ready	Preview, Comment	May 19, 2026 4:38pm