Show output tokens in detail stats

lib/detail-stats.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from "bun:test";
+import { getDetailStats } from "./detail-stats";
+
+describe("getDetailStats", () => {
+  test("includes completion tokens in detail page stat cards", () => {
+    const stats = getDetailStats({
+      calls: 12,
+      total_tokens: 1000,
+      quota: 250000,
+      prompt_tokens: 400,
+      completion_tokens: 350,
+      cache_creation_tokens: 150,
+      cache_read_tokens: 100,
+    });
+
+    expect(stats.map((stat) => stat.key)).toEqual([
+      "calls",
+      "total_tokens",
+      "quota",
+      "prompt_tokens",
+      "completion_tokens",
+      "cache_creation_tokens",
+      "cache_read_tokens",
+    ]);
+    expect(stats.find((stat) => stat.key === "completion_tokens")).toEqual({
+      key: "completion_tokens",
+      labelKey: "th.output",
+      value: 350,
+      format: "tokens",
+    });
+  });
+});

lib/detail-stats.ts

@@ -0,0 +1,41 @@
+import type { TranslationKey } from "@/lib/i18n";
+
+export type DetailStatKey =
+  | "calls"
+  | "total_tokens"
+  | "quota"
+  | "prompt_tokens"
+  | "completion_tokens"
+  | "cache_creation_tokens"
+  | "cache_read_tokens";
+
+export type DetailStatFormat = "number" | "tokens" | "usd";
+
+export interface DetailStatsData {
+  calls: number;
+  total_tokens: number;
+  quota: number;
+  prompt_tokens: number;
+  completion_tokens: number;
+  cache_creation_tokens: number;
+  cache_read_tokens: number;
+}
+
+export interface DetailStatItem {
+  key: DetailStatKey;
+  labelKey: TranslationKey;
+  value: number;
+  format?: DetailStatFormat;
+}
+
+export function getDetailStats(data: DetailStatsData): DetailStatItem[] {
+  return [
+    { key: "calls", labelKey: "dash.totalCalls", value: data.calls },
+    { key: "total_tokens", labelKey: "th.totalToken", value: data.total_tokens, format: "tokens" },
+    { key: "quota", labelKey: "th.cost", value: data.quota / 500000, format: "usd" },
+    { key: "prompt_tokens", labelKey: "th.input", value: data.prompt_tokens, format: "tokens" },
+    { key: "completion_tokens", labelKey: "th.output", value: data.completion_tokens, format: "tokens" },
+    { key: "cache_creation_tokens", labelKey: "th.cacheCreation", value: data.cache_creation_tokens, format: "tokens" },
+    { key: "cache_read_tokens", labelKey: "th.cacheRead", value: data.cache_read_tokens, format: "tokens" },
+  ];
+}