@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/index.cjs

@@ -32,21 +32,30 @@ var index_exports = {};
 __export(index_exports, {
   ARTIFACT_AGENT_INSTRUCTIONS: () => ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES: () => ARTIFACT_FENCE_LANGUAGES,
-  ActionBarPrimitive: () => import_react46.ActionBarPrimitive,
+  ActionBarPrimitive: () => import_react57.ActionBarPrimitive,
+  AppChatPanel: () => AppChatPanel,
+  AppConfirmDialog: () => AppConfirmDialog,
+  AppCopilotProvider: () => AppCopilotProvider,
+  AppShell: () => AppShell,
+  AppShellChatTrigger: () => AppShellChatTrigger,
+  AppShellTopbar: () => AppShellTopbar,
   ArtifactCard: () => ArtifactCard,
   ArtifactRegistryProvider: () => ArtifactRegistryProvider,
   ArtifactView: () => ArtifactView,
-  AssistantRuntimeProvider: () => import_react46.AssistantRuntimeProvider,
-  AuiIf: () => import_react46.AuiIf,
+  AssistantRuntimeProvider: () => import_react57.AssistantRuntimeProvider,
+  AuiIf: () => import_react57.AuiIf,
   AuthGuard: () => AuthGuard,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ChartArtifactView: () => ChartArtifactView,
+  ChartPanel: () => ChartPanel,
   Composer: () => Composer,
-  ComposerPrimitive: () => import_react46.ComposerPrimitive,
+  ComposerPrimitive: () => import_react57.ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
+  DataTable: () => DataTable,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -54,20 +63,41 @@ __export(index_exports, {
   DialogPortal: () => DialogPortal,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
+  EmptyState: () => EmptyState2,
+  Field: () => Field,
+  FieldInput: () => FieldInput,
+  FieldSelect: () => FieldSelect,
+  FieldSwitch: () => FieldSwitch,
+  FieldTextarea: () => FieldTextarea,
+  FilterBar: () => FilterBar,
+  FormSection: () => FormSection,
   HtmlArtifactView: () => HtmlArtifactView,
   JsonArtifactView: () => JsonArtifactView,
   MarkdownText: () => MarkdownText,
-  MessagePrimitive: () => import_react46.MessagePrimitive,
+  MemoPillSegmentedTabs: () => MemoPillSegmentedTabs,
+  MessagePrimitive: () => import_react57.MessagePrimitive,
   ModeToggle: () => ModeToggle,
+  Page: () => Page,
+  PageHeader: () => PageHeader,
+  PillSegmentedTabs: () => PillSegmentedTabs,
   QuestionArtifactView: () => QuestionArtifactView,
+  STUDIO_NAV_MODE: () => STUDIO_NAV_MODE,
+  SearchInput: () => SearchInput,
+  Section: () => Section,
   SessionProvider: () => SessionProvider,
   Shimmer: () => Shimmer,
+  StatTile: () => StatTile,
+  StatusBadge: () => StatusBadge,
+  StudioModeSwitch: () => StudioModeSwitch,
   StudioSidebar: () => StudioSidebar,
   StudioWelcome: () => StudioWelcome,
+  SubNav: () => SubNav,
   Suggestions: () => Suggestions,
+  SurfaceCard: () => SurfaceCard,
+  THREAD_DEFAULT_MAX_WIDTH: () => THREAD_DEFAULT_MAX_WIDTH,
   TableArtifactView: () => TableArtifactView,
   Thread: () => Thread,
-  ThreadPrimitive: () => import_react46.ThreadPrimitive,
+  ThreadPrimitive: () => import_react57.ThreadPrimitive,
   TimbalChat: () => TimbalChat,
   TimbalChatShell: () => TimbalChatShell,
   TimbalMark: () => TimbalMark,
@@ -85,6 +115,8 @@ __export(index_exports, {
   UiEventProvider: () => UiEventProvider,
   UiNodeView: () => UiNodeView,
   WorkforceSelector: () => WorkforceSelector,
+  assistantMessageContentClass: () => assistantMessageContentClass,
+  assistantMessageRootClass: () => assistantMessageRootClass,
   authFetch: () => authFetch,
   clearTokens: () => clearTokens,
   cn: () => cn,
@@ -108,14 +140,17 @@ __export(index_exports, {
   setPath: () => setPath,
   setRefreshToken: () => setRefreshToken,
   splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
+  threadMessageColumnClass: () => threadMessageColumnClass,
+  useAppCopilotContext: () => useAppCopilotContext,
+  useAppShellChat: () => useAppShellChat,
   useArtifactRegistry: () => useArtifactRegistry,
-  useComposerRuntime: () => import_react46.useComposerRuntime,
-  useMessageRuntime: () => import_react46.useMessageRuntime,
+  useComposerRuntime: () => import_react57.useComposerRuntime,
+  useMessageRuntime: () => import_react57.useMessageRuntime,
   useOptionalSession: () => useOptionalSession,
   useResolvedSuggestions: () => useResolvedSuggestions,
   useSession: () => useSession,
-  useThread: () => import_react46.useThread,
-  useThreadRuntime: () => import_react46.useThreadRuntime,
+  useThread: () => import_react57.useThread,
+  useThreadRuntime: () => import_react57.useThreadRuntime,
   useTimbalRuntime: () => useTimbalRuntime,
   useTimbalStream: () => useTimbalStream,
   useToolRunning: () => useToolRunning,
@@ -123,7 +158,8 @@ __export(index_exports, {
   useUiDispatch: () => useUiDispatch,
   useUiEventEmitter: () => useUiEventEmitter,
   useUiState: () => useUiState,
-  useWorkforces: () => useWorkforces
+  useWorkforces: () => useWorkforces,
+  userMessageRootClass: () => userMessageRootClass
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1000,13 +1036,13 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 // src/index.ts
 var import_timbal_sdk2 = require("@timbal-ai/timbal-sdk");
 
-// src/components/thread.tsx
-var import_react26 = require("react");
-var import_react27 = require("@assistant-ui/react");
+// src/chat/thread.tsx
+var import_react27 = require("react");
+var import_react28 = require("@assistant-ui/react");
 var import_lucide_react8 = require("lucide-react");
-var import_react28 = require("motion/react");
+var import_react29 = require("motion/react");
 
-// src/components/attachment.tsx
+// src/chat/attachment.tsx
 var import_react5 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_react6 = require("@assistant-ui/react");
@@ -1074,6 +1110,110 @@ function TooltipContent({
 // src/ui/dialog.tsx
 var import_lucide_react = require("lucide-react");
 var import_radix_ui2 = require("radix-ui");
+
+// src/design/button-tokens.ts
+var TIMBAL_V2_ELEVATED_GRADIENT = "bg-gradient-to-b from-elevated-from to-elevated-to";
+var TIMBAL_V2_MODAL_SURFACE = cn(
+  "bg-gradient-to-b from-modal-from to-modal-to",
+  "border border-border shadow-card-elevated"
+);
+var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
+var TIMBAL_V2_FROM_LEGACY_BUTTON = {
+  default: "primary",
+  destructive: "destructive",
+  outline: "secondary",
+  secondary: "secondary",
+  ghost: "ghost",
+  link: "link"
+};
+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-primary-fill-from to-primary-fill-to",
+    "group-hover/tbv2:from-primary-fill-hover-from group-hover/tbv2:to-primary-fill-hover-to",
+    "group-active/tbv2:from-primary-fill-active-from group-active/tbv2:to-primary-fill-active-to"
+  ].join(" "),
+  informative: [
+    TIMBAL_V2_PRIMARY_GRADIENT,
+    "group-hover/tbv2:from-primary-fill-hover-from group-hover/tbv2:to-primary-fill-hover-to",
+    "group-active/tbv2:from-primary-fill-active-from group-active/tbv2:to-primary-fill-active-to",
+    "group-active/tbv2:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
+  ].join(" "),
+  destructive: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
+    "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
+  ].join(" "),
+  secondary: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
+    "group-active/tbv2:from-secondary-fill-active-from group-active/tbv2:to-secondary-fill-active-to"
+  ].join(" "),
+  ghost: [
+    "bg-transparent",
+    "group-hover/tbv2:bg-ghost-fill-hover",
+    "group-active/tbv2:bg-ghost-fill-active"
+  ].join(" "),
+  link: "bg-transparent"
+};
+var TIMBAL_V2_LABEL = {
+  primary: "text-primary-foreground",
+  informative: "text-primary-foreground",
+  destructive: "text-destructive",
+  secondary: "text-foreground",
+  ghost: "text-foreground",
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
+};
+var TIMBAL_V2_BORDER = {
+  primary: "",
+  informative: "border border-foreground/15",
+  destructive: "border border-destructive/45",
+  secondary: "border border-border",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SHADOW = {
+  primary: "shadow-card",
+  informative: "shadow-card",
+  destructive: "shadow-card",
+  secondary: "shadow-card",
+  ghost: "",
+  link: ""
+};
+var TIMBAL_V2_SWITCH_TRACK_OFF = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card"
+);
+var TIMBAL_V2_SWITCH_THUMB = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border/80 shadow-sm"
+);
+var TIMBAL_V2_SECONDARY_CHROME = [
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card",
+  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
+].join(" ");
+
+// src/ui/dialog.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Dialog({
   ...props
@@ -1104,7 +1244,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[70] bg-black/50",
         className
       ),
       ...props
@@ -1124,7 +1264,8 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          TIMBAL_V2_MODAL_SURFACE,
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 duration-200 outline-none sm:max-w-lg",
           className
         ),
         ...props,
@@ -1134,7 +1275,7 @@ function DialogContent({
             import_radix_ui2.Dialog.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.XIcon, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Close" })
@@ -1211,98 +1352,53 @@ function AvatarFallback({
   );
 }
 
-// src/components/tooltip-icon-button.tsx
+// src/chat/tooltip-icon-button.tsx
 var import_react4 = require("react");
 
 // src/ui/timbal-v2-button.tsx
 var React = __toESM(require("react"), 1);
 var import_radix_ui4 = require("radix-ui");
-
-// src/design/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 = {
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TIMBAL_V2_FILL_AS_CHILD = {
   primary: [
     "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
-    "group-hover/tbv2:from-primary-fill-hover-from group-hover/tbv2:to-primary-fill-hover-to",
-    "group-active/tbv2:from-primary-fill-active-from group-active/tbv2:to-primary-fill-active-to"
+    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
+    "active:from-primary-fill-active-from active:to-primary-fill-active-to"
   ].join(" "),
   informative: [
-    "bg-primary",
-    "group-active/tbv2:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
+    TIMBAL_V2_PRIMARY_GRADIENT,
+    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
+    "active:from-primary-fill-active-from active:to-primary-fill-active-to",
+    "active:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
   ].join(" "),
   destructive: [
-    "bg-gradient-to-b from-elevated-from to-elevated-to",
-    "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
-    "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "hover:from-destructive-fill-hover-from hover:to-destructive-fill-hover-to",
+    "active:from-destructive-fill-active-from active:to-destructive-fill-active-to"
   ].join(" "),
   secondary: [
-    "bg-gradient-to-b from-elevated-from to-elevated-to",
-    "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
-    "group-active/tbv2:from-secondary-fill-active-from group-active/tbv2:to-secondary-fill-active-to"
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+    "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
   ].join(" "),
   ghost: [
     "bg-transparent",
-    "group-hover/tbv2:bg-ghost-fill-hover",
-    "group-active/tbv2:bg-ghost-fill-active"
+    "hover:bg-ghost-fill-hover",
+    "active:bg-ghost-fill-active"
   ].join(" "),
   link: "bg-transparent"
 };
-var TIMBAL_V2_LABEL = {
-  primary: "text-primary-foreground",
-  informative: "text-primary-foreground",
-  destructive: "text-destructive",
-  secondary: "text-foreground",
-  ghost: "text-foreground",
-  link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
-};
-var TIMBAL_V2_BORDER = {
-  primary: "",
-  informative: "border border-foreground/15",
-  destructive: "border border-destructive/45",
-  secondary: "border border-border",
-  ghost: "",
-  link: ""
-};
-var TIMBAL_V2_SHADOW = {
-  primary: "shadow-card",
-  informative: "shadow-card",
-  destructive: "shadow-card",
-  secondary: "shadow-card",
-  ghost: "",
-  link: ""
+var TIMBAL_V2_LABEL_AS_CHILD = {
+  ...TIMBAL_V2_LABEL,
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 hover:decoration-foreground/45"
 };
-var TIMBAL_V2_SECONDARY_CHROME = [
-  "bg-gradient-to-b from-elevated-from to-elevated-to border border-border shadow-card",
-  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
-  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
-  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
-].join(" ");
-
-// src/ui/timbal-v2-button.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
 var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   variant = "secondary",
   size = "sm",
   isIconOnly = false,
   isLoading = false,
   fullWidth = false,
+  shape = "pill",
   asChild = false,
   className,
   disabled,
@@ -1311,28 +1407,49 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   ...props
 }, ref) {
   const isDisabled = disabled || isLoading;
-  const Comp = asChild ? import_radix_ui4.Slot.Root : "button";
   const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
-  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : "rounded-full";
+  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : shape === "rect" ? "rounded-md" : "rounded-full";
+  const sharedRootClass = cn(
+    "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/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
+  );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_radix_ui4.Slot.Root,
+      {
+        ref,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "timbal-v2-button",
+        "data-variant": variant,
+        className: cn(
+          sharedRootClass,
+          TIMBAL_V2_FILL_AS_CHILD[variant],
+          !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+          TIMBAL_V2_LABEL_AS_CHILD[variant]
+        ),
+        ...props,
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Comp,
+    "button",
     {
       ref,
-      type: asChild ? void 0 : type,
-      disabled: asChild ? void 0 : isDisabled,
-      "aria-disabled": asChild && isDisabled ? true : void 0,
+      type,
+      disabled: isDisabled,
       "data-slot": "timbal-v2-button",
       "data-variant": variant,
       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-ring/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
+        "group/tbv2 flex-col items-stretch overflow-hidden bg-transparent p-0",
+        sharedRootClass
       ),
       ...props,
       children: [
@@ -1362,7 +1479,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   );
 });
 
-// src/components/tooltip-icon-button.tsx
+// src/chat/tooltip-icon-button.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var TooltipIconButton = (0, import_react4.forwardRef)(function TooltipIconButton2({ tooltip, side = "bottom", variant = "secondary", children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { children: [
@@ -1374,7 +1491,7 @@ var TooltipIconButton = (0, import_react4.forwardRef)(function TooltipIconButton
   ] });
 });
 
-// src/components/attachment.tsx
+// src/chat/attachment.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var useFileSrc = (file) => {
   const [src, setSrc] = (0, import_react5.useState)(void 0);
@@ -1533,7 +1650,7 @@ var ComposerAddAttachment = () => {
   ) });
 };
 
-// src/components/markdown-text.tsx
+// src/chat/markdown-text.tsx
 var import_dot = require("@assistant-ui/react-markdown/styles/dot.css");
 var import_katex_min = require("katex/dist/katex.min.css");
 var import_react_markdown = require("@assistant-ui/react-markdown");
@@ -1543,7 +1660,7 @@ var import_rehype_katex = __toESM(require("rehype-katex"), 1);
 var import_react17 = require("react");
 var import_lucide_react4 = require("lucide-react");
 
-// src/components/syntax-highlighter.tsx
+// src/chat/syntax-highlighter.tsx
 var import_react16 = require("react");
 var import_core = require("shiki/core");
 var import_javascript = require("shiki/engine/javascript");
@@ -1881,24 +1998,27 @@ var studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[v
 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-playground-from via-playground-via to-playground-to";
 var studioComposeInputShellClass = cn(
-  "aui-composer-shell flex w-full flex-col rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
+  "aui-composer-shell flex w-full flex-col overflow-hidden rounded-2xl bg-composer-bg shadow-card-elevated outline-none",
   "border border-composer-border",
   "transition-[box-shadow,border-color]",
   "focus-within:border-composer-border-focus focus-within:ring-2 focus-within:ring-foreground/5"
 );
 var studioSecondaryChromeClass = TIMBAL_V2_SECONDARY_CHROME;
-var studioIntegrationSurfaceSolid = "bg-gradient-to-b from-elevated-from to-elevated-to shadow-card";
+var studioSearchChromeClass = cn(
+  studioSecondaryChromeClass,
+  studioTopbarPillHeightClass,
+  "inline-flex items-center gap-2 rounded-full px-2.5"
+);
+var studioIntegrationSurfaceSolid = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "shadow-card"
+);
 var studioIntegrationBorder = "border border-border";
 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,
@@ -1911,10 +2031,6 @@ var studioComposerIoWellClass = cn(
   studioIntegrationSurfaceSolid,
   studioIntegrationBorder
 );
-var studioToolCardShellClass = cn(
-  studioIntegrationCardClass,
-  "my-2 min-h-0 overflow-hidden"
-);
 var studioSidebarPanelClass = cn(
   "bg-sidebar text-sidebar-foreground",
   "border border-sidebar-border",
@@ -1977,10 +2093,15 @@ 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-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+var studioQuestionOptionClass = cn(
+  "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:border-border hover:bg-gradient-to-b hover:from-elevated-from hover:to-elevated-to hover:shadow-card",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2"
+);
 var studioQuestionOptionSelectedClass = cn(
   studioQuestionOptionClass,
-  "border-border bg-accent ring-1 ring-foreground/10"
+  "border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card ring-1 ring-foreground/10"
 );
 
 // src/artifacts/question-artifact.tsx
@@ -2247,29 +2368,38 @@ var import_react13 = require("@assistant-ui/react");
 
 // src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
-var import_radix_ui5 = require("radix-ui");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var LEGACY_SIZE_TO_V2 = {
+  default: "md",
+  xs: "xs",
+  sm: "sm",
+  lg: "lg",
+  icon: "sm",
+  "icon-xs": "xs",
+  "icon-sm": "sm",
+  "icon-lg": "lg"
+};
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/30 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/30",
-        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "",
+        destructive: "",
+        outline: "",
+        secondary: "",
+        ghost: "",
+        link: ""
       },
       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"
+        default: "",
+        xs: "",
+        sm: "",
+        lg: "",
+        icon: "",
+        "icon-xs": "",
+        "icon-sm": "",
+        "icon-lg": ""
       }
     },
     defaultVariants: {
@@ -2285,13 +2415,20 @@ function Button({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
+  const v2Variant = TIMBAL_V2_FROM_LEGACY_BUTTON[variant ?? "default"];
+  const v2Size = LEGACY_SIZE_TO_V2[size ?? "default"];
+  const isIconOnly = typeof size === "string" && size.startsWith("icon");
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    Comp,
+    TimbalV2Button,
     {
       "data-slot": "button",
       "data-variant": variant,
       "data-size": size,
+      variant: v2Variant,
+      size: v2Size,
+      shape: "rect",
+      isIconOnly,
+      asChild,
       className: cn(buttonVariants({ variant, size, className })),
       ...props
     }
@@ -2520,14 +2657,15 @@ var ToggleNode = ({ node }) => {
             "aria-checked": value,
             onClick: onToggle,
             className: cn(
-              "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"
+              "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
+              value ? "border-foreground/15 bg-gradient-to-b from-primary-fill-from to-primary-fill-to shadow-card" : cn(TIMBAL_V2_SWITCH_TRACK_OFF, "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to")
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "span",
               {
                 className: cn(
-                  "inline-block size-4 transform rounded-full bg-background shadow transition-transform",
+                  "inline-block size-4 transform rounded-full transition-transform",
+                  TIMBAL_V2_SWITCH_THUMB,
                   value ? "translate-x-4" : "translate-x-0.5"
                 ),
                 "aria-hidden": true
@@ -2759,7 +2897,7 @@ function splitMarkdownByArtifacts(markdown) {
   return segments;
 }
 
-// src/components/syntax-highlighter.tsx
+// src/chat/syntax-highlighter.tsx
 var import_javascript2 = __toESM(require("shiki/langs/javascript.mjs"), 1);
 var import_typescript = __toESM(require("shiki/langs/typescript.mjs"), 1);
 var import_python = __toESM(require("shiki/langs/python.mjs"), 1);
@@ -2866,7 +3004,7 @@ var ShikiSyntaxHighlighter = ({
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
-// src/components/markdown-text.tsx
+// src/chat/markdown-text.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var MarkdownTextImpl = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3121,7 +3259,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
   CodeHeader
 });
 
-// src/components/tool-fallback.tsx
+// src/chat/tool-fallback.tsx
 var import_react21 = require("react");
 var import_lucide_react5 = require("lucide-react");
 var import_react22 = require("@assistant-ui/react");
@@ -3169,7 +3307,7 @@ var ShimmerComponent = ({
 };
 var Shimmer = (0, import_react19.memo)(ShimmerComponent);
 
-// src/components/motion.tsx
+// src/chat/motion.tsx
 var import_react20 = require("motion/react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var luxuryEase = [0.16, 1, 0.3, 1];
@@ -3267,7 +3405,7 @@ function ToolBodyPresence({
   );
 }
 
-// src/components/tool-fallback.tsx
+// src/chat/tool-fallback.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function detectRunning({
   status,
@@ -3462,7 +3600,7 @@ var ToolArtifactFallback = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToolFallback, { ...props });
 };
 
-// src/components/composer.tsx
+// src/chat/composer.tsx
 var import_react23 = require("@assistant-ui/react");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -3572,7 +3710,7 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
   ] });
 };
 
-// src/components/suggestions.tsx
+// src/chat/suggestions.tsx
 var import_react24 = require("react");
 var import_react25 = require("@assistant-ui/react");
 var import_lucide_react7 = require("lucide-react");
@@ -3714,18 +3852,30 @@ function scheduleThemeSanityCheck() {
   }
 }
 
-// src/components/thread.tsx
+// src/chat/thread-variant.tsx
+var import_react26 = require("react");
+var ThreadVariantContext = (0, import_react26.createContext)("default");
+var ThreadVariantProvider = ThreadVariantContext.Provider;
+function useThreadVariant() {
+  return (0, import_react26.useContext)(ThreadVariantContext);
+}
+
+// src/chat/thread.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Thread = ({
   className,
-  maxWidth = "44rem",
+  variant = "default",
+  maxWidth: maxWidthProp,
   welcome,
   suggestions,
-  composerPlaceholder = "Send a message...",
+  composerPlaceholder,
   components,
   artifacts,
   onArtifactEvent
 }) => {
+  const isPanel = variant === "panel";
+  const maxWidth = maxWidthProp ?? (isPanel ? "100%" : "44rem");
+  const placeholder = composerPlaceholder ?? (isPanel ? "Ask about this page\u2026" : "Send a message...");
   const WelcomeSlot = components?.Welcome ?? ThreadWelcome;
   const ComposerSlot = components?.Composer ?? Composer;
   const UserMessageSlot = components?.UserMessage ?? UserMessage;
@@ -3733,28 +3883,33 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     scheduleThemeSanityCheck();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
       }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_react27.ThreadPrimitive.Root,
+        import_react28.ThreadPrimitive.Root,
         {
           className: cn(
             "aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
+            isPanel && "aui-thread-root--panel",
             className
           ),
           style: { ["--thread-max-width"]: maxWidth },
+          "data-thread-variant": variant,
           children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-            import_react27.ThreadPrimitive.Viewport,
+            import_react28.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
-              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
+              className: cn(
+                "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-28",
+                isPanel ? "px-2 pt-2" : "px-4 pt-4"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   WelcomeSlot,
@@ -3765,7 +3920,7 @@ var Thread = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  import_react27.ThreadPrimitive.Messages,
+                  import_react28.ThreadPrimitive.Messages,
                   {
                     components: {
                       UserMessage: UserMessageSlot,
@@ -3774,20 +3929,38 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollToBottomSlot, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
-                ] })
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  import_react28.ThreadPrimitive.ViewportFooter,
+                  {
+                    className: cn(
+                      "aui-thread-viewport-footer sticky bottom-0 z-10 mt-auto w-full isolate pt-2",
+                      isPanel ? "bg-card pb-2" : "bg-background pb-4 md:pb-6"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      "div",
+                      {
+                        className: cn(
+                          "mx-auto flex w-full max-w-(--thread-max-width) flex-col",
+                          isPanel ? "gap-2" : "gap-4"
+                        ),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollToBottomSlot, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComposerSlot, { placeholder })
+                        ]
+                      }
+                    )
+                  }
+                )
               ]
             }
           )
         }
       ) })
     }
-  );
+  ) });
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     TooltipIconButton,
     {
       tooltip: "Scroll to bottom",
@@ -3825,64 +3998,86 @@ var ThreadWelcome = ({
   suggestions,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  const isEmpty = (0, import_react27.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react28.useThread)((s) => s.messages.length === 0);
+  const isPanel = useThreadVariant() === "panel";
   if (!isEmpty) return null;
+  const defaultHeading = isPanel ? "Ask about this page" : "How can I help you today?";
+  const defaultSubheading = isPanel ? "The assistant can use dashboard context from your app." : "Send a message to start a conversation.";
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-      import_react28.motion.div,
+      import_react29.motion.div,
       {
-        className: "aui-thread-welcome-message flex flex-col items-center justify-center px-4 text-center",
+        className: cn(
+          "aui-thread-welcome-message flex flex-col items-center justify-center text-center",
+          isPanel ? "px-2" : "px-4"
+        ),
         variants: welcomeStagger,
         initial: "initial",
         animate: "animate",
         children: [
-          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.motion.div, { variants: welcomeIcon, className: "mb-5", children: config.icon }),
+          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react29.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react28.motion.h1,
+            import_react29.motion.h1,
             {
               variants: welcomeItem,
-              className: "aui-thread-welcome-message-inner font-semibold text-2xl",
-              children: config?.heading ?? "How can I help you today?"
+              className: cn(
+                "aui-thread-welcome-message-inner font-semibold",
+                isPanel ? "text-base" : "text-2xl"
+              ),
+              children: config?.heading ?? defaultHeading
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react28.motion.p,
+            import_react29.motion.p,
             {
               variants: welcomeItem,
-              className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
-              children: config?.subheading ?? "Send a message to start a conversation."
+              className: "aui-thread-welcome-message-inner mt-1.5 text-muted-foreground text-sm",
+              children: config?.subheading ?? defaultSubheading
             }
           )
         ]
       }
     ) }),
-    suggestions && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SuggestionsSlot, { suggestions }) })
+    suggestions && !isPanel ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SuggestionsSlot, { suggestions }) }) : null
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
+  const isPanel = useThreadVariant() === "panel";
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react27.MessagePrimitive.Root,
+    import_react28.MessagePrimitive.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",
+      className: cn(
+        "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in duration-150",
+        isPanel ? "py-2" : "py-3"
+      ),
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react27.MessagePrimitive.Parts,
-            {
-              components: {
-                Text: MarkdownText,
-                // `Override` (not `Fallback`) replaces the default tool renderer
-                // entirely so we never fall back to the assistant-ui boilerplate.
-                tools: { Override: ToolArtifactFallback }
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageError, {})
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "div",
+          {
+            className: cn(
+              "aui-assistant-message-content wrap-break-word text-foreground leading-relaxed",
+              isPanel ? "px-1 text-sm" : "px-2"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_react28.MessagePrimitive.Parts,
+                {
+                  components: {
+                    Text: MarkdownText,
+                    // `Override` (not `Fallback`) replaces the default tool renderer
+                    // entirely so we never fall back to the assistant-ui boilerplate.
+                    tools: { Override: ToolArtifactFallback }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageError, {})
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AssistantActionBar, {}) })
       ]
     }
@@ -3893,29 +4088,29 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
   // 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-muted/70"
+  "[&>span:first-child]:group-hover/tbv2:bg-ghost-fill-hover"
 );
 var AssistantActionBar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react27.ActionBarPrimitive.Root,
+    import_react28.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "never",
       className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           TooltipIconButton,
           {
             tooltip: "Copy",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           TooltipIconButton,
           {
             tooltip: "Regenerate",
@@ -3924,8 +4119,8 @@ var AssistantActionBar = () => {
             children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react28.ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             TooltipIconButton,
             {
               tooltip: "More",
@@ -3938,12 +4133,12 @@ var AssistantActionBar = () => {
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react27.ActionBarMorePrimitive.Content,
+            import_react28.ActionBarMorePrimitive.Content,
             {
               side: "bottom",
               align: "start",
               className: "aui-action-bar-more-content z-50 min-w-36 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-card-elevated",
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.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-muted focus:bg-muted", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react28.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-muted focus:bg-muted", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
@@ -3955,25 +4150,32 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessageText = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePartPrimitive.Text, { smooth: false }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePartPrimitive.Text, { smooth: false }) });
 };
 var UserMessage = () => {
+  const isPanel = useThreadVariant() === "panel";
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react27.MessagePrimitive.Root,
+    import_react28.MessagePrimitive.Root,
     {
-      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",
+      className: cn(
+        "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2",
+        isPanel ? "px-1 py-2" : "px-2 py-3"
+      ),
       "data-role": "user",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserMessageAttachments, {}),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-          import_react28.motion.div,
+          import_react29.motion.div,
           {
-            className: "aui-user-message-content relative inline-block max-w-[80%] rounded-2xl bg-bubble-user px-4 py-2.5 text-bubble-user-foreground",
+            className: cn(
+              "aui-user-message-content relative inline-block max-w-[85%] rounded-2xl bg-bubble-user text-bubble-user-foreground",
+              isPanel ? "px-3 py-2 text-sm" : "max-w-[80%] px-4 py-2.5"
+            ),
             initial: { opacity: 0, y: 8, scale: 0.99 },
             animate: { opacity: 1, y: 0, scale: 1 },
             transition: { duration: 0.65, ease: luxuryEase },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserActionBar, {}) })
             ]
           }
@@ -3984,12 +4186,12 @@ var UserMessage = () => {
 };
 var UserActionBar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_react27.ActionBarPrimitive.Root,
+    import_react28.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         TooltipIconButton,
         {
           tooltip: "Edit",
@@ -4002,22 +4204,22 @@ var UserActionBar = () => {
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react27.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react28.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_react27.ComposerPrimitive.Input,
+      import_react28.ComposerPrimitive.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__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react27.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
-// src/components/chat.tsx
+// src/chat/chat.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
@@ -4044,7 +4246,7 @@ function TimbalChat({
   );
 }
 
-// src/components/workforce-selector.tsx
+// src/chat/workforce-selector.tsx
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var WorkforceSelector = ({
@@ -4100,22 +4302,22 @@ function idOf(item) {
 }
 
 // src/hooks/use-workforces.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function useWorkforces(options = {}) {
   const { baseUrl = "/api", fetch: fetchFn, pickInitial, enabled = true } = options;
-  const [workforces, setWorkforces] = (0, import_react29.useState)([]);
-  const [selectedId, setSelectedId] = (0, import_react29.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react29.useState)(enabled);
-  const [error, setError] = (0, import_react29.useState)(null);
-  const fetchFnRef = (0, import_react29.useRef)(fetchFn ?? authFetch);
-  (0, import_react29.useEffect)(() => {
+  const [workforces, setWorkforces] = (0, import_react30.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react30.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react30.useState)(enabled);
+  const [error, setError] = (0, import_react30.useState)(null);
+  const fetchFnRef = (0, import_react30.useRef)(fetchFn ?? authFetch);
+  (0, import_react30.useEffect)(() => {
     fetchFnRef.current = fetchFn ?? authFetch;
   }, [fetchFn]);
-  const pickInitialRef = (0, import_react29.useRef)(pickInitial);
-  (0, import_react29.useEffect)(() => {
+  const pickInitialRef = (0, import_react30.useRef)(pickInitial);
+  (0, import_react30.useEffect)(() => {
     pickInitialRef.current = pickInitial;
   }, [pickInitial]);
-  const load = (0, import_react29.useMemo)(() => {
+  const load = (0, import_react30.useMemo)(() => {
     return async () => {
       if (!enabled) {
         setIsLoading(false);
@@ -4140,10 +4342,10 @@ function useWorkforces(options = {}) {
       }
     };
   }, [baseUrl, enabled]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     load();
   }, [load]);
-  const selected = (0, import_react29.useMemo)(
+  const selected = (0, import_react30.useMemo)(
     () => workforces.find((w) => idOf2(w) === selectedId),
     [workforces, selectedId]
   );
@@ -4202,7 +4404,7 @@ var DOM_IDS = {
   topbarBrandAnchor: "timbal-studio-topbar-brand-anchor"
 };
 
-// src/components/chat-shell.tsx
+// src/studio/shell/chat-shell.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var TimbalChatShell = ({
   workforceId,
@@ -4280,10 +4482,10 @@ var TimbalChatShell = ({
   );
 };
 
-// src/components/studio/studio-shell.tsx
-var import_react42 = require("react");
+// src/studio/shell/studio-shell.tsx
+var import_react45 = require("react");
 var import_lucide_react13 = require("lucide-react");
-var import_react43 = require("motion/react");
+var import_react46 = require("motion/react");
 
 // src/design/sidebar-motion.ts
 var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
@@ -4354,16 +4556,16 @@ function studioSidebarBackdropTransition(reduced) {
 }
 
 // src/hooks/use-sidebar-collapse-phase.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var WIDTH_OVERLAP_FRAC = 0.7;
 function useSidebarCollapsePhase(collapsed, reducedMotion) {
-  const [widthCollapsed, setWidthCollapsed] = (0, import_react30.useState)(collapsed);
-  const [entriesVisible, setEntriesVisible] = (0, import_react30.useState)(true);
-  const collapsedTarget = (0, import_react30.useRef)(collapsed);
-  const isFirstRender = (0, import_react30.useRef)(true);
-  const widthTimerRef = (0, import_react30.useRef)(null);
-  const revealTimerRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const [widthCollapsed, setWidthCollapsed] = (0, import_react31.useState)(collapsed);
+  const [entriesVisible, setEntriesVisible] = (0, import_react31.useState)(true);
+  const collapsedTarget = (0, import_react31.useRef)(collapsed);
+  const isFirstRender = (0, import_react31.useRef)(true);
+  const widthTimerRef = (0, import_react31.useRef)(null);
+  const revealTimerRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     collapsedTarget.current = collapsed;
   }, [collapsed]);
   const clearWidthTimer = () => {
@@ -4378,7 +4580,7 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
       revealTimerRef.current = null;
     }
   };
-  const applyWidthTarget = (0, import_react30.useCallback)(() => {
+  const applyWidthTarget = (0, import_react31.useCallback)(() => {
     const willExpand = !collapsedTarget.current;
     setWidthCollapsed(collapsedTarget.current);
     clearRevealTimer();
@@ -4389,7 +4591,7 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
       );
     }
   }, [reducedMotion]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     clearWidthTimer();
     clearRevealTimer();
     if (reducedMotion) {
@@ -4413,10 +4615,10 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
       clearRevealTimer();
     };
   }, [collapsed, reducedMotion, applyWidthTarget]);
-  const onEntriesBlurOutComplete = (0, import_react30.useCallback)(() => {
+  const onEntriesBlurOutComplete = (0, import_react31.useCallback)(() => {
     applyWidthTarget();
   }, [applyWidthTarget]);
-  const onPanelWidthComplete = (0, import_react30.useCallback)(() => {
+  const onPanelWidthComplete = (0, import_react31.useCallback)(() => {
     clearRevealTimer();
     setEntriesVisible(true);
   }, []);
@@ -4430,16 +4632,16 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
   };
 }
 
-// src/components/studio/sidebar-backdrop.tsx
-var import_react31 = require("motion/react");
+// src/studio/sidebar/sidebar-backdrop.tsx
+var import_react32 = require("motion/react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var StudioSidebarBackdrop = ({
   open,
   onClose
 }) => {
-  const reducedMotion = (0, import_react31.useReducedMotion)();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react31.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_react31.motion.button,
+  const reducedMotion = (0, import_react32.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react32.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_react32.motion.button,
     {
       type: "button",
       className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden",
@@ -4453,24 +4655,24 @@ var StudioSidebarBackdrop = ({
   ) : null });
 };
 
-// src/components/studio/sidebar-context.tsx
-var import_react32 = require("react");
-var StudioSidebarContext = (0, import_react32.createContext)({
+// src/studio/sidebar/sidebar-context.tsx
+var import_react33 = require("react");
+var StudioSidebarContext = (0, import_react33.createContext)({
   collapsed: false,
   isMobile: false,
   isCollapsedRail: false,
   iconOnlyLayout: false
 });
 function useStudioSidebarLayout() {
-  return (0, import_react32.useContext)(StudioSidebarContext);
+  return (0, import_react33.useContext)(StudioSidebarContext);
 }
 
-// src/components/studio/sidebar.tsx
-var import_react36 = require("react");
-var import_react37 = require("motion/react");
+// src/studio/sidebar/sidebar.tsx
+var import_react39 = require("react");
+var import_react40 = require("motion/react");
 
-// src/components/studio/sidebar-entries.tsx
-var import_react33 = require("motion/react");
+// src/studio/sidebar/sidebar-entries.tsx
+var import_react34 = require("motion/react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var StudioSidebarEntries = ({
   visible,
@@ -4478,12 +4680,12 @@ var StudioSidebarEntries = ({
   children,
   className
 }) => {
-  const reducedMotion = (0, import_react33.useReducedMotion)();
+  const reducedMotion = (0, import_react34.useReducedMotion)();
   if (reducedMotion) {
     return visible ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react33.motion.div,
+    import_react34.motion.div,
     {
       className: cn("flex min-h-0 flex-1 flex-col", className),
       initial: false,
@@ -4502,11 +4704,11 @@ var StudioSidebarEntries = ({
   );
 };
 
-// src/components/studio/sidebar-footer.tsx
+// src/studio/sidebar/sidebar-footer.tsx
 var import_lucide_react10 = require("lucide-react");
 
 // src/auth/provider.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function isInsideIframe() {
   try {
@@ -4515,26 +4717,26 @@ function isInsideIframe() {
     return true;
   }
 }
-var SessionContext = (0, import_react34.createContext)(void 0);
+var SessionContext = (0, import_react35.createContext)(void 0);
 var useSession = () => {
-  const context = (0, import_react34.useContext)(SessionContext);
+  const context = (0, import_react35.useContext)(SessionContext);
   if (context === void 0) {
     throw new Error("useSession must be used within a SessionProvider");
   }
   return context;
 };
 var useOptionalSession = () => {
-  const context = (0, import_react34.useContext)(SessionContext);
+  const context = (0, import_react35.useContext)(SessionContext);
   return context ?? null;
 };
 var SessionProvider = ({
   children,
   enabled = true
 }) => {
-  const [user, setUser] = (0, import_react34.useState)(null);
-  const [loading, setLoading] = (0, import_react34.useState)(enabled);
-  const [embedded] = (0, import_react34.useState)(isInsideIframe);
-  (0, import_react34.useEffect)(() => {
+  const [user, setUser] = (0, import_react35.useState)(null);
+  const [loading, setLoading] = (0, import_react35.useState)(enabled);
+  const [embedded] = (0, import_react35.useState)(isInsideIframe);
+  (0, import_react35.useEffect)(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -4595,7 +4797,7 @@ var SessionProvider = ({
       messageCleanup?.();
     };
   }, [enabled, embedded]);
-  const logout = (0, import_react34.useCallback)(() => {
+  const logout = (0, import_react35.useCallback)(() => {
     clearTokens();
     setUser(null);
     const returnTo = encodeURIComponent(
@@ -4620,7 +4822,7 @@ var SessionProvider = ({
   );
 };
 
-// src/components/studio/sidebar-layout.ts
+// src/studio/sidebar/sidebar-layout.ts
 function studioSidebarIconOnlyLayout(isMobile, isCollapsedRail) {
   if (isMobile) return false;
   return isCollapsedRail;
@@ -4642,21 +4844,21 @@ function studioSidebarNavItemClasses(iconOnly, isActive) {
   );
 }
 
-// src/components/studio/sidebar-entry-motion.tsx
-var import_react35 = require("motion/react");
+// src/studio/sidebar/sidebar-entry-motion.tsx
+var import_react36 = require("motion/react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var StudioSidebarEntryMotion = ({
   children,
   className
 }) => {
-  const reducedMotion = (0, import_react35.useReducedMotion)();
+  const reducedMotion = (0, import_react36.useReducedMotion)();
   if (reducedMotion) {
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react35.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react36.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
 };
 
-// src/components/studio/sidebar-tooltip.tsx
+// src/studio/sidebar/sidebar-tooltip.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var StudioSidebarTooltip = ({
   label,
@@ -4670,7 +4872,7 @@ var StudioSidebarTooltip = ({
   ] });
 };
 
-// src/components/studio/sidebar-footer.tsx
+// src/studio/sidebar/sidebar-footer.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function userInitials(name, email) {
   const fromName = name.trim().split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
@@ -4737,7 +4939,7 @@ var StudioSidebarFooter = ({
   ) });
 };
 
-// src/components/studio/sidebar-header.tsx
+// src/studio/sidebar/sidebar-header.tsx
 var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var sidebarHeaderClass = "flex h-12 shrink-0 items-center px-2";
@@ -4845,7 +5047,7 @@ var StudioSidebarHeader = ({
   ] });
 };
 
-// src/components/studio/sidebar-workforce.ts
+// src/studio/sidebar/sidebar-workforce.ts
 function workforceItemId(w) {
   return w.id ?? w.uid ?? w.name ?? "";
 }
@@ -4857,7 +5059,7 @@ function workforceItemInitial(w) {
   return label.charAt(0).toUpperCase() || "?";
 }
 
-// src/components/studio/sidebar-nav.tsx
+// src/studio/sidebar/sidebar-nav.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var StudioSidebarNav = ({
   workforces,
@@ -4905,7 +5107,7 @@ var StudioSidebarNav = ({
   );
 };
 
-// src/components/studio/timbal-mark.tsx
+// src/studio/sidebar/timbal-mark.tsx
 var import_shaders_react = require("@paper-design/shaders-react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 64;
@@ -4954,7 +5156,32 @@ function TimbalMark({
   );
 }
 
-// src/components/studio/sidebar.tsx
+// src/studio/sidebar/shell-inset-bridge-context.tsx
+var import_react38 = require("react");
+
+// src/layout/shell-inset-context.tsx
+var import_react37 = require("react");
+var ShellInsetContext = (0, import_react37.createContext)(null);
+var ShellInsetProvider = ShellInsetContext.Provider;
+function useShellInsetReporter() {
+  return (0, import_react37.useContext)(ShellInsetContext);
+}
+
+// src/studio/sidebar/shell-inset-bridge-context.tsx
+var StudioSidebarShellInsetBridge = ({
+  onInsetChange
+}) => {
+  const reportInset = useShellInsetReporter();
+  const { isMobile, isCollapsedRail } = useStudioSidebarLayout();
+  (0, import_react38.useLayoutEffect)(() => {
+    const insetPx = isMobile ? 0 : isCollapsedRail ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
+    reportInset?.(insetPx);
+    onInsetChange?.(insetPx);
+  }, [reportInset, onInsetChange, isMobile, isCollapsedRail]);
+  return null;
+};
+
+// src/studio/sidebar/sidebar.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var DEFAULT_BREAKPOINT_PX = 768;
 function readPersistedCollapsed(key) {
@@ -4988,7 +5215,7 @@ var StudioSidebarPanel = ({
   brand,
   emptyCaption = null
 }) => {
-  const reducedMotion = (0, import_react37.useReducedMotion)();
+  const reducedMotion = (0, import_react40.useReducedMotion)();
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
   const isDrawerOpen = isMobile && mobileOpen;
@@ -5007,7 +5234,7 @@ var StudioSidebarPanel = ({
   const panelWidthPx = isMobile ? SIDEBAR_MOBILE_PX : widthCollapsed ? SIDEBAR_WIDTH_COLLAPSED_PX : SIDEBAR_WIDTH_PX;
   const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimbalMark, { size: 32 });
   const panel = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    import_react37.motion.div,
+    import_react40.motion.div,
     {
       "data-sidebar-collapsed": isCollapsedRail ? "" : void 0,
       className: cn(
@@ -5075,7 +5302,7 @@ var StudioSidebarPanel = ({
   );
   if (isMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react37.motion.aside,
+      import_react40.motion.aside,
       {
         className: "fixed inset-y-0 left-0 z-[60] flex",
         "aria-label": "Studio navigation",
@@ -5109,53 +5336,54 @@ var StudioSidebar = ({
   brand,
   emptyCaption,
   mobileOpen: mobileOpenProp,
-  onMobileOpenChange: onMobileOpenChangeProp
+  onMobileOpenChange: onMobileOpenChangeProp,
+  onInsetChange
 }) => {
-  const reducedMotion = (0, import_react37.useReducedMotion)();
+  const reducedMotion = (0, import_react40.useReducedMotion)();
   const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react36.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react39.useState)(
     selectedIdProp ?? ""
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (selectedIdProp !== void 0) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, selectedIdProp, internalSelected]);
   const selectedId = selectedIdProp ?? internalSelected ?? workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name ?? "";
-  const handleSelect = (0, import_react36.useCallback)(
+  const handleSelect = (0, import_react39.useCallback)(
     (id) => {
       if (selectedIdProp === void 0) setInternalSelected(id);
       onSelect?.(id);
     },
     [selectedIdProp, onSelect]
   );
-  const [collapsed, setCollapsed] = (0, import_react36.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react39.useState)(() => {
     const persisted = readPersistedCollapsed(persistKey);
     return persisted || defaultCollapsed;
   });
-  const handleCollapsedChange = (0, import_react36.useCallback)(
+  const handleCollapsedChange = (0, import_react39.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed(persistKey, next);
     },
     [persistKey]
   );
-  const [isMobile, setIsMobile] = (0, import_react36.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react39.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  (0, import_react36.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react36.useState)(false);
+  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react39.useState)(false);
   const mobileOpen = mobileOpenProp ?? internalMobileOpen;
-  const setMobileOpen = (0, import_react36.useCallback)(
+  const setMobileOpen = (0, import_react39.useCallback)(
     (next) => {
       if (mobileOpenProp === void 0) setInternalMobileOpen(next);
       onMobileOpenChangeProp?.(next);
@@ -5172,7 +5400,7 @@ var StudioSidebar = ({
   const entriesVisible = isMobile || phaseEntriesVisible;
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
-  const contextValue = (0, import_react36.useMemo)(
+  const contextValue = (0, import_react39.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
@@ -5181,44 +5409,47 @@ var StudioSidebar = ({
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StudioSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    StudioSidebarPanel,
-    {
-      workforces,
-      selectedId,
-      onSelect: handleSelect,
-      collapsed: effectiveCollapsed,
-      onCollapsedChange: handleCollapsedChange,
-      isMobile,
-      mobileOpen,
-      onMobileOpenChange: setMobileOpen,
-      widthCollapsed,
-      entriesVisible,
-      onEntriesBlurOutComplete,
-      onPanelWidthComplete,
-      brand,
-      emptyCaption
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(StudioSidebarContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StudioSidebarShellInsetBridge, { onInsetChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      StudioSidebarPanel,
+      {
+        workforces,
+        selectedId,
+        onSelect: handleSelect,
+        collapsed: effectiveCollapsed,
+        onCollapsedChange: handleCollapsedChange,
+        isMobile,
+        mobileOpen,
+        onMobileOpenChange: setMobileOpen,
+        widthCollapsed,
+        entriesVisible,
+        onEntriesBlurOutComplete,
+        onPanelWidthComplete,
+        brand,
+        emptyCaption
+      }
+    )
+  ] });
 };
 
-// src/components/studio/sidebar-runtime-portal.tsx
-var import_react38 = require("react");
+// src/studio/sidebar/sidebar-runtime-portal.tsx
+var import_react41 = require("react");
 var import_react_dom = require("react-dom");
 var import_lucide_react12 = require("lucide-react");
-var import_react39 = require("@assistant-ui/react");
+var import_react42 = require("@assistant-ui/react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var StudioSidebarRuntimePortal = ({
   label = "New chat"
 }) => {
   const { iconOnlyLayout } = useStudioSidebarLayout();
-  const hasMessages = (0, import_react39.useThread)((s) => s.messages.length > 0);
+  const hasMessages = (0, import_react42.useThread)((s) => s.messages.length > 0);
   const { clear } = useTimbalRuntime();
-  const [anchor, setAnchor] = (0, import_react38.useState)(null);
-  const startNewChat = (0, import_react38.useCallback)(() => {
+  const [anchor, setAnchor] = (0, import_react41.useState)(null);
+  const startNewChat = (0, import_react41.useCallback)(() => {
     clear();
   }, [clear]);
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
   }, []);
   if (!anchor || !hasMessages) return null;
@@ -5244,11 +5475,10 @@ var StudioSidebarRuntimePortal = ({
   );
 };
 
-// src/components/studio/welcome.tsx
-var import_react40 = require("motion/react");
-var import_react41 = require("@assistant-ui/react");
+// src/studio/sidebar/welcome.tsx
+var import_react43 = require("motion/react");
+var import_react44 = require("@assistant-ui/react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var luxuryEase2 = [0.16, 1, 0.3, 1];
 var welcomeStagger2 = {
   initial: {},
   animate: {
@@ -5260,7 +5490,7 @@ var welcomeItem2 = {
   animate: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.9, ease: luxuryEase2 }
+    transition: { duration: 0.9, ease: luxuryEase }
   }
 };
 var welcomeIcon2 = {
@@ -5269,11 +5499,11 @@ var welcomeIcon2 = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1.1, ease: luxuryEase2 }
+    transition: { duration: 1.1, ease: luxuryEase }
   }
 };
 var StudioWelcome = ({ config, icon }) => {
-  const isEmpty = (0, import_react41.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react44.useThread)((s) => s.messages.length === 0);
   if (!isEmpty) return null;
   const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TimbalMark,
@@ -5283,16 +5513,16 @@ var StudioWelcome = ({ config, icon }) => {
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-    import_react40.motion.div,
+    import_react43.motion.div,
     {
       className: "aui-thread-welcome-message flex flex-col items-center justify-center px-2 text-center sm:px-4",
       variants: welcomeStagger2,
       initial: "initial",
       animate: "animate",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react40.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react43.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          import_react40.motion.h1,
+          import_react43.motion.h1,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
@@ -5300,7 +5530,7 @@ var StudioWelcome = ({ config, icon }) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          import_react40.motion.p,
+          import_react43.motion.p,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
@@ -5312,9 +5542,9 @@ var StudioWelcome = ({ config, icon }) => {
   ) }) });
 };
 
-// src/components/studio/studio-shell.tsx
+// src/studio/shell/studio-shell.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var import_react44 = require("react");
+var import_react47 = require("react");
 var DEFAULT_BREAKPOINT_PX2 = 768;
 function readPersistedCollapsed2(key) {
   if (!key || typeof window === "undefined") return false;
@@ -5356,7 +5586,7 @@ var TimbalStudioShell = ({
   components,
   ...chatProps
 }) => {
-  const reducedMotion = (0, import_react43.useReducedMotion)();
+  const reducedMotion = (0, import_react46.useReducedMotion)();
   const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
   const fetched = useWorkforces({
     enabled: shouldFetchWorkforces,
@@ -5364,36 +5594,36 @@ var TimbalStudioShell = ({
     baseUrl: workforcesBaseUrl
   });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react42.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react45.useState)(
     workforceId ?? ""
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (workforceId) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, workforceId, internalSelected]);
   const activeWorkforceId = workforceId ?? internalSelected ?? fetched.selectedId ?? "";
-  const [collapsed, setCollapsed] = (0, import_react42.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react45.useState)(() => {
     const persisted = readPersistedCollapsed2(persistKey);
     return persisted || defaultCollapsed;
   });
-  const [isMobile, setIsMobile] = (0, import_react42.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react45.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react45.useState)(false);
+  (0, import_react45.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!isMobile) setMobileSidebarOpen(false);
   }, [isMobile]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!mobileSidebarOpen) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setMobileSidebarOpen(false);
@@ -5417,21 +5647,21 @@ var TimbalStudioShell = ({
     layoutDirection
   );
   const desktopInsetPx = widthCollapsed ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
-  const onCollapsedChange = (0, import_react42.useCallback)(
+  const onCollapsedChange = (0, import_react45.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed2(persistKey, next);
     },
     [persistKey]
   );
-  const handleSelectWorkforce = (0, import_react42.useCallback)(
+  const handleSelectWorkforce = (0, import_react45.useCallback)(
     (id) => {
       if (!workforceId) setInternalSelected(id);
       if (isMobile) setMobileSidebarOpen(false);
     },
     [workforceId, isMobile]
   );
-  const sidebarContext = (0, import_react42.useMemo)(
+  const sidebarContext = (0, import_react45.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
@@ -5440,7 +5670,7 @@ var TimbalStudioShell = ({
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
-  const resolvedComponents = (0, import_react42.useMemo)(() => {
+  const resolvedComponents = (0, import_react45.useMemo)(() => {
     const next = { Welcome: StudioWelcome, ...components };
     next.Composer = makeComposerWithPortal(components?.Composer);
     return next;
@@ -5498,7 +5728,7 @@ var TimbalStudioShell = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-          import_react43.motion.header,
+          import_react46.motion.header,
           {
             className: cn(
               "absolute top-0 right-0 z-40 flex items-start justify-between gap-2",
@@ -5539,7 +5769,7 @@ var TimbalStudioShell = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_react43.motion.main,
+          import_react46.motion.main,
           {
             className: cn(
               "relative z-10 flex h-full min-w-0 flex-col",
@@ -5549,7 +5779,7 @@ var TimbalStudioShell = ({
             initial: false,
             animate: { paddingLeft: isMobile ? 12 : desktopInsetPx },
             transition: layoutTransition,
-            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react44.createElement)(
+            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react47.createElement)(
               TimbalChat,
               {
                 ...chatProps,
@@ -5567,8 +5797,23 @@ var TimbalStudioShell = ({
   ) });
 };
 
-// src/components/studio/mode-toggle.tsx
-var import_react45 = require("react");
+// src/chat/layout.ts
+var THREAD_DEFAULT_MAX_WIDTH = "44rem";
+var threadMessageColumnClass = "mx-auto w-full max-w-(--thread-max-width)";
+var assistantMessageRootClass = [
+  "aui-assistant-message-root relative",
+  threadMessageColumnClass,
+  "py-3 duration-150"
+].join(" ");
+var assistantMessageContentClass = "wrap-break-word px-2 text-foreground leading-relaxed";
+var userMessageRootClass = [
+  "aui-user-message-root flex flex-col items-end gap-2",
+  threadMessageColumnClass,
+  "px-2 py-3"
+].join(" ");
+
+// src/studio/sidebar/mode-toggle.tsx
+var import_react48 = require("react");
 var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var ModeToggle = ({
@@ -5578,14 +5823,14 @@ var ModeToggle = ({
   label = "Toggle theme"
 }) => {
   const isControlled = theme !== void 0;
-  const [internalIsDark, setInternalIsDark] = (0, import_react45.useState)(false);
-  (0, import_react45.useEffect)(() => {
+  const [internalIsDark, setInternalIsDark] = (0, import_react48.useState)(false);
+  (0, import_react48.useEffect)(() => {
     if (isControlled) return;
     if (typeof document === "undefined") return;
     setInternalIsDark(document.documentElement.classList.contains("dark"));
   }, [isControlled]);
   const isDark = isControlled ? theme === "dark" : internalIsDark;
-  const onClick = (0, import_react45.useCallback)(() => {
+  const onClick = (0, import_react48.useCallback)(() => {
     const next = isDark ? "light" : "dark";
     if (setTheme) {
       setTheme(next);
@@ -5619,7 +5864,1190 @@ var ModeToggle = ({
   );
 };
 
-// src/artifacts/agent-instructions.ts
+// src/studio/mode-switch.tsx
+var import_react51 = require("react");
+
+// src/ui/pill-segmented-tabs.tsx
+var import_react49 = require("react");
+var import_react50 = require("motion/react");
+
+// src/design/pill-segmented-classes.ts
+var pillSegmentedTrackBase = "inline-flex w-fit max-w-max shrink-0 self-start items-center rounded-full";
+var pillSegmentedTrackSurface = cn(
+  "bg-pill-segmented-track border border-[var(--pill-segmented-track-border)]",
+  "shadow-[var(--pill-segmented-track-shadow)]"
+);
+var pillSegmentedTrackClass = cn(
+  pillSegmentedTrackBase,
+  pillSegmentedTrackSurface,
+  "gap-1 p-1"
+);
+var pillSegmentedTrackFlushClass = cn(
+  pillSegmentedTrackBase,
+  pillSegmentedTrackSurface,
+  "h-[var(--studio-chrome-pill-height)] items-center gap-0.5 overflow-visible p-0.5"
+);
+var pillSegmentedSegmentClass = cn(
+  "relative flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-normal transition-colors"
+);
+var pillSegmentedFlushSegmentClass = cn(
+  "relative box-border inline-flex h-9 min-h-9 items-center justify-center gap-1.5 rounded-full px-3.5 py-0",
+  "text-sm font-normal leading-tight transition-colors"
+);
+var pillSegmentedActiveIndicatorClass = cn(
+  "absolute inset-0 rounded-full",
+  "border border-[var(--pill-segmented-indicator-border)]",
+  "bg-gradient-to-b from-[var(--pill-segmented-indicator-from)] to-[var(--pill-segmented-indicator-to)]",
+  "shadow-[var(--pill-segmented-indicator-shadow)]"
+);
+
+// src/ui/pill-segmented-tabs.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var PillTab = ({
+  tabKey,
+  label,
+  isActive,
+  disabled,
+  onSelect,
+  layoutId,
+  segmentClassName,
+  animateIndicator
+}) => {
+  const handlePress = (0, import_react49.useCallback)(() => {
+    if (!disabled) onSelect(tabKey);
+  }, [disabled, onSelect, tabKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: handlePress,
+      disabled,
+      "aria-pressed": isActive,
+      className: cn(
+        segmentClassName,
+        disabled && "cursor-not-allowed opacity-50",
+        !disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
+      ),
+      children: [
+        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_react50.motion.div,
+          {
+            layoutId,
+            className: pillSegmentedActiveIndicatorClass,
+            transition: { type: "spring", duration: 0.3, bounce: 0.15 }
+          }
+        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
+      ]
+    }
+  );
+};
+var PillSegmentedTabs = ({
+  value,
+  onChange,
+  tabs,
+  className,
+  trackVariant = "default",
+  layoutId: layoutIdProp,
+  "aria-label": ariaLabel
+}) => {
+  const reactId = (0, import_react49.useId)();
+  const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
+  const reducedMotion = (0, import_react50.useReducedMotion)();
+  const isFlush = trackVariant === "flush";
+  const trackClass2 = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
+  const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass2, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    PillTab,
+    {
+      tabKey: tab.key,
+      label: tab.label,
+      disabled: tab.disabled,
+      isActive: value === tab.key,
+      onSelect: onChange,
+      layoutId,
+      segmentClassName,
+      animateIndicator: !reducedMotion
+    },
+    tab.key
+  )) });
+};
+var MemoPillSegmentedTabs = (0, import_react49.memo)(PillSegmentedTabs);
+
+// src/studio/mode-switch.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var STUDIO_NAV_MODE = {
+  BUILD: "build",
+  OPERATE: "operate"
+};
+var StudioModeSwitch = (0, import_react51.memo)(
+  function StudioModeSwitch2({
+    value,
+    onChange,
+    className,
+    buildLabel = "Build",
+    manageLabel = "Manage",
+    "aria-label": ariaLabel = "Studio mode"
+  }) {
+    const tabs = (0, import_react51.useMemo)(
+      () => [
+        { key: STUDIO_NAV_MODE.BUILD, label: buildLabel },
+        { key: STUDIO_NAV_MODE.OPERATE, label: manageLabel }
+      ],
+      [buildLabel, manageLabel]
+    );
+    const handleChange = (0, import_react51.useCallback)(
+      (key) => {
+        if (key === STUDIO_NAV_MODE.BUILD || key === STUDIO_NAV_MODE.OPERATE) {
+          onChange(key);
+        }
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "div",
+      {
+        "data-tour": "studio-mode-switch",
+        "data-studio-chrome-align": "mode-switch",
+        id: "studio-chrome-mode-switch",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          PillSegmentedTabs,
+          {
+            value,
+            onChange: handleChange,
+            tabs,
+            trackVariant: "flush",
+            layoutId: "studio-nav-mode-segmented",
+            "aria-label": ariaLabel
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/app/layout/AppShell.tsx
+var import_react53 = require("motion/react");
+var import_react54 = require("react");
+
+// src/design/app-classes.ts
+var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
+var appShellTopbarInsetClass = "w-full px-4 md:px-6";
+var appShellInsetTopClass = "pt-4 md:pt-6";
+var appShellTopbarRowClass = cn(
+  studioTopbarPillHeightClass,
+  "flex w-full items-center justify-between gap-2"
+);
+var appShellTopbarStickyClass = cn(
+  "sticky top-0 z-20 shrink-0 bg-background pb-2",
+  appShellInsetTopClass
+);
+var appPageHeaderClass = cn(
+  "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+  "pb-4 pt-2"
+);
+var appSectionClass = "flex flex-col gap-4 py-4";
+var appSectionTitleClass = "text-lg font-semibold text-foreground";
+var appSectionDescriptionClass = "text-sm text-muted-foreground";
+var appSurfaceCardClass = cn(
+  studioIntegrationCardClass,
+  "p-4 md:p-5"
+);
+var appStatTileClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col gap-1"
+);
+var appStatValueClass = "text-2xl font-semibold tracking-tight text-foreground";
+var appStatLabelClass = "text-sm text-muted-foreground";
+var appFilterBarClass = cn(
+  "flex flex-wrap items-center gap-2",
+  studioTopbarPillHeightClass
+);
+var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
+var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
+var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
+var appFieldClass = "flex flex-col gap-1.5";
+var appFieldLabelClass = "text-sm font-medium text-foreground";
+var appFieldHintClass = "text-xs text-muted-foreground";
+var appInputClass = cn(
+  studioSecondaryChromeClass,
+  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10"
+);
+var appEmptyStateClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col items-center justify-center gap-2 py-12 text-center"
+);
+var appEmptyStateTitleClass = "text-base font-medium text-foreground";
+var appEmptyStateDescriptionClass = "max-w-sm text-sm text-muted-foreground";
+var appChartPanelClass = cn(appSurfaceCardClass, "flex flex-col gap-3");
+var appChartPanelTitleClass = "text-sm font-medium text-foreground";
+
+// src/app/layout/app-shell-chat-context.tsx
+var import_react52 = require("react");
+var AppShellChatContext = (0, import_react52.createContext)(null);
+var AppShellChatProvider = AppShellChatContext.Provider;
+function useAppShellChat() {
+  return (0, import_react52.useContext)(AppShellChatContext);
+}
+
+// src/app/layout/AppShell.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var floatingTriggerClass = cn(
+  "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
+  "bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "bottom-6 right-6 max-sm:bottom-4 max-sm:right-4"
+);
+var floatingPanelClass = cn(
+  "aui-app-shell-chat-float fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border/60 shadow-card-elevated",
+  "bg-card/85 backdrop-blur-xl supports-backdrop-filter:bg-card/75",
+  // Mobile: stretch between insets (no fixed width — avoids a wide empty strip on the right)
+  "max-sm:inset-x-3 max-sm:top-3 max-sm:bottom-3 max-sm:w-auto",
+  "sm:top-6 sm:right-6 sm:bottom-6 sm:w-[var(--app-shell-chat-width)] sm:max-w-[calc(100vw-3rem)]"
+);
+var AppShellBody = ({
+  sidebar,
+  topbarContent,
+  mainClassName,
+  insetPaddingPx,
+  insetExpanded,
+  children
+}) => {
+  const reducedMotion = (0, import_react53.useReducedMotion)();
+  const layoutDirection = insetExpanded ? "expand" : "collapse";
+  const layoutTransition = studioSidebarWidthTransition(
+    !!reducedMotion,
+    layoutDirection
+  );
+  const insetPadding = sidebar ? insetPaddingPx : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_react53.motion.div,
+    {
+      className: "aui-app-shell-body relative z-10 flex min-h-0 min-w-0 flex-1 flex-col",
+      initial: false,
+      animate: { paddingLeft: insetPadding },
+      transition: layoutTransition,
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        "div",
+        {
+          className: cn(
+            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col overflow-y-auto",
+            !topbarContent && appShellInsetTopClass
+          ),
+          children: [
+            topbarContent ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
+          ]
+        }
+      )
+    }
+  );
+};
+var AppShell = ({
+  sidebar,
+  topbar,
+  header,
+  children,
+  chat,
+  chatWidth = "24rem",
+  chatHeight,
+  chatOpen: chatOpenProp,
+  defaultChatOpen = false,
+  onChatOpenChange,
+  chatCollapsible = true,
+  chatTriggerLabel = "Assistant",
+  hideChatTrigger = false,
+  className,
+  mainClassName
+}) => {
+  const topbarContent = topbar ?? header;
+  const hasChat = Boolean(chat);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react54.useState)(defaultChatOpen);
+  const isChatControlled = chatOpenProp !== void 0;
+  const chatOpen = isChatControlled ? chatOpenProp : uncontrolledOpen;
+  const setChatOpen = (0, import_react54.useCallback)(
+    (open) => {
+      if (!isChatControlled) {
+        setUncontrolledOpen(open);
+      }
+      onChatOpenChange?.(open);
+    },
+    [isChatControlled, onChatOpenChange]
+  );
+  const toggleChat = (0, import_react54.useCallback)(() => {
+    setChatOpen(!chatOpen);
+  }, [chatOpen, setChatOpen]);
+  const [insetPaddingPx, setInsetPaddingPx] = (0, import_react54.useState)(
+    sidebar ? SIDEBAR_INSET_PX_EXPANDED : 0
+  );
+  const reportShellInset = (0, import_react54.useCallback)((insetPx) => {
+    setInsetPaddingPx(insetPx);
+  }, []);
+  const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
+  const shellBody = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    AppShellBody,
+    {
+      sidebar,
+      topbarContent,
+      mainClassName,
+      insetPaddingPx,
+      insetExpanded,
+      children
+    }
+  );
+  const tree = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-app-shell relative flex h-dvh overflow-hidden bg-background",
+        className
+      ),
+      style: studioChromeShellStyle,
+      children: [
+        sidebar,
+        shellBody,
+        hasChat && chatOpen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "div",
+          {
+            className: floatingPanelClass,
+            style: {
+              ["--app-shell-chat-width"]: chatWidth,
+              ...chatHeight ? { height: chatHeight } : void 0
+            },
+            role: "dialog",
+            "aria-label": typeof chatTriggerLabel === "string" ? chatTriggerLabel : "Assistant",
+            children: chat
+          }
+        ) : null,
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "button",
+          {
+            type: "button",
+            className: floatingTriggerClass,
+            onClick: () => setChatOpen(true),
+            "aria-expanded": false,
+            children: chatTriggerLabel
+          }
+        ) : null
+      ]
+    }
+  ) });
+  if (!hasChat) {
+    return tree;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    AppShellChatProvider,
+    {
+      value: {
+        open: chatOpen,
+        setOpen: setChatOpen,
+        toggle: toggleChat,
+        collapsible: chatCollapsible
+      },
+      children: tree
+    }
+  );
+};
+
+// src/app/layout/AppShellTopbar.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var AppShellTopbar = ({
+  start,
+  actions,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      start,
+      children
+    ] }),
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
+  ] });
+};
+
+// src/app/layout/AppShellChatTrigger.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var floatingPositionClass = "fixed bottom-6 right-6 z-50 max-sm:bottom-4 max-sm:right-4";
+var AppShellChatTrigger = ({
+  className,
+  label = "Assistant",
+  placement = "inline"
+}) => {
+  const shellChat = useAppShellChat();
+  if (!shellChat || shellChat.open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    TimbalV2Button,
+    {
+      type: "button",
+      variant: placement === "floating" ? "primary" : "secondary",
+      size: "sm",
+      className: cn(
+        "aui-app-shell-chat-trigger",
+        placement === "floating" && floatingPositionClass,
+        placement === "floating" && "shadow-card-elevated",
+        className
+      ),
+      onClick: () => shellChat.setOpen(true),
+      "aria-expanded": false,
+      children: label
+    }
+  );
+};
+
+// src/app/layout/PageHeader.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var PageHeader = ({
+  title,
+  description,
+  actions,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+  ] });
+};
+
+// src/app/layout/Page.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Page = ({
+  children,
+  breadcrumbs,
+  className,
+  ...headerProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
+    breadcrumbs,
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PageHeader, { ...headerProps }),
+    children
+  ] });
+};
+
+// src/app/layout/Section.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Section = ({
+  title,
+  description,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("section", { className: cn("aui-app-section", appSectionClass, className), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: appSectionDescriptionClass, children: description }) : null,
+    children
+  ] });
+};
+
+// src/app/copilot/app-copilot-context.tsx
+var import_react55 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var AppCopilotContext = (0, import_react55.createContext)(null);
+var AppCopilotProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AppCopilotContext.Provider, { value, children });
+};
+function useAppCopilotContext() {
+  return (0, import_react55.useContext)(AppCopilotContext) ?? {};
+}
+
+// src/app/chat/AppChatPanel.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var shellClass = "aui-app-chat-panel flex h-full min-h-0 flex-col overflow-hidden";
+var chromeClass = cn(
+  "aui-app-chat-panel-chrome relative z-20 flex min-h-12 shrink-0 items-center justify-end",
+  "bg-card/90 px-2 pt-3 pb-3 backdrop-blur-sm"
+);
+var closeButtonClass = cn(
+  "aui-app-chat-panel-close flex size-8 shrink-0 items-center justify-center rounded-md",
+  "text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+);
+var bodyClass = cn(
+  "aui-app-chat-panel-body relative min-h-0 flex-1 overflow-hidden",
+  "[&_.aui-thread-root]:h-full",
+  "[&_.aui-thread-viewport]:scrollbar-thin",
+  "[&_.aui-thread-viewport]:[scrollbar-color:var(--border)_transparent]",
+  // Reserve the scrollbar gutter on BOTH edges so the composer + messages
+  // stay symmetric (otherwise the right-side scrollbar adds a phantom inset).
+  "[&_.aui-thread-viewport]:[scrollbar-gutter:stable_both-edges]",
+  // Tighter symmetric horizontal inset for panel + composer
+  "[&_.aui-thread-viewport]:!px-2",
+  "[&_.aui-thread-viewport]:!pt-2",
+  "[&_.aui-user-message-root]:!px-0",
+  "[&_.aui-composer-input]:!px-2",
+  "[&_.aui-composer-action-wrapper]:!px-2"
+);
+var AppChatPanel = ({
+  className,
+  workforceId,
+  baseUrl,
+  fetch: fetch2,
+  attachments,
+  attachmentsUploadUrl,
+  attachmentsAccept,
+  debug,
+  welcome,
+  suggestions,
+  composerPlaceholder,
+  components,
+  artifacts,
+  onArtifactEvent,
+  ...rest
+}) => {
+  const shellChat = useAppShellChat();
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cn(shellClass, className), children: [
+    shellChat?.collapsible ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: chromeClass, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "button",
+      {
+        type: "button",
+        className: closeButtonClass,
+        onClick: () => shellChat.setOpen(false),
+        "aria-label": "Close assistant",
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react15.XIcon, { className: "size-4", "aria-hidden": true })
+      }
+    ) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: bodyClass, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      TimbalRuntimeProvider,
+      {
+        workforceId,
+        baseUrl,
+        fetch: fetch2,
+        attachments,
+        attachmentsUploadUrl,
+        attachmentsAccept,
+        debug,
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          Thread,
+          {
+            variant: "panel",
+            className: "aui-app-chat-panel-thread",
+            welcome,
+            suggestions,
+            composerPlaceholder,
+            components,
+            artifacts,
+            onArtifactEvent,
+            ...rest
+          }
+        )
+      }
+    ) })
+  ] });
+};
+
+// src/app/surfaces/SurfaceCard.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var SurfaceCard = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+};
+
+// src/app/surfaces/StatTile.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var StatTile = ({ label, value, hint, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+  ] });
+};
+
+// src/app/surfaces/EmptyState.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var EmptyState2 = ({
+  title,
+  description,
+  action,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+    action
+  ] });
+};
+
+// src/app/surfaces/StatusBadge.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var statusBadgeToneClass = {
+  default: "bg-muted text-foreground",
+  primary: "bg-primary/10 text-primary",
+  success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  muted: "bg-muted/80 text-muted-foreground"
+};
+var StatusBadge = ({
+  children,
+  tone = "default",
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    "span",
+    {
+      className: cn(
+        "aui-app-status-badge inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        statusBadgeToneClass[tone],
+        className
+      ),
+      children
+    }
+  );
+};
+
+// src/app/surfaces/AppConfirmDialog.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var bodyClass2 = "flex flex-col gap-4 p-6";
+var titleClass = "pr-8";
+var actionsClass = "flex flex-wrap justify-end gap-2";
+var AppConfirmDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  destructive = false,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    DialogContent,
+    {
+      className: cn("gap-0 p-0 sm:max-w-md", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: bodyClass2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: actionsClass, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            TimbalV2Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              onClick: () => onOpenChange(false),
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            TimbalV2Button,
+            {
+              type: "button",
+              variant: destructive ? "destructive" : "primary",
+              size: "sm",
+              onClick: () => {
+                onConfirm();
+                onOpenChange(false);
+              },
+              children: confirmLabel
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+};
+
+// src/app/navigation/SubNav.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var SubNav = ({
+  items,
+  activeId,
+  onChange,
+  className,
+  "aria-label": ariaLabel = "Section navigation",
+  layoutId
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    PillSegmentedTabs,
+    {
+      value: activeId,
+      onChange,
+      tabs: items.map((item) => ({ key: item.id, label: item.label })),
+      trackVariant: "flush",
+      layoutId: layoutId ?? "app-sub-nav-segmented",
+      "aria-label": ariaLabel
+    }
+  ) });
+};
+
+// src/app/navigation/Breadcrumbs.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Breadcrumbs = ({ items, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        "button",
+        {
+          type: "button",
+          className: appBreadcrumbLinkClass,
+          onClick: item.onClick,
+          children: item.label
+        }
+      )
+    ] }, index);
+  }) }) });
+};
+
+// src/app/forms/Field.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Field = ({
+  label,
+  hint,
+  error,
+  children,
+  className,
+  htmlFor
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("label", { className: appFieldLabelClass, htmlFor, children: label }),
+    children,
+    hint && !error ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+  ] });
+};
+var FieldInput = ({
+  label,
+  hint,
+  error,
+  fieldClassName,
+  className,
+  id,
+  ...inputProps
+}) => {
+  const inputId = id ?? inputProps.name;
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    Field,
+    {
+      label,
+      hint,
+      error,
+      htmlFor: inputId,
+      className: fieldClassName,
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        "input",
+        {
+          id: inputId,
+          className: cn(appInputClass, className),
+          "aria-invalid": error ? true : void 0,
+          ...inputProps
+        }
+      )
+    }
+  );
+};
+
+// src/app/forms/FieldTextarea.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var textareaClass = cn(
+  appInputClass,
+  "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
+);
+var FieldTextarea = ({
+  label,
+  hint,
+  error,
+  fieldClassName,
+  className,
+  id,
+  ...props
+}) => {
+  const textareaId = id ?? props.name;
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    Field,
+    {
+      label,
+      hint,
+      error,
+      htmlFor: textareaId,
+      className: fieldClassName,
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        "textarea",
+        {
+          id: textareaId,
+          className: cn(textareaClass, className),
+          "aria-invalid": error ? true : void 0,
+          ...props
+        }
+      )
+    }
+  );
+};
+
+// src/app/forms/FieldSelect.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var selectWrapClass = "relative";
+var selectClass = cn(
+  appInputClass,
+  "appearance-none pr-9"
+);
+var FieldSelect = ({
+  label,
+  hint,
+  error,
+  fieldClassName,
+  className,
+  children,
+  id,
+  ...props
+}) => {
+  const selectId = id ?? props.name;
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    Field,
+    {
+      label,
+      hint,
+      error,
+      htmlFor: selectId,
+      className: fieldClassName,
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "select",
+          {
+            id: selectId,
+            className: cn(selectClass, className),
+            "aria-invalid": error ? true : void 0,
+            ...props,
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          import_lucide_react16.ChevronDownIcon,
+          {
+            className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
+            "aria-hidden": true
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/app/forms/FieldSwitch.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var trackClass = cn(
+  "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
+  "peer-focus-visible:ring-2 peer-focus-visible:ring-foreground/10",
+  "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  TIMBAL_V2_SWITCH_TRACK_OFF,
+  "peer-checked:border-foreground/15 peer-checked:from-primary-fill-from peer-checked:to-primary-fill-to peer-checked:shadow-card",
+  "peer-checked:[&>span]:translate-x-4"
+);
+var thumbClass = cn(
+  "pointer-events-none inline-block size-4 shrink-0 translate-x-0.5 rounded-full transition-transform",
+  TIMBAL_V2_SWITCH_THUMB
+);
+var FieldSwitch = ({
+  label,
+  description,
+  className,
+  id,
+  ...props
+}) => {
+  const inputId = id ?? props.name ?? "switch";
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+    "label",
+    {
+      className: cn(
+        "aui-app-field-switch flex cursor-pointer items-start gap-3",
+        className
+      ),
+      htmlFor: inputId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            "input",
+            {
+              id: inputId,
+              type: "checkbox",
+              role: "switch",
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: thumbClass }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-xs text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  );
+};
+
+// src/app/forms/SearchInput.tsx
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var SearchInput = ({
+  className,
+  placeholder = "Search\u2026",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    "label",
+    {
+      className: cn(
+        "aui-app-search-input inline-flex min-w-[12rem] items-center gap-2",
+        appSearchInputClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react17.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "input",
+          {
+            type: "search",
+            placeholder,
+            className: "min-w-0 flex-1 border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground/70",
+            ...props
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/app/forms/FormSection.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var FormSection = ({ title, children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-col gap-4", children })
+  ] });
+};
+
+// src/app/data/FilterBar.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var FilterBar = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    "div",
+    {
+      className: cn("aui-app-filter-bar", appFilterBarClass, className),
+      role: "toolbar",
+      "aria-label": "Filters",
+      children
+    }
+  );
+};
+
+// src/app/data/DataTable.tsx
+var import_react56 = require("react");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var shellClass2 = "overflow-hidden rounded-xl border border-border bg-card shadow-card";
+var tableClass = "w-full border-collapse bg-transparent text-sm";
+var headCellClass = "border-b border-border/60 bg-transparent px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground";
+var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-2.5 text-foreground";
+var rowClass = "bg-transparent transition-colors hover:bg-foreground/[0.03] data-[clickable=true]:cursor-pointer";
+var footCellClass = "border-t border-border/60 bg-transparent px-4 py-2.5 text-xs text-muted-foreground";
+var footInnerClass = "flex flex-wrap items-center gap-2";
+var emptyCellClass = "bg-transparent px-4 py-10 text-center text-sm text-muted-foreground";
+var sortButtonClass = "group inline-flex min-w-0 items-center gap-1.5 rounded-md -mx-1 px-1 py-0.5 text-left font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
+var stickyHeadClass = "sticky top-0 z-[1] bg-card/95 shadow-[0_1px_0_0_hsl(var(--border)/0.5)] backdrop-blur-sm [&_th]:bg-card/95";
+var alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function compareSortValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  return String(a).localeCompare(String(b), void 0, { sensitivity: "base" });
+}
+function nextSort(current, columnId) {
+  if (current?.columnId !== columnId) {
+    return { columnId, direction: "asc" };
+  }
+  if (current.direction === "asc") {
+    return { columnId, direction: "desc" };
+  }
+  return null;
+}
+function SortIndicator({
+  active,
+  direction
+}) {
+  const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
+  if (!active) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+  }
+  if (direction === "desc") {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react18.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+}
+function DataTable({
+  columns,
+  rows,
+  getRowKey,
+  emptyTitle = "No data",
+  emptyDescription,
+  emptyMode = "replace",
+  className,
+  sort: sortProp,
+  defaultSort = null,
+  onSortChange,
+  showRowCount = false,
+  rowCountLabel,
+  footer,
+  onRowClick,
+  stickyHeader = false,
+  dense = false,
+  caption
+}) {
+  const [uncontrolledSort, setUncontrolledSort] = (0, import_react56.useState)(
+    defaultSort
+  );
+  const isSortControlled = sortProp !== void 0;
+  const sort = isSortControlled ? sortProp : uncontrolledSort;
+  const setSort = (next) => {
+    if (!isSortControlled) {
+      setUncontrolledSort(next);
+    }
+    onSortChange?.(next);
+  };
+  const sortedRows = (0, import_react56.useMemo)(() => {
+    if (!sort) return rows;
+    const column = columns.find((col) => col.id === sort.columnId);
+    if (!column?.sortable) return rows;
+    const getValue = column.sortValue ?? ((row) => {
+      const rendered = column.cell(row);
+      if (rendered === null || rendered === void 0 || typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
+        return rendered;
+      }
+      return String(rendered);
+    });
+    return [...rows].sort((a, b) => {
+      const cmp = compareSortValues(getValue(a), getValue(b));
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+  }, [columns, rows, sort]);
+  const cellPad = dense ? "px-3 py-2" : void 0;
+  const headPad = dense ? "px-3 py-2" : void 0;
+  if (rows.length === 0 && emptyMode === "replace") {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(EmptyState2, { title: emptyTitle, description: emptyDescription, className });
+  }
+  const rowCountText = rowCountLabel?.(sortedRows.length) ?? `${sortedRows.length} row${sortedRows.length === 1 ? "" : "s"}`;
+  const hasFoot = Boolean((showRowCount || footer) && sortedRows.length > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("tr", { children: columns.map((col) => {
+      const isSorted = sort?.columnId === col.id;
+      const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
+      const headerContent = col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: sortButtonClass,
+          onClick: () => setSort(nextSort(sort, col.id)),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "truncate", children: col.header }),
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+          ]
+        }
+      ) : col.header;
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "th",
+        {
+          scope: "col",
+          "aria-sort": ariaSort,
+          className: cn(
+            headCellClass,
+            headPad,
+            col.align && alignClass[col.align],
+            col.headerClassName
+          ),
+          children: headerContent
+        },
+        col.id
+      );
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      "tr",
+      {
+        className: rowClass,
+        "data-clickable": onRowClick ? "true" : void 0,
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
+        onKeyDown: onRowClick ? (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onRowClick(row);
+          }
+        } : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        role: onRowClick ? "button" : void 0,
+        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          "td",
+          {
+            className: cn(
+              bodyCellClass,
+              cellPad,
+              col.align && alignClass[col.align],
+              col.className
+            ),
+            children: col.cell(row)
+          },
+          col.id
+        ))
+      },
+      getRowKey(row)
+    )) }),
+    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+      "div",
+      {
+        className: cn(
+          footInnerClass,
+          showRowCount && footer ? "justify-between" : "justify-start"
+        ),
+        children: [
+          showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: rowCountText }) : null,
+          footer
+        ]
+      }
+    ) }) }) }) : null
+  ] }) }) });
+}
+
+// src/app/data/ChartPanel.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var chartEmbedClass = "[&_.aui-artifact-root]:my-0 [&_.aui-artifact-root]:rounded-none [&_.aui-artifact-root]:border-0 [&_.aui-artifact-root]:bg-transparent [&_.aui-artifact-root]:shadow-none";
+var ChartPanel = ({
+  title,
+  artifact,
+  children,
+  actions,
+  className
+}) => {
+  const body = children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: chartEmbedClass, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChartArtifactView, { artifact }) }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("aui-app-chart-panel", appChartPanelClass, className), children: [
+    title || actions ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("h3", { className: appChartPanelTitleClass, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", {}),
+      actions
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "min-h-[12rem] w-full", children: body })
+  ] });
+};
+
+// src/artifacts/agent-instructions.ts
 var ARTIFACT_AGENT_INSTRUCTIONS = `
 ## Rich artifacts (Timbal chat UI)
 
@@ -5746,8 +7174,8 @@ When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`,
 `.trim();
 
 // src/auth/guard.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -5758,7 +7186,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react15.Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react19.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
@@ -5771,12 +7199,18 @@ var AuthGuard = ({
 };
 
 // src/index.ts
-var import_react46 = require("@assistant-ui/react");
+var import_react57 = require("@assistant-ui/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES,
   ActionBarPrimitive,
+  AppChatPanel,
+  AppConfirmDialog,
+  AppCopilotProvider,
+  AppShell,
+  AppShellChatTrigger,
+  AppShellTopbar,
   ArtifactCard,
   ArtifactRegistryProvider,
   ArtifactView,
@@ -5786,11 +7220,14 @@ var import_react46 = require("@assistant-ui/react");
   Avatar,
   AvatarFallback,
   AvatarImage,
+  Breadcrumbs,
   Button,
   ChartArtifactView,
+  ChartPanel,
   Composer,
   ComposerPrimitive,
   DEFAULT_UPLOAD_ACCEPT,
+  DataTable,
   Dialog,
   DialogClose,
   DialogContent,
@@ -5798,17 +7235,38 @@ var import_react46 = require("@assistant-ui/react");
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  EmptyState,
+  Field,
+  FieldInput,
+  FieldSelect,
+  FieldSwitch,
+  FieldTextarea,
+  FilterBar,
+  FormSection,
   HtmlArtifactView,
   JsonArtifactView,
   MarkdownText,
+  MemoPillSegmentedTabs,
   MessagePrimitive,
   ModeToggle,
+  Page,
+  PageHeader,
+  PillSegmentedTabs,
   QuestionArtifactView,
+  STUDIO_NAV_MODE,
+  SearchInput,
+  Section,
   SessionProvider,
   Shimmer,
+  StatTile,
+  StatusBadge,
+  StudioModeSwitch,
   StudioSidebar,
   StudioWelcome,
+  SubNav,
   Suggestions,
+  SurfaceCard,
+  THREAD_DEFAULT_MAX_WIDTH,
   TableArtifactView,
   Thread,
   ThreadPrimitive,
@@ -5829,6 +7287,8 @@ var import_react46 = require("@assistant-ui/react");
   UiEventProvider,
   UiNodeView,
   WorkforceSelector,
+  assistantMessageContentClass,
+  assistantMessageRootClass,
   authFetch,
   clearTokens,
   cn,
@@ -5852,6 +7312,9 @@ var import_react46 = require("@assistant-ui/react");
   setPath,
   setRefreshToken,
   splitMarkdownByArtifacts,
+  threadMessageColumnClass,
+  useAppCopilotContext,
+  useAppShellChat,
   useArtifactRegistry,
   useComposerRuntime,
   useMessageRuntime,
@@ -5867,5 +7330,6 @@ var import_react46 = require("@assistant-ui/react");
   useUiDispatch,
   useUiEventEmitter,
   useUiState,
-  useWorkforces
+  useWorkforces,
+  userMessageRootClass
 });