KQ-2092 · CREW/USAGE

Crew Usage

A team usage table for an assistant with a row per member — requests, tokens, spend, a thirty-day sparkline on one shared scale and a thin strip of what they use it for — where switching the metric morphs every sparkline at once on springs.glide while the rows re-rank on glide and their rank numbers roll on springs.snap. Focusing or clicking a member opens their strip into a full breakdown whose measured height unfolds on glide as its segments grow in a cascade. It is a real grid with one roving cell: Up and Down move members, Left and Right move cells, Home and End jump, Enter opens the member, Space or focus opens the breakdown, Escape closes it and M cycles the metric.

KQ-2092 · CREW/USAGE

Fernworks · Design

Last 30 days · Sep 18 – Oct 17

6 of 7 members active ·2,297requests · mostly writing

MemberRequestsTokensSpendLast 30 daysUsed for

1Priya NatarajanContent designer727

2Mara LindqvistDesign lead504

3Tomás ReyesProduct designer374

4Wren HallowayDesign engineer315

5Ines OkaforResearcher241

6Jun ItoProduct designer136

–Ada BrennanResearcher0No usage

requests · 7 members · top Priya Natarajan · open none

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/crew-usage

Props

members: CrewMember[]; default defaultCrewMembers; The team: { id, name, role, initials? }. Rows rank by the metric; members with no usage sort last.
roles: CrewRole[]; default defaultCrewRoles; Role names for the role ids members carry: { id, label }.
usage: Record<string, CrewSeries>; default defaultCrewUsage; Daily usage per member id, oldest first: { requests, spend, tokens } as number arrays. The window is the series' length.
tasks: CrewTask[]; default defaultCrewTasks; What the assistant is used for, in strip order: { id, label }.
mix: Record<string, Record<string, number>>; default defaultCrewMix; Requests per task per member id over the window.
metric / defaultMetric: "requests" | "spend" | "tokens"; default — / "requests"; The metric the table ranks and draws by, controlled or initial.
onMetricChange: (metric) => void; default —; Fires from the switch or the M key with the new metric.
expanded / defaultExpanded: string | null; default — / null; The member whose breakdown is open, controlled or initial.
onExpandedChange: (id: string | null) => void; default —; Fires when focus or a click opens a breakdown, or with null when it closes.
onOpenMember: (id, member) => void; default —; Enter on a row, or Open in a breakdown.
onExport: (metric, rows: CrewRow[]) => void; default —; Export was pressed, with the rows in rank order. Omit it and the button is not drawn.
canSeeCosts: boolean; default true; Whether the viewer may see costs. Without it spend reads Hidden and cannot rank.
status: "ready" | "loading" | "error"; default "ready"; Usage arrived, is on its way, or failed. A team with no usage shows the empty state.
onRetry: () => void; default —; Try again was pressed after usage failed to load.
now: number; default defaultCrewNow; The last day of the window (ms); day labels count back from it.
title: string; default "Fernworks · Design"; The table's heading.
subtitle: string; default "Last 30 days · Sep 18 – Oct 17"; Under the heading; by default the window's dates.
formatMoney: (amount: number) => string; default "$1,284.50", by hand; How money is printed.
sparkStyle: "line" | "area" | "bars"; default "line"; How a sparkline is drawn: a line with an end dot, an area, or day bars.
density: "compact" | "cozy" | "roomy"; default "cozy"; Row height, padding and sparkline height.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; Sparklines, the metric pill and the hue the task colours turn from: a named pigment or any CSS colour.
disabled: boolean; default false; Read only: the metric cannot change and nothing opens.
className: string; default —; Classes for the panel.

Prop	Type	Default	Description
members	CrewMember[]	defaultCrewMembers	The team: { id, name, role, initials? }. Rows rank by the metric; members with no usage sort last.
roles	CrewRole[]	defaultCrewRoles	Role names for the role ids members carry: { id, label }.
usage	Record<string, CrewSeries>	defaultCrewUsage	Daily usage per member id, oldest first: { requests, spend, tokens } as number arrays. The window is the series' length.
tasks	CrewTask[]	defaultCrewTasks	What the assistant is used for, in strip order: { id, label }.
mix	Record<string, Record<string, number>>	defaultCrewMix	Requests per task per member id over the window.
metric / defaultMetric	"requests" \| "spend" \| "tokens"	— / "requests"	The metric the table ranks and draws by, controlled or initial.
onMetricChange	(metric) => void	—	Fires from the switch or the M key with the new metric.
expanded / defaultExpanded	string \| null	— / null	The member whose breakdown is open, controlled or initial.
onExpandedChange	(id: string \| null) => void	—	Fires when focus or a click opens a breakdown, or with null when it closes.
onOpenMember	(id, member) => void	—	Enter on a row, or Open in a breakdown.
onExport	(metric, rows: CrewRow[]) => void	—	Export was pressed, with the rows in rank order. Omit it and the button is not drawn.
canSeeCosts	boolean	true	Whether the viewer may see costs. Without it spend reads Hidden and cannot rank.
status	"ready" \| "loading" \| "error"	"ready"	Usage arrived, is on its way, or failed. A team with no usage shows the empty state.
onRetry	() => void	—	Try again was pressed after usage failed to load.
now	number	defaultCrewNow	The last day of the window (ms); day labels count back from it.
title	string	"Fernworks · Design"	The table's heading.
subtitle	string	"Last 30 days · Sep 18 – Oct 17"	Under the heading; by default the window's dates.
formatMoney	(amount: number) => string	"$1,284.50", by hand	How money is printed.
sparkStyle	"line" \| "area" \| "bars"	"line"	How a sparkline is drawn: a line with an end dot, an area, or day bars.
density	"compact" \| "cozy" \| "roomy"	"cozy"	Row height, padding and sparkline height.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	Sparklines, the metric pill and the hue the task colours turn from: a named pigment or any CSS colour.
disabled	boolean	false	Read only: the metric cannot change and nothing opens.
className	string	—	Classes for the panel.