Show token in / token out usage in chat web app UI #16

Open
opened 2026-07-26 06:00:33 -07:00 by westfarn · 2 comments
Owner

Follow-on to #15 (backend token tracking + admin panel).

Summary

Surface per-conversation / per-turn tokens_in and tokens_out in the chat web app frontend so end users (and/or company managers) can see token usage, not just admins.

Depends on

  • #15PromptMetric.tokens_in / tokens_out persisted and conversation-level totals available in admin.

Related / coordinate with

  • #17 — token-based billing, quotas, and usage enforcement
  • #36 — multi-plan subscriptions (Founders / Standard / Pro / Business / Backer) + prompt-window quota + feature gating — UI may also show plan name and remaining prompt quota alongside token totals; share plan→limits model, do not fork display logic.

Requirements

  • Expose token usage through an API/serializer the frontend can consume (per conversation total; optionally per message).
  • Display tokens in the chat web app (e.g. conversation header, per-message detail, or a usage panel).
  • Handle the null case gracefully — when the provider reported no usage, show "—"/unknown rather than 0 or a fabricated number.
  • Respect roles: decide whether end users see their own usage vs. company-manager-only view.
  • When #36 lands (or in parallel), prefer exposing plan + remaining prompts in the same usage surface so users see tokens and rate-limit headroom.

Acceptance criteria

  • API returns token_in / token_out (per conversation, and per message if included)
  • Chat web app renders token usage
  • Null/missing usage renders as unknown, not 0
  • Tests (API + FE component) cover the display
  • Coordinated with #36 for optional plan/remaining-quota fields (no conflicting UX)

Notes

Backend fields already live on PromptMetric after #15; this ticket is FE + API exposure only.

Follow-on to #15 (backend token tracking + admin panel). ## Summary Surface per-conversation / per-turn **tokens_in** and **tokens_out** in the chat web app frontend so end users (and/or company managers) can see token usage, not just admins. ## Depends on - #15 — `PromptMetric.tokens_in` / `tokens_out` persisted and conversation-level totals available in admin. ## Related / coordinate with - #17 — token-based billing, quotas, and usage enforcement - #36 — multi-plan subscriptions (Founders / Standard / Pro / Business / Backer) + prompt-window quota + feature gating — UI may also show **plan name** and **remaining prompt quota** alongside token totals; share plan→limits model, do not fork display logic. ## Requirements - Expose token usage through an API/serializer the frontend can consume (per conversation total; optionally per message). - Display tokens in the chat web app (e.g. conversation header, per-message detail, or a usage panel). - Handle the null case gracefully — when the provider reported no usage, show "—"/unknown rather than 0 or a fabricated number. - Respect roles: decide whether end users see their own usage vs. company-manager-only view. - When #36 lands (or in parallel), prefer exposing plan + remaining prompts in the same usage surface so users see tokens *and* rate-limit headroom. ## Acceptance criteria - [ ] API returns token_in / token_out (per conversation, and per message if included) - [ ] Chat web app renders token usage - [ ] Null/missing usage renders as unknown, not 0 - [ ] Tests (API + FE component) cover the display - [ ] Coordinated with #36 for optional plan/remaining-quota fields (no conflicting UX) ## Notes Backend fields already live on `PromptMetric` after #15; this ticket is FE + API exposure only.
Author
Owner

Coordination note: Multi-plan work tracked in #36 (Founders live; Standard/Pro/Business hidden; Backer whitelist; prompt-window + feature gating).

This issue (#16) should stay focused on token_in/token_out display, but when consuming APIs prefer sharing any plan/remaining-quota fields #36 exposes so the usage UI does not fork.

**Coordination note:** Multi-plan work tracked in #36 (Founders live; Standard/Pro/Business hidden; Backer whitelist; prompt-window + feature gating). This issue (#16) should stay focused on token_in/token_out display, but when consuming APIs prefer sharing any plan/remaining-quota fields #36 exposes so the usage UI does not fork.
Author
Owner

Implemented in PR #37 (API: conversation/prompt tokens_in/tokens_out + GET /finance/subscription/ usage) and FE ai_ml_operations/chat_web_app#72.

Implemented in PR https://git.aimloperations.com/ai_ml_operations/chat_backend/pulls/37 (API: conversation/prompt `tokens_in`/`tokens_out` + `GET /finance/subscription/` usage) and FE https://git.aimloperations.com/ai_ml_operations/chat_web_app/pulls/72.
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ai_ml_operations/chat_backend#16