@copilotz/admin 0.3.8 → 0.6.0

package/dist/index.d.cts

@@ -9,6 +9,23 @@ interface AdminRoute {
     resourceId?: string;
     collection?: string;
 }
+interface AdminUsageBreakdown {
+    inputTokens: number;
+    outputTokens: number;
+    reasoningTokens: number;
+    cacheReadInputTokens: number;
+    cacheCreationInputTokens: number;
+    totalTokens: number;
+    inputCostUsd: number;
+    outputCostUsd: number;
+    reasoningCostUsd: number;
+    cacheReadInputCostUsd: number;
+    cacheCreationInputCostUsd: number;
+    totalCostUsd: number;
+}
+interface AdminUsageTotals extends AdminUsageBreakdown {
+    totalCalls: number;
+}
 interface AdminOverview {
     threadTotals: {
         total: number;
@@ -33,22 +50,13 @@ interface AdminOverview {
         humans: number;
         agents: number;
     };
-    llmTotals: {
-        totalCalls: number;
-        inputTokens: number;
-        outputTokens: number;
-        reasoningTokens: number;
-        cacheReadInputTokens: number;
-        cacheCreationInputTokens: number;
-        totalTokens: number;
-    };
+    llmTotals: AdminUsageTotals;
 }
-interface AdminActivityPoint {
+interface AdminActivityPoint extends AdminUsageTotals {
     bucket: string;
     messageCount: number;
-    llmCallCount: number;
     toolCallMessageCount: number;
-    totalTokens: number;
+    llmCallCount: number;
 }
 interface AdminThreadSummary {
     threadId: string;
@@ -82,12 +90,18 @@ interface AdminAgentSummary {
     messageCount: number;
     llmCallCount: number;
     toolCallMessageCount: number;
-    inputTokens: number;
-    outputTokens: number;
-    reasoningTokens: number;
-    cacheReadInputTokens: number;
-    cacheCreationInputTokens: number;
-    totalTokens: number;
+    inputTokens: AdminUsageBreakdown["inputTokens"];
+    outputTokens: AdminUsageBreakdown["outputTokens"];
+    reasoningTokens: AdminUsageBreakdown["reasoningTokens"];
+    cacheReadInputTokens: AdminUsageBreakdown["cacheReadInputTokens"];
+    cacheCreationInputTokens: AdminUsageBreakdown["cacheCreationInputTokens"];
+    totalTokens: AdminUsageBreakdown["totalTokens"];
+    inputCostUsd: AdminUsageBreakdown["inputCostUsd"];
+    outputCostUsd: AdminUsageBreakdown["outputCostUsd"];
+    reasoningCostUsd: AdminUsageBreakdown["reasoningCostUsd"];
+    cacheReadInputCostUsd: AdminUsageBreakdown["cacheReadInputCostUsd"];
+    cacheCreationInputCostUsd: AdminUsageBreakdown["cacheCreationInputCostUsd"];
+    totalCostUsd: AdminUsageBreakdown["totalCostUsd"];
     lastActivityAt: string | null;
 }
 interface AdminThreadDetail {
@@ -183,7 +197,21 @@ interface AdminConfig {
         activeThreadsCard?: string;
         participantsCard?: string;
         tokensCard?: string;
+        costCard?: string;
         queueCard?: string;
+        llmUsageTitle?: string;
+        usageMetricLabel?: string;
+        usageDimensionLabel?: string;
+        usageMetricTokens?: string;
+        usageMetricCost?: string;
+        usageTotal?: string;
+        usageInput?: string;
+        usageOutput?: string;
+        usageReasoning?: string;
+        usageCacheRead?: string;
+        usageCacheWrite?: string;
+        usageCallsDetail?: string;
+        usageUnavailableDetail?: string;
         statusActive?: string;
         statusArchived?: string;
         scopeGlobal?: string;

package/dist/index.d.ts

@@ -9,6 +9,23 @@ interface AdminRoute {
     resourceId?: string;
     collection?: string;
 }
+interface AdminUsageBreakdown {
+    inputTokens: number;
+    outputTokens: number;
+    reasoningTokens: number;
+    cacheReadInputTokens: number;
+    cacheCreationInputTokens: number;
+    totalTokens: number;
+    inputCostUsd: number;
+    outputCostUsd: number;
+    reasoningCostUsd: number;
+    cacheReadInputCostUsd: number;
+    cacheCreationInputCostUsd: number;
+    totalCostUsd: number;
+}
+interface AdminUsageTotals extends AdminUsageBreakdown {
+    totalCalls: number;
+}
 interface AdminOverview {
     threadTotals: {
         total: number;
@@ -33,22 +50,13 @@ interface AdminOverview {
         humans: number;
         agents: number;
     };
-    llmTotals: {
-        totalCalls: number;
-        inputTokens: number;
-        outputTokens: number;
-        reasoningTokens: number;
-        cacheReadInputTokens: number;
-        cacheCreationInputTokens: number;
-        totalTokens: number;
-    };
+    llmTotals: AdminUsageTotals;
 }
-interface AdminActivityPoint {
+interface AdminActivityPoint extends AdminUsageTotals {
     bucket: string;
     messageCount: number;
-    llmCallCount: number;
     toolCallMessageCount: number;
-    totalTokens: number;
+    llmCallCount: number;
 }
 interface AdminThreadSummary {
     threadId: string;
@@ -82,12 +90,18 @@ interface AdminAgentSummary {
     messageCount: number;
     llmCallCount: number;
     toolCallMessageCount: number;
-    inputTokens: number;
-    outputTokens: number;
-    reasoningTokens: number;
-    cacheReadInputTokens: number;
-    cacheCreationInputTokens: number;
-    totalTokens: number;
+    inputTokens: AdminUsageBreakdown["inputTokens"];
+    outputTokens: AdminUsageBreakdown["outputTokens"];
+    reasoningTokens: AdminUsageBreakdown["reasoningTokens"];
+    cacheReadInputTokens: AdminUsageBreakdown["cacheReadInputTokens"];
+    cacheCreationInputTokens: AdminUsageBreakdown["cacheCreationInputTokens"];
+    totalTokens: AdminUsageBreakdown["totalTokens"];
+    inputCostUsd: AdminUsageBreakdown["inputCostUsd"];
+    outputCostUsd: AdminUsageBreakdown["outputCostUsd"];
+    reasoningCostUsd: AdminUsageBreakdown["reasoningCostUsd"];
+    cacheReadInputCostUsd: AdminUsageBreakdown["cacheReadInputCostUsd"];
+    cacheCreationInputCostUsd: AdminUsageBreakdown["cacheCreationInputCostUsd"];
+    totalCostUsd: AdminUsageBreakdown["totalCostUsd"];
     lastActivityAt: string | null;
 }
 interface AdminThreadDetail {
@@ -183,7 +197,21 @@ interface AdminConfig {
         activeThreadsCard?: string;
         participantsCard?: string;
         tokensCard?: string;
+        costCard?: string;
         queueCard?: string;
+        llmUsageTitle?: string;
+        usageMetricLabel?: string;
+        usageDimensionLabel?: string;
+        usageMetricTokens?: string;
+        usageMetricCost?: string;
+        usageTotal?: string;
+        usageInput?: string;
+        usageOutput?: string;
+        usageReasoning?: string;
+        usageCacheRead?: string;
+        usageCacheWrite?: string;
+        usageCallsDetail?: string;
+        usageUnavailableDetail?: string;
         statusActive?: string;
         statusArchived?: string;
         scopeGlobal?: string;

package/dist/index.js

@@ -38,7 +38,21 @@ var defaultAdminConfig = {
     activeThreadsCard: "Active threads",
     participantsCard: "Participants",
     tokensCard: "LLM tokens",
+    costCard: "LLM cost",
     queueCard: "Queued events",
+    llmUsageTitle: "LLM Usage",
+    usageMetricLabel: "Metric",
+    usageDimensionLabel: "Usage type",
+    usageMetricTokens: "Tokens",
+    usageMetricCost: "Cost",
+    usageTotal: "Total",
+    usageInput: "Input",
+    usageOutput: "Output",
+    usageReasoning: "Reasoning",
+    usageCacheRead: "Cache read",
+    usageCacheWrite: "Cache write",
+    usageCallsDetail: "LLM calls",
+    usageUnavailableDetail: "Available when provider-native usage exists",
     statusActive: "Active",
     statusArchived: "Archived",
     scopeGlobal: "Global",
@@ -251,16 +265,17 @@ async function fetchThreadMessages(threadId, messageOptions, options) {
 }
 async function fetchParticipantDetail(participantId, options) {
   return await fetchAdminJson(
-    `/v1/participants/${encodeURIComponent(participantId)}`,
-    {},
+    `/v1/collections/participant/${encodeURIComponent(participantId)}`,
+    { namespace: "global" },
     options
   );
 }
 async function updateParticipant(participantId, data, options) {
   const url = new URL(
-    `${resolveBaseUrl(options?.baseUrl)}/v1/participants/${encodeURIComponent(participantId)}`,
+    `${resolveBaseUrl(options?.baseUrl)}/v1/collections/participant/${encodeURIComponent(participantId)}`,
     window.location.origin
   );
+  url.searchParams.set("namespace", "global");
   const response = await fetch(url.toString(), {
     method: "PUT",
     headers: await withAuthHeaders(
@@ -1495,6 +1510,9 @@ var AdminHeader = ({
   ] }) }) });
 };
 
+// src/components/views/DashboardView.tsx
+import React5 from "react";
+
 // src/components/ui/badge.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva3 } from "class-variance-authority";
@@ -1550,6 +1568,23 @@ var DashboardView = ({
   onAgentSearchChange,
   onThreadClick
 }) => {
+  const [usageMetricKind, setUsageMetricKind] = React5.useState(
+    "tokens"
+  );
+  const [usageDimension, setUsageDimension] = React5.useState(
+    "total"
+  );
+  const llmSummaryValue = overview ? getOverviewUsageValue(overview, usageMetricKind, usageDimension) : 0;
+  const llmSummaryLabel = getUsageSummaryLabel(
+    config.labels,
+    usageMetricKind,
+    usageDimension
+  );
+  const usageBreakdownCards = USAGE_DIMENSIONS.map((dimension) => ({
+    dimension,
+    label: getUsageDimensionLabel(config.labels, dimension),
+    value: overview ? getOverviewUsageValue(overview, usageMetricKind, dimension) : 0
+  }));
   const cards = [
     {
       label: config.labels.messagesCard,
@@ -1567,9 +1602,10 @@ var DashboardView = ({
       detail: `${overview?.participantTotals.agents ?? 0} agents`
     },
     {
-      label: config.labels.tokensCard,
-      value: overview?.llmTotals.totalTokens ?? 0,
-      detail: `${overview?.llmTotals.totalCalls ?? 0} calls`
+      label: llmSummaryLabel,
+      value: llmSummaryValue,
+      detail: `${overview?.llmTotals.totalCalls ?? 0} ${config.labels.usageCallsDetail}`,
+      metricKind: usageMetricKind
     },
     {
       label: config.labels.queueCard,
@@ -1591,13 +1627,81 @@ var DashboardView = ({
           className: "rounded-xl border bg-card p-5 shadow-sm",
           children: [
             /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatMetricValue(
+              card.value,
+              card.metricKind ?? "tokens"
+            ) }),
             /* @__PURE__ */ jsx12("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
           ]
         },
         card.label
       )) })
     ] }),
+    config.features.showOverview && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+        /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.llmUsageTitle }),
+        /* @__PURE__ */ jsxs7("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: config.labels.usageMetricLabel }),
+            /* @__PURE__ */ jsxs7(
+              Select,
+              {
+                value: usageMetricKind,
+                onValueChange: (value) => setUsageMetricKind(value),
+                children: [
+                  /* @__PURE__ */ jsx12(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs7(SelectContent, { children: [
+                    /* @__PURE__ */ jsx12(SelectItem, { value: "tokens", children: config.labels.usageMetricTokens }),
+                    /* @__PURE__ */ jsx12(SelectItem, { value: "cost", children: config.labels.usageMetricCost })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: config.labels.usageDimensionLabel }),
+            /* @__PURE__ */ jsxs7(
+              Select,
+              {
+                value: usageDimension,
+                onValueChange: (value) => setUsageDimension(value),
+                children: [
+                  /* @__PURE__ */ jsx12(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx12(SelectContent, { children: USAGE_DIMENSIONS.map((dimension) => /* @__PURE__ */ jsx12(SelectItem, { value: dimension, children: getUsageDimensionLabel(config.labels, dimension) }, dimension)) })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx12("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: usageBreakdownCards.map((card) => {
+        const isSelected = card.dimension === usageDimension;
+        return /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(
+              "rounded-xl border bg-card p-5 shadow-sm transition-colors",
+              isSelected && "border-primary/60 ring-1 ring-primary/15"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs7("div", { children: [
+                  /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
+                  /* @__PURE__ */ jsx12("p", { className: "mt-3 text-2xl font-semibold tracking-tight", children: formatMetricValue(card.value, usageMetricKind) })
+                ] }),
+                isSelected && /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: config.labels.usageDimensionLabel })
+              ] }),
+              /* @__PURE__ */ jsxs7("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+                overview?.llmTotals.totalCalls ?? 0,
+                " ",
+                config.labels.usageCallsDetail
+              ] })
+            ]
+          },
+          card.dimension
+        );
+      }) })
+    ] }),
     config.features.showActivity && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.activityTitle }),
       /* @__PURE__ */ jsx12(
@@ -1606,7 +1710,9 @@ var DashboardView = ({
           interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
-          points: activity
+          points: activity,
+          usageDimension,
+          usageMetricKind
         }
       )
     ] }),
@@ -1648,7 +1754,15 @@ var DashboardView = ({
           searchValue: agentSearch,
           setSearchValue: onAgentSearchChange,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ jsx12(AgentsTable, { rows: agents, labels: config.labels })
+          children: /* @__PURE__ */ jsx12(
+            AgentsTable,
+            {
+              rows: agents,
+              labels: config.labels,
+              usageMetricKind,
+              usageDimension
+            }
+          )
         }
       )
     ] })
@@ -1659,35 +1773,50 @@ function SectionHeading({ title }) {
 }
 function ActivityChart(props) {
   const trimmedPoints = props.points.slice(-props.maxBars);
-  const maxMessages = Math.max(
-    ...trimmedPoints.map((point) => point.messageCount),
+  const maxUsageValue = Math.max(
+    ...trimmedPoints.map(
+      (point) => getActivityUsageValue(
+        point,
+        props.usageMetricKind,
+        props.usageDimension
+      )
+    ),
     1
   );
-  return /* @__PURE__ */ jsx12("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx12("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className: "flex min-w-0 flex-1 flex-col items-center gap-2",
-      children: [
-        /* @__PURE__ */ jsx12("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx12(
-          "div",
-          {
-            className: "w-full rounded-md bg-primary transition-all",
-            style: {
-              height: `${Math.max(point.messageCount / maxMessages * 100, 8)}%`
+  return /* @__PURE__ */ jsx12("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx12("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => {
+    const usageValue = getActivityUsageValue(
+      point,
+      props.usageMetricKind,
+      props.usageDimension
+    );
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx12("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: "w-full rounded-md bg-primary transition-all",
+              style: {
+                height: `${Math.max(usageValue / maxUsageValue * 100, 8)}%`
+              }
             }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-          /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
-            formatNumber(point.messageCount),
-            " msg"
+          ) }),
+          /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
+            /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(usageValue, props.usageMetricKind) }),
+            /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
+              formatNumber(point.totalCalls),
+              " ",
+              props.labels.usageCallsDetail
+            ] })
           ] })
-        ] })
-      ]
-    },
-    point.bucket
-  )) }) });
+        ]
+      },
+      point.bucket
+    );
+  }) }) });
 }
 function DataTable(props) {
   return /* @__PURE__ */ jsxs7("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
@@ -1783,7 +1912,9 @@ function ParticipantsTable({
 }
 function AgentsTable({
   rows,
-  labels
+  labels,
+  usageMetricKind,
+  usageDimension
 }) {
   return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs7(
     "div",
@@ -1797,24 +1928,30 @@ function AgentsTable({
           ] }),
           /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.llmCallCount),
-            " LLM calls"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.toolCallMessageCount),
-            " tool calls"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.totalTokens),
-            " tokens"
-          ] })
-        ] })
+        /* @__PURE__ */ jsx12("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
+          {
+            label: "Messages",
+            value: formatNumber(agent.messageCount)
+          },
+          {
+            label: "LLM calls",
+            value: formatNumber(agent.llmCallCount)
+          },
+          {
+            label: "Tool calls",
+            value: formatNumber(agent.toolCallMessageCount)
+          },
+          {
+            label: getUsageSummaryLabel(labels, usageMetricKind, usageDimension),
+            value: formatMetricValue(
+              getAgentUsageValue(agent, usageMetricKind, usageDimension),
+              usageMetricKind
+            )
+          }
+        ].map((item) => /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx12("p", { className: "font-medium text-foreground", children: item.value }),
+          /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: item.label })
+        ] }, item.label)) })
       ]
     },
     `${agent.namespace}:${agent.agentId}`
@@ -1846,6 +1983,151 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
+var USAGE_DIMENSIONS = [
+  "total",
+  "input",
+  "output",
+  "reasoning",
+  "cacheRead",
+  "cacheWrite"
+];
+function getUsageDimensionLabel(labels, dimension) {
+  switch (dimension) {
+    case "input":
+      return labels.usageInput;
+    case "output":
+      return labels.usageOutput;
+    case "reasoning":
+      return labels.usageReasoning;
+    case "cacheRead":
+      return labels.usageCacheRead;
+    case "cacheWrite":
+      return labels.usageCacheWrite;
+    case "total":
+    default:
+      return labels.usageTotal;
+  }
+}
+function getUsageSummaryLabel(labels, metricKind, dimension) {
+  const metricLabel = metricKind === "cost" ? labels.usageMetricCost : labels.usageMetricTokens;
+  return `${getUsageDimensionLabel(labels, dimension)} ${metricLabel}`;
+}
+function getOverviewUsageValue(overview, metricKind, dimension) {
+  const llmTotals = overview.llmTotals;
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return llmTotals.inputCostUsd;
+      case "output":
+        return llmTotals.outputCostUsd;
+      case "reasoning":
+        return llmTotals.reasoningCostUsd;
+      case "cacheRead":
+        return llmTotals.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return llmTotals.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return llmTotals.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return llmTotals.inputTokens;
+    case "output":
+      return llmTotals.outputTokens;
+    case "reasoning":
+      return llmTotals.reasoningTokens;
+    case "cacheRead":
+      return llmTotals.cacheReadInputTokens;
+    case "cacheWrite":
+      return llmTotals.cacheCreationInputTokens;
+    case "total":
+    default:
+      return llmTotals.totalTokens;
+  }
+}
+function getAgentUsageValue(agent, metricKind, dimension) {
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return agent.inputCostUsd;
+      case "output":
+        return agent.outputCostUsd;
+      case "reasoning":
+        return agent.reasoningCostUsd;
+      case "cacheRead":
+        return agent.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return agent.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return agent.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return agent.inputTokens;
+    case "output":
+      return agent.outputTokens;
+    case "reasoning":
+      return agent.reasoningTokens;
+    case "cacheRead":
+      return agent.cacheReadInputTokens;
+    case "cacheWrite":
+      return agent.cacheCreationInputTokens;
+    case "total":
+    default:
+      return agent.totalTokens;
+  }
+}
+function getActivityUsageValue(point, metricKind, dimension) {
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return point.inputCostUsd;
+      case "output":
+        return point.outputCostUsd;
+      case "reasoning":
+        return point.reasoningCostUsd;
+      case "cacheRead":
+        return point.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return point.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return point.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return point.inputTokens;
+    case "output":
+      return point.outputTokens;
+    case "reasoning":
+      return point.reasoningTokens;
+    case "cacheRead":
+      return point.cacheReadInputTokens;
+    case "cacheWrite":
+      return point.cacheCreationInputTokens;
+    case "total":
+    default:
+      return point.totalTokens;
+  }
+}
+function formatMetricValue(value, metricKind) {
+  if (metricKind === "cost") {
+    const absoluteValue = Math.abs(value);
+    const maximumFractionDigits = absoluteValue >= 1 ? 2 : absoluteValue >= 0.01 ? 4 : 6;
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits
+    }).format(value);
+  }
+  return formatNumber(value);
+}
 
 // src/components/views/ThreadsView.tsx
 import { Search, MessageSquare as MessageSquare2 } from "lucide-react";