Design preview · not yet built

Usage — the analytics upgrade

Usage is the spend page — daily, by assistant, AI vs run cost.

SizePortrait scrolls 375 · sideways is a slide deckNotes

Design brief — overview · scope · journey (closed)

PR 2 proposal on top of the Billing simplification — Usage as its own nav destination: shipped BillingUsage.tsx restyled, plus proposed month picker, expandable per-assistant rows, and an explicit empty state.

KPI values 26px/500 — never the 200-weight money focal expandable period rows = proposed month/year picker = proposed daily · monthly · yearly toggle = shipped

The widths drawn here are samples of a fluid continuum, not the only states that exist — content (spacing, type, gaps, card/column widths) scales continuously between them, each clamp reading a named container. Structure (rail, row↔stack, grid columns) steps only at sm 640 · md 768 · lg 1024; radius, hairlines, and pills never scale. Kit: design-canon.md U8.

Reading order in this document: § Desktop journey first — every desktop frame, full flow, journey order — then § Mobile journey — 375 below it — every mobile frame, same order, laid out side by side as a wrapping grid (never a tall single-file column of phone screens). Two sections, never interleaved — a review-document convention only (this repo's design-canon.md § Mockup review reading order). Mobile 375px is still designed and scored FIRST in the /design ritual (kit canon U5/U8) — the two rules never conflate.

Part I · Active — build now

Usage

1 · Desktop — Usage page, full shell

Workspace

Explore

Brain

Pulse

Team

Connects

Support

Wishlist

Feedback

Support

FAQ

Account

Billing

Usage

Daily Monthly Yearly July 2026 ▾proposed

Cumulative spend this month

Total cost

$41.20 ↑ 18%

Assistant runs $31.40 · AI actions $9.80

Runs

588

this month

AI actions

$9.80

AI runs on MystFlo — paid per run

Wallet balance

$126.40

Spent this month $41.20

Spend over time

Daily spend, July 2026 — switch to Yearly and this becomes monthly bars

Monthly cap offSet a cap →

Cost by assistantexpandable rows — proposed

Autumn retreat supportASST-7Q1 ▾$11.36 · 142 runs · 28%

On-Brand Support

Run fees · 142 runs$8.52

AI actions$2.84

Combined$11.36

Spring retreat bookingASST-2K9 ▸$8.75 · 5 runs · no AI · 21%

Retreat Booking

Front desk bookingsASST-6L4 ▸$6.20 · 44 runs · incl. AI $0.55 · 15%

Direct Booking

View full run log →

AI actions · standalone

AI work — Brain & research, not tied to an assistant.

Brain research Jul 16$2.50

Read my site Jul 12$2.50

Voice refine Jul 08$1.41

AI actions total $6.41 · 16%

AI vs run cost

Assistant runs $31.40 · 76% AI actions $9.80 · 24%

ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.

Desktop — shipped BillingUsage.tsx restyled + PR 2 proposals

Shipped, restyled: KPI row (Total cost / Runs / AI actions / Wallet balance — MetricStatCard), daily/monthly/yearly toggle, "AI vs run cost" split bar + legend wording, external-apps notice.
Surface language only: hairline rows over surface-hairline boxes; KPI values pinned to the 26px/500 tier lock (T1124).
Proposed: "July 2026 ▾" month/year picker — today only the daily/monthly/yearly range exists, no specific-month scoping.
Proposed: expandable per-assistant period rows with run-fee/AI split — combined-attribution math needs a backend check (open question, not a decided data model).

Open call — 3 vs 4 KPI cards (not decided here)

Product recommended THREE headline cards (AI folds into total's sub-line + split bar); this artifact keeps FOUR (AI actions as its own card, original T1124 set).
Same open question flagged on billing-canon.html.

4 · Period selector — interaction detail

Period selector — shipped toggle + proposed picker

Daily/monthly/yearly segmented toggle = shipped (Button group in BillingUsage.tsx), restyled to a pill segment.
"July 2026 ▾" month/year picker = net-new (proposed): pins KPI row + chart to one specific past month.

Closed — default

Daily Monthly Yearly July 2026 ▾

Range = Daily, scoped to the current month — the common case, zero taps.

Default on load: Daily + the current month — matches today's shipped default exactly.

Open — month picker

Daily Monthly Yearly July 2026 ▾

Picking a past month keeps the toggle on Daily; picking "View full year" switches the toggle to Yearly for you — one control drives the other, never two contradicting states.

Pill opens a short list: current + 3 prior months, then the "View full year" escape into Yearly.
No custom date range (billing cycles are calendar months).
Interaction zoom only — the same open state is drawn in place on the full Usage page directly below (canon "full screen, not a component snippet").

Toggle switched — Yearly

Daily Monthly Yearly

Yearly hides the month picker entirely — there's nothing to pin to a single month once you're looking at trailing-5-years bars.

Month picker disappears under Yearly — never a disabled control.

4b · Period selector open — in place on the full Usage page

Workspace

Explore

Brain

Pulse

Team

Connects

Support

Wishlist

Feedback

Support

FAQ

Account

Billing

Usage

Daily Monthly Yearly July 2026 ▾proposed

Cumulative spend this month

Total cost

$41.20 ↑ 18%

Assistant runs $31.40 · AI actions $9.80

Runs

588

this month

AI actions

$9.80

AI runs on MystFlo — paid per run

Wallet balance

$126.40

Spent this month $41.20

Spend over time

Daily spend, July 2026 — switch to Yearly and this becomes monthly bars

Monthly cap offSet a cap →

4b — the open picker, in real page context

Same dropdown as the interaction zoom above, drawn where it actually lives — overlaying the KPI grid on the full Usage shell. Previously the open state existed only as a bare 420px snippet with no page context (canon "full screen, not a component snippet", retrofit 2026-08-06).
Dropdown overlays content, never pushes it — position:absolute, z-index above the KPI cards, page beneath unchanged.
Mobile presentation of the open picker (sheet vs dropdown at 375) is undecided — flagged as mockup debt with the picker proposal itself, not invented here.

768 not yet drawn for this flow. Desktop and 375 are the contract.

MystFlo Platform

Preview

Usage

Daily Monthly Yearly July 2026 ▾proposed

Total cost

$41.20 ↑ 18%

Assistant runs $31.40 · AI actions $9.80

Runs

588

this month

AI actions

$9.80

AI runs on MystFlo — paid per run

Wallet balance

$126.40

Spent this month $41.20

Spend over time

Daily spend, July 2026

Monthly cap offSet a cap →

Cost by assistant

Autumn retreat supportASST-7Q1 ▾$11.36 · 28%

On-Brand Support · 142 runs

Run fees$8.52

AI actions$2.84

Combined$11.36

Spring retreat bookingASST-2K9 ▸$8.75 · 21%

Retreat Booking · 5 runs · no AI

View full run log →

AI actions · standalone

AI work — Brain & research, not tied to an assistant.

Brain research Jul 16$2.50

Read my site Jul 12$2.50

Voice refine Jul 08$1.41

AI actions total $6.41 · 16%

AI vs run cost

Assistant runs $31.40 · 76% AI actions $9.80 · 24%

ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.

Mobile 375px

One column: KPI cards become the same .kpi hairline-row shape as Billing — never a squeezed 3-up grid at 375px.
Segmented toggle goes full-width, touch-height.
Expanded row's "Combined" line stays legible without the desktop side-by-side percentage.

3Empty state — no runs yet

Empty

This step is 375. No 1180 drawing — use the Mobile size.

768 not yet drawn for this flow. Desktop and 375 are the contract.

MystFlo Platform

Usage

Daily Monthly Yearly

Total cost

$0.00

Assistant runs $0.00 · AI actions $0.00

Runs

this month

AI actions

$0.00

AI runs on MystFlo — paid per run

Wallet balance

$50.00

Spent this month $0.00

No runs yet

Activate an assistant and its spend shows up here — daily, by assistant, and AI vs run cost.

Explore assistants →

ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.

Empty state — proposed, not shipped today

Today zero-spend gets no empty state: chart renders a flat zero line; "Cost by assistant" / "AI vs run cost" gated on .length > 0 and silently don't render.
Proposal: one clear empty-state block — copy line + the one fixing action (Explore assistants).

Part II · Future — build later

Judgment call for Peyton: the month/year period picker is marked “proposed, not yet built” in the CSS only (invisible in the rendered frame). Recommendation: add an in-frame Future marker or move the picker here. Nothing moved this pass.