Commit e488794
feat(composer): A2UI Theater — interactive JSONL playback and streaming viewer (google#987)
* docs: design system integration guide, custom components guide, YouTube component
- New guide: design-system-integration.md — step-by-step for adding A2UI
to an existing Material Angular application
- Rewritten guide: custom-components.md — complete walkthrough for YouTube,
Maps, and Charts custom components (replaces TODO skeleton)
- New sample component: YouTube embed for rizzcharts catalog
- Updated rizzcharts catalog.ts to include YouTube component
- Friction log documenting 8 friction points (P2/P3) encountered during
development, with recommendations
- Added Design System Integration to mkdocs nav
* Apply suggestions from code review
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
* docs: address PR google#824 review comments
- Remove friction log file (content already in issue google#825)
- YouTube component: add video ID regex validation (security)
- custom-components.md: rename to 'Custom Component Catalogs', reorder
examples (media first), clarify basic catalog is optional, remove
redundant heading, fix Maps input.required consistency, add
encodeURIComponent to docs example
- design-system-integration.md: rewrite to focus on wrapping Material
components as A2UI components (not using DEFAULT_CATALOG), show
custom catalog without basic components, add mixed catalog example
- s/standard/basic/ throughout
* docs: add render_macros:false to prevent Jinja2 eval of Angular template syntax
* feat(dojo): Add A2UI Dojo and Mock Scenarios
* feat(dojo): implement comprehensive visual design and layout polish for A2UI Dojo
- Redesigned Top Command Center with glassmorphic header and functional timeline scrubber.
- Replaced native scenario select with Shadcn DropdownMenu.
- Polished Data Stream view with active state highlighting, glow effects, and auto-scrolling.
- Replaced native checkboxes with custom Tailwind styled toggles in Config view.
- Added dynamic grid layout for the Renderers Panel with sophisticated styling per surface (React Web, Discord dark mode replica, Lit Components).
- Applied custom slim scrollbars throughout for a premium feel.
* fix(composer): remove edge runtime to fix Next.js build errors, prefer Vercel over Cloudflare Pages
* feat(dojo): Add scenario harvest, mobile layout, and UX evaluations
* fix(composer): remove opennextjs-cloudflare dependency for Vercel deployment
* fix(dojo): fix progress timeline and start renderers in empty state
* feat(dojo): enable URL parameter deep linking for scenarios and timeline steps
* feat: wire up A2UIViewer to dojo scrubber stream via useA2UISurface hook
* feat(dojo): polish timeline scrubber, sync A2UI transcoder and adjust layout
* feat(dojo): fix A2UISurface hook compatibility for React renderer and sync sample data
* feat(dojo): improve visual feedback for timeline and scrubber messages
* feat(dojo): integrate northstar-tour scenario, remove CopilotKit, and update transcoder
* fix(dojo): use real v0.8 sample scenarios and fix renderer pipeline
- Replace invented v0.9 scenarios with real v0.8 samples from samples/agent/adk/
- Add restaurant-booking, restaurant-list, restaurant-grid, restaurant-confirmation
- Add contact-card, contact-list, org-chart, floor-plan scenarios
- Update index.ts to surface real scenarios as defaults
- Default scenario is now restaurant-booking (verified rendering)
- Fix transcoder.ts: pass v0.8 messages through unchanged
- Fix useA2UISurface.ts: only process v0.8 format components (id + component)
- Fix dataModelUpdate: parse ValueMap format correctly
- Restaurant booking now renders: column, text, image, textfield, datetime, button
- Locally verified with headless Chromium: all A2UI CSS classes present
- Build passes (bun run build)
* fix(dojo): use @copilotkit/a2ui-renderer instead of local @a2ui/react
- Switch import to @copilotkit/a2ui-renderer (npm-published)
- Remove file:../../renderers/react dep that breaks Vercel builds
- @copilotkit/a2ui-renderer uses @a2ui/lit under the hood (npm transitive dep)
* feat(dojo): single renderer pane, step summaries, hide Discord mock
- Remove Discord mock pane and multi-renderer grid
- Show single A2UI renderer (full width, centered)
- Add human-readable step summaries to JSONL pane
(e.g. 'Update 9 components: Column, Text, Image, TextField...')
- Raw JSON collapsed by default behind 'Raw JSON ▸' toggle
- Steps are clickable to seek directly
- Wider left pane (35%) for better readability
- Remove unused renderer toggle state
* fix(dojo): remove broken v0.9 scenarios that crash renderer
- Remove northstar-tour, flight-status, weather-widget (v0.9 format)
- Remove kitchen-sink, component-gallery-stream (not real scenarios)
- Keep only verified v0.8 scenarios from samples/agent/adk/
- 12 working scenarios remain in dropdown
* fix(dojo): use standard catalog for rizzcharts-chart scenario so it renders
* fix(dojo): remove h-full overflow-hidden from renderer frame so content doesn't clip
The browser-chrome container had h-full which constrained it to viewport height
and overflow-hidden clipped any content below. This caused the DateTimeInput
and fields below it to be cut off in restaurant-booking with no way to scroll.
Fix: remove h-full from the frame so it grows with content, and drop flex-1 +
overflow-auto from the content area since the outer pane wrapper already handles
scrolling via overflow-y-auto.
Fixes google#243
* fix(dojo): add missing confirmation-column component to restaurant-confirmation scenario
The Card component referenced 'confirmation-column' as its child, but that
component was never defined in the surfaceUpdate. This caused the model
processor to return null for the unresolved child, making isResolvedCard()
fail validation with 'Invalid data; expected Card'.
Fix: add the confirmation-column Column component with an explicit children
list wiring up all the confirmation content components.
* dojo: hide mock browser chrome traffic light dots on mobile viewport
On small screens (< sm breakpoint), the traffic light dots in the
mock browser chrome header are hidden to reduce visual clutter.
Uses Tailwind's hidden sm:flex responsive pattern.
Task google#237
* fix(dojo): set copilotkit route to force-dynamic to fix 500 on page load
The route was incorrectly set to 'force-static' which caused Next.js to
fail with a 500 error on every page load since the CopilotRuntime /
InMemoryAgentRunner cannot be statically exported.
Change to 'force-dynamic' so the route is properly handled server-side.
* feat(dojo): URL state, config panel, nav link, curated scenarios
- URL state: scenario, step, renderer synced to query params
(e.g. /dojo?scenario=contact-card&step=2&renderer=React)
- Config panel: renderer dropdown + scenario dropdown (synced with header)
- Sidebar nav: added 'Dojo' link with Play icon
- Curated to 5 quality scenarios (removed broken/redundant ones)
- Removed contact-lookup (crashes on step 4 — missing component refs)
* fix: use npm lockfile for Vercel compatibility
* fix: gitignore pnpm-lock.yaml to prevent Vercel from using pnpm
* feat(dojo): streaming simulation, 3-tab left pane, remove header scenario
Major architecture change:
- NEW useStreamingPlayer hook: explodes messages into individual JSONL lines
that stream progressively (line-by-line) instead of whole-message chunks
- Scrubber now has fine-grained control over 60+ stream positions per scenario
- Three left pane tabs:
(a) Events — lifecycle summaries (surface created, components registered, data bound)
(b) Data — raw streaming lines appearing chunk by chunk with ↓/↑ badges
(c) Config — scenario, renderer, transport dropdowns
- Removed scenario dropdown from header (lives only in Config tab)
- Streaming cursor animation shows which message is mid-delivery
- Click any event/line to seek to that position
- Server/client sections grouped with direction badges
- Compact header with streaming status indicator
* fix(dojo): correct JSONL streaming — chunk per message, not per line
Each JSONL chunk is one complete JSON object on one line — that's how
real SSE/JSONL works. Not individual formatted lines within a message.
- Data tab now shows raw wire format (compact JSON, one chunk per card)
- Shows byte size per chunk and total bytes received
- Scrubber steps through 3 chunks for restaurant-booking (not 60+ fake lines)
- Streaming cursor shows 'Waiting for next chunk...' between deliveries
- Header shows total bytes received during playback
* feat(dojo): add user interaction to restaurant-booking scenario
Adds 3 new chunks to the restaurant-booking scenario:
- Chunk 4 (↑ CLIENT): User submits booking form with party size, date,
dietary requirements via clientEvent/userAction
- Chunk 5 (↓ SERVER): Agent responds with confirmation surface update
(checkmark, title, details, summary, Done button)
- Chunk 6 (↓ SERVER): Data model update with confirmation details
Full bidirectional flow: server renders form → user fills and submits →
server confirms with new surface state. Demonstrates the complete
A2UI interaction lifecycle in 6 JSONL chunks.
* Use relative paths for agent output
* Update record_scenario script to recording streaming chunks
* Automate image asset serving for streaming preview
* Skip copying if the image already exists in the destination
* Update recorded scenarios with streaming chunks
* Disable non-streaming scenarios
* Fix CI failures
* Add licenses to composer
* chore: migrate package manager from npm to pnpm in composer tool
It fixes compose CI build failure:
https://github.com/google/A2UI/actions/runs/23568752574/job/68626383193?pr=987.
```
/home/runner/setup-pnpm/node_modules/.bin/pnpm store path --silent
/home/runner/setup-pnpm/node_modules/.bin/store/v10
Error: Some specified paths were not resolved, unable to cache dependencies.
```
* feat: use @a2ui/markdown-it as optional peer dependency for v0.8 in Lit and Angular
* Update streaming chunks
* refactor(composer): rename Dojo → Theater, add keyboard shortcuts, remove deployment artifacts
- Rename /dojo route to /theater throughout (app, components, data, nav)
- Add keyboard shortcuts: Space (play/pause), Arrow keys (step ±1), Shift+Arrow (step ±5)
- Remove deployment-specific files: open-next.config.ts, wrangler.jsonc, .dev.vars, _headers
Co-authored-by: Nan Yu <[email protected]>
* Remove unrelated doc update
* refactor: remove debug console log from A2UIRenderer
* refactor: remove obsolete patch_v2 script for page.tsx step support
---------
Co-authored-by: alan blount <[email protected]>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>1 parent 3b1dc2d commit e488794
68 files changed
Lines changed: 30705 additions & 3103 deletions
File tree
- renderers
- angular
- src/v0_8/data
- lit
- src/0.8/ui/directives
- web_core
- samples
- agent/adk
- contact_lookup
- restaurant_finder
- client/angular
- projects/rizzcharts/src/a2ui-catalog
- tools/composer
- public/images
- contact_lookup
- restaurant_finder
- src
- app
- api/copilotkit/[[...slug]]
- theater
- widget/[id]
- components
- editor
- layout
- theater
- data/theater
- lib
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
36 | 36 | | |
37 | 37 | | |
38 | 38 | | |
39 | | - | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
40 | 46 | | |
41 | 47 | | |
42 | 48 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
28 | 28 | | |
29 | 29 | | |
30 | 30 | | |
| 31 | + | |
| 32 | + | |
31 | 33 | | |
32 | 34 | | |
33 | 35 | | |
34 | 36 | | |
35 | | - | |
36 | | - | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
37 | 49 | | |
38 | 50 | | |
39 | 51 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
102 | 102 | | |
103 | 103 | | |
104 | 104 | | |
| 105 | + | |
| 106 | + | |
| 107 | + | |
| 108 | + | |
| 109 | + | |
| 110 | + | |
| 111 | + | |
| 112 | + | |
105 | 113 | | |
106 | 114 | | |
107 | 115 | | |
| |||
110 | 118 | | |
111 | 119 | | |
112 | 120 | | |
113 | | - | |
| 121 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
61 | 61 | | |
62 | 62 | | |
63 | 63 | | |
64 | | - | |
65 | | - | |
66 | | - | |
67 | | - | |
68 | | - | |
69 | | - | |
70 | | - | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
| 77 | + | |
| 78 | + | |
| 79 | + | |
71 | 80 | | |
72 | 81 | | |
73 | 82 | | |
| |||
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
119 | 119 | | |
120 | 120 | | |
121 | 121 | | |
122 | | - | |
| 122 | + | |
123 | 123 | | |
124 | 124 | | |
125 | 125 | | |
| |||
128 | 128 | | |
129 | 129 | | |
130 | 130 | | |
131 | | - | |
| 131 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
| 77 | + | |
| 78 | + | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| 82 | + | |
| 83 | + | |
| 84 | + | |
| 85 | + | |
| 86 | + | |
| 87 | + | |
| 88 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
0 commit comments