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

---
title: Token Cost
---

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

```js
// Fetch token events, by-repo summary, workstreams, and tasks in parallel
const tokenState = (async function*() {
  while (true) {
    let byRepo = [], events = [], wsMap = {}, taskMap = {}, ok = false;
    try {
      const [r1, r2, r3, r4] = await Promise.all([
        fetch(`${API}/token-events/by-repo/`),
        fetch(`${API}/token-events/?limit=1000`),
        fetch(`${API}/workstreams/`),
        fetch(`${API}/tasks/`),
      ]);
      ok = r1.ok && r2.ok;
      if (ok) {
        byRepo = await r1.json();
        events = await r2.json();
      }
      if (r3.ok) {
        const wsList = await r3.json();
        for (const w of wsList) wsMap[w.id] = w;
      }
      if (r4.ok) {
        const taskList = await r4.json();
        for (const t of taskList) taskMap[t.id] = t;
      }
    } catch {}
    yield {byRepo, events, wsMap, taskMap, ok, ts: new Date()};
    await new Promise(res => setTimeout(res, POLL));
  }
})();
```

```js
function buildSummary(events) {
  const byWs = {}, byModel = {}, byTask = {};
  for (const e of events) {
    const tot = (e.tokens_in || 0) + (e.tokens_out || 0);
    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_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,
  };
}

function nameCell(name, fullName) {
  const s = String(name ?? fullName ?? "—");
  const full = String(fullName ?? name ?? "—");
  const el = document.createElement("span");
  el.title = full;
  el.textContent = s.length > 80 ? s.slice(0, 80) + "…" : s;
  return el;
}
```

```js
const byRepo   = tokenState.byRepo   ?? [];
const summary  = buildSummary(tokenState.events ?? []);
const wsMap    = tokenState.wsMap    ?? {};
const taskMap  = tokenState.taskMap  ?? {};
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()} · ${summary.total_events} events` : "API offline"}
</div>`;
display(_liveEl);
```

## By Repo

```js
if (byRepo.length === 0) {
  display(html`<p style="color:var(--theme-foreground-muted)">No token events with repo association 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(
        byRepo.flatMap(r => [
          {repo: r.repo_slug, type: "tokens_in",  value: r.tokens_in},
          {repo: r.repo_slug, type: "tokens_out", value: r.tokens_out},
        ]),
        {x: "value", y: "repo", fill: "type", tip: true}
      ),
    ],
  }));

  display(Inputs.table(byRepo.map((r, i) => ({...r, _ref: i})), {
    columns: ["_ref", "repo_slug", "tokens_in", "tokens_out", "tokens_total", "event_count"],
    header: {
      _ref: "REF",
      repo_slug: "Repo",
      tokens_in: "Tokens In",
      tokens_out: "Tokens Out",
      tokens_total: "Total",
      event_count: "Events",
    },
    format: {
      _ref: (_, i) => refCell(i + 1, "repos", byRepo[i].repo_slug),
      repo_slug: d => nameCell(d, d),
      tokens_in: d => d.toLocaleString(),
      tokens_out: d => d.toLocaleString(),
      tokens_total: d => d.toLocaleString(),
    },
    width: {_ref: 50, repo_slug: 160, tokens_in: 110, tokens_out: 110, tokens_total: 110, event_count: 80},
  }));
}
```

## By Workplan

```js
const wsRows = summary.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.map((r, i) => ({...r, _ref: i})), {
    columns: ["_ref", "scope_id", "tokens_in", "tokens_out", "tokens_total", "event_count"],
    header: {
      _ref: "REF",
      scope_id: "Workstream",
      tokens_in: "Tokens In",
      tokens_out: "Tokens Out",
      tokens_total: "Total",
      event_count: "Events",
    },
    format: {
      _ref: (_, i) => refCell(i + 1, "workstreams", wsRows[i].scope_id),
      scope_id: d => {
        const ws = wsMap[d];
        return nameCell(ws?.title ?? ws?.slug, d);
      },
      tokens_in: d => d.toLocaleString(),
      tokens_out: d => d.toLocaleString(),
      tokens_total: d => d.toLocaleString(),
    },
    width: {_ref: 50, scope_id: 200, tokens_in: 110, tokens_out: 110, tokens_total: 110, event_count: 80},
  }));
}
```

## By Model

```js
if (summary.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(summary.by_model, {x: "tokens_total", y: "model", fill: "#4e79a7", tip: true}),
    ],
  }));
}
```

## Top 10 Tasks by Tokens

```js
if (summary.top_tasks.length === 0) {
  display(html`<p style="color:var(--theme-foreground-muted)">No task-level data yet.</p>`);
} else {
  display(Inputs.table(summary.top_tasks.map((r, i) => ({...r, _ref: i})), {
    columns: ["_ref", "task_id", "tokens_in", "tokens_out", "tokens_total"],
    header: {_ref: "REF", task_id: "Task", tokens_in: "In", tokens_out: "Out", tokens_total: "Total"},
    format: {
      _ref: (_, i) => refCell(i + 1, "tasks", summary.top_tasks[i].task_id),
      task_id: d => {
        const task = taskMap[d];
        return nameCell(task?.title, d);
      },
      tokens_in: d => d.toLocaleString(),
      tokens_out: d => d.toLocaleString(),
      tokens_total: d => d.toLocaleString(),
    },
    width: {_ref: 50, task_id: 240},
  }));
}
```