@copilotz/admin 0.9.23 → 0.9.25

package/dist/index.cjs

@@ -39,6 +39,7 @@ __export(index_exports, {
   fetchAdminOverview: () => fetchAdminOverview,
   fetchAdminParticipants: () => fetchAdminParticipants,
   fetchAdminThreads: () => fetchAdminThreads,
+  fetchAdminUsage: () => fetchAdminUsage,
   fetchCollectionItem: () => fetchCollectionItem,
   fetchCollectionItems: () => fetchCollectionItems,
   fetchCollectionNames: () => fetchCollectionNames,
@@ -299,6 +300,21 @@ async function fetchAdminAgents(search, namespace, options) {
     limit: "8"
   }, options);
 }
+async function fetchAdminUsage(filters, options) {
+  return await fetchAdminJson("/v1/admin/usage", {
+    from: filters.from,
+    to: filters.to,
+    interval: filters.interval,
+    metric: filters.metric,
+    groupBy: filters.groupBy,
+    threadId: filters.threadId,
+    participantId: filters.participantId,
+    participantType: filters.participantType,
+    namespace: filters.namespace,
+    provider: filters.provider,
+    model: filters.model
+  }, options);
+}
 async function fetchThreadDetail(threadId, options) {
   return await fetchAdminJson(
     `/v1/threads/${encodeURIComponent(threadId)}`,
@@ -1603,10 +1619,11 @@ var DashboardView = ({
   onThreadSearchChange,
   onParticipantSearchChange,
   onAgentSearchChange,
-  onThreadClick
+  onThreadClick,
+  namespace
 }) => {
   const [usageMetricKind, setUsageMetricKind] = import_react2.default.useState(
-    "tokens"
+    "cost"
   );
   const [usageDimension, setUsageDimension] = import_react2.default.useState(
     "total"
@@ -1617,11 +1634,6 @@ var DashboardView = ({
     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,
@@ -1636,7 +1648,7 @@ var DashboardView = ({
     {
       label: config.labels.participantsCard,
       value: overview?.participantTotals.total ?? 0,
-      detail: `${overview?.participantTotals.agents ?? 0} agents`
+      detail: `${overview?.participantTotals.agents ?? 0} agents, ${overview?.participantTotals.jobs ?? 0} jobs`
     },
     {
       label: llmSummaryLabel,
@@ -1674,71 +1686,17 @@ var DashboardView = ({
         card.label
       )) })
     ] }),
-    config.features.showOverview && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: config.labels.llmUsageTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: config.labels.usageMetricLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              Select,
-              {
-                value: usageMetricKind,
-                onValueChange: (value) => setUsageMetricKind(value),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SelectContent, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "tokens", children: config.labels.usageMetricTokens }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "cost", children: config.labels.usageMetricCost })
-                  ] })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: config.labels.usageDimensionLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              Select,
-              {
-                value: usageDimension,
-                onValueChange: (value) => setUsageDimension(value),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { children: USAGE_DIMENSIONS.map((dimension) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: dimension, children: getUsageDimensionLabel(config.labels, dimension) }, dimension)) })
-                ]
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: usageBreakdownCards.map((card) => {
-        const isSelected = card.dimension === usageDimension;
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          "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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-3 text-2xl font-semibold tracking-tight", children: formatMetricValue(card.value, usageMetricKind) })
-                ] }),
-                isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: config.labels.usageDimensionLabel })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "mt-2 text-xs text-muted-foreground", children: [
-                overview?.llmTotals.totalCalls ?? 0,
-                " ",
-                config.labels.usageCallsDetail
-              ] })
-            ]
-          },
-          card.dimension
-        );
-      }) })
-    ] }),
+    config.features.showOverview && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      UsageExplorer,
+      {
+        config,
+        metricKind: usageMetricKind,
+        namespace,
+        onDimensionChange: setUsageDimension,
+        onMetricKindChange: setUsageMetricKind,
+        selectedDimension: usageDimension
+      }
+    ),
     config.features.showActivity && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "space-y-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: config.labels.activityTitle }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1808,6 +1766,318 @@ var DashboardView = ({
 function SectionHeading({ title }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: title });
 }
+function UsageExplorer(props) {
+  const [period, setPeriod] = import_react2.default.useState("7d");
+  const [bucket, setBucket] = import_react2.default.useState("day");
+  const [groupBy, setGroupBy] = import_react2.default.useState("participant");
+  const [participantType, setParticipantType] = import_react2.default.useState("all");
+  const [threadId, setThreadId] = import_react2.default.useState("");
+  const [participantId, setParticipantId] = import_react2.default.useState("");
+  const [provider, setProvider] = import_react2.default.useState("");
+  const [model, setModel] = import_react2.default.useState("");
+  const [customFrom, setCustomFrom] = import_react2.default.useState("");
+  const [customTo, setCustomTo] = import_react2.default.useState("");
+  const [usage, setUsage] = import_react2.default.useState(null);
+  const [isLoading, setIsLoading] = import_react2.default.useState(false);
+  const [error, setError] = import_react2.default.useState(null);
+  const range = import_react2.default.useMemo(() => getUsageRange(period, customFrom, customTo), [
+    customFrom,
+    customTo,
+    period
+  ]);
+  const loadUsage = import_react2.default.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const next = await fetchAdminUsage({
+        from: range.from,
+        to: range.to,
+        interval: bucket,
+        metric: props.metricKind,
+        groupBy,
+        namespace: props.namespace || void 0,
+        participantType,
+        threadId: emptyToUndefined(threadId),
+        participantId: emptyToUndefined(participantId),
+        provider: emptyToUndefined(provider),
+        model: emptyToUndefined(model)
+      }, {
+        baseUrl: props.config.baseUrl,
+        getRequestHeaders: props.config.getRequestHeaders
+      });
+      setUsage(next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load usage");
+      setUsage(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    bucket,
+    groupBy,
+    model,
+    participantId,
+    participantType,
+    props.config.baseUrl,
+    props.config.getRequestHeaders,
+    props.metricKind,
+    props.namespace,
+    provider,
+    range.from,
+    range.to,
+    threadId
+  ]);
+  import_react2.default.useEffect(() => {
+    void loadUsage();
+  }, [loadUsage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: props.config.labels.llmUsageTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          UsageSelect,
+          {
+            label: "Period",
+            value: period,
+            onValueChange: (value) => setPeriod(value),
+            options: [
+              ["24h", props.config.labels.range24h],
+              ["7d", props.config.labels.range7d],
+              ["30d", props.config.labels.range30d],
+              ["custom", "Custom"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          UsageSelect,
+          {
+            label: "Bucket",
+            value: bucket,
+            onValueChange: (value) => setBucket(value),
+            options: [
+              ["minute", "Minute"],
+              ["hour", "Hour"],
+              ["day", "Day"],
+              ["week", "Week"],
+              ["month", "Month"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          UsageSelect,
+          {
+            label: props.config.labels.usageMetricLabel,
+            value: props.metricKind,
+            onValueChange: (value) => props.onMetricKindChange(value),
+            options: [
+              ["cost", props.config.labels.usageMetricCost],
+              ["tokens", props.config.labels.usageMetricTokens],
+              ["calls", "Calls"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          UsageSelect,
+          {
+            label: "Group by",
+            value: groupBy,
+            onValueChange: (value) => setGroupBy(value),
+            options: [
+              ["participant", "Participant"],
+              ["thread", "Thread"],
+              ["namespace", "Namespace"],
+              ["provider", "Provider"],
+              ["model", "Model"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          UsageSelect,
+          {
+            label: props.config.labels.usageDimensionLabel,
+            value: props.selectedDimension,
+            onValueChange: (value) => props.onDimensionChange(value),
+            options: USAGE_DIMENSIONS.map((dimension) => [
+              dimension,
+              getUsageDimensionLabel(props.config.labels, dimension)
+            ])
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-6", children: [
+      period === "custom" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "From", type: "datetime-local", value: customFrom, onChange: setCustomFrom }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "To", type: "datetime-local", value: customTo, onChange: setCustomTo })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        UsageSelect,
+        {
+          label: "Participant type",
+          value: participantType,
+          onValueChange: (value) => setParticipantType(value),
+          options: [
+            ["all", "All"],
+            ["human", "Human"],
+            ["agent", "Agent"],
+            ["job", "Job"]
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Thread", value: threadId, onChange: setThreadId }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Participant", value: participantId, onChange: setParticipantId }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Provider", value: provider, onChange: setProvider }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Model", value: model, onChange: setModel }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-end", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Button,
+        {
+          className: "h-9 w-full",
+          onClick: () => void loadUsage(),
+          disabled: isLoading,
+          variant: "outline",
+          children: props.config.labels.refresh
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      UsageChart,
+      {
+        labels: props.config.labels,
+        metricKind: props.metricKind,
+        dimension: props.selectedDimension,
+        points: usage?.points ?? [],
+        bucket,
+        isLoading,
+        error
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      UsageTable,
+      {
+        labels: props.config.labels,
+        metricKind: props.metricKind,
+        dimension: props.selectedDimension,
+        rows: usage?.rows ?? [],
+        isLoading
+      }
+    )
+  ] });
+}
+function UsageSelect(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "h-9 w-full min-w-[140px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value, children: label }, value)) })
+    ] })
+  ] });
+}
+function FilterInput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      Input,
+      {
+        className: "h-9",
+        type: props.type ?? "text",
+        value: props.value,
+        onChange: (event) => props.onChange(event.target.value)
+      }
+    )
+  ] });
+}
+function UsageChart(props) {
+  const buckets = import_react2.default.useMemo(() => buildUsageBuckets(props.points), [props.points]);
+  const visibleBuckets = buckets.slice(-18);
+  const groups = import_react2.default.useMemo(() => topUsageGroups(props.points, props.metricKind, props.dimension), [
+    props.dimension,
+    props.metricKind,
+    props.points
+  ]);
+  const maxBucketValue = Math.max(
+    ...visibleBuckets.map(
+      (bucket) => bucket.points.reduce((sum, point) => sum + getUsagePointValue(point, props.metricKind, props.dimension), 0)
+    ),
+    1
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: props.error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-destructive", children: props.error }) : props.isLoading && props.points.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.loading }) : visibleBuckets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex min-h-56 items-end gap-2", children: visibleBuckets.map((bucket) => {
+      const bucketTotal = bucket.points.reduce((sum, point) => sum + getUsagePointValue(point, props.metricKind, props.dimension), 0);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex h-40 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: "flex w-full flex-col-reverse overflow-hidden rounded-md",
+            style: {
+              height: `${Math.max(bucketTotal / maxBucketValue * 100, 6)}%`
+            },
+            children: groups.map((group, index) => {
+              const point = bucket.points.find((item) => item.groupKey === group.key);
+              const value = point ? getUsagePointValue(point, props.metricKind, props.dimension) : 0;
+              if (value <= 0 || bucketTotal <= 0) return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  title: `${group.label}: ${formatMetricValue(value, props.metricKind)}`,
+                  style: {
+                    height: `${value / bucketTotal * 100}%`,
+                    backgroundColor: USAGE_CHART_COLORS[index % USAGE_CHART_COLORS.length]
+                  }
+                },
+                group.key
+              );
+            })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium", children: formatUsageBucket(bucket.bucket, props.bucket) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(bucketTotal, props.metricKind) })
+        ] })
+      ] }, bucket.bucket);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap gap-3", children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "span",
+        {
+          className: "size-2 rounded-sm",
+          style: { backgroundColor: USAGE_CHART_COLORS[index % USAGE_CHART_COLORS.length] }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-48 truncate text-muted-foreground", children: group.label })
+    ] }, group.key)) })
+  ] }) });
+}
+function UsageTable(props) {
+  const rows = props.rows.slice(0, 40);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: "Usage detail" }),
+      props.isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: props.labels.loading })
+    ] }),
+    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "w-full min-w-[720px] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: "border-b text-left text-xs uppercase tracking-[0.14em] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 font-medium", children: "Interval" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 font-medium", children: "Group" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Input" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Output" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Reasoning" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Cache read" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Cache write" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 text-right font-medium", children: getUsageSummaryLabel(props.labels, props.metricKind, props.dimension) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: "border-b last:border-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-muted-foreground", children: formatDate(row.bucket) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "max-w-72 truncate py-2 pr-4 font-medium", children: row.groupLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "input"), props.metricKind) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "output"), props.metricKind) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "reasoning"), props.metricKind) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "cacheRead"), props.metricKind) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "cacheWrite"), props.metricKind) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 text-right font-medium", children: formatMetricValue(getUsagePointValue(row, props.metricKind, props.dimension), props.metricKind) })
+      ] }, `${row.bucket}:${row.groupKey}`)) })
+    ] }) })
+  ] });
+}
 function ActivityChart(props) {
   const trimmedPoints = props.points.slice(-props.maxBars);
   const maxUsageValue = Math.max(
@@ -2006,6 +2276,28 @@ function formatBucket(bucket, interval) {
     day: "numeric"
   });
 }
+function formatUsageBucket(bucket, interval) {
+  const date = new Date(bucket);
+  if (Number.isNaN(date.getTime())) return bucket;
+  if (interval === "minute" || interval === "hour") {
+    return date.toLocaleString(void 0, {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: interval === "minute" ? "2-digit" : void 0
+    });
+  }
+  if (interval === "month") {
+    return date.toLocaleDateString(void 0, {
+      month: "short",
+      year: "numeric"
+    });
+  }
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
+}
 function formatDate(value) {
   if (!value) return "No activity";
   const date = new Date(value);
@@ -2028,6 +2320,58 @@ var USAGE_DIMENSIONS = [
   "cacheRead",
   "cacheWrite"
 ];
+var USAGE_CHART_COLORS = [
+  "hsl(var(--primary))",
+  "hsl(var(--chart-2, 142 76% 36%))",
+  "hsl(var(--chart-3, 38 92% 50%))",
+  "hsl(var(--chart-4, 199 89% 48%))",
+  "hsl(var(--chart-5, 346 77% 49%))",
+  "hsl(var(--muted-foreground))"
+];
+function emptyToUndefined(value) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
+function getUsageRange(period, customFrom, customTo) {
+  if (period === "custom") {
+    return {
+      from: customFrom ? new Date(customFrom).toISOString() : void 0,
+      to: customTo ? new Date(customTo).toISOString() : void 0
+    };
+  }
+  const to = /* @__PURE__ */ new Date();
+  const from = new Date(to);
+  if (period === "24h") {
+    from.setHours(from.getHours() - 24);
+  } else if (period === "30d") {
+    from.setDate(from.getDate() - 30);
+  } else {
+    from.setDate(from.getDate() - 7);
+  }
+  return { from: from.toISOString(), to: to.toISOString() };
+}
+function buildUsageBuckets(points) {
+  const byBucket = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    const rows = byBucket.get(point.bucket) ?? [];
+    rows.push(point);
+    byBucket.set(point.bucket, rows);
+  }
+  return Array.from(byBucket.entries()).map(([bucket, bucketPoints]) => ({ bucket, points: bucketPoints })).sort((a, b) => new Date(a.bucket).getTime() - new Date(b.bucket).getTime());
+}
+function topUsageGroups(points, metricKind, dimension) {
+  const totals = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    const existing = totals.get(point.groupKey) ?? {
+      key: point.groupKey,
+      label: point.groupLabel,
+      value: 0
+    };
+    existing.value += getUsagePointValue(point, metricKind, dimension);
+    totals.set(point.groupKey, existing);
+  }
+  return Array.from(totals.values()).sort((a, b) => b.value - a.value).slice(0, 6);
+}
 function getUsageDimensionLabel(labels, dimension) {
   switch (dimension) {
     case "input":
@@ -2046,11 +2390,12 @@ function getUsageDimensionLabel(labels, dimension) {
   }
 }
 function getUsageSummaryLabel(labels, metricKind, dimension) {
-  const metricLabel = metricKind === "cost" ? labels.usageMetricCost : labels.usageMetricTokens;
+  const metricLabel = metricKind === "cost" ? labels.usageMetricCost : metricKind === "calls" ? "Calls" : labels.usageMetricTokens;
   return `${getUsageDimensionLabel(labels, dimension)} ${metricLabel}`;
 }
 function getOverviewUsageValue(overview, metricKind, dimension) {
   const llmTotals = overview.llmTotals;
+  if (metricKind === "calls") return llmTotals.totalCalls;
   if (metricKind === "cost") {
     switch (dimension) {
       case "input":
@@ -2102,6 +2447,7 @@ function getAgentUsageValue(agent, metricKind, dimension) {
         return agent.totalCostUsd;
     }
   }
+  if (metricKind === "calls") return agent.llmCallCount;
   switch (dimension) {
     case "input":
       return agent.inputTokens;
@@ -2136,6 +2482,42 @@ function getActivityUsageValue(point, metricKind, dimension) {
         return point.totalCostUsd;
     }
   }
+  if (metricKind === "calls") return point.llmCallCount;
+  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 getUsagePointValue(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;
+    }
+  }
+  if (metricKind === "calls") return point.totalCalls;
   switch (dimension) {
     case "input":
       return point.inputTokens;
@@ -3209,6 +3591,7 @@ var CopilotzAdmin = ({
             participants: admin.participants,
             agents: admin.agents,
             interval: admin.filters.interval,
+            namespace,
             threadSearch,
             participantSearch,
             agentSearch,
@@ -3337,6 +3720,7 @@ var CopilotzAdmin = ({
   fetchAdminOverview,
   fetchAdminParticipants,
   fetchAdminThreads,
+  fetchAdminUsage,
   fetchCollectionItem,
   fetchCollectionItems,
   fetchCollectionNames,