@copilotz/admin 0.9.25 → 0.9.28

package/dist/index.cjs

@@ -307,6 +307,7 @@ async function fetchAdminUsage(filters, options) {
     interval: filters.interval,
     metric: filters.metric,
     groupBy: filters.groupBy,
+    attribution: filters.attribution,
     threadId: filters.threadId,
     participantId: filters.participantId,
     participantType: filters.participantType,
@@ -579,6 +580,16 @@ function CardHeader({ className, ...props }) {
     }
   );
 }
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -1472,73 +1483,24 @@ var PAGE_TITLES = {
 var AdminHeader = ({
   config,
   currentRoute,
-  range,
-  interval,
-  onRangeChange,
-  onIntervalChange,
   onRefresh,
-  isLoading
+  isLoading,
+  controls
 }) => {
   let pageTitle = config.labels[`${currentRoute.page}Title`] || PAGE_TITLES[currentRoute.page] || currentRoute.page;
   if (currentRoute.page === "collection-items" && currentRoute.collection) {
     pageTitle = currentRoute.collection.charAt(0).toUpperCase() + currentRoute.collection.slice(1);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardHeader, { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardHeader, { className: "px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-h-10 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarTrigger, { className: "-ml-1" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipContent, { children: "Toggle Sidebar" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "ml-2 whitespace-nowrap text-sm font-medium", children: pageTitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
-      currentRoute.page === "dashboard" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Button,
-          {
-            variant: range === "24h" ? "default" : "ghost",
-            size: "sm",
-            className: "h-7 text-xs",
-            onClick: () => onRangeChange("24h"),
-            children: config.labels.range24h
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Button,
-          {
-            variant: range === "7d" ? "default" : "ghost",
-            size: "sm",
-            className: "h-7 text-xs",
-            onClick: () => onRangeChange("7d"),
-            children: config.labels.range7d
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Button,
-          {
-            variant: range === "30d" ? "default" : "ghost",
-            size: "sm",
-            className: "h-7 text-xs",
-            onClick: () => onRangeChange("30d"),
-            children: config.labels.range30d
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          Select,
-          {
-            value: interval,
-            onValueChange: (v) => onIntervalChange(v),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SelectContent, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: "hour", children: config.labels.intervalHour }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: "day", children: config.labels.intervalDay })
-              ] })
-            ]
-          }
-        )
-      ] }),
+    controls && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex min-w-[240px] flex-1 items-center justify-end gap-2 overflow-x-auto", children: controls }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Button,
@@ -1565,6 +1527,8 @@ var AdminHeader = ({
 
 // src/components/views/DashboardView.tsx
 var import_react2 = __toESM(require("react"), 1);
+var import_recharts = require("recharts");
+var import_lucide_react6 = require("lucide-react");
 
 // src/components/ui/badge.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
@@ -1603,8 +1567,124 @@ function Badge({
   );
 }
 
-// src/components/views/DashboardView.tsx
+// src/components/ui/chart.tsx
+var React5 = __toESM(require("react"), 1);
+var RechartsPrimitive = __toESM(require("recharts"), 1);
 var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsx)(ChartContext.Provider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "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__ */ (0, import_jsx_runtime12.jsx)("style", { children: Object.entries(config).map(([key, item]) => {
+          return `[data-chart=${chartId}] { --color-${key}: ${item.color}; }`;
+        }).join("\n") }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: cn(
+        "min-w-44 rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-4 border-b pb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium text-muted-foreground", children: labelFormatter ? labelFormatter(label) : label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-semibold text-foreground", children: formatter ? formatter(total) : total })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              className: "grid grid-cols-[0.6rem_1fr_auto] items-center gap-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    className: "size-2 rounded-[2px]",
+                    style: { backgroundColor: color }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-48 truncate text-muted-foreground", children: itemConfig?.label ?? item.name ?? key }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "span",
+        {
+          className: "size-2 rounded-[2px]",
+          style: {
+            backgroundColor: item.color ?? itemConfig?.color ?? "currentColor"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-52 truncate text-xs text-muted-foreground", children: itemConfig?.label ?? item.value ?? key })
+    ] }, key);
+  }) });
+}
+
+// src/components/views/DashboardView.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DashboardView = ({
   config,
   overview,
@@ -1620,156 +1700,60 @@ var DashboardView = ({
   onParticipantSearchChange,
   onAgentSearchChange,
   onThreadClick,
-  namespace
+  namespace,
+  setHeaderControls,
+  setHeaderRefresh
 }) => {
-  const [usageMetricKind, setUsageMetricKind] = import_react2.default.useState(
-    "cost"
-  );
-  const [usageDimension, setUsageDimension] = import_react2.default.useState(
-    "total"
-  );
-  const llmSummaryValue = overview ? getOverviewUsageValue(overview, usageMetricKind, usageDimension) : 0;
-  const llmSummaryLabel = getUsageSummaryLabel(
-    config.labels,
-    usageMetricKind,
-    usageDimension
-  );
-  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, ${overview?.participantTotals.jobs ?? 0} jobs`
-    },
-    {
-      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 isEmpty = cards.every((card) => card.value === 0) && activity.length === 0 && threads.length === 0 && participants.length === 0 && agents.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-6", children: [
-    isEmpty && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
-    ] }),
-    config.features.showOverview && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        "div",
-        {
-          className: "rounded-xl border bg-card p-5 shadow-sm",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatMetricValue(
-              card.value,
-              card.metricKind ?? "tokens"
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
-          ]
-        },
-        card.label
-      )) })
-    ] }),
-    config.features.showOverview && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      UsageExplorer,
+  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__ */ (0, import_jsx_runtime13.jsx)(
+      EmptyDashboard,
       {
-        config,
-        metricKind: usageMetricKind,
-        namespace,
-        onDimensionChange: setUsageDimension,
-        onMetricKindChange: setUsageMetricKind,
-        selectedDimension: usageDimension
+        description: config.labels.emptyDescription,
+        title: config.labels.emptyTitle
       }
-    ),
-    config.features.showActivity && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        ActivityChart,
-        {
-          interval,
-          labels: config.labels,
-          maxBars: config.ui.maxActivityBars,
-          points: activity,
-          usageDimension,
-          usageMetricKind
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-6 lg:grid-cols-3", children: [
-      config.features.showThreads && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        DataTable,
-        {
-          rows: threads,
-          searchPlaceholder: config.labels.threadSearchPlaceholder,
-          searchValue: threadSearch,
-          setSearchValue: onThreadSearchChange,
-          title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            ThreadsTable,
-            {
-              rows: threads,
-              labels: config.labels,
-              onThreadClick
-            }
-          )
-        }
-      ),
-      config.features.showParticipants && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        DataTable,
-        {
-          rows: participants,
-          searchPlaceholder: config.labels.participantSearchPlaceholder,
-          searchValue: participantSearch,
-          setSearchValue: onParticipantSearchChange,
-          title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ParticipantsTable, { rows: participants, labels: config.labels })
-        }
-      ),
-      config.features.showAgents && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        DataTable,
-        {
-          rows: agents,
-          searchPlaceholder: config.labels.agentSearchPlaceholder,
-          searchValue: agentSearch,
-          setSearchValue: onAgentSearchChange,
-          title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            AgentsTable,
-            {
-              rows: agents,
-              labels: config.labels,
-              usageMetricKind,
-              usageDimension
-            }
-          )
-        }
-      )
-    ] })
-  ] });
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    UsageDashboard,
+    {
+      config,
+      namespace,
+      setHeaderControls,
+      setHeaderRefresh
+    }
+  );
 };
-function SectionHeading({ title }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: title });
-}
-function UsageExplorer(props) {
+function UsageDashboard({
+  config,
+  namespace,
+  setHeaderControls,
+  setHeaderRefresh
+}) {
   const [period, setPeriod] = import_react2.default.useState("7d");
   const [bucket, setBucket] = import_react2.default.useState("day");
-  const [groupBy, setGroupBy] = import_react2.default.useState("participant");
+  const [metricKind, setMetricKind] = import_react2.default.useState(
+    "cost"
+  );
+  const [dimension, setDimension] = import_react2.default.useState("total");
+  const [groupBy, setGroupBy] = import_react2.default.useState(
+    "participant"
+  );
+  const [attribution, setAttribution] = import_react2.default.useState(
+    "initiatedBy"
+  );
   const [participantType, setParticipantType] = import_react2.default.useState("all");
   const [threadId, setThreadId] = import_react2.default.useState("");
   const [participantId, setParticipantId] = import_react2.default.useState("");
@@ -1793,17 +1777,18 @@ function UsageExplorer(props) {
         from: range.from,
         to: range.to,
         interval: bucket,
-        metric: props.metricKind,
+        metric: metricKind,
         groupBy,
-        namespace: props.namespace || void 0,
+        attribution,
+        namespace: namespace || void 0,
         participantType,
         threadId: emptyToUndefined(threadId),
         participantId: emptyToUndefined(participantId),
         provider: emptyToUndefined(provider),
         model: emptyToUndefined(model)
       }, {
-        baseUrl: props.config.baseUrl,
-        getRequestHeaders: props.config.getRequestHeaders
+        baseUrl: config.baseUrl,
+        getRequestHeaders: config.getRequestHeaders
       });
       setUsage(next);
     } catch (err) {
@@ -1813,15 +1798,16 @@ function UsageExplorer(props) {
       setIsLoading(false);
     }
   }, [
+    attribution,
     bucket,
+    config.baseUrl,
+    config.getRequestHeaders,
     groupBy,
+    metricKind,
     model,
+    namespace,
     participantId,
     participantType,
-    props.config.baseUrl,
-    props.config.getRequestHeaders,
-    props.metricKind,
-    props.namespace,
     provider,
     range.from,
     range.to,
@@ -1830,488 +1816,641 @@ function UsageExplorer(props) {
   import_react2.default.useEffect(() => {
     void loadUsage();
   }, [loadUsage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: props.config.labels.llmUsageTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          UsageSelect,
-          {
-            label: "Period",
-            value: period,
-            onValueChange: (value) => setPeriod(value),
-            options: [
-              ["24h", props.config.labels.range24h],
-              ["7d", props.config.labels.range7d],
-              ["30d", props.config.labels.range30d],
-              ["custom", "Custom"]
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          UsageSelect,
-          {
-            label: "Bucket",
-            value: bucket,
-            onValueChange: (value) => setBucket(value),
-            options: [
-              ["minute", "Minute"],
-              ["hour", "Hour"],
-              ["day", "Day"],
-              ["week", "Week"],
-              ["month", "Month"]
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          UsageSelect,
-          {
-            label: props.config.labels.usageMetricLabel,
-            value: props.metricKind,
-            onValueChange: (value) => props.onMetricKindChange(value),
-            options: [
-              ["cost", props.config.labels.usageMetricCost],
-              ["tokens", props.config.labels.usageMetricTokens],
-              ["calls", "Calls"]
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          UsageSelect,
-          {
-            label: "Group by",
-            value: groupBy,
-            onValueChange: (value) => setGroupBy(value),
-            options: [
-              ["participant", "Participant"],
-              ["thread", "Thread"],
-              ["namespace", "Namespace"],
-              ["provider", "Provider"],
-              ["model", "Model"]
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          UsageSelect,
+  const points = usage?.points ?? [];
+  const totals = usage?.totals ?? EMPTY_TOTALS;
+  const chartState = import_react2.default.useMemo(() => buildChartState(points, metricKind, dimension, bucket), [
+    bucket,
+    dimension,
+    metricKind,
+    points
+  ]);
+  const groupedRows = import_react2.default.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;
+  const clearFilters = import_react2.default.useCallback(() => {
+    setParticipantType("all");
+    setThreadId("");
+    setParticipantId("");
+    setProvider("");
+    setModel("");
+    setCustomFrom("");
+    setCustomTo("");
+  }, []);
+  const headerControls = import_react2.default.useMemo(() => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    DashboardHeaderControls,
+    {
+      attribution,
+      bucket,
+      config,
+      dimension,
+      groupBy,
+      metricKind,
+      period,
+      setAttribution,
+      setBucket,
+      setDimension,
+      setGroupBy,
+      setMetricKind,
+      setPeriod
+    }
+  ), [
+    attribution,
+    bucket,
+    config,
+    dimension,
+    groupBy,
+    metricKind,
+    period
+  ]);
+  import_react2.default.useEffect(() => {
+    setHeaderControls?.(headerControls);
+    return () => setHeaderControls?.(null);
+  }, [headerControls, setHeaderControls]);
+  import_react2.default.useEffect(() => {
+    setHeaderRefresh?.(() => () => {
+      void loadUsage();
+    });
+    return () => setHeaderRefresh?.(null);
+  }, [loadUsage, setHeaderRefresh]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid h-full min-h-0 grid-rows-[auto_minmax(0,4fr)_minmax(0,5fr)] gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-xl font-semibold tracking-tight", children: config.labels.llmUsageTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: formatUsageRangeLabel(period, range) }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "secondary", children: getGroupByLabel(groupBy) }),
+            groupBy === "participant" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: attribution === "initiatedBy" ? "Initiated by sender" : "Generated by caller" }),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", children: config.labels.loading })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          InlineFilters,
           {
-            label: props.config.labels.usageDimensionLabel,
-            value: props.selectedDimension,
-            onValueChange: (value) => props.onDimensionChange(value),
-            options: USAGE_DIMENSIONS.map((dimension) => [
-              dimension,
-              getUsageDimensionLabel(props.config.labels, dimension)
-            ])
+            activeFilterCount,
+            clearFilters,
+            customFrom,
+            customTo,
+            model,
+            participantId,
+            participantType,
+            period,
+            provider,
+            setCustomFrom,
+            setCustomTo,
+            setModel,
+            setParticipantId,
+            setParticipantType,
+            setProvider,
+            setThreadId,
+            threadId
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-6", children: [
-      period === "custom" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "From", type: "datetime-local", value: customFrom, onChange: setCustomFrom }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "To", type: "datetime-local", value: customTo, onChange: setCustomTo })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        UsageSelect,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        UsageSummary,
         {
-          label: "Participant type",
-          value: participantType,
-          onValueChange: (value) => setParticipantType(value),
-          options: [
-            ["all", "All"],
-            ["human", "Human"],
-            ["agent", "Agent"],
-            ["job", "Job"]
-          ]
+          labels: config.labels,
+          totals
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Thread", value: threadId, onChange: setThreadId }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Participant", value: participantId, onChange: setParticipantId }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Provider", value: provider, onChange: setProvider }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterInput, { label: "Model", value: model, onChange: setModel }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-end", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Button,
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: "min-h-0 gap-2 overflow-hidden py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardHeader, { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-2 md:flex-row md:items-start md:justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: "text-base", children: getUsageSummaryLabel(config.labels, metricKind, dimension) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+          formatMetricValue(
+            getUsageTotalValue(totals, metricKind, dimension),
+            metricKind
+          ),
+          " ",
+          "across ",
+          formatNumber(totals.totalCalls),
+          " calls"
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 px-2 lg:px-4", children: error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        EmptyDashboard,
+        {
+          description: config.labels.noResults,
+          title: "No usage"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        UsageChart,
         {
-          className: "h-9 w-full",
-          onClick: () => void loadUsage(),
-          disabled: isLoading,
-          variant: "outline",
-          children: props.config.labels.refresh
+          chartState,
+          metricKind
         }
       ) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      UsageChart,
-      {
-        labels: props.config.labels,
-        metricKind: props.metricKind,
-        dimension: props.selectedDimension,
-        points: usage?.points ?? [],
-        bucket,
-        isLoading,
-        error
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       UsageTable,
       {
-        labels: props.config.labels,
-        metricKind: props.metricKind,
-        dimension: props.selectedDimension,
-        rows: usage?.rows ?? [],
-        isLoading
+        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 UsageSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "h-9 w-full min-w-[140px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value, children: label }, value)) })
-    ] })
-  ] });
-}
-function FilterInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Input,
-      {
-        className: "h-9",
-        type: props.type ?? "text",
-        value: props.value,
-        onChange: (event) => props.onChange(event.target.value)
-      }
-    )
-  ] });
+function UsageSummary({
+  labels,
+  totals
+}) {
+  const summary = [
+    {
+      label: labels.usageMetricCost,
+      value: formatMetricValue(totals.totalCostUsd, "cost"),
+      detail: `${formatNumber(totals.totalCalls)} ${labels.usageCallsDetail}`,
+      icon: import_lucide_react6.Wallet
+    },
+    {
+      label: labels.usageMetricTokens,
+      value: formatMetricValue(totals.totalTokens, "tokens"),
+      detail: `${formatMetricValue(totals.inputTokens, "tokens")} input`,
+      icon: import_lucide_react6.Activity
+    },
+    {
+      label: "Calls",
+      value: formatMetricValue(totals.totalCalls, "calls"),
+      detail: totals.totalCalls > 0 ? `${formatMetricValue(totals.totalCostUsd / totals.totalCalls, "cost")} avg` : "No calls",
+      icon: import_lucide_react6.Sparkles
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grid gap-2 md:grid-cols-3", children: summary.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { className: "gap-0 rounded-lg py-2 shadow-xs", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "px-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-lg font-semibold tracking-tight", children: item.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "truncate text-[11px] text-muted-foreground", children: item.detail })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-md border bg-muted/50 p-1.5 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(item.icon, { className: "size-4" }) })
+  ] }) }) }, item.label)) });
 }
-function UsageChart(props) {
-  const buckets = import_react2.default.useMemo(() => buildUsageBuckets(props.points), [props.points]);
-  const visibleBuckets = buckets.slice(-18);
-  const groups = import_react2.default.useMemo(() => topUsageGroups(props.points, props.metricKind, props.dimension), [
-    props.dimension,
-    props.metricKind,
-    props.points
-  ]);
-  const maxBucketValue = Math.max(
-    ...visibleBuckets.map(
-      (bucket) => bucket.points.reduce((sum, point) => sum + getUsagePointValue(point, props.metricKind, props.dimension), 0)
-    ),
-    1
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: props.error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-destructive", children: props.error }) : props.isLoading && props.points.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.loading }) : visibleBuckets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex min-h-56 items-end gap-2", children: visibleBuckets.map((bucket) => {
-      const bucketTotal = bucket.points.reduce((sum, point) => sum + getUsagePointValue(point, props.metricKind, props.dimension), 0);
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex h-40 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "div",
-          {
-            className: "flex w-full flex-col-reverse overflow-hidden rounded-md",
-            style: {
-              height: `${Math.max(bucketTotal / maxBucketValue * 100, 6)}%`
-            },
-            children: groups.map((group, index) => {
-              const point = bucket.points.find((item) => item.groupKey === group.key);
-              const value = point ? getUsagePointValue(point, props.metricKind, props.dimension) : 0;
-              if (value <= 0 || bucketTotal <= 0) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "div",
-                {
-                  title: `${group.label}: ${formatMetricValue(value, props.metricKind)}`,
-                  style: {
-                    height: `${value / bucketTotal * 100}%`,
-                    backgroundColor: USAGE_CHART_COLORS[index % USAGE_CHART_COLORS.length]
-                  }
-                },
-                group.key
-              );
-            })
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium", children: formatUsageBucket(bucket.bucket, props.bucket) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(bucketTotal, props.metricKind) })
-        ] })
-      ] }, bucket.bucket);
-    }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap gap-3", children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "span",
+function UsageChart({
+  chartState,
+  metricKind
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ChartContainer,
+    {
+      className: "h-full min-h-[220px] w-full",
+      config: chartState.config,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_recharts.BarChart,
         {
-          className: "size-2 rounded-sm",
-          style: { backgroundColor: USAGE_CHART_COLORS[index % USAGE_CHART_COLORS.length] }
+          accessibilityLayer: true,
+          data: chartState.data,
+          margin: { left: 8, right: 8, top: 12 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts.CartesianGrid, { vertical: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_recharts.XAxis,
+              {
+                axisLine: false,
+                dataKey: "label",
+                tickLine: false,
+                tickMargin: 10
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_recharts.YAxis,
+              {
+                axisLine: false,
+                tickFormatter: (value) => formatCompactMetric(value, metricKind),
+                tickLine: false,
+                width: 60
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_recharts.Tooltip,
+              {
+                content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  ChartTooltipContent,
+                  {
+                    formatter: (value) => formatMetricValue(Number(value), metricKind),
+                    labelFormatter: (value) => String(value ?? "")
+                  }
+                ),
+                cursor: false
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_recharts.Legend,
+              {
+                content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartLegendContent, { className: "justify-center pt-3" })
+              }
+            ),
+            chartState.series.map((series) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_recharts.Bar,
+              {
+                dataKey: series.id,
+                fill: `var(--color-${series.id})`,
+                radius: [4, 4, 0, 0],
+                stackId: "usage"
+              },
+              series.id
+            ))
+          ]
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "max-w-48 truncate text-muted-foreground", children: group.label })
-    ] }, group.key)) })
-  ] }) });
+      )
+    }
+  );
 }
-function UsageTable(props) {
-  const rows = props.rows.slice(0, 40);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: "Usage detail" }),
-      props.isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: props.labels.loading })
-    ] }),
-    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "w-full min-w-[720px] text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: "border-b text-left text-xs uppercase tracking-[0.14em] text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 font-medium", children: "Interval" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 font-medium", children: "Group" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Input" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Output" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Reasoning" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Cache read" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 pr-4 text-right font-medium", children: "Cache write" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "py-2 text-right font-medium", children: getUsageSummaryLabel(props.labels, props.metricKind, props.dimension) })
+function UsageTable({
+  dimension,
+  groupBy,
+  labels,
+  metricKind,
+  onRowFilter,
+  rows,
+  totals
+}) {
+  const totalValue = getUsageTotalValue(totals, metricKind, dimension);
+  const filterable = groupBy !== "namespace";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: "min-h-0 gap-2 overflow-hidden py-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardHeader, { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: "text-base", children: "Usage detail" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Badge, { variant: "outline", children: [
+        formatNumber(rows.length),
+        " ",
+        getGroupByLabel(groupBy).toLowerCase()
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 overflow-hidden px-0", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-5 py-4 text-sm text-muted-foreground", children: labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full min-w-[940px] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "sticky top-0 z-10 bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "border-b text-left text-xs uppercase tracking-[0.12em] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-5 py-2.5 font-medium", children: getGroupByLabel(groupBy) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: getUsageSummaryLabel(labels, metricKind, dimension) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Share" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Calls" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Input" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Output" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Reasoning" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Cache read" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-5 py-2.5 text-right font-medium", children: "Avg/call" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: "border-b last:border-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-muted-foreground", children: formatDate(row.bucket) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "max-w-72 truncate py-2 pr-4 font-medium", children: row.groupLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "input"), props.metricKind) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "output"), props.metricKind) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "reasoning"), props.metricKind) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "cacheRead"), props.metricKind) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 pr-4 text-right", children: formatMetricValue(getUsagePointValue(row, props.metricKind, "cacheWrite"), props.metricKind) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "py-2 text-right font-medium", children: formatMetricValue(getUsagePointValue(row, props.metricKind, props.dimension), props.metricKind) })
-      ] }, `${row.bucket}:${row.groupKey}`)) })
-    ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: rows.slice(0, 60).map((row) => {
+        const share = totalValue > 0 ? row.value / totalValue : 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "tr",
+          {
+            className: cn(
+              "border-b last:border-0",
+              filterable && "cursor-pointer transition-colors hover:bg-muted/50"
+            ),
+            onClick: () => filterable && onRowFilter(row),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("td", { className: "px-5 py-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "max-w-80 truncate font-medium", children: row.groupLabel }),
+                row.groupKey !== row.groupLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-0.5 max-w-80 truncate text-xs text-muted-foreground", children: row.groupKey })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right font-medium", children: formatMetricValue(row.value, metricKind) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatPercent(share) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatNumber(row.totalCalls) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+                getUsageTotalValue(row, metricKind, "input"),
+                metricKind
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+                getUsageTotalValue(row, metricKind, "output"),
+                metricKind
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+                getUsageTotalValue(row, metricKind, "reasoning"),
+                metricKind
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
+                getUsageTotalValue(row, metricKind, "cacheRead"),
+                metricKind
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-5 py-3 text-right", children: formatMetricValue(
+                row.totalCalls > 0 ? row.value / row.totalCalls : 0,
+                metricKind
+              ) })
+            ]
+          },
+          row.groupKey
+        );
+      }) })
+    ] }) }) })
   ] });
 }
-function ActivityChart(props) {
-  const trimmedPoints = props.points.slice(-props.maxBars);
-  const maxUsageValue = Math.max(
-    ...trimmedPoints.map(
-      (point) => getActivityUsageValue(
-        point,
-        props.usageMetricKind,
-        props.usageDimension
-      )
+function DashboardHeaderControls({
+  attribution,
+  bucket,
+  config,
+  dimension,
+  groupBy,
+  metricKind,
+  period,
+  setAttribution,
+  setBucket,
+  setDimension,
+  setGroupBy,
+  setMetricKind,
+  setPeriod
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Period",
+        onValueChange: (value) => setPeriod(value),
+        options: [
+          ["24h", config.labels.range24h],
+          ["7d", config.labels.range7d],
+          ["30d", config.labels.range30d],
+          ["custom", "Custom"]
+        ],
+        value: period,
+        width: "w-[86px]"
+      }
     ),
-    1
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => {
-    const usageValue = getActivityUsageValue(
-      point,
-      props.usageMetricKind,
-      props.usageDimension
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      "div",
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
       {
-        className: "flex min-w-0 flex-1 flex-col items-center gap-2",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "div",
-            {
-              className: "w-full rounded-md bg-primary transition-all",
-              style: {
-                height: `${Math.max(usageValue / maxUsageValue * 100, 8)}%`
-              }
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(usageValue, props.usageMetricKind) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
-              formatNumber(point.totalCalls),
-              " ",
-              props.labels.usageCallsDetail
-            ] })
-          ] })
-        ]
-      },
-      point.bucket
-    );
-  }) }) });
+        label: "Bucket",
+        onValueChange: (value) => setBucket(value),
+        options: [
+          ["minute", "Minute"],
+          ["hour", "Hour"],
+          ["day", "Day"],
+          ["week", "Week"],
+          ["month", "Month"]
+        ],
+        value: bucket,
+        width: "w-[92px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: config.labels.usageMetricLabel,
+        onValueChange: (value) => setMetricKind(value),
+        options: [
+          ["cost", config.labels.usageMetricCost],
+          ["tokens", config.labels.usageMetricTokens],
+          ["calls", "Calls"]
+        ],
+        value: metricKind,
+        width: "w-[94px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Group",
+        onValueChange: (value) => setGroupBy(value),
+        options: [
+          ["participant", "Participant"],
+          ["thread", "Thread"],
+          ["namespace", "Namespace"],
+          ["provider", "Provider"],
+          ["model", "Model"]
+        ],
+        value: groupBy,
+        width: "w-[128px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: "Attribution",
+        onValueChange: (value) => setAttribution(value),
+        options: [
+          ["initiatedBy", "Initiated by"],
+          ["generatedBy", "Generated by"]
+        ],
+        value: attribution,
+        width: "w-[132px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      HeaderSelect,
+      {
+        label: config.labels.usageDimensionLabel,
+        onValueChange: (value) => setDimension(value),
+        options: USAGE_DIMENSIONS.map((nextDimension) => [
+          nextDimension,
+          getUsageDimensionLabel(config.labels, nextDimension)
+        ]),
+        value: dimension,
+        width: "w-[116px]"
+      }
+    )
+  ] });
 }
-function DataTable(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: props.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Input,
+function InlineFilters({
+  activeFilterCount,
+  clearFilters,
+  customFrom,
+  customTo,
+  model,
+  participantId,
+  participantType,
+  period,
+  provider,
+  setCustomFrom,
+  setCustomTo,
+  setModel,
+  setParticipantId,
+  setParticipantType,
+  setProvider,
+  setThreadId,
+  threadId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex max-w-full flex-wrap items-end justify-end gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 pb-1 text-xs font-medium text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Filter, { className: "size-3.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Filters" }),
+      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "secondary", children: activeFilterCount })
+    ] }),
+    period === "custom" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        FilterInput,
         {
-          className: "h-8 w-full max-w-44",
-          onChange: (event) => props.setSearchValue(event.target.value),
-          placeholder: props.searchPlaceholder,
-          value: props.searchValue
+          compact: true,
+          label: "From",
+          onChange: setCustomFrom,
+          type: "datetime-local",
+          value: customFrom
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        FilterInput,
+        {
+          compact: true,
+          label: "To",
+          onChange: setCustomTo,
+          type: "datetime-local",
+          value: customTo
         }
       )
     ] }),
-    props.rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      UsageSelect,
+      {
+        compact: true,
+        label: "Type",
+        onValueChange: (value) => setParticipantType(value),
+        options: [
+          ["all", "All"],
+          ["human", "Human"],
+          ["agent", "Agent"],
+          ["job", "Job"]
+        ],
+        value: participantType
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Search, { className: "size-3.5" }),
+        label: "Thread",
+        onChange: setThreadId,
+        value: threadId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Users, { className: "size-3.5" }),
+        label: "Participant",
+        onChange: setParticipantId,
+        value: participantId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Database, { className: "size-3.5" }),
+        label: "Provider",
+        onChange: setProvider,
+        value: provider
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FilterInput,
+      {
+        compact: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Sparkles, { className: "size-3.5" }),
+        label: "Model",
+        onChange: setModel,
+        value: model
+      }
+    ),
+    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        className: "h-8",
+        onClick: clearFilters,
+        size: "sm",
+        variant: "ghost",
+        children: "Clear"
+      }
+    )
   ] });
 }
-function ThreadsTable({
-  rows,
-  labels,
-  onThreadClick
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border bg-muted/50 p-4",
-        onThreadClick && "cursor-pointer hover:bg-muted transition-colors"
+function HeaderSelect(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      SelectTrigger,
+      {
+        "aria-label": props.label,
+        className: cn("h-8 bg-background text-xs", props.width),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
+  ] });
+}
+function UsageSelect(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[116px]"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        SelectTrigger,
+        {
+          "aria-label": props.label,
+          className: cn(
+            "w-full min-w-0 bg-background",
+            props.compact ? "h-8 text-xs" : "h-9"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
+        }
       ),
-      onClick: () => onThreadClick?.(thread.threadId),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium", children: thread.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            Badge,
-            {
-              variant: thread.status === "archived" ? "secondary" : "default",
-              children: thread.status === "archived" ? labels.statusArchived : labels.statusActive
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(thread.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            thread.participantIds.length,
-            " participants"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: formatDate(thread.lastActivityAt) })
-        ] })
-      ]
-    },
-    thread.threadId
-  )) });
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
+    ] })
+  ] });
 }
-function ParticipantsTable({
-  rows,
-  labels
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: "rounded-lg border bg-muted/50 p-4",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium", children: participant.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(participant.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(participant.threadCount),
-            " threads"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: formatDate(participant.lastActivityAt) })
-        ] })
-      ]
-    },
-    `${participant.namespace}:${participant.externalId}`
-  )) });
+function FilterInput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[150px]"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
+      props.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: props.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Input,
+        {
+          "aria-label": props.label,
+          className: cn(
+            "bg-background",
+            props.compact ? "h-8 text-xs" : "h-9",
+            props.icon && "pl-8"
+          ),
+          onChange: (event) => props.onChange(event.target.value),
+          type: props.type ?? "text",
+          value: props.value
+        }
+      )
+    ] })
+  ] });
 }
-function AgentsTable({
-  rows,
-  labels,
-  usageMetricKind,
-  usageDimension
+function EmptyDashboard({
+  description,
+  title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: "rounded-lg border bg-muted/50 p-4",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium", children: agent.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)
-          },
-          {
-            label: "Tool calls",
-            value: formatNumber(agent.toolCallMessageCount)
-          },
-          {
-            label: getUsageSummaryLabel(labels, usageMetricKind, usageDimension),
-            value: formatMetricValue(
-              getAgentUsageValue(agent, usageMetricKind, usageDimension),
-              usageMetricKind
-            )
-          }
-        ].map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium text-foreground", children: item.value }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-muted-foreground", children: item.label })
-        ] }, item.label)) })
-      ]
-    },
-    `${agent.namespace}:${agent.agentId}`
-  )) });
-}
-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 formatUsageBucket(bucket, interval) {
-  const date = new Date(bucket);
-  if (Number.isNaN(date.getTime())) return bucket;
-  if (interval === "minute" || interval === "hour") {
-    return date.toLocaleString(void 0, {
-      month: "short",
-      day: "numeric",
-      hour: "numeric",
-      minute: interval === "minute" ? "2-digit" : void 0
-    });
-  }
-  if (interval === "month") {
-    return date.toLocaleDateString(void 0, {
-      month: "short",
-      year: "numeric"
-    });
-  }
-  return date.toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric"
-  });
-}
-function formatDate(value) {
-  if (!value) return "No activity";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString(void 0, {
-    month: "short",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit"
-  });
-}
-function formatNumber(value) {
-  return new Intl.NumberFormat().format(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rounded-lg border border-dashed bg-muted/20 p-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-base font-semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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",
@@ -2328,27 +2467,43 @@ var USAGE_CHART_COLORS = [
   "hsl(var(--chart-5, 346 77% 49%))",
   "hsl(var(--muted-foreground))"
 ];
-function emptyToUndefined(value) {
-  const trimmed = value.trim();
-  return trimmed.length > 0 ? trimmed : void 0;
-}
-function getUsageRange(period, customFrom, customTo) {
-  if (period === "custom") {
-    return {
-      from: customFrom ? new Date(customFrom).toISOString() : void 0,
-      to: customTo ? new Date(customTo).toISOString() : void 0
+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)
     };
-  }
-  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() };
+    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();
@@ -2357,7 +2512,39 @@ function buildUsageBuckets(points) {
     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());
+  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();
@@ -2367,11 +2554,33 @@ function topUsageGroups(points, metricKind, dimension) {
       label: point.groupLabel,
       value: 0
     };
-    existing.value += getUsagePointValue(point, metricKind, dimension);
+    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":
@@ -2393,146 +2602,100 @@ function getUsageSummaryLabel(labels, metricKind, dimension) {
   const metricLabel = metricKind === "cost" ? labels.usageMetricCost : metricKind === "calls" ? "Calls" : labels.usageMetricTokens;
   return `${getUsageDimensionLabel(labels, dimension)} ${metricLabel}`;
 }
-function getOverviewUsageValue(overview, metricKind, dimension) {
-  const llmTotals = overview.llmTotals;
-  if (metricKind === "calls") return llmTotals.totalCalls;
-  if (metricKind === "cost") {
-    switch (dimension) {
-      case "input":
-        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;
     }
   }
-  if (metricKind === "calls") return agent.llmCallCount;
   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
+    });
   }
-  if (metricKind === "calls") return point.llmCallCount;
-  switch (dimension) {
-    case "input":
-      return point.inputTokens;
-    case "output":
-      return point.outputTokens;
-    case "reasoning":
-      return point.reasoningTokens;
-    case "cacheRead":
-      return point.cacheReadInputTokens;
-    case "cacheWrite":
-      return point.cacheCreationInputTokens;
-    case "total":
-    default:
-      return point.totalTokens;
+  if (interval === "month") {
+    return date.toLocaleDateString(void 0, {
+      month: "short",
+      year: "numeric"
+    });
   }
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
 }
-function getUsagePointValue(point, metricKind, dimension) {
-  if (metricKind === "cost") {
-    switch (dimension) {
-      case "input":
-        return point.inputCostUsd;
-      case "output":
-        return point.outputCostUsd;
-      case "reasoning":
-        return point.reasoningCostUsd;
-      case "cacheRead":
-        return point.cacheReadInputCostUsd;
-      case "cacheWrite":
-        return point.cacheCreationInputCostUsd;
-      case "total":
-      default:
-        return point.totalCostUsd;
-    }
-  }
-  if (metricKind === "calls") return point.totalCalls;
-  switch (dimension) {
-    case "input":
-      return point.inputTokens;
-    case "output":
-      return point.outputTokens;
-    case "reasoning":
-      return point.reasoningTokens;
-    case "cacheRead":
-      return point.cacheReadInputTokens;
-    case "cacheWrite":
-      return point.cacheCreationInputTokens;
-    case "total":
-    default:
-      return point.totalTokens;
-  }
+function 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") {
@@ -2547,10 +2710,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
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ThreadsView = ({
   config,
   threads,
@@ -2558,10 +2737,10 @@ var ThreadsView = ({
   onSearchChange,
   onThreadClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Input,
         {
           className: "pl-9",
@@ -2571,19 +2750,19 @@ var ThreadsView = ({
         }
       )
     ] }),
-    threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.MessageSquare, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.MessageSquare, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-medium truncate", children: thread.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "font-medium truncate", children: thread.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 Badge,
                 {
                   variant: thread.status === "archived" ? "secondary" : "default",
@@ -2592,18 +2771,18 @@ var ThreadsView = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
               formatNumber2(thread.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
               thread.participantIds.length,
               " participants"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: formatDate2(thread.lastActivityAt) })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: formatDate(thread.lastActivityAt) })
           ] })
         ]
       },
@@ -2611,7 +2790,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;
@@ -2628,8 +2807,8 @@ function formatNumber2(value) {
 
 // src/components/views/ThreadDetailView.tsx
 var import_react3 = require("react");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MESSAGES_PAGE_SIZE = 50;
 var ThreadDetailView = ({
   threadId,
@@ -2687,36 +2866,36 @@ var ThreadDetailView = ({
     }
   }, [threadId, pageInfo, isLoadingMore, config.baseUrl, config.getRequestHeaders]);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-4 py-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-destructive font-medium", children: error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Button, { variant: "outline", onClick: onBack, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-destructive font-medium", children: error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Button, { variant: "outline", onClick: onBack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.ArrowLeft, { className: "mr-2 h-4 w-4" }),
           "Back"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: "mt-1 shrink-0",
           onClick: onBack,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ArrowLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.ArrowLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Badge,
             {
               variant: thread?.status === "archived" ? "secondary" : "default",
@@ -2724,31 +2903,31 @@ var ThreadDetailView = ({
             }
           )
         ] }),
-        thread?.summary && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
-          thread?.createdAt && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
+        thread?.summary && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
+          thread?.createdAt && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
             "Created ",
-            formatDate3(thread.createdAt)
+            formatDate2(thread.createdAt)
           ] }),
-          thread?.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
+          thread?.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
             "Updated ",
-            formatDate3(thread.updatedAt)
+            formatDate2(thread.updatedAt)
           ] }),
-          thread?.participants && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
+          thread?.participants && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
             thread.participants.length,
             " participants"
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("h3", { className: "text-sm font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("h3", { className: "text-sm font-medium text-muted-foreground", children: [
         "Messages (",
         messages.length,
         pageInfo?.hasMoreBefore ? "+" : "",
         ")"
       ] }) }),
-      pageInfo?.hasMoreBefore && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      pageInfo?.hasMoreBefore && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         Button,
         {
           variant: "ghost",
@@ -2756,12 +2935,12 @@ var ThreadDetailView = ({
           onClick: () => void loadMore(),
           disabled: isLoadingMore,
           children: [
-            isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ChevronUp, { className: "mr-2 h-3 w-3" }),
+            isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.ChevronUp, { className: "mr-2 h-3 w-3" }),
             "Load older messages"
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageRow, { message }, message.id)) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageRow, { message }, message.id)) }) })
     ] })
   ] });
 };
@@ -2769,43 +2948,43 @@ function MessageRow({ message }) {
   const [expanded, setExpanded] = (0, import_react3.useState)(false);
   const hasToolCalls = Array.isArray(message.toolCalls) && message.toolCalls.length > 0;
   const hasReasoning = !!message.reasoning;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SenderIcon, { senderType: message.senderType }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
-        message.createdAt && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SenderIcon, { senderType: message.senderType }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
+        message.createdAt && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
       ] }),
-      message.content && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
-      (hasToolCalls || hasReasoning) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mt-2 space-y-2", children: [
-        hasToolCalls && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      message.content && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
+      (hasToolCalls || hasReasoning) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-2 space-y-2", children: [
+        hasToolCalls && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "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__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Wrench, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Wrench, { className: "h-3 w-3" }),
               message.toolCalls.length,
               " tool call",
               message.toolCalls.length > 1 ? "s" : ""
             ]
           }
         ),
-        hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "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__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Cpu, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Cpu, { className: "h-3 w-3" }),
               "Reasoning"
             ]
           }
         ),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("pre", { className: "mt-2 rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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 } : {}
@@ -2821,16 +3000,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__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Bot, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Bot, { className: "h-3.5 w-3.5" }) });
     case "user":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.User, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.User, { className: "h-3.5 w-3.5" }) });
     case "tool":
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Wrench, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Wrench, { className: "h-3.5 w-3.5" }) });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Cpu, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.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, {
@@ -2852,8 +3031,8 @@ function formatTimestamp(value) {
 }
 
 // src/components/views/ParticipantsView.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ParticipantsView = ({
   config,
   participants,
@@ -2861,10 +3040,10 @@ var ParticipantsView = ({
   onSearchChange,
   onParticipantClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Input,
         {
           className: "pl-9",
@@ -2874,33 +3053,33 @@ var ParticipantsView = ({
         }
       )
     ] }),
-    participants.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Users, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "space-y-2", children: participants.map((p) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    participants.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Users, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "space-y-2", children: participants.map((p) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "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__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "font-medium truncate", children: p.displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge, { variant: "outline", className: "shrink-0 text-xs", children: p.participantType }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge, { variant: p.isGlobal ? "default" : "secondary", className: "shrink-0 text-xs", children: p.isGlobal ? config.labels.scopeGlobal : config.labels.scopeScoped })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-medium truncate", children: p.displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Badge, { variant: "outline", className: "shrink-0 text-xs", children: p.participantType }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Badge, { variant: p.isGlobal ? "default" : "secondary", className: "shrink-0 text-xs", children: p.isGlobal ? config.labels.scopeGlobal : config.labels.scopeScoped })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: p.externalId })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: p.externalId })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
               formatNumber3(p.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
               formatNumber3(p.threadCount),
               " threads"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: formatDate4(p.lastActivityAt) })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: formatDate3(p.lastActivityAt) })
           ] })
         ]
       },
@@ -2908,7 +3087,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;
@@ -2920,8 +3099,8 @@ function formatNumber3(value) {
 
 // src/components/views/ParticipantDetailView.tsx
 var import_react4 = require("react");
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ParticipantDetailView = ({
   participantId,
   config,
@@ -2971,25 +3150,25 @@ var ParticipantDetailView = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.ArrowLeft, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "text-xl font-semibold truncate", children: participantId }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-muted-foreground", children: "Participant Detail" })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ArrowLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-xl font-semibold truncate", children: participantId }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-muted-foreground", children: "Participant Detail" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-        saveMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-emerald-600", children: saveMessage }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
-          isSaving ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Save, { className: "mr-2 h-3 w-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+        saveMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xs text-emerald-600", children: saveMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
+          isSaving ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Save, { className: "mr-2 h-3 w-3" }),
           "Save"
         ] })
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "textarea",
       {
         className: "w-full min-h-[400px] p-4 font-mono text-sm bg-transparent resize-y focus:outline-none",
@@ -3002,8 +3181,8 @@ var ParticipantDetailView = ({
 };
 
 // src/components/views/AgentsView.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var AgentsView = ({
   config,
   agents,
@@ -3011,10 +3190,10 @@ var AgentsView = ({
   onSearchChange,
   onAgentClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Input,
         {
           className: "pl-9",
@@ -3024,48 +3203,48 @@ var AgentsView = ({
         }
       )
     ] }),
-    agents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.Bot, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    agents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.Bot, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         className: "rounded-lg border bg-card p-5 transition-colors hover:bg-muted/50 cursor-pointer",
         onClick: () => onAgentClick?.(agent.agentId),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-medium truncate", children: agent.displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-medium truncate", children: agent.displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Badge, { variant: "outline", className: "shrink-0", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Badge, { variant: "outline", className: "shrink-0", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mt-4 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mt-4 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
               formatNumber4(agent.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
               formatNumber4(agent.llmCallCount),
               " LLM calls"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
               formatNumber4(agent.toolCallMessageCount),
               " tool calls"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
               formatNumber4(agent.totalTokens),
               " tokens"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-3 text-xs text-muted-foreground", children: formatDate5(agent.lastActivityAt) })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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;
@@ -3076,8 +3255,8 @@ function formatNumber4(value) {
 }
 
 // src/components/views/AgentDetailView.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var AgentDetailView = ({
   agentId,
   config,
@@ -3086,13 +3265,13 @@ var AgentDetailView = ({
 }) => {
   const agent = agents.find((a) => a.agentId === agentId);
   if (!agent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-4 py-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "text-muted-foreground", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-muted-foreground", children: [
         "Agent not found: ",
         agentId
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Button, { variant: "outline", onClick: onBack, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Button, { variant: "outline", onClick: onBack, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.ArrowLeft, { className: "mr-2 h-4 w-4" }),
         " Back"
       ] })
     ] });
@@ -3108,43 +3287,43 @@ var AgentDetailView = ({
     { label: "Cache Created", value: agent.cacheCreationInputTokens },
     { label: "Total Tokens", value: agent.totalTokens }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "ghost", size: "icon", className: "mt-1 shrink-0", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.ArrowLeft, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.Bot, { className: "h-5 w-5" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "text-xl font-semibold", children: agent.displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "ghost", size: "icon", className: "mt-1 shrink-0", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.ArrowLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.Bot, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-xl font-semibold", children: agent.displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
             ] }),
-            agent.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground", children: agent.description })
+            agent.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground", children: agent.description })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
             "ID: ",
             agent.agentId
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
             "Namespace: ",
             agent.namespace
           ] }),
-          agent.lastActivityAt && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+          agent.lastActivityAt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
             "Last active: ",
-            formatDate6(agent.lastActivityAt)
+            formatDate5(agent.lastActivityAt)
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "grid gap-4 sm:grid-cols-3 lg:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mt-2 text-2xl font-semibold tracking-tight", children: new Intl.NumberFormat().format(stat.value) })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid gap-4 sm:grid-cols-3 lg:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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" });
@@ -3152,8 +3331,8 @@ function formatDate6(value) {
 
 // src/components/views/CollectionItemsView.tsx
 var import_react5 = require("react");
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var CollectionItemsView = ({
   collection,
   config,
@@ -3199,17 +3378,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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-lg font-semibold capitalize", children: collection }),
-      onCreateNew && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Button, { size: "sm", onClick: onCreateNew, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.Plus, { className: "mr-2 h-3 w-3" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-lg font-semibold capitalize", children: collection }),
+      onCreateNew && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Button, { size: "sm", onClick: onCreateNew, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Plus, { className: "mr-2 h-3 w-3" }),
         " New"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Input,
         {
           className: "pl-9",
@@ -3219,20 +3398,20 @@ var CollectionItemsView = ({
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.Database, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: search ? config.labels.noResults : `No items in ${collection}` })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-2", children: items.map((item, idx) => {
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Database, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: search ? config.labels.noResults : `No items in ${collection}` })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2", children: items.map((item, idx) => {
       const itemId = getItemId(item);
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "font-medium font-mono text-sm truncate", children: itemId }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: getItemPreview(item) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-medium font-mono text-sm truncate", children: itemId }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: getItemPreview(item) })
           ] })
         },
         itemId + idx
@@ -3243,8 +3422,8 @@ var CollectionItemsView = ({
 
 // src/components/views/CollectionItemDetailView.tsx
 var import_react6 = require("react");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var CollectionItemDetailView = ({
   collection,
   itemId,
@@ -3318,15 +3497,15 @@ var CollectionItemDetailView = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.ArrowLeft, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-xl font-semibold truncate capitalize", children: isNew ? `New ${collection} item` : `${collection} / ${itemId}` }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
-        saveMessage && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xs text-emerald-600", children: saveMessage }),
-        !isNew && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ArrowLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-xl font-semibold truncate capitalize", children: isNew ? `New ${collection} item` : `${collection} / ${itemId}` }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+        saveMessage && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs text-emerald-600", children: saveMessage }),
+        !isNew && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           Button,
           {
             variant: "destructive",
@@ -3334,19 +3513,19 @@ var CollectionItemDetailView = ({
             onClick: () => void handleDelete(),
             disabled: isDeleting,
             children: [
-              isDeleting ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Trash2, { className: "mr-2 h-3 w-3" }),
+              isDeleting ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Trash2, { className: "mr-2 h-3 w-3" }),
               "Delete"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
-          isSaving ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Save, { className: "mr-2 h-3 w-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
+          isSaving ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Save, { className: "mr-2 h-3 w-3" }),
           isNew ? "Create" : "Save"
         ] })
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "textarea",
       {
         className: "w-full min-h-[400px] p-4 font-mono text-sm bg-transparent resize-y focus:outline-none",
@@ -3360,8 +3539,8 @@ var CollectionItemDetailView = ({
 
 // src/components/views/EventsView.tsx
 var import_react7 = require("react");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var STATUS_VARIANTS = {
   pending: "outline",
   processing: "default",
@@ -3394,13 +3573,13 @@ var EventsView = ({ config }) => {
       setIsLoading(false);
     }
   }, [threadId, config.baseUrl, config.getRequestHeaders]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-end gap-3 max-w-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "text-sm font-medium mb-1 block", children: "Thread ID" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-end gap-3 max-w-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "text-sm font-medium mb-1 block", children: "Thread ID" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             Input,
             {
               className: "pl-9",
@@ -3412,55 +3591,55 @@ var EventsView = ({ config }) => {
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Button, { onClick: () => void handleSearch(), disabled: isLoading || !threadId.trim(), children: [
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { onClick: () => void handleSearch(), disabled: isLoading || !threadId.trim(), children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
         "Inspect"
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-    !hasSearched ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Activity, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: "Enter a thread ID to inspect its next pending queue event." })
-    ] }) : isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : !event ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Activity, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: "No pending events found for this thread." })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "rounded-lg border bg-card p-5 space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-medium", children: event.eventType }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xs text-muted-foreground font-mono mt-1", children: event.id })
+    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    !hasSearched ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Activity, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: "Enter a thread ID to inspect its next pending queue event." })
+    ] }) : isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : !event ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Activity, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: "No pending events found for this thread." })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "rounded-lg border bg-card p-5 space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "font-medium", children: event.eventType }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs text-muted-foreground font-mono mt-1", children: event.id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge, { variant: STATUS_VARIANTS[event.status] ?? "outline", children: event.status })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: STATUS_VARIANTS[event.status] ?? "outline", children: event.status })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2 text-sm", children: [
-        event.traceId && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "Trace:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2 text-sm", children: [
+        event.traceId && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-muted-foreground", children: "Trace:" }),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-mono text-xs", children: event.traceId })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-mono text-xs", children: event.traceId })
         ] }),
-        event.parentEventId && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "Parent:" }),
+        event.parentEventId && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-muted-foreground", children: "Parent:" }),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-mono text-xs", children: event.parentEventId })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-mono text-xs", children: event.parentEventId })
         ] }),
-        event.priority != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "Priority:" }),
+        event.priority != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-muted-foreground", children: "Priority:" }),
           " ",
           event.priority
         ] }),
-        event.createdAt && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "Created:" }),
+        event.createdAt && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-muted-foreground", children: "Created:" }),
           " ",
           formatTimestamp2(event.createdAt)
         ] })
       ] }),
-      event.payload != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Payload" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Payload" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-40", children: JSON.stringify(event.metadata, null, 2) })
       ] })
     ] })
   ] });
@@ -3478,7 +3657,7 @@ function formatTimestamp2(value) {
 }
 
 // src/CopilotzAdmin.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var CopilotzAdmin = ({
   config: userConfig,
   className
@@ -3490,6 +3669,8 @@ var CopilotzAdmin = ({
   const [route, setRoute] = (0, import_react8.useState)({ page: config.defaultPage });
   const [namespace, setNamespace] = (0, import_react8.useState)(config.namespace);
   const [collections, setCollections] = (0, import_react8.useState)([]);
+  const [headerControls, setHeaderControls] = (0, import_react8.useState)(null);
+  const [headerRefresh, setHeaderRefresh] = (0, import_react8.useState)(null);
   const [threadSearch, setThreadSearch] = (0, import_react8.useState)("");
   const [participantSearch, setParticipantSearch] = (0, import_react8.useState)("");
   const [agentSearch, setAgentSearch] = (0, import_react8.useState)("");
@@ -3570,18 +3751,18 @@ var CopilotzAdmin = ({
     }
   })();
   if (admin.isLoading && !admin.overview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Card, { className: cn("border-border", className), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Card, { className: cn("border-border", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
   }
   if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "destructive", onClick: () => void admin.refresh(), children: config.labels.retry })
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "destructive", onClick: () => void admin.refresh(), children: config.labels.retry })
     ] }) });
   }
   const renderCurrentView = () => {
     switch (route.page) {
       case "dashboard":
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           DashboardView,
           {
             config,
@@ -3598,11 +3779,13 @@ var CopilotzAdmin = ({
             onThreadSearchChange: setThreadSearch,
             onParticipantSearchChange: setParticipantSearch,
             onAgentSearchChange: setAgentSearch,
-            onThreadClick: handleThreadClick
+            onThreadClick: handleThreadClick,
+            setHeaderControls,
+            setHeaderRefresh
           }
         );
       case "threads":
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           ThreadsView,
           {
             config,
@@ -3613,9 +3796,9 @@ var CopilotzAdmin = ({
           }
         );
       case "thread-detail":
-        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
       case "participants":
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           ParticipantsView,
           {
             config,
@@ -3626,9 +3809,9 @@ var CopilotzAdmin = ({
           }
         );
       case "participant-detail":
-        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
       case "agents":
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           AgentsView,
           {
             config,
@@ -3639,9 +3822,9 @@ var CopilotzAdmin = ({
           }
         );
       case "agent-detail":
-        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AgentDetailView, { agentId: route.resourceId, config, agents: admin.agents, onBack: handleBackToAgents }) : null;
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AgentDetailView, { agentId: route.resourceId, config, agents: admin.agents, onBack: handleBackToAgents }) : null;
       case "collection-items":
-        return route.collection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return route.collection ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           CollectionItemsView,
           {
             collection: route.collection,
@@ -3652,7 +3835,7 @@ var CopilotzAdmin = ({
           }
         ) : null;
       case "collection-item-detail":
-        return route.collection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return route.collection ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           CollectionItemDetailView,
           {
             collection: route.collection,
@@ -3663,12 +3846,12 @@ var CopilotzAdmin = ({
           }
         ) : null;
       case "events":
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EventsView, { config });
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EventsView, { config });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: cn(
@@ -3676,7 +3859,7 @@ var CopilotzAdmin = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           AdminSidebar,
           {
             config,
@@ -3689,21 +3872,24 @@ var CopilotzAdmin = ({
             onNamespaceChange: setNamespace
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             AdminHeader,
             {
               config,
               currentRoute: route,
-              range: admin.filters.range,
-              interval: admin.filters.interval,
-              onRangeChange: admin.setRange,
-              onIntervalChange: admin.setInterval,
-              onRefresh: () => void admin.refresh(),
-              isLoading: admin.isLoading
+              onRefresh: () => {
+                if (route.page === "dashboard" && headerRefresh) {
+                  headerRefresh();
+                  return;
+                }
+                void admin.refresh();
+              },
+              isLoading: admin.isLoading,
+              controls: route.page === "dashboard" ? headerControls : null
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 overflow-auto p-4", children: renderCurrentView() })
         ] }) })
       ]
     }