@nice-code/action 0.5.5 → 0.6.1

package/README.md

@@ -215,6 +215,41 @@ function RenameUser() {
 
 ---
 
+## Devtools
+
+### Browser panel — `@nice-code/action/devtools/browser`
+
+A dockable in-app panel showing every action run: status, timing, input/output, routing, errors, and call stacks. Renders only when `NODE_ENV === "development"` (or with `forceEnable`).
+
+```tsx
+import { ActionDevtoolsCore, NiceActionDevtools } from "@nice-code/action/devtools/browser";
+
+const devtoolsCore = new ActionDevtoolsCore();
+devtoolsCore.attachToDomain(appRoot);
+
+function App() {
+  return (
+    <>
+      <MyApp />
+      <NiceActionDevtools core={devtoolsCore} position="dock-bottom" />
+    </>
+  );
+}
+```
+
+### Server logger — `@nice-code/action/devtools/server`
+
+Logs action lifecycle (started / progress / success / error) with timings — pretty lines or newline-delimited JSON.
+
+```ts
+import { ActionServerDevtools } from "@nice-code/action/devtools/server";
+
+const devtools = new ActionServerDevtools({ format: "json", logPayloads: false });
+devtools.attachToDomain(appRoot);
+```
+
+---
+
 ## WebSocket transport
 
 ```ts

package/build/devtools/browser/index.js

@@ -1899,11 +1899,13 @@ class ActionDevtoolsCore {
         }));
       } else if (type === "finished" /* finished */) {
         this._updateEntry(runningAction.cuid, (e) => {
-          const finishedRoutingContext = update.response?.context ?? runningAction.context;
+          const responseRouting = extractRouting(update.response?.context);
+          const localRouting = extractRouting(runningAction.context);
+          const routing = responseRouting.length >= localRouting.length ? responseRouting : localRouting;
           const base = {
             ...e,
             endTime: time,
-            meta: { ...e.meta, routing: extractRouting(finishedRoutingContext) }
+            meta: { ...e.meta, routing }
           };
           const finishType = update.finishType;
           if (finishType === "success" /* success */) {
@@ -1925,11 +1927,21 @@ class ActionDevtoolsCore {
           if (finishType === "failed" /* failed */) {
             const rawError = update.error;
             const errorStack2 = rawError instanceof Error ? rawError.stack : undefined;
-            return { ...base, status: "failed", error: serializeErrorForDisplay(rawError), errorStack: errorStack2 };
+            return {
+              ...base,
+              status: "failed",
+              error: serializeErrorForDisplay(rawError),
+              errorStack: errorStack2
+            };
           }
           const abortReason = update.reason;
           const errorStack = abortReason instanceof Error ? abortReason.stack : undefined;
-          return { ...base, status: "aborted", abortReason: serializeErrorForDisplay(abortReason), errorStack };
+          return {
+            ...base,
+            status: "aborted",
+            abortReason: serializeErrorForDisplay(abortReason),
+            errorStack
+          };
         });
       }
     });
@@ -2091,7 +2103,10 @@ import { useState } from "react";
 
 // src/devtools/browser/components/SectionLabel.tsx
 import { jsx } from "react/jsx-runtime";
-function SectionLabel({ label, color = DEVTOOL_COLOR_SEMANTIC_SYSTEM }) {
+function SectionLabel({
+  label,
+  color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
+}) {
   return /* @__PURE__ */ jsx("div", {
     style: {
       color,
@@ -2518,7 +2533,13 @@ async function resolveSourceMapPositions(frames) {
     const resolved = await resolveCompiledPosition(frame.file, frame.line, frame.col ?? 0);
     if (resolved == null)
       return frame;
-    return { ...frame, originalFile: frame.file, file: resolved.file, line: resolved.line, col: resolved.col };
+    return {
+      ...frame,
+      originalFile: frame.file,
+      file: resolved.file,
+      line: resolved.line,
+      col: resolved.col
+    };
   }));
 }
 function formatFrameFile(file) {
@@ -3859,7 +3880,12 @@ function MetaSection({ entry }) {
           },
           children: [
             /* @__PURE__ */ jsx14("span", {
-              style: { textAlign: "left", color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", paddingTop: "1px" },
+              style: {
+                textAlign: "left",
+                color: DEVTOOL_COLOR_TEXT_MUTED,
+                fontSize: "10px",
+                paddingTop: "1px"
+              },
               children: label
             }),
             /* @__PURE__ */ jsx14("span", {
@@ -3952,7 +3978,12 @@ function RoutingSection({
                   style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "10px" },
                   children: [
                     /* @__PURE__ */ jsx15("span", {
-                      style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", width: "16px", textAlign: "right" },
+                      style: {
+                        color: DEVTOOL_COLOR_TEXT_FAINT,
+                        fontSize: "10px",
+                        width: "16px",
+                        textAlign: "right"
+                      },
                       children: i + 1
                     }),
                     /* @__PURE__ */ jsx15("span", {
@@ -4004,7 +4035,12 @@ function RoutingSection({
                       children: hop.handlerClient != null ? `↳ ${hop.handlerClient.envId}` : ""
                     }),
                     /* @__PURE__ */ jsxs13("span", {
-                      style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0, marginLeft: "auto" },
+                      style: {
+                        color: DEVTOOL_COLOR_TEXT_FAINT,
+                        fontSize: "10px",
+                        flexShrink: 0,
+                        marginLeft: "auto"
+                      },
                       children: [
                         "+",
                         hop.time - startTime,

package/build/devtools/server/index.js

@@ -1,113 +1,3 @@
-// src/devtools/server/NiceActionServerDevtools.ts
-class ActionServerDevtools {
-  _options;
-  _inFlight = new Map;
-  constructor(options = {}) {
-    const defaultEnabled = typeof process !== "undefined" ? process["env"]["NODE_ENV"] !== "production" : true;
-    this._options = {
-      logger: options.logger ?? defaultConsoleLogger,
-      format: options.format ?? "pretty",
-      logPayloads: options.logPayloads ?? true,
-      enabled: options.enabled ?? defaultEnabled
-    };
-  }
-  attachToDomain(domain) {
-    if (!this._options.enabled) {
-      return () => {};
-    }
-    return domain.addActionListener((update) => {
-      const { runningAction, type, time } = update;
-      const actionPath = [...runningAction.allDomains, runningAction.id].join(".");
-      if (type === "started" /* started */) {
-        this._inFlight.set(runningAction.cuid, { startTime: time });
-        this._log("started", actionPath, runningAction.cuid, {
-          ...this._options.logPayloads ? { input: runningAction.state?.request?.input } : {}
-        });
-      } else if (type === "progress" /* progress */) {
-        this._log("progress", actionPath, runningAction.cuid, { progress: update.progress });
-      } else if (type === "finished" /* finished */) {
-        const timing = this._inFlight.get(runningAction.cuid);
-        const duration = timing != null ? time - timing.startTime : undefined;
-        this._inFlight.delete(runningAction.cuid);
-        const finishType = update.finishType;
-        if (finishType === "success" /* success */) {
-          const result = update.response?.result;
-          if (result != null && !result.ok) {
-            this._log("action-error", actionPath, runningAction.cuid, {
-              ...duration != null ? { duration: `${duration}ms` } : {},
-              error: serializeError(result.error)
-            });
-          } else {
-            this._log("success", actionPath, runningAction.cuid, {
-              ...duration != null ? { duration: `${duration}ms` } : {},
-              ...this._options.logPayloads ? { output: result?.output } : {}
-            });
-          }
-        } else if (finishType === "failed" /* failed */) {
-          this._log("failed", actionPath, runningAction.cuid, {
-            ...duration != null ? { duration: `${duration}ms` } : {},
-            error: serializeError(update.error)
-          });
-        } else {
-          this._log("aborted", actionPath, runningAction.cuid, {
-            ...duration != null ? { duration: `${duration}ms` } : {},
-            ...update.reason != null ? { reason: String(update.reason) } : {}
-          });
-        }
-      }
-    });
-  }
-  _log(event, actionPath, cuid, data) {
-    const { logger, format } = this._options;
-    if (format === "json") {
-      logger(JSON.stringify({ time: new Date().toISOString(), event, action: actionPath, cuid, ...data }));
-      return;
-    }
-    const prefix = PRETTY_PREFIX[event] ?? `[${event}]`;
-    const suffix = Object.keys(data).length > 0 ? `  ${formatPrettyData(data)}` : "";
-    logger(`${prefix} ${actionPath}  cuid=${cuid}${suffix}`);
-  }
-}
-var PRETTY_PREFIX = {
-  started: "[nice-action] ►",
-  progress: "[nice-action]  ",
-  success: "[nice-action] ✓",
-  failed: "[nice-action] ✗",
-  aborted: "[nice-action] ○"
-};
-function formatPrettyData(data) {
-  return Object.entries(data).map(([k, v]) => `${k}=${safeStringify(v)}`).join(" ");
-}
-function safeStringify(value) {
-  if (value === undefined)
-    return "undefined";
-  if (value === null)
-    return "null";
-  if (typeof value === "string")
-    return `"${value}"`;
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-function serializeError(err) {
-  if (err == null)
-    return err;
-  if (err instanceof Error)
-    return { message: err.message, name: err.name, stack: err.stack };
-  if (typeof err === "object") {
-    try {
-      return JSON.parse(JSON.stringify(err));
-    } catch {
-      return String(err);
-    }
-  }
-  return err;
-}
-function defaultConsoleLogger(message) {
-  console.log(message);
-}
 // src/devtools/core/ActionDevtoolsCore.ts
 function serializeErrorForDisplay(error) {
   if (error != null && typeof error === "object" && error.name === "NiceError" && typeof error.toJsonObject === "function") {
@@ -181,11 +71,13 @@ class ActionDevtoolsCore {
         }));
       } else if (type === "finished" /* finished */) {
         this._updateEntry(runningAction.cuid, (e) => {
-          const finishedRoutingContext = update.response?.context ?? runningAction.context;
+          const responseRouting = extractRouting(update.response?.context);
+          const localRouting = extractRouting(runningAction.context);
+          const routing = responseRouting.length >= localRouting.length ? responseRouting : localRouting;
           const base = {
             ...e,
             endTime: time,
-            meta: { ...e.meta, routing: extractRouting(finishedRoutingContext) }
+            meta: { ...e.meta, routing }
           };
           const finishType = update.finishType;
           if (finishType === "success" /* success */) {
@@ -207,11 +99,21 @@ class ActionDevtoolsCore {
           if (finishType === "failed" /* failed */) {
             const rawError = update.error;
             const errorStack2 = rawError instanceof Error ? rawError.stack : undefined;
-            return { ...base, status: "failed", error: serializeErrorForDisplay(rawError), errorStack: errorStack2 };
+            return {
+              ...base,
+              status: "failed",
+              error: serializeErrorForDisplay(rawError),
+              errorStack: errorStack2
+            };
           }
           const abortReason = update.reason;
           const errorStack = abortReason instanceof Error ? abortReason.stack : undefined;
-          return { ...base, status: "aborted", abortReason: serializeErrorForDisplay(abortReason), errorStack };
+          return {
+            ...base,
+            status: "aborted",
+            abortReason: serializeErrorForDisplay(abortReason),
+            errorStack
+          };
         });
       }
     });
@@ -240,6 +142,122 @@ class ActionDevtoolsCore {
       listener(snapshot);
   }
 }
+// src/devtools/server/NiceActionServerDevtools.ts
+class ActionServerDevtools {
+  _options;
+  _inFlight = new Map;
+  constructor(options = {}) {
+    const defaultEnabled = typeof process !== "undefined" ? process["env"]["NODE_ENV"] !== "production" : true;
+    this._options = {
+      logger: options.logger ?? defaultConsoleLogger,
+      format: options.format ?? "pretty",
+      logPayloads: options.logPayloads ?? true,
+      enabled: options.enabled ?? defaultEnabled
+    };
+  }
+  attachToDomain(domain) {
+    if (!this._options.enabled) {
+      return () => {};
+    }
+    return domain.addActionListener((update) => {
+      const { runningAction, type, time } = update;
+      const actionPath = [...runningAction.allDomains, runningAction.id].join(".");
+      if (type === "started" /* started */) {
+        this._inFlight.set(runningAction.cuid, { startTime: time });
+        this._log("started", actionPath, runningAction.cuid, {
+          ...this._options.logPayloads ? { input: runningAction.state?.request?.input } : {}
+        });
+      } else if (type === "progress" /* progress */) {
+        this._log("progress", actionPath, runningAction.cuid, { progress: update.progress });
+      } else if (type === "finished" /* finished */) {
+        const timing = this._inFlight.get(runningAction.cuid);
+        const duration = timing != null ? time - timing.startTime : undefined;
+        this._inFlight.delete(runningAction.cuid);
+        const finishType = update.finishType;
+        if (finishType === "success" /* success */) {
+          const result = update.response?.result;
+          if (result != null && !result.ok) {
+            this._log("action-error", actionPath, runningAction.cuid, {
+              ...duration != null ? { duration: `${duration}ms` } : {},
+              error: serializeError(result.error)
+            });
+          } else {
+            this._log("success", actionPath, runningAction.cuid, {
+              ...duration != null ? { duration: `${duration}ms` } : {},
+              ...this._options.logPayloads ? { output: result?.output } : {}
+            });
+          }
+        } else if (finishType === "failed" /* failed */) {
+          this._log("failed", actionPath, runningAction.cuid, {
+            ...duration != null ? { duration: `${duration}ms` } : {},
+            error: serializeError(update.error)
+          });
+        } else {
+          this._log("aborted", actionPath, runningAction.cuid, {
+            ...duration != null ? { duration: `${duration}ms` } : {},
+            ...update.reason != null ? { reason: String(update.reason) } : {}
+          });
+        }
+      }
+    });
+  }
+  _log(event, actionPath, cuid, data) {
+    const { logger, format } = this._options;
+    if (format === "json") {
+      logger(JSON.stringify({
+        time: new Date().toISOString(),
+        event,
+        action: actionPath,
+        cuid,
+        ...data
+      }));
+      return;
+    }
+    const prefix = PRETTY_PREFIX[event] ?? `[${event}]`;
+    const suffix = Object.keys(data).length > 0 ? `  ${formatPrettyData(data)}` : "";
+    logger(`${prefix} ${actionPath}  cuid=${cuid}${suffix}`);
+  }
+}
+var PRETTY_PREFIX = {
+  started: "[nice-action] ►",
+  progress: "[nice-action]  ",
+  success: "[nice-action] ✓",
+  failed: "[nice-action] ✗",
+  aborted: "[nice-action] ○"
+};
+function formatPrettyData(data) {
+  return Object.entries(data).map(([k, v]) => `${k}=${safeStringify(v)}`).join(" ");
+}
+function safeStringify(value) {
+  if (value === undefined)
+    return "undefined";
+  if (value === null)
+    return "null";
+  if (typeof value === "string")
+    return `"${value}"`;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function serializeError(err) {
+  if (err == null)
+    return err;
+  if (err instanceof Error)
+    return { message: err.message, name: err.name, stack: err.stack };
+  if (typeof err === "object") {
+    try {
+      return JSON.parse(JSON.stringify(err));
+    } catch {
+      return String(err);
+    }
+  }
+  return err;
+}
+function defaultConsoleLogger(message) {
+  console.log(message);
+}
 export {
   ActionServerDevtools,
   ActionDevtoolsCore