@copilotz/admin 0.9.27 → 0.9.28

package/dist/index.cjs

@@ -1483,73 +1483,24 @@ var PAGE_TITLES = {
 var AdminHeader = ({
   config,
   currentRoute,
-  range,
-  interval,
-  onRangeChange,
-  onIntervalChange,
   onRefresh,
-  isLoading
+  isLoading,
+  controls
 }) => {
   let pageTitle = config.labels[`${currentRoute.page}Title`] || PAGE_TITLES[currentRoute.page] || currentRoute.page;
   if (currentRoute.page === "collection-items" && currentRoute.collection) {
     pageTitle = currentRoute.collection.charAt(0).toUpperCase() + currentRoute.collection.slice(1);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardHeader, { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardHeader, { className: "px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-h-10 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarTrigger, { className: "-ml-1" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipContent, { children: "Toggle Sidebar" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "ml-2 whitespace-nowrap text-sm font-medium", children: pageTitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
-      currentRoute.page === "dashboard" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Button,
-          {
-            variant: range === "24h" ? "default" : "ghost",
-            size: "sm",
-            className: "h-7 text-xs",
-            onClick: () => onRangeChange("24h"),
-            children: config.labels.range24h
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Button,
-          {
-            variant: range === "7d" ? "default" : "ghost",
-            size: "sm",
-            className: "h-7 text-xs",
-            onClick: () => onRangeChange("7d"),
-            children: config.labels.range7d
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Button,
-          {
-            variant: range === "30d" ? "default" : "ghost",
-            size: "sm",
-            className: "h-7 text-xs",
-            onClick: () => onRangeChange("30d"),
-            children: config.labels.range30d
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          Select,
-          {
-            value: interval,
-            onValueChange: (v) => onIntervalChange(v),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SelectContent, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: "hour", children: config.labels.intervalHour }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: "day", children: config.labels.intervalDay })
-              ] })
-            ]
-          }
-        )
-      ] }),
+    controls && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex min-w-[240px] flex-1 items-center justify-end gap-2 overflow-x-auto", children: controls }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Button,
@@ -1749,7 +1700,9 @@ var DashboardView = ({
   onParticipantSearchChange,
   onAgentSearchChange,
   onThreadClick,
-  namespace
+  namespace,
+  setHeaderControls,
+  setHeaderRefresh
 }) => {
   void overview;
   void activity;
@@ -1777,13 +1730,17 @@ var DashboardView = ({
     UsageDashboard,
     {
       config,
-      namespace
+      namespace,
+      setHeaderControls,
+      setHeaderRefresh
     }
   );
 };
 function UsageDashboard({
   config,
-  namespace
+  namespace,
+  setHeaderControls,
+  setHeaderRefresh
 }) {
   const [period, setPeriod] = import_react2.default.useState("7d");
   const [bucket, setBucket] = import_react2.default.useState("day");
@@ -1881,243 +1838,109 @@ function UsageDashboard({
     period === "custom" ? customFrom : "",
     period === "custom" ? customTo : ""
   ].filter((value) => value.trim().length > 0).length;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-2xl font-semibold tracking-tight", children: config.labels.llmUsageTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: formatUsageRangeLabel(period, range) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "secondary", children: getGroupByLabel(groupBy) }),
-          groupBy === "participant" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: attribution === "initiatedBy" ? "Initiated by sender" : "Generated by caller" })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-        Button,
-        {
-          className: "w-full sm:w-auto",
-          disabled: isLoading,
-          onClick: () => void loadUsage(),
-          size: "sm",
-          variant: "outline",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.RefreshCw, { className: cn("size-4", isLoading && "animate-spin") }),
-            config.labels.refresh
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      UsageSummary,
-      {
-        dimension,
-        labels: config.labels,
-        metricKind,
-        totals
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { className: "gap-4 overflow-hidden py-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardContent, { className: "space-y-4 px-4 lg:px-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid gap-2 md:grid-cols-2 xl:grid-cols-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          UsageSelect,
-          {
-            label: "Period",
-            onValueChange: (value) => setPeriod(value),
-            options: [
-              ["24h", config.labels.range24h],
-              ["7d", config.labels.range7d],
-              ["30d", config.labels.range30d],
-              ["custom", "Custom"]
-            ],
-            value: period
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          UsageSelect,
-          {
-            label: "Bucket",
-            onValueChange: (value) => setBucket(value),
-            options: [
-              ["minute", "Minute"],
-              ["hour", "Hour"],
-              ["day", "Day"],
-              ["week", "Week"],
-              ["month", "Month"]
-            ],
-            value: bucket
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          UsageSelect,
-          {
-            label: config.labels.usageMetricLabel,
-            onValueChange: (value) => setMetricKind(value),
-            options: [
-              ["cost", config.labels.usageMetricCost],
-              ["tokens", config.labels.usageMetricTokens],
-              ["calls", "Calls"]
-            ],
-            value: metricKind
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          UsageSelect,
-          {
-            label: "Group",
-            onValueChange: (value) => setGroupBy(value),
-            options: [
-              ["participant", "Participant"],
-              ["thread", "Thread"],
-              ["namespace", "Namespace"],
-              ["provider", "Provider"],
-              ["model", "Model"]
-            ],
-            value: groupBy
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          UsageSelect,
-          {
-            label: "Attribution",
-            onValueChange: (value) => setAttribution(value),
-            options: [
-              ["initiatedBy", "Initiated by"],
-              ["generatedBy", "Generated by"]
-            ],
-            value: attribution
-          }
-        ),
+  const clearFilters = import_react2.default.useCallback(() => {
+    setParticipantType("all");
+    setThreadId("");
+    setParticipantId("");
+    setProvider("");
+    setModel("");
+    setCustomFrom("");
+    setCustomTo("");
+  }, []);
+  const headerControls = import_react2.default.useMemo(() => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    DashboardHeaderControls,
+    {
+      attribution,
+      bucket,
+      config,
+      dimension,
+      groupBy,
+      metricKind,
+      period,
+      setAttribution,
+      setBucket,
+      setDimension,
+      setGroupBy,
+      setMetricKind,
+      setPeriod
+    }
+  ), [
+    attribution,
+    bucket,
+    config,
+    dimension,
+    groupBy,
+    metricKind,
+    period
+  ]);
+  import_react2.default.useEffect(() => {
+    setHeaderControls?.(headerControls);
+    return () => setHeaderControls?.(null);
+  }, [headerControls, setHeaderControls]);
+  import_react2.default.useEffect(() => {
+    setHeaderRefresh?.(() => () => {
+      void loadUsage();
+    });
+    return () => setHeaderRefresh?.(null);
+  }, [loadUsage, setHeaderRefresh]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid h-full min-h-0 grid-rows-[auto_minmax(0,4fr)_minmax(0,5fr)] gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-xl font-semibold tracking-tight", children: config.labels.llmUsageTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: formatUsageRangeLabel(period, range) }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "secondary", children: getGroupByLabel(groupBy) }),
+            groupBy === "participant" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: attribution === "initiatedBy" ? "Initiated by sender" : "Generated by caller" }),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: config.labels.loading })
+          ] })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          UsageSelect,
+          InlineFilters,
           {
-            label: config.labels.usageDimensionLabel,
-            onValueChange: (value) => setDimension(value),
-            options: USAGE_DIMENSIONS.map((nextDimension) => [
-              nextDimension,
-              getUsageDimensionLabel(config.labels, nextDimension)
-            ]),
-            value: dimension
+            activeFilterCount,
+            clearFilters,
+            customFrom,
+            customTo,
+            model,
+            participantId,
+            participantType,
+            period,
+            provider,
+            setCustomFrom,
+            setCustomTo,
+            setModel,
+            setParticipantId,
+            setParticipantType,
+            setProvider,
+            setThreadId,
+            threadId
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rounded-lg border bg-muted/30 p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Filter, { className: "size-4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Filters" }),
-            activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "secondary", children: activeFilterCount })
-          ] }),
-          activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Button,
-            {
-              onClick: () => {
-                setParticipantType("all");
-                setThreadId("");
-                setParticipantId("");
-                setProvider("");
-                setModel("");
-                setCustomFrom("");
-                setCustomTo("");
-              },
-              size: "sm",
-              variant: "ghost",
-              children: "Clear"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid gap-2 md:grid-cols-2 xl:grid-cols-6", children: [
-          period === "custom" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              FilterInput,
-              {
-                label: "From",
-                onChange: setCustomFrom,
-                type: "datetime-local",
-                value: customFrom
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              FilterInput,
-              {
-                label: "To",
-                onChange: setCustomTo,
-                type: "datetime-local",
-                value: customTo
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            UsageSelect,
-            {
-              label: "Type",
-              onValueChange: (value) => setParticipantType(
-                value
-              ),
-              options: [
-                ["all", "All"],
-                ["human", "Human"],
-                ["agent", "Agent"],
-                ["job", "Job"]
-              ],
-              value: participantType
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            FilterInput,
-            {
-              icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Search, { className: "size-3.5" }),
-              label: "Thread",
-              onChange: setThreadId,
-              value: threadId
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            FilterInput,
-            {
-              icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Users, { className: "size-3.5" }),
-              label: "Participant",
-              onChange: setParticipantId,
-              value: participantId
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            FilterInput,
-            {
-              icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Database, { className: "size-3.5" }),
-              label: "Provider",
-              onChange: setProvider,
-              value: provider
-            }
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        UsageSummary,
+        {
+          labels: config.labels,
+          totals
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: "min-h-0 gap-2 overflow-hidden py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardHeader, { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-2 md:flex-row md:items-start md:justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: "text-base", children: getUsageSummaryLabel(config.labels, metricKind, dimension) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+          formatMetricValue(
+            getUsageTotalValue(totals, metricKind, dimension),
+            metricKind
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            FilterInput,
-            {
-              icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Sparkles, { className: "size-3.5" }),
-              label: "Model",
-              onChange: setModel,
-              value: model
-            }
-          )
+          " ",
+          "across ",
+          formatNumber(totals.totalCalls),
+          " calls"
         ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: "gap-3 overflow-hidden py-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardHeader, { className: "px-4 lg:px-5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row md:items-start md:justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: "text-base", children: getUsageSummaryLabel(config.labels, metricKind, dimension) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-            formatMetricValue(
-              getUsageTotalValue(totals, metricKind, dimension),
-              metricKind
-            ),
-            " ",
-            "across ",
-            formatNumber(totals.totalCalls),
-            " calls"
-          ] })
-        ] }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: config.labels.loading })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "px-2 lg:px-4", children: error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 px-2 lg:px-4", children: error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         EmptyDashboard,
         {
           description: config.labels.noResults,
@@ -2151,9 +1974,7 @@ function UsageDashboard({
   ] });
 }
 function UsageSummary({
-  dimension,
   labels,
-  metricKind,
   totals
 }) {
   const summary = [
@@ -2170,28 +1991,19 @@ function UsageSummary({
       icon: import_lucide_react6.Activity
     },
     {
-      label: labels.usageCacheRead,
-      value: formatMetricValue(totals.cacheReadInputCostUsd, "cost"),
-      detail: `${formatMetricValue(totals.cacheReadInputTokens, "tokens")} tokens`,
-      icon: import_lucide_react6.Database
-    },
-    {
-      label: getUsageSummaryLabel(labels, metricKind, dimension),
-      value: formatMetricValue(
-        getUsageTotalValue(totals, metricKind, dimension),
-        metricKind
-      ),
-      detail: labels.usageTotal,
+      label: "Calls",
+      value: formatMetricValue(totals.totalCalls, "calls"),
+      detail: totals.totalCalls > 0 ? `${formatMetricValue(totals.totalCostUsd / totals.totalCalls, "cost")} avg` : "No calls",
       icon: import_lucide_react6.Sparkles
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-4", children: summary.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { className: "gap-3 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grid gap-2 md:grid-cols-3", children: summary.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { className: "gap-0 rounded-lg py-2 shadow-xs", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "px-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-sm text-muted-foreground", children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 truncate text-2xl font-semibold tracking-tight", children: item.value }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: item.detail })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-lg font-semibold tracking-tight", children: item.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-[11px] text-muted-foreground", children: item.detail })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-md border bg-muted/50 p-2 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(item.icon, { className: "size-4" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-md border bg-muted/50 p-1.5 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(item.icon, { className: "size-4" }) })
   ] }) }) }, item.label)) });
 }
 function UsageChart({
@@ -2201,7 +2013,7 @@ function UsageChart({
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ChartContainer,
     {
-      className: "h-[320px] w-full",
+      className: "h-full min-h-[220px] w-full",
       config: chartState.config,
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         import_recharts.BarChart,
@@ -2275,8 +2087,8 @@ function UsageTable({
 }) {
   const totalValue = getUsageTotalValue(totals, metricKind, dimension);
   const filterable = groupBy !== "namespace";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: "gap-3 py-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardHeader, { className: "px-4 lg:px-5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: "min-h-0 gap-2 overflow-hidden py-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardHeader, { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: "text-base", children: "Usage detail" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Badge, { variant: "outline", children: [
         formatNumber(rows.length),
@@ -2284,8 +2096,8 @@ function UsageTable({
         getGroupByLabel(groupBy).toLowerCase()
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "px-0", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-5 py-4 text-sm text-muted-foreground", children: labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full min-w-[940px] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "border-b text-left text-xs uppercase tracking-[0.12em] text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 overflow-hidden px-0", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-5 py-4 text-sm text-muted-foreground", children: labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full min-w-[940px] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "sticky top-0 z-10 bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "border-b text-left text-xs uppercase tracking-[0.12em] text-muted-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-5 py-2.5 font-medium", children: getGroupByLabel(groupBy) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: getUsageSummaryLabel(labels, metricKind, dimension) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Share" }),
@@ -2342,24 +2154,271 @@ function UsageTable({
     ] }) }) })
   ] });
 }
+function DashboardHeaderControls({
+  attribution,
+  bucket,
+  config,
+  dimension,
+  groupBy,
+  metricKind,
+  period,
+  setAttribution,
+  setBucket,
+  setDimension,
+  setGroupBy,
+  setMetricKind,
+  setPeriod
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Period",
+        onValueChange: (value) => setPeriod(value),
+        options: [
+          ["24h", config.labels.range24h],
+          ["7d", config.labels.range7d],
+          ["30d", config.labels.range30d],
+          ["custom", "Custom"]
+        ],
+        value: period,
+        width: "w-[86px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Bucket",
+        onValueChange: (value) => setBucket(value),
+        options: [
+          ["minute", "Minute"],
+          ["hour", "Hour"],
+          ["day", "Day"],
+          ["week", "Week"],
+          ["month", "Month"]
+        ],
+        value: bucket,
+        width: "w-[92px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: config.labels.usageMetricLabel,
+        onValueChange: (value) => setMetricKind(value),
+        options: [
+          ["cost", config.labels.usageMetricCost],
+          ["tokens", config.labels.usageMetricTokens],
+          ["calls", "Calls"]
+        ],
+        value: metricKind,
+        width: "w-[94px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Group",
+        onValueChange: (value) => setGroupBy(value),
+        options: [
+          ["participant", "Participant"],
+          ["thread", "Thread"],
+          ["namespace", "Namespace"],
+          ["provider", "Provider"],
+          ["model", "Model"]
+        ],
+        value: groupBy,
+        width: "w-[128px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Attribution",
+        onValueChange: (value) => setAttribution(value),
+        options: [
+          ["initiatedBy", "Initiated by"],
+          ["generatedBy", "Generated by"]
+        ],
+        value: attribution,
+        width: "w-[132px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: config.labels.usageDimensionLabel,
+        onValueChange: (value) => setDimension(value),
+        options: USAGE_DIMENSIONS.map((nextDimension) => [
+          nextDimension,
+          getUsageDimensionLabel(config.labels, nextDimension)
+        ]),
+        value: dimension,
+        width: "w-[116px]"
+      }
+    )
+  ] });
+}
+function InlineFilters({
+  activeFilterCount,
+  clearFilters,
+  customFrom,
+  customTo,
+  model,
+  participantId,
+  participantType,
+  period,
+  provider,
+  setCustomFrom,
+  setCustomTo,
+  setModel,
+  setParticipantId,
+  setParticipantType,
+  setProvider,
+  setThreadId,
+  threadId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex max-w-full flex-wrap items-end justify-end gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 pb-1 text-xs font-medium text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Filter, { className: "size-3.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Filters" }),
+      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "secondary", children: activeFilterCount })
+    ] }),
+    period === "custom" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        FilterInput,
+        {
+          compact: true,
+          label: "From",
+          onChange: setCustomFrom,
+          type: "datetime-local",
+          value: customFrom
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        FilterInput,
+        {
+          compact: true,
+          label: "To",
+          onChange: setCustomTo,
+          type: "datetime-local",
+          value: customTo
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      UsageSelect,
+      {
+        compact: true,
+        label: "Type",
+        onValueChange: (value) => setParticipantType(value),
+        options: [
+          ["all", "All"],
+          ["human", "Human"],
+          ["agent", "Agent"],
+          ["job", "Job"]
+        ],
+        value: participantType
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Search, { className: "size-3.5" }),
+        label: "Thread",
+        onChange: setThreadId,
+        value: threadId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Users, { className: "size-3.5" }),
+        label: "Participant",
+        onChange: setParticipantId,
+        value: participantId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Database, { className: "size-3.5" }),
+        label: "Provider",
+        onChange: setProvider,
+        value: provider
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Sparkles, { className: "size-3.5" }),
+        label: "Model",
+        onChange: setModel,
+        value: model
+      }
+    ),
+    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        className: "h-8",
+        onClick: clearFilters,
+        size: "sm",
+        variant: "ghost",
+        children: "Clear"
+      }
+    )
+  ] });
+}
+function HeaderSelect(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      SelectTrigger,
+      {
+        "aria-label": props.label,
+        className: cn("h-8 bg-background text-xs", props.width),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
+  ] });
+}
 function UsageSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[116px]"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectTrigger, { className: "h-9 w-full min-w-0 bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        SelectTrigger,
+        {
+          "aria-label": props.label,
+          className: cn(
+            "w-full min-w-0 bg-background",
+            props.compact ? "h-8 text-xs" : "h-9"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
     ] })
   ] });
 }
 function FilterInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[150px]"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
       props.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: props.icon }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Input,
         {
-          className: cn("h-9 bg-background", props.icon && "pl-8"),
+          "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
@@ -3610,6 +3669,8 @@ var CopilotzAdmin = ({
   const [route, setRoute] = (0, import_react8.useState)({ page: config.defaultPage });
   const [namespace, setNamespace] = (0, import_react8.useState)(config.namespace);
   const [collections, setCollections] = (0, import_react8.useState)([]);
+  const [headerControls, setHeaderControls] = (0, import_react8.useState)(null);
+  const [headerRefresh, setHeaderRefresh] = (0, import_react8.useState)(null);
   const [threadSearch, setThreadSearch] = (0, import_react8.useState)("");
   const [participantSearch, setParticipantSearch] = (0, import_react8.useState)("");
   const [agentSearch, setAgentSearch] = (0, import_react8.useState)("");
@@ -3718,7 +3779,9 @@ var CopilotzAdmin = ({
             onThreadSearchChange: setThreadSearch,
             onParticipantSearchChange: setParticipantSearch,
             onAgentSearchChange: setAgentSearch,
-            onThreadClick: handleThreadClick
+            onThreadClick: handleThreadClick,
+            setHeaderControls,
+            setHeaderRefresh
           }
         );
       case "threads":
@@ -3815,15 +3878,18 @@ var CopilotzAdmin = ({
             {
               config,
               currentRoute: route,
-              range: admin.filters.range,
-              interval: admin.filters.interval,
-              onRangeChange: admin.setRange,
-              onIntervalChange: admin.setInterval,
-              onRefresh: () => void admin.refresh(),
-              isLoading: admin.isLoading
+              onRefresh: () => {
+                if (route.page === "dashboard" && headerRefresh) {
+                  headerRefresh();
+                  return;
+                }
+                void admin.refresh();
+              },
+              isLoading: admin.isLoading,
+              controls: route.page === "dashboard" ? headerControls : null
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-auto p-4", children: renderCurrentView() })
         ] }) })
       ]
     }