AI usage, made simple

The tenant admin Usage page now shows AI usage in plain words first. The technical breakdown is still there, behind one button.

Status as of 23 Sep 2026

Stage
PR open, waiting for review and CI. Not merged yet.
Branch
SP-745/ai-usage-simple-view
PR
#470
Ticket
SP-745
Where
LMS → Admin → Usage → AI usage section

Why

Most tenant admins are not technical. The old section showed five number tiles, two charts and a full table at once, with words like "input tokens" and "output tokens". That is a wall of numbers for someone who just wants to know "how much AI did my team use, and what did it cost".

What changed

Summary

3 plain tiles

AI requests, Usage amount and Estimated cost. "Usage amount" has a small ⓘ that explains tokens in one sentence.

Trend

One chart, one toggle

"Usage over time" with "This period" and "Last 6 months" tabs, instead of two charts side by side. Next to it: the top 3 features with a share bar.

Details

Hidden until asked

"Show detailed breakdown" opens the Input tokens and Output tokens numbers, the cost split, a short "what do these numbers mean" note and the full table.

Cost

Cost for all AI use

Admins now see the estimated cost of all AI use, both what SkillPixel runs for them and what runs on their own API key. Before, only their own key was priced.

Money format

Clear "USD"

No more "$" or "US$". Every amount has 2 decimals and ends with USD, for example 13.83 USD. Very small amounts show as "<0.01 USD".

Layout

Cost column fits

The feature table now uses the full width, so the Cost column is no longer cut off at 1440px.

Before and after

Both shots use the same demo tenant and the same month. Desktop, 1440px wide.

Old AI usage section with five tiles, two charts and the full table always visible
Before. Everything shown at once. Note the old cost label says "your API key" only, which no longer matches the new pricing, and costs mix decimal places ($0.912, $0.3287).
New AI usage section with three tiles, one chart, top features and a Show detailed breakdown button
After (default view). Three tiles, one chart, top features. The details stay closed.

Detailed breakdown, opened

One click on "Show detailed breakdown" gives the full picture for admins who want it.

AI usage section with the detailed breakdown open, showing input and output numbers, cost split and the feature table
Input tokens and Output tokens, the cost split ("Managed by SkillPixel" and "Your own API key"), the "no price" note and the full feature table. The cost split shows only when both were used in the period.

Small helpers

Tooltip on Usage amount explaining tokens
The ⓘ next to "Usage amount" explains tokens in one sentence. It opens on hover and on keyboard focus.
Usage over time chart switched to Last 6 months
The same chart card switched to "Last 6 months".

Vietnamese

AI usage section in Vietnamese, default view
Default view in Vietnamese.
AI usage section in Vietnamese with the details open
Details open in Vietnamese. "Input tokens" and "Output tokens" stay in English on purpose, the same words as the English page. Amounts read like "13,83 USD".

Technical words stay in English

"Input tokens" and "Output tokens" are the same words in English and Vietnamese. A Vietnamese translation of these terms loses the meaning, and one shared term is easier to answer questions about. The short note under the numbers explains them in the page language.

Empty month

When a tenant has no AI use in the chosen month, the section shows one friendly line and nothing else: no tiles, no empty charts, no details button.

Checks

CheckResult
Frontend tests (Vitest)424 passed
Frontend lint and buildPass (only old warnings in other files)
Backend unit tests1725 passed
Backend AI usage tests, database tier included28 passed, plus related storage, credentials and DOCX import tests
Full Docker stack built from this branchAll 5 services healthy, screenshots above taken from it
Page width at 1440px, English and VietnameseNo sideways scroll, Cost column fully visible

Mobile is not a focus right now, so there is only basic support and no mobile check.

Open items