@nice-code/action 0.4.3 → 0.4.5

package/README.md

@@ -147,28 +147,18 @@ import {
   ActionRuntime,
   ActionExternalClientHandler,
   RuntimeCoordinate,
-  ETransportType,
-  ETransportStatus,
+  HttpTransport,
 } from "@nice-code/action";
 
 export const clientCoord = RuntimeCoordinate.env("frontend");
 export const serverCoord = RuntimeCoordinate.env("backend");
 
+// Transport definitions are plain, reusable objects you construct once.
+const serverHttp = new HttpTransport({ url: "https://api.example.com/resolve_action" });
+
 const serverHandler = new ActionExternalClientHandler({
-  externalClientSpecifier: serverCoord,
-  transports: [
-    {
-      type: ETransportType.http,
-      initialize: () => ({
-        getTransport: () => ({
-          status: ETransportStatus.ready,
-          readyData: {
-            createRequest: () => ({ url: "https://api.example.com/resolve_action" }),
-          },
-        }),
-      }),
-    },
-  ],
+  runtimeCoordinate: serverCoord,
+  transports: [serverHttp],
 }).forDomain(userDomain);
 
 export const clientRuntime = new ActionRuntime(clientCoord)
@@ -226,20 +216,22 @@ function RenameUser() {
 ## WebSocket transport
 
 ```ts
-{
-  type: ETransportType.ws,
-  initialize: () => ({
-    getTransport: () => ({
-      status: ETransportStatus.ready,
-      readyData: {
-        ws: new WebSocket("wss://api.example.com/resolve_action/ws"),
-      },
-    }),
-  }),
-}
+import { WebSocketTransport } from "@nice-code/action";
+
+const serverWs = new WebSocketTransport({ url: "wss://api.example.com/resolve_action/ws" });
+
+const serverHandler = new ActionExternalClientHandler({
+  runtimeCoordinate: serverCoord,
+  transports: [serverWs, serverHttp], // WebSocket preferred, HTTP as fallback
+}).forDomain(userDomain);
 ```
 
-Multiple transports can be registered; the runtime picks the best available one (WebSocket preferred for lower latency, HTTP as fallback).
+The socket is opened lazily and reused across actions to the same endpoint. Multiple transports can
+be registered; the runtime picks the best available one (WebSocket preferred for lower latency, HTTP
+as fallback). For channels nice-action doesn't model natively, use `CustomTransport`.
+
+For advanced cases, `HttpTransport` / `WebSocketTransport` accept functions to derive the URL or
+headers per action (e.g. `new HttpTransport({ url: (input) => \`/api/${input.action.id}\` })`).
 
 ---
 

package/build/devtools/browser/index.js

@@ -1850,6 +1850,8 @@ function extractRouting(context) {
         insId: handler.client.insId
       } : undefined,
       transport: isExternal ? handler.transType : undefined,
+      transportSummary: isExternal ? handler.transInfo?.summary : undefined,
+      transportUrl: isExternal ? handler.transInfo?.url : undefined,
       time: item.time
     };
   });
@@ -1957,7 +1959,7 @@ class ActionDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceActionDevtools.tsx
-import { useEffect as useEffect4, useId, useMemo as useMemo3, useReducer, useState as useState10 } from "react";
+import { useEffect as useEffect4, useId, useMemo as useMemo3, useReducer, useState as useState12 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -2068,7 +2070,7 @@ var SEMANTIC_COLORS = {
 };
 
 // src/devtools/browser/components/action_detail/ActionDetailPanel.tsx
-import { useMemo, useState as useState7 } from "react";
+import { useMemo, useState as useState8 } from "react";
 
 // src/devtools/browser/ui_util/size.ts
 function getSizeValue(size) {
@@ -3230,10 +3232,11 @@ function ActionErrorDisplay({
 import { Component } from "lucide-react";
 
 // src/devtools/browser/components/Chip.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/devtools/browser/components/Tooltip.tsx
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+import { useState as useState3 } from "react";
+import { jsxDEV as jsxDEV6, Fragment as Fragment2 } from "react/jsx-dev-runtime";
 function Tooltip({
   anchor,
   config,
@@ -3312,9 +3315,31 @@ function Tooltip({
     ]
   }, undefined, true, undefined, this);
 }
+function HoverTooltip({
+  config,
+  children,
+  style
+}) {
+  const [anchor, setAnchor] = useState3(null);
+  const enabled = config != null;
+  return /* @__PURE__ */ jsxDEV6(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV6("span", {
+        onMouseEnter: enabled ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
+        onMouseLeave: enabled ? () => setAnchor(null) : undefined,
+        style: { ...style, cursor: enabled ? "default" : style?.cursor },
+        children
+      }, undefined, false, undefined, this),
+      enabled && anchor != null && config != null && /* @__PURE__ */ jsxDEV6(Tooltip, {
+        anchor,
+        config
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 
 // src/devtools/browser/components/Chip.tsx
-import { jsxDEV as jsxDEV7, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7, Fragment as Fragment3 } from "react/jsx-dev-runtime";
 var CHIP_SIZE_STYLES = {
   ["sm" /* sm */]: { fontSize: "0.8em", padding: "1px 3px" },
   ["md" /* md */]: { fontSize: "0.9em", padding: "1px 4px" },
@@ -3328,13 +3353,13 @@ function Chip({
   tooltip,
   children
 }) {
-  const [anchor, setAnchor] = useState3(null);
+  const [anchor, setAnchor] = useState4(null);
   const hasTooltip = tooltip != null;
   const { fontSize, padding } = CHIP_SIZE_STYLES[size];
   const colorEntry = SEMANTIC_COLORS[color];
   const resolvedColor = subtle ? colorEntry.subtle?.color ?? colorEntry.color : colorEntry.color;
   const resolvedBorderColor = subtle ? colorEntry.subtle?.borderColor ?? "transparent" : colorEntry.borderColor;
-  return /* @__PURE__ */ jsxDEV7(Fragment2, {
+  return /* @__PURE__ */ jsxDEV7(Fragment3, {
     children: [
       /* @__PURE__ */ jsxDEV7("span", {
         onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
@@ -3363,8 +3388,8 @@ 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";
+import { useState as useState5 } from "react";
+import { jsxDEV as jsxDEV8, Fragment as Fragment4 } from "react/jsx-dev-runtime";
 var BASE_ICON_SIDE_LENGTH_EM = 1.6;
 var ICON_GAP_EM = 0.3;
 function Icon({
@@ -3376,14 +3401,14 @@ function Icon({
   style,
   noBackground = false
 }) {
-  const [anchor, setAnchor] = useState4(null);
+  const [anchor, setAnchor] = useState5(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, {
+  return /* @__PURE__ */ jsxDEV8(Fragment4, {
     children: [
       /* @__PURE__ */ jsxDEV8("div", {
         onMouseEnter: hasTooltip ? (e) => setAnchor(e.currentTarget.getBoundingClientRect()) : undefined,
@@ -3419,9 +3444,9 @@ function Icon({
 }
 
 // src/devtools/browser/components/DomainChip.tsx
-import { jsxDEV as jsxDEV9, Fragment as Fragment4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9, Fragment as Fragment5 } from "react/jsx-dev-runtime";
 function DomainHierarchyContent({ allDomains }) {
-  return /* @__PURE__ */ jsxDEV9(Fragment4, {
+  return /* @__PURE__ */ jsxDEV9(Fragment5, {
     children: allDomains.map((d, i) => {
       const isCurrent = i === allDomains.length - 1;
       return /* @__PURE__ */ jsxDEV9("div", {
@@ -3516,18 +3541,44 @@ function DomainChip({
 }
 
 // src/devtools/browser/components/HandlerChips.tsx
-import { jsxDEV as jsxDEV10, Fragment as Fragment5 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10, Fragment as Fragment6 } from "react/jsx-dev-runtime";
 function getExternalLabel(hop) {
   if (hop.handlerType !== "external")
     return null;
   return hop.handlerClient != null ? `${hop.transport ?? "ext"} → ${hop.handlerClient.envId}` : `→ ${hop.transport ?? "ext"}`;
 }
+function getTransportTooltip(hop) {
+  return getTransportTooltipForHops([hop]);
+}
+function getTransportTooltipForHops(hops) {
+  const lines = hops.filter((hop) => hop.handlerType === "external").map((hop) => ({ summary: hop.transportSummary, url: hop.transportUrl })).filter((line) => line.summary != null || line.url != null);
+  if (lines.length === 0)
+    return;
+  return {
+    title: "Transport",
+    content: /* @__PURE__ */ jsxDEV10("div", {
+      style: { display: "flex", flexDirection: "column", gap: "6px", fontSize: "11px" },
+      children: lines.map((line) => /* @__PURE__ */ jsxDEV10("div", {
+        style: { display: "flex", flexDirection: "column", gap: "2px" },
+        children: [
+          line.summary != null && /* @__PURE__ */ jsxDEV10("span", {
+            children: line.summary
+          }, undefined, false, undefined, this),
+          line.url != null && line.url !== line.summary && /* @__PURE__ */ jsxDEV10("span", {
+            style: { color: DEVTOOL_COLOR_TEXT_MUTED, wordBreak: "break-all" },
+            children: line.url
+          }, undefined, false, undefined, this)
+        ]
+      }, `${line.summary ?? ""}:${line.url ?? ""}`, true, undefined, this))
+    }, undefined, false, undefined, this)
+  };
+}
 function HandlerChips({ entry, size, subtle }) {
   const firstHop = entry.meta.routing[0];
   const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
   const externalLabel = firstHop != null ? getExternalLabel(firstHop) : null;
   const firstHopIsLocal = firstHop != null && firstHop.handlerType === "local";
-  return /* @__PURE__ */ jsxDEV10(Fragment5, {
+  return /* @__PURE__ */ jsxDEV10(Fragment6, {
     children: [
       localEnvId != null && (firstHopIsLocal || externalLabel == null) && /* @__PURE__ */ jsxDEV10(Chip, {
         color: "handler_local" /* handler_local */,
@@ -3539,6 +3590,7 @@ function HandlerChips({ entry, size, subtle }) {
         color: "handler_external" /* handler_external */,
         size,
         subtle,
+        tooltip: firstHop != null ? getTransportTooltip(firstHop) : undefined,
         children: externalLabel
       }, undefined, false, undefined, this)
     ]
@@ -3546,15 +3598,15 @@ function HandlerChips({ entry, size, subtle }) {
 }
 
 // src/devtools/browser/components/RunningTimer.tsx
-import { useEffect as useEffect2, useState as useState5 } from "react";
-import { jsxDEV as jsxDEV11, Fragment as Fragment6 } from "react/jsx-dev-runtime";
+import { useEffect as useEffect2, useState as useState6 } from "react";
+import { jsxDEV as jsxDEV11, Fragment as Fragment7 } from "react/jsx-dev-runtime";
 function RunningTimer({ startTime }) {
-  const [elapsed, setElapsed] = useState5(() => Date.now() - startTime);
+  const [elapsed, setElapsed] = useState6(() => Date.now() - startTime);
   useEffect2(() => {
     const interval = setInterval(() => setElapsed(Date.now() - startTime), 100);
     return () => clearInterval(interval);
   }, [startTime]);
-  return /* @__PURE__ */ jsxDEV11(Fragment6, {
+  return /* @__PURE__ */ jsxDEV11(Fragment7, {
     children: [
       elapsed,
       "ms"
@@ -3563,7 +3615,7 @@ function RunningTimer({ startTime }) {
 }
 function DurationDisplay({ entry }) {
   const d = formatDuration(entry);
-  return /* @__PURE__ */ jsxDEV11(Fragment6, {
+  return /* @__PURE__ */ jsxDEV11(Fragment7, {
     children: d ?? /* @__PURE__ */ jsxDEV11(RunningTimer, {
       startTime: entry.startTime
     }, undefined, false, undefined, this)
@@ -3599,6 +3651,8 @@ function CallStackLink({
   const symbol = STATUS_SYMBOL[entry.status];
   const labelColor = entryRole === "caller" ? DEVTOOL_COLOR_TEXT_SECONDARY : getCalledColor(entry);
   const label = entryRole === "caller" ? "↑ from" : getCalledLabel(entry);
+  const firstHop = entry.meta.routing[0];
+  const transportTooltip = entryRole === "called" && firstHop != null ? getTransportTooltip(firstHop) : undefined;
   return /* @__PURE__ */ jsxDEV12("div", {
     onClick,
     style: {
@@ -3620,9 +3674,13 @@ function CallStackLink({
             style: { color, fontSize: "10px", flexShrink: 0 },
             children: symbol
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV12("span", {
-            style: { color: labelColor, fontSize: "9px", flexShrink: 0 },
-            children: label
+          /* @__PURE__ */ jsxDEV12(HoverTooltip, {
+            config: transportTooltip,
+            style: { flexShrink: 0, display: "flex" },
+            children: /* @__PURE__ */ jsxDEV12("span", {
+              style: { color: labelColor, fontSize: "9px" },
+              children: label
+            }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV12("span", {
             style: { display: "flex", alignItems: "center", gap: "5px" },
@@ -3700,10 +3758,11 @@ function ChildDispatchChips({
     const runtimeId = item.handlerClient?.envId ?? item.transport ?? "ext";
     const hasClient = item.handlerClient != null;
     if (!groups.has(runtimeId)) {
-      groups.set(runtimeId, { runtimeId, transports: [], hasClient });
+      groups.set(runtimeId, { runtimeId, transports: [], hasClient, hops: [] });
     }
-    const transport = item.transport;
     const group = groups.get(runtimeId);
+    group.hops.push(item);
+    const transport = item.transport;
     if (transport != null && !group.transports.includes(transport)) {
       group.transports.push(transport);
     }
@@ -3716,6 +3775,7 @@ function ChildDispatchChips({
       return /* @__PURE__ */ jsxDEV13(Chip, {
         color: "handler_external" /* handler_external */,
         size,
+        tooltip: getTransportTooltipForHops(group.hops),
         children: label
       }, group.runtimeId, false, undefined, this);
     })
@@ -3723,7 +3783,7 @@ function ChildDispatchChips({
 }
 
 // src/devtools/browser/components/MetaSection.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
 function MetaChip({ label, value }) {
   return /* @__PURE__ */ jsxDEV14("span", {
@@ -3744,7 +3804,7 @@ function MetaChip({ label, value }) {
   }, undefined, true, undefined, this);
 }
 function MetaSection({ entry }) {
-  const [expanded, setExpanded] = useState6(false);
+  const [expanded, setExpanded] = useState7(false);
   const { meta, cuid } = entry;
   const expandedRows = [
     { label: "cuid", value: cuid },
@@ -3869,7 +3929,8 @@ function RoutingSection({
             const isLocal = hop.handlerType === "local";
             const isLast = i === hopCount - 1 && phantomCount === 0;
             const badgeColor = isLocal ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_COLOR_SEMANTIC_WARNING;
-            const badgeText = isLocal ? "● exec" : `→ ${hop.transport ?? "ext"}`;
+            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__ */ jsxDEV15("div", {
               style: {
@@ -3905,9 +3966,20 @@ function RoutingSection({
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV15("span", {
-                  style: { color: badgeColor, fontSize: "10px", whiteSpace: "nowrap" },
-                  children: badgeText
+                /* @__PURE__ */ jsxDEV15(HoverTooltip, {
+                  config: transportTooltip,
+                  style: { display: "block", minWidth: 0, overflow: "hidden" },
+                  children: /* @__PURE__ */ jsxDEV15("span", {
+                    style: {
+                      color: badgeColor,
+                      fontSize: "10px",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      display: "block"
+                    },
+                    children: badgeText
+                  }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV15("span", {
                   style: {
@@ -4140,7 +4212,7 @@ function ActionDetailPanel({
   childEntries,
   onSelectEntry
 }) {
-  const [focusedChildCuid, setFocusedChildCuid] = useState7(null);
+  const [focusedChildCuid, setFocusedChildCuid] = useState8(null);
   const focusedEntry = focusedChildCuid != null ? childEntries.find((e) => e.cuid === focusedChildCuid) ?? entry : entry;
   const maxRoutingHops = Math.max(entry.meta.routing.length, ...childEntries.map((e) => e.meta.routing.length), 0);
   const maxCallSiteFrames = Math.max(countUserFrames(entry.meta.originClient, entry.callSite), ...childEntries.map((e) => countUserFrames(e.meta.originClient, e.callSite)), 0);
@@ -4240,13 +4312,14 @@ import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
 import { CircleX as CircleX3, PackageCheck as PackageCheck2, Variable as Variable2 } from "lucide-react";
-import { Fragment as Fragment8, useState as useState8 } from "react";
+import { Fragment as Fragment9, useState as useState10 } from "react";
 
 // src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
 import { CircleX as CircleX2, PackageCheck, Sparkle, Variable } from "lucide-react";
+import { useState as useState9 } from "react";
 
 // src/devtools/browser/components/action_list/IoTooltipContent.tsx
-import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17, Fragment as Fragment8 } from "react/jsx-dev-runtime";
 var JSON_TOKEN_RE2 = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
 function renderColoredJson2(text) {
   const nodes = [];
@@ -4333,6 +4406,8 @@ var ActionInputAndOutputChip = ({
   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 transportTooltip = firstHop != null ? getTransportTooltip(firstHop) : undefined;
+  const [labelAnchor, setLabelAnchor] = useState9(null);
   const isNewInput = breakReasons.includes("new_input" /* new_input */);
   const isNewOutput = breakReasons.includes("new_output" /* new_output */);
   const hasError = entry.error != null || entry.abortReason != null;
@@ -4381,9 +4456,15 @@ var ActionInputAndOutputChip = ({
           children: "→"
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV18("span", {
-          style: { opacity: 0.8 },
+          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
         }, undefined, false, undefined, this),
+        labelAnchor != null && transportTooltip != null && /* @__PURE__ */ jsxDEV18(Tooltip, {
+          anchor: labelAnchor,
+          config: transportTooltip
+        }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV18("span", {
           style: { opacity: 0.6 },
           color,
@@ -4420,7 +4501,7 @@ var ActionInputAndOutputChip = ({
 };
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { jsxDEV as jsxDEV19, Fragment as Fragment9 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19, Fragment as Fragment10 } from "react/jsx-dev-runtime";
 function getLatestChipColor(status) {
   if (status === "failed")
     return "failed" /* failed */;
@@ -4447,7 +4528,7 @@ function GroupDotTooltip({
     config: {
       align: "center",
       maxWidth: 240,
-      content: /* @__PURE__ */ jsxDEV19(Fragment9, {
+      content: /* @__PURE__ */ jsxDEV19(Fragment10, {
         children: [
           /* @__PURE__ */ jsxDEV19("div", {
             style: { color: dotColor, marginBottom: "1px" },
@@ -4489,10 +4570,10 @@ function GroupDot({
   isActive,
   onSelect
 }) {
-  const [anchor, setAnchor] = useState8(null);
+  const [anchor, setAnchor] = useState10(null);
   const dotColor = STATUS_COLOR[entry.status];
   const hovered = anchor != null;
-  return /* @__PURE__ */ jsxDEV19(Fragment9, {
+  return /* @__PURE__ */ jsxDEV19(Fragment10, {
     children: [
       /* @__PURE__ */ jsxDEV19("button", {
         "data-cuid": entry.cuid,
@@ -4541,7 +4622,10 @@ 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" /* new_input */ && r !== "new_output" /* new_output */) ?? false) || entry.error != null || entry.abortReason != null;
+  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__ */ jsxDEV19("div", {
     "data-cuid": entry.cuid,
     onClick,
@@ -4663,7 +4747,7 @@ function ActionEntryRow({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      hasBottomContent && (childEntries?.length ?? 0) > 0 && /* @__PURE__ */ jsxDEV19("div", {
+      hasBottomContent && /* @__PURE__ */ jsxDEV19("div", {
         style: {
           display: "flex",
           flexWrap: "wrap",
@@ -4672,7 +4756,7 @@ function ActionEntryRow({
           paddingLeft: "4.5em"
         },
         children: [
-          childEntries?.map((child) => /* @__PURE__ */ jsxDEV19(Fragment8, {
+          externalChildEntries.map((child) => /* @__PURE__ */ jsxDEV19(Fragment9, {
             children: [
               /* @__PURE__ */ jsxDEV19(Icon, {
                 size: "sm" /* sm */,
@@ -4708,12 +4792,12 @@ function ActionEntryRow({
               }, undefined, false, undefined, this)
             ]
           }, child.actionId, true, undefined, this)),
-          breakReasons?.filter((r) => r !== "new_input" /* new_input */ && r !== "new_output" /* new_output */).map((reason) => /* @__PURE__ */ jsxDEV19(Chip, {
+          nonIoBreakReasons.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__ */ jsxDEV19(Icon, {
+          externalChildEntries.length > 0 && hasBottomError && /* @__PURE__ */ jsxDEV19(Icon, {
             size: "sm" /* sm */,
             icon: CircleX3,
             color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
@@ -4874,7 +4958,7 @@ function ActionList({
 }
 
 // src/devtools/browser/components/PanelChrome.tsx
-import { useState as useState9 } from "react";
+import { useState as useState11 } from "react";
 import { jsxDEV as jsxDEV21 } from "react/jsx-dev-runtime";
 var MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
 var SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
@@ -5079,7 +5163,7 @@ function SplitHandle({
   horizontal,
   onRatioChange
 }) {
-  const [hovered, setHovered] = useState9(false);
+  const [hovered, setHovered] = useState11(false);
   const onMouseDown = (e) => {
     e.preventDefault();
     const container = e.currentTarget.parentElement;
@@ -5166,7 +5250,7 @@ function DevtoolsLauncher({ items }) {
 
 // src/devtools/browser/devtools_dock.ts
 var GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
-var VERSION = 2;
+var VERSION = 4;
 function createCoordinator() {
   const panels = new Map;
   const listeners = new Set;
@@ -5226,17 +5310,25 @@ function createCoordinator() {
       const anyOpen = list.some((p) => p.open);
       const firstId = list.length > 0 ? list[0].id : null;
       let dockOffset = 0;
+      let stacked = false;
       const self = panels.get(id);
       if (self != null && self.open) {
+        let seenSelf = false;
         for (const panel of list) {
-          if (panel.id === id)
-            break;
-          if (panel.open && panel.side === self.side)
-            dockOffset += panel.size;
+          if (panel.id === id) {
+            seenSelf = true;
+            continue;
+          }
+          if (panel.open && panel.side === self.side) {
+            stacked = true;
+            if (!seenSelf)
+              dockOffset += panel.size;
+          }
         }
       }
       return {
         dockOffset,
+        stacked,
         anyOpen,
         isPrimary: id === firstId,
         devtools: list.map(toRef),
@@ -5264,7 +5356,7 @@ function getDevtoolsDockCoordinator() {
 }
 
 // src/devtools/browser/NiceActionDevtools.tsx
-import { jsxDEV as jsxDEV22, Fragment as Fragment10 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV22, Fragment as Fragment11 } 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";
@@ -5375,9 +5467,9 @@ function NiceActionDevtools_Panel({
   position: defaultPosition = "dock-bottom",
   initialOpen = false
 }) {
-  const [prefs, setPrefsRaw] = useState10(() => readPrefs(defaultPosition, initialOpen));
-  const [entries, setEntries] = useState10([]);
-  const [selectedCuid, setSelectedCuid] = useState10(null);
+  const [prefs, setPrefsRaw] = useState12(() => readPrefs(defaultPosition, initialOpen));
+  const [entries, setEntries] = useState12([]);
+  const [selectedCuid, setSelectedCuid] = useState12(null);
   useEffect4(() => core.subscribe(setEntries), [core]);
   const groups = useMemo3(() => {
     const byCuid = new Map(entries.map((e) => [e.cuid, e]));
@@ -5468,7 +5560,31 @@ function NiceActionDevtools_Panel({
     flexDirection: "column",
     boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
     overflow: "hidden",
-    ...dockSide === "bottom" ? { bottom: view.dockOffset, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "8px 8px 0 0" } : dockSide === "top" ? { top: view.dockOffset, left: 0, right: 0, height: `${dockedSize}px`, borderRadius: "0 0 8px 8px" } : dockSide === "left" ? { top: 0, left: view.dockOffset, bottom: 0, width: `${dockedSize}px`, borderRadius: "0 8px 8px 0" } : { top: 0, right: view.dockOffset, bottom: 0, width: `${dockedSize}px`, borderRadius: "8px 0 0 8px" }
+    ...dockSide === "bottom" ? {
+      bottom: view.dockOffset,
+      left: 0,
+      right: 0,
+      height: `${dockedSize}px`,
+      borderRadius: view.stacked ? "0" : "8px 8px 0 0"
+    } : dockSide === "top" ? {
+      top: view.dockOffset,
+      left: 0,
+      right: 0,
+      height: `${dockedSize}px`,
+      borderRadius: view.stacked ? "0" : "0 0 8px 8px"
+    } : dockSide === "left" ? {
+      top: 0,
+      left: view.dockOffset,
+      bottom: 0,
+      width: `${dockedSize}px`,
+      borderRadius: view.stacked ? "0" : "0 8px 8px 0"
+    } : {
+      top: 0,
+      right: view.dockOffset,
+      bottom: 0,
+      width: `${dockedSize}px`,
+      borderRadius: view.stacked ? "0" : "8px 0 0 8px"
+    }
   };
   const selectedEntryParent = selectedEntry?.parentCuid != null ? entries.find((e) => e.cuid === selectedEntry.parentCuid) ?? null : null;
   const selectedEntryChildren = selectedEntry != null ? [...entries].filter((e) => e.parentCuid === selectedEntry.cuid).sort((a, b) => a.startTime - b.startTime) : [];
@@ -5522,7 +5638,7 @@ function NiceActionDevtools_Panel({
               style: { width: "100%", height: "100%", overflowY: "auto" }
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          selectedEntry != null && /* @__PURE__ */ jsxDEV22(Fragment10, {
+          selectedEntry != null && /* @__PURE__ */ jsxDEV22(Fragment11, {
             children: [
               /* @__PURE__ */ jsxDEV22(SplitHandle, {
                 horizontal: isHorizDock,

package/build/devtools/server/index.js

@@ -151,6 +151,8 @@ function extractRouting(context) {
         insId: handler.client.insId
       } : undefined,
       transport: isExternal ? handler.transType : undefined,
+      transportSummary: isExternal ? handler.transInfo?.summary : undefined,
+      transportUrl: isExternal ? handler.transInfo?.url : undefined,
       time: item.time
     };
   });