Phase 3
Now + Trend — Variations

Source: qdash /organization/teams after c103 plan 03 Part A (Fable fc0b32c8) — c103 plan 03 Part B / c100 trend thread, 2026-10-01 · siblings Lever Strip · Tile Map · Matrix · plan cycles/c100.landing-pages/trend-variations-plan.md

"Now" is done well today (§0 is the Teams page as it shipped). This page is about the history beside it: twenty-two ways to draw a trend, the roll-down, the table cell and the breakdown over time, and a lab that forces every form into every size so you can see where each one breaks. Volume over perfection. Every drawing cross-foots with its number; a day that wasn't collected is a gap or an em-dash, never a zero. The seed world is real Meridian data from :7882 — on it, anything the server doesn't serve per day says so.

Metric
SubjectAll teams Grouping
World
Window
Trend
Δ basis
State
Gaps
Volatility
Ink
Labels
Seed snapshot · 2026-10-01 · Meridian on :7882, captured 2026-10-01 · 81 served days to 2026-07-01 · 4 teams · Spend over 7d: $331 (7 of 7 days known) · cross-foot clean
§0

Now (control) — the Teams page as it shipped

Part A's Coverage · Spend band and table, replicated on this world: the Spend tile rolls down every team (cap 6 + rest, 03.3), its spark is the per-day sum of the shown teams, rows sort by spend, and the Spend trend column is qdash Spark (line + arrow + the last day's dollars; a zero day prints $0). It always shows cost and follows the pill — the levers above that change the trend don't reach the control. Under 24h every trend is an em-dash.

Coverage
People with a sensor on their endpoint
100
%
11covered
3partial
0not seen
14 of 14 seen by a sensor · 3 with detected-only installs
Spend
Estimated from measured tokens
$
331
Payments
$156.22
Frontend
$69.86
Data
$63.06
Platform
$42.30
24.0M tokens
Team
People
Active
Tokens
Spend
Spend trend
Payments4 of 44 of 48.08M$156.22▲ $39.86
Frontend3 of 33 of 35.34M$69.86▲ $21.65
Data3 of 33 of 35.59M$63.06▼ $0
Platform4 of 44 of 44.95M$42.30▼ $4.56

Seed snapshot captured 2026-10-01 — served totals: fleet $331.44 · Payments $156.22 · Frontend $69.86 · Data $63.06 · Platform $42.30 — Σ of the captured days matches each

§1

Form catalogue — F0–F21, plus Activity's history row

Every form at card size (S2) on the page metric and subject (Spend · All teams). Each says what question it answers, what it needs (served / §B / fixture-only), and shows its honest empty state when the world can't feed it. The qdash Spark's arrow is first day vs last and its label is the last day's value — set F5 beside F1 (window over window) and rule which one a "▼ $12" should mean.

F0Number only (control)served (/api/costs?team=)
Answers how much now · Built from DataMetricValue
7 days · Σ $331.
F1Number + DataMetricTrendserved (/api/costs?team=)
Answers up or down, by how much · Built from layer, DataMachine delta
Δ basis: last known day vs first (qdash Spark's arrow).
F2Number + % change + toneserved (/api/costs?team=)
Answers is the change good · Built from DataMetricTrend unit="%" + healthMode
Δ basis: last known day vs first (qdash Spark's arrow).
F3Sparkline (line)served (/api/costs?team=)
Answers shape of the window · Built from DataMetricSpark fillColor="none"
7 days · Σ $331.
F4Sparkline (area)served (/api/costs?team=)
Answers shape + volume · Built from DataMetricSpark
7 days · Σ $331.
F5Spark + arrow + latestserved (/api/costs?team=)
Answers shape + where it ended · Built from LandingTrendSpark (qdash Spark replica)
Arrow = last known day vs the first; label = the last day ($66.07).
F6Spark + prior-window ghostprior window: not served (03.4) — projected
Answers this window vs last · Built from LandingTrendDraw ghost
7 days · Σ $331.
F7Spark + min / max / last dotsserved (/api/costs?team=)
Answers range + current · Built from LandingTrendDraw dots
7 days · Σ $331.
F8Spark in a peer bandpeer band: client-side from served team series
Answers unusual or normal · Built from LandingTrendDraw band (p25–p75 of teams)
7 days · Σ $331.
F9Daily micro-barsserved (/api/costs?team=)
Answers day-by-day volume, gaps visible · Built from LandingTrendDraw bars (DataHistoryGraph is AH)
7 days · Σ $331.
F10Bar + prior-window tickprior window: not served (03.4) — projected
Answers ranked now + moved since · Built from tick over a bar (DataRankedBars-like)
7 days · Σ $331.
F11Slope (prior → now)prior window: not served (03.4) — projected
Answers net movement, rank swaps · Built from LandingTrendDraw slope (every team)
7 days · Σ $331.
F12Calendar heat stripserved (/api/costs?team=)
Answers rhythm, weekends, gaps · Built from LandingTrendDraw heat
7 days · Σ $331.
F13Horizon chartserved (/api/costs?team=)
Answers dense trend at tiny height · Built from LandingTrendDraw horizon
7 days · Σ $331.
F14Stacked areaserved — one /api/costs?team= per team
Answers breakdown over time · Built from LandingTrendDraw stack
7 days · Σ $331.
F15100 % stacked per weekserved — one /api/costs?team= per team
Answers mix shift · Built from DataSegmentBar per week
7 days · Σ $331.
F16Small multiples (shared y)served — one /api/costs?team= per team
Answers which part moved · Built from LandingTrendDraw multiples
7 days · Σ $331.
F17Bump chart (weekly rank)served — one /api/costs?team= per team
Answers who overtook whom · Built from LandingTrendDraw bump
7 days · Σ $331.
F18Nested ink (type = hue, install = shade)needs §B — not served per day
Answers grouping: Harness + Harness type · Built from F14 with hue families
Empty state: no harness × install split per day on this world.
F19Total ⇄ sparkline toggleserved (/api/costs?team=)
Answers now, then shape on demand · Built from DataMachine fadeKey
7 days · Σ $331.
F20Breakdown + chart pairserved — one /api/costs?team= per team
Answers see breakdown, see chart over time · Built from DataRankedBars + F14, linked hover
7 days · Σ $331.
F21Delta-only glyph (▲12 %)served (/api/costs?team=)
Answers direction only · Built from DataMetricTrend alone
Δ basis: last known day vs first (qdash Spark's arrow).
AHActivity's history row, 2026-10-01Mark's lean, 2026-10-01served — one /api/costs?team= per team
Answers which parts, per day, with a hover per day · Built from DataHistoryGraph (legendWrap=false, @hover — uncommitted layer props) + DataHoverBreakdown
7 days · Σ $331.
§2

Roll-downs with history — the Spend tile's rows (P2)

Mark's first ask. Today's rows are R1 (now only). Each variant is shown in its real seat — the Spend DataMachine at card width (S2) — then at drawing width (S3, 200) and as a 160 px roll-down row (S4). Rows cap at 6 + rest (03.3); hover a row for its days.

R1Bars (today)— DataRankedBars thin, scale max — now only
Spend
by team · 7d
$
331
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
4 rows · Σ rows $331 = tile
S3 · 200
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
S4 · 160 × 14
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
R2Bar + inline spark— the DataMetric_TinyInline pattern: value, bar, a spark per row
Spend
by team · 7d
$
331
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
4 rows · Σ rows $331 = tile
S3 · 200
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
S4 · 160 × 14
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
R3Bar + DataMetricTrend— Δ per row on the Δ-basis lever
Spend
by team · 7d
$
331
Payments$156
+91%
Frontend$69.86—
Data$63.06
-100%
Platform$42.30
-43%
4 rows · Σ rows $331 = tile
S3 · 200
Payments$156
+91%
Frontend$69.86—
Data$63.06
-100%
Platform$42.30
-43%
S4 · 160 × 14
Payments$156
+91%
Frontend$69.86—
Data$63.06
-100%
Platform$42.30
-43%
R4Bar + prior-window tick— F10: amber tick where the prior window ended
Spend
by team · 7d
$
331
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
4 rows · Σ rows $331 = tile
S3 · 200
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
S4 · 160 × 14
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
R5Shared-y small multiples— F16: the bar becomes the row's line
Spend
by team · 7d
$
331
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
4 rows · Σ rows $331 = tile
S3 · 200
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
S4 · 160 × 14
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
R6Rank-change arrows— rank now vs the window before (▲ = climbed)
Spend
by team · 7d
$
331
Payments$156=
Frontend$69.86▲1
Data$63.06▼1
Platform$42.30=
4 rows · Σ rows $331 = tile
S3 · 200
Payments$156=
Frontend$69.86▲1
Data$63.06▼1
Platform$42.30=
S4 · 160 × 14
Payments$156=
Frontend$69.86▲1
Data$63.06▼1
Platform$42.30=
R7Stack above the rows— the card's drawing is history, the rows are now — Σ stack = Σ rows
Spend
by team · 7d
$
331
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
4 rows · Σ rows $331 = tile
S3 · 200
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
S4 · 160 × 14
Payments$156
Frontend$69.86
Data$63.06
Platform$42.30
§3

Table cells — the Spend column (P3)

The listing's cell, seven ways, on the same rows. Merged puts the number and the drawing in one cell; separate gives the drawing its own column (Part A's choice). S5 is 120 × 28; step down to 90 × 20 or up to 160 × 32.

Cell
Layout
TeamNumberNumber + ΔF5 Spark (Part A)F9 micro-barsF10 bar + tickF12 heat stripF13 horizon
Payments
$156
$156
+91%
$156
▲ $39.86
$156
$156
$156
$156
Frontend
$69.86
$69.86
$69.86
▲ $21.65
$69.86
$69.86
$69.86
$69.86
Data
$63.06
$63.06
-100%
$63.06
▼ $0
$63.06
$63.06
$63.06
$63.06
Platform
$42.30
$42.30
-43%
$42.30
▼ $4.56
$42.30
$42.30
$42.30
$42.30
§4

Breakdown over time — see breakdown, see chart over time

"How to show trend? cost, tokens, models, providers — see breakdown, see chart over time, consider grouping." The grouping lever picks the pair: team → user · harness type → install · provider → model. Every drawing here sums to $331 — the subject's 7-day total. Activity's history row (Mark, 2026-10-01: sparklines out, top 3 per day, a hover per day) is the AH card.

F14Stacked area— how much, made of what, each day
Payments $156Frontend $69.86Data $63.06Platform $42.30Σ $331 = drawing ✓
F15100 % per week— the mix, without volume
Payments $156Frontend $69.86Data $63.06Platform $42.30Σ $331 = drawing ✓
F16Small multiples— which part moved
Payments $156Frontend $69.86Data $63.06Platform $42.30Σ $331 = drawing ✓
F17Bump chart— weekly rank — who overtook whom
Payments $156Frontend $69.86Data $63.06Platform $42.30Σ $331 = drawing ✓
F18Nested ink— harness type = hue family, install = shade (always the harness pair)
F20Breakdown + chart— hover the chart: the bars become that day
Payments $156Frontend $69.86Data $63.06Platform $42.30Σ $331 = drawing ✓
AHActivity's history row (2026-10-01)— top 3 per day, hover a day
Payments $156Frontend $69.86Data $63.06Platform $42.30Σ $331 = drawing ✓
§5

Toggles and switchers — now, then the shape on demand

F19 per card (⇄ in each title row) and per page (the switch below), using DataMachine's fadeKey so the swap fades rather than snaps. The last three cards use c100's title-switcher rule: the subject is the title (#title select), the parameter sits in #title-right (the trend window), with reserve holding the value slot so nothing moves.

Page
Payments
Spend · 7d
156
▲ $39.86
Δ $19.00 · last known day vs first (qdash Spark's arrow)
Frontend
Spend · 7d
70
▲ $21.65
Δ $21.65 · last known day vs first (qdash Spark's arrow)
Data
Spend · 7d
63
▼ $0
Δ $1.21 · last known day vs first (qdash Spark's arrow)
Spend
Follow the pill
All teams · 7d
331
▲ $66.07
7 days · Σ line = number
Tokens
Fixed 90d
All teams · 7d
24
m
▲ 6.6M
number: 7d · line: 81 days — they don't cross-foot (Option C)
Spend by model
Follow the pill
All teams · 7d
331
▲ $66.07
7 days · Σ line = number
§6

Degradation lab — every form, forced into every size

Rows are forms, columns the size ladder (S2 card 520 × 200 → S6 a glyph in a sentence, 48 × 14; S1, the 1100 × 380 hero, behind its toggle), or one free size from the sliders. Each cell carries three auto-checks: D direction readable (≥ 2 px of travel first → last), M magnitude readable (a value or axis is printed), R driver readable (composition parts ≥ 3 px). ✓ holds · ✗ breaks · · doesn't apply. Hover a ✗ for why.

Columns
167 ✓ · 88 ✗ on this world
FormS2 520 × 200
card
S3 200 × 60
DataMachine drawing
S4 160 × 14
roll-down row
S5 120 × 28
table cell
S6 48 × 14
glyph in a sentence
F0
Number only (control)
$331
D·M✓R·
$331
D·M✓R·
$331
D·M✓R·
$331
D·M✓R·
Spend
$331
this 7d
D·M✓R·
F1
Number + DataMetricTrend
$331
+35.98
D✓M✓R·
$331
+35.98
D✓M✓R·
$331
+35.98
D✓M✓R·
$331
+35.98
D✓M✓R·
Spend
$331
this 7d
D✓M✓R·
F2
Number + % change + tone
$331
+120%
D✓M✓R·
$331
+120%
D✓M✓R·
$331
+120%
D✓M✓R·
$331
+120%
D✓M✓R·
Spend
$331
this 7d
D✓M✓R·
F3
Sparkline (line)
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F4
Sparkline (area)
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F5
Spark + arrow + latest
▲ $66.07
D✓M✓R·
▲ $66.07
D✓M✓R·
▲ $66.07
D✓M✓R·
▲ $66.07
D✓M✓R·
Spend
this 7d
D✓M✗R·
F6
Spark + prior-window ghost
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F7
Spark + min / max / last dots
$92.76$10.38
D✓M✓R·
$92.76$10.38
D✓M✓R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F8
Spark in a peer band
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F9
Daily micro-bars
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F10
Bar + prior-window tick
$331
D✓M✓R·
$331
D✓M✓R·
$331
D✓M✓R·
$331
D✓M✓R·
Spend
this 7d
D✓M✗R·
F11
Slope (prior → now)
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F12
Calendar heat strip
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F13
Horizon chart
D✓M✗R·
D✓M✗R·
D✓M✗R·
D✓M✗R·
Spend
this 7d
D✓M✗R·
F14
Stacked area
D✓M✗R✓
D✓M✗R✓
D✓M✗R✗
D✓M✗R✓
Spend
this 7d
D✓M✗R✗
F15
100 % stacked per week
w1
D✓M✗R✓
w1
D✓M✗R✓
D✓M✗R✗
D✓M✗R✓
Spend
this 7d
D✓M✗R✗
F16
Small multiples (shared y)
PaymentsFrontendDataPlatform
D✓M✗R✓
PaymentsFrontendDataPlatform
D✓M✗R✓
D✓M✗R✓
D✓M✗R✓
Spend
this 7d
D✓M✗R✓
F17
Bump chart (weekly rank)
PaymentsFrontendDataPlatform
D✓M✗R✓
D✓M✗R✓
D✓M✗R✓
D✓M✗R✓
Spend
this 7d
D✓M✗R✓
F18
Nested ink (type = hue, install = shade)
—
D✓M✗R✓
—
D✓M✗R✓
—
D✓M✗R✗
—
D✓M✗R✓
Spend
—
this 7d
D✓M✗R✗
F19
Total ⇄ sparkline toggle
D✓M✓R·
D✓M✓R·
D✓M✓R·
D✓M✓R·
Spend
this 7d
D✓M✓R·
F20
Breakdown + chart pair
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
7-day totals
D✓M✓R✓
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
7-day totals
D✓M✓R✓
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
D✓M✗R✗
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
D✓M✗R✓
Spend
Payments
$156
Frontend
$69.86
Data
$63.06
Platform
$42.30
this 7d
D✓M✗R✗
F21
Delta-only glyph (▲12 %)
+120%
D✓M·R·
+120%
D✓M·R·
+120%
D✓M·R·
+120%
D✓M·R·
Spend
+120%
this 7d
D✓M·R·
AH
Activity's history row, 2026-10-01
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Payments
Frontend
Data
D✓M✗R✓
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Payments
Frontend
Data
D✓M✗R✓
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Payments
Frontend
Data
D✓M✗R✗
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Payments
Frontend
Data
D✓M✗R✓
Spend
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Payments
Frontend
Data
this 7d
D✓M✗R✗
§7

Ledger — keep / maybe / kill, and what's served today

FormBest placementBreaks atReadWhy
F0 Number only (control)every placement — the baselineholds to S6keepNow is done well; every other form is measured against it.
F1 Number + DataMetricTrendP1 tile headlineholds to S6maybeWindow over window isn't served (03.4); the layer prints "+12", not "$12", and hides a zero change.
F2 Number + % change + toneP1, P3 merged cellholds to S6maybeTone reads at a glance; % of a tiny prior is noise, and it shares F1's basis question.
F3 Sparkline (line)P1 under the value, P3holds to S6keepSurvives down to S5; the layer spark has no null path — a gap falls to the design-local drawer.
F4 Sparkline (area)P1 hero, §5 toggleholds to S6maybeMore ink than F3 for little more answer; good as the toggle's "shape".
F5 Spark + arrow + latestP3 trend column (shipped in Part A)S6 (M)keepShipped; honest em-dash. Rule the semantics: first-vs-last arrow + last day's value beside a window total.
F6 Spark + prior-window ghostP1, P5holds to S6maybeNeeds 2× the window per day (not served for 30d); the best answer to "vs last week" when it exists.
F7 Spark + min / max / last dotsP5 detail band, S1S4 (M)maybeOnly reads with labels at hero size; noise below S2.
F8 Spark in a peer bandP5 team detailholds to S6maybeStrong on a team page; meaningless for the fleet and with < 3 teams.
F9 Daily micro-barsP3, P2 rowsholds to S6keepThe only single-series form where a not-collected day and a $0 day look different at S5.
F10 Bar + prior-window tickP2 roll-down rowsS6 (M)keepKeeps the roll-down's now-bar and adds history in 2 px; needs the prior window (projected under M.4).
F11 Slope (prior → now)P6 landing cardholds to S6maybeRank swaps jump out at S2; collapses to a hairline below S3.
F12 Calendar heat stripP3, P5holds to S6keepWeekends and gaps read even at 120 × 14; magnitude doesn't.
F13 Horizon chartP3 at 40+ rowsholds to S6killSurvives S4–S5 as promised, but nobody reads folded bands without training.
F14 Stacked areaP5 history band, S1S4 (R)keep"See breakdown, see chart over time" in one drawing; needs §B per day.
F15 100 % stacked per weekP5 (models, providers)S4 (R)maybeAnswers mix, hides volume; pair with F14 or a total.
F16 Small multiples (shared y)P2 rows (R5), P5holds to S6keepWhich part moved, without stacking distortion; height per part runs out fast.
F17 Bump chart (weekly rank)P5 models / providersholds to S6maybeModel churn is a real story (new models appear); weekly ranks need ≥ 3 weeks.
F18 Nested ink (type = hue, install = shade)P5 harness bandS4 (R)maybeThe grouping reads; more than 3 installs per type turns to mud.
F19 Total ⇄ sparkline toggleP1 tiles, §5holds to S6maybeCheap space; hides history behind a click nobody makes in a screenshot.
F20 Breakdown + chart pairP1 hero, P5S4 (MR)keepNow on the left, history on the right, one crosshair — the clearest answer to the brief at S1–S2.
F21 Delta-only glyph (▲12 %)P7 sentenceholds to S6killDirection without magnitude or basis; the layer hides 0 so flat reads as missing.
AH Activity's history row, 2026-10-01P5 history row (Activity), P1 below a bandS4 (R)keepWhere Mark is leaning: top 3 per day, "per day" in the description, a hover per day. A not-collected day draws as an empty column — the same as zero.
keep 10 · maybe 11 · kill 2 — my read, for Mark to overrule. "Breaks at" is the first ladder size where a check that held at S2 fails, on the current world.
Served today (M.4)
M1 Cost — per team: served (/api/costs?team=&period=) · per user: no
M2 Tokens — per team: served (same series carries tokens)
M3 Sessions — client byDay over /api/sessions (200-row cap) — not captured in the seed snapshot
M4 Models — window totals only (by_model) — per day needs /api/history (§B), projected under M.4
M5 Providers — window totals only (by_provider) — per day needs §B
M6 Harness — window totals only (by_agent); ?agent= × team fan-out possible, not taken (03.6)
The five questions
Useful? Does the form answer a question someone on the Teams page asks — "is Payments' spend running away?" — or only decorate the number?
Clear? Read it in the §6 S4 / S5 columns: can you say up or down without hovering?
Precise? Is the basis on the page — first vs last day, window over window, vs median — or does the reader guess what ▲ means?
Necessary? Would the table without it lose anything? F21 and F13 fail here first.
Beautiful? Does it sit beside DataRankedBars and DataMachine without a new visual language?
Cross-foot (live)
Every stacked drawing on this page, Σ parts vs the drawing vs the tile.
§1/§4 Spend · All teams (stack)Σ $331 = $331
§1 Spend · All teams (line vs tile)Σ line $331 = $331
§2 tile Spend · all teams (stack)Σ $331 = $331
§2 Σ roll-down rows vs tile$331 vs $331
§2 R7 stack vs Σ rows$331 vs $331
§0 Spend tile vs table$331.44 vs $331.44
§0 tile spark vs tile$331.44 vs $331.44

Qpoint Brand Style Guide