@copilotz/admin 0.3.5 → 0.3.7

package/dist/index.cjs

@@ -43,13 +43,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/CopilotzAdmin.tsx
-var import_react2 = require("react");
+var import_react3 = require("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
   },
@@ -83,24 +83,33 @@ var defaultAdminConfig = {
     scopeScoped: "Scoped",
     configured: "Configured",
     unconfigured: "Observed only",
-    noResults: "No results"
+    noResults: "No results",
+    eventsTitle: "Events",
+    dashboardTitle: "Dashboard"
   },
   features: {
     showOverview: true,
     showActivity: true,
     showThreads: true,
     showParticipants: true,
-    showAgents: true
+    showAgents: true,
+    showEvents: false
   },
   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;
@@ -121,11 +130,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
   };
 }
 
@@ -195,6 +210,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", {
@@ -233,6 +263,23 @@ 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
+  );
+}
 
 // src/useCopilotzAdmin.ts
 function useCopilotzAdmin(options = {}) {
@@ -358,6 +405,19 @@ function Card({ className, ...props }) {
     }
   );
 }
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -416,10 +476,83 @@ function Button({
   );
 }
 
-// src/components/ui/input.tsx
+// src/components/ui/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function Input({ className, type, ...props }) {
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(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
+var React3 = __toESM(require("react"), 1);
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_lucide_react2 = require("lucide-react");
+
+// src/hooks/use-mobile.ts
+var React = __toESM(require("react"), 1);
+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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
       type,
@@ -435,319 +568,942 @@ function Input({ className, type, ...props }) {
   );
 }
 
-// src/components/ui/badge.tsx
-var import_react_slot2 = require("@radix-ui/react-slot");
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    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"
-    }
+// src/components/ui/sheet.tsx
+var React2 = __toESM(require("react"), 1);
+var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function cleanupBodyStyles() {
+  if (typeof document !== "undefined" && document.body.style.pointerEvents === "none") {
+    document.body.style.pointerEvents = "";
   }
-);
-function Badge({
+}
+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__ */ (0, import_jsx_runtime5.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", open, onOpenChange, ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
   className,
-  variant,
-  asChild = false,
   ...props
 }) {
-  const Comp = asChild ? import_react_slot2.Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Comp,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SheetPrimitive.Overlay,
     {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
+      "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
+      ),
       ...props
     }
   );
 }
-
-// src/components/ui/select.tsx
-var React = __toESM(require("react"), 1);
-var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react = require("lucide-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Select = SelectPrimitive.Root;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.ChevronUp, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4" }) })
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Check, { className: "h-4 w-4" }) })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-// src/CopilotzAdmin.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var CopilotzAdmin = ({
-  config: userConfig,
-  className
-}) => {
-  const config = (0, import_react2.useMemo)(
-    () => mergeAdminConfig(defaultAdminConfig, userConfig),
-    [userConfig]
-  );
-  const [threadSearch, setThreadSearch] = (0, import_react2.useState)("");
-  const [participantSearch, setParticipantSearch] = (0, import_react2.useState)("");
-  const [agentSearch, setAgentSearch] = (0, import_react2.useState)("");
-  const deferredThreadSearch = (0, import_react2.useDeferredValue)(threadSearch);
-  const deferredParticipantSearch = (0, import_react2.useDeferredValue)(participantSearch);
-  const deferredAgentSearch = (0, import_react2.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__ */ (0, import_jsx_runtime5.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      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__ */ (0, import_jsx_runtime5.jsxs)(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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__ */ (0, import_jsx_runtime5.jsx)(
+    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__ */ (0, import_jsx_runtime5.jsx)(
+    SheetPrimitive.Description,
     {
-      label: config.labels.tokensCard,
-      value: admin.overview?.llmTotals.totalTokens ?? 0,
-      detail: `${admin.overview?.llmTotals.totalCalls ?? 0} calls`
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/sidebar.tsx
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
     {
-      label: config.labels.queueCard,
-      value: admin.overview?.queueTotals.pending ?? 0,
-      detail: `${admin.overview?.queueTotals.failed ?? 0} failed`
+      "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
     }
-  ];
-  if (admin.isLoading && !admin.overview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { className: cn("p-8", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardContent, { className: "p-0 text-muted-foreground", children: config.labels.loading }) });
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
   }
-  if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { className: cn("border-destructive/50 bg-destructive/10 p-8", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CardContent, { className: "p-0 space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        Button,
-        {
-          variant: "destructive",
-          onClick: () => void admin.refresh(),
-          children: config.labels.retry
-        }
-      )
-    ] }) });
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      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__ */ (0, import_jsx_runtime6.jsxs)(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
   }
-  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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("space-y-6 text-foreground", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-3", children: [
-          config.branding.logo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl border bg-card shadow-sm", children: config.branding.logo }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-2xl font-semibold tracking-tight", children: config.branding.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: config.branding.subtitle })
-          ] })
-        ] }),
-        config.namespace ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: [
-          "Namespace: ",
-          config.namespace
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(
+              "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__ */ (0, import_jsx_runtime6.jsxs)(
+    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__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.PanelLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+    "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 ? import_react_slot2.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    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__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "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__ */ (0, import_jsx_runtime6.jsx)(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = (0, import_class_variance_authority2.cva)(
+  "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 ? import_react_slot2.Slot : "button";
+  const { isMobile, state } = useSidebar();
+  const button = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TooltipContent,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+
+// src/components/layout/AdminSidebar.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var NAV_ITEMS = [
+  {
+    page: "dashboard",
+    label: "Dashboard",
+    icon: import_lucide_react3.LayoutDashboard
+  },
+  {
+    page: "threads",
+    label: "Threads",
+    icon: import_lucide_react3.MessageSquare,
+    featureKey: "showThreads"
+  },
+  {
+    page: "participants",
+    label: "Participants",
+    icon: import_lucide_react3.Users,
+    featureKey: "showParticipants"
+  },
+  {
+    page: "agents",
+    label: "Agents",
+    icon: import_lucide_react3.Bot,
+    featureKey: "showAgents"
+  },
+  {
+    page: "events",
+    label: "Events",
+    icon: import_lucide_react3.Activity,
+    featureKey: "showEvents"
+  }
+];
+var AdminSidebar = ({
+  config,
+  currentPage,
+  onNavigate
+}) => {
+  const visibleItems = NAV_ITEMS.filter(
+    (item) => !item.featureKey || config.features[item.featureKey]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Sidebar, { collapsible: config.sidebar.collapsible, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3 px-2 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center shrink-0", children: config.branding.logo || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.LayoutDashboard, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col min-w-0 group-data-[collapsible=icon]:hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-semibold truncate", children: config.branding.title }),
+        config.branding.subtitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs text-muted-foreground truncate", children: config.branding.subtitle })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SidebarGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarGroupLabel, { className: "group-data-[collapsible=icon]:hidden", children: "Navigation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarMenu, { children: visibleItems.map((item) => {
+        const Icon2 = item.icon;
+        const label = config.labels[`${item.page}Title`] || item.label;
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          SidebarMenuButton,
+          {
+            isActive: currentPage === item.page,
+            onClick: () => onNavigate(item.page),
+            tooltip: label,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
+            ]
+          }
+        ) }, item.page);
+      }) }) })
+    ] }) }),
+    config.namespace && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-2 py-2 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium uppercase tracking-[0.18em]", children: config.namespace }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarRail, {})
+  ] });
+};
+
+// src/components/layout/AdminHeader.tsx
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/ui/select.tsx
+var React4 = __toESM(require("react"), 1);
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronUp, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { className: "h-4 w-4" }) })
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Check, { className: "h-4 w-4" }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+// src/components/layout/AdminHeader.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PAGE_TITLES = {
+  dashboard: "Dashboard",
+  threads: "Threads",
+  "thread-detail": "Thread Detail",
+  participants: "Participants",
+  agents: "Agents",
+  events: "Events"
+};
+var AdminHeader = ({
+  config,
+  currentPage,
+  range,
+  interval,
+  onRangeChange,
+  onIntervalChange,
+  onRefresh,
+  isLoading
+}) => {
+  const pageTitle = config.labels[`${currentPage}Title`] || PAGE_TITLES[currentPage];
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { className: "py-0 border-b rounded-none relative z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardHeader, { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SidebarTrigger, { className: "-ml-1" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: "Toggle Sidebar" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-sm font-medium ml-2", children: pageTitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+      currentPage === "dashboard" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           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__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           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__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           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__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           Select,
           {
-            value: admin.filters.interval,
-            onValueChange: (v) => admin.setInterval(v),
+            value: interval,
+            onValueChange: (v) => onIntervalChange(v),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectTrigger, { className: "w-[110px] h-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectValue, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SelectContent, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectItem, { value: "hour", children: config.labels.intervalHour }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectItem, { value: "day", children: config.labels.intervalDay })
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "h-7 w-[90px] text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SelectContent, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: "hour", children: config.labels.intervalHour }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: "day", children: config.labels.intervalDay })
               ] })
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           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__ */ (0, import_jsx_runtime9.jsx)(
+              import_lucide_react5.RefreshCw,
+              {
+                className: `h-4 w-4 ${isLoading ? "animate-spin" : ""}`
+              }
+            )
           }
-        ),
-        config.branding.actions
-      ] })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: config.labels.refresh })
+      ] }),
+      config.branding.actions
+    ] })
+  ] }) }) });
+};
+
+// src/components/ui/badge.tsx
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    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 ? import_react_slot3.Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/views/DashboardView.tsx
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-6", children: [
+    isEmpty && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
+    ] }),
+    config.features.showOverview && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionHeading, { title: config.labels.overviewTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          className: "rounded-xl border bg-card p-5 shadow-sm",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
+          ]
+        },
+        card.label
+      )) })
     ] }),
-    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { className: "border-dashed py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
-    ] }) }) : null,
-    config.features.showOverview ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CardContent, { className: "p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
-      ] }) }, card.label)) })
-    ] }) : null,
-    config.features.showActivity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    config.features.showActivity && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionHeading, { title: config.labels.activityTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         ActivityChart,
         {
-          interval: admin.filters.interval,
+          interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
-          points: admin.activity
+          points: activity
         }
       )
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid gap-6 xl:grid-cols-3", children: [
-      config.features.showThreads ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+      config.features.showThreads && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         DataTable,
         {
-          rows: admin.threads,
+          rows: threads,
           searchPlaceholder: config.labels.threadSearchPlaceholder,
           searchValue: threadSearch,
-          setSearchValue: setThreadSearch,
+          setSearchValue: onThreadSearchChange,
           title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThreadsTable, { rows: admin.threads, labels: config.labels })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            ThreadsTable,
+            {
+              rows: threads,
+              labels: config.labels,
+              onThreadClick
+            }
+          )
         }
-      ) : null,
-      config.features.showParticipants ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ),
+      config.features.showParticipants && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         DataTable,
         {
-          rows: admin.participants,
+          rows: participants,
           searchPlaceholder: config.labels.participantSearchPlaceholder,
           searchValue: participantSearch,
-          setSearchValue: setParticipantSearch,
+          setSearchValue: onParticipantSearchChange,
           title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            ParticipantsTable,
-            {
-              rows: admin.participants,
-              labels: config.labels
-            }
-          )
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ParticipantsTable, { rows: participants, labels: config.labels })
         }
-      ) : null,
-      config.features.showAgents ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ),
+      config.features.showAgents && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         DataTable,
         {
-          rows: admin.agents,
+          rows: agents,
           searchPlaceholder: config.labels.agentSearchPlaceholder,
           searchValue: agentSearch,
-          setSearchValue: setAgentSearch,
+          setSearchValue: onAgentSearchChange,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AgentsTable, { rows: admin.agents, labels: config.labels })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentsTable, { rows: agents, labels: config.labels })
         }
-      ) : null
+      )
     ] })
   ] });
 };
 function SectionHeading({ title }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-lg font-semibold tracking-tight", children: title });
 }
 function ActivityChart(props) {
   const trimmedPoints = props.points.slice(-props.maxBars);
@@ -755,23 +1511,23 @@ function ActivityChart(props) {
     ...trimmedPoints.map((point) => point.messageCount),
     1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardContent, { className: "p-5", children: trimmedPoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex min-h-56 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       className: "flex min-w-0 flex-1 flex-col items-center gap-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-40 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
-            className: "w-full rounded-md bg-primary",
+            className: "w-full rounded-md bg-primary transition-all",
             style: {
               height: `${Math.max(point.messageCount / maxMessages * 100, 8)}%`
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
             formatNumber(point.messageCount),
             " msg"
           ] })
@@ -779,40 +1535,45 @@ function ActivityChart(props) {
       ]
     },
     point.bucket
-  )) }) }) });
+  )) }) });
 }
 function DataTable(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CardContent, { className: "p-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SectionHeading, { title: props.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SectionHeading, { title: props.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Input,
         {
-          className: "w-full max-w-44 h-8",
+          className: "h-8 w-full max-w-44",
           onChange: (event) => props.setSearchValue(event.target.value),
           placeholder: props.searchPlaceholder,
           value: props.searchValue
         }
       )
     ] }),
-    props.rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
-  ] }) });
+    props.rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
+  ] });
 }
 function ThreadsTable({
   rows,
-  labels
+  labels,
+  onThreadClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-medium", children: thread.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: thread.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Badge,
             {
               variant: thread.status === "archived" ? "secondary" : "default",
@@ -820,16 +1581,16 @@ function ThreadsTable({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(thread.messageCount),
             " messages"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             thread.participantIds.length,
             " participants"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: formatDate(thread.lastActivityAt) })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: formatDate(thread.lastActivityAt) })
         ] })
       ]
     },
@@ -840,28 +1601,28 @@ function ParticipantsTable({
   rows,
   labels
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       className: "rounded-lg border bg-muted/50 p-4",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-medium", children: participant.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: participant.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(participant.messageCount),
             " messages"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(participant.threadCount),
             " threads"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: formatDate(participant.lastActivityAt) })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: formatDate(participant.lastActivityAt) })
         ] })
       ]
     },
@@ -872,32 +1633,32 @@ function AgentsTable({
   rows,
   labels
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       className: "rounded-lg border bg-muted/50 p-4",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-medium", children: agent.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-xs text-muted-foreground truncate", children: agent.description ?? agent.agentId })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: agent.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(agent.messageCount),
             " messages"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(agent.llmCallCount),
             " LLM calls"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(agent.toolCallMessageCount),
             " tool calls"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
             formatNumber(agent.totalTokens),
             " tokens"
           ] })
@@ -933,6 +1694,476 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
+
+// src/components/views/ThreadsView.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ThreadsView = ({
+  config,
+  threads,
+  searchValue,
+  onSearchChange,
+  onThreadClick
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Input,
+        {
+          className: "pl-9",
+          placeholder: config.labels.threadSearchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] }),
+    threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.MessageSquare, { className: "mx-auto h-8 w-8 text-muted-foreground/50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-3 text-sm text-muted-foreground", children: searchValue ? config.labels.noResults : config.labels.emptyDescription })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        className: "flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50 cursor-pointer",
+        onClick: () => onThreadClick?.(thread.threadId),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-medium truncate", children: thread.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Badge,
+                {
+                  variant: thread.status === "archived" ? "secondary" : "default",
+                  className: "shrink-0",
+                  children: thread.status === "archived" ? config.labels.statusArchived : config.labels.statusActive
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-sm text-muted-foreground truncate", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-right text-xs text-muted-foreground shrink-0 space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+              formatNumber2(thread.messageCount),
+              " messages"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+              thread.participantIds.length,
+              " participants"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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
+var import_react2 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MESSAGES_PAGE_SIZE = 50;
+var ThreadDetailView = ({
+  threadId,
+  config,
+  onBack
+}) => {
+  const [thread, setThread] = (0, import_react2.useState)(null);
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const [pageInfo, setPageInfo] = (0, import_react2.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const fetchOptions = {
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders
+  };
+  const loadInitial = (0, import_react2.useCallback)(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]);
+  (0, import_react2.useEffect)(() => {
+    void loadInitial();
+  }, [loadInitial]);
+  const loadMore = (0, import_react2.useCallback)(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__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-4 py-10 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-destructive font-medium", children: error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button, { variant: "outline", onClick: onBack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+          "Back"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "destructive", onClick: () => void loadInitial(), children: config.labels.retry })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "mt-1 shrink-0",
+          onClick: onBack,
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ArrowLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-xl font-semibold truncate", children: thread?.name ?? threadId }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Badge,
+            {
+              variant: thread?.status === "archived" ? "secondary" : "default",
+              children: thread?.status === "archived" ? config.labels.statusArchived : config.labels.statusActive
+            }
+          )
+        ] }),
+        thread?.summary && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: thread.summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-2 flex flex-wrap gap-4 text-xs text-muted-foreground", children: [
+          thread?.createdAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+            "Created ",
+            formatDate3(thread.createdAt)
+          ] }),
+          thread?.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+            "Updated ",
+            formatDate3(thread.updatedAt)
+          ] }),
+          thread?.participants && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+            thread.participants.length,
+            " participants"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h3", { className: "text-sm font-medium text-muted-foreground", children: [
+        "Messages (",
+        messages.length,
+        pageInfo?.hasMoreBefore ? "+" : "",
+        ")"
+      ] }) }),
+      pageInfo?.hasMoreBefore && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => void loadMore(),
+          disabled: isLoadingMore,
+          children: [
+            isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Loader2, { className: "mr-2 h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronUp, { className: "mr-2 h-3 w-3" }),
+            "Load older messages"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border bg-card", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No messages in this thread yet." }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "divide-y", children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageRow, { message }, message.id)) }) })
+    ] })
+  ] });
+};
+function MessageRow({ message }) {
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const hasToolCalls = Array.isArray(message.toolCalls) && message.toolCalls.length > 0;
+  const hasReasoning = !!message.reasoning;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SenderIcon, { senderType: message.senderType }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: message.senderId ?? message.senderUserId ?? message.senderType }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: message.senderType }),
+        message.createdAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground", children: formatTimestamp(message.createdAt) })
+      ] }),
+      message.content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-sm whitespace-pre-wrap break-words", children: message.content }),
+      (hasToolCalls || hasReasoning) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-2 space-y-2", children: [
+        hasToolCalls && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Wrench, { className: "h-3 w-3" }),
+              message.toolCalls.length,
+              " tool call",
+              message.toolCalls.length > 1 ? "s" : ""
+            ]
+          }
+        ),
+        hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Cpu, { className: "h-3 w-3" }),
+              "Reasoning"
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "mt-2 rounded-md bg-muted p-3 text-xs overflow-auto max-h-60", children: JSON.stringify(
+          {
+            ...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__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-primary/10 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Bot, { className: "h-3.5 w-3.5" }) });
+    case "user":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-secondary text-secondary-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.User, { className: "h-3.5 w-3.5" }) });
+    case "tool":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Wrench, { className: "h-3.5 w-3.5" }) });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(base, "bg-muted text-muted-foreground"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Cpu, { className: "h-3.5 w-3.5" }) });
+  }
+}
+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/CopilotzAdmin.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CopilotzAdmin = ({
+  config: userConfig,
+  className
+}) => {
+  const config = (0, import_react3.useMemo)(
+    () => mergeAdminConfig(defaultAdminConfig, userConfig),
+    [userConfig]
+  );
+  const [route, setRoute] = (0, import_react3.useState)({ page: config.defaultPage });
+  const [threadSearch, setThreadSearch] = (0, import_react3.useState)("");
+  const [participantSearch, setParticipantSearch] = (0, import_react3.useState)("");
+  const [agentSearch, setAgentSearch] = (0, import_react3.useState)("");
+  const deferredThreadSearch = (0, import_react3.useDeferredValue)(threadSearch);
+  const deferredParticipantSearch = (0, import_react3.useDeferredValue)(participantSearch);
+  const deferredAgentSearch = (0, import_react3.useDeferredValue)(agentSearch);
+  const admin = useCopilotzAdmin({
+    baseUrl: config.baseUrl,
+    getRequestHeaders: config.getRequestHeaders,
+    namespace: config.namespace,
+    range: config.initialRange,
+    interval: config.initialInterval,
+    threadSearch: deferredThreadSearch,
+    participantSearch: deferredParticipantSearch,
+    agentSearch: deferredAgentSearch
+  });
+  const navigate = (0, import_react3.useCallback)(
+    (next) => {
+      setRoute(next);
+      config.onNavigate?.(next);
+    },
+    [config]
+  );
+  const handleSidebarNavigate = (0, import_react3.useCallback)(
+    (page) => navigate({ page }),
+    [navigate]
+  );
+  const handleThreadClick = (0, import_react3.useCallback)(
+    (threadId) => navigate({ page: "thread-detail", resourceId: threadId }),
+    [navigate]
+  );
+  const handleBackToThreads = (0, import_react3.useCallback)(
+    () => navigate({ page: "threads" }),
+    [navigate]
+  );
+  const sidebarPage = route.page === "thread-detail" ? "threads" : route.page;
+  if (admin.isLoading && !admin.overview) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Card, { className: cn("border-border", className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardContent, { className: "text-muted-foreground flex items-center justify-center min-h-[200px]", children: config.labels.loading }) });
+  }
+  if (admin.error && !admin.overview) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Card,
+      {
+        className: cn("border-destructive/50 bg-destructive/10", className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "destructive",
+              onClick: () => void admin.refresh(),
+              children: config.labels.retry
+            }
+          )
+        ] })
+      }
+    );
+  }
+  const renderCurrentView = () => {
+    switch (route.page) {
+      case "dashboard":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          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__ */ (0, import_jsx_runtime14.jsx)(
+          ThreadsView,
+          {
+            config,
+            threads: admin.threads,
+            searchValue: threadSearch,
+            onSearchChange: setThreadSearch,
+            onThreadClick: handleThreadClick
+          }
+        );
+      case "thread-detail":
+        return route.resourceId ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          ThreadDetailView,
+          {
+            threadId: route.resourceId,
+            config,
+            onBack: handleBackToThreads
+          }
+        ) : null;
+      case "participants":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.participantsTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "Detailed participant management coming soon." })
+        ] });
+      case "agents":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.agentsTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "Agent configuration management coming soon." })
+        ] });
+      case "events":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold", children: config.labels.eventsTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: "Event inspector coming soon." })
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SidebarProvider, { defaultOpen: config.sidebar.defaultOpen, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex h-[100svh] md:h-screen bg-background w-full overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          AdminSidebar,
+          {
+            config,
+            currentPage: sidebarPage,
+            onNavigate: handleSidebarNavigate
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            AdminHeader,
+            {
+              config,
+              currentPage: route.page,
+              range: admin.filters.range,
+              interval: admin.filters.interval,
+              onRangeChange: admin.setRange,
+              onIntervalChange: admin.setInterval,
+              onRefresh: () => void admin.refresh(),
+              isLoading: admin.isLoading
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-1 overflow-auto p-6", children: renderCurrentView() })
+        ] }) })
+      ]
+    }
+  ) }) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CopilotzAdmin,