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

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

@@ -14,6 +14,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { resolveAgentWorkbenchSidebarConfig } from '@inf-monkeys-tech/monkeys';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
@@ -1579,7 +1580,8 @@ function SessionActions({
 }
 function AgentWorkbenchSidebar({
   viewModel,
-  navigationMode = "agents-and-sessions",
+  navigationMode,
+  config,
   header,
   headerActions,
   footer,
@@ -1589,7 +1591,11 @@ function AgentWorkbenchSidebar({
 }) {
   const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
-  const sessionsOnly = navigationMode === "sessions-only";
+  const resolvedConfig = useMemo(() => resolveAgentWorkbenchSidebarConfig(config), [config]);
+  const visibleSections = 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 = useRef(null);
   const renameInputRef = useRef(null);
   const [editingSessionId, setEditingSessionId] = useState();
@@ -1689,7 +1695,7 @@ function AgentWorkbenchSidebar({
   return /* @__PURE__ */ jsx(
     Tabs,
     {
-      value: sessionsOnly ? "sessions" : viewModel.activeTab,
+      value: sessionsOnly || !showAgents ? "sessions" : viewModel.activeTab,
       onValueChange: (value) => {
         if (!sessionsOnly && (value === "agents" || value === "sessions")) onIntent?.({ type: "change-tab", tab: value });
       },
@@ -1697,9 +1703,10 @@ function AgentWorkbenchSidebar({
       children: /* @__PURE__ */ jsxs(
         AgentWorkbenchSidebarContainer,
         {
+          "data-sidebar-width-percent": resolvedConfig.widthPercent,
           "aria-label": messages.tabsLabel,
-          header,
-          search: /* @__PURE__ */ jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
+          header: visibleSections.has("header") ? header : void 0,
+          search: visibleSections.has("search") ? /* @__PURE__ */ jsxs(InputGroup, { className: cn2("h-10 rounded-lg bg-card", classNames?.search), children: [
             /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { className: "size-4", "aria-hidden": "true" }) }),
             /* @__PURE__ */ jsx(
               InputGroupInput,
@@ -1719,15 +1726,15 @@ function AgentWorkbenchSidebar({
               }
             ),
             viewModel.searchQuery ? /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(InputGroupButton, { size: "icon-xs", "aria-label": messages.clearSearch, onClick: () => onIntent?.({ type: "change-search", query: "" }), children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }) }) : /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx("kbd", { className: "border border-border px-1.5 py-0.5 text-[10px]", children: "Ctrl K" }) })
-          ] }),
-          actions: !sessionsOnly || headerActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            !sessionsOnly ? /* @__PURE__ */ jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
+          ] }) : void 0,
+          actions: showAgents && showSessions || headerActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            showAgents && showSessions ? /* @__PURE__ */ jsxs(TabsList, { className: cn2("grid min-w-0 flex-1 grid-cols-2 text-foreground", classNames?.tabs), "aria-label": messages.tabsLabel, children: [
               /* @__PURE__ */ jsx(TabsTrigger, { value: "agents", children: messages.agents }),
               /* @__PURE__ */ jsx(TabsTrigger, { value: "sessions", children: messages.sessions })
             ] }) : null,
             headerActions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: headerActions }) : null
           ] }) : void 0,
-          footer: !sessionsOnly && viewModel.capabilities.manageAgentSettings || footer ? /* @__PURE__ */ jsxs("div", { className: cn2("border-t border-border p-4", classNames?.footer), children: [
+          footer: visibleSections.has("footer") && (!sessionsOnly && viewModel.capabilities.manageAgentSettings || footer) ? /* @__PURE__ */ jsxs("div", { className: cn2("border-t border-border p-4", classNames?.footer), children: [
             !sessionsOnly && viewModel.capabilities.manageAgentSettings ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-10 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "open-agent-settings" }), children: [
               /* @__PURE__ */ jsx(Settings, { className: "size-4", "aria-hidden": "true" }),
               messages.settings
@@ -1738,7 +1745,7 @@ function AgentWorkbenchSidebar({
           className,
           classNames: { root: classNames?.root, body: "flex min-h-0 flex-1 flex-col p-0" },
           children: [
-            !sessionsOnly ? /* @__PURE__ */ 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: [
+            showAgents ? /* @__PURE__ */ 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__ */ jsxs(Button, { type: "button", variant: "ghost", className: "mb-3 h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-agent" }), children: [
                 /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
                 messages.newAgent
@@ -1786,8 +1793,8 @@ function AgentWorkbenchSidebar({
                 item.id
               )) })
             ] }) : null,
-            /* @__PURE__ */ 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: [
-              viewModel.capabilities.createSession ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-session" }), children: [
+            showSessions ? /* @__PURE__ */ 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__ */ jsxs(Button, { type: "button", variant: "ghost", className: "h-9 w-full justify-start gap-2 px-3 text-sm", onClick: () => onIntent?.({ type: "create-session" }), children: [
                 /* @__PURE__ */ jsx(SquarePen, { className: "size-4", "aria-hidden": "true" }),
                 messages.newSession
               ] }) : null,
@@ -1807,7 +1814,7 @@ function AgentWorkbenchSidebar({
                 ] }),
                 renderSessionItems(items)
               ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
-            ] })
+            ] }) : null
           ]
         }
       )
@@ -1865,7 +1872,8 @@ function AgentWorkbenchExploreCardMedia({
 }
 function AgentWorkbenchExploreSidebar({
   sessions,
-  groups,
+  groups: configuredGroups,
+  config,
   labels,
   selectedSessionId,
   searchQuery = "",
@@ -1882,8 +1890,15 @@ function AgentWorkbenchExploreSidebar({
 }) {
   const navigationMessages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   const searchRef = useRef(null);
+  const resolvedConfig = useMemo(() => resolveAgentWorkbenchSidebarConfig(config), [config]);
+  const visibleSections = useMemo(
+    () => new Set(resolvedConfig.visibleSections),
+    [resolvedConfig.visibleSections]
+  );
+  const groups = configuredGroups?.length ? configuredGroups : resolvedConfig.groups;
+  const resolvedDefaultGroupId = defaultGroupId ?? resolvedConfig.defaultGroupId;
   const [activeGroupId, setActiveGroupId] = useState(
-    defaultGroupId ?? groups[0]?.id ?? ""
+    resolvedDefaultGroupId ?? groups[0]?.id ?? ""
   );
   const activeGroup = groups.find((group) => group.id === activeGroupId) ?? groups[0];
   const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
@@ -1896,8 +1911,8 @@ function AgentWorkbenchExploreSidebar({
   );
   useEffect(() => {
     if (groups.some((group) => group.id === activeGroupId)) return;
-    setActiveGroupId(defaultGroupId ?? groups[0]?.id ?? "");
-  }, [activeGroupId, defaultGroupId, groups]);
+    setActiveGroupId(resolvedDefaultGroupId ?? groups[0]?.id ?? "");
+  }, [activeGroupId, groups, resolvedDefaultGroupId]);
   useEffect(() => {
     const handleShortcut = (event) => {
       if (!(event.ctrlKey || event.metaKey) || event.key.toLocaleLowerCase() !== "k")
@@ -1913,8 +1928,8 @@ function AgentWorkbenchExploreSidebar({
     setActiveGroupId(groupId);
     onIntent?.({ type: "change-group", groupId });
   };
-  const state = error ? "error" : loading && sessions.length === 0 ? "loading" : filteredSessions.length === 0 && !draftVisible ? "empty" : "ready";
-  const groupNavigation = activeGroup ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxs(Tabs, { value: activeGroup.id, onValueChange: changeGroup, children: [
+  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__ */ jsx("div", { className: "border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxs(Tabs, { value: activeGroup.id, onValueChange: changeGroup, children: [
     /* @__PURE__ */ jsx(
       TabsList,
       {
@@ -1948,9 +1963,10 @@ function AgentWorkbenchExploreSidebar({
     AgentWorkbenchSidebarContainer,
     {
       "data-sidebar-style": "explore",
+      "data-sidebar-width-percent": resolvedConfig.widthPercent,
       "aria-label": labels.navigation,
-      header,
-      search: /* @__PURE__ */ jsxs(InputGroup, { className: "h-12 rounded-[var(--radius)] border-border bg-card text-foreground", children: [
+      header: visibleSections.has("header") ? header : void 0,
+      search: visibleSections.has("search") ? /* @__PURE__ */ jsxs(InputGroup, { className: "h-12 rounded-[var(--radius)] border-border bg-card text-foreground", children: [
         /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx(
           InputGroupInput,
@@ -1965,8 +1981,8 @@ function AgentWorkbenchExploreSidebar({
           }
         ),
         /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx("kbd", { className: "rounded-sm border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Ctrl K" }) })
-      ] }),
-      primaryAction: /* @__PURE__ */ jsxs(
+      ] }) : void 0,
+      primaryAction: visibleSections.has("new-session") ? /* @__PURE__ */ jsxs(
         Button,
         {
           type: "button",
@@ -1977,9 +1993,9 @@ function AgentWorkbenchExploreSidebar({
             labels.newSession
           ]
         }
-      ),
+      ) : void 0,
       groups: groupNavigation,
-      footer,
+      footer: visibleSections.has("footer") ? footer : void 0,
       status: state,
       loadingState: /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin" }) }),
       emptyState: /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: normalizedQuery ? labels.noResults : labels.emptySessions }),
@@ -1994,7 +2010,7 @@ function AgentWorkbenchExploreSidebar({
       bodyProps: { "data-agent-workbench-session-scroll-region": "" },
       className,
       classNames: { body: "min-h-[160px] flex-[0_1_280px] px-4 pb-3" },
-      children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      children: visibleSections.has("sessions") ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         draftVisible ? /* @__PURE__ */ jsx(
           "button",
           {
@@ -2052,7 +2068,7 @@ function AgentWorkbenchExploreSidebar({
           },
           session.id
         ))
-      ] })
+      ] }) : null
     }
   );
 }