@copilotz/admin 0.3.7 → 0.3.9

package/dist/index.cjs

@@ -31,19 +31,28 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CopilotzAdmin: () => CopilotzAdmin,
+  createCollectionItem: () => createCollectionItem,
   defaultAdminConfig: () => defaultAdminConfig,
+  deleteCollectionItem: () => deleteCollectionItem,
   fetchAdminActivity: () => fetchAdminActivity,
   fetchAdminAgents: () => fetchAdminAgents,
   fetchAdminOverview: () => fetchAdminOverview,
   fetchAdminParticipants: () => fetchAdminParticipants,
   fetchAdminThreads: () => fetchAdminThreads,
+  fetchCollectionItem: () => fetchCollectionItem,
+  fetchCollectionItems: () => fetchCollectionItems,
+  fetchCollectionNames: () => fetchCollectionNames,
+  fetchParticipantDetail: () => fetchParticipantDetail,
+  fetchThreadEvents: () => fetchThreadEvents,
   mergeAdminConfig: () => mergeAdminConfig,
+  updateCollectionItem: () => updateCollectionItem,
+  updateParticipant: () => updateParticipant,
   useCopilotzAdmin: () => useCopilotzAdmin
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/CopilotzAdmin.tsx
-var import_react3 = require("react");
+var import_react8 = require("react");
 
 // src/config.ts
 var defaultAdminConfig = {
@@ -76,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",
@@ -85,7 +108,9 @@ var defaultAdminConfig = {
     unconfigured: "Observed only",
     noResults: "No results",
     eventsTitle: "Events",
-    dashboardTitle: "Dashboard"
+    dashboardTitle: "Dashboard",
+    collectionsTitle: "Collections",
+    collectionsEndpoint: "/v1/collections"
   },
   features: {
     showOverview: true,
@@ -93,7 +118,8 @@ var defaultAdminConfig = {
     showThreads: true,
     showParticipants: true,
     showAgents: true,
-    showEvents: false
+    showEvents: true,
+    showCollections: true
   },
   ui: {
     compact: false,
@@ -280,6 +306,122 @@ async function fetchThreadMessages(threadId, messageOptions, options) {
     options
   );
 }
+async function fetchParticipantDetail(participantId, options) {
+  return await fetchAdminJson(
+    `/v1/participants/${encodeURIComponent(participantId)}`,
+    {},
+    options
+  );
+}
+async function updateParticipant(participantId, data, options) {
+  const url = new URL(
+    `${resolveBaseUrl(options?.baseUrl)}/v1/participants/${encodeURIComponent(participantId)}`,
+    window.location.origin
+  );
+  const response = await fetch(url.toString(), {
+    method: "PUT",
+    headers: await withAuthHeaders(
+      { "Content-Type": "application/json" },
+      options?.getRequestHeaders
+    ),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    throw new Error(`Update participant failed (${response.status})`);
+  }
+  const payload = await response.json();
+  return payload.data;
+}
+async function fetchCollectionNames(options) {
+  return await fetchAdminJson("/v1/collections", {}, options);
+}
+async function fetchCollectionItems(collection, queryOptions, options) {
+  const params = {
+    namespace: queryOptions?.namespace,
+    limit: queryOptions?.limit?.toString()
+  };
+  if (queryOptions?.search) {
+    params.q = queryOptions.search;
+  } else {
+    params.offset = queryOptions?.offset?.toString();
+  }
+  return await fetchAdminJson(
+    `/v1/collections/${encodeURIComponent(collection)}`,
+    params,
+    options
+  );
+}
+async function fetchCollectionItem(collection, itemId, namespace, options) {
+  return await fetchAdminJson(
+    `/v1/collections/${encodeURIComponent(collection)}/${encodeURIComponent(itemId)}`,
+    { namespace },
+    options
+  );
+}
+async function createCollectionItem(collection, data, namespace, options) {
+  const url = new URL(
+    `${resolveBaseUrl(options?.baseUrl)}/v1/collections/${encodeURIComponent(collection)}`,
+    window.location.origin
+  );
+  if (namespace) url.searchParams.set("namespace", namespace);
+  const response = await fetch(url.toString(), {
+    method: "POST",
+    headers: await withAuthHeaders(
+      { "Content-Type": "application/json" },
+      options?.getRequestHeaders
+    ),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    throw new Error(`Create collection item failed (${response.status})`);
+  }
+  const payload = await response.json();
+  if ("body" in payload && payload.body && typeof payload.body === "object") {
+    return payload.body;
+  }
+  return payload;
+}
+async function updateCollectionItem(collection, itemId, data, namespace, options) {
+  const url = new URL(
+    `${resolveBaseUrl(options?.baseUrl)}/v1/collections/${encodeURIComponent(collection)}/${encodeURIComponent(itemId)}`,
+    window.location.origin
+  );
+  if (namespace) url.searchParams.set("namespace", namespace);
+  const response = await fetch(url.toString(), {
+    method: "PUT",
+    headers: await withAuthHeaders(
+      { "Content-Type": "application/json" },
+      options?.getRequestHeaders
+    ),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    throw new Error(`Update collection item failed (${response.status})`);
+  }
+  const payload = await response.json();
+  return payload.data;
+}
+async function deleteCollectionItem(collection, itemId, namespace, options) {
+  const url = new URL(
+    `${resolveBaseUrl(options?.baseUrl)}/v1/collections/${encodeURIComponent(collection)}/${encodeURIComponent(itemId)}`,
+    window.location.origin
+  );
+  if (namespace) url.searchParams.set("namespace", namespace);
+  const response = await fetch(url.toString(), {
+    method: "DELETE",
+    headers: await withAuthHeaders({}, options?.getRequestHeaders)
+  });
+  if (!response.ok) {
+    throw new Error(`Delete collection item failed (${response.status})`);
+  }
+}
+async function fetchThreadEvents(threadId, options) {
+  return await fetchAdminJson(
+    `/v1/threads/${encodeURIComponent(threadId)}/events`,
+    {},
+    options
+  );
+}
 
 // src/useCopilotzAdmin.ts
 function useCopilotzAdmin(options = {}) {
@@ -568,11 +710,35 @@ function Input({ className, type, ...props }) {
   );
 }
 
+// src/components/ui/separator.tsx
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
 // src/components/ui/sheet.tsx
 var React2 = __toESM(require("react"), 1);
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function cleanupBodyStyles() {
   if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
     document.body.style.pointerEvents = "";
@@ -592,18 +758,18 @@ function Sheet({ open, onOpenChange, ...props }) {
       cleanupBodyStyles();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -624,9 +790,9 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SheetPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SheetOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
@@ -642,9 +808,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, { className: "size-4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -652,7 +818,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       "data-slot": "sheet-header",
@@ -665,7 +831,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -678,7 +844,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -689,7 +855,7 @@ function SheetDescription({
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -755,7 +921,7 @@ function SidebarProvider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -783,7 +949,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         "data-slot": "sidebar",
@@ -797,7 +963,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       SheetContent,
       {
         "data-sidebar": "sidebar",
@@ -809,16 +975,16 @@ function Sidebar({
         },
         side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "group peer text-sidebar-foreground hidden md:block",
@@ -828,7 +994,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -840,7 +1006,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -851,7 +1017,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -872,7 +1038,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Button,
     {
       "data-sidebar": "trigger",
@@ -886,15 +1052,15 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.PanelLeftIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.PanelLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       "data-sidebar": "rail",
@@ -917,7 +1083,7 @@ function SidebarRail({ className, ...props }) {
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -931,7 +1097,7 @@ function SidebarInset({ className, ...props }) {
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -942,7 +1108,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -952,8 +1118,22 @@ function SidebarFooter({ className, ...props }) {
     }
   );
 }
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Separator,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-sidebar-border mx-2 w-auto", className),
+      ...props
+    }
+  );
+}
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -967,7 +1147,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -983,7 +1163,7 @@ function SidebarGroupLabel({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Comp,
     {
       "data-slot": "sidebar-group-label",
@@ -1001,7 +1181,7 @@ function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -1012,7 +1192,7 @@ function SidebarGroupContent({
   );
 }
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "ul",
     {
       "data-slot": "sidebar-menu",
@@ -1023,7 +1203,7 @@ function SidebarMenu({ className, ...props }) {
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -1064,7 +1244,7 @@ function SidebarMenuButton({
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Comp,
     {
       "data-slot": "sidebar-menu-button",
@@ -1083,9 +1263,9 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       TooltipContent,
       {
         side: "right",
@@ -1098,86 +1278,12 @@ function SidebarMenuButton({
 }
 
 // src/components/layout/AdminSidebar.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var NAV_ITEMS = [
-  {
-    page: "dashboard",
-    label: "Dashboard",
-    icon: import_lucide_react3.LayoutDashboard
-  },
-  {
-    page: "threads",
-    label: "Threads",
-    icon: import_lucide_react3.MessageSquare,
-    featureKey: "showThreads"
-  },
-  {
-    page: "participants",
-    label: "Participants",
-    icon: import_lucide_react3.Users,
-    featureKey: "showParticipants"
-  },
-  {
-    page: "agents",
-    label: "Agents",
-    icon: import_lucide_react3.Bot,
-    featureKey: "showAgents"
-  },
-  {
-    page: "events",
-    label: "Events",
-    icon: import_lucide_react3.Activity,
-    featureKey: "showEvents"
-  }
-];
-var AdminSidebar = ({
-  config,
-  currentPage,
-  onNavigate
-}) => {
-  const visibleItems = NAV_ITEMS.filter(
-    (item) => !item.featureKey || config.features[item.featureKey]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Sidebar, { collapsible: config.sidebar.collapsible, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3 px-2 py-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center shrink-0", children: config.branding.logo || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.LayoutDashboard, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-semibold truncate", children: config.branding.title }),
-        config.branding.subtitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SidebarGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: "Navigation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarMenu, { children: visibleItems.map((item) => {
-        const Icon2 = item.icon;
-        const label = config.labels[`${item.page}Title`] || item.label;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          SidebarMenuButton,
-          {
-            isActive: currentPage === item.page,
-            onClick: () => onNavigate(item.page),
-            tooltip: label,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon2, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
-            ]
-          }
-        ) }, item.page);
-      }) }) })
-    ] }) }),
-    config.namespace && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-2 py-2 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium uppercase tracking-[0.18em]", children: config.namespace }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarRail, {})
-  ] });
-};
-
-// src/components/layout/AdminHeader.tsx
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/components/ui/select.tsx
 var React4 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
@@ -1192,7 +1298,7 @@ var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) =
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
@@ -1209,7 +1315,7 @@ var SelectContent = React4.forwardRef(({ className, children, position = "popper
     position,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronUp, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronUp, { className: "h-4 w-4" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SelectPrimitive.Viewport,
         {
@@ -1220,7 +1326,7 @@ var SelectContent = React4.forwardRef(({ className, children, position = "popper
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4" }) })
     ]
   }
 ) }));
@@ -1236,25 +1342,117 @@ var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Check, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Check, { className: "h-4 w-4" }) })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-// src/components/layout/AdminHeader.tsx
+// src/components/layout/AdminSidebar.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var NAV_ITEMS = [
+  { page: "dashboard", label: "Dashboard", icon: import_lucide_react4.LayoutDashboard },
+  { page: "threads", label: "Threads", icon: import_lucide_react4.MessageSquare, featureKey: "showThreads" },
+  { page: "participants", label: "Participants", icon: import_lucide_react4.Users, featureKey: "showParticipants" },
+  { page: "agents", label: "Agents", icon: import_lucide_react4.Bot, featureKey: "showAgents" },
+  { page: "events", label: "Events", icon: import_lucide_react4.Activity, featureKey: "showEvents" }
+];
+var AdminSidebar = ({
+  config,
+  currentPage,
+  currentRoute,
+  onNavigate,
+  onNavigateRoute,
+  collections,
+  namespace,
+  onNamespaceChange
+}) => {
+  const visibleItems = NAV_ITEMS.filter(
+    (item) => !item.featureKey || config.features[item.featureKey]
+  );
+  const showCollections = config.features.showCollections && collections.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Sidebar, { collapsible: config.sidebar.collapsible, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 px-2 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center shrink-0", children: config.branding.logo || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.LayoutDashboard, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-semibold truncate", children: config.branding.title }),
+        config.branding.subtitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SidebarContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SidebarGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: "Navigation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarMenu, { children: visibleItems.map((item) => {
+          const Icon2 = item.icon;
+          const label = config.labels[`${item.page}Title`] || item.label;
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            SidebarMenuButton,
+            {
+              isActive: currentPage === item.page,
+              onClick: () => onNavigate(item.page),
+              tooltip: label,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: label })
+              ]
+            }
+          ) }, item.page);
+        }) }) })
+      ] }),
+      showCollections && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SidebarGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: config.labels.collectionsTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarMenu, { children: collections.map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            SidebarMenuButton,
+            {
+              isActive: currentRoute.page === "collection-items" && currentRoute.collection === col,
+              onClick: () => onNavigateRoute({ page: "collection-items", collection: col }),
+              tooltip: col,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Database, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "capitalize", children: col })
+              ]
+            }
+          ) }, col)) }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SidebarFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-muted-foreground mb-1 block px-2", children: "Namespace" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Select, { value: namespace || "__all__", onValueChange: (v) => onNamespaceChange(v === "__all__" ? "" : v), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder: "All namespaces" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SelectContent, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: "__all__", children: "All namespaces" }),
+            config.namespace && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: config.namespace, children: config.namespace })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hidden group-data-[collapsible=icon]:flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronsUpDown, { className: "h-4 w-4 text-muted-foreground" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarRail, {})
+  ] });
+};
+
+// src/components/layout/AdminHeader.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var PAGE_TITLES = {
   dashboard: "Dashboard",
   threads: "Threads",
   "thread-detail": "Thread Detail",
   participants: "Participants",
+  "participant-detail": "Participant Detail",
   agents: "Agents",
+  "agent-detail": "Agent Detail",
+  "collection-items": "Collection",
+  "collection-item-detail": "Item Detail",
   events: "Events"
 };
 var AdminHeader = ({
   config,
-  currentPage,
+  currentRoute,
   range,
   interval,
   onRangeChange,
@@ -1262,19 +1460,22 @@ var AdminHeader = ({
   onRefresh,
   isLoading
 }) => {
-  const pageTitle = config.labels[`${currentPage}Title`] || PAGE_TITLES[currentPage];
-  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(CardHeader, { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarTrigger, { className: "-ml-1" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: "Toggle Sidebar" })
+  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: [
+      /* @__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_runtime9.jsx)("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
-      currentPage === "dashboard" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__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",
@@ -1284,7 +1485,7 @@ var AdminHeader = ({
             children: config.labels.range24h
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Button,
           {
             variant: range === "7d" ? "default" : "ghost",
@@ -1294,7 +1495,7 @@ var AdminHeader = ({
             children: config.labels.range7d
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Button,
           {
             variant: range === "30d" ? "default" : "ghost",
@@ -1304,23 +1505,23 @@ var AdminHeader = ({
             children: config.labels.range30d
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           Select,
           {
             value: interval,
             onValueChange: (v) => onIntervalChange(v),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SelectContent, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: "hour", children: config.labels.intervalHour }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: "day", children: config.labels.intervalDay })
+              /* @__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 })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__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,
           {
             variant: "ghost",
@@ -1328,7 +1529,7 @@ var AdminHeader = ({
             className: "h-7 w-7",
             onClick: onRefresh,
             disabled: isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               import_lucide_react5.RefreshCw,
               {
                 className: `h-4 w-4 ${isLoading ? "animate-spin" : ""}`
@@ -1336,17 +1537,20 @@ var AdminHeader = ({
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: config.labels.refresh })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipContent, { children: config.labels.refresh })
       ] }),
       config.branding.actions
     ] })
   ] }) }) });
 };
 
+// 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");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1370,7 +1574,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? import_react_slot3.Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Comp,
     {
       "data-slot": "badge",
@@ -1381,7 +1585,7 @@ function Badge({
 }
 
 // src/components/views/DashboardView.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DashboardView = ({
   config,
   overview,
@@ -1398,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,
@@ -1415,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,
@@ -1426,40 +1648,110 @@ var DashboardView = ({
     }
   ];
   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_runtime11.jsxs)("div", { className: "space-y-6", children: [
-    isEmpty && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
+  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_runtime11.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)(
+    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_runtime11.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
+            /* @__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.showActivity && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    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)(
         ActivityChart,
         {
           interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
-          points: activity
+          points: activity,
+          usageDimension,
+          usageMetricKind
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid gap-6 lg:grid-cols-3", children: [
-      config.features.showThreads && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__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,
@@ -1467,7 +1759,7 @@ var DashboardView = ({
           searchValue: threadSearch,
           setSearchValue: onThreadSearchChange,
           title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             ThreadsTable,
             {
               rows: threads,
@@ -1477,7 +1769,7 @@ var DashboardView = ({
           )
         }
       ),
-      config.features.showParticipants && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      config.features.showParticipants && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         DataTable,
         {
           rows: participants,
@@ -1485,10 +1777,10 @@ var DashboardView = ({
           searchValue: participantSearch,
           setSearchValue: onParticipantSearchChange,
           title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ParticipantsTable, { rows: participants, labels: config.labels })
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ParticipantsTable, { rows: participants, labels: config.labels })
         }
       ),
-      config.features.showAgents && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      config.features.showAgents && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         DataTable,
         {
           rows: agents,
@@ -1496,52 +1788,75 @@ var DashboardView = ({
           searchValue: agentSearch,
           setSearchValue: onAgentSearchChange,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentsTable, { rows: agents, labels: config.labels })
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            AgentsTable,
+            {
+              rows: agents,
+              labels: config.labels,
+              usageMetricKind,
+              usageDimension
+            }
+          )
         }
       )
     ] })
   ] });
 };
 function SectionHeading({ title }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: 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_runtime11.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    "div",
-    {
-      className: "flex min-w-0 flex-1 flex-col items-center gap-2",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionHeading, { title: props.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  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,
         {
           className: "h-8 w-full max-w-44",
@@ -1551,7 +1866,7 @@ function DataTable(props) {
         }
       )
     ] }),
-    props.rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
+    props.rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
   ] });
 }
 function ThreadsTable({
@@ -1559,7 +1874,7 @@ function ThreadsTable({
   labels,
   onThreadClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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(
@@ -1568,12 +1883,12 @@ function ThreadsTable({
       ),
       onClick: () => onThreadClick?.(thread.threadId),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: thread.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+        /* @__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_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Badge,
             {
               variant: thread.status === "archived" ? "secondary" : "default",
@@ -1581,16 +1896,16 @@ function ThreadsTable({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+        /* @__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_runtime11.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
             thread.participantIds.length,
             " participants"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: formatDate(thread.lastActivityAt) })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: formatDate(thread.lastActivityAt) })
         ] })
       ]
     },
@@ -1601,28 +1916,28 @@ function ParticipantsTable({
   rows,
   labels
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: participant.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
+        /* @__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_runtime11.jsx)(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+        /* @__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_runtime11.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
             formatNumber(participant.threadCount),
             " threads"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: formatDate(participant.lastActivityAt) })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: formatDate(participant.lastActivityAt) })
         ] })
       ]
     },
@@ -1631,38 +1946,46 @@ function ParticipantsTable({
 }
 function AgentsTable({
   rows,
-  labels
+  labels,
+  usageMetricKind,
+  usageDimension
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  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_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: agent.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+        /* @__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_runtime11.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
-            formatNumber(agent.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
-            formatNumber(agent.llmCallCount),
-            " LLM calls"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
-            formatNumber(agent.toolCallMessageCount),
-            " tool calls"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.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}`
@@ -1694,22 +2017,167 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
-
-// src/components/views/ThreadsView.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ThreadsView = ({
-  config,
-  threads,
-  searchValue,
-  onSearchChange,
-  onThreadClick
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(
-        Input,
+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");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ThreadsView = ({
+  config,
+  threads,
+  searchValue,
+  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)(
+        Input,
         {
           className: "pl-9",
           placeholder: config.labels.threadSearchPlaceholder,
@@ -1718,19 +2186,19 @@ var ThreadsView = ({
         }
       )
     ] }),
-    threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.MessageSquare, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    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)(
       "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_runtime12.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium truncate", children: thread.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__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)(
                 Badge,
                 {
                   variant: thread.status === "archived" ? "secondary" : "default",
@@ -1739,18 +2207,18 @@ var ThreadsView = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+            /* @__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_runtime12.jsxs)("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+          /* @__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: [
               formatNumber2(thread.messageCount),
               " messages"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { children: [
               thread.participantIds.length,
               " participants"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: formatDate2(thread.lastActivityAt) })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: formatDate2(thread.lastActivityAt) })
           ] })
         ]
       },
@@ -1774,26 +2242,26 @@ 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_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MESSAGES_PAGE_SIZE = 50;
 var ThreadDetailView = ({
   threadId,
   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 {
@@ -1812,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;
     }
@@ -1834,36 +2302,36 @@ var ThreadDetailView = ({
     }
   }, [threadId, pageInfo, isLoadingMore, config.baseUrl, config.getRequestHeaders]);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    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" }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4 py-10 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-destructive font-medium", children: error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button, { variant: "outline", onClick: onBack, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+    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" }),
           "Back"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  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)(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: "mt-1 shrink-0",
           onClick: onBack,
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ArrowLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ArrowLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__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)("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
-          /* @__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)("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Badge,
             {
               variant: thread?.status === "archived" ? "secondary" : "default",
@@ -1871,31 +2339,31 @@ var ThreadDetailView = ({
             }
           )
         ] }),
-        thread?.summary && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
-          thread?.createdAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        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: [
             "Created ",
             formatDate3(thread.createdAt)
           ] }),
-          thread?.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+          thread?.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
             "Updated ",
             formatDate3(thread.updatedAt)
           ] }),
-          thread?.participants && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+          thread?.participants && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
             thread.participants.length,
             " participants"
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h3", { className: "text-sm font-medium text-muted-foreground", children: [
+    /* @__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: [
         "Messages (",
         messages.length,
         pageInfo?.hasMoreBefore ? "+" : "",
         ")"
       ] }) }),
-      pageInfo?.hasMoreBefore && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      pageInfo?.hasMoreBefore && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         Button,
         {
           variant: "ghost",
@@ -1903,56 +2371,56 @@ var ThreadDetailView = ({
           onClick: () => void loadMore(),
           disabled: isLoadingMore,
           children: [
-            isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronUp, { className: "mr-2 h-3 w-3" }),
+            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" }),
             "Load older messages"
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageRow, { message }, message.id)) }) })
+      /* @__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)) }) })
     ] })
   ] });
 };
 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_runtime13.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SenderIcon, { senderType: message.senderType }),
-    /* @__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 text-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
-        message.createdAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
+  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) })
       ] }),
-      message.content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
-      (hasToolCalls || hasReasoning) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-2 space-y-2", children: [
-        hasToolCalls && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      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)(
           "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_runtime13.jsx)(import_lucide_react7.Wrench, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Wrench, { className: "h-3 w-3" }),
               message.toolCalls.length,
               " tool call",
               message.toolCalls.length > 1 ? "s" : ""
             ]
           }
         ),
-        hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime13.jsx)(import_lucide_react7.Cpu, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Cpu, { className: "h-3 w-3" }),
               "Reasoning"
             ]
           }
         ),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime14.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 } : {}
@@ -1968,13 +2436,13 @@ 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_runtime13.jsx)("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Bot, { className: "h-3.5 w-3.5" }) });
+      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" }) });
     case "user":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.User, { className: "h-3.5 w-3.5" }) });
+      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" }) });
     case "tool":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Wrench, { className: "h-3.5 w-3.5" }) });
+      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" }) });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Cpu, { className: "h-3.5 w-3.5" }) });
+      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" }) });
   }
 }
 function formatDate3(value) {
@@ -1998,79 +2466,737 @@ function formatTimestamp(value) {
   });
 }
 
+// src/components/views/ParticipantsView.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ParticipantsView = ({
+  config,
+  participants,
+  searchValue,
+  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)(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: config.labels.participantSearchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] }),
+    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)(
+      "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_runtime15.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: [
+              formatNumber3(p.messageCount),
+              " messages"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { children: [
+              formatNumber3(p.threadCount),
+              " threads"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: formatDate4(p.lastActivityAt) })
+          ] })
+        ]
+      },
+      `${p.namespace}:${p.externalId}`
+    )) })
+  ] });
+};
+function formatDate4(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 formatNumber3(value) {
+  return new Intl.NumberFormat().format(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 ParticipantDetailView = ({
+  participantId,
+  config,
+  onBack
+}) => {
+  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_react4.useCallback)(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await fetchParticipantDetail(participantId, fetchOptions);
+      setData(result);
+      setEditJson(JSON.stringify(result, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load participant");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [participantId, config.baseUrl, config.getRequestHeaders]);
+  (0, import_react4.useEffect)(() => {
+    void load();
+  }, [load]);
+  const handleSave = async () => {
+    setIsSaving(true);
+    setError(null);
+    setSaveMessage(null);
+    try {
+      const parsed = JSON.parse(editJson);
+      const updated = await updateParticipant(participantId, parsed, fetchOptions);
+      setData(updated);
+      setEditJson(JSON.stringify(updated, null, 2));
+      setSaveMessage("Saved successfully");
+      setTimeout(() => setSaveMessage(null), 3e3);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  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_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" })
+      ] }),
+      /* @__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" }),
+          "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)(
+      "textarea",
+      {
+        className: "w-full min-h-[400px] p-4 font-mono text-sm bg-transparent resize-y focus:outline-none",
+        value: editJson,
+        onChange: (e) => setEditJson(e.target.value),
+        spellCheck: false
+      }
+    ) })
+  ] });
+};
+
+// src/components/views/AgentsView.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var AgentsView = ({
+  config,
+  agents,
+  searchValue,
+  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)(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: config.labels.agentSearchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] }),
+    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)(
+      "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_runtime17.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: [
+              formatNumber4(agent.messageCount),
+              " messages"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+              formatNumber4(agent.llmCallCount),
+              " LLM calls"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
+              formatNumber4(agent.toolCallMessageCount),
+              " tool calls"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.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) })
+        ]
+      },
+      `${agent.namespace}:${agent.agentId}`
+    )) })
+  ] });
+};
+function formatDate5(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 formatNumber4(value) {
+  return new Intl.NumberFormat().format(value);
+}
+
+// src/components/views/AgentDetailView.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var AgentDetailView = ({
+  agentId,
+  config,
+  agents,
+  onBack
+}) => {
+  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: [
+        "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" }),
+        " Back"
+      ] })
+    ] });
+  }
+  const stats = [
+    { label: "Messages", value: agent.messageCount },
+    { label: "LLM Calls", value: agent.llmCallCount },
+    { label: "Tool Calls", value: agent.toolCallMessageCount },
+    { label: "Input Tokens", value: agent.inputTokens },
+    { label: "Output Tokens", value: agent.outputTokens },
+    { label: "Reasoning Tokens", value: agent.reasoningTokens },
+    { label: "Cache Read", value: agent.cacheReadInputTokens },
+    { 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 })
+            ] }),
+            agent.description && /* @__PURE__ */ (0, import_jsx_runtime18.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: [
+            "ID: ",
+            agent.agentId
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+            "Namespace: ",
+            agent.namespace
+          ] }),
+          agent.lastActivityAt && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
+            "Last active: ",
+            formatDate6(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) })
+    ] }, stat.label)) })
+  ] });
+};
+function formatDate6(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" });
+}
+
+// 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 CollectionItemsView = ({
+  collection,
+  config,
+  namespace,
+  onItemClick,
+  onCreateNew
+}) => {
+  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_react5.useCallback)(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await fetchCollectionItems(
+        collection,
+        { search: search || void 0, namespace, limit: 50 },
+        fetchOptions
+      );
+      setItems(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load items");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [collection, search, namespace, config.baseUrl, config.getRequestHeaders]);
+  (0, import_react5.useEffect)(() => {
+    void load();
+  }, [load]);
+  const getItemId = (item) => {
+    return String(item.id ?? item._id ?? JSON.stringify(item).slice(0, 40));
+  };
+  const getItemPreview = (item) => {
+    const { id, _id, ...rest } = item;
+    const name = item.name ?? item.title ?? item.displayName ?? item.label;
+    if (typeof name === "string") return name;
+    const keys = Object.keys(rest);
+    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" }),
+        " 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)(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: `Search ${collection}...`,
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      )
+    ] }),
+    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) => {
+      const itemId = getItemId(item);
+      return /* @__PURE__ */ (0, import_jsx_runtime19.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) })
+          ] })
+        },
+        itemId + idx
+      );
+    }) })
+  ] });
+};
+
+// 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 CollectionItemDetailView = ({
+  collection,
+  itemId,
+  config,
+  namespace,
+  onBack,
+  onDeleted
+}) => {
+  const isNew = !itemId;
+  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_react6.useCallback)(async () => {
+    if (!itemId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await fetchCollectionItem(collection, itemId, namespace, fetchOptions);
+      setEditJson(JSON.stringify(result, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load item");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [collection, itemId, namespace, config.baseUrl, config.getRequestHeaders]);
+  (0, import_react6.useEffect)(() => {
+    void load();
+  }, [load]);
+  const handleSave = async () => {
+    setIsSaving(true);
+    setError(null);
+    setSaveMessage(null);
+    try {
+      const parsed = JSON.parse(editJson);
+      if (isNew) {
+        const created = await createCollectionItem(collection, parsed, namespace, fetchOptions);
+        setEditJson(JSON.stringify(created, null, 2));
+        setSaveMessage("Created successfully");
+      } else {
+        const updated = await updateCollectionItem(collection, itemId, parsed, namespace, fetchOptions);
+        setEditJson(JSON.stringify(updated, null, 2));
+        setSaveMessage("Saved successfully");
+      }
+      setTimeout(() => setSaveMessage(null), 3e3);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!itemId) return;
+    if (!window.confirm(`Delete this item from ${collection}?`)) return;
+    setIsDeleting(true);
+    setError(null);
+    try {
+      await deleteCollectionItem(collection, itemId, namespace, fetchOptions);
+      onDeleted?.();
+      onBack();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  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_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)(
+          Button,
+          {
+            variant: "destructive",
+            size: "sm",
+            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" }),
+              "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" }),
+          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)(
+      "textarea",
+      {
+        className: "w-full min-h-[400px] p-4 font-mono text-sm bg-transparent resize-y focus:outline-none",
+        value: editJson,
+        onChange: (e) => setEditJson(e.target.value),
+        spellCheck: false
+      }
+    ) })
+  ] });
+};
+
+// 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 STATUS_VARIANTS = {
+  pending: "outline",
+  processing: "default",
+  completed: "secondary",
+  failed: "destructive",
+  expired: "secondary",
+  overwritten: "secondary"
+};
+var EventsView = ({ config }) => {
+  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_react7.useCallback)(async () => {
+    if (!threadId.trim()) return;
+    setIsLoading(true);
+    setError(null);
+    setHasSearched(true);
+    try {
+      const result = await fetchThreadEvents(threadId.trim(), fetchOptions);
+      setEvent(result ?? null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load events");
+    } finally {
+      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)(
+            Input,
+            {
+              className: "pl-9",
+              placeholder: "Enter thread ID to inspect events...",
+              value: threadId,
+              onChange: (e) => setThreadId(e.target.value),
+              onKeyDown: (e) => e.key === "Enter" && void handleSearch()
+            }
+          )
+        ] })
+      ] }),
+      /* @__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,
+        "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 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.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:" }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime21.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
+        ] }),
+        event.createdAt && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.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.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) })
+      ] })
+    ] })
+  ] });
+};
+function formatTimestamp2(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",
+    second: "2-digit"
+  });
+}
+
 // src/CopilotzAdmin.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var CopilotzAdmin = ({
   config: userConfig,
   className
 }) => {
-  const config = (0, import_react3.useMemo)(
+  const config = (0, import_react8.useMemo)(
     () => mergeAdminConfig(defaultAdminConfig, userConfig),
     [userConfig]
   );
-  const [route, setRoute] = (0, import_react3.useState)({ page: config.defaultPage });
-  const [threadSearch, setThreadSearch] = (0, import_react3.useState)("");
-  const [participantSearch, setParticipantSearch] = (0, import_react3.useState)("");
-  const [agentSearch, setAgentSearch] = (0, import_react3.useState)("");
-  const deferredThreadSearch = (0, import_react3.useDeferredValue)(threadSearch);
-  const deferredParticipantSearch = (0, import_react3.useDeferredValue)(participantSearch);
-  const deferredAgentSearch = (0, import_react3.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,
-    namespace: config.namespace,
+    namespace,
     range: config.initialRange,
     interval: config.initialInterval,
     threadSearch: deferredThreadSearch,
     participantSearch: deferredParticipantSearch,
     agentSearch: deferredAgentSearch
   });
-  const navigate = (0, import_react3.useCallback)(
+  (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_react8.useCallback)(
     (next) => {
       setRoute(next);
       config.onNavigate?.(next);
     },
     [config]
   );
-  const handleSidebarNavigate = (0, import_react3.useCallback)(
+  const handleSidebarNavigate = (0, import_react8.useCallback)(
     (page) => navigate({ page }),
     [navigate]
   );
-  const handleThreadClick = (0, import_react3.useCallback)(
+  const handleSidebarRouteNavigate = (0, import_react8.useCallback)(
+    (r) => navigate(r),
+    [navigate]
+  );
+  const handleThreadClick = (0, import_react8.useCallback)(
     (threadId) => navigate({ page: "thread-detail", resourceId: threadId }),
     [navigate]
   );
-  const handleBackToThreads = (0, import_react3.useCallback)(
-    () => navigate({ page: "threads" }),
+  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 sidebarPage = route.page === "thread-detail" ? "threads" : route.page;
+  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_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_react8.useCallback)(
+    () => navigate({ page: "collection-item-detail", resourceId: void 0, collection: route.collection }),
+    [navigate, route.collection]
+  );
+  const handleBackToCollectionItems = (0, import_react8.useCallback)(
+    () => navigate({ page: "collection-items", collection: route.collection }),
+    [navigate, route.collection]
+  );
+  const sidebarPage = (() => {
+    switch (route.page) {
+      case "thread-detail":
+        return "threads";
+      case "participant-detail":
+        return "participants";
+      case "agent-detail":
+        return "agents";
+      case "collection-item-detail":
+        return "collection-items";
+      default:
+        return route.page;
+    }
+  })();
   if (admin.isLoading && !admin.overview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Card, { className: cn("border-border", className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
+    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 }) });
   }
   if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      Card,
-      {
-        className: cn("border-destructive/50 bg-destructive/10", className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardContent, { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            Button,
-            {
-              variant: "destructive",
-              onClick: () => void admin.refresh(),
-              children: config.labels.retry
-            }
-          )
-        ] })
-      }
-    );
+    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 })
+    ] }) });
   }
   const renderCurrentView = () => {
     switch (route.page) {
       case "dashboard":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           DashboardView,
           {
             config,
@@ -2090,7 +3216,7 @@ var CopilotzAdmin = ({
           }
         );
       case "threads":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           ThreadsView,
           {
             config,
@@ -2101,34 +3227,62 @@ var CopilotzAdmin = ({
           }
         );
       case "thread-detail":
-        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          ThreadDetailView,
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
+      case "participants":
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ParticipantsView,
           {
-            threadId: route.resourceId,
             config,
-            onBack: handleBackToThreads
+            participants: admin.participants,
+            searchValue: participantSearch,
+            onSearchChange: setParticipantSearch,
+            onParticipantClick: handleParticipantClick
           }
-        ) : null;
-      case "participants":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.participantsTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "Detailed participant management coming soon." })
-        ] });
+        );
+      case "participant-detail":
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
       case "agents":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.agentsTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "Agent configuration management coming soon." })
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          AgentsView,
+          {
+            config,
+            agents: admin.agents,
+            searchValue: agentSearch,
+            onSearchChange: setAgentSearch,
+            onAgentClick: handleAgentClick
+          }
+        );
+      case "agent-detail":
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AgentDetailView, { agentId: route.resourceId, config, agents: admin.agents, onBack: handleBackToAgents }) : null;
+      case "collection-items":
+        return route.collection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          CollectionItemsView,
+          {
+            collection: route.collection,
+            config,
+            namespace,
+            onItemClick: handleCollectionItemClick,
+            onCreateNew: handleCollectionCreateNew
+          }
+        ) : null;
+      case "collection-item-detail":
+        return route.collection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          CollectionItemDetailView,
+          {
+            collection: route.collection,
+            itemId: route.resourceId ?? null,
+            config,
+            namespace,
+            onBack: handleBackToCollectionItems
+          }
+        ) : null;
       case "events":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.eventsTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "Event inspector coming soon." })
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EventsView, { config });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  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)(
     "div",
     {
       className: cn(
@@ -2136,20 +3290,25 @@ var CopilotzAdmin = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           AdminSidebar,
           {
             config,
             currentPage: sidebarPage,
-            onNavigate: handleSidebarNavigate
+            currentRoute: route,
+            onNavigate: handleSidebarNavigate,
+            onNavigateRoute: handleSidebarRouteNavigate,
+            collections,
+            namespace,
+            onNamespaceChange: setNamespace
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__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)(
             AdminHeader,
             {
               config,
-              currentPage: route.page,
+              currentRoute: route,
               range: admin.filters.range,
               interval: admin.filters.interval,
               onRangeChange: admin.setRange,
@@ -2158,7 +3317,7 @@ var CopilotzAdmin = ({
               isLoading: admin.isLoading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
         ] }) })
       ]
     }
@@ -2167,13 +3326,22 @@ var CopilotzAdmin = ({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CopilotzAdmin,
+  createCollectionItem,
   defaultAdminConfig,
+  deleteCollectionItem,
   fetchAdminActivity,
   fetchAdminAgents,
   fetchAdminOverview,
   fetchAdminParticipants,
   fetchAdminThreads,
+  fetchCollectionItem,
+  fetchCollectionItems,
+  fetchCollectionNames,
+  fetchParticipantDetail,
+  fetchThreadEvents,
   mergeAdminConfig,
+  updateCollectionItem,
+  updateParticipant,
   useCopilotzAdmin
 });
 //# sourceMappingURL=index.cjs.map