@ash-cloud/ash-ui 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -636,6 +636,16 @@ function ClipboardListIcon({ className }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16h.01" })
   ] });
 }
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] });
+}
 function StatusIndicator({ status, size = "sm", className }) {
   const sizeClasses = {
     sm: "w-2 h-2",
@@ -1534,6 +1544,163 @@ function ToolExecutionGroup({
     }
   );
 }
+function formatDuration(startMs, endMs) {
+  const duration = endMs - startMs;
+  if (duration < 1e3) return `${duration}ms`;
+  return `${(duration / 1e3).toFixed(1)}s`;
+}
+function getToolLabel(toolName, summary) {
+  if (summary && summary.length > 0 && summary.length < 50) {
+    return summary;
+  }
+  const cleaned = toolName.replace(/^mcp__[^_]+__/, "").replace(/Tool$/, "").replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2");
+  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+}
+function toStepStatus(status) {
+  switch (status) {
+    case "pending":
+      return "running";
+    case "success":
+      return "success";
+    case "failed":
+      return "error";
+    default:
+      return "pending";
+  }
+}
+function StepIcon({ status }) {
+  const iconClass = "w-3.5 h-3.5";
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: cn(iconClass, "animate-spin text-[var(--ash-accent)]") });
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: cn(iconClass, "text-[var(--ash-accent)]") });
+    case "error":
+      return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { className: cn(iconClass, "text-red-500") });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolIcon, { className: cn(iconClass, "text-white/40") });
+  }
+}
+function StepAccordion({
+  toolCalls,
+  defaultExpanded = false,
+  isExpanded: controlledExpanded,
+  onToggle,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
+  const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
+  const handleToggle = react.useCallback(() => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalExpanded((prev) => !prev);
+    }
+  }, [onToggle]);
+  if (toolCalls.length === 0) {
+    return null;
+  }
+  const completedSteps = toolCalls.filter((tc) => tc.status === "success" || tc.status === "failed").length;
+  const runningStep = toolCalls.find((tc) => tc.status === "pending");
+  const hasError = toolCalls.some((tc) => tc.status === "failed");
+  const allComplete = completedSteps === toolCalls.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border overflow-hidden",
+        hasError ? "border-red-500/30" : allComplete ? "border-[var(--ash-accent)]/30" : "border-yellow-500/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggle,
+            className: "w-full flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 transition-colors text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ChevronDownIcon,
+                {
+                  className: cn(
+                    "w-4 h-4 text-white/40 transition-transform duration-200 flex-shrink-0",
+                    !isExpanded && "-rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: runningStep ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "w-3.5 h-3.5 animate-spin text-[var(--ash-accent)] flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/80 truncate", children: getToolLabel(runningStep.toolName, runningStep.summary) })
+              ] }) : hasError ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { className: "w-3.5 h-3.5 text-red-500 flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-red-400 truncate", children: "Completed with errors" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-3.5 h-3.5 text-[var(--ash-accent)] flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-white/70 truncate", children: [
+                  completedSteps,
+                  " step",
+                  completedSteps !== 1 ? "s" : "",
+                  " completed"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded-full bg-white/10 text-white/50 flex-shrink-0", children: [
+                completedSteps,
+                "/",
+                toolCalls.length
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-white/10 ash-accordion-content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: toolCalls.map((toolCall, index) => {
+          const stepStatus = toStepStatus(toolCall.status);
+          const startTime = toolCall.startedAt ? new Date(toolCall.startedAt).getTime() : 0;
+          const endTime = toolCall.completedAt ? new Date(toolCall.completedAt).getTime() : 0;
+          const hasDuration = startTime > 0 && endTime > 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "px-3 py-2 flex items-start gap-2",
+                stepStatus === "running" && "bg-[var(--ash-accent)]/5",
+                stepStatus === "error" && "bg-red-500/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0 pt-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/40 w-4 text-right", children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(StepIcon, { status: stepStatus })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-sm",
+                          stepStatus === "running" && "text-[var(--ash-accent)]",
+                          stepStatus === "success" && "text-white/70",
+                          stepStatus === "error" && "text-red-400",
+                          stepStatus === "pending" && "text-white/40"
+                        ),
+                        children: getToolLabel(toolCall.toolName, toolCall.summary)
+                      }
+                    ),
+                    hasDuration && (stepStatus === "success" || stepStatus === "error") && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/40", children: formatDuration(startTime, endTime) })
+                  ] }),
+                  toolCall.isError && toolCall.actionType && "result" in toolCall.actionType && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1 text-red-400/80 truncate", children: String(toolCall.actionType.result?.value || "Error") })
+                ] })
+              ]
+            },
+            toolCall.id
+          );
+        }) }) })
+      ]
+    }
+  );
+}
 
 // src/types.ts
 function isCommandRunAction(action) {
@@ -1652,7 +1819,13 @@ function MessageList({
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsxRuntime.jsx(
+          StepAccordion,
+          {
+            toolCalls,
+            defaultExpanded: config.defaultExpanded
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           ToolExecutionGroup,
           {
             toolCalls,
@@ -1930,6 +2103,238 @@ function TodoPanel({
     }
   );
 }
+function EnvVarsPanel({
+  envVars,
+  onChange,
+  defaultCollapsed = true,
+  className,
+  label = "Environment Variables",
+  helperText = "These environment variables will be available in the sandbox for new sessions."
+}) {
+  const [expanded, setExpanded] = react.useState(!defaultCollapsed);
+  const [newEnvKey, setNewEnvKey] = react.useState("");
+  const [newEnvValue, setNewEnvValue] = react.useState("");
+  const hasEnvVars = Object.keys(envVars).length > 0;
+  const handleAddEnvVar = react.useCallback(() => {
+    const key = newEnvKey.trim();
+    const val = newEnvValue.trim();
+    if (key) {
+      onChange({ ...envVars, [key]: val });
+      setNewEnvKey("");
+      setNewEnvValue("");
+    }
+  }, [envVars, newEnvKey, newEnvValue, onChange]);
+  const handleRemoveEnvVar = react.useCallback(
+    (key) => {
+      const newEnvVars = { ...envVars };
+      delete newEnvVars[key];
+      onChange(newEnvVars);
+    },
+    [envVars, onChange]
+  );
+  const handleEnvKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAddEnvVar();
+      }
+    },
+    [handleAddEnvVar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ash-env-vars-panel", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "ash-env-vars-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: cn("ash-env-vars-chevron", expanded && "ash-env-vars-chevron-expanded"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-label", children: label }),
+          hasEnvVars && !expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-badge", children: Object.keys(envVars).length })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-content", children: [
+      Object.entries(envVars).map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-key", children: key }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-value", children: val || "(empty)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveEnvVar(key),
+            className: "ash-env-vars-remove",
+            title: "Remove variable",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "w-4 h-4",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }, key)),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-add", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvKey,
+            onChange: (e) => setNewEnvKey(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "")),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "KEY",
+            className: "ash-env-vars-input ash-env-vars-input-key"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvValue,
+            onChange: (e) => setNewEnvValue(e.target.value),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "value",
+            className: "ash-env-vars-input ash-env-vars-input-value"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleAddEnvVar,
+            disabled: !newEnvKey.trim(),
+            className: "ash-env-vars-add-button",
+            children: "Add"
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ash-env-vars-helper", children: helperText })
+    ] })
+  ] });
+}
+function DisplayModeToggle({
+  className,
+  showLabel = true,
+  labels = { inline: "Inline", compact: "Compact", accordion: "Steps" },
+  modes = ["inline", "compact", "accordion"]
+}) {
+  const { config, setMode } = useDisplayMode();
+  const currentMode = config.mode;
+  const currentIndex = modes.indexOf(currentMode);
+  const effectiveIndex = currentIndex === -1 ? 0 : currentIndex;
+  const nextIndex = (effectiveIndex + 1) % modes.length;
+  const nextMode = modes[nextIndex];
+  const handleClick = () => {
+    setMode(nextMode);
+  };
+  const getIcon = (mode) => {
+    switch (mode) {
+      case "inline":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              }
+            )
+          }
+        );
+      case "compact":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
+              }
+            )
+          }
+        );
+      case "accordion":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+              }
+            )
+          }
+        );
+    }
+  };
+  const getLabel = (mode) => {
+    return labels[mode] || mode.charAt(0).toUpperCase() + mode.slice(1);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn("ash-display-mode-toggle", className),
+      title: `Switch to ${nextMode} mode`,
+      children: [
+        getIcon(currentMode),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: getLabel(currentMode) })
+      ]
+    }
+  );
+}
 var DEFAULT_WORDS = [
   "Thinking",
   "Reasoning",
@@ -2559,7 +2964,10 @@ exports.CompactToolStatusLine = CompactToolStatusLine;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_DISPLAY_CONFIG = DEFAULT_DISPLAY_CONFIG;
 exports.DisplayModeProvider = DisplayModeProvider;
+exports.DisplayModeToggle = DisplayModeToggle;
 exports.EditIcon = EditIcon;
+exports.EnvVarsPanel = EnvVarsPanel;
+exports.ErrorIcon = ErrorIcon;
 exports.ErrorMessage = ErrorMessage;
 exports.FileIcon = FileIcon;
 exports.FilePlusIcon = FilePlusIcon;
@@ -2581,7 +2989,9 @@ exports.PlugIcon = PlugIcon;
 exports.SearchIcon = SearchIcon;
 exports.SendIcon = SendIcon;
 exports.SparklesIcon = SparklesIcon;
+exports.SpinnerIcon = SpinnerIcon;
 exports.StatusIndicator = StatusIndicator;
+exports.StepAccordion = StepAccordion;
 exports.StopCircleIcon = StopCircleIcon;
 exports.StreamingText = StreamingText;
 exports.SunIcon = SunIcon;