@copilotz/admin 0.9.24 → 0.9.27

package/dist/index.js

@@ -256,6 +256,22 @@ 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,
+    attribution: filters.attribution,
+    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)}`,
@@ -520,6 +536,16 @@ 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",
@@ -1513,7 +1539,26 @@ var AdminHeader = ({
 };
 
 // src/components/views/DashboardView.tsx
-import React5 from "react";
+import React6 from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Tooltip as Tooltip2,
+  XAxis,
+  YAxis
+} from "recharts";
+import {
+  Activity as Activity2,
+  Database as Database2,
+  Filter,
+  RefreshCw as RefreshCw2,
+  Search,
+  Sparkles,
+  Users as Users2,
+  Wallet
+} from "lucide-react";
 
 // src/components/ui/badge.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
@@ -1552,8 +1597,124 @@ function Badge({
   );
 }
 
-// src/components/views/DashboardView.tsx
+// src/components/ui/chart.tsx
+import * as React5 from "react";
+import * as RechartsPrimitive from "recharts";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var ChartContext = React5.createContext(null);
+function useChart() {
+  const context = React5.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a ChartContainer");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  config,
+  children,
+  ...props
+}) {
+  const uniqueId = React5.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx12(ChartContext.Provider, { value: config, children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-chart": chartId,
+      className: cn(
+        "flex aspect-auto justify-center text-xs text-muted-foreground [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/70 [&_.recharts-cursor]:fill-muted [&_.recharts-legend-wrapper]:text-muted-foreground [&_.recharts-tooltip-cursor]:fill-muted",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx12("style", { children: Object.entries(config).map(([key, item]) => {
+          return `[data-chart=${chartId}] { --color-${key}: ${item.color}; }`;
+        }).join("\n") }),
+        /* @__PURE__ */ jsx12(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+}
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  className,
+  formatter,
+  labelFormatter
+}) {
+  const config = useChart();
+  if (!active || !payload?.length) return null;
+  const total = payload.reduce((sum, item) => {
+    const value = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+    return sum + (Number.isFinite(value) ? value : 0);
+  }, 0);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "min-w-44 rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "mb-2 flex items-center justify-between gap-4 border-b pb-2", children: [
+          /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium text-muted-foreground", children: labelFormatter ? labelFormatter(label) : label }),
+          /* @__PURE__ */ jsx12("p", { className: "text-xs font-semibold text-foreground", children: formatter ? formatter(total) : total })
+        ] }),
+        /* @__PURE__ */ jsx12("div", { className: "space-y-1.5", children: payload.filter((item) => Number(item.value ?? 0) > 0).map((item) => {
+          const key = String(item.dataKey ?? item.name ?? "");
+          const itemConfig = config[key];
+          const color = item.color ?? itemConfig?.color ?? "currentColor";
+          return /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              className: "grid grid-cols-[0.6rem_1fr_auto] items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    className: "size-2 rounded-[2px]",
+                    style: { backgroundColor: color }
+                  }
+                ),
+                /* @__PURE__ */ jsx12("span", { className: "max-w-48 truncate text-muted-foreground", children: itemConfig?.label ?? item.name ?? key }),
+                /* @__PURE__ */ jsx12("span", { className: "font-medium text-foreground", children: formatter ? formatter(item.value ?? 0) : item.value })
+              ]
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+}
+function ChartLegendContent({
+  payload,
+  className
+}) {
+  const config = useChart();
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx12("div", { className: cn("flex flex-wrap items-center gap-x-4 gap-y-2", className), children: payload.map((item) => {
+    const key = String(item.dataKey ?? item.value ?? "");
+    const itemConfig = config[key];
+    return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: "size-2 rounded-[2px]",
+          style: {
+            backgroundColor: item.color ?? itemConfig?.color ?? "currentColor"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx12("span", { className: "max-w-52 truncate text-xs text-muted-foreground", children: itemConfig?.label ?? item.value ?? key })
+    ] }, key);
+  }) });
+}
+
+// src/components/views/DashboardView.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var DashboardView = ({
   config,
   overview,
@@ -1568,423 +1729,650 @@ var DashboardView = ({
   onThreadSearchChange,
   onParticipantSearchChange,
   onAgentSearchChange,
-  onThreadClick
+  onThreadClick,
+  namespace
 }) => {
-  const [usageMetricKind, setUsageMetricKind] = React5.useState(
-    "tokens"
+  void overview;
+  void activity;
+  void threads;
+  void participants;
+  void agents;
+  void interval;
+  void threadSearch;
+  void participantSearch;
+  void agentSearch;
+  void onThreadSearchChange;
+  void onParticipantSearchChange;
+  void onAgentSearchChange;
+  void onThreadClick;
+  if (!config.features.showOverview) {
+    return /* @__PURE__ */ jsx13(
+      EmptyDashboard,
+      {
+        description: config.labels.emptyDescription,
+        title: config.labels.emptyTitle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx13(
+    UsageDashboard,
+    {
+      config,
+      namespace
+    }
   );
-  const [usageDimension, setUsageDimension] = React5.useState(
-    "total"
+};
+function UsageDashboard({
+  config,
+  namespace
+}) {
+  const [period, setPeriod] = React6.useState("7d");
+  const [bucket, setBucket] = React6.useState("day");
+  const [metricKind, setMetricKind] = React6.useState(
+    "cost"
   );
-  const llmSummaryValue = overview ? getOverviewUsageValue(overview, usageMetricKind, usageDimension) : 0;
-  const llmSummaryLabel = getUsageSummaryLabel(
-    config.labels,
-    usageMetricKind,
-    usageDimension
+  const [dimension, setDimension] = React6.useState("total");
+  const [groupBy, setGroupBy] = React6.useState(
+    "participant"
   );
-  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,
-      value: overview?.messageTotals.total ?? 0,
-      detail: `${overview?.messageTotals.toolCallMessages ?? 0} tool-call messages`
-    },
-    {
-      label: config.labels.activeThreadsCard,
-      value: overview?.threadTotals.active ?? 0,
-      detail: `${overview?.threadTotals.total ?? 0} total threads`
-    },
-    {
-      label: config.labels.participantsCard,
-      value: overview?.participantTotals.total ?? 0,
-      detail: `${overview?.participantTotals.agents ?? 0} agents`
-    },
-    {
-      label: llmSummaryLabel,
-      value: llmSummaryValue,
-      detail: `${overview?.llmTotals.totalCalls ?? 0} ${config.labels.usageCallsDetail}`,
-      metricKind: usageMetricKind
-    },
-    {
-      label: config.labels.queueCard,
-      value: overview?.queueTotals.pending ?? 0,
-      detail: `${overview?.queueTotals.failed ?? 0} failed`
+  const [attribution, setAttribution] = React6.useState(
+    "initiatedBy"
+  );
+  const [participantType, setParticipantType] = React6.useState("all");
+  const [threadId, setThreadId] = React6.useState("");
+  const [participantId, setParticipantId] = React6.useState("");
+  const [provider, setProvider] = React6.useState("");
+  const [model, setModel] = React6.useState("");
+  const [customFrom, setCustomFrom] = React6.useState("");
+  const [customTo, setCustomTo] = React6.useState("");
+  const [usage, setUsage] = React6.useState(null);
+  const [isLoading, setIsLoading] = React6.useState(false);
+  const [error, setError] = React6.useState(null);
+  const range = React6.useMemo(() => getUsageRange(period, customFrom, customTo), [
+    customFrom,
+    customTo,
+    period
+  ]);
+  const loadUsage = React6.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const next = await fetchAdminUsage({
+        from: range.from,
+        to: range.to,
+        interval: bucket,
+        metric: metricKind,
+        groupBy,
+        attribution,
+        namespace: namespace || void 0,
+        participantType,
+        threadId: emptyToUndefined(threadId),
+        participantId: emptyToUndefined(participantId),
+        provider: emptyToUndefined(provider),
+        model: emptyToUndefined(model)
+      }, {
+        baseUrl: config.baseUrl,
+        getRequestHeaders: config.getRequestHeaders
+      });
+      setUsage(next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load usage");
+      setUsage(null);
+    } finally {
+      setIsLoading(false);
     }
-  ];
-  const isEmpty = cards.every((card) => card.value === 0) && activity.length === 0 && threads.length === 0 && participants.length === 0 && agents.length === 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
-    isEmpty && /* @__PURE__ */ jsxs7("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
-    ] }),
-    config.features.showOverview && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs7(
-        "div",
+  }, [
+    attribution,
+    bucket,
+    config.baseUrl,
+    config.getRequestHeaders,
+    groupBy,
+    metricKind,
+    model,
+    namespace,
+    participantId,
+    participantType,
+    provider,
+    range.from,
+    range.to,
+    threadId
+  ]);
+  React6.useEffect(() => {
+    void loadUsage();
+  }, [loadUsage]);
+  const points = usage?.points ?? [];
+  const totals = usage?.totals ?? EMPTY_TOTALS;
+  const chartState = React6.useMemo(() => buildChartState(points, metricKind, dimension, bucket), [
+    bucket,
+    dimension,
+    metricKind,
+    points
+  ]);
+  const groupedRows = React6.useMemo(() => aggregateUsageRows(points, metricKind, dimension), [
+    dimension,
+    metricKind,
+    points
+  ]);
+  const activeFilterCount = [
+    participantType !== "all" ? participantType : "",
+    threadId,
+    participantId,
+    provider,
+    model,
+    period === "custom" ? customFrom : "",
+    period === "custom" ? customTo : ""
+  ].filter((value) => value.trim().length > 0).length;
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx13("h2", { className: "text-2xl font-semibold tracking-tight", children: config.labels.llmUsageTitle }),
+        /* @__PURE__ */ jsxs8("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx13(Badge, { variant: "outline", children: formatUsageRangeLabel(period, range) }),
+          /* @__PURE__ */ jsx13(Badge, { variant: "secondary", children: getGroupByLabel(groupBy) }),
+          groupBy === "participant" && /* @__PURE__ */ jsx13(Badge, { variant: "outline", children: attribution === "initiatedBy" ? "Initiated by sender" : "Generated by caller" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs8(
+        Button,
         {
-          className: "rounded-xl border bg-card p-5 shadow-sm",
+          className: "w-full sm:w-auto",
+          disabled: isLoading,
+          onClick: () => void loadUsage(),
+          size: "sm",
+          variant: "outline",
           children: [
-            /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatMetricValue(
-              card.value,
-              card.metricKind ?? "tokens"
-            ) }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
+            /* @__PURE__ */ jsx13(RefreshCw2, { className: cn("size-4", isLoading && "animate-spin") }),
+            config.labels.refresh
           ]
-        },
-        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,
+    /* @__PURE__ */ jsx13(
+      UsageSummary,
+      {
+        dimension,
+        labels: config.labels,
+        metricKind,
+        totals
+      }
+    ),
+    /* @__PURE__ */ jsx13(Card, { className: "gap-4 overflow-hidden py-4", children: /* @__PURE__ */ jsxs8(CardContent, { className: "space-y-4 px-4 lg:px-5", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "grid gap-2 md:grid-cols-2 xl:grid-cols-6", children: [
+        /* @__PURE__ */ jsx13(
+          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__ */ jsx13(
+          UsageSelect,
+          {
+            label: "Bucket",
+            onValueChange: (value) => setBucket(value),
+            options: [
+              ["minute", "Minute"],
+              ["hour", "Hour"],
+              ["day", "Day"],
+              ["week", "Week"],
+              ["month", "Month"]
+            ],
+            value: bucket
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          UsageSelect,
+          {
+            label: config.labels.usageMetricLabel,
+            onValueChange: (value) => setMetricKind(value),
+            options: [
+              ["cost", config.labels.usageMetricCost],
+              ["tokens", config.labels.usageMetricTokens],
+              ["calls", "Calls"]
+            ],
+            value: metricKind
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          UsageSelect,
+          {
+            label: "Group",
+            onValueChange: (value) => setGroupBy(value),
+            options: [
+              ["participant", "Participant"],
+              ["thread", "Thread"],
+              ["namespace", "Namespace"],
+              ["provider", "Provider"],
+              ["model", "Model"]
+            ],
+            value: groupBy
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          UsageSelect,
+          {
+            label: "Attribution",
+            onValueChange: (value) => setAttribution(value),
+            options: [
+              ["initiatedBy", "Initiated by"],
+              ["generatedBy", "Generated by"]
+            ],
+            value: attribution
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          UsageSelect,
+          {
+            label: config.labels.usageDimensionLabel,
+            onValueChange: (value) => setDimension(value),
+            options: USAGE_DIMENSIONS.map((nextDimension) => [
+              nextDimension,
+              getUsageDimensionLabel(config.labels, nextDimension)
+            ]),
+            value: dimension
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "rounded-lg border bg-muted/30 p-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
+            /* @__PURE__ */ jsx13(Filter, { className: "size-4" }),
+            /* @__PURE__ */ jsx13("span", { children: "Filters" }),
+            activeFilterCount > 0 && /* @__PURE__ */ jsx13(Badge, { variant: "secondary", children: activeFilterCount })
+          ] }),
+          activeFilterCount > 0 && /* @__PURE__ */ jsx13(
+            Button,
+            {
+              onClick: () => {
+                setParticipantType("all");
+                setThreadId("");
+                setParticipantId("");
+                setProvider("");
+                setModel("");
+                setCustomFrom("");
+                setCustomTo("");
+              },
+              size: "sm",
+              variant: "ghost",
+              children: "Clear"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "grid gap-2 md:grid-cols-2 xl:grid-cols-6", children: [
+          period === "custom" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+            /* @__PURE__ */ jsx13(
+              FilterInput,
               {
-                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 })
-                  ] })
-                ]
+                label: "From",
+                onChange: setCustomFrom,
+                type: "datetime-local",
+                value: customFrom
               }
-            )
-          ] }),
-          /* @__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,
+            ),
+            /* @__PURE__ */ jsx13(
+              FilterInput,
               {
-                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)) })
-                ]
+                label: "To",
+                onChange: setCustomTo,
+                type: "datetime-local",
+                value: customTo
               }
             )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx12("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: usageBreakdownCards.map((card) => {
-        const isSelected = card.dimension === usageDimension;
-        return /* @__PURE__ */ jsxs7(
-          "div",
-          {
-            className: cn(
-              "rounded-xl border bg-card p-5 shadow-sm transition-colors",
-              isSelected && "border-primary/60 ring-1 ring-primary/15"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
-                /* @__PURE__ */ jsxs7("div", { children: [
-                  /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-                  /* @__PURE__ */ jsx12("p", { className: "mt-3 text-2xl font-semibold tracking-tight", children: formatMetricValue(card.value, usageMetricKind) })
-                ] }),
-                isSelected && /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: config.labels.usageDimensionLabel })
-              ] }),
-              /* @__PURE__ */ jsxs7("p", { className: "mt-2 text-xs text-muted-foreground", children: [
-                overview?.llmTotals.totalCalls ?? 0,
-                " ",
-                config.labels.usageCallsDetail
-              ] })
-            ]
-          },
-          card.dimension
-        );
-      }) })
-    ] }),
-    config.features.showActivity && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ jsx12(
-        ActivityChart,
-        {
-          interval,
-          labels: config.labels,
-          maxBars: config.ui.maxActivityBars,
-          points: activity,
-          usageDimension,
-          usageMetricKind
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "grid gap-6 lg:grid-cols-3", children: [
-      config.features.showThreads && /* @__PURE__ */ jsx12(
-        DataTable,
-        {
-          rows: threads,
-          searchPlaceholder: config.labels.threadSearchPlaceholder,
-          searchValue: threadSearch,
-          setSearchValue: onThreadSearchChange,
-          title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ jsx12(
-            ThreadsTable,
+          ] }),
+          /* @__PURE__ */ jsx13(
+            UsageSelect,
             {
-              rows: threads,
-              labels: config.labels,
-              onThreadClick
+              label: "Type",
+              onValueChange: (value) => setParticipantType(
+                value
+              ),
+              options: [
+                ["all", "All"],
+                ["human", "Human"],
+                ["agent", "Agent"],
+                ["job", "Job"]
+              ],
+              value: participantType
             }
-          )
-        }
-      ),
-      config.features.showParticipants && /* @__PURE__ */ jsx12(
-        DataTable,
-        {
-          rows: participants,
-          searchPlaceholder: config.labels.participantSearchPlaceholder,
-          searchValue: participantSearch,
-          setSearchValue: onParticipantSearchChange,
-          title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ jsx12(ParticipantsTable, { rows: participants, labels: config.labels })
-        }
-      ),
-      config.features.showAgents && /* @__PURE__ */ jsx12(
-        DataTable,
-        {
-          rows: agents,
-          searchPlaceholder: config.labels.agentSearchPlaceholder,
-          searchValue: agentSearch,
-          setSearchValue: onAgentSearchChange,
-          title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ jsx12(
-            AgentsTable,
+          ),
+          /* @__PURE__ */ jsx13(
+            FilterInput,
             {
-              rows: agents,
-              labels: config.labels,
-              usageMetricKind,
-              usageDimension
+              icon: /* @__PURE__ */ jsx13(Search, { className: "size-3.5" }),
+              label: "Thread",
+              onChange: setThreadId,
+              value: threadId
             }
-          )
-        }
-      )
-    ] })
-  ] });
-};
-function SectionHeading({ title }) {
-  return /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold tracking-tight", children: title });
-}
-function ActivityChart(props) {
-  const trimmedPoints = props.points.slice(-props.maxBars);
-  const maxUsageValue = Math.max(
-    ...trimmedPoints.map(
-      (point) => getActivityUsageValue(
-        point,
-        props.usageMetricKind,
-        props.usageDimension
-      )
-    ),
-    1
-  );
-  return /* @__PURE__ */ jsx12("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx12("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => {
-    const usageValue = getActivityUsageValue(
-      point,
-      props.usageMetricKind,
-      props.usageDimension
-    );
-    return /* @__PURE__ */ jsxs7(
-      "div",
-      {
-        className: "flex min-w-0 flex-1 flex-col items-center gap-2",
-        children: [
-          /* @__PURE__ */ jsx12("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx12(
-            "div",
+          ),
+          /* @__PURE__ */ jsx13(
+            FilterInput,
             {
-              className: "w-full rounded-md bg-primary transition-all",
-              style: {
-                height: `${Math.max(usageValue / maxUsageValue * 100, 8)}%`
-              }
+              icon: /* @__PURE__ */ jsx13(Users2, { className: "size-3.5" }),
+              label: "Participant",
+              onChange: setParticipantId,
+              value: participantId
             }
-          ) }),
-          /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-            /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(usageValue, props.usageMetricKind) }),
-            /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
-              formatNumber(point.totalCalls),
-              " ",
-              props.labels.usageCallsDetail
-            ] })
+          ),
+          /* @__PURE__ */ jsx13(
+            FilterInput,
+            {
+              icon: /* @__PURE__ */ jsx13(Database2, { className: "size-3.5" }),
+              label: "Provider",
+              onChange: setProvider,
+              value: provider
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            FilterInput,
+            {
+              icon: /* @__PURE__ */ jsx13(Sparkles, { className: "size-3.5" }),
+              label: "Model",
+              onChange: setModel,
+              value: model
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs8(Card, { className: "gap-3 overflow-hidden py-4", children: [
+      /* @__PURE__ */ jsx13(CardHeader, { className: "px-4 lg:px-5", children: /* @__PURE__ */ jsxs8("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"
           ] })
-        ]
-      },
-      point.bucket
-    );
-  }) }) });
-}
-function DataTable(props) {
-  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: props.title }),
-      /* @__PURE__ */ jsx12(
-        Input,
+        ] }),
+        isLoading && /* @__PURE__ */ jsx13(Badge, { variant: "outline", children: config.labels.loading })
+      ] }) }),
+      /* @__PURE__ */ jsx13(CardContent, { className: "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,
         {
-          className: "h-8 w-full max-w-44",
-          onChange: (event) => props.setSearchValue(event.target.value),
-          placeholder: props.searchPlaceholder,
-          value: props.searchValue
+          description: config.labels.noResults,
+          title: "No usage"
         }
-      )
+      ) : /* @__PURE__ */ jsx13(
+        UsageChart,
+        {
+          chartState,
+          metricKind
+        }
+      ) })
     ] }),
-    props.rows.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
+    /* @__PURE__ */ jsx13(
+      UsageTable,
+      {
+        dimension,
+        groupBy,
+        labels: config.labels,
+        metricKind,
+        onRowFilter: (row) => {
+          if (groupBy === "thread") setThreadId(row.groupKey);
+          if (groupBy === "participant") setParticipantId(row.groupKey);
+          if (groupBy === "provider") setProvider(row.groupKey);
+          if (groupBy === "model") setModel(row.groupKey);
+        },
+        rows: groupedRows,
+        totals
+      }
+    )
   ] });
 }
-function ThreadsTable({
-  rows,
+function UsageSummary({
+  dimension,
   labels,
-  onThreadClick
+  metricKind,
+  totals
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs7(
-    "div",
+  const summary = [
     {
-      className: cn(
-        "rounded-lg border bg-muted/50 p-4",
-        onThreadClick && "cursor-pointer hover:bg-muted transition-colors"
-      ),
-      onClick: () => onThreadClick?.(thread.threadId),
-      children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: thread.name }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
-          ] }),
-          /* @__PURE__ */ jsx12(
-            Badge,
-            {
-              variant: thread.status === "archived" ? "secondary" : "default",
-              children: thread.status === "archived" ? labels.statusArchived : labels.statusActive
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(thread.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            thread.participantIds.length,
-            " participants"
-          ] }),
-          /* @__PURE__ */ jsx12("span", { children: formatDate(thread.lastActivityAt) })
-        ] })
-      ]
+      label: labels.usageMetricCost,
+      value: formatMetricValue(totals.totalCostUsd, "cost"),
+      detail: `${formatNumber(totals.totalCalls)} ${labels.usageCallsDetail}`,
+      icon: Wallet
     },
-    thread.threadId
-  )) });
+    {
+      label: labels.usageMetricTokens,
+      value: formatMetricValue(totals.totalTokens, "tokens"),
+      detail: `${formatMetricValue(totals.inputTokens, "tokens")} input`,
+      icon: Activity2
+    },
+    {
+      label: labels.usageCacheRead,
+      value: formatMetricValue(totals.cacheReadInputCostUsd, "cost"),
+      detail: `${formatMetricValue(totals.cacheReadInputTokens, "tokens")} tokens`,
+      icon: Database2
+    },
+    {
+      label: getUsageSummaryLabel(labels, metricKind, dimension),
+      value: formatMetricValue(
+        getUsageTotalValue(totals, metricKind, dimension),
+        metricKind
+      ),
+      detail: labels.usageTotal,
+      icon: Sparkles
+    }
+  ];
+  return /* @__PURE__ */ jsx13("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-4", children: summary.map((item) => /* @__PURE__ */ jsx13(Card, { className: "gap-3 py-4", children: /* @__PURE__ */ jsx13(CardContent, { className: "px-4", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx13("p", { className: "truncate text-sm text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-1 truncate text-2xl font-semibold tracking-tight", children: item.value }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: item.detail })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "rounded-md border bg-muted/50 p-2 text-muted-foreground", children: /* @__PURE__ */ jsx13(item.icon, { className: "size-4" }) })
+  ] }) }) }, item.label)) });
 }
-function ParticipantsTable({
-  rows,
-  labels
+function UsageChart({
+  chartState,
+  metricKind
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ jsxs7(
-    "div",
+  return /* @__PURE__ */ jsx13(
+    ChartContainer,
     {
-      className: "rounded-lg border bg-muted/50 p-4",
-      children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: participant.displayName }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
-          ] }),
-          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
-        ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(participant.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(participant.threadCount),
-            " threads"
-          ] }),
-          /* @__PURE__ */ jsx12("span", { children: formatDate(participant.lastActivityAt) })
-        ] })
-      ]
-    },
-    `${participant.namespace}:${participant.externalId}`
-  )) });
+      className: "h-[320px] w-full",
+      config: chartState.config,
+      children: /* @__PURE__ */ jsxs8(
+        BarChart,
+        {
+          accessibilityLayer: true,
+          data: chartState.data,
+          margin: { left: 8, right: 8, top: 12 },
+          children: [
+            /* @__PURE__ */ jsx13(CartesianGrid, { vertical: false }),
+            /* @__PURE__ */ jsx13(
+              XAxis,
+              {
+                axisLine: false,
+                dataKey: "label",
+                tickLine: false,
+                tickMargin: 10
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              YAxis,
+              {
+                axisLine: false,
+                tickFormatter: (value) => formatCompactMetric(value, metricKind),
+                tickLine: false,
+                width: 60
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              Tooltip2,
+              {
+                content: /* @__PURE__ */ jsx13(
+                  ChartTooltipContent,
+                  {
+                    formatter: (value) => formatMetricValue(Number(value), metricKind),
+                    labelFormatter: (value) => String(value ?? "")
+                  }
+                ),
+                cursor: false
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              Legend,
+              {
+                content: /* @__PURE__ */ jsx13(ChartLegendContent, { className: "justify-center pt-3" })
+              }
+            ),
+            chartState.series.map((series) => /* @__PURE__ */ jsx13(
+              Bar,
+              {
+                dataKey: series.id,
+                fill: `var(--color-${series.id})`,
+                radius: [4, 4, 0, 0],
+                stackId: "usage"
+              },
+              series.id
+            ))
+          ]
+        }
+      )
+    }
+  );
 }
-function AgentsTable({
-  rows,
+function UsageTable({
+  dimension,
+  groupBy,
   labels,
-  usageMetricKind,
-  usageDimension
+  metricKind,
+  onRowFilter,
+  rows,
+  totals
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className: "rounded-lg border bg-muted/50 p-4",
-      children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: agent.displayName }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
-          ] }),
-          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
-        ] }),
-        /* @__PURE__ */ jsx12("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
-          {
-            label: "Messages",
-            value: formatNumber(agent.messageCount)
-          },
-          {
-            label: "LLM calls",
-            value: formatNumber(agent.llmCallCount)
-          },
+  const totalValue = getUsageTotalValue(totals, metricKind, dimension);
+  const filterable = groupBy !== "namespace";
+  return /* @__PURE__ */ jsxs8(Card, { className: "gap-3 py-4", children: [
+    /* @__PURE__ */ jsx13(CardHeader, { className: "px-4 lg:px-5", 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()
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx13(CardContent, { className: "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: "overflow-x-auto", children: /* @__PURE__ */ jsxs8("table", { className: "w-full min-w-[940px] text-sm", children: [
+      /* @__PURE__ */ jsx13("thead", { 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",
           {
-            label: "Tool calls",
-            value: formatNumber(agent.toolCallMessageCount)
+            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
+              ) })
+            ]
           },
-          {
-            label: getUsageSummaryLabel(labels, usageMetricKind, usageDimension),
-            value: formatMetricValue(
-              getAgentUsageValue(agent, usageMetricKind, usageDimension),
-              usageMetricKind
-            )
-          }
-        ].map((item) => /* @__PURE__ */ jsxs7("div", { children: [
-          /* @__PURE__ */ jsx12("p", { className: "font-medium text-foreground", children: item.value }),
-          /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: item.label })
-        ] }, item.label)) })
-      ]
-    },
-    `${agent.namespace}:${agent.agentId}`
-  )) });
+          row.groupKey
+        );
+      }) })
+    ] }) }) })
+  ] });
 }
-function formatBucket(bucket, interval) {
-  const date = new Date(bucket);
-  if (Number.isNaN(date.getTime())) return bucket;
-  return interval === "hour" ? date.toLocaleString(void 0, {
-    hour: "numeric",
-    month: "short",
-    day: "numeric"
-  }) : date.toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric"
-  });
+function UsageSelect(props) {
+  return /* @__PURE__ */ jsxs8("label", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx13("span", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.label }),
+    /* @__PURE__ */ jsxs8(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+      /* @__PURE__ */ jsx13(SelectTrigger, { className: "h-9 w-full min-w-0 bg-background", children: /* @__PURE__ */ jsx13(SelectValue, {}) }),
+      /* @__PURE__ */ jsx13(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ jsx13(SelectItem, { value, children: label }, value)) })
+    ] })
+  ] });
 }
-function formatDate(value) {
-  if (!value) return "No activity";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString(void 0, {
-    month: "short",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit"
-  });
+function FilterInput(props) {
+  return /* @__PURE__ */ jsxs8("label", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx13("span", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", 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,
+        {
+          className: cn("h-9 bg-background", props.icon && "pl-8"),
+          onChange: (event) => props.onChange(event.target.value),
+          type: props.type ?? "text",
+          value: props.value
+        }
+      )
+    ] })
+  ] });
 }
-function formatNumber(value) {
-  return new Intl.NumberFormat().format(value);
+function EmptyDashboard({
+  description,
+  title
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "rounded-lg border border-dashed bg-muted/20 p-8 text-center", children: [
+    /* @__PURE__ */ jsx13("h3", { className: "text-base font-semibold", children: title }),
+    /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
+  ] });
 }
+var EMPTY_TOTALS = {
+  inputTokens: 0,
+  outputTokens: 0,
+  reasoningTokens: 0,
+  cacheReadInputTokens: 0,
+  cacheCreationInputTokens: 0,
+  totalTokens: 0,
+  inputCostUsd: 0,
+  outputCostUsd: 0,
+  reasoningCostUsd: 0,
+  cacheReadInputCostUsd: 0,
+  cacheCreationInputCostUsd: 0,
+  totalCostUsd: 0,
+  totalCalls: 0
+};
 var USAGE_DIMENSIONS = [
   "total",
   "input",
@@ -1993,6 +2381,128 @@ 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 buildChartState(points, metricKind, dimension, interval) {
+  const topGroups = topUsageGroups(points, metricKind, dimension);
+  const groupIdByKey = new Map(topGroups.map((group, index) => [
+    group.key,
+    `series${index + 1}`
+  ]));
+  const series = topGroups.map((group, index) => ({
+    color: USAGE_CHART_COLORS[index % USAGE_CHART_COLORS.length],
+    id: groupIdByKey.get(group.key) ?? `series${index + 1}`,
+    key: group.key,
+    label: group.label
+  }));
+  const config = Object.fromEntries(
+    series.map((item) => [item.id, {
+      color: item.color,
+      label: item.label
+    }])
+  );
+  const buckets = buildUsageBuckets(points);
+  const data = buckets.map((bucket) => {
+    const row = {
+      bucket: bucket.bucket,
+      label: formatUsageBucket(bucket.bucket, interval)
+    };
+    for (const item of series) row[item.id] = 0;
+    for (const point of bucket.points) {
+      const seriesId = groupIdByKey.get(point.groupKey);
+      if (!seriesId) continue;
+      row[seriesId] = Number(row[seriesId] ?? 0) + getUsageTotalValue(point, metricKind, dimension);
+    }
+    return row;
+  });
+  return {
+    config,
+    data,
+    series
+  };
+}
+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 aggregateUsageRows(points, metricKind, dimension) {
+  const totals = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    const existing = totals.get(point.groupKey) ?? {
+      ...EMPTY_TOTALS,
+      groupKey: point.groupKey,
+      groupLabel: point.groupLabel,
+      value: 0
+    };
+    addUsageTotals(existing, point);
+    existing.value = getUsageTotalValue(existing, metricKind, dimension);
+    totals.set(point.groupKey, existing);
+  }
+  return Array.from(totals.values()).sort((a, b) => b.value - a.value);
+}
+function addUsageTotals(target, source) {
+  target.inputTokens += source.inputTokens;
+  target.outputTokens += source.outputTokens;
+  target.reasoningTokens += source.reasoningTokens;
+  target.cacheReadInputTokens += source.cacheReadInputTokens;
+  target.cacheCreationInputTokens += source.cacheCreationInputTokens;
+  target.totalTokens += source.totalTokens;
+  target.inputCostUsd += source.inputCostUsd;
+  target.outputCostUsd += source.outputCostUsd;
+  target.reasoningCostUsd += source.reasoningCostUsd;
+  target.cacheReadInputCostUsd += source.cacheReadInputCostUsd;
+  target.cacheCreationInputCostUsd += source.cacheCreationInputCostUsd;
+  target.totalCostUsd += source.totalCostUsd;
+  target.totalCalls += source.totalCalls;
+}
+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 += getUsageTotalValue(point, metricKind, dimension);
+    totals.set(point.groupKey, existing);
+  }
+  return Array.from(totals.values()).sort((a, b) => b.value - a.value).slice(0, 6);
+}
+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 emptyToUndefined(value) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
 function getUsageDimensionLabel(labels, dimension) {
   switch (dimension) {
     case "input":
@@ -2011,111 +2521,103 @@ 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 === "cost") {
-    switch (dimension) {
-      case "input":
-        return llmTotals.inputCostUsd;
-      case "output":
-        return llmTotals.outputCostUsd;
-      case "reasoning":
-        return llmTotals.reasoningCostUsd;
-      case "cacheRead":
-        return llmTotals.cacheReadInputCostUsd;
-      case "cacheWrite":
-        return llmTotals.cacheCreationInputCostUsd;
-      case "total":
-      default:
-        return llmTotals.totalCostUsd;
-    }
-  }
-  switch (dimension) {
-    case "input":
-      return llmTotals.inputTokens;
-    case "output":
-      return llmTotals.outputTokens;
-    case "reasoning":
-      return llmTotals.reasoningTokens;
-    case "cacheRead":
-      return llmTotals.cacheReadInputTokens;
-    case "cacheWrite":
-      return llmTotals.cacheCreationInputTokens;
-    case "total":
+function getGroupByLabel(groupBy) {
+  switch (groupBy) {
+    case "thread":
+      return "Thread";
+    case "namespace":
+      return "Namespace";
+    case "provider":
+      return "Provider";
+    case "model":
+      return "Model";
+    case "participant":
     default:
-      return llmTotals.totalTokens;
+      return "Participant";
   }
 }
-function getAgentUsageValue(agent, metricKind, dimension) {
+function getUsageTotalValue(totals, metricKind, dimension) {
+  if (metricKind === "calls") return totals.totalCalls;
   if (metricKind === "cost") {
     switch (dimension) {
       case "input":
-        return agent.inputCostUsd;
+        return totals.inputCostUsd;
       case "output":
-        return agent.outputCostUsd;
+        return totals.outputCostUsd;
       case "reasoning":
-        return agent.reasoningCostUsd;
+        return totals.reasoningCostUsd;
       case "cacheRead":
-        return agent.cacheReadInputCostUsd;
+        return totals.cacheReadInputCostUsd;
       case "cacheWrite":
-        return agent.cacheCreationInputCostUsd;
+        return totals.cacheCreationInputCostUsd;
       case "total":
       default:
-        return agent.totalCostUsd;
+        return totals.totalCostUsd;
     }
   }
   switch (dimension) {
     case "input":
-      return agent.inputTokens;
+      return totals.inputTokens;
     case "output":
-      return agent.outputTokens;
+      return totals.outputTokens;
     case "reasoning":
-      return agent.reasoningTokens;
+      return totals.reasoningTokens;
     case "cacheRead":
-      return agent.cacheReadInputTokens;
+      return totals.cacheReadInputTokens;
     case "cacheWrite":
-      return agent.cacheCreationInputTokens;
+      return totals.cacheCreationInputTokens;
     case "total":
     default:
-      return agent.totalTokens;
+      return totals.totalTokens;
   }
 }
-function getActivityUsageValue(point, metricKind, dimension) {
-  if (metricKind === "cost") {
-    switch (dimension) {
-      case "input":
-        return point.inputCostUsd;
-      case "output":
-        return point.outputCostUsd;
-      case "reasoning":
-        return point.reasoningCostUsd;
-      case "cacheRead":
-        return point.cacheReadInputCostUsd;
-      case "cacheWrite":
-        return point.cacheCreationInputCostUsd;
-      case "total":
-      default:
-        return point.totalCostUsd;
-    }
+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
+    });
   }
-  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;
+  if (interval === "month") {
+    return date.toLocaleDateString(void 0, {
+      month: "short",
+      year: "numeric"
+    });
   }
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatUsageRangeLabel(period, range) {
+  if (period !== "custom") return period;
+  if (!range.from && !range.to) return "Custom";
+  return `${formatShortDate(range.from)} - ${formatShortDate(range.to)}`;
+}
+function formatShortDate(value) {
+  if (!value) return "Open";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatNumber(value) {
+  return new Intl.NumberFormat().format(value);
+}
+function formatPercent(value) {
+  return new Intl.NumberFormat(void 0, {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(value);
 }
 function formatMetricValue(value, metricKind) {
   if (metricKind === "cost") {
@@ -2130,10 +2632,26 @@ function formatMetricValue(value, metricKind) {
   }
   return formatNumber(value);
 }
+function formatCompactMetric(value, metricKind) {
+  if (metricKind === "cost") {
+    return new Intl.NumberFormat(void 0, {
+      compactDisplay: "short",
+      currency: "USD",
+      maximumFractionDigits: 1,
+      notation: "compact",
+      style: "currency"
+    }).format(value);
+  }
+  return new Intl.NumberFormat(void 0, {
+    compactDisplay: "short",
+    maximumFractionDigits: 1,
+    notation: "compact"
+  }).format(value);
+}
 
 // src/components/views/ThreadsView.tsx
-import { Search, MessageSquare as MessageSquare2 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Search as Search2, MessageSquare as MessageSquare2 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThreadsView = ({
   config,
   threads,
@@ -2141,10 +2659,10 @@ var ThreadsView = ({
   onSearchChange,
   onThreadClick
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ jsx13(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx14(Search2, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx14(
         Input,
         {
           className: "pl-9",
@@ -2154,19 +2672,19 @@ var ThreadsView = ({
         }
       )
     ] }),
-    threads.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx13(MessageSquare2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx13("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ jsx13("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs8(
+    threads.length === 0 ? /* @__PURE__ */ jsxs9("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx14(MessageSquare2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx14("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx14("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs9(
       "div",
       {
         className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
         onClick: () => onThreadClick?.(thread.threadId),
         children: [
-          /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx13("p", { className: "font-medium truncate", children: thread.name }),
-              /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx14("p", { className: "font-medium truncate", children: thread.name }),
+              /* @__PURE__ */ jsx14(
                 Badge,
                 {
                   variant: thread.status === "archived" ? "secondary" : "default",
@@ -2175,18 +2693,18 @@ var ThreadsView = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+            /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
-            /* @__PURE__ */ jsxs8("p", { children: [
+          /* @__PURE__ */ jsxs9("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
+            /* @__PURE__ */ jsxs9("p", { children: [
               formatNumber2(thread.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ jsxs8("p", { children: [
+            /* @__PURE__ */ jsxs9("p", { children: [
               thread.participantIds.length,
               " participants"
             ] }),
-            /* @__PURE__ */ jsx13("p", { children: formatDate2(thread.lastActivityAt) })
+            /* @__PURE__ */ jsx14("p", { children: formatDate(thread.lastActivityAt) })
           ] })
         ]
       },
@@ -2194,7 +2712,7 @@ var ThreadsView = ({
     )) })
   ] });
 };
-function formatDate2(value) {
+function formatDate(value) {
   if (!value) return "No activity";
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
@@ -2220,7 +2738,7 @@ import {
   Wrench,
   Cpu
 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var MESSAGES_PAGE_SIZE = 50;
 var ThreadDetailView = ({
   threadId,
@@ -2278,36 +2796,36 @@ var ThreadDetailView = ({
     }
   }, [threadId, pageInfo, isLoadingMore, config.baseUrl, config.getRequestHeaders]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx15(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs9("div", { className: "space-y-4 py-10 text-center", children: [
-      /* @__PURE__ */ jsx14("p", { className: "text-destructive font-medium", children: error.message }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex justify-center gap-2", children: [
-        /* @__PURE__ */ jsxs9(Button, { variant: "outline", onClick: onBack, children: [
-          /* @__PURE__ */ jsx14(ArrowLeft, { className: "mr-2 h-4 w-4" }),
+    return /* @__PURE__ */ jsxs10("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ jsx15("p", { className: "text-destructive font-medium", children: error.message }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs10(Button, { variant: "outline", onClick: onBack, children: [
+          /* @__PURE__ */ jsx15(ArrowLeft, { className: "mr-2 h-4 w-4" }),
           "Back"
         ] }),
-        /* @__PURE__ */ jsx14(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
+        /* @__PURE__ */ jsx15(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs9("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx15(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: "mt-1 shrink-0",
           onClick: onBack,
-          children: /* @__PURE__ */ jsx14(ArrowLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx15(ArrowLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx14("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
-          /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx15("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
+          /* @__PURE__ */ jsx15(
             Badge,
             {
               variant: thread?.status === "archived" ? "secondary" : "default",
@@ -2315,31 +2833,31 @@ var ThreadDetailView = ({
             }
           )
         ] }),
-        thread?.summary && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
-        /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
-          thread?.createdAt && /* @__PURE__ */ jsxs9("span", { children: [
+        thread?.summary && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
+        /* @__PURE__ */ jsxs10("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
+          thread?.createdAt && /* @__PURE__ */ jsxs10("span", { children: [
             "Created ",
-            formatDate3(thread.createdAt)
+            formatDate2(thread.createdAt)
           ] }),
-          thread?.updatedAt && /* @__PURE__ */ jsxs9("span", { children: [
+          thread?.updatedAt && /* @__PURE__ */ jsxs10("span", { children: [
             "Updated ",
-            formatDate3(thread.updatedAt)
+            formatDate2(thread.updatedAt)
           ] }),
-          thread?.participants && /* @__PURE__ */ jsxs9("span", { children: [
+          thread?.participants && /* @__PURE__ */ jsxs10("span", { children: [
             thread.participants.length,
             " participants"
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs9("h3", { className: "text-sm font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs10("h3", { className: "text-sm font-medium text-muted-foreground", children: [
         "Messages (",
         messages.length,
         pageInfo?.hasMoreBefore ? "+" : "",
         ")"
       ] }) }),
-      pageInfo?.hasMoreBefore && /* @__PURE__ */ jsx14("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxs9(
+      pageInfo?.hasMoreBefore && /* @__PURE__ */ jsx15("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxs10(
         Button,
         {
           variant: "ghost",
@@ -2347,12 +2865,12 @@ var ThreadDetailView = ({
           onClick: () => void loadMore(),
           disabled: isLoadingMore,
           children: [
-            isLoadingMore ? /* @__PURE__ */ jsx14(Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx14(ChevronUp2, { className: "mr-2 h-3 w-3" }),
+            isLoadingMore ? /* @__PURE__ */ jsx15(Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx15(ChevronUp2, { className: "mr-2 h-3 w-3" }),
             "Load older messages"
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx14("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ jsx14("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ jsx14(MessageRow, { message }, message.id)) }) })
+      /* @__PURE__ */ jsx15("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ jsx15("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ jsx15(MessageRow, { message }, message.id)) }) })
     ] })
   ] });
 };
@@ -2360,43 +2878,43 @@ function MessageRow({ message }) {
   const [expanded, setExpanded] = useState4(false);
   const hasToolCalls = Array.isArray(message.toolCalls) && message.toolCalls.length > 0;
   const hasReasoning = !!message.reasoning;
-  return /* @__PURE__ */ jsx14("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx14(SenderIcon, { senderType: message.senderType }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs", children: [
-        /* @__PURE__ */ jsx14("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
-        /* @__PURE__ */ jsx14(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
-        message.createdAt && /* @__PURE__ */ jsx14("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
+  return /* @__PURE__ */ jsx15("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx15(SenderIcon, { senderType: message.senderType }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx15("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
+        /* @__PURE__ */ jsx15(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
+        message.createdAt && /* @__PURE__ */ jsx15("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
       ] }),
-      message.content && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
-      (hasToolCalls || hasReasoning) && /* @__PURE__ */ jsxs9("div", { className: "mt-2 space-y-2", children: [
-        hasToolCalls && /* @__PURE__ */ jsxs9(
+      message.content && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
+      (hasToolCalls || hasReasoning) && /* @__PURE__ */ jsxs10("div", { className: "mt-2 space-y-2", children: [
+        hasToolCalls && /* @__PURE__ */ jsxs10(
           "button",
           {
             type: "button",
             onClick: () => setExpanded(!expanded),
             className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
             children: [
-              /* @__PURE__ */ jsx14(Wrench, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx15(Wrench, { className: "h-3 w-3" }),
               message.toolCalls.length,
               " tool call",
               message.toolCalls.length > 1 ? "s" : ""
             ]
           }
         ),
-        hasReasoning && /* @__PURE__ */ jsxs9(
+        hasReasoning && /* @__PURE__ */ jsxs10(
           "button",
           {
             type: "button",
             onClick: () => setExpanded(!expanded),
             className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
             children: [
-              /* @__PURE__ */ jsx14(Cpu, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx15(Cpu, { className: "h-3 w-3" }),
               "Reasoning"
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsx14("pre", { className: "mt-2 rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(
+        expanded && /* @__PURE__ */ jsx15("pre", { className: "mt-2 rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(
           {
             ...hasToolCalls ? { toolCalls: message.toolCalls } : {},
             ...hasReasoning ? { reasoning: message.reasoning } : {}
@@ -2412,16 +2930,16 @@ function SenderIcon({ senderType }) {
   const base = "flex h-7 w-7 shrink-0 items-center justify-center rounded-full";
   switch (senderType) {
     case "agent":
-      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx14(Bot2, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx15("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx15(Bot2, { className: "h-3.5 w-3.5" }) });
     case "user":
-      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ jsx14(User, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx15("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ jsx15(User, { className: "h-3.5 w-3.5" }) });
     case "tool":
-      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx14(Wrench, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx15("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx15(Wrench, { className: "h-3.5 w-3.5" }) });
     default:
-      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx14(Cpu, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx15("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx15(Cpu, { className: "h-3.5 w-3.5" }) });
   }
 }
-function formatDate3(value) {
+function formatDate2(value) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
   return date.toLocaleDateString(void 0, {
@@ -2443,8 +2961,8 @@ function formatTimestamp(value) {
 }
 
 // src/components/views/ParticipantsView.tsx
-import { Search as Search2, Users as Users2 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Search as Search3, Users as Users3 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var ParticipantsView = ({
   config,
   participants,
@@ -2452,10 +2970,10 @@ var ParticipantsView = ({
   onSearchChange,
   onParticipantClick
 }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ jsx15(Search2, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx16(Search3, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx16(
         Input,
         {
           className: "pl-9",
@@ -2465,33 +2983,33 @@ var ParticipantsView = ({
         }
       )
     ] }),
-    participants.length === 0 ? /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx15(Users2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx15("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ jsx15("div", { className: "space-y-2", children: participants.map((p) => /* @__PURE__ */ jsxs10(
+    participants.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx16(Users3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx16("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx16("div", { className: "space-y-2", children: participants.map((p) => /* @__PURE__ */ jsxs11(
       "div",
       {
         className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
         onClick: () => onParticipantClick?.(p.externalId),
         children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx15("p", { className: "font-medium truncate", children: p.displayName }),
-              /* @__PURE__ */ jsx15(Badge, { variant: "outline", className: "shrink-0 text-xs", children: p.participantType }),
-              /* @__PURE__ */ jsx15(Badge, { variant: p.isGlobal ? "default" : "secondary", className: "shrink-0 text-xs", children: p.isGlobal ? config.labels.scopeGlobal : config.labels.scopeScoped })
+          /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx16("p", { className: "font-medium truncate", children: p.displayName }),
+              /* @__PURE__ */ jsx16(Badge, { variant: "outline", className: "shrink-0 text-xs", children: p.participantType }),
+              /* @__PURE__ */ jsx16(Badge, { variant: p.isGlobal ? "default" : "secondary", className: "shrink-0 text-xs", children: p.isGlobal ? config.labels.scopeGlobal : config.labels.scopeScoped })
             ] }),
-            /* @__PURE__ */ jsx15("p", { className: "mt-1 text-xs text-muted-foreground", children: p.externalId })
+            /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-muted-foreground", children: p.externalId })
           ] }),
-          /* @__PURE__ */ jsxs10("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
-            /* @__PURE__ */ jsxs10("p", { children: [
+          /* @__PURE__ */ jsxs11("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
+            /* @__PURE__ */ jsxs11("p", { children: [
               formatNumber3(p.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ jsxs10("p", { children: [
+            /* @__PURE__ */ jsxs11("p", { children: [
               formatNumber3(p.threadCount),
               " threads"
             ] }),
-            /* @__PURE__ */ jsx15("p", { children: formatDate4(p.lastActivityAt) })
+            /* @__PURE__ */ jsx16("p", { children: formatDate3(p.lastActivityAt) })
           ] })
         ]
       },
@@ -2499,7 +3017,7 @@ var ParticipantsView = ({
     )) })
   ] });
 };
-function formatDate4(value) {
+function formatDate3(value) {
   if (!value) return "No activity";
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
@@ -2512,7 +3030,7 @@ function formatNumber3(value) {
 // src/components/views/ParticipantDetailView.tsx
 import { useCallback as useCallback4, useEffect as useEffect6, useState as useState5 } from "react";
 import { ArrowLeft as ArrowLeft2, Loader2 as Loader22, Save } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var ParticipantDetailView = ({
   participantId,
   config,
@@ -2562,25 +3080,25 @@ var ParticipantDetailView = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx16(Loader22, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx17(Loader22, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx16(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx16(ArrowLeft2, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx16("h2", { className: "text-xl font-semibold truncate", children: participantId }),
-        /* @__PURE__ */ jsx16("p", { className: "text-sm text-muted-foreground", children: "Participant Detail" })
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx17(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx17(ArrowLeft2, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx17("h2", { className: "text-xl font-semibold truncate", children: participantId }),
+        /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground", children: "Participant Detail" })
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-        saveMessage && /* @__PURE__ */ jsx16("span", { className: "text-xs text-emerald-600", children: saveMessage }),
-        /* @__PURE__ */ jsxs11(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
-          isSaving ? /* @__PURE__ */ jsx16(Loader22, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx16(Save, { className: "mr-2 h-3 w-3" }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+        saveMessage && /* @__PURE__ */ jsx17("span", { className: "text-xs text-emerald-600", children: saveMessage }),
+        /* @__PURE__ */ jsxs12(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
+          isSaving ? /* @__PURE__ */ jsx17(Loader22, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx17(Save, { className: "mr-2 h-3 w-3" }),
           "Save"
         ] })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx16("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ jsx16("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsx16(
+    error && /* @__PURE__ */ jsx17("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx17("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsx17(
       "textarea",
       {
         className: "w-full min-h-[400px] p-4 font-mono text-sm bg-transparent resize-y focus:outline-none",
@@ -2593,8 +3111,8 @@ var ParticipantDetailView = ({
 };
 
 // src/components/views/AgentsView.tsx
-import { Search as Search3, Bot as Bot3 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Search as Search4, Bot as Bot3 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var AgentsView = ({
   config,
   agents,
@@ -2602,10 +3120,10 @@ var AgentsView = ({
   onSearchChange,
   onAgentClick
 }) => {
-  return /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ jsx17(Search3, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx18(Search4, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx18(
         Input,
         {
           className: "pl-9",
@@ -2615,48 +3133,48 @@ var AgentsView = ({
         }
       )
     ] }),
-    agents.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx17(Bot3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx17("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ jsx17("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => /* @__PURE__ */ jsxs12(
+    agents.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx18(Bot3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx18("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx18("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => /* @__PURE__ */ jsxs13(
       "div",
       {
         className: "rounded-lg border bg-card p-5 transition-colors hover:bg-muted/50 cursor-pointer",
         onClick: () => onAgentClick?.(agent.agentId),
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx17("p", { className: "font-medium truncate", children: agent.displayName }),
-              /* @__PURE__ */ jsx17("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx18("p", { className: "font-medium truncate", children: agent.displayName }),
+              /* @__PURE__ */ jsx18("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
             ] }),
-            /* @__PURE__ */ jsx17(Badge, { variant: "outline", className: "shrink-0", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
+            /* @__PURE__ */ jsx18(Badge, { variant: "outline", className: "shrink-0", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
           ] }),
-          /* @__PURE__ */ jsxs12("div", { className: "mt-4 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs12("span", { children: [
+          /* @__PURE__ */ jsxs13("div", { className: "mt-4 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs13("span", { children: [
               formatNumber4(agent.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ jsxs12("span", { children: [
+            /* @__PURE__ */ jsxs13("span", { children: [
               formatNumber4(agent.llmCallCount),
               " LLM calls"
             ] }),
-            /* @__PURE__ */ jsxs12("span", { children: [
+            /* @__PURE__ */ jsxs13("span", { children: [
               formatNumber4(agent.toolCallMessageCount),
               " tool calls"
             ] }),
-            /* @__PURE__ */ jsxs12("span", { children: [
+            /* @__PURE__ */ jsxs13("span", { children: [
               formatNumber4(agent.totalTokens),
               " tokens"
             ] })
           ] }),
-          /* @__PURE__ */ jsx17("p", { className: "mt-3 text-xs text-muted-foreground", children: formatDate5(agent.lastActivityAt) })
+          /* @__PURE__ */ jsx18("p", { className: "mt-3 text-xs text-muted-foreground", children: formatDate4(agent.lastActivityAt) })
         ]
       },
       `${agent.namespace}:${agent.agentId}`
     )) })
   ] });
 };
-function formatDate5(value) {
+function formatDate4(value) {
   if (!value) return "No activity";
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
@@ -2668,7 +3186,7 @@ function formatNumber4(value) {
 
 // src/components/views/AgentDetailView.tsx
 import { ArrowLeft as ArrowLeft3, Bot as Bot4 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var AgentDetailView = ({
   agentId,
   config,
@@ -2677,13 +3195,13 @@ var AgentDetailView = ({
 }) => {
   const agent = agents.find((a) => a.agentId === agentId);
   if (!agent) {
-    return /* @__PURE__ */ jsxs13("div", { className: "space-y-4 py-10 text-center", children: [
-      /* @__PURE__ */ jsxs13("p", { className: "text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs14("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ jsxs14("p", { className: "text-muted-foreground", children: [
         "Agent not found: ",
         agentId
       ] }),
-      /* @__PURE__ */ jsxs13(Button, { variant: "outline", onClick: onBack, children: [
-        /* @__PURE__ */ jsx18(ArrowLeft3, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ jsxs14(Button, { variant: "outline", onClick: onBack, children: [
+        /* @__PURE__ */ jsx19(ArrowLeft3, { className: "mr-2 h-4 w-4" }),
         " Back"
       ] })
     ] });
@@ -2699,43 +3217,43 @@ var AgentDetailView = ({
     { label: "Cache Created", value: agent.cacheCreationInputTokens },
     { label: "Total Tokens", value: agent.totalTokens }
   ];
-  return /* @__PURE__ */ jsxs13("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon", className: "mt-1 shrink-0", onClick: onBack, children: /* @__PURE__ */ jsx18(ArrowLeft3, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx18("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx18(Bot4, { className: "h-5 w-5" }) }),
-          /* @__PURE__ */ jsxs13("div", { children: [
-            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx18("h2", { className: "text-xl font-semibold", children: agent.displayName }),
-              /* @__PURE__ */ jsx18(Badge, { variant: "outline", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", className: "mt-1 shrink-0", onClick: onBack, children: /* @__PURE__ */ jsx19(ArrowLeft3, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx19("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx19(Bot4, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx19("h2", { className: "text-xl font-semibold", children: agent.displayName }),
+              /* @__PURE__ */ jsx19(Badge, { variant: "outline", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
             ] }),
-            agent.description && /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: agent.description })
+            agent.description && /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: agent.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs13("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs13("span", { children: [
+        /* @__PURE__ */ jsxs14("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs14("span", { children: [
             "ID: ",
             agent.agentId
           ] }),
-          /* @__PURE__ */ jsxs13("span", { children: [
+          /* @__PURE__ */ jsxs14("span", { children: [
             "Namespace: ",
             agent.namespace
           ] }),
-          agent.lastActivityAt && /* @__PURE__ */ jsxs13("span", { children: [
+          agent.lastActivityAt && /* @__PURE__ */ jsxs14("span", { children: [
             "Last active: ",
-            formatDate6(agent.lastActivityAt)
+            formatDate5(agent.lastActivityAt)
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx18("div", { className: "grid gap-4 sm:grid-cols-3 lg:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxs13("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
-      /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
-      /* @__PURE__ */ jsx18("p", { className: "mt-2 text-2xl font-semibold tracking-tight", children: new Intl.NumberFormat().format(stat.value) })
+    /* @__PURE__ */ jsx19("div", { className: "grid gap-4 sm:grid-cols-3 lg:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxs14("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+      /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
+      /* @__PURE__ */ jsx19("p", { className: "mt-2 text-2xl font-semibold tracking-tight", children: new Intl.NumberFormat().format(stat.value) })
     ] }, stat.label)) })
   ] });
 };
-function formatDate6(value) {
+function formatDate5(value) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
   return date.toLocaleString(void 0, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
@@ -2743,8 +3261,8 @@ function formatDate6(value) {
 
 // src/components/views/CollectionItemsView.tsx
 import { useCallback as useCallback5, useEffect as useEffect7, useState as useState6 } from "react";
-import { Loader2 as Loader23, Plus, Search as Search4, Database as Database2 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Loader2 as Loader23, Plus, Search as Search5, Database as Database3 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var CollectionItemsView = ({
   collection,
   config,
@@ -2790,17 +3308,17 @@ var CollectionItemsView = ({
     if (keys.length === 0) return "(empty)";
     return keys.slice(0, 3).map((k) => `${k}: ${JSON.stringify(rest[k])?.slice(0, 30)}`).join(", ");
   };
-  return /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx19("h2", { className: "text-lg font-semibold capitalize", children: collection }),
-      onCreateNew && /* @__PURE__ */ jsxs14(Button, { size: "sm", onClick: onCreateNew, children: [
-        /* @__PURE__ */ jsx19(Plus, { className: "mr-2 h-3 w-3" }),
+  return /* @__PURE__ */ jsxs15("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx20("h2", { className: "text-lg font-semibold capitalize", children: collection }),
+      onCreateNew && /* @__PURE__ */ jsxs15(Button, { size: "sm", onClick: onCreateNew, children: [
+        /* @__PURE__ */ jsx20(Plus, { className: "mr-2 h-3 w-3" }),
         " New"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ jsx19(Search4, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs15("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx20(Search5, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx20(
         Input,
         {
           className: "pl-9",
@@ -2810,20 +3328,20 @@ var CollectionItemsView = ({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx19("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    isLoading ? /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx19(Loader23, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : items.length === 0 ? /* @__PURE__ */ jsxs14("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx19(Database2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx19("p", { className: "mt-3 text-sm text-muted-foreground", children: search ? config.labels.noResults : `No items in ${collection}` })
-    ] }) : /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: items.map((item, idx) => {
+    error && /* @__PURE__ */ jsx20("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    isLoading ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx20(Loader23, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx20(Database3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx20("p", { className: "mt-3 text-sm text-muted-foreground", children: search ? config.labels.noResults : `No items in ${collection}` })
+    ] }) : /* @__PURE__ */ jsx20("div", { className: "space-y-2", children: items.map((item, idx) => {
       const itemId = getItemId(item);
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         "div",
         {
           className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
           onClick: () => onItemClick?.(itemId),
-          children: /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx19("p", { className: "font-medium font-mono text-sm truncate", children: itemId }),
-            /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: getItemPreview(item) })
+          children: /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx20("p", { className: "font-medium font-mono text-sm truncate", children: itemId }),
+            /* @__PURE__ */ jsx20("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: getItemPreview(item) })
           ] })
         },
         itemId + idx
@@ -2835,7 +3353,7 @@ var CollectionItemsView = ({
 // src/components/views/CollectionItemDetailView.tsx
 import { useCallback as useCallback6, useEffect as useEffect8, useState as useState7 } from "react";
 import { ArrowLeft as ArrowLeft5, Loader2 as Loader24, Save as Save2, Trash2 } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var CollectionItemDetailView = ({
   collection,
   itemId,
@@ -2909,15 +3427,15 @@ var CollectionItemDetailView = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx20(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx21(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
-  return /* @__PURE__ */ jsxs15("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx20(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx20(ArrowLeft5, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20("h2", { className: "text-xl font-semibold truncate capitalize", children: isNew ? `New ${collection} item` : `${collection} / ${itemId}` }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
-        saveMessage && /* @__PURE__ */ jsx20("span", { className: "text-xs text-emerald-600", children: saveMessage }),
-        !isNew && /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx21(ArrowLeft5, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx21("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx21("h2", { className: "text-xl font-semibold truncate capitalize", children: isNew ? `New ${collection} item` : `${collection} / ${itemId}` }) }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+        saveMessage && /* @__PURE__ */ jsx21("span", { className: "text-xs text-emerald-600", children: saveMessage }),
+        !isNew && /* @__PURE__ */ jsxs16(
           Button,
           {
             variant: "destructive",
@@ -2925,19 +3443,19 @@ var CollectionItemDetailView = ({
             onClick: () => void handleDelete(),
             disabled: isDeleting,
             children: [
-              isDeleting ? /* @__PURE__ */ jsx20(Loader24, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx20(Trash2, { className: "mr-2 h-3 w-3" }),
+              isDeleting ? /* @__PURE__ */ jsx21(Loader24, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx21(Trash2, { className: "mr-2 h-3 w-3" }),
               "Delete"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
-          isSaving ? /* @__PURE__ */ jsx20(Loader24, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx20(Save2, { className: "mr-2 h-3 w-3" }),
+        /* @__PURE__ */ jsxs16(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
+          isSaving ? /* @__PURE__ */ jsx21(Loader24, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx21(Save2, { className: "mr-2 h-3 w-3" }),
           isNew ? "Create" : "Save"
         ] })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx20("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ jsx20("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsx20(
+    error && /* @__PURE__ */ jsx21("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx21("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsx21(
       "textarea",
       {
         className: "w-full min-h-[400px] p-4 font-mono text-sm bg-transparent resize-y focus:outline-none",
@@ -2951,8 +3469,8 @@ var CollectionItemDetailView = ({
 
 // src/components/views/EventsView.tsx
 import { useCallback as useCallback7, useState as useState8 } from "react";
-import { Activity as Activity2, Loader2 as Loader25, Search as Search5 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Activity as Activity3, Loader2 as Loader25, Search as Search6 } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var STATUS_VARIANTS = {
   pending: "outline",
   processing: "default",
@@ -2985,13 +3503,13 @@ var EventsView = ({ config }) => {
       setIsLoading(false);
     }
   }, [threadId, config.baseUrl, config.getRequestHeaders]);
-  return /* @__PURE__ */ jsxs16("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-end gap-3 max-w-lg", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx21("label", { className: "text-sm font-medium mb-1 block", children: "Thread ID" }),
-        /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx21(Search5, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs17("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-end gap-3 max-w-lg", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx22("label", { className: "text-sm font-medium mb-1 block", children: "Thread ID" }),
+        /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx22(Search6, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx22(
             Input,
             {
               className: "pl-9",
@@ -3003,55 +3521,55 @@ var EventsView = ({ config }) => {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(Button, { onClick: () => void handleSearch(), disabled: isLoading || !threadId.trim(), children: [
-        isLoading ? /* @__PURE__ */ jsx21(Loader25, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+      /* @__PURE__ */ jsxs17(Button, { onClick: () => void handleSearch(), disabled: isLoading || !threadId.trim(), children: [
+        isLoading ? /* @__PURE__ */ jsx22(Loader25, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
         "Inspect"
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx21("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    !hasSearched ? /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx21(Activity2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx21("p", { className: "mt-3 text-sm text-muted-foreground", children: "Enter a thread ID to inspect its next pending queue event." })
-    ] }) : isLoading ? /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx21(Loader25, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : !event ? /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx21(Activity2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx21("p", { className: "mt-3 text-sm text-muted-foreground", children: "No pending events found for this thread." })
-    ] }) : /* @__PURE__ */ jsxs16("div", { className: "rounded-lg border bg-card p-5 space-y-4", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx21("p", { className: "font-medium", children: event.eventType }),
-          /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground font-mono mt-1", children: event.id })
+    error && /* @__PURE__ */ jsx22("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    !hasSearched ? /* @__PURE__ */ jsxs17("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx22(Activity3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx22("p", { className: "mt-3 text-sm text-muted-foreground", children: "Enter a thread ID to inspect its next pending queue event." })
+    ] }) : isLoading ? /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx22(Loader25, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : !event ? /* @__PURE__ */ jsxs17("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx22(Activity3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx22("p", { className: "mt-3 text-sm text-muted-foreground", children: "No pending events found for this thread." })
+    ] }) : /* @__PURE__ */ jsxs17("div", { className: "rounded-lg border bg-card p-5 space-y-4", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx22("p", { className: "font-medium", children: event.eventType }),
+          /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground font-mono mt-1", children: event.id })
         ] }),
-        /* @__PURE__ */ jsx21(Badge, { variant: STATUS_VARIANTS[event.status] ?? "outline", children: event.status })
+        /* @__PURE__ */ jsx22(Badge, { variant: STATUS_VARIANTS[event.status] ?? "outline", children: event.status })
       ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "grid gap-3 sm:grid-cols-2 text-sm", children: [
-        event.traceId && /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Trace:" }),
+      /* @__PURE__ */ jsxs17("div", { className: "grid gap-3 sm:grid-cols-2 text-sm", children: [
+        event.traceId && /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "text-muted-foreground", children: "Trace:" }),
           " ",
-          /* @__PURE__ */ jsx21("span", { className: "font-mono text-xs", children: event.traceId })
+          /* @__PURE__ */ jsx22("span", { className: "font-mono text-xs", children: event.traceId })
         ] }),
-        event.parentEventId && /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Parent:" }),
+        event.parentEventId && /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "text-muted-foreground", children: "Parent:" }),
           " ",
-          /* @__PURE__ */ jsx21("span", { className: "font-mono text-xs", children: event.parentEventId })
+          /* @__PURE__ */ jsx22("span", { className: "font-mono text-xs", children: event.parentEventId })
         ] }),
-        event.priority != null && /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Priority:" }),
+        event.priority != null && /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "text-muted-foreground", children: "Priority:" }),
           " ",
           event.priority
         ] }),
-        event.createdAt && /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Created:" }),
+        event.createdAt && /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "text-muted-foreground", children: "Created:" }),
           " ",
           formatTimestamp2(event.createdAt)
         ] })
       ] }),
-      event.payload != null && /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx21("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Payload" }),
-        /* @__PURE__ */ jsx21("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(event.payload, null, 2) })
+      event.payload != null && /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx22("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Payload" }),
+        /* @__PURE__ */ jsx22("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(event.payload, null, 2) })
       ] }),
-      event.metadata != null && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx21("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
-        /* @__PURE__ */ jsx21("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-40", children: JSON.stringify(event.metadata, null, 2) })
+      event.metadata != null && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx22("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
+        /* @__PURE__ */ jsx22("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-40", children: JSON.stringify(event.metadata, null, 2) })
       ] })
     ] })
   ] });
@@ -3069,7 +3587,7 @@ function formatTimestamp2(value) {
 }
 
 // src/CopilotzAdmin.tsx
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var CopilotzAdmin = ({
   config: userConfig,
   className
@@ -3161,18 +3679,18 @@ var CopilotzAdmin = ({
     }
   })();
   if (admin.isLoading && !admin.overview) {
-    return /* @__PURE__ */ jsx22(Card, { className: cn("border-border", className), children: /* @__PURE__ */ jsx22(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
+    return /* @__PURE__ */ jsx23(Card, { className: cn("border-border", className), children: /* @__PURE__ */ jsx23(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
   }
   if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ jsx22(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ jsxs17(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx22("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
-      /* @__PURE__ */ jsx22(Button, { variant: "destructive", onClick: () => void admin.refresh(), children: config.labels.retry })
+    return /* @__PURE__ */ jsx23(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ jsxs18(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx23("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
+      /* @__PURE__ */ jsx23(Button, { variant: "destructive", onClick: () => void admin.refresh(), children: config.labels.retry })
     ] }) });
   }
   const renderCurrentView = () => {
     switch (route.page) {
       case "dashboard":
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           DashboardView,
           {
             config,
@@ -3182,6 +3700,7 @@ var CopilotzAdmin = ({
             participants: admin.participants,
             agents: admin.agents,
             interval: admin.filters.interval,
+            namespace,
             threadSearch,
             participantSearch,
             agentSearch,
@@ -3192,7 +3711,7 @@ var CopilotzAdmin = ({
           }
         );
       case "threads":
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           ThreadsView,
           {
             config,
@@ -3203,9 +3722,9 @@ var CopilotzAdmin = ({
           }
         );
       case "thread-detail":
-        return route.resourceId ? /* @__PURE__ */ jsx22(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
+        return route.resourceId ? /* @__PURE__ */ jsx23(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
       case "participants":
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           ParticipantsView,
           {
             config,
@@ -3216,9 +3735,9 @@ var CopilotzAdmin = ({
           }
         );
       case "participant-detail":
-        return route.resourceId ? /* @__PURE__ */ jsx22(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
+        return route.resourceId ? /* @__PURE__ */ jsx23(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
       case "agents":
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           AgentsView,
           {
             config,
@@ -3229,9 +3748,9 @@ var CopilotzAdmin = ({
           }
         );
       case "agent-detail":
-        return route.resourceId ? /* @__PURE__ */ jsx22(AgentDetailView, { agentId: route.resourceId, config, agents: admin.agents, onBack: handleBackToAgents }) : null;
+        return route.resourceId ? /* @__PURE__ */ jsx23(AgentDetailView, { agentId: route.resourceId, config, agents: admin.agents, onBack: handleBackToAgents }) : null;
       case "collection-items":
-        return route.collection ? /* @__PURE__ */ jsx22(
+        return route.collection ? /* @__PURE__ */ jsx23(
           CollectionItemsView,
           {
             collection: route.collection,
@@ -3242,7 +3761,7 @@ var CopilotzAdmin = ({
           }
         ) : null;
       case "collection-item-detail":
-        return route.collection ? /* @__PURE__ */ jsx22(
+        return route.collection ? /* @__PURE__ */ jsx23(
           CollectionItemDetailView,
           {
             collection: route.collection,
@@ -3253,12 +3772,12 @@ var CopilotzAdmin = ({
           }
         ) : null;
       case "events":
-        return /* @__PURE__ */ jsx22(EventsView, { config });
+        return /* @__PURE__ */ jsx23(EventsView, { config });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ jsx22(TooltipProvider, { children: /* @__PURE__ */ jsx22(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx23(TooltipProvider, { children: /* @__PURE__ */ jsx23(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cn(
@@ -3266,7 +3785,7 @@ var CopilotzAdmin = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           AdminSidebar,
           {
             config,
@@ -3279,8 +3798,8 @@ var CopilotzAdmin = ({
             onNamespaceChange: setNamespace
           }
         ),
-        /* @__PURE__ */ jsx22(SidebarInset, { children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full min-h-0", children: [
-          /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(SidebarInset, { children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full min-h-0", children: [
+          /* @__PURE__ */ jsx23(
             AdminHeader,
             {
               config,
@@ -3293,7 +3812,7 @@ var CopilotzAdmin = ({
               isLoading: admin.isLoading
             }
           ),
-          /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+          /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
         ] }) })
       ]
     }
@@ -3309,6 +3828,7 @@ export {
   fetchAdminOverview,
   fetchAdminParticipants,
   fetchAdminThreads,
+  fetchAdminUsage,
   fetchCollectionItem,
   fetchCollectionItems,
   fetchCollectionNames,