---
title: Token Event
---

```js
import {API} from "../components/config.js";
import {fieldRow} from "../components/field-help.js";
```

```js
const eventId = observable.params.id;
const raw = await fetch(`${API}/token-events/${eventId}`)
  .then(r => r.ok ? r.json() : r.json().then(e => ({error: e.detail ?? `HTTP ${r.status}`})))
  .catch(e => ({error: String(e)}));
```

```js
if (raw.error) {
  display(html`<div style="color:red;padding:1rem">⚠️ ${raw.error}</div>`);
} else {
  const shortId = raw.id ? raw.id.slice(0, 8) + "…" : eventId;
  display(html`<h1 style="font-size:1.1rem;margin-bottom:0.25rem">Token Event · <code>${shortId}</code></h1>`);
  display(html`<p style="margin-top:0"><a href="/token-cost">← Token Cost</a></p>`);

  const FIELD_ORDER = [
    "id","tokens_in","tokens_out","tokens_total",
    "note","model","agent","session_id",
    "task_id","workstream_id","repo_id",
    "ref_type","ref_id","created_at",
  ];

  const rows = FIELD_ORDER.map(k => fieldRow(k, raw[k] ?? null));
  for (const k of Object.keys(raw)) {
    if (!FIELD_ORDER.includes(k)) rows.push(fieldRow(k, raw[k]));
  }

  display(html`<table style="border-collapse:collapse;width:100%;max-width:640px">
    <colgroup><col style="width:160px"><col></colgroup>
    <tbody>${rows}</tbody>
  </table>`);
}
```