@yourgpt/copilot-sdk 2.1.5-alpha.3 → 2.1.5-alpha.5

package/dist/ui/index.cjs

@@ -1,13 +1,16 @@
 'use strict';
 
-var chunkTCPAT3WG_cjs = require('../chunk-TCPAT3WG.cjs');
-var chunkWIXFZUEZ_cjs = require('../chunk-WIXFZUEZ.cjs');
+var chunk5UGWLGFS_cjs = require('../chunk-5UGWLGFS.cjs');
 var chunkJO4BHPAD_cjs = require('../chunk-JO4BHPAD.cjs');
+var chunk5EGBIQYS_cjs = require('../chunk-5EGBIQYS.cjs');
+var chunkLHLVTGIP_cjs = require('../chunk-LHLVTGIP.cjs');
+var chunkKGYDGK3U_cjs = require('../chunk-KGYDGK3U.cjs');
 require('../chunk-JGPDQDY4.cjs');
 require('../chunk-BJYA5NDL.cjs');
-require('../chunk-MDS23G2S.cjs');
-require('../chunk-TPB7XED6.cjs');
-require('../chunk-NUXLAZOE.cjs');
+require('../chunk-Y2A6AMGO.cjs');
+require('../chunk-TPDMBDQX.cjs');
+require('../chunk-3ZDRX7J2.cjs');
+require('../chunk-XWOHNY3F.cjs');
 require('../chunk-TXLIY7GF.cjs');
 require('../chunk-CBAHCI4R.cjs');
 require('../chunk-MEBXW75C.cjs');
@@ -15,14 +18,11 @@ require('../chunk-W73FBYIH.cjs');
 require('../chunk-2FAWEBZS.cjs');
 require('../chunk-6T5XXJEP.cjs');
 require('../chunk-GANCV72Z.cjs');
-require('../chunk-XWOHNY3F.cjs');
 require('../chunk-JEQ2X3Z6.cjs');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
 var React19 = require('react');
 var streamdown = require('streamdown');
 var code = require('@streamdown/code');
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var useStickToBottom = require('use-stick-to-bottom');
@@ -54,284 +54,6 @@ var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-function DotsLoader({
-  className,
-  size = "md"
-}) {
-  const dotSizes = {
-    sm: "h-1 w-1",
-    md: "h-1.5 w-1.5",
-    lg: "h-2 w-2"
-  };
-  const containerSizes = {
-    sm: "h-4",
-    md: "h-5",
-    lg: "h-6"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center translate-y-[-2px] space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-bounce-dots rounded-full",
-              dotSizes[size]
-            ),
-            style: {
-              animationDelay: `${i * 160}ms`
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
-}
-function TypingLoader({
-  className,
-  size = "md"
-}) {
-  const dotSizes = {
-    sm: "h-1 w-1",
-    md: "h-1.5 w-1.5",
-    lg: "h-2 w-2"
-  };
-  const containerSizes = {
-    sm: "h-4",
-    md: "h-5",
-    lg: "h-6"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-typing rounded-full",
-              dotSizes[size]
-            ),
-            style: {
-              animationDelay: `${i * 250}ms`
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
-}
-function WaveLoader({
-  className,
-  size = "md"
-}) {
-  const barWidths = {
-    sm: "w-0.5",
-    md: "w-0.5",
-    lg: "w-1"
-  };
-  const containerSizes = {
-    sm: "h-4",
-    md: "h-5",
-    lg: "h-6"
-  };
-  const heights = {
-    sm: ["6px", "9px", "12px", "9px", "6px"],
-    md: ["8px", "12px", "16px", "12px", "8px"],
-    lg: ["10px", "15px", "20px", "15px", "10px"]
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-0.5",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-wave rounded-full",
-              barWidths[size]
-            ),
-            style: {
-              animationDelay: `${i * 100}ms`,
-              height: heights[size][i]
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
-}
-function TerminalLoader({
-  className,
-  size = "md"
-}) {
-  const cursorSizes = {
-    sm: "h-3 w-1.5",
-    md: "h-4 w-2",
-    lg: "h-5 w-2.5"
-  };
-  const textSizes = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  const containerSizes = {
-    sm: "h-4",
-    md: "h-5",
-    lg: "h-6"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-primary csdk-loader-blink", cursorSizes[size]) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
-}
-function TextBlinkLoader({
-  text = "Thinking",
-  className,
-  size = "md"
-}) {
-  const textSizes = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "csdk-loader-text-blink font-medium",
-        textSizes[size],
-        className
-      ),
-      children: text
-    }
-  );
-}
-function TextShimmerLoader({
-  text = "Thinking",
-  className,
-  size = "md"
-}) {
-  const textSizes = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
-        "bg-[length:200%_auto] bg-clip-text font-medium text-transparent",
-        "csdk-loader-shimmer",
-        textSizes[size],
-        className
-      ),
-      children: text
-    }
-  );
-}
-function TextDotsLoader({
-  className,
-  text = "Thinking",
-  size = "md"
-}) {
-  const textSizes = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary font-medium", textSizes[size]), children: text }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.2s" },
-          children: "."
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.4s" },
-          children: "."
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.6s" },
-          children: "."
-        }
-      )
-    ] })
-  ] });
-}
-function Loader({
-  variant = "typing",
-  size = "md",
-  text,
-  className
-}) {
-  switch (variant) {
-    case "dots":
-      return /* @__PURE__ */ jsxRuntime.jsx(DotsLoader, { size, className });
-    case "typing":
-      return /* @__PURE__ */ jsxRuntime.jsx(TypingLoader, { size, className });
-    case "wave":
-      return /* @__PURE__ */ jsxRuntime.jsx(WaveLoader, { size, className });
-    case "terminal":
-      return /* @__PURE__ */ jsxRuntime.jsx(TerminalLoader, { size, className });
-    case "text-blink":
-      return /* @__PURE__ */ jsxRuntime.jsx(TextBlinkLoader, { text, size, className });
-    case "text-shimmer":
-      return /* @__PURE__ */ jsxRuntime.jsx(TextShimmerLoader, { text, size, className });
-    case "loading-dots":
-      return /* @__PURE__ */ jsxRuntime.jsx(TextDotsLoader, { text, size, className });
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx(TypingLoader, { size, className });
-  }
-}
 var createHeading = (Tag) => {
   const HeadingComponent = ({
     children,
@@ -372,7 +94,7 @@ function CodeBlock({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "not-prose flex w-full flex-col overflow-clip border",
         "border-border bg-card text-card-foreground rounded-xl",
         className
@@ -413,7 +135,7 @@ var Button = React19__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: chunk5EGBIQYS_cjs.cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }
@@ -489,7 +211,7 @@ function FeedbackBar({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "bg-background border-border inline-flex rounded-[12px] border text-sm",
         className
       ),
@@ -550,7 +272,7 @@ function ChatContainerRoot({
   return /* @__PURE__ */ jsxRuntime.jsx(
     StickToBottom,
     {
-      className: cn("min-h-0", className),
+      className: chunk5EGBIQYS_cjs.cn("min-h-0", className),
       resize: "smooth",
       initial: "instant",
       role: "log",
@@ -567,7 +289,7 @@ function ChatContainerContent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     StickToBottom.Content,
     {
-      className: cn("flex w-full flex-col", className),
+      className: chunk5EGBIQYS_cjs.cn("flex w-full flex-col", className),
       ...props,
       children
     }
@@ -580,7 +302,7 @@ function ChatContainerScrollAnchor({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("h-px w-full shrink-0 scroll-mt-4", className),
+      className: chunk5EGBIQYS_cjs.cn("h-px w-full shrink-0 scroll-mt-4", className),
       "aria-hidden": "true",
       ...props
     }
@@ -614,7 +336,7 @@ function ScrollButton({
     {
       variant,
       size,
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "h-10 w-10 rounded-full transition-all duration-150 ease-out shadow-md bg-background",
         !isAtBottom ? "translate-y-0 scale-100 opacity-100" : "pointer-events-none translate-y-4 scale-95 opacity-0",
         className
@@ -664,7 +386,7 @@ function TooltipContent({
   return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxRuntime.jsxs(
     tooltip.Tooltip.Popup,
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "z-50 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md",
         "animate-in fade-in-0 zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -681,7 +403,7 @@ var Avatar = React19__namespace.forwardRef(({ className, ...props }, ref) => /*
   AvatarPrimitive__namespace.Root,
   {
     ref,
-    className: cn(
+    className: chunk5EGBIQYS_cjs.cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
       className
     ),
@@ -693,7 +415,7 @@ var AvatarImage = React19__namespace.forwardRef(({ className, ...props }, ref) =
   AvatarPrimitive__namespace.Image,
   {
     ref,
-    className: cn("aspect-square h-full w-full object-cover", className),
+    className: chunk5EGBIQYS_cjs.cn("aspect-square h-full w-full object-cover", className),
     ...props
   }
 ));
@@ -702,7 +424,7 @@ var AvatarFallback = React19__namespace.forwardRef(({ className, ...props }, ref
   AvatarPrimitive__namespace.Fallback,
   {
     ref,
-    className: cn(
+    className: chunk5EGBIQYS_cjs.cn(
       "csdk-avatar-fallback flex h-full w-full items-center justify-center rounded-full bg-muted",
       className
     ),
@@ -710,7 +432,7 @@ var AvatarFallback = React19__namespace.forwardRef(({ className, ...props }, ref
   }
 ));
 AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
-var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-message flex gap-3", className), ...props, children });
+var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("csdk-message flex gap-3", className), ...props, children });
 var MessageAvatar = ({
   src,
   alt = "Avatar",
@@ -721,9 +443,9 @@ var MessageAvatar = ({
   className
 }) => {
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("csdk-avatar flex shrink-0 size-7", className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk5EGBIQYS_cjs.cn("csdk-avatar flex shrink-0 size-7", className), children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn("csdk-avatar size-7 shrink-0", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: chunk5EGBIQYS_cjs.cn("csdk-avatar size-7 shrink-0", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt }),
     /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs, children: fallbackIcon || fallback })
   ] });
@@ -740,10 +462,10 @@ var MessageContent = ({
   size = "sm",
   ...props
 }) => {
-  const classNames = cn(
-    "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full leading-relaxed overflow-x-auto overflow-y-hidden",
+  const classNames = chunk5EGBIQYS_cjs.cn(
+    "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full  overflow-x-auto overflow-y-hidden",
     // Typography - simple Tailwind utilities (no prose)
-    "[&_p]:my-1 [&_p]:leading-relaxed",
+    "[&_p]:my-1 ",
     "[&_ul]:my-1 [&_ul]:pl-4 [&_ul]:list-disc [&_ul]:list-outside",
     "[&_ol]:my-1 [&_ol]:pl-4 [&_ol]:list-decimal [&_ol]:list-outside",
     "[&_li]:my-0.5 [&_li]:pl-0",
@@ -765,7 +487,7 @@ var MessageActions = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
-    className: cn(
+    className: chunk5EGBIQYS_cjs.cn(
       "csdk-message-actions text-muted-foreground flex items-center gap-2",
       className
     ),
@@ -789,7 +511,7 @@ var Textarea = React19__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       ),
@@ -850,7 +572,7 @@ function PromptInput({
         "div",
         {
           onClick: handleClick,
-          className: cn(
+          className: chunk5EGBIQYS_cjs.cn(
             "csdk-input border-input bg-background cursor-text rounded-3xl border p-2 shadow-xs",
             disabled && "cursor-not-allowed opacity-60",
             className
@@ -910,7 +632,7 @@ function PromptInputTextarea({
       value,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-input-textarea text-foreground min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
         className
       ),
@@ -925,7 +647,7 @@ function PromptInputActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("flex items-center gap-2", className), ...props, children });
 }
 function PromptInputAction({
   tooltip,
@@ -955,7 +677,7 @@ var HoverCardContent = React19__namespace.forwardRef(({ className, align = "cent
     ref,
     align,
     sideOffset,
-    className: cn(
+    className: chunk5EGBIQYS_cjs.cn(
       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -991,7 +713,7 @@ function SourceTrigger({
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "inline-flex h-7 items-center gap-1.5 rounded-full border border-border/50 bg-background px-2.5 text-xs text-foreground/80 no-underline shadow-sm transition-all duration-150",
         "hover:bg-muted hover:border-border hover:shadow-md hover:text-foreground",
         className
@@ -1023,7 +745,7 @@ function SourceContent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     HoverCardContent,
     {
-      className: cn("w-80 p-0 shadow-lg border border-border/50", className),
+      className: chunk5EGBIQYS_cjs.cn("w-80 p-0 shadow-lg border border-border/50", className),
       sideOffset: 8,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
@@ -1067,7 +789,7 @@ function SourceGroup({
   if (!sources || sources.length === 0) return null;
   const visibleSources = sources.slice(0, maxVisible);
   const hiddenCount = sources.length - maxVisible;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("flex flex-wrap items-center gap-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }),
     visibleSources.map((source, index) => /* @__PURE__ */ jsxRuntime.jsxs(Source, { href: source.href, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1111,7 +833,7 @@ function SimpleSource({
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "bg-muted text-muted-foreground hover:bg-primary/20 hover:text-primary",
         "inline-flex h-5 items-center gap-1 rounded-full text-xs no-underline transition-colors",
         showFavicon ? "pr-2 pl-1" : "px-1.5",
@@ -1150,13 +872,13 @@ function SearchResults({
 }) {
   const displayResults = maxResults ? results.slice(0, maxResults) : results;
   if (displayResults.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground text-sm", className), children: "No results found" });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("text-muted-foreground text-sm", className), children: "No results found" });
   }
   if (variant === "compact") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsxRuntime.jsx(SearchResultCompact, { result, index: i + 1 }, i)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("flex flex-wrap gap-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsxRuntime.jsx(SearchResultCompact, { result, index: i + 1 }, i)) });
   }
   if (variant === "list") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("space-y-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsxRuntime.jsx(
       SearchResultList,
       {
         result,
@@ -1167,7 +889,7 @@ function SearchResults({
       i
     )) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("grid gap-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsxRuntime.jsx(
     SearchResultCard,
     {
       result,
@@ -1290,7 +1012,7 @@ function SearchAnswer({ answer, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "p-3 bg-muted/50 rounded-lg border-l-2 border-primary/50",
         className
       ),
@@ -1305,7 +1027,7 @@ function SearchResultsWithAnswer({
   showAnswer = true,
   maxResults
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("space-y-3", className), children: [
     showAnswer && response.answer && /* @__PURE__ */ jsxRuntime.jsx(SearchAnswer, { answer: response.answer }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SearchResults,
@@ -1370,7 +1092,7 @@ function CitationBadge({
   const badge = /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "inline-flex items-center justify-center rounded font-medium",
         "bg-primary/10 text-primary hover:bg-primary/20",
         "cursor-pointer transition-colors",
@@ -1405,7 +1127,7 @@ function CitationSuperscript({
   const sup = /* @__PURE__ */ jsxRuntime.jsxs(
     "sup",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "text-[10px] text-primary hover:underline cursor-pointer ml-0.5",
         className
       ),
@@ -1436,7 +1158,7 @@ function SourcePill({
       target: "_blank",
       rel: "noopener noreferrer",
       title: citation.title,
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "inline-flex items-center gap-1.5 px-2 py-1 text-xs rounded-full",
         "bg-muted hover:bg-muted/80 transition-colors",
         "text-muted-foreground hover:text-foreground",
@@ -1471,7 +1193,7 @@ function SourcesBar({
   const visibleCitations = citations.slice(0, maxVisible);
   const hiddenCount = citations.length - maxVisible;
   if (citations.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("flex items-center gap-2", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "w-3 h-3" }),
       label
@@ -1494,7 +1216,7 @@ function SourcesCollapsible({
 }) {
   const [expanded, setExpanded] = React19__namespace.useState(defaultExpanded);
   if (citations.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border rounded-lg", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("border rounded-lg", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -1556,7 +1278,7 @@ function SourcesList({
 }) {
   if (citations.length === 0) return null;
   if (compact) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xs text-muted-foreground", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("text-xs text-muted-foreground", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Sources: " }),
       citations.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs(React19__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1577,7 +1299,7 @@ function SourcesList({
       ] }, c.index))
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-1", className), children: citations.map((citation) => /* @__PURE__ */ jsxRuntime.jsx(SourceItem, { citation }, citation.index)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("space-y-1", className), children: citations.map((citation) => /* @__PURE__ */ jsxRuntime.jsx(SourceItem, { citation }, citation.index)) });
 }
 function MessageWithCitations({
   children,
@@ -1589,7 +1311,7 @@ function MessageWithCitations({
   if (!enabled || citations.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("space-y-3", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
     sourcesPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(SourcesBar, { citations, maxVisible }),
     sourcesPosition === "collapsible" && /* @__PURE__ */ jsxRuntime.jsx(SourcesCollapsible, { citations })
@@ -1679,7 +1401,7 @@ function Reasoning({
     }
     prevStreamingRef.current = isStreaming;
   }, [isStreaming, setIsOpen]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ReasoningContext.Provider, { value: { isOpen, setIsOpen, isStreaming }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("reasoning", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ReasoningContext.Provider, { value: { isOpen, setIsOpen, isStreaming }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("reasoning", className), children }) });
 }
 function ReasoningTrigger({
   children,
@@ -1691,7 +1413,7 @@ function ReasoningTrigger({
     {
       type: "button",
       onClick: () => setIsOpen(!isOpen),
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
         "py-1 px-0 bg-transparent border-none cursor-pointer",
         className
@@ -1701,7 +1423,7 @@ function ReasoningTrigger({
         /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "size-3 transition-transform duration-200",
               isOpen && "rotate-90"
             ),
@@ -1743,7 +1465,7 @@ function ReasoningContent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "overflow-hidden transition-[max-height] duration-200 ease-out",
         isOpen ? "opacity-100" : "opacity-0"
       ),
@@ -1753,7 +1475,7 @@ function ReasoningContent({
         "div",
         {
           ref: contentRef,
-          className: cn(
+          className: chunk5EGBIQYS_cjs.cn(
             "mt-1 pl-3 border-l-2 border-muted-foreground/20",
             "text-xs text-muted-foreground",
             className
@@ -1838,7 +1560,7 @@ function StatusIndicator({ status, className }) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
+          className: chunk5EGBIQYS_cjs.cn(
             baseClasses,
             "size-3 flex items-center justify-center",
             className
@@ -1852,7 +1574,7 @@ function StatusIndicator({ status, className }) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
+          className: chunk5EGBIQYS_cjs.cn(
             baseClasses,
             "size-3 flex items-center justify-center",
             className
@@ -1883,7 +1605,7 @@ function StatusIndicator({ status, className }) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
+          className: chunk5EGBIQYS_cjs.cn(
             baseClasses,
             "size-3 flex items-center justify-center",
             className
@@ -1948,7 +1670,7 @@ function ToolStep({
   const isExecuting = step.status === "executing";
   const isCompleted = step.status === "completed";
   const isError = step.status === "error" || step.status === "failed" || step.status === "rejected";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("relative", className), children: [
     showLine && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1965,16 +1687,16 @@ function ToolStep({
             type: "button",
             onClick: () => debug && hasDebugContent && setExpanded(!expanded),
             disabled: !debug || !hasDebugContent,
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "flex items-center gap-2 text-left min-w-0 w-full",
               debug && hasDebugContent && "cursor-pointer hover:text-foreground",
               !debug && "cursor-default"
             ),
             children: [
-              isExecuting ? /* @__PURE__ */ jsxRuntime.jsx(TextShimmerLoader, { text: displayTitle, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
+              isExecuting ? /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.TextShimmerLoader, { text: displayTitle, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: cn(
+                  className: chunk5EGBIQYS_cjs.cn(
                     "text-sm truncate",
                     isCompleted && "text-foreground",
                     isError && "text-red-500",
@@ -1986,7 +1708,7 @@ function ToolStep({
               debug && hasDebugContent && /* @__PURE__ */ jsxRuntime.jsx(
                 "svg",
                 {
-                  className: cn(
+                  className: chunk5EGBIQYS_cjs.cn(
                     "size-3 text-muted-foreground/40 transition-transform ml-auto flex-shrink-0",
                     expanded && "rotate-90"
                   ),
@@ -2015,7 +1737,7 @@ function ToolStep({
           step.result && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "text-[10px] font-mono rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all",
                 step.result.success !== false ? "bg-green-500/10 text-green-600 dark:text-green-400" : "bg-red-500/10 text-red-600 dark:text-red-400"
               ),
@@ -2046,7 +1768,7 @@ function ToolSteps({
   className
 }) {
   if (steps.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-1.5", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("space-y-1.5", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
     ToolStep,
     {
       step,
@@ -2065,7 +1787,7 @@ function InlineToolSteps({
   if (steps.length === 0) return null;
   const visibleSteps = steps.slice(0, maxVisible);
   const hiddenCount = steps.length - maxVisible;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("flex items-center gap-1", className), children: [
     visibleSteps.map((step) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -2446,8 +2168,11 @@ function Confirmation({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
-            "confirmation rounded-lg border bg-card text-card-foreground",
+          className: chunk5EGBIQYS_cjs.cn(
+            "csdk-confirm-card",
+            "confirmation rounded-2xl overflow-hidden",
+            "border border-border/60",
+            "bg-card text-card-foreground shadow-sm",
             className
           ),
           children
@@ -2462,7 +2187,7 @@ function ConfirmationPending({
 }) {
   const { state } = useConfirmationContext();
   if (state !== "pending") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-4", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("pl-5 pr-4 pt-4 pb-3", className), children });
 }
 function ConfirmationApproved({
   children,
@@ -2473,12 +2198,15 @@ function ConfirmationApproved({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400",
+      className: chunk5EGBIQYS_cjs.cn(
+        "csdk-confirm-result",
+        "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium",
+        "rounded-2xl border border-green-200/60 dark:border-green-800/40",
+        "bg-green-50/80 dark:bg-green-950/20 text-green-700 dark:text-green-400",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0" }),
         children || /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Approved" })
       ]
     }
@@ -2493,12 +2221,15 @@ function ConfirmationRejected({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400",
+      className: chunk5EGBIQYS_cjs.cn(
+        "csdk-confirm-result",
+        "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium",
+        "rounded-2xl border border-red-200/60 dark:border-red-800/40",
+        "bg-red-50/80 dark:bg-red-950/20 text-red-700 dark:text-red-400",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(XIcon2, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(XIcon2, { className: "h-3.5 w-3.5 shrink-0" }),
         children || /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rejected" })
       ]
     }
@@ -2509,9 +2240,9 @@ function ConfirmationMessage({
   className
 }) {
   const { message } = useConfirmationContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: children || message || "This action requires your approval." })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-amber-100 dark:bg-amber-950/50 ring-1 ring-amber-200/60 dark:ring-amber-800/40", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 pt-0.5 text-sm text-foreground leading-snug", children: children || message || "This action requires your approval." })
   ] });
 }
 function ConfirmationActions({
@@ -2522,11 +2253,41 @@ function ConfirmationActions({
 }) {
   const { onApprove, onReject } = useConfirmationContext();
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3 flex justify-end gap-2", className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("mt-3 flex justify-end gap-2", className), children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-3 flex justify-end gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onReject, children: rejectLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "default", size: "sm", onClick: onApprove, children: approveLabel })
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-0 border-t border-border/40 mt-3" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("flex justify-end gap-2 pt-3", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onReject,
+          className: chunk5EGBIQYS_cjs.cn(
+            "csdk-confirm-btn",
+            "px-4 py-1.5 text-sm font-medium rounded-xl",
+            "border border-border/80 bg-transparent text-muted-foreground",
+            "hover:bg-muted/80 hover:text-foreground hover:border-border"
+          ),
+          children: rejectLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onApprove,
+          className: chunk5EGBIQYS_cjs.cn(
+            "csdk-confirm-btn",
+            "px-4 py-1.5 text-sm font-medium rounded-xl",
+            "bg-primary text-primary-foreground",
+            "hover:bg-primary/90",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+          ),
+          children: approveLabel
+        }
+      )
+    ] })
   ] });
 }
 function SimpleConfirmation({
@@ -2603,11 +2364,11 @@ function PermissionConfirmation({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "csdk-confirm-result",
-          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
-          "rounded-2xl border border-green-200/70 dark:border-green-900/40",
-          "bg-green-50 dark:bg-green-950/20 text-green-700 dark:text-green-400",
+          "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium",
+          "rounded-2xl border border-green-200/60 dark:border-green-800/40",
+          "bg-green-50/80 dark:bg-green-950/20 text-green-700 dark:text-green-400",
           className
         ),
         children: [
@@ -2621,11 +2382,11 @@ function PermissionConfirmation({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "csdk-confirm-result",
-          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
-          "rounded-2xl border border-red-200/70 dark:border-red-900/40",
-          "bg-red-50 dark:bg-red-950/20 text-red-700 dark:text-red-400",
+          "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium",
+          "rounded-2xl border border-red-200/60 dark:border-red-800/40",
+          "bg-red-50/80 dark:bg-red-950/20 text-red-700 dark:text-red-400",
           className
         ),
         children: [
@@ -2638,30 +2399,33 @@ function PermissionConfirmation({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-confirm-card",
-        "w-full rounded-2xl border border-border/60 bg-card text-card-foreground shadow-sm overflow-hidden",
+        "w-full rounded-2xl overflow-hidden",
+        "border border-border/60",
+        "bg-card text-card-foreground shadow-sm",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-amber-100 dark:bg-amber-950/50", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 pb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
-            toolName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-1", children: toolName }),
+            toolName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-amber-600/80 dark:text-amber-400/70 mb-1", children: toolName }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground leading-snug", children: message || "This tool requires your approval to execute." })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 border-t border-border/40" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               onClick: handleReject,
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "csdk-confirm-btn",
                 "px-4 py-1.5 text-sm font-medium rounded-xl",
-                "border border-border bg-transparent text-muted-foreground",
-                "hover:bg-muted/60 hover:text-foreground"
+                "border border-border/80 bg-transparent text-muted-foreground",
+                "hover:bg-muted/80 hover:text-foreground hover:border-border"
               ),
               children: "Deny"
             }
@@ -2671,11 +2435,12 @@ function PermissionConfirmation({
             {
               type: "button",
               onClick: handleApprove,
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "csdk-confirm-btn",
                 "px-4 py-1.5 text-sm font-medium rounded-xl",
                 "bg-primary text-primary-foreground",
-                "hover:opacity-90"
+                "hover:bg-primary/90",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
               ),
               children: "Allow"
             }
@@ -2702,11 +2467,11 @@ function CompactPermissionConfirmation({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "csdk-confirm-result",
-          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
-          "rounded-2xl border border-green-200/70 dark:border-green-900/40",
-          "bg-green-50 dark:bg-green-950/20 text-green-700 dark:text-green-400",
+          "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium",
+          "rounded-2xl border border-green-200/60 dark:border-green-800/40",
+          "bg-green-50/80 dark:bg-green-950/20 text-green-700 dark:text-green-400",
           className
         ),
         children: [
@@ -2720,11 +2485,11 @@ function CompactPermissionConfirmation({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "csdk-confirm-result",
-          "inline-flex items-center gap-2 px-3 py-1.5 text-sm",
-          "rounded-2xl border border-red-200/70 dark:border-red-900/40",
-          "bg-red-50 dark:bg-red-950/20 text-red-700 dark:text-red-400",
+          "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium",
+          "rounded-2xl border border-red-200/60 dark:border-red-800/40",
+          "bg-red-50/80 dark:bg-red-950/20 text-red-700 dark:text-red-400",
           className
         ),
         children: [
@@ -2737,27 +2502,30 @@ function CompactPermissionConfirmation({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-confirm-card",
-        "w-full rounded-2xl border border-border/60 bg-card text-card-foreground shadow-sm overflow-hidden",
+        "w-full rounded-2xl overflow-hidden",
+        "border border-border/60",
+        "bg-card text-card-foreground shadow-sm",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-amber-100 dark:bg-amber-950/50", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 pb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 pt-0.5 text-sm text-foreground leading-snug", children: message || "This action requires your approval." })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 border-t border-border/40" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               onClick: handleReject,
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "csdk-confirm-btn",
                 "px-4 py-1.5 text-sm font-medium rounded-xl",
-                "border border-border bg-transparent text-muted-foreground",
-                "hover:bg-muted/60 hover:text-foreground"
+                "border border-border/80 bg-transparent text-muted-foreground",
+                "hover:bg-muted/80 hover:text-foreground hover:border-border"
               ),
               children: "Deny"
             }
@@ -2767,11 +2535,12 @@ function CompactPermissionConfirmation({
             {
               type: "button",
               onClick: handleApprove,
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "csdk-confirm-btn",
                 "px-4 py-1.5 text-sm font-medium rounded-xl",
                 "bg-primary text-primary-foreground",
-                "hover:opacity-90"
+                "hover:bg-primary/90",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
               ),
               children: "Allow"
             }
@@ -2805,11 +2574,11 @@ function FollowUpQuestions({
   if (!questions || questions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-followup flex flex-wrap gap-2 mt-2", className), children: questions.map((question, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("csdk-followup flex flex-wrap gap-2 mt-2", className), children: questions.map((question, index) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       onClick: () => onSelect(question),
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-followup-button px-3 py-1.5 text-sm rounded-full",
         "bg-primary/10 hover:bg-primary/20 text-primary",
         "border border-primary/20 hover:border-primary/40",
@@ -2834,7 +2603,7 @@ function BranchNavigator({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-branch-navigator flex items-center gap-1 text-xs text-muted-foreground select-none",
         className
       ),
@@ -2846,7 +2615,7 @@ function BranchNavigator({
             onClick: onPrevious,
             disabled: !hasPrevious,
             "aria-label": "Previous version",
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "p-0.5 rounded transition-colors",
               hasPrevious ? "hover:text-foreground hover:bg-muted cursor-pointer" : "opacity-30 cursor-default"
             ),
@@ -2878,7 +2647,7 @@ function BranchNavigator({
             onClick: onNext,
             disabled: !hasNext,
             "aria-label": "Next version",
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "p-0.5 rounded transition-colors",
               hasNext ? "hover:text-foreground hover:bg-muted cursor-pointer" : "opacity-30 cursor-default"
             ),
@@ -2921,7 +2690,7 @@ function DevLogger({
       {
         type: "button",
         onClick: () => setIsOpen(true),
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "fixed z-[9999] flex items-center justify-center",
           "w-12 h-12 rounded-full shadow-lg",
           "bg-orange-500 hover:bg-orange-600 text-white",
@@ -2953,12 +2722,12 @@ function DevLogger({
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "fixed inset-0 z-[10000] flex items-center justify-center bg-black/50",
+        className: "csdk-devlogger-backdrop fixed inset-0 z-[10000] flex items-center justify-center bg-black/50",
         onClick: () => setIsOpen(false),
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "bg-background border rounded-lg shadow-xl w-[600px] max-h-[80vh] overflow-hidden",
+            className: "csdk-devlogger-modal bg-background border rounded-lg shadow-xl w-[600px] max-h-[80vh] overflow-hidden",
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/50", children: [
@@ -2998,7 +2767,7 @@ function DevLogger({
                 {
                   type: "button",
                   onClick: () => setActiveTab(tab),
-                  className: cn(
+                  className: chunk5EGBIQYS_cjs.cn(
                     "px-4 py-2 text-sm font-medium capitalize",
                     activeTab === tab ? "border-b-2 border-primary text-primary" : "text-muted-foreground hover:text-foreground"
                   ),
@@ -3157,7 +2926,7 @@ function Row({
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           mono && "font-mono text-xs bg-muted px-1.5 py-0.5 rounded",
           valueClass
         ),
@@ -3176,7 +2945,7 @@ function Badge({ level }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "px-1.5 py-0.5 rounded text-xs font-medium",
         colors[level] || colors.ask
       ),
@@ -3194,7 +2963,7 @@ function StatusBadge({ status }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "px-1.5 py-0.5 rounded text-xs font-medium",
         colors[status] || "bg-gray-100 text-gray-800"
       ),
@@ -3277,7 +3046,7 @@ function CapabilityBadge({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "inline-flex items-center gap-1 rounded-full font-medium transition-colors",
         sizeClasses[size],
         supported ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground opacity-50",
@@ -3285,7 +3054,7 @@ function CapabilityBadge({
       ),
       title: `${labels[type]}: ${descriptions[type]}`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", iconSizes[size]), children: icons[type] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk5EGBIQYS_cjs.cn("flex-shrink-0", iconSizes[size]), children: icons[type] }),
         showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels[type] })
       ]
     }
@@ -3310,7 +3079,7 @@ function CapabilityList({
   ];
   const filteredItems = onlySupported ? items.filter((item) => item.supported) : items;
   if (filteredItems.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-1", className), children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("flex flex-wrap gap-1", className), children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
     CapabilityBadge,
     {
       type: item.type,
@@ -3366,14 +3135,14 @@ function ModelSelector({
     onChange?.(modelId, provider);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: chunk5EGBIQYS_cjs.cn("relative", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         onClick: () => !disabled && setIsOpen(!isOpen),
         disabled,
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "flex items-center justify-between gap-2 w-full rounded-md border bg-background",
           "hover:bg-accent hover:text-accent-foreground",
           "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -3388,7 +3157,7 @@ function ModelSelector({
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "w-4 h-4 flex-shrink-0 text-muted-foreground transition-transform",
                 isOpen && "rotate-180"
               ),
@@ -3420,8 +3189,8 @@ function ModelSelector({
     isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
-          "absolute z-50 top-full left-0 right-0 mt-1",
+        className: chunk5EGBIQYS_cjs.cn(
+          "csdk-model-dropdown absolute z-50 top-full left-0 right-0 mt-1",
           "max-h-[300px] overflow-auto",
           "rounded-md border bg-popover text-popover-foreground shadow-md",
           "animate-in fade-in-0 zoom-in-95"
@@ -3434,7 +3203,7 @@ function ModelSelector({
               {
                 type: "button",
                 onClick: () => handleSelect(model.id, provider.name),
-                className: cn(
+                className: chunk5EGBIQYS_cjs.cn(
                   "flex flex-col gap-0.5 w-full px-3 py-2 text-left",
                   "hover:bg-accent hover:text-accent-foreground",
                   "focus:bg-accent focus:text-accent-foreground focus:outline-none",
@@ -3480,7 +3249,7 @@ function ModelSelector({
             {
               type: "button",
               onClick: () => handleSelect(model.id, model.provider),
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "flex flex-col gap-0.5 w-full px-3 py-2 text-left",
                 "hover:bg-accent hover:text-accent-foreground",
                 "focus:bg-accent focus:text-accent-foreground focus:outline-none",
@@ -3540,7 +3309,7 @@ function SimpleModelSelector({
       value: value || "",
       onChange: (e) => onChange?.(e.target.value),
       disabled,
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "h-9 px-3 rounded-md border bg-background text-sm",
         "focus:outline-none focus:ring-2 focus:ring-ring",
         "disabled:cursor-not-allowed disabled:opacity-50",
@@ -3585,7 +3354,7 @@ function PopoverContent({
   return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxRuntime.jsx(
     popover.Popover.Popup,
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -3622,7 +3391,7 @@ function ChevronIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3635,7 +3404,7 @@ function PlusIcon2({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3648,7 +3417,7 @@ function CheckIcon2({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3661,7 +3430,7 @@ function TrashIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3723,7 +3492,7 @@ function ThreadPicker({
       PopoverTrigger,
       {
         disabled: disabled || loading,
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "flex items-center gap-1 w-full",
           disabled && "opacity-50 cursor-not-allowed",
           className,
@@ -3734,7 +3503,7 @@ function ThreadPicker({
           /* @__PURE__ */ jsxRuntime.jsx(
             ChevronIcon,
             {
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "flex-shrink-0 size-3 text-muted-foreground transition-transform",
                 isOpen && "rotate-180"
               )
@@ -3747,7 +3516,7 @@ function ThreadPicker({
       PopoverContent,
       {
         align: "start",
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "w-[var(--anchor-width)] min-w-[250px] p-0 max-h-[300px] overflow-auto",
           dropdownClassName
         ),
@@ -3757,7 +3526,7 @@ function ThreadPicker({
             {
               type: "button",
               onClick: handleNewThread,
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "flex items-center gap-2 w-full px-2.5 py-1.5 text-left",
                 "hover:bg-accent hover:text-accent-foreground",
                 "focus:bg-accent focus:text-accent-foreground focus:outline-none",
@@ -3773,7 +3542,7 @@ function ThreadPicker({
           threads.length > 0 ? threads.map((thread) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "group flex items-center gap-1 w-full px-2.5 py-1.5",
                 "hover:bg-accent hover:text-accent-foreground",
                 "focus-within:bg-accent focus-within:text-accent-foreground",
@@ -3846,7 +3615,7 @@ function TrashIcon2({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3866,7 +3635,7 @@ function PlusIcon3({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3879,7 +3648,7 @@ function MessageIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("w-4 h-4", className),
+      className: chunk5EGBIQYS_cjs.cn("w-4 h-4", className),
       fill: "none",
       viewBox: "0 0 24 24",
       stroke: "currentColor",
@@ -3924,7 +3693,7 @@ function ThreadCard({
       onClick,
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "w-full p-3 rounded-lg border bg-card text-left transition-colors",
         "hover:bg-accent hover:border-accent-foreground/20",
         "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -3935,7 +3704,7 @@ function ThreadCard({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
               selected ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
             ),
@@ -3950,7 +3719,7 @@ function ThreadCard({
               {
                 type: "button",
                 onClick: handleDelete,
-                className: cn(
+                className: chunk5EGBIQYS_cjs.cn(
                   "flex-shrink-0 p-1 rounded",
                   "hover:bg-destructive/10 hover:text-destructive",
                   "focus:outline-none focus:ring-2 focus:ring-destructive"
@@ -3986,13 +3755,13 @@ function ThreadList({
   showDelete = true,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("flex flex-col gap-2", className), children: [
     onNewThread && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         onClick: onNewThread,
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "flex items-center gap-2 p-3 rounded-lg border border-dashed",
           "hover:bg-accent hover:border-accent-foreground/20",
           "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -4032,7 +3801,7 @@ var CopilotSDKLogo = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    className: cn("w-auto h-[30px]", props.className),
+    className: chunk5EGBIQYS_cjs.cn("w-auto h-[30px]", props.className),
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -4091,7 +3860,7 @@ function ChatHeader({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex flex-col border-b border-border bg-background",
         className
       ),
@@ -4131,7 +3900,7 @@ function Suggestions({
   className
 }) {
   if (!suggestions.length) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-2 px-4 py-2", className), children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("flex flex-wrap gap-2 px-4 py-2", className), children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
@@ -4244,7 +4013,7 @@ function MCPUIFrame({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "flex items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive",
           className
         ),
@@ -4277,11 +4046,11 @@ function MCPUIFrame({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn("relative overflow-hidden rounded-lg border", className),
+      className: chunk5EGBIQYS_cjs.cn("relative overflow-hidden rounded-lg border", className),
       "data-testid": testId,
       children: [
         resource.metadata?.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground", children: resource.metadata.title }),
-        showLoading && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "md" }) }),
+        showLoading && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-mcp-loading absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.Loader, { variant: "dots", size: "md" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "iframe",
           {
@@ -4317,7 +4086,7 @@ function MCPUIFrameList({
     md: "space-y-2",
     lg: "space-y-4"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(gapClasses[gap], className), children: resources.map((resource, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn(gapClasses[gap], className), children: resources.map((resource, index) => /* @__PURE__ */ jsxRuntime.jsx(
     MCPUIFrame,
     {
       resource,
@@ -4355,13 +4124,11 @@ function MessageActionsProvider({
     (role) => registry[role] ?? [],
     [registry]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MessageActionsContext.Provider,
-    {
-      value: { getActions, registerActions, clearActions },
-      children
-    }
+  const contextValue = React19.useMemo(
+    () => ({ getActions, registerActions, clearActions }),
+    [getActions, registerActions, clearActions]
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(MessageActionsContext.Provider, { value: contextValue, children });
 }
 function useMessageActionsContext() {
   return React19.useContext(MessageActionsContext);
@@ -4487,6 +4254,8 @@ function Action({
 Action.displayName = "Action";
 function MessageActions2({ role, children }) {
   const ctx = useMessageActionsContext();
+  const ctxRef = React19.useRef(ctx);
+  ctxRef.current = ctx;
   const actions = React19.useMemo(() => {
     const result = [];
     React19__namespace.default.Children.forEach(children, (child) => {
@@ -4545,10 +4314,11 @@ function MessageActions2({ role, children }) {
     return result;
   }, [children]);
   React19.useLayoutEffect(() => {
-    if (!ctx) return;
-    ctx.registerActions(role, actions);
-    return () => ctx.clearActions(role);
-  }, [ctx, role, actions]);
+    const c = ctxRef.current;
+    if (!c) return;
+    c.registerActions(role, actions);
+    return () => c.clearActions(role);
+  }, [role, actions]);
   return null;
 }
 function FloatingActions({
@@ -4565,7 +4335,7 @@ function FloatingActions({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex items-center gap-0.5 mt-1",
         "opacity-0 group-hover/message:opacity-100 transition-opacity duration-150",
         align === "right" ? "justify-end" : "justify-start"
@@ -4580,7 +4350,7 @@ function FloatingActions({
             type: "button",
             title: action.tooltip,
             "aria-label": action.tooltip,
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "flex items-center justify-center size-6 rounded-md",
               "text-muted-foreground hover:text-foreground hover:bg-muted",
               "transition-colors",
@@ -4764,7 +4534,9 @@ function DefaultMessage({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Message,
       {
-        className: cn("flex gap-2 group/user-msg group/message justify-end"),
+        className: chunk5EGBIQYS_cjs.cn(
+          "csdk-message csdk-user-message flex gap-2 group/user-msg group/message justify-end"
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full min-w-[200px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4775,7 +4547,7 @@ function DefaultMessage({
                 onChange: (e) => setEditValue(e.target.value),
                 onKeyDown: handleEditKeyDown,
                 rows: Math.max(2, (editValue.match(/\n/g) || []).length + 1),
-                className: cn(
+                className: chunk5EGBIQYS_cjs.cn(
                   "csdk-edit-textarea w-full rounded-lg px-3 py-2 text-sm resize-none",
                   "bg-primary text-primary-foreground placeholder:text-primary-foreground/50",
                   "focus:outline-none focus:ring-2 focus:ring-primary-foreground/30",
@@ -4809,7 +4581,7 @@ function DefaultMessage({
               /* @__PURE__ */ jsxRuntime.jsx(
                 MessageContent,
                 {
-                  className: cn(
+                  className: chunk5EGBIQYS_cjs.cn(
                     "csdk-message-user rounded-lg px-4 py-2 bg-primary text-primary-foreground",
                     userMessageClassName
                   ),
@@ -4824,7 +4596,7 @@ function DefaultMessage({
                   type: "button",
                   onClick: startEdit,
                   "aria-label": "Edit message",
-                  className: cn(
+                  className: chunk5EGBIQYS_cjs.cn(
                     "csdk-edit-btn absolute -left-7 top-1/2 -translate-y-1/2",
                     "size-6 flex items-center justify-center rounded-full",
                     "text-muted-foreground bg-background border border-border shadow-sm",
@@ -4927,7 +4699,7 @@ function DefaultMessage({
     result: exec.result,
     error: exec.error
   }));
-  return /* @__PURE__ */ jsxRuntime.jsxs(Message, { className: "flex gap-2 group/message", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Message, { className: "csdk-message csdk-assistant-message flex gap-2 group/message", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MessageAvatar,
       {
@@ -4935,7 +4707,7 @@ function DefaultMessage({
         alt: "Assistant",
         fallback: assistantAvatar.fallback,
         fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback && !assistantAvatar.component ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-        className: cn("bg-muted", assistantAvatar.className),
+        className: chunk5EGBIQYS_cjs.cn("bg-muted", assistantAvatar.className),
         children: assistantAvatar.component
       }
     ),
@@ -4948,13 +4720,13 @@ function DefaultMessage({
           className: "mb-2"
         }
       ),
-      isLastMessage && isProcessing && !completedTools?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }) : (
+      isLastMessage && isProcessing && !completedTools?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.Loader, { variant: "dots", size: "sm" }) }) : (
         /* Show streaming loader when loading with no content and no tools */
-        isLastMessage && isLoading && !cleanContent?.trim() && !toolsWithCustomRender?.length && !toolsWithoutCustomRender?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: loaderVariant, size: "sm" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isLastMessage && isLoading && !cleanContent?.trim() && !toolsWithCustomRender?.length && !toolsWithoutCustomRender?.length && !pendingApprovalTools?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.Loader, { variant: loaderVariant, size: "sm" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           cleanContent?.trim() && /* @__PURE__ */ jsxRuntime.jsx(
             MessageContent,
             {
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "csdk-message-assistant rounded-lg px-4 py-2 bg-muted",
                 assistantMessageClassName
               ),
@@ -4963,7 +4735,7 @@ function DefaultMessage({
               children: cleanContent
             }
           ),
-          toolsWithCustomRender && toolsWithCustomRender.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", cleanContent?.trim() && "mt-2"), children: toolsWithCustomRender.map((exec) => {
+          toolsWithCustomRender && toolsWithCustomRender.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("space-y-2", cleanContent?.trim() && "mt-2"), children: toolsWithCustomRender.map((exec) => {
             const toolDef = registeredTools?.find(
               (t) => t.name === exec.name
             );
@@ -5006,10 +4778,10 @@ function DefaultMessage({
                 exec.id
               );
             }
-            if (fallbackToolRenderer) {
-              const FallbackRenderer = fallbackToolRenderer;
+            const Renderer = toolRenderers?.[exec.name];
+            if (Renderer) {
               return /* @__PURE__ */ jsxRuntime.jsx(
-                FallbackRenderer,
+                Renderer,
                 {
                   execution: {
                     id: exec.id,
@@ -5018,16 +4790,17 @@ function DefaultMessage({
                     status: exec.status,
                     result: exec.result,
                     error: exec.error,
+                    approvalStatus: exec.approvalStatus,
                     source: exec.source
                   }
                 },
                 exec.id
               );
             }
-            const Renderer = toolRenderers?.[exec.name];
-            if (Renderer) {
+            if (fallbackToolRenderer) {
+              const FallbackRenderer = fallbackToolRenderer;
               return /* @__PURE__ */ jsxRuntime.jsx(
-                Renderer,
+                FallbackRenderer,
                 {
                   execution: {
                     id: exec.id,
@@ -5036,7 +4809,6 @@ function DefaultMessage({
                     status: exec.status,
                     result: exec.result,
                     error: exec.error,
-                    approvalStatus: exec.approvalStatus,
                     source: exec.source
                   }
                 },
@@ -5048,7 +4820,7 @@ function DefaultMessage({
           toolSteps && toolSteps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn(
+              className: chunk5EGBIQYS_cjs.cn(
                 "rounded-lg bg-muted/50 px-3 py-2",
                 cleanContent?.trim() && "mt-2"
               ),
@@ -5067,7 +4839,7 @@ function DefaultMessage({
               `${exec.id}-ui`
             );
           }),
-          isLastMessage && isProcessing && completedTools && completedTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }),
+          isLastMessage && isProcessing && completedTools && completedTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-lg bg-muted px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.Loader, { variant: "dots", size: "sm" }) }),
           pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => {
             const approvalCallbacks = {
               onApprove: (extraData) => onApproveToolExecution?.(tool.id, extraData),
@@ -5132,7 +4904,7 @@ function DefaultMessage({
               showFavicon: citations.showFavicon ?? true,
               numbered: citations.numbered ?? false,
               maxVisible: citations.maxVisible ?? 6,
-              className: cn("mt-2", citations.className)
+              className: chunk5EGBIQYS_cjs.cn("mt-2", citations.className)
             }
           ),
           shouldShowFollowUps && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5186,7 +4958,7 @@ function AttachmentPreview({ attachment }) {
     expanded && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
+        className: "csdk-image-backdrop fixed inset-0 z-50 flex items-center justify-center bg-black/80",
         onClick: () => setExpanded(false),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-[90vw] max-h-[90vh]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5201,7 +4973,7 @@ function AttachmentPreview({ attachment }) {
             "button",
             {
               type: "button",
-              className: "absolute top-2 right-2 bg-white/90 rounded-full p-2 hover:bg-white transition-colors",
+              className: "csdk-image-close absolute top-2 right-2 bg-white/90 rounded-full p-2 hover:bg-white transition-colors",
               onClick: (e) => {
                 e.stopPropagation();
                 setExpanded(false);
@@ -5411,7 +5183,7 @@ function ChatWelcome({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex flex-1 flex-col items-center justify-center px-4 py-8 overflow-auto",
         classNames.root
       ),
@@ -5419,7 +5191,7 @@ function ChatWelcome({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn(
+            className: chunk5EGBIQYS_cjs.cn(
               "flex flex-col items-center text-center mb-8",
               classNames.hero
             ),
@@ -5437,7 +5209,7 @@ function ChatWelcome({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-lg mb-6", classNames.input), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("w-full max-w-lg mb-6", classNames.input), children: [
           pendingAttachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
             att.attachment.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
               "img",
@@ -5467,8 +5239,8 @@ function ChatWelcome({
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground truncate w-full text-center mt-1", children: att.file.name.length > 10 ? att.file.name.slice(0, 8) + "..." : att.file.name })
             ] }),
-            att.status === "processing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }),
-            att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+            att.status === "processing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-attachment-loading absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.Loader, { variant: "dots", size: "sm" }) }),
+            att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-attachment-error absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -5497,7 +5269,7 @@ function ChatWelcome({
                         "label",
                         {
                           htmlFor: fileInputId,
-                          className: cn(
+                          className: chunk5EGBIQYS_cjs.cn(
                             "flex h-8 w-8 items-center justify-center rounded-2xl",
                             attachmentsEnabled ? "hover:bg-secondary-foreground/10 cursor-pointer" : "opacity-50 cursor-not-allowed"
                           ),
@@ -5548,7 +5320,7 @@ function ChatWelcome({
         suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("w-full max-w-lg mb-6 px-3", classNames.suggestions),
+            className: chunk5EGBIQYS_cjs.cn("w-full max-w-lg mb-6 px-3", classNames.suggestions),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: suggestionsLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5589,7 +5361,7 @@ function HomeView({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-chat-home-view flex flex-1 flex-col overflow-auto",
         className
       ),
@@ -5602,7 +5374,7 @@ function ChatView({ children, className }) {
   const { view } = useCopilotChatContext();
   if (view !== "chat") return null;
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-chat-view flex flex-col", className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("csdk-chat-view flex flex-col", className), children });
   }
   return null;
 }
@@ -5616,10 +5388,10 @@ function chatViewHasOnlyLayoutChildren(chatViewElement) {
   );
 }
 function Header({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-chat-header", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("csdk-chat-header", className), children });
 }
 function Footer({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("csdk-chat-footer", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk5EGBIQYS_cjs.cn("csdk-chat-footer", className), children });
 }
 function Input({ placeholder: placeholderProp, className }) {
   const {
@@ -5642,7 +5414,7 @@ function Input({ placeholder: placeholderProp, className }) {
       onValueChange: setValue,
       isLoading,
       onSubmit: handleSubmit,
-      className: cn("csdk-compound-input", className),
+      className: chunk5EGBIQYS_cjs.cn("csdk-compound-input", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           PromptInputTextarea,
@@ -5681,13 +5453,13 @@ function SuggestionsCompound({
 }) {
   const { send } = useCopilotChatContext();
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("csdk-compound-suggestions", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("csdk-compound-suggestions", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground mb-2 block", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: () => send(item),
-        className: cn(
+        className: chunk5EGBIQYS_cjs.cn(
           "csdk-followup-button px-3 py-1.5 text-sm rounded-full border",
           "bg-background hover:bg-accent transition-colors",
           buttonClassName
@@ -5713,7 +5485,7 @@ function BackButton({
       onClick: onNewChat,
       disabled: disabled || isThreadBusy,
       "aria-label": ariaLabel,
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "csdk-back-button flex items-center gap-1 text-sm",
         "hover:bg-accent rounded px-2 py-1",
         "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -5848,6 +5620,7 @@ function ChatComponent({
   // Custom rendering
   messageView,
   renderMessage,
+  wrapMessage,
   renderInput,
   renderHeader,
   // Avatar grouping
@@ -6029,6 +5802,11 @@ function ChatComponent({
     Home,
     ChatView
   );
+  const layoutTypes = [HomeView, Home, ChatView, Header, Footer];
+  const behaviorChildren = React19__namespace.default.Children.toArray(children).filter(
+    (child) => React19__namespace.default.isValidElement(child) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    !layoutTypes.includes(child.type)
+  );
   const chatViewElement = findCompoundChild(children, ChatView);
   const chatViewNeedsDefault = chatViewElement && (!chatViewElement.props.children || chatViewHasOnlyLayoutChildren(chatViewElement));
   const showDefaultWelcome = view === "home" && !hasCustomHome && welcome !== false;
@@ -6078,7 +5856,7 @@ function ChatComponent({
   return /* @__PURE__ */ jsxRuntime.jsx(MessageActionsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(CopilotChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex h-full flex-col bg-background relative",
         className,
         classNames.root
@@ -6087,7 +5865,7 @@ function ChatComponent({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       children: [
-        isDragging && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
+        isDragging && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-dropzone-overlay absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
         showHeader && (renderHeader ? renderHeader() : /* @__PURE__ */ jsxRuntime.jsx(
           ChatHeader,
           {
@@ -6100,6 +5878,7 @@ function ChatComponent({
           }
         )),
         rootHeader,
+        behaviorChildren.length > 0 && behaviorChildren,
         hasCustomLayout && viewChildren,
         showDefaultWelcome ? (
           /* Default Welcome Screen (centered input) */
@@ -6128,12 +5907,12 @@ function ChatComponent({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(
             ChatContainerRoot,
             {
-              className: cn("flex-1 relative", classNames.container),
+              className: chunk5EGBIQYS_cjs.cn("flex-1 relative", classNames.container),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   ChatContainerContent,
                   {
-                    className: cn("gap-4 p-4", classNames.messageList),
+                    className: chunk5EGBIQYS_cjs.cn("gap-4 p-4", classNames.messageList),
                     children: [
                       messages.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-8 text-center text-muted-foreground", children: welcomeMessage || "Send a message to start the conversation" }),
                       (() => {
@@ -6186,7 +5965,10 @@ function ChatComponent({
                               onSendMessage?.(question);
                             }
                           };
-                          return renderMessage ? /* @__PURE__ */ jsxRuntime.jsx(React19__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsxRuntime.jsx(
+                          if (renderMessage) {
+                            return /* @__PURE__ */ jsxRuntime.jsx(React19__namespace.default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id);
+                          }
+                          const defaultMsg = /* @__PURE__ */ jsxRuntime.jsx(
                             DefaultMessage,
                             {
                               message: messageWithExecutions,
@@ -6217,6 +5999,11 @@ function ChatComponent({
                             },
                             message.id
                           );
+                          return wrapMessage ? /* @__PURE__ */ jsxRuntime.jsx(React19__namespace.default.Fragment, { children: wrapMessage(
+                            defaultMsg,
+                            messageWithExecutions,
+                            index
+                          ) }, message.id) : defaultMsg;
                         });
                         return messageView?.children ? messageView.children({ messages, messageElements }) : messageElements;
                       })(),
@@ -6242,7 +6029,7 @@ function ChatComponent({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none z-10 flex items-end justify-end p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollButton, { className: "shadow-md pointer-events-auto" }) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-scroll-btn-layer absolute inset-0 pointer-events-none z-10 flex items-end justify-end p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollButton, { className: "shadow-md pointer-events-auto" }) })
               ]
             }
           ) }),
@@ -6254,7 +6041,7 @@ function ChatComponent({
               className: classNames.suggestions
             }
           ),
-          renderInput ? renderInput() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-2 pt-0", classNames.input), children: [
+          renderInput ? renderInput() : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5EGBIQYS_cjs.cn("p-2 pt-0", classNames.input), children: [
             pendingAttachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
               att.attachment.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "img",
@@ -6284,8 +6071,8 @@ function ChatComponent({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground truncate w-full text-center mt-1", children: att.file.name.length > 10 ? att.file.name.slice(0, 8) + "..." : att.file.name })
               ] }),
-              att.status === "processing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, { variant: "dots", size: "sm" }) }),
-              att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+              att.status === "processing" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-attachment-loading absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5EGBIQYS_cjs.Loader, { variant: "dots", size: "sm" }) }),
+              att.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "csdk-attachment-error absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -6315,7 +6102,7 @@ function ChatComponent({
                           "label",
                           {
                             htmlFor: fileInputId,
-                            className: cn(
+                            className: chunk5EGBIQYS_cjs.cn(
                               "csdk-button-attach flex h-8 w-8 items-center justify-center rounded-2xl",
                               attachmentsEnabled ? "hover:bg-secondary-foreground/10 cursor-pointer" : "opacity-50 cursor-not-allowed"
                             ),
@@ -6442,7 +6229,7 @@ function ToolExecutionMessage({
   const allCompleted = executions.every(
     (exec) => exec.status === "completed" || exec.status === "error"
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Message, { className: cn("flex gap-2", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Message, { className: chunk5EGBIQYS_cjs.cn("flex gap-2", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MessageAvatar,
       {
@@ -6564,7 +6351,7 @@ function useInternalThreadManager(config = {}) {
     saveDebounce,
     autoRestoreLastThread
   };
-  const threadManager = chunkTCPAT3WG_cjs.useThreadManager(threadManagerConfig);
+  const threadManager = chunk5UGWLGFS_cjs.useThreadManager(threadManagerConfig);
   const {
     currentThread,
     currentThreadId,
@@ -6574,7 +6361,14 @@ function useInternalThreadManager(config = {}) {
     clearCurrentThread,
     refreshThreads
   } = threadManager;
-  const { messages, setMessages, status, isLoading, getAllMessages } = chunkTCPAT3WG_cjs.useCopilot();
+  const {
+    messages,
+    setMessages,
+    status,
+    isLoading,
+    getAllMessages,
+    switchBranch
+  } = chunkLHLVTGIP_cjs.useCopilot();
   const isLoadingMessagesRef = React19.useRef(false);
   const savingToThreadRef = React19.useRef(null);
   const lastSavedSnapshotRef = React19.useRef("");
@@ -6617,11 +6411,17 @@ function useInternalThreadManager(config = {}) {
           toolCallId: m.tool_call_id,
           parentId: m.parent_id,
           childrenIds: m.children_ids,
-          attachments: m.metadata?.attachments
+          attachments: m.metadata?.attachments,
+          thinking: m.metadata?.thinking,
+          // Preserve full metadata including citations, toolCallsHidden, toolExecutions, etc.
+          metadata: m.metadata
         }));
         lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
         savingToThreadRef.current = threadId;
         setMessages(uiMessages);
+        if (thread.activeLeafId) {
+          switchBranch(thread.activeLeafId);
+        }
       } else {
         lastSavedSnapshotRef.current = "";
         savingToThreadRef.current = threadId;
@@ -6632,7 +6432,13 @@ function useInternalThreadManager(config = {}) {
         isLoadingMessagesRef.current = false;
       });
     },
-    [switchThread, setMessages, getMessageSnapshot, onThreadChange]
+    [
+      switchThread,
+      setMessages,
+      switchBranch,
+      getMessageSnapshot,
+      onThreadChange
+    ]
   );
   const handleNewThread = React19.useCallback(async () => {
     isLoadingMessagesRef.current = true;
@@ -6670,6 +6476,9 @@ function useInternalThreadManager(config = {}) {
       lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
       savingToThreadRef.current = currentThread.id;
       setMessages(uiMessages);
+      if (currentThread.activeLeafId) {
+        switchBranch(currentThread.activeLeafId);
+      }
     } else {
       lastSavedSnapshotRef.current = "";
       savingToThreadRef.current = currentThread.id;
@@ -6678,7 +6487,15 @@ function useInternalThreadManager(config = {}) {
     requestAnimationFrame(() => {
       isLoadingMessagesRef.current = false;
     });
-  }, [enabled, adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
+  }, [
+    enabled,
+    adapter,
+    currentThread,
+    setMessages,
+    switchBranch,
+    getMessageSnapshot,
+    onThreadChange
+  ]);
   React19.useEffect(() => {
     if (!enabled) return;
     if (isLoadingMessagesRef.current) {
@@ -6698,9 +6515,10 @@ function useInternalThreadManager(config = {}) {
     const coreMessages = convertToCore(
       allUIMessages.length > 0 ? allUIMessages : messages
     );
+    const activeLeafId = messages[messages.length - 1]?.id;
     if (!currentThreadId && !savingToThreadRef.current) {
       savingToThreadRef.current = "creating";
-      createThread({ messages: coreMessages }).then((thread) => {
+      createThread({ messages: coreMessages, activeLeafId }).then((thread) => {
         lastSavedSnapshotRef.current = currentSnapshot;
         savingToThreadRef.current = thread.id;
         onThreadChange?.(thread.id);
@@ -6710,7 +6528,7 @@ function useInternalThreadManager(config = {}) {
     if (savingToThreadRef.current && savingToThreadRef.current !== currentThreadId) {
       return;
     }
-    updateCurrentThread({ messages: coreMessages });
+    updateCurrentThread({ messages: coreMessages, activeLeafId });
     lastSavedSnapshotRef.current = currentSnapshot;
   }, [
     enabled,
@@ -6754,7 +6572,7 @@ function parsePersistenceConfig(persistence, onThreadChange) {
         };
       case "server":
         return {
-          adapter: chunkWIXFZUEZ_cjs.createServerAdapter({
+          adapter: chunkKGYDGK3U_cjs.createServerAdapter({
             endpoint: persistence.endpoint,
             headers: persistence.headers
           }),
@@ -6788,6 +6606,7 @@ function CopilotChatBase(props) {
     classNames,
     header,
     children,
+    allowEdit = false,
     ...chatProps
   } = props;
   const persistenceConfig = parsePersistenceConfig(persistence, onThreadChange);
@@ -6807,7 +6626,7 @@ function CopilotChatBase(props) {
     switchBranch,
     getBranchInfo,
     editMessage
-  } = chunkTCPAT3WG_cjs.useCopilot();
+  } = chunkLHLVTGIP_cjs.useCopilot();
   const toolExecutions = rawToolExecutions.map(
     (exec) => ({
       id: exec.id,
@@ -6848,7 +6667,7 @@ function CopilotChatBase(props) {
               } catch {
                 return {
                   ...exec,
-                  result: { success: true, message: resultContent }
+                  result: { success: false, message: resultContent }
                 };
               }
             }
@@ -6865,7 +6684,7 @@ function CopilotChatBase(props) {
               try {
                 result = JSON.parse(resultContent);
               } catch {
-                result = { success: true, message: resultContent };
+                result = { success: false, message: resultContent };
               }
             }
             let args = {};
@@ -6886,8 +6705,7 @@ function CopilotChatBase(props) {
               args,
               status: result ? "completed" : "pending",
               result,
-              timestamp: Date.now(),
-              // Historical - use current time
+              timestamp: m.createdAt instanceof Date ? m.createdAt.getTime() : Date.now(),
               hidden
             };
           }
@@ -7020,7 +6838,7 @@ function CopilotChatBase(props) {
       isThreadBusy: isBusy,
       getBranchInfo,
       onSwitchBranch: switchBranch,
-      onEditMessage: editMessage,
+      onEditMessage: allowEdit ? editMessage : void 0,
       children
     }
   );
@@ -7039,8 +6857,14 @@ var CopilotChat = Object.assign(CopilotChatBase, {
   Suggestions: Chat.Suggestions,
   BackButton: Chat.BackButton,
   // Navigation: start new chat
-  ThreadPicker: Chat.ThreadPicker
+  ThreadPicker: Chat.ThreadPicker,
   // Thread switching
+  // Message actions compound components (alpha)
+  MessageActions: Chat.MessageActions,
+  CopyAction: Chat.CopyAction,
+  EditAction: Chat.EditAction,
+  FeedbackAction: Chat.FeedbackAction,
+  Action: Chat.Action
 });
 var ConnectedChat = CopilotChat;
 function YourGPTLogo({ className }) {
@@ -7067,7 +6891,7 @@ function PoweredBy({ className, showLogo = true }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
+      className: chunk5EGBIQYS_cjs.cn(
         "flex items-center justify-center gap-1.5 py-2 text-xs text-muted-foreground",
         className
       ),
@@ -7118,9 +6942,17 @@ var ChatPrimitives = {
   ScrollAnchor: ChatContainerScrollAnchor,
   // ── Indicators ────────────────────────────────────────
   /** Loading / streaming indicator (dots, wave, typing variants) */
-  Loader
+  Loader: chunk5EGBIQYS_cjs.Loader
 };
 
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function () { return chunk5EGBIQYS_cjs.Loader; }
+});
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return chunk5EGBIQYS_cjs.cn; }
+});
 exports.AlertTriangleIcon = AlertTriangleIcon;
 exports.BotIcon = BotIcon;
 exports.BranchNavigator = BranchNavigator;
@@ -7157,7 +6989,6 @@ exports.DevLogger = DevLogger;
 exports.FeedbackBar = FeedbackBar;
 exports.FollowUpQuestions = FollowUpQuestions;
 exports.InlineToolSteps = InlineToolSteps;
-exports.Loader = Loader;
 exports.MCPUIFrame = MCPUIFrame;
 exports.MCPUIFrameList = MCPUIFrameList;
 exports.Markdown = Markdown;
@@ -7209,7 +7040,6 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.UserIcon = UserIcon;
 exports.XIcon = XIcon2;
 exports.annotationsToCitations = annotationsToCitations;
-exports.cn = cn;
 exports.parseFollowUps = parseFollowUps;
 exports.resultsToCitations = resultsToCitations;
 exports.useChatContainer = useChatContainer;