@timbal-ai/timbal-react 0.3.0 → 0.4.0

package/dist/index.esm.js

@@ -867,6 +867,29 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 // src/index.ts
 import { parseSSELine as parseSSELine2 } from "@timbal-ai/timbal-sdk";
 
+// src/components/thread.tsx
+import {
+  ActionBarMorePrimitive,
+  ActionBarPrimitive,
+  AuiIf as AuiIf2,
+  ComposerPrimitive as ComposerPrimitive3,
+  ErrorPrimitive,
+  MessagePartPrimitive,
+  MessagePrimitive as MessagePrimitive2,
+  ThreadPrimitive,
+  useThread
+} from "@assistant-ui/react";
+import {
+  ArrowDownIcon,
+  CheckIcon as CheckIcon3,
+  CopyIcon as CopyIcon2,
+  DownloadIcon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  RefreshCwIcon
+} from "lucide-react";
+import { motion as motion4 } from "motion/react";
+
 // src/components/attachment.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { XIcon as XIcon2, PlusIcon, FileText } from "lucide-react";
@@ -1079,87 +1102,147 @@ function AvatarFallback({
 }
 
 // src/components/tooltip-icon-button.tsx
-import { forwardRef } from "react";
-import { Slottable } from "@radix-ui/react-slot";
+import { forwardRef as forwardRef2 } from "react";
 
-// src/ui/button.tsx
-import { cva } from "class-variance-authority";
+// src/ui/timbal-v2-button.tsx
+import * as React from "react";
 import { Slot } from "radix-ui";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
+
+// src/ui/timbal-v2-button-tokens.ts
+var TIMBAL_V2_SIZE_HEIGHT = {
+  xs: "min-h-8 h-8",
+  sm: "min-h-9 h-9",
+  md: "min-h-10 h-10",
+  lg: "min-h-11 h-11"
+};
+var TIMBAL_V2_SIZE_ICON = {
+  xs: "min-h-8 min-w-8 size-8",
+  sm: "min-h-8 min-w-8 size-8",
+  md: "min-h-10 min-w-10 size-10",
+  lg: "min-h-11 min-w-11 size-11"
+};
+var TIMBAL_V2_SIZE_LABEL_PX = {
+  xs: "px-3",
+  sm: "px-4",
+  md: "px-5",
+  lg: "px-6"
+};
+var TIMBAL_V2_FILL = {
+  primary: "bg-gradient-to-b from-neutral-800 to-black group-hover/tbv2:from-neutral-700 group-hover/tbv2:to-neutral-900 group-active/tbv2:from-black group-active/tbv2:to-black dark:from-white dark:to-neutral-200 dark:group-hover/tbv2:from-white dark:group-hover/tbv2:to-neutral-100 dark:group-active/tbv2:from-neutral-200 dark:group-active/tbv2:to-neutral-400",
+  informative: "bg-blue-600 group-active/tbv2:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]",
+  destructive: "bg-gradient-to-b from-white to-neutral-50/75 group-hover/tbv2:from-red-50/90 group-hover/tbv2:to-red-100/70 group-active/tbv2:from-red-100/90 group-active/tbv2:to-red-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:group-hover/tbv2:from-red-500/12 dark:group-hover/tbv2:to-red-500/8 dark:group-active/tbv2:from-red-500/20 dark:group-active/tbv2:to-red-500/12",
+  secondary: "bg-gradient-to-b from-white to-neutral-50/70 group-hover/tbv2:from-neutral-50/50 group-hover/tbv2:to-neutral-100/65 group-active/tbv2:from-neutral-100/70 group-active/tbv2:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:group-hover/tbv2:from-white/[0.07] dark:group-hover/tbv2:to-white/[0.045] dark:group-active/tbv2:from-white/[0.10] dark:group-active/tbv2:to-white/[0.07]",
+  ghost: "bg-transparent group-hover/tbv2:bg-neutral-100/70 group-active/tbv2:bg-neutral-200/70 dark:group-hover/tbv2:bg-white/10 dark:group-active/tbv2:bg-white/15",
+  link: "bg-transparent"
+};
+var TIMBAL_V2_LABEL = {
+  primary: "text-white dark:text-neutral-900",
+  informative: "text-white",
+  destructive: "text-destructive dark:text-red-400",
+  secondary: "text-foreground",
+  ghost: "text-foreground",
+  link: "text-foreground underline decoration-black/25 underline-offset-2 group-hover/tbv2:decoration-black/45 dark:decoration-white/25 dark:group-hover/tbv2:decoration-white/45"
+};
+var TIMBAL_V2_BORDER = {
+  primary: "",
+  informative: "border border-white/15 dark:border-white/10",
+  destructive: "border border-destructive/45 dark:border-red-500/55",
+  secondary: "border border-neutral-200/80 dark:border-white/[0.08]",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SHADOW = {
+  primary: "shadow-sm shadow-black/15 dark:shadow-black/40",
+  informative: "shadow-sm shadow-blue-900/20 dark:shadow-black/40",
+  destructive: "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]",
+  secondary: "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_PILL_SURFACE = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
+var TIMBAL_V2_SECONDARY_CHROME = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] transition-[background-color,box-shadow,border-color] duration-200 ease-in-out hover:from-neutral-50/40 hover:to-neutral-100/60 active:from-neutral-100/65 active:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)] dark:hover:from-white/[0.07] dark:hover:to-white/[0.045] dark:active:from-white/[0.10] dark:active:to-white/[0.07]";
+
+// src/ui/timbal-v2-button.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
+  variant = "secondary",
+  size = "sm",
+  isIconOnly = false,
+  isLoading = false,
+  fullWidth = false,
   asChild = false,
+  className,
+  disabled,
+  type = "button",
+  children,
   ...props
-}) {
+}, ref) {
+  const isDisabled = disabled || isLoading;
   const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx5(
+  const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
+  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : "rounded-full";
+  return /* @__PURE__ */ jsxs3(
     Comp,
     {
-      "data-slot": "button",
+      ref,
+      type: asChild ? void 0 : type,
+      disabled: asChild ? void 0 : isDisabled,
+      "aria-disabled": asChild && isDisabled ? true : void 0,
+      "data-slot": "timbal-v2-button",
       "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      className: cn(
+        "group/tbv2 relative box-border inline-flex flex-col items-stretch overflow-hidden border-0 bg-transparent p-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        sizeClass,
+        radiusClass,
+        TIMBAL_V2_BORDER[variant],
+        TIMBAL_V2_SHADOW[variant],
+        fullWidth && "w-full",
+        isDisabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+              TIMBAL_V2_FILL[variant]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: cn(
+              "relative z-10 flex min-h-0 flex-1 items-center justify-center gap-1 leading-tight",
+              !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+              TIMBAL_V2_LABEL[variant]
+            ),
+            children: isLoading ? /* @__PURE__ */ jsx5("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+          }
+        )
+      ]
     }
   );
-}
+});
 
 // src/components/tooltip-icon-button.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        ...rest,
-        className: cn("aui-button-icon size-6 p-1", className),
-        ref,
-        children: [
-          /* @__PURE__ */ jsx6(Slottable, { children }),
-          /* @__PURE__ */ jsx6("span", { className: "aui-sr-only sr-only", children: tooltip })
-        ]
-      }
-    ) }),
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var TooltipIconButton = forwardRef2(function TooltipIconButton2({ tooltip, side = "bottom", variant = "secondary", children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(TimbalV2Button, { ref, variant, size: "sm", isIconOnly: true, ...props, children: [
+      children,
+      /* @__PURE__ */ jsx6("span", { className: "sr-only", children: tooltip })
+    ] }) }),
     /* @__PURE__ */ jsx6(TooltipContent, { side, children: tooltip })
   ] });
 });
-TooltipIconButton.displayName = "TooltipIconButton";
 
 // src/components/attachment.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var useFileSrc = (file) => {
   const [src, setSrc] = useState2(void 0);
   useEffect2(() => {
@@ -1205,7 +1288,7 @@ var AttachmentPreview = ({ src }) => {
 var AttachmentPreviewDialog = ({ children }) => {
   const src = useAttachmentSrc();
   if (!src) return children;
-  return /* @__PURE__ */ jsxs4(Dialog, { children: [
+  return /* @__PURE__ */ jsxs5(Dialog, { children: [
     /* @__PURE__ */ jsx7(
       DialogTrigger,
       {
@@ -1214,7 +1297,7 @@ var AttachmentPreviewDialog = ({ children }) => {
         children
       }
     ),
-    /* @__PURE__ */ jsxs4(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [
+    /* @__PURE__ */ jsxs5(DialogContent, { className: "aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive", children: [
       /* @__PURE__ */ jsx7(DialogTitle, { className: "aui-sr-only sr-only", children: "Image Attachment Preview" }),
       /* @__PURE__ */ jsx7("div", { className: "aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background", children: /* @__PURE__ */ jsx7(AttachmentPreview, { src }) })
     ] })
@@ -1223,7 +1306,7 @@ var AttachmentPreviewDialog = ({ children }) => {
 var AttachmentThumb = () => {
   const isImage = useAuiState((s) => s.attachment.type === "image");
   const src = useAttachmentSrc();
-  return /* @__PURE__ */ jsxs4(Avatar, { className: "aui-attachment-tile-avatar h-full w-full rounded-none", children: [
+  return /* @__PURE__ */ jsxs5(Avatar, { className: "aui-attachment-tile-avatar h-full w-full rounded-none", children: [
     /* @__PURE__ */ jsx7(
       AvatarImage,
       {
@@ -1252,8 +1335,8 @@ var AttachmentUI = () => {
         throw new Error(`Unknown attachment type: ${type}`);
     }
   });
-  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+    /* @__PURE__ */ jsxs5(
       AttachmentPrimitive.Root,
       {
         className: cn(
@@ -1309,11 +1392,10 @@ var ComposerAddAttachment = () => {
     {
       tooltip: "Add Attachment",
       side: "bottom",
-      variant: "ghost",
-      size: "icon",
-      className: "aui-composer-add-attachment size-8.5 rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+      variant: "secondary",
+      className: "aui-composer-add-attachment shrink-0 text-neutral-500 dark:text-muted-foreground",
       "aria-label": "Add Attachment",
-      children: /* @__PURE__ */ jsx7(PlusIcon, { className: "aui-attachment-add-icon size-5 stroke-[1.5px]" })
+      children: /* @__PURE__ */ jsx7(PlusIcon, { className: "aui-attachment-add-icon size-4 stroke-[1.5]" })
     }
   ) });
 };
@@ -1344,10 +1426,10 @@ import { createContext as createContext3, useContext as useContext3, useMemo as
 import { useMemo as useMemo2 } from "react";
 
 // src/artifacts/artifact-card.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
   const hasHeader = Boolean(title || toolbar);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -1356,7 +1438,7 @@ var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }
       ),
       "data-artifact-kind": kind,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs5("div", { className: "aui-artifact-header flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-1.5", children: [
+        hasHeader && /* @__PURE__ */ jsxs6("div", { className: "aui-artifact-header flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-1.5", children: [
           title && /* @__PURE__ */ jsx8("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
           !title && /* @__PURE__ */ jsx8("span", { className: "flex-1" }),
           toolbar
@@ -1368,7 +1450,7 @@ var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }
 };
 
 // src/artifacts/chart-artifact.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var ChartArtifactView = ({
   artifact
 }) => {
@@ -1379,7 +1461,7 @@ var ChartArtifactView = ({
     if (typeof artifact.dataKey === "string") return [artifact.dataKey];
     return inferDataKeys(data, xKey);
   }, [artifact.dataKey, data, xKey]);
-  return /* @__PURE__ */ jsx9(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ jsxs6("div", { className: "aui-artifact-chart p-3", children: [
+  return /* @__PURE__ */ jsx9(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ jsxs7("div", { className: "aui-artifact-chart p-3", children: [
     /* @__PURE__ */ jsx9(
       ChartSvg,
       {
@@ -1422,7 +1504,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
   const xStep = xCount > 1 ? innerW / (xCount - 1) : innerW;
   const xPos = (i) => chartType === "bar" ? PAD.left + innerW * (i + 0.5) / xCount : PAD.left + i * xStep;
   const ticks = niceTicks(minV, maxV);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "svg",
     {
       viewBox: `0 0 ${W} ${H}`,
@@ -1430,7 +1512,7 @@ var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
       role: "img",
       "aria-label": "Chart",
       children: [
-        ticks.map((t, i) => /* @__PURE__ */ jsxs6("g", { children: [
+        ticks.map((t, i) => /* @__PURE__ */ jsxs7("g", { children: [
           /* @__PURE__ */ jsx9(
             "line",
             {
@@ -1538,7 +1620,7 @@ var Area = ({ data, dataKey, xPos, yScale, baseY, color }) => {
   if (data.length === 0) return null;
   const top = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
   const path = `M ${xPos(0)},${baseY} L ${top} L ${xPos(data.length - 1)},${baseY} Z`;
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
     /* @__PURE__ */ jsx9("path", { d: path, fill: color, fillOpacity: 0.18 }),
     /* @__PURE__ */ jsx9(Polyline, { data, dataKey, xPos, yScale, color })
   ] });
@@ -1588,7 +1670,7 @@ var PieSlice = ({ cx, cy, r, start, end, color, label }) => {
   const mid = (start + end) / 2;
   const lx = cx + Math.sin(mid) * (r * 0.65);
   const ly = cy - Math.cos(mid) * (r * 0.65);
-  return /* @__PURE__ */ jsxs6("g", { children: [
+  return /* @__PURE__ */ jsxs7("g", { children: [
     /* @__PURE__ */ jsx9("path", { d: path, fill: color, stroke: "var(--background, #fff)", strokeWidth: 1 }),
     /* @__PURE__ */ jsx9(
       "text",
@@ -1603,7 +1685,7 @@ var PieSlice = ({ cx, cy, r, start, end, color, label }) => {
     )
   ] });
 };
-var Legend = ({ dataKeys }) => /* @__PURE__ */ jsx9("div", { className: "aui-artifact-chart-legend mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: dataKeys.map((k, i) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1.5", children: [
+var Legend = ({ dataKeys }) => /* @__PURE__ */ jsx9("div", { className: "aui-artifact-chart-legend mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: dataKeys.map((k, i) => /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1.5", children: [
   /* @__PURE__ */ jsx9(
     "span",
     {
@@ -1661,89 +1743,182 @@ function formatTick(v, unit) {
 }
 
 // src/artifacts/question-artifact.tsx
-import { useState as useState3 } from "react";
+import { useCallback as useCallback2, useState as useState3 } from "react";
 import { useThreadRuntime } from "@assistant-ui/react";
 import { CheckIcon } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/ui/chrome.ts
+var STUDIO_TOPBAR_GAP = "0.5rem";
+var STUDIO_TOPBAR_HEIGHT = "3rem";
+var STUDIO_PILL_HEIGHT = "2.5rem";
+var STUDIO_SIDEBAR_GAP = "0.5rem";
+var STUDIO_SIDEBAR_WIDTH = "3rem";
+var STUDIO_INSET_LEFT = `calc(${STUDIO_SIDEBAR_GAP} + ${STUDIO_SIDEBAR_WIDTH})`;
+var studioChromeShellStyle = {
+  "--studio-topbar-gap": STUDIO_TOPBAR_GAP,
+  "--studio-topbar-height": STUDIO_TOPBAR_HEIGHT,
+  "--studio-chrome-pill-height": STUDIO_PILL_HEIGHT,
+  "--studio-inset-top": `calc(${STUDIO_TOPBAR_GAP} + ${STUDIO_TOPBAR_HEIGHT})`,
+  "--studio-sidebar-gap": STUDIO_SIDEBAR_GAP,
+  "--studio-sidebar-width": STUDIO_SIDEBAR_WIDTH,
+  "--studio-inset-left": STUDIO_INSET_LEFT
+};
+var studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)]";
+var studioTopbarIconPillClass = "shrink-0 flex-none size-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)] min-w-[var(--studio-chrome-pill-height)]";
+var studioPlaygroundGradientClass = "bg-gradient-to-b from-neutral-200/60 via-neutral-100/30 to-background dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-950";
+var studioComposeInputShellClass = "flex w-full flex-col rounded-2xl border border-neutral-200/60 bg-background shadow-lg shadow-black/5 outline-none transition-[box-shadow,border-color] focus-within:border-neutral-400/80 focus-within:ring-2 focus-within:ring-foreground/5 focus-within:shadow-xl focus-within:shadow-black/10 dark:border-white/12 dark:bg-zinc-900 dark:shadow-black/20 dark:focus-within:border-white/22 dark:focus-within:ring-0";
+var studioPillSurfaceClass = TIMBAL_V2_PILL_SURFACE;
+var studioSecondaryChromeClass = TIMBAL_V2_SECONDARY_CHROME;
+var studioIntegrationSurfaceSolid = "bg-white bg-gradient-to-b from-white to-neutral-50/70 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:bg-zinc-900 dark:from-white/[0.05] dark:to-white/[0.025] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
+var studioIntegrationBorder = "border border-neutral-200/80 dark:border-white/[0.08]";
+var studioIntegrationCardClass = cn(
+  "rounded-xl",
+  studioIntegrationSurfaceSolid,
+  studioIntegrationBorder
+);
+var studioIntegrationIconTileClass = cn(
+  "flex size-9 shrink-0 items-center justify-center rounded-lg",
+  studioIntegrationSurfaceSolid,
+  studioIntegrationBorder
+);
+var studioListRowButtonClass = cn(
+  "flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-left",
+  studioIntegrationCardClass,
+  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "hover:border-neutral-300 dark:hover:border-white/15",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:focus-visible:ring-white/20"
+);
+var studioComposerIoWellClass = cn(
+  "rounded-lg",
+  studioIntegrationSurfaceSolid,
+  studioIntegrationBorder
+);
+var studioToolCardShellClass = cn(
+  studioIntegrationCardClass,
+  "my-2 min-h-0 overflow-hidden"
+);
+var studioTimelineRowButtonClass = "group flex w-full min-w-0 cursor-pointer items-center justify-start rounded-md border-0 bg-transparent py-1 text-left shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+var studioTimelineTextClass = "text-xs font-normal leading-snug";
+var studioTimelineActionClass = cn(
+  studioTimelineTextClass,
+  "shrink-0 text-foreground/70 transition-colors duration-150 group-hover:text-foreground/80"
+);
+var studioTimelineShimmerActionClass = cn(
+  studioTimelineTextClass,
+  "shrink-0"
+);
+var studioTimelineDetailClass = cn(
+  studioTimelineTextClass,
+  "min-w-0 truncate text-muted-foreground transition-colors duration-150"
+);
+function studioTimelineChevronClass(expanded) {
+  return cn(
+    "ml-0.5 size-3 min-h-3 min-w-3 shrink-0 transition-all duration-150",
+    expanded ? "rotate-90 text-foreground opacity-60" : "text-muted-foreground opacity-0 group-hover:opacity-70"
+  );
+}
+var studioTimelineBodyPadClass = "flex flex-col gap-2 pt-0.5 pb-0.5";
+var studioArtifactShellClass = cn(
+  studioIntegrationCardClass,
+  "my-2 w-full min-w-0 overflow-hidden"
+);
+var studioQuestionOptionClass = "flex w-full items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 text-left text-sm transition-[background-color,border-color,box-shadow] duration-200 hover:bg-neutral-100/80 dark:hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+var studioQuestionOptionSelectedClass = cn(
+  studioQuestionOptionClass,
+  "border-neutral-200/80 bg-neutral-50/90 ring-1 ring-foreground/10 dark:border-white/[0.12] dark:bg-white/[0.06] dark:ring-white/10"
+);
+
+// src/artifacts/question-artifact.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function optionKey(option, index) {
+  const id = option.id?.trim();
+  return id ? id : `__option-${index}`;
+}
+var OptionRadio = ({ selected }) => /* @__PURE__ */ jsx10(
+  "span",
+  {
+    className: cn(
+      "flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+      selected ? "border-foreground bg-foreground text-background" : "border-neutral-300 bg-background dark:border-white/20"
+    ),
+    "aria-hidden": true,
+    children: selected ? /* @__PURE__ */ jsx10(CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
+  }
+);
 var QuestionArtifactView = ({
   artifact
 }) => {
   const runtime = useThreadRuntime();
   const [selected, setSelected] = useState3([]);
-  const [submitted, setSubmitted] = useState3(null);
+  const [submittedIds, setSubmittedIds] = useState3(null);
   const isMulti = artifact.multi === true;
-  const send = (labels) => {
-    if (labels.length === 0) return;
-    const text = labels.join(", ");
-    setSubmitted(text);
-    runtime.append({ role: "user", content: [{ type: "text", text }] });
-  };
-  const onPick = (option) => {
-    if (submitted) return;
-    if (!isMulti) {
-      send([option.label]);
-      return;
-    }
-    setSelected(
-      (prev) => prev.includes(option.id) ? prev.filter((id) => id !== option.id) : [...prev, option.id]
-    );
-  };
-  const onConfirm = () => {
-    const labels = artifact.options.filter((o) => selected.includes(o.id)).map((o) => o.label);
-    send(labels);
-  };
-  return /* @__PURE__ */ jsx10(ArtifactCard, { kind: "question", children: /* @__PURE__ */ jsxs7("div", { className: "aui-artifact-question p-3", children: [
-    artifact.prompt && /* @__PURE__ */ jsx10("p", { className: "aui-artifact-question-prompt mb-2 text-sm text-foreground/85", children: artifact.prompt }),
-    /* @__PURE__ */ jsx10("div", { className: "aui-artifact-question-options flex flex-col gap-1.5", children: artifact.options.map((option) => {
-      const isSelected = isMulti && selected.includes(option.id);
-      const isDisabled = Boolean(submitted);
-      return /* @__PURE__ */ jsxs7(
+  const isDisabled = submittedIds !== null;
+  const send = useCallback2(
+    (keys) => {
+      if (keys.length === 0) return;
+      const labels = artifact.options.map((option, index) => ({ option, key: optionKey(option, index) })).filter(({ key }) => keys.includes(key)).map(({ option }) => option.label);
+      setSubmittedIds(keys);
+      runtime.append({
+        role: "user",
+        content: [{ type: "text", text: labels.join(", ") }]
+      });
+    },
+    [artifact.options, runtime]
+  );
+  const onPick = useCallback2(
+    (key) => {
+      if (isDisabled) return;
+      if (!isMulti) {
+        send([key]);
+        return;
+      }
+      setSelected(
+        (prev) => prev.includes(key) ? prev.filter((id) => id !== key) : [...prev, key]
+      );
+    },
+    [isDisabled, isMulti, send]
+  );
+  const onConfirm = useCallback2(() => {
+    send(selected);
+  }, [selected, send]);
+  return /* @__PURE__ */ jsx10("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ jsxs8("div", { className: "px-2.5 py-2", children: [
+    artifact.prompt ? /* @__PURE__ */ jsx10("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
+    /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
+      const key = optionKey(option, index);
+      const isSelected = submittedIds ? submittedIds.includes(key) : isMulti && selected.includes(key);
+      return /* @__PURE__ */ jsxs8(
         "button",
         {
           type: "button",
+          role: "listitem",
           disabled: isDisabled,
-          onClick: () => onPick(option),
+          onClick: () => onPick(key),
           className: cn(
-            "aui-artifact-question-option flex items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors",
-            "border-border/60 hover:border-primary/40 hover:bg-muted/40",
-            isSelected && "border-primary/60 bg-primary/5",
-            isDisabled && "cursor-not-allowed opacity-60 hover:border-border/60 hover:bg-transparent"
+            isSelected ? studioQuestionOptionSelectedClass : studioQuestionOptionClass,
+            isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
           ),
           children: [
-            /* @__PURE__ */ jsx10(
-              "span",
-              {
-                className: cn(
-                  "flex size-4 shrink-0 items-center justify-center rounded-full border",
-                  isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border"
-                ),
-                "aria-hidden": true,
-                children: isSelected && /* @__PURE__ */ jsx10(CheckIcon, { className: "size-3" })
-              }
-            ),
-            /* @__PURE__ */ jsxs7("div", { className: "aui-artifact-question-option-text flex-1", children: [
-              /* @__PURE__ */ jsx10("div", { className: "font-medium text-foreground/90", children: option.label }),
-              option.description && /* @__PURE__ */ jsx10("div", { className: "text-xs text-muted-foreground", children: option.description })
+            /* @__PURE__ */ jsx10(OptionRadio, { selected: isSelected }),
+            /* @__PURE__ */ jsxs8("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ jsx10("span", { className: "block font-normal text-foreground", children: option.label }),
+              option.description ? /* @__PURE__ */ jsx10("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
             ] })
           ]
         },
-        option.id
+        key
       );
     }) }),
-    isMulti && !submitted && /* @__PURE__ */ jsx10("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx10(
-      Button,
+    isMulti && !submittedIds ? /* @__PURE__ */ jsx10("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx10(
+      TimbalV2Button,
       {
         type: "button",
+        variant: "primary",
         size: "sm",
         disabled: selected.length === 0,
         onClick: onConfirm,
         children: "Confirm"
       }
-    ) }),
-    submitted && /* @__PURE__ */ jsxs7("p", { className: "aui-artifact-question-submitted mt-2 text-xs text-muted-foreground", children: [
-      "Sent: ",
-      submitted
-    ] })
+    ) }) : null
   ] }) });
 };
 
@@ -1782,11 +1957,11 @@ var JsonArtifactView = ({
 };
 
 // src/artifacts/table-artifact.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var TableArtifactView = ({ artifact }) => {
   const rows = artifact.rows ?? [];
   const columns = artifact.columns ?? deriveColumns(rows);
-  return /* @__PURE__ */ jsx13(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ jsx13("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ jsxs8("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
+  return /* @__PURE__ */ jsx13(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ jsx13("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
     /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ jsx13(
       "th",
       {
@@ -1914,32 +2089,87 @@ function useUiCustomNodeRegistry() {
 }
 
 // src/artifacts/ui/nodes.tsx
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { motion } from "motion/react";
 import { useThreadRuntime as useThreadRuntime2 } from "@assistant-ui/react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/ui/button.tsx
+import { cva } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx15(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/artifacts/ui/nodes.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var UiNodeView = ({ node }) => {
   switch (node.kind) {
     case "box":
-      return /* @__PURE__ */ jsx15(BoxNode, { node });
+      return /* @__PURE__ */ jsx16(BoxNode, { node });
     case "text":
-      return /* @__PURE__ */ jsx15(TextNode, { node });
+      return /* @__PURE__ */ jsx16(TextNode, { node });
     case "heading":
-      return /* @__PURE__ */ jsx15(HeadingNode, { node });
+      return /* @__PURE__ */ jsx16(HeadingNode, { node });
     case "badge":
-      return /* @__PURE__ */ jsx15(BadgeNode, { node });
+      return /* @__PURE__ */ jsx16(BadgeNode, { node });
     case "button":
-      return /* @__PURE__ */ jsx15(ButtonNode, { node });
+      return /* @__PURE__ */ jsx16(ButtonNode, { node });
     case "toggle":
-      return /* @__PURE__ */ jsx15(ToggleNode, { node });
+      return /* @__PURE__ */ jsx16(ToggleNode, { node });
     case "slider":
-      return /* @__PURE__ */ jsx15(SliderNode, { node });
+      return /* @__PURE__ */ jsx16(SliderNode, { node });
     case "tooltip":
-      return /* @__PURE__ */ jsx15(TooltipNode, { node });
+      return /* @__PURE__ */ jsx16(TooltipNode, { node });
     case "draggable":
-      return /* @__PURE__ */ jsx15(DraggableNode, { node });
+      return /* @__PURE__ */ jsx16(DraggableNode, { node });
     case "custom":
-      return /* @__PURE__ */ jsx15(CustomNode, { node });
+      return /* @__PURE__ */ jsx16(CustomNode, { node });
     default:
       return null;
   }
@@ -1949,7 +2179,7 @@ function useActionRunner() {
   const dispatch = useUiDispatch();
   const runtime = useThreadRuntime2();
   const emit = useUiEventEmitter();
-  return useCallback2(
+  return useCallback3(
     (actions) => {
       if (!actions) return;
       const list = Array.isArray(actions) ? actions : [actions];
@@ -1999,7 +2229,7 @@ var JUSTIFY_CLS = {
 };
 var BoxNode = ({ node }) => {
   const dir = node.direction ?? "col";
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn(
@@ -2014,7 +2244,7 @@ var BoxNode = ({ node }) => {
         gap: node.gap !== void 0 ? `${node.gap * 0.25}rem` : void 0,
         padding: node.padding !== void 0 ? `${node.padding * 0.25}rem` : void 0
       },
-      children: node.children?.map((child, i) => /* @__PURE__ */ jsx15(UiNodeView, { node: child }, child.id ?? i))
+      children: node.children?.map((child, i) => /* @__PURE__ */ jsx16(UiNodeView, { node: child }, child.id ?? i))
     }
   );
 };
@@ -2033,7 +2263,7 @@ var TEXT_WEIGHT = {
 var TextNode = ({ node }) => {
   const state = useUiState();
   const value = resolveBindable(node.value, state);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: cn(
@@ -2064,13 +2294,13 @@ var HeadingNode = ({ node }) => {
   );
   switch (level) {
     case 1:
-      return /* @__PURE__ */ jsx15("h1", { className: cls, children: value });
+      return /* @__PURE__ */ jsx16("h1", { className: cls, children: value });
     case 2:
-      return /* @__PURE__ */ jsx15("h2", { className: cls, children: value });
+      return /* @__PURE__ */ jsx16("h2", { className: cls, children: value });
     case 3:
-      return /* @__PURE__ */ jsx15("h3", { className: cls, children: value });
+      return /* @__PURE__ */ jsx16("h3", { className: cls, children: value });
     case 4:
-      return /* @__PURE__ */ jsx15("h4", { className: cls, children: value });
+      return /* @__PURE__ */ jsx16("h4", { className: cls, children: value });
   }
 };
 var BADGE_TONE = {
@@ -2083,7 +2313,7 @@ var BADGE_TONE = {
 var BadgeNode = ({ node }) => {
   const state = useUiState();
   const value = String(resolveBindable(node.value, state) ?? "");
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: cn(
@@ -2100,7 +2330,7 @@ var ButtonNode = ({ node }) => {
   const run = useActionRunner();
   const label = String(resolveBindable(node.label, state) ?? "");
   const disabled = node.disabled !== void 0 ? Boolean(resolveBindable(node.disabled, state)) : false;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Button,
     {
       variant: node.variant ?? "default",
@@ -2122,7 +2352,7 @@ var ToggleNode = ({ node }) => {
     dispatch({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "label",
     {
       className: cn(
@@ -2130,7 +2360,7 @@ var ToggleNode = ({ node }) => {
         node.className
       ),
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -2141,7 +2371,7 @@ var ToggleNode = ({ node }) => {
               "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors",
               value ? "border-primary bg-primary" : "border-border bg-muted hover:bg-muted/80"
             ),
-            children: /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx16(
               "span",
               {
                 className: cn(
@@ -2153,7 +2383,7 @@ var ToggleNode = ({ node }) => {
             )
           }
         ),
-        label && /* @__PURE__ */ jsx15("span", { className: "text-foreground/85", children: label })
+        label && /* @__PURE__ */ jsx16("span", { className: "text-foreground/85", children: label })
       ]
     }
   );
@@ -2173,12 +2403,12 @@ var SliderNode = ({ node }) => {
     const next = Number(e.target.value);
     dispatch({ type: "set", path: node.binding, value: next });
   };
-  return /* @__PURE__ */ jsxs9("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ jsx15("span", { children: label }),
-      showValue && /* @__PURE__ */ jsx15("span", { className: "font-mono", children: value })
+  return /* @__PURE__ */ jsxs10("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ jsx16("span", { children: label }),
+      showValue && /* @__PURE__ */ jsx16("span", { className: "font-mono", children: value })
     ] }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "input",
       {
         type: "range",
@@ -2200,9 +2430,9 @@ var SliderNode = ({ node }) => {
 var TooltipNode = ({ node }) => {
   const state = useUiState();
   const content = String(resolveBindable(node.content, state) ?? "");
-  return /* @__PURE__ */ jsx15(TooltipProvider, { children: /* @__PURE__ */ jsxs9(Tooltip, { children: [
-    /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ jsx15(UiNodeView, { node: node.child }) }) }),
-    /* @__PURE__ */ jsx15(TooltipContent, { side: node.side ?? "top", children: content })
+  return /* @__PURE__ */ jsx16(TooltipProvider, { children: /* @__PURE__ */ jsxs10(Tooltip, { children: [
+    /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ jsx16(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ jsx16(TooltipContent, { side: node.side ?? "top", children: content })
   ] }) });
 };
 var DraggableNode = ({ node }) => {
@@ -2210,7 +2440,7 @@ var DraggableNode = ({ node }) => {
   const snapBack = node.snapBack ?? true;
   const axis = node.axis ?? "both";
   const dragProp = axis === "both" ? true : axis;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     motion.div,
     {
       drag: dragProp,
@@ -2222,7 +2452,7 @@ var DraggableNode = ({ node }) => {
         "aui-ui-draggable inline-block cursor-grab touch-none",
         node.className
       ),
-      children: /* @__PURE__ */ jsx15(UiNodeView, { node: node.child })
+      children: /* @__PURE__ */ jsx16(UiNodeView, { node: node.child })
     }
   );
 };
@@ -2232,8 +2462,8 @@ var CustomNode = ({ node }) => {
   const Renderer = registry[node.name];
   if (!Renderer) return null;
   const resolvedProps = resolveProps(node.props ?? {}, state);
-  const children = node.children?.map((child, i) => /* @__PURE__ */ jsx15(UiNodeView, { node: child }, child.id ?? i));
-  return /* @__PURE__ */ jsx15(Renderer, { props: resolvedProps, children });
+  const children = node.children?.map((child, i) => /* @__PURE__ */ jsx16(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ jsx16(Renderer, { props: resolvedProps, children });
 };
 function resolveProps(props, state) {
   const out = {};
@@ -2244,17 +2474,17 @@ function resolveProps(props, state) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var UiArtifactView = ({ artifact }) => {
   const [state, dispatch] = useReducer(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ jsx16(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ jsx16(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ jsx16("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ jsx16(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ jsx17(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ jsx17(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ jsx17("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ jsx17(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var defaultArtifactRenderers = {
   chart: ChartArtifactView,
   question: QuestionArtifactView,
@@ -2272,7 +2502,7 @@ var ArtifactRegistryProvider = ({ renderers, override, children }) => {
     if (override) return renderers;
     return { ...defaultArtifactRenderers, ...renderers };
   }, [renderers, override]);
-  return /* @__PURE__ */ jsx17(ArtifactRegistryContext.Provider, { value: merged, children });
+  return /* @__PURE__ */ jsx18(ArtifactRegistryContext.Provider, { value: merged, children });
 };
 function useArtifactRegistry() {
   return useContext3(ArtifactRegistryContext);
@@ -2281,7 +2511,7 @@ var ArtifactView = ({ artifact }) => {
   const registry = useArtifactRegistry();
   const Renderer = registry[artifact.type] ?? registry.json;
   if (!Renderer) return null;
-  return /* @__PURE__ */ jsx17(Renderer, { artifact });
+  return /* @__PURE__ */ jsx18(Renderer, { artifact });
 };
 
 // src/artifacts/parse.ts
@@ -2397,7 +2627,7 @@ import langC from "shiki/langs/c.mjs";
 import langCpp from "shiki/langs/cpp.mjs";
 import themeVitesseDark from "shiki/themes/vitesse-dark.mjs";
 import themeVitesseLight from "shiki/themes/vitesse-light.mjs";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SHIKI_THEME_DARK = "vitesse-dark";
 var SHIKI_THEME_LIGHT = "vitesse-light";
 var highlighterPromise = null;
@@ -2466,13 +2696,13 @@ var ShikiSyntaxHighlighter = ({
     try {
       const parsed = JSON.parse(code);
       if (isArtifact(parsed)) {
-        return /* @__PURE__ */ jsx18(ArtifactView, { artifact: parsed });
+        return /* @__PURE__ */ jsx19(ArtifactView, { artifact: parsed });
       }
     } catch {
     }
   }
   if (html) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         className: "shiki-wrapper [&>pre]:!m-0 [&>pre]:!rounded-t-none [&>pre]:!rounded-b-lg [&>pre]:!border [&>pre]:!border-t-0 [&>pre]:!border-border/50 [&>pre]:!p-3 [&>pre]:!text-xs [&>pre]:!leading-relaxed [&>pre]:overflow-x-auto",
@@ -2480,14 +2710,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx18(Pre, { children: /* @__PURE__ */ jsx18(Code2, { children: code }) });
+  return /* @__PURE__ */ jsx19(Pre, { children: /* @__PURE__ */ jsx19(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/components/markdown-text.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     MarkdownTextPrimitive,
     {
       remarkPlugins: [remarkGfm, remarkMath],
@@ -2508,20 +2738,20 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-zinc-100 px-4 py-2 dark:bg-zinc-800/80", children: [
-    /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ jsx19("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ jsxs11("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-zinc-100 px-4 py-2 dark:bg-zinc-800/80", children: [
+    /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ jsx20("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs11(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ jsx19(CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ jsx19(CheckIcon2, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ jsx20(CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ jsx20(CheckIcon2, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -2541,7 +2771,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = memoizeMarkdownComponents({
-  h1: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "h1",
     {
       className: cn(
@@ -2551,7 +2781,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "h2",
     {
       className: cn(
@@ -2561,7 +2791,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "h3",
     {
       className: cn(
@@ -2571,7 +2801,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "h4",
     {
       className: cn(
@@ -2581,7 +2811,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "h5",
     {
       className: cn(
@@ -2591,7 +2821,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "h6",
     {
       className: cn(
@@ -2601,7 +2831,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "p",
     {
       className: cn(
@@ -2611,7 +2841,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "a",
     {
       className: cn(
@@ -2623,7 +2853,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "blockquote",
     {
       className: cn(
@@ -2633,7 +2863,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "ul",
     {
       className: cn(
@@ -2643,7 +2873,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "ol",
     {
       className: cn(
@@ -2653,7 +2883,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "hr",
     {
       className: cn(
@@ -2663,14 +2893,14 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ jsx19("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ jsx19(
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx20("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ jsx20(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "th",
     {
       className: cn(
@@ -2680,7 +2910,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "td",
     {
       className: cn(
@@ -2690,7 +2920,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "tr",
     {
       className: cn(
@@ -2700,8 +2930,8 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ jsx19("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  li: ({ className, ...props }) => /* @__PURE__ */ jsx20("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "sup",
     {
       className: cn(
@@ -2711,7 +2941,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ jsx19(
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx20(
     "pre",
     {
       className: cn(
@@ -2723,7 +2953,7 @@ var defaultComponents = memoizeMarkdownComponents({
   ),
   code: function Code({ className, ...props }) {
     const isCodeBlock = useIsMarkdownCodeBlock();
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       "code",
       {
         className: cn(
@@ -2734,14 +2964,17 @@ var defaultComponents = memoizeMarkdownComponents({
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ jsx19("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ jsx19("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ jsx20("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ jsx20("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
 // src/components/tool-fallback.tsx
-import { memo as memo3, useState as useState6 } from "react";
-import { ChevronDownIcon, WrenchIcon } from "lucide-react";
+import { memo as memo3, useMemo as useMemo5, useState as useState6 } from "react";
+import { ChevronRightIcon } from "lucide-react";
+import {
+  useAuiState as useAuiState2
+} from "@assistant-ui/react";
 
 // src/ui/shimmer.tsx
 import { motion as motion2 } from "motion/react";
@@ -2749,7 +2982,7 @@ import {
   memo as memo2,
   useMemo as useMemo4
 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ShimmerComponent = ({
   children,
   as: Component = "p",
@@ -2764,7 +2997,7 @@ var ShimmerComponent = ({
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     MotionComponent,
     {
       animate: { backgroundPosition: "0% center" },
@@ -2789,78 +3022,130 @@ var ShimmerComponent = ({
 };
 var Shimmer = memo2(ShimmerComponent);
 
-// src/components/tool-fallback.tsx
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var ToolFallbackImpl = ({
-  toolName,
-  argsText,
-  result,
-  status
-}) => {
-  const isRunning = status?.type === "running";
-  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
-  if (isRunning) {
-    return /* @__PURE__ */ jsxs11("div", { className: "aui-tool-fallback-running flex items-center gap-2 py-1 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx21(WrenchIcon, { className: "size-4" }),
-      /* @__PURE__ */ jsx21(Shimmer, { as: "span", duration: 1.8, spread: 2.5, children: `Using tool: ${toolName}` })
-    ] });
+// src/components/motion.tsx
+import { AnimatePresence, motion as motion3, useReducedMotion } from "motion/react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var luxuryEase = [0.16, 1, 0.3, 1];
+var TOOL_ENTER_MS = 0.78;
+var TOOL_EXIT_MS = 0.28;
+function toolPresenceTransition(reduced) {
+  return {
+    enter: {
+      duration: reduced ? 0.35 : TOOL_ENTER_MS,
+      ease: luxuryEase
+    },
+    exit: {
+      duration: reduced ? 0.2 : TOOL_EXIT_MS,
+      ease: [0.4, 0, 1, 1]
+    }
+  };
+}
+function toolMotionState(reduced, entering, variant) {
+  if (reduced) {
+    return entering ? { opacity: 0, y: variant === "executing" ? 8 : 10 } : { opacity: 1, y: 0 };
   }
-  return /* @__PURE__ */ jsx21(
-    ToolPanel,
+  if (variant === "executing") {
+    return entering ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 };
+  }
+  return entering ? { opacity: 0, y: 14, filter: "blur(10px)" } : { opacity: 1, y: 0, filter: "blur(0px)" };
+}
+function ToolMotion({ children, className, motionKey }) {
+  const reduced = useReducedMotion() ?? false;
+  const { enter, exit } = toolPresenceTransition(reduced);
+  return /* @__PURE__ */ jsx22(
+    motion3.div,
     {
-      toolName,
-      argsText,
-      result,
-      isError
-    }
+      className: cn("aui-tool-motion w-full min-w-0", className),
+      initial: toolMotionState(reduced, true, "settled"),
+      animate: toolMotionState(reduced, false, "settled"),
+      exit: reduced ? { opacity: 0, y: 6, transition: exit } : { opacity: 0, y: 8, filter: "blur(6px)", transition: exit },
+      transition: enter,
+      style: { willChange: "opacity, transform, filter" },
+      children
+    },
+    motionKey
   );
-};
-var ToolPanel = ({ toolName, argsText, result, isError }) => {
-  const [open, setOpen] = useState6(false);
-  return /* @__PURE__ */ jsxs11(
+}
+function ToolPresence({
+  presenceKey,
+  children,
+  className,
+  variant = "settled"
+}) {
+  const reduced = useReducedMotion() ?? false;
+  const { enter, exit } = toolPresenceTransition(reduced);
+  const enterTransition = variant === "executing" ? { duration: reduced ? 0.3 : 0.52, ease: luxuryEase } : enter;
+  return /* @__PURE__ */ jsx22(AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ jsx22(
+    motion3.div,
+    {
+      className: cn("aui-tool-presence w-full min-w-0", className),
+      initial: toolMotionState(reduced, true, variant),
+      animate: toolMotionState(reduced, false, variant),
+      exit: reduced ? { opacity: 0, y: 6, transition: exit } : { opacity: 0, y: 8, filter: "blur(6px)", transition: exit },
+      transition: enterTransition,
+      style: {
+        willChange: variant === "executing" ? "opacity, transform" : "opacity, transform, filter"
+      },
+      children
+    },
+    presenceKey
+  ) });
+}
+function ToolBodyPresence({
+  open,
+  children,
+  className
+}) {
+  const reduced = useReducedMotion() ?? false;
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: cn(
-        "aui-tool-fallback-root my-2 overflow-hidden rounded-lg border border-border/60 bg-muted/30 text-sm",
-        isError && "border-destructive/50 bg-destructive/5"
+        "aui-tool-body grid min-h-0 transition-[grid-template-rows]",
+        open ? reduced ? "duration-200 ease-out" : "duration-[340ms] ease-[cubic-bezier(0.16,1,0.3,1)]" : reduced ? "duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]" : "duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
       ),
-      children: [
-        /* @__PURE__ */ jsxs11(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen((v) => !v),
-            className: "aui-tool-fallback-header flex w-full items-center gap-2 px-3 py-2 text-left text-muted-foreground transition-colors hover:bg-muted/50",
-            "aria-expanded": open,
-            children: [
-              /* @__PURE__ */ jsx21(WrenchIcon, { className: "size-3.5" }),
-              /* @__PURE__ */ jsx21("span", { className: "aui-tool-fallback-name flex-1 truncate font-mono text-xs font-medium text-foreground/80", children: toolName }),
-              isError && /* @__PURE__ */ jsx21("span", { className: "aui-tool-fallback-status text-xs font-medium text-destructive", children: "error" }),
-              /* @__PURE__ */ jsx21(
-                ChevronDownIcon,
-                {
-                  className: cn(
-                    "size-3.5 shrink-0 transition-transform",
-                    open && "rotate-180"
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        open && /* @__PURE__ */ jsxs11("div", { className: "aui-tool-fallback-body grid gap-2 border-t border-border/40 bg-background/50 px-3 py-2.5 text-xs", children: [
-          argsText && argsText !== "{}" && /* @__PURE__ */ jsx21(Section, { label: "Input", value: argsText }),
-          result !== void 0 && result !== null && /* @__PURE__ */ jsx21(Section, { label: "Output", value: formatResult(result) })
-        ] })
-      ]
+      style: { gridTemplateRows: open ? "1fr" : "0fr" },
+      children: /* @__PURE__ */ jsx22("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx22(
+        "div",
+        {
+          className: cn(
+            className,
+            "transition-opacity",
+            open ? reduced ? "opacity-100 duration-200 ease-out" : "opacity-100 duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] delay-75" : reduced ? "opacity-0 duration-100 ease-in" : "opacity-0 duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]"
+          ),
+          children
+        }
+      ) })
     }
   );
-};
-var Section = ({ label, value }) => /* @__PURE__ */ jsxs11("div", { className: "aui-tool-fallback-section", children: [
-  /* @__PURE__ */ jsx21("div", { className: "aui-tool-fallback-section-label mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
-  /* @__PURE__ */ jsx21("pre", { className: "aui-tool-fallback-section-value overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground/85", children: value })
-] });
-function formatResult(result) {
+}
+
+// src/components/tool-fallback.tsx
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+function detectRunning({
+  status,
+  result,
+  streamRunning
+}) {
+  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
+  if (isError) return false;
+  if (status?.type === "running") return true;
+  if (status?.type === "complete") return false;
+  return streamRunning && result === void 0;
+}
+function useToolRunning(props) {
+  const { isRunning: streamRunning } = useTimbalRuntime();
+  const partStatus = useAuiState2((s) => s.part.status);
+  return detectRunning({
+    status: partStatus ?? props.status,
+    result: props.result,
+    streamRunning
+  });
+}
+function formatToolLabel(toolName) {
+  return toolName.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+}
+function formatToolResult(result) {
   if (typeof result === "string") return result;
   try {
     return JSON.stringify(result, null, 2);
@@ -2868,26 +3153,166 @@ function formatResult(result) {
     return String(result);
   }
 }
+var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ jsxs12("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+  action ? shimmer ? /* @__PURE__ */ jsx23(
+    Shimmer,
+    {
+      as: "span",
+      className: cn(studioTimelineShimmerActionClass, "aui-tool-shimmer"),
+      duration: 1.8,
+      spread: 2.5,
+      children: action
+    }
+  ) : /* @__PURE__ */ jsx23("span", { className: studioTimelineActionClass, children: action }) : null,
+  detail ? /* @__PURE__ */ jsx23("span", { className: studioTimelineDetailClass, children: detail }) : null
+] });
+var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ jsx23(
+  ChevronRightIcon,
+  {
+    className: studioTimelineChevronClass(expanded),
+    "aria-hidden": true
+  }
+);
+var ToolPanel = ({ toolName, argsText, result, isError }) => {
+  const [open, setOpen] = useState6(false);
+  const detail = formatToolLabel(toolName);
+  const formattedArgs = useMemo5(() => {
+    if (!argsText || argsText === "{}") return null;
+    try {
+      return JSON.stringify(JSON.parse(argsText), null, 2);
+    } catch {
+      return argsText;
+    }
+  }, [argsText]);
+  const formattedResult = useMemo5(() => {
+    if (result === void 0 || result === null) return null;
+    return formatToolResult(result);
+  }, [result]);
+  const hasBody = Boolean(formattedArgs || formattedResult);
+  const action = isError ? "Failed" : "Used";
+  if (!hasBody) {
+    return /* @__PURE__ */ jsx23("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ jsx23(TimelineActionLabel, { action, detail }) });
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: "aui-tool-row w-full min-w-0", children: [
+    /* @__PURE__ */ jsx23(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        "aria-label": `${action} ${detail}`,
+        className: studioTimelineRowButtonClass,
+        children: /* @__PURE__ */ jsxs12(
+          "span",
+          {
+            className: cn(
+              "inline-flex min-w-0 max-w-full items-center gap-0.5",
+              studioTimelineTextClass,
+              "text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx23(TimelineActionLabel, { action, detail }),
+              /* @__PURE__ */ jsx23(TimelineHoverChevron, { expanded: open })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs12(
+      ToolBodyPresence,
+      {
+        open,
+        className: cn(studioTimelineBodyPadClass, "gap-2"),
+        children: [
+          formattedArgs ? /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: cn(
+                studioComposerIoWellClass,
+                "max-h-48 overflow-auto px-2.5 py-2"
+              ),
+              children: /* @__PURE__ */ jsx23("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
+            }
+          ) : null,
+          formattedResult ? /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: cn(
+                studioComposerIoWellClass,
+                "max-h-48 overflow-auto px-2.5 py-2"
+              ),
+              children: /* @__PURE__ */ jsx23("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+var ToolFallbackImpl = ({
+  toolName,
+  argsText,
+  result,
+  status
+}) => {
+  const isRunning = useToolRunning({ status, result });
+  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
+  const presenceKey = isRunning ? "running" : isError ? "error" : "complete";
+  return /* @__PURE__ */ jsx23(
+    ToolPresence,
+    {
+      presenceKey,
+      variant: isRunning ? "executing" : "settled",
+      className: "py-0.5",
+      children: isRunning ? /* @__PURE__ */ jsx23("div", { className: "aui-tool-running", children: /* @__PURE__ */ jsx23(
+        TimelineActionLabel,
+        {
+          action: "Using",
+          detail: formatToolLabel(toolName),
+          shimmer: true
+        }
+      ) }) : /* @__PURE__ */ jsx23(
+        ToolPanel,
+        {
+          toolName,
+          argsText,
+          result,
+          isError
+        }
+      )
+    }
+  );
+};
 var ToolFallback = memo3(
   ToolFallbackImpl
 );
 ToolFallback.displayName = "ToolFallback";
 
 // src/artifacts/tool-artifact.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ToolArtifactFallback = (props) => {
   const registry = useArtifactRegistry();
-  const isRunning = props.status?.type === "running";
+  const isRunning = useToolRunning({
+    status: props.status,
+    result: props.result
+  });
   if (!isRunning) {
     const artifact = parseArtifactFromToolResult(props.result);
     if (artifact) {
       const Renderer = registry[artifact.type];
       if (Renderer) {
-        return /* @__PURE__ */ jsx22(Renderer, { artifact });
+        return /* @__PURE__ */ jsx24(
+          ToolMotion,
+          {
+            motionKey: `artifact-${artifact.type}`,
+            className: "aui-tool-artifact",
+            children: /* @__PURE__ */ jsx24(Renderer, { artifact })
+          }
+        );
       }
     }
   }
-  return /* @__PURE__ */ jsx22(ToolFallback, { ...props });
+  return /* @__PURE__ */ jsx24(ToolFallback, { ...props });
 };
 
 // src/components/composer.tsx
@@ -2897,7 +3322,7 @@ import {
   useComposerRuntime
 } from "@assistant-ui/react";
 import { ArrowUpIcon, SquareIcon } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var Composer = ({
   placeholder = "Send a message...",
   showAttachments = true,
@@ -2906,21 +3331,24 @@ var Composer = ({
   noAutoFocus,
   className
 }) => {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     ComposerPrimitive2.Root,
     {
       className: cn(
-        "aui-composer-root relative mt-3 flex w-full flex-col",
+        "aui-composer-root relative flex w-full flex-col",
         className
       ),
-      children: /* @__PURE__ */ jsxs12(
+      children: /* @__PURE__ */ jsxs13(
         ComposerPrimitive2.AttachmentDropzone,
         {
-          className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50",
+          className: cn(
+            studioComposeInputShellClass,
+            "data-[dragging=true]:border-2 data-[dragging=true]:border-dashed data-[dragging=true]:border-primary data-[dragging=true]:bg-accent/50"
+          ),
           children: [
-            showAttachments && /* @__PURE__ */ jsx23(ComposerAttachments, {}),
-            /* @__PURE__ */ jsx23(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
-            /* @__PURE__ */ jsx23(
+            showAttachments && /* @__PURE__ */ jsx25(ComposerAttachments, {}),
+            /* @__PURE__ */ jsx25(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+            /* @__PURE__ */ jsx25(
               ComposerToolbar,
               {
                 showAttachments,
@@ -2950,11 +3378,11 @@ var ComposerInput = ({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
   };
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     ComposerPrimitive2.Input,
     {
       placeholder,
-      className: "aui-composer-input mb-1 max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-neutral-400 focus-visible:ring-0 dark:placeholder:text-neutral-500",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -2964,37 +3392,35 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ jsxs12("div", { className: "aui-composer-action-wrapper relative mx-2 mb-2 flex items-center gap-1", children: [
-    showAttachments && /* @__PURE__ */ jsx23(ComposerAddAttachment, {}),
-    toolbar,
-    /* @__PURE__ */ jsx23("div", { className: "flex-1" }),
-    /* @__PURE__ */ jsx23(ComposerSendOrCancel, { sendTooltip })
+  return /* @__PURE__ */ jsxs13("div", { className: "aui-composer-action-wrapper flex items-center justify-between gap-1 px-2.5 pb-2.5", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+      showAttachments && /* @__PURE__ */ jsx25(ComposerAddAttachment, {}),
+      toolbar
+    ] }),
+    /* @__PURE__ */ jsx25(ComposerSendOrCancel, { sendTooltip })
   ] });
 };
 var ComposerSendOrCancel = ({ sendTooltip }) => {
-  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-    /* @__PURE__ */ jsx23(AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ jsx23(ComposerPrimitive2.Send, { asChild: true, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    /* @__PURE__ */ jsx25(AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ jsx25(ComposerPrimitive2.Send, { asChild: true, children: /* @__PURE__ */ jsx25(
       TooltipIconButton,
       {
         tooltip: sendTooltip,
-        side: "bottom",
+        variant: "primary",
         type: "submit",
-        variant: "default",
-        size: "icon",
-        className: "aui-composer-send size-8 rounded-full",
+        className: "aui-composer-send shrink-0 disabled:opacity-30",
         "aria-label": "Send message",
-        children: /* @__PURE__ */ jsx23(ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+        children: /* @__PURE__ */ jsx25(ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx23(AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ jsx23(ComposerPrimitive2.Cancel, { asChild: true, children: /* @__PURE__ */ jsx23(
-      Button,
+    /* @__PURE__ */ jsx25(AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ jsx25(ComposerPrimitive2.Cancel, { asChild: true, children: /* @__PURE__ */ jsx25(
+      TooltipIconButton,
       {
-        type: "button",
-        variant: "default",
-        size: "icon",
-        className: "aui-composer-cancel size-8 rounded-full",
+        tooltip: "Stop generating",
+        variant: "primary",
+        className: "aui-composer-cancel shrink-0",
         "aria-label": "Stop generating",
-        children: /* @__PURE__ */ jsx23(SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+        children: /* @__PURE__ */ jsx25(SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
       }
     ) }) })
   ] });
@@ -3003,55 +3429,53 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
 // src/components/suggestions.tsx
 import {
   useEffect as useEffect4,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useState as useState7
 } from "react";
 import { useThreadRuntime as useThreadRuntime3 } from "@assistant-ui/react";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { ArrowUpIcon as ArrowUpIcon2 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var Suggestions = ({
   suggestions,
-  layout = "grid",
   className
 }) => {
   const items = useResolvedSuggestions(suggestions);
   if (!items || items.length === 0) return null;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
-        "aui-thread-suggestions w-full pb-4",
-        layout === "grid" ? "grid gap-2 @md:grid-cols-2" : "flex gap-2 overflow-x-auto pb-1 [&::-webkit-scrollbar]:hidden",
+        "aui-thread-suggestions flex w-full flex-col gap-2 pb-2.5",
         className
       ),
-      children: items.map((s, i) => /* @__PURE__ */ jsx24(SuggestionChip, { suggestion: s, compact: layout === "row" }, s.title + i))
+      role: "list",
+      "aria-label": "Suggested prompts",
+      children: items.map((suggestion, i) => /* @__PURE__ */ jsx26(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
     }
   );
 };
-var SuggestionChip = ({
-  suggestion,
-  compact
-}) => {
+var SuggestionRow = ({ suggestion }) => {
   const runtime = useThreadRuntime3();
   const onClick = () => {
     const text = suggestion.prompt ?? suggestion.title;
     runtime.append({ role: "user", content: [{ type: "text", text }] });
   };
-  return /* @__PURE__ */ jsx24("div", { className: "aui-thread-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200", children: /* @__PURE__ */ jsxs13(
-    Button,
+  return /* @__PURE__ */ jsxs14(
+    "button",
     {
-      variant: "ghost",
+      type: "button",
+      role: "listitem",
       onClick,
-      className: cn(
-        "aui-thread-suggestion h-auto rounded-2xl border text-left text-sm transition-colors hover:bg-muted",
-        compact ? "shrink-0 flex-row items-center gap-2 whitespace-nowrap px-3 py-2" : "w-full flex-wrap items-start justify-start gap-1 px-4 py-3 @md:flex-col"
-      ),
+      className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        suggestion.icon && /* @__PURE__ */ jsx24("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon }),
-        /* @__PURE__ */ jsx24("span", { className: "aui-thread-suggestion-text-1 font-medium", children: suggestion.title }),
-        suggestion.description && !compact && /* @__PURE__ */ jsx24("span", { className: "aui-thread-suggestion-text-2 text-muted-foreground", children: suggestion.description })
+        /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-icon shrink-0 text-neutral-500 dark:text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ jsx26(ArrowUpIcon2, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs14("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground dark:text-foreground/95", children: suggestion.title }),
+          suggestion.description && /* @__PURE__ */ jsx26("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
+        ] })
       ]
     }
-  ) });
+  );
 };
 function useResolvedSuggestions(source) {
   const [resolved, setResolved] = useState7(
@@ -3076,29 +3500,11 @@ function useResolvedSuggestions(source) {
       cancelled = true;
     };
   }, [source]);
-  return useMemo5(() => resolved, [resolved]);
+  return useMemo6(() => resolved, [resolved]);
 }
 
 // src/components/thread.tsx
-import {
-  ActionBarMorePrimitive,
-  ActionBarPrimitive,
-  AuiIf as AuiIf2,
-  ComposerPrimitive as ComposerPrimitive3,
-  ErrorPrimitive,
-  MessagePrimitive as MessagePrimitive2,
-  ThreadPrimitive
-} from "@assistant-ui/react";
-import {
-  ArrowDownIcon,
-  CheckIcon as CheckIcon3,
-  CopyIcon as CopyIcon2,
-  DownloadIcon,
-  MoreHorizontalIcon,
-  PencilIcon,
-  RefreshCwIcon
-} from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var Thread = ({
   className,
   maxWidth = "44rem",
@@ -3116,13 +3522,13 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
-      children: /* @__PURE__ */ jsx25(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
-      }), children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx27(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ jsx27(
         ThreadPrimitive.Root,
         {
           className: cn(
@@ -3130,13 +3536,13 @@ var Thread = ({
             className
           ),
           style: { ["--thread-max-width"]: maxWidth },
-          children: /* @__PURE__ */ jsxs14(
+          children: /* @__PURE__ */ jsxs15(
             ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
               className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
               children: [
-                /* @__PURE__ */ jsx25(
+                /* @__PURE__ */ jsx27(
                   WelcomeSlot,
                   {
                     config: welcome,
@@ -3144,7 +3550,7 @@ var Thread = ({
                     Suggestions: SuggestionsSlot
                   }
                 ),
-                /* @__PURE__ */ jsx25(
+                /* @__PURE__ */ jsx27(
                   ThreadPrimitive.Messages,
                   {
                     components: {
@@ -3154,9 +3560,9 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs14(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
-                  /* @__PURE__ */ jsx25(ScrollToBottomSlot, {}),
-                  /* @__PURE__ */ jsx25(ComposerSlot, { placeholder: composerPlaceholder })
+                /* @__PURE__ */ jsxs15(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
+                  /* @__PURE__ */ jsx27(ScrollToBottomSlot, {}),
+                  /* @__PURE__ */ jsx27(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
               ]
             }
@@ -3167,105 +3573,165 @@ var Thread = ({
   );
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ jsx25(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx27(
     TooltipIconButton,
     {
       tooltip: "Scroll to bottom",
-      variant: "outline",
-      className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent",
-      children: /* @__PURE__ */ jsx25(ArrowDownIcon, {})
+      variant: "secondary",
+      className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center disabled:invisible",
+      children: /* @__PURE__ */ jsx27(ArrowDownIcon, { className: "size-4" })
     }
   ) });
 };
+var welcomeStagger = {
+  initial: {},
+  animate: {
+    transition: { staggerChildren: 0.16, delayChildren: 0.12 }
+  }
+};
+var welcomeItem = {
+  initial: { opacity: 0, y: 14 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.9, ease: luxuryEase }
+  }
+};
+var welcomeIcon = {
+  initial: { opacity: 0, y: 10, scale: 0.96 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 1.1, ease: luxuryEase }
+  }
+};
 var ThreadWelcome = ({
   config,
   suggestions,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  return /* @__PURE__ */ jsx25(AuiIf2, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ jsxs14("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
-    /* @__PURE__ */ jsx25("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs14("div", { className: "aui-thread-welcome-message flex size-full flex-col items-center justify-center px-4 text-center", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "fade-in animate-in fill-mode-both relative mb-6 flex size-14 items-center justify-center duration-300", children: [
-        /* @__PURE__ */ jsx25("div", { className: "animate-ai-ring-glow absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/15 to-primary/5 ring-1 ring-primary/15" }),
-        /* @__PURE__ */ jsx25("div", { className: "animate-ai-pulse-ring absolute inset-0" }),
-        /* @__PURE__ */ jsx25(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "animate-ai-breathe relative size-7 text-primary/75",
-            children: /* @__PURE__ */ jsx25("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx25("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: config?.heading ?? "How can I help you today?" }),
-      /* @__PURE__ */ jsx25("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: config?.subheading ?? "Send a message to start a conversation." })
-    ] }) }),
-    suggestions && /* @__PURE__ */ jsx25(SuggestionsSlot, { suggestions })
-  ] }) });
+  const isEmpty = useThread((s) => s.messages.length === 0);
+  if (!isEmpty) return null;
+  return /* @__PURE__ */ jsxs15("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
+    /* @__PURE__ */ jsx27("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs15(
+      motion4.div,
+      {
+        className: "aui-thread-welcome-message flex flex-col items-center justify-center px-4 text-center",
+        variants: welcomeStagger,
+        initial: "initial",
+        animate: "animate",
+        children: [
+          config?.icon && /* @__PURE__ */ jsx27(motion4.div, { variants: welcomeIcon, className: "mb-5", children: config.icon }),
+          /* @__PURE__ */ jsx27(
+            motion4.h1,
+            {
+              variants: welcomeItem,
+              className: "aui-thread-welcome-message-inner font-semibold text-2xl",
+              children: config?.heading ?? "How can I help you today?"
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            motion4.p,
+            {
+              variants: welcomeItem,
+              className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
+              children: config?.subheading ?? "Send a message to start a conversation."
+            }
+          )
+        ]
+      }
+    ) }),
+    suggestions && /* @__PURE__ */ jsx27("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ jsx27(SuggestionsSlot, { suggestions }) })
+  ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ jsx25(MessagePrimitive2.Error, { children: /* @__PURE__ */ jsx25(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: /* @__PURE__ */ jsx25(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ jsx27(MessagePrimitive2.Error, { children: /* @__PURE__ */ jsx27(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: /* @__PURE__ */ jsx27(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     MessagePrimitive2.Root,
     {
       className: "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150",
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ jsxs14("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
-          /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsxs15("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
+          /* @__PURE__ */ jsx27(
             MessagePrimitive2.Parts,
             {
               components: {
                 Text: MarkdownText,
-                tools: { Fallback: ToolArtifactFallback }
+                // `Override` (not `Fallback`) replaces the default tool renderer
+                // entirely so we never fall back to the assistant-ui boilerplate.
+                tools: { Override: ToolArtifactFallback }
               }
             }
           ),
-          /* @__PURE__ */ jsx25(MessageError, {})
+          /* @__PURE__ */ jsx27(MessageError, {})
         ] }),
-        /* @__PURE__ */ jsx25("div", { className: "aui-assistant-message-footer mt-1 ml-2 flex", children: /* @__PURE__ */ jsx25(AssistantActionBar, {}) })
+        /* @__PURE__ */ jsx27("div", { className: "aui-assistant-message-footer mt-0 ml-1 flex", children: /* @__PURE__ */ jsx27(AssistantActionBar, {}) })
       ]
     }
   );
 };
+var ASSISTANT_ACTION_ICON_CLASS = cn(
+  "size-6 min-h-6 min-w-6 text-muted-foreground/45 hover:text-muted-foreground/80",
+  // The v2 fill span sits inside `group/tbv2 > span:first-child`. We mute it
+  // here so action-bar buttons read as subtle icons rather than full pills.
+  "[&>span:first-child]:bg-transparent",
+  "[&>span:first-child]:group-hover/tbv2:bg-neutral-100/50",
+  "dark:[&>span:first-child]:group-hover/tbv2:bg-white/8"
+);
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "not-last",
-      autohideFloat: "single-branch",
-      className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm",
+      className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
-        /* @__PURE__ */ jsx25(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs14(TooltipIconButton, { tooltip: "Copy", children: [
-          /* @__PURE__ */ jsx25(AuiIf2, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ jsx25(CheckIcon3, {}) }),
-          /* @__PURE__ */ jsx25(AuiIf2, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ jsx25(CopyIcon2, {}) })
-        ] }) }),
-        /* @__PURE__ */ jsx25(ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ jsx25(TooltipIconButton, { tooltip: "Refresh", children: /* @__PURE__ */ jsx25(RefreshCwIcon, {}) }) }),
-        /* @__PURE__ */ jsxs14(ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ jsx25(ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx27(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs15(
+          TooltipIconButton,
+          {
+            tooltip: "Copy",
+            variant: "ghost",
+            className: ASSISTANT_ACTION_ICON_CLASS,
+            children: [
+              /* @__PURE__ */ jsx27(AuiIf2, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ jsx27(CheckIcon3, { className: "size-3" }) }),
+              /* @__PURE__ */ jsx27(AuiIf2, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ jsx27(CopyIcon2, { className: "size-3" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx27(ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ jsx27(
+          TooltipIconButton,
+          {
+            tooltip: "Regenerate",
+            variant: "ghost",
+            className: ASSISTANT_ACTION_ICON_CLASS,
+            children: /* @__PURE__ */ jsx27(RefreshCwIcon, { className: "size-3" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs15(ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ jsx27(ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx27(
             TooltipIconButton,
             {
               tooltip: "More",
-              className: "data-[state=open]:bg-accent",
-              children: /* @__PURE__ */ jsx25(MoreHorizontalIcon, {})
+              variant: "ghost",
+              className: cn(
+                ASSISTANT_ACTION_ICON_CLASS,
+                "data-[state=open]:text-muted-foreground/80"
+              ),
+              children: /* @__PURE__ */ jsx27(MoreHorizontalIcon, { className: "size-3" })
             }
           ) }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             ActionBarMorePrimitive.Content,
             {
               side: "bottom",
               align: "start",
-              className: "aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-              children: /* @__PURE__ */ jsx25(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxs14(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", children: [
-                /* @__PURE__ */ jsx25(DownloadIcon, { className: "size-4" }),
+              className: "aui-action-bar-more-content z-50 min-w-36 overflow-hidden rounded-lg border border-neutral-200 bg-white p-1 text-foreground shadow-md dark:border-white/10 dark:bg-zinc-900",
+              children: /* @__PURE__ */ jsx27(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxs15(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-neutral-100 focus:bg-neutral-100 dark:hover:bg-zinc-800 dark:focus:bg-zinc-800", children: [
+                /* @__PURE__ */ jsx27(DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -3275,51 +3741,71 @@ var AssistantActionBar = () => {
     }
   );
 };
+var UserMessageText = () => {
+  return /* @__PURE__ */ jsx27("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ jsx27(MessagePartPrimitive.Text, { smooth: false }) });
+};
 var UserMessage = () => {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     MessagePrimitive2.Root,
     {
-      className: "aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2",
+      className: "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2 px-2 py-3",
       "data-role": "user",
       children: [
-        /* @__PURE__ */ jsx25(UserMessageAttachments, {}),
-        /* @__PURE__ */ jsxs14("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [
-          /* @__PURE__ */ jsx25("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ jsx25(MessagePrimitive2.Parts, {}) }),
-          /* @__PURE__ */ jsx25("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ jsx25(UserActionBar, {}) })
-        ] })
+        /* @__PURE__ */ jsx27(UserMessageAttachments, {}),
+        /* @__PURE__ */ jsxs15(
+          motion4.div,
+          {
+            className: "aui-user-message-content relative inline-block max-w-[80%] rounded-2xl bg-neutral-200 px-4 py-2.5 text-foreground dark:bg-neutral-700",
+            initial: { opacity: 0, y: 8, scale: 0.99 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            transition: { duration: 0.65, ease: luxuryEase },
+            children: [
+              /* @__PURE__ */ jsx27(MessagePrimitive2.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ jsx27("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ jsx27(UserActionBar, {}) })
+            ]
+          }
+        )
       ]
     }
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "not-last",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ jsx25(ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsx25(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit p-4", children: /* @__PURE__ */ jsx25(PencilIcon, {}) }) })
+      children: /* @__PURE__ */ jsx27(ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsx27(
+        TooltipIconButton,
+        {
+          tooltip: "Edit",
+          variant: "ghost",
+          className: ASSISTANT_ACTION_ICON_CLASS,
+          children: /* @__PURE__ */ jsx27(PencilIcon, { className: "size-3" })
+        }
+      ) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ jsx25(MessagePrimitive2.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ jsxs14(ComposerPrimitive3.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(MessagePrimitive2.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ jsxs15(ComposerPrimitive3.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+    /* @__PURE__ */ jsx27(
       ComposerPrimitive3.Input,
       {
         className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none",
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ jsxs14("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ jsx25(ComposerPrimitive3.Cancel, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx25(ComposerPrimitive3.Send, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { size: "sm", children: "Update" }) })
+    /* @__PURE__ */ jsxs15("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ jsx27(ComposerPrimitive3.Cancel, { asChild: true, children: /* @__PURE__ */ jsx27(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx27(ComposerPrimitive3.Send, { asChild: true, children: /* @__PURE__ */ jsx27(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/components/chat.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -3330,7 +3816,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -3340,7 +3826,7 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ jsx26(Thread, { ...threadProps })
+      children: /* @__PURE__ */ jsx28(Thread, { ...threadProps })
     }
   );
 }
@@ -3475,17 +3961,22 @@ When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`,
 import {
   ThreadPrimitive as ThreadPrimitive2,
   MessagePrimitive as MessagePrimitive3,
+  MessagePartPrimitive as MessagePartPrimitive2,
   ComposerPrimitive as ComposerPrimitive4,
   ActionBarPrimitive as ActionBarPrimitive2,
+  ActionBarMorePrimitive as ActionBarMorePrimitive2,
+  ErrorPrimitive as ErrorPrimitive2,
+  AuiIf as AuiIf3,
   AssistantRuntimeProvider as AssistantRuntimeProvider2,
-  useThread,
+  useThread as useThread2,
   useThreadRuntime as useThreadRuntime4,
   useMessageRuntime,
-  useComposerRuntime as useComposerRuntime2
+  useComposerRuntime as useComposerRuntime2,
+  useAuiState as useAuiState3
 } from "@assistant-ui/react";
 
 // src/hooks/use-workforces.ts
-import { useEffect as useEffect5, useMemo as useMemo6, useRef as useRef2, useState as useState8 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo7, useRef as useRef2, useState as useState8 } from "react";
 function useWorkforces(options = {}) {
   const { baseUrl = "/api", fetch: fetchFn, pickInitial } = options;
   const [workforces, setWorkforces] = useState8([]);
@@ -3500,7 +3991,7 @@ function useWorkforces(options = {}) {
   useEffect5(() => {
     pickInitialRef.current = pickInitial;
   }, [pickInitial]);
-  const load = useMemo6(() => {
+  const load = useMemo7(() => {
     return async () => {
       setIsLoading(true);
       setError(null);
@@ -3524,7 +4015,7 @@ function useWorkforces(options = {}) {
   useEffect5(() => {
     load();
   }, [load]);
-  const selected = useMemo6(
+  const selected = useMemo7(
     () => workforces.find((w) => idOf(w) === selectedId),
     [workforces, selectedId]
   );
@@ -3543,8 +4034,8 @@ function idOf(item) {
 }
 
 // src/components/workforce-selector.tsx
-import { ChevronDownIcon as ChevronDownIcon2 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var WorkforceSelector = ({
   workforces,
   value,
@@ -3555,32 +4046,50 @@ var WorkforceSelector = ({
 }) => {
   if (workforces.length === 0) return null;
   if (hideWhenSingle && workforces.length === 1) return null;
-  return /* @__PURE__ */ jsxs15("div", { className: cn("aui-workforce-selector relative inline-flex items-center", className), children: [
-    /* @__PURE__ */ jsxs15(
-      "select",
-      {
-        className: "aui-workforce-selector-input h-7 cursor-pointer appearance-none rounded-md border-none bg-transparent pr-5 pl-1.5 text-xs font-medium text-muted-foreground shadow-none outline-none ring-0 transition-colors hover:text-foreground focus:ring-0",
-        value,
-        onChange: (e) => onChange(e.target.value),
-        "aria-label": placeholder,
-        children: [
-          !value && /* @__PURE__ */ jsx27("option", { value: "", children: placeholder }),
-          workforces.map((w) => {
-            const id = idOf2(w);
-            return /* @__PURE__ */ jsx27("option", { value: id, children: w.name ?? id }, id);
-          })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx27(ChevronDownIcon2, { className: "aui-workforce-selector-icon pointer-events-none absolute right-1 size-3 text-muted-foreground" })
-  ] });
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: cn(
+        "aui-workforce-selector relative inline-flex items-center",
+        studioTopbarPillHeightClass,
+        studioSecondaryChromeClass,
+        "rounded-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs16(
+          "select",
+          {
+            className: "aui-workforce-selector-input h-full cursor-pointer appearance-none rounded-full border-none bg-transparent pr-8 pl-3.5 text-sm font-medium text-foreground outline-none focus:outline-none",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            "aria-label": placeholder,
+            children: [
+              !value && /* @__PURE__ */ jsx29("option", { value: "", children: placeholder }),
+              workforces.map((w) => {
+                const id = idOf2(w);
+                return /* @__PURE__ */ jsx29("option", { value: id, children: w.name ?? id }, id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx29(
+          ChevronDownIcon,
+          {
+            className: "aui-workforce-selector-icon pointer-events-none absolute right-3 size-3.5 text-muted-foreground/70",
+            "aria-hidden": true
+          }
+        )
+      ]
+    }
+  );
 };
 function idOf2(item) {
   return item.id ?? item.uid ?? item.name ?? "";
 }
 
 // src/components/chat-shell.tsx
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var TimbalChatShell = ({
   workforceId,
   brand,
@@ -3592,54 +4101,62 @@ var TimbalChatShell = ({
   fetch: fetch2,
   ...chatProps
 }) => {
-  const {
-    workforces,
-    selectedId,
-    setSelectedId
-  } = useWorkforces({ baseUrl, fetch: fetch2 });
+  const { workforces, selectedId, setSelectedId } = useWorkforces({
+    baseUrl,
+    fetch: fetch2
+  });
   const effectiveId = workforceId ?? selectedId;
   const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
-        "aui-chat-shell flex h-screen flex-col overflow-hidden",
+        "aui-chat-shell relative flex h-dvh flex-col overflow-hidden bg-background",
         className
       ),
+      style: studioChromeShellStyle,
       children: [
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx30(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0",
+              studioPlaygroundGradientClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxs17(
           "header",
           {
             className: cn(
-              "aui-chat-shell-header flex shrink-0 items-center justify-between border-b border-border/50 bg-background/90 px-5 py-2 backdrop-blur-md",
+              "aui-chat-shell-header relative z-10 flex shrink-0 items-center justify-between px-4 pt-[var(--studio-topbar-gap)] pb-2",
               headerClassName
             ),
+            style: { minHeight: "var(--studio-topbar-height)" },
             children: [
-              /* @__PURE__ */ jsxs16("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 items-center gap-2", children: [
                 brand,
-                showSelector && /* @__PURE__ */ jsxs16(Fragment3, { children: [
-                  /* @__PURE__ */ jsx28("div", { className: "mx-3.5 h-3.5 w-px bg-border" }),
-                  /* @__PURE__ */ jsx28(
-                    WorkforceSelector,
-                    {
-                      workforces,
-                      value: selectedId,
-                      onChange: setSelectedId
-                    }
-                  )
-                ] })
+                showSelector && /* @__PURE__ */ jsx30(
+                  WorkforceSelector,
+                  {
+                    workforces,
+                    value: selectedId,
+                    onChange: setSelectedId
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-0.5", children: headerActions })
+              /* @__PURE__ */ jsx30("div", { className: "flex shrink-0 items-center gap-1", children: headerActions })
             ]
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(
           TimbalChat,
           {
             workforceId: effectiveId,
             baseUrl,
             fetch: fetch2,
-            className: "min-h-0 flex-1",
+            className: "relative z-10 min-h-0 flex-1 bg-transparent",
             ...chatProps
           },
           effectiveId
@@ -3652,12 +4169,12 @@ var TimbalChatShell = ({
 // src/auth/provider.tsx
 import {
   createContext as createContext4,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useContext as useContext4,
   useEffect as useEffect6,
   useState as useState9
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function isInsideIframe() {
   try {
     return typeof window !== "undefined" && window.self !== window.top;
@@ -3741,7 +4258,7 @@ var SessionProvider = ({
       messageCleanup?.();
     };
   }, [enabled, embedded]);
-  const logout = useCallback3(() => {
+  const logout = useCallback4(() => {
     clearTokens();
     setUser(null);
     const returnTo = encodeURIComponent(
@@ -3751,7 +4268,7 @@ var SessionProvider = ({
       () => window.location.href = `/api/auth/login?return_to=${returnTo}`
     );
   }, []);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     SessionContext.Provider,
     {
       value: {
@@ -3768,7 +4285,7 @@ var SessionProvider = ({
 
 // src/auth/guard.tsx
 import { Loader2 } from "lucide-react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -3779,7 +4296,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx30(Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx32(Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
@@ -3793,11 +4310,13 @@ var AuthGuard = ({
 export {
   ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES,
+  ActionBarMorePrimitive2 as ActionBarMorePrimitive,
   ActionBarPrimitive2 as ActionBarPrimitive,
   ArtifactCard,
   ArtifactRegistryProvider,
   ArtifactView,
   AssistantRuntimeProvider2 as AssistantRuntimeProvider,
+  AuiIf3 as AuiIf,
   AuthGuard,
   Avatar,
   AvatarFallback,
@@ -3816,23 +4335,44 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  ErrorPrimitive2 as ErrorPrimitive,
   HtmlArtifactView,
   JsonArtifactView,
   MarkdownText,
+  MessagePartPrimitive2 as MessagePartPrimitive,
   MessagePrimitive3 as MessagePrimitive,
   QuestionArtifactView,
+  STUDIO_INSET_LEFT,
+  STUDIO_PILL_HEIGHT,
+  STUDIO_SIDEBAR_GAP,
+  STUDIO_SIDEBAR_WIDTH,
+  STUDIO_TOPBAR_GAP,
+  STUDIO_TOPBAR_HEIGHT,
   SessionProvider,
   Shimmer,
   Suggestions,
   syntax_highlighter_default as SyntaxHighlighter,
+  TIMBAL_V2_BORDER,
+  TIMBAL_V2_FILL,
+  TIMBAL_V2_LABEL,
+  TIMBAL_V2_PILL_SURFACE,
+  TIMBAL_V2_SECONDARY_CHROME,
+  TIMBAL_V2_SHADOW,
+  TIMBAL_V2_SIZE_HEIGHT,
+  TIMBAL_V2_SIZE_ICON,
+  TIMBAL_V2_SIZE_LABEL_PX,
   TableArtifactView,
   Thread,
   ThreadPrimitive2 as ThreadPrimitive,
   TimbalChat,
   TimbalChatShell,
   TimbalRuntimeProvider,
+  TimbalV2Button,
   ToolArtifactFallback,
+  ToolBodyPresence,
   ToolFallback,
+  ToolMotion,
+  ToolPresence,
   Tooltip,
   TooltipContent,
   TooltipIconButton,
@@ -3859,6 +4399,7 @@ export {
   isArtifact,
   isArtifactFenceLanguage,
   isUiBinding,
+  luxuryEase,
   parseArtifactFromToolResult,
   parseSSELine2 as parseSSELine,
   refreshAccessToken,
@@ -3868,15 +4409,42 @@ export {
   setPath,
   setRefreshToken,
   splitMarkdownByArtifacts,
+  studioArtifactShellClass,
+  studioChromeShellStyle,
+  studioComposeInputShellClass,
+  studioComposerIoWellClass,
+  studioIntegrationBorder,
+  studioIntegrationCardClass,
+  studioIntegrationIconTileClass,
+  studioIntegrationSurfaceSolid,
+  studioListRowButtonClass,
+  studioPillSurfaceClass,
+  studioPlaygroundGradientClass,
+  studioQuestionOptionClass,
+  studioQuestionOptionSelectedClass,
+  studioSecondaryChromeClass,
+  studioTimelineActionClass,
+  studioTimelineBodyPadClass,
+  studioTimelineChevronClass,
+  studioTimelineDetailClass,
+  studioTimelineRowButtonClass,
+  studioTimelineShimmerActionClass,
+  studioTimelineTextClass,
+  studioToolCardShellClass,
+  studioTopbarIconPillClass,
+  studioTopbarPillHeightClass,
+  toolPresenceTransition,
   useArtifactRegistry,
+  useAuiState3 as useAuiState,
   useComposerRuntime2 as useComposerRuntime,
   useMessageRuntime,
   useResolvedSuggestions,
   useSession,
-  useThread,
+  useThread2 as useThread,
   useThreadRuntime4 as useThreadRuntime,
   useTimbalRuntime,
   useTimbalStream,
+  useToolRunning,
   useUiCustomNodeRegistry,
   useUiDispatch,
   useUiEventEmitter,