@nice-code/action 0.6.1 → 0.6.2

package/build/devtools/browser/index.js

@@ -2060,6 +2060,11 @@ var SEMANTIC_COLORS = {
     borderColor: DEVTOOL_COLOR_HANDLER_EXTERNAL_BORDER,
     subtle: { color: "#cfa12a9f", borderColor: "transparent" }
   },
+  origin: {
+    color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+    borderColor: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}55`,
+    subtle: { color: `${DEVTOOL_COLOR_SEMANTIC_SYSTEM}9f`, borderColor: "transparent" }
+  },
   age: {
     color: DEVTOOL_COLOR_SEMANTIC_METADATA,
     borderColor: DEVTOOL_SECTION_BACKGROUND,
@@ -2151,6 +2156,16 @@ var STATUS_ICON = {
   failed: CircleX,
   aborted: Circle
 };
+function getInboundOrigin(entry) {
+  const origin = entry.meta.originClient;
+  if (origin == null || origin.envId === "unknown" || origin.envId === "_unset_")
+    return null;
+  const local = entry.meta.routing[0]?.runtime;
+  if (local == null)
+    return null;
+  const sameRuntime = origin.envId === local.envId && (origin.perId ?? null) === (local.perId ?? null) && (origin.insId ?? null) === (local.insId ?? null);
+  return sameRuntime ? null : origin;
+}
 function safeStringify(value, indent = 2) {
   if (value === undefined)
     return "undefined";
@@ -3935,8 +3950,49 @@ function MetaSection({ entry }) {
   });
 }
 
-// src/devtools/browser/components/RoutingSection.tsx
+// src/devtools/browser/components/OriginChip.tsx
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function OriginChip({
+  origin,
+  size = "md" /* md */,
+  subtle
+}) {
+  return /* @__PURE__ */ jsx15(Chip, {
+    color: "origin" /* origin */,
+    size,
+    subtle,
+    tooltip: {
+      title: "Received from",
+      content: /* @__PURE__ */ jsxs13("div", {
+        style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "11px" },
+        children: [
+          /* @__PURE__ */ jsxs13("span", {
+            children: [
+              "env ",
+              origin.envId
+            ]
+          }),
+          origin.perId != null && /* @__PURE__ */ jsxs13("span", {
+            children: [
+              "perId ",
+              origin.perId
+            ]
+          }),
+          origin.insId != null && /* @__PURE__ */ jsxs13("span", {
+            children: [
+              "insId ",
+              origin.insId
+            ]
+          })
+        ]
+      })
+    },
+    children: `⇠ ${origin.envId}`
+  });
+}
+
+// src/devtools/browser/components/RoutingSection.tsx
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function RoutingSection({
   entry,
   minHopCount = 0
@@ -3946,12 +4002,12 @@ function RoutingSection({
   const phantomCount = Math.max(0, minHopCount - hopCount);
   if (hopCount === 0 && phantomCount === 0)
     return null;
-  return /* @__PURE__ */ jsxs13("div", {
+  return /* @__PURE__ */ jsxs14("div", {
     children: [
-      /* @__PURE__ */ jsx15(SectionLabel, {
+      /* @__PURE__ */ jsx16(SectionLabel, {
         label: hopCount > 0 ? `Routing · ${hopCount} hop${hopCount !== 1 ? "s" : ""}` : "Routing"
       }),
-      /* @__PURE__ */ jsxs13("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: { display: "flex", flexDirection: "column", gap: "2px" },
         children: [
           meta.routing.map((hop, i) => {
@@ -3961,7 +4017,7 @@ function RoutingSection({
             const badgeText = isLocal ? "● exec" : `→ ${hop.transportSummary ?? hop.transport ?? "ext"}`;
             const transportTooltip = isLocal ? undefined : getTransportTooltip(hop);
             const runtimeTitle = [hop.runtime.perId, hop.runtime.insId].filter(Boolean).join(" · ") || undefined;
-            return /* @__PURE__ */ jsxs13("div", {
+            return /* @__PURE__ */ jsxs14("div", {
               style: {
                 background: DEVTOOL_SECTION_BACKGROUND,
                 borderRadius: "4px",
@@ -3974,10 +4030,10 @@ function RoutingSection({
                 padding: "4px 8px"
               },
               children: [
-                /* @__PURE__ */ jsxs13("span", {
+                /* @__PURE__ */ jsxs14("span", {
                   style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                   children: [
-                    /* @__PURE__ */ jsx15("span", {
+                    /* @__PURE__ */ jsx16("span", {
                       style: {
                         color: DEVTOOL_COLOR_TEXT_FAINT,
                         fontSize: "10px",
@@ -3986,7 +4042,7 @@ function RoutingSection({
                       },
                       children: i + 1
                     }),
-                    /* @__PURE__ */ jsx15("span", {
+                    /* @__PURE__ */ jsx16("span", {
                       title: runtimeTitle,
                       style: {
                         color: DEVTOOL_COLOR_TEXT_SECONDARY,
@@ -4000,10 +4056,10 @@ function RoutingSection({
                     })
                   ]
                 }),
-                /* @__PURE__ */ jsx15(HoverTooltip, {
+                /* @__PURE__ */ jsx16(HoverTooltip, {
                   config: transportTooltip,
                   style: { display: "block", minWidth: 0, overflow: "hidden" },
-                  children: /* @__PURE__ */ jsx15("span", {
+                  children: /* @__PURE__ */ jsx16("span", {
                     style: {
                       color: badgeColor,
                       fontSize: "10px",
@@ -4015,7 +4071,7 @@ function RoutingSection({
                     children: badgeText
                   })
                 }),
-                /* @__PURE__ */ jsxs13("span", {
+                /* @__PURE__ */ jsxs14("span", {
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -4024,7 +4080,7 @@ function RoutingSection({
                     overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ jsx15("span", {
+                    /* @__PURE__ */ jsx16("span", {
                       style: {
                         color: DEVTOOL_COLOR_TEXT_MUTED,
                         fontSize: "10px",
@@ -4034,7 +4090,7 @@ function RoutingSection({
                       },
                       children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
                     }),
-                    /* @__PURE__ */ jsxs13("span", {
+                    /* @__PURE__ */ jsxs14("span", {
                       style: {
                         color: DEVTOOL_COLOR_TEXT_FAINT,
                         fontSize: "10px",
@@ -4052,7 +4108,7 @@ function RoutingSection({
               ]
             }, `${hop.time}-${hop.runtime.envId}`);
           }),
-          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxs13("div", {
+          Array.from({ length: phantomCount }, (_, i) => `routing-phantom-${hopCount + i}`).map((key) => /* @__PURE__ */ jsxs14("div", {
             "aria-hidden": "true",
             style: {
               visibility: "hidden",
@@ -4065,24 +4121,24 @@ function RoutingSection({
               padding: "4px 8px"
             },
             children: [
-              /* @__PURE__ */ jsxs13("span", {
+              /* @__PURE__ */ jsxs14("span", {
                 style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                 children: [
-                  /* @__PURE__ */ jsx15("span", {
+                  /* @__PURE__ */ jsx16("span", {
                     style: { fontSize: "10px", width: "16px" },
                     children: "0"
                   }),
-                  /* @__PURE__ */ jsx15("span", {
+                  /* @__PURE__ */ jsx16("span", {
                     style: { fontSize: "11px" },
                     children: "placeholder"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx15("span", {
+              /* @__PURE__ */ jsx16("span", {
                 style: { fontSize: "10px" },
                 children: "placeholder"
               }),
-              /* @__PURE__ */ jsx15("span", {})
+              /* @__PURE__ */ jsx16("span", {})
             ]
           }, key))
         ]
@@ -4092,7 +4148,7 @@ function RoutingSection({
 }
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var STATUS_BADGE_LABEL = {
   running: "RUNNING",
   success: "SUCCESS",
@@ -4123,7 +4179,8 @@ function DetailHeader({
   const color = STATUS_COLOR[entry.status];
   const StatusIconComponent = STATUS_ICON[entry.status];
   const timestamp = formatTimestamp(entry.startTime);
-  return /* @__PURE__ */ jsx16("div", {
+  const inboundOrigin = getInboundOrigin(entry);
+  return /* @__PURE__ */ jsx17("div", {
     onClick: !isActive ? onClick : undefined,
     style: {
       padding: "0.5em 1em",
@@ -4137,13 +4194,13 @@ function DetailHeader({
       gap: "1em",
       cursor: isActive ? "default" : "pointer"
     },
-    children: /* @__PURE__ */ jsxs14("div", {
+    children: /* @__PURE__ */ jsxs15("div", {
       style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5em" },
       children: [
-        /* @__PURE__ */ jsxs14("div", {
+        /* @__PURE__ */ jsxs15("div", {
           style: { display: "flex", alignItems: "center", minWidth: 0, gap: "0.5em" },
           children: [
-            /* @__PURE__ */ jsx16("span", {
+            /* @__PURE__ */ jsx17("span", {
               style: {
                 color,
                 flexShrink: 0,
@@ -4151,12 +4208,12 @@ function DetailHeader({
                 alignItems: "center",
                 animation: entry.status === "running" ? "__nice-action-pulse 1.2s ease-in-out infinite" : undefined
               },
-              children: /* @__PURE__ */ jsx16(StatusIconComponent, {
+              children: /* @__PURE__ */ jsx17(StatusIconComponent, {
                 size: 20,
                 strokeWidth: 1.75
               })
             }),
-            /* @__PURE__ */ jsx16("span", {
+            /* @__PURE__ */ jsx17("span", {
               style: {
                 color: DEVTOOL_COLOR_TEXT_EMPHASIS,
                 fontSize: "1.2em",
@@ -4170,7 +4227,7 @@ function DetailHeader({
               },
               children: entry.actionId
             }),
-            /* @__PURE__ */ jsx16("span", {
+            /* @__PURE__ */ jsx17("span", {
               style: {
                 flexShrink: 0,
                 padding: "2px 9px",
@@ -4185,14 +4242,14 @@ function DetailHeader({
               },
               children: STATUS_BADGE_LABEL[entry.status]
             }),
-            /* @__PURE__ */ jsx16(DomainChip, {
+            /* @__PURE__ */ jsx17(DomainChip, {
               domain: entry.domain,
               allDomains: entry.allDomains,
               size: "md" /* md */
             })
           ]
         }),
-        /* @__PURE__ */ jsxs14("div", {
+        /* @__PURE__ */ jsxs15("div", {
           style: {
             display: "flex",
             alignItems: "center",
@@ -4200,7 +4257,7 @@ function DetailHeader({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsxs14("div", {
+            /* @__PURE__ */ jsxs15("div", {
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -4209,20 +4266,24 @@ function DetailHeader({
                 overflow: "hidden"
               },
               children: [
-                /* @__PURE__ */ jsx16(HandlerChips, {
+                inboundOrigin != null && /* @__PURE__ */ jsx17(OriginChip, {
+                  origin: inboundOrigin,
+                  size: "md" /* md */
+                }),
+                /* @__PURE__ */ jsx17(HandlerChips, {
                   entry,
                   size: "md" /* md */
                 }),
-                /* @__PURE__ */ jsx16(ChildDispatchChips, {
+                /* @__PURE__ */ jsx17(ChildDispatchChips, {
                   childRouteItems: childExternalRouteItems,
                   size: "md" /* md */
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs14("div", {
+            /* @__PURE__ */ jsxs15("div", {
               style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 },
               children: [
-                /* @__PURE__ */ jsx16("span", {
+                /* @__PURE__ */ jsx17("span", {
                   style: {
                     color: DEVTOOL_COLOR_SEMANTIC_METADATA,
                     fontSize: "10px",
@@ -4231,9 +4292,9 @@ function DetailHeader({
                   },
                   children: timestamp
                 }),
-                /* @__PURE__ */ jsx16("span", {
+                /* @__PURE__ */ jsx17("span", {
                   style: { color, fontSize: "12px", fontWeight: "500" },
-                  children: /* @__PURE__ */ jsx16(DurationDisplay, {
+                  children: /* @__PURE__ */ jsx17(DurationDisplay, {
                     entry
                   })
                 })
@@ -4273,7 +4334,7 @@ function ActionDetailPanel({
   const handleFocusChild = (cuid) => {
     setFocusedChildCuid((prev) => prev === cuid ? null : cuid);
   };
-  return /* @__PURE__ */ jsxs14("div", {
+  return /* @__PURE__ */ jsxs15("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -4283,20 +4344,20 @@ function ActionDetailPanel({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsx16(DetailHeader, {
+      /* @__PURE__ */ jsx17(DetailHeader, {
         entry,
         isActive: focusedChildCuid === null,
         onClick: () => setFocusedChildCuid(null),
         childExternalRouteItems
       }),
-      /* @__PURE__ */ jsx16(CallStackSection, {
+      /* @__PURE__ */ jsx17(CallStackSection, {
         parent,
         childEntries,
         focusedChildCuid,
         onFocusChild: handleFocusChild,
         onSelectParent: onSelectEntry
       }),
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs15("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -4307,37 +4368,37 @@ function ActionDetailPanel({
           gap: "8px"
         },
         children: [
-          focusedEntry.input !== undefined ? /* @__PURE__ */ jsx16(DetailSection, {
+          focusedEntry.input !== undefined ? /* @__PURE__ */ jsx17(DetailSection, {
             label: "Input",
             value: focusedEntry.input
-          }) : /* @__PURE__ */ jsx16(DetailSection, {
+          }) : /* @__PURE__ */ jsx17(DetailSection, {
             label: "Input",
             value: "No input required or given"
           }),
-          focusedEntry.status === "success" && /* @__PURE__ */ jsx16(DetailSection, {
+          focusedEntry.status === "success" && /* @__PURE__ */ jsx17(DetailSection, {
             label: "Output",
             value: focusedEntry.output,
             color: DEVTOOL_COLOR_SEMANTIC_SUCCESS
           }),
-          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsx16(ActionErrorDisplay, {
+          (focusedEntry.status === "action-error" || focusedEntry.status === "failed" || focusedEntry.status === "aborted") && /* @__PURE__ */ jsx17(ActionErrorDisplay, {
             entry: focusedEntry
           }),
-          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsx16(DetailSection, {
+          focusedEntry.progressUpdates.length > 0 && /* @__PURE__ */ jsx17(DetailSection, {
             label: `Progress (${focusedEntry.progressUpdates.length})`,
             value: focusedEntry.progressUpdates
           }),
-          /* @__PURE__ */ jsx16(StackTraceSection, {
+          /* @__PURE__ */ jsx17(StackTraceSection, {
             runtime: entry.meta.originClient,
             label: "Dispatch Site",
             stack: focusedEntry.callSite,
             color: DEVTOOL_COLOR_TEXT_SECONDARY,
             minFrameCount: maxCallSiteFrames
           }),
-          /* @__PURE__ */ jsx16(RoutingSection, {
+          /* @__PURE__ */ jsx17(RoutingSection, {
             entry: focusedEntry,
             minHopCount: maxRoutingHops
           }),
-          /* @__PURE__ */ jsx16(MetaSection, {
+          /* @__PURE__ */ jsx17(MetaSection, {
             entry: focusedEntry
           })
         ]
@@ -4358,7 +4419,7 @@ import { CircleX as CircleX2, PackageCheck, Sparkle, Variable } from "lucide-rea
 import { useState as useState9 } from "react";
 
 // src/devtools/browser/components/action_list/IoTooltipContent.tsx
-import { jsx as jsx17, Fragment as Fragment8 } from "react/jsx-runtime";
+import { jsx as jsx18, Fragment as Fragment8 } from "react/jsx-runtime";
 var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
 function renderColoredJson2(text) {
   const nodes = [];
@@ -4371,32 +4432,32 @@ function renderColoredJson2(text) {
     const [, str, colon, num, kw, punct] = m;
     if (str != null) {
       if (colon != null) {
-        nodes.push(/* @__PURE__ */ jsx17("span", {
+        nodes.push(/* @__PURE__ */ jsx18("span", {
           style: { color: DEVTOOL_JSON_KEY },
           children: str
         }, i++));
-        nodes.push(/* @__PURE__ */ jsx17("span", {
+        nodes.push(/* @__PURE__ */ jsx18("span", {
           style: { color: DEVTOOL_JSON_PUNCTUATION },
           children: colon
         }, i++));
       } else {
-        nodes.push(/* @__PURE__ */ jsx17("span", {
+        nodes.push(/* @__PURE__ */ jsx18("span", {
           style: { color: DEVTOOL_JSON_STRING },
           children: str
         }, i++));
       }
     } else if (num != null) {
-      nodes.push(/* @__PURE__ */ jsx17("span", {
+      nodes.push(/* @__PURE__ */ jsx18("span", {
         style: { color: DEVTOOL_JSON_NUMBER },
         children: num
       }, i++));
     } else if (kw != null) {
-      nodes.push(/* @__PURE__ */ jsx17("span", {
+      nodes.push(/* @__PURE__ */ jsx18("span", {
         style: { color: DEVTOOL_JSON_KEYWORD },
         children: kw
       }, i++));
     } else if (punct != null) {
-      nodes.push(/* @__PURE__ */ jsx17("span", {
+      nodes.push(/* @__PURE__ */ jsx18("span", {
         style: { color: DEVTOOL_JSON_PUNCTUATION },
         children: punct
       }, i++));
@@ -4418,7 +4479,7 @@ function stripOuterBraces(json) {
 }
 function IoTooltipContent({ value }) {
   const text = stripOuterBraces(safeStringify(value, 2));
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx18("div", {
     style: {
       fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
       fontSize: "10px",
@@ -4432,7 +4493,7 @@ function IoTooltipContent({ value }) {
 }
 
 // src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var ActionInputAndOutputChip = ({
   entry,
   breakReasons,
@@ -4453,35 +4514,35 @@ var ActionInputAndOutputChip = ({
   const sizeNum = getSizeValue(size);
   const newIconSizeEm = `${sizeNum * 0.9}em`;
   const label = `${(isLocal ? localEnvId : externalLabel) ?? "unknown"}`;
-  const newSparkleComp = /* @__PURE__ */ jsx18("div", {
+  const newSparkleComp = /* @__PURE__ */ jsx19("div", {
     style: {
       opacity: 0.9,
       alignSelf: "start",
       marginLeft: "-0.6em"
     },
-    children: /* @__PURE__ */ jsx18(Sparkle, {
+    children: /* @__PURE__ */ jsx19(Sparkle, {
       strokeWidth: "0.2em",
       color: "rgba(243, 250, 140, 1)",
       width: newIconSizeEm,
       height: newIconSizeEm
     })
   });
-  return /* @__PURE__ */ jsx18(Chip, {
+  return /* @__PURE__ */ jsx19(Chip, {
     color,
     size,
     subtle,
-    children: /* @__PURE__ */ jsxs15("div", {
+    children: /* @__PURE__ */ jsxs16("div", {
       style: { display: "flex", alignItems: "center", gap: "0.4em" },
       children: [
-        /* @__PURE__ */ jsx18(Icon, {
+        /* @__PURE__ */ jsx19(Icon, {
           noBackground: true,
           icon: Variable,
           color,
           subtle: subtle || entry.input === undefined,
           tooltip: {
-            content: entry.input !== undefined ? /* @__PURE__ */ jsx18(IoTooltipContent, {
+            content: entry.input !== undefined ? /* @__PURE__ */ jsx19(IoTooltipContent, {
               value: entry.input
-            }) : /* @__PURE__ */ jsx18("span", {
+            }) : /* @__PURE__ */ jsx19("span", {
               style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
               children: "No input required or given"
             }),
@@ -4489,43 +4550,43 @@ var ActionInputAndOutputChip = ({
           }
         }),
         isNewInput && newSparkleComp,
-        /* @__PURE__ */ jsx18("span", {
+        /* @__PURE__ */ jsx19("span", {
           style: { opacity: 0.6 },
           color,
           children: "→"
         }),
-        /* @__PURE__ */ jsx18("span", {
+        /* @__PURE__ */ jsx19("span", {
           style: { opacity: 0.8, cursor: transportTooltip != null ? "default" : undefined },
           onMouseEnter: transportTooltip != null ? (e) => setLabelAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
           onMouseLeave: transportTooltip != null ? () => setLabelAnchor(null) : undefined,
           children: label
         }),
-        labelAnchor != null && transportTooltip != null && /* @__PURE__ */ jsx18(Tooltip, {
+        labelAnchor != null && transportTooltip != null && /* @__PURE__ */ jsx19(Tooltip, {
           anchor: labelAnchor,
           config: transportTooltip
         }),
-        /* @__PURE__ */ jsx18("span", {
+        /* @__PURE__ */ jsx19("span", {
           style: { opacity: 0.6 },
           color,
           children: "→"
         }),
-        entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsx18(Icon, {
+        entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsx19(Icon, {
           noBackground: true,
           icon: PackageCheck,
           color: !hasError ? color : "default" /* default */,
           tooltip: {
-            content: /* @__PURE__ */ jsx18(IoTooltipContent, {
+            content: /* @__PURE__ */ jsx19(IoTooltipContent, {
               value: entry.output
             }),
             title: isNewOutput ? "New Output" : "Output"
           }
         }),
-        (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsx18(Icon, {
+        (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsx19(Icon, {
           noBackground: true,
           icon: CircleX2,
           color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
           tooltip: {
-            content: /* @__PURE__ */ jsx18(ActionErrorDisplay, {
+            content: /* @__PURE__ */ jsx19(ActionErrorDisplay, {
               entry,
               compact: true
             }),
@@ -4540,7 +4601,7 @@ var ActionInputAndOutputChip = ({
 };
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { jsx as jsx19, jsxs as jsxs16, Fragment as Fragment10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17, Fragment as Fragment10 } from "react/jsx-runtime";
 var MAX_GROUP_DOTS = 5;
 function getLatestChipColor(status) {
   if (status === "failed")
@@ -4563,14 +4624,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__ */ jsx19(Tooltip, {
+  return /* @__PURE__ */ jsx20(Tooltip, {
     anchor,
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxs16(Fragment10, {
+      content: /* @__PURE__ */ jsxs17(Fragment10, {
         children: [
-          /* @__PURE__ */ jsxs16("div", {
+          /* @__PURE__ */ jsxs17("div", {
             style: { color: dotColor, marginBottom: "1px" },
             children: [
               symbol,
@@ -4580,15 +4641,15 @@ function GroupDotTooltip({
               total
             ]
           }),
-          /* @__PURE__ */ jsx19("div", {
+          /* @__PURE__ */ jsx20("div", {
             style: { color: DEVTOOL_COLOR_TEXT_SECONDARY },
             children: formatTimestamp(entry.startTime)
           }),
-          /* @__PURE__ */ jsx19("div", {
+          /* @__PURE__ */ jsx20("div", {
             style: { color: DEVTOOL_COLOR_TEXT_MUTED },
             children: durationStr
           }),
-          index > 0 && /* @__PURE__ */ jsx19("div", {
+          index > 0 && /* @__PURE__ */ jsx20("div", {
             style: {
               color: DEVTOOL_COLOR_TEXT_MUTED,
               marginTop: "3px",
@@ -4613,9 +4674,9 @@ function GroupDot({
   const [anchor, setAnchor] = useState10(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxs16(Fragment10, {
+  return /* @__PURE__ */ jsxs17(Fragment10, {
     children: [
-      /* @__PURE__ */ jsx19("button", {
+      /* @__PURE__ */ jsx20("button", {
         "data-cuid": entry.cuid,
         onClick: (e) => {
           e.stopPropagation();
@@ -4637,7 +4698,7 @@ function GroupDot({
           transition: "transform 0.1s ease, opacity 0.1s ease, border-color 0.1s ease"
         }
       }),
-      hovered && anchor != null && /* @__PURE__ */ jsx19(GroupDotTooltip, {
+      hovered && anchor != null && /* @__PURE__ */ jsx20(GroupDotTooltip, {
         entry,
         index,
         total,
@@ -4662,11 +4723,12 @@ function ActionEntryRow({
 }) {
   const timestamp = formatTimestamp(entry.startTime);
   const hasGroup = groupEntries != null && groupEntries.length > 1;
+  const inboundOrigin = getInboundOrigin(entry);
   const externalChildEntries = childEntries?.filter((child) => child.meta.routing[0]?.handlerType === "external") ?? [];
   const nonIoBreakReasons = breakReasons?.filter((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */) ?? [];
   const hasBottomError = entry.error != null || entry.abortReason != null;
   const hasBottomContent = externalChildEntries.length > 0 || nonIoBreakReasons.length > 0;
-  return /* @__PURE__ */ jsxs16("div", {
+  return /* @__PURE__ */ jsxs17("div", {
     "data-cuid": entry.cuid,
     onClick,
     style: {
@@ -4683,7 +4745,7 @@ function ActionEntryRow({
       margin: "2px 4px"
     },
     children: [
-      /* @__PURE__ */ jsx19("div", {
+      /* @__PURE__ */ jsx20("div", {
         style: {
           position: "absolute",
           left: "2em",
@@ -4695,10 +4757,10 @@ function ActionEntryRow({
           zIndex: 0
         }
       }),
-      /* @__PURE__ */ jsxs16("div", {
+      /* @__PURE__ */ jsxs17("div", {
         style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
-          /* @__PURE__ */ jsx19("div", {
+          /* @__PURE__ */ jsx20("div", {
             style: {
               position: "relative",
               zIndex: 1,
@@ -4708,11 +4770,11 @@ function ActionEntryRow({
               alignItems: "center",
               justifyContent: "flex-start"
             },
-            children: isLatest ? /* @__PURE__ */ jsx19(Chip, {
+            children: isLatest ? /* @__PURE__ */ jsx20(Chip, {
               size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: "latest"
-            }) : /* @__PURE__ */ jsxs16(Chip, {
+            }) : /* @__PURE__ */ jsxs17(Chip, {
               size: "sm" /* sm */,
               color: getLatestChipColor(entry.status),
               children: [
@@ -4721,10 +4783,10 @@ function ActionEntryRow({
               ]
             })
           }),
-          /* @__PURE__ */ jsxs16("div", {
+          /* @__PURE__ */ jsxs17("div", {
             style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "0.5em" },
             children: [
-              /* @__PURE__ */ jsx19("span", {
+              /* @__PURE__ */ jsx20("span", {
                 style: {
                   color: DEVTOOL_COLOR_TEXT_SECONDARY,
                   fontSize: "1em",
@@ -4738,14 +4800,19 @@ function ActionEntryRow({
                 },
                 children: entry.actionId
               }),
-              /* @__PURE__ */ jsx19(ActionInputAndOutputChip, {
+              inboundOrigin != null && /* @__PURE__ */ jsx20(OriginChip, {
+                origin: inboundOrigin,
+                size: "sm" /* sm */,
+                subtle: true
+              }),
+              /* @__PURE__ */ jsx20(ActionInputAndOutputChip, {
                 breakReasons,
                 entry
               }),
-              /* @__PURE__ */ jsx19("div", {
+              /* @__PURE__ */ jsx20("div", {
                 style: { flex: 1 }
               }),
-              /* @__PURE__ */ jsxs16("div", {
+              /* @__PURE__ */ jsxs17("div", {
                 style: {
                   display: "flex",
                   flexDirection: "column",
@@ -4755,7 +4822,7 @@ function ActionEntryRow({
                   marginRight: "-0.2em"
                 },
                 children: [
-                  /* @__PURE__ */ jsx19("span", {
+                  /* @__PURE__ */ jsx20("span", {
                     style: {
                       display: "flex",
                       color: DEVTOOL_COLOR_SEMANTIC_METADATA,
@@ -4768,7 +4835,7 @@ function ActionEntryRow({
                     },
                     children: timestamp
                   }),
-                  /* @__PURE__ */ jsx19("span", {
+                  /* @__PURE__ */ jsx20("span", {
                     style: {
                       display: "flex",
                       color: DEVTOOL_COLOR_SEMANTIC_WARNING,
@@ -4777,7 +4844,7 @@ function ActionEntryRow({
                       opacity: 0.9,
                       flexShrink: 0
                     },
-                    children: /* @__PURE__ */ jsx19(DurationDisplay, {
+                    children: /* @__PURE__ */ jsx20(DurationDisplay, {
                       entry
                     })
                   })
@@ -4787,7 +4854,7 @@ function ActionEntryRow({
           })
         ]
       }),
-      hasBottomContent && /* @__PURE__ */ jsxs16("div", {
+      hasBottomContent && /* @__PURE__ */ jsxs17("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4796,35 +4863,35 @@ function ActionEntryRow({
           paddingLeft: "4.5em"
         },
         children: [
-          externalChildEntries.map((child) => /* @__PURE__ */ jsxs16(Fragment9, {
+          externalChildEntries.map((child) => /* @__PURE__ */ jsxs17(Fragment9, {
             children: [
-              /* @__PURE__ */ jsx19(Icon, {
+              /* @__PURE__ */ jsx20(Icon, {
                 size: "sm" /* sm */,
                 icon: Variable2,
                 color: "io_input" /* io_input */,
                 subtle: true,
                 tooltip: {
-                  content: child.input !== undefined ? /* @__PURE__ */ jsx19(IoTooltipContent, {
+                  content: child.input !== undefined ? /* @__PURE__ */ jsx20(IoTooltipContent, {
                     value: child.input
-                  }) : /* @__PURE__ */ jsx19("span", {
+                  }) : /* @__PURE__ */ jsx20("span", {
                     style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px" },
                     children: "No input required or given"
                   }),
                   title: `Input · ${child.actionId}`
                 }
               }),
-              /* @__PURE__ */ jsx19(HandlerChips, {
+              /* @__PURE__ */ jsx20(HandlerChips, {
                 entry: child,
                 size: "sm" /* sm */,
                 subtle: true
               }),
-              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsx19(Icon, {
+              child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsx20(Icon, {
                 size: "sm" /* sm */,
                 icon: PackageCheck2,
                 color: "io_output" /* io_output */,
                 subtle: true,
                 tooltip: {
-                  content: /* @__PURE__ */ jsx19(IoTooltipContent, {
+                  content: /* @__PURE__ */ jsx20(IoTooltipContent, {
                     value: child.output
                   }),
                   title: `Output · ${child.actionId}`
@@ -4832,18 +4899,18 @@ function ActionEntryRow({
               })
             ]
           }, child.actionId)),
-          nonIoBreakReasons.map((reason) => /* @__PURE__ */ jsx19(Chip, {
+          nonIoBreakReasons.map((reason) => /* @__PURE__ */ jsx20(Chip, {
             color: "default" /* default */,
             subtle: true,
             children: reason
           }, reason)),
-          externalChildEntries.length > 0 && hasBottomError && /* @__PURE__ */ jsx19(Icon, {
+          externalChildEntries.length > 0 && hasBottomError && /* @__PURE__ */ jsx20(Icon, {
             size: "sm" /* sm */,
             icon: CircleX3,
             color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
             subtle: true,
             tooltip: {
-              content: /* @__PURE__ */ jsx19(ActionErrorDisplay, {
+              content: /* @__PURE__ */ jsx20(ActionErrorDisplay, {
                 entry,
                 compact: true
               }),
@@ -4853,7 +4920,7 @@ function ActionEntryRow({
           })
         ]
       }),
-      hasGroup && /* @__PURE__ */ jsxs16("div", {
+      hasGroup && /* @__PURE__ */ jsxs17("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4863,7 +4930,7 @@ function ActionEntryRow({
           paddingBottom: "2px"
         },
         children: [
-          groupEntries.slice(0, MAX_GROUP_DOTS).map((e, i) => /* @__PURE__ */ jsx19(GroupDot, {
+          groupEntries.slice(0, MAX_GROUP_DOTS).map((e, i) => /* @__PURE__ */ jsx20(GroupDot, {
             entry: e,
             index: i,
             total: groupEntries.length,
@@ -4871,7 +4938,7 @@ function ActionEntryRow({
             isActive: selectedGroupCuid === e.cuid,
             onSelect: () => onSelectGroupEntry?.(e.cuid)
           }, e.cuid)),
-          groupEntries.length > MAX_GROUP_DOTS && /* @__PURE__ */ jsxs16("span", {
+          groupEntries.length > MAX_GROUP_DOTS && /* @__PURE__ */ jsxs17("span", {
             style: {
               fontSize: "0.7em",
               opacity: 0.5,
@@ -4890,7 +4957,7 @@ function ActionEntryRow({
 }
 
 // src/devtools/browser/components/action_list/ActionList.tsx
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-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);
@@ -4957,29 +5024,29 @@ function ActionList({
     containerRef.current?.querySelector(`[data-cuid="${repCuid}"]`)?.scrollIntoView({ block: "nearest" });
   }, [selectedCuid, flatItems]);
   if (groups.length === 0) {
-    return /* @__PURE__ */ jsx20("div", {
+    return /* @__PURE__ */ jsx21("div", {
       style,
-      children: /* @__PURE__ */ jsx20("div", {
+      children: /* @__PURE__ */ jsx21("div", {
         style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
         children: "No actions recorded yet"
       })
     });
   }
-  return /* @__PURE__ */ jsxs17("div", {
+  return /* @__PURE__ */ jsxs18("div", {
     ref: containerRef,
     style,
     children: [
       flatItems.map((item) => {
         const key = getFlatItemKey(item);
         const { group } = item;
-        return /* @__PURE__ */ jsxs17("div", {
+        return /* @__PURE__ */ jsxs18("div", {
           style: {
             borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
             position: "relative",
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ jsx20("div", {
+            /* @__PURE__ */ jsx21("div", {
               style: {
                 position: "absolute",
                 inset: 0,
@@ -4988,7 +5055,7 @@ function ActionList({
                 animation: "__nice-action-shine 0.65s ease-out forwards"
               }
             }, group.representative.cuid),
-            /* @__PURE__ */ jsx20(ActionEntryRow, {
+            /* @__PURE__ */ jsx21(ActionEntryRow, {
               entry: group.representative,
               isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
               isLatest: item.groupIndex === 0,
@@ -5003,7 +5070,7 @@ function ActionList({
           ]
         }, key);
       }),
-      /* @__PURE__ */ jsx20("div", {
+      /* @__PURE__ */ jsx21("div", {
         style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
         children: "Start of action history"
       })
@@ -5013,7 +5080,7 @@ function ActionList({
 
 // src/devtools/browser/components/PanelChrome.tsx
 import { useState as useState11 } from "react";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
 var SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
 var DOCKED_SIZE_MIN = 140;
@@ -5047,7 +5114,7 @@ function PanelHeader({
   onClear,
   openOthers
 }) {
-  return /* @__PURE__ */ jsxs18("div", {
+  return /* @__PURE__ */ jsxs19("div", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -5059,10 +5126,10 @@ function PanelHeader({
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsxs18("div", {
+      /* @__PURE__ */ jsxs19("div", {
         style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
         children: [
-          /* @__PURE__ */ jsx21("span", {
+          /* @__PURE__ */ jsx22("span", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontWeight: "bold",
@@ -5071,7 +5138,7 @@ function PanelHeader({
             },
             children: "⚡ action"
           }),
-          openOthers?.map((item) => /* @__PURE__ */ jsxs18("button", {
+          openOthers?.map((item) => /* @__PURE__ */ jsxs19("button", {
             onClick: item.onOpen,
             title: `Open ${item.label} devtools`,
             style: {
@@ -5089,13 +5156,13 @@ function PanelHeader({
               whiteSpace: "nowrap"
             },
             children: [
-              /* @__PURE__ */ jsx21("span", {
+              /* @__PURE__ */ jsx22("span", {
                 children: item.icon
               }),
-              /* @__PURE__ */ jsx21("span", {
+              /* @__PURE__ */ jsx22("span", {
                 children: item.label
               }),
-              item.badge != null && /* @__PURE__ */ jsx21("span", {
+              item.badge != null && /* @__PURE__ */ jsx22("span", {
                 style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
                 children: item.badge
               })
@@ -5103,14 +5170,14 @@ function PanelHeader({
           }, item.id))
         ]
       }),
-      /* @__PURE__ */ jsxs18("div", {
+      /* @__PURE__ */ jsxs19("div", {
         style: { display: "flex", gap: "10px", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsx21(PositionPicker, {
+          /* @__PURE__ */ jsx22(PositionPicker, {
             position,
             onChange: onPositionChange
           }),
-          onClear != null && /* @__PURE__ */ jsx21("button", {
+          onClear != null && /* @__PURE__ */ jsx22("button", {
             onClick: onClear,
             style: {
               background: "none",
@@ -5122,7 +5189,7 @@ function PanelHeader({
             },
             children: "clear"
           }),
-          /* @__PURE__ */ jsx21("button", {
+          /* @__PURE__ */ jsx22("button", {
             onClick: onClose,
             style: {
               background: "none",
@@ -5144,17 +5211,17 @@ function PositionPicker({
   position,
   onChange
 }) {
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     title: "Move / dock panel",
     style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
     children: POSITION_GRID.map(({ key, pos }) => {
       if (pos == null)
-        return /* @__PURE__ */ jsx21("div", {
+        return /* @__PURE__ */ jsx22("div", {
           style: { width: "9px", height: "9px" }
         }, key);
       const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
       const isActive = pos === position;
-      return /* @__PURE__ */ jsx21("div", {
+      return /* @__PURE__ */ jsx22("div", {
         title: pos,
         onClick: () => onChange(pos),
         style: {
@@ -5165,7 +5232,7 @@ function PositionPicker({
           justifyContent: "center",
           cursor: "pointer"
         },
-        children: /* @__PURE__ */ jsx21("div", {
+        children: /* @__PURE__ */ jsx22("div", {
           style: {
             width: isTopBottom ? "9px" : "3px",
             height: isTopBottom ? "3px" : "9px",
@@ -5201,7 +5268,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__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     onMouseDown,
     style: {
       position: "absolute",
@@ -5235,7 +5302,7 @@ function SplitHandle({
     window.addEventListener("mousemove", onMove);
     window.addEventListener("mouseup", onUp);
   };
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     onMouseDown,
     onMouseEnter: () => setHovered(true),
     onMouseLeave: () => setHovered(false),
@@ -5250,7 +5317,7 @@ function SplitHandle({
   });
 }
 function DevtoolsLauncher({ items }) {
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx22("div", {
     style: {
       position: "fixed",
       bottom: "16px",
@@ -5260,7 +5327,7 @@ function DevtoolsLauncher({ items }) {
       fontFamily: MONO_FONT,
       fontSize: "12px"
     },
-    children: /* @__PURE__ */ jsx21("div", {
+    children: /* @__PURE__ */ jsx22("div", {
       style: {
         display: "flex",
         background: DEVTOOL_SECTION_BACKGROUND,
@@ -5269,7 +5336,7 @@ function DevtoolsLauncher({ items }) {
         overflow: "hidden",
         boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
       },
-      children: items.map((item, i) => /* @__PURE__ */ jsxs18("button", {
+      children: items.map((item, i) => /* @__PURE__ */ jsxs19("button", {
         onClick: item.onOpen,
         style: {
           display: "flex",
@@ -5286,13 +5353,13 @@ function DevtoolsLauncher({ items }) {
           lineHeight: "1.5"
         },
         children: [
-          /* @__PURE__ */ jsx21("span", {
+          /* @__PURE__ */ jsx22("span", {
             children: item.icon
           }),
-          /* @__PURE__ */ jsx21("span", {
+          /* @__PURE__ */ jsx22("span", {
             children: item.label
           }),
-          item.badge != null && /* @__PURE__ */ jsx21("span", {
+          item.badge != null && /* @__PURE__ */ jsx22("span", {
             style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
             children: item.badge
           })
@@ -5410,7 +5477,7 @@ function getDevtoolsDockCoordinator() {
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsx as jsx22, jsxs as jsxs19, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20, Fragment as Fragment11 } from "react/jsx-runtime";
 if (typeof document !== "undefined" && !document.getElementById("__nice-action-devtools-styles")) {
   const style = document.createElement("style");
   style.id = "__nice-action-devtools-styles";
@@ -5514,7 +5581,7 @@ function NiceActionDevtools({ forceEnable, ...props }) {
   if (!forceEnable && process["env"]["NODE_ENV"] !== "development") {
     return null;
   }
-  return /* @__PURE__ */ jsx22(NiceActionDevtools_Panel, {
+  return /* @__PURE__ */ jsx23(NiceActionDevtools_Panel, {
     ...props
   });
 }
@@ -5601,7 +5668,7 @@ function NiceActionDevtools_Panel({
   };
   if (!isOpen) {
     if (view.isPrimary && !view.anyOpen) {
-      return /* @__PURE__ */ jsx22(DevtoolsLauncher, {
+      return /* @__PURE__ */ jsx23(DevtoolsLauncher, {
         items: view.devtools
       });
     }
@@ -5653,16 +5720,16 @@ function NiceActionDevtools_Panel({
     },
     childEntriesMap
   };
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs20("div", {
     id: "__nice-action-devtools-panel",
     style: panelStyle,
     children: [
-      /* @__PURE__ */ jsx22(ResizeHandle, {
+      /* @__PURE__ */ jsx23(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
       }),
-      /* @__PURE__ */ jsx22(PanelHeader, {
+      /* @__PURE__ */ jsx23(PanelHeader, {
         position,
         onPositionChange: (p) => setPrefs({ position: p }),
         onClose: () => setPrefs({ isOpen: false }),
@@ -5672,7 +5739,7 @@ function NiceActionDevtools_Panel({
         } : undefined,
         openOthers: view.otherClosed
       }),
-      /* @__PURE__ */ jsxs19("div", {
+      /* @__PURE__ */ jsxs20("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -5681,7 +5748,7 @@ function NiceActionDevtools_Panel({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ jsx22("div", {
+          /* @__PURE__ */ jsx23("div", {
             style: {
               flexGrow: selectedEntry != null ? 1 - detailRatio : 1,
               flexShrink: 1,
@@ -5689,18 +5756,18 @@ function NiceActionDevtools_Panel({
               minWidth: 0,
               minHeight: 0
             },
-            children: /* @__PURE__ */ jsx22(ActionList, {
+            children: /* @__PURE__ */ jsx23(ActionList, {
               ...virtualListProps,
               style: { width: "100%", height: "100%", overflowY: "auto" }
             })
           }),
-          selectedEntry != null && /* @__PURE__ */ jsxs19(Fragment11, {
+          selectedEntry != null && /* @__PURE__ */ jsxs20(Fragment11, {
             children: [
-              /* @__PURE__ */ jsx22(SplitHandle, {
+              /* @__PURE__ */ jsx23(SplitHandle, {
                 horizontal: isHorizDock,
                 onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
               }),
-              /* @__PURE__ */ jsx22("div", {
+              /* @__PURE__ */ jsx23("div", {
                 style: {
                   flexGrow: detailRatio,
                   flexShrink: 1,
@@ -5718,7 +5785,7 @@ function NiceActionDevtools_Panel({
                     boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
                   }
                 },
-                children: /* @__PURE__ */ jsx22(ActionDetailPanel, {
+                children: /* @__PURE__ */ jsx23(ActionDetailPanel, {
                   entry: selectedEntry,
                   parent: selectedEntryParent,
                   childEntries: selectedEntryChildren,

package/build/index.js

@@ -965,6 +965,7 @@ class ActionRuntime {
   }
   async handleActionPayload(action, options) {
     if (action.type === "request" /* request */) {
+      const observers = action.context._domain._collectActionObservers();
       let handlerForAction;
       try {
         handlerForAction = this.getHandlerForActionOrThrow(action, options);
@@ -973,6 +974,7 @@ class ActionRuntime {
           context: action.context,
           request: action
         });
+        runningAction2.addUpdateListeners(observers);
         runningAction2._completeWithResult(action.errorResult(castNiceError(err2)));
         return runningAction2;
       }
@@ -980,6 +982,7 @@ class ActionRuntime {
         ...options,
         targetLocalRuntime: this
       });
+      runningAction.addUpdateListeners(observers);
       this._trySetupReturnDispatch(runningAction);
       return runningAction;
     }
@@ -1293,6 +1296,9 @@ class ActionDomainBase {
       this._listeners = this._listeners.filter((l) => l !== listener);
     };
   }
+  _getActionObservers() {
+    return this._listeners;
+  }
 }
 
 // src/ActionDefinition/Domain/ActionDomain.ts
@@ -1309,6 +1315,9 @@ class ActionDomain extends ActionDomainBase {
   get rootDomain() {
     return this._rootDomain;
   }
+  _collectActionObservers() {
+    return [...this._rootDomain._getActionObservers(), ...this._getActionObservers()];
+  }
   _registerRuntime(runtime2) {
     this._rootDomain._registerRuntime(runtime2);
   }

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

@@ -0,0 +1,15 @@
+import { ESize } from "../ui_util/size";
+/**
+ * Marks an action that was received from another runtime (a backend push, or an action relayed from
+ * another client) rather than dispatched locally. The chip shows the origin's `envId`; the tooltip
+ * carries the full coordinate. Render it only when {@link getInboundOrigin} returns a value.
+ */
+export declare function OriginChip({ origin, size, subtle, }: {
+    origin: {
+        envId: string;
+        perId?: string;
+        insId?: string;
+    };
+    size?: ESize;
+    subtle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,17 @@ export declare const STATUS_COLOR: Record<TDevtoolsActionStatus, string>;
 export declare const STATUS_THING: Record<TDevtoolsActionStatus, ESemanticThing>;
 export declare const STATUS_SYMBOL: Record<TDevtoolsActionStatus, string>;
 export declare const STATUS_ICON: Record<TDevtoolsActionStatus, LucideIcon>;
+/**
+ * The runtime an action *originated* on, when that differs from the runtime that handled it — i.e. an
+ * inbound action received over a transport (a backend push, or an action relayed from another client),
+ * rather than one dispatched locally. Returns `null` for locally-originated actions (where the origin
+ * matches the handling runtime) and for actions with no known origin.
+ */
+export declare function getInboundOrigin(entry: IDevtoolsActionEntry): {
+    envId: string;
+    perId?: string;
+    insId?: string;
+} | null;
 export declare function safeStringify(value: unknown, indent?: number): string;
 export declare function formatRelativeAge(ms: number): string;
 export declare function formatDuration(entry: IDevtoolsActionEntry): string | null;

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

@@ -54,6 +54,7 @@ export declare enum ESemanticThing {
     domain = "domain",
     handler_local = "handler_local",
     handler_external = "handler_external",
+    origin = "origin",// runtime an action was received from (inbound / pushed actions)
     age = "age",// non-latest relative-age chip
     io_input = "io_input",
     io_output = "io_output",

package/package.json

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