@motiadev/plugin-observability 0.13.0-beta.162-158257 → 0.13.0-beta.162-687645

package/dist/index.js

@@ -11,72 +11,7 @@ import "react18-json-view/src/style.css";
 import { formatDistanceToNow } from "date-fns";
 
 import './index.css';
-//#region rolldown:runtime
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
-});
-
-//#endregion
-//#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.production.js
-/**
-* @license React
-* react-compiler-runtime.production.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var require_react_compiler_runtime_production = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.production.js": ((exports) => {
-	var ReactSharedInternals = __require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-	exports.c = function(size) {
-		return ReactSharedInternals.H.useMemoCache(size);
-	};
-}) });
-
-//#endregion
-//#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.development.js
-/**
-* @license React
-* react-compiler-runtime.development.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var require_react_compiler_runtime_development = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.development.js": ((exports) => {
-	"production" !== process.env.NODE_ENV && function() {
-		var ReactSharedInternals$1 = __require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-		exports.c = function(size) {
-			var dispatcher = ReactSharedInternals$1.H;
-			null === dispatcher && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.");
-			return dispatcher.useMemoCache(size);
-		};
-	}();
-}) });
-
-//#endregion
-//#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/compiler-runtime.js
-/**
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-var require_compiler_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/compiler-runtime.js": ((exports, module) => {
-	if (process.env.NODE_ENV === "production") module.exports = require_react_compiler_runtime_production();
-	else module.exports = require_react_compiler_runtime_development();
-}) });
-
-//#endregion
 //#region src/stores/use-observability-store.ts
-var import_compiler_runtime$24 = require_compiler_runtime();
 const useObservabilityStore = create()((set) => ({
 	selectedTraceGroupId: "",
 	selectedTraceId: void 0,
@@ -92,170 +27,64 @@ const useObservabilityStore = create()((set) => ({
 //#endregion
 //#region src/components/search-bar.tsx
 const SearchBar = memo(() => {
-	const $ = (0, import_compiler_runtime$24.c)(23);
-	const search = useObservabilityStore(_temp$6);
-	const setSearch = useObservabilityStore(_temp2$2);
-	const clearTraces = useObservabilityStore(_temp3);
-	let t0;
-	if ($[0] !== setSearch) {
-		t0 = (e) => setSearch(e.target.value);
-		$[0] = setSearch;
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] !== search || $[3] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Input, {
-			variant: "shade",
-			value: search,
-			onChange: t0,
-			className: "px-9! font-medium",
-			placeholder: "Search by Trace ID or Step Name"
-		});
-		$[2] = search;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" });
-		$[5] = t2;
-	} else t2 = $[5];
-	const t3 = search !== "";
-	const t4 = search === "";
-	let t5;
-	if ($[6] !== t3 || $[7] !== t4) {
-		t5 = cn("cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", {
-			visible: t3,
-			invisible: t4
-		});
-		$[6] = t3;
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== setSearch) {
-		t6 = () => setSearch("");
-		$[9] = setSearch;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== t5 || $[12] !== t6) {
-		t7 = /* @__PURE__ */ jsx(X, {
-			className: t5,
-			onClick: t6
-		});
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== t1 || $[15] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+	const search = useObservabilityStore((state) => state.search);
+	const setSearch = useObservabilityStore((state) => state.setSearch);
+	const clearTraces = useObservabilityStore((state) => state.clearTraces);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex p-2 border-b gap-2",
+		"data-testid": "logs-search-container",
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex-1 relative",
 			children: [
-				t1,
-				t2,
-				t7
+				/* @__PURE__ */ jsx(Input, {
+					variant: "shade",
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					className: "px-9! font-medium",
+					placeholder: "Search by Trace ID or Step Name"
+				}),
+				/* @__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: cn("cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", {
+						visible: search !== "",
+						invisible: search === ""
+					}),
+					onClick: () => setSearch("")
+				})
 			]
-		});
-		$[14] = t1;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(Trash, {});
-		$[17] = t9;
-	} else t9 = $[17];
-	let t10;
-	if ($[18] !== clearTraces) {
-		t10 = /* @__PURE__ */ jsxs(Button, {
+		}), /* @__PURE__ */ jsxs(Button, {
 			variant: "default",
 			onClick: clearTraces,
 			className: "h-[34px]",
-			children: [t9, " Clear"]
-		});
-		$[18] = clearTraces;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== t10 || $[21] !== t8) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			className: "flex p-2 border-b gap-2",
-			"data-testid": "logs-search-container",
-			children: [t8, t10]
-		});
-		$[20] = t10;
-		$[21] = t8;
-		$[22] = t11;
-	} else t11 = $[22];
-	return t11;
+			children: [/* @__PURE__ */ jsx(Trash, {}), " Clear"]
+		})]
+	});
 });
 SearchBar.displayName = "SearchBar";
-function _temp$6(state) {
-	return state.search;
-}
-function _temp2$2(state_0) {
-	return state_0.setSearch;
-}
-function _temp3(state_1) {
-	return state_1.clearTraces;
-}
 
 //#endregion
 //#region src/components/trace-empty-state.tsx
-var import_compiler_runtime$23 = require_compiler_runtime();
 const TraceEmptyState = memo(() => {
-	const $ = (0, import_compiler_runtime$23.c)(1);
-	if (useObservabilityStore(_temp$5)) return null;
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center h-full text-muted-foreground",
-			children: "Select a trace or trace group to view the timeline"
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+	if (useObservabilityStore((state) => state.selectedTraceGroupId)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full text-muted-foreground",
+		children: "Select a trace or trace group to view the timeline"
+	});
 });
 TraceEmptyState.displayName = "TraceEmptyState";
-function _temp$5(state) {
-	return state.selectedTraceGroupId;
-}
 
 //#endregion
 //#region src/hooks/use-get-endtime.ts
-var import_compiler_runtime$22 = require_compiler_runtime();
 const useGetEndTime = (group) => {
-	const $ = (0, import_compiler_runtime$22.c)(6);
 	const groupEndTime = group?.endTime;
-	let t0;
-	if ($[0] !== groupEndTime) {
-		t0 = () => groupEndTime || Date.now();
-		$[0] = groupEndTime;
-		$[1] = t0;
-	} else t0 = $[1];
-	const [endTime, setEndTime] = useState(t0);
-	let t1;
-	let t2;
-	if ($[2] !== endTime || $[3] !== groupEndTime) {
-		t1 = () => {
-			let interval;
-			if (groupEndTime) {
-				if (groupEndTime !== endTime) setEndTime(groupEndTime);
-			} else interval = setInterval(() => setEndTime(Date.now()), 100);
-			return () => clearInterval(interval);
-		};
-		t2 = [groupEndTime, endTime];
-		$[2] = endTime;
-		$[3] = groupEndTime;
-		$[4] = t1;
-		$[5] = t2;
-	} else {
-		t1 = $[4];
-		t2 = $[5];
-	}
-	useEffect(t1, t2);
+	const [endTime, setEndTime] = useState(() => groupEndTime || Date.now());
+	useEffect(() => {
+		let interval;
+		if (groupEndTime) {
+			if (groupEndTime !== endTime) setEndTime(groupEndTime);
+		} else interval = setInterval(() => setEndTime(Date.now()), 100);
+		return () => clearInterval(interval);
+	}, [groupEndTime, endTime]);
 	return endTime;
 };
 
@@ -271,58 +100,33 @@ const formatDuration = (duration) => {
 
 //#endregion
 //#region src/components/trace-item/trace-item.tsx
-var import_compiler_runtime$21 = require_compiler_runtime();
 const GRADIENT_CLASSES = {
 	running: "bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]",
 	completed: "bg-[repeating-linear-gradient(140deg,#2862FE,#2862FE_8px,#2358E5_8px,#2358E5_16px)]",
 	failed: "bg-[repeating-linear-gradient(140deg,#EA2069,#EA2069_8px,#D41E60_8px,#D41E60_16px)]"
 };
-const TraceItem = memo((t0) => {
-	const $ = (0, import_compiler_runtime$21.c)(17);
-	const { traceId, traceName, traceStatus, traceStartTime, traceEndTime, groupStartTime, groupEndTime, onExpand } = t0;
-	let t1;
-	if ($[0] !== onExpand || $[1] !== traceId) {
-		t1 = () => {
-			onExpand(traceId);
-		};
-		$[0] = onExpand;
-		$[1] = traceId;
-		$[2] = t1;
-	} else t1 = $[2];
-	const handleClick = t1;
-	const t2 = GRADIENT_CLASSES[traceStatus];
-	let t3;
-	if ($[3] !== t2) {
-		t3 = cn("h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200", t2);
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	const barClassName = t3;
-	const t4 = `${(traceStartTime - groupStartTime) / (groupEndTime - groupStartTime) * 100}%`;
-	const t5 = traceEndTime ? `${(traceEndTime - traceStartTime) / (groupEndTime - groupStartTime) * 100}%` : `${(Date.now() - traceStartTime) / (groupEndTime - groupStartTime) * 100}%`;
-	let t6;
-	if ($[5] !== t4 || $[6] !== t5) {
-		t6 = {
-			marginLeft: t4,
-			width: t5
-		};
-		$[5] = t4;
-		$[6] = t5;
-		$[7] = t6;
-	} else t6 = $[7];
-	const barStyle = t6;
-	let t7;
-	if ($[8] !== traceName) {
-		t7 = /* @__PURE__ */ jsx("div", {
+const TraceItem = memo(({ traceId, traceName, traceStatus, traceStartTime, traceEndTime, groupStartTime, groupEndTime, onExpand }) => {
+	const handleClick = useCallback(() => {
+		onExpand(traceId);
+	}, [onExpand, traceId]);
+	const barClassName = useMemo(() => cn("h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200", GRADIENT_CLASSES[traceStatus]), [traceStatus]);
+	const barStyle = useMemo(() => ({
+		marginLeft: `${(traceStartTime - groupStartTime) / (groupEndTime - groupStartTime) * 100}%`,
+		width: traceEndTime ? `${(traceEndTime - traceStartTime) / (groupEndTime - groupStartTime) * 100}%` : `${(Date.now() - traceStartTime) / (groupEndTime - groupStartTime) * 100}%`
+	}), [
+		traceStartTime,
+		traceEndTime,
+		groupStartTime,
+		groupEndTime
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex hover:bg-muted-foreground/10 relative cursor-pointer",
+		onClick: handleClick,
+		"data-testid": "trace-timeline-item",
+		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex items-center min-w-[200px] max-w-[200px] h-[32px] max-h-[32px] py-4 px-2 text-sm font-semibold text-foreground truncate sticky left-0 bg-card z-9",
 			children: traceName
-		});
-		$[8] = traceName;
-		$[9] = t7;
-	} else t7 = $[9];
-	let t8;
-	if ($[10] !== barClassName || $[11] !== barStyle) {
-		t8 = /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "relative w-full h-[32px] flex items-center",
@@ -331,204 +135,64 @@ const TraceItem = memo((t0) => {
 					style: barStyle
 				})
 			})
-		});
-		$[10] = barClassName;
-		$[11] = barStyle;
-		$[12] = t8;
-	} else t8 = $[12];
-	let t9;
-	if ($[13] !== handleClick || $[14] !== t7 || $[15] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			className: "flex hover:bg-muted-foreground/10 relative cursor-pointer",
-			onClick: handleClick,
-			"data-testid": "trace-timeline-item",
-			children: [t7, t8]
-		});
-		$[13] = handleClick;
-		$[14] = t7;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
-	return t9;
+		})]
+	});
 });
 TraceItem.displayName = "TraceItem";
 
 //#endregion
 //#region src/components/events/event-icon.tsx
-var import_compiler_runtime$20 = require_compiler_runtime();
-const EventIcon = (t0) => {
-	const $ = (0, import_compiler_runtime$20.c)(4);
-	const { event } = t0;
-	if (event.type === "log") {
-		let t1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(ScrollText, { className: "w-4 h-4 text-muted-foreground" });
-			$[0] = t1;
-		} else t1 = $[0];
-		return t1;
-	} else if (event.type === "emit") {
-		let t1;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(MessageCircle, { className: "w-4 h-4 text-muted-foreground" });
-			$[1] = t1;
-		} else t1 = $[1];
-		return t1;
-	} else if (event.type === "state") {
-		let t1;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(Package, { className: "w-4 h-4 text-muted-foreground" });
-			$[2] = t1;
-		} else t1 = $[2];
-		return t1;
-	} else if (event.type === "stream") {
-		let t1;
-		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(Radio, { className: "w-4 h-4 text-muted-foreground" });
-			$[3] = t1;
-		} else t1 = $[3];
-		return t1;
-	}
+const EventIcon = ({ event }) => {
+	if (event.type === "log") return /* @__PURE__ */ jsx(ScrollText, { className: "w-4 h-4 text-muted-foreground" });
+	else if (event.type === "emit") return /* @__PURE__ */ jsx(MessageCircle, { className: "w-4 h-4 text-muted-foreground" });
+	else if (event.type === "state") return /* @__PURE__ */ jsx(Package, { className: "w-4 h-4 text-muted-foreground" });
+	else if (event.type === "stream") return /* @__PURE__ */ jsx(Radio, { className: "w-4 h-4 text-muted-foreground" });
 };
 
 //#endregion
 //#region src/components/ui/copy-button.tsx
-var import_compiler_runtime$19 = require_compiler_runtime();
-const CopyButton = (t0) => {
-	const $ = (0, import_compiler_runtime$19.c)(11);
-	const { textToCopy, className, title } = t0;
+const CopyButton = ({ textToCopy, className, title }) => {
 	const [copied, setCopied] = useState(false);
-	let t1;
-	if ($[0] !== textToCopy) {
-		t1 = async () => {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "icon",
+		size: "icon",
+		onClick: useCallback(async () => {
 			try {
 				await navigator.clipboard.writeText(textToCopy);
 				setCopied(true);
 				setTimeout(() => setCopied(false), 2e3);
-			} catch (t2$1) {
-				const error = t2$1;
+			} catch (error) {
 				console.error("Failed to copy:", error);
 			}
-		};
-		$[0] = textToCopy;
-		$[1] = t1;
-	} else t1 = $[1];
-	const handleCopy = t1;
-	let t2;
-	if ($[2] !== className) {
-		t2 = cn("cursor-pointer p-3 rounded-full", className);
-		$[2] = className;
-		$[3] = t2;
-	} else t2 = $[3];
-	const t3 = title ?? (copied ? "Copied!" : "Copy");
-	let t4;
-	if ($[4] !== copied) {
-		t4 = copied ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4 text-gray-400" });
-		$[4] = copied;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== handleCopy || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Button, {
-			variant: "icon",
-			size: "icon",
-			onClick: handleCopy,
-			className: t2,
-			title: t3,
-			children: t4
-		});
-		$[6] = handleCopy;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
-	return t5;
+		}, [textToCopy]),
+		className: cn("cursor-pointer p-3 rounded-full", className),
+		title: title ?? (copied ? "Copied!" : "Copy"),
+		children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4 text-gray-400" })
+	});
 };
 
 //#endregion
 //#region src/components/ui/popover.tsx
-var import_compiler_runtime$18 = require_compiler_runtime();
-const Popover = (t0) => {
-	const $ = (0, import_compiler_runtime$18.c)(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else props = $[1];
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
-			"data-slot": "popover",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
+const Popover = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+		"data-slot": "popover",
+		...props
+	});
 };
-const PopoverTrigger = (t0) => {
-	const $ = (0, import_compiler_runtime$18.c)(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else props = $[1];
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-			"data-slot": "popover-trigger",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
+const PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
 };
-const PopoverContent = (t0) => {
-	const $ = (0, import_compiler_runtime$18.c)(12);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-	}
-	const align = t1 === void 0 ? "center" : t1;
-	const sideOffset = t2 === void 0 ? 4 : t2;
-	let t3;
-	if ($[5] !== className) {
-		t3 = cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className);
-		$[5] = className;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t3) {
-		t4 = /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-			"data-slot": "popover-content",
-			align,
-			sideOffset,
-			className: t3,
-			...props
-		}) });
-		$[7] = align;
-		$[8] = props;
-		$[9] = sideOffset;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
-	return t4;
+const PopoverContent = ({ className, align = "center", sideOffset = 4, ...props }) => {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+		...props
+	}) });
 };
 
 //#endregion
@@ -541,762 +205,297 @@ const formatArgumentValue = (arg) => {
 
 //#endregion
 //#region src/components/events/code/argument.tsx
-var import_compiler_runtime$17 = require_compiler_runtime();
-const Argument = memo((t0) => {
-	const $ = (0, import_compiler_runtime$17.c)(18);
-	const { arg, popover: t1 } = t0;
-	const popover = t1 === void 0 ? true : t1;
-	const isObject = typeof arg === "object" && arg !== null;
-	let t2;
-	if ($[0] !== arg) {
-		t2 = formatArgumentValue(arg);
-		$[0] = arg;
-		$[1] = t2;
-	} else t2 = $[1];
-	const value = t2;
-	let t3;
-	if ($[2] !== arg) {
-		t3 = JSON.stringify(arg, null, 2);
-		$[2] = arg;
-		$[3] = t3;
-	} else t3 = $[3];
-	const textToCopy = t3;
-	if (!popover) {
-		let t4$1;
-		if ($[4] !== arg || $[5] !== isObject || $[6] !== value) {
-			t4$1 = /* @__PURE__ */ jsx(Fragment$1, { children: isObject ? /* @__PURE__ */ jsx(ReactJson, {
-				src: arg,
-				theme: "default",
-				enableClipboard: false,
-				style: { padding: 0 }
-			}) : /* @__PURE__ */ jsx("span", {
-				className: "font-mono text-blue-500",
-				children: value
-			}) });
-			$[4] = arg;
-			$[5] = isObject;
-			$[6] = value;
-			$[7] = t4$1;
-		} else t4$1 = $[7];
-		return t4$1;
-	}
-	let t4;
-	if ($[8] !== value) {
-		t4 = /* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx("span", {
-				className: "truncate font-mono text-blue-500 cursor-pointer inline-block",
-				children: value
-			})
-		});
-		$[8] = value;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== arg || $[11] !== isObject || $[12] !== textToCopy || $[13] !== value) {
-		t5 = /* @__PURE__ */ jsx(PopoverContent, {
-			className: "backdrop-blur-md w-auto max-w-2xl relative max-h-[50vh] overflow-y-auto",
-			hideWhenDetached: true,
-			children: isObject ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CopyButton, {
+const Argument = memo(({ arg, popover = true }) => {
+	const isObject = useMemo(() => typeof arg === "object" && arg !== null, [arg]);
+	const value = useMemo(() => formatArgumentValue(arg), [arg]);
+	const textToCopy = useMemo(() => JSON.stringify(arg, null, 2), [arg]);
+	if (!popover) return /* @__PURE__ */ jsx(Fragment$1, { children: isObject ? /* @__PURE__ */ jsx(ReactJson, {
+		src: arg,
+		theme: "default",
+		enableClipboard: false,
+		style: { padding: 0 }
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "font-mono text-blue-500",
+		children: value
+	}) });
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "truncate font-mono text-blue-500 cursor-pointer inline-block",
+			children: value
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		className: "backdrop-blur-md w-auto max-w-2xl relative max-h-[50vh] overflow-y-auto",
+		hideWhenDetached: true,
+		children: isObject ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CopyButton, {
+			textToCopy,
+			className: "absolute top-4 right-4",
+			title: "Copy JSON"
+		}), /* @__PURE__ */ jsx(ReactJson, {
+			src: arg,
+			theme: "default",
+			enableClipboard: false,
+			style: { padding: 0 }
+		})] }) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", { children: value }), /* @__PURE__ */ jsx(CopyButton, {
 				textToCopy,
-				className: "absolute top-4 right-4",
+				className: "ml-2",
 				title: "Copy JSON"
-			}), /* @__PURE__ */ jsx(ReactJson, {
-				src: arg,
-				theme: "default",
-				enableClipboard: false,
-				style: { padding: 0 }
-			})] }) : /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx("span", { children: value }), /* @__PURE__ */ jsx(CopyButton, {
-					textToCopy,
-					className: "ml-2",
-					title: "Copy JSON"
-				})]
-			})
-		});
-		$[10] = arg;
-		$[11] = isObject;
-		$[12] = textToCopy;
-		$[13] = value;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== t4 || $[16] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Popover, { children: [t4, t5] });
-		$[15] = t4;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
-	return t6;
+			})]
+		})
+	})] });
 });
 Argument.displayName = "Argument";
 
 //#endregion
 //#region src/components/events/code/closing-parenthesis.tsx
-var import_compiler_runtime$16 = require_compiler_runtime();
-const ClosingParenthesis = memo((t0) => {
-	const $ = (0, import_compiler_runtime$16.c)(7);
-	const { callsQuantity, noQuantity: t1 } = t0;
-	const noQuantity = t1 === void 0 ? false : t1;
-	const hasCalls = callsQuantity && callsQuantity > 1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("span", {
+const ClosingParenthesis = memo(({ callsQuantity, noQuantity = false }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsx("span", {
 			className: "font-mono text-emerald-500",
 			children: ")"
-		});
-		$[0] = t2;
-	} else t2 = $[0];
-	let t3;
-	if ($[1] !== callsQuantity || $[2] !== hasCalls || $[3] !== noQuantity) {
-		t3 = !noQuantity && hasCalls && /* @__PURE__ */ jsxs("span", {
+		}), !noQuantity && callsQuantity && callsQuantity > 1 && /* @__PURE__ */ jsxs("span", {
 			className: "font-mono text-muted-foreground",
 			children: [" x", callsQuantity]
-		});
-		$[1] = callsQuantity;
-		$[2] = hasCalls;
-		$[3] = noQuantity;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center",
-			children: [t2, t3]
-		});
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
-	return t4;
+		})]
+	});
 });
 ClosingParenthesis.displayName = "ClosingParenthesis";
 
 //#endregion
 //#region src/components/events/code/function-call-content.tsx
-var import_compiler_runtime$15 = require_compiler_runtime();
-const FunctionCallContent = forwardRef((t0, ref) => {
-	const $ = (0, import_compiler_runtime$15.c)(22);
-	let className;
-	let functionName;
-	let objectName;
-	let props;
-	let topLevelClassName;
-	if ($[0] !== t0) {
-		({topLevelClassName, objectName, functionName, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = functionName;
-		$[3] = objectName;
-		$[4] = props;
-		$[5] = topLevelClassName;
-	} else {
-		className = $[1];
-		functionName = $[2];
-		objectName = $[3];
-		props = $[4];
-		topLevelClassName = $[5];
-	}
-	let t1;
-	if ($[6] !== className) {
-		t1 = cn("flex items-center", className);
-		$[6] = className;
-		$[7] = t1;
-	} else t1 = $[7];
-	let t2;
-	if ($[8] !== topLevelClassName) {
-		t2 = topLevelClassName && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "font-mono text-pink-500",
-			children: topLevelClassName
-		}), /* @__PURE__ */ jsx("span", { children: "." })] });
-		$[8] = topLevelClassName;
-		$[9] = t2;
-	} else t2 = $[9];
-	let t3;
-	if ($[10] !== objectName) {
-		t3 = objectName && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "font-mono text-pink-500",
-			children: objectName
-		}), /* @__PURE__ */ jsx("span", { children: "." })] });
-		$[10] = objectName;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== functionName) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: "font-mono text-pink-500",
-			children: functionName
-		});
-		$[12] = functionName;
-		$[13] = t4;
-	} else t4 = $[13];
-	let t5;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx("span", {
-			className: "font-mono text-emerald-500",
-			children: "("
-		});
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== props || $[16] !== ref || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			ref,
-			className: t1,
-			...props,
-			children: [
-				t2,
-				t3,
-				t4,
-				t5
-			]
-		});
-		$[15] = props;
-		$[16] = ref;
-		$[17] = t1;
-		$[18] = t2;
-		$[19] = t3;
-		$[20] = t4;
-		$[21] = t6;
-	} else t6 = $[21];
-	return t6;
+const FunctionCallContent = forwardRef(({ topLevelClassName, objectName, functionName, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex items-center", className),
+		...props,
+		children: [
+			topLevelClassName && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-pink-500",
+				children: topLevelClassName
+			}), /* @__PURE__ */ jsx("span", { children: "." })] }),
+			objectName && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-pink-500",
+				children: objectName
+			}), /* @__PURE__ */ jsx("span", { children: "." })] }),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-pink-500",
+				children: functionName
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-emerald-500",
+				children: "("
+			})
+		]
+	});
 });
 FunctionCallContent.displayName = "FunctionCallContent";
 
 //#endregion
 //#region src/components/events/code/function-call.tsx
-var import_compiler_runtime$14 = require_compiler_runtime();
 const GRID_LAYOUT_STYLE = { gridTemplateColumns: "max-content 1fr max-content" };
-const FunctionCall = memo((t0) => {
-	const $ = (0, import_compiler_runtime$14.c)(48);
-	const { topLevelClassName, objectName, functionName, args, callsQuantity } = t0;
-	let t1;
-	if ($[0] !== args) {
-		t1 = args.filter(_temp$4);
-		$[0] = args;
-		$[1] = t1;
-	} else t1 = $[1];
-	const filteredArgs = t1;
-	const t2 = `repeat(${filteredArgs.length * 2}, minmax(0, auto))`;
-	let t3;
-	if ($[2] !== t2) {
-		t3 = { gridTemplateColumns: t2 };
-		$[2] = t2;
-		$[3] = t3;
-	} else t3 = $[3];
-	const argsGridStyle = t3;
-	let t4;
-	if ($[4] !== objectName || $[5] !== topLevelClassName) {
-		t4 = [topLevelClassName, objectName].filter(Boolean);
-		$[4] = objectName;
-		$[5] = topLevelClassName;
-		$[6] = t4;
-	} else t4 = $[6];
-	const prefix = t4.join(".");
-	const fullPrefix = prefix ? `${prefix}.` : "";
-	let t5;
-	if ($[7] !== filteredArgs) {
-		t5 = filteredArgs.map(_temp2$1).join(", ");
-		$[7] = filteredArgs;
-		$[8] = t5;
-	} else t5 = $[8];
-	const functionCallText = `${fullPrefix}${functionName}(${t5})`;
-	let t6;
-	if ($[9] !== functionName || $[10] !== objectName || $[11] !== topLevelClassName) {
-		t6 = /* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(FunctionCallContent, {
-				className: "cursor-pointer",
-				functionName,
-				topLevelClassName,
-				objectName
-			})
-		});
-		$[9] = functionName;
-		$[10] = objectName;
-		$[11] = topLevelClassName;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== functionName || $[14] !== objectName || $[15] !== topLevelClassName) {
-		t7 = /* @__PURE__ */ jsx(FunctionCallContent, {
-			functionName,
-			topLevelClassName,
-			objectName
-		});
-		$[13] = functionName;
-		$[14] = objectName;
-		$[15] = topLevelClassName;
-		$[16] = t7;
-	} else t7 = $[16];
-	let t8;
-	if ($[17] !== functionCallText) {
-		t8 = /* @__PURE__ */ jsx(CopyButton, { textToCopy: functionCallText });
-		$[17] = functionCallText;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== t7 || $[20] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between gap-2",
-			children: [t7, t8]
-		});
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = t9;
-	} else t9 = $[21];
-	let t10;
-	if ($[22] !== filteredArgs) {
-		let t11$1;
-		if ($[24] !== filteredArgs.length) {
-			t11$1 = (arg_1, index) => /* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-[auto_1fr] items-center pl-4",
-				children: [/* @__PURE__ */ jsx(Argument, {
-					arg: arg_1,
-					popover: false
-				}), index < filteredArgs.length - 1 && /* @__PURE__ */ jsx("span", { children: ", " })]
-			}, index);
-			$[24] = filteredArgs.length;
-			$[25] = t11$1;
-		} else t11$1 = $[25];
-		t10 = filteredArgs.map(t11$1);
-		$[22] = filteredArgs;
-		$[23] = t10;
-	} else t10 = $[23];
-	let t11;
-	if ($[26] !== callsQuantity) {
-		t11 = /* @__PURE__ */ jsx(ClosingParenthesis, {
-			callsQuantity,
-			noQuantity: true
-		});
-		$[26] = callsQuantity;
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
-	if ($[28] !== t10 || $[29] !== t11 || $[30] !== t9) {
-		t12 = /* @__PURE__ */ jsxs(PopoverContent, {
-			className: "grid grid-rows-auto backdrop-blur-md w-auto max-w-2xl max-h-[50vh] overflow-y-auto",
-			hideWhenDetached: true,
-			children: [
-				t9,
-				t10,
-				t11
-			]
-		});
-		$[28] = t10;
-		$[29] = t11;
-		$[30] = t9;
-		$[31] = t12;
-	} else t12 = $[31];
-	let t13;
-	if ($[32] !== t12 || $[33] !== t6) {
-		t13 = /* @__PURE__ */ jsxs(Popover, { children: [t6, t12] });
-		$[32] = t12;
-		$[33] = t6;
-		$[34] = t13;
-	} else t13 = $[34];
-	let t14;
-	if ($[35] !== filteredArgs) {
-		let t15$1;
-		if ($[37] !== filteredArgs.length) {
-			t15$1 = (arg_2, index_0) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Argument, { arg: arg_2 }), index_0 < filteredArgs.length - 1 && /* @__PURE__ */ jsx("span", { children: ", " })] }, index_0);
-			$[37] = filteredArgs.length;
-			$[38] = t15$1;
-		} else t15$1 = $[38];
-		t14 = filteredArgs.map(t15$1);
-		$[35] = filteredArgs;
-		$[36] = t14;
-	} else t14 = $[36];
-	let t15;
-	if ($[39] !== argsGridStyle || $[40] !== t14) {
-		t15 = /* @__PURE__ */ jsx("div", {
-			className: "grid items-center min-w-0",
-			style: argsGridStyle,
-			children: t14
-		});
-		$[39] = argsGridStyle;
-		$[40] = t14;
-		$[41] = t15;
-	} else t15 = $[41];
-	let t16;
-	if ($[42] !== callsQuantity) {
-		t16 = /* @__PURE__ */ jsx(ClosingParenthesis, { callsQuantity });
-		$[42] = callsQuantity;
-		$[43] = t16;
-	} else t16 = $[43];
-	let t17;
-	if ($[44] !== t13 || $[45] !== t15 || $[46] !== t16) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: "grid overflow-hidden items-center",
-			style: GRID_LAYOUT_STYLE,
-			children: [
-				t13,
-				t15,
-				t16
-			]
-		});
-		$[44] = t13;
-		$[45] = t15;
-		$[46] = t16;
-		$[47] = t17;
-	} else t17 = $[47];
-	return t17;
+const FunctionCall = memo(({ topLevelClassName, objectName, functionName, args, callsQuantity }) => {
+	const filteredArgs = useMemo(() => args.filter((arg) => arg !== void 0), [args]);
+	const argsGridStyle = useMemo(() => ({ gridTemplateColumns: `repeat(${filteredArgs.length * 2}, minmax(0, auto))` }), [filteredArgs.length]);
+	const functionCallText = useMemo(() => {
+		const prefix = [topLevelClassName, objectName].filter(Boolean).join(".");
+		return `${prefix ? `${prefix}.` : ""}${functionName}(${filteredArgs.map((arg) => {
+			if (typeof arg === "object" && arg !== null) return JSON.stringify(arg, null, 2);
+			if (arg === null) return "null";
+			if (typeof arg === "string") return `'${arg}'`;
+			return String(arg);
+		}).join(", ")})`;
+	}, [
+		topLevelClassName,
+		objectName,
+		functionName,
+		filteredArgs
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid overflow-hidden items-center",
+		style: GRID_LAYOUT_STYLE,
+		children: [
+			/* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(FunctionCallContent, {
+					className: "cursor-pointer",
+					functionName,
+					topLevelClassName,
+					objectName
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				className: "grid grid-rows-auto backdrop-blur-md w-auto max-w-2xl max-h-[50vh] overflow-y-auto",
+				hideWhenDetached: true,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsx(FunctionCallContent, {
+							functionName,
+							topLevelClassName,
+							objectName
+						}), /* @__PURE__ */ jsx(CopyButton, { textToCopy: functionCallText })]
+					}),
+					filteredArgs.map((arg, index) => /* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-[auto_1fr] items-center pl-4",
+						children: [/* @__PURE__ */ jsx(Argument, {
+							arg,
+							popover: false
+						}), index < filteredArgs.length - 1 && /* @__PURE__ */ jsx("span", { children: ", " })]
+					}, index)),
+					/* @__PURE__ */ jsx(ClosingParenthesis, {
+						callsQuantity,
+						noQuantity: true
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid items-center min-w-0",
+				style: argsGridStyle,
+				children: filteredArgs.map((arg, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Argument, { arg }), index < filteredArgs.length - 1 && /* @__PURE__ */ jsx("span", { children: ", " })] }, index))
+			}),
+			/* @__PURE__ */ jsx(ClosingParenthesis, { callsQuantity })
+		]
+	});
 });
 FunctionCall.displayName = "FunctionCall";
-function _temp$4(arg) {
-	return arg !== void 0;
-}
-function _temp2$1(arg_0) {
-	if (typeof arg_0 === "object" && arg_0 !== null) return JSON.stringify(arg_0, null, 2);
-	if (arg_0 === null) return "null";
-	if (typeof arg_0 === "string") return `'${arg_0}'`;
-	return String(arg_0);
-}
 
 //#endregion
 //#region src/components/events/trace-emit-event.tsx
-var import_compiler_runtime$13 = require_compiler_runtime();
-const TraceEmitEvent = memo((t0) => {
-	const $ = (0, import_compiler_runtime$13.c)(5);
-	const { event } = t0;
-	let t1;
-	if ($[0] !== event.data || $[1] !== event.topic) {
-		t1 = [{
+const TraceEmitEvent = memo(({ event }) => {
+	return /* @__PURE__ */ jsx(FunctionCall, {
+		functionName: "emit",
+		args: useMemo(() => [{
 			topic: event.topic,
 			data: event.data
-		}];
-		$[0] = event.data;
-		$[1] = event.topic;
-		$[2] = t1;
-	} else t1 = $[2];
-	const args = t1;
-	let t2;
-	if ($[3] !== args) {
-		t2 = /* @__PURE__ */ jsx(FunctionCall, {
-			functionName: "emit",
-			args
-		});
-		$[3] = args;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+		}], [event])
+	});
 });
 TraceEmitEvent.displayName = "TraceEmitEvent";
 
 //#endregion
 //#region src/components/events/trace-log-event.tsx
-var import_compiler_runtime$12 = require_compiler_runtime();
-const TraceLogEvent = memo((t0) => {
-	const $ = (0, import_compiler_runtime$12.c)(5);
-	const { event } = t0;
-	let t1;
-	if ($[0] !== event.level) {
-		t1 = /* @__PURE__ */ jsx(LevelDot, { level: event.level });
-		$[0] = event.level;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== event.message || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				t1,
-				" ",
-				event.message
-			]
-		});
-		$[2] = event.message;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+const TraceLogEvent = memo(({ event }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(LevelDot, { level: event.level }),
+			" ",
+			event.message
+		]
+	});
 });
 TraceLogEvent.displayName = "TraceLogEvent";
 
 //#endregion
 //#region src/components/events/trace-state-event.tsx
-var import_compiler_runtime$11 = require_compiler_runtime();
-const TraceStateEvent = memo((t0) => {
-	const $ = (0, import_compiler_runtime$11.c)(7);
-	const { event } = t0;
-	let t1;
-	if ($[0] !== event.data.key || $[1] !== event.data.traceId || $[2] !== event.data.value) {
-		t1 = [
-			event.data.traceId,
-			event.data.key,
-			event.data.value
-		];
-		$[0] = event.data.key;
-		$[1] = event.data.traceId;
-		$[2] = event.data.value;
-		$[3] = t1;
-	} else t1 = $[3];
-	const args = t1;
-	let t2;
-	if ($[4] !== args || $[5] !== event.operation) {
-		t2 = /* @__PURE__ */ jsx(FunctionCall, {
-			objectName: "state",
-			functionName: event.operation,
-			args
-		});
-		$[4] = args;
-		$[5] = event.operation;
-		$[6] = t2;
-	} else t2 = $[6];
-	return t2;
+const TraceStateEvent = memo(({ event }) => {
+	const args = useMemo(() => [
+		event.data.traceId,
+		event.data.key,
+		event.data.value
+	], [event]);
+	return /* @__PURE__ */ jsx(FunctionCall, {
+		objectName: "state",
+		functionName: event.operation,
+		args
+	});
 });
 TraceStateEvent.displayName = "TraceStateEvent";
 
 //#endregion
 //#region src/components/events/trace-stream-event.tsx
-var import_compiler_runtime$10 = require_compiler_runtime();
-const TraceStreamEvent = memo((t0) => {
-	const $ = (0, import_compiler_runtime$10.c)(9);
-	const { event } = t0;
-	const t1 = event.data.data;
-	let t2;
-	if ($[0] !== event.data.groupId || $[1] !== event.data.id || $[2] !== t1) {
-		t2 = [
-			event.data.groupId,
-			event.data.id,
-			t1
-		];
-		$[0] = event.data.groupId;
-		$[1] = event.data.id;
-		$[2] = t1;
-		$[3] = t2;
-	} else t2 = $[3];
-	const args = t2;
-	let t3;
-	if ($[4] !== args || $[5] !== event.calls || $[6] !== event.operation || $[7] !== event.streamName) {
-		t3 = /* @__PURE__ */ jsx(FunctionCall, {
-			topLevelClassName: "streams",
-			objectName: event.streamName,
-			functionName: event.operation,
-			args,
-			callsQuantity: event.calls
-		});
-		$[4] = args;
-		$[5] = event.calls;
-		$[6] = event.operation;
-		$[7] = event.streamName;
-		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
+const TraceStreamEvent = memo(({ event }) => {
+	const args = useMemo(() => [
+		event.data.groupId,
+		event.data.id,
+		event.data.data
+	], [event]);
+	return /* @__PURE__ */ jsx(FunctionCall, {
+		topLevelClassName: "streams",
+		objectName: event.streamName,
+		functionName: event.operation,
+		args,
+		callsQuantity: event.calls
+	});
 });
 TraceStreamEvent.displayName = "TraceStreamEvent";
 
 //#endregion
 //#region src/components/events/trace-event.tsx
-var import_compiler_runtime$9 = require_compiler_runtime();
-const TraceEvent = memo((t0) => {
-	const $ = (0, import_compiler_runtime$9.c)(8);
-	const { event } = t0;
-	if (event.type === "log") {
-		let t1;
-		if ($[0] !== event) {
-			t1 = /* @__PURE__ */ jsx(TraceLogEvent, { event });
-			$[0] = event;
-			$[1] = t1;
-		} else t1 = $[1];
-		return t1;
-	} else if (event.type === "emit") {
-		let t1;
-		if ($[2] !== event) {
-			t1 = /* @__PURE__ */ jsx(TraceEmitEvent, { event });
-			$[2] = event;
-			$[3] = t1;
-		} else t1 = $[3];
-		return t1;
-	} else if (event.type === "state") {
-		let t1;
-		if ($[4] !== event) {
-			t1 = /* @__PURE__ */ jsx(TraceStateEvent, { event });
-			$[4] = event;
-			$[5] = t1;
-		} else t1 = $[5];
-		return t1;
-	} else if (event.type === "stream") {
-		let t1;
-		if ($[6] !== event) {
-			t1 = /* @__PURE__ */ jsx(TraceStreamEvent, { event });
-			$[6] = event;
-			$[7] = t1;
-		} else t1 = $[7];
-		return t1;
-	}
+const TraceEvent = memo(({ event }) => {
+	if (event.type === "log") return /* @__PURE__ */ jsx(TraceLogEvent, { event });
+	else if (event.type === "emit") return /* @__PURE__ */ jsx(TraceEmitEvent, { event });
+	else if (event.type === "state") return /* @__PURE__ */ jsx(TraceStateEvent, { event });
+	else if (event.type === "stream") return /* @__PURE__ */ jsx(TraceStreamEvent, { event });
 });
 TraceEvent.displayName = "TraceEvent";
 
 //#endregion
 //#region src/components/trace-item/trace-event-item.tsx
-var import_compiler_runtime$8 = require_compiler_runtime();
-const TraceEventItem = memo((t0) => {
-	const $ = (0, import_compiler_runtime$8.c)(13);
-	const { event, traceStartTime } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx("div", {
+const TraceEventItem = memo(({ event, traceStartTime }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
 			className: "grid place-items-center",
 			children: /* @__PURE__ */ jsx("div", { className: "w-1 h-1 rounded-full bg-emerald-500 outline outline-2 outline-emerald-500/50 -ml-[26px]" })
-		});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== event) {
-		t2 = /* @__PURE__ */ jsx("div", {
+		}),
+		/* @__PURE__ */ jsx("div", {
 			className: "grid place-items-center",
 			children: /* @__PURE__ */ jsx(EventIcon, { event })
-		});
-		$[1] = event;
-		$[2] = t2;
-	} else t2 = $[2];
-	const t3 = Math.floor(event.timestamp - traceStartTime);
-	let t4;
-	if ($[3] !== t3) {
-		t4 = formatDuration(t3);
-		$[3] = t3;
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
+		}),
+		/* @__PURE__ */ jsx("div", {
 			className: "grid place-items-center",
 			children: /* @__PURE__ */ jsxs("span", {
 				className: "text-sm font-mono text-muted-foreground",
-				children: ["+", t4]
+				children: ["+", formatDuration(Math.floor(event.timestamp - traceStartTime))]
 			})
-		});
-		$[5] = t4;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== event) {
-		t6 = /* @__PURE__ */ jsx("div", {
+		}),
+		/* @__PURE__ */ jsx("div", {
 			className: "grid place-items-start",
 			children: /* @__PURE__ */ jsx(TraceEvent, { event })
-		});
-		$[7] = event;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== t2 || $[10] !== t5 || $[11] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t1,
-			t2,
-			t5,
-			t6
-		] });
-		$[9] = t2;
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	return t7;
+		})
+	] });
 });
 TraceEventItem.displayName = "TraceEventItem";
 
 //#endregion
 //#region src/components/trace-item/trace-item-detail.tsx
-var import_compiler_runtime$7 = require_compiler_runtime();
-const TraceItemDetail = memo((t0) => {
-	const $ = (0, import_compiler_runtime$7.c)(32);
-	const { trace, onClose } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(X, {});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== onClose) {
-		t2 = [{
-			icon: t1,
-			onClick: onClose,
-			label: "Close"
-		}];
-		$[1] = onClose;
-		$[2] = t2;
-	} else t2 = $[2];
-	const actions = t2;
-	const t3 = `Viewing details from step ${trace.name}`;
-	let t4;
-	if ($[3] !== trace.endTime || $[4] !== trace.startTime) {
-		t4 = trace.endTime && /* @__PURE__ */ jsxs("span", { children: ["Duration: ", formatDuration(trace.endTime - trace.startTime)] });
-		$[3] = trace.endTime;
-		$[4] = trace.startTime;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== trace.entryPoint.type) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100",
-			children: trace.entryPoint.type
-		});
-		$[6] = trace.entryPoint.type;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== trace.correlationId) {
-		t6 = trace.correlationId && /* @__PURE__ */ jsxs(Badge, {
-			variant: "outline",
-			children: ["Correlated: ", trace.correlationId]
-		});
-		$[8] = trace.correlationId;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== t4 || $[11] !== t5 || $[12] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-4 text-sm text-muted-foreground mb-4",
-			children: [
-				t4,
-				t5,
-				t6
-			]
-		});
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== trace.events || $[15] !== trace.startTime) {
-		let t9$1;
-		if ($[17] !== trace.startTime) {
-			t9$1 = (event, index) => /* @__PURE__ */ jsx(TraceEventItem, {
-				event,
-				traceStartTime: trace.startTime
-			}, index);
-			$[17] = trace.startTime;
-			$[18] = t9$1;
-		} else t9$1 = $[18];
-		t8 = trace.events.map(t9$1);
-		$[14] = trace.events;
-		$[15] = trace.startTime;
-		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
-	if ($[19] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-[auto_auto_auto_1fr] gap-x-2 gap-y-3 font-mono text-xs border-l-1 border-gray-500/40 pl-6",
-			children: t8
-		});
-		$[19] = t8;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== t7 || $[22] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+const TraceItemDetail = memo(({ trace, onClose }) => {
+	const actions = useMemo(() => [{
+		icon: /* @__PURE__ */ jsx(X, {}),
+		onClick: onClose,
+		label: "Close"
+	}], [onClose]);
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		onClose,
+		initialWidth: 600,
+		title: "Trace Details",
+		subtitle: `Viewing details from step ${trace.name}`,
+		actions,
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "px-2 overflow-auto",
-			children: [t7, t9]
-		});
-		$[21] = t7;
-		$[22] = t9;
-		$[23] = t10;
-	} else t10 = $[23];
-	let t11;
-	if ($[24] !== trace.error) {
-		t11 = trace.error && /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 text-sm text-muted-foreground mb-4",
+				children: [
+					trace.endTime && /* @__PURE__ */ jsxs("span", { children: ["Duration: ", formatDuration(trace.endTime - trace.startTime)] }),
+					/* @__PURE__ */ jsx("div", {
+						className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100",
+						children: trace.entryPoint.type
+					}),
+					trace.correlationId && /* @__PURE__ */ jsxs(Badge, {
+						variant: "outline",
+						children: ["Correlated: ", trace.correlationId]
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-[auto_auto_auto_1fr] gap-x-2 gap-y-3 font-mono text-xs border-l-1 border-gray-500/40 pl-6",
+				children: trace.events.map((event, index) => /* @__PURE__ */ jsx(TraceEventItem, {
+					event,
+					traceStartTime: trace.startTime
+				}, index))
+			})]
+		}), trace.error && /* @__PURE__ */ jsxs("div", {
 			className: "p-4 bg-red-800/10",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "text-sm text-red-800 dark:text-red-400 font-semibold",
@@ -1305,45 +504,17 @@ const TraceItemDetail = memo((t0) => {
 				className: "text-sm text-red-800 dark:text-red-400 pl-4",
 				children: trace.error.stack
 			})]
-		});
-		$[24] = trace.error;
-		$[25] = t11;
-	} else t11 = $[25];
-	let t12;
-	if ($[26] !== actions || $[27] !== onClose || $[28] !== t10 || $[29] !== t11 || $[30] !== t3) {
-		t12 = /* @__PURE__ */ jsxs(Sidebar, {
-			onClose,
-			initialWidth: 600,
-			title: "Trace Details",
-			subtitle: t3,
-			actions,
-			children: [t10, t11]
-		});
-		$[26] = actions;
-		$[27] = onClose;
-		$[28] = t10;
-		$[29] = t11;
-		$[30] = t3;
-		$[31] = t12;
-	} else t12 = $[31];
-	return t12;
+		})]
+	});
 });
 TraceItemDetail.displayName = "TraceItemDetail";
 
 //#endregion
 //#region src/components/trace-timeline.tsx
-var import_compiler_runtime$6 = require_compiler_runtime();
 const TraceTimeline = memo(() => {
-	const $ = (0, import_compiler_runtime$6.c)(2);
-	const groupId = useObservabilityStore(_temp$3);
+	const groupId = useObservabilityStore((state) => state.selectedTraceGroupId);
 	if (!groupId) return null;
-	let t0;
-	if ($[0] !== groupId) {
-		t0 = /* @__PURE__ */ jsx(TraceTimelineComponent, { groupId });
-		$[0] = groupId;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+	return /* @__PURE__ */ jsx(TraceTimelineComponent, { groupId });
 });
 TraceTimeline.displayName = "TraceTimeline";
 const TraceTimelineComponent = memo(({ groupId }) => {
@@ -1359,13 +530,13 @@ const TraceTimelineComponent = memo(({ groupId }) => {
 	const endTime = useGetEndTime(group);
 	const [zoom, setZoom] = useState(1);
 	const selectedTraceId = useObservabilityStore((state) => state.selectedTraceId);
-	const selectTraceId = useObservabilityStore((state_0) => state_0.selectTraceId);
+	const selectTraceId = useObservabilityStore((state) => state.selectTraceId);
 	const selectedTrace = useMemo(() => data?.find((trace) => trace.id === selectedTraceId), [data, selectedTraceId]);
 	const zoomMinus = useCallback(() => {
 		if (zoom > .5) setZoom((prev) => prev - .1);
 	}, []);
 	const zoomPlus = useCallback(() => {
-		setZoom((prev_0) => prev_0 + .1);
+		setZoom((prev) => prev + .1);
 	}, []);
 	if (!group) return null;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
@@ -1419,16 +590,16 @@ const TraceTimelineComponent = memo(({ groupId }) => {
 				})]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex flex-col w-full h-full",
-				children: data?.map((trace_0) => /* @__PURE__ */ jsx(TraceItem, {
-					traceId: trace_0.id,
-					traceName: trace_0.name,
-					traceStatus: trace_0.status,
-					traceStartTime: trace_0.startTime,
-					traceEndTime: trace_0.endTime,
+				children: data?.map((trace) => /* @__PURE__ */ jsx(TraceItem, {
+					traceId: trace.id,
+					traceName: trace.name,
+					traceStatus: trace.status,
+					traceStartTime: trace.startTime,
+					traceEndTime: trace.endTime,
 					groupStartTime: group.startTime,
 					groupEndTime: endTime,
 					onExpand: selectTraceId
-				}, trace_0.id))
+				}, trace.id))
 			})]
 		})
 	}), selectedTrace && /* @__PURE__ */ jsx(TraceItemDetail, {
@@ -1437,367 +608,143 @@ const TraceTimelineComponent = memo(({ groupId }) => {
 	})] });
 });
 TraceTimelineComponent.displayName = "TraceTimelineComponent";
-function _temp$3(state) {
-	return state.selectedTraceGroupId;
-}
 
 //#endregion
 //#region src/hooks/use-filtered-trace-groups.ts
-var import_compiler_runtime$5 = require_compiler_runtime();
 const useFilteredTraceGroups = () => {
-	const $ = (0, import_compiler_runtime$5.c)(4);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = {
-			streamName: "motia-trace-group",
-			groupId: "default"
-		};
-		$[0] = t0;
-	} else t0 = $[0];
-	const { data } = useStreamGroup(t0);
-	const search = useObservabilityStore(_temp$2);
-	let t1;
-	if ($[1] !== data || $[2] !== search) {
-		t1 = data?.filter((group) => group.name.toLowerCase().includes(search.toLowerCase()) || group.id.toLowerCase().includes(search.toLowerCase()));
-		$[1] = data;
-		$[2] = search;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
+	const { data } = useStreamGroup(useMemo(() => ({
+		streamName: "motia-trace-group",
+		groupId: "default"
+	}), []));
+	const search = useObservabilityStore((state) => state.search);
+	return useMemo(() => data?.filter((group) => group.name.toLowerCase().includes(search.toLowerCase()) || group.id.toLowerCase().includes(search.toLowerCase())), [data, search]);
 };
-function _temp$2(state) {
-	return state.search;
-}
 
 //#endregion
 //#region src/components/trace-status.tsx
-var import_compiler_runtime$4 = require_compiler_runtime();
 const variantMap = {
 	running: "info",
 	completed: "success",
 	failed: "error",
 	default: "default"
 };
-const TraceStatusBadge = memo((t0) => {
-	const $ = (0, import_compiler_runtime$4.c)(3);
-	const { status, duration } = t0;
-	const t1 = variantMap[status];
-	const t2 = duration && status !== "failed" ? duration : status;
-	let t3;
-	if ($[0] !== t1 || $[1] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Badge, {
-			variant: t1,
-			children: t2
-		});
-		$[0] = t1;
-		$[1] = t2;
-		$[2] = t3;
-	} else t3 = $[2];
-	return t3;
-});
+const TraceStatusBadge = memo(({ status, duration }) => /* @__PURE__ */ jsx(Badge, {
+	variant: variantMap[status],
+	children: duration && status !== "failed" ? duration : status
+}));
 TraceStatusBadge.displayName = "TraceStatusBadge";
 
 //#endregion
 //#region src/components/trace-group-item.tsx
-var import_compiler_runtime$3 = require_compiler_runtime();
-const TraceGroupItem = memo((t0) => {
-	const $ = (0, import_compiler_runtime$3.c)(42);
-	const { groupId, groupName, groupStatus, groupStartTime, groupEndTime, totalSteps, activeSteps, isSelected } = t0;
-	const selectTraceGroupId = useObservabilityStore(_temp$1);
-	let t1;
-	if ($[0] !== groupEndTime || $[1] !== groupStartTime) {
-		t1 = groupEndTime ? formatDuration(groupEndTime - groupStartTime) : void 0;
-		$[0] = groupEndTime;
-		$[1] = groupStartTime;
-		$[2] = t1;
-	} else t1 = $[2];
-	const duration = t1;
-	let t2;
-	if ($[3] !== groupId || $[4] !== selectTraceGroupId) {
-		t2 = () => {
-			selectTraceGroupId(groupId);
-		};
-		$[3] = groupId;
-		$[4] = selectTraceGroupId;
-		$[5] = t2;
-	} else t2 = $[5];
-	const onSelect = t2;
-	const t3 = `trace-${groupId}`;
-	const t4 = isSelected ? "bg-muted-foreground/10" : "hover:bg-muted/70";
-	let t5;
-	if ($[6] !== t4) {
-		t5 = cn("motia-trace-group cursor-pointer transition-colors w-full text-left", t4);
-		$[6] = t4;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== groupName) {
-		t6 = /* @__PURE__ */ jsx("span", {
-			className: "font-semibold text-lg",
-			children: groupName
-		});
-		$[8] = groupName;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== duration || $[11] !== groupStatus) {
-		t7 = /* @__PURE__ */ jsx(TraceStatusBadge, {
-			status: groupStatus,
-			duration
-		});
-		$[10] = duration;
-		$[11] = groupStatus;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== t6 || $[14] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-row justify-between items-center gap-2",
-			children: [t6, t7]
-		});
-		$[13] = t6;
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== groupId) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			"data-testid": "trace-id",
-			className: "text-xs text-muted-foreground font-mono tracking-[1px]",
-			children: groupId
-		});
-		$[16] = groupId;
-		$[17] = t9;
-	} else t9 = $[17];
-	let t10;
-	if ($[18] !== totalSteps) {
-		t10 = /* @__PURE__ */ jsxs("span", { children: [totalSteps, " steps"] });
-		$[18] = totalSteps;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== t10 || $[21] !== t9) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between",
-			children: [t9, t10]
-		});
-		$[20] = t10;
-		$[21] = t9;
-		$[22] = t11;
-	} else t11 = $[22];
-	let t12;
-	if ($[23] !== groupStartTime) {
-		t12 = formatDistanceToNow(groupStartTime);
-		$[23] = groupStartTime;
-		$[24] = t12;
-	} else t12 = $[24];
-	let t13;
-	if ($[25] !== t12) {
-		t13 = /* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between",
-			children: [t12, " ago"]
-		});
-		$[25] = t12;
-		$[26] = t13;
-	} else t13 = $[26];
-	let t14;
-	if ($[27] !== activeSteps) {
-		t14 = activeSteps > 0 && /* @__PURE__ */ jsxs("div", {
-			className: "text-blue-600",
-			children: [activeSteps, " active"]
-		});
-		$[27] = activeSteps;
-		$[28] = t14;
-	} else t14 = $[28];
-	let t15;
-	if ($[29] !== t11 || $[30] !== t13 || $[31] !== t14) {
-		t15 = /* @__PURE__ */ jsxs("div", {
-			className: "text-xs text-muted-foreground space-y-1",
-			children: [
-				t11,
-				t13,
-				t14
-			]
-		});
-		$[29] = t11;
-		$[30] = t13;
-		$[31] = t14;
-		$[32] = t15;
-	} else t15 = $[32];
-	let t16;
-	if ($[33] !== t15 || $[34] !== t8) {
-		t16 = /* @__PURE__ */ jsxs("div", {
+const TraceGroupItem = memo(({ groupId, groupName, groupStatus, groupStartTime, groupEndTime, totalSteps, activeSteps, isSelected }) => {
+	const selectTraceGroupId = useObservabilityStore((state) => state.selectTraceGroupId);
+	const duration = useMemo(() => groupEndTime ? formatDuration(groupEndTime - groupStartTime) : void 0, [groupEndTime, groupStartTime]);
+	const onSelect = useCallback(() => {
+		selectTraceGroupId(groupId);
+	}, [groupId, selectTraceGroupId]);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": `trace-${groupId}`,
+		className: cn("motia-trace-group cursor-pointer transition-colors w-full text-left", isSelected ? "bg-muted-foreground/10" : "hover:bg-muted/70"),
+		onClick: onSelect,
+		children: /* @__PURE__ */ jsxs("div", {
 			className: "p-3 flex flex-col gap-1",
-			children: [t8, t15]
-		});
-		$[33] = t15;
-		$[34] = t8;
-		$[35] = t16;
-	} else t16 = $[35];
-	let t17;
-	if ($[36] !== groupId || $[37] !== onSelect || $[38] !== t16 || $[39] !== t3 || $[40] !== t5) {
-		t17 = /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-testid": t3,
-			className: t5,
-			onClick: onSelect,
-			children: t16
-		}, groupId);
-		$[36] = groupId;
-		$[37] = onSelect;
-		$[38] = t16;
-		$[39] = t3;
-		$[40] = t5;
-		$[41] = t17;
-	} else t17 = $[41];
-	return t17;
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row justify-between items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-semibold text-lg",
+					children: groupName
+				}), /* @__PURE__ */ jsx(TraceStatusBadge, {
+					status: groupStatus,
+					duration
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "text-xs text-muted-foreground space-y-1",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [/* @__PURE__ */ jsx("div", {
+							"data-testid": "trace-id",
+							className: "text-xs text-muted-foreground font-mono tracking-[1px]",
+							children: groupId
+						}), /* @__PURE__ */ jsxs("span", { children: [totalSteps, " steps"] })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between",
+						children: [formatDistanceToNow(groupStartTime), " ago"]
+					}),
+					activeSteps > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "text-blue-600",
+						children: [activeSteps, " active"]
+					})
+				]
+			})]
+		})
+	}, groupId);
 });
 TraceGroupItem.displayName = "TraceGroupItem";
-function _temp$1(state) {
-	return state.selectTraceGroupId;
-}
 
 //#endregion
 //#region src/components/traces-groups.tsx
-var import_compiler_runtime$2 = require_compiler_runtime();
 const TracesGroups = memo(() => {
-	const $ = (0, import_compiler_runtime$2.c)(17);
 	const groups = useFilteredTraceGroups();
-	const selectedGroupId = useObservabilityStore(_temp);
-	const selectTraceGroupId = useObservabilityStore(_temp2);
-	const groupsLength = groups?.length || 0;
-	let t0;
-	bb0: {
-		if (!groups || groups.length === 0) {
-			t0 = "";
-			break bb0;
-		}
+	const selectedGroupId = useObservabilityStore((state) => state.selectedTraceGroupId);
+	const selectTraceGroupId = useObservabilityStore((state) => state.selectTraceGroupId);
+	const groupsLength = useMemo(() => groups?.length || 0, [groups]);
+	const lastRunningGroupId = useMemo(() => {
+		if (!groups || groups.length === 0) return "";
 		const lastGroup = groups[groups.length - 1];
-		t0 = lastGroup?.status === "running" ? lastGroup.id : "";
-	}
-	const lastRunningGroupId = t0;
-	let t1;
-	if ($[0] !== groupsLength || $[1] !== lastRunningGroupId || $[2] !== selectTraceGroupId || $[3] !== selectedGroupId) {
-		t1 = () => {
-			if (lastRunningGroupId && lastRunningGroupId !== selectedGroupId) selectTraceGroupId(lastRunningGroupId);
-			else if (!lastRunningGroupId && !groupsLength && selectedGroupId) selectTraceGroupId("");
-		};
-		$[0] = groupsLength;
-		$[1] = lastRunningGroupId;
-		$[2] = selectTraceGroupId;
-		$[3] = selectedGroupId;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== groupsLength || $[6] !== lastRunningGroupId) {
-		t2 = [lastRunningGroupId, groupsLength];
-		$[5] = groupsLength;
-		$[6] = lastRunningGroupId;
-		$[7] = t2;
-	} else t2 = $[7];
-	useEffect(t1, t2);
-	let t3;
-	if ($[8] !== groups) {
-		t3 = [...groups].reverse();
-		$[8] = groups;
-		$[9] = t3;
-	} else t3 = $[9];
-	const reversedGroups = t3;
+		return lastGroup?.status === "running" ? lastGroup.id : "";
+	}, [groups]);
+	useEffect(() => {
+		if (lastRunningGroupId && lastRunningGroupId !== selectedGroupId) selectTraceGroupId(lastRunningGroupId);
+		else if (!lastRunningGroupId && !groupsLength && selectedGroupId) selectTraceGroupId("");
+	}, [lastRunningGroupId, groupsLength]);
+	const reversedGroups = useMemo(() => [...groups].reverse(), [groups]);
 	if (!groups || groups.length === 0) return null;
-	let t4;
-	if ($[10] !== reversedGroups || $[11] !== selectedGroupId) {
-		let t5$1;
-		if ($[13] !== selectedGroupId) {
-			t5$1 = (group) => /* @__PURE__ */ jsx(TraceGroupItem, {
-				groupId: group.id,
-				groupName: group.name,
-				groupStatus: group.status,
-				groupStartTime: group.startTime,
-				groupEndTime: group.endTime,
-				totalSteps: group.metadata.totalSteps,
-				activeSteps: group.metadata.activeSteps,
-				isSelected: selectedGroupId === group.id
-			}, group.id);
-			$[13] = selectedGroupId;
-			$[14] = t5$1;
-		} else t5$1 = $[14];
-		t4 = reversedGroups.map(t5$1);
-		$[10] = reversedGroups;
-		$[11] = selectedGroupId;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[15] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: "overflow-auto",
-			children: t4
-		});
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-auto",
+		children: reversedGroups.map((group) => /* @__PURE__ */ jsx(TraceGroupItem, {
+			groupId: group.id,
+			groupName: group.name,
+			groupStatus: group.status,
+			groupStartTime: group.startTime,
+			groupEndTime: group.endTime,
+			totalSteps: group.metadata.totalSteps,
+			activeSteps: group.metadata.activeSteps,
+			isSelected: selectedGroupId === group.id
+		}, group.id))
+	});
 });
 TracesGroups.displayName = "TracesGroups";
-function _temp(state) {
-	return state.selectedTraceGroupId;
-}
-function _temp2(state_0) {
-	return state_0.selectTraceGroupId;
-}
 
 //#endregion
 //#region src/components/observability-page.tsx
-var import_compiler_runtime$1 = require_compiler_runtime();
 const ObservabilityPage = memo(() => {
-	const $ = (0, import_compiler_runtime$1.c)(3);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(SearchBar, {});
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			className: "w-[300px] border-r border-border overflow-auto h-full",
-			"data-testid": "traces-container",
-			children: /* @__PURE__ */ jsx(TracesGroups, {})
-		});
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsxs("div", {
-			className: "grid grid-rows-[auto_1fr] h-full",
-			children: [t0, /* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-[300px_1fr] overflow-hidden",
-				children: [t1, /* @__PURE__ */ jsxs("div", {
-					className: "overflow-auto",
-					"data-testid": "trace-details",
-					children: [/* @__PURE__ */ jsx(TraceTimeline, {}), /* @__PURE__ */ jsx(TraceEmptyState, {})]
-				})]
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-rows-[auto_1fr] h-full",
+		children: [/* @__PURE__ */ jsx(SearchBar, {}), /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-[300px_1fr] overflow-hidden",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "w-[300px] border-r border-border overflow-auto h-full",
+				"data-testid": "traces-container",
+				children: /* @__PURE__ */ jsx(TracesGroups, {})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "overflow-auto",
+				"data-testid": "trace-details",
+				children: [/* @__PURE__ */ jsx(TraceTimeline, {}), /* @__PURE__ */ jsx(TraceEmptyState, {})]
 			})]
-		});
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+		})]
+	});
 });
 ObservabilityPage.displayName = "ObservabilityPage";
 
 //#endregion
 //#region src/components/observability-tab-label.tsx
-var import_compiler_runtime = require_compiler_runtime();
-const ObservabilityTabLabel = memo(() => {
-	const $ = (0, import_compiler_runtime.c)(1);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("div", {
-			"data-testid": "observability-link",
-			children: [/* @__PURE__ */ jsx(GanttChartSquare, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: "Tracing" })]
-		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
-});
+const ObservabilityTabLabel = memo(() => /* @__PURE__ */ jsxs("div", {
+	"data-testid": "observability-link",
+	children: [/* @__PURE__ */ jsx(GanttChartSquare, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: "Tracing" })]
+}));
 ObservabilityTabLabel.displayName = "ObservabilityTabLabel";
 
 //#endregion