feat(a2ui): add playback in playground#2613
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: dd8c3d1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📝 WalkthroughWalkthroughA new PlaybackPage streams JSONL scenarios chunk-by-chunk into a Lynx Preview iframe with play/pause/restart controls and speed control. App.tsx routing adds a "playback" tab. Page-specific CSS files (AIChatPage, ComponentsPage, DemosPage, PlaybackPage) are added and global responsive rules in styles.css are narrowed. ChangesPlayback Feature and CSS Organization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.changeset/lucky-worms-invent.md (1)
1-4:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPopulate this changeset with package bump metadata and a summary.
This file is currently empty (only delimiters), so it won’t capture a meaningful versioning/release note change for this PR.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.changeset/lucky-worms-invent.md around lines 1 - 4, The changeset file .changeset/lucky-worms-invent.md is empty and must be populated with release metadata and a short summary; update it to include the packages affected and their new version bumps (e.g., dependency or patch/minor/major), a concise human-readable summary of the changes in this PR, and any relevant release notes or migration notes so the versioning tool can generate proper changelogs.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/genui/a2ui-playground/src/App.tsx`:
- Around line 73-75: The route parsing currently maps 'playback' to
tab:'playback', which causes the UI to render examples while the route.tab
remains 'playback'; update both occurrences where you check rest[0] ===
'playback' (the early return around the protocol mapping and the later branch at
lines ~118-123) to return/tab-set 'examples' instead of 'playback' so route.tab
matches the rendered OpenUI examples tab and the nav has an active item.
In `@packages/genui/a2ui-playground/src/pages/AIChatPage.css`:
- Around line 72-79: The .chatMessage CSS rule uses the deprecated property
"word-break: break-word"; replace it with the modern equivalent "overflow-wrap:
anywhere" in the .chatMessage selector to preserve line-breaking behavior.
Locate the .chatMessage rule in AIChatPage.css and remove or replace the
"word-break: break-word" declaration with "overflow-wrap: anywhere" so stylelint
warnings are resolved and behavior remains the same.
In `@packages/genui/a2ui-playground/src/pages/DemosPage.css`:
- Around line 109-111: Remove the deprecated page-break-inside declaration:
delete the "page-break-inside: avoid;" line (and keep the modern "break-inside:
avoid;"); ensure only the non-deprecated property remains and drop any
vendor/deprecated variants like "-webkit-column-break-inside" if present to
satisfy stylelint.
In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css`:
- Line 127: The keyframe name chunkAppear violates stylelint's
keyframe-name-format rule; rename the `@keyframes` declaration (chunkAppear) to
kebab-case (e.g., chunk-appear) and update all references where it's used (for
example the animation property in PlaybackPage.css that currently says
animation: chunkAppear 300ms ease-out; and any other occurrences around the same
file such as the one on line 131) so they point to the new kebab-case name.
- Line 178: Replace the deprecated CSS property occurrence "word-break:
break-word" in PlaybackPage.css with modern wrapping properties: remove that
declaration and add "overflow-wrap: anywhere" (optionally with "word-break:
normal" for legacy fallback) within the same selector to restore the intended
wrapping behavior without triggering the stylelint deprecation.
In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx`:
- Around line 45-51: The current iframeBaseUrl code manually constructs a
render.html URL and posts runtime payloads, which bypasses the required initData
+ renderUrl + MobilePreview flow; instead, build the initData object (including
protocol.name and DEFAULT_A2UI_DEMO_URL where appropriate), pass that initData
to the renderUrl utility from src/utils/renderUrl.ts to produce the encoded
renderUrl, and then embed that renderUrl via the MobilePreview component rather
than constructing URLs with new URL(...) or using postMessage; update the places
referenced (iframeBaseUrl, the blocks at 53-67 and 293-304) to stop manual URL
construction and posting and to use initData -> renderUrl utility ->
MobilePreview embedding workflow.
- Around line 53-59: The sendToIframe callback currently posts messages with a
wildcard target origin; update sendToIframe to derive the actual origin from
iframeBaseUrl (e.g., via new URL(iframeBaseUrl).origin) and pass that origin to
win.postMessage instead of '*', handle potential URL parsing errors as needed,
and add iframeBaseUrl to the useCallback dependency array so the callback
updates when the base URL changes; references: sendToIframe, iframeRef,
iframeBaseUrl, useCallback.
---
Outside diff comments:
In @.changeset/lucky-worms-invent.md:
- Around line 1-4: The changeset file .changeset/lucky-worms-invent.md is empty
and must be populated with release metadata and a short summary; update it to
include the packages affected and their new version bumps (e.g., dependency or
patch/minor/major), a concise human-readable summary of the changes in this PR,
and any relevant release notes or migration notes so the versioning tool can
generate proper changelogs.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c4170dac-fcf0-4e22-87a8-c488e8427897
📒 Files selected for processing (15)
.changeset/lucky-worms-invent.mdpackages/genui/a2ui-playground/src/App.tsxpackages/genui/a2ui-playground/src/demos.tspackages/genui/a2ui-playground/src/pages/AIChatPage.csspackages/genui/a2ui-playground/src/pages/AIChatPage.tsxpackages/genui/a2ui-playground/src/pages/ComponentsPage.csspackages/genui/a2ui-playground/src/pages/ComponentsPage.tsxpackages/genui/a2ui-playground/src/pages/DemosListPage.tsxpackages/genui/a2ui-playground/src/pages/DemosPage.csspackages/genui/a2ui-playground/src/pages/DemosPage.tsxpackages/genui/a2ui-playground/src/pages/OpenUIComponentsPage.tsxpackages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsxpackages/genui/a2ui-playground/src/pages/PlaybackPage.csspackages/genui/a2ui-playground/src/pages/PlaybackPage.tsxpackages/genui/a2ui-playground/src/styles.css
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Merging this PR will improve performance by 8.75%
Performance Changes
Comparing 
Footnotes
|
React MTF Example#1237 Bundle Size — 207.46KiB (0%).dd8c3d1(current) vs 705a3a3 main#1234(baseline) Bundle metrics
|
| Current #1237 |
Baseline #1234 |
|
|---|---|---|
 Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
192 |
192 |
| Duplicate Modules |
77 |
77 |
| Duplicate Code |
44.38% |
44.38% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #1237 |
Baseline #1234 |
|
|---|---|---|
| IMG |
111.23KiB |
111.23KiB |
| Other |
96.23KiB |
96.23KiB |
Bundle analysis report Branch p/a2ui-playback Project dashboard
Generated by RelativeCI Documentation Report issue
React External#1219 Bundle Size — 693.04KiB (0%).dd8c3d1(current) vs 705a3a3 main#1216(baseline) Bundle metrics
|
| Current #1219 |
Baseline #1216 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
3 |
3 |
| Modules |
17 |
17 |
| Duplicate Modules |
5 |
5 |
| Duplicate Code |
8.59% |
8.59% |
| Packages |
0 |
0 |
| Duplicate Packages |
0 |
0 |
Bundle analysis report Branch p/a2ui-playback Project dashboard
Generated by RelativeCI Documentation Report issue
Web Explorer#9679 Bundle Size — 901.38KiB (0%).dd8c3d1(current) vs 705a3a3 main#9676(baseline) Bundle metrics
|
| Current #9679 |
Baseline #9676 |
|
|---|---|---|
| Initial JS |
45.06KiB |
45.06KiB |
| Initial CSS |
2.22KiB |
2.22KiB |
| Cache Invalidation |
0% |
0% |
| Chunks |
9 |
9 |
| Assets |
11 |
11 |
| Modules |
228 |
228 |
| Duplicate Modules |
11 |
11 |
 Duplicate Code |
27.23%(+0.04%) |
27.22% |
| Packages |
10 |
10 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #9679 |
Baseline #9676 |
|
|---|---|---|
| JS |
497.1KiB |
497.1KiB |
| Other |
402.06KiB |
402.06KiB |
| CSS |
2.22KiB |
2.22KiB |
Bundle analysis report Branch p/a2ui-playback Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#8105 Bundle Size — 236.51KiB (0%).dd8c3d1(current) vs 705a3a3 main#8102(baseline) Bundle metrics
|
| Current #8105 |
Baseline #8102 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
197 |
197 |
| Duplicate Modules |
80 |
80 |
| Duplicate Code |
44.87% |
44.87% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #8105 |
Baseline #8102 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
90.75KiB |
90.75KiB |
Bundle analysis report Branch p/a2ui-playback Project dashboard
Generated by RelativeCI Documentation Report issue
React Example with Element Template#372 Bundle Size — 197.79KiB (0%).dd8c3d1(current) vs 705a3a3 main#369(baseline) Bundle metrics
|
| Current #372 |
Baseline #369 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
81(+1.25%) |
80 |
| Duplicate Modules |
23 |
23 |
| Duplicate Code |
40.29%(-0.02%) |
40.3% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #372 |
Baseline #369 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
52.03KiB |
52.03KiB |
Bundle analysis report Branch p/a2ui-playback Project dashboard
Generated by RelativeCI Documentation Report issue
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (4)
packages/genui/a2ui-playground/src/pages/PlaybackPage.css (2)
126-132:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUse kebab-case keyframe naming to satisfy stylelint.
Line 127 and Line 131 still use
chunkAppear; rename to kebab-case and update the animation reference.Proposed fix
.playbackChunkNew { - animation: chunkAppear 300ms ease-out; + animation: chunk-appear 300ms ease-out; border-color: var(--geist-border-hover); } -@keyframes chunkAppear { +@keyframes chunk-appear {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css` around lines 126 - 132, The keyframe name chunkAppear violates kebab-case; rename the `@keyframes` identifier (currently "chunkAppear") to a kebab-case name such as "chunk-appear" and update the .playbackChunkNew rule's animation value to reference the new name; specifically modify the `@keyframes` declaration and the animation property in the .playbackChunkNew selector so both use the same kebab-case keyframe name.
170-179:⚠️ Potential issue | 🟠 Major | ⚡ Quick winReplace deprecated
word-break: break-word.Line 178 uses a deprecated value that stylelint flags; switch to modern wrapping behavior.
Proposed fix
.playbackChunkJson { margin: 0; padding: 8px 10px; font-family: var(--geist-mono); font-size: 12px; line-height: 1.55; color: var(--geist-secondary); white-space: pre-wrap; - word-break: break-word; + overflow-wrap: anywhere; + word-break: normal; max-height: 240px; overflow-y: auto; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css` around lines 170 - 179, The CSS rule .playbackChunkJson uses the deprecated property value word-break: break-word; remove that deprecated declaration and replace it with modern wrapping rules by setting overflow-wrap: anywhere and (optionally) word-break: normal to preserve standard break behavior; update the .playbackChunkJson rule to use overflow-wrap: anywhere instead of word-break: break-word so stylelint stops flagging it.packages/genui/a2ui-playground/src/pages/AIChatPage.css (1)
72-79:⚠️ Potential issue | 🟠 Major | ⚡ Quick winReplace deprecated
word-break: break-wordin chat bubbles.Line 78 should use modern wrapping to pass stylelint.
Proposed fix
.chatMessage { max-width: 80%; padding: 10px 14px; border-radius: var(--geist-radius-lg); font-size: 14px; line-height: 1.5; - word-break: break-word; + overflow-wrap: anywhere; + word-break: normal; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/AIChatPage.css` around lines 72 - 79, The .chatMessage CSS rule uses the deprecated property value word-break: break-word; replace that with the modern wrapping rule by removing word-break: break-word and adding overflow-wrap: anywhere (and optionally word-wrap: break-word for legacy support) in the .chatMessage selector so long words will wrap correctly and satisfy stylelint.packages/genui/a2ui-playground/src/pages/DemosPage.css (1)
109-111:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRemove deprecated
page-break-insidedeclaration.Line 110 is deprecated and redundant with
break-inside.Proposed fix
.exampleCard { margin: 0 0 14px; break-inside: avoid; - page-break-inside: avoid; - -webkit-column-break-inside: avoid; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/DemosPage.css` around lines 109 - 111, Remove the deprecated and redundant CSS declaration `page-break-inside: avoid;` (the line shown between `break-inside: avoid;` and `-webkit-column-break-inside: avoid;`) so only the modern `break-inside: avoid;` and the vendor-prefixed `-webkit-column-break-inside: avoid;` remain; update the rule containing these properties to delete `page-break-inside` to avoid using deprecated syntax.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@packages/genui/a2ui-playground/src/pages/AIChatPage.css`:
- Around line 72-79: The .chatMessage CSS rule uses the deprecated property
value word-break: break-word; replace that with the modern wrapping rule by
removing word-break: break-word and adding overflow-wrap: anywhere (and
optionally word-wrap: break-word for legacy support) in the .chatMessage
selector so long words will wrap correctly and satisfy stylelint.
In `@packages/genui/a2ui-playground/src/pages/DemosPage.css`:
- Around line 109-111: Remove the deprecated and redundant CSS declaration
`page-break-inside: avoid;` (the line shown between `break-inside: avoid;` and
`-webkit-column-break-inside: avoid;`) so only the modern `break-inside: avoid;`
and the vendor-prefixed `-webkit-column-break-inside: avoid;` remain; update the
rule containing these properties to delete `page-break-inside` to avoid using
deprecated syntax.
In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css`:
- Around line 126-132: The keyframe name chunkAppear violates kebab-case; rename
the `@keyframes` identifier (currently "chunkAppear") to a kebab-case name such as
"chunk-appear" and update the .playbackChunkNew rule's animation value to
reference the new name; specifically modify the `@keyframes` declaration and the
animation property in the .playbackChunkNew selector so both use the same
kebab-case keyframe name.
- Around line 170-179: The CSS rule .playbackChunkJson uses the deprecated
property value word-break: break-word; remove that deprecated declaration and
replace it with modern wrapping rules by setting overflow-wrap: anywhere and
(optionally) word-break: normal to preserve standard break behavior; update the
.playbackChunkJson rule to use overflow-wrap: anywhere instead of word-break:
break-word so stylelint stops flagging it.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: a64ca59d-471c-4543-9f2b-9077d93e0bec
📒 Files selected for processing (14)
.changeset/lucky-worms-invent.mdpackages/genui/a2ui-playground/src/App.tsxpackages/genui/a2ui-playground/src/demos.tspackages/genui/a2ui-playground/src/pages/AIChatPage.csspackages/genui/a2ui-playground/src/pages/AIChatPage.tsxpackages/genui/a2ui-playground/src/pages/ComponentsPage.csspackages/genui/a2ui-playground/src/pages/ComponentsPage.tsxpackages/genui/a2ui-playground/src/pages/DemosListPage.tsxpackages/genui/a2ui-playground/src/pages/DemosPage.csspackages/genui/a2ui-playground/src/pages/DemosPage.tsxpackages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsxpackages/genui/a2ui-playground/src/pages/PlaybackPage.csspackages/genui/a2ui-playground/src/pages/PlaybackPage.tsxpackages/genui/a2ui-playground/src/styles.css
✅ Files skipped from review due to trivial changes (7)
- packages/genui/a2ui-playground/src/pages/DemosPage.tsx
- packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx
- packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
- packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
- .changeset/lucky-worms-invent.md
- packages/genui/a2ui-playground/src/pages/DemosListPage.tsx
- packages/genui/a2ui-playground/src/pages/ComponentsPage.css
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/genui/a2ui-playground/src/demos.ts
- packages/genui/a2ui-playground/src/App.tsx
- packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
packages/genui/a2ui-playground/src/pages/PlaybackPage.css (2)
178-178:⚠️ Potential issue | 🟠 Major | ⚡ Quick winReplace deprecated
word-break: break-word.Use modern wrapping properties to avoid the stylelint deprecation error.
🔧 Proposed fix
- word-break: break-word; + overflow-wrap: anywhere;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css` at line 178, The CSS uses the deprecated declaration "word-break: break-word"; replace it by removing that declaration and instead add modern wrapping rules—set "word-break: normal" (or omit if default) and add "overflow-wrap: anywhere" (or "overflow-wrap: break-word" if you prefer less aggressive breaks) to the same rule in PlaybackPage.css so stylelint no longer flags the deprecated property.
126-131:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRename keyframes to kebab-case to satisfy stylelint.
The keyframe name
chunkAppearviolates the configured naming rule. Rename tochunk-appearand update the animation reference.🔧 Proposed fix
.playbackChunkNew { - animation: chunkAppear 300ms ease-out; + animation: chunk-appear 300ms ease-out; border-color: var(--geist-border-hover); } -@keyframes chunkAppear { +@keyframes chunk-appear { from { opacity: 0; transform: translateY(8px);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css` around lines 126 - 131, The keyframe name chunkAppear violates stylelint; rename the `@keyframes` rule from chunkAppear to chunk-appear and update the animation reference in the .playbackChunkNew rule (animation: chunk-appear 300ms ease-out) so the class and keyframes match the kebab-case name; ensure any other references to chunkAppear in the codebase are updated to chunk-appear as well.packages/genui/a2ui-playground/src/pages/DemosPage.css (1)
109-111:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove deprecated
page-break-insidedeclaration.This issue was previously flagged:
page-break-insideis deprecated and should be removed. The modernbreak-insideproperty on line 109 already handles this, and the-webkit-column-break-insidevendor prefix is also unnecessary in modern browsers.🔧 Proposed fix
break-inside: avoid; - page-break-inside: avoid; - -webkit-column-break-inside: avoid;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/DemosPage.css` around lines 109 - 111, Remove the deprecated declarations in the CSS rule that already uses break-inside: avoid; — specifically delete the page-break-inside: avoid; and -webkit-column-break-inside: avoid; lines and keep only break-inside: avoid; so the rule relies on the modern property.
🧹 Nitpick comments (1)
packages/genui/a2ui-playground/src/pages/DemosPage.css (1)
521-521: ⚡ Quick winSpecify transition properties explicitly instead of using
all.Using
transition: allcan impact performance and makes the code less explicit. Consider specifying only the properties that need to transition, following the pattern used elsewhere in this file (e.g., lines 100-104, 224-228).♻️ Proposed refactor
- transition: all var(--geist-transition); + transition: + background var(--geist-transition), + border-color var(--geist-transition), + color var(--geist-transition), + transform var(--geist-transition);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/genui/a2ui-playground/src/pages/DemosPage.css` at line 521, The rule currently uses a broad transition: "transition: all var(--geist-transition);" which harms performance; replace "all" with only the properties that actually animate (e.g., transform, opacity, color, background-color, box-shadow) to match patterns used elsewhere (see similar blocks around lines 100-104 and 224-228). Locate the exact declaration "transition: all var(--geist-transition);" and change it to a comma-separated list of the specific properties your component animates (for example transform and opacity), keeping the same timing variable var(--geist-transition) so only those properties transition.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/genui/a2ui-playground/src/pages/ComponentsPage.css`:
- Around line 24-84: The sidebar items lack keyboard focus styles; add :focus
and preferably :focus-visible rules for .compSidebarAll and .compSidebarItem
that mirror the existing :hover/.active visual feedback (set color and
background to var(--geist-foreground)/var(--geist-surface) and apply a visible
focus indicator such as an outline or box-shadow using a theme variable like
var(--geist-focus) or var(--geist-border-hover)); ensure the focus rule does not
conflict with .active and include focus-visible to show the ring only for
keyboard navigation.
- Around line 161-177: Add a keyboard-focus style for the .compCopyBtn to match
the hover affordance and improve accessibility: update the stylesheet to include
a .compCopyBtn:focus rule (and optionally .compCopyBtn:focus-visible) that sets
color to var(--geist-foreground), border-color to var(--geist-border-hover), and
a visible focus indicator (e.g., outline or box-shadow) while keeping outline:
none if you use box-shadow; ensure the selector targets .compCopyBtn so keyboard
users see the same state as hover.
---
Duplicate comments:
In `@packages/genui/a2ui-playground/src/pages/DemosPage.css`:
- Around line 109-111: Remove the deprecated declarations in the CSS rule that
already uses break-inside: avoid; — specifically delete the page-break-inside:
avoid; and -webkit-column-break-inside: avoid; lines and keep only break-inside:
avoid; so the rule relies on the modern property.
In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css`:
- Line 178: The CSS uses the deprecated declaration "word-break: break-word";
replace it by removing that declaration and instead add modern wrapping
rules—set "word-break: normal" (or omit if default) and add "overflow-wrap:
anywhere" (or "overflow-wrap: break-word" if you prefer less aggressive breaks)
to the same rule in PlaybackPage.css so stylelint no longer flags the deprecated
property.
- Around line 126-131: The keyframe name chunkAppear violates stylelint; rename
the `@keyframes` rule from chunkAppear to chunk-appear and update the animation
reference in the .playbackChunkNew rule (animation: chunk-appear 300ms ease-out)
so the class and keyframes match the kebab-case name; ensure any other
references to chunkAppear in the codebase are updated to chunk-appear as well.
---
Nitpick comments:
In `@packages/genui/a2ui-playground/src/pages/DemosPage.css`:
- Line 521: The rule currently uses a broad transition: "transition: all
var(--geist-transition);" which harms performance; replace "all" with only the
properties that actually animate (e.g., transform, opacity, color,
background-color, box-shadow) to match patterns used elsewhere (see similar
blocks around lines 100-104 and 224-228). Locate the exact declaration
"transition: all var(--geist-transition);" and change it to a comma-separated
list of the specific properties your component animates (for example transform
and opacity), keeping the same timing variable var(--geist-transition) so only
those properties transition.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 33202dab-e98c-469d-9e0c-24bfdbbe78f5
📒 Files selected for processing (14)
.changeset/lucky-worms-invent.mdpackages/genui/a2ui-playground/src/App.tsxpackages/genui/a2ui-playground/src/demos.tspackages/genui/a2ui-playground/src/pages/AIChatPage.csspackages/genui/a2ui-playground/src/pages/AIChatPage.tsxpackages/genui/a2ui-playground/src/pages/ComponentsPage.csspackages/genui/a2ui-playground/src/pages/ComponentsPage.tsxpackages/genui/a2ui-playground/src/pages/DemosListPage.tsxpackages/genui/a2ui-playground/src/pages/DemosPage.csspackages/genui/a2ui-playground/src/pages/DemosPage.tsxpackages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsxpackages/genui/a2ui-playground/src/pages/PlaybackPage.csspackages/genui/a2ui-playground/src/pages/PlaybackPage.tsxpackages/genui/a2ui-playground/src/styles.css
💤 Files with no reviewable changes (1)
- packages/genui/a2ui-playground/src/styles.css
✅ Files skipped from review due to trivial changes (6)
- packages/genui/a2ui-playground/src/pages/OpenUIDemosPage.tsx
- packages/genui/a2ui-playground/src/demos.ts
- .changeset/lucky-worms-invent.md
- packages/genui/a2ui-playground/src/pages/DemosPage.tsx
- packages/genui/a2ui-playground/src/pages/DemosListPage.tsx
- packages/genui/a2ui-playground/src/pages/AIChatPage.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/genui/a2ui-playground/src/pages/ComponentsPage.tsx
- packages/genui/a2ui-playground/src/App.tsx
- packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
Sherry-hue
approved these changes
May 12, 2026
This was referenced May 13, 2026
3 tasks
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 by CodeRabbit
New Features
Style
Checklist