Skip to content

feat(ai): usage card on the start screen, token split tips and a retry helper - #3250

Merged
abose merged 16 commits into
mainfrom
ai
Oct 2, 2026
Merged

abose merged 16 commits into
mainfrom
ai

Conversation

@abose

@abose abose commented Oct 1, 2026 •

Copy link
Copy Markdown
Member

What kind of change does this PR introduce?

  • Feature
  • Build-related changes (pro deps pointer)

Core side of the AI panel's usage card. The card itself, the usage ledger and the cloud sync live in phoenix-pro (companion PR: https://github.com/phcode-dev/phoenix-pro/pull/275); this PR carries what they need from core:

  • Strings and styles for the start-screen usage card: heat map of months, legend, details with spend/tokens/active days, a bar per day stacked by model, top models, activity, and a month pager that steps back through calendar months. Stat rows wrap in a narrow panel.
  • Token split tips: hovering the tokens figure in the card's details, or the tokens on the usage line under an answer, shows input, output, cache-read and cache-write tokens with each share. The tips live on the body so the card's overflow and the scrolling messages cannot clip them; the tokens that open a split carry a dotted underline.
  • Usage line alignment: the line under an answer drops its 14px indent and sits flush with the answer.
  • Async.retry in src/utils/Async.js: retries a promise-returning operation with configurable attempts, delays, jitter, per-attempt timeout, a shouldRetry filter, an onRetry hook and an abort signal. The usage ledger uses it for its automatic pushes.
  • tracking-repos.json points at the matching phoenix-pro commit.

Does this PR introduce a breaking change?

  • No

Tests done

  • Unit: test/spec/Async-test.js covers the retry helper (attempts, delays, jitter, timeout, shouldRetry, onRetry, abort).
  • Integration (phoenix-pro suites that render these styles and strings, run on Windows): integration:AI Usage Ledger 13/13, integration:AI Usage Calendar 12/12, integration:AI Usage Meter 6/6.
  • Manual: the card, pager, hover tips and the flush usage line checked in the desktop app; the stylesheet compiles through brackets.less.

Checklist

  • When resolving issues, reference those issue URLs in description.
  • Propose a changelog if this pull request has any customer facing impact.
  • I have added a convincing reason for adding this feature, if necessary.

Other information

Proposed changelog: "The AI panel's start screen now shows your AI usage: a calendar of the days you used it, the last 30 days' spend and tokens, and details by month and model. Hover the tokens to see how they split into input, output and cache."

Why: users of the built-in chat had no view of what it was costing them beyond the current session; the card gives a month-by-month picture, kept on each machine and synced across the account's machines once the accounts service is deployed.

abose added 6 commits October 1, 2026 16:38
Month heat maps, the details block, the day tip and the reload icon,
on the start screen's own type scale, plus the AI_CHAT_USAGE_* strings
they need.
The headline and Activity stats wrap instead of running past the card,
the range chip trims with an ellipsis, and the reload and Details
controls keep their width.
The details' page row (last 30 days or an earlier calendar month) and
its arrow titles; the "last 3 months" label goes with the 90-day row.
Async.retry runs an operation again after a failure: attempts,
per-retry delays (a number or a list whose last value repeats), jitter,
a per-attempt timeout, a shouldRetry gate, an onRetry hook and an
AbortSignal. The defaults are one quick retry then longer waits, about
two minutes in all, for network blips and service restarts. Always
returns a native Promise.
The usage tips now serve two kinds: the day under the pointer on the
start-screen card, and a token split by kind, on the card's tokens
figure or under a turn line. Both live on the body so neither the
card's overflow nor the scrolling messages can clip them. The tokens
that open a split carry a dotted underline.

The usage line under an answer loses its 14px indent and sits flush
with the answer and its label.
Comment thread src/utils/Async.js
function waitFor(retryIndex) {
const base = delays[Math.min(retryIndex, delays.length - 1)];
const spread = base * jitter;
return Math.max(0, Math.round(base + (Math.random() * 2 - 1) * spread));
abose added 10 commits October 1, 2026 18:54
The current month's grid now draws every day; the days after today get
their own faint, never-coloured cell.
The minified bundle is now 12.09 MB, past the 12 MB limit. Raise it by
1 MB to restore the margin the size policy asks for.
The spend figure and the header chip say a Claude subscription includes
the spend at no extra cost, with no charge to Phoenix Pro. Dotted
underlines mark the spend and token figures as hoverable.
@abose
abose merged commit f4aeb32 into main Oct 2, 2026
18 checks passed
@abose
abose deleted the ai branch October 2, 2026 16:55
@sonarqubecloud

sonarqubecloud Bot commented Oct 2, 2026

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
C Security Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants