feat(a2ui): support playground provider settings by Sherry-hue · Pull Request #2687 · lynx-family/lynx-stack

Sherry-hue · 2026-05-21T12:18:43Z

Summary by CodeRabbit

New Features
- Per-request provider overrides: set a custom API key, base URL, and model; toggleable Provider panel with inputs and a Reset/Clear action.
- Header badge now shows "Custom Provider" or "Online Agent" based on overrides.
Style
- New provider panel styling and control hover/focus behaviors.
- Improved responsive layout under 980px: header wraps, token badge becomes full-width and scrollable, provider panel stacks to one column.

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

Notes

Adds a collapsible Provider panel to the A2UI Playground Create page.
Persists local API key, base URL, and model settings in browser storage.
Sends provider settings with generation and action stream requests when configured.

Validation

pnpm -C packages/genui/a2ui-playground build
commit hook: eslint, biome, dprint

changeset-bot · 2026-05-21T12:18:57Z

⚠️ No Changeset found

Latest commit: 7d38600

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 · 2026-05-21T12:19:09Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5a256940-c2e0-42c2-9717-b5b3bdcc0c9a

📥 Commits

Reviewing files that changed from the base of the PR and between a35cdcb and 7d38600.

📒 Files selected for processing (2)

packages/genui/a2ui-playground/src/pages/AIChatPage.css
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

📝 Walkthrough

Walkthrough

Adds per-request provider overrides to AIChatPage with a Provider panel (API Key/Base URL/Model), persists baseURL/model to localStorage, threads trimmed non-empty overrides into chat and action-stream requests, updates hook dependencies, and adds responsive CSS for the provider UI.

Changes

Provider Configuration

Layer / File(s)	Summary
Provider Settings Type Definitions and Storage `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	`ProviderSettings`, `ProviderRequestOptions`, and `PersistedProviderSettings` types; storage key and `EMPTY_PROVIDER_SETTINGS`; `readProviderSettings()` and `toProviderRequestOptions()` to hydrate and sanitize persisted values.
Provider Settings State and Persistence `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	React state for provider panel visibility and `providerSettings` (initialized from storage). Derives `providerRequestOptions` and `hasProviderOverride`, persists `baseURL`/`model` to localStorage on changes while ignoring write errors.
Provider Settings Integration into Chat Flow `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Spreads `providerRequestOptions` into both chat and action-stream POST bodies; updates `handleSend` and action-message effect dependency arrays so requests reflect current overrides; header badge toggles between “Custom Provider” and “Online Agent”.
Provider Settings UI Component and Styling `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`, `packages/genui/a2ui-playground/src/pages/AIChatPage.css`	Adds a Provider toggle and expandable panel with controlled inputs for API Key, Base URL, Model, and a Reset action. CSS adds toggle, panel grid, labeled fields, input focus/placeholder/clear styles, and responsive rules collapsing the grid to one column under 980px and reordering the token-usage badge.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

lynx-family/lynx-stack#2669: Both PRs modify .chatTokenUsageBadge styling and responsive behavior in AIChatPage.css.

Suggested reviewers

HuJean
PupilTong

Poem

🐇 I nibble settings, tidy and bright,
Keys and models tucked out of sight,
A panel to toggle, baseURL to weave,
Chats now hop where configs believe,
Hooray — provider hops into the night! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding support for provider settings in the playground. It directly matches the PR's primary objective of enabling provider configuration with persistence.
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 unit tests (beta)

Create PR with unit tests

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

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

codecov · 2026-05-21T12:24:33Z

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!

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

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

1224-1231: ⚡ Quick win

Link the provider toggle to its controlled panel for accessibility.

Add aria-controls on the toggle and an id on the panel so assistive tech can map the relationship.

♿ Minimal patch

 <button
   className='chatProviderToggle'
   type='button'
   aria-expanded={providerSettingsOpen}
+  aria-controls='provider-settings-panel'
   onClick={() => setProviderSettingsOpen((open) => !open)}
 >
   Provider
 </button>

-{providerSettingsOpen ? (
-  <div className='chatProviderPanel'>
+{providerSettingsOpen ? (
+  <div id='provider-settings-panel' className='chatProviderPanel'>

Also applies to: 1234-1237

🤖 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.tsx` around lines 1224 -
1231, The provider toggle button (className 'chatProviderToggle', onClick
toggling providerSettingsOpen) must include an aria-controls attribute whose
value matches the id of the controlled panel element; add a unique id to the
provider settings panel (e.g., "provider-settings-panel") and set
aria-controls="provider-settings-panel" on the button so assistive tech can map
the relationship; repeat the same change for the second toggle instance
referenced around lines 1234–1237 to ensure both toggles point to the
corresponding panel id.

🤖 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/AIChatPage.tsx`:
- Around line 253-266: The code is persisting sensitive apiKey into
localStorage; change readProviderSettings and the corresponding save/write
routine (referencing PROVIDER_SETTINGS_STORAGE_KEY and the functions
readProviderSettings / the save/write provider settings code) so that only
non-secret fields (baseURL and model) are stored and restored from localStorage,
while apiKey is not read from or written to localStorage and is kept only in
memory (or sessionStorage if ephemeral persistence across tabs is required).
Update readProviderSettings to return apiKey as an empty string and modify the
save routine to serialize only baseURL and model into localStorage.

---

Nitpick comments:
In `@packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`:
- Around line 1224-1231: The provider toggle button (className
'chatProviderToggle', onClick toggling providerSettingsOpen) must include an
aria-controls attribute whose value matches the id of the controlled panel
element; add a unique id to the provider settings panel (e.g.,
"provider-settings-panel") and set aria-controls="provider-settings-panel" on
the button so assistive tech can map the relationship; repeat the same change
for the second toggle instance referenced around lines 1234–1237 to ensure both
toggles point to the corresponding panel id.

🪄 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: 91852705-1d30-42cb-bd1f-63686a079ba4

📥 Commits

Reviewing files that changed from the base of the PR and between 7e6ff74 and d01ae2f.

📒 Files selected for processing (2)

packages/genui/a2ui-playground/src/pages/AIChatPage.css
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

coderabbitai

🧹 Nitpick comments (1)

packages/genui/a2ui-playground/src/pages/AIChatPage.tsx (1)
1213-1215: 💤 Low value

Optional: add aria-controls on the Provider toggle.

The toggle correctly exposes aria-expanded, but linking it to the panel via aria-controls (and giving .chatProviderPanel a matching id) would improve screen-reader navigation between the trigger and the disclosed region.

Also applies to: 1234-1241, 1244-1299
🤖 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.tsx` around lines 1213 -
1215, Add an aria-controls linkage between the provider toggle and its panel:
give the panel element with className "chatProviderPanel" a stable id (e.g.,
"chat-provider-panel" or generated via React's useId) and add
aria-controls="<that-id>" to the toggle element that already exposes
aria-expanded; ensure ids are unique if multiple toggles (use useId or include
an index/uuid) and update both occurrences referenced in this file so the toggle
and the panel match.

🤖 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/AIChatPage.tsx`:
- Around line 1213-1215: Add an aria-controls linkage between the provider
toggle and its panel: give the panel element with className "chatProviderPanel"
a stable id (e.g., "chat-provider-panel" or generated via React's useId) and add
aria-controls="<that-id>" to the toggle element that already exposes
aria-expanded; ensure ids are unique if multiple toggles (use useId or include
an index/uuid) and update both occurrences referenced in this file so the toggle
and the panel match.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8f770ec2-6db4-47f1-82e8-3a009c3541ca

📥 Commits

Reviewing files that changed from the base of the PR and between d01ae2f and a35cdcb.

📒 Files selected for processing (2)

packages/genui/a2ui-playground/src/pages/AIChatPage.css
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

relativeci · 2026-05-21T12:36:16Z

Web Explorer

#10152 Bundle Size — 903.53KiB (0%).

7d38600(current) vs 0c8d6b4 main#10144(baseline)

Bundle metrics

1 change

	Current #10152	Baseline #10144
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`232`(`+0.43%`)	`231`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.12%`	`27.12%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #10152	Baseline #10144
JS	`499.15KiB`	`499.15KiB`
Other	`402.16KiB`	`402.16KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch Sherry-hue:feat/a2ui-playground-... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-21T12:36:16Z

React External

#1693 Bundle Size — 698.01KiB (0%).

7d38600(current) vs 0c8d6b4 main#1685(baseline)

Bundle metrics no changes

	Current #1693	Baseline #1685
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 #1693	Baseline #1685
Other	`698.01KiB`	`698.01KiB`

Bundle analysis report Branch Sherry-hue:feat/a2ui-playground-... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-21T12:36:20Z

React Example

#8577 Bundle Size — 237.81KiB (0%).

7d38600(current) vs 0c8d6b4 main#8569(baseline)

Bundle metrics no changes

	Current #8577	Baseline #8569
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`200`	`200`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.68%`	`44.68%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8577	Baseline #8569
IMG	`145.76KiB`	`145.76KiB`
Other	`92.05KiB`	`92.05KiB`

Bundle analysis report Branch Sherry-hue:feat/a2ui-playground-... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-21T12:37:11Z

React MTF Example

#1710 Bundle Size — 208.75KiB (0%).

7d38600(current) vs 0c8d6b4 main#1702(baseline)

Bundle metrics no changes

	Current #1710	Baseline #1702
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`195`	`195`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.17%`	`44.17%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1710	Baseline #1702
IMG	`111.23KiB`	`111.23KiB`
Other	`97.52KiB`	`97.52KiB`

Bundle analysis report Branch Sherry-hue:feat/a2ui-playground-... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-21T12:37:22Z

React Example with Element Template

#845 Bundle Size — 202.16KiB (0%).

7d38600(current) vs 0c8d6b4 main#837(baseline)

Bundle metrics no changes

	Current #845	Baseline #837
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`100`	`100`
Duplicate Modules	`30`	`30`
Duplicate Code	`39.22%`	`39.22%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #845	Baseline #837
IMG	`145.76KiB`	`145.76KiB`
Other	`56.41KiB`	`56.41KiB`

Bundle analysis report Branch Sherry-hue:feat/a2ui-playground-... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

codspeed-hq · 2026-05-21T12:55:41Z

Merging this PR will degrade performance by 14.69%

❌ 1 regressed benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
❌	`transform 1000 view elements`	40 ms	46.9 ms	-14.69%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing Sherry-hue:feat/a2ui-playground-provider-settings (7d38600) with main (0c8d6b4)}

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

Sherry-hue force-pushed the feat/a2ui-playground-provider-settings branch from c775318 to d01ae2f Compare May 21, 2026 12:21

coderabbitai Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

Sherry-hue force-pushed the feat/a2ui-playground-provider-settings branch from d01ae2f to a35cdcb Compare May 21, 2026 12:32

coderabbitai Bot reviewed May 21, 2026

View reviewed changes

feat(a2ui): support playground provider settings

7d38600

Sherry-hue force-pushed the feat/a2ui-playground-provider-settings branch from a35cdcb to 7d38600 Compare May 22, 2026 03:19

Sherry-hue enabled auto-merge (squash) May 22, 2026 03:59

PupilTong approved these changes May 22, 2026

View reviewed changes

Sherry-hue merged commit d93ef25 into lynx-family:main May 22, 2026
82 of 85 checks passed

coderabbitai Bot mentioned this pull request May 22, 2026

feat(a2ui): refine playground create experience #2690

Open

3 tasks

Conversation

Sherry-hue commented May 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Notes

Validation

Uh oh!

changeset-bot Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

relativeci Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#10152 Bundle Size — 903.53KiB (0%).

Uh oh!

relativeci Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#1693 Bundle Size — 698.01KiB (0%).

Uh oh!

relativeci Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#8577 Bundle Size — 237.81KiB (0%).

Uh oh!

relativeci Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#1710 Bundle Size — 208.75KiB (0%).

Uh oh!

relativeci Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#845 Bundle Size — 202.16KiB (0%).

Uh oh!

codspeed-hq Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 14.69%

Performance Changes

Footnotes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sherry-hue commented May 21, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 21, 2026 •

edited

Loading

coderabbitai Bot commented May 21, 2026 •

edited

Loading

codecov Bot commented May 21, 2026 •

edited

Loading

relativeci Bot commented May 21, 2026 •

edited

Loading

relativeci Bot commented May 21, 2026 •

edited

Loading

relativeci Bot commented May 21, 2026 •

edited

Loading

relativeci Bot commented May 21, 2026 •

edited

Loading

relativeci Bot commented May 21, 2026 •

edited

Loading

codspeed-hq Bot commented May 21, 2026 •

edited

Loading