DataMachineGroup

components/data/machine/Group.vue

Grid context for a band of DataMachines. Each child becomes a 4-row subgrid (title · hairline · description · body), so a card without a description — or beside one whose description or title wraps — keeps its value row aligned with its siblings. A row no card fills collapses to zero, so cards stay as short as they would be alone. The body (value row, #below, provenance, spark) is one cell: a tall device in one card never pushes a sibling's footer away from its value.

Sessions
52
1running
51completed
0failed
1 running
Tokens
24.1
m
elena · Claude Code
35.7
elena · Claude Code
23.6
wei · Claude Code
21.6
est. $331.44 · top 3 = 24 % of cost
Spend
Billed where reported, list-price estimate otherwise
$
331
elena-mbp
70.3
priya-x1
57.1
wei-tower
37.6
top 3 = 50 % of spend
Scenarios
no card has a description — the row collapses
Servers
5
5 observed · 0 configured-only
Calls
113
top 3 = 68 % of calls
Tools exposed
11
top 3 = 64 % of tools
a title that wraps — hairlines and values still line up
Users
23
Users needing attention this week
4
2 seat holders unseen
Teams
Teams with at least one member
6
4 cards, 2 × 2 below md — rowGap 24
Requests
1.3
k
across 3 harnesses
Tokens
Excluding cache
8.2
m
Spend
$
212
billed where reported
Accounts
3
device-only card with a tall list — siblings unaffected
User Coverage
87
%
20 seen · 23 known
Active
People with measured usage
17
of 20 seen
Needing attention
  • Priya Natarajan
  • Tomas Lindqvist
  • Marcus Feld
  • Elena Park
  • Wei Chen
  • +3 more
components/data/machine/Group.vue

Usage

<DataMachineGroup :rowGap = "32" > Content here </DataMachineGroup>

Props

PropTypeDefaultDescription
rowGapNumber32px between wrapped rows of cards. A subgrid inherits its parent's row gap between its own rows, so the group's row-gap is always 0 (a gap-y-* class is overridden); the gap is each card's top margin, and the group pulls itself up by the same amount so the first row sits flush.

Slots

SlotDescription
defaultDataMachine cards. A non-DataMachine child takes one grid row and breaks placement — make it a device-only DataMachine (no val, content in #right) instead.

Related

Qpoint Brand Style Guide