refactor(composer): rename Dojo → Theater + keyboard shortcuts + cleanup#2
Open
zeroasterisk wants to merge 48 commits intonan-yu:a2ui-dojo-forkfrom
Open
refactor(composer): rename Dojo → Theater + keyboard shortcuts + cleanup#2zeroasterisk wants to merge 48 commits intonan-yu:a2ui-dojo-forkfrom
zeroasterisk wants to merge 48 commits intonan-yu:a2ui-dojo-forkfrom
Conversation
…be 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
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
- 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
…or 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.
…r Vercel over Cloudflare Pages
… sync sample data
… update transcoder
- 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)
- 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)
- 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
- 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
…nt 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
…nfirmation 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.
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
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.
- 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)
…ario 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
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
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.
By default, the Angular client uses the non-streaming API to communicate with the agent. To enable streaming, set the `ENABLE_STREAMIING` env var to `true. ```bash export ENABLE_STREAMING=true npm start -- restaurant ```
The agent samples yield the accumulated final response after sending
all streaming chunks, which is duplicate. It now cleanly yields
`{"is_task_complete": True, "parts": []}`.
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. ```
…move 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 <nanyu@google.com>
zeroasterisk
force-pushed
the
a2ui-dojo-fork
branch
from
d6f235c to
e5d0128
Compare
nan-yu
force-pushed
the
a2ui-dojo-fork
branch
3 times, most recently
from
4e985d0 to
f893095
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Builds on top of the Dojo PR with three changes:
1. Rename Dojo → Theater
"Theater" better captures what this is — you're watching a performance unfold (scenes/chunks, acts/lifecycle phases, a stage/renderer). "Dojo" implies practice/training which doesn't match the current VCR-style experience.
/dojo→/theatersrc/app/dojo,src/components/dojo,src/data/dojorenamed2. Keyboard Shortcuts
3. Remove Deployment Artifacts
Cleaned up deployment-specific files that aren't part of the feature:
open-next.config.ts(OpenNext/Cloudflare)wrangler.jsonc(Cloudflare Workers).dev.vars(Cloudflare dev secrets)public/_headers(Cloudflare headers)These are deployment conveniences — the Theater will eventually deploy with the Composer app.
Note on PR google#992
The Composer has an open PR (google#992) that replaces the Lit renderer with
@a2ui/react. When that lands, the Theater's renderer integration will need updating since it currently uses@copilotkit/a2ui-renderer.