@kite-copilot/chat-panel 0.1.2 → 0.2.1

package/dist/index.js

@@ -1,2738 +1,68 @@
-'use strict';
-
-var React4 = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-var lucideReact = require('lucide-react');
-var framerMotion = require('framer-motion');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
-var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
-
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "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 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
-    }
-  );
-}
-var buttonVariants = classVarianceAuthority.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 hover:bg-primary/90",
-        destructive: "bg-destructive text-white 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 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",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var ScrollArea = React4__namespace.forwardRef(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ScrollAreaPrimitive__namespace.Root,
-    {
-      "data-slot": "scroll-area",
-      className: cn("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ScrollAreaPrimitive__namespace.Viewport,
-          {
-            ref,
-            "data-slot": "scroll-area-viewport",
-            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
-      ]
-    }
-  );
-});
-ScrollArea.displayName = "ScrollArea";
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
-    {
-      "data-slot": "scroll-area-scrollbar",
-      orientation,
-      className: cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "bg-border relative flex-1 rounded-full"
-        }
-      )
-    }
-  );
-}
-function AssistantActivity({
-  phase,
-  progressSteps = []
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 rounded-lg bg-muted/40 px-3 py-3 text-xs text-muted-foreground transition-colors", children: [
-    phase === "thinking" && progressSteps.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Thinking\u2026" })
-    ] }),
-    phase === "searching" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 animate-in fade-in-0 duration-300", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-3.5 w-3.5 opacity-70" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Searching across pages\u2026" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "ml-6 list-disc space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "opacity-90", children: "Checking recent changes" }),
-        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "opacity-90", children: "Scanning documentation" }),
-        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "opacity-90", children: "Summarizing relevant sections" })
-      ] })
-    ] }),
-    (phase === "thinking" || phase === "executing" || phase === "responding") && progressSteps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 animate-in fade-in-0 duration-200", children: [
-      progressSteps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `flex items-center gap-2 transition-opacity duration-200 ${step.completed ? "opacity-60" : "opacity-100"}`,
-          children: [
-            step.completed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin flex-shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: step.completed ? "line-through" : "", children: step.message })
-          ]
-        },
-        index
-      )),
-      phase === "responding" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 opacity-100 animate-in fade-in-0 duration-200", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin flex-shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preparing response..." })
-      ] })
-    ] })
-  ] });
-}
-function GuideCursor({ x, y, visible, onClick = false }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: visible && /* @__PURE__ */ jsxRuntime.jsx(
-    framerMotion.motion.div,
-    {
-      className: "fixed pointer-events-none z-[9999]",
-      initial: { opacity: 0, scale: 0.5 },
-      animate: {
-        opacity: 1,
-        scale: 1,
-        x,
-        y
-      },
-      exit: { opacity: 0, scale: 0.5 },
-      transition: {
-        type: "spring",
-        stiffness: 200,
-        damping: 20
-      },
-      style: {
-        left: 0,
-        top: 0
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          width: "32",
-          height: "32",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M3 3L10.07 19.97L12.58 12.58L19.97 10.07L3 3Z",
-              fill: "#C4B5FD"
-            }
-          )
-        }
-      )
-    }
-  ) });
-}
-function useGuideCursor() {
-  const [cursorState, setCursorState] = React4__namespace.useState({
-    x: 0,
-    y: 0,
-    visible: false,
-    onClick: false
-  });
-  const moveTo = React4__namespace.useCallback((target) => {
-    const element = document.querySelector(target.selector);
-    if (element) {
-      const rect = element.getBoundingClientRect();
-      const offsetX = target.offset?.x || 0;
-      const offsetY = target.offset?.y || 0;
-      setCursorState({
-        x: rect.left + rect.width / 2 + offsetX,
-        y: rect.top + rect.height / 2 + offsetY,
-        visible: true,
-        onClick: target.onClick || false
-      });
-    }
-  }, []);
-  const hide = React4__namespace.useCallback(() => {
-    setCursorState((prev) => ({ ...prev, visible: false }));
-  }, []);
-  const show = React4__namespace.useCallback(() => {
-    setCursorState((prev) => ({ ...prev, visible: true }));
-  }, []);
-  return {
-    cursorState,
-    moveTo,
-    hide,
-    show
-  };
-}
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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 CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-action",
-      className: cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
-function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
-      ...props
-    }
-  );
-}
-var formatDate = (dateString) => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+import {
+  ApiKeyList,
+  AssistantActivity,
+  AssistantSearchSummary,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChatPanel,
+  ChatPanelWithToggle,
+  CustomerCard,
+  CustomerList,
+  DashboardStatsCard,
+  DataRenderer,
+  GuideCursor,
+  HelpButton,
+  Input,
+  PanelToggle,
+  ScrollArea,
+  ScrollBar,
+  SessionList,
+  SubscriptionCard,
+  SubscriptionList,
+  TopCustomersList,
+  TransactionList,
+  buttonVariants,
+  cn,
+  createKiteChat,
+  useGuideCursor
+} from "./chunk-R73Y24JS.js";
+export {
+  ApiKeyList,
+  AssistantActivity,
+  AssistantSearchSummary,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChatPanel,
+  ChatPanelWithToggle,
+  CustomerCard,
+  CustomerList,
+  DashboardStatsCard,
+  DataRenderer,
+  GuideCursor,
+  HelpButton,
+  Input,
+  PanelToggle,
+  ScrollArea,
+  ScrollBar,
+  SessionList,
+  SubscriptionCard,
+  SubscriptionList,
+  TopCustomersList,
+  TransactionList,
+  buttonVariants,
+  cn,
+  createKiteChat,
+  useGuideCursor
 };
-var formatCurrency = (amount, currency = "USD") => {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency
-  }).format(amount);
-};
-var getPlanIcon = (plan) => {
-  switch (plan) {
-    case "Enterprise":
-      return lucideReact.Crown;
-    case "Professional":
-      return lucideReact.Zap;
-    default:
-      return lucideReact.Activity;
-  }
-};
-var getPlanColor = (plan) => {
-  switch (plan) {
-    case "Enterprise":
-      return "bg-purple-50 text-purple-700 border-purple-200";
-    case "Professional":
-      return "bg-blue-50 text-blue-700 border-blue-200";
-    default:
-      return "bg-gray-50 text-gray-700 border-gray-200";
-  }
-};
-function StatusBadge({ status, type = "default" }) {
-  const getConfig = () => {
-    const statusLower = status.toLowerCase();
-    if (type === "transaction") {
-      switch (statusLower) {
-        case "paid":
-          return { color: "bg-emerald-50 text-emerald-700 border-emerald-200", icon: lucideReact.CheckCircle2 };
-        case "failed":
-          return { color: "bg-red-50 text-red-700 border-red-200", icon: lucideReact.XCircle };
-        case "pending":
-          return { color: "bg-amber-50 text-amber-700 border-amber-200", icon: lucideReact.Clock };
-        case "refunded":
-          return { color: "bg-slate-50 text-slate-700 border-slate-200", icon: lucideReact.RefreshCw };
-        default:
-          return { color: "bg-gray-50 text-gray-700 border-gray-200", icon: lucideReact.AlertCircle };
-      }
-    }
-    if (type === "subscription") {
-      switch (statusLower) {
-        case "active":
-          return { color: "bg-emerald-50 text-emerald-700 border-emerald-200", icon: lucideReact.CheckCircle2 };
-        case "cancelled":
-          return { color: "bg-slate-50 text-slate-700 border-slate-200", icon: lucideReact.XCircle };
-        case "past_due":
-          return { color: "bg-red-50 text-red-700 border-red-200", icon: lucideReact.AlertCircle };
-        case "trialing":
-          return { color: "bg-blue-50 text-blue-700 border-blue-200", icon: lucideReact.Clock };
-        default:
-          return { color: "bg-gray-50 text-gray-700 border-gray-200", icon: lucideReact.AlertCircle };
-      }
-    }
-    switch (statusLower) {
-      case "active":
-        return { color: "bg-emerald-50 text-emerald-700 border-emerald-200", icon: lucideReact.CheckCircle2 };
-      case "inactive":
-        return { color: "bg-slate-50 text-slate-700 border-slate-200", icon: lucideReact.XCircle };
-      default:
-        return { color: "bg-gray-50 text-gray-700 border-gray-200", icon: lucideReact.AlertCircle };
-    }
-  };
-  const config = getConfig();
-  const Icon = config.icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${config.color}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3 w-3" }),
-    status
-  ] });
-}
-function SubscriptionCard({ subscription }) {
-  const PlanIcon = getPlanIcon(subscription.plan);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1 ${subscription.status === "active" ? "bg-emerald-500" : subscription.status === "past_due" ? "bg-red-500" : "bg-slate-300"}` }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-base font-semibold text-gray-900 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4 text-gray-500" }),
-          subscription.id
-        ] }),
-        subscription.customer_email && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-gray-500 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "h-3 w-3" }),
-          subscription.customer_email
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: subscription.status, type: "subscription" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Plan" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium border ${getPlanColor(subscription.plan)}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PlanIcon, { className: "h-3 w-3" }),
-            subscription.plan
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Billing" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-900", children: [
-            formatCurrency(subscription.amount, subscription.currency),
-            " / ",
-            subscription.billing_cycle
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Current Period" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700", children: [
-            formatDate(subscription.current_period_start),
-            " - ",
-            formatDate(subscription.current_period_end)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Created" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: formatDate(subscription.created_at) })
-        ] })
-      ] })
-    ] }) })
-  ] });
-}
-function SubscriptionList({ subscriptions, maxItems = 5 }) {
-  const displaySubs = subscriptions.slice(0, maxItems);
-  const hasMore = subscriptions.length > maxItems;
-  if (subscriptions.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No subscriptions found" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
-      subscriptions.length,
-      " Subscription",
-      subscriptions.length !== 1 ? "s" : ""
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: displaySubs.map((sub) => {
-        const PlanIcon = getPlanIcon(sub.plan);
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-2 rounded-lg ${getPlanColor(sub.plan).replace("text-", "text-").replace("border-", "bg-").split(" ")[0]}`, children: /* @__PURE__ */ jsxRuntime.jsx(PlanIcon, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900 truncate", children: sub.customer_email || sub.customer_id }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
-                sub.plan,
-                " \xB7 ",
-                formatCurrency(sub.amount, sub.currency),
-                "/",
-                sub.billing_cycle
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: sub.status, type: "subscription" })
-        ] }) }, sub.id);
-      }) }),
-      hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-100 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
-        "+",
-        subscriptions.length - maxItems,
-        " more subscription",
-        subscriptions.length - maxItems !== 1 ? "s" : ""
-      ] }) })
-    ] })
-  ] });
-}
-function CustomerCard({ customer }) {
-  const PlanIcon = getPlanIcon(customer.subscription);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1 ${customer.status === "active" ? "bg-emerald-500" : "bg-slate-300"}` }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base font-semibold text-gray-900", children: customer.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-gray-500 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "h-3 w-3" }),
-          customer.email
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: customer.status, type: "customer" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Plan" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium border ${getPlanColor(customer.subscription)}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PlanIcon, { className: "h-3 w-3" }),
-            customer.subscription
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Revenue" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-900 flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DollarSign, { className: "h-3 w-3 text-emerald-500" }),
-            customer.revenue
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Location" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700 flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-3 w-3 text-gray-400" }),
-            customer.location || "Not specified"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Customer Since" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700 flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-3 w-3 text-gray-400" }),
-            customer.joinDate
-          ] })
-        ] })
-      ] })
-    ] }) })
-  ] });
-}
-function CustomerList({ customers, maxItems = 5 }) {
-  const displayCustomers = customers.slice(0, maxItems);
-  const hasMore = customers.length > maxItems;
-  if (customers.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No customers found" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-4 w-4" }),
-      customers.length,
-      " Customer",
-      customers.length !== 1 ? "s" : ""
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: displayCustomers.map((customer) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900 truncate", children: customer.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 truncate", children: customer.email })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${getPlanColor(customer.subscription)}`, children: customer.subscription }),
-          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: customer.status, type: "customer" })
-        ] })
-      ] }) }, customer.id)) }),
-      hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-100 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
-        "+",
-        customers.length - maxItems,
-        " more customer",
-        customers.length - maxItems !== 1 ? "s" : ""
-      ] }) })
-    ] })
-  ] });
-}
-function TransactionList({ transactions, maxItems = 5 }) {
-  const displayTransactions = transactions.slice(0, maxItems);
-  const hasMore = transactions.length > maxItems;
-  if (transactions.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DollarSign, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No transactions found" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DollarSign, { className: "h-4 w-4" }),
-      transactions.length,
-      " Transaction",
-      transactions.length !== 1 ? "s" : ""
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: displayTransactions.map((tx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-2 rounded-lg ${tx.status === "paid" ? "bg-emerald-50" : tx.status === "failed" ? "bg-red-50" : tx.status === "refunded" ? "bg-slate-50" : "bg-amber-50"}`, children: tx.status === "paid" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 text-emerald-600" }) : tx.status === "failed" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4 text-red-600" }) : tx.status === "refunded" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4 text-slate-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4 text-amber-600" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900 truncate", children: tx.customer }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
-              tx.date,
-              tx.decline_reason && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-red-500 ml-2", children: [
-                "\xB7 ",
-                tx.decline_reason
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-sm font-semibold ${tx.status === "paid" ? "text-emerald-600" : tx.status === "failed" ? "text-red-600" : tx.status === "refunded" ? "text-slate-600" : "text-amber-600"}`, children: [
-            tx.status === "refunded" ? "-" : "",
-            tx.amount
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: tx.status, type: "transaction" })
-        ] })
-      ] }) }, tx.id)) }),
-      hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-100 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
-        "+",
-        transactions.length - maxItems,
-        " more transaction",
-        transactions.length - maxItems !== 1 ? "s" : ""
-      ] }) })
-    ] })
-  ] });
-}
-function ApiKeyList({ apiKeys }) {
-  if (apiKeys.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Key, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No API keys found" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Key, { className: "h-4 w-4" }),
-      apiKeys.length,
-      " API Key",
-      apiKeys.length !== 1 ? "s" : ""
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: apiKeys.map((key, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900", children: key.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 font-mono", children: [
-          key.key.slice(0, 12),
-          "...",
-          key.key.slice(-4)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
-        "Last used: ",
-        key.lastUsed
-      ] })
-    ] }) }, idx)) }) })
-  ] });
-}
-function SessionList({ sessions }) {
-  const getDeviceIcon = (device) => {
-    const deviceLower = device.toLowerCase();
-    if (deviceLower.includes("mobile") || deviceLower.includes("iphone") || deviceLower.includes("android")) {
-      return lucideReact.Smartphone;
-    }
-    return lucideReact.Laptop;
-  };
-  if (sessions.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No active sessions" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-4 w-4" }),
-      sessions.length,
-      " Active Session",
-      sessions.length !== 1 ? "s" : ""
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: sessions.map((session, idx) => {
-      const DeviceIcon = getDeviceIcon(session.device);
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-lg bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(DeviceIcon, { className: "h-4 w-4 text-gray-600" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900", children: session.device }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-3 w-3" }),
-              session.location
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: session.time })
-      ] }) }, idx);
-    }) }) })
-  ] });
-}
-function DashboardStatsCard({ stats }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-4 w-4" }),
-      "Dashboard Overview"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      stats.revenue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg bg-emerald-50 border border-emerald-100", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-emerald-600 font-medium mb-1", children: "Revenue" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold text-emerald-700", children: formatCurrency(stats.revenue.total) }),
-        stats.revenue.change !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-xs ${stats.revenue.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
-          stats.revenue.change > 0 ? "+" : "",
-          stats.revenue.change,
-          "% from last period"
-        ] })
-      ] }),
-      stats.subscriptions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg bg-blue-50 border border-blue-100", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Subscriptions" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-lg font-bold text-blue-700", children: [
-          stats.subscriptions.active,
-          " active"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-blue-600", children: [
-          stats.subscriptions.total,
-          " total"
-        ] })
-      ] }),
-      stats.customers && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg bg-purple-50 border border-purple-100", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-purple-600 font-medium mb-1", children: "Customers" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold text-purple-700", children: stats.customers.total }),
-        stats.customers.new > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-purple-600", children: [
-          "+",
-          stats.customers.new,
-          " new this period"
-        ] })
-      ] }),
-      stats.transactions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg bg-amber-50 border border-amber-100", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-amber-600 font-medium mb-1", children: "Transactions" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-lg font-bold text-amber-700", children: [
-          stats.transactions.successful,
-          " successful"
-        ] }),
-        stats.transactions.failed > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-red-600", children: [
-          stats.transactions.failed,
-          " failed"
-        ] })
-      ] })
-    ] }) })
-  ] });
-}
-function TopCustomersList({ customers }) {
-  if (customers.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No top customers data" })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crown, { className: "h-4 w-4 text-amber-500" }),
-      "Top Customers"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: customers.map((customer, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-6 w-6 rounded-full flex items-center justify-center text-xs font-bold ${idx === 0 ? "bg-amber-100 text-amber-700" : idx === 1 ? "bg-slate-100 text-slate-700" : idx === 2 ? "bg-orange-100 text-orange-700" : "bg-gray-100 text-gray-700"}`, children: idx + 1 }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900 truncate", children: customer.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 truncate", children: customer.email })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-emerald-600", children: typeof customer.revenue === "number" ? formatCurrency(customer.revenue) : customer.revenue })
-    ] }) }, idx)) }) })
-  ] });
-}
-function DataRenderer({ type, data }) {
-  if (!data) return null;
-  const dataObj = data;
-  switch (type) {
-    case "subscription":
-      return /* @__PURE__ */ jsxRuntime.jsx(SubscriptionCard, { subscription: dataObj });
-    case "subscriptions": {
-      const subs = dataObj.subscriptions || dataObj || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(SubscriptionList, { subscriptions: Array.isArray(subs) ? subs : [subs] });
-    }
-    case "customer":
-      return /* @__PURE__ */ jsxRuntime.jsx(CustomerCard, { customer: dataObj.customer || dataObj });
-    case "customers": {
-      const custs = dataObj.customers || dataObj || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(CustomerList, { customers: Array.isArray(custs) ? custs : [custs] });
-    }
-    case "transactions": {
-      const txs = dataObj.transactions || dataObj || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(TransactionList, { transactions: Array.isArray(txs) ? txs : [txs] });
-    }
-    case "transaction":
-      return /* @__PURE__ */ jsxRuntime.jsx(TransactionList, { transactions: [dataObj], maxItems: 1 });
-    case "dashboard_stats":
-      return /* @__PURE__ */ jsxRuntime.jsx(DashboardStatsCard, { stats: dataObj });
-    case "top_customers": {
-      const topCustomers = dataObj.customers || dataObj || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(TopCustomersList, { customers: Array.isArray(topCustomers) ? topCustomers : [topCustomers] });
-    }
-    case "api_keys": {
-      const keys = dataObj.api_keys || dataObj || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(ApiKeyList, { apiKeys: Array.isArray(keys) ? keys : [keys] });
-    }
-    case "sessions": {
-      const sessions = dataObj.sessions || dataObj || [];
-      return /* @__PURE__ */ jsxRuntime.jsx(SessionList, { sessions: Array.isArray(sessions) ? sessions : [sessions] });
-    }
-    default:
-      return null;
-  }
-}
-var defaultFolders = [
-  {
-    id: "customers",
-    title: "Customer Management",
-    topics: [
-      { id: "add-customer", label: "Add a new customer", prompt: "How do I add a new customer to the system and what information is required?" },
-      { id: "customer-details", label: "View customer details", prompt: "Show me how to view and edit customer information and their payment history." }
-    ]
-  },
-  {
-    id: "payments",
-    title: "Payment Processing",
-    topics: [
-      { id: "process-payment", label: "Process a payment", prompt: "How do I process a one-time payment for a customer?" },
-      { id: "refund-payment", label: "Issue a refund", prompt: "Walk me through issuing a refund for a customer payment." }
-    ]
-  },
-  {
-    id: "subscriptions",
-    title: "Subscription Management",
-    topics: [
-      { id: "create-subscription", label: "Create a subscription", prompt: "How do I set up a new subscription plan for a customer?" },
-      { id: "update-subscription", label: "Update subscription tier", prompt: "How can I change a customer's subscription plan or upgrade them?" }
-    ]
-  },
-  {
-    id: "billing",
-    title: "Billing",
-    topics: [
-      { id: "payment-methods", label: "Manage payment methods", prompt: "How do customers add or update their payment methods?" }
-    ]
-  }
-];
-var defaultGuides = {
-  "getting-started": {
-    id: "getting-started",
-    title: "Getting started",
-    steps: [
-      {
-        text: "Step 1: Let's open the Customers page. This is where you'll manage all your customers - you can view, add, and edit customer information here.",
-        navigation: { page: "customers" },
-        cursorTarget: {
-          selector: '[data-page="customers"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      },
-      {
-        text: "Step 2: Now let's open the Add customer dialog. This is where you'll enter information for your first customer, including their name, email, and other details.",
-        navigation: { page: "customers" },
-        cursorTarget: {
-          selector: '[data-testid="add-customer-button"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      },
-      {
-        text: "Step 3: Let's open the Settings page. This is where you manage your account settings, company information, and preferences. We're going to verify your company address is correct.",
-        navigation: { page: "settings", subtab: "general" },
-        cursorTarget: {
-          selector: '[data-page="settings"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      },
-      {
-        text: "Step 4: Here's the address field in the Company Information section. It's important to verify this address is accurate since it's used for billing and shipping purposes. Make sure it's up to date.",
-        navigation: { page: "settings", subtab: "general" },
-        cursorTarget: {
-          selector: '[data-testid="company-address-input"]',
-          offset: { x: 0, y: 0 },
-          onClick: false
-        }
-      },
-      {
-        text: "Step 5: Let's open the API Keys tab. This section shows all your API keys - you'll need these to connect your application to our services. We're going to create a production API key.",
-        navigation: { page: "settings", subtab: "api" },
-        cursorTarget: {
-          selector: '[data-settings-tab="api"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      },
-      {
-        text: "Step 6: Let's open the Create API Key dialog. Here you can create a new API key for your application. You'll want to give it a descriptive name like 'Production Key' so you can easily identify it later.",
-        navigation: { page: "settings", subtab: "api" },
-        cursorTarget: {
-          selector: '[data-testid="create-api-key-button"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      }
-    ]
-  },
-  "add-api-key": {
-    id: "add-api-key",
-    title: "How to add an API key",
-    steps: [
-      {
-        text: "Step 1: Let's open the Settings page. This is where you manage your account settings and preferences. We need to go here to access the API Keys section.",
-        navigation: { page: "settings", subtab: "general" },
-        cursorTarget: {
-          selector: '[data-page="settings"]',
-          offset: { x: 0, y: 0 },
-          onClick: false
-        }
-      },
-      {
-        text: "Step 2: Let's open the API Keys tab. This section shows all your API keys and allows you to create new ones. You'll need API keys to connect your application to our services.",
-        navigation: { page: "settings", subtab: "api" },
-        cursorTarget: {
-          selector: '[data-settings-tab="api"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      },
-      {
-        text: "Step 3: Let's open the Create API Key dialog. This is where you'll create your new API key - you can give it a name to help you identify it later, then click Create to generate it.",
-        navigation: { page: "settings", subtab: "api" },
-        cursorTarget: {
-          selector: '[data-testid="create-api-key-button"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      }
-    ]
-  },
-  "refund-payment": {
-    id: "refund-payment",
-    title: "How to refund a payment",
-    steps: [
-      {
-        text: "Step 1: Let's open the Home page. This is your dashboard where you can view today's activity, your payment overview, and recent transactions. We need to go here to find the payment you want to refund.",
-        navigation: { page: "dashboard" },
-        cursorTarget: {
-          selector: '[data-page="dashboard"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      },
-      {
-        text: "Step 2: Scroll down to see the Recent transactions section at the bottom. This shows your latest payment transactions with their status. We're looking for a transaction with 'paid' status - only paid transactions can be refunded.",
-        navigation: { page: "dashboard" },
-        cursorTarget: {
-          selector: '[data-testid="recent-activity-card"]',
-          offset: { x: 0, y: 0 },
-          onClick: false
-        }
-      },
-      {
-        text: "Step 3: Let's open the dropdown menu for this paid transaction. Each transaction has a menu button (three dots) that gives you options like refunding. Click it to see the available actions, including the 'Refund payment' option.",
-        navigation: { page: "dashboard" },
-        cursorTarget: {
-          selector: '[data-testid="transaction-menu-button"]',
-          offset: { x: 0, y: 0 },
-          onClick: true
-        }
-      }
-    ]
-  }
-};
-var BUILT_IN_AGENT_URL = process.env.AGENT_URL || "https://api.kite.com";
-var defaultConfig = {
-  userId: "",
-  orgId: "",
-  agentUrl: BUILT_IN_AGENT_URL,
-  theme: "light",
-  position: "bottom-right",
-  showDefaultFolders: true,
-  enableGuideCursor: true
-};
-var ChatPanelContext = React4__namespace.createContext(null);
-function ChatPanelProvider({ children, config }) {
-  const value = React4__namespace.useMemo(() => {
-    const mergedConfig = { ...defaultConfig, ...config };
-    let folders = [];
-    if (mergedConfig.showDefaultFolders !== false) {
-      folders = [...defaultFolders];
-    }
-    if (mergedConfig.folders) {
-      folders = [...folders, ...mergedConfig.folders];
-    }
-    const guides = {
-      ...mergedConfig.showDefaultFolders !== false ? defaultGuides : {},
-      ...mergedConfig.guides
-    };
-    return {
-      config: mergedConfig,
-      userId: mergedConfig.userId,
-      orgId: mergedConfig.orgId,
-      agentUrl: mergedConfig.agentUrl || BUILT_IN_AGENT_URL,
-      folders,
-      guides,
-      theme: mergedConfig.theme || "light",
-      position: mergedConfig.position || "bottom-right",
-      enableGuideCursor: mergedConfig.enableGuideCursor !== false
-    };
-  }, [config]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ChatPanelContext.Provider, { value, children });
-}
-function useChatPanelConfig() {
-  const context = React4__namespace.useContext(ChatPanelContext);
-  if (!context) {
-    return {
-      config: defaultConfig,
-      userId: defaultConfig.userId,
-      orgId: defaultConfig.orgId,
-      agentUrl: defaultConfig.agentUrl || BUILT_IN_AGENT_URL,
-      folders: defaultFolders,
-      guides: defaultGuides,
-      theme: "light",
-      position: "bottom-right",
-      enableGuideCursor: true
-    };
-  }
-  return context;
-}
-function renderMarkdown(text) {
-  if (!text) return null;
-  const lines = text.split("\n");
-  const elements = [];
-  let currentList = null;
-  let inCodeBlock = false;
-  let codeContent = [];
-  const processInlineFormatting = (line) => {
-    const parts = [];
-    let remaining = line;
-    let keyIndex = 0;
-    while (remaining.length > 0) {
-      const codeMatch = remaining.match(/^`([^`]+)`/);
-      if (codeMatch) {
-        parts.push(
-          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-gray-100 px-1 py-0.5 rounded text-xs font-mono", children: codeMatch[1] }, keyIndex++)
-        );
-        remaining = remaining.slice(codeMatch[0].length);
-        continue;
-      }
-      const boldMatch = remaining.match(/^\*\*([^*]+)\*\*/);
-      if (boldMatch) {
-        parts.push(/* @__PURE__ */ jsxRuntime.jsx("strong", { children: boldMatch[1] }, keyIndex++));
-        remaining = remaining.slice(boldMatch[0].length);
-        continue;
-      }
-      const italicMatch = remaining.match(/^\*([^*]+)\*/);
-      if (italicMatch) {
-        parts.push(/* @__PURE__ */ jsxRuntime.jsx("em", { children: italicMatch[1] }, keyIndex++));
-        remaining = remaining.slice(italicMatch[0].length);
-        continue;
-      }
-      const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
-      if (linkMatch) {
-        parts.push(
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: linkMatch[2], className: "text-blue-600 hover:underline", target: "_blank", rel: "noopener noreferrer", children: linkMatch[1] }, keyIndex++)
-        );
-        remaining = remaining.slice(linkMatch[0].length);
-        continue;
-      }
-      const nextSpecial = remaining.search(/[`*\[]/);
-      if (nextSpecial === -1) {
-        parts.push(remaining);
-        break;
-      } else if (nextSpecial === 0) {
-        parts.push(remaining[0]);
-        remaining = remaining.slice(1);
-      } else {
-        parts.push(remaining.slice(0, nextSpecial));
-        remaining = remaining.slice(nextSpecial);
-      }
-    }
-    return parts.length === 1 ? parts[0] : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts });
-  };
-  const flushList = () => {
-    if (currentList) {
-      const ListTag = currentList.type === "ul" ? "ul" : "ol";
-      elements.push(
-        /* @__PURE__ */ jsxRuntime.jsx(ListTag, { className: `${currentList.type === "ul" ? "list-disc" : "list-decimal"} ml-4 my-1`, children: currentList.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ml-2", children: item }, i)) }, elements.length)
-      );
-      currentList = null;
-    }
-  };
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.startsWith("```")) {
-      if (inCodeBlock) {
-        elements.push(
-          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 rounded p-2 my-1 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono", children: codeContent.join("\n") }) }, elements.length)
-        );
-        inCodeBlock = false;
-        codeContent = [];
-      } else {
-        flushList();
-        inCodeBlock = true;
-        line.slice(3).trim();
-      }
-      continue;
-    }
-    if (inCodeBlock) {
-      codeContent.push(line);
-      continue;
-    }
-    const headerMatch = line.match(/^(#{1,6})\s+(.+)/);
-    if (headerMatch) {
-      flushList();
-      const level = headerMatch[1].length;
-      const content = processInlineFormatting(headerMatch[2]);
-      const className = level === 1 ? "text-lg font-bold my-1" : level === 2 ? "text-base font-bold my-1" : "text-sm font-semibold my-1";
-      elements.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className, children: content }, elements.length));
-      continue;
-    }
-    const ulMatch = line.match(/^[-*]\s+(.+)/);
-    if (ulMatch) {
-      if (!currentList || currentList.type !== "ul") {
-        flushList();
-        currentList = { type: "ul", items: [] };
-      }
-      currentList.items.push(processInlineFormatting(ulMatch[1]));
-      continue;
-    }
-    const olMatch = line.match(/^\d+[.)]\s+(.+)/);
-    if (olMatch) {
-      if (!currentList || currentList.type !== "ol") {
-        flushList();
-        currentList = { type: "ol", items: [] };
-      }
-      currentList.items.push(processInlineFormatting(olMatch[1]));
-      continue;
-    }
-    if (line.trim() === "") {
-      flushList();
-      elements.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2" }, elements.length));
-      continue;
-    }
-    if (line.match(/^[-*_]{3,}$/)) {
-      flushList();
-      elements.push(/* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-2 border-gray-200" }, elements.length));
-      continue;
-    }
-    flushList();
-    elements.push(/* @__PURE__ */ jsxRuntime.jsx("div", { children: processInlineFormatting(line) }, elements.length));
-  }
-  flushList();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: elements });
-}
-var initialMessages = [];
-function ChatPanel({
-  onBack,
-  onNavigate,
-  onActionComplete,
-  onAgentAction,
-  currentPage,
-  config: propConfig
-}) {
-  const contextConfig = useChatPanelConfig();
-  const { userId, orgId, agentUrl, folders, guides, enableGuideCursor } = propConfig ? { ...contextConfig, ...propConfig, userId: propConfig.userId || contextConfig.userId, orgId: propConfig.orgId || contextConfig.orgId, agentUrl: propConfig.agentUrl || contextConfig.agentUrl } : contextConfig;
-  const [messages, setMessages] = React4__namespace.useState(initialMessages);
-  const [input, setInput] = React4__namespace.useState("");
-  const [sessionId] = React4__namespace.useState(() => crypto.randomUUID());
-  const streamIntervals = React4__namespace.useRef({});
-  const isEmpty = messages.length === 0;
-  const [phase, setPhase] = React4__namespace.useState("idle");
-  const [progressSteps, setProgressSteps] = React4__namespace.useState([]);
-  const phaseTimers = React4__namespace.useRef([]);
-  const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
-  const [panelView, setPanelView] = React4__namespace.useState("landing");
-  const [currentFolderId, setCurrentFolderId] = React4__namespace.useState(void 0);
-  const [activeGuide, setActiveGuide] = React4__namespace.useState(void 0);
-  const activeGuideRef = React4__namespace.useRef(void 0);
-  const latestBulkSummaryNavigationRef = React4__namespace.useRef(null);
-  const [guideComplete, setGuideComplete] = React4__namespace.useState(false);
-  React4__namespace.useEffect(() => {
-    window.resetIntegrationNotification = () => {
-      localStorage.removeItem("gmailNotificationSeen");
-      console.log("Integration notification reset! Click the Integrations tab to see it again.");
-    };
-    const handleIntegrationTabClick = () => {
-      const hasSeenNotification = localStorage.getItem("gmailNotificationSeen");
-      if (!hasSeenNotification) {
-        setPanelView("landing");
-        setCurrentFolderId(void 0);
-        const messageId = Date.now();
-        const notificationText = "I see you're exploring integrations. Let me know if there are any other connections we should add.";
-        const draftMessage = {
-          id: messageId,
-          role: "assistant",
-          kind: "text",
-          content: "",
-          isNotificationMessage: true
-        };
-        setMessages((prev) => [...prev, draftMessage]);
-        streamAssistantMessage(messageId, notificationText);
-        localStorage.setItem("gmailNotificationSeen", "true");
-      }
-    };
-    window.addEventListener("integrationTabClicked", handleIntegrationTabClick);
-    return () => {
-      window.removeEventListener("integrationTabClicked", handleIntegrationTabClick);
-    };
-  }, []);
-  React4__namespace.useEffect(() => {
-    if (activeGuide) {
-      if (!activeGuideRef.current || activeGuideRef.current.id !== activeGuide.id || activeGuideRef.current.stepIndex !== activeGuide.stepIndex) {
-        activeGuideRef.current = activeGuide;
-      }
-    } else {
-      activeGuideRef.current = void 0;
-    }
-  }, [activeGuide]);
-  const [pendingNavigation, setPendingNavigation] = React4__namespace.useState(null);
-  const [pendingAction, setPendingAction] = React4__namespace.useState(null);
-  const [actionFormData, setActionFormData] = React4__namespace.useState({});
-  const messagesEndRef = React4__namespace.useRef(null);
-  const messagesContainerRef = React4__namespace.useRef(null);
-  const currentStepRef = React4__namespace.useRef(null);
-  const { cursorState, moveTo, hide } = useGuideCursor();
-  const [pendingFile, setPendingFile] = React4__namespace.useState(null);
-  const [pendingBulkSession, setPendingBulkSession] = React4__namespace.useState(null);
-  const [isCollapsed, setIsCollapsed] = React4__namespace.useState(false);
-  const pendingBulkSessionRef = React4__namespace.useRef(null);
-  const fileInputRef = React4__namespace.useRef(null);
-  React4__namespace.useEffect(() => {
-    if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
-      return;
-    }
-    const checkForDialogOpen = () => {
-      const dialog = document.querySelector('[role="dialog"]');
-      const currentGuide = activeGuideRef.current;
-      if (dialog && currentGuide && currentGuide.id === "add-api-key" && currentGuide.stepIndex === 2) {
-        hide();
-        const id = Date.now() + 1;
-        setMessages((prev) => [
-          ...prev,
-          { id, role: "assistant", kind: "guideComplete", content: "Perfect! The dialog is now open. You can enter a name and create your API key." }
-        ]);
-        setActiveGuide(void 0);
-        setGuideComplete(true);
-      }
-    };
-    const interval = setInterval(checkForDialogOpen, 300);
-    return () => clearInterval(interval);
-  }, [activeGuide, hide]);
-  React4__namespace.useEffect(() => {
-    return () => {
-      Object.values(streamIntervals.current).forEach((id) => window.clearInterval(id));
-      streamIntervals.current = {};
-      phaseTimers.current.forEach((id) => window.clearTimeout(id));
-      phaseTimers.current = [];
-    };
-  }, []);
-  React4__namespace.useEffect(() => {
-    if (activeGuide && messages.length > 0) {
-      const lastMessage = messages[messages.length - 1];
-      if (lastMessage.kind === "guideStep" || lastMessage.kind === "guideComplete") {
-        if (currentStepRef.current && messagesContainerRef.current) {
-          const container = messagesContainerRef.current;
-          const stepElement = currentStepRef.current;
-          const containerRect = container.getBoundingClientRect();
-          const stepRect = stepElement.getBoundingClientRect();
-          const scrollTop = stepRect.top - containerRect.top + container.scrollTop;
-          container.scrollTop = scrollTop;
-        }
-      }
-    } else if (!activeGuide && messages.length > 0) {
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [messages, phase, activeGuide]);
-  const latestBulkSummaryNavigation = React4__namespace.useMemo(() => {
-    for (let i = messages.length - 1; i >= 0; i--) {
-      const msg = messages[i];
-      if (msg.kind === "bulkSummary" && msg.bulkSummary?.navigationPage && msg.bulkSummary.successes > 0) {
-        return msg.bulkSummary.navigationPage;
-      }
-    }
-    return null;
-  }, [messages]);
-  React4__namespace.useEffect(() => {
-    latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
-  }, [latestBulkSummaryNavigation]);
-  React4__namespace.useEffect(() => {
-    pendingBulkSessionRef.current = pendingBulkSession;
-  }, [pendingBulkSession]);
-  React4__namespace.useEffect(() => {
-    const handleKeyDown = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-        const currentBulkSession = pendingBulkSessionRef.current;
-        if (currentBulkSession) {
-          e.preventDefault();
-          e.stopPropagation();
-          confirmBulkOperation(currentBulkSession);
-          return;
-        }
-        if (pendingAction) {
-          e.preventDefault();
-          e.stopPropagation();
-          handleActionSubmit();
-          return;
-        }
-        if (pendingNavigation) {
-          e.preventDefault();
-          e.stopPropagation();
-          handleConfirmNavigation(pendingNavigation);
-          return;
-        }
-        const currentBulkNav = latestBulkSummaryNavigationRef.current;
-        if (currentBulkNav && onNavigate) {
-          e.preventDefault();
-          e.stopPropagation();
-          onNavigate(currentBulkNav.page, currentBulkNav.subtab);
-          return;
-        }
-        if (guideComplete) {
-          e.preventDefault();
-          e.stopPropagation();
-          handleBack();
-          return;
-        }
-        const currentGuide = activeGuideRef.current;
-        if (currentGuide) {
-          e.preventDefault();
-          e.stopPropagation();
-          advanceGuide();
-          return;
-        }
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [pendingAction, pendingNavigation, activeGuide, guideComplete, onNavigate]);
-  function streamAssistantMessage(messageId, fullText, followups) {
-    const tokens = fullText.split(" ");
-    let i = 0;
-    const intervalId = window.setInterval(() => {
-      i += 1;
-      setMessages(
-        (prev) => prev.map((m) => m.id === messageId ? { ...m, content: tokens.slice(0, i).join(" ") } : m)
-      );
-      if (i >= tokens.length) {
-        window.clearInterval(intervalId);
-        delete streamIntervals.current[messageId];
-        if (followups && followups.length > 0) {
-          setMessages(
-            (prev) => prev.map((m) => m.id === messageId ? { ...m, followups } : m)
-          );
-        }
-        setPhase("idle");
-      }
-    }, 25);
-    streamIntervals.current[messageId] = intervalId;
-  }
-  function handleFollowupClick(messageId, followup) {
-    setMessages(
-      (prev) => prev.map((m) => m.id === messageId ? { ...m, followupSelected: true } : m)
-    );
-    startChatFlow(followup.label);
-  }
-  function handleBack() {
-    Object.values(streamIntervals.current).forEach((id) => window.clearInterval(id));
-    streamIntervals.current = {};
-    phaseTimers.current.forEach((id) => window.clearTimeout(id));
-    phaseTimers.current = [];
-    hide();
-    setMessages([]);
-    setInput("");
-    setPhase("idle");
-    setPanelView("landing");
-    setCurrentFolderId(void 0);
-    setActiveGuide(void 0);
-    setGuideComplete(false);
-    setPendingNavigation(null);
-    setPendingAction(null);
-    setActionFormData({});
-    if (onBack) onBack();
-  }
-  function openFolder(folderId) {
-    setPanelView("folder");
-    setCurrentFolderId(folderId);
-  }
-  function closeFolder() {
-    setPanelView("landing");
-    setCurrentFolderId(void 0);
-  }
-  function handleSubmit(e) {
-    e.preventDefault();
-    const trimmed = input.trim();
-    if (pendingFile) {
-      if (!trimmed) {
-        const errorMessage = {
-          id: Date.now(),
-          role: "assistant",
-          kind: "text",
-          content: "Please describe what you'd like to do with this CSV file. For example: 'Create customers from this file' or 'Add these subscriptions'."
-        };
-        setMessages((prev) => [...prev, errorMessage]);
-        return;
-      }
-      startBulkUploadFlow(trimmed, pendingFile);
-      setInput("");
-      setPendingFile(null);
-      if (fileInputRef.current) fileInputRef.current.value = "";
-      return;
-    }
-    if (!trimmed) return;
-    startChatFlow(trimmed);
-    setInput("");
-  }
-  function getPageDisplayName(target) {
-    const pageNames = {
-      dashboard: "dashboard",
-      customers: "customers page",
-      payments: "payments page",
-      settings: "settings page",
-      support: "support page",
-      disputes: "disputes page",
-      radar: "radar page"
-    };
-    if (target.page === "settings" && target.subtab) {
-      const subtabNames = {
-        general: "General",
-        billing: "Billing",
-        security: "Security",
-        api: "API Keys",
-        notifications: "Notifications",
-        integrations: "Integrations"
-      };
-      return `${pageNames.settings} (${subtabNames[target.subtab] || target.subtab} tab)`;
-    }
-    return pageNames[target.page] || target.page;
-  }
-  function handleConfirmNavigation(target) {
-    if (onNavigate) {
-      onNavigate(target.page, target.subtab);
-    }
-    setPendingNavigation(null);
-    setMessages(
-      (prev) => prev.map(
-        (msg) => msg.kind === "navigationAction" && msg.navigationTarget?.page === target.page && msg.navigationTarget?.subtab === target.subtab ? { ...msg, navigationTarget: void 0 } : msg
-      )
-    );
-  }
-  function handleActionSubmit() {
-    if (!pendingAction) return;
-    const data = actionFormData;
-    if (pendingAction.type === "updateCompanyInfo") ; else if (pendingAction.type === "addApiKey") {
-      const apiData = data;
-      if (!apiData.name || !apiData.name.trim()) return;
-    } else if (pendingAction.type === "addCustomer") {
-      const customerData = data;
-      if (!customerData.name || !customerData.name.trim() || !customerData.email || !customerData.email.trim()) return;
-    } else if (pendingAction.type === "changePassword") {
-      const passwordData = data;
-      if (!passwordData.currentPassword || !passwordData.newPassword || !passwordData.confirmPassword) return;
-      if (passwordData.newPassword !== passwordData.confirmPassword) return;
-    } else if (pendingAction.type === "addWebhook") {
-      const webhookData = data;
-      if (!webhookData.url || !webhookData.url.trim()) return;
-    } else if (pendingAction.type === "addPaymentMethod") {
-      const paymentData = data;
-      if (!paymentData.cardNumber || !paymentData.expiryDate) return;
-    } else if (pendingAction.type === "deleteApiKey") {
-      const apiData = data;
-      if (!apiData.keyId && !apiData.name) return;
-    } else if (pendingAction.type === "refundPayment") {
-      const refundData = data;
-      if (!refundData.transactionId && !refundData.customer) return;
-    } else if (pendingAction.type === "createSubscription") {
-      const subscriptionData = data;
-      if (!subscriptionData.customerEmail && !subscriptionData.customerId) return;
-    } else if (pendingAction.type === "toggleBlockRule" || pendingAction.type === "enableBlockRule" || pendingAction.type === "disableBlockRule") {
-      const blockRuleData = data;
-      if (!blockRuleData.ruleId) return;
-    }
-    if (onActionComplete) {
-      onActionComplete(pendingAction.type, data);
-    }
-    setMessages(
-      (prev) => prev.map(
-        (msg) => msg.kind === "actionForm" && msg.actionType === pendingAction.type ? { ...msg, isSubmitted: true } : msg
-      )
-    );
-    setPendingAction(null);
-    setActionFormData({});
-  }
-  function dispatchAgentAction(result) {
-    if (onAgentAction) {
-      onAgentAction({ result });
-    }
-    window.dispatchEvent(new CustomEvent("agentActionComplete", {
-      detail: { result }
-    }));
-  }
-  async function startChatFlow(userText) {
-    phaseTimers.current.forEach((id) => window.clearTimeout(id));
-    phaseTimers.current = [];
-    const lastAssistantMessage = [...messages].reverse().find((m) => m.role === "assistant");
-    const isRespondingToNotification = lastAssistantMessage?.isNotificationMessage === true;
-    const now = Date.now();
-    const userMessage = { id: now, role: "user", content: userText };
-    setMessages((prev) => [...prev, userMessage]);
-    if (isRespondingToNotification) {
-      const thankYouMessageId = Date.now() + 1;
-      const thankYouMessage = {
-        id: thankYouMessageId,
-        role: "assistant",
-        kind: "text",
-        content: ""
-      };
-      setMessages((prev) => [...prev, thankYouMessage]);
-      streamAssistantMessage(thankYouMessageId, "Thank you, your feedback is saved.");
-      return;
-    }
-    setPendingNavigation(null);
-    setPhase("thinking");
-    setProgressSteps([]);
-    let streamCompleted = false;
-    try {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 6e4);
-      const response = await fetch(`${agentUrl}/chat/stream`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          session_id: sessionId,
-          user_id: userId,
-          org_id: orgId,
-          message: userText,
-          current_page: currentPage || "dashboard"
-        }),
-        signal: controller.signal
-      });
-      clearTimeout(timeoutId);
-      if (!response.ok) {
-        throw new Error(`Agent request failed: ${response.status}`);
-      }
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error("No response body");
-      const decoder = new TextDecoder();
-      let buffer = "";
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const events = buffer.split("\n\n");
-        buffer = events.pop() || "";
-        for (const eventStr of events) {
-          if (!eventStr.trim()) continue;
-          const lines = eventStr.split("\n");
-          let eventType = "";
-          let eventData = "";
-          for (const line of lines) {
-            if (line.startsWith("event: ")) {
-              eventType = line.slice(7);
-            } else if (line.startsWith("data: ")) {
-              eventData = line.slice(6);
-            }
-          }
-          if (!eventType || !eventData) continue;
-          try {
-            const data = JSON.parse(eventData);
-            if (eventType === "progress") {
-              if (data.status === "thinking") {
-                setPhase("thinking");
-                setProgressSteps([{ message: data.message, completed: false }]);
-              } else if (data.status === "executing") {
-                setPhase("executing");
-                setProgressSteps((prev) => {
-                  const updated = prev.map((step) => ({ ...step, completed: true }));
-                  const lastStep = updated[updated.length - 1];
-                  if (!lastStep || lastStep.message !== data.message) {
-                    updated.push({ message: data.message, completed: false });
-                  }
-                  return updated;
-                });
-              } else if (data.status === "responding") {
-                setPhase("responding");
-                setProgressSteps((prev) => prev.map((step) => ({ ...step, completed: true })));
-              }
-            } else if (eventType === "response") {
-              setProgressSteps([]);
-              streamCompleted = true;
-              const agentResponse = data;
-              if (agentResponse.action === "navigate" && agentResponse.navigation) {
-                const navTarget = {
-                  page: agentResponse.navigation.page,
-                  subtab: agentResponse.navigation.subtab
-                };
-                setPendingNavigation(navTarget);
-                const navigationMessage = {
-                  id: now + 1,
-                  role: "assistant",
-                  kind: "navigationAction",
-                  content: agentResponse.response || `I can take you to the ${getPageDisplayName(navTarget)}.`,
-                  navigationTarget: navTarget
-                };
-                setMessages((prev) => [...prev, navigationMessage]);
-                setPhase("idle");
-              } else if (agentResponse.action === "show_form" && agentResponse.actionType) {
-                setPendingAction({
-                  type: agentResponse.actionType,
-                  data: agentResponse.actionData || {}
-                });
-                setActionFormData(agentResponse.actionData || {});
-                const actionMessage = {
-                  id: now + 1,
-                  role: "assistant",
-                  kind: "actionForm",
-                  content: agentResponse.response || agentResponse.message || "Please fill in the details below:",
-                  actionType: agentResponse.actionType,
-                  actionData: agentResponse.actionData || {}
-                };
-                setMessages((prev) => [...prev, actionMessage]);
-                setPhase("idle");
-              } else if (agentResponse.action === "suggest_bulk") {
-                const assistantMessageId = now + 1;
-                const assistantMessage = {
-                  id: assistantMessageId,
-                  role: "assistant",
-                  kind: "text",
-                  content: ""
-                };
-                setMessages((prev) => [...prev, assistantMessage]);
-                streamAssistantMessage(assistantMessageId, agentResponse.response || agentResponse.message || "For bulk operations, you can upload a CSV file - just click the \u{1F4CE} button!", agentResponse.followups);
-                streamCompleted = true;
-              } else if (agentResponse.action === "bulk_preview") {
-                setPendingBulkSession(agentResponse.bulk_session_id);
-                const previewMessage = {
-                  id: now + 1,
-                  role: "assistant",
-                  kind: "bulkPreview",
-                  content: agentResponse.message || `I found ${agentResponse.csv_data?.rowCount || 0} items. Here's a preview:`,
-                  csvData: agentResponse.csv_data ? {
-                    rowCount: agentResponse.csv_data.rowCount,
-                    columns: agentResponse.csv_data.columns,
-                    sampleRows: agentResponse.csv_data.sampleRows,
-                    fileName: "From context"
-                  } : void 0,
-                  suggestedAction: agentResponse.suggested_action,
-                  bulkSessionId: agentResponse.bulk_session_id
-                };
-                setMessages((prev) => [...prev, previewMessage]);
-                setPhase("idle");
-                streamCompleted = true;
-              } else if (agentResponse.action === "execute" && agentResponse.executionResult) {
-                const assistantMessageId = now + 1;
-                const assistantMessage = {
-                  id: assistantMessageId,
-                  role: "assistant",
-                  kind: "text",
-                  content: "",
-                  structuredData: agentResponse.structuredData || void 0
-                };
-                setMessages((prev) => [...prev, assistantMessage]);
-                streamAssistantMessage(assistantMessageId, agentResponse.response, agentResponse.followups);
-                streamCompleted = true;
-                setTimeout(() => {
-                  dispatchAgentAction(agentResponse.executionResult);
-                }, 100);
-              } else {
-                const assistantMessageId = now + 1;
-                const assistantMessage = {
-                  id: assistantMessageId,
-                  role: "assistant",
-                  kind: "text",
-                  content: ""
-                };
-                setMessages((prev) => [...prev, assistantMessage]);
-                streamAssistantMessage(assistantMessageId, agentResponse.response, agentResponse.followups);
-                streamCompleted = true;
-              }
-            } else if (eventType === "error") {
-              setPhase("idle");
-              setProgressSteps([]);
-              streamCompleted = true;
-              const errorMessageId = now + 1;
-              const errorMessage = {
-                id: errorMessageId,
-                role: "assistant",
-                kind: "text",
-                content: ""
-              };
-              setMessages((prev) => [...prev, errorMessage]);
-              streamAssistantMessage(errorMessageId, data.message || "An error occurred processing your request.");
-            } else if (eventType === "done") {
-              setProgressSteps([]);
-              setPhase("idle");
-              streamCompleted = true;
-            }
-          } catch (parseError) {
-            console.error("Failed to parse SSE event:", parseError);
-          }
-        }
-      }
-      setProgressSteps([]);
-      if (!streamCompleted) {
-        setPhase("idle");
-      }
-    } catch (error) {
-      console.error("Agent request failed:", error);
-      setProgressSteps([]);
-      const errorMessageId = now + 1;
-      const errorMessage = {
-        id: errorMessageId,
-        role: "assistant",
-        kind: "text",
-        content: ""
-      };
-      setMessages((prev) => [...prev, errorMessage]);
-      streamAssistantMessage(errorMessageId, "I'm having trouble connecting to my backend. Please make sure the agent server is running.");
-    } finally {
-      setProgressSteps([]);
-    }
-  }
-  async function startBulkUploadFlow(userText, file) {
-    phaseTimers.current.forEach((id) => window.clearTimeout(id));
-    phaseTimers.current = [];
-    const now = Date.now();
-    const userMessage = {
-      id: now,
-      role: "user",
-      content: `\u{1F4CE} ${file.name}
-
-${userText}`
-    };
-    setMessages((prev) => [...prev, userMessage]);
-    setPhase("thinking");
-    setProgressSteps([{ message: "Analyzing CSV file...", completed: false }]);
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("message", userText);
-      formData.append("session_id", sessionId);
-      formData.append("user_id", userId);
-      formData.append("org_id", orgId);
-      formData.append("current_page", currentPage || "dashboard");
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 12e4);
-      const response = await fetch(`${agentUrl}/chat/bulk/stream`, {
-        method: "POST",
-        body: formData,
-        signal: controller.signal
-      });
-      clearTimeout(timeoutId);
-      if (!response.ok) {
-        throw new Error(`Bulk upload failed: ${response.status}`);
-      }
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error("No response body");
-      const decoder = new TextDecoder();
-      let buffer = "";
-      let bulkSessionId = null;
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const events = buffer.split("\n\n");
-        buffer = events.pop() || "";
-        for (const eventStr of events) {
-          if (!eventStr.trim()) continue;
-          const lines = eventStr.split("\n");
-          let eventType = "";
-          let eventData = "";
-          for (const line of lines) {
-            if (line.startsWith("event: ")) {
-              eventType = line.slice(7);
-            } else if (line.startsWith("data: ")) {
-              eventData = line.slice(6);
-            }
-          }
-          if (!eventType || !eventData) continue;
-          try {
-            const data = JSON.parse(eventData);
-            if (eventType === "preview") {
-              setPhase("idle");
-              setProgressSteps([]);
-              bulkSessionId = data.bulk_session_id;
-              setPendingBulkSession(bulkSessionId);
-              const previewMessage = {
-                id: now + 1,
-                role: "assistant",
-                kind: "bulkPreview",
-                content: data.message || `I found ${data.csv_data?.rowCount || 0} items. Here's a preview:`,
-                csvData: data.csv_data ? {
-                  rowCount: data.csv_data.rowCount,
-                  columns: data.csv_data.columns,
-                  sampleRows: data.csv_data.sampleRows,
-                  fileName: file.name
-                } : void 0,
-                suggestedAction: data.suggested_action,
-                bulkSessionId: bulkSessionId || void 0
-              };
-              setMessages((prev) => [...prev, previewMessage]);
-            } else if (eventType === "error") {
-              setPhase("idle");
-              setProgressSteps([]);
-              const errorMessage = {
-                id: Date.now(),
-                role: "assistant",
-                kind: "text",
-                content: data.message || "An error occurred processing the CSV file."
-              };
-              setMessages((prev) => [...prev, errorMessage]);
-            }
-          } catch (parseError) {
-            console.error("Failed to parse SSE event:", parseError);
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Bulk upload failed:", error);
-      setPhase("idle");
-      setProgressSteps([]);
-      const errorMessage = {
-        id: Date.now(),
-        role: "assistant",
-        kind: "text",
-        content: "Failed to process CSV file. Please try again."
-      };
-      setMessages((prev) => [...prev, errorMessage]);
-    }
-  }
-  async function confirmBulkOperation(bulkSessionId) {
-    setPhase("executing");
-    setProgressSteps([{ message: "Starting bulk operation...", completed: false }]);
-    setPendingBulkSession(null);
-    try {
-      const response = await fetch(`${agentUrl}/chat/bulk/confirm`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          session_id: sessionId,
-          user_id: userId,
-          org_id: orgId,
-          bulk_session_id: bulkSessionId
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`Bulk confirm failed: ${response.status}`);
-      }
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error("No response body");
-      const decoder = new TextDecoder();
-      let buffer = "";
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const events = buffer.split("\n\n");
-        buffer = events.pop() || "";
-        for (const eventStr of events) {
-          if (!eventStr.trim()) continue;
-          const lines = eventStr.split("\n");
-          let eventType = "";
-          let eventData = "";
-          for (const line of lines) {
-            if (line.startsWith("event: ")) {
-              eventType = line.slice(7);
-            } else if (line.startsWith("data: ")) {
-              eventData = line.slice(6);
-            }
-          }
-          if (!eventType || !eventData) continue;
-          try {
-            const data = JSON.parse(eventData);
-            if (eventType === "progress") {
-              setMessages((prev) => {
-                const existing = prev.find((m) => m.kind === "bulkProgress");
-                if (existing) {
-                  return prev.map(
-                    (m) => m.kind === "bulkProgress" ? { ...m, bulkProgress: { processed: data.row, total: data.total, successes: data.successes || 0, failures: data.failures || 0 } } : m
-                  );
-                } else {
-                  return [...prev, {
-                    id: Date.now(),
-                    role: "assistant",
-                    kind: "bulkProgress",
-                    bulkProgress: {
-                      processed: data.row,
-                      total: data.total,
-                      successes: data.successes || 0,
-                      failures: data.failures || 0
-                    }
-                  }];
-                }
-              });
-            } else if (eventType === "summary") {
-              setPhase("idle");
-              setProgressSteps([]);
-              setPendingBulkSession(null);
-              setMessages((prev) => {
-                const filtered = prev.filter((m) => m.kind !== "bulkProgress" && m.kind !== "bulkPreview");
-                const newMsg = {
-                  id: Date.now(),
-                  role: "assistant",
-                  kind: "bulkSummary",
-                  content: data.message,
-                  bulkSummary: {
-                    total: data.total,
-                    successes: data.successes,
-                    failures: data.failures || [],
-                    navigationPage: data.navigationPage
-                  }
-                };
-                return [...filtered, newMsg];
-              });
-              setTimeout(() => {
-                dispatchAgentAction({ bulk: true, total: data.total, successes: data.successes });
-              }, 100);
-            } else if (eventType === "error") {
-              setPhase("idle");
-              setProgressSteps([]);
-              setPendingBulkSession(null);
-              const errorMessage = {
-                id: Date.now(),
-                role: "assistant",
-                kind: "text",
-                content: data.message || "An error occurred during bulk processing."
-              };
-              setMessages((prev) => [...prev, errorMessage]);
-            }
-          } catch (parseError) {
-            console.error("Failed to parse confirm SSE event:", parseError);
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Bulk confirm failed:", error);
-      setPhase("idle");
-      setProgressSteps([]);
-      setPendingBulkSession(null);
-      const errorMessage = {
-        id: Date.now(),
-        role: "assistant",
-        kind: "text",
-        content: "Failed to start bulk operation. Please try again."
-      };
-      setMessages((prev) => [...prev, errorMessage]);
-    }
-  }
-  function cancelBulkOperation() {
-    setPendingBulkSession(null);
-    setMessages((prev) => prev.filter((m) => m.kind !== "bulkPreview"));
-  }
-  function sendTopic(prompt) {
-    startChatFlow(prompt);
-  }
-  function appendAssistantText(text) {
-    const id = Date.now() + Math.floor(Math.random() * 1e3);
-    setMessages((prev) => [...prev, { id, role: "assistant", kind: "text", content: text }]);
-  }
-  function startGuide(guideId) {
-    const guide = guides[guideId];
-    if (!guide) return;
-    setPanelView("landing");
-    setCurrentFolderId(void 0);
-    const initialGuideState = { id: guideId, stepIndex: 0 };
-    setActiveGuide(initialGuideState);
-    activeGuideRef.current = initialGuideState;
-    appendAssistantText(`I'll help you with ${guide.title}.`);
-    const firstStep = guide.steps[0];
-    const isNavigationButton = firstStep.cursorTarget?.selector.includes("[data-page=");
-    const isTabButton = firstStep.cursorTarget?.selector.includes("[data-settings-tab=");
-    if (firstStep.cursorTarget && (isNavigationButton || isTabButton)) {
-      const cursorTarget = firstStep.cursorTarget;
-      if (isTabButton && firstStep.navigation && onNavigate) {
-        onNavigate(firstStep.navigation.page, void 0);
-      }
-      const initialDelay = isTabButton ? 800 : 400;
-      setTimeout(() => {
-        const waitForElement = () => {
-          const element = document.querySelector(cursorTarget.selector);
-          if (element && element.offsetParent !== null) {
-            moveTo(cursorTarget);
-            if (cursorTarget.onClick) {
-              setTimeout(() => {
-                element.click();
-              }, 1200);
-            }
-          } else {
-            setTimeout(waitForElement, 200);
-          }
-        };
-        waitForElement();
-      }, initialDelay);
-    } else {
-      if (firstStep.navigation && onNavigate) {
-        onNavigate(firstStep.navigation.page, firstStep.navigation.subtab);
-      }
-      if (firstStep.cursorTarget) {
-        const cursorTarget = firstStep.cursorTarget;
-        const isSettingsTab = cursorTarget.selector.includes("data-settings-tab");
-        const isDialogElement = cursorTarget.selector.includes("dialog") || cursorTarget.selector.includes("api-key-name-input");
-        const initialDelay = isDialogElement ? 700 : isSettingsTab ? 600 : 400;
-        setTimeout(() => {
-          const waitForElement = () => {
-            const element = document.querySelector(cursorTarget.selector);
-            if (element && element.offsetParent !== null) {
-              moveTo(cursorTarget);
-              if (cursorTarget.onClick) {
-                setTimeout(() => {
-                  element.click();
-                }, 1e3);
-              }
-            } else if (isSettingsTab || isDialogElement) {
-              setTimeout(waitForElement, 200);
-            } else {
-              moveTo(cursorTarget);
-              if (cursorTarget.onClick) {
-                setTimeout(() => {
-                  const el = document.querySelector(cursorTarget.selector);
-                  if (el) el.click();
-                }, 1e3);
-              }
-            }
-          };
-          waitForElement();
-        }, initialDelay);
-      }
-    }
-    const draft = {
-      id: Date.now() + 1,
-      role: "assistant",
-      kind: "guideStep",
-      content: "",
-      guideStepIndex: 0
-    };
-    setMessages((prev) => [...prev, draft]);
-    streamAssistantMessage(draft.id, firstStep.text);
-  }
-  function advanceGuide() {
-    if (!activeGuide) return;
-    const guide = guides[activeGuide.id];
-    if (!guide) return;
-    let currentGuide = activeGuideRef.current;
-    if (!currentGuide || currentGuide.id !== activeGuide.id) {
-      currentGuide = activeGuide;
-      activeGuideRef.current = activeGuide;
-    }
-    const currentStepIndex = currentGuide.stepIndex;
-    const nextIndex = currentStepIndex + 1;
-    if (nextIndex >= guide.steps.length) {
-      hide();
-      const id = Date.now() + 1;
-      setMessages((prev) => [
-        ...prev,
-        { id, role: "assistant", kind: "guideComplete", content: "Guide Complete" }
-      ]);
-      setActiveGuide(void 0);
-      setGuideComplete(true);
-      return;
-    }
-    const nextStep = guide.steps[nextIndex];
-    const newGuideState = { id: activeGuide.id, stepIndex: nextIndex };
-    setActiveGuide(newGuideState);
-    activeGuideRef.current = newGuideState;
-    const draft = {
-      id: Date.now() + 1,
-      role: "assistant",
-      kind: "guideStep",
-      content: "",
-      guideStepIndex: nextIndex
-    };
-    setMessages((prev) => [...prev, draft]);
-    const isNavigationButton = nextStep.cursorTarget?.selector.includes("[data-page=");
-    const isTabButton = nextStep.cursorTarget?.selector.includes("[data-settings-tab=");
-    if (nextStep.cursorTarget && (isNavigationButton || isTabButton)) {
-      const cursorTarget = nextStep.cursorTarget;
-      if (isTabButton && nextStep.navigation && onNavigate) {
-        onNavigate(nextStep.navigation.page, void 0);
-      }
-      const initialDelay = isTabButton ? 800 : 400;
-      setTimeout(() => {
-        const currentGuideCheck = activeGuideRef.current;
-        if (!currentGuideCheck || currentGuideCheck.id !== guide.id || currentGuideCheck.stepIndex !== nextIndex) {
-          return;
-        }
-        const waitForElement = () => {
-          const currentGuideCheck2 = activeGuideRef.current;
-          if (!currentGuideCheck2 || currentGuideCheck2.id !== guide.id || currentGuideCheck2.stepIndex !== nextIndex) {
-            return;
-          }
-          const element = document.querySelector(cursorTarget.selector);
-          if (element && element.offsetParent !== null) {
-            moveTo(cursorTarget);
-            if (cursorTarget.onClick) {
-              setTimeout(() => {
-                const currentGuideCheck3 = activeGuideRef.current;
-                if (!currentGuideCheck3 || currentGuideCheck3.id !== guide.id || currentGuideCheck3.stepIndex !== nextIndex) {
-                  return;
-                }
-                element.click();
-              }, 1200);
-            }
-          } else {
-            setTimeout(waitForElement, 200);
-          }
-        };
-        waitForElement();
-      }, initialDelay);
-    } else {
-      if (nextStep.navigation && onNavigate) {
-        onNavigate(nextStep.navigation.page, nextStep.navigation.subtab);
-      }
-      if (nextStep.cursorTarget) {
-        const cursorTarget = nextStep.cursorTarget;
-        const isDialogElement = cursorTarget.selector.includes("dialog") || cursorTarget.selector.includes("api-key-name-input");
-        const isSettingsTab = cursorTarget.selector.includes("data-settings-tab");
-        const navigationSetTab = nextStep.navigation?.subtab && isSettingsTab && cursorTarget.selector.includes(`data-settings-tab="${nextStep.navigation.subtab}"`);
-        const shouldAutoClick = cursorTarget.onClick && !navigationSetTab;
-        const hasNavigation = !!nextStep.navigation;
-        const hasSubtab = !!nextStep.navigation?.subtab;
-        const navigationDelay = hasSubtab ? 700 : hasNavigation ? 400 : 0;
-        const initialDelay = navigationDelay + (isDialogElement ? 700 : isSettingsTab ? 600 : 400);
-        setTimeout(() => {
-          const currentGuideCheck = activeGuideRef.current;
-          if (!currentGuideCheck || currentGuideCheck.id !== guide.id || currentGuideCheck.stepIndex !== nextIndex) {
-            return;
-          }
-          const waitForElement = () => {
-            const currentGuideCheck2 = activeGuideRef.current;
-            if (!currentGuideCheck2 || currentGuideCheck2.id !== guide.id || currentGuideCheck2.stepIndex !== nextIndex) {
-              return;
-            }
-            const element = document.querySelector(cursorTarget.selector);
-            if (element && element.offsetParent !== null) {
-              moveTo(cursorTarget);
-              if (shouldAutoClick) {
-                setTimeout(() => {
-                  const currentGuideCheck3 = activeGuideRef.current;
-                  if (!currentGuideCheck3 || currentGuideCheck3.id !== guide.id || currentGuideCheck3.stepIndex !== nextIndex) {
-                    return;
-                  }
-                  element.click();
-                }, 1e3);
-              }
-            } else if (isDialogElement || isSettingsTab || cursorTarget.selector.includes("data-testid")) {
-              setTimeout(waitForElement, 200);
-            } else {
-              moveTo(cursorTarget);
-              if (shouldAutoClick) {
-                setTimeout(() => {
-                  const currentGuideCheck3 = activeGuideRef.current;
-                  if (!currentGuideCheck3 || currentGuideCheck3.id !== guide.id || currentGuideCheck3.stepIndex !== nextIndex) {
-                    return;
-                  }
-                  const el = document.querySelector(cursorTarget.selector);
-                  if (el) el.click();
-                }, 1e3);
-              }
-            }
-          };
-          waitForElement();
-        }, initialDelay);
-      } else {
-        hide();
-      }
-    }
-    streamAssistantMessage(draft.id, nextStep.text);
-  }
-  function goBackGuide() {
-    if (!activeGuide) return;
-    const guide = guides[activeGuide.id];
-    if (!guide) return;
-    const prevIndex = activeGuide.stepIndex - 1;
-    if (prevIndex >= 0) {
-      setActiveGuide({ id: activeGuide.id, stepIndex: prevIndex });
-      activeGuideRef.current = { id: activeGuide.id, stepIndex: prevIndex };
-      const prevStep = guide.steps[prevIndex];
-      if (prevStep.navigation && onNavigate) {
-        onNavigate(prevStep.navigation.page, prevStep.navigation.subtab);
-      }
-      if (prevStep.cursorTarget) {
-        moveTo(prevStep.cursorTarget);
-      } else {
-        hide();
-      }
-    }
-  }
-  const currentFolder = folders.find((f) => f.id === currentFolderId);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "fixed bottom-6 right-6 z-50 flex flex-col w-[380px] max-h-[600px] rounded-2xl border border-gray-200 bg-white shadow-2xl overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        (!isEmpty || panelView === "folder") && /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "icon",
-            variant: "ghost",
-            className: "h-7 w-7 rounded-full",
-            onClick: panelView === "folder" ? closeFolder : handleBack,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700", children: panelView === "folder" && currentFolder ? currentFolder.title : "AI Assistant" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "icon",
-            variant: "ghost",
-            className: "h-7 w-7 rounded-full",
-            onClick: () => setIsCollapsed(!isCollapsed),
-            children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
-          }
-        ),
-        !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "icon",
-            variant: "ghost",
-            className: "h-7 w-7 rounded-full",
-            onClick: handleBack,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "h-4 w-4" })
-          }
-        )
-      ] })
-    ] }),
-    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 flex flex-col overflow-hidden", children: isEmpty && panelView === "landing" ? (
-      // Landing view
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: folders.map((folder) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => openFolder(folder.id),
-            className: "w-full text-left px-3 py-2.5 rounded-lg hover:bg-gray-50 transition-colors border border-gray-100",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-800", children: folder.title }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-0.5", children: [
-                folder.topics.length,
-                " topics"
-              ] })
-            ]
-          },
-          folder.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 pt-4 border-t border-gray-100", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase tracking-wider text-gray-400 mb-2", children: "Interactive Guides" }),
-          Object.values(guides).map((guide) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => startGuide(guide.id),
-              className: "w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm text-gray-700",
-              children: guide.title
-            },
-            guide.id
-          ))
-        ] })
-      ] })
-    ) : isEmpty && panelView === "folder" && currentFolder ? (
-      // Folder view
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: currentFolder.topics.map((topic) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => sendTopic(topic.prompt),
-          className: "w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors text-sm text-gray-700",
-          children: topic.label
-        },
-        topic.id
-      )) }) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { ref: messagesContainerRef, className: "h-full px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-      messages.map((message, idx) => {
-        const prevMessage = idx > 0 ? messages[idx - 1] : null;
-        const isRoleChange = !prevMessage || prevMessage.role !== message.role;
-        const isCurrentGuideStep = message.kind === "guideStep" && activeGuide && message.guideStepIndex === activeGuide.stepIndex;
-        if (message.role === "user") {
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-900 whitespace-pre-wrap", children: message.content }) }, message.id);
-        }
-        if (message.kind === "navigationAction" && message.navigationTarget) {
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-700 mb-2", children: message.content }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "secondary",
-                className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
-                onClick: () => message.navigationTarget && handleConfirmNavigation(message.navigationTarget),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    "Go to ",
-                    getPageDisplayName(message.navigationTarget)
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { className: "h-3 w-3" })
-                  ] })
-                ]
-              }
-            )
-          ] }, message.id);
-        }
-        if (message.kind === "actionForm" && message.actionType && !message.isSubmitted) {
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-700 mb-3", children: message.content }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
-              "Form for: ",
-              message.actionType
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "secondary",
-                className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
-                onClick: handleActionSubmit,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Submit" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { className: "h-3 w-3" })
-                  ] })
-                ]
-              }
-            )
-          ] }, message.id);
-        }
-        if (message.kind === "bulkPreview" && message.csvData) {
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-700 mb-2", children: message.content }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "h-4 w-4 text-gray-500" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-400 ml-auto", children: [
-                  message.csvData.rowCount,
-                  " rows"
-                ] })
-              ] }),
-              message.csvData.sampleRows && message.csvData.sampleRows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600 bg-white rounded px-2 py-1 border border-gray-100", children: [
-                Object.entries(row).slice(0, 3).map(([key, val], j) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  j > 0 && " \u2022 ",
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
-                    key,
-                    ":"
-                  ] }),
-                  " ",
-                  val
-                ] }, key)),
-                Object.keys(row).length > 3 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: " ..." })
-              ] }, i)) }) }),
-              message.suggestedAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-blue-700", children: [
-                "Suggested action: ",
-                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: message.suggestedAction.replace(/_/g, " ") })
-              ] }) })
-            ] }),
-            message.bulkSessionId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: "secondary",
-                  className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
-                  onClick: () => message.bulkSessionId && confirmBulkOperation(message.bulkSessionId),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                      "Process ",
-                      message.csvData.rowCount,
-                      " rows"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "h-3 w-3" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { className: "h-3 w-3" })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: "ghost",
-                  className: "h-8 rounded-xl px-3 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100",
-                  onClick: cancelBulkOperation,
-                  children: "Cancel"
-                }
-              )
-            ] })
-          ] }, message.id);
-        }
-        if (message.kind === "bulkProgress" && message.bulkProgress) {
-          const { processed, total, successes, failures } = message.bulkProgress;
-          const percentage = Math.round(processed / total * 100);
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
-                "Processing... ",
-                processed,
-                " of ",
-                total
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full bg-blue-600 transition-all duration-300",
-                style: { width: `${percentage}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
-                successes,
-                " successful"
-              ] }),
-              failures > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-red-600", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }),
-                failures,
-                " failed"
-              ] })
-            ] })
-          ] }) }, message.id);
-        }
-        if (message.kind === "bulkSummary" && message.bulkSummary) {
-          const { total, successes, failures, navigationPage } = message.bulkSummary;
-          const hasFailures = failures.length > 0;
-          const pageLabel = navigationPage?.page === "customers" ? "Customers" : navigationPage?.page === "dashboard" ? "Dashboard" : navigationPage?.page === "settings" ? "Settings" : "Results";
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-green-700", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3 w-3" }),
-                successes,
-                " successful"
-              ] }),
-              hasFailures && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-red-600", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }),
-                failures.length,
-                " failed"
-              ] })
-            ] }),
-            hasFailures && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
-                failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-red-700 bg-red-50 rounded px-2 py-1", children: [
-                  "Row ",
-                  failure.row,
-                  ": ",
-                  failure.error || "Unknown error"
-                ] }, i)),
-                failures.length > 5 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-amber-600", children: [
-                  "...and ",
-                  failures.length - 5,
-                  " more"
-                ] })
-              ] })
-            ] }),
-            navigationPage && successes > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  if (onNavigate && navigationPage.page) {
-                    onNavigate(navigationPage.page, navigationPage.subtab);
-                  }
-                },
-                className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-gray-100 rounded text-[10px] font-medium text-gray-600 group-hover:bg-gray-200", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "h-2.5 w-2.5" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { className: "h-2.5 w-2.5" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    "View ",
-                    pageLabel
-                  ] })
-                ]
-              }
-            ) })
-          ] }) }, message.id);
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ref: isCurrentGuideStep ? currentStepRef : null,
-            className: `${isRoleChange ? "mt-3" : ""}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-700", children: (() => {
-                const text = message.content || "";
-                if (message.kind === "guideStep") {
-                  const m = text.match(/^(Step\s+\d+:)([\s\S]*)/);
-                  if (m) {
-                    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m[1] }),
-                      m[2]
-                    ] });
-                  }
-                }
-                if (message.role === "assistant" && text) {
-                  return renderMarkdown(text);
-                }
-                return text || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: "Thinking\u2026" });
-              })() }),
-              message.role === "assistant" && message.structuredData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                DataRenderer,
-                {
-                  type: message.structuredData.type,
-                  data: message.structuredData.data
-                }
-              ) }),
-              message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => handleFollowupClick(message.id, followup),
-                  className: "inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-xl\n                                           bg-white hover:bg-gray-50 text-gray-600 hover:text-gray-800\n                                           border border-gray-200 hover:border-gray-300 shadow-sm\n                                           transition-all duration-150 ease-in-out",
-                  children: followup.label
-                },
-                followup.id
-              )) })
-            ]
-          }
-        ) }, message.id);
-      }),
-      (activeGuide || guideComplete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
-        activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "secondary",
-            className: "h-7 w-7 rounded-full p-0 bg-gray-100 hover:bg-gray-200 border border-gray-200",
-            onClick: goBackGuide,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "secondary",
-            className: "h-8 rounded-xl px-3 text-xs gap-1.5 bg-gray-100 hover:bg-gray-200 border border-gray-200",
-            onClick: guideComplete ? handleBack : advanceGuide,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: guideComplete ? "Done" : "Next" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "h-3 w-3" }),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { className: "h-3 w-3" })
-              ] })
-            ]
-          }
-        )
-      ] }),
-      (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-        AssistantActivity,
-        {
-          phase,
-          progressSteps
-        }
-      ) }),
-      !activeGuide && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-    ] }) }) }) }) }),
-    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
-      pendingFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setPendingFile(null);
-              if (fileInputRef.current) fileInputRef.current.value = "";
-            },
-            className: "text-blue-600 hover:text-blue-800",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            accept: ".csv",
-            className: "hidden",
-            onChange: (e) => {
-              const file = e.target.files?.[0];
-              if (file) {
-                setPendingFile(file);
-              }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              size: "icon",
-              variant: "ghost",
-              onClick: () => fileInputRef.current?.click(),
-              className: "h-8 w-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
-              title: "Upload CSV for bulk operations",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
-              value: input,
-              onChange: (e) => setInput(e.target.value),
-              className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "submit",
-              size: "icon",
-              disabled: !input.trim() && !pendingFile,
-              className: "h-8 w-8 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    enableGuideCursor && /* @__PURE__ */ jsxRuntime.jsx(
-      GuideCursor,
-      {
-        x: cursorState.x,
-        y: cursorState.y,
-        visible: cursorState.visible,
-        onClick: cursorState.onClick
-      }
-    )
-  ] });
-}
-function AssistantSearchSummary({
-  title,
-  links
-}) {
-  const [open, setOpen] = React4__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((v) => !v),
-        className: "flex w-full items-center gap-2 px-0 py-0",
-        "aria-expanded": open,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3 opacity-70" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-3 w-3 opacity-70" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
-        ] })
-      }
-    ),
-    open && links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ml-5 mt-1 space-y-0.5", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: link.href,
-        target: "_blank",
-        rel: "noreferrer",
-        className: "text-primary hover:underline",
-        children: link.label
-      }
-    ) }, link.href)) })
-  ] });
-}
-
-exports.AssistantActivity = AssistantActivity;
-exports.AssistantSearchSummary = AssistantSearchSummary;
-exports.Button = Button;
-exports.Card = Card;
-exports.CardAction = CardAction;
-exports.CardContent = CardContent;
-exports.CardDescription = CardDescription;
-exports.CardFooter = CardFooter;
-exports.CardHeader = CardHeader;
-exports.CardTitle = CardTitle;
-exports.ChatPanel = ChatPanel;
-exports.ChatPanelProvider = ChatPanelProvider;
-exports.DataRenderer = DataRenderer;
-exports.GuideCursor = GuideCursor;
-exports.Input = Input;
-exports.ScrollArea = ScrollArea;
-exports.ScrollBar = ScrollBar;
-exports.buttonVariants = buttonVariants;
-exports.cn = cn;
-exports.defaultConfig = defaultConfig;
-exports.defaultFolders = defaultFolders;
-exports.defaultGuides = defaultGuides;
-exports.useChatPanelConfig = useChatPanelConfig;
-exports.useGuideCursor = useGuideCursor;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map