feat(admin): tabbed cost analytics + all-in platform cost from the AWS bill

[philmerrell]

Why

The cost dashboard stacked four blocks down one column and shared a two-column grid between the donut and the trend chart, so every visualisation rendered at half the console's width. Three concrete costs:

• The model-usage legend ran past the fold — you could not see the fleet without scrolling past the chart.
• The top-users table lost its Tier and Quota used columns to horizontal scroll.
• The trend chart's date axis sat on a 45-degree rotation and still dropped labels.

Now that the admin nav lives in the sidenav (#1232), that width is available.

What

One tab per visualisation. The period KPIs stay pinned above the strip — every tab is a drill-down of those four numbers — and the Session Cost Anatomy lookup moves out of the page header into the Conversations tab, beside the rows it links to.

Tab	Contents	Badge
Model Usage (default)	pie/bar breakdown, Pie preselected	model count
Cost Trends	daily cost + requests line chart	day count
Top Users	sortable user table	rows loaded
Conversations	session-ID lookup + expensive-conversations scan	rows, hidden until scanned

Model Usage leads because the donut answers the first question an admin brings to this page — what the money went to — and it is the only panel that is complete on load with no further fetch or scan.

Three decisions worth the reviewer's time:

• The strip is the documented pill idiom, not an underline. app-conventions.md rules underline tabs out explicitly: the brand token is a fixed colour with no dark variant, so a brand-coloured underline all but disappears on the dark surface. Raised white pill on a recessed shell, inline-flex not flex, with role="tablist"/tab/tabpanel, roving focus and arrow keys; below sm it collapses to a <select>.
• Panels are destroyed on switch, not hidden. A hidden canvas cannot size itself, so a [hidden] panel would come back to a 0×0 chart. Everything that must survive a switch (the loaded rows) already lives in AdminCostStateService, not in the panel.
• The model card's column split flips with the view. A donut is constrained by its shorter side, so extra width past a point is empty canvas; the horizontal bars carry long us.anthropic.* labels and earn every pixel. Donut 2/5 with a roomy legend beside it, bars 3/5. The legend's share bar is pie-only — in bar view the chart already is that baseline, and the column it costs is what truncated the model ids next to it.

Two defects found on the way

• Whole-dollar axis labels printed $4 $4 $3 $2 $2 $1 $1 $0 whenever the axis stepped by under a dollar — seven labels for four values against eight distinct gridlines. Pre-existing, but a full-width chart makes it the first thing you read. Both charts now take the precision from the full tick array Chart.js hands the callback, so the column stays uniform instead of mixing $1 with $1.50.
• Neither chart destroyed its Chart.js instance. That cost nothing while the cards lived for the life of the page. Now that they mount and unmount, every tab switch would have leaked one.

Also

Admin content is capped at max-w-[100rem] and centred. That is a sprawl guard, not the max-w-7xl reading-width cap this shell exists to drop: it is wider than any laptop the console is used on (verified non-binding at a 1600px viewport, binding at 2600px), and only stops a 20-column cost table reaching 3000px on an ultrawide, where a row's rank and its dollars end up a head-turn apart.

Card radii on this page move to rounded-2xl to match the documented token. All five components touched are used only by this page.

Verification

Clicked through all four tabs against real dev data — local SPA on :4200, worktree app-api on :8000 against dev DynamoDB, signed in as a real admin. Loaded the conversations scan (25 rows, badge updated from hidden to 25). Confirmed the mobile <select> switches panels and that the segmented control stops stretching at 375px with no horizontal page overflow.

• Light and dark, both levers (class="dark" removed and prefers-color-scheme emulated).
• 375px / 1600px / 2600px.
• Badge contrast measured through a canvas normalise: 6.51–9.63:1 light, 4.74–5.04:1 dark — all AA.
• Full SPA suite green: 296 files / 3701 tests.

🤖 Generated with Claude Code

[philmerrell]

Follow-up commit: all-in platform cost (e06c881b)

The tabs work uncovered a bigger gap, so this PR now also closes it.

The dashboard was seeing ~61% of the bill

Measured against prod, Sept 1–21:

	Amount	Share
Inference (Bedrock model SKUs)	$1,081.44	61.2%
Infrastructure	$685.96	38.8%
Total	$1,767.41

Amazon Bedrock AgentCore alone is $201.54/month — the second-largest line item in the account, on no screen anywhere. (It's also the line that would have surfaced the idle-reaper regression, #827.)

With 1,807 active users, "Avg Cost/User" was reporting $0.60 against a true all-in $0.98 — understating unit economics by 1.64×.

Our pricing tables are accurate to 0.50%

Prod ROLLUP#MONTHLY for 2026-09 says totalCost = $1,076.03; Cost Explorer's Bedrock Edition SKUs say $1,081.44. A $5.41 gap on a thousand dollars of spend.

That result drove the design: inference stays on our own ledger (per user, per session — CE is per-account only), and CE is used only for the 39% we never measured. CE's own inference figure rides along purely to reconcile, surfaced as a pricing regression test — a widening delta means curated-models.ts has drifted from what AWS charged, which CLAUDE.md flags as a live risk. It is never added to a total; doing so would count every token twice.

Design decisions worth a reviewer's attention

• Scheduled, never live. CE bills $0.01/request. A screen querying it on load would cost ~$10/month per thousand page loads to display costs. One daily tick, ~$0.02/day, results in DynamoDB. ce:GetCostAndUsage is on the Lambda role and deliberately not on app-api's, so no request path can spend billing dollars.
• No new infra. PLATFORM#* rows go in the existing system-cost-rollup table — no new table, no GSI, no migration.
• Opt-in, against this repo's usual default-on posture: the flag reads billing data, needs an IAM action an SCP may deny, and costs money per call. Only the literal true enables. While off, zero resources and the tab explains itself rather than rendering a $0.00 that reads as "infrastructure is free".
• Service allowlist, not tags. applyStandardTags already tags everything, but no cost allocation tag is activated — GROUP BY TAG Project returns one Project$ bucket holding the whole bill. Activation is an org-management-account action (dev-ai gets AccessDeniedException just listing them) and is not retroactive. And the accounts are shared: bsu-prod-backend runs an Aurora cluster we don't provision. So services bucket into inference / platform / excluded, and excluded rows are displayed, not dropped — a total is only trustworthy if its exclusions are visible.

⚠️ Known limitation, stated in the UI

Infrastructure is measured per AWS account, and dev-ai hosts five deployments (beta-boisestateai-dev, boisestateai-v2-dev, bsu-agentcore, dev-boisestateai-v2, nightly-mv) — so dev's platform figure and its reconciliation cover all of them. That's why dev shows a 24% reconciliation delta and prod would show 0.5%. Prod is a dedicated account and is sound apart from the excluded Aurora. Activating the Project tag fixes it; the row shape doesn't change when it lands.

The one thing this PR can't do for you: activating Project as a cost allocation tag needs org-management-account billing access. Since activation isn't retroactive, it's worth doing early regardless of when this merges.

Also fixed: two icons that rendered wrong

Utility classes on <ng-icon> don't apply, and I measured why: its :host{width:var(--ng-icon__size,1em)} is unlayered, so it outranks Tailwind's @layer utilities size-*; its colour rule sits in @layer ng-icon, registered after Tailwind's layers, resolving to currentColor. Measured size-5 rendering at 16px and text-state-warning-600 resolving to black, while the identical class on a plain <span> resolved correctly. Colour now lives on a wrapper, dimension on ng-icon's own [size] input. The status glyph uses -700/dark:-400 — measured 5.03 light / 8.52 dark.

Verification

Ran the sync Lambda end to end against dev-ai. August returned 519.02 platform + 13.56 inference + 203.74 excluded = $736.32 — exactly the account total measured independently. Then drove the UI against those real rows: all-in card, reconciliation warning, 19-service table, excluded footer.

Tests: 35 handler · 9 new CDK · 233 backend cost · full suites green — 9,631 backend (0 failures), 896 CDK, 3,701 SPA.

Spec: docs/specs/platform-cost-visibility.md

🤖 Generated with Claude Code