@ucdjs/pipelines-ui 0.0.1-beta.1

package/dist/components/logs/execution-log-table.mjs

@@ -0,0 +1,121 @@
+import { cn } from "../../lib/utils.mjs";
+import { ExecutionLogPayloadPanel } from "./execution-log-payload.mjs";
+import { formatTimestamp } from "../../lib/execution-logs.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@ucdjs-internal/shared-ui/ui/table";
+
+//#region src/components/logs/execution-log-table.tsx
+function getStreamAccent(stream) {
+	return stream === "stderr" ? "bg-red-500" : "bg-sky-500";
+}
+function ExecutionLogTable(t0) {
+	const $ = c(22);
+	const { logs, expandedLogId, onToggle } = t0;
+	const hasLogs = logs.length > 0;
+	const t1 = hasLogs && "hidden";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cn("border border-dashed border-border rounded-lg p-6 text-sm text-muted-foreground", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			children: "No logs captured for this execution."
+		});
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = !hasLogs && "hidden";
+	let t5;
+	if ($[4] !== t4) {
+		t5 = cn("border border-border rounded-lg overflow-hidden", t4);
+		$[4] = t4;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+			/* @__PURE__ */ jsx(TableHead, { className: "w-6" }),
+			/* @__PURE__ */ jsx(TableHead, {
+				className: "w-56",
+				children: "Timestamp"
+			}),
+			/* @__PURE__ */ jsx(TableHead, { children: "Message" })
+		] }) });
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== expandedLogId || $[8] !== logs || $[9] !== onToggle) {
+		let t8;
+		if ($[11] !== expandedLogId || $[12] !== onToggle) {
+			t8 = (log) => {
+				const isExpanded = expandedLogId === log.id;
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(TableRow, {
+					className: cn("cursor-pointer", log.stream === "stderr" && "bg-red-500/5", isExpanded && "bg-muted"),
+					onClick: () => onToggle(log.id),
+					children: [
+						/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: cn("block h-6 w-1 rounded-full", getStreamAccent(log.stream)) }) }),
+						/* @__PURE__ */ jsx(TableCell, {
+							className: "text-xs font-mono text-muted-foreground",
+							children: formatTimestamp(log.timestamp)
+						}),
+						/* @__PURE__ */ jsx(TableCell, {
+							className: "text-sm",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "line-clamp-1",
+								children: log.payload?.message ?? log.message
+							})
+						})
+					]
+				}), isExpanded && /* @__PURE__ */ jsx(TableRow, {
+					className: "bg-muted/30",
+					children: /* @__PURE__ */ jsx(TableCell, {
+						colSpan: 3,
+						className: "p-4",
+						children: /* @__PURE__ */ jsx(ExecutionLogPayloadPanel, { log })
+					})
+				})] }, log.id);
+			};
+			$[11] = expandedLogId;
+			$[12] = onToggle;
+			$[13] = t8;
+		} else t8 = $[13];
+		t7 = logs.map(t8);
+		$[7] = expandedLogId;
+		$[8] = logs;
+		$[9] = onToggle;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Table, { children: [t6, /* @__PURE__ */ jsx(TableBody, { children: t7 })] });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t5 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t5,
+			children: t8
+		});
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t3 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", { children: [t3, t9] });
+		$[19] = t3;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
+}
+
+//#endregion
+export { ExecutionLogTable };

package/dist/components/logs/execution-span-drawer.d.mts

@@ -0,0 +1,16 @@
+import { ExecutionSpan } from "../../lib/execution-logs.mjs";
+import * as react from "react";
+
+//#region src/components/logs/execution-span-drawer.d.ts
+interface ExecutionSpanDrawerProps {
+  span: ExecutionSpan | null;
+  baseTime: number;
+  onClose: () => void;
+}
+declare function ExecutionSpanDrawer({
+  span,
+  baseTime,
+  onClose
+}: ExecutionSpanDrawerProps): react.JSX.Element;
+//#endregion
+export { ExecutionSpanDrawer, ExecutionSpanDrawerProps };

package/dist/components/logs/execution-span-drawer.mjs

@@ -0,0 +1,208 @@
+import { cn } from "../../lib/utils.mjs";
+import { formatDuration } from "../../lib/execution-logs.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@ucdjs-internal/shared-ui/ui/sheet";
+
+//#region src/components/logs/execution-span-drawer.tsx
+function getPhaseColor(phase) {
+	switch (phase) {
+		case "Pipeline": return "bg-sky-400/70";
+		case "Version": return "bg-emerald-400/70";
+		case "Parse": return "bg-amber-400/70";
+		case "Resolve": return "bg-violet-400/70";
+		case "Artifact": return "bg-rose-400/70";
+		case "File": return "bg-cyan-400/70";
+		case "Cache": return "bg-lime-400/70";
+		case "Error": return "bg-red-500/80";
+		default: return "bg-slate-400/70";
+	}
+}
+function ExecutionSpanDrawer(t0) {
+	const $ = c(44);
+	const { span, baseTime, onClose } = t0;
+	const open = Boolean(span);
+	const offsetStart = span ? Math.max(0, span.start - baseTime) : 0;
+	const offsetEnd = span ? Math.max(0, span.end - baseTime) : 0;
+	let t1;
+	if ($[0] !== onClose) {
+		t1 = (nextOpen) => {
+			if (!nextOpen) onClose();
+		};
+		$[0] = onClose;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Span Details" }) });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== span) {
+		t3 = cn("h-2 w-2 rounded-full", span ? getPhaseColor(span.phase) : "bg-muted");
+		$[3] = span;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", { className: t3 });
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = span?.label ?? "No span selected";
+	let t6;
+	if ($[7] !== t5) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			className: "text-sm font-medium truncate",
+			children: t5
+		});
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== t4 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t4, t6]
+		});
+		$[9] = t4;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx("span", { children: "Phase" });
+		$[12] = t8;
+	} else t8 = $[12];
+	const t9 = span?.phase ?? "-";
+	let t10;
+	if ($[13] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [t8, /* @__PURE__ */ jsx("span", {
+				className: "text-foreground",
+				children: t9
+			})]
+		});
+		$[13] = t9;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx("span", { children: "Duration" });
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== span) {
+		t12 = span ? formatDuration(span.durationMs) : "-";
+		$[16] = span;
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== t12) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [t11, /* @__PURE__ */ jsx("span", {
+				className: "text-foreground",
+				children: t12
+			})]
+		});
+		$[18] = t12;
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx("span", { children: "Start offset" });
+		$[20] = t14;
+	} else t14 = $[20];
+	let t15;
+	if ($[21] !== offsetStart || $[22] !== span) {
+		t15 = span ? formatDuration(offsetStart) : "-";
+		$[21] = offsetStart;
+		$[22] = span;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
+	if ($[24] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [t14, /* @__PURE__ */ jsx("span", {
+				className: "text-foreground",
+				children: t15
+			})]
+		});
+		$[24] = t15;
+		$[25] = t16;
+	} else t16 = $[25];
+	let t17;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx("span", { children: "End offset" });
+		$[26] = t17;
+	} else t17 = $[26];
+	let t18;
+	if ($[27] !== offsetEnd || $[28] !== span) {
+		t18 = span ? formatDuration(offsetEnd) : "-";
+		$[27] = offsetEnd;
+		$[28] = span;
+		$[29] = t18;
+	} else t18 = $[29];
+	let t19;
+	if ($[30] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [t17, /* @__PURE__ */ jsx("span", {
+				className: "text-foreground",
+				children: t18
+			})]
+		});
+		$[30] = t18;
+		$[31] = t19;
+	} else t19 = $[31];
+	let t20;
+	if ($[32] !== t10 || $[33] !== t13 || $[34] !== t16 || $[35] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-3 text-xs text-muted-foreground",
+			children: [
+				t10,
+				t13,
+				t16,
+				t19
+			]
+		});
+		$[32] = t10;
+		$[33] = t13;
+		$[34] = t16;
+		$[35] = t19;
+		$[36] = t20;
+	} else t20 = $[36];
+	let t21;
+	if ($[37] !== t20 || $[38] !== t7) {
+		t21 = /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "w-[380px]",
+			children: [t2, /* @__PURE__ */ jsxs("div", {
+				className: "px-4 pb-4 space-y-4",
+				children: [t7, t20]
+			})]
+		});
+		$[37] = t20;
+		$[38] = t7;
+		$[39] = t21;
+	} else t21 = $[39];
+	let t22;
+	if ($[40] !== open || $[41] !== t1 || $[42] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange: t1,
+			children: t21
+		});
+		$[40] = open;
+		$[41] = t1;
+		$[42] = t21;
+		$[43] = t22;
+	} else t22 = $[43];
+	return t22;
+}
+
+//#endregion
+export { ExecutionSpanDrawer };

package/dist/components/logs/execution-waterfall.d.mts

@@ -0,0 +1,18 @@
+import { ExecutionSpan } from "../../lib/execution-logs.mjs";
+import * as react from "react";
+
+//#region src/components/logs/execution-waterfall.d.ts
+interface ExecutionWaterfallProps {
+  spans: ExecutionSpan[];
+  selectedSpanId: string | null;
+  onSelect: (spanId: string | null) => void;
+  onSpanClick?: (span: ExecutionSpan) => void;
+}
+declare function ExecutionWaterfall({
+  spans,
+  selectedSpanId,
+  onSelect,
+  onSpanClick
+}: ExecutionWaterfallProps): react.JSX.Element;
+//#endregion
+export { ExecutionWaterfall, ExecutionWaterfallProps };