@motiadev/plugin-logs 0.14.0-beta.165-277118 → 0.14.0-beta.165-912190

package/dist/index.js

@@ -0,0 +1,341 @@
+import { Stream } from "@motiadev/stream-client-browser";
+import { create } from "zustand";
+import { c } from "react/compiler-runtime";
+import { Button, Input, LevelDot, Sidebar, Table, TableBody, TableCell, TableRow, cn } from "@motiadev/ui";
+import { Search, Trash, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import ReactJson from "react18-json-view";
+import "react18-json-view/src/dark.css";
+import "react18-json-view/src/style.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/stores/use-logs-store.ts
+const useLogsStore = create()((set) => ({
+	logs: [],
+	selectedLogId: void 0,
+	addLog: (log) => set((state) => {
+		if (state.logs.find((l) => l.id === log.id)) return state;
+		return { logs: [log, ...state.logs] };
+	}),
+	setLogs: (logs) => set({ logs: [...logs].reverse() }),
+	resetLogs: () => {
+		set({ logs: [] });
+	},
+	selectLogId: (logId) => set({ selectedLogId: logId })
+}));
+
+//#endregion
+//#region src/utils/init-log-listener.ts
+const streamName = "__motia.logs";
+const groupId = "default";
+const type = "log";
+const initLogListener = () => {
+	const subscription = new Stream(window.location.origin.replace("http", "ws")).subscribeGroup(streamName, groupId);
+	const store = useLogsStore.getState();
+	subscription.addChangeListener((logs) => {
+		if (logs) store.setLogs(logs);
+	});
+	subscription.onEvent(type, store.addLog);
+};
+
+//#endregion
+//#region src/utils/format-timestamp.ts
+const formatTimestamp = (time) => {
+	const date = new Date(Number(time));
+	return `${date.toLocaleDateString("en-US", {
+		year: void 0,
+		month: "short",
+		day: "2-digit"
+	})}, ${date.toLocaleTimeString("en-US", {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hourCycle: "h24"
+	})}.${date.getMilliseconds().toString().padStart(3, "0")}`;
+};
+
+//#endregion
+//#region src/components/log-detail.tsx
+const defaultProps = [
+	"id",
+	"msg",
+	"time",
+	"level",
+	"step",
+	"flows",
+	"traceId"
+];
+const LogDetail = ({ log, onClose }) => {
+	const [hasOtherProps, setHasOtherProps] = useState(false);
+	const otherPropsObject = useMemo(() => {
+		if (!log) return null;
+		const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
+		setHasOtherProps(otherProps.length > 0);
+		return otherProps.reduce((acc, key_0) => {
+			acc[key_0] = log[key_0];
+			return acc;
+		}, {});
+	}, [log]);
+	if (!log) return null;
+	return /* @__PURE__ */ jsx(Sidebar, {
+		onClose,
+		title: "Logs Details",
+		subtitle: "Details including custom properties",
+		actions: [{
+			icon: /* @__PURE__ */ jsx(X, {}),
+			onClick: onClose,
+			label: "Close"
+		}],
+		details: [
+			{
+				label: "Level",
+				value: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(LevelDot, { level: log.level }), /* @__PURE__ */ jsx("div", {
+						className: "capitalize",
+						children: log.level
+					})]
+				})
+			},
+			{
+				label: "Time",
+				value: formatTimestamp(log.time)
+			},
+			{
+				label: "Step",
+				value: log.step
+			},
+			{
+				label: "Flows",
+				value: log.flows.join(", ")
+			},
+			{
+				label: "Trace ID",
+				value: log.traceId
+			}
+		],
+		children: hasOtherProps && /* @__PURE__ */ jsx(ReactJson, {
+			src: otherPropsObject,
+			theme: "default",
+			enableClipboard: true
+		})
+	});
+};
+
+//#endregion
+//#region src/components/logs-page.tsx
+const LogsPage = () => {
+	const $ = c(42);
+	if ($[0] !== "84ffc385f6f2f10fa27a1ff3e09be855f00c73d8200553182ad70e6cfb527268") {
+		for (let $i = 0; $i < 42; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "84ffc385f6f2f10fa27a1ff3e09be855f00c73d8200553182ad70e6cfb527268";
+	}
+	const logs = useLogsStore(_temp);
+	const resetLogs = useLogsStore(_temp2);
+	const selectedLogId = useLogsStore(_temp3);
+	const selectLogId = useLogsStore(_temp4);
+	let t0;
+	if ($[1] !== logs || $[2] !== selectedLogId) {
+		t0 = selectedLogId ? logs.find((log) => log.id === selectedLogId) : void 0;
+		$[1] = logs;
+		$[2] = selectedLogId;
+		$[3] = t0;
+	} else t0 = $[3];
+	const selectedLog = t0;
+	const [search, setSearch] = useState("");
+	let t1;
+	if ($[4] !== logs || $[5] !== search) {
+		let t2$1;
+		if ($[7] !== search) {
+			t2$1 = (log_0) => log_0.msg.toLowerCase().includes(search.toLowerCase()) || log_0.traceId.toLowerCase().includes(search.toLowerCase()) || log_0.step.toLowerCase().includes(search.toLowerCase());
+			$[7] = search;
+			$[8] = t2$1;
+		} else t2$1 = $[8];
+		t1 = logs.filter(t2$1);
+		$[4] = logs;
+		$[5] = search;
+		$[6] = t1;
+	} else t1 = $[6];
+	const filteredLogs = t1;
+	let t2;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (e) => setSearch(e.target.value);
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== search) {
+		t3 = /* @__PURE__ */ jsx(Input, {
+			variant: "shade",
+			value: search,
+			onChange: t2,
+			className: "px-9! font-medium",
+			placeholder: "Search by Trace ID or Message"
+		});
+		$[10] = search;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" });
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(X, {
+			className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground",
+			onClick: () => setSearch("")
+		});
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t3) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 relative",
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[14] = t3;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Trash, {});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== resetLogs) {
+		t8 = /* @__PURE__ */ jsxs(Button, {
+			variant: "default",
+			onClick: resetLogs,
+			className: "h-[34px]",
+			children: [t7, " Clear"]
+		});
+		$[17] = resetLogs;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t6 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "flex p-2 border-b gap-2",
+			"data-testid": "logs-search-container",
+			children: [t6, t8]
+		});
+		$[19] = t6;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== filteredLogs || $[23] !== selectLogId || $[24] !== selectedLogId) {
+		let t11$1;
+		if ($[26] !== selectLogId || $[27] !== selectedLogId) {
+			t11$1 = (log_1, index) => /* @__PURE__ */ jsxs(TableRow, {
+				"data-testid": "log-row",
+				className: cn("font-mono font-semibold cursor-pointer border-0", {
+					"bg-muted-foreground/10 hover:bg-muted-foreground/20": selectedLogId === log_1.id,
+					"hover:bg-muted-foreground/10": selectedLogId !== log_1.id
+				}),
+				onClick: () => selectLogId(log_1.id),
+				children: [
+					/* @__PURE__ */ jsxs(TableCell, {
+						"data-testid": `time-${index}`,
+						className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground",
+						children: [/* @__PURE__ */ jsx(LevelDot, { level: log_1.level }), formatTimestamp(log_1.time)]
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						"data-testid": `trace-${log_1.traceId}`,
+						className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground",
+						onClick: () => setSearch(log_1.traceId),
+						children: log_1.traceId
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						"data-testid": `step-${index}`,
+						"aria-label": log_1.step,
+						className: "whitespace-nowrap",
+						children: log_1.step
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						"data-testid": `msg-${index}`,
+						"aria-label": log_1.msg,
+						className: "whitespace-nowrap max-w-[500px] truncate w-full",
+						children: log_1.msg
+					})
+				]
+			}, index);
+			$[26] = selectLogId;
+			$[27] = selectedLogId;
+			$[28] = t11$1;
+		} else t11$1 = $[28];
+		t10 = filteredLogs.map(t11$1);
+		$[22] = filteredLogs;
+		$[23] = selectLogId;
+		$[24] = selectedLogId;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[29] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, {
+			className: "font-mono font-medium",
+			children: t10
+		}) });
+		$[29] = t10;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== t11 || $[32] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-rows-[auto_1fr] h-full",
+			"data-testid": "logs-container",
+			children: [t9, t11]
+		});
+		$[31] = t11;
+		$[32] = t9;
+		$[33] = t12;
+	} else t12 = $[33];
+	let t13;
+	if ($[34] !== selectLogId) {
+		t13 = () => selectLogId(void 0);
+		$[34] = selectLogId;
+		$[35] = t13;
+	} else t13 = $[35];
+	let t14;
+	if ($[36] !== selectedLog || $[37] !== t13) {
+		t14 = /* @__PURE__ */ jsx(LogDetail, {
+			log: selectedLog,
+			onClose: t13
+		});
+		$[36] = selectedLog;
+		$[37] = t13;
+		$[38] = t14;
+	} else t14 = $[38];
+	let t15;
+	if ($[39] !== t12 || $[40] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t14] });
+		$[39] = t12;
+		$[40] = t14;
+		$[41] = t15;
+	} else t15 = $[41];
+	return t15;
+};
+function _temp(state) {
+	return state.logs;
+}
+function _temp2(state_0) {
+	return state_0.resetLogs;
+}
+function _temp3(state_1) {
+	return state_1.selectedLogId;
+}
+function _temp4(state_2) {
+	return state_2.selectLogId;
+}
+
+//#endregion
+//#region src/index.ts
+initLogListener();
+
+//#endregion
+export { LogsPage };
+//# sourceMappingURL=index.js.map

package/dist/plugin.d.ts

@@ -1,7 +1,7 @@
 import { MotiaPlugin, MotiaPluginContext } from "@motiadev/core";
 
 //#region src/plugin.d.ts
-declare function plugin(motia: MotiaPluginContext): MotiaPlugin;
+declare function plugin(_motia: MotiaPluginContext): MotiaPlugin;
 //#endregion
 export { plugin as default };
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","names":[],"sources":["../src/plugin.ts"],"sourcesContent":[],"mappings":";;;iBAEwB,MAAA,QAAc,qBAAqB"}
+{"version":3,"file":"plugin.d.ts","names":[],"sources":["../src/plugin.ts"],"sourcesContent":[],"mappings":";;;iBAEwB,MAAA,SAAe,qBAAqB"}

package/dist/plugin.js

@@ -1,5 +1,5 @@
 //#region src/plugin.ts
-function plugin(motia) {
+function plugin(_motia) {
 	return { workbench: [{
 		packageName: "@motiadev/plugin-logs",
 		label: "Logs",

package/dist/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":["MotiaPlugin","MotiaPluginContext","plugin","motia","workbench","packageName","label","position","componentName","labelIcon"],"sources":["../src/plugin.ts"],"sourcesContent":["import type { MotiaPlugin, MotiaPluginContext } from '@motiadev/core'\n\nexport default function plugin(motia: MotiaPluginContext): MotiaPlugin {\n  return {\n    workbench: [\n      {\n        packageName: '@motiadev/plugin-logs',\n        label: 'Logs',\n        position: 'bottom',\n        componentName: 'LogsPage',\n        labelIcon: 'logs',\n      },\n    ],\n  }\n}\n"],"mappings":";AAEA,SAAwBE,OAAOC,OAAwC;AACrE,QAAO,EACLC,WAAW,CACT;EACEC,aAAa;EACbC,OAAO;EACPC,UAAU;EACVC,eAAe;EACfC,WAAW;EACZ,CAAA,EAEJ"}
+{"version":3,"file":"plugin.js","names":["MotiaPlugin","MotiaPluginContext","plugin","_motia","workbench","packageName","label","position","componentName","labelIcon"],"sources":["../src/plugin.ts"],"sourcesContent":["import type { MotiaPlugin, MotiaPluginContext } from '@motiadev/core'\n\nexport default function plugin(_motia: MotiaPluginContext): MotiaPlugin {\n  return {\n    workbench: [\n      {\n        packageName: '@motiadev/plugin-logs',\n        label: 'Logs',\n        position: 'bottom',\n        componentName: 'LogsPage',\n        labelIcon: 'logs',\n      },\n    ],\n  }\n}\n"],"mappings":";AAEA,SAAwBE,OAAOC,QAAyC;AACtE,QAAO,EACLC,WAAW,CACT;EACEC,aAAa;EACbC,OAAO;EACPC,UAAU;EACVC,eAAe;EACfC,WAAW;EACZ,CAAA,EAEJ"}

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css","names":[],"sources":["../src/styles.css"],"sourcesContent":["export default undefined;"],"mappings":"AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motiadev/plugin-logs",
-  "version": "0.14.0-beta.165-277118",
+  "version": "0.14.0-beta.165-912190",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -19,9 +19,9 @@
     "zustand": "^5.0.8"
   },
   "peerDependencies": {
-    "@motiadev/core": "0.14.0-beta.165-277118",
-    "@motiadev/ui": "0.14.0-beta.165-277118",
-    "@motiadev/stream-client-browser": "0.14.0-beta.165-277118"
+    "@motiadev/stream-client-browser": "0.14.0-beta.165-912190",
+    "@motiadev/core": "0.14.0-beta.165-912190",
+    "@motiadev/ui": "0.14.0-beta.165-912190"
   },
   "devDependencies": {
     "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.css","names":[],"sources":["../src/styles.css"],"sourcesContent":["export default undefined;"],"mappings":"AAAA"}