feat(webui): display current context length and compression threshold

[DavdGao]

Background

When working with LLMs, context length is a critical resource. Users currently have no visibility into how much context has been consumed or when the next context compression will be triggered. Surfacing this information in the Web UI helps users better understand the agent's memory state and anticipate compression events before they occur.

Changes

• Display the current context length (e.g., token count) in the Web UI
• Display the threshold at which context compression will be triggered
• Update the display in real time as the conversation progresses

[AbdulTaufeeq01]

@DavdGao Please assign this task to me I would like to work on this task too.

[DavdGao]

@AbdulTaufeeq01 Thanks for your interest! Before assigning this to you, could you share your plan on how the frontend will retrieve the current session's token count and keep it updated in real time?

[Premsenareddy]

Hi, I opened PR #1871 for this.

Plan implemented there:

• Backend persists a small session state field, state.context_usage, with current tokens, compression threshold, model context window, and trigger ratio.
• The frontend reads the initial value from the existing sessions response via session.state.context_usage.
• Real-time authoritative updates use the existing /sessions/{id}/stream SSE channel through CustomEvent(name="state_updated") with context_usage included.
• While a reply is still active, MODEL_CALL_END updates the displayed current token count immediately; the final state_updated event reconciles it with the persisted backend estimate.

Happy to adjust the shape/location of the UI if maintainers prefer a different presentation.

[AbdulTaufeeq01]

@DavdGao This would be my plan

1. Backend — persist token state per session

Add a context_usage field to AgentState holding current_tokens, compression_threshold_tokens, context_window_tokens, and trigger_ratio. Update this after every MODEL_CALL_END event and after each compression event.

2. Frontend — initial value from session load

When a session loads, read session.state.context_usage from the existing /sessions/{id} response and populate local state — no extra API call needed.

3. SSE — optimistic update via MODEL_CALL_END

While a reply is in flight, immediately update current_tokens from the MODEL_CALL_END SSE event so the counter moves in real time, without waiting for the backend to persist.

4. SSE — authoritative reconcile via state_updated

Once the reply completes, the existing CustomEvent(name="state_updated") on /sessions/{id}/stream carries the full persisted context_usage object. The frontend merges this to reconcile any drift from the optimistic update.

5. Frontend — UI indicator in the chat toolbar

Render a compact progress bar showing current / threshold tokens with a tooltip that also surfaces the full context window size and trigger ratio. Hidden when context_usage is null or threshold is zero.