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

package/dist/ui/index.js

@@ -1,11 +1,15 @@
-import { useCopilot, useThreadManager } from '../chunk-PT2TOHG5.js';
-import { createServerAdapter } from '../chunk-WZ2TOZ7M.js';
+import { useThreadManager } from '../chunk-ZAOTYA5L.js';
 import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
+import { cn, Loader, TextShimmerLoader } from '../chunk-TXQ37MAO.js';
+export { Loader, cn } from '../chunk-TXQ37MAO.js';
+import { useCopilot } from '../chunk-DH6EO6NW.js';
+import { createServerAdapter } from '../chunk-YLZCTR4O.js';
 import '../chunk-EWVQWTNV.js';
 import '../chunk-VNLLW3ZI.js';
-import '../chunk-RKGRQRZU.js';
-import '../chunk-3AONOZLY.js';
-import '../chunk-LLM7AHMO.js';
+import '../chunk-533K2Z7C.js';
+import '../chunk-AIVXGTWS.js';
+import '../chunk-DDZLRCVX.js';
+import '../chunk-53UGJNHN.js';
 import '../chunk-RQ74USYU.js';
 import '../chunk-7W7QLZNC.js';
 import '../chunk-CEOMTQTP.js';
@@ -13,15 +17,12 @@ import '../chunk-PPFHA6IL.js';
 import '../chunk-DABZYCVX.js';
 import '../chunk-MNDGIW47.js';
 import '../chunk-VD74IPKB.js';
-import '../chunk-53UGJNHN.js';
 import '../chunk-DGUM43GV.js';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React19 from 'react';
 import React19__default, { memo, createContext, useState, useRef, useId, useCallback, useMemo, useLayoutEffect, useContext, useEffect } from 'react';
 import { Streamdown } from 'streamdown';
 import { code } from '@streamdown/code';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { StickToBottom as StickToBottom$1, useStickToBottomContext } from 'use-stick-to-bottom';
@@ -31,284 +32,6 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { Globe, ChevronUp, ChevronDown, ExternalLink } from 'lucide-react';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
 
-function cn(...inputs) {
-  return twMerge(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__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center translate-y-[-2px] space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-bounce-dots rounded-full",
-              dotSizes[size]
-            ),
-            style: {
-              animationDelay: `${i * 160}ms`
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ 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__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-typing rounded-full",
-              dotSizes[size]
-            ),
-            style: {
-              animationDelay: `${i * 250}ms`
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ 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__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-0.5",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-wave rounded-full",
-              barWidths[size]
-            ),
-            style: {
-              animationDelay: `${i * 100}ms`,
-              height: heights[size][i]
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ 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__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
-        /* @__PURE__ */ jsx("div", { className: cn("bg-primary csdk-loader-blink", cursorSizes[size]) }),
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsx("span", { className: cn("text-primary font-medium", textSizes[size]), children: text }),
-    /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.2s" },
-          children: "."
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.4s" },
-          children: "."
-        }
-      ),
-      /* @__PURE__ */ 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__ */ jsx(DotsLoader, { size, className });
-    case "typing":
-      return /* @__PURE__ */ jsx(TypingLoader, { size, className });
-    case "wave":
-      return /* @__PURE__ */ jsx(WaveLoader, { size, className });
-    case "terminal":
-      return /* @__PURE__ */ jsx(TerminalLoader, { size, className });
-    case "text-blink":
-      return /* @__PURE__ */ jsx(TextBlinkLoader, { text, size, className });
-    case "text-shimmer":
-      return /* @__PURE__ */ jsx(TextShimmerLoader, { text, size, className });
-    case "loading-dots":
-      return /* @__PURE__ */ jsx(TextDotsLoader, { text, size, className });
-    default:
-      return /* @__PURE__ */ jsx(TypingLoader, { size, className });
-  }
-}
 var createHeading = (Tag) => {
   const HeadingComponent = ({
     children,
@@ -718,9 +441,9 @@ var MessageContent = ({
   ...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",
+    "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",
@@ -2424,7 +2147,10 @@ function Confirmation({
         "div",
         {
           className: cn(
-            "confirmation rounded-lg border bg-card text-card-foreground",
+            "csdk-confirm-card",
+            "confirmation rounded-2xl overflow-hidden",
+            "border border-border/60",
+            "bg-card text-card-foreground shadow-sm",
             className
           ),
           children
@@ -2439,7 +2165,7 @@ function ConfirmationPending({
 }) {
   const { state } = useConfirmationContext();
   if (state !== "pending") return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("p-4", className), children });
+  return /* @__PURE__ */ jsx("div", { className: cn("pl-5 pr-4 pt-4 pb-3", className), children });
 }
 function ConfirmationApproved({
   children,
@@ -2451,11 +2177,14 @@ function ConfirmationApproved({
     "div",
     {
       className: cn(
-        "flex items-center gap-2 px-4 py-2 text-sm text-green-600 dark:text-green-400",
+        "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__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5 shrink-0" }),
         children || /* @__PURE__ */ jsx("span", { children: "Approved" })
       ]
     }
@@ -2471,11 +2200,14 @@ function ConfirmationRejected({
     "div",
     {
       className: cn(
-        "flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400",
+        "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__ */ jsx(XIcon2, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(XIcon2, { className: "h-3.5 w-3.5 shrink-0" }),
         children || /* @__PURE__ */ jsx("span", { children: "Rejected" })
       ]
     }
@@ -2487,8 +2219,8 @@ function ConfirmationMessage({
 }) {
   const { message } = useConfirmationContext();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", className), children: [
-    /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: children || message || "This action requires your approval." })
+    /* @__PURE__ */ 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__ */ jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }) }),
+    /* @__PURE__ */ 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({
@@ -2501,9 +2233,39 @@ function ConfirmationActions({
   if (children) {
     return /* @__PURE__ */ jsx("div", { className: cn("mt-3 flex justify-end gap-2", className), children });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("mt-3 flex justify-end gap-2", className), children: [
-    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onReject, children: rejectLabel }),
-    /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: onApprove, children: approveLabel })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-0 border-t border-border/40 mt-3" }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end gap-2 pt-3", className), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onReject,
+          className: 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__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onApprove,
+          className: 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({
@@ -2582,9 +2344,9 @@ function PermissionConfirmation({
       {
         className: 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: [
@@ -2600,9 +2362,9 @@ function PermissionConfirmation({
       {
         className: 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: [
@@ -2617,18 +2379,21 @@ function PermissionConfirmation({
     {
       className: 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__ */ jsxs("div", { className: "flex items-start gap-3 p-4", children: [
-          /* @__PURE__ */ 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__ */ jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4 pb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
-            toolName && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-1", children: toolName }),
+            toolName && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-amber-600/80 dark:text-amber-400/70 mb-1", children: toolName }),
             /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground leading-snug", children: message || "This tool requires your approval to execute." })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-4 border-t border-border/40" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -2637,8 +2402,8 @@ function PermissionConfirmation({
               className: 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"
             }
@@ -2652,7 +2417,8 @@ function PermissionConfirmation({
                 "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"
             }
@@ -2681,9 +2447,9 @@ function CompactPermissionConfirmation({
       {
         className: 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: [
@@ -2699,9 +2465,9 @@ function CompactPermissionConfirmation({
       {
         className: 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: [
@@ -2716,15 +2482,18 @@ function CompactPermissionConfirmation({
     {
       className: 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__ */ jsxs("div", { className: "flex items-start gap-3 p-4", children: [
-          /* @__PURE__ */ 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__ */ jsx(AlertTriangleIcon, { className: "h-3.5 w-3.5 text-amber-600 dark:text-amber-400" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4 pb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-muted", children: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }) }),
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 pb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-4 border-t border-border/40" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -2733,8 +2502,8 @@ function CompactPermissionConfirmation({
               className: 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"
             }
@@ -2748,7 +2517,8 @@ function CompactPermissionConfirmation({
                 "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"
             }
@@ -2930,12 +2700,12 @@ function DevLogger({
     isOpen && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/50", children: [
@@ -3398,7 +3168,7 @@ function ModelSelector({
       "div",
       {
         className: cn(
-          "absolute z-50 top-full left-0 right-0 mt-1",
+          "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"
@@ -4258,7 +4028,7 @@ function MCPUIFrame({
       "data-testid": testId,
       children: [
         resource.metadata?.title && /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "md" }) }),
+        showLoading && isLoading && /* @__PURE__ */ jsx("div", { className: "csdk-mcp-loading absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "md" }) }),
         /* @__PURE__ */ jsx(
           "iframe",
           {
@@ -4332,13 +4102,11 @@ function MessageActionsProvider({
     (role) => registry[role] ?? [],
     [registry]
   );
-  return /* @__PURE__ */ jsx(
-    MessageActionsContext.Provider,
-    {
-      value: { getActions, registerActions, clearActions },
-      children
-    }
+  const contextValue = useMemo(
+    () => ({ getActions, registerActions, clearActions }),
+    [getActions, registerActions, clearActions]
   );
+  return /* @__PURE__ */ jsx(MessageActionsContext.Provider, { value: contextValue, children });
 }
 function useMessageActionsContext() {
   return useContext(MessageActionsContext);
@@ -4464,6 +4232,8 @@ function Action({
 Action.displayName = "Action";
 function MessageActions2({ role, children }) {
   const ctx = useMessageActionsContext();
+  const ctxRef = useRef(ctx);
+  ctxRef.current = ctx;
   const actions = useMemo(() => {
     const result = [];
     React19__default.Children.forEach(children, (child) => {
@@ -4522,10 +4292,11 @@ function MessageActions2({ role, children }) {
     return result;
   }, [children]);
   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({
@@ -4741,7 +4512,9 @@ function DefaultMessage({
     return /* @__PURE__ */ jsxs(
       Message,
       {
-        className: cn("flex gap-2 group/user-msg group/message justify-end"),
+        className: cn(
+          "csdk-message csdk-user-message flex gap-2 group/user-msg group/message justify-end"
+        ),
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full min-w-[200px]", children: [
             /* @__PURE__ */ jsx(
@@ -4904,7 +4677,7 @@ function DefaultMessage({
     result: exec.result,
     error: exec.error
   }));
-  return /* @__PURE__ */ jsxs(Message, { className: "flex gap-2 group/message", children: [
+  return /* @__PURE__ */ jsxs(Message, { className: "csdk-message csdk-assistant-message flex gap-2 group/message", children: [
     /* @__PURE__ */ jsx(
       MessageAvatar,
       {
@@ -4983,10 +4756,10 @@ function DefaultMessage({
                 exec.id
               );
             }
-            if (fallbackToolRenderer) {
-              const FallbackRenderer = fallbackToolRenderer;
+            const Renderer = toolRenderers?.[exec.name];
+            if (Renderer) {
               return /* @__PURE__ */ jsx(
-                FallbackRenderer,
+                Renderer,
                 {
                   execution: {
                     id: exec.id,
@@ -4995,16 +4768,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__ */ jsx(
-                Renderer,
+                FallbackRenderer,
                 {
                   execution: {
                     id: exec.id,
@@ -5013,7 +4787,6 @@ function DefaultMessage({
                     status: exec.status,
                     result: exec.result,
                     error: exec.error,
-                    approvalStatus: exec.approvalStatus,
                     source: exec.source
                   }
                 },
@@ -5163,7 +4936,7 @@ function AttachmentPreview({ attachment }) {
     expanded && /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative max-w-[90vw] max-h-[90vh]", children: [
           /* @__PURE__ */ jsx(
@@ -5178,7 +4951,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);
@@ -5444,8 +5217,8 @@ function ChatWelcome({
               ),
               /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
-            att.status === "error" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+            att.status === "processing" && /* @__PURE__ */ jsx("div", { className: "csdk-attachment-loading absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
+            att.status === "error" && /* @__PURE__ */ jsx("div", { className: "csdk-attachment-error absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -5825,6 +5598,7 @@ function ChatComponent({
   // Custom rendering
   messageView,
   renderMessage,
+  wrapMessage,
   renderInput,
   renderHeader,
   // Avatar grouping
@@ -6006,6 +5780,11 @@ function ChatComponent({
     Home,
     ChatView
   );
+  const layoutTypes = [HomeView, Home, ChatView, Header, Footer];
+  const behaviorChildren = React19__default.Children.toArray(children).filter(
+    (child) => React19__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;
@@ -6064,7 +5843,7 @@ function ChatComponent({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       children: [
-        isDragging && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
+        isDragging && /* @__PURE__ */ 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__ */ jsx("div", { className: "text-primary font-medium text-lg", children: "Drop files here" }) }),
         showHeader && (renderHeader ? renderHeader() : /* @__PURE__ */ jsx(
           ChatHeader,
           {
@@ -6077,6 +5856,7 @@ function ChatComponent({
           }
         )),
         rootHeader,
+        behaviorChildren.length > 0 && behaviorChildren,
         hasCustomLayout && viewChildren,
         showDefaultWelcome ? (
           /* Default Welcome Screen (centered input) */
@@ -6163,7 +5943,10 @@ function ChatComponent({
                               onSendMessage?.(question);
                             }
                           };
-                          return renderMessage ? /* @__PURE__ */ jsx(React19__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
+                          if (renderMessage) {
+                            return /* @__PURE__ */ jsx(React19__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id);
+                          }
+                          const defaultMsg = /* @__PURE__ */ jsx(
                             DefaultMessage,
                             {
                               message: messageWithExecutions,
@@ -6194,6 +5977,11 @@ function ChatComponent({
                             },
                             message.id
                           );
+                          return wrapMessage ? /* @__PURE__ */ jsx(React19__default.Fragment, { children: wrapMessage(
+                            defaultMsg,
+                            messageWithExecutions,
+                            index
+                          ) }, message.id) : defaultMsg;
                         });
                         return messageView?.children ? messageView.children({ messages, messageElements }) : messageElements;
                       })(),
@@ -6219,7 +6007,7 @@ function ChatComponent({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none z-10 flex items-end justify-end p-4", children: /* @__PURE__ */ jsx(ScrollButton, { className: "shadow-md pointer-events-auto" }) })
+                /* @__PURE__ */ jsx("div", { className: "csdk-scroll-btn-layer absolute inset-0 pointer-events-none z-10 flex items-end justify-end p-4", children: /* @__PURE__ */ jsx(ScrollButton, { className: "shadow-md pointer-events-auto" }) })
               ]
             }
           ) }),
@@ -6261,8 +6049,8 @@ function ChatComponent({
                 ),
                 /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
-              att.status === "error" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
+              att.status === "processing" && /* @__PURE__ */ jsx("div", { className: "csdk-attachment-loading absolute inset-0 bg-background/80 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "sm" }) }),
+              att.status === "error" && /* @__PURE__ */ jsx("div", { className: "csdk-attachment-error absolute inset-0 bg-destructive/20 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: "Error" }) }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -6551,7 +6339,14 @@ function useInternalThreadManager(config = {}) {
     clearCurrentThread,
     refreshThreads
   } = threadManager;
-  const { messages, setMessages, status, isLoading, getAllMessages } = useCopilot();
+  const {
+    messages,
+    setMessages,
+    status,
+    isLoading,
+    getAllMessages,
+    switchBranch
+  } = useCopilot();
   const isLoadingMessagesRef = useRef(false);
   const savingToThreadRef = useRef(null);
   const lastSavedSnapshotRef = useRef("");
@@ -6594,11 +6389,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;
@@ -6609,7 +6410,13 @@ function useInternalThreadManager(config = {}) {
         isLoadingMessagesRef.current = false;
       });
     },
-    [switchThread, setMessages, getMessageSnapshot, onThreadChange]
+    [
+      switchThread,
+      setMessages,
+      switchBranch,
+      getMessageSnapshot,
+      onThreadChange
+    ]
   );
   const handleNewThread = useCallback(async () => {
     isLoadingMessagesRef.current = true;
@@ -6647,6 +6454,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;
@@ -6655,7 +6465,15 @@ function useInternalThreadManager(config = {}) {
     requestAnimationFrame(() => {
       isLoadingMessagesRef.current = false;
     });
-  }, [enabled, adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
+  }, [
+    enabled,
+    adapter,
+    currentThread,
+    setMessages,
+    switchBranch,
+    getMessageSnapshot,
+    onThreadChange
+  ]);
   useEffect(() => {
     if (!enabled) return;
     if (isLoadingMessagesRef.current) {
@@ -6675,9 +6493,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);
@@ -6687,7 +6506,7 @@ function useInternalThreadManager(config = {}) {
     if (savingToThreadRef.current && savingToThreadRef.current !== currentThreadId) {
       return;
     }
-    updateCurrentThread({ messages: coreMessages });
+    updateCurrentThread({ messages: coreMessages, activeLeafId });
     lastSavedSnapshotRef.current = currentSnapshot;
   }, [
     enabled,
@@ -6765,6 +6584,7 @@ function CopilotChatBase(props) {
     classNames,
     header,
     children,
+    allowEdit = false,
     ...chatProps
   } = props;
   const persistenceConfig = parsePersistenceConfig(persistence, onThreadChange);
@@ -6825,7 +6645,7 @@ function CopilotChatBase(props) {
               } catch {
                 return {
                   ...exec,
-                  result: { success: true, message: resultContent }
+                  result: { success: false, message: resultContent }
                 };
               }
             }
@@ -6842,7 +6662,7 @@ function CopilotChatBase(props) {
               try {
                 result = JSON.parse(resultContent);
               } catch {
-                result = { success: true, message: resultContent };
+                result = { success: false, message: resultContent };
               }
             }
             let args = {};
@@ -6863,8 +6683,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
             };
           }
@@ -6997,7 +6816,7 @@ function CopilotChatBase(props) {
       isThreadBusy: isBusy,
       getBranchInfo,
       onSwitchBranch: switchBranch,
-      onEditMessage: editMessage,
+      onEditMessage: allowEdit ? editMessage : void 0,
       children
     }
   );
@@ -7016,8 +6835,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 }) {
@@ -7098,6 +6923,6 @@ var ChatPrimitives = {
   Loader
 };
 
-export { AlertTriangleIcon, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, cn, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
+export { AlertTriangleIcon, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map