@nice-code/action 0.2.17 → 0.2.18

package/build/devtools/browser/index.js

@@ -1974,6 +1974,7 @@ var DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
 var DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
 var DEVTOOL_COLOR_TEXT_FAINT = "#334155";
 var DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
+var DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND = "#1d2942";
 var DEVTOOL_LIST_GROUP_DIVIDER = "#101109";
 var DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
 var DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
@@ -2027,7 +2028,8 @@ var SEMANTIC_COLORS = {
   },
   error: {
     color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-    borderColor: DEVTOOL_COLOR_SEMANTIC_ERROR
+    borderColor: DEVTOOL_COLOR_SEMANTIC_ERROR,
+    subtle: { color: "#FF5C5C9f", borderColor: "transparent" }
   },
   domain: {
     color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
@@ -2036,22 +2038,27 @@ var SEMANTIC_COLORS = {
   },
   handler_local: {
     color: DEVTOOL_COLOR_HANDLER_LOCAL_TEXT,
-    borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER
+    borderColor: DEVTOOL_COLOR_HANDLER_LOCAL_BORDER,
+    subtle: { color: "#4b5563", borderColor: "transparent" }
   },
   handler_external: {
     color: DEVTOOL_COLOR_HANDLER_EXTERNAL_TEXT,
-    borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER
+    borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
+    subtle: { color: "#cfa12a9f", borderColor: "transparent" }
   },
   age: {
     color: DEVTOOL_COLOR_SEMANTIC_METADATA,
-    borderColor: DEVTOOL_SECTION_BACKGROUND
+    borderColor: DEVTOOL_SECTION_BACKGROUND,
+    subtle: { color: "#4b5563", borderColor: "transparent" }
   },
   io_input: {
     color: "#fbbf24",
+    subtle: { color: "#fbbe249f", borderColor: "transparent" },
     borderColor: "#78350f"
   },
   io_output: {
     color: "#a78bfa",
+    subtle: { color: "#a78bfa9f", borderColor: "transparent" },
     borderColor: "#4c1d95"
   },
   default: {
@@ -2310,11 +2317,12 @@ function NiceErrorBody({ error }) {
         style: {
           padding: "12px 14px",
           color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-          fontSize: "14px",
+          fontSize: "1em",
           fontWeight: "700",
           lineHeight: "1.45",
           wordBreak: "break-word",
           fontFamily: SANS,
+          textAlign: "left",
           borderBottom: `1px solid ${DEVTOOL_ERROR_BADGE_BACKGROUND}`
         },
         children: error.message
@@ -2718,6 +2726,8 @@ function StackTraceSection({
 
 // src/devtools/browser/components/ActionErrorDisplay.tsx
 import { jsxDEV as jsxDEV5, Fragment } from "react/jsx-dev-runtime";
+var MONO3 = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+var SANS2 = "ui-sans-serif, system-ui, -apple-system, sans-serif";
 function FullErrorContent({
   label,
   error,
@@ -2743,10 +2753,65 @@ function FullErrorContent({
     ]
   }, undefined, true, undefined, this);
 }
-function ActionErrorDisplay({ entry }) {
+function CompactErrorContent({ value, color }) {
+  if (isNiceErrorJson(value)) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      style: { display: "flex", flexDirection: "column", gap: "1em" },
+      children: [
+        /* @__PURE__ */ jsxDEV5("div", {
+          style: {
+            color,
+            fontFamily: SANS2,
+            fontSize: "12px",
+            fontWeight: 600,
+            lineHeight: "1.4",
+            wordBreak: "break-word",
+            textAlign: "left"
+          },
+          children: value.message
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("div", {
+          style: { display: "flex", flexWrap: "wrap", gap: "6px", alignItems: "center" },
+          children: [
+            value.ids.map((id) => /* @__PURE__ */ jsxDEV5("span", {
+              style: { color, fontFamily: MONO3, fontSize: "10px", opacity: 0.8 },
+              children: id
+            }, id, false, undefined, this)),
+            /* @__PURE__ */ jsxDEV5("span", {
+              style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontFamily: MONO3, fontSize: "10px" },
+              children: value.def.domain
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const text = typeof value === "string" ? value : value != null ? String(value) : null;
+  if (text == null)
+    return null;
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style: {
+      color,
+      fontFamily: SANS2,
+      fontSize: "12px",
+      lineHeight: "1.4",
+      wordBreak: "break-word"
+    },
+    children: text
+  }, undefined, false, undefined, this);
+}
+function ActionErrorDisplay({
+  entry,
+  compact
+}) {
   const { status, error, abortReason, errorStack } = entry;
   if (status === "action-error") {
-    const color = DEVTOOL_COLOR_SEMANTIC_WARNING;
+    const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    if (compact)
+      return /* @__PURE__ */ jsxDEV5(CompactErrorContent, {
+        value: error,
+        color
+      }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
       label: "Action Error",
       error,
@@ -2756,6 +2821,11 @@ function ActionErrorDisplay({ entry }) {
   }
   if (status === "failed") {
     const color = DEVTOOL_COLOR_SEMANTIC_ERROR;
+    if (compact)
+      return /* @__PURE__ */ jsxDEV5(CompactErrorContent, {
+        value: error,
+        color
+      }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(FullErrorContent, {
       label: "Error",
       error,
@@ -2765,6 +2835,11 @@ function ActionErrorDisplay({ entry }) {
   }
   if (status === "aborted") {
     const color = DEVTOOL_COLOR_SEMANTIC_METADATA;
+    if (compact)
+      return /* @__PURE__ */ jsxDEV5(CompactErrorContent, {
+        value: abortReason,
+        color
+      }, undefined, false, undefined, this);
     return /* @__PURE__ */ jsxDEV5(Fragment, {
       children: [
         abortReason != null && (isNiceErrorJson(abortReason) ? /* @__PURE__ */ jsxDEV5(NiceErrorDisplay, {
@@ -3001,7 +3076,7 @@ function getExternalLabel(hop) {
     return null;
   return hop.handlerClient != null ? `${hop.transport ?? "ext"} → ${hop.handlerClient.envId}` : `→ ${hop.transport ?? "ext"}`;
 }
-function HandlerChips({ entry, size }) {
+function HandlerChips({ entry, size, subtle }) {
   const firstHop = entry.meta.routing[0];
   const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
   const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
@@ -3011,11 +3086,13 @@ function HandlerChips({ entry, size }) {
       localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV9(Chip, {
         color: "handler_local" /* handler_local */,
         size,
+        subtle,
         children: localEnvId
       }, undefined, false, undefined, this),
       externalLabel != null && /* @__PURE__ */ jsxDEV9(Chip, {
         color: "handler_external" /* handler_external */,
         size,
+        subtle,
         children: externalLabel
       }, undefined, false, undefined, this)
     ]
@@ -3713,7 +3790,7 @@ function ActionDetailPanel({
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
 import { Box, CircleX as CircleX2, Variable } from "lucide-react";
-import { useState as useState8 } from "react";
+import { Fragment as Fragment7, useState as useState8 } from "react";
 
 // src/devtools/browser/components/Icon.tsx
 import { useState as useState7 } from "react";
@@ -3767,7 +3844,7 @@ function Icon({
 }
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17, Fragment as Fragment8 } from "react/jsx-dev-runtime";
 function getLatestChipColor(status) {
   if (status === "failed")
     return "failed" /* failed */;
@@ -3775,7 +3852,7 @@ function getLatestChipColor(status) {
     return "action_error" /* action_error */;
   if (status === "aborted")
     return "aborted" /* aborted */;
-  return "running_action" /* running_action */;
+  return "success" /* success */;
 }
 var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
 function renderColoredJson2(text) {
@@ -3865,7 +3942,7 @@ function GroupDotTooltip({
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxDEV17(Fragment7, {
+      content: /* @__PURE__ */ jsxDEV17(Fragment8, {
         children: [
           /* @__PURE__ */ jsxDEV17("div", {
             style: { color: dotColor, marginBottom: "1px" },
@@ -3910,7 +3987,7 @@ function GroupDot({
   const [anchor, setAnchor] = useState8(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxDEV17(Fragment7, {
+  return /* @__PURE__ */ jsxDEV17(Fragment8, {
     children: [
       /* @__PURE__ */ jsxDEV17("button", {
         "data-cuid": entry.cuid,
@@ -3951,7 +4028,7 @@ function ActionEntryRow({
   onClick,
   isLatest = false,
   latestTime,
-  childExternalRouteEntries,
+  childEntries,
   breakReasons,
   groupEntries,
   selectedGroupCuid,
@@ -3961,19 +4038,20 @@ function ActionEntryRow({
   const statusIcon = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
   const hasGroup = groupEntries != null && groupEntries.length > 1;
+  const hasBottomContent = childEntries != null && childEntries.length > 0 || (breakReasons?.some((r) => r !== "new input" && r !== "new output") ?? false) || entry.error != null || entry.abortReason != null;
   return /* @__PURE__ */ jsxDEV17("div", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
       position: "relative",
       display: "flex",
-      alignItems: "flex-start",
-      gap: "8px",
+      flexDirection: "column",
+      gap: "5px",
       padding: "10px 12px",
       cursor: "pointer",
-      background: isSelected ? DEVTOOL_DETAIL_HEADER_BACKGROUND : "transparent",
+      background: isSelected ? DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND : "transparent",
       border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
-      borderLeft: isSelected ? `2px solid ${STATUS_COLOR[entry.status]}` : entry.status === "failed" || entry.status === "action-error" ? `2px solid ${STATUS_COLOR[entry.status]}55` : `2px solid transparent`,
+      borderLeft: isSelected ? `2px solid ${STATUS_COLOR[entry.status]}` : entry.status === "failed" || entry.status === "action-error" ? `2px solid ${STATUS_COLOR[entry.status]}55` : `2px solid ${DEVTOOL_PANEL_BORDER}`,
       borderRadius: "3px",
       margin: "2px 4px"
     },
@@ -3981,7 +4059,7 @@ function ActionEntryRow({
       /* @__PURE__ */ jsxDEV17("div", {
         style: {
           position: "absolute",
-          left: "32px",
+          left: "2em",
           top: 0,
           bottom: 0,
           width: "1px",
@@ -3991,63 +4069,43 @@ function ActionEntryRow({
         }
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV17("div", {
-        style: {
-          position: "relative",
-          zIndex: 1,
-          flexShrink: 0,
-          minWidth: "3.5em",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-start"
-        },
-        children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
-          color: getLatestChipColor(entry.status),
-          children: "latest"
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
-          color: "age" /* age */,
-          children: [
-            "+",
-            latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("span", {
-        style: {
-          position: "relative",
-          zIndex: 1,
-          color: statusSemantic,
-          flexShrink: 0,
-          display: "flex",
-          alignItems: "center",
-          animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
-        },
-        children: /* @__PURE__ */ jsxDEV17(Icon, {
-          icon: statusIcon,
-          color: statusSemantic
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("div", {
-        style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.3em" },
+        style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
           /* @__PURE__ */ jsxDEV17("div", {
             style: {
+              position: "relative",
+              zIndex: 1,
+              flexShrink: 0,
+              minWidth: "4em",
               display: "flex",
               alignItems: "center",
-              minWidth: 0,
-              overflow: "hidden",
-              gap: "0.5em"
+              justifyContent: "flex-start"
             },
+            children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
+              color: getLatestChipColor(entry.status),
+              children: "latest"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
+              size: "sm" /* sm */,
+              color: getLatestChipColor(entry.status),
+              children: [
+                "+",
+                latestTime != null ? formatRelativeAge(latestTime - entry.startTime) : "?"
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV17("div", {
+            style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "0.5em" },
             children: [
               /* @__PURE__ */ jsxDEV17("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
-                  fontSize: "11px",
+                  fontSize: "1.1em",
                   fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
                   flexShrink: 1,
-                  minWidth: "24px"
+                  minWidth: "3em"
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
@@ -4055,12 +4113,23 @@ function ActionEntryRow({
                 domain: entry.domain,
                 allDomains: entry.allDomains
               }, undefined, false, undefined, this),
-              entry.input !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
+              /* @__PURE__ */ jsxDEV17(Icon, {
                 icon: Variable,
-                color: "io_input" /* io_input */,
-                tooltip: { content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
-                  value: entry.input
-                }, undefined, false, undefined, this), title: "Input" }
+                color: entry.input !== undefined ? "io_input" /* io_input */ : "default" /* default */,
+                subtle: entry.input === undefined,
+                tooltip: {
+                  content: entry.input !== undefined ? /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                    value: entry.input
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17("span", {
+                    style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+                    children: "No input required or given"
+                  }, undefined, false, undefined, this),
+                  title: "Input"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17(HandlerChips, {
+                entry,
+                size: "sm" /* sm */
               }, undefined, false, undefined, this),
               entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
                 icon: Box,
@@ -4073,96 +4142,118 @@ function ActionEntryRow({
                 icon: CircleX2,
                 color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
                 tooltip: {
-                  content: /* @__PURE__ */ jsxDEV17("div", {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "1em"
-                    },
-                    children: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
-                      entry
-                    }, undefined, false, undefined, this)
+                  content: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
+                    entry,
+                    compact: true
                   }, undefined, false, undefined, this),
                   title: entry.status === "aborted" ? "Aborted" : "Error",
-                  maxWidth: 400
+                  maxWidth: 340
                 }
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: "6px"
-            },
-            children: [
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV17("div", {
+                style: { flex: 1 }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("span", {
                 style: {
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "start",
-                  gap: "5px",
-                  minWidth: 0,
-                  overflow: "hidden"
+                  color: DEVTOOL_COLOR_SEMANTIC_METADATA,
+                  fontSize: "10px",
+                  letterSpacing: "0.02em",
+                  fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                  flexShrink: 0
                 },
-                children: [
-                  /* @__PURE__ */ jsxDEV17(HandlerChips, {
-                    entry,
-                    size: "sm" /* sm */
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV17(ChildDispatchChips, {
-                    childRouteItems: childExternalRouteEntries,
-                    size: "sm" /* sm */
+                children: timestamp
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("span", {
+                style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px", flexShrink: 0 },
+                children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
+                  entry
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasBottomContent && /* @__PURE__ */ jsxDEV17("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "4px",
+          paddingLeft: "4.5em"
+        },
+        children: [
+          childEntries?.map((child) => /* @__PURE__ */ jsxDEV17(Fragment7, {
+            children: [
+              /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: Variable,
+                color: "io_input" /* io_input */,
+                subtle: true,
+                tooltip: {
+                  content: child.input !== undefined ? /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                    value: child.input
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17("span", {
+                    style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+                    children: "No input required or given"
                   }, undefined, false, undefined, this),
-                  breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(Chip, {
-                    color: "default" /* default */,
-                    children: reason
-                  }, reason, false, undefined, this))
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV17("div", {
-                style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 },
-                children: [
-                  /* @__PURE__ */ jsxDEV17("span", {
-                    style: {
-                      color: DEVTOOL_COLOR_SEMANTIC_METADATA,
-                      fontSize: "10px",
-                      letterSpacing: "0.02em",
-                      fontFamily: "ui-sans-serif, system-ui, sans-serif"
-                    },
-                    children: timestamp
+                  title: `Input · ${child.actionId}`
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17(HandlerChips, {
+                entry: child,
+                size: "sm" /* sm */,
+                subtle: true
+              }, undefined, false, undefined, this),
+              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
+                icon: Box,
+                color: "io_output" /* io_output */,
+                subtle: true,
+                tooltip: {
+                  content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                    value: child.output
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV17("span", {
-                    style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px" },
-                    children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
-                      entry
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
+                  title: `Output · ${child.actionId}`
+                }
+              }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this),
-          hasGroup && /* @__PURE__ */ jsxDEV17("div", {
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              alignItems: "center",
-              gap: "5px",
-              paddingBottom: "3px",
-              paddingTop: "1px"
-            },
-            children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
-              entry: e,
-              index: i,
-              total: groupEntries.length,
-              refTime: groupEntries[0].startTime,
-              isActive: selectedGroupCuid === e.cuid,
-              onSelect: () => onSelectGroupEntry?.(e.cuid)
-            }, e.cuid, false, undefined, this))
+          }, child.actionId, true, undefined, this)),
+          breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(Chip, {
+            color: "default" /* default */,
+            subtle: true,
+            children: reason
+          }, reason, false, undefined, this)),
+          (childEntries?.length ?? 0) > 0 && (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV17(Icon, {
+            icon: CircleX2,
+            color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
+            subtle: true,
+            tooltip: {
+              content: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
+                entry,
+                compact: true
+              }, undefined, false, undefined, this),
+              title: entry.status === "aborted" ? "Aborted" : "Error",
+              maxWidth: 340
+            }
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this)
+      }, undefined, true, undefined, this),
+      hasGroup && /* @__PURE__ */ jsxDEV17("div", {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "5px",
+          paddingLeft: "4.6em",
+          paddingBottom: "2px"
+        },
+        children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
+          entry: e,
+          index: i,
+          total: groupEntries.length,
+          refTime: groupEntries[0].startTime,
+          isActive: selectedGroupCuid === e.cuid,
+          onSelect: () => onSelectGroupEntry?.(e.cuid)
+        }, e.cuid, false, undefined, this))
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
@@ -4318,7 +4409,7 @@ function ResizeHandle({
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsxDEV as jsxDEV19, Fragment as Fragment8 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19, Fragment as Fragment9 } from "react/jsx-dev-runtime";
 if (typeof document !== "undefined" && !document.getElementById("__nice-action-devtools-styles")) {
   const style = document.createElement("style");
   style.id = "__nice-action-devtools-styles";
@@ -4429,19 +4520,16 @@ function NiceActionDevtools_Panel({
     const roots = entries.filter((e) => e.status !== "running" && (e.parentCuid == null || !byCuid.has(e.parentCuid)));
     return groupEntries(roots);
   }, [entries]);
-  const childExternalRouteItemsMap = useMemo2(() => {
+  const childEntriesMap = useMemo2(() => {
     const map = new Map;
     for (const entry of entries) {
       if (entry.parentCuid == null)
         continue;
-      const firstHop = entry.meta.routing[0];
-      if (firstHop == null || firstHop.handlerType !== "external")
-        continue;
       const existing = map.get(entry.parentCuid) ?? [];
-      const key = `${firstHop.handlerClient?.envId ?? ""}:${firstHop.transport ?? ""}`;
-      if (!existing.some((r) => `${r.handlerClient?.envId ?? ""}:${r.transport ?? ""}` === key)) {
-        map.set(entry.parentCuid, [...existing, firstHop]);
-      }
+      map.set(entry.parentCuid, [...existing, entry]);
+    }
+    for (const arr of map.values()) {
+      arr.sort((a, b) => a.startTime - b.startTime);
     }
     return map;
   }, [entries]);
@@ -4593,7 +4681,7 @@ function NiceActionDevtools_Panel({
     onSubClick: (cuid, isSelected) => {
       setSelectedCuid(isSelected ? null : cuid);
     },
-    childExternalRouteItemsMap
+    childEntriesMap
   };
   return /* @__PURE__ */ jsxDEV19("div", {
     id: "__nice-action-devtools-panel",
@@ -4661,7 +4749,7 @@ function NiceActionDevtools_Panel({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment8, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment9, {
         children: [
           /* @__PURE__ */ jsxDEV19("div", {
             style: { position: "relative", flex: 1, minHeight: "80px" },
@@ -4715,6 +4803,19 @@ function getBreakReasons(current, previous) {
     reasons.push("new output");
   return reasons;
 }
+function getGroupChildEntries(group, childEntriesMap) {
+  const seen = new Set;
+  const result = [];
+  for (const e of [group.representative, ...group.rest]) {
+    for (const child of childEntriesMap.get(e.cuid) ?? []) {
+      if (!seen.has(child.actionId)) {
+        seen.add(child.actionId);
+        result.push(child);
+      }
+    }
+  }
+  return result.length > 0 ? result.sort((a, b) => a.startTime - b.startTime) : undefined;
+}
 function getFlatItemKey(item) {
   const oldestCuid = item.group.rest[item.group.rest.length - 1]?.cuid ?? item.group.representative.cuid;
   return `g:${oldestCuid}`;
@@ -4724,7 +4825,7 @@ function ActionList({
   selectedCuid,
   onGroupClick,
   onSubClick,
-  childExternalRouteItemsMap,
+  childEntriesMap,
   style
 }) {
   const containerRef = useRef(null);
@@ -4793,7 +4894,7 @@ function ActionList({
             isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
             isLatest: item.groupIndex === 0,
             latestTime,
-            childExternalRouteEntries: childExternalRouteItemsMap.get(group.representative.cuid),
+            childEntries: getGroupChildEntries(group, childEntriesMap),
             breakReasons: item.breakReasons,
             groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
             selectedGroupCuid: selectedCuid,

package/build/index.js

@@ -1193,6 +1193,7 @@ class ActionLocalHandler extends ActionHandler {
     if (state.result != null) {
       return;
     }
+    await Promise.resolve();
     pushHandlerCuid(runningAction.cuid);
     try {
       const rawResult = await handler(state.request);

package/build/types/devtools/browser/components/ActionErrorDisplay.d.ts

@@ -1,4 +1,5 @@
 import type { IDevtoolsActionEntry } from "../../core/ActionDevtools.types";
-export declare function ActionErrorDisplay({ entry }: {
+export declare function ActionErrorDisplay({ entry, compact, }: {
     entry: IDevtoolsActionEntry;
+    compact?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;

package/build/types/devtools/browser/components/HandlerChips.d.ts

@@ -4,6 +4,7 @@ export declare function getExternalLabel(hop: IDevtoolsRouteItem): string | null
 interface IHandlerChipsProps {
     entry: IDevtoolsActionEntry;
     size: ESize;
+    subtle?: boolean;
 }
-export declare function HandlerChips({ entry, size }: IHandlerChipsProps): import("react/jsx-runtime").JSX.Element;
+export declare function HandlerChips({ entry, size, subtle }: IHandlerChipsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/types/devtools/browser/components/action_list/ActionEntryRow.d.ts

@@ -1,11 +1,11 @@
-import type { IDevtoolsActionEntry, IDevtoolsRouteItem } from "../../../core/ActionDevtools.types";
-export declare function ActionEntryRow({ entry, isSelected, onClick, isLatest, latestTime, childExternalRouteEntries, breakReasons, groupEntries, selectedGroupCuid, onSelectGroupEntry, }: {
+import type { IDevtoolsActionEntry } from "../../../core/ActionDevtools.types";
+export declare function ActionEntryRow({ entry, isSelected, onClick, isLatest, latestTime, childEntries, breakReasons, groupEntries, selectedGroupCuid, onSelectGroupEntry, }: {
     entry: IDevtoolsActionEntry;
     isSelected: boolean;
     onClick: () => void;
     isLatest?: boolean;
     latestTime?: number;
-    childExternalRouteEntries?: IDevtoolsRouteItem[];
+    childEntries?: IDevtoolsActionEntry[];
     breakReasons?: string[];
     groupEntries?: IDevtoolsActionEntry[];
     selectedGroupCuid?: string | null;

package/build/types/devtools/core/devtools_colors.d.ts

@@ -13,6 +13,7 @@ export declare const DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
 export declare const DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
 export declare const DEVTOOL_COLOR_TEXT_FAINT = "#334155";
 export declare const DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
+export declare const DEVTOOL_LIST_HEADER_SELECTED_BACKGROUND = "#1d2942";
 export declare const DEVTOOL_LIST_GROUP_DIVIDER = "#101109";
 export declare const DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
 export declare const DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-code/action",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "private": false,
   "type": "module",
   "exports": {
@@ -44,8 +44,8 @@
     "build-types": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "@nice-code/common-errors": "0.2.17",
-    "@nice-code/error": "0.2.17",
+    "@nice-code/common-errors": "0.2.18",
+    "@nice-code/error": "0.2.18",
     "@standard-schema/spec": "^1.1.0",
     "@tanstack/react-virtual": "^3.13.26",
     "http-status-codes": "^2.3.0",