@inf-monkeys-tech/monkeys-design 1.0.81 → 1.0.84

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

@@ -1,4 +1,4 @@
-import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, LoaderCircle, CircleAlert, RotateCcw, X, Paperclip, FileText, Mic, Send, Square, ShoppingBag, Code2, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, Blocks, Settings, Clock3, TerminalSquare, FileOutput, Download, Loader2, ListFilter, Link2, ExternalLink, PanelRightClose, Wrench, BookOpen, RefreshCw, Bot, SquarePen, MessageSquare, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
+import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, ArrowUp, ArrowDown, Pencil, Trash2, Image, File, LoaderCircle, CircleAlert, RotateCcw, X, Paperclip, FileText, Mic, Send, Square, ShoppingBag, Code2, Search, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, Blocks, Settings, Clock3, TerminalSquare, FileOutput, Download, Loader2, ListFilter, Link2, TriangleAlert, RefreshCw, ExternalLink, PanelRightClose, Wrench, BookOpen, Bot, SquarePen, MessageSquare, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, FileCode2, Files, TestTube2, Globe2, Film, Presentation, FileImage, Music2, Ellipsis } from 'lucide-react';
 import * as React5 from 'react';
 import { useImperativeHandle, forwardRef, createContext, useRef, useState, useMemo, useEffect, useContext } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -209,7 +209,10 @@ var enUS = {
         closeTab: ({ name }) => `Close ${name}`,
         closeWorkspace: "Close workspace",
         download: ({ name }) => `Download ${name}`,
-        openExternal: ({ name }) => `Open ${name} in a new window`
+        openExternal: ({ name }) => `Open ${name} in a new window`,
+        loading: "Loading preview...",
+        failed: "Preview unavailable",
+        retry: "Try again"
       },
       usage: {
         label: "Context usage",
@@ -2582,7 +2585,7 @@ function JsonValue({ value }) {
   return /* @__PURE__ */ jsx(
     "pre",
     {
-      className: "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted p-3 font-mono text-xs text-foreground",
+      className: "max-h-48 max-w-full overflow-auto overscroll-contain whitespace-pre-wrap break-words rounded-md bg-muted p-3 font-mono text-xs text-foreground [overflow-wrap:anywhere]",
       tabIndex: 0,
       children: content
     }
@@ -2595,13 +2598,20 @@ function AgentWorkbenchApproval({ approval, className, onDecision }) {
   return /* @__PURE__ */ jsx(
     "article",
     {
-      className: cn2("rounded-lg border border-border bg-card p-3 text-card-foreground", className),
+      className: cn2("min-w-0 overflow-hidden rounded-lg border border-border bg-card p-3 text-card-foreground", className),
       "data-agent-approval-status": approval.status,
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         requested ? /* @__PURE__ */ jsx(Clock3, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }) : approved ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-primary", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { className: "mt-0.5 size-4 shrink-0 text-destructive-text", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("h3", { className: "break-words text-sm font-medium", children: approval.title }),
-          approval.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm text-muted-foreground", children: approval.description }) : null,
+          approval.description ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              tabIndex: 0,
+              className: "mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-sm text-muted-foreground [overflow-wrap:anywhere]",
+              children: approval.description
+            }
+          ) : null,
           approval.requestedAction !== void 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3 min-w-0", children: /* @__PURE__ */ jsx(JsonValue, { value: approval.requestedAction }) }) : null,
           requested ? /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -2645,8 +2655,9 @@ function JsonValue2({ value, className }) {
   return /* @__PURE__ */ jsx(
     "pre",
     {
+      tabIndex: 0,
       className: cn2(
-        "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted p-3 font-mono text-xs text-foreground",
+        "max-h-64 max-w-full overflow-auto overscroll-contain whitespace-pre-wrap break-words rounded-md bg-muted p-3 font-mono text-xs text-foreground [overflow-wrap:anywhere]",
         className
       ),
       children: content
@@ -2689,7 +2700,7 @@ function AgentWorkbenchTool({
     {
       open: isExpanded,
       className: cn2(
-        "group rounded-lg border border-border bg-card text-card-foreground",
+        "group min-w-0 overflow-hidden rounded-lg border border-border bg-card text-card-foreground",
         classNames?.root,
         className
       ),
@@ -2723,7 +2734,7 @@ function AgentWorkbenchTool({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: cn2("space-y-3 border-t border-border px-3 py-3 text-sm", classNames?.content), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn2("min-w-0 space-y-3 border-t border-border px-3 py-3 text-sm", classNames?.content), children: [
           event.payload.input !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: messages.input }),
             /* @__PURE__ */ jsx(JsonValue2, { value: event.payload.input, className: classNames?.input })
@@ -2732,7 +2743,15 @@ function AgentWorkbenchTool({
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: messages.output }),
             /* @__PURE__ */ jsx(JsonValue2, { value: event.payload.output, className: classNames?.output })
           ] }) : null,
-          event.payload.error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive-text", role: "alert", children: event.payload.error }) : null
+          event.payload.error ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              tabIndex: 0,
+              className: "max-h-32 overflow-auto whitespace-pre-wrap break-words text-sm text-destructive-text [overflow-wrap:anywhere]",
+              role: "alert",
+              children: event.payload.error
+            }
+          ) : null
         ] })
       ]
     }
@@ -2752,7 +2771,7 @@ function ActivityDetails({
     "details",
     {
       className: cn2(
-        "group rounded-lg border border-border bg-card text-card-foreground",
+        "group min-w-0 overflow-hidden rounded-lg border border-border bg-card text-card-foreground",
         className
       ),
       open,
@@ -2781,7 +2800,7 @@ function ActivityDetails({
           "div",
           {
             className: cn2(
-              "border-t border-border px-3 py-3 text-sm",
+              "min-w-0 border-t border-border px-3 py-3 text-sm",
               contentClassName
             ),
             children
@@ -2876,7 +2895,14 @@ function AgentWorkbenchActivity({
             className: classNames?.item,
             triggerClassName: classNames?.trigger,
             contentClassName: classNames?.content,
-            children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-muted-foreground", children: event.payload.text })
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                tabIndex: 0,
+                className: "max-h-64 overflow-auto whitespace-pre-wrap break-words text-muted-foreground [overflow-wrap:anywhere]",
+                children: event.payload.text
+              }
+            )
           },
           event.payload.reasoningId
         )),
@@ -2890,9 +2916,9 @@ function AgentWorkbenchActivity({
             className: classNames?.item,
             triggerClassName: classNames?.trigger,
             contentClassName: classNames?.content,
-            children: /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: event.payload.steps.map((step) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            children: /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: event.payload.steps.map((step) => /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 items-start gap-2", children: [
               /* @__PURE__ */ jsx(StatusIcon, { status: step.status }),
-              /* @__PURE__ */ jsx("span", { children: step.title })
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words [overflow-wrap:anywhere]", children: step.title })
             ] }, step.id)) })
           },
           event.payload.planId
@@ -2909,7 +2935,7 @@ function AgentWorkbenchActivity({
             contentClassName: classNames?.content,
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ jsx(StatusIcon, { status: event.payload.status }),
-              /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap text-muted-foreground", children: event.payload.detail || messages.taskNoDetail })
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-pre-wrap break-words text-muted-foreground [overflow-wrap:anywhere]", children: event.payload.detail || messages.taskNoDetail })
             ] })
           },
           event.payload.taskId
@@ -3569,14 +3595,18 @@ var AgentWorkbenchMessage = forwardRef(
     );
   }
 );
-var AgentWorkbenchMessageContent = forwardRef(function AgentWorkbenchMessageContent2({ children, className, ...contentProps }, ref) {
+var AgentWorkbenchMessageContent = forwardRef(function AgentWorkbenchMessageContent2({ children, className, tabIndex = 0, ...contentProps }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...contentProps,
       ref,
+      tabIndex,
       className: cn2(
-        "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden break-words text-sm [overflow-wrap:anywhere]",
+        "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-x-auto overflow-y-hidden break-words text-sm [overflow-wrap:anywhere]",
+        "[&_a]:max-w-full [&_a]:break-all [&_code]:max-w-full [&_code]:break-words",
+        "[&_pre]:w-max [&_pre]:min-w-full [&_pre]:whitespace-pre [&_pre_code]:break-normal",
+        "[&_table]:w-max [&_table]:min-w-full [&_table]:whitespace-nowrap",
         "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
         "group-[.is-assistant]:text-foreground",
         className
@@ -4083,19 +4113,27 @@ var ARTIFACT_ICONS = {
   web: Globe2
 };
 function ArtifactThumbnail({ artifact }) {
-  if (artifact.thumbnailUrl) {
+  const [thumbnailFailed, setThumbnailFailed] = useState(false);
+  if (artifact.status === "loading") {
+    return /* @__PURE__ */ jsx("span", { className: "size-7 shrink-0 animate-pulse rounded bg-muted", "aria-hidden": "true" });
+  }
+  if (artifact.status === "error") {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded bg-destructive/10 text-destructive-text", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4", "aria-hidden": "true" }) });
+  }
+  if (artifact.thumbnailUrl && !thumbnailFailed) {
     return /* @__PURE__ */ jsx(
       "img",
       {
         src: artifact.thumbnailUrl,
         alt: "",
         loading: "lazy",
-        className: "size-7 rounded object-cover"
+        className: "size-7 shrink-0 rounded object-cover",
+        onError: () => setThumbnailFailed(true)
       }
     );
   }
   const Icon2 = ARTIFACT_ICONS[artifact.kind];
-  return /* @__PURE__ */ jsx("span", { className: "flex size-7 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon2, { className: "size-4", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon2, { className: "size-4", "aria-hidden": "true" }) });
 }
 function ArtifactGroup({
   title,
@@ -4299,6 +4337,30 @@ function AgentWorkbenchArtifactWorkspace({
     if (!over || active.id === over.id) return;
     onIntent?.({ type: "reorder", artifactId: String(active.id), overArtifactId: String(over.id) });
   };
+  const artifactContent = activeArtifact.status === "loading" ? /* @__PURE__ */ jsx("div", { className: "flex size-full min-h-48 items-center justify-center p-6 text-center", role: "status", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col items-center gap-3 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: messages.loading })
+  ] }) }) : activeArtifact.status === "error" ? /* @__PURE__ */ jsx("div", { className: "flex size-full min-h-48 items-center justify-center p-6 text-center", role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-sm flex-col items-center gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-destructive/10 text-destructive-text", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "break-words text-sm font-medium text-foreground [overflow-wrap:anywhere]", children: messages.failed }),
+      activeArtifact.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 max-h-24 overflow-auto whitespace-pre-wrap break-words text-sm text-muted-foreground [overflow-wrap:anywhere]", children: activeArtifact.description }) : null
+    ] }),
+    onIntent ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "gap-2",
+        onClick: () => onIntent({ type: "retry", artifactId: activeArtifact.id }),
+        children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" }),
+          messages.retry
+        ]
+      }
+    ) : null
+  ] }) }) : renderArtifact(activeArtifact);
   return /* @__PURE__ */ jsxs(
     TabsPrimitive.Root,
     {
@@ -4370,7 +4432,7 @@ function AgentWorkbenchArtifactWorkspace({
           {
             value: artifact.id,
             className: "size-full min-h-0 min-w-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-            children: artifact.id === activeArtifact.id ? renderArtifact(artifact) : null
+            children: artifact.id === activeArtifact.id ? artifactContent : null
           },
           artifact.id
         )) })