fix(a2ui): improve preview generation status by Sherry-hue · Pull Request #2766 · lynx-family/lynx-stack

Sherry-hue · 2026-06-01T13:09:51Z

Summary

Show generated character counts in the A2UI preview status while streaming and after completion.
Restore the rendered preview status from persisted chat history after refresh.
Add Preview Info empty/generating hints and stable minimum height for Web Preview / Native Preview rows.

Test Plan

DPRINT_CACHE_DIR=/private/tmp/dprint-cache ./node_modules/.bin/dprint check packages/genui/a2ui-playground/src/pages/AIChatPage.tsx packages/genui/a2ui-playground/src/components/PreviewPanel.tsx packages/genui/a2ui-playground/src/styles.css
git diff --check
CI=1 PATH=/private/tmp/codex-pnpm-bin:/Users/bytedance/.nvm/versions/node/v24.15.0/bin:$PATH /Users/bytedance/.nvm/versions/node/v24.15.0/bin/corepack pnpm exec turbo build --filter=a2ui-playground
Pre-commit hook: eslint, biome lint, dprint fmt on staged files
Local browser check: Preview Info empty state renders with the new hint

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

Summary by CodeRabbit

New Features
- Added character-count tracking and display in chat status for generated A2UI payloads.
- Preview panel now shows contextual hints (generation in progress or no A2UI data) and surfaces preview info in the share/preview area.
Style
- Improved empty-state styling and consistent vertical spacing for the QR/preview section.

changeset-bot · 2026-06-01T13:09:59Z

⚠️ No Changeset found

Latest commit: 8a3eb17

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-06-01T13:10:08Z

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: a18eefd1-0202-4dc6-8295-cba660b33ee3

📥 Commits

Reviewing files that changed from the base of the PR and between d2514a0 and 8a3eb17.

📒 Files selected for processing (3)

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

🚧 Files skipped from review as they are similar to previous changes (3)

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

📝 Walkthrough

Walkthrough

PreviewPanel now accepts a previewInfoHint and extracts QR/placeholder rendering into renderPreviewQrExtras(). AIChatPage tracks generated A2UI character counts during streaming, shows message+char counts in status text, and passes a dynamic hint to PreviewPanel; CSS adds an empty-QR state.

Changes

Character Count Tracking and Preview Info Hints

Layer / File(s)	Summary
PreviewPanel: prop contract and QR rendering extraction `packages/genui/a2ui-playground/src/components/PreviewPanel.tsx`, `packages/genui/a2ui-playground/src/styles.css`	`previewInfoHint` prop added; QR/placeholder/empty-state rendering extracted into `renderPreviewQrExtras()` and included in `renderExtras()`; `hasExtras` updated to consider the hint; CSS added for empty QR state layout and typography.
AIChatPage: character count tracking infrastructure `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Helpers compute generated payload character count and format it; `generatedCharacterCountRef` introduced and reset at send start to persist counts across streaming callbacks.
AIChatPage: streaming callbacks and in-progress updates `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Streaming text-delta callback updates the character-count ref; in-progress AI message shows streaming status including formatted char count; `readA2UIResponse` enabled `publishText: true` for incremental text deltas.
AIChatPage: final message and PreviewPanel integration `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Final AI message replaced with rendered-preview status (message count + char count); `previewInfoHint` computed from `previewMessages` and `isGenerating` and passed into `PreviewPanel`.

Estimated Code Review Effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly Related PRs

lynx-family/lynx-stack#2731: Refactors PreviewPanel.tsx render extras and empty/placeholder handling.
lynx-family/lynx-stack#2743: Related QR/link extras and URL/title construction changes in PreviewPanel.tsx.
lynx-family/lynx-stack#2704: Adjusts QR preview UI and styles affecting the same QR section.

Suggested Reviewers

HuJean
PupilTong
gaoachao

Poem

🐰 I count the chars as they stream and play,
Tiny hops of bytes that brighten my day,
QR hints peek out when previews delay,
Status lines bloom to show what they say,
Hop—preview ready! 🥕✨

🚥 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 'fix(a2ui): improve preview generation status' directly matches the main objective of the PR: displaying generated character counts and improving preview status information during A2UI streaming and after completion.
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-06-01T13:12:57Z

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
5505	2	5503	74

View the top 2 failed test(s) by shortest run time

tests/lynx.spec.ts > kitten-lynx testing framework

Stack Traces | 8.84s run time

Error: No response found for deviceId: emulator-5554 port: 8901
 ❯ Connector.#sendMessageWithTransport ../...../devtool-connector/src/index.ts:442:11
 ❯ Connector.sendCDPMessage ../...../devtool-connector/src/index.ts:215:12
 ❯ CDPChannel.send src/CDPChannel.ts:158:12
 ❯ KittenLynxView.onAttachedToTarget src/KittenLynxView.ts:299:22
 ❯ KittenLynxView.goto src/KittenLynxView.ts:237:5
 ❯ tests/lynx.spec.ts:49:5

tests/judge-android-agent.vitest.spec.ts > judgeAndroidAgent Android integration

Stack Traces | 19.5s run time

Error: cannot find session for URL: http://127.0.0.1:3001/react-example.lynx.bundle
 ❯ KittenLynxView.goto ../...../kitten-lynx/src/KittenLynxView.ts:235:13
 ❯ tests/judge-android-agent.vitest.spec.ts:90:7

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

coderabbitai

Actionable comments posted: 1

🤖 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 1389-1396: The character count is inconsistent because restored
messages use getGeneratedCharacterCount/safeStringifyPayload while live
streaming uses raw accumulated text; make them consistent by computing the same
pretty-printed payload length during streaming: in the streaming/finalization
path where generatedCharacterCountRef / createRenderedPreviewContent /
finalMessages are used, compute characterCount via
getGeneratedCharacterCount(payload) (or safeStringifyPayload(payload).length)
and set generatedCharacterCountRef.current to that value before calling
createRenderedPreviewContent; update the code in the streaming handler that
builds the final AI message (the block that assigns next[next.length - 1] and
calls createRenderedPreviewContent) so both live and restored flows rely on
getGeneratedCharacterCount.

🪄 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: 98f5ec33-59f1-4b60-bb9f-36969253af8e

📥 Commits

Reviewing files that changed from the base of the PR and between c8a98c1 and d2514a0.

📒 Files selected for processing (3)

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

codspeed-hq · 2026-06-01T13:29:29Z

Merging this PR will not alter performance

✅ 81 untouched benchmarks
⏩ 26 skipped benchmarks¹

_{Comparing Sherry-hue:codex/fix-a2ui-preview-status (8a3eb17) with main (c8a98c1)}

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

coderabbitai Bot reviewed Jun 1, 2026

View reviewed changes

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

fix(a2ui): improve preview generation status

8a3eb17

Sherry-hue force-pushed the codex/fix-a2ui-preview-status branch from d2514a0 to 8a3eb17 Compare June 1, 2026 14:12

HuJean approved these changes Jun 2, 2026

View reviewed changes

HuJean merged commit 3794d0c into lynx-family:main Jun 2, 2026
105 of 110 checks passed

coderabbitai Bot mentioned this pull request Jun 3, 2026

feat(a2ui-playground): preview QR pane — inline on desktop, drawer on mobile, draggable divider #2791

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(a2ui): improve preview generation status#2766

fix(a2ui): improve preview generation status#2766
HuJean merged 1 commit into
lynx-family:mainfrom
Sherry-hue:codex/fix-a2ui-preview-status

Sherry-hue commented Jun 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 1, 2026 •

edited

Loading

Walkthrough

Changes

Estimated Code Review Effort

Possibly Related PRs

Suggested Reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

codspeed-hq Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Summary

Test Plan

Checklist

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Jun 1, 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 Jun 1, 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 Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 2 Tests Failed:

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sherry-hue commented Jun 1, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Jun 1, 2026 •

edited

Loading

coderabbitai Bot commented Jun 1, 2026 •

edited

Loading

codecov Bot commented Jun 1, 2026 •

edited

Loading

codspeed-hq Bot commented Jun 1, 2026 •

edited

Loading