@motiadev/plugin-observability 0.15.6-beta.174 → 0.16.0-beta.176

package/dist/index.js

@@ -1,5 +1,5 @@
 import { c } from "react/compiler-runtime";
-import { Fragment, forwardRef, memo, useEffect, useRef, useState } from "react";
+import { Fragment, forwardRef, memo, useEffect, useMemo, useRef, useState } from "react";
 import { Badge, Button, Input, LevelDot, Sidebar, cn } from "@motiadev/ui";
 import { Check, Copy, GanttChartSquare, MessageCircle, Minus, Package, Plus, Radio, ScrollText, Search, Trash, X } from "lucide-react";
 import { create } from "zustand";
@@ -9,14 +9,23 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import ReactJson from "react18-json-view";
 import "react18-json-view/src/dark.css";
 import "react18-json-view/src/style.css";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDistanceToNow } from "date-fns";
 
 //#region src/stores/use-observability-store.ts
 const useObservabilityStore = create()((set) => ({
+	traceGroups: [],
+	traces: [],
 	selectedTraceGroupId: "",
 	selectedTraceId: void 0,
 	search: "",
-	selectTraceGroupId: (groupId) => set({ selectedTraceGroupId: groupId }),
+	setTraceGroups: (groups) => {
+		set({ traceGroups: Array.isArray(groups) ? groups : [] });
+	},
+	setTraces: (traces) => {
+		set({ traces: Array.isArray(traces) ? traces : [] });
+	},
+	selectTraceGroupId: (groupId$1) => set({ selectedTraceGroupId: groupId$1 }),
 	selectTraceId: (traceId) => set({ selectedTraceId: traceId }),
 	setSearch: (search) => set({ search }),
 	clearTraces: () => {
@@ -32,8 +41,8 @@ const SearchBar = memo(() => {
 		for (let $i = 0; $i < 24; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
 		$[0] = "0d378097fa8da23c1a1ca72ef31fe4b19f0c9bbeda9092deafe087d58425242d";
 	}
-	const search = useObservabilityStore(_temp$6);
-	const setSearch = useObservabilityStore(_temp2$3);
+	const search = useObservabilityStore(_temp$7);
+	const setSearch = useObservabilityStore(_temp2$4);
 	const clearTraces = useObservabilityStore(_temp3$1);
 	let t0;
 	if ($[1] !== setSearch) {
@@ -131,10 +140,10 @@ const SearchBar = memo(() => {
 	return t11;
 });
 SearchBar.displayName = "SearchBar";
-function _temp$6(state) {
+function _temp$7(state) {
 	return state.search;
 }
-function _temp2$3(state_0) {
+function _temp2$4(state_0) {
 	return state_0.setSearch;
 }
 function _temp3$1(state_1) {
@@ -149,7 +158,7 @@ const TraceEmptyState = memo(() => {
 		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
 		$[0] = "2108089e2c746ed0862d68dda608395c37fa47e1141188e212f129d7d9fe3d12";
 	}
-	if (useObservabilityStore(_temp$5)) return null;
+	if (useObservabilityStore(_temp$6)) return null;
 	let t0;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = /* @__PURE__ */ jsx("div", {
@@ -161,7 +170,7 @@ const TraceEmptyState = memo(() => {
 	return t0;
 });
 TraceEmptyState.displayName = "TraceEmptyState";
-function _temp$5(state) {
+function _temp$6(state) {
 	return state.selectedTraceGroupId;
 }
 
@@ -211,6 +220,37 @@ const useGetEndTime = (group) => {
 	return endTime;
 };
 
+//#endregion
+//#region src/hooks/use-traces-stream.ts
+const streamName$1 = "motia-trace";
+const useTracesStream = () => {
+	const $ = c(4);
+	if ($[0] !== "bcd1cb2c3d5b881ae86f74bb18d93ab6669b2358da38d97af969437f8354452c") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "bcd1cb2c3d5b881ae86f74bb18d93ab6669b2358da38d97af969437f8354452c";
+	}
+	const groupId$1 = useObservabilityStore(_temp$5);
+	const setData = useObservabilityStore(_temp2$3);
+	let t0;
+	if ($[1] !== groupId$1 || $[2] !== setData) {
+		t0 = {
+			streamName: streamName$1,
+			groupId: groupId$1,
+			setData
+		};
+		$[1] = groupId$1;
+		$[2] = setData;
+		$[3] = t0;
+	} else t0 = $[3];
+	useStreamGroup(t0);
+};
+function _temp$5(state) {
+	return state.selectedTraceGroupId;
+}
+function _temp2$3(state_0) {
+	return state_0.setTraces;
+}
+
 //#endregion
 //#region src/lib/utils.ts
 const formatDuration = (duration) => {
@@ -1342,369 +1382,401 @@ TraceItemDetail.displayName = "TraceItemDetail";
 //#region src/components/trace-timeline.tsx
 const TraceTimeline = memo(() => {
 	const $ = c(3);
-	if ($[0] !== "fd73f7a8c1f8a9d942e9e6008a32a002af26b3ecbbb06d98f5a3a138c6f4c73a") {
+	if ($[0] !== "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fd73f7a8c1f8a9d942e9e6008a32a002af26b3ecbbb06d98f5a3a138c6f4c73a";
+		$[0] = "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674";
 	}
-	const groupId = useObservabilityStore(_temp$3);
-	if (!groupId) return null;
+	const groupId$1 = useObservabilityStore(_temp$3);
+	if (!groupId$1) return null;
 	let t0;
-	if ($[1] !== groupId) {
-		t0 = /* @__PURE__ */ jsx(TraceTimelineComponent, { groupId });
-		$[1] = groupId;
+	if ($[1] !== groupId$1) {
+		t0 = /* @__PURE__ */ jsx(TraceTimelineComponent, { groupId: groupId$1 });
+		$[1] = groupId$1;
 		$[2] = t0;
 	} else t0 = $[2];
 	return t0;
 });
 TraceTimeline.displayName = "TraceTimeline";
 const TraceTimelineComponent = memo((t0) => {
-	const $ = c(80);
-	if ($[0] !== "fd73f7a8c1f8a9d942e9e6008a32a002af26b3ecbbb06d98f5a3a138c6f4c73a") {
-		for (let $i = 0; $i < 80; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "fd73f7a8c1f8a9d942e9e6008a32a002af26b3ecbbb06d98f5a3a138c6f4c73a";
+	const $ = c(83);
+	if ($[0] !== "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674") {
+		for (let $i = 0; $i < 83; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674";
 	}
-	const { groupId } = t0;
+	const { groupId: groupId$1 } = t0;
+	useTracesStream();
+	const traceGroups = useObservabilityStore(_temp2$1);
+	const traces = useObservabilityStore(_temp3);
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = {
-			streamName: "motia-trace-group",
-			groupId: "default"
-		};
-		$[1] = t1;
-	} else t1 = $[1];
-	const { data: traceGroups } = useStreamGroup(t1);
+	if ($[1] !== groupId$1 || $[2] !== traceGroups) {
+		let t2$1;
+		if ($[4] !== groupId$1) {
+			t2$1 = (traceGroup) => traceGroup.id === groupId$1;
+			$[4] = groupId$1;
+			$[5] = t2$1;
+		} else t2$1 = $[5];
+		t1 = traceGroups.find(t2$1);
+		$[1] = groupId$1;
+		$[2] = traceGroups;
+		$[3] = t1;
+	} else t1 = $[3];
+	const group = t1;
+	const endTime = useGetEndTime(group);
+	const [zoom, setZoom] = useState(100);
+	const selectedTraceId = useObservabilityStore(_temp4);
+	const selectTraceId = useObservabilityStore(_temp5);
 	let t2;
-	if ($[2] !== groupId || $[3] !== traceGroups) {
+	if ($[6] !== selectedTraceId || $[7] !== traces) {
 		let t3$1;
-		if ($[5] !== groupId) {
-			t3$1 = (traceGroup) => traceGroup.id === groupId;
-			$[5] = groupId;
-			$[6] = t3$1;
-		} else t3$1 = $[6];
-		t2 = traceGroups.find(t3$1);
-		$[2] = groupId;
-		$[3] = traceGroups;
-		$[4] = t2;
-	} else t2 = $[4];
-	const group = t2;
+		if ($[9] !== selectedTraceId) {
+			t3$1 = (trace) => trace.id === selectedTraceId;
+			$[9] = selectedTraceId;
+			$[10] = t3$1;
+		} else t3$1 = $[10];
+		t2 = traces.find(t3$1);
+		$[6] = selectedTraceId;
+		$[7] = traces;
+		$[8] = t2;
+	} else t2 = $[8];
+	const selectedTrace = t2;
 	let t3;
-	if ($[7] !== groupId) {
-		t3 = {
-			streamName: "motia-trace",
-			groupId
-		};
-		$[7] = groupId;
-		$[8] = t3;
-	} else t3 = $[8];
-	const { data } = useStreamGroup(t3);
-	const endTime = useGetEndTime(group);
-	const [zoom, setZoom] = useState(100);
-	const selectedTraceId = useObservabilityStore(_temp2$1);
-	const selectTraceId = useObservabilityStore(_temp3);
+	if ($[11] !== zoom) {
+		t3 = () => zoom > 100 && setZoom(_temp6);
+		$[11] = zoom;
+		$[12] = t3;
+	} else t3 = $[12];
+	const zoomMinus = t3;
 	let t4;
-	if ($[9] !== data || $[10] !== selectedTraceId) {
-		t4 = data?.find((trace) => trace.id === selectedTraceId);
-		$[9] = data;
-		$[10] = selectedTraceId;
-		$[11] = t4;
-	} else t4 = $[11];
-	const selectedTrace = t4;
-	let t5;
-	if ($[12] !== zoom) {
-		t5 = () => zoom > 100 && setZoom(_temp4);
-		$[12] = zoom;
-		$[13] = t5;
-	} else t5 = $[13];
-	const zoomMinus = t5;
-	let t6;
-	if ($[14] !== zoom) {
-		t6 = () => zoom < 200 && setZoom(_temp5);
-		$[14] = zoom;
-		$[15] = t6;
-	} else t6 = $[15];
-	const zoomPlus = t6;
+	if ($[13] !== zoom) {
+		t4 = () => zoom < 200 && setZoom(_temp7);
+		$[13] = zoom;
+		$[14] = t4;
+	} else t4 = $[14];
+	const zoomPlus = t4;
 	if (!group) return null;
+	const t5 = `${zoom}%`;
+	let t6;
+	if ($[15] !== t5) {
+		t6 = { width: t5 };
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
 	const t7 = `${zoom}%`;
 	let t8;
-	if ($[16] !== t7) {
+	if ($[17] !== t7) {
 		t8 = { width: t7 };
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	const t9 = `${zoom}%`;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	const t9 = zoom <= 100;
 	let t10;
-	if ($[18] !== t9) {
-		t10 = { width: t9 };
-		$[18] = t9;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4 cursor-pointer" });
 		$[19] = t10;
 	} else t10 = $[19];
-	const t11 = zoom <= 100;
-	let t12;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4 cursor-pointer" });
-		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== t11 || $[22] !== zoomMinus) {
-		t13 = /* @__PURE__ */ jsx(Button, {
+	let t11;
+	if ($[20] !== t9 || $[21] !== zoomMinus) {
+		t11 = /* @__PURE__ */ jsx(Button, {
 			variant: "icon",
 			size: "sm",
 			className: "px-2",
 			onClick: zoomMinus,
-			disabled: t11,
-			children: t12
+			disabled: t9,
+			children: t10
 		});
-		$[21] = t11;
-		$[22] = zoomMinus;
-		$[23] = t13;
-	} else t13 = $[23];
-	let t14;
-	if ($[24] !== zoom) {
-		t14 = /* @__PURE__ */ jsxs("span", {
+		$[20] = t9;
+		$[21] = zoomMinus;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== zoom) {
+		t12 = /* @__PURE__ */ jsxs("span", {
 			className: "min-w-12 text-center select-none text-sm font-bold text-muted-foreground",
 			children: [zoom, "%"]
 		});
-		$[24] = zoom;
+		$[23] = zoom;
+		$[24] = t12;
+	} else t12 = $[24];
+	const t13 = zoom >= 200;
+	let t14;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 cursor-pointer" });
 		$[25] = t14;
 	} else t14 = $[25];
-	const t15 = zoom >= 200;
-	let t16;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 cursor-pointer" });
-		$[26] = t16;
-	} else t16 = $[26];
-	let t17;
-	if ($[27] !== t15 || $[28] !== zoomPlus) {
-		t17 = /* @__PURE__ */ jsx(Button, {
+	let t15;
+	if ($[26] !== t13 || $[27] !== zoomPlus) {
+		t15 = /* @__PURE__ */ jsx(Button, {
 			variant: "icon",
 			size: "sm",
 			className: "px-2",
 			onClick: zoomPlus,
-			disabled: t15,
-			children: t16
+			disabled: t13,
+			children: t14
 		});
-		$[27] = t15;
-		$[28] = zoomPlus;
-		$[29] = t17;
-	} else t17 = $[29];
-	let t18;
-	if ($[30] !== t13 || $[31] !== t14 || $[32] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
+		$[26] = t13;
+		$[27] = zoomPlus;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t11 || $[30] !== t12 || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
 			className: "shrink-0 w-[200px] h-[37px] flex items-center justify-center gap-2 sticky left-0 top-0 z-10 bg-card backdrop-blur-xs backdrop-filter",
 			children: [
-				t13,
-				t14,
-				t17
+				t11,
+				t12,
+				t15
 			]
 		});
-		$[30] = t13;
-		$[31] = t14;
-		$[32] = t17;
-		$[33] = t18;
-	} else t18 = $[33];
+		$[29] = t11;
+		$[30] = t12;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx("span", { children: "0ms" });
+		$[33] = t17;
+	} else t17 = $[33];
+	const t18 = Math.floor((endTime - group.startTime) * .25);
 	let t19;
-	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = /* @__PURE__ */ jsx("span", { children: "0ms" });
-		$[34] = t19;
-	} else t19 = $[34];
-	const t20 = Math.floor((endTime - group.startTime) * .25);
-	let t21;
-	if ($[35] !== t20) {
-		t21 = formatDuration(t20);
-		$[35] = t20;
-		$[36] = t21;
-	} else t21 = $[36];
+	if ($[34] !== t18) {
+		t19 = formatDuration(t18);
+		$[34] = t18;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] !== t19) {
+		t20 = /* @__PURE__ */ jsx("span", { children: t19 });
+		$[36] = t19;
+		$[37] = t20;
+	} else t20 = $[37];
+	const t21 = Math.floor((endTime - group.startTime) * .5);
 	let t22;
-	if ($[37] !== t21) {
-		t22 = /* @__PURE__ */ jsx("span", { children: t21 });
-		$[37] = t21;
-		$[38] = t22;
-	} else t22 = $[38];
-	const t23 = Math.floor((endTime - group.startTime) * .5);
-	let t24;
-	if ($[39] !== t23) {
-		t24 = formatDuration(t23);
-		$[39] = t23;
-		$[40] = t24;
-	} else t24 = $[40];
+	if ($[38] !== t21) {
+		t22 = formatDuration(t21);
+		$[38] = t21;
+		$[39] = t22;
+	} else t22 = $[39];
+	let t23;
+	if ($[40] !== t22) {
+		t23 = /* @__PURE__ */ jsx("span", { children: t22 });
+		$[40] = t22;
+		$[41] = t23;
+	} else t23 = $[41];
+	const t24 = Math.floor((endTime - group.startTime) * .75);
 	let t25;
-	if ($[41] !== t24) {
-		t25 = /* @__PURE__ */ jsx("span", { children: t24 });
-		$[41] = t24;
-		$[42] = t25;
-	} else t25 = $[42];
-	const t26 = Math.floor((endTime - group.startTime) * .75);
-	let t27;
-	if ($[43] !== t26) {
-		t27 = formatDuration(t26);
-		$[43] = t26;
-		$[44] = t27;
-	} else t27 = $[44];
+	if ($[42] !== t24) {
+		t25 = formatDuration(t24);
+		$[42] = t24;
+		$[43] = t25;
+	} else t25 = $[43];
+	let t26;
+	if ($[44] !== t25) {
+		t26 = /* @__PURE__ */ jsx("span", { children: t25 });
+		$[44] = t25;
+		$[45] = t26;
+	} else t26 = $[45];
+	const t27 = Math.floor(endTime - group.startTime);
 	let t28;
-	if ($[45] !== t27) {
-		t28 = /* @__PURE__ */ jsx("span", { children: t27 });
-		$[45] = t27;
-		$[46] = t28;
-	} else t28 = $[46];
-	const t29 = Math.floor(endTime - group.startTime);
+	if ($[46] !== t27) {
+		t28 = formatDuration(t27);
+		$[46] = t27;
+		$[47] = t28;
+	} else t28 = $[47];
+	let t29;
+	if ($[48] !== t28) {
+		t29 = /* @__PURE__ */ jsx("span", { children: t28 });
+		$[48] = t28;
+		$[49] = t29;
+	} else t29 = $[49];
 	let t30;
-	if ($[47] !== t29) {
-		t30 = formatDuration(t29);
-		$[47] = t29;
-		$[48] = t30;
-	} else t30 = $[48];
-	let t31;
-	if ($[49] !== t30) {
-		t31 = /* @__PURE__ */ jsx("span", { children: t30 });
-		$[49] = t30;
-		$[50] = t31;
-	} else t31 = $[50];
-	let t32;
-	if ($[51] !== t22 || $[52] !== t25 || $[53] !== t28 || $[54] !== t31) {
-		t32 = /* @__PURE__ */ jsxs("div", {
+	if ($[50] !== t20 || $[51] !== t23 || $[52] !== t26 || $[53] !== t29) {
+		t30 = /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card",
 			children: [
-				t19,
-				t22,
-				t25,
-				t28,
-				t31
+				t17,
+				t20,
+				t23,
+				t26,
+				t29
 			]
 		});
-		$[51] = t22;
-		$[52] = t25;
-		$[53] = t28;
-		$[54] = t31;
-		$[55] = t32;
-	} else t32 = $[55];
-	let t33;
-	if ($[56] !== t10 || $[57] !== t18 || $[58] !== t32) {
-		t33 = /* @__PURE__ */ jsxs("div", {
+		$[50] = t20;
+		$[51] = t23;
+		$[52] = t26;
+		$[53] = t29;
+		$[54] = t30;
+	} else t30 = $[54];
+	let t31;
+	if ($[55] !== t16 || $[56] !== t30 || $[57] !== t8) {
+		t31 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-1 bg-background",
-			style: t10,
-			children: [t18, t32]
-		});
-		$[56] = t10;
-		$[57] = t18;
-		$[58] = t32;
-		$[59] = t33;
-	} else t33 = $[59];
-	const t34 = `${zoom}%`;
+			style: t8,
+			children: [t16, t30]
+		});
+		$[55] = t16;
+		$[56] = t30;
+		$[57] = t8;
+		$[58] = t31;
+	} else t31 = $[58];
+	const t32 = `${zoom}%`;
+	let t33;
+	if ($[59] !== t32) {
+		t33 = { width: t32 };
+		$[59] = t32;
+		$[60] = t33;
+	} else t33 = $[60];
+	let t34;
+	if ($[61] !== endTime || $[62] !== group.startTime || $[63] !== selectTraceId || $[64] !== traces) {
+		let t35$1;
+		if ($[66] !== endTime || $[67] !== group.startTime || $[68] !== selectTraceId) {
+			t35$1 = (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,
+				groupStartTime: group.startTime,
+				groupEndTime: endTime,
+				onExpand: selectTraceId
+			}, trace_0.id);
+			$[66] = endTime;
+			$[67] = group.startTime;
+			$[68] = selectTraceId;
+			$[69] = t35$1;
+		} else t35$1 = $[69];
+		t34 = traces.map(t35$1);
+		$[61] = endTime;
+		$[62] = group.startTime;
+		$[63] = selectTraceId;
+		$[64] = traces;
+		$[65] = t34;
+	} else t34 = $[65];
 	let t35;
-	if ($[60] !== t34) {
-		t35 = { width: t34 };
-		$[60] = t34;
-		$[61] = t35;
-	} else t35 = $[61];
-	let t36;
-	if ($[62] !== data || $[63] !== endTime || $[64] !== group.startTime || $[65] !== selectTraceId) {
-		t36 = 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,
-			groupStartTime: group.startTime,
-			groupEndTime: endTime,
-			onExpand: selectTraceId
-		}, trace_0.id));
-		$[62] = data;
-		$[63] = endTime;
-		$[64] = group.startTime;
-		$[65] = selectTraceId;
-		$[66] = t36;
-	} else t36 = $[66];
-	let t37;
-	if ($[67] !== t35 || $[68] !== t36) {
-		t37 = /* @__PURE__ */ jsx("div", {
+	if ($[70] !== t33 || $[71] !== t34) {
+		t35 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col h-full",
-			style: t35,
-			children: t36
+			style: t33,
+			children: t34
 		});
-		$[67] = t35;
-		$[68] = t36;
-		$[69] = t37;
-	} else t37 = $[69];
-	let t38;
-	if ($[70] !== t33 || $[71] !== t37 || $[72] !== t8) {
-		t38 = /* @__PURE__ */ jsx("div", {
+		$[70] = t33;
+		$[71] = t34;
+		$[72] = t35;
+	} else t35 = $[72];
+	let t36;
+	if ($[73] !== t31 || $[74] !== t35 || $[75] !== t6) {
+		t36 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col flex-1 relative min-h-full min-w-[1000px]",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col",
-				style: t8,
-				children: [t33, t37]
+				style: t6,
+				children: [t31, t35]
 			})
 		});
-		$[70] = t33;
-		$[71] = t37;
-		$[72] = t8;
-		$[73] = t38;
-	} else t38 = $[73];
-	let t39;
-	if ($[74] !== selectTraceId || $[75] !== selectedTrace) {
-		t39 = selectedTrace && /* @__PURE__ */ jsx(TraceItemDetail, {
+		$[73] = t31;
+		$[74] = t35;
+		$[75] = t6;
+		$[76] = t36;
+	} else t36 = $[76];
+	let t37;
+	if ($[77] !== selectTraceId || $[78] !== selectedTrace) {
+		t37 = selectedTrace && /* @__PURE__ */ jsx(TraceItemDetail, {
 			trace: selectedTrace,
 			onClose: () => selectTraceId(void 0)
 		});
-		$[74] = selectTraceId;
-		$[75] = selectedTrace;
-		$[76] = t39;
-	} else t39 = $[76];
-	let t40;
-	if ($[77] !== t38 || $[78] !== t39) {
-		t40 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t38, t39] });
-		$[77] = t38;
-		$[78] = t39;
-		$[79] = t40;
-	} else t40 = $[79];
-	return t40;
+		$[77] = selectTraceId;
+		$[78] = selectedTrace;
+		$[79] = t37;
+	} else t37 = $[79];
+	let t38;
+	if ($[80] !== t36 || $[81] !== t37) {
+		t38 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t36, t37] });
+		$[80] = t36;
+		$[81] = t37;
+		$[82] = t38;
+	} else t38 = $[82];
+	return t38;
 });
 TraceTimelineComponent.displayName = "TraceTimelineComponent";
 function _temp$3(state) {
 	return state.selectedTraceGroupId;
 }
 function _temp2$1(state) {
-	return state.selectedTraceId;
+	return state.traceGroups;
 }
 function _temp3(state_0) {
-	return state_0.selectTraceId;
+	return state_0.traces;
+}
+function _temp4(state_1) {
+	return state_1.selectedTraceId;
 }
-function _temp4(prevZoom) {
+function _temp5(state_2) {
+	return state_2.selectTraceId;
+}
+function _temp6(prevZoom) {
 	return prevZoom - 10;
 }
-function _temp5(prevZoom_0) {
+function _temp7(prevZoom_0) {
 	return prevZoom_0 + 10;
 }
 
 //#endregion
 //#region src/hooks/use-filtered-trace-groups.ts
 const useFilteredTraceGroups = () => {
-	const $ = c(5);
-	if ($[0] !== "a29b076706acde25ffc4d4424df8f47d5e87949facd0d256c49dc7eec7d042a7") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "a29b076706acde25ffc4d4424df8f47d5e87949facd0d256c49dc7eec7d042a7";
+	const $ = c(6);
+	if ($[0] !== "bb7b5a50ebd354ac1177c12afa033e3545018c14fe033f5ea4551df3bbda5965") {
+		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "bb7b5a50ebd354ac1177c12afa033e3545018c14fe033f5ea4551df3bbda5965";
 	}
+	const traceGroups = useObservabilityStore(_temp$2);
+	const search = useObservabilityStore(_temp2);
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[1] !== search || $[2] !== traceGroups) {
+		let t1;
+		if ($[4] !== search) {
+			t1 = (group) => group.name.toLowerCase().includes(search.toLowerCase()) || group.id.toLowerCase().includes(search.toLowerCase());
+			$[4] = search;
+			$[5] = t1;
+		} else t1 = $[5];
+		t0 = traceGroups.filter(t1);
+		$[1] = search;
+		$[2] = traceGroups;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+};
+function _temp$2(state) {
+	return state.traceGroups;
+}
+function _temp2(state_0) {
+	return state_0.search;
+}
+
+//#endregion
+//#region src/hooks/use-trace-groups-stream.ts
+const streamName = "motia-trace-group";
+const groupId = "default";
+const useTraceGroupsStream = () => {
+	const $ = c(3);
+	if ($[0] !== "29d24a963c5c777c79f8ec82ca3d5f2b5d6812171a1a0298772d1c34c99549aa") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "29d24a963c5c777c79f8ec82ca3d5f2b5d6812171a1a0298772d1c34c99549aa";
+	}
+	const setData = useObservabilityStore(_temp$1);
+	let t0;
+	if ($[1] !== setData) {
 		t0 = {
-			streamName: "motia-trace-group",
-			groupId: "default"
+			streamName,
+			groupId,
+			setData
 		};
-		$[1] = t0;
-	} else t0 = $[1];
-	const { data } = useStreamGroup(t0);
-	const search = useObservabilityStore(_temp$2);
-	let t1;
-	if ($[2] !== data || $[3] !== search) {
-		t1 = data?.filter((group) => group.name.toLowerCase().includes(search.toLowerCase()) || group.id.toLowerCase().includes(search.toLowerCase()));
-		$[2] = data;
-		$[3] = search;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
+		$[1] = setData;
+		$[2] = t0;
+	} else t0 = $[2];
+	useStreamGroup(t0);
 };
-function _temp$2(state) {
-	return state.search;
+function _temp$1(state) {
+	return state.setTraceGroups;
 }
 
 //#endregion
@@ -1741,13 +1813,13 @@ TraceStatusBadge.displayName = "TraceStatusBadge";
 //#endregion
 //#region src/components/trace-group-item.tsx
 const TraceGroupItem = memo((t0) => {
-	const $ = c(43);
-	if ($[0] !== "bae7176c6d363abcd5ae856478cbdd22c5d53c5296c21141ccf8591a2ba47e9b") {
-		for (let $i = 0; $i < 43; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bae7176c6d363abcd5ae856478cbdd22c5d53c5296c21141ccf8591a2ba47e9b";
+	const $ = c(44);
+	if ($[0] !== "ade6a55bfd668f5f8283f490ae1f964ba2b70d3e3adecd61f24c5ddb8d2b211f") {
+		for (let $i = 0; $i < 44; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ade6a55bfd668f5f8283f490ae1f964ba2b70d3e3adecd61f24c5ddb8d2b211f";
 	}
-	const { groupId, groupName, groupStatus, groupStartTime, groupEndTime, totalSteps, activeSteps, isSelected } = t0;
-	const selectTraceGroupId = useObservabilityStore(_temp$1);
+	const { groupId: groupId$1, groupName, groupStatus, groupStartTime, groupEndTime, totalSteps, activeSteps, isSelected, style } = t0;
+	const selectTraceGroupId = useObservabilityStore(_temp);
 	let t1;
 	if ($[1] !== groupEndTime || $[2] !== groupStartTime) {
 		t1 = groupEndTime ? formatDuration(groupEndTime - groupStartTime) : void 0;
@@ -1757,16 +1829,16 @@ const TraceGroupItem = memo((t0) => {
 	} else t1 = $[3];
 	const duration = t1;
 	let t2;
-	if ($[4] !== groupId || $[5] !== selectTraceGroupId) {
+	if ($[4] !== groupId$1 || $[5] !== selectTraceGroupId) {
 		t2 = () => {
-			selectTraceGroupId(groupId);
+			selectTraceGroupId(groupId$1);
 		};
-		$[4] = groupId;
+		$[4] = groupId$1;
 		$[5] = selectTraceGroupId;
 		$[6] = t2;
 	} else t2 = $[6];
 	const onSelect = t2;
-	const t3 = `trace-${groupId}`;
+	const t3 = `trace-${groupId$1}`;
 	const t4 = isSelected ? "bg-muted-foreground/10" : "hover:bg-muted/70";
 	let t5;
 	if ($[7] !== t4) {
@@ -1804,13 +1876,13 @@ const TraceGroupItem = memo((t0) => {
 		$[16] = t8;
 	} else t8 = $[16];
 	let t9;
-	if ($[17] !== groupId) {
+	if ($[17] !== groupId$1) {
 		t9 = /* @__PURE__ */ jsx("div", {
 			"data-testid": "trace-id",
 			className: "text-xs text-muted-foreground font-mono tracking-[1px]",
-			children: groupId
+			children: groupId$1
 		});
-		$[17] = groupId;
+		$[17] = groupId$1;
 		$[18] = t9;
 	} else t9 = $[18];
 	let t10;
@@ -1879,118 +1951,95 @@ const TraceGroupItem = memo((t0) => {
 		$[36] = t16;
 	} else t16 = $[36];
 	let t17;
-	if ($[37] !== groupId || $[38] !== onSelect || $[39] !== t16 || $[40] !== t3 || $[41] !== t5) {
+	if ($[37] !== groupId$1 || $[38] !== onSelect || $[39] !== style || $[40] !== t16 || $[41] !== t3 || $[42] !== t5) {
 		t17 = /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-testid": t3,
 			className: t5,
+			style,
 			onClick: onSelect,
 			children: t16
-		}, groupId);
-		$[37] = groupId;
+		}, groupId$1);
+		$[37] = groupId$1;
 		$[38] = onSelect;
-		$[39] = t16;
-		$[40] = t3;
-		$[41] = t5;
-		$[42] = t17;
-	} else t17 = $[42];
+		$[39] = style;
+		$[40] = t16;
+		$[41] = t3;
+		$[42] = t5;
+		$[43] = t17;
+	} else t17 = $[43];
 	return t17;
 });
 TraceGroupItem.displayName = "TraceGroupItem";
-function _temp$1(state) {
+function _temp(state) {
 	return state.selectTraceGroupId;
 }
 
 //#endregion
 //#region src/components/traces-groups.tsx
+const ROW_HEIGHT = 110;
 const TracesGroups = memo(() => {
-	const $ = c(18);
-	if ($[0] !== "2bddedc9dbf436ff7f1225c5b31bfd84c69748b5b6b8e426fabda2b9e624500a") {
-		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2bddedc9dbf436ff7f1225c5b31bfd84c69748b5b6b8e426fabda2b9e624500a";
-	}
+	useTraceGroupsStream();
 	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_0) => state_0.selectTraceGroupId);
+	const scrollContainerRef = useRef(null);
+	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 ($[1] !== groupsLength || $[2] !== lastRunningGroupId || $[3] !== selectTraceGroupId || $[4] !== selectedGroupId) {
-		t1 = () => {
-			if (lastRunningGroupId && lastRunningGroupId !== selectedGroupId) selectTraceGroupId(lastRunningGroupId);
-			else if (!lastRunningGroupId && !groupsLength && selectedGroupId) selectTraceGroupId("");
-		};
-		$[1] = groupsLength;
-		$[2] = lastRunningGroupId;
-		$[3] = selectTraceGroupId;
-		$[4] = selectedGroupId;
-		$[5] = t1;
-	} else t1 = $[5];
-	let t2;
-	if ($[6] !== groupsLength || $[7] !== lastRunningGroupId) {
-		t2 = [lastRunningGroupId, groupsLength];
-		$[6] = groupsLength;
-		$[7] = lastRunningGroupId;
-		$[8] = t2;
-	} else t2 = $[8];
-	useEffect(t1, t2);
-	let t3;
-	if ($[9] !== groups) {
-		t3 = [...groups].reverse();
-		$[9] = groups;
-		$[10] = t3;
-	} else t3 = $[10];
-	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,
+		selectedGroupId,
+		selectTraceGroupId
+	]);
+	const reversedGroups = useMemo(() => groups ? [...groups].reverse() : [], [groups]);
+	const virtualizer = useVirtualizer({
+		count: reversedGroups.length,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: 5
+	});
+	const virtualItems = virtualizer.getVirtualItems();
 	if (!groups || groups.length === 0) return null;
-	let t4;
-	if ($[11] !== reversedGroups || $[12] !== selectedGroupId) {
-		let t5$1;
-		if ($[14] !== 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);
-			$[14] = selectedGroupId;
-			$[15] = t5$1;
-		} else t5$1 = $[15];
-		t4 = reversedGroups.map(t5$1);
-		$[11] = reversedGroups;
-		$[12] = selectedGroupId;
-		$[13] = t4;
-	} else t4 = $[13];
-	let t5;
-	if ($[16] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: "overflow-auto",
-			children: t4
-		});
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
-	return t5;
+	return /* @__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 group = reversedGroups[virtualRow.index];
+				if (!group) return null;
+				return /* @__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,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						height: ROW_HEIGHT,
+						transform: `translateY(${virtualRow.start}px)`
+					}
+				}, 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