@motiadev/plugin-logs 0.15.5-beta.174-069425 → 0.15.5-beta.174-612616

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/logs-page.tsx","../src/types/log.ts"],"sourcesContent":[],"mappings":";;;cAOa,gBAAQ,kBAAA,CAAA,GAAA,CAAA;;;KCPT,GAAA;;;EDOC,IAAA,EAAA,MA6FZ;;;;ECpGW,KAAA,EAAG,MAAA,EAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/logs-page.tsx","../src/types/log.ts"],"sourcesContent":[],"mappings":";;;cAWa,gBAAQ,kBAAA,CAAA,GAAA,CAAA;;;KCXT,GAAA;;;EDWC,IAAA,EAAA,MA0IZ;;;;ECrJW,KAAA,EAAG,MAAA,EAAA"}

package/dist/index.js

@@ -1,9 +1,10 @@
-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 { Button, Input, LevelDot, Sidebar, cn } from "@motiadev/ui";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { Search, Trash, X } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { useStreamGroup } from "@motiadev/stream-client-react";
+import { create } from "zustand";
 import ReactJson from "react18-json-view";
 import "react18-json-view/src/dark.css";
 import "react18-json-view/src/style.css";
@@ -13,11 +14,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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(() => {
+		return { logs: [...Array.isArray(logs) ? logs : []].reverse() };
 	}),
-	setLogs: (logs) => set({ logs: [...logs].reverse() }),
 	resetLogs: () => {
 		set({ logs: [] });
 	},
@@ -25,18 +24,31 @@ const useLogsStore = create()((set) => ({
 }));
 
 //#endregion
-//#region src/utils/init-log-listener.ts
+//#region src/hooks/use-logs-stream.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);
+const useLogsStream = () => {
+	const $ = c(3);
+	if ($[0] !== "07a885904ac486305cf3393f9436986fc94bf9cf48b0fc1eba70eadcdf49ee10") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "07a885904ac486305cf3393f9436986fc94bf9cf48b0fc1eba70eadcdf49ee10";
+	}
+	const setData = useLogsStore(_temp);
+	let t0;
+	if ($[1] !== setData) {
+		t0 = {
+			streamName,
+			groupId,
+			setData
+		};
+		$[1] = setData;
+		$[2] = t0;
+	} else t0 = $[2];
+	useStreamGroup(t0);
 };
+function _temp(state) {
+	return state.setLogs;
+}
 
 //#endregion
 //#region src/utils/format-timestamp.ts
@@ -124,217 +136,125 @@ const LogDetail = ({ log, onClose }) => {
 
 //#endregion
 //#region src/components/logs-page.tsx
+const ROW_HEIGHT = 40;
 const LogsPage = () => {
-	const $ = c(42);
-	if ($[0] !== "600f8e0c583358e32584786b1654032f3bbb95a52b3fd260dec41b34a3fad7d7") {
-		for (let $i = 0; $i < 42; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "600f8e0c583358e32584786b1654032f3bbb95a52b3fd260dec41b34a3fad7d7";
-	}
-	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;
+	useLogsStream();
+	const logs = useLogsStore((state) => state.logs);
+	const resetLogs = useLogsStore((state_0) => state_0.resetLogs);
+	const selectedLogId = useLogsStore((state_1) => state_1.selectedLogId);
+	const selectLogId = useLogsStore((state_2) => state_2.selectLogId);
+	const selectedLog = useMemo(() => selectedLogId ? logs.find((log) => log.id === selectedLogId) : void 0, [logs, selectedLogId]);
 	const [search, setSearch] = useState("");
-	let t1;
-	if ($[4] !== logs || $[5] !== search) {
-		let t2$1;
-		if ($[7] !== search) {
-			t2$1 = (log_0) => String(log_0.msg || "").toLowerCase().includes(search.toLowerCase()) || String(log_0.traceId || "").toLowerCase().includes(search.toLowerCase()) || String(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"]
+	const filteredLogs = useMemo(() => {
+		return logs.filter((log_0) => {
+			return String(log_0.msg || "").toLowerCase().includes(search.toLowerCase()) || String(log_0.traceId || "").toLowerCase().includes(search.toLowerCase()) || String(log_0.step || "").toLowerCase().includes(search.toLowerCase());
 		});
-		$[17] = resetLogs;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== t6 || $[20] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
+	}, [logs, search]);
+	const scrollContainerRef = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: filteredLogs.length,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: 5
+	});
+	const virtualItems = virtualizer.getVirtualItems();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "grid grid-rows-[auto_1fr] h-full",
+		"data-testid": "logs-container",
+		children: [/* @__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("div", {
+				className: "flex-1 relative",
 				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(Input, {
+						variant: "shade",
+						value: search,
+						onChange: (e) => setSearch(e.target.value),
+						className: "px-9! font-medium",
+						placeholder: "Search by Trace ID or Message"
 					}),
-					/* @__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
+					/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }),
+					/* @__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("")
 					})
 				]
-			}, 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;
+			}), /* @__PURE__ */ jsxs(Button, {
+				variant: "default",
+				onClick: resetLogs,
+				className: "h-[34px]",
+				children: [/* @__PURE__ */ jsx(Trash, {}), " Clear"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scrollContainerRef,
+			className: "overflow-auto h-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "relative w-full",
+				style: { height: virtualizer.getTotalSize() },
+				children: virtualItems.map((virtualRow) => {
+					const log_1 = filteredLogs[virtualRow.index];
+					if (!log_1) return null;
+					const index = virtualRow.index;
+					return /* @__PURE__ */ jsxs("div", {
+						"data-testid": "log-row",
+						"data-index": virtualRow.index,
+						ref: virtualizer.measureElement,
+						role: "row",
+						tabIndex: 0,
+						className: cn("absolute left-0 w-full flex items-center font-mono font-semibold cursor-pointer text-sm", {
+							"bg-muted-foreground/10 hover:bg-muted-foreground/20": selectedLogId === log_1.id,
+							"hover:bg-muted-foreground/10": selectedLogId !== log_1.id
+						}),
+						style: {
+							height: ROW_HEIGHT,
+							transform: `translateY(${virtualRow.start}px)`
+						},
+						onClick: () => selectLogId(log_1.id),
+						onKeyDown: (e_0) => {
+							if (e_0.key === "Enter" || e_0.key === " ") selectLogId(log_1.id);
+						},
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								"data-testid": `time-${index}`,
+								role: "cell",
+								className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground p-2 shrink-0",
+								children: [/* @__PURE__ */ jsx(LevelDot, { level: log_1.level }), formatTimestamp(log_1.time)]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"data-testid": `trace-${log_1.traceId}`,
+								className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground p-2 shrink-0 bg-transparent border-0 text-left font-mono font-semibold text-sm",
+								onClick: (e_1) => {
+									e_1.stopPropagation();
+									setSearch(log_1.traceId);
+								},
+								children: log_1.traceId
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-testid": `step-${index}`,
+								role: "cell",
+								title: log_1.step,
+								className: "whitespace-nowrap p-2 shrink-0",
+								children: log_1.step
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-testid": `msg-${index}`,
+								role: "cell",
+								title: log_1.msg,
+								className: "whitespace-nowrap max-w-[500px] truncate p-2 flex-1",
+								children: log_1.msg
+							})
+						]
+					}, log_1.id);
+				})
+			})
+		})]
+	}), /* @__PURE__ */ jsx(LogDetail, {
+		log: selectedLog,
+		onClose: () => selectLogId(void 0)
+	})] });
 };
-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 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["create","Log","LogsState","logs","selectedLogId","addLog","log","setLogs","resetLogs","selectLogId","logId","useLogsStore","set","undefined","state","find","l","id","reverse","Stream","useLogsStore","Log","streamName","groupId","type","initLogListener","stream","window","location","origin","replace","subscription","subscribeGroup","store","getState","addChangeListener","logs","setLogs","onEvent","addLog","formatTimestamp","time","date","Date","Number","toLocaleDateString","year","undefined","month","day","toLocaleTimeString","hour","minute","second","hourCycle","getMilliseconds","toString","padStart","LevelDot","Sidebar","X","React","useMemo","useState","ReactJson","Log","formatTimestamp","Props","log","onClose","defaultProps","LogDetail","FC","hasOtherProps","setHasOtherProps","otherPropsObject","otherProps","Object","keys","filter","key","includes","length","reduce","acc","Record","icon","onClick","label","value","level","time","step","flows","join","traceId","Button","cn","Input","LevelDot","Table","TableBody","TableCell","TableRow","Search","Trash","X","useMemo","useState","useLogsStore","formatTimestamp","LogDetail","LogsPage","$","_c","$i","Symbol","for","logs","_temp","resetLogs","_temp2","selectedLogId","_temp3","selectLogId","_temp4","t0","find","log","id","undefined","selectedLog","search","setSearch","t1","t2","log_0","String","msg","toLowerCase","includes","traceId","step","filter","filteredLogs","e","target","value","t3","t4","t5","t6","t7","t8","t9","t10","t11","log_1","index","level","time","map","t12","t13","t14","t15","state","state_0","state_1","state_2","initLogListener","LogsPage","Log"],"sources":["../src/stores/use-logs-store.ts","../src/utils/init-log-listener.ts","../src/utils/format-timestamp.ts","../src/components/log-detail.tsx","../src/components/logs-page.tsx","../src/index.ts"],"sourcesContent":["import { create } from 'zustand'\nimport type { Log } from '../types/log'\n\nexport type LogsState = {\n  logs: Log[]\n  selectedLogId?: string\n  addLog: (log: Log) => void\n  setLogs: (logs: Log[]) => void\n  resetLogs: () => void\n  selectLogId: (logId?: string) => void\n}\n\nexport const useLogsStore = create<LogsState>()((set) => ({\n  logs: [],\n  selectedLogId: undefined,\n  addLog: (log) =>\n    set((state) => {\n      if (state.logs.find((l) => l.id === log.id)) {\n        return state\n      }\n      return {\n        logs: [log, ...state.logs],\n      }\n    }),\n  setLogs: (logs) =>\n    set({\n      logs: [...logs].reverse(),\n    }),\n  resetLogs: () => {\n    set({ logs: [] })\n  },\n  selectLogId: (logId) => set({ selectedLogId: logId }),\n}))\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport type { Log } from '../types/log'\n\nconst streamName = '__motia.logs'\nconst groupId = 'default'\nconst type = 'log'\n\nexport const initLogListener = () => {\n  const stream = new Stream(window.location.origin.replace('http', 'ws'))\n  const subscription = stream.subscribeGroup<Log>(streamName, groupId)\n  const store = useLogsStore.getState()\n\n  subscription.addChangeListener((logs) => {\n    if (logs) {\n      store.setLogs(logs)\n    }\n  })\n\n  subscription.onEvent(type, store.addLog)\n}\n","export const formatTimestamp = (time: number) => {\n  const date = new Date(Number(time))\n  return `${date.toLocaleDateString('en-US', { year: undefined, 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')}`\n}\n","import { LevelDot, Sidebar } from '@motiadev/ui'\nimport { X } from 'lucide-react'\nimport type React from 'react'\nimport { useMemo, useState } from 'react'\nimport ReactJson from 'react18-json-view'\nimport 'react18-json-view/src/dark.css'\nimport 'react18-json-view/src/style.css'\nimport type { Log } from '../types/log'\nimport { formatTimestamp } from '../utils/format-timestamp'\n\ntype Props = {\n  log?: Log\n  onClose: () => void\n}\n\nconst defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId']\n\nexport const LogDetail: React.FC<Props> = ({ log, onClose }) => {\n  const [hasOtherProps, setHasOtherProps] = useState(false)\n\n  const otherPropsObject = useMemo(() => {\n    if (!log) {\n      return null\n    }\n\n    const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key))\n    setHasOtherProps(otherProps.length > 0)\n\n    return otherProps.reduce(\n      (acc, key) => {\n        acc[key] = log[key]\n        return acc\n      },\n      {} as Record<string, unknown>,\n    )\n  }, [log])\n\n  if (!log) {\n    return null\n  }\n\n  return (\n    <Sidebar\n      onClose={onClose}\n      title=\"Logs Details\"\n      subtitle=\"Details including custom properties\"\n      actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}\n      details={[\n        {\n          label: 'Level',\n          value: (\n            <div className=\"flex items-center gap-2\">\n              <LevelDot level={log.level} />\n              <div className=\"capitalize\">{log.level}</div>\n            </div>\n          ),\n        },\n        { label: 'Time', value: formatTimestamp(log.time) },\n        { label: 'Step', value: log.step },\n        { label: 'Flows', value: log.flows.join(', ') },\n        { label: 'Trace ID', value: log.traceId },\n      ]}\n    >\n      {hasOtherProps && <ReactJson src={otherPropsObject} theme=\"default\" enableClipboard />}\n    </Sidebar>\n  )\n}\n","import { Button, cn, Input, LevelDot, Table, TableBody, TableCell, TableRow } from '@motiadev/ui'\nimport { Search, Trash, X } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport { formatTimestamp } from '../utils/format-timestamp'\nimport { LogDetail } from './log-detail'\n\nexport const LogsPage = () => {\n  const logs = useLogsStore((state) => state.logs)\n  const resetLogs = useLogsStore((state) => state.resetLogs)\n  const selectedLogId = useLogsStore((state) => state.selectedLogId)\n  const selectLogId = useLogsStore((state) => state.selectLogId)\n  const selectedLog = useMemo(\n    () => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined),\n    [logs, selectedLogId],\n  )\n\n  const [search, setSearch] = useState('')\n  const filteredLogs = useMemo(() => {\n    return logs.filter((log) => {\n      return (\n        String(log.msg || '')\n          .toLowerCase()\n          .includes(search.toLowerCase()) ||\n        String(log.traceId || '')\n          .toLowerCase()\n          .includes(search.toLowerCase()) ||\n        String(log.step || '')\n          .toLowerCase()\n          .includes(search.toLowerCase())\n      )\n    })\n  }, [logs, search])\n\n  return (\n    <>\n      <div className=\"grid grid-rows-[auto_1fr] h-full\" data-testid=\"logs-container\">\n        <div className=\"flex p-2 border-b gap-2\" data-testid=\"logs-search-container\">\n          <div className=\"flex-1 relative\">\n            <Input\n              variant=\"shade\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"px-9! font-medium\"\n              placeholder=\"Search by Trace ID or Message\"\n            />\n            <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50\" />\n            <X\n              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\"\n              onClick={() => setSearch('')}\n            />\n          </div>\n          <Button variant=\"default\" onClick={resetLogs} className=\"h-[34px]\">\n            <Trash /> Clear\n          </Button>\n        </div>\n        <Table>\n          <TableBody className=\"font-mono font-medium\">\n            {filteredLogs.map((log, index) => (\n              <TableRow\n                data-testid=\"log-row\"\n                className={cn('font-mono font-semibold cursor-pointer border-0', {\n                  'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,\n                  'hover:bg-muted-foreground/10': selectedLogId !== log.id,\n                })}\n                key={index}\n                onClick={() => selectLogId(log.id)}\n              >\n                <TableCell\n                  data-testid={`time-${index}`}\n                  className=\"whitespace-nowrap flex items-center gap-2 text-muted-foreground\"\n                >\n                  <LevelDot level={log.level} />\n                  {formatTimestamp(log.time)}\n                </TableCell>\n                <TableCell\n                  data-testid={`trace-${log.traceId}`}\n                  className=\"whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground\"\n                  onClick={() => setSearch(log.traceId)}\n                >\n                  {log.traceId}\n                </TableCell>\n                <TableCell data-testid={`step-${index}`} aria-label={log.step} className=\"whitespace-nowrap\">\n                  {log.step}\n                </TableCell>\n                <TableCell\n                  data-testid={`msg-${index}`}\n                  aria-label={log.msg}\n                  className=\"whitespace-nowrap max-w-[500px] truncate w-full\"\n                >\n                  {log.msg}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <LogDetail log={selectedLog} onClose={() => selectLogId(undefined)} />\n    </>\n  )\n}\n","import { initLogListener } from './utils/init-log-listener'\n\nexport { LogsPage } from './components/logs-page'\nexport type { Log } from './types/log'\n\ninitLogListener()\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["create","Log","LogsState","logs","selectedLogId","setLogs","resetLogs","selectLogId","logId","useLogsStore","set","undefined","safeLogs","Array","isArray","reverse","useStreamGroup","useLogsStore","Log","streamName","groupId","useLogsStream","$","_c","$i","Symbol","for","setData","_temp","t0","state","setLogs","formatTimestamp","time","date","Date","Number","toLocaleDateString","year","undefined","month","day","toLocaleTimeString","hour","minute","second","hourCycle","getMilliseconds","toString","padStart","LevelDot","Sidebar","X","React","useMemo","useState","ReactJson","Log","formatTimestamp","Props","log","onClose","defaultProps","LogDetail","FC","hasOtherProps","setHasOtherProps","otherPropsObject","otherProps","Object","keys","filter","key","includes","length","reduce","acc","Record","icon","onClick","label","value","level","time","step","flows","join","traceId","Button","cn","Input","LevelDot","useVirtualizer","Search","Trash","X","useMemo","useRef","useState","useLogsStream","useLogsStore","formatTimestamp","LogDetail","ROW_HEIGHT","LogsPage","logs","state","resetLogs","selectedLogId","selectLogId","selectedLog","find","log","id","undefined","search","setSearch","filteredLogs","filter","String","msg","toLowerCase","includes","traceId","step","scrollContainerRef","HTMLDivElement","virtualizer","count","length","getScrollElement","current","estimateSize","overscan","virtualItems","getVirtualItems","e","target","value","height","getTotalSize","map","virtualRow","index","measureElement","transform","start","key","level","time","stopPropagation"],"sources":["../src/stores/use-logs-store.ts","../src/hooks/use-logs-stream.ts","../src/utils/format-timestamp.ts","../src/components/log-detail.tsx","../src/components/logs-page.tsx"],"sourcesContent":["import { create } from 'zustand'\nimport type { Log } from '../types/log'\n\nexport type LogsState = {\n  logs: Log[]\n  selectedLogId?: string\n  setLogs: (logs: Log[]) => void\n  resetLogs: () => void\n  selectLogId: (logId?: string) => void\n}\n\nexport const useLogsStore = create<LogsState>()((set) => ({\n  logs: [],\n  selectedLogId: undefined,\n  setLogs: (logs: Log[]) =>\n    set(() => {\n      const safeLogs = Array.isArray(logs) ? logs : []\n      return {\n        logs: [...safeLogs].reverse(),\n      }\n    }),\n  resetLogs: () => {\n    set({ logs: [] })\n  },\n  selectLogId: (logId) => set({ selectedLogId: logId }),\n}))\n","import { useStreamGroup } from '@motiadev/stream-client-react'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport type { Log } from '../types/log'\n\nconst streamName = '__motia.logs'\nconst groupId = 'default'\n\nexport const useLogsStream = () => {\n  const setData = useLogsStore((state) => state.setLogs)\n\n  useStreamGroup<Log>({\n    streamName,\n    groupId,\n    setData,\n  })\n}\n","export const formatTimestamp = (time: number) => {\n  const date = new Date(Number(time))\n  return `${date.toLocaleDateString('en-US', { year: undefined, 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')}`\n}\n","import { LevelDot, Sidebar } from '@motiadev/ui'\nimport { X } from 'lucide-react'\nimport type React from 'react'\nimport { useMemo, useState } from 'react'\nimport ReactJson from 'react18-json-view'\nimport 'react18-json-view/src/dark.css'\nimport 'react18-json-view/src/style.css'\nimport type { Log } from '../types/log'\nimport { formatTimestamp } from '../utils/format-timestamp'\n\ntype Props = {\n  log?: Log\n  onClose: () => void\n}\n\nconst defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId']\n\nexport const LogDetail: React.FC<Props> = ({ log, onClose }) => {\n  const [hasOtherProps, setHasOtherProps] = useState(false)\n\n  const otherPropsObject = useMemo(() => {\n    if (!log) {\n      return null\n    }\n\n    const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key))\n    setHasOtherProps(otherProps.length > 0)\n\n    return otherProps.reduce(\n      (acc, key) => {\n        acc[key] = log[key]\n        return acc\n      },\n      {} as Record<string, unknown>,\n    )\n  }, [log])\n\n  if (!log) {\n    return null\n  }\n\n  return (\n    <Sidebar\n      onClose={onClose}\n      title=\"Logs Details\"\n      subtitle=\"Details including custom properties\"\n      actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}\n      details={[\n        {\n          label: 'Level',\n          value: (\n            <div className=\"flex items-center gap-2\">\n              <LevelDot level={log.level} />\n              <div className=\"capitalize\">{log.level}</div>\n            </div>\n          ),\n        },\n        { label: 'Time', value: formatTimestamp(log.time) },\n        { label: 'Step', value: log.step },\n        { label: 'Flows', value: log.flows.join(', ') },\n        { label: 'Trace ID', value: log.traceId },\n      ]}\n    >\n      {hasOtherProps && <ReactJson src={otherPropsObject} theme=\"default\" enableClipboard />}\n    </Sidebar>\n  )\n}\n","import { Button, cn, Input, LevelDot } from '@motiadev/ui'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { Search, Trash, X } from 'lucide-react'\nimport { useMemo, useRef, useState } from 'react'\nimport { useLogsStream } from '../hooks/use-logs-stream'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport { formatTimestamp } from '../utils/format-timestamp'\nimport { LogDetail } from './log-detail'\n\nconst ROW_HEIGHT = 40\n\nexport const LogsPage = () => {\n  useLogsStream()\n\n  const logs = useLogsStore((state) => state.logs)\n  const resetLogs = useLogsStore((state) => state.resetLogs)\n  const selectedLogId = useLogsStore((state) => state.selectedLogId)\n  const selectLogId = useLogsStore((state) => state.selectLogId)\n  const selectedLog = useMemo(\n    () => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined),\n    [logs, selectedLogId],\n  )\n\n  const [search, setSearch] = useState('')\n  const filteredLogs = useMemo(() => {\n    return logs.filter((log) => {\n      return (\n        String(log.msg || '')\n          .toLowerCase()\n          .includes(search.toLowerCase()) ||\n        String(log.traceId || '')\n          .toLowerCase()\n          .includes(search.toLowerCase()) ||\n        String(log.step || '')\n          .toLowerCase()\n          .includes(search.toLowerCase())\n      )\n    })\n  }, [logs, search])\n\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const virtualizer = useVirtualizer({\n    count: filteredLogs.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => ROW_HEIGHT,\n    overscan: 5,\n  })\n\n  const virtualItems = virtualizer.getVirtualItems()\n\n  return (\n    <>\n      <div className=\"grid grid-rows-[auto_1fr] h-full\" data-testid=\"logs-container\">\n        <div className=\"flex p-2 border-b gap-2\" data-testid=\"logs-search-container\">\n          <div className=\"flex-1 relative\">\n            <Input\n              variant=\"shade\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"px-9! font-medium\"\n              placeholder=\"Search by Trace ID or Message\"\n            />\n            <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50\" />\n            <X\n              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\"\n              onClick={() => setSearch('')}\n            />\n          </div>\n          <Button variant=\"default\" onClick={resetLogs} className=\"h-[34px]\">\n            <Trash /> Clear\n          </Button>\n        </div>\n        <div ref={scrollContainerRef} className=\"overflow-auto h-full\">\n          <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n            {virtualItems.map((virtualRow) => {\n              const log = filteredLogs[virtualRow.index]\n              if (!log) return null\n              const index = virtualRow.index\n              return (\n                <div\n                  data-testid=\"log-row\"\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  key={log.id}\n                  role=\"row\"\n                  tabIndex={0}\n                  className={cn(\n                    'absolute left-0 w-full flex items-center font-mono font-semibold cursor-pointer text-sm',\n                    {\n                      'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,\n                      'hover:bg-muted-foreground/10': selectedLogId !== log.id,\n                    },\n                  )}\n                  style={{\n                    height: ROW_HEIGHT,\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  onClick={() => selectLogId(log.id)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      selectLogId(log.id)\n                    }\n                  }}\n                >\n                  <div\n                    data-testid={`time-${index}`}\n                    role=\"cell\"\n                    className=\"whitespace-nowrap flex items-center gap-2 text-muted-foreground p-2 shrink-0\"\n                  >\n                    <LevelDot level={log.level} />\n                    {formatTimestamp(log.time)}\n                  </div>\n                  <button\n                    type=\"button\"\n                    data-testid={`trace-${log.traceId}`}\n                    className=\"whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground p-2 shrink-0 bg-transparent border-0 text-left font-mono font-semibold text-sm\"\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      setSearch(log.traceId)\n                    }}\n                  >\n                    {log.traceId}\n                  </button>\n                  <div\n                    data-testid={`step-${index}`}\n                    role=\"cell\"\n                    title={log.step}\n                    className=\"whitespace-nowrap p-2 shrink-0\"\n                  >\n                    {log.step}\n                  </div>\n                  <div\n                    data-testid={`msg-${index}`}\n                    role=\"cell\"\n                    title={log.msg}\n                    className=\"whitespace-nowrap max-w-[500px] truncate p-2 flex-1\"\n                  >\n                    {log.msg}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n      <LogDetail log={selectedLog} onClose={() => selectLogId(undefined)} />\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/styles.css

@@ -8,6 +8,8 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --default-font-family: var(--font-sans);
@@ -178,6 +180,9 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -208,10 +213,16 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -229,6 +240,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .border-0 {
     border-style: var(--tw-border-style);
     border-width: 0px;
@@ -243,15 +257,25 @@
       background-color: color-mix(in oklab, var(--muted-foreground) 10%, transparent);
     }
   }
+  .bg-transparent {
+    background-color: transparent;
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
   .px-9\! {
     padding-inline: calc(var(--spacing) * 9) !important;
   }
+  .text-left {
+    text-align: left;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -653,6 +677,26 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -668,6 +712,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-font-weight: initial;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motiadev/plugin-logs",
-  "version": "0.15.5-beta.174-069425",
+  "version": "0.15.5-beta.174-612616",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,15 +13,17 @@
     "dist"
   ],
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.12",
     "lucide-react": "^0.555.0",
     "react": "^19.2.0",
     "react18-json-view": "^0.2.9",
     "zustand": "^5.0.8"
   },
   "peerDependencies": {
-    "@motiadev/stream-client-browser": "0.15.5-beta.174-069425",
-    "@motiadev/ui": "0.15.5-beta.174-069425",
-    "@motiadev/core": "0.15.5-beta.174-069425"
+    "@motiadev/stream-client-browser": "0.15.5-beta.174-612616",
+    "@motiadev/stream-client-react": "0.15.5-beta.174-612616",
+    "@motiadev/ui": "0.15.5-beta.174-612616",
+    "@motiadev/core": "0.15.5-beta.174-612616"
   },
   "devDependencies": {
     "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",