Skip to content

feat(chat): UX-012 β€” token usage progress meter#89826

Open
BunsDev wants to merge 1 commit into
mainfrom
feat/ux-token-meter-pr93
Open

feat(chat): UX-012 β€” token usage progress meter#89826
BunsDev wants to merge 1 commit into
mainfrom
feat/ux-token-meter-pr93

Conversation

@BunsDev

@BunsDev BunsDev commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Adds a 2px progress bar at the base of the chat composer showing context usage.

  • Green <60%, blue 60–85%, red >85%
  • Smooth animated width transition (400ms ease-out)
  • Only visible when token data is present
  • Accessible: role=progressbar with aria-valuenow/min/max
  • Respects prefers-reduced-motion

Token data source: activeSession.totalTokens / threadContextWindow (already computed in renderChat).

Part of UI/UX Enhancement Sprint 2.

Copilot AI review requested due to automatic review settings June 3, 2026 12:27
@openclaw-barnacle openclaw-barnacle Bot added app: web-ui App: web-ui size: S maintainer Maintainer-authored PR labels Jun 3, 2026
@clawsweeper

clawsweeper Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Codex review: found issues before merge. Reviewed June 25, 2026, 12:21 PM ET / 16:21 UTC.

Summary
The branch adds a chat composer token-usage progress bar, CSS/reduced-motion styles, and render tests for zero-token and session context-window cases.

PR surface: Source +58, Tests +44. Total +102 across 3 files.

Reproducibility: yes. Source inspection gives a high-confidence path: render an active session with totalTokens, contextTokens, and totalTokensFresh=false; this PR passes only raw totalTokens into the meter while current sibling context UI hides that stale state.

Review metrics: none identified.

Merge readiness
Overall: πŸ§‚ unranked krab
Proof: 🌊 off-meta tidepool
Patch quality: πŸ§‚ unranked krab
Result: blocked by patch quality or review findings.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

  • Refresh the branch until GitHub reports it mergeable.
  • [P2] Reuse the freshness-aware context usage model and add totalTokensFresh=false coverage.

Proof path suggestion
A short browser proof would materially help verify the visible meter states after the stale-token handling is fixed. Mantis is currently scoped to Telegram, Discord, and web UI chat proof, so it is not the right proof path for this surface.
Use maintainer screenshot/manual proof, browser or Playwright proof, Crabbox where appropriate, or normal local artifact proof instead.

Risk before merge

  • [P1] Merging as-is can present a preserved stale session token total as live composer context usage when totalTokensFresh=false.
  • [P1] GitHub reports the branch as CONFLICTING/DIRTY and maintainerCanModify=false, so an author/member refresh is needed before merge.
  • [P1] The open stale-context indicator work may change whether stale totals are hidden or shown as updating; the meter should share that final contract.

Maintainer options:

  1. Share the freshness contract (recommended)
    Update the meter to consume the existing freshness-aware context model or equivalent shared helper, then cover totalTokensFresh=false before merge.
  2. Wait for stale-display alignment
    Pause this PR until the stale-context indicator work decides whether stale totals should be hidden or visibly marked as updating.
  3. Accept an explicit stale display
    If maintainers want stale totals visible, label or style them as stale/updating and add focused tests for that policy.

Next step before merge

  • [P2] Manual author or maintainer follow-up is needed because the branch is conflicting, protected by the maintainer label, and the stale-token display policy needs alignment with the open context-indicator work.

Security
Cleared: The diff is limited to UI rendering, CSS, and colocated render tests, with no dependency, workflow, secret, permission, network, or supply-chain surface added.

Review findings

  • [P1] Reuse the freshness-aware context model β€” ui/src/ui/views/chat.ts:2296
Review details

Best possible solution:

Refresh the branch and drive the meter from the same freshness-aware context usage model as the existing notice, with explicit stale-token behavior and tests.

Do we have a high-confidence way to reproduce the issue?

Yes. Source inspection gives a high-confidence path: render an active session with totalTokens, contextTokens, and totalTokensFresh=false; this PR passes only raw totalTokens into the meter while current sibling context UI hides that stale state.

Is this the best way to solve the issue?

No. The visible meter is plausible, but the maintainable fix is to reuse or match the existing freshness-aware context model instead of adding a parallel raw-token calculation.

Full review comments:

  • [P1] Reuse the freshness-aware context model β€” ui/src/ui/views/chat.ts:2296
    The new meter is driven by activeSession.totalTokens and threadContextWindow, but session rows can preserve totalTokens with totalTokensFresh=false. Existing web context UI, /usage, and the Android context meter do not present that stale value as live context usage, so drive the meter from the shared freshness-aware model or pass freshness through and add a stale-row test.
    Confidence: 0.9

Overall correctness: patch is incorrect
Overall confidence: 0.9

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 19707cce1d73.

Label changes

Label justifications:

  • P3: This is a bounded web UI enhancement with low blast radius, even though it has a merge-blocking display correctness issue.
  • merge-risk: 🚨 session-state: The diff can render stale session token totals as current context usage in the chat composer.
  • rating: πŸ§‚ unranked krab: Overall readiness is πŸ§‚ unranked krab; proof is 🌊 off-meta tidepool and patch quality is πŸ§‚ unranked krab.
  • status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action. Not applicable: The external-contributor proof gate does not apply to this member-authored, maintainer-labeled PR.
Evidence reviewed

PR surface:

Source +58, Tests +44. Total +102 across 3 files.

View PR surface stats
Area Files Added Removed Net
Source 2 58 0 +58
Tests 1 44 0 +44
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 3 102 0 +102

What I checked:

  • PR renders from raw token totals: The PR renders the new meter from activeSession.totalTokens and threadContextWindow without passing totalTokensFresh or using the existing freshness-aware context usage helper. (ui/src/ui/views/chat.ts:2296, 3b9121a97dd2)
  • Current web context notice hides stale totals: Current main returns no context notice when session.totalTokensFresh is false, so the adjacent web UI does not present stale totals as live context usage. (ui/src/ui/chat/context-notice.ts:67, 19707cce1d73)
  • Session contract defines stale totals: The session type documents totalTokensFresh=false as requiring consumers to treat totalTokens as stale or unknown for context-utilization displays. (src/config/sessions/types.ts:361, 19707cce1d73)
  • Sibling Android meter follows freshness: The Android context meter returns no width when totalTokensFresh is false and has a regression test for that stale-token behavior. (apps/android/app/src/main/java/ai/openclaw/app/ui/chat/ChatScreen.kt:1003, 19707cce1d73)
  • Current main lacks this meter: Current main has no token-meter or renderTokenMeter implementation, and the latest release tag also lacks the meter, so the PR is not obsolete or implemented elsewhere. (19707cce1d73)
  • Live PR state requires refresh: GitHub reports the PR open with maintainer label, head 3b9121a, mergeable CONFLICTING, and mergeStateStatus DIRTY. (3b9121a97dd2)

Likely related people:

  • BunsDev: Authored the persistent Control UI chat context usage indicator and earlier fresh-context behavior in the affected helper, tests, and styles. (role: context-usage behavior contributor; confidence: high; commits: 5a90179e8fdf, da773175f2eb; files: ui/src/ui/chat/context-notice.ts, ui/src/ui/chat/run-controls.test.ts, ui/src/styles/chat/layout.css)
  • stainlu: Authored the merged stale totalTokens preservation work that introduced totalTokensFresh as a display-layer freshness signal. (role: stale-token contract introducer; confidence: high; commits: 24b915ed413e; files: src/config/sessions/types.ts)
  • vincentkoc: Recently touched shared chat token formatting and adjacent context usage reporting paths used by the web UI. (role: recent context-token area contributor; confidence: medium; commits: 45f935887769; files: ui/src/ui/chat/context-notice.ts, ui/src/ui/chat/token-format.ts)
  • Tosko4: Added the Android live chat context meter and stale-token test that share the same freshness invariant. (role: sibling context-meter contributor; confidence: medium; commits: 826ea2bf8513; files: apps/android/app/src/main/java/ai/openclaw/app/ui/chat/ChatScreen.kt, apps/android/app/src/test/java/ai/openclaw/app/ui/chat/ChatContextMeterTest.kt)
What the crustacean ranks mean
  • πŸ¦€ challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
  • 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
  • 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
  • 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
  • πŸ¦ͺ silver shellfish: thin signal; proof, validation, or implementation needs work.
  • πŸ§‚ unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
  • 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works
  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a small token/context usage progress meter to the chat composer UI, based on session token totals versus the thread context window. In addition, it introduces new UI signals for tool-call failures (banner + sidebar dot) and expands the agent overview page with extra cards.

Changes:

  • Add a 2px token usage meter in the chat composer with tiered coloring and reduced-motion handling.
  • Track/display tool-call failures via a warning banner in chat and a pulsing indicator dot in the sidebar recent-sessions list.
  • Add β€œMemory Tiers” and β€œRole Contracts” cards to the agent panels overview and tweak chat sidebar styling (backdrop blur).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
ui/src/ui/views/chat.ts Adds token meter rendering and introduces session-level tool error detection/tracking + banner.
ui/src/ui/views/agents-panels-overview.ts Adds two additional overview cards (with loading skeleton states).
ui/src/ui/app-render.ts Adds sidebar recent-session tool-error indicator using sessionHasKnownToolErrors.
ui/src/styles/layout.css Styles/animates the new sidebar tool-error dot.
ui/src/styles/chat/sidebar.css Adjusts chat workspace rail background and adds backdrop blur filters.
ui/src/styles/chat/layout.css Adds CSS for the token usage meter and reduced-motion behavior.

Comment thread ui/src/ui/views/chat.ts Outdated
Comment thread ui/src/ui/views/chat.ts Outdated
Comment thread ui/src/ui/views/chat.ts Outdated
Comment thread ui/src/ui/app-render.ts Outdated
Comment thread ui/src/styles/layout.css Outdated
@clawsweeper clawsweeper Bot added rating: πŸ¦ͺ silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. labels Jun 3, 2026
@BunsDev

BunsDev commented Jun 13, 2026

Copy link
Copy Markdown
Contributor Author

@clawsweeper review

@clawsweeper

clawsweeper Bot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.

Re-review progress:

@clawsweeper clawsweeper Bot added rating: 🌊 off-meta tidepool PR readiness rating does not apply to this item. and removed rating: πŸ¦ͺ silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. labels Jun 13, 2026
@BunsDev
BunsDev force-pushed the feat/ux-token-meter-pr93 branch from 2f700dd to 3b9121a Compare June 13, 2026 04:20
@BunsDev

BunsDev commented Jun 13, 2026

Copy link
Copy Markdown
Contributor Author

@clawsweeper review

@clawsweeper

clawsweeper Bot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.

Re-review progress:

@clawsweeper clawsweeper Bot added rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. merge-risk: 🚨 session-state 🚨 May lose, corrupt, stale, or mis-associate session, agent, or context state. and removed rating: 🌊 off-meta tidepool PR readiness rating does not apply to this item. labels Jun 13, 2026
@clawsweeper clawsweeper Bot added rating: πŸ§‚ unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. labels Jun 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app: web-ui App: web-ui maintainer Maintainer-authored PR merge-risk: 🚨 session-state 🚨 May lose, corrupt, stale, or mis-associate session, agent, or context state. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. rating: πŸ§‚ unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. size: S status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants