state-hub/dashboard/src/token-cost.md

---
title: Token Cost
---

```js
import {API} from "./components/config.js";
const POLL = 60_000;
```

```js
// Live poll for token data
const tokenState = (async function*() {
  while (true) {
    let data = {by_repo: [], by_workstream: [], top_tasks: [], by_model: [], total_events: 0}, ok = false;
    try {
      const r = await fetch(`${API}/token-events/?limit=1000`);
      ok = r.ok;
      if (ok) {
        const events = await r.json();
        data = buildSummary(events);
      }
    } catch {}
    yield {data, ok, ts: new Date()};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
```

```js
function buildSummary(events) {
  const byRepo = {}, byWs = {}, byModel = {}, byTask = {};
  for (const e of events) {
    const tot = (e.tokens_in || 0) + (e.tokens_out || 0);
    if (e.repo_id) {
      byRepo[e.repo_id] = byRepo[e.repo_id] || {scope_id: e.repo_id, tokens_in: 0, tokens_out: 0, event_count: 0};
      byRepo[e.repo_id].tokens_in += e.tokens_in || 0;
      byRepo[e.repo_id].tokens_out += e.tokens_out || 0;
      byRepo[e.repo_id].event_count++;
    }
    if (e.workstream_id) {
      byWs[e.workstream_id] = byWs[e.workstream_id] || {scope_id: e.workstream_id, tokens_in: 0, tokens_out: 0, event_count: 0};
      byWs[e.workstream_id].tokens_in += e.tokens_in || 0;
      byWs[e.workstream_id].tokens_out += e.tokens_out || 0;
      byWs[e.workstream_id].event_count++;
    }
    const model = e.model || "unknown";
    byModel[model] = (byModel[model] || 0) + tot;
    if (e.task_id) {
      byTask[e.task_id] = byTask[e.task_id] || {task_id: e.task_id, tokens_in: 0, tokens_out: 0};
      byTask[e.task_id].tokens_in += e.tokens_in || 0;
      byTask[e.task_id].tokens_out += e.tokens_out || 0;
    }
  }
  const sortDesc = obj => Object.entries(obj)
    .map(([k,v]) => typeof v === "number" ? {id: k, tokens_total: v} : {...v, tokens_total: (v.tokens_in||0)+(v.tokens_out||0)})
    .sort((a,b) => b.tokens_total - a.tokens_total);
  return {
    by_repo: sortDesc(byRepo),
    by_workstream: sortDesc(byWs),
    by_model: Object.entries(byModel).map(([model,tokens_total]) => ({model,tokens_total})).sort((a,b)=>b.tokens_total-a.tokens_total),
    top_tasks: sortDesc(byTask).slice(0,10),
    total_events: events.length,
  };
}
```

```js
const td = tokenState.data ?? {by_repo:[], by_workstream:[], top_tasks:[], by_model:[], total_events:0};
const _ok = tokenState.ok ?? false;
const _ts = tokenState.ts;
```

# Token Cost

```js
const _liveEl = html`<div style="font-size:0.8rem;color:${_ok?'var(--theme-foreground-focus)':'red'}">
  ● ${_ok ? `Live · ${_ts?.toLocaleTimeString()} · ${td.total_events} events` : "API offline"}
</div>`;
display(_liveEl);
```

## By Repo

```js
if (td.by_repo.length === 0) {
  display(html`<p style="color:var(--theme-foreground-muted)">No token events recorded yet.</p>`);
} else {
  display(Plot.plot({
    title: "Token consumption by repo",
    marginLeft: 160,
    width: Math.min(900, width),
    x: {label: "Tokens", tickFormat: "~s"},
    y: {label: null},
    color: {legend: true, domain: ["tokens_in", "tokens_out"], range: ["#4e79a7","#f28e2b"]},
    marks: [
      Plot.barX(
        td.by_repo.flatMap(r => [
          {repo: r.scope_id.slice(0,8), type: "tokens_in", value: r.tokens_in},
          {repo: r.scope_id.slice(0,8), type: "tokens_out", value: r.tokens_out},
        ]),
        {x: "value", y: "repo", fill: "type", tip: true}
      ),
    ],
  }));
}
```

## By Workplan

```js
const wsRows = td.by_workstream.slice(0, 20);
if (wsRows.length === 0) {
  display(html`<p style="color:var(--theme-foreground-muted)">No workstream data yet.</p>`);
} else {
  display(Inputs.table(wsRows, {
    columns: ["scope_id", "tokens_in", "tokens_out", "tokens_total", "event_count"],
    header: {
      scope_id: "Workstream ID",
      tokens_in: "Tokens In",
      tokens_out: "Tokens Out",
      tokens_total: "Total",
      event_count: "Events",
    },
    format: {
      scope_id: d => d.slice(0,8) + "…",
      tokens_in: d => d.toLocaleString(),
      tokens_out: d => d.toLocaleString(),
      tokens_total: d => d.toLocaleString(),
    },
    width: {scope_id: 120, tokens_in: 110, tokens_out: 110, tokens_total: 110, event_count: 80},
  }));
}
```

## By Model

```js
if (td.by_model.length === 0) {
  display(html`<p style="color:var(--theme-foreground-muted)">No model data yet.</p>`);
} else {
  display(Plot.plot({
    title: "Token consumption by model",
    marginLeft: 200,
    width: Math.min(700, width),
    x: {label: "Total tokens", tickFormat: "~s"},
    marks: [
      Plot.barX(td.by_model, {x: "tokens_total", y: "model", fill: "#4e79a7", tip: true}),
    ],
  }));
}
```

## Top 10 Tasks by Tokens

```js
if (td.top_tasks.length === 0) {
  display(html`<p style="color:var(--theme-foreground-muted)">No task-level data yet.</p>`);
} else {
  display(Inputs.table(td.top_tasks, {
    columns: ["task_id", "tokens_in", "tokens_out", "tokens_total"],
    header: {task_id: "Task ID", tokens_in: "In", tokens_out: "Out", tokens_total: "Total"},
    format: {
      task_id: d => d.slice(0,8) + "…",
      tokens_in: d => d.toLocaleString(),
      tokens_out: d => d.toLocaleString(),
      tokens_total: d => d.toLocaleString(),
    },
  }));
}
```