@copilotz/admin 0.9.28 → 0.9.30

package/dist/index.js

@@ -536,16 +536,6 @@ function CardHeader({ className, ...props }) {
     }
   );
 }
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1496,7 +1486,7 @@ import {
   BarChart,
   CartesianGrid,
   Legend,
-  Tooltip as Tooltip2,
+  Tooltip as RechartsTooltip,
   XAxis,
   YAxis
 } from "recharts";
@@ -1863,10 +1853,10 @@ function UsageDashboard({
     });
     return () => setHeaderRefresh?.(null);
   }, [loadUsage, setHeaderRefresh]);
-  return /* @__PURE__ */ jsxs8("div", { className: "grid h-full min-h-0 grid-rows-[auto_minmax(0,4fr)_minmax(0,5fr)] gap-3", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "grid h-full min-h-[760px] grid-rows-[auto_minmax(280px,4fr)_minmax(260px,5fr)] gap-3", children: [
     /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between", children: [
-        /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "min-w-[180px]", children: [
           /* @__PURE__ */ jsx13("h2", { className: "text-xl font-semibold tracking-tight", children: config.labels.llmUsageTitle }),
           /* @__PURE__ */ jsxs8("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx13(Badge, { variant: "outline", children: formatUsageRangeLabel(period, range) }),
@@ -1906,34 +1896,19 @@ function UsageDashboard({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8(Card, { className: "min-h-0 gap-2 overflow-hidden py-3", children: [
-      /* @__PURE__ */ jsx13(CardHeader, { className: "px-4", children: /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-2 md:flex-row md:items-start md:justify-between", children: /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx13(CardTitle, { className: "text-base", children: getUsageSummaryLabel(config.labels, metricKind, dimension) }),
-        /* @__PURE__ */ jsxs8("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-          formatMetricValue(
-            getUsageTotalValue(totals, metricKind, dimension),
-            metricKind
-          ),
-          " ",
-          "across ",
-          formatNumber(totals.totalCalls),
-          " calls"
-        ] })
-      ] }) }) }),
-      /* @__PURE__ */ jsx13(CardContent, { className: "min-h-0 flex-1 px-2 lg:px-4", children: error ? /* @__PURE__ */ jsx13("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ jsx13(
-        EmptyDashboard,
-        {
-          description: config.labels.noResults,
-          title: "No usage"
-        }
-      ) : /* @__PURE__ */ jsx13(
-        UsageChart,
-        {
-          chartState,
-          metricKind
-        }
-      ) })
-    ] }),
+    /* @__PURE__ */ jsx13(Card, { className: "min-h-0 gap-0 overflow-hidden py-2", children: /* @__PURE__ */ jsx13(CardContent, { className: "min-h-0 flex-1 px-2 lg:px-4", children: error ? /* @__PURE__ */ jsx13("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ jsx13(
+      EmptyDashboard,
+      {
+        description: config.labels.noResults,
+        title: "No usage"
+      }
+    ) : /* @__PURE__ */ jsx13(
+      UsageChart,
+      {
+        chartState,
+        metricKind
+      }
+    ) }) }),
     /* @__PURE__ */ jsx13(
       UsageTable,
       {
@@ -2022,7 +1997,7 @@ function UsageChart({
               }
             ),
             /* @__PURE__ */ jsx13(
-              Tooltip2,
+              RechartsTooltip,
               {
                 content: /* @__PURE__ */ jsx13(
                   ChartTooltipContent,
@@ -2067,72 +2042,62 @@ function UsageTable({
 }) {
   const totalValue = getUsageTotalValue(totals, metricKind, dimension);
   const filterable = groupBy !== "namespace";
-  return /* @__PURE__ */ jsxs8(Card, { className: "min-h-0 gap-2 overflow-hidden py-3", children: [
-    /* @__PURE__ */ jsx13(CardHeader, { className: "px-4", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsx13(CardTitle, { className: "text-base", children: "Usage detail" }),
-      /* @__PURE__ */ jsxs8(Badge, { variant: "outline", children: [
-        formatNumber(rows.length),
-        " ",
-        getGroupByLabel(groupBy).toLowerCase()
-      ] })
+  return /* @__PURE__ */ jsx13(Card, { className: "min-h-0 gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx13(CardContent, { className: "min-h-0 flex-1 overflow-hidden px-0", children: rows.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "px-5 py-4 text-sm text-muted-foreground", children: labels.noResults }) : /* @__PURE__ */ jsx13("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs8("table", { className: "w-full min-w-[940px] text-sm", children: [
+    /* @__PURE__ */ jsx13("thead", { className: "sticky top-0 z-10 bg-card", children: /* @__PURE__ */ jsxs8("tr", { className: "border-b text-left text-xs uppercase tracking-[0.12em] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx13("th", { className: "px-5 py-2.5 font-medium", children: getGroupByLabel(groupBy) }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: getUsageSummaryLabel(labels, metricKind, dimension) }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Share" }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Calls" }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Input" }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Output" }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Reasoning" }),
+      /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Cache read" }),
+      /* @__PURE__ */ jsx13("th", { className: "px-5 py-2.5 text-right font-medium", children: "Avg/call" })
     ] }) }),
-    /* @__PURE__ */ jsx13(CardContent, { className: "min-h-0 flex-1 overflow-hidden px-0", children: rows.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "px-5 py-4 text-sm text-muted-foreground", children: labels.noResults }) : /* @__PURE__ */ jsx13("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs8("table", { className: "w-full min-w-[940px] text-sm", children: [
-      /* @__PURE__ */ jsx13("thead", { className: "sticky top-0 z-10 bg-card", children: /* @__PURE__ */ jsxs8("tr", { className: "border-b text-left text-xs uppercase tracking-[0.12em] text-muted-foreground", children: [
-        /* @__PURE__ */ jsx13("th", { className: "px-5 py-2.5 font-medium", children: getGroupByLabel(groupBy) }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: getUsageSummaryLabel(labels, metricKind, dimension) }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Share" }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Calls" }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Input" }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Output" }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Reasoning" }),
-        /* @__PURE__ */ jsx13("th", { className: "px-3 py-2.5 text-right font-medium", children: "Cache read" }),
-        /* @__PURE__ */ jsx13("th", { className: "px-5 py-2.5 text-right font-medium", children: "Avg/call" })
-      ] }) }),
-      /* @__PURE__ */ jsx13("tbody", { children: rows.slice(0, 60).map((row) => {
-        const share = totalValue > 0 ? row.value / totalValue : 0;
-        return /* @__PURE__ */ jsxs8(
-          "tr",
-          {
-            className: cn(
-              "border-b last:border-0",
-              filterable && "cursor-pointer transition-colors hover:bg-muted/50"
-            ),
-            onClick: () => filterable && onRowFilter(row),
-            children: [
-              /* @__PURE__ */ jsxs8("td", { className: "px-5 py-3", children: [
-                /* @__PURE__ */ jsx13("div", { className: "max-w-80 truncate font-medium", children: row.groupLabel }),
-                row.groupKey !== row.groupLabel && /* @__PURE__ */ jsx13("div", { className: "mt-0.5 max-w-80 truncate text-xs text-muted-foreground", children: row.groupKey })
-              ] }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right font-medium", children: formatMetricValue(row.value, metricKind) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatPercent(share) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatNumber(row.totalCalls) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
-                getUsageTotalValue(row, metricKind, "input"),
-                metricKind
-              ) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
-                getUsageTotalValue(row, metricKind, "output"),
-                metricKind
-              ) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
-                getUsageTotalValue(row, metricKind, "reasoning"),
-                metricKind
-              ) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
-                getUsageTotalValue(row, metricKind, "cacheRead"),
-                metricKind
-              ) }),
-              /* @__PURE__ */ jsx13("td", { className: "px-5 py-3 text-right", children: formatMetricValue(
-                row.totalCalls > 0 ? row.value / row.totalCalls : 0,
-                metricKind
-              ) })
-            ]
-          },
-          row.groupKey
-        );
-      }) })
-    ] }) }) })
-  ] });
+    /* @__PURE__ */ jsx13("tbody", { children: rows.slice(0, 60).map((row) => {
+      const share = totalValue > 0 ? row.value / totalValue : 0;
+      return /* @__PURE__ */ jsxs8(
+        "tr",
+        {
+          className: cn(
+            "border-b last:border-0",
+            filterable && "cursor-pointer transition-colors hover:bg-muted/50"
+          ),
+          onClick: () => filterable && onRowFilter(row),
+          children: [
+            /* @__PURE__ */ jsxs8("td", { className: "px-5 py-3", children: [
+              /* @__PURE__ */ jsx13("div", { className: "max-w-80 truncate font-medium", children: row.groupLabel }),
+              row.groupKey !== row.groupLabel && /* @__PURE__ */ jsx13("div", { className: "mt-0.5 max-w-80 truncate text-xs text-muted-foreground", children: row.groupKey })
+            ] }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right font-medium", children: formatMetricValue(row.value, metricKind) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatPercent(share) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatNumber(row.totalCalls) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+              getUsageTotalValue(row, metricKind, "input"),
+              metricKind
+            ) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+              getUsageTotalValue(row, metricKind, "output"),
+              metricKind
+            ) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+              getUsageTotalValue(row, metricKind, "reasoning"),
+              metricKind
+            ) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+              getUsageTotalValue(row, metricKind, "cacheRead"),
+              metricKind
+            ) }),
+            /* @__PURE__ */ jsx13("td", { className: "px-5 py-3 text-right", children: formatMetricValue(
+              row.totalCalls > 0 ? row.value / row.totalCalls : 0,
+              metricKind
+            ) })
+          ]
+        },
+        row.groupKey
+      );
+    }) })
+  ] }) }) }) });
 }
 function DashboardHeaderControls({
   attribution,
@@ -2258,7 +2223,7 @@ function InlineFilters({
   setThreadId,
   threadId
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "flex max-w-full flex-wrap items-end justify-end gap-2", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "flex min-w-[min(100%,520px)] flex-1 flex-wrap items-end justify-end gap-2", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 pb-1 text-xs font-medium text-muted-foreground", children: [
       /* @__PURE__ */ jsx13(Filter, { className: "size-3.5" }),
       /* @__PURE__ */ jsx13("span", { children: "Filters" }),
@@ -2354,57 +2319,66 @@ function InlineFilters({
   ] });
 }
 function HeaderSelect(props) {
-  return /* @__PURE__ */ jsxs8(Select, { value: props.value, onValueChange: props.onValueChange, children: [
-    /* @__PURE__ */ jsx13(
-      SelectTrigger,
-      {
-        "aria-label": props.label,
-        className: cn("h-8 bg-background text-xs", props.width),
-        children: /* @__PURE__ */ jsx13(SelectValue, {})
-      }
-    ),
-    /* @__PURE__ */ jsx13(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ jsx13(SelectItem, { value, children: label }, value)) })
-  ] });
-}
-function UsageSelect(props) {
-  return /* @__PURE__ */ jsxs8("label", { className: cn("space-y-1", props.compact && "w-[116px]"), children: [
-    /* @__PURE__ */ jsx13("span", { className: "sr-only", children: props.label }),
+  return /* @__PURE__ */ jsxs8(Tooltip, { children: [
     /* @__PURE__ */ jsxs8(Select, { value: props.value, onValueChange: props.onValueChange, children: [
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
         SelectTrigger,
         {
           "aria-label": props.label,
-          className: cn(
-            "w-full min-w-0 bg-background",
-            props.compact ? "h-8 text-xs" : "h-9"
-          ),
+          className: cn("h-8 bg-background text-xs", props.width),
           children: /* @__PURE__ */ jsx13(SelectValue, {})
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx13(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ jsx13(SelectItem, { value, children: label }, value)) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx13(TooltipContent, { children: props.label })
+  ] });
+}
+function UsageSelect(props) {
+  return /* @__PURE__ */ jsxs8(Tooltip, { children: [
+    /* @__PURE__ */ jsxs8("label", { className: cn("space-y-1", props.compact && "w-[116px]"), children: [
+      /* @__PURE__ */ jsx13("span", { className: "sr-only", children: props.label }),
+      /* @__PURE__ */ jsxs8(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+        /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
+          SelectTrigger,
+          {
+            "aria-label": props.label,
+            className: cn(
+              "w-full min-w-0 bg-background",
+              props.compact ? "h-8 text-xs" : "h-9"
+            ),
+            children: /* @__PURE__ */ jsx13(SelectValue, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ jsx13(SelectItem, { value, children: label }, value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13(TooltipContent, { children: props.label })
   ] });
 }
 function FilterInput(props) {
-  return /* @__PURE__ */ jsxs8("label", { className: cn("space-y-1", props.compact && "w-[150px]"), children: [
-    /* @__PURE__ */ jsx13("span", { className: "sr-only", children: props.label }),
-    /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-      props.icon && /* @__PURE__ */ jsx13("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: props.icon }),
-      /* @__PURE__ */ jsx13(
-        Input,
-        {
-          "aria-label": props.label,
-          className: cn(
-            "bg-background",
-            props.compact ? "h-8 text-xs" : "h-9",
-            props.icon && "pl-8"
-          ),
-          onChange: (event) => props.onChange(event.target.value),
-          type: props.type ?? "text",
-          value: props.value
-        }
-      )
-    ] })
+  return /* @__PURE__ */ jsxs8(Tooltip, { children: [
+    /* @__PURE__ */ jsxs8("label", { className: cn("space-y-1", props.compact && "w-[150px]"), children: [
+      /* @__PURE__ */ jsx13("span", { className: "sr-only", children: props.label }),
+      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+        props.icon && /* @__PURE__ */ jsx13("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: props.icon }),
+        /* @__PURE__ */ jsx13(
+          Input,
+          {
+            "aria-label": props.label,
+            className: cn(
+              "bg-background",
+              props.compact ? "h-8 text-xs" : "h-9",
+              props.icon && "pl-8"
+            ),
+            onChange: (event) => props.onChange(event.target.value),
+            type: props.type ?? "text",
+            value: props.value
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx13(TooltipContent, { children: props.label })
   ] });
 }
 function EmptyDashboard({