@motiadev/plugin-observability 0.8.2-beta.140-364012 → 0.8.2-beta.140-709523

package/dist/index.js

@@ -1,7 +1,10 @@
-import C, { forwardRef as de, createElement as X, useState as G, useEffect as ue, memo as D, useMemo as J } from "react";
-import { useStreamItem as Se, useStreamGroup as me } from "@motiadev/stream-client-react";
-import { cn as U, LevelDot as Pe, Sidebar as Re, Badge as fe, Button as q, Input as Ce } from "@motiadev/ui";
-var A = { exports: {} }, E = {};
+import xe, { useState as C, useEffect as Z, memo as N, useMemo as F } from "react";
+import { useStreamItem as pe, useStreamGroup as H } from "@motiadev/stream-client-react";
+import { cn as D, LevelDot as he, Sidebar as je, Badge as Q, Button as P, Input as be } from "@motiadev/ui";
+import { ScrollText as ve, MessageCircle as ge, Package as Te, Radio as Ne, X as K, Minus as Ee, Plus as we, Search as _e, Trash as ke, GanttChart as Re } from "lucide-react";
+import { create as ye } from "zustand";
+import { formatDistanceToNow as Se } from "date-fns";
+var w = { exports: {} }, g = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -11,29 +14,29 @@ var A = { exports: {} }, E = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var re;
-function De() {
-  if (re) return E;
-  re = 1;
-  var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function r(a, o, c) {
-    var l = null;
-    if (c !== void 0 && (l = "" + c), o.key !== void 0 && (l = "" + o.key), "key" in o) {
-      c = {};
-      for (var i in o)
-        i !== "key" && (c[i] = o[i]);
-    } else c = o;
-    return o = c.ref, {
-      $$typeof: e,
+var J;
+function Oe() {
+  if (J) return g;
+  J = 1;
+  var r = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
+  function l(a, o, u) {
+    var x = null;
+    if (u !== void 0 && (x = "" + u), o.key !== void 0 && (x = "" + o.key), "key" in o) {
+      u = {};
+      for (var d in o)
+        d !== "key" && (u[d] = o[d]);
+    } else u = o;
+    return o = u.ref, {
+      $$typeof: r,
       type: a,
-      key: l,
+      key: x,
       ref: o !== void 0 ? o : null,
-      props: c
+      props: u
     };
   }
-  return E.Fragment = t, E.jsx = r, E.jsxs = r, E;
+  return g.Fragment = s, g.jsx = l, g.jsxs = l, g;
 }
-var S = {};
+var T = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -43,1260 +46,477 @@ var S = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ae;
+var V;
 function Ae() {
-  return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(s) {
-      if (s == null) return null;
-      if (typeof s == "function")
-        return s.$$typeof === Me ? null : s.displayName || s.name || null;
-      if (typeof s == "string") return s;
-      switch (s) {
-        case M:
+  return V || (V = 1, process.env.NODE_ENV !== "production" && function() {
+    function r(t) {
+      if (t == null) return null;
+      if (typeof t == "function")
+        return t.$$typeof === ue ? null : t.displayName || t.name || null;
+      if (typeof t == "string") return t;
+      switch (t) {
+        case R:
           return "Fragment";
-        case ge:
+        case se:
           return "Profiler";
-        case be:
+        case te:
           return "StrictMode";
-        case we:
+        case le:
           return "Suspense";
-        case Ne:
+        case ie:
           return "SuspenseList";
-        case ke:
+        case de:
           return "Activity";
       }
-      if (typeof s == "object")
-        switch (typeof s.tag == "number" && console.error(
+      if (typeof t == "object")
+        switch (typeof t.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), s.$$typeof) {
-          case j:
+        ), t.$$typeof) {
+          case re:
             return "Portal";
-          case ye:
-            return (s.displayName || "Context") + ".Provider";
-          case ve:
-            return (s._context.displayName || "Context") + ".Consumer";
-          case je:
-            var d = s.render;
-            return s = s.displayName, s || (s = d.displayName || d.name || "", s = s !== "" ? "ForwardRef(" + s + ")" : "ForwardRef"), s;
-          case Te:
-            return d = s.displayName || null, d !== null ? d : e(s.type) || "Memo";
-          case H:
-            d = s._payload, s = s._init;
+          case ne:
+            return (t.displayName || "Context") + ".Provider";
+          case ae:
+            return (t._context.displayName || "Context") + ".Consumer";
+          case oe:
+            var n = t.render;
+            return t = t.displayName, t || (t = n.displayName || n.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case ce:
+            return n = t.displayName || null, n !== null ? n : r(t.type) || "Memo";
+          case L:
+            n = t._payload, t = t._init;
             try {
-              return e(s(d));
+              return r(t(n));
             } catch {
             }
         }
       return null;
     }
-    function t(s) {
-      return "" + s;
+    function s(t) {
+      return "" + t;
     }
-    function r(s) {
+    function l(t) {
       try {
-        t(s);
-        var d = !1;
+        s(t);
+        var n = !1;
       } catch {
-        d = !0;
+        n = !0;
       }
-      if (d) {
-        d = console;
-        var f = d.error, b = typeof Symbol == "function" && Symbol.toStringTag && s[Symbol.toStringTag] || s.constructor.name || "Object";
-        return f.call(
-          d,
+      if (n) {
+        n = console;
+        var c = n.error, m = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
+        return c.call(
+          n,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          b
-        ), t(s);
+          m
+        ), s(t);
       }
     }
-    function a(s) {
-      if (s === M) return "<>";
-      if (typeof s == "object" && s !== null && s.$$typeof === H)
+    function a(t) {
+      if (t === R) return "<>";
+      if (typeof t == "object" && t !== null && t.$$typeof === L)
         return "<...>";
       try {
-        var d = e(s);
-        return d ? "<" + d + ">" : "<...>";
+        var n = r(t);
+        return n ? "<" + n + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function o() {
-      var s = W.A;
-      return s === null ? null : s.getOwner();
+      var t = y.A;
+      return t === null ? null : t.getOwner();
     }
-    function c() {
+    function u() {
       return Error("react-stack-top-frame");
     }
-    function l(s) {
-      if (Q.call(s, "key")) {
-        var d = Object.getOwnPropertyDescriptor(s, "key").get;
-        if (d && d.isReactWarning) return !1;
+    function x(t) {
+      if (Y.call(t, "key")) {
+        var n = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (n && n.isReactWarning) return !1;
       }
-      return s.key !== void 0;
+      return t.key !== void 0;
     }
-    function i(s, d) {
-      function f() {
-        Z || (Z = !0, console.error(
+    function d(t, n) {
+      function c() {
+        z || (z = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          d
+          n
         ));
       }
-      f.isReactWarning = !0, Object.defineProperty(s, "key", {
-        get: f,
+      c.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: c,
         configurable: !0
       });
     }
-    function u() {
-      var s = e(this.type);
-      return K[s] || (K[s] = !0, console.error(
+    function i() {
+      var t = r(this.type);
+      return W[t] || (W[t] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), s = this.props.ref, s !== void 0 ? s : null;
+      )), t = this.props.ref, t !== void 0 ? t : null;
     }
-    function m(s, d, f, b, T, w, L, Y) {
-      return f = w.ref, s = {
-        $$typeof: y,
-        type: s,
-        key: d,
-        props: w,
-        _owner: T
-      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(s, "ref", {
+    function k(t, n, c, m, j, h, O, A) {
+      return c = h.ref, t = {
+        $$typeof: G,
+        type: t,
+        key: n,
+        props: h,
+        _owner: j
+      }, (c !== void 0 ? c : null) !== null ? Object.defineProperty(t, "ref", {
         enumerable: !1,
-        get: u
-      }) : Object.defineProperty(s, "ref", { enumerable: !1, value: null }), s._store = {}, Object.defineProperty(s._store, "validated", {
+        get: i
+      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(s, "_debugInfo", {
+      }), Object.defineProperty(t, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(s, "_debugStack", {
+      }), Object.defineProperty(t, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: L
-      }), Object.defineProperty(s, "_debugTask", {
+        value: O
+      }), Object.defineProperty(t, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Y
-      }), Object.freeze && (Object.freeze(s.props), Object.freeze(s)), s;
+        value: A
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
     }
-    function x(s, d, f, b, T, w, L, Y) {
-      var g = d.children;
-      if (g !== void 0)
-        if (b)
-          if (_e(g)) {
-            for (b = 0; b < g.length; b++)
-              v(g[b]);
-            Object.freeze && Object.freeze(g);
+    function p(t, n, c, m, j, h, O, A) {
+      var f = n.children;
+      if (f !== void 0)
+        if (m)
+          if (me(f)) {
+            for (m = 0; m < f.length; m++)
+              M(f[m]);
+            Object.freeze && Object.freeze(f);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else v(g);
-      if (Q.call(d, "key")) {
-        g = e(s);
-        var _ = Object.keys(d).filter(function(Ee) {
-          return Ee !== "key";
+        else M(f);
+      if (Y.call(n, "key")) {
+        f = r(t);
+        var v = Object.keys(n).filter(function(fe) {
+          return fe !== "key";
         });
-        b = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", ne[g + b] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+        m = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", q[f + m] || (v = 0 < v.length ? "{" + v.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          b,
-          g,
-          _,
-          g
-        ), ne[g + b] = !0);
+          m,
+          f,
+          v,
+          f
+        ), q[f + m] = !0);
       }
-      if (g = null, f !== void 0 && (r(f), g = "" + f), l(d) && (r(d.key), g = "" + d.key), "key" in d) {
-        f = {};
-        for (var V in d)
-          V !== "key" && (f[V] = d[V]);
-      } else f = d;
-      return g && i(
+      if (f = null, c !== void 0 && (l(c), f = "" + c), x(n) && (l(n.key), f = "" + n.key), "key" in n) {
+        c = {};
+        for (var I in n)
+          I !== "key" && (c[I] = n[I]);
+      } else c = n;
+      return f && d(
+        c,
+        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
+      ), k(
+        t,
         f,
-        typeof s == "function" ? s.displayName || s.name || "Unknown" : s
-      ), m(
-        s,
-        g,
-        w,
-        T,
+        h,
+        j,
         o(),
-        f,
-        L,
-        Y
+        c,
+        O,
+        A
       );
     }
-    function v(s) {
-      typeof s == "object" && s !== null && s.$$typeof === y && s._store && (s._store.validated = 1);
+    function M(t) {
+      typeof t == "object" && t !== null && t.$$typeof === G && t._store && (t._store.validated = 1);
     }
-    var h = C, y = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), M = Symbol.for("react.fragment"), be = Symbol.for("react.strict_mode"), ge = Symbol.for("react.profiler"), ve = Symbol.for("react.consumer"), ye = Symbol.for("react.context"), je = Symbol.for("react.forward_ref"), we = Symbol.for("react.suspense"), Ne = Symbol.for("react.suspense_list"), Te = Symbol.for("react.memo"), H = Symbol.for("react.lazy"), ke = Symbol.for("react.activity"), Me = Symbol.for("react.client.reference"), W = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, _e = Array.isArray, $ = console.createTask ? console.createTask : function() {
+    var E = xe, G = Symbol.for("react.transitional.element"), re = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), te = Symbol.for("react.strict_mode"), se = Symbol.for("react.profiler"), ae = Symbol.for("react.consumer"), ne = Symbol.for("react.context"), oe = Symbol.for("react.forward_ref"), le = Symbol.for("react.suspense"), ie = Symbol.for("react.suspense_list"), ce = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), de = Symbol.for("react.activity"), ue = Symbol.for("react.client.reference"), y = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, me = Array.isArray, S = console.createTask ? console.createTask : function() {
       return null;
     };
-    h = {
-      react_stack_bottom_frame: function(s) {
-        return s();
+    E = {
+      react_stack_bottom_frame: function(t) {
+        return t();
       }
     };
-    var Z, K = {}, ee = h.react_stack_bottom_frame.bind(
-      h,
-      c
-    )(), te = $(a(c)), ne = {};
-    S.Fragment = M, S.jsx = function(s, d, f, b, T) {
-      var w = 1e4 > W.recentlyCreatedOwnerStacks++;
-      return x(
-        s,
-        d,
-        f,
+    var z, W = {}, U = E.react_stack_bottom_frame.bind(
+      E,
+      u
+    )(), B = S(a(u)), q = {};
+    T.Fragment = R, T.jsx = function(t, n, c, m, j) {
+      var h = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return p(
+        t,
+        n,
+        c,
         !1,
-        b,
-        T,
-        w ? Error("react-stack-top-frame") : ee,
-        w ? $(a(s)) : te
+        m,
+        j,
+        h ? Error("react-stack-top-frame") : U,
+        h ? S(a(t)) : B
       );
-    }, S.jsxs = function(s, d, f, b, T) {
-      var w = 1e4 > W.recentlyCreatedOwnerStacks++;
-      return x(
-        s,
-        d,
-        f,
+    }, T.jsxs = function(t, n, c, m, j) {
+      var h = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return p(
+        t,
+        n,
+        c,
         !0,
-        b,
-        T,
-        w ? Error("react-stack-top-frame") : ee,
-        w ? $(a(s)) : te
+        m,
+        j,
+        h ? Error("react-stack-top-frame") : U,
+        h ? S(a(t)) : B
       );
     };
-  }()), S;
+  }()), T;
 }
-var se;
-function Oe() {
-  return se || (se = 1, process.env.NODE_ENV === "production" ? A.exports = De() : A.exports = Ae()), A.exports;
+var X;
+function Ie() {
+  return X || (X = 1, process.env.NODE_ENV === "production" ? w.exports = Oe() : w.exports = Ae()), w.exports;
 }
-var n = Oe();
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Ie = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Fe = (e) => e.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (t, r, a) => a ? a.toUpperCase() : r.toLowerCase()
-), oe = (e) => {
-  const t = Fe(e);
-  return t.charAt(0).toUpperCase() + t.slice(1);
-}, he = (...e) => e.filter((t, r, a) => !!t && t.trim() !== "" && a.indexOf(t) === r).join(" ").trim(), We = (e) => {
-  for (const t in e)
-    if (t.startsWith("aria-") || t === "role" || t === "title")
-      return !0;
-};
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var $e = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Le = de(
-  ({
-    color: e = "currentColor",
-    size: t = 24,
-    strokeWidth: r = 2,
-    absoluteStrokeWidth: a,
-    className: o = "",
-    children: c,
-    iconNode: l,
-    ...i
-  }, u) => X(
-    "svg",
-    {
-      ref: u,
-      ...$e,
-      width: t,
-      height: t,
-      stroke: e,
-      strokeWidth: a ? Number(r) * 24 / Number(t) : r,
-      className: he("lucide", o),
-      ...!c && !We(i) && { "aria-hidden": "true" },
-      ...i
-    },
-    [
-      ...l.map(([m, x]) => X(m, x)),
-      ...Array.isArray(c) ? c : [c]
-    ]
-  )
-);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const N = (e, t) => {
-  const r = de(
-    ({ className: a, ...o }, c) => X(Le, {
-      ref: c,
-      iconNode: t,
-      className: he(
-        `lucide-${Ie(oe(e))}`,
-        `lucide-${e}`,
-        a
-      ),
-      ...o
-    })
-  );
-  return r.displayName = oe(e), r;
-};
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Ye = [
-  ["path", { d: "M6 5h12", key: "fvfigv" }],
-  ["path", { d: "M4 12h10", key: "oujl3d" }],
-  ["path", { d: "M12 19h8", key: "baeox8" }]
-], Ve = N("chart-no-axes-gantt", Ye);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const ze = [
-  [
-    "path",
-    {
-      d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
-      key: "1sd12s"
-    }
-  ]
-], Xe = N("message-circle", ze);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const qe = [["path", { d: "M5 12h14", key: "1ays0h" }]], Ge = N("minus", qe);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Je = [
-  [
-    "path",
-    {
-      d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z",
-      key: "1a0edw"
-    }
-  ],
-  ["path", { d: "M12 22V12", key: "d0xqtd" }],
-  ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
-  ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
-], Ue = N("package", Je);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Be = [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
-], He = N("plus", Be);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Qe = [
-  ["path", { d: "M16.247 7.761a6 6 0 0 1 0 8.478", key: "1fwjs5" }],
-  ["path", { d: "M19.075 4.933a10 10 0 0 1 0 14.134", key: "ehdyv1" }],
-  ["path", { d: "M4.925 19.067a10 10 0 0 1 0-14.134", key: "1q22gi" }],
-  ["path", { d: "M7.753 16.239a6 6 0 0 1 0-8.478", key: "r2q7qm" }],
-  ["circle", { cx: "12", cy: "12", r: "2", key: "1c9p78" }]
-], Ze = N("radio", Qe);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Ke = [
-  ["path", { d: "M15 12h-5", key: "r7krc0" }],
-  ["path", { d: "M15 8h-5", key: "1khuty" }],
-  ["path", { d: "M19 17V5a2 2 0 0 0-2-2H4", key: "zz82l3" }],
-  [
-    "path",
-    {
-      d: "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3",
-      key: "1ph1d7"
-    }
-  ]
-], et = N("scroll-text", Ke);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const tt = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], nt = N("search", tt);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const rt = [
-  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
-  ["path", { d: "M3 6h18", key: "d0wm0j" }],
-  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
-], at = N("trash", rt);
-/**
- * @license lucide-react v0.545.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const st = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], xe = N("x", st), ie = (e) => {
-  let t;
-  const r = /* @__PURE__ */ new Set(), a = (m, x) => {
-    const v = typeof m == "function" ? m(t) : m;
-    if (!Object.is(v, t)) {
-      const h = t;
-      t = x ?? (typeof v != "object" || v === null) ? v : Object.assign({}, t, v), r.forEach((y) => y(t, h));
-    }
-  }, o = () => t, i = { setState: a, getState: o, getInitialState: () => u, subscribe: (m) => (r.add(m), () => r.delete(m)) }, u = t = e(a, o, i);
-  return i;
-}, ot = (e) => e ? ie(e) : ie, it = (e) => e;
-function ct(e, t = it) {
-  const r = C.useSyncExternalStore(
-    e.subscribe,
-    C.useCallback(() => t(e.getState()), [e, t]),
-    C.useCallback(() => t(e.getInitialState()), [e, t])
-  );
-  return C.useDebugValue(r), r;
-}
-const lt = (e) => {
-  const t = ot(e), r = (a) => ct(t, a);
-  return Object.assign(r, t), r;
-}, dt = (e) => lt, F = dt()((e) => ({
+var e = Ie();
+const _ = ye()((r) => ({
   selectedTraceGroupId: void 0,
   selectedTraceId: void 0,
-  selectTraceGroupId: (t) => e({ selectedTraceGroupId: t }),
-  selectTraceId: (t) => e({ selectedTraceId: t })
-})), ut = (e) => {
-  const t = e?.endTime, [r, a] = G(t || Date.now());
-  return ue(() => {
-    if (t)
-      a(t);
+  selectTraceGroupId: (s) => r({ selectedTraceGroupId: s }),
+  selectTraceId: (s) => r({ selectedTraceId: s })
+})), Pe = (r) => {
+  const s = r?.endTime, [l, a] = C(s || Date.now());
+  return Z(() => {
+    if (s)
+      a(s);
     else {
       const o = setInterval(() => a(Date.now()), 50);
       return () => clearInterval(o);
     }
-  }, [t]), r;
-}, k = (e) => e == null ? "N/A" : e < 1e3 ? `${e}ms` : e < 6e4 ? `${(e / 1e3).toFixed(1)}s` : e < 36e5 ? `${(e / 6e4).toFixed(1)}min` : `${(e / 36e5).toFixed(1)}h`, mt = ({ trace: e, group: t, groupEndTime: r, onExpand: a }) => /* @__PURE__ */ n.jsxs(
+  }, [s]), l;
+}, b = (r) => r == null ? "N/A" : r < 1e3 ? `${r}ms` : r < 6e4 ? `${(r / 1e3).toFixed(1)}s` : r < 36e5 ? `${(r / 6e4).toFixed(1)}min` : `${(r / 36e5).toFixed(1)}h`, Ce = ({ trace: r, group: s, groupEndTime: l, onExpand: a }) => /* @__PURE__ */ e.jsxs(
   "div",
   {
     className: "flex hover:bg-muted-foreground/10 relative cursor-pointer",
-    onClick: () => a(e.id),
+    onClick: () => a(r.id),
     "data-testid": "trace-timeline-item",
     children: [
-      /* @__PURE__ */ n.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: e.name }),
-      /* @__PURE__ */ n.jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", children: /* @__PURE__ */ n.jsx("div", { className: "relative w-full h-[32px] flex items-center", children: /* @__PURE__ */ n.jsx(
+      /* @__PURE__ */ e.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: r.name }),
+      /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", children: /* @__PURE__ */ e.jsx("div", { className: "relative w-full h-[32px] flex items-center", children: /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: U("h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200", {
-            "bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]": e.status === "running",
-            "bg-[repeating-linear-gradient(140deg,#2862FE,#2862FE_8px,#2358E5_8px,#2358E5_16px)]": e.status === "completed",
-            "bg-[repeating-linear-gradient(140deg,#EA2069,#EA2069_8px,#D41E60_8px,#D41E60_16px)]": e.status === "failed"
+          className: D("h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200", {
+            "bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]": r.status === "running",
+            "bg-[repeating-linear-gradient(140deg,#2862FE,#2862FE_8px,#2358E5_8px,#2358E5_16px)]": r.status === "completed",
+            "bg-[repeating-linear-gradient(140deg,#EA2069,#EA2069_8px,#D41E60_8px,#D41E60_16px)]": r.status === "failed"
           }),
           style: {
-            marginLeft: `${(e.startTime - t.startTime) / (r - t.startTime) * 100}%`,
-            width: e.endTime ? `${(e.endTime - e.startTime) / (r - t.startTime) * 100}%` : `${(Date.now() - e.startTime) / (r - t.startTime) * 100}%`
+            marginLeft: `${(r.startTime - s.startTime) / (l - s.startTime) * 100}%`,
+            width: r.endTime ? `${(r.endTime - r.startTime) / (l - s.startTime) * 100}%` : `${(Date.now() - r.startTime) / (l - s.startTime) * 100}%`
           }
         }
       ) }) })
     ]
   }
-), ft = ({ event: e }) => {
-  if (e.type === "log")
-    return /* @__PURE__ */ n.jsx(et, { className: "w-4 h-4 text-muted-foreground" });
-  if (e.type === "emit")
-    return /* @__PURE__ */ n.jsx(Xe, { className: "w-4 h-4 text-muted-foreground" });
-  if (e.type === "state")
-    return /* @__PURE__ */ n.jsx(Ue, { className: "w-4 h-4 text-muted-foreground" });
-  if (e.type === "stream")
-    return /* @__PURE__ */ n.jsx(Ze, { className: "w-4 h-4 text-muted-foreground" });
-}, pe = ({ arg: e }) => {
-  if (typeof e == "string")
-    return /* @__PURE__ */ n.jsxs("span", { className: "font-mono text-blue-500", children: [
+), Fe = ({ event: r }) => {
+  if (r.type === "log")
+    return /* @__PURE__ */ e.jsx(ve, { className: "w-4 h-4 text-muted-foreground" });
+  if (r.type === "emit")
+    return /* @__PURE__ */ e.jsx(ge, { className: "w-4 h-4 text-muted-foreground" });
+  if (r.type === "state")
+    return /* @__PURE__ */ e.jsx(Te, { className: "w-4 h-4 text-muted-foreground" });
+  if (r.type === "stream")
+    return /* @__PURE__ */ e.jsx(Ne, { className: "w-4 h-4 text-muted-foreground" });
+}, ee = ({ arg: r }) => {
+  if (typeof r == "string")
+    return /* @__PURE__ */ e.jsxs("span", { className: "font-mono text-blue-500", children: [
       "'",
-      e,
+      r,
       "'"
     ] });
-  if (e === !1)
-    return /* @__PURE__ */ n.jsx("span", { className: "font-mono text-blue-100 font-bold bg-blue-500/50 px-2 rounded-md", children: "value" });
-  const t = Object.entries(e);
-  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    /* @__PURE__ */ n.jsx("span", { className: "font-mono text-green-500", children: "{ " }),
-    t.map(([r, a], o) => /* @__PURE__ */ n.jsxs("span", { children: [
-      /* @__PURE__ */ n.jsx("span", { className: "font-mono text-green-500", children: r }),
-      /* @__PURE__ */ n.jsx("span", { className: "font-mono text-muted-foreground", children: ":" }),
+  if (r === !1)
+    return /* @__PURE__ */ e.jsx("span", { className: "font-mono text-blue-100 font-bold bg-blue-500/50 px-2 rounded-md", children: "value" });
+  const s = Object.entries(r);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("span", { className: "font-mono text-green-500", children: "{ " }),
+    s.map(([l, a], o) => /* @__PURE__ */ e.jsxs("span", { children: [
+      /* @__PURE__ */ e.jsx("span", { className: "font-mono text-green-500", children: l }),
+      /* @__PURE__ */ e.jsx("span", { className: "font-mono text-muted-foreground", children: ":" }),
       " ",
-      /* @__PURE__ */ n.jsx(pe, { arg: a }),
-      o < t.length - 1 && /* @__PURE__ */ n.jsx(n.Fragment, { children: ", " })
-    ] }, r)),
-    /* @__PURE__ */ n.jsx("span", { className: "font-mono text-green-500", children: " }" })
+      /* @__PURE__ */ e.jsx(ee, { arg: a }),
+      o < s.length - 1 && /* @__PURE__ */ e.jsx(e.Fragment, { children: ", " })
+    ] }, l)),
+    /* @__PURE__ */ e.jsx("span", { className: "font-mono text-green-500", children: " }" })
   ] });
-}, B = ({ topLevelClassName: e, objectName: t, functionName: r, args: a, callsQuantity: o }) => {
-  const c = o && o > 1, l = a.filter((i) => i !== void 0);
-  return /* @__PURE__ */ n.jsxs("div", { children: [
-    e && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsx("span", { className: "font-mono text-pink-500", children: e }),
+}, $ = ({ topLevelClassName: r, objectName: s, functionName: l, args: a, callsQuantity: o }) => {
+  const u = o && o > 1, x = a.filter((d) => d !== void 0);
+  return /* @__PURE__ */ e.jsxs("div", { children: [
+    r && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("span", { className: "font-mono text-pink-500", children: r }),
       "."
     ] }),
-    t && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-      /* @__PURE__ */ n.jsx("span", { className: "font-mono text-pink-500", children: t }),
+    s && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("span", { className: "font-mono text-pink-500", children: s }),
       "."
     ] }),
-    /* @__PURE__ */ n.jsx("span", { className: "font-mono text-pink-500", children: r }),
-    /* @__PURE__ */ n.jsx("span", { className: "font-mono text-emerald-500", children: "(" }),
-    l.map((i, u) => /* @__PURE__ */ n.jsxs("span", { children: [
-      /* @__PURE__ */ n.jsx(pe, { arg: i }),
-      u < l.length - 1 && /* @__PURE__ */ n.jsx(n.Fragment, { children: ", " })
-    ] }, u)),
-    /* @__PURE__ */ n.jsx("span", { className: "font-mono text-emerald-500", children: ")" }),
-    c && /* @__PURE__ */ n.jsxs("span", { className: "font-mono text-muted-foreground", children: [
+    /* @__PURE__ */ e.jsx("span", { className: "font-mono text-pink-500", children: l }),
+    /* @__PURE__ */ e.jsx("span", { className: "font-mono text-emerald-500", children: "(" }),
+    x.map((d, i) => /* @__PURE__ */ e.jsxs("span", { children: [
+      /* @__PURE__ */ e.jsx(ee, { arg: d }),
+      i < x.length - 1 && /* @__PURE__ */ e.jsx(e.Fragment, { children: ", " })
+    ] }, i)),
+    /* @__PURE__ */ e.jsx("span", { className: "font-mono text-emerald-500", children: ")" }),
+    u && /* @__PURE__ */ e.jsxs("span", { className: "font-mono text-muted-foreground", children: [
       " x",
       o
     ] })
   ] });
-}, ht = ({ event: e }) => /* @__PURE__ */ n.jsx(B, { functionName: "emit", args: [{ topic: e.topic, data: !1 }] }), xt = ({ event: e }) => /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ n.jsx(Pe, { level: e.level }),
+}, De = ({ event: r }) => /* @__PURE__ */ e.jsx($, { functionName: "emit", args: [{ topic: r.topic, data: !1 }] }), $e = ({ event: r }) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ e.jsx(he, { level: r.level }),
   " ",
-  e.message
-] }), pt = ({ event: e }) => /* @__PURE__ */ n.jsx(
-  B,
+  r.message
+] }), Me = ({ event: r }) => /* @__PURE__ */ e.jsx(
+  $,
   {
     objectName: "state",
-    functionName: e.operation,
-    args: [e.data.traceId, e.data.key, e.data.value ? !1 : void 0]
+    functionName: r.operation,
+    args: [r.data.traceId, r.data.key, r.data.value ? !1 : void 0]
   }
-), bt = ({ event: e }) => /* @__PURE__ */ n.jsx(
-  B,
+), Ge = ({ event: r }) => /* @__PURE__ */ e.jsx(
+  $,
   {
     topLevelClassName: "streams",
-    objectName: e.streamName,
-    functionName: e.operation,
-    args: [e.data.groupId, e.data.id, e.data.data ? !1 : void 0],
-    callsQuantity: e.calls
+    objectName: r.streamName,
+    functionName: r.operation,
+    args: [r.data.groupId, r.data.id, r.data.data ? !1 : void 0],
+    callsQuantity: r.calls
   }
-), gt = D(({ event: e }) => {
-  if (e.type === "log")
-    return /* @__PURE__ */ n.jsx(xt, { event: e });
-  if (e.type === "emit")
-    return /* @__PURE__ */ n.jsx(ht, { event: e });
-  if (e.type === "state")
-    return /* @__PURE__ */ n.jsx(pt, { event: e });
-  if (e.type === "stream")
-    return /* @__PURE__ */ n.jsx(bt, { event: e });
-}), vt = D(({ trace: e, onClose: t }) => /* @__PURE__ */ n.jsxs(
-  Re,
+), Le = N(({ event: r }) => {
+  if (r.type === "log")
+    return /* @__PURE__ */ e.jsx($e, { event: r });
+  if (r.type === "emit")
+    return /* @__PURE__ */ e.jsx(De, { event: r });
+  if (r.type === "state")
+    return /* @__PURE__ */ e.jsx(Me, { event: r });
+  if (r.type === "stream")
+    return /* @__PURE__ */ e.jsx(Ge, { event: r });
+}), Ye = N(({ trace: r, onClose: s }) => /* @__PURE__ */ e.jsxs(
+  je,
   {
-    onClose: t,
+    onClose: s,
     title: "Trace Details",
-    subtitle: `Viewing details from step ${e.name}`,
-    actions: [{ icon: /* @__PURE__ */ n.jsx(xe, {}), onClick: t, label: "Close" }],
+    subtitle: `Viewing details from step ${r.name}`,
+    actions: [{ icon: /* @__PURE__ */ e.jsx(K, {}), onClick: s, label: "Close" }],
     children: [
-      /* @__PURE__ */ n.jsxs("div", { className: "px-2 w-[800px] overflow-auto", children: [
-        /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground mb-4", children: [
-          e.endTime && /* @__PURE__ */ n.jsxs("span", { children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "px-2 w-[800px] overflow-auto", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground mb-4", children: [
+          r.endTime && /* @__PURE__ */ e.jsxs("span", { children: [
             "Duration: ",
-            k(e.endTime - e.startTime)
+            b(r.endTime - r.startTime)
           ] }),
-          /* @__PURE__ */ n.jsx("div", { className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100", children: e.entryPoint.type }),
-          e.correlationId && /* @__PURE__ */ n.jsxs(fe, { variant: "outline", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100", children: r.entryPoint.type }),
+          r.correlationId && /* @__PURE__ */ e.jsxs(Q, { variant: "outline", children: [
             "Correlated: ",
-            e.correlationId
+            r.correlationId
           ] })
         ] }),
-        /* @__PURE__ */ n.jsx("div", { className: "pl-6 border-l-1 border-gray-500/40 font-mono text-xs flex flex-col gap-3", children: e.events.map((r, a) => /* @__PURE__ */ n.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ n.jsx("div", { className: "absolute -left-[26px] top-[8px] w-1 h-1 rounded-full bg-emerald-500 outline outline-2 outline-emerald-500/50" }),
-          /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ n.jsx(ft, { event: r }),
-            /* @__PURE__ */ n.jsxs("span", { className: "text-sm font-mono text-muted-foreground", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "pl-6 border-l-1 border-gray-500/40 font-mono text-xs flex flex-col gap-3", children: r.events.map((l, a) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "absolute -left-[26px] top-[8px] w-1 h-1 rounded-full bg-emerald-500 outline outline-2 outline-emerald-500/50" }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsx(Fe, { event: l }),
+            /* @__PURE__ */ e.jsxs("span", { className: "text-sm font-mono text-muted-foreground", children: [
               "+",
-              k(Math.floor(r.timestamp - e.startTime))
+              b(Math.floor(l.timestamp - r.startTime))
             ] }),
-            /* @__PURE__ */ n.jsx(gt, { event: r })
+            /* @__PURE__ */ e.jsx(Le, { event: l })
           ] })
         ] }, a)) })
       ] }),
-      e.error && /* @__PURE__ */ n.jsxs("div", { className: "p-4 bg-red-800/10", children: [
-        /* @__PURE__ */ n.jsx("div", { className: "text-sm text-red-800 dark:text-red-400 font-semibold", children: e.error.message }),
-        /* @__PURE__ */ n.jsx("div", { className: "text-sm text-red-800 dark:text-red-400 pl-4", children: e.error.stack })
+      r.error && /* @__PURE__ */ e.jsxs("div", { className: "p-4 bg-red-800/10", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "text-sm text-red-800 dark:text-red-400 font-semibold", children: r.error.message }),
+        /* @__PURE__ */ e.jsx("div", { className: "text-sm text-red-800 dark:text-red-400 pl-4", children: r.error.stack })
       ] })
     ]
   }
-)), yt = D(({ groupId: e }) => {
-  const { data: t } = Se({
+)), ze = N(({ groupId: r }) => {
+  const { data: s } = pe({
     streamName: "motia-trace-group",
     groupId: "default",
-    id: e
-  }), { data: r } = me({ streamName: "motia-trace", groupId: e }), a = ut(t), [o, c] = G(1), l = F((x) => x.selectedTraceId), i = F((x) => x.selectTraceId), u = J(() => r?.find((x) => x.id === l), [r, l]), m = () => {
-    o > 0.5 && c(o - 0.1);
+    id: r
+  }), { data: l } = H({ streamName: "motia-trace", groupId: r }), a = Pe(s), [o, u] = C(1), x = _((p) => p.selectedTraceId), d = _((p) => p.selectTraceId), i = F(() => l?.find((p) => p.id === x), [l, x]), k = () => {
+    o > 0.5 && u(o - 0.1);
   };
-  return t ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    /* @__PURE__ */ n.jsx("div", { className: "flex flex-col flex-1 overflow-x-auto h-full relative", children: /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col items-center min-w-full sticky top-0", style: { width: `${o * 1e3}px` }, children: [
-      /* @__PURE__ */ n.jsxs("div", { className: "flex flex-1 w-full sticky top-0 bg-background z-10", children: [
-        /* @__PURE__ */ n.jsxs("div", { className: "w-full min-h-[37px] h-[37px] min-w-[200px] max-w-[200px] flex items-center justify-center gap-2 sticky left-0 top-0 bg-card backdrop-blur-[4px] backdrop-filter", children: [
-          /* @__PURE__ */ n.jsx(q, { variant: "icon", size: "sm", className: "px-2", onClick: m, children: /* @__PURE__ */ n.jsx(Ge, { className: "w-4 h-4 cursor-pointer" }) }),
-          /* @__PURE__ */ n.jsxs("span", { className: "text-sm font-bold text-muted-foreground", children: [
+  return s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("div", { className: "flex flex-col flex-1 overflow-x-auto h-full relative", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center min-w-full sticky top-0", style: { width: `${o * 1e3}px` }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 w-full sticky top-0 bg-background z-10", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "w-full min-h-[37px] h-[37px] min-w-[200px] max-w-[200px] flex items-center justify-center gap-2 sticky left-0 top-0 bg-card backdrop-blur-[4px] backdrop-filter", children: [
+          /* @__PURE__ */ e.jsx(P, { variant: "icon", size: "sm", className: "px-2", onClick: k, children: /* @__PURE__ */ e.jsx(Ee, { className: "w-4 h-4 cursor-pointer" }) }),
+          /* @__PURE__ */ e.jsxs("span", { className: "text-sm font-bold text-muted-foreground", children: [
             Math.floor(o * 100),
             "%"
           ] }),
-          /* @__PURE__ */ n.jsx(q, { variant: "icon", size: "sm", className: "px-2", onClick: () => c(o + 0.1), children: /* @__PURE__ */ n.jsx(He, { className: "w-4 h-4 cursor-pointer" }) })
+          /* @__PURE__ */ e.jsx(P, { variant: "icon", size: "sm", className: "px-2", onClick: () => u(o + 0.1), children: /* @__PURE__ */ e.jsx(we, { className: "w-4 h-4 cursor-pointer" }) })
         ] }),
-        /* @__PURE__ */ n.jsxs("div", { className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card", children: [
-          /* @__PURE__ */ n.jsx("span", { children: k(0) }),
-          /* @__PURE__ */ n.jsx("span", { children: k(Math.floor((a - t.startTime) * 0.25)) }),
-          /* @__PURE__ */ n.jsx("span", { children: k(Math.floor((a - t.startTime) * 0.5)) }),
-          /* @__PURE__ */ n.jsx("span", { children: k(Math.floor((a - t.startTime) * 0.75)) }),
-          /* @__PURE__ */ n.jsx("span", { children: k(Math.floor(a - t.startTime)) }),
-          /* @__PURE__ */ n.jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [
-            /* @__PURE__ */ n.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
-            /* @__PURE__ */ n.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
-            /* @__PURE__ */ n.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
-            /* @__PURE__ */ n.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
-            /* @__PURE__ */ n.jsx("span", { className: "w-[1px] h-full bg-blue-500" })
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card", children: [
+          /* @__PURE__ */ e.jsx("span", { children: b(0) }),
+          /* @__PURE__ */ e.jsx("span", { children: b(Math.floor((a - s.startTime) * 0.25)) }),
+          /* @__PURE__ */ e.jsx("span", { children: b(Math.floor((a - s.startTime) * 0.5)) }),
+          /* @__PURE__ */ e.jsx("span", { children: b(Math.floor((a - s.startTime) * 0.75)) }),
+          /* @__PURE__ */ e.jsx("span", { children: b(Math.floor(a - s.startTime)) }),
+          /* @__PURE__ */ e.jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
+            /* @__PURE__ */ e.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
+            /* @__PURE__ */ e.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
+            /* @__PURE__ */ e.jsx("span", { className: "w-[1px] h-full bg-blue-500" }),
+            /* @__PURE__ */ e.jsx("span", { className: "w-[1px] h-full bg-blue-500" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ n.jsx("div", { className: "flex flex-col w-full h-full", children: r?.map((x) => /* @__PURE__ */ n.jsx(mt, { trace: x, group: t, groupEndTime: a, onExpand: i }, x.id)) })
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col w-full h-full", children: l?.map((p) => /* @__PURE__ */ e.jsx(Ce, { trace: p, group: s, groupEndTime: a, onExpand: d }, p.id)) })
     ] }) }),
-    u && /* @__PURE__ */ n.jsx(vt, { trace: u, onClose: () => i(void 0) })
+    i && /* @__PURE__ */ e.jsx(Ye, { trace: i, onClose: () => d(void 0) })
   ] }) : null;
-});
-function p(e) {
-  const t = Object.prototype.toString.call(e);
-  return e instanceof Date || typeof e == "object" && t === "[object Date]" ? new e.constructor(+e) : typeof e == "number" || t === "[object Number]" || typeof e == "string" || t === "[object String]" ? new Date(e) : /* @__PURE__ */ new Date(NaN);
-}
-function jt(e, t) {
-  return e instanceof Date ? new e.constructor(t) : new Date(t);
-}
-const O = 43200, ce = 1440;
-let wt = {};
-function Nt() {
-  return wt;
-}
-function le(e) {
-  const t = p(e), r = new Date(
-    Date.UTC(
-      t.getFullYear(),
-      t.getMonth(),
-      t.getDate(),
-      t.getHours(),
-      t.getMinutes(),
-      t.getSeconds(),
-      t.getMilliseconds()
-    )
-  );
-  return r.setUTCFullYear(t.getFullYear()), +e - +r;
-}
-function I(e, t) {
-  const r = p(e), a = p(t), o = r.getTime() - a.getTime();
-  return o < 0 ? -1 : o > 0 ? 1 : o;
-}
-function Tt(e) {
-  return jt(e, Date.now());
-}
-function kt(e, t) {
-  const r = p(e), a = p(t), o = r.getFullYear() - a.getFullYear(), c = r.getMonth() - a.getMonth();
-  return o * 12 + c;
-}
-function Mt(e) {
-  return (t) => {
-    const r = Math.trunc, a = r(t);
-    return a === 0 ? 0 : a;
-  };
-}
-function _t(e, t) {
-  return +p(e) - +p(t);
-}
-function Et(e) {
-  const t = p(e);
-  return t.setHours(23, 59, 59, 999), t;
-}
-function St(e) {
-  const t = p(e), r = t.getMonth();
-  return t.setFullYear(t.getFullYear(), r + 1, 0), t.setHours(23, 59, 59, 999), t;
-}
-function Pt(e) {
-  const t = p(e);
-  return +Et(t) == +St(t);
-}
-function Rt(e, t) {
-  const r = p(e), a = p(t), o = I(r, a), c = Math.abs(
-    kt(r, a)
-  );
-  let l;
-  if (c < 1)
-    l = 0;
-  else {
-    r.getMonth() === 1 && r.getDate() > 27 && r.setDate(30), r.setMonth(r.getMonth() - o * c);
-    let i = I(r, a) === -o;
-    Pt(p(e)) && c === 1 && I(e, a) === 1 && (i = !1), l = o * (c - Number(i));
-  }
-  return l === 0 ? 0 : l;
-}
-function Ct(e, t, r) {
-  const a = _t(e, t) / 1e3;
-  return Mt()(a);
-}
-const Dt = {
-  lessThanXSeconds: {
-    one: "less than a second",
-    other: "less than {{count}} seconds"
-  },
-  xSeconds: {
-    one: "1 second",
-    other: "{{count}} seconds"
-  },
-  halfAMinute: "half a minute",
-  lessThanXMinutes: {
-    one: "less than a minute",
-    other: "less than {{count}} minutes"
-  },
-  xMinutes: {
-    one: "1 minute",
-    other: "{{count}} minutes"
-  },
-  aboutXHours: {
-    one: "about 1 hour",
-    other: "about {{count}} hours"
-  },
-  xHours: {
-    one: "1 hour",
-    other: "{{count}} hours"
-  },
-  xDays: {
-    one: "1 day",
-    other: "{{count}} days"
-  },
-  aboutXWeeks: {
-    one: "about 1 week",
-    other: "about {{count}} weeks"
-  },
-  xWeeks: {
-    one: "1 week",
-    other: "{{count}} weeks"
-  },
-  aboutXMonths: {
-    one: "about 1 month",
-    other: "about {{count}} months"
-  },
-  xMonths: {
-    one: "1 month",
-    other: "{{count}} months"
-  },
-  aboutXYears: {
-    one: "about 1 year",
-    other: "about {{count}} years"
-  },
-  xYears: {
-    one: "1 year",
-    other: "{{count}} years"
-  },
-  overXYears: {
-    one: "over 1 year",
-    other: "over {{count}} years"
-  },
-  almostXYears: {
-    one: "almost 1 year",
-    other: "almost {{count}} years"
-  }
-}, At = (e, t, r) => {
-  let a;
-  const o = Dt[e];
-  return typeof o == "string" ? a = o : t === 1 ? a = o.one : a = o.other.replace("{{count}}", t.toString()), r?.addSuffix ? r.comparison && r.comparison > 0 ? "in " + a : a + " ago" : a;
-};
-function z(e) {
-  return (t = {}) => {
-    const r = t.width ? String(t.width) : e.defaultWidth;
-    return e.formats[r] || e.formats[e.defaultWidth];
-  };
-}
-const Ot = {
-  full: "EEEE, MMMM do, y",
-  long: "MMMM do, y",
-  medium: "MMM d, y",
-  short: "MM/dd/yyyy"
-}, It = {
-  full: "h:mm:ss a zzzz",
-  long: "h:mm:ss a z",
-  medium: "h:mm:ss a",
-  short: "h:mm a"
-}, Ft = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: "{{date}}, {{time}}",
-  short: "{{date}}, {{time}}"
-}, Wt = {
-  date: z({
-    formats: Ot,
-    defaultWidth: "full"
-  }),
-  time: z({
-    formats: It,
-    defaultWidth: "full"
-  }),
-  dateTime: z({
-    formats: Ft,
-    defaultWidth: "full"
-  })
-}, $t = {
-  lastWeek: "'last' eeee 'at' p",
-  yesterday: "'yesterday at' p",
-  today: "'today at' p",
-  tomorrow: "'tomorrow at' p",
-  nextWeek: "eeee 'at' p",
-  other: "P"
-}, Lt = (e, t, r, a) => $t[e];
-function P(e) {
-  return (t, r) => {
-    const a = r?.context ? String(r.context) : "standalone";
-    let o;
-    if (a === "formatting" && e.formattingValues) {
-      const l = e.defaultFormattingWidth || e.defaultWidth, i = r?.width ? String(r.width) : l;
-      o = e.formattingValues[i] || e.formattingValues[l];
-    } else {
-      const l = e.defaultWidth, i = r?.width ? String(r.width) : e.defaultWidth;
-      o = e.values[i] || e.values[l];
-    }
-    const c = e.argumentCallback ? e.argumentCallback(t) : t;
-    return o[c];
-  };
-}
-const Yt = {
-  narrow: ["B", "A"],
-  abbreviated: ["BC", "AD"],
-  wide: ["Before Christ", "Anno Domini"]
-}, Vt = {
-  narrow: ["1", "2", "3", "4"],
-  abbreviated: ["Q1", "Q2", "Q3", "Q4"],
-  wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
-}, zt = {
-  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
-  abbreviated: [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec"
-  ],
-  wide: [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December"
-  ]
-}, Xt = {
-  narrow: ["S", "M", "T", "W", "T", "F", "S"],
-  short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
-  abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  wide: [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday"
-  ]
-}, qt = {
-  narrow: {
-    am: "a",
-    pm: "p",
-    midnight: "mi",
-    noon: "n",
-    morning: "morning",
-    afternoon: "afternoon",
-    evening: "evening",
-    night: "night"
-  },
-  abbreviated: {
-    am: "AM",
-    pm: "PM",
-    midnight: "midnight",
-    noon: "noon",
-    morning: "morning",
-    afternoon: "afternoon",
-    evening: "evening",
-    night: "night"
-  },
-  wide: {
-    am: "a.m.",
-    pm: "p.m.",
-    midnight: "midnight",
-    noon: "noon",
-    morning: "morning",
-    afternoon: "afternoon",
-    evening: "evening",
-    night: "night"
-  }
-}, Gt = {
-  narrow: {
-    am: "a",
-    pm: "p",
-    midnight: "mi",
-    noon: "n",
-    morning: "in the morning",
-    afternoon: "in the afternoon",
-    evening: "in the evening",
-    night: "at night"
-  },
-  abbreviated: {
-    am: "AM",
-    pm: "PM",
-    midnight: "midnight",
-    noon: "noon",
-    morning: "in the morning",
-    afternoon: "in the afternoon",
-    evening: "in the evening",
-    night: "at night"
-  },
-  wide: {
-    am: "a.m.",
-    pm: "p.m.",
-    midnight: "midnight",
-    noon: "noon",
-    morning: "in the morning",
-    afternoon: "in the afternoon",
-    evening: "in the evening",
-    night: "at night"
-  }
-}, Jt = (e, t) => {
-  const r = Number(e), a = r % 100;
-  if (a > 20 || a < 10)
-    switch (a % 10) {
-      case 1:
-        return r + "st";
-      case 2:
-        return r + "nd";
-      case 3:
-        return r + "rd";
-    }
-  return r + "th";
-}, Ut = {
-  ordinalNumber: Jt,
-  era: P({
-    values: Yt,
-    defaultWidth: "wide"
-  }),
-  quarter: P({
-    values: Vt,
-    defaultWidth: "wide",
-    argumentCallback: (e) => e - 1
-  }),
-  month: P({
-    values: zt,
-    defaultWidth: "wide"
-  }),
-  day: P({
-    values: Xt,
-    defaultWidth: "wide"
-  }),
-  dayPeriod: P({
-    values: qt,
-    defaultWidth: "wide",
-    formattingValues: Gt,
-    defaultFormattingWidth: "wide"
-  })
-};
-function R(e) {
-  return (t, r = {}) => {
-    const a = r.width, o = a && e.matchPatterns[a] || e.matchPatterns[e.defaultMatchWidth], c = t.match(o);
-    if (!c)
-      return null;
-    const l = c[0], i = a && e.parsePatterns[a] || e.parsePatterns[e.defaultParseWidth], u = Array.isArray(i) ? Ht(i, (v) => v.test(l)) : (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
-      Bt(i, (v) => v.test(l))
-    );
-    let m;
-    m = e.valueCallback ? e.valueCallback(u) : u, m = r.valueCallback ? (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
-      r.valueCallback(m)
-    ) : m;
-    const x = t.slice(l.length);
-    return { value: m, rest: x };
-  };
-}
-function Bt(e, t) {
-  for (const r in e)
-    if (Object.prototype.hasOwnProperty.call(e, r) && t(e[r]))
-      return r;
-}
-function Ht(e, t) {
-  for (let r = 0; r < e.length; r++)
-    if (t(e[r]))
-      return r;
-}
-function Qt(e) {
-  return (t, r = {}) => {
-    const a = t.match(e.matchPattern);
-    if (!a) return null;
-    const o = a[0], c = t.match(e.parsePattern);
-    if (!c) return null;
-    let l = e.valueCallback ? e.valueCallback(c[0]) : c[0];
-    l = r.valueCallback ? r.valueCallback(l) : l;
-    const i = t.slice(o.length);
-    return { value: l, rest: i };
-  };
-}
-const Zt = /^(\d+)(th|st|nd|rd)?/i, Kt = /\d+/i, en = {
-  narrow: /^(b|a)/i,
-  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
-  wide: /^(before christ|before common era|anno domini|common era)/i
-}, tn = {
-  any: [/^b/i, /^(a|c)/i]
-}, nn = {
-  narrow: /^[1234]/i,
-  abbreviated: /^q[1234]/i,
-  wide: /^[1234](th|st|nd|rd)? quarter/i
-}, rn = {
-  any: [/1/i, /2/i, /3/i, /4/i]
-}, an = {
-  narrow: /^[jfmasond]/i,
-  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
-  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
-}, sn = {
-  narrow: [
-    /^j/i,
-    /^f/i,
-    /^m/i,
-    /^a/i,
-    /^m/i,
-    /^j/i,
-    /^j/i,
-    /^a/i,
-    /^s/i,
-    /^o/i,
-    /^n/i,
-    /^d/i
-  ],
-  any: [
-    /^ja/i,
-    /^f/i,
-    /^mar/i,
-    /^ap/i,
-    /^may/i,
-    /^jun/i,
-    /^jul/i,
-    /^au/i,
-    /^s/i,
-    /^o/i,
-    /^n/i,
-    /^d/i
-  ]
-}, on = {
-  narrow: /^[smtwf]/i,
-  short: /^(su|mo|tu|we|th|fr|sa)/i,
-  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
-  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
-}, cn = {
-  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
-  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
-}, ln = {
-  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
-  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
-}, dn = {
-  any: {
-    am: /^a/i,
-    pm: /^p/i,
-    midnight: /^mi/i,
-    noon: /^no/i,
-    morning: /morning/i,
-    afternoon: /afternoon/i,
-    evening: /evening/i,
-    night: /night/i
-  }
-}, un = {
-  ordinalNumber: Qt({
-    matchPattern: Zt,
-    parsePattern: Kt,
-    valueCallback: (e) => parseInt(e, 10)
-  }),
-  era: R({
-    matchPatterns: en,
-    defaultMatchWidth: "wide",
-    parsePatterns: tn,
-    defaultParseWidth: "any"
-  }),
-  quarter: R({
-    matchPatterns: nn,
-    defaultMatchWidth: "wide",
-    parsePatterns: rn,
-    defaultParseWidth: "any",
-    valueCallback: (e) => e + 1
-  }),
-  month: R({
-    matchPatterns: an,
-    defaultMatchWidth: "wide",
-    parsePatterns: sn,
-    defaultParseWidth: "any"
-  }),
-  day: R({
-    matchPatterns: on,
-    defaultMatchWidth: "wide",
-    parsePatterns: cn,
-    defaultParseWidth: "any"
-  }),
-  dayPeriod: R({
-    matchPatterns: ln,
-    defaultMatchWidth: "any",
-    parsePatterns: dn,
-    defaultParseWidth: "any"
-  })
-}, mn = {
-  code: "en-US",
-  formatDistance: At,
-  formatLong: Wt,
-  formatRelative: Lt,
-  localize: Ut,
-  match: un,
-  options: {
-    weekStartsOn: 0,
-    firstWeekContainsDate: 1
-  }
-};
-function fn(e, t, r) {
-  const a = Nt(), o = r?.locale ?? a.locale ?? mn, c = 2520, l = I(e, t);
-  if (isNaN(l))
-    throw new RangeError("Invalid time value");
-  const i = Object.assign({}, r, {
-    addSuffix: r?.addSuffix,
-    comparison: l
-  });
-  let u, m;
-  l > 0 ? (u = p(t), m = p(e)) : (u = p(e), m = p(t));
-  const x = Ct(m, u), v = (le(m) - le(u)) / 1e3, h = Math.round((x - v) / 60);
-  let y;
-  if (h < 2)
-    return h === 0 ? o.formatDistance("lessThanXMinutes", 1, i) : o.formatDistance("xMinutes", h, i);
-  if (h < 45)
-    return o.formatDistance("xMinutes", h, i);
-  if (h < 90)
-    return o.formatDistance("aboutXHours", 1, i);
-  if (h < ce) {
-    const j = Math.round(h / 60);
-    return o.formatDistance("aboutXHours", j, i);
-  } else {
-    if (h < c)
-      return o.formatDistance("xDays", 1, i);
-    if (h < O) {
-      const j = Math.round(h / ce);
-      return o.formatDistance("xDays", j, i);
-    } else if (h < O * 2)
-      return y = Math.round(h / O), o.formatDistance("aboutXMonths", y, i);
-  }
-  if (y = Rt(m, u), y < 12) {
-    const j = Math.round(h / O);
-    return o.formatDistance("xMonths", j, i);
-  } else {
-    const j = y % 12, M = Math.trunc(y / 12);
-    return j < 3 ? o.formatDistance("aboutXYears", M, i) : j < 9 ? o.formatDistance("overXYears", M, i) : o.formatDistance("almostXYears", M + 1, i);
-  }
-}
-function hn(e, t) {
-  return fn(e, Tt(e), t);
-}
-const xn = ({ status: e, duration: t }) => {
-  const r = J(() => e === "running" ? "info" : e === "completed" ? "success" : e === "failed" ? "error" : "default", [e]);
-  return /* @__PURE__ */ n.jsx(fe, { variant: r, children: t && e !== "failed" ? t : e });
-}, pn = D(({ groups: e, selectedGroupId: t, onGroupSelect: r }) => /* @__PURE__ */ n.jsx("div", { className: "overflow-auto", children: e.length > 0 && /* @__PURE__ */ n.jsx("div", { children: [...e].reverse().map((a) => /* @__PURE__ */ n.jsx(
+}), We = ({ status: r, duration: s }) => {
+  const l = F(() => r === "running" ? "info" : r === "completed" ? "success" : r === "failed" ? "error" : "default", [r]);
+  return /* @__PURE__ */ e.jsx(Q, { variant: l, children: s && r !== "failed" ? s : r });
+}, Ue = N(({ groups: r, selectedGroupId: s, onGroupSelect: l }) => /* @__PURE__ */ e.jsx("div", { className: "overflow-auto", children: r.length > 0 && /* @__PURE__ */ e.jsx("div", { children: [...r].reverse().map((a) => /* @__PURE__ */ e.jsx(
   "div",
   {
     "data-testid": `trace-${a.id}`,
-    className: U(
+    className: D(
       "motia-trace-group cursor-pointer transition-colors",
-      t === a.id ? "bg-muted-foreground/10" : "hover:bg-muted/70"
+      s === a.id ? "bg-muted-foreground/10" : "hover:bg-muted/70"
     ),
-    onClick: () => r(a),
-    children: /* @__PURE__ */ n.jsxs("div", { className: "p-3 flex flex-col gap-1", children: [
-      /* @__PURE__ */ n.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
-        /* @__PURE__ */ n.jsx("span", { className: "font-semibold text-lg", children: a.name }),
-        /* @__PURE__ */ n.jsx(
-          xn,
+    onClick: () => l(a),
+    children: /* @__PURE__ */ e.jsxs("div", { className: "p-3 flex flex-col gap-1", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+        /* @__PURE__ */ e.jsx("span", { className: "font-semibold text-lg", children: a.name }),
+        /* @__PURE__ */ e.jsx(
+          We,
           {
             status: a.status,
-            duration: a.endTime ? k(a.endTime - a.startTime) : void 0
+            duration: a.endTime ? b(a.endTime - a.startTime) : void 0
           }
         )
       ] }),
-      /* @__PURE__ */ n.jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
-        /* @__PURE__ */ n.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ n.jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: a.id }),
-          /* @__PURE__ */ n.jsxs("span", { children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ e.jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: a.id }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
             a.metadata.totalSteps,
             " steps"
           ] })
         ] }),
-        /* @__PURE__ */ n.jsxs("div", { className: "flex justify-between", children: [
-          hn(a.startTime),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between", children: [
+          Se(a.startTime),
           " ago"
         ] }),
-        a.metadata.activeSteps > 0 && /* @__PURE__ */ n.jsxs("div", { className: "text-blue-600", children: [
+        a.metadata.activeSteps > 0 && /* @__PURE__ */ e.jsxs("div", { className: "text-blue-600", children: [
           a.metadata.activeSteps,
           " active"
         ] })
@@ -1304,65 +524,65 @@ const xn = ({ status: e, duration: t }) => {
     ] })
   },
   a.id
-)) }) })), jn = () => {
-  const e = F((u) => u.selectedTraceGroupId), t = F((u) => u.selectTraceGroupId), { data: r } = me({ streamName: "motia-trace-group", groupId: "default" }), a = (u) => t(u.id), [o, c] = G(""), l = () => fetch("/__motia/trace/clear", { method: "POST" }), i = J(
-    () => r?.filter(
-      (u) => u.name.toLowerCase().includes(o.toLowerCase()) || u.id.toLowerCase().includes(o.toLowerCase())
+)) }) })), Qe = () => {
+  const r = _((i) => i.selectedTraceGroupId), s = _((i) => i.selectTraceGroupId), { data: l } = H({ streamName: "motia-trace-group", groupId: "default" }), a = (i) => s(i.id), [o, u] = C(""), x = () => fetch("/__motia/trace/clear", { method: "POST" }), d = F(
+    () => l?.filter(
+      (i) => i.name.toLowerCase().includes(o.toLowerCase()) || i.id.toLowerCase().includes(o.toLowerCase())
     ),
-    [r, o]
+    [l, o]
   );
-  return ue(() => {
-    if (i && i.length > 0) {
-      const u = i[i.length - 1];
-      u && u.status === "running" && u.id !== e && t(u.id);
-    } else e && t(void 0);
-  }, [i]), /* @__PURE__ */ n.jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full", children: [
-    /* @__PURE__ */ n.jsxs("div", { className: "flex p-2 border-b gap-2", "data-testid": "logs-search-container", children: [
-      /* @__PURE__ */ n.jsxs("div", { className: "flex-1 relative", children: [
-        /* @__PURE__ */ n.jsx(
-          Ce,
+  return Z(() => {
+    if (d && d.length > 0) {
+      const i = d[d.length - 1];
+      i && i.status === "running" && i.id !== r && s(i.id);
+    } else r && s(void 0);
+  }, [d]), /* @__PURE__ */ e.jsxs("div", { className: "grid grid-rows-[auto_1fr] h-full", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex p-2 border-b gap-2", "data-testid": "logs-search-container", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex-1 relative", children: [
+        /* @__PURE__ */ e.jsx(
+          be,
           {
             variant: "shade",
             value: o,
-            onChange: (u) => c(u.target.value),
+            onChange: (i) => u(i.target.value),
             className: "px-9 font-medium",
             placeholder: "Search by Trace ID or Step Name"
           }
         ),
-        /* @__PURE__ */ n.jsx(nt, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }),
-        /* @__PURE__ */ n.jsx(
-          xe,
+        /* @__PURE__ */ e.jsx(_e, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }),
+        /* @__PURE__ */ e.jsx(
+          K,
           {
-            className: U(
+            className: D(
               "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: o !== "",
                 invisible: o === ""
               }
             ),
-            onClick: () => c("")
+            onClick: () => u("")
           }
         )
       ] }),
-      /* @__PURE__ */ n.jsxs(q, { variant: "default", onClick: l, className: "h-[34px]", children: [
-        /* @__PURE__ */ n.jsx(at, {}),
+      /* @__PURE__ */ e.jsxs(P, { variant: "default", onClick: x, className: "h-[34px]", children: [
+        /* @__PURE__ */ e.jsx(ke, {}),
         " Clear"
       ] })
     ] }),
-    /* @__PURE__ */ n.jsxs("div", { className: "grid grid-cols-[300px_1fr] overflow-hidden", children: [
-      /* @__PURE__ */ n.jsx("div", { className: "w-[300px] border-r border-border overflow-auto h-full", "data-testid": "traces-container", children: /* @__PURE__ */ n.jsx(pn, { groups: i, selectedGroupId: e, onGroupSelect: a }) }),
-      /* @__PURE__ */ n.jsxs("div", { className: "overflow-auto", "data-testid": "trace-details", children: [
-        e && /* @__PURE__ */ n.jsx(yt, { groupId: e }),
-        !e && /* @__PURE__ */ n.jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select a trace or trace group to view the timeline" })
+    /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-[300px_1fr] overflow-hidden", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "w-[300px] border-r border-border overflow-auto h-full", "data-testid": "traces-container", children: /* @__PURE__ */ e.jsx(Ue, { groups: d, selectedGroupId: r, onGroupSelect: a }) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "overflow-auto", "data-testid": "trace-details", children: [
+        r && /* @__PURE__ */ e.jsx(ze, { groupId: r }),
+        !r && /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select a trace or trace group to view the timeline" })
       ] })
     ] })
   ] });
-}, bn = D(() => /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-  /* @__PURE__ */ n.jsx(Ve, { "aria-hidden": "true" }),
-  /* @__PURE__ */ n.jsx("span", { children: "Tracing" })
+}, Be = N(() => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  /* @__PURE__ */ e.jsx(Re, { "aria-hidden": "true" }),
+  /* @__PURE__ */ e.jsx("span", { children: "Tracing" })
 ] }));
-bn.displayName = "ObservabilityTabLabel";
+Be.displayName = "ObservabilityTabLabel";
 export {
-  jn as ObservabilityPage,
-  bn as ObservabilityTabLabel
+  Qe as ObservabilityPage,
+  Be as ObservabilityTabLabel
 };