feat(ai-chat-ui): add token usage indicator to chat view by eneufeld · Pull Request #17028 · eclipse-theia/theia

eneufeld · 2026-02-20T11:56:27Z

What it does

Adds a per-session token usage indicator to the chat view, showing current conversation context size vs a 200k token budget.

Key design: extends TokenUsageService with a required sessionId field so all LLM providers (Anthropic, OpenAI, Google, Vercel, Copilot, Ollama) feed the indicator.

Add sessionId to TokenUsageParams/TokenUsage types (required)
Update all providers to pass sessionId on recordTokenUsage
Flow sessionId through TokenUsageServiceImpl backend → RPC → frontend
Add UsageResponsePart cache fields (cache_creation_input_tokens, cache_read_input_tokens)
Display latest inputTokens + cachedInputTokens + readCachedInputTokens + outputTokens to reflect actual token window pressure
Show a compact circular progress ring next to the send button that fills proportionally with token usage
Use muted fill for normal usage, yellow for warning (90%+), red for overflow (100%+)
Tint the chat input box border yellow/red when approaching or exceeding the context window limit
Show a hover tooltip with token breakdown (input/output, cache read/creation, total) and warning hints
Add consistent "Token Usage" header in hover tooltips across the ring and agent description hovers
CSS with Theia variable conventions and color thresholds
Controlled via experimental preference ai-features.chat.tokenUsageIndicator.enabled

Resolves GH-17322

How to test

Activate the experimental setting ai-features.chat.tokenUsageIndicator.enabled
Send messages to LLMs and see how the token count increases (ideally using different models)

Follow-ups

The context window of 200k tokens is hardcoded. This should come from the models.

Breaking changes

This PR introduces breaking changes and requires careful review. If yes, the breaking changes section in the changelog has been updated.

Attribution

Review checklist

As an author, I have thoroughly tested my changes and carefully followed the review guidelines
User-facing text is internationalized using the nls service (for details, please see the Internationalization/Localization section in the Coding Guidelines)

Reminder for reviewers

As a reviewer, I agree to behave in accordance with the review guidelines

sdirix

Seemingly works for me. I tried some requests and the numbers went up.

Major

I am not sure we need a new service for token counting. We already have usage response parts which we currently ignore. They could be reused for token counting
Connected with that, I think the token count should be stored in the model. We could do it via the usage response parts or store them in additional fields or data. Currently the count lives in React state which is a temporary place and can not handle persistence, chat branches, chat switching etc.

Minor
Until the 200k limit has any specific meaning I would personally not show it and just count the tokens.

eneufeld · 2026-02-23T15:40:41Z

There is no new service in place. I just extended the existing one.
But I see your point of using the usage report parts. But that would be a bigger change as those need to be collected for a report.
The 200k magic number is needed to show a green/yellow/red bar

sdirix · 2026-02-24T09:13:49Z

You're right, I meant the new client, not service.

Would you prefer to rework the approach or keep the one of the PR of now? The current implementation could serve as POC but it has so many downsides, I am not sure it's good to merge it in this state.

eneufeld · 2026-02-24T09:19:39Z

@ndoschek if you agree i would rework this but it won't make the february release then

eneufeld · 2026-03-02T09:42:59Z

@ndoschek why did you change this to draft? I updated the pr and it is ready imho

ndoschek · 2026-03-02T13:57:26Z

Ah sorry Eugen, I was working through my GH notification mails and only saw your comment from before, changed it back again

sdirix

Looks good conceptually to me.

I wonder whether we should also record the LLM/Provider into each response as the token count is conceptually dependent on that, what do you think?

sdirix

Generally speaking the PR works but it's easy to get into a "broken" state.

I let Coder look at a larger lock file. Initially the context was counted as 6k tokens. Then after I sent the next message, it suddenly jumped to 569k. I was using Opus 4.6. Coder still worked properly, so it's definitely some wrong counting

The initial UI does not look good:

Because the content-bar is not filled, it looks like a broken separator. Personally I would not show the bar nor the token count at all if no tokens were counted.

Maybe we should mark this feature as experimental and disable it by default in Theia itself? For "Theia Next" we could enable it by default via the preferences, so it gets some testing before we hand it over to the users.

The PR must also be rebased/merged with master.

sdirix · 2026-03-18T13:00:06Z

+                        const tokenUsage = isResponseNode(node) ? node.response.tokenUsage : undefined;
+                        const hasTokenInfo = tokenUsage && (tokenUsage.inputTokens > 0 || tokenUsage.outputTokens > 0);
+                        const tokenInfo = hasTokenInfo
+                            ? `Input: ${formatTokenCount(tokenUsage.inputTokens)} · Output: ${formatTokenCount(tokenUsage.outputTokens)}`


"Input:", "Output:", and the · separator are user-facing strings and must be localized with nls.localize.

ndoschek

Thank you @eneufeld, overall this works nicely!

I have a few inline comments and one comment below.

I agree with Stefan, that the hardcoded 200k context window can be a bit misleading across different models.
About the default setting to false, I can take care of opening a ticket that we enable it for the Theia next product after this PR has been completed.

One additional thing I noticed:
When a request is aborted by the user, the token usage indicator is not updated for that request afaics. It keeps showing the data from the previous request. The tokens consumed by the aborted request seem to then show up added to the next request (if any), since the next request's input includes the prior conversation context. It would be good to also update the indicator on abort with whatever usage data was received up to that point. This could also be addressed in a follow-up or documented as a known limitation for now.

Add a context window usage indicator bar between the chat messages and input area, showing cumulative token consumption across all requests in a session. Architecture: - Language models yield UsageResponsePart inline in their stream/response instead of calling TokenUsageService directly - AbstractChatAgent captures usage into ChatResponseModel.tokenUsage and records it centrally via TokenUsageService - Token usage is serialized/restored with chat sessions - UI reads directly from the chat model Changes across providers: - Remove TokenUsageService injection from all 6 provider managers (Anthropic, Google, Ollama, OpenAI, Copilot, Vercel AI) - All providers yield usage data as UsageResponsePart in streaming and return usage on text/parsed responses - Claude Code and Codex agents call setTokenUsage() directly as they don't extend AbstractChatAgent UI: - Progress bar with green/yellow/red color coding against a 200k context window - Per-response token counts shown on agent label hover - Comprehensive unit tests for indicator logic and rendering

Stefan is on vacation this week, Simon will take over

ndoschek

Thanks for the updates @eneufeld, works great for me 👍
As discussed yesterday, I had a quick look and did a little redesign of the UI indicator and pushed it on top.
I'll ask Simon to have a final look.

The UI is now a donut ring icon, filling up according to token usage.
For getting closer to the limit, we use warning colors for the icon and the input broder and add an info message to the hover content. If the limit was reached we use error colors and a different info message.

Some screenshots:

Simon will take over as I did the redesign of the UI

For more extensive testing we enable the token UI in the chat view by default for the Theia IDE next product See also eclipse-theia/theia#17028

- Remove standalone ChatTokenUsageIndicatorWidget and its DI binding - Integrate token usage display into the chat input widget directly - Replace full-width progress bar with a compact circular progress ring next to the send button, using conic-gradient fill - Tint input box border yellow/red when approaching or exceeding context window limit - Show multiline hover tooltip with input/output/cache breakdown and warning hints for warning/error states - Use MarkdownString for hover to support proper line breaks - Reuse localization keys for token info across badge and agent description hovers - Keep utility functions (formatTokenCount, getUsageColorClass, etc.) and their tests, remove widget-specific tests - Rename tsx file to util ts file as we do not have a dedicated indicator widget anymore

sgraband

Thank you! I really like the new design! LGTM 👍

For more extensive testing we enable the token UI in the chat view by default for the Theia IDE next product See also eclipse-theia/theia#17028

eneufeld requested review from ndoschek and sdirix February 20, 2026 11:56

github-project-automation Bot added this to PR Backlog Feb 20, 2026

github-project-automation Bot moved this to Waiting on reviewers in PR Backlog Feb 20, 2026

sdirix requested changes Feb 23, 2026

View reviewed changes

github-project-automation Bot moved this from Waiting on reviewers to Waiting on author in PR Backlog Feb 23, 2026

sdirix marked this pull request as draft February 26, 2026 10:05

eneufeld force-pushed the feat/token-ui branch 2 times, most recently from 2234bd0 to 5d6d461 Compare February 28, 2026 09:33

eneufeld marked this pull request as ready for review February 28, 2026 09:42

eneufeld requested a review from sdirix February 28, 2026 09:42

ndoschek marked this pull request as draft March 2, 2026 08:41

ndoschek marked this pull request as ready for review March 2, 2026 13:56

sdirix requested changes Mar 3, 2026

View reviewed changes

Comment thread packages/ai-chat-ui/src/browser/chat-token-usage-indicator.tsx Outdated

Comment thread packages/ai-chat/src/common/chat-agents.ts

Comment thread packages/ai-vercel-ai/src/node/vercel-ai-language-model.ts Outdated

eneufeld requested a review from sdirix March 4, 2026 08:48

ndoschek mentioned this pull request Mar 12, 2026

Improve behavior when max context window limit is reached #17142

Closed

sdirix previously requested changes Mar 18, 2026

View reviewed changes

ndoschek added this to Theia Roadmap Mar 23, 2026

ndoschek moved this to In Review in Theia Roadmap Mar 23, 2026

ndoschek mentioned this pull request Mar 23, 2026

Endgame Plan for 1.70.x #17201

Closed

25 tasks

eneufeld force-pushed the feat/token-ui branch 2 times, most recently from a8dc1b4 to a831c30 Compare April 1, 2026 12:53

eneufeld requested a review from sdirix April 1, 2026 22:42

ndoschek previously requested changes Apr 8, 2026

View reviewed changes

ndoschek mentioned this pull request Apr 8, 2026

Show per-session token usage indicator in the chat view #17322

Closed

ndoschek linked an issue Apr 8, 2026 that may be closed by this pull request

Show per-session token usage indicator in the chat view #17322

Closed

ndoschek removed this from Theia Roadmap Apr 8, 2026

ndoschek mentioned this pull request Apr 8, 2026

[Epic] Context Window Management for AI Chat Sessions #16703

Open

eneufeld added 2 commits April 8, 2026 16:01

review comments

e4cbd54

eneufeld force-pushed the feat/token-ui branch from 80005b0 to 7ce3d1a Compare April 8, 2026 14:49

ndoschek force-pushed the feat/token-ui branch from 7ce3d1a to 30c9568 Compare April 9, 2026 12:40

ndoschek self-requested a review April 9, 2026 12:41

ndoschek reviewed Apr 9, 2026

View reviewed changes

ndoschek force-pushed the feat/token-ui branch from 30c9568 to 159d16e Compare April 9, 2026 12:46

ndoschek requested a review from sgraband April 9, 2026 12:46

ndoschek mentioned this pull request Apr 9, 2026

electron-next: enable token UI in AI Chat view eclipse-theia/theia-ide#696

Merged

1 task

ndoschek force-pushed the feat/token-ui branch from 159d16e to b345da6 Compare April 9, 2026 13:40

review: show percentage in token usage tooltip

823415a

sgraband approved these changes Apr 10, 2026

View reviewed changes

github-project-automation Bot moved this from Waiting on author to Needs merge in PR Backlog Apr 10, 2026

ndoschek merged commit 2fa22c7 into master Apr 10, 2026
24 of 32 checks passed

ndoschek deleted the feat/token-ui branch April 10, 2026 14:22

github-project-automation Bot moved this from Needs merge to Done in PR Backlog Apr 10, 2026

github-actions Bot added this to the 1.71.0 milestone Apr 10, 2026

Conversation

eneufeld commented Feb 20, 2026 • edited by ndoschek Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What it does

How to test

Follow-ups

Breaking changes

Attribution

Review checklist

Reminder for reviewers

Uh oh!

sdirix left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eneufeld commented Feb 23, 2026

Uh oh!

sdirix commented Feb 24, 2026

Uh oh!

eneufeld commented Feb 24, 2026

Uh oh!

eneufeld commented Mar 2, 2026

Uh oh!

ndoschek commented Mar 2, 2026

Uh oh!

sdirix left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sdirix left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sdirix Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ndoschek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ndoschek left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sgraband left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

eneufeld commented Feb 20, 2026 •

edited by ndoschek

Loading

sdirix left a comment •

edited

Loading

sdirix Mar 18, 2026 •

edited

Loading

ndoschek left a comment •

edited

Loading