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

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

@@ -1,6 +1,6 @@
 import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, X, Paperclip, Mic, Send, Square, ShoppingBag, Code2, FileText, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, TerminalSquare, Clock3, FileOutput, Download, Loader2, CircleAlert, ListFilter, Link2, ExternalLink, PanelRightClose, Wrench, BookOpen, RefreshCw, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
-import * as React2 from 'react';
-import { createContext, useRef, useState, useMemo, useEffect, useContext } from 'react';
+import * as React5 from 'react';
+import { useImperativeHandle, createContext, useRef, useState, useMemo, useEffect, useContext } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -370,7 +370,118 @@ function cn(...parts) {
 function cn2(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
-var AccordionItem = React2.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
+var useAutosizeTextArea = ({
+  textAreaRef,
+  triggerAutoSize,
+  maxHeight = Number.MAX_SAFE_INTEGER,
+  minHeight = 0
+}) => {
+  const [init, setInit] = React5.useState(true);
+  React5.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.forwardRef(
+  ({
+    maxHeight = Number.MAX_SAFE_INTEGER,
+    minHeight = 52,
+    className,
+    onChange,
+    value,
+    onKeyDown,
+    onSubmit,
+    onCompositionStart: propsOnCompositionStart,
+    onCompositionEnd: propsOnCompositionEnd,
+    ...props
+  }, ref) => {
+    const textAreaRef = React5.useRef(null);
+    const [triggerAutoSize, setTriggerAutoSize] = React5.useState("");
+    const [isComposing, setIsComposing] = React5.useState(false);
+    const [compositionValue, setCompositionValue] = React5.useState("");
+    useAutosizeTextArea({
+      textAreaRef: textAreaRef.current,
+      triggerAutoSize,
+      maxHeight,
+      minHeight
+    });
+    useImperativeHandle(ref, () => ({
+      textArea: textAreaRef.current,
+      focus: () => textAreaRef.current?.focus(),
+      maxHeight,
+      minHeight
+    }));
+    React5.useEffect(() => {
+      setTriggerAutoSize(value);
+    }, [props?.defaultValue, value]);
+    const handleKeyDown = React5.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__ */ 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.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -383,7 +494,7 @@ var AccordionItem = React2.forwardRef(({ className, style, ...props }, ref) => /
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -405,7 +516,7 @@ var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -415,7 +526,7 @@ var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref
   }
 ));
 AccordionContent.displayName = "AccordionContent";
-var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -450,7 +561,7 @@ var buttonVariants = cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Button = React2.forwardRef(
+var Button = React5.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -464,7 +575,7 @@ var Button = React2.forwardRef(
   }
 );
 Button.displayName = "Button";
-var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive2.Content,
   {
     ref,
@@ -478,7 +589,7 @@ var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffse
   }
 ) }));
 PopoverContent.displayName = "PopoverContent";
-var ScrollArea = React2.forwardRef(
+var ScrollArea = React5.forwardRef(
   ({
     className,
     children,
@@ -522,7 +633,7 @@ var ScrollArea = React2.forwardRef(
   )
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React5.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -538,7 +649,7 @@ var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...pro
   }
 ));
 ScrollBar.displayName = "ScrollBar";
-var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitive.Root,
   {
     ref,
@@ -551,9 +662,9 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Switch.displayName = "Switch";
-var Tabs = React2.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, "data-variant": variant, ...props }));
+var Tabs = React5.forwardRef(({ variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, "data-variant": variant, ...props }));
 Tabs.displayName = "Tabs";
-var TabsList = React2.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React5.forwardRef(({ className, gap, style, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -566,7 +677,7 @@ var TabsList = React2.forwardRef(({ className, gap, style, ...props }, ref) => /
   }
 ));
 TabsList.displayName = "TabsList";
-var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -578,7 +689,7 @@ var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -590,7 +701,7 @@ var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsContent.displayName = "TabsContent";
-var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -603,67 +714,215 @@ var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, ...props },
   }
 ) }));
 TooltipContent.displayName = "TooltipContent";
+var Input = React5.forwardRef(({ className, appearance = "standard", type, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(({ className, appearance = "standard", ...props }, ref) => /* @__PURE__ */ 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__ */ 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 = 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__ */ 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 = 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__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+var InputGroupInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ 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.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
+var DropdownMenuSubTrigger = React5.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
   children,
   /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ml-auto" })
 ] }));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React2.forwardRef(
+var DropdownMenuSubContent = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuContent = React2.forwardRef(
+var DropdownMenuContent = React5.forwardRef(
   ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React2.forwardRef(
+var DropdownMenuItem = React5.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, className: cn(menuItemClassName, inset && "pl-8", className), ...props })
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React2.forwardRef(
+var DropdownMenuCheckboxItem = React5.forwardRef(
   ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, { ref, className: cn(menuItemClassName, "pl-8", className), checked, ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }),
     children
   ] })
 );
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React2.forwardRef(
+var DropdownMenuRadioItem = React5.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, { ref, className: cn(menuItemClassName, "pl-8", className), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }) }) }),
     children
   ] })
 );
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React2.forwardRef(
+var DropdownMenuLabel = React5.forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })
 );
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React2.forwardRef(
+var DropdownMenuSeparator = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React2.forwardRef(
-  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.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.forwardRef(
+  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.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__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 opacity-50", iconClassName) }) })
   ] })
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectScrollUpButton = React2.forwardRef(
+var SelectScrollUpButton = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollUpButton.displayName = "SelectScrollUpButton";
-var SelectScrollDownButton = React2.forwardRef(
+var SelectScrollDownButton = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4" }) })
 );
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
-var SelectContent = React2.forwardRef(
+var SelectContent = React5.forwardRef(
   ({ className, children, position = "popper", viewportClassName, disableTriggerViewportSizing = false, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.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__ */ jsx(SelectScrollUpButton, {}),
     /* @__PURE__ */ jsx(SelectPrimitive.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 }),
@@ -671,11 +930,11 @@ var SelectContent = React2.forwardRef(
   ] }) })
 );
 SelectContent.displayName = "SelectContent";
-var SelectLabel = React2.forwardRef(
+var SelectLabel = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })
 );
 SelectLabel.displayName = "SelectLabel";
-var SelectItem = React2.forwardRef(
+var SelectItem = React5.forwardRef(
   ({ className, children, indicatorClassName, itemText, hideIndicator = false, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, { ref, className: cn(menuItemClassName, "w-full", hideIndicator ? "px-2" : "pl-8 pr-2", className), ...props, children: [
     !hideIndicator ? /* @__PURE__ */ jsx("span", { className: cn("absolute left-2 flex h-3.5 w-3.5 items-center justify-center", indicatorClassName), children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }) : null,
     itemText ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -685,7 +944,7 @@ var SelectItem = React2.forwardRef(
   ] })
 );
 SelectItem.displayName = "SelectItem";
-var SelectSeparator = React2.forwardRef(
+var SelectSeparator = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 SelectSeparator.displayName = "SelectSeparator";
@@ -770,12 +1029,13 @@ function AgentWorkbenchComposer({
             children: /* @__PURE__ */ jsx("ol", { className: "space-y-1.5", children: viewModel.queuedDrafts.map((draft, index) => /* @__PURE__ */ 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__ */ jsx("span", { className: "w-5 shrink-0 text-center text-xs text-muted-foreground", children: index + 1 }),
               editingDraftId === draft.id ? /* @__PURE__ */ 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 });
@@ -813,7 +1073,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__ */ jsx(X, { className: "size-3" })
@@ -822,13 +1082,14 @@ function AgentWorkbenchComposer({
             /* @__PURE__ */ 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__ */ 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) {
@@ -862,28 +1123,30 @@ function AgentWorkbenchComposer({
                 messages.composer.webSearch,
                 /* @__PURE__ */ jsx(Switch, { checked: viewModel.webSearchEnabled, onCheckedChange: (enabled) => onIntent?.({ type: "toggle-web-search", enabled }) })
               ] }) : null,
-              modeSelectionEnabled ? /* @__PURE__ */ jsx(
-                "div",
+              modeSelectionEnabled ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(TabsContent, { value: mode, className: "hidden" }, mode))
+                  ]
                 }
               ) : null,
               viewModel.capabilities.modelSelection ? /* @__PURE__ */ jsx(
@@ -1183,7 +1446,7 @@ function CollectionState({
   if (status === "error") {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-8 text-center", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", role: "alert", children: error }),
-      /* @__PURE__ */ jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary", onClick: onRetry, children: [
+      /* @__PURE__ */ 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__ */ jsx(RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
         messages.retry
       ] })
@@ -1215,7 +1478,7 @@ function SessionActions({
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   if (!capabilities.renameSessions && !capabilities.deleteSessions) return null;
   return /* @__PURE__ */ jsxs(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "flex size-8 items-center justify-center rounded-md hover:bg-muted", "aria-label": messages.actions, children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", "aria-label": messages.actions, children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
       capabilities.renameSessions ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => onIntent?.({ type: "rename-session", sessionId: item.id, title: item.title }), children: [
         /* @__PURE__ */ jsx(Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }),
@@ -1291,12 +1554,13 @@ function AgentWorkbenchSidebar({
         /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(SessionAvatar, { item }) }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ 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),
@@ -1326,7 +1590,7 @@ function AgentWorkbenchSidebar({
           percent,
           "%"
         ] }) : /* @__PURE__ */ jsx(StatusIndicator, { status: item.status }),
-        viewModel.capabilities.pinSessions ? /* @__PURE__ */ 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__ */ 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__ */ jsx(Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
@@ -1344,17 +1608,17 @@ function AgentWorkbenchSidebar({
       className: "flex h-full min-h-0 flex-col bg-background text-foreground",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "shrink-0 space-y-3 p-4 pb-2", children: [
-          /* @__PURE__ */ 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__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
+            /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { className: "size-4", "aria-hidden": "true" }) }),
             /* @__PURE__ */ 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;
@@ -1363,7 +1627,7 @@ function AgentWorkbenchSidebar({
                 }
               }
             ),
-            viewModel.searchQuery ? /* @__PURE__ */ 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__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" })
+            viewModel.searchQuery ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(InputGroupButton, { size: "icon-xs", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
           ] }),
           !sessionsOnly || headerActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             !sessionsOnly ? /* @__PURE__ */ jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
@@ -1374,7 +1638,7 @@ function AgentWorkbenchSidebar({
           ] }) : null
         ] }),
         !sessionsOnly ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
             messages.newAgent
           ] }) : null,
@@ -1395,11 +1659,13 @@ function AgentWorkbenchSidebar({
                 ] }),
                 item.builtIn ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 py-1 text-[10px] text-foreground", children: messages.builtIn }) : null,
                 viewModel.capabilities.pinAgents ? /* @__PURE__ */ 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 });
@@ -1420,11 +1686,11 @@ function AgentWorkbenchSidebar({
           )) })
         ] }) : null,
         /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(SquarePen, { className: "size-4", "aria-hidden": "true" }),
             messages.newSession
           ] }) : null,
-          !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ 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__ */ 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__ */ jsx(Blocks, { className: "size-4", "aria-hidden": "true" }),
             messages.capabilities
           ] }) : null,
@@ -1441,7 +1707,7 @@ function AgentWorkbenchSidebar({
             renderSessionItems(items)
           ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
         ] }),
-        !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ 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__ */ jsx("div", { className: cn2("shrink-0 border-t border-border p-4", classNames?.footer), children: /* @__PURE__ */ 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__ */ jsx(Settings, { className: "size-4", "aria-hidden": "true" }),
           messages.settings
         ] }) }) : null
@@ -1852,10 +2118,11 @@ function AgentWorkbenchActivity({
                   event.payload.requestedAction !== void 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(JsonValue2, { value: event.payload.requestedAction }) }) : null,
                   requested ? /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
                     /* @__PURE__ */ 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,
@@ -1865,10 +2132,12 @@ function AgentWorkbenchActivity({
                       }
                     ),
                     /* @__PURE__ */ 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,
@@ -1900,10 +2169,12 @@ function AgentWorkbenchActivity({
                   /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: messages.artifact[event.payload.status] })
                 ] }),
                 event.payload.url ? /* @__PURE__ */ 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
                     }),
@@ -2171,20 +2442,23 @@ function SummaryPanel({
       error ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
         retryable ? /* @__PURE__ */ 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__ */ 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
@@ -2194,10 +2468,12 @@ function SummaryPanel({
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "flex flex-wrap gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground", children: [
       canContinueInNewTask ? /* @__PURE__ */ 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: [
@@ -2207,10 +2483,12 @@ function SummaryPanel({
         }
       ) : null,
       canEditAndRerun ? /* @__PURE__ */ 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: [
@@ -2220,10 +2498,12 @@ function SummaryPanel({
         }
       ) : null,
       /* @__PURE__ */ 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: [
@@ -2237,10 +2517,12 @@ function SummaryPanel({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: messages.summary }),
         summary?.payload.text ? /* @__PURE__ */ 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?.({
@@ -2255,10 +2537,12 @@ function SummaryPanel({
       summary?.payload.status === "failed" ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive-text", role: "alert", children: messages.summaryFailed }),
         /* @__PURE__ */ 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: [
@@ -2395,16 +2679,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__ */ jsxs(
     "aside",
     {
@@ -2421,54 +2695,71 @@ function AgentWorkbenchTaskDetails({
             /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: messages.description })
           ] }),
           onIntent ? /* @__PURE__ */ 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__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ 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__ */ jsxs(
-          "button",
+        /* @__PURE__ */ 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__ */ jsx("span", { className: "truncate", children: tab.label }),
-              /* @__PURE__ */ jsx(Count, { value: tab.count })
+              /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "truncate", children: tab.label }),
+                        /* @__PURE__ */ jsx(Count, { value: tab.count })
+                      ]
+                    },
+                    tab.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TabsContent,
+                {
+                  value: "summary",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsx(SummaryPanel, { model, onIntent })
+                }
+              ),
+              workspaceAvailable ? /* @__PURE__ */ jsx(
+                TabsContent,
+                {
+                  value: "workspace",
+                  className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto p-3", classNames?.body),
+                  children: /* @__PURE__ */ jsx(
+                    WorkspacePanel,
+                    {
+                      model,
+                      sectionClassName: classNames?.section,
+                      codeClassName: classNames?.code
+                    }
+                  )
+                }
+              ) : null
             ]
-          },
-          tab.id
-        )) }),
-        /* @__PURE__ */ 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__ */ jsx(SummaryPanel, { model, onIntent }) : /* @__PURE__ */ jsx(
-              WorkspacePanel,
-              {
-                model,
-                sectionClassName: classNames?.section,
-                codeClassName: classNames?.code
-              }
-            )
           }
         )
       ]
@@ -2831,10 +3122,11 @@ function ArtifactGroup({
   return /* @__PURE__ */ jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [
     /* @__PURE__ */ jsx("div", { role: "heading", "aria-level": 2, className: "text-sm font-medium text-muted-foreground", children: title }),
     artifacts.slice(0, maxItems).map((artifact) => /* @__PURE__ */ 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: [
@@ -2909,10 +3201,12 @@ function AgentWorkbenchArtifactSummary({
               }
             ) : null,
             onViewAll && !showAll && (outputs.length > maxItemsPerGroup || sources.length > maxItemsPerGroup) ? /* @__PURE__ */ 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__ */ jsx(Link2, { className: "size-4", "aria-hidden": "true" }),
@@ -3049,20 +3343,24 @@ function AgentWorkbenchArtifactWorkspace({
           /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex shrink-0 items-center gap-2", children: [
             activeArtifact.url ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ 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__ */ jsx(Download, { className: "size-4", "aria-hidden": "true" })
                 }
               ),
               /* @__PURE__ */ 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__ */ jsx(ExternalLink, { className: "size-4", "aria-hidden": "true" })
@@ -3070,10 +3368,12 @@ function AgentWorkbenchArtifactWorkspace({
               )
             ] }) : null,
             /* @__PURE__ */ 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__ */ jsx(PanelRightClose, { className: "size-4", "aria-hidden": "true" })