@copilotz/admin 0.3.8 → 0.3.9

package/dist/index.cjs

@@ -52,7 +52,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/CopilotzAdmin.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/config.ts
 var defaultAdminConfig = {
@@ -85,7 +85,21 @@ var defaultAdminConfig = {
     activeThreadsCard: "Active threads",
     participantsCard: "Participants",
     tokensCard: "LLM tokens",
+    costCard: "LLM cost",
     queueCard: "Queued events",
+    llmUsageTitle: "LLM Usage",
+    usageMetricLabel: "Metric",
+    usageDimensionLabel: "Usage type",
+    usageMetricTokens: "Tokens",
+    usageMetricCost: "Cost",
+    usageTotal: "Total",
+    usageInput: "Input",
+    usageOutput: "Output",
+    usageReasoning: "Reasoning",
+    usageCacheRead: "Cache read",
+    usageCacheWrite: "Cache write",
+    usageCallsDetail: "LLM calls",
+    usageUnavailableDetail: "Available when provider-native usage exists",
     statusActive: "Active",
     statusArchived: "Archived",
     scopeGlobal: "Global",
@@ -1530,6 +1544,9 @@ var AdminHeader = ({
   ] }) }) });
 };
 
+// src/components/views/DashboardView.tsx
+var import_react2 = __toESM(require("react"), 1);
+
 // src/components/ui/badge.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
@@ -1585,6 +1602,23 @@ var DashboardView = ({
   onAgentSearchChange,
   onThreadClick
 }) => {
+  const [usageMetricKind, setUsageMetricKind] = import_react2.default.useState(
+    "tokens"
+  );
+  const [usageDimension, setUsageDimension] = import_react2.default.useState(
+    "total"
+  );
+  const llmSummaryValue = overview ? getOverviewUsageValue(overview, usageMetricKind, usageDimension) : 0;
+  const llmSummaryLabel = getUsageSummaryLabel(
+    config.labels,
+    usageMetricKind,
+    usageDimension
+  );
+  const usageBreakdownCards = USAGE_DIMENSIONS.map((dimension) => ({
+    dimension,
+    label: getUsageDimensionLabel(config.labels, dimension),
+    value: overview ? getOverviewUsageValue(overview, usageMetricKind, dimension) : 0
+  }));
   const cards = [
     {
       label: config.labels.messagesCard,
@@ -1602,9 +1636,10 @@ var DashboardView = ({
       detail: `${overview?.participantTotals.agents ?? 0} agents`
     },
     {
-      label: config.labels.tokensCard,
-      value: overview?.llmTotals.totalTokens ?? 0,
-      detail: `${overview?.llmTotals.totalCalls ?? 0} calls`
+      label: llmSummaryLabel,
+      value: llmSummaryValue,
+      detail: `${overview?.llmTotals.totalCalls ?? 0} ${config.labels.usageCallsDetail}`,
+      metricKind: usageMetricKind
     },
     {
       label: config.labels.queueCard,
@@ -1626,13 +1661,81 @@ var DashboardView = ({
           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: formatNumber(card.value) }),
+            /* @__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.jsxs)("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SectionHeading, { title: config.labels.llmUsageTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+          /* @__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: config.labels.usageMetricLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              Select,
+              {
+                value: usageMetricKind,
+                onValueChange: (value) => setUsageMetricKind(value),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SelectContent, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "tokens", children: config.labels.usageMetricTokens }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: "cost", children: config.labels.usageMetricCost })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__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: config.labels.usageDimensionLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              Select,
+              {
+                value: usageDimension,
+                onValueChange: (value) => setUsageDimension(value),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { children: USAGE_DIMENSIONS.map((dimension) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectItem, { value: dimension, children: getUsageDimensionLabel(config.labels, dimension) }, dimension)) })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: usageBreakdownCards.map((card) => {
+        const isSelected = card.dimension === usageDimension;
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: cn(
+              "rounded-xl border bg-card p-5 shadow-sm transition-colors",
+              isSelected && "border-primary/60 ring-1 ring-primary/15"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { 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-2xl font-semibold tracking-tight", children: formatMetricValue(card.value, usageMetricKind) })
+                ] }),
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: config.labels.usageDimensionLabel })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+                overview?.llmTotals.totalCalls ?? 0,
+                " ",
+                config.labels.usageCallsDetail
+              ] })
+            ]
+          },
+          card.dimension
+        );
+      }) })
+    ] }),
     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)(
@@ -1641,7 +1744,9 @@ var DashboardView = ({
           interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
-          points: activity
+          points: activity,
+          usageDimension,
+          usageMetricKind
         }
       )
     ] }),
@@ -1683,7 +1788,15 @@ var DashboardView = ({
           searchValue: agentSearch,
           setSearchValue: onAgentSearchChange,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AgentsTable, { rows: agents, labels: config.labels })
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            AgentsTable,
+            {
+              rows: agents,
+              labels: config.labels,
+              usageMetricKind,
+              usageDimension
+            }
+          )
         }
       )
     ] })
@@ -1694,35 +1807,50 @@ function SectionHeading({ title }) {
 }
 function ActivityChart(props) {
   const trimmedPoints = props.points.slice(-props.maxBars);
-  const maxMessages = Math.max(
-    ...trimmedPoints.map((point) => point.messageCount),
+  const maxUsageValue = Math.max(
+    ...trimmedPoints.map(
+      (point) => getActivityUsageValue(
+        point,
+        props.usageMetricKind,
+        props.usageDimension
+      )
+    ),
     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) => /* @__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-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(point.messageCount / maxMessages * 100, 8)}%`
+  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",
+      {
+        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.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
-            formatNumber(point.messageCount),
-            " msg"
+          ) }),
+          /* @__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
-  )) }) });
+        ]
+      },
+      point.bucket
+    );
+  }) }) });
 }
 function DataTable(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
@@ -1818,7 +1946,9 @@ function ParticipantsTable({
 }
 function AgentsTable({
   rows,
-  labels
+  labels,
+  usageMetricKind,
+  usageDimension
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -1832,24 +1962,30 @@ function AgentsTable({
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(agent.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(agent.llmCallCount),
-            " LLM calls"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(agent.toolCallMessageCount),
-            " tool calls"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-            formatNumber(agent.totalTokens),
-            " tokens"
-          ] })
-        ] })
+        /* @__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}`
@@ -1881,6 +2017,151 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
+var USAGE_DIMENSIONS = [
+  "total",
+  "input",
+  "output",
+  "reasoning",
+  "cacheRead",
+  "cacheWrite"
+];
+function getUsageDimensionLabel(labels, dimension) {
+  switch (dimension) {
+    case "input":
+      return labels.usageInput;
+    case "output":
+      return labels.usageOutput;
+    case "reasoning":
+      return labels.usageReasoning;
+    case "cacheRead":
+      return labels.usageCacheRead;
+    case "cacheWrite":
+      return labels.usageCacheWrite;
+    case "total":
+    default:
+      return labels.usageTotal;
+  }
+}
+function getUsageSummaryLabel(labels, metricKind, dimension) {
+  const metricLabel = metricKind === "cost" ? labels.usageMetricCost : labels.usageMetricTokens;
+  return `${getUsageDimensionLabel(labels, dimension)} ${metricLabel}`;
+}
+function getOverviewUsageValue(overview, metricKind, dimension) {
+  const llmTotals = overview.llmTotals;
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return llmTotals.inputCostUsd;
+      case "output":
+        return llmTotals.outputCostUsd;
+      case "reasoning":
+        return llmTotals.reasoningCostUsd;
+      case "cacheRead":
+        return llmTotals.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return llmTotals.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return llmTotals.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return llmTotals.inputTokens;
+    case "output":
+      return llmTotals.outputTokens;
+    case "reasoning":
+      return llmTotals.reasoningTokens;
+    case "cacheRead":
+      return llmTotals.cacheReadInputTokens;
+    case "cacheWrite":
+      return llmTotals.cacheCreationInputTokens;
+    case "total":
+    default:
+      return llmTotals.totalTokens;
+  }
+}
+function getAgentUsageValue(agent, metricKind, dimension) {
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return agent.inputCostUsd;
+      case "output":
+        return agent.outputCostUsd;
+      case "reasoning":
+        return agent.reasoningCostUsd;
+      case "cacheRead":
+        return agent.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return agent.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return agent.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return agent.inputTokens;
+    case "output":
+      return agent.outputTokens;
+    case "reasoning":
+      return agent.reasoningTokens;
+    case "cacheRead":
+      return agent.cacheReadInputTokens;
+    case "cacheWrite":
+      return agent.cacheCreationInputTokens;
+    case "total":
+    default:
+      return agent.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;
+    }
+  }
+  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 formatMetricValue(value, metricKind) {
+  if (metricKind === "cost") {
+    const absoluteValue = Math.abs(value);
+    const maximumFractionDigits = absoluteValue >= 1 ? 2 : absoluteValue >= 0.01 ? 4 : 6;
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits
+    }).format(value);
+  }
+  return formatNumber(value);
+}
 
 // src/components/views/ThreadsView.tsx
 var import_lucide_react6 = require("lucide-react");
@@ -1961,7 +2242,7 @@ function formatNumber2(value) {
 }
 
 // src/components/views/ThreadDetailView.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var MESSAGES_PAGE_SIZE = 50;
@@ -1970,17 +2251,17 @@ var ThreadDetailView = ({
   config,
   onBack
 }) => {
-  const [thread, setThread] = (0, import_react2.useState)(null);
-  const [messages, setMessages] = (0, import_react2.useState)([]);
-  const [pageInfo, setPageInfo] = (0, import_react2.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
-  const [isLoadingMore, setIsLoadingMore] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
+  const [thread, setThread] = (0, import_react3.useState)(null);
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [pageInfo, setPageInfo] = (0, import_react3.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
   const fetchOptions = {
     baseUrl: config.baseUrl,
     getRequestHeaders: config.getRequestHeaders
   };
-  const loadInitial = (0, import_react2.useCallback)(async () => {
+  const loadInitial = (0, import_react3.useCallback)(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -1999,10 +2280,10 @@ var ThreadDetailView = ({
       setIsLoading(false);
     }
   }, [threadId, config.baseUrl, config.getRequestHeaders]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     void loadInitial();
   }, [loadInitial]);
-  const loadMore = (0, import_react2.useCallback)(async () => {
+  const loadMore = (0, import_react3.useCallback)(async () => {
     if (!pageInfo?.hasMoreBefore || !pageInfo.oldestMessageId || isLoadingMore) {
       return;
     }
@@ -2100,7 +2381,7 @@ var ThreadDetailView = ({
   ] });
 };
 function MessageRow({ message }) {
-  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  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: [
@@ -2253,7 +2534,7 @@ function formatNumber3(value) {
 }
 
 // src/components/views/ParticipantDetailView.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var ParticipantDetailView = ({
@@ -2261,17 +2542,17 @@ var ParticipantDetailView = ({
   config,
   onBack
 }) => {
-  const [data, setData] = (0, import_react3.useState)(null);
-  const [editJson, setEditJson] = (0, import_react3.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const [isSaving, setIsSaving] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const [saveMessage, setSaveMessage] = (0, import_react3.useState)(null);
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [editJson, setEditJson] = (0, import_react4.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [isSaving, setIsSaving] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [saveMessage, setSaveMessage] = (0, import_react4.useState)(null);
   const fetchOptions = {
     baseUrl: config.baseUrl,
     getRequestHeaders: config.getRequestHeaders
   };
-  const load = (0, import_react3.useCallback)(async () => {
+  const load = (0, import_react4.useCallback)(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -2284,7 +2565,7 @@ var ParticipantDetailView = ({
       setIsLoading(false);
     }
   }, [participantId, config.baseUrl, config.getRequestHeaders]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     void load();
   }, [load]);
   const handleSave = async () => {
@@ -2485,7 +2766,7 @@ function formatDate6(value) {
 }
 
 // src/components/views/CollectionItemsView.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var CollectionItemsView = ({
@@ -2495,15 +2776,15 @@ var CollectionItemsView = ({
   onItemClick,
   onCreateNew
 }) => {
-  const [items, setItems] = (0, import_react4.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
-  const [search, setSearch] = (0, import_react4.useState)("");
-  const [error, setError] = (0, import_react4.useState)(null);
+  const [items, setItems] = (0, import_react5.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(true);
+  const [search, setSearch] = (0, import_react5.useState)("");
+  const [error, setError] = (0, import_react5.useState)(null);
   const fetchOptions = {
     baseUrl: config.baseUrl,
     getRequestHeaders: config.getRequestHeaders
   };
-  const load = (0, import_react4.useCallback)(async () => {
+  const load = (0, import_react5.useCallback)(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -2519,7 +2800,7 @@ var CollectionItemsView = ({
       setIsLoading(false);
     }
   }, [collection, search, namespace, config.baseUrl, config.getRequestHeaders]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     void load();
   }, [load]);
   const getItemId = (item) => {
@@ -2576,7 +2857,7 @@ var CollectionItemsView = ({
 };
 
 // src/components/views/CollectionItemDetailView.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var CollectionItemDetailView = ({
@@ -2588,17 +2869,17 @@ var CollectionItemDetailView = ({
   onDeleted
 }) => {
   const isNew = !itemId;
-  const [editJson, setEditJson] = (0, import_react5.useState)(isNew ? "{\n  \n}" : "");
-  const [isLoading, setIsLoading] = (0, import_react5.useState)(!isNew);
-  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
-  const [isDeleting, setIsDeleting] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [saveMessage, setSaveMessage] = (0, import_react5.useState)(null);
+  const [editJson, setEditJson] = (0, import_react6.useState)(isNew ? "{\n  \n}" : "");
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(!isNew);
+  const [isSaving, setIsSaving] = (0, import_react6.useState)(false);
+  const [isDeleting, setIsDeleting] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [saveMessage, setSaveMessage] = (0, import_react6.useState)(null);
   const fetchOptions = {
     baseUrl: config.baseUrl,
     getRequestHeaders: config.getRequestHeaders
   };
-  const load = (0, import_react5.useCallback)(async () => {
+  const load = (0, import_react6.useCallback)(async () => {
     if (!itemId) return;
     setIsLoading(true);
     setError(null);
@@ -2611,7 +2892,7 @@ var CollectionItemDetailView = ({
       setIsLoading(false);
     }
   }, [collection, itemId, namespace, config.baseUrl, config.getRequestHeaders]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     void load();
   }, [load]);
   const handleSave = async () => {
@@ -2693,7 +2974,7 @@ var CollectionItemDetailView = ({
 };
 
 // src/components/views/EventsView.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var STATUS_VARIANTS = {
@@ -2705,16 +2986,16 @@ var STATUS_VARIANTS = {
   overwritten: "secondary"
 };
 var EventsView = ({ config }) => {
-  const [threadId, setThreadId] = (0, import_react6.useState)("");
-  const [event, setEvent] = (0, import_react6.useState)(null);
-  const [hasSearched, setHasSearched] = (0, import_react6.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
+  const [threadId, setThreadId] = (0, import_react7.useState)("");
+  const [event, setEvent] = (0, import_react7.useState)(null);
+  const [hasSearched, setHasSearched] = (0, import_react7.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
   const fetchOptions = {
     baseUrl: config.baseUrl,
     getRequestHeaders: config.getRequestHeaders
   };
-  const handleSearch = (0, import_react6.useCallback)(async () => {
+  const handleSearch = (0, import_react7.useCallback)(async () => {
     if (!threadId.trim()) return;
     setIsLoading(true);
     setError(null);
@@ -2817,19 +3098,19 @@ var CopilotzAdmin = ({
   config: userConfig,
   className
 }) => {
-  const config = (0, import_react7.useMemo)(
+  const config = (0, import_react8.useMemo)(
     () => mergeAdminConfig(defaultAdminConfig, userConfig),
     [userConfig]
   );
-  const [route, setRoute] = (0, import_react7.useState)({ page: config.defaultPage });
-  const [namespace, setNamespace] = (0, import_react7.useState)(config.namespace);
-  const [collections, setCollections] = (0, import_react7.useState)([]);
-  const [threadSearch, setThreadSearch] = (0, import_react7.useState)("");
-  const [participantSearch, setParticipantSearch] = (0, import_react7.useState)("");
-  const [agentSearch, setAgentSearch] = (0, import_react7.useState)("");
-  const deferredThreadSearch = (0, import_react7.useDeferredValue)(threadSearch);
-  const deferredParticipantSearch = (0, import_react7.useDeferredValue)(participantSearch);
-  const deferredAgentSearch = (0, import_react7.useDeferredValue)(agentSearch);
+  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 [threadSearch, setThreadSearch] = (0, import_react8.useState)("");
+  const [participantSearch, setParticipantSearch] = (0, import_react8.useState)("");
+  const [agentSearch, setAgentSearch] = (0, import_react8.useState)("");
+  const deferredThreadSearch = (0, import_react8.useDeferredValue)(threadSearch);
+  const deferredParticipantSearch = (0, import_react8.useDeferredValue)(participantSearch);
+  const deferredAgentSearch = (0, import_react8.useDeferredValue)(agentSearch);
   const admin = useCopilotzAdmin({
     baseUrl: config.baseUrl,
     getRequestHeaders: config.getRequestHeaders,
@@ -2840,52 +3121,52 @@ var CopilotzAdmin = ({
     participantSearch: deferredParticipantSearch,
     agentSearch: deferredAgentSearch
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!config.features.showCollections) return;
     fetchCollectionNames({
       baseUrl: config.baseUrl,
       getRequestHeaders: config.getRequestHeaders
     }).then(setCollections).catch(() => setCollections([]));
   }, [config.baseUrl, config.getRequestHeaders, config.features.showCollections]);
-  const navigate = (0, import_react7.useCallback)(
+  const navigate = (0, import_react8.useCallback)(
     (next) => {
       setRoute(next);
       config.onNavigate?.(next);
     },
     [config]
   );
-  const handleSidebarNavigate = (0, import_react7.useCallback)(
+  const handleSidebarNavigate = (0, import_react8.useCallback)(
     (page) => navigate({ page }),
     [navigate]
   );
-  const handleSidebarRouteNavigate = (0, import_react7.useCallback)(
+  const handleSidebarRouteNavigate = (0, import_react8.useCallback)(
     (r) => navigate(r),
     [navigate]
   );
-  const handleThreadClick = (0, import_react7.useCallback)(
+  const handleThreadClick = (0, import_react8.useCallback)(
     (threadId) => navigate({ page: "thread-detail", resourceId: threadId }),
     [navigate]
   );
-  const handleBackToThreads = (0, import_react7.useCallback)(() => navigate({ page: "threads" }), [navigate]);
-  const handleParticipantClick = (0, import_react7.useCallback)(
+  const handleBackToThreads = (0, import_react8.useCallback)(() => navigate({ page: "threads" }), [navigate]);
+  const handleParticipantClick = (0, import_react8.useCallback)(
     (id) => navigate({ page: "participant-detail", resourceId: id }),
     [navigate]
   );
-  const handleBackToParticipants = (0, import_react7.useCallback)(() => navigate({ page: "participants" }), [navigate]);
-  const handleAgentClick = (0, import_react7.useCallback)(
+  const handleBackToParticipants = (0, import_react8.useCallback)(() => navigate({ page: "participants" }), [navigate]);
+  const handleAgentClick = (0, import_react8.useCallback)(
     (id) => navigate({ page: "agent-detail", resourceId: id }),
     [navigate]
   );
-  const handleBackToAgents = (0, import_react7.useCallback)(() => navigate({ page: "agents" }), [navigate]);
-  const handleCollectionItemClick = (0, import_react7.useCallback)(
+  const handleBackToAgents = (0, import_react8.useCallback)(() => navigate({ page: "agents" }), [navigate]);
+  const handleCollectionItemClick = (0, import_react8.useCallback)(
     (itemId) => navigate({ page: "collection-item-detail", resourceId: itemId, collection: route.collection }),
     [navigate, route.collection]
   );
-  const handleCollectionCreateNew = (0, import_react7.useCallback)(
+  const handleCollectionCreateNew = (0, import_react8.useCallback)(
     () => navigate({ page: "collection-item-detail", resourceId: void 0, collection: route.collection }),
     [navigate, route.collection]
   );
-  const handleBackToCollectionItems = (0, import_react7.useCallback)(
+  const handleBackToCollectionItems = (0, import_react8.useCallback)(
     () => navigate({ page: "collection-items", collection: route.collection }),
     [navigate, route.collection]
   );