feat(a2ui-playground): add select for playback

[HuJean]

Summary by CodeRabbit

• New Features

  • Replaced scenario selection interface with a dropdown menu for improved usability and more compact layout.

• Style

  • Added responsive design improvements for screens under 980px width, featuring optimized panel layouts, stacked components, adjusted spacing, and full-width scenario controls for better mobile experience.

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8429922

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

PlaybackPage refactors scenario selection to build its list from STATIC_DEMOS and DYNAMIC_PRESETS via ALL_SCENARIOS, replacing PLAYBACK_SCENARIOS. The UI switches from a sidebar button list to a dropdown select in the stream panel header. CSS adds styling for the select element and responsive layout support for narrower viewports.

Changes

Playback Scenario Selection

Layer / File(s)	Summary
Scenario data model and state initialization packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx	ALL_SCENARIOS combines STATIC_DEMOS and DYNAMIC_PRESETS to replace PLAYBACK_SCENARIOS. Initial scenarioId state defaults to the first entry, and currentScenario selection logic reads from ALL_SCENARIOS with fallback to its first element.
Scenario select UI and responsive styling packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx, packages/genui/a2ui-playground/src/pages/PlaybackPage.css	Sidebar scenario button list replaced with a <select> dropdown in the stream panel header. CSS adds .playbackScenarioSelect styling, enables wrapping in .playbackPanelHeader, and introduces responsive @media (max-width: 980px) rules that stack panels and adjust layout dimensions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• lynx-family/lynx-stack#2613: Directly related—this PR refactors scenario selection using STATIC_DEMOS/DYNAMIC_PRESETS (replacing PLAYBACK_SCENARIOS from #2613) and updates styles for the same playback feature work.

Suggested reviewers

• Sherry-hue

Poem

🐰 Scenarios dance in dropdowns neat,
Where static and dynamic gently meet,
Responsive padding, wrapped with care,
Your playground now adapts everywhere! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'add select for playback' accurately reflects the main change: replacing a sidebar scenario list with a select dropdown in the PlaybackPage. The change is specific and directly related to the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch p/a2ui-playback-select

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx (1)

162-170: ⚡ Quick win

Consider adding an accessible label for the scenario select.

The <select> element has no associated <label> or aria-label, which can impact screen reader users. While the nearby panel title provides visual context, it's not programmatically associated with the select.

♿ Proposed fix to add aria-label

 <select
   className='playbackScenarioSelect'
+  aria-label='Select scenario'
   value={scenarioId}
   onChange={(e) => handleSelectScenario(e.target.value)}
 >

🤖 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.tsx` around lines 162 -
170, Add an accessible label to the scenario select by providing an aria-label
(or associated <label>) so screen readers can identify it; update the <select
className='playbackScenarioSelect' value={scenarioId} onChange={(e) =>
handleSelectScenario(e.target.value)}> to include a descriptive aria-label like
"Select scenario" (or create a <label htmlFor=> and set an id on the select) so
the control that maps to ALL_SCENARIOS and uses handleSelectScenario is
programmatically associated with its label.

packages/genui/a2ui-playground/src/pages/PlaybackPage.css (1)

49-58: 💤 Low value

Consider adding text overflow handling for long scenario titles.

The max-width: 200px on desktop may truncate long scenario titles. Adding text-overflow: ellipsis with overflow: hidden and white-space: nowrap would provide a clearer visual indication of truncation.

✨ Proposed fix for text overflow

 .playbackScenarioSelect {
   font-size: 12px;
   padding: 3px 6px;
   border-radius: 6px;
   border: 1px solid var(--geist-border);
   background: var(--geist-background);
   color: var(--geist-foreground);
   cursor: pointer;
   max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

🤖 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 49 -
58, The .playbackScenarioSelect rule currently limits width but doesn't handle
overflowing text; update the CSS for the playbackScenarioSelect class to add
text-overflow: ellipsis, overflow: hidden, and white-space: nowrap so long
scenario titles are visually truncated with an ellipsis instead of wrapping or
overflowing (apply these declarations inside the .playbackScenarioSelect
selector).

🤖 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.

Nitpick comments:
In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.css`:
- Around line 49-58: The .playbackScenarioSelect rule currently limits width but
doesn't handle overflowing text; update the CSS for the playbackScenarioSelect
class to add text-overflow: ellipsis, overflow: hidden, and white-space: nowrap
so long scenario titles are visually truncated with an ellipsis instead of
wrapping or overflowing (apply these declarations inside the
.playbackScenarioSelect selector).

In `@packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx`:
- Around line 162-170: Add an accessible label to the scenario select by
providing an aria-label (or associated <label>) so screen readers can identify
it; update the <select className='playbackScenarioSelect' value={scenarioId}
onChange={(e) => handleSelectScenario(e.target.value)}> to include a descriptive
aria-label like "Select scenario" (or create a <label htmlFor=> and set an id on
the select) so the control that maps to ALL_SCENARIOS and uses
handleSelectScenario is programmatically associated with its label.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 441c4df5-f255-4b86-9578-cfd328818537

📥 Commits

Reviewing files that changed from the base of the PR and between 482d842 and 8429922.

📒 Files selected for processing (2)

• packages/genui/a2ui-playground/src/pages/PlaybackPage.css
• packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[codspeed-hq]

Merging this PR will improve performance by 19.09%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	008-many-use-state-destroyBackground	9.5 ms	8 ms	+19.09%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing p/a2ui-playback-select (8429922) with main (705a3a3)²}

Footnotes

1. 26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

2. No successful run was found on main (482d842) during the generation of this report, so 705a3a3 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[relativeci]

React MTF Example

#1258 Bundle Size — 207.46KiB (0%).

8429922(current) vs 705a3a3 main#1234(baseline)

Bundle metrics  no changes

	Current #1258	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 #1258	Baseline #1234
IMG	111.23KiB	111.23KiB
Other	96.23KiB	96.23KiB

Bundle analysis report Branch p/a2ui-playback-select Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React External

#1240 Bundle Size — 693.04KiB (0%).

8429922(current) vs 705a3a3 main#1216(baseline)

Bundle metrics  no changes

	Current #1240	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 size by type  no changes

	Current #1240	Baseline #1216
Other	693.04KiB	693.04KiB

Bundle analysis report Branch p/a2ui-playback-select Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React Example with Element Template

#392 Bundle Size — 197.79KiB (0%).

8429922(current) vs 705a3a3 main#369(baseline)

Bundle metrics   2 changes

	Current #392	Baseline #369
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	79(-1.25%)	80
Duplicate Modules	23	23
Duplicate Code	40.32%(+0.05%)	40.3%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #392	Baseline #369
IMG	145.76KiB	145.76KiB
Other	52.03KiB	52.03KiB

Bundle analysis report Branch p/a2ui-playback-select Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#9700 Bundle Size — 901.38KiB (0%).

8429922(current) vs 705a3a3 main#9676(baseline)

Bundle metrics  no changes

	Current #9700	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.22%	27.22%
Packages	10	10
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #9700	Baseline #9676
JS	497.1KiB	497.1KiB
Other	402.06KiB	402.06KiB
CSS	2.22KiB	2.22KiB

Bundle analysis report Branch p/a2ui-playback-select Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React Example

#8126 Bundle Size — 236.51KiB (0%).

8429922(current) vs 705a3a3 main#8102(baseline)

Bundle metrics  no changes

	Current #8126	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 #8126	Baseline #8102
IMG	145.76KiB	145.76KiB
Other	90.75KiB	90.75KiB

Bundle analysis report Branch p/a2ui-playback-select Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}