@copilotz/admin 0.3.6 → 0.3.8

package/dist/index.js

@@ -1,15 +1,17 @@
 // src/CopilotzAdmin.tsx
 import {
+  useCallback as useCallback8,
   useDeferredValue,
-  useMemo as useMemo2,
-  useState as useState2
+  useEffect as useEffect9,
+  useMemo as useMemo3,
+  useState as useState9
 } from "react";
 
 // src/config.ts
 var defaultAdminConfig = {
   branding: {
     title: "Copilotz Admin",
-    subtitle: "Read-only operational visibility for Copilotz clients",
+    subtitle: "Operational visibility for Copilotz clients",
     logo: null,
     actions: null
   },
@@ -43,24 +45,36 @@ var defaultAdminConfig = {
     scopeScoped: "Scoped",
     configured: "Configured",
     unconfigured: "Observed only",
-    noResults: "No results"
+    noResults: "No results",
+    eventsTitle: "Events",
+    dashboardTitle: "Dashboard",
+    collectionsTitle: "Collections",
+    collectionsEndpoint: "/v1/collections"
   },
   features: {
     showOverview: true,
     showActivity: true,
     showThreads: true,
     showParticipants: true,
-    showAgents: true
+    showAgents: true,
+    showEvents: true,
+    showCollections: true
   },
   ui: {
     compact: false,
     maxActivityBars: 18
   },
+  sidebar: {
+    defaultOpen: true,
+    collapsible: "icon"
+  },
   baseUrl: "",
   getRequestHeaders: async () => ({}),
   namespace: "",
   initialRange: "7d",
-  initialInterval: "day"
+  initialInterval: "day",
+  defaultPage: "dashboard",
+  onNavigate: null
 };
 function mergeAdminConfig(_baseConfig, userConfig) {
   if (!userConfig) return defaultAdminConfig;
@@ -81,11 +95,17 @@ function mergeAdminConfig(_baseConfig, userConfig) {
       ...defaultAdminConfig.ui,
       ...userConfig.ui
     },
+    sidebar: {
+      ...defaultAdminConfig.sidebar,
+      ...userConfig.sidebar
+    },
     baseUrl: userConfig.baseUrl ?? defaultAdminConfig.baseUrl,
     getRequestHeaders: userConfig.getRequestHeaders ?? defaultAdminConfig.getRequestHeaders,
     namespace: userConfig.namespace ?? defaultAdminConfig.namespace,
     initialRange: userConfig.initialRange ?? defaultAdminConfig.initialRange,
-    initialInterval: userConfig.initialInterval ?? defaultAdminConfig.initialInterval
+    initialInterval: userConfig.initialInterval ?? defaultAdminConfig.initialInterval,
+    defaultPage: userConfig.defaultPage ?? defaultAdminConfig.defaultPage,
+    onNavigate: userConfig.onNavigate ?? defaultAdminConfig.onNavigate
   };
 }
 
@@ -159,6 +179,21 @@ async function fetchAdminJson(path, params, options) {
   const payload = await response.json();
   return payload.data;
 }
+async function fetchRawJson(path, params, options) {
+  const url = new URL(`${resolveBaseUrl(options?.baseUrl)}${path}`, window.location.origin);
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === "string" && value.length > 0) {
+      url.searchParams.set(key, value);
+    }
+  }
+  const response = await fetch(url.toString(), {
+    headers: await withAuthHeaders({}, options?.getRequestHeaders)
+  });
+  if (!response.ok) {
+    throw new Error(`Admin request failed (${response.status})`);
+  }
+  return await response.json();
+}
 async function fetchAdminOverview(range, namespace, options) {
   const windowRange = getRangeWindow(range);
   return await fetchAdminJson("/v1/admin/overview", {
@@ -197,6 +232,139 @@ async function fetchAdminAgents(search, namespace, options) {
     limit: "8"
   }, options);
 }
+async function fetchThreadDetail(threadId, options) {
+  return await fetchAdminJson(
+    `/v1/threads/${encodeURIComponent(threadId)}`,
+    {},
+    options
+  );
+}
+async function fetchThreadMessages(threadId, messageOptions, options) {
+  return await fetchRawJson(
+    `/v1/threads/${encodeURIComponent(threadId)}/messages`,
+    {
+      limit: messageOptions?.limit?.toString(),
+      before: messageOptions?.before
+    },
+    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 = {}) {
@@ -322,6 +490,19 @@ function Card({ className, ...props }) {
     }
   );
 }
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -380,10 +561,83 @@ function Button({
   );
 }
 
+// src/components/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsx3(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/sidebar.tsx
+import * as React3 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+// src/hooks/use-mobile.ts
+import * as React from "react";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
 // src/components/ui/input.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "input",
     {
       type,
@@ -399,326 +653,1009 @@ function Input({ className, type, ...props }) {
   );
 }
 
-// src/components/ui/badge.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var badgeVariants = cva2(
-  "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",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
+// src/components/ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Separator({
   className,
-  variant,
-  asChild = false,
+  orientation = "horizontal",
+  decorative = true,
   ...props
 }) {
-  const Comp = asChild ? Slot2 : "span";
-  return /* @__PURE__ */ jsx4(
-    Comp,
+  return /* @__PURE__ */ jsx5(
+    SeparatorPrimitive.Root,
     {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
+      "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/select.tsx
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var Select = SelectPrimitive.Root;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus:ring-2 focus:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
+// 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 jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function cleanupBodyStyles() {
+  if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
+    document.body.style.pointerEvents = "";
   }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-      position === "popper" && "translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx5(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx5(ChevronUp, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsx5(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
+}
+function Sheet({ open, onOpenChange, ...props }) {
+  const prevOpenRef = React2.useRef(open);
+  React2.useEffect(() => {
+    if (prevOpenRef.current === true && open === false) {
+      const timeout = setTimeout(cleanupBodyStyles, 350);
+      return () => clearTimeout(timeout);
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+  React2.useEffect(() => {
+    return () => {
+      cleanupBodyStyles();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx6(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:pointer-events-none",
+        className
       ),
-      /* @__PURE__ */ jsx5(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4" }) })
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx5(Check, { className: "h-4 w-4" }) })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-// src/CopilotzAdmin.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var CopilotzAdmin = ({
-  config: userConfig,
-  className
-}) => {
-  const config = useMemo2(
-    () => mergeAdminConfig(defaultAdminConfig, userConfig),
-    [userConfig]
+      ...props
+    }
   );
-  const [threadSearch, setThreadSearch] = useState2("");
-  const [participantSearch, setParticipantSearch] = useState2("");
-  const [agentSearch, setAgentSearch] = useState2("");
-  const deferredThreadSearch = useDeferredValue(threadSearch);
-  const deferredParticipantSearch = useDeferredValue(participantSearch);
-  const deferredAgentSearch = useDeferredValue(agentSearch);
-  const admin = useCopilotzAdmin({
-    baseUrl: config.baseUrl,
-    getRequestHeaders: config.getRequestHeaders,
-    namespace: config.namespace,
-    range: config.initialRange,
-    interval: config.initialInterval,
-    threadSearch: deferredThreadSearch,
-    participantSearch: deferredParticipantSearch,
-    agentSearch: deferredAgentSearch
-  });
-  const cards = [
-    {
-      label: config.labels.messagesCard,
-      value: admin.overview?.messageTotals.total ?? 0,
-      detail: `${admin.overview?.messageTotals.toolCallMessages ?? 0} tool-call messages`
-    },
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
+    /* @__PURE__ */ jsx6(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs2(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        "aria-describedby": void 0,
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        ...props,
+        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__ */ jsx6(XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
     {
-      label: config.labels.activeThreadsCard,
-      value: admin.overview?.threadTotals.active ?? 0,
-      detail: `${admin.overview?.threadTotals.total ?? 0} total threads`
-    },
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SheetPrimitive.Title,
     {
-      label: config.labels.participantsCard,
-      value: admin.overview?.participantTotals.total ?? 0,
-      detail: `${admin.overview?.participantTotals.agents ?? 0} agents`
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/sidebar.tsx
+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";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React3.createContext(null);
+function useSidebar() {
+  const context = React3.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React3.useState(false);
+  const [_open, _setOpen] = React3.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React3.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React3.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React3.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React3.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx7(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx7(
+    "div",
     {
-      label: config.labels.tokensCard,
-      value: admin.overview?.llmTotals.totalTokens ?? 0,
-      detail: `${admin.overview?.llmTotals.totalCalls ?? 0} calls`
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx7(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx7(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "group peer text-sidebar-foreground hidden md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx7(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxs3(
+    Button,
+    {
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-7", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", 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__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva2(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
     },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ jsx7(
+    Comp,
     {
-      label: config.labels.queueCard,
-      value: admin.overview?.queueTotals.pending ?? 0,
-      detail: `${admin.overview?.queueTotals.failed ?? 0} failed`
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
     }
-  ];
-  if (admin.isLoading && !admin.overview) {
-    return /* @__PURE__ */ jsx6(Card, { className: cn("border-border", className), children: /* @__PURE__ */ jsx6(CardContent, { className: "text-muted-foreground", children: config.labels.loading }) });
+  );
+  if (!tooltip) {
+    return button;
   }
-  if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ jsx6(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx6("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
-      /* @__PURE__ */ jsx6(
-        Button,
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx7(
+      TooltipContent,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+
+// src/components/layout/AdminSidebar.tsx
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Users,
+  Bot,
+  Activity,
+  Database,
+  ChevronsUpDown
+} 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 jsxs4 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus:ring-2 focus:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      position === "popper" && "translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx8(ChevronUp, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx8(
+        SelectPrimitive.Viewport,
         {
-          variant: "destructive",
-          onClick: () => void admin.refresh(),
-          children: config.labels.retry
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
         }
-      )
-    ] }) });
+      ),
+      /* @__PURE__ */ jsx8(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4" }) })
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4" }) })
+    ]
   }
-  const isEmpty = cards.every((card) => card.value === 0) && admin.activity.length === 0 && admin.threads.length === 0 && admin.participants.length === 0 && admin.agents.length === 0;
-  return /* @__PURE__ */ jsx6(Card, { className: cn("gap-0 overflow-hidden py-0", className), children: /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-6 p-6", children: [
-    /* @__PURE__ */ jsxs2("header", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-          config.branding.logo ? /* @__PURE__ */ jsx6("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl border bg-background shadow-sm", children: config.branding.logo }) : null,
-          /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-semibold tracking-tight", children: config.branding.title }),
-            /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: config.branding.subtitle })
+));
+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 })
           ] })
-        ] }),
-        config.namespace ? /* @__PURE__ */ jsxs2("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: [
-          "Namespace: ",
-          config.namespace
-        ] }) : null
+        ] })
+      ] }),
+      /* @__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 { 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,
+  currentRoute,
+  range,
+  interval,
+  onRangeChange,
+  onIntervalChange,
+  onRefresh,
+  isLoading
+}) => {
+  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__ */ jsx10(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(SidebarTrigger, { className: "-ml-1" }) }),
+        /* @__PURE__ */ jsx10(TooltipContent, { children: "Toggle Sidebar" })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx10("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+      currentRoute.page === "dashboard" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx10(
           Button,
           {
-            variant: admin.filters.range === "24h" ? "default" : "outline",
+            variant: range === "24h" ? "default" : "ghost",
             size: "sm",
-            onClick: () => admin.setRange("24h"),
+            className: "h-7 text-xs",
+            onClick: () => onRangeChange("24h"),
             children: config.labels.range24h
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx10(
           Button,
           {
-            variant: admin.filters.range === "7d" ? "default" : "outline",
+            variant: range === "7d" ? "default" : "ghost",
             size: "sm",
-            onClick: () => admin.setRange("7d"),
+            className: "h-7 text-xs",
+            onClick: () => onRangeChange("7d"),
             children: config.labels.range7d
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx10(
           Button,
           {
-            variant: admin.filters.range === "30d" ? "default" : "outline",
+            variant: range === "30d" ? "default" : "ghost",
             size: "sm",
-            onClick: () => admin.setRange("30d"),
+            className: "h-7 text-xs",
+            onClick: () => onRangeChange("30d"),
             children: config.labels.range30d
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs6(
           Select,
           {
-            value: admin.filters.interval,
-            onValueChange: (v) => admin.setInterval(v),
+            value: interval,
+            onValueChange: (v) => onIntervalChange(v),
             children: [
-              /* @__PURE__ */ jsx6(SelectTrigger, { className: "h-8 w-[110px]", children: /* @__PURE__ */ jsx6(SelectValue, {}) }),
-              /* @__PURE__ */ jsxs2(SelectContent, { children: [
-                /* @__PURE__ */ jsx6(SelectItem, { value: "hour", children: config.labels.intervalHour }),
-                /* @__PURE__ */ jsx6(SelectItem, { value: "day", children: config.labels.intervalDay })
+              /* @__PURE__ */ jsx10(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ jsx10(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs6(SelectContent, { children: [
+                /* @__PURE__ */ jsx10(SelectItem, { value: "hour", children: config.labels.intervalHour }),
+                /* @__PURE__ */ jsx10(SelectItem, { value: "day", children: config.labels.intervalDay })
               ] })
             ]
           }
-        ),
-        /* @__PURE__ */ jsx6(
+        )
+      ] }),
+      /* @__PURE__ */ jsxs6(Tooltip, { children: [
+        /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(
           Button,
           {
-            variant: "outline",
-            size: "sm",
-            onClick: () => void admin.refresh(),
-            children: config.labels.refresh
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7",
+            onClick: onRefresh,
+            disabled: isLoading,
+            children: /* @__PURE__ */ jsx10(
+              RefreshCw,
+              {
+                className: `h-4 w-4 ${isLoading ? "animate-spin" : ""}`
+              }
+            )
           }
-        ),
-        config.branding.actions
-      ] })
+        ) }),
+        /* @__PURE__ */ jsx10(TooltipContent, { children: config.labels.refresh })
+      ] }),
+      config.branding.actions
+    ] })
+  ] }) }) });
+};
+
+// 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 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",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot3 : "span";
+  return /* @__PURE__ */ jsx11(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/views/DashboardView.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var DashboardView = ({
+  config,
+  overview,
+  activity,
+  threads,
+  participants,
+  agents,
+  interval,
+  threadSearch,
+  participantSearch,
+  agentSearch,
+  onThreadSearchChange,
+  onParticipantSearchChange,
+  onAgentSearchChange,
+  onThreadClick
+}) => {
+  const cards = [
+    {
+      label: config.labels.messagesCard,
+      value: overview?.messageTotals.total ?? 0,
+      detail: `${overview?.messageTotals.toolCallMessages ?? 0} tool-call messages`
+    },
+    {
+      label: config.labels.activeThreadsCard,
+      value: overview?.threadTotals.active ?? 0,
+      detail: `${overview?.threadTotals.total ?? 0} total threads`
+    },
+    {
+      label: config.labels.participantsCard,
+      value: overview?.participantTotals.total ?? 0,
+      detail: `${overview?.participantTotals.agents ?? 0} agents`
+    },
+    {
+      label: config.labels.tokensCard,
+      value: overview?.llmTotals.totalTokens ?? 0,
+      detail: `${overview?.llmTotals.totalCalls ?? 0} calls`
+    },
+    {
+      label: config.labels.queueCard,
+      value: overview?.queueTotals.pending ?? 0,
+      detail: `${overview?.queueTotals.failed ?? 0} failed`
+    }
+  ];
+  const isEmpty = cards.every((card) => card.value === 0) && activity.length === 0 && threads.length === 0 && participants.length === 0 && agents.length === 0;
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
+    isEmpty && /* @__PURE__ */ jsxs7("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
+      /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
     ] }),
-    isEmpty ? /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
-      /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
-    ] }) : null,
-    config.features.showOverview ? /* @__PURE__ */ jsxs2("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx6(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs2(
+    config.features.showOverview && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.overviewTitle }),
+      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs7(
         "div",
         {
-          className: "rounded-xl border bg-background p-5 shadow-sm",
+          className: "rounded-xl border bg-card p-5 shadow-sm",
           children: [
-            /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-            /* @__PURE__ */ jsx6("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
-            /* @__PURE__ */ jsx6("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: formatNumber(card.value) }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
           ]
         },
         card.label
       )) })
-    ] }) : null,
-    config.features.showActivity ? /* @__PURE__ */ jsxs2("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx6(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ jsx6(
+    ] }),
+    config.features.showActivity && /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx12(SectionHeading, { title: config.labels.activityTitle }),
+      /* @__PURE__ */ jsx12(
         ActivityChart,
         {
-          interval: admin.filters.interval,
+          interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
-          points: admin.activity
+          points: activity
         }
       )
-    ] }) : null,
-    /* @__PURE__ */ jsxs2("div", { className: "grid gap-6 lg:grid-cols-3", children: [
-      config.features.showThreads ? /* @__PURE__ */ jsx6(
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+      config.features.showThreads && /* @__PURE__ */ jsx12(
         DataTable,
         {
-          rows: admin.threads,
+          rows: threads,
           searchPlaceholder: config.labels.threadSearchPlaceholder,
           searchValue: threadSearch,
-          setSearchValue: setThreadSearch,
+          setSearchValue: onThreadSearchChange,
           title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ jsx6(ThreadsTable, { rows: admin.threads, labels: config.labels })
+          children: /* @__PURE__ */ jsx12(
+            ThreadsTable,
+            {
+              rows: threads,
+              labels: config.labels,
+              onThreadClick
+            }
+          )
         }
-      ) : null,
-      config.features.showParticipants ? /* @__PURE__ */ jsx6(
+      ),
+      config.features.showParticipants && /* @__PURE__ */ jsx12(
         DataTable,
         {
-          rows: admin.participants,
+          rows: participants,
           searchPlaceholder: config.labels.participantSearchPlaceholder,
           searchValue: participantSearch,
-          setSearchValue: setParticipantSearch,
+          setSearchValue: onParticipantSearchChange,
           title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ jsx6(
-            ParticipantsTable,
-            {
-              rows: admin.participants,
-              labels: config.labels
-            }
-          )
+          children: /* @__PURE__ */ jsx12(ParticipantsTable, { rows: participants, labels: config.labels })
         }
-      ) : null,
-      config.features.showAgents ? /* @__PURE__ */ jsx6(
+      ),
+      config.features.showAgents && /* @__PURE__ */ jsx12(
         DataTable,
         {
-          rows: admin.agents,
+          rows: agents,
           searchPlaceholder: config.labels.agentSearchPlaceholder,
           searchValue: agentSearch,
-          setSearchValue: setAgentSearch,
+          setSearchValue: onAgentSearchChange,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ jsx6(AgentsTable, { rows: admin.agents, labels: config.labels })
+          children: /* @__PURE__ */ jsx12(AgentsTable, { rows: agents, labels: config.labels })
         }
-      ) : null
+      )
     ] })
-  ] }) });
+  ] });
 };
 function SectionHeading({ title }) {
-  return /* @__PURE__ */ jsx6("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);
@@ -726,12 +1663,12 @@ function ActivityChart(props) {
     ...trimmedPoints.map((point) => point.messageCount),
     1
   );
-  return /* @__PURE__ */ jsx6("div", { className: "rounded-xl border bg-background p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx6("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ jsxs2(
+  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) => /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "flex min-w-0 flex-1 flex-col items-center gap-2",
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx6(
+        /* @__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",
@@ -740,9 +1677,9 @@ function ActivityChart(props) {
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx6("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-          /* @__PURE__ */ jsxs2("p", { className: "text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx12("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"
           ] })
@@ -753,10 +1690,10 @@ function ActivityChart(props) {
   )) }) });
 }
 function DataTable(props) {
-  return /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border bg-background p-5 shadow-sm", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx6(SectionHeading, { title: props.title }),
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx12(SectionHeading, { title: props.title }),
+      /* @__PURE__ */ jsx12(
         Input,
         {
           className: "h-8 w-full max-w-44",
@@ -766,24 +1703,29 @@ function DataTable(props) {
         }
       )
     ] }),
-    props.rows.length === 0 ? /* @__PURE__ */ jsx6("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({
   rows,
-  labels
+  labels,
+  onThreadClick
 }) {
-  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: "rounded-lg border bg-muted/50 p-4",
+      className: cn(
+        "rounded-lg border bg-muted/50 p-4",
+        onThreadClick && "cursor-pointer hover:bg-muted transition-colors"
+      ),
+      onClick: () => onThreadClick?.(thread.threadId),
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx6("p", { className: "font-medium", children: thread.name }),
-            /* @__PURE__ */ jsx6("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: thread.name }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
           ] }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx12(
             Badge,
             {
               variant: thread.status === "archived" ? "secondary" : "default",
@@ -791,16 +1733,16 @@ function ThreadsTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             formatNumber(thread.messageCount),
             " messages"
           ] }),
-          /* @__PURE__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             thread.participantIds.length,
             " participants"
           ] }),
-          /* @__PURE__ */ jsx6("span", { children: formatDate(thread.lastActivityAt) })
+          /* @__PURE__ */ jsx12("span", { children: formatDate(thread.lastActivityAt) })
         ] })
       ]
     },
@@ -811,28 +1753,28 @@ function ParticipantsTable({
   rows,
   labels
 }) {
-  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ jsxs2(
+  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__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx6("p", { className: "font-medium", children: participant.displayName }),
-            /* @__PURE__ */ jsx6("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: participant.displayName }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
           ] }),
-          /* @__PURE__ */ jsx6(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
+          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             formatNumber(participant.messageCount),
             " messages"
           ] }),
-          /* @__PURE__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             formatNumber(participant.threadCount),
             " threads"
           ] }),
-          /* @__PURE__ */ jsx6("span", { children: formatDate(participant.lastActivityAt) })
+          /* @__PURE__ */ jsx12("span", { children: formatDate(participant.lastActivityAt) })
         ] })
       ]
     },
@@ -843,32 +1785,32 @@ function AgentsTable({
   rows,
   labels
 }) {
-  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs2(
+  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__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx6("p", { className: "font-medium", children: agent.displayName }),
-            /* @__PURE__ */ jsx6("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx12("p", { className: "font-medium", children: agent.displayName }),
+            /* @__PURE__ */ jsx12("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
           ] }),
-          /* @__PURE__ */ jsx6(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
+          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__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__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             formatNumber(agent.llmCallCount),
             " LLM calls"
           ] }),
-          /* @__PURE__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             formatNumber(agent.toolCallMessageCount),
             " tool calls"
           ] }),
-          /* @__PURE__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             formatNumber(agent.totalTokens),
             " tokens"
           ] })
@@ -904,15 +1846,1193 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
+
+// src/components/views/ThreadsView.tsx
+import { Search, MessageSquare as MessageSquare2 } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var ThreadsView = ({
+  config,
+  threads,
+  searchValue,
+  onSearchChange,
+  onThreadClick
+}) => {
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx13(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx13(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: config.labels.threadSearchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] }),
+    threads.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx13(MessageSquare2, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ jsx13("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
+        onClick: () => onThreadClick?.(thread.threadId),
+        children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx13("p", { className: "font-medium truncate", children: thread.name }),
+              /* @__PURE__ */ jsx13(
+                Badge,
+                {
+                  variant: thread.status === "archived" ? "secondary" : "default",
+                  className: "shrink-0",
+                  children: thread.status === "archived" ? config.labels.statusArchived : config.labels.statusActive
+                }
+              )
+            ] }),
+            /* @__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: [
+              formatNumber2(thread.messageCount),
+              " messages"
+            ] }),
+            /* @__PURE__ */ jsxs8("p", { children: [
+              thread.participantIds.length,
+              " participants"
+            ] }),
+            /* @__PURE__ */ jsx13("p", { children: formatDate2(thread.lastActivityAt) })
+          ] })
+        ]
+      },
+      thread.threadId
+    )) })
+  ] });
+};
+function formatDate2(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 formatNumber2(value) {
+  return new Intl.NumberFormat().format(value);
+}
+
+// src/components/views/ThreadDetailView.tsx
+import { useCallback as useCallback3, useEffect as useEffect5, useState as useState4 } from "react";
+import {
+  ArrowLeft,
+  Bot as Bot2,
+  ChevronUp as ChevronUp2,
+  Loader2,
+  User,
+  Wrench,
+  Cpu
+} from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var MESSAGES_PAGE_SIZE = 50;
+var ThreadDetailView = ({
+  threadId,
+  config,
+  onBack
+}) => {
+  const [thread, setThread] = useState4(null);
+  const [messages, setMessages] = useState4([]);
+  const [pageInfo, setPageInfo] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(true);
+  const [isLoadingMore, setIsLoadingMore] = useState4(false);
+  const [error, setError] = useState4(null);
+  const fetchOptions = {
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders
+  };
+  const loadInitial = useCallback3(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const [threadData, messagesData] = await Promise.all([
+        fetchThreadDetail(threadId, fetchOptions),
+        fetchThreadMessages(threadId, { limit: MESSAGES_PAGE_SIZE }, fetchOptions)
+      ]);
+      setThread(threadData);
+      setMessages(messagesData.data);
+      setPageInfo(messagesData.pageInfo);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to load thread")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [threadId, config.baseUrl, config.getRequestHeaders]);
+  useEffect5(() => {
+    void loadInitial();
+  }, [loadInitial]);
+  const loadMore = useCallback3(async () => {
+    if (!pageInfo?.hasMoreBefore || !pageInfo.oldestMessageId || isLoadingMore) {
+      return;
+    }
+    setIsLoadingMore(true);
+    try {
+      const older = await fetchThreadMessages(
+        threadId,
+        { limit: MESSAGES_PAGE_SIZE, before: pageInfo.oldestMessageId },
+        fetchOptions
+      );
+      setMessages((prev) => [...older.data, ...prev]);
+      setPageInfo(older.pageInfo);
+    } catch {
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [threadId, pageInfo, isLoadingMore, config.baseUrl, config.getRequestHeaders]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx14(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs9("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-destructive font-medium", children: error.message }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs9(Button, { variant: "outline", onClick: onBack, children: [
+          /* @__PURE__ */ jsx14(ArrowLeft, { className: "mr-2 h-4 w-4" }),
+          "Back"
+        ] }),
+        /* @__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__ */ jsx14(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "mt-1 shrink-0",
+          onClick: onBack,
+          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__ */ jsx14("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
+          /* @__PURE__ */ jsx14(
+            Badge,
+            {
+              variant: thread?.status === "archived" ? "secondary" : "default",
+              children: thread?.status === "archived" ? config.labels.statusArchived : config.labels.statusActive
+            }
+          )
+        ] }),
+        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 ",
+            formatDate3(thread.createdAt)
+          ] }),
+          thread?.updatedAt && /* @__PURE__ */ jsxs9("span", { children: [
+            "Updated ",
+            formatDate3(thread.updatedAt)
+          ] }),
+          thread?.participants && /* @__PURE__ */ jsxs9("span", { children: [
+            thread.participants.length,
+            " participants"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs9("h3", { className: "text-sm font-medium text-muted-foreground", children: [
+        "Messages (",
+        messages.length,
+        pageInfo?.hasMoreBefore ? "+" : "",
+        ")"
+      ] }) }),
+      pageInfo?.hasMoreBefore && /* @__PURE__ */ jsx14("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxs9(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => void loadMore(),
+          disabled: isLoadingMore,
+          children: [
+            isLoadingMore ? /* @__PURE__ */ jsx14(Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx14(ChevronUp2, { className: "mr-2 h-3 w-3" }),
+            "Load older messages"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx14("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ jsx14("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ jsx14(MessageRow, { message }, message.id)) }) })
+    ] })
+  ] });
+};
+function MessageRow({ message }) {
+  const [expanded, setExpanded] = useState4(false);
+  const hasToolCalls = Array.isArray(message.toolCalls) && message.toolCalls.length > 0;
+  const hasReasoning = !!message.reasoning;
+  return /* @__PURE__ */ jsx14("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx14(SenderIcon, { senderType: message.senderType }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx14("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
+        /* @__PURE__ */ jsx14(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
+        message.createdAt && /* @__PURE__ */ jsx14("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
+      ] }),
+      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",
+          {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx14(Wrench, { className: "h-3 w-3" }),
+              message.toolCalls.length,
+              " tool call",
+              message.toolCalls.length > 1 ? "s" : ""
+            ]
+          }
+        ),
+        hasReasoning && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx14(Cpu, { className: "h-3 w-3" }),
+              "Reasoning"
+            ]
+          }
+        ),
+        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 } : {}
+          },
+          null,
+          2
+        ) })
+      ] })
+    ] })
+  ] }) });
+}
+function SenderIcon({ senderType }) {
+  const base = "flex h-7 w-7 shrink-0 items-center justify-center rounded-full";
+  switch (senderType) {
+    case "agent":
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx14(Bot2, { className: "h-3.5 w-3.5" }) });
+    case "user":
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ jsx14(User, { className: "h-3.5 w-3.5" }) });
+    case "tool":
+      return /* @__PURE__ */ jsx14("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx14(Wrench, { className: "h-3.5 w-3.5" }) });
+    default:
+      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) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function formatTimestamp(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/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 jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var CopilotzAdmin = ({
+  config: userConfig,
+  className
+}) => {
+  const config = useMemo3(
+    () => mergeAdminConfig(defaultAdminConfig, userConfig),
+    [userConfig]
+  );
+  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,
+    range: config.initialRange,
+    interval: config.initialInterval,
+    threadSearch: deferredThreadSearch,
+    participantSearch: deferredParticipantSearch,
+    agentSearch: deferredAgentSearch
+  });
+  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 = useCallback8(
+    (page) => navigate({ page }),
+    [navigate]
+  );
+  const handleSidebarRouteNavigate = useCallback8(
+    (r) => navigate(r),
+    [navigate]
+  );
+  const handleThreadClick = useCallback8(
+    (threadId) => navigate({ page: "thread-detail", resourceId: threadId }),
+    [navigate]
+  );
+  const handleBackToThreads = useCallback8(() => navigate({ page: "threads" }), [navigate]);
+  const handleParticipantClick = useCallback8(
+    (id) => navigate({ page: "participant-detail", resourceId: id }),
+    [navigate]
+  );
+  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__ */ 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__ */ 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__ */ jsx22(
+          DashboardView,
+          {
+            config,
+            overview: admin.overview,
+            activity: admin.activity,
+            threads: admin.threads,
+            participants: admin.participants,
+            agents: admin.agents,
+            interval: admin.filters.interval,
+            threadSearch,
+            participantSearch,
+            agentSearch,
+            onThreadSearchChange: setThreadSearch,
+            onParticipantSearchChange: setParticipantSearch,
+            onAgentSearchChange: setAgentSearch,
+            onThreadClick: handleThreadClick
+          }
+        );
+      case "threads":
+        return /* @__PURE__ */ jsx22(
+          ThreadsView,
+          {
+            config,
+            threads: admin.threads,
+            searchValue: threadSearch,
+            onSearchChange: setThreadSearch,
+            onThreadClick: handleThreadClick
+          }
+        );
+      case "thread-detail":
+        return route.resourceId ? /* @__PURE__ */ jsx22(ThreadDetailView, { threadId: route.resourceId, config, onBack: handleBackToThreads }) : null;
+      case "participants":
+        return /* @__PURE__ */ jsx22(
+          ParticipantsView,
+          {
+            config,
+            participants: admin.participants,
+            searchValue: participantSearch,
+            onSearchChange: setParticipantSearch,
+            onParticipantClick: handleParticipantClick
+          }
+        );
+      case "participant-detail":
+        return route.resourceId ? /* @__PURE__ */ jsx22(ParticipantDetailView, { participantId: route.resourceId, config, onBack: handleBackToParticipants }) : null;
+      case "agents":
+        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__ */ jsx22(EventsView, { config });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx22(TooltipProvider, { children: /* @__PURE__ */ jsx22(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: cn(
+        "flex h-[100svh] md:h-screen bg-background w-full overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx22(
+          AdminSidebar,
+          {
+            config,
+            currentPage: sidebarPage,
+            currentRoute: route,
+            onNavigate: handleSidebarNavigate,
+            onNavigateRoute: handleSidebarRouteNavigate,
+            collections,
+            namespace,
+            onNamespaceChange: setNamespace
+          }
+        ),
+        /* @__PURE__ */ jsx22(SidebarInset, { children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full min-h-0", children: [
+          /* @__PURE__ */ jsx22(
+            AdminHeader,
+            {
+              config,
+              currentRoute: route,
+              range: admin.filters.range,
+              interval: admin.filters.interval,
+              onRangeChange: admin.setRange,
+              onIntervalChange: admin.setInterval,
+              onRefresh: () => void admin.refresh(),
+              isLoading: admin.isLoading
+            }
+          ),
+          /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+        ] }) })
+      ]
+    }
+  ) }) });
+};
 export {
   CopilotzAdmin,
+  createCollectionItem,
   defaultAdminConfig,
+  deleteCollectionItem,
   fetchAdminActivity,
   fetchAdminAgents,
   fetchAdminOverview,
   fetchAdminParticipants,
   fetchAdminThreads,
+  fetchCollectionItem,
+  fetchCollectionItems,
+  fetchCollectionNames,
+  fetchParticipantDetail,
+  fetchThreadEvents,
   mergeAdminConfig,
+  updateCollectionItem,
+  updateParticipant,
   useCopilotzAdmin
 };
 //# sourceMappingURL=index.js.map