Design preview · not yet built

Usage — the analytics upgrade

Usage is the spend page — aggregates only: daily, by assistant, AI vs run cost. Run-by-run detail lives in Pulse Activity.

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, the tabbed Cost breakdown (Pulse table grammar, 2026-08-22), and an explicit empty state.

KPI values 26px/500 — never the 200-weight money focal Cost breakdown = .bd-table + By assistant │ AI actions tabs (2026-08-22 — expandable rows + grey bars retired) month/year picker = proposed daily · monthly · yearly toggle = shipped run log RETIRED 2026-08-22 — Usage is aggregates-only; run-by-run lives in Pulse Activity

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
MystFlo Platform Preview
· Peyton
Workspace
Support
Account
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
Set a budget — your safety line so a busy month never surprises you. Assistants pause when you hit it. Set a budget →
Cost breakdown
Assistant runs $31.40 · 76% AI actions $9.80 · 24% = Total cost $41.20
By assistant AI actions View run-by-run detail in Activity →
Assistant Runs Run fees AI actions Combined▼ % of total
Autumn retreat support #7Q1 142$8.52$2.84$11.3628%
Spring retreat booking #2K9 5$8.75—$8.7521%
Front desk bookings #6L4 44$5.65$0.55$6.2015%
All assistants 588$31.40$3.39$34.7984%
‹ PrevPage 1 of 2Next ›
% of total = share of this month’s $41.20. Standalone AI work (16%) lives on the AI actions tab.
ⓘ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).
  • Budget nudge MOVED here from Pulse Overview (2026-08-22 — Peyton, Pulse/Usage/Billing split): the no-budget safety-line strip (shipped at Pulse.tsx:2177) now sits under the spend chart — money-safety belongs with the aggregates page. It replaces the old “Monthly cap off · Set a cap →” hairline row: ONE budget affordance, and the language is safety line / budget, never “cap” (budget = safety line concept, billing lock). Shown only while no budget is set; with a budget set this slot shows the budget status row instead.
  • Proposed: "July 2026 ▾" month/year picker — today only the daily/monthly/yearly range exists, no specific-month scoping.
  • Identity (2026-08-23): Assistant column uses Pulse’s .id-chip #XYZ grammar (last 3 of assistants.display_id) — never the full ASST-… dump. Same chip as Pulse cards / Breakdown / Attention.
  • Cost breakdown REBUILT as Pulse’s table grammar (2026-08-22 — Peyton: “use the Pulse breakdown list as the standard”): the three stacked sections (free-form Cost-by-assistant rows · standalone AI-actions list · AI-vs-run split) collapse into ONE section — the shared split component as its 2-line summary, then a lit-underline sub-tab strip By assistant │ AI actions (playbook §3 grammar, same .act-tabs as Pulse Activity Layer-1), each tab a real .bd-table. Consistent columns replace the per-row metadata strings ($11.36 · 142 runs · 28% vs “no AI” vs “incl. AI $0.55” — no two rows parsed alike). The proposed EXPANDABLE rows are retired: Run fees / AI actions / Combined are flat COLUMNS, so the expansion had nothing left to reveal. The combined-attribution backend check stays open — same data, now two columns instead of a hidden panel.
  • Grey bars DROPPED: the per-row .bar-track carried no meaning beyond the % number beside it — decoration, not information. “% of total” is a sortable number column; the ONE proportional visual is the split bar in the section summary. Default sort = Combined ▼ (money page — biggest spend first); no severity rail and no status column (health is Pulse’s job; money rows are never tinted, C12).
  • Doorway repositioned: “View run-by-run detail in Activity →” rides the tab row, right-aligned on the same hairline — the section-doorway convention (Billing “Wallet activity ··· View all →”, Pulse “All activity →” 2026-08-22). Target unchanged: /pulse?tab=activity Assistant scope. Row click drills into Activity with the picker pre-set to that instance — the same contract as Pulse Breakdown (?tab=activity&filter_assistant=<id>, never ?assistant=).
  • No extra filter chips: the tabs ARE the source filter (assistant-tied vs standalone AI); time is already filtered by the period selector; status is irrelevant on a money table. Pagination = the platform Prev/Next convention, hidden when one page fits.
  • Run log RETIRED (2026-08-22 — Peyton sign-off, CPO duplication finding): the shipped “Run log” table (BillingUsage.tsx §5) comes OUT — Pulse Activity’s Assistant scope (pulse.html 4d) now does the per-run cost read better. Usage is aggregates-only: totals, trend chart, cost-by-assistant %, Runs+AI=Total split, invoice language. The “View run-by-run detail in Activity →” rowlink is the door — target /pulse?tab=activity (Assistant scope; never ?assistant=, that opens the detail modal). Metrics spec §0 amended to v1.13 in the same PR.
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.
Cost breakdown
Assistant runs $31.40 · 76% AI actions $9.80 · 24% = Total cost $41.20
By assistant AI actions
AI work not tied to an assistant — Brain & research. Assistant-tied AI stays in the By-assistant columns.
Action When Cost▼ % of total
Brain researchJul 16$2.506%
Read my siteJul 12$2.506%
Voice refineJul 08$1.413%
Standalone AI$6.4116%
1b — second tab, same grammar
  • Same section, tab switched — the split summary stays put above the strip so the 76/24 context never leaves the founder’s eye. Excerpt of frame 1’s page column; the shell around it is identical.
  • The old loose “AI actions · standalone” name+date list becomes the SAME .bd-table grammar: Action · When · Cost · % of total, ending in its own total row ($6.41 · 16%) — one table family across both tabs, one % denominator ($41.20).
  • The Activity doorway hides on this tab — its target is Activity’s Assistant scope, which has no standalone-AI rows. No invented Brain-scope door here; these are wallet AI actions, and their receipt-level home stays Billing.
  • These rows are individual actions (few per month), not aggregates — Usage’s aggregates-only rule refers to RUN detail (retired run log); standalone AI actions have no other in-page home.
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 ▾
July 2026 ✓
June 2026
May 2026
April 2026
View full year →
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.
MystFlo Platform Preview
· Peyton
Workspace
Support
Account
Usage
Daily Monthly Yearly July 2026 ▾proposed
July 2026 ✓
June 2026
May 2026
April 2026
View full year →
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
Set a budget — your safety line so a busy month never surprises you. Assistants pause when you hit it. Set a budget →
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.
MystFlo Platform Preview
Workspace
Support
Account
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
Set a budget — your safety line so a busy month never surprises you. Assistants pause when you hit it. Set a budget →
Cost breakdown
Assistant runs $31.40 · 76% AI actions $9.80 · 24% = Total cost $41.20
By assistant AI actions View run-by-run detail in Activity →
Assistant Runs Run fees AI actions Combined▼ % of total
Autumn retreat support #7Q1 142$8.52$2.84$11.3628%
Spring retreat booking #2K9 5$8.75—$8.7521%
Front desk bookings #6L4 44$5.65$0.55$6.2015%
All assistants 588$31.40$3.39$34.7984%
‹ PrevPage 1 of 2Next ›
% of total = share of this month’s $41.20. Standalone AI work (16%) lives on the AI actions tab.
ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.
Tablet 768 — the only tier where shell and content disagree
  • Shell = desktop: 768 is the app’s mobile breakpoint (use-mobile.tsx) — full header + rail render, rail collapsed to its 64px icon width.
  • Content = 2-col KPI grid — shipped BillingUsage.tsx is grid-cols-1 sm:grid-cols-2 lg:grid-cols-4; 768 sits between sm 640 and lg 1024, so four cards become a 2×2. Never a squeezed 4-up.
  • Cost table keeps Pulse .id-chip #XYZ grammar (same as desktop). Six columns may scroll inside .bd-scroll — the page never scrolls horizontally.
  • Activity door stays on the tab row (768 ≥ sm). 375 is the named-breakpoint drop to a full-width row.
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
Set a budget — your safety line. Assistants pause when you hit it. Set a budget →
Cost breakdown
Assistant runs $31.40 · 76% AI actions $9.80 · 24% = $41.20
By assistant AI actions
Assistant Runs Run fees AI actions Combined▼ % of total
Autumn retreat support #7Q1142$8.52$2.84$11.3628%
Spring retreat booking #2K95$8.75—$8.7521%
Front desk bookings #6L444$5.65$0.55$6.2015%
All assistants588$31.40$3.39$34.7984%
‹ PrevPage 1 of 2Next ›
ⓘ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.
  • Cost breakdown at 375 (2026-08-22, Peyton: scroll, not hide): same split summary (legend stacks) + same tab strip + same .bd-table — ALL SIX columns kept; the table (min-width:560px) scrolls sideways inside .bd-scroll to reach the fee/AI split. The scroll lives inside the table wrapper only — the PAGE never scrolls horizontally. The cut column edge at the frame’s right is the scroll affordance. Name cells stay one line (nowrap).
  • 375 identity (2026-08-23): the earlier omit of id chips at 375 is retired. One grammar with desktop / 768 / Pulse — nickname + .id-chip #XYZ. The chip is nowrap; extra width is paid by the existing sideways table scroll, not by dropping identity.
  • Doorway tier change: at 375 the Activity door drops off the tab row (no width) to a full-width row under the pagination — 44px touch target, named-breakpoint structure step (canon U8), not a floating link.
  • Same run-log retirement as desktop (2026-08-22) — the door targets Pulse Activity's Assistant scope, not an in-page log.
  • Budget nudge relocated from Pulse (2026-08-22) sits under the chart here too — full-width strip, safety-line copy, one budget affordance (the “Monthly cap” row is gone).
Usage
… scrolled to the Cost breakdown section — everything above (toggle, KPIs, chart, nudge) is frame 2 unchanged.
Cost breakdown
Assistant runs $31.40 · 76% AI actions $9.80 · 24% = $41.20
By assistant AI actions
AI work not tied to an assistant — Brain & research.
Action When Cost▼ % of total
Brain researchJul 16$2.506%
Read my siteJul 12$2.506%
Voice refineJul 08$1.413%
Standalone AI$6.4116%
ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.
2b — AI actions tab, 375
  • Full four columns fit at 375 — nothing hides. No Activity door on this tab (its target is Assistant scope); no pagination — a month has a handful of standalone actions.
3Empty state — no runs yet
Empty
MystFlo Platform Preview
· Peyton
Workspace
Support
Account
Usage
Daily Monthly Yearly
Cumulative spend this month
Total cost
$0.00
Assistant runs $0.00 · AI actions $0.00
Runs
0
this month
AI actions
$0.00
AI runs on MystFlo — paid per run
Wallet balance
$50.00
Spent this month $0.00
Spend over time
Daily spend — nothing yet this month
Set a budget — your safety line so a busy month never surprises you. Assistants pause when you hit it. Set a budget →
Cost breakdown
Assistant runs $0.00 AI actions $0.00 = Total cost $0.00
By assistant AI actions
Assistant Runs Run fees AI actions Combined▼ % of total
No spend yet Browse assistants →
Activate an assistant and its cost lands here — runs, AI, and share of total.
All assistants 0$0.00$0.00$0.00—
ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.
Desktop empty — keep the table chrome at zero (Pulse Breakdown empty pattern, 2026-08-22)
  • Same principle Peyton locked for Pulse Overview empty: the founder sees the REAL shell they’ll flip into — headers standing, one quiet tip row with the door (“No spend yet · Browse assistants →”, Pulse’s “No assistants yet · Browse assistants →” grammar), zero total row (% = “—”, undefined at $0 like Pulse’s Health “—”). Never a get-started swap, never blank space.
  • Supersedes the length>0 gating (and the centered empty-block proposal below): the Cost breakdown section renders at zero with its chrome — empty split track, zero legend, tabs standing. Pagination hidden (one page); the Activity doorway hides at zero (nothing to view — a door that opens onto an empty feed is a dead end).
  • KPI cards drop their sparklines at zero — Sparkline.tsx renders nothing for <2 points (archetype check 11); the chart keeps its axes with a flat baseline. Budget nudge stays — a budget is settable before the first run.
  • No Mark/Thread here — the V3 empty Mark’s one home is Pulse Overview’s Breakdown row (Mark once per view, and Usage’s zero state is reachable from the same session); text-only tip row keeps the money page quiet.
  • TWO empty variants (Peyton 2026-08-22) — gating is instance-existence, not spend: instances.length === 0 (never activated anything) → THIS frame’s row, “No spend yet · Browse assistants →” with the door. instances.length > 0 && monthCombined === 0 (has assistants, quiet month — incl. a past month picked in the period selector) → frame 3b’s quieter row, NO door (nothing to browse to — they already own assistants). Pulse’s one-quiet-line grammar (“Nothing logged yet.” / AC-PULSE-25) in both.
Cost breakdown
Assistant runs $0.00 AI actions $0.00 = Total cost $0.00
By assistant AI actions
Assistant Runs Run fees AI actions Combined▼ % of total
Nothing has run yet this month.
All assistants 0$0.00$0.00$0.00—
3b — the quieter variant, same chrome
  • Excerpt of the same page column as frame 3 — everything above the section (KPIs at zero, flat chart, nudge) is identical; only the tip row differs. Shown when the founder HAS assistants but the selected month has zero spend: one quiet line, Pulse’s empty-line grammar, no door — a Browse CTA here would sell to someone who already bought.
  • No per-assistant zero rows: an all-zeros row per assistant is noise, and Usage is spend-scoped — the instance inventory lives on Pulse Breakdown. Zero total row + “—” % stand in both variants.
MystFlo Platform Preview
Workspace
Support
Account
Usage
Daily Monthly Yearly
Cumulative spend this month
Total cost
$0.00
Assistant runs $0.00 · AI actions $0.00
Runs
0
this month
AI actions
$0.00
AI runs on MystFlo — paid per run
Wallet balance
$50.00
Spent this month $0.00
Spend over time
Daily spend — nothing yet this month
Set a budget — your safety line so a busy month never surprises you. Assistants pause when you hit it. Set a budget →
Cost breakdown
Assistant runs $0.00 AI actions $0.00 = Total cost $0.00
By assistant AI actions
Assistant Runs Run fees AI actions Combined▼ % of total
No spend yet Browse assistants →
Activate an assistant and its cost lands here — runs, AI, and share of total.
All assistants 0$0.00$0.00$0.00—
ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.
Tablet 768 empty — same chrome at zero as desktop
  • Same empty contract as desktop frame 3: headers standing, one quiet tip row + door, zero total row (% = “—”). 2×2 KPI grid, collapsed rail.
  • No identity chips here — there are no assistant rows to label.
Usage
Daily Monthly Yearly
Total cost
$0.00
Assistant runs $0.00 · AI actions $0.00
Runs
0
this month
AI actions
$0.00
AI runs on MystFlo — paid per run
Wallet balance
$50.00
Spent this month $0.00
Cost breakdown
Assistant runs $0.00 AI actions $0.00 = $0.00
By assistant AI actions
Assistant Runs Run fees AI actions Combined▼ % of total
No spend yet Browse assistants →
Activate an assistant and its cost lands here.
All assistants 0$0.00$0.00$0.00—
ⓘMystFlo platform costs only. App costs (WhatsApp, Stripe) are billed by your connected providers.
Empty state — table chrome at zero (updated 2026-08-22; supersedes the centered empty-block proposal)
  • Today zero-spend gets no empty state in the shipped build: chart renders a flat zero line and the cost section is gated on .length > 0. This frame SUPERSEDES that gating AND the earlier centered “No runs yet” block: the Cost breakdown keeps its chrome at zero — empty split track, zero legend, tabs, headers standing, one quiet tip row with the door (“No spend yet · Browse assistants →”, Pulse Breakdown’s empty grammar), zero total row (% = “—”).
  • The tip row’s door replaces the old .btn-primary Explore block — never a get-started swap on a metrics page (Pulse lock, 2026-08-18). Pagination and the Activity doorway hide at zero.
  • Same 6-column scroll table as frame 2 (Peyton: scroll, not hide) — the colspan tip row spans the visible width.
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.