@plitzi/sdk-dev-tools 0.35.8 → 0.35.9

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @plitzi/sdk-dev-tools
 
+## 0.35.9
+
+### Patch Changes
+
+- Debug a server action's whole flow from the dev-tools, not just its answer.
+
+  A run now reports an OUTLINE of what it did: every step in order, with its task, how it ended, how long it took, and
+  the redacted error of the one that broke the flow — the compensation steps `flow.onFailure` ran included. It carries
+  nothing a step was given or returned, so it goes to any page whose debugging the deployment authorized (`devMode`, or
+  a space that switched dev tools on for its published site) and to no other. The full trace, with each step's results,
+  still reaches only an authoring request or a development server.
+
+  Runs the SERVER started while rendering a page — the ones feeding `runtime: 'server'` elements — reach the dev-tools
+  too, seeded into the page and added to by every `/_rsc` refresh, under the same authorization: a page nobody
+  authorized is not told they happened. A response carrying them is never cached. A run that died on its deadline now
+  reports the step it was on rather than nothing at all.
+
+  The Actions tab was rebuilt around it: filters and search over the log, a run list that names the step that broke,
+  and a detail panel with the flow's timeline, its compensation shown apart, and what the run carried in and out.
+
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.35.9
+  - @plitzi/sdk-schema@0.35.9
+  - @plitzi/sdk-shared@0.35.9
+  - @plitzi/sdk-style@0.35.9
+
 ## 0.35.8
 
 ### Patch Changes

package/dist/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.d.ts

@@ -1,3 +1,10 @@
-/** Server action runs; `detached` and `stream` modes leave no other trace in the UI. */
+/**
+ * Every server action this page caused, including the ones it never asked for.
+ *
+ * A `detached` run has no answer to await and a `stream` returns before its frames arrive, so neither leaves a trace
+ * anywhere else; a `render` run happened before the page existed in the browser. What each shows beyond its own
+ * outcome is what the server was willing to send — the steps to a page allowed to debug them, and what those steps
+ * read and answered only to an authoring session or a dev server.
+ */
 declare const ActionsViewer: () => import("react").JSX.Element;
 export default ActionsViewer;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.mjs

@@ -1,147 +1,57 @@
-import e from "clsx";
-import { useCallback as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { cancelActionRun as a, useActionRuns as o, useCommonStore as s } from "@plitzi/sdk-shared/store";
-import c from "@plitzi/plitzi-ui/Button";
+import e from "./components/ActionsToolbar/index.mjs";
+import t from "./components/DetailShell/index.mjs";
+import { filterRuns as n, isLive as r } from "./helpers.mjs";
+import i from "./components/RunDetail/index.mjs";
+import a from "./components/RunList/index.mjs";
+import o from "@plitzi/plitzi-ui/hooks/useStorage";
+import { useCallback as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { cancelActionRun as f, useActionRuns as p, useCommonStore as m } from "@plitzi/sdk-shared/store";
 //#region src/components/DevToolsPanel/tabs/ActionsViewer/ActionsViewer.tsx
-var l = {
-	running: "text-blue-600 dark:text-blue-400",
-	streaming: "text-blue-600 dark:text-blue-400",
-	accepted: "text-blue-600 dark:text-blue-400",
-	completed: "text-green-700 dark:text-green-400",
-	failed: "text-red-600 dark:text-red-400",
-	aborted: "text-amber-600 dark:text-amber-400",
-	skipped: "text-zinc-500"
-}, u = (e) => new Date(e).toLocaleTimeString(), d = (e) => e.endedAt ? `${e.endedAt - e.startedAt}ms` : "…", f = (e) => e.endedAt === void 0, p = () => {
-	let { runs: p, clear: m } = o(), [h] = s("actions.endpoint"), [g, _] = n(), v = p.filter(f), y = t((e) => () => _((t) => t === e ? void 0 : e), []), b = t((e) => () => a(e), []);
-	return /* @__PURE__ */ i("div", {
-		className: "flex h-full w-full flex-col overflow-auto",
+var h = "This page is served without a Plitzi server: every action step is inert", g = () => {
+	let { runs: g, clear: _ } = p(), [v] = m("actions.endpoint"), [y, b] = o("plitzi-sdk.dev-tools.actions.filter", "all"), [x, S] = l(""), [C, w] = l(), [T, E] = l(), D = c(() => n(g, y, x), [
+		g,
+		y,
+		x
+	]), O = c(() => g.filter(r).length, [g]), k = c(() => g.find((e) => e.id === C), [g, C]), A = s((e) => {
+		w((t) => t === e ? void 0 : e), E(void 0);
+	}, []), j = s((e) => {
+		E((t) => t === e ? void 0 : e);
+	}, []), M = s((e) => f(e), []), N = s(() => {
+		_(), w(void 0), E(void 0);
+	}, [_]);
+	return /* @__PURE__ */ d("div", {
+		className: "flex h-full w-full flex-col",
 		children: [
-			/* @__PURE__ */ i("div", {
-				className: "flex items-center justify-between border-b border-zinc-200 px-2 py-1 dark:border-zinc-700",
-				children: [/* @__PURE__ */ i("div", {
-					className: "flex items-center gap-2",
-					children: [v.length > 0 && /* @__PURE__ */ i("span", {
-						className: "flex items-center gap-1 text-blue-600 dark:text-blue-400",
-						children: [
-							/* @__PURE__ */ r("i", { className: "fa-solid fa-circle-notch fa-spin" }),
-							v.length,
-							" running"
-						]
-					}), /* @__PURE__ */ r("span", {
-						className: "text-xs text-zinc-500 dark:text-zinc-400",
-						children: h ? `Server actions run at ${h}` : "This page is served without a Plitzi server: every action step is inert"
-					})]
-				}), /* @__PURE__ */ r(c, {
-					size: "xs",
-					disabled: p.length === 0,
-					onClick: m,
-					children: "Clear"
-				})]
+			/* @__PURE__ */ u(e, {
+				filter: y,
+				query: x,
+				liveCount: O,
+				runCount: g.length,
+				onFilterChange: b,
+				onQueryChange: S,
+				onClear: N
 			}),
-			p.length === 0 && /* @__PURE__ */ r("div", {
-				className: "p-3 text-xs text-zinc-500 dark:text-zinc-400",
-				children: "No server action has run on this page yet. A run appears the moment one is SENT — including the ones that never come back."
+			v === void 0 && /* @__PURE__ */ u("div", {
+				className: "shrink-0 border-b border-amber-200 bg-amber-50 px-2 py-1 text-[10px] text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400",
+				children: h
 			}),
-			/* @__PURE__ */ r("div", {
-				className: "flex flex-col",
-				children: p.map((t) => /* @__PURE__ */ i("div", {
-					className: "border-b border-zinc-100 dark:border-zinc-800",
-					children: [/* @__PURE__ */ i("div", {
-						className: "flex w-full items-center gap-2 px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800",
-						children: [/* @__PURE__ */ i("button", {
-							type: "button",
-							className: "flex grow items-center gap-2 py-1 text-left text-xs",
-							onClick: y(t.id),
-							children: [
-								/* @__PURE__ */ r("span", {
-									className: "text-zinc-400 dark:text-zinc-500",
-									children: u(t.startedAt)
-								}),
-								/* @__PURE__ */ r("span", {
-									className: "font-medium",
-									children: t.actionId || "(no action named)"
-								}),
-								/* @__PURE__ */ r("span", {
-									className: "rounded-sm bg-zinc-100 px-1 text-[10px] uppercase dark:bg-zinc-800",
-									children: t.mode
-								}),
-								/* @__PURE__ */ r("span", {
-									className: e("ml-auto", l[t.status] ?? ""),
-									children: t.reason ?? t.status
-								}),
-								/* @__PURE__ */ r("span", {
-									className: "text-zinc-400 dark:text-zinc-500",
-									children: d(t)
-								})
-							]
-						}), f(t) && t.cancellable && /* @__PURE__ */ r(c, {
-							size: "xs",
-							intent: "secondary",
-							onClick: b(t.id),
-							children: "Cancel"
-						})]
-					}), g === t.id && /* @__PURE__ */ i("div", {
-						className: "flex flex-col gap-2 bg-zinc-50 px-3 py-2 text-xs dark:bg-zinc-800/50",
-						children: [
-							t.runId && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("span", {
-								className: "text-zinc-500 dark:text-zinc-400",
-								children: "Run id: "
-							}), /* @__PURE__ */ r("span", {
-								className: "font-mono",
-								children: t.runId
-							})] }),
-							t.error && /* @__PURE__ */ r("div", {
-								className: "break-words text-red-600 dark:text-red-400",
-								children: t.error
-							}),
-							/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
-								className: "text-zinc-500 dark:text-zinc-400",
-								children: "Input"
-							}), /* @__PURE__ */ r("pre", {
-								className: "overflow-auto whitespace-pre-wrap",
-								children: JSON.stringify(t.input ?? {}, null, 2)
-							})] }),
-							t.output && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
-								className: "text-zinc-500 dark:text-zinc-400",
-								children: "Output"
-							}), /* @__PURE__ */ r("pre", {
-								className: "overflow-auto whitespace-pre-wrap",
-								children: JSON.stringify(t.output, null, 2)
-							})] }),
-							t.progress.length > 0 && /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ i("div", {
-								className: "text-zinc-500 dark:text-zinc-400",
-								children: [
-									"Progress (",
-									t.progress.length,
-									")"
-								]
-							}), /* @__PURE__ */ r("pre", {
-								className: "overflow-auto whitespace-pre-wrap",
-								children: JSON.stringify(t.progress, null, 2)
-							})] }),
-							t.trace && /* @__PURE__ */ i("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ r("div", {
-									className: "text-zinc-500 dark:text-zinc-400",
-									children: "Server steps"
-								}), t.trace.map((t, n) => {
-									let a = t.node, o = typeof t.status == "string" ? t.status : "";
-									return /* @__PURE__ */ i("div", {
-										className: "flex items-center justify-between rounded-sm border border-zinc-200 px-2 py-1 dark:border-zinc-700",
-										children: [/* @__PURE__ */ r("span", { children: a?.title ?? a?.action ?? "step" }), /* @__PURE__ */ r("span", {
-											className: e(l[o === "success" ? "completed" : "failed"]),
-											children: o
-										})]
-									}, `${String(a?.action)}-${n}`);
-								})]
-							})
-						]
-					})]
-				}, t.id))
+			/* @__PURE__ */ d("div", {
+				className: "flex min-h-0 grow",
+				children: [/* @__PURE__ */ u(a, {
+					runs: D,
+					total: g.length,
+					selectedRunId: C,
+					onSelect: A,
+					onCancel: M
+				}), k !== void 0 && /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u(i, {
+					run: k,
+					selectedStepId: T,
+					onSelectStep: j
+				}) })]
 			})
 		]
 	});
 };
 //#endregion
-export { p as default };
+export { g as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/ActionsToolbar.d.ts

@@ -0,0 +1,12 @@
+import { RunFilter } from '../../helpers';
+export type ActionsToolbarProps = {
+    filter: RunFilter;
+    query: string;
+    liveCount: number;
+    runCount: number;
+    onFilterChange: (filter: RunFilter) => void;
+    onQueryChange: (query: string) => void;
+    onClear: () => void;
+};
+declare const ActionsToolbar: ({ filter, query, liveCount, runCount, onFilterChange, onQueryChange, onClear }: ActionsToolbarProps) => import("react").JSX.Element;
+export default ActionsToolbar;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/ActionsToolbar.mjs

@@ -0,0 +1,68 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/ActionsToolbar.tsx
+var i = [
+	{
+		id: "all",
+		label: "All",
+		icon: "fa-solid fa-list"
+	},
+	{
+		id: "live",
+		label: "Running",
+		icon: "fa-solid fa-circle-notch"
+	},
+	{
+		id: "failed",
+		label: "Failed",
+		icon: "fa-solid fa-circle-exclamation"
+	}
+], a = ({ filter: a, query: o, liveCount: s, runCount: c, onFilterChange: l, onQueryChange: u, onClear: d }) => {
+	let f = t((e) => () => l(e), [l]), p = t((e) => u(e.target.value), [u]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex shrink-0 items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1.5 dark:border-zinc-800 dark:bg-zinc-900",
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "flex items-stretch gap-1",
+				children: i.map((t) => {
+					let i = a === t.id;
+					return /* @__PURE__ */ r("button", {
+						onClick: f(t.id),
+						"aria-pressed": i,
+						className: e("flex h-6 items-center gap-1 rounded px-2 text-xs font-medium transition-colors", {
+							"bg-violet-500 text-white": i,
+							"text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700": !i
+						}),
+						children: [
+							/* @__PURE__ */ n("i", { className: e(t.icon, t.id === "live" && s > 0 && "fa-spin") }),
+							t.label,
+							t.id === "live" && s > 0 && /* @__PURE__ */ n("span", {
+								className: "tabular-nums",
+								children: s
+							})
+						]
+					}, t.id);
+				})
+			}),
+			/* @__PURE__ */ n("input", {
+				type: "search",
+				value: o,
+				onChange: p,
+				placeholder: "Filter by action, step or run id",
+				className: "h-6 min-w-0 grow rounded border border-zinc-200 bg-white px-2 text-xs text-zinc-700 placeholder:text-zinc-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200"
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "shrink-0 text-[10px] text-zinc-400 tabular-nums dark:text-zinc-500",
+				children: [c, " runs"]
+			}),
+			/* @__PURE__ */ r("button", {
+				onClick: d,
+				className: "flex h-6 shrink-0 items-center gap-1 rounded px-2 text-xs font-medium text-zinc-600 hover:bg-zinc-200 dark:text-zinc-300 dark:hover:bg-zinc-700",
+				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-trash" }), "Clear"]
+			})
+		]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ActionsToolbar } from './ActionsToolbar';
+export type { ActionsToolbarProps } from './ActionsToolbar';
+export default ActionsToolbar;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ActionsToolbar.mjs";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/ActionsToolbar/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/DetailShell.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type DetailShellProps = {
+    children: ReactNode;
+};
+/** The resizable column the selected run is inspected in; its width is remembered across sessions. */
+declare const DetailShell: ({ children }: DetailShellProps) => import("react").JSX.Element;
+export default DetailShell;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/DetailShell.mjs

@@ -0,0 +1,26 @@
+import e from "@plitzi/plitzi-ui/hooks/useStorage";
+import { useCallback as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/ContainerResizable";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/DetailShell.tsx
+var i = 200, a = 520, o = 280, s = ({ children: s }) => {
+	let [c, l] = e("plitzi-sdk.dev-tools.actions.detail-width", o), u = t((e) => {
+		Number.isFinite(e) && l(e);
+	}, [l]);
+	return /* @__PURE__ */ n(r, {
+		className: "shrink-0 border-l border-zinc-200 dark:border-zinc-800",
+		resizeHandles: ["w"],
+		axis: "x",
+		autoGrow: !1,
+		width: c,
+		minConstraintsX: i,
+		maxConstraintsX: a,
+		onChange: u,
+		children: /* @__PURE__ */ n("aside", {
+			className: "flex h-full w-full flex-col gap-1.5 overflow-auto bg-zinc-50 px-3 py-2 text-[10px] dark:bg-zinc-900/50",
+			children: s
+		})
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DetailShell } from './DetailShell';
+export type { DetailShellProps } from './DetailShell';
+export default DetailShell;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/index.mjs

@@ -0,0 +1,5 @@
+import e from "./DetailShell.mjs";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/DetailShell/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/FlowTimeline.d.ts

@@ -0,0 +1,15 @@
+import { ActionRunStep } from '@plitzi/sdk-shared';
+export type FlowTimelineProps = {
+    steps: ActionRunStep[];
+    selectedStepId?: string;
+    onSelectStep: (stepId: string) => void;
+};
+/**
+ * The flow as it actually ran, in order, with the compensation kept apart from it.
+ *
+ * The `undo` steps are not more of the flow: they ran BECAUSE it failed, giving back what the steps above them
+ * already did. Drawn in the same list they read as a flow that carried on after the failure, which is the opposite
+ * of what happened.
+ */
+declare const FlowTimeline: ({ steps, selectedStepId, onSelectStep }: FlowTimelineProps) => import("react").JSX.Element;
+export default FlowTimeline;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/FlowTimeline.mjs

@@ -0,0 +1,29 @@
+import { stepBars as e } from "../../helpers.mjs";
+import t from "../StepRow/index.mjs";
+import { useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/FlowTimeline.tsx
+var a = ({ steps: a, selectedStepId: o, onSelectStep: s }) => {
+	let c = n(() => e(a), [a]), l = c.filter((e) => e.step.phase === "flow"), u = c.filter((e) => e.step.phase === "undo");
+	return /* @__PURE__ */ i("div", {
+		className: "flex flex-col gap-0.5",
+		children: [
+			l.map((e) => /* @__PURE__ */ r(t, {
+				bar: e,
+				selected: e.step.id === o,
+				onSelect: s
+			}, e.step.id)),
+			u.length > 0 && /* @__PURE__ */ i("div", {
+				className: "mt-2 flex items-center gap-1.5 px-1.5 text-[10px] font-medium tracking-wide text-amber-600 uppercase dark:text-amber-400",
+				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-rotate-left" }), "Compensation"]
+			}),
+			u.map((e) => /* @__PURE__ */ r(t, {
+				bar: e,
+				selected: e.step.id === o,
+				onSelect: s
+			}, e.step.id))
+		]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FlowTimeline } from './FlowTimeline';
+export type { FlowTimelineProps } from './FlowTimeline';
+export default FlowTimeline;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/index.mjs

@@ -0,0 +1,5 @@
+import e from "./FlowTimeline.mjs";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/FlowTimeline/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/PayloadView/PayloadView.d.ts

@@ -0,0 +1,6 @@
+export type PayloadViewProps = {
+    value: unknown;
+};
+/** What a run was given, answered, or streamed — the same reader the Store tab uses, so it reads the same. */
+declare const PayloadView: ({ value }: PayloadViewProps) => import("react").JSX.Element;
+export default PayloadView;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/PayloadView/PayloadView.mjs

@@ -0,0 +1,26 @@
+import e from "@plitzi/sdk-shared/theme/useTheme";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@uiw/react-json-view";
+import * as r from "@uiw/react-json-view/vscode";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/PayloadView/PayloadView.tsx
+var i = {
+	...r.vscodeTheme,
+	width: "100%",
+	overflow: "auto",
+	padding: "6px",
+	fontSize: "11px"
+}, a = ({ value: r }) => {
+	let { resolvedTheme: a } = e();
+	return typeof r != "object" || !r ? /* @__PURE__ */ t("pre", {
+		className: "overflow-auto p-1.5 font-mono text-[11px] break-words whitespace-pre-wrap text-zinc-600 dark:text-zinc-300",
+		children: JSON.stringify(r)
+	}) : /* @__PURE__ */ t(n, {
+		value: r,
+		style: a === "dark" ? i : void 0,
+		enableClipboard: !1,
+		displayDataTypes: !1,
+		collapsed: 2
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/PayloadView/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PayloadView } from './PayloadView';
+export type { PayloadViewProps } from './PayloadView';
+export default PayloadView;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/PayloadView/index.mjs

@@ -0,0 +1,5 @@
+import e from "./PayloadView.mjs";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/PayloadView/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunDetail/RunDetail.d.ts

@@ -0,0 +1,9 @@
+import { ActionRunEntry } from '@plitzi/sdk-shared';
+export type RunDetailProps = {
+    run: ActionRunEntry;
+    selectedStepId?: string;
+    onSelectStep: (stepId: string) => void;
+};
+/** Everything known about one run: how it ended, what it did step by step, and what it carried. */
+declare const RunDetail: ({ run, selectedStepId, onSelectStep }: RunDetailProps) => import("react").JSX.Element;
+export default RunDetail;

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunDetail/RunDetail.mjs

@@ -0,0 +1,140 @@
+import { MODE_LABEL as e, failedStep as t, formatMs as n, formatTime as r, isLive as i, runDuration as a, statusTone as o, traceResultOf as s } from "../../helpers.mjs";
+import c from "../FlowTimeline/index.mjs";
+import l from "../PayloadView/index.mjs";
+import u from "clsx";
+import { useMemo as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/ActionsViewer/components/RunDetail/RunDetail.tsx
+var h = {
+	info: "bg-violet-500/15 text-violet-600 dark:text-violet-400",
+	success: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+	danger: "bg-red-500/15 text-red-600 dark:text-red-400",
+	warning: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+	custom: "bg-zinc-500/15 text-zinc-500 dark:text-zinc-400"
+}, g = "This page was sent what the flow DID, not what each step read or answered. Open the action in the builder, or run the deployment in dev mode, to inspect a step.", _ = "The server did not send the steps for this run: the action is behind a session, or this page is not authorized to debug it.", v = "The flow is still running. Its steps arrive with the answer.", y = ({ run: y, selectedStepId: b, onSelectStep: x }) => {
+	let S = t(y.steps), C = a(y), w = d(() => b === void 0 ? void 0 : s(y.trace, b), [y.trace, b]);
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ m("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ p("span", {
+				className: "truncate text-xs font-medium text-zinc-700 dark:text-zinc-100",
+				children: y.actionId || "(no action named)"
+			}), /* @__PURE__ */ p("span", {
+				className: u("shrink-0 rounded px-1 py-0.5 text-[9px]", h[o(y.status)]),
+				children: y.reason ?? y.status
+			})]
+		}),
+		y.error !== void 0 && /* @__PURE__ */ m("div", {
+			className: "mt-1 flex flex-col gap-1 rounded border border-red-200 bg-red-50 px-2 py-1.5 dark:border-red-500/30 dark:bg-red-500/10",
+			children: [/* @__PURE__ */ m("span", {
+				className: "font-medium text-red-600 dark:text-red-400",
+				children: [/* @__PURE__ */ p("i", { className: "fa-solid fa-circle-exclamation mr-1" }), S === void 0 ? "The run failed" : `Failed at “${S.title}”`]
+			}), /* @__PURE__ */ p("span", {
+				className: "break-words text-red-700 dark:text-red-300",
+				children: y.error
+			})]
+		}),
+		/* @__PURE__ */ p("div", {
+			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+			children: "Flow"
+		}),
+		y.steps === void 0 && /* @__PURE__ */ p("span", {
+			className: "text-zinc-400 italic dark:text-zinc-500",
+			children: i(y) ? v : _
+		}),
+		y.steps !== void 0 && /* @__PURE__ */ p(c, {
+			steps: y.steps,
+			selectedStepId: b,
+			onSelectStep: x
+		}),
+		b !== void 0 && w === void 0 && /* @__PURE__ */ p("span", {
+			className: "text-zinc-400 italic dark:text-zinc-500",
+			children: g
+		}),
+		w !== void 0 && /* @__PURE__ */ p("div", {
+			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
+			children: /* @__PURE__ */ p(l, { value: w })
+		}),
+		/* @__PURE__ */ p("div", {
+			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+			children: "Run"
+		}),
+		/* @__PURE__ */ m("div", {
+			className: "flex justify-between gap-2",
+			children: [/* @__PURE__ */ p("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: "Mode"
+			}), /* @__PURE__ */ p("span", {
+				className: "text-zinc-700 dark:text-zinc-200",
+				children: e[y.mode]
+			})]
+		}),
+		/* @__PURE__ */ m("div", {
+			className: "flex justify-between gap-2",
+			children: [/* @__PURE__ */ p("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: "Started"
+			}), /* @__PURE__ */ p("span", {
+				className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+				children: r(y.startedAt)
+			})]
+		}),
+		/* @__PURE__ */ m("div", {
+			className: "flex justify-between gap-2",
+			children: [/* @__PURE__ */ p("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: "Took"
+			}), /* @__PURE__ */ p("span", {
+				className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+				children: C === void 0 ? "still running" : n(C)
+			})]
+		}),
+		y.elementId !== void 0 && /* @__PURE__ */ m("div", {
+			className: "flex justify-between gap-2",
+			children: [/* @__PURE__ */ p("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: "Element"
+			}), /* @__PURE__ */ p("span", {
+				className: "truncate font-mono text-zinc-600 dark:text-zinc-300",
+				children: y.elementId
+			})]
+		}),
+		y.runId !== void 0 && /* @__PURE__ */ m("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ p("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: "Run id"
+			}), /* @__PURE__ */ p("span", {
+				className: "font-mono break-all text-zinc-600 dark:text-zinc-300",
+				children: y.runId
+			})]
+		}),
+		y.input !== void 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+			children: "Input"
+		}), /* @__PURE__ */ p("div", {
+			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
+			children: /* @__PURE__ */ p(l, { value: y.input })
+		})] }),
+		y.output !== void 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+			children: "Output"
+		}), /* @__PURE__ */ p("div", {
+			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
+			children: /* @__PURE__ */ p(l, { value: y.output })
+		})] }),
+		y.progress.length > 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+			children: [
+				"Progress (",
+				y.progress.length,
+				")"
+			]
+		}), /* @__PURE__ */ p("div", {
+			className: "overflow-auto rounded border border-zinc-200 dark:border-zinc-700",
+			children: /* @__PURE__ */ p(l, { value: y.progress })
+		})] })
+	] });
+};
+//#endregion
+export { y as default };

package/dist/components/DevToolsPanel/tabs/ActionsViewer/components/RunDetail/index.d.ts

@@ -0,0 +1,3 @@
+import { default as RunDetail } from './RunDetail';
+export type { RunDetailProps } from './RunDetail';
+export default RunDetail;