@copilotz/admin 0.9.23 → 0.9.25

package/dist/index.js

@@ -256,6 +256,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)}`,
@@ -1553,7 +1568,7 @@ function Badge({
 }
 
 // src/components/views/DashboardView.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var DashboardView = ({
   config,
   overview,
@@ -1568,10 +1583,11 @@ var DashboardView = ({
   onThreadSearchChange,
   onParticipantSearchChange,
   onAgentSearchChange,
-  onThreadClick
+  onThreadClick,
+  namespace
 }) => {
   const [usageMetricKind, setUsageMetricKind] = React5.useState(
-    "tokens"
+    "cost"
   );
   const [usageDimension, setUsageDimension] = React5.useState(
     "total"
@@ -1582,11 +1598,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,
@@ -1601,7 +1612,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,
@@ -1639,71 +1650,17 @@ var DashboardView = ({
         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.showOverview && /* @__PURE__ */ jsx12(
+      UsageExplorer,
+      {
+        config,
+        metricKind: usageMetricKind,
+        namespace,
+        onDimensionChange: setUsageDimension,
+        onMetricKindChange: setUsageMetricKind,
+        selectedDimension: usageDimension
+      }
+    ),
     config.features.showActivity && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.activityTitle }),
       /* @__PURE__ */ jsx12(
@@ -1773,6 +1730,318 @@ var DashboardView = ({
 function SectionHeading({ title }) {
   return /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold tracking-tight", children: title });
 }
+function UsageExplorer(props) {
+  const [period, setPeriod] = React5.useState("7d");
+  const [bucket, setBucket] = React5.useState("day");
+  const [groupBy, setGroupBy] = React5.useState("participant");
+  const [participantType, setParticipantType] = React5.useState("all");
+  const [threadId, setThreadId] = React5.useState("");
+  const [participantId, setParticipantId] = React5.useState("");
+  const [provider, setProvider] = React5.useState("");
+  const [model, setModel] = React5.useState("");
+  const [customFrom, setCustomFrom] = React5.useState("");
+  const [customTo, setCustomTo] = React5.useState("");
+  const [usage, setUsage] = React5.useState(null);
+  const [isLoading, setIsLoading] = React5.useState(false);
+  const [error, setError] = React5.useState(null);
+  const range = React5.useMemo(() => getUsageRange(period, customFrom, customTo), [
+    customFrom,
+    customTo,
+    period
+  ]);
+  const loadUsage = React5.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
+  ]);
+  React5.useEffect(() => {
+    void loadUsage();
+  }, [loadUsage]);
+  return /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between", children: [
+      /* @__PURE__ */ jsx12(SectionHeading, { title: props.config.labels.llmUsageTitle }),
+      /* @__PURE__ */ jsxs7("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: [
+        /* @__PURE__ */ jsx12(
+          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__ */ jsx12(
+          UsageSelect,
+          {
+            label: "Bucket",
+            value: bucket,
+            onValueChange: (value) => setBucket(value),
+            options: [
+              ["minute", "Minute"],
+              ["hour", "Hour"],
+              ["day", "Day"],
+              ["week", "Week"],
+              ["month", "Month"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          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__ */ jsx12(
+          UsageSelect,
+          {
+            label: "Group by",
+            value: groupBy,
+            onValueChange: (value) => setGroupBy(value),
+            options: [
+              ["participant", "Participant"],
+              ["thread", "Thread"],
+              ["namespace", "Namespace"],
+              ["provider", "Provider"],
+              ["model", "Model"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          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__ */ jsx12("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: /* @__PURE__ */ jsxs7("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-6", children: [
+      period === "custom" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+        /* @__PURE__ */ jsx12(FilterInput, { label: "From", type: "datetime-local", value: customFrom, onChange: setCustomFrom }),
+        /* @__PURE__ */ jsx12(FilterInput, { label: "To", type: "datetime-local", value: customTo, onChange: setCustomTo })
+      ] }),
+      /* @__PURE__ */ jsx12(
+        UsageSelect,
+        {
+          label: "Participant type",
+          value: participantType,
+          onValueChange: (value) => setParticipantType(value),
+          options: [
+            ["all", "All"],
+            ["human", "Human"],
+            ["agent", "Agent"],
+            ["job", "Job"]
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx12(FilterInput, { label: "Thread", value: threadId, onChange: setThreadId }),
+      /* @__PURE__ */ jsx12(FilterInput, { label: "Participant", value: participantId, onChange: setParticipantId }),
+      /* @__PURE__ */ jsx12(FilterInput, { label: "Provider", value: provider, onChange: setProvider }),
+      /* @__PURE__ */ jsx12(FilterInput, { label: "Model", value: model, onChange: setModel }),
+      /* @__PURE__ */ jsx12("div", { className: "flex items-end", children: /* @__PURE__ */ jsx12(
+        Button,
+        {
+          className: "h-9 w-full",
+          onClick: () => void loadUsage(),
+          disabled: isLoading,
+          variant: "outline",
+          children: props.config.labels.refresh
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx12(
+      UsageChart,
+      {
+        labels: props.config.labels,
+        metricKind: props.metricKind,
+        dimension: props.selectedDimension,
+        points: usage?.points ?? [],
+        bucket,
+        isLoading,
+        error
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      UsageTable,
+      {
+        labels: props.config.labels,
+        metricKind: props.metricKind,
+        dimension: props.selectedDimension,
+        rows: usage?.rows ?? [],
+        isLoading
+      }
+    )
+  ] });
+}
+function UsageSelect(props) {
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: props.label }),
+    /* @__PURE__ */ jsxs7(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+      /* @__PURE__ */ jsx12(SelectTrigger, { className: "h-9 w-full min-w-[140px]", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+      /* @__PURE__ */ jsx12(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ jsx12(SelectItem, { value, children: label }, value)) })
+    ] })
+  ] });
+}
+function FilterInput(props) {
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: props.label }),
+    /* @__PURE__ */ jsx12(
+      Input,
+      {
+        className: "h-9",
+        type: props.type ?? "text",
+        value: props.value,
+        onChange: (event) => props.onChange(event.target.value)
+      }
+    )
+  ] });
+}
+function UsageChart(props) {
+  const buckets = React5.useMemo(() => buildUsageBuckets(props.points), [props.points]);
+  const visibleBuckets = buckets.slice(-18);
+  const groups = React5.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__ */ jsx12("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: props.error ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-destructive", children: props.error }) : props.isLoading && props.points.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.loading }) : visibleBuckets.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx12("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__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsx12("div", { className: "flex h-40 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx12(
+          "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__ */ jsx12(
+                "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__ */ jsxs7("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium", children: formatUsageBucket(bucket.bucket, props.bucket) }),
+          /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(bucketTotal, props.metricKind) })
+        ] })
+      ] }, bucket.bucket);
+    }) }),
+    /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-3", children: groups.map((group, index) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: "size-2 rounded-sm",
+          style: { backgroundColor: USAGE_CHART_COLORS[index % USAGE_CHART_COLORS.length] }
+        }
+      ),
+      /* @__PURE__ */ jsx12("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__ */ jsxs7("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx12(SectionHeading, { title: "Usage detail" }),
+      props.isLoading && /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: props.labels.loading })
+    ] }),
+    rows.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx12("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs7("table", { className: "w-full min-w-[720px] text-sm", children: [
+      /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "border-b text-left text-xs uppercase tracking-[0.14em] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 font-medium", children: "Interval" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 font-medium", children: "Group" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 text-right font-medium", children: "Input" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 text-right font-medium", children: "Output" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 text-right font-medium", children: "Reasoning" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 text-right font-medium", children: "Cache read" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 pr-4 text-right font-medium", children: "Cache write" }),
+        /* @__PURE__ */ jsx12("th", { className: "py-2 text-right font-medium", children: getUsageSummaryLabel(props.labels, props.metricKind, props.dimension) })
+      ] }) }),
+      /* @__PURE__ */ jsx12("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs7("tr", { className: "border-b last:border-0", children: [
+        /* @__PURE__ */ jsx12("td", { className: "py-2 pr-4 text-muted-foreground", children: formatDate(row.bucket) }),
+        /* @__PURE__ */ jsx12("td", { className: "max-w-72 truncate py-2 pr-4 font-medium", children: row.groupLabel }),
+        /* @__PURE__ */ jsx12("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "input"), props.metricKind) }),
+        /* @__PURE__ */ jsx12("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "output"), props.metricKind) }),
+        /* @__PURE__ */ jsx12("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "reasoning"), props.metricKind) }),
+        /* @__PURE__ */ jsx12("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "cacheRead"), props.metricKind) }),
+        /* @__PURE__ */ jsx12("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "cacheWrite"), props.metricKind) }),
+        /* @__PURE__ */ jsx12("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(
@@ -1971,6 +2240,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);
@@ -1993,6 +2284,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":
@@ -2011,11 +2354,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":
@@ -2067,6 +2411,7 @@ function getAgentUsageValue(agent, metricKind, dimension) {
         return agent.totalCostUsd;
     }
   }
+  if (metricKind === "calls") return agent.llmCallCount;
   switch (dimension) {
     case "input":
       return agent.inputTokens;
@@ -2101,6 +2446,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;
@@ -3182,6 +3563,7 @@ var CopilotzAdmin = ({
             participants: admin.participants,
             agents: admin.agents,
             interval: admin.filters.interval,
+            namespace,
             threadSearch,
             participantSearch,
             agentSearch,
@@ -3309,6 +3691,7 @@ export {
   fetchAdminOverview,
   fetchAdminParticipants,
   fetchAdminThreads,
+  fetchAdminUsage,
   fetchCollectionItem,
   fetchCollectionItems,
   fetchCollectionNames,