@kite-copilot/chat-panel 0.1.2 → 0.2.1

package/dist/auto.cjs

@@ -0,0 +1,3638 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/auto.ts
+var auto_exports = {};
+__export(auto_exports, {
+  mountKiteChat: () => mountKiteChat
+});
+module.exports = __toCommonJS(auto_exports);
+
+// src/createKiteChat.tsx
+var import_react = __toESM(require("react"), 1);
+var import_client = require("react-dom/client");
+
+// src/ChatPanel.tsx
+var React4 = __toESM(require("react"), 1);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/input.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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
+    }
+  );
+}
+
+// src/components/ui/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/scroll-area.tsx
+var React = __toESM(require("react"), 1);
+var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ScrollAreaPrimitive.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__ */ (0, import_jsx_runtime3.jsx)(ScrollBar, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+});
+ScrollArea.displayName = "ScrollArea";
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    ScrollAreaPrimitive.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__ */ (0, import_jsx_runtime3.jsx)(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+
+// src/ChatPanel.tsx
+var import_lucide_react4 = require("lucide-react");
+
+// src/components/AssistantActivity.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AssistantActivity({
+  phase,
+  progressSteps = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Thinking\u2026" })
+    ] }),
+    phase === "searching" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2 animate-in fade-in-0 duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Search, { className: "h-3.5 w-3.5 opacity-70" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Searching across pages\u2026" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ul", { className: "ml-6 list-disc space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "opacity-90", children: "Checking recent changes" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "opacity-90", children: "Scanning documentation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "opacity-90", children: "Summarizing relevant sections" })
+      ] })
+    ] }),
+    (phase === "thinking" || phase === "executing" || phase === "responding") && progressSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-2 animate-in fade-in-0 duration-200", children: [
+      progressSteps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: `flex items-center gap-2 transition-opacity duration-200 ${step.completed ? "opacity-60" : "opacity-100"}`,
+          children: [
+            step.completed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.CheckCircle2, { className: "h-3.5 w-3.5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Loader2, { className: "h-3.5 w-3.5 animate-spin flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: step.completed ? "line-through" : "", children: step.message })
+          ]
+        },
+        index
+      )),
+      phase === "responding" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 opacity-100 animate-in fade-in-0 duration-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Loader2, { className: "h-3.5 w-3.5 animate-spin flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Preparing response..." })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/AssistantSearchSummary.tsx
+var React2 = __toESM(require("react"), 1);
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function AssistantSearchSummary({
+  title,
+  links
+}) {
+  const [open, setOpen] = React2.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ChevronDown, { className: "h-3 w-3 opacity-70" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Search, { className: "h-3 w-3 opacity-70" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: title })
+        ] })
+      }
+    ),
+    open && links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "ml-5 mt-1 space-y-0.5", children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "a",
+      {
+        href: link.href,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "text-primary hover:underline",
+        children: link.label
+      }
+    ) }, link.href)) })
+  ] });
+}
+
+// src/components/GuideCursor.tsx
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function GuideCursor({ x, y, visible, onClick = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion.AnimatePresence, { children: visible && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_framer_motion.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__ */ (0, import_jsx_runtime6.jsx)(
+        "svg",
+        {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "path",
+            {
+              d: "M3 3L10.07 19.97L12.58 12.58L19.97 10.07L3 3Z",
+              fill: "#C4B5FD"
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+
+// src/hooks/useGuideCursor.ts
+var React3 = __toESM(require("react"), 1);
+function useGuideCursor() {
+  const [cursorState, setCursorState] = React3.useState({
+    x: 0,
+    y: 0,
+    visible: false,
+    onClick: false
+  });
+  const moveTo = React3.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 = React3.useCallback(() => {
+    setCursorState((prev) => ({ ...prev, visible: false }));
+  }, []);
+  const show = React3.useCallback(() => {
+    setCursorState((prev) => ({ ...prev, visible: true }));
+  }, []);
+  return {
+    cursorState,
+    moveTo,
+    hide,
+    show
+  };
+}
+
+// src/components/ui/card.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/data-cards.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+};
+var formatCurrency = (amount, currency = "USD") => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  }).format(amount);
+};
+var getPlanIcon = (plan) => {
+  switch (plan) {
+    case "Enterprise":
+      return import_lucide_react3.Crown;
+    case "Professional":
+      return import_lucide_react3.Zap;
+    default:
+      return import_lucide_react3.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: import_lucide_react3.CheckCircle2 };
+        case "failed":
+          return { color: "bg-red-50 text-red-700 border-red-200", icon: import_lucide_react3.XCircle };
+        case "pending":
+          return { color: "bg-amber-50 text-amber-700 border-amber-200", icon: import_lucide_react3.Clock };
+        case "refunded":
+          return { color: "bg-slate-50 text-slate-700 border-slate-200", icon: import_lucide_react3.RefreshCw };
+        default:
+          return { color: "bg-gray-50 text-gray-700 border-gray-200", icon: import_lucide_react3.AlertCircle };
+      }
+    }
+    if (type === "subscription") {
+      switch (statusLower) {
+        case "active":
+          return { color: "bg-emerald-50 text-emerald-700 border-emerald-200", icon: import_lucide_react3.CheckCircle2 };
+        case "cancelled":
+          return { color: "bg-slate-50 text-slate-700 border-slate-200", icon: import_lucide_react3.XCircle };
+        case "past_due":
+          return { color: "bg-red-50 text-red-700 border-red-200", icon: import_lucide_react3.AlertCircle };
+        case "trialing":
+          return { color: "bg-blue-50 text-blue-700 border-blue-200", icon: import_lucide_react3.Clock };
+        default:
+          return { color: "bg-gray-50 text-gray-700 border-gray-200", icon: import_lucide_react3.AlertCircle };
+      }
+    }
+    switch (statusLower) {
+      case "active":
+        return { color: "bg-emerald-50 text-emerald-700 border-emerald-200", icon: import_lucide_react3.CheckCircle2 };
+      case "inactive":
+        return { color: "bg-slate-50 text-slate-700 border-slate-200", icon: import_lucide_react3.XCircle };
+      default:
+        return { color: "bg-gray-50 text-gray-700 border-gray-200", icon: import_lucide_react3.AlertCircle };
+    }
+  };
+  const config = getConfig();
+  const Icon = config.icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "h-3 w-3" }),
+    status
+  ] });
+}
+function SubscriptionCard({ subscription }) {
+  const PlanIcon = getPlanIcon(subscription.plan);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `h-1 ${subscription.status === "active" ? "bg-emerald-500" : subscription.status === "past_due" ? "bg-red-500" : "bg-slate-300"}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-base font-semibold text-gray-900 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CreditCard, { className: "h-4 w-4 text-gray-500" }),
+          subscription.id
+        ] }),
+        subscription.customer_email && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardDescription, { className: "text-sm text-gray-500 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Mail, { className: "h-3 w-3" }),
+          subscription.customer_email
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusBadge, { status: subscription.status, type: "subscription" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContent, { className: "pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Plan" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(PlanIcon, { className: "h-3 w-3" }),
+            subscription.plan
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Billing" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm font-medium text-gray-900", children: [
+            formatCurrency(subscription.amount, subscription.currency),
+            " / ",
+            subscription.billing_cycle
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Current Period" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm text-gray-700", children: [
+            formatDate(subscription.current_period_start),
+            " - ",
+            formatDate(subscription.current_period_end)
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Created" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "py-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CreditCard, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-500", children: "No subscriptions found" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CreditCard, { className: "h-4 w-4" }),
+      subscriptions.length,
+      " Subscription",
+      subscriptions.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "divide-y divide-gray-100", children: displaySubs.map((sub) => {
+        const PlanIcon = getPlanIcon(sub.plan);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `p-2 rounded-lg ${getPlanColor(sub.plan).replace("text-", "text-").replace("border-", "bg-").split(" ")[0]}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlanIcon, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900 truncate", children: sub.customer_email || sub.customer_id }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-gray-500", children: [
+                sub.plan,
+                " \xB7 ",
+                formatCurrency(sub.amount, sub.currency),
+                "/",
+                sub.billing_cycle
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusBadge, { status: sub.status, type: "subscription" })
+        ] }) }, sub.id);
+      }) }),
+      hasMore && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-100 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `h-1 ${customer.status === "active" ? "bg-emerald-500" : "bg-slate-300"}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardTitle, { className: "text-base font-semibold text-gray-900", children: customer.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardDescription, { className: "text-sm text-gray-500 flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Mail, { className: "h-3 w-3" }),
+          customer.email
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusBadge, { status: customer.status, type: "customer" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContent, { className: "pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Plan" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(PlanIcon, { className: "h-3 w-3" }),
+            customer.subscription
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Revenue" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm font-medium text-gray-900 flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.DollarSign, { className: "h-3 w-3 text-emerald-500" }),
+            customer.revenue
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Location" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm text-gray-700 flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.MapPin, { className: "h-3 w-3 text-gray-400" }),
+            customer.location || "Not specified"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mb-1", children: "Customer Since" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm text-gray-700 flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.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__ */ (0, import_jsx_runtime8.jsx)(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "py-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Users, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-500", children: "No customers found" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Users, { className: "h-4 w-4" }),
+      customers.length,
+      " Customer",
+      customers.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "divide-y divide-gray-100", children: displayCustomers.map((customer) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-3 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900 truncate", children: customer.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 truncate", children: customer.email })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${getPlanColor(customer.subscription)}`, children: customer.subscription }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusBadge, { status: customer.status, type: "customer" })
+        ] })
+      ] }) }, customer.id)) }),
+      hasMore && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-100 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "py-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.DollarSign, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-500", children: "No transactions found" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.DollarSign, { className: "h-4 w-4" }),
+      transactions.length,
+      " Transaction",
+      transactions.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "divide-y divide-gray-100", children: displayTransactions.map((tx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CheckCircle2, { className: "h-4 w-4 text-emerald-600" }) : tx.status === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.XCircle, { className: "h-4 w-4 text-red-600" }) : tx.status === "refunded" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.RefreshCw, { className: "h-4 w-4 text-slate-600" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Clock, { className: "h-4 w-4 text-amber-600" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900 truncate", children: tx.customer }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-gray-500", children: [
+              tx.date,
+              tx.decline_reason && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-red-500 ml-2", children: [
+                "\xB7 ",
+                tx.decline_reason
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(StatusBadge, { status: tx.status, type: "transaction" })
+        ] })
+      ] }) }, tx.id)) }),
+      hasMore && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-100 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsx)(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "py-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Key, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-500", children: "No API keys found" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Key, { className: "h-4 w-4" }),
+      apiKeys.length,
+      " API Key",
+      apiKeys.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContent, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "divide-y divide-gray-100", children: apiKeys.map((key, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900", children: key.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-gray-500 font-mono", children: [
+          key.key.slice(0, 12),
+          "...",
+          key.key.slice(-4)
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.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 import_lucide_react3.Smartphone;
+    }
+    return import_lucide_react3.Laptop;
+  };
+  if (sessions.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "py-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Shield, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-500", children: "No active sessions" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Shield, { className: "h-4 w-4" }),
+      sessions.length,
+      " Active Session",
+      sessions.length !== 1 ? "s" : ""
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContent, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "divide-y divide-gray-100", children: sessions.map((session, idx) => {
+      const DeviceIcon = getDeviceIcon(session.device);
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "p-2 rounded-lg bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DeviceIcon, { className: "h-4 w-4 text-gray-600" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900", children: session.device }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-gray-500 flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.MapPin, { className: "h-3 w-3" }),
+              session.location
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500", children: session.time })
+      ] }) }, idx);
+    }) }) })
+  ] });
+}
+function DashboardStatsCard({ stats }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.TrendingUp, { className: "h-4 w-4" }),
+      "Dashboard Overview"
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContent, { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
+      stats.revenue && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-3 rounded-lg bg-emerald-50 border border-emerald-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-emerald-600 font-medium mb-1", children: "Revenue" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-lg font-bold text-emerald-700", children: formatCurrency(stats.revenue.total) }),
+        stats.revenue.change !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-3 rounded-lg bg-blue-50 border border-blue-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Subscriptions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-lg font-bold text-blue-700", children: [
+          stats.subscriptions.active,
+          " active"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-blue-600", children: [
+          stats.subscriptions.total,
+          " total"
+        ] })
+      ] }),
+      stats.customers && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-3 rounded-lg bg-purple-50 border border-purple-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-purple-600 font-medium mb-1", children: "Customers" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-lg font-bold text-purple-700", children: stats.customers.total }),
+        stats.customers.new > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-purple-600", children: [
+          "+",
+          stats.customers.new,
+          " new this period"
+        ] })
+      ] }),
+      stats.transactions && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-3 rounded-lg bg-amber-50 border border-amber-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-amber-600 font-medium mb-1", children: "Transactions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-lg font-bold text-amber-700", children: [
+          stats.transactions.successful,
+          " successful"
+        ] }),
+        stats.transactions.failed > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-red-600", children: [
+          stats.transactions.failed,
+          " failed"
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function TopCustomersList({ customers }) {
+  if (customers.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Card, { className: "border-gray-200 shadow-sm bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardContent, { className: "py-8 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Crown, { className: "h-10 w-10 text-gray-300 mx-auto mb-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-500", children: "No top customers data" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { className: "border-gray-200 shadow-sm bg-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardHeader, { className: "pb-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CardTitle, { className: "text-sm font-medium text-gray-700 flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Crown, { className: "h-4 w-4 text-amber-500" }),
+      "Top Customers"
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardContent, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "divide-y divide-gray-100", children: customers.map((customer, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-4 py-3 hover:bg-gray-50 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900 truncate", children: customer.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 truncate", children: customer.email })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.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;
+  switch (type) {
+    case "subscription":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SubscriptionCard, { subscription: data });
+    case "subscriptions":
+      const subs = data.subscriptions || data || [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SubscriptionList, { subscriptions: Array.isArray(subs) ? subs : [subs] });
+    case "customer":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CustomerCard, { customer: data.customer || data });
+    case "customers":
+      const custs = data.customers || data || [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CustomerList, { customers: Array.isArray(custs) ? custs : [custs] });
+    case "transactions":
+      const txs = data.transactions || data || [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TransactionList, { transactions: Array.isArray(txs) ? txs : [txs] });
+    case "transaction":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TransactionList, { transactions: [data], maxItems: 1 });
+    case "dashboard_stats":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DashboardStatsCard, { stats: data });
+    case "top_customers":
+      const topCustomers = data.customers || data || [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TopCustomersList, { customers: Array.isArray(topCustomers) ? topCustomers : [topCustomers] });
+    case "api_keys":
+      const keys = data.api_keys || data || [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ApiKeyList, { apiKeys: Array.isArray(keys) ? keys : [keys] });
+    case "sessions":
+      const sessions = data.sessions || data || [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SessionList, { sessions: Array.isArray(sessions) ? sessions : [sessions] });
+    default:
+      return null;
+  }
+}
+
+// src/ChatPanel.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_AGENT_URL = "http://localhost:5002";
+var PANEL_WIDTH = 400;
+function renderMarkdown(text) {
+  if (!text) return null;
+  const lines = text.split("\n");
+  const elements = [];
+  let currentList = null;
+  let inCodeBlock = false;
+  let codeContent = [];
+  let codeLanguage = "";
+  const processInlineFormatting = (line) => {
+    const parts = [];
+    let remaining = line;
+    let keyIndex = 0;
+    while (remaining.length > 0) {
+      const codeMatch = remaining.match(/^`([^`]+)`/);
+      if (codeMatch) {
+        parts.push(
+          /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("strong", { children: boldMatch[1] }, keyIndex++));
+        remaining = remaining.slice(boldMatch[0].length);
+        continue;
+      }
+      const italicMatch = remaining.match(/^\*([^*]+)\*/);
+      if (italicMatch) {
+        parts.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: italicMatch[1] }, keyIndex++));
+        remaining = remaining.slice(italicMatch[0].length);
+        continue;
+      }
+      const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
+      if (linkMatch) {
+        parts.push(
+          /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: parts });
+  };
+  const flushList = () => {
+    if (currentList) {
+      const ListTag = currentList.type === "ul" ? "ul" : "ol";
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ListTag, { className: `${currentList.type === "ul" ? "list-disc" : "list-decimal"} ml-4 my-1`, children: currentList.items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "bg-gray-100 rounded p-2 my-1 overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "text-xs font-mono", children: codeContent.join("\n") }) }, elements.length)
+        );
+        inCodeBlock = false;
+        codeContent = [];
+        codeLanguage = "";
+      } else {
+        flushList();
+        inCodeBlock = true;
+        codeLanguage = 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__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2" }, elements.length));
+      continue;
+    }
+    if (line.match(/^[-*_]{3,}$/)) {
+      flushList();
+      elements.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: "my-2 border-gray-200" }, elements.length));
+      continue;
+    }
+    flushList();
+    elements.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: processInlineFormatting(line) }, elements.length));
+  }
+  flushList();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: elements });
+}
+var defaultStartingQuestions = [
+  {
+    id: "changing-layouts",
+    label: "Changing layouts",
+    prompt: "How can I customize and change the layout of my dashboard?",
+    icon: "layout"
+  },
+  {
+    id: "bulk-uploads",
+    label: "Bulk uploads",
+    prompt: "How do I perform bulk uploads of data using CSV files?",
+    icon: "upload"
+  },
+  {
+    id: "example-setups",
+    label: "Example setups",
+    prompt: "Can you show me some example configurations and setups?",
+    icon: "setup"
+  }
+];
+var folders = [
+  {
+    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 guides = {
+  "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 initialMessages = [];
+function ChatPanel({
+  isOpen = true,
+  onClose,
+  onBack,
+  onNavigate,
+  onActionComplete,
+  currentPage,
+  agentUrl = DEFAULT_AGENT_URL,
+  startingQuestions: startingQuestionsProp,
+  startingQuestionsEndpoint
+} = {}) {
+  const [messages, setMessages] = React4.useState(initialMessages);
+  const [input, setInput] = React4.useState("");
+  const [sessionId] = React4.useState(() => crypto.randomUUID());
+  const streamIntervals = React4.useRef({});
+  const isEmpty = messages.length === 0;
+  const [phase, setPhase] = React4.useState("idle");
+  const [progressSteps, setProgressSteps] = React4.useState([]);
+  const phaseTimers = React4.useRef([]);
+  const lastRole = messages.length ? messages[messages.length - 1].role : void 0;
+  const [panelView, setPanelView] = React4.useState("landing");
+  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
+  const [startingQuestions, setStartingQuestions] = React4.useState(
+    startingQuestionsProp || defaultStartingQuestions
+  );
+  const [loadingQuestions, setLoadingQuestions] = React4.useState(false);
+  React4.useEffect(() => {
+    if (startingQuestionsEndpoint && !startingQuestionsProp) {
+      setLoadingQuestions(true);
+      fetch(startingQuestionsEndpoint).then((res) => res.json()).then((data) => {
+        if (Array.isArray(data) && data.length > 0) {
+          setStartingQuestions(data);
+        }
+      }).catch((err) => {
+        console.warn("[KiteChat] Failed to fetch starting questions:", err);
+      }).finally(() => setLoadingQuestions(false));
+    }
+  }, [startingQuestionsEndpoint, startingQuestionsProp]);
+  React4.useEffect(() => {
+    if (startingQuestionsProp) {
+      setStartingQuestions(startingQuestionsProp);
+    }
+  }, [startingQuestionsProp]);
+  const [activeGuide, setActiveGuide] = React4.useState(void 0);
+  const activeGuideRef = React4.useRef(void 0);
+  const latestBulkSummaryNavigationRef = React4.useRef(null);
+  const [guideComplete, setGuideComplete] = React4.useState(false);
+  React4.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.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.useState(null);
+  const [pendingAction, setPendingAction] = React4.useState(null);
+  const [actionFormData, setActionFormData] = React4.useState({});
+  const messagesEndRef = React4.useRef(null);
+  const messagesContainerRef = React4.useRef(null);
+  const currentStepRef = React4.useRef(null);
+  const { cursorState, moveTo, hide } = useGuideCursor();
+  const [pendingFile, setPendingFile] = React4.useState(null);
+  const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
+  const pendingBulkSessionRef = React4.useRef(null);
+  const fileInputRef = React4.useRef(null);
+  React4.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.useEffect(() => {
+    return () => {
+      Object.values(streamIntervals.current).forEach((id) => window.clearInterval(id));
+      streamIntervals.current = {};
+      phaseTimers.current.forEach((id) => window.clearTimeout(id));
+      phaseTimers.current = [];
+    };
+  }, []);
+  React4.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.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.useEffect(() => {
+    latestBulkSummaryNavigationRef.current = latestBulkSummaryNavigation;
+  }, [latestBulkSummaryNavigation]);
+  React4.useEffect(() => {
+    pendingBulkSessionRef.current = pendingBulkSession;
+  }, [pendingBulkSession]);
+  React4.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;
+        console.log("[DEBUG] Keyboard handler - latestBulkSummaryNavigation:", currentBulkNav, "onNavigate:", !!onNavigate);
+        if (currentBulkNav && onNavigate) {
+          console.log("[DEBUG] Navigating via keyboard to:", currentBulkNav.page);
+          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]} tab)`;
+    }
+    return pageNames[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({});
+  }
+  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,
+          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: "",
+                  // Include structured data for rich UI rendering
+                  structuredData: agentResponse.structuredData || void 0
+                };
+                setMessages((prev) => [...prev, assistantMessage]);
+                streamAssistantMessage(assistantMessageId, agentResponse.response, agentResponse.followups);
+                streamCompleted = true;
+                setTimeout(() => {
+                  window.dispatchEvent(new CustomEvent("agentActionComplete", {
+                    detail: { result: 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 on port 5002. For simple navigation requests, I can still help you locally.");
+    } 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("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} rows in your CSV. Here's a preview:`,
+                csvData: {
+                  rowCount: data.csv_data.rowCount,
+                  columns: data.csv_data.columns,
+                  sampleRows: data.csv_data.sampleRows,
+                  fileName: file.name
+                },
+                suggestedAction: data.suggested_action,
+                bulkSessionId: bulkSessionId || void 0
+              };
+              setMessages((prev) => [...prev, previewMessage]);
+            } else if (eventType === "progress") {
+              setPhase("executing");
+              setProgressSteps([{
+                message: `Processing row ${data.row} of ${data.total}...`,
+                completed: false
+              }]);
+              setMessages((prev) => {
+                const lastMsg = prev[prev.length - 1];
+                if (lastMsg?.kind === "bulkProgress") {
+                  return prev.map(
+                    (m, i) => i === prev.length - 1 ? { ...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");
+                return [...filtered, {
+                  id: Date.now(),
+                  role: "assistant",
+                  kind: "bulkSummary",
+                  content: data.message,
+                  bulkSummary: {
+                    total: data.total,
+                    successes: data.successes,
+                    failures: data.failures || [],
+                    navigationPage: data.navigationPage
+                  }
+                }];
+              });
+              setTimeout(() => {
+                window.dispatchEvent(new CustomEvent("agentActionComplete", {
+                  detail: { result: { bulk: true, total: data.total, successes: data.successes } }
+                }));
+              }, 100);
+            } else if (eventType === "error") {
+              setPhase("idle");
+              setProgressSteps([]);
+              setPendingBulkSession(null);
+              const errorMessage = {
+                id: now + 1,
+                role: "assistant",
+                kind: "text",
+                content: data.message || "An error occurred processing your CSV file."
+              };
+              setMessages((prev) => [...prev, errorMessage]);
+            } else if (eventType === "done") {
+              setPhase("idle");
+              setProgressSteps([]);
+            }
+          } catch (parseError) {
+            console.error("Failed to parse bulk SSE event:", parseError);
+          }
+        }
+      }
+      setProgressSteps([]);
+      setPhase("idle");
+    } catch (error) {
+      console.error("Bulk upload failed:", error);
+      setProgressSteps([]);
+      setPhase("idle");
+      const errorMessage = {
+        id: now + 1,
+        role: "assistant",
+        kind: "text",
+        content: "I'm having trouble processing your CSV file. Please make sure the agent server is running on port 5002 and try again."
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    }
+  }
+  async function confirmBulkOperation(bulkSessionId) {
+    setPhase("executing");
+    setProgressSteps([{ message: "Starting bulk operation...", completed: false }]);
+    try {
+      const response = await fetch(`${agentUrl}/chat/bulk/confirm`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ bulk_session_id: bulkSessionId })
+      });
+      if (!response.ok) {
+        throw new Error(`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") {
+              setProgressSteps([{
+                message: `Processing row ${data.row} of ${data.total}...`,
+                completed: false
+              }]);
+              setMessages((prev) => {
+                const lastMsg = prev[prev.length - 1];
+                if (lastMsg?.kind === "bulkProgress") {
+                  return prev.map(
+                    (m, i) => i === prev.length - 1 ? { ...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") {
+              console.log("[DEBUG] Received summary event - data:", data);
+              console.log("[DEBUG] navigationPage from backend:", data.navigationPage);
+              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
+                  }
+                };
+                console.log("[DEBUG] Creating bulkSummary message:", newMsg);
+                return [...filtered, newMsg];
+              });
+              setTimeout(() => {
+                window.dispatchEvent(new CustomEvent("agentActionComplete", {
+                  detail: { result: { 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
+      // First step is index 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 currentGuide2 = activeGuideRef.current;
+        if (!currentGuide2 || currentGuide2.id !== guide.id || currentGuide2.stepIndex !== nextIndex) {
+          return;
+        }
+        const waitForElement = () => {
+          const currentGuide3 = activeGuideRef.current;
+          if (!currentGuide3 || currentGuide3.id !== guide.id || currentGuide3.stepIndex !== nextIndex) {
+            return;
+          }
+          const element = document.querySelector(cursorTarget.selector);
+          if (element && element.offsetParent !== null) {
+            moveTo(cursorTarget);
+            if (cursorTarget.onClick) {
+              setTimeout(() => {
+                const currentGuide4 = activeGuideRef.current;
+                if (!currentGuide4 || currentGuide4.id !== guide.id || currentGuide4.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 currentGuide2 = activeGuideRef.current;
+          if (!currentGuide2 || currentGuide2.id !== guide.id || currentGuide2.stepIndex !== nextIndex) {
+            return;
+          }
+          const waitForElement = () => {
+            const currentGuide3 = activeGuideRef.current;
+            if (!currentGuide3 || currentGuide3.id !== guide.id || currentGuide3.stepIndex !== nextIndex) {
+              return;
+            }
+            const element = document.querySelector(cursorTarget.selector);
+            if (element && element.offsetParent !== null) {
+              moveTo(cursorTarget);
+              if (shouldAutoClick) {
+                setTimeout(() => {
+                  const currentGuide4 = activeGuideRef.current;
+                  if (!currentGuide4 || currentGuide4.id !== guide.id || currentGuide4.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 currentGuide4 = activeGuideRef.current;
+                  if (!currentGuide4 || currentGuide4.id !== guide.id || currentGuide4.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 });
+      const prevStep = guide.steps[prevIndex];
+      if (prevStep.navigation && onNavigate) {
+        onNavigate(prevStep.navigation.page, prevStep.navigation.subtab);
+      }
+      if (prevStep.cursorTarget) {
+        setTimeout(() => {
+          moveTo(prevStep.cursorTarget);
+        }, 500);
+      } else {
+        hide();
+      }
+      const existingMessages = messages.filter((m) => m.kind !== "guideStep" && m.kind !== "guideComplete");
+      setMessages([
+        ...existingMessages,
+        { id: Date.now(), role: "assistant", kind: "guideStep", content: prevStep.text }
+      ]);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "section",
+    {
+      className: `fixed top-0 right-0 z-40 flex flex-col bg-white border-l border-gray-200 h-full overflow-hidden transition-transform duration-300 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
+      style: { width: `${PANEL_WIDTH}px` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Help" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7 w-7 p-0 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full",
+              onClick: () => {
+                setMessages([]);
+                setPanelView("landing");
+                setCurrentFolderId(void 0);
+                setActiveGuide(void 0);
+                activeGuideRef.current = void 0;
+                setGuideComplete(false);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.SquarePen, { className: "h-3.5 w-3.5" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: isEmpty ? "grid flex-1 place-items-center transition-all duration-300" : "flex flex-1 flex-col transition-all duration-300 min-h-0 overflow-hidden", children: isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-full overflow-y-auto px-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "py-4 transition-all duration-300", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-center text-2xl font-semibold text-gray-900", children: panelView === "folder" ? folders.find((f) => f.id === currentFolderId)?.title || "" : "What can I help with?" }),
+            panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-center text-xs text-gray-500", children: "Ask me anything about your account" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4", children: [
+            panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "secondary",
+                  className: "w-full justify-start rounded-xl border border-primary/20 bg-primary/5 px-3 py-2.5 text-xs font-medium text-primary shadow-none transition-all hover:bg-primary/10 hover:border-primary/30 h-auto mb-4",
+                  onClick: () => startGuide("getting-started"),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Play, { className: "mr-2 h-3.5 w-3.5" }),
+                    "Getting started"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
+                const iconColors = ["bg-blue-400", "bg-green-400", "bg-purple-400", "bg-orange-400", "bg-pink-400"];
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    size: "sm",
+                    variant: "ghost",
+                    className: "w-full justify-start rounded-lg px-3 py-2 text-xs text-gray-700 hover:bg-gray-100 h-auto",
+                    onClick: () => sendTopic(question.prompt),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `mr-2 inline-block h-1.5 w-1.5 rounded-full ${iconColors[index % iconColors.length]}` }),
+                      question.label
+                    ]
+                  },
+                  question.id
+                );
+              }) })
+            ] }),
+            panelView === "folder" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    className: "h-7 w-7 rounded-full hover:bg-gray-100",
+                    onClick: closeFolder,
+                    "aria-label": "Back to suggestions",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-4 w-4 text-gray-500" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium uppercase tracking-wide text-gray-400", children: "Topics" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1.5", children: folders.find((f) => f.id === currentFolderId)?.topics.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "secondary",
+                  className: "justify-start rounded-xl border border-gray-200 bg-gray-50 px-3 py-2.5 text-xs text-gray-700 shadow-none transition-all hover:bg-gray-100 hover:border-gray-300 h-auto",
+                  onClick: () => sendTopic(topic.prompt),
+                  children: topic.label
+                },
+                topic.id
+              )) })
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollArea, { ref: messagesContainerRef, className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2 px-4 py-3", children: [
+          messages.map((message, index) => {
+            const isUser = message.role === "user";
+            const previousRole = index > 0 ? messages[index - 1].role : void 0;
+            const isRoleChange = previousRole !== void 0 && previousRole !== message.role;
+            const currentGuide = activeGuideRef.current || activeGuide;
+            let isCurrentGuideStep = false;
+            if (currentGuide && message.kind === "guideStep") {
+              if (message.guideStepIndex !== void 0) {
+                isCurrentGuideStep = message.guideStepIndex === currentGuide.stepIndex;
+              } else {
+                isCurrentGuideStep = index === messages.length - 1;
+              }
+            } else if (message.kind === "guideComplete") {
+              isCurrentGuideStep = index === messages.length - 1;
+            }
+            if (message.kind === "guideStep" && !isCurrentGuideStep) {
+              return null;
+            }
+            if (isUser) {
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[280px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
+            }
+            if (message.kind === "searchSummary") {
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AssistantSearchSummary, { title: message.title ?? "Search results", links: message.links ?? [] }) }, message.id);
+            }
+            if (message.kind === "guideComplete") {
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "div",
+                {
+                  ref: isCurrentGuideStep ? currentStepRef : null,
+                  className: `${isRoleChange ? "mt-3" : ""}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-green-50 border border-green-200 px-3 py-2.5 text-sm leading-6", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-green-800", children: message.content })
+                  ] })
+                },
+                message.id
+              );
+            }
+            if (message.kind === "navigationAction") {
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-2 text-gray-700", children: message.content || "" }),
+                message.navigationTarget && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                      ] })
+                    ]
+                  }
+                ) })
+              ] }, message.id);
+            }
+            if (message.kind === "actionForm") {
+              const actionType = message.actionType;
+              const formData = Object.keys(actionFormData).length > 0 ? actionFormData : message.actionData || {};
+              if (message.isSubmitted) {
+                let successContent = "";
+                if (actionType === "updateCompanyInfo") {
+                  successContent = "Company information has been updated successfully.";
+                } else if (actionType === "addApiKey") {
+                  successContent = "API key has been added successfully.";
+                } else if (actionType === "addCustomer") {
+                  successContent = "Customer has been added successfully.";
+                } else if (actionType === "enable2FA") {
+                  successContent = "Two-factor authentication has been enabled successfully.";
+                } else if (actionType === "disable2FA") {
+                  successContent = "Two-factor authentication has been disabled successfully.";
+                } else if (actionType === "changePassword") {
+                  successContent = "Your password has been changed successfully.";
+                } else if (actionType === "revokeSession") {
+                  successContent = "Session has been revoked successfully.";
+                } else if (actionType === "toggleNotification") {
+                  successContent = "Notification preferences have been updated successfully.";
+                } else if (actionType === "connectIntegration") {
+                  successContent = "Integration has been connected successfully.";
+                } else if (actionType === "disconnectIntegration") {
+                  successContent = "Integration has been disconnected successfully.";
+                } else if (actionType === "addPaymentMethod") {
+                  successContent = "Payment method has been added successfully.";
+                } else if (actionType === "removePaymentMethod") {
+                  successContent = "Payment method has been removed successfully.";
+                } else if (actionType === "deleteApiKey") {
+                  successContent = "API key has been deleted successfully.";
+                } else if (actionType === "addWebhook") {
+                  successContent = "Webhook endpoint has been added successfully.";
+                } else if (actionType === "updateCurrency") {
+                  successContent = "Currency preference has been updated successfully.";
+                } else if (actionType === "updateTimezone") {
+                  successContent = "Timezone has been updated successfully.";
+                } else if (actionType === "refundPayment") {
+                  successContent = "Refund has been processed successfully.";
+                } else if (actionType === "exportCertificate") {
+                  successContent = "Certificate of Incorporation has been downloaded successfully.";
+                } else if (actionType === "createSubscription") {
+                  successContent = "Subscription has been created successfully.";
+                } else if (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") {
+                  successContent = "Block rule has been updated successfully.";
+                } else {
+                  successContent = "Action completed successfully.";
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 text-gray-700", children: successContent }) }, message.id);
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `min-w-0 ${isRoleChange ? "mt-3" : ""}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                actionType === "updateCompanyInfo" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        Input,
+                        {
+                          placeholder: "Acme Corporation",
+                          value: formData.companyName || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, companyName: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        Input,
+                        {
+                          type: "email",
+                          placeholder: "contact@acme.com",
+                          value: formData.email || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Address" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "123 Main St, San Francisco, CA",
+                        value: formData.address || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, address: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Phone" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        Input,
+                        {
+                          type: "tel",
+                          placeholder: "+1 (555) 123-4567",
+                          value: formData.phone || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, phone: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Website" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        Input,
+                        {
+                          type: "url",
+                          placeholder: "https://acme.com",
+                          value: formData.website || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, website: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                actionType === "addApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Input,
+                    {
+                      placeholder: "Production Key",
+                      value: formData.name || "",
+                      onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
+                      className: "h-8 text-xs border-gray-200"
+                    }
+                  )
+                ] }) }),
+                actionType === "addCustomer" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 bg-gray-50 rounded-lg p-2 border border-gray-200 overflow-hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Company Name" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        Input,
+                        {
+                          placeholder: "Acme Corporation",
+                          value: formData.name || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Email" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        Input,
+                        {
+                          type: "email",
+                          placeholder: "contact@acme.com",
+                          value: formData.email || "",
+                          onChange: (e) => setActionFormData({ ...actionFormData, email: e.target.value }),
+                          className: "h-8 text-xs border-gray-200"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Location" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "San Francisco, CA",
+                        value: formData.location || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, location: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Subscription Tier" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "select",
+                      {
+                        value: formData.subscription || "Starter",
+                        onChange: (e) => setActionFormData({ ...actionFormData, subscription: e.target.value }),
+                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                (actionType === "enable2FA" || actionType === "disable2FA") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enable2FA" ? "This will enable two-factor authentication for your account. You'll need to set up an authenticator app." : "This will disable two-factor authentication for your account. Your account will be less secure." }) }),
+                actionType === "changePassword" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Current Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        type: "password",
+                        value: formData.currentPassword || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, currentPassword: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "New Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        type: "password",
+                        value: formData.newPassword || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, newPassword: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Confirm New Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        type: "password",
+                        value: formData.confirmPassword || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, confirmPassword: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] })
+                ] }),
+                actionType === "toggleNotification" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Notification Type" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "select",
+                      {
+                        value: formData.notificationType || "paymentReceived",
+                        onChange: (e) => setActionFormData({ ...actionFormData, notificationType: e.target.value }),
+                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentReceived", children: "Payment Received" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "paymentFailed", children: "Payment Failed" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "invoicePaid", children: "Invoice Paid" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthlySummary", children: "Monthly Summary" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "productUpdates", children: "Product Updates" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: formData.enabled !== false,
+                        onChange: (e) => setActionFormData({ ...actionFormData, enabled: e.target.checked }),
+                        className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs text-black", children: "Enable this notification" })
+                  ] })
+                ] }),
+                (actionType === "connectIntegration" || actionType === "disconnectIntegration") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Integration" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "select",
+                    {
+                      value: formData.integrationName || "Slack",
+                      onChange: (e) => setActionFormData({ ...actionFormData, integrationName: e.target.value }),
+                      className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Slack", children: "Slack" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Zapier", children: "Zapier" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Webhook", children: "Webhook" })
+                      ]
+                    }
+                  )
+                ] }) }),
+                actionType === "addPaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Card Number" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "1234 5678 9012 3456",
+                        value: formData.cardNumber || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, cardNumber: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Expiry Date" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "MM/YY",
+                        value: formData.expiryDate || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, expiryDate: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] })
+                ] }),
+                actionType === "removePaymentMethod" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will remove the default payment method from your account." }) }),
+                actionType === "refundPayment" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Transaction ID or Customer Name" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "e.g., txn_1234 or Acme Corp",
+                        value: formData.transactionId || formData.customer || "",
+                        onChange: (e) => {
+                          const value = e.target.value;
+                          if (value.startsWith("txn_") || /^\d+$/.test(value)) {
+                            setActionFormData({ ...actionFormData, transactionId: value, customer: void 0 });
+                          } else {
+                            setActionFormData({ ...actionFormData, customer: value, transactionId: void 0 });
+                          }
+                        },
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Amount (optional)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "$0.00",
+                        value: formData.amount || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, amount: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Reason (optional)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "e.g., Customer request",
+                        value: formData.reason || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, reason: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] })
+                ] }),
+                actionType === "deleteApiKey" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "API Key Name or ID" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "Production Key",
+                        value: formData.keyId || formData.name || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, keyId: e.target.value, name: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-red-600", children: "Warning: This action cannot be undone. The API key will be permanently deleted." })
+                ] }),
+                actionType === "addWebhook" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Webhook URL" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        type: "url",
+                        placeholder: "https://example.com/webhook",
+                        value: formData.url || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, url: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Name (optional)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "Production Webhook",
+                        value: formData.name || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, name: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] })
+                ] }),
+                actionType === "updateCurrency" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Currency" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "select",
+                    {
+                      value: formData.currency || "USD",
+                      onChange: (e) => setActionFormData({ ...actionFormData, currency: e.target.value }),
+                      className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "USD", children: "USD ($)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "EUR", children: "EUR (\u20AC)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "GBP", children: "GBP (\xA3)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "JPY", children: "JPY (\xA5)" })
+                      ]
+                    }
+                  )
+                ] }) }),
+                actionType === "updateTimezone" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Timezone" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "select",
+                    {
+                      value: formData.timezone || "America/Los_Angeles",
+                      onChange: (e) => setActionFormData({ ...actionFormData, timezone: e.target.value }),
+                      className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/Los_Angeles", children: "Pacific Time (PT)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "America/New_York", children: "Eastern Time (ET)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Europe/London", children: "GMT" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Asia/Tokyo", children: "JST" })
+                      ]
+                    }
+                  )
+                ] }) }),
+                actionType === "revokeSession" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Device/Session" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        placeholder: "MacBook Pro",
+                        value: formData.device || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, device: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will sign out the device and invalidate its session." })
+                ] }),
+                actionType === "createSubscription" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Customer Email" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Input,
+                      {
+                        type: "email",
+                        placeholder: "customer@example.com",
+                        value: formData.customerEmail || "",
+                        onChange: (e) => setActionFormData({ ...actionFormData, customerEmail: e.target.value }),
+                        className: "h-8 text-xs border-gray-200"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Plan" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "select",
+                      {
+                        value: formData.plan || "Starter",
+                        onChange: (e) => setActionFormData({ ...actionFormData, plan: e.target.value }),
+                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Starter", children: "Starter ($29/mo)" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Professional", children: "Professional ($99/mo)" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "Enterprise", children: "Enterprise ($299/mo)" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Billing Cycle" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "select",
+                      {
+                        value: formData.billingCycle || "monthly",
+                        onChange: (e) => setActionFormData({ ...actionFormData, billingCycle: e.target.value }),
+                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "monthly", children: "Monthly" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "yearly", children: "Yearly (Save 15%)" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                actionType === "exportCertificate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: "This will export your certificate of incorporation document." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Format" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "select",
+                      {
+                        value: formData.format || "pdf",
+                        onChange: (e) => setActionFormData({ ...actionFormData, format: e.target.value }),
+                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "pdf", children: "PDF" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "json", children: "JSON" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                (actionType === "toggleBlockRule" || actionType === "enableBlockRule" || actionType === "disableBlockRule") && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3 bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "text-xs font-medium text-black mb-1.5 block", children: "Block Rule" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "select",
+                      {
+                        value: formData.ruleId || "rule_1",
+                        onChange: (e) => setActionFormData({ ...actionFormData, ruleId: e.target.value }),
+                        className: "h-8 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-xs shadow-xs transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_1", children: "Block if risk level = 'highest'" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_2", children: "Block if matches Stripe block lists" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_3", children: "Block if CVC verification fails" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "rule_4", children: "Block if Postal code verification fails" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-black", children: actionType === "enableBlockRule" ? "This will enable the selected block rule to actively block matching payments." : actionType === "disableBlockRule" ? "This will disable the selected block rule. Matching payments will no longer be blocked." : "This will toggle the selected block rule's state." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Confirm" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                      ] })
+                    ]
+                  }
+                ) })
+              ] }, message.id);
+            }
+            if (message.kind === "bulkPreview" && message.csvData) {
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap text-sm leading-6 mb-3 text-gray-700", children: message.content || "" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-100 px-3 py-2 border-b border-gray-200 flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-gray-700", children: message.csvData.fileName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
+                      "\u2022 ",
+                      message.csvData.rowCount,
+                      " rows"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Columns" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-1", children: message.csvData.columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded", children: col }, i)) })
+                  ] }),
+                  message.csvData.sampleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-gray-500 mb-1", children: "Sample Data" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: message.csvData.sampleRows.slice(0, 3).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                        j > 0 && " \u2022 ",
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-gray-400", children: [
+                          key,
+                          ":"
+                        ] }),
+                        " ",
+                        val
+                      ] }, key)),
+                      Object.keys(row).length > 3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-gray-400", children: " ..." })
+                    ] }, i)) })
+                  ] }),
+                  message.suggestedAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 bg-blue-50 border-t border-blue-100", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-blue-700", children: [
+                    "Suggested action: ",
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: message.suggestedAction.replace(/_/g, " ") })
+                  ] }) })
+                ] }),
+                message.bulkSessionId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                          "Process ",
+                          message.csvData.rowCount,
+                          " rows"
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-blue-600" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
+                    "Processing... ",
+                    processed,
+                    " of ",
+                    total
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-2 bg-gray-200 rounded-full overflow-hidden mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "div",
+                  {
+                    className: "h-full bg-blue-600 transition-all duration-300",
+                    style: { width: `${percentage}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 text-xs text-gray-600", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
+                    successes,
+                    " successful"
+                  ] }),
+                  failures > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.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__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `rounded-lg border p-3 ${hasFailures ? "bg-amber-50 border-amber-200" : "bg-green-50 border-green-200"}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: `h-5 w-5 ${hasFailures ? "text-amber-600" : "text-green-600"}` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-800", children: "Bulk operation complete" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-600 mb-2", children: message.content || `Processed ${total} rows: ${successes} successful${hasFailures ? `, ${failures.length} failed` : ""}.` }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 text-xs", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-green-700", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CheckCircle2, { className: "h-3 w-3" }),
+                    successes,
+                    " successful"
+                  ] }),
+                  hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1 text-red-600", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-3 w-3" }),
+                    failures.length,
+                    " failed"
+                  ] })
+                ] }),
+                hasFailures && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 pt-2 border-t border-amber-200", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-[10px] uppercase tracking-wider text-amber-700 mb-1", children: "Failed Rows" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 max-h-32 overflow-y-auto", children: [
+                    failures.slice(0, 5).map((failure, i) => /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-xs text-amber-600", children: [
+                      "...and ",
+                      failures.length - 5,
+                      " more"
+                    ] })
+                  ] })
+                ] }),
+                navigationPage && successes > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      console.log("[DEBUG] Button clicked - navigationPage:", navigationPage, "onNavigate:", !!onNavigate);
+                      if (onNavigate && navigationPage.page) {
+                        console.log("[DEBUG] Calling onNavigate with page:", navigationPage.page);
+                        onNavigate(navigationPage.page, navigationPage.subtab);
+                      } else {
+                        console.log("[DEBUG] Condition failed - onNavigate:", !!onNavigate, "navigationPage.page:", navigationPage.page);
+                      }
+                    },
+                    className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 transition-colors group cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-2.5 w-2.5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-2.5 w-2.5" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                        "View ",
+                        pageLabel
+                      ] })
+                    ]
+                  }
+                ) })
+              ] }) }, message.id);
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "div",
+              {
+                ref: isCurrentGuideStep ? currentStepRef : null,
+                className: `${isRoleChange ? "mt-3" : ""}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m[1] }),
+                          m[2]
+                        ] });
+                      }
+                    }
+                    if (message.role === "assistant" && text) {
+                      return renderMarkdown(text);
+                    }
+                    return text || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "opacity-70", children: "Thinking\u2026" });
+                  })() }),
+                  message.role === "assistant" && message.structuredData && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    DataRenderer,
+                    {
+                      type: message.structuredData.type,
+                      data: message.structuredData.data
+                    }
+                  ) }),
+                  message.role === "assistant" && message.followups && message.followups.length > 0 && !message.followupSelected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: message.followups.map((followup) => /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+            activeGuide && activeGuide.stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowLeft, { className: "h-3.5 w-3.5 text-gray-600" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("span", { children: guideComplete ? "Done" : "Next" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5 text-gray-400", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Command, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.CornerDownLeft, { className: "h-3 w-3" })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          (phase === "thinking" || phase === "searching" || phase === "executing" || phase === "responding") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${lastRole === "user" ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            AssistantActivity,
+            {
+              phase,
+              progressSteps
+            }
+          ) }),
+          !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: messagesEndRef })
+        ] }) }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0", children: [
+          pendingFile && /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setPendingFile(null);
+                  if (fileInputRef.current) fileInputRef.current.value = "";
+                },
+                className: "text-blue-600 hover:text-blue-800",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: ".csv",
+                className: "hidden",
+                onChange: (e) => {
+                  const file = e.target.files?.[0];
+                  if (file) {
+                    setPendingFile(file);
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Paperclip, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                Input,
+                {
+                  placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
+                  value: input,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: (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 currentGuide = activeGuideRef.current;
+                      if (currentGuide) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        advanceGuide();
+                        return;
+                      }
+                    }
+                  },
+                  className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ArrowUp, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          GuideCursor,
+          {
+            x: cursorState.x,
+            y: cursorState.y,
+            visible: cursorState.visible,
+            onClick: cursorState.onClick
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelToggle({ isOpen, onClick, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `fixed top-1/2 z-50 flex items-center justify-center w-6 h-16 bg-gray-100 hover:bg-gray-200 border border-gray-200 border-r-0 rounded-l-lg text-gray-600 hover:text-gray-800 shadow-md transition-all duration-300 ${className}`,
+      "aria-label": isOpen ? "Close help panel" : "Open help panel",
+      style: {
+        right: isOpen ? `${PANEL_WIDTH}px` : "0px",
+        transform: "translateY(-50%)"
+      },
+      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
+    }
+  );
+}
+function ChatPanelWithToggle({
+  onNavigate,
+  onActionComplete,
+  currentPage,
+  agentUrl,
+  startingQuestions,
+  startingQuestionsEndpoint,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange
+}) {
+  const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = (open) => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+  React4.useEffect(() => {
+    const originalPadding = document.body.style.paddingRight;
+    const originalTransition = document.body.style.transition;
+    document.body.style.transition = "padding-right 0.3s ease";
+    document.body.style.paddingRight = isOpen ? `${PANEL_WIDTH}px` : "0px";
+    return () => {
+      document.body.style.paddingRight = originalPadding;
+      document.body.style.transition = originalTransition;
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      PanelToggle,
+      {
+        isOpen,
+        onClick: () => setIsOpen(!isOpen)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChatPanel,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        onNavigate,
+        onActionComplete,
+        currentPage,
+        agentUrl,
+        startingQuestions,
+        startingQuestionsEndpoint
+      }
+    )
+  ] });
+}
+
+// src/createKiteChat.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function KiteChatWrapper({
+  initialConfig,
+  onConfigUpdate,
+  onStateUpdate
+}) {
+  const [config, setConfig] = import_react.default.useState(initialConfig);
+  const [currentPage, setCurrentPage] = import_react.default.useState(initialConfig.currentPage || "dashboard");
+  const [isOpen, setIsOpen] = import_react.default.useState(false);
+  const isOpenRef = import_react.default.useRef(false);
+  import_react.default.useEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+  import_react.default.useEffect(() => {
+    onConfigUpdate((newConfig) => {
+      if (newConfig.currentPage !== void 0) {
+        setCurrentPage(newConfig.currentPage);
+      }
+      setConfig((prev) => ({ ...prev, ...newConfig }));
+    });
+    onStateUpdate({
+      setIsOpen: (open) => setIsOpen(open),
+      getIsOpen: () => isOpenRef.current
+    });
+  }, [onConfigUpdate, onStateUpdate]);
+  import_react.default.useEffect(() => {
+    const container = document.getElementById("kite-chat-root");
+    if (!container) return;
+    if (config.theme === "dark") {
+      container.classList.add("dark");
+    } else if (config.theme === "light") {
+      container.classList.remove("dark");
+    } else if (config.theme === "system") {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      container.classList.toggle("dark", prefersDark);
+    }
+  }, [config.theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ChatPanelWithToggle,
+    {
+      isOpen,
+      onOpenChange: setIsOpen,
+      currentPage,
+      agentUrl: config.agentUrl,
+      onNavigate: (page, subtab) => config.onNavigate?.(page, subtab),
+      onActionComplete: config.onActionComplete,
+      startingQuestions: config.startingQuestions,
+      startingQuestionsEndpoint: config.startingQuestionsEndpoint
+    }
+  );
+}
+function createKiteChat(config) {
+  let root = null;
+  let containerElement = null;
+  let configUpdater = null;
+  let stateUpdaters = null;
+  let currentConfig = { ...config };
+  const instance = {
+    mount(container) {
+      if (root) {
+        console.warn("[KiteChat] Already mounted. Call unmount() first.");
+        return;
+      }
+      if (typeof container === "string") {
+        containerElement = document.querySelector(container);
+        if (!containerElement) {
+          console.error(`[KiteChat] Container not found: ${container}`);
+          return;
+        }
+      } else {
+        containerElement = container;
+      }
+      if (!containerElement.id) {
+        containerElement.id = "kite-chat-root";
+      }
+      root = (0, import_client.createRoot)(containerElement);
+      root.render(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          KiteChatWrapper,
+          {
+            initialConfig: currentConfig,
+            onConfigUpdate: (updater) => {
+              configUpdater = updater;
+            },
+            onStateUpdate: (updaters) => {
+              stateUpdaters = updaters;
+            }
+          }
+        )
+      );
+      console.log("[KiteChat] Mounted");
+    },
+    unmount() {
+      if (!root) {
+        console.warn("[KiteChat] Not mounted");
+        return;
+      }
+      root.unmount();
+      root = null;
+      containerElement = null;
+      configUpdater = null;
+      stateUpdaters = null;
+      console.log("[KiteChat] Unmounted");
+    },
+    open() {
+      stateUpdaters?.setIsOpen(true);
+    },
+    close() {
+      stateUpdaters?.setIsOpen(false);
+    },
+    toggle() {
+      const isCurrentlyOpen = stateUpdaters?.getIsOpen() ?? false;
+      stateUpdaters?.setIsOpen(!isCurrentlyOpen);
+    },
+    isOpen() {
+      return stateUpdaters?.getIsOpen() ?? false;
+    },
+    setCurrentPage(page) {
+      currentConfig.currentPage = page;
+      configUpdater?.({ currentPage: page });
+    },
+    updateConfig(newConfig) {
+      currentConfig = { ...currentConfig, ...newConfig };
+      configUpdater?.(newConfig);
+    },
+    isMounted() {
+      return root !== null;
+    }
+  };
+  return instance;
+}
+
+// src/auto.ts
+function mountKiteChat(config) {
+  const { container, ...chatConfig } = config;
+  const instance = createKiteChat(chatConfig);
+  let targetContainer;
+  if (container) {
+    targetContainer = container;
+  } else {
+    const defaultContainer = document.createElement("div");
+    defaultContainer.id = "kite-chat-root";
+    document.body.appendChild(defaultContainer);
+    targetContainer = defaultContainer;
+  }
+  instance.mount(targetContainer);
+  return instance;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mountKiteChat
+});