Cost attribution row

Operator-grade table row for cost attribution. Same shape works whether the subject is an agent, a mission, a tool, a customer, or a project. Carries token spend, dollar spend, share of total, and a period-over-period delta.

Included in the single kansho full pack. Components are not offered as separate installs.

Attribution table — May 2026 to date

SubjectTokens · shareSpendvs last 30d

Plan & dispatchagentclaude-opus-4-7 · 412k tokens · 18 runs412k$198.4048% of $412.18+12%

Embedderagentvoyage-3 · 1.24M tokens · indexer1.2M$124.8030% of $412.18+34%

M-2014 · Compact audit logmissionmission · 4 days · 7 contributors184k$42.6010% of $412.18-8%

postgres.executetooltool · 1,842 calls84k$28.187% of $412.18+4%

Vault rotatoragentclaude-haiku-4-5 · daily18k$12.203% of $412.180%

Audit writeragentclaude-sonnet-4-6 · 4 postmortems88k$6.002% of $412.18-21%

Narrow container reflow

Each row carries its own @container, so below ~30rem the share bar and delta fold under the name (Vitaly 221) with no consumer cooperation. Drag the handle to widen.

Plan & dispatchagentclaude-opus-4-7 · 412k tokens · 18 runs412k$198.4048% of $412.18+12%

Embedderagentvoyage-3 · 1.24M tokens · indexer1.2M$124.8030% of $412.18+34%

M-2014 · Compact audit logmissionmission · 4 days · 7 contributors184k$42.6010% of $412.18-8%

postgres.executetooltool · 1,842 calls84k$28.187% of $412.18+4%

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Cost attribution row

components/control-plane/cost-attribution-row.tsx

Component documentation

Cost attribution row

components/control-plane/cost-attribution-row.tsx

Purpose

Shows one cost attribution bucket with tokens, spend, share, and period delta.

Appropriate use

Use in spend breakdowns where each row may open a deeper cost view.

Example

components/control-plane/cost-attribution-row.tsx has a representative live example in the "Attribution table — May 2026 to date" section on /components/cost-attribution.

States

Kinds are agent, mission, tool, customer, and project; detail, initials, total, delta, and row interaction are optional.

API and props

CostAttributionRow accepts a CostAttributionEntry plus total, onClick, and className; the entry carries id, label, detail, kind, tokens, cost, share, and delta.

Dependencies

Direct imports are React, Lucide icons, AgentDot, number formatting, InteractiveContainer, and cn.

Accessibility

Label, tokens, cost, share, and positive/negative/no-change delta are textual; interactive rows use the shared keyboard container.

Limitations

It does not aggregate costs, calculate shares or deltas, clamp numeric ranges, sort rows, or choose currency.

Source

Source: components/control-plane/cost-attribution-row.tsx.

Full pack

components/control-plane/cost-attribution-row.tsx is documented at /components/cost-attribution and installs only through the single Kansho full pack; no individual component install is offered.