From 9e697779cd72d5a24aaa5150decebcd5cec526a0 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Sat, 9 May 2026 22:19:35 -0700 Subject: [PATCH] =?UTF-8?q?feat(examples-chat):=20A2UI=20Pass=201=20surfac?= =?UTF-8?q?e=20coverage=20=E2=80=94=20exercise=20full=20catalog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Audit found that the existing 4 GenUI welcome suggestions only reliably exercise 8 of the 18 catalog components (Card, Column, Text, TextField, MultipleChoice, CheckBox, Slider, Button). The other 10 (Row, List, Tabs, Modal, Divider, DateTimeInput, Icon, Image, Video, AudioPlayer) never see daylight. Adds two welcome suggestions designed to elicit LLM-generated surfaces that collectively render 8 of the 10 gap components: - "Demo: render a media-rich product card" — Image + Tabs + Row + Icon + List + Button - "Demo: render a booking surface with modal" — DateTimeInput + Divider + Row + Card + TextField + Modal Remaining gaps (Video, AudioPlayer) are deferred — they're media-heavy and best exercised by a future media-focused suggestion when needed. Updates CHECKLIST.md with an "A2UI catalog coverage" sub-section under Generative UI / A2UI surfaces, mapping each demo prompt to the components it exercises so smoke runs can systematically verify catalog rendering across the full 18-component set. Sets up the visual baseline for the upcoming theming track: - Pass 2 (token contract expansion) audits theming knobs against the fully-exercised catalog - Pass 3 (Material preset) ships token-value CSS files with no new runtime deps Co-Authored-By: Claude Opus 4.7 (1M context) --- .../angular/src/app/modes/welcome-suggestions.ts | 10 ++++++++++ examples/chat/smoke/CHECKLIST.md | 13 +++++++++++++ 2 files changed, 23 insertions(+) diff --git a/examples/chat/angular/src/app/modes/welcome-suggestions.ts b/examples/chat/angular/src/app/modes/welcome-suggestions.ts index f3e3164e..c8412a32 100644 --- a/examples/chat/angular/src/app/modes/welcome-suggestions.ts +++ b/examples/chat/angular/src/app/modes/welcome-suggestions.ts @@ -64,4 +64,14 @@ export const WELCOME_SUGGESTIONS: readonly WelcomeSuggestion[] = [ value: 'Show me a contact form with fields for name, email address, subject, and a multi-line message, plus a Send button.', }, + { + label: 'Demo: render a media-rich product card', + value: + 'Render a product card with: a header image at the top, a tab strip with two tabs ("Overview" and "Specs"). Under Overview show a Row containing an icon and a short description Text. Under Specs show a List of feature bullets each prefixed with a small icon. Below the tabs add a primary "Add to cart" Button.', + }, + { + label: 'Demo: render a booking surface with modal', + value: + 'Render a booking surface: a heading "Book your trip", a DateTimeInput for travel date, a horizontal divider, then a Row containing two Cards (one for departure city, one for return city) each with a TextField. Below the Row add a primary "Continue" Button whose action opens a Modal containing a confirmation Column with a summary Text and Confirm / Cancel Buttons.', + }, ]; diff --git a/examples/chat/smoke/CHECKLIST.md b/examples/chat/smoke/CHECKLIST.md index 7666879c..bb30160c 100644 --- a/examples/chat/smoke/CHECKLIST.md +++ b/examples/chat/smoke/CHECKLIST.md @@ -266,6 +266,19 @@ renders correctly both during streaming and after completion. - [ ] In json-render mode: final AI message content is a bare JSON object starting with `{` - [ ] `curl localhost:2024/threads//state` confirms the above for both modes +### A2UI catalog coverage + +The 18 catalog components must render correctly when the LLM-generated surface includes them. After clicking each demo suggestion below, verify the rendered surface contains the listed component types and that each looks visually correct (no overflow, alignment intact, text legible, interactive controls functional). + +- [ ] "Demo: render a feedback form" — `Card` + `Column` + `Text` + `TextField` + (`MultipleChoice` or `Slider`) + `Button` +- [ ] "Demo: render a settings card" — `Card` + `Column` + `Text` + `MultipleChoice` + `CheckBox` + `Button` +- [ ] "Demo: render a poll" — `Card` + `Column` + `Text` + `MultipleChoice` + `Button` +- [ ] "Demo: render a contact form" — `Card` + `Column` + `Text` + `TextField` + `Button` +- [ ] "Demo: render a media-rich product card" — `Image` + `Tabs` + `Row` + `Icon` + `List` + `Button` +- [ ] "Demo: render a booking surface with modal" — `DateTimeInput` + `Divider` + `Row` + `Card` + `TextField` + `Modal` + +Components NOT yet exercised by the demo (deferred to future media-focused suggestions): `Video`, `AudioPlayer`. + ## Subagents - [ ] Click "Demo: dispatch a research subagent" welcome suggestion