@copilotz/admin 0.3.7 → 0.3.9

package/dist/index.js

@@ -1,9 +1,10 @@
 // src/CopilotzAdmin.tsx
 import {
-  useCallback as useCallback4,
+  useCallback as useCallback8,
   useDeferredValue,
+  useEffect as useEffect9,
   useMemo as useMemo3,
-  useState as useState5
+  useState as useState9
 } from "react";
 
 // src/config.ts
@@ -37,7 +38,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",
@@ -46,7 +61,9 @@ var defaultAdminConfig = {
     unconfigured: "Observed only",
     noResults: "No results",
     eventsTitle: "Events",
-    dashboardTitle: "Dashboard"
+    dashboardTitle: "Dashboard",
+    collectionsTitle: "Collections",
+    collectionsEndpoint: "/v1/collections"
   },
   features: {
     showOverview: true,
@@ -54,7 +71,8 @@ var defaultAdminConfig = {
     showThreads: true,
     showParticipants: true,
     showAgents: true,
-    showEvents: false
+    showEvents: true,
+    showCollections: true
   },
   ui: {
     compact: false,
@@ -245,6 +263,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 = {}) {
@@ -533,11 +667,35 @@ function Input({ className, type, ...props }) {
   );
 }
 
+// src/components/ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    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
 import * as React2 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function cleanupBodyStyles() {
   if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
     document.body.style.pointerEvents = "";
@@ -557,18 +715,18 @@ function Sheet({ open, onOpenChange, ...props }) {
       cleanupBodyStyles();
     };
   }, []);
-  return /* @__PURE__ */ jsx5(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
+  return /* @__PURE__ */ jsx6(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx6(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -590,7 +748,7 @@ function SheetContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
-    /* @__PURE__ */ jsx5(SheetOverlay, {}),
+    /* @__PURE__ */ jsx6(SheetOverlay, {}),
     /* @__PURE__ */ jsxs2(
       SheetPrimitive.Content,
       {
@@ -608,8 +766,8 @@ function SheetContent({
         children: [
           children,
           /* @__PURE__ */ jsxs2(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__ */ jsx5(XIcon, { className: "size-4" }),
-            /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
+            /* @__PURE__ */ jsx6(XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -617,7 +775,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sheet-header",
@@ -630,7 +788,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -643,7 +801,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -654,7 +812,7 @@ function SheetDescription({
 }
 
 // src/components/ui/sidebar.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -720,7 +878,7 @@ function SidebarProvider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ jsx6(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -748,7 +906,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "div",
       {
         "data-slot": "sidebar",
@@ -762,7 +920,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx6(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
       SheetContent,
       {
         "data-sidebar": "sidebar",
@@ -775,10 +933,10 @@ function Sidebar({
         side,
         children: [
           /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx6(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx6(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ jsx7(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx7(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx6("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx7("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
@@ -793,7 +951,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -805,7 +963,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -816,7 +974,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -851,15 +1009,15 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx6(PanelLeftIcon, {}),
-        /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx7(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       "data-sidebar": "rail",
@@ -882,7 +1040,7 @@ function SidebarRail({ className, ...props }) {
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -896,7 +1054,7 @@ function SidebarInset({ className, ...props }) {
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -907,7 +1065,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -917,8 +1075,22 @@ function SidebarFooter({ className, ...props }) {
     }
   );
 }
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    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__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -932,7 +1104,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -948,7 +1120,7 @@ function SidebarGroupLabel({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     Comp,
     {
       "data-slot": "sidebar-group-label",
@@ -966,7 +1138,7 @@ function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -977,7 +1149,7 @@ function SidebarGroupContent({
   );
 }
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "ul",
     {
       "data-slot": "sidebar-menu",
@@ -988,7 +1160,7 @@ function SidebarMenu({ className, ...props }) {
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -1029,7 +1201,7 @@ function SidebarMenuButton({
 }) {
   const Comp = asChild ? Slot2 : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx6(
+  const button = /* @__PURE__ */ jsx7(
     Comp,
     {
       "data-slot": "sidebar-menu-button",
@@ -1049,8 +1221,8 @@ function SidebarMenuButton({
     };
   }
   return /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx7(
       TooltipContent,
       {
         side: "right",
@@ -1068,91 +1240,19 @@ import {
   MessageSquare,
   Users,
   Bot,
-  Activity
+  Activity,
+  Database,
+  ChevronsUpDown
 } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var NAV_ITEMS = [
-  {
-    page: "dashboard",
-    label: "Dashboard",
-    icon: LayoutDashboard
-  },
-  {
-    page: "threads",
-    label: "Threads",
-    icon: MessageSquare,
-    featureKey: "showThreads"
-  },
-  {
-    page: "participants",
-    label: "Participants",
-    icon: Users,
-    featureKey: "showParticipants"
-  },
-  {
-    page: "agents",
-    label: "Agents",
-    icon: Bot,
-    featureKey: "showAgents"
-  },
-  {
-    page: "events",
-    label: "Events",
-    icon: Activity,
-    featureKey: "showEvents"
-  }
-];
-var AdminSidebar = ({
-  config,
-  currentPage,
-  onNavigate
-}) => {
-  const visibleItems = NAV_ITEMS.filter(
-    (item) => !item.featureKey || config.features[item.featureKey]
-  );
-  return /* @__PURE__ */ jsxs4(Sidebar, { collapsible: config.sidebar.collapsible, children: [
-    /* @__PURE__ */ jsx7(SidebarHeader, { children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 px-2 py-3", children: [
-      /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center shrink-0", children: config.branding.logo || /* @__PURE__ */ jsx7("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx7(LayoutDashboard, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
-        /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold truncate", children: config.branding.title }),
-        config.branding.subtitle && /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx7(SidebarContent, { children: /* @__PURE__ */ jsxs4(SidebarGroup, { children: [
-      /* @__PURE__ */ jsx7(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: "Navigation" }),
-      /* @__PURE__ */ jsx7(SidebarGroupContent, { children: /* @__PURE__ */ jsx7(SidebarMenu, { children: visibleItems.map((item) => {
-        const Icon2 = item.icon;
-        const label = config.labels[`${item.page}Title`] || item.label;
-        return /* @__PURE__ */ jsx7(SidebarMenuItem, { children: /* @__PURE__ */ jsxs4(
-          SidebarMenuButton,
-          {
-            isActive: currentPage === item.page,
-            onClick: () => onNavigate(item.page),
-            tooltip: label,
-            children: [
-              /* @__PURE__ */ jsx7(Icon2, {}),
-              /* @__PURE__ */ jsx7("span", { children: label })
-            ]
-          }
-        ) }, item.page);
-      }) }) })
-    ] }) }),
-    config.namespace && /* @__PURE__ */ jsx7(SidebarFooter, { children: /* @__PURE__ */ jsx7("div", { className: "px-2 py-2 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ jsx7("span", { className: "font-medium uppercase tracking-[0.18em]", children: config.namespace }) }) }),
-    /* @__PURE__ */ jsx7(SidebarRail, {})
-  ] });
-};
-
-// src/components/layout/AdminHeader.tsx
-import { RefreshCw } from "lucide-react";
 
 // src/components/ui/select.tsx
 import * as React4 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -1168,7 +1268,7 @@ var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
   SelectPrimitive.Content,
   {
     ref,
@@ -1196,7 +1296,7 @@ var SelectContent = React4.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
   SelectPrimitive.Item,
   {
     ref,
@@ -1213,19 +1313,111 @@ var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
+// src/components/layout/AdminSidebar.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var NAV_ITEMS = [
+  { page: "dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { page: "threads", label: "Threads", icon: MessageSquare, featureKey: "showThreads" },
+  { page: "participants", label: "Participants", icon: Users, featureKey: "showParticipants" },
+  { page: "agents", label: "Agents", icon: Bot, featureKey: "showAgents" },
+  { page: "events", label: "Events", icon: 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__ */ jsxs5(Sidebar, { collapsible: config.sidebar.collapsible, children: [
+    /* @__PURE__ */ jsx9(SidebarHeader, { children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 px-2 py-3", children: [
+      /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center shrink-0", children: config.branding.logo || /* @__PURE__ */ jsx9("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx9(LayoutDashboard, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-sm font-semibold truncate", children: config.branding.title }),
+        config.branding.subtitle && /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs5(SidebarContent, { children: [
+      /* @__PURE__ */ jsxs5(SidebarGroup, { children: [
+        /* @__PURE__ */ jsx9(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: "Navigation" }),
+        /* @__PURE__ */ jsx9(SidebarGroupContent, { children: /* @__PURE__ */ jsx9(SidebarMenu, { children: visibleItems.map((item) => {
+          const Icon2 = item.icon;
+          const label = config.labels[`${item.page}Title`] || item.label;
+          return /* @__PURE__ */ jsx9(SidebarMenuItem, { children: /* @__PURE__ */ jsxs5(
+            SidebarMenuButton,
+            {
+              isActive: currentPage === item.page,
+              onClick: () => onNavigate(item.page),
+              tooltip: label,
+              children: [
+                /* @__PURE__ */ jsx9(Icon2, {}),
+                /* @__PURE__ */ jsx9("span", { children: label })
+              ]
+            }
+          ) }, item.page);
+        }) }) })
+      ] }),
+      showCollections && /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx9(SidebarSeparator, {}),
+        /* @__PURE__ */ jsxs5(SidebarGroup, { children: [
+          /* @__PURE__ */ jsx9(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: config.labels.collectionsTitle }),
+          /* @__PURE__ */ jsx9(SidebarGroupContent, { children: /* @__PURE__ */ jsx9(SidebarMenu, { children: collections.map((col) => /* @__PURE__ */ jsx9(SidebarMenuItem, { children: /* @__PURE__ */ jsxs5(
+            SidebarMenuButton,
+            {
+              isActive: currentRoute.page === "collection-items" && currentRoute.collection === col,
+              onClick: () => onNavigateRoute({ page: "collection-items", collection: col }),
+              tooltip: col,
+              children: [
+                /* @__PURE__ */ jsx9(Database, {}),
+                /* @__PURE__ */ jsx9("span", { className: "capitalize", children: col })
+              ]
+            }
+          ) }, col)) }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(SidebarFooter, { children: [
+      /* @__PURE__ */ jsxs5("div", { className: "group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-muted-foreground mb-1 block px-2", children: "Namespace" }),
+        /* @__PURE__ */ jsxs5(Select, { value: namespace || "__all__", onValueChange: (v) => onNamespaceChange(v === "__all__" ? "" : v), children: [
+          /* @__PURE__ */ jsx9(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: "All namespaces" }) }),
+          /* @__PURE__ */ jsxs5(SelectContent, { children: [
+            /* @__PURE__ */ jsx9(SelectItem, { value: "__all__", children: "All namespaces" }),
+            config.namespace && /* @__PURE__ */ jsx9(SelectItem, { value: config.namespace, children: config.namespace })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "hidden group-data-[collapsible=icon]:flex justify-center", children: /* @__PURE__ */ jsx9(ChevronsUpDown, { className: "h-4 w-4 text-muted-foreground" }) })
+    ] }),
+    /* @__PURE__ */ jsx9(SidebarRail, {})
+  ] });
+};
+
 // src/components/layout/AdminHeader.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "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,
@@ -1233,19 +1425,22 @@ var AdminHeader = ({
   onRefresh,
   isLoading
 }) => {
-  const pageTitle = config.labels[`${currentPage}Title`] || PAGE_TITLES[currentPage];
-  return /* @__PURE__ */ jsx9(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: /* @__PURE__ */ jsx9(CardHeader, { className: "p-2", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
+  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__ */ jsx10(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: /* @__PURE__ */ jsx10(CardHeader, { className: "p-2", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ jsxs6(Tooltip, { children: [
-        /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(SidebarTrigger, { className: "-ml-1" }) }),
-        /* @__PURE__ */ jsx9(TooltipContent, { children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(SidebarTrigger, { className: "-ml-1" }) }),
+        /* @__PURE__ */ jsx10(TooltipContent, { children: "Toggle Sidebar" })
       ] }),
-      /* @__PURE__ */ jsx9("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
+      /* @__PURE__ */ jsx10("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsx10("div", { className: "flex-1" }),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
-      currentPage === "dashboard" && /* @__PURE__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx9(
+      currentRoute.page === "dashboard" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx10(
           Button,
           {
             variant: range === "24h" ? "default" : "ghost",
@@ -1255,7 +1450,7 @@ var AdminHeader = ({
             children: config.labels.range24h
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           Button,
           {
             variant: range === "7d" ? "default" : "ghost",
@@ -1265,7 +1460,7 @@ var AdminHeader = ({
             children: config.labels.range7d
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           Button,
           {
             variant: range === "30d" ? "default" : "ghost",
@@ -1281,17 +1476,17 @@ var AdminHeader = ({
             value: interval,
             onValueChange: (v) => onIntervalChange(v),
             children: [
-              /* @__PURE__ */ jsx9(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ jsx9(SelectValue, {}) }),
+              /* @__PURE__ */ jsx10(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ jsx10(SelectValue, {}) }),
               /* @__PURE__ */ jsxs6(SelectContent, { children: [
-                /* @__PURE__ */ jsx9(SelectItem, { value: "hour", children: config.labels.intervalHour }),
-                /* @__PURE__ */ jsx9(SelectItem, { value: "day", children: config.labels.intervalDay })
+                /* @__PURE__ */ jsx10(SelectItem, { value: "hour", children: config.labels.intervalHour }),
+                /* @__PURE__ */ jsx10(SelectItem, { value: "day", children: config.labels.intervalDay })
               ] })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ jsxs6(Tooltip, { children: [
-        /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
           Button,
           {
             variant: "ghost",
@@ -1299,7 +1494,7 @@ var AdminHeader = ({
             className: "h-7 w-7",
             onClick: onRefresh,
             disabled: isLoading,
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx10(
               RefreshCw,
               {
                 className: `h-4 w-4 ${isLoading ? "animate-spin" : ""}`
@@ -1307,17 +1502,20 @@ var AdminHeader = ({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx9(TooltipContent, { children: config.labels.refresh })
+        /* @__PURE__ */ jsx10(TooltipContent, { children: config.labels.refresh })
       ] }),
       config.branding.actions
     ] })
   ] }) }) });
 };
 
+// src/components/views/DashboardView.tsx
+import React5 from "react";
+
 // src/components/ui/badge.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var badgeVariants = cva3(
   "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",
   {
@@ -1341,7 +1539,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? Slot3 : "span";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Comp,
     {
       "data-slot": "badge",
@@ -1352,7 +1550,7 @@ function Badge({
 }
 
 // src/components/views/DashboardView.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var DashboardView = ({
   config,
   overview,
@@ -1369,6 +1567,23 @@ var DashboardView = ({
   onAgentSearchChange,
   onThreadClick
 }) => {
+  const [usageMetricKind, setUsageMetricKind] = React5.useState(
+    "tokens"
+  );
+  const [usageDimension, setUsageDimension] = React5.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,
@@ -1386,9 +1601,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,
@@ -1399,38 +1615,108 @@ var DashboardView = ({
   const isEmpty = cards.every((card) => card.value === 0) && activity.length === 0 && threads.length === 0 && participants.length === 0 && agents.length === 0;
   return /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
     isEmpty && /* @__PURE__ */ jsxs7("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ jsx11("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
+      /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
+      /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
     ] }),
     config.features.showOverview && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx11(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.overviewTitle }),
+      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs7(
         "div",
         {
           className: "rounded-xl border bg-card p-5 shadow-sm",
           children: [
-            /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-            /* @__PURE__ */ jsx11("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
-            /* @__PURE__ */ jsx11("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
+            /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatMetricValue(
+              card.value,
+              card.metricKind ?? "tokens"
+            ) }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
           ]
         },
         card.label
       )) })
     ] }),
+    config.features.showOverview && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+        /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.llmUsageTitle }),
+        /* @__PURE__ */ jsxs7("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: config.labels.usageMetricLabel }),
+            /* @__PURE__ */ jsxs7(
+              Select,
+              {
+                value: usageMetricKind,
+                onValueChange: (value) => setUsageMetricKind(value),
+                children: [
+                  /* @__PURE__ */ jsx12(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs7(SelectContent, { children: [
+                    /* @__PURE__ */ jsx12(SelectItem, { value: "tokens", children: config.labels.usageMetricTokens }),
+                    /* @__PURE__ */ jsx12(SelectItem, { value: "cost", children: config.labels.usageMetricCost })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: config.labels.usageDimensionLabel }),
+            /* @__PURE__ */ jsxs7(
+              Select,
+              {
+                value: usageDimension,
+                onValueChange: (value) => setUsageDimension(value),
+                children: [
+                  /* @__PURE__ */ jsx12(SelectTrigger, { className: "h-9 w-full min-w-[160px]", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx12(SelectContent, { children: USAGE_DIMENSIONS.map((dimension) => /* @__PURE__ */ jsx12(SelectItem, { value: dimension, children: getUsageDimensionLabel(config.labels, dimension) }, dimension)) })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx12("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: usageBreakdownCards.map((card) => {
+        const isSelected = card.dimension === usageDimension;
+        return /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(
+              "rounded-xl border bg-card p-5 shadow-sm transition-colors",
+              isSelected && "border-primary/60 ring-1 ring-primary/15"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs7("div", { children: [
+                  /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
+                  /* @__PURE__ */ jsx12("p", { className: "mt-3 text-2xl font-semibold tracking-tight", children: formatMetricValue(card.value, usageMetricKind) })
+                ] }),
+                isSelected && /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: config.labels.usageDimensionLabel })
+              ] }),
+              /* @__PURE__ */ jsxs7("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+                overview?.llmTotals.totalCalls ?? 0,
+                " ",
+                config.labels.usageCallsDetail
+              ] })
+            ]
+          },
+          card.dimension
+        );
+      }) })
+    ] }),
     config.features.showActivity && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx11(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.activityTitle }),
+      /* @__PURE__ */ jsx12(
         ActivityChart,
         {
           interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
-          points: activity
+          points: activity,
+          usageDimension,
+          usageMetricKind
         }
       )
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "grid gap-6 lg:grid-cols-3", children: [
-      config.features.showThreads && /* @__PURE__ */ jsx11(
+      config.features.showThreads && /* @__PURE__ */ jsx12(
         DataTable,
         {
           rows: threads,
@@ -1438,7 +1724,7 @@ var DashboardView = ({
           searchValue: threadSearch,
           setSearchValue: onThreadSearchChange,
           title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             ThreadsTable,
             {
               rows: threads,
@@ -1448,7 +1734,7 @@ var DashboardView = ({
           )
         }
       ),
-      config.features.showParticipants && /* @__PURE__ */ jsx11(
+      config.features.showParticipants && /* @__PURE__ */ jsx12(
         DataTable,
         {
           rows: participants,
@@ -1456,10 +1742,10 @@ var DashboardView = ({
           searchValue: participantSearch,
           setSearchValue: onParticipantSearchChange,
           title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ jsx11(ParticipantsTable, { rows: participants, labels: config.labels })
+          children: /* @__PURE__ */ jsx12(ParticipantsTable, { rows: participants, labels: config.labels })
         }
       ),
-      config.features.showAgents && /* @__PURE__ */ jsx11(
+      config.features.showAgents && /* @__PURE__ */ jsx12(
         DataTable,
         {
           rows: agents,
@@ -1467,52 +1753,75 @@ var DashboardView = ({
           searchValue: agentSearch,
           setSearchValue: onAgentSearchChange,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ jsx11(AgentsTable, { rows: agents, labels: config.labels })
+          children: /* @__PURE__ */ jsx12(
+            AgentsTable,
+            {
+              rows: agents,
+              labels: config.labels,
+              usageMetricKind,
+              usageDimension
+            }
+          )
         }
       )
     ] })
   ] });
 };
 function SectionHeading({ title }) {
-  return /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold tracking-tight", children: title });
+  return /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold tracking-tight", children: title });
 }
 function ActivityChart(props) {
   const trimmedPoints = props.points.slice(-props.maxBars);
-  const maxMessages = Math.max(
-    ...trimmedPoints.map((point) => point.messageCount),
+  const maxUsageValue = Math.max(
+    ...trimmedPoints.map(
+      (point) => getActivityUsageValue(
+        point,
+        props.usageMetricKind,
+        props.usageDimension
+      )
+    ),
     1
   );
-  return /* @__PURE__ */ jsx11("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx11("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className: "flex min-w-0 flex-1 flex-col items-center gap-2",
-      children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx11(
-          "div",
-          {
-            className: "w-full rounded-md bg-primary transition-all",
-            style: {
-              height: `${Math.max(point.messageCount / maxMessages * 100, 8)}%`
+  return /* @__PURE__ */ jsx12("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx12("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => {
+    const usageValue = getActivityUsageValue(
+      point,
+      props.usageMetricKind,
+      props.usageDimension
+    );
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx12("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: "w-full rounded-md bg-primary transition-all",
+              style: {
+                height: `${Math.max(usageValue / maxUsageValue * 100, 8)}%`
+              }
             }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx11("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-          /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
-            formatNumber(point.messageCount),
-            " msg"
+          ) }),
+          /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
+            /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-muted-foreground", children: formatMetricValue(usageValue, props.usageMetricKind) }),
+            /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
+              formatNumber(point.totalCalls),
+              " ",
+              props.labels.usageCallsDetail
+            ] })
           ] })
-        ] })
-      ]
-    },
-    point.bucket
-  )) }) });
+        ]
+      },
+      point.bucket
+    );
+  }) }) });
 }
 function DataTable(props) {
   return /* @__PURE__ */ jsxs7("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
     /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx11(SectionHeading, { title: props.title }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(SectionHeading, { title: props.title }),
+      /* @__PURE__ */ jsx12(
         Input,
         {
           className: "h-8 w-full max-w-44",
@@ -1522,7 +1831,7 @@ function DataTable(props) {
         }
       )
     ] }),
-    props.rows.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
+    props.rows.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
   ] });
 }
 function ThreadsTable({
@@ -1530,7 +1839,7 @@ function ThreadsTable({
   labels,
   onThreadClick
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
@@ -1541,10 +1850,10 @@ function ThreadsTable({
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx11("p", { className: "font-medium", children: thread.name }),
-            /* @__PURE__ */ jsx11("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: thread.name }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
           ] }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             Badge,
             {
               variant: thread.status === "archived" ? "secondary" : "default",
@@ -1561,7 +1870,7 @@ function ThreadsTable({
             thread.participantIds.length,
             " participants"
           ] }),
-          /* @__PURE__ */ jsx11("span", { children: formatDate(thread.lastActivityAt) })
+          /* @__PURE__ */ jsx12("span", { children: formatDate(thread.lastActivityAt) })
         ] })
       ]
     },
@@ -1572,17 +1881,17 @@ function ParticipantsTable({
   rows,
   labels
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "rounded-lg border bg-muted/50 p-4",
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx11("p", { className: "font-medium", children: participant.displayName }),
-            /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
+            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: participant.displayName }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
           ] }),
-          /* @__PURE__ */ jsx11(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
+          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
         ] }),
         /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxs7("span", { children: [
@@ -1593,7 +1902,7 @@ function ParticipantsTable({
             formatNumber(participant.threadCount),
             " threads"
           ] }),
-          /* @__PURE__ */ jsx11("span", { children: formatDate(participant.lastActivityAt) })
+          /* @__PURE__ */ jsx12("span", { children: formatDate(participant.lastActivityAt) })
         ] })
       ]
     },
@@ -1602,38 +1911,46 @@ function ParticipantsTable({
 }
 function AgentsTable({
   rows,
-  labels
+  labels,
+  usageMetricKind,
+  usageDimension
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "rounded-lg border bg-muted/50 p-4",
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx11("p", { className: "font-medium", children: agent.displayName }),
-            /* @__PURE__ */ jsx11("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: agent.displayName }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
           ] }),
-          /* @__PURE__ */ jsx11(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
+          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.messageCount),
-            " messages"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.llmCallCount),
-            " LLM calls"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.toolCallMessageCount),
-            " tool calls"
-          ] }),
-          /* @__PURE__ */ jsxs7("span", { children: [
-            formatNumber(agent.totalTokens),
-            " tokens"
-          ] })
-        ] })
+        /* @__PURE__ */ jsx12("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs", children: [
+          {
+            label: "Messages",
+            value: formatNumber(agent.messageCount)
+          },
+          {
+            label: "LLM calls",
+            value: formatNumber(agent.llmCallCount)
+          },
+          {
+            label: "Tool calls",
+            value: formatNumber(agent.toolCallMessageCount)
+          },
+          {
+            label: getUsageSummaryLabel(labels, usageMetricKind, usageDimension),
+            value: formatMetricValue(
+              getAgentUsageValue(agent, usageMetricKind, usageDimension),
+              usageMetricKind
+            )
+          }
+        ].map((item) => /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx12("p", { className: "font-medium text-foreground", children: item.value }),
+          /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: item.label })
+        ] }, item.label)) })
       ]
     },
     `${agent.namespace}:${agent.agentId}`
@@ -1665,10 +1982,155 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
+var USAGE_DIMENSIONS = [
+  "total",
+  "input",
+  "output",
+  "reasoning",
+  "cacheRead",
+  "cacheWrite"
+];
+function getUsageDimensionLabel(labels, dimension) {
+  switch (dimension) {
+    case "input":
+      return labels.usageInput;
+    case "output":
+      return labels.usageOutput;
+    case "reasoning":
+      return labels.usageReasoning;
+    case "cacheRead":
+      return labels.usageCacheRead;
+    case "cacheWrite":
+      return labels.usageCacheWrite;
+    case "total":
+    default:
+      return labels.usageTotal;
+  }
+}
+function getUsageSummaryLabel(labels, metricKind, dimension) {
+  const metricLabel = metricKind === "cost" ? labels.usageMetricCost : labels.usageMetricTokens;
+  return `${getUsageDimensionLabel(labels, dimension)} ${metricLabel}`;
+}
+function getOverviewUsageValue(overview, metricKind, dimension) {
+  const llmTotals = overview.llmTotals;
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return llmTotals.inputCostUsd;
+      case "output":
+        return llmTotals.outputCostUsd;
+      case "reasoning":
+        return llmTotals.reasoningCostUsd;
+      case "cacheRead":
+        return llmTotals.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return llmTotals.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return llmTotals.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return llmTotals.inputTokens;
+    case "output":
+      return llmTotals.outputTokens;
+    case "reasoning":
+      return llmTotals.reasoningTokens;
+    case "cacheRead":
+      return llmTotals.cacheReadInputTokens;
+    case "cacheWrite":
+      return llmTotals.cacheCreationInputTokens;
+    case "total":
+    default:
+      return llmTotals.totalTokens;
+  }
+}
+function getAgentUsageValue(agent, metricKind, dimension) {
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return agent.inputCostUsd;
+      case "output":
+        return agent.outputCostUsd;
+      case "reasoning":
+        return agent.reasoningCostUsd;
+      case "cacheRead":
+        return agent.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return agent.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return agent.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return agent.inputTokens;
+    case "output":
+      return agent.outputTokens;
+    case "reasoning":
+      return agent.reasoningTokens;
+    case "cacheRead":
+      return agent.cacheReadInputTokens;
+    case "cacheWrite":
+      return agent.cacheCreationInputTokens;
+    case "total":
+    default:
+      return agent.totalTokens;
+  }
+}
+function getActivityUsageValue(point, metricKind, dimension) {
+  if (metricKind === "cost") {
+    switch (dimension) {
+      case "input":
+        return point.inputCostUsd;
+      case "output":
+        return point.outputCostUsd;
+      case "reasoning":
+        return point.reasoningCostUsd;
+      case "cacheRead":
+        return point.cacheReadInputCostUsd;
+      case "cacheWrite":
+        return point.cacheCreationInputCostUsd;
+      case "total":
+      default:
+        return point.totalCostUsd;
+    }
+  }
+  switch (dimension) {
+    case "input":
+      return point.inputTokens;
+    case "output":
+      return point.outputTokens;
+    case "reasoning":
+      return point.reasoningTokens;
+    case "cacheRead":
+      return point.cacheReadInputTokens;
+    case "cacheWrite":
+      return point.cacheCreationInputTokens;
+    case "total":
+    default:
+      return point.totalTokens;
+  }
+}
+function formatMetricValue(value, metricKind) {
+  if (metricKind === "cost") {
+    const absoluteValue = Math.abs(value);
+    const maximumFractionDigits = absoluteValue >= 1 ? 2 : absoluteValue >= 0.01 ? 4 : 6;
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits
+    }).format(value);
+  }
+  return formatNumber(value);
+}
 
 // src/components/views/ThreadsView.tsx
 import { Search, MessageSquare as MessageSquare2 } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var ThreadsView = ({
   config,
   threads,
@@ -1678,8 +2140,8 @@ var ThreadsView = ({
 }) => {
   return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs8("div", { className: "relative max-w-sm", children: [
-      /* @__PURE__ */ jsx12(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx13(
         Input,
         {
           className: "pl-9",
@@ -1690,9 +2152,9 @@ var ThreadsView = ({
       )
     ] }),
     threads.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx12(MessageSquare2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsx12("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
-    ] }) : /* @__PURE__ */ jsx12("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs8(
+      /* @__PURE__ */ jsx13(MessageSquare2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx13("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs8(
       "div",
       {
         className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
@@ -1700,8 +2162,8 @@ var ThreadsView = ({
         children: [
           /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx12("p", { className: "font-medium truncate", children: thread.name }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("p", { className: "font-medium truncate", children: thread.name }),
+              /* @__PURE__ */ jsx13(
                 Badge,
                 {
                   variant: thread.status === "archived" ? "secondary" : "default",
@@ -1710,7 +2172,7 @@ var ThreadsView = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx12("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+            /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
           ] }),
           /* @__PURE__ */ jsxs8("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
             /* @__PURE__ */ jsxs8("p", { children: [
@@ -1721,7 +2183,7 @@ var ThreadsView = ({
               thread.participantIds.length,
               " participants"
             ] }),
-            /* @__PURE__ */ jsx12("p", { children: formatDate2(thread.lastActivityAt) })
+            /* @__PURE__ */ jsx13("p", { children: formatDate2(thread.lastActivityAt) })
           ] })
         ]
       },
@@ -1755,7 +2217,7 @@ import {
   Wrench,
   Cpu
 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var MESSAGES_PAGE_SIZE = 50;
 var ThreadDetailView = ({
   threadId,
@@ -1813,36 +2275,36 @@ var ThreadDetailView = ({
     }
   }, [threadId, pageInfo, isLoadingMore, config.baseUrl, config.getRequestHeaders]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx13(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+    return /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
   }
   if (error) {
     return /* @__PURE__ */ jsxs9("div", { className: "space-y-4 py-10 text-center", children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-destructive font-medium", children: error.message }),
+      /* @__PURE__ */ jsx14("p", { className: "text-destructive font-medium", children: error.message }),
       /* @__PURE__ */ jsxs9("div", { className: "flex justify-center gap-2", children: [
         /* @__PURE__ */ jsxs9(Button, { variant: "outline", onClick: onBack, children: [
-          /* @__PURE__ */ jsx13(ArrowLeft, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx14(ArrowLeft, { className: "mr-2 h-4 w-4" }),
           "Back"
         ] }),
-        /* @__PURE__ */ jsx13(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
+        /* @__PURE__ */ jsx14(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
       ] })
     ] });
   }
   return /* @__PURE__ */ jsxs9("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         Button,
         {
           variant: "ghost",
           size: "icon",
           className: "mt-1 shrink-0",
           onClick: onBack,
-          children: /* @__PURE__ */ jsx13(ArrowLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx14(ArrowLeft, { className: "h-4 w-4" })
         }
       ),
       /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx13("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
+          /* @__PURE__ */ jsx14(
             Badge,
             {
               variant: thread?.status === "archived" ? "secondary" : "default",
@@ -1850,7 +2312,7 @@ var ThreadDetailView = ({
             }
           )
         ] }),
-        thread?.summary && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
+        thread?.summary && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
         /* @__PURE__ */ jsxs9("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
           thread?.createdAt && /* @__PURE__ */ jsxs9("span", { children: [
             "Created ",
@@ -1868,13 +2330,13 @@ var ThreadDetailView = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs9("h3", { className: "text-sm font-medium text-muted-foreground", children: [
+      /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs9("h3", { className: "text-sm font-medium text-muted-foreground", children: [
         "Messages (",
         messages.length,
         pageInfo?.hasMoreBefore ? "+" : "",
         ")"
       ] }) }),
-      pageInfo?.hasMoreBefore && /* @__PURE__ */ jsx13("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxs9(
+      pageInfo?.hasMoreBefore && /* @__PURE__ */ jsx14("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxs9(
         Button,
         {
           variant: "ghost",
@@ -1882,12 +2344,12 @@ var ThreadDetailView = ({
           onClick: () => void loadMore(),
           disabled: isLoadingMore,
           children: [
-            isLoadingMore ? /* @__PURE__ */ jsx13(Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx13(ChevronUp2, { className: "mr-2 h-3 w-3" }),
+            isLoadingMore ? /* @__PURE__ */ jsx14(Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx14(ChevronUp2, { className: "mr-2 h-3 w-3" }),
             "Load older messages"
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx13("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ jsx13("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ jsx13(MessageRow, { message }, message.id)) }) })
+      /* @__PURE__ */ jsx14("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ jsx14("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ jsx14(MessageRow, { message }, message.id)) }) })
     ] })
   ] });
 };
@@ -1895,15 +2357,15 @@ function MessageRow({ message }) {
   const [expanded, setExpanded] = useState4(false);
   const hasToolCalls = Array.isArray(message.toolCalls) && message.toolCalls.length > 0;
   const hasReasoning = !!message.reasoning;
-  return /* @__PURE__ */ jsx13("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx13(SenderIcon, { senderType: message.senderType }),
+  return /* @__PURE__ */ jsx14("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx14(SenderIcon, { senderType: message.senderType }),
     /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs", children: [
-        /* @__PURE__ */ jsx13("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
-        /* @__PURE__ */ jsx13(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
-        message.createdAt && /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
+        /* @__PURE__ */ jsx14("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
+        /* @__PURE__ */ jsx14(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
+        message.createdAt && /* @__PURE__ */ jsx14("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
       ] }),
-      message.content && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
+      message.content && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
       (hasToolCalls || hasReasoning) && /* @__PURE__ */ jsxs9("div", { className: "mt-2 space-y-2", children: [
         hasToolCalls && /* @__PURE__ */ jsxs9(
           "button",
@@ -1912,7 +2374,7 @@ function MessageRow({ message }) {
             onClick: () => setExpanded(!expanded),
             className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
             children: [
-              /* @__PURE__ */ jsx13(Wrench, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx14(Wrench, { className: "h-3 w-3" }),
               message.toolCalls.length,
               " tool call",
               message.toolCalls.length > 1 ? "s" : ""
@@ -1926,12 +2388,12 @@ function MessageRow({ message }) {
             onClick: () => setExpanded(!expanded),
             className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
             children: [
-              /* @__PURE__ */ jsx13(Cpu, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx14(Cpu, { className: "h-3 w-3" }),
               "Reasoning"
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsx13("pre", { className: "mt-2 rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(
+        expanded && /* @__PURE__ */ jsx14("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 } : {}
@@ -1947,13 +2409,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__ */ jsx13("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx13(Bot2, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx14(Bot2, { className: "h-3.5 w-3.5" }) });
     case "user":
-      return /* @__PURE__ */ jsx13("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ jsx13(User, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ jsx14(User, { className: "h-3.5 w-3.5" }) });
     case "tool":
-      return /* @__PURE__ */ jsx13("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx13(Wrench, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx14(Wrench, { className: "h-3.5 w-3.5" }) });
     default:
-      return /* @__PURE__ */ jsx13("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx13(Cpu, { className: "h-3.5 w-3.5" }) });
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx14(Cpu, { className: "h-3.5 w-3.5" }) });
   }
 }
 function formatDate3(value) {
@@ -1977,8 +2439,634 @@ function formatTimestamp(value) {
   });
 }
 
+// src/components/views/ParticipantsView.tsx
+import { Search as Search2, Users as Users2 } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var ParticipantsView = ({
+  config,
+  participants,
+  searchValue,
+  onSearchChange,
+  onParticipantClick
+}) => {
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx15(Search2, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx15(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: config.labels.participantSearchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] }),
+    participants.length === 0 ? /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx15(Users2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx15("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx15("div", { className: "space-y-2", children: participants.map((p) => /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
+        onClick: () => onParticipantClick?.(p.externalId),
+        children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx15("p", { className: "font-medium truncate", children: p.displayName }),
+              /* @__PURE__ */ jsx15(Badge, { variant: "outline", className: "shrink-0 text-xs", children: p.participantType }),
+              /* @__PURE__ */ jsx15(Badge, { variant: p.isGlobal ? "default" : "secondary", className: "shrink-0 text-xs", children: p.isGlobal ? config.labels.scopeGlobal : config.labels.scopeScoped })
+            ] }),
+            /* @__PURE__ */ jsx15("p", { className: "mt-1 text-xs text-muted-foreground", children: p.externalId })
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
+            /* @__PURE__ */ jsxs10("p", { children: [
+              formatNumber3(p.messageCount),
+              " messages"
+            ] }),
+            /* @__PURE__ */ jsxs10("p", { children: [
+              formatNumber3(p.threadCount),
+              " threads"
+            ] }),
+            /* @__PURE__ */ jsx15("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
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState5 } from "react";
+import { ArrowLeft as ArrowLeft2, Loader2 as Loader22, Save } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var ParticipantDetailView = ({
+  participantId,
+  config,
+  onBack
+}) => {
+  const [data, setData] = useState5(null);
+  const [editJson, setEditJson] = useState5("");
+  const [isLoading, setIsLoading] = useState5(true);
+  const [isSaving, setIsSaving] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [saveMessage, setSaveMessage] = useState5(null);
+  const fetchOptions = {
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders
+  };
+  const load = useCallback4(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]);
+  useEffect6(() => {
+    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__ */ jsx16("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx16(Loader22, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx16(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx16(ArrowLeft2, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx16("h2", { className: "text-xl font-semibold truncate", children: participantId }),
+        /* @__PURE__ */ jsx16("p", { className: "text-sm text-muted-foreground", children: "Participant Detail" })
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        saveMessage && /* @__PURE__ */ jsx16("span", { className: "text-xs text-emerald-600", children: saveMessage }),
+        /* @__PURE__ */ jsxs11(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
+          isSaving ? /* @__PURE__ */ jsx16(Loader22, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx16(Save, { className: "mr-2 h-3 w-3" }),
+          "Save"
+        ] })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx16("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx16("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsx16(
+      "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
+import { Search as Search3, Bot as Bot3 } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var AgentsView = ({
+  config,
+  agents,
+  searchValue,
+  onSearchChange,
+  onAgentClick
+}) => {
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx17(Search3, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx17(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: config.labels.agentSearchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] }),
+    agents.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx17(Bot3, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx17("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx17("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: "rounded-lg border bg-card p-5 transition-colors hover:bg-muted/50 cursor-pointer",
+        onClick: () => onAgentClick?.(agent.agentId),
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx17("p", { className: "font-medium truncate", children: agent.displayName }),
+              /* @__PURE__ */ jsx17("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+            ] }),
+            /* @__PURE__ */ jsx17(Badge, { variant: "outline", className: "shrink-0", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
+          ] }),
+          /* @__PURE__ */ jsxs12("div", { className: "mt-4 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs12("span", { children: [
+              formatNumber4(agent.messageCount),
+              " messages"
+            ] }),
+            /* @__PURE__ */ jsxs12("span", { children: [
+              formatNumber4(agent.llmCallCount),
+              " LLM calls"
+            ] }),
+            /* @__PURE__ */ jsxs12("span", { children: [
+              formatNumber4(agent.toolCallMessageCount),
+              " tool calls"
+            ] }),
+            /* @__PURE__ */ jsxs12("span", { children: [
+              formatNumber4(agent.totalTokens),
+              " tokens"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx17("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
+import { ArrowLeft as ArrowLeft3, Bot as Bot4 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var AgentDetailView = ({
+  agentId,
+  config,
+  agents,
+  onBack
+}) => {
+  const agent = agents.find((a) => a.agentId === agentId);
+  if (!agent) {
+    return /* @__PURE__ */ jsxs13("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ jsxs13("p", { className: "text-muted-foreground", children: [
+        "Agent not found: ",
+        agentId
+      ] }),
+      /* @__PURE__ */ jsxs13(Button, { variant: "outline", onClick: onBack, children: [
+        /* @__PURE__ */ jsx18(ArrowLeft3, { 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__ */ jsxs13("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon", className: "mt-1 shrink-0", onClick: onBack, children: /* @__PURE__ */ jsx18(ArrowLeft3, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx18("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx18(Bot4, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsxs13("div", { children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx18("h2", { className: "text-xl font-semibold", children: agent.displayName }),
+              /* @__PURE__ */ jsx18(Badge, { variant: "outline", children: agent.isConfigured ? config.labels.configured : config.labels.unconfigured })
+            ] }),
+            agent.description && /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: agent.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs13("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs13("span", { children: [
+            "ID: ",
+            agent.agentId
+          ] }),
+          /* @__PURE__ */ jsxs13("span", { children: [
+            "Namespace: ",
+            agent.namespace
+          ] }),
+          agent.lastActivityAt && /* @__PURE__ */ jsxs13("span", { children: [
+            "Last active: ",
+            formatDate6(agent.lastActivityAt)
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx18("div", { className: "grid gap-4 sm:grid-cols-3 lg:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxs13("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+      /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
+      /* @__PURE__ */ jsx18("p", { className: "mt-2 text-2xl font-semibold tracking-tight", children: new Intl.NumberFormat().format(stat.value) })
+    ] }, 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
+import { useCallback as useCallback5, useEffect as useEffect7, useState as useState6 } from "react";
+import { Loader2 as Loader23, Plus, Search as Search4, Database as Database2 } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var CollectionItemsView = ({
+  collection,
+  config,
+  namespace,
+  onItemClick,
+  onCreateNew
+}) => {
+  const [items, setItems] = useState6([]);
+  const [isLoading, setIsLoading] = useState6(true);
+  const [search, setSearch] = useState6("");
+  const [error, setError] = useState6(null);
+  const fetchOptions = {
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders
+  };
+  const load = useCallback5(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]);
+  useEffect7(() => {
+    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__ */ jsxs14("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx19("h2", { className: "text-lg font-semibold capitalize", children: collection }),
+      onCreateNew && /* @__PURE__ */ jsxs14(Button, { size: "sm", onClick: onCreateNew, children: [
+        /* @__PURE__ */ jsx19(Plus, { className: "mr-2 h-3 w-3" }),
+        " New"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx19(Search4, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx19(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: `Search ${collection}...`,
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx19("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    isLoading ? /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx19(Loader23, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : items.length === 0 ? /* @__PURE__ */ jsxs14("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx19(Database2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx19("p", { className: "mt-3 text-sm text-muted-foreground", children: search ? config.labels.noResults : `No items in ${collection}` })
+    ] }) : /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: items.map((item, idx) => {
+      const itemId = getItemId(item);
+      return /* @__PURE__ */ jsx19(
+        "div",
+        {
+          className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
+          onClick: () => onItemClick?.(itemId),
+          children: /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx19("p", { className: "font-medium font-mono text-sm truncate", children: itemId }),
+            /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: getItemPreview(item) })
+          ] })
+        },
+        itemId + idx
+      );
+    }) })
+  ] });
+};
+
+// src/components/views/CollectionItemDetailView.tsx
+import { useCallback as useCallback6, useEffect as useEffect8, useState as useState7 } from "react";
+import { ArrowLeft as ArrowLeft5, Loader2 as Loader24, Save as Save2, Trash2 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var CollectionItemDetailView = ({
+  collection,
+  itemId,
+  config,
+  namespace,
+  onBack,
+  onDeleted
+}) => {
+  const isNew = !itemId;
+  const [editJson, setEditJson] = useState7(isNew ? "{\n  \n}" : "");
+  const [isLoading, setIsLoading] = useState7(!isNew);
+  const [isSaving, setIsSaving] = useState7(false);
+  const [isDeleting, setIsDeleting] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [saveMessage, setSaveMessage] = useState7(null);
+  const fetchOptions = {
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders
+  };
+  const load = useCallback6(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]);
+  useEffect8(() => {
+    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__ */ jsx20("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx20(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ jsxs15("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx20(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx20(ArrowLeft5, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20("h2", { className: "text-xl font-semibold truncate capitalize", children: isNew ? `New ${collection} item` : `${collection} / ${itemId}` }) }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+        saveMessage && /* @__PURE__ */ jsx20("span", { className: "text-xs text-emerald-600", children: saveMessage }),
+        !isNew && /* @__PURE__ */ jsxs15(
+          Button,
+          {
+            variant: "destructive",
+            size: "sm",
+            onClick: () => void handleDelete(),
+            disabled: isDeleting,
+            children: [
+              isDeleting ? /* @__PURE__ */ jsx20(Loader24, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx20(Trash2, { className: "mr-2 h-3 w-3" }),
+              "Delete"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs15(Button, { size: "sm", onClick: () => void handleSave(), disabled: isSaving, children: [
+          isSaving ? /* @__PURE__ */ jsx20(Loader24, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx20(Save2, { className: "mr-2 h-3 w-3" }),
+          isNew ? "Create" : "Save"
+        ] })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx20("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx20("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsx20(
+      "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
+import { useCallback as useCallback7, useState as useState8 } from "react";
+import { Activity as Activity2, Loader2 as Loader25, Search as Search5 } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var STATUS_VARIANTS = {
+  pending: "outline",
+  processing: "default",
+  completed: "secondary",
+  failed: "destructive",
+  expired: "secondary",
+  overwritten: "secondary"
+};
+var EventsView = ({ config }) => {
+  const [threadId, setThreadId] = useState8("");
+  const [event, setEvent] = useState8(null);
+  const [hasSearched, setHasSearched] = useState8(false);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [error, setError] = useState8(null);
+  const fetchOptions = {
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders
+  };
+  const handleSearch = useCallback7(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__ */ jsxs16("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-end gap-3 max-w-lg", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx21("label", { className: "text-sm font-medium mb-1 block", children: "Thread ID" }),
+        /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx21(Search5, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx21(
+            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__ */ jsxs16(Button, { onClick: () => void handleSearch(), disabled: isLoading || !threadId.trim(), children: [
+        isLoading ? /* @__PURE__ */ jsx21(Loader25, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+        "Inspect"
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx21("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+    !hasSearched ? /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx21(Activity2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx21("p", { className: "mt-3 text-sm text-muted-foreground", children: "Enter a thread ID to inspect its next pending queue event." })
+    ] }) : isLoading ? /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx21(Loader25, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : !event ? /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx21(Activity2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx21("p", { className: "mt-3 text-sm text-muted-foreground", children: "No pending events found for this thread." })
+    ] }) : /* @__PURE__ */ jsxs16("div", { className: "rounded-lg border bg-card p-5 space-y-4", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx21("p", { className: "font-medium", children: event.eventType }),
+          /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground font-mono mt-1", children: event.id })
+        ] }),
+        /* @__PURE__ */ jsx21(Badge, { variant: STATUS_VARIANTS[event.status] ?? "outline", children: event.status })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "grid gap-3 sm:grid-cols-2 text-sm", children: [
+        event.traceId && /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Trace:" }),
+          " ",
+          /* @__PURE__ */ jsx21("span", { className: "font-mono text-xs", children: event.traceId })
+        ] }),
+        event.parentEventId && /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Parent:" }),
+          " ",
+          /* @__PURE__ */ jsx21("span", { className: "font-mono text-xs", children: event.parentEventId })
+        ] }),
+        event.priority != null && /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Priority:" }),
+          " ",
+          event.priority
+        ] }),
+        event.createdAt && /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "Created:" }),
+          " ",
+          formatTimestamp2(event.createdAt)
+        ] })
+      ] }),
+      event.payload != null && /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Payload" }),
+        /* @__PURE__ */ jsx21("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(event.payload, null, 2) })
+      ] }),
+      event.metadata != null && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
+        /* @__PURE__ */ jsx21("pre", { className: "rounded-md bg-muted p-3 text-xs overflow-auto max-h-40", children: JSON.stringify(event.metadata, null, 2) })
+      ] })
+    ] })
+  ] });
+};
+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
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var CopilotzAdmin = ({
   config: userConfig,
   className
@@ -1987,69 +3075,101 @@ var CopilotzAdmin = ({
     () => mergeAdminConfig(defaultAdminConfig, userConfig),
     [userConfig]
   );
-  const [route, setRoute] = useState5({ page: config.defaultPage });
-  const [threadSearch, setThreadSearch] = useState5("");
-  const [participantSearch, setParticipantSearch] = useState5("");
-  const [agentSearch, setAgentSearch] = useState5("");
+  const [route, setRoute] = useState9({ page: config.defaultPage });
+  const [namespace, setNamespace] = useState9(config.namespace);
+  const [collections, setCollections] = useState9([]);
+  const [threadSearch, setThreadSearch] = useState9("");
+  const [participantSearch, setParticipantSearch] = useState9("");
+  const [agentSearch, setAgentSearch] = useState9("");
   const deferredThreadSearch = useDeferredValue(threadSearch);
   const deferredParticipantSearch = useDeferredValue(participantSearch);
   const deferredAgentSearch = 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 = useCallback4(
+  useEffect9(() => {
+    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 = useCallback8(
     (next) => {
       setRoute(next);
       config.onNavigate?.(next);
     },
     [config]
   );
-  const handleSidebarNavigate = useCallback4(
+  const handleSidebarNavigate = useCallback8(
     (page) => navigate({ page }),
     [navigate]
   );
-  const handleThreadClick = useCallback4(
+  const handleSidebarRouteNavigate = useCallback8(
+    (r) => navigate(r),
+    [navigate]
+  );
+  const handleThreadClick = useCallback8(
     (threadId) => navigate({ page: "thread-detail", resourceId: threadId }),
     [navigate]
   );
-  const handleBackToThreads = useCallback4(
-    () => navigate({ page: "threads" }),
+  const handleBackToThreads = useCallback8(() => navigate({ page: "threads" }), [navigate]);
+  const handleParticipantClick = useCallback8(
+    (id) => navigate({ page: "participant-detail", resourceId: id }),
     [navigate]
   );
-  const sidebarPage = route.page === "thread-detail" ? "threads" : route.page;
+  const handleBackToParticipants = useCallback8(() => navigate({ page: "participants" }), [navigate]);
+  const handleAgentClick = useCallback8(
+    (id) => navigate({ page: "agent-detail", resourceId: id }),
+    [navigate]
+  );
+  const handleBackToAgents = useCallback8(() => navigate({ page: "agents" }), [navigate]);
+  const handleCollectionItemClick = useCallback8(
+    (itemId) => navigate({ page: "collection-item-detail", resourceId: itemId, collection: route.collection }),
+    [navigate, route.collection]
+  );
+  const handleCollectionCreateNew = useCallback8(
+    () => navigate({ page: "collection-item-detail", resourceId: void 0, collection: route.collection }),
+    [navigate, route.collection]
+  );
+  const handleBackToCollectionItems = useCallback8(
+    () => 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__ */ jsx14(Card, { className: cn("border-border", className), children: /* @__PURE__ */ jsx14(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
+    return /* @__PURE__ */ jsx22(Card, { className: cn("border-border", className), children: /* @__PURE__ */ jsx22(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
   }
   if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ jsx14(
-      Card,
-      {
-        className: cn("border-destructive/50 bg-destructive/10", className),
-        children: /* @__PURE__ */ jsxs10(CardContent, { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx14("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
-          /* @__PURE__ */ jsx14(
-            Button,
-            {
-              variant: "destructive",
-              onClick: () => void admin.refresh(),
-              children: config.labels.retry
-            }
-          )
-        ] })
-      }
-    );
+    return /* @__PURE__ */ jsx22(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ jsxs17(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx22("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
+      /* @__PURE__ */ jsx22(Button, { variant: "destructive", onClick: () => void admin.refresh(), children: config.labels.retry })
+    ] }) });
   }
   const renderCurrentView = () => {
     switch (route.page) {
       case "dashboard":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx22(
           DashboardView,
           {
             config,
@@ -2069,7 +3189,7 @@ var CopilotzAdmin = ({
           }
         );
       case "threads":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx22(
           ThreadsView,
           {
             config,
@@ -2080,34 +3200,62 @@ var CopilotzAdmin = ({
           }
         );
       case "thread-detail":
-        return route.resourceId ? /* @__PURE__ */ jsx14(
-          ThreadDetailView,
+        return route.resourceId ? /* @__PURE__ */ jsx22(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
+      case "participants":
+        return /* @__PURE__ */ jsx22(
+          ParticipantsView,
           {
-            threadId: route.resourceId,
             config,
-            onBack: handleBackToThreads
+            participants: admin.participants,
+            searchValue: participantSearch,
+            onSearchChange: setParticipantSearch,
+            onParticipantClick: handleParticipantClick
           }
-        ) : null;
-      case "participants":
-        return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-          /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold", children: config.labels.participantsTitle }),
-          /* @__PURE__ */ jsx14("p", { className: "mt-2 text-sm text-muted-foreground", children: "Detailed participant management coming soon." })
-        ] });
+        );
+      case "participant-detail":
+        return route.resourceId ? /* @__PURE__ */ jsx22(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
       case "agents":
-        return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-          /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold", children: config.labels.agentsTitle }),
-          /* @__PURE__ */ jsx14("p", { className: "mt-2 text-sm text-muted-foreground", children: "Agent configuration management coming soon." })
-        ] });
+        return /* @__PURE__ */ jsx22(
+          AgentsView,
+          {
+            config,
+            agents: admin.agents,
+            searchValue: agentSearch,
+            onSearchChange: setAgentSearch,
+            onAgentClick: handleAgentClick
+          }
+        );
+      case "agent-detail":
+        return route.resourceId ? /* @__PURE__ */ jsx22(AgentDetailView, { agentId: route.resourceId, config, agents: admin.agents, onBack: handleBackToAgents }) : null;
+      case "collection-items":
+        return route.collection ? /* @__PURE__ */ jsx22(
+          CollectionItemsView,
+          {
+            collection: route.collection,
+            config,
+            namespace,
+            onItemClick: handleCollectionItemClick,
+            onCreateNew: handleCollectionCreateNew
+          }
+        ) : null;
+      case "collection-item-detail":
+        return route.collection ? /* @__PURE__ */ jsx22(
+          CollectionItemDetailView,
+          {
+            collection: route.collection,
+            itemId: route.resourceId ?? null,
+            config,
+            namespace,
+            onBack: handleBackToCollectionItems
+          }
+        ) : null;
       case "events":
-        return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-          /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold", children: config.labels.eventsTitle }),
-          /* @__PURE__ */ jsx14("p", { className: "mt-2 text-sm text-muted-foreground", children: "Event inspector coming soon." })
-        ] });
+        return /* @__PURE__ */ jsx22(EventsView, { config });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ jsx14(TooltipProvider, { children: /* @__PURE__ */ jsx14(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx22(TooltipProvider, { children: /* @__PURE__ */ jsx22(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -2115,20 +3263,25 @@ var CopilotzAdmin = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx22(
           AdminSidebar,
           {
             config,
             currentPage: sidebarPage,
-            onNavigate: handleSidebarNavigate
+            currentRoute: route,
+            onNavigate: handleSidebarNavigate,
+            onNavigateRoute: handleSidebarRouteNavigate,
+            collections,
+            namespace,
+            onNamespaceChange: setNamespace
           }
         ),
-        /* @__PURE__ */ jsx14(SidebarInset, { children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col h-full min-h-0", children: [
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx22(SidebarInset, { children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full min-h-0", children: [
+          /* @__PURE__ */ jsx22(
             AdminHeader,
             {
               config,
-              currentPage: route.page,
+              currentRoute: route,
               range: admin.filters.range,
               interval: admin.filters.interval,
               onRangeChange: admin.setRange,
@@ -2137,7 +3290,7 @@ var CopilotzAdmin = ({
               isLoading: admin.isLoading
             }
           ),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+          /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
         ] }) })
       ]
     }
@@ -2145,13 +3298,22 @@ var CopilotzAdmin = ({
 };
 export {
   CopilotzAdmin,
+  createCollectionItem,
   defaultAdminConfig,
+  deleteCollectionItem,
   fetchAdminActivity,
   fetchAdminAgents,
   fetchAdminOverview,
   fetchAdminParticipants,
   fetchAdminThreads,
+  fetchCollectionItem,
+  fetchCollectionItems,
+  fetchCollectionNames,
+  fetchParticipantDetail,
+  fetchThreadEvents,
   mergeAdminConfig,
+  updateCollectionItem,
+  updateParticipant,
   useCopilotzAdmin
 };
 //# sourceMappingURL=index.js.map