@nice-code/action 0.2.19 → 0.3.1

package/build/devtools/browser/index.js

@@ -1957,7 +1957,7 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState9 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState9 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -2074,7 +2074,7 @@ import { useMemo, useState as useState7 } from "react";
 function getSizeValue(size) {
   switch (size) {
     case "sm" /* sm */:
-      return 0.8;
+      return 0.75;
     case "md" /* md */:
       return 1;
     case "lg" /* lg */:
@@ -3295,8 +3295,7 @@ function Chip({
   size = "md" /* md */,
   rounded = false,
   tooltip,
-  children,
-  style
+  children
 }) {
   const [anchor, setAnchor] = useState3(null);
   const hasTooltip = tooltip != null;
@@ -3310,6 +3309,8 @@ function Chip({
         onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
         onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
         style: {
+          display: "flex",
+          alignItems: "center",
           color: resolvedColor,
           fontSize,
           background: DEVTOOL_LIST_BASE_BACKGROUND,
@@ -3318,8 +3319,7 @@ function Chip({
           borderRadius: rounded ? "0.6rem" : "3px",
           flexShrink: 0,
           whiteSpace: "nowrap",
-          cursor: hasTooltip ? "default" : undefined,
-          ...style
+          cursor: hasTooltip ? "default" : undefined
         },
         children
       }, undefined, false, undefined, this),
@@ -3334,23 +3334,24 @@ function Chip({
 // src/devtools/browser/components/Icon.tsx
 import { useState as useState4 } from "react";
 import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-var ICON_SIZE_PX = {
-  ["sm" /* sm */]: 13,
-  ["md" /* md */]: 16,
-  ["lg" /* lg */]: 18
-};
+var BASE_ICON_SIDE_LENGTH_EM = 1.6;
+var ICON_GAP_EM = 0.3;
 function Icon({
   icon: IconComponent,
   color,
   size = "md" /* md */,
   subtle = false,
   tooltip,
-  style
+  style,
+  noBackground = false
 }) {
   const [anchor, setAnchor] = useState4(null);
   const hasTooltip = tooltip != null;
   const colorEntry = SEMANTIC_COLORS[color];
   const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
+  const finalIcons = Array.isArray(IconComponent) ? IconComponent : [IconComponent];
+  const fullIconWidthEm = (finalIcons.length - 1) * ICON_GAP_EM + finalIcons.length * BASE_ICON_SIDE_LENGTH_EM * getSizeValue(size);
+  const iconSideLengthEm = `${BASE_ICON_SIDE_LENGTH_EM * getSizeValue(size)}em`;
   return /* @__PURE__ */ jsxDEV8(Fragment3, {
     children: [
       /* @__PURE__ */ jsxDEV8("div", {
@@ -3358,20 +3359,24 @@ function Icon({
         onMouseLeave: hasTooltip ? () => setAnchor(null) : undefined,
         style: {
           borderRadius: "0.4em",
-          height: `${1.65 * getSizeValue(size)}em`,
-          width: `${1.65 * getSizeValue(size)}em`,
+          width: `${fullIconWidthEm}em`,
+          height: iconSideLengthEm,
+          padding: "0.15em",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "rgba(0,0,0,0.4)",
+          background: noBackground ? "none" : "rgba(0,0,0,0.4)",
           color: resolvedColor,
           flexShrink: 0,
           cursor: hasTooltip ? "default" : undefined,
           ...style
         },
-        children: /* @__PURE__ */ jsxDEV8(IconComponent, {
-          size: ICON_SIZE_PX[size],
-          strokeWidth: 1.5
+        children: /* @__PURE__ */ jsxDEV8("div", {
+          style: { display: "flex", alignItems: "center", gap: `${ICON_GAP_EM}em` },
+          children: finalIcons.map((Comp, i) => /* @__PURE__ */ jsxDEV8(Comp, {
+            size: iconSideLengthEm,
+            strokeWidth: 2.6
+          }, `${Comp.name}-${i}`, false, undefined, this))
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       anchor != null && hasTooltip && /* @__PURE__ */ jsxDEV8(Tooltip, {
@@ -3455,26 +3460,28 @@ function DomainChip({
       title: "Action Domain",
       align: "edge"
     },
-    style: { display: "flex", alignItems: "center", gap: "0.4em" },
-    children: [
-      /* @__PURE__ */ jsxDEV9("span", {
-        style: {
-          height: "1.2em",
-          width: "1.2em",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsxDEV9(Component, {
-          height: "1.2em",
-          width: "1.2em"
+    children: /* @__PURE__ */ jsxDEV9("div", {
+      style: { display: "flex", alignItems: "center", gap: "0.4em" },
+      children: [
+        /* @__PURE__ */ jsxDEV9("span", {
+          style: {
+            height: "1.2em",
+            width: "1.2em",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxDEV9(Component, {
+            height: "1.2em",
+            width: "1.2em"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV9("span", {
+          children: domain
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9("span", {
-        children: domain
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 
 // src/devtools/browser/components/HandlerChips.tsx
@@ -4197,19 +4204,18 @@ function ActionDetailPanel({
   }, undefined, true, undefined, this);
 }
 
+// src/devtools/browser/components/action_list/ActionList.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from "react";
+
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { Box, CircleX as CircleX2, Variable } from "lucide-react";
-import { Fragment as Fragment7, useState as useState8 } from "react";
-import { jsxDEV as jsxDEV17, Fragment as Fragment8 } from "react/jsx-dev-runtime";
-function getLatestChipColor(status) {
-  if (status === "failed")
-    return "failed" /* failed */;
-  if (status === "action-error")
-    return "action_error" /* action_error */;
-  if (status === "aborted")
-    return "aborted" /* aborted */;
-  return "success" /* success */;
-}
+import { CircleX as CircleX3, PackageCheck as PackageCheck2, Variable as Variable2 } from "lucide-react";
+import { Fragment as Fragment8, useState as useState8 } from "react";
+
+// src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
+import { CircleX as CircleX2, PackageCheck, Sparkle, Variable } from "lucide-react";
+
+// src/devtools/browser/components/action_list/IoTooltipContent.tsx
+import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
 var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
 function renderColoredJson2(text) {
   const nodes = [];
@@ -4281,6 +4287,118 @@ function IoTooltipContent({ value }) {
     children: renderColoredJson2(text)
   }, undefined, false, undefined, this);
 }
+
+// src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
+import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+var ActionInputAndOutputChip = ({
+  entry,
+  breakReasons,
+  subtle,
+  size = "md" /* md */
+}) => {
+  const firstHop = entry.meta.routing[0];
+  const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
+  const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
+  const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
+  const isLocal = localEnvId != null && (firstHopIsLocal || externalLabel == null);
+  const color = isLocal ? "handler_local" /* handler_local */ : "handler_external" /* handler_external */;
+  const isNewInput = breakReasons.includes("new_input" /* new_input */);
+  const isNewOutput = breakReasons.includes("new_output" /* new_output */);
+  const hasError = entry.error != null || entry.abortReason != null;
+  const sizeNum = getSizeValue(size);
+  const newIconSizeEm = `${sizeNum * 0.9}em`;
+  const label = `${(isLocal ? localEnvId : externalLabel) ?? "unknown"}`;
+  const newSparkleComp = /* @__PURE__ */ jsxDEV18("div", {
+    style: {
+      opacity: 0.9,
+      alignSelf: "start",
+      marginLeft: "-0.6em"
+    },
+    children: /* @__PURE__ */ jsxDEV18(Sparkle, {
+      strokeWidth: "0.2em",
+      color: "rgba(243, 250, 140, 1)",
+      width: newIconSizeEm,
+      height: newIconSizeEm
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV18(Chip, {
+    color,
+    size,
+    subtle,
+    children: /* @__PURE__ */ jsxDEV18("div", {
+      style: { display: "flex", alignItems: "center", gap: "0.4em" },
+      children: [
+        /* @__PURE__ */ jsxDEV18(Icon, {
+          noBackground: true,
+          icon: Variable,
+          color,
+          subtle: subtle || entry.input === undefined,
+          tooltip: {
+            content: entry.input !== undefined ? /* @__PURE__ */ jsxDEV18(IoTooltipContent, {
+              value: entry.input
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV18("span", {
+              style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
+              children: "No input required or given"
+            }, undefined, false, undefined, this),
+            title: isNewInput ? "New Input" : "Input"
+          }
+        }, undefined, false, undefined, this),
+        isNewInput && newSparkleComp,
+        /* @__PURE__ */ jsxDEV18("span", {
+          style: { opacity: 0.6 },
+          color,
+          children: "→"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV18("span", {
+          style: { opacity: 0.8 },
+          children: label
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV18("span", {
+          style: { opacity: 0.6 },
+          color,
+          children: "→"
+        }, undefined, false, undefined, this),
+        entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsxDEV18(Icon, {
+          noBackground: true,
+          icon: PackageCheck,
+          color: !hasError ? color : "default" /* default */,
+          tooltip: {
+            content: /* @__PURE__ */ jsxDEV18(IoTooltipContent, {
+              value: entry.output
+            }, undefined, false, undefined, this),
+            title: isNewOutput ? "New Output" : "Output"
+          }
+        }, undefined, false, undefined, this),
+        isNewOutput && newSparkleComp,
+        (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV18(Icon, {
+          noBackground: true,
+          icon: CircleX2,
+          color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
+          tooltip: {
+            content: /* @__PURE__ */ jsxDEV18(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, false, undefined, this);
+};
+
+// src/devtools/browser/components/action_list/ActionEntryRow.tsx
+import { jsxDEV as jsxDEV19, Fragment as Fragment9 } from "react/jsx-dev-runtime";
+function getLatestChipColor(status) {
+  if (status === "failed")
+    return "failed" /* failed */;
+  if (status === "action-error")
+    return "action_error" /* action_error */;
+  if (status === "aborted")
+    return "aborted" /* aborted */;
+  return "success" /* success */;
+}
 function GroupDotTooltip({
   entry,
   index,
@@ -4293,14 +4411,14 @@ function GroupDotTooltip({
   const deltaMs = refTime - entry.startTime;
   const relStr = index === 0 ? "latest run" : `−${formatRelativeAge(deltaMs)} from latest`;
   const durationStr = entry.endTime != null ? `${entry.endTime - entry.startTime}ms` : "running…";
-  return /* @__PURE__ */ jsxDEV17(Tooltip, {
+  return /* @__PURE__ */ jsxDEV19(Tooltip, {
     anchor,
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxDEV17(Fragment8, {
+      content: /* @__PURE__ */ jsxDEV19(Fragment9, {
         children: [
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { color: dotColor, marginBottom: "1px" },
             children: [
               symbol,
@@ -4310,15 +4428,15 @@ function GroupDotTooltip({
               total
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
             children: formatTimestamp(entry.startTime)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { color: DEVTOOL_COLOR_TEXT_MUTED },
             children: durationStr
           }, undefined, false, undefined, this),
-          index > 0 && /* @__PURE__ */ jsxDEV17("div", {
+          index > 0 && /* @__PURE__ */ jsxDEV19("div", {
             style: {
               color: DEVTOOL_COLOR_TEXT_MUTED,
               marginTop: "3px",
@@ -4343,9 +4461,9 @@ function GroupDot({
   const [anchor, setAnchor] = useState8(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxDEV17(Fragment8, {
+  return /* @__PURE__ */ jsxDEV19(Fragment9, {
     children: [
-      /* @__PURE__ */ jsxDEV17("button", {
+      /* @__PURE__ */ jsxDEV19("button", {
         "data-cuid": entry.cuid,
         onClick: (e) => {
           e.stopPropagation();
@@ -4367,7 +4485,7 @@ function GroupDot({
           transition: "transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease"
         }
       }, undefined, false, undefined, this),
-      hovered && anchor != null && /* @__PURE__ */ jsxDEV17(GroupDotTooltip, {
+      hovered && anchor != null && /* @__PURE__ */ jsxDEV19(GroupDotTooltip, {
         entry,
         index,
         total,
@@ -4392,8 +4510,8 @@ function ActionEntryRow({
 }) {
   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", {
+  const hasBottomContent = childEntries != null && childEntries.length > 0 || (breakReasons?.some((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */) ?? false) || entry.error != null || entry.abortReason != null;
+  return /* @__PURE__ */ jsxDEV19("div", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
@@ -4410,7 +4528,7 @@ function ActionEntryRow({
       margin: "2px 4px"
     },
     children: [
-      /* @__PURE__ */ jsxDEV17("div", {
+      /* @__PURE__ */ jsxDEV19("div", {
         style: {
           position: "absolute",
           left: "2em",
@@ -4422,10 +4540,10 @@ function ActionEntryRow({
           zIndex: 0
         }
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("div", {
+      /* @__PURE__ */ jsxDEV19("div", {
         style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: {
               position: "relative",
               zIndex: 1,
@@ -4435,11 +4553,11 @@ function ActionEntryRow({
               alignItems: "center",
               justifyContent: "flex-start"
             },
-            children: isLatest ? /* @__PURE__ */ jsxDEV17(Chip, {
+            children: isLatest ? /* @__PURE__ */ jsxDEV19(Chip, {
               size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: "latest"
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17(Chip, {
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV19(Chip, {
               size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: [
@@ -4448,10 +4566,10 @@ function ActionEntryRow({
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV17("div", {
+          /* @__PURE__ */ jsxDEV19("div", {
             style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "0.5em" },
             children: [
-              /* @__PURE__ */ jsxDEV17("span", {
+              /* @__PURE__ */ jsxDEV19("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
                   fontSize: "1em",
@@ -4465,47 +4583,14 @@ function ActionEntryRow({
                 },
                 children: entry.actionId
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17(Icon, {
-                icon: Variable,
-                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"
-                }
+              /* @__PURE__ */ jsxDEV19(ActionInputAndOutputChip, {
+                breakReasons,
+                entry
               }, 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,
-                color: "io_output" /* io_output */,
-                tooltip: { content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
-                  value: entry.output
-                }, undefined, false, undefined, this), title: "Output" }
-              }, undefined, false, undefined, this),
-              (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV17(Icon, {
-                icon: CircleX2,
-                color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
-                tooltip: {
-                  content: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
-                    entry,
-                    compact: true
-                  }, undefined, false, undefined, this),
-                  title: entry.status === "aborted" ? "Aborted" : "Error",
-                  maxWidth: 340
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17("div", {
+              /* @__PURE__ */ jsxDEV19("div", {
                 style: { flex: 1 }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17("span", {
+              /* @__PURE__ */ jsxDEV19("span", {
                 style: {
                   color: DEVTOOL_COLOR_SEMANTIC_METADATA,
                   fontSize: "10px",
@@ -4515,9 +4600,9 @@ function ActionEntryRow({
                 },
                 children: timestamp
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17("span", {
+              /* @__PURE__ */ jsxDEV19("span", {
                 style: { color: DEVTOOL_COLOR_SEMANTIC_WARNING, fontSize: "11px", flexShrink: 0 },
-                children: /* @__PURE__ */ jsxDEV17(DurationDisplay, {
+                children: /* @__PURE__ */ jsxDEV19(DurationDisplay, {
                   entry
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
@@ -4525,7 +4610,7 @@ function ActionEntryRow({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasBottomContent && /* @__PURE__ */ jsxDEV17("div", {
+      hasBottomContent && /* @__PURE__ */ jsxDEV19("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4534,33 +4619,35 @@ function ActionEntryRow({
           paddingLeft: "4.5em"
         },
         children: [
-          childEntries?.map((child) => /* @__PURE__ */ jsxDEV17(Fragment7, {
+          childEntries?.map((child) => /* @__PURE__ */ jsxDEV19(Fragment8, {
             children: [
-              /* @__PURE__ */ jsxDEV17(Icon, {
-                icon: Variable,
+              /* @__PURE__ */ jsxDEV19(Icon, {
+                size: "sm" /* sm */,
+                icon: Variable2,
                 color: "io_input" /* io_input */,
                 subtle: true,
                 tooltip: {
-                  content: child.input !== undefined ? /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                  content: child.input !== undefined ? /* @__PURE__ */ jsxDEV19(IoTooltipContent, {
                     value: child.input
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV17("span", {
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV19("span", {
                     style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
                     children: "No input required or given"
                   }, undefined, false, undefined, this),
                   title: `Input · ${child.actionId}`
                 }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV17(HandlerChips, {
+              /* @__PURE__ */ jsxDEV19(HandlerChips, {
                 entry: child,
                 size: "sm" /* sm */,
                 subtle: true
               }, undefined, false, undefined, this),
-              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV17(Icon, {
-                icon: Box,
+              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV19(Icon, {
+                size: "sm" /* sm */,
+                icon: PackageCheck2,
                 color: "io_output" /* io_output */,
                 subtle: true,
                 tooltip: {
-                  content: /* @__PURE__ */ jsxDEV17(IoTooltipContent, {
+                  content: /* @__PURE__ */ jsxDEV19(IoTooltipContent, {
                     value: child.output
                   }, undefined, false, undefined, this),
                   title: `Output · ${child.actionId}`
@@ -4568,17 +4655,18 @@ function ActionEntryRow({
               }, undefined, false, undefined, this)
             ]
           }, child.actionId, true, undefined, this)),
-          breakReasons?.filter((r) => r !== "new input" && r !== "new output").map((reason) => /* @__PURE__ */ jsxDEV17(Chip, {
+          breakReasons?.filter((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */).map((reason) => /* @__PURE__ */ jsxDEV19(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,
+          (childEntries?.length ?? 0) > 0 && (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV19(Icon, {
+            size: "sm" /* sm */,
+            icon: CircleX3,
             color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
             subtle: true,
             tooltip: {
-              content: /* @__PURE__ */ jsxDEV17(ActionErrorDisplay, {
+              content: /* @__PURE__ */ jsxDEV19(ActionErrorDisplay, {
                 entry,
                 compact: true
               }, undefined, false, undefined, this),
@@ -4588,7 +4676,7 @@ function ActionEntryRow({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasGroup && /* @__PURE__ */ jsxDEV17("div", {
+      hasGroup && /* @__PURE__ */ jsxDEV19("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4597,7 +4685,7 @@ function ActionEntryRow({
           paddingLeft: "4.6em",
           paddingBottom: "2px"
         },
-        children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV17(GroupDot, {
+        children: groupEntries.map((e, i) => /* @__PURE__ */ jsxDEV19(GroupDot, {
           entry: e,
           index: i,
           total: groupEntries.length,
@@ -4610,8 +4698,130 @@ function ActionEntryRow({
   }, undefined, true, undefined, this);
 }
 
+// src/devtools/browser/components/action_list/ActionList.tsx
+import { jsxDEV as jsxDEV20 } from "react/jsx-dev-runtime";
+function getBreakReasons(current, previous) {
+  const reasons = [];
+  const inputChanged = current.inputHash != null && previous.inputHash != null ? current.inputHash !== previous.inputHash : safeStringify(current.input, 0) !== safeStringify(previous.input, 0);
+  if (inputChanged)
+    reasons.push("new_input" /* new_input */);
+  const outputChanged = current.outputHash != null && previous.outputHash != null && current.outputHash !== previous.outputHash;
+  if (outputChanged)
+    reasons.push("new_output" /* 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}`;
+}
+function ActionList({
+  groups,
+  selectedCuid,
+  onGroupClick,
+  onSubClick,
+  childEntriesMap,
+  style
+}) {
+  const containerRef = useRef2(null);
+  const latestTime = groups[0]?.representative.startTime;
+  const flatItems = useMemo2(() => {
+    return groups.map((group, gi) => {
+      const prevGroup = groups[gi + 1];
+      let breakReasons = [];
+      if (prevGroup != null && prevGroup.representative.actionId === group.representative.actionId && prevGroup.representative.domain === group.representative.domain) {
+        const reasons = getBreakReasons(group.representative, prevGroup.representative);
+        if (reasons.length > 0)
+          breakReasons = reasons;
+      }
+      return { group, groupIndex: gi, breakReasons };
+    });
+  }, [groups]);
+  const prevSelectedRef = useRef2(selectedCuid);
+  useEffect3(() => {
+    if (selectedCuid === prevSelectedRef.current)
+      return;
+    prevSelectedRef.current = selectedCuid;
+    if (selectedCuid == null)
+      return;
+    let repCuid = selectedCuid;
+    for (const item of flatItems) {
+      if (item.group.rest.some((e) => e.cuid === selectedCuid)) {
+        repCuid = item.group.representative.cuid;
+        break;
+      }
+    }
+    containerRef.current?.querySelector(`[data-cuid="${repCuid}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [selectedCuid, flatItems]);
+  if (groups.length === 0) {
+    return /* @__PURE__ */ jsxDEV20("div", {
+      style,
+      children: /* @__PURE__ */ jsxDEV20("div", {
+        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
+        children: "No actions recorded yet"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV20("div", {
+    ref: containerRef,
+    style,
+    children: [
+      flatItems.map((item) => {
+        const key = getFlatItemKey(item);
+        const { group } = item;
+        return /* @__PURE__ */ jsxDEV20("div", {
+          style: {
+            borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
+            position: "relative",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV20("div", {
+              style: {
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
+                animation: "__nice-action-shine 0.65s ease-out forwards"
+              }
+            }, group.representative.cuid, false, undefined, this),
+            /* @__PURE__ */ jsxDEV20(ActionEntryRow, {
+              entry: group.representative,
+              isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
+              isLatest: item.groupIndex === 0,
+              latestTime,
+              childEntries: getGroupChildEntries(group, childEntriesMap),
+              breakReasons: item.breakReasons,
+              groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
+              selectedGroupCuid: selectedCuid,
+              onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
+              onClick: () => onGroupClick(group)
+            }, undefined, false, undefined, this)
+          ]
+        }, key, true, undefined, this);
+      }),
+      /* @__PURE__ */ jsxDEV20("div", {
+        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
+        children: "Start of action history"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/devtools/browser/components/PanelChrome.tsx
-import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
 var DOCKED_SIZE_MIN = 140;
 var POSITION_GRID = [
   ["top-left", "dock-top", "top-right"],
@@ -4635,7 +4845,7 @@ function PanelHeader({
   onClose,
   onClear
 }) {
-  return /* @__PURE__ */ jsxDEV18("div", {
+  return /* @__PURE__ */ jsxDEV21("div", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -4646,18 +4856,18 @@ function PanelHeader({
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsxDEV18("span", {
+      /* @__PURE__ */ jsxDEV21("span", {
         style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM, fontWeight: "bold", fontSize: "11px" },
         children: "⚡ nice-action devtools"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV18("div", {
+      /* @__PURE__ */ jsxDEV21("div", {
         style: { display: "flex", gap: "10px", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsxDEV18(PositionPicker, {
+          /* @__PURE__ */ jsxDEV21(PositionPicker, {
             position,
             onChange: onPositionChange
           }, undefined, false, undefined, this),
-          onClear != null && /* @__PURE__ */ jsxDEV18("button", {
+          onClear != null && /* @__PURE__ */ jsxDEV21("button", {
             onClick: onClear,
             style: {
               background: "none",
@@ -4669,7 +4879,7 @@ function PanelHeader({
             },
             children: "clear"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV18("button", {
+          /* @__PURE__ */ jsxDEV21("button", {
             onClick: onClose,
             style: {
               background: "none",
@@ -4691,18 +4901,18 @@ function PositionPicker({
   position,
   onChange
 }) {
-  return /* @__PURE__ */ jsxDEV18("div", {
+  return /* @__PURE__ */ jsxDEV21("div", {
     title: "Move / dock panel",
     style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
     children: POSITION_GRID.flat().map((pos) => {
       if (pos == null)
-        return /* @__PURE__ */ jsxDEV18("div", {
+        return /* @__PURE__ */ jsxDEV21("div", {
           style: { width: "9px", height: "9px" }
         }, "center-empty", false, undefined, this);
       const isDock = pos.startsWith("dock-");
       const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
       const isActive = pos === position;
-      return /* @__PURE__ */ jsxDEV18("div", {
+      return /* @__PURE__ */ jsxDEV21("div", {
         title: pos,
         onClick: () => onChange(pos),
         style: {
@@ -4713,7 +4923,7 @@ function PositionPicker({
           justifyContent: "center",
           cursor: "pointer"
         },
-        children: /* @__PURE__ */ jsxDEV18("div", {
+        children: /* @__PURE__ */ jsxDEV21("div", {
           style: {
             width: isDock ? isTopBottom ? "9px" : "3px" : "7px",
             height: isDock ? isTopBottom ? "3px" : "9px" : "7px",
@@ -4749,7 +4959,7 @@ function ResizeHandle({
     window.addEventListener("mouseup", onUp);
   };
   const edgeStyle = dockSide === "bottom" ? { top: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "top" ? { bottom: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "right" ? { top: 0, bottom: 0, left: 0, width: "5px", cursor: "ew-resize" } : { top: 0, bottom: 0, right: 0, width: "5px", cursor: "ew-resize" };
-  return /* @__PURE__ */ jsxDEV18("div", {
+  return /* @__PURE__ */ jsxDEV21("div", {
     onMouseDown,
     style: {
       position: "absolute",
@@ -4761,7 +4971,7 @@ function ResizeHandle({
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsxDEV as jsxDEV19, Fragment as Fragment9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV22, Fragment as Fragment10 } 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";
@@ -4854,7 +5064,7 @@ function groupEntries(entries) {
 }
 function NiceActionDevtools(props) {
   if (false) {}
-  return /* @__PURE__ */ jsxDEV19(NiceActionDevtools_Panel, {
+  return /* @__PURE__ */ jsxDEV22(NiceActionDevtools_Panel, {
     ...props
   }, undefined, false, undefined, this);
 }
@@ -4866,13 +5076,13 @@ function NiceActionDevtools_Panel({
   const [prefs, setPrefsRaw] = useState9(() => readPrefs(defaultPosition, initialOpen));
   const [entries, setEntries] = useState9([]);
   const [selectedCuid, setSelectedCuid] = useState9(null);
-  useEffect3(() => core.subscribe(setEntries), [core]);
-  const groups = useMemo2(() => {
+  useEffect4(() => core.subscribe(setEntries), [core]);
+  const groups = useMemo3(() => {
     const byCuid = new Map(entries.map((e) => [e.cuid, e]));
     const roots = entries.filter((e) => e.status !== "running" && (e.parentCuid == null || !byCuid.has(e.parentCuid)));
     return groupEntries(roots);
   }, [entries]);
-  const childEntriesMap = useMemo2(() => {
+  const childEntriesMap = useMemo3(() => {
     const map = new Map;
     for (const entry of entries) {
       if (entry.parentCuid == null)
@@ -4908,7 +5118,7 @@ function NiceActionDevtools_Panel({
   const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
   const selectedEntry = selectedCuid != null ? entries.find((e) => e.cuid === selectedCuid) : null;
   const runningCount = entries.filter((e) => e.status === "running").length;
-  useEffect3(() => {
+  useEffect4(() => {
     const sides = ["top", "bottom", "left", "right"];
     const clearAll = () => {
       sides.forEach((s) => {
@@ -4947,7 +5157,7 @@ function NiceActionDevtools_Panel({
     fontSize: "12px"
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsxDEV19("button", {
+    return /* @__PURE__ */ jsxDEV22("button", {
       onClick: () => setPrefs({ isOpen: true }),
       style: {
         ...baseStyle,
@@ -4962,7 +5172,7 @@ function NiceActionDevtools_Panel({
       },
       children: [
         "⚡ actions",
-        runningCount > 0 && /* @__PURE__ */ jsxDEV19("span", {
+        runningCount > 0 && /* @__PURE__ */ jsxDEV22("span", {
           style: {
             marginLeft: "6px",
             color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
@@ -5035,16 +5245,16 @@ function NiceActionDevtools_Panel({
     },
     childEntriesMap
   };
-  return /* @__PURE__ */ jsxDEV19("div", {
+  return /* @__PURE__ */ jsxDEV22("div", {
     id: "__nice-action-devtools-panel",
     style: panelStyle,
     children: [
-      dockSide != null && /* @__PURE__ */ jsxDEV19(ResizeHandle, {
+      dockSide != null && /* @__PURE__ */ jsxDEV22(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV19(PanelHeader, {
+      /* @__PURE__ */ jsxDEV22(PanelHeader, {
         position,
         onPositionChange: (p) => setPrefs({ position: p }),
         onClose: () => setPrefs({ isOpen: false }),
@@ -5053,17 +5263,17 @@ function NiceActionDevtools_Panel({
           setSelectedCuid(null);
         } : undefined
       }, undefined, false, undefined, this),
-      isHorizDock ? /* @__PURE__ */ jsxDEV19("div", {
+      isHorizDock ? /* @__PURE__ */ jsxDEV22("div", {
         style: { flex: 1, display: "flex", overflow: "hidden" },
         children: [
-          /* @__PURE__ */ jsxDEV19("div", {
+          /* @__PURE__ */ jsxDEV22("div", {
             style: { position: "relative", width: "340px", flexShrink: 0 },
             children: [
-              /* @__PURE__ */ jsxDEV19(ActionList, {
+              /* @__PURE__ */ jsxDEV22(ActionList, {
                 ...virtualListProps,
                 style: { width: "100%", height: "100%", overflowY: "auto" }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV19("div", {
+              /* @__PURE__ */ jsxDEV22("div", {
                 style: {
                   position: "absolute",
                   top: 0,
@@ -5076,7 +5286,7 @@ function NiceActionDevtools_Panel({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV19("div", {
+          /* @__PURE__ */ jsxDEV22("div", {
             style: {
               flex: 1,
               display: "flex",
@@ -5085,12 +5295,12 @@ function NiceActionDevtools_Panel({
               borderLeft: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
               boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
             },
-            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV19(ActionDetailPanel, {
+            children: selectedEntry != null ? /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
               entry: selectedEntry,
               parent: selectedEntryParent,
               childEntries: selectedEntryChildren,
               onSelectEntry: (cuid) => setSelectedCuid(cuid)
-            }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV19("div", {
+            }, selectedEntry.cuid, false, undefined, this) : /* @__PURE__ */ jsxDEV22("div", {
               style: {
                 padding: "24px",
                 textAlign: "center",
@@ -5101,16 +5311,16 @@ function NiceActionDevtools_Panel({
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV19(Fragment9, {
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV22(Fragment10, {
         children: [
-          /* @__PURE__ */ jsxDEV19("div", {
+          /* @__PURE__ */ jsxDEV22("div", {
             style: { position: "relative", flex: 1, minHeight: "80px" },
             children: [
-              /* @__PURE__ */ jsxDEV19(ActionList, {
+              /* @__PURE__ */ jsxDEV22(ActionList, {
                 ...virtualListProps,
                 style: { overflowY: "auto", height: "100%" }
               }, undefined, false, undefined, this),
-              selectedEntry != null && /* @__PURE__ */ jsxDEV19("div", {
+              selectedEntry != null && /* @__PURE__ */ jsxDEV22("div", {
                 style: {
                   position: "absolute",
                   bottom: 0,
@@ -5123,7 +5333,7 @@ function NiceActionDevtools_Panel({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          selectedEntry != null && /* @__PURE__ */ jsxDEV19("div", {
+          selectedEntry != null && /* @__PURE__ */ jsxDEV22("div", {
             style: {
               flexShrink: 0,
               maxHeight: "55%",
@@ -5133,7 +5343,7 @@ function NiceActionDevtools_Panel({
               borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
               boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
             },
-            children: /* @__PURE__ */ jsxDEV19(ActionDetailPanel, {
+            children: /* @__PURE__ */ jsxDEV22(ActionDetailPanel, {
               entry: selectedEntry,
               parent: selectedEntryParent,
               childEntries: selectedEntryChildren,
@@ -5145,119 +5355,6 @@ function NiceActionDevtools_Panel({
     ]
   }, undefined, true, undefined, this);
 }
-function getBreakReasons(current, previous) {
-  const reasons = [];
-  const inputChanged = current.inputHash != null && previous.inputHash != null ? current.inputHash !== previous.inputHash : safeStringify(current.input, 0) !== safeStringify(previous.input, 0);
-  if (inputChanged)
-    reasons.push("new input");
-  const outputChanged = current.outputHash != null && previous.outputHash != null && current.outputHash !== previous.outputHash;
-  if (outputChanged)
-    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}`;
-}
-function ActionList({
-  groups,
-  selectedCuid,
-  onGroupClick,
-  onSubClick,
-  childEntriesMap,
-  style
-}) {
-  const containerRef = useRef2(null);
-  const latestTime = groups[0]?.representative.startTime;
-  const flatItems = useMemo2(() => {
-    return groups.map((group, gi) => {
-      const prevGroup = groups[gi + 1];
-      let breakReasons;
-      if (prevGroup != null && prevGroup.representative.actionId === group.representative.actionId && prevGroup.representative.domain === group.representative.domain) {
-        const reasons = getBreakReasons(group.representative, prevGroup.representative);
-        if (reasons.length > 0)
-          breakReasons = reasons;
-      }
-      return { group, groupIndex: gi, breakReasons };
-    });
-  }, [groups]);
-  const prevSelectedRef = useRef2(selectedCuid);
-  useEffect3(() => {
-    if (selectedCuid === prevSelectedRef.current)
-      return;
-    prevSelectedRef.current = selectedCuid;
-    if (selectedCuid == null)
-      return;
-    let repCuid = selectedCuid;
-    for (const item of flatItems) {
-      if (item.group.rest.some((e) => e.cuid === selectedCuid)) {
-        repCuid = item.group.representative.cuid;
-        break;
-      }
-    }
-    containerRef.current?.querySelector(`[data-cuid="${repCuid}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [selectedCuid, flatItems]);
-  if (groups.length === 0) {
-    return /* @__PURE__ */ jsxDEV19("div", {
-      style,
-      children: /* @__PURE__ */ jsxDEV19("div", {
-        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
-        children: "No actions recorded yet"
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV19("div", {
-    ref: containerRef,
-    style,
-    children: flatItems.map((item) => {
-      const key = getFlatItemKey(item);
-      const { group } = item;
-      return /* @__PURE__ */ jsxDEV19("div", {
-        style: {
-          borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
-          position: "relative",
-          overflow: "hidden"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV19("div", {
-            style: {
-              position: "absolute",
-              inset: 0,
-              pointerEvents: "none",
-              background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
-              animation: "__nice-action-shine 0.65s ease-out forwards"
-            }
-          }, group.representative.cuid, false, undefined, this),
-          /* @__PURE__ */ jsxDEV19(ActionEntryRow, {
-            entry: group.representative,
-            isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
-            isLatest: item.groupIndex === 0,
-            latestTime,
-            childEntries: getGroupChildEntries(group, childEntriesMap),
-            breakReasons: item.breakReasons,
-            groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
-            selectedGroupCuid: selectedCuid,
-            onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
-            onClick: () => onGroupClick(group)
-          }, undefined, false, undefined, this)
-        ]
-      }, key, true, undefined, this);
-    })
-  }, undefined, false, undefined, this);
-}
 export {
   NiceActionDevtools,
   ActionDevtoolsCore

package/build/types/devtools/browser/NiceActionDevtools.d.ts

@@ -1,8 +1,12 @@
-import type { TDevtoolsPosition } from "../core/ActionDevtools.types";
+import type { IDevtoolsActionEntry, TDevtoolsPosition } from "../core/ActionDevtools.types";
 import type { ActionDevtoolsCore } from "../core/ActionDevtoolsCore";
 export interface INiceActionDevtoolsProps {
     core: ActionDevtoolsCore;
     position?: TDevtoolsPosition;
     initialOpen?: boolean;
 }
+export interface IEntryGroup {
+    representative: IDevtoolsActionEntry;
+    rest: IDevtoolsActionEntry[];
+}
 export declare function NiceActionDevtools(props: INiceActionDevtoolsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type ESemanticThing } from "../../core/devtools_colors";
 import { ESize } from "../ui_util/size";
 import { type ITooltipConfig } from "./Tooltip";
@@ -17,7 +17,6 @@ interface IChipProps {
     rounded?: boolean;
     tooltip?: ITooltipConfig;
     children: ReactNode;
-    style?: CSSProperties;
 }
-export declare function Chip({ color, subtle, size, rounded, tooltip, children, style, }: IChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ color, subtle, size, rounded, tooltip, children, }: IChipProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,12 +4,13 @@ import { type ESemanticThing } from "../../core/devtools_colors";
 import { ESize } from "../ui_util/size";
 import { type ITooltipConfig } from "./Tooltip";
 interface IIconProps {
-    icon: LucideIcon;
+    icon: LucideIcon | LucideIcon[];
     color: ESemanticThing;
     size?: ESize;
     subtle?: boolean;
     tooltip?: ITooltipConfig;
     style?: CSSProperties;
+    noBackground?: boolean;
 }
-export declare function Icon({ icon: IconComponent, color, size, subtle, tooltip, style, }: IIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ icon: IconComponent, color, size, subtle, tooltip, style, noBackground, }: IIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -0,0 +1,11 @@
+import type { IDevtoolsActionEntry } from "../../../core/ActionDevtools.types";
+import { ESize } from "../../ui_util/size";
+import { EBreakGroupReason } from "./action_list.types";
+interface IActionInputAndOutputChipProps {
+    entry: IDevtoolsActionEntry;
+    breakReasons: EBreakGroupReason[];
+    subtle?: boolean;
+    size?: ESize;
+}
+export declare const ActionInputAndOutputChip: ({ entry, breakReasons, subtle, size, }: IActionInputAndOutputChipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import type { IDevtoolsActionEntry } from "../../../server";
+import type { IEntryGroup } from "../../NiceActionDevtools";
+export declare function ActionList({ groups, selectedCuid, onGroupClick, onSubClick, childEntriesMap, style, }: {
+    groups: IEntryGroup[];
+    selectedCuid: string | null;
+    onGroupClick: (group: IEntryGroup) => void;
+    onSubClick: (cuid: string, isSelected: boolean) => void;
+    childEntriesMap: Map<string, IDevtoolsActionEntry[]>;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export declare const _IoTooltipContent: ({ value }: {
+    value: unknown;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function IoTooltipContent({ value }: {
+    value: unknown;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare enum EBreakGroupReason {
+    new_input = "new_input",
+    new_output = "new_output"
+}

package/package.json

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