@inf-monkeys-tech/monkeys-design 1.0.49 → 1.0.52

package/dist/components/agent-workbench/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var lucideReact = require('lucide-react');
-var React2 = require('react');
+var React5 = require('react');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -38,7 +38,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
@@ -354,17 +354,17 @@ var MONKEYS_PROVIDER_CONTEXTS_KEY = /* @__PURE__ */ Symbol.for(
 );
 function createMonkeysProviderContexts() {
   return Object.freeze({
-    locale: React2.createContext({
+    locale: React5.createContext({
       ...defaultMonkeysLocale,
       provided: false
     }),
-    theme: React2.createContext({
+    theme: React5.createContext({
       provided: false
     }),
-    direction: React2.createContext({
+    direction: React5.createContext({
       provided: false
     }),
-    environment: React2.createContext({
+    environment: React5.createContext({
       provided: false,
       environment: EMPTY_ENVIRONMENT,
       portal: EMPTY_PORTAL
@@ -390,10 +390,10 @@ providerContexts.theme;
 providerContexts.direction;
 providerContexts.environment;
 function useMonkeysLocale() {
-  return React2.useContext(MonkeysLocaleContext);
+  return React5.useContext(MonkeysLocaleContext);
 }
 function useMonkeysLocaleMessages() {
-  return React2.useContext(MonkeysLocaleContext).messages;
+  return React5.useContext(MonkeysLocaleContext).messages;
 }
 function cn(...parts) {
   return tailwindMerge.twMerge(parts.filter(Boolean).join(" "));
@@ -401,7 +401,118 @@ function cn(...parts) {
 function cn2(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
-var AccordionItem = React2__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var useAutosizeTextArea = ({
+  textAreaRef,
+  triggerAutoSize,
+  maxHeight = Number.MAX_SAFE_INTEGER,
+  minHeight = 0
+}) => {
+  const [init, setInit] = React5__namespace.useState(true);
+  React5__namespace.useEffect(() => {
+    const offsetBorder = 2;
+    if (textAreaRef) {
+      if (init) {
+        textAreaRef.style.minHeight = `${minHeight + offsetBorder}px`;
+        if (maxHeight > minHeight) {
+          textAreaRef.style.maxHeight = `${maxHeight}px`;
+        }
+        setInit(false);
+      }
+      textAreaRef.style.height = `${minHeight + offsetBorder}px`;
+      const scrollHeight = textAreaRef.scrollHeight;
+      if (scrollHeight > maxHeight) {
+        textAreaRef.style.height = `${maxHeight}px`;
+      } else {
+        textAreaRef.style.height = `${scrollHeight + offsetBorder}px`;
+      }
+    }
+  }, [textAreaRef, triggerAutoSize]);
+};
+var AutosizeTextarea = React5__namespace.forwardRef(
+  ({
+    maxHeight = Number.MAX_SAFE_INTEGER,
+    minHeight = 52,
+    className,
+    onChange,
+    value,
+    onKeyDown,
+    onSubmit,
+    onCompositionStart: propsOnCompositionStart,
+    onCompositionEnd: propsOnCompositionEnd,
+    ...props
+  }, ref) => {
+    const textAreaRef = React5__namespace.useRef(null);
+    const [triggerAutoSize, setTriggerAutoSize] = React5__namespace.useState("");
+    const [isComposing, setIsComposing] = React5__namespace.useState(false);
+    const [compositionValue, setCompositionValue] = React5__namespace.useState("");
+    useAutosizeTextArea({
+      textAreaRef: textAreaRef.current,
+      triggerAutoSize,
+      maxHeight,
+      minHeight
+    });
+    React5.useImperativeHandle(ref, () => ({
+      textArea: textAreaRef.current,
+      focus: () => textAreaRef.current?.focus(),
+      maxHeight,
+      minHeight
+    }));
+    React5__namespace.useEffect(() => {
+      setTriggerAutoSize(value);
+    }, [props?.defaultValue, value]);
+    const handleKeyDown = React5__namespace.useCallback((e) => {
+      if (e.key === "ArrowUp" && triggerAutoSize.length <= 0 && !(e.metaKey || e.altKey || e.ctrlKey)) {
+        e.preventDefault();
+        return;
+      }
+      if (onSubmit) {
+        const shouldSubmit = e.key === "Enter" && e.keyCode !== 229 && !e.nativeEvent.isComposing && !isComposing && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey;
+        if (shouldSubmit) {
+          e.preventDefault();
+          onSubmit(e);
+        }
+      }
+      onKeyDown?.(e);
+    }, [isComposing, onKeyDown, onSubmit, triggerAutoSize.length]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...props,
+        onKeyDown: handleKeyDown,
+        value: typeof value !== "undefined" ? isComposing ? compositionValue : value ?? "" : void 0,
+        ref: textAreaRef,
+        className: cn(
+          "flex w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        onCompositionStart: (e) => {
+          setIsComposing(true);
+          setCompositionValue(e.currentTarget.value);
+          propsOnCompositionStart?.(e);
+        },
+        onCompositionEnd: (e) => {
+          setIsComposing(false);
+          const finalValue = e.currentTarget.value;
+          setCompositionValue(finalValue);
+          setTriggerAutoSize(finalValue);
+          onChange?.(e);
+          propsOnCompositionEnd?.(e);
+        },
+        onChange: (e) => {
+          if (e.nativeEvent.isComposing) {
+            setCompositionValue(e.target.value);
+            setTriggerAutoSize(e.target.value);
+            return;
+          }
+          setTriggerAutoSize(e.target.value);
+          onChange?.(e);
+        }
+      }
+    );
+  }
+);
+AutosizeTextarea.displayName = "AutosizeTextarea";
+var AccordionItem = React5__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Item,
   {
     ref,
@@ -414,7 +525,7 @@ var AccordionItem = React2__namespace.forwardRef(({ className, style, ...props }
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React5__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
@@ -436,7 +547,7 @@ var AccordionTrigger = React2__namespace.forwardRef(({ className, children, ...p
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AccordionContent = React5__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AccordionPrimitive__namespace.Content,
   {
     ref,
@@ -446,7 +557,7 @@ var AccordionContent = React2__namespace.forwardRef(({ className, children, ...p
   }
 ));
 AccordionContent.displayName = "AccordionContent";
-var Checkbox = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Checkbox = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
     ref,
@@ -481,7 +592,7 @@ var buttonVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Button = React2__namespace.forwardRef(
+var Button = React5__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -495,7 +606,7 @@ var Button = React2__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var PopoverContent = React2__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React5__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive2__namespace.Content,
   {
     ref,
@@ -509,7 +620,7 @@ var PopoverContent = React2__namespace.forwardRef(({ className, align = "center"
   }
 ) }));
 PopoverContent.displayName = "PopoverContent";
-var ScrollArea = React2__namespace.forwardRef(
+var ScrollArea = React5__namespace.forwardRef(
   ({
     className,
     children,
@@ -553,7 +664,7 @@ var ScrollArea = React2__namespace.forwardRef(
   )
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollBar = React2__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React5__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -569,7 +680,7 @@ var ScrollBar = React2__namespace.forwardRef(({ className, orientation = "vertic
   }
 ));
 ScrollBar.displayName = "ScrollBar";
-var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Switch = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitive__namespace.Root,
   {
     ref,
@@ -582,9 +693,9 @@ var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Switch.displayName = "Switch";
-var Tabs = React2__namespace.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, "data-variant": variant, ...props }));
+var Tabs = React5__namespace.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, "data-variant": variant, ...props }));
 Tabs.displayName = "Tabs";
-var TabsList = React2__namespace.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React5__namespace.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -597,7 +708,7 @@ var TabsList = React2__namespace.forwardRef(({ className, gap, style, ...props }
   }
 ));
 TabsList.displayName = "TabsList";
-var TabsTrigger = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -609,7 +720,7 @@ var TabsTrigger = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsContent = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Content,
   {
     ref,
@@ -621,7 +732,7 @@ var TabsContent = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TabsContent.displayName = "TabsContent";
-var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React5__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -634,67 +745,215 @@ var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 4,
   }
 ) }));
 TooltipContent.displayName = "TooltipContent";
+var Input = React5__namespace.forwardRef(({ className, appearance = "standard", type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "input",
+  {
+    ref,
+    type,
+    className: cn(
+      "flex w-full border border-input bg-control-surface px-3 text-foreground ring-offset-control-surface transition-[border-color,background-color,color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      appearance === "compact" ? "h-9 rounded-md py-1 text-sm shadow-sm" : "h-10 rounded-md py-2 text-sm shadow-sm",
+      appearance === "shadow" && "rounded-lg shadow-sm shadow-black/[0.02] dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none",
+      className
+    ),
+    ...props
+  }
+));
+Input.displayName = "Input";
+var Textarea = React5__namespace.forwardRef(({ className, appearance = "standard", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "textarea",
+  {
+    ref,
+    className: cn(
+      "flex w-full border border-input bg-control-surface px-3 py-2 text-foreground ring-offset-control-surface placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      appearance === "compact" ? "min-h-[60px] rounded-md text-sm shadow-sm" : "min-h-[80px] rounded-md text-sm",
+      appearance === "shadow" && "shadow-sm shadow-black/[0.02] dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none",
+      className
+    ),
+    ...props
+  }
+));
+Textarea.displayName = "Textarea";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group shadow-xs relative flex w-full items-center rounded-md border border-input outline-none transition-[color,box-shadow] dark:bg-input/30",
+        "h-9 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = classVarianceAuthority.cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = classVarianceAuthority.cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+var InputGroupInput = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Input,
+  {
+    ref,
+    "data-slot": "input-group-control",
+    className: cn(
+      "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
+InputGroupInput.displayName = "InputGroupInput";
+var InputGroupTextarea = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  Textarea,
+  {
+    ref,
+    "data-slot": "input-group-control",
+    className: cn(
+      "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
 var menuItemClassName = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
 var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var DropdownMenu2 = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
-var DropdownMenuSubTrigger = React2__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
+var DropdownMenuSubTrigger = React5__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
   children,
   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "ml-auto" })
 ] }));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React2__namespace.forwardRef(
+var DropdownMenuSubContent = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuContent = React2__namespace.forwardRef(
+var DropdownMenuContent = React5__namespace.forwardRef(
   ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React2__namespace.forwardRef(
+var DropdownMenuItem = React5__namespace.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, { ref, className: cn(menuItemClassName, inset && "pl-8", className), ...props })
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React2__namespace.forwardRef(
+var DropdownMenuCheckboxItem = React5__namespace.forwardRef(
   ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.CheckboxItem, { ref, className: cn(menuItemClassName, "pl-8", className), checked, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }),
     children
   ] })
 );
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React2__namespace.forwardRef(
+var DropdownMenuRadioItem = React5__namespace.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.RadioItem, { ref, className: cn(menuItemClassName, "pl-8", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }) }) }),
     children
   ] })
 );
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React2__namespace.forwardRef(
+var DropdownMenuLabel = React5__namespace.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })
 );
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React2__namespace.forwardRef(
+var DropdownMenuSeparator = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React2__namespace.forwardRef(
-  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
+var SelectTrigger = React5__namespace.forwardRef(
+  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm text-foreground shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 opacity-50", iconClassName) }) })
   ] })
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectScrollUpButton = React2__namespace.forwardRef(
+var SelectScrollUpButton = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollUpButton.displayName = "SelectScrollUpButton";
-var SelectScrollDownButton = React2__namespace.forwardRef(
+var SelectScrollDownButton = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
-var SelectContent = React2__namespace.forwardRef(
+var SelectContent = React5__namespace.forwardRef(
   ({ className, children, position = "popper", viewportClassName, disableTriggerViewportSizing = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Content, { ref, position, className: cn(menuContentClassName, "relative max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
     /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", position === "popper" && !disableTriggerViewportSizing && "h-[var(--radix-select-trigger-height)]", viewportClassName), children }),
@@ -702,11 +961,11 @@ var SelectContent = React2__namespace.forwardRef(
   ] }) })
 );
 SelectContent.displayName = "SelectContent";
-var SelectLabel = React2__namespace.forwardRef(
+var SelectLabel = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })
 );
 SelectLabel.displayName = "SelectLabel";
-var SelectItem = React2__namespace.forwardRef(
+var SelectItem = React5__namespace.forwardRef(
   ({ className, children, indicatorClassName, itemText, hideIndicator = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Item, { ref, className: cn(menuItemClassName, "w-full", hideIndicator ? "px-2" : "pl-8 pr-2", className), ...props, children: [
     !hideIndicator ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", indicatorClassName), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }) : null,
     itemText ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -716,7 +975,7 @@ var SelectItem = React2__namespace.forwardRef(
   ] })
 );
 SelectItem.displayName = "SelectItem";
-var SelectSeparator = React2__namespace.forwardRef(
+var SelectSeparator = React5__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
@@ -740,11 +999,11 @@ function AgentWorkbenchComposer({
   onIntent
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench;
-  const fileInputRef = React2.useRef(null);
-  const surfaceRef = React2.useRef(null);
-  const [editingDraftId, setEditingDraftId] = React2.useState();
-  const [editingText, setEditingText] = React2.useState("");
-  const [isNarrow, setIsNarrow] = React2.useState(false);
+  const fileInputRef = React5.useRef(null);
+  const surfaceRef = React5.useRef(null);
+  const [editingDraftId, setEditingDraftId] = React5.useState();
+  const [editingText, setEditingText] = React5.useState("");
+  const [isNarrow, setIsNarrow] = React5.useState(false);
   const narrowBreakpoint = modeSelectionEnabled ? 900 : 704;
   const isBusy = viewModel.status === "loading" || viewModel.status === "streaming" || viewModel.status === "stopping";
   const isStopping = viewModel.status === "stopping";
@@ -752,15 +1011,15 @@ function AgentWorkbenchComposer({
   const canSubmit = !isStopping && !isUploading && (viewModel.value.trim().length > 0 || viewModel.attachments.some((item) => item.status === "ready"));
   const showSubmitButton = !isBusy || canSubmit;
   const filterModelsByMode = modeSelectionEnabled || modeFilteringEnabled;
-  const visibleModelOptions = React2.useMemo(
+  const visibleModelOptions = React5.useMemo(
     () => filterModelsByMode ? viewModel.model.options.filter((option) => option.mode === viewModel.mode) : viewModel.model.options,
     [filterModelsByMode, viewModel.mode, viewModel.model.options]
   );
-  const selectedModelValue = React2.useMemo(() => {
+  const selectedModelValue = React5.useMemo(() => {
     const selected = visibleModelOptions.find((option) => option.id === viewModel.model.selectedId && option.mode === viewModel.mode);
     return selected ? modelOptionValue(selected) : visibleModelOptions[0] ? modelOptionValue(visibleModelOptions[0]) : "";
   }, [viewModel.mode, viewModel.model.selectedId, visibleModelOptions]);
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface) return void 0;
     const updateLayout = () => setIsNarrow(surface.getBoundingClientRect().width <= narrowBreakpoint);
@@ -801,12 +1060,13 @@ function AgentWorkbenchComposer({
             children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "space-y-1.5", children: viewModel.queuedDrafts.map((draft, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex min-h-9 min-w-0 max-w-full items-center gap-2 overflow-hidden rounded-md bg-background px-2 py-1.5 text-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 shrink-0 text-center text-xs text-muted-foreground", children: index + 1 }),
               editingDraftId === draft.id ? /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+                Input,
                 {
                   autoFocus: true,
                   value: editingText,
                   "aria-label": messages.composer.editQueued,
-                  className: "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  appearance: "compact",
+                  className: "h-8 min-w-0 flex-1 px-2 py-1",
                   onChange: (event) => setEditingText(event.target.value),
                   onBlur: () => {
                     if (editingText.trim()) onIntent?.({ type: "edit-queued-draft", draftId: draft.id, text: editingText });
@@ -844,7 +1104,7 @@ function AgentWorkbenchComposer({
                 type: "button",
                 variant: "secondary",
                 size: "icon",
-                className: "absolute right-1 top-1 flex size-5 items-center justify-center rounded-full bg-background/90 text-foreground shadow",
+                className: "absolute right-1 top-1 !size-5 min-w-5 rounded-full bg-background/90 p-0 text-foreground shadow [&_svg]:!size-3",
                 "aria-label": messages.composer.removeAttachment,
                 onClick: () => onIntent?.({ type: "remove-attachment", attachmentId: attachment.id }),
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
@@ -853,13 +1113,14 @@ function AgentWorkbenchComposer({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-x-0 bottom-0 truncate bg-background/85 px-1 py-0.5 text-[9px]", children: attachment.name })
           ] }, attachment.id)) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
-            "textarea",
+            AutosizeTextarea,
             {
               value: viewModel.value,
-              rows: 2,
+              minHeight: 54,
+              maxHeight: 256,
               "aria-label": messages.composer.message,
               placeholder: viewModel.placeholder,
-              className: cn2("max-h-64 min-h-14 min-w-0 w-full resize-none border-0 bg-transparent text-sm leading-relaxed text-foreground outline-none placeholder:text-muted-foreground", classNames?.textarea),
+              className: cn2("min-w-0 w-full resize-none rounded-none border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none focus-visible:ring-0 focus-visible:ring-offset-0", classNames?.textarea),
               onChange: (event) => onIntent?.({ type: "change-value", value: event.target.value }),
               onKeyDown: (event) => {
                 if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
@@ -893,28 +1154,30 @@ function AgentWorkbenchComposer({
                 messages.composer.webSearch,
                 /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: viewModel.webSearchEnabled, onCheckedChange: (enabled) => onIntent?.({ type: "toggle-web-search", enabled }) })
               ] }) : null,
-              modeSelectionEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              modeSelectionEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(
+                Tabs,
                 {
-                  className: "flex h-8 shrink-0 items-center rounded-md border border-border bg-muted p-0.5",
-                  role: "group",
-                  "aria-label": messages.composer.chatMode,
-                  children: ["chat", "work"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      "aria-pressed": viewModel.mode === mode,
-                      className: cn2(
-                        "h-7 rounded px-2.5 text-xs font-medium shadow-none",
-                        viewModel.mode === mode ? "bg-background text-foreground shadow-sm" : "text-foreground/75 hover:text-foreground"
-                      ),
-                      onClick: () => onIntent?.({ type: "change-mode", mode }),
-                      children: messages.modes[mode]
-                    },
-                    mode
-                  ))
+                  value: viewModel.mode,
+                  onValueChange: (mode) => onIntent?.({ type: "change-mode", mode }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      TabsList,
+                      {
+                        "aria-label": messages.composer.chatMode,
+                        className: "h-8 shrink-0 gap-0.5 rounded-md bg-muted/60 p-0.5",
+                        children: ["chat", "work"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+                          TabsTrigger,
+                          {
+                            value: mode,
+                            className: "h-7 min-w-0 px-2.5 text-xs text-foreground/75 shadow-none hover:text-foreground data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none",
+                            children: messages.modes[mode]
+                          },
+                          mode
+                        ))
+                      }
+                    ),
+                    ["chat", "work"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: mode, className: "hidden" }, mode))
+                  ]
                 }
               ) : null,
               viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1015,11 +1278,11 @@ function TemplateVisual({ template }) {
 }
 function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench.quickStart;
-  const fileInputRef = React2.useRef(null);
-  const [activeCategoryId, setActiveCategoryId] = React2.useState();
-  const [activeSectionId, setActiveSectionId] = React2.useState();
-  const [pendingTemplate, setPendingTemplate] = React2.useState();
-  const categories = React2.useMemo(
+  const fileInputRef = React5.useRef(null);
+  const [activeCategoryId, setActiveCategoryId] = React5.useState();
+  const [activeSectionId, setActiveSectionId] = React5.useState();
+  const [pendingTemplate, setPendingTemplate] = React5.useState();
+  const categories = React5.useMemo(
     () => viewModel.categories.map((category) => ({
       ...category,
       sections: category.sections.map((section) => ({
@@ -1032,7 +1295,7 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
   const activeCategory = categories.find((category) => category.id === activeCategoryId);
   const activeSection = activeCategory?.sections.find((section) => section.id === activeSectionId) || activeCategory?.sections[0];
   const usesCompactList = activeSection?.templates.length ? activeSection.templates.every((template) => !template.coverImageUrl) : false;
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (activeCategoryId && !categories.some((category) => category.id === activeCategoryId)) {
       setActiveCategoryId(void 0);
       setActiveSectionId(void 0);
@@ -1168,7 +1431,7 @@ function AgentWorkbenchQuickStart({ viewModel, className, onIntent }) {
   ] });
 }
 function ItemAvatar({ item }) {
-  const [failed, setFailed] = React2.useState(false);
+  const [failed, setFailed] = React5.useState(false);
   if (item.iconUrl && !failed) {
     return /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconUrl, alt: "", className: "size-full object-cover", onError: () => setFailed(true) });
   }
@@ -1176,7 +1439,7 @@ function ItemAvatar({ item }) {
   return initial ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: initial }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: "size-4" });
 }
 function SessionAvatar({ item }) {
-  const [failed, setFailed] = React2.useState(false);
+  const [failed, setFailed] = React5.useState(false);
   if (item.thumbnailUrl && !failed) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
@@ -1214,7 +1477,7 @@ function CollectionState({
   if (status === "error") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-8 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", role: "alert", children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary", onClick: onRetry, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5 px-0 text-sm text-primary hover:text-primary", onClick: onRetry, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
         messages.retry
       ] })
@@ -1246,7 +1509,7 @@ function SessionActions({
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   if (!capabilities.renameSessions && !capabilities.deleteSessions) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "flex size-8 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.actions, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", "aria-label": messages.actions, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", children: [
       capabilities.renameSessions ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: () => onIntent?.({ type: "rename-session", sessionId: item.id, title: item.title }), children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }),
@@ -1270,22 +1533,22 @@ function AgentWorkbenchSidebar({
   const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   const sessionsOnly = navigationMode === "sessions-only";
-  const searchRef = React2.useRef(null);
-  const renameInputRef = React2.useRef(null);
-  const [editingSessionId, setEditingSessionId] = React2.useState();
-  const [editingTitle, setEditingTitle] = React2.useState("");
+  const searchRef = React5.useRef(null);
+  const renameInputRef = React5.useRef(null);
+  const [editingSessionId, setEditingSessionId] = React5.useState();
+  const [editingTitle, setEditingTitle] = React5.useState("");
   const query = viewModel.searchQuery.trim().toLocaleLowerCase();
-  const agents = React2.useMemo(
+  const agents = React5.useMemo(
     () => viewModel.agents.items.filter((item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)),
     [query, viewModel.agents.items]
   );
-  const sessions = React2.useMemo(
+  const sessions = React5.useMemo(
     () => viewModel.sessions.items.filter((item) => !query || item.title.toLocaleLowerCase().includes(query)),
     [query, viewModel.sessions.items]
   );
-  const chatbotSessions = React2.useMemo(() => sessions.filter((item) => item.mode !== "work"), [sessions]);
-  const agentSessions = React2.useMemo(() => sessions.filter((item) => item.mode === "work"), [sessions]);
-  React2.useEffect(() => {
+  const chatbotSessions = React5.useMemo(() => sessions.filter((item) => item.mode !== "work"), [sessions]);
+  const agentSessions = React5.useMemo(() => sessions.filter((item) => item.mode === "work"), [sessions]);
+  React5.useEffect(() => {
     const handleShortcut = (event) => {
       if (!(event.ctrlKey || event.metaKey) || event.key.toLocaleLowerCase() !== "k") return;
       event.preventDefault();
@@ -1295,7 +1558,7 @@ function AgentWorkbenchSidebar({
     window.addEventListener("keydown", handleShortcut);
     return () => window.removeEventListener("keydown", handleShortcut);
   }, []);
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (!editingSessionId) return;
     renameInputRef.current?.focus();
     renameInputRef.current?.select();
@@ -1322,12 +1585,13 @@ function AgentWorkbenchSidebar({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(SessionAvatar, { item }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+            Input,
             {
               ref: renameInputRef,
               value: editingTitle,
               "aria-label": messages.rename,
-              className: "h-6 w-full rounded border border-primary bg-background px-1.5 text-sm font-medium outline-none",
+              appearance: "compact",
+              className: "h-6 w-full border-primary px-1.5 text-sm font-medium",
               onChange: (event) => setEditingTitle(event.target.value),
               onClick: (event) => event.stopPropagation(),
               onBlur: () => saveRenameSession(item),
@@ -1357,7 +1621,7 @@ function AgentWorkbenchSidebar({
           percent,
           "%"
         ] }) : /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status: item.status }),
-        viewModel.capabilities.pinSessions ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": item.pinned ? messages.unpin : messages.pin, className: cn2("flex size-8 items-center justify-center rounded-md text-muted-foreground opacity-0 hover:bg-muted group-hover:opacity-100", item.pinned && "text-primary opacity-100"), onClick: (event) => {
+        viewModel.capabilities.pinSessions ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": item.pinned ? messages.unpin : messages.pin, className: cn2("size-8 text-muted-foreground opacity-0 group-hover:opacity-100", item.pinned && "text-primary opacity-100"), onClick: (event) => {
           event.stopPropagation();
           onIntent?.({ type: "toggle-session-pin", sessionId: item.id, pinned: !item.pinned });
         }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
@@ -1375,17 +1639,17 @@ function AgentWorkbenchSidebar({
       className: "flex h-full min-h-0 flex-col bg-background text-foreground",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 space-y-3 p-4 pb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn2("flex h-10 items-center gap-2 rounded-lg border border-border bg-card px-3 focus-within:ring-2 focus-within:ring-ring", classNames?.search), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4", "aria-hidden": "true" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              InputGroupInput,
               {
                 ref: searchRef,
                 type: "search",
                 value: viewModel.searchQuery,
                 "aria-label": sessionsOnly ? messages.searchSessions : messages.search,
                 placeholder: sessionsOnly ? messages.searchSessions : messages.search,
-                className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+                className: "min-w-0 [&::-webkit-search-cancel-button]:hidden",
                 onChange: (event) => onIntent?.({ type: "change-search", query: event.target.value }),
                 onKeyDown: (event) => {
                   if (event.key !== "Escape") return;
@@ -1394,7 +1658,7 @@ function AgentWorkbenchSidebar({
                 }
               }
             ),
-            viewModel.searchQuery ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "flex size-6 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" })
+            viewModel.searchQuery ? /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(InputGroupButton, { size: "icon-xs", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
           ] }),
           !sessionsOnly || headerActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             !sessionsOnly ? /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
@@ -1405,7 +1669,7 @@ function AgentWorkbenchSidebar({
           ] }) : null
         ] }),
         !sessionsOnly ? /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "agents", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
-          viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "create-agent" }), children: [
+          viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-agent" }), children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4", "aria-hidden": "true" }),
             messages.newAgent
           ] }) : null,
@@ -1426,11 +1690,13 @@ function AgentWorkbenchSidebar({
                 ] }),
                 item.builtIn ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 py-1 text-[10px] text-foreground", children: messages.builtIn }) : null,
                 viewModel.capabilities.pinAgents ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  Button,
                   {
                     type: "button",
+                    variant: "ghost",
+                    size: "icon",
                     "aria-label": item.pinned ? messages.unpin : messages.pin,
-                    className: cn2("flex size-8 items-center justify-center rounded-md text-muted-foreground opacity-0 hover:bg-muted group-hover:opacity-100", item.pinned && "text-primary opacity-100"),
+                    className: cn2("size-8 text-muted-foreground opacity-0 group-hover:opacity-100", item.pinned && "text-primary opacity-100"),
                     onClick: (event) => {
                       event.stopPropagation();
                       onIntent?.({ type: "toggle-agent-pin", itemId: item.id, pinned: !item.pinned });
@@ -1451,11 +1717,11 @@ function AgentWorkbenchSidebar({
           )) })
         ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "sessions", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
-          viewModel.capabilities.createSession ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "create-session" }), children: [
+          viewModel.capabilities.createSession ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-session" }), children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
             messages.newSession
           ] }) : null,
-          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "mb-3 flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
+          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Blocks, { className: "size-4", "aria-hidden": "true" }),
             messages.capabilities
           ] }) : null,
@@ -1472,7 +1738,7 @@ function AgentWorkbenchSidebar({
             renderSessionItems(items)
           ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
         ] }),
-        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex h-10 w-full items-center gap-2 rounded-md px-3 text-left text-sm font-medium hover:bg-muted", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
+        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "h-10 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4", "aria-hidden": "true" }),
           messages.settings
         ] }) }) : null
@@ -1609,7 +1875,7 @@ function AgentWorkbenchTool({
   onExpandedChange
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench.tool;
-  const [uncontrolledExpanded, setUncontrolledExpanded] = React2.useState(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = React5.useState(defaultExpanded);
   const isControlled = expanded !== void 0;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const status = event.payload.status;
@@ -1883,10 +2149,11 @@ function AgentWorkbenchActivity({
                   event.payload.requestedAction !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(JsonValue2, { value: event.payload.requestedAction }) }) : null,
                   requested ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                      Button,
                       {
                         type: "button",
-                        className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                        size: "sm",
+                        className: "h-auto px-3 py-1.5 text-sm",
                         disabled: !onApprovalDecision,
                         onClick: () => onApprovalDecision?.({
                           approvalId: event.payload.approvalId,
@@ -1896,10 +2163,12 @@ function AgentWorkbenchActivity({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                      Button,
                       {
                         type: "button",
-                        className: "rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                        variant: "outline",
+                        size: "sm",
+                        className: "h-auto px-3 py-1.5 text-sm",
                         disabled: !onApprovalDecision,
                         onClick: () => onApprovalDecision?.({
                           approvalId: event.payload.approvalId,
@@ -1931,10 +2200,12 @@ function AgentWorkbenchActivity({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: messages.artifact[event.payload.status] })
                 ] }),
                 event.payload.url ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  Button,
                   {
                     type: "button",
-                    className: "rounded-md p-2 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "text-muted-foreground hover:text-foreground",
                     "aria-label": messages.artifact.open({
                       name: event.payload.name
                     }),
@@ -2202,20 +2473,23 @@ function SummaryPanel({
       error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 rounded-md border border-destructive/30 bg-destructive/5 p-2.5 text-sm text-destructive-text", role: "alert", children: error.payload.message }) : null,
       retryable || canResume ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
         retryable ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+            variant: "outline",
+            size: "sm",
+            className: "h-auto px-2.5 py-1.5 text-xs",
             disabled: !onIntent,
             onClick: () => onIntent?.({ type: "retry", eventId: error.eventId }),
             children: messages.actions.retry
           }
         ) : null,
         canResume ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring",
+            size: "sm",
+            className: "h-auto px-2.5 py-1.5 text-xs",
             disabled: !onIntent,
             onClick: () => onIntent?.({ type: "resume", sessionId: model.sessionId }),
             children: messages.actions.resume
@@ -2225,10 +2499,12 @@ function SummaryPanel({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-wrap gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground", children: [
       canContinueInNewTask ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        Button,
         {
           type: "button",
-          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+          variant: "outline",
+          size: "sm",
+          className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
           disabled: !onIntent,
           onClick: () => onIntent?.({ type: "continue-in-new-task", sessionId: model.sessionId }),
           children: [
@@ -2238,10 +2514,12 @@ function SummaryPanel({
         }
       ) : null,
       canEditAndRerun ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        Button,
         {
           type: "button",
-          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+          variant: "outline",
+          size: "sm",
+          className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
           disabled: !onIntent,
           onClick: () => onIntent?.({ type: "edit-and-rerun", sessionId: model.sessionId }),
           children: [
@@ -2251,10 +2529,12 @@ function SummaryPanel({
         }
       ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+        Button,
         {
           type: "button",
-          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+          variant: "outline",
+          size: "sm",
+          className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
           disabled: !onIntent,
           onClick: () => onIntent?.({ type: "export", sessionId: model.sessionId }),
           children: [
@@ -2268,10 +2548,12 @@ function SummaryPanel({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: messages.summary }),
         summary?.payload.text ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded-md p-1.5 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            variant: "ghost",
+            size: "icon",
+            className: "size-8 text-muted-foreground hover:text-foreground",
             "aria-label": messages.actions.copySummary,
             disabled: !onIntent,
             onClick: () => onIntent?.({
@@ -2286,10 +2568,12 @@ function SummaryPanel({
       summary?.payload.status === "failed" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive-text", role: "alert", children: messages.summaryFailed }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          Button,
           {
             type: "button",
-            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+            variant: "outline",
+            size: "sm",
+            className: "h-auto gap-1.5 px-2.5 py-1.5 text-xs",
             disabled: !onIntent,
             onClick: () => onIntent?.({ type: "retry-summary", eventId: summary.eventId }),
             children: [
@@ -2426,16 +2710,6 @@ function AgentWorkbenchTaskDetails({
     { id: "summary", label: messages.tabs.summary, count: model.summary ? 1 : 0 },
     ...workspaceAvailable ? [{ id: "workspace", label: messages.tabs.workspace, count: workspaceCount }] : []
   ];
-  const tabId = (tab) => `agent-workbench-details-${viewModel.sessionId}-${tab}`.replace(
-    /[^a-zA-Z0-9_-]/g,
-    "-"
-  );
-  const onTabKeyDown = (event, index) => {
-    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
-    event.preventDefault();
-    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
-    onActiveTabChange?.(tabs[nextIndex].id);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
@@ -2452,54 +2726,71 @@ function AgentWorkbenchTaskDetails({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: messages.description })
           ] }),
           onIntent ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            Button,
             {
               type: "button",
-              className: "rounded-md p-2 text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+              variant: "ghost",
+              size: "icon",
+              className: "text-muted-foreground hover:text-foreground",
               "aria-label": messages.actions.close,
               onClick: () => onIntent({ type: "close" }),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", "aria-hidden": "true" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("flex shrink-0 gap-1 border-b border-border px-3 py-2", classNames?.tabs), role: "tablist", "aria-label": messages.tabs.label, children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Tabs,
           {
-            id: tabId(tab.id),
-            type: "button",
-            role: "tab",
-            "aria-selected": resolvedTab === tab.id,
-            "aria-controls": `${tabId(tab.id)}-panel`,
-            tabIndex: resolvedTab === tab.id ? 0 : -1,
-            className: cn2(
-              "inline-flex min-w-0 flex-1 items-center justify-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              resolvedTab === tab.id ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
-            ),
-            onClick: () => onActiveTabChange?.(tab.id),
-            onKeyDown: (event) => onTabKeyDown(event, index),
+            value: resolvedTab,
+            className: "flex min-h-0 flex-1 flex-col",
+            onValueChange: (tab) => onActiveTabChange?.(tab),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(Count, { value: tab.count })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TabsList,
+                {
+                  "aria-label": messages.tabs.label,
+                  className: cn2(
+                    "flex h-auto shrink-0 gap-1 rounded-none border-b border-border bg-transparent px-3 py-2",
+                    classNames?.tabs
+                  ),
+                  children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    TabsTrigger,
+                    {
+                      value: tab.id,
+                      className: "min-w-0 flex-1 gap-1 px-2 py-1.5 text-xs shadow-none data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.label }),
+                        /* @__PURE__ */ jsxRuntime.jsx(Count, { value: tab.count })
+                      ]
+                    },
+                    tab.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TabsContent,
+                {
+                  value: "summary",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(SummaryPanel, { model, onIntent })
+                }
+              ),
+              workspaceAvailable ? /* @__PURE__ */ jsxRuntime.jsx(
+                TabsContent,
+                {
+                  value: "workspace",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    WorkspacePanel,
+                    {
+                      model,
+                      sectionClassName: classNames?.section,
+                      codeClassName: classNames?.code
+                    }
+                  )
+                }
+              ) : null
             ]
-          },
-          tab.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            id: `${tabId(resolvedTab)}-panel`,
-            role: "tabpanel",
-            "aria-labelledby": tabId(resolvedTab),
-            tabIndex: 0,
-            className: cn2("min-h-0 flex-1 overflow-y-auto p-3 outline-none", classNames?.body),
-            children: resolvedTab === "summary" ? /* @__PURE__ */ jsxRuntime.jsx(SummaryPanel, { model, onIntent }) : /* @__PURE__ */ jsxRuntime.jsx(
-              WorkspacePanel,
-              {
-                model,
-                sectionClassName: classNames?.section,
-                codeClassName: classNames?.code
-              }
-            )
           }
         )
       ]
@@ -2596,12 +2887,12 @@ function AgentWorkbenchThread({
   onArtifactOpen
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench;
-  const scrollRef = React2.useRef(null);
-  const entries = React2.useMemo(
+  const scrollRef = React5.useRef(null);
+  const entries = React5.useMemo(
     () => viewModel ? createThreadEntries(viewModel) : [],
     [viewModel]
   );
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (!autoScroll || !viewModel) return;
     const element = scrollRef.current;
     if (element) element.scrollTop = element.scrollHeight;
@@ -2698,11 +2989,11 @@ function AgentWorkbenchProcess({
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench;
   const controlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen ?? isActive(status));
-  const userChangedOpen = React2.useRef(false);
-  const previousStatus = React2.useRef(status);
+  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen ?? isActive(status));
+  const userChangedOpen = React5.useRef(false);
+  const previousStatus = React5.useRef(status);
   const resolvedOpen = controlled ? open : internalOpen;
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (controlled || userChangedOpen.current || previousStatus.current === status) return;
     previousStatus.current = status;
     setInternalOpen(isActive(status));
@@ -2862,10 +3153,11 @@ function ArtifactGroup({
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { role: "heading", "aria-level": 2, className: "text-sm font-medium text-muted-foreground", children: title }),
     artifacts.slice(0, maxItems).map((artifact) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      Button,
       {
         type: "button",
-        className: "flex min-w-0 items-center gap-2 rounded-md px-0.5 py-0.5 text-left text-sm outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default",
+        variant: "ghost",
+        className: "h-auto min-w-0 justify-start gap-2 px-0.5 py-0.5 text-left text-sm font-normal disabled:cursor-default",
         disabled: !onArtifactOpen || artifact.status === "loading",
         onClick: () => onArtifactOpen?.(artifact),
         children: [
@@ -2940,10 +3232,12 @@ function AgentWorkbenchArtifactSummary({
               }
             ) : null,
             onViewAll && !showAll && (outputs.length > maxItemsPerGroup || sources.length > maxItemsPerGroup) ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
+              Button,
               {
                 type: "button",
-                className: "flex min-h-8 items-center gap-2 rounded-md text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                variant: "ghost",
+                size: "sm",
+                className: "min-h-8 gap-2 px-0 text-sm text-muted-foreground hover:text-foreground",
                 onClick: onViewAll,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { className: "size-4", "aria-hidden": "true" }),
@@ -3080,20 +3374,24 @@ function AgentWorkbenchArtifactWorkspace({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-20 flex shrink-0 items-center gap-2", children: [
             activeArtifact.url ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                Button,
                 {
                   type: "button",
-                  className: "flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
                   "aria-label": messages.download({ name: activeArtifact.name }),
                   onClick: () => onIntent?.({ type: "download", artifactId: activeArtifact.id }),
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-4", "aria-hidden": "true" })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                Button,
                 {
                   type: "button",
-                  className: "flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
                   "aria-label": messages.openExternal({ name: activeArtifact.name }),
                   onClick: () => onIntent?.({ type: "open-external", artifactId: activeArtifact.id }),
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "size-4", "aria-hidden": "true" })
@@ -3101,10 +3399,12 @@ function AgentWorkbenchArtifactWorkspace({
               )
             ] }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              Button,
               {
                 type: "button",
-                className: "flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                variant: "ghost",
+                size: "icon",
+                className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
                 "aria-label": messages.closeWorkspace,
                 onClick: () => onIntent?.({ type: "close-workspace" }),
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { className: "size-4", "aria-hidden": "true" })