@inf-monkeys-tech/monkeys-design 1.0.77 → 1.0.78

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

@@ -1517,13 +1517,74 @@ var AgentWorkbenchSidebarContainer = React5.forwardRef(
   }
 );
 AgentWorkbenchSidebarContainer.displayName = "AgentWorkbenchSidebarContainer";
-function ItemAvatar({ item }) {
-  const [failed, setFailed] = React5.useState(false);
-  if (item.iconUrl && !failed) {
-    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconUrl, alt: "", className: "size-full object-cover", onError: () => setFailed(true) });
-  }
-  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 AgentWorkbenchSidebarSearch({
+  value,
+  label,
+  placeholder = label,
+  className,
+  onChange
+}) {
+  const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
+  const searchRef = React5.useRef(null);
+  React5.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.jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputGroupInput,
+      {
+        ref: searchRef,
+        type: "search",
+        value,
+        "aria-label": label,
+        placeholder,
+        className: "min-w-0 [&::-webkit-search-cancel-button]:hidden",
+        onChange: (event) => onChange(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key !== "Escape") return;
+          onChange("");
+          event.currentTarget.blur();
+        }
+      }
+    ),
+    value ? /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      InputGroupButton,
+      {
+        size: "icon-xs",
+        "aria-label": messages.clearSearch,
+        onClick: () => onChange(""),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" })
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
+  ] });
+}
+function AgentWorkbenchSidebarNewSessionButton({
+  label,
+  className,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      className: cn2("h-9 w-full justify-start gap-2 px-3 text-sm", className),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
+        label
+      ]
+    }
+  );
 }
 function SessionAvatar({ item }) {
   const [failed, setFailed] = React5.useState(false);
@@ -1541,13 +1602,329 @@ function SessionAvatar({ item }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "size-5", "aria-hidden": "true" });
 }
-function SessionMeta({ item, locale }) {
+function SessionMeta({ item }) {
+  const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-xs text-foreground/80", children: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(new Date(item.updatedAt)) }),
-    item.mode ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn2("shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none", item.mode === "work" ? "bg-primary/10 text-primary" : "bg-muted text-foreground"), children: item.mode === "work" ? messages.work : messages.chat }) : null
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-xs text-foreground/80", children: new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short"
+    }).format(new Date(item.updatedAt)) }),
+    item.mode ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn2(
+          "shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none",
+          item.mode === "work" ? "bg-primary/10 text-primary" : "bg-muted text-foreground"
+        ),
+        children: item.mode === "work" ? messages.work : messages.chat
+      }
+    ) : 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 AgentWorkbenchSessionList({
+  sessions,
+  selectedSessionId,
+  status = "ready",
+  error,
+  query = "",
+  emptyLabel,
+  noResultsLabel,
+  retryLabel,
+  groupByMode = false,
+  showHeading = false,
+  className,
+  itemClassName,
+  capabilities,
+  onSelect,
+  onTogglePin,
+  onRename,
+  onDelete,
+  onRetry
+}) {
+  const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
+  const renameInputRef = React5.useRef(null);
+  const [editingSessionId, setEditingSessionId] = React5.useState();
+  const [editingTitle, setEditingTitle] = React5.useState("");
+  React5.useEffect(() => {
+    if (!editingSessionId) return;
+    renameInputRef.current?.focus();
+    renameInputRef.current?.select();
+  }, [editingSessionId]);
+  const cancelRename = () => {
+    setEditingSessionId(void 0);
+    setEditingTitle("");
+  };
+  const saveRename = (item) => {
+    const title = editingTitle.trim();
+    if (title && title !== item.title) onRename?.(item.id, title);
+    cancelRename();
+  };
+  if (status === "loading" && sessions.length === 0) {
+    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: "max-w-full break-words text-sm text-muted-foreground",
+          role: "alert",
+          children: error
+        }
+      ),
+      onRetry ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "gap-1.5 px-0 text-sm text-primary hover:text-primary",
+          onClick: onRetry,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
+            retryLabel ?? messages.retry
+          ]
+        }
+      ) : null
+    ] });
+  }
+  if (sessions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: query ? noResultsLabel : emptyLabel });
+  }
+  const renderItems = (items) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: items.map((item) => {
+    const percent = item.contextUsage && item.contextUsage.maxTokens > 0 ? Math.min(
+      100,
+      Math.round(
+        item.contextUsage.usedTokens / item.contextUsage.maxTokens * 100
+      )
+    ) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "aria-current": item.id === selectedSessionId ? "page" : void 0,
+        className: cn2(
+          "group flex w-full min-w-0 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",
+          itemClassName
+        ),
+        children: [
+          editingSessionId === item.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", 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(
+                Input,
+                {
+                  ref: renameInputRef,
+                  value: editingTitle,
+                  "aria-label": messages.rename,
+                  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: () => saveRename(item),
+                  onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      saveRename(item);
+                    } else if (event.key === "Escape") {
+                      event.preventDefault();
+                      cancelRename();
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(SessionMeta, { item })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              title: item.title,
+              className: "flex min-w-0 flex-1 items-center gap-3 text-left",
+              onClick: () => onSelect(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(SessionMeta, { item })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-agent-workbench-item-actions": true,
+              className: "flex shrink-0 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 }),
+                capabilities?.pin ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": item.pinned ? messages.unpin : messages.pin,
+                    className: cn2(
+                      "size-8 text-muted-foreground opacity-0 group-hover:opacity-100",
+                      item.pinned && "text-primary opacity-100"
+                    ),
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      onTogglePin?.(item.id, !item.pinned);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.Pin,
+                      {
+                        className: cn2("size-4", item.pinned && "fill-current")
+                      }
+                    )
+                  }
+                ) : null,
+                capabilities?.rename || capabilities?.delete ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    onClick: (event) => event.stopPropagation(),
+                    onKeyDown: (event) => event.stopPropagation(),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "icon",
+                          className: "size-8",
+                          "aria-label": messages.actions,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", children: [
+                        capabilities.rename ? /* @__PURE__ */ jsxRuntime.jsxs(
+                          DropdownMenuItem,
+                          {
+                            onSelect: () => {
+                              setEditingSessionId(item.id);
+                              setEditingTitle(item.title);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                              messages.rename
+                            ]
+                          }
+                        ) : null,
+                        capabilities.delete ? /* @__PURE__ */ jsxRuntime.jsxs(
+                          DropdownMenuItem,
+                          {
+                            className: "text-destructive-text",
+                            onSelect: () => onDelete?.(item.id),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                              messages.delete
+                            ]
+                          }
+                        ) : null
+                      ] })
+                    ] })
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn2("space-y-2", className), children: [
+    showHeading && !groupByMode ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }) : null,
+    groupByMode ? [
+      {
+        id: "chatbot",
+        label: messages.chats,
+        icon: lucideReact.MessageSquare,
+        items: sessions.filter((item) => item.mode !== "work")
+      },
+      {
+        id: "agent",
+        label: messages.agents,
+        icon: lucideReact.Bot,
+        items: sessions.filter((item) => item.mode === "work")
+      }
+    ].map(({ id, label, icon: Icon2, items }) => /* @__PURE__ */ jsxRuntime.jsxs("details", { open: true, "aria-label": label, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex h-9 cursor-pointer list-none items-center gap-2 rounded-md px-3 text-sm font-semibold hover:bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon2,
+          {
+            className: "size-4 shrink-0 text-muted-foreground",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: label })
+      ] }),
+      renderItems(items)
+    ] }, id)) : renderItems(sessions)
+  ] });
+}
+function ItemAvatar({ item }) {
+  const [failed, setFailed] = React5.useState(false);
+  if (item.iconUrl && !failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: item.iconUrl,
+        alt: "",
+        className: "size-full object-cover",
+        onError: () => setFailed(true)
+      }
+    );
+  }
+  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 CollectionState({
   status,
   empty,
@@ -1563,11 +1940,28 @@ function CollectionState({
   }
   if (status === "error") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-8 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-full break-words text-sm text-muted-foreground", role: "alert", children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5 px-0 text-sm text-primary hover:text-primary", onClick: onRetry, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
-        messages.retry
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "max-w-full break-words text-sm text-muted-foreground",
+          role: "alert",
+          children: error
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "gap-1.5 px-0 text-sm text-primary hover:text-primary",
+          onClick: onRetry,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
+            messages.retry
+          ]
+        }
+      )
     ] });
   }
   if (!hasItems) {
@@ -1575,40 +1969,6 @@ function CollectionState({
   }
   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", variant: "ghost", size: "icon", className: "size-8", "aria-label": messages.actions, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", children: [
-      capabilities.renameSessions ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onSelect: () => onIntent?.({ type: "rename-session", sessionId: item.id, title: item.title }), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }),
-        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,
   navigationMode,
@@ -1620,115 +1980,38 @@ function AgentWorkbenchSidebar({
   classNames,
   onIntent
 }) {
-  const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
-  const resolvedConfig = React5.useMemo(() => monkeys.resolveAgentWorkbenchSidebarConfig(config), [config]);
-  const visibleSections = React5.useMemo(() => new Set(resolvedConfig.visibleSections), [resolvedConfig.visibleSections]);
+  const resolvedConfig = React5.useMemo(
+    () => monkeys.resolveAgentWorkbenchSidebarConfig(config),
+    [config]
+  );
+  const visibleSections = React5.useMemo(
+    () => new Set(resolvedConfig.visibleSections),
+    [resolvedConfig.visibleSections]
+  );
   const sessionsOnly = navigationMode === "sessions-only" || navigationMode === void 0 && resolvedConfig.navigationMode !== "default";
   const showAgents = visibleSections.has("agents") && !sessionsOnly;
   const showSessions = visibleSections.has("sessions");
-  const searchRef = React5.useRef(null);
-  const renameInputRef = React5.useRef(null);
-  const [editingSessionId, setEditingSessionId] = React5.useState();
-  const [editingTitle, setEditingTitle] = React5.useState("");
   const query = viewModel.searchQuery.trim().toLocaleLowerCase();
   const agents = React5.useMemo(
-    () => viewModel.agents.items.filter((item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)),
+    () => viewModel.agents.items.filter(
+      (item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)
+    ),
     [query, viewModel.agents.items]
   );
   const sessions = React5.useMemo(
-    () => viewModel.sessions.items.filter((item) => !query || item.title.toLocaleLowerCase().includes(query)),
+    () => viewModel.sessions.items.filter(
+      (item) => !query || item.title.toLocaleLowerCase().includes(query)
+    ),
     [query, viewModel.sessions.items]
   );
-  const chatbotSessions = React5.useMemo(() => sessions.filter((item) => item.mode !== "work"), [sessions]);
-  const agentSessions = React5.useMemo(() => sessions.filter((item) => item.mode === "work"), [sessions]);
-  React5.useEffect(() => {
-    const handleShortcut = (event) => {
-      if (!(event.ctrlKey || event.metaKey) || event.key.toLocaleLowerCase() !== "k") return;
-      event.preventDefault();
-      searchRef.current?.focus();
-      searchRef.current?.select();
-    };
-    window.addEventListener("keydown", handleShortcut);
-    return () => window.removeEventListener("keydown", handleShortcut);
-  }, []);
-  React5.useEffect(() => {
-    if (!editingSessionId) return;
-    renameInputRef.current?.focus();
-    renameInputRef.current?.select();
-  }, [editingSessionId]);
-  const beginRenameSession = (item) => {
-    setEditingSessionId(item.id);
-    setEditingTitle(item.title);
-  };
-  const cancelRenameSession = () => {
-    setEditingSessionId(void 0);
-    setEditingTitle("");
-  };
-  const saveRenameSession = (item) => {
-    const title = editingTitle.trim();
-    if (title && title !== item.title) {
-      onIntent?.({ type: "rename-session", sessionId: item.id, title });
-    }
-    cancelRenameSession();
-  };
-  const renderSessionItems = (items) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: items.map((item) => {
-    const percent = item.contextUsage && item.contextUsage.maxTokens > 0 ? 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 min-w-0 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: [
-      editingSessionId === item.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", 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(
-            Input,
-            {
-              ref: renameInputRef,
-              value: editingTitle,
-              "aria-label": messages.rename,
-              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),
-              onKeyDown: (event) => {
-                event.stopPropagation();
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  saveRenameSession(item);
-                } else if (event.key === "Escape") {
-                  event.preventDefault();
-                  cancelRenameSession();
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SessionMeta, { item, locale })
-        ] })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", title: item.title, 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(SessionMeta, { item, locale })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-agent-workbench-item-actions": true, className: "flex shrink-0 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", variant: "ghost", size: "icon", "aria-label": item.pinned ? messages.unpin : messages.pin, className: cn2("size-8 text-muted-foreground opacity-0 group-hover:opacity-100", item.pinned && "text-primary opacity-100"), onClick: (event) => {
-          event.stopPropagation();
-          onIntent?.({ type: "toggle-session-pin", sessionId: item.id, pinned: !item.pinned });
-        }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SessionActions, { item, capabilities: viewModel.capabilities, onIntent: (intent) => intent.type === "rename-session" ? beginRenameSession(item) : onIntent?.(intent) }) })
-      ] })
-    ] }, item.id);
-  }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tabs,
     {
       value: sessionsOnly || !showAgents ? "sessions" : viewModel.activeTab,
       onValueChange: (value) => {
-        if (!sessionsOnly && (value === "agents" || value === "sessions")) onIntent?.({ type: "change-tab", tab: value });
+        if (!sessionsOnly && (value === "agents" || value === "sessions"))
+          onIntent?.({ type: "change-tab", tab: value });
       },
       className: "h-full min-h-0",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1737,115 +2020,230 @@ function AgentWorkbenchSidebar({
           "data-sidebar-width-percent": resolvedConfig.widthPercent,
           "aria-label": messages.tabsLabel,
           header: visibleSections.has("header") ? header : void 0,
-          search: visibleSections.has("search") ? /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4", "aria-hidden": "true" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              InputGroupInput,
+          search: visibleSections.has("search") ? /* @__PURE__ */ jsxRuntime.jsx(
+            AgentWorkbenchSidebarSearch,
+            {
+              value: viewModel.searchQuery,
+              label: sessionsOnly ? messages.searchSessions : messages.search,
+              className: classNames?.search,
+              onChange: (query2) => onIntent?.({ type: "change-search", query: query2 })
+            }
+          ) : void 0,
+          actions: showAgents && showSessions || headerActions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            showAgents && showSessions ? /* @__PURE__ */ jsxRuntime.jsxs(
+              TabsList,
               {
-                ref: searchRef,
-                type: "search",
-                value: viewModel.searchQuery,
-                "aria-label": sessionsOnly ? messages.searchSessions : messages.search,
-                placeholder: sessionsOnly ? messages.searchSessions : messages.search,
-                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;
-                  onIntent?.({ type: "change-search", query: "" });
-                  event.currentTarget.blur();
-                }
+                className: cn2(
+                  "grid min-w-0 flex-1 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 })
+                ]
               }
-            ),
-            viewModel.searchQuery ? /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(InputGroupButton, { size: "icon-xs", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
-          ] }) : void 0,
-          actions: showAgents && showSessions || headerActions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            showAgents && showSessions ? /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 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 })
-            ] }) : null,
+            ) : null,
             headerActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: headerActions }) : null
           ] }) : void 0,
-          footer: visibleSections.has("footer") && (!sessionsOnly && viewModel.capabilities.manageAgentSettings || footer) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn2("border-t border-border p-4", classNames?.footer), children: [
-            !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "h-10 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4", "aria-hidden": "true" }),
-              messages.settings
-            ] }) : null,
-            footer
-          ] }) : void 0,
+          footer: visibleSections.has("footer") && (!sessionsOnly && viewModel.capabilities.manageAgentSettings || footer) ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn2("border-t border-border p-4", classNames?.footer),
+              children: [
+                !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    className: "h-10 w-full justify-start gap-2 px-3 text-sm",
+                    onClick: () => onIntent?.({ type: "open-agent-settings" }),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4", "aria-hidden": "true" }),
+                      messages.settings
+                    ]
+                  }
+                ) : null,
+                footer
+              ]
+            }
+          ) : void 0,
           bodyScrollable: false,
           className,
-          classNames: { root: classNames?.root, body: "flex min-h-0 flex-1 flex-col p-0" },
+          classNames: {
+            root: classNames?.root,
+            body: "flex min-h-0 flex-1 flex-col p-0"
+          },
           children: [
-            showAgents ? /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "agents", "data-agent-workbench-scroll-region": true, className: cn2("mt-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain px-4 pb-4", classNames?.body), children: [
-              viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-agent" }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4", "aria-hidden": "true" }),
-                messages.newAgent
-              ] }) : null,
-              /* @__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 min-w-0 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", title: item.name, 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: "shrink-0 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",
-                        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-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 });
+            showAgents ? /* @__PURE__ */ jsxRuntime.jsxs(
+              TabsContent,
+              {
+                value: "agents",
+                "data-agent-workbench-scroll-region": true,
+                className: cn2(
+                  "mt-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain px-4 pb-4",
+                  classNames?.body
+                ),
+                children: [
+                  viewModel.capabilities.createAgent ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm",
+                      onClick: () => onIntent?.({ type: "create-agent" }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4", "aria-hidden": "true" }),
+                        messages.newAgent
+                      ]
+                    }
+                  ) : null,
+                  /* @__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 min-w-0 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",
+                            title: item.name,
+                            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 })
+                              ] })
+                            ]
                           }
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn2("size-4", item.pinned && "fill-current", item.pinPending && "animate-pulse") })
-                      }
-                    ) : null
-                  ]
-                },
-                item.id
-              )) })
-            ] }) : null,
-            showSessions ? /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "sessions", "data-agent-workbench-scroll-region": true, className: cn2("mt-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain px-4 pb-4", classNames?.body), children: [
-              visibleSections.has("new-session") && viewModel.capabilities.createSession ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-session" }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
-                messages.newSession
-              ] }) : null,
-              !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-capabilities" }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Blocks, { className: "size-4", "aria-hidden": "true" }),
-                messages.capabilities
-              ] }) : null,
-              !sessionsOnly ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }) : null,
-              /* @__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" }) }),
-              sessionsOnly && sessions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [
-                { id: "chatbot", label: messages.chats, icon: lucideReact.MessageSquare, items: chatbotSessions },
-                { id: "agent", label: messages.agents, icon: lucideReact.Bot, items: agentSessions }
-              ].map(({ id, label, icon: Icon2, items }) => /* @__PURE__ */ jsxRuntime.jsxs("details", { open: true, "aria-label": label, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex h-9 cursor-pointer list-none items-center gap-2 rounded-md px-3 text-sm font-semibold hover:bg-muted", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: label })
-                ] }),
-                renderSessionItems(items)
-              ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
-            ] }) : null
+                        ),
+                        item.builtIn ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 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",
+                            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-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
+                  )) })
+                ]
+              }
+            ) : null,
+            showSessions ? /* @__PURE__ */ jsxRuntime.jsxs(
+              TabsContent,
+              {
+                value: "sessions",
+                "data-agent-workbench-scroll-region": true,
+                className: cn2(
+                  "mt-0 min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain px-4 pb-4",
+                  classNames?.body
+                ),
+                children: [
+                  visibleSections.has("new-session") && viewModel.capabilities.createSession ? /* @__PURE__ */ jsxRuntime.jsx(
+                    AgentWorkbenchSidebarNewSessionButton,
+                    {
+                      label: messages.newSession,
+                      onClick: () => onIntent?.({ type: "create-session" })
+                    }
+                  ) : null,
+                  !sessionsOnly && viewModel.capabilities.manageCapabilities ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm",
+                      onClick: () => onIntent?.({ type: "open-capabilities" }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Blocks, { className: "size-4", "aria-hidden": "true" }),
+                        messages.capabilities
+                      ]
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    AgentWorkbenchSessionList,
+                    {
+                      sessions,
+                      selectedSessionId: viewModel.selectedSessionItem,
+                      status: viewModel.sessions.status,
+                      error: viewModel.sessions.error,
+                      query,
+                      emptyLabel: messages.emptySessions,
+                      noResultsLabel: messages.noResults,
+                      groupByMode: sessionsOnly,
+                      showHeading: !sessionsOnly,
+                      itemClassName: classNames?.item,
+                      capabilities: {
+                        pin: viewModel.capabilities.pinSessions,
+                        rename: viewModel.capabilities.renameSessions,
+                        delete: viewModel.capabilities.deleteSessions
+                      },
+                      onSelect: (sessionId) => onIntent?.({ type: "select-session", sessionId }),
+                      onTogglePin: (sessionId, pinned) => onIntent?.({ type: "toggle-session-pin", sessionId, pinned }),
+                      onRename: (sessionId, title) => onIntent?.({ type: "rename-session", sessionId, title }),
+                      onDelete: (sessionId) => onIntent?.({ type: "delete-session", sessionId }),
+                      onRetry: () => onIntent?.({ type: "retry-sessions" })
+                    }
+                  )
+                ]
+              }
+            ) : null
           ]
         }
       )
@@ -1919,9 +2317,10 @@ function AgentWorkbenchExploreSidebar({
   renderItemMedia,
   onIntent
 }) {
-  const navigationMessages = useMonkeysLocaleMessages().agentWorkbench.navigation;
-  const searchRef = React5.useRef(null);
-  const resolvedConfig = React5.useMemo(() => monkeys.resolveAgentWorkbenchSidebarConfig(config), [config]);
+  const resolvedConfig = React5.useMemo(
+    () => monkeys.resolveAgentWorkbenchSidebarConfig(config),
+    [config]
+  );
   const visibleSections = React5.useMemo(
     () => new Set(resolvedConfig.visibleSections),
     [resolvedConfig.visibleSections]
@@ -1944,28 +2343,18 @@ function AgentWorkbenchExploreSidebar({
     if (groups.some((group) => group.id === activeGroupId)) return;
     setActiveGroupId(resolvedDefaultGroupId ?? groups[0]?.id ?? "");
   }, [activeGroupId, groups, resolvedDefaultGroupId]);
-  React5.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);
-  }, []);
   const changeGroup = (groupId) => {
     setActiveGroupId(groupId);
     onIntent?.({ type: "change-group", groupId });
   };
-  const state = !visibleSections.has("sessions") ? "ready" : error ? "error" : loading && sessions.length === 0 ? "loading" : filteredSessions.length === 0 && !draftVisible ? "empty" : "ready";
   const groupNavigation = visibleSections.has("groups") && activeGroup ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: activeGroup.id, onValueChange: changeGroup, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TabsList,
       {
         className: "grid h-10 w-full rounded-[var(--radius)] bg-muted p-0.5 text-foreground",
-        style: { gridTemplateColumns: `repeat(${groups.length}, minmax(0, 1fr))` },
+        style: {
+          gridTemplateColumns: `repeat(${groups.length}, minmax(0, 1fr))`
+        },
         children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
           TabsTrigger,
           {
@@ -1984,7 +2373,11 @@ function AgentWorkbenchExploreSidebar({
         "aria-label": item.title,
         className: "group relative aspect-[1.27] overflow-hidden rounded-[var(--radius)] border border-border bg-card text-left transition hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         style: Number.isFinite(group.itemAspectRatio) && Number(group.itemAspectRatio) > 0 ? { aspectRatio: group.itemAspectRatio } : void 0,
-        onClick: () => onIntent?.({ type: "select-item", groupId: group.id, item }),
+        onClick: () => onIntent?.({
+          type: "select-item",
+          groupId: group.id,
+          item
+        }),
         children: renderItemMedia?.(item, group) ?? /* @__PURE__ */ jsxRuntime.jsx(AgentWorkbenchExploreCardMedia, { item })
       },
       item.id
@@ -1997,47 +2390,23 @@ function AgentWorkbenchExploreSidebar({
       "data-sidebar-width-percent": resolvedConfig.widthPercent,
       "aria-label": labels.navigation,
       header: visibleSections.has("header") ? header : void 0,
-      search: visibleSections.has("search") ? /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "h-12 rounded-[var(--radius)] border-border bg-card text-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          InputGroupInput,
-          {
-            ref: searchRef,
-            type: "search",
-            value: searchQuery,
-            "aria-label": labels.search,
-            placeholder: labels.search,
-            className: "min-w-0 text-foreground placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
-            onChange: (event) => onIntent?.({ type: "change-search", query: event.target.value })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded-sm border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" }) })
-      ] }) : void 0,
-      primaryAction: visibleSections.has("new-session") ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
+      search: visibleSections.has("search") ? /* @__PURE__ */ jsxRuntime.jsx(
+        AgentWorkbenchSidebarSearch,
         {
-          type: "button",
-          className: "h-11 w-full justify-start gap-2 rounded-[var(--radius)] border border-primary/60 bg-primary px-3 font-semibold text-primary-foreground hover:bg-primary/90",
-          onClick: () => onIntent?.({ type: "create-session" }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquarePen, { className: "size-4", "aria-hidden": "true" }),
-            labels.newSession
-          ]
+          value: searchQuery,
+          label: labels.search,
+          onChange: (query) => onIntent?.({ type: "change-search", query })
+        }
+      ) : void 0,
+      primaryAction: visibleSections.has("new-session") ? /* @__PURE__ */ jsxRuntime.jsx(
+        AgentWorkbenchSidebarNewSessionButton,
+        {
+          label: labels.newSession,
+          onClick: () => onIntent?.({ type: "create-session" })
         }
       ) : void 0,
       groups: groupNavigation,
       footer: visibleSections.has("footer") ? footer : void 0,
-      status: state,
-      loadingState: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-24 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-5 animate-spin" }) }),
-      emptyState: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: normalizedQuery ? labels.noResults : labels.emptySessions }),
-      errorState: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-24 flex-col items-center justify-center gap-2 px-3 py-6 text-center", role: "alert", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "size-5 shrink-0 text-destructive-text", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-full break-words text-sm text-muted-foreground", children: error }),
-        labels.retry ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5 text-primary", onClick: () => onIntent?.({ type: "retry-sessions" }), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
-          labels.retry
-        ] }) : null
-      ] }),
       bodyProps: { "data-agent-workbench-session-scroll-region": "" },
       className,
       classNames: { body: "min-h-[160px] flex-[0_1_280px] px-4 pb-3" },
@@ -2052,53 +2421,24 @@ function AgentWorkbenchExploreSidebar({
             children: labels.draftSession
           }
         ) : null,
-        filteredSessions.map((session) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        filteredSessions.length > 0 || !draftVisible || loading || error ? /* @__PURE__ */ jsxRuntime.jsx(
+          AgentWorkbenchSessionList,
           {
-            "aria-current": session.id === selectedSessionId ? "page" : void 0,
-            className: "group flex h-10 w-full min-w-0 items-center rounded-[var(--radius)] border border-transparent bg-muted/60 text-foreground transition hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-primary/10",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  title: session.title,
-                  className: "h-full min-w-0 flex-1 truncate px-3 text-left text-sm font-semibold",
-                  onClick: () => onIntent?.({ type: "select-session", sessionId: session.id }),
-                  children: session.title
-                }
-              ),
-              deleteSessions ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon",
-                    "aria-label": navigationMessages.actions,
-                    className: "mr-1 size-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-aria-[current=page]:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "size-4", "aria-hidden": "true" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  DropdownMenuItem,
-                  {
-                    className: "text-destructive-text",
-                    onSelect: () => onIntent?.({
-                      type: "delete-session",
-                      sessionId: session.id
-                    }),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }),
-                      navigationMessages.delete
-                    ]
-                  }
-                ) })
-              ] }) : null
-            ]
-          },
-          session.id
-        ))
+            sessions: filteredSessions,
+            selectedSessionId,
+            status: error ? "error" : loading ? "loading" : "ready",
+            error,
+            query: normalizedQuery,
+            emptyLabel: labels.emptySessions,
+            noResultsLabel: labels.noResults,
+            retryLabel: labels.retry,
+            groupByMode: resolvedConfig.navigationMode !== "default",
+            capabilities: { delete: deleteSessions },
+            onSelect: (sessionId) => onIntent?.({ type: "select-session", sessionId }),
+            onDelete: (sessionId) => onIntent?.({ type: "delete-session", sessionId }),
+            onRetry: labels.retry ? () => onIntent?.({ type: "retry-sessions" }) : void 0
+          }
+        ) : null
       ] }) : null
     }
   );