@motiadev/plugin-observability 0.17.0-beta.181 → 0.17.0-beta.182-326905

package/dist/index.js

@@ -12,24 +12,88 @@ import "react18-json-view/src/style.css";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDistanceToNow } from "date-fns";
 
+//#region src/hooks/use-derive-trace-group.ts
+const deriveTraceGroup = (meta, traces) => {
+	const completedSteps = traces.filter((t) => t.status === "completed").length;
+	const failedCount = traces.filter((t) => t.status === "failed").length;
+	const runningCount = traces.filter((t) => t.status === "running").length;
+	const status = failedCount > 0 ? "failed" : runningCount > 0 ? "running" : "completed";
+	const endTimes = traces.filter((t) => t.endTime).map((t) => t.endTime);
+	const endTime = status === "completed" && endTimes.length > 0 ? Math.max(...endTimes) : void 0;
+	const lastActivity = Math.max(meta.startTime, ...traces.map((t) => t.endTime || t.startTime), ...traces.flatMap((t) => t.events.map((e) => e.timestamp)));
+	return {
+		...meta,
+		status,
+		endTime,
+		lastActivity,
+		metadata: {
+			completedSteps,
+			activeSteps: runningCount,
+			totalSteps: traces.length
+		}
+	};
+};
+
+//#endregion
 //#region src/stores/use-observability-store.ts
-const useObservabilityStore = create()((set) => ({
-	traceGroups: [],
+const useObservabilityStore = create()((set, get) => ({
+	traceGroupMetas: [],
 	traces: [],
+	tracesByGroupId: {},
 	selectedTraceGroupId: "",
 	selectedTraceId: void 0,
 	search: "",
-	setTraceGroups: (groups) => {
-		set({ traceGroups: Array.isArray(groups) ? groups : [] });
+	setTraceGroupMetas: (metas) => {
+		set({ traceGroupMetas: Array.isArray(metas) ? metas : [] });
 	},
 	setTraces: (traces) => {
-		set({ traces: Array.isArray(traces) ? traces : [] });
+		const safeTraces = Array.isArray(traces) ? traces : [];
+		const state = get();
+		const groupId$1 = state.selectedTraceGroupId;
+		if (groupId$1) set({
+			traces: safeTraces,
+			tracesByGroupId: {
+				...state.tracesByGroupId,
+				[groupId$1]: safeTraces
+			}
+		});
+		else set({ traces: safeTraces });
+	},
+	setTracesForGroup: (groupId$1, traces) => {
+		set({ tracesByGroupId: {
+			...get().tracesByGroupId,
+			[groupId$1]: traces
+		} });
+	},
+	selectTraceGroupId: (groupId$1) => {
+		const state = get();
+		const traces = groupId$1 ? state.tracesByGroupId[groupId$1] || [] : [];
+		set({
+			selectedTraceGroupId: groupId$1 || "",
+			traces
+		});
 	},
-	selectTraceGroupId: (groupId$1) => set({ selectedTraceGroupId: groupId$1 }),
 	selectTraceId: (traceId) => set({ selectedTraceId: traceId }),
 	setSearch: (search) => set({ search }),
 	clearTraces: () => {
 		fetch("/__motia/trace/clear", { method: "POST" });
+	},
+	getTraceGroups: () => {
+		const state = get();
+		return state.traceGroupMetas.map((meta) => {
+			const traces = state.tracesByGroupId[meta.id] || [];
+			if (traces.length === 0) return {
+				...meta,
+				status: "running",
+				lastActivity: meta.startTime,
+				metadata: {
+					completedSteps: 0,
+					activeSteps: 0,
+					totalSteps: 0
+				}
+			};
+			return deriveTraceGroup(meta, traces);
+		});
 	}
 }));
 
@@ -43,7 +107,7 @@ const SearchBar = memo(() => {
 	}
 	const search = useObservabilityStore(_temp$7);
 	const setSearch = useObservabilityStore(_temp2$4);
-	const clearTraces = useObservabilityStore(_temp3$1);
+	const clearTraces = useObservabilityStore(_temp3$3);
 	let t0;
 	if ($[1] !== setSearch) {
 		t0 = (e) => setSearch(e.target.value);
@@ -146,7 +210,7 @@ function _temp$7(state) {
 function _temp2$4(state_0) {
 	return state_0.setSearch;
 }
-function _temp3$1(state_1) {
+function _temp3$3(state_1) {
 	return state_1.clearTraces;
 }
 
@@ -224,25 +288,37 @@ const useGetEndTime = (group) => {
 //#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 $ = c(8);
+	if ($[0] !== "d3b628045fbae8fc0753f4cb34688523a49a93a082e8d6fcd0c5e2279e603ae7") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "d3b628045fbae8fc0753f4cb34688523a49a93a082e8d6fcd0c5e2279e603ae7";
 	}
 	const groupId$1 = useObservabilityStore(_temp$5);
 	const setData = useObservabilityStore(_temp2$3);
+	const setTracesForGroup = useObservabilityStore(_temp3$2);
 	let t0;
-	if ($[1] !== groupId$1 || $[2] !== setData) {
-		t0 = {
-			streamName: streamName$1,
-			groupId: groupId$1,
-			setData
+	if ($[1] !== groupId$1 || $[2] !== setData || $[3] !== setTracesForGroup) {
+		t0 = (traces) => {
+			setData(traces);
+			if (groupId$1) setTracesForGroup(groupId$1, traces);
 		};
 		$[1] = groupId$1;
 		$[2] = setData;
-		$[3] = t0;
-	} else t0 = $[3];
-	useStreamGroup(t0);
+		$[3] = setTracesForGroup;
+		$[4] = t0;
+	} else t0 = $[4];
+	let t1;
+	if ($[5] !== groupId$1 || $[6] !== t0) {
+		t1 = {
+			streamName: streamName$1,
+			groupId: groupId$1,
+			setData: t0
+		};
+		$[5] = groupId$1;
+		$[6] = t0;
+		$[7] = t1;
+	} else t1 = $[7];
+	useStreamGroup(t1);
 };
 function _temp$5(state) {
 	return state.selectedTraceGroupId;
@@ -250,6 +326,9 @@ function _temp$5(state) {
 function _temp2$3(state_0) {
 	return state_0.setTraces;
 }
+function _temp3$2(state_1) {
+	return state_1.setTracesForGroup;
+}
 
 //#endregion
 //#region src/lib/utils.ts
@@ -1382,9 +1461,9 @@ TraceItemDetail.displayName = "TraceItemDetail";
 //#region src/components/trace-timeline.tsx
 const TraceTimeline = memo(() => {
 	const $ = c(3);
-	if ($[0] !== "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674") {
+	if ($[0] !== "0861cb6c9c7d40fb40c0b128d67452794264c9d58bd2fd2513753f1aaac123df") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674";
+		$[0] = "0861cb6c9c7d40fb40c0b128d67452794264c9d58bd2fd2513753f1aaac123df";
 	}
 	const groupId$1 = useObservabilityStore(_temp$3);
 	if (!groupId$1) return null;
@@ -1398,84 +1477,105 @@ const TraceTimeline = memo(() => {
 });
 TraceTimeline.displayName = "TraceTimeline";
 const TraceTimelineComponent = memo((t0) => {
-	const $ = c(83);
-	if ($[0] !== "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674") {
-		for (let $i = 0; $i < 83; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "8148f10395e8d4a4f6bf69c46ca41780936fccb5b43d5883c233f5bc10919674";
+	const $ = c(84);
+	if ($[0] !== "0861cb6c9c7d40fb40c0b128d67452794264c9d58bd2fd2513753f1aaac123df") {
+		for (let $i = 0; $i < 84; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "0861cb6c9c7d40fb40c0b128d67452794264c9d58bd2fd2513753f1aaac123df";
 	}
 	const { groupId: groupId$1 } = t0;
 	useTracesStream();
-	const traceGroups = useObservabilityStore(_temp2$1);
-	const traces = useObservabilityStore(_temp3);
+	const traceGroupMetas = useObservabilityStore(_temp2$1);
+	const traces = useObservabilityStore(_temp3$1);
 	let 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);
+	if ($[1] !== groupId$1 || $[2] !== traceGroupMetas || $[3] !== traces) {
+		bb0: {
+			let t2$1;
+			if ($[5] !== groupId$1) {
+				t2$1 = (m) => m.id === groupId$1;
+				$[5] = groupId$1;
+				$[6] = t2$1;
+			} else t2$1 = $[6];
+			const meta = traceGroupMetas.find(t2$1);
+			if (!meta) {
+				t1 = null;
+				break bb0;
+			}
+			if (traces.length === 0) {
+				t1 = {
+					...meta,
+					status: "running",
+					lastActivity: meta.startTime,
+					metadata: {
+						completedSteps: 0,
+						activeSteps: 0,
+						totalSteps: 0
+					}
+				};
+				break bb0;
+			}
+			t1 = deriveTraceGroup(meta, traces);
+		}
 		$[1] = groupId$1;
-		$[2] = traceGroups;
-		$[3] = t1;
-	} else t1 = $[3];
+		$[2] = traceGroupMetas;
+		$[3] = traces;
+		$[4] = t1;
+	} else t1 = $[4];
 	const group = t1;
 	const endTime = useGetEndTime(group);
 	const [zoom, setZoom] = useState(100);
 	const selectedTraceId = useObservabilityStore(_temp4);
 	const selectTraceId = useObservabilityStore(_temp5);
 	let t2;
-	if ($[6] !== selectedTraceId || $[7] !== traces) {
+	if ($[7] !== selectedTraceId || $[8] !== traces) {
 		let t3$1;
-		if ($[9] !== selectedTraceId) {
+		if ($[10] !== selectedTraceId) {
 			t3$1 = (trace) => trace.id === selectedTraceId;
-			$[9] = selectedTraceId;
-			$[10] = t3$1;
-		} else t3$1 = $[10];
+			$[10] = selectedTraceId;
+			$[11] = t3$1;
+		} else t3$1 = $[11];
 		t2 = traces.find(t3$1);
-		$[6] = selectedTraceId;
-		$[7] = traces;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[7] = selectedTraceId;
+		$[8] = traces;
+		$[9] = t2;
+	} else t2 = $[9];
 	const selectedTrace = t2;
 	let t3;
-	if ($[11] !== zoom) {
+	if ($[12] !== zoom) {
 		t3 = () => zoom > 100 && setZoom(_temp6);
-		$[11] = zoom;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[12] = zoom;
+		$[13] = t3;
+	} else t3 = $[13];
 	const zoomMinus = t3;
 	let t4;
-	if ($[13] !== zoom) {
+	if ($[14] !== zoom) {
 		t4 = () => zoom < 200 && setZoom(_temp7);
-		$[13] = zoom;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[14] = zoom;
+		$[15] = t4;
+	} else t4 = $[15];
 	const zoomPlus = t4;
 	if (!group) return null;
 	const t5 = `${zoom}%`;
 	let t6;
-	if ($[15] !== t5) {
+	if ($[16] !== t5) {
 		t6 = { width: t5 };
-		$[15] = t5;
-		$[16] = t6;
-	} else t6 = $[16];
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
 	const t7 = `${zoom}%`;
 	let t8;
-	if ($[17] !== t7) {
+	if ($[18] !== t7) {
 		t8 = { width: t7 };
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
 	const t9 = zoom <= 100;
 	let t10;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
 		t10 = /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4 cursor-pointer" });
-		$[19] = t10;
-	} else t10 = $[19];
+		$[20] = t10;
+	} else t10 = $[20];
 	let t11;
-	if ($[20] !== t9 || $[21] !== zoomMinus) {
+	if ($[21] !== t9 || $[22] !== zoomMinus) {
 		t11 = /* @__PURE__ */ jsx(Button, {
 			variant: "icon",
 			size: "sm",
@@ -1484,27 +1584,27 @@ const TraceTimelineComponent = memo((t0) => {
 			disabled: t9,
 			children: t10
 		});
-		$[20] = t9;
-		$[21] = zoomMinus;
-		$[22] = t11;
-	} else t11 = $[22];
+		$[21] = t9;
+		$[22] = zoomMinus;
+		$[23] = t11;
+	} else t11 = $[23];
 	let t12;
-	if ($[23] !== zoom) {
+	if ($[24] !== zoom) {
 		t12 = /* @__PURE__ */ jsxs("span", {
 			className: "min-w-12 text-center select-none text-sm font-bold text-muted-foreground",
 			children: [zoom, "%"]
 		});
-		$[23] = zoom;
-		$[24] = t12;
-	} else t12 = $[24];
+		$[24] = zoom;
+		$[25] = t12;
+	} else t12 = $[25];
 	const t13 = zoom >= 200;
 	let t14;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
 		t14 = /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 cursor-pointer" });
-		$[25] = t14;
-	} else t14 = $[25];
+		$[26] = t14;
+	} else t14 = $[26];
 	let t15;
-	if ($[26] !== t13 || $[27] !== zoomPlus) {
+	if ($[27] !== t13 || $[28] !== zoomPlus) {
 		t15 = /* @__PURE__ */ jsx(Button, {
 			variant: "icon",
 			size: "sm",
@@ -1513,12 +1613,12 @@ const TraceTimelineComponent = memo((t0) => {
 			disabled: t13,
 			children: t14
 		});
-		$[26] = t13;
-		$[27] = zoomPlus;
-		$[28] = t15;
-	} else t15 = $[28];
+		$[27] = t13;
+		$[28] = zoomPlus;
+		$[29] = t15;
+	} else t15 = $[29];
 	let t16;
-	if ($[29] !== t11 || $[30] !== t12 || $[31] !== t15) {
+	if ($[30] !== t11 || $[31] !== t12 || $[32] !== 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: [
@@ -1527,70 +1627,70 @@ const TraceTimelineComponent = memo((t0) => {
 				t15
 			]
 		});
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t15;
-		$[32] = t16;
-	} else t16 = $[32];
+		$[30] = t11;
+		$[31] = t12;
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
 	let t17;
-	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
 		t17 = /* @__PURE__ */ jsx("span", { children: "0ms" });
-		$[33] = t17;
-	} else t17 = $[33];
+		$[34] = t17;
+	} else t17 = $[34];
 	const t18 = Math.floor((endTime - group.startTime) * .25);
 	let t19;
-	if ($[34] !== t18) {
+	if ($[35] !== t18) {
 		t19 = formatDuration(t18);
-		$[34] = t18;
-		$[35] = t19;
-	} else t19 = $[35];
+		$[35] = t18;
+		$[36] = t19;
+	} else t19 = $[36];
 	let t20;
-	if ($[36] !== t19) {
+	if ($[37] !== t19) {
 		t20 = /* @__PURE__ */ jsx("span", { children: t19 });
-		$[36] = t19;
-		$[37] = t20;
-	} else t20 = $[37];
+		$[37] = t19;
+		$[38] = t20;
+	} else t20 = $[38];
 	const t21 = Math.floor((endTime - group.startTime) * .5);
 	let t22;
-	if ($[38] !== t21) {
+	if ($[39] !== t21) {
 		t22 = formatDuration(t21);
-		$[38] = t21;
-		$[39] = t22;
-	} else t22 = $[39];
+		$[39] = t21;
+		$[40] = t22;
+	} else t22 = $[40];
 	let t23;
-	if ($[40] !== t22) {
+	if ($[41] !== t22) {
 		t23 = /* @__PURE__ */ jsx("span", { children: t22 });
-		$[40] = t22;
-		$[41] = t23;
-	} else t23 = $[41];
+		$[41] = t22;
+		$[42] = t23;
+	} else t23 = $[42];
 	const t24 = Math.floor((endTime - group.startTime) * .75);
 	let t25;
-	if ($[42] !== t24) {
+	if ($[43] !== t24) {
 		t25 = formatDuration(t24);
-		$[42] = t24;
-		$[43] = t25;
-	} else t25 = $[43];
+		$[43] = t24;
+		$[44] = t25;
+	} else t25 = $[44];
 	let t26;
-	if ($[44] !== t25) {
+	if ($[45] !== t25) {
 		t26 = /* @__PURE__ */ jsx("span", { children: t25 });
-		$[44] = t25;
-		$[45] = t26;
-	} else t26 = $[45];
+		$[45] = t25;
+		$[46] = t26;
+	} else t26 = $[46];
 	const t27 = Math.floor(endTime - group.startTime);
 	let t28;
-	if ($[46] !== t27) {
+	if ($[47] !== t27) {
 		t28 = formatDuration(t27);
-		$[46] = t27;
-		$[47] = t28;
-	} else t28 = $[47];
+		$[47] = t27;
+		$[48] = t28;
+	} else t28 = $[48];
 	let t29;
-	if ($[48] !== t28) {
+	if ($[49] !== t28) {
 		t29 = /* @__PURE__ */ jsx("span", { children: t28 });
-		$[48] = t28;
-		$[49] = t29;
-	} else t29 = $[49];
+		$[49] = t28;
+		$[50] = t29;
+	} else t29 = $[50];
 	let t30;
-	if ($[50] !== t20 || $[51] !== t23 || $[52] !== t26 || $[53] !== t29) {
+	if ($[51] !== t20 || $[52] !== t23 || $[53] !== t26 || $[54] !== t29) {
 		t30 = /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card",
 			children: [
@@ -1601,35 +1701,35 @@ const TraceTimelineComponent = memo((t0) => {
 				t29
 			]
 		});
-		$[50] = t20;
-		$[51] = t23;
-		$[52] = t26;
-		$[53] = t29;
-		$[54] = t30;
-	} else t30 = $[54];
+		$[51] = t20;
+		$[52] = t23;
+		$[53] = t26;
+		$[54] = t29;
+		$[55] = t30;
+	} else t30 = $[55];
 	let t31;
-	if ($[55] !== t16 || $[56] !== t30 || $[57] !== t8) {
+	if ($[56] !== t16 || $[57] !== t30 || $[58] !== t8) {
 		t31 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-1 bg-background",
 			style: t8,
 			children: [t16, t30]
 		});
-		$[55] = t16;
-		$[56] = t30;
-		$[57] = t8;
-		$[58] = t31;
-	} else t31 = $[58];
+		$[56] = t16;
+		$[57] = t30;
+		$[58] = t8;
+		$[59] = t31;
+	} else t31 = $[59];
 	const t32 = `${zoom}%`;
 	let t33;
-	if ($[59] !== t32) {
+	if ($[60] !== t32) {
 		t33 = { width: t32 };
-		$[59] = t32;
-		$[60] = t33;
-	} else t33 = $[60];
+		$[60] = t32;
+		$[61] = t33;
+	} else t33 = $[61];
 	let t34;
-	if ($[61] !== endTime || $[62] !== group.startTime || $[63] !== selectTraceId || $[64] !== traces) {
+	if ($[62] !== endTime || $[63] !== group.startTime || $[64] !== selectTraceId || $[65] !== traces) {
 		let t35$1;
-		if ($[66] !== endTime || $[67] !== group.startTime || $[68] !== selectTraceId) {
+		if ($[67] !== endTime || $[68] !== group.startTime || $[69] !== selectTraceId) {
 			t35$1 = (trace_0) => /* @__PURE__ */ jsx(TraceItem, {
 				traceId: trace_0.id,
 				traceName: trace_0.name,
@@ -1640,31 +1740,31 @@ const TraceTimelineComponent = memo((t0) => {
 				groupEndTime: endTime,
 				onExpand: selectTraceId
 			}, trace_0.id);
-			$[66] = endTime;
-			$[67] = group.startTime;
-			$[68] = selectTraceId;
-			$[69] = t35$1;
-		} else t35$1 = $[69];
+			$[67] = endTime;
+			$[68] = group.startTime;
+			$[69] = selectTraceId;
+			$[70] = t35$1;
+		} else t35$1 = $[70];
 		t34 = traces.map(t35$1);
-		$[61] = endTime;
-		$[62] = group.startTime;
-		$[63] = selectTraceId;
-		$[64] = traces;
-		$[65] = t34;
-	} else t34 = $[65];
+		$[62] = endTime;
+		$[63] = group.startTime;
+		$[64] = selectTraceId;
+		$[65] = traces;
+		$[66] = t34;
+	} else t34 = $[66];
 	let t35;
-	if ($[70] !== t33 || $[71] !== t34) {
+	if ($[71] !== t33 || $[72] !== t34) {
 		t35 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col h-full",
 			style: t33,
 			children: t34
 		});
-		$[70] = t33;
-		$[71] = t34;
-		$[72] = t35;
-	} else t35 = $[72];
+		$[71] = t33;
+		$[72] = t34;
+		$[73] = t35;
+	} else t35 = $[73];
 	let t36;
-	if ($[73] !== t31 || $[74] !== t35 || $[75] !== t6) {
+	if ($[74] !== t31 || $[75] !== t35 || $[76] !== t6) {
 		t36 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col flex-1 relative min-h-full min-w-[1000px]",
 			children: /* @__PURE__ */ jsxs("div", {
@@ -1673,28 +1773,28 @@ const TraceTimelineComponent = memo((t0) => {
 				children: [t31, t35]
 			})
 		});
-		$[73] = t31;
-		$[74] = t35;
-		$[75] = t6;
-		$[76] = t36;
-	} else t36 = $[76];
+		$[74] = t31;
+		$[75] = t35;
+		$[76] = t6;
+		$[77] = t36;
+	} else t36 = $[77];
 	let t37;
-	if ($[77] !== selectTraceId || $[78] !== selectedTrace) {
+	if ($[78] !== selectTraceId || $[79] !== selectedTrace) {
 		t37 = selectedTrace && /* @__PURE__ */ jsx(TraceItemDetail, {
 			trace: selectedTrace,
 			onClose: () => selectTraceId(void 0)
 		});
-		$[77] = selectTraceId;
-		$[78] = selectedTrace;
-		$[79] = t37;
-	} else t37 = $[79];
+		$[78] = selectTraceId;
+		$[79] = selectedTrace;
+		$[80] = t37;
+	} else t37 = $[80];
 	let t38;
-	if ($[80] !== t36 || $[81] !== t37) {
+	if ($[81] !== t36 || $[82] !== t37) {
 		t38 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t36, t37] });
-		$[80] = t36;
-		$[81] = t37;
-		$[82] = t38;
-	} else t38 = $[82];
+		$[81] = t36;
+		$[82] = t37;
+		$[83] = t38;
+	} else t38 = $[83];
 	return t38;
 });
 TraceTimelineComponent.displayName = "TraceTimelineComponent";
@@ -1702,9 +1802,9 @@ function _temp$3(state) {
 	return state.selectedTraceGroupId;
 }
 function _temp2$1(state) {
-	return state.traceGroups;
+	return state.traceGroupMetas;
 }
-function _temp3(state_0) {
+function _temp3$1(state_0) {
 	return state_0.traces;
 }
 function _temp4(state_1) {
@@ -1723,33 +1823,58 @@ function _temp7(prevZoom_0) {
 //#endregion
 //#region src/hooks/use-filtered-trace-groups.ts
 const useFilteredTraceGroups = () => {
-	const $ = c(6);
-	if ($[0] !== "bb7b5a50ebd354ac1177c12afa033e3545018c14fe033f5ea4551df3bbda5965") {
-		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "bb7b5a50ebd354ac1177c12afa033e3545018c14fe033f5ea4551df3bbda5965";
+	const $ = c(9);
+	if ($[0] !== "ec346c037792c603f78bfd5665c2f837f63d92d06f90a3f8a121adc9dc036808") {
+		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ec346c037792c603f78bfd5665c2f837f63d92d06f90a3f8a121adc9dc036808";
 	}
-	const traceGroups = useObservabilityStore(_temp$2);
-	const search = useObservabilityStore(_temp2);
+	const traceGroupMetas = useObservabilityStore(_temp$2);
+	const tracesByGroupId = useObservabilityStore(_temp2);
+	const search = useObservabilityStore(_temp3);
 	let t0;
-	if ($[1] !== search || $[2] !== traceGroups) {
+	if ($[1] !== search || $[2] !== traceGroupMetas || $[3] !== tracesByGroupId) {
 		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);
+		if ($[5] !== tracesByGroupId) {
+			t1 = (meta) => {
+				const traces = tracesByGroupId[meta.id] || [];
+				if (traces.length === 0) return {
+					...meta,
+					status: "running",
+					lastActivity: meta.startTime,
+					metadata: {
+						completedSteps: 0,
+						activeSteps: 0,
+						totalSteps: 0
+					}
+				};
+				return deriveTraceGroup(meta, traces);
+			};
+			$[5] = tracesByGroupId;
+			$[6] = t1;
+		} else t1 = $[6];
+		const traceGroups = traceGroupMetas.map(t1);
+		let t2;
+		if ($[7] !== search) {
+			t2 = (group) => group.name.toLowerCase().includes(search.toLowerCase()) || group.id.toLowerCase().includes(search.toLowerCase());
+			$[7] = search;
+			$[8] = t2;
+		} else t2 = $[8];
+		t0 = traceGroups.filter(t2);
 		$[1] = search;
-		$[2] = traceGroups;
-		$[3] = t0;
-	} else t0 = $[3];
+		$[2] = traceGroupMetas;
+		$[3] = tracesByGroupId;
+		$[4] = t0;
+	} else t0 = $[4];
 	return t0;
 };
 function _temp$2(state) {
-	return state.traceGroups;
+	return state.traceGroupMetas;
 }
 function _temp2(state_0) {
-	return state_0.search;
+	return state_0.tracesByGroupId;
+}
+function _temp3(state_1) {
+	return state_1.search;
 }
 
 //#endregion
@@ -1758,9 +1883,9 @@ const streamName = "motia-trace-group";
 const groupId = "default";
 const useTraceGroupsStream = () => {
 	const $ = c(3);
-	if ($[0] !== "29d24a963c5c777c79f8ec82ca3d5f2b5d6812171a1a0298772d1c34c99549aa") {
+	if ($[0] !== "a55cc63ac3227553bdabe16419e817ac4d448fdd9e3663a994c2e53ebc24d222") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "29d24a963c5c777c79f8ec82ca3d5f2b5d6812171a1a0298772d1c34c99549aa";
+		$[0] = "a55cc63ac3227553bdabe16419e817ac4d448fdd9e3663a994c2e53ebc24d222";
 	}
 	const setData = useObservabilityStore(_temp$1);
 	let t0;
@@ -1776,7 +1901,7 @@ const useTraceGroupsStream = () => {
 	useStreamGroup(t0);
 };
 function _temp$1(state) {
-	return state.setTraceGroups;
+	return state.setTraceGroupMetas;
 }
 
 //#endregion