@inf-monkeys-tech/monkeys-design 1.0.11 → 1.0.12

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

@@ -1,11 +1,51 @@
 'use strict';
 
 var lucideReact = require('lucide-react');
-var react = require('react');
-require('@radix-ui/react-dropdown-menu');
+var React2 = require('react');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var reactSlot = require('@radix-ui/react-slot');
+var SwitchPrimitive = require('@radix-ui/react-switch');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var classVarianceAuthority = require('class-variance-authority');
+var SelectPrimitive = require('@radix-ui/react-select');
 
-// src/components/agent-workbench/AgentWorkbenchActivity.tsx
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+
+// src/components/agent-workbench/AgentWorkbenchSidebar.tsx
 
 // src/locale/en-US.ts
 var enUS = {
@@ -137,6 +177,38 @@ var enUS = {
         label: "Context usage",
         context: ({ used, total }) => `${used} / ${total} tokens`
       },
+      navigation: {
+        search: "Search agents and sessions",
+        searchShortcut: "Focus search",
+        clearSearch: "Clear search",
+        tabsLabel: "Agent workbench navigation",
+        agents: "Agents",
+        sessions: "Sessions",
+        newAgent: "New Agent",
+        newSession: "New Session",
+        capabilities: "Capabilities & Extensions",
+        settings: "Agent Settings",
+        allAgents: "All Agents",
+        recentSessions: "Recent Sessions",
+        builtIn: "Built-in",
+        noDescription: "No description",
+        loading: "Loading...",
+        emptyAgents: "No agents yet",
+        emptySessions: "No sessions yet",
+        noResults: "No matching results",
+        retry: "Retry",
+        pin: "Pin",
+        unpin: "Unpin",
+        rename: "Rename",
+        delete: "Delete",
+        actions: "Actions",
+        save: "Save",
+        cancel: "Cancel",
+        running: "Running",
+        completed: "Completed",
+        failed: "Failed",
+        contextUsage: ({ percent }) => `${percent}% context used`
+      },
       details: {
         title: "Task details",
         description: "Summary and workspace activity",
@@ -205,17 +277,17 @@ var MONKEYS_PROVIDER_CONTEXTS_KEY = /* @__PURE__ */ Symbol.for(
 );
 function createMonkeysProviderContexts() {
   return Object.freeze({
-    locale: react.createContext({
+    locale: React2.createContext({
       ...defaultMonkeysLocale,
       provided: false
     }),
-    theme: react.createContext({
+    theme: React2.createContext({
       provided: false
     }),
-    direction: react.createContext({
+    direction: React2.createContext({
       provided: false
     }),
-    environment: react.createContext({
+    environment: React2.createContext({
       provided: false,
       environment: EMPTY_ENVIRONMENT,
       portal: EMPTY_PORTAL
@@ -241,14 +313,567 @@ providerContexts.theme;
 providerContexts.direction;
 providerContexts.environment;
 function useMonkeysLocale() {
-  return react.useContext(MonkeysLocaleContext);
+  return React2.useContext(MonkeysLocaleContext);
 }
 function useMonkeysLocaleMessages() {
-  return react.useContext(MonkeysLocaleContext).messages;
+  return React2.useContext(MonkeysLocaleContext).messages;
 }
-function cn(...inputs) {
+function cn(...parts) {
+  return tailwindMerge.twMerge(parts.filter(Boolean).join(" "));
+}
+function cn2(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
+var AccordionItem = React2__namespace.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn("border-b", className),
+    style: {
+      borderColor: "var(--monkeys-component-accordion-item-border-color, hsl(var(--border)))",
+      ...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(
+  AccordionPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: "h-4 w-4 shrink-0 transition-transform duration-200"
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pb-4 pt-0", className), children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+var Checkbox = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "h-4 w-4" }) })
+  }
+));
+Checkbox.displayName = "Checkbox";
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-sm px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+var Button = React2__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: buttonVariants({ variant, size, className }),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var PopoverContent = React2__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+var ScrollArea = React2__namespace.forwardRef(
+  ({
+    className,
+    children,
+    viewportClassName,
+    viewportRef,
+    onViewportScroll,
+    scrollbar = true,
+    scrollbarOrientation = "vertical",
+    scrollBarDisabled = false,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    {
+      ref,
+      className: cn(
+        "group relative overflow-hidden",
+        scrollBarDisabled && "no-scrollbar",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollAreaPrimitive__namespace.Viewport,
+          {
+            ref: viewportRef,
+            onScroll: onViewportScroll,
+            className: cn("h-full w-full rounded-[inherit]", viewportClassName),
+            children
+          }
+        ),
+        scrollbar ? /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollBar,
+          {
+            orientation: scrollbarOrientation,
+            className: cn(scrollBarDisabled && "size-0 p-0")
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    }
+  )
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollBar = React2__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 data-[state=visible]:opacity-100",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = "ScrollBar";
+var Switch = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SwitchPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitive__namespace.Thumb, { className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" })
+  }
+));
+Switch.displayName = "Switch";
+var Tabs = React2__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(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    style: { gap, ...style },
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  TooltipPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+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-popover 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: [
+  children,
+  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "ml-auto" })
+] }));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = React2__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(
+  ({ 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(
+  ({ 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(
+  ({ 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(
+  ({ 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(
+  ({ 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(
+  ({ 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 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-background px-3 py-2 text-left text-sm shadow-sm ring-offset-background 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(
+  ({ 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(
+  ({ 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(
+  ({ 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 }),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+  ] }) })
+);
+SelectContent.displayName = "SelectContent";
+var SelectLabel = React2__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(
+  ({ 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: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: itemText }) }),
+      children
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+  ] })
+);
+SelectItem.displayName = "SelectItem";
+var SelectSeparator = React2__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";
+function ItemAvatar({ item }) {
+  const [failed, setFailed] = React2.useState(false);
+  if (item.iconUrl && !failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconUrl, alt: "", className: "size-full object-cover", onError: () => setFailed(true) });
+  }
+  const initial = item.name.trim().charAt(0).toLocaleUpperCase();
+  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);
+  if (item.thumbnailUrl && !failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: item.thumbnailUrl,
+        alt: "",
+        className: "size-full object-cover",
+        loading: "lazy",
+        onError: () => setFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "size-5", "aria-hidden": "true" });
+}
+function CollectionState({
+  status,
+  empty,
+  noResults,
+  hasItems,
+  query,
+  error,
+  onRetry
+}) {
+  const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
+  if (status === "loading" && !hasItems) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: messages.loading });
+  }
+  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.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
+        messages.retry
+      ] })
+    ] });
+  }
+  if (!hasItems) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: query ? noResults : empty });
+  }
+  return null;
+}
+function StatusIndicator({ status }) {
+  const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
+  if (status === "running") {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin text-primary", "aria-label": messages.running });
+  }
+  if (status === "completed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "size-4 text-primary", "aria-label": messages.completed });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "size-4 text-destructive-text", "aria-label": messages.failed });
+  }
+  return null;
+}
+function SessionActions({
+  item,
+  capabilities,
+  onIntent
+}) {
+  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.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" }),
+        messages.rename
+      ] }) : null,
+      capabilities.deleteSessions ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: "text-destructive-text", onSelect: () => onIntent?.({ type: "delete-session", sessionId: item.id }), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }),
+        messages.delete
+      ] }) : null
+    ] })
+  ] });
+}
+function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
+  const { locale } = useMonkeysLocale();
+  const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
+  const searchRef = React2.useRef(null);
+  const query = viewModel.searchQuery.trim().toLocaleLowerCase();
+  const agents = React2.useMemo(
+    () => viewModel.agents.items.filter((item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)),
+    [query, viewModel.agents.items]
+  );
+  const sessions = React2.useMemo(
+    () => viewModel.sessions.items.filter((item) => !query || item.title.toLocaleLowerCase().includes(query)),
+    [query, viewModel.sessions.items]
+  );
+  React2.useEffect(() => {
+    const handleShortcut = (event) => {
+      if (!(event.ctrlKey || event.metaKey) || event.key.toLocaleLowerCase() !== "k") return;
+      event.preventDefault();
+      searchRef.current?.focus();
+      searchRef.current?.select();
+    };
+    window.addEventListener("keydown", handleShortcut);
+    return () => window.removeEventListener("keydown", handleShortcut);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": messages.tabsLabel, className: cn2("h-full min-h-0", classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Tabs,
+    {
+      value: viewModel.activeTab,
+      onValueChange: (value) => {
+        if (value === "agents" || value === "sessions") onIntent?.({ type: "change-tab", tab: value });
+      },
+      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.jsx(
+              "input",
+              {
+                ref: searchRef,
+                type: "search",
+                value: viewModel.searchQuery,
+                "aria-label": messages.search,
+                placeholder: messages.search,
+                className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+                onChange: (event) => onIntent?.({ type: "change-search", query: event.target.value }),
+                onKeyDown: (event) => {
+                  if (event.key !== "Escape") return;
+                  onIntent?.({ type: "change-search", query: "" });
+                  event.currentTarget.blur();
+                }
+              }
+            ),
+            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" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: cn2("grid w-full grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "agents", children: messages.agents }),
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "sessions", children: messages.sessions })
+          ] })
+        ] }),
+        /* @__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: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4", "aria-hidden": "true" }),
+            messages.newAgent
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.allAgents }),
+          /* @__PURE__ */ jsxRuntime.jsx(CollectionState, { status: viewModel.agents.status, empty: messages.emptyAgents, noResults: messages.noResults, hasItems: agents.length > 0, query, error: viewModel.agents.error, onRetry: () => onIntent?.({ type: "retry-agents" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: agents.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "aria-current": item.id === viewModel.selectedAgentItem ? "page" : void 0,
+              className: cn2("group flex w-full items-center gap-3 rounded-lg border border-transparent px-3 py-2 text-left hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-muted", classNames?.item),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-3 text-left", onClick: () => onIntent?.({ type: "select-agent", itemId: item.id }), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(ItemAvatar, { item }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm font-medium", children: item.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-foreground/80", children: item.description || messages.noDescription })
+                  ] })
+                ] }),
+                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",
+                  {
+                    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) => {
+                      event.stopPropagation();
+                      onIntent?.({ type: "toggle-agent-pin", itemId: item.id, pinned: !item.pinned });
+                    },
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onIntent?.({ type: "toggle-agent-pin", itemId: item.id, pinned: !item.pinned });
+                      }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn2("size-4", item.pinned && "fill-current", item.pinPending && "animate-pulse") })
+                  }
+                ) : null
+              ]
+            },
+            item.id
+          )) })
+        ] }),
+        /* @__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: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
+            messages.newSession
+          ] }) : null,
+          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: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Blocks, { className: "size-4", "aria-hidden": "true" }),
+            messages.capabilities
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }),
+          /* @__PURE__ */ jsxRuntime.jsx(CollectionState, { status: viewModel.sessions.status, empty: messages.emptySessions, noResults: messages.noResults, hasItems: sessions.length > 0, query, error: viewModel.sessions.error, onRetry: () => onIntent?.({ type: "retry-sessions" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: sessions.map((item) => {
+            const percent = item.contextUsage ? Math.min(100, Math.round(item.contextUsage.usedTokens / item.contextUsage.maxTokens * 100)) : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-current": item.id === viewModel.selectedSessionItem ? "page" : void 0, className: cn2("group flex w-full items-center gap-3 rounded-lg border border-transparent px-3 py-2 text-left hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-muted", classNames?.item), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-3 text-left", onClick: () => onIntent?.({ type: "select-session", sessionId: item.id }), children: [
+                /* @__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("span", { className: "block truncate text-sm font-medium", children: item.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-foreground/80", children: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(new Date(item.updatedAt)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                percent !== void 0 && item.status === "idle" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-foreground", "aria-label": messages.contextUsage({ percent }), children: [
+                  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) => {
+                  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,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SessionActions, { item, capabilities: viewModel.capabilities, onIntent }) })
+              ] })
+            ] }, item.id);
+          }) })
+        ] }),
+        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: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4", "aria-hidden": "true" }),
+          messages.settings
+        ] }) }) : null
+      ]
+    }
+  ) });
+}
 
 // src/components/agent-workbench/activity-model.ts
 var EVENT_CAPABILITIES = {
@@ -347,7 +972,7 @@ function JsonValue({ value, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "pre",
     {
-      className: cn(
+      className: cn2(
         "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted p-3 font-mono text-xs text-foreground",
         className
       ),
@@ -362,12 +987,12 @@ function ToolStatus({ status }) {
     return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock3, { className: commonClassName, "aria-hidden": "true" });
   }
   if (status === "running") {
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: cn(commonClassName, "animate-spin"), "aria-hidden": "true" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: cn2(commonClassName, "animate-spin"), "aria-hidden": "true" });
   }
   if (status === "completed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: cn(commonClassName, "text-primary"), "aria-hidden": "true" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: cn2(commonClassName, "text-primary"), "aria-hidden": "true" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: cn(commonClassName, "text-destructive-text"), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: cn2(commonClassName, "text-destructive-text"), "aria-hidden": "true" });
 }
 function AgentWorkbenchTool({
   event,
@@ -378,7 +1003,7 @@ function AgentWorkbenchTool({
   onExpandedChange
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench.tool;
-  const [uncontrolledExpanded, setUncontrolledExpanded] = react.useState(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = React2.useState(defaultExpanded);
   const isControlled = expanded !== void 0;
   const isExpanded = expanded ?? uncontrolledExpanded;
   const status = event.payload.status;
@@ -390,7 +1015,7 @@ function AgentWorkbenchTool({
     "details",
     {
       open: isExpanded,
-      className: cn(
+      className: cn2(
         "group rounded-lg border border-border bg-card text-card-foreground",
         classNames?.root,
         className
@@ -400,7 +1025,7 @@ function AgentWorkbenchTool({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "summary",
           {
-            className: cn(
+            className: cn2(
               "flex cursor-pointer list-none items-center gap-2 px-3 py-2.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden",
               classNames?.trigger
             ),
@@ -411,7 +1036,7 @@ function AgentWorkbenchTool({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TerminalSquare, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: event.payload.toolName }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-foreground", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ToolStatus, { status }),
                 messages.status[status]
               ] }),
@@ -425,7 +1050,7 @@ function AgentWorkbenchTool({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3 border-t border-border px-3 py-3 text-sm", classNames?.content), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn2("space-y-3 border-t border-border px-3 py-3 text-sm", classNames?.content), children: [
           event.payload.input !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground", children: messages.input }),
             /* @__PURE__ */ jsxRuntime.jsx(JsonValue, { value: event.payload.input, className: classNames?.input })
@@ -441,7 +1066,7 @@ function AgentWorkbenchTool({
   );
 }
 function ActivityDetails({
-  icon: Icon,
+  icon: Icon2,
   title,
   open,
   streaming,
@@ -453,7 +1078,7 @@ function ActivityDetails({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "details",
     {
-      className: cn(
+      className: cn2(
         "group rounded-lg border border-border bg-card text-card-foreground",
         className
       ),
@@ -462,12 +1087,12 @@ function ActivityDetails({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "summary",
           {
-            className: cn(
+            className: cn2(
               "flex cursor-pointer list-none items-center gap-2 px-3 py-2.5 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden",
               triggerClassName
             ),
             children: [
-              streaming ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+              streaming ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: title }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.ChevronDown,
@@ -482,7 +1107,7 @@ function ActivityDetails({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
+            className: cn2(
               "border-t border-border px-3 py-3 text-sm",
               contentClassName
             ),
@@ -567,7 +1192,7 @@ function AgentWorkbenchActivity({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: cn("space-y-3", classNames?.root, className),
+      className: cn2("space-y-3", classNames?.root, className),
       "aria-label": messages.label,
       "data-agent-workbench-mode": activity.mode,
       "data-agent-workbench-status": activity.status,
@@ -639,7 +1264,7 @@ function AgentWorkbenchActivity({
           return /* @__PURE__ */ jsxRuntime.jsx(
             "article",
             {
-              className: cn(
+              className: cn2(
                 "rounded-lg border border-border bg-card p-3 text-card-foreground",
                 classNames?.approval
               ),
@@ -688,7 +1313,7 @@ function AgentWorkbenchActivity({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "article",
             {
-              className: cn(
+              className: cn2(
                 "flex items-center gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground",
                 classNames?.artifact
               ),
@@ -727,9 +1352,9 @@ function AgentWorkbenchActivity({
         usage && contextWindow !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("flex justify-end", classNames?.usage),
+            className: cn2("flex justify-end", classNames?.usage),
             "aria-label": messages.usage.label,
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full border border-border bg-muted px-2.5 py-1 text-xs text-muted-foreground", children: messages.usage.context({
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full border border-border bg-muted px-2.5 py-1 text-xs text-foreground", children: messages.usage.context({
               used: usage.contextTokens ?? usage.totalTokens ?? 0,
               total: contextWindow
             }) })
@@ -846,12 +1471,12 @@ function formatDate(value, locale) {
   }).format(date);
 }
 function Count({ value }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground", children: value });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-foreground", children: value });
 }
 function DetailsSection({
   title,
   count,
-  icon: Icon,
+  icon: Icon2,
   className,
   children
 }) {
@@ -859,14 +1484,14 @@ function DetailsSection({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "details",
     {
-      className: cn(
+      className: cn2(
         "group rounded-lg border border-border bg-card text-card-foreground",
         className
       ),
       open: true,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-2 px-3 py-2.5 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: title }),
           /* @__PURE__ */ jsxRuntime.jsx(Count, { value: count }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1033,7 +1658,7 @@ function WorkspacePanel({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: event.payload.path }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: messages.diffStatus[event.payload.status] })
           ] }),
-          event.payload.patch ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn("mt-2 max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", codeClassName), children: event.payload.patch }) : null
+          event.payload.patch ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn2("mt-2 max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", codeClassName), children: event.payload.patch }) : null
         ] }, event.payload.path)) })
       }
     ),
@@ -1063,7 +1688,7 @@ function WorkspacePanel({
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: terminal.terminalId }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: terminal.exitCode === void 0 ? terminal.status : messages.exitCode({ code: terminal.exitCode }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn("mt-2 max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", codeClassName), children: [terminal.stdin, terminal.stdout, terminal.stderr].filter(Boolean).join("\n") })
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn2("mt-2 max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", codeClassName), children: [terminal.stdin, terminal.stdout, terminal.stderr].filter(Boolean).join("\n") })
         ] }, terminal.terminalId)) })
       }
     ),
@@ -1080,7 +1705,7 @@ function WorkspacePanel({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: event.payload.name }),
             event.payload.durationMs === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: formatDuration2(event.payload.durationMs) })
           ] }),
-          event.payload.output ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn("mt-2 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", codeClassName), children: event.payload.output }) : null
+          event.payload.output ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn2("mt-2 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs", codeClassName), children: event.payload.output }) : null
         ] }, event.payload.testId)) })
       }
     ),
@@ -1111,10 +1736,10 @@ function AgentWorkbenchTaskDetails({
 }) {
   const messages = useMonkeysLocaleMessages().agentWorkbench.details;
   if (state !== "ready") {
-    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("flex h-full min-h-0 flex-col border-l border-border bg-background", classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(StateContent, { state }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn2("flex h-full min-h-0 flex-col border-l border-border bg-background", classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(StateContent, { state }) });
   }
   if (!viewModel) {
-    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("flex h-full min-h-0 flex-col border-l border-border bg-background", classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(StateContent, { state: "empty" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn2("flex h-full min-h-0 flex-col border-l border-border bg-background", classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(StateContent, { state: "empty" }) });
   }
   const model = createAgentWorkbenchDetailsModel(viewModel);
   const workspaceCount = Object.values(model.workspace).reduce(
@@ -1140,14 +1765,14 @@ function AgentWorkbenchTaskDetails({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
-      className: cn(
+      className: cn2(
         "flex h-full min-h-0 min-w-0 flex-col border-l border-border bg-background text-foreground",
         classNames?.root,
         className
       ),
       "data-agent-workbench-mode": model.mode,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex shrink-0 items-center gap-2 border-b border-border px-4 py-3", classNames?.header), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn2("flex shrink-0 items-center gap-2 border-b border-border px-4 py-3", classNames?.header), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "truncate text-sm font-semibold", children: messages.title }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: messages.description })
@@ -1163,7 +1788,7 @@ function AgentWorkbenchTaskDetails({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("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(
+        /* @__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",
           {
             id: tabId(tab.id),
@@ -1172,7 +1797,7 @@ function AgentWorkbenchTaskDetails({
             "aria-selected": resolvedTab === tab.id,
             "aria-controls": `${tabId(tab.id)}-panel`,
             tabIndex: resolvedTab === tab.id ? 0 : -1,
-            className: cn(
+            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"
             ),
@@ -1192,7 +1817,7 @@ function AgentWorkbenchTaskDetails({
             role: "tabpanel",
             "aria-labelledby": tabId(resolvedTab),
             tabIndex: 0,
-            className: cn("min-h-0 flex-1 overflow-y-auto p-3 outline-none", classNames?.body),
+            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,
               {
@@ -1209,6 +1834,7 @@ function AgentWorkbenchTaskDetails({
 }
 
 exports.AgentWorkbenchActivity = AgentWorkbenchActivity;
+exports.AgentWorkbenchSidebar = AgentWorkbenchSidebar;
 exports.AgentWorkbenchTaskDetails = AgentWorkbenchTaskDetails;
 exports.AgentWorkbenchTool = AgentWorkbenchTool;
 exports.createAgentWorkbenchActivityModel = createAgentWorkbenchActivityModel;