@copilotz/admin 0.3.4 → 0.3.6

package/dist/index.js

@@ -300,8 +300,212 @@ function useCopilotzAdmin(options = {}) {
   ]);
 }
 
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/card.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/input.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/badge.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "span";
+  return /* @__PURE__ */ jsx4(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/select.tsx
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus:ring-2 focus:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      position === "popper" && "translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx5(ChevronUp, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx5(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx5(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx5(ChevronDown, { className: "h-4 w-4" }) })
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx5(Check, { className: "h-4 w-4" }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
 // src/CopilotzAdmin.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var CopilotzAdmin = ({
   config: userConfig,
   className
@@ -354,112 +558,115 @@ var CopilotzAdmin = ({
     }
   ];
   if (admin.isLoading && !admin.overview) {
-    return /* @__PURE__ */ jsx("div", { className: joinClassNames("rounded-3xl border border-slate-200 bg-white p-8 text-slate-700 shadow-sm", className), children: config.labels.loading });
+    return /* @__PURE__ */ jsx6(Card, { className: cn("border-border", className), children: /* @__PURE__ */ jsx6(CardContent, { className: "text-muted-foreground", children: config.labels.loading }) });
   }
   if (admin.error && !admin.overview) {
-    return /* @__PURE__ */ jsxs("div", { className: joinClassNames("rounded-3xl border border-rose-200 bg-rose-50 p-8 text-rose-700 shadow-sm", className), children: [
-      /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: admin.error.message }),
-      /* @__PURE__ */ jsx(
-        "button",
+    return /* @__PURE__ */ jsx6(Card, { className: cn("border-destructive/50 bg-destructive/10", className), children: /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx6("p", { className: "text-base font-semibold text-destructive", children: admin.error.message }),
+      /* @__PURE__ */ jsx6(
+        Button,
         {
-          className: "mt-4 rounded-xl bg-rose-600 px-4 py-2 text-sm font-medium text-white",
+          variant: "destructive",
           onClick: () => void admin.refresh(),
-          type: "button",
           children: config.labels.retry
         }
       )
-    ] });
+    ] }) });
   }
   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__ */ jsxs("div", { className: joinClassNames("space-y-6 rounded-[28px] border border-slate-200 bg-[linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] p-6 text-slate-900 shadow-sm", className), children: [
-    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          config.branding.logo ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white shadow-sm", children: config.branding.logo }) : null,
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: config.branding.title }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: config.branding.subtitle })
+  return /* @__PURE__ */ jsx6(Card, { className: cn("gap-0 overflow-hidden py-0", className), children: /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+          config.branding.logo ? /* @__PURE__ */ jsx6("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl border bg-background shadow-sm", children: config.branding.logo }) : null,
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-semibold tracking-tight", children: config.branding.title }),
+            /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: config.branding.subtitle })
           ] })
         ] }),
-        config.namespace ? /* @__PURE__ */ jsxs("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-slate-400", children: [
+        config.namespace ? /* @__PURE__ */ jsxs2("p", { className: "text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground", children: [
           "Namespace: ",
           config.namespace
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          RangeButton,
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx6(
+          Button,
           {
-            active: admin.filters.range === "24h",
-            label: config.labels.range24h,
-            onClick: () => admin.setRange("24h")
+            variant: admin.filters.range === "24h" ? "default" : "outline",
+            size: "sm",
+            onClick: () => admin.setRange("24h"),
+            children: config.labels.range24h
           }
         ),
-        /* @__PURE__ */ jsx(
-          RangeButton,
+        /* @__PURE__ */ jsx6(
+          Button,
           {
-            active: admin.filters.range === "7d",
-            label: config.labels.range7d,
-            onClick: () => admin.setRange("7d")
+            variant: admin.filters.range === "7d" ? "default" : "outline",
+            size: "sm",
+            onClick: () => admin.setRange("7d"),
+            children: config.labels.range7d
           }
         ),
-        /* @__PURE__ */ jsx(
-          RangeButton,
+        /* @__PURE__ */ jsx6(
+          Button,
           {
-            active: admin.filters.range === "30d",
-            label: config.labels.range30d,
-            onClick: () => admin.setRange("30d")
+            variant: admin.filters.range === "30d" ? "default" : "outline",
+            size: "sm",
+            onClick: () => admin.setRange("30d"),
+            children: config.labels.range30d
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "select",
+        /* @__PURE__ */ jsxs2(
+          Select,
           {
-            className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm",
-            onChange: (event) => admin.setInterval(event.target.value),
             value: admin.filters.interval,
+            onValueChange: (v) => admin.setInterval(v),
             children: [
-              /* @__PURE__ */ jsx("option", { value: "hour", children: config.labels.intervalHour }),
-              /* @__PURE__ */ jsx("option", { value: "day", children: config.labels.intervalDay })
+              /* @__PURE__ */ jsx6(SelectTrigger, { className: "h-8 w-[110px]", children: /* @__PURE__ */ jsx6(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs2(SelectContent, { children: [
+                /* @__PURE__ */ jsx6(SelectItem, { value: "hour", children: config.labels.intervalHour }),
+                /* @__PURE__ */ jsx6(SelectItem, { value: "day", children: config.labels.intervalDay })
+              ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx6(
+          Button,
           {
-            className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700",
+            variant: "outline",
+            size: "sm",
             onClick: () => void admin.refresh(),
-            type: "button",
             children: config.labels.refresh
           }
         ),
         config.branding.actions
       ] })
     ] }),
-    isEmpty ? /* @__PURE__ */ jsxs("section", { className: "rounded-3xl border border-dashed border-slate-300 bg-white/70 p-10 text-center", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
-      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-slate-500", children: config.labels.emptyDescription })
+    isEmpty ? /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-dashed p-10 text-center", children: [
+      /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold", children: config.labels.emptyTitle }),
+      /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-muted-foreground", children: config.labels.emptyDescription })
     ] }) : null,
-    config.features.showOverview ? /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(SectionHeading, { title: config.labels.overviewTitle }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs(
+    config.features.showOverview ? /* @__PURE__ */ jsxs2("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx6(SectionHeading, { title: config.labels.overviewTitle }),
+      /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5", children: cards.map((card) => /* @__PURE__ */ jsxs2(
         "div",
         {
-          className: "rounded-3xl border border-slate-200 bg-white p-5 shadow-sm",
+          className: "rounded-xl border bg-background p-5 shadow-sm",
           children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-slate-500", children: card.label }),
-            /* @__PURE__ */ jsx("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
-            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-slate-400", children: card.detail })
+            /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium text-muted-foreground", children: card.label }),
+            /* @__PURE__ */ jsx6("p", { className: "mt-3 text-3xl font-semibold tracking-tight", children: formatNumber(card.value) }),
+            /* @__PURE__ */ jsx6("p", { className: "mt-2 text-xs text-muted-foreground", children: card.detail })
           ]
         },
         card.label
       )) })
     ] }) : null,
-    config.features.showActivity ? /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(SectionHeading, { title: config.labels.activityTitle }),
-      /* @__PURE__ */ jsx(
+    config.features.showActivity ? /* @__PURE__ */ jsxs2("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx6(SectionHeading, { title: config.labels.activityTitle }),
+      /* @__PURE__ */ jsx6(
         ActivityChart,
         {
-          compact: config.ui.compact,
           interval: admin.filters.interval,
           labels: config.labels,
           maxBars: config.ui.maxActivityBars,
@@ -467,8 +674,8 @@ var CopilotzAdmin = ({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-3", children: [
-      config.features.showThreads ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs2("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+      config.features.showThreads ? /* @__PURE__ */ jsx6(
         DataTable,
         {
           rows: admin.threads,
@@ -476,10 +683,10 @@ var CopilotzAdmin = ({
           searchValue: threadSearch,
           setSearchValue: setThreadSearch,
           title: config.labels.threadsTitle,
-          children: /* @__PURE__ */ jsx(ThreadsTable, { rows: admin.threads, labels: config.labels })
+          children: /* @__PURE__ */ jsx6(ThreadsTable, { rows: admin.threads, labels: config.labels })
         }
       ) : null,
-      config.features.showParticipants ? /* @__PURE__ */ jsx(
+      config.features.showParticipants ? /* @__PURE__ */ jsx6(
         DataTable,
         {
           rows: admin.participants,
@@ -487,10 +694,16 @@ var CopilotzAdmin = ({
           searchValue: participantSearch,
           setSearchValue: setParticipantSearch,
           title: config.labels.participantsTitle,
-          children: /* @__PURE__ */ jsx(ParticipantsTable, { rows: admin.participants, labels: config.labels })
+          children: /* @__PURE__ */ jsx6(
+            ParticipantsTable,
+            {
+              rows: admin.participants,
+              labels: config.labels
+            }
+          )
         }
       ) : null,
-      config.features.showAgents ? /* @__PURE__ */ jsx(
+      config.features.showAgents ? /* @__PURE__ */ jsx6(
         DataTable,
         {
           rows: admin.agents,
@@ -498,145 +711,184 @@ var CopilotzAdmin = ({
           searchValue: agentSearch,
           setSearchValue: setAgentSearch,
           title: config.labels.agentsTitle,
-          children: /* @__PURE__ */ jsx(AgentsTable, { rows: admin.agents, labels: config.labels })
+          children: /* @__PURE__ */ jsx6(AgentsTable, { rows: admin.agents, labels: config.labels })
         }
       ) : null
     ] })
-  ] });
+  ] }) });
 };
 function SectionHeading({ title }) {
-  return /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title });
-}
-function RangeButton({ active, label, onClick }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: joinClassNames(
-        "rounded-xl px-3 py-2 text-sm font-medium transition",
-        active ? "bg-slate-900 text-white" : "border border-slate-200 bg-white text-slate-600"
-      ),
-      onClick,
-      type: "button",
-      children: label
-    }
-  );
+  return /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold tracking-tight", children: title });
 }
 function ActivityChart(props) {
   const trimmedPoints = props.points.slice(-props.maxBars);
-  const maxMessages = Math.max(...trimmedPoints.map((point) => point.messageCount), 1);
-  return /* @__PURE__ */ jsx("div", { className: "rounded-3xl border border-slate-200 bg-white p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: props.labels.noResults }) : /* @__PURE__ */ jsx("div", { className: "flex min-h-56 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex h-40 w-full items-end rounded-2xl bg-slate-100/80 px-1 pb-1", children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "w-full rounded-xl bg-slate-900",
-        style: {
-          height: `${Math.max(point.messageCount / maxMessages * 100, 8)}%`
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-slate-700", children: formatBucket(point.bucket, props.interval) }),
-      /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-slate-400", children: [
-        formatNumber(point.messageCount),
-        " msg"
-      ] })
-    ] })
-  ] }, point.bucket)) }) });
+  const maxMessages = Math.max(
+    ...trimmedPoints.map((point) => point.messageCount),
+    1
+  );
+  return /* @__PURE__ */ jsx6("div", { className: "rounded-xl border bg-background p-5 shadow-sm", children: trimmedPoints.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: props.labels.noResults }) : /* @__PURE__ */ jsx6("div", { className: "flex min-h-48 items-end gap-2", children: trimmedPoints.map((point) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex min-w-0 flex-1 flex-col items-center gap-2",
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex h-36 w-full items-end rounded-lg bg-muted px-1 pb-1", children: /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "w-full rounded-md bg-primary transition-all",
+            style: {
+              height: `${Math.max(point.messageCount / maxMessages * 100, 8)}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx6("p", { className: "text-xs font-medium", children: formatBucket(point.bucket, props.interval) }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-[11px] text-muted-foreground", children: [
+            formatNumber(point.messageCount),
+            " msg"
+          ] })
+        ] })
+      ]
+    },
+    point.bucket
+  )) }) });
 }
 function DataTable(props) {
-  return /* @__PURE__ */ jsxs("section", { className: "rounded-3xl border border-slate-200 bg-white p-5 shadow-sm", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx(SectionHeading, { title: props.title }),
-      /* @__PURE__ */ jsx(
-        "input",
+  return /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border bg-background p-5 shadow-sm", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx6(SectionHeading, { title: props.title }),
+      /* @__PURE__ */ jsx6(
+        Input,
         {
-          className: "w-full max-w-44 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none ring-0",
+          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__ */ jsx("p", { className: "text-sm text-slate-500", children: "No results" }) : props.children
+    props.rows.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "No results" }) : props.children
   ] });
 }
-function ThreadsTable({ rows, labels }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-900", children: thread.name }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "rounded-full bg-slate-900 px-2.5 py-1 text-[11px] font-semibold text-white", children: thread.status === "archived" ? labels.statusArchived : labels.statusActive })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-slate-500", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(thread.messageCount),
-        " messages"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        thread.participantIds.length,
-        " participants"
-      ] }),
-      /* @__PURE__ */ jsx("span", { children: formatDate(thread.lastActivityAt) })
-    ] })
-  ] }, thread.threadId)) });
+function ThreadsTable({
+  rows,
+  labels
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rows.map((thread) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "rounded-lg border bg-muted/50 p-4",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx6("p", { className: "font-medium", children: thread.name }),
+            /* @__PURE__ */ jsx6("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: thread.summary ?? thread.lastMessagePreview ?? "No summary yet" })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            Badge,
+            {
+              variant: thread.status === "archived" ? "secondary" : "default",
+              children: thread.status === "archived" ? labels.statusArchived : labels.statusActive
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(thread.messageCount),
+            " messages"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            thread.participantIds.length,
+            " participants"
+          ] }),
+          /* @__PURE__ */ jsx6("span", { children: formatDate(thread.lastActivityAt) })
+        ] })
+      ]
+    },
+    thread.threadId
+  )) });
 }
-function ParticipantsTable({ rows, labels }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-900", children: participant.displayName }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-slate-400", children: participant.participantType })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-slate-600", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-slate-500", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(participant.messageCount),
-        " messages"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(participant.threadCount),
-        " threads"
-      ] }),
-      /* @__PURE__ */ jsx("span", { children: formatDate(participant.lastActivityAt) })
-    ] })
-  ] }, `${participant.namespace}:${participant.externalId}`)) });
+function ParticipantsTable({
+  rows,
+  labels
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rows.map((participant) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "rounded-lg border bg-muted/50 p-4",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx6("p", { className: "font-medium", children: participant.displayName }),
+            /* @__PURE__ */ jsx6("p", { className: "mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground", children: participant.participantType })
+          ] }),
+          /* @__PURE__ */ jsx6(Badge, { variant: "outline", children: participant.isGlobal ? labels.scopeGlobal : labels.scopeScoped })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(participant.messageCount),
+            " messages"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(participant.threadCount),
+            " threads"
+          ] }),
+          /* @__PURE__ */ jsx6("span", { children: formatDate(participant.lastActivityAt) })
+        ] })
+      ]
+    },
+    `${participant.namespace}:${participant.externalId}`
+  )) });
 }
-function AgentsTable({ rows, labels }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/70 p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-900", children: agent.displayName }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500", children: agent.description ?? agent.agentId })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-slate-600", children: agent.isConfigured ? labels.configured : labels.unconfigured })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-slate-500", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(agent.messageCount),
-        " messages"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(agent.llmCallCount),
-        " LLM calls"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(agent.toolCallMessageCount),
-        " tool calls"
-      ] }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        formatNumber(agent.totalTokens),
-        " tokens"
-      ] })
-    ] })
-  ] }, `${agent.namespace}:${agent.agentId}`)) });
+function AgentsTable({
+  rows,
+  labels
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: "space-y-3", children: rows.map((agent) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "rounded-lg border bg-muted/50 p-4",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx6("p", { className: "font-medium", children: agent.displayName }),
+            /* @__PURE__ */ jsx6("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: agent.description ?? agent.agentId })
+          ] }),
+          /* @__PURE__ */ jsx6(Badge, { variant: "outline", children: agent.isConfigured ? labels.configured : labels.unconfigured })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(agent.messageCount),
+            " messages"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(agent.llmCallCount),
+            " LLM calls"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(agent.toolCallMessageCount),
+            " tool calls"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            formatNumber(agent.totalTokens),
+            " tokens"
+          ] })
+        ] })
+      ]
+    },
+    `${agent.namespace}:${agent.agentId}`
+  )) });
 }
 function formatBucket(bucket, interval) {
   const date = new Date(bucket);
   if (Number.isNaN(date.getTime())) return bucket;
-  return interval === "hour" ? date.toLocaleString(void 0, { hour: "numeric", month: "short", day: "numeric" }) : date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  return interval === "hour" ? date.toLocaleString(void 0, {
+    hour: "numeric",
+    month: "short",
+    day: "numeric"
+  }) : date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
 }
 function formatDate(value) {
   if (!value) return "No activity";
@@ -652,9 +904,6 @@ function formatDate(value) {
 function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
-function joinClassNames(...values) {
-  return values.filter(Boolean).join(" ");
-}
 export {
   CopilotzAdmin,
   defaultAdminConfig,