oh-my-opencode-dashboard 0.1.4 → 0.1.5

package/src/App.tsx

@@ -63,6 +63,30 @@ type TimeSeries = {
   series: TimeSeriesSeries[];
 };
 
+type TokenUsageTotals = {
+  input: number;
+  output: number;
+  reasoning: number;
+  cacheRead: number;
+  cacheWrite: number;
+  total: number;
+};
+
+type TokenUsageRow = {
+  model: string;
+  input: number;
+  output: number;
+  reasoning: number;
+  cacheRead: number;
+  cacheWrite: number;
+  total: number;
+};
+
+type TokenUsage = {
+  totals: TokenUsageTotals;
+  rows: TokenUsageRow[];
+};
+
 function toNonNegativeFinite(value: unknown): number {
   if (typeof value !== "number") return 0;
   if (!Number.isFinite(value)) return 0;
@@ -344,6 +368,7 @@ type DashboardPayload = {
   backgroundTasks: BackgroundTask[];
   mainSessionTasks: BackgroundTask[];
   timeSeries: TimeSeries;
+  tokenUsage: TokenUsage;
   raw: unknown;
 };
 
@@ -494,6 +519,10 @@ const FALLBACK_DATA: DashboardPayload = {
     anchorMs: 0,
     serverNowMs: 0,
   }),
+  tokenUsage: {
+    totals: { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+    rows: [],
+  },
   raw: {
     ok: false,
     hint: "API not reachable yet. Using placeholder data.",
@@ -685,6 +714,67 @@ function toDashboardPayload(json: unknown): DashboardPayload {
   const tasks = (anyJson.backgroundTasks ?? anyJson.background_tasks ?? []) as unknown;
   const mainTasks = (anyJson.mainSessionTasks ?? anyJson.main_session_tasks ?? []) as unknown;
 
+  const tokenUsageDefault: TokenUsage = {
+    totals: { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+    rows: [],
+  };
+
+  function parseTokenUsage(input: unknown): TokenUsage {
+    if (!input || typeof input !== "object") return tokenUsageDefault;
+    const rec = input as Record<string, unknown>;
+
+    const rowsRaw = rec.rows;
+    const rows: TokenUsageRow[] = Array.isArray(rowsRaw)
+      ? rowsRaw
+          .map((row): TokenUsageRow | null => {
+            if (!row || typeof row !== "object") return null;
+            const r = row as Record<string, unknown>;
+
+            const model = toNonEmptyString(r.model ?? r.id ?? r.key);
+            if (!model) return null;
+
+            const input = toNonNegativeCount(r.input ?? r.input_tokens);
+            const output = toNonNegativeCount(r.output ?? r.output_tokens);
+            const reasoning = toNonNegativeCount(r.reasoning ?? r.reasoning_tokens);
+            const cacheRead = toNonNegativeCount(r.cacheRead ?? r.cache_read ?? r.cache_read_tokens);
+            const cacheWrite = toNonNegativeCount(r.cacheWrite ?? r.cache_write ?? r.cache_write_tokens);
+
+            const totalKey = r.total ?? r.total_tokens ?? r.totalTokens;
+            const totalFromServer = totalKey === undefined || totalKey === null ? null : toNonNegativeCount(totalKey);
+            const total = typeof totalFromServer === "number" ? totalFromServer : input + output + reasoning + cacheRead + cacheWrite;
+
+            return { model, input, output, reasoning, cacheRead, cacheWrite, total };
+          })
+          .filter((r): r is TokenUsageRow => r !== null)
+      : [];
+
+    const totalsRaw = rec.totals;
+    const totalsObj = totalsRaw && typeof totalsRaw === "object" ? (totalsRaw as Record<string, unknown>) : null;
+
+    const inputTotal = toNonNegativeCount(totalsObj?.input ?? totalsObj?.input_tokens);
+    const outputTotal = toNonNegativeCount(totalsObj?.output ?? totalsObj?.output_tokens);
+    const reasoningTotal = toNonNegativeCount(totalsObj?.reasoning ?? totalsObj?.reasoning_tokens);
+    const cacheReadTotal = toNonNegativeCount(totalsObj?.cacheRead ?? totalsObj?.cache_read ?? totalsObj?.cache_read_tokens);
+    const cacheWriteTotal = toNonNegativeCount(totalsObj?.cacheWrite ?? totalsObj?.cache_write ?? totalsObj?.cache_write_tokens);
+
+    const totalKey = totalsObj?.total ?? totalsObj?.total_tokens ?? totalsObj?.totalTokens;
+    const totalFromServer = totalKey === undefined || totalKey === null ? null : toNonNegativeCount(totalKey);
+    const total = typeof totalFromServer === "number"
+      ? totalFromServer
+      : inputTotal + outputTotal + reasoningTotal + cacheReadTotal + cacheWriteTotal;
+
+    const totals: TokenUsageTotals = {
+      input: inputTotal,
+      output: outputTotal,
+      reasoning: reasoningTotal,
+      cacheRead: cacheReadTotal,
+      cacheWrite: cacheWriteTotal,
+      total,
+    };
+
+    return { totals, rows };
+  }
+
   function parsePlanSteps(stepsInput: unknown): Array<{ checked: boolean; text: string }> {
     if (!Array.isArray(stepsInput)) return [];
     
@@ -752,6 +842,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
   const steps = parsePlanSteps(plan.steps);
 
   const timeSeries = normalizeTimeSeries(anyJson.timeSeries, Date.now());
+  const tokenUsage = parseTokenUsage(anyJson.tokenUsage ?? anyJson.token_usage);
 
   return {
     mainSession: {
@@ -774,6 +865,7 @@ function toDashboardPayload(json: unknown): DashboardPayload {
     backgroundTasks,
     mainSessionTasks,
     timeSeries,
+    tokenUsage,
     raw: json,
   };
 }
@@ -926,6 +1018,48 @@ export default function App() {
     return JSON.stringify(data.raw, null, 2);
   }, [data.raw]);
 
+  const tokenUsageRowsSorted = React.useMemo(() => {
+    const rows = Array.isArray(data.tokenUsage?.rows) ? data.tokenUsage.rows : [];
+    const sorted = rows.slice();
+    sorted.sort((a, b) => {
+      const aTotal =
+        typeof a.total === "number" && Number.isFinite(a.total)
+          ? a.total
+          : a.input + a.output + a.reasoning + a.cacheRead + a.cacheWrite;
+      const bTotal =
+        typeof b.total === "number" && Number.isFinite(b.total)
+          ? b.total
+          : b.input + b.output + b.reasoning + b.cacheRead + b.cacheWrite;
+      return bTotal - aTotal;
+    });
+    return sorted;
+  }, [data.tokenUsage]);
+
+  const tokenUsageTotalsForUi = React.useMemo((): TokenUsageTotals => {
+    const base = data.tokenUsage?.totals;
+    if (!base) return { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, total: 0 };
+
+    const baseIsAllZero =
+      base.input === 0 &&
+      base.output === 0 &&
+      base.reasoning === 0 &&
+      base.cacheRead === 0 &&
+      base.cacheWrite === 0 &&
+      base.total === 0;
+    if (!baseIsAllZero) return base;
+
+    const sums = { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0 };
+    for (const r of data.tokenUsage?.rows ?? []) {
+      sums.input += toNonNegativeCount(r?.input);
+      sums.output += toNonNegativeCount(r?.output);
+      sums.reasoning += toNonNegativeCount(r?.reasoning);
+      sums.cacheRead += toNonNegativeCount(r?.cacheRead);
+      sums.cacheWrite += toNonNegativeCount(r?.cacheWrite);
+    }
+    const total = sums.input + sums.output + sums.reasoning + sums.cacheRead + sums.cacheWrite;
+    return { ...sums, total };
+  }, [data.tokenUsage]);
+
   React.useEffect(() => {
     let alive = true;
 
@@ -1250,6 +1384,59 @@ export default function App() {
             </article>
           </section>
 
+          <section className="card">
+            <div className="cardHeader">
+              <h2>Token usage</h2>
+              <span className="badge">{data.tokenUsage.rows.length}</span>
+            </div>
+
+            <div className="tableWrap">
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>MODEL</th>
+                    <th>INPUT</th>
+                    <th>OUTPUT</th>
+                    <th>REASONING</th>
+                    <th>CACHE.READ</th>
+                    <th>CACHE.WRITE</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td className="mono">TOTAL</td>
+                    <td className="mono">{tokenUsageTotalsForUi.input}</td>
+                    <td className="mono">{tokenUsageTotalsForUi.output}</td>
+                    <td className="mono">{tokenUsageTotalsForUi.reasoning}</td>
+                    <td className="mono">{tokenUsageTotalsForUi.cacheRead}</td>
+                    <td className="mono">{tokenUsageTotalsForUi.cacheWrite}</td>
+                  </tr>
+
+                  {tokenUsageRowsSorted.length === 0 ? (
+                    <tr>
+                      <td colSpan={6} className="muted" style={{ padding: 16 }}>
+                        No token usage detected yet.
+                      </td>
+                    </tr>
+                  ) : null}
+
+                  {tokenUsageRowsSorted.map((r) => (
+                    <tr key={r.model}>
+                      <td className="mono" title={r.model}>
+                        {r.model}
+                      </td>
+                      <td className="mono">{r.input}</td>
+                      <td className="mono">{r.output}</td>
+                      <td className="mono">{r.reasoning}</td>
+                      <td className="mono">{r.cacheRead}</td>
+                      <td className="mono">{r.cacheWrite}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </section>
+
           <section className="card">
             <div className="cardHeader">
               <h2>Main session tasks</h2>

package/src/app-payload.test.ts

@@ -4,7 +4,7 @@ import { toDashboardPayload } from "./App"
 describe('toDashboardPayload', () => {
   it('should preserve planProgress.steps from server JSON', () => {
     // #given: server JSON with planProgress.steps
-    const serverJson = {
+    const serverJson: unknown = {
       mainSession: {
         agent: "sisyphus",
         currentTool: "dashboard_start",
@@ -262,4 +262,109 @@ describe('toDashboardPayload', () => {
       },
     ])
   })
+
+  it('should preserve tokenUsage from server JSON', () => {
+    type TokenUsage = {
+      totals: {
+        input: number
+        output: number
+        reasoning: number
+        cacheRead: number
+        cacheWrite: number
+        total: number
+      }
+      rows: Array<{
+        model: string
+        input: number
+        output: number
+        reasoning: number
+        cacheRead: number
+        cacheWrite: number
+        total: number
+      }>
+    }
+    type DashboardPayloadWithTokenUsage = ReturnType<typeof toDashboardPayload> & {
+      tokenUsage?: TokenUsage
+    }
+
+    // #given: server JSON with token usage totals and rows
+    const tokenUsageKey = "tokenUsage"
+    const serverJson: Record<string, unknown> = {
+      mainSession: {
+        agent: "sisyphus",
+        currentTool: "dashboard_start",
+        currentModel: "anthropic/claude-opus-4-5",
+        lastUpdatedLabel: "just now",
+        session: "test-session",
+        statusPill: "busy",
+      },
+    }
+
+    serverJson[tokenUsageKey] = {
+      totals: {
+        input: 120,
+        output: 340,
+        reasoning: 56,
+        cacheRead: 12,
+        cacheWrite: 8,
+        total: 536,
+      },
+      rows: [
+        {
+          model: "anthropic/claude-opus-4-5",
+          input: 100,
+          output: 300,
+          reasoning: 50,
+          cacheRead: 10,
+          cacheWrite: 5,
+          total: 465,
+        },
+        {
+          model: "openai/gpt-5.2",
+          input: 20,
+          output: 40,
+          reasoning: 6,
+          cacheRead: 2,
+          cacheWrite: 3,
+          total: 71,
+        },
+      ],
+    }
+
+    // #when: converting to dashboard payload
+    const payload = toDashboardPayload(serverJson)
+    const payloadWithTokenUsage = payload as DashboardPayloadWithTokenUsage
+
+    // #then: tokenUsage should be preserved with correct shape
+    expect(payloadWithTokenUsage.tokenUsage).toEqual({
+      totals: {
+        input: 120,
+        output: 340,
+        reasoning: 56,
+        cacheRead: 12,
+        cacheWrite: 8,
+        total: 536,
+      },
+      rows: [
+        {
+          model: "anthropic/claude-opus-4-5",
+          input: 100,
+          output: 300,
+          reasoning: 50,
+          cacheRead: 10,
+          cacheWrite: 5,
+          total: 465,
+        },
+        {
+          model: "openai/gpt-5.2",
+          input: 20,
+          output: 40,
+          reasoning: 6,
+          cacheRead: 2,
+          cacheWrite: 3,
+          total: 71,
+        },
+      ],
+    })
+  })
 })

package/src/ingest/token-usage-core.test.ts

@@ -0,0 +1,205 @@
+import { describe, expect, it } from "vitest"
+import { aggregateTokenUsage } from "./token-usage-core"
+
+describe("token usage aggregateTokenUsage", () => {
+  it("aggregates assistant-only token usage", () => {
+    // #given
+    const metas = [
+      {
+        id: "msg_1",
+        role: "assistant",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+        tokens: {
+          input: 10,
+          output: 5,
+          reasoning: 2,
+          cache: { read: 1, write: 3 },
+        },
+      },
+      {
+        id: "msg_2",
+        role: "user",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+        tokens: {
+          input: 99,
+          output: 99,
+          reasoning: 99,
+          cache: { read: 99, write: 99 },
+        },
+      },
+    ]
+
+    // #when
+    const result = aggregateTokenUsage(metas)
+
+    // #then
+    expect(result.rows.length).toBe(1)
+    expect(result.rows[0]?.model).toBe("openai/gpt-5.2")
+    expect(result.totals).toEqual({
+      input: 10,
+      output: 5,
+      reasoning: 2,
+      cacheRead: 1,
+      cacheWrite: 3,
+      total: 21,
+    })
+  })
+
+  it("defaults missing tokens to zeros", () => {
+    // #given
+    const metas = [
+      {
+        id: "msg_1",
+        role: "assistant",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+      },
+    ]
+
+    // #when
+    const result = aggregateTokenUsage(metas)
+
+    // #then
+    expect(result.rows).toEqual([
+      {
+        model: "openai/gpt-5.2",
+        input: 0,
+        output: 0,
+        reasoning: 0,
+        cacheRead: 0,
+        cacheWrite: 0,
+        total: 0,
+      },
+    ])
+    expect(result.totals.total).toBe(0)
+  })
+
+  it("uses unknown/unknown when model is missing", () => {
+    // #given
+    const metas = [
+      {
+        id: "msg_1",
+        role: "assistant",
+        tokens: {
+          input: 1,
+          output: 2,
+          reasoning: 3,
+          cache: { read: 4, write: 5 },
+        },
+      },
+    ]
+
+    // #when
+    const result = aggregateTokenUsage(metas)
+
+    // #then
+    expect(result.rows[0]?.model).toBe("unknown/unknown")
+  })
+
+  it("totals equal the sum of per-model rows", () => {
+    // #given
+    const metas = [
+      {
+        id: "msg_1",
+        role: "assistant",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+        tokens: {
+          input: 1,
+          output: 2,
+          reasoning: 3,
+          cache: { read: 4, write: 5 },
+        },
+      },
+      {
+        id: "msg_2",
+        role: "assistant",
+        providerID: "anthropic",
+        modelID: "claude",
+        tokens: {
+          input: 10,
+          output: 20,
+          reasoning: 30,
+          cache: { read: 40, write: 50 },
+        },
+      },
+    ]
+
+    // #when
+    const result = aggregateTokenUsage(metas)
+
+    // #then
+    const summed = result.rows.reduce(
+      (acc, row) => ({
+        input: acc.input + row.input,
+        output: acc.output + row.output,
+        reasoning: acc.reasoning + row.reasoning,
+        cacheRead: acc.cacheRead + row.cacheRead,
+        cacheWrite: acc.cacheWrite + row.cacheWrite,
+        total: acc.total + row.total,
+      }),
+      { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, total: 0 }
+    )
+    expect(result.totals).toEqual(summed)
+  })
+
+  it("dedupes by message id", () => {
+    // #given
+    const metas = [
+      {
+        id: "msg_1",
+        role: "assistant",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+        tokens: { input: 3, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+      },
+      {
+        id: "msg_1",
+        role: "assistant",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+        tokens: { input: 9, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+      },
+    ]
+
+    // #when
+    const result = aggregateTokenUsage(metas)
+
+    // #then
+    expect(result.totals.input).toBe(3)
+  })
+
+  it("clamps invalid token values to zero", () => {
+    // #given
+    const metas = [
+      {
+        id: "msg_1",
+        role: "assistant",
+        providerID: "openai",
+        modelID: "gpt-5.2",
+        tokens: {
+          input: -5,
+          output: "7",
+          reasoning: Number.NaN,
+          cache: { read: -1, write: 3 },
+        },
+      },
+    ]
+
+    // #when
+    const result = aggregateTokenUsage(metas)
+
+    // #then
+    expect(result.rows[0]).toEqual({
+      model: "openai/gpt-5.2",
+      input: 0,
+      output: 0,
+      reasoning: 0,
+      cacheRead: 0,
+      cacheWrite: 3,
+      total: 3,
+    })
+  })
+})

package/src/ingest/token-usage-core.ts

@@ -0,0 +1,113 @@
+import { extractModelString } from "./model"
+
+export type TokenUsageRow = {
+  model: string
+  input: number
+  output: number
+  reasoning: number
+  cacheRead: number
+  cacheWrite: number
+  total: number
+}
+
+export type TokenUsageTotals = {
+  input: number
+  output: number
+  reasoning: number
+  cacheRead: number
+  cacheWrite: number
+  total: number
+}
+
+export interface TokenUsagePayload {
+  rows: TokenUsageRow[]
+  totals: TokenUsageTotals
+}
+
+const EMPTY_TOTALS: TokenUsageTotals = {
+  input: 0,
+  output: 0,
+  reasoning: 0,
+  cacheRead: 0,
+  cacheWrite: 0,
+  total: 0,
+}
+
+function clampToken(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : 0
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null
+}
+
+function readString(value: unknown): string | null {
+  if (typeof value !== "string") return null
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : null
+}
+
+function blankRow(model: string): TokenUsageRow {
+  return { model, input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, total: 0 }
+}
+
+export function aggregateTokenUsage(metas: unknown[]): TokenUsagePayload {
+  const rowsByModel = new Map<string, TokenUsageRow>()
+  const seenMessageIds = new Set<string>()
+
+  for (const metaUnknown of metas) {
+    if (!isRecord(metaUnknown)) continue
+    const role = readString(metaUnknown.role)
+    if (role !== "assistant") continue
+
+    const id = readString(metaUnknown.id)
+    if (id) {
+      if (seenMessageIds.has(id)) continue
+      seenMessageIds.add(id)
+    }
+
+    const model = extractModelString(metaUnknown) ?? "unknown/unknown"
+    const tokens = isRecord(metaUnknown.tokens) ? metaUnknown.tokens : null
+    const cache = tokens && isRecord(tokens.cache) ? tokens.cache : null
+    const input = clampToken(tokens?.input)
+    const output = clampToken(tokens?.output)
+    const reasoning = clampToken(tokens?.reasoning)
+    const cacheRead = clampToken(cache?.read)
+    const cacheWrite = clampToken(cache?.write)
+    const total = input + output + reasoning + cacheRead + cacheWrite
+
+    const row = rowsByModel.get(model) ?? blankRow(model)
+    row.input += input
+    row.output += output
+    row.reasoning += reasoning
+    row.cacheRead += cacheRead
+    row.cacheWrite += cacheWrite
+    row.total += total
+    rowsByModel.set(model, row)
+  }
+
+  const rows = Array.from(rowsByModel.values()).sort((a, b) => {
+    if (b.total !== a.total) return b.total - a.total
+    return a.model.localeCompare(b.model)
+  })
+  const totals = rows.reduce(
+    (acc, row) => ({
+      input: acc.input + row.input,
+      output: acc.output + row.output,
+      reasoning: acc.reasoning + row.reasoning,
+      cacheRead: acc.cacheRead + row.cacheRead,
+      cacheWrite: acc.cacheWrite + row.cacheWrite,
+      total: acc.total + row.total,
+    }),
+    { ...EMPTY_TOTALS }
+  )
+
+  return { rows, totals }
+}
+
+export const EMPTY_TOKEN_USAGE_PAYLOAD: TokenUsagePayload = {
+  rows: [],
+  totals: { ...EMPTY_TOTALS },
+}
+
+export const TokenUsagePayload = EMPTY_TOKEN_USAGE_PAYLOAD