@inf-monkeys-tech/monkeys-design 1.0.62 → 1.0.63

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

@@ -1,4 +1,4 @@
-import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, X, Paperclip, Mic, Send, Square, ShoppingBag, Code2, FileText, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, Loader2, TerminalSquare, Clock3, FileOutput, Download, CircleAlert, ListFilter, Link2, ExternalLink, PanelRightClose, Wrench, BookOpen, RefreshCw, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
+import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, X, Paperclip, FileText, Mic, Send, Square, ShoppingBag, Code2, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, SquarePen, Blocks, MessageSquare, Bot, Settings, AlertCircle, RefreshCw, Loader2, TerminalSquare, Clock3, FileOutput, Download, CircleAlert, ListFilter, Link2, ExternalLink, PanelRightClose, Wrench, BookOpen, CheckCircle2, XCircle, CircleStop, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
 import * as React5 from 'react';
 import { useImperativeHandle, createContext, useRef, useState, useMemo, useEffect, useContext } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -988,6 +988,8 @@ function AgentWorkbenchComposer({
     const selected = visibleModelOptions.find((option) => option.id === viewModel.model.selectedId && option.mode === viewModel.mode);
     return selected ? modelOptionValue(selected) : visibleModelOptions[0] ? modelOptionValue(visibleModelOptions[0]) : "";
   }, [viewModel.mode, viewModel.model.selectedId, visibleModelOptions]);
+  const inputActions = viewModel.inputActions || [];
+  const selectedInputActionId = viewModel.selectedInputActionId;
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface) return void 0;
@@ -1118,6 +1120,25 @@ function AgentWorkbenchComposer({
                   }
                 )
               ] }) : null,
+              inputActions.map((action) => {
+                const ActionIcon = action.icon === "image" ? Image : FileText;
+                return /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: selectedInputActionId === action.id ? "secondary" : "ghost",
+                    size: "sm",
+                    className: "h-8 shrink-0 gap-1.5 px-2 text-xs",
+                    "aria-pressed": selectedInputActionId === action.id,
+                    onClick: () => onIntent?.({ type: "select-input-action", actionId: action.id }),
+                    children: [
+                      /* @__PURE__ */ jsx(ActionIcon, { className: "size-3.5" }),
+                      action.label
+                    ]
+                  },
+                  action.id
+                );
+              }),
               viewModel.capabilities.voiceInput ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: iconButtonClass, "aria-label": messages.composer.voice, onClick: () => onIntent?.({ type: "request-voice-input" }), children: /* @__PURE__ */ jsx(Mic, { className: "size-4" }) }) : null,
               viewModel.capabilities.webSearch ? /* @__PURE__ */ jsxs("label", { className: "flex shrink-0 items-center gap-1.5 whitespace-nowrap px-1 text-xs font-medium text-foreground", children: [
                 messages.composer.webSearch,
@@ -1445,7 +1466,7 @@ function CollectionState({
   }
   if (status === "error") {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-8 text-center", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", role: "alert", children: error }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-full break-words text-sm text-muted-foreground", role: "alert", children: error }),
       /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5 px-0 text-sm text-primary hover:text-primary", onClick: onRetry, children: [
         /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
         messages.retry
@@ -1549,7 +1570,7 @@ function AgentWorkbenchSidebar({
   };
   const renderSessionItems = (items) => /* @__PURE__ */ 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__ */ 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: [
+    return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
         /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(SessionAvatar, { item }) }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
@@ -1578,14 +1599,14 @@ function AgentWorkbenchSidebar({
           ),
           /* @__PURE__ */ jsx(SessionMeta, { item, locale })
         ] })
-      ] }) : /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(SessionAvatar, { item }) }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
           /* @__PURE__ */ jsx(SessionMeta, { item, locale })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs("span", { "data-agent-workbench-item-actions": true, className: "flex shrink-0 items-center gap-1", children: [
         percent !== void 0 && item.status === "idle" ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground", "aria-label": messages.contextUsage({ percent }), children: [
           percent,
           "%"
@@ -1637,7 +1658,7 @@ function AgentWorkbenchSidebar({
             headerActions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: headerActions }) : null
           ] }) : null
         ] }),
-        !sessionsOnly ? /* @__PURE__ */ jsxs(TabsContent, { value: "agents", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
+        !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: [
           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
@@ -1648,16 +1669,16 @@ function AgentWorkbenchSidebar({
             "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),
+              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__ */ 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__ */ 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__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(ItemAvatar, { item }) }),
                   /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
                     /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: item.name }),
                     /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-foreground/80", children: item.description || messages.noDescription })
                   ] })
                 ] }),
-                item.builtIn ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 py-1 text-[10px] text-foreground", children: messages.builtIn }) : null,
+                item.builtIn ? /* @__PURE__ */ 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__ */ jsx(
                   Button,
                   {
@@ -1685,7 +1706,7 @@ function AgentWorkbenchSidebar({
             item.id
           )) })
         ] }) : null,
-        /* @__PURE__ */ jsxs(TabsContent, { value: "sessions", className: cn2("mt-0 min-h-0 flex-1 overflow-y-auto px-4 pb-4", classNames?.body), children: [
+        /* @__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: [
             /* @__PURE__ */ jsx(SquarePen, { className: "size-4", "aria-hidden": "true" }),
             messages.newSession
@@ -1701,8 +1722,8 @@ function AgentWorkbenchSidebar({
             { id: "agent", label: messages.agents, icon: Bot, items: agentSessions }
           ].map(({ id, label, icon: Icon2, items }) => /* @__PURE__ */ jsxs("details", { open: true, "aria-label": label, children: [
             /* @__PURE__ */ 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__ */ jsx(Icon2, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
-              label
+              /* @__PURE__ */ jsx(Icon2, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label })
             ] }),
             renderSessionItems(items)
           ] }, id)) }) : !sessionsOnly ? renderSessionItems(sessions) : null
@@ -1731,7 +1752,7 @@ function AgentWorkbenchExploreCardMedia({
       "span",
       {
         className: cn2(
-          isLogo ? "flex size-full items-center justify-center bg-[var(--monkeys-color-card-dark)] p-5" : "block size-full",
+          isLogo ? "flex size-full items-center justify-center bg-[hsl(var(--monkeys-color-media-surface))] p-5" : "block size-full",
           className
         ),
         children: /* @__PURE__ */ jsx(
@@ -1749,10 +1770,19 @@ function AgentWorkbenchExploreCardMedia({
         )
       }
     ),
-    showLabel ? /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent px-3 pb-2.5 pt-8 text-white", children: [
-      /* @__PURE__ */ jsx("span", { className: "block text-base font-semibold leading-tight", children: item.title }),
-      item.subtitle ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[11px] leading-tight text-white/75", children: item.subtitle }) : null
-    ] }) : null
+    showLabel ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "pointer-events-none absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-8 text-[hsl(var(--monkeys-color-media-foreground))]",
+        style: {
+          backgroundImage: "linear-gradient(to top, hsl(var(--monkeys-color-media-overlay) / 0.8), hsl(var(--monkeys-color-media-overlay) / 0.3), transparent)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-base font-semibold leading-tight", children: item.title }),
+          item.subtitle ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[11px] leading-tight opacity-75", children: item.subtitle }) : null
+        ]
+      }
+    ) : null
   ] });
 }
 function AgentWorkbenchExploreSidebar({
@@ -1762,6 +1792,7 @@ function AgentWorkbenchExploreSidebar({
   selectedSessionId,
   searchQuery = "",
   loading = false,
+  error,
   showDraftSession = !selectedSessionId,
   defaultGroupId,
   className,
@@ -1840,34 +1871,59 @@ function AgentWorkbenchExploreSidebar({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "min-h-[160px] flex-[0_1_280px] overflow-y-auto px-4 pb-3", children: loading && sessions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin" }) }) : filteredSessions.length === 0 && !draftVisible ? /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: normalizedQuery ? labels.noResults : labels.emptySessions }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          draftVisible ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-current": "page",
-              className: "block h-10 w-full truncate rounded-[var(--radius)] border border-primary bg-primary/10 px-3 text-left text-sm font-semibold text-foreground",
-              onClick: () => onIntent?.({ type: "create-session" }),
-              children: labels.draftSession
-            }
-          ) : null,
-          filteredSessions.map((session) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-current": session.id === selectedSessionId ? "page" : void 0,
-              className: "block h-10 w-full truncate rounded-[var(--radius)] border border-transparent bg-muted/60 px-3 text-left text-sm font-semibold text-foreground transition hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-primary/10",
-              onClick: () => onIntent?.({ type: "select-session", sessionId: session.id }),
-              children: session.title
-            },
-            session.id
-          ))
-        ] }) }),
-        activeGroup ? /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-t border-border px-4 pb-4 pt-3", children: [
-          /* @__PURE__ */ jsx(Tabs, { value: activeGroup.id, onValueChange: changeGroup, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-agent-workbench-session-scroll-region": true,
+            className: "min-h-[160px] flex-[0_1_280px] overflow-x-hidden overflow-y-auto overscroll-contain px-4 pb-3",
+            children: error ? /* @__PURE__ */ 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__ */ jsx(AlertCircle, { className: "size-5 shrink-0 text-destructive-text", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("p", { className: "max-w-full break-words text-sm text-muted-foreground", children: error }),
+              labels.retry ? /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "gap-1.5 text-primary",
+                  onClick: () => onIntent?.({ type: "retry-sessions" }),
+                  children: [
+                    /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5", "aria-hidden": "true" }),
+                    labels.retry
+                  ]
+                }
+              ) : null
+            ] }) : loading && sessions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin" }) }) : filteredSessions.length === 0 && !draftVisible ? /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: normalizedQuery ? labels.noResults : labels.emptySessions }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              draftVisible ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-current": "page",
+                  className: "block h-10 w-full min-w-0 truncate rounded-[var(--radius)] border border-primary bg-primary/10 px-3 text-left text-sm font-semibold text-foreground",
+                  onClick: () => onIntent?.({ type: "create-session" }),
+                  children: labels.draftSession
+                }
+              ) : null,
+              filteredSessions.map((session) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  title: session.title,
+                  "aria-current": session.id === selectedSessionId ? "page" : void 0,
+                  className: "block h-10 w-full min-w-0 truncate rounded-[var(--radius)] border border-transparent bg-muted/60 px-3 text-left text-sm font-semibold text-foreground transition hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-primary/10",
+                  onClick: () => onIntent?.({ type: "select-session", sessionId: session.id }),
+                  children: session.title
+                },
+                session.id
+              ))
+            ] })
+          }
+        ),
+        activeGroup ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxs(Tabs, { value: activeGroup.id, onValueChange: changeGroup, children: [
+          /* @__PURE__ */ jsx(
             TabsList,
             {
-              className: "grid h-10 w-full rounded-[var(--radius)] bg-muted p-0.5 text-muted-foreground",
+              className: "grid h-10 w-full rounded-[var(--radius)] bg-muted p-0.5 text-foreground",
               style: {
                 gridTemplateColumns: `repeat(${groups.length}, minmax(0, 1fr))`
               },
@@ -1875,30 +1931,30 @@ function AgentWorkbenchExploreSidebar({
                 TabsTrigger,
                 {
                   value: group.id,
-                  className: "rounded-md text-sm font-semibold text-muted-foreground data-[state=active]:border data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground",
+                  className: "rounded-md text-sm font-semibold text-foreground data-[state=active]:border data-[state=active]:border-border data-[state=active]:bg-background",
                   children: group.label
                 },
                 group.id
               ))
             }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-2 gap-2", children: activeGroup.items.map((item) => /* @__PURE__ */ jsx(
+          ),
+          groups.map((group) => /* @__PURE__ */ jsx(TabsContent, { value: group.id, className: "mt-3", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: group.items.map((item) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               "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(activeGroup.itemAspectRatio) && Number(activeGroup.itemAspectRatio) > 0 ? { aspectRatio: activeGroup.itemAspectRatio } : void 0,
+              style: Number.isFinite(group.itemAspectRatio) && Number(group.itemAspectRatio) > 0 ? { aspectRatio: group.itemAspectRatio } : void 0,
               onClick: () => onIntent?.({
                 type: "select-item",
-                groupId: activeGroup.id,
+                groupId: group.id,
                 item
               }),
-              children: renderItemMedia?.(item, activeGroup) ?? /* @__PURE__ */ jsx(AgentWorkbenchExploreCardMedia, { item })
+              children: renderItemMedia?.(item, group) ?? /* @__PURE__ */ jsx(AgentWorkbenchExploreCardMedia, { item })
             },
             item.id
-          )) })
-        ] }) : null
+          )) }) }, group.id))
+        ] }) }) : null
       ]
     }
   );