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

package/dist/components/agent-workbench/index.d.mts

@@ -218,6 +218,9 @@ type AgentWorkbenchArtifactWorkspaceIntent = {
     type: 'reorder';
     artifactId: string;
     overArtifactId: string;
+} | {
+    type: 'retry';
+    artifactId: string;
 } | {
     type: 'select';
     artifactId: string;

package/dist/components/agent-workbench/index.d.ts

@@ -218,6 +218,9 @@ type AgentWorkbenchArtifactWorkspaceIntent = {
     type: 'reorder';
     artifactId: string;
     overArtifactId: string;
+} | {
+    type: 'retry';
+    artifactId: string;
 } | {
     type: 'select';
     artifactId: string;

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

@@ -240,7 +240,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",
@@ -2613,7 +2616,7 @@ function JsonValue({ value }) {
   return /* @__PURE__ */ jsxRuntime.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
     }
@@ -2626,13 +2629,20 @@ function AgentWorkbenchApproval({ approval, className, onDecision }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
         requested ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock3, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }) : approved ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "mt-0.5 size-4 shrink-0 text-primary", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "mt-0.5 size-4 shrink-0 text-destructive-text", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "break-words text-sm font-medium", children: approval.title }),
-          approval.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-sm text-muted-foreground", children: approval.description }) : null,
+          approval.description ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-3 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(JsonValue, { value: approval.requestedAction }) }) : null,
           requested ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -2676,8 +2686,9 @@ function JsonValue2({ value, className }) {
   return /* @__PURE__ */ jsxRuntime.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
@@ -2720,7 +2731,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
       ),
@@ -2754,7 +2765,7 @@ function AgentWorkbenchTool({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn2("space-y-3 border-t border-border px-3 py-3 text-sm", classNames?.content), children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground", children: messages.input }),
             /* @__PURE__ */ jsxRuntime.jsx(JsonValue2, { value: event.payload.input, className: classNames?.input })
@@ -2763,7 +2774,15 @@ function AgentWorkbenchTool({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground", children: messages.output }),
             /* @__PURE__ */ jsxRuntime.jsx(JsonValue2, { value: event.payload.output, className: classNames?.output })
           ] }) : null,
-          event.payload.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive-text", role: "alert", children: event.payload.error }) : null
+          event.payload.error ? /* @__PURE__ */ jsxRuntime.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
         ] })
       ]
     }
@@ -2783,7 +2802,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,
@@ -2812,7 +2831,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
@@ -2907,7 +2926,14 @@ function AgentWorkbenchActivity({
             className: classNames?.item,
             triggerClassName: classNames?.trigger,
             contentClassName: classNames?.content,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap text-muted-foreground", children: event.payload.text })
+            children: /* @__PURE__ */ jsxRuntime.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
         )),
@@ -2921,9 +2947,9 @@ function AgentWorkbenchActivity({
             className: classNames?.item,
             triggerClassName: classNames?.trigger,
             contentClassName: classNames?.content,
-            children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "space-y-2", children: event.payload.steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "space-y-2", children: event.payload.steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex min-w-0 items-start gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status: step.status }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: step.title })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words [overflow-wrap:anywhere]", children: step.title })
             ] }, step.id)) })
           },
           event.payload.planId
@@ -2940,7 +2966,7 @@ function AgentWorkbenchActivity({
             contentClassName: classNames?.content,
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status: event.payload.status }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre-wrap text-muted-foreground", children: event.payload.detail || messages.taskNoDetail })
+              /* @__PURE__ */ jsxRuntime.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
@@ -3600,14 +3626,18 @@ var AgentWorkbenchMessage = React5.forwardRef(
     );
   }
 );
-var AgentWorkbenchMessageContent = React5.forwardRef(function AgentWorkbenchMessageContent2({ children, className, ...contentProps }, ref) {
+var AgentWorkbenchMessageContent = React5.forwardRef(function AgentWorkbenchMessageContent2({ children, className, tabIndex = 0, ...contentProps }, ref) {
   return /* @__PURE__ */ jsxRuntime.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
@@ -4114,19 +4144,27 @@ var ARTIFACT_ICONS = {
   web: lucideReact.Globe2
 };
 function ArtifactThumbnail({ artifact }) {
-  if (artifact.thumbnailUrl) {
+  const [thumbnailFailed, setThumbnailFailed] = React5.useState(false);
+  if (artifact.status === "loading") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-7 shrink-0 animate-pulse rounded bg-muted", "aria-hidden": "true" });
+  }
+  if (artifact.status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded bg-destructive/10 text-destructive-text", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "size-4", "aria-hidden": "true" }) });
+  }
+  if (artifact.thumbnailUrl && !thumbnailFailed) {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex size-7 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4", "aria-hidden": "true" }) });
 }
 function ArtifactGroup({
   title,
@@ -4330,6 +4368,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__ */ jsxRuntime.jsx("div", { className: "flex size-full min-h-48 items-center justify-center p-6 text-center", role: "status", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col items-center gap-3 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-5 animate-spin", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: messages.loading })
+  ] }) }) : activeArtifact.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full min-h-48 items-center justify-center p-6 text-center", role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-sm flex-col items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-destructive/10 text-destructive-text", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "size-5", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words text-sm font-medium text-foreground [overflow-wrap:anywhere]", children: messages.failed }),
+      activeArtifact.description ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "gap-2",
+        onClick: () => onIntent({ type: "retry", artifactId: activeArtifact.id }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4", "aria-hidden": "true" }),
+          messages.retry
+        ]
+      }
+    ) : null
+  ] }) }) : renderArtifact(activeArtifact);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     TabsPrimitive__namespace.Root,
     {
@@ -4401,7 +4463,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
         )) })