feat(s2ui): create chat add token show by Sherry-hue · Pull Request #2669 · lynx-family/lynx-stack

Sherry-hue · 2026-05-19T07:44:09Z

Summary by CodeRabbit

New Features
- Displays a token-usage badge in the AI chat header showing input, output, and total token counts; updates live during generation/actions and resets when sending a new message.
Style
- Added compact pill-style header styling for the token-usage display.
Chores
- Minor build/config formatting changes (non-functional).

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 · 2026-05-19T07:44:15Z

⚠️ No Changeset found

Latest commit: d274067

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-19T07:44:24Z

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: df2d399c-83c7-4212-90e9-5e8058d5147b

📥 Commits

Reviewing files that changed from the base of the PR and between f5631dc and d274067.

📒 Files selected for processing (3)

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

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

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

📝 Walkthrough

Walkthrough

Extracts token usage from A2UI responses (legacy and new shapes), accumulates prompt/output/total counts into React state during chat and action streams, displays formatted token counts in a header badge, and reformats server tsconfig (JSX setting and array formatting).

Changes

Token Usage Tracking and Display in AI Chat

Layer / File(s)	Summary
Token usage data model and utilities `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	`TokenUsage` shape plus `parseUsage` (supports legacy promptTokens/completionTokens and inputTokens/outputTokens) and `formatTokenCount` for compact display.
Response handler integration `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	`readA2UIResponse` gains optional `onUsage`; non‑SSE JSON and SSE done event paths extract usage via `parseUsage` and invoke `onUsage` when present.
State management and stream callbacks `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`	Adds `tokenUsage` React state initialized to zero, resets it when sending a new chat message, and wires `onUsage` during chat generation and action streaming to accumulate token counts.
Header badge UI and styling `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`, `packages/genui/a2ui-playground/src/pages/AIChatPage.css`	Renders token-usage badge in chat header when `totalTokens > 0` showing formatted prompt/output/total; adds `.chatTokenUsageBadge`, `.chatTokenUsageItem`, `.chatTokenUsageTotal` CSS classes; updates one suggested prompt text.

TypeScript Configuration Updates

Layer / File(s)	Summary
Compiler settings and array formatting `packages/genui/server/tsconfig.json`	`jsx` option changed from `preserve` to `react-jsx`; `lib`, `paths["`@/`*"]`, and `exclude` arrays reformatted to multi-line representations without value changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

lynx-family/lynx-stack#2613: Related previous changes to AIChatPage styling and AIChatPage.tsx integration that touch the same chat header/CSS areas.

Suggested reviewers

HuJean
gaoachao
PupilTong

Poem

A rabbit parses tokens bright,
Counts them in the header light,
Prompt and output neatly shown,
Totals bloom in pill-like tone,
A tiny badge — a joyful byte 🐰✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Title check	❓ Inconclusive	The title mentions 'token show' which aligns with displaying token usage in the chat header, but the phrasing is unclear and grammatically awkward ('create chat add token show').	Revise the title to be more descriptive and grammatically clear, such as 'feat(chat): display AI token usage in chat header' or similar.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.}

coderabbitai

Actionable comments posted: 2

🤖 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 664-670: The onUsage callback is updating token counters even if
its stream was aborted; guard the accumulation by checking the stream's abort
state before calling setTokenUsage. Locate the onUsage handler (the closure that
calls setTokenUsage) and add an early return if the associated
AbortSignal/abortController indicates aborted (e.g., signal.aborted or a local
isAborted flag passed into the closure), so setTokenUsage only runs for active
streams; apply the same guard to the other onUsage occurrence mentioned.

In `@packages/genui/server/tsconfig.json`:
- Line 11: Change the tsconfig.json "jsx" compiler option from "react-jsx" back
to "preserve" to restore Next.js 13+ compatibility; locate the "jsx" property in
the packages/genui/server tsconfig (currently set to "react-jsx") and set its
value to "preserve" so Next.js can handle JSX transformation through its own
pipeline.

🪄 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: b2c771d4-2b9e-4f11-9ba2-4222f7bcc270

📥 Commits

Reviewing files that changed from the base of the PR and between 9ac6751 and 7c204b3.

📒 Files selected for processing (3)

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

codecov · 2026-05-19T08:38:14Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
5038	1	5037	74

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

packages/rspeedy/plugin-qrcode/test/index.test.ts > Plugins - Terminal > schema > select between entries

Stack Traces | 1.13s run time

Error: Matcher did not succeed in time.
 ❯ test/index.test.ts:273:53

Caused by: Caused by: Caused by: AssertionError: expected "renderUnicodeCompact" to be called 2 times, but got 1 times

packages/web-platform/web-rsbuild-server-middleware/test/basic.spec.ts > test/basic.spec.ts

Stack Traces | 10s run time

Error: Hook timed out in 10000ms.
If this is a long-running hook, pass a timeout value as the last argument or configure it globally with "hookTimeout".
 ❯ test/basic.spec.ts:8:1

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

codspeed-hq · 2026-05-19T08:41:46Z

Merging this PR will improve performance by 36.89%

⚠️

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
⚡	`002-hello-reactLynx-destroyBackground`	916.7 µs	669.7 µs	+36.89%

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 Sherry-hue:feat/create-token (d274067) with main (531ef76)²}

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. ↩
No successful run was found on main (9ac6751) during the generation of this report, so 531ef76 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

relativeci · 2026-05-19T08:51:19Z

React Example with Element Template

#736 Bundle Size — 200.08KiB (0%).

d274067(current) vs 531ef76 main#728(baseline)

Bundle metrics

2 changes

	Current #736	Baseline #728
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`90`(`-2.17%`)	`92`
Duplicate Modules	`27`	`27`
Duplicate Code	`39.8%`(`+0.1%`)	`39.76%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #736	Baseline #728
IMG	`145.76KiB`	`145.76KiB`
Other	`54.32KiB`	`54.32KiB`

Bundle analysis report Branch Sherry-hue:feat/create-token Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-19T08:51:23Z

React MTF Example

#1600 Bundle Size — 208.18KiB (0%).

d274067(current) vs 531ef76 main#1592(baseline)

Bundle metrics no changes

	Current #1600	Baseline #1592
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`193`	`193`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.24%`	`44.24%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1600	Baseline #1592
IMG	`111.23KiB`	`111.23KiB`
Other	`96.95KiB`	`96.95KiB`

Bundle analysis report Branch Sherry-hue:feat/create-token Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-19T08:51:23Z

React External

#1582 Bundle Size — 695.64KiB (0%).

d274067(current) vs 531ef76 main#1574(baseline)

Bundle metrics no changes

	Current #1582	Baseline #1574
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 #1582	Baseline #1574
Other	`695.64KiB`	`695.64KiB`

Bundle analysis report Branch Sherry-hue:feat/create-token Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-19T08:51:28Z

React Example

#8467 Bundle Size — 237.24KiB (0%).

d274067(current) vs 531ef76 main#8459(baseline)

Bundle metrics no changes

	Current #8467	Baseline #8459
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`198`	`198`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.74%`	`44.74%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8467	Baseline #8459
IMG	`145.76KiB`	`145.76KiB`
Other	`91.48KiB`	`91.48KiB`

Bundle analysis report Branch Sherry-hue:feat/create-token Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-19T08:52:12Z

Web Explorer

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

d274067(current) vs 531ef76 main#10033(baseline)

Bundle metrics

1 change

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

Bundle size by type no changes

	Current #10041	Baseline #10033
JS	`499.15KiB`	`499.15KiB`
Other	`402.16KiB`	`402.16KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch Sherry-hue:feat/create-token Project dashboard

^{Generated by RelativeCI Documentation Report issue}

coderabbitai Bot reviewed May 19, 2026

View reviewed changes

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

Comment thread packages/genui/server/tsconfig.json

Sherry-hue force-pushed the feat/create-token branch from 7c204b3 to f5631dc Compare May 19, 2026 07:59

feat(s2ui): create chat add token show

d274067

Sherry-hue force-pushed the feat/create-token branch from f5631dc to d274067 Compare May 19, 2026 08:07

Sherry-hue enabled auto-merge (squash) May 19, 2026 08:07

PupilTong approved these changes May 19, 2026

View reviewed changes

Sherry-hue merged commit 5127cd9 into lynx-family:main May 19, 2026
83 of 85 checks passed

This was referenced May 20, 2026

feat(a2ui): add multi conversations #2676

Merged

feat(a2ui): support playground provider settings #2687

Merged

feat(a2ui-playground): refactor the chat ui #2688

Merged

feat(a2ui): refine playground create experience #2690

Merged

Conversation

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

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot Bot commented May 19, 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 19, 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, 1 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

❌ 1 Tests Failed:

Uh oh!

codspeed-hq Bot commented May 19, 2026

Merging this PR will improve performance by 36.89%

Performance Changes

Footnotes

Uh oh!

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

Uh oh!

React Example with Element Template

#736 Bundle Size — 200.08KiB (0%).

Uh oh!

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

Uh oh!

React MTF Example

#1600 Bundle Size — 208.18KiB (0%).

Uh oh!

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

Uh oh!

React External

#1582 Bundle Size — 695.64KiB (0%).

Uh oh!

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

Uh oh!

React Example

#8467 Bundle Size — 237.24KiB (0%).

Uh oh!

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

Uh oh!

Web Explorer

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

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sherry-hue commented May 19, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 19, 2026 •

edited

Loading

coderabbitai Bot commented May 19, 2026 •

edited

Loading

codecov Bot commented May 19, 2026 •

edited

Loading

relativeci Bot commented May 19, 2026 •

edited

Loading

relativeci Bot commented May 19, 2026 •

edited

Loading

relativeci Bot commented May 19, 2026 •

edited

Loading

relativeci Bot commented May 19, 2026 •

edited

Loading

relativeci Bot commented May 19, 2026 •

edited

Loading